@alpic-ai/ui 0.0.0-dev.4a35dc7 → 0.0.0-dev.6953a69

package/src/stories/sonner.stories.tsx

@@ -0,0 +1,91 @@
+import type { Story } from "@ladle/react";
+import { Mail, RotateCcw } from "lucide-react";
+import { ActionToast, Toaster, toast } from "../components/sonner";
+
+export const AllVariants: Story = () => (
+  <div className="flex min-h-80 flex-col gap-6">
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Standard toasts — click to trigger</p>
+      <div className="flex flex-wrap gap-2">
+        <button
+          type="button"
+          className="h-8 rounded-md border border-border bg-background px-3 type-text-sm font-medium text-foreground [@media(hover:hover)]:hover:bg-background-hover"
+          onClick={() => toast.success("Changes saved", { description: "Your project settings have been updated." })}
+        >
+          Success
+        </button>
+        <button
+          type="button"
+          className="h-8 rounded-md border border-border bg-background px-3 type-text-sm font-medium text-foreground [@media(hover:hover)]:hover:bg-background-hover"
+          onClick={() => toast.error("Deployment failed", { description: "Build exited with code 1. Check the logs." })}
+        >
+          Error
+        </button>
+        <button
+          type="button"
+          className="h-8 rounded-md border border-border bg-background px-3 type-text-sm font-medium text-foreground [@media(hover:hover)]:hover:bg-background-hover"
+          onClick={() =>
+            toast.warning("Rate limit approaching", { description: "You've used 90% of your monthly quota." })
+          }
+        >
+          Warning
+        </button>
+        <button
+          type="button"
+          className="h-8 rounded-md border border-border bg-background px-3 type-text-sm font-medium text-foreground [@media(hover:hover)]:hover:bg-background-hover"
+          onClick={() =>
+            toast.info("New version available", { description: "v2.4.0 includes performance improvements." })
+          }
+        >
+          Info
+        </button>
+        <button
+          type="button"
+          className="h-8 rounded-md border border-border bg-background px-3 type-text-sm font-medium text-foreground [@media(hover:hover)]:hover:bg-background-hover"
+          onClick={() => toast.loading("Deploying...")}
+        >
+          Loading
+        </button>
+        <button
+          type="button"
+          className="h-8 rounded-md border border-border bg-background px-3 type-text-sm font-medium text-foreground [@media(hover:hover)]:hover:bg-background-hover"
+          onClick={() => toast("File uploaded", { closeButton: true })}
+        >
+          With Close
+        </button>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">ActionToast</p>
+      <div className="flex max-w-sm flex-col gap-4">
+        <div className="rounded-lg border border-border bg-background p-4 shadow-md">
+          <ActionToast
+            toastId="story-1"
+            title="Environment variables added"
+            description="A new deployment is needed for changes to take effect."
+            confirm={{ label: "Redeploy", icon: <RotateCcw />, onClick: () => {} }}
+          />
+        </div>
+        <div className="rounded-lg border border-border bg-background p-4 shadow-md">
+          <ActionToast
+            toastId="story-2"
+            title="Redeploying..."
+            description="A new deployment is needed for changes to take effect."
+            confirm={{ label: "Redeploy", icon: <RotateCcw />, onClick: () => {}, loading: true }}
+          />
+        </div>
+        <div className="rounded-lg border border-border bg-background p-4 shadow-md">
+          <ActionToast
+            toastId="story-3"
+            title="Stay in the loop!"
+            description="We ship new features regularly. Get a quick update when something useful drops."
+            confirm={{ label: "Subscribe", icon: <Mail />, onClick: () => {} }}
+          />
+        </div>
+      </div>
+    </div>
+
+    <Toaster />
+  </div>
+);

package/src/stories/spinner.stories.tsx

