{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chip",
  "type": "registry:ui",
  "title": "Chip",
  "description": "A chip component that can be used to display small blocks of information.",
  "files": [
    {
      "path": "registry/tra-kit/components/chip.tsx",
      "content": "import { XIcon } from '@phosphor-icons/react';\r\nimport { cva } from 'class-variance-authority';\r\nimport React from 'react';\r\nimport { cn } from '@/lib/utils';\r\n\r\nconst chipVariants = cva(\r\n  `rounded-4xl  border-disabled-dark text-disabled-dark hover:bg-disabled-dark/10 hover:text-disabled-dark flex w-fit select-none items-center\r\n  border  transition-colors`,\r\n  {\r\n    variants: {\r\n      size: {\r\n        default: 'px-5 py-1.5 text-base',\r\n        sm: 'px-4 py-1 text-sm',\r\n        lg: 'px-6 py-1.5 text-lg',\r\n      },\r\n      clickable: {\r\n        true: 'cursor-pointer',\r\n        false: 'cursor-default',\r\n      },\r\n      active: {\r\n        true: 'border-primary text-primary hover:border-primary/70 hover:text-primary/70',\r\n        false: '',\r\n      },\r\n      selected: {\r\n        true: 'border-primary bg-primary text-neutral-white hover:bg-primary/90',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      size: 'default',\r\n      clickable: false,\r\n      active: false,\r\n      selected: false,\r\n    },\r\n  },\r\n);\r\n\r\ninterface IChip {\r\n  active?: boolean;\r\n  deleteIcon?: React.ReactNode;\r\n  endIcon?: React.ReactNode;\r\n  id?: string;\r\n  label?: string;\r\n  labelClassName?: string;\r\n  onClick?: (e: string | number | undefined | null) => void;\r\n  onDelete?: (e: string | number | undefined | null) => void;\r\n  selected?: boolean;\r\n  size?: 'default' | 'sm' | 'lg';\r\n  startIcon?: React.ReactNode;\r\n}\r\n\r\nconst Chip = React.forwardRef<HTMLButtonElement, IChip>(\r\n  (\r\n    {\r\n      active = false,\r\n      deleteIcon,\r\n      endIcon,\r\n      id,\r\n      label,\r\n      labelClassName,\r\n      onClick,\r\n      onDelete,\r\n      selected = false,\r\n      size = 'default',\r\n      startIcon,\r\n    },\r\n    ref,\r\n  ) => (\r\n    <button\r\n      ref={ref}\r\n      id={id}\r\n      className={cn(chipVariants({ size, clickable: Boolean(onClick), active, selected }))}\r\n      type=\"button\"\r\n      onClick={onClick ? () => onClick(id) : () => {}}\r\n    >\r\n      {startIcon && <span className=\"mr-1.5\">{startIcon}</span>}\r\n      <span className={`TraChipLabel ${cn(labelClassName)}`}>{label}</span>\r\n      {endIcon && <span className=\"ml-1.5\">{endIcon}</span>}\r\n      {onDelete && (\r\n        <div\r\n          role=\"button\"\r\n          tabIndex={0}\r\n          onClick={(e) => {\r\n            e.stopPropagation();\r\n            onDelete(id);\r\n          }}\r\n          onKeyPress={(e) => {\r\n            if (e.key === 'Enter') {\r\n              e.stopPropagation();\r\n              onDelete(id);\r\n            }\r\n          }}\r\n          className=\"hover:bg-primary/50 hover:text-primary-5 ml-1 rounded-full p-0.5\"\r\n        >\r\n          {deleteIcon ?? <XIcon />}\r\n        </div>\r\n      )}\r\n    </button>\r\n  ),\r\n);\r\n\r\nexport default Chip;\r\n",
      "type": "registry:ui"
    }
  ]
}