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

package/src/stories/dropdown-menu.stories.tsx

@@ -0,0 +1,191 @@
+import type { Story } from "@ladle/react";
+import {
+  Cloud,
+  CreditCard,
+  GitBranch,
+  Keyboard,
+  LifeBuoy,
+  LogOut,
+  Mail,
+  MessageSquare,
+  Plus,
+  PlusCircle,
+  Settings,
+  Trash2,
+  User,
+  UserPlus,
+  Users,
+} from "lucide-react";
+import { Button } from "../components/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuHeader,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "../components/dropdown-menu";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-10 p-10">
+    {/* Basic with icons & shortcuts */}
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Default with icons &amp; shortcuts</p>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="secondary">Open menu</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56">
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <User />
+              Profile
+              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <CreditCard />
+              Billing
+              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Settings />
+              Settings
+              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Keyboard />
+              Keyboard shortcuts
+              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <Users />
+              Team
+            </DropdownMenuItem>
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>
+                <UserPlus />
+                Invite users
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem>
+                  <Mail />
+                  Email
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <MessageSquare />
+                  Message
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <PlusCircle />
+                  More...
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+            <DropdownMenuItem>
+              <Plus />
+              New Team
+              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <GitBranch />
+            GitHub
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <LifeBuoy />
+            Support
+          </DropdownMenuItem>
+          <DropdownMenuItem disabled>
+            <Cloud />
+            API
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem variant="destructive">
+            <LogOut />
+            Log out
+            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+
+    {/* Destructive variant */}
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Destructive item</p>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="secondary">Actions</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>
+            <Settings />
+            Settings
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem variant="destructive">
+            <Trash2 />
+            Delete
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+
+    {/* Header with avatar */}
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">With header (avatar group)</p>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="secondary">Account</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-60">
+          <DropdownMenuHeader>
+            <div className="flex size-10 items-center justify-center rounded-full bg-primary text-primary-foreground type-text-sm font-semibold">
+              OR
+            </div>
+            <div className="flex flex-col">
+              <span className="type-text-sm font-semibold text-foreground">Olivia Rhye</span>
+              <span className="type-text-sm text-subtle-foreground">olivia@alpic.ai</span>
+            </div>
+          </DropdownMenuHeader>
+          <DropdownMenuItem>
+            <Settings />
+            Settings
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem variant="destructive">
+            <LogOut />
+            Log out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+
+    {/* Disabled items */}
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Disabled items</p>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="secondary">Options</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Enabled item</DropdownMenuItem>
+          <DropdownMenuItem disabled>Disabled item</DropdownMenuItem>
+          <DropdownMenuItem>Another enabled item</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  </div>
+);

package/src/stories/form.stories.tsx

@@ -0,0 +1,91 @@
+import type { Story } from "@ladle/react";
+import { useForm } from "react-hook-form";
+import { Form, FormFields, FormHeader, InputField, SelectField, TextareaField } from "../components/form";
+
+/* ── Types ───────────────────────────────────────────────────────────────── */
+
+interface CreateProjectForm {
+  email: string;
+  role: string;
+  description: string;
+}
+
+const roles = [
+  { value: "admin", label: "Admin" },
+  { value: "editor", label: "Editor" },
+  { value: "viewer", label: "Viewer" },
+];
+
+/* ── Composed Form ───────────────────────────────────────────────────────── */
+
+function ComposedForm() {
+  const form = useForm<CreateProjectForm>({
+    defaultValues: { email: "", role: "", description: "" },
+  });
+
+  const onSubmit = (data: CreateProjectForm) => {
+    alert(JSON.stringify(data, null, 2));
+  };
+
+  return (
+    <div className="flex flex-col max-w-[480px] p-6 rounded-2xl border border-border bg-background">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <FormHeader title="Create project" description="Set up your new project with a few details." />
+
+          <div className="flex flex-col gap-8 pt-12">
+            <FormFields>
+              <InputField
+                control={form.control}
+                name="email"
+                rules={{ required: "Email is required." }}
+                label="Email"
+                placeholder="you@company.com"
+                description="We'll use this to send you notifications."
+                required
+              />
+
+              <SelectField
+                control={form.control}
+                name="role"
+                rules={{ required: "Role is required." }}
+                label="Role"
+                placeholder="Select a role..."
+                options={roles}
+                required
+              />
+
+              <TextareaField
+                control={form.control}
+                name="description"
+                rules={{ required: "Description is required." }}
+                label="Description"
+                tooltip="Briefly describe what this project is about."
+                placeholder="A short description of your project..."
+                required
+              />
+            </FormFields>
+
+            <button
+              type="submit"
+              className="flex h-12 w-full items-center justify-center rounded-md bg-primary px-2 type-text-sm font-medium text-primary-foreground"
+            >
+              Get started
+            </button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}
+
+/* ── Story ────────────────────────────────────────────────────────────────── */
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-3">
+    <p className="type-text-xs font-medium text-subtle-foreground uppercase tracking-wide">
+      Composed form (all field types)
+    </p>
+    <ComposedForm />
+  </div>
+);

