{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chip",
  "type": "registry:ui",
  "title": "Chip",
  "description": "Removable filter chip.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@wibo/utils"
  ],
  "files": [
    {
      "path": "src/components/chip.tsx",
      "type": "registry:ui",
      "content": "import type { ComponentProps, ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface ChipProps extends Omit<ComponentProps<\"span\">, \"children\"> {\n  /** Filter name, for example \"Status\". */\n  label: ReactNode;\n  /** Filter value, for example \"Active\". */\n  value?: ReactNode;\n  icon?: ReactNode;\n  /** Shows a remove button. */\n  onRemove?: () => void;\n  /** Accessible name of the remove button. */\n  removeLabel?: string;\n}\n\n/**\n * Active filter shown as a segmented control, as in the Mastra console filter\n * bar: \"Status | Active | x\", the segments split by hairlines. It has the\n * control corner (`rounded-control`) of the toolbar fields beside it.\n */\nfunction Chip({ label, value, icon, onRemove, removeLabel, className, ...props }: ChipProps) {\n  const name = typeof label === \"string\" ? label : \"filter\";\n  return (\n    <span\n      data-slot=\"chip\"\n      className={cn(\n        \"inline-flex h-7 max-w-full items-stretch overflow-hidden rounded-control border border-input bg-card text-label text-foreground shadow-card\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        className={cn(\n          \"flex min-w-0 items-center gap-1.5 px-2.5\",\n          value !== undefined && \"text-muted-foreground\",\n        )}\n      >\n        {icon ? (\n          <span aria-hidden=\"true\" className=\"text-muted-foreground [&_svg]:size-3.5\">\n            {icon}\n          </span>\n        ) : null}\n        <span className=\"truncate\">{label}</span>\n      </span>\n      {value !== undefined ? (\n        <span className=\"flex min-w-0 items-center border-l border-border px-2.5 font-medium\">\n          <span className=\"truncate\">{value}</span>\n        </span>\n      ) : null}\n      {onRemove ? (\n        <button\n          type=\"button\"\n          onClick={onRemove}\n          aria-label={removeLabel ?? `Remove ${name} filter`}\n          className=\"press-icon inline-flex w-7 shrink-0 items-center justify-center border-l border-border text-muted-foreground outline-none hover:bg-foreground/4 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset\"\n        >\n          <X aria-hidden=\"true\" className=\"size-3.5\" />\n        </button>\n      ) : null}\n    </span>\n  );\n}\n\nexport { Chip };\nexport type { ChipProps };\n"
    }
  ]
}