{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tag-group",
  "dependencies": [
    "lucide-react",
    "react-aria-components",
    "tailwind-variants"
  ],
  "registryDependencies": [
    "https://taki-ui.com/r/field.json",
    "https://taki-ui.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/tag-group.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\nimport { XIcon } from \"lucide-react\"\nimport {\n  Tag as AriaTag,\n  TagGroup as AriaTagGroup,\n  TagGroupProps as AriaTagGroupProps,\n  TagProps as AriaTagProps,\n  Button,\n  composeRenderProps,\n  TagList,\n  TagListProps,\n  Text,\n} from \"react-aria-components\"\nimport { tv } from \"tailwind-variants\"\n\nimport { cn, focusRing } from \"../lib/utils\"\nimport { FieldDescription, FieldLabel } from \"./field\"\n\nconst tagStyles = tv({\n  extend: focusRing,\n  base: \"transition-colors cursor-default text-xs rounded-md border px-2.5 py-1 flex items-center max-w-fit gap-1.5 outline-none\",\n  variants: {\n    variant: {\n      default:\n        \"border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n      primary:\n        \"border-transparent bg-primary text-primary-foreground hover:bg-primary/90\",\n      secondary:\n        \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n      destructive:\n        \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n      outline:\n        \"border-border bg-background hover:bg-accent hover:text-accent-foreground\",\n    },\n    allowsRemoving: {\n      true: \"pr-1\",\n    },\n    isSelected: {\n      true: \"bg-primary hover:text-primary-foreground  text-primary-foreground border-transparent hover:bg-primary/90\",\n    },\n    isDisabled: {\n      true: \"pointer-events-none opacity-50\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nexport interface TagGroupProps<T>\n  extends Omit<AriaTagGroupProps, \"children\">,\n    Pick<TagListProps<T>, \"items\" | \"children\" | \"renderEmptyState\"> {\n  label?: string\n  description?: string\n  errorMessage?: string\n}\n\nexport interface TagProps extends AriaTagProps {\n  variant?: \"default\" | \"primary\" | \"secondary\" | \"destructive\" | \"outline\"\n}\n\nexport function TagGroup<T extends object>({\n  label,\n  description,\n  errorMessage,\n  items,\n  children,\n  renderEmptyState,\n  ...props\n}: TagGroupProps<T>) {\n  return (\n    <AriaTagGroup\n      {...props}\n      className={cn(\"flex flex-col gap-1\", props.className)}\n    >\n      {label && <FieldLabel>{label}</FieldLabel>}\n      <TagList\n        items={items}\n        renderEmptyState={renderEmptyState}\n        className=\"flex flex-wrap gap-1\"\n      >\n        {children}\n      </TagList>\n      {description && <FieldDescription>{description}</FieldDescription>}\n      {errorMessage && (\n        <Text slot=\"errorMessage\" className=\"text-destructive text-sm\">\n          {errorMessage}\n        </Text>\n      )}\n    </AriaTagGroup>\n  )\n}\n\nconst removeButtonStyles = tv({\n  extend: focusRing,\n  base: \"cursor-default rounded-sm transition-colors p-0.5 flex items-center justify-center hover:bg-muted/50 pressed:bg-muted\",\n})\n\nexport function Tag({ children, variant, ...props }: TagProps) {\n  const textValue = typeof children === \"string\" ? children : undefined\n  return (\n    <AriaTag\n      textValue={textValue}\n      {...props}\n      className={composeRenderProps(props.className, (className, renderProps) =>\n        tagStyles({ ...renderProps, className, variant })\n      )}\n    >\n      {({ allowsRemoving }) => (\n        <>\n          {children}\n          {allowsRemoving && (\n            <Button slot=\"remove\" className={removeButtonStyles}>\n              <XIcon aria-hidden className=\"h-3 w-3\" />\n            </Button>\n          )}\n        </>\n      )}\n    </AriaTag>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}