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

package/src/stories/alert.stories.tsx

@@ -0,0 +1,58 @@
+import type { Story } from "@ladle/react";
+import { AlertCircle, AlertTriangle, CheckCircle2, Info } from "lucide-react";
+
+import { Alert, AlertDescription, AlertTitle, ErrorAlert, WarningAlert } from "../components/alert";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-4 max-w-xl p-6">
+    <p className="type-text-xs font-medium text-subtle-foreground">Default</p>
+    <Alert>
+      <Info />
+      <AlertTitle>Best on desktop</AlertTitle>
+      <AlertDescription>
+        This site isn't optimised for small screens. For the best experience we recommend using a desktop or tablet.
+      </AlertDescription>
+    </Alert>
+
+    <p className="type-text-xs font-medium text-subtle-foreground">Destructive</p>
+    <Alert variant="destructive">
+      <AlertCircle />
+      <AlertTitle>Clone failed</AlertTitle>
+      <AlertDescription>Unable to clone the repository. Check your credentials and try again.</AlertDescription>
+    </Alert>
+
+    <p className="type-text-xs font-medium text-subtle-foreground">Warning</p>
+    <Alert variant="warning">
+      <AlertTriangle />
+      <AlertTitle>API key expiring soon</AlertTitle>
+      <AlertDescription>Your API key expires in 3 days. Rotate it to avoid service interruption.</AlertDescription>
+    </Alert>
+
+    <p className="type-text-xs font-medium text-subtle-foreground">Success</p>
+    <Alert variant="success">
+      <CheckCircle2 />
+      <AlertTitle>Deployment complete</AlertTitle>
+      <AlertDescription>Your project was deployed successfully and is now live.</AlertDescription>
+    </Alert>
+
+    <p className="type-text-xs font-medium text-subtle-foreground">Description only (no title)</p>
+    <Alert variant="destructive">
+      <AlertCircle />
+      <AlertDescription>
+        This is the only time you'll be able to see this API key. Make sure to copy it and store it securely.
+      </AlertDescription>
+    </Alert>
+
+    <p className="type-text-xs font-medium text-subtle-foreground">ErrorAlert (pre-composed)</p>
+    <ErrorAlert />
+
+    <p className="type-text-xs font-medium text-subtle-foreground">ErrorAlert (custom)</p>
+    <ErrorAlert title="Error loading projects" description="Failed to fetch your projects. Please refresh the page." />
+
+    <p className="type-text-xs font-medium text-subtle-foreground">WarningAlert</p>
+    <WarningAlert
+      title="Save your API key"
+      description="This is the only time you'll be able to see this API key. Make sure to copy it and store it securely."
+    />
+  </div>
+);

package/src/stories/attachment-tile.stories.tsx

@@ -0,0 +1,37 @@
+import type { Story } from "@ladle/react";
+import { AttachmentTile } from "../components/attachment-tile";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-10 p-10">
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Image attachment (with remove)</p>
+      <div className="flex gap-3">
+        <AttachmentTile
+          src="https://picsum.photos/seed/a/200/200"
+          isImage
+          onRemove={() => alert("Remove clicked")}
+          onClick={() => alert("Preview clicked")}
+        />
+        <AttachmentTile
+          src="https://picsum.photos/seed/b/200/200"
+          isImage
+          onRemove={() => alert("Remove clicked")}
+          onClick={() => alert("Preview clicked")}
+        />
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">File attachment (fallback icon)</p>
+      <AttachmentTile onRemove={() => alert("Remove clicked")} onClick={() => alert("Preview clicked")} />
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Read-only (no remove button)</p>
+      <div className="flex gap-3">
+        <AttachmentTile src="https://picsum.photos/seed/c/200/200" isImage />
+        <AttachmentTile />
+      </div>
+    </div>
+  </div>
+);

package/src/stories/avatar.stories.tsx

