@fiestaboard/ui 5.9.0 → 5.11.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 (57) hide show
  1. package/dist/components/chrome/page-card.d.ts +122 -0
  2. package/dist/components/chrome/page-card.js +46 -0
  3. package/dist/components/chrome/page-card.js.map +1 -0
  4. package/dist/components/chrome/page-header.js +1 -0
  5. package/dist/components/chrome/page-header.js.map +1 -1
  6. package/dist/components/chrome/page-inset.d.ts +6 -0
  7. package/dist/components/chrome/page-inset.js.map +1 -1
  8. package/dist/components/chrome/page-toolbar.js +1 -0
  9. package/dist/components/chrome/page-toolbar.js.map +1 -1
  10. package/dist/components/chrome/pagination.d.ts +75 -0
  11. package/dist/components/chrome/pagination.js +93 -0
  12. package/dist/components/chrome/pagination.js.map +1 -0
  13. package/dist/components/chrome/top-nav.d.ts +102 -0
  14. package/dist/components/chrome/top-nav.js +91 -0
  15. package/dist/components/chrome/top-nav.js.map +1 -0
  16. package/dist/components/containment/action-card.d.ts +95 -0
  17. package/dist/components/containment/action-card.js +91 -0
  18. package/dist/components/containment/action-card.js.map +1 -0
  19. package/dist/components/containment/card.d.ts +24 -1
  20. package/dist/components/containment/card.js +11 -10
  21. package/dist/components/containment/card.js.map +1 -1
  22. package/dist/components/containment/icon-tile.d.ts +1 -1
  23. package/dist/components/editor/color-picker-content.js +17 -17
  24. package/dist/components/editor/filter-picker-content.js +20 -20
  25. package/dist/components/editor/formatting-picker-content.js +20 -20
  26. package/dist/components/editor/formula/formula-editor-panel.js +184 -184
  27. package/dist/components/editor/formula/formula-editor-panel.js.map +1 -1
  28. package/dist/components/editor/node-views/color-tile-node-view.js +5 -5
  29. package/dist/components/editor/node-views/formula-node-view.js +9 -9
  30. package/dist/components/editor/template-editor-toolbar.js +44 -44
  31. package/dist/components/editor/template-editor.js +23 -23
  32. package/dist/components/editor/toolbar-dropdown.js +6 -6
  33. package/dist/components/editor/variable-picker-content.js +79 -79
  34. package/dist/components/feedback/alert.d.ts +1 -1
  35. package/dist/components/feedback/badge.d.ts +1 -1
  36. package/dist/components/feedback/badge.js +6 -6
  37. package/dist/components/feedback/chip.js +6 -6
  38. package/dist/components/feedback/spinner.d.ts +1 -1
  39. package/dist/components/feedback/status-dot.d.ts +1 -1
  40. package/dist/components/forms/button.d.ts +2 -2
  41. package/dist/components/forms/button.js +6 -6
  42. package/dist/components/forms/field.d.ts +66 -0
  43. package/dist/components/forms/field.js +64 -0
  44. package/dist/components/forms/field.js.map +1 -0
  45. package/dist/components/forms/swatch.d.ts +4 -4
  46. package/dist/components/forms/time-picker.js +24 -24
  47. package/dist/components/forms/toggle-card.d.ts +2 -2
  48. package/dist/components/forms/toggle.d.ts +1 -1
  49. package/dist/components/plugin/plugin-card.js +5 -5
  50. package/dist/components/typography/heading.d.ts +2 -2
  51. package/dist/components/typography/kbd.d.ts +35 -0
  52. package/dist/components/typography/kbd.js +115 -0
  53. package/dist/components/typography/kbd.js.map +1 -0
  54. package/dist/components/typography/text.d.ts +2 -2
  55. package/dist/index.d.ts +6 -0
  56. package/dist/index.js +114 -108
  57. package/package.json +1 -1
@@ -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 };
@@ -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
@@ -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"}
@@ -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 };
@@ -2,21 +2,22 @@ import { cn as e } from "../../lib/utils.js";
2
2
  import "react";
3
3
  import { jsx as t, jsxs as n } from "react/jsx-runtime";
