@elabs-ai/components-ui 4.0.0

package/src/components/breadcrumb/breadcrumb.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "./breadcrumb";
+const meta = {
+  title: "Navigation/Breadcrumb",
+  component: Breadcrumb,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      description: "Breadcrumb content — compose with BreadcrumbList, BreadcrumbItem, etc.",
+      control: false,
+      table: { category: "Content" },
+    },
+    className: {
+      description: "Additional CSS classes applied to the nav element.",
+      control: "text",
+      table: { category: "Styling" },
+    },
+  },
+} satisfies Meta<typeof Breadcrumb>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Projects</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>brand-ui</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};

package/src/components/breadcrumb/breadcrumb.test.tsx

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage } from "./breadcrumb";
+describe("Breadcrumb", () => {
+  it("renders the current page", () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbPage>Here</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    );
+    expect(screen.getByText("Here")).toHaveAttribute("aria-current", "page");
+  });
+});

package/src/components/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,86 @@
+import { forwardRef, type ComponentProps, type ReactNode } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { cn } from "../../lib/cn";
+
+export const Breadcrumb = forwardRef<HTMLElement, ComponentProps<"nav">>(
+  function Breadcrumb(props, ref) {
+    return <nav ref={ref} aria-label="breadcrumb" {...props} />;
+  },
+);
+export const BreadcrumbList = forwardRef<HTMLOListElement, ComponentProps<"ol">>(
+  function BreadcrumbList({ className, ...props }, ref) {
+    return (
+      <ol
+        ref={ref}
+        className={cn(
+          "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+export const BreadcrumbItem = forwardRef<HTMLLIElement, ComponentProps<"li">>(
+  function BreadcrumbItem({ className, ...props }, ref) {
+    return (
+      <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
+    );
+  },
+);
+export const BreadcrumbLink = forwardRef<
+  HTMLAnchorElement,
+  ComponentProps<"a"> & { asChild?: boolean }
+>(function BreadcrumbLink({ className, asChild, ...props }, ref) {
+  const Comp = asChild ? Slot : "a";
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors duration-fast hover:text-foreground", className)}
+      {...props}
+    />
+  );
+});
+export const BreadcrumbPage = forwardRef<HTMLSpanElement, ComponentProps<"span">>(
+  function BreadcrumbPage({ className, ...props }, ref) {
+    return (
+      <span
+        ref={ref}
+        role="link"
+        aria-disabled="true"
+        aria-current="page"
+        className={cn("font-medium text-foreground", className)}
+        {...props}
+      />
+    );
+  },
+);
+export function BreadcrumbSeparator({ children, className, ...props }: ComponentProps<"li">) {
+  return (
+    <li
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+export function BreadcrumbEllipsis({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+export function BreadcrumbItems({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

package/src/components/breadcrumb/index.ts

@@ -0,0 +1,9 @@
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from "./breadcrumb";

package/src/components/button/button.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+import { Button } from "./button";
+
+const meta = {
+  title: "Core/Button",
+  component: Button,
+  tags: ["autodocs"],
+  args: { children: "Button" },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: [
+        "default",
+        "secondary",
+        "destructive",
+        "outline",
+        "outline-subtle",
+        "ghost",
+        "link",
+      ],
+    },
+    size: { control: "select", options: ["sm", "default", "lg", "icon"] },
+  },
+} satisfies Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Secondary: Story = { args: { variant: "secondary" } };
+export const Destructive: Story = { args: { variant: "destructive" } };
+export const Outline: Story = { args: { variant: "outline" } };
+// The quiet hairline rung (#194): `border-border` instead of the strong
+// form-field `border-input` — for "outlined but calm" non-field controls.
+export const OutlineSubtle: Story = { args: { variant: "outline-subtle" } };
+export const Ghost: Story = { args: { variant: "ghost" } };
+
+// The single project-wide CssCheck. Proves the shared preview actually loaded
+// the brand token stylesheet + Tailwind: the default Button variant is
+// `bg-primary`, which resolves to the applied theme's `--primary` token. If
+// themes.css/Tailwind failed to load, this would be the transparent default
+// `rgba(0, 0, 0, 0)` and fail — where a plain `toBeVisible()` would still pass
+// on the unstyled element.
+//
+// The harness applies the shipped DEFAULT theme (`light`) to
+// `document.documentElement` (see `apps/docs/.storybook/preview.tsx`'s
+// `withTheme` decorator, #402), so `--primary` here is light's own
+// value (`oklch(0.553 0.143 153)` in themes.css) — not the unbranded `:root`
+// fallback this test asserted against before #402 fixed the harness to
+// actually apply a theme.
+export const CssCheck: Story = {
+  play: async ({ canvas }) => {
+    const btn = canvas.getByRole("button", { name: "Button" });
+    await expect(getComputedStyle(btn).backgroundColor).toBe("oklch(0.553 0.143 153)");
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Button>Default</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="destructive">Destructive</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="outline-subtle">Outline subtle</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="link">Link</Button>
+    </div>
+  ),
+};

package/src/components/button/button.test.tsx

@@ -0,0 +1,50 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Button } from "./button";
+
+describe("Button", () => {
+  it("renders its children", () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole("button", { name: "Click me" })).toBeInTheDocument();
+  });
+
+  it("calls onClick when pressed", async () => {
+    const onClick = vi.fn();
+    render(<Button onClick={onClick}>Go</Button>);
+    await userEvent.click(screen.getByRole("button", { name: "Go" }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not fire when disabled", async () => {
+    const onClick = vi.fn();
+    render(
+      <Button disabled onClick={onClick}>
+        Nope
+      </Button>,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Nope" }));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  // #194: `outline-subtle` targets `border-border`, `outline` targets the form-field
+  // `border-input`. Since the ADR 0010 Amendment (2026-06-20) returned `--input` to the
+  // subtle rung these two render identically by default, but the class STRINGS stay
+  // distinct (a semantic seam a brand could re-separate). This locks the class target,
+  // not the resting contrast.
+  it("outline-subtle uses border-border, not the form-field border-input", () => {
+    render(<Button variant="outline-subtle">Quiet</Button>);
+    const btn = screen.getByRole("button", { name: "Quiet" });
+    expect(btn.className.split(" ")).toContain("border-border");
+    expect(btn.className.split(" ")).not.toContain("border-input");
+  });
+
+  it("renders as a child element with asChild", () => {
+    render(
+      <Button asChild>
+        <a href="/home">Home</a>
+      </Button>,
+    );
+    expect(screen.getByRole("link", { name: "Home" })).toHaveAttribute("href", "/home");
+  });
+});

package/src/components/button/button.tsx

@@ -0,0 +1,63 @@
+import { forwardRef, type ButtonHTMLAttributes } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/cn";
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap touch-manipulation rounded-md text-body font-medium transition-[color,background-color,border-color,box-shadow,scale] duration-fast ease-standard active:scale-[0.98] motion-reduce:active:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground disabled:opacity-100",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90 disabled:bg-muted disabled:text-muted-foreground disabled:opacity-100",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        // The calm "outlined but quiet" rung (#194, research 02 §3a). `outline` uses
+        // the form-field `border-input` token, `outline-subtle` uses `border-border`.
+        // Since the ADR 0010 Amendment (2026-06-20) returned `--input` to the subtle
+        // rung, these two are now VISUALLY IDENTICAL by default — both variant names
+        // are kept as a SEMANTIC SEAM (a future brand could re-separate `--input` from
+        // `--border`) and to avoid churning `outline-subtle` callers (e.g.
+        // change-review.tsx). `outline` stays for genuinely form-adjacent controls.
+        "outline-subtle":
+          "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        // #399 — a link button is TEXT on the page, so it takes the on-surface
+        // `-text` rung; `bg-primary` above keeps the fill rung.
+        link: "text-primary-text underline-offset-4 hover:underline",
+      },
+      size: {
+        sm: "h-8 rounded-md px-3 text-meta",
+        default: "h-9 px-4 py-2",
+        lg: "h-10 rounded-md px-6",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+  },
+);
+
+export interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  /** Render the child element as the button (Radix Slot) instead of a <button>. */
+  asChild?: boolean;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { className, variant, size, asChild = false, type, ...props },
+  ref,
+) {
+  const Comp = asChild ? Slot : "button";
+  return (
+    <Comp
+      ref={ref}
+      className={cn(buttonVariants({ variant, size }), className)}
+      type={asChild ? undefined : (type ?? "button")}
+      {...props}
+    />
+  );
+});

package/src/components/button/index.ts

@@ -0,0 +1 @@
+export { Button, buttonVariants, type ButtonProps } from "./button";

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

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ButtonGroup, ButtonGroupText } from "./button-group";
+import { Button } from "../button";
+const meta = {
+  title: "Forms/ButtonGroup",
+  component: ButtonGroup,
+  tags: ["autodocs"],
+  argTypes: {
+    orientation: {
+      description: "Layout direction of the group.",
+      control: { type: "radio" },
+      options: ["horizontal", "vertical"],
+      table: { category: "Appearance" },
+    },
+    className: {
+      description: "Additional CSS classes applied to the root element.",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+    children: {
+      description: "Button or ButtonGroupText elements to group together.",
+      control: false,
+      table: { category: "Content" },
+    },
+  },
+} satisfies Meta<typeof ButtonGroup>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button variant="outline">Day</Button>
+      <Button variant="outline">Week</Button>
+      <Button variant="outline">Month</Button>
+    </ButtonGroup>
+  ),
+};
+export const WithText: Story = {
+  render: () => (
+    <ButtonGroup>
+      <ButtonGroupText>https://</ButtonGroupText>
+      <Button variant="outline">brand-ui.dev</Button>
+    </ButtonGroup>
+  ),
+};

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

@@ -0,0 +1,70 @@
+import { forwardRef, type ComponentProps } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/cn";
+import { Separator } from "../separator";
+
+export const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*]:relative [&>*]:focus-within:z-10 has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: { orientation: "horizontal" },
+  },
+);
+
+export const ButtonGroup = forwardRef<
+  HTMLDivElement,
+  ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>
+>(function ButtonGroup({ className, orientation = "horizontal", ...props }, ref) {
+  return (
+    <div
+      ref={ref}
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+});
+
+export const ButtonGroupText = forwardRef<
+  HTMLDivElement,
+  ComponentProps<"div"> & { asChild?: boolean }
+>(function ButtonGroupText({ className, asChild = false, ...props }, ref) {
+  const Comp = asChild ? Slot : "div";
+  return (
+    <Comp
+      ref={ref}
+      className={cn(
+        "flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const ButtonGroupSeparator = forwardRef<HTMLDivElement, ComponentProps<typeof Separator>>(
+  function ButtonGroupSeparator({ className, orientation = "vertical", ...props }, ref) {
+    return (
+      <Separator
+        ref={ref}
+        data-slot="button-group-separator"
+        orientation={orientation}
+        className={cn(
+          "relative !m-0 self-stretch bg-input data-[orientation=vertical]:h-auto",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);

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

@@ -0,0 +1,6 @@
+export {
+  ButtonGroup,
+  ButtonGroupText,
+  ButtonGroupSeparator,
+  buttonGroupVariants,
+} from "./button-group";

package/src/components/calendar/calendar.stories.tsx

@@ -0,0 +1,95 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+import { Calendar } from "./calendar";
+const meta = {
+  title: "Forms/Calendar",
+  component: Calendar,
+  tags: ["autodocs"],
+  argTypes: {
+    mode: {
+      description: "Selection mode: single date, multiple dates, or a range.",
+      control: { type: "select" },
+      options: ["single", "multiple", "range"],
+      table: { category: "Behavior" },
+    },
+    showOutsideDays: {
+      description: "Show days from adjacent months in the current month grid.",
+      control: "boolean",
+      table: { category: "Appearance" },
+    },
+    numberOfMonths: {
+      description: "Number of months to display side by side.",
+      control: "number",
+      table: { category: "Appearance" },
+    },
+    disabled: {
+      description: "Disables specific dates (Matcher or boolean).",
+      control: false,
+      table: { category: "State" },
+    },
+    selected: {
+      description: "Controlled selected date(s).",
+      control: false,
+      table: { category: "State" },
+    },
+    onSelect: {
+      description: "Called when the user picks a date.",
+      control: false,
+      table: { category: "Behavior" },
+    },
+    className: {
+      description: "Additional CSS classes applied to the root element.",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof Calendar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+// Pinned rather than `new Date()` (#430): the selected day's cell paints
+// `--primary-foreground` on `--primary` (light), a real, accepted AA
+// miss (4.31:1 vs a 4.5:1 floor — #180, `INK_EXEMPT` in
+// `packages/tokens/src/themes-contrast.test.ts`). axe-core's `color-contrast`
+// rule reports single-CHARACTER text as `incomplete`/`shortTextContent`
+// instead of scoring it, so with `new Date()` this story was red on days
+// 10-31 of the month and silently green on days 1-9 — a verification result
+// keyed to the wall clock, not to the code. The pinned day MUST stay in the
+// 10-31 range: a single-digit pin would make the suite green forever, but
+// only by routing the cell into that same unscoreable-text path, which hides
+// the miss rather than fixing or honestly exempting it (see `Test to add` in
+// #430 and `scripts/a11y-baseline.json`, which now carries this story's
+// entry). `defaultMonth` is pinned alongside it so the displayed month is
+// never a function of "now" either.
+//
+// The `today` cell (react-day-picker's `today` modifier) still tracks the
+// real wall clock and is NOT pinned — only the `selected` cell is. That is
+// safe for this lock: the `today` plate (`bg-accent`/`text-accent-foreground`)
+// is a different, contrast-clean token pair (confirmed by probing it directly
+// with axe, `runOnly: ["color-contrast"]`, on a two-digit "today" — zero
+// violations), so it cannot flip this story's axe outcome on any date.
+const FIXED_MONTH = new Date(2026, 7, 1); // 2026-08-01
+const FIXED_SELECTED = new Date(2026, 7, 17); // 2026-08-17 — two digits, on purpose
+
+export const Default: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [date, setDate] = useState<Date | undefined>(FIXED_SELECTED);
+    return (
+      <Calendar
+        mode="single"
+        defaultMonth={FIXED_MONTH}
+        selected={date}
+        onSelect={setDate}
+        className="rounded-md border"
+      />
+    );
+  },
+  // Confirms the calendar grid renders and a day cell is present.
+  play: async ({ canvas }) => {
+    const grid = canvas.getByRole("grid");
+    await expect(grid).toBeInTheDocument();
+    const dayCells = canvas.getAllByRole("gridcell");
+    await expect(dayCells.length).toBeGreaterThan(0);
+  },
+};