{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "description": "A macOS-style dock: a glass rail of icon buttons that magnify under the pointer.",
  "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  Children,\n  forwardRef,\n  isValidElement,\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { LiquidSurface } from '@/components/ui/liquid-surface'\nimport { useLiquidStyles, type LiquidStyleProps } from '@/lib/styles-prop'\n\nexport type GlassDockProps = HTMLAttributes<HTMLElement> & LiquidStyleProps & {\n  children: ReactNode\n  label?: string\n  position?: 'inline' | 'floating'\n}\n\nexport const GlassDock = forwardRef<HTMLElement, GlassDockProps>(({\n  children,\n  className,\n  label = 'Primary navigation',\n  position = 'inline',\n  style,\n  styles,\n  ...props\n}, ref) => {\n  const items = Children.toArray(children)\n  const activeIndex = items.findIndex((child) => {\n    return isValidElement<DockItemProps>(child) && child.props.active\n  })\n  const dockStyle = {\n    '--lq-dock-active-index': Math.max(0, activeIndex),\n    '--lq-dock-item-count': items.length,\n  } as CSSProperties\n  // The shell is the layout box; the glass bar inside keeps its own geometry.\n  const root = useLiquidStyles('lq-dock-shell', { className, style, styles })\n\n  return (\n    <nav\n      aria-label={label}\n      className={root.className}\n      data-position={position}\n      ref={ref}\n      style={root.style}\n      {...props}\n    >\n      <LiquidSurface className=\"lq-dock\" radius=\"18px\" style={dockStyle}>\n        <span aria-hidden=\"true\" className=\"lq-dock__indicator\" data-visible={activeIndex >= 0} />\n        {items}\n      </LiquidSurface>\n    </nav>\n  )\n})\n\nGlassDock.displayName = 'GlassDock'\n\nexport type DockItemProps = ButtonHTMLAttributes<HTMLButtonElement> & LiquidStyleProps & {\n  active?: boolean\n  icon: ReactNode\n  label: string\n}\n\nexport const DockItem = forwardRef<HTMLButtonElement, DockItemProps>(({\n  active = false,\n  className,\n  icon,\n  label,\n  style,\n  styles,\n  ...props\n}, ref) => {\n  const root = useLiquidStyles('lq-dock__item', { className, style, styles })\n\n  return (\n    <button\n      aria-current={active ? 'page' : undefined}\n      aria-label={label}\n      className={root.className}\n      data-active={active}\n      ref={ref}\n      style={root.style}\n      title={label}\n      type=\"button\"\n      {...props}\n    >\n      {icon}\n    </button>\n  )\n})\n\nDockItem.displayName = 'DockItem'\n",
      "path": "registry/glass-dock.tsx",
      "type": "registry:ui"
    }
  ],
  "name": "glass-dock",
  "registryDependencies": [
    "https://liquefy-ui.com/r/liquefy-ui.json",
    "https://liquefy-ui.com/r/liquid-surface.json",
    "https://liquefy-ui.com/r/styles-prop.json"
  ],
  "title": "GlassDock",
  "type": "registry:ui"
}