@alpic-ai/ui 0.0.0-staging.2aef1f7 → 0.0.0-staging.2e98566
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/form.d.mts +36 -1
- package/dist/components/form.mjs +111 -1
- package/dist/components/page-loader.d.mts +11 -0
- package/dist/components/page-loader.mjs +122 -0
- package/dist/components/shimmer-text.d.mts +12 -0
- package/dist/components/shimmer-text.mjs +22 -0
- package/dist/components/table.d.mts +10 -1
- package/dist/components/table.mjs +4 -4
- package/dist/components/tabs.mjs +4 -4
- package/dist/components/task-progress.d.mts +27 -0
- package/dist/components/task-progress.mjs +66 -0
- package/dist/components/wizard.d.mts +34 -0
- package/dist/components/wizard.mjs +46 -0
- package/package.json +12 -12
- package/src/components/form.tsx +161 -0
- package/src/components/page-loader.tsx +59 -0
- package/src/components/shimmer-text.tsx +23 -0
- package/src/components/table.tsx +17 -4
- package/src/components/tabs.tsx +4 -4
- package/src/components/task-progress.tsx +107 -0
- package/src/components/wizard.tsx +69 -0
- package/src/stories/form.stories.tsx +64 -2
- package/src/stories/tabs.stories.tsx +4 -2
- package/src/stories/task-progress.stories.tsx +81 -0
- package/src/stories/wizard.stories.tsx +64 -0
- package/src/styles/tokens.css +20 -4
|
@@ -115,5 +115,40 @@ declare function SelectField<TFieldValues extends FieldValues, TName extends Fie
|
|
|
115
115
|
options,
|
|
116
116
|
placeholder
|
|
117
117
|
}: SelectFieldProps<TFieldValues, TName>): _$react_jsx_runtime0.JSX.Element;
|
|
118
|
+
interface RadioFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends FormFieldBaseProps<TFieldValues, TName> {
|
|
119
|
+
options: SelectFieldOption[];
|
|
120
|
+
}
|
|
121
|
+
declare function RadioField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({
|
|
122
|
+
control,
|
|
123
|
+
name,
|
|
124
|
+
rules,
|
|
125
|
+
required,
|
|
126
|
+
label,
|
|
127
|
+
description,
|
|
128
|
+
tooltip,
|
|
129
|
+
options
|
|
130
|
+
}: RadioFieldProps<TFieldValues, TName>): _$react_jsx_runtime0.JSX.Element;
|
|
131
|
+
interface ChecklistFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends FormFieldBaseProps<TFieldValues, TName> {
|
|
132
|
+
options: SelectFieldOption[];
|
|
133
|
+
}
|
|
134
|
+
declare function ChecklistField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({
|
|
135
|
+
control,
|
|
136
|
+
name,
|
|
137
|
+
rules,
|
|
138
|
+
required,
|
|
139
|
+
label,
|
|
140
|
+
description,
|
|
141
|
+
tooltip,
|
|
142
|
+
options
|
|
143
|
+
}: ChecklistFieldProps<TFieldValues, TName>): _$react_jsx_runtime0.JSX.Element;
|
|
144
|
+
interface CheckboxFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends Omit<FormFieldBaseProps<TFieldValues, TName>, "required"> {}
|
|
145
|
+
declare function CheckboxField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({
|
|
146
|
+
control,
|
|
147
|
+
name,
|
|
148
|
+
rules,
|
|
149
|
+
label,
|
|
150
|
+
description,
|
|
151
|
+
tooltip
|
|
152
|
+
}: CheckboxFieldProps<TFieldValues, TName>): _$react_jsx_runtime0.JSX.Element;
|
|
118
153
|
//#endregion
|
|
119
|
-
export { Form, FormControl, FormDescription, FormField, FormFields, FormHeader, FormItem, FormLabel, FormMessage, InputField, SelectField, type SelectFieldOption, TextareaField, useFormField };
|
|
154
|
+
export { CheckboxField, ChecklistField, Form, FormControl, FormDescription, FormField, FormFields, FormHeader, FormItem, FormLabel, FormMessage, InputField, RadioField, SelectField, type SelectFieldOption, TextareaField, useFormField };
|
package/dist/components/form.mjs
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn } from "../lib/cn.mjs";
|
|
3
3
|
import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
|
|
4
|
+
import { Checkbox } from "./checkbox.mjs";
|
|
4
5
|
import { Label } from "./label.mjs";
|
|
5
6
|
import { Input } from "./input.mjs";
|
|
7
|
+
import { RadioGroup, RadioGroupItem } from "./radio-group.mjs";
|
|
6
8
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.mjs";
|
|
7
9
|
import { Textarea } from "./textarea.mjs";
|
|
8
10
|
import { Info } from "lucide-react";
|
|
@@ -188,5 +190,113 @@ function SelectField({ control, name, rules, required, label, description, toolt
|
|
|
188
190
|
] })
|
|
189
191
|
});
|
|
190
192
|
}
|
|
193
|
+
function RadioField({ control, name, rules, required, label, description, tooltip, options }) {
|
|
194
|
+
return /* @__PURE__ */ jsx(FormField, {
|
|
195
|
+
control,
|
|
196
|
+
name,
|
|
197
|
+
rules,
|
|
198
|
+
render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
|
|
199
|
+
label && /* @__PURE__ */ jsx(FormLabel, {
|
|
200
|
+
required,
|
|
201
|
+
tooltip,
|
|
202
|
+
children: label
|
|
203
|
+
}),
|
|
204
|
+
/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(RadioGroup, {
|
|
205
|
+
value: field.value ?? "",
|
|
206
|
+
onValueChange: field.onChange,
|
|
207
|
+
onBlur: field.onBlur,
|
|
208
|
+
children: options.map((option) => {
|
|
209
|
+
const itemId = `${field.name}-${option.value}`;
|
|
210
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
211
|
+
className: "flex items-center gap-2",
|
|
212
|
+
children: [/* @__PURE__ */ jsx(RadioGroupItem, {
|
|
213
|
+
id: itemId,
|
|
214
|
+
value: option.value,
|
|
215
|
+
disabled: option.disabled
|
|
216
|
+
}), /* @__PURE__ */ jsx(Label, {
|
|
217
|
+
htmlFor: itemId,
|
|
218
|
+
className: "type-text-sm font-normal",
|
|
219
|
+
children: option.label
|
|
220
|
+
})]
|
|
221
|
+
}, option.value);
|
|
222
|
+
})
|
|
223
|
+
}) }),
|
|
224
|
+
description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
|
|
225
|
+
/* @__PURE__ */ jsx(FormMessage, {})
|
|
226
|
+
] })
|
|
227
|
+
});
|
|
228
|
+
}
|
|
229
|
+
function ChecklistField({ control, name, rules, required, label, description, tooltip, options }) {
|
|
230
|
+
return /* @__PURE__ */ jsx(FormField, {
|
|
231
|
+
control,
|
|
232
|
+
name,
|
|
233
|
+
rules,
|
|
234
|
+
render: ({ field }) => {
|
|
235
|
+
const selected = Array.isArray(field.value) ? field.value : [];
|
|
236
|
+
const toggle = (value, checked) => {
|
|
237
|
+
if (checked) field.onChange([...selected, value]);
|
|
238
|
+
else field.onChange(selected.filter((existing) => existing !== value));
|
|
239
|
+
};
|
|
240
|
+
return /* @__PURE__ */ jsxs(FormItem, { children: [
|
|
241
|
+
label && /* @__PURE__ */ jsx(FormLabel, {
|
|
242
|
+
required,
|
|
243
|
+
tooltip,
|
|
244
|
+
children: label
|
|
245
|
+
}),
|
|
246
|
+
/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx("fieldset", {
|
|
247
|
+
className: "m-0 flex flex-col gap-2 border-0 p-0",
|
|
248
|
+
onBlur: field.onBlur,
|
|
249
|
+
children: options.map((option) => {
|
|
250
|
+
const itemId = `${field.name}-${option.value}`;
|
|
251
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
252
|
+
className: "flex items-start gap-2",
|
|
253
|
+
children: [/* @__PURE__ */ jsx(Checkbox, {
|
|
254
|
+
id: itemId,
|
|
255
|
+
checked: selected.includes(option.value),
|
|
256
|
+
onCheckedChange: (next) => toggle(option.value, Boolean(next)),
|
|
257
|
+
disabled: option.disabled
|
|
258
|
+
}), /* @__PURE__ */ jsx(Label, {
|
|
259
|
+
htmlFor: itemId,
|
|
260
|
+
className: "type-text-sm font-normal leading-tight",
|
|
261
|
+
children: option.label
|
|
262
|
+
})]
|
|
263
|
+
}, option.value);
|
|
264
|
+
})
|
|
265
|
+
}) }),
|
|
266
|
+
description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
|
|
267
|
+
/* @__PURE__ */ jsx(FormMessage, {})
|
|
268
|
+
] });
|
|
269
|
+
}
|
|
270
|
+
});
|
|
271
|
+
}
|
|
272
|
+
function CheckboxField({ control, name, rules, label, description, tooltip }) {
|
|
273
|
+
return /* @__PURE__ */ jsx(FormField, {
|
|
274
|
+
control,
|
|
275
|
+
name,
|
|
276
|
+
rules,
|
|
277
|
+
render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, {
|
|
278
|
+
className: "gap-1.5",
|
|
279
|
+
children: [
|
|
280
|
+
/* @__PURE__ */ jsxs("div", {
|
|
281
|
+
className: "flex items-start gap-2",
|
|
282
|
+
children: [/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Checkbox, {
|
|
283
|
+
checked: field.value ?? false,
|
|
284
|
+
onCheckedChange: (next) => field.onChange(Boolean(next)),
|
|
285
|
+
onBlur: field.onBlur
|
|
286
|
+
}) }), label && /* @__PURE__ */ jsx(FormLabel, {
|
|
287
|
+
tooltip,
|
|
288
|
+
className: "font-normal",
|
|
289
|
+
children: label
|
|
290
|
+
})]
|
|
291
|
+
}),
|
|
292
|
+
description && /* @__PURE__ */ jsx(FormDescription, {
|
|
293
|
+
className: "ml-6",
|
|
294
|
+
children: description
|
|
295
|
+
}),
|
|
296
|
+
/* @__PURE__ */ jsx(FormMessage, { className: "ml-6" })
|
|
297
|
+
]
|
|
298
|
+
})
|
|
299
|
+
});
|
|
300
|
+
}
|
|
191
301
|
//#endregion
|
|
192
|
-
export { Form, FormControl, FormDescription, FormField, FormFields, FormHeader, FormItem, FormLabel, FormMessage, InputField, SelectField, TextareaField, useFormField };
|
|
302
|
+
export { CheckboxField, ChecklistField, Form, FormControl, FormDescription, FormField, FormFields, FormHeader, FormItem, FormLabel, FormMessage, InputField, RadioField, SelectField, TextareaField, useFormField };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
+
|
|
3
|
+
//#region src/components/page-loader.d.ts
|
|
4
|
+
interface PageLoaderProps {
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
declare function PageLoader({
|
|
8
|
+
className
|
|
9
|
+
}: PageLoaderProps): _$react_jsx_runtime0.JSX.Element;
|
|
10
|
+
//#endregion
|
|
11
|
+
export { PageLoader, type PageLoaderProps };
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.mjs";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/page-loader.tsx
|
|
5
|
+
const CABLE_CAR_SVG = /* @__PURE__ */ jsxs("svg", {
|
|
6
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
7
|
+
viewBox: "0 0 120 130",
|
|
8
|
+
width: "240",
|
|
9
|
+
height: "260",
|
|
10
|
+
"aria-hidden": "true",
|
|
11
|
+
className: "block h-auto w-full",
|
|
12
|
+
children: [
|
|
13
|
+
/* @__PURE__ */ jsx("line", {
|
|
14
|
+
x1: "60",
|
|
15
|
+
y1: "3",
|
|
16
|
+
x2: "60",
|
|
17
|
+
y2: "58",
|
|
18
|
+
stroke: "#333",
|
|
19
|
+
strokeWidth: "4"
|
|
20
|
+
}),
|
|
21
|
+
/* @__PURE__ */ jsx("circle", {
|
|
22
|
+
cx: "60",
|
|
23
|
+
cy: "11",
|
|
24
|
+
r: "10",
|
|
25
|
+
fill: "#555"
|
|
26
|
+
}),
|
|
27
|
+
/* @__PURE__ */ jsx("rect", {
|
|
28
|
+
x: "5",
|
|
29
|
+
y: "58",
|
|
30
|
+
width: "110",
|
|
31
|
+
height: "64",
|
|
32
|
+
rx: "4",
|
|
33
|
+
fill: "#e90060"
|
|
34
|
+
}),
|
|
35
|
+
/* @__PURE__ */ jsx("rect", {
|
|
36
|
+
x: "5",
|
|
37
|
+
y: "58",
|
|
38
|
+
width: "110",
|
|
39
|
+
height: "20",
|
|
40
|
+
rx: "4",
|
|
41
|
+
fill: "#F5F0E8"
|
|
42
|
+
}),
|
|
43
|
+
/* @__PURE__ */ jsx("rect", {
|
|
44
|
+
x: "5",
|
|
45
|
+
y: "68",
|
|
46
|
+
width: "110",
|
|
47
|
+
height: "10",
|
|
48
|
+
fill: "#F5F0E8"
|
|
49
|
+
}),
|
|
50
|
+
/* @__PURE__ */ jsx("rect", {
|
|
51
|
+
x: "14",
|
|
52
|
+
y: "66",
|
|
53
|
+
width: "26",
|
|
54
|
+
height: "30",
|
|
55
|
+
rx: "2",
|
|
56
|
+
fill: "#5B8EC9",
|
|
57
|
+
stroke: "#C4B9A8",
|
|
58
|
+
strokeWidth: "1.5"
|
|
59
|
+
}),
|
|
60
|
+
/* @__PURE__ */ jsx("rect", {
|
|
61
|
+
x: "47",
|
|
62
|
+
y: "66",
|
|
63
|
+
width: "26",
|
|
64
|
+
height: "30",
|
|
65
|
+
rx: "2",
|
|
66
|
+
fill: "#5B8EC9",
|
|
67
|
+
stroke: "#C4B9A8",
|
|
68
|
+
strokeWidth: "1.5"
|
|
69
|
+
}),
|
|
70
|
+
/* @__PURE__ */ jsx("rect", {
|
|
71
|
+
x: "80",
|
|
72
|
+
y: "66",
|
|
73
|
+
width: "26",
|
|
74
|
+
height: "30",
|
|
75
|
+
rx: "2",
|
|
76
|
+
fill: "#5B8EC9",
|
|
77
|
+
stroke: "#C4B9A8",
|
|
78
|
+
strokeWidth: "1.5"
|
|
79
|
+
}),
|
|
80
|
+
/* @__PURE__ */ jsx("rect", {
|
|
81
|
+
x: "5",
|
|
82
|
+
y: "115",
|
|
83
|
+
width: "110",
|
|
84
|
+
height: "7",
|
|
85
|
+
rx: "3",
|
|
86
|
+
fill: "#9f0042"
|
|
87
|
+
})
|
|
88
|
+
]
|
|
89
|
+
});
|
|
90
|
+
function PageLoader({ className }) {
|
|
91
|
+
return /* @__PURE__ */ jsx("div", {
|
|
92
|
+
className: cn("flex min-h-screen items-center justify-center bg-background", className),
|
|
93
|
+
role: "status",
|
|
94
|
+
"aria-label": "Loading Alpic…",
|
|
95
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
96
|
+
className: "relative h-[120px] w-[200px]",
|
|
97
|
+
children: [
|
|
98
|
+
/* @__PURE__ */ jsx("div", {
|
|
99
|
+
className: "absolute top-[30px] left-0 h-[3px] w-full rounded-sm bg-[#6c6c77]",
|
|
100
|
+
style: {
|
|
101
|
+
transform: "rotate(-15deg)",
|
|
102
|
+
transformOrigin: "left center"
|
|
103
|
+
}
|
|
104
|
+
}),
|
|
105
|
+
/* @__PURE__ */ jsx("div", {
|
|
106
|
+
className: "absolute top-[33px] -left-[45px] w-[45px] motion-safe:animate-[alpic-ride_4s_linear_infinite]",
|
|
107
|
+
children: CABLE_CAR_SVG
|
|
108
|
+
}),
|
|
109
|
+
/* @__PURE__ */ jsx("div", {
|
|
110
|
+
className: "pointer-events-none absolute -top-[40px] -left-[45px] z-10 h-[200px] w-[95px]",
|
|
111
|
+
style: { background: "linear-gradient(to right, var(--color-background) 47%, transparent)" }
|
|
112
|
+
}),
|
|
113
|
+
/* @__PURE__ */ jsx("div", {
|
|
114
|
+
className: "pointer-events-none absolute -top-[40px] left-[142px] z-10 h-[200px] w-[95px]",
|
|
115
|
+
style: { background: "linear-gradient(to right, transparent, var(--color-background) 53%)" }
|
|
116
|
+
})
|
|
117
|
+
]
|
|
118
|
+
})
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
//#endregion
|
|
122
|
+
export { PageLoader };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
+
|
|
3
|
+
//#region src/components/shimmer-text.d.ts
|
|
4
|
+
declare function ShimmerText({
|
|
5
|
+
children,
|
|
6
|
+
className
|
|
7
|
+
}: {
|
|
8
|
+
children: string | number;
|
|
9
|
+
className?: string;
|
|
10
|
+
}): _$react_jsx_runtime0.JSX.Element;
|
|
11
|
+
//#endregion
|
|
12
|
+
export { ShimmerText };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.mjs";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/shimmer-text.tsx
|
|
5
|
+
const shimmerStyle = {
|
|
6
|
+
background: `linear-gradient(90deg, #0000 calc(50% - 60px), var(--color-foreground), #0000 calc(50% + 60px)), linear-gradient(color-mix(in oklab, var(--color-muted-foreground) 70%, transparent), color-mix(in oklab, var(--color-muted-foreground) 70%, transparent))`,
|
|
7
|
+
backgroundSize: "250% 100%, auto",
|
|
8
|
+
backgroundRepeat: "no-repeat, padding-box",
|
|
9
|
+
WebkitBackgroundClip: "text",
|
|
10
|
+
WebkitTextFillColor: "transparent",
|
|
11
|
+
backgroundClip: "text",
|
|
12
|
+
animation: "shimmer-text 2.5s linear infinite"
|
|
13
|
+
};
|
|
14
|
+
function ShimmerText({ children, className }) {
|
|
15
|
+
return /* @__PURE__ */ jsx("span", {
|
|
16
|
+
className: cn(className),
|
|
17
|
+
style: shimmerStyle,
|
|
18
|
+
children
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
//#endregion
|
|
22
|
+
export { ShimmerText };
|
|
@@ -26,10 +26,19 @@ declare function TableHead({
|
|
|
26
26
|
className,
|
|
27
27
|
...props
|
|
28
28
|
}: React.ComponentProps<"th">): _$react_jsx_runtime0.JSX.Element;
|
|
29
|
+
interface TableCellProps extends React.ComponentProps<"td"> {
|
|
30
|
+
/**
|
|
31
|
+
* When true, the cell renders edge-to-edge so the child can act as the
|
|
32
|
+
* interactive surface (e.g. a button or popover trigger filling the cell).
|
|
33
|
+
* Defaults to false (standard padded cell).
|
|
34
|
+
*/
|
|
35
|
+
interactive?: boolean;
|
|
36
|
+
}
|
|
29
37
|
declare function TableCell({
|
|
30
38
|
className,
|
|
39
|
+
interactive,
|
|
31
40
|
...props
|
|
32
|
-
}:
|
|
41
|
+
}: TableCellProps): _$react_jsx_runtime0.JSX.Element;
|
|
33
42
|
declare function TableCaption({
|
|
34
43
|
className,
|
|
35
44
|
...props
|
|
@@ -36,21 +36,21 @@ function TableFooter({ className, ...props }) {
|
|
|
36
36
|
function TableRow({ className, ...props }) {
|
|
37
37
|
return /* @__PURE__ */ jsx("tr", {
|
|
38
38
|
"data-slot": "table-row",
|
|
39
|
-
className: cn("border-b border-border-secondary transition-colors", "data-[state=selected]:bg-muted", "[@media(hover:hover)]:hover:bg-background-hover dark:[@media(hover:hover)]:hover:bg-muted",
|
|
39
|
+
className: cn("border-b border-border-secondary transition-colors", "data-[state=selected]:bg-muted", "[@media(hover:hover)]:hover:bg-background-hover dark:[@media(hover:hover)]:hover:bg-muted", className),
|
|
40
40
|
...props
|
|
41
41
|
});
|
|
42
42
|
}
|
|
43
43
|
function TableHead({ className, ...props }) {
|
|
44
44
|
return /* @__PURE__ */ jsx("th", {
|
|
45
45
|
"data-slot": "table-head",
|
|
46
|
-
className: cn("h-11 px-6 py-3 bg-muted text-left align-middle type-text-xs font-semibold text-placeholder dark:text-subtle-foreground whitespace-nowrap", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:
|
|
46
|
+
className: cn("h-11 px-6 py-3 bg-muted text-left align-middle type-text-xs font-semibold text-placeholder dark:text-subtle-foreground whitespace-nowrap", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:px-0", className),
|
|
47
47
|
...props
|
|
48
48
|
});
|
|
49
49
|
}
|
|
50
|
-
function TableCell({ className, ...props }) {
|
|
50
|
+
function TableCell({ className, interactive = false, ...props }) {
|
|
51
51
|
return /* @__PURE__ */ jsx("td", {
|
|
52
52
|
"data-slot": "table-cell",
|
|
53
|
-
className: cn("px-6 py-2
|
|
53
|
+
className: cn("align-middle", interactive ? "h-px p-0" : "px-6 py-2", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:px-0", className),
|
|
54
54
|
...props
|
|
55
55
|
});
|
|
56
56
|
}
|
package/dist/components/tabs.mjs
CHANGED
|
@@ -21,10 +21,10 @@ const tabsTriggerVariants = cva([
|
|
|
21
21
|
"data-[state=active]:border-b-2 data-[state=active]:border-foreground data-[state=active]:text-foreground"
|
|
22
22
|
],
|
|
23
23
|
pill: [
|
|
24
|
-
"rounded-
|
|
25
|
-
"text-
|
|
26
|
-
"[@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:hover:text-
|
|
27
|
-
"data-[state=active]:bg-accent data-[state=active]:text-
|
|
24
|
+
"rounded-md px-2 py-1.5",
|
|
25
|
+
"text-quaternary-foreground",
|
|
26
|
+
"[@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:hover:text-muted-foreground",
|
|
27
|
+
"data-[state=active]:bg-accent data-[state=active]:text-muted-foreground"
|
|
28
28
|
]
|
|
29
29
|
} },
|
|
30
30
|
defaultVariants: { variant: "default" }
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
+
|
|
3
|
+
//#region src/components/task-progress.d.ts
|
|
4
|
+
type TaskProgressStatus = "pending" | "running" | "done";
|
|
5
|
+
interface TaskProgressStep {
|
|
6
|
+
id: string;
|
|
7
|
+
label: string;
|
|
8
|
+
status: TaskProgressStatus;
|
|
9
|
+
}
|
|
10
|
+
interface TaskProgressProps extends Omit<React.ComponentProps<"div">, "children"> {
|
|
11
|
+
steps: readonly TaskProgressStep[];
|
|
12
|
+
trailingLabel?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Optional mount-time stagger: each row fades + slides in with `animation-delay = index × stepRevealDelayMs`.
|
|
15
|
+
* Pure CSS, runs once on mount. Omit for no animation.
|
|
16
|
+
*/
|
|
17
|
+
stepRevealDelayMs?: number;
|
|
18
|
+
}
|
|
19
|
+
declare function TaskProgress({
|
|
20
|
+
steps,
|
|
21
|
+
trailingLabel,
|
|
22
|
+
stepRevealDelayMs,
|
|
23
|
+
className,
|
|
24
|
+
...props
|
|
25
|
+
}: TaskProgressProps): _$react_jsx_runtime0.JSX.Element;
|
|
26
|
+
//#endregion
|
|
27
|
+
export { TaskProgress, type TaskProgressStatus, type TaskProgressStep };
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.mjs";
|
|
3
|
+
import { Separator } from "./separator.mjs";
|
|
4
|
+
import { CheckIcon } from "lucide-react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
//#region src/components/task-progress.tsx
|
|
7
|
+
const REVEAL_CLASSES = "animate-in fade-in slide-in-from-bottom-2 duration-300";
|
|
8
|
+
function TaskProgress({ steps, trailingLabel, stepRevealDelayMs, className, ...props }) {
|
|
9
|
+
const total = steps.length;
|
|
10
|
+
const doneCount = steps.filter((step) => step.status === "done").length;
|
|
11
|
+
const percent = total > 0 ? Math.round(doneCount / total * 100) : 0;
|
|
12
|
+
const stagger = stepRevealDelayMs != null;
|
|
13
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
14
|
+
className: cn("flex flex-col gap-4", className),
|
|
15
|
+
...props,
|
|
16
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
17
|
+
className: "bg-muted h-2 w-full overflow-hidden rounded-full",
|
|
18
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
19
|
+
className: "h-full rounded-full bg-success transition-all duration-500",
|
|
20
|
+
style: { width: `${percent}%` }
|
|
21
|
+
})
|
|
22
|
+
}), /* @__PURE__ */ jsxs("div", { children: [steps.map((step, idx) => /* @__PURE__ */ jsxs("div", {
|
|
23
|
+
className: stagger ? REVEAL_CLASSES : void 0,
|
|
24
|
+
style: stagger ? {
|
|
25
|
+
animationDelay: `${idx * (stepRevealDelayMs ?? 0)}ms`,
|
|
26
|
+
animationFillMode: "both"
|
|
27
|
+
} : void 0,
|
|
28
|
+
children: [/* @__PURE__ */ jsx(TaskProgressRow, {
|
|
29
|
+
label: step.label,
|
|
30
|
+
status: step.status
|
|
31
|
+
}), idx < steps.length - 1 && /* @__PURE__ */ jsx(Separator, {})]
|
|
32
|
+
}, step.id)), trailingLabel && /* @__PURE__ */ jsxs("div", {
|
|
33
|
+
className: stagger ? REVEAL_CLASSES : void 0,
|
|
34
|
+
children: [/* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsx(TaskProgressRow, {
|
|
35
|
+
label: trailingLabel,
|
|
36
|
+
status: "running",
|
|
37
|
+
muted: true
|
|
38
|
+
})]
|
|
39
|
+
})] })]
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
function TaskProgressRow({ label, status, muted }) {
|
|
43
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
44
|
+
className: "flex items-center justify-between py-2",
|
|
45
|
+
children: [
|
|
46
|
+
/* @__PURE__ */ jsx("span", {
|
|
47
|
+
className: cn("type-text-sm", muted && "text-muted-foreground"),
|
|
48
|
+
children: label
|
|
49
|
+
}),
|
|
50
|
+
status === "done" && /* @__PURE__ */ jsxs("span", {
|
|
51
|
+
className: "flex items-center gap-1 type-text-sm text-success",
|
|
52
|
+
children: [/* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" }), /* @__PURE__ */ jsx("span", { children: "done" })]
|
|
53
|
+
}),
|
|
54
|
+
status === "running" && /* @__PURE__ */ jsxs("span", {
|
|
55
|
+
className: "flex items-center gap-1.5 type-text-sm text-warning",
|
|
56
|
+
children: [/* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-warning" }), /* @__PURE__ */ jsx("span", { children: "running…" })]
|
|
57
|
+
}),
|
|
58
|
+
status === "pending" && /* @__PURE__ */ jsxs("span", {
|
|
59
|
+
className: "flex items-center gap-1.5 type-text-sm text-muted-foreground",
|
|
60
|
+
children: [/* @__PURE__ */ jsx("span", { className: "size-2 rounded-full border border-muted-foreground" }), /* @__PURE__ */ jsx("span", { children: "pending" })]
|
|
61
|
+
})
|
|
62
|
+
]
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
//#endregion
|
|
66
|
+
export { TaskProgress };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/components/wizard.d.ts
|
|
5
|
+
interface WizardStep {
|
|
6
|
+
id: string;
|
|
7
|
+
label: string;
|
|
8
|
+
}
|
|
9
|
+
interface WizardStepsProps {
|
|
10
|
+
steps: readonly WizardStep[];
|
|
11
|
+
activeIdx: number;
|
|
12
|
+
onSelect: (idx: number) => void;
|
|
13
|
+
ariaLabel?: string;
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
declare function WizardSteps({
|
|
17
|
+
steps,
|
|
18
|
+
activeIdx,
|
|
19
|
+
onSelect,
|
|
20
|
+
ariaLabel,
|
|
21
|
+
className
|
|
22
|
+
}: WizardStepsProps): _$react_jsx_runtime0.JSX.Element;
|
|
23
|
+
interface WizardProgressProps extends React.ComponentProps<"div"> {
|
|
24
|
+
current: number;
|
|
25
|
+
total: number;
|
|
26
|
+
}
|
|
27
|
+
declare function WizardProgress({
|
|
28
|
+
current,
|
|
29
|
+
total,
|
|
30
|
+
className,
|
|
31
|
+
...props
|
|
32
|
+
}: WizardProgressProps): _$react_jsx_runtime0.JSX.Element;
|
|
33
|
+
//#endregion
|
|
34
|
+
export { WizardProgress, type WizardStep, WizardSteps };
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.mjs";
|
|
3
|
+
import { TabsNav, TabsNavList, TabsNavTrigger } from "./tabs.mjs";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
//#region src/components/wizard.tsx
|
|
6
|
+
function WizardSteps({ steps, activeIdx, onSelect, ariaLabel = "Wizard steps", className }) {
|
|
7
|
+
return /* @__PURE__ */ jsx(TabsNav, {
|
|
8
|
+
orientation: "vertical",
|
|
9
|
+
"aria-label": ariaLabel,
|
|
10
|
+
className,
|
|
11
|
+
children: /* @__PURE__ */ jsx(TabsNavList, { children: steps.map((step, idx) => /* @__PURE__ */ jsx(TabsNavTrigger, {
|
|
12
|
+
active: idx === activeIdx,
|
|
13
|
+
asChild: true,
|
|
14
|
+
children: /* @__PURE__ */ jsx("button", {
|
|
15
|
+
type: "button",
|
|
16
|
+
onClick: () => onSelect(idx),
|
|
17
|
+
className: "w-full justify-start text-left",
|
|
18
|
+
children: step.label
|
|
19
|
+
})
|
|
20
|
+
}, step.id)) })
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
function WizardProgress({ current, total, className, ...props }) {
|
|
24
|
+
const percent = total > 0 ? Math.round(current / total * 100) : 0;
|
|
25
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
26
|
+
className: cn("flex flex-col gap-1.5 px-2", className),
|
|
27
|
+
...props,
|
|
28
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
29
|
+
className: "text-muted-foreground flex items-center justify-between text-xs",
|
|
30
|
+
children: [/* @__PURE__ */ jsxs("span", { children: [
|
|
31
|
+
"Step ",
|
|
32
|
+
current,
|
|
33
|
+
"/",
|
|
34
|
+
total
|
|
35
|
+
] }), /* @__PURE__ */ jsxs("span", { children: [percent, "%"] })]
|
|
36
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
37
|
+
className: "bg-muted h-1.5 overflow-hidden rounded-full",
|
|
38
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
39
|
+
className: "bg-primary h-full transition-all",
|
|
40
|
+
style: { width: `${percent}%` }
|
|
41
|
+
})
|
|
42
|
+
})]
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
//#endregion
|
|
46
|
+
export { WizardProgress, WizardSteps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alpic-ai/ui",
|
|
3
|
-
"version": "0.0.0-staging.
|
|
3
|
+
"version": "0.0.0-staging.2e98566",
|
|
4
4
|
"description": "Alpic design system — shared UI components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -23,12 +23,12 @@
|
|
|
23
23
|
"src"
|
|
24
24
|
],
|
|
25
25
|
"peerDependencies": {
|
|
26
|
-
"lucide-react": "^1.
|
|
27
|
-
"react": "^19.2.
|
|
28
|
-
"react-dom": "^19.2.
|
|
29
|
-
"react-hook-form": "^7.
|
|
26
|
+
"lucide-react": "^1.14.0",
|
|
27
|
+
"react": "^19.2.6",
|
|
28
|
+
"react-dom": "^19.2.6",
|
|
29
|
+
"react-hook-form": "^7.75.0",
|
|
30
30
|
"sonner": "^2.0.7",
|
|
31
|
-
"tailwindcss": "^4.
|
|
31
|
+
"tailwindcss": "^4.3.0",
|
|
32
32
|
"tw-animate-css": "^1.4.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
@@ -52,19 +52,19 @@
|
|
|
52
52
|
"class-variance-authority": "^0.7.1",
|
|
53
53
|
"clsx": "^2.1.1",
|
|
54
54
|
"cmdk": "^1.1.1",
|
|
55
|
-
"tailwind-merge": "^3.
|
|
55
|
+
"tailwind-merge": "^3.6.0"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
58
|
"@ladle/react": "^5.1.1",
|
|
59
|
-
"@tailwindcss/postcss": "^4.
|
|
59
|
+
"@tailwindcss/postcss": "^4.3.0",
|
|
60
60
|
"@types/react": "19.2.14",
|
|
61
61
|
"@types/react-dom": "19.2.3",
|
|
62
|
-
"lucide-react": "^1.
|
|
63
|
-
"react-hook-form": "^7.
|
|
62
|
+
"lucide-react": "^1.14.0",
|
|
63
|
+
"react-hook-form": "^7.75.0",
|
|
64
64
|
"shx": "^0.4.0",
|
|
65
65
|
"sonner": "^2.0.7",
|
|
66
|
-
"tailwindcss": "^4.
|
|
67
|
-
"tsdown": "^0.
|
|
66
|
+
"tailwindcss": "^4.3.0",
|
|
67
|
+
"tsdown": "^0.22.0",
|
|
68
68
|
"tw-animate-css": "^1.4.0",
|
|
69
69
|
"typescript": "^6.0.3"
|
|
70
70
|
},
|