@elabs-ai/components-ui 4.0.0

package/src/blocks-comparison-table.stories.tsx

@@ -0,0 +1,165 @@
+/**
+ * Comparison Table — the feature/plan matrix brand-ui was missing.
+ *
+ * shadcnblocks' Compare group is a real capability gap (zero coverage). This
+ * block is the canonical plan/feature comparison: a sticky-ish header with one
+ * featured column (badge + emphasis), feature rows with check / dash / value
+ * cells, a price row, and a per-plan CTA row. Reuses brand-ui's strongest
+ * assets — Table + Badge + Button — and stays token-only.
+ *
+ * Reads in all three themes. Verify with globals=theme:<slug>.
+ */
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Check, Minus } from "lucide-react";
+import {
+  Badge,
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./index";
+
+interface Plan {
+  id: string;
+  name: string;
+  price: string;
+  per: string;
+  cta: string;
+  featured?: boolean;
+}
+
+const PLANS: Plan[] = [
+  { id: "starter", name: "Starter", price: "$0", per: "free forever", cta: "Start free" },
+  {
+    id: "business",
+    name: "Business",
+    price: "$49",
+    per: "per user / mo",
+    cta: "Start trial",
+    featured: true,
+  },
+  {
+    id: "enterprise",
+    name: "Enterprise",
+    price: "Custom",
+    per: "contact us",
+    cta: "Contact sales",
+  },
+];
+
+type Cell = string | boolean;
+const FEATURES: { label: string; values: [Cell, Cell, Cell] }[] = [
+  { label: "Seats", values: ["Up to 3", "Up to 50", "Unlimited"] },
+  { label: "Projects", values: ["3", "Unlimited", "Unlimited"] },
+  { label: "Data history", values: ["7 days", "1 year", "Unlimited"] },
+  { label: "SSO / SAML", values: [false, false, true] },
+  { label: "Audit log", values: [false, true, true] },
+  { label: "Priority support", values: [false, true, true] },
+  { label: "Uptime SLA", values: [false, false, true] },
+];
+
+/** featured column gets a recessed wash so the eye lands on it. */
+function colClass(featured?: boolean) {
+  return featured ? "bg-surface-muted" : "";
+}
+
+function ValueCell({ value }: { value: Cell }) {
+  if (typeof value === "boolean") {
+    return value ? (
+      <>
+        <Check className="mx-auto size-4 text-success-text" aria-hidden="true" />
+        <span className="sr-only">Included</span>
+      </>
+    ) : (
+      <>
+        <Minus className="mx-auto size-4 text-muted-foreground" aria-hidden="true" />
+        <span className="sr-only">Not included</span>
+      </>
+    );
+  }
+  return <span className="text-body text-foreground">{value}</span>;
+}
+
+function ComparisonTable() {
+  return (
+    <div className="bg-background p-6 text-foreground">
+      <div className="mx-auto max-w-4xl overflow-hidden rounded-xl border bg-card">
+        <Table>
+          <TableHeader>
+            <TableRow className="hover:bg-transparent">
+              <TableHead className="w-[34%] align-bottom">
+                <span className="text-body font-medium text-muted-foreground">Compare plans</span>
+              </TableHead>
+              {PLANS.map((p) => (
+                <TableHead
+                  key={p.id}
+                  className={`text-center align-bottom ${colClass(p.featured)}`}
+                >
+                  <div className="flex flex-col items-center gap-1 py-2">
+                    {p.featured ? <Badge>Most popular</Badge> : null}
+                    <span className="text-subtitle font-semibold text-foreground">{p.name}</span>
+                    <span className="text-title font-semibold tabular-nums text-foreground">
+                      {p.price}
+                    </span>
+                    <span className="text-meta text-muted-foreground">{p.per}</span>
+                  </div>
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            {FEATURES.map((f) => (
+              <TableRow key={f.label}>
+                <TableCell className="font-medium text-foreground">{f.label}</TableCell>
+                {PLANS.map((p, i) => (
+                  <TableCell key={p.id} className={`text-center ${colClass(p.featured)}`}>
+                    <ValueCell value={f.values[i] ?? "—"} />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+
+            {/* CTA row */}
+            <TableRow className="hover:bg-transparent">
+              <TableCell />
+              {PLANS.map((p) => (
+                <TableCell key={p.id} className={`text-center ${colClass(p.featured)}`}>
+                  <Button
+                    size="sm"
+                    variant={p.featured ? "default" : "outline"}
+                    className="my-2 w-full max-w-[12rem]"
+                  >
+                    {p.cta}
+                  </Button>
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}
+
+const meta = {
+  title: "Patterns/Blocks/Comparison Table",
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "The canonical plan/feature comparison matrix (brand-ui's Compare gap): a header with one featured column (badge + recessed wash), feature rows with check / dash / value cells, a price row, and a per-plan CTA row. Composes Table + Badge + Button; semantic tokens only; reads in all three themes.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { render: () => <ComparisonTable /> };

package/src/components/accordion/accordion.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor } from "storybook/test";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion";
+const meta = {
+  title: "Disclosure/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      description: "`single` allows one item open at a time; `multiple` allows any number.",
+      control: { type: "radio" },
+      options: ["single", "multiple"],
+      table: { category: "Behavior" },
+    },
+    collapsible: {
+      description: 'When `type="single"`, allows the open item to be closed by clicking it again.',
+      control: "boolean",
+      table: { category: "Behavior" },
+    },
+    defaultValue: {
+      description: "Uncontrolled: value(s) open on first render.",
+      control: "text",
+      table: { category: "State" },
+    },
+    value: {
+      description: "Controlled open value(s).",
+      control: "text",
+      table: { category: "State" },
+    },
+    onValueChange: {
+      description: "Callback fired when the open value(s) change.",
+      control: false,
+      table: { category: "Behavior" },
+    },
+    disabled: {
+      description: "Disables all accordion items.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    className: {
+      description: "Extra Tailwind classes merged via cn().",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof Accordion>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="w-80">
+      <AccordionItem value="a">
+        <AccordionTrigger>What is brand-ui?</AccordionTrigger>
+        <AccordionContent>A token-driven component system.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="b">
+        <AccordionTrigger>Is it themeable?</AccordionTrigger>
+        <AccordionContent>Yes — via data-theme tokens.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+  // Expanding an item flips its trigger to aria-expanded and mounts the panel
+  // content (Radix keeps closed panels out of the DOM).
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("button", { name: "What is brand-ui?" });
+    await expect(trigger).toHaveAttribute("aria-expanded", "false");
+    await userEvent.click(trigger);
+    await expect(trigger).toHaveAttribute("aria-expanded", "true");
+    await waitFor(() => expect(canvas.getByText("A token-driven component system.")).toBeVisible());
+  },
+};

package/src/components/accordion/accordion.test.tsx

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion";
+describe("Accordion", () => {
+  it("expands an item on click", async () => {
+    render(
+      <Accordion type="single" collapsible>
+        <AccordionItem value="a">
+          <AccordionTrigger>Q</AccordionTrigger>
+          <AccordionContent>Answer</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Q" }));
+    expect(screen.getByText("Answer")).toBeVisible();
+  });
+});

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,49 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/cn";
+
+export const Accordion = AccordionPrimitive.Root;
+
+export const AccordionItem = forwardRef<
+  ElementRef<typeof AccordionPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(function AccordionItem({ className, ...props }, ref) {
+  return <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />;
+});
+
+export const AccordionTrigger = forwardRef<
+  ElementRef<typeof AccordionPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(function AccordionTrigger({ className, children, ...props }, ref) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        ref={ref}
+        className={cn(
+          "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&[data-state=open]>svg]:rotate-180",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDown className="size-4 shrink-0 text-muted-foreground transition-transform duration-base ease-standard" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+});
+
+export const AccordionContent = forwardRef<
+  ElementRef<typeof AccordionPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(function AccordionContent({ className, children, ...props }, ref) {
+  return (
+    <AccordionPrimitive.Content
+      ref={ref}
+      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div className={cn("pb-4 pt-0 text-muted-foreground", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+});

package/src/components/accordion/index.ts

@@ -0,0 +1 @@
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "./accordion";

package/src/components/advanced-group/advanced-group.stories.tsx

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor, within } from "storybook/test";
+import { ThemeProvider } from "@elabs-ai/components-tokens";
+import { Button } from "../button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogSection,
+  DialogTitle,
+  DialogTrigger,
+} from "../dialog";
+import { Input } from "../input";
+import { Label } from "../label";
+import { AdvancedGroup } from "./advanced-group";
+
+const meta = {
+  title: "Forms/AdvancedGroup",
+  component: AdvancedGroup,
+  tags: ["autodocs"],
+} satisfies Meta<typeof AdvancedGroup>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function Field({ id, label, defaultValue }: { id: string; label: string; defaultValue?: string }) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <Label htmlFor={id}>{label}</Label>
+      <Input id={id} name={id} autoComplete="off" defaultValue={defaultValue} />
+    </div>
+  );
+}
+
+/**
+ * Collapsed by default — and it says what is hidden. "3 changed" is the whole
+ * point: a reader can tell the group holds edits without opening it.
+ */
+export const Default: Story = {
+  args: { changedCount: 3 },
+  render: (args) => (
+    <div className="w-96">
+      <AdvancedGroup {...args}>
+        <Field id="adv-retries" label="Max retries" defaultValue="5" />
+        <Field id="adv-timeout" label="Timeout (seconds)" defaultValue="120" />
+        <Field id="adv-endpoint" label="Custom endpoint" defaultValue="eu-west-1.internal" />
+      </AdvancedGroup>
+    </div>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("button", { name: /advanced/i });
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(canvas.getByText("3 changed")).toBeVisible();
+
+    await userEvent.click(trigger);
+
+    await waitFor(() => expect(trigger).toHaveAttribute("aria-expanded", "true"));
+    await waitFor(() => expect(canvas.getByLabelText("Max retries")).toBeVisible());
+    // Once the values are on screen the summary is noise.
+    expect(canvas.queryByText("3 changed")).toBeNull();
+  },
+};
+
+/** A free-form summary when "N changed" is not the useful thing to say. */
+export const CustomSummary: Story = {
+  args: { summary: "Using a custom endpoint", title: "Connection details" },
+  render: Default.render,
+};
+
+/** Opened, for anyone auditing the expanded layout. */
+export const Expanded: Story = {
+  args: { defaultOpen: true, changedCount: 3 },
+  render: Default.render,
+};
+
+/** Nothing has been touched, so there is nothing to summarise. */
+export const Untouched: Story = {
+  args: { changedCount: 0 },
+  render: Default.render,
+};
+
+/** Its real home: the quiet tail of a settings dialog, under a `DialogSection`. */
+export const InsideDialog: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Edit schedule</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Schedule settings</DialogTitle>
+          <DialogDescription>
+            When the pipeline runs, and what happens if it fails.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogSection title="Cadence" description="Times are in the workspace time zone.">
+          <Field id="dlg-cron" label="Run at" defaultValue="02:00" />
+        </DialogSection>
+        <AdvancedGroup changedCount={2}>
+          <Field id="dlg-retries" label="Max retries" defaultValue="5" />
+          <Field id="dlg-timeout" label="Timeout (seconds)" defaultValue="120" />
+        </AdvancedGroup>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button>Save schedule</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    await userEvent.click(canvas.getByRole("button", { name: /edit schedule/i }));
+    const doc = within(canvasElement.ownerDocument.body);
+    const dialog = await doc.findByRole("dialog");
+    const trigger = within(dialog).getByRole("button", { name: /advanced/i });
+    await waitFor(() => expect(within(dialog).getByText("2 changed")).toBeVisible());
+    await userEvent.click(trigger);
+    await waitFor(() => expect(within(dialog).getByLabelText("Max retries")).toBeVisible());
+  },
+};
+
+export const DefaultDark: Story = {
+  name: "Default — dark",
+  args: { changedCount: 3 },
+  decorators: [
+    (Story) => (
+      <ThemeProvider defaultTheme="dark" storageKey={null}>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+  render: Default.render,
+};
+
+export const DefaultHighDecoration: Story = {
+  name: "Default — high decoration",
+  args: { changedCount: 3 },
+  globals: { decoration: "10" },
+  render: Default.render,
+};

package/src/components/advanced-group/advanced-group.test.tsx

@@ -0,0 +1,81 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { AdvancedGroup } from "./advanced-group";
+
+describe("AdvancedGroup", () => {
+  it("is collapsed by default and hides its content", () => {
+    render(
+      <AdvancedGroup>
+        <p>Retry budget</p>
+      </AdvancedGroup>,
+    );
+    const trigger = screen.getByRole("button", { name: /advanced/i });
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(screen.queryByText("Retry budget")).not.toBeInTheDocument();
+  });
+
+  it("summarises non-default values while collapsed, then drops the summary", async () => {
+    const user = userEvent.setup();
+    render(
+      <AdvancedGroup changedCount={3}>
+        <p>Retry budget</p>
+      </AdvancedGroup>,
+    );
+    expect(screen.getByText("3 changed")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: /advanced/i }));
+
+    expect(screen.getByText("Retry budget")).toBeInTheDocument();
+    expect(screen.queryByText("3 changed")).not.toBeInTheDocument();
+  });
+
+  it("shows no summary when nothing changed", () => {
+    render(<AdvancedGroup changedCount={0}>content</AdvancedGroup>);
+    expect(screen.queryByText(/changed/)).not.toBeInTheDocument();
+  });
+
+  it("prefers an explicit summary node over changedCount", () => {
+    render(
+      <AdvancedGroup changedCount={3} summary="Using a custom endpoint">
+        content
+      </AdvancedGroup>,
+    );
+    expect(screen.getByText("Using a custom endpoint")).toBeInTheDocument();
+    expect(screen.queryByText("3 changed")).not.toBeInTheDocument();
+  });
+
+  it("honours defaultOpen", () => {
+    render(<AdvancedGroup defaultOpen>Retry budget</AdvancedGroup>);
+    expect(screen.getByRole("button", { name: /advanced/i })).toHaveAttribute(
+      "aria-expanded",
+      "true",
+    );
+  });
+
+  it("stays controlled: a click reports out but never self-toggles", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <AdvancedGroup open={false} onOpenChange={onOpenChange} changedCount={2}>
+        <p>Retry budget</p>
+      </AdvancedGroup>,
+    );
+
+    await user.click(screen.getByRole("button", { name: /advanced/i }));
+
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+    // The owner did not move `open`, so the group must not have opened itself —
+    // a controlled component never flips to uncontrolled.
+    expect(screen.getByRole("button", { name: /advanced/i })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+    expect(screen.getByText("2 changed")).toBeInTheDocument();
+  });
+
+  it("takes a custom title", () => {
+    render(<AdvancedGroup title="Developer options">content</AdvancedGroup>);
+    expect(screen.getByRole("button", { name: /developer options/i })).toBeInTheDocument();
+  });
+});

package/src/components/advanced-group/advanced-group.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useCallback, useState, type HTMLAttributes, type ReactNode } from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Badge } from "../badge";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../collapsible";
+import { useLocale } from "../locale-provider";
+
+export interface AdvancedGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  /** The disclosure's label. Defaults to "Advanced". */
+  title?: ReactNode;
+  /**
+   * What is hidden inside, shown ONLY while collapsed — so a reader can tell
+   * whether the group holds defaults or edits without opening it.
+   */
+  summary?: ReactNode;
+  /** Shorthand summary: renders "N changed" when `summary` is not given. */
+  changedCount?: number;
+  /** Uncontrolled initial state. Collapsed by default — that is the point. */
+  defaultOpen?: boolean;
+  /** Controlled open state. */
+  open?: boolean;
+  /** Fires on every open/close, controlled or not. */
+  onOpenChange?: (open: boolean) => void;
+}
+
+/**
+ * A collapsed-by-default group of secondary settings (#341).
+ *
+ * Long dialogs go wrong in one of two ways: everything is visible (so nothing
+ * reads as primary), or the extras are hidden with no hint that they were
+ * touched. `AdvancedGroup` takes the third option — hidden, but SUMMARISED:
+ * while collapsed it shows what is inside ("3 changed"), and the summary
+ * disappears once the group is open and the values speak for themselves.
+ *
+ * A preset over `Collapsible`, not a new disclosure primitive: Radix keeps the
+ * trigger/content wiring, `aria-expanded`, and keyboard operation.
+ *
+ * ```tsx
+ * <AdvancedGroup changedCount={3}>
+ *   <Field … />
+ * </AdvancedGroup>
+ * ```
+ */
+export function AdvancedGroup({
+  className,
+  title,
+  summary,
+  changedCount,
+  defaultOpen = false,
+  open: openProp,
+  onOpenChange,
+  children,
+  ...props
+}: AdvancedGroupProps) {
+  const { t } = useLocale();
+  // Mirror the platform: the mode is fixed at mount by whether `open` was
+  // passed, and never flips (`.claude/rules/component-api.md`).
+  const isControlled = openProp !== undefined;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const open = isControlled ? openProp : uncontrolledOpen;
+
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange],
+  );
+
+  const summaryContent =
+    summary ??
+    (changedCount !== undefined && changedCount > 0 ? (
+      <Badge variant="secondary">{t("ui.advancedGroup.changed", { count: changedCount })}</Badge>
+    ) : null);
+
+  return (
+    <Collapsible
+      data-slot="advanced-group"
+      open={open}
+      onOpenChange={handleOpenChange}
+      className={cn("flex flex-col", className)}
+      {...props}
+    >
+      <CollapsibleTrigger
+        data-slot="advanced-group-trigger"
+        className="group -mx-2 flex items-center gap-2 rounded-md px-2 py-1.5 text-body font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <ChevronDown
+          aria-hidden="true"
+          className="size-4 shrink-0 text-muted-foreground transition-transform duration-base ease-standard motion-reduce:transition-none group-data-[state=closed]:-rotate-90"
+        />
+        {title ?? t("ui.advancedGroup.title")}
+        {/* The summary is a COLLAPSED-state affordance: once the group is open
+            the real values are on screen and repeating "3 changed" is noise. */}
+        {!open && summaryContent ? (
+          <span
+            data-slot="advanced-group-summary"
+            className="ms-auto text-caption font-normal text-muted-foreground"
+          >
+            {summaryContent}
+          </span>
+        ) : null}
+      </CollapsibleTrigger>
+      <CollapsibleContent data-slot="advanced-group-content">
+        <div className="flex flex-col gap-4 pt-3">{children}</div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/src/components/advanced-group/index.ts

@@ -0,0 +1,2 @@
+export { AdvancedGroup } from "./advanced-group";
+export type { AdvancedGroupProps } from "./advanced-group";