package/src/stories/input-group.stories.tsx

@@ -0,0 +1,63 @@
+import type { Story } from "@ladle/react";
+import { Paperclip, Send } from "lucide-react";
+
+import { InputGroup, InputGroupAddon, InputGroupTextarea } from "../components/input-group";
+
+const SECTION_HEADER = "type-text-xs font-medium text-muted-foreground uppercase tracking-wide pt-4";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-6 p-8 max-w-lg">
+    {/* Textarea with block-end addon */}
+    <span className={SECTION_HEADER}>Textarea + block-end footer</span>
+    <InputGroup>
+      <InputGroupTextarea placeholder="Type a message…" />
+      <InputGroupAddon align="block-end" className="justify-between">
+        <button type="button" className="p-1.5 text-muted-foreground">
+          <Paperclip className="size-4" />
+        </button>
+        <button type="button" className="p-1.5 text-primary">
+          <Send className="size-4" />
+        </button>
+      </InputGroupAddon>
+    </InputGroup>
+
+    {/* Inline-start addon */}
+    <span className={SECTION_HEADER}>Inline-start addon (icon)</span>
+    <InputGroup>
+      <InputGroupAddon align="inline-start">
+        <Paperclip className="size-4" />
+      </InputGroupAddon>
+      <input
+        data-slot="input-group-control"
+        className="flex-1 min-w-0 bg-transparent py-2 pr-3 outline-none type-text-md text-foreground placeholder:text-placeholder"
+        placeholder="Search files…"
+      />
+    </InputGroup>
+
+    {/* Inline-end addon */}
+    <span className={SECTION_HEADER}>Inline-end addon (button)</span>
+    <InputGroup>
+      <input
+        data-slot="input-group-control"
+        className="flex-1 min-w-0 bg-transparent py-2 pl-3 outline-none type-text-md text-foreground placeholder:text-placeholder"
+        placeholder="Enter a prompt…"
+      />
+      <InputGroupAddon align="inline-end">
+        <button type="button" className="p-1 text-primary">
+          <Send className="size-4" />
+        </button>
+      </InputGroupAddon>
+    </InputGroup>
+
+    {/* Disabled state */}
+    <span className={SECTION_HEADER}>Disabled</span>
+    <InputGroup>
+      <InputGroupTextarea placeholder="Cannot type here…" disabled />
+      <InputGroupAddon align="block-end" className="justify-end">
+        <button type="button" className="p-1.5 text-muted-foreground opacity-50" disabled>
+          <Send className="size-4" />
+        </button>
+      </InputGroupAddon>
+    </InputGroup>
+  </div>
+);

package/src/stories/input.stories.tsx

