@alpic-ai/ui 0.0.0-staging.fc7750c → 0.0.0-staging.fd696be

package/dist/components/form.mjs

@@ -90,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
 	});
 }
@@ -136,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, {})
 		] })
 	});
@@ -156,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, {})
 		] })
 	});
@@ -176,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,
@@ -185,7 +186,6 @@ function SelectField({ control, name, rules, required, label, description, toolt
 					children: option.label
 				}, option.value)) })]
 			}),
-			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
 			/* @__PURE__ */ jsx(FormMessage, {})
 		] })
 	});
@@ -201,6 +201,7 @@ function RadioField({ control, name, rules, required, label, description, toolti
 				tooltip,
 				children: label
 			}),
+			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
 			/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(RadioGroup, {
 				value: field.value ?? "",
 				onValueChange: field.onChange,
@@ -221,7 +222,6 @@ function RadioField({ control, name, rules, required, label, description, toolti
 					}, option.value);
 				})
 			}) }),
-			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
 			/* @__PURE__ */ jsx(FormMessage, {})
 		] })
 	});
@@ -243,6 +243,7 @@ function ChecklistField({ control, name, rules, required, label, description, to
 					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,
@@ -263,7 +264,6 @@ function ChecklistField({ control, name, rules, required, label, description, to
 						}, option.value);
 					})
 				}) }),
-				description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
 				/* @__PURE__ */ jsx(FormMessage, {})
 			] });
 		}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "0.0.0-staging.fc7750c",
+  "version": "0.0.0-staging.fd696be",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {

package/src/components/form.tsx

@@ -143,7 +143,7 @@ function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
     <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}
     />
   );
@@ -222,10 +222,10 @@ function InputField<TFieldValues extends FieldValues, TName extends FieldPath<TF
               {label}
             </FormLabel>
           )}
+          {description && <FormDescription>{description}</FormDescription>}
           <FormControl>
             <Input {...inputProps} {...field} />
           </FormControl>
-          {description && <FormDescription>{description}</FormDescription>}
           <FormMessage />
         </FormItem>
       )}
@@ -259,10 +259,10 @@ function TextareaField<TFieldValues extends FieldValues, TName extends FieldPath
               {label}
             </FormLabel>
           )}
+          {description && <FormDescription>{description}</FormDescription>}
           <FormControl>
             <Textarea {...textareaProps} {...field} />
           </FormControl>
-          {description && <FormDescription>{description}</FormDescription>}
           <FormMessage />
         </FormItem>
       )}
@@ -305,6 +305,7 @@ function SelectField<TFieldValues extends FieldValues, TName extends FieldPath<T
               {label}
             </FormLabel>
           )}
+          {description && <FormDescription>{description}</FormDescription>}
           <Select value={field.value} onValueChange={field.onChange}>
             <FormControl>
               <SelectTrigger>
@@ -319,7 +320,6 @@ function SelectField<TFieldValues extends FieldValues, TName extends FieldPath<T
               ))}
             </SelectContent>
           </Select>
-          {description && <FormDescription>{description}</FormDescription>}
           <FormMessage />
         </FormItem>
       )}
@@ -354,6 +354,7 @@ function RadioField<TFieldValues extends FieldValues, TName extends FieldPath<TF
               {label}
             </FormLabel>
           )}
+          {description && <FormDescription>{description}</FormDescription>}
           <FormControl>
             <RadioGroup value={field.value ?? ""} onValueChange={field.onChange} onBlur={field.onBlur}>
               {options.map((option) => {
@@ -369,7 +370,6 @@ function RadioField<TFieldValues extends FieldValues, TName extends FieldPath<TF
               })}
             </RadioGroup>
           </FormControl>
-          {description && <FormDescription>{description}</FormDescription>}
           <FormMessage />
         </FormItem>
       )}
@@ -413,6 +413,7 @@ function ChecklistField<TFieldValues extends FieldValues, TName extends FieldPat
                 {label}
               </FormLabel>
             )}
+            {description && <FormDescription>{description}</FormDescription>}
             <FormControl>
               <fieldset className="m-0 flex flex-col gap-2 border-0 p-0" onBlur={field.onBlur}>
                 {options.map((option) => {
@@ -434,7 +435,6 @@ function ChecklistField<TFieldValues extends FieldValues, TName extends FieldPat
                 })}
               </fieldset>
             </FormControl>
-            {description && <FormDescription>{description}</FormDescription>}
             <FormMessage />
           </FormItem>
         );

