@alpic-ai/ui 0.0.0-dev.9f2fa8e → 0.0.0-dev.9f6b80d

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

@@ -190,8 +190,8 @@ export const AllVariants: Story = () => (
           </TableRow>
         </TableHeader>
         <TableBody>
-          {USERS.slice(0, 3).map((user, i) => (
-            <TableRow key={user.id} data-state={i === 1 ? "selected" : undefined}>
+          {USERS.slice(0, 3).map((user, index) => (
+            <TableRow key={user.id} data-state={index === 1 ? "selected" : undefined}>
               <TableCell className="font-medium text-foreground">{user.name}</TableCell>
               <TableCell className="text-subtle-foreground">{user.role}</TableCell>
               <TableCell className="text-subtle-foreground">{user.email}</TableCell>

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

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

@@ -39,6 +39,9 @@
 
   --color-ring: #f22b79; /* Figma: focus-ring */
 
+  /* cta — decorative gradient accent, used with --color-primary in the CTA button ring */
+  --color-cta-accent: #6eece7; /* Figma: CTA border accent (cyan) */
+
   /* sidebar */
   --color-sidebar: #f8fafa; /* Figma: bg-secondary-subtle */
   --color-sidebar-foreground: #3a4848; /* Figma: fg-secondary */
@@ -110,6 +113,24 @@
   --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);
+  }
+  100% {
+    transform: translate(237px, -64px);
+  }
+}
+
 @keyframes accordion-down {
   from {
     height: 0;
@@ -143,14 +164,166 @@
 @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));
+  }
+}
+
+/* ─── CTA button — animated conic gradient ring ───────────────────────────── */
+
+@property --cta-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 135deg;
+}
+
+@keyframes cta-rotate {
+  to {
+    --cta-angle: 495deg;
+  }
+}
+
+.button-cta {
+  position: relative;
+  isolation: isolate;
+  /* light mode: whisper-of-gradient surface tint + soft rose drop-shadow */
+  background-image: linear-gradient(
+    135deg,
+    color-mix(in oklab, var(--color-primary) 5%, transparent) 0%,
+    color-mix(in oklab, var(--color-cta-accent) 5%, transparent) 100%
+  );
+  box-shadow:
+    0 6px 24px -10px color-mix(in oklab, var(--color-primary) 38%, transparent),
+    0 2px 6px -4px color-mix(in oklab, var(--color-cta-accent) 30%, transparent);
+  transition:
+    box-shadow 400ms ease,
+    transform 300ms ease,
+    filter 300ms ease;
+}
+
+@media (hover: hover) {
+  .button-cta:hover {
+    box-shadow:
+      0 10px 30px -8px color-mix(in oklab, var(--color-primary) 52%, transparent),
+      0 3px 10px -3px color-mix(in oklab, var(--color-cta-accent) 40%, transparent);
+  }
+}
+
+/* dark mode: solid inverted surface, no tint or shadow — let the halo do the work */
+.dark .button-cta {
+  background-image: none;
+  box-shadow: none;
+}
+
+.button-cta::before,
+.button-cta::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  /* Always "running" in browser terms, but paused at rest — freezes at current
+     angle on unhover instead of snapping back. */
+  animation: cta-rotate 3.2s linear infinite;
+  animation-play-state: paused;
+}
+
+/* Gradient ring (masked so only the border shows) */
+.button-cta::before {
+  padding: 1.5px;
+  background: conic-gradient(
+    from var(--cta-angle),
+    var(--color-cta-accent) 0deg,
+    var(--color-primary) 150deg,
+    var(--color-cta-accent) 300deg,
+    var(--color-cta-accent) 360deg
+  );
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  transition: filter 400ms ease;
+}
+
+/* Blurred glow halo behind the button — subtle in light, bolder in dark */
+.button-cta::after {
+  z-index: -1;
+  background: conic-gradient(
+    from var(--cta-angle),
+    var(--color-cta-accent) 0deg,
+    var(--color-primary) 150deg,
+    var(--color-cta-accent) 300deg,
+    var(--color-cta-accent) 360deg
+  );
+  filter: blur(12px);
+  opacity: 0.05;
+  transition: opacity 400ms ease;
+}
+
+.dark .button-cta::after {
+  opacity: 0.14;
+}
+
+@media (hover: hover) {
+  .button-cta:hover::before,
+  .button-cta:hover::after {
+    animation-play-state: running;
+  }
+  .button-cta:hover::before {
+    filter: saturate(1.15) brightness(1.05);
+  }
+  .button-cta:hover::after {
+    opacity: 0.18;
+  }
+  .dark .button-cta:hover::after {
+    opacity: 0.32;
+  }
+}
+
+.button-cta:focus-visible::before,
+.button-cta:focus-visible::after {
+  animation-play-state: running;
+}
+
+.button-cta:disabled::before,
+.button-cta:disabled::after,
+[aria-busy="true"].button-cta::before,
+[aria-busy="true"].button-cta::after {
+  animation-play-state: paused;
+}
+.button-cta:disabled::after {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .button-cta::before,
+  .button-cta::after {
+    animation: none;
+  }
+}
+
+/* Icon slide on hover (applied to [data-cta-icon-trailing]) */
+.button-cta [data-cta-icon-trailing] {
+  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+@media (hover: hover) {
+  .button-cta:hover [data-cta-icon-trailing] {
+    transform: translateX(2px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .button-cta [data-cta-icon-trailing] {
+    transition: none;
+  }
+  .button-cta:hover [data-cta-icon-trailing] {
+    transform: none;
   }
 }
 
@@ -191,6 +364,9 @@
 
   --color-ring: #f22b79; /* Figma: focus-ring */
 
+  /* cta — decorative gradient accent, used with --color-primary in the CTA button ring */
+  --color-cta-accent: #6eece7; /* Figma: CTA border accent (cyan) */
+
   /* sidebar */
   --color-sidebar: #0c1c1c; /* Figma: bg-secondary */
   --color-sidebar-foreground: #90a4a4; /* Figma: fg-secondary */
@@ -249,6 +425,14 @@
 
 @custom-variant dark (&:where(.dark, .dark *));
 
+:root {
+  --gradient-sidebar: linear-gradient(0deg, #c9e2e280 0%, #ffffff 70%); /* Figma: bg-nav-gradiant-light */
+}
+
+.dark {
+  --gradient-sidebar: linear-gradient(0deg, #213535 0%, #121e1e 70%); /* Figma: bg-nav-gradiant-dark */
+}
+
 @layer base {
   * {
     @apply border-border shadow-shadow;
@@ -302,6 +486,11 @@
 
 /* ─── Type preset utilities ───────────────────────────────────────────────── */
 
+@utility bg-sidebar-surface {
+  background-color: var(--color-background);
+  background-image: var(--gradient-sidebar);
+}
+
 @utility type-display-2xl {
   font-family: var(--font-display);
   font-size: var(--font-size-display-2xl);