@supertype.ai/foundations 0.1.24

package/dist/blocks/accordion.d.ts

@@ -0,0 +1,23 @@
+import { type ComponentProps, type ReactNode } from "react";
+/**
+ * A disclosure group: `<details>`/`<summary>`, no JS, correct before hydration.
+ *
+ * Named for what it is rather than `Accordion`, the interactive Base UI
+ * component next door. The two are not variants of each other — this one is a
+ * server component an MDX author gets for free, that one animates and manages
+ * state. Sharing a name is how a call site ends up with the wrong one.
+ */
+export declare function DisclosureGroup({ className, children, type, defaultValue, name, ...props }: Omit<ComponentProps<"div">, "defaultValue"> & {
+    /** `single` closes siblings when one opens. Defaults to `multiple`. */
+    type?: "single" | "multiple";
+    /** Title(s) open on first render. */
+    defaultValue?: string | string[];
+    /** Explicit group name; one is derived from `type` when omitted. */
+    name?: string;
+}): import("react").JSX.Element;
+type DisclosureProps = Omit<ComponentProps<"details">, "title"> & {
+    title: ReactNode;
+    name?: string;
+};
+export declare function Disclosure({ title, children, className, ...props }: DisclosureProps): import("react").JSX.Element;
+export {};

package/dist/blocks/accordion.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from "react";
+import { cn } from "../cn.js";
+/**
+ * A disclosure group: `<details>`/`<summary>`, no JS, correct before hydration.
+ *
+ * Named for what it is rather than `Accordion`, the interactive Base UI
+ * component next door. The two are not variants of each other — this one is a
+ * server component an MDX author gets for free, that one animates and manages
+ * state. Sharing a name is how a call site ends up with the wrong one.
+ */
+export function DisclosureGroup({ className, children, type = "multiple", defaultValue, name, ...props }) {
+    // Single-open comes from the shared `name` attribute, which browsers implement
+    // natively and which degrades to all-open where they do not — a fine failure
+    // for a disclosure group, and far cheaper than shipping state for it.
+    const open = defaultValue
+        ? new Set(Array.isArray(defaultValue) ? defaultValue : [defaultValue])
+        : null;
+    const groupName = type === "single" ? (name ?? deriveGroupName(children)) : undefined;
+    // Cloned rather than passed through context: a Provider would have to be a
+    // client component, and this whole block exists to stay off that boundary.
+    const items = Children.map(children, (child) => {
+        if (!isValidElement(child))
+            return child;
+        // defaultValue matches on the title, so it can only match a string one. A
+        // JSX title stringifies to "[object Object]" and would match nothing while
+        // looking like it should.
+        const title = child.props.title;
+        const defaultOpen = open && typeof title === "string" ? open.has(title) : undefined;
+        return cloneElement(child, {
+            name: child.props.name ?? groupName,
+            open: child.props.open ?? defaultOpen,
+        });
+    });
+    return (_jsx("div", { className: cn("my-6 divide-y divide-border overflow-hidden rounded-xl border border-border", className), ...props, children: items }));
+}
+/**
+ * `<details name>` must match across siblings, server and client, and builds — a
+ * module counter fails all three, and `useId` is a hook in a server component.
+ * Hashing the titles is deterministic; identical groups on one page would merge.
+ */
+function deriveGroupName(children) {
+    const titles = [];
+    Children.forEach(children, (child) => {
+        if (isValidElement(child) && typeof child.props.title === "string") {
+            titles.push(child.props.title);
+        }
+    });
+    // djb2. Short, stable, and the collision domain here is one page.
+    let hash = 5381;
+    const source = titles.join("|");
+    for (let i = 0; i < source.length; i++) {
+        hash = ((hash << 5) + hash + source.charCodeAt(i)) | 0;
+    }
+    return `accordion-${(hash >>> 0).toString(36)}`;
+}
+export function Disclosure({ title, children, className, ...props }) {
+    return (_jsxs("details", { className: cn("group bg-card", className), ...props, children: [_jsxs("summary", { className: "flex cursor-pointer list-none items-center justify-between gap-4 px-4 py-3 text-sm font-medium text-foreground marker:hidden hover:bg-accent [&::-webkit-details-marker]:hidden", children: [title, _jsx("svg", { "aria-hidden": "true", className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }), _jsx("div", { className: "px-4 pb-4 text-sm text-muted-foreground", children: children })] }));
+}

package/dist/blocks/callout.d.ts

@@ -0,0 +1,57 @@
+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.
+ */
+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. */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    title?: ReactNode;
+    tone?: keyof typeof 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. */
+    bodyClassName?: string;
+    /** A link or buttons under the body. The only interactive slot: a notice that explains
+     *  something usually also knows the one place to go and do something about it. */
+    action?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/blocks/callout.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../cn.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
+// on its own — why a row was dropped, why a payload is hidden, why a timeline is incomplete.
+//
+// Extracted because there were six of these hand-rolled across the relay detail sheet and the
+// contact record, each re-declaring the same border, the same muted fill, the same `text-xs
+// font-medium` title and the same `text-xs text-muted-foreground` body. Three of the six had
+// already drifted on the radius. Hand-rolled type styles are also exactly what the project's own
+// guidance forbids, and six copies is how a rule like that gets broken without anyone deciding to.
+//
+// Deliberately not a shadcn Alert. Alert is a page-level, role="alert" affordance for something
+// 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.
+ */
+export function Callout({ icon: Icon, title, tone = "muted", density = "compact", bodyClassName, action, children, className, }) {
+    const t = TONE[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("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 })] }));
+}

package/dist/blocks/card.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentProps, ReactNode } from "react";
+/** Two columns from `sm` up: a pair reads as a set rather than two panels. */
+export declare function Cards({ className, children, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function CardHeader({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/**
+ * No `font-heading`, and no rung off the heading ladder. That role is the
+ * editorial display face — `.editorial` hands it to the serif and drops the
+ * weight to 400 — and a card is chrome, not prose: dropped into a docs page it
+ * wore a serif title over a sans description and lost the weight that separated
+ * the two. Rank inside a card is weight and size, the way a callout title does
+ * it. The face is whatever the card inherits.
+ */
+export declare function CardTitle({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function CardDescription({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function CardContent({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+type CardShorthand = {
+    /** Shorthand header: 52 MDX files use it, and no compiler checks those. */
+    title?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    /** Override the scheme sniff: an absolute URL home, or a relative one away. */
+    external?: boolean;
+};
+/**
+ * Takes either shape: `title`/`href` fills the header, or compose the slots
+ * directly. Unrecognised props pass through — MDX authors reach for the whole
+ * HTML surface. An href with a scheme leaves the app; the rest route through
+ * the router's Link.
+ */
+export declare function Card({ href, className, external, title, description, icon, children, ...rest }: CardShorthand & {
+    href?: string;
+    children?: ReactNode;
+} & Omit<ComponentProps<"a">, keyof CardShorthand | "href" | "children">): import("react").JSX.Element;
+export {};

package/dist/blocks/card.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../cn.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 }) {
+    return (_jsx("div", { className: cn("my-6 grid gap-4 sm:grid-cols-2", className), ...props, children: children }));
+}
+/**
+ * `ring-1` not `border`: a ring draws outside the box, so a card sits flush in a
+ * grid and `overflow-hidden` clips a bleed image cleanly. Padding is vertical
+ * only — the horizontal inset belongs to the slots, so bands can run edge to edge.
+ */
+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";
+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 }));
+}
+/**
+ * No `font-heading`, and no rung off the heading ladder. That role is the
+ * editorial display face — `.editorial` hands it to the serif and drops the
+ * weight to 400 — and a card is chrome, not prose: dropped into a docs page it
+ * wore a serif title over a sans description and lost the weight that separated
+ * the two. Rank inside a card is weight and size, the way a callout title does
+ * it. The face is whatever the card inherits.
+ */
+export function CardTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-title", className: cn("text-base leading-snug font-medium", className), ...props }));
+}
+export function CardDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+export function CardContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-content", className: cn("px-4", className), ...props }));
+}
+/**
+ * Takes either shape: `title`/`href` fills the header, or compose the slots
+ * directly. Unrecognised props pass through — MDX authors reach for the whole
+ * HTML surface. An href with a scheme leaves the app; the rest route through
+ * 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;
+    // 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" };
+    if (!href) {
+        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);
+    if (leavesApp) {
+        return (_jsx("a", { href: href, className: classes, target: "_blank", rel: "noopener noreferrer", ...shared, ...rest, children: body }));
+    }
+    return (_jsx(Link, { href: href, className: classes, ...shared, ...rest, children: body }));
+}

package/dist/blocks/index.d.ts

@@ -0,0 +1,7 @@
+export { Cards, Card, CardHeader, CardTitle, CardDescription, CardContent, } from "./card.js";
+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 { SEGMENT } from "./segment.js";
+export { Steps, Step } from "./steps.js";

package/dist/blocks/index.js

@@ -0,0 +1,7 @@
+export { Cards, Card, CardHeader, CardTitle, CardDescription, CardContent, } from "./card.js";
+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 { SEGMENT } from "./segment.js";
+export { Steps, Step } from "./steps.js";

package/dist/blocks/interactive-accordion.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The interactive accordion: Base UI, animated, client-side.
+ *
+ * `Disclosure`/`DisclosureGroup` next door is the `<details>` version an MDX
+ * author gets with no JS. Neither is a variant of the other, so they no longer
+ * share a name.
+ */
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+declare function Accordion({ className, ...props }: AccordionPrimitive.Root.Props): import("react").JSX.Element;
+declare function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props): import("react").JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props): import("react").JSX.Element;
+declare function AccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props): import("react").JSX.Element;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/blocks/interactive-accordion.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The interactive accordion: Base UI, animated, client-side.
+ *
+ * `Disclosure`/`DisclosureGroup` next door is the `<details>` version an MDX
+ * author gets with no JS. Neither is a variant of the other, so they no longer
+ * share a name.
+ */
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { cn } from "../cn.js";
+function Accordion({ className, ...props }) {
+    return (_jsx(AccordionPrimitive.Root, { "data-slot": "accordion", className: cn("flex w-full flex-col", className), ...props }));
+}
+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" })] }) }));
+}
+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 }) }));
+}
+/** Inline, not an icon import — one glyph is not a dependency. */
+function Chevron({ up, className }) {
+    return (_jsx("svg", { "data-slot": "accordion-trigger-icon", "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn("pointer-events-none shrink-0", className), children: _jsx("path", { d: up ? "m18 15-6-6-6 6" : "m6 9 6 6 6-6" }) }));
+}
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/blocks/segment.d.ts

@@ -0,0 +1,37 @@
+/**
+ * The segmented picker, as one set of surfaces.
+ *
+ * Two components draw this control and neither can absorb the other: `Tabs` is Base UI's
+ * compositional Tabs, driven by a `value` and marking its own trigger with `data-active`,
+ * while a consumer's marketing picker is a data-driven `items`/`index` control that paints
+ * the active state onto a separate absolutely-positioned pill so `motion` can slide it.
+ * Same design, two mechanisms. Before this file they were two hand-synced copies of the same
+ * 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.
+ */
+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";
+    /** 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";
+    /** 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.
+     */
+    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";
+};

package/dist/blocks/segment.js

@@ -0,0 +1,37 @@
+/**
+ * The segmented picker, as one set of surfaces.
+ *
+ * Two components draw this control and neither can absorb the other: `Tabs` is Base UI's
+ * compositional Tabs, driven by a `value` and marking its own trigger with `data-active`,
+ * while a consumer's marketing picker is a data-driven `items`/`index` control that paints
+ * the active state onto a separate absolutely-positioned pill so `motion` can slide it.
+ * Same design, two mechanisms. Before this file they were two hand-synced copies of the same
+ * 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.
+ */
+export const SEGMENT = {
+    /** The rail a set of segments sits in. Surface only; each component owns its layout. */
+    track: "rounded-lg border border-border bg-muted/40 p-0.5",
+    /** Affordances every segment shares, whatever its shape or engine. */
+    item: "relative inline-flex items-center gap-1.5 font-medium outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring/50",
+    /** Selected: the ink lifts to full strength. */
+    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.
+     */
+    idle: "text-muted-foreground hover:bg-muted/60 hover:text-foreground",
+    /** The flat surface marking the selection. */
+    activeSurface: "bg-card ring-1 ring-border",
+    /** `activeSurface`, for an engine that marks its own trigger with `data-active`. */
+    dataActiveSurface: "data-active:bg-card data-active:text-foreground data-active:ring-1 data-active:ring-border",
+};

package/dist/blocks/steps.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps, ReactNode } from "react";
+/**
+ * Numbers are a CSS counter, not markup: reordering renumbers itself, and the
+ * digits stay out of the accessibility tree and out of copied text.
+ */
+export declare function Steps({ className, children, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/** One step. `title` is its heading; children are the body. */
+export declare function Step({ title, className, children, ...props }: Omit<ComponentProps<"div">, "title"> & {
+    title?: ReactNode;
+}): import("react").JSX.Element;

package/dist/blocks/steps.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../cn.js";
+/**
+ * Numbers are a CSS counter, not markup: reordering renumbers itself, and the
+ * digits stay out of the accessibility tree and out of copied text.
+ */
+export function Steps({ className, children, ...props }) {
+    return (_jsx("div", { className: cn("my-6 [counter-reset:prose-step]", className), ...props, children: children }));
+}
+/** One step. `title` is its heading; children are the body. */
+export function Step({ title, className, children, ...props }) {
+    return (_jsxs("div", { className: cn("relative border-l border-border pb-6 pl-10 last:border-transparent last:pb-0", "[counter-increment:prose-step]", "before:absolute before:left-0 before:top-0 before:-translate-x-1/2", "before:flex before:h-7 before:w-7 before:items-center before:justify-center", "before:rounded-full before:bg-muted before:text-xs before:font-semibold", "before:text-foreground before:[content:counter(prose-step)]", className), ...props, children: [title ? (_jsx("div", { className: "mb-1 font-semibold text-foreground", children: title })) : null, _jsx("div", { className: "text-sm text-muted-foreground", children: children })] }));
+}

package/dist/blocks/tabs.d.ts

@@ -0,0 +1,32 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import type { ReactNode } from "react";
+import { type VariantProps } from "class-variance-authority";
+declare function Tabs({ className, orientation, ...props }: TabsPrimitive.Root.Props): import("react").JSX.Element;
+declare const tabsListVariants: (props?: ({
+    variant?: "line" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function TabsList({ className, variant, ...props }: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>): import("react").JSX.Element;
+declare function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props): import("react").JSX.Element;
+declare function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props): import("react").JSX.Element;
+/**
+* The declarative shorthand: `items` plus a `<Tab>` per panel. `TabGroup` is to
+ * `Tabs` what `DisclosureGroup` is to `Accordion` — the shape you reach for when
+ * the tabs are data, and what an MDX author writes as `<Tabs>`.
+ *
+ * A caller passing data has no value to bind, so children pair with `items`
+ * **by position** — `value` on a `<Tab>` is for readability and is not matched,
+ * since matching would silently drop a panel on an edited label. Everything
+ * below the adapter is the same component the product surfaces use, so a tab
+ * strip in the docs and one on a dashboard behave identically.
+ */
+export declare function TabGroup({ items, children, className, }: {
+    items: string[];
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/** `value` names the panel at the call site; it is not used for matching. */
+export declare function Tab({ children }: {
+    value?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/blocks/tabs.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva } from "class-variance-authority";
+import { cn } from "../cn.js";
+import { SEGMENT } from "./segment.js";
+function Tabs({ className, orientation = "horizontal", ...props }) {
+    return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-orientation": orientation, className: cn(
+        // Base UI writes the orientation as `data-orientation="horizontal|vertical"`, so
+        // the variant has to read that attribute's value. A bare `data-horizontal:` compiles
+        // to `[data-horizontal]`, which nothing ever sets: the root silently stayed a row
+        // flex container and laid its panels out beside the tab strip.
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className), ...props }));
+}
+// Surfaces come from SEGMENT, so this and marketing/segmented-control cannot drift: a
+// reader who meets the picker on a docs page and again on the usage dashboard should not
+// have to learn it twice. Layout stays local, since only this one has orientation to serve.
+const tabsListVariants = cva("group/tabs-list inline-flex h-8 w-fit items-center justify-center text-muted-foreground data-[variant=line]:rounded-none", {
+    variants: {
+        variant: {
+            default: SEGMENT.track,
+            line: "gap-1 border-0 bg-transparent",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function TabsList({ className, variant = "default", ...props }) {
+    return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), className), ...props }));
+}
+function TabsTrigger({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Tab, { "data-slot": "tabs-trigger", className: cn(SEGMENT.item, SEGMENT.dataActiveSurface, "rounded-md text-muted-foreground hover:text-foreground", 
+        // A trigger fills its share of the track and may carry an icon, neither of which a
+        // standalone picker button has to do.
+        "h-[calc(100%-1px)] flex-1 justify-center px-1.5 py-0.5 text-sm whitespace-nowrap disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", 
+        // The idle hover, scoped to the boxed variant. Spelled out rather than
+        // interpolated: an interpolated class is invisible to Tailwind's scanner and would
+        // compile to nothing at all.
+        "group-data-[variant=default]/tabs-list:not-data-active:hover:bg-muted/60", 
+        // The line variant wears no surface at all; the underline below is its whole signal.
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=line]/tabs-list:data-active:ring-0", 
+        // That underline carries the accent rather than plain ink, so it reads as the
+        // brand's marker and not as a bold rule.
+        "after:absolute after:inset-x-0 after:bottom-[-5px] after:h-0.5 after:bg-primary after:opacity-0 after:transition-opacity group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className), ...props }));
+}
+function TabsContent({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Panel, { "data-slot": "tabs-content", className: cn("flex-1 text-sm outline-none", className), ...props }));
+}
+/**
+* The declarative shorthand: `items` plus a `<Tab>` per panel. `TabGroup` is to
+ * `Tabs` what `DisclosureGroup` is to `Accordion` — the shape you reach for when
+ * the tabs are data, and what an MDX author writes as `<Tabs>`.
+ *
+ * A caller passing data has no value to bind, so children pair with `items`
+ * **by position** — `value` on a `<Tab>` is for readability and is not matched,
+ * since matching would silently drop a panel on an edited label. Everything
+ * below the adapter is the same component the product surfaces use, so a tab
+ * strip in the docs and one on a dashboard behave identically.
+ */
+export function TabGroup({ items, children, className, }) {
+    const panels = Array.isArray(children) ? children : [children];
+    return (_jsxs(Tabs, { defaultValue: 0, className: cn("my-6", className), children: [_jsx(TabsList, { children: items.map((label, i) => (_jsx(TabsTrigger, { value: i, children: label }, label))) }), panels.map((panel, i) => (_jsx(TabsContent, { value: i, className: "pt-2 text-muted-foreground", children: panel }, i)))] }));
+}
+/** `value` names the panel at the call site; it is not used for matching. */
+export function Tab({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+export { Tabs, TabsList, TabsTrigger, TabsContent };