@alpic-ai/ui 0.0.0 → 1.111.0

package/src/stories/select.stories.tsx

@@ -0,0 +1,95 @@
+import type { Story } from "@ladle/react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "../components/select";
+
+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">Default (md)</p>
+      <Select>
+        <SelectTrigger size="md" className="w-full">
+          <SelectValue placeholder="Select a fruit..." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="cherry">Cherry</SelectItem>
+          <SelectItem value="dragonfruit">Dragonfruit</SelectItem>
+          <SelectItem value="elderberry">Elderberry</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Size: sm (pre-selected)</p>
+      <Select defaultValue="banana">
+        <SelectTrigger size="sm" className="w-full">
+          <SelectValue placeholder="Select..." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="cherry">Cherry</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Grouped with labels</p>
+      <Select>
+        <SelectTrigger size="md" className="w-full">
+          <SelectValue placeholder="Select a region..." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>North America</SelectLabel>
+            <SelectItem value="us-east-1">US East (N. Virginia)</SelectItem>
+            <SelectItem value="us-west-2">US West (Oregon)</SelectItem>
+          </SelectGroup>
+          <SelectSeparator />
+          <SelectGroup>
+            <SelectLabel>Europe</SelectLabel>
+            <SelectItem value="eu-west-1">EU West (Ireland)</SelectItem>
+            <SelectItem value="eu-central-1">EU Central (Frankfurt)</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Disabled</p>
+      <Select defaultValue="apple" disabled>
+        <SelectTrigger size="md" className="w-full">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Disabled items</p>
+      <Select>
+        <SelectTrigger size="md" className="w-full">
+          <SelectValue placeholder="Select..." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="available">Available option</SelectItem>
+          <SelectItem value="unavailable" disabled>
+            Unavailable option
+          </SelectItem>
+          <SelectItem value="another">Another option</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  </div>
+);

package/src/stories/separator.stories.tsx

@@ -0,0 +1,36 @@
+import type { Story } from "@ladle/react";
+import { Separator } from "../components/separator";
+
+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">Horizontal (default)</p>
+      <div className="flex flex-col gap-3">
+        <p className="type-text-sm">Content above</p>
+        <Separator />
+        <p className="type-text-sm">Content below</p>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Vertical</p>
+      <div className="flex items-center gap-3 h-6">
+        <span className="type-text-sm">Left</span>
+        <Separator orientation="vertical" />
+        <span className="type-text-sm">Right</span>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">In a menu-like list</p>
+      <div className="flex flex-col rounded-lg border p-1">
+        <div className="rounded-md px-3 py-1.5 type-text-sm">Item one</div>
+        <div className="rounded-md px-3 py-1.5 type-text-sm">Item two</div>
+        <Separator className="my-1" />
+        <div className="rounded-md px-3 py-1.5 type-text-sm">Item three</div>
+        <Separator className="my-1" />
+        <div className="rounded-md px-3 py-1.5 type-text-sm text-destructive">Delete</div>
+      </div>
+    </div>
+  </div>
+);

package/src/stories/sheet.stories.tsx

@@ -0,0 +1,76 @@
+import type { Story } from "@ladle/react";
+import { Button } from "../components/button";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "../components/sheet";
+
+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">Right (default)</p>
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant="secondary">Open Right Sheet</Button>
+        </SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Edit profile</SheetTitle>
+            <SheetDescription>Make changes to your profile here. Click save when you're done.</SheetDescription>
+          </SheetHeader>
+          <div className="flex-1 px-4">
+            <p className="type-text-sm text-muted-foreground">Sheet content goes here.</p>
+          </div>
+          <SheetFooter>
+            <SheetClose asChild>
+              <Button variant="secondary">Cancel</Button>
+            </SheetClose>
+            <Button>Save changes</Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Left</p>
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant="secondary">Open Left Sheet</Button>
+        </SheetTrigger>
+        <SheetContent side="left">
+          <SheetHeader>
+            <SheetTitle>Navigation</SheetTitle>
+            <SheetDescription>Browse sections of the application.</SheetDescription>
+          </SheetHeader>
+          <div className="flex-1 px-4">
+            <p className="type-text-sm text-muted-foreground">Navigation content here.</p>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Bottom</p>
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant="secondary">Open Bottom Sheet</Button>
+        </SheetTrigger>
+        <SheetContent side="bottom">
+          <SheetHeader>
+            <SheetTitle>Filters</SheetTitle>
+            <SheetDescription>Adjust filters to refine your results.</SheetDescription>
+          </SheetHeader>
+          <div className="px-4 pb-4">
+            <p className="type-text-sm text-muted-foreground">Filter controls here.</p>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </div>
+  </div>
+);