@@ -0,0 +1,66 @@
+import type { Story } from "@ladle/react";
+
+import { Spinner, SpinnerBlock } from "../components/spinner";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Sizes</p>
+      <div className="flex items-center gap-4">
+        <div className="flex flex-col items-center gap-1.5">
+          <Spinner size="sm" />
+          <p className="type-text-xs text-muted-foreground">sm</p>
+        </div>
+        <div className="flex flex-col items-center gap-1.5">
+          <Spinner size="md" />
+          <p className="type-text-xs text-muted-foreground">md</p>
+        </div>
+        <div className="flex flex-col items-center gap-1.5">
+          <Spinner size="lg" />
+          <p className="type-text-xs text-muted-foreground">lg</p>
+        </div>
+        <div className="flex flex-col items-center gap-1.5">
+          <Spinner size="xl" />
+          <p className="type-text-xs text-muted-foreground">xl</p>
+        </div>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Variants</p>
+      <div className="flex items-center gap-4">
+        <div className="flex flex-col items-center gap-1.5">
+          <Spinner size="lg" variant="primary" />
+          <p className="type-text-xs text-muted-foreground">primary</p>
+        </div>
+        <div className="flex flex-col items-center gap-1.5">
+          <Spinner size="lg" variant="secondary" />
+          <p className="type-text-xs text-muted-foreground">secondary</p>
+        </div>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">SpinnerBlock</p>
+      <div className="rounded-md border border-border">
+        <SpinnerBlock variant="secondary" size="lg" />
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">SpinnerBlock with label</p>
+      <div className="rounded-md border border-border">
+        <SpinnerBlock variant="secondary" withLabel />
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">
+        SpinnerBlock fullscreen (uses min-h-screen — shown inline for preview)
+      </p>
+      <div className="flex h-48 items-center justify-center rounded-md border border-border">
+        <Spinner size="xl" />
+      </div>
+    </div>
+  </div>
+);

package/src/stories/status-dot.stories.tsx

@@ -0,0 +1,27 @@
+import type { Story } from "@ladle/react";
+import { StatusDot } from "../components/status-dot";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Success</p>
+      <StatusDot variant="success" />
+    </div>
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Destructive</p>
+      <StatusDot variant="destructive" />
+    </div>
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Warning</p>
+      <StatusDot variant="warning" />
+    </div>
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Muted</p>
+      <StatusDot variant="muted" />
+    </div>
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Warning + Pulse</p>
+      <StatusDot variant="warning" pulse />
+    </div>
+  </div>
+);

package/src/stories/switch.stories.tsx

@@ -0,0 +1,46 @@
+import type { Story } from "@ladle/react";
+import { Label } from "../components/label";
+import { Switch } from "../components/switch";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Off (default)</p>
+      <Switch />
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">On (defaultChecked)</p>
+      <Switch defaultChecked />
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Disabled (off)</p>
+      <Switch disabled />
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Disabled (on)</p>
+      <Switch disabled defaultChecked />
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">With label</p>
+      <div className="flex items-center gap-2">
+        <Switch id="with-label" />
+        <Label htmlFor="with-label">Remember me</Label>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">With label and description</p>
+      <div className="flex gap-2">
+        <Switch id="with-description" className="mt-0.5" />
+        <div className="flex flex-col">
+          <Label htmlFor="with-description">Remember me</Label>
+          <p className="type-text-sm text-subtle-foreground">Save my login details for next time.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+);

package/src/stories/table.stories.tsx

