huaira-ui 0.4.0 → 0.4.1

package/components/drawer/drawer.d.ts

@@ -1,2 +1,2 @@
 import { DrawerProps } from './drawer.types.js';
-export declare function Drawer({ size, side, dismissible, title, description, footer, closeLabel, open, defaultOpen, unstyled, className, id, ref, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, onOpenChange, children, ...props }: Readonly<DrawerProps>): import("react").JSX.Element;
+export declare function Drawer({ size, side, dismissible, title, description, footer, closeLabel, open, defaultOpen, unstyled, className, id, ref, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, onClose, onOpen, children, ...props }: Readonly<DrawerProps>): import("react").JSX.Element;

package/components/drawer/drawer.js

@@ -3,78 +3,78 @@ import { composeClassName as e, partClassName as t } from "../../lib/class-name.
 import { hasRenderableContent as n } from "../../lib/field-wiring.js";
 import { mergeRefs as ee } from "../../lib/merge-refs.js";
 import { CLOSE_GLYPH as te } from "../../lib/glyphs.js";
-import { useModality as ne } from "../../lib/use-modality.js";
-import { c as re } from "react/compiler-runtime";
-import { useId as ie, useState as ae } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useModality as r } from "../../lib/use-modality.js";
+import { c as ne } from "react/compiler-runtime";
+import { useId as re, useState as ie } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/drawer/drawer.tsx
-function a(a) {
-	let o = re(65), s, c, l, u, d, f, p, m, h, g, _, v, y, b, x, S, C, w;
-	o[0] === a ? (s = o[1], c = o[2], l = o[3], u = o[4], d = o[5], f = o[6], p = o[7], m = o[8], h = o[9], g = o[10], _ = o[11], v = o[12], y = o[13], b = o[14], x = o[15], S = o[16], C = o[17], w = o[18]) : ({size: y, side: b, dismissible: x, title: w, description: f, footer: p, closeLabel: d, open: g, defaultOpen: S, unstyled: C, className: u, id: m, ref: v, "aria-describedby": s, "aria-labelledby": c, onOpenChange: h, children: l, ..._} = a, o[0] = a, o[1] = s, o[2] = c, o[3] = l, o[4] = u, o[5] = d, o[6] = f, o[7] = p, o[8] = m, o[9] = h, o[10] = g, o[11] = _, o[12] = v, o[13] = y, o[14] = b, o[15] = x, o[16] = S, o[17] = C, o[18] = w);
-	let T = y === void 0 ? "md" : y, E = b === void 0 ? "start" : b, oe = x === void 0 || x, se = S !== void 0 && S, D = C !== void 0 && C, O = ie(), [ce, le] = ae(se), k = ne({
-		open: g ?? ce,
-		onOpenChange: V,
-		dismissible: oe
-	}), A = m ?? O, j;
-	o[19] === w ? j = o[20] : (j = n(w), o[19] = w, o[20] = j);
-	let M = j, N;
-	o[21] === f ? N = o[22] : (N = n(f), o[21] = f, o[22] = N);
-	let P = N, F = M ? `${A}-title` : void 0, I = P ? `${A}-desc` : void 0, L = I ? s ? `${s} ${I}` : I : s, R;
-	o[23] === d ? R = o[24] : (R = n(d), o[23] = d, o[24] = R);
-	let z = R, B = M || P || z;
-	function V(e) {
-		g === void 0 && le(e), h?.(e);
+function o(o) {
+	let s = ne(66), c, l, u, d, f, p, m, h, g, _, v, y, b, x, S, C, w, T, E;
+	s[0] === o ? (c = s[1], l = s[2], u = s[3], d = s[4], f = s[5], p = s[6], m = s[7], h = s[8], g = s[9], _ = s[10], v = s[11], y = s[12], b = s[13], x = s[14], S = s[15], C = s[16], w = s[17], T = s[18], E = s[19]) : ({size: x, side: S, dismissible: C, title: E, description: p, footer: m, closeLabel: f, open: v, defaultOpen: w, unstyled: T, className: d, id: h, ref: b, "aria-describedby": c, "aria-labelledby": l, onClose: g, onOpen: _, children: u, ...y} = o, s[0] = o, s[1] = c, s[2] = l, s[3] = u, s[4] = d, s[5] = f, s[6] = p, s[7] = m, s[8] = h, s[9] = g, s[10] = _, s[11] = v, s[12] = y, s[13] = b, s[14] = x, s[15] = S, s[16] = C, s[17] = w, s[18] = T, s[19] = E);
+	let D = x === void 0 ? "md" : x, O = S === void 0 ? "start" : S, ae = C === void 0 || C, oe = w !== void 0 && w, k = T !== void 0 && T, se = re(), [ce, le] = ie(oe), A = r({
+		open: v ?? ce,
+		onOpenChange: ue,
+		dismissible: ae
+	}), j = h ?? se, M;
+	s[20] === E ? M = s[21] : (M = n(E), s[20] = E, s[21] = M);
+	let N = M, P;
+	s[22] === p ? P = s[23] : (P = n(p), s[22] = p, s[23] = P);
+	let F = P, I = N ? `${j}-title` : void 0, L = F ? `${j}-desc` : void 0, R = L ? c ? `${c} ${L}` : L : c, z;
+	s[24] === f ? z = s[25] : (z = n(f), s[24] = f, s[25] = z);
+	let B = z, V = N || F || B;
+	function ue(e) {
+		v === void 0 && le(e), e ? _?.() : g?.();
 	}
 	let H;
-	o[25] === V ? H = o[26] : (H = function() {
-		V(!1);
-	}, o[25] = V, o[26] = H);
-	let U = H, W = T === "md" ? void 0 : T, G = E === "start" ? void 0 : E, K = c ?? F, q;
-	o[27] !== u || o[28] !== D ? (q = e("huaira-drawer", u, D), o[27] = u, o[28] = D, o[29] = q) : q = o[29];
+	s[26] === A ? H = s[27] : (H = function() {
+		A.close();
+	}, s[26] = A, s[27] = H);
+	let U = H, W = D === "md" ? void 0 : D, G = O === "start" ? void 0 : O, K = l ?? I, q;
+	s[28] !== d || s[29] !== k ? (q = e("huaira-drawer", d, k), s[28] = d, s[29] = k, s[30] = q) : q = s[30];
 	let J;
-	o[30] !== k.ref || o[31] !== v ? (J = ee(v, k.ref), o[30] = k.ref, o[31] = v, o[32] = J) : J = o[32];
+	s[31] !== A.ref || s[32] !== b ? (J = ee(b, A.ref), s[31] = A.ref, s[32] = b, s[33] = J) : J = s[33];
 	let Y;
-	o[33] !== d || o[34] !== f || o[35] !== I || o[36] !== U || o[37] !== z || o[38] !== P || o[39] !== B || o[40] !== M || o[41] !== w || o[42] !== F || o[43] !== D ? (Y = B && /* @__PURE__ */ i("header", {
-		className: t("huaira-drawer-header", D),
+	s[34] !== f || s[35] !== p || s[36] !== L || s[37] !== U || s[38] !== B || s[39] !== F || s[40] !== V || s[41] !== N || s[42] !== E || s[43] !== I || s[44] !== k ? (Y = V && /* @__PURE__ */ a("header", {
+		className: t("huaira-drawer-header", k),
 		children: [
-			M && /* @__PURE__ */ r("h2", {
-				id: F,
-				className: t("huaira-drawer-title", D),
-				children: w
-			}),
-			P && /* @__PURE__ */ r("p", {
+			N && /* @__PURE__ */ i("h2", {
 				id: I,
-				className: t("huaira-drawer-desc", D),
-				children: f
+				className: t("huaira-drawer-title", k),
+				children: E
+			}),
+			F && /* @__PURE__ */ i("p", {
+				id: L,
+				className: t("huaira-drawer-desc", k),
+				children: p
 			}),
-			z && /* @__PURE__ */ r("button", {
+			B && /* @__PURE__ */ i("button", {
 				type: "button",
-				"aria-label": d,
-				className: t("huaira-drawer-close", D),
+				"aria-label": f,
+				className: t("huaira-drawer-close", k),
 				onClick: U,
 				children: te
 			})
 		]
-	}), o[33] = d, o[34] = f, o[35] = I, o[36] = U, o[37] = z, o[38] = P, o[39] = B, o[40] = M, o[41] = w, o[42] = F, o[43] = D, o[44] = Y) : Y = o[44];
+	}), s[34] = f, s[35] = p, s[36] = L, s[37] = U, s[38] = B, s[39] = F, s[40] = V, s[41] = N, s[42] = E, s[43] = I, s[44] = k, s[45] = Y) : Y = s[45];
 	let X;
-	o[45] === D ? X = o[46] : (X = t("huaira-drawer-body", D), o[45] = D, o[46] = X);
+	s[46] === k ? X = s[47] : (X = t("huaira-drawer-body", k), s[46] = k, s[47] = X);
 	let Z;
-	o[47] !== l || o[48] !== X ? (Z = /* @__PURE__ */ r("div", {
+	s[48] !== u || s[49] !== X ? (Z = /* @__PURE__ */ i("div", {
 		className: X,
-		children: l
-	}), o[47] = l, o[48] = X, o[49] = Z) : Z = o[49];
+		children: u
+	}), s[48] = u, s[49] = X, s[50] = Z) : Z = s[50];
 	let Q;
-	o[50] !== p || o[51] !== D ? (Q = n(p) && /* @__PURE__ */ r("footer", {
-		className: t("huaira-drawer-footer", D),
-		children: p
-	}), o[50] = p, o[51] = D, o[52] = Q) : Q = o[52];
+	s[51] !== m || s[52] !== k ? (Q = n(m) && /* @__PURE__ */ i("footer", {
+		className: t("huaira-drawer-footer", k),
+		children: m
+	}), s[51] = m, s[52] = k, s[53] = Q) : Q = s[53];
 	let $;
-	return o[53] !== L || o[54] !== m || o[55] !== _ || o[56] !== W || o[57] !== G || o[58] !== K || o[59] !== q || o[60] !== J || o[61] !== Y || o[62] !== Z || o[63] !== Q ? ($ = /* @__PURE__ */ i("dialog", {
-		..._,
+	return s[54] !== R || s[55] !== h || s[56] !== y || s[57] !== W || s[58] !== G || s[59] !== K || s[60] !== q || s[61] !== J || s[62] !== Y || s[63] !== Z || s[64] !== Q ? ($ = /* @__PURE__ */ a("dialog", {
+		...y,
 		"data-size": W,
 		"data-side": G,
-		id: m,
-		"aria-describedby": L,
+		id: h,
+		"aria-describedby": R,
 		"aria-labelledby": K,
 		className: q,
 		ref: J,
@@ -83,9 +83,9 @@ function a(a) {
 			Z,
 			Q
 		]
-	}), o[53] = L, o[54] = m, o[55] = _, o[56] = W, o[57] = G, o[58] = K, o[59] = q, o[60] = J, o[61] = Y, o[62] = Z, o[63] = Q, o[64] = $) : $ = o[64], $;
+	}), s[54] = R, s[55] = h, s[56] = y, s[57] = W, s[58] = G, s[59] = K, s[60] = q, s[61] = J, s[62] = Y, s[63] = Z, s[64] = Q, s[65] = $) : $ = s[65], $;
 }
 //#endregion
-export { a as Drawer };
+export { o as Drawer };
 
 //# sourceMappingURL=drawer.js.map

package/components/drawer/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","names":["useId","useState","composeClassName","partClassName","hasRenderableContent","CLOSE_GLYPH","mergeRefs","useModality","DrawerProps","Drawer","t0","$","_c","ariaDescribedBy","ariaLabelledBy","children","className","closeLabel","description","footer","id","onOpenChange","open","props","ref","t1","t2","t3","t4","t5","title","size","side","dismissible","defaultOpen","unstyled","undefined","generatedId","uncontrolled","setUncontrolled","isOpen","modality","handleOpenChange","idBase","t6","hasTitle","t7","hasDescription","titleId","descriptionId","describedBy","t8","hasClose","hasHeader","next","t9","handleClose","t10","t11","t12","t13","t14","t15","t16","t17","t18","t19"],"sources":["../../../src/components/drawer/drawer.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport { composeClassName, partClassName } from \"../../lib/class-name\";\nimport { hasRenderableContent } from \"../../lib/field-wiring\";\nimport { CLOSE_GLYPH } from \"../../lib/glyphs\";\nimport { mergeRefs } from \"../../lib/merge-refs\";\nimport { useModality } from \"../../lib/use-modality\";\nimport type { DrawerProps } from \"./drawer.types\";\n\nexport function Drawer({\n  size = \"md\",\n  side = \"start\",\n  dismissible = true,\n  title,\n  description,\n  footer,\n  closeLabel,\n  open,\n  defaultOpen = false,\n  unstyled = false,\n  className,\n  id,\n  ref,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-labelledby\": ariaLabelledBy,\n  onOpenChange,\n  children,\n  ...props\n}: Readonly<DrawerProps>) {\n  const generatedId = useId();\n  const [uncontrolled, setUncontrolled] = useState(defaultOpen);\n  const isOpen = open ?? uncontrolled;\n  const modality = useModality<HTMLDialogElement>({\n    open: isOpen,\n    onOpenChange: handleOpenChange,\n    dismissible,\n  });\n\n  const idBase = id ?? generatedId;\n  const hasTitle = hasRenderableContent(title);\n  const hasDescription = hasRenderableContent(description);\n  const titleId = hasTitle ? `${idBase}-title` : undefined;\n  const descriptionId = hasDescription ? `${idBase}-desc` : undefined;\n  // A consumer description is kept and this one joins it, the way a field\n  // merges its hint id (lib/field-wiring.ts).\n  const describedBy = descriptionId\n    ? ariaDescribedBy\n      ? `${ariaDescribedBy} ${descriptionId}`\n      : descriptionId\n    : ariaDescribedBy;\n  // `hasRenderableContent` also rejects `closeLabel=\"\"`, which would render a\n  // button with no accessible name.\n  const hasClose = hasRenderableContent(closeLabel);\n  const hasHeader = hasTitle || hasDescription || hasClose;\n\n  function handleOpenChange(next: boolean) {\n    if (open === undefined) {\n      setUncontrolled(next);\n    }\n    onOpenChange?.(next);\n  }\n\n  function handleClose() {\n    handleOpenChange(false);\n  }\n\n  // No attribute for `dismissible`: refusing to close is behaviour, and what\n  // it produces on screen is the `data-deny` the hook writes.\n  return (\n    <dialog\n      {...props}\n      data-size={size === \"md\" ? undefined : size}\n      data-side={side === \"start\" ? undefined : side}\n      id={id}\n      aria-describedby={describedBy}\n      aria-labelledby={ariaLabelledBy ?? titleId}\n      className={composeClassName(\"huaira-drawer\", className, unstyled)}\n      ref={mergeRefs(ref, modality.ref)}\n    >\n      {hasHeader && (\n        <header className={partClassName(\"huaira-drawer-header\", unstyled)}>\n          {hasTitle && (\n            <h2\n              id={titleId}\n              className={partClassName(\"huaira-drawer-title\", unstyled)}\n            >\n              {title}\n            </h2>\n          )}\n          {hasDescription && (\n            <p\n              id={descriptionId}\n              className={partClassName(\"huaira-drawer-desc\", unstyled)}\n            >\n              {description}\n            </p>\n          )}\n          {hasClose && (\n            <button\n              type=\"button\"\n              aria-label={closeLabel}\n              className={partClassName(\"huaira-drawer-close\", unstyled)}\n              onClick={handleClose}\n            >\n              {CLOSE_GLYPH}\n            </button>\n          )}\n        </header>\n      )}\n      {/* Always rendered: it is the row that scrolls, and the grid places it\n          by class rather than by whichever siblings showed up. */}\n      <div className={partClassName(\"huaira-drawer-body\", unstyled)}>\n        {children}\n      </div>\n      {hasRenderableContent(footer) && (\n        <footer className={partClassName(\"huaira-drawer-footer\", unstyled)}>\n          {footer}\n        </footer>\n      )}\n    </dialog>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"drawer.js","names":["useId","useState","composeClassName","partClassName","hasRenderableContent","CLOSE_GLYPH","mergeRefs","useModality","DrawerProps","Drawer","t0","$","_c","ariaDescribedBy","ariaLabelledBy","children","className","closeLabel","description","footer","id","onClose","onOpen","open","props","ref","t1","t2","t3","t4","t5","title","size","side","dismissible","defaultOpen","unstyled","undefined","generatedId","uncontrolled","setUncontrolled","isOpen","modality","onOpenChange","handleOpenChange","idBase","t6","hasTitle","t7","hasDescription","titleId","descriptionId","describedBy","t8","hasClose","hasHeader","next","t9","handleCloseClick","close","t10","t11","t12","t13","t14","t15","t16","t17","t18","t19"],"sources":["../../../src/components/drawer/drawer.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport { composeClassName, partClassName } from \"../../lib/class-name\";\nimport { hasRenderableContent } from \"../../lib/field-wiring\";\nimport { CLOSE_GLYPH } from \"../../lib/glyphs\";\nimport { mergeRefs } from \"../../lib/merge-refs\";\nimport { useModality } from \"../../lib/use-modality\";\nimport type { DrawerProps } from \"./drawer.types\";\n\nexport function Drawer({\n  size = \"md\",\n  side = \"start\",\n  dismissible = true,\n  title,\n  description,\n  footer,\n  closeLabel,\n  open,\n  defaultOpen = false,\n  unstyled = false,\n  className,\n  id,\n  ref,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-labelledby\": ariaLabelledBy,\n  onClose,\n  onOpen,\n  children,\n  ...props\n}: Readonly<DrawerProps>) {\n  const generatedId = useId();\n  const [uncontrolled, setUncontrolled] = useState(defaultOpen);\n  const isOpen = open ?? uncontrolled;\n  const modality = useModality<HTMLDialogElement>({\n    open: isOpen,\n    onOpenChange: handleOpenChange,\n    dismissible,\n  });\n\n  const idBase = id ?? generatedId;\n  const hasTitle = hasRenderableContent(title);\n  const hasDescription = hasRenderableContent(description);\n  const titleId = hasTitle ? `${idBase}-title` : undefined;\n  const descriptionId = hasDescription ? `${idBase}-desc` : undefined;\n  // A consumer description is kept and this one joins it, the way a field\n  // merges its hint id (lib/field-wiring.ts).\n  const describedBy = descriptionId\n    ? ariaDescribedBy\n      ? `${ariaDescribedBy} ${descriptionId}`\n      : descriptionId\n    : ariaDescribedBy;\n  // `hasRenderableContent` also rejects `closeLabel=\"\"`, which would render a\n  // button with no accessible name.\n  const hasClose = hasRenderableContent(closeLabel);\n  const hasHeader = hasTitle || hasDescription || hasClose;\n\n  // The hook reports the state the panel reached, whoever moved it, so both\n  // callbacks fire from here exactly once per transition.\n  function handleOpenChange(next: boolean) {\n    if (open === undefined) {\n      setUncontrolled(next);\n    }\n    if (next) {\n      onOpen?.();\n    } else {\n      onClose?.();\n    }\n  }\n\n  // Closes through the platform rather than through state: the `close` event\n  // is then the one place the transition is reported, and a controlled panel\n  // whose consumer has not moved `open` yet still closes.\n  function handleCloseClick() {\n    modality.close();\n  }\n\n  // No attribute for `dismissible`: refusing to close is behaviour, and what\n  // it produces on screen is the `data-deny` the hook writes.\n  return (\n    <dialog\n      {...props}\n      data-size={size === \"md\" ? undefined : size}\n      data-side={side === \"start\" ? undefined : side}\n      id={id}\n      aria-describedby={describedBy}\n      aria-labelledby={ariaLabelledBy ?? titleId}\n      className={composeClassName(\"huaira-drawer\", className, unstyled)}\n      ref={mergeRefs(ref, modality.ref)}\n    >\n      {hasHeader && (\n        <header className={partClassName(\"huaira-drawer-header\", unstyled)}>\n          {hasTitle && (\n            <h2\n              id={titleId}\n              className={partClassName(\"huaira-drawer-title\", unstyled)}\n            >\n              {title}\n            </h2>\n          )}\n          {hasDescription && (\n            <p\n              id={descriptionId}\n              className={partClassName(\"huaira-drawer-desc\", unstyled)}\n            >\n              {description}\n            </p>\n          )}\n          {hasClose && (\n            <button\n              type=\"button\"\n              aria-label={closeLabel}\n              className={partClassName(\"huaira-drawer-close\", unstyled)}\n              onClick={handleCloseClick}\n            >\n              {CLOSE_GLYPH}\n            </button>\n          )}\n        </header>\n      )}\n      {/* Always rendered: it is the row that scrolls, and the grid places it\n          by class rather than by whichever siblings showed up. */}\n      <div className={partClassName(\"huaira-drawer-body\", unstyled)}>\n        {children}\n      </div>\n      {hasRenderableContent(footer) && (\n        <footer className={partClassName(\"huaira-drawer-footer\", unstyled)}>\n          {footer}\n        </footer>\n      )}\n    </dialog>\n  );\n}\n"],"mappings":"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"}

package/components/drawer/drawer.types.d.ts

@@ -18,7 +18,7 @@ export type DrawerSide = "start" | "end" | "block-start" | "block-end";
  * hand-written markup paints the same panel and a consumer's own
  * `showModal()` opens it.
  */
-export interface DrawerProps extends Omit<ComponentProps<"dialog">, "title" | "open">, StyleableProps {
+export interface DrawerProps extends Omit<ComponentProps<"dialog">, "onClose" | "open" | "title">, StyleableProps {
     /**
      * Size step from the modality ladder. On `start` and `end` it is the width
      * of the panel; on the two block edges the panel spans the viewport and this
@@ -68,7 +68,7 @@ export interface DrawerProps extends Omit<ComponentProps<"dialog">, "title" | "o
      */
     closeLabel?: string;
     /**
-     * Open state, controlled. Pair it with `onOpenChange`: Escape and a backdrop
+     * Open state, controlled. Pair it with `onClose`: Escape and a backdrop
      * click close the panel without asking React first, and that callback is how
      * the two stay in step.
      */
@@ -79,10 +79,20 @@ export interface DrawerProps extends Omit<ComponentProps<"dialog">, "title" | "o
      */
     defaultOpen?: boolean;
     /**
-     * Fires with the new state whenever the panel opens or closes, including the
-     * closes React did not start.
+     * Fires once whenever the panel has closed, whoever closed it: Escape, a
+     * backdrop click, the close button and the consumer moving `open` to false
+     * all arrive here, because the dialog's own `close` event is the single
+     * place the transition is read from. It takes the name of the native
+     * `close` handler, which the props drop — the same event, minus the one an
+     * unmount would raise.
      */
-    onOpenChange?: (open: boolean) => void;
+    onClose?: () => void;
+    /**
+     * Fires once whenever the panel has opened, after `showModal()` — including
+     * the first render under `defaultOpen`. A panel never opens by itself, so
+     * this is a notification, not a state the consumer has to answer.
+     */
+    onOpen?: () => void;
     /**
      * The body of the panel: the one row that scrolls when the content is taller
      * than the surface. A body that scrolls needs something focusable inside it,

package/components/modal/modal.d.ts

@@ -1,2 +1,2 @@
 import { ModalProps } from './modal.types.js';
-export declare function Modal({ variant, color, size, dismissible, mobileSheet, icon, title, description, footer, closeLabel, open, defaultOpen, unstyled, className, id, ref, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, onOpenChange, children, ...props }: Readonly<ModalProps>): import("react").JSX.Element;
+export declare function Modal({ variant, color, size, dismissible, mobileSheet, icon, title, description, footer, closeLabel, open, defaultOpen, unstyled, className, id, ref, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, onClose, onOpen, children, ...props }: Readonly<ModalProps>): import("react").JSX.Element;

package/components/modal/modal.js

@@ -1,90 +1,90 @@
 "use client";
-import { composeClassName as ee, partClassName as e } from "../../lib/class-name.js";
-import { hasRenderableContent as t } from "../../lib/field-wiring.js";
-import { mergeRefs as te } from "../../lib/merge-refs.js";
-import { CLOSE_GLYPH as ne } from "../../lib/glyphs.js";
-import { useModality as re } from "../../lib/use-modality.js";
-import { c as ie } from "react/compiler-runtime";
-import { useId as ae, useState as oe } from "react";
-import { jsx as n, jsxs as se } from "react/jsx-runtime";
+import { composeClassName as e, partClassName as t } from "../../lib/class-name.js";
+import { hasRenderableContent as n } from "../../lib/field-wiring.js";
+import { mergeRefs as ee } from "../../lib/merge-refs.js";
+import { CLOSE_GLYPH as te } from "../../lib/glyphs.js";
+import { useModality as ne } from "../../lib/use-modality.js";
+import { c as re } from "react/compiler-runtime";
+import { useId as ie, useState as ae } from "react";
+import { jsx as r, jsxs as oe } from "react/jsx-runtime";
 //#region src/components/modal/modal.tsx
-function r(r) {
-	let i = ie(75), a, o, s, c, l, u, d, f, p, m, h, g, _, v, y, b, x, S, C, w, T;
-	i[0] === r ? (a = i[1], o = i[2], s = i[3], c = i[4], l = i[5], u = i[6], d = i[7], f = i[8], p = i[9], m = i[10], h = i[11], g = i[12], _ = i[13], v = i[14], y = i[15], b = i[16], x = i[17], S = i[18], C = i[19], w = i[20], T = i[21]) : ({variant: y, color: u, size: b, dismissible: x, mobileSheet: S, icon: p, title: T, description: d, footer: f, closeLabel: l, open: g, defaultOpen: C, unstyled: w, className: c, id: m, ref: v, "aria-describedby": a, "aria-labelledby": o, onOpenChange: h, children: s, ..._} = r, i[0] = r, i[1] = a, i[2] = o, i[3] = s, i[4] = c, i[5] = l, i[6] = u, i[7] = d, i[8] = f, i[9] = p, i[10] = m, i[11] = h, i[12] = g, i[13] = _, i[14] = v, i[15] = y, i[16] = b, i[17] = x, i[18] = S, i[19] = C, i[20] = w, i[21] = T);
-	let E = y === void 0 ? "dialog" : y, ce = b === void 0 ? "md" : b, le = x === void 0 || x, ue = S !== void 0 && S, de = C !== void 0 && C, D = w !== void 0 && w, fe = ae(), [pe, me] = oe(de), he = re({
-		open: g ?? pe,
-		onOpenChange: z,
-		dismissible: le
-	}), ge = m ?? fe, O;
-	i[22] === p ? O = i[23] : (O = t(p), i[22] = p, i[23] = O);
-	let k = O, A;
-	i[24] === T ? A = i[25] : (A = t(T), i[24] = T, i[25] = A);
-	let j = A, M;
-	i[26] === d ? M = i[27] : (M = t(d), i[26] = d, i[27] = M);
-	let N = M, P = j ? `${ge}-title` : void 0, F = N ? `${ge}-desc` : void 0, I = F ? a ? `${a} ${F}` : F : a, L;
-	i[28] === l ? L = i[29] : (L = t(l), i[28] = l, i[29] = L);
-	let R = L, _e = k || j || N || R;
-	function z(ee) {
-		g === void 0 && me(ee), h?.(ee);
+function i(i) {
+	let a = re(76), o, s, c, l, u, d, f, p, m, h, g, _, v, y, b, x, S, C, w, T, E, D;
+	a[0] === i ? (o = a[1], s = a[2], c = a[3], l = a[4], u = a[5], d = a[6], f = a[7], p = a[8], m = a[9], h = a[10], g = a[11], _ = a[12], v = a[13], y = a[14], b = a[15], x = a[16], S = a[17], C = a[18], w = a[19], T = a[20], E = a[21], D = a[22]) : ({variant: x, color: d, size: S, dismissible: C, mobileSheet: w, icon: m, title: D, description: f, footer: p, closeLabel: u, open: v, defaultOpen: T, unstyled: E, className: l, id: h, ref: b, "aria-describedby": o, "aria-labelledby": s, onClose: g, onOpen: _, children: c, ...y} = i, a[0] = i, a[1] = o, a[2] = s, a[3] = c, a[4] = l, a[5] = u, a[6] = d, a[7] = f, a[8] = p, a[9] = m, a[10] = h, a[11] = g, a[12] = _, a[13] = v, a[14] = y, a[15] = b, a[16] = x, a[17] = S, a[18] = C, a[19] = w, a[20] = T, a[21] = E, a[22] = D);
+	let O = x === void 0 ? "dialog" : x, se = S === void 0 ? "md" : S, ce = C === void 0 || C, le = w !== void 0 && w, ue = T !== void 0 && T, k = E !== void 0 && E, de = ie(), [fe, pe] = ae(ue), A = ne({
+		open: v ?? fe,
+		onOpenChange: he,
+		dismissible: ce
+	}), me = h ?? de, j;
+	a[23] === m ? j = a[24] : (j = n(m), a[23] = m, a[24] = j);
+	let M = j, N;
+	a[25] === D ? N = a[26] : (N = n(D), a[25] = D, a[26] = N);
+	let P = N, F;
+	a[27] === f ? F = a[28] : (F = n(f), a[27] = f, a[28] = F);
+	let I = F, L = P ? `${me}-title` : void 0, R = I ? `${me}-desc` : void 0, z = R ? o ? `${o} ${R}` : R : o, B;
+	a[29] === u ? B = a[30] : (B = n(u), a[29] = u, a[30] = B);
+	let V = B, H = M || P || I || V;
+	function he(e) {
+		v === void 0 && pe(e), e ? _?.() : g?.();
 	}
-	let B;
-	i[30] === z ? B = i[31] : (B = function() {
-		z(!1);
-	}, i[30] = z, i[31] = B);
-	let V = B, H = E === "alert" ? "alertdialog" : void 0, U = E === "dialog" ? void 0 : E, W = ce === "md" ? void 0 : ce, G = ue ? "sheet" : void 0, K = o ?? P, q;
-	i[32] !== c || i[33] !== D ? (q = ee("huaira-modal", c, D), i[32] = c, i[33] = D, i[34] = q) : q = i[34];
+	let U;
+	a[31] === A ? U = a[32] : (U = function() {
+		A.close();
+	}, a[31] = A, a[32] = U);
+	let W = U, ge = O === "alert" ? "alertdialog" : void 0, _e = O === "dialog" ? void 0 : O, ve = se === "md" ? void 0 : se, G = le ? "sheet" : void 0, K = s ?? L, q;
+	a[33] !== l || a[34] !== k ? (q = e("huaira-modal", l, k), a[33] = l, a[34] = k, a[35] = q) : q = a[35];
 	let J;
-	i[35] !== he.ref || i[36] !== v ? (J = te(v, he.ref), i[35] = he.ref, i[36] = v, i[37] = J) : J = i[37];
+	a[36] !== A.ref || a[37] !== b ? (J = ee(b, A.ref), a[36] = A.ref, a[37] = b, a[38] = J) : J = a[38];
 	let Y;
-	i[38] !== l || i[39] !== d || i[40] !== F || i[41] !== V || i[42] !== R || i[43] !== N || i[44] !== _e || i[45] !== k || i[46] !== j || i[47] !== p || i[48] !== T || i[49] !== P || i[50] !== D ? (Y = _e && /* @__PURE__ */ se("header", {
-		className: e("huaira-modal-header", D),
+	a[39] !== u || a[40] !== f || a[41] !== R || a[42] !== W || a[43] !== V || a[44] !== I || a[45] !== H || a[46] !== M || a[47] !== P || a[48] !== m || a[49] !== D || a[50] !== L || a[51] !== k ? (Y = H && /* @__PURE__ */ oe("header", {
+		className: t("huaira-modal-header", k),
 		children: [
-			k && /* @__PURE__ */ n("span", {
+			M && /* @__PURE__ */ r("span", {
 				"aria-hidden": "true",
-				className: e("huaira-modal-icon", D),
-				children: p
+				className: t("huaira-modal-icon", k),
+				children: m
 			}),
-			j && /* @__PURE__ */ n("h2", {
-				id: P,
-				className: e("huaira-modal-title", D),
-				children: T
+			P && /* @__PURE__ */ r("h2", {
+				id: L,
+				className: t("huaira-modal-title", k),
+				children: D
 			}),
-			N && /* @__PURE__ */ n("p", {
-				id: F,
-				className: e("huaira-modal-desc", D),
-				children: d
+			I && /* @__PURE__ */ r("p", {
+				id: R,
+				className: t("huaira-modal-desc", k),
+				children: f
 			}),
-			R && /* @__PURE__ */ n("button", {
+			V && /* @__PURE__ */ r("button", {
 				type: "button",
-				"aria-label": l,
-				className: e("huaira-modal-close", D),
-				onClick: V,
-				children: ne
+				"aria-label": u,
+				className: t("huaira-modal-close", k),
+				onClick: W,
+				children: te
 			})
 		]
-	}), i[38] = l, i[39] = d, i[40] = F, i[41] = V, i[42] = R, i[43] = N, i[44] = _e, i[45] = k, i[46] = j, i[47] = p, i[48] = T, i[49] = P, i[50] = D, i[51] = Y) : Y = i[51];
+	}), a[39] = u, a[40] = f, a[41] = R, a[42] = W, a[43] = V, a[44] = I, a[45] = H, a[46] = M, a[47] = P, a[48] = m, a[49] = D, a[50] = L, a[51] = k, a[52] = Y) : Y = a[52];
 	let X;
-	i[52] === D ? X = i[53] : (X = e("huaira-modal-body", D), i[52] = D, i[53] = X);
+	a[53] === k ? X = a[54] : (X = t("huaira-modal-body", k), a[53] = k, a[54] = X);
 	let Z;
-	i[54] !== s || i[55] !== X ? (Z = /* @__PURE__ */ n("div", {
+	a[55] !== c || a[56] !== X ? (Z = /* @__PURE__ */ r("div", {
 		className: X,
-		children: s
-	}), i[54] = s, i[55] = X, i[56] = Z) : Z = i[56];
+		children: c
+	}), a[55] = c, a[56] = X, a[57] = Z) : Z = a[57];
 	let Q;
-	i[57] !== f || i[58] !== D ? (Q = t(f) && /* @__PURE__ */ n("footer", {
-		className: e("huaira-modal-footer", D),
-		children: f
-	}), i[57] = f, i[58] = D, i[59] = Q) : Q = i[59];
+	a[58] !== p || a[59] !== k ? (Q = n(p) && /* @__PURE__ */ r("footer", {
+		className: t("huaira-modal-footer", k),
+		children: p
+	}), a[58] = p, a[59] = k, a[60] = Q) : Q = a[60];
 	let $;
-	return i[60] !== u || i[61] !== I || i[62] !== m || i[63] !== _ || i[64] !== H || i[65] !== U || i[66] !== W || i[67] !== G || i[68] !== K || i[69] !== q || i[70] !== J || i[71] !== Y || i[72] !== Z || i[73] !== Q ? ($ = /* @__PURE__ */ se("dialog", {
-		..._,
-		role: H,
-		"data-variant": U,
-		"data-color": u,
-		"data-size": W,
+	return a[61] !== d || a[62] !== z || a[63] !== h || a[64] !== y || a[65] !== ge || a[66] !== _e || a[67] !== ve || a[68] !== G || a[69] !== K || a[70] !== q || a[71] !== J || a[72] !== Y || a[73] !== Z || a[74] !== Q ? ($ = /* @__PURE__ */ oe("dialog", {
+		...y,
+		role: ge,
+		"data-variant": _e,
+		"data-color": d,
+		"data-size": ve,
 		"data-mobile": G,
-		id: m,
-		"aria-describedby": I,
+		id: h,
+		"aria-describedby": z,
 		"aria-labelledby": K,
 		className: q,
 		ref: J,
@@ -93,9 +93,9 @@ function r(r) {
 			Z,
 			Q
 		]
-	}), i[60] = u, i[61] = I, i[62] = m, i[63] = _, i[64] = H, i[65] = U, i[66] = W, i[67] = G, i[68] = K, i[69] = q, i[70] = J, i[71] = Y, i[72] = Z, i[73] = Q, i[74] = $) : $ = i[74], $;
+	}), a[61] = d, a[62] = z, a[63] = h, a[64] = y, a[65] = ge, a[66] = _e, a[67] = ve, a[68] = G, a[69] = K, a[70] = q, a[71] = J, a[72] = Y, a[73] = Z, a[74] = Q, a[75] = $) : $ = a[75], $;
 }
 //#endregion
-export { r as Modal };
+export { i as Modal };
 
 //# sourceMappingURL=modal.js.map

package/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","names":["useId","useState","composeClassName","partClassName","hasRenderableContent","CLOSE_GLYPH","mergeRefs","useModality","ModalProps","Modal","t0","$","_c","ariaDescribedBy","ariaLabelledBy","children","className","closeLabel","color","description","footer","icon","id","onOpenChange","open","props","ref","t1","t2","t3","t4","t5","t6","title","variant","size","dismissible","mobileSheet","defaultOpen","unstyled","undefined","generatedId","uncontrolled","setUncontrolled","isOpen","modality","handleOpenChange","idBase","t7","hasIcon","t8","hasTitle","t9","hasDescription","titleId","descriptionId","describedBy","t10","hasClose","hasHeader","next","t11","handleClose","t12","t13","t14","t15","t16","t17","t18","t19","t20","t21","t22","t23"],"sources":["../../../src/components/modal/modal.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport { composeClassName, partClassName } from \"../../lib/class-name\";\nimport { hasRenderableContent } from \"../../lib/field-wiring\";\nimport { CLOSE_GLYPH } from \"../../lib/glyphs\";\nimport { mergeRefs } from \"../../lib/merge-refs\";\nimport { useModality } from \"../../lib/use-modality\";\nimport type { ModalProps } from \"./modal.types\";\n\nexport function Modal({\n  variant = \"dialog\",\n  color,\n  size = \"md\",\n  dismissible = true,\n  mobileSheet = false,\n  icon,\n  title,\n  description,\n  footer,\n  closeLabel,\n  open,\n  defaultOpen = false,\n  unstyled = false,\n  className,\n  id,\n  ref,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-labelledby\": ariaLabelledBy,\n  onOpenChange,\n  children,\n  ...props\n}: Readonly<ModalProps>) {\n  const generatedId = useId();\n  const [uncontrolled, setUncontrolled] = useState(defaultOpen);\n  const isOpen = open ?? uncontrolled;\n  const modality = useModality<HTMLDialogElement>({\n    open: isOpen,\n    onOpenChange: handleOpenChange,\n    dismissible,\n  });\n\n  const idBase = id ?? generatedId;\n  const hasIcon = hasRenderableContent(icon);\n  const hasTitle = hasRenderableContent(title);\n  const hasDescription = hasRenderableContent(description);\n  const titleId = hasTitle ? `${idBase}-title` : undefined;\n  const descriptionId = hasDescription ? `${idBase}-desc` : undefined;\n  // A consumer description is kept and this one joins it, the way a field\n  // merges its hint id (lib/field-wiring.ts).\n  const describedBy = descriptionId\n    ? ariaDescribedBy\n      ? `${ariaDescribedBy} ${descriptionId}`\n      : descriptionId\n    : ariaDescribedBy;\n  // `hasRenderableContent` also rejects `closeLabel=\"\"`, which would render a\n  // button with no accessible name.\n  const hasClose = hasRenderableContent(closeLabel);\n  const hasHeader = hasIcon || hasTitle || hasDescription || hasClose;\n\n  function handleOpenChange(next: boolean) {\n    if (open === undefined) {\n      setUncontrolled(next);\n    }\n    onOpenChange?.(next);\n  }\n\n  function handleClose() {\n    handleOpenChange(false);\n  }\n\n  // No attribute for `dismissible`: refusing to close is behaviour, and what\n  // it produces on screen is the `data-deny` the hook writes.\n  return (\n    <dialog\n      {...props}\n      role={variant === \"alert\" ? \"alertdialog\" : undefined}\n      data-variant={variant === \"dialog\" ? undefined : variant}\n      data-color={color}\n      data-size={size === \"md\" ? undefined : size}\n      data-mobile={mobileSheet ? \"sheet\" : undefined}\n      id={id}\n      aria-describedby={describedBy}\n      aria-labelledby={ariaLabelledBy ?? titleId}\n      className={composeClassName(\"huaira-modal\", className, unstyled)}\n      ref={mergeRefs(ref, modality.ref)}\n    >\n      {hasHeader && (\n        <header className={partClassName(\"huaira-modal-header\", unstyled)}>\n          {hasIcon && (\n            <span\n              aria-hidden=\"true\"\n              className={partClassName(\"huaira-modal-icon\", unstyled)}\n            >\n              {icon}\n            </span>\n          )}\n          {hasTitle && (\n            <h2\n              id={titleId}\n              className={partClassName(\"huaira-modal-title\", unstyled)}\n            >\n              {title}\n            </h2>\n          )}\n          {hasDescription && (\n            <p\n              id={descriptionId}\n              className={partClassName(\"huaira-modal-desc\", unstyled)}\n            >\n              {description}\n            </p>\n          )}\n          {hasClose && (\n            <button\n              type=\"button\"\n              aria-label={closeLabel}\n              className={partClassName(\"huaira-modal-close\", unstyled)}\n              onClick={handleClose}\n            >\n              {CLOSE_GLYPH}\n            </button>\n          )}\n        </header>\n      )}\n      {/* Always rendered: it is the row that scrolls, and the grid places it\n          by class rather than by whichever siblings showed up. */}\n      <div className={partClassName(\"huaira-modal-body\", unstyled)}>\n        {children}\n      </div>\n      {hasRenderableContent(footer) && (\n        <footer className={partClassName(\"huaira-modal-footer\", unstyled)}>\n          {footer}\n        </footer>\n      )}\n    </dialog>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"modal.js","names":["useId","useState","composeClassName","partClassName","hasRenderableContent","CLOSE_GLYPH","mergeRefs","useModality","ModalProps","Modal","t0","$","_c","ariaDescribedBy","ariaLabelledBy","children","className","closeLabel","color","description","footer","icon","id","onClose","onOpen","open","props","ref","t1","t2","t3","t4","t5","t6","title","variant","size","dismissible","mobileSheet","defaultOpen","unstyled","undefined","generatedId","uncontrolled","setUncontrolled","isOpen","modality","onOpenChange","handleOpenChange","idBase","t7","hasIcon","t8","hasTitle","t9","hasDescription","titleId","descriptionId","describedBy","t10","hasClose","hasHeader","next","t11","handleCloseClick","close","t12","t13","t14","t15","t16","t17","t18","t19","t20","t21","t22","t23"],"sources":["../../../src/components/modal/modal.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport { composeClassName, partClassName } from \"../../lib/class-name\";\nimport { hasRenderableContent } from \"../../lib/field-wiring\";\nimport { CLOSE_GLYPH } from \"../../lib/glyphs\";\nimport { mergeRefs } from \"../../lib/merge-refs\";\nimport { useModality } from \"../../lib/use-modality\";\nimport type { ModalProps } from \"./modal.types\";\n\nexport function Modal({\n  variant = \"dialog\",\n  color,\n  size = \"md\",\n  dismissible = true,\n  mobileSheet = false,\n  icon,\n  title,\n  description,\n  footer,\n  closeLabel,\n  open,\n  defaultOpen = false,\n  unstyled = false,\n  className,\n  id,\n  ref,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-labelledby\": ariaLabelledBy,\n  onClose,\n  onOpen,\n  children,\n  ...props\n}: Readonly<ModalProps>) {\n  const generatedId = useId();\n  const [uncontrolled, setUncontrolled] = useState(defaultOpen);\n  const isOpen = open ?? uncontrolled;\n  const modality = useModality<HTMLDialogElement>({\n    open: isOpen,\n    onOpenChange: handleOpenChange,\n    dismissible,\n  });\n\n  const idBase = id ?? generatedId;\n  const hasIcon = hasRenderableContent(icon);\n  const hasTitle = hasRenderableContent(title);\n  const hasDescription = hasRenderableContent(description);\n  const titleId = hasTitle ? `${idBase}-title` : undefined;\n  const descriptionId = hasDescription ? `${idBase}-desc` : undefined;\n  // A consumer description is kept and this one joins it, the way a field\n  // merges its hint id (lib/field-wiring.ts).\n  const describedBy = descriptionId\n    ? ariaDescribedBy\n      ? `${ariaDescribedBy} ${descriptionId}`\n      : descriptionId\n    : ariaDescribedBy;\n  // `hasRenderableContent` also rejects `closeLabel=\"\"`, which would render a\n  // button with no accessible name.\n  const hasClose = hasRenderableContent(closeLabel);\n  const hasHeader = hasIcon || hasTitle || hasDescription || hasClose;\n\n  // The hook reports the state the dialog reached, whoever moved it, so both\n  // callbacks fire from here exactly once per transition.\n  function handleOpenChange(next: boolean) {\n    if (open === undefined) {\n      setUncontrolled(next);\n    }\n    if (next) {\n      onOpen?.();\n    } else {\n      onClose?.();\n    }\n  }\n\n  // Closes through the platform rather than through state: the `close` event\n  // is then the one place the transition is reported, and a controlled dialog\n  // whose consumer has not moved `open` yet still closes.\n  function handleCloseClick() {\n    modality.close();\n  }\n\n  // No attribute for `dismissible`: refusing to close is behaviour, and what\n  // it produces on screen is the `data-deny` the hook writes.\n  return (\n    <dialog\n      {...props}\n      role={variant === \"alert\" ? \"alertdialog\" : undefined}\n      data-variant={variant === \"dialog\" ? undefined : variant}\n      data-color={color}\n      data-size={size === \"md\" ? undefined : size}\n      data-mobile={mobileSheet ? \"sheet\" : undefined}\n      id={id}\n      aria-describedby={describedBy}\n      aria-labelledby={ariaLabelledBy ?? titleId}\n      className={composeClassName(\"huaira-modal\", className, unstyled)}\n      ref={mergeRefs(ref, modality.ref)}\n    >\n      {hasHeader && (\n        <header className={partClassName(\"huaira-modal-header\", unstyled)}>\n          {hasIcon && (\n            <span\n              aria-hidden=\"true\"\n              className={partClassName(\"huaira-modal-icon\", unstyled)}\n            >\n              {icon}\n            </span>\n          )}\n          {hasTitle && (\n            <h2\n              id={titleId}\n              className={partClassName(\"huaira-modal-title\", unstyled)}\n            >\n              {title}\n            </h2>\n          )}\n          {hasDescription && (\n            <p\n              id={descriptionId}\n              className={partClassName(\"huaira-modal-desc\", unstyled)}\n            >\n              {description}\n            </p>\n          )}\n          {hasClose && (\n            <button\n              type=\"button\"\n              aria-label={closeLabel}\n              className={partClassName(\"huaira-modal-close\", unstyled)}\n              onClick={handleCloseClick}\n            >\n              {CLOSE_GLYPH}\n            </button>\n          )}\n        </header>\n      )}\n      {/* Always rendered: it is the row that scrolls, and the grid places it\n          by class rather than by whichever siblings showed up. */}\n      <div className={partClassName(\"huaira-modal-body\", unstyled)}>\n        {children}\n      </div>\n      {hasRenderableContent(footer) && (\n        <footer className={partClassName(\"huaira-modal-footer\", unstyled)}>\n          {footer}\n        </footer>\n      )}\n    </dialog>\n  );\n}\n"],"mappings":"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"}

package/components/modal/modal.types.d.ts

@@ -21,7 +21,7 @@ import { HuairaColor, HuairaSize, StyleableProps } from '../../types.js';
  * `closedby` attribute would replace that plumbing wholesale once they clear
  * the browser floor. Neither is used here yet.
  */
-export interface ModalProps extends Omit<ComponentProps<"dialog">, "open" | "role" | "title">, StyleableProps {
+export interface ModalProps extends Omit<ComponentProps<"dialog">, "onClose" | "open" | "role" | "title">, StyleableProps {
     /**
      * `alert` is the APG Alert Dialog: `role="alertdialog"`, centred content and
      * a footer of equal actions, for a question that has to be answered before
@@ -88,7 +88,7 @@ export interface ModalProps extends Omit<ComponentProps<"dialog">, "open" | "rol
      */
     closeLabel?: string;
     /**
-     * Open state, controlled. Pair it with `onOpenChange`: Escape and a backdrop
+     * Open state, controlled. Pair it with `onClose`: Escape and a backdrop
      * click close the dialog without asking React first, and that callback is
      * how the two stay in step.
      */
@@ -99,10 +99,20 @@ export interface ModalProps extends Omit<ComponentProps<"dialog">, "open" | "rol
      */
     defaultOpen?: boolean;
     /**
-     * Fires with the new state whenever the dialog opens or closes, including
-     * the closes React did not start.
+     * Fires once whenever the dialog has closed, whoever closed it: Escape, a
+     * backdrop click, the close button and the consumer moving `open` to false
+     * all arrive here, because the dialog's own `close` event is the single
+     * place the transition is read from. It takes the name of the native
+     * `close` handler, which the props drop — the same event, minus the one an
+     * unmount would raise.
      */
-    onOpenChange?: (open: boolean) => void;
+    onClose?: () => void;
+    /**
+     * Fires once whenever the dialog has opened, after `showModal()` — including
+     * the first render under `defaultOpen`. A dialog never opens by itself, so
+     * this is a notification, not a state the consumer has to answer.
+     */
+    onOpen?: () => void;
     /**
      * The body of the dialog: the one row that scrolls when the content is
      * taller than the surface. A body that scrolls needs something focusable

package/lib/use-modality.d.ts

@@ -2,7 +2,13 @@ import { RefObject } from 'react';
 export interface ModalityOptions {
     /** React's idea of whether the dialog is open. */
     open: boolean;
-    /** Called when the dialog closed or opened on its own. */
+    /**
+     * Called once with the state the dialog has actually reached, from the
+     * `showModal()` that opened it and from its own `close` event. Every path
+     * ends there — Escape, the backdrop, a `form method="dialog"`, the consumer
+     * flipping `open` — so a caller reports each transition exactly once and
+     * never has to tell them apart.
+     */
     onOpenChange: (open: boolean) => void;
     /** False refuses Escape and the backdrop, and shakes the surface instead. */
     dismissible: boolean;
@@ -10,6 +16,13 @@ export interface ModalityOptions {
 export interface Modality<E extends HTMLDialogElement> {
     /** Attach to the dialog element; merge it with your own ref. */
     ref: RefObject<E | null>;
+    /**
+     * Closes the dialog through the platform rather than through React, which
+     * is what a close button calls: the `close` event is then the single place
+     * the transition is reported, and a controlled surface whose consumer has
+     * not moved `open` yet still closes.
+     */
+    close: () => void;
 }
 /**
  * Keeps React's `open` and a `<dialog>`'s own idea of it from drifting apart,
@@ -17,8 +30,8 @@ export interface Modality<E extends HTMLDialogElement> {
  *
  * `showModal()` is the whole mechanism: top layer, focus trap, `inert` on the
  * rest of the page, scrim, Escape and focus restoration all come from it. This
- * hook opens and closes the element, reports the closes React did not start,
- * and turns a refused dismissal into the `data-deny` animation.
+ * hook opens and closes the element, reports every transition the DOM actually
+ * made, and turns a refused dismissal into the `data-deny` animation.
  *
  * There is no document-level key listener on purpose: Escape arrives as the
  * `cancel` event, and a popup inside the dialog consumes its own Escape first.

package/lib/use-modality.js

@@ -16,34 +16,39 @@ function o() {
 	document.documentElement.style.setProperty("--huaira-modality-scrollbar-comp", `${e}px`);
 }
 function s(r) {
-	let i = e(10), { open: s, onOpenChange: c, dismissible: l } = r, u = n(null), d = n(s), f = n(c), p = n(l), m;
-	i[0] !== l || i[1] !== c || i[2] !== s ? (m = () => {
-		d.current = s, f.current = c, p.current = l;
-	}, i[0] = l, i[1] = c, i[2] = s, i[3] = m) : m = i[3], t(m);
-	let h, g;
-	i[4] === Symbol.for("react.memo_cache_sentinel") ? (h = () => {
+	let i = e(9), { open: s, onOpenChange: c, dismissible: l } = r, u = n(null), d = n(c), f = n(l), p;
+	i[0] !== l || i[1] !== c ? (p = () => {
+		d.current = c, f.current = l;
+	}, i[0] = l, i[1] = c, i[2] = p) : p = i[2], t(p);
+	let m, h;
+	i[3] === Symbol.for("react.memo_cache_sentinel") ? (m = () => {
 		let e = u.current;
 		if (e === null) return;
 		let t = (t) => {
-			p.current || (t.preventDefault(), a(e));
+			f.current || (t.preventDefault(), a(e));
 		}, n = () => {
-			d.current && f.current(!1);
+			d.current(!1);
 		}, r = (t) => {
 			if (t.target !== e) return;
 			let n = e.getBoundingClientRect(), { clientX: r, clientY: i } = t;
-			n.width > 0 && n.height > 0 && r >= n.left && r <= n.right && i >= n.top && i <= n.bottom || (p.current ? e.close() : a(e));
+			n.width > 0 && n.height > 0 && r >= n.left && r <= n.right && i >= n.top && i <= n.bottom || (f.current ? e.close() : a(e));
 		};
 		return e.addEventListener("cancel", t), e.addEventListener("close", n), e.addEventListener("click", r), () => {
 			e.removeEventListener("cancel", t), e.removeEventListener("close", n), e.removeEventListener("click", r), e.open && e.close();
 		};
-	}, g = [], i[4] = h, i[5] = g) : (h = i[4], g = i[5]), t(h, g);
-	let _, v;
-	i[6] === s ? (_ = i[7], v = i[8]) : (_ = () => {
+	}, h = [], i[3] = m, i[4] = h) : (m = i[3], h = i[4]), t(m, h);
+	let g, _;
+	i[5] === s ? (g = i[6], _ = i[7]) : (g = () => {
 		let e = u.current;
-		e === null || typeof e.showModal != "function" || !e.isConnected || (s && !e.open ? (o(), e.showModal()) : !s && e.open && e.close());
-	}, v = [s], i[6] = s, i[7] = _, i[8] = v), t(_, v);
-	let y;
-	return i[9] === Symbol.for("react.memo_cache_sentinel") ? (y = { ref: u }, i[9] = y) : y = i[9], y;
+		e === null || typeof e.showModal != "function" || !e.isConnected || (s && !e.open ? (o(), e.showModal(), d.current(!0)) : !s && e.open && e.close());
+	}, _ = [s], i[5] = s, i[6] = g, i[7] = _), t(g, _);
+	let v;
+	return i[8] === Symbol.for("react.memo_cache_sentinel") ? (v = {
+		ref: u,
+		close: () => {
+			u.current?.close();
+		}
+	}, i[8] = v) : v = i[8], v;
 }
 //#endregion
 export { s as useModality };

package/lib/use-modality.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-modality.js","names":["RefObject","useEffect","useRef","ModalityOptions","open","onOpenChange","dismissible","Modality","HTMLDialogElement","ref","E","DENY_ATTRIBUTE","clearDeny","event","Event","element","currentTarget","HTMLElement","target","removeAttribute","removeEventListener","deny","offsetWidth","setAttribute","addEventListener","publishScrollbarWidth","document","querySelector","width","window","innerWidth","documentElement","clientWidth","style","setProperty","useModality","t0","$","_c","openRef","onOpenChangeRef","dismissibleRef","t1","current","t2","t3","Symbol","for","handleCancel","preventDefault","handleClose","handleClick","event_0","box","getBoundingClientRect","clientX","clientY","MouseEvent","inSurface","height","left","right","top","bottom","close","t4","t5","element_0","showModal","isConnected","t6"],"sources":["../../src/lib/use-modality.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef } from \"react\";\n\nexport interface ModalityOptions {\n  /** React's idea of whether the dialog is open. */\n  open: boolean;\n  /** Called when the dialog closed or opened on its own. */\n  onOpenChange: (open: boolean) => void;\n  /** False refuses Escape and the backdrop, and shakes the surface instead. */\n  dismissible: boolean;\n}\n\nexport interface Modality<E extends HTMLDialogElement> {\n  /** Attach to the dialog element; merge it with your own ref. */\n  ref: RefObject<E | null>;\n}\n\n/** Presence attribute, written on the element and read by modality.css. */\nconst DENY_ATTRIBUTE = \"data-deny\";\n\nfunction clearDeny(event: Event): void {\n  const element = event.currentTarget;\n  // Animations inside the dialog bubble up here too; only the surface's own\n  // shake ends the refusal.\n  if (!(element instanceof HTMLElement) || event.target !== element) {\n    return;\n  }\n  element.removeAttribute(DENY_ATTRIBUTE);\n  element.removeEventListener(\"animationend\", clearDeny);\n}\n\n/**\n * Marks the dialog as refusing a dismissal. A DOM write rather than state:\n * re-rendering the surface would disturb whatever the user is doing inside.\n * The animation clears the mark again under reduced motion too — modality.css\n * swaps the keyframes for a still one, so `animationend` always arrives.\n * Without the stylesheet (`unstyled`, or styles.css not loaded) no animation\n * starts and the attribute simply stays until the next refusal: it is inert\n * data there, and a consumer animation ending on the root clears it the same\n * way.\n */\nfunction deny(element: HTMLDialogElement): void {\n  element.removeAttribute(DENY_ATTRIBUTE);\n  // Reading a layout box is the point here, not the value: it flushes the\n  // removal, so a second refusal replays the shake (tabs.tsx reads the same).\n  if (element.offsetWidth >= 0) {\n    element.setAttribute(DENY_ATTRIBUTE, \"\");\n  }\n  // The same function twice is one listener in the DOM, so refusals never\n  // stack; it takes itself off once the animation it belongs to has ended.\n  element.addEventListener(\"animationend\", clearDeny);\n}\n\n/**\n * Publishes the classic scrollbar's width as `--huaira-modality-scrollbar-comp`\n * on the root element, which modality.css reads to compensate the drawer's\n * scroll lock. The lock takes the root scrollbar away and no CSS can know how\n * wide it was, so this is the one thing the native-first ladder leaves to\n * JavaScript here: a measurement. Modal reserves the space with\n * `scrollbar-gutter` instead; a drawer cannot, because the reservation narrows\n * the top layer's containing block (backlog.port-order.md, row 20).\n *\n * The knob is public because padding on the root element cannot reach a\n * `position: fixed` consumer element, which sizes against the viewport: a site\n * with a fixed toolbar reads this value and compensates its own bar. The\n * drawer page documents that use.\n *\n * Nothing is written while a modal dialog is already open: the lock has\n * already removed the scrollbar, so the reading would be a false 0 that\n * overwrote the right value when a second surface opens over the first. The\n * property is never removed either — it is inert once the `:has()` lock stops\n * matching, and the next open with no lock measures it again.\n */\nfunction publishScrollbarWidth(): void {\n  if (document.querySelector(\":modal\") !== null) {\n    return;\n  }\n  const width = window.innerWidth - document.documentElement.clientWidth;\n  document.documentElement.style.setProperty(\n    \"--huaira-modality-scrollbar-comp\",\n    `${width}px`,\n  );\n}\n\n/**\n * Keeps React's `open` and a `<dialog>`'s own idea of it from drifting apart,\n * and owns the three events the platform raises around a modal dialog.\n *\n * `showModal()` is the whole mechanism: top layer, focus trap, `inert` on the\n * rest of the page, scrim, Escape and focus restoration all come from it. This\n * hook opens and closes the element, reports the closes React did not start,\n * and turns a refused dismissal into the `data-deny` animation.\n *\n * There is no document-level key listener on purpose: Escape arrives as the\n * `cancel` event, and a popup inside the dialog consumes its own Escape first.\n */\nexport function useModality<E extends HTMLDialogElement>({\n  open,\n  onOpenChange,\n  dismissible,\n}: ModalityOptions): Modality<E> {\n  const ref = useRef<E | null>(null);\n  const openRef = useRef(open);\n  const onOpenChangeRef = useRef(onOpenChange);\n  const dismissibleRef = useRef(dismissible);\n\n  // Latest values for the listeners below, written in an effect and never\n  // during render: a render-time ref write bails the React Compiler out.\n  useEffect(() => {\n    openRef.current = open;\n    onOpenChangeRef.current = onOpenChange;\n    dismissibleRef.current = dismissible;\n  });\n\n  // Declared before the reconcile effect so the listeners are attached before\n  // the first `showModal`, and so their cleanup runs before the close below:\n  // a dialog taken down while open must not report a close nobody asked for.\n  useEffect(() => {\n    const element = ref.current;\n    if (element === null) {\n      return;\n    }\n\n    // Arrows rather than declarations: a hoisted function is analysed before\n    // the null check above, so it would lose that narrowing (tabs.tsx).\n    const handleCancel = (event: Event) => {\n      if (dismissibleRef.current) {\n        return;\n      }\n      // The platform's Escape path. Cancelling it leaves the dialog open, and\n      // the shake is the answer the user gets.\n      event.preventDefault();\n      deny(element);\n    };\n\n    const handleClose = () => {\n      if (openRef.current) {\n        onOpenChangeRef.current(false);\n      }\n    };\n\n    const handleClick = (event: Event) => {\n      // A backdrop click targets the dialog element itself, but so does a\n      // click on any surface the rows leave uncovered — the block drawer\n      // sides keep their own gutters beside the centred column. Only a point\n      // outside the border box is the backdrop. A zero-size box (jsdom) keeps\n      // the target check alone.\n      if (event.target !== element) {\n        return;\n      }\n      const box = element.getBoundingClientRect();\n      const { clientX, clientY } = event as MouseEvent;\n      const inSurface =\n        box.width > 0 &&\n        box.height > 0 &&\n        clientX >= box.left &&\n        clientX <= box.right &&\n        clientY >= box.top &&\n        clientY <= box.bottom;\n      if (inSurface) {\n        return;\n      }\n      if (dismissibleRef.current) {\n        element.close();\n      } else {\n        deny(element);\n      }\n    };\n\n    element.addEventListener(\"cancel\", handleCancel);\n    element.addEventListener(\"close\", handleClose);\n    element.addEventListener(\"click\", handleClick);\n    return () => {\n      element.removeEventListener(\"cancel\", handleCancel);\n      element.removeEventListener(\"close\", handleClose);\n      element.removeEventListener(\"click\", handleClick);\n      // The top layer does not clean itself up when React drops the element.\n      if (element.open) {\n        element.close();\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    const element = ref.current;\n    if (\n      element === null ||\n      typeof element.showModal !== \"function\" ||\n      !element.isConnected\n    ) {\n      return;\n    }\n    // Reconcile against the DOM: `showModal` on an open dialog throws\n    // InvalidStateError, and Escape can have closed it already.\n    if (open && !element.open) {\n      publishScrollbarWidth();\n      element.showModal();\n    } else if (!open && element.open) {\n      element.close();\n    }\n  }, [open]);\n\n  return { ref };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-modality.js","names":["RefObject","useEffect","useRef","ModalityOptions","open","onOpenChange","dismissible","Modality","HTMLDialogElement","ref","E","close","DENY_ATTRIBUTE","clearDeny","event","Event","element","currentTarget","HTMLElement","target","removeAttribute","removeEventListener","deny","offsetWidth","setAttribute","addEventListener","publishScrollbarWidth","document","querySelector","width","window","innerWidth","documentElement","clientWidth","style","setProperty","useModality","t0","$","_c","onOpenChangeRef","dismissibleRef","t1","current","t2","t3","Symbol","for","handleCancel","preventDefault","handleClose","handleClick","event_0","box","getBoundingClientRect","clientX","clientY","MouseEvent","inSurface","height","left","right","top","bottom","t4","t5","element_0","showModal","isConnected","t6"],"sources":["../../src/lib/use-modality.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef } from \"react\";\n\nexport interface ModalityOptions {\n  /** React's idea of whether the dialog is open. */\n  open: boolean;\n  /**\n   * Called once with the state the dialog has actually reached, from the\n   * `showModal()` that opened it and from its own `close` event. Every path\n   * ends there — Escape, the backdrop, a `form method=\"dialog\"`, the consumer\n   * flipping `open` — so a caller reports each transition exactly once and\n   * never has to tell them apart.\n   */\n  onOpenChange: (open: boolean) => void;\n  /** False refuses Escape and the backdrop, and shakes the surface instead. */\n  dismissible: boolean;\n}\n\nexport interface Modality<E extends HTMLDialogElement> {\n  /** Attach to the dialog element; merge it with your own ref. */\n  ref: RefObject<E | null>;\n  /**\n   * Closes the dialog through the platform rather than through React, which\n   * is what a close button calls: the `close` event is then the single place\n   * the transition is reported, and a controlled surface whose consumer has\n   * not moved `open` yet still closes.\n   */\n  close: () => void;\n}\n\n/** Presence attribute, written on the element and read by modality.css. */\nconst DENY_ATTRIBUTE = \"data-deny\";\n\nfunction clearDeny(event: Event): void {\n  const element = event.currentTarget;\n  // Animations inside the dialog bubble up here too; only the surface's own\n  // shake ends the refusal.\n  if (!(element instanceof HTMLElement) || event.target !== element) {\n    return;\n  }\n  element.removeAttribute(DENY_ATTRIBUTE);\n  element.removeEventListener(\"animationend\", clearDeny);\n}\n\n/**\n * Marks the dialog as refusing a dismissal. A DOM write rather than state:\n * re-rendering the surface would disturb whatever the user is doing inside.\n * The animation clears the mark again under reduced motion too — modality.css\n * swaps the keyframes for a still one, so `animationend` always arrives.\n * Without the stylesheet (`unstyled`, or styles.css not loaded) no animation\n * starts and the attribute simply stays until the next refusal: it is inert\n * data there, and a consumer animation ending on the root clears it the same\n * way.\n */\nfunction deny(element: HTMLDialogElement): void {\n  element.removeAttribute(DENY_ATTRIBUTE);\n  // Reading a layout box is the point here, not the value: it flushes the\n  // removal, so a second refusal replays the shake (tabs.tsx reads the same).\n  if (element.offsetWidth >= 0) {\n    element.setAttribute(DENY_ATTRIBUTE, \"\");\n  }\n  // The same function twice is one listener in the DOM, so refusals never\n  // stack; it takes itself off once the animation it belongs to has ended.\n  element.addEventListener(\"animationend\", clearDeny);\n}\n\n/**\n * Publishes the classic scrollbar's width as `--huaira-modality-scrollbar-comp`\n * on the root element, which modality.css reads to compensate the drawer's\n * scroll lock. The lock takes the root scrollbar away and no CSS can know how\n * wide it was, so this is the one thing the native-first ladder leaves to\n * JavaScript here: a measurement. Modal reserves the space with\n * `scrollbar-gutter` instead; a drawer cannot, because the reservation narrows\n * the top layer's containing block (backlog.port-order.md, row 20).\n *\n * The knob is public because padding on the root element cannot reach a\n * `position: fixed` consumer element, which sizes against the viewport: a site\n * with a fixed toolbar reads this value and compensates its own bar. The\n * drawer page documents that use.\n *\n * Nothing is written while a modal dialog is already open: the lock has\n * already removed the scrollbar, so the reading would be a false 0 that\n * overwrote the right value when a second surface opens over the first. The\n * property is never removed either — it is inert once the `:has()` lock stops\n * matching, and the next open with no lock measures it again.\n */\nfunction publishScrollbarWidth(): void {\n  if (document.querySelector(\":modal\") !== null) {\n    return;\n  }\n  const width = window.innerWidth - document.documentElement.clientWidth;\n  document.documentElement.style.setProperty(\n    \"--huaira-modality-scrollbar-comp\",\n    `${width}px`,\n  );\n}\n\n/**\n * Keeps React's `open` and a `<dialog>`'s own idea of it from drifting apart,\n * and owns the three events the platform raises around a modal dialog.\n *\n * `showModal()` is the whole mechanism: top layer, focus trap, `inert` on the\n * rest of the page, scrim, Escape and focus restoration all come from it. This\n * hook opens and closes the element, reports every transition the DOM actually\n * made, and turns a refused dismissal into the `data-deny` animation.\n *\n * There is no document-level key listener on purpose: Escape arrives as the\n * `cancel` event, and a popup inside the dialog consumes its own Escape first.\n */\nexport function useModality<E extends HTMLDialogElement>({\n  open,\n  onOpenChange,\n  dismissible,\n}: ModalityOptions): Modality<E> {\n  const ref = useRef<E | null>(null);\n  const onOpenChangeRef = useRef(onOpenChange);\n  const dismissibleRef = useRef(dismissible);\n\n  // Latest values for the listeners below, written in an effect and never\n  // during render: a render-time ref write bails the React Compiler out.\n  useEffect(() => {\n    onOpenChangeRef.current = onOpenChange;\n    dismissibleRef.current = dismissible;\n  });\n\n  // Declared before the reconcile effect so the listeners are attached before\n  // the first `showModal`, and so their cleanup runs before the close below:\n  // a dialog taken down while open must not report a close nobody asked for.\n  useEffect(() => {\n    const element = ref.current;\n    if (element === null) {\n      return;\n    }\n\n    // Arrows rather than declarations: a hoisted function is analysed before\n    // the null check above, so it would lose that narrowing (tabs.tsx).\n    const handleCancel = (event: Event) => {\n      if (dismissibleRef.current) {\n        return;\n      }\n      // The platform's Escape path. Cancelling it leaves the dialog open, and\n      // the shake is the answer the user gets.\n      event.preventDefault();\n      deny(element);\n    };\n\n    // Unconditional: the event fires for the closes React started and for the\n    // ones it did not, and both are the same transition to a caller. The\n    // cleanup below takes this listener off before it closes the element, so\n    // an unmount reports nothing.\n    const handleClose = () => {\n      onOpenChangeRef.current(false);\n    };\n\n    const handleClick = (event: Event) => {\n      // A backdrop click targets the dialog element itself, but so does a\n      // click on any surface the rows leave uncovered — the block drawer\n      // sides keep their own gutters beside the centred column. Only a point\n      // outside the border box is the backdrop. A zero-size box (jsdom) keeps\n      // the target check alone.\n      if (event.target !== element) {\n        return;\n      }\n      const box = element.getBoundingClientRect();\n      const { clientX, clientY } = event as MouseEvent;\n      const inSurface =\n        box.width > 0 &&\n        box.height > 0 &&\n        clientX >= box.left &&\n        clientX <= box.right &&\n        clientY >= box.top &&\n        clientY <= box.bottom;\n      if (inSurface) {\n        return;\n      }\n      if (dismissibleRef.current) {\n        element.close();\n      } else {\n        deny(element);\n      }\n    };\n\n    element.addEventListener(\"cancel\", handleCancel);\n    element.addEventListener(\"close\", handleClose);\n    element.addEventListener(\"click\", handleClick);\n    return () => {\n      element.removeEventListener(\"cancel\", handleCancel);\n      element.removeEventListener(\"close\", handleClose);\n      element.removeEventListener(\"click\", handleClick);\n      // The top layer does not clean itself up when React drops the element.\n      if (element.open) {\n        element.close();\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    const element = ref.current;\n    if (\n      element === null ||\n      typeof element.showModal !== \"function\" ||\n      !element.isConnected\n    ) {\n      return;\n    }\n    // Reconcile against the DOM: `showModal` on an open dialog throws\n    // InvalidStateError, and Escape can have closed it already.\n    if (open && !element.open) {\n      publishScrollbarWidth();\n      element.showModal();\n      // The one transition with no event of its own: a dialog never opens by\n      // itself, so this is where an open is reported from.\n      onOpenChangeRef.current(true);\n    } else if (!open && element.open) {\n      element.close();\n    }\n  }, [open]);\n\n  return {\n    ref,\n    close: () => {\n      ref.current?.close();\n    },\n  };\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "huaira-ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "React 19 components with a CSS-custom-property design system: a theme is a block of CSS, the styling API works on hand-written markup, and every field is wired to react-hook-form.",
   "keywords": [
     "react",