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

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

package/src/styles/tokens.css

@@ -113,6 +113,15 @@
   --animate-beacon-ring-pulse: beacon-ring-pulse 2.2s ease-in-out infinite;
 }
 
+@keyframes shimmer-text {
+  from {
+    background-position: 100% center;
+  }
+  to {
+    background-position: 0% center;
+  }
+}
+
 @keyframes alpic-ride {
   0% {
     transform: translate(0px, 0px);
@@ -155,14 +164,12 @@
 @keyframes beacon-ring-pulse {
   0%,
   100% {
-    opacity: 0.88;
+    opacity: 0.55;
     transform: scale(1);
-    filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0));
   }
   50% {
-    opacity: 1;
+    opacity: 0.9;
     transform: scale(1.02);
-    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.24));
   }
 }