@@ -0,0 +1,242 @@
+import type { Story } from "@ladle/react";
+import { useState } from "react";
+import { AvatarLabelGroup } from "../components/avatar";
+import { Badge } from "../components/badge";
+import { Checkbox } from "../components/checkbox";
+import { Pagination } from "../components/pagination";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../components/table";
+
+const DEMO_AVATAR = "https://i.pravatar.cc/150";
+
+const USERS = [
+  {
+    id: "1",
+    name: "Alice Carter",
+    handle: "@alice",
+    role: "Product Designer",
+    email: "alice.carter@example.com",
+    status: "Active",
+  },
+  {
+    id: "2",
+    name: "Bob Miller",
+    handle: "@bob",
+    role: "Product Manager",
+    email: "bob.miller@example.com",
+    status: "Active",
+  },
+  {
+    id: "3",
+    name: "Charlie Davis",
+    handle: "@charlie",
+    role: "Frontend Developer",
+    email: "charlie.davis@example.com",
+    status: "Active",
+  },
+  {
+    id: "4",
+    name: "Diana Moore",
+    handle: "@diana",
+    role: "Backend Developer",
+    email: "diana.moore@example.com",
+    status: "Active",
+  },
+  {
+    id: "5",
+    name: "Ethan Taylor",
+    handle: "@ethan",
+    role: "Fullstack Developer",
+    email: "ethan.taylor@example.com",
+    status: "Active",
+  },
+  {
+    id: "6",
+    name: "Fiona Zhang",
+    handle: "@fiona",
+    role: "DevOps Engineer",
+    email: "fiona.zhang@example.com",
+    status: "Active",
+  },
+  {
+    id: "7",
+    name: "George Kim",
+    handle: "@george",
+    role: "QA Engineer",
+    email: "george.kim@example.com",
+    status: "Active",
+  },
+  {
+    id: "8",
+    name: "Hannah Lee",
+    handle: "@hannah",
+    role: "Data Scientist",
+    email: "hannah.lee@example.com",
+    status: "Inactive",
+  },
+] as const;
+
+const PAGE_SIZE = 3;
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-8 p-6 bg-background max-w-4xl">
+    {/* Text-only table */}
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Text cells</p>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Role</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead>Status</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {USERS.map((user) => (
+            <TableRow key={user.id}>
+              <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>
+              <TableCell>
+                <Badge variant="success">{user.status}</Badge>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+
+    {/* Avatar cells + checkbox */}
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Avatar cells + checkbox</p>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>
+              <Checkbox role="checkbox" aria-label="Select all" />
+            </TableHead>
+            <TableHead>Name</TableHead>
+            <TableHead>Role</TableHead>
+            <TableHead>Status</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {USERS.map((user) => (
+            <TableRow key={user.id}>
+              <TableCell>
+                <Checkbox role="checkbox" aria-label={`Select ${user.name}`} />
+              </TableCell>
+              <TableCell>
+                <AvatarLabelGroup size="md" src={DEMO_AVATAR} name={user.name} label={user.handle} />
+              </TableCell>
+              <TableCell className="text-subtle-foreground">{user.role}</TableCell>
+              <TableCell>
+                <Badge variant="success">{user.status}</Badge>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+
+    {/* With footer */}
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">With caption + footer</p>
+      <Table>
+        <TableCaption>Team members — 5 total</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Role</TableHead>
+            <TableHead>Email</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {USERS.slice(0, 3).map((user) => (
+            <TableRow key={user.id}>
+              <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>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TableCell colSpan={2}>Total</TableCell>
+            <TableCell>3 members</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </div>
+
+    {/* Selected row state */}
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Selected row state</p>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Role</TableHead>
+            <TableHead>Email</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {USERS.slice(0, 3).map((user, i) => (
+            <TableRow key={user.id} data-state={i === 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>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+
+    {/* Paginated table */}
+    <PaginatedTableExample />
+  </div>
+);
+
+function PaginatedTableExample() {
+  const [page, setPage] = useState(1);
+  const totalPages = Math.ceil(USERS.length / PAGE_SIZE);
+  const paginatedUsers = USERS.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <p className="type-text-xs font-medium text-subtle-foreground">With pagination</p>
+      <Pagination currentPage={page} totalPages={totalPages} onPageChange={setPage} />
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Role</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead>Status</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {paginatedUsers.map((user) => (
+            <TableRow key={user.id}>
+              <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>
+              <TableCell>
+                <Badge variant={user.status === "Active" ? "success" : "secondary"}>{user.status}</Badge>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

package/src/stories/tabs.stories.tsx

@@ -0,0 +1,169 @@
+import type { Story } from "@ladle/react";
+import { ChartBar, Layers, PackageOpen, Presentation, Rocket, Search, Settings } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Tabs, TabsContent, TabsList, TabsNav, TabsNavList, TabsNavTrigger, TabsTrigger } from "../components/tabs";
+
+const SECTION_HEADER = "type-text-xs font-medium text-muted-foreground uppercase tracking-wide pt-4";
+
+const navTabs = [
+  { id: "overview", label: "Overview", icon: Presentation },
+  { id: "deployments", label: "Deployments", icon: Rocket },
+  { id: "analytics", label: "Analytics", icon: ChartBar },
+  { id: "logs", label: "Logs", icon: Search },
+  { id: "environments", label: "Environments", icon: Layers },
+  { id: "distribution", label: "Distribution", icon: PackageOpen },
+  { id: "settings", label: "Settings", icon: Settings },
+];
+
+const sideNavTabs = [
+  { id: "general", label: "General" },
+  { id: "authentication", label: "Authentication" },
+  { id: "notifications", label: "Notifications" },
+  { id: "billing", label: "Billing" },
+];
+
+function useHashRoute(fallback: string) {
+  const [active, setActive] = useState(() => window.location.hash.slice(1) || fallback);
+
+  useEffect(() => {
+    const onChange = () => setActive(window.location.hash.slice(1) || fallback);
+    window.addEventListener("hashchange", onChange);
+    return () => window.removeEventListener("hashchange", onChange);
+  }, [fallback]);
+
+  return active;
+}
+
+export const AllVariants: Story = () => {
+  const activeNav = useHashRoute("overview");
+
+  return (
+    <div className="flex flex-col gap-10 p-8">
+      {/* ─── Navigation tabs ─────────────────────────────────────── */}
+
+      {/* Horizontal + line (default) */}
+      <div>
+        <p className={SECTION_HEADER}>Nav — horizontal, variant="line" (default)</p>
+        <div className="mt-4">
+          <TabsNav aria-label="Project" orientation="horizontal" variant="line">
+            <TabsNavList>
+              {navTabs.map(({ id, label, icon: Icon }) => (
+                <TabsNavTrigger key={id} href={`#${id}`} active={activeNav === id}>
+                  <Icon className="h-4 w-4" />
+                  {label}
+                </TabsNavTrigger>
+              ))}
+            </TabsNavList>
+          </TabsNav>
+        </div>
+      </div>
+
+      {/* Horizontal + pill */}
+      <div>
+        <p className={SECTION_HEADER}>Nav — horizontal, variant="pill"</p>
+        <div className="mt-4">
+          <TabsNav aria-label="Project" orientation="horizontal" variant="pill">
+            <TabsNavList>
+              {navTabs.slice(0, 4).map(({ id, label, icon: Icon }) => (
+                <TabsNavTrigger key={id} href={`#${id}`} active={activeNav === id}>
+                  <Icon className="h-4 w-4" />
+                  {label}
+                </TabsNavTrigger>
+              ))}
+            </TabsNavList>
+          </TabsNav>
+        </div>
+      </div>
+
+      {/* Vertical + pill (default) */}
+      <div>
+        <p className={SECTION_HEADER}>Nav — vertical, variant="pill" (default)</p>
+        <div className="mt-4 flex gap-6">
+          <aside className="shrink-0 basis-40">
+            <TabsNav aria-label="Settings" orientation="vertical" variant="pill">
+              <TabsNavList>
+                {sideNavTabs.map(({ id, label }) => (
+                  <TabsNavTrigger key={id} href={`#${id}`} active={activeNav === id}>
+                    {label}
+                  </TabsNavTrigger>
+                ))}
+              </TabsNavList>
+            </TabsNav>
+          </aside>
+          <div className="flex-1 rounded-md border p-4">
+            <p className="type-text-sm text-muted-foreground">Content for "{activeNav}"</p>
+          </div>
+        </div>
+      </div>
+
+      {/* ─── Tabs (state-based) ────────────────────────────── */}
+
+      {/* Tabs — line */}
+      <div>
+        <p className={SECTION_HEADER}>Tabs — line variant</p>
+        <Tabs defaultValue="all" className="mt-4">
+          <TabsList variant="line">
+            <TabsTrigger value="all">All</TabsTrigger>
+            <TabsTrigger value="tool">Tool</TabsTrigger>
+            <TabsTrigger value="resource">Resource</TabsTrigger>
+            <TabsTrigger value="prompt">Prompt</TabsTrigger>
+          </TabsList>
+          <TabsContent value="all">All content</TabsContent>
+          <TabsContent value="tool">Tool content</TabsContent>
+          <TabsContent value="resource">Resource content</TabsContent>
+          <TabsContent value="prompt">Prompt content</TabsContent>
+        </Tabs>
+      </div>
+
+      {/* Tabs — default (horizontal) */}
+      <div>
+        <p className={SECTION_HEADER}>Tabs — default variant (horizontal)</p>
+        <Tabs defaultValue="all" className="mt-4">
+          <TabsList>
+            <TabsTrigger value="all">All</TabsTrigger>
+            <TabsTrigger value="tool">Tool</TabsTrigger>
+            <TabsTrigger value="resource">Resource</TabsTrigger>
+            <TabsTrigger value="prompt">Prompt</TabsTrigger>
+          </TabsList>
+          <TabsContent value="all">All content</TabsContent>
+          <TabsContent value="tool">Tool content</TabsContent>
+          <TabsContent value="resource">Resource content</TabsContent>
+          <TabsContent value="prompt">Prompt content</TabsContent>
+        </Tabs>
+      </div>
+
+      {/* Tabs — default (vertical) */}
+      <div>
+        <p className={SECTION_HEADER}>Tabs — default variant (vertical)</p>
+        <Tabs defaultValue="overview" orientation="vertical" className="mt-4">
+          <TabsList>
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="analytics">Analytics</TabsTrigger>
+            <TabsTrigger value="settings">Settings</TabsTrigger>
+          </TabsList>
+          <TabsContent value="overview">Overview content</TabsContent>
+          <TabsContent value="analytics">Analytics content</TabsContent>
+          <TabsContent value="settings">Settings content</TabsContent>
+        </Tabs>
+      </div>
+
+      {/* Tabs — disabled */}
+      <div>
+        <p className={SECTION_HEADER}>Tabs — disabled trigger</p>
+        <Tabs defaultValue="one" className="mt-4">
+          <TabsList>
+            <TabsTrigger value="one">One</TabsTrigger>
+            <TabsTrigger value="two" disabled>
+              Two (disabled)
+            </TabsTrigger>
+            <TabsTrigger value="three">Three</TabsTrigger>
+          </TabsList>
+          <TabsContent value="one">One content</TabsContent>
+          <TabsContent value="two">Two content</TabsContent>
+          <TabsContent value="three">Three content</TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+};