@@ -0,0 +1,72 @@
+import type { Story } from "@ladle/react";
+import { Mail } from "lucide-react";
+
+import { Input } from "../components/input";
+
+const SECTION_HEADER = "type-text-xs font-medium text-muted-foreground uppercase tracking-wide pt-4";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-6 p-8 max-w-sm">
+    {/* Default */}
+    <span className={SECTION_HEADER}>Default</span>
+    <Input id="default" placeholder="alice@example.com" />
+
+    {/* With label + hint */}
+    <span className={SECTION_HEADER}>With label + hint</span>
+    <Input
+      id="with-label"
+      label="Email"
+      required
+      placeholder="alice@example.com"
+      hint="This is a hint text to help user."
+    />
+
+    {/* With tooltip */}
+    <span className={SECTION_HEADER}>With tooltip</span>
+    <Input
+      id="with-tooltip"
+      label="Email"
+      required
+      tooltip="We'll use this to send you notifications."
+      placeholder="alice@example.com"
+    />
+
+    {/* Error */}
+    <span className={SECTION_HEADER}>Error</span>
+    <Input
+      id="error"
+      label="Email"
+      required
+      placeholder="alice@example.com"
+      error="Please enter a valid email address."
+    />
+
+    {/* Disabled */}
+    <span className={SECTION_HEADER}>Disabled</span>
+    <Input
+      id="disabled"
+      label="Email"
+      placeholder="alice@example.com"
+      hint="This is a hint text to help user."
+      disabled
+    />
+
+    {/* Leading icon */}
+    <span className={SECTION_HEADER}>Leading icon (email)</span>
+    <Input id="leading-icon" label="Email" required placeholder="alice@example.com" leadingIcon={<Mail />} />
+
+    {/* Leading text (website) */}
+    <span className={SECTION_HEADER}>Leading text</span>
+    <Input id="leading-text" label="Website" required placeholder="www.example.com" leadingText="http://" />
+
+    {/* Small size */}
+    <span className={SECTION_HEADER}>Small size</span>
+    <Input id="sm-default" size="sm" placeholder="alice@example.com" label="Email" />
+
+    <span className={SECTION_HEADER}>Small + leading icon</span>
+    <Input id="sm-icon" size="sm" placeholder="alice@example.com" leadingIcon={<Mail />} />
+
+    <span className={SECTION_HEADER}>Small + leading text</span>
+    <Input id="sm-text" size="sm" placeholder="www.example.com" leadingText="http://" />
+  </div>
+);

package/src/stories/label.stories.tsx

@@ -0,0 +1,26 @@
+import type { Story } from "@ladle/react";
+import { Label } from "../components/label";
+
+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">Default</p>
+      <Label>Email address</Label>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">With input</p>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="email">Email address</Label>
+        <input id="email" type="email" placeholder="you@example.com" className="rounded-md border px-3 py-2 text-sm" />
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Disabled</p>
+      <div className="group" data-disabled="true">
+        <Label>Disabled label</Label>
+      </div>
+    </div>
+  </div>
+);

package/src/stories/ladle.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "../styles/tokens.css";

package/src/stories/pagination.stories.tsx

@@ -0,0 +1,35 @@
+import type { Story } from "@ladle/react";
+import { useState } from "react";
+
+import { Pagination } from "../components/pagination";
+
+const SECTION_HEADER = "type-text-xs font-medium text-muted-foreground uppercase tracking-wide pt-4";
+
+export const AllVariants: Story = () => {
+  const [page, setPage] = useState(1);
+
+  return (
+    <div className="flex flex-col gap-8 p-8 max-w-lg">
+      <div>
+        <p className={SECTION_HEADER}>Interactive</p>
+        <Pagination className="mt-4" currentPage={page} totalPages={5} onPageChange={setPage} />
+      </div>
+
+      <div>
+        <p className={SECTION_HEADER}>First page (previous disabled)</p>
+        <Pagination className="mt-4" currentPage={1} totalPages={10} onPageChange={() => {}} />
+      </div>
+
+      <div>
+        <p className={SECTION_HEADER}>Last page (next disabled)</p>
+        <Pagination className="mt-4" currentPage={10} totalPages={10} onPageChange={() => {}} />
+      </div>
+
+      <div>
+        <p className={SECTION_HEADER}>Single page (hidden)</p>
+        <Pagination className="mt-4" currentPage={1} totalPages={1} onPageChange={() => {}} />
+        <p className="type-text-xs text-muted-foreground mt-2">Nothing renders when totalPages &lt;= 1</p>
+      </div>
+    </div>
+  );
+};

