@stackone/malachite 2.21.0 → 2.22.0

package/dist/components/QueryInput.js

@@ -0,0 +1,370 @@
+import { jsxs as S, jsx as d } from "react/jsx-runtime";
+import { useId as xt, useState as E, useRef as g, useLayoutEffect as T, useCallback as et, useEffect as bt, useInsertionEffect as wt } from "react";
+import { createPortal as vt } from "react-dom";
+import yt from "./Spinner.js";
+import { CONTROL_TEXT_SIZE as _, CONTROL_TEXT_SIZE_CLASS as rt } from "./controlTextSize.js";
+import { pushEscapeLayer as St } from "./escapeLayers.js";
+import { ensureMultiSelectPanelStyles as Et } from "./optionRowStyles.js";
+import { overlayIdentity as Tt } from "./portalOverlay.js";
+import { computeCaretMenuGeometry as kt } from "./queryInputGeometry.js";
+const Mt = {
+  small: "h-[var(--malachite-control-height-small,28px)] px-[10px] rounded-[var(--malachite-radius-10,10px)]",
+  medium: "h-[var(--malachite-control-height-medium,32px)] px-[10px] rounded-xl",
+  large: "h-[var(--malachite-control-height-large,42px)] px-[12px] rounded-[var(--malachite-radius-xxl,14px)]"
+}, Lt = {
+  key: "var(--malachite-codeblock-keyword, rgb(12, 88, 174))",
+  value: "var(--malachite-codeblock-string, rgb(2, 122, 66))",
+  operator: "var(--malachite-codeblock-type, rgb(12, 88, 174))",
+  negation: "var(--malachite-text-destructive, rgb(237, 53, 54))",
+  punctuation: "var(--malachite-codeblock-foreground, rgb(10, 10, 10))",
+  error: "var(--malachite-text-error, rgb(237, 53, 54))",
+  plain: "var(--malachite-text-primary, rgb(10, 10, 10))"
+}, It = {
+  small: {
+    fontFamily: "inherit",
+    fontSize: _.small,
+    fontWeight: 500,
+    letterSpacing: "normal",
+    lineHeight: "normal",
+    padding: 0
+  },
+  medium: {
+    fontFamily: "inherit",
+    fontSize: _.medium,
+    fontWeight: 500,
+    letterSpacing: "normal",
+    lineHeight: "normal",
+    padding: 0
+  },
+  large: {
+    fontFamily: "inherit",
+    fontSize: _.large,
+    fontWeight: 500,
+    letterSpacing: "normal",
+    lineHeight: "normal",
+    padding: 0
+  }
+}, F = 220, nt = 360, ot = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 8,
+  padding: "10px 12px",
+  color: "var(--malachite-text-dimmed, rgb(161, 161, 161))",
+  whiteSpace: "nowrap"
+}, Rt = (r) => {
+  r.preventDefault();
+}, Dt = (r, f) => {
+  const a = [...f.filter(
+    (n) => n.start >= 0 && n.end <= r.length && n.start < n.end
+  )].sort((n, k) => n.start - k.start), s = [];
+  let u = 0;
+  for (const n of a)
+    n.start < u || (s.push(n), u = n.end);
+  return s;
+}, _t = (r, f) => {
+  const h = [];
+  let a = 0;
+  for (const s of Dt(r, f))
+    s.start > a && h.push({ start: a, end: s.start, kind: "plain" }), h.push(s), a = s.end;
+  return a < r.length && h.push({ start: a, end: r.length, kind: "plain" }), h;
+}, jt = ({
+  value: r,
+  onChange: f,
+  tokens: h = [],
+  suggestions: a,
+  activeRange: s,
+  onAccept: u,
+  onQueryContextChange: n,
+  onSubmit: k,
+  placeholder: B,
+  size: x = "large",
+  disabled: M = !1,
+  loading: L = !1,
+  emptyMessage: H,
+  className: it = "",
+  style: at,
+  "aria-label": lt,
+  "aria-labelledby": K
+}) => {
+  const W = `${xt()}-listbox`, U = (t) => `${W}-option-${t}`, [N, j] = E(!1), [Y, O] = E(() => r.length), [st, $] = E(0), [ct, A] = E(!1), [i, Z] = E(null), b = g(null), C = g(null), G = g(null), I = g(null), P = g([]), z = g(null), dt = Array.isArray(a), w = a ?? [], v = w.length > 0, l = N && (L || v || dt && !v && !!H) && !ct && !M, y = l && v && !L, c = v ? Math.min(st, w.length - 1) : -1;
+  T(() => {
+    O((t) => Math.min(t, r.length));
+  }, [r]);
+  const R = et(() => {
+    const t = b.current, e = C.current;
+    t && e && (e.style.transform = `translateX(${-t.scrollLeft}px)`);
+  }, []);
+  T(() => {
+    R();
+  }, [r, R]);
+  const m = et(() => {
+    var o, p, D;
+    const t = b.current;
+    if (!t)
+      return;
+    const e = (((o = G.current) == null ? void 0 : o.offsetWidth) ?? 0) - t.scrollLeft;
+    Z(
+      kt({
+        inputRect: t.getBoundingClientRect(),
+        caretOffsetPx: e,
+        menuWidth: ((p = I.current) == null ? void 0 : p.offsetWidth) ?? F,
+        menuHeight: ((D = I.current) == null ? void 0 : D.offsetHeight) ?? 0,
+        viewportWidth: window.innerWidth,
+        viewportHeight: window.innerHeight
+      })
+    );
+  }, []);
+  T(() => {
+    l ? m() : Z(null);
+  }, [l, r, Y, a, L, m]), bt(() => {
+    if (!l)
+      return;
+    const t = () => m();
+    window.addEventListener("scroll", t, !0), window.addEventListener("resize", t);
+    const e = St(() => A(!0));
+    return () => {
+      window.removeEventListener("scroll", t, !0), window.removeEventListener("resize", t), e();
+    };
+  }, [l, m]), T(() => {
+    const t = z.current;
+    if (t === null)
+      return;
+    z.current = null;
+    const e = b.current;
+    !e || t.value !== r || (e.setSelectionRange(t.caret, t.caret), O(t.caret), n == null || n({ value: r, caret: t.caret }), R(), m());
+  }, [r]), T(() => {
+    if (!y)
+      return;
+    const t = P.current[c], e = I.current;
+    if (!t || !e)
+      return;
+    const o = t.offsetTop + t.offsetHeight;
+    o > e.scrollTop + e.clientHeight ? e.scrollTop = o - e.clientHeight : t.offsetTop < e.scrollTop && (e.scrollTop = t.offsetTop);
+  }, [c, y]), wt(() => {
+    l && Et();
+  }, [l]);
+  const V = (t, e) => {
+    O(e), n == null || n({ value: t, caret: e });
+  }, pt = (t) => {
+    const e = t.target.value;
+    A(!1), $(0), f(e), V(e, t.target.selectionStart ?? e.length);
+  }, ht = (t) => {
+    const e = t.currentTarget;
+    V(e.value, e.selectionStart ?? e.value.length);
+  }, X = (t) => {
+    var tt;
+    const e = ((tt = b.current) == null ? void 0 : tt.selectionStart) ?? r.length, o = s ?? { start: e, end: e }, p = Math.max(0, Math.min(o.start, r.length)), D = Math.max(p, Math.min(o.end, r.length)), J = t.insertText ?? t.label, Q = r.slice(0, p) + J + r.slice(D);
+    z.current = { value: Q, caret: p + J.length }, f(Q), u == null || u(t);
+  }, ft = (t) => {
+    if (y && (t.key === "ArrowDown" || t.key === "ArrowUp")) {
+      t.preventDefault();
+      const o = w.length;
+      $(
+        t.key === "ArrowDown" ? (c + 1) % o : (c - 1 + o) % o
+      );
+      return;
+    }
+    const e = y && c >= 0 ? w[c] : void 0;
+    if (t.key === "Enter") {
+      if (e) {
+        t.preventDefault(), X(e);
+        return;
+      }
+      k && (t.preventDefault(), k(r));
+      return;
+    }
+    t.key === "Tab" && e && (t.preventDefault(), X(e));
+  }, ut = _t(r, h), q = It[x], mt = L ? (
+    // `role="listbox"` admits only option/group children.
+    /* @__PURE__ */ S("div", { role: "presentation", style: ot, children: [
+      /* @__PURE__ */ d(yt, { size: "xxxsmall" }),
+      /* @__PURE__ */ d("span", { children: "Loading…" })
+    ] })
+  ) : v ? w.map((t, e) => {
+    const o = e === c;
+    return /* @__PURE__ */ S(
+      "button",
+      {
+        ref: (p) => {
+          P.current[e] = p;
+        },
+        type: "button",
+        id: U(e),
+        role: "option",
+        "aria-selected": o,
+        tabIndex: -1,
+        onClick: () => X(t),
+        onMouseEnter: () => $(e),
+        className: "malachite-multiselect-option",
+        "data-highlighted": o,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          width: "100%",
+          flexShrink: 0,
+          border: "none",
+          textAlign: "left",
+          borderRadius: 8,
+          padding: "8px 10px",
+          font: "inherit",
+          cursor: "pointer",
+          color: "var(--malachite-text-primary, rgb(10, 10, 10))"
+        },
+        children: [
+          /* @__PURE__ */ d(
+            "span",
+            {
+              style: {
+                flex: 1,
+                minWidth: 0,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: t.label
+            }
+          ),
+          t.detail && /* @__PURE__ */ d(
+            "span",
+            {
+              style: {
+                flexShrink: 0,
+                fontSize: "var(--malachite-font-size-xsmall, 11px)",
+                color: "var(--malachite-text-secondary, rgb(123, 123, 123))"
+              },
+              children: t.detail
+            }
+          )
+        ]
+      },
+      t.id
+    );
+  }) : H ? /* @__PURE__ */ d("div", { role: "presentation", style: ot, children: H }) : null, gt = M ? "" : "hover:border-[var(--malachite-text-placeholder)]";
+  return /* @__PURE__ */ S(
+    "div",
+    {
+      className: `relative w-full ${Mt[x]} bg-[var(--malachite-card-background)] border border-solid border-[var(--malachite-card-border)] ${gt} transition-colors flex items-center ${M ? "opacity-60 cursor-not-allowed" : ""} ${it}`,
+      style: {
+        boxShadow: N ? "var(--malachite-shadow-accent, 0px 1px 0px 0px rgba(0, 175, 102, 0.15))" : "0px 1px 1px 0px rgba(0, 0, 0, 0.15)",
+        borderColor: N ? "var(--malachite-control-border-hover, rgba(0, 175, 102, 0.4))" : void 0,
+        ...at
+      },
+      children: [
+        /* @__PURE__ */ S("div", { className: "relative flex-1 h-full min-w-0 overflow-hidden", children: [
+          /* @__PURE__ */ S(
+            "div",
+            {
+              ref: C,
+              "aria-hidden": "true",
+              className: `absolute inset-0 flex items-center pointer-events-none ${rt[x]}`,
+              style: { ...q, whiteSpace: "pre" },
+              children: [
+                ut.map((t) => /* @__PURE__ */ d(
+                  "span",
+                  {
+                    style: {
+                      color: Lt[t.kind],
+                      ...t.kind === "error" ? { textDecoration: "underline wavy" } : {}
+                    },
+                    children: r.slice(t.start, t.end)
+                  },
+                  t.start
+                )),
+                /* @__PURE__ */ d(
+                  "span",
+                  {
+                    ref: G,
+                    style: { position: "absolute", top: 0, left: 0, visibility: "hidden" },
+                    children: r.slice(0, Y)
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ d(
+            "input",
+            {
+              ref: b,
+              type: "text",
+              role: "combobox",
+              "aria-expanded": l,
+              "aria-controls": l ? W : void 0,
+              "aria-activedescendant": y && c >= 0 ? U(c) : void 0,
+              "aria-autocomplete": "list",
+              autoComplete: "off",
+              spellCheck: !1,
+              "aria-labelledby": K,
+              "aria-label": K ? void 0 : lt ?? B,
+              value: r,
+              onChange: pt,
+              onSelect: ht,
+              onScroll: () => {
+                R(), l && m();
+              },
+              onKeyDown: ft,
+              onFocus: () => {
+                j(!0), A(!1);
+              },
+              onBlur: () => j(!1),
+              placeholder: B,
+              disabled: M,
+              className: `absolute inset-0 w-full h-full bg-transparent border-none outline-none ${rt[x]} placeholder:text-[var(--malachite-text-placeholder)] placeholder:font-medium disabled:cursor-not-allowed`,
+              style: {
+                ...q,
+                color: "transparent",
+                caretColor: "var(--malachite-text-primary, rgb(10, 10, 10))"
+              }
+            }
+          )
+        ] }),
+        l && vt(
+          /* @__PURE__ */ d(
+            "div",
+            {
+              ref: I,
+              id: W,
+              role: "listbox",
+              ...Tt("dropdown"),
+              onMouseDown: Rt,
+              style: {
+                position: "fixed",
+                top: (i == null ? void 0 : i.top) ?? 0,
+                left: (i == null ? void 0 : i.left) ?? 0,
+                minWidth: Math.min(
+                  F,
+                  (i == null ? void 0 : i.width) ?? F
+                ),
+                maxWidth: Math.min(
+                  nt,
+                  (i == null ? void 0 : i.width) ?? nt
+                ),
+                background: "var(--malachite-card-background, rgb(255, 255, 255))",
+                border: "1px solid var(--malachite-card-border, rgb(232, 232, 232))",
+                borderRadius: 12,
+                boxShadow: "0px 2px 5px 0px rgba(0, 0, 0, 0.1)",
+                padding: 4,
+                display: "flex",
+                flexDirection: "column",
+                gap: 2,
+                maxHeight: 320,
+                overflowY: "auto",
+                fontSize: _[x],
+                visibility: i ? "visible" : "hidden",
+                opacity: i ? 1 : 0
+              },
+              children: mt
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+};
+export {
+  jt as QueryInput,
+  jt as default
+};
+//# sourceMappingURL=QueryInput.js.map

package/dist/components/QueryInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryInput.js","sources":["../../src/components/QueryInput.tsx"],"sourcesContent":["import React, {\n    useCallback,\n    useEffect,\n    useId,\n    useInsertionEffect,\n    useLayoutEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport Spinner from './Spinner';\nimport { CONTROL_TEXT_SIZE, CONTROL_TEXT_SIZE_CLASS } from './controlTextSize';\nimport { pushEscapeLayer } from './escapeLayers';\nimport { ensureMultiSelectPanelStyles } from './optionRowStyles';\nimport { overlayIdentity } from './portalOverlay';\nimport { type CaretMenuGeometry, computeCaretMenuGeometry } from './queryInputGeometry';\n\nexport type QueryTokenKind =\n    | 'key'\n    | 'value'\n    | 'operator'\n    | 'negation'\n    | 'punctuation'\n    | 'error'\n    | 'plain';\n\nexport interface QueryToken {\n    /** Index into `value`. */\n    start: number;\n    /** Exclusive. */\n    end: number;\n    kind: QueryTokenKind;\n}\n\nexport interface QuerySuggestion {\n    id: string;\n    label: string;\n    /** Secondary text, right-aligned in the row. */\n    detail?: string;\n    /** What replaces `activeRange` when accepted. Defaults to `label`. */\n    insertText?: string;\n}\n\nexport type QueryInputSize = 'small' | 'medium' | 'large';\n\nexport interface QueryInputProps {\n    value: string;\n    onChange: (value: string) => void;\n    /** Ranges to colour. Tokens that are out of range, reversed or overlapping are ignored. */\n    tokens?: QueryToken[];\n    /** Rows for the caret menu. Empty or undefined means the menu stays closed. */\n    suggestions?: QuerySuggestion[];\n    /** The span an accepted suggestion replaces. Defaults to a zero-width span at the caret. */\n    activeRange?: { start: number; end: number };\n    onAccept?: (suggestion: QuerySuggestion) => void;\n    /** Every value change AND every caret move, so the consumer can recompute tokens/suggestions. */\n    onQueryContextChange?: (context: { value: string; caret: number }) => void;\n    /** Enter with nothing highlighted in the menu. */\n    onSubmit?: (value: string) => void;\n    placeholder?: string;\n    size?: QueryInputSize;\n    disabled?: boolean;\n    /** Suggestions are being fetched: the menu shows a loading row instead of the empty message. */\n    loading?: boolean;\n    emptyMessage?: string;\n    className?: string;\n    style?: React.CSSProperties;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n}\n\n// Same 28/32/42 ladder as Search, minus the icon gap this component has no icon to space.\nconst SIZE_CLASSES: Record<QueryInputSize, string> = {\n    small: 'h-[var(--malachite-control-height-small,28px)] px-[10px] rounded-[var(--malachite-radius-10,10px)]',\n    medium: 'h-[var(--malachite-control-height-medium,32px)] px-[10px] rounded-xl',\n    large: 'h-[var(--malachite-control-height-large,42px)] px-[12px] rounded-[var(--malachite-radius-xxl,14px)]',\n};\n\nconst TOKEN_COLORS: Record<QueryTokenKind, string> = {\n    key: 'var(--malachite-codeblock-keyword, rgb(12, 88, 174))',\n    value: 'var(--malachite-codeblock-string, rgb(2, 122, 66))',\n    operator: 'var(--malachite-codeblock-type, rgb(12, 88, 174))',\n    negation: 'var(--malachite-text-destructive, rgb(237, 53, 54))',\n    punctuation: 'var(--malachite-codeblock-foreground, rgb(10, 10, 10))',\n    error: 'var(--malachite-text-error, rgb(237, 53, 54))',\n    plain: 'var(--malachite-text-primary, rgb(10, 10, 10))',\n};\n\n// The one place the mirror and the input agree on typography: diverge here and the coloured\n// text drifts out from under the caret it's supposed to sit beneath.\nconst TEXT_STYLE: Record<QueryInputSize, React.CSSProperties> = {\n    small: {\n        fontFamily: 'inherit',\n        fontSize: CONTROL_TEXT_SIZE.small,\n        fontWeight: 500,\n        letterSpacing: 'normal',\n        lineHeight: 'normal',\n        padding: 0,\n    },\n    medium: {\n        fontFamily: 'inherit',\n        fontSize: CONTROL_TEXT_SIZE.medium,\n        fontWeight: 500,\n        letterSpacing: 'normal',\n        lineHeight: 'normal',\n        padding: 0,\n    },\n    large: {\n        fontFamily: 'inherit',\n        fontSize: CONTROL_TEXT_SIZE.large,\n        fontWeight: 500,\n        letterSpacing: 'normal',\n        lineHeight: 'normal',\n        padding: 0,\n    },\n};\n\n/** Before layout the portal hasn't painted yet, so the first geometry pass needs a width. */\nconst MENU_FALLBACK_WIDTH_PX = 220;\n\nconst MENU_MAX_WIDTH_PX = 360;\n\nconst MENU_MESSAGE_STYLE: React.CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: 8,\n    padding: '10px 12px',\n    color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n    whiteSpace: 'nowrap',\n};\n\n/** Keeps focus (and the caret) on the input so a row click never blurs it first. */\nconst handleMenuMouseDown = (event: React.MouseEvent) => {\n    event.preventDefault();\n};\n\ninterface QuerySegment {\n    start: number;\n    end: number;\n    kind: QueryTokenKind;\n}\n\n/** Drops tokens the consumer got wrong rather than letting them corrupt the render. */\nconst sanitizeTokens = (value: string, tokens: QueryToken[]): QueryToken[] => {\n    const inRange = tokens.filter(\n        (token) => token.start >= 0 && token.end <= value.length && token.start < token.end,\n    );\n    const sorted = [...inRange].sort((a, b) => a.start - b.start);\n    const accepted: QueryToken[] = [];\n    let cursor = 0;\n    for (const token of sorted) {\n        if (token.start < cursor) {\n            continue;\n        }\n        accepted.push(token);\n        cursor = token.end;\n    }\n    return accepted;\n};\n\n/** Fills the gaps between tokens with 'plain' segments so the mirror's text always equals `value`. */\nconst buildSegments = (value: string, tokens: QueryToken[]): QuerySegment[] => {\n    const segments: QuerySegment[] = [];\n    let cursor = 0;\n    for (const token of sanitizeTokens(value, tokens)) {\n        if (token.start > cursor) {\n            segments.push({ start: cursor, end: token.start, kind: 'plain' });\n        }\n        segments.push(token);\n        cursor = token.end;\n    }\n    if (cursor < value.length) {\n        segments.push({ start: cursor, end: value.length, kind: 'plain' });\n    }\n    return segments;\n};\n\nconst QueryInput: React.FC<QueryInputProps> = ({\n    value,\n    onChange,\n    tokens = [],\n    suggestions,\n    activeRange,\n    onAccept,\n    onQueryContextChange,\n    onSubmit,\n    placeholder,\n    size = 'large',\n    disabled = false,\n    loading = false,\n    emptyMessage,\n    className = '',\n    style,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n}) => {\n    const instanceId = useId();\n    const listboxId = `${instanceId}-listbox`;\n    const getRowId = (index: number) => `${listboxId}-option-${index}`;\n\n    const [focused, setFocused] = useState(false);\n    const [caret, setCaret] = useState(() => value.length);\n    const [rawHighlightedIndex, setHighlightedIndex] = useState(0);\n    // Escape closes the menu whatever `suggestions` and `loading` say. Lifted by an edit or a\n    // refocus, so navigating a dismissed query does not pop it back open.\n    const [dismissed, setDismissed] = useState(false);\n    const [menuPosition, setMenuPosition] = useState<CaretMenuGeometry | null>(null);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const mirrorRef = useRef<HTMLDivElement>(null);\n    const measureRef = useRef<HTMLSpanElement>(null);\n    const menuRef = useRef<HTMLDivElement>(null);\n    const rowRefs = useRef<(HTMLButtonElement | null)[]>([]);\n    // Caret restore after an accepted suggestion. Carries the string it was computed against:\n    // nothing obliges a controlled consumer to apply the value handed to `onChange`, and a\n    // caret from a rejected or rewritten suggestion must not land on a later unrelated edit.\n    const pendingSelectionRef = useRef<{ value: string; caret: number } | null>(null);\n\n    const suggestionsProvided = Array.isArray(suggestions);\n    const suggestionList = suggestions ?? [];\n    const hasSuggestions = suggestionList.length > 0;\n    const isEmptyList = suggestionsProvided && !hasSuggestions;\n    const wantsMenu = loading || hasSuggestions || (isEmptyList && !!emptyMessage);\n    const isMenuOpen = focused && wantsMenu && !dismissed && !disabled;\n    // `loading` paints the spinner over any rows the consumer is still holding, so nothing is\n    // on screen to arrow through, accept, or point `aria-activedescendant` at.\n    const rowsVisible = isMenuOpen && hasSuggestions && !loading;\n\n    // A consumer's `suggestions` array is commonly rebuilt inline, so its identity changes on\n    // any parent re-render and cannot stand in for \"the candidates changed\". Clamping during\n    // render keeps the row the user arrowed to, and keeps the highlight inside a shrunken list.\n    const highlightedIndex = hasSuggestions\n        ? Math.min(rawHighlightedIndex, suggestionList.length - 1)\n        : -1;\n\n    useLayoutEffect(() => {\n        setCaret((current) => Math.min(current, value.length));\n    }, [value]);\n\n    const syncMirrorScroll = useCallback(() => {\n        const input = inputRef.current;\n        const mirror = mirrorRef.current;\n        if (input && mirror) {\n            mirror.style.transform = `translateX(${-input.scrollLeft}px)`;\n        }\n    }, []);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: re-syncs on every value change, not on value itself\n    useLayoutEffect(() => {\n        syncMirrorScroll();\n    }, [value, syncMirrorScroll]);\n\n    const updateMenuPosition = useCallback(() => {\n        const input = inputRef.current;\n        if (!input) {\n            return;\n        }\n        const caretOffsetPx = (measureRef.current?.offsetWidth ?? 0) - input.scrollLeft;\n        setMenuPosition(\n            computeCaretMenuGeometry({\n                inputRect: input.getBoundingClientRect(),\n                caretOffsetPx,\n                menuWidth: menuRef.current?.offsetWidth ?? MENU_FALLBACK_WIDTH_PX,\n                menuHeight: menuRef.current?.offsetHeight ?? 0,\n                viewportWidth: window.innerWidth,\n                viewportHeight: window.innerHeight,\n            }),\n        );\n    }, []);\n\n    // Depends on `caret` as well as `value`: the measuring span is sliced at the caret, so an\n    // arrow-key move with no edit still changes where the menu belongs.\n    // biome-ignore lint/correctness/useExhaustiveDependencies: repositions on every keystroke, not on value itself\n    useLayoutEffect(() => {\n        if (isMenuOpen) {\n            updateMenuPosition();\n        } else {\n            setMenuPosition(null);\n        }\n        // `suggestions` and `loading` are here because they change the menu's own size: rows\n        // arriving after a fetch resize it while the query and caret sit still, and a stale\n        // measurement would leave `openUp` and the caret-aligned `left` computed for the old box.\n    }, [isMenuOpen, value, caret, suggestions, loading, updateMenuPosition]);\n\n    useEffect(() => {\n        if (!isMenuOpen) {\n            return undefined;\n        }\n        const handleScrollOrResize = () => updateMenuPosition();\n        window.addEventListener('scroll', handleScrollOrResize, true);\n        window.addEventListener('resize', handleScrollOrResize);\n        const popEscapeLayer = pushEscapeLayer(() => setDismissed(true));\n        return () => {\n            window.removeEventListener('scroll', handleScrollOrResize, true);\n            window.removeEventListener('resize', handleScrollOrResize);\n            popEscapeLayer();\n        };\n    }, [isMenuOpen, updateMenuPosition]);\n\n    // Restore the caret placed by the last accepted suggestion once the new `value` has\n    // actually rendered. Guarded on the ref so an externally-driven value change never gets\n    // its selection clobbered.\n    // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally re-reads latest closures via pendingSelectionRef's gate\n    useLayoutEffect(() => {\n        const pending = pendingSelectionRef.current;\n        if (pending === null) {\n            return;\n        }\n        pendingSelectionRef.current = null;\n        const input = inputRef.current;\n        // Dropped unless the consumer applied exactly the string this caret was measured\n        // against. A rejected or rewritten suggestion leaves the caret where the user put it.\n        if (!input || pending.value !== value) {\n            return;\n        }\n        input.setSelectionRange(pending.caret, pending.caret);\n        setCaret(pending.caret);\n        onQueryContextChange?.({ value, caret: pending.caret });\n        syncMirrorScroll();\n        updateMenuPosition();\n    }, [value]);\n\n    // Scrolled by hand rather than with `scrollIntoView`, which would also scroll the page and\n    // carry the field itself out of view. Same reason MultiSelect does it this way.\n    useLayoutEffect(() => {\n        if (!rowsVisible) {\n            return;\n        }\n        const row = rowRefs.current[highlightedIndex];\n        const container = menuRef.current;\n        if (!row || !container) {\n            return;\n        }\n        const rowBottom = row.offsetTop + row.offsetHeight;\n        if (rowBottom > container.scrollTop + container.clientHeight) {\n            container.scrollTop = rowBottom - container.clientHeight;\n        } else if (row.offsetTop < container.scrollTop) {\n            container.scrollTop = row.offsetTop;\n        }\n    }, [highlightedIndex, rowsVisible]);\n\n    // useInsertionEffect, not layout: the rules have to land before the rows paint.\n    useInsertionEffect(() => {\n        if (isMenuOpen) {\n            ensureMultiSelectPanelStyles();\n        }\n    }, [isMenuOpen]);\n\n    const reportCaret = (nextValue: string, nextCaret: number) => {\n        setCaret(nextCaret);\n        onQueryContextChange?.({ value: nextValue, caret: nextCaret });\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const next = event.target.value;\n        // Editing is the user asking again, so it lifts an earlier Escape. Moving the caret is\n        // not, and neither is a new `suggestions` array: that identity changes on any parent\n        // re-render, which would undo the dismissal with nothing having been asked.\n        setDismissed(false);\n        setHighlightedIndex(0);\n        onChange(next);\n        reportCaret(next, event.target.selectionStart ?? next.length);\n    };\n\n    const handleSelect = (event: React.SyntheticEvent<HTMLInputElement>) => {\n        const target = event.currentTarget;\n        reportCaret(target.value, target.selectionStart ?? target.value.length);\n    };\n\n    const acceptSuggestion = (suggestion: QuerySuggestion) => {\n        const fallbackCaret = inputRef.current?.selectionStart ?? value.length;\n        const range = activeRange ?? { start: fallbackCaret, end: fallbackCaret };\n        // Clamped for the same reason `sanitizeTokens` drops a bad range, except this one\n        // writes: `slice` reads a negative index from the end of the string, so an unchecked\n        // `start` of -1 silently rewrites the tail instead of doing nothing.\n        const start = Math.max(0, Math.min(range.start, value.length));\n        const end = Math.max(start, Math.min(range.end, value.length));\n        const insertText = suggestion.insertText ?? suggestion.label;\n        const next = value.slice(0, start) + insertText + value.slice(end);\n        pendingSelectionRef.current = { value: next, caret: start + insertText.length };\n        onChange(next);\n        onAccept?.(suggestion);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (rowsVisible && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {\n            event.preventDefault();\n            const count = suggestionList.length;\n            // Steps from the clamped index, so a list that shrank moves from the row on screen\n            // rather than from a raw index the user can no longer see.\n            setHighlightedIndex(\n                event.key === 'ArrowDown'\n                    ? (highlightedIndex + 1) % count\n                    : (highlightedIndex - 1 + count) % count,\n            );\n            return;\n        }\n\n        const highlighted =\n            rowsVisible && highlightedIndex >= 0 ? suggestionList[highlightedIndex] : undefined;\n\n        if (event.key === 'Enter') {\n            if (highlighted) {\n                event.preventDefault();\n                acceptSuggestion(highlighted);\n                return;\n            }\n            if (onSubmit) {\n                // Otherwise a surrounding <form> submits too and the query is sent twice.\n                // Without the prop the native submit is left alone, which is the useful default.\n                event.preventDefault();\n                onSubmit(value);\n            }\n            return;\n        }\n\n        if (event.key === 'Tab' && highlighted) {\n            // Tab completes the term and stays put, the way an editor or a search bar does.\n            // Letting focus move on would hand the next keystroke to another field.\n            event.preventDefault();\n            acceptSuggestion(highlighted);\n        }\n    };\n\n    const segments = buildSegments(value, tokens);\n    const textStyle = TEXT_STYLE[size];\n\n    const menuContent = (() => {\n        if (loading) {\n            return (\n                // `role=\"listbox\"` admits only option/group children.\n                <div role=\"presentation\" style={MENU_MESSAGE_STYLE}>\n                    <Spinner size=\"xxxsmall\" />\n                    <span>Loading…</span>\n                </div>\n            );\n        }\n        if (hasSuggestions) {\n            return suggestionList.map((suggestion, index) => {\n                const highlighted = index === highlightedIndex;\n                return (\n                    <button\n                        key={suggestion.id}\n                        ref={(element) => {\n                            rowRefs.current[index] = element;\n                        }}\n                        type=\"button\"\n                        id={getRowId(index)}\n                        role=\"option\"\n                        aria-selected={highlighted}\n                        // Focus stays on the input under the activedescendant model, so a row\n                        // must not become its own tab stop.\n                        tabIndex={-1}\n                        onClick={() => acceptSuggestion(suggestion)}\n                        onMouseEnter={() => setHighlightedIndex(index)}\n                        className=\"malachite-multiselect-option\"\n                        data-highlighted={highlighted}\n                        style={{\n                            display: 'flex',\n                            alignItems: 'center',\n                            gap: 12,\n                            width: '100%',\n                            flexShrink: 0,\n                            border: 'none',\n                            textAlign: 'left',\n                            borderRadius: 8,\n                            padding: '8px 10px',\n                            font: 'inherit',\n                            cursor: 'pointer',\n                            color: 'var(--malachite-text-primary, rgb(10, 10, 10))',\n                        }}\n                    >\n                        <span\n                            style={{\n                                flex: 1,\n                                minWidth: 0,\n                                overflow: 'hidden',\n                                textOverflow: 'ellipsis',\n                                whiteSpace: 'nowrap',\n                            }}\n                        >\n                            {suggestion.label}\n                        </span>\n                        {suggestion.detail && (\n                            <span\n                                style={{\n                                    flexShrink: 0,\n                                    fontSize: 'var(--malachite-font-size-xsmall, 11px)',\n                                    color: 'var(--malachite-text-secondary, rgb(123, 123, 123))',\n                                }}\n                            >\n                                {suggestion.detail}\n                            </span>\n                        )}\n                    </button>\n                );\n            });\n        }\n        if (emptyMessage) {\n            // `role=\"listbox\"` admits only option/group children.\n            return (\n                <div role=\"presentation\" style={MENU_MESSAGE_STYLE}>\n                    {emptyMessage}\n                </div>\n            );\n        }\n        return null;\n    })();\n\n    const hoverBorderClass = disabled ? '' : 'hover:border-[var(--malachite-text-placeholder)]';\n\n    return (\n        <div\n            className={`relative w-full ${SIZE_CLASSES[size]} bg-[var(--malachite-card-background)] border border-solid border-[var(--malachite-card-border)] ${hoverBorderClass} transition-colors flex items-center ${disabled ? 'opacity-60 cursor-not-allowed' : ''} ${className}`}\n            style={{\n                boxShadow: 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                borderColor: focused\n                    ? 'var(--malachite-control-border-hover, rgba(0, 175, 102, 0.4))'\n                    : undefined,\n                ...style,\n            }}\n        >\n            {/* Clips here, not on the mirror: the mirror is what translates, and a transform\n                carries the element's own clip rect with it, so the window onto the text would\n                slide out of the field by exactly `scrollLeft`. */}\n            <div className=\"relative flex-1 h-full min-w-0 overflow-hidden\">\n                {/* aria-hidden: purely decorative, the input carries the accessible value. */}\n                <div\n                    ref={mirrorRef}\n                    aria-hidden=\"true\"\n                    className={`absolute inset-0 flex items-center pointer-events-none ${CONTROL_TEXT_SIZE_CLASS[size]}`}\n                    style={{ ...textStyle, whiteSpace: 'pre' }}\n                >\n                    {segments.map((segment) => (\n                        <span\n                            key={segment.start}\n                            style={{\n                                color: TOKEN_COLORS[segment.kind],\n                                ...(segment.kind === 'error'\n                                    ? { textDecoration: 'underline wavy' }\n                                    : {}),\n                            }}\n                        >\n                            {value.slice(segment.start, segment.end)}\n                        </span>\n                    ))}\n                    <span\n                        ref={measureRef}\n                        style={{ position: 'absolute', top: 0, left: 0, visibility: 'hidden' }}\n                    >\n                        {value.slice(0, caret)}\n                    </span>\n                </div>\n                <input\n                    ref={inputRef}\n                    type=\"text\"\n                    role=\"combobox\"\n                    aria-expanded={isMenuOpen}\n                    aria-controls={isMenuOpen ? listboxId : undefined}\n                    aria-activedescendant={\n                        rowsVisible && highlightedIndex >= 0\n                            ? getRowId(highlightedIndex)\n                            : undefined\n                    }\n                    aria-autocomplete=\"list\"\n                    autoComplete=\"off\"\n                    spellCheck={false}\n                    aria-labelledby={ariaLabelledBy}\n                    // A visible label outranks it, so the fallback only applies without one.\n                    aria-label={ariaLabelledBy ? undefined : (ariaLabel ?? placeholder)}\n                    value={value}\n                    onChange={handleChange}\n                    onSelect={handleSelect}\n                    onScroll={() => {\n                        syncMirrorScroll();\n                        if (isMenuOpen) {\n                            updateMenuPosition();\n                        }\n                    }}\n                    onKeyDown={handleKeyDown}\n                    onFocus={() => {\n                        setFocused(true);\n                        setDismissed(false);\n                    }}\n                    onBlur={() => setFocused(false)}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    className={`absolute inset-0 w-full h-full bg-transparent border-none outline-none ${CONTROL_TEXT_SIZE_CLASS[size]} placeholder:text-[var(--malachite-text-placeholder)] placeholder:font-medium disabled:cursor-not-allowed`}\n                    style={{\n                        ...textStyle,\n                        color: 'transparent',\n                        caretColor: 'var(--malachite-text-primary, rgb(10, 10, 10))',\n                    }}\n                />\n            </div>\n            {isMenuOpen &&\n                createPortal(\n                    <div\n                        ref={menuRef}\n                        id={listboxId}\n                        role=\"listbox\"\n                        // Rides the dropdown overlay band, but borrows the multiselect option\n                        // rows below: their highlight follows `data-highlighted`, which is the\n                        // keyboard cursor this menu has, rather than a bare `:hover`.\n                        {...overlayIdentity('dropdown')}\n                        onMouseDown={handleMenuMouseDown}\n                        style={{\n                            position: 'fixed',\n                            top: menuPosition?.top ?? 0,\n                            left: menuPosition?.left ?? 0,\n                            minWidth: Math.min(\n                                MENU_FALLBACK_WIDTH_PX,\n                                menuPosition?.width ?? MENU_FALLBACK_WIDTH_PX,\n                            ),\n                            maxWidth: Math.min(\n                                MENU_MAX_WIDTH_PX,\n                                menuPosition?.width ?? MENU_MAX_WIDTH_PX,\n                            ),\n                            background: 'var(--malachite-card-background, rgb(255, 255, 255))',\n                            border: '1px solid var(--malachite-card-border, rgb(232, 232, 232))',\n                            borderRadius: 12,\n                            boxShadow: '0px 2px 5px 0px rgba(0, 0, 0, 0.1)',\n                            padding: 4,\n                            display: 'flex',\n                            flexDirection: 'column',\n                            gap: 2,\n                            maxHeight: 320,\n                            overflowY: 'auto',\n                            fontSize: CONTROL_TEXT_SIZE[size],\n                            visibility: menuPosition ? 'visible' : 'hidden',\n                            opacity: menuPosition ? 1 : 0,\n                        }}\n                    >\n                        {menuContent}\n                    </div>,\n                    document.body,\n                )}\n        </div>\n    );\n};\n\nexport default QueryInput;\nexport { QueryInput };\n"],"names":["SIZE_CLASSES","TOKEN_COLORS","TEXT_STYLE","CONTROL_TEXT_SIZE","MENU_FALLBACK_WIDTH_PX","MENU_MAX_WIDTH_PX","MENU_MESSAGE_STYLE","handleMenuMouseDown","event","sanitizeTokens","value","tokens","sorted","token","a","b","accepted","cursor","buildSegments","segments","QueryInput","onChange","suggestions","activeRange","onAccept","onQueryContextChange","onSubmit","placeholder","size","disabled","loading","emptyMessage","className","style","ariaLabel","ariaLabelledBy","listboxId","useId","getRowId","index","focused","setFocused","useState","caret","setCaret","rawHighlightedIndex","setHighlightedIndex","dismissed","setDismissed","menuPosition","setMenuPosition","inputRef","useRef","mirrorRef","measureRef","menuRef","rowRefs","pendingSelectionRef","suggestionsProvided","suggestionList","hasSuggestions","isMenuOpen","rowsVisible","highlightedIndex","useLayoutEffect","current","syncMirrorScroll","useCallback","input","mirror","updateMenuPosition","caretOffsetPx","_a","computeCaretMenuGeometry","_b","_c","useEffect","handleScrollOrResize","popEscapeLayer","pushEscapeLayer","pending","row","container","rowBottom","useInsertionEffect","ensureMultiSelectPanelStyles","reportCaret","nextValue","nextCaret","handleChange","next","handleSelect","target","acceptSuggestion","suggestion","fallbackCaret","range","start","end","insertText","handleKeyDown","count","highlighted","textStyle","menuContent","jsxs","jsx","Spinner","element","hoverBorderClass","CONTROL_TEXT_SIZE_CLASS","segment","createPortal","overlayIdentity"],"mappings":"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"}

package/dist/components/Radio.js

@@ -0,0 +1,63 @@
+import { jsx as a } from "react/jsx-runtime";
+import { FOCUS_RING as h } from "./focusRing.js";
+const x = ({
+  checked: r,
+  onChange: t,
+  disabled: o = !1,
+  size: e = 14,
+  presentational: l = !1,
+  "aria-label": u,
+  "aria-labelledby": b,
+  className: i = "",
+  id: p
+}) => {
+  const n = 2 * Math.round(e * 0.5 / 2), s = r ? "border-[color:var(--malachite-accent-foreground)]" : `border-[color:var(--malachite-text-placeholder)]${o || l ? "" : " hover:border-[color:var(--malachite-text-secondary)]"}`, c = {
+    position: "relative",
+    flexShrink: 0,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: `${e}px`,
+    height: `${e}px`,
+    padding: 0,
+    borderRadius: "50%",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    backgroundColor: "transparent",
+    opacity: o ? 0.5 : 1,
+    transition: "border-color 150ms ease-in-out"
+  }, d = r ? /* @__PURE__ */ a(
+    "span",
+    {
+      style: {
+        width: `${n}px`,
+        height: `${n}px`,
+        borderRadius: "50%",
+        backgroundColor: "var(--malachite-accent-foreground, rgb(2, 122, 66))"
+      }
+    }
+  ) : null;
+  return l ? /* @__PURE__ */ a("span", { "aria-hidden": "true", className: `${s} ${i}`, style: c, children: d }) : /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      id: p,
+      "aria-checked": r,
+      "aria-label": u,
+      "aria-labelledby": b,
+      disabled: o,
+      onClick: () => {
+        r || t == null || t(!0);
+      },
+      className: `${h} ${s} ${i}`,
+      style: { ...c, cursor: o ? "not-allowed" : "pointer" },
+      children: d
+    }
+  );
+};
+export {
+  x as Radio,
+  x as default
+};
+//# sourceMappingURL=Radio.js.map

package/dist/components/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../src/components/Radio.tsx"],"sourcesContent":["import React from 'react';\nimport { FOCUS_RING } from './focusRing';\n\ninterface RadioProps {\n    checked: boolean;\n    /** Optional when `presentational` — a presentational radio is a visual indicator only. */\n    onChange?: (checked: boolean) => void;\n    disabled?: boolean;\n    size?: number;\n    /**\n     * Render a visual-only indicator (a non-interactive, non-focusable `<span>`,\n     * `aria-hidden`) instead of an interactive radio. Use this inside a clickable\n     * row/card whose wrapper is the real control, so there's a single tab stop.\n     */\n    presentational?: boolean;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    className?: string;\n    id?: string;\n}\n\nconst Radio: React.FC<RadioProps> = ({\n    checked,\n    onChange,\n    disabled = false,\n    size = 14,\n    presentational = false,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n    id,\n}) => {\n    // Keep the dot an even number of pixels so the leftover space (size - dot) is even\n    // and the flex-centred dot lands on whole pixels. An odd dot leaves a half-pixel per\n    // side, which renders visibly off-centre on 1x / fractionally-scaled displays\n    // (e.g. Windows at 125%/150%).\n    const dot = 2 * Math.round((size * 0.5) / 2);\n\n    // Border colour lives in Tailwind classes (not inline) so the hover variant can\n    // override it — inline styles would always win over a `:hover` rule. A\n    // presentational indicator has no interactive hover (the row owns hover).\n    const hoverClass =\n        disabled || presentational ? '' : ' hover:border-[color:var(--malachite-text-secondary)]';\n    const borderClass = checked\n        ? 'border-[color:var(--malachite-accent-foreground)]'\n        : `border-[color:var(--malachite-text-placeholder)]${hoverClass}`;\n\n    const circleStyle: React.CSSProperties = {\n        position: 'relative',\n        flexShrink: 0,\n        display: 'inline-flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        width: `${size}px`,\n        height: `${size}px`,\n        padding: 0,\n        borderRadius: '50%',\n        borderWidth: '1px',\n        borderStyle: 'solid',\n        backgroundColor: 'transparent',\n        opacity: disabled ? 0.5 : 1,\n        transition: 'border-color 150ms ease-in-out',\n    };\n\n    const innerDot = checked ? (\n        <span\n            style={{\n                width: `${dot}px`,\n                height: `${dot}px`,\n                borderRadius: '50%',\n                backgroundColor: 'var(--malachite-accent-foreground, rgb(2, 122, 66))',\n            }}\n        />\n    ) : null;\n\n    if (presentational) {\n        return (\n            <span aria-hidden=\"true\" className={`${borderClass} ${className}`} style={circleStyle}>\n                {innerDot}\n            </span>\n        );\n    }\n\n    return (\n        <button\n            type=\"button\"\n            role=\"radio\"\n            id={id}\n            aria-checked={checked}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            disabled={disabled}\n            onClick={() => {\n                // Radios don't toggle off on re-click; the parent manages the group.\n                if (!checked) onChange?.(true);\n            }}\n            className={`${FOCUS_RING} ${borderClass} ${className}`}\n            style={{ ...circleStyle, cursor: disabled ? 'not-allowed' : 'pointer' }}\n        >\n            {innerDot}\n        </button>\n    );\n};\n\nexport default Radio;\nexport { Radio };\nexport type { RadioProps };\n"],"names":["Radio","checked","onChange","disabled","size","presentational","ariaLabel","ariaLabelledBy","className","id","dot","borderClass","circleStyle","innerDot","jsx","FOCUS_RING"],"mappings":";;AAqBA,MAAMA,IAA8B,CAAC;AAAA,EACjC,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,gBAAAC,IAAiB;AAAA,EACjB,cAAcC;AAAA,EACd,mBAAmBC;AAAA,EACnB,WAAAC,IAAY;AAAA,EACZ,IAAAC;AACJ,MAAM;AAKF,QAAMC,IAAM,IAAI,KAAK,MAAON,IAAO,MAAO,CAAC,GAOrCO,IAAcV,IACd,sDACA,mDAHFE,KAAYE,IAAiB,KAAK,uDAG6B,IAE7DO,IAAmC;AAAA,IACrC,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO,GAAGR,CAAI;AAAA,IACd,QAAQ,GAAGA,CAAI;AAAA,IACf,SAAS;AAAA,IACT,cAAc;AAAA,IACd,aAAa;AAAA,IACb,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,SAASD,IAAW,MAAM;AAAA,IAC1B,YAAY;AAAA,EAAA,GAGVU,IAAWZ,IACb,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,QACH,OAAO,GAAGJ,CAAG;AAAA,QACb,QAAQ,GAAGA,CAAG;AAAA,QACd,cAAc;AAAA,QACd,iBAAiB;AAAA,MAAA;AAAA,IACrB;AAAA,EAAA,IAEJ;AAEJ,SAAIL,IAEI,gBAAAS,EAAC,QAAA,EAAK,eAAY,QAAO,WAAW,GAAGH,CAAW,IAAIH,CAAS,IAAI,OAAOI,GACrE,UAAAC,GACL,IAKJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,MAAK;AAAA,MACL,IAAAL;AAAA,MACA,gBAAcR;AAAA,MACd,cAAYK;AAAA,MACZ,mBAAiBC;AAAA,MACjB,UAAAJ;AAAA,MACA,SAAS,MAAM;AAEX,QAAKF,KAASC,KAAA,QAAAA,EAAW;AAAA,MAC7B;AAAA,MACA,WAAW,GAAGa,CAAU,IAAIJ,CAAW,IAAIH,CAAS;AAAA,MACpD,OAAO,EAAE,GAAGI,GAAa,QAAQT,IAAW,gBAAgB,UAAA;AAAA,MAE3D,UAAAU;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/dist/components/Search.js

@@ -0,0 +1,54 @@
+import { jsxs as C, jsx as c } from "react/jsx-runtime";
+import { useState as S } from "react";
+import $ from "./CustomIcons/SearchIcon.js";
+import { CONTROL_TEXT_SIZE_CLASS as w } from "./controlTextSize.js";
+const 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)]"
+}, E = 15, L = ({
+  value: s,
+  onChange: n,
+  placeholder: r,
+  size: t = "large",
+  variant: d = "default",
+  disabled: a = !1,
+  autoFocus: i = !1,
+  className: x = "",
+  style: h
+}) => {
+  const [o, l] = S(!1), e = d === "muted", p = e ? "bg-[var(--malachite-card-border)]" : "bg-[var(--malachite-card-background)]", m = e ? "border-transparent" : "border-[var(--malachite-card-border)]", u = a ? "" : "hover:border-[var(--malachite-text-placeholder)]", v = e ? "text-[var(--malachite-text-secondary)]" : "text-[var(--malachite-text-placeholder)]", g = e ? "placeholder:text-[var(--malachite-text-secondary)]" : "placeholder:text-[var(--malachite-text-placeholder)]", b = 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)";
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      className: `w-full ${p} border border-solid ${m} ${u} transition-colors flex items-center ${y[t]} ${a ? "opacity-60 cursor-not-allowed" : ""} ${x}`,
+      style: {
+        boxShadow: b,
+        borderColor: o ? "var(--malachite-control-border-hover, rgba(0, 175, 102, 0.4))" : void 0,
+        ...h
+      },
+      children: [
+        /* @__PURE__ */ c($, { size: E, className: `${v} shrink-0` }),
+        /* @__PURE__ */ c(
+          "input",
+          {
+            type: "text",
+            value: s,
+            onChange: (f) => n(f.target.value),
+            onFocus: () => l(!0),
+            onBlur: () => l(!1),
+            placeholder: r,
+            "aria-label": r ?? "Search",
+            disabled: a,
+            autoFocus: i,
+            className: `flex-1 bg-transparent border-none outline-none ${w[t]} font-medium text-[var(--malachite-text-primary)] ${g} placeholder:font-medium disabled:cursor-not-allowed min-w-0`
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  L as default
+};
+//# sourceMappingURL=Search.js.map

package/dist/components/Search.js.map

@@ -0,0 +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';\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    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    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                ...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","style","focused","setFocused","useState","isMuted","bgClass","restingBorderClass","hoverBorderClass","iconColorClass","placeholderColorClass","boxShadow","jsxs","jsx","SearchIcon","e","CONTROL_TEXT_SIZE_CLASS"],"mappings":";;;;AASA,MAAMA,IAA2C;AAAA,EAC7C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACX,GAEMC,IAAY,IAeZC,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;AACJ,MAAM;AACF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAUR,MAAY,SAKtBS,IAAUD,IACV,sCACA,yCACAE,IAAqBF,IACrB,uBACA,yCAEAG,IAAmBV,IAAW,KAAK,oDACnCW,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,wCAAwClB,EAAaM,CAAI,CAAC,IAAIE,IAAW,kCAAkC,EAAE,IAAIE,CAAS;AAAA,MACpN,OAAO;AAAA,QACH,WAAAW;AAAA,QACA,aAAaT,IACP,kEACA;AAAA,QACN,GAAGD;AAAA,MAAA;AAAA,MAGP,UAAA;AAAA,QAAA,gBAAAY,EAACC,KAAW,MAAMvB,GAAW,WAAW,GAAGkB,CAAc,aAAa;AAAA,QACtE,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,OAAApB;AAAA,YACA,UAAU,CAACsB,MAAMrB,EAASqB,EAAE,OAAO,KAAK;AAAA,YACxC,SAAS,MAAMZ,EAAW,EAAI;AAAA,YAC9B,QAAQ,MAAMA,EAAW,EAAK;AAAA,YAC9B,aAAAR;AAAA,YACA,cAAYA,KAAe;AAAA,YAC3B,UAAAG;AAAA,YACA,WAAAC;AAAA,YACA,WAAW,kDAAkDiB,EAAwBpB,CAAI,CAAC,qDAAqDc,CAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,MACxK;AAAA,IAAA;AAAA,EAAA;AAGZ;"}