@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/index208.js CHANGED
@@ -1,113 +1,317 @@
1
- "use client";
2
1
  import { cn } from "./index2.js";
2
+ import { Button } from "./index5.js";
3
+ import { cva } from "class-variance-authority";
4
+ import { X } from "lucide-react";
3
5
  import * as React from "react";
4
6
  import { jsx, jsxs } from "react/jsx-runtime";
5
7
  import { Dialog } from "@base-ui/react/dialog";
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 }) {
12
- return /* @__PURE__ */ jsx(DrawerDirectionContext.Provider, {
13
- value: direction,
14
- children: /* @__PURE__ */ jsx(Dialog.Root, {
15
- "data-slot": "drawer",
16
- ...props
17
- })
8
+ //#region src/components/organisms/overlays/Dialog/Dialog.tsx
9
+ var closeButtonVariants = cva("", {
10
+ variants: { size: {
11
+ sm: "",
12
+ md: "",
13
+ lg: ""
14
+ } },
15
+ defaultVariants: { size: "sm" }
16
+ });
17
+ var buttonSizeMap = {
18
+ sm: "icon-sm",
19
+ md: "icon",
20
+ lg: "icon-lg"
21
+ };
22
+ var CloseButton = React.forwardRef(({ className, size = "sm", "aria-label": ariaLabel = "Close", ...props }, ref) => {
23
+ return /* @__PURE__ */ jsxs(Button, {
24
+ ref,
25
+ "data-slot": "close-button",
26
+ appearance: "ghost",
27
+ variant: "secondary",
28
+ size: buttonSizeMap[size ?? "sm"],
29
+ className: cn(closeButtonVariants({ size }), className),
30
+ "aria-label": ariaLabel,
31
+ ...props,
32
+ children: [/* @__PURE__ */ jsx(X, {}), /* @__PURE__ */ jsx("span", {
33
+ className: "sr-only",
34
+ children: ariaLabel
35
+ })]
18
36
  });
19
- }
20
- function DrawerTrigger({ ...props }) {
37
+ });
38
+ CloseButton.displayName = "CloseButton";
39
+ var Root = React.forwardRef(function Root({ ...props }, _ref) {
40
+ return /* @__PURE__ */ jsx(Dialog.Root, {
41
+ "data-slot": "dialog",
42
+ ...props
43
+ });
44
+ });
45
+ Root.displayName = "Dialog.Root";
46
+ var Trigger = React.forwardRef(function Trigger({ ...props }, ref) {
21
47
  return /* @__PURE__ */ jsx(Dialog.Trigger, {
22
- "data-slot": "drawer-trigger",
48
+ ref,
49
+ "data-slot": "dialog-trigger",
23
50
  ...props
24
51
  });
25
- }
26
- function DrawerPortal({ ...props }) {
52
+ });
53
+ Trigger.displayName = "Dialog.Trigger";
54
+ function Portal({ ...props }) {
27
55
  return /* @__PURE__ */ jsx(Dialog.Portal, {
28
- "data-slot": "drawer-portal",
56
+ "data-slot": "dialog-portal",
29
57
  ...props
30
58
  });
31
59
  }
32
- function DrawerClose({ ...props }) {
60
+ Portal.displayName = "Dialog.Portal";
61
+ var Close = React.forwardRef(function Close({ ...props }, ref) {
33
62
  return /* @__PURE__ */ jsx(Dialog.Close, {
34
- "data-slot": "drawer-close",
63
+ ref,
64
+ "data-slot": "dialog-close",
35
65
  ...props
36
66
  });
37
- }
38
- function DrawerOverlay({ className, disableAnimation, disableBackdropBlur, ...props }) {
67
+ });
68
+ Close.displayName = "Dialog.Close";
69
+ var Backdrop = React.forwardRef(function Backdrop({ className, disableAnimation, disableBackdropBlur, ...props }, ref) {
39
70
  return /* @__PURE__ */ jsx(Dialog.Backdrop, {
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),
71
+ ref,
72
+ "data-slot": "dialog-backdrop",
73
+ className: cn("bg-background/80/10 fixed inset-0 isolate z-50", !disableAnimation && "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 duration-100 motion-reduce:animate-none", !disableBackdropBlur && "supports-backdrop-filter:backdrop-blur-xs", className),
74
+ ...props
75
+ });
76
+ });
77
+ Backdrop.displayName = "Dialog.Backdrop";
78
+ var Viewport = React.forwardRef(function Viewport({ className, children, ...props }, ref) {
79
+ return /* @__PURE__ */ jsx(Dialog.Viewport, {
80
+ ref,
81
+ "data-slot": "dialog-viewport",
82
+ className: cn("fixed inset-0 z-50 flex items-center justify-center p-4", className),
83
+ ...props,
84
+ children
85
+ });
86
+ });
87
+ Viewport.displayName = "Dialog.Viewport";
88
+ function PopupBase({ className, children, showCloseButton = true, initialFocus, disableAnimation, disableBackdropBlur, ...props }) {
89
+ return /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Backdrop, {
90
+ disableAnimation,
91
+ disableBackdropBlur
92
+ }), /* @__PURE__ */ jsxs(Dialog.Popup, {
93
+ "data-slot": "dialog-popup",
94
+ initialFocus,
95
+ className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl border border-border bg-card p-6 text-sm text-card-foreground shadow-lg outline-none", !disableAnimation && "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 duration-150 motion-reduce:animate-none", className),
96
+ ...props,
97
+ children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, { render: /* @__PURE__ */ jsx(CloseButton, { className: "absolute top-2 end-2" }) })]
98
+ })] });
99
+ }
100
+ PopupBase.displayName = "PopupBase";
101
+ function HeaderBase({ className, ...props }) {
102
+ return /* @__PURE__ */ jsx("div", {
103
+ "data-slot": "dialog-header",
104
+ className: cn("flex w-full", className),
42
105
  ...props
43
106
  });
44
107
  }
