@stackone/malachite 2.25.1 → 2.27.0

package/dist/components/Surface.js

@@ -1,154 +1,205 @@
-import { jsx as o, jsxs as C } from "react/jsx-runtime";
-import { FOCUS_RING_INSET as $ } from "./focusRing.js";
-import { isRenderableNode as k } from "./renderableNode.js";
-import { FOREGROUND_RESET as D, SELECTED_TEXT_CONTEXT as j, SELECTED_ROW_ACCENT as F, SELECTED_ROW_FOREGROUND as A, SELECTED_ROW_BACKGROUND as y } from "./selectedRow.js";
-const G = {
+import { jsx as e, jsxs as R } from "react/jsx-runtime";
+import A from "react";
+import { DisclosureArrow as j } from "./DisclosureArrow.js";
+import { FOCUS_RING_INSET as _ } from "./focusRing.js";
+import { isRenderableNode as F } from "./renderableNode.js";
+import { FOREGROUND_RESET as I, SELECTED_TEXT_CONTEXT as G, SELECTED_ROW_ACCENT as P, SELECTED_ROW_FOREGROUND as U, SELECTED_ROW_BACKGROUND as y } from "./selectedRow.js";
+const W = {
   default: "",
   muted: "bg-[var(--malachite-card-dimmed-background)]",
   success: "bg-[var(--malachite-tag-success-background)]",
   error: "bg-[var(--malachite-tag-error-background)]"
-}, U = {
+}, B = {
   success: "var(--malachite-tag-success-foreground)",
   error: "var(--malachite-tag-error-foreground)"
-}, I = "0px 0px 4px 0px rgba(0,0,0,0.08), 0px 4px 4px 0px rgba(0,0,0,0.08), 0px 4px 10px 0px rgba(0,0,0,0.05)", W = ({
+}, X = "0px 0px 4px 0px rgba(0,0,0,0.08), 0px 4px 4px 0px rgba(0,0,0,0.08), 0px 4px 10px 0px rgba(0,0,0,0.05)", C = ({
   children: t,
-  divider: p = !1,
+  divider: n = !1,
   disabled: a = !1,
-  onClick: e,
+  onClick: r,
   href: l,
   selected: c,
   selection: b,
   trailing: u,
-  tone: m = "default",
-  role: r,
-  "aria-label": n,
-  "aria-labelledby": i,
-  className: E = "",
-  style: R
+  tone: p = "default",
+  role: o,
+  "aria-label": i,
+  "aria-labelledby": s,
+  className: d = "",
+  style: v
 }) => {
-  const f = !!(e || l), w = a && f ? "" : "transition-colors hover:bg-[var(--malachite-buttonlist-hover-background)]", O = m !== "default", S = [
+  const g = !!(r || l), k = a && g ? "" : "transition-colors hover:bg-[var(--malachite-buttonlist-hover-background)]", $ = p !== "default", S = [
     "w-full text-left border-0",
-    G[m],
-    p ? "border-b border-solid border-[var(--malachite-card-border)]" : "",
-    w
-  ].filter(Boolean).join(" "), v = [
-    f ? `appearance-none ${O ? "" : "bg-transparent"} p-0 ${$}` : "",
-    f && !a ? "cursor-pointer" : ""
-  ].filter(Boolean).join(" "), h = [S, v, E].filter(Boolean).join(" "), T = c && (b ? b === "highlight" : r !== "checkbox") ? {
+    W[p],
+    n ? "border-b border-solid border-[var(--malachite-card-border)]" : "",
+    k
+  ].filter(Boolean).join(" "), h = [
+    g ? `appearance-none ${$ ? "" : "bg-transparent"} p-0 ${_}` : "",
+    g && !a ? "cursor-pointer" : ""
+  ].filter(Boolean).join(" "), E = [S, h, d].filter(Boolean).join(" "), T = c && (b ? b === "highlight" : o !== "checkbox") ? {
     backgroundImage: `linear-gradient(${y}, ${y})`,
-    color: A,
-    boxShadow: `inset 2px 0 0 ${F}`,
-    ...j
-  } : {}, g = U[m], x = { ...g ? {
-    color: g,
-    "--malachite-ctx-text-primary": g
-  } : {}, ...T, ...R }, s = r === "radio" || r === "checkbox" ? !!c : void 0, d = s === void 0 && c ? !0 : void 0, N = {
-    role: r,
-    "aria-checked": s,
-    "aria-current": d,
-    "aria-label": n,
-    "aria-labelledby": i,
-    "aria-disabled": r && a ? !0 : void 0
+    color: U,
+    boxShadow: `inset 2px 0 0 ${P}`,
+    ...G
+  } : {}, N = B[p], x = { ...N ? {
+    color: N,
+    "--malachite-ctx-text-primary": N
+  } : {}, ...T, ...v }, m = o === "radio" || o === "checkbox" ? !!c : void 0, f = m === void 0 && c ? !0 : void 0, w = {
+    role: o,
+    "aria-checked": m,
+    "aria-current": f,
+    "aria-label": i,
+    "aria-labelledby": s,
+    "aria-disabled": o && a ? !0 : void 0
   };
-  if (k(u)) {
-    const _ = l && !a ? /* @__PURE__ */ o(
+  if (F(u)) {
+    const D = l && !a ? /* @__PURE__ */ e(
       "a",
       {
         href: l,
-        onClick: e,
-        className: `${v} border-0 flex-1 min-w-0 text-left no-underline text-inherit`,
-        role: r,
-        "aria-checked": s,
-        "aria-current": d,
-        "aria-label": n,
-        "aria-labelledby": i,
+        onClick: r,
+        className: `${h} border-0 flex-1 min-w-0 text-left no-underline text-inherit`,
+        role: o,
+        "aria-checked": m,
+        "aria-current": f,
+        "aria-label": i,
+        "aria-labelledby": s,
         children: t
       }
-    ) : e ? /* @__PURE__ */ o(
+    ) : r ? /* @__PURE__ */ e(
       "button",
       {
         type: "button",
-        onClick: e,
+        onClick: r,
         disabled: a,
-        className: `${v} border-0 flex-1 min-w-0 text-left`,
-        role: r,
-        "aria-checked": s,
-        "aria-current": d,
-        "aria-label": n,
-        "aria-labelledby": i,
+        className: `${h} border-0 flex-1 min-w-0 text-left`,
+        role: o,
+        "aria-checked": m,
+        "aria-current": f,
+        "aria-label": i,
+        "aria-labelledby": s,
         children: t
       }
     ) : (
       // The set goes here, not on the wrapper: `radio` and `checkbox` make their
       // descendants presentational, which would bury a control in the trailing slot.
-      /* @__PURE__ */ o("div", { className: "flex-1 min-w-0", ...N, children: t })
+      /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", ...w, children: t })
     );
-    return /* @__PURE__ */ C(
+    return /* @__PURE__ */ R(
       "div",
       {
-        className: [S, "flex items-center", E].filter(Boolean).join(" "),
+        className: [S, "flex items-center", d].filter(Boolean).join(" "),
         style: x,
         children: [
-          _,
-          /* @__PURE__ */ o("div", { className: "shrink-0 flex items-center", children: u })
+          D,
+          /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center", children: u })
         ]
       }
     );
   }
-  return l && !a ? /* @__PURE__ */ o(
+  return l && !a ? /* @__PURE__ */ e(
     "a",
     {
       href: l,
-      onClick: e,
-      className: `${h} no-underline text-inherit`,
+      onClick: r,
+      className: `${E} no-underline text-inherit`,
       style: x,
-      role: r,
-      "aria-checked": s,
-      "aria-current": d,
-      "aria-label": n,
-      "aria-labelledby": i,
+      role: o,
+      "aria-checked": m,
+      "aria-current": f,
+      "aria-label": i,
+      "aria-labelledby": s,
       children: t
     }
-  ) : e ? /* @__PURE__ */ o(
+  ) : r ? /* @__PURE__ */ e(
     "button",
     {
       type: "button",
-      onClick: e,
+      onClick: r,
       disabled: a,
-      className: h,
+      className: E,
       style: x,
-      role: r,
-      "aria-checked": s,
-      "aria-current": d,
-      "aria-label": n,
-      "aria-labelledby": i,
+      role: o,
+      "aria-checked": m,
+      "aria-current": f,
+      "aria-label": i,
+      "aria-labelledby": s,
       children: t
     }
-  ) : /* @__PURE__ */ o("div", { className: h, style: x, ...N, children: t });
-}, B = ({
+  ) : /* @__PURE__ */ e("div", { className: E, style: x, ...w, children: t });
+}, z = ({ children: t, className: n = "", style: a }) => /* @__PURE__ */ e("div", { className: n, style: a, onClick: (r) => r.stopPropagation(), children: t }), aa = 39, H = Object.assign(
+  ({
+    header: t,
+    children: n,
+    expanded: a,
+    onToggle: r,
+    sticky: l = !1,
+    stickyTopOffset: c = 0,
+    divider: b = !1,
+    tone: u = "default",
+    "aria-label": p,
+    className: o = "",
+    style: i
+  }) => {
+    const s = A.useId(), d = r ? () => r(!a) : void 0;
+    return /* @__PURE__ */ R(C, { divider: b, tone: u, className: o, style: i, children: [
+      /* @__PURE__ */ R(
+        "div",
+        {
+          className: `group flex items-center w-full ${d ? "cursor-pointer" : ""} ${l && a ? "sticky z-[1] bg-[var(--malachite-card-background)]" : ""}`,
+          style: l && a ? { top: c } : void 0,
+          onClick: d,
+          role: "presentation",
+          children: [
+            /* @__PURE__ */ e("span", { className: "shrink-0 flex items-center pl-[16px] pr-[12px]", children: d && /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: `appearance-none bg-transparent border-0 p-0 flex items-center cursor-pointer ${_}`,
+                "aria-expanded": a,
+                "aria-controls": s,
+                "aria-label": p,
+                onClick: (v) => {
+                  v.stopPropagation(), d();
+                },
+                children: /* @__PURE__ */ e(j, { expanded: a })
+              }
+            ) }),
+            t
+          ]
+        }
+      ),
+      a && /* @__PURE__ */ e("div", { id: s, children: n })
+    ] });
+  },
+  { Controls: z }
+), O = ({
   children: t,
-  padding: p = !1,
+  padding: n = !1,
   overflow: a = "hidden",
-  role: e,
+  role: r,
   "aria-label": l,
   "aria-labelledby": c,
   className: b = "",
   style: u
-}) => /* @__PURE__ */ o(
+}) => /* @__PURE__ */ e(
   "div",
   {
-    className: `w-full rounded-[var(--malachite-radius-xxl,14px)] ${a === "clip" ? "overflow-clip" : a === "visible" ? "overflow-visible" : "overflow-hidden"} bg-[var(--malachite-card-background)] border border-solid border-[var(--malachite-card-border)] ${p ? "py-3 px-4" : ""} ${b}`,
-    style: { boxShadow: I, ...D, ...u },
-    role: e,
+    className: `w-full rounded-[var(--malachite-radius-xxl,14px)] ${a === "clip" ? "overflow-clip" : a === "visible" ? "overflow-visible" : "overflow-hidden"} bg-[var(--malachite-card-background)] border border-solid border-[var(--malachite-card-border)] ${n ? "py-3 px-4" : ""} ${b}`,
+    style: { boxShadow: X, ...I, ...u },
+    role: r,
     "aria-label": l,
     "aria-labelledby": c,
     children: t
   }
 );
-B.Row = W;
+O.Row = C;
+O.ExpandableRow = H;
 export {
-  B as Surface,
-  W as SurfaceRow,
-  B as default
+  aa as EXPANDABLE_ROW_LEAD_PX,
+  O as Surface,
+  H as SurfaceExpandableRow,
+  C as SurfaceRow,
+  O as default
 };
 //# sourceMappingURL=Surface.js.map

package/dist/components/Surface.js.map

@@ -1 +1 @@
-{"version":3,"file":"Surface.js","sources":["../../src/components/Surface.tsx"],"sourcesContent":["import React from 'react';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { isRenderableNode } from './renderableNode';\nimport {\n    FOREGROUND_RESET,\n    SELECTED_ROW_ACCENT,\n    SELECTED_ROW_BACKGROUND,\n    SELECTED_ROW_FOREGROUND,\n    SELECTED_TEXT_CONTEXT,\n} from './selectedRow';\n\nexport interface SurfaceProps {\n    children?: React.ReactNode;\n    padding?: boolean;\n    /**\n     * Content overflow. Defaults to `hidden` so children are clipped to the rounded\n     * corners. Use `clip` to keep the rounded clipping WITHOUT creating a scroll\n     * container — so a `position: sticky` descendant still pins (unlike `hidden`,\n     * which traps it). `visible` disables clipping entirely.\n     */\n    overflow?: 'hidden' | 'visible' | 'clip';\n    role?: React.AriaRole;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nexport interface SurfaceRowProps {\n    children?: React.ReactNode;\n    /** Renders a bottom divider — omit on the last row in a Surface. */\n    divider?: boolean;\n    /** Removes the hover affordance / disables the control (e.g. while loading/busy). */\n    disabled?: boolean;\n    /**\n     * When provided, the whole row becomes clickable: it renders as a `<button>`\n     * (or `<a>` when `href` is set), so the entire row is the click target with\n     * native focus + Enter/Space — no manual tabIndex/key handlers. For a\n     * selectable row, put a presentational `<Radio>`/`<Checkbox>` inside as the\n     * visual indicator; do NOT nest an interactive control (invalid + double tab stop).\n     */\n    onClick?: (event: React.MouseEvent) => void;\n    /** Renders the clickable row as an anchor instead of a button. */\n    href?: string;\n    /** Announces the row as selected — `aria-checked` under a `radio`/`checkbox` role,\n     *  `aria-current` otherwise — and paints `Table`'s selected treatment unless `selection`\n     *  says not to. */\n    selected?: boolean;\n    /** How a `selected` row shows it. `highlight` paints the treatment; `announce` leaves the\n     *  visual to a control inside the row and only sets the ARIA state. Defaults to `announce`\n     *  under `role=\"checkbox\"` and `highlight` otherwise. */\n    selection?: 'highlight' | 'announce';\n    /** Content pinned right, outside the row button, so it may hold its own control. */\n    trailing?: React.ReactNode;\n    /**\n     * Tints the whole row by what it reports. `muted` is a row whose subject is inactive —\n     * not disabled: it stays interactive. `success` and `error` are for a row that carries\n     * an outcome, where the result belongs to the whole line rather than to one cell in it.\n     */\n    tone?: 'default' | 'muted' | 'success' | 'error';\n    /** ARIA role for a clickable row, e.g. `radio`/`checkbox` (wrap the list in a `radiogroup`). */\n    role?: React.AriaRole;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\n/**\n * The outcome tones reuse the tag tokens rather than minting row ones, so a row saying \"this\n * passed\" and a tag saying it are the same green wherever the two sit together.\n */\nconst TONE_CLASSES: Record<NonNullable<SurfaceRowProps['tone']>, string> = {\n    default: '',\n    muted: 'bg-[var(--malachite-card-dimmed-background)]',\n    success: 'bg-[var(--malachite-tag-success-background)]',\n    error: 'bg-[var(--malachite-tag-error-background)]',\n};\n\n/**\n * The text an outcome tone carries with it, through the same context channel a selected row\n * uses, so `Typography` inside the row follows the tint instead of staying near-black on it.\n * `color` as well, for row content that is not Typography.\n *\n * Only the outcome tones. `muted` dims its subject rather than recolouring it, and its\n * foreground is the ordinary one.\n */\nconst TONE_FOREGROUNDS: Partial<Record<NonNullable<SurfaceRowProps['tone']>, string>> = {\n    success: 'var(--malachite-tag-success-foreground)',\n    error: 'var(--malachite-tag-error-foreground)',\n};\n\nconst TRIPLE_SHADOW =\n    '0px 0px 4px 0px rgba(0,0,0,0.08), 0px 4px 4px 0px rgba(0,0,0,0.08), 0px 4px 10px 0px rgba(0,0,0,0.05)';\n\n/**\n * A single full-bleed row inside a <Surface>. Owns the row chrome — hover\n * highlight, colour transition and an optional bottom divider — so consumers\n * compose their own content inside without re-implementing design-system styling.\n * Pass `onClick`/`href` to make the entire row clickable (rendered as a real\n * button/anchor, so keyboard navigation works natively).\n */\nconst SurfaceRow: React.FC<SurfaceRowProps> = ({\n    children,\n    divider = false,\n    disabled = false,\n    onClick,\n    href,\n    selected,\n    selection,\n    trailing,\n    tone = 'default',\n    role,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n    style,\n}) => {\n    const interactive = Boolean(onClick || href);\n    const hover =\n        disabled && interactive\n            ? ''\n            : 'transition-colors hover:bg-[var(--malachite-buttonlist-hover-background)]';\n\n    // A class, not an inline colour, which would outrank the hover utility. It replaces the\n    // button reset's `bg-transparent` rather than joining it: same specificity, so the winner\n    // would be whichever Tailwind emitted last.\n    const tinted = tone !== 'default';\n    const toneClass = TONE_CLASSES[tone];\n\n    const chromeClasses = [\n        'w-full text-left border-0',\n        toneClass,\n        divider ? 'border-b border-solid border-[var(--malachite-card-border)]' : '',\n        hover,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const controlClasses = [\n        interactive\n            ? `appearance-none ${tinted ? '' : 'bg-transparent'} p-0 ${FOCUS_RING_INSET}`\n            : '',\n        interactive && !disabled ? 'cursor-pointer' : '',\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const classes = [chromeClasses, controlClasses, className].filter(Boolean).join(' ');\n\n    const paints = selection ? selection === 'highlight' : role !== 'checkbox';\n\n    // A gradient layer so the tint composites over hover, and an inset shadow because\n    // `ring-*` silently doesn't paint in a shadow root.\n    const selectedStyle: React.CSSProperties =\n        selected && paints\n            ? {\n                  backgroundImage: `linear-gradient(${SELECTED_ROW_BACKGROUND}, ${SELECTED_ROW_BACKGROUND})`,\n                  color: SELECTED_ROW_FOREGROUND,\n                  boxShadow: `inset 2px 0 0 ${SELECTED_ROW_ACCENT}`,\n                  ...SELECTED_TEXT_CONTEXT,\n              }\n            : {};\n\n    const toneForeground = TONE_FOREGROUNDS[tone];\n    const toneStyle: React.CSSProperties = toneForeground\n        ? ({\n              color: toneForeground,\n              '--malachite-ctx-text-primary': toneForeground,\n          } as React.CSSProperties)\n        : {};\n\n    // `selected` last of the two: a row can be both, and selection is the state the reader is\n    // acting on, so it wins the colour.\n    const rowStyle = { ...toneStyle, ...selectedStyle, ...style };\n\n    const ariaChecked = role === 'radio' || role === 'checkbox' ? Boolean(selected) : undefined;\n    // `aria-current`, not `aria-pressed`: a selected row is one of many choices, not a toggle\n    // (same call as `Dropdown`'s options). A role that carries its own state uses that instead.\n    const ariaCurrent = ariaChecked === undefined && selected ? true : undefined;\n\n    // Everything a control would have carried, for the branches that render none: the row\n    // element is then the only thing assistive tech sees. `aria-disabled` because there is no\n    // control to be natively disabled — and it is inert without a role, like the name.\n    const rowFallbackAria = {\n        role,\n        'aria-checked': ariaChecked,\n        'aria-current': ariaCurrent,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        'aria-disabled': role && disabled ? true : undefined,\n    };\n\n    if (isRenderableNode(trailing)) {\n        const control =\n            href && !disabled ? (\n                <a\n                    href={href}\n                    onClick={onClick}\n                    className={`${controlClasses} border-0 flex-1 min-w-0 text-left no-underline text-inherit`}\n                    role={role}\n                    aria-checked={ariaChecked}\n                    aria-current={ariaCurrent}\n                    aria-label={ariaLabel}\n                    aria-labelledby={ariaLabelledBy}\n                >\n                    {children}\n                </a>\n            ) : onClick ? (\n                <button\n                    type=\"button\"\n                    onClick={onClick}\n                    disabled={disabled}\n                    className={`${controlClasses} border-0 flex-1 min-w-0 text-left`}\n                    role={role}\n                    aria-checked={ariaChecked}\n                    aria-current={ariaCurrent}\n                    aria-label={ariaLabel}\n                    aria-labelledby={ariaLabelledBy}\n                >\n                    {children}\n                </button>\n            ) : (\n                // The set goes here, not on the wrapper: `radio` and `checkbox` make their\n                // descendants presentational, which would bury a control in the trailing slot.\n                <div className=\"flex-1 min-w-0\" {...rowFallbackAria}>\n                    {children}\n                </div>\n            );\n\n        return (\n            <div\n                className={[chromeClasses, 'flex items-center', className]\n                    .filter(Boolean)\n                    .join(' ')}\n                style={rowStyle}\n            >\n                {control}\n                <div className=\"shrink-0 flex items-center\">{trailing}</div>\n            </div>\n        );\n    }\n\n    if (href && !disabled) {\n        return (\n            <a\n                href={href}\n                onClick={onClick}\n                className={`${classes} no-underline text-inherit`}\n                style={rowStyle}\n                role={role}\n                aria-checked={ariaChecked}\n                aria-current={ariaCurrent}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n            >\n                {children}\n            </a>\n        );\n    }\n\n    if (onClick) {\n        return (\n            <button\n                type=\"button\"\n                onClick={onClick}\n                disabled={disabled}\n                className={classes}\n                style={rowStyle}\n                role={role}\n                aria-checked={ariaChecked}\n                aria-current={ariaCurrent}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n            >\n                {children}\n            </button>\n        );\n    }\n\n    return (\n        <div className={classes} style={rowStyle} {...rowFallbackAria}>\n            {children}\n        </div>\n    );\n};\n\ninterface SurfaceComponent extends React.FC<SurfaceProps> {\n    Row: React.FC<SurfaceRowProps>;\n}\n\nconst Surface = (({\n    children,\n    padding = false,\n    overflow = 'hidden',\n    role,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n    style,\n}: SurfaceProps) => {\n    // Literal class names (not interpolated) so Tailwind's JIT emits them.\n    const overflowClass =\n        overflow === 'clip'\n            ? 'overflow-clip'\n            : overflow === 'visible'\n              ? 'overflow-visible'\n              : 'overflow-hidden';\n    return (\n        <div\n            className={`w-full rounded-[var(--malachite-radius-xxl,14px)] ${overflowClass} bg-[var(--malachite-card-background)] border border-solid border-[var(--malachite-card-border)] ${padding ? 'py-3 px-4' : ''} ${className}`}\n            style={{ boxShadow: TRIPLE_SHADOW, ...FOREGROUND_RESET, ...style }}\n            role={role}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n        >\n            {children}\n        </div>\n    );\n}) as SurfaceComponent;\n\nSurface.Row = SurfaceRow;\n\nexport default Surface;\nexport { Surface, SurfaceRow };\n"],"names":["TONE_CLASSES","TONE_FOREGROUNDS","TRIPLE_SHADOW","SurfaceRow","children","divider","disabled","onClick","href","selected","selection","trailing","tone","role","ariaLabel","ariaLabelledBy","className","style","interactive","hover","tinted","chromeClasses","controlClasses","FOCUS_RING_INSET","classes","selectedStyle","SELECTED_ROW_BACKGROUND","SELECTED_ROW_FOREGROUND","SELECTED_ROW_ACCENT","SELECTED_TEXT_CONTEXT","toneForeground","rowStyle","ariaChecked","ariaCurrent","rowFallbackAria","isRenderableNode","control","jsx","jsxs","Surface","padding","overflow","FOREGROUND_RESET"],"mappings":"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"}
+{"version":3,"file":"Surface.js","sources":["../../src/components/Surface.tsx"],"sourcesContent":["import React from 'react';\nimport DisclosureArrow from './DisclosureArrow';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { isRenderableNode } from './renderableNode';\nimport {\n    FOREGROUND_RESET,\n    SELECTED_ROW_ACCENT,\n    SELECTED_ROW_BACKGROUND,\n    SELECTED_ROW_FOREGROUND,\n    SELECTED_TEXT_CONTEXT,\n} from './selectedRow';\n\nexport interface SurfaceProps {\n    children?: React.ReactNode;\n    padding?: boolean;\n    /**\n     * Content overflow. Defaults to `hidden` so children are clipped to the rounded\n     * corners. Use `clip` to keep the rounded clipping WITHOUT creating a scroll\n     * container — so a `position: sticky` descendant still pins (unlike `hidden`,\n     * which traps it). `visible` disables clipping entirely.\n     */\n    overflow?: 'hidden' | 'visible' | 'clip';\n    role?: React.AriaRole;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nexport interface SurfaceRowProps {\n    children?: React.ReactNode;\n    /** Renders a bottom divider — omit on the last row in a Surface. */\n    divider?: boolean;\n    /** Removes the hover affordance / disables the control (e.g. while loading/busy). */\n    disabled?: boolean;\n    /**\n     * When provided, the whole row becomes clickable: it renders as a `<button>`\n     * (or `<a>` when `href` is set), so the entire row is the click target with\n     * native focus + Enter/Space — no manual tabIndex/key handlers. For a\n     * selectable row, put a presentational `<Radio>`/`<Checkbox>` inside as the\n     * visual indicator; do NOT nest an interactive control (invalid + double tab stop).\n     */\n    onClick?: (event: React.MouseEvent) => void;\n    /** Renders the clickable row as an anchor instead of a button. */\n    href?: string;\n    /** Announces the row as selected — `aria-checked` under a `radio`/`checkbox` role,\n     *  `aria-current` otherwise — and paints `Table`'s selected treatment unless `selection`\n     *  says not to. */\n    selected?: boolean;\n    /** How a `selected` row shows it. `highlight` paints the treatment; `announce` leaves the\n     *  visual to a control inside the row and only sets the ARIA state. Defaults to `announce`\n     *  under `role=\"checkbox\"` and `highlight` otherwise. */\n    selection?: 'highlight' | 'announce';\n    /** Content pinned right, outside the row button, so it may hold its own control. */\n    trailing?: React.ReactNode;\n    /**\n     * Tints the whole row by what it reports. `muted` is a row whose subject is inactive —\n     * not disabled: it stays interactive. `success` and `error` are for a row that carries\n     * an outcome, where the result belongs to the whole line rather than to one cell in it.\n     */\n    tone?: 'default' | 'muted' | 'success' | 'error';\n    /** ARIA role for a clickable row, e.g. `radio`/`checkbox` (wrap the list in a `radiogroup`). */\n    role?: React.AriaRole;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\n/**\n * The outcome tones reuse the tag tokens rather than minting row ones, so a row saying \"this\n * passed\" and a tag saying it are the same green wherever the two sit together.\n */\nconst TONE_CLASSES: Record<NonNullable<SurfaceRowProps['tone']>, string> = {\n    default: '',\n    muted: 'bg-[var(--malachite-card-dimmed-background)]',\n    success: 'bg-[var(--malachite-tag-success-background)]',\n    error: 'bg-[var(--malachite-tag-error-background)]',\n};\n\n/**\n * The text an outcome tone carries with it, through the same context channel a selected row\n * uses, so `Typography` inside the row follows the tint instead of staying near-black on it.\n * `color` as well, for row content that is not Typography.\n *\n * Only the outcome tones. `muted` dims its subject rather than recolouring it, and its\n * foreground is the ordinary one.\n */\nconst TONE_FOREGROUNDS: Partial<Record<NonNullable<SurfaceRowProps['tone']>, string>> = {\n    success: 'var(--malachite-tag-success-foreground)',\n    error: 'var(--malachite-tag-error-foreground)',\n};\n\nconst TRIPLE_SHADOW =\n    '0px 0px 4px 0px rgba(0,0,0,0.08), 0px 4px 4px 0px rgba(0,0,0,0.08), 0px 4px 10px 0px rgba(0,0,0,0.05)';\n\n/**\n * A single full-bleed row inside a <Surface>. Owns the row chrome — hover\n * highlight, colour transition and an optional bottom divider — so consumers\n * compose their own content inside without re-implementing design-system styling.\n * Pass `onClick`/`href` to make the entire row clickable (rendered as a real\n * button/anchor, so keyboard navigation works natively).\n */\nconst SurfaceRow: React.FC<SurfaceRowProps> = ({\n    children,\n    divider = false,\n    disabled = false,\n    onClick,\n    href,\n    selected,\n    selection,\n    trailing,\n    tone = 'default',\n    role,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n    style,\n}) => {\n    const interactive = Boolean(onClick || href);\n    const hover =\n        disabled && interactive\n            ? ''\n            : 'transition-colors hover:bg-[var(--malachite-buttonlist-hover-background)]';\n\n    // A class, not an inline colour, which would outrank the hover utility. It replaces the\n    // button reset's `bg-transparent` rather than joining it: same specificity, so the winner\n    // would be whichever Tailwind emitted last.\n    const tinted = tone !== 'default';\n    const toneClass = TONE_CLASSES[tone];\n\n    const chromeClasses = [\n        'w-full text-left border-0',\n        toneClass,\n        divider ? 'border-b border-solid border-[var(--malachite-card-border)]' : '',\n        hover,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const controlClasses = [\n        interactive\n            ? `appearance-none ${tinted ? '' : 'bg-transparent'} p-0 ${FOCUS_RING_INSET}`\n            : '',\n        interactive && !disabled ? 'cursor-pointer' : '',\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const classes = [chromeClasses, controlClasses, className].filter(Boolean).join(' ');\n\n    const paints = selection ? selection === 'highlight' : role !== 'checkbox';\n\n    // A gradient layer so the tint composites over hover, and an inset shadow because\n    // `ring-*` silently doesn't paint in a shadow root.\n    const selectedStyle: React.CSSProperties =\n        selected && paints\n            ? {\n                  backgroundImage: `linear-gradient(${SELECTED_ROW_BACKGROUND}, ${SELECTED_ROW_BACKGROUND})`,\n                  color: SELECTED_ROW_FOREGROUND,\n                  boxShadow: `inset 2px 0 0 ${SELECTED_ROW_ACCENT}`,\n                  ...SELECTED_TEXT_CONTEXT,\n              }\n            : {};\n\n    const toneForeground = TONE_FOREGROUNDS[tone];\n    const toneStyle: React.CSSProperties = toneForeground\n        ? ({\n              color: toneForeground,\n              '--malachite-ctx-text-primary': toneForeground,\n          } as React.CSSProperties)\n        : {};\n\n    // `selected` last of the two: a row can be both, and selection is the state the reader is\n    // acting on, so it wins the colour.\n    const rowStyle = { ...toneStyle, ...selectedStyle, ...style };\n\n    const ariaChecked = role === 'radio' || role === 'checkbox' ? Boolean(selected) : undefined;\n    // `aria-current`, not `aria-pressed`: a selected row is one of many choices, not a toggle\n    // (same call as `Dropdown`'s options). A role that carries its own state uses that instead.\n    const ariaCurrent = ariaChecked === undefined && selected ? true : undefined;\n\n    // Everything a control would have carried, for the branches that render none: the row\n    // element is then the only thing assistive tech sees. `aria-disabled` because there is no\n    // control to be natively disabled — and it is inert without a role, like the name.\n    const rowFallbackAria = {\n        role,\n        'aria-checked': ariaChecked,\n        'aria-current': ariaCurrent,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        'aria-disabled': role && disabled ? true : undefined,\n    };\n\n    if (isRenderableNode(trailing)) {\n        const control =\n            href && !disabled ? (\n                <a\n                    href={href}\n                    onClick={onClick}\n                    className={`${controlClasses} border-0 flex-1 min-w-0 text-left no-underline text-inherit`}\n                    role={role}\n                    aria-checked={ariaChecked}\n                    aria-current={ariaCurrent}\n                    aria-label={ariaLabel}\n                    aria-labelledby={ariaLabelledBy}\n                >\n                    {children}\n                </a>\n            ) : onClick ? (\n                <button\n                    type=\"button\"\n                    onClick={onClick}\n                    disabled={disabled}\n                    className={`${controlClasses} border-0 flex-1 min-w-0 text-left`}\n                    role={role}\n                    aria-checked={ariaChecked}\n                    aria-current={ariaCurrent}\n                    aria-label={ariaLabel}\n                    aria-labelledby={ariaLabelledBy}\n                >\n                    {children}\n                </button>\n            ) : (\n                // The set goes here, not on the wrapper: `radio` and `checkbox` make their\n                // descendants presentational, which would bury a control in the trailing slot.\n                <div className=\"flex-1 min-w-0\" {...rowFallbackAria}>\n                    {children}\n                </div>\n            );\n\n        return (\n            <div\n                className={[chromeClasses, 'flex items-center', className]\n                    .filter(Boolean)\n                    .join(' ')}\n                style={rowStyle}\n            >\n                {control}\n                <div className=\"shrink-0 flex items-center\">{trailing}</div>\n            </div>\n        );\n    }\n\n    if (href && !disabled) {\n        return (\n            <a\n                href={href}\n                onClick={onClick}\n                className={`${classes} no-underline text-inherit`}\n                style={rowStyle}\n                role={role}\n                aria-checked={ariaChecked}\n                aria-current={ariaCurrent}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n            >\n                {children}\n            </a>\n        );\n    }\n\n    if (onClick) {\n        return (\n            <button\n                type=\"button\"\n                onClick={onClick}\n                disabled={disabled}\n                className={classes}\n                style={rowStyle}\n                role={role}\n                aria-checked={ariaChecked}\n                aria-current={ariaCurrent}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n            >\n                {children}\n            </button>\n        );\n    }\n\n    return (\n        <div className={classes} style={rowStyle} {...rowFallbackAria}>\n            {children}\n        </div>\n    );\n};\n\nexport interface SurfaceExpandableRowProps {\n    /** The row itself, laid out across the line. May hold its own controls. */\n    header: React.ReactNode;\n    /** The body, rendered beneath the row while it is open. */\n    children?: React.ReactNode;\n    expanded: boolean;\n    /** Omit for a row that cannot open. The arrow's space is still reserved, so a list of\n     *  rows stays in one column whether or not each one has a body. */\n    onToggle?: (expanded: boolean) => void;\n    /**\n     * Pins the row while its body scrolls, so a long body never leaves the reader without\n     * the line it belongs to. Offset by whatever is already pinned above it.\n     */\n    sticky?: boolean;\n    stickyTopOffset?: number;\n    divider?: boolean;\n    tone?: SurfaceRowProps['tone'];\n    /** Names the disclosure control, which is otherwise only an arrow. */\n    'aria-label'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\n/**\n * Stops a click inside it from toggling the row, for the cells that hold controls.\n *\n * Explicit rather than sniffing the event's target for an interactive ancestor: a control\n * rendering into a shadow root retargets the event to its host, so the sniff would miss\n * exactly the components most likely to sit in a row.\n */\nconst ExpandableRowControls: React.FC<{\n    children?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n}> = ({ children, className = '', style }) => (\n    <div className={className} style={style} onClick={(event) => event.stopPropagation()}>\n        {children}\n    </div>\n);\n\n/**\n * A row that opens to reveal a body, for a line that carries its own controls.\n *\n * Not `Accordion`: that puts its header inside the toggle button, so a header holding a\n * dropdown or a second button is invalid. Here the row surface takes the click and a cell\n * opts out with `ExpandableRow.Controls`, while the arrow stays a real button so the\n * keyboard reaches it.\n */\n/**\n * The space before the header: the arrow's own inset, its glyph and the gap after it.\n * Exported so a consumer aligning a column header above these rows offsets by the same\n * amount instead of guessing at it.\n */\nexport const EXPANDABLE_ROW_LEAD_PX = 39;\n\nconst SurfaceExpandableRow: React.FC<SurfaceExpandableRowProps> & {\n    Controls: typeof ExpandableRowControls;\n} = Object.assign(\n    ({\n        header,\n        children,\n        expanded,\n        onToggle,\n        sticky = false,\n        stickyTopOffset = 0,\n        divider = false,\n        tone = 'default',\n        'aria-label': ariaLabel,\n        className = '',\n        style,\n    }: SurfaceExpandableRowProps) => {\n        const bodyId = React.useId();\n        const toggle = onToggle ? () => onToggle(!expanded) : undefined;\n\n        return (\n            <SurfaceRow divider={divider} tone={tone} className={className} style={style}>\n                {/* `group` so the arrow takes its hover state from the whole row. */}\n                <div\n                    className={`group flex items-center w-full ${toggle ? 'cursor-pointer' : ''} ${\n                        sticky && expanded\n                            ? 'sticky z-[1] bg-[var(--malachite-card-background)]'\n                            : ''\n                    }`}\n                    style={sticky && expanded ? { top: stickyTopOffset } : undefined}\n                    // Presentational: the arrow below is the keyboard control, and this only\n                    // widens the pointer target.\n                    onClick={toggle}\n                    role=\"presentation\"\n                >\n                    {/* Reserved whether or not this row opens, so a list stays in one column.\n                        The inset and gap match Accordion's header. */}\n                    <span className=\"shrink-0 flex items-center pl-[16px] pr-[12px]\">\n                        {toggle && (\n                            <button\n                                type=\"button\"\n                                className={`appearance-none bg-transparent border-0 p-0 flex items-center cursor-pointer ${FOCUS_RING_INSET}`}\n                                aria-expanded={expanded}\n                                aria-controls={bodyId}\n                                aria-label={ariaLabel}\n                                onClick={(event) => {\n                                    event.stopPropagation();\n                                    toggle();\n                                }}\n                            >\n                                <DisclosureArrow expanded={expanded} />\n                            </button>\n                        )}\n                    </span>\n                    {header}\n                </div>\n                {expanded && <div id={bodyId}>{children}</div>}\n            </SurfaceRow>\n        );\n    },\n    { Controls: ExpandableRowControls },\n);\n\ninterface SurfaceComponent extends React.FC<SurfaceProps> {\n    Row: React.FC<SurfaceRowProps>;\n    ExpandableRow: typeof SurfaceExpandableRow;\n}\n\nconst Surface = (({\n    children,\n    padding = false,\n    overflow = 'hidden',\n    role,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n    style,\n}: SurfaceProps) => {\n    // Literal class names (not interpolated) so Tailwind's JIT emits them.\n    const overflowClass =\n        overflow === 'clip'\n            ? 'overflow-clip'\n            : overflow === 'visible'\n              ? 'overflow-visible'\n              : 'overflow-hidden';\n    return (\n        <div\n            className={`w-full rounded-[var(--malachite-radius-xxl,14px)] ${overflowClass} bg-[var(--malachite-card-background)] border border-solid border-[var(--malachite-card-border)] ${padding ? 'py-3 px-4' : ''} ${className}`}\n            style={{ boxShadow: TRIPLE_SHADOW, ...FOREGROUND_RESET, ...style }}\n            role={role}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n        >\n            {children}\n        </div>\n    );\n}) as SurfaceComponent;\n\nSurface.Row = SurfaceRow;\nSurface.ExpandableRow = SurfaceExpandableRow;\n\nexport default Surface;\nexport { Surface, SurfaceRow, SurfaceExpandableRow };\n"],"names":["TONE_CLASSES","TONE_FOREGROUNDS","TRIPLE_SHADOW","SurfaceRow","children","divider","disabled","onClick","href","selected","selection","trailing","tone","role","ariaLabel","ariaLabelledBy","className","style","interactive","hover","tinted","chromeClasses","controlClasses","FOCUS_RING_INSET","classes","selectedStyle","SELECTED_ROW_BACKGROUND","SELECTED_ROW_FOREGROUND","SELECTED_ROW_ACCENT","SELECTED_TEXT_CONTEXT","toneForeground","rowStyle","ariaChecked","ariaCurrent","rowFallbackAria","isRenderableNode","control","jsx","jsxs","ExpandableRowControls","event","EXPANDABLE_ROW_LEAD_PX","SurfaceExpandableRow","header","expanded","onToggle","sticky","stickyTopOffset","bodyId","React","toggle","DisclosureArrow","Surface","padding","overflow","FOREGROUND_RESET"],"mappings":"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"}

package/dist/index.d.ts

@@ -466,8 +466,13 @@ export declare interface ChangeReviewItemProps {
      * item annotates already carries its own visible heading elsewhere on the page (so the name
      * doesn't render twice) — pass `fieldName` instead, so the badge and actions still know what
      * they belong to.
+     *
+     * A node rather than a string, because a field's heading is not always only its name: one
+     * with an explainer behind an info icon has to hand the whole heading over, or it loses the
+     * icon for as long as it is marked. A node carries no accessible name, so `fieldName` is
+     * required alongside anything that is not a plain string.
      */
-    label?: string;
+    label?: default_2.ReactNode;
     /**
      * Names the field the badge and actions act on, for assistive tech. Defaults to `label`, so
      * passing only `label` keeps working as before. Set it explicitly when `label` is omitted —
@@ -488,6 +493,13 @@ export declare interface ChangeReviewItemProps {
      * describes instead of stacked with the header. Omit it for the standalone card.
      */
     children?: default_2.ReactNode;
+    /**
+     * The caller's own controls for this field, in the header band beside accept and revert.
+     * A capability's Remove belongs to the field rather than to the review, but while the field
+     * is marked the header is the only row its heading has, so without a slot here the button
+     * has nowhere to sit that is not on top of something.
+     */
+    headerActions?: default_2.ReactNode;
     onApprove: () => void;
     onDeny: () => void;
     /**
@@ -1157,6 +1169,22 @@ export declare const DisabledIcon: React.FC<IconProps_33>;
 
 export declare const DisableIcon: React.FC<IconProps_32>;
 
+/**
+ * The expand/collapse triangle used by disclosure UI (Accordion, expandable rows).
+ * Owns its colour states so they never drift between usages: dark
+ * (`text-primary`) when expanded, muted (`text-placeholder`) otherwise, and dark on
+ * hover when placed inside a `group` ancestor. Put `group` on the clickable
+ * header/row so the hover state activates.
+ */
+export declare const DisclosureArrow: default_2.FC<DisclosureArrowProps>;
+
+export declare interface DisclosureArrowProps {
+    /** Whether the disclosure is open (renders the down triangle vs. the right one). */
+    expanded: boolean;
+    size?: number;
+    className?: string;
+}
+
 export declare const DismissIcon: React.FC<IconProps_34>;
 
 export declare const Divider: default_2.FC<DividerProps>;
@@ -1320,6 +1348,26 @@ export declare const EnumIcon: React.FC<IconProps_40>;
 
 export declare const ErrorCircleFilled: React.FC<IconProps_41>;
 
+/**
+ * The space before the header: the arrow's own inset, its glyph and the gap after it.
+ * Exported so a consumer aligning a column header above these rows offsets by the same
+ * amount instead of guessing at it.
+ */
+export declare const EXPANDABLE_ROW_LEAD_PX = 39;
+
+/**
+ * Stops a click inside it from toggling the row, for the cells that hold controls.
+ *
+ * Explicit rather than sniffing the event's target for an interactive ancestor: a control
+ * rendering into a shadow root retargets the event to its host, so the sniff would miss
+ * exactly the components most likely to sit in a row.
+ */
+declare const ExpandableRowControls: default_2.FC<{
+    children?: default_2.ReactNode;
+    className?: string;
+    style?: default_2.CSSProperties;
+}>;
+
 export declare const ExpandIcon: React.FC<IconProps_42>;
 
 export declare const EyeClosedIcon: React.FC<IconProps_43>;
@@ -3949,6 +3997,34 @@ export declare const Surface: SurfaceComponent;
 
 declare interface SurfaceComponent extends default_2.FC<SurfaceProps> {
     Row: default_2.FC<SurfaceRowProps>;
+    ExpandableRow: typeof SurfaceExpandableRow;
+}
+
+export declare const SurfaceExpandableRow: default_2.FC<SurfaceExpandableRowProps> & {
+    Controls: typeof ExpandableRowControls;
+};
+
+export declare interface SurfaceExpandableRowProps {
+    /** The row itself, laid out across the line. May hold its own controls. */
+    header: default_2.ReactNode;
+    /** The body, rendered beneath the row while it is open. */
+    children?: default_2.ReactNode;
+    expanded: boolean;
+    /** Omit for a row that cannot open. The arrow's space is still reserved, so a list of
+     *  rows stays in one column whether or not each one has a body. */
+    onToggle?: (expanded: boolean) => void;
+    /**
+     * Pins the row while its body scrolls, so a long body never leaves the reader without
+     * the line it belongs to. Offset by whatever is already pinned above it.
+     */
+    sticky?: boolean;
+    stickyTopOffset?: number;
+    divider?: boolean;
+    tone?: SurfaceRowProps['tone'];
+    /** Names the disclosure control, which is otherwise only an arrow. */
+    'aria-label'?: string;
+    className?: string;
+    style?: default_2.CSSProperties;
 }
 
 export declare interface SurfaceProps {