{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chip",
  "title": "Chip",
  "description": "Tags, filters, or selections. 7 themes × 3 variants × 3 sizes; supports icons, avatars, dismiss, and selected state.",
  "dependencies": ["class-variance-authority", "lucide-react"],
  "registryDependencies": [
    "https://indiacn.in/r/theme.json",
    "https://indiacn.in/r/typography.json"
  ],
  "files": [
    {
      "path": "components/ui/chip.tsx",
      "content": "'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { CheckCircle, X } from 'lucide-react';\nimport { ComponentProps, ReactNode } from 'react';\n\nimport { Label2 } from '@/components/ui/typography';\nimport { cn } from '@/lib/utils';\n\n/**\n * Creates an onClick handler for a chip's dismiss button that stops event\n * propagation (so the parent chip click doesn't fire) and no-ops when disabled.\n */\nfunction createDismissHandler(onDismiss: () => void, disabled?: boolean) {\n  return (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    if (!disabled) onDismiss();\n  };\n}\n\n/*\n * UX4G chip: border-radius 8px, padding 6px 12px, font-size 14px, font-weight 400,\n * hover bg #FAEFFF (light purple tint), selected behaves like filled.\n */\nconst CHIP_VARIANTS = cva(\n  'inline-flex cursor-pointer items-center gap-1.5 whitespace-nowrap transition-[color,background-color,border-color,box-shadow] duration-150 ease-in-out focus-visible:outline-none focus-visible:ring-0',\n  {\n    variants: {\n      theme: {\n        primary:\n          '[--chip-bg:var(--color-primary)] [--chip-bg-tonal:var(--color-primary-100)] [--chip-border-color:var(--color-primary)] [--chip-text-color:var(--color-primary)] focus-visible:shadow-focus-primary',\n        secondary:\n          '[--chip-bg:var(--color-secondary)] [--chip-bg-tonal:var(--color-secondary-100)] [--chip-border-color:var(--color-secondary)] [--chip-text-color:var(--color-secondary)] focus-visible:shadow-focus-secondary',\n        success:\n          '[--chip-bg:var(--color-success)] [--chip-bg-tonal:var(--color-success-100)] [--chip-border-color:var(--color-success)] [--chip-text-color:var(--color-success)] focus-visible:shadow-focus-success',\n        danger:\n          '[--chip-bg:var(--color-danger)] [--chip-bg-tonal:var(--color-danger-100)] [--chip-border-color:var(--color-danger)] [--chip-text-color:var(--color-danger)] focus-visible:shadow-focus-danger',\n        warning:\n          '[--chip-bg:var(--color-warning)] [--chip-bg-tonal:var(--color-warning-100)] [--chip-border-color:var(--color-warning)] [--chip-text-color:var(--color-warning)] focus-visible:shadow-focus-warning',\n        info: '[--chip-bg:var(--color-info)] [--chip-bg-tonal:var(--color-info-100)] [--chip-border-color:var(--color-info)] [--chip-text-color:var(--color-info)]',\n        neutral:\n          '[--chip-bg:var(--color-neutral)] [--chip-bg-tonal:var(--color-neutral-100)] [--chip-border-color:var(--color-neutral-200)] [--chip-text-color:var(--color-neutral)] focus-visible:shadow-focus-neutral',\n      },\n      variant: {\n        outlined:\n          'border border-(--chip-border-color) bg-transparent text-(--chip-text-color) hover:bg-(--chip-bg)/8 active:bg-(--chip-bg)/16',\n        filled:\n          'border border-transparent bg-(--chip-bg) text-neutral-0 hover:shadow-xs active:opacity-90',\n        tonal:\n          'border border-transparent bg-(--chip-bg-tonal) text-(--chip-text-color) hover:shadow-xs active:opacity-90',\n      },\n      size: {\n        sm: 'px-2 py-1 rounded-md',\n        md: 'px-3 py-1.5 rounded-lg',\n        lg: 'px-4 py-2.5 rounded-xl',\n      },\n    },\n    defaultVariants: {\n      theme: 'neutral',\n      variant: 'outlined',\n      size: 'md',\n    },\n  },\n);\n\ninterface IChipProps\n  extends Omit<ComponentProps<'div'>, 'color'>,\n    VariantProps<typeof CHIP_VARIANTS> {\n  icon?: ReactNode;\n  avatar?: ReactNode;\n  onDismiss?: () => void;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * A compact chip component for displaying tags, filters, or selections.\n * Matches the UX4G 2.0 Chip specification.\n *\n * Supports:\n * - Visual variants: outlined, filled, tonal\n * - Theme colors: primary, secondary, success, danger, warning, info, neutral\n * - Sizes: sm, md, lg\n * - Avatar / leading icon slot\n * - Dismissible via onDismiss\n * - Selected state (toggled via selected prop)\n * - Disabled state\n */\nfunction Chip({\n  className,\n  variant,\n  theme,\n  size,\n  icon,\n  avatar,\n  onDismiss,\n  selected,\n  disabled,\n  children,\n  ...props\n}: IChipProps) {\n  return (\n    <div\n      role='button'\n      tabIndex={disabled ? -1 : 0}\n      aria-pressed={selected ? true : undefined}\n      data-selected={selected || undefined}\n      data-disabled={disabled || undefined}\n      className={cn(\n        CHIP_VARIANTS({ variant, theme, size, className }),\n        selected && [\n          'text-neutral-0 border-transparent bg-(--chip-bg)',\n          'hover:bg-(--chip-bg) hover:shadow-xs',\n        ],\n        disabled && 'pointer-events-none opacity-50',\n      )}\n      {...props}\n    >\n      {avatar && <div className='-ml-0.5 [&>img]:size-6 [&>img]:rounded-full'>{avatar}</div>}\n      {selected && !icon && <CheckCircle className='size-3.5' />}\n      {icon && <div className='[&>svg]:size-3.5'>{icon}</div>}\n      <Label2 className='mx-0.5'>{children}</Label2>\n      {onDismiss && (\n        <button\n          type='button'\n          onClick={createDismissHandler(onDismiss, disabled)}\n          disabled={disabled}\n          className='ml-0.5 rounded-full opacity-60 transition-opacity hover:opacity-100 focus:outline-none'\n          aria-label='Remove'\n        >\n          <X className='size-3.5' />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport { Chip, CHIP_VARIANTS };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}