@alpic-ai/ui 0.0.0-dev.c4d7c77 → 0.0.0-dev.c4dcd8d

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";
@@ -188,5 +190,113 @@ function SelectField({ control, name, rules, required, label, description, toolt
 		] })
 	});
 }
+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
+			}),
+			/* @__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);
+				})
+			}) }),
+			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+			/* @__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
+				}),
+				/* @__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);
+					})
+				}) }),
+				description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+				/* @__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/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/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.c4d7c77",
+  "version": "0.0.0-dev.c4dcd8d",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {
@@ -24,11 +24,11 @@
   ],
   "peerDependencies": {
     "lucide-react": "^1.14.0",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "react-hook-form": "^7.74.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.14.0",
-    "react-hook-form": "^7.74.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"
   },

package/src/components/form.tsx

@@ -14,8 +14,10 @@ import {
 } from "react-hook-form";
 
 import { cn } from "../lib/cn";
+import { Checkbox } from "./checkbox";
 import { Input, type InputProps } from "./input";
 import { Label } from "./label";
+import { RadioGroup, RadioGroupItem } from "./radio-group";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
 import { Textarea, type TextareaProps } from "./textarea";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
@@ -325,8 +327,166 @@ function SelectField<TFieldValues extends FieldValues, TName extends FieldPath<T
   );
 }
 
+interface RadioFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>
+  extends FormFieldBaseProps<TFieldValues, TName> {
+  options: SelectFieldOption[];
+}
+
+function RadioField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({
+  control,
+  name,
+  rules,
+  required,
+  label,
+  description,
+  tooltip,
+  options,
+}: RadioFieldProps<TFieldValues, TName>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      rules={rules}
+      render={({ field }) => (
+        <FormItem>
+          {label && (
+            <FormLabel required={required} tooltip={tooltip}>
+              {label}
+            </FormLabel>
+          )}
+          <FormControl>
+            <RadioGroup value={field.value ?? ""} onValueChange={field.onChange} onBlur={field.onBlur}>
+              {options.map((option) => {
+                const itemId = `${field.name}-${option.value}`;
+                return (
+                  <div key={option.value} className="flex items-center gap-2">
+                    <RadioGroupItem id={itemId} value={option.value} disabled={option.disabled} />
+                    <Label htmlFor={itemId} className="type-text-sm font-normal">
+                      {option.label}
+                    </Label>
+                  </div>
+                );
+              })}
+            </RadioGroup>
+          </FormControl>
+          {description && <FormDescription>{description}</FormDescription>}
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+interface ChecklistFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>
+  extends FormFieldBaseProps<TFieldValues, TName> {
+  options: SelectFieldOption[];
+}
+
+function ChecklistField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({
+  control,
+  name,
+  rules,
+  required,
+  label,
+  description,
+  tooltip,
+  options,
+}: ChecklistFieldProps<TFieldValues, TName>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      rules={rules}
+      render={({ field }) => {
+        const selected: string[] = Array.isArray(field.value) ? field.value : [];
+        const toggle = (value: string, checked: boolean) => {
+          if (checked) {
+            field.onChange([...selected, value]);
+          } else {
+            field.onChange(selected.filter((existing) => existing !== value));
+          }
+        };
+        return (
+          <FormItem>
+            {label && (
+              <FormLabel required={required} tooltip={tooltip}>
+                {label}
+              </FormLabel>
+            )}
+            <FormControl>
+              <fieldset className="m-0 flex flex-col gap-2 border-0 p-0" onBlur={field.onBlur}>
+                {options.map((option) => {
+                  const itemId = `${field.name}-${option.value}`;
+                  const checked = selected.includes(option.value);
+                  return (
+                    <div key={option.value} className="flex items-start gap-2">
+                      <Checkbox
+                        id={itemId}
+                        checked={checked}
+                        onCheckedChange={(next) => toggle(option.value, Boolean(next))}
+                        disabled={option.disabled}
+                      />
+                      <Label htmlFor={itemId} className="type-text-sm font-normal leading-tight">
+                        {option.label}
+                      </Label>
+                    </div>
+                  );
+                })}
+              </fieldset>
+            </FormControl>
+            {description && <FormDescription>{description}</FormDescription>}
+            <FormMessage />
+          </FormItem>
+        );
+      }}
+    />
+  );
+}
+
+interface CheckboxFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>
+  extends Omit<FormFieldBaseProps<TFieldValues, TName>, "required"> {}
+
+function CheckboxField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({
+  control,
+  name,
+  rules,
+  label,
+  description,
+  tooltip,
+}: CheckboxFieldProps<TFieldValues, TName>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      rules={rules}
+      render={({ field }) => (
+        <FormItem className="gap-1.5">
+          <div className="flex items-start gap-2">
+            <FormControl>
+              <Checkbox
+                checked={field.value ?? false}
+                onCheckedChange={(next) => field.onChange(Boolean(next))}
+                onBlur={field.onBlur}
+              />
+            </FormControl>
+            {label && (
+              <FormLabel tooltip={tooltip} className="font-normal">
+                {label}
+              </FormLabel>
+            )}
+          </div>
+          {description && <FormDescription className="ml-6">{description}</FormDescription>}
+          <FormMessage className="ml-6" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
 export type { SelectFieldOption };
 export {
+  CheckboxField,
+  ChecklistField,
   Form,
   FormControl,
   FormDescription,
@@ -337,6 +497,7 @@ export {
   FormLabel,
   FormMessage,
   InputField,
+  RadioField,
   SelectField,
   TextareaField,
   useFormField,

package/src/components/table.tsx

@@ -44,7 +44,6 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
         "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,
       )}
       {...props}
@@ -58,7 +57,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"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",
+        "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:px-0",
         className,
       )}
       {...props}
@@ -82,7 +81,7 @@ function TableCell({ className, interactive = false, ...props }: TableCellProps)
       className={cn(
         "align-middle",
         interactive ? "h-px p-0" : "px-6 py-2",
-        "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-3",
+        "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:px-0",
         className,
       )}
       {...props}

package/src/components/tabs.tsx

@@ -44,10 +44,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",
         ],
       },
     },

package/src/components/wizard.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+/*
+ * Wizard family — primitives for multi-step flows.
+ *
+ * - WizardSteps   — vertical step rail (controlled by activeIdx + onSelect)
+ * - WizardProgress — step counter + progress bar
+ *
+ * Consumers compose these inside whatever container they need (sticky aside, modal, etc.).
+ */
+
+import type * as React from "react";
+
+import { cn } from "../lib/cn";
+import { TabsNav, TabsNavList, TabsNavTrigger } from "./tabs";
+
+interface WizardStep {
+  id: string;
+  label: string;
+}
+
+interface WizardStepsProps {
+  steps: readonly WizardStep[];
+  activeIdx: number;
+  onSelect: (idx: number) => void;
+  ariaLabel?: string;
+  className?: string;
+}
+
+function WizardSteps({ steps, activeIdx, onSelect, ariaLabel = "Wizard steps", className }: WizardStepsProps) {
+  return (
+    <TabsNav orientation="vertical" aria-label={ariaLabel} className={className}>
+      <TabsNavList>
+        {steps.map((step, idx) => (
+          <TabsNavTrigger key={step.id} active={idx === activeIdx} asChild>
+            <button type="button" onClick={() => onSelect(idx)} className="w-full justify-start text-left">
+              {step.label}
+            </button>
+          </TabsNavTrigger>
+        ))}
+      </TabsNavList>
+    </TabsNav>
+  );
+}
+
+interface WizardProgressProps extends React.ComponentProps<"div"> {
+  current: number;
+  total: number;
+}
+
+function WizardProgress({ current, total, className, ...props }: WizardProgressProps) {
+  const percent = total > 0 ? Math.round((current / total) * 100) : 0;
+  return (
+    <div className={cn("flex flex-col gap-1.5 px-2", className)} {...props}>
+      <div className="text-muted-foreground flex items-center justify-between text-xs">
+        <span>
+          Step {current}/{total}
+        </span>
+        <span>{percent}%</span>
+      </div>
+      <div className="bg-muted h-1.5 overflow-hidden rounded-full">
+        <div className="bg-primary h-full transition-all" style={{ width: `${percent}%` }} />
+      </div>
+    </div>
+  );
+}
+
+export type { WizardStep };
+export { WizardProgress, WizardSteps };