package/src/stories/popover.stories.tsx

@@ -0,0 +1,34 @@
+import type { Story } from "@ladle/react";
+import { Button } from "../components/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../components/popover";
+
+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">Default</p>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="secondary">Open popover</Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <div className="flex flex-col gap-2">
+            <p className="type-text-sm font-semibold text-foreground">Popover content</p>
+            <p className="type-text-sm text-muted-foreground">This is a generic floating container.</p>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Align: start</p>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="secondary">Align start</Button>
+        </PopoverTrigger>
+        <PopoverContent align="start">
+          <p className="type-text-sm text-muted-foreground">Aligned to the start of the trigger.</p>
+        </PopoverContent>
+      </Popover>
+    </div>
+  </div>
+);

package/src/stories/radio-group.stories.tsx

@@ -0,0 +1,59 @@
+import type { Story } from "@ladle/react";
+import { Label } from "../components/label";
+import { RadioGroup, RadioGroupItem } from "../components/radio-group";
+
+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">Default</p>
+      <RadioGroup defaultValue="option-1">
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="option-1" id="r1" />
+          <Label htmlFor="r1">Option one</Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="option-2" id="r2" />
+          <Label htmlFor="r2">Option two</Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="option-3" id="r3" />
+          <Label htmlFor="r3">Option three</Label>
+        </div>
+      </RadioGroup>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Disabled</p>
+      <RadioGroup defaultValue="option-1" disabled>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="option-1" id="r4" />
+          <Label htmlFor="r4">Option one</Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="option-2" id="r5" />
+          <Label htmlFor="r5">Option two</Label>
+        </div>
+      </RadioGroup>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">With description</p>
+      <RadioGroup defaultValue="auto">
+        <div className="flex gap-2">
+          <RadioGroupItem value="auto" id="r6" className="mt-0.5" />
+          <div className="flex flex-col">
+            <Label htmlFor="r6">Auto-detect</Label>
+            <p className="type-text-sm text-subtle-foreground">Automatically detect the root directory.</p>
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <RadioGroupItem value="manual" id="r7" className="mt-0.5" />
+          <div className="flex flex-col">
+            <Label htmlFor="r7">Manual</Label>
+            <p className="type-text-sm text-subtle-foreground">Specify the root directory manually.</p>
+          </div>
+        </div>
+      </RadioGroup>
+    </div>
+  </div>
+);

package/src/stories/scroll-area.stories.tsx

@@ -0,0 +1,43 @@
+import type { Story } from "@ladle/react";
+import { ScrollArea, ScrollBar } from "../components/scroll-area";
+import { Separator } from "../components/separator";
+
+const tags = Array.from({ length: 50 }).map((_, index) => `v1.2.0-beta.${index}`);
+
+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">Vertical</p>
+      <ScrollArea className="h-72 w-48 rounded-md border">
+        <div className="p-4">
+          <h4 className="type-text-sm font-semibold">Tags</h4>
+          {tags.map((tag) => (
+            <div key={tag}>
+              <div className="type-text-sm py-2">{tag}</div>
+              <Separator />
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Horizontal</p>
+      <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+        <div className="flex gap-4 p-4">
+          {["Alpha", "Beta", "Gamma", "Delta", "Epsilon", "Zeta", "Eta", "Theta", "Iota", "Kappa", "Lambda", "Mu"].map(
+            (label) => (
+              <div
+                key={label}
+                className="flex h-24 w-36 shrink-0 items-center justify-center rounded-md bg-muted type-text-sm"
+              >
+                {label}
+              </div>
+            ),
+          )}
+        </div>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+    </div>
+  </div>
+);