@alpic-ai/ui 0.0.0-dev.fffc79a → 0.0.0-dev.gd42dbb4

package/dist/components/badge.d.mts

@@ -4,7 +4,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "warning" | "success" | "secondary" | "primary" | "error" | null | undefined;
+  variant?: "warning" | "success" | "primary" | "secondary" | "error" | null | undefined;
   size?: "sm" | "md" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface BadgeProps extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {}

package/dist/components/button.d.mts

@@ -5,7 +5,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "destructive" | "secondary" | "primary" | "tertiary" | "link" | "link-muted" | "cta" | null | undefined;
+  variant?: "destructive" | "primary" | "secondary" | "tertiary" | "link" | "link-muted" | "cta" | null | undefined;
   size?: "default" | "icon" | "icon-rounded" | "pill" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeof buttonVariants> {

package/dist/components/form.d.mts

@@ -115,5 +115,40 @@ declare function SelectField<TFieldValues extends FieldValues, TName extends Fie
   options,
   placeholder
 }: SelectFieldProps<TFieldValues, TName>): _$react_jsx_runtime0.JSX.Element;
+interface RadioFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends FormFieldBaseProps<TFieldValues, TName> {
+  options: SelectFieldOption[];
+}
+declare function RadioField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({
+  control,
+  name,
+  rules,
+  required,
+  label,
+  description,
+  tooltip,
+  options
+}: RadioFieldProps<TFieldValues, TName>): _$react_jsx_runtime0.JSX.Element;
+interface ChecklistFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends FormFieldBaseProps<TFieldValues, TName> {
+  options: SelectFieldOption[];
+}
+declare function ChecklistField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({
+  control,
+  name,
+  rules,
+  required,
+  label,
+  description,
+  tooltip,
+  options
+}: ChecklistFieldProps<TFieldValues, TName>): _$react_jsx_runtime0.JSX.Element;
+interface CheckboxFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends Omit<FormFieldBaseProps<TFieldValues, TName>, "required"> {}
+declare function CheckboxField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({
+  control,
+  name,
+  rules,
+  label,
+  description,
+  tooltip
+}: CheckboxFieldProps<TFieldValues, TName>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Form, FormControl, FormDescription, FormField, FormFields, FormHeader, FormItem, FormLabel, FormMessage, InputField, SelectField, type SelectFieldOption, TextareaField, useFormField };
+export { CheckboxField, ChecklistField, Form, FormControl, FormDescription, FormField, FormFields, FormHeader, FormItem, FormLabel, FormMessage, InputField, RadioField, SelectField, type SelectFieldOption, TextareaField, useFormField };

package/dist/components/form.mjs

@@ -1,8 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
+import { Checkbox } from "./checkbox.mjs";
 import { Label } from "./label.mjs";
 import { Input } from "./input.mjs";
+import { RadioGroup, RadioGroupItem } from "./radio-group.mjs";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.mjs";
 import { Textarea } from "./textarea.mjs";
 import { Info } from "lucide-react";
@@ -88,7 +90,7 @@ function FormDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "form-description",
 		id: formDescriptionId,
-		className: cn("text-muted-foreground text-sm", className),
+		className: cn("text-muted-foreground type-text-sm whitespace-pre-line", className),
 		...props
 	});
 }
@@ -134,11 +136,11 @@ function InputField({ control, name, rules, required, label, description, toolti
 				tooltip,
 				children: label
 			}),
+			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
 			/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
 				...inputProps,
 				...field
 			}) }),
-			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
 			/* @__PURE__ */ jsx(FormMessage, {})
 		] })
 	});
@@ -154,11 +156,11 @@ function TextareaField({ control, name, rules, required, label, description, too
 				tooltip,
 				children: label
 			}),
+			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
 			/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Textarea, {
 				...textareaProps,
 				...field
 			}) }),
-			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
 			/* @__PURE__ */ jsx(FormMessage, {})
 		] })
 	});
