@stackone/malachite 2.73.0 → 2.75.0

package/dist/components/ButtonSpinner.js

@@ -0,0 +1,36 @@
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+const r = () => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: "animate-spin motion-reduce:animate-none -ml-1 mr-2 h-4 w-4",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    children: [
+      /* @__PURE__ */ o(
+        "circle",
+        {
+          className: "opacity-25 motion-reduce:opacity-100",
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "4"
+        }
+      ),
+      /* @__PURE__ */ o(
+        "path",
+        {
+          className: "opacity-75 motion-reduce:opacity-0",
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        }
+      )
+    ]
+  }
+);
+export {
+  r as ButtonSpinner,
+  r as default
+};
+//# sourceMappingURL=ButtonSpinner.js.map

package/dist/components/ButtonSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSpinner.js","sources":["../../src/components/ButtonSpinner.tsx"],"sourcesContent":["export const ButtonSpinner = () => (\n    <svg\n        className=\"animate-spin motion-reduce:animate-none -ml-1 mr-2 h-4 w-4\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n    >\n        <circle\n            className=\"opacity-25 motion-reduce:opacity-100\"\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\"\n            stroke=\"currentColor\"\n            strokeWidth=\"4\"\n        />\n        <path\n            className=\"opacity-75 motion-reduce:opacity-0\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        />\n    </svg>\n);\n\nexport default ButtonSpinner;\n"],"names":["ButtonSpinner","jsxs","jsx"],"mappings":";AAAO,MAAMA,IAAgB,MACzB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAU;AAAA,IACV,OAAM;AAAA,IACN,MAAK;AAAA,IACL,SAAQ;AAAA,IAER,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,IAAG;AAAA,UACH,IAAG;AAAA,UACH,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,QAAA;AAAA,MAAA;AAAA,MAEhB,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,MAAK;AAAA,UACL,GAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AACJ;"}

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,79 +1,80 @@
-import { jsx as o, jsxs as _ } from "react/jsx-runtime";
-import z from "react";
-import { paintOnChild as K } from "./asChild.js";
-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 { 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 { jsx as o, jsxs as O } from "react/jsx-runtime";
+import q from "react";
+import { DisclosureArrow as J } from "./DisclosureArrow.js";
+import { paintOnChild as M } from "./asChild.js";
+import { FOCUS_RING_INSET as j } from "./focusRing.js";
+import { resolveRel as I } from "./linkRel.js";
+import { isRenderableNode as Q } from "./renderableNode.js";
+import { safeHref as Y } from "./safeHref.js";
+import { FOREGROUND_RESET as Z, SELECTED_TEXT_CONTEXT as ee, SELECTED_ROW_ACCENT as ae, SELECTED_ROW_FOREGROUND as re, SELECTED_ROW_BACKGROUND as B } from "./selectedRow.js";
+const oe = {
   none: "",
   compact: "px-[16px] py-[8px]"
-}, ae = {
+}, te = {
   default: "",
   muted: "bg-[var(--malachite-card-dimmed-background)]",
   success: "bg-[var(--malachite-tag-success-background)]",
   error: "bg-[var(--malachite-tag-error-background)]"
-}, re = {
+}, le = {
   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) => {
+}, ie = "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", ne = "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,
     disabled: e = !1,
     selected: n,
-    selection: d,
-    tone: s = "default",
-    inset: m = "none",
+    selection: s,
+    tone: d = "default",
+    inset: p = "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 = Y(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 = d !== "default", W = te[d], S = !c && Q($), R = oe[p], 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 = s ? s !== "announce" : i !== "checkbox", z = s !== "tint", K = n === !0 && H ? {
+    backgroundImage: `linear-gradient(${B}, ${B})`,
+    color: re,
+    ...z ? { boxShadow: `inset 2px 0 0 ${ae}` } : {},
+    ...ee
+  } : {}, _ = le[d], g = { ..._ ? {
+    color: _,
+    "--malachite-ctx-text-primary": _
+  } : {}, ...K, ...N }, m = i === "checkbox" && n === "mixed" ? "mixed" : i === "radio" || i === "checkbox" ? n === !0 : void 0, E = m === void 0 && n === !0 ? !0 : void 0, L = {
     role: i,
-    "aria-checked": p,
+    "aria-checked": m,
     "aria-current": E,
     "aria-label": x,
     "aria-labelledby": v,
     "aria-disabled": i && e ? !0 : void 0
   };
   if (c)
