@stackone/malachite 2.69.0 → 2.71.0

package/dist/components/Search.js

@@ -1,56 +1,57 @@
-import { jsxs as M, jsx as a } from "react/jsx-runtime";
-import { forwardRef as T, useState as Z, useRef as A, useMemo as B } from "react";
-import D from "./CustomIcons/DismissIcon.js";
-import P from "./CustomIcons/SearchIcon.js";
-import { composeRefs as z } from "./composeRefs.js";
-import { CONTROL_TEXT_SIZE_CLASS as G } from "./controlTextSize.js";
-import { controlWidthStyle as L } from "./controlWidth.js";
+import { jsxs as A, jsx as a } from "react/jsx-runtime";
+import { forwardRef as B, useState as D, useRef as M, useMemo as Z } from "react";
+import z from "./CustomIcons/DismissIcon.js";
+import L from "./CustomIcons/SearchIcon.js";
+import { composeRefs as P } from "./composeRefs.js";
+import { CONTROL_TEXT_SIZE_CLASS as X } from "./controlTextSize.js";
+import { controlWidthStyle as G } from "./controlWidth.js";
 import { FOCUS_RING as U } from "./focusRing.js";
-const W = {
+const W = "text-[length:var(--malachite-font-size-medium,14px)]", Y = {
   small: "h-[var(--malachite-control-height-small,28px)] gap-[6px] px-[10px] rounded-[var(--malachite-radius-10,10px)]",
   medium: "h-[var(--malachite-control-height-medium,32px)] gap-[10px] px-[10px] rounded-xl",
   large: "h-[var(--malachite-control-height-large,42px)] gap-[12px] px-[12px] rounded-[var(--malachite-radius-xxl,14px)]"
-}, X = 15, q = (c) => c.preventDefault(), te = T(function({
+}, q = 15, H = (c) => c.preventDefault(), oe = B(function({
   value: s,
   onChange: n,
   placeholder: i,
   size: p = "large",
   variant: g = "default",
+  textSize: S = "control",
   disabled: t = !1,
-  autoFocus: S = !1,
-  className: C = "",
-  width: y,
-  style: $,
-  clearable: E = !1,
+  autoFocus: C = !1,
+  className: y = "",
+  width: $,
+  style: E,
+  clearable: I = !1,
   onClear: o,
   onKeyDown: l,
   "aria-label": m,
   "aria-labelledby": d
 }, h) {
-  const [x, u] = Z(!1), f = A(null), I = B(() => z(h, f), [h]), b = E && s.length > 0 && !t, v = () => {
+  const [x, u] = D(!1), f = M(null), _ = Z(() => P(h, f), [h]), b = I && s.length > 0 && !t, v = () => {
     var e;
     n(""), o == null || o(), (e = f.current) == null || e.focus();
   }, k = (e) => {
     l == null || l(e);
     const j = e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229;
     e.key !== "Escape" || e.defaultPrevented || j || !b || (e.preventDefault(), e.stopPropagation(), v());
-  }, r = g === "muted", w = r ? "bg-[var(--malachite-card-border)]" : "bg-[var(--malachite-card-background)]", N = r ? "border-transparent" : "border-[var(--malachite-card-border)]", R = t ? "" : "hover:border-[var(--malachite-text-placeholder)]", _ = r ? "text-[var(--malachite-text-secondary)]" : "text-[var(--malachite-text-placeholder)]", F = r ? "placeholder:text-[var(--malachite-text-secondary)]" : "placeholder:text-[var(--malachite-text-placeholder)]", O = r ? "none" : x ? "var(--malachite-shadow-accent, 0px 1px 0px 0px rgba(0, 175, 102, 0.15))" : "0px 1px 1px 0px rgba(0, 0, 0, 0.15)";
-  return /* @__PURE__ */ M(
+  }, r = g === "muted", w = r ? "bg-[var(--malachite-card-border)]" : "bg-[var(--malachite-card-background)]", N = r ? "border-transparent" : "border-[var(--malachite-card-border)]", R = t ? "" : "hover:border-[var(--malachite-text-placeholder)]", O = r ? "text-[var(--malachite-text-secondary)]" : "text-[var(--malachite-text-placeholder)]", T = r ? "placeholder:text-[var(--malachite-text-secondary)]" : "placeholder:text-[var(--malachite-text-placeholder)]", F = r ? "none" : x ? "var(--malachite-shadow-accent, 0px 1px 0px 0px rgba(0, 175, 102, 0.15))" : "0px 1px 1px 0px rgba(0, 0, 0, 0.15)";
+  return /* @__PURE__ */ A(
     "div",
     {
-      className: `w-full ${w} border border-solid ${N} ${R} transition-colors flex items-center ${W[p]} ${t ? "opacity-60 cursor-not-allowed" : ""} ${C}`,
+      className: `w-full ${w} border border-solid ${N} ${R} transition-colors flex items-center ${Y[p]} ${t ? "opacity-60 cursor-not-allowed" : ""} ${y}`,
       style: {
-        boxShadow: O,
+        boxShadow: F,
         borderColor: x ? "var(--malachite-control-border-hover, rgba(0, 175, 102, 0.4))" : void 0,
-        ...L(y),
-        ...$
+        ...G($),
+        ...E
       },
       children: [
-        /* @__PURE__ */ a(P, { size: X, className: `${_} shrink-0` }),
+        /* @__PURE__ */ a(L, { size: q, className: `${O} shrink-0` }),
         /* @__PURE__ */ a(
           "input",
           {
-            ref: I,
+            ref: _,
             type: "text",
             value: s,
             onChange: (e) => n(e.target.value),
@@ -61,8 +62,8 @@ const W = {
             "aria-label": d ? m : m ?? i ?? "Search",
             "aria-labelledby": d,
             disabled: t,
-            autoFocus: S,
-            className: `flex-1 bg-transparent border-none outline-none ${G[p]} font-medium text-[var(--malachite-text-primary)] ${F} placeholder:font-medium disabled:cursor-not-allowed min-w-0`
+            autoFocus: C,
+            className: `flex-1 bg-transparent border-none outline-none ${S === "body" ? W : X[p]} font-medium text-[var(--malachite-text-primary)] ${T} placeholder:font-medium disabled:cursor-not-allowed min-w-0`
           }
         ),
         b && /* @__PURE__ */ a(
@@ -70,10 +71,10 @@ const W = {
           {
             type: "button",
             "aria-label": "Clear search",
-            onMouseDown: q,
+            onMouseDown: H,
             onClick: v,
             className: `shrink-0 flex items-center justify-center w-6 h-6 -mr-[5px] bg-transparent border-none rounded text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-primary)] cursor-pointer ${U}`,
-            children: /* @__PURE__ */ a(D, { size: 10 })
+            children: /* @__PURE__ */ a(z, { size: 10 })
           }
         )
       ]
@@ -81,7 +82,7 @@ const W = {
   );
 });
 export {
-  te as Search,
-  te as default
+  oe as Search,
+  oe as default
 };
 //# sourceMappingURL=Search.js.map

package/dist/components/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sources":["../../src/components/Search.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef, useState } from 'react';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport SearchIcon from './CustomIcons/SearchIcon';\nimport { composeRefs } from './composeRefs';\nimport { CONTROL_TEXT_SIZE_CLASS } from './controlTextSize';\nimport { controlWidthStyle } from './controlWidth';\nimport { FOCUS_RING } from './focusRing';\n\nexport type SearchSize = 'small' | 'medium' | 'large';\nexport type SearchVariant = 'default' | 'muted';\n\n// Figma \"Search Element - Standard\": Small 28px, Medium 32px, Large 42px, with the radius\n// tracking the tier (10/12/14) and the icon staying 15px throughout.\nconst SIZE_CLASSES: Record<SearchSize, string> = {\n    small: 'h-[var(--malachite-control-height-small,28px)] gap-[6px] px-[10px] rounded-[var(--malachite-radius-10,10px)]',\n    medium: 'h-[var(--malachite-control-height-medium,32px)] gap-[10px] px-[10px] rounded-xl',\n    large: 'h-[var(--malachite-control-height-large,42px)] gap-[12px] px-[12px] rounded-[var(--malachite-radius-xxl,14px)]',\n};\n\nconst ICON_SIZE = 15;\n\nexport interface SearchProps {\n    value: string;\n    onChange: (value: string) => void;\n    placeholder?: string;\n    /** 'large' (42px) for form inputs; 'medium' (32px) for toolbars; 'small' (28px) in a table. */\n    size?: SearchSize;\n    variant?: SearchVariant;\n    disabled?: boolean;\n    autoFocus?: boolean;\n    className?: string;\n    width?: string | number;\n    style?: React.CSSProperties;\n    /**\n     * Shows a clear button while the field has text, and lets Escape clear it. Either way focus\n     * stays in the field, and Escape that clears is not also passed to a surrounding panel.\n     */\n    clearable?: boolean;\n    /** Called after `onChange('')` when the clear button or Escape empties the field. */\n    onClear?: () => void;\n    /** Runs before Search's own Escape handling; call `preventDefault()` to skip it. */\n    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n    /** The field's accessible name. Falls back to the placeholder, then \"Search\". */\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n}\n\nconst keepFocus = (event: React.MouseEvent) => event.preventDefault();\n\n/** Forwards a ref to the input, so a consumer can focus the field. */\nconst Search = forwardRef<HTMLInputElement, SearchProps>(function Search(\n    {\n        value,\n        onChange,\n        placeholder,\n        size = 'large',\n        variant = 'default',\n        disabled = false,\n        autoFocus = false,\n        className = '',\n        width,\n        style,\n        clearable = false,\n        onClear,\n        onKeyDown,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n    },\n    ref,\n) {\n    const [focused, setFocused] = useState(false);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const setInputRef = useMemo(() => composeRefs(ref, inputRef), [ref]);\n    const canClear = clearable && value.length > 0 && !disabled;\n\n    const clear = () => {\n        onChange('');\n        onClear?.();\n        inputRef.current?.focus();\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        onKeyDown?.(event);\n        // Escape mid-composition cancels the IME's candidate text, not the query.\n        const composing = event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229;\n        if (event.key !== 'Escape' || event.defaultPrevented || composing || !canClear) {\n            return;\n        }\n        // Both, as Dropdown does: an ancestor's own onKeyDown runs before the escape layers.\n        event.preventDefault();\n        event.stopPropagation();\n        clear();\n    };\n    const isMuted = variant === 'muted';\n\n    // Muted variant: a borderless search that sits on a surface (no shadow). Default:\n    // white field with border + subtle shadow. Both keep a visible focus border.\n    // The fill is the Border colour by design; the dimmed grey vanishes on a sunken page.\n    const bgClass = isMuted\n        ? 'bg-[var(--malachite-card-border)]'\n        : 'bg-[var(--malachite-card-background)]';\n    const restingBorderClass = isMuted\n        ? 'border-transparent'\n        : 'border-[var(--malachite-card-border)]';\n    // Hover darkens the border; focus (inline below) takes precedence.\n    const hoverBorderClass = disabled ? '' : 'hover:border-[var(--malachite-text-placeholder)]';\n    const iconColorClass = isMuted\n        ? 'text-[var(--malachite-text-secondary)]'\n        : 'text-[var(--malachite-text-placeholder)]';\n    const placeholderColorClass = isMuted\n        ? 'placeholder:text-[var(--malachite-text-secondary)]'\n        : 'placeholder:text-[var(--malachite-text-placeholder)]';\n    const boxShadow = isMuted\n        ? 'none'\n        : focused\n          ? 'var(--malachite-shadow-accent, 0px 1px 0px 0px rgba(0, 175, 102, 0.15))'\n          : '0px 1px 1px 0px rgba(0, 0, 0, 0.15)';\n\n    return (\n        <div\n            className={`w-full ${bgClass} border border-solid ${restingBorderClass} ${hoverBorderClass} transition-colors flex items-center ${SIZE_CLASSES[size]} ${disabled ? 'opacity-60 cursor-not-allowed' : ''} ${className}`}\n            style={{\n                boxShadow,\n                borderColor: focused\n                    ? 'var(--malachite-control-border-hover, rgba(0, 175, 102, 0.4))'\n                    : undefined,\n                ...controlWidthStyle(width),\n                ...style,\n            }}\n        >\n            <SearchIcon size={ICON_SIZE} className={`${iconColorClass} shrink-0`} />\n            <input\n                ref={setInputRef}\n                type=\"text\"\n                value={value}\n                onChange={(e) => onChange(e.target.value)}\n                onKeyDown={handleKeyDown}\n                onFocus={() => setFocused(true)}\n                onBlur={() => setFocused(false)}\n                placeholder={placeholder}\n                aria-label={ariaLabelledBy ? ariaLabel : (ariaLabel ?? placeholder ?? 'Search')}\n                aria-labelledby={ariaLabelledBy}\n                disabled={disabled}\n                autoFocus={autoFocus}\n                className={`flex-1 bg-transparent border-none outline-none ${CONTROL_TEXT_SIZE_CLASS[size]} font-medium text-[var(--malachite-text-primary)] ${placeholderColorClass} placeholder:font-medium disabled:cursor-not-allowed min-w-0`}\n            />\n            {canClear && (\n                <button\n                    type=\"button\"\n                    aria-label=\"Clear search\"\n                    onMouseDown={keepFocus}\n                    onClick={clear}\n                    className={`shrink-0 flex items-center justify-center w-6 h-6 -mr-[5px] bg-transparent border-none rounded text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-primary)] cursor-pointer ${FOCUS_RING}`}\n                >\n                    <DismissIcon size={10} />\n                </button>\n            )}\n        </div>\n    );\n});\n\nexport default Search;\nexport { Search };\n"],"names":["SIZE_CLASSES","ICON_SIZE","keepFocus","event","Search","forwardRef","value","onChange","placeholder","size","variant","disabled","autoFocus","className","width","style","clearable","onClear","onKeyDown","ariaLabel","ariaLabelledBy","ref","focused","setFocused","useState","inputRef","useRef","setInputRef","useMemo","composeRefs","canClear","clear","_a","handleKeyDown","composing","isMuted","bgClass","restingBorderClass","hoverBorderClass","iconColorClass","placeholderColorClass","boxShadow","jsxs","controlWidthStyle","jsx","SearchIcon","CONTROL_TEXT_SIZE_CLASS","FOCUS_RING","DismissIcon"],"mappings":"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"}
+{"version":3,"file":"Search.js","sources":["../../src/components/Search.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef, useState } from 'react';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport SearchIcon from './CustomIcons/SearchIcon';\nimport { composeRefs } from './composeRefs';\nimport { CONTROL_TEXT_SIZE_CLASS } from './controlTextSize';\nimport { controlWidthStyle } from './controlWidth';\nimport { FOCUS_RING } from './focusRing';\n\nexport type SearchSize = 'small' | 'medium' | 'large';\nexport type SearchVariant = 'default' | 'muted';\n/** `body` is the 14px body step at any size. */\nexport type SearchTextSize = 'control' | 'body';\n\nconst BODY_TEXT_CLASS = 'text-[length:var(--malachite-font-size-medium,14px)]';\n\n// Figma \"Search Element - Standard\": Small 28px, Medium 32px, Large 42px, with the radius\n// tracking the tier (10/12/14) and the icon staying 15px throughout.\nconst SIZE_CLASSES: Record<SearchSize, string> = {\n    small: 'h-[var(--malachite-control-height-small,28px)] gap-[6px] px-[10px] rounded-[var(--malachite-radius-10,10px)]',\n    medium: 'h-[var(--malachite-control-height-medium,32px)] gap-[10px] px-[10px] rounded-xl',\n    large: 'h-[var(--malachite-control-height-large,42px)] gap-[12px] px-[12px] rounded-[var(--malachite-radius-xxl,14px)]',\n};\n\nconst ICON_SIZE = 15;\n\nexport interface SearchProps {\n    value: string;\n    onChange: (value: string) => void;\n    placeholder?: string;\n    /** 'large' (42px) for form inputs; 'medium' (32px) for toolbars; 'small' (28px) in a table. */\n    size?: SearchSize;\n    variant?: SearchVariant;\n    textSize?: SearchTextSize;\n    disabled?: boolean;\n    autoFocus?: boolean;\n    className?: string;\n    width?: string | number;\n    style?: React.CSSProperties;\n    /**\n     * Shows a clear button while the field has text, and lets Escape clear it. Either way focus\n     * stays in the field, and Escape that clears is not also passed to a surrounding panel.\n     */\n    clearable?: boolean;\n    /** Called after `onChange('')` when the clear button or Escape empties the field. */\n    onClear?: () => void;\n    /** Runs before Search's own Escape handling; call `preventDefault()` to skip it. */\n    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n    /** The field's accessible name. Falls back to the placeholder, then \"Search\". */\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n}\n\nconst keepFocus = (event: React.MouseEvent) => event.preventDefault();\n\n/** Forwards a ref to the input, so a consumer can focus the field. */\nconst Search = forwardRef<HTMLInputElement, SearchProps>(function Search(\n    {\n        value,\n        onChange,\n        placeholder,\n        size = 'large',\n        variant = 'default',\n        textSize = 'control',\n        disabled = false,\n        autoFocus = false,\n        className = '',\n        width,\n        style,\n        clearable = false,\n        onClear,\n        onKeyDown,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n    },\n    ref,\n) {\n    const [focused, setFocused] = useState(false);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const setInputRef = useMemo(() => composeRefs(ref, inputRef), [ref]);\n    const canClear = clearable && value.length > 0 && !disabled;\n\n    const clear = () => {\n        onChange('');\n        onClear?.();\n        inputRef.current?.focus();\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        onKeyDown?.(event);\n        // Escape mid-composition cancels the IME's candidate text, not the query.\n        const composing = event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229;\n        if (event.key !== 'Escape' || event.defaultPrevented || composing || !canClear) {\n            return;\n        }\n        // Both, as Dropdown does: an ancestor's own onKeyDown runs before the escape layers.\n        event.preventDefault();\n        event.stopPropagation();\n        clear();\n    };\n    const isMuted = variant === 'muted';\n\n    // Muted variant: a borderless search that sits on a surface (no shadow). Default:\n    // white field with border + subtle shadow. Both keep a visible focus border.\n    // The fill is the Border colour by design; the dimmed grey vanishes on a sunken page.\n    const bgClass = isMuted\n        ? 'bg-[var(--malachite-card-border)]'\n        : 'bg-[var(--malachite-card-background)]';\n    const restingBorderClass = isMuted\n        ? 'border-transparent'\n        : 'border-[var(--malachite-card-border)]';\n    // Hover darkens the border; focus (inline below) takes precedence.\n    const hoverBorderClass = disabled ? '' : 'hover:border-[var(--malachite-text-placeholder)]';\n    const iconColorClass = isMuted\n        ? 'text-[var(--malachite-text-secondary)]'\n        : 'text-[var(--malachite-text-placeholder)]';\n    const placeholderColorClass = isMuted\n        ? 'placeholder:text-[var(--malachite-text-secondary)]'\n        : 'placeholder:text-[var(--malachite-text-placeholder)]';\n    const boxShadow = isMuted\n        ? 'none'\n        : focused\n          ? 'var(--malachite-shadow-accent, 0px 1px 0px 0px rgba(0, 175, 102, 0.15))'\n          : '0px 1px 1px 0px rgba(0, 0, 0, 0.15)';\n\n    return (\n        <div\n            className={`w-full ${bgClass} border border-solid ${restingBorderClass} ${hoverBorderClass} transition-colors flex items-center ${SIZE_CLASSES[size]} ${disabled ? 'opacity-60 cursor-not-allowed' : ''} ${className}`}\n            style={{\n                boxShadow,\n                borderColor: focused\n                    ? 'var(--malachite-control-border-hover, rgba(0, 175, 102, 0.4))'\n                    : undefined,\n                ...controlWidthStyle(width),\n                ...style,\n            }}\n        >\n            <SearchIcon size={ICON_SIZE} className={`${iconColorClass} shrink-0`} />\n            <input\n                ref={setInputRef}\n                type=\"text\"\n                value={value}\n                onChange={(e) => onChange(e.target.value)}\n                onKeyDown={handleKeyDown}\n                onFocus={() => setFocused(true)}\n                onBlur={() => setFocused(false)}\n                placeholder={placeholder}\n                aria-label={ariaLabelledBy ? ariaLabel : (ariaLabel ?? placeholder ?? 'Search')}\n                aria-labelledby={ariaLabelledBy}\n                disabled={disabled}\n                autoFocus={autoFocus}\n                className={`flex-1 bg-transparent border-none outline-none ${textSize === 'body' ? BODY_TEXT_CLASS : CONTROL_TEXT_SIZE_CLASS[size]} font-medium text-[var(--malachite-text-primary)] ${placeholderColorClass} placeholder:font-medium disabled:cursor-not-allowed min-w-0`}\n            />\n            {canClear && (\n                <button\n                    type=\"button\"\n                    aria-label=\"Clear search\"\n                    onMouseDown={keepFocus}\n                    onClick={clear}\n                    className={`shrink-0 flex items-center justify-center w-6 h-6 -mr-[5px] bg-transparent border-none rounded text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-primary)] cursor-pointer ${FOCUS_RING}`}\n                >\n                    <DismissIcon size={10} />\n                </button>\n            )}\n        </div>\n    );\n});\n\nexport default Search;\nexport { Search };\n"],"names":["BODY_TEXT_CLASS","SIZE_CLASSES","ICON_SIZE","keepFocus","event","Search","forwardRef","value","onChange","placeholder","size","variant","textSize","disabled","autoFocus","className","width","style","clearable","onClear","onKeyDown","ariaLabel","ariaLabelledBy","ref","focused","setFocused","useState","inputRef","useRef","setInputRef","useMemo","composeRefs","canClear","clear","_a","handleKeyDown","composing","isMuted","bgClass","restingBorderClass","hoverBorderClass","iconColorClass","placeholderColorClass","boxShadow","jsxs","controlWidthStyle","jsx","SearchIcon","CONTROL_TEXT_SIZE_CLASS","FOCUS_RING","DismissIcon"],"mappings":"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"}

package/dist/components/StatusPill.js

@@ -0,0 +1,61 @@
+import { jsxs as o, jsx as r, Fragment as p } from "react/jsx-runtime";
+import u from "./CustomIcons/CheckCircleFilled.js";
+import x from "./CustomIcons/ErrorCircleFilled.js";
+import g from "./CustomIcons/InfoCircleFilled.js";
+import f from "./CustomIcons/WarningCircleFilled.js";
+import h from "./Spinner.js";
+const b = {
+  success: "bg-[var(--malachite-alert-success-background)] text-[var(--malachite-alert-success-foreground)] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-alert-success-foreground)_70%,var(--malachite-text-primary))]",
+  neutral: "bg-[var(--malachite-alert-info-background)] text-[var(--malachite-alert-info-foreground)]",
+  warning: "bg-[var(--malachite-alert-warning-background)] text-[var(--malachite-alert-warning-foreground)] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-alert-warning-foreground)_70%,var(--malachite-text-primary))]",
+  error: "bg-[var(--malachite-alert-error-background)] text-[var(--malachite-alert-error-foreground)] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-alert-error-foreground)_70%,var(--malachite-text-primary))]"
+}, v = {
+  success: u,
+  neutral: g,
+  warning: f,
+  error: x
+}, _ = "border border-solid border-[var(--malachite-card-border)] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,currentColor_24%,transparent)]", F = ({
+  label: n,
+  detail: l,
+  tone: i = "neutral",
+  icon: s,
+  busy: e = !1,
+  live: a = !1,
+  "aria-label": c,
+  "aria-labelledby": t,
+  className: m = ""
+}) => {
+  const d = v[i];
+  return /* @__PURE__ */ o(
+    "span",
+    {
+      role: a ? "status" : void 0,
+      "aria-label": a && !t ? c : void 0,
+      "aria-labelledby": a ? t : void 0,
+      "aria-busy": e || void 0,
+      className: `inline-flex items-center gap-[6px] h-[28px] max-w-full min-w-0 pl-[8px] pr-[10px] rounded-full overflow-hidden whitespace-nowrap text-[12px] font-medium ${_} ${b[i]} ${m}`,
+      children: [
+        /* @__PURE__ */ r(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: `inline-flex shrink-0 items-center justify-center size-[16px] ${e ? "" : "[&_svg]:size-full!"}`,
+            children: e ? /* @__PURE__ */ r(h, { size: "xxxsmall" }) : s ?? /* @__PURE__ */ r(d, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ o("span", { className: "min-w-0 overflow-hidden text-ellipsis", children: [
+          n,
+          l ? /* @__PURE__ */ o(p, { children: [
+            " · ",
+            /* @__PURE__ */ r("span", { className: "font-mono", children: l })
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+};
+export {
+  F as StatusPill,
+  F as default
+};
+//# sourceMappingURL=StatusPill.js.map

package/dist/components/StatusPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusPill.js","sources":["../../src/components/StatusPill.tsx"],"sourcesContent":["import React from 'react';\nimport CheckCircleFilled, { type IconProps } from './CustomIcons/CheckCircleFilled';\nimport ErrorCircleFilled from './CustomIcons/ErrorCircleFilled';\nimport InfoCircleFilled from './CustomIcons/InfoCircleFilled';\nimport WarningCircleFilled from './CustomIcons/WarningCircleFilled';\nimport Spinner from './Spinner';\n\nexport type StatusPillTone = 'success' | 'neutral' | 'warning' | 'error';\n\nexport interface StatusPillProps {\n    label: string;\n    /** Set in the mono face after a `·`. */\n    detail?: string;\n    tone?: StatusPillTone;\n    icon?: React.ReactNode;\n    busy?: boolean;\n    /** Makes it a `status` live region. Off by default, as on `Alert`. */\n    live?: boolean;\n    /** Names the live region; only applies with `live`. */\n    'aria-label'?: string;\n    /** Only applies with `live`. */\n    'aria-labelledby'?: string;\n    className?: string;\n}\n\n// Text leans 30% toward the primary colour so every tone holds 4.5:1 on its tint.\nconst TONE_CLASSES: Record<StatusPillTone, string> = {\n    success:\n        'bg-[var(--malachite-alert-success-background)] text-[var(--malachite-alert-success-foreground)] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-alert-success-foreground)_70%,var(--malachite-text-primary))]',\n    neutral:\n        'bg-[var(--malachite-alert-info-background)] text-[var(--malachite-alert-info-foreground)]',\n    warning:\n        'bg-[var(--malachite-alert-warning-background)] text-[var(--malachite-alert-warning-foreground)] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-alert-warning-foreground)_70%,var(--malachite-text-primary))]',\n    error: 'bg-[var(--malachite-alert-error-background)] text-[var(--malachite-alert-error-foreground)] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-alert-error-foreground)_70%,var(--malachite-text-primary))]',\n};\n\nconst TONE_ICONS: Record<StatusPillTone, React.FC<IconProps>> = {\n    success: CheckCircleFilled,\n    neutral: InfoCircleFilled,\n    warning: WarningCircleFilled,\n    error: ErrorCircleFilled,\n};\n\nconst BORDER =\n    'border border-solid border-[var(--malachite-card-border)] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,currentColor_24%,transparent)]';\n\nconst StatusPill: React.FC<StatusPillProps> = ({\n    label,\n    detail,\n    tone = 'neutral',\n    icon,\n    busy = false,\n    live = false,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n}) => {\n    const ToneIcon = TONE_ICONS[tone];\n\n    return (\n        <span\n            role={live ? 'status' : undefined}\n            aria-label={live && !ariaLabelledBy ? ariaLabel : undefined}\n            aria-labelledby={live ? ariaLabelledBy : undefined}\n            aria-busy={busy || undefined}\n            className={`inline-flex items-center gap-[6px] h-[28px] max-w-full min-w-0 pl-[8px] pr-[10px] rounded-full overflow-hidden whitespace-nowrap text-[12px] font-medium ${BORDER} ${TONE_CLASSES[tone]} ${className}`}\n        >\n            <span\n                aria-hidden=\"true\"\n                className={`inline-flex shrink-0 items-center justify-center size-[16px] ${busy ? '' : '[&_svg]:size-full!'}`}\n            >\n                {busy ? <Spinner size=\"xxxsmall\" /> : (icon ?? <ToneIcon size={16} />)}\n            </span>\n            <span className=\"min-w-0 overflow-hidden text-ellipsis\">\n                {label}\n                {detail ? (\n                    <>\n                        {' · '}\n                        <span className=\"font-mono\">{detail}</span>\n                    </>\n                ) : null}\n            </span>\n        </span>\n    );\n};\n\nexport default StatusPill;\nexport { StatusPill };\n"],"names":["TONE_CLASSES","TONE_ICONS","CheckCircleFilled","InfoCircleFilled","WarningCircleFilled","ErrorCircleFilled","BORDER","StatusPill","label","detail","tone","icon","busy","live","ariaLabel","ariaLabelledBy","className","ToneIcon","jsxs","jsx","Spinner","Fragment"],"mappings":";;;;;;AA0BA,MAAMA,IAA+C;AAAA,EACjD,SACI;AAAA,EACJ,SACI;AAAA,EACJ,SACI;AAAA,EACJ,OAAO;AACX,GAEMC,IAA0D;AAAA,EAC5D,SAASC;AAAA,EACT,SAASC;AAAA,EACT,SAASC;AAAA,EACT,OAAOC;AACX,GAEMC,IACF,kKAEEC,IAAwC,CAAC;AAAA,EAC3C,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,cAAcC;AAAA,EACd,mBAAmBC;AAAA,EACnB,WAAAC,IAAY;AAChB,MAAM;AACF,QAAMC,IAAWhB,EAAWS,CAAI;AAEhC,SACI,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAML,IAAO,WAAW;AAAA,MACxB,cAAYA,KAAQ,CAACE,IAAiBD,IAAY;AAAA,MAClD,mBAAiBD,IAAOE,IAAiB;AAAA,MACzC,aAAWH,KAAQ;AAAA,MACnB,WAAW,4JAA4JN,CAAM,IAAIN,EAAaU,CAAI,CAAC,IAAIM,CAAS;AAAA,MAEhN,UAAA;AAAA,QAAA,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,eAAY;AAAA,YACZ,WAAW,gEAAgEP,IAAO,KAAK,oBAAoB;AAAA,YAE1G,UAAAA,IAAO,gBAAAO,EAACC,GAAA,EAAQ,MAAK,YAAW,IAAMT,KAAQ,gBAAAQ,EAACF,GAAA,EAAS,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAEvE,gBAAAC,EAAC,QAAA,EAAK,WAAU,yCACX,UAAA;AAAA,UAAAV;AAAA,UACAC,IACG,gBAAAS,EAAAG,GAAA,EACK,UAAA;AAAA,YAAA;AAAA,YACD,gBAAAF,EAAC,QAAA,EAAK,WAAU,aAAa,UAAAV,EAAA,CAAO;AAAA,UAAA,EAAA,CACxC,IACA;AAAA,QAAA,EAAA,CACR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/dist/components/Surface.js

@@ -1,227 +1,232 @@
-import { jsx as o, jsxs as k } from "react/jsx-runtime";
-import P from "react";
-import { paintOnChild as U } from "./asChild.js";
-import { DisclosureArrow as W } from "./DisclosureArrow.js";
-import { FOCUS_RING_INSET as A } from "./focusRing.js";
-import { resolveRel as $ } from "./linkRel.js";
-import { safeHref as X } from "./safeHref.js";
-import { isRenderableNode as H } from "./renderableNode.js";
-import { FOREGROUND_RESET as z, SELECTED_TEXT_CONTEXT as K, SELECTED_ROW_ACCENT as V, SELECTED_ROW_FOREGROUND as q, SELECTED_ROW_BACKGROUND as D } from "./selectedRow.js";
-const J = {
+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 = {
+  none: "",
+  compact: "px-[16px] py-[8px]"
+}, ae = {
   default: "",
   muted: "bg-[var(--malachite-card-dimmed-background)]",
   success: "bg-[var(--malachite-tag-success-background)]",
   error: "bg-[var(--malachite-tag-error-background)]"
-}, M = {
+}, re = {
   success: "var(--malachite-tag-success-foreground)",
   error: "var(--malachite-tag-error-foreground)"
-}, Q = "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", Y = "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)", L = (t) => {
+}, 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) => {
   const {
     children: a,
     divider: r = !1,
     disabled: e = !1,
-    selected: i,
-    selection: b,
+    selected: n,
+    selection: d,
     tone: s = "default",
-    className: u = "",
-    style: g
-  } = t, d = t.asChild === !0, {
-    onClick: n,
-    href: E,
-    target: c,
-    rel: y,
-    trailing: S,
-    revealTrailing: _,
-    role: l
-  } = d ? {} : t, p = X(E), f = d ? void 0 : t["aria-label"], h = d ? void 0 : t["aria-labelledby"], N = !!(n || p), I = e && (N || d) ? "" : "transition-colors hover:bg-[var(--malachite-buttonlist-hover-background)]", j = s !== "default", O = [
+    inset: m = "none",
+    className: f = "",
+    style: C
+  } = t, c = t.asChild === !0, {
+    onClick: l,
+    href: b,
+    target: u,
+    rel: O,
+    trailing: T,
+    revealTrailing: $,
+    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 = [
     "w-full text-left border-0",
-    J[s],
+    U,
     r ? "border-b border-solid border-[var(--malachite-card-border)]" : "",
-    I
-  ].filter(Boolean).join(" "), w = [
-    N ? `appearance-none ${j ? "" : "bg-transparent"} p-0 ${A}` : "",
+    P
+  ].filter(Boolean).join(" "), R = [
+    N ? `appearance-none ${G ? "" : "bg-transparent"} ${W} ${B}` : "",
     N && !e ? "cursor-pointer" : ""
-  ].filter(Boolean).join(" "), C = [O, w, u].filter(Boolean).join(" "), F = i === !0 && (b ? b === "highlight" : l !== "checkbox") ? {
-    backgroundImage: `linear-gradient(${D}, ${D})`,
-    color: q,
-    boxShadow: `inset 2px 0 0 ${V}`,
-    ...K
-  } : {}, R = M[s], x = { ...R ? {
-    color: R,
-    "--malachite-ctx-text-primary": R
-  } : {}, ...F, ...g }, m = l === "checkbox" && i === "mixed" ? "mixed" : l === "radio" || l === "checkbox" ? i === !0 : void 0, v = m === void 0 && i === !0 ? !0 : void 0, T = {
-    role: l,
-    "aria-checked": m,
-    "aria-current": v,
-    "aria-label": f,
-    "aria-labelledby": h,
-    "aria-disabled": l && e ? !0 : void 0
+  ].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 = {
+    role: i,
+    "aria-checked": p,
+    "aria-current": E,
+    "aria-label": x,
+    "aria-labelledby": v,
+    "aria-disabled": i && e ? !0 : void 0
   };
-  if (d)
-    return U(a, C, x);
-  if (H(S)) {
-    const G = p && !e ? /* @__PURE__ */ o(
+  if (c)
+    return K(a, y, g);
+  if (w) {
+    const H = h && !e ? /* @__PURE__ */ o(
       "a",
       {
-        href: p,
-        target: c,
-        rel: $(y, c),
-        onClick: n,
-        className: `${w} border-0 flex-1 min-w-0 text-left no-underline text-inherit`,
-        role: l,
-        "aria-checked": m,
-        "aria-current": v,
-        "aria-label": f,
-        "aria-labelledby": h,
+        href: h,
+        target: u,
+        rel: L(O, u),
+        onClick: l,
+        className: `${R} border-0 flex-1 min-w-0 text-left no-underline text-inherit`,
+        role: i,
+        "aria-checked": p,
+        "aria-current": E,
+        "aria-label": x,
+        "aria-labelledby": v,
         children: a
       }
-    ) : n ? /* @__PURE__ */ o(
+    ) : l ? /* @__PURE__ */ o(
       "button",
       {
         type: "button",
-        onClick: n,
+        onClick: l,
         disabled: e,
-        className: `${w} border-0 flex-1 min-w-0 text-left`,
-        role: l,
-        "aria-checked": m,
-        "aria-current": v,
-        "aria-label": f,
-        "aria-labelledby": h,
+        className: `${R} border-0 flex-1 min-w-0 text-left`,
+        role: i,
+        "aria-checked": p,
+        "aria-current": E,
+        "aria-label": x,
+        "aria-labelledby": v,
         children: a
       }
     ) : (
       // 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", ...T, children: a })
+      /* @__PURE__ */ o("div", { className: "flex-1 min-w-0", ...A, children: a })
     );
-    return /* @__PURE__ */ k(
+    return /* @__PURE__ */ _(
       "div",
       {
         className: [
-          O,
+          D,
           "flex items-center",
-          _ ? "group/row" : "",
-          u
+          S,
+          $ ? "group/row" : "",
+          f
         ].filter(Boolean).join(" "),
-        style: x,
+        style: g,
         children: [
-          G,
+          H,
           /* @__PURE__ */ o(
             "div",
             {
-              className: `shrink-0 flex items-center ${_ ? Q : ""}`,
-              children: S
+              className: `shrink-0 flex items-center ${$ ? oe : ""}`,
+              children: T
             }
           )
         ]
       }
     );
   }
-  return p && !e ? /* @__PURE__ */ o(
+  return h && !e ? /* @__PURE__ */ o(
     "a",
     {
-      href: p,
-      target: c,
-      rel: $(y, c),
-      onClick: n,
-      className: `${C} no-underline text-inherit`,
-      style: x,
-      role: l,
-      "aria-checked": m,
-      "aria-current": v,
-      "aria-label": f,
-      "aria-labelledby": h,
+      href: h,
+      target: u,
+      rel: L(O, u),
+      onClick: l,
+      className: `${y} no-underline text-inherit`,
+      style: g,
+      role: i,
+      "aria-checked": p,
+      "aria-current": E,
+      "aria-label": x,
+      "aria-labelledby": v,
       children: a
     }
-  ) : n ? /* @__PURE__ */ o(
+  ) : l ? /* @__PURE__ */ o(
     "button",
     {
       type: "button",
-      onClick: n,
+      onClick: l,
       disabled: e,
-      className: C,
-      style: x,
-      role: l,
-      "aria-checked": m,
-      "aria-current": v,
-      "aria-label": f,
-      "aria-labelledby": h,
+      className: y,
+      style: g,
+      role: i,
+      "aria-checked": p,
+      "aria-current": E,
+      "aria-label": x,
+      "aria-labelledby": v,
       children: a
     }
-  ) : /* @__PURE__ */ o("div", { className: C, style: x, ...T, children: a });
-}, Z = ({ children: t, className: a = "", style: r }) => /* @__PURE__ */ o("div", { className: a, style: r, onClick: (e) => e.stopPropagation(), children: t }), me = 39, ee = Object.assign(
+  ) : /* @__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(
   ({
     header: t,
     children: a,
     expanded: r,
     onToggle: e,
-    sticky: i = !1,
-    stickyTopOffset: b = 0,
+    sticky: n = !1,
+    stickyTopOffset: d = 0,
     divider: s = !1,
-    tone: u = "default",
-    "aria-label": g,
-    className: d = "",
-    style: n
+    tone: m = "default",
+    "aria-label": f,
+    className: C = "",
+    style: c
   }) => {
-    const E = P.useId(), c = e ? () => e(!r) : void 0;
-    return /* @__PURE__ */ k(L, { divider: s, tone: u, className: d, style: n, children: [
-      /* @__PURE__ */ k(
+    const l = z.useId(), b = e ? () => e(!r) : void 0;
+    return /* @__PURE__ */ _(j, { divider: s, tone: m, className: C, style: c, children: [
+      /* @__PURE__ */ _(
         "div",
         {
-          className: `group flex items-center w-full ${c ? "cursor-pointer" : ""} ${i && r ? "sticky z-[1] bg-[var(--malachite-card-background)]" : ""}`,
-          style: i && r ? { top: b } : void 0,
-          onClick: c,
+          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,
+          onClick: b,
           role: "presentation",
           children: [
-            /* @__PURE__ */ o("span", { className: "shrink-0 flex items-center pl-[16px] pr-[12px]", children: c && /* @__PURE__ */ o(
+            /* @__PURE__ */ o("span", { className: "shrink-0 flex items-center pl-[16px] pr-[12px]", children: b && /* @__PURE__ */ o(
               "button",
               {
                 type: "button",
-                className: `appearance-none bg-transparent border-0 p-0 flex items-center cursor-pointer ${A}`,
+                className: `appearance-none bg-transparent border-0 p-0 flex items-center cursor-pointer ${B}`,
                 "aria-expanded": r,
-                "aria-controls": E,
-                "aria-label": g,
-                onClick: (y) => {
-                  y.stopPropagation(), c();
+                "aria-controls": l,
+                "aria-label": f,
+                onClick: (u) => {
+                  u.stopPropagation(), b();
                 },
-                children: /* @__PURE__ */ o(W, { expanded: r })
+                children: /* @__PURE__ */ o(V, { expanded: r })
               }
             ) }),
             t
           ]
         }
       ),
-      r && /* @__PURE__ */ o("div", { id: E, children: a })
+      r && /* @__PURE__ */ o("div", { id: l, children: a })
     ] });
   },
-  { Controls: Z }
-), B = ({
+  { Controls: le }
+), F = ({
   children: t,
   padding: a = !1,
   overflow: r = "hidden",
   role: e,
-  "aria-label": i,
-  "aria-labelledby": b,
+  "aria-label": n,
+  "aria-labelledby": d,
   className: s = "",
-  style: u
+  style: m
 }) => /* @__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: Y, ...z, ...u },
+    style: { boxShadow: te, ...M, ...m },
     role: e,
-    "aria-label": i,
-    "aria-labelledby": b,
+    "aria-label": n,
+    "aria-labelledby": d,
     children: t
   }
 );
-B.Row = L;
-B.ExpandableRow = ee;
+F.Row = j;
+F.ExpandableRow = ie;
 export {
-  me as EXPANDABLE_ROW_LEAD_PX,
-  B as Surface,
-  ee as SurfaceExpandableRow,
-  L as SurfaceRow,
-  B as default
+  ve as EXPANDABLE_ROW_LEAD_PX,
+  F as Surface,
+  ie as SurfaceExpandableRow,
+  j as SurfaceRow,
+  F as default
 };
 //# sourceMappingURL=Surface.js.map