@@ -174,6 +176,7 @@ function SelectField({ control, name, rules, required, label, description, toolt
 				tooltip,
 				children: label
 			}),
+			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
 			/* @__PURE__ */ jsxs(Select, {
 				value: field.value,
 				onValueChange: field.onChange,
@@ -183,10 +186,117 @@ function SelectField({ control, name, rules, required, label, description, toolt
 					children: option.label
 				}, option.value)) })]
 			}),
+			/* @__PURE__ */ jsx(FormMessage, {})
+		] })
+	});
+}
+function RadioField({ control, name, rules, required, label, description, tooltip, options }) {
+	return /* @__PURE__ */ jsx(FormField, {
+		control,
+		name,
+		rules,
+		render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+			label && /* @__PURE__ */ jsx(FormLabel, {
+				required,
+				tooltip,
+				children: label
+			}),
 			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+			/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(RadioGroup, {
+				value: field.value ?? "",
+				onValueChange: field.onChange,
+				onBlur: field.onBlur,
+				children: options.map((option) => {
+					const itemId = `${field.name}-${option.value}`;
+					return /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(RadioGroupItem, {
+							id: itemId,
+							value: option.value,
+							disabled: option.disabled
+						}), /* @__PURE__ */ jsx(Label, {
+							htmlFor: itemId,
+							className: "type-text-sm font-normal",
+							children: option.label
+						})]
+					}, option.value);
+				})
+			}) }),
 			/* @__PURE__ */ jsx(FormMessage, {})
 		] })
 	});
 }
+function ChecklistField({ control, name, rules, required, label, description, tooltip, options }) {
+	return /* @__PURE__ */ jsx(FormField, {
+		control,
+		name,
+		rules,
+		render: ({ field }) => {
+			const selected = Array.isArray(field.value) ? field.value : [];
+			const toggle = (value, checked) => {
+				if (checked) field.onChange([...selected, value]);
+				else field.onChange(selected.filter((existing) => existing !== value));
+			};
+			return /* @__PURE__ */ jsxs(FormItem, { children: [
+				label && /* @__PURE__ */ jsx(FormLabel, {
+					required,
+					tooltip,
+					children: label
+				}),
+				description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+				/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx("fieldset", {
+					className: "m-0 flex flex-col gap-2 border-0 p-0",
+					onBlur: field.onBlur,
+					children: options.map((option) => {
+						const itemId = `${field.name}-${option.value}`;
+						return /* @__PURE__ */ jsxs("div", {
+							className: "flex items-start gap-2",
+							children: [/* @__PURE__ */ jsx(Checkbox, {
+								id: itemId,
+								checked: selected.includes(option.value),
+								onCheckedChange: (next) => toggle(option.value, Boolean(next)),
+								disabled: option.disabled
+							}), /* @__PURE__ */ jsx(Label, {
+								htmlFor: itemId,
+								className: "type-text-sm font-normal leading-tight",
+								children: option.label
+							})]
+						}, option.value);
+					})
+				}) }),
+				/* @__PURE__ */ jsx(FormMessage, {})
+			] });
+		}
+	});
+}
+function CheckboxField({ control, name, rules, label, description, tooltip }) {
+	return /* @__PURE__ */ jsx(FormField, {
+		control,
+		name,
+		rules,
+		render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, {
+			className: "gap-1.5",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-start gap-2",
+					children: [/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Checkbox, {
+						checked: field.value ?? false,
+						onCheckedChange: (next) => field.onChange(Boolean(next)),
+						onBlur: field.onBlur
+					}) }), label && /* @__PURE__ */ jsx(FormLabel, {
+						tooltip,
+						className: "font-normal",
+						children: label
+					})]
+				}),
+				description && /* @__PURE__ */ jsx(FormDescription, {
+					className: "ml-6",
+					children: description
+				}),
+				/* @__PURE__ */ jsx(FormMessage, { className: "ml-6" })
+			]
+		})
+	});
+}
 //#endregion