package/src/components/task-progress.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+/*
+ * TaskProgress — multi-step async progress primitive.
+ *
+ * Dumb component: the consumer owns orchestration (timer, websocket, polling) and
+ * passes `steps` with each step's status. Renders a percentage bar at the top
+ * and one row per step with done/running/pending state badges.
+ *
+ * `trailingLabel` is for "still working on something not in the step list" —
+ * shows after the last step as a running row that isn't counted in the percent.
+ */
+
+import { CheckIcon } from "lucide-react";
+
+import { cn } from "../lib/cn";
+import { Separator } from "./separator";
+
+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;
+}
+
+const REVEAL_CLASSES = "animate-in fade-in slide-in-from-bottom-2 duration-300";
+
+function TaskProgress({ steps, trailingLabel, stepRevealDelayMs, className, ...props }: TaskProgressProps) {
+  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 (
+    <div className={cn("flex flex-col gap-4", className)} {...props}>
+      <div className="bg-muted h-2 w-full overflow-hidden rounded-full">
+        <div className="h-full rounded-full bg-success transition-all duration-500" style={{ width: `${percent}%` }} />
+      </div>
+      <div>
+        {steps.map((step, idx) => (
+          <div
+            key={step.id}
+            className={stagger ? REVEAL_CLASSES : undefined}
+            style={
+              stagger ? { animationDelay: `${idx * (stepRevealDelayMs ?? 0)}ms`, animationFillMode: "both" } : undefined
+            }
+          >
+            <TaskProgressRow label={step.label} status={step.status} />
+            {idx < steps.length - 1 && <Separator />}
+          </div>
+        ))}
+        {trailingLabel && (
+          <div className={stagger ? REVEAL_CLASSES : undefined}>
+            <Separator />
+            <TaskProgressRow label={trailingLabel} status="running" muted />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface TaskProgressRowProps {
+  label: string;
+  status: TaskProgressStatus;
+  muted?: boolean;
+}
+
+function TaskProgressRow({ label, status, muted }: TaskProgressRowProps) {
+  return (
+    <div className="flex items-center justify-between py-2">
+      <span className={cn("type-text-sm", muted && "text-muted-foreground")}>{label}</span>
+      {status === "done" && (
+        <span className="flex items-center gap-1 type-text-sm text-success">
+          <CheckIcon className="size-3.5" />
+          <span>done</span>
+        </span>
+      )}
+      {status === "running" && (
+        <span className="flex items-center gap-1.5 type-text-sm text-warning">
+          <span className="size-2 rounded-full bg-warning" />
+          <span>running…</span>
+        </span>
+      )}
+      {status === "pending" && (
+        <span className="flex items-center gap-1.5 type-text-sm text-muted-foreground">
+          <span className="size-2 rounded-full border border-muted-foreground" />
+          <span>pending</span>
+        </span>
+      )}
+    </div>
+  );
+}
+
+export type { TaskProgressStatus, TaskProgressStep };
+export { TaskProgress };

package/src/components/tooltip.tsx

@@ -35,7 +35,7 @@ function TooltipContent({
         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",
+          "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",

package/src/stories/task-progress.stories.tsx

@@ -0,0 +1,81 @@
+import type { Story } from "@ladle/react";
+import { useEffect, useState } from "react";
+
+import { TaskProgress, type TaskProgressStep } from "../components/task-progress";
+
+const SECTION_HEADER = "type-text-xs font-medium text-subtle-foreground uppercase tracking-wide pt-4";
+
+const beaconSteps: TaskProgressStep[] = [
+  { id: "init", label: "Initialize MCP connection", status: "done" },
+  { id: "fetch", label: "Fetch tools and resources", status: "done" },
+  { id: "compat", label: "Check ChatGPT & Claude.ai compatibility", status: "done" },
+];
+
+const partialSteps: TaskProgressStep[] = [
+  { id: "a", label: "Reading project metadata", status: "done" },
+  { id: "b", label: "Fetching MCP server manifest", status: "running" },
+  { id: "c", label: "Preparing your submission", status: "pending" },
+];
+
+const allDoneSteps: TaskProgressStep[] = [
+  { id: "a", label: "Reading project metadata", status: "done" },
+  { id: "b", label: "Fetching MCP server manifest", status: "done" },
+  { id: "c", label: "Preparing your submission", status: "done" },
+];
+
+const STEP_INTERVAL_MS = 1200;
+
+function AnimatedExample() {
+  const [activeIdx, setActiveIdx] = useState(0);
+
+  const labels = ["Reading project metadata", "Fetching MCP server manifest", "Preparing your submission"];
+
+  useEffect(() => {
+    if (activeIdx >= labels.length) {
+      return;
+    }
+    const timeoutId = setTimeout(() => setActiveIdx((prev) => prev + 1), STEP_INTERVAL_MS);
+    return () => clearTimeout(timeoutId);
+  }, [activeIdx, labels.length]);
+
+  const steps: TaskProgressStep[] = labels.map((label, idx) => ({
+    id: String(idx),
+    label,
+    status: idx < activeIdx ? "done" : idx === activeIdx ? "running" : "pending",
+  }));
+  const allDone = activeIdx >= labels.length;
+
+  return <TaskProgress steps={steps} trailingLabel={allDone ? "Almost there…" : undefined} />;
+}
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-8 p-8 max-w-[640px]">
+    <div>
+      <p className={SECTION_HEADER}>In-progress (running step in the middle)</p>
+      <div className="mt-4">
+        <TaskProgress steps={partialSteps} />
+      </div>
+    </div>
+
+    <div>
+      <p className={SECTION_HEADER}>All done</p>
+      <div className="mt-4">
+        <TaskProgress steps={allDoneSteps} />
+      </div>
+    </div>
+
+    <div>
+      <p className={SECTION_HEADER}>All done + trailing "Running checks…" row</p>
+      <div className="mt-4">
+        <TaskProgress steps={beaconSteps} trailingLabel="Running checks…" />
+      </div>
+    </div>
+
+    <div>
+      <p className={SECTION_HEADER}>Animated (timer-driven, mirrors the submission-prefill flow)</p>
+      <div className="mt-4">
+        <AnimatedExample />
+      </div>
+    </div>
+  </div>
+);