@@ -0,0 +1,54 @@
+import type { Story } from "@ladle/react";
+import { Avatar, AvatarFallback, AvatarImage, AvatarLabelGroup } from "../components/avatar";
+
+const DEMO_SRC = "https://i.pravatar.cc/150";
+const SIZES = ["xs", "sm", "md", "lg", "xl"] as const;
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-8 p-6 bg-background">
+    <div className="flex flex-col gap-3">
+      <p className="type-text-xs font-medium text-subtle-foreground">Sizes — with image</p>
+      <div className="flex items-center gap-4">
+        {SIZES.map((size) => (
+          <Avatar key={size} size={size}>
+            <AvatarImage src={DEMO_SRC} alt="User" />
+            <AvatarFallback>JD</AvatarFallback>
+          </Avatar>
+        ))}
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-3">
+      <p className="type-text-xs font-medium text-subtle-foreground">Sizes — fallback (no image)</p>
+      <div className="flex items-center gap-4">
+        {SIZES.map((size) => (
+          <Avatar key={size} size={size}>
+            <AvatarFallback>OR</AvatarFallback>
+          </Avatar>
+        ))}
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-3">
+      <p className="type-text-xs font-medium text-subtle-foreground">Online status indicator</p>
+      <div className="flex items-center gap-4">
+        {SIZES.map((size) => (
+          <Avatar key={size} size={size} status="online">
+            <AvatarImage src={DEMO_SRC} alt="User" />
+            <AvatarFallback>JD</AvatarFallback>
+          </Avatar>
+        ))}
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-3">
+      <p className="type-text-xs font-medium text-subtle-foreground">Label group</p>
+      <div className="flex flex-col gap-4">
+        <AvatarLabelGroup size="sm" src={DEMO_SRC} name="Alice Martin" label="alice@example.com" />
+        <AvatarLabelGroup size="md" src={DEMO_SRC} name="Bob Dupont" label="bob@example.com" />
+        <AvatarLabelGroup size="md" src={DEMO_SRC} name="Charly Bernard" label="charly@example.com" status="online" />
+        <AvatarLabelGroup size="md" name="Daniel Wilson" label="daniel@example.com" />
+      </div>
+    </div>
+  </div>
+);

package/src/stories/badge.stories.tsx

@@ -0,0 +1,50 @@
+import type { Story } from "@ladle/react";
+import { AlertTriangle, CheckCircle2, XCircle } from "lucide-react";
+
+import { Badge } from "../components/badge";
+
+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">Medium (default)</p>
+      <div className="flex items-center gap-2">
+        <Badge variant="primary">Primary</Badge>
+        <Badge>Secondary</Badge>
+        <Badge variant="success">
+          <CheckCircle2 />
+          Success
+        </Badge>
+        <Badge variant="warning">
+          <AlertTriangle />
+          Warning
+        </Badge>
+        <Badge variant="error">
+          <XCircle />
+          Error
+        </Badge>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Small</p>
+      <div className="flex items-center gap-2">
+        <Badge size="sm" variant="primary">
+          Primary
+        </Badge>
+        <Badge size="sm">Secondary</Badge>
+        <Badge size="sm" variant="success">
+          <CheckCircle2 />
+          Success
+        </Badge>
+        <Badge size="sm" variant="warning">
+          <AlertTriangle />
+          Warning
+        </Badge>
+        <Badge size="sm" variant="error">
+          <XCircle />
+          Error
+        </Badge>
+      </div>
+    </div>
+  </div>
+);

package/src/stories/breadcrumb.stories.tsx

