@stackone/malachite 2.58.0 → 2.60.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,57 +1,87 @@
1
- import { jsxs as C, jsx as c } from "react/jsx-runtime";
2
- import { useState as $ } from "react";
3
- import y from "./CustomIcons/SearchIcon.js";
4
- import { CONTROL_TEXT_SIZE_CLASS as w } from "./controlTextSize.js";
5
- import { controlWidthStyle as E } from "./controlWidth.js";
6
- const I = {
1
+ import { jsxs as M, jsx as a } from "react/jsx-runtime";
2
+ import { forwardRef as T, useState as Z, useRef as A, useMemo as B } from "react";
3
+ import D from "./CustomIcons/DismissIcon.js";
4
+ import P from "./CustomIcons/SearchIcon.js";
5
+ import { composeRefs as z } from "./composeRefs.js";
6
+ import { CONTROL_TEXT_SIZE_CLASS as G } from "./controlTextSize.js";
7
+ import { controlWidthStyle as L } from "./controlWidth.js";
8
+ import { FOCUS_RING as U } from "./focusRing.js";
9
+ const W = {
7
10
  small: "h-[var(--malachite-control-height-small,28px)] gap-[6px] px-[10px] rounded-[var(--malachite-radius-10,10px)]",
8
11
  medium: "h-[var(--malachite-control-height-medium,32px)] gap-[10px] px-[10px] rounded-xl",
9
12
  large: "h-[var(--malachite-control-height-large,42px)] gap-[12px] px-[12px] rounded-[var(--malachite-radius-xxl,14px)]"
10
- }, N = 15, Z = ({
13
+ }, X = 15, q = (c) => c.preventDefault(), te = T(function({
11
14
  value: s,
12
15
  onChange: n,
13
- placeholder: r,
14
- size: t = "large",
15
- variant: d = "default",
16
- disabled: a = !1,
17
- autoFocus: i = !1,
18
- className: h = "",
19
- width: m,
20
- style: p
21
- }) => {
22
- const [o, l] = $(!1), e = d === "muted", x = e ? "bg-[var(--malachite-card-border)]" : "bg-[var(--malachite-card-background)]", u = e ? "border-transparent" : "border-[var(--malachite-card-border)]", v = a ? "" : "hover:border-[var(--malachite-text-placeholder)]", g = e ? "text-[var(--malachite-text-secondary)]" : "text-[var(--malachite-text-placeholder)]", b = e ? "placeholder:text-[var(--malachite-text-secondary)]" : "placeholder:text-[var(--malachite-text-placeholder)]", f = e ? "none" : o ? "var(--malachite-shadow-accent, 0px 1px 0px 0px rgba(0, 175, 102, 0.15))" : "0px 1px 1px 0px rgba(0, 0, 0, 0.15)";
23
- return /* @__PURE__ */ C(
16
+ placeholder: i,
17
+ size: p = "large",
18
+ variant: g = "default",
19
+ disabled: t = !1,
20
+ autoFocus: S = !1,
21
+ className: C = "",
22
+ width: y,
23
+ style: $,
24
+ clearable: E = !1,
25
+ onClear: o,
26
+ onKeyDown: l,
27
+ "aria-label": m,
28
+ "aria-labelledby": d
29
+ }, h) {
30
+ const [x, u] = Z(!1), f = A(null), I = B(() => z(h, f), [h]), b = E && s.length > 0 && !t, v = () => {
31
+ var e;
32
+ n(""), o == null || o(), (e = f.current) == null || e.focus();
33
+ }, k = (e) => {
34
+ l == null || l(e);
35
+ const j = e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229;
36
+ e.key !== "Escape" || e.defaultPrevented || j || !b || (e.preventDefault(), e.stopPropagation(), v());
37
+ }, 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)";
38
+ return /* @__PURE__ */ M(
24
39
  "div",
25
40
  {
26
- className: `w-full ${x} border border-solid ${u} ${v} transition-colors flex items-center ${I[t]} ${a ? "opacity-60 cursor-not-allowed" : ""} ${h}`,
41
+ className: `w-full ${w} border border-solid ${N} ${R} transition-colors flex items-center ${W[p]} ${t ? "opacity-60 cursor-not-allowed" : ""} ${C}`,
27
42
  style: {
28
- boxShadow: f,
29
- borderColor: o ? "var(--malachite-control-border-hover, rgba(0, 175, 102, 0.4))" : void 0,
30
- ...E(m),
31
- ...p
43
+ boxShadow: O,
44
+ borderColor: x ? "var(--malachite-control-border-hover, rgba(0, 175, 102, 0.4))" : void 0,
45
+ ...L(y),
46
+ ...$
32
47
  },
33
48
  children: [
34
- /* @__PURE__ */ c(y, { size: N, className: `${g} shrink-0` }),
35
- /* @__PURE__ */ c(
49
+ /* @__PURE__ */ a(P, { size: X, className: `${_} shrink-0` }),
50
+ /* @__PURE__ */ a(
36
51
  "input",
37
52
  {
53
+ ref: I,
38
54
  type: "text",
39
55
  value: s,
40
- onChange: (S) => n(S.target.value),
41
- onFocus: () => l(!0),
42
- onBlur: () => l(!1),
43
- placeholder: r,
44
- "aria-label": r ?? "Search",
45
- disabled: a,
46
- autoFocus: i,
47
- className: `flex-1 bg-transparent border-none outline-none ${w[t]} font-medium text-[var(--malachite-text-primary)] ${b} placeholder:font-medium disabled:cursor-not-allowed min-w-0`
56
+ onChange: (e) => n(e.target.value),
57
+ onKeyDown: k,
58
+ onFocus: () => u(!0),
59
+ onBlur: () => u(!1),
60
+ placeholder: i,
61
+ "aria-label": d ? m : m ?? i ?? "Search",
62
+ "aria-labelledby": d,
63
+ disabled: t,
64
+ autoFocus: S,
65
+ 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`
66
+ }
67
+ ),
68
+ b && /* @__PURE__ */ a(
69
+ "button",
70
+ {
71
+ type: "button",
72
+ "aria-label": "Clear search",
73
+ onMouseDown: q,
74
+ onClick: v,
75
+ 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}`,
76
+ children: /* @__PURE__ */ a(D, { size: 10 })
48
77
  }
49
78
  )
50
79
  ]
51
80
  }
52
81
  );
53
- };
82
+ });
54
83
  export {
55
- Z as default
84
+ te as Search,
85
+ te as default
56
86
  };
57
87
  //# sourceMappingURL=Search.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Search.js","sources":["../../src/components/Search.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport SearchIcon from './CustomIcons/SearchIcon';\nimport { CONTROL_TEXT_SIZE_CLASS } from './controlTextSize';\nimport { controlWidthStyle } from './controlWidth';\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\nconst Search: React.FC<SearchProps> = ({\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}) => {\n const [focused, setFocused] = useState(false);\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 type=\"text\"\n value={value}\n onChange={(e) => onChange(e.target.value)}\n onFocus={() => setFocused(true)}\n onBlur={() => setFocused(false)}\n placeholder={placeholder}\n aria-label={placeholder ?? 'Search'}\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 </div>\n );\n};\n\nexport default Search;\n"],"names":["SIZE_CLASSES","ICON_SIZE","Search","value","onChange","placeholder","size","variant","disabled","autoFocus","className","width","style","focused","setFocused","useState","isMuted","bgClass","restingBorderClass","hoverBorderClass","iconColorClass","placeholderColorClass","boxShadow","jsxs","controlWidthStyle","jsx","SearchIcon","e","CONTROL_TEXT_SIZE_CLASS"],"mappings":";;;;;AAUA,MAAMA,IAA2C;AAAA,EAC7C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACX,GAEMC,IAAY,IAgBZC,IAAgC,CAAC;AAAA,EACnC,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,OAAAC;AACJ,MAAM;AACF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAUT,MAAY,SAKtBU,IAAUD,IACV,sCACA,yCACAE,IAAqBF,IACrB,uBACA,yCAEAG,IAAmBX,IAAW,KAAK,oDACnCY,IAAiBJ,IACjB,2CACA,4CACAK,IAAwBL,IACxB,uDACA,wDACAM,IAAYN,IACZ,SACAH,IACE,4EACA;AAER,SACI,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,UAAUN,CAAO,wBAAwBC,CAAkB,IAAIC,CAAgB,wCAAwCnB,EAAaM,CAAI,CAAC,IAAIE,IAAW,kCAAkC,EAAE,IAAIE,CAAS;AAAA,MACpN,OAAO;AAAA,QACH,WAAAY;AAAA,QACA,aAAaT,IACP,kEACA;AAAA,QACN,GAAGW,EAAkBb,CAAK;AAAA,QAC1B,GAAGC;AAAA,MAAA;AAAA,MAGP,UAAA;AAAA,QAAA,gBAAAa,EAACC,KAAW,MAAMzB,GAAW,WAAW,GAAGmB,CAAc,aAAa;AAAA,QACtE,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,OAAAtB;AAAA,YACA,UAAU,CAACwB,MAAMvB,EAASuB,EAAE,OAAO,KAAK;AAAA,YACxC,SAAS,MAAMb,EAAW,EAAI;AAAA,YAC9B,QAAQ,MAAMA,EAAW,EAAK;AAAA,YAC9B,aAAAT;AAAA,YACA,cAAYA,KAAe;AAAA,YAC3B,UAAAG;AAAA,YACA,WAAAC;AAAA,YACA,WAAW,kDAAkDmB,EAAwBtB,CAAI,CAAC,qDAAqDe,CAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,MACxK;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
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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"}
package/dist/index.d.ts CHANGED
@@ -1256,6 +1256,7 @@ export declare const CustomIcons: {
1256
1256
  LayoutIcon: FC<IconProps>;
1257
1257
  LibraryIcon: FC<IconProps>;
1258
1258
  LinkIcon: FC<IconProps>;
1259
+ ListChecksIcon: FC<IconProps>;
1259
1260
  LogsIcon: FC<IconProps>;
1260
1261
  MagicWandIcon: FC<IconProps>;
1261
1262
  ManageTeamIcon: FC<IconProps>;
@@ -1963,6 +1964,13 @@ declare interface IconProps_115 {
1963
1964
  onClick?: () => void;
1964
1965
  }
1965
1966
 
1967
+ declare interface IconProps_116 {
1968
+ size?: number | string;
1969
+ className?: string;
1970
+ style?: CSSProperties;
1971
+ onClick?: () => void;
1972
+ }
1973
+
1966
1974
  declare interface IconProps_12 {
1967
1975
  size?: number | string;
1968
1976
  className?: string;
@@ -2745,6 +2753,8 @@ export declare const KeyValueList: default_2.FC<KeyValueListProps> & {
2745
2753
  export declare interface KeyValueListProps {
2746
2754
  className?: string;
2747
2755
  children: default_2.ReactNode;
2756
+ /** `small` tightens the rows for a list inside a dialog or panel. */
2757
+ size?: KeyValueListSize;
2748
2758
  }
2749
2759
 
2750
2760
  export declare interface KeyValueListRowProps {
@@ -2764,6 +2774,8 @@ export declare interface KeyValueListRowProps {
2764
2774
  tooltip?: default_2.ReactNode;
2765
2775
  }
2766
2776
 
2777
+ export declare type KeyValueListSize = 'small' | 'medium';
2778
+
2767
2779
  export declare const LayoutIcon: React.FC<IconProps_63>;
2768
2780
 
2769
2781
  export declare const LibraryIcon: React.FC<IconProps_64>;
@@ -2796,6 +2808,8 @@ declare interface LinkProps_2 {
2796
2808
  fontSize?: 'sm' | 'base';
2797
2809
  }
2798
2810
 
2811
+ export declare const ListChecksIcon: React.FC<IconProps_66>;
2812
+
2799
2813
  export declare const LoadingBar: default_2.FC<LoadingBarProps>;
2800
2814
 
2801
2815
  export declare interface LoadingBarProps {
@@ -2822,9 +2836,9 @@ export declare type LoadingBarSize = 'small' | 'medium' | 'large';
2822
2836
 
2823
2837
  export declare type LoadingBarVariant = 'default' | 'warning' | 'error';
2824
2838
 
2825
- export declare const LogsIcon: React.FC<IconProps_66>;
2839
+ export declare const LogsIcon: React.FC<IconProps_67>;
2826
2840
 
2827
- export declare const MagicWandIcon: React.FC<IconProps_67>;
2841
+ export declare const MagicWandIcon: React.FC<IconProps_68>;
2828
2842
 
2829
2843
  /**
2830
2844
  * MalachiteContext provides a Shadow DOM context with theme setup for Malachite components.
@@ -3303,9 +3317,9 @@ export declare interface MalachiteTheme {
3303
3317
  };
3304
3318
  }
3305
3319
 
3306
- export declare const ManageTeamIcon: React.FC<IconProps_68>;
3320
+ export declare const ManageTeamIcon: React.FC<IconProps_69>;
3307
3321
 
3308
- export declare const ManualWebhookIcon: React.FC<IconProps_69>;
3322
+ export declare const ManualWebhookIcon: React.FC<IconProps_70>;
3309
3323
 
3310
3324
  /** `inert` draws links without an anchor, for markdown inside a <button>. */
3311
3325
  export declare type MarkdownLinks = 'interactive' | 'inert';
@@ -3326,15 +3340,15 @@ export declare interface MarkdownProps {
3326
3340
  /** `inline`: one line of inline syntax, with no autolinked emails or URLs. */
3327
3341
  export declare type MarkdownVariant = 'block' | 'flow' | 'inline';
3328
3342
 
3329
- export declare const MarkReadIcon: React.FC<IconProps_70>;
3343
+ export declare const MarkReadIcon: React.FC<IconProps_71>;
3330
3344
 
3331
- export declare const MarkUnreadIcon: React.FC<IconProps_71>;
3345
+ export declare const MarkUnreadIcon: React.FC<IconProps_72>;
3332
3346
 
3333
- export declare const MembersIcon: React.FC<IconProps_72>;
3347
+ export declare const MembersIcon: React.FC<IconProps_73>;
3334
3348
 
3335
3349
  export declare const Modal: default_2.FC<ModalProps>;
3336
3350
 
3337
- export declare const ModalIcon: React.FC<IconProps_73>;
3351
+ export declare const ModalIcon: React.FC<IconProps_74>;
3338
3352
 
3339
3353
  export declare interface ModalProps {
3340
3354
  open: boolean;
@@ -3390,9 +3404,9 @@ export declare type ModalSize = 'small' | 'medium' | 'large';
3390
3404
 
3391
3405
  export declare type ModalTrayTone = 'neutral' | 'warning' | 'error' | 'success';
3392
3406
 
3393
- export declare const MoreHorizontalIcon: React.FC<IconProps_74>;
3407
+ export declare const MoreHorizontalIcon: React.FC<IconProps_75>;
3394
3408
 
3395
- export declare const MoreVerticalIcon: React.FC<IconProps_75>;
3409
+ export declare const MoreVerticalIcon: React.FC<IconProps_76>;
3396
3410
 
3397
3411
  export declare const MultiSelect: default_2.FC<MultiSelectProps>;
3398
3412
 
@@ -3484,9 +3498,9 @@ export declare type MultiSelectSize = 'small' | 'medium' | 'large';
3484
3498
 
3485
3499
  declare type NativeProps = Omit<default_2.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style' | 'color' | 'title'>;
3486
3500
 
3487
- export declare const NavbarCollapseIcon: React.FC<IconProps_76>;
3501
+ export declare const NavbarCollapseIcon: React.FC<IconProps_77>;
3488
3502
 
3489
- export declare const NavbarExpandIcon: React.FC<IconProps_77>;
3503
+ export declare const NavbarExpandIcon: React.FC<IconProps_78>;
3490
3504
 
3491
3505
  export declare const NavItem: default_2.ForwardRefExoticComponent<NavItemProps & default_2.RefAttributes<HTMLElement>>;
3492
3506
 
@@ -3528,7 +3542,7 @@ export declare interface NavItemLinkProps extends NavItemBaseProps {
3528
3542
 
3529
3543
  export declare type NavItemProps = NavItemLinkProps | NavItemAsChildProps;
3530
3544
 
3531
- export declare const NotFoundIcon: React.FC<IconProps_78>;
3545
+ export declare const NotFoundIcon: React.FC<IconProps_79>;
3532
3546
 
3533
3547
  export declare const NumberTag: default_2.FC<NumberTagProps>;
3534
3548
 
@@ -3543,7 +3557,7 @@ export declare interface NumberTagProps {
3543
3557
  className?: string;
3544
3558
  }
3545
3559
 
3546
- export declare const OrganizationIcon: React.FC<IconProps_79>;
3560
+ export declare const OrganizationIcon: React.FC<IconProps_80>;
3547
3561
 
3548
3562
  export declare const OverflowRow: default_2.FC<OverflowRowProps>;
3549
3563
 
@@ -3717,11 +3731,11 @@ declare type PillButtonTone = 'default' | 'assistant';
3717
3731
 
3718
3732
  declare type PillButtonVariant = 'default' | 'inverted';
3719
3733
 
3720
- export declare const PinIcon: React.FC<IconProps_80>;
3734
+ export declare const PinIcon: React.FC<IconProps_81>;
3721
3735
 
3722
- export declare const PlaygroundIcon: React.FC<IconProps_81>;
3736
+ export declare const PlaygroundIcon: React.FC<IconProps_82>;
3723
3737
 
3724
- export declare const PlusIcon: React.FC<IconProps_82>;
3738
+ export declare const PlusIcon: React.FC<IconProps_83>;
3725
3739
 
3726
3740
  export declare const Popover: default_2.FC<PopoverProps> & {
3727
3741
  Header: default_2.FC< PopoverHeaderProps>;
@@ -3782,7 +3796,7 @@ export declare type PopoverPlacement = FloatingPlacement;
3782
3796
 
3783
3797
  export declare type PopoverProps = PopoverBaseProps & PopoverName;
3784
3798
 
3785
- export declare const PreviewIcon: React.FC<IconProps_83>;
3799
+ export declare const PreviewIcon: React.FC<IconProps_84>;
3786
3800
 
3787
3801
  /** A translucent rounded card that groups {@link PreviewTreeRow}s into a tree preview. */
3788
3802
  export declare const PreviewTree: default_2.FC<PreviewTreeProps>;
@@ -3803,7 +3817,7 @@ declare interface PreviewTreeRowProps {
3803
3817
  expanded?: boolean;
3804
3818
  }
3805
3819
 
3806
- export declare const ProgrammaticWebhookIcon: React.FC<IconProps_84>;
3820
+ export declare const ProgrammaticWebhookIcon: React.FC<IconProps_85>;
3807
3821
 
3808
3822
  export declare const Progress: default_2.FC<ProgressProps>;
3809
3823
 
@@ -3854,7 +3868,7 @@ declare interface ProgressValueProps extends ProgressCommonProps {
3854
3868
  max?: never;
3855
3869
  }
3856
3870
 
3857
- export declare const PulseIcon: React.FC<IconProps_85>;
3871
+ export declare const PulseIcon: React.FC<IconProps_86>;
3858
3872
 
3859
3873
  export declare const QueryInput: default_2.FC<QueryInputProps>;
3860
3874
 
@@ -3931,7 +3945,7 @@ export declare interface RadioProps {
3931
3945
  id?: string;
3932
3946
  }
3933
3947
 
3934
- export declare const RefreshIcon: React.FC<IconProps_86>;
3948
+ export declare const RefreshIcon: React.FC<IconProps_87>;
3935
3949
 
3936
3950
  export declare interface RegularLayoutProps {
3937
3951
  breadcrumbLinks?: BreadcrumbLink[];
@@ -3963,9 +3977,9 @@ export declare interface RegularLayoutProps {
3963
3977
  style?: default_2.CSSProperties;
3964
3978
  }
3965
3979
 
3966
- export declare const RejectIcon: React.FC<IconProps_87>;
3980
+ export declare const RejectIcon: React.FC<IconProps_88>;
3967
3981
 
3968
- export declare const ReloadIcon: React.FC<IconProps_88>;
3982
+ export declare const ReloadIcon: React.FC<IconProps_89>;
3969
3983
 
3970
3984
  /**
3971
3985
  * Renders an in-app link through the app's own link component, spreading every field onto it:
@@ -3980,9 +3994,9 @@ export declare type RenderLink = (props: {
3980
3994
  'aria-label'?: string;
3981
3995
  }) => default_2.ReactNode;
3982
3996
 
3983
- export declare const ReplyIcon: React.FC<IconProps_89>;
3997
+ export declare const ReplyIcon: React.FC<IconProps_90>;
3984
3998
 
3985
- export declare const RequiredFieldIndicatorIcon: React.FC<IconProps_90>;
3999
+ export declare const RequiredFieldIndicatorIcon: React.FC<IconProps_91>;
3986
4000
 
3987
4001
  export declare type RequiredIndicator = 'optional-suffix' | 'asterisk' | 'none';
3988
4002
 
@@ -4006,9 +4020,10 @@ declare const Row: default_2.FC<KeyValueListRowProps>;
4006
4020
 
4007
4021
  export declare type RowVariant = 'success' | 'warning' | 'error' | 'info';
4008
4022
 
4009
- export declare const Search: default_2.FC<SearchProps>;
4023
+ /** Forwards a ref to the input, so a consumer can focus the field. */
4024
+ export declare const Search: default_2.ForwardRefExoticComponent<SearchProps & default_2.RefAttributes<HTMLInputElement>>;
4010
4025
 
4011
- export declare const SearchIcon: React.FC<IconProps_91>;
4026
+ export declare const SearchIcon: React.FC<IconProps_92>;
4012
4027
 
4013
4028
  export declare interface SearchProps {
4014
4029
  value: string;
@@ -4022,6 +4037,18 @@ export declare interface SearchProps {
4022
4037
  className?: string;
4023
4038
  width?: string | number;
4024
4039
  style?: default_2.CSSProperties;
4040
+ /**
4041
+ * Shows a clear button while the field has text, and lets Escape clear it. Either way focus
4042
+ * stays in the field, and Escape that clears is not also passed to a surrounding panel.
4043
+ */
4044
+ clearable?: boolean;
4045
+ /** Called after `onChange('')` when the clear button or Escape empties the field. */
4046
+ onClear?: () => void;
4047
+ /** Runs before Search's own Escape handling; call `preventDefault()` to skip it. */
4048
+ onKeyDown?: default_2.KeyboardEventHandler<HTMLInputElement>;
4049
+ /** The field's accessible name. Falls back to the placeholder, then "Search". */
4050
+ 'aria-label'?: string;
4051
+ 'aria-labelledby'?: string;
4025
4052
  }
4026
4053
 
4027
4054
  export declare type SearchSize = 'small' | 'medium' | 'large';
@@ -4052,7 +4079,7 @@ declare interface SectionTitleProps {
4052
4079
  style?: default_2.CSSProperties;
4053
4080
  }
4054
4081
 
4055
- export declare const SecurityIcon: React.FC<IconProps_92>;
4082
+ export declare const SecurityIcon: React.FC<IconProps_93>;
4056
4083
 
4057
4084
  /**
4058
4085
  * A rounded track of mutually-exclusive options — the segmented "one of these" control.
@@ -4222,7 +4249,7 @@ export declare interface SelectionBarProps {
4222
4249
  className?: string;
4223
4250
  }
4224
4251
 
4225
- export declare const SendIcon: React.FC<IconProps_93>;
4252
+ export declare const SendIcon: React.FC<IconProps_94>;
4226
4253
 
4227
4254
  export declare const SettingRow: default_2.FC<SettingRowProps>;
4228
4255
 
@@ -4244,7 +4271,7 @@ export declare interface SettingRowProps {
4244
4271
  className?: string;
4245
4272
  }
4246
4273
 
4247
- export declare const SettingsIcon: React.FC<IconProps_94>;
4274
+ export declare const SettingsIcon: React.FC<IconProps_95>;
4248
4275
 
4249
4276
  /**
4250
4277
  * ShadowEscape renders its children OUTSIDE the Shadow DOM to avoid React hook issues.
@@ -4394,7 +4421,7 @@ export declare interface SidePanelProps {
4394
4421
  children: default_2.ReactNode;
4395
4422
  }
4396
4423
 
4397
- export declare const SignOutIcon: React.FC<IconProps_95>;
4424
+ export declare const SignOutIcon: React.FC<IconProps_96>;
4398
4425
 
4399
4426
  export declare const Skeleton: {
4400
4427
  Button: default_2.FC<SkeletonButtonProps>;
@@ -4428,11 +4455,11 @@ declare type SkeletonShape = 'default' | 'round' | 'circle' | 'square';
4428
4455
 
4429
4456
  declare type SkeletonSize = 'small' | 'default' | 'large';
4430
4457
 
4431
- export declare const SliderIcon: React.FC<IconProps_96>;
4458
+ export declare const SliderIcon: React.FC<IconProps_97>;
4432
4459
 
4433
- export declare const SortIcon: React.FC<IconProps_97>;
4460
+ export declare const SortIcon: React.FC<IconProps_98>;
4434
4461
 
4435
- export declare const SourceIcon: React.FC<IconProps_98>;
4462
+ export declare const SourceIcon: React.FC<IconProps_99>;
4436
4463
 
4437
4464
  export declare const Spacer: default_2.FC<SpacerProps>;
4438
4465
 
@@ -4456,7 +4483,7 @@ export declare enum SpacingSize {
4456
4483
  Large = "large"
4457
4484
  }
4458
4485
 
4459
- export declare const SparkleIcon: React.FC<IconProps_99>;
4486
+ export declare const SparkleIcon: React.FC<IconProps_100>;
4460
4487
 
4461
4488
  export declare const Spinner: default_2.FC<SpinnerProps>;
4462
4489
 
@@ -4476,7 +4503,7 @@ declare interface SplitScreenLayoutProps {
4476
4503
  footer?: default_2.ReactNode;
4477
4504
  }
4478
4505
 
4479
- export declare const StarIcon: React.FC<IconProps_100>;
4506
+ export declare const StarIcon: React.FC<IconProps_101>;
4480
4507
 
4481
4508
  export declare const StatBadge: default_2.FC<StatBadgeProps>;
4482
4509
 
@@ -4548,7 +4575,7 @@ export declare interface StatusBadgeProps {
4548
4575
 
4549
4576
  export declare type StatusBadgeType = 'success' | 'error' | 'warning' | 'info';
4550
4577
 
4551
- export declare const StepCurrentIcon: React.FC<IconProps_101>;
4578
+ export declare const StepCurrentIcon: React.FC<IconProps_102>;
4552
4579
 
4553
4580
  export declare const Stepper: default_2.FC<StepperProps>;
4554
4581
 
@@ -4589,7 +4616,7 @@ export declare interface StepTabsProps {
4589
4616
  className?: string;
4590
4617
  }
4591
4618
 
4592
- export declare const StepUpcomingIcon: React.FC<IconProps_102>;
4619
+ export declare const StepUpcomingIcon: React.FC<IconProps_103>;
4593
4620
 
4594
4621
  export declare type SubtitleLayout = 'inline' | 'stacked';
4595
4622
 
@@ -4720,7 +4747,7 @@ export declare interface SwatchProps {
4720
4747
  style?: default_2.CSSProperties;
4721
4748
  }
4722
4749
 
4723
- export declare const SyntheticWebhookIcon: React.FC<IconProps_103>;
4750
+ export declare const SyntheticWebhookIcon: React.FC<IconProps_104>;
4724
4751
 
4725
4752
  export declare interface TabItem {
4726
4753
  key: string;
@@ -5032,9 +5059,9 @@ export declare interface ThemeScopeProps {
5032
5059
  children?: default_2.ReactNode;
5033
5060
  }
5034
5061
 
5035
- export declare const ThumbsDownIcon: React.FC<IconProps_104>;
5062
+ export declare const ThumbsDownIcon: React.FC<IconProps_105>;
5036
5063
 
5037
- export declare const ThumbsUpIcon: React.FC<IconProps_105>;
5064
+ export declare const ThumbsUpIcon: React.FC<IconProps_106>;
5038
5065
 
5039
5066
  export declare const Toggle: default_2.ForwardRefExoticComponent<ToggleProps & default_2.RefAttributes<HTMLElement>>;
5040
5067
 
@@ -5153,11 +5180,11 @@ declare interface TooltipProps {
5153
5180
  focusableTrigger?: boolean;
5154
5181
  }
5155
5182
 
5156
- export declare const TrashIcon: React.FC<IconProps_106>;
5183
+ export declare const TrashIcon: React.FC<IconProps_107>;
5157
5184
 
5158
- export declare const TriangleDownIcon: React.FC<IconProps_107>;
5185
+ export declare const TriangleDownIcon: React.FC<IconProps_108>;
5159
5186
 
5160
- export declare const TriangleRightIcon: React.FC<IconProps_108>;
5187
+ export declare const TriangleRightIcon: React.FC<IconProps_109>;
5161
5188
 
5162
5189
  /**
5163
5190
  * TruncatedTooltip renders its children in a single-line truncating container
@@ -5201,9 +5228,9 @@ export declare const Typography: {
5201
5228
  Text: FC<TextProps>;
5202
5229
  };
5203
5230
 
5204
- export declare const UnarchiveIcon: React.FC<IconProps_109>;
5231
+ export declare const UnarchiveIcon: React.FC<IconProps_110>;
5205
5232
 
5206
- export declare const UploadIcon: React.FC<IconProps_110>;
5233
+ export declare const UploadIcon: React.FC<IconProps_111>;
5207
5234
 
5208
5235
  export declare const UsageCard: default_2.FC<UsageCardProps>;
5209
5236
 
@@ -5225,15 +5252,15 @@ export declare const useHasOpenOverlay: () => boolean;
5225
5252
 
5226
5253
  export declare const useSidebarCollapsed: () => boolean;
5227
5254
 
5228
- export declare const WarningCircleFilled: React.FC<IconProps_111>;
5255
+ export declare const WarningCircleFilled: React.FC<IconProps_112>;
5229
5256
 
5230
- export declare const WarningTriangleIcon: React.FC<IconProps_112>;
5257
+ export declare const WarningTriangleIcon: React.FC<IconProps_113>;
5231
5258
 
5232
- export declare const WebhookEventsIcon: React.FC<IconProps_113>;
5259
+ export declare const WebhookEventsIcon: React.FC<IconProps_114>;
5233
5260
 
5234
- export declare const WebhookIcon: React.FC<IconProps_114>;
5261
+ export declare const WebhookIcon: React.FC<IconProps_115>;
5235
5262
 
5236
- export declare const WebhookSigningSecretIcon: React.FC<IconProps_115>;
5263
+ export declare const WebhookSigningSecretIcon: React.FC<IconProps_116>;
5237
5264
 
5238
5265
  export declare type WidthSize = 'large' | 'medium' | 'small' | 'xsmall';
5239
5266