@alpic-ai/ui 0.0.0-dev.4a35dc7 → 0.0.0-dev.85c8341

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

package/src/stories/tag.stories.tsx

@@ -0,0 +1,82 @@
+import type { Story } from "@ladle/react";
+import { Tag, TagCount, TagDismissible } from "../components/tag";
+
+const PlaceholderIcon = () => (
+  <svg
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle cx="12" cy="12" r="10" />
+  </svg>
+);
+
+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">Text only</p>
+      <div className="flex gap-1.5">
+        <Tag>Design</Tag>
+        <Tag>Engineering</Tag>
+        <Tag>Product</Tag>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Text only + icon</p>
+      <div className="flex gap-1.5">
+        <Tag icon={<PlaceholderIcon />}>Design</Tag>
+        <Tag icon={<PlaceholderIcon />}>Engineering</Tag>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Dismissible</p>
+      <div className="flex gap-1.5">
+        <TagDismissible onDismiss={() => {}}>Olivia</TagDismissible>
+        <TagDismissible onDismiss={() => {}}>Phoenix</TagDismissible>
+        <TagDismissible onDismiss={() => {}}>Lana</TagDismissible>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Dismissible + icon</p>
+      <div className="flex gap-1.5">
+        <TagDismissible icon={<PlaceholderIcon />} onDismiss={() => {}}>
+          Label
+        </TagDismissible>
+        <TagDismissible icon={<PlaceholderIcon />} onDismiss={() => {}}>
+          Design
+        </TagDismissible>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Count</p>
+      <div className="flex gap-1.5">
+        <TagCount count={5}>Label</TagCount>
+        <TagCount count={3}>Product</TagCount>
+        <TagCount count={12}>Engineering</TagCount>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Count + icon</p>
+      <div className="flex gap-1.5">
+        <TagCount icon={<PlaceholderIcon />} count={5}>
+          Label
+        </TagCount>
+        <TagCount icon={<PlaceholderIcon />} count={3}>
+          Product
+        </TagCount>
+      </div>
+    </div>
+  </div>
+);

package/src/stories/textarea.stories.tsx

@@ -0,0 +1,60 @@
+import { Textarea } from "../components/textarea";
+
+const SECTION_HEADER = "type-text-xs text-muted-foreground font-semibold uppercase tracking-wide pt-4";
+
+export const AllVariants = () => {
+  return (
+    <div className="flex flex-col gap-6 p-8 max-w-sm">
+      <span className={SECTION_HEADER}>Default</span>
+      <Textarea id="default" placeholder="Enter a description..." />
+
+      <span className={SECTION_HEADER}>With label</span>
+      <Textarea id="with-label" label="Description" placeholder="Enter a description..." />
+
+      <span className={SECTION_HEADER}>Required + hint</span>
+      <Textarea
+        id="required-hint"
+        label="Description"
+        required
+        placeholder="Enter a description..."
+        hint="This is a hint text to help user."
+      />
+
+      <span className={SECTION_HEADER}>With tooltip</span>
+      <Textarea
+        id="with-tooltip"
+        label="Description"
+        required
+        tooltip="Briefly describe what this project is about."
+        placeholder="Enter a description..."
+      />
+
+      <span className={SECTION_HEADER}>Filled</span>
+      <Textarea
+        id="filled"
+        label="Description"
+        required
+        defaultValue="A little about the company and the team that you'll be working with."
+        hint="This is a hint text to help user."
+      />
+
+      <span className={SECTION_HEADER}>Error</span>
+      <Textarea
+        id="error"
+        label="Description"
+        required
+        placeholder="Enter a description..."
+        error="Description is required."
+      />
+
+      <span className={SECTION_HEADER}>Disabled</span>
+      <Textarea
+        id="disabled"
+        label="Description"
+        placeholder="Enter a description..."
+        hint="This is a hint text to help user."
+        disabled
+      />
+    </div>
+  );
+};