45
- function DrawerContent({ className, children, disableAnimation, disableBackdropBlur, ...props }) {
46
- const direction = useDrawerDirection();
47
- return /* @__PURE__ */ jsxs(DrawerPortal, {
48
- "data-slot": "drawer-portal",
49
- children: [/* @__PURE__ */ jsx(DrawerOverlay, {
50
- disableAnimation,
51
- disableBackdropBlur
52
- }), /* @__PURE__ */ jsxs(Dialog.Popup, {
53
- "data-slot": "drawer-content",
54
- "data-vaul-drawer-direction": direction,
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),
56
- ...props,
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]
108
+ HeaderBase.displayName = "HeaderBase";
109
+ function FooterBase({ className, showCloseButton = false, children, ...props }) {
110
+ return /* @__PURE__ */ jsxs("div", {
111
+ "data-slot": "dialog-footer",
112
+ className: cn("flex", className),
113
+ ...props,
114
+ children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
115
+ render: /* @__PURE__ */ jsx(Button, {
116
+ appearance: "outline",
117
+ variant: "secondary"
118
+ }),
119
+ children: "Close"
58
120
  })]
59
121
  });
60
122
  }
61
- function DrawerHeader({ className, ...props }) {
62
- return /* @__PURE__ */ jsx("div", {
63
- "data-slot": "drawer-header",
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),
123
+ FooterBase.displayName = "FooterBase";
124
+ function TitleBase({ className, ...props }) {
125
+ return /* @__PURE__ */ jsx(Dialog.Title, {
126
+ "data-slot": "dialog-title",
127
+ className: cn("leading-none font-medium", className),
128
+ ...props
129
+ });
130
+ }
131
+ TitleBase.displayName = "TitleBase";
132
+ function DescriptionBase({ className, ...props }) {
133
+ return /* @__PURE__ */ jsx(Dialog.Description, {
134
+ "data-slot": "dialog-description",
135
+ className: cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className),
65
136
  ...props
66
137
  });
67
138
  }
68
- function DrawerFooter({ className, ...props }) {
139
+ DescriptionBase.displayName = "DescriptionBase";
140
+ var popupVariants = cva("", {
141
+ variants: { size: {
142
+ sm: "sm:max-w-[430px] overflow-hidden",
143
+ md: "sm:max-w-[500px] overflow-hidden",
144
+ lg: "sm:max-w-[560px] overflow-hidden",
145
+ xl: "sm:max-w-[640px] overflow-hidden",
146
+ full: "sm:max-w-[calc(100vw-2rem)] overflow-hidden"
147
+ } },
148
+ defaultVariants: { size: "sm" }
149
+ });
150
+ function Popup({ className, children, size, showCloseButton = true, hideCloseButton = false, initialFocus, disableEffects, disableAnimation, disableBackdropBlur, ...props }) {
151
+ const shouldDisableAnimation = disableAnimation ?? disableEffects;
152
+ const shouldDisableBackdropBlur = disableBackdropBlur ?? disableEffects;
153
+ const shouldShowCloseButton = showCloseButton && !hideCloseButton;
154
+ return /* @__PURE__ */ jsx(PopupBase, {
155
+ className: cn(popupVariants({ size }), className),
156
+ showCloseButton: shouldShowCloseButton,
157
+ initialFocus,
158
+ disableAnimation: shouldDisableAnimation,
159
+ disableBackdropBlur: shouldDisableBackdropBlur,
160
+ ...props,
161
+ children
162
+ });
163
+ }
164
+ Popup.displayName = "Dialog.Popup";
165
+ var iconVariants = cva("flex shrink-0 items-center justify-center rounded-xl", {
166
+ variants: {
167
+ variant: {
168
+ default: "bg-primary/10 text-primary",
169
+ success: "bg-success/10 text-success",
170
+ warning: "bg-warning/10 text-warning",
171
+ destructive: "bg-destructive/10 text-destructive",
172
+ info: "bg-primary/10 text-primary"
173
+ },
174
+ size: {
175
+ sm: "size-8 [&_svg]:size-4",
176
+ md: "size-10 [&_svg]:size-5",
177
+ lg: "size-12 [&_svg]:size-6"
178
+ }
179
+ },
180
+ defaultVariants: {
181
+ variant: "default",
182
+ size: "md"
183
+ }
184
+ });
185
+ function Icon({ className, variant, size, children, ...props }) {
186
+ return /* @__PURE__ */ jsx("div", {
187
+ "data-slot": "dialog-icon",
188
+ className: cn(iconVariants({
189
+ variant,
190
+ size
191
+ }), className),
192
+ ...props,
193
+ children
194
+ });
195
+ }
196
+ Icon.displayName = "Dialog.Icon";
197
+ var headerVariants = cva("group/dialog-header flex w-full gap-4", {
198
+ variants: { layout: {
199
+ stacked: "flex-col items-start text-left",
200
+ horizontal: "flex-col items-start text-left sm:flex-row",
201
+ centered: "flex flex-col items-center text-center"
202
+ } },
203
+ defaultVariants: { layout: "stacked" }
204
+ });
205
+ function Header({ className, layout, children, divider = false, paddingBottom = false, ...props }) {
206
+ const resolvedLayout = layout ?? "stacked";
207
+ return /* @__PURE__ */ jsx(HeaderBase, {
208
+ "data-layout": resolvedLayout,
209
+ className: cn(headerVariants({ layout: resolvedLayout }), divider && "border-b border-border", (divider || paddingBottom) && "pb-4", className),
210
+ ...props,
211
+ children
212
+ });
213
+ }
214
+ Header.displayName = "Dialog.Header";
215
+ function HeaderContent({ className, children, ...props }) {
69
216
  return /* @__PURE__ */ jsx("div", {
70
- "data-slot": "drawer-footer",
71
- className: cn("gap-2 p-4 mt-auto flex flex-col", className),
217
+ "data-slot": "dialog-header-content",
218
+ className: cn("flex min-w-0 flex-1 flex-col gap-1", "group-data-[layout=stacked]/dialog-header:w-full", "group-data-[layout=centered]/dialog-header:w-full group-data-[layout=centered]/dialog-header:items-center group-data-[layout=centered]/dialog-header:text-center", "group-data-[layout=horizontal]/dialog-header:w-full group-data-[layout=horizontal]/dialog-header:sm:w-auto", className),
219
+ ...props,
220
+ children
221
+ });
222
+ }
223
+ HeaderContent.displayName = "Dialog.HeaderContent";
224
+ function Title({ className, ...props }) {
225
+ return /* @__PURE__ */ jsx(TitleBase, {
226
+ className: cn("text-lg font-semibold leading-7 text-foreground", className),
72
227
  ...props
73
228
  });
74
229
  }
75
- function DrawerTitle({ className, ...props }) {
76
- return /* @__PURE__ */ jsx(Dialog.Title, {
77
- "data-slot": "drawer-title",
78
- className: cn("text-foreground font-medium", className),
230
+ Title.displayName = "Dialog.Title";
231
+ function Description({ className, ...props }) {
232
+ return /* @__PURE__ */ jsx(DescriptionBase, {
233
+ className: cn("text-sm leading-5 text-secondary-foreground", className),
79
234
  ...props
80
235
  });
81
236
  }
82
- function DrawerDescription({ className, ...props }) {
83
- return /* @__PURE__ */ jsx(Dialog.Description, {
84
- "data-slot": "drawer-description",
85
- className: cn("text-muted-foreground text-sm", className),
237
+ Description.displayName = "Dialog.Description";
238
+ var footerVariants = cva("w-full gap-3", {
239
+ variants: { layout: {
240
+ horizontal: "flex flex-col-reverse sm:flex-row sm:items-center sm:justify-end",
241
+ "horizontal-fill": "flex flex-col-reverse sm:flex-row sm:items-center [&>*]:w-full [&>*]:sm:flex-1",
242
+ "horizontal-right": "flex flex-col-reverse sm:flex-row sm:items-center sm:justify-end",
243
+ stacked: "flex flex-col [&>*]:w-full",
244
+ "vertical-fill": "flex flex-col [&>*]:w-full",
245
+ wizard: "flex flex-col items-stretch sm:flex-row sm:items-center sm:justify-between"
246
+ } },
247
+ defaultVariants: { layout: "horizontal-fill" }
248
+ });
249
+ function Footer({ className, layout, children, divider = false, ...props }) {
250
+ const resolvedLayout = layout ?? "horizontal-fill";
251
+ return /* @__PURE__ */ jsx(FooterBase, {
252
+ "data-layout": resolvedLayout,
253
+ className: cn(footerVariants({ layout: resolvedLayout }), divider && "border-t border-border pt-4", className),
254
+ ...props,
255
+ children
256
+ });
257
+ }
258
+ Footer.displayName = "Dialog.Footer";
259
+ var Action = React.forwardRef(function Action({ className, appearance = "solid", variant = "primary", size = "default", shape = "rounded", ...props }, ref) {
260
+ return /* @__PURE__ */ jsx(Button, {
261
+ ref,
262
+ "data-slot": "dialog-action",
263
+ appearance,
264
+ variant,
265
+ size,
266
+ shape,
267
+ className: cn("rounded-xl", className),
268
+ ...props
269
+ });
270
+ });
271
+ Action.displayName = "Dialog.Action";
272
+ var Cancel = React.forwardRef(function Cancel({ className, appearance = "outline", variant = "secondary", size = "default", shape = "rounded", ...props }, ref) {
273
+ return /* @__PURE__ */ jsx(Dialog.Close, {
274
+ ref,
275
+ "data-slot": "dialog-cancel",
276
+ className: cn("rounded-xl", className),
277
+ render: /* @__PURE__ */ jsx(Button, {
278
+ appearance,
279
+ variant,
280
+ size,
281
+ shape
282
+ }),
86
283
  ...props
87
284
  });
285
+ });
286
+ Cancel.displayName = "Dialog.Cancel";
287
+ function Body({ className, children, ...props }) {
288
+ return /* @__PURE__ */ jsx("div", {
289
+ "data-slot": "dialog-body",
290
+ className: cn("flex flex-col gap-4", className),
291
+ ...props,
292
+ children
293
+ });
88
294
  }
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
295
+ Body.displayName = "Dialog.Body";
296
+ var Dialog$1 = Object.assign(Root, {
297
+ Root,
298
+ Trigger,
299
+ Portal,
300
+ Backdrop,
301
+ Viewport,
302
+ Popup,
303
+ Header,
304
+ HeaderContent,
305
+ Body,
306
+ Footer,
307
+ Action,
308
+ Cancel,
309
+ Title,
310
+ Description,
311
+ Close,
312
+ Icon
109
313
  });
110
314
  //#endregion
111
- export { DrawerClose, DrawerContent, DrawerDescription, DrawerDirectionContext, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, useDrawerDirection };
315
+ export { Dialog$1 as Dialog, Action as DialogAction, Backdrop as DialogBackdrop, Body as DialogBody, Cancel as DialogCancel, Close as DialogClose, Description as DialogDescription, Footer as DialogFooter, Header as DialogHeader, HeaderContent as DialogHeaderContent, Icon as DialogIcon, Popup as DialogPopup, Portal as DialogPortal, Root as DialogRoot, Title as DialogTitle, Trigger as DialogTrigger, Viewport as DialogViewport, footerVariants as dialogFooterVariants, headerVariants as dialogHeaderVariants, iconVariants as dialogIconVariants, popupVariants as dialogPopupVariants };
112
316
 
113
317
  //# sourceMappingURL=index208.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index208.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"}
1
+ {"version":3,"file":"index208.js","names":[],"sources":["../src/components/organisms/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { Button } from '@/components/atoms/buttons/Button';\nimport { cn } from '@/lib/utils';\n\n// ============================================\n// CloseButton - Internal component for dialog close button\n// ============================================\n\nimport { X } from 'lucide-react';\n\nconst closeButtonVariants = cva('', {\n variants: {\n size: {\n sm: '',\n md: '',\n lg: '',\n },\n },\n defaultVariants: {\n size: 'sm',\n },\n});\n\nconst buttonSizeMap = {\n sm: 'icon-sm',\n md: 'icon',\n lg: 'icon-lg',\n} as const;\n\ninterface CloseButtonProps\n extends Omit<\n React.ComponentProps<typeof Button>,\n 'variant' | 'size' | 'children'\n >,\n VariantProps<typeof closeButtonVariants> {\n 'aria-label'?: string;\n}\n\nconst CloseButton = React.forwardRef<HTMLButtonElement, CloseButtonProps>(\n (\n { className, size = 'sm', 'aria-label': ariaLabel = 'Close', ...props },\n ref,\n ) => {\n return (\n <Button\n ref={ref}\n data-slot=\"close-button\"\n appearance=\"ghost\"\n variant=\"secondary\"\n size={buttonSizeMap[size ?? 'sm']}\n className={cn(closeButtonVariants({ size }), className)}\n aria-label={ariaLabel}\n {...props}\n >\n <X />\n <span className=\"sr-only\">{ariaLabel}</span>\n </Button>\n );\n },\n);\n\nCloseButton.displayName = 'CloseButton';\n\n// ============================================\n// Base Dialog Components (from ui/dialog.tsx)\n// ============================================\n\nconst Root = React.forwardRef<HTMLDivElement, DialogPrimitive.Root.Props>(\n function Root({ ...props }, _ref) {\n return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n },\n);\nRoot.displayName = 'Dialog.Root';\n\nconst Trigger = React.forwardRef<\n HTMLButtonElement,\n DialogPrimitive.Trigger.Props\n>(function Trigger({ ...props }, ref) {\n return (\n <DialogPrimitive.Trigger ref={ref} data-slot=\"dialog-trigger\" {...props} />\n );\n});\nTrigger.displayName = 'Dialog.Trigger';\n\nfunction Portal({ ...props }: DialogPrimitive.Portal.Props) {\n return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\nPortal.displayName = 'Dialog.Portal';\n\nconst Close = React.forwardRef<HTMLButtonElement, DialogPrimitive.Close.Props>(\n function Close({ ...props }, ref) {\n return (\n <DialogPrimitive.Close ref={ref} data-slot=\"dialog-close\" {...props} />\n );\n },\n);\nClose.displayName = 'Dialog.Close';\n\nexport interface BackdropProps extends DialogPrimitive.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 <DialogPrimitive.Backdrop\n ref={ref}\n data-slot=\"dialog-backdrop\"\n className={cn(\n 'bg-background/80/10 fixed inset-0 isolate z-50',\n !disableAnimation &&\n 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 duration-100 motion-reduce:animate-none',\n !disableBackdropBlur && 'supports-backdrop-filter:backdrop-blur-xs',\n className,\n )}\n {...props}\n />\n );\n },\n);\nBackdrop.displayName = 'Dialog.Backdrop';\n\n// ============================================\n// Viewport - Scroll container for dialog positioning\n// ============================================\n\nexport interface ViewportProps extends DialogPrimitive.Viewport.Props {}\n\nconst Viewport = React.forwardRef<HTMLDivElement, ViewportProps>(\n function Viewport({ className, children, ...props }, ref) {\n return (\n <DialogPrimitive.Viewport\n ref={ref}\n data-slot=\"dialog-viewport\"\n className={cn(\n 'fixed inset-0 z-50 flex items-center justify-center p-4',\n className,\n )}\n {...props}\n >\n {children}\n </DialogPrimitive.Viewport>\n );\n },\n);\nViewport.displayName = 'Dialog.Viewport';\n\n// Base Popup (internal use)\ninterface PopupBaseProps extends DialogPrimitive.Popup.Props {\n showCloseButton?: boolean;\n initialFocus?: boolean | React.RefObject<HTMLElement | null>;\n disableAnimation?: boolean;\n disableBackdropBlur?: boolean;\n}\n\nfunction PopupBase({\n className,\n children,\n showCloseButton = true,\n initialFocus,\n disableAnimation,\n disableBackdropBlur,\n ...props\n}: PopupBaseProps) {\n return (\n <Portal>\n <Backdrop\n disableAnimation={disableAnimation}\n disableBackdropBlur={disableBackdropBlur}\n />\n <DialogPrimitive.Popup\n data-slot=\"dialog-popup\"\n initialFocus={initialFocus}\n className={cn(\n 'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl border border-border bg-card p-6 text-sm text-card-foreground shadow-lg outline-none',\n !disableAnimation &&\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 duration-150 motion-reduce:animate-none',\n className,\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close\n render={<CloseButton className=\"absolute top-2 end-2\" />}\n />\n )}\n </DialogPrimitive.Popup>\n </Portal>\n );\n}\nPopupBase.displayName = 'PopupBase';\n\n// Base Header (internal use)\nfunction HeaderBase({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"dialog-header\"\n className={cn('flex w-full', className)}\n {...props}\n />\n );\n}\nHeaderBase.displayName = 'HeaderBase';\n\n// Base Footer (internal use)\nfunction FooterBase({\n className,\n showCloseButton = false,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n showCloseButton?: boolean;\n}) {\n return (\n <div data-slot=\"dialog-footer\" className={cn('flex', className)} {...props}>\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close\n render={<Button appearance=\"outline\" variant=\"secondary\" />}\n >\n Close\n </DialogPrimitive.Close>\n )}\n </div>\n );\n}\nFooterBase.displayName = 'FooterBase';\n\n// Base Title (internal use)\nfunction TitleBase({ className, ...props }: DialogPrimitive.Title.Props) {\n return (\n <DialogPrimitive.Title\n data-slot=\"dialog-title\"\n className={cn('leading-none font-medium', className)}\n {...props}\n />\n );\n}\nTitleBase.displayName = 'TitleBase';\n\n// Base Description (internal use)\nfunction DescriptionBase({\n className,\n ...props\n}: DialogPrimitive.Description.Props) {\n return (\n <DialogPrimitive.Description\n data-slot=\"dialog-description\"\n className={cn(\n 'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3',\n className,\n )}\n {...props}\n />\n );\n}\nDescriptionBase.displayName = 'DescriptionBase';\n\n// ============================================\n// Popup - Extended with size variants\n// ============================================\n\nconst popupVariants = cva('', {\n variants: {\n size: {\n sm: 'sm:max-w-[430px] overflow-hidden',\n md: 'sm:max-w-[500px] overflow-hidden',\n lg: 'sm:max-w-[560px] overflow-hidden',\n xl: 'sm:max-w-[640px] overflow-hidden',\n full: 'sm:max-w-[calc(100vw-2rem)] overflow-hidden',\n },\n },\n defaultVariants: {\n size: 'sm',\n },\n});\n\nexport interface PopupProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof popupVariants> {\n /** Whether to show the close button */\n showCloseButton?: boolean;\n /** Whether to hide the close button (alias for showCloseButton=false) */\n hideCloseButton?: boolean;\n /**\n * Controls where focus moves when the dialog opens.\n * - `false`: Prevents auto-focus (equivalent to Radix's `onOpenAutoFocus={(e) => e.preventDefault()}`)\n * - `true`: Default focus behavior (first tabbable element)\n * - `RefObject`: Focus a specific element\n */\n initialFocus?: boolean | React.RefObject<HTMLElement | null>;\n /**\n * Disables all visual effects (animations and backdrop blur).\n * Use granular props (`disableAnimation`, `disableBackdropBlur`) for more control.\n */\n disableEffects?: boolean;\n /** Disables open/close animations on the dialog and overlay */\n disableAnimation?: boolean;\n /** Disables backdrop blur effect on the overlay */\n disableBackdropBlur?: boolean;\n}\n\nfunction Popup({\n className,\n children,\n size,\n showCloseButton = true,\n hideCloseButton = false,\n initialFocus,\n disableEffects,\n disableAnimation,\n disableBackdropBlur,\n ...props\n}: PopupProps) {\n // When disableEffects is true, disable all effects unless granular props override\n const shouldDisableAnimation = disableAnimation ?? disableEffects;\n const shouldDisableBackdropBlur = disableBackdropBlur ?? disableEffects;\n const shouldShowCloseButton = showCloseButton && !hideCloseButton;\n\n return (\n <PopupBase\n className={cn(popupVariants({ size }), className)}\n showCloseButton={shouldShowCloseButton}\n initialFocus={initialFocus}\n disableAnimation={shouldDisableAnimation}\n disableBackdropBlur={shouldDisableBackdropBlur}\n {...props}\n >\n {children}\n </PopupBase>\n );\n}\nPopup.displayName = 'Dialog.Popup';\n\n// ============================================\n// Icon - Featured icon with colored background\n// ============================================\n\nconst iconVariants = cva(\n 'flex shrink-0 items-center justify-center rounded-xl',\n {\n variants: {\n variant: {\n default: 'bg-primary/10 text-primary',\n success: 'bg-success/10 text-success',\n warning: 'bg-warning/10 text-warning',\n destructive: 'bg-destructive/10 text-destructive',\n info: 'bg-primary/10 text-primary',\n },\n size: {\n sm: 'size-8 [&_svg]:size-4',\n md: 'size-10 [&_svg]:size-5',\n lg: 'size-12 [&_svg]:size-6',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'md',\n },\n },\n);\n\nexport interface IconProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof iconVariants> {\n children: React.ReactNode;\n}\n\nfunction Icon({ className, variant, size, children, ...props }: IconProps) {\n return (\n <div\n data-slot=\"dialog-icon\"\n className={cn(iconVariants({ variant, size }), className)}\n {...props}\n >\n {children}\n </div>\n );\n}\nIcon.displayName = 'Dialog.Icon';\n\n// ============================================\n// Header - Extended with layout variants\n// ============================================\n\nconst headerVariants = cva('group/dialog-header flex w-full gap-4', {\n variants: {\n layout: {\n stacked: 'flex-col items-start text-left',\n horizontal: 'flex-col items-start text-left sm:flex-row',\n centered: 'flex flex-col items-center text-center',\n },\n },\n defaultVariants: {\n layout: 'stacked',\n },\n});\n\nexport interface HeaderProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof headerVariants> {\n /** Adds the Figma header separator below the title block. */\n divider?: boolean;\n /** Adds Figma header bottom padding without forcing a divider. */\n paddingBottom?: boolean;\n}\n\nfunction Header({\n className,\n layout,\n children,\n divider = false,\n paddingBottom = false,\n ...props\n}: HeaderProps) {\n const resolvedLayout = layout ?? 'stacked';\n\n return (\n <HeaderBase\n data-layout={resolvedLayout}\n className={cn(\n headerVariants({ layout: resolvedLayout }),\n divider && 'border-b border-border',\n (divider || paddingBottom) && 'pb-4',\n className,\n )}\n {...props}\n >\n {children}\n </HeaderBase>\n );\n}\nHeader.displayName = 'Dialog.Header';\n\n// ============================================\n// HeaderContent - Text content wrapper\n// ============================================\n\nexport interface HeaderContentProps\n extends React.HTMLAttributes<HTMLDivElement> {}\n\nfunction HeaderContent({ className, children, ...props }: HeaderContentProps) {\n return (\n <div\n data-slot=\"dialog-header-content\"\n className={cn(\n 'flex min-w-0 flex-1 flex-col gap-1',\n 'group-data-[layout=stacked]/dialog-header:w-full',\n 'group-data-[layout=centered]/dialog-header:w-full group-data-[layout=centered]/dialog-header:items-center group-data-[layout=centered]/dialog-header:text-center',\n 'group-data-[layout=horizontal]/dialog-header:w-full group-data-[layout=horizontal]/dialog-header:sm:w-auto',\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n}\nHeaderContent.displayName = 'Dialog.HeaderContent';\n\n// ============================================\n// Title - Extended\n// ============================================\n\nexport interface TitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nfunction Title({ className, ...props }: TitleProps) {\n return (\n <TitleBase\n className={cn(\n 'text-lg font-semibold leading-7 text-foreground',\n className,\n )}\n {...props}\n />\n );\n}\nTitle.displayName = 'Dialog.Title';\n\n// ============================================\n// Description - Extended\n// ============================================\n\nexport interface DescriptionProps\n extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nfunction Description({ className, ...props }: DescriptionProps) {\n return (\n <DescriptionBase\n className={cn('text-sm leading-5 text-secondary-foreground', className)}\n {...props}\n />\n );\n}\nDescription.displayName = 'Dialog.Description';\n\n// ============================================\n// Footer - Extended with layout variants\n// ============================================\n\nconst footerVariants = cva('w-full gap-3', {\n variants: {\n layout: {\n horizontal:\n 'flex flex-col-reverse sm:flex-row sm:items-center sm:justify-end',\n 'horizontal-fill':\n 'flex flex-col-reverse sm:flex-row sm:items-center [&>*]:w-full [&>*]:sm:flex-1',\n 'horizontal-right':\n 'flex flex-col-reverse sm:flex-row sm:items-center sm:justify-end',\n stacked: 'flex flex-col [&>*]:w-full',\n 'vertical-fill': 'flex flex-col [&>*]:w-full',\n wizard:\n 'flex flex-col items-stretch sm:flex-row sm:items-center sm:justify-between',\n },\n },\n defaultVariants: {\n layout: 'horizontal-fill',\n },\n});\n\nexport interface FooterProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof footerVariants> {\n /** Adds the Figma action separator above the footer controls. */\n divider?: boolean;\n}\n\nfunction Footer({\n className,\n layout,\n children,\n divider = false,\n ...props\n}: FooterProps) {\n const resolvedLayout = layout ?? 'horizontal-fill';\n\n return (\n <FooterBase\n data-layout={resolvedLayout}\n className={cn(\n footerVariants({ layout: resolvedLayout }),\n divider && 'border-t border-border pt-4',\n className,\n )}\n {...props}\n >\n {children}\n </FooterBase>\n );\n}\nFooter.displayName = 'Dialog.Footer';\n\n// ============================================\n// Action helpers - Figma footer action buttons\n// ============================================\n\nconst Action = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps<typeof Button>\n>(function Action(\n {\n className,\n appearance = 'solid',\n variant = 'primary',\n size = 'default',\n shape = 'rounded',\n ...props\n },\n ref,\n) {\n return (\n <Button\n ref={ref}\n data-slot=\"dialog-action\"\n appearance={appearance}\n variant={variant}\n size={size}\n shape={shape}\n className={cn('rounded-xl', className)}\n {...props}\n />\n );\n});\nAction.displayName = 'Dialog.Action';\n\nconst Cancel = React.forwardRef<\n HTMLButtonElement,\n DialogPrimitive.Close.Props &\n Pick<\n React.ComponentProps<typeof Button>,\n 'appearance' | 'variant' | 'size' | 'shape'\n >\n>(function Cancel(\n {\n className,\n appearance = 'outline',\n variant = 'secondary',\n size = 'default',\n shape = 'rounded',\n ...props\n },\n ref,\n) {\n return (\n <DialogPrimitive.Close\n ref={ref}\n data-slot=\"dialog-cancel\"\n className={cn('rounded-xl', className)}\n render={\n <Button\n appearance={appearance}\n variant={variant}\n size={size}\n shape={shape}\n />\n }\n {...props}\n />\n );\n});\nCancel.displayName = 'Dialog.Cancel';\n\n// ============================================\n// Body - Content area between header and footer\n// ============================================\n\nexport interface BodyProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nfunction Body({ className, children, ...props }: BodyProps) {\n return (\n <div\n data-slot=\"dialog-body\"\n className={cn('flex flex-col gap-4', className)}\n {...props}\n >\n {children}\n </div>\n );\n}\nBody.displayName = 'Dialog.Body';\n\n// ============================================\n// Type exports\n// ============================================\n\nexport type CloseProps = DialogPrimitive.Close.Props;\nexport type PortalProps = DialogPrimitive.Portal.Props;\nexport type TriggerProps = DialogPrimitive.Trigger.Props;\nexport type RootProps = DialogPrimitive.Root.Props;\nexport type ActionProps = React.ComponentProps<typeof Action>;\nexport type CancelProps = React.ComponentProps<typeof Cancel>;\n\n// ============================================\n// Compound component via dot notation (ADR-011)\n// ============================================\n\nconst Dialog = Object.assign(Root, {\n Root,\n Trigger,\n Portal,\n Backdrop,\n Viewport,\n Popup,\n Header,\n HeaderContent,\n Body,\n Footer,\n Action,\n Cancel,\n Title,\n Description,\n Close,\n Icon,\n});\n\nexport {\n Action as DialogAction,\n Backdrop as DialogBackdrop,\n Body as DialogBody,\n Cancel as DialogCancel,\n Close as DialogClose,\n Description as DialogDescription,\n Dialog,\n Footer as DialogFooter,\n footerVariants as dialogFooterVariants,\n Header as DialogHeader,\n HeaderContent as DialogHeaderContent,\n headerVariants as dialogHeaderVariants,\n Icon as DialogIcon,\n iconVariants as dialogIconVariants,\n Popup as DialogPopup,\n Portal as DialogPortal,\n // Variants\n popupVariants as dialogPopupVariants,\n // Sub-components with Dialog prefix for direct imports\n Root as DialogRoot,\n Title as DialogTitle,\n Trigger as DialogTrigger,\n Viewport as DialogViewport,\n};\n"],"mappings":"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"}