@humain/ui 2.1.62 → 2.1.65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (160) hide show
  1. package/dist/components/organisms/ai/AIToolCall/AIToolCall.d.ts +9 -3
  2. package/dist/components/organisms/ai/AIToolRun/index.d.ts +1 -1
  3. package/dist/components/organisms/ai/AIToolRun/validation.d.ts +24 -3
  4. package/dist/components/organisms/ai/_shared/format-ai-duration.d.ts +1 -0
  5. package/dist/components/organisms/ai/_shared/workflow-step-renderer.d.ts +1 -0
  6. package/dist/index.js +52 -52
  7. package/dist/index151.js +1 -1
  8. package/dist/index174.js +10 -333
  9. package/dist/index174.js.map +1 -1
  10. package/dist/index175.js +310 -137
  11. package/dist/index175.js.map +1 -1
  12. package/dist/index176.js +148 -174
  13. package/dist/index176.js.map +1 -1
  14. package/dist/index177.js +186 -78
  15. package/dist/index177.js.map +1 -1
  16. package/dist/index178.js +74 -124
  17. package/dist/index178.js.map +1 -1
  18. package/dist/index179.js +133 -1
  19. package/dist/index179.js.map +1 -0
  20. package/dist/index180.js +2 -201
  21. package/dist/index181.js +201 -0
  22. package/dist/{index180.js.map → index181.js.map} +1 -1
  23. package/dist/index183.js +130 -166
  24. package/dist/index183.js.map +1 -1
  25. package/dist/index184.js +195 -983
  26. package/dist/index184.js.map +1 -1
  27. package/dist/index185.js +1069 -369
  28. package/dist/index185.js.map +1 -1
  29. package/dist/index186.js +395 -197
  30. package/dist/index186.js.map +1 -1
  31. package/dist/index187.js +198 -243
  32. package/dist/index187.js.map +1 -1
  33. package/dist/index188.js +263 -3
  34. package/dist/index188.js.map +1 -1
  35. package/dist/index189.js +3 -209
  36. package/dist/index189.js.map +1 -1
  37. package/dist/index190.js +190 -777
  38. package/dist/index190.js.map +1 -1
  39. package/dist/index191.js +771 -252
  40. package/dist/index191.js.map +1 -1
  41. package/dist/index192.js +250 -65
  42. package/dist/index192.js.map +1 -1
  43. package/dist/index193.js +72 -523
  44. package/dist/index193.js.map +1 -1
  45. package/dist/index194.js +537 -144
  46. package/dist/index194.js.map +1 -1
  47. package/dist/index195.js +139 -720
  48. package/dist/index195.js.map +1 -1
  49. package/dist/index196.js +707 -167
  50. package/dist/index196.js.map +1 -1
  51. package/dist/index197.js +175 -151
  52. package/dist/index197.js.map +1 -1
  53. package/dist/index198.js +152 -487
  54. package/dist/index198.js.map +1 -1
  55. package/dist/index199.js +472 -225
  56. package/dist/index199.js.map +1 -1
  57. package/dist/index200.js +236 -260
  58. package/dist/index200.js.map +1 -1
  59. package/dist/index201.js +265 -215
  60. package/dist/index201.js.map +1 -1
  61. package/dist/index202.js +207 -307
  62. package/dist/index202.js.map +1 -1
  63. package/dist/index203.js +302 -135
  64. package/dist/index203.js.map +1 -1
  65. package/dist/index204.js +140 -271
  66. package/dist/index204.js.map +1 -1
  67. package/dist/index205.js +263 -253
  68. package/dist/index205.js.map +1 -1
  69. package/dist/index206.js +244 -137
  70. package/dist/index206.js.map +1 -1
  71. package/dist/index207.js +100 -238
  72. package/dist/index207.js.map +1 -1
  73. package/dist/index208.js +278 -74
  74. package/dist/index208.js.map +1 -1
  75. package/dist/index209.js +56 -97
  76. package/dist/index209.js.map +1 -1
  77. package/dist/index210.js +142 -47
  78. package/dist/index210.js.map +1 -1
  79. package/dist/index211.js +38 -84
  80. package/dist/index211.js.map +1 -1
  81. package/dist/index212.js +72 -252
  82. package/dist/index212.js.map +1 -1
  83. package/dist/index213.js +274 -26
  84. package/dist/index213.js.map +1 -1
  85. package/dist/index214.js +29 -94
  86. package/dist/index214.js.map +1 -1
  87. package/dist/index215.js +98 -25
  88. package/dist/index215.js.map +1 -1
  89. package/dist/index216.js +20 -565
  90. package/dist/index216.js.map +1 -1
  91. package/dist/index217.js +564 -17
  92. package/dist/index217.js.map +1 -1
  93. package/dist/index218.js +20 -23
  94. package/dist/index218.js.map +1 -1
  95. package/dist/index219.js +20 -95
  96. package/dist/index219.js.map +1 -1
  97. package/dist/index220.js +92 -88
  98. package/dist/index220.js.map +1 -1
  99. package/dist/index221.js +97 -29
  100. package/dist/index221.js.map +1 -1
  101. package/dist/index222.js +24 -470
  102. package/dist/index222.js.map +1 -1
  103. package/dist/index223.js +446 -196
  104. package/dist/index223.js.map +1 -1
  105. package/dist/index224.js +199 -729
  106. package/dist/index224.js.map +1 -1
  107. package/dist/index225.js +750 -61
  108. package/dist/index225.js.map +1 -1
  109. package/dist/index226.js +58 -181
  110. package/dist/index226.js.map +1 -1
  111. package/dist/index227.js +175 -259
  112. package/dist/index227.js.map +1 -1
  113. package/dist/index228.js +246 -172
  114. package/dist/index228.js.map +1 -1
  115. package/dist/index229.js +195 -32
  116. package/dist/index229.js.map +1 -1
  117. package/dist/index230.js +12 -40
  118. package/dist/index230.js.map +1 -1
  119. package/dist/index231.js +23 -26
  120. package/dist/index231.js.map +1 -1
  121. package/dist/index232.js +45 -22
  122. package/dist/index232.js.map +1 -1
  123. package/dist/index233.js +27 -48
  124. package/dist/index233.js.map +1 -1
  125. package/dist/index234.js +52 -26
  126. package/dist/index234.js.map +1 -1
  127. package/dist/index235.js +40 -225
  128. package/dist/index235.js.map +1 -1
  129. package/dist/index236.js +217 -39
  130. package/dist/index236.js.map +1 -1
  131. package/dist/index237.js +50 -0
  132. package/dist/index237.js.map +1 -0
  133. package/dist/styles.css +1 -1
  134. package/dist/wc/AIToolCall.js +218 -0
  135. package/dist/wc/AIToolCall.js.map +1 -0
  136. package/dist/wc/hf-ai-tool-call.js +34 -219
  137. package/dist/wc/hf-ai-tool-call.js.map +1 -1
  138. package/dist/wc/hf-ai-tool-run.js +673 -576
  139. package/dist/wc/hf-ai-tool-run.js.map +1 -1
  140. package/dist/wc/workflow-step-renderer.js +94 -86
  141. package/dist/wc/workflow-step-renderer.js.map +1 -1
  142. package/dist/wc-react/AIToolCall.js +218 -0
  143. package/dist/wc-react/AIToolCall.js.map +1 -0
  144. package/dist/wc-react/hf-ai-tool-call.js +32 -217
  145. package/dist/wc-react/hf-ai-tool-call.js.map +1 -1
  146. package/dist/wc-react/hf-ai-tool-run.js +698 -601
  147. package/dist/wc-react/hf-ai-tool-run.js.map +1 -1
  148. package/dist/wc-react/workflow-step-renderer.js +76 -68
  149. package/dist/wc-react/workflow-step-renderer.js.map +1 -1
  150. package/package.json +1 -1
  151. package/skills/humain-ui/SKILL.md +1 -1
  152. package/skills/humain-ui-wc/SKILL.md +1 -1
  153. package/skills/humain-ui-wc.skill +0 -0
  154. package/skills/humain-ui.skill +0 -0
  155. package/dist/index182.js +0 -143
  156. package/dist/index182.js.map +0 -1
  157. package/dist/wc/wrench.js +0 -10
  158. package/dist/wc/wrench.js.map +0 -1
  159. package/dist/wc-react/wrench.js +0 -10
  160. package/dist/wc-react/wrench.js.map +0 -1