-    return K(a, y, g);
-  if (w) {
-    const H = h && !e ? /* @__PURE__ */ o(
+    return M(a, C, g);
+  if (S) {
+    const V = 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,
-        "aria-checked": p,
+        tabIndex: y,
+        "aria-checked": m,
         "aria-current": E,
         "aria-label": x,
         "aria-labelledby": v,
@@ -85,9 +86,10 @@ 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,
-        "aria-checked": p,
+        tabIndex: y,
+        "aria-checked": m,
         "aria-current": E,
         "aria-label": x,
         "aria-labelledby": v,
@@ -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,
+          V,
           /* @__PURE__ */ o(
             "div",
             {
-              className: `shrink-0 flex items-center ${$ ? oe : ""}`,
-              children: T
+              className: `shrink-0 flex items-center ${D ? ie : ""}`,
+              children: $
             }
           )
         ]
@@ -127,12 +129,13 @@ 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,
-      "aria-checked": p,
+      tabIndex: y,
+      "aria-checked": m,
       "aria-current": E,
       "aria-label": x,
       "aria-labelledby": v,
@@ -144,37 +147,38 @@ const ee = {
       type: "button",
       onClick: l,
       disabled: e,
-      className: y,
+      className: C,
       style: g,
       role: i,
-      "aria-checked": p,
+      tabIndex: y,
+      "aria-checked": m,
       "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 });
+}, ce = ({ children: t, className: a = "", style: r }) => /* @__PURE__ */ o("div", { className: a, style: r, onClick: (e) => e.stopPropagation(), children: t }), Ee = 39, se = Object.assign(
   ({
     header: t,
     children: a,
     expanded: r,
     onToggle: e,
     sticky: n = !1,
-    stickyTopOffset: d = 0,
-    divider: s = !1,
-    tone: m = "default",
+    stickyTopOffset: s = 0,
+    divider: d = !1,
+    tone: p = "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 = q.useId(), b = e ? () => e(!r) : void 0;
+    return /* @__PURE__ */ O(F, { divider: d, tone: p, 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)]" : ""}`,
-          style: n && r ? { top: d } : void 0,
+          style: n && r ? { top: s } : void 0,
           onClick: b,
           role: "presentation",
           children: [
@@ -182,14 +186,14 @@ 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,
                 onClick: (u) => {
                   u.stopPropagation(), b();
                 },
-                children: /* @__PURE__ */ o(V, { expanded: r })
+                children: /* @__PURE__ */ o(J, { expanded: r })
               }
             ) }),
             t
@@ -199,34 +203,34 @@ const ee = {
       r && /* @__PURE__ */ o("div", { id: l, children: a })
     ] });
   },
-  { Controls: le }
-), F = ({
+  { Controls: ce }
+), P = ({
   children: t,
   padding: a = !1,
   overflow: r = "hidden",
   role: e,
   "aria-label": n,
-  "aria-labelledby": d,
-  className: s = "",
-  style: m
+  "aria-labelledby": s,
+  className: d = "",
+  style: p
 }) => /* @__PURE__ */ o(
   "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 },
+    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" : ""} ${d}`,
+    style: { boxShadow: ne, ...Z, ...p },
     role: e,
     "aria-label": n,
-    "aria-labelledby": d,
+    "aria-labelledby": s,
     children: t
   }
 );
-F.Row = j;
-F.ExpandableRow = ie;
+P.Row = F;
+P.ExpandableRow = se;
 export {
-  ve as EXPANDABLE_ROW_LEAD_PX,
-  F as Surface,
-  ie as SurfaceExpandableRow,
-  j as SurfaceRow,
-  F as default
+  Ee as EXPANDABLE_ROW_LEAD_PX,
+  P as Surface,
+  se as SurfaceExpandableRow,
+  F as SurfaceRow,
+  P as default
 };
 //# sourceMappingURL=Surface.js.map