@stackone/malachite 2.73.0 → 2.74.0

package/dist/components/Flex.js

@@ -1,6 +1,6 @@
 import { jsx as v } from "react/jsx-runtime";
-import { FlexDirection as r, FlexAlign as g, FlexJustify as h, FlexGapSize as e } from "./flexTypes.js";
-const y = (t) => {
+import { FlexDirection as a, FlexAlign as h, FlexJustify as y, FlexGapSize as e } from "./flexTypes.js";
+const F = (t) => {
   switch (t) {
     case e.XSmall:
       return 8;
@@ -11,23 +11,24 @@ const y = (t) => {
     case e.Large:
       return 36;
   }
-}, z = ({
-  justify: t = h.Center,
-  align: o = g.Center,
+}, D = ({
+  justify: t = y.Center,
+  align: o = h.Center,
   gapSize: i,
-  direction: a = r.Horizontal,
+  direction: r = a.Horizontal,
   fullHeight: n = !1,
   grow: s = !1,
   shrink: c = !1,
   wrap: f = !1,
   width: d,
-  id: x,
-  children: u,
-  className: m = ""
+  as: x = "div",
+  id: u,
+  children: m,
+  className: p = ""
 }) => {
-  const l = i ? y(i) : void 0, p = {
+  const l = i ? F(i) : void 0, g = {
     display: "flex",
-    flexDirection: a === r.Vertical ? "column" : "row",
+    flexDirection: r === a.Vertical ? "column" : "row",
     flexWrap: f ? "wrap" : void 0,
     justifyContent: t,
     alignItems: o,
@@ -37,9 +38,9 @@ const y = (t) => {
     minWidth: c ? 0 : void 0,
     width: d || void 0
   };
-  return /* @__PURE__ */ v("div", { id: x, className: m, style: p, children: u });
+  return /* @__PURE__ */ v(x, { id: u, className: p, style: g, children: m });
 };
 export {
-  z as default
+  D as default
 };
 //# sourceMappingURL=Flex.js.map

package/dist/components/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sources":["../../src/components/Flex.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexAlign, FlexDirection, FlexGapSize, FlexJustify } from './flexTypes';\n\n\n\n\n\ninterface FlexProps {\n    justify?: FlexJustify;\n    align?: FlexAlign;\n    gapSize?: FlexGapSize;\n    direction?: FlexDirection;\n    fullHeight?: boolean;\n    grow?: boolean;\n    shrink?: boolean;\n    wrap?: boolean;\n    width?: string;\n    id?: string;\n    children?: React.ReactNode;\n    className?: string;\n}\n\nconst getGapSize = (size: FlexGapSize): number => {\n    switch (size) {\n        case FlexGapSize.XSmall:\n            return 8;\n        case FlexGapSize.Small:\n            return 12;\n        case FlexGapSize.Medium:\n            return 24;\n        case FlexGapSize.Large:\n            return 36;\n    }\n};\n\nconst Flex: React.FC<FlexProps> = ({\n    justify = FlexJustify.Center,\n    align = FlexAlign.Center,\n    gapSize,\n    direction = FlexDirection.Horizontal,\n    fullHeight = false,\n    grow = false,\n    shrink = false,\n    wrap = false,\n    width,\n    id,\n    children,\n    className = '',\n}) => {\n    const gapSizeValue = gapSize ? getGapSize(gapSize) : undefined;\n\n    // Convert direction to CSS flex-direction\n    const flexDirection = direction === FlexDirection.Vertical ? 'column' : 'row';\n\n    const baseStyle: React.CSSProperties = {\n        display: 'flex',\n        flexDirection,\n        flexWrap: wrap ? 'wrap' : undefined,\n        justifyContent: justify,\n        alignItems: align,\n        gap: gapSizeValue ? `${gapSizeValue}px` : undefined,\n        height: fullHeight ? '100%' : undefined,\n        flex: grow ? 1 : undefined,\n        minWidth: shrink ? 0 : undefined,\n        width: width || undefined,\n    };\n\n    return (\n        <div id={id} className={className} style={baseStyle}>\n            {children}\n        </div>\n    );\n};\n\nexport default Flex;\n"],"names":["getGapSize","size","FlexGapSize","Flex","justify","FlexJustify","align","FlexAlign","gapSize","direction","FlexDirection","fullHeight","grow","shrink","wrap","width","id","children","className","gapSizeValue","baseStyle"],"mappings":";;AAsBA,MAAMA,IAAa,CAACC,MAA8B;AAC9C,UAAQA,GAAA;AAAA,IACJ,KAAKC,EAAY;AACb,aAAO;AAAA,IACX,KAAKA,EAAY;AACb,aAAO;AAAA,IACX,KAAKA,EAAY;AACb,aAAO;AAAA,IACX,KAAKA,EAAY;AACb,aAAO;AAAA,EAAA;AAEnB,GAEMC,IAA4B,CAAC;AAAA,EAC/B,SAAAC,IAAUC,EAAY;AAAA,EACtB,OAAAC,IAAQC,EAAU;AAAA,EAClB,SAAAC;AAAA,EACA,WAAAC,IAAYC,EAAc;AAAA,EAC1B,YAAAC,IAAa;AAAA,EACb,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAChB,MAAM;AACF,QAAMC,IAAeX,IAAUR,EAAWQ,CAAO,IAAI,QAK/CY,IAAiC;AAAA,IACnC,SAAS;AAAA,IACT,eAJkBX,MAAcC,EAAc,WAAW,WAAW;AAAA,IAKpE,UAAUI,IAAO,SAAS;AAAA,IAC1B,gBAAgBV;AAAA,IAChB,YAAYE;AAAA,IACZ,KAAKa,IAAe,GAAGA,CAAY,OAAO;AAAA,IAC1C,QAAQR,IAAa,SAAS;AAAA,IAC9B,MAAMC,IAAO,IAAI;AAAA,IACjB,UAAUC,IAAS,IAAI;AAAA,IACvB,OAAOE,KAAS;AAAA,EAAA;AAGpB,2BACK,OAAA,EAAI,IAAAC,GAAQ,WAAAE,GAAsB,OAAOE,GACrC,UAAAH,GACL;AAER;"}
+{"version":3,"file":"Flex.js","sources":["../../src/components/Flex.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexAlign, FlexDirection, FlexGapSize, FlexJustify } from './flexTypes';\n\ninterface FlexProps {\n    justify?: FlexJustify;\n    align?: FlexAlign;\n    gapSize?: FlexGapSize;\n    direction?: FlexDirection;\n    fullHeight?: boolean;\n    grow?: boolean;\n    shrink?: boolean;\n    wrap?: boolean;\n    width?: string;\n    id?: string;\n    /** `span` for content inside a button, such as a clickable `Surface.Row`. */\n    as?: 'div' | 'span';\n    children?: React.ReactNode;\n    className?: string;\n}\n\nconst getGapSize = (size: FlexGapSize): number => {\n    switch (size) {\n        case FlexGapSize.XSmall:\n            return 8;\n        case FlexGapSize.Small:\n            return 12;\n        case FlexGapSize.Medium:\n            return 24;\n        case FlexGapSize.Large:\n            return 36;\n    }\n};\n\nconst Flex: React.FC<FlexProps> = ({\n    justify = FlexJustify.Center,\n    align = FlexAlign.Center,\n    gapSize,\n    direction = FlexDirection.Horizontal,\n    fullHeight = false,\n    grow = false,\n    shrink = false,\n    wrap = false,\n    width,\n    as = 'div',\n    id,\n    children,\n    className = '',\n}) => {\n    const gapSizeValue = gapSize ? getGapSize(gapSize) : undefined;\n\n    // Convert direction to CSS flex-direction\n    const flexDirection = direction === FlexDirection.Vertical ? 'column' : 'row';\n\n    const baseStyle: React.CSSProperties = {\n        display: 'flex',\n        flexDirection,\n        flexWrap: wrap ? 'wrap' : undefined,\n        justifyContent: justify,\n        alignItems: align,\n        gap: gapSizeValue ? `${gapSizeValue}px` : undefined,\n        height: fullHeight ? '100%' : undefined,\n        flex: grow ? 1 : undefined,\n        minWidth: shrink ? 0 : undefined,\n        width: width || undefined,\n    };\n\n    const Tag = as;\n    return (\n        <Tag id={id} className={className} style={baseStyle}>\n            {children}\n        </Tag>\n    );\n};\n\nexport default Flex;\n"],"names":["getGapSize","size","FlexGapSize","Flex","justify","FlexJustify","align","FlexAlign","gapSize","direction","FlexDirection","fullHeight","grow","shrink","wrap","width","as","id","children","className","gapSizeValue","baseStyle"],"mappings":";;AAoBA,MAAMA,IAAa,CAACC,MAA8B;AAC9C,UAAQA,GAAA;AAAA,IACJ,KAAKC,EAAY;AACb,aAAO;AAAA,IACX,KAAKA,EAAY;AACb,aAAO;AAAA,IACX,KAAKA,EAAY;AACb,aAAO;AAAA,IACX,KAAKA,EAAY;AACb,aAAO;AAAA,EAAA;AAEnB,GAEMC,IAA4B,CAAC;AAAA,EAC/B,SAAAC,IAAUC,EAAY;AAAA,EACtB,OAAAC,IAAQC,EAAU;AAAA,EAClB,SAAAC;AAAA,EACA,WAAAC,IAAYC,EAAc;AAAA,EAC1B,YAAAC,IAAa;AAAA,EACb,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,IAAAC,IAAK;AAAA,EACL,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAChB,MAAM;AACF,QAAMC,IAAeZ,IAAUR,EAAWQ,CAAO,IAAI,QAK/Ca,IAAiC;AAAA,IACnC,SAAS;AAAA,IACT,eAJkBZ,MAAcC,EAAc,WAAW,WAAW;AAAA,IAKpE,UAAUI,IAAO,SAAS;AAAA,IAC1B,gBAAgBV;AAAA,IAChB,YAAYE;AAAA,IACZ,KAAKc,IAAe,GAAGA,CAAY,OAAO;AAAA,IAC1C,QAAQT,IAAa,SAAS;AAAA,IAC9B,MAAMC,IAAO,IAAI;AAAA,IACjB,UAAUC,IAAS,IAAI;AAAA,IACvB,OAAOE,KAAS;AAAA,EAAA;AAIpB,2BADYC,GAEP,EAAI,IAAAC,GAAQ,WAAAE,GAAsB,OAAOE,GACrC,UAAAH,GACL;AAER;"}

package/dist/components/SplitButton.js

@@ -0,0 +1,91 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { forwardRef as R } from "react";
+import { ButtonSpinner as k } from "./ButtonSpinner.js";
+import G from "./CustomIcons/CaretDownIcon.js";
+import M from "./CustomIcons/CaretUpIcon.js";
+import { getIconOnlySizeClasses as $, getIconSizeClass as D } from "./buttonSizing.js";
+import { getSizeClasses as T, getVariantClasses as _, getDefaultRadiusClass as z } from "./buttonStyles.js";
+const A = "relative rounded-e-none border-e-0 focus-visible:z-[1]", U = "relative rounded-s-none border-s-0 before:absolute before:inset-y-0 before:start-0 before:w-px before:bg-current before:opacity-25", V = R(
+  ({
+    variant: p = "filled",
+    size: t = "medium",
+    children: b,
+    leading: n,
+    trailing: r,
+    onClick: C,
+    type: x = "button",
+    loading: o = !1,
+    disabled: h = !1,
+    flexGrow: l = !1,
+    menuLabel: N,
+    menuOpen: a,
+    onMenuClick: S,
+    menuIcon: g,
+    menuHasPopup: v = !0,
+    menuRef: y,
+    menuTrigger: i,
+    className: c = "",
+    style: I
+  }, j) => {
+    const s = h || o, B = z(t, !1), f = _(p, B), m = s ? "cursor-not-allowed" : "", E = [
+      "flex items-center justify-center",
+      T(t),
+      f,
+      A,
+      l ? "flex-1" : "",
+      m
+    ].filter(Boolean).join(" "), w = [
+      "flex items-center justify-center p-0",
+      $(t),
+      f,
+      U,
+      D(t),
+      m
+    ].filter(Boolean).join(" "), u = /* @__PURE__ */ e(
+      "button",
+      {
+        ref: y,
+        type: "button",
+        disabled: s,
+        "aria-label": N,
+        "aria-haspopup": v ? "menu" : void 0,
+        "aria-expanded": a,
+        onClick: S,
+        className: w,
+        children: g ?? (a ? /* @__PURE__ */ e(M, {}) : /* @__PURE__ */ e(G, {}))
+      }
+    );
+    return /* @__PURE__ */ d(
+      "span",
+      {
+        className: `inline-flex items-stretch${l ? " w-full" : ""}${c ? ` ${c}` : ""}`,
+        style: I,
+        children: [
+          /* @__PURE__ */ d(
+            "button",
+            {
+              ref: j,
+              type: x,
+              disabled: s,
+              onClick: C,
+              className: E,
+              children: [
+                n ? /* @__PURE__ */ e("span", { className: "btn-leading inline-flex shrink-0 items-center me-2", children: n }) : null,
+                o ? /* @__PURE__ */ e(k, {}) : null,
+                b,
+                r ? /* @__PURE__ */ e("span", { className: "btn-trailing inline-flex shrink-0 items-center ms-2", children: r }) : null
+              ]
+            }
+          ),
+          i ? i(u) : u
+        ]
+      }
+    );
+  }
+);
+V.displayName = "SplitButton";
+export {
+  V as SplitButton,
+  V as default
+};
+//# sourceMappingURL=SplitButton.js.map

package/dist/components/SplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.js","sources":["../../src/components/SplitButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { ButtonSize, ButtonVariant } from './Button';\nimport ButtonSpinner from './ButtonSpinner';\nimport CaretDownIcon from './CustomIcons/CaretDownIcon';\nimport CaretUpIcon from './CustomIcons/CaretUpIcon';\nimport { getIconOnlySizeClasses, getIconSizeClass } from './buttonSizing';\nimport { getDefaultRadiusClass, getSizeClasses, getVariantClasses } from './buttonStyles';\n\nexport interface SplitButtonProps {\n    variant?: ButtonVariant;\n    size?: ButtonSize;\n    children?: React.ReactNode;\n    leading?: React.ReactNode;\n    trailing?: React.ReactNode;\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n    /** The trigger segment is always `type=\"button\"`. */\n    type?: 'button' | 'submit' | 'reset';\n    loading?: boolean;\n    disabled?: boolean;\n    flexGrow?: boolean;\n    /** Accessible name of the chevron segment. */\n    menuLabel: string;\n    /** Drives `aria-expanded`; the chevron points up while open. */\n    menuOpen?: boolean;\n    onMenuClick?: React.MouseEventHandler<HTMLButtonElement>;\n    menuIcon?: React.ReactNode;\n    /** `false` for a trigger that opens something other than a menu. */\n    menuHasPopup?: boolean;\n    menuRef?: React.Ref<HTMLButtonElement>;\n    /** Wraps the trigger segment, e.g. as a `Popover`'s `trigger`. */\n    menuTrigger?: (segment: React.ReactElement) => React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\n// The seam is the trigger's own text colour, so it reads on every variant.\nconst MAIN_SEGMENT = 'relative rounded-e-none border-e-0 focus-visible:z-[1]';\nconst TRIGGER_SEGMENT =\n    'relative rounded-s-none border-s-0 before:absolute before:inset-y-0 before:start-0 before:w-px before:bg-current before:opacity-25';\n\n/** A primary action and a menu trigger in one pill; each segment is its own button. */\nexport const SplitButton = forwardRef<HTMLButtonElement, SplitButtonProps>(\n    (\n        {\n            variant = 'filled',\n            size = 'medium',\n            children,\n            leading,\n            trailing,\n            onClick,\n            type = 'button',\n            loading = false,\n            disabled = false,\n            flexGrow = false,\n            menuLabel,\n            menuOpen,\n            onMenuClick,\n            menuIcon,\n            menuHasPopup = true,\n            menuRef,\n            menuTrigger,\n            className = '',\n            style,\n        },\n        ref,\n    ) => {\n        const isInactive = disabled || loading;\n        const radiusClass = getDefaultRadiusClass(size, false);\n        const variantClasses = getVariantClasses(variant, radiusClass);\n        const inactiveClass = isInactive ? 'cursor-not-allowed' : '';\n\n        const mainClasses = [\n            'flex items-center justify-center',\n            getSizeClasses(size),\n            variantClasses,\n            MAIN_SEGMENT,\n            flexGrow ? 'flex-1' : '',\n            inactiveClass,\n        ]\n            .filter(Boolean)\n            .join(' ');\n\n        const triggerClasses = [\n            'flex items-center justify-center p-0',\n            getIconOnlySizeClasses(size),\n            variantClasses,\n            TRIGGER_SEGMENT,\n            getIconSizeClass(size),\n            inactiveClass,\n        ]\n            .filter(Boolean)\n            .join(' ');\n\n        const trigger = (\n            <button\n                ref={menuRef}\n                type=\"button\"\n                disabled={isInactive}\n                aria-label={menuLabel}\n                aria-haspopup={menuHasPopup ? 'menu' : undefined}\n                aria-expanded={menuOpen}\n                onClick={onMenuClick}\n                className={triggerClasses}\n            >\n                {menuIcon ?? (menuOpen ? <CaretUpIcon /> : <CaretDownIcon />)}\n            </button>\n        );\n\n        return (\n            <span\n                className={`inline-flex items-stretch${flexGrow ? ' w-full' : ''}${className ? ` ${className}` : ''}`}\n                style={style}\n            >\n                <button\n                    ref={ref}\n                    type={type}\n                    disabled={isInactive}\n                    onClick={onClick}\n                    className={mainClasses}\n                >\n                    {leading ? (\n                        <span className=\"btn-leading inline-flex shrink-0 items-center me-2\">\n                            {leading}\n                        </span>\n                    ) : null}\n                    {loading ? <ButtonSpinner /> : null}\n                    {children}\n                    {trailing ? (\n                        <span className=\"btn-trailing inline-flex shrink-0 items-center ms-2\">\n                            {trailing}\n                        </span>\n                    ) : null}\n                </button>\n                {menuTrigger ? menuTrigger(trigger) : trigger}\n            </span>\n        );\n    },\n);\n\nSplitButton.displayName = 'SplitButton';\n\nexport default SplitButton;\n"],"names":["MAIN_SEGMENT","TRIGGER_SEGMENT","SplitButton","forwardRef","variant","size","children","leading","trailing","onClick","type","loading","disabled","flexGrow","menuLabel","menuOpen","onMenuClick","menuIcon","menuHasPopup","menuRef","menuTrigger","className","style","ref","isInactive","radiusClass","getDefaultRadiusClass","variantClasses","getVariantClasses","inactiveClass","mainClasses","getSizeClasses","triggerClasses","getIconOnlySizeClasses","getIconSizeClass","trigger","jsx","CaretUpIcon","CaretDownIcon","jsxs","ButtonSpinner"],"mappings":";;;;;;;AAoCA,MAAMA,IAAe,0DACfC,IACF,sIAGSC,IAAcC;AAAA,EACvB,CACI;AAAA,IACI,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,EAAA,GAEJC,MACC;AACD,UAAMC,IAAaZ,KAAYD,GACzBc,IAAcC,EAAsBrB,GAAM,EAAK,GAC/CsB,IAAiBC,EAAkBxB,GAASqB,CAAW,GACvDI,IAAgBL,IAAa,uBAAuB,IAEpDM,IAAc;AAAA,MAChB;AAAA,MACAC,EAAe1B,CAAI;AAAA,MACnBsB;AAAA,MACA3B;AAAA,MACAa,IAAW,WAAW;AAAA,MACtBgB;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAEPG,IAAiB;AAAA,MACnB;AAAA,MACAC,EAAuB5B,CAAI;AAAA,MAC3BsB;AAAA,MACA1B;AAAA,MACAiC,EAAiB7B,CAAI;AAAA,MACrBwB;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAEPM,IACF,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKjB;AAAA,QACL,MAAK;AAAA,QACL,UAAUK;AAAA,QACV,cAAYV;AAAA,QACZ,iBAAeI,IAAe,SAAS;AAAA,QACvC,iBAAeH;AAAA,QACf,SAASC;AAAA,QACT,WAAWgB;AAAA,QAEV,gBAAajB,IAAW,gBAAAqB,EAACC,GAAA,CAAA,CAAY,sBAAMC,GAAA,EAAc;AAAA,MAAA;AAAA,IAAA;AAIlE,WACI,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,4BAA4B1B,IAAW,YAAY,EAAE,GAAGQ,IAAY,IAAIA,CAAS,KAAK,EAAE;AAAA,QACnG,OAAAC;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAiB;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,KAAAhB;AAAA,cACA,MAAAb;AAAA,cACA,UAAUc;AAAA,cACV,SAAAf;AAAA,cACA,WAAWqB;AAAA,cAEV,UAAA;AAAA,gBAAAvB,IACG,gBAAA6B,EAAC,QAAA,EAAK,WAAU,sDACX,aACL,IACA;AAAA,gBACHzB,IAAU,gBAAAyB,EAACI,GAAA,CAAA,CAAc,IAAK;AAAA,gBAC9BlC;AAAA,gBACAE,IACG,gBAAA4B,EAAC,QAAA,EAAK,WAAU,uDACX,aACL,IACA;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEPhB,IAAcA,EAAYe,CAAO,IAAIA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGlD;AACJ;AAEAjC,EAAY,cAAc;"}

package/dist/components/Surface.js

@@ -1,24 +1,24 @@
-import { jsx as o, jsxs as _ } from "react/jsx-runtime";
-import z from "react";
-import { paintOnChild as K } from "./asChild.js";
+import { jsx as o, jsxs as O } from "react/jsx-runtime";
+import K from "react";
 import { DisclosureArrow as V } from "./DisclosureArrow.js";
-import { FOCUS_RING_INSET as B } from "./focusRing.js";
-import { resolveRel as L } from "./linkRel.js";
-import { safeHref as q } from "./safeHref.js";
+import { paintOnChild as q } from "./asChild.js";
+import { FOCUS_RING_INSET as j } from "./focusRing.js";
+import { resolveRel as I } from "./linkRel.js";
 import { isRenderableNode as J } from "./renderableNode.js";
-import { FOREGROUND_RESET as M, SELECTED_TEXT_CONTEXT as Q, SELECTED_ROW_ACCENT as Y, SELECTED_ROW_FOREGROUND as Z, SELECTED_ROW_BACKGROUND as I } from "./selectedRow.js";
-const ee = {
+import { safeHref as M } from "./safeHref.js";
+import { FOREGROUND_RESET as Q, SELECTED_TEXT_CONTEXT as Y, SELECTED_ROW_ACCENT as Z, SELECTED_ROW_FOREGROUND as ee, SELECTED_ROW_BACKGROUND as B } from "./selectedRow.js";
+const ae = {
   none: "",
   compact: "px-[16px] py-[8px]"
-}, ae = {
+}, re = {
   default: "",
   muted: "bg-[var(--malachite-card-dimmed-background)]",
   success: "bg-[var(--malachite-tag-success-background)]",
   error: "bg-[var(--malachite-tag-error-background)]"
-}, re = {
+}, oe = {
   success: "var(--malachite-tag-success-foreground)",
   error: "var(--malachite-tag-error-foreground)"
-}, oe = "opacity-0 transition-opacity group-[:hover]/row:opacity-100 group-focus-within/row:opacity-100 has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100", te = "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)", j = (t) => {
+}, te = "opacity-0 transition-opacity group-[:hover]/row:opacity-100 group-focus-within/row:opacity-100 has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100", le = "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)", F = (t) => {
   const {
     children: a,
     divider: r = !1,
@@ -28,32 +28,32 @@ const ee = {
     tone: s = "default",
     inset: m = "none",
     className: f = "",
-    style: C
+    style: N
   } = t, c = t.asChild === !0, {
     onClick: l,
     href: b,
     target: u,
-    rel: O,
-    trailing: T,
-    revealTrailing: $,
+    rel: T,
+    trailing: $,
+    revealTrailing: D,
     role: i
-  } = c ? {} : t, h = q(b), x = c ? void 0 : t["aria-label"], v = c ? void 0 : t["aria-labelledby"], N = !!(l || h), P = e && (N || c) ? "" : "transition-colors hover:bg-[var(--malachite-buttonlist-hover-background)]", G = s !== "default", U = ae[s], w = !c && J(T), S = ee[m], W = S && !w ? "" : "p-0", D = [
+  } = c ? {} : t, h = M(b), x = c ? void 0 : t["aria-label"], v = c ? void 0 : t["aria-labelledby"], y = c ? void 0 : t.tabIndex, w = !!(l || h), G = e && (w || c) ? "" : "transition-colors hover:bg-[var(--malachite-buttonlist-hover-background)]", U = s !== "default", W = re[s], S = !c && J($), R = ae[m], X = R && !S ? "" : "p-0", A = [
     "w-full text-left border-0",
-    U,
+    W,
     r ? "border-b border-solid border-[var(--malachite-card-border)]" : "",
-    P
-  ].filter(Boolean).join(" "), R = [
-    N ? `appearance-none ${G ? "" : "bg-transparent"} ${W} ${B}` : "",
-    N && !e ? "cursor-pointer" : ""
-  ].filter(Boolean).join(" "), y = [D, R, w ? "" : S, f].filter(Boolean).join(" "), X = n === !0 && (d ? d === "highlight" : i !== "checkbox") ? {
-    backgroundImage: `linear-gradient(${I}, ${I})`,
-    color: Z,
-    boxShadow: `inset 2px 0 0 ${Y}`,
-    ...Q
-  } : {}, k = re[s], g = { ...k ? {
-    color: k,
-    "--malachite-ctx-text-primary": k
-  } : {}, ...X, ...C }, p = i === "checkbox" && n === "mixed" ? "mixed" : i === "radio" || i === "checkbox" ? n === !0 : void 0, E = p === void 0 && n === !0 ? !0 : void 0, A = {
+    G
+  ].filter(Boolean).join(" "), k = [
+    w ? `appearance-none ${U ? "" : "bg-transparent"} ${X} ${j}` : "",
+    w && !e ? "cursor-pointer" : ""
+  ].filter(Boolean).join(" "), C = [A, k, S ? "" : R, f].filter(Boolean).join(" "), H = n === !0 && (d ? d === "highlight" : i !== "checkbox") ? {
+    backgroundImage: `linear-gradient(${B}, ${B})`,
+    color: ee,
+    boxShadow: `inset 2px 0 0 ${Z}`,
+    ...Y
+  } : {}, _ = oe[s], g = { ..._ ? {
+    color: _,
+    "--malachite-ctx-text-primary": _
+  } : {}, ...H, ...N }, p = i === "checkbox" && n === "mixed" ? "mixed" : i === "radio" || i === "checkbox" ? n === !0 : void 0, E = p === void 0 && n === !0 ? !0 : void 0, L = {
     role: i,
     "aria-checked": p,
     "aria-current": E,
@@ -62,17 +62,18 @@ const ee = {
     "aria-disabled": i && e ? !0 : void 0
   };
   if (c)
-    return K(a, y, g);
-  if (w) {
-    const H = h && !e ? /* @__PURE__ */ o(
+    return q(a, C, g);
+  if (S) {
+    const z = h && !e ? /* @__PURE__ */ o(
       "a",
       {
         href: h,
         target: u,
-        rel: L(O, u),
+        rel: I(T, u),
         onClick: l,
-        className: `${R} border-0 flex-1 min-w-0 text-left no-underline text-inherit`,
+        className: `${k} border-0 flex-1 min-w-0 text-left no-underline text-inherit`,
         role: i,
+        tabIndex: y,
         "aria-checked": p,
         "aria-current": E,
         "aria-label": x,
@@ -85,8 +86,9 @@ const ee = {
         type: "button",
         onClick: l,
         disabled: e,
-        className: `${R} border-0 flex-1 min-w-0 text-left`,
+        className: `${k} border-0 flex-1 min-w-0 text-left`,
         role: i,
+        tabIndex: y,
         "aria-checked": p,
         "aria-current": E,
         "aria-label": x,
@@ -96,26 +98,26 @@ const ee = {
     ) : (
       // 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", ...A, children: a })
+      /* @__PURE__ */ o("div", { className: "flex-1 min-w-0", ...L, children: a })
     );
-    return /* @__PURE__ */ _(
+    return /* @__PURE__ */ O(
       "div",
       {
         className: [
-          D,
+          A,
           "flex items-center",
-          S,
-          $ ? "group/row" : "",
+          R,
+          D ? "group/row" : "",
           f
         ].filter(Boolean).join(" "),
         style: g,
         children: [
-          H,
+          z,
           /* @__PURE__ */ o(
             "div",
             {
-              className: `shrink-0 flex items-center ${$ ? oe : ""}`,
-              children: T
+              className: `shrink-0 flex items-center ${D ? te : ""}`,
+              children: $
             }
           )
         ]
@@ -127,11 +129,12 @@ const ee = {
     {
       href: h,
       target: u,
-      rel: L(O, u),
+      rel: I(T, u),
       onClick: l,
-      className: `${y} no-underline text-inherit`,
+      className: `${C} no-underline text-inherit`,
       style: g,
       role: i,
+      tabIndex: y,
       "aria-checked": p,
       "aria-current": E,
       "aria-label": x,
@@ -144,17 +147,18 @@ const ee = {
       type: "button",
       onClick: l,
       disabled: e,
-      className: y,
+      className: C,
       style: g,
       role: i,
+      tabIndex: y,
       "aria-checked": p,
       "aria-current": E,
       "aria-label": x,
       "aria-labelledby": v,
       children: a
     }
-  ) : /* @__PURE__ */ o("div", { className: y, style: g, ...A, children: a });
-}, le = ({ children: t, className: a = "", style: r }) => /* @__PURE__ */ o("div", { className: a, style: r, onClick: (e) => e.stopPropagation(), children: t }), ve = 39, ie = Object.assign(
+  ) : /* @__PURE__ */ o("div", { className: C, style: g, ...L, children: a });
+}, ie = ({ children: t, className: a = "", style: r }) => /* @__PURE__ */ o("div", { className: a, style: r, onClick: (e) => e.stopPropagation(), children: t }), ge = 39, ne = Object.assign(
   ({
     header: t,
     children: a,
@@ -165,12 +169,12 @@ const ee = {
     divider: s = !1,
     tone: m = "default",
     "aria-label": f,
-    className: C = "",
+    className: N = "",
     style: c
   }) => {
-    const l = z.useId(), b = e ? () => e(!r) : void 0;
-    return /* @__PURE__ */ _(j, { divider: s, tone: m, className: C, style: c, children: [
-      /* @__PURE__ */ _(
+    const l = K.useId(), b = e ? () => e(!r) : void 0;
+    return /* @__PURE__ */ O(F, { divider: s, tone: m, className: N, style: c, children: [
+      /* @__PURE__ */ O(
         "div",
         {
           className: `group flex items-center w-full ${b ? "cursor-pointer" : ""} ${n && r ? "sticky z-[1] bg-[var(--malachite-card-background)]" : ""}`,
@@ -182,7 +186,7 @@ const ee = {
               "button",
               {
                 type: "button",
-                className: `appearance-none bg-transparent border-0 p-0 flex items-center cursor-pointer ${B}`,
+                className: `appearance-none bg-transparent border-0 p-0 flex items-center cursor-pointer ${j}`,
                 "aria-expanded": r,
                 "aria-controls": l,
                 "aria-label": f,
@@ -199,8 +203,8 @@ const ee = {
       r && /* @__PURE__ */ o("div", { id: l, children: a })
     ] });
   },
-  { Controls: le }
-), F = ({
+  { Controls: ie }
+), P = ({
   children: t,
   padding: a = !1,
   overflow: r = "hidden",
@@ -213,20 +217,20 @@ const ee = {
   "div",
   {
     className: `w-full rounded-[var(--malachite-radius-xxl,14px)] ${r === "clip" ? "overflow-clip" : r === "visible" ? "overflow-visible" : "overflow-hidden"} bg-[var(--malachite-card-background)] border border-solid border-[var(--malachite-card-border)] ${a ? "py-3 px-4" : ""} ${s}`,
-    style: { boxShadow: te, ...M, ...m },
+    style: { boxShadow: le, ...Q, ...m },
     role: e,
     "aria-label": n,
     "aria-labelledby": d,
     children: t
   }
 );
-F.Row = j;
-F.ExpandableRow = ie;
+P.Row = F;
+P.ExpandableRow = ne;
 export {
-  ve as EXPANDABLE_ROW_LEAD_PX,
-  F as Surface,
-  ie as SurfaceExpandableRow,
-  j as SurfaceRow,
-  F as default
+  ge as EXPANDABLE_ROW_LEAD_PX,
+  P as Surface,
+  ne as SurfaceExpandableRow,
+  F as SurfaceRow,
+  P 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 { paintOnChild } from './asChild';\nimport DisclosureArrow from './DisclosureArrow';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { resolveRel } from './linkRel';\nimport { safeHref } from './safeHref';\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\ninterface SurfaceRowChromeProps {\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    /** 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. `'mixed'` is for a `checkbox` row that is partly selected: it announces\n     *  `aria-checked=\"mixed\"` there, never paints and never marks the row current, and counts\n     *  as not selected under any other role. */\n    selected?: boolean | 'mixed';\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    /**\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    /** `compact` is an 8px by 16px inset the row owns. */\n    inset?: 'none' | 'compact';\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst INSET_CLASSES: Record<NonNullable<SurfaceRowChromeProps['inset']>, string> = {\n    none: '',\n    compact: 'px-[16px] py-[8px]',\n};\n\n/** Stays an interface under its original name: a consumer may `extends` it. */\nexport interface SurfaceRowProps extends SurfaceRowChromeProps {\n    asChild?: false;\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    target?: React.HTMLAttributeAnchorTarget;\n    rel?: string;\n    /** Content pinned right, outside the row button, so it may hold its own control. */\n    trailing?: React.ReactNode;\n    /**\n     * Shows `trailing` only while the row is hovered or holds focus, and while a menu\n     * it opened is still open. Hidden by opacity, so it stays in the tab order; a touch screen,\n     * which has no hover, always shows it.\n     */\n    revealTrailing?: boolean;\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}\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\nexport interface SurfaceRowAsChildProps extends SurfaceRowChromeProps {\n    asChild: true;\n    children: React.ReactElement;\n}\n\nexport type AnySurfaceRowProps = SurfaceRowProps | SurfaceRowAsChildProps;\n\n// Not `group-hover` or `group-has-[:focus-visible]`: WebKit never applies the first (its\n// `@media (hover: hover)` nested in the group selector) nor the second inside a shadow root,\n// so the control stayed hidden in Safari. An open menu takes focus out of the row into a\n// portal, and would otherwise lose its trigger.\nconst REVEALED_ON_INTERACTION =\n    'opacity-0 transition-opacity group-[:hover]/row:opacity-100 group-focus-within/row:opacity-100 has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100';\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<AnySurfaceRowProps> = (props) => {\n    const {\n        children,\n        divider = false,\n        disabled = false,\n        selected,\n        selection,\n        tone = 'default',\n        inset = 'none',\n        className = '',\n        style,\n    } = props;\n    const asChild = props.asChild === true;\n    const {\n        onClick,\n        href: rawHref,\n        target,\n        rel,\n        trailing,\n        revealTrailing,\n        role,\n    } = asChild ? ({} as SurfaceRowProps) : (props as SurfaceRowProps);\n    // A rejected href (e.g. `javascript:`) leaves the row a button or a plain row, never an anchor.\n    const href = safeHref(rawHref);\n    const ariaLabel = asChild ? undefined : (props as SurfaceRowProps)['aria-label'];\n    const ariaLabelledBy = asChild ? undefined : (props as SurfaceRowProps)['aria-labelledby'];\n    const interactive = Boolean(onClick || href);\n    // `asChild` is interactive for the hover affordance only, not the focus/reset classes.\n    const hover =\n        disabled && (interactive || asChild)\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 hasTrailing = !asChild && isRenderableNode(trailing);\n    const insetClass = INSET_CLASSES[inset];\n    const controlPadding = insetClass && !hasTrailing ? '' : 'p-0';\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'} ${controlPadding} ${FOCUS_RING_INSET}`\n            : '',\n        interactive && !disabled ? 'cursor-pointer' : '',\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const classes = [chromeClasses, controlClasses, hasTrailing ? '' : insetClass, className]\n        .filter(Boolean)\n        .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 === true && 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    // Only a checkbox has a partly-checked state; a radio is chosen or not.\n    const ariaChecked =\n        role === 'checkbox' && selected === 'mixed'\n            ? ('mixed' as const)\n            : role === 'radio' || role === 'checkbox'\n              ? selected === true\n              : 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 ? 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 (asChild) {\n        return paintOnChild(children, classes, rowStyle);\n    }\n\n    if (hasTrailing) {\n        const control =\n            href && !disabled ? (\n                <a\n                    href={href}\n                    target={target}\n                    rel={resolveRel(rel, target)}\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={[\n                    chromeClasses,\n                    'flex items-center',\n                    insetClass,\n                    revealTrailing ? 'group/row' : '',\n                    className,\n                ]\n                    .filter(Boolean)\n                    .join(' ')}\n                style={rowStyle}\n            >\n                {control}\n                <div\n                    className={`shrink-0 flex items-center ${revealTrailing ? REVEALED_ON_INTERACTION : ''}`}\n                >\n                    {trailing}\n                </div>\n            </div>\n        );\n    }\n\n    if (href && !disabled) {\n        return (\n            <a\n                href={href}\n                target={target}\n                rel={resolveRel(rel, target)}\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<AnySurfaceRowProps>;\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":["INSET_CLASSES","TONE_CLASSES","TONE_FOREGROUNDS","REVEALED_ON_INTERACTION","TRIPLE_SHADOW","SurfaceRow","props","children","divider","disabled","selected","selection","tone","inset","className","style","asChild","onClick","rawHref","target","rel","trailing","revealTrailing","role","href","safeHref","ariaLabel","ariaLabelledBy","interactive","hover","tinted","toneClass","hasTrailing","isRenderableNode","insetClass","controlPadding","chromeClasses","controlClasses","FOCUS_RING_INSET","classes","selectedStyle","SELECTED_ROW_BACKGROUND","SELECTED_ROW_FOREGROUND","SELECTED_ROW_ACCENT","SELECTED_TEXT_CONTEXT","toneForeground","rowStyle","ariaChecked","ariaCurrent","rowFallbackAria","paintOnChild","control","jsx","resolveRel","jsxs","ExpandableRowControls","event","EXPANDABLE_ROW_LEAD_PX","SurfaceExpandableRow","header","expanded","onToggle","sticky","stickyTopOffset","bodyId","React","toggle","DisclosureArrow","Surface","padding","overflow","FOREGROUND_RESET"],"mappings":";;;;;;;;;AA4DA,MAAMA,KAA6E;AAAA,EAC/E,MAAM;AAAA,EACN,SAAS;AACb,GAmCMC,KAAqE;AAAA,EACvE,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AACX,GAUMC,KAAkF;AAAA,EACpF,SAAS;AAAA,EACT,OAAO;AACX,GAaMC,KACF,0KAEEC,KACF,yGASEC,IAA2C,CAACC,MAAU;AACxD,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,EAAA,IACAT,GACEU,IAAUV,EAAM,YAAY,IAC5B;AAAA,IACF,SAAAW;AAAA,IACA,MAAMC;AAAA,IACN,QAAAC;AAAA,IACA,KAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,MAAAC;AAAA,EAAA,IACAP,IAAW,CAAA,IAA0BV,GAEnCkB,IAAOC,EAASP,CAAO,GACvBQ,IAAYV,IAAU,SAAaV,EAA0B,YAAY,GACzEqB,IAAiBX,IAAU,SAAaV,EAA0B,iBAAiB,GACnFsB,IAAc,GAAQX,KAAWO,IAEjCK,IACFpB,MAAamB,KAAeZ,KACtB,KACA,6EAKJc,IAASlB,MAAS,WAClBmB,IAAY9B,GAAaW,CAAI,GAE7BoB,IAAc,CAAChB,KAAWiB,EAAiBZ,CAAQ,GACnDa,IAAalC,GAAca,CAAK,GAChCsB,IAAiBD,KAAc,CAACF,IAAc,KAAK,OAEnDI,IAAgB;AAAA,IAClB;AAAA,IACAL;AAAA,IACAvB,IAAU,gEAAgE;AAAA,IAC1EqB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAEPQ,IAAiB;AAAA,IACnBT,IACM,mBAAmBE,IAAS,KAAK,gBAAgB,IAAIK,CAAc,IAAIG,CAAgB,KACvF;AAAA,IACNV,KAAe,CAACnB,IAAW,mBAAmB;AAAA,EAAA,EAE7C,OAAO,OAAO,EACd,KAAK,GAAG,GAEP8B,IAAU,CAACH,GAAeC,GAAgBL,IAAc,KAAKE,GAAYpB,CAAS,EACnF,OAAO,OAAO,EACd,KAAK,GAAG,GAMP0B,IACF9B,MAAa,OALFC,IAAYA,MAAc,cAAcY,MAAS,cAMtD;AAAA,IACI,iBAAiB,mBAAmBkB,CAAuB,KAAKA,CAAuB;AAAA,IACvF,OAAOC;AAAA,IACP,WAAW,iBAAiBC,CAAmB;AAAA,IAC/C,GAAGC;AAAA,EAAA,IAEP,CAAA,GAEJC,IAAiB3C,GAAiBU,CAAI,GAUtCkC,IAAW,EAAE,GAToBD,IAChC;AAAA,IACG,OAAOA;AAAA,IACP,gCAAgCA;AAAA,EAAA,IAEpC,CAAA,GAI2B,GAAGL,GAAe,GAAGzB,EAAA,GAGhDgC,IACFxB,MAAS,cAAcb,MAAa,UAC7B,UACDa,MAAS,WAAWA,MAAS,aAC3Bb,MAAa,KACb,QAGNsC,IAAcD,MAAgB,UAAarC,MAAa,KAAO,KAAO,QAKtEuC,IAAkB;AAAA,IACpB,MAAA1B;AAAA,IACA,gBAAgBwB;AAAA,IAChB,gBAAgBC;AAAA,IAChB,cAActB;AAAA,IACd,mBAAmBC;AAAA,IACnB,iBAAiBJ,KAAQd,IAAW,KAAO;AAAA,EAAA;AAG/C,MAAIO;AACA,WAAOkC,EAAa3C,GAAUgC,GAASO,CAAQ;AAGnD,MAAId,GAAa;AACb,UAAMmB,IACF3B,KAAQ,CAACf,IACL,gBAAA2C;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAA5B;AAAA,QACA,QAAAL;AAAA,QACA,KAAKkC,EAAWjC,GAAKD,CAAM;AAAA,QAC3B,SAAAF;AAAA,QACA,WAAW,GAAGoB,CAAc;AAAA,QAC5B,MAAAd;AAAA,QACA,gBAAcwB;AAAA,QACd,gBAAcC;AAAA,QACd,cAAYtB;AAAA,QACZ,mBAAiBC;AAAA,QAEhB,UAAApB;AAAA,MAAA;AAAA,IAAA,IAELU,IACA,gBAAAmC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,SAAAnC;AAAA,QACA,UAAAR;AAAA,QACA,WAAW,GAAG4B,CAAc;AAAA,QAC5B,MAAAd;AAAA,QACA,gBAAcwB;AAAA,QACd,gBAAcC;AAAA,QACd,cAAYtB;AAAA,QACZ,mBAAiBC;AAAA,QAEhB,UAAApB;AAAA,MAAA;AAAA,IAAA;AAAA;AAAA;AAAA,wBAKJ,OAAA,EAAI,WAAU,kBAAkB,GAAG0C,GAC/B,UAAA1C,EAAA,CACL;AAAA;AAGR,WACI,gBAAA+C;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW;AAAA,UACPlB;AAAA,UACA;AAAA,UACAF;AAAA,UACAZ,IAAiB,cAAc;AAAA,UAC/BR;AAAA,QAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QACb,OAAOgC;AAAA,QAEN,UAAA;AAAA,UAAAK;AAAA,UACD,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAW,8BAA8B9B,IAAiBnB,KAA0B,EAAE;AAAA,cAErF,UAAAkB;AAAA,YAAA;AAAA,UAAA;AAAA,QACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AAEA,SAAIG,KAAQ,CAACf,IAEL,gBAAA2C;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAA5B;AAAA,MACA,QAAAL;AAAA,MACA,KAAKkC,EAAWjC,GAAKD,CAAM;AAAA,MAC3B,SAAAF;AAAA,MACA,WAAW,GAAGsB,CAAO;AAAA,MACrB,OAAOO;AAAA,MACP,MAAAvB;AAAA,MACA,gBAAcwB;AAAA,MACd,gBAAcC;AAAA,MACd,cAAYtB;AAAA,MACZ,mBAAiBC;AAAA,MAEhB,UAAApB;AAAA,IAAA;AAAA,EAAA,IAKTU,IAEI,gBAAAmC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,SAAAnC;AAAA,MACA,UAAAR;AAAA,MACA,WAAW8B;AAAA,MACX,OAAOO;AAAA,MACP,MAAAvB;AAAA,MACA,gBAAcwB;AAAA,MACd,gBAAcC;AAAA,MACd,cAAYtB;AAAA,MACZ,mBAAiBC;AAAA,MAEhB,UAAApB;AAAA,IAAA;AAAA,EAAA,IAMT,gBAAA6C,EAAC,SAAI,WAAWb,GAAS,OAAOO,GAAW,GAAGG,GACzC,UAAA1C,GACL;AAER,GAgCMgD,KAID,CAAC,EAAE,UAAAhD,GAAU,WAAAO,IAAY,IAAI,OAAAC,QAC9B,gBAAAqC,EAAC,OAAA,EAAI,WAAAtC,GAAsB,OAAAC,GAAc,SAAS,CAACyC,MAAUA,EAAM,gBAAA,GAC9D,UAAAjD,GACL,GAgBSkD,KAAyB,IAEhCC,KAEF,OAAO;AAAA,EACP,CAAC;AAAA,IACG,QAAAC;AAAA,IACA,UAAApD;AAAA,IACA,UAAAqD;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,iBAAAC,IAAkB;AAAA,IAClB,SAAAvD,IAAU;AAAA,IACV,MAAAI,IAAO;AAAA,IACP,cAAcc;AAAA,IACd,WAAAZ,IAAY;AAAA,IACZ,OAAAC;AAAA,EAAA,MAC6B;AAC7B,UAAMiD,IAASC,EAAM,MAAA,GACfC,IAASL,IAAW,MAAMA,EAAS,CAACD,CAAQ,IAAI;AAEtD,WACI,gBAAAN,EAACjD,GAAA,EAAW,SAAAG,GAAkB,MAAAI,GAAY,WAAAE,GAAsB,OAAAC,GAE5D,UAAA;AAAA,MAAA,gBAAAuC;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAW,kCAAkCY,IAAS,mBAAmB,EAAE,IACvEJ,KAAUF,IACJ,uDACA,EACV;AAAA,UACA,OAAOE,KAAUF,IAAW,EAAE,KAAKG,MAAoB;AAAA,UAGvD,SAASG;AAAA,UACT,MAAK;AAAA,UAIL,UAAA;AAAA,YAAA,gBAAAd,EAAC,QAAA,EAAK,WAAU,kDACX,UAAAc,KACG,gBAAAd;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,MAAK;AAAA,gBACL,WAAW,gFAAgFd,CAAgB;AAAA,gBAC3G,iBAAesB;AAAA,gBACf,iBAAeI;AAAA,gBACf,cAAYtC;AAAA,gBACZ,SAAS,CAAC8B,MAAU;AAChB,kBAAAA,EAAM,gBAAA,GACNU,EAAA;AAAA,gBACJ;AAAA,gBAEA,UAAA,gBAAAd,EAACe,KAAgB,UAAAP,EAAA,CAAoB;AAAA,cAAA;AAAA,YAAA,GAGjD;AAAA,YACCD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJC,KAAY,gBAAAR,EAAC,OAAA,EAAI,IAAIY,GAAS,UAAAzD,EAAA,CAAS;AAAA,IAAA,GAC5C;AAAA,EAER;AAAA,EACA,EAAE,UAAUgD,GAAA;AAChB,GAOMa,IAAW,CAAC;AAAA,EACd,UAAA7D;AAAA,EACA,SAAA8D,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,MAAA/C;AAAA,EACA,cAAcG;AAAA,EACd,mBAAmBC;AAAA,EACnB,WAAAb,IAAY;AAAA,EACZ,OAAAC;AACJ,MASQ,gBAAAqC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,qDAPfkB,MAAa,SACP,kBACAA,MAAa,YACX,qBACA,iBAGyE,oGAAoGD,IAAU,cAAc,EAAE,IAAIvD,CAAS;AAAA,IACxN,OAAO,EAAE,WAAWV,IAAe,GAAGmE,GAAkB,GAAGxD,EAAA;AAAA,IAC3D,MAAAQ;AAAA,IACA,cAAYG;AAAA,IACZ,mBAAiBC;AAAA,IAEhB,UAAApB;AAAA,EAAA;AAAA;AAKb6D,EAAQ,MAAM/D;AACd+D,EAAQ,gBAAgBV;"}
+{"version":3,"file":"Surface.js","sources":["../../src/components/Surface.tsx"],"sourcesContent":["import React from 'react';\nimport DisclosureArrow from './DisclosureArrow';\nimport { paintOnChild } from './asChild';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { resolveRel } from './linkRel';\nimport { isRenderableNode } from './renderableNode';\nimport { safeHref } from './safeHref';\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\ninterface SurfaceRowChromeProps {\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    /** 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. `'mixed'` is for a `checkbox` row that is partly selected: it announces\n     *  `aria-checked=\"mixed\"` there, never paints and never marks the row current, and counts\n     *  as not selected under any other role. */\n    selected?: boolean | 'mixed';\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    /**\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    /** `compact` is an 8px by 16px inset the row owns. */\n    inset?: 'none' | 'compact';\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst INSET_CLASSES: Record<NonNullable<SurfaceRowChromeProps['inset']>, string> = {\n    none: '',\n    compact: 'px-[16px] py-[8px]',\n};\n\n/** Stays an interface under its original name: a consumer may `extends` it. */\nexport interface SurfaceRowProps extends SurfaceRowChromeProps {\n    asChild?: false;\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    target?: React.HTMLAttributeAnchorTarget;\n    rel?: string;\n    /** Content pinned right, outside the row button, so it may hold its own control. */\n    trailing?: React.ReactNode;\n    /**\n     * Shows `trailing` only while the row is hovered or holds focus, and while a menu\n     * it opened is still open. Hidden by opacity, so it stays in the tab order; a touch screen,\n     * which has no hover, always shows it.\n     */\n    revealTrailing?: boolean;\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    /** `-1` takes the row out of the Tab order, for a roving radio group. */\n    tabIndex?: number;\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\nexport interface SurfaceRowAsChildProps extends SurfaceRowChromeProps {\n    asChild: true;\n    children: React.ReactElement;\n}\n\nexport type AnySurfaceRowProps = SurfaceRowProps | SurfaceRowAsChildProps;\n\n// Not `group-hover` or `group-has-[:focus-visible]`: WebKit never applies the first (its\n// `@media (hover: hover)` nested in the group selector) nor the second inside a shadow root,\n// so the control stayed hidden in Safari. An open menu takes focus out of the row into a\n// portal, and would otherwise lose its trigger.\nconst REVEALED_ON_INTERACTION =\n    'opacity-0 transition-opacity group-[:hover]/row:opacity-100 group-focus-within/row:opacity-100 has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100';\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<AnySurfaceRowProps> = (props) => {\n    const {\n        children,\n        divider = false,\n        disabled = false,\n        selected,\n        selection,\n        tone = 'default',\n        inset = 'none',\n        className = '',\n        style,\n    } = props;\n    const asChild = props.asChild === true;\n    const {\n        onClick,\n        href: rawHref,\n        target,\n        rel,\n        trailing,\n        revealTrailing,\n        role,\n    } = asChild ? ({} as SurfaceRowProps) : (props as SurfaceRowProps);\n    // A rejected href (e.g. `javascript:`) leaves the row a button or a plain row, never an anchor.\n    const href = safeHref(rawHref);\n    const ariaLabel = asChild ? undefined : (props as SurfaceRowProps)['aria-label'];\n    const ariaLabelledBy = asChild ? undefined : (props as SurfaceRowProps)['aria-labelledby'];\n    const tabIndex = asChild ? undefined : (props as SurfaceRowProps).tabIndex;\n    const interactive = Boolean(onClick || href);\n    // `asChild` is interactive for the hover affordance only, not the focus/reset classes.\n    const hover =\n        disabled && (interactive || asChild)\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 hasTrailing = !asChild && isRenderableNode(trailing);\n    const insetClass = INSET_CLASSES[inset];\n    const controlPadding = insetClass && !hasTrailing ? '' : 'p-0';\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'} ${controlPadding} ${FOCUS_RING_INSET}`\n            : '',\n        interactive && !disabled ? 'cursor-pointer' : '',\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const classes = [chromeClasses, controlClasses, hasTrailing ? '' : insetClass, className]\n        .filter(Boolean)\n        .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 === true && 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    // Only a checkbox has a partly-checked state; a radio is chosen or not.\n    const ariaChecked =\n        role === 'checkbox' && selected === 'mixed'\n            ? ('mixed' as const)\n            : role === 'radio' || role === 'checkbox'\n              ? selected === true\n              : 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 ? 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 (asChild) {\n        return paintOnChild(children, classes, rowStyle);\n    }\n\n    if (hasTrailing) {\n        const control =\n            href && !disabled ? (\n                <a\n                    href={href}\n                    target={target}\n                    rel={resolveRel(rel, target)}\n                    onClick={onClick}\n                    className={`${controlClasses} border-0 flex-1 min-w-0 text-left no-underline text-inherit`}\n                    role={role}\n                    tabIndex={tabIndex}\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                    tabIndex={tabIndex}\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={[\n                    chromeClasses,\n                    'flex items-center',\n                    insetClass,\n                    revealTrailing ? 'group/row' : '',\n                    className,\n                ]\n                    .filter(Boolean)\n                    .join(' ')}\n                style={rowStyle}\n            >\n                {control}\n                <div\n                    className={`shrink-0 flex items-center ${revealTrailing ? REVEALED_ON_INTERACTION : ''}`}\n                >\n                    {trailing}\n                </div>\n            </div>\n        );\n    }\n\n    if (href && !disabled) {\n        return (\n            <a\n                href={href}\n                target={target}\n                rel={resolveRel(rel, target)}\n                onClick={onClick}\n                className={`${classes} no-underline text-inherit`}\n                style={rowStyle}\n                role={role}\n                tabIndex={tabIndex}\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                tabIndex={tabIndex}\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<AnySurfaceRowProps>;\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":["INSET_CLASSES","TONE_CLASSES","TONE_FOREGROUNDS","REVEALED_ON_INTERACTION","TRIPLE_SHADOW","SurfaceRow","props","children","divider","disabled","selected","selection","tone","inset","className","style","asChild","onClick","rawHref","target","rel","trailing","revealTrailing","role","href","safeHref","ariaLabel","ariaLabelledBy","tabIndex","interactive","hover","tinted","toneClass","hasTrailing","isRenderableNode","insetClass","controlPadding","chromeClasses","controlClasses","FOCUS_RING_INSET","classes","selectedStyle","SELECTED_ROW_BACKGROUND","SELECTED_ROW_FOREGROUND","SELECTED_ROW_ACCENT","SELECTED_TEXT_CONTEXT","toneForeground","rowStyle","ariaChecked","ariaCurrent","rowFallbackAria","paintOnChild","control","jsx","resolveRel","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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"}