@alpic-ai/ui 0.0.0 → 1.111.0

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

package/src/stories/card.stories.tsx

@@ -0,0 +1,89 @@
+import type { Story } from "@ladle/react";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/card";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-6 max-w-md">
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Basic card</p>
+      <Card>
+        <CardHeader>
+          <CardTitle>Project Settings</CardTitle>
+          <CardDescription>Manage your project configuration and preferences.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="type-text-sm text-muted-foreground">
+            Configure your project's name, description, and other settings.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">With footer</p>
+      <Card>
+        <CardHeader>
+          <CardTitle>Danger Zone</CardTitle>
+          <CardDescription>Irreversible actions for this project.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="type-text-sm text-muted-foreground">
+            Deleting a project removes all associated data permanently.
+          </p>
+        </CardContent>
+        <CardFooter className="justify-end gap-3">
+          <button type="button" className="type-text-sm font-medium text-muted-foreground">
+            Cancel
+          </button>
+          <button type="button" className="type-text-sm font-medium text-destructive">
+            Delete Project
+          </button>
+        </CardFooter>
+      </Card>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">With action slot</p>
+      <Card>
+        <CardHeader>
+          <CardTitle>Environment Variables</CardTitle>
+          <CardDescription>Secrets and configuration for your deployment.</CardDescription>
+          <CardAction>
+            <button type="button" className="type-text-sm font-medium text-primary">
+              Edit
+            </button>
+          </CardAction>
+        </CardHeader>
+        <CardContent>
+          <p className="type-text-sm text-muted-foreground">3 variables configured</p>
+        </CardContent>
+      </Card>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Content only (minimal)</p>
+      <Card>
+        <CardContent>
+          <p className="type-text-sm text-muted-foreground">A card with only content, no header or footer.</p>
+        </CardContent>
+      </Card>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Header with border separator</p>
+      <Card>
+        <CardHeader className="border-b">
+          <CardTitle>API Keys</CardTitle>
+          <CardDescription>Manage access tokens for external integrations.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="type-text-sm text-muted-foreground">No API keys configured yet.</p>
+        </CardContent>
+        <CardFooter className="border-t justify-end">
+          <button type="button" className="type-text-sm font-medium text-primary">
+            Create Key
+          </button>
+        </CardFooter>
+      </Card>
+    </div>
+  </div>
+);

package/src/stories/checkbox.stories.tsx

@@ -0,0 +1,56 @@
+import type { Story } from "@ladle/react";
+import { useState } from "react";
+import { Checkbox } from "../components/checkbox";
+import { Label } from "../components/label";
+
+export const AllVariants: Story = () => {
+  const [indeterminate, setIndeterminate] = useState<boolean | "indeterminate">("indeterminate");
+
+  return (
+    <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">Unchecked</p>
+        <Checkbox />
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <p className="type-text-xs font-medium text-subtle-foreground">Checked</p>
+        <Checkbox defaultChecked />
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <p className="type-text-xs font-medium text-subtle-foreground">Indeterminate</p>
+        <Checkbox checked={indeterminate} onCheckedChange={setIndeterminate} />
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <p className="type-text-xs font-medium text-subtle-foreground">Disabled (unchecked)</p>
+        <Checkbox disabled />
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <p className="type-text-xs font-medium text-subtle-foreground">Disabled (checked)</p>
+        <Checkbox 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">
+          <Checkbox 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">
+          <Checkbox 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/collapsible.stories.tsx

@@ -0,0 +1,69 @@
+import type { Story } from "@ladle/react";
+import { ChevronDownIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "../components/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../components/collapsible";
+
+export const AllVariants: Story = () => {
+  const [defaultOpen, setDefaultOpen] = useState(true);
+  const [controlledOpen, setControlledOpen] = useState(false);
+
+  return (
+    <div className="flex flex-col gap-8 p-6">
+      <div className="flex flex-col gap-1.5">
+        <p className="type-text-xs font-medium text-subtle-foreground">Default open</p>
+        <Collapsible open={defaultOpen} onOpenChange={setDefaultOpen}>
+          <CollapsibleTrigger asChild>
+            <Button variant="secondary" className="w-full justify-between">
+              Toggle section
+              <ChevronDownIcon
+                className={`size-4 transition-transform duration-200 ${defaultOpen ? "rotate-180" : ""}`}
+              />
+            </Button>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="pt-2">
+            <div className="rounded-md border border-border p-4 type-text-sm text-muted-foreground">
+              This content is visible by default and can be toggled.
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <p className="type-text-xs font-medium text-subtle-foreground">Collapsed by default</p>
+        <Collapsible open={controlledOpen} onOpenChange={setControlledOpen}>
+          <CollapsibleTrigger asChild>
+            <Button variant="secondary" className="w-full justify-between">
+              Show more details
+              <ChevronDownIcon
+                className={`size-4 transition-transform duration-200 ${controlledOpen ? "rotate-180" : ""}`}
+              />
+            </Button>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="pt-2">
+            <div className="rounded-md border border-border p-4 type-text-sm text-muted-foreground">
+              Hidden content revealed on click.
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <p className="type-text-xs font-medium text-subtle-foreground">Disabled</p>
+        <Collapsible disabled>
+          <CollapsibleTrigger asChild>
+            <Button variant="secondary" className="w-full justify-between" disabled>
+              Cannot toggle
+              <ChevronDownIcon className="size-4" />
+            </Button>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="pt-2">
+            <div className="rounded-md border border-border p-4 type-text-sm text-muted-foreground">
+              This content is not reachable.
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+    </div>
+  );
+};