Sheet Glass

1/* eslint-disable react-refresh/only-export-components */
2/**
3 * SheetGlass Component
4 *
5 * Glass-themed sheet/drawer component with full shadcn/ui Sheet API compatibility.
6 * Slides in from top, right, bottom, or left edges with backdrop overlay and blur effects.
7 *
8 * ## Features
9 * - 4 slide directions: top, right, bottom, left
10 * - Backdrop overlay with blur effect and click-to-close
11 * - Auto close button in corner (optional via showCloseButton)
12 * - ESC key and click-outside to dismiss
13 * - Focus trap and keyboard navigation
14 * - Portal rendering (always in document.body)
15 * - Controlled and uncontrolled modes
16 * - 100% shadcn/ui compatible API
17 * - Theme-aware glass styling via CSS variables
18 *
19 * ## Sub-Components
20 * - **SheetGlass.Root / Sheet**: Sheet root with open/onOpenChange state
21 * - **SheetGlass.Trigger / SheetTrigger**: Opens sheet when clicked (supports asChild)
22 * - **SheetGlass.Portal / SheetPortal**: Renders children into portal
23 * - **SheetGlass.Overlay / SheetOverlay**: Backdrop with glass blur effect
24 * - **SheetGlass.Content / SheetContent**: Main container with side prop and glass styling
25 * - **SheetGlass.Header / SheetHeader**: Header section with flex layout
26 * - **SheetGlass.Title / SheetTitle**: Sheet title with accessibility
27 * - **SheetGlass.Description / SheetDescription**: Sheet description text
28 * - **SheetGlass.Footer / SheetFooter**: Footer with action buttons layout
29 * - **SheetGlass.Close / SheetClose**: Closes sheet when clicked (supports asChild)
30 *
31 * ## CSS Variables
32 * Uses ModalGlass CSS variables for consistent styling:
33 * - `--modal-bg`: Sheet background color (glass effect)
34 * - `--modal-border`: Sheet border color
35 * - `--modal-glow`: Sheet shadow/glow effect
36 * - `--modal-glow-effect`: Inner glow layer
37 * - `--modal-overlay`: Backdrop overlay color
38 * - `--modal-close-btn-bg`: Close button background
39 * - `--modal-close-btn-border`: Close button border
40 *
41 * @example Navigation drawer (left side)
42 * ```tsx
43 * import { SheetGlass, ButtonGlass } from 'shadcn-glass-ui'
44 *
45 * function Navigation() {
46 *   return (
47 *     <SheetGlass.Root>
48 *       <SheetGlass.Trigger asChild>
49 *         <ButtonGlass>Menu</ButtonGlass>
50 *       </SheetGlass.Trigger>
51 *       <SheetGlass.Content side="left">
52 *         <SheetGlass.Header>
53 *           <SheetGlass.Title>Navigation</SheetGlass.Title>
54 *         </SheetGlass.Header>
55 *         <nav>...</nav>
56 *       </SheetGlass.Content>
57 *     </SheetGlass.Root>
58 *   )
59 * }
60// … truncated