@fiestaboard/ui 5.9.0 → 5.10.0

package/dist/components/chrome/pagination.d.ts

@@ -0,0 +1,75 @@
+import type * as React from "react";
+/** One slot in the rendered strip: a page number, or an elided run. */
+export type PaginationSlot = number | "ellipsis";
+export interface PaginationRangeOptions {
+    /** The 1-based current page. Clamped into `[1, totalPages]`. */
+    page: number;
+    /** How many pages exist. `<= 0` yields an empty range. */
+    totalPages: number;
+    /** Pages shown either side of the current one. @default 1 */
+    siblingCount?: number;
+    /** Pages pinned to each end of the strip. @default 1 */
+    boundaryCount?: number;
+}
+/**
+ * The slots to render for one page of a list: boundary pages, the current
+ * page and its siblings, and `"ellipsis"` wherever a run of two or more pages
+ * is elided.
+ *
+ * The returned length is stable for a given `totalPages`/`siblingCount`/
+ * `boundaryCount` (until the range is short enough to fit whole), which is
+ * what keeps the pager from resizing under the reader's cursor.
+ */
+export declare function paginationRange({ page, totalPages, siblingCount, boundaryCount, }: PaginationRangeOptions): PaginationSlot[];
+/** Localized copy. Required in full — the package ships no English defaults. */
+export interface PaginationLabels {
+    /** Accessible name for the `<nav>` landmark, e.g. "Blog pages". */
+    navigation: string;
+    /** Accessible name for the previous-page chevron, e.g. "Previous page". */
+    previous: string;
+    /** Accessible name for the next-page chevron, e.g. "Next page". */
+    next: string;
+    /** Accessible name for a numbered link, e.g. `(n) => \`Page ${n}\``. */
+    page: (page: number) => string;
+    /** Screen-reader-only announcement for an elided run, e.g. "More pages". */
+    ellipsis: string;
+}
+/** Which control `renderLink` is being asked for, and where it goes. */
+export interface PaginationLinkItem {
+    /** The 1-based page this control navigates to. */
+    page: number;
+    kind: "page" | "previous" | "next";
+    /** True only for the numbered link the reader is currently on. */
+    current: boolean;
+}
+/** Spread these onto your router's Link. `className` MUST land on it. */
+export interface PaginationLinkProps {
+    className: string;
+    children: React.ReactNode;
+    "data-slot": string;
+    "aria-label": string;
+    "aria-current"?: "page";
+    rel?: "prev" | "next";
+}
+export interface PaginationProps extends Omit<React.ComponentProps<"nav">, "aria-label" | "children"> {
+    /** The 1-based current page. Clamped into `[1, totalPages]`. */
+    page: number;
+    /** How many pages exist. `<= 1` renders nothing at all. */
+    totalPages: number;
+    labels: PaginationLabels;
+    /**
+     * Renders one navigating control — inject your router's Link here. Receives
+     * spreadable DOM props first and the semantic item second, the same
+     * signature as {@link "./sidebar".Sidebar}'s `renderLink`. There is
+     * deliberately no `href` shortcut: a bare string href renders a plain `<a>`
+     * that full-page-reloads inside an SPA, which is exactly the trap this prop
+     * exists to avoid.
+     */
+    renderLink: (props: PaginationLinkProps, item: PaginationLinkItem) => React.ReactNode;
+    /** Pages shown either side of the current one. @default 1 */
+    siblingCount?: number;
+    /** Pages pinned to each end of the strip. @default 1 */
+    boundaryCount?: number;
+}
+declare function Pagination({ page, totalPages, labels, renderLink, siblingCount, boundaryCount, className, ...props }: PaginationProps): React.JSX.Element | null;
+export { Pagination };

package/dist/components/chrome/pagination.js

