{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "modal-glass",
  "type": "registry:ui",
  "title": "Modal Glass",
  "description": "ModalGlass Component (Radix UI Dialog-based)",
  "dependencies": [
    "@radix-ui/react-dialog",
    "lucide-react",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn",
    "primitives",
    "variants"
  ],
  "files": [
    {
      "path": "components/glass/ui/modal-glass.tsx",
      "type": "registry:component",
      "content": "/* eslint-disable react-refresh/only-export-components */\n/**\n * ModalGlass Component (Radix UI Dialog-based)\n *\n * Glass-themed modal/dialog with full shadcn/ui Dialog API compatibility.\n * Built on @radix-ui/react-dialog for accessibility and state management.\n *\n * @example Uncontrolled with Trigger (shadcn/ui pattern)\n * ```tsx\n * <ModalGlass.Root>\n *   <ModalGlass.Trigger asChild>\n *     <ButtonGlass>Open Dialog</ButtonGlass>\n *   </ModalGlass.Trigger>\n *   <ModalGlass.Content>\n *     <ModalGlass.Header>\n *       <ModalGlass.Title>Dialog Title</ModalGlass.Title>\n *       <ModalGlass.Description>Dialog description</ModalGlass.Description>\n *     </ModalGlass.Header>\n *     <ModalGlass.Body>Content here</ModalGlass.Body>\n *     <ModalGlass.Footer>\n *       <ModalGlass.Close asChild>\n *         <ButtonGlass variant=\"ghost\">Cancel</ButtonGlass>\n *       </ModalGlass.Close>\n *       <ButtonGlass>Confirm</ButtonGlass>\n *     </ModalGlass.Footer>\n *   </ModalGlass.Content>\n * </ModalGlass.Root>\n * ```\n *\n * @example Controlled mode (programmatic)\n * ```tsx\n * <ModalGlass.Root open={open} onOpenChange={setOpen}>\n *   <ModalGlass.Content>\n *     <ModalGlass.Header>\n *       <ModalGlass.Title>Confirm Action</ModalGlass.Title>\n *     </ModalGlass.Header>\n *     <ModalGlass.Body>Are you sure?</ModalGlass.Body>\n *     <ModalGlass.Footer>\n *       <ButtonGlass onClick={() => setOpen(false)}>Cancel</ButtonGlass>\n *     </ModalGlass.Footer>\n *   </ModalGlass.Content>\n * </ModalGlass.Root>\n * ```\n *\n * @accessibility\n * - Built on Radix UI Dialog with full WCAG 2.1 AA compliance\n * - Keyboard: Escape to close, Tab for focus trap\n * - Screen Readers: role=\"dialog\", aria-modal, aria-labelledby, aria-describedby\n * - Focus Management: Auto-focus on open, return focus on close\n *\n * @since v2.0.0 - Migrated to Radix UI Dialog, added Trigger and Portal\n */\n\nimport * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { X } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { modalSizes, type ModalSize } from '@/lib/variants/modal-glass-variants';\nimport { ICON_SIZES } from '@/components/glass/primitives';\nimport '@/glass-theme.css';\n\n// ========================================\n// CONTEXT FOR SIZE (optional enhancement)\n// ========================================\n\ninterface ModalContextValue {\n  size: ModalSize;\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({ size: 'sm' });\n\nconst useModalContext = () => React.useContext(ModalContext);\n\n// ========================================\n// COMPOUND COMPONENT: ROOT\n// ========================================\n\ninterface ModalRootProps extends React.ComponentProps<typeof DialogPrimitive.Root> {\n  /** Size variant for the modal */\n  size?: ModalSize;\n}\n\n/**\n * ModalGlass.Root - Dialog root component\n *\n * Supports both controlled (open/onOpenChange) and uncontrolled (with Trigger) modes.\n */\nfunction ModalRoot({ size = 'sm', children, ...props }: ModalRootProps) {\n  return (\n    <ModalContext.Provider value={{ size }}>\n      <DialogPrimitive.Root data-slot=\"dialog\" {...props}>\n        {children}\n      </DialogPrimitive.Root>\n    </ModalContext.Provider>\n  );\n}\n\n// ========================================\n// COMPOUND COMPONENT: TRIGGER\n// ========================================\n\n/**\n * ModalGlass.Trigger - Opens the modal when clicked\n *\n * Use `asChild` to render as the child element instead of a button.\n */\nfunction ModalTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\n// ========================================\n// COMPOUND COMPONENT: PORTAL\n// ========================================\n\n/**\n * ModalGlass.Portal - Renders children into a portal\n */\nfunction ModalPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\n// ========================================\n// COMPOUND COMPONENT: OVERLAY\n// ========================================\n\n/**\n * ModalGlass.Overlay - Backdrop with glass blur effect\n */\nconst ModalOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    data-slot=\"dialog-overlay\"\n    className={cn(\n      'fixed inset-0 z-50',\n      'data-[state=open]:animate-in data-[state=closed]:animate-out',\n      'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n      className\n    )}\n    style={{\n      background: 'var(--modal-overlay)',\n      backdropFilter: 'blur(var(--blur-sm))',\n      WebkitBackdropFilter: 'blur(var(--blur-sm))',\n    }}\n    {...props}\n  />\n));\nModalOverlay.displayName = 'ModalOverlay';\n\n// ========================================\n// COMPOUND COMPONENT: CONTENT\n// ========================================\n\ninterface ModalContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /** Show close button in top-right corner */\n  showCloseButton?: boolean;\n  /** Override size from Root */\n  size?: ModalSize;\n}\n\n/**\n * ModalGlass.Content - Main modal container with glass styling\n *\n * Automatically renders Portal and Overlay.\n */\nconst ModalContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  ModalContentProps\n>(({ className, children, showCloseButton = true, size: sizeProp, ...props }, ref) => {\n  const { size: contextSize } = useModalContext();\n  const size = sizeProp ?? contextSize;\n\n  return (\n    <ModalPortal>\n      <ModalOverlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        data-slot=\"dialog-content\"\n        className={cn(\n          modalSizes({ size }),\n          'fixed top-[50%] left-[50%] z-50',\n          'translate-x-[-50%] translate-y-[-50%]',\n          'data-[state=open]:animate-in data-[state=closed]:animate-out',\n          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n          'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',\n          'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',\n          'duration-200',\n          className\n        )}\n        style={{\n          background: 'var(--modal-bg)',\n          border: '1px solid var(--modal-border)',\n          boxShadow: 'var(--modal-glow)',\n          backdropFilter: 'blur(var(--blur-lg))',\n          WebkitBackdropFilter: 'blur(var(--blur-lg))',\n        }}\n        {...props}\n      >\n        {/* Glow effect layer */}\n        <div\n          className=\"absolute inset-0 rounded-3xl pointer-events-none\"\n          style={{ background: 'var(--modal-glow-effect)' }}\n          aria-hidden=\"true\"\n        />\n        {/* Content */}\n        <div className=\"relative\">{children}</div>\n        {/* Close button */}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className={cn(\n              'absolute top-4 right-4',\n              'p-1.5 md:p-2 rounded-xl',\n              'transition-all duration-300',\n              'ring-offset-background',\n              'focus:outline-none focus:ring-2 focus:ring-(--semantic-primary) focus:ring-offset-2',\n              'hover:opacity-100 opacity-70',\n              'disabled:pointer-events-none'\n            )}\n            style={{\n              background: 'var(--modal-close-btn-bg)',\n              border: 'var(--modal-close-btn-border)',\n              color: 'var(--text-muted)',\n            }}\n          >\n            <X className={ICON_SIZES.md} />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </ModalPortal>\n  );\n});\nModalContent.displayName = 'ModalContent';\n\n// ========================================\n// COMPOUND COMPONENT: HEADER\n// ========================================\n\n/**\n * ModalGlass.Header - Header section with flex layout\n */\nfunction ModalHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn('flex flex-col gap-2 text-center sm:text-left mb-4', className)}\n      {...props}\n    />\n  );\n}\n\n// ========================================\n// COMPOUND COMPONENT: BODY\n// ========================================\n\n/**\n * ModalGlass.Body - Optional wrapper for main content area\n *\n * Note: This component is OPTIONAL. Unlike some implementations, content can go\n * directly inside ModalGlass.Content (matching shadcn/ui DialogContent pattern).\n * Use Body when you want the text-secondary color styling applied.\n *\n * @example Direct content (shadcn/ui pattern)\n * ```tsx\n * <ModalGlass.Content>\n *   <ModalGlass.Header>\n *     <ModalGlass.Title>Title</ModalGlass.Title>\n *   </ModalGlass.Header>\n *   <p>Content goes here directly</p>\n *   <ModalGlass.Footer>...</ModalGlass.Footer>\n * </ModalGlass.Content>\n * ```\n *\n * @example With Body wrapper (original pattern)\n * ```tsx\n * <ModalGlass.Content>\n *   <ModalGlass.Header>...</ModalGlass.Header>\n *   <ModalGlass.Body>\n *     <p>Content with text-secondary styling</p>\n *   </ModalGlass.Body>\n *   <ModalGlass.Footer>...</ModalGlass.Footer>\n * </ModalGlass.Content>\n * ```\n */\nfunction ModalBody({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-body\"\n      className={cn('relative', className)}\n      style={{ color: 'var(--text-secondary)' }}\n      {...props}\n    />\n  );\n}\n\n// ========================================\n// COMPOUND COMPONENT: FOOTER\n// ========================================\n\n/**\n * ModalGlass.Footer - Footer section with flex layout for actions\n */\nfunction ModalFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end mt-4', className)}\n      {...props}\n    />\n  );\n}\n\n// ========================================\n// COMPOUND COMPONENT: TITLE\n// ========================================\n\n/**\n * ModalGlass.Title - Modal title with proper accessibility\n */\nconst ModalTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    data-slot=\"dialog-title\"\n    className={cn('text-lg md:text-xl font-semibold leading-none tracking-tight', className)}\n    style={{ color: 'var(--text-primary)' }}\n    {...props}\n  />\n));\nModalTitle.displayName = 'ModalTitle';\n\n// ========================================\n// COMPOUND COMPONENT: DESCRIPTION\n// ========================================\n\n/**\n * ModalGlass.Description - Modal description text\n */\nconst ModalDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    data-slot=\"dialog-description\"\n    className={cn('text-sm', className)}\n    style={{ color: 'var(--text-muted)' }}\n    {...props}\n  />\n));\nModalDescription.displayName = 'ModalDescription';\n\n// ========================================\n// COMPOUND COMPONENT: CLOSE\n// ========================================\n\n/**\n * ModalGlass.Close - Closes the modal when clicked\n *\n * Use `asChild` to render as the child element.\n *\n * @example\n * ```tsx\n * <ModalGlass.Close asChild>\n *   <ButtonGlass variant=\"ghost\">Cancel</ButtonGlass>\n * </ModalGlass.Close>\n * ```\n */\nfunction ModalClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\n// ========================================\n// EXPORT COMPOUND COMPONENT\n// ========================================\n\n/**\n * ModalGlass - Glass-themed Dialog with shadcn/ui API compatibility\n *\n * Built on @radix-ui/react-dialog for full accessibility support.\n *\n * @example Uncontrolled (with Trigger)\n * ```tsx\n * <ModalGlass.Root>\n *   <ModalGlass.Trigger asChild>\n *     <ButtonGlass>Open</ButtonGlass>\n *   </ModalGlass.Trigger>\n *   <ModalGlass.Content>\n *     <ModalGlass.Header>\n *       <ModalGlass.Title>Title</ModalGlass.Title>\n *     </ModalGlass.Header>\n *     <ModalGlass.Body>Content</ModalGlass.Body>\n *     <ModalGlass.Footer>\n *       <ModalGlass.Close asChild>\n *         <ButtonGlass>Close</ButtonGlass>\n *       </ModalGlass.Close>\n *     </ModalGlass.Footer>\n *   </ModalGlass.Content>\n * </ModalGlass.Root>\n * ```\n *\n * @example Controlled\n * ```tsx\n * <ModalGlass.Root open={open} onOpenChange={setOpen}>\n *   <ModalGlass.Content showCloseButton={false}>\n *     <ModalGlass.Header>\n *       <ModalGlass.Title>Confirm</ModalGlass.Title>\n *     </ModalGlass.Header>\n *     <ModalGlass.Footer>\n *       <ButtonGlass onClick={() => setOpen(false)}>OK</ButtonGlass>\n *     </ModalGlass.Footer>\n *   </ModalGlass.Content>\n * </ModalGlass.Root>\n * ```\n */\nexport const ModalGlass = {\n  Root: ModalRoot,\n  Trigger: ModalTrigger,\n  Portal: ModalPortal,\n  Overlay: ModalOverlay,\n  Content: ModalContent,\n  Header: ModalHeader,\n  Body: ModalBody,\n  Footer: ModalFooter,\n  Title: ModalTitle,\n  Description: ModalDescription,\n  Close: ModalClose,\n};\n\n// Named exports for direct imports\nexport {\n  ModalRoot,\n  ModalTrigger,\n  ModalPortal,\n  ModalOverlay,\n  ModalContent,\n  ModalHeader,\n  ModalBody,\n  ModalFooter,\n  ModalTitle,\n  ModalDescription,\n  ModalClose,\n};\n\nexport type { ModalRootProps, ModalContentProps };\n\n// ========================================\n// SHADCN/UI COMPATIBLE ALIASES\n// ========================================\n\n/**\n * Dialog - shadcn/ui compatible alias for ModalGlass.Root\n *\n * @example shadcn/ui compatible usage\n * ```tsx\n * import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from 'shadcn-glass-ui'\n *\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button>Open</Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Title</DialogTitle>\n *     </DialogHeader>\n *     <p>Content goes directly here (no DialogBody needed)</p>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nexport const Dialog = ModalRoot;\n\n/** DialogTrigger - shadcn/ui compatible alias for ModalGlass.Trigger */\nexport const DialogTrigger = ModalTrigger;\n\n/** DialogPortal - shadcn/ui compatible alias for ModalGlass.Portal */\nexport const DialogPortal = ModalPortal;\n\n/** DialogOverlay - shadcn/ui compatible alias for ModalGlass.Overlay */\nexport const DialogOverlay = ModalOverlay;\n\n/** DialogContent - shadcn/ui compatible alias for ModalGlass.Content */\nexport const DialogContent = ModalContent;\n\n/** DialogHeader - shadcn/ui compatible alias for ModalGlass.Header */\nexport const DialogHeader = ModalHeader;\n\n/** DialogFooter - shadcn/ui compatible alias for ModalGlass.Footer */\nexport const DialogFooter = ModalFooter;\n\n/** DialogTitle - shadcn/ui compatible alias for ModalGlass.Title */\nexport const DialogTitle = ModalTitle;\n\n/** DialogDescription - shadcn/ui compatible alias for ModalGlass.Description */\nexport const DialogDescription = ModalDescription;\n\n/** DialogClose - shadcn/ui compatible alias for ModalGlass.Close */\nexport const DialogClose = ModalClose;\n"
    }
  ],
  "categories": [
    "ui"
  ],
  "cssVars": {
    "light": {
      "--glass-bg": "rgba(255, 255, 255, 0.1)",
      "--glass-border": "rgba(255, 255, 255, 0.2)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    },
    "dark": {
      "--glass-bg": "rgba(255, 255, 255, 0.05)",
      "--glass-border": "rgba(255, 255, 255, 0.1)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    }
  }
}