{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "dependencies": [
    "@base-ui/react@1.8.0"
  ],
  "description": "Composable tabs on Base UI, with a glowing underline that springs between them.",
  "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 { Tabs } from '@base-ui/react/tabs'\nimport { forwardRef, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react'\nimport { useLiquidStyles, type LiquidStyleProps } from '@/lib/styles-prop'\n\n// Base UI owns the roving tabindex, the arrow/Home/End keys and the\n// aria-controls / aria-labelledby wiring between each tab and its panel.\n// Everything liquefy-ui adds on top is the underline and the jelly animation.\n\nexport type LiquidTabsProps = Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> & LiquidStyleProps & {\n  children: ReactNode\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  value?: string\n}\n\nexport const LiquidTabs = forwardRef<HTMLDivElement, LiquidTabsProps>(({\n  children,\n  className,\n  defaultValue,\n  onValueChange,\n  style,\n  styles,\n  value,\n  ...props\n}, ref) => {\n  const root = useLiquidStyles('lq-tabs', { className, style, styles })\n\n  return (\n    <Tabs.Root\n      className={root.className}\n      defaultValue={defaultValue}\n      onValueChange={(next) => onValueChange?.(String(next))}\n      ref={ref}\n      style={root.style}\n      value={value}\n      {...props}\n    >\n      {children}\n    </Tabs.Root>\n  )\n})\n\nLiquidTabs.displayName = 'LiquidTabs'\n\nexport type LiquidTabListProps = HTMLAttributes<HTMLDivElement> & LiquidStyleProps & {\n  children: ReactNode\n  label?: string\n}\n\nexport const LiquidTabList = forwardRef<HTMLDivElement, LiquidTabListProps>(({\n  children,\n  className,\n  label,\n  style,\n  styles,\n  ...props\n}, ref) => {\n  const root = useLiquidStyles('lq-tab-list', { className, style, styles })\n\n  return (\n    <Tabs.List\n      // Panels are local content that appears immediately, which is the case\n      // WAI-ARIA says should activate on focus rather than needing Enter.\n      activateOnFocus\n      aria-label={label}\n      className={root.className}\n      ref={ref}\n      style={root.style}\n      {...props}\n    >\n      {children}\n    </Tabs.List>\n  )\n})\n\nLiquidTabList.displayName = 'LiquidTabList'\n\nexport type LiquidTabProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> & LiquidStyleProps & {\n  children: ReactNode\n  icon?: ReactNode\n  value: string\n}\n\nexport const LiquidTab = forwardRef<HTMLButtonElement, LiquidTabProps>(({\n  children,\n  className,\n  icon,\n  style,\n  styles,\n  value,\n  ...props\n}, ref) => {\n  const root = useLiquidStyles('lq-tab', { className, style, styles })\n\n  return (\n    <Tabs.Tab className={root.className} ref={ref} style={root.style} value={value} {...props}>\n      {icon && <span className=\"lq-tab__icon\">{icon}</span>}\n      <span>{children}</span>\n      {/* --lq-tab-active is flipped by CSS off Base UI's data-active, so the\n          underline needs no state of its own. */}\n      <span aria-hidden=\"true\" className=\"lq-tab__underline\" />\n    </Tabs.Tab>\n  )\n})\n\nLiquidTab.displayName = 'LiquidTab'\n\nexport type LiquidTabPanelProps = HTMLAttributes<HTMLDivElement> & LiquidStyleProps & {\n  children: ReactNode\n  value: string\n}\n\nexport const LiquidTabPanel = forwardRef<HTMLDivElement, LiquidTabPanelProps>(({\n  children,\n  className,\n  style,\n  styles,\n  value,\n  ...props\n}, ref) => {\n  const root = useLiquidStyles('lq-tab-panel', { className, style, styles })\n\n  return (\n    <Tabs.Panel className={root.className} ref={ref} style={root.style} value={value} {...props}>\n      {children}\n    </Tabs.Panel>\n  )\n})\n\nLiquidTabPanel.displayName = 'LiquidTabPanel'\n",
      "path": "registry/liquid-tabs.tsx",
      "type": "registry:ui"
    }
  ],
  "name": "liquid-tabs",
  "registryDependencies": [
    "https://liquefy-ui.com/r/liquefy-ui.json",
    "https://liquefy-ui.com/r/styles-prop.json"
  ],
  "title": "LiquidTabs",
  "type": "registry:ui"
}