{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "modal",
  "type": "registry:ui",
  "dependencies": [
    "class-variance-authority",
    "@radix-ui/react-dialog",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.getlyse.com/r/lyse-tokens.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/modal/modal.tsx",
      "content": "import * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport \"./modal.css\"\n\n/* ------------------------------------------------------------------ */\n/*  CVA                                                                */\n/* ------------------------------------------------------------------ */\n\nconst modalContentVariants = cva(\n  \"modal-content fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 flex flex-col items-start animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n  {\n    variants: {\n      size: {\n        sm: \"w-[20rem]\",\n        md: \"w-[25rem]\",\n        lg: \"w-[35rem]\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nconst modalIconVariants = cva(\n  \"modal-icon flex items-center justify-center shrink-0 size-[var(--layout-size-lg)] rounded-[var(--layout-radius-full)] [&_svg]:size-[var(--layout-size-xs)]\",\n  {\n    variants: {\n      variant: {\n        brand: \"modal-icon-brand\",\n        destructive: \"modal-icon-destructive\",\n        success: \"modal-icon-success\",\n        warning: \"modal-icon-warning\",\n      },\n    },\n    defaultVariants: {\n      variant: \"brand\",\n    },\n  }\n)\n\n/* ------------------------------------------------------------------ */\n/*  Modal                                                              */\n/* ------------------------------------------------------------------ */\n\nfunction Modal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"modal\" {...props} />\n}\n\n/* ------------------------------------------------------------------ */\n/*  ModalTrigger                                                       */\n/* ------------------------------------------------------------------ */\n\nfunction ModalTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"modal-trigger\" {...props} />\n}\n\n/* ------------------------------------------------------------------ */\n/*  ModalOverlay                                                       */\n/* ------------------------------------------------------------------ */\n\nfunction ModalOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"modal-overlay\"\n      className={cn(\n        \"modal-overlay fixed inset-0 z-50 animate-in fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  ModalContent                                                       */\n/* ------------------------------------------------------------------ */\n\nfunction ModalContent({\n  className,\n  size,\n  children,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> &\n  VariantProps<typeof modalContentVariants>) {\n  return (\n    <DialogPrimitive.Portal>\n      <ModalOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"modal-content\"\n        className={cn(modalContentVariants({ size, className }))}\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  ModalHeader                                                        */\n/* ------------------------------------------------------------------ */\n\nfunction ModalHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"modal-header\"\n      className={cn(\n        \"modal-header flex w-full items-center justify-between px-[var(--layout-padding-xl)] py-[var(--layout-padding-lg)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  ModalTitle                                                         */\n/* ------------------------------------------------------------------ */\n\nfunction ModalTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"modal-title\"\n      className={cn(\"modal-title text-content-body font-accent\", className)}\n      {...props}\n    />\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  ModalDescription                                                   */\n/* ------------------------------------------------------------------ */\n\nfunction ModalDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"modal-description\"\n      className={cn(\"modal-description text-content-note\", className)}\n      {...props}\n    />\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  ModalBody                                                          */\n/* ------------------------------------------------------------------ */\n\nfunction ModalBody({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"modal-body\"\n      className={cn(\n        \"flex w-full flex-col gap-[var(--layout-gap-xl)] p-[var(--layout-padding-xl)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  ModalFooter                                                        */\n/* ------------------------------------------------------------------ */\n\nfunction ModalFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"modal-footer\"\n      className={cn(\n        \"modal-footer flex w-full items-end justify-end gap-[var(--layout-gap-md)] p-[var(--layout-padding-lg)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  ModalClose                                                         */\n/* ------------------------------------------------------------------ */\n\nfunction ModalClose({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  // When children are provided (asChild or custom), skip icon-specific sizing\n  if (children) {\n    return (\n      <DialogPrimitive.Close\n        data-slot=\"modal-close\"\n        className={className}\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Close>\n    )\n  }\n\n  // Default: X icon button with fixed sizing\n  return (\n    <DialogPrimitive.Close\n      data-slot=\"modal-close\"\n      className={cn(\n        \"modal-close inline-flex shrink-0 items-center justify-center size-[var(--layout-size-md)]\",\n        className\n      )}\n      aria-label=\"Close\"\n      {...props}\n    >\n      <X className=\"size-[var(--layout-size-xs)]\" />\n    </DialogPrimitive.Close>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  ModalIcon                                                          */\n/* ------------------------------------------------------------------ */\n\nfunction ModalIcon({\n  variant,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof modalIconVariants>) {\n  return (\n    <div\n      data-slot=\"modal-icon\"\n      className={cn(modalIconVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Modal,\n  ModalTrigger,\n  ModalOverlay,\n  ModalContent,\n  ModalHeader,\n  ModalTitle,\n  ModalDescription,\n  ModalBody,\n  ModalFooter,\n  ModalClose,\n  ModalIcon,\n  modalContentVariants,\n  modalIconVariants,\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/new-york/ui/modal/modal.css",
      "content": "/* ================================================================\n * MODAL — Styles\n * Structure (flex, gap, padding, radius) lives in modal.tsx via cva.\n * Theming (colors, borders, shadow) lives here via tokens.\n * ================================================================ */\n\n/* --------------------------------\n * Overlay (backdrop)\n * -------------------------------- */\n.modal-overlay {\n  background: var(--overlay-default);\n}\n\n/* --------------------------------\n * Content (surface)\n * -------------------------------- */\n.modal-content {\n  background: var(--background-neutral-faint-default);\n  border: var(--layout-border-thin) solid var(--border-default);\n  border-radius: var(--layout-radius-xl);\n  box-shadow: var(--shadow-elevation-md);\n}\n\n/* --------------------------------\n * Header (with bottom border)\n * -------------------------------- */\n.modal-header {\n  border-bottom: var(--layout-border-thin) solid var(--border-default);\n}\n\n/* --------------------------------\n * Title\n * -------------------------------- */\n.modal-title {\n  color: var(--text-base-bolder);\n}\n\n/* --------------------------------\n * Description text\n * -------------------------------- */\n.modal-description {\n  color: var(--text-base-moderate);\n}\n\n/* --------------------------------\n * Footer (with top border)\n * -------------------------------- */\n.modal-footer {\n  border-top: var(--layout-border-thin) solid var(--border-default);\n}\n\n/* --------------------------------\n * Close button\n * -------------------------------- */\n.modal-close {\n  color: var(--text-base-moderate);\n  cursor: pointer;\n}\n\n.modal-close:hover {\n  color: var(--text-base-strong);\n}\n\n/* --------------------------------\n * Icon — variant colors\n * -------------------------------- */\n.modal-icon-brand {\n  background: var(--overlay-brand-default);\n  color: var(--icon-brand-moderate);\n}\n\n.modal-icon-destructive {\n  background: var(--overlay-danger-default);\n  color: var(--icon-danger-moderate);\n}\n\n.modal-icon-success {\n  background: var(--overlay-success-default);\n  color: var(--icon-success-moderate);\n}\n\n.modal-icon-warning {\n  background: var(--overlay-warning-default);\n  color: var(--icon-warning-moderate);\n}\n",
      "type": "registry:ui"
    }
  ]
}