@fiestaboard/ui 5.8.0 → 5.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/README.md +2 -2
  2. package/dist/components/chrome/pagination.d.ts +75 -0
  3. package/dist/components/chrome/pagination.js +93 -0
  4. package/dist/components/chrome/pagination.js.map +1 -0
  5. package/dist/components/chrome/top-nav.d.ts +102 -0
  6. package/dist/components/chrome/top-nav.js +91 -0
  7. package/dist/components/chrome/top-nav.js.map +1 -0
  8. package/dist/components/containment/action-card.d.ts +95 -0
  9. package/dist/components/containment/action-card.js +91 -0
  10. package/dist/components/containment/action-card.js.map +1 -0
  11. package/dist/components/containment/card.d.ts +24 -1
  12. package/dist/components/containment/card.js +11 -10
  13. package/dist/components/containment/card.js.map +1 -1
  14. package/dist/components/containment/icon-tile.d.ts +1 -1
  15. package/dist/components/editor/color-picker-content.js +17 -17
  16. package/dist/components/editor/filter-picker-content.js +20 -20
  17. package/dist/components/editor/formatting-picker-content.js +20 -20
  18. package/dist/components/editor/formula/formula-editor-panel.js +184 -184
  19. package/dist/components/editor/formula/formula-editor-panel.js.map +1 -1
  20. package/dist/components/editor/node-views/color-tile-node-view.js +5 -5
  21. package/dist/components/editor/node-views/formula-node-view.js +9 -9
  22. package/dist/components/editor/template-editor-toolbar.js +44 -44
  23. package/dist/components/editor/template-editor.js +23 -23
  24. package/dist/components/editor/toolbar-dropdown.js +6 -6
  25. package/dist/components/editor/variable-picker-content.js +79 -79
  26. package/dist/components/feedback/alert.d.ts +1 -1
  27. package/dist/components/feedback/badge.d.ts +1 -1
  28. package/dist/components/feedback/badge.js +6 -6
  29. package/dist/components/feedback/chip.js +6 -6
  30. package/dist/components/feedback/spinner.d.ts +1 -1
  31. package/dist/components/feedback/status-dot.d.ts +1 -1
  32. package/dist/components/forms/button.d.ts +2 -2
  33. package/dist/components/forms/button.js +6 -6
  34. package/dist/components/forms/field.d.ts +66 -0
  35. package/dist/components/forms/field.js +64 -0
  36. package/dist/components/forms/field.js.map +1 -0
  37. package/dist/components/forms/swatch.d.ts +4 -4
  38. package/dist/components/forms/time-picker.js +24 -24
  39. package/dist/components/forms/toggle-card.d.ts +2 -2
  40. package/dist/components/forms/toggle.d.ts +1 -1
  41. package/dist/components/plugin/plugin-card.js +5 -5
  42. package/dist/components/typography/heading.d.ts +2 -2
  43. package/dist/components/typography/kbd.d.ts +35 -0
  44. package/dist/components/typography/kbd.js +115 -0
  45. package/dist/components/typography/kbd.js.map +1 -0
  46. package/dist/components/typography/text.d.ts +2 -2
  47. package/dist/index.d.ts +5 -0
  48. package/dist/index.js +113 -108
  49. package/dist/theme.css +54 -9
  50. package/package.json +1 -1
package/README.md CHANGED
@@ -32,10 +32,10 @@ FiestaUI ships **no compiled utility CSS**. The consuming app runs Tailwind v4 a
32
32
  @source "../node_modules/@fiestaboard/ui/dist";
