{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet-glass",
  "type": "registry:ui",
  "title": "Sheet Glass",
  "description": "Glass-themed sheet/drawer component with full shadcn/ui Sheet API compatibility.\n * Slides in from top, right, bottom, or left edges with backdrop overlay and blur effects.\n *\n * ## Features",
  "dependencies": [
    "@radix-ui/react-dialog",
    "lucide-react",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn",
    "primitives",
    "variants"
  ],
  "files": [
    {
      "path": "components/glass/ui/sheet-glass.tsx",
      "type": "registry:component",
      "content": "/* eslint-disable react-refresh/only-export-components */\n/**\n * SheetGlass Component\n *\n * Glass-themed sheet/drawer component with full shadcn/ui Sheet API compatibility.\n * Slides in from top, right, bottom, or left edges with backdrop overlay and blur effects.\n *\n * ## Features\n * - 4 slide directions: top, right, bottom, left\n * - Backdrop overlay with blur effect and click-to-close\n * - Auto close button in corner (optional via showCloseButton)\n * - ESC key and click-outside to dismiss\n * - Focus trap and keyboard navigation\n * - Portal rendering (always in document.body)\n * - Controlled and uncontrolled modes\n * - 100% shadcn/ui compatible API\n * - Theme-aware glass styling via CSS variables\n *\n * ## Sub-Components\n * - **SheetGlass.Root / Sheet**: Sheet root with open/onOpenChange state\n * - **SheetGlass.Trigger / SheetTrigger**: Opens sheet when clicked (supports asChild)\n * - **SheetGlass.Portal / SheetPortal**: Renders children into portal\n * - **SheetGlass.Overlay / SheetOverlay**: Backdrop with glass blur effect\n * - **SheetGlass.Content / SheetContent**: Main container with side prop and glass styling\n * - **SheetGlass.Header / SheetHeader**: Header section with flex layout\n * - **SheetGlass.Title / SheetTitle**: Sheet title with accessibility\n * - **SheetGlass.Description / SheetDescription**: Sheet description text\n * - **SheetGlass.Footer / SheetFooter**: Footer with action buttons layout\n * - **SheetGlass.Close / SheetClose**: Closes sheet when clicked (supports asChild)\n *\n * ## CSS Variables\n * Uses ModalGlass CSS variables for consistent styling:\n * - `--modal-bg`: Sheet background color (glass effect)\n * - `--modal-border`: Sheet border color\n * - `--modal-glow`: Sheet shadow/glow effect\n * - `--modal-glow-effect`: Inner glow layer\n * - `--modal-overlay`: Backdrop overlay color\n * - `--modal-close-btn-bg`: Close button background\n * - `--modal-close-btn-border`: Close button border\n *\n * @example Navigation drawer (left side)\n * ```tsx\n * import { SheetGlass, ButtonGlass } from 'shadcn-glass-ui'\n *\n * function Navigation() {\n *   return (\n *     <SheetGlass.Root>\n *       <SheetGlass.Trigger asChild>\n *         <ButtonGlass>Menu</ButtonGlass>\n *       </SheetGlass.Trigger>\n *       <SheetGlass.Content side=\"left\">\n *         <SheetGlass.Header>\n *           <SheetGlass.Title>Navigation</SheetGlass.Title>\n *         </SheetGlass.Header>\n *         <nav>...</nav>\n *       </SheetGlass.Content>\n *     </SheetGlass.Root>\n *   )\n * }\n * ```\n *\n * @example Filters panel (right side)\n * ```tsx\n * <SheetGlass.Root>\n *   <SheetGlass.Trigger asChild>\n *     <ButtonGlass variant=\"outline\">Filters</ButtonGlass>\n *   </SheetGlass.Trigger>\n *   <SheetGlass.Content side=\"right\">\n *     <SheetGlass.Header>\n *       <SheetGlass.Title>Filter Options</SheetGlass.Title>\n *     </SheetGlass.Header>\n *     <div>Filter controls...</div>\n *     <SheetGlass.Footer>\n *       <SheetGlass.Close asChild>\n *         <ButtonGlass variant=\"ghost\">Cancel</ButtonGlass>\n *       </SheetGlass.Close>\n *       <ButtonGlass>Apply Filters</ButtonGlass>\n *     </SheetGlass.Footer>\n *   </SheetGlass.Content>\n * </SheetGlass.Root>\n * ```\n *\n * @example Notifications panel (top)\n * ```tsx\n * <SheetGlass.Root>\n *   <SheetGlass.Trigger asChild>\n *     <ButtonGlass>Notifications</ButtonGlass>\n *   </SheetGlass.Trigger>\n *   <SheetGlass.Content side=\"top\">\n *     <SheetGlass.Header>\n *       <SheetGlass.Title>Recent Activity</SheetGlass.Title>\n *     </SheetGlass.Header>\n *     <div>Notifications list...</div>\n *   </SheetGlass.Content>\n * </SheetGlass.Root>\n * ```\n *\n * @example Mobile actions menu (bottom)\n * ```tsx\n * <SheetGlass.Root>\n *   <SheetGlass.Trigger asChild>\n *     <ButtonGlass>Actions</ButtonGlass>\n *   </SheetGlass.Trigger>\n *   <SheetGlass.Content side=\"bottom\">\n *     <SheetGlass.Header>\n *       <SheetGlass.Title>Choose an action</SheetGlass.Title>\n *     </SheetGlass.Header>\n *     <div>Action buttons...</div>\n *   </SheetGlass.Content>\n * </SheetGlass.Root>\n * ```\n *\n * @accessibility\n * - Built on Radix UI Dialog with full WCAG 2.1 AA compliance\n * - Keyboard: Escape to close, Tab/Shift+Tab for focus navigation\n * - Screen Readers: role=\"dialog\", aria-modal=\"true\", aria-labelledby, aria-describedby\n * - Focus Management: Auto-focus first focusable element, return focus on close\n * - Focus Trap: Prevents tabbing outside sheet while open\n * - Close Button: Always includes accessible \"Close\" label for screen readers\n *\n * @since v2.4.0\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 { sheetVariants, type SheetSide } from '@/lib/variants/sheet-glass-variants';\nimport { ICON_SIZES } from '@/components/glass/primitives';\nimport '@/glass-theme.css';\n\n// ========================================\n// COMPOUND COMPONENT: ROOT\n// ========================================\n\n/**\n * SheetGlass.Root - Sheet root component\n *\n * Supports both controlled (open/onOpenChange) and uncontrolled (with Trigger) modes.\n */\nfunction SheetRoot({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\n// ========================================\n// COMPOUND COMPONENT: TRIGGER\n// ========================================\n\n/**\n * SheetGlass.Trigger - Opens the sheet when clicked\n *\n * Use `asChild` to render as the child element instead of a button.\n */\nfunction SheetTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\n// ========================================\n// COMPOUND COMPONENT: PORTAL\n// ========================================\n\n/**\n * SheetGlass.Portal - Renders children into a portal\n */\nfunction SheetPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n}\n\n// ========================================\n// COMPOUND COMPONENT: OVERLAY\n// ========================================\n\n/**\n * SheetGlass.Overlay - Backdrop with glass blur effect\n */\nconst SheetOverlay = 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=\"sheet-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));\nSheetOverlay.displayName = 'SheetOverlay';\n\n// ========================================\n// COMPOUND COMPONENT: CONTENT\n// ========================================\n\n/**\n * Props for SheetContent component.\n *\n * @example\n * ```tsx\n * const props: SheetContentProps = {\n *   side: 'right',\n *   showCloseButton: true,\n * };\n * ```\n */\ninterface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /**\n   * Side from which the sheet slides in.\n   *\n   * @default 'right'\n   * @example\n   * ```tsx\n   * <SheetGlass.Content side=\"left\">...</SheetGlass.Content>\n   * ```\n   */\n  side?: SheetSide;\n\n  /**\n   * Show close button (X) in top-right corner.\n   *\n   * @default true\n   * @example\n   * ```tsx\n   * <SheetGlass.Content showCloseButton={false}>...</SheetGlass.Content>\n   * ```\n   */\n  showCloseButton?: boolean;\n}\n\n/**\n * SheetGlass.Content - Main sheet container with glass styling\n *\n * Automatically renders Portal and Overlay.\n *\n * @param side - Direction to slide in from: 'top' | 'right' | 'bottom' | 'left' (default: 'right')\n * @param showCloseButton - Show X button in corner (default: true)\n */\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  SheetContentProps\n>(({ className, children, side = 'right', showCloseButton = true, ...props }, ref) => (\n  <SheetPortal>\n    <SheetOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      data-slot=\"sheet-content\"\n      data-side={side}\n      className={cn(sheetVariants({ side }), className)}\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 pointer-events-none\"\n        style={{\n          background: 'var(--modal-glow-effect)',\n          borderRadius: 'inherit',\n        }}\n        aria-hidden=\"true\"\n      />\n      {/* Content */}\n      <div className=\"relative flex-1 flex flex-col overflow-auto\">{children}</div>\n      {/* Close button */}\n      {showCloseButton && (\n        <DialogPrimitive.Close\n          data-slot=\"sheet-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  </SheetPortal>\n));\nSheetContent.displayName = 'SheetContent';\n\n// ========================================\n// COMPOUND COMPONENT: HEADER\n// ========================================\n\n/**\n * SheetGlass.Header - Header section with flex layout\n */\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  );\n}\n\n// ========================================\n// COMPOUND COMPONENT: FOOTER\n// ========================================\n\n/**\n * SheetGlass.Footer - Footer section with flex layout for actions\n */\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\n        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end mt-auto pt-4',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n// ========================================\n// COMPOUND COMPONENT: TITLE\n// ========================================\n\n/**\n * SheetGlass.Title - Sheet title with proper accessibility\n */\nconst SheetTitle = 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=\"sheet-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));\nSheetTitle.displayName = 'SheetTitle';\n\n// ========================================\n// COMPOUND COMPONENT: DESCRIPTION\n// ========================================\n\n/**\n * SheetGlass.Description - Sheet description text\n */\nconst SheetDescription = 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=\"sheet-description\"\n    className={cn('text-sm', className)}\n    style={{ color: 'var(--text-muted)' }}\n    {...props}\n  />\n));\nSheetDescription.displayName = 'SheetDescription';\n\n// ========================================\n// COMPOUND COMPONENT: CLOSE\n// ========================================\n\n/**\n * SheetGlass.Close - Closes the sheet when clicked\n *\n * Use `asChild` to render as the child element.\n *\n * @example\n * ```tsx\n * <SheetGlass.Close asChild>\n *   <ButtonGlass variant=\"ghost\">Cancel</ButtonGlass>\n * </SheetGlass.Close>\n * ```\n */\nfunction SheetClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\n// ========================================\n// EXPORT COMPOUND COMPONENT\n// ========================================\n\n/**\n * SheetGlass - Glass-themed Sheet with shadcn/ui API compatibility\n *\n * Built on @radix-ui/react-dialog for full accessibility support.\n *\n * @example Compound component pattern\n * ```tsx\n * <SheetGlass.Root>\n *   <SheetGlass.Trigger asChild>\n *     <ButtonGlass>Open</ButtonGlass>\n *   </SheetGlass.Trigger>\n *   <SheetGlass.Content side=\"right\">\n *     <SheetGlass.Header>\n *       <SheetGlass.Title>Title</SheetGlass.Title>\n *     </SheetGlass.Header>\n *     <p>Content</p>\n *     <SheetGlass.Footer>\n *       <SheetGlass.Close asChild>\n *         <ButtonGlass>Close</ButtonGlass>\n *       </SheetGlass.Close>\n *     </SheetGlass.Footer>\n *   </SheetGlass.Content>\n * </SheetGlass.Root>\n * ```\n */\nexport const SheetGlass = {\n  Root: SheetRoot,\n  Trigger: SheetTrigger,\n  Portal: SheetPortal,\n  Overlay: SheetOverlay,\n  Content: SheetContent,\n  Header: SheetHeader,\n  Footer: SheetFooter,\n  Title: SheetTitle,\n  Description: SheetDescription,\n  Close: SheetClose,\n};\n\n// Named exports for direct imports\nexport {\n  SheetRoot,\n  SheetTrigger,\n  SheetPortal,\n  SheetOverlay,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n  SheetClose,\n};\n\n// ========================================\n// SHADCN/UI COMPATIBLE ALIASES\n// ========================================\n\n/**\n * Sheet - shadcn/ui compatible alias for SheetGlass.Root\n */\nexport const Sheet = SheetRoot;\n\nexport type { SheetContentProps, SheetSide };\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"
    }
  }
}