{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chip",
  "type": "registry:ui",
  "dependencies": [
    "class-variance-authority",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "chip.tsx",
      "target": "components/ui/chip.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport const chipVariants = cva(\n  cn(\n    \"inline-flex items-center gap-1.5 rounded-full border font-mono font-medium uppercase tracking-wide\",\n    \"transition-control duration-fast ease-soft\",\n    \"hover:-translate-y-0.5 hover:border-border-strong motion-reduce:transform-none motion-reduce:transition-none\",\n  ),\n  {\n    variants: {\n      tone: {\n        default: \"border-border bg-surface-2 text-muted\",\n        accent:\n          \"border-accent/25 bg-accent/12 text-accent hover:border-accent/40\",\n        \"accent-alt\":\n          \"border-accent-alt/25 bg-accent-alt/12 text-accent-alt hover:border-accent-alt/40\",\n        success:\n          \"border-success/25 bg-success/12 text-success hover:border-success/40\",\n        warning:\n          \"border-warning/25 bg-warning/12 text-warning hover:border-warning/40\",\n        danger:\n          \"border-danger/25 bg-danger/12 text-danger hover:border-danger/40\",\n      },\n      size: {\n        sm: \"h-6 px-2 text-[0.6875rem]\",\n        md: \"h-7 px-2.5 text-xs\",\n      },\n      selected: {\n        true: \"glow-ring border-transparent text-ink hover:border-transparent\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { tone: \"default\", size: \"md\", selected: false },\n  },\n);\n\nexport interface ChipProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"onError\">,\n    VariantProps<typeof chipVariants> {\n  value?: React.ReactNode;\n  onRemove?: () => void;\n  removeLabel?: string;\n}\n\nexport const Chip = React.forwardRef<HTMLSpanElement, ChipProps>(\n  (\n    {\n      className,\n      tone,\n      size,\n      selected,\n      value,\n      onRemove,\n      removeLabel = \"Remove\",\n      children,\n      ...props\n    },\n    ref,\n  ) => (\n    <span\n      ref={ref}\n      className={cn(chipVariants({ tone, size, selected }), className)}\n      {...props}\n    >\n      <span className=\"truncate\">{children}</span>\n      {value !== undefined ? (\n        <span className=\"border-current/20 border-l pl-1.5 font-semibold text-ink tabular-nums\">\n          {value}\n        </span>\n      ) : null}\n      {onRemove ? (\n        <button\n          type=\"button\"\n          aria-label={removeLabel}\n          onClick={onRemove}\n          className={cn(\n            \"-mr-1 relative ml-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full outline-none\",\n            \"text-current/70 transition-control duration-fast ease-soft\",\n            \"hover:bg-current/10 hover:text-current active:scale-90\",\n            \"focus-visible:ring-focus motion-reduce:transform-none motion-reduce:transition-none\",\n            \"before:absolute before:-inset-2.5 before:content-['']\",\n          )}\n        >\n          <RemoveIcon />\n        </button>\n      ) : null}\n    </span>\n  ),\n);\nChip.displayName = \"Chip\";\n\nfunction RemoveIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 12 12\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.5}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"h-3 w-3\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M3 3l6 6M9 3l-6 6\" />\n    </svg>\n  );\n}\n"
    }
  ]
}