{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chip",
  "title": "Chip",
  "description": "Assist, filter, input, and suggestion chips, with selected, removable, and icon states.",
  "dependencies": [
    "@base-ui/react@^1.7.0",
    "lucide-react@^1.33.0"
  ],
  "registryDependencies": [
    "https://guillermo-rebolledo.github.io/materialcn/r/badge.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/utils.json"
  ],
  "files": [
    {
      "path": "src/components/ui/chip.tsx",
      "content": "import type * as React from \"react\"\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\"\nimport { Check, X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge, badgeVariants } from \"./badge\"\n\n/**\n * Kit `Style=Elevated`: Surface Container Low at level 1, level 2 while pressed,\n * no outline.\n */\nconst elevatedChipClassName =\n  \"border-transparent bg-m3-surface-container-low shadow-m3-1 active:not-disabled:shadow-m3-2 disabled:bg-m3-on-surface/12 disabled:shadow-m3-0 disabled:border-transparent\"\n\nconst actionChipClassName =\n  \"cursor-pointer select-none hover:bg-m3-on-surface/8 focus-visible:bg-m3-on-surface/10 active:bg-m3-on-surface/10 disabled:pointer-events-none disabled:border-m3-on-surface/12 disabled:text-m3-on-surface/38 [&_[data-icon]]:text-m3-primary disabled:[&_[data-icon]]:text-m3-on-surface/38\"\n\ntype ActionChipProps = ButtonPrimitive.Props & { elevated?: boolean }\n\nfunction AssistChip({\n  className,\n  elevated = false,\n  type = \"button\",\n  ...props\n}: ActionChipProps) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"assist-chip\"\n      data-elevated={elevated || undefined}\n      type={type}\n      className={cn(\n        badgeVariants({ variant: \"outline\" }),\n        actionChipClassName,\n        // The kit's assist chip label is On Surface (filter / suggestion stay\n        // On Surface Variant).\n        \"text-m3-on-surface\",\n        elevated && elevatedChipClassName,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SuggestionChip({\n  className,\n  elevated = false,\n  type = \"button\",\n  ...props\n}: ActionChipProps) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"suggestion-chip\"\n      data-elevated={elevated || undefined}\n      type={type}\n      className={cn(\n        badgeVariants({ variant: \"outline\" }),\n        actionChipClassName,\n        elevated && elevatedChipClassName,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\ntype FilterChipProps<Value extends string = string> =\n  TogglePrimitive.Props<Value> & {\n    elevated?: boolean\n    selectedIcon?: React.ReactNode\n  }\n\nfunction FilterChip<Value extends string>({\n  children,\n  className,\n  elevated = false,\n  selectedIcon = <Check />,\n  ...props\n}: FilterChipProps<Value>) {\n  return (\n    <TogglePrimitive\n      data-slot=\"filter-chip\"\n      data-elevated={elevated || undefined}\n      className={cn(\n        badgeVariants({ variant: \"outline\" }),\n        elevated && elevatedChipClassName,\n        \"group/filter-chip relative isolate cursor-pointer select-none outline-none after:pointer-events-none after:absolute after:-inset-px after:-z-10 after:rounded-[inherit] after:bg-current after:opacity-0 after:transition-opacity after:duration-(--m3-spring-effects-fast-duration) after:ease-(--m3-spring-effects-fast) hover:not-disabled:after:opacity-8 focus-visible:after:opacity-10 active:not-disabled:after:opacity-10 data-[pressed]:border-transparent data-[pressed]:bg-m3-secondary-container data-[pressed]:text-m3-on-secondary-container disabled:pointer-events-none disabled:border-m3-on-surface/12 disabled:text-m3-on-surface/38\",\n        selectedIcon && \"data-[pressed]:pl-2\",\n        className\n      )}\n      {...props}\n    >\n      {selectedIcon && (\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"filter-chip-selected-icon\"\n          className=\"hidden size-4.5 shrink-0 items-center justify-center group-data-[pressed]/filter-chip:flex [&>svg]:size-4.5\"\n        >\n          {selectedIcon}\n        </span>\n      )}\n      {children}\n    </TogglePrimitive>\n  )\n}\n\ntype InputChipProps = Omit<\n  React.ComponentProps<typeof Badge>,\n  \"aria-disabled\" | \"render\" | \"variant\"\n> &\n  {\n    disabled?: boolean\n    /** Kit `Selected=True`: Secondary Container fill, no outline. */\n    selected?: boolean\n  } & (\n    | {\n        onRemove: React.MouseEventHandler<HTMLButtonElement>\n        removeLabel: string\n      }\n    | {\n        onRemove?: never\n        removeLabel?: never\n      }\n  )\n\nfunction InputChip({\n  children,\n  className,\n  disabled = false,\n  onRemove,\n  removeLabel,\n  selected = false,\n  ...props\n}: InputChipProps) {\n  return (\n    <Badge\n      {...props}\n      aria-disabled={disabled || undefined}\n      data-disabled={disabled ? \"\" : undefined}\n      data-selected={selected || undefined}\n      data-slot=\"input-chip\"\n      variant=\"outline\"\n      className={cn(\n        // Kit: no container fill, 1dp outline-variant stroke, 12dp leading\n        // inset for a label-only chip.\n        \"pl-3 text-m3-on-surface-variant data-disabled:border-m3-on-surface/12 data-disabled:text-m3-on-surface/38 data-disabled:[&_[data-icon]]:text-m3-on-surface/38\",\n        selected && \"border-transparent bg-m3-secondary-container text-m3-on-secondary-container\",\n        className\n      )}\n    >\n      {children}\n      {removeLabel && (\n        <ButtonPrimitive\n          aria-label={removeLabel}\n          data-slot=\"input-chip-remove\"\n          disabled={disabled}\n          type=\"button\"\n          className=\"-my-1 -mr-1 inline-flex size-6 cursor-pointer items-center justify-center rounded-m3-full text-m3-on-surface-variant outline-none hover:bg-m3-on-surface/8 focus-visible:bg-m3-on-surface/10 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-m3-secondary active:bg-m3-on-surface/10 disabled:pointer-events-none [&>svg]:size-4.5\"\n          onClick={onRemove}\n        >\n          <X aria-hidden=\"true\" data-icon=\"inline-end\" />\n        </ButtonPrimitive>\n      )}\n    </Badge>\n  )\n}\n\n/**\n * Material calls this 32dp component a chip. `Badge` is retained as a\n * compatibility name because it is the corresponding shadcn component API.\n */\nconst Chip = Badge\nconst chipVariants = badgeVariants\n\nexport {\n  AssistChip,\n  Chip,\n  FilterChip,\n  InputChip,\n  SuggestionChip,\n  chipVariants,\n  type ActionChipProps,\n  type FilterChipProps,\n  type InputChipProps,\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "display"
  ],
  "type": "registry:ui"
}