@alpic-ai/ui 0.0.0-dev.g20c64d3 → 0.0.0-dev.g20fd91c

package/src/stories/textarea.stories.tsx

@@ -55,6 +55,13 @@ export const AllVariants = () => {
         hint="This is a hint text to help user."
         disabled
       />
+
+      <span className={SECTION_HEADER}>Long pre-filled (auto-grows, no crop)</span>
+      <Textarea
+        id="long-prefilled"
+        label="Subtitle"
+        defaultValue="The fastest way to deploy, host, and scale remote MCP servers for your AI agents — with zero infrastructure to manage, built-in observability, and one-command rollbacks straight from your terminal."
+      />
     </div>
   );
 };

package/src/stories/wizard.stories.tsx

@@ -1,18 +1,36 @@
 import type { Story } from "@ladle/react";
 import { useState } from "react";
 
-import { WizardProgress, type WizardStep, WizardSteps } from "../components/wizard";
+import { TabsNav, TabsNavList, TabsNavTrigger } from "../components/tabs";
+import { WizardProgress } from "../components/wizard";
 
 const SECTION_HEADER = "type-text-xs font-medium text-muted-foreground uppercase tracking-wide pt-4";
 
-const steps: WizardStep[] = [
+const steps = [
   { id: "overview", label: "Overview" },
   { id: "branding", label: "Branding & metadata" },
   { id: "auth", label: "Authentication" },
   { id: "tools", label: "Tools & test cases" },
-  { id: "review", label: "Review & submit" },
+  { id: "review", label: "Review & export" },
 ];
 
+/** The step rail is a vertical `TabsNav` composed with the consumer's selection state. */
+function StepRail({ activeIdx, onSelect }: { activeIdx: number; onSelect: (idx: number) => void }) {
+  return (
+    <TabsNav orientation="vertical" aria-label="Submission steps">
+      <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>
+  );
+}
+
 export const AllVariants: Story = () => {
   const [activeIdx, setActiveIdx] = useState(1);
 
@@ -23,7 +41,7 @@ export const AllVariants: Story = () => {
         <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" />
+            <StepRail activeIdx={activeIdx} onSelect={setActiveIdx} />
             <WizardProgress current={activeIdx + 1} total={steps.length} />
           </aside>
           <div className="flex-1 rounded-md border p-4">
@@ -36,7 +54,7 @@ export const AllVariants: Story = () => {
       <div>
         <p className={SECTION_HEADER}>Steps only</p>
         <div className="mt-4 max-w-56">
-          <WizardSteps steps={steps} activeIdx={activeIdx} onSelect={setActiveIdx} />
+          <StepRail activeIdx={activeIdx} onSelect={setActiveIdx} />
         </div>
       </div>
 

package/src/styles/tokens.css

@@ -4,6 +4,7 @@
   --font-sans: "Inter", system-ui, sans-serif;
   --font-display: "Inter", sans-serif;
   --font-body: "Inter", sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 
   --color-background: #ffffff; /* Figma: bg-primary */
   --color-foreground: #121e1e; /* Figma: fg-primary */
@@ -446,6 +447,23 @@
   }
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  .chart-rise {
+    animation: chart-rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+  }
+}
+
+@keyframes chart-rise {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
 /* ─── Typography ──────────────────────────────────────────────────────────── */
 
 :root {