@nextsparkjs/ui 0.1.0-beta.1
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/index.d.ts +195 -0
- package/dist/index.js +754 -0
- package/dist/index.js.map +1 -0
- package/dist/index.native.d.ts +456 -0
- package/dist/index.native.js +2371 -0
- package/dist/index.native.js.map +1 -0
- package/package.json +65 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,754 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/components/Button.tsx
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
6
|
+
import { cva } from "class-variance-authority";
|
|
7
|
+
|
|
8
|
+
// src/utils.ts
|
|
9
|
+
import { clsx } from "clsx";
|
|
10
|
+
import { twMerge } from "tailwind-merge";
|
|
11
|
+
function cn(...inputs) {
|
|
12
|
+
return twMerge(clsx(inputs));
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// src/components/Button.tsx
|
|
16
|
+
import { jsx } from "react/jsx-runtime";
|
|
17
|
+
var buttonVariants = cva(
|
|
18
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
|
|
19
|
+
{
|
|
20
|
+
variants: {
|
|
21
|
+
variant: {
|
|
22
|
+
default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
|
23
|
+
destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
|
|
24
|
+
outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
|
|
25
|
+
secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
|
26
|
+
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
27
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
28
|
+
},
|
|
29
|
+
size: {
|
|
30
|
+
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
31
|
+
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
|
32
|
+
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
|
33
|
+
icon: "size-9"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
defaultVariants: {
|
|
37
|
+
variant: "default",
|
|
38
|
+
size: "default"
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
);
|
|
42
|
+
var Button = React.forwardRef(
|
|
43
|
+
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
44
|
+
const Comp = asChild ? Slot : "button";
|
|
45
|
+
return /* @__PURE__ */ jsx(
|
|
46
|
+
Comp,
|
|
47
|
+
{
|
|
48
|
+
ref,
|
|
49
|
+
"data-slot": "button",
|
|
50
|
+
className: cn(buttonVariants({ variant, size, className })),
|
|
51
|
+
...props
|
|
52
|
+
}
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
Button.displayName = "Button";
|
|
57
|
+
|
|
58
|
+
// src/components/Input.tsx
|
|
59
|
+
import * as React2 from "react";
|
|
60
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
61
|
+
var Input = React2.forwardRef(
|
|
62
|
+
({ className, type, ...props }, ref) => {
|
|
63
|
+
return /* @__PURE__ */ jsx2(
|
|
64
|
+
"input",
|
|
65
|
+
{
|
|
66
|
+
type,
|
|
67
|
+
className: cn(
|
|
68
|
+
"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
69
|
+
className
|
|
70
|
+
),
|
|
71
|
+
ref,
|
|
72
|
+
...props
|
|
73
|
+
}
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
);
|
|
77
|
+
Input.displayName = "Input";
|
|
78
|
+
|
|
79
|
+
// src/components/Textarea.tsx
|
|
80
|
+
import * as React3 from "react";
|
|
81
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
82
|
+
var Textarea = React3.forwardRef(
|
|
83
|
+
({ className, ...props }, ref) => {
|
|
84
|
+
return /* @__PURE__ */ jsx3(
|
|
85
|
+
"textarea",
|
|
86
|
+
{
|
|
87
|
+
className: cn(
|
|
88
|
+
"flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
89
|
+
className
|
|
90
|
+
),
|
|
91
|
+
ref,
|
|
92
|
+
...props
|
|
93
|
+
}
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
);
|
|
97
|
+
Textarea.displayName = "Textarea";
|
|
98
|
+
|
|
99
|
+
// src/components/Checkbox.tsx
|
|
100
|
+
import * as React4 from "react";
|
|
101
|
+
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
102
|
+
import { CheckIcon } from "@radix-ui/react-icons";
|
|
103
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
104
|
+
var Checkbox = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
|
|
105
|
+
CheckboxPrimitive.Root,
|
|
106
|
+
{
|
|
107
|
+
ref,
|
|
108
|
+
className: cn(
|
|
109
|
+
"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
|
|
110
|
+
className
|
|
111
|
+
),
|
|
112
|
+
...props,
|
|
113
|
+
children: /* @__PURE__ */ jsx4(
|
|
114
|
+
CheckboxPrimitive.Indicator,
|
|
115
|
+
{
|
|
116
|
+
className: cn("flex items-center justify-center text-current"),
|
|
117
|
+
children: /* @__PURE__ */ jsx4(CheckIcon, { className: "h-4 w-4" })
|
|
118
|
+
}
|
|
119
|
+
)
|
|
120
|
+
}
|
|
121
|
+
));
|
|
122
|
+
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
|
123
|
+
|
|
124
|
+
// src/components/Switch.tsx
|
|
125
|
+
import * as React5 from "react";
|
|
126
|
+
import * as SwitchPrimitives from "@radix-ui/react-switch";
|
|
127
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
128
|
+
var Switch = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
|
|
129
|
+
SwitchPrimitives.Root,
|
|
130
|
+
{
|
|
131
|
+
className: cn(
|
|
132
|
+
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
|
|
133
|
+
className
|
|
134
|
+
),
|
|
135
|
+
...props,
|
|
136
|
+
ref,
|
|
137
|
+
children: /* @__PURE__ */ jsx5(
|
|
138
|
+
SwitchPrimitives.Thumb,
|
|
139
|
+
{
|
|
140
|
+
className: cn(
|
|
141
|
+
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
|
|
142
|
+
)
|
|
143
|
+
}
|
|
144
|
+
)
|
|
145
|
+
}
|
|
146
|
+
));
|
|
147
|
+
Switch.displayName = SwitchPrimitives.Root.displayName;
|
|
148
|
+
|
|
149
|
+
// src/components/Label.tsx
|
|
150
|
+
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
151
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
152
|
+
function Label({ className, ...props }) {
|
|
153
|
+
return /* @__PURE__ */ jsx6(
|
|
154
|
+
LabelPrimitive.Root,
|
|
155
|
+
{
|
|
156
|
+
"data-slot": "label",
|
|
157
|
+
className: cn(
|
|
158
|
+
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
|
159
|
+
className
|
|
160
|
+
),
|
|
161
|
+
...props
|
|
162
|
+
}
|
|
163
|
+
);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
// src/components/Badge.tsx
|
|
167
|
+
import { cva as cva2 } from "class-variance-authority";
|
|
168
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
169
|
+
var badgeVariants = cva2(
|
|
170
|
+
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
171
|
+
{
|
|
172
|
+
variants: {
|
|
173
|
+
variant: {
|
|
174
|
+
default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
|
|
175
|
+
secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
176
|
+
destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
|
|
177
|
+
outline: "text-foreground"
|
|
178
|
+
}
|
|
179
|
+
},
|
|
180
|
+
defaultVariants: {
|
|
181
|
+
variant: "default"
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
);
|
|
185
|
+
function Badge({ className, variant, ...props }) {
|
|
186
|
+
return /* @__PURE__ */ jsx7("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
// src/components/Avatar.tsx
|
|
190
|
+
import * as React6 from "react";
|
|
191
|
+
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
|
192
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
193
|
+
var Avatar = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
|
|
194
|
+
AvatarPrimitive.Root,
|
|
195
|
+
{
|
|
196
|
+
ref,
|
|
197
|
+
className: cn(
|
|
198
|
+
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
|
|
199
|
+
className
|
|
200
|
+
),
|
|
201
|
+
...props
|
|
202
|
+
}
|
|
203
|
+
));
|
|
204
|
+
Avatar.displayName = AvatarPrimitive.Root.displayName;
|
|
205
|
+
var AvatarImage = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
|
|
206
|
+
AvatarPrimitive.Image,
|
|
207
|
+
{
|
|
208
|
+
ref,
|
|
209
|
+
className: cn("aspect-square h-full w-full", className),
|
|
210
|
+
...props
|
|
211
|
+
}
|
|
212
|
+
));
|
|
213
|
+
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
|
|
214
|
+
var AvatarFallback = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
|
|
215
|
+
AvatarPrimitive.Fallback,
|
|
216
|
+
{
|
|
217
|
+
ref,
|
|
218
|
+
className: cn(
|
|
219
|
+
"flex h-full w-full items-center justify-center rounded-full bg-muted",
|
|
220
|
+
className
|
|
221
|
+
),
|
|
222
|
+
...props
|
|
223
|
+
}
|
|
224
|
+
));
|
|
225
|
+
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
|
|
226
|
+
function getInitials(name) {
|
|
227
|
+
if (!name) return "U";
|
|
228
|
+
const parts = name.trim().split(" ");
|
|
229
|
+
if (parts.length >= 2) {
|
|
230
|
+
return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
|
|
231
|
+
}
|
|
232
|
+
return name.substring(0, 2).toUpperCase();
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
// src/components/Card.tsx
|
|
236
|
+
import * as React7 from "react";
|
|
237
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
238
|
+
var Card = React7.forwardRef(
|
|
239
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
|
|
240
|
+
"div",
|
|
241
|
+
{
|
|
242
|
+
ref,
|
|
243
|
+
className: cn(
|
|
244
|
+
"rounded-xl border bg-card text-card-foreground shadow",
|
|
245
|
+
className
|
|
246
|
+
),
|
|
247
|
+
...props
|
|
248
|
+
}
|
|
249
|
+
)
|
|
250
|
+
);
|
|
251
|
+
Card.displayName = "Card";
|
|
252
|
+
var PressableCard = React7.forwardRef(
|
|
253
|
+
({ className, onClick, ...props }, ref) => /* @__PURE__ */ jsx9(
|
|
254
|
+
"div",
|
|
255
|
+
{
|
|
256
|
+
ref,
|
|
257
|
+
role: "button",
|
|
258
|
+
tabIndex: 0,
|
|
259
|
+
onClick,
|
|
260
|
+
onKeyDown: (e) => {
|
|
261
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
262
|
+
e.preventDefault();
|
|
263
|
+
onClick?.();
|
|
264
|
+
}
|
|
265
|
+
},
|
|
266
|
+
className: cn(
|
|
267
|
+
"rounded-xl border bg-card text-card-foreground shadow cursor-pointer transition-opacity hover:opacity-80 active:opacity-70",
|
|
268
|
+
className
|
|
269
|
+
),
|
|
270
|
+
...props
|
|
271
|
+
}
|
|
272
|
+
)
|
|
273
|
+
);
|
|
274
|
+
PressableCard.displayName = "PressableCard";
|
|
275
|
+
var CardHeader = React7.forwardRef(
|
|
276
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
|
|
277
|
+
"div",
|
|
278
|
+
{
|
|
279
|
+
ref,
|
|
280
|
+
className: cn("flex flex-col space-y-1.5 p-6", className),
|
|
281
|
+
...props
|
|
282
|
+
}
|
|
283
|
+
)
|
|
284
|
+
);
|
|
285
|
+
CardHeader.displayName = "CardHeader";
|
|
286
|
+
var CardTitle = React7.forwardRef(
|
|
287
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
|
|
288
|
+
"div",
|
|
289
|
+
{
|
|
290
|
+
ref,
|
|
291
|
+
className: cn("font-semibold leading-none tracking-tight", className),
|
|
292
|
+
...props
|
|
293
|
+
}
|
|
294
|
+
)
|
|
295
|
+
);
|
|
296
|
+
CardTitle.displayName = "CardTitle";
|
|
297
|
+
var CardDescription = React7.forwardRef(
|
|
298
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
|
|
299
|
+
"div",
|
|
300
|
+
{
|
|
301
|
+
ref,
|
|
302
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
303
|
+
...props
|
|
304
|
+
}
|
|
305
|
+
)
|
|
306
|
+
);
|
|
307
|
+
CardDescription.displayName = "CardDescription";
|
|
308
|
+
var CardContent = React7.forwardRef(
|
|
309
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx9("div", { ref, className: cn("p-6 pt-0", className), ...props })
|
|
310
|
+
);
|
|
311
|
+
CardContent.displayName = "CardContent";
|
|
312
|
+
var CardFooter = React7.forwardRef(
|
|
313
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
|
|
314
|
+
"div",
|
|
315
|
+
{
|
|
316
|
+
ref,
|
|
317
|
+
className: cn("flex items-center p-6 pt-0", className),
|
|
318
|
+
...props
|
|
319
|
+
}
|
|
320
|
+
)
|
|
321
|
+
);
|
|
322
|
+
CardFooter.displayName = "CardFooter";
|
|
323
|
+
|
|
324
|
+
// src/components/Separator.tsx
|
|
325
|
+
import * as React8 from "react";
|
|
326
|
+
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
|
327
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
328
|
+
var Separator = React8.forwardRef(
|
|
329
|
+
({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx10(
|
|
330
|
+
SeparatorPrimitive.Root,
|
|
331
|
+
{
|
|
332
|
+
ref,
|
|
333
|
+
decorative,
|
|
334
|
+
orientation,
|
|
335
|
+
className: cn(
|
|
336
|
+
"shrink-0 bg-border",
|
|
337
|
+
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
|
338
|
+
className
|
|
339
|
+
),
|
|
340
|
+
...props
|
|
341
|
+
}
|
|
342
|
+
)
|
|
343
|
+
);
|
|
344
|
+
Separator.displayName = SeparatorPrimitive.Root.displayName;
|
|
345
|
+
|
|
346
|
+
// src/components/Skeleton.tsx
|
|
347
|
+
import * as React9 from "react";
|
|
348
|
+
import { jsx as jsx11, jsxs } from "react/jsx-runtime";
|
|
349
|
+
var Skeleton = React9.forwardRef(
|
|
350
|
+
({ className, ...props }, ref) => {
|
|
351
|
+
return /* @__PURE__ */ jsx11(
|
|
352
|
+
"div",
|
|
353
|
+
{
|
|
354
|
+
ref,
|
|
355
|
+
className: cn(
|
|
356
|
+
// Base styles
|
|
357
|
+
"rounded-md bg-muted",
|
|
358
|
+
// Optimized animation - GPU accelerated
|
|
359
|
+
"animate-skeleton-pulse",
|
|
360
|
+
// CSS containment for better INP
|
|
361
|
+
"skeleton-contained",
|
|
362
|
+
className
|
|
363
|
+
),
|
|
364
|
+
...props
|
|
365
|
+
}
|
|
366
|
+
);
|
|
367
|
+
}
|
|
368
|
+
);
|
|
369
|
+
Skeleton.displayName = "Skeleton";
|
|
370
|
+
var SkeletonContainer = React9.forwardRef(
|
|
371
|
+
({ className, children, ...props }, ref) => {
|
|
372
|
+
return /* @__PURE__ */ jsx11(
|
|
373
|
+
"div",
|
|
374
|
+
{
|
|
375
|
+
ref,
|
|
376
|
+
className: cn("skeleton-container", className),
|
|
377
|
+
...props,
|
|
378
|
+
children
|
|
379
|
+
}
|
|
380
|
+
);
|
|
381
|
+
}
|
|
382
|
+
);
|
|
383
|
+
SkeletonContainer.displayName = "SkeletonContainer";
|
|
384
|
+
var SkeletonText = React9.forwardRef(
|
|
385
|
+
({ className, lines = 1, ...props }, ref) => {
|
|
386
|
+
return /* @__PURE__ */ jsx11("div", { ref, className: cn("space-y-2", className), ...props, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx11(
|
|
387
|
+
Skeleton,
|
|
388
|
+
{
|
|
389
|
+
className: cn(
|
|
390
|
+
"h-4",
|
|
391
|
+
// Last line is typically shorter
|
|
392
|
+
i === lines - 1 && lines > 1 ? "w-3/4" : "w-full"
|
|
393
|
+
)
|
|
394
|
+
},
|
|
395
|
+
i
|
|
396
|
+
)) });
|
|
397
|
+
}
|
|
398
|
+
);
|
|
399
|
+
SkeletonText.displayName = "SkeletonText";
|
|
400
|
+
var SkeletonTitle = React9.forwardRef(
|
|
401
|
+
({ className, ...props }, ref) => {
|
|
402
|
+
return /* @__PURE__ */ jsx11(Skeleton, { ref, className: cn("h-6 w-1/2", className), ...props });
|
|
403
|
+
}
|
|
404
|
+
);
|
|
405
|
+
SkeletonTitle.displayName = "SkeletonTitle";
|
|
406
|
+
var SkeletonAvatar = React9.forwardRef(
|
|
407
|
+
({ className, ...props }, ref) => {
|
|
408
|
+
return /* @__PURE__ */ jsx11(Skeleton, { ref, className: cn("h-10 w-10 rounded-full", className), ...props });
|
|
409
|
+
}
|
|
410
|
+
);
|
|
411
|
+
SkeletonAvatar.displayName = "SkeletonAvatar";
|
|
412
|
+
var SkeletonCard = React9.forwardRef(
|
|
413
|
+
({ className, ...props }, ref) => {
|
|
414
|
+
return /* @__PURE__ */ jsxs(
|
|
415
|
+
"div",
|
|
416
|
+
{
|
|
417
|
+
ref,
|
|
418
|
+
className: cn("space-y-3 rounded-xl border border-border bg-card p-4", className),
|
|
419
|
+
...props,
|
|
420
|
+
children: [
|
|
421
|
+
/* @__PURE__ */ jsx11(Skeleton, { className: "h-5 w-2/3" }),
|
|
422
|
+
/* @__PURE__ */ jsx11(Skeleton, { className: "h-4 w-full" }),
|
|
423
|
+
/* @__PURE__ */ jsx11(Skeleton, { className: "h-4 w-4/5" }),
|
|
424
|
+
/* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-2", children: [
|
|
425
|
+
/* @__PURE__ */ jsx11(Skeleton, { className: "h-6 w-16 rounded-full" }),
|
|
426
|
+
/* @__PURE__ */ jsx11(Skeleton, { className: "h-6 w-16 rounded-full" })
|
|
427
|
+
] })
|
|
428
|
+
]
|
|
429
|
+
}
|
|
430
|
+
);
|
|
431
|
+
}
|
|
432
|
+
);
|
|
433
|
+
SkeletonCard.displayName = "SkeletonCard";
|
|
434
|
+
|
|
435
|
+
// src/components/Dialog.tsx
|
|
436
|
+
import * as React10 from "react";
|
|
437
|
+
import { jsx as jsx12, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
438
|
+
var DialogContext = React10.createContext(void 0);
|
|
439
|
+
function useDialogContext() {
|
|
440
|
+
const context = React10.useContext(DialogContext);
|
|
441
|
+
if (!context) {
|
|
442
|
+
throw new Error("Dialog components must be used within a Dialog");
|
|
443
|
+
}
|
|
444
|
+
return context;
|
|
445
|
+
}
|
|
446
|
+
function Dialog({
|
|
447
|
+
open = false,
|
|
448
|
+
onOpenChange = () => {
|
|
449
|
+
},
|
|
450
|
+
children
|
|
451
|
+
}) {
|
|
452
|
+
return /* @__PURE__ */ jsx12(DialogContext.Provider, { value: { open, onOpenChange }, children });
|
|
453
|
+
}
|
|
454
|
+
Dialog.displayName = "Dialog";
|
|
455
|
+
var DialogContent = React10.forwardRef(
|
|
456
|
+
({ className, children, ...props }, ref) => {
|
|
457
|
+
const { open, onOpenChange } = useDialogContext();
|
|
458
|
+
React10.useEffect(() => {
|
|
459
|
+
const handleEscape = (e) => {
|
|
460
|
+
if (e.key === "Escape" && open) {
|
|
461
|
+
onOpenChange(false);
|
|
462
|
+
}
|
|
463
|
+
};
|
|
464
|
+
document.addEventListener("keydown", handleEscape);
|
|
465
|
+
return () => document.removeEventListener("keydown", handleEscape);
|
|
466
|
+
}, [open, onOpenChange]);
|
|
467
|
+
if (!open) return null;
|
|
468
|
+
return /* @__PURE__ */ jsxs2("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
|
|
469
|
+
/* @__PURE__ */ jsx12(
|
|
470
|
+
"div",
|
|
471
|
+
{
|
|
472
|
+
className: "fixed inset-0 bg-black/50 animate-in fade-in-0",
|
|
473
|
+
onClick: () => onOpenChange(false)
|
|
474
|
+
}
|
|
475
|
+
),
|
|
476
|
+
/* @__PURE__ */ jsx12(
|
|
477
|
+
"div",
|
|
478
|
+
{
|
|
479
|
+
ref,
|
|
480
|
+
role: "dialog",
|
|
481
|
+
"aria-modal": "true",
|
|
482
|
+
className: cn(
|
|
483
|
+
"relative z-50 w-full max-w-lg rounded-xl bg-card shadow-lg animate-in fade-in-0 zoom-in-95",
|
|
484
|
+
"max-h-[85vh] overflow-auto",
|
|
485
|
+
className
|
|
486
|
+
),
|
|
487
|
+
onClick: (e) => e.stopPropagation(),
|
|
488
|
+
...props,
|
|
489
|
+
children
|
|
490
|
+
}
|
|
491
|
+
)
|
|
492
|
+
] });
|
|
493
|
+
}
|
|
494
|
+
);
|
|
495
|
+
DialogContent.displayName = "DialogContent";
|
|
496
|
+
var DialogHeader = React10.forwardRef(
|
|
497
|
+
({ className, children, ...props }, ref) => {
|
|
498
|
+
return /* @__PURE__ */ jsx12(
|
|
499
|
+
"div",
|
|
500
|
+
{
|
|
501
|
+
ref,
|
|
502
|
+
className: cn("border-b border-border p-4", className),
|
|
503
|
+
...props,
|
|
504
|
+
children
|
|
505
|
+
}
|
|
506
|
+
);
|
|
507
|
+
}
|
|
508
|
+
);
|
|
509
|
+
DialogHeader.displayName = "DialogHeader";
|
|
510
|
+
var DialogTitle = React10.forwardRef(
|
|
511
|
+
({ className, children, ...props }, ref) => {
|
|
512
|
+
return /* @__PURE__ */ jsx12(
|
|
513
|
+
"h2",
|
|
514
|
+
{
|
|
515
|
+
ref,
|
|
516
|
+
className: cn("text-lg font-semibold", className),
|
|
517
|
+
...props,
|
|
518
|
+
children
|
|
519
|
+
}
|
|
520
|
+
);
|
|
521
|
+
}
|
|
522
|
+
);
|
|
523
|
+
DialogTitle.displayName = "DialogTitle";
|
|
524
|
+
var DialogDescription = React10.forwardRef(
|
|
525
|
+
({ className, children, ...props }, ref) => {
|
|
526
|
+
return /* @__PURE__ */ jsx12(
|
|
527
|
+
"p",
|
|
528
|
+
{
|
|
529
|
+
ref,
|
|
530
|
+
className: cn("mt-1 text-sm text-muted-foreground", className),
|
|
531
|
+
...props,
|
|
532
|
+
children
|
|
533
|
+
}
|
|
534
|
+
);
|
|
535
|
+
}
|
|
536
|
+
);
|
|
537
|
+
DialogDescription.displayName = "DialogDescription";
|
|
538
|
+
var DialogBody = React10.forwardRef(
|
|
539
|
+
({ className, children, ...props }, ref) => {
|
|
540
|
+
return /* @__PURE__ */ jsx12("div", { ref, className: cn("p-4", className), ...props, children });
|
|
541
|
+
}
|
|
542
|
+
);
|
|
543
|
+
DialogBody.displayName = "DialogBody";
|
|
544
|
+
var DialogFooter = React10.forwardRef(
|
|
545
|
+
({ className, children, ...props }, ref) => {
|
|
546
|
+
return /* @__PURE__ */ jsx12(
|
|
547
|
+
"div",
|
|
548
|
+
{
|
|
549
|
+
ref,
|
|
550
|
+
className: cn("flex justify-end gap-2 border-t border-border p-4", className),
|
|
551
|
+
...props,
|
|
552
|
+
children
|
|
553
|
+
}
|
|
554
|
+
);
|
|
555
|
+
}
|
|
556
|
+
);
|
|
557
|
+
DialogFooter.displayName = "DialogFooter";
|
|
558
|
+
var DialogClose = React10.forwardRef(
|
|
559
|
+
({ children, onClick, ...props }, ref) => {
|
|
560
|
+
const { onOpenChange } = useDialogContext();
|
|
561
|
+
return /* @__PURE__ */ jsx12(
|
|
562
|
+
"button",
|
|
563
|
+
{
|
|
564
|
+
ref,
|
|
565
|
+
type: "button",
|
|
566
|
+
onClick: (e) => {
|
|
567
|
+
onClick?.(e);
|
|
568
|
+
onOpenChange(false);
|
|
569
|
+
},
|
|
570
|
+
...props,
|
|
571
|
+
children
|
|
572
|
+
}
|
|
573
|
+
);
|
|
574
|
+
}
|
|
575
|
+
);
|
|
576
|
+
DialogClose.displayName = "DialogClose";
|
|
577
|
+
|
|
578
|
+
// src/components/Progress.tsx
|
|
579
|
+
import * as React11 from "react";
|
|
580
|
+
import * as ProgressPrimitive from "@radix-ui/react-progress";
|
|
581
|
+
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
582
|
+
var Progress = React11.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx13(
|
|
583
|
+
ProgressPrimitive.Root,
|
|
584
|
+
{
|
|
585
|
+
ref,
|
|
586
|
+
className: cn(
|
|
587
|
+
"relative h-4 w-full overflow-hidden rounded-full bg-secondary",
|
|
588
|
+
className
|
|
589
|
+
),
|
|
590
|
+
...props,
|
|
591
|
+
children: /* @__PURE__ */ jsx13(
|
|
592
|
+
ProgressPrimitive.Indicator,
|
|
593
|
+
{
|
|
594
|
+
className: "h-full w-full flex-1 bg-primary transition-all",
|
|
595
|
+
style: { transform: `translateX(-${100 - (value || 0)}%)` }
|
|
596
|
+
}
|
|
597
|
+
)
|
|
598
|
+
}
|
|
599
|
+
));
|
|
600
|
+
Progress.displayName = ProgressPrimitive.Root.displayName;
|
|
601
|
+
|
|
602
|
+
// src/components/Tabs.tsx
|
|
603
|
+
import * as React12 from "react";
|
|
604
|
+
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
605
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
606
|
+
var Tabs = TabsPrimitive.Root;
|
|
607
|
+
var TabsList = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
|
|
608
|
+
TabsPrimitive.List,
|
|
609
|
+
{
|
|
610
|
+
ref,
|
|
611
|
+
className: cn(
|
|
612
|
+
"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
|
|
613
|
+
className
|
|
614
|
+
),
|
|
615
|
+
...props
|
|
616
|
+
}
|
|
617
|
+
));
|
|
618
|
+
TabsList.displayName = TabsPrimitive.List.displayName;
|
|
619
|
+
var TabsTrigger = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
|
|
620
|
+
TabsPrimitive.Trigger,
|
|
621
|
+
{
|
|
622
|
+
ref,
|
|
623
|
+
className: cn(
|
|
624
|
+
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow cursor-pointer",
|
|
625
|
+
className
|
|
626
|
+
),
|
|
627
|
+
...props
|
|
628
|
+
}
|
|
629
|
+
));
|
|
630
|
+
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
631
|
+
var TabsContent = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
|
|
632
|
+
TabsPrimitive.Content,
|
|
633
|
+
{
|
|
634
|
+
ref,
|
|
635
|
+
className: cn(
|
|
636
|
+
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
637
|
+
className
|
|
638
|
+
),
|
|
639
|
+
...props
|
|
640
|
+
}
|
|
641
|
+
));
|
|
642
|
+
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
|
643
|
+
|
|
644
|
+
// src/components/Accordion.tsx
|
|
645
|
+
import * as React13 from "react";
|
|
646
|
+
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
647
|
+
import { ChevronDownIcon } from "@radix-ui/react-icons";
|
|
648
|
+
import { jsx as jsx15, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
649
|
+
var Accordion = AccordionPrimitive.Root;
|
|
650
|
+
var AccordionItem = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
|
|
651
|
+
AccordionPrimitive.Item,
|
|
652
|
+
{
|
|
653
|
+
ref,
|
|
654
|
+
className: cn("border-b", className),
|
|
655
|
+
...props
|
|
656
|
+
}
|
|
657
|
+
));
|
|
658
|
+
AccordionItem.displayName = "AccordionItem";
|
|
659
|
+
var AccordionTrigger = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx15(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs3(
|
|
660
|
+
AccordionPrimitive.Trigger,
|
|
661
|
+
{
|
|
662
|
+
ref,
|
|
663
|
+
className: cn(
|
|
664
|
+
"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
|
|
665
|
+
className
|
|
666
|
+
),
|
|
667
|
+
...props,
|
|
668
|
+
children: [
|
|
669
|
+
children,
|
|
670
|
+
/* @__PURE__ */ jsx15(ChevronDownIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" })
|
|
671
|
+
]
|
|
672
|
+
}
|
|
673
|
+
) }));
|
|
674
|
+
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
|
|
675
|
+
var AccordionContent = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx15(
|
|
676
|
+
AccordionPrimitive.Content,
|
|
677
|
+
{
|
|
678
|
+
ref,
|
|
679
|
+
className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
|
|
680
|
+
...props,
|
|
681
|
+
children: /* @__PURE__ */ jsx15("div", { className: cn("pb-4 pt-0", className), children })
|
|
682
|
+
}
|
|
683
|
+
));
|
|
684
|
+
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
|
|
685
|
+
|
|
686
|
+
// src/components/Slider.tsx
|
|
687
|
+
import * as React14 from "react";
|
|
688
|
+
import * as SliderPrimitive from "@radix-ui/react-slider";
|
|
689
|
+
import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
690
|
+
var Slider = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs4(
|
|
691
|
+
SliderPrimitive.Root,
|
|
692
|
+
{
|
|
693
|
+
ref,
|
|
694
|
+
className: cn(
|
|
695
|
+
"relative flex w-full touch-none select-none items-center",
|
|
696
|
+
className
|
|
697
|
+
),
|
|
698
|
+
...props,
|
|
699
|
+
children: [
|
|
700
|
+
/* @__PURE__ */ jsx16(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsx16(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
|
|
701
|
+
/* @__PURE__ */ jsx16(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border-2 border-primary bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })
|
|
702
|
+
]
|
|
703
|
+
}
|
|
704
|
+
));
|
|
705
|
+
Slider.displayName = SliderPrimitive.Root.displayName;
|
|
706
|
+
export {
|
|
707
|
+
Accordion,
|
|
708
|
+
AccordionContent,
|
|
709
|
+
AccordionItem,
|
|
710
|
+
AccordionTrigger,
|
|
711
|
+
Avatar,
|
|
712
|
+
AvatarFallback,
|
|
713
|
+
AvatarImage,
|
|
714
|
+
Badge,
|
|
715
|
+
Button,
|
|
716
|
+
Card,
|
|
717
|
+
CardContent,
|
|
718
|
+
CardDescription,
|
|
719
|
+
CardFooter,
|
|
720
|
+
CardHeader,
|
|
721
|
+
CardTitle,
|
|
722
|
+
Checkbox,
|
|
723
|
+
Dialog,
|
|
724
|
+
DialogBody,
|
|
725
|
+
DialogClose,
|
|
726
|
+
DialogContent,
|
|
727
|
+
DialogDescription,
|
|
728
|
+
DialogFooter,
|
|
729
|
+
DialogHeader,
|
|
730
|
+
DialogTitle,
|
|
731
|
+
Input,
|
|
732
|
+
Label,
|
|
733
|
+
PressableCard,
|
|
734
|
+
Progress,
|
|
735
|
+
Separator,
|
|
736
|
+
Skeleton,
|
|
737
|
+
SkeletonAvatar,
|
|
738
|
+
SkeletonCard,
|
|
739
|
+
SkeletonContainer,
|
|
740
|
+
SkeletonText,
|
|
741
|
+
SkeletonTitle,
|
|
742
|
+
Slider,
|
|
743
|
+
Switch,
|
|
744
|
+
Tabs,
|
|
745
|
+
TabsContent,
|
|
746
|
+
TabsList,
|
|
747
|
+
TabsTrigger,
|
|
748
|
+
Textarea,
|
|
749
|
+
badgeVariants,
|
|
750
|
+
buttonVariants,
|
|
751
|
+
cn,
|
|
752
|
+
getInitials
|
|
753
|
+
};
|
|
754
|
+
//# sourceMappingURL=index.js.map
|