{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "title": "Dialog",
  "description": "Modal dialogs with crop marks, an Esc hint and a footer tray.",
  "dependencies": [
    "class-variance-authority",
    "lucide-react",
    "radix-ui"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/motion.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/dialog.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { XIcon } from \"lucide-react\";\n\nimport { enterOnce, marksIn, motionScale, useMergedRef } from \"@/lib/motion\";\nimport { cn } from \"@/lib/utils\";\n\n/** Rise into place, then the crop marks close in on the panel like a registration lock. */\nfunction enter(node: HTMLElement | null) {\n  if (!node) return;\n  if (node.dataset.entered !== undefined) return;\n  node.dataset.entered = \"\";\n  enterOnce(node, (s) => ({ opacity: 0, y: 10 * s, scale: 1 - 0.03 * s }), { duration: 0.28 });\n  if (motionScale(node)) marksIn(node, 0.06);\n}\n\nfunction Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger(props: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal(props: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose(props: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/25 backdrop-blur-[2px] dark:bg-black/55 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst contentVariants = cva(\n  \"fixed inset-0 z-50 m-auto grid h-fit max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] origin-center gap-4 rounded-2xl bg-popover ring-1 ring-foreground/10 p-6 text-popover-foreground shadow-overlay outline-none duration-150 ease-cue data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[0.98]\",\n  {\n    variants: {\n      size: {\n        sm: \"max-w-sm\",\n        md: \"max-w-lg\",\n        lg: \"max-w-2xl\",\n        xl: \"max-w-4xl\",\n      },\n      marks: {\n        true: \"cue-marks\",\n      },\n    },\n    defaultVariants: { size: \"md\", marks: true },\n  },\n);\n\ntype DialogContentProps = React.ComponentProps<typeof DialogPrimitive.Content> &\n  VariantProps<typeof contentVariants> & {\n    /** Renders the close button with its `Esc` hint. */\n    showClose?: boolean;\n    /** No entrance animation: for surfaces opened from the keyboard many times a day (command palettes). */\n    instant?: boolean;\n  };\n\nfunction DialogContent({ className, size, marks, showClose = true, instant = false, children, ref, ...props }: DialogContentProps) {\n  const mergedRef = useMergedRef(instant ? undefined : enter, ref);\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content ref={mergedRef} data-slot=\"dialog-content\" className={cn(contentVariants({ size, marks }), className)} {...props}>\n        {children}\n        {showClose && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className=\"absolute top-4 right-4 inline-flex h-7 items-center gap-1.5 rounded-full bg-foreground/5 px-2 text-muted-foreground outline-none transition-[background-color,color,scale] duration-150 hover:bg-foreground/10 hover:text-foreground active:scale-95 [&_kbd]:h-4 [&_kbd]:border-0 [&_kbd]:bg-transparent [&_kbd]:px-0 [&_kbd]:shadow-none focus-visible:ring-3 focus-visible:ring-ring/50\"\n          >\n            <kbd data-slot=\"kbd\" aria-hidden=\"true\" className=\"cue-kbd hidden sm:inline-flex\">\n              esc\n            </kbd>\n            <XIcon className=\"size-4\" aria-hidden=\"true\" />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"dialog-header\" className={cn(\"flex flex-col gap-1.5 pe-16 text-left\", className)} {...props} />;\n}\n\n/** `divided` turns the footer into a muted tray under a dashed rule. */\nfunction DialogFooter({ className, divided = false, ...props }: React.ComponentProps<\"div\"> & { divided?: boolean }) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", divided && \"cue-dash-t -mx-6 -mb-6 mt-2 rounded-b-2xl bg-muted/50 px-6 py-4\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return <DialogPrimitive.Title data-slot=\"dialog-title\" className={cn(\"text-lg leading-snug font-semibold tracking-tight\", className)} {...props} />;\n}\n\nfunction DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return <DialogPrimitive.Description data-slot=\"dialog-description\" className={cn(\"text-sm text-muted-foreground\", className)} {...props} />;\n}\n\nexport { Dialog, DialogTrigger, DialogPortal, DialogClose, DialogOverlay, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription };\nexport type { DialogContentProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/dialog",
  "categories": [
    "overlays"
  ],
  "type": "registry:ui"
}