@@ -0,0 +1,93 @@
+import { cn as e } from "../../lib/utils.js";
+import { buttonVariants as t } from "../forms/button.js";
+import { ChevronLeft as n, ChevronRight as r, MoreHorizontal as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/chrome/pagination.tsx
+function s(e, t) {
+	return Array.from({ length: Math.max(0, t - e + 1) }, (t, n) => e + n);
+}
+function c({ page: e, totalPages: t, siblingCount: n = 1, boundaryCount: r = 1 }) {
+	if (t <= 0) return [];
+	let i = Math.min(Math.max(Math.trunc(e), 1), t), a = s(1, Math.min(r, t)), o = s(Math.max(t - r + 1, r + 1), t), c = Math.max(Math.min(i - n, t - r - n * 2 - 1), r + 2), l = Math.min(Math.max(i + n, r + n * 2 + 2), o.length > 0 ? o[0] - 2 : t - 1);
+	return [
+		...a,
+		...c > r + 2 ? ["ellipsis"] : r + 1 < t - r ? [r + 1] : [],
+		...s(c, l),
+		...l < t - r - 1 ? ["ellipsis"] : t - r > r ? [t - r] : [],
+		...o
+	];
+}
+var l = "h-9 w-auto min-w-9 px-2 tabular-nums";
+function u({ page: s, totalPages: u, labels: d, renderLink: f, siblingCount: p = 1, boundaryCount: m = 1, className: h, ...g }) {
+	if (u <= 1) return null;
+	let _ = Math.min(Math.max(Math.trunc(s), 1), u), v = c({
+		page: _,
+		totalPages: u,
+		siblingCount: p,
+		boundaryCount: m
+	}), y = t({
+		variant: "ghost",
+		size: "icon"
+	}), b = (t) => {
+		let i = t === "previous" ? _ - 1 : _ + 1, o = a(t === "previous" ? n : r, { "aria-hidden": "true" }), s = `pagination-${t}`;
+		return i < 1 || i > u ? /* @__PURE__ */ a("span", {
+			"data-slot": s,
+			"aria-hidden": "true",
+			className: e(y, "pointer-events-none opacity-50"),
+			children: o
+		}) : f({
+			className: y,
+			children: o,
+			"data-slot": s,
+			"aria-label": t === "previous" ? d.previous : d.next,
+			rel: t === "previous" ? "prev" : "next"
+		}, {
+			page: i,
+			kind: t,
+			current: !1
+		});
+	};
+	return /* @__PURE__ */ a("nav", {
+		"data-slot": "pagination",
+		"aria-label": d.navigation,
+		className: h,
+		...g,
+		children: /* @__PURE__ */ o("ul", {
+			role: "list",
+			"data-slot": "pagination-list",
+			className: "flex list-none flex-wrap items-center gap-1 p-0",
+			children: [
+				/* @__PURE__ */ a("li", { children: b("previous") }),
+				v.map((n, r) => n === "ellipsis" ? /* @__PURE__ */ a("li", { children: /* @__PURE__ */ o("span", {
+					"data-slot": "pagination-ellipsis",
+					className: "flex h-9 min-w-9 items-center justify-center text-muted-foreground",
+					children: [/* @__PURE__ */ a(i, {
+						className: "size-4",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ a("span", {
+						className: "sr-only",
+						children: d.ellipsis
+					})]
+				}) }, `ellipsis-${r}`) : /* @__PURE__ */ a("li", { children: f({
+					className: e(t({
+						variant: n === _ ? "outline" : "ghost",
+						size: "icon"
+					}), l),
+					children: n,
+					"data-slot": "pagination-link",
+					"aria-label": d.page(n),
+					...n === _ ? { "aria-current": "page" } : {}
+				}, {
+					page: n,
+					kind: "page",
+					current: n === _
+				}) }, n)),
+				/* @__PURE__ */ a("li", { children: b("next") })
+			]
+		})
+	});
+}
+//#endregion
+export { u as Pagination, c as paginationRange };
+
+//# sourceMappingURL=pagination.js.map

package/dist/components/chrome/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","names":[],"sources":["../../../src/components/chrome/pagination.tsx"],"mappings":"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"}

package/dist/components/chrome/top-nav.d.ts

@@ -0,0 +1,102 @@
+import * as React from "react";
+export type TopNavProps = React.ComponentProps<"div"> & {
+    /**
+     * Render the caller's own element instead of the default `<div>`. This is
+     * how the bar becomes a landmark when it should be one —
+     * `<TopNav asChild><nav aria-label={t("Main")}>…</nav></TopNav>` — without
+     * adding a wrapper element, and without this package guessing at either the
+     * landmark or its localized name. See DECISION 1 above.
+     */
+    asChild?: boolean;
+};
+declare function TopNav({ className, asChild, children, ref, ...props }: TopNavProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export type TopNavBrandProps = React.ComponentProps<"a"> & {
+    /** Render the caller's own element — a router `Link`, usually. */
+    asChild?: boolean;
+};
+/**
+ * The bar's leading identity: a `FiestaLogo`, a wordmark, an icon plus a
+ * title. It is a link because it goes home; when it should not navigate,
+ * `asChild` a `<span>` and the geometry still applies.
+ *
+ * It is NOT `aria-current`-aware. The brand is the site's mark, not a row of
+ * the nav — painting a current-page pill on it (on the home page, where every
+ * visitor starts) would put two active-looking things in one bar.
+ */
+declare function TopNavBrand({ className, asChild, children, ref, ...props }: TopNavBrandProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/**
+ * The row of destinations. A real `<ul>` of `<li>`s, exactly like `NavList`:
+ * that is what makes a screen reader announce "list, 5 items" and give
+ * per-item position, and it costs nothing visually.
+ *
+ * No landmark of its own — see DECISION 1 on {@link TopNav}.
+ */
+declare function TopNavList({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+/** One destination's list item. */
+declare function TopNavItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+export type TopNavLinkProps = React.ComponentProps<"a"> & {
+    /**
+     * Render the caller's own element instead of an `<a>` — the same
+     * `useRender` mechanics as {@link "./nav-list".NavListLink}. This is how
+     * Docusaurus's `<Link>` (prefetch, base-path handling) or FiestaBoard's
+     * ViewTransitionLink keeps its behaviour while this component keeps owning
+     * the row's look and its ARIA.
+     */
+    asChild?: boolean;
+    /**
+     * Marks this row as the current destination: paints the pill AND sets
+     * `aria-current`. The app derives it from its router — the design system
+     * never guesses at routes.
+     */
+    active?: boolean;
+    /**
+     * Which kind of "current" this row is, when `active`. Defaults to `"page"`;
+     * a docs navbar whose row points at the section you are inside — rather
+     * than at the page you are on — passes `"location"`.
+     * @default "page"
+     */
+    current?: "page" | "step" | "location" | "date" | "time";
+};
+declare function TopNavLink({ className, asChild, active, current, children, ref, ...props }: TopNavLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export type TopNavMenuTriggerProps = React.ComponentProps<"button"> & {
+    /**
+     * Paints the active pill when the current page lives inside this menu.
+     *
+     * It sets `data-active` and the fill, but NOT `aria-current`: the trigger
+     * opens a menu, it is not the current page. The page's `aria-current` goes
+     * on the item inside the menu that points at it.
+     */
+    active?: boolean;
+};
+/**
+ * The bar's dropdown row — a plain `<button>` wearing the link geometry, made
+ * to be handed to `DropdownMenuTrigger asChild`:
+ *
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger asChild>
+ *     <TopNavMenuTrigger>Versions</TopNavMenuTrigger>
+ *   </DropdownMenuTrigger>
+ *   <DropdownMenuContent align="start">
+ *     <DropdownMenuItem render={<a href="/v5" />}>v5</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ *
+ * Everything that makes it a menu button — `aria-haspopup`, `aria-expanded`,
+ * `aria-controls`, ArrowDown-to-open, typeahead, Escape-restores-focus — comes
+ * from Base UI through that trigger. This contributes the look and the caret,
+ * which is why it stays a bare button rather than a second Menu API.
+ */
+declare function TopNavMenuTrigger({ className, active, children, type, ...props }: TopNavMenuTriggerProps): React.JSX.Element;
+/**
+ * The bar's trailing slot: search, `ThemeToggle`, icon links (`Button`
+ * `size="icon"` `asChild` around an `<a>`). `ml-auto` pushes it to the end, so
+ * the caller never has to know that the row is a flex line.
+ *
+ * It is a plain `<div>`, not a list: these are controls of different kinds
+ * that happen to share an edge, and calling them a list would announce a
+ * "list, 3 items" that means nothing.
+ */
+declare function TopNavActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { TopNav, TopNavActions, TopNavBrand, TopNavItem, TopNavLink, TopNavList, TopNavMenuTrigger };

package/dist/components/chrome/top-nav.js

@@ -0,0 +1,91 @@
+import { cn as e } from "../../lib/utils.js";
+import { ChevronDown as t } from "lucide-react";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useRender as a } from "@base-ui/react/use-render";
+//#region src/components/chrome/top-nav.tsx
+var o = [
+	"inline-flex min-h-9 items-center gap-2 rounded-md px-3 py-2 text-sm font-medium whitespace-nowrap",
+	"transition-[color,background-color,border-color,box-shadow] duration-control focus-ring",
+	"[&>svg]:size-4 [&>svg]:shrink-0"
+], s = "nav-active font-semibold", c = "text-muted-foreground nav-active-hover hover:text-foreground";
+function l({ className: t, asChild: r = !1, children: i, ref: o, ...s }) {
+	return a({
+		defaultTagName: "div",
+		ref: o,
+		render: r ? n.Children.only(i) : void 0,
+		props: {
+			"data-slot": "top-nav",
+			className: e("flex min-h-14 w-full flex-wrap items-center gap-x-2 gap-y-1 border-b border-border bg-background px-4 py-2", t),
+			...r ? {} : { children: i },
+			...s
+		}
+	});
+}
+function u({ className: t, asChild: r = !1, children: i, ref: o, ...s }) {
+	return a({
+		defaultTagName: "a",
+		ref: o,
+		render: r ? n.Children.only(i) : void 0,
+		props: {
+			"data-slot": "top-nav-brand",
+			className: e("focus-ring mr-1 flex shrink-0 items-center gap-2 rounded-md px-1 py-1 font-semibold text-foreground", "transition-[color,background-color,border-color,box-shadow] duration-control", t),
+			...r ? {} : { children: i },
+			...s
+		}
+	});
+}
+function d({ className: t, ...n }) {
+	return /* @__PURE__ */ r("ul", {
+		role: "list",
+		"data-slot": "top-nav-list",
+		className: e("flex list-none flex-wrap items-center gap-1 p-0", t),
+		...n
+	});
+}
+function f({ className: t, ...n }) {
+	return /* @__PURE__ */ r("li", {
+		"data-slot": "top-nav-item",
+		className: e("shrink-0", t),
+		...n
+	});
+}
+function p({ className: t, asChild: r = !1, active: i = !1, current: l = "page", children: u, ref: d, ...f }) {
+	return a({
+		defaultTagName: "a",
+		ref: d,
+		render: r ? n.Children.only(u) : void 0,
+		props: {
+			"data-slot": "top-nav-link",
+			"data-active": i ? "" : void 0,
+			"aria-current": i ? l : void 0,
+			className: e(o, i ? s : c, t),
+			...r ? {} : { children: u },
+			...f
+		}
+	});
+}
+function m({ className: n, active: a = !1, children: l, type: u = "button", ...d }) {
+	return /* @__PURE__ */ i("button", {
+		type: u,
+		"data-slot": "top-nav-menu-trigger",
+		"data-active": a ? "" : void 0,
+		className: e(o, a ? s : c, "group/top-nav-menu-trigger", n),
+		...d,
+		children: [l, /* @__PURE__ */ r(t, {
+			"aria-hidden": "true",
+			className: "transition-transform duration-control group-data-[popup-open]/top-nav-menu-trigger:rotate-180"
+		})]
+	});
+}
+function h({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "top-nav-actions",
+		className: e("ml-auto flex shrink-0 items-center gap-1", t),
+		...n
+	});
+}
+//#endregion
+export { l as TopNav, h as TopNavActions, u as TopNavBrand, f as TopNavItem, p as TopNavLink, d as TopNavList, m as TopNavMenuTrigger };
+
+//# sourceMappingURL=top-nav.js.map

package/dist/components/chrome/top-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-nav.js","names":[],"sources":["../../../src/components/chrome/top-nav.tsx"],"mappings":";;;;;;AA6GA,IAAM,IAAc;CAClB;CACA;CACA;AACF,GAIM,IAAqB,4BACrB,IAAsB;AAiB5B,SAAS,EAAO,EAAE,cAAW,aAAU,IAAO,aAAU,QAAK,GAAG,KAAsB;CACpF,OAAO,EAAU;EACf,gBAAgB;EACX;EACL,QAAQ,IAAW,EAAM,SAAS,KAAK,CAAQ,IAA2B,KAAA;EAC1E,OAAO;GACL,aAAa;GACb,WAAW,EAGT,8GACA,CACF;GACA,GAAI,IAAU,CAAC,IAAI,EAAE,YAAS;GAC9B,GAAG;EACL;CACF,CAAC;AACH;AAoBA,SAAS,EAAY,EAAE,cAAW,aAAU,IAAO,aAAU,QAAK,GAAG,KAA2B;CAC9F,OAAO,EAAU;EACf,gBAAgB;EACX;EACL,QAAQ,IAAW,EAAM,SAAS,KAAK,CAAQ,IAA2B,KAAA;EAC1E,OAAO;GACL,aAAa;GACb,WAAW,EACT,uGACA,gFACA,CACF;GACA,GAAI,IAAU,CAAC,IAAI,EAAE,YAAS;GAC9B,GAAG;EACL;CACF,CAAC;AACH;AAaA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAqC;CACvE,OAME,kBAAC,MAAD;EACE,MAAK;EACL,aAAU;EACV,WAAW,EAAG,mDAAmD,CAAS;EAC1E,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAqC;CACvE,OAAO,kBAAC,MAAD;EAAI,aAAU;EAAe,WAAW,EAAG,YAAY,CAAS;EAAG,GAAI;CAAQ,CAAA;AACxF;AA8BA,SAAS,EAAW,EAClB,cACA,aAAU,IACV,YAAS,IACT,aAAU,QACV,aACA,QACA,GAAG,KACe;CAClB,OAAO,EAAU;EACf,gBAAgB;EACX;EACL,QAAQ,IAAW,EAAM,SAAS,KAAK,CAAQ,IAA2B,KAAA;EAC1E,OAAO;GACL,aAAa;GAGb,eAAe,IAAS,KAAK,KAAA;GAC7B,gBAAgB,IAAS,IAAU,KAAA;GACnC,WAAW,EAAG,GAAa,IAAS,IAAqB,GAAqB,CAAS;GACvF,GAAI,IAAU,CAAC,IAAI,EAAE,YAAS;GAC9B,GAAG;EACL;CACF,CAAC;AACH;AAqCA,SAAS,EAAkB,EAAE,cAAW,YAAS,IAAO,aAAU,UAAO,UAAU,GAAG,KAAiC;CACrH,OACE,kBAAC,UAAD;EACQ;EACN,aAAU;EACV,eAAa,IAAS,KAAK,KAAA;EAC3B,WAAW,EACT,GACA,IAAS,IAAqB,GAC9B,8BACA,CACF;EACA,GAAI;EAVN,UAAA,CAYG,GASD,kBAAC,GAAD;GACE,eAAY;GACZ,WAAU;EACX,CAAA,CACK;;AAEZ;AAeA,SAAS,EAAc,EAAE,cAAW,GAAG,KAAsC;CAC3E,OACE,kBAAC,OAAD;EAAK,aAAU;EAAkB,WAAW,EAAG,4CAA4C,CAAS;EAAG,GAAI;CAAQ,CAAA;AAEvH"}

package/dist/components/containment/action-card.d.ts

@@ -0,0 +1,95 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+/**
+ * The medallion tint. Tone is a property of the GLYPH GROUND only — it never
+ * recolours the card's own surface, because an ActionCard is not a status:
+ * a destructive action still sits on the ordinary card ground, the same way
+ * a destructive menu item does.
+ *
+ * `primary` is drawn with `--brand`, not `--primary`, and the mismatch is
+ * deliberate. `--primary` is the literal #f5a623 tile — legal as a field,
+ * illegal as ink (1.83:1 on a light page; see button.tsx and text-link.tsx).
+ * `--brand` is the same hue at the ink plateau, and `bg-brand/10` +
+ * `text-brand` is the round tinted medallion EmptyState already draws. The
+ * PROP is named for the role (the primary action), not for the token.
+ */
+declare const actionCardMedallionVariants: (props?: ({
+    tone?: "muted" | "primary" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ActionCardTone = NonNullable<VariantProps<typeof actionCardMedallionVariants>["tone"]>;
+export type ActionCardProps = Omit<React.ComponentProps<"button">, "title"> & {
+    /**
+     * Glyph for the medallion. DECORATIVE — `title` is the accessible name, and
+     * the medallion is an `aria-hidden` IconTile, so nothing passed here is
+     * announced. An icon carrying meaning the title does not is a different
+     * component (a Badge in `meta`, a StatusDot).
+     */
+    icon?: React.ReactNode;
+    /** Medallion tint. Never recolours the card surface. @default "muted" */
+    tone?: ActionCardTone;
+    /**
+     * The primary line, and the card's accessible name. Wired with
+     * `aria-labelledby` rather than left to the button's text content, so the
+     * description and `meta` do NOT get read as part of the name — a card
+     * named "Turn off schedule Stops the schedule for this board Beta" is the
+     * failure mode every hand-rolled version shipped.
+     */
+    title: React.ReactNode;
+    /** Secondary line under the title. Announced as the description. */
+    description?: React.ReactNode;
+    /**
+     * "Already running", as distinct from `disabled`'s "not available".
+     *
+     * Swaps the glyph for a Spinner and marks the card `aria-busy` +
+     * `aria-disabled` + `data-loading`, and guards activation — but
+     * deliberately NOT the native `disabled` attribute. This is the line
+     * Button draws and the reason it draws it: `disabled` drops the element
+     * out of the tab order and silently moves focus to `<body>` at the exact
+     * moment the user is waiting for feedback on what they just pressed.
+     *
+     * A disabled card is dimmed and inert; a loading card keeps its full ink,
+     * keeps its focus, and spins. They are never the same picture.
+     */
+    loading?: boolean;
+    /** Trailing content on the title row — a chevron, a Badge, a shortcut. */
+    meta?: React.ReactNode;
+    /**
+     * Render the caller's own element instead of a `<button>` — the package's
+     * slot convention (Button, Badge, Chip, NavListLink, BreadcrumbLink), on
+     * Base UI's `useRender`.
+     *
+     * This is what a card that NAVIGATES needs: pass `<a href="…">` (or a
+     * router Link) and the surface becomes a real anchor — right-clickable,
+     * middle-clickable, and announced as a link rather than a button. The
+     * element's own children are replaced by the composed card content, so the
+     * caller supplies the element and its href, nothing more.
+     *
+     * `disabled` cannot apply to an anchor (there is no such attribute), so in
+     * this form both `disabled` and `loading` fall back to `aria-disabled` plus
+     * the activation guard.
+     */
+    asChild?: boolean;
+};
+/**
+ * A card whose whole surface is one action: medallion, title, description.
+ *
+ * ```tsx
+ * <ActionCard
+ *   icon={<CalendarOff />}
+ *   title={t("disableScheduleTitle")}
+ *   description={t("disableScheduleDescription")}
+ *   loading={disableSchedule.isPending}
+ *   onClick={() => disableSchedule.mutate()}
+ * />
+ * ```
+ *
+ * The navigating form is the same card as a real link:
+ *
+ * ```tsx
+ * <ActionCard asChild icon={<Settings2 />} title={t("boardSettings")} meta={<ChevronRight />}>
+ *   <a href="/boards/kitchen/settings" />
+ * </ActionCard>
+ * ```
+ */
+declare function ActionCard({ className, icon, tone, title, description, loading, meta, asChild, disabled, children, onClick, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: ActionCardProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export { ActionCard, actionCardMedallionVariants };

package/dist/components/containment/action-card.js

@@ -0,0 +1,91 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Spinner as t } from "../feedback/spinner.js";
+import { cardSurfaceClassName as n } from "./card.js";
+import { IconTile as r } from "./icon-tile.js";
+import * as i from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useRender as c } from "@base-ui/react/use-render";
+import { cva as l } from "class-variance-authority";
+//#region src/components/containment/action-card.tsx
+var u = l("rounded-full", {
+	variants: { tone: {
+		muted: "",
+		primary: "bg-brand/10 text-brand",
+		destructive: "bg-destructive/10 text-destructive dark:bg-destructive/20"
+	} },
+	defaultVariants: { tone: "muted" }
+});
+function d({ className: l, icon: d, tone: f = "muted", title: p, description: m, loading: h = !1, meta: g, asChild: _ = !1, disabled: v = !1, children: y, onClick: b, ref: x, "aria-label": S, "aria-labelledby": C, "aria-describedby": w, ...T }) {
+	let E = i.useId(), D = `${E}-title`, O = `${E}-description`, k = v || h, A = (e) => {
+		if (k) {
+			e.preventDefault(), e.stopPropagation();
+			return;
+		}
+		b?.(e);
+	}, j = /* @__PURE__ */ s(a, { children: [(d != null || h) && /* @__PURE__ */ o(r, {
+		"data-slot": "action-card-medallion",
+		"data-tone": f,
+		className: u({ tone: f }),
+		children: h ? /* @__PURE__ */ o(t, {
+			size: "lg",
+			label: null
+		}) : d
+	}), /* @__PURE__ */ s("span", {
+		"data-slot": "action-card-body",
+		className: "flex min-w-0 flex-1 flex-col gap-0.5",
+		children: [
+			/* @__PURE__ */ s("span", {
+				"data-slot": "action-card-header",
+				className: "flex min-w-0 items-center gap-2",
+				children: [/* @__PURE__ */ o("span", {
+					id: D,
+					"data-slot": "action-card-title",
+					className: "min-w-0 flex-1 text-sm font-semibold",
+					children: p
+				}), g != null && /* @__PURE__ */ o("span", {
+					"data-slot": "action-card-meta",
+					className: "shrink-0 text-muted-foreground",
+					children: g
+				})]
+			}),
+			m != null && /* @__PURE__ */ o("span", {
+				id: O,
+				"data-slot": "action-card-description",
+				className: "text-xs leading-relaxed font-normal text-muted-foreground",
+				children: m
+			}),
+			!_ && y
+		]
+	})] });
+	return c({
+		defaultTagName: "button",
+		ref: x,
+		render: _ ? i.cloneElement(i.Children.only(y), {}, j) : void 0,
+		props: {
+			"data-slot": "action-card",
+			"data-tone": f,
+			...v ? { "data-disabled": "" } : {},
+			...h ? { "data-loading": "" } : {},
+			className: e("group/action-card relative flex w-full cursor-pointer items-start gap-4 p-4 text-left", n, "transition-[color,background-color,border-color,box-shadow] duration-base", "focus-ring", "not-data-[loading]:hover:border-primary/50 not-data-[loading]:hover:bg-accent/50", "not-data-[loading]:hover:shadow-card-hover", "data-[loading]:cursor-progress", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "[&_svg]:pointer-events-none [&_svg]:shrink-0", l),
+			..._ ? {} : {
+				children: j,
+				disabled: v
+			},
+			...T,
+			"aria-label": S,
+			"aria-labelledby": C ?? (S == null ? D : void 0),
+			"aria-describedby": w ?? (m == null ? void 0 : O),
+			...h ? {
+				"aria-busy": !0,
+				"aria-disabled": !0
+			} : {},
+			...v && _ ? { "aria-disabled": !0 } : {},
+			onClick: A
+		}
+	});
+}
+//#endregion
+export { d as ActionCard, u as actionCardMedallionVariants };
+
+//# sourceMappingURL=action-card.js.map

package/dist/components/containment/action-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-card.js","names":[],"sources":["../../../src/components/containment/action-card.tsx"],"mappings":";;;;;;;;;;AA2EA,IAAM,IAA8B,EAGlC,gBACA;CACE,UAAU,EACR,MAAM;EAEJ,OAAO;EACP,SAAS;EAGT,aAAa;CACf,EACF;CACA,iBAAiB,EACf,MAAM,QACR;AACF,CACF;AA+EA,SAAS,EAAW,EAClB,cACA,SACA,UAAO,SACP,UACA,gBACA,aAAU,IACV,SACA,aAAU,IACV,cAAW,IACX,aACA,YACA,QACA,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,GAAG,KACe;CAClB,IAAM,IAAK,EAAM,MAAM,GACjB,IAAU,GAAG,EAAG,SAChB,IAAgB,GAAG,EAAG,eAGtB,IAAQ,KAAY,GAMpB,KAAe,MAA+C;EAClE,IAAI,GAAO;GAET,AADA,EAAM,eAAe,GACrB,EAAM,gBAAgB;GACtB;EACF;EACA,IAAU,CAAK;CACjB,GAEM,IACJ,kBAAA,GAAA,EAAA,UAAA,EACI,KAAQ,QAAQ,MAChB,kBAAC,GAAD;EAME,aAAU;EACV,aAAW;EACX,WAAW,EAA4B,EAAE,QAAK,CAAC;EAE9C,UAAA,IAKC,kBAAC,GAAD;GAAS,MAAK;GAAK,OAAO;EAAO,CAAA,IAEjC;CAEM,CAAA,GAEZ,kBAAC,QAAD;EAAM,aAAU;EAAmB,WAAU;EAA7C,UAAA;GACE,kBAAC,QAAD;IAAM,aAAU;IAAqB,WAAU;IAA/C,UAAA,CACE,kBAAC,QAAD;KAAM,IAAI;KAAS,aAAU;KAAoB,WAAU;KACxD,UAAA;IACG,CAAA,GACL,KAAQ,QACP,kBAAC,QAAD;KAAM,aAAU;KAAmB,WAAU;KAC1C,UAAA;IACG,CAAA,CAEJ;;GACL,KAAe,QACd,kBAAC,QAAD;IACE,IAAI;IACJ,aAAU;IACV,WAAU;IAET,UAAA;GACG,CAAA;GAEP,CAAC,KAAW;EACT;CACN,CAAA,CAAA,EAAA,CAAA;CAGJ,OAAO,EAAU;EACf,gBAAgB;EACX;EAML,QAAQ,IAAU,EAAM,aAAa,EAAM,SAAS,KAAK,CAAQ,GAAyB,CAAC,GAAG,CAAO,IAAI,KAAA;EACzG,OAAO;GACL,aAAa;GACb,aAAa;GACb,GAAI,IAAW,EAAE,iBAAiB,GAAG,IAAI,CAAC;GAC1C,GAAI,IAAU,EAAE,gBAAgB,GAAG,IAAI,CAAC;GACxC,WAAW,EACT,yFAEA,GAGA,6EAIA,cAKA,oFACA,8CACA,kCAGA,kEACA,gDACA,CACF;GAGA,GAAI,IAAU,CAAC,IAAI;IAAE,UAAU;IAAS;GAAS;GACjD,GAAG;GAIH,cAAc;GAId,mBAAmB,MAAmB,KAAa,OAAO,IAAU,KAAA;GACpE,oBAAoB,MAAoB,KAAe,OAAuB,KAAA,IAAhB;GAC9D,GAAI,IAAU;IAAE,aAAa;IAAM,iBAAiB;GAAK,IAAI,CAAC;GAI9D,GAAI,KAAY,IAAU,EAAE,iBAAiB,GAAK,IAAI,CAAC;GACvD,SAAS;EACX;CACF,CAAC;AACH"}

package/dist/components/containment/card.d.ts

@@ -1,4 +1,27 @@
 import * as React from "react";
+/**
+ * The Card SURFACE, with none of Card's layout: ground, ink, radius,
+ * boundary, elevation. Nothing about how the contents stack.
+ *
+ * It is split out and exported because a card whose whole surface is
+ * pressable is a different ELEMENT (`<button>`, `<a>`) with the same skin,
+ * and the two must be indistinguishable when they sit side by side. Both
+ * FiestaBoard sites that hand-rolled a pressable card copied the radius and
+ * the border and dropped `shadow-card` and the transition, so a pressable
+ * card and a static one in the same dialog did not match. {@link ActionCard}
+ * composes this string instead of restating it, which is what makes that
+ * drift impossible rather than merely discouraged.
+ *
+ * Layout stays out on purpose: `flex flex-col gap-6 py-6` is what a Card's
+ * header/content/footer stack needs and is exactly wrong for a one-row
+ * icon-plus-text button.
+ *
+ * The transition is also NOT here. Card animates `box-shadow,border-color`;
+ * ActionCard additionally moves its background and ink on hover, so the
+ * property lists genuinely differ. What they share is the `duration-base`
+ * token, so a retune of the motion scale still moves both together.
+ */
+declare const cardSurfaceClassName = "bg-card text-card-foreground rounded-xl border shadow-card";
 declare function Card({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 export type CardTitleProps = React.ComponentProps<"h3"> & {
@@ -48,4 +71,4 @@ declare function CardDescription({ className, ...props }: React.ComponentProps<"
 declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, cardSurfaceClassName, CardTitle };