@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.
@@ -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 };
@@ -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
- }: React.ComponentProps<"td">): _$react_jsx_runtime0.JSX.Element;
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", "[@media(hover:hover)]:[&:hover_button:hover]:bg-subtle", className),
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])]:pr-3", className),
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 align-middle", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-3", className),
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
  }
@@ -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-lg px-4 py-2",
25
- "text-muted-foreground",
26
- "[@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:hover:text-accent-foreground",
27
- "data-[state=active]:bg-accent data-[state=active]:text-accent-foreground"
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.2aef1f7",
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.11.0",
27
- "react": "^19.2.5",
28
- "react-dom": "^19.2.5",
29
- "react-hook-form": "^7.74.0",
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.2.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.5.0"
55
+ "tailwind-merge": "^3.6.0"
56
56
  },
57
57
  "devDependencies": {
58
58
  "@ladle/react": "^5.1.1",
59
- "@tailwindcss/postcss": "^4.2.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.11.0",
63
- "react-hook-form": "^7.74.0",
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.2.4",
67
- "tsdown": "^0.21.10",
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
  },