-export { Form, FormControl, FormDescription, FormField, FormFields, FormHeader, FormItem, FormLabel, FormMessage, InputField, SelectField, TextareaField, useFormField };
+export { CheckboxField, ChecklistField, Form, FormControl, FormDescription, FormField, FormFields, FormHeader, FormItem, FormLabel, FormMessage, InputField, RadioField, SelectField, TextareaField, useFormField };

package/dist/components/shimmer-text.d.mts

@@ -0,0 +1,12 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/shimmer-text.d.ts
+declare function ShimmerText({
+  children,
+  className
+}: {
+  children: string | number;
+  className?: string;
+}): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ShimmerText };

package/dist/components/shimmer-text.mjs

@@ -0,0 +1,22 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/shimmer-text.tsx
+const shimmerStyle = {
+	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))`,
+	backgroundSize: "250% 100%, auto",
+	backgroundRepeat: "no-repeat, padding-box",
+	WebkitBackgroundClip: "text",
+	WebkitTextFillColor: "transparent",
+	backgroundClip: "text",
+	animation: "shimmer-text 2.5s linear infinite"
+};
+function ShimmerText({ children, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(className),
+		style: shimmerStyle,
+		children
+	});
+}
+//#endregion
+export { ShimmerText };

package/dist/components/spinner.d.mts

@@ -4,7 +4,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/spinner.d.ts
 declare const spinnerVariants: (props?: ({
-  variant?: "secondary" | "primary" | null | undefined;
+  variant?: "primary" | "secondary" | null | undefined;
   size?: "sm" | "md" | "lg" | "xl" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface SpinnerProps extends Omit<React.ComponentProps<"svg">, "children">, VariantProps<typeof spinnerVariants> {}

package/dist/components/table.mjs

@@ -36,21 +36,21 @@ function TableFooter({ className, ...props }) {
 function TableRow({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tr", {
 		"data-slot": "table-row",
-		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),
+		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),
 		...props
 	});
 }
 function TableHead({ className, ...props }) {
 	return /* @__PURE__ */ jsx("th", {
 		"data-slot": "table-head",
-		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),
+		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),
 		...props
 	});
 }
 function TableCell({ className, interactive = false, ...props }) {
 	return /* @__PURE__ */ jsx("td", {
 		"data-slot": "table-cell",
-		className: cn("align-middle", interactive ? "h-px p-0" : "px-6 py-2", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-3", className),
+		className: cn("align-middle", interactive ? "h-px p-0" : "px-6 py-2", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:px-0", className),
 		...props
 	});
 }

package/dist/components/tabs.mjs

@@ -21,10 +21,10 @@ const tabsTriggerVariants = cva([
 			"data-[state=active]:border-b-2 data-[state=active]:border-foreground data-[state=active]:text-foreground"
 		],
 		pill: [
-			"rounded-lg px-4 py-2",
-			"text-muted-foreground",
-			"[@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:hover:text-accent-foreground",
-			"data-[state=active]:bg-accent data-[state=active]:text-accent-foreground"
+			"rounded-md px-2 py-1.5",
+			"text-quaternary-foreground",
+			"[@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:hover:text-muted-foreground",
+			"data-[state=active]:bg-accent data-[state=active]:text-muted-foreground"
 		]
 	} },
 	defaultVariants: { variant: "default" }

package/dist/components/task-progress.d.mts

@@ -0,0 +1,27 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/task-progress.d.ts
+type TaskProgressStatus = "pending" | "running" | "done";
+interface TaskProgressStep {
+  id: string;
+  label: string;
+  status: TaskProgressStatus;
+}
+interface TaskProgressProps extends Omit<React.ComponentProps<"div">, "children"> {
+  steps: readonly TaskProgressStep[];
+  trailingLabel?: string;
+  /**
+   * Optional mount-time stagger: each row fades + slides in with `animation-delay = index × stepRevealDelayMs`.
+   * Pure CSS, runs once on mount. Omit for no animation.
+   */
+  stepRevealDelayMs?: number;
+}
+declare function TaskProgress({
+  steps,
+  trailingLabel,
+  stepRevealDelayMs,
+  className,
+  ...props
+}: TaskProgressProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TaskProgress, type TaskProgressStatus, type TaskProgressStep };

package/dist/components/task-progress.mjs

@@ -0,0 +1,66 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { Separator } from "./separator.mjs";
+import { CheckIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/task-progress.tsx
+const REVEAL_CLASSES = "animate-in fade-in slide-in-from-bottom-2 duration-300";
+function TaskProgress({ steps, trailingLabel, stepRevealDelayMs, className, ...props }) {
+	const total = steps.length;
+	const doneCount = steps.filter((step) => step.status === "done").length;
+	const percent = total > 0 ? Math.round(doneCount / total * 100) : 0;
+	const stagger = stepRevealDelayMs != null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "bg-muted h-2 w-full overflow-hidden rounded-full",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "h-full rounded-full bg-success transition-all duration-500",
+				style: { width: `${percent}%` }
+			})
+		}), /* @__PURE__ */ jsxs("div", { children: [steps.map((step, idx) => /* @__PURE__ */ jsxs("div", {
+			className: stagger ? REVEAL_CLASSES : void 0,
+			style: stagger ? {
+				animationDelay: `${idx * (stepRevealDelayMs ?? 0)}ms`,
+				animationFillMode: "both"
+			} : void 0,
+			children: [/* @__PURE__ */ jsx(TaskProgressRow, {
+				label: step.label,
+				status: step.status
+			}), idx < steps.length - 1 && /* @__PURE__ */ jsx(Separator, {})]
+		}, step.id)), trailingLabel && /* @__PURE__ */ jsxs("div", {
+			className: stagger ? REVEAL_CLASSES : void 0,
+			children: [/* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsx(TaskProgressRow, {
+				label: trailingLabel,
+				status: "running",
+				muted: true
+			})]
+		})] })]
+	});
+}
+function TaskProgressRow({ label, status, muted }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between py-2",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn("type-text-sm", muted && "text-muted-foreground"),
+				children: label
+			}),
+			status === "done" && /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1 type-text-sm text-success",
+				children: [/* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" }), /* @__PURE__ */ jsx("span", { children: "done" })]
+			}),
+			status === "running" && /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1.5 type-text-sm text-warning",
+				children: [/* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-warning" }), /* @__PURE__ */ jsx("span", { children: "running…" })]
+			}),
+			status === "pending" && /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1.5 type-text-sm text-muted-foreground",
+				children: [/* @__PURE__ */ jsx("span", { className: "size-2 rounded-full border border-muted-foreground" }), /* @__PURE__ */ jsx("span", { children: "pending" })]
+			})
+		]
+	});
+}
+//#endregion
+export { TaskProgress };

package/dist/components/tooltip.mjs

@@ -26,7 +26,7 @@ function TooltipContent({ className, sideOffset = 6, children, ...props }) {
 	return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(TooltipPrimitive.Content, {
 		"data-slot": "tooltip-content",
 		sideOffset,
-		className: cn("bg-inverted text-inverted-foreground dark:bg-subtle dark:text-foreground", "z-50 w-fit rounded-md px-3 py-2 shadow-lg dark:shadow-none dark:drop-shadow-[0_0_0.5px_var(--color-border)]", "type-text-xs font-semibold text-balance text-center", "animate-in fade-in-0 zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "origin-(--radix-tooltip-content-transform-origin)", className),
+		className: cn("bg-inverted text-inverted-foreground dark:bg-subtle dark:text-foreground", "z-50 w-fit rounded-md px-3 py-2 shadow-lg dark:shadow-none dark:drop-shadow-[0_0_0.5px_var(--color-border)]", "type-text-xs font-semibold text-balance text-center whitespace-pre-line", "animate-in fade-in-0 zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "origin-(--radix-tooltip-content-transform-origin)", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-inverted fill-inverted dark:bg-subtle dark:fill-subtle z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })]
 	}) });

package/dist/components/wizard.d.mts

@@ -0,0 +1,34 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
+
+//#region src/components/wizard.d.ts
+interface WizardStep {
+  id: string;
+  label: string;
+}
+interface WizardStepsProps {
+  steps: readonly WizardStep[];
+  activeIdx: number;
+  onSelect: (idx: number) => void;
+  ariaLabel?: string;
+  className?: string;
+}
+declare function WizardSteps({
+  steps,
+  activeIdx,
+  onSelect,
+  ariaLabel,
+  className
+}: WizardStepsProps): _$react_jsx_runtime0.JSX.Element;
+interface WizardProgressProps extends React.ComponentProps<"div"> {
+  current: number;
+  total: number;
+}
+declare function WizardProgress({
+  current,
+  total,
+  className,
+  ...props
+}: WizardProgressProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { WizardProgress, type WizardStep, WizardSteps };

package/dist/components/wizard.mjs

@@ -0,0 +1,46 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { TabsNav, TabsNavList, TabsNavTrigger } from "./tabs.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/wizard.tsx
+function WizardSteps({ steps, activeIdx, onSelect, ariaLabel = "Wizard steps", className }) {
+	return /* @__PURE__ */ jsx(TabsNav, {
+		orientation: "vertical",
+		"aria-label": ariaLabel,
+		className,
+		children: /* @__PURE__ */ jsx(TabsNavList, { children: steps.map((step, idx) => /* @__PURE__ */ jsx(TabsNavTrigger, {
+			active: idx === activeIdx,
+			asChild: true,
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => onSelect(idx),
+				className: "w-full justify-start text-left",
+				children: step.label
+			})
+		}, step.id)) })
+	});
+}
+function WizardProgress({ current, total, className, ...props }) {
+	const percent = total > 0 ? Math.round(current / total * 100) : 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5 px-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground flex items-center justify-between text-xs",
+			children: [/* @__PURE__ */ jsxs("span", { children: [
+				"Step ",
+				current,
+				"/",
+				total
+			] }), /* @__PURE__ */ jsxs("span", { children: [percent, "%"] })]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "bg-muted h-1.5 overflow-hidden rounded-full",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "bg-primary h-full transition-all",
+				style: { width: `${percent}%` }
+			})
+		})]
+	});
+}
+//#endregion
+export { WizardProgress, WizardSteps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "0.0.0-dev.fffc79a",
+  "version": "0.0.0-dev.gd42dbb4",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {
@@ -23,12 +23,12 @@
     "src"
   ],
   "peerDependencies": {
-    "lucide-react": "^1.11.0",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "react-hook-form": "^7.74.0",
+    "lucide-react": "^1.14.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-hook-form": "^7.75.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.2.4",
+    "tailwindcss": "^4.3.0",
     "tw-animate-css": "^1.4.0"
   },
   "dependencies": {
@@ -52,19 +52,19 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "tailwind-merge": "^3.5.0"
+    "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
     "@ladle/react": "^5.1.1",
-    "@tailwindcss/postcss": "^4.2.4",
+    "@tailwindcss/postcss": "^4.3.0",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "lucide-react": "^1.11.0",
-    "react-hook-form": "^7.74.0",
+    "lucide-react": "^1.14.0",
+    "react-hook-form": "^7.75.0",
     "shx": "^0.4.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.2.4",
-    "tsdown": "^0.21.10",
+    "tailwindcss": "^4.3.0",
+    "tsdown": "^0.22.0",
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3"
   },