{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "dependencies": [
    "@base-ui/react@1.8.0"
  ],
  "description": "A modal on Base UI: trapped focus, inert background and wired-up title and description.",
  "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 { Dialog } from '@base-ui/react/dialog'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { LiquidButton } from '@/components/ui/liquid-button'\nimport { LiquidSurface } from '@/components/ui/liquid-surface'\nimport { useLiquefyPortalContainer } from '@/lib/provider'\nimport { useLiquidStyles, type LiquidStyleProps } from '@/lib/styles-prop'\n\n// Was a bare <dialog> with showModal(). Base UI adds what that was missing:\n// focus lands inside the panel and returns to the trigger on close, the page\n// behind is inert and scroll-locked, and Title/Description wire themselves up as\n// aria-labelledby / aria-describedby instead of being unlabelled headings.\n\nexport type LiquidDialogProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & LiquidStyleProps & {\n  children: ReactNode\n  closeLabel?: string\n  description?: ReactNode\n  onOpenChange: (open: boolean) => void\n  open: boolean\n  title: ReactNode\n}\n\nexport const LiquidDialog = ({\n  children,\n  className,\n  closeLabel = 'Close',\n  description,\n  onOpenChange,\n  open,\n  style,\n  styles,\n  title,\n  ...props\n}: LiquidDialogProps) => {\n  const portalContainer = useLiquefyPortalContainer()\n  const root = useLiquidStyles('lq-dialog', { className, style, styles })\n\n  return (\n    <Dialog.Root onOpenChange={(next) => onOpenChange(next)} open={open}>\n      <Dialog.Portal container={portalContainer ?? undefined}>\n        <Dialog.Backdrop className=\"lq-dialog__backdrop\" />\n        <Dialog.Popup className={root.className} style={root.style} {...props}>\n          {/* Refracting through a soft lens, for the reason the drawer gives. */}\n          <LiquidSurface className=\"lq-dialog__surface\" lensBlur={20} radius={32}>\n            <div className=\"lq-dialog__header\">\n              <div>\n                <Dialog.Title>{title}</Dialog.Title>\n                {description && <Dialog.Description>{description}</Dialog.Description>}\n              </div>\n              <Dialog.Close\n                render={(\n                  <LiquidButton aria-label={closeLabel} size=\"sm\">\n                    <span aria-hidden=\"true\">×</span>\n                  </LiquidButton>\n                )}\n              />\n            </div>\n            <div className=\"lq-dialog__body\">{children}</div>\n          </LiquidSurface>\n        </Dialog.Popup>\n      </Dialog.Portal>\n    </Dialog.Root>\n  )\n}\n",
      "path": "registry/liquid-dialog.tsx",
      "type": "registry:ui"
    }
  ],
  "name": "liquid-dialog",
  "registryDependencies": [
    "https://liquefy-ui.com/r/liquefy-ui.json",
    "https://liquefy-ui.com/r/liquid-button.json",
    "https://liquefy-ui.com/r/liquid-surface.json",
    "https://liquefy-ui.com/r/provider.json",
    "https://liquefy-ui.com/r/styles-prop.json"
  ],
  "title": "LiquidDialog",
  "type": "registry:ui"
}