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

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";
@@ -141,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}
     />
   );
@@ -220,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>
       )}
@@ -257,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>
       )}
@@ -303,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>
@@ -317,7 +320,56 @@ function SelectField<TFieldValues extends FieldValues, TName extends FieldPath<T
               ))}
             </SelectContent>
           </Select>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+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>
+          )}
           {description && <FormDescription>{description}</FormDescription>}
+          <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>
           <FormMessage />
         </FormItem>
       )}
@@ -325,8 +377,116 @@ function SelectField<TFieldValues extends FieldValues, TName extends FieldPath<T
   );
 }
 
+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>
+            )}
+            {description && <FormDescription>{description}</FormDescription>}
+            <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>
+            <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/shimmer-text.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import type React from "react";
+
+import { cn } from "../lib/cn";
+
+const shimmerStyle: React.CSSProperties = {
+  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",
+};
+
+export function ShimmerText({ children, className }: { children: string | number; className?: string }) {
+  return (
+    <span className={cn(className)} style={shimmerStyle}>
+      {children}
+    </span>
+  );
+}

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/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/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/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>
+);