@alpic-ai/ui 0.0.0-dev.b18492d → 0.0.0-dev.b1956a0

package/src/components/github-button.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import type { ComponentProps } from "react";
+
+import { cn } from "../lib/cn";
+import { Button } from "./button";
+
+const GITHUB_ICON_PATH =
+  "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12";
+
+function GitHubIcon() {
+  return (
+    <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+      <path d={GITHUB_ICON_PATH} />
+    </svg>
+  );
+}
+
+type GitHubButtonProps = Omit<ComponentProps<typeof Button>, "variant" | "icon">;
+
+function GitHubButton({ className, children, ...props }: GitHubButtonProps) {
+  return (
+    <Button
+      {...props}
+      icon={<GitHubIcon />}
+      className={cn("bg-foreground text-background [@media(hover:hover)]:hover:bg-foreground/90", className)}
+    >
+      {children}
+    </Button>
+  );
+}
+
+export type { GitHubButtonProps };
+export { GitHubButton };

package/src/components/page-loader.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { cn } from "../lib/cn";
+
+const CABLE_CAR_SVG = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 120 130"
+    width="240"
+    height="260"
+    aria-hidden="true"
+    className="block h-auto w-full"
+  >
+    <line x1="60" y1="3" x2="60" y2="58" stroke="#333" strokeWidth="4" />
+    <circle cx="60" cy="11" r="10" fill="#555" />
+    <rect x="5" y="58" width="110" height="64" rx="4" fill="#e90060" />
+    <rect x="5" y="58" width="110" height="20" rx="4" fill="#F5F0E8" />
+    <rect x="5" y="68" width="110" height="10" fill="#F5F0E8" />
+    <rect x="14" y="66" width="26" height="30" rx="2" fill="#5B8EC9" stroke="#C4B9A8" strokeWidth="1.5" />
+    <rect x="47" y="66" width="26" height="30" rx="2" fill="#5B8EC9" stroke="#C4B9A8" strokeWidth="1.5" />
+    <rect x="80" y="66" width="26" height="30" rx="2" fill="#5B8EC9" stroke="#C4B9A8" strokeWidth="1.5" />
+    <rect x="5" y="115" width="110" height="7" rx="3" fill="#9f0042" />
+  </svg>
+);
+
+interface PageLoaderProps {
+  className?: string;
+}
+
+function PageLoader({ className }: PageLoaderProps) {
+  return (
+    <div
+      className={cn("flex min-h-screen items-center justify-center bg-background", className)}
+      role="status"
+      aria-label="Loading Alpic…"
+    >
+      <div className="relative h-[120px] w-[200px]">
+        <div
+          className="absolute top-[30px] left-0 h-[3px] w-full rounded-sm bg-[#6c6c77]"
+          style={{ transform: "rotate(-15deg)", transformOrigin: "left center" }}
+        />
+        <div className="absolute top-[33px] -left-[45px] w-[45px] motion-safe:animate-[alpic-ride_4s_linear_infinite]">
+          {CABLE_CAR_SVG}
+        </div>
+        <div
+          className="pointer-events-none absolute -top-[40px] -left-[45px] z-10 h-[200px] w-[95px]"
+          style={{ background: "linear-gradient(to right, var(--color-background) 47%, transparent)" }}
+        />
+        <div
+          className="pointer-events-none absolute -top-[40px] left-[142px] z-10 h-[200px] w-[95px]"
+          style={{ background: "linear-gradient(to right, transparent, var(--color-background) 53%)" }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export type { PageLoaderProps };
+export { PageLoader };

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/sidebar.tsx

@@ -19,6 +19,19 @@ const SIDEBAR_WIDTH_MOBILE = "16rem";
 const SIDEBAR_WIDTH_ICON = "3.5rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
+const INTERACTIVE_SIDEBAR_ELEMENT_SELECTOR = [
+  "a",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "[role='button']",
+  "[role='link']",
+  "[role='menuitem']",
+  "[contenteditable='true']",
+  "[tabindex]:not([tabindex='-1'])",
+].join(", ");
+
 type SidebarContextProps = {
   state: "expanded" | "collapsed";
   open: boolean;
@@ -142,13 +155,31 @@ function Sidebar({
   variant?: "sidebar" | "floating" | "inset";
   collapsible?: "offcanvas" | "icon" | "none";
 }) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  const { isMobile, state, openMobile, setOpenMobile, open, setOpen } = useSidebar();
+
+  function handleSurfaceClickCapture(event: React.MouseEvent<HTMLDivElement>) {
+    const clickedInteractiveElement =
+      event.target instanceof Element && event.target.closest(INTERACTIVE_SIDEBAR_ELEMENT_SELECTOR);
+
+    if (clickedInteractiveElement) {
+      return;
+    }
+
+    if (!open) {
+      event.preventDefault();
+      event.stopPropagation();
+      setOpen(true);
+      return;
+    }
+
+    setOpen(false);
+  }
 
   if (collapsible === "none") {
     return (
       <div
         data-slot="sidebar"
-        className={cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className)}
+        className={cn("bg-sidebar-surface text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className)}
         {...props}
       >
         {children}
@@ -163,7 +194,7 @@ function Sidebar({
           data-sidebar="sidebar"
           data-slot="sidebar"
           data-mobile="true"
-          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          className="bg-sidebar-surface text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
           style={
             {
               "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@@ -212,7 +243,7 @@ function Sidebar({
           // Adjust the padding for floating and inset variants.
           variant === "floating" || variant === "inset"
             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            : "border-sidebar-border group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
           className,
         )}
         {...props}
@@ -220,7 +251,8 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+          className="bg-sidebar-surface group-data-[variant=floating]:border-sidebar-border flex h-full w-full cursor-pointer flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+          onClickCapture={handleSurfaceClickCapture}
         >
           {children}
         </div>
@@ -272,9 +304,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "[@media(hover:hover)]:hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
-        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
         "[@media(hover:hover)]:hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
@@ -322,11 +352,19 @@ function SidebarHeader({ className, icon, title, children, ...props }: SidebarHe
     <div
       data-slot="sidebar-header"
       data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2", className)}
+      className={cn("flex flex-col gap-2 py-2", className)}
       {...props}
     >
       <div className="flex h-8 items-center gap-2 px-3">
-        <div className="shrink-0">{icon}</div>
+        <span className="relative flex size-8 shrink-0 items-center justify-center">
+          <span className="transition-opacity duration-200 group-data-[collapsible=icon]:group-hover:opacity-0">
+            {icon}
+          </span>
+          <SidebarTrigger
+            tabIndex={-1}
+            className="absolute inset-0 opacity-0 transition-opacity duration-200 group-data-[collapsible=icon]:group-hover:opacity-100"
+          />
+        </span>
         <span className="text-foreground text-md min-w-0 truncate font-medium group-data-[collapsible=icon]:hidden">
           {title}
         </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}
@@ -66,11 +65,25 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
   );
 }
 
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+interface TableCellProps extends React.ComponentProps<"td"> {
+  /**
+   * When true, the cell renders edge-to-edge so the child can act as the
+   * interactive surface (e.g. a button or popover trigger filling the cell).
+   * Defaults to false (standard padded cell).
+   */
+  interactive?: boolean;
+}
+
+function TableCell({ className, interactive = false, ...props }: TableCellProps) {
   return (
     <td
       data-slot="table-cell"
-      className={cn("px-6 py-2 align-middle", "[&: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/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/hooks/use-copy-to-clipboard.ts

@@ -8,7 +8,9 @@ export function useCopyToClipboard({ resetDelay = 2000 }: { resetDelay?: number
 
   useEffect(() => {
     return () => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
     };
   }, []);
 
@@ -16,7 +18,9 @@ export function useCopyToClipboard({ resetDelay = 2000 }: { resetDelay?: number
     (text: string) => {
       navigator.clipboard.writeText(text).then(() => {
         setIsCopied(true);
-        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
         timeoutRef.current = setTimeout(() => setIsCopied(false), resetDelay);
       });
     },

package/src/stories/button.stories.tsx

@@ -1,4 +1,4 @@
-import { Plus } from "lucide-react";
+import { ArrowRight, Plus, Sparkles } from "lucide-react";
 
 import { Button } from "../components/button";
 
@@ -323,6 +323,28 @@ export const AllVariants = () => {
         </Button>
       </div>
 
+      {/* ── CTA (animated gradient ring) ────────────────────────────────── */}
+      <span className={SECTION_HEADER}>CTA — animated</span>
+      <p className="type-text-xs text-muted-foreground -mt-2 max-w-md">
+        Hover to rotate the conic gradient around the border and ignite the soft halo.
+      </p>
+
+      <div className="flex items-center gap-6">
+        <Button variant="cta" iconTrailing={<ArrowRight />}>
+          Get started
+        </Button>
+        <Button variant="cta" icon={<Sparkles />} iconTrailing={<ArrowRight />}>
+          Launch server
+        </Button>
+        <Button variant="cta">Deploy now</Button>
+        <Button variant="cta" iconTrailing={<ArrowRight />} disabled>
+          Disabled
+        </Button>
+        <Button variant="cta" iconTrailing={<ArrowRight />} loading>
+          Deploying
+        </Button>
+      </div>
+
       {/* ── asChild ─────────────────────────────────────────────────────── */}
       <span className={SECTION_HEADER}>asChild</span>
 

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/sidebar.stories.tsx

@@ -107,7 +107,8 @@ export const AllVariants: Story = () => (
           <UserFooter />
         </Sidebar>
         <SidebarInset>
-          <div className="p-4">
+          <div className="flex items-center gap-2 p-4">
+            <SidebarTrigger />
             <span className="type-text-sm text-muted-foreground">Sub-menus expand inline under their parent</span>
           </div>
         </SidebarInset>
@@ -169,7 +170,8 @@ export const AllVariants: Story = () => (
           <UserFooter />
         </Sidebar>
         <SidebarInset>
-          <div className="p-4">
+          <div className="flex items-center gap-2 p-4">
+            <SidebarTrigger />
             <span className="type-text-sm text-muted-foreground">Groups with labels, badges, and separator</span>
           </div>
         </SidebarInset>
@@ -195,7 +197,8 @@ export const AllVariants: Story = () => (
           <UserFooter />
         </Sidebar>
         <SidebarInset>
-          <div className="p-4">
+          <div className="flex items-center gap-2 p-4">
+            <SidebarTrigger />
             <span className="type-text-sm text-muted-foreground">Loading state with skeleton placeholders</span>
           </div>
         </SidebarInset>