@@ -0,0 +1,107 @@
+import type { Story } from "@ladle/react";
+import { Home } from "lucide-react";
+import { useState } from "react";
+import {
+  Breadcrumb,
+  BreadcrumbChevron,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "../components/breadcrumb";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../components/dropdown-menu";
+
+const TREE: Record<string, string[]> = {
+  Home: ["Projects", "Settings", "Billing"],
+  Projects: ["my-mcp-server", "weather-api", "slack-bot"],
+  "my-mcp-server": ["Deployments", "Logs", "Environment"],
+};
+
+export const AllVariants: Story = () => {
+  const [trail, setTrail] = useState(["Home", "Projects", "my-mcp-server"]);
+
+  function handleSelect(index: number, option: string) {
+    setTrail([...trail.slice(0, index + 1), option]);
+  }
+
+  return (
+    <div className="flex flex-col gap-10">
+      <div className="flex flex-col gap-1.5">
+        <p className="type-text-xs font-medium text-subtle-foreground">
+          Interactive — click items to navigate, click chevrons for dropdown
+        </p>
+        <Breadcrumb>
+          <BreadcrumbList>
+            {trail.map((page, index) => {
+              const isLast = index === trail.length - 1;
+              const children = TREE[page];
+              return (
+                <li key={page} className="contents">
+                  {index > 0 && <BreadcrumbSeparator />}
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <BreadcrumbItem className="cursor-pointer focus-visible:ring-2 focus-visible:ring-ring outline-none">
+                        {isLast ? (
+                          <BreadcrumbPage>{page}</BreadcrumbPage>
+                        ) : (
+                          <span className="type-text-sm font-medium text-subtle-foreground">{page}</span>
+                        )}
+                        {children && <BreadcrumbChevron />}
+                      </BreadcrumbItem>
+                    </DropdownMenuTrigger>
+                    {children && (
+                      <DropdownMenuContent align="start">
+                        {children.map((child) => (
+                          <DropdownMenuItem key={child} onSelect={() => handleSelect(index, child)}>
+                            {child}
+                          </DropdownMenuItem>
+                        ))}
+                      </DropdownMenuContent>
+                    )}
+                  </DropdownMenu>
+                </li>
+              );
+            })}
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <p className="type-text-xs font-medium text-subtle-foreground">With home icon (static)</p>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">
+                <Home className="size-5" />
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">Projects</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>my-mcp-server</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <p className="type-text-xs font-medium text-subtle-foreground">Simple — two levels</p>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">Projects</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>my-mcp-server</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+    </div>
+  );
+};

package/src/stories/button.stories.tsx

@@ -0,0 +1,342 @@
+import { Plus } from "lucide-react";
+
+import { Button } from "../components/button";
+
+// Simulated states via className — matches Figma page layout:
+// variants stacked top-to-bottom, states left-to-right.
+
+const VARIANT_LABEL = "type-text-xs text-muted-foreground w-20 shrink-0";
+const STATE_HEADER = "type-text-xs text-muted-foreground font-medium w-32 text-center";
+const SECTION_HEADER = "type-text-xs text-muted-foreground font-semibold uppercase tracking-wide pt-4";
+const ROW = "flex items-center gap-2";
+const CELL = "flex w-32 items-center justify-center";
+const ICON_CELL = "flex w-16 items-center justify-center";
+const ICON_STATE_HEADER = "type-text-xs text-muted-foreground font-medium w-16 text-center";
+
+export const AllVariants = () => {
+  return (
+    <div className="flex flex-col gap-3 p-8">
+      {/* ── Text buttons ────────────────────────────────────────────────── */}
+      <span className={SECTION_HEADER}>Text</span>
+
+      <div className={ROW}>
+        <div className={VARIANT_LABEL} />
+        <div className={STATE_HEADER}>Default</div>
+        <div className={STATE_HEADER}>Disabled</div>
+        <div className={STATE_HEADER}>Loading</div>
+      </div>
+
+      {/* Primary */}
+      <div className={ROW}>
+        <span className={VARIANT_LABEL}>Primary</span>
+        <div className={CELL}>
+          <Button variant="primary" icon={<Plus />}>
+            Button CTA
+          </Button>
+        </div>
+        <div className={CELL}>
+          <Button variant="primary" icon={<Plus />} disabled>
+            Button CTA
+          </Button>
+        </div>
+        <div className={CELL}>
+          <Button variant="primary" icon={<Plus />} loading>
+            Button CTA
+          </Button>
+        </div>
+      </div>
+
+      {/* Secondary */}
+      <div className={ROW}>
+        <span className={VARIANT_LABEL}>Secondary</span>
+        <div className={CELL}>
+          <Button variant="secondary" icon={<Plus />}>
+            Button CTA
+          </Button>
+        </div>
+        <div className={CELL}>
+          <Button variant="secondary" icon={<Plus />} disabled>
+            Button CTA
+          </Button>
+        </div>
+        <div className={CELL}>
+          <Button variant="secondary" icon={<Plus />} loading>
+            Button CTA
+          </Button>
+        </div>
+      </div>
+
+      {/* Tertiary */}
+      <div className={ROW}>
+        <span className={VARIANT_LABEL}>Tertiary</span>
+        <div className={CELL}>
+          <Button variant="tertiary" icon={<Plus />}>
+            Button CTA
+          </Button>
+        </div>
+        <div className={CELL}>
+          <Button variant="tertiary" icon={<Plus />} disabled>
+            Button CTA
+          </Button>
+        </div>
+        <div className={CELL}>
+          <Button variant="tertiary" icon={<Plus />} loading>
+            Button CTA
+          </Button>
+        </div>
+      </div>
+
+      {/* Link color */}
+      <div className={ROW}>
+        <span className={VARIANT_LABEL}>Link</span>
+        <div className={CELL}>
+          <Button variant="link">Button CTA</Button>
+        </div>
+        <div className={CELL}>
+          <Button variant="link" disabled>
+            Button CTA
+          </Button>
+        </div>
+        <div className={CELL}>
+          <Button variant="link" loading>
+            Button CTA
+          </Button>
+        </div>
+      </div>
+
+      {/* Link gray */}
+      <div className={ROW}>
+        <span className={VARIANT_LABEL}>Link muted</span>
+        <div className={CELL}>
+          <Button variant="link-muted">Button CTA</Button>
+        </div>
+        <div className={CELL}>
+          <Button variant="link-muted" disabled>
+            Button CTA
+          </Button>
+        </div>
+        <div className={CELL}>
+          <Button variant="link-muted" loading>
+            Button CTA
+          </Button>
+        </div>
+      </div>
+
+      {/* Destructive */}
+      <div className={ROW}>
+        <span className={VARIANT_LABEL}>Destructive</span>
+        <div className={CELL}>
+          <Button variant="destructive" icon={<Plus />}>
+            Button CTA
+          </Button>
+        </div>
+        <div className={CELL}>
+          <Button variant="destructive" icon={<Plus />} disabled>
+            Button CTA
+          </Button>
+        </div>
+        <div className={CELL}>
+          <Button variant="destructive" icon={<Plus />} loading>
+            Button CTA
+          </Button>
+        </div>
+      </div>
+
+      {/* ── Icon only ───────────────────────────────────────────────────── */}
+      <span className={SECTION_HEADER}>Icon only</span>
+
+      <div className={ROW}>
+        <div className={VARIANT_LABEL} />
+        <div className={ICON_STATE_HEADER}>Default</div>
+        <div className={ICON_STATE_HEADER}>Hover</div>
+        <div className={ICON_STATE_HEADER}>Disabled</div>
+        <div className={ICON_STATE_HEADER}>Loading</div>
+      </div>
+
+      <div className={ROW}>
+        <span className={VARIANT_LABEL}>Primary</span>
+        <div className={ICON_CELL}>
+          <Button size="icon" variant="primary" icon={<Plus />} aria-label="Add" />
+        </div>
+        <div className={ICON_CELL}>
+          <Button size="icon" variant="primary" icon={<Plus />} className="bg-primary-hover" aria-label="Add" />
+        </div>
+        <div className={ICON_CELL}>
+          <Button size="icon" variant="primary" icon={<Plus />} disabled aria-label="Add" />
+        </div>
+        <div className={ICON_CELL}>
+          <Button size="icon" variant="primary" icon={<Plus />} loading aria-label="Add" />
+        </div>
+      </div>
+
+      <div className={ROW}>
+        <span className={VARIANT_LABEL}>Secondary</span>
+        <div className={ICON_CELL}>
+          <Button size="icon" variant="secondary" icon={<Plus />} aria-label="Add" />
+        </div>
+        <div className={ICON_CELL}>
+          <Button
+            size="icon"
+            variant="secondary"
+            icon={<Plus />}
+            className="bg-background-hover text-muted-foreground-hover"
+            aria-label="Add"
+          />
+        </div>
+        <div className={ICON_CELL}>
+          <Button size="icon" variant="secondary" icon={<Plus />} disabled aria-label="Add" />
+        </div>
+        <div className={ICON_CELL}>
+          <Button size="icon" variant="secondary" icon={<Plus />} loading aria-label="Add" />
+        </div>
+      </div>
+
+      <div className={ROW}>
+        <span className={VARIANT_LABEL}>Tertiary</span>
+        <div className={ICON_CELL}>
+          <Button size="icon" variant="tertiary" icon={<Plus />} aria-label="Add" />
+        </div>
+        <div className={ICON_CELL}>
+          <Button
+            size="icon"
+            variant="tertiary"
+            icon={<Plus />}
+            className="bg-background-hover text-muted-foreground-hover"
+            aria-label="Add"
+          />
+        </div>
+        <div className={ICON_CELL}>
+          <Button size="icon" variant="tertiary" icon={<Plus />} disabled aria-label="Add" />
+        </div>
+        <div className={ICON_CELL}>
+          <Button size="icon" variant="tertiary" icon={<Plus />} loading aria-label="Add" />
+        </div>
+      </div>
+
+      {/* ── Icon rounded ────────────────────────────────────────────────── */}
+      <span className={SECTION_HEADER}>Icon rounded</span>
+
+      <div className={ROW}>
+        <div className={VARIANT_LABEL} />
+        <div className={ICON_STATE_HEADER}>Default</div>
+        <div className={ICON_STATE_HEADER}>Hover</div>
+        <div className={ICON_STATE_HEADER}>Disabled</div>
+        <div className={ICON_STATE_HEADER}>Loading</div>
+      </div>
+
+      <div className={ROW}>
+        <span className={VARIANT_LABEL}>Primary</span>
+        <div className={ICON_CELL}>
+          <Button size="icon-rounded" variant="primary" icon={<Plus />} aria-label="Add" />
+        </div>
+        <div className={ICON_CELL}>
+          <Button size="icon-rounded" variant="primary" icon={<Plus />} className="bg-primary-hover" aria-label="Add" />
+        </div>
+        <div className={ICON_CELL}>
+          <Button size="icon-rounded" variant="primary" icon={<Plus />} disabled aria-label="Add" />
+        </div>
+        <div className={ICON_CELL}>
+          <Button size="icon-rounded" variant="primary" icon={<Plus />} loading aria-label="Add" />
+        </div>
+      </div>
+
+      <div className={ROW}>
+        <span className={VARIANT_LABEL}>Secondary</span>
+        <div className={ICON_CELL}>
+          <Button size="icon-rounded" variant="secondary" icon={<Plus />} aria-label="Add" />
+        </div>
+        <div className={ICON_CELL}>
+          <Button
+            size="icon-rounded"
+            variant="secondary"
+            icon={<Plus />}
+            className="bg-background-hover text-muted-foreground-hover"
+            aria-label="Add"
+          />
+        </div>
+        <div className={ICON_CELL}>
+          <Button size="icon-rounded" variant="secondary" icon={<Plus />} disabled aria-label="Add" />
+        </div>
+        <div className={ICON_CELL}>
+          <Button size="icon-rounded" variant="secondary" icon={<Plus />} loading aria-label="Add" />
+        </div>
+      </div>
+
+      <div className={ROW}>
+        <span className={VARIANT_LABEL}>Tertiary</span>
+        <div className={ICON_CELL}>
+          <Button size="icon-rounded" variant="tertiary" icon={<Plus />} aria-label="Add" />
+        </div>
+        <div className={ICON_CELL}>
+          <Button
+            size="icon-rounded"
+            variant="tertiary"
+            icon={<Plus />}
+            className="bg-background-hover text-muted-foreground-hover"
+            aria-label="Add"
+          />
+        </div>
+        <div className={ICON_CELL}>
+          <Button size="icon-rounded" variant="tertiary" icon={<Plus />} disabled aria-label="Add" />
+        </div>
+        <div className={ICON_CELL}>
+          <Button size="icon-rounded" variant="tertiary" icon={<Plus />} loading aria-label="Add" />
+        </div>
+      </div>
+
+      {/* ── Pill ──────────────────────────────────────────────────────────── */}
+      <span className={SECTION_HEADER}>Pill</span>
+
+      <div className="flex items-center gap-3">
+        <Button size="pill" variant="primary">
+          Label
+        </Button>
+        <Button size="pill" variant="secondary">
+          Label
+        </Button>
+        <Button size="pill" variant="secondary" disabled>
+          Label
+        </Button>
+        <Button size="pill" variant="secondary" loading>
+          Label
+        </Button>
+      </div>
+
+      {/* ── With icon (leading) ──────────────────────────────────────────── */}
+      <span className={SECTION_HEADER}>With icon</span>
+
+      <div className="flex items-center gap-3">
+        <Button variant="primary" icon={<Plus />}>
+          Button CTA
+        </Button>
+        <Button variant="secondary" icon={<Plus />}>
+          Button CTA
+        </Button>
+        <Button variant="tertiary" icon={<Plus />}>
+          Button CTA
+        </Button>
+        <Button variant="link" icon={<Plus />}>
+          Button CTA
+        </Button>
+        <Button variant="link-muted" icon={<Plus />}>
+          Button CTA
+        </Button>
+      </div>
+
+      {/* ── asChild ─────────────────────────────────────────────────────── */}
+      <span className={SECTION_HEADER}>asChild</span>
+
+      <div className="flex items-center gap-3">
+        <Button asChild variant="primary">
+          <a href="/docs">Rendered as &lt;a&gt;</a>
+        </Button>
+        <Button asChild variant="secondary">
+          <a href="/docs">Rendered as &lt;a&gt;</a>
+        </Button>
+        <Button asChild variant="tertiary">
+          <a href="/docs">Rendered as &lt;a&gt;</a>
+        </Button>
+      </div>
+    </div>
+  );
+};