package/dist/index209.js CHANGED
@@ -1,154 +1,113 @@
1
1
  "use client";
2
2
  import { cn } from "./index2.js";
3
- import { DrawerDirectionContext, useDrawerDirection } from "./index208.js";
4
3
  import * as React from "react";
5
4
  import { jsx, jsxs } from "react/jsx-runtime";
6
5
  import { Dialog } from "@base-ui/react/dialog";
7
- //#region src/components/organisms/overlays/Drawer/Drawer.tsx
8
- var Root = React.forwardRef(function Root({ direction = "bottom", defaultOpen = false, onOpenChange, children, ...props }, _ref) {
9
- const [open, setOpen] = React.useState(defaultOpen);
10
- const handleOpenChange = React.useCallback((newOpen) => {
11
- setOpen(newOpen);
12
- onOpenChange?.(newOpen);
13
- }, [onOpenChange]);
6
+ //#region src/components/ui/drawer.tsx
7
+ var DrawerDirectionContext = React.createContext("bottom");
8
+ function useDrawerDirection() {
9
+ return React.useContext(DrawerDirectionContext);
10
+ }
11
+ function Drawer({ direction = "bottom", ...props }) {
14
12
  return /* @__PURE__ */ jsx(DrawerDirectionContext.Provider, {
15
13
  value: direction,
16
14
  children: /* @__PURE__ */ jsx(Dialog.Root, {
17
15
  "data-slot": "drawer",
18
- open,
19
- onOpenChange: handleOpenChange,
20
- ...props,
21
- children
16
+ ...props
22
17
  })
23
18
  });
24
- });
25
- Root.displayName = "Drawer.Root";
26
- var Trigger = React.forwardRef(function Trigger({ ...props }, ref) {
19
+ }
20
+ function DrawerTrigger({ ...props }) {
27
21
  return /* @__PURE__ */ jsx(Dialog.Trigger, {
28
- ref,
29
22
  "data-slot": "drawer-trigger",
30
23
  ...props
31
24
  });
32
- });
33
- Trigger.displayName = "Drawer.Trigger";
34
- function Portal({ ...props }) {
25
+ }
26
+ function DrawerPortal({ ...props }) {
35
27
  return /* @__PURE__ */ jsx(Dialog.Portal, {
36
28
  "data-slot": "drawer-portal",
37
29
  ...props
38
30
  });
39
31
  }
40
- Portal.displayName = "Drawer.Portal";
41
- var Close = React.forwardRef(function Close({ ...props }, ref) {
32
+ function DrawerClose({ ...props }) {
42
33
  return /* @__PURE__ */ jsx(Dialog.Close, {
43
- ref,
44
34
  "data-slot": "drawer-close",
45
35
  ...props
46
36
  });
47
- });
48
- Close.displayName = "Drawer.Close";
49
- var Backdrop = React.forwardRef(function Backdrop({ className, disableAnimation, disableBackdropBlur, ...props }, ref) {
37
+ }
38
+ function DrawerOverlay({ className, disableAnimation, disableBackdropBlur, ...props }) {
50
39
  return /* @__PURE__ */ jsx(Dialog.Backdrop, {
51
- ref,
52
- "data-slot": "drawer-backdrop",
53
- className: cn("bg-background/80/10 fixed inset-0 z-50", !disableAnimation && "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 motion-reduce:animate-none", !disableBackdropBlur && "supports-backdrop-filter:backdrop-blur-xs", className),
40
+ "data-slot": "drawer-overlay",
41
+ className: cn("bg-background/80/10 fixed inset-0 z-50", !disableAnimation && "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0", !disableBackdropBlur && "supports-backdrop-filter:backdrop-blur-xs", className),
54
42
  ...props
55
43
  });
56
- });
57
- Backdrop.displayName = "Drawer.Backdrop";
58
- var Viewport = React.forwardRef(function Viewport({ className, children, ...props }, ref) {
59
- return /* @__PURE__ */ jsx(Dialog.Viewport, {
60
- ref,
61
- "data-slot": "drawer-viewport",
62
- className: cn("fixed inset-0 z-50", className),
63
- ...props,
64
- children
65
- });
66
- });
67
- Viewport.displayName = "Drawer.Viewport";
68
- var Popup = React.forwardRef(function Popup({ className, children, disableAnimation, disableBackdropBlur, ...props }, ref) {
44
+ }
45
+ function DrawerContent({ className, children, disableAnimation, disableBackdropBlur, ...props }) {
69
46
  const direction = useDrawerDirection();
70
- return /* @__PURE__ */ jsxs(Portal, {
47
+ return /* @__PURE__ */ jsxs(DrawerPortal, {
71
48
  "data-slot": "drawer-portal",
72
- children: [/* @__PURE__ */ jsx(Backdrop, {
49
+ children: [/* @__PURE__ */ jsx(DrawerOverlay, {
73
50
  disableAnimation,
74
51
  disableBackdropBlur
75
52
  }), /* @__PURE__ */ jsxs(Dialog.Popup, {
76
- ref,
77
- "data-slot": "drawer-popup",
53
+ "data-slot": "drawer-content",
78
54
  "data-vaul-drawer-direction": direction,
79
- className: cn("bg-background flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50", !disableAnimation && "data-open:animate-in data-closed:animate-out data-open:duration-300 data-closed:duration-200 data-open:ease-(--ease-decelerate) data-closed:ease-in data-[vaul-drawer-direction=bottom]:data-open:slide-in-from-bottom-full data-[vaul-drawer-direction=bottom]:data-closed:slide-out-to-bottom-full data-[vaul-drawer-direction=top]:data-open:slide-in-from-top-full data-[vaul-drawer-direction=top]:data-closed:slide-out-to-top-full data-[vaul-drawer-direction=left]:data-open:slide-in-from-left-full data-[vaul-drawer-direction=left]:data-closed:slide-out-to-left-full data-[vaul-drawer-direction=right]:data-open:slide-in-from-right-full data-[vaul-drawer-direction=right]:data-closed:slide-out-to-right-full motion-reduce:animate-none", className),
55
+ className: cn("bg-background flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50", className),
80
56
  ...props,
81
- children: [/* @__PURE__ */ jsx("div", {
82
- "aria-hidden": "true",
83
- className: "bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block delight-fade-in motion-reduce:!animate-none"
84
- }), children]
57
+ children: [/* @__PURE__ */ jsx("div", { className: "bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children]
85
58
  })]
86
59
  });
87
- });
88
- Popup.displayName = "Drawer.Popup";
89
- var Header = React.forwardRef(function Header({ className, ...props }, ref) {
60
+ }
61
+ function DrawerHeader({ className, ...props }) {
90
62
  return /* @__PURE__ */ jsx("div", {
91
- ref,
92
63
  "data-slot": "drawer-header",
93
64
  className: cn("gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left flex flex-col", className),
94
65
  ...props
95
66
  });
96
- });
97
- Header.displayName = "Drawer.Header";
98
- var Footer = React.forwardRef(function Footer({ className, ...props }, ref) {
67
+ }
68
+ function DrawerFooter({ className, ...props }) {
99
69
  return /* @__PURE__ */ jsx("div", {
100
- ref,
101
70
  "data-slot": "drawer-footer",
102
71
  className: cn("gap-2 p-4 mt-auto flex flex-col", className),
103
72
  ...props
104
73
  });
105
- });
106
- Footer.displayName = "Drawer.Footer";
107
- var Title = React.forwardRef(function Title({ className, ...props }, ref) {
74
+ }
75
+ function DrawerTitle({ className, ...props }) {
108
76
  return /* @__PURE__ */ jsx(Dialog.Title, {
109
- ref,
110
77
  "data-slot": "drawer-title",
111
- className: cn("text-foreground font-medium delight-stagger motion-reduce:!animate-none", className),
112
- ...props,
113
- style: { "--delight-delay": "50ms" }
78
+ className: cn("text-foreground font-medium", className),
79
+ ...props
114
80
  });
115
- });
116
- Title.displayName = "Drawer.Title";
117
- var Description = React.forwardRef(function Description({ className, ...props }, ref) {
81
+ }
82
+ function DrawerDescription({ className, ...props }) {
118
83
  return /* @__PURE__ */ jsx(Dialog.Description, {
119
- ref,
120
84
  "data-slot": "drawer-description",
121
- className: cn("text-muted-foreground text-sm delight-stagger motion-reduce:!animate-none", className),
122
- ...props,
123
- style: { "--delight-delay": "100ms" }
124
- });
125
- });
126
- Description.displayName = "Drawer.Description";
127
- var Handle = React.forwardRef(function Handle({ className, ...props }, ref) {
128
- return /* @__PURE__ */ jsx("div", {
129
- ref,
130
- "data-slot": "drawer-handle",
131
- "aria-hidden": "true",
132
- className: cn("bg-muted mx-auto mt-4 h-1.5 w-[100px] shrink-0 rounded-full", className),
85
+ className: cn("text-muted-foreground text-sm", className),
133
86
  ...props
134
87
  });
135
- });
136
- Handle.displayName = "Drawer.Handle";
137
- var Drawer = Object.assign(Root, {
138
- Root,
139
- Trigger,
140
- Portal,
141
- Backdrop,
142
- Viewport,
143
- Popup,
144
- Header,
145
- Footer,
146
- Title,
147
- Description,
148
- Close,
149
- Handle
88
+ }
89
+ DrawerTrigger.displayName = "Drawer.Trigger";
90
+ DrawerPortal.displayName = "Drawer.Portal";
91
+ DrawerClose.displayName = "Drawer.Close";
92
+ DrawerOverlay.displayName = "Drawer.Overlay";
93
+ DrawerContent.displayName = "Drawer.Content";
94
+ DrawerHeader.displayName = "Drawer.Header";
95
+ DrawerFooter.displayName = "Drawer.Footer";
96
+ DrawerTitle.displayName = "Drawer.Title";
97
+ DrawerDescription.displayName = "Drawer.Description";
98
+ Drawer.displayName = "Drawer";
99
+ Object.assign(Drawer, {
100
+ Trigger: DrawerTrigger,
101
+ Portal: DrawerPortal,
102
+ Close: DrawerClose,
103
+ Overlay: DrawerOverlay,
104
+ Content: DrawerContent,
105
+ Header: DrawerHeader,
106
+ Footer: DrawerFooter,
107
+ Title: DrawerTitle,
108
+ Description: DrawerDescription
150
109
  });
151
110
  //#endregion
152
- export { Drawer, Backdrop as DrawerBackdrop, Close as DrawerClose, Description as DrawerDescription, Footer as DrawerFooter, Handle as DrawerHandle, Header as DrawerHeader, Popup as DrawerPopup, Portal as DrawerPortal, Root as DrawerRoot, Title as DrawerTitle, Trigger as DrawerTrigger, Viewport as DrawerViewport };
111
+ export { DrawerClose, DrawerContent, DrawerDescription, DrawerDirectionContext, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, useDrawerDirection };
153
112
 
154
113
  //# sourceMappingURL=index209.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index209.js","names":[],"sources":["../src/components/organisms/overlays/Drawer/Drawer.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog as DrawerPrimitive } from '@base-ui/react/dialog';\nimport * as React from 'react';\n\nimport {\n type DrawerDirection,\n DrawerDirectionContext,\n useDrawerDirection,\n} from '@/components/ui/drawer';\nimport { cn } from '@/lib/utils';\n\n// ============================================\n// Root (with internal state management)\n// ============================================\n\nexport interface RootProps\n extends Omit<DrawerPrimitive.Root.Props, 'open' | 'onOpenChange'> {\n /** Direction from which the drawer slides in */\n direction?: DrawerDirection;\n /** Initial open state. Component manages state internally. */\n defaultOpen?: boolean;\n /** Callback when open state changes */\n onOpenChange?: (open: boolean) => void;\n}\n\nconst Root = React.forwardRef<HTMLDivElement, RootProps>(function Root(\n {\n direction = 'bottom',\n defaultOpen = false,\n onOpenChange,\n children,\n ...props\n },\n _ref,\n) {\n const [open, setOpen] = React.useState(defaultOpen);\n\n const handleOpenChange = React.useCallback(\n (newOpen: boolean) => {\n setOpen(newOpen);\n onOpenChange?.(newOpen);\n },\n [onOpenChange],\n );\n\n return (\n <DrawerDirectionContext.Provider value={direction}>\n <DrawerPrimitive.Root\n data-slot=\"drawer\"\n open={open}\n onOpenChange={handleOpenChange}\n {...props}\n >\n {children}\n </DrawerPrimitive.Root>\n </DrawerDirectionContext.Provider>\n );\n});\nRoot.displayName = 'Drawer.Root';\n\n// ============================================\n// Trigger\n// ============================================\n\nexport type TriggerProps = DrawerPrimitive.Trigger.Props;\n\nconst Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(\n function Trigger({ ...props }, ref) {\n return (\n <DrawerPrimitive.Trigger\n ref={ref}\n data-slot=\"drawer-trigger\"\n {...props}\n />\n );\n },\n);\nTrigger.displayName = 'Drawer.Trigger';\n\n// ============================================\n// Portal\n// ============================================\n\nexport type PortalProps = DrawerPrimitive.Portal.Props;\n\nfunction Portal({ ...props }: PortalProps) {\n return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\nPortal.displayName = 'Drawer.Portal';\n\n// ============================================\n// Close\n// ============================================\n\nexport type CloseProps = DrawerPrimitive.Close.Props;\n\nconst Close = React.forwardRef<HTMLButtonElement, CloseProps>(function Close(\n { ...props },\n ref,\n) {\n return (\n <DrawerPrimitive.Close ref={ref} data-slot=\"drawer-close\" {...props} />\n );\n});\nClose.displayName = 'Drawer.Close';\n\n// ============================================\n// Backdrop (formerly DrawerOverlay)\n// ============================================\n\nexport interface BackdropProps extends DrawerPrimitive.Backdrop.Props {\n /** Disables open/close animations */\n disableAnimation?: boolean;\n /** Disables backdrop blur effect */\n disableBackdropBlur?: boolean;\n}\n\nconst Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(\n function Backdrop(\n { className, disableAnimation, disableBackdropBlur, ...props },\n ref,\n ) {\n return (\n <DrawerPrimitive.Backdrop\n ref={ref}\n data-slot=\"drawer-backdrop\"\n className={cn(\n 'bg-background/80/10 fixed inset-0 z-50',\n !disableAnimation &&\n 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 motion-reduce:animate-none',\n !disableBackdropBlur && 'supports-backdrop-filter:backdrop-blur-xs',\n className,\n )}\n {...props}\n />\n );\n },\n);\nBackdrop.displayName = 'Drawer.Backdrop';\n\n// ============================================\n// Viewport - Scroll container for drawer positioning\n// ============================================\n\nexport interface ViewportProps extends DrawerPrimitive.Viewport.Props {}\n\nconst Viewport = React.forwardRef<HTMLDivElement, ViewportProps>(\n function Viewport({ className, children, ...props }, ref) {\n return (\n <DrawerPrimitive.Viewport\n ref={ref}\n data-slot=\"drawer-viewport\"\n className={cn('fixed inset-0 z-50', className)}\n {...props}\n >\n {children}\n </DrawerPrimitive.Viewport>\n );\n },\n);\nViewport.displayName = 'Drawer.Viewport';\n\n// ============================================\n// Popup (formerly DrawerContent)\n// ============================================\n\nexport interface PopupProps extends DrawerPrimitive.Popup.Props {\n /** Disables open/close animations */\n disableAnimation?: boolean;\n /** Disables backdrop blur effect */\n disableBackdropBlur?: boolean;\n}\n\nconst Popup = React.forwardRef<HTMLDivElement, PopupProps>(function Popup(\n { className, children, disableAnimation, disableBackdropBlur, ...props },\n ref,\n) {\n const direction = useDrawerDirection();\n\n return (\n <Portal data-slot=\"drawer-portal\">\n <Backdrop\n disableAnimation={disableAnimation}\n disableBackdropBlur={disableBackdropBlur}\n />\n <DrawerPrimitive.Popup\n ref={ref}\n data-slot=\"drawer-popup\"\n data-vaul-drawer-direction={direction}\n className={cn(\n 'bg-background flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50',\n !disableAnimation &&\n 'data-open:animate-in data-closed:animate-out data-open:duration-300 data-closed:duration-200 data-open:ease-(--ease-decelerate) data-closed:ease-in data-[vaul-drawer-direction=bottom]:data-open:slide-in-from-bottom-full data-[vaul-drawer-direction=bottom]:data-closed:slide-out-to-bottom-full data-[vaul-drawer-direction=top]:data-open:slide-in-from-top-full data-[vaul-drawer-direction=top]:data-closed:slide-out-to-top-full data-[vaul-drawer-direction=left]:data-open:slide-in-from-left-full data-[vaul-drawer-direction=left]:data-closed:slide-out-to-left-full data-[vaul-drawer-direction=right]:data-open:slide-in-from-right-full data-[vaul-drawer-direction=right]:data-closed:slide-out-to-right-full motion-reduce:animate-none',\n className,\n )}\n {...props}\n >\n <div\n aria-hidden=\"true\"\n className=\"bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block delight-fade-in motion-reduce:!animate-none\"\n />\n {children}\n </DrawerPrimitive.Popup>\n </Portal>\n );\n});\nPopup.displayName = 'Drawer.Popup';\n\n// ============================================\n// Header\n// ============================================\n\nexport type HeaderProps = React.ComponentProps<'div'>;\n\nconst Header = React.forwardRef<HTMLDivElement, HeaderProps>(function Header(\n { className, ...props },\n ref,\n) {\n return (\n <div\n ref={ref}\n data-slot=\"drawer-header\"\n className={cn(\n 'gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left flex flex-col',\n className,\n )}\n {...props}\n />\n );\n});\nHeader.displayName = 'Drawer.Header';\n\n// ============================================\n// Footer\n// ============================================\n\nexport type FooterProps = React.ComponentProps<'div'>;\n\nconst Footer = React.forwardRef<HTMLDivElement, FooterProps>(function Footer(\n { className, ...props },\n ref,\n) {\n return (\n <div\n ref={ref}\n data-slot=\"drawer-footer\"\n className={cn('gap-2 p-4 mt-auto flex flex-col', className)}\n {...props}\n />\n );\n});\nFooter.displayName = 'Drawer.Footer';\n\n// ============================================\n// Title\n// ============================================\n\nexport type TitleProps = DrawerPrimitive.Title.Props;\n\nconst Title = React.forwardRef<HTMLHeadingElement, TitleProps>(function Title(\n { className, ...props },\n ref,\n) {\n return (\n <DrawerPrimitive.Title\n ref={ref}\n data-slot=\"drawer-title\"\n className={cn(\n 'text-foreground font-medium delight-stagger motion-reduce:!animate-none',\n className,\n )}\n {...props}\n style={{ '--delight-delay': '50ms' } as React.CSSProperties}\n />\n );\n});\nTitle.displayName = 'Drawer.Title';\n\n// ============================================\n// Description\n// ============================================\n\nexport type DescriptionProps = DrawerPrimitive.Description.Props;\n\nconst Description = React.forwardRef<HTMLParagraphElement, DescriptionProps>(\n function Description({ className, ...props }, ref) {\n return (\n <DrawerPrimitive.Description\n ref={ref}\n data-slot=\"drawer-description\"\n className={cn(\n 'text-muted-foreground text-sm delight-stagger motion-reduce:!animate-none',\n className,\n )}\n {...props}\n style={{ '--delight-delay': '100ms' } as React.CSSProperties}\n />\n );\n },\n);\nDescription.displayName = 'Drawer.Description';\n\n// ============================================\n// Handle - Drag handle for bottom drawers\n// ============================================\n\nexport type HandleProps = React.ComponentProps<'div'>;\n\nconst Handle = React.forwardRef<HTMLDivElement, HandleProps>(function Handle(\n { className, ...props },\n ref,\n) {\n return (\n <div\n ref={ref}\n data-slot=\"drawer-handle\"\n aria-hidden=\"true\"\n className={cn(\n 'bg-muted mx-auto mt-4 h-1.5 w-[100px] shrink-0 rounded-full',\n className,\n )}\n {...props}\n />\n );\n});\nHandle.displayName = 'Drawer.Handle';\n\n// ============================================\n// Compound component via dot notation (ADR-011)\n// ============================================\n\nconst Drawer = Object.assign(Root, {\n Root,\n Trigger,\n Portal,\n Backdrop,\n Viewport,\n Popup,\n Header,\n Footer,\n Title,\n Description,\n Close,\n Handle,\n});\n\n// ============================================\n// Exports\n// ============================================\n\nexport {\n Backdrop as DrawerBackdrop,\n Close as DrawerClose,\n Description as DrawerDescription,\n Drawer,\n Footer as DrawerFooter,\n Handle as DrawerHandle,\n Header as DrawerHeader,\n Popup as DrawerPopup,\n Portal as DrawerPortal,\n // Sub-components with Drawer prefix for direct imports\n Root as DrawerRoot,\n Title as DrawerTitle,\n Trigger as DrawerTrigger,\n Viewport as DrawerViewport,\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"index209.js","names":[],"sources":["../src/components/ui/drawer.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog as DrawerPrimitive } from '@base-ui/react/dialog';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type DrawerDirection = 'top' | 'right' | 'bottom' | 'left';\n\nexport const DrawerDirectionContext =\n React.createContext<DrawerDirection>('bottom');\n\nexport function useDrawerDirection() {\n return React.useContext(DrawerDirectionContext);\n}\n\nfunction Drawer({\n direction = 'bottom',\n ...props\n}: DrawerPrimitive.Root.Props & { direction?: DrawerDirection }) {\n return (\n <DrawerDirectionContext.Provider value={direction}>\n <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n </DrawerDirectionContext.Provider>\n );\n}\n\nfunction DrawerTrigger({\n ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nfunction DrawerPortal({\n ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\n\nfunction DrawerClose({\n ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nexport interface DrawerOverlayProps\n extends React.ComponentProps<typeof DrawerPrimitive.Backdrop> {\n /** Disables open/close animations */\n disableAnimation?: boolean;\n /** Disables backdrop blur effect */\n disableBackdropBlur?: boolean;\n}\n\nfunction DrawerOverlay({\n className,\n disableAnimation,\n disableBackdropBlur,\n ...props\n}: DrawerOverlayProps) {\n return (\n <DrawerPrimitive.Backdrop\n data-slot=\"drawer-overlay\"\n className={cn(\n 'bg-background/80/10 fixed inset-0 z-50',\n !disableAnimation &&\n 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0',\n !disableBackdropBlur && 'supports-backdrop-filter:backdrop-blur-xs',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport interface DrawerContentProps extends DrawerPrimitive.Popup.Props {\n /** Disables open/close animations */\n disableAnimation?: boolean;\n /** Disables backdrop blur effect */\n disableBackdropBlur?: boolean;\n}\n\nfunction DrawerContent({\n className,\n children,\n disableAnimation,\n disableBackdropBlur,\n ...props\n}: DrawerContentProps) {\n const direction = useDrawerDirection();\n\n return (\n <DrawerPortal data-slot=\"drawer-portal\">\n <DrawerOverlay\n disableAnimation={disableAnimation}\n disableBackdropBlur={disableBackdropBlur}\n />\n <DrawerPrimitive.Popup\n data-slot=\"drawer-content\"\n data-vaul-drawer-direction={direction}\n className={cn(\n 'bg-background flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50',\n className,\n )}\n {...props}\n >\n <div className=\"bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n {children}\n </DrawerPrimitive.Popup>\n </DrawerPortal>\n );\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"drawer-header\"\n className={cn(\n 'gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left flex flex-col',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"drawer-footer\"\n className={cn('gap-2 p-4 mt-auto flex flex-col', className)}\n {...props}\n />\n );\n}\n\nfunction DrawerTitle({\n className,\n ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n return (\n <DrawerPrimitive.Title\n data-slot=\"drawer-title\"\n className={cn('text-foreground font-medium', className)}\n {...props}\n />\n );\n}\n\nfunction DrawerDescription({\n className,\n ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n return (\n <DrawerPrimitive.Description\n data-slot=\"drawer-description\"\n className={cn('text-muted-foreground text-sm', className)}\n {...props}\n />\n );\n}\n\nDrawerTrigger.displayName = 'Drawer.Trigger';\nDrawerPortal.displayName = 'Drawer.Portal';\nDrawerClose.displayName = 'Drawer.Close';\nDrawerOverlay.displayName = 'Drawer.Overlay';\nDrawerContent.displayName = 'Drawer.Content';\nDrawerHeader.displayName = 'Drawer.Header';\nDrawerFooter.displayName = 'Drawer.Footer';\nDrawerTitle.displayName = 'Drawer.Title';\nDrawerDescription.displayName = 'Drawer.Description';\n\nDrawer.displayName = 'Drawer';\n\nconst DrawerNamespace = Object.assign(Drawer, {\n Trigger: DrawerTrigger,\n Portal: DrawerPortal,\n Close: DrawerClose,\n Overlay: DrawerOverlay,\n Content: DrawerContent,\n Header: DrawerHeader,\n Footer: DrawerFooter,\n Title: DrawerTitle,\n Description: DrawerDescription,\n});\n\nexport {\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerNamespace as Drawer,\n DrawerOverlay,\n DrawerPortal,\n DrawerTitle,\n DrawerTrigger,\n};\n"],"mappings":";;;;;;AASA,IAAa,yBACX,MAAM,cAA+B,QAAQ;AAE/C,SAAgB,qBAAqB;CACnC,OAAO,MAAM,WAAW,sBAAsB;AAChD;AAEA,SAAS,OAAO,EACd,YAAY,UACZ,GAAG,SAC4D;CAC/D,OACE,oBAAC,uBAAuB,UAAxB;EAAiC,OAAO;YACtC,oBAAC,OAAgB,MAAjB;GAAsB,aAAU;GAAS,GAAI;EAAQ,CAAA;CACtB,CAAA;AAErC;AAEA,SAAS,cAAc,EACrB,GAAG,SACoD;CACvD,OAAO,oBAAC,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aAAa,EACpB,GAAG,SACmD;CACtD,OAAO,oBAAC,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,YAAY,EACnB,GAAG,SACkD;CACrD,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAUA,SAAS,cAAc,EACrB,WACA,kBACA,qBACA,GAAG,SACkB;CACrB,OACE,oBAAC,OAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,0CACA,CAAC,oBACC,2FACF,CAAC,uBAAuB,6CACxB,SACF;EACA,GAAI;CACL,CAAA;AAEL;AASA,SAAS,cAAc,EACrB,WACA,UACA,kBACA,qBACA,GAAG,SACkB;CACrB,MAAM,YAAY,mBAAmB;CAErC,OACE,qBAAC,cAAD;EAAc,aAAU;YAAxB,CACE,oBAAC,eAAD;GACoB;GACG;EACtB,CAAA,GACD,qBAAC,OAAgB,OAAjB;GACE,aAAU;GACV,8BAA4B;GAC5B,WAAW,GACT,knCACA,SACF;GACA,GAAI;aAPN,CASE,oBAAC,OAAD,EAAK,WAAU,oIAAqI,CAAA,GACnJ,QACoB;IACX;;AAElB;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,4LACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAAC,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAAC,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,cAAc,cAAc;AAC5B,aAAa,cAAc;AAC3B,YAAY,cAAc;AAC1B,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,aAAa,cAAc;AAC3B,aAAa,cAAc;AAC3B,YAAY,cAAc;AAC1B,kBAAkB,cAAc;AAEhC,OAAO,cAAc;AAEG,OAAO,OAAO,QAAQ;CAC5C,SAAS;CACT,QAAQ;CACR,OAAO;CACP,SAAS;CACT,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,aAAa;AACf,CAAC"}
package/dist/index210.js CHANGED
@@ -1,59 +1,154 @@
1
1
  "use client";
2
2
  import { cn } from "./index2.js";
3
- import { jsx } from "react/jsx-runtime";
4
- import { PreviewCard } from "@base-ui/react/preview-card";
5
- //#region src/components/organisms/overlays/HoverCard/HoverCard.tsx
6
- function HoverCard({ ...props }) {
7
- return /* @__PURE__ */ jsx(PreviewCard.Root, {
8
- "data-slot": "hover-card",
3
+ import { DrawerDirectionContext, useDrawerDirection } from "./index209.js";
4
+ import * as React from "react";
5
+ import { jsx, jsxs } from "react/jsx-runtime";
6
+ import { Dialog } from "@base-ui/react/dialog";
7
+ //#region src/components/organisms/overlays/Drawer/Drawer.tsx
8
+ var Root = React.forwardRef(function Root({ direction = "bottom", defaultOpen = false, onOpenChange, children, ...props }, _ref) {
9
+ const [open, setOpen] = React.useState(defaultOpen);
10
+ const handleOpenChange = React.useCallback((newOpen) => {
11
+ setOpen(newOpen);
12
+ onOpenChange?.(newOpen);
13
+ }, [onOpenChange]);
14
+ return /* @__PURE__ */ jsx(DrawerDirectionContext.Provider, {
15
+ value: direction,
16
+ children: /* @__PURE__ */ jsx(Dialog.Root, {
17
+ "data-slot": "drawer",
18
+ open,
19
+ onOpenChange: handleOpenChange,
20
+ ...props,
21
+ children
22
+ })
23
+ });
24
+ });
25
+ Root.displayName = "Drawer.Root";
26
+ var Trigger = React.forwardRef(function Trigger({ ...props }, ref) {
27
+ return /* @__PURE__ */ jsx(Dialog.Trigger, {
28
+ ref,
29
+ "data-slot": "drawer-trigger",
9
30
  ...props
10
31
  });
11
- }
12
- HoverCard.displayName = "HoverCard";
13
- function HoverCardTrigger({ ...props }) {
14
- return /* @__PURE__ */ jsx(PreviewCard.Trigger, {
15
- "data-slot": "hover-card-trigger",
32
+ });
33
+ Trigger.displayName = "Drawer.Trigger";
34
+ function Portal({ ...props }) {
35
+ return /* @__PURE__ */ jsx(Dialog.Portal, {
36
+ "data-slot": "drawer-portal",
16
37
  ...props
17
38
  });
18
39
  }
19
- HoverCardTrigger.displayName = "HoverCard.Trigger";
20
- function HoverCardPopup({ className, side = "bottom", sideOffset = 4, align = "center", alignOffset = 4, ...props }) {
21
- return /* @__PURE__ */ jsx(PreviewCard.Portal, {
22
- "data-slot": "hover-card-portal",
23
- children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
24
- align,
25
- alignOffset,
26
- side,
27
- sideOffset,
28
- className: "isolate z-50",
29
- children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
30
- "data-slot": "hover-card-popup",
31
- className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:animate-none bg-popover text-popover-foreground w-64 rounded-xl border border-border p-4 text-sm shadow-[var(--shadow-hover-card)] supports-backdrop-filter:backdrop-blur-[60px] duration-150 z-50 origin-(--transform-origin) outline-hidden [&>*]:delight-fade-in [&>*]:motion-reduce:!animate-none", className),
32
- ...props
33
- })
34
- })
40
+ Portal.displayName = "Drawer.Portal";
41
+ var Close = React.forwardRef(function Close({ ...props }, ref) {
42
+ return /* @__PURE__ */ jsx(Dialog.Close, {
43
+ ref,
44
+ "data-slot": "drawer-close",
45
+ ...props
35
46
  });
36
- }
37
- HoverCardPopup.displayName = "HoverCard.Popup";
38
- /**
39
- * HoverCard component with dot notation for compound parts.
40
- *
41
- * @example
42
- * ```tsx
43
- * <HoverCard>
44
- * <HoverCard.Trigger>Hover me</HoverCard.Trigger>
45
- * <HoverCard.Popup>
46
- * Preview content here
47
- * </HoverCard.Popup>
48
- * </HoverCard>
49
- * ```
50
- */
51
- var HoverCardCompound = Object.assign(HoverCard, {
52
- Root: HoverCard,
53
- Trigger: HoverCardTrigger,
54
- Popup: HoverCardPopup
47
+ });
48
+ Close.displayName = "Drawer.Close";
49
+ var Backdrop = React.forwardRef(function Backdrop({ className, disableAnimation, disableBackdropBlur, ...props }, ref) {
50
+ return /* @__PURE__ */ jsx(Dialog.Backdrop, {
51
+ ref,
52
+ "data-slot": "drawer-backdrop",
53
+ className: cn("bg-background/80/10 fixed inset-0 z-50", !disableAnimation && "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 motion-reduce:animate-none", !disableBackdropBlur && "supports-backdrop-filter:backdrop-blur-xs", className),
54
+ ...props
55
+ });
56
+ });
57
+ Backdrop.displayName = "Drawer.Backdrop";
58
+ var Viewport = React.forwardRef(function Viewport({ className, children, ...props }, ref) {
59
+ return /* @__PURE__ */ jsx(Dialog.Viewport, {
60
+ ref,
61
+ "data-slot": "drawer-viewport",
62
+ className: cn("fixed inset-0 z-50", className),
63
+ ...props,
64
+ children
65
+ });
66
+ });
67
+ Viewport.displayName = "Drawer.Viewport";
68
+ var Popup = React.forwardRef(function Popup({ className, children, disableAnimation, disableBackdropBlur, ...props }, ref) {
69
+ const direction = useDrawerDirection();
70
+ return /* @__PURE__ */ jsxs(Portal, {
71
+ "data-slot": "drawer-portal",
72
+ children: [/* @__PURE__ */ jsx(Backdrop, {
73
+ disableAnimation,
74
+ disableBackdropBlur
75
+ }), /* @__PURE__ */ jsxs(Dialog.Popup, {
76
+ ref,
77
+ "data-slot": "drawer-popup",
78
+ "data-vaul-drawer-direction": direction,
79
+ className: cn("bg-background flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50", !disableAnimation && "data-open:animate-in data-closed:animate-out data-open:duration-300 data-closed:duration-200 data-open:ease-(--ease-decelerate) data-closed:ease-in data-[vaul-drawer-direction=bottom]:data-open:slide-in-from-bottom-full data-[vaul-drawer-direction=bottom]:data-closed:slide-out-to-bottom-full data-[vaul-drawer-direction=top]:data-open:slide-in-from-top-full data-[vaul-drawer-direction=top]:data-closed:slide-out-to-top-full data-[vaul-drawer-direction=left]:data-open:slide-in-from-left-full data-[vaul-drawer-direction=left]:data-closed:slide-out-to-left-full data-[vaul-drawer-direction=right]:data-open:slide-in-from-right-full data-[vaul-drawer-direction=right]:data-closed:slide-out-to-right-full motion-reduce:animate-none", className),
80
+ ...props,
81
+ children: [/* @__PURE__ */ jsx("div", {
82
+ "aria-hidden": "true",
83
+ className: "bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block delight-fade-in motion-reduce:!animate-none"
84
+ }), children]
85
+ })]
86
+ });
87
+ });
88
+ Popup.displayName = "Drawer.Popup";
89
+ var Header = React.forwardRef(function Header({ className, ...props }, ref) {
90
+ return /* @__PURE__ */ jsx("div", {
91
+ ref,
92
+ "data-slot": "drawer-header",
93
+ className: cn("gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left flex flex-col", className),
94
+ ...props
95
+ });
96
+ });
97
+ Header.displayName = "Drawer.Header";
98
+ var Footer = React.forwardRef(function Footer({ className, ...props }, ref) {
99
+ return /* @__PURE__ */ jsx("div", {
100
+ ref,
101
+ "data-slot": "drawer-footer",
102
+ className: cn("gap-2 p-4 mt-auto flex flex-col", className),
103
+ ...props
104
+ });
105
+ });
106
+ Footer.displayName = "Drawer.Footer";
107
+ var Title = React.forwardRef(function Title({ className, ...props }, ref) {
108
+ return /* @__PURE__ */ jsx(Dialog.Title, {
109
+ ref,
110
+ "data-slot": "drawer-title",
111
+ className: cn("text-foreground font-medium delight-stagger motion-reduce:!animate-none", className),
112
+ ...props,
113
+ style: { "--delight-delay": "50ms" }
114
+ });
115
+ });
116
+ Title.displayName = "Drawer.Title";
117
+ var Description = React.forwardRef(function Description({ className, ...props }, ref) {
118
+ return /* @__PURE__ */ jsx(Dialog.Description, {
119
+ ref,
120
+ "data-slot": "drawer-description",
121
+ className: cn("text-muted-foreground text-sm delight-stagger motion-reduce:!animate-none", className),
122
+ ...props,
123
+ style: { "--delight-delay": "100ms" }
124
+ });
125
+ });
126
+ Description.displayName = "Drawer.Description";
127
+ var Handle = React.forwardRef(function Handle({ className, ...props }, ref) {
128
+ return /* @__PURE__ */ jsx("div", {
129
+ ref,
130
+ "data-slot": "drawer-handle",
131
+ "aria-hidden": "true",
132
+ className: cn("bg-muted mx-auto mt-4 h-1.5 w-[100px] shrink-0 rounded-full", className),
133
+ ...props
134
+ });
135
+ });
136
+ Handle.displayName = "Drawer.Handle";
137
+ var Drawer = Object.assign(Root, {
138
+ Root,
139
+ Trigger,
140
+ Portal,
141
+ Backdrop,
142
+ Viewport,
143
+ Popup,
144
+ Header,
145
+ Footer,
146
+ Title,
147
+ Description,
148
+ Close,
149
+ Handle
55
150
  });
56
151
  //#endregion
57
- export { HoverCardCompound as HoverCard, HoverCardPopup, HoverCardTrigger };
152
+ export { Drawer, Backdrop as DrawerBackdrop, Close as DrawerClose, Description as DrawerDescription, Footer as DrawerFooter, Handle as DrawerHandle, Header as DrawerHeader, Popup as DrawerPopup, Portal as DrawerPortal, Root as DrawerRoot, Title as DrawerTitle, Trigger as DrawerTrigger, Viewport as DrawerViewport };
58
153
 
59
154
  //# sourceMappingURL=index210.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index210.js","names":[],"sources":["../src/components/organisms/overlays/HoverCard/HoverCard.tsx"],"sourcesContent":["'use client';\n\nimport { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\nimport type * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type HoverCardProps = React.ComponentProps<typeof HoverCard>;\nexport type HoverCardTriggerProps = React.ComponentProps<\n typeof HoverCardTrigger\n>;\nexport type HoverCardPopupProps = PreviewCardPrimitive.Popup.Props &\n Pick<\n PreviewCardPrimitive.Positioner.Props,\n 'align' | 'alignOffset' | 'side' | 'sideOffset'\n >;\n\n// ============================================================================\n// HoverCard Components\n// ============================================================================\n\nfunction HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\nHoverCard.displayName = 'HoverCard';\n\nfunction HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n return (\n <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n );\n}\n\nHoverCardTrigger.displayName = 'HoverCard.Trigger';\n\nfunction HoverCardPopup({\n className,\n side = 'bottom',\n sideOffset = 4,\n align = 'center',\n alignOffset = 4,\n ...props\n}: HoverCardPopupProps) {\n return (\n <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n <PreviewCardPrimitive.Positioner\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n className=\"isolate z-50\"\n >\n <PreviewCardPrimitive.Popup\n data-slot=\"hover-card-popup\"\n className={cn(\n 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:animate-none bg-popover text-popover-foreground w-64 rounded-xl border border-border p-4 text-sm shadow-[var(--shadow-hover-card)] supports-backdrop-filter:backdrop-blur-[60px] duration-150 z-50 origin-(--transform-origin) outline-hidden [&>*]:delight-fade-in [&>*]:motion-reduce:!animate-none',\n className,\n )}\n {...props}\n />\n </PreviewCardPrimitive.Positioner>\n </PreviewCardPrimitive.Portal>\n );\n}\n\nHoverCardPopup.displayName = 'HoverCard.Popup';\n\n// ============================================================================\n// Compound Component\n// ============================================================================\n\n/**\n * HoverCard component with dot notation for compound parts.\n *\n * @example\n * ```tsx\n * <HoverCard>\n * <HoverCard.Trigger>Hover me</HoverCard.Trigger>\n * <HoverCard.Popup>\n * Preview content here\n * </HoverCard.Popup>\n * </HoverCard>\n * ```\n */\nconst HoverCardCompound = Object.assign(HoverCard, {\n Root: HoverCard,\n Trigger: HoverCardTrigger,\n Popup: HoverCardPopup,\n});\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport { HoverCardCompound as HoverCard, HoverCardPopup, HoverCardTrigger };\n"],"mappings":";;;;;AAyBA,SAAS,UAAU,EAAE,GAAG,SAA0C;CAChE,OAAO,oBAAC,YAAqB,MAAtB;EAA2B,aAAU;EAAa,GAAI;CAAQ,CAAA;AACvE;AAEA,UAAU,cAAc;AAExB,SAAS,iBAAiB,EAAE,GAAG,SAA6C;CAC1E,OACE,oBAAC,YAAqB,SAAtB;EAA8B,aAAU;EAAqB,GAAI;CAAQ,CAAA;AAE7E;AAEA,iBAAiB,cAAc;AAE/B,SAAS,eAAe,EACtB,WACA,OAAO,UACP,aAAa,GACb,QAAQ,UACR,cAAc,GACd,GAAG,SACmB;CACtB,OACE,oBAAC,YAAqB,QAAtB;EAA6B,aAAU;YACrC,oBAAC,YAAqB,YAAtB;GACS;GACM;GACP;GACM;GACZ,WAAU;aAEV,oBAAC,YAAqB,OAAtB;IACE,aAAU;IACV,WAAW,GACT,wlBACA,SACF;IACA,GAAI;GACL,CAAA;EAC8B,CAAA;CACN,CAAA;AAEjC;AAEA,eAAe,cAAc;;;;;;;;;;;;;;AAmB7B,IAAM,oBAAoB,OAAO,OAAO,WAAW;CACjD,MAAM;CACN,SAAS;CACT,OAAO;AACT,CAAC"}
1
+ {"version":3,"file":"index210.js","names":[],"sources":["../src/components/organisms/overlays/Drawer/Drawer.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog as DrawerPrimitive } from '@base-ui/react/dialog';\nimport * as React from 'react';\n\nimport {\n type DrawerDirection,\n DrawerDirectionContext,\n useDrawerDirection,\n} from '@/components/ui/drawer';\nimport { cn } from '@/lib/utils';\n\n// ============================================\n// Root (with internal state management)\n// ============================================\n\nexport interface RootProps\n extends Omit<DrawerPrimitive.Root.Props, 'open' | 'onOpenChange'> {\n /** Direction from which the drawer slides in */\n direction?: DrawerDirection;\n /** Initial open state. Component manages state internally. */\n defaultOpen?: boolean;\n /** Callback when open state changes */\n onOpenChange?: (open: boolean) => void;\n}\n\nconst Root = React.forwardRef<HTMLDivElement, RootProps>(function Root(\n {\n direction = 'bottom',\n defaultOpen = false,\n onOpenChange,\n children,\n ...props\n },\n _ref,\n) {\n const [open, setOpen] = React.useState(defaultOpen);\n\n const handleOpenChange = React.useCallback(\n (newOpen: boolean) => {\n setOpen(newOpen);\n onOpenChange?.(newOpen);\n },\n [onOpenChange],\n );\n\n return (\n <DrawerDirectionContext.Provider value={direction}>\n <DrawerPrimitive.Root\n data-slot=\"drawer\"\n open={open}\n onOpenChange={handleOpenChange}\n {...props}\n >\n {children}\n </DrawerPrimitive.Root>\n </DrawerDirectionContext.Provider>\n );\n});\nRoot.displayName = 'Drawer.Root';\n\n// ============================================\n// Trigger\n// ============================================\n\nexport type TriggerProps = DrawerPrimitive.Trigger.Props;\n\nconst Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(\n function Trigger({ ...props }, ref) {\n return (\n <DrawerPrimitive.Trigger\n ref={ref}\n data-slot=\"drawer-trigger\"\n {...props}\n />\n );\n },\n);\nTrigger.displayName = 'Drawer.Trigger';\n\n// ============================================\n// Portal\n// ============================================\n\nexport type PortalProps = DrawerPrimitive.Portal.Props;\n\nfunction Portal({ ...props }: PortalProps) {\n return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\nPortal.displayName = 'Drawer.Portal';\n\n// ============================================\n// Close\n// ============================================\n\nexport type CloseProps = DrawerPrimitive.Close.Props;\n\nconst Close = React.forwardRef<HTMLButtonElement, CloseProps>(function Close(\n { ...props },\n ref,\n) {\n return (\n <DrawerPrimitive.Close ref={ref} data-slot=\"drawer-close\" {...props} />\n );\n});\nClose.displayName = 'Drawer.Close';\n\n// ============================================\n// Backdrop (formerly DrawerOverlay)\n// ============================================\n\nexport interface BackdropProps extends DrawerPrimitive.Backdrop.Props {\n /** Disables open/close animations */\n disableAnimation?: boolean;\n /** Disables backdrop blur effect */\n disableBackdropBlur?: boolean;\n}\n\nconst Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(\n function Backdrop(\n { className, disableAnimation, disableBackdropBlur, ...props },\n ref,\n ) {\n return (\n <DrawerPrimitive.Backdrop\n ref={ref}\n data-slot=\"drawer-backdrop\"\n className={cn(\n 'bg-background/80/10 fixed inset-0 z-50',\n !disableAnimation &&\n 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 motion-reduce:animate-none',\n !disableBackdropBlur && 'supports-backdrop-filter:backdrop-blur-xs',\n className,\n )}\n {...props}\n />\n );\n },\n);\nBackdrop.displayName = 'Drawer.Backdrop';\n\n// ============================================\n// Viewport - Scroll container for drawer positioning\n// ============================================\n\nexport interface ViewportProps extends DrawerPrimitive.Viewport.Props {}\n\nconst Viewport = React.forwardRef<HTMLDivElement, ViewportProps>(\n function Viewport({ className, children, ...props }, ref) {\n return (\n <DrawerPrimitive.Viewport\n ref={ref}\n data-slot=\"drawer-viewport\"\n className={cn('fixed inset-0 z-50', className)}\n {...props}\n >\n {children}\n </DrawerPrimitive.Viewport>\n );\n },\n);\nViewport.displayName = 'Drawer.Viewport';\n\n// ============================================\n// Popup (formerly DrawerContent)\n// ============================================\n\nexport interface PopupProps extends DrawerPrimitive.Popup.Props {\n /** Disables open/close animations */\n disableAnimation?: boolean;\n /** Disables backdrop blur effect */\n disableBackdropBlur?: boolean;\n}\n\nconst Popup = React.forwardRef<HTMLDivElement, PopupProps>(function Popup(\n { className, children, disableAnimation, disableBackdropBlur, ...props },\n ref,\n) {\n const direction = useDrawerDirection();\n\n return (\n <Portal data-slot=\"drawer-portal\">\n <Backdrop\n disableAnimation={disableAnimation}\n disableBackdropBlur={disableBackdropBlur}\n />\n <DrawerPrimitive.Popup\n ref={ref}\n data-slot=\"drawer-popup\"\n data-vaul-drawer-direction={direction}\n className={cn(\n 'bg-background flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50',\n !disableAnimation &&\n 'data-open:animate-in data-closed:animate-out data-open:duration-300 data-closed:duration-200 data-open:ease-(--ease-decelerate) data-closed:ease-in data-[vaul-drawer-direction=bottom]:data-open:slide-in-from-bottom-full data-[vaul-drawer-direction=bottom]:data-closed:slide-out-to-bottom-full data-[vaul-drawer-direction=top]:data-open:slide-in-from-top-full data-[vaul-drawer-direction=top]:data-closed:slide-out-to-top-full data-[vaul-drawer-direction=left]:data-open:slide-in-from-left-full data-[vaul-drawer-direction=left]:data-closed:slide-out-to-left-full data-[vaul-drawer-direction=right]:data-open:slide-in-from-right-full data-[vaul-drawer-direction=right]:data-closed:slide-out-to-right-full motion-reduce:animate-none',\n className,\n )}\n {...props}\n >\n <div\n aria-hidden=\"true\"\n className=\"bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block delight-fade-in motion-reduce:!animate-none\"\n />\n {children}\n </DrawerPrimitive.Popup>\n </Portal>\n );\n});\nPopup.displayName = 'Drawer.Popup';\n\n// ============================================\n// Header\n// ============================================\n\nexport type HeaderProps = React.ComponentProps<'div'>;\n\nconst Header = React.forwardRef<HTMLDivElement, HeaderProps>(function Header(\n { className, ...props },\n ref,\n) {\n return (\n <div\n ref={ref}\n data-slot=\"drawer-header\"\n className={cn(\n 'gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left flex flex-col',\n className,\n )}\n {...props}\n />\n );\n});\nHeader.displayName = 'Drawer.Header';\n\n// ============================================\n// Footer\n// ============================================\n\nexport type FooterProps = React.ComponentProps<'div'>;\n\nconst Footer = React.forwardRef<HTMLDivElement, FooterProps>(function Footer(\n { className, ...props },\n ref,\n) {\n return (\n <div\n ref={ref}\n data-slot=\"drawer-footer\"\n className={cn('gap-2 p-4 mt-auto flex flex-col', className)}\n {...props}\n />\n );\n});\nFooter.displayName = 'Drawer.Footer';\n\n// ============================================\n// Title\n// ============================================\n\nexport type TitleProps = DrawerPrimitive.Title.Props;\n\nconst Title = React.forwardRef<HTMLHeadingElement, TitleProps>(function Title(\n { className, ...props },\n ref,\n) {\n return (\n <DrawerPrimitive.Title\n ref={ref}\n data-slot=\"drawer-title\"\n className={cn(\n 'text-foreground font-medium delight-stagger motion-reduce:!animate-none',\n className,\n )}\n {...props}\n style={{ '--delight-delay': '50ms' } as React.CSSProperties}\n />\n );\n});\nTitle.displayName = 'Drawer.Title';\n\n// ============================================\n// Description\n// ============================================\n\nexport type DescriptionProps = DrawerPrimitive.Description.Props;\n\nconst Description = React.forwardRef<HTMLParagraphElement, DescriptionProps>(\n function Description({ className, ...props }, ref) {\n return (\n <DrawerPrimitive.Description\n ref={ref}\n data-slot=\"drawer-description\"\n className={cn(\n 'text-muted-foreground text-sm delight-stagger motion-reduce:!animate-none',\n className,\n )}\n {...props}\n style={{ '--delight-delay': '100ms' } as React.CSSProperties}\n />\n );\n },\n);\nDescription.displayName = 'Drawer.Description';\n\n// ============================================\n// Handle - Drag handle for bottom drawers\n// ============================================\n\nexport type HandleProps = React.ComponentProps<'div'>;\n\nconst Handle = React.forwardRef<HTMLDivElement, HandleProps>(function Handle(\n { className, ...props },\n ref,\n) {\n return (\n <div\n ref={ref}\n data-slot=\"drawer-handle\"\n aria-hidden=\"true\"\n className={cn(\n 'bg-muted mx-auto mt-4 h-1.5 w-[100px] shrink-0 rounded-full',\n className,\n )}\n {...props}\n />\n );\n});\nHandle.displayName = 'Drawer.Handle';\n\n// ============================================\n// Compound component via dot notation (ADR-011)\n// ============================================\n\nconst Drawer = Object.assign(Root, {\n Root,\n Trigger,\n Portal,\n Backdrop,\n Viewport,\n Popup,\n Header,\n Footer,\n Title,\n Description,\n Close,\n Handle,\n});\n\n// ============================================\n// Exports\n// ============================================\n\nexport {\n Backdrop as DrawerBackdrop,\n Close as DrawerClose,\n Description as DrawerDescription,\n Drawer,\n Footer as DrawerFooter,\n Handle as DrawerHandle,\n Header as DrawerHeader,\n Popup as DrawerPopup,\n Portal as DrawerPortal,\n // Sub-components with Drawer prefix for direct imports\n Root as DrawerRoot,\n Title as DrawerTitle,\n Trigger as DrawerTrigger,\n Viewport as DrawerViewport,\n};\n"],"mappings":"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"}