4
4
  //#region src/components/containment/card.tsx
5
- function r({ className: n, ...r }) {
5
+ var r = "bg-card text-card-foreground rounded-xl border shadow-card";
6
+ function i({ className: n, ...i }) {
6
7
  return /* @__PURE__ */ t("div", {
7
8
  "data-slot": "card",
8
- className: e("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-card transition-[box-shadow,border-color] duration-base", n),
9
- ...r
9
+ className: e(r, "flex flex-col gap-6 py-6 transition-[box-shadow,border-color] duration-base", n),
10
+ ...i
10
11
  });
11
12
  }
12
- function i({ className: n, ...r }) {
13
+ function a({ className: n, ...r }) {
13
14
  return /* @__PURE__ */ t("div", {
14
15
  "data-slot": "card-header",
15
16
  className: e("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", n),
16
17
  ...r
17
18
  });
18
19
  }
19
- function a({ className: r, as: i = "h3", icon: a, size: o = "lg", ...s }) {
20
+ function o({ className: r, as: i = "h3", icon: a, size: o = "lg", ...s }) {
20
21
  let { children: c, ...l } = s;
21
22
  return /* @__PURE__ */ n(i, {
22
23
  "data-slot": "card-title",
@@ -31,28 +32,28 @@ function a({ className: r, as: i = "h3", icon: a, size: o = "lg", ...s }) {
31
32
  }) : null, c]
32
33
  });
33
34
  }
34
- function o({ className: n, ...r }) {
35
+ function s({ className: n, ...r }) {
35
36
  return /* @__PURE__ */ t("div", {
36
37
  "data-slot": "card-description",
37
38
  className: e("text-muted-foreground text-sm", n),
38
39
  ...r
39
40
  });
40
41
  }
41
- function s({ className: n, ...r }) {
42
+ function c({ className: n, ...r }) {
42
43
  return /* @__PURE__ */ t("div", {
43
44
  "data-slot": "card-action",
44
45
  className: e("col-start-2 row-span-2 row-start-1 self-start justify-self-end", n),
45
46
  ...r
46
47
  });
47
48
  }
48
- function c({ className: n, ...r }) {
49
+ function l({ className: n, ...r }) {
49
50
  return /* @__PURE__ */ t("div", {
50
51
  "data-slot": "card-content",
51
52
  className: e("px-6", n),
52
53
  ...r
53
54
  });
54
55
  }
55
- function l({ className: n, ...r }) {
56
+ function u({ className: n, ...r }) {
56
57
  return /* @__PURE__ */ t("div", {
57
58
  "data-slot": "card-footer",
58
59
  className: e("flex items-center px-6 [.border-t]:pt-6", n),
@@ -60,6 +61,6 @@ function l({ className: n, ...r }) {
60
61
  });
61
62
  }
62
63
  //#endregion
63
- export { r as Card, s as CardAction, c as CardContent, o as CardDescription, l as CardFooter, i as CardHeader, a as CardTitle };
64
+ export { i as Card, c as CardAction, l as CardContent, s as CardDescription, u as CardFooter, a as CardHeader, o as CardTitle, r as cardSurfaceClassName };
64
65
 
65
66
  //# sourceMappingURL=card.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"card.js","names":[],"sources":["../../../src/components/containment/card.tsx"],"mappings":";;;;AAIA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAsC;CAClE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,0IACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,4JACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AA6CA,SAAS,EAAU,EAAE,cAAW,IAAI,IAAY,MAAM,SAAM,UAAO,MAAM,GAAG,KAAyB;CACnG,IAAM,EAAE,aAAU,GAAG,MAAS;CAE9B,OACE,kBAAC,GAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,EACT,8BACA,MAAS,UAAU,aAInB,KAAQ,2BACR,CACF;EACA,GAAI;EAZN,UAAA,CAcG,IACC,kBAAC,QAAD;GACE,aAAU;GAGV,eAAY;GACZ,WAAW,EACT,0EAKA,mFACF;GAEC,UAAA;EACG,CAAA,IACJ,MACH,CACQ;;AAEf;AAEA,SAAS,EAAgB,EAAE,cAAW,GAAG,KAAsC;CAC7E,OAAO,kBAAC,OAAD;EAAK,aAAU;EAAmB,WAAW,EAAG,iCAAiC,CAAS;EAAG,GAAI;CAAQ,CAAA;AAClH;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,kEAAkE,CAAS;EACzF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAY,EAAE,cAAW,GAAG,KAAsC;CACzE,OAAO,kBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,EAAG,QAAQ,CAAS;EAAG,GAAI;CAAQ,CAAA;AACrF;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,EAAG,2CAA2C,CAAS;EAAG,GAAI;CAAQ,CAAA;AAElH"}
1
+ {"version":3,"file":"card.js","names":[],"sources":["../../../src/components/containment/card.tsx"],"mappings":";;;;AA0BA,IAAM,IAAuB;AAE7B,SAAS,EAAK,EAAE,cAAW,GAAG,KAAsC;CAClE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,GACA,+EACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,4JACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AA6CA,SAAS,EAAU,EAAE,cAAW,IAAI,IAAY,MAAM,SAAM,UAAO,MAAM,GAAG,KAAyB;CACnG,IAAM,EAAE,aAAU,GAAG,MAAS;CAE9B,OACE,kBAAC,GAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,EACT,8BACA,MAAS,UAAU,aAInB,KAAQ,2BACR,CACF;EACA,GAAI;EAZN,UAAA,CAcG,IACC,kBAAC,QAAD;GACE,aAAU;GAGV,eAAY;GACZ,WAAW,EACT,0EAKA,mFACF;GAEC,UAAA;EACG,CAAA,IACJ,MACH,CACQ;;AAEf;AAEA,SAAS,EAAgB,EAAE,cAAW,GAAG,KAAsC;CAC7E,OAAO,kBAAC,OAAD;EAAK,aAAU;EAAmB,WAAW,EAAG,iCAAiC,CAAS;EAAG,GAAI;CAAQ,CAAA;AAClH;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,kEAAkE,CAAS;EACzF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAY,EAAE,cAAW,GAAG,KAAsC;CACzE,OAAO,kBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,EAAG,QAAQ,CAAS;EAAG,GAAI;CAAQ,CAAA;AACrF;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,EAAG,2CAA2C,CAAS;EAAG,GAAI;CAAQ,CAAA;AAElH"}
@@ -42,7 +42,7 @@ import * as React from "react";
42
42
  * was promoted to fix.
43
43
  */
44
44
  declare const iconTileVariants: (props?: ({
45
- size?: "lg" | "sm" | "md" | null | undefined;
45
+ size?: "sm" | "md" | "lg" | null | undefined;
46
46
  tone?: "muted" | "board" | null | undefined;
47
47
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
48
48
  export type IconTileProps = React.ComponentProps<"span"> & VariantProps<typeof iconTileVariants> & {
@@ -1,8 +1,8 @@
1
1
  "use client";
2
2
  import { cn as e } from "../../lib/utils.js";
3
- import { Box as t } from "../layout/box.js";
4
- import { Grid as n } from "../layout/grid.js";
5
- import { Text as r } from "../typography/text.js";
3
+ import { Text as t } from "../typography/text.js";
4
+ import { Box as n } from "../layout/box.js";
5
+ import { Grid as r } from "../layout/grid.js";
6
6
  import { Tooltip as i, TooltipContent as a, TooltipProvider as o, TooltipTrigger as s } from "../overlays/tooltip.js";
7
7
  import { AVAILABLE_COLORS as c, COLOR_DISPLAY as l } from "../../lib/board-colors.js";
8
8
  import { resolveCode62Glyph as u } from "../../lib/board-characters.js";
@@ -43,7 +43,7 @@ function x({ onInsert: c, deviceType: x, code62Glyph: S, labels: C }) {
43
43
  behavior: "smooth"
44
44
  }), n?.focus();
45
45
  };
46
- return /* @__PURE__ */ h(o, { children: /* @__PURE__ */ g(t, {
46
+ return /* @__PURE__ */ h(o, { children: /* @__PURE__ */ g(n, {
47
47
  className: e("p-2"),
48
48
  tabIndex: 0,
49
49
  role: "listbox",
@@ -69,31 +69,31 @@ function x({ onInsert: c, deviceType: x, code62Glyph: S, labels: C }) {
69
69
  onFocus: (e) => {
70
70
  e.target === e.currentTarget && E === -1 && k(0);
71
71
  },
72
- children: [/* @__PURE__ */ h(n, {
72
+ children: [/* @__PURE__ */ h(r, {
73
73
  cols: "4",
74
74
  gap: "2",
75
75
  className: "w-64",
76
76
  role: "presentation",
77
- children: v.map((t, n) => {
78
- let o = E === n;
77
+ children: v.map((n, r) => {
78
+ let o = E === r;
79
79
  return /* @__PURE__ */ g(i, { children: [/* @__PURE__ */ h(s, {
80
80
  asChild: !0,
81
81
  children: /* @__PURE__ */ h("button", {
82
82
  ref: (e) => {
83
- O.current[n] = e;
83
+ O.current[r] = e;
84
84
  },
85
85
  type: "button",
86
- onClick: () => c(`{{${t}}}`),
87
- onFocus: () => D(n),
88
- className: e("h-10 rounded-md text-xs font-medium transition-all hover:scale-105 hover:shadow-md", "flex items-center justify-center focus:outline-none", o && "ring-2 ring-offset-2 ring-primary scale-105 shadow-md", l[t].bg, y[t] ?? l[t].text),
89
- "aria-label": w.colorOptionLabel(w.colorNames[t]),
86
+ onClick: () => c(`{{${n}}}`),
87
+ onFocus: () => D(r),
88
+ className: e("h-10 rounded-md text-xs font-medium transition-all hover:scale-105 hover:shadow-md", "flex items-center justify-center focus:outline-none", o && "ring-2 ring-offset-2 ring-primary scale-105 shadow-md", l[n].bg, y[n] ?? l[n].text),
89
+ "aria-label": w.colorOptionLabel(w.colorNames[n]),
90
90
  role: "option",
91
91
  "aria-selected": o,
92
- children: w.colorNames[t]
92
+ children: w.colorNames[n]
93
93
  })
94
- }), /* @__PURE__ */ h(a, { children: /* @__PURE__ */ h(r, { children: w.colorNames[t] }) })] }, t);
94
+ }), /* @__PURE__ */ h(a, { children: /* @__PURE__ */ h(t, { children: w.colorNames[n] }) })] }, n);
95
95
  })
96
- }), /* @__PURE__ */ h(t, {
96
+ }), /* @__PURE__ */ h(n, {
97
97
  className: "mt-2 pt-2 border-t border-border",
98
98
  role: "presentation",
99
99
  children: /* @__PURE__ */ g(i, { children: [/* @__PURE__ */ h(s, {
@@ -108,14 +108,14 @@ function x({ onInsert: c, deviceType: x, code62Glyph: S, labels: C }) {
108
108
  children: [T ? /* @__PURE__ */ h(d, { className: "w-4 h-4 fill-current" }) : /* @__PURE__ */ h(f, {
109
109
  className: "w-4 h-4",
110
110
  "aria-hidden": "true"
111
- }), /* @__PURE__ */ h(r, {
111
+ }), /* @__PURE__ */ h(t, {
112
112
  as: "span",
113
113
  weight: "medium",
114
114
  className: T ? "text-board-red" : void 0,
115
115
  children: T ? w.heartLabel : w.degreeLabel
116
116
  })]
117
117
  })
118
- }), /* @__PURE__ */ h(a, { children: /* @__PURE__ */ h(r, { children: T ? w.insertHeartTooltip : w.insertDegreeTooltip }) })] })
118
+ }), /* @__PURE__ */ h(a, { children: /* @__PURE__ */ h(t, { children: T ? w.insertHeartTooltip : w.insertDegreeTooltip }) })] })
119
119
  })]
120
120
  }) });
121
121
  }
@@ -1,10 +1,10 @@
1
1
  "use client";
2
2
  import { cn as e } from "../../lib/utils.js";
3
3
  import { Badge as t } from "../feedback/badge.js";
4
- import { Box as n } from "../layout/box.js";
5
- import { Flex as r } from "../layout/flex.js";
6
- import { Code as i } from "../typography/code.js";
7
- import { Text as a } from "../typography/text.js";
4
+ import { Text as n } from "../typography/text.js";
5
+ import { Box as r } from "../layout/box.js";
6
+ import { Flex as i } from "../layout/flex.js";
7
+ import { Code as a } from "../typography/code.js";
8
8
  import { Stack as o } from "../layout/stack.js";
9
9
  import { AlertCircle as s } from "lucide-react";
10
10
  import { jsx as c, jsxs as l } from "react/jsx-runtime";
@@ -46,7 +46,7 @@ function p({ filters: p, editor: m, onInsert: h, labels: g }) {
46
46
  ...u,
47
47
  ...g
48
48
  };
49
- if (p.length === 0) return /* @__PURE__ */ c(a, {
49
+ if (p.length === 0) return /* @__PURE__ */ c(n, {
50
50
  tone: "muted",
51
51
  className: "p-3",
52
52
  children: _.noFiltersAvailable
@@ -77,14 +77,14 @@ function p({ filters: p, editor: m, onInsert: h, labels: g }) {
77
77
  }).run() : h?.(`|${e}`);
78
78
  } else h?.(`|${e}`);
79
79
  };
80
- return /* @__PURE__ */ l(n, {
80
+ return /* @__PURE__ */ l(r, {
81
81
  className: "p-2 min-w-[250px]",
82
82
  children: [
83
- !v && m && /* @__PURE__ */ l(r, {
83
+ !v && m && /* @__PURE__ */ l(i, {
84
84
  align: "start",
85
85
  gap: "2",
86
86
  className: "mb-2 p-2 bg-muted/50 rounded-md text-xs text-muted-foreground",
87
- children: [/* @__PURE__ */ c(s, { className: "w-3.5 h-3.5 mt-0.5 flex-shrink-0" }), /* @__PURE__ */ c(a, {
87
+ children: [/* @__PURE__ */ c(s, { className: "w-3.5 h-3.5 mt-0.5 flex-shrink-0" }), /* @__PURE__ */ c(n, {
88
88
  as: "span",
89
89
  size: "xs",
90
90
  tone: "muted",
@@ -93,41 +93,41 @@ function p({ filters: p, editor: m, onInsert: h, labels: g }) {
93
93
  }),
94
94
  /* @__PURE__ */ c(o, {
95
95
  gap: "2",
96
- children: p.map((n) => {
97
- let r = n.split(":")[0];
96
+ children: p.map((r) => {
97
+ let i = r.split(":")[0];
98
98
  return /* @__PURE__ */ l("button", {
99
99
  type: "button",
100
- onClick: () => y(n),
100
+ onClick: () => y(r),
101
101
  className: e("w-full text-left px-3 py-2 rounded-md text-sm", "hover:bg-accent hover:text-accent-foreground transition-colors", "flex items-center gap-2"),
102
102
  children: [/* @__PURE__ */ l(t, {
103
103
  variant: "secondary",
104
104
  className: "font-mono text-xs",
105
- children: ["|", n]
106
- }), /* @__PURE__ */ l(a, {
105
+ children: ["|", r]
106
+ }), /* @__PURE__ */ l(n, {
107
107
  as: "span",
108
108
  size: "xs",
109
109
  tone: "muted",
110
110
  children: [
111
- r === "wrap" && _.filterDescWrap,
112
- r === "pad" && _.filterDescPad,
113
- r === "truncate" && _.filterDescTruncate
111
+ i === "wrap" && _.filterDescWrap,
112
+ i === "pad" && _.filterDescPad,
113
+ i === "truncate" && _.filterDescTruncate
114
114
  ]
115
115
  })]
116
- }, n);
116
+ }, r);
117
117
  })
118
118
  }),
119
119
  /* @__PURE__ */ l(o, {
120
120
  gap: "1",
121
121
  className: "mt-3 pt-3 border-t text-xs text-muted-foreground",
122
- children: [/* @__PURE__ */ c(a, {
122
+ children: [/* @__PURE__ */ c(n, {
123
123
  size: "xs",
124
124
  tone: "muted",
125
125
  children: _.exampleLabel("{{weather.temperature|pad:3}}")
126
- }), /* @__PURE__ */ l(a, {
126
+ }), /* @__PURE__ */ l(n, {
127
127
  tone: "muted",
128
128
  className: "text-[10px]",
129
129
  children: [
130
- /* @__PURE__ */ c(i, {
130
+ /* @__PURE__ */ c(a, {
131
131
  className: "bg-transparent px-0 py-0 text-[10px] font-semibold text-muted-foreground",
132
132
  children: "|wrap"
133
133
  }),
@@ -2,11 +2,11 @@
2
2
  import { cn as e } from "../../lib/utils.js";
3
3
  import { Button as t } from "../forms/button.js";
4
4
  import { Badge as n } from "../feedback/badge.js";
5
- import { Input as r } from "../forms/input.js";
6
- import { Box as i } from "../layout/box.js";
7
- import { Flex as a } from "../layout/flex.js";
8
- import { Grid as o } from "../layout/grid.js";
9
- import { Text as s } from "../typography/text.js";
5
+ import { Text as r } from "../typography/text.js";
6
+ import { Input as i } from "../forms/input.js";
7
+ import { Box as a } from "../layout/box.js";
8
+ import { Flex as o } from "../layout/flex.js";
9
+ import { Grid as s } from "../layout/grid.js";
10
10
  import { Stack as c } from "../layout/stack.js";
11
11
  import { Tooltip as l, TooltipContent as u, TooltipProvider as d, TooltipTrigger as f } from "../overlays/tooltip.js";
12
12
  import { AVAILABLE_COLORS as p, COLOR_DISPLAY as m } from "../../lib/board-colors.js";
@@ -43,7 +43,7 @@ function S({ formatting: S = {}, onInsert: C, labels: w }) {
43
43
  syntax: t.syntax,
44
44
  description: t.description
45
45
  }));
46
- if (j.length === 0) return /* @__PURE__ */ y(s, {
46
+ if (j.length === 0) return /* @__PURE__ */ y(r, {
47
47
  tone: "muted",
48
48
  className: "p-3",
49
49
  children: T.noFormattingAvailable
@@ -53,7 +53,7 @@ function S({ formatting: S = {}, onInsert: C, labels: w }) {
53
53
  }, N = (e) => {
54
54
  C(`{{${h}:${e}}}`), D(!1), k("");
55
55
  };
56
- return E ? /* @__PURE__ */ y(d, { children: /* @__PURE__ */ b(i, {
56
+ return E ? /* @__PURE__ */ y(d, { children: /* @__PURE__ */ b(a, {
57
57
  className: "p-2 min-w-[240px] max-w-[280px]",
58
58
  children: [
59
59
  /* @__PURE__ */ y("button", {
@@ -62,14 +62,14 @@ function S({ formatting: S = {}, onInsert: C, labels: w }) {
62
62
  className: "text-xs text-muted-foreground hover:text-foreground mb-2 flex items-center gap-1",
63
63
  children: T.back
64
64
  }),
65
- /* @__PURE__ */ y(s, {
65
+ /* @__PURE__ */ y(r, {
66
66
  size: "xs",
67
67
  tone: "muted",
68
68
  weight: "medium",
69
69
  className: "mb-2",
70
70
  children: T.selectColor
71
71
  }),
72
- /* @__PURE__ */ y(o, {
72
+ /* @__PURE__ */ y(s, {
73
73
  cols: "4",
74
74
  gap: "2",
75
75
  className: "mb-3",
@@ -82,23 +82,23 @@ function S({ formatting: S = {}, onInsert: C, labels: w }) {
82
82
  "aria-label": T.colorOptionLabel(T.colorNames[t]),
83
83
  children: T.colorNames[t]
84
84
  })
85
- }), /* @__PURE__ */ y(u, { children: /* @__PURE__ */ y(s, { children: T.colorNames[t] }) })] }, t))
85
+ }), /* @__PURE__ */ y(u, { children: /* @__PURE__ */ y(r, { children: T.colorNames[t] }) })] }, t))
86
86
  }),
87
- /* @__PURE__ */ b(i, {
87
+ /* @__PURE__ */ b(a, {
88
88
  className: "pt-2 border-t border-border",
89
- children: [/* @__PURE__ */ y(s, {
89
+ children: [/* @__PURE__ */ y(r, {
90
90
  size: "xs",
91
91
  tone: "muted",
92
92
  className: "mb-1.5",
93
93
  id: A,
94
94
  children: T.orCustomPattern
95
- }), /* @__PURE__ */ b(i, {
95
+ }), /* @__PURE__ */ b(a, {
96
96
  as: "form",
97
97
  onSubmit: (e) => {
98
98
  e.preventDefault(), O && N(O);
99
99
  },
100
100
  className: "flex gap-1.5",
101
- children: [/* @__PURE__ */ y(r, {
101
+ children: [/* @__PURE__ */ y(i, {
102
102
  type: "text",
103
103
  value: O,
104
104
  onChange: (e) => k(e.target.value),
@@ -115,35 +115,35 @@ function S({ formatting: S = {}, onInsert: C, labels: w }) {
115
115
  })]
116
116
  })
117
117
  ]
118
- }) }) : /* @__PURE__ */ y(d, { children: /* @__PURE__ */ y(i, {
118
+ }) }) : /* @__PURE__ */ y(d, { children: /* @__PURE__ */ y(a, {
119
119
  className: "p-1.5 min-w-[240px] max-w-[280px]",
120
120
  children: /* @__PURE__ */ y(c, {
121
121
  gap: "0.5",
122
122
  children: j.map((t) => {
123
- let r = t.syntax.includes(h);
123
+ let i = t.syntax.includes(h);
124
124
  return /* @__PURE__ */ b(l, { children: [/* @__PURE__ */ y(f, {
125
125
  asChild: !0,
126
126
  children: /* @__PURE__ */ b("button", {
127
127
  type: "button",
128
128
  onClick: () => M(t),
129
129
  className: e("w-full text-left px-2.5 py-1.5 rounded-md text-sm", "hover:bg-accent hover:text-accent-foreground transition-colors", "flex items-center justify-between gap-2 group"),
130
- children: [/* @__PURE__ */ b(a, {
130
+ children: [/* @__PURE__ */ b(o, {
131
131
  align: "center",
132
132
  gap: "2",
133
133
  className: "flex-1 min-w-0",
134
- children: [/* @__PURE__ */ y(_, { className: "w-3.5 h-3.5 text-muted-foreground group-hover:text-accent-foreground flex-shrink-0" }), /* @__PURE__ */ y(s, {
134
+ children: [/* @__PURE__ */ y(_, { className: "w-3.5 h-3.5 text-muted-foreground group-hover:text-accent-foreground flex-shrink-0" }), /* @__PURE__ */ y(r, {
135
135
  as: "span",
136
136
  weight: "medium",
137
137
  className: "capitalize truncate group-hover:text-accent-foreground",
138
138
  children: t.name
139
139
  })]
140
- }), r ? /* @__PURE__ */ y(g, { className: "w-3.5 h-3.5 text-muted-foreground group-hover:text-accent-foreground flex-shrink-0" }) : /* @__PURE__ */ y(n, {
140
+ }), i ? /* @__PURE__ */ y(g, { className: "w-3.5 h-3.5 text-muted-foreground group-hover:text-accent-foreground flex-shrink-0" }) : /* @__PURE__ */ y(n, {
141
141
  variant: "secondary",
142
142
  className: "font-mono text-[10px] px-1.5 py-0 flex-shrink-0",
143
143
  children: t.syntax
144
144
  })]
145
145
  })
146
- }), /* @__PURE__ */ y(u, { children: /* @__PURE__ */ y(s, { children: t.description ?? t.name }) })] }, t.syntax);
146
+ }), /* @__PURE__ */ y(u, { children: /* @__PURE__ */ y(r, { children: t.description ?? t.name }) })] }, t.syntax);
147
147
  })
148
148
  })
149
149
  }) });