33
33
  ```
34
34
 
35
- - `theme.css` carries the design tokens (`@theme inline`, `:root` / `.dark` custom properties), the base layer, the component animation keyframes, and the `dark` custom variant.
35
+ - `theme.css` carries the design tokens (`@theme inline`, `:root` / `.dark, [data-theme="dark"]` custom properties), the base layer, the component animation keyframes, and the `dark` custom variant.
36
36
  - `fonts.css` is the **opt-in** font registration (`@fontsource-variable/archivo` + `@fontsource-variable/spline-sans-mono` `@font-face` rules, ~70 KB fetched for a Latin-only page). Import it alongside `theme.css` unless your app supplies the faces itself — e.g. via `next/font`, a CDN, or a self-hosted subset. If you self-host, skip `fonts.css` and register faces named `"Archivo Variable"` / `"Spline Sans Mono Variable"` (the names `theme.css`'s `--font-sans-stack` / `--font-mono-stack` tokens reference); without either, the tokens degrade gracefully to the system font stack.
37
37
  - The `@source` line is **mandatory** — Tailwind v4 does not scan `node_modules` by default, and without it component styles silently vanish. Adjust the relative path to wherever your CSS file lives.
38
- - Dark mode is class-based: toggle the `dark` class on `<html>`. FiestaUI only defines the variant; your app owns the toggle.
38
+ - Dark mode responds to **either** signal, and they are equivalent: the `dark` **class** or a `data-theme="dark"` **attribute**. Put whichever your host already toggles on `<html>` — or on any ancestor, to theme just that subtree. FiestaUI only defines the variant; your app owns the toggle. Hosts that stamp the attribute natively (Docusaurus, Astro, Nuxt Color Mode) therefore need no adapter. The pair is left unqualified, at specificity 0-1-0, so a pipeline that appends its own `:root` blocks after `theme.css` (Docusaurus's wide-gamut P3 pass does) still has to raise specificity on its side.
39
39
 
40
40
  ### Typeface
41
41
 
package/dist/components/chrome/pagination.d.ts ADDED
@@ -0,0 +1,75 @@
1
+ import type * as React from "react";
2
+ /** One slot in the rendered strip: a page number, or an elided run. */
3
+ export type PaginationSlot = number | "ellipsis";
4
+ export interface PaginationRangeOptions {
5
+ /** The 1-based current page. Clamped into `[1, totalPages]`. */
6
+ page: number;
7
+ /** How many pages exist. `<= 0` yields an empty range. */
8
+ totalPages: number;
9
+ /** Pages shown either side of the current one. @default 1 */
10
+ siblingCount?: number;
11
+ /** Pages pinned to each end of the strip. @default 1 */
12
+ boundaryCount?: number;
13
+ }
14
+ /**
15
+ * The slots to render for one page of a list: boundary pages, the current
16
+ * page and its siblings, and `"ellipsis"` wherever a run of two or more pages
17
+ * is elided.
18
+ *
19
+ * The returned length is stable for a given `totalPages`/`siblingCount`/
20
+ * `boundaryCount` (until the range is short enough to fit whole), which is
21
+ * what keeps the pager from resizing under the reader's cursor.
22
+ */
23
+ export declare function paginationRange({ page, totalPages, siblingCount, boundaryCount, }: PaginationRangeOptions): PaginationSlot[];
24
+ /** Localized copy. Required in full — the package ships no English defaults. */
25
+ export interface PaginationLabels {
26
+ /** Accessible name for the `<nav>` landmark, e.g. "Blog pages". */
27
+ navigation: string;
28
+ /** Accessible name for the previous-page chevron, e.g. "Previous page". */
29
+ previous: string;
30
+ /** Accessible name for the next-page chevron, e.g. "Next page". */
31
+ next: string;
32
+ /** Accessible name for a numbered link, e.g. `(n) => \`Page ${n}\``. */
33
+ page: (page: number) => string;
34
+ /** Screen-reader-only announcement for an elided run, e.g. "More pages". */
35
+ ellipsis: string;
36
+ }
37
+ /** Which control `renderLink` is being asked for, and where it goes. */
38
+ export interface PaginationLinkItem {
39
+ /** The 1-based page this control navigates to. */
40
+ page: number;
41
+ kind: "page" | "previous" | "next";
42
+ /** True only for the numbered link the reader is currently on. */
43
+ current: boolean;
44
+ }
45
+ /** Spread these onto your router's Link. `className` MUST land on it. */
46
+ export interface PaginationLinkProps {
47
+ className: string;
48
+ children: React.ReactNode;
49
+ "data-slot": string;
50
+ "aria-label": string;
51
+ "aria-current"?: "page";
52
+ rel?: "prev" | "next";
53
+ }
54
+ export interface PaginationProps extends Omit<React.ComponentProps<"nav">, "aria-label" | "children"> {
55
+ /** The 1-based current page. Clamped into `[1, totalPages]`. */
56
+ page: number;
57
+ /** How many pages exist. `<= 1` renders nothing at all. */
58
+ totalPages: number;
59
+ labels: PaginationLabels;
60
+ /**
61
+ * Renders one navigating control — inject your router's Link here. Receives
62
+ * spreadable DOM props first and the semantic item second, the same
63
+ * signature as {@link "./sidebar".Sidebar}'s `renderLink`. There is
64
+ * deliberately no `href` shortcut: a bare string href renders a plain `<a>`
65
+ * that full-page-reloads inside an SPA, which is exactly the trap this prop
66
+ * exists to avoid.
67
+ */
68
+ renderLink: (props: PaginationLinkProps, item: PaginationLinkItem) => React.ReactNode;
69
+ /** Pages shown either side of the current one. @default 1 */
70
+ siblingCount?: number;
71
+ /** Pages pinned to each end of the strip. @default 1 */
72
+ boundaryCount?: number;
73
+ }
74
+ declare function Pagination({ page, totalPages, labels, renderLink, siblingCount, boundaryCount, className, ...props }: PaginationProps): React.JSX.Element | null;
75
+ export { Pagination };
package/dist/components/chrome/pagination.js ADDED
@@ -0,0 +1,93 @@
1
+ import { cn as e } from "../../lib/utils.js";
2
+ import { buttonVariants as t } from "../forms/button.js";
3
+ import { ChevronLeft as n, ChevronRight as r, MoreHorizontal as i } from "lucide-react";
4
+ import { jsx as a, jsxs as o } from "react/jsx-runtime";
5
+ //#region src/components/chrome/pagination.tsx
6
+ function s(e, t) {
7
+ return Array.from({ length: Math.max(0, t - e + 1) }, (t, n) => e + n);
8
+ }
9
+ function c({ page: e, totalPages: t, siblingCount: n = 1, boundaryCount: r = 1 }) {
10
+ if (t <= 0) return [];
11
+ 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);
12
+ return [
13
+ ...a,
14
+ ...c > r + 2 ? ["ellipsis"] : r + 1 < t - r ? [r + 1] : [],
15
+ ...s(c, l),
16
+ ...l < t - r - 1 ? ["ellipsis"] : t - r > r ? [t - r] : [],
17
+ ...o
18
+ ];
19
+ }
20
+ var l = "h-9 w-auto min-w-9 px-2 tabular-nums";
21
+ function u({ page: s, totalPages: u, labels: d, renderLink: f, siblingCount: p = 1, boundaryCount: m = 1, className: h, ...g }) {
22
+ if (u <= 1) return null;
23
+ let _ = Math.min(Math.max(Math.trunc(s), 1), u), v = c({
24
+ page: _,
25
+ totalPages: u,
26
+ siblingCount: p,
27
+ boundaryCount: m
28
+ }), y = t({
29
+ variant: "ghost",
30
+ size: "icon"
31
+ }), b = (t) => {
32
+ let i = t === "previous" ? _ - 1 : _ + 1, o = a(t === "previous" ? n : r, { "aria-hidden": "true" }), s = `pagination-${t}`;
33
+ return i < 1 || i > u ? /* @__PURE__ */ a("span", {
34
+ "data-slot": s,
35
+ "aria-hidden": "true",
36
+ className: e(y, "pointer-events-none opacity-50"),
37
+ children: o
38
+ }) : f({
39
+ className: y,
40
+ children: o,
41
+ "data-slot": s,
42
+ "aria-label": t === "previous" ? d.previous : d.next,
43
+ rel: t === "previous" ? "prev" : "next"
44
+ }, {
45
+ page: i,
46
+ kind: t,
47
+ current: !1
48
+ });
49
+ };
50
+ return /* @__PURE__ */ a("nav", {
51
+ "data-slot": "pagination",
52
+ "aria-label": d.navigation,
53
+ className: h,
54
+ ...g,
55
+ children: /* @__PURE__ */ o("ul", {
56
+ role: "list",
57
+ "data-slot": "pagination-list",
58
+ className: "flex list-none flex-wrap items-center gap-1 p-0",
59
+ children: [
60
+ /* @__PURE__ */ a("li", { children: b("previous") }),
61
+ v.map((n, r) => n === "ellipsis" ? /* @__PURE__ */ a("li", { children: /* @__PURE__ */ o("span", {
62
+ "data-slot": "pagination-ellipsis",
63
+ className: "flex h-9 min-w-9 items-center justify-center text-muted-foreground",
64
+ children: [/* @__PURE__ */ a(i, {
65
+ className: "size-4",
66
+ "aria-hidden": "true"
67
+ }), /* @__PURE__ */ a("span", {
68
+ className: "sr-only",
69
+ children: d.ellipsis
70
+ })]
71
+ }) }, `ellipsis-${r}`) : /* @__PURE__ */ a("li", { children: f({
72
+ className: e(t({
73
+ variant: n === _ ? "outline" : "ghost",
74
+ size: "icon"
75
+ }), l),
76
+ children: n,
77
+ "data-slot": "pagination-link",
78
+ "aria-label": d.page(n),
79
+ ...n === _ ? { "aria-current": "page" } : {}
80
+ }, {
81
+ page: n,
82
+ kind: "page",
83
+ current: n === _
84
+ }) }, n)),
85
+ /* @__PURE__ */ a("li", { children: b("next") })
86
+ ]
87
+ })
88
+ });
89
+ }
90
+ //#endregion
91
+ export { u as Pagination, c as paginationRange };
92
+
93
+ //# sourceMappingURL=pagination.js.map
package/dist/components/chrome/pagination.js.map ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1,102 @@
1
+ import * as React from "react";
2
+ export type TopNavProps = React.ComponentProps<"div"> & {
3
+ /**
4
+ * Render the caller's own element instead of the default `<div>`. This is
5
+ * how the bar becomes a landmark when it should be one —
6
+ * `<TopNav asChild><nav aria-label={t("Main")}>…</nav></TopNav>` — without
7
+ * adding a wrapper element, and without this package guessing at either the
8
+ * landmark or its localized name. See DECISION 1 above.
9
+ */
10
+ asChild?: boolean;
11
+ };
12
+ declare function TopNav({ className, asChild, children, ref, ...props }: TopNavProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
13
+ export type TopNavBrandProps = React.ComponentProps<"a"> & {
14
+ /** Render the caller's own element — a router `Link`, usually. */
15
+ asChild?: boolean;
16
+ };
17
+ /**
18
+ * The bar's leading identity: a `FiestaLogo`, a wordmark, an icon plus a
19
+ * title. It is a link because it goes home; when it should not navigate,
20
+ * `asChild` a `<span>` and the geometry still applies.
21
+ *
22
+ * It is NOT `aria-current`-aware. The brand is the site's mark, not a row of
23
+ * the nav — painting a current-page pill on it (on the home page, where every
24
+ * visitor starts) would put two active-looking things in one bar.
25
+ */
26
+ declare function TopNavBrand({ className, asChild, children, ref, ...props }: TopNavBrandProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
27
+ /**
28
+ * The row of destinations. A real `<ul>` of `<li>`s, exactly like `NavList`:
29
+ * that is what makes a screen reader announce "list, 5 items" and give
30
+ * per-item position, and it costs nothing visually.
31
+ *
32
+ * No landmark of its own — see DECISION 1 on {@link TopNav}.
33
+ */
34
+ declare function TopNavList({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
35
+ /** One destination's list item. */
36
+ declare function TopNavItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
37
+ export type TopNavLinkProps = React.ComponentProps<"a"> & {
38
+ /**
39
+ * Render the caller's own element instead of an `<a>` — the same
40
+ * `useRender` mechanics as {@link "./nav-list".NavListLink}. This is how
41
+ * Docusaurus's `<Link>` (prefetch, base-path handling) or FiestaBoard's
42
+ * ViewTransitionLink keeps its behaviour while this component keeps owning
43
+ * the row's look and its ARIA.
44
+ */
45
+ asChild?: boolean;
46
+ /**
47
+ * Marks this row as the current destination: paints the pill AND sets
48
+ * `aria-current`. The app derives it from its router — the design system
49
+ * never guesses at routes.
50
+ */
51
+ active?: boolean;
52
+ /**
53
+ * Which kind of "current" this row is, when `active`. Defaults to `"page"`;
54
+ * a docs navbar whose row points at the section you are inside — rather
55
+ * than at the page you are on — passes `"location"`.
56
+ * @default "page"
57
+ */
58
+ current?: "page" | "step" | "location" | "date" | "time";
59
+ };
60
+ declare function TopNavLink({ className, asChild, active, current, children, ref, ...props }: TopNavLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
61
+ export type TopNavMenuTriggerProps = React.ComponentProps<"button"> & {
62
+ /**
63
+ * Paints the active pill when the current page lives inside this menu.
64
+ *
65
+ * It sets `data-active` and the fill, but NOT `aria-current`: the trigger
66
+ * opens a menu, it is not the current page. The page's `aria-current` goes
67
+ * on the item inside the menu that points at it.
68
+ */
69
+ active?: boolean;
70
+ };
71
+ /**
72
+ * The bar's dropdown row — a plain `<button>` wearing the link geometry, made
73
+ * to be handed to `DropdownMenuTrigger asChild`:
74
+ *
75
+ * ```tsx
76
+ * <DropdownMenu>
77
+ * <DropdownMenuTrigger asChild>
78
+ * <TopNavMenuTrigger>Versions</TopNavMenuTrigger>
79
+ * </DropdownMenuTrigger>
80
+ * <DropdownMenuContent align="start">
81
+ * <DropdownMenuItem render={<a href="/v5" />}>v5</DropdownMenuItem>
82
+ * </DropdownMenuContent>
83
+ * </DropdownMenu>
84
+ * ```
85
+ *
86
+ * Everything that makes it a menu button — `aria-haspopup`, `aria-expanded`,
87
+ * `aria-controls`, ArrowDown-to-open, typeahead, Escape-restores-focus — comes
88
+ * from Base UI through that trigger. This contributes the look and the caret,
89
+ * which is why it stays a bare button rather than a second Menu API.
90
+ */
91
+ declare function TopNavMenuTrigger({ className, active, children, type, ...props }: TopNavMenuTriggerProps): React.JSX.Element;
92
+ /**
93
+ * The bar's trailing slot: search, `ThemeToggle`, icon links (`Button`
94
+ * `size="icon"` `asChild` around an `<a>`). `ml-auto` pushes it to the end, so
95
+ * the caller never has to know that the row is a flex line.
96
+ *
97
+ * It is a plain `<div>`, not a list: these are controls of different kinds
98
+ * that happen to share an edge, and calling them a list would announce a
99
+ * "list, 3 items" that means nothing.
100
+ */
101
+ declare function TopNavActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
102
+ export { TopNav, TopNavActions, TopNavBrand, TopNavItem, TopNavLink, TopNavList, TopNavMenuTrigger };
package/dist/components/chrome/top-nav.js ADDED
@@ -0,0 +1,91 @@
1
+ import { cn as e } from "../../lib/utils.js";
2
+ import { ChevronDown as t } from "lucide-react";
3
+ import * as n from "react";
4
+ import { jsx as r, jsxs as i } from "react/jsx-runtime";
5
+ import { useRender as a } from "@base-ui/react/use-render";
6
+ //#region src/components/chrome/top-nav.tsx
7
+ var o = [
8
+ "inline-flex min-h-9 items-center gap-2 rounded-md px-3 py-2 text-sm font-medium whitespace-nowrap",
9
+ "transition-[color,background-color,border-color,box-shadow] duration-control focus-ring",
10
+ "[&>svg]:size-4 [&>svg]:shrink-0"
11
+ ], s = "nav-active font-semibold", c = "text-muted-foreground nav-active-hover hover:text-foreground";
12
+ function l({ className: t, asChild: r = !1, children: i, ref: o, ...s }) {
13
+ return a({
14
+ defaultTagName: "div",
15
+ ref: o,
16
+ render: r ? n.Children.only(i) : void 0,
17
+ props: {
18
+ "data-slot": "top-nav",
19
+ 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),
20
+ ...r ? {} : { children: i },
21
+ ...s
22
+ }
23
+ });
24
+ }
25
+ function u({ className: t, asChild: r = !1, children: i, ref: o, ...s }) {
26
+ return a({
27
+ defaultTagName: "a",
28
+ ref: o,
29
+ render: r ? n.Children.only(i) : void 0,
30
+ props: {
31
+ "data-slot": "top-nav-brand",
32
+ 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),
33
+ ...r ? {} : { children: i },
34
+ ...s
35
+ }
36
+ });
37
+ }
38
+ function d({ className: t, ...n }) {
39
+ return /* @__PURE__ */ r("ul", {
40
+ role: "list",
41
+ "data-slot": "top-nav-list",
42
+ className: e("flex list-none flex-wrap items-center gap-1 p-0", t),
43
+ ...n
44
+ });
45
+ }
46
+ function f({ className: t, ...n }) {
47
+ return /* @__PURE__ */ r("li", {
48
+ "data-slot": "top-nav-item",
49
+ className: e("shrink-0", t),
50
+ ...n
51
+ });
52
+ }
53
+ function p({ className: t, asChild: r = !1, active: i = !1, current: l = "page", children: u, ref: d, ...f }) {
54
+ return a({
55
+ defaultTagName: "a",
56
+ ref: d,
57
+ render: r ? n.Children.only(u) : void 0,
58
+ props: {
59
+ "data-slot": "top-nav-link",
60
+ "data-active": i ? "" : void 0,
61
+ "aria-current": i ? l : void 0,
62
+ className: e(o, i ? s : c, t),
63
+ ...r ? {} : { children: u },
64
+ ...f
65
+ }
66
+ });
67
+ }
68
+ function m({ className: n, active: a = !1, children: l, type: u = "button", ...d }) {
69
+ return /* @__PURE__ */ i("button", {
70
+ type: u,
71
+ "data-slot": "top-nav-menu-trigger",
72
+ "data-active": a ? "" : void 0,
73
+ className: e(o, a ? s : c, "group/top-nav-menu-trigger", n),
74
+ ...d,
75
+ children: [l, /* @__PURE__ */ r(t, {
76
+ "aria-hidden": "true",
77
+ className: "transition-transform duration-control group-data-[popup-open]/top-nav-menu-trigger:rotate-180"
78
+ })]
79
+ });
80
+ }
81
+ function h({ className: t, ...n }) {
82
+ return /* @__PURE__ */ r("div", {
83
+ "data-slot": "top-nav-actions",
84
+ className: e("ml-auto flex shrink-0 items-center gap-1", t),
85
+ ...n
86
+ });
87
+ }
88
+ //#endregion
89
+ export { l as TopNav, h as TopNavActions, u as TopNavBrand, f as TopNavItem, p as TopNavLink, d as TopNavList, m as TopNavMenuTrigger };
90
+
91
+ //# sourceMappingURL=top-nav.js.map
package/dist/components/chrome/top-nav.js.map ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1,95 @@
1
+ import { type VariantProps } from "class-variance-authority";
2
+ import * as React from "react";
3
+ /**
4
+ * The medallion tint. Tone is a property of the GLYPH GROUND only — it never
5
+ * recolours the card's own surface, because an ActionCard is not a status:
6
+ * a destructive action still sits on the ordinary card ground, the same way
7
+ * a destructive menu item does.
8
+ *
9
+ * `primary` is drawn with `--brand`, not `--primary`, and the mismatch is
10
+ * deliberate. `--primary` is the literal #f5a623 tile — legal as a field,
11
+ * illegal as ink (1.83:1 on a light page; see button.tsx and text-link.tsx).
12
+ * `--brand` is the same hue at the ink plateau, and `bg-brand/10` +
13
+ * `text-brand` is the round tinted medallion EmptyState already draws. The
14
+ * PROP is named for the role (the primary action), not for the token.
15
+ */
16
+ declare const actionCardMedallionVariants: (props?: ({
17
+ tone?: "muted" | "primary" | "destructive" | null | undefined;
18
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
19
+ export type ActionCardTone = NonNullable<VariantProps<typeof actionCardMedallionVariants>["tone"]>;
20
+ export type ActionCardProps = Omit<React.ComponentProps<"button">, "title"> & {
21
+ /**
22
+ * Glyph for the medallion. DECORATIVE — `title` is the accessible name, and
23
+ * the medallion is an `aria-hidden` IconTile, so nothing passed here is
24
+ * announced. An icon carrying meaning the title does not is a different
25
+ * component (a Badge in `meta`, a StatusDot).
26
+ */
27
+ icon?: React.ReactNode;
28
+ /** Medallion tint. Never recolours the card surface. @default "muted" */
29
+ tone?: ActionCardTone;
30
+ /**
31
+ * The primary line, and the card's accessible name. Wired with
32
+ * `aria-labelledby` rather than left to the button's text content, so the
33
+ * description and `meta` do NOT get read as part of the name — a card
34
+ * named "Turn off schedule Stops the schedule for this board Beta" is the
35
+ * failure mode every hand-rolled version shipped.
36
+ */
37
+ title: React.ReactNode;
38
+ /** Secondary line under the title. Announced as the description. */
39
+ description?: React.ReactNode;
40
+ /**
41
+ * "Already running", as distinct from `disabled`'s "not available".
42
+ *
43
+ * Swaps the glyph for a Spinner and marks the card `aria-busy` +
44
+ * `aria-disabled` + `data-loading`, and guards activation — but
45
+ * deliberately NOT the native `disabled` attribute. This is the line
46
+ * Button draws and the reason it draws it: `disabled` drops the element
47
+ * out of the tab order and silently moves focus to `<body>` at the exact
48
+ * moment the user is waiting for feedback on what they just pressed.
49
+ *
50
+ * A disabled card is dimmed and inert; a loading card keeps its full ink,
51
+ * keeps its focus, and spins. They are never the same picture.
52
+ */
53
+ loading?: boolean;
54
+ /** Trailing content on the title row — a chevron, a Badge, a shortcut. */
55
+ meta?: React.ReactNode;
56
+ /**
57
+ * Render the caller's own element instead of a `<button>` — the package's
58
+ * slot convention (Button, Badge, Chip, NavListLink, BreadcrumbLink), on
59
+ * Base UI's `useRender`.
60
+ *
61
+ * This is what a card that NAVIGATES needs: pass `<a href="…">` (or a
62
+ * router Link) and the surface becomes a real anchor — right-clickable,
63
+ * middle-clickable, and announced as a link rather than a button. The
64
+ * element's own children are replaced by the composed card content, so the
65
+ * caller supplies the element and its href, nothing more.
66
+ *
67
+ * `disabled` cannot apply to an anchor (there is no such attribute), so in
68
+ * this form both `disabled` and `loading` fall back to `aria-disabled` plus
69
+ * the activation guard.
70
+ */
71
+ asChild?: boolean;
72
+ };
73
+ /**
74
+ * A card whose whole surface is one action: medallion, title, description.
75
+ *
76
+ * ```tsx
77
+ * <ActionCard
78
+ * icon={<CalendarOff />}
79
+ * title={t("disableScheduleTitle")}
80
+ * description={t("disableScheduleDescription")}
81
+ * loading={disableSchedule.isPending}
82
+ * onClick={() => disableSchedule.mutate()}
83
+ * />
84
+ * ```
85
+ *
86
+ * The navigating form is the same card as a real link:
87
+ *
88
+ * ```tsx
89
+ * <ActionCard asChild icon={<Settings2 />} title={t("boardSettings")} meta={<ChevronRight />}>
90
+ * <a href="/boards/kitchen/settings" />
91
+ * </ActionCard>
92
+ * ```
93
+ */
94
+ 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>>;
95
+ export { ActionCard, actionCardMedallionVariants };
package/dist/components/containment/action-card.js ADDED
@@ -0,0 +1,91 @@
1
+ "use client";
2
+ import { cn as e } from "../../lib/utils.js";
3
+ import { Spinner as t } from "../feedback/spinner.js";
4
+ import { cardSurfaceClassName as n } from "./card.js";
5
+ import { IconTile as r } from "./icon-tile.js";
6
+ import * as i from "react";
7
+ import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
8
+ import { useRender as c } from "@base-ui/react/use-render";
9
+ import { cva as l } from "class-variance-authority";
10
+ //#region src/components/containment/action-card.tsx
11
+ var u = l("rounded-full", {
12
+ variants: { tone: {
13
+ muted: "",
14
+ primary: "bg-brand/10 text-brand",
15
+ destructive: "bg-destructive/10 text-destructive dark:bg-destructive/20"
16
+ } },
17
+ defaultVariants: { tone: "muted" }
18
+ });
19
+ 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 }) {
20
+ let E = i.useId(), D = `${E}-title`, O = `${E}-description`, k = v || h, A = (e) => {
21
+ if (k) {
22
+ e.preventDefault(), e.stopPropagation();
23
+ return;
24
+ }
25
+ b?.(e);
26
+ }, j = /* @__PURE__ */ s(a, { children: [(d != null || h) && /* @__PURE__ */ o(r, {
27
+ "data-slot": "action-card-medallion",
28
+ "data-tone": f,
29
+ className: u({ tone: f }),
30
+ children: h ? /* @__PURE__ */ o(t, {
31
+ size: "lg",
32
+ label: null
33
+ }) : d
34
+ }), /* @__PURE__ */ s("span", {
35
+ "data-slot": "action-card-body",
36
+ className: "flex min-w-0 flex-1 flex-col gap-0.5",
37
+ children: [
38
+ /* @__PURE__ */ s("span", {
39
+ "data-slot": "action-card-header",
40
+ className: "flex min-w-0 items-center gap-2",
41
+ children: [/* @__PURE__ */ o("span", {
42
+ id: D,
43
+ "data-slot": "action-card-title",
44
+ className: "min-w-0 flex-1 text-sm font-semibold",
45
+ children: p
46
+ }), g != null && /* @__PURE__ */ o("span", {
47
+ "data-slot": "action-card-meta",
48
+ className: "shrink-0 text-muted-foreground",
49
+ children: g
50
+ })]
51
+ }),
52
+ m != null && /* @__PURE__ */ o("span", {
53
+ id: O,
54
+ "data-slot": "action-card-description",
55
+ className: "text-xs leading-relaxed font-normal text-muted-foreground",
56
+ children: m
57
+ }),
58
+ !_ && y
59
+ ]
60
+ })] });
61
+ return c({
62
+ defaultTagName: "button",
63
+ ref: x,
64
+ render: _ ? i.cloneElement(i.Children.only(y), {}, j) : void 0,
65
+ props: {
66
+ "data-slot": "action-card",
67
+ "data-tone": f,
68
+ ...v ? { "data-disabled": "" } : {},
69
+ ...h ? { "data-loading": "" } : {},
70
+ 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),
71
+ ..._ ? {} : {
72
+ children: j,
73
+ disabled: v
74
+ },
75
+ ...T,
76
+ "aria-label": S,
77
+ "aria-labelledby": C ?? (S == null ? D : void 0),
78
+ "aria-describedby": w ?? (m == null ? void 0 : O),
79
+ ...h ? {
80
+ "aria-busy": !0,
81
+ "aria-disabled": !0
82
+ } : {},
83
+ ...v && _ ? { "aria-disabled": !0 } : {},
84
+ onClick: A
85
+ }
86
+ });
87
+ }
88
+ //#endregion
89
+ export { d as ActionCard, u as actionCardMedallionVariants };
90
+
91
+ //# sourceMappingURL=action-card.js.map
package/dist/components/containment/action-card.js.map ADDED
@@ -0,0 +1 @@
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 CHANGED
@@ -1,4 +1,27 @@
1
1
  import * as React from "react";
2
+ /**
3
+ * The Card SURFACE, with none of Card's layout: ground, ink, radius,
4
+ * boundary, elevation. Nothing about how the contents stack.
5
+ *
6
+ * It is split out and exported because a card whose whole surface is
7
+ * pressable is a different ELEMENT (`<button>`, `<a>`) with the same skin,
8
+ * and the two must be indistinguishable when they sit side by side. Both
9
+ * FiestaBoard sites that hand-rolled a pressable card copied the radius and
10
+ * the border and dropped `shadow-card` and the transition, so a pressable
11
+ * card and a static one in the same dialog did not match. {@link ActionCard}
12
+ * composes this string instead of restating it, which is what makes that
13
+ * drift impossible rather than merely discouraged.
14
+ *
15
+ * Layout stays out on purpose: `flex flex-col gap-6 py-6` is what a Card's
16
+ * header/content/footer stack needs and is exactly wrong for a one-row
17
+ * icon-plus-text button.
18
+ *
19
+ * The transition is also NOT here. Card animates `box-shadow,border-color`;
20
+ * ActionCard additionally moves its background and ink on hover, so the
21
+ * property lists genuinely differ. What they share is the `duration-base`
22
+ * token, so a retune of the motion scale still moves both together.
23
+ */
24
+ declare const cardSurfaceClassName = "bg-card text-card-foreground rounded-xl border shadow-card";
2
25
  declare function Card({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
3
26
  declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
4
27
  export type CardTitleProps = React.ComponentProps<"h3"> & {
@@ -48,4 +71,4 @@ declare function CardDescription({ className, ...props }: React.ComponentProps<"
48
71
  declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
49
72
  declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
50
73
  declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
51
- export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
74
+ export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, cardSurfaceClassName, CardTitle };