{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "description": "A glass list with items, descriptions, leading icons, trailing slots and subheaders.",
  "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 { forwardRef, type HTMLAttributes, type LiHTMLAttributes, type ReactNode } from 'react'\nimport { ChevronRightGlyph } from '@/lib/internal-glyphs'\nimport { LiquidSurface, type LiquidSurfaceProps } from '@/components/ui/liquid-surface'\nimport { useLiquidStyles, type LiquidStyleProps } from '@/lib/styles-prop'\n\nexport type LiquidListProps = Omit<LiquidSurfaceProps, 'children'> & {\n  children: ReactNode\n  inset?: boolean\n}\n\nexport const LiquidList = forwardRef<HTMLDivElement, LiquidListProps>(({\n  children,\n  className,\n  inset = false,\n  ...props\n}, ref) => (\n  <LiquidSurface\n    className={['lq-list', className].filter(Boolean).join(' ')}\n    data-inset={inset}\n    interactive={false}\n    ref={ref}\n    {...props}\n  >\n    <ul className=\"lq-list__items\" role=\"list\">{children}</ul>\n  </LiquidSurface>\n))\n\nLiquidList.displayName = 'LiquidList'\n\nexport type LiquidListItemProps = LiHTMLAttributes<HTMLLIElement> & LiquidStyleProps & {\n  children: ReactNode\n  chevron?: boolean\n  description?: ReactNode\n  end?: ReactNode\n  icon?: ReactNode\n  onActivate?: () => void\n}\n\nexport const LiquidListItem = forwardRef<HTMLLIElement, LiquidListItemProps>(({\n  chevron = false,\n  children,\n  className,\n  description,\n  end,\n  icon,\n  onActivate,\n  style,\n  styles,\n  ...props\n}, ref) => {\n  const interactive = Boolean(onActivate)\n  const body = (\n    <>\n      {icon && <span className=\"lq-list__icon\">{icon}</span>}\n      <span className=\"lq-list__copy\">\n        <span className=\"lq-list__title\">{children}</span>\n        {description && <span className=\"lq-list__description\">{description}</span>}\n      </span>\n      {end && <span className=\"lq-list__end\">{end}</span>}\n      {chevron && <span className=\"lq-list__chevron\"><ChevronRightGlyph size={15} /></span>}\n    </>\n  )\n  const root = useLiquidStyles('lq-list__item', { className, style, styles })\n\n  return (\n    <li className={root.className} data-interactive={interactive} ref={ref} style={root.style} {...props}>\n      {interactive\n        ? <button className=\"lq-list__item-button\" onClick={onActivate} type=\"button\">{body}</button>\n        : <span className=\"lq-list__item-static\">{body}</span>}\n    </li>\n  )\n})\n\nLiquidListItem.displayName = 'LiquidListItem'\n\nexport type LiquidListSubheaderProps = HTMLAttributes<HTMLLIElement> & LiquidStyleProps\n\nexport const LiquidListSubheader = forwardRef<HTMLLIElement, LiquidListSubheaderProps>(\n  ({ className, style, styles, ...props }, ref) => {\n    const root = useLiquidStyles('lq-list__subheader', { className, style, styles })\n\n    return <li aria-hidden=\"true\" className={root.className} ref={ref} style={root.style} {...props} />\n  },\n)\n\nLiquidListSubheader.displayName = 'LiquidListSubheader'\n",
      "path": "registry/liquid-list.tsx",
      "type": "registry:ui"
    }
  ],
  "name": "liquid-list",
  "registryDependencies": [
    "https://liquefy-ui.com/r/liquefy-ui.json",
    "https://liquefy-ui.com/r/internal-glyphs.json",
    "https://liquefy-ui.com/r/liquid-surface.json",
    "https://liquefy-ui.com/r/styles-prop.json"
  ],
  "title": "LiquidList",
  "type": "registry:ui"
}