package/src/stories/form.stories.tsx

@@ -1,6 +1,17 @@
 import type { Story } from "@ladle/react";
 import { useForm } from "react-hook-form";
-import { Form, FormFields, FormHeader, InputField, SelectField, TextareaField } from "../components/form";
+
+import {
+  CheckboxField,
+  ChecklistField,
+  Form,
+  FormFields,
+  FormHeader,
+  InputField,
+  RadioField,
+  SelectField,
+  TextareaField,
+} from "../components/form";
 
 /* ── Types ───────────────────────────────────────────────────────────────── */
 
@@ -8,6 +19,9 @@ interface CreateProjectForm {
   email: string;
   role: string;
   description: string;
+  visibility: string;
+  capabilities: string[];
+  acceptTerms: boolean;
 }
 
 const roles = [
@@ -16,11 +30,31 @@ const roles = [
   { value: "viewer", label: "Viewer" },
 ];
 
+const visibilities = [
+  { value: "public", label: "Public" },
+  { value: "private", label: "Private" },
+  { value: "internal", label: "Internal" },
+];
+
+const capabilities = [
+  { value: "read", label: "Read" },
+  { value: "write", label: "Write" },
+  { value: "deploy", label: "Deploy" },
+  { value: "admin", label: "Admin" },
+];
+
 /* ── Composed Form ───────────────────────────────────────────────────────── */
 
 function ComposedForm() {
   const form = useForm<CreateProjectForm>({
-    defaultValues: { email: "", role: "", description: "" },
+    defaultValues: {
+      email: "",
+      role: "",
+      description: "",
+      visibility: "",
+      capabilities: [],
+      acceptTerms: false,
+    },
   });
 
   const onSubmit = (data: CreateProjectForm) => {
@@ -64,6 +98,34 @@ function ComposedForm() {
                 placeholder="A short description of your project..."
                 required
               />
+
+              <RadioField
+                control={form.control}
+                name="visibility"
+                rules={{ required: "Pick a visibility." }}
+                label="Visibility"
+                description="Who can see and access this project."
+                options={visibilities}
+                required
+              />
+
+              <ChecklistField
+                control={form.control}
+                name="capabilities"
+                rules={{ validate: (value) => (value?.length ? true : "Pick at least one capability.") }}
+                label="Capabilities"
+                description="Select all that apply."
+                options={capabilities}
+                required
+              />
+
+              <CheckboxField
+                control={form.control}
+                name="acceptTerms"
+                rules={{ validate: (value) => (value ? true : "You must accept the terms.") }}
+                label="I accept the terms and conditions"
+                description="Required to create the project."
+              />
             </FormFields>
 
             <button

package/src/stories/tabs.stories.tsx

@@ -18,9 +18,11 @@ const navTabs = [
 
 const sideNavTabs = [
   { id: "general", label: "General" },
+  { id: "build-settings", label: "Build settings" },
+  { id: "environment-variables", label: "Environment variables" },
+  { id: "domains", label: "Domains" },
   { id: "authentication", label: "Authentication" },
-  { id: "notifications", label: "Notifications" },
-  { id: "billing", label: "Billing" },
+  { id: "marketplace", label: "Marketplace" },
 ];
 
 function useHashRoute(fallback: string) {

package/src/stories/wizard.stories.tsx

@@ -0,0 +1,64 @@
+import type { Story } from "@ladle/react";
+import { useState } from "react";
+
+import { WizardProgress, type WizardStep, WizardSteps } from "../components/wizard";
+
+const SECTION_HEADER = "type-text-xs font-medium text-muted-foreground uppercase tracking-wide pt-4";
+
+const steps: WizardStep[] = [
+  { id: "overview", label: "Overview" },
+  { id: "branding", label: "Branding & metadata" },
+  { id: "auth", label: "Authentication" },
+  { id: "tools", label: "Tools & test cases" },
+  { id: "review", label: "Review & submit" },
+];
+
+export const AllVariants: Story = () => {
+  const [activeIdx, setActiveIdx] = useState(1);
+
+  return (
+    <div className="flex flex-col gap-10 p-8">
+      {/* Full rail (steps + progress) */}
+      <div>
+        <p className={SECTION_HEADER}>Full rail — steps + progress</p>
+        <div className="mt-4 flex gap-6">
+          <aside className="basis-56 shrink-0 flex flex-col gap-4 self-start">
+            <WizardSteps steps={steps} activeIdx={activeIdx} onSelect={setActiveIdx} ariaLabel="Submission steps" />
+            <WizardProgress current={activeIdx + 1} total={steps.length} />
+          </aside>
+          <div className="flex-1 rounded-md border p-4">
+            <p className="type-text-sm text-muted-foreground">Content for step "{steps[activeIdx]?.label}"</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Steps only */}
+      <div>
+        <p className={SECTION_HEADER}>Steps only</p>
+        <div className="mt-4 max-w-56">
+          <WizardSteps steps={steps} activeIdx={activeIdx} onSelect={setActiveIdx} />
+        </div>
+      </div>
+
+      {/* Progress only — various positions */}
+      <div>
+        <p className={SECTION_HEADER}>Progress — first step</p>
+        <div className="mt-4 max-w-56">
+          <WizardProgress current={1} total={5} />
+        </div>
+      </div>
+      <div>
+        <p className={SECTION_HEADER}>Progress — mid-flow</p>
+        <div className="mt-4 max-w-56">
+          <WizardProgress current={3} total={5} />
+        </div>
+      </div>
+      <div>
+        <p className={SECTION_HEADER}>Progress — complete</p>
+        <div className="mt-4 max-w-56">
+          <WizardProgress current={5} total={5} />
+        </div>
+      </div>
+    </div>
+  );
+};