{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "dependencies": [
    "@base-ui/react@1.8.0"
  ],
  "description": "A compact tag that can be selected, tinted and dismissed.",
  "docs": "Two steps after installing: import the copied stylesheet once at your app entry — it lands at `styles/liquefy-ui.css` — or `@import` it from your global CSS *before* `tailwindcss`, so Tailwind utilities keep winning over component styles. Then wrap the tree in `<LiquefyProvider>`, which is where every component reads its tokens from. Every copied file already carries its own 'use client' directive. Full documentation: https://liquefy-ui.com/#/docs/installation",
  "files": [
    {
      "content": "'use client'\n\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n  type Ref,\n} from 'react'\nimport { Toggle } from '@base-ui/react/toggle'\nimport { XGlyph } from '@/lib/internal-glyphs'\nimport { useLiquefyConfig } from '@/lib/provider'\nimport { useLiquidStyles, type LiquidStyleProps } from '@/lib/styles-prop'\nimport { useLiquidGlass } from '@/hooks/use-liquid-glass'\n\nexport type LiquidChipProps = HTMLAttributes<HTMLSpanElement> & LiquidStyleProps & {\n  children: ReactNode\n  deleteLabel?: string\n  icon?: ReactNode\n  onDelete?: () => void\n  selected?: boolean\n  size?: 'sm' | 'md'\n  tint?: string\n  variant?: 'clear' | 'tinted'\n}\n\nexport const LiquidChip = forwardRef<HTMLSpanElement, LiquidChipProps>(({\n  children,\n  className,\n  deleteLabel = 'Remove',\n  icon,\n  onClick,\n  onDelete,\n  onPointerEnter,\n  selected,\n  size = 'md',\n  style,\n  styles,\n  tint,\n  variant = 'clear',\n  ...props\n}, forwardedRef) => {\n  const config = useLiquefyConfig()\n  const interactive = Boolean(onClick)\n  // A chip that carries a `selected` state is a toggle button and should say so\n  // with `aria-pressed`; one that only carries a click is an ordinary button;\n  // one that carries neither is a label with a delete button hanging off it.\n  const Tag = selected === undefined ? (interactive ? 'button' : 'span') : Toggle\n  const [elementRef, , pulse] = useLiquidGlass<HTMLElement>(forwardedRef as Ref<HTMLElement>, {\n    bounce: 0.09,\n    glow: config.glow,\n    intensity: config.intensity,\n    lens: config.lens && config.transparency,\n    lensStrength: config.refraction,\n    motion: config.motion,\n    ripple: config.ripple,\n    shimmer: config.shimmer,\n    sparkle: config.sparkle,\n    tilt: 2,\n    tint: tint ?? config.tint,\n    // Chips travel in lists; skip the shader canvas and just ride the springs.\n    webgl: false,\n    wobbliness: config.wobbliness,\n  })\n\n  const handlePointerEnter = (event: ReactPointerEvent<HTMLElement>) => {\n    pulse(0.85)\n    onPointerEnter?.(event)\n  }\n  const root = useLiquidStyles('lq-chip', {\n    className,\n    style,\n    styles,\n    vars: tint ? { '--lq-chip-tint': tint } : undefined,\n  })\n\n  return (\n    <Tag\n      className={root.className}\n      data-interactive={interactive}\n      data-liquid-size={size}\n      data-liquid-variant={variant}\n      data-selected={selected}\n      onClick={onClick}\n      onPointerEnter={handlePointerEnter}\n      ref={elementRef as never}\n      style={root.style}\n      type={interactive ? 'button' : undefined}\n      {...(Tag === Toggle ? { pressed: selected } : undefined)}\n      {...props}\n    >\n      {icon && <span className=\"lq-chip__icon\">{icon}</span>}\n      <span className=\"lq-chip__label\">{children}</span>\n      {onDelete && (\n        <button\n          aria-label={deleteLabel}\n          className=\"lq-chip__delete\"\n          onClick={(event) => {\n            event.stopPropagation()\n            onDelete()\n          }}\n          type=\"button\"\n        >\n          <XGlyph size={11} />\n        </button>\n      )}\n    </Tag>\n  )\n})\n\nLiquidChip.displayName = 'LiquidChip'\n",
      "path": "registry/liquid-chip.tsx",
      "type": "registry:ui"
    }
  ],
  "name": "liquid-chip",
  "registryDependencies": [
    "https://liquefy-ui.com/r/liquefy-ui.json",
    "https://liquefy-ui.com/r/internal-glyphs.json",
    "https://liquefy-ui.com/r/provider.json",
    "https://liquefy-ui.com/r/styles-prop.json",
    "https://liquefy-ui.com/r/use-liquid-glass.json"
  ],
  "title": "LiquidChip",
  "type": "registry:ui"
}