@cloudflare/kumo 2.2.2 → 2.3.0

package/scripts/theme-generator/config.ts

@@ -508,8 +508,8 @@ export const THEME_CONFIG: ThemeConfig = {
       description: "Green badge background",
       theme: {
         kumo: {
-          light: "var(--color-emerald-700, oklch(50.8% 0.118 165.612))",
-          dark: "var(--color-emerald-700, oklch(50.8% 0.118 165.612))",
+          light: "var(--color-emerald-500, oklch(69.6% 0.17 162.48))",
+          dark: "var(--color-emerald-400, oklch(76.5% 0.177 163.223))",
         },
       },
     },
@@ -554,7 +554,7 @@ export const THEME_CONFIG: ThemeConfig = {
       description: "Neutral badge background",
       theme: {
         kumo: {
-          light: "var(--color-neutral-600, oklch(43.9% 0 0))",
+          light: "var(--color-neutral-500, oklch(55.6% 0 0))",
           dark: "var(--color-neutral-600, oklch(43.9% 0 0))",
         },
       },

package/dist/chunks/SankeyChart-dkq90770ad7hgzx3.js

@@ -1,635 +0,0 @@
-"use client";
-import { jsx as N, jsxs as z } from "react/jsx-runtime";
-import { forwardRef as re, useRef as H, useEffect as M, useMemo as P, useCallback as se } from "react";
-import { c as T } from "./cn-ct4n7r74mh8y0f48.js";
-var te = /* @__PURE__ */ ((e) => (e.Attention = "#FC574A", e.Warning = "#F8A054", e.Success = "#00A63E", e.Neutral = "#B9D6FF", e.Disabled = "#CBCBCB", e.Skeleton = "#DDDDDD", e))(te || {}), ne = /* @__PURE__ */ ((e) => (e.Attention = "#FC574A", e.Warning = "#F8A054", e.Success = "#00A63E", e.Neutral = "#8EC5FF", e.Disabled = "#878787", e.Skeleton = "#5C5C5C", e))(ne || {});
-const oe = {
-  blues: ["#E1EAF4", "#8EBCF6", "#4290F0", "#0E58B4", "#03254F"]
-}, ae = {
-  blues: ["#03254F", "#0E58B4", "#4290F0", "#A6BFDD", "#E1EAF4"]
-}, K = [
-  "#4290F0",
-  "#F5B647",
-  "#E8649D",
-  "#8D58EE",
-  "#50C3B6",
-  "#D37536"
-  /* Orange */
-], Y = [
-  "#4290F0",
-  "#EEB720",
-  "#E8649D",
-  "#8D58EE",
-  "#50C3B6",
-  "#D37536"
-  /* Orange */
-];
-var j;
-((e) => {
-  function t(s, d = !1) {
-    return d ? ne[s] : te[s];
-  }
-  e.semantic = t;
-  function a(s, d = !1) {
-    return d ? Y[s % Y.length] : K[s % K.length];
-  }
-  e.categorical = a;
-  function l(s, d = !1) {
-    return d ? [...ae[s]] : [...oe[s]];
-  }
-  e.sequential = l;
-  function r(s, d = !1) {
-    const b = {
-      light: { primary: "#6B7280", secondary: "#9CA3AF" },
-      dark: { primary: "#9CA3AF", secondary: "#6B7280" }
-    };
-    return d ? b.dark[s] : b.light[s];
-  }
-  e.text = r;
-})(j || (j = {}));
-const Q = (e) => {
-  const { dangerousHtmlFormatter: t, ...a } = e;
-  return {
-    ...a,
-    formatter: t
-  };
-}, ce = (e) => e.tooltip ? {
-  ...e,
-  tooltip: Array.isArray(e.tooltip) ? e.tooltip.map(Q) : Q(e.tooltip)
-} : e, J = re(function({
-  echarts: t,
-  options: a,
-  optionUpdateBehavior: l,
-  className: r,
-  isDarkMode: s,
-  height: d = 350,
-  onEvents: b
-}, g) {
-  const p = H(null), S = H(null), A = H({}), E = H({}), F = H(/* @__PURE__ */ new Set());
-  return M(() => {
-    if (!p.current) return;
-    const f = t.init(
-      p.current,
-      s ? "dark" : {
-        color: s ? Y : K
-      }
-    );
-    return S.current = f, typeof g == "function" ? g(f) : g && (g.current = f), () => {
-      for (const x of F.current) {
-        const o = E.current[x];
-        o && f.off(x, o);
-      }
-      F.current.clear(), typeof g == "function" ? g(null) : g && (g.current = null), S.current = null, f.dispose();
-    };
-  }, [p, s]), M(() => {
-    const f = S.current;
-    f && f.setOption(ce(a), {
-      notMerge: !1,
-      lazyUpdate: !0,
-      ...l
-    });
-  }, [s, l, a]), M(() => {
-    A.current = b ?? {};
-  }, [b]), M(() => {
-    const f = S.current;
-    if (!f) return;
-    const x = /* @__PURE__ */ new Set();
-    for (const [o, v] of Object.entries(b ?? {}))
-      typeof v == "function" && (x.add(o), E.current[o] || (E.current[o] = (L) => {
-        A.current[o]?.(L);
-      }), F.current.has(o) || f.on(o, E.current[o]));
-    for (const o of F.current) {
-      if (x.has(o)) continue;
-      const v = E.current[o];
-      v && f.off(o, v);
-    }
-    F.current = x;
-  }, [t, s, b]), M(() => {
-    const f = S.current, x = p.current;
-    if (!f || !x) return;
-    let o = !0;
-    const v = new ResizeObserver(() => {
-      if (o) {
-        o = !1;
-        return;
-      }
-      f.resize();
-    });
-    return v.observe(x), () => v.disconnect();
-  }, []), /* @__PURE__ */ N(
-    "div",
-    {
-      ref: p,
-      className: T("w-full", r),
-      style: { height: d },
-      tabIndex: a.aria?.enabled ? 0 : void 0,
-      role: a.aria?.enabled ? "img" : void 0
-    }
-  );
-});
-J.displayName = "Chart";
-function ye({
-  echarts: e,
-  type: t = "line",
-  data: a,
-  xAxisName: l,
-  xAxisTickCount: r,
-  xAxisTickFormat: s,
-  yAxisTickFormat: d,
-  yAxisTickLabelFormat: b,
-  yAxisName: g,
-  yAxisTickCount: p,
-  tooltipValueFormat: S,
-  onTimeRangeChange: A,
-  height: E = 350,
-  incomplete: F,
-  isDarkMode: f,
-  gradient: x,
-  loading: o,
-  ariaDescription: v,
-  optionUpdateBehavior: L
-}) {
-  const O = H(null), R = F?.before, C = F?.after, k = P(() => {
-    const i = [], B = t === "bar" ? { type: "bar", stack: "total" } : { type: "line", showSymbol: !1 };
-    for (const c of a) {
-      const $ = R && t === "line" ? c.data.filter((w) => w[0] <= R) : [], n = C && t === "line" ? c.data.filter((w) => w[0] >= C) : [], u = $.length > 0 || n.length > 0 ? c.data.slice(
-        Math.max(0, $.length - 1),
-        Math.max(0, c.data.length - n.length + 1)
-      ) : c.data, m = x && t === "line" ? {
-        color: new e.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: Z(c.color, 0.4) },
-          { offset: 1, color: Z(c.color, 0) }
-        ])
-      } : void 0;
-      i.push({
-        data: u,
-        color: c.color,
-        name: c.name,
-        emphasis: { focus: "series" },
-        ...m ? { areaStyle: m } : {},
-        ...B
-      });
-      const y = {
-        color: c.color,
-        name: c.name,
-        type: "line",
-        lineStyle: { type: "dashed" },
-        showSymbol: !1,
-        emphasis: { focus: "series" }
-      };
-      $.length > 0 && i.push({
-        ...y,
-        data: $
-      }), n.length > 0 && i.push({
-        ...y,
-        data: n
-      });
-    }
-    return {
-      aria: {
-        enabled: !0,
-        ...v && { label: { description: v } }
-      },
-      brush: {
-        xAxisIndex: "all",
-        brushType: "lineX",
-        brushMode: "single",
-        outOfBrush: {
-          colorAlpha: 0.3
-        },
-        brushStyle: {
-          borderWidth: 1,
-          color: "rgba(120,140,180,0.3)",
-          borderColor: "rgba(120,140,180,0.8)"
-        }
-      },
-      tooltip: {
-        trigger: "axis",
-        appendTo: "body",
-        axisPointer: { type: "shadow" },
-        dangerousHtmlFormatter: (c) => {
-          const $ = Array.isArray(c) ? c : [c], n = /* @__PURE__ */ new Set(), u = $.filter((I) => n.has(I.seriesName) ? !1 : (n.add(I.seriesName), !0)), m = u[0], y = m?.value?.[0] ?? m?.axisValue, w = y != null ? `<div style="font-weight:600;margin-bottom:4px;">${e.format.encodeHTML(ie(y))}</div>` : "", V = u.map((I) => {
-            const G = I?.value?.[1], W = S ?? b, U = W ? e.format.encodeHTML(String(W(G))) : e.format.encodeHTML(String(G));
-            return `${I.marker} ${e.format.encodeHTML(I.seriesName)}: <strong>${U}</strong>`;
-          }).join("<br/>");
-          return `${w}${V}`;
-        }
-      },
-      backgroundColor: "transparent",
-      toolbox: { show: !1 },
-      xAxis: {
-        name: l,
-        nameLocation: "middle",
-        nameGap: 30,
-        type: "time",
-        splitLine: {
-          show: !1
-        },
-        axisLine: { show: !1 },
-        splitNumber: r ?? 5,
-        ...s && {
-          axisLabel: {
-            formatter: (c) => s(c)
-          }
-        }
-      },
-      yAxis: {
-        name: g,
-        nameLocation: "middle",
-        nameGap: 40,
-        type: "value",
-        axisTick: { show: !0 },
-        axisLabel: {
-          margin: 15,
-          ...d && {
-            formatter: (c) => d(c)
-          }
-        },
-        splitLine: {
-          show: !0,
-          lineStyle: { type: "dashed", width: 1 }
-        },
-        splitNumber: p
-      },
-      grid: {
-        left: g ? 30 : 24,
-        right: 24,
-        top: 24,
-        bottom: l ? 30 : 24
-      },
-      series: i
-    };
-  }, [
-    a,
-    l,
-    r,
-    s,
-    d,
-    b,
-    g,
-    p,
-    S,
-    R,
-    C,
-    t,
-    x,
-    e,
-    v
-  ]), _ = P(() => A ? {
-    brushend: (i) => {
-      const B = i.areas[0].coordRange;
-      A(B[0], B[1]), O.current?.dispatchAction({ type: "brush", areas: [] });
-    }
-  } : {}, [A]), h = !!A;
-  return M(() => {
-    const i = O.current;
-    if (i && h)
-      return i.dispatchAction({
-        type: "takeGlobalCursor",
-        key: "brush",
-        brushOption: {
-          brushType: "lineX",
-          brushMode: "single"
-        }
-      }), () => {
-        i.dispatchAction({
-          type: "takeGlobalCursor",
-          key: "brush",
-          brushOption: {
-            brushType: !1
-          }
-        });
-      };
-  }, [O, h, o]), /* @__PURE__ */ z("div", { className: "relative w-full", style: { height: E }, children: [
-    o && /* @__PURE__ */ N(le, { height: E, isDarkMode: f }),
-    !o && /* @__PURE__ */ N(
-      J,
-      {
-        echarts: e,
-        ref: O,
-        options: k,
-        height: E,
-        isDarkMode: f,
-        onEvents: _,
-        optionUpdateBehavior: L
-      }
-    )
-  ] });
-}
-function le({
-  height: e,
-  isDarkMode: t
-}) {
-  const a = e / 2, l = Math.min(e * 0.12, 28), r = 400, s = 120, d = [];
-  for (let p = 0; p <= s; p++) {
-    const S = -r + p / s * r * 3, A = a + Math.sin(p / s * 2 * Math.PI * 3) * l;
-    d.push(`${p === 0 ? "M" : "L"}${S.toFixed(2)},${A.toFixed(2)}`);
-  }
-  const b = d.join(" "), g = t ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.2)";
-  return /* @__PURE__ */ N(
-    "div",
-    {
-      "aria-hidden": "true",
-      className: "absolute inset-0 overflow-hidden",
-      style: { height: e },
-      children: /* @__PURE__ */ N(
-        "svg",
-        {
-          width: "100%",
-          height: e,
-          viewBox: `0 0 ${r} ${e}`,
-          preserveAspectRatio: "none",
-          className: "w-full animate-pulse",
-          children: /* @__PURE__ */ N(
-            "path",
-            {
-              d: b,
-              fill: "none",
-              stroke: g,
-              strokeWidth: "2",
-              style: {
-                animation: "kumo-chart-wave 2.4s linear infinite",
-                transformOrigin: "0 0"
-              }
-            }
-          )
-        }
-      )
-    }
-  );
-}
-function Z(e, t) {
-  const a = Math.max(0, Math.min(1, t)), l = e.match(
-    /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i
-  );
-  if (l)
-    return `rgba(${l[1]}, ${l[2]}, ${l[3]}, ${a})`;
-  let r = e.replace(/^#/, "");
-  r.length === 3 && (r = r[0] + r[0] + r[1] + r[1] + r[2] + r[2]), r.length === 8 && (r = r.slice(0, 6));
-  const s = parseInt(r.slice(0, 2), 16), d = parseInt(r.slice(2, 4), 16), b = parseInt(r.slice(4, 6), 16);
-  return `rgba(${s}, ${d}, ${b}, ${a})`;
-}
-function D(e) {
-  return e.toString().padStart(2, "0");
-}
-function ie(e) {
-  const t = new Date(e);
-  return `${t.getFullYear()}-${D(t.getMonth() + 1)}-${D(t.getDate())} ${D(t.getHours())}:${D(t.getMinutes())}:${D(t.getSeconds())}`;
-}
-function ue({ color: e, value: t, name: a, unit: l, inactive: r }) {
-  return /* @__PURE__ */ z("div", { className: "inline-flex flex-col gap-2 min-w-42 py-2", children: [
-    /* @__PURE__ */ z("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ N(
-        "span",
-        {
-          className: T("size-2 rounded-full inline-block", {
-            "opacity-50": r
-          }),
-          style: { backgroundColor: e }
-        }
-      ),
-      /* @__PURE__ */ N("span", { className: T("text-xs", { "opacity-50": r }), children: a })
-    ] }),
-    /* @__PURE__ */ z("div", { className: "flex items-baseline gap-0.5", children: [
-      /* @__PURE__ */ N(
-        "span",
-        {
-          className: T("text-lg font-medium leading-none", {
-            "opacity-50": r
-          }),
-          children: t
-        }
-      ),
-      l && /* @__PURE__ */ N(
-        "span",
-        {
-          className: T("text-xs text-kumo-subtle leading-none", {
-            "opacity-50": r
-          }),
-          children: l
-        }
-      )
-    ] })
-  ] });
-}
-function de({ color: e, value: t, name: a, inactive: l }) {
-  return /* @__PURE__ */ z("div", { className: "inline-flex items-center gap-2", children: [
-    /* @__PURE__ */ N(
-      "span",
-      {
-        className: T("size-2 rounded-full inline-block", {
-          "opacity-50": l
-        }),
-        style: { backgroundColor: e }
-      }
-    ),
-    /* @__PURE__ */ N("span", { className: T("text-xs", { "opacity-50": l }), children: a }),
-    /* @__PURE__ */ N("span", { className: T("text-xs font-medium", { "opacity-50": l }), children: t })
-  ] });
-}
-const ve = {
-  SmallItem: de,
-  LargeItem: ue
-}, fe = (e) => e.toLocaleString();
-function pe(e) {
-  return typeof e == "object" && e !== null;
-}
-const q = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), ee = (e) => e.replace(/[{}|]/g, (t) => `\\${t}`), X = (e) => {
-  const t = "#666";
-  return !e || typeof e != "string" ? t : /^#(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(e) || /^rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*(?:,\s*[\d.]+\s*)?\)$/i.test(
-    e
-  ) || /^hsla?\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*(?:,\s*[\d.]+\s*)?\)$/i.test(
-    e
-  ) || /^[a-z]{3,20}$/i.test(e) ? e : t;
-};
-function ge({
-  echarts: e,
-  nodes: t,
-  links: a,
-  height: l = 400,
-  nodeWidth: r = 8,
-  nodePadding: s = 10,
-  showTooltip: d = !0,
-  showNodeValues: b,
-  formatValue: g = fe,
-  tooltipFormatter: p,
-  defaultNodeColor: S,
-  left: A,
-  right: E,
-  linkColor: F = "gradient",
-  linkOpacity: f = 0.5,
-  className: x,
-  isDarkMode: o,
-  onNodeClick: v,
-  onLinkClick: L
-}) {
-  const O = t.some((h) => h.value !== void 0), R = b ?? O, C = P(() => {
-    const h = j.text("primary", o), i = j.text("secondary", o), B = new Map(t.map((n) => [n.name, n])), c = t.map((n, u) => ({
-      name: n.name,
-      value: n.value,
-      itemStyle: {
-        color: n.color ?? S ?? j.categorical(u, o)
-      }
-    })), $ = a.map((n) => ({
-      source: t[n.source]?.name ?? "",
-      target: t[n.target]?.name ?? "",
-      value: n.value
-    }));
-    return {
-      backgroundColor: "transparent",
-      animation: !0,
-      animationDuration: 500,
-      animationDurationUpdate: 300,
-      animationEasingUpdate: "cubicInOut",
-      tooltip: d ? {
-        trigger: "item",
-        triggerOn: "mousemove",
-        dangerousHtmlFormatter: (n) => {
-          if (!pe(n)) return "";
-          if (n.dataType === "node" && n.name) {
-            const u = B.get(n.name), m = X(
-              u?.color ?? n.color ?? "#666"
-            );
-            if (p)
-              return p({
-                type: "node",
-                name: n.name,
-                node: u,
-                color: m
-              });
-            const y = q(n.name);
-            return `<div style="display:flex;align-items:center;gap:6px;"><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${m}"></span><strong>${y}</strong></div>`;
-          }
-          if (n.dataType === "edge" && n.data) {
-            const { source: u, target: m, value: y } = n.data;
-            if (p)
-              return p({
-                type: "link",
-                name: `${u} → ${m}`,
-                link: {
-                  source: u ?? "",
-                  target: m ?? "",
-                  value: y ?? 0
-                }
-              });
-            const w = B.get(u ?? ""), V = B.get(m ?? ""), I = X(w?.color ?? "#666"), G = X(V?.color ?? "#666"), W = q(u ?? ""), U = q(m ?? "");
-            return `<div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;">
-                  <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${I}"></span>
-                  <strong>${W}</strong>
-                  <span style="color:${i}">→</span>
-                  <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${G}"></span>
-                  <strong>${U}</strong>
-                </div>
-                <strong>${y !== void 0 ? q(g(y)) : ""}</strong>`;
-          }
-          return "";
-        }
-      } : void 0,
-      series: [
-        {
-          type: "sankey",
-          ...A !== void 0 && { left: A },
-          ...E !== void 0 && { right: E },
-          data: c,
-          links: $,
-          draggable: !1,
-          emphasis: {
-            focus: "adjacency"
-          },
-          nodeWidth: r,
-          nodeGap: s,
-          lineStyle: {
-            color: F === "gradient" ? "source" : "#d1d5db",
-            opacity: F === "gradient" ? f : 0.4,
-            curveness: 0.5
-          },
-          label: {
-            show: !0,
-            color: h,
-            fontSize: 12,
-            formatter: R ? (n) => {
-              const u = n.name ?? "", m = B.get(u), y = ee(u);
-              return m?.value !== void 0 ? `{value|${ee(g(m.value))}}
-{name|${y}}` : y;
-            } : void 0,
-            rich: R ? {
-              value: {
-                fontSize: 11,
-                color: h,
-                lineHeight: 16
-              },
-              name: {
-                fontSize: 12,
-                color: h,
-                fontWeight: 700
-              }
-            } : void 0
-          }
-        }
-      ]
-    };
-  }, [
-    t,
-    a,
-    d,
-    r,
-    s,
-    S,
-    A,
-    E,
-    o,
-    F,
-    f,
-    R,
-    g,
-    p
-  ]), k = se(
-    (h) => {
-      if (h.dataType === "node" && v && h.name) {
-        const i = t.findIndex(($) => $.name === h.name), c = {
-          ...i >= 0 ? t[i] : null,
-          name: h.name
-        };
-        v(c);
-      } else if (h.dataType === "edge" && L && h.data) {
-        const i = h.data, B = typeof i == "object" && i !== null && "source" in i ? String(i.source) : "", c = typeof i == "object" && i !== null && "target" in i ? String(i.target) : "", $ = t.findIndex((w) => w.name === B), n = t.findIndex((w) => w.name === c);
-        if ($ === -1 || n === -1) return;
-        const u = h.value, m = typeof u == "number" ? u : Array.isArray(u) && typeof u[0] == "number" ? u[0] : 0, y = a.find(
-          (w) => w.source === $ && w.target === n
-        );
-        L({
-          ...y,
-          source: $,
-          target: n,
-          value: m
-        });
-      }
-    },
-    [t, a, v, L]
-  ), _ = P(
-    () => ({
-      click: k
-    }),
-    [k]
-  );
-  return /* @__PURE__ */ N(
-    J,
-    {
-      echarts: e,
-      options: C,
-      className: x,
-      isDarkMode: o,
-      height: l,
-      onEvents: _
-    }
-  );
-}
-ge.displayName = "SankeyChart";
-export {
-  J as C,
-  ge as S,
-  ye as T,
-  ve as a,
-  j as b
-};
-//# sourceMappingURL=SankeyChart-dkq90770ad7hgzx3.js.map

