@supertype.ai/foundations 0.1.28 → 0.1.29

package/README.md

@@ -65,7 +65,7 @@ untagged git dependency re-resolves to a different commit on any fresh install.
 
 ```jsonc
 // package.json
-"@supertype.ai/foundations": "https://github.com/supertypeai/foundations.git#v0.1.28"
+"@supertype.ai/foundations": "https://github.com/supertypeai/foundations.git#v0.1.29"
 ```
 
 </details>
@@ -233,7 +233,7 @@ package.
 | import                                                                | contains                                                                 | docs                                         |
 | --------------------------------------------------------------------- | ------------------------------------------------------------------------ | -------------------------------------------- |
 | `@supertype.ai/foundations`                                           | all typography primitives, `cn`                                          | [Typography](docs/typography.md)             |
-| `@supertype.ai/foundations/blocks`                                    | `Card`, `Callout`, `Steps`, `Tabs`, `Accordion`, `Disclosure`, `SEGMENT` | [Blocks](docs/blocks.md)                     |
+| `@supertype.ai/foundations/blocks`                                    | `Button`, `Badge`, `Card`, `Callout`, `Steps`, `TabGroup`, `Accordion`, `SEGMENT` | [Blocks](docs/blocks.md)                     |
 | `@supertype.ai/foundations/mdx`                                       | `proseMdxComponents` — the MDX element map                               | [In MDX](docs/blocks.md#in-mdx)              |
 | `@supertype.ai/foundations/essay`                                     | the long-form shell, TOC, reading rail, post meta                        | [Essay](docs/essay.md)                       |
 | `@supertype.ai/foundations/seo`                                       | `createSeo(...)` — metadata + JSON-LD                                    | [Tooling](docs/tooling.md#seo-and-og-images) |

package/dist/blocks/badge.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentProps, ReactElement } from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badge: (props?: ({
+    tone?: "muted" | "primary" | "secondary" | "brand" | "success" | "warn" | "destructive" | null | undefined;
+    size?: "sm" | "xs" | null | undefined;
+    pill?: boolean | null | undefined;
+    variant?: "solid" | "soft" | "outline" | "ghost" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type BadgeLook = VariantProps<typeof badge>;
+export declare function badgeVariants(props?: Parameters<typeof badge>[0]): string;
+/**
+ * A `span` unless `render` says otherwise — cloned rather than run through a
+ * `useRender` hook, which is what viably's badge did. A hook would make every
+ * badge in the tree a client component to serve the one call site that renders
+ * an anchor, and a badge is a label: it should cost nothing on the server. This
+ * is the same mechanism `Button` uses for the same reason.
+ *
+ * The `[a]:hover` rules above light up on their own when an anchor is the parent
+ * or the rendered element.
+ */
+export declare function Badge({ className, variant, tone, size, pill, render, ...props }: ComponentProps<"span"> & BadgeLook & {
+    render?: ReactElement;
+}): import("react").JSX.Element;
+export {};

package/dist/blocks/badge.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../cn.js";
+import { renderAs } from "./render-as.js";
+import { FOCUS_RING } from "./focus.js";
+import { TONE, TONE_SURFACE, impliedTone } from "../tone.js";
+// ---------------------------------------------------------------------------
+// A label that is not a control. Same two axes as Button, and for the same
+// reason: the two apps had each grown their own list, and the lists disagreed
+// with each other and with the rest of the package.
+//
+// ssite's read `default | secondary | destructive | outline | success | warning
+// | supertype | tint`. Two of those are the package's tones under invented
+// spellings — `warning` for `warn`, `supertype` for `brand` — which is precisely
+// the second vocabulary a design system exists to prevent. `secondary` was
+// `bg-muted/80 text-foreground` against a `default` of `bg-muted
+// text-muted-foreground`: a distinction no reader could name, let alone use.
+//
+// viably's read `default | secondary | destructive | outline | ghost | link`,
+// which is a copy of the button list it was cargo-culted from — including the
+// `link` variant, which no badge has ever used, because a badge is not a link.
+//
+// So: `variant` for how much ink, `tone` for what it means, both spelled exactly
+// as Button spells them. `link` is absent because it was never real; everything
+// else about the vocabulary is the same list, so knowing one component's axes is
+// knowing this one's.
+// ---------------------------------------------------------------------------
+const badge = cva(cn("inline-flex w-fit shrink-0 items-center justify-center gap-1", "overflow-hidden border border-transparent font-medium whitespace-nowrap", cn("transition focus-visible:border-ring", FOCUS_RING), "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "[&>svg]:pointer-events-none [&>svg]:size-3!", TONE_SURFACE), {
+    // Same cascade order as Button: `pill` beats `size` on radius.
+    variants: {
+        tone: TONE,
+        /**
+         * Two rungs, because a badge has two jobs. `sm` is the label riding beside
+         * a title; `xs` is the figure riding beside a toolbar control — a filter
+         * tally, an unread count.
+         *
+         * `leading-none` restates the default on purpose: `text-3xs` carries a
+         * line-height of its own, which lands after the base class and wins.
+         * Stating it per size is what keeps `!leading-none` out of call sites.
+         */
+        size: {
+            xs: "h-4 min-w-4 rounded px-1 text-3xs leading-none",
+            sm: "h-5 rounded-md px-2 py-0.5 text-xs leading-none",
+        },
+        pill: { true: "rounded-full", false: "" },
+        variant: {
+            solid: "bg-(--tone-fill) text-(color:--tone-ink) [a]:hover:bg-(--tone-fill-hover)",
+            soft: "bg-(--tone-wash) text-(color:--tone-hue) [a]:hover:bg-(--tone-wash-hover)",
+            outline: "border-(color:--tone-line) text-(color:--tone-hue) [a]:hover:bg-(--tone-wash)",
+            ghost: "text-(color:--tone-hue) hover:bg-(--tone-wash)",
+        },
+    },
+    defaultVariants: { variant: "solid", size: "sm", pill: false },
+});
+export function badgeVariants(props = {}) {
+    return badge({ tone: props?.tone ?? impliedTone(props?.variant), ...props });
+}
+/**
+ * A `span` unless `render` says otherwise — cloned rather than run through a
+ * `useRender` hook, which is what viably's badge did. A hook would make every
+ * badge in the tree a client component to serve the one call site that renders
+ * an anchor, and a badge is a label: it should cost nothing on the server. This
+ * is the same mechanism `Button` uses for the same reason.
+ *
+ * The `[a]:hover` rules above light up on their own when an anchor is the parent
+ * or the rendered element.
+ */
+export function Badge({ className, variant, tone, size, pill, render, ...props }) {
+    const resolved = tone ?? impliedTone(variant);
+    const classes = cn(badge({ variant, tone: resolved, size, pill, className }));
+    const marks = {
+        "data-slot": "badge",
+        "data-variant": variant ?? "solid",
+        "data-tone": resolved,
+    };
+    const as = renderAs(render, classes, { ...marks, ...props });
+    if (as)
+        return as;
+    return _jsx("span", { ...marks, className: classes, ...props });
+}

package/dist/blocks/button.d.ts

@@ -0,0 +1,24 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { type VariantProps } from "class-variance-authority";
+declare const button: (props?: ({
+    tone?: "muted" | "primary" | "secondary" | "brand" | "success" | "warn" | "destructive" | null | undefined;
+    size?: "sm" | "xs" | "md" | "lg" | "xl" | null | undefined;
+    icon?: boolean | null | undefined;
+    pill?: boolean | null | undefined;
+    variant?: "solid" | "link" | "soft" | "outline" | "ghost" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ButtonLook = VariantProps<typeof button>;
+/**
+ * The class list, for the handful of places that style someone else's element
+ * and cannot render a `Button` — a router `Link` inside a `not-found`, a
+ * calendar day cell. Takes the same props, including the implied tone.
+ */
+export declare function buttonVariants(props?: Parameters<typeof button>[0]): string;
+/**
+ * A non-`<button>` render element bypasses the primitive on purpose: Base UI
+ * always stamps `type="button"` or `role="button"`, and the latter drops an
+ * anchor out of screen-reader link navigation. Cloning gives it the classes and
+ * nothing else.
+ */
+export declare function Button({ className, variant, tone, size, icon, pill, render, nativeButton, ...props }: ButtonPrimitive.Props & ButtonLook): import("react").JSX.Element;
+export {};

package/dist/blocks/button.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { cn } from "../cn.js";
+import { renderAs } from "./render-as.js";
+import { FOCUS_RING } from "./focus.js";
+import { TONE, TONE_SURFACE, impliedTone } from "../tone.js";
+// ---------------------------------------------------------------------------
+// The control both apps were re-declaring. viably and ssite each carried their
+// own `cva` with its own variant list — `default | secondary | accent |
+// destructive | ghost | outline | link` in one, the same names minus two plus a
+// `rose` in the other — and the two had already drifted on radius, on height,
+// and on what `destructive` even means (a solid red fill in ssite, a tinted wash
+// in viably).
+//
+// The fix is not a longer shared list. Those names answer two questions at once:
+//
+//   variant — how much ink the button spends. Filled, washed, hairline, bare.
+//   tone    — what the ink means. See ../tone.ts; Callout and TypographyLink
+//             take the same seven, because a component does not get to invent a
+//             name for a colour the package has already named. Its default is
+//             the one the variant implies — see `impliedTone`.
+//
+// `destructive` is a tone. `ghost` is a variant. A list holding both can only
+// express the pairs someone thought to add, which is why neither app could write
+// a quiet destructive button without a className.
+//
+// Everything else is a modifier, and both are boolean because both have exactly
+// two states: `icon` squares the box, `pill` rounds it off. They compose — a
+// round icon button is `icon pill` — which is why they are not one `shape` enum.
+// ---------------------------------------------------------------------------
+const button = cva(cn("inline-flex shrink-0 cursor-pointer items-center justify-center", "border border-transparent bg-clip-padding font-medium whitespace-nowrap", "transition select-none", 
+// The border joins the ring where a control has one; the ring itself is shared.
+cn(FOCUS_RING, "focus-visible:border-ring"), "active:not-aria-[haspopup]:translate-y-px", "disabled:pointer-events-none disabled:opacity-50", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", TONE_SURFACE), {
+    // Key order is cascade order: `cva` emits these as declared and `cn` resolves
+    // a conflict in favour of the last one written. `pill` therefore beats
+    // `size` on radius, and `variant` beats `size` on the box — which is what
+    // lets `link` shed the height and padding of whatever size it was given.
+    // Reordering this object is a visual change.
+    variants: {
+        tone: TONE,
+        /**
+         * One ladder, 24px to 40px on a 4px step. `md` is the product default —
+         * dense rows of controls beside a table — and `lg`/`xl` the marketing
+         * rungs. `--radius-lg` is 10px and theme.css already labels it "buttons,
+         * default control"; the two rungs below borrow `md`, because a 10px radius
+         * on a 24px box reads as a lozenge.
+         */
+        size: {
+            xs: "h-6 gap-1 rounded-md px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-7 gap-1 rounded-md px-2.5 text-[0.8rem] [&_svg:not([class*='size-'])]:size-3.5",
+            md: "h-8 gap-1.5 rounded-lg px-3 text-sm",
+            lg: "h-9 gap-2 rounded-lg px-4 text-sm",
+            xl: "h-10 gap-2 rounded-lg px-6 text-sm",
+        },
+        /** A square box for a lone glyph, on whichever rung you are already on. No second ladder of `icon-sm` names to keep aligned with the first. */
+        icon: { true: "px-0", false: "" },
+        /** Full-round corners. Marketing surfaces; also every filter chip. */
+        pill: { true: "rounded-full", false: "" },
+        variant: {
+            solid: "bg-(--tone-fill) text-(color:--tone-ink) hover:bg-(--tone-fill-hover)",
+            soft: "bg-(--tone-wash) text-(color:--tone-hue) hover:bg-(--tone-wash-hover)",
+            outline: "border-(color:--tone-line) bg-background text-(color:--tone-hue) hover:bg-(--tone-wash)",
+            ghost: "text-(color:--tone-hue) hover:bg-(--tone-wash)",
+            // No box of its own: a button that reads as a link has to sit on the
+            // text baseline, not on a 32px control's centre line.
+            link: "h-auto gap-1 rounded-none px-0 py-0 text-(color:--tone-hue) underline-offset-4 hover:underline",
+        },
+    },
+    compoundVariants: [
+        { icon: true, size: "xs", class: "size-6" },
+        { icon: true, size: "sm", class: "size-7" },
+        { icon: true, size: "md", class: "size-8" },
+        { icon: true, size: "lg", class: "size-9" },
+        { icon: true, size: "xl", class: "size-10" },
+    ],
+    defaultVariants: {
+        variant: "solid",
+        size: "md",
+        icon: false,
+        pill: false,
+    },
+});
+/**
+ * The class list, for the handful of places that style someone else's element
+ * and cannot render a `Button` — a router `Link` inside a `not-found`, a
+ * calendar day cell. Takes the same props, including the implied tone.
+ */
+export function buttonVariants(props = {}) {
+    return button({ tone: props?.tone ?? impliedTone(props?.variant), ...props });
+}
+/**
+ * A non-`<button>` render element bypasses the primitive on purpose: Base UI
+ * always stamps `type="button"` or `role="button"`, and the latter drops an
+ * anchor out of screen-reader link navigation. Cloning gives it the classes and
+ * nothing else.
+ */
+export function Button({ className, variant, tone, size, icon, pill, render, nativeButton, ...props }) {
+    const resolved = tone ?? impliedTone(variant);
+    const classes = cn(button({ variant, tone: resolved, size, icon, pill, className }));
+    // The resolved axes, stamped: a child can style off its parent's tone, and a
+    // test can assert the ramp without asserting a class string.
+    const marks = {
+        "data-slot": "button",
+        "data-variant": variant ?? "solid",
+        "data-tone": resolved,
+    };
+    // `render.type !== "button"`: a plain <button/> still goes through the primitive, which
+    // is what supplies the native semantics.
+    const as = isValidElement(render) && render.type === "button"
+        ? null
+        : renderAs(render, classes, { ...marks, ...props });
+    if (as)
+        return as;
+    return (_jsx(ButtonPrimitive, { ...marks, className: classes, render: render, nativeButton: nativeButton ?? true, ...props }));
+}

package/dist/blocks/callout.d.ts

@@ -1,41 +1,5 @@
 import type { ComponentType, ReactNode } from "react";
-declare const TONE: {
-    /** The default: an explanation, not a problem. */
-    readonly muted: {
-        readonly box: "border-border bg-muted/40";
-        readonly title: "text-foreground";
-        readonly icon: "text-muted-foreground";
-        readonly rail: "bg-border";
-    };
-    /** Something failed and the reader needs to see that it did. */
-    readonly destructive: {
-        readonly box: "border-destructive/40 bg-destructive/5";
-        readonly title: "text-destructive";
-        readonly icon: "text-destructive";
-        readonly rail: "bg-destructive/60";
-    };
-    /** A prerequisite or a footgun: the reader can still proceed, but not blindly. */
-    readonly warn: {
-        readonly box: "border-warn/25 bg-warn/5";
-        readonly title: "text-warn-ink";
-        readonly icon: "text-warn";
-        readonly rail: "bg-warn/60";
-    };
-    /** A detail that rewards the reader rather than warning them. */
-    readonly accent: {
-        readonly box: "border-primary/25 bg-primary/5";
-        readonly title: "text-foreground";
-        readonly icon: "text-primary";
-        readonly rail: "bg-primary/60";
-    };
-};
-/**
- * Two densities, because this notice serves two ramps. `compact` is the product
- * default (12px title over 12px body, no rail) that the relay sheet and the contact
- * record already render. `editorial` is the docs form: body copy at reading size,
- * and a 3px accent rail carrying the tone so the surface itself can stay quiet.
- * Splitting on a prop rather than forking the component is the point of the file.
- */
+import { type Tone } from "../tone.js";
 export declare function Callout({ icon: Icon, title, tone, density, bodyClassName, action, children, className, }: {
     /** Injected, so the package needs no icon set. Optional: a notice whose title already reads as a label
      *  ("Replied into Norman's thread") gains nothing from a glyph beside it. */
@@ -43,7 +7,7 @@ export declare function Callout({ icon: Icon, title, tone, density, bodyClassNam
         className?: string;
     }>;
     title?: ReactNode;
-    tone?: keyof typeof TONE;
+    tone?: Tone;
     density?: "compact" | "editorial";
     /** For the one body that is not prose — a raw delivery error, which needs mono and its own
      *  line breaks preserved. */
@@ -54,4 +18,3 @@ export declare function Callout({ icon: Icon, title, tone, density, bodyClassNam
     children: ReactNode;
     className?: string;
 }): import("react").JSX.Element;
-export {};

package/dist/blocks/callout.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../cn.js";
+import { toneClass } from "../tone.js";
 import { TypographyCaption, TypographyLabel, TypographyMuted, TypographySmall, } from "../typography/paragraph.js";
 // ---------------------------------------------------------------------------
 // An inline notice: a titled paragraph that explains something the surface it sits in cannot say
@@ -15,47 +16,21 @@ import { TypographyCaption, TypographyLabel, TypographyMuted, TypographySmall, }
 // that just happened; these are quiet, permanent explanations sitting inside a panel, and they
 // must not announce themselves to a screen reader every time a sheet opens.
 // ---------------------------------------------------------------------------
-const TONE = {
-    /** The default: an explanation, not a problem. */
-    muted: {
-        box: "border-border bg-muted/40",
-        title: "text-foreground",
-        icon: "text-muted-foreground",
-        rail: "bg-border",
-    },
-    /** Something failed and the reader needs to see that it did. */
-    destructive: {
-        box: "border-destructive/40 bg-destructive/5",
-        title: "text-destructive",
-        icon: "text-destructive",
-        rail: "bg-destructive/60",
-    },
-    /** A prerequisite or a footgun: the reader can still proceed, but not blindly. */
-    warn: {
-        box: "border-warn/25 bg-warn/5",
-        title: "text-warn-ink",
-        icon: "text-warn",
-        rail: "bg-warn/60",
-    },
-    /** A detail that rewards the reader rather than warning them. */
-    accent: {
-        box: "border-primary/25 bg-primary/5",
-        title: "text-foreground",
-        icon: "text-primary",
-        rail: "bg-primary/60",
-    },
-};
 /**
- * Two densities, because this notice serves two ramps. `compact` is the product
- * default (12px title over 12px body, no rail) that the relay sheet and the contact
- * record already render. `editorial` is the docs form: body copy at reading size,
- * and a 3px accent rail carrying the tone so the surface itself can stay quiet.
- * Splitting on a prop rather than forking the component is the point of the file.
+ * No tone table of its own: the same seven `Button` and `TypographyLink` take.
+ * The four hand-tuned rows this file used to carry are gone, `accent` among them
+ * — it was `--primary` under another name, which is why a "tip" callout and a
+ * "primary" one were indistinguishable. `muted` keeps its name and its values.
+ * See ../tone.ts.
+ *
+ * A callout is a panel, so it tints with `--tone-veil` (5%) where a control uses
+ * `--tone-wash` (10%). That is the only thing this file knows about colour.
  */
+const BOX = "border-(color:--tone-line) bg-(--tone-veil)";
 export function Callout({ icon: Icon, title, tone = "muted", density = "compact", bodyClassName, action, children, className, }) {
-    const t = TONE[tone];
+    const toned = toneClass(tone);
     if (density === "editorial") {
-        return (_jsx("div", { className: cn("relative overflow-hidden rounded-lg border py-3.5 pl-5 pr-4", t.box, className), children: _jsxs("div", { className: "flex items-start gap-2.5", children: [Icon && _jsx(Icon, { className: cn("mt-0.5 size-4 shrink-0", t.icon) }), _jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [title && (_jsx(TypographyLabel, { className: t.title, children: title })), _jsx(TypographyMuted, { className: cn("leading-relaxed", bodyClassName), children: children }), action && (_jsx("div", { className: "mt-1 flex items-center gap-1", children: action }))] })] }) }));
+        return (_jsxs("div", { className: cn("relative overflow-hidden rounded-lg border py-3.5 pl-5 pr-4", toned, BOX, className), children: [_jsx("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 w-[3px] bg-(--tone-line)" }), _jsxs("div", { className: "flex items-start gap-2.5", children: [Icon && (_jsx(Icon, { className: "mt-0.5 size-4 shrink-0 text-(color:--tone-hue)" })), _jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [title && (_jsx(TypographyLabel, { className: "text-(color:--tone-hue)", children: title })), _jsx(TypographyMuted, { className: cn("leading-relaxed", bodyClassName), children: children }), action && (_jsx("div", { className: "mt-1 flex items-center gap-1", children: action }))] })] })] }));
     }
-    return (_jsxs("div", { className: cn("rounded-md border p-3", t.box, className), children: [title && (_jsxs(TypographySmall, { className: cn("flex items-center gap-1.5 font-medium", t.title), children: [Icon && _jsx(Icon, { className: cn("size-3.5 shrink-0", t.icon) }), title] })), _jsx(TypographyCaption, { className: cn("mt-1 block leading-relaxed", bodyClassName), children: children }), action && _jsx("div", { className: "mt-2 flex items-center gap-1", children: action })] }));
+    return (_jsxs("div", { className: cn("rounded-md border p-3", toned, BOX, className), children: [title && (_jsxs(TypographySmall, { className: "flex items-center gap-1.5 font-medium text-(color:--tone-hue)", children: [Icon && _jsx(Icon, { className: "size-3.5 shrink-0" }), title] })), _jsx(TypographyCaption, { className: cn("mt-1 block leading-relaxed", bodyClassName), children: children }), action && _jsx("div", { className: "mt-2 flex items-center gap-1", children: action })] }));
 }

package/dist/blocks/card.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "../cn.js";
+import { FOCUS_RING } from "./focus.js";
+import { toneClass } from "../tone.js";
 import { Link } from "next-view-transitions";
 /** Two columns from `sm` up: a pair reads as a set rather than two panels. */
 export function Cards({ className, children, ...props }) {
@@ -13,6 +15,17 @@ export function Cards({ className, children, ...props }) {
 const CARD_CLASS = "flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-border " +
     "has-[>img:first-child]:pt-0 " +
     "*:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl";
+/**
+ * What a card does when it is a link, which is the only time it does anything: two pixels
+ * up, a shadow under it, the ring firming from `--border` to a cut of the page's own ink.
+ * Following a link is not a colour, so nothing here is one — `--elevation-raised` is the
+ * token for a layer leaving the page plane, and that is the whole gesture. The lift is
+ * `motion-safe:` and the shadow is not, so reduced motion keeps the affordance.
+ *
+ * `toneClass` is declared here so the icon below can take `--tone-hue` rather than naming
+ * a token, the way every other tinted role in the package reads it.
+ */
+const CARD_LINK_CLASS = cn(toneClass("primary"), FOCUS_RING, "group/card no-underline transition duration-200 ease-out", "hover:shadow-raised hover:ring-foreground/15 motion-safe:hover:-translate-y-0.5");
 export function CardHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-header", className: cn("grid auto-rows-min items-start gap-1 px-4 [.border-b]:pb-4", className), ...props }));
 }
@@ -40,7 +53,14 @@ export function CardContent({ className, ...props }) {
  * the router's Link.
  */
 export function Card({ href, className, external, title, description, icon, children, ...rest }) {
-    const header = title || description || icon ? (_jsxs(CardHeader, { children: [icon ? _jsx("div", { className: "mb-1 text-muted-foreground", children: icon }) : null, title ? _jsx(CardTitle, { children: title }) : null, description ? _jsx(CardDescription, { children: description }) : null] })) : null;
+    const header = title || description || icon ? (_jsxs(CardHeader, { children: [icon || title ? (
+            // The icon sits on the title's line and is its mark; stacked, it read as a
+            // decoration the title happened to follow. `gap-2` is a gap between two
+            // objects, not the header's `gap-1` between two lines.
+            _jsxs("div", { className: "flex items-center gap-2", children: [icon ? (
+                    // Sized here, not at the call site, so two cards cannot disagree about how
+                    // big an icon is. On a link card it takes the tone as the card lifts.
+                    _jsx("span", { className: "shrink-0 text-muted-foreground transition-colors group-hover/card:text-(color:--tone-hue) [&_svg]:size-4 [&_svg]:shrink-0", children: icon })) : null, title ? _jsx(CardTitle, { children: title }) : null] })) : null, description ? _jsx(CardDescription, { children: description }) : null] })) : null;
     // Bare children compose; children under a shorthand header are body copy.
     const body = header ? (_jsxs(_Fragment, { children: [header, children ? _jsx(CardContent, { children: children }) : null] })) : (children);
     const shared = { "data-slot": "card" };
@@ -48,7 +68,7 @@ export function Card({ href, className, external, title, description, icon, chil
         return (_jsx("div", { className: cn(CARD_CLASS, className), ...shared, ...rest, children: body }));
     }
     const leavesApp = external ?? /^[a-z][a-z0-9+.-]*:/i.test(href);
-    const classes = cn(CARD_CLASS, "no-underline transition-colors hover:bg-accent", className);
+    const classes = cn(CARD_CLASS, CARD_LINK_CLASS, className);
     if (leavesApp) {
         return (_jsx("a", { href: href, className: classes, target: "_blank", rel: "noopener noreferrer", ...shared, ...rest, children: body }));
     }

package/dist/blocks/focus.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The focus ring, stated once.
+ *
+ * It was five copies — Button, Badge, Accordion, `SEGMENT.item`, and Card, which
+ * added the fifth while its own comment observed that the other four existed.
+ * Retuning the width or the ink was a find-and-replace across five files with no
+ * compiler help if one was missed.
+ */
+export declare const FOCUS_RING = "outline-none focus-visible:ring-3 focus-visible:ring-ring/50";

package/dist/blocks/focus.js

@@ -0,0 +1,9 @@
+/**
+ * The focus ring, stated once.
+ *
+ * It was five copies — Button, Badge, Accordion, `SEGMENT.item`, and Card, which
+ * added the fifth while its own comment observed that the other four existed.
+ * Retuning the width or the ink was a find-and-replace across five files with no
+ * compiler help if one was missed.
+ */
+export const FOCUS_RING = "outline-none focus-visible:ring-3 focus-visible:ring-ring/50";

package/dist/blocks/index.d.ts

@@ -2,6 +2,8 @@ export { Cards, Card, CardHeader, CardTitle, CardDescription, CardContent, } fro
 export { Disclosure, DisclosureGroup } from "./accordion.js";
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from "./interactive-accordion.js";
 export { Callout } from "./callout.js";
-export { Tabs, TabsList, TabsTrigger, TabsContent, TabGroup, Tab, } from "./tabs.js";
+export { Button, buttonVariants, type ButtonLook } from "./button.js";
+export { Badge, badgeVariants, type BadgeLook } from "./badge.js";
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabGroup, type TabItem, } from "./tabs.js";
 export { SEGMENT } from "./segment.js";
 export { Steps, Step } from "./steps.js";

package/dist/blocks/index.js

@@ -2,6 +2,8 @@ export { Cards, Card, CardHeader, CardTitle, CardDescription, CardContent, } fro
 export { Disclosure, DisclosureGroup } from "./accordion.js";
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from "./interactive-accordion.js";
 export { Callout } from "./callout.js";
-export { Tabs, TabsList, TabsTrigger, TabsContent, TabGroup, Tab, } from "./tabs.js";
+export { Button, buttonVariants } from "./button.js";
+export { Badge, badgeVariants } from "./badge.js";
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabGroup, } from "./tabs.js";
 export { SEGMENT } from "./segment.js";
 export { Steps, Step } from "./steps.js";

package/dist/blocks/interactive-accordion.js

@@ -8,6 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
 import { cn } from "../cn.js";
+import { FOCUS_RING } from "./focus.js";
 function Accordion({ className, ...props }) {
     return (_jsx(AccordionPrimitive.Root, { "data-slot": "accordion", className: cn("flex w-full flex-col", className), ...props }));
 }
@@ -15,7 +16,7 @@ function AccordionItem({ className, ...props }) {
     return (_jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn("not-last:border-b", className), ...props }));
 }
 function AccordionTrigger({ className, children, ...props }) {
-    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn("group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className), ...props, children: [children, _jsx(Chevron, { className: "group-aria-expanded/accordion-trigger:hidden" }), _jsx(Chevron, { up: true, className: "hidden group-aria-expanded/accordion-trigger:inline" })] }) }));
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn(FOCUS_RING, "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition hover:underline focus-visible:border-ring focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className), ...props, children: [children, _jsx(Chevron, { className: "group-aria-expanded/accordion-trigger:hidden" }), _jsx(Chevron, { up: true, className: "hidden group-aria-expanded/accordion-trigger:inline" })] }) }));
 }
 function AccordionContent({ className, children, ...props }) {
     return (_jsx(AccordionPrimitive.Panel, { "data-slot": "accordion-content", className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up", ...props, children: _jsx("div", { className: cn("h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className), children: children }) }));

package/dist/blocks/render-as.d.ts

@@ -0,0 +1,11 @@
+import { type ReactElement } from "react";
+/**
+ * `render={<a href="…" />}` — the component's classes and data marks put onto an element
+ * the caller supplies, so a badge or a button can BE a link rather than wrap one. A
+ * screen reader announces the element, and the element is the anchor.
+ *
+ * Shared because Button and Badge both do it, identically, for the same reason; both
+ * files' comments used to say so while carrying their own copy. Returns `null` when
+ * `render` is not an element, which is the caller's signal to render its own tag.
+ */
+export declare function renderAs(render: unknown, classes: string, props: Record<string, unknown>): ReactElement | null;

package/dist/blocks/render-as.js

@@ -0,0 +1,22 @@
+import { cloneElement, isValidElement } from "react";
+import { cn } from "../cn.js";
+/**
+ * `render={<a href="…" />}` — the component's classes and data marks put onto an element
+ * the caller supplies, so a badge or a button can BE a link rather than wrap one. A
+ * screen reader announces the element, and the element is the anchor.
+ *
+ * Shared because Button and Badge both do it, identically, for the same reason; both
+ * files' comments used to say so while carrying their own copy. Returns `null` when
+ * `render` is not an element, which is the caller's signal to render its own tag.
+ */
+export function renderAs(render, classes, props) {
+    // `unknown`, because Base UI's `render` is an element OR a render function; only the
+    // element half is ours to clone, and `isValidElement` is the narrowing.
+    if (!isValidElement(render))
+        return null;
+    const { className } = render.props;
+    return cloneElement(render, {
+        ...props,
+        className: cn(classes, className),
+    });
+}

package/dist/blocks/segment.d.ts

@@ -9,29 +9,37 @@
  * class strings, which is exactly the kind of duplication that drifts the first time
  * someone retunes the palette.
  *
- * Some entries appear twice, once bare and once `data-active:`-prefixed. That is not
- * laziness: Tailwind generates a utility only if it appears literally in scanned source, so
- * prefixing at runtime would compile to classes that never got built. Writing both forms
- * side by side is the honest version, and it keeps the pair impossible to change by half.
- *
  * The active segment is deliberately flat — a card surface and a hairline, no shadow.
  * Elevation in this system means "this layer left the page plane" (see --elevation-* in
  * theme.css), and a segment sitting inside its own track has not.
+ *
+ * The other half of that: the segment stays on the page plane because the RAIL drops below
+ * it. The well is the shadow and the hairline, not a fill — the track is `bg-background`
+ * pressed in. A `--muted` rail cannot work, because `--muted` sits below `--card` in light
+ * and above it in dark, so a muted fill reads correct in one theme and inverted in the
+ * other, and `dark:` is what the package's own ESLint rule exists to stop.
  */
 export declare const SEGMENT: {
-    /** The rail a set of segments sits in. Surface only; each component owns its layout. */
-    readonly track: "rounded-lg border border-border bg-muted/40 p-0.5";
+    /**
+     * The rail a set of segments sits in. Surface only; each component owns its layout.
+     *
+     * `rounded-md` over `activeSurface`'s `rounded-sm` is the 2px of `p-0.5`: concentric
+     * radii, so the segment's corner runs parallel to the rail's rather than across it.
+     */
+    readonly track: "rounded-md border border-border bg-background p-0.5 shadow-recessed";
     /** Affordances every segment shares, whatever its shape or engine. */
-    readonly item: "relative inline-flex items-center gap-1.5 font-medium outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring/50";
+    readonly item: "relative inline-flex items-center gap-1.5 font-medium transition-colors outline-none focus-visible:ring-3 focus-visible:ring-ring/50";
     /** Selected: the ink lifts to full strength. */
     readonly active: "text-foreground";
     /**
      * Unselected: quiet, but lighting its own surface on hover so the whole strip reads as
-     * reachable rather than only the segment already chosen.
+     * reachable rather than only the segment already chosen. It moves toward `activeSurface`
+     * and not toward the rail, so a hover previews being picked.
+     */
+    readonly idle: "text-muted-foreground hover:bg-card/60 hover:text-foreground";
+    /**
+     * The flat surface marking the selection. One string, worn by both engines: the marketing
+     * picker slides it with `motion`, `Tabs` hands it to the element Base UI positions.
      */
-    readonly idle: "text-muted-foreground hover:bg-muted/60 hover:text-foreground";
-    /** The flat surface marking the selection. */
-    readonly activeSurface: "bg-card ring-1 ring-border";
-    /** `activeSurface`, for an engine that marks its own trigger with `data-active`. */
-    readonly dataActiveSurface: "data-active:bg-card data-active:text-foreground data-active:ring-1 data-active:ring-border";
+    readonly activeSurface: "rounded-sm bg-card ring-1 ring-border";
 };