@pactor-app/ui 0.1.0
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/LICENSE +21 -0
- package/README.md +113 -0
- package/dist/chunk-57NRUZ5G.js +95 -0
- package/dist/chunk-DMK6RSTK.js +746 -0
- package/dist/chunk-OH3U6PCM.js +536 -0
- package/dist/chunk-OUTSIJMO.js +442 -0
- package/dist/chunk-QDTVOJ5P.js +147 -0
- package/dist/chunk-QWZ23QLS.js +68 -0
- package/dist/chunk-RQHJBTEU.js +10 -0
- package/dist/chunk-SNFDI77B.js +136 -0
- package/dist/chunk-XGOTHOI6.js +619 -0
- package/dist/components/index.cjs +1111 -0
- package/dist/components/index.d.cts +307 -0
- package/dist/components/index.d.ts +307 -0
- package/dist/components/index.js +40 -0
- package/dist/index.cjs +2626 -0
- package/dist/index.d.cts +41 -0
- package/dist/index.d.ts +41 -0
- package/dist/index.js +87 -0
- package/dist/interaction/index.cjs +752 -0
- package/dist/interaction/index.d.cts +178 -0
- package/dist/interaction/index.d.ts +178 -0
- package/dist/interaction/index.js +19 -0
- package/dist/layout/index.cjs +938 -0
- package/dist/layout/index.d.cts +158 -0
- package/dist/layout/index.d.ts +158 -0
- package/dist/layout/index.js +25 -0
- package/dist/ui/index.cjs +1076 -0
- package/dist/ui/index.d.cts +166 -0
- package/dist/ui/index.d.ts +166 -0
- package/dist/ui/index.js +233 -0
- package/package.json +127 -0
- package/styles.css +1672 -0
|
@@ -0,0 +1,442 @@
|
|
|
1
|
+
import {
|
|
2
|
+
cn
|
|
3
|
+
} from "./chunk-RQHJBTEU.js";
|
|
4
|
+
|
|
5
|
+
// src/ui/alert.tsx
|
|
6
|
+
import { cva } from "class-variance-authority";
|
|
7
|
+
import { jsx } from "react/jsx-runtime";
|
|
8
|
+
var alertVariants = cva(
|
|
9
|
+
"relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border border-border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
|
|
10
|
+
{
|
|
11
|
+
variants: {
|
|
12
|
+
variant: {
|
|
13
|
+
default: "bg-card text-card-foreground",
|
|
14
|
+
destructive: "border-destructive/50 text-destructive bg-card [&>svg]:text-current",
|
|
15
|
+
success: "border-success/50 text-success bg-card [&>svg]:text-current",
|
|
16
|
+
warning: "border-warning/50 text-warning bg-card [&>svg]:text-current",
|
|
17
|
+
info: "border-info/50 text-info bg-card [&>svg]:text-current"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
defaultVariants: {
|
|
21
|
+
variant: "default"
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
);
|
|
25
|
+
function Alert({
|
|
26
|
+
className,
|
|
27
|
+
variant,
|
|
28
|
+
...props
|
|
29
|
+
}) {
|
|
30
|
+
return /* @__PURE__ */ jsx(
|
|
31
|
+
"div",
|
|
32
|
+
{
|
|
33
|
+
"data-slot": "alert",
|
|
34
|
+
role: "alert",
|
|
35
|
+
className: cn(alertVariants({ variant }), className),
|
|
36
|
+
...props
|
|
37
|
+
}
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
function AlertTitle({ className, ...props }) {
|
|
41
|
+
return /* @__PURE__ */ jsx(
|
|
42
|
+
"div",
|
|
43
|
+
{
|
|
44
|
+
"data-slot": "alert-title",
|
|
45
|
+
className: cn(
|
|
46
|
+
"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
|
|
47
|
+
className
|
|
48
|
+
),
|
|
49
|
+
...props
|
|
50
|
+
}
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
function AlertDescription({
|
|
54
|
+
className,
|
|
55
|
+
...props
|
|
56
|
+
}) {
|
|
57
|
+
return /* @__PURE__ */ jsx(
|
|
58
|
+
"div",
|
|
59
|
+
{
|
|
60
|
+
"data-slot": "alert-description",
|
|
61
|
+
className: cn(
|
|
62
|
+
"col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
|
|
63
|
+
className
|
|
64
|
+
),
|
|
65
|
+
...props
|
|
66
|
+
}
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
// src/ui/input.tsx
|
|
71
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
72
|
+
function Input({ className, type, ...props }) {
|
|
73
|
+
return /* @__PURE__ */ jsx2(
|
|
74
|
+
"input",
|
|
75
|
+
{
|
|
76
|
+
type,
|
|
77
|
+
"data-slot": "input",
|
|
78
|
+
className: cn(
|
|
79
|
+
"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50",
|
|
80
|
+
className
|
|
81
|
+
),
|
|
82
|
+
...props
|
|
83
|
+
}
|
|
84
|
+
);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
// src/ui/select.tsx
|
|
88
|
+
import { Select as SelectPrimitive } from "@base-ui/react/select";
|
|
89
|
+
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
|
|
90
|
+
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
91
|
+
var Select = SelectPrimitive.Root;
|
|
92
|
+
function SelectGroup({
|
|
93
|
+
...props
|
|
94
|
+
}) {
|
|
95
|
+
return /* @__PURE__ */ jsx3(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
|
|
96
|
+
}
|
|
97
|
+
function SelectValue({
|
|
98
|
+
...props
|
|
99
|
+
}) {
|
|
100
|
+
return /* @__PURE__ */ jsx3(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
|
|
101
|
+
}
|
|
102
|
+
function SelectTrigger({
|
|
103
|
+
className,
|
|
104
|
+
size = "default",
|
|
105
|
+
children,
|
|
106
|
+
...props
|
|
107
|
+
}) {
|
|
108
|
+
return /* @__PURE__ */ jsxs(
|
|
109
|
+
SelectPrimitive.Trigger,
|
|
110
|
+
{
|
|
111
|
+
"data-slot": "select-trigger",
|
|
112
|
+
"data-size": size,
|
|
113
|
+
className: cn(
|
|
114
|
+
"flex w-fit cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-colors outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 data-[placeholder]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
115
|
+
className
|
|
116
|
+
),
|
|
117
|
+
...props,
|
|
118
|
+
children: [
|
|
119
|
+
children,
|
|
120
|
+
/* @__PURE__ */ jsx3(
|
|
121
|
+
SelectPrimitive.Icon,
|
|
122
|
+
{
|
|
123
|
+
render: /* @__PURE__ */ jsx3(ChevronDownIcon, { className: "size-4 opacity-50" })
|
|
124
|
+
}
|
|
125
|
+
)
|
|
126
|
+
]
|
|
127
|
+
}
|
|
128
|
+
);
|
|
129
|
+
}
|
|
130
|
+
function SelectContent({
|
|
131
|
+
className,
|
|
132
|
+
children,
|
|
133
|
+
side = "bottom",
|
|
134
|
+
sideOffset = 4,
|
|
135
|
+
align = "center",
|
|
136
|
+
alignItemWithTrigger = false,
|
|
137
|
+
...props
|
|
138
|
+
}) {
|
|
139
|
+
return /* @__PURE__ */ jsx3(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
|
|
140
|
+
SelectPrimitive.Positioner,
|
|
141
|
+
{
|
|
142
|
+
side,
|
|
143
|
+
sideOffset,
|
|
144
|
+
align,
|
|
145
|
+
alignItemWithTrigger,
|
|
146
|
+
className: "isolate z-50",
|
|
147
|
+
children: /* @__PURE__ */ jsxs(
|
|
148
|
+
SelectPrimitive.Popup,
|
|
149
|
+
{
|
|
150
|
+
"data-slot": "select-content",
|
|
151
|
+
className: cn(
|
|
152
|
+
"relative z-50 max-h-96 min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover text-popover-foreground shadow-md duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
153
|
+
className
|
|
154
|
+
),
|
|
155
|
+
...props,
|
|
156
|
+
children: [
|
|
157
|
+
/* @__PURE__ */ jsx3(SelectScrollUpButton, {}),
|
|
158
|
+
/* @__PURE__ */ jsx3(SelectPrimitive.List, { className: "p-1", children }),
|
|
159
|
+
/* @__PURE__ */ jsx3(SelectScrollDownButton, {})
|
|
160
|
+
]
|
|
161
|
+
}
|
|
162
|
+
)
|
|
163
|
+
}
|
|
164
|
+
) });
|
|
165
|
+
}
|
|
166
|
+
function SelectLabel({
|
|
167
|
+
className,
|
|
168
|
+
...props
|
|
169
|
+
}) {
|
|
170
|
+
return /* @__PURE__ */ jsx3(
|
|
171
|
+
SelectPrimitive.GroupLabel,
|
|
172
|
+
{
|
|
173
|
+
"data-slot": "select-label",
|
|
174
|
+
className: cn("px-2 py-1.5 text-xs text-muted-foreground", className),
|
|
175
|
+
...props
|
|
176
|
+
}
|
|
177
|
+
);
|
|
178
|
+
}
|
|
179
|
+
function SelectItem({
|
|
180
|
+
className,
|
|
181
|
+
children,
|
|
182
|
+
...props
|
|
183
|
+
}) {
|
|
184
|
+
return /* @__PURE__ */ jsxs(
|
|
185
|
+
SelectPrimitive.Item,
|
|
186
|
+
{
|
|
187
|
+
"data-slot": "select-item",
|
|
188
|
+
className: cn(
|
|
189
|
+
"relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
190
|
+
className
|
|
191
|
+
),
|
|
192
|
+
...props,
|
|
193
|
+
children: [
|
|
194
|
+
/* @__PURE__ */ jsx3("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx3(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx3(CheckIcon, { className: "size-4" }) }) }),
|
|
195
|
+
/* @__PURE__ */ jsx3(SelectPrimitive.ItemText, { children })
|
|
196
|
+
]
|
|
197
|
+
}
|
|
198
|
+
);
|
|
199
|
+
}
|
|
200
|
+
function SelectSeparator({
|
|
201
|
+
className,
|
|
202
|
+
...props
|
|
203
|
+
}) {
|
|
204
|
+
return /* @__PURE__ */ jsx3(
|
|
205
|
+
SelectPrimitive.Separator,
|
|
206
|
+
{
|
|
207
|
+
"data-slot": "select-separator",
|
|
208
|
+
className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className),
|
|
209
|
+
...props
|
|
210
|
+
}
|
|
211
|
+
);
|
|
212
|
+
}
|
|
213
|
+
function SelectScrollUpButton({
|
|
214
|
+
className,
|
|
215
|
+
...props
|
|
216
|
+
}) {
|
|
217
|
+
return /* @__PURE__ */ jsx3(
|
|
218
|
+
SelectPrimitive.ScrollUpArrow,
|
|
219
|
+
{
|
|
220
|
+
"data-slot": "select-scroll-up-button",
|
|
221
|
+
className: cn(
|
|
222
|
+
"flex cursor-default items-center justify-center py-1",
|
|
223
|
+
className
|
|
224
|
+
),
|
|
225
|
+
...props,
|
|
226
|
+
children: /* @__PURE__ */ jsx3(ChevronUpIcon, { className: "size-4" })
|
|
227
|
+
}
|
|
228
|
+
);
|
|
229
|
+
}
|
|
230
|
+
function SelectScrollDownButton({
|
|
231
|
+
className,
|
|
232
|
+
...props
|
|
233
|
+
}) {
|
|
234
|
+
return /* @__PURE__ */ jsx3(
|
|
235
|
+
SelectPrimitive.ScrollDownArrow,
|
|
236
|
+
{
|
|
237
|
+
"data-slot": "select-scroll-down-button",
|
|
238
|
+
className: cn(
|
|
239
|
+
"flex cursor-default items-center justify-center py-1",
|
|
240
|
+
className
|
|
241
|
+
),
|
|
242
|
+
...props,
|
|
243
|
+
children: /* @__PURE__ */ jsx3(ChevronDownIcon, { className: "size-4" })
|
|
244
|
+
}
|
|
245
|
+
);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
// src/ui/table.tsx
|
|
249
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
250
|
+
function Table({ className, ...props }) {
|
|
251
|
+
return /* @__PURE__ */ jsx4(
|
|
252
|
+
"div",
|
|
253
|
+
{
|
|
254
|
+
"data-slot": "table-container",
|
|
255
|
+
className: "relative w-full overflow-x-auto",
|
|
256
|
+
children: /* @__PURE__ */ jsx4(
|
|
257
|
+
"table",
|
|
258
|
+
{
|
|
259
|
+
"data-slot": "table",
|
|
260
|
+
className: cn("w-full caption-bottom text-sm", className),
|
|
261
|
+
...props
|
|
262
|
+
}
|
|
263
|
+
)
|
|
264
|
+
}
|
|
265
|
+
);
|
|
266
|
+
}
|
|
267
|
+
function TableHeader({ className, ...props }) {
|
|
268
|
+
return /* @__PURE__ */ jsx4(
|
|
269
|
+
"thead",
|
|
270
|
+
{
|
|
271
|
+
"data-slot": "table-header",
|
|
272
|
+
className: cn("[&_tr]:border-b [&_tr]:border-border", className),
|
|
273
|
+
...props
|
|
274
|
+
}
|
|
275
|
+
);
|
|
276
|
+
}
|
|
277
|
+
function TableBody({ className, ...props }) {
|
|
278
|
+
return /* @__PURE__ */ jsx4(
|
|
279
|
+
"tbody",
|
|
280
|
+
{
|
|
281
|
+
"data-slot": "table-body",
|
|
282
|
+
className: cn("[&_tr:last-child]:border-0", className),
|
|
283
|
+
...props
|
|
284
|
+
}
|
|
285
|
+
);
|
|
286
|
+
}
|
|
287
|
+
function TableFooter({ className, ...props }) {
|
|
288
|
+
return /* @__PURE__ */ jsx4(
|
|
289
|
+
"tfoot",
|
|
290
|
+
{
|
|
291
|
+
"data-slot": "table-footer",
|
|
292
|
+
className: cn(
|
|
293
|
+
"border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
|
294
|
+
className
|
|
295
|
+
),
|
|
296
|
+
...props
|
|
297
|
+
}
|
|
298
|
+
);
|
|
299
|
+
}
|
|
300
|
+
function TableRow({ className, ...props }) {
|
|
301
|
+
return /* @__PURE__ */ jsx4(
|
|
302
|
+
"tr",
|
|
303
|
+
{
|
|
304
|
+
"data-slot": "table-row",
|
|
305
|
+
className: cn(
|
|
306
|
+
"border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
|
307
|
+
className
|
|
308
|
+
),
|
|
309
|
+
...props
|
|
310
|
+
}
|
|
311
|
+
);
|
|
312
|
+
}
|
|
313
|
+
function TableHead({ className, ...props }) {
|
|
314
|
+
return /* @__PURE__ */ jsx4(
|
|
315
|
+
"th",
|
|
316
|
+
{
|
|
317
|
+
"data-slot": "table-head",
|
|
318
|
+
className: cn(
|
|
319
|
+
"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
|
|
320
|
+
className
|
|
321
|
+
),
|
|
322
|
+
...props
|
|
323
|
+
}
|
|
324
|
+
);
|
|
325
|
+
}
|
|
326
|
+
function TableCell({ className, ...props }) {
|
|
327
|
+
return /* @__PURE__ */ jsx4(
|
|
328
|
+
"td",
|
|
329
|
+
{
|
|
330
|
+
"data-slot": "table-cell",
|
|
331
|
+
className: cn(
|
|
332
|
+
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
|
|
333
|
+
className
|
|
334
|
+
),
|
|
335
|
+
...props
|
|
336
|
+
}
|
|
337
|
+
);
|
|
338
|
+
}
|
|
339
|
+
function TableCaption({
|
|
340
|
+
className,
|
|
341
|
+
...props
|
|
342
|
+
}) {
|
|
343
|
+
return /* @__PURE__ */ jsx4(
|
|
344
|
+
"caption",
|
|
345
|
+
{
|
|
346
|
+
"data-slot": "table-caption",
|
|
347
|
+
className: cn("mt-4 text-sm text-muted-foreground", className),
|
|
348
|
+
...props
|
|
349
|
+
}
|
|
350
|
+
);
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
// src/ui/tabs.tsx
|
|
354
|
+
import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
|
|
355
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
356
|
+
function Tabs({
|
|
357
|
+
className,
|
|
358
|
+
...props
|
|
359
|
+
}) {
|
|
360
|
+
return /* @__PURE__ */ jsx5(
|
|
361
|
+
TabsPrimitive.Root,
|
|
362
|
+
{
|
|
363
|
+
"data-slot": "tabs",
|
|
364
|
+
className: cn("flex flex-col gap-2", className),
|
|
365
|
+
...props
|
|
366
|
+
}
|
|
367
|
+
);
|
|
368
|
+
}
|
|
369
|
+
function TabsList({
|
|
370
|
+
className,
|
|
371
|
+
...props
|
|
372
|
+
}) {
|
|
373
|
+
return /* @__PURE__ */ jsx5(
|
|
374
|
+
TabsPrimitive.List,
|
|
375
|
+
{
|
|
376
|
+
"data-slot": "tabs-list",
|
|
377
|
+
className: cn(
|
|
378
|
+
"inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground",
|
|
379
|
+
className
|
|
380
|
+
),
|
|
381
|
+
...props
|
|
382
|
+
}
|
|
383
|
+
);
|
|
384
|
+
}
|
|
385
|
+
function TabsTrigger({
|
|
386
|
+
className,
|
|
387
|
+
...props
|
|
388
|
+
}) {
|
|
389
|
+
return /* @__PURE__ */ jsx5(
|
|
390
|
+
TabsPrimitive.Tab,
|
|
391
|
+
{
|
|
392
|
+
"data-slot": "tabs-trigger",
|
|
393
|
+
className: cn(
|
|
394
|
+
"inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-active:border-border data-active:bg-background data-active:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
395
|
+
className
|
|
396
|
+
),
|
|
397
|
+
...props
|
|
398
|
+
}
|
|
399
|
+
);
|
|
400
|
+
}
|
|
401
|
+
function TabsContent({
|
|
402
|
+
className,
|
|
403
|
+
...props
|
|
404
|
+
}) {
|
|
405
|
+
return /* @__PURE__ */ jsx5(
|
|
406
|
+
TabsPrimitive.Panel,
|
|
407
|
+
{
|
|
408
|
+
"data-slot": "tabs-content",
|
|
409
|
+
className: cn("flex-1 outline-none", className),
|
|
410
|
+
...props
|
|
411
|
+
}
|
|
412
|
+
);
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
export {
|
|
416
|
+
Alert,
|
|
417
|
+
AlertTitle,
|
|
418
|
+
AlertDescription,
|
|
419
|
+
Input,
|
|
420
|
+
Select,
|
|
421
|
+
SelectGroup,
|
|
422
|
+
SelectValue,
|
|
423
|
+
SelectTrigger,
|
|
424
|
+
SelectContent,
|
|
425
|
+
SelectLabel,
|
|
426
|
+
SelectItem,
|
|
427
|
+
SelectSeparator,
|
|
428
|
+
SelectScrollUpButton,
|
|
429
|
+
SelectScrollDownButton,
|
|
430
|
+
Table,
|
|
431
|
+
TableHeader,
|
|
432
|
+
TableBody,
|
|
433
|
+
TableFooter,
|
|
434
|
+
TableRow,
|
|
435
|
+
TableHead,
|
|
436
|
+
TableCell,
|
|
437
|
+
TableCaption,
|
|
438
|
+
Tabs,
|
|
439
|
+
TabsList,
|
|
440
|
+
TabsTrigger,
|
|
441
|
+
TabsContent
|
|
442
|
+
};
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import {
|
|
2
|
+
cn
|
|
3
|
+
} from "./chunk-RQHJBTEU.js";
|
|
4
|
+
|
|
5
|
+
// src/ui/dialog.tsx
|
|
6
|
+
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
|
|
7
|
+
import { XIcon } from "lucide-react";
|
|
8
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
function Dialog({
|
|
10
|
+
...props
|
|
11
|
+
}) {
|
|
12
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
|
|
13
|
+
}
|
|
14
|
+
function DialogTrigger({
|
|
15
|
+
...props
|
|
16
|
+
}) {
|
|
17
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
|
|
18
|
+
}
|
|
19
|
+
function DialogPortal({
|
|
20
|
+
...props
|
|
21
|
+
}) {
|
|
22
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
|
|
23
|
+
}
|
|
24
|
+
function DialogClose({
|
|
25
|
+
...props
|
|
26
|
+
}) {
|
|
27
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
|
|
28
|
+
}
|
|
29
|
+
function DialogOverlay({
|
|
30
|
+
className,
|
|
31
|
+
...props
|
|
32
|
+
}) {
|
|
33
|
+
return /* @__PURE__ */ jsx(
|
|
34
|
+
DialogPrimitive.Backdrop,
|
|
35
|
+
{
|
|
36
|
+
"data-slot": "dialog-overlay",
|
|
37
|
+
className: cn(
|
|
38
|
+
"fixed inset-0 z-50 bg-black/50 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
|
39
|
+
className
|
|
40
|
+
),
|
|
41
|
+
...props
|
|
42
|
+
}
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
function DialogContent({
|
|
46
|
+
className,
|
|
47
|
+
children,
|
|
48
|
+
showCloseButton = true,
|
|
49
|
+
...props
|
|
50
|
+
}) {
|
|
51
|
+
return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
|
|
52
|
+
/* @__PURE__ */ jsx(DialogOverlay, {}),
|
|
53
|
+
/* @__PURE__ */ jsxs(
|
|
54
|
+
DialogPrimitive.Popup,
|
|
55
|
+
{
|
|
56
|
+
"data-slot": "dialog-content",
|
|
57
|
+
className: cn(
|
|
58
|
+
"fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-background p-6 shadow-lg duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 sm:max-w-lg",
|
|
59
|
+
className
|
|
60
|
+
),
|
|
61
|
+
...props,
|
|
62
|
+
children: [
|
|
63
|
+
children,
|
|
64
|
+
showCloseButton && /* @__PURE__ */ jsxs(
|
|
65
|
+
DialogPrimitive.Close,
|
|
66
|
+
{
|
|
67
|
+
"data-slot": "dialog-close",
|
|
68
|
+
render: /* @__PURE__ */ jsx(
|
|
69
|
+
"button",
|
|
70
|
+
{
|
|
71
|
+
type: "button",
|
|
72
|
+
className: "absolute top-4 right-4 cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
|
73
|
+
}
|
|
74
|
+
),
|
|
75
|
+
children: [
|
|
76
|
+
/* @__PURE__ */ jsx(XIcon, {}),
|
|
77
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
)
|
|
81
|
+
]
|
|
82
|
+
}
|
|
83
|
+
)
|
|
84
|
+
] });
|
|
85
|
+
}
|
|
86
|
+
function DialogHeader({ className, ...props }) {
|
|
87
|
+
return /* @__PURE__ */ jsx(
|
|
88
|
+
"div",
|
|
89
|
+
{
|
|
90
|
+
"data-slot": "dialog-header",
|
|
91
|
+
className: cn("flex flex-col gap-2 text-center sm:text-left", className),
|
|
92
|
+
...props
|
|
93
|
+
}
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
function DialogFooter({ className, ...props }) {
|
|
97
|
+
return /* @__PURE__ */ jsx(
|
|
98
|
+
"div",
|
|
99
|
+
{
|
|
100
|
+
"data-slot": "dialog-footer",
|
|
101
|
+
className: cn(
|
|
102
|
+
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
|
103
|
+
className
|
|
104
|
+
),
|
|
105
|
+
...props
|
|
106
|
+
}
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
function DialogTitle({
|
|
110
|
+
className,
|
|
111
|
+
...props
|
|
112
|
+
}) {
|
|
113
|
+
return /* @__PURE__ */ jsx(
|
|
114
|
+
DialogPrimitive.Title,
|
|
115
|
+
{
|
|
116
|
+
"data-slot": "dialog-title",
|
|
117
|
+
className: cn("text-lg leading-none font-semibold", className),
|
|
118
|
+
...props
|
|
119
|
+
}
|
|
120
|
+
);
|
|
121
|
+
}
|
|
122
|
+
function DialogDescription({
|
|
123
|
+
className,
|
|
124
|
+
...props
|
|
125
|
+
}) {
|
|
126
|
+
return /* @__PURE__ */ jsx(
|
|
127
|
+
DialogPrimitive.Description,
|
|
128
|
+
{
|
|
129
|
+
"data-slot": "dialog-description",
|
|
130
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
131
|
+
...props
|
|
132
|
+
}
|
|
133
|
+
);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
export {
|
|
137
|
+
Dialog,
|
|
138
|
+
DialogTrigger,
|
|
139
|
+
DialogPortal,
|
|
140
|
+
DialogClose,
|
|
141
|
+
DialogOverlay,
|
|
142
|
+
DialogContent,
|
|
143
|
+
DialogHeader,
|
|
144
|
+
DialogFooter,
|
|
145
|
+
DialogTitle,
|
|
146
|
+
DialogDescription
|
|
147
|
+
};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import {
|
|
2
|
+
cn
|
|
3
|
+
} from "./chunk-RQHJBTEU.js";
|
|
4
|
+
|
|
5
|
+
// src/ui/button.tsx
|
|
6
|
+
import { Button as ButtonPrimitive } from "@base-ui/react/button";
|
|
7
|
+
import { cva } from "class-variance-authority";
|
|
8
|
+
import * as React from "react";
|
|
9
|
+
import { jsx } from "react/jsx-runtime";
|
|
10
|
+
var buttonVariants = cva(
|
|
11
|
+
"inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
12
|
+
{
|
|
13
|
+
variants: {
|
|
14
|
+
variant: {
|
|
15
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
16
|
+
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20",
|
|
17
|
+
outline: "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
|
|
18
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
19
|
+
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
20
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
21
|
+
},
|
|
22
|
+
size: {
|
|
23
|
+
default: "h-9 px-4 py-2",
|
|
24
|
+
sm: "h-8 gap-1.5 rounded-md px-3 text-xs",
|
|
25
|
+
lg: "h-10 rounded-md px-6",
|
|
26
|
+
icon: "size-9"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
defaultVariants: {
|
|
30
|
+
variant: "default",
|
|
31
|
+
size: "default"
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
);
|
|
35
|
+
function Button({
|
|
36
|
+
className,
|
|
37
|
+
variant,
|
|
38
|
+
size,
|
|
39
|
+
asChild = false,
|
|
40
|
+
children,
|
|
41
|
+
...props
|
|
42
|
+
}) {
|
|
43
|
+
if (asChild && React.isValidElement(children)) {
|
|
44
|
+
return /* @__PURE__ */ jsx(
|
|
45
|
+
ButtonPrimitive,
|
|
46
|
+
{
|
|
47
|
+
"data-slot": "button",
|
|
48
|
+
className: cn(buttonVariants({ variant, size, className })),
|
|
49
|
+
render: children,
|
|
50
|
+
...props
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
return /* @__PURE__ */ jsx(
|
|
55
|
+
ButtonPrimitive,
|
|
56
|
+
{
|
|
57
|
+
"data-slot": "button",
|
|
58
|
+
className: cn(buttonVariants({ variant, size, className })),
|
|
59
|
+
...props,
|
|
60
|
+
children
|
|
61
|
+
}
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
export {
|
|
66
|
+
buttonVariants,
|
|
67
|
+
Button
|
|
68
|
+
};
|