package/dist/chunks/autocomplete-mhrvtq4y5n21vr0t.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"autocomplete-mhrvtq4y5n21vr0t.js","sources":["../../src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["import { Autocomplete as AutocompleteBase } from \"@base-ui/react/autocomplete\";\nimport { CheckIcon } from \"@phosphor-icons/react\";\nimport { type ReactNode } from \"react\";\nimport { inputVariants, KUMO_INPUT_VARIANTS } from \"../input/input\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Autocomplete variant definitions. */\nexport const KUMO_AUTOCOMPLETE_VARIANTS = {\n  size: KUMO_INPUT_VARIANTS.size,\n} as const;\n\nexport const KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\n// Derived types from KUMO_AUTOCOMPLETE_VARIANTS\nexport type KumoAutocompleteSize = keyof typeof KUMO_AUTOCOMPLETE_VARIANTS.size;\n\nexport interface KumoAutocompleteVariantsProps {\n  /**\n   * Size of the autocomplete input. Matches Input component sizes.\n   * - `\"xs\"` — Extra small for compact UIs (h-5 / 20px)\n   * - `\"sm\"` — Small for secondary fields (h-6.5 / 26px)\n   * - `\"base\"` — Default size (h-9 / 36px)\n   * - `\"lg\"` — Large for prominent fields (h-10 / 40px)\n   * @default \"base\"\n   */\n  size?: KumoAutocompleteSize;\n}\n\nexport function autocompleteVariants({\n  size = KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size,\n}: KumoAutocompleteVariantsProps = {}) {\n  return cn(resolveVariant(KUMO_INPUT_VARIANTS.size, size, KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size).classes);\n}\n\n/**\n * Autocomplete component props.\n *\n * Autocomplete provides a free-form text input with optional suggestions in a\n * filterable dropdown. Unlike Combobox, the input value is not constrained to\n * the suggestion list items.\n *\n * @example\n * ```tsx\n * <Autocomplete label=\"Country\" items={countries}>\n *   <Autocomplete.InputGroup />\n *   <Autocomplete.Content>\n *     <Autocomplete.List>\n *       {(item) => <Autocomplete.Item value={item}>{item}</Autocomplete.Item>}\n *     </Autocomplete.List>\n *   </Autocomplete.Content>\n * </Autocomplete>\n * ```\n */\nexport interface AutocompleteProps {\n  /** Array of items to display in the dropdown */\n  items: unknown[];\n  /** The controlled input value */\n  value?: string | number | string[];\n  /** The uncontrolled default input value */\n  defaultValue?: string | number | string[];\n  /** Callback when the input value changes */\n  onValueChange?: AutocompleteBase.Root.Props<unknown>[\"onValueChange\"];\n  /** Whether the popup is open (controlled) */\n  open?: boolean;\n  /** Callback when the popup opens or closes */\n  onOpenChange?: AutocompleteBase.Root.Props<unknown>[\"onOpenChange\"];\n  /** Autocomplete content (input group, popup content) */\n  children: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label content (enables Field wrapper) */\n  label?: ReactNode;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Tooltip content to display next to the label */\n  labelTooltip?: ReactNode;\n  /** Helper text displayed below the field */\n  description?: ReactNode;\n  /** Error message or validation error object */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\nfunction Root<ItemValue>({\n  label,\n  required,\n  labelTooltip,\n  description,\n  error,\n  children,\n  ...props\n}: AutocompleteBase.Root.Props<ItemValue> & {\n  label?: ReactNode;\n  required?: boolean;\n  labelTooltip?: ReactNode;\n  description?: ReactNode;\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}) {\n  const rootProps = props as Omit<\n    AutocompleteBase.Root.Props<ItemValue>,\n    \"items\"\n  > & {\n    items?: readonly ItemValue[];\n  };\n  const control = (\n    <AutocompleteBase.Root {...rootProps}>{children}</AutocompleteBase.Root>\n  );\n\n  if (label) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={\n          error\n            ? typeof error === \"string\"\n              ? { message: error, match: true }\n              : error\n            : undefined\n        }\n      >\n        {control}\n      </Field>\n    );\n  }\n\n  return control;\n}\n\nfunction InputGroup({\n  className,\n  size = KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size,\n  placeholder,\n}: {\n  className?: string;\n  size?: KumoAutocompleteSize;\n  placeholder?: string;\n}) {\n  return (\n    <AutocompleteBase.Input\n      className={cn(\n        inputVariants({ size, focusIndicator: true }),\n        \"w-full\",\n        className,\n      )}\n      placeholder={placeholder}\n    />\n  );\n}\n\nfunction Content({\n  children,\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  alignOffset,\n  side,\n}: {\n  children?: ReactNode;\n  className?: string;\n  align?: AutocompleteBase.Positioner.Props[\"align\"];\n  alignOffset?: AutocompleteBase.Positioner.Props[\"alignOffset\"];\n  side?: AutocompleteBase.Positioner.Props[\"side\"];\n  sideOffset?: AutocompleteBase.Positioner.Props[\"sideOffset\"];\n}) {\n  return (\n    <AutocompleteBase.Portal>\n      <AutocompleteBase.Positioner\n        className=\"outline-none\"\n        align={align}\n        sideOffset={sideOffset}\n        alignOffset={alignOffset}\n        side={side}\n      >\n        <AutocompleteBase.Popup\n          className={(state: AutocompleteBase.Popup.State) =>\n            cn(\n              \"flex flex-col\",\n              \"max-h-[min(var(--available-height),24rem)] max-w-(--available-width) min-w-(--anchor-width) py-1.5\",\n              \"bg-kumo-control text-kumo-default\",\n              \"rounded-lg shadow-lg ring ring-kumo-line\",\n              state.empty && \"hidden\",\n              className,\n            )\n          }\n        >\n          {children}\n        </AutocompleteBase.Popup>\n      </AutocompleteBase.Positioner>\n    </AutocompleteBase.Portal>\n  );\n}\n\nfunction List({\n  className,\n  ...props\n}: AutocompleteBase.List.Props & { className?: string }) {\n  return (\n    <AutocompleteBase.List\n      {...props}\n      className={cn(\n        \"min-h-0 flex-1 overflow-y-auto overscroll-contain scroll-pt-2 scroll-pb-2\",\n        className,\n      )}\n    />\n  );\n}\n\nfunction Item({ children, ...props }: AutocompleteBase.Item.Props) {\n  return (\n    <AutocompleteBase.Item\n      {...props}\n      className=\"group mx-1.5 grid cursor-pointer grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-overlay data-selected:font-medium\"\n    >\n      <div className=\"col-start-1\">{children}</div>\n      <span className=\"col-start-2 hidden items-center group-data-selected:flex\">\n        <CheckIcon size={14} />\n      </span>\n    </AutocompleteBase.Item>\n  );\n}\n\nfunction GroupLabel(props: AutocompleteBase.GroupLabel.Props) {\n  return (\n    <AutocompleteBase.GroupLabel\n      {...props}\n      className={cn(\n        \"mx-1.5 px-2 py-1.5 text-sm text-kumo-strong\",\n        props.className,\n      )}\n    />\n  );\n}\n\nfunction Group(props: AutocompleteBase.Group.Props) {\n  return (\n    <AutocompleteBase.Group\n      {...props}\n      className=\"border-t border-kumo-line mt-2 pt-2 first:border-t-0 first:mt-0 first:pt-0\"\n    />\n  );\n}\n\nfunction Separator(props: AutocompleteBase.Separator.Props) {\n  return (\n    <AutocompleteBase.Separator\n      {...props}\n      className={cn(\"mx-0 my-1 h-px bg-kumo-line\", props.className)}\n    />\n  );\n}\n\nRoot.displayName = \"Autocomplete.Root\";\nInputGroup.displayName = \"Autocomplete.InputGroup\";\nContent.displayName = \"Autocomplete.Content\";\nItem.displayName = \"Autocomplete.Item\";\nGroupLabel.displayName = \"Autocomplete.GroupLabel\";\nGroup.displayName = \"Autocomplete.Group\";\nSeparator.displayName = \"Autocomplete.Separator\";\n\n/**\n * Autocomplete — free-form text input with an optional filtered suggestion list.\n *\n * Unlike Combobox, the input value is not restricted to items in the list.\n * Use Combobox when the selected value must come from the list.\n *\n * Compound component: `Autocomplete` (Root), `.InputGroup`, `.Content`, `.Item`,\n * `.GroupLabel`, `.Group`, `.Separator`, `.List`, `.Collection`.\n *\n * `InputGroup` renders the text input with Input component styling.\n * Pass a `size` prop to `InputGroup` to match the Input component sizes.\n *\n * @example\n * ```tsx\n * <Autocomplete items={fruits} label=\"Fruit\">\n *   <Autocomplete.InputGroup size=\"base\" />\n *   <Autocomplete.Content>\n *     <Autocomplete.List>\n *       {(item) => <Autocomplete.Item value={item}>{item}</Autocomplete.Item>}\n *     </Autocomplete.List>\n *   </Autocomplete.Content>\n * </Autocomplete>\n * ```\n *\n * @see https://base-ui.com/react/components/autocomplete\n */\nexport const Autocomplete = Object.assign(Root, {\n  // Styled compound sub-components\n  InputGroup,\n  Content,\n  Item,\n  GroupLabel,\n  Group,\n  Separator,\n  List,\n\n  // Pass-through Base UI sub-components\n  Empty: AutocompleteBase.Empty,\n  Collection: AutocompleteBase.Collection,\n});\n"],"names":["KUMO_AUTOCOMPLETE_VARIANTS","KUMO_INPUT_VARIANTS","KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS","autocompleteVariants","size","cn","resolveVariant","Root","label","required","labelTooltip","description","error","children","props","control","jsx","AutocompleteBase.Root","Field","InputGroup","className","placeholder","AutocompleteBase.Input","inputVariants","Content","align","sideOffset","alignOffset","side","AutocompleteBase.Portal","AutocompleteBase.Positioner","AutocompleteBase.Popup","state","List","AutocompleteBase.List","Item","jsxs","AutocompleteBase.Item","CheckIcon","GroupLabel","AutocompleteBase.GroupLabel","Group","AutocompleteBase.Group","Separator","AutocompleteBase.Separator","Autocomplete","AutocompleteBase.Empty","AutocompleteBase.Collection"],"mappings":"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"}