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

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

package/src/stories/dialog.stories.tsx

@@ -0,0 +1,135 @@
+import type { Story } from "@ladle/react";
+import { Button } from "../components/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../components/dialog";
+
+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">Small — Horizontal Footer</p>
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="secondary">Open Small Dialog</Button>
+        </DialogTrigger>
+        <DialogContent size="sm">
+          <DialogHeader>
+            <DialogTitle>Blog post published</DialogTitle>
+            <DialogDescription>
+              This blog post has been published. Team members will be able to edit this post and republish changes.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter layout="horizontal">
+            <DialogClose />
+            <Button>Confirm</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Large — Horizontal Footer</p>
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="secondary">Open Large Dialog</Button>
+        </DialogTrigger>
+        <DialogContent size="lg">
+          <DialogHeader>
+            <DialogTitle>Blog post published</DialogTitle>
+            <DialogDescription>
+              This blog post has been published. Team members will be able to edit this post and republish changes.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter layout="horizontal">
+            <DialogClose />
+            <Button>Confirm</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Small — Vertical Footer</p>
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="secondary">Open Vertical Dialog</Button>
+        </DialogTrigger>
+        <DialogContent size="sm">
+          <DialogHeader>
+            <DialogTitle>Confirm action</DialogTitle>
+            <DialogDescription>Are you sure you want to proceed? This action cannot be undone.</DialogDescription>
+          </DialogHeader>
+          <DialogFooter layout="vertical">
+            <Button>Confirm</Button>
+            <DialogClose />
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Custom Cancel Label</p>
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="secondary">Open Custom Cancel</Button>
+        </DialogTrigger>
+        <DialogContent size="sm">
+          <DialogHeader>
+            <DialogTitle>Cancel invitation</DialogTitle>
+            <DialogDescription>Are you sure you want to cancel this invitation?</DialogDescription>
+          </DialogHeader>
+          <DialogFooter layout="horizontal">
+            <DialogClose>Keep</DialogClose>
+            <Button variant="destructive">Cancel Invitation</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Single CTA (No Cancel)</p>
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="secondary">Open (Single CTA)</Button>
+        </DialogTrigger>
+        <DialogContent size="sm" showCloseButton={false}>
+          <DialogHeader>
+            <DialogTitle>Required action</DialogTitle>
+            <DialogDescription>You must complete this action before continuing.</DialogDescription>
+          </DialogHeader>
+          <DialogFooter layout="horizontal">
+            <Button>Continue</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Destructive</p>
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="destructive">Delete Project</Button>
+        </DialogTrigger>
+        <DialogContent size="sm">
+          <DialogHeader>
+            <DialogTitle>Delete project</DialogTitle>
+            <DialogDescription>
+              This will permanently delete the project and all associated data. This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter layout="horizontal">
+            <DialogClose />
+            <Button variant="destructive">Delete</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  </div>
+);