package/src/stories/sidebar.stories.tsx

@@ -0,0 +1,255 @@
+import type { Story } from "@ladle/react";
+import { ChevronDownIcon, CodeIcon, CreditCardIcon, KeyIcon, SettingsIcon, UsersIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarSeparator,
+  SidebarTrigger,
+} from "../components/sidebar";
+
+/**
+ * Wraps stories so `fixed` inside SidebarProvider becomes `absolute`
+ * relative to this container (via `transform: scale(1)` trick).
+ */
+function StoryFrame({ children, height = 600 }: { children: ReactNode; height?: number }) {
+  return (
+    <div
+      className="relative overflow-hidden rounded-lg border [&_[data-slot=sidebar-wrapper]]:min-h-full [&_[data-slot=sidebar-container]]:h-full"
+      style={{ height, transform: "scale(1)" }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function TeamHeader() {
+  return <SidebarHeader icon={<div className="size-4 rounded-xs bg-inverted" />} title="Alpic" />;
+}
+
+function UserFooter() {
+  return (
+    <SidebarFooter className="px-3 pb-4">
+      <div className="flex items-center gap-1.5 rounded-md px-2 h-8 group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0">
+        <div className="size-5 rounded-full bg-sidebar-accent border border-sidebar-border shrink-0" />
+        <span className="type-text-sm font-medium text-sidebar-primary group-data-[collapsible=icon]:hidden">
+          Alice Dupont
+        </span>
+      </div>
+    </SidebarFooter>
+  );
+}
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-4">
+    <StoryFrame>
+      <SidebarProvider defaultOpen>
+        <Sidebar collapsible="icon">
+          <TeamHeader />
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>
+                      <CodeIcon />
+                      <span>Projects</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>
+                      <SettingsIcon />
+                      <span>Settings</span>
+                    </SidebarMenuButton>
+                    <SidebarMenuSub>
+                      <SidebarMenuSubItem>
+                        <SidebarMenuSubButton isActive>
+                          <span>General</span>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                      <SidebarMenuSubItem>
+                        <SidebarMenuSubButton>
+                          <span>Notifications</span>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                      <SidebarMenuSubItem>
+                        <SidebarMenuSubButton>
+                          <span>Integrations</span>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    </SidebarMenuSub>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>
+                      <UsersIcon />
+                      <span>Members</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+          <UserFooter />
+        </Sidebar>
+        <SidebarInset>
+          <div className="p-4">
+            <span className="type-text-sm text-muted-foreground">Sub-menus expand inline under their parent</span>
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+    </StoryFrame>
+    <StoryFrame>
+      <SidebarProvider defaultOpen>
+        <Sidebar collapsible="icon">
+          <TeamHeader />
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Workspace</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton isActive>
+                      <CodeIcon />
+                      <span>Projects</span>
+                    </SidebarMenuButton>
+                    <SidebarMenuBadge>12</SidebarMenuBadge>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>
+                      <UsersIcon />
+                      <span>Members</span>
+                    </SidebarMenuButton>
+                    <SidebarMenuBadge>3</SidebarMenuBadge>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>
+                      <KeyIcon />
+                      <span>API keys</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+            <SidebarSeparator />
+            <SidebarGroup>
+              <SidebarGroupLabel>Account</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>
+                      <SettingsIcon />
+                      <span>Settings</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>
+                      <CreditCardIcon />
+                      <span>Billing</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+          <UserFooter />
+        </Sidebar>
+        <SidebarInset>
+          <div className="p-4">
+            <span className="type-text-sm text-muted-foreground">Groups with labels, badges, and separator</span>
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+    </StoryFrame>
+    <StoryFrame height={400}>
+      <SidebarProvider defaultOpen>
+        <Sidebar collapsible="icon">
+          <TeamHeader />
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {["skeleton-1", "skeleton-2", "skeleton-3", "skeleton-4", "skeleton-5"].map((key) => (
+                    <SidebarMenuItem key={key}>
+                      <SidebarMenuSkeleton />
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+          <UserFooter />
+        </Sidebar>
+        <SidebarInset>
+          <div className="p-4">
+            <span className="type-text-sm text-muted-foreground">Loading state with skeleton placeholders</span>
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+    </StoryFrame>
+    <StoryFrame>
+      <SidebarProvider defaultOpen={false}>
+        <Sidebar collapsible="offcanvas">
+          <SidebarHeader className="px-3 pt-4 pb-0">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-1.5 rounded-md bg-sidebar-accent px-2 h-8">
+                <div className="size-5 rounded-xs bg-inverted shrink-0" />
+                <span className="type-text-sm font-medium text-sidebar-primary">Alpic</span>
+                <ChevronDownIcon className="size-4 text-sidebar-foreground" />
+              </div>
+            </div>
+          </SidebarHeader>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton isActive>
+                      <CodeIcon />
+                      <span>Projects</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>
+                      <UsersIcon />
+                      <span>Members</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>
+                      <SettingsIcon />
+                      <span>Settings</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+          <UserFooter />
+        </Sidebar>
+        <SidebarInset>
+          <div className="flex items-center gap-2 p-4">
+            <SidebarTrigger />
+            <span className="type-text-sm text-muted-foreground">
+              Activate the mobile mode in your browser to see the mobile version
+            </span>
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+    </StoryFrame>
+  </div>
+);

package/src/stories/skeleton.stories.tsx

@@ -0,0 +1,47 @@
+import type { Story } from "@ladle/react";
+
+import { Skeleton } from "../components/skeleton";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-8">
+    {/* Shape variants */}
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Rectangle (default)</p>
+      <div className="flex flex-col gap-2">
+        <Skeleton className="h-4 w-48" />
+        <Skeleton className="h-4 w-36" />
+        <Skeleton className="h-4 w-52" />
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Circle</p>
+      <div className="flex items-center gap-3">
+        <Skeleton shape="circle" className="size-8" />
+        <Skeleton shape="circle" className="size-10" />
+        <Skeleton shape="circle" className="size-14" />
+      </div>
+    </div>
+
+    {/* Common compositions */}
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Card placeholder</p>
+      <div className="flex flex-col gap-3 rounded-lg border border-border p-4">
+        <Skeleton className="h-5 w-40" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-3/4" />
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">List item with avatar</p>
+      <div className="flex items-center gap-3">
+        <Skeleton shape="circle" className="size-10 shrink-0" />
+        <div className="flex flex-1 flex-col gap-2">
+          <Skeleton className="h-4 w-32" />
+          <Skeleton className="h-3 w-48" />
+        </div>
+      </div>
+    </div>
+  </div>
+);

package/src/stories/sonner.stories.tsx

@@ -0,0 +1,91 @@
+import type { Story } from "@ladle/react";
+import { Mail, RotateCcw } from "lucide-react";
+import { ActionToast, Toaster, toast } from "../components/sonner";
+
+export const AllVariants: Story = () => (
+  <div className="flex min-h-80 flex-col gap-6">
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Standard toasts — click to trigger</p>
+      <div className="flex flex-wrap gap-2">
+        <button
+          type="button"
+          className="h-8 rounded-md border border-border bg-background px-3 type-text-sm font-medium text-foreground [@media(hover:hover)]:hover:bg-background-hover"
+          onClick={() => toast.success("Changes saved", { description: "Your project settings have been updated." })}
+        >
+          Success
+        </button>
+        <button
+          type="button"
+          className="h-8 rounded-md border border-border bg-background px-3 type-text-sm font-medium text-foreground [@media(hover:hover)]:hover:bg-background-hover"
+          onClick={() => toast.error("Deployment failed", { description: "Build exited with code 1. Check the logs." })}
+        >
+          Error
+        </button>
+        <button
+          type="button"
+          className="h-8 rounded-md border border-border bg-background px-3 type-text-sm font-medium text-foreground [@media(hover:hover)]:hover:bg-background-hover"
+          onClick={() =>
+            toast.warning("Rate limit approaching", { description: "You've used 90% of your monthly quota." })
+          }
+        >
+          Warning
+        </button>
+        <button
+          type="button"
+          className="h-8 rounded-md border border-border bg-background px-3 type-text-sm font-medium text-foreground [@media(hover:hover)]:hover:bg-background-hover"
+          onClick={() =>
+            toast.info("New version available", { description: "v2.4.0 includes performance improvements." })
+          }
+        >
+          Info
+        </button>
+        <button
+          type="button"
+          className="h-8 rounded-md border border-border bg-background px-3 type-text-sm font-medium text-foreground [@media(hover:hover)]:hover:bg-background-hover"
+          onClick={() => toast.loading("Deploying...")}
+        >
+          Loading
+        </button>
+        <button
+          type="button"
+          className="h-8 rounded-md border border-border bg-background px-3 type-text-sm font-medium text-foreground [@media(hover:hover)]:hover:bg-background-hover"
+          onClick={() => toast("File uploaded", { closeButton: true })}
+        >
+          With Close
+        </button>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">ActionToast</p>
+      <div className="flex max-w-sm flex-col gap-4">
+        <div className="rounded-lg border border-border bg-background p-4 shadow-md">
+          <ActionToast
+            toastId="story-1"
+            title="Environment variables added"
+            description="A new deployment is needed for changes to take effect."
+            confirm={{ label: "Redeploy", icon: <RotateCcw />, onClick: () => {} }}
+          />
+        </div>
+        <div className="rounded-lg border border-border bg-background p-4 shadow-md">
+          <ActionToast
+            toastId="story-2"
+            title="Redeploying..."
+            description="A new deployment is needed for changes to take effect."
+            confirm={{ label: "Redeploy", icon: <RotateCcw />, onClick: () => {}, loading: true }}
+          />
+        </div>
+        <div className="rounded-lg border border-border bg-background p-4 shadow-md">
+          <ActionToast
+            toastId="story-3"
+            title="Stay in the loop!"
+            description="We ship new features regularly. Get a quick update when something useful drops."
+            confirm={{ label: "Subscribe", icon: <Mail />, onClick: () => {} }}
+          />
+        </div>
+      </div>
+    </div>
+
+    <Toaster />
+  </div>
+);

package/src/stories/spinner.stories.tsx

@@ -0,0 +1,66 @@
+import type { Story } from "@ladle/react";
+
+import { Spinner, SpinnerBlock } from "../components/spinner";
+
+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">Sizes</p>
+      <div className="flex items-center gap-4">
+        <div className="flex flex-col items-center gap-1.5">
+          <Spinner size="sm" />
+          <p className="type-text-xs text-muted-foreground">sm</p>
+        </div>
+        <div className="flex flex-col items-center gap-1.5">
+          <Spinner size="md" />
+          <p className="type-text-xs text-muted-foreground">md</p>
+        </div>
+        <div className="flex flex-col items-center gap-1.5">
+          <Spinner size="lg" />
+          <p className="type-text-xs text-muted-foreground">lg</p>
+        </div>
+        <div className="flex flex-col items-center gap-1.5">
+          <Spinner size="xl" />
+          <p className="type-text-xs text-muted-foreground">xl</p>
+        </div>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Variants</p>
+      <div className="flex items-center gap-4">
+        <div className="flex flex-col items-center gap-1.5">
+          <Spinner size="lg" variant="primary" />
+          <p className="type-text-xs text-muted-foreground">primary</p>
+        </div>
+        <div className="flex flex-col items-center gap-1.5">
+          <Spinner size="lg" variant="secondary" />
+          <p className="type-text-xs text-muted-foreground">secondary</p>
+        </div>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">SpinnerBlock</p>
+      <div className="rounded-md border border-border">
+        <SpinnerBlock variant="secondary" size="lg" />
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">SpinnerBlock with label</p>
+      <div className="rounded-md border border-border">
+        <SpinnerBlock variant="secondary" withLabel />
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">
+        SpinnerBlock fullscreen (uses min-h-screen — shown inline for preview)
+      </p>
+      <div className="flex h-48 items-center justify-center rounded-md border border-border">
+        <Spinner size="xl" />
+      </div>
+    </div>
+  </div>
+);