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

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

package/src/stories/combobox.stories.tsx

@@ -0,0 +1,214 @@
+import type { Story } from "@ladle/react";
+import { GitBranch, Globe, Plus } from "lucide-react";
+import { useState } from "react";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxItem,
+  ComboboxItemText,
+  ComboboxList,
+  ComboboxSearch,
+  ComboboxSeparator,
+  ComboboxTrigger,
+} from "../components/combobox";
+import { CommandItem } from "../components/command";
+
+/* ── With search ──────────────────────────────────────────────────────────── */
+
+const branches = ["main", "develop", "feature/auth", "feature/dashboard", "fix/login-bug", "release/v2.0"];
+
+function SearchCombobox() {
+  const [value, setValue] = useState<string | null>("main");
+  return (
+    <Combobox value={value} onValueChange={setValue}>
+      <ComboboxTrigger size="md" placeholder="Select branch..." className="w-full">
+        <GitBranch className="size-4" />
+        {value}
+      </ComboboxTrigger>
+      <ComboboxContent>
+        <ComboboxSearch placeholder="Search branches..." />
+        <ComboboxList>
+          <ComboboxEmpty>No branches found.</ComboboxEmpty>
+          <ComboboxGroup>
+            {branches.map((branch) => (
+              <ComboboxItem key={branch} itemValue={branch}>
+                {branch}
+              </ComboboxItem>
+            ))}
+          </ComboboxGroup>
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}
+
+/* ── Custom trigger content (avatars + supporting text) ──────────────────── */
+
+const people = [
+  { id: "olivia", name: "Olivia Rhye", handle: "@olivia" },
+  { id: "phoenix", name: "Phoenix Baker", handle: "@phoenix" },
+  { id: "lana", name: "Lana Steiner", handle: "@lana" },
+  { id: "demi", name: "Demi Wilkinson", handle: "@demi" },
+];
+
+function AvatarCombobox() {
+  const [value, setValue] = useState<string | null>("olivia");
+  const selected = people.find((person) => person.id === value);
+  return (
+    <Combobox value={value} onValueChange={setValue}>
+      <ComboboxTrigger size="md" placeholder="Select team member..." className="w-full">
+        {selected && (
+          <>
+            <div className="flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground type-text-xs font-semibold">
+              {selected.name.charAt(0)}
+            </div>
+            {selected.name}
+            <ComboboxItemText>{selected.handle}</ComboboxItemText>
+          </>
+        )}
+      </ComboboxTrigger>
+      <ComboboxContent>
+        <ComboboxSearch placeholder="Search people..." />
+        <ComboboxList>
+          <ComboboxEmpty>No one found.</ComboboxEmpty>
+          <ComboboxGroup>
+            {people.map((person) => (
+              <ComboboxItem key={person.id} itemValue={person.id}>
+                <div className="flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground type-text-xs font-semibold">
+                  {person.name.charAt(0)}
+                </div>
+                {person.name}
+                <ComboboxItemText>{person.handle}</ComboboxItemText>
+              </ComboboxItem>
+            ))}
+          </ComboboxGroup>
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}
+
+/* ── With CommandItem action ─────────────────────────────────────────────── */
+
+const namespaces = [
+  { id: "acme", name: "acme-corp" },
+  { id: "personal", name: "johndoe" },
+];
+
+function CommandActionCombobox() {
+  const [value, setValue] = useState<string | null>("acme");
+  const selected = namespaces.find((ns) => ns.id === value);
+  return (
+    <Combobox value={value} onValueChange={setValue}>
+      <ComboboxTrigger size="sm" placeholder="Select account..." className="w-full">
+        {selected?.name}
+      </ComboboxTrigger>
+      <ComboboxContent>
+        <ComboboxList>
+          <ComboboxGroup>
+            {namespaces.map((ns) => (
+              <ComboboxItem key={ns.id} itemValue={ns.id}>
+                {ns.name}
+              </ComboboxItem>
+            ))}
+          </ComboboxGroup>
+          <ComboboxSeparator />
+          <ComboboxGroup>
+            <CommandItem onSelect={() => alert("Add account action triggered")}>
+              <Plus />
+              <span>Add Account</span>
+            </CommandItem>
+          </ComboboxGroup>
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}
+
+/* ── Grouped with headings ───────────────────────────────────────────────── */
+
+function GroupedCombobox() {
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <Combobox value={value} onValueChange={setValue}>
+      <ComboboxTrigger size="md" placeholder="Select a region..." className="w-full">
+        <Globe className="size-4" />
+        {value}
+      </ComboboxTrigger>
+      <ComboboxContent>
+        <ComboboxList>
+          <ComboboxGroup heading="North America">
+            <ComboboxItem itemValue="us-east-1">US East (N. Virginia)</ComboboxItem>
+            <ComboboxItem itemValue="us-west-2">US West (Oregon)</ComboboxItem>
+          </ComboboxGroup>
+          <ComboboxSeparator />
+          <ComboboxGroup heading="Europe">
+            <ComboboxItem itemValue="eu-west-1">EU West (Ireland)</ComboboxItem>
+            <ComboboxItem itemValue="eu-central-1">EU Central (Frankfurt)</ComboboxItem>
+          </ComboboxGroup>
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}
+
+/* ── Multi-select with tags ───────────────────────────────────────────────── */
+
+function MultiCombobox() {
+  const [values, setValues] = useState<string[]>(["phoenix", "olivia"]);
+  return (
+    <Combobox multiple value={values} onValueChange={setValues}>
+      <ComboboxTrigger size="md" placeholder="Select team members..." className="w-full" />
+      <ComboboxContent>
+        <ComboboxSearch placeholder="Search people..." />
+        <ComboboxList>
+          <ComboboxEmpty>No one found.</ComboboxEmpty>
+          <ComboboxGroup>
+            {people.map((person) => (
+              <ComboboxItem key={person.id} itemValue={person.id}>
+                <div className="flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground type-text-xs font-semibold">
+                  {person.name.charAt(0)}
+                </div>
+                {person.name}
+                <ComboboxItemText>{person.handle}</ComboboxItemText>
+              </ComboboxItem>
+            ))}
+          </ComboboxGroup>
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}
+
+/* ── Story ────────────────────────────────────────────────────────────────── */
+
+export const AllVariants: Story = () => (
+  <div className="grid grid-cols-1 gap-10 p-10 md:grid-cols-2">
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Search with filtering</p>
+      <SearchCombobox />
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Custom trigger (avatars + supporting text)</p>
+      <AvatarCombobox />
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">CommandItem action (Add Account)</p>
+      <CommandActionCombobox />
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Grouped with headings</p>
+      <GroupedCombobox />
+    </div>
+
+    <div className="flex flex-col gap-1.5 md:col-span-2">
+      <p className="type-text-xs font-medium text-subtle-foreground">Multi-select with tags</p>
+      <MultiCombobox />
+    </div>
+  </div>
+);

package/src/stories/command.stories.tsx

@@ -0,0 +1,95 @@
+import type { Story } from "@ladle/react";
+import { Calculator, Calendar, CreditCard, Settings, Smile, User } from "lucide-react";
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "../components/command";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-8">
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Default with groups</p>
+      <Command className="max-w-[400px] rounded-lg border shadow-md">
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Suggestions">
+            <CommandItem>
+              <Calendar />
+              <span>Calendar</span>
+            </CommandItem>
+            <CommandItem>
+              <Smile />
+              <span>Search Emoji</span>
+            </CommandItem>
+            <CommandItem>
+              <Calculator />
+              <span>Calculator</span>
+            </CommandItem>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Settings">
+            <CommandItem>
+              <User />
+              <span>Profile</span>
+              <CommandShortcut>⌘P</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <CreditCard />
+              <span>Billing</span>
+              <CommandShortcut>⌘B</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <Settings />
+              <span>Settings</span>
+              <CommandShortcut>⌘S</CommandShortcut>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Disabled items</p>
+      <Command className="max-w-[400px] rounded-lg border shadow-md">
+        <CommandInput placeholder="Search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Actions">
+            <CommandItem>
+              <Calendar />
+              <span>Available action</span>
+            </CommandItem>
+            <CommandItem disabled>
+              <Settings />
+              <span>Disabled action</span>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Empty state</p>
+      <Command className="max-w-[400px] rounded-lg border shadow-md">
+        <CommandInput placeholder="Search..." value="zzzzz" />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Items">
+            <CommandItem>
+              <Calendar />
+              <span>Calendar</span>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </div>
+  </div>
+);

package/src/stories/copyable.stories.tsx

@@ -0,0 +1,29 @@
+import type { Story } from "@ladle/react";
+import { Copyable, CopyableUrl } from "../components/copyable";
+
+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">With plain text</p>
+      <Copyable content="sk-1234-abcd-5678">
+        <span className="type-text-sm font-mono">sk-1234-abcd-5678</span>
+      </Copyable>
+    </div>
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">With URL</p>
+      <Copyable content="https://api.example.com/v1">
+        <span className="type-text-sm font-semibold">api.example.com</span>
+      </Copyable>
+    </div>
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">With styled content</p>
+      <Copyable content="npm install @alpic/sdk">
+        <code className="type-text-sm rounded-sm bg-muted px-1.5 py-0.5 font-mono">npm install @alpic/sdk</code>
+      </Copyable>
+    </div>
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">CopyableUrl</p>
+      <CopyableUrl url={new URL("https://api.example.com/v1/mcp")} />
+    </div>
+  </div>
+);

package/src/stories/description-list.stories.tsx

@@ -0,0 +1,71 @@
+import type { Story } from "@ladle/react";
+import { DescriptionItem, DescriptionList, DescriptionTitle, DescriptionValue } from "../components/description-list";
+
+export const AllVariants: Story = () => (
+  <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">Default — 4 columns on xl</p>
+      <DescriptionList>
+        <DescriptionItem>
+          <DescriptionTitle>Status</DescriptionTitle>
+          <DescriptionValue>Deployed</DescriptionValue>
+        </DescriptionItem>
+        <DescriptionItem>
+          <DescriptionTitle>Duration</DescriptionTitle>
+          <DescriptionValue>2m 34s</DescriptionValue>
+        </DescriptionItem>
+        <DescriptionItem>
+          <DescriptionTitle>Branch</DescriptionTitle>
+          <DescriptionValue>main</DescriptionValue>
+        </DescriptionItem>
+        <DescriptionItem>
+          <DescriptionTitle>Created by</DescriptionTitle>
+          <DescriptionValue>val</DescriptionValue>
+        </DescriptionItem>
+      </DescriptionList>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Spanning columns</p>
+      <DescriptionList>
+        <DescriptionItem className="xl:col-span-2">
+          <DescriptionTitle>Name</DescriptionTitle>
+          <DescriptionValue>Production Environment</DescriptionValue>
+        </DescriptionItem>
+        <DescriptionItem className="xl:col-span-2">
+          <DescriptionTitle>Live URL</DescriptionTitle>
+          <DescriptionValue>https://my-server.alpic.dev/sse</DescriptionValue>
+        </DescriptionItem>
+      </DescriptionList>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">With muted placeholder values</p>
+      <DescriptionList>
+        <DescriptionItem>
+          <DescriptionTitle>Branch</DescriptionTitle>
+          <DescriptionValue className="text-muted-foreground">No branch tracked</DescriptionValue>
+        </DescriptionItem>
+        <DescriptionItem>
+          <DescriptionTitle>Domain</DescriptionTitle>
+          <DescriptionValue className="text-muted-foreground">No domain configured</DescriptionValue>
+        </DescriptionItem>
+      </DescriptionList>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Truncation on long values</p>
+      <div className="max-w-md">
+        <DescriptionList className="grid-cols-1">
+          <DescriptionItem>
+            <DescriptionTitle>Commit message</DescriptionTitle>
+            <DescriptionValue>
+              fix: resolve issue with authentication middleware causing session tokens to be stored incorrectly in
+              production environments
+            </DescriptionValue>
+          </DescriptionItem>
+        </DescriptionList>
+      </div>
+    </div>
+  </div>
+);