@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.
- package/dist/components/organisms/ai/AIToolCall/AIToolCall.d.ts +9 -3
- package/dist/components/organisms/ai/AIToolRun/index.d.ts +1 -1
- package/dist/components/organisms/ai/AIToolRun/validation.d.ts +24 -3
- package/dist/components/organisms/ai/_shared/format-ai-duration.d.ts +1 -0
- package/dist/components/organisms/ai/_shared/workflow-step-renderer.d.ts +1 -0
- package/dist/index.js +52 -52
- package/dist/index151.js +1 -1
- package/dist/index174.js +10 -333
- package/dist/index174.js.map +1 -1
- package/dist/index175.js +310 -137
- package/dist/index175.js.map +1 -1
- package/dist/index176.js +148 -174
- package/dist/index176.js.map +1 -1
- package/dist/index177.js +186 -78
- package/dist/index177.js.map +1 -1
- package/dist/index178.js +74 -124
- package/dist/index178.js.map +1 -1
- package/dist/index179.js +133 -1
- package/dist/index179.js.map +1 -0
- package/dist/index180.js +2 -201
- package/dist/index181.js +201 -0
- package/dist/{index180.js.map → index181.js.map} +1 -1
- package/dist/index183.js +130 -166
- package/dist/index183.js.map +1 -1
- package/dist/index184.js +195 -983
- package/dist/index184.js.map +1 -1
- package/dist/index185.js +1069 -369
- package/dist/index185.js.map +1 -1
- package/dist/index186.js +395 -197
- package/dist/index186.js.map +1 -1
- package/dist/index187.js +198 -243
- package/dist/index187.js.map +1 -1
- package/dist/index188.js +263 -3
- package/dist/index188.js.map +1 -1
- package/dist/index189.js +3 -209
- package/dist/index189.js.map +1 -1
- package/dist/index190.js +190 -777
- package/dist/index190.js.map +1 -1
- package/dist/index191.js +771 -252
- package/dist/index191.js.map +1 -1
- package/dist/index192.js +250 -65
- package/dist/index192.js.map +1 -1
- package/dist/index193.js +72 -523
- package/dist/index193.js.map +1 -1
- package/dist/index194.js +537 -144
- package/dist/index194.js.map +1 -1
- package/dist/index195.js +139 -720
- package/dist/index195.js.map +1 -1
- package/dist/index196.js +707 -167
- package/dist/index196.js.map +1 -1
- package/dist/index197.js +175 -151
- package/dist/index197.js.map +1 -1
- package/dist/index198.js +152 -487
- package/dist/index198.js.map +1 -1
- package/dist/index199.js +472 -225
- package/dist/index199.js.map +1 -1
- package/dist/index200.js +236 -260
- package/dist/index200.js.map +1 -1
- package/dist/index201.js +265 -215
- package/dist/index201.js.map +1 -1
- package/dist/index202.js +207 -307
- package/dist/index202.js.map +1 -1
- package/dist/index203.js +302 -135
- package/dist/index203.js.map +1 -1
- package/dist/index204.js +140 -271
- package/dist/index204.js.map +1 -1
- package/dist/index205.js +263 -253
- package/dist/index205.js.map +1 -1
- package/dist/index206.js +244 -137
- package/dist/index206.js.map +1 -1
- package/dist/index207.js +100 -238
- package/dist/index207.js.map +1 -1
- package/dist/index208.js +278 -74
- package/dist/index208.js.map +1 -1
- package/dist/index209.js +56 -97
- package/dist/index209.js.map +1 -1
- package/dist/index210.js +142 -47
- package/dist/index210.js.map +1 -1
- package/dist/index211.js +38 -84
- package/dist/index211.js.map +1 -1
- package/dist/index212.js +72 -252
- package/dist/index212.js.map +1 -1
- package/dist/index213.js +274 -26
- package/dist/index213.js.map +1 -1
- package/dist/index214.js +29 -94
- package/dist/index214.js.map +1 -1
- package/dist/index215.js +98 -25
- package/dist/index215.js.map +1 -1
- package/dist/index216.js +20 -565
- package/dist/index216.js.map +1 -1
- package/dist/index217.js +564 -17
- package/dist/index217.js.map +1 -1
- package/dist/index218.js +20 -23
- package/dist/index218.js.map +1 -1
- package/dist/index219.js +20 -95
- package/dist/index219.js.map +1 -1
- package/dist/index220.js +92 -88
- package/dist/index220.js.map +1 -1
- package/dist/index221.js +97 -29
- package/dist/index221.js.map +1 -1
- package/dist/index222.js +24 -470
- package/dist/index222.js.map +1 -1
- package/dist/index223.js +446 -196
- package/dist/index223.js.map +1 -1
- package/dist/index224.js +199 -729
- package/dist/index224.js.map +1 -1
- package/dist/index225.js +750 -61
- package/dist/index225.js.map +1 -1
- package/dist/index226.js +58 -181
- package/dist/index226.js.map +1 -1
- package/dist/index227.js +175 -259
- package/dist/index227.js.map +1 -1
- package/dist/index228.js +246 -172
- package/dist/index228.js.map +1 -1
- package/dist/index229.js +195 -32
- package/dist/index229.js.map +1 -1
- package/dist/index230.js +12 -40
- package/dist/index230.js.map +1 -1
- package/dist/index231.js +23 -26
- package/dist/index231.js.map +1 -1
- package/dist/index232.js +45 -22
- package/dist/index232.js.map +1 -1
- package/dist/index233.js +27 -48
- package/dist/index233.js.map +1 -1
- package/dist/index234.js +52 -26
- package/dist/index234.js.map +1 -1
- package/dist/index235.js +40 -225
- package/dist/index235.js.map +1 -1
- package/dist/index236.js +217 -39
- package/dist/index236.js.map +1 -1
- package/dist/index237.js +50 -0
- package/dist/index237.js.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/wc/AIToolCall.js +218 -0
- package/dist/wc/AIToolCall.js.map +1 -0
- package/dist/wc/hf-ai-tool-call.js +34 -219
- package/dist/wc/hf-ai-tool-call.js.map +1 -1
- package/dist/wc/hf-ai-tool-run.js +673 -576
- package/dist/wc/hf-ai-tool-run.js.map +1 -1
- package/dist/wc/workflow-step-renderer.js +94 -86
- package/dist/wc/workflow-step-renderer.js.map +1 -1
- package/dist/wc-react/AIToolCall.js +218 -0
- package/dist/wc-react/AIToolCall.js.map +1 -0
- package/dist/wc-react/hf-ai-tool-call.js +32 -217
- package/dist/wc-react/hf-ai-tool-call.js.map +1 -1
- package/dist/wc-react/hf-ai-tool-run.js +698 -601
- package/dist/wc-react/hf-ai-tool-run.js.map +1 -1
- package/dist/wc-react/workflow-step-renderer.js +76 -68
- package/dist/wc-react/workflow-step-renderer.js.map +1 -1
- package/package.json +1 -1
- package/skills/humain-ui/SKILL.md +1 -1
- package/skills/humain-ui-wc/SKILL.md +1 -1
- package/skills/humain-ui-wc.skill +0 -0
- package/skills/humain-ui.skill +0 -0
- package/dist/index182.js +0 -143
- package/dist/index182.js.map +0 -1
- package/dist/wc/wrench.js +0 -10
- package/dist/wc/wrench.js.map +0 -1
- package/dist/wc-react/wrench.js +0 -10
- 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/
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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
|
-
|
|
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
|
-
|
|
48
|
+
ref,
|
|
49
|
+
"data-slot": "dialog-trigger",
|
|
23
50
|
...props
|
|
24
51
|
});
|
|
25
|
-
}
|
|
26
|
-
|
|
52
|
+
});
|
|
53
|
+
Trigger.displayName = "Dialog.Trigger";
|
|
54
|
+
function Portal({ ...props }) {
|
|
27
55
|
return /* @__PURE__ */ jsx(Dialog.Portal, {
|
|
28
|
-
"data-slot": "
|
|
56
|
+
"data-slot": "dialog-portal",
|
|
29
57
|
...props
|
|
30
58
|
});
|
|
31
59
|
}
|
|
32
|
-
|
|
60
|
+
Portal.displayName = "Dialog.Portal";
|
|
61
|
+
var Close = React.forwardRef(function Close({ ...props }, ref) {
|
|
33
62
|
return /* @__PURE__ */ jsx(Dialog.Close, {
|
|
34
|
-
|
|
63
|
+
ref,
|
|
64
|
+
"data-slot": "dialog-close",
|
|
35
65
|
...props
|
|
36
66
|
});
|
|
37
|
-
}
|
|
38
|
-
|
|
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
|
-
|
|
41
|
-
|
|
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
|
-
|
|
46
|
-
|
|
47
|
-
return /* @__PURE__ */ jsxs(
|
|
48
|
-
"data-slot": "
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
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
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
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
|
-
|
|
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": "
|
|
71
|
-
className: cn("
|
|
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
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
className: cn("text-
|
|
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
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
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
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
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 {
|
|
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
|
package/dist/index208.js.map
CHANGED
|
@@ -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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"}
|