@craftzbay/ui 0.9.0 → 0.10.0

package/dist-lib/components/ui/Chart.js

@@ -0,0 +1,253 @@
+"use client";
+import { jsx as i, jsxs as M } from "react/jsx-runtime";
+import { useId as T } from "react";
+import { cn as G } from "../../lib/utils.js";
+const w = [
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)",
+  "var(--chart-6)"
+], A = 600, h = 6, W = 4, _ = 5;
+function K(t) {
+  const n = Math.abs(t), e = (r, a) => `${(Math.round(r * 10) / 10).toString()}${a}`;
+  return n >= 1e9 ? e(t / 1e9, "B") : n >= 1e6 ? e(t / 1e6, "M") : n >= 1e3 ? e(t / 1e3, "K") : Number.isInteger(t) ? String(t) : (Math.round(t * 100) / 100).toString();
+}
+function E(t, n) {
+  return n && n.length ? n : [{ data: t ?? [] }];
+}
+function B(t, n = !0) {
+  const e = t.flatMap((o) => o.data.map((c) => c.y)), r = n ? Math.min(0, ...e) : Math.min(...e), a = Math.max(...e, n ? 1 : -1 / 0);
+  return { min: r, max: a === -1 / 0 ? 1 : a, range: a - r || 1 };
+}
+function X(t, n, e, r) {
+  const a = A - h * 2, o = n - h * 2;
+  return { sx: (l) => t <= 1 ? h + a / 2 : h + l / (t - 1) * a, sy: (l) => h + o - (l - e) / r * o };
+}
+function U(t) {
+  if (t.length === 0) return "";
+  if (t.length < 3) return t.map((e, r) => `${r ? "L" : "M"}${e[0]},${e[1]}`).join(" ");
+  let n = `M${t[0][0]},${t[0][1]}`;
+  for (let e = 0; e < t.length - 1; e++) {
+    const r = t[e - 1] ?? t[e], a = t[e], o = t[e + 1], c = t[e + 2] ?? o, d = a[0] + (o[0] - r[0]) / 6, l = a[1] + (o[1] - r[1]) / 6, $ = o[0] - (c[0] - a[0]) / 6, y = o[1] - (c[1] - a[1]) / 6;
+    n += ` C${d.toFixed(1)},${l.toFixed(1)} ${$.toFixed(1)},${y.toFixed(1)} ${o[0].toFixed(1)},${o[1].toFixed(1)}`;
+  }
+  return n;
+}
+function D(t) {
+  return t.map((n, e) => {
+    const r = n.data.map((d) => d.y);
+    if (!r.length) return `${n.name ?? `Series ${e + 1}`}: no data`;
+    const a = Math.min(...r), o = Math.max(...r), c = n.data[n.data.length - 1];
+    return `${n.name ?? `Series ${e + 1}`}: ${r.length} points, min ${a}, max ${o}, last ${c.x}: ${c.y}`;
+  }).join(". ");
+}
+function H({ height: t }) {
+  const n = t - h * 2;
+  return /* @__PURE__ */ i("g", { "aria-hidden": !0, children: Array.from({ length: W + 1 }, (e, r) => {
+    const a = h + r / W * n;
+    return /* @__PURE__ */ i(
+      "line",
+      {
+        x1: 0,
+        x2: A,
+        y1: a,
+        y2: a,
+        stroke: "var(--color-border)",
+        strokeWidth: 1,
+        vectorEffect: "non-scaling-stroke",
+        opacity: 0.6
+      },
+      r
+    );
+  }) });
+}
+function V({ min: t, max: n }) {
+  const e = Array.from(
+    { length: _ },
+    (r, a) => n - (n - t) * a / (_ - 1)
+  );
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      "aria-hidden": !0,
+      className: "tabular text-foreground-subtle pointer-events-none flex shrink-0 flex-col justify-between py-[6px] pr-1.5 text-right text-xs",
+      children: e.map((r, a) => /* @__PURE__ */ i("span", { className: "leading-none", children: K(r) }, a))
+    }
+  );
+}
+function Y({ first: t, last: n }) {
+  return t ? /* @__PURE__ */ M("div", { "aria-hidden": !0, className: "text-foreground-subtle flex justify-between text-xs", children: [
+    /* @__PURE__ */ i("span", { children: String(t.x) }),
+    n && n !== t && /* @__PURE__ */ i("span", { children: String(n.x) })
+  ] }) : null;
+}
+function R({
+  caption: t,
+  ariaLabel: n,
+  title: e,
+  desc: r,
+  height: a,
+  width: o,
+  className: c,
+  showAxis: d,
+  yDomain: l,
+  xFirst: $,
+  xLast: y,
+  children: s
+}) {
+  const f = T().replace(/:/g, ""), p = `chart-cap-${f}`, F = `chart-title-${f}`, g = `chart-desc-${f}`, x = n ?? e;
+  return /* @__PURE__ */ M("figure", { className: G("flex flex-col gap-1.5", c), style: { width: o }, children: [
+    t && /* @__PURE__ */ i("figcaption", { id: p, className: "text-foreground-muted text-xs", children: t }),
+    /* @__PURE__ */ M("div", { className: "flex", children: [
+      d && /* @__PURE__ */ i(V, { min: l.min, max: l.max }),
+      /* @__PURE__ */ M(
+        "svg",
+        {
+          viewBox: `0 0 ${A} ${a}`,
+          width: "100%",
+          height: a,
+          preserveAspectRatio: "none",
+          role: "img",
+          "aria-labelledby": t ? p : x ? F : void 0,
+          "aria-describedby": g,
+          className: "min-w-0 flex-1 overflow-visible",
+          children: [
+            x && /* @__PURE__ */ i("title", { id: F, children: x }),
+            /* @__PURE__ */ i("desc", { id: g, children: r }),
+            s
+          ]
+        }
+      )
+    ] }),
+    d && /* @__PURE__ */ i(Y, { first: $, last: y })
+  ] });
+}
+function q({
+  data: t,
+  series: n,
+  colors: e = w,
+  height: r = 160,
+  width: a = "100%",
+  caption: o,
+  "aria-label": c,
+  title: d,
+  grid: l = !0,
+  showAxis: $ = !0,
+  className: y
+}) {
+  const s = E(t, n), { min: f, max: p, range: F } = B(s), g = Math.max(...s.map((u) => u.data.length)), x = s[0].data;
+  return /* @__PURE__ */ M(
+    R,
+    {
+      caption: o,
+      ariaLabel: c,
+      title: d,
+      desc: D(s),
+      height: r,
+      width: a,
+      className: y,
+      showAxis: $,
+      yDomain: { min: f, max: p },
+      xFirst: x[0],
+      xLast: x[x.length - 1],
+      children: [
+        l && /* @__PURE__ */ i(H, { height: r }),
+        s.map((u, L) => {
+          const v = e[L % e.length], { sx: b, sy: k } = X(g, r, f, F), m = u.data.map((O, P) => [b(P), k(O.y)]), N = U(m), S = k(Math.max(f, 0)), I = m.length ? `${N} L${m[m.length - 1][0].toFixed(1)},${S.toFixed(1)} L${m[0][0].toFixed(1)},${S.toFixed(1)} Z` : "", j = m[m.length - 1], C = u.data[u.data.length - 1];
+          return /* @__PURE__ */ M("g", { children: [
+            I && /* @__PURE__ */ i("path", { d: I, fill: v, fillOpacity: 0.08 }),
+            /* @__PURE__ */ i(
+              "path",
+              {
+                d: N,
+                fill: "none",
+                stroke: v,
+                strokeWidth: 2,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                vectorEffect: "non-scaling-stroke"
+              }
+            ),
+            j && /* @__PURE__ */ i(
+              "circle",
+              {
+                cx: j[0],
+                cy: j[1],
+                r: 3.5,
+                fill: v,
+                vectorEffect: "non-scaling-stroke",
+                children: /* @__PURE__ */ i("title", { children: `${u.name ? `${u.name} — ` : ""}${C.x}: ${C.y}` })
+              }
+            )
+          ] }, L);
+        })
+      ]
+    }
+  );
+}
+function Z(t) {
+  return /* @__PURE__ */ i(q, { ...t });
+}
+function tt({
+  data: t,
+  series: n,
+  colors: e = w,
+  height: r = 160,
+  width: a = "100%",
+  caption: o,
+  "aria-label": c,
+  title: d,
+  grid: l = !0,
+  showAxis: $ = !0,
+  className: y
+}) {
+  const s = E(t, n), f = A - h * 2, p = r - h * 2, F = Math.max(...s.map((b) => b.data.length)), g = f / Math.max(1, F), x = g * 0.62, u = Math.max(2, x / s.length), { max: L } = B(s), v = s[0].data;
+  return /* @__PURE__ */ M(
+    R,
+    {
+      caption: o,
+      ariaLabel: c,
+      title: d,
+      desc: D(s),
+      height: r,
+      width: a,
+      className: y,
+      showAxis: $,
+      yDomain: { min: 0, max: L },
+      xFirst: v[0],
+      xLast: v[v.length - 1],
+      children: [
+        l && /* @__PURE__ */ i(H, { height: r }),
+        s.map(
+          (b, k) => b.data.map((m, N) => {
+            const S = Math.max(0, m.y) / L * p, I = h + N * g + (g - x) / 2 + k * u;
+            return /* @__PURE__ */ i(
+              "rect",
+              {
+                x: I,
+                y: h + p - S,
+                width: u,
+                height: Math.max(0, S),
+                fill: e[k % e.length],
+                rx: 2,
+                className: "transition-opacity hover:opacity-80",
+                children: /* @__PURE__ */ i("title", { children: `${b.name ? `${b.name} — ` : ""}${m.x}: ${m.y}` })
+              },
+              `${k}-${N}`
+            );
+          })
+        )
+      ]
+    }
+  );
+}
+export {
+  Z as AreaChart,
+  tt as BarChart,
+  w as DEFAULT_CHART_COLORS,
+  q as LineChart,
+  K as abbreviateNumber
+};
+//# sourceMappingURL=Chart.js.map

package/dist-lib/components/ui/Chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.js","sources":["../../../src/components/ui/Chart.tsx"],"sourcesContent":["'use client';\n\nimport { useId, type ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\n/**\n * Tiny, dependency-free chart primitives for inline dashboards — sparklines,\n * KPI cards, at-a-glance trends. For heavy interactive visualisations reach for\n * a charting library. These render as responsive SVG (the line/area stretch to\n * the container width; strokes stay crisp via non-scaling-stroke).\n */\n\nexport interface ChartPoint {\n  x: string | number;\n  y: number;\n}\n\nexport interface ChartSeries {\n  /** Name used in the accessible summary and tooltips. */\n  name?: string;\n  data: ChartPoint[];\n}\n\nexport interface ChartProps {\n  /** Primary series. Ignored when `series` is provided. */\n  data?: ChartPoint[];\n  /** Multiple series drawn on the same scale. */\n  series?: ChartSeries[];\n  /**\n   * Per-series colours. Defaults to the categorical token list below.\n   * TODO(globals.css): add `--chart-1..6` tokens and switch the defaults.\n   */\n  colors?: string[];\n  /** Drawing height in px. */\n  height?: number;\n  /** Defaults to fluid 100%. */\n  width?: number | string;\n  /** Visible caption rendered above the chart. Doubles as the accessible name. */\n  caption?: ReactNode;\n  /** Accessible name when there is no `caption`. */\n  'aria-label'?: string;\n  /** Alias of `aria-label` (SVG `<title>`). */\n  title?: string;\n  /** Faint horizontal gridlines. Default true. */\n  grid?: boolean;\n  /** Y-axis tick labels + first/last x labels. Default true. */\n  showAxis?: boolean;\n  className?: string;\n}\n\nexport const DEFAULT_CHART_COLORS = [\n  'var(--chart-1)',\n  'var(--chart-2)',\n  'var(--chart-3)',\n  'var(--chart-4)',\n  'var(--chart-5)',\n  'var(--chart-6)',\n];\n\n// Fixed internal coordinate space; preserveAspectRatio=\"none\" stretches it to\n// the container, so this only controls smoothing resolution, not the aspect.\nconst VB_W = 600;\nconst PAD = 6;\nconst GRID_LINES = 4;\nconst MAX_TICKS = 5;\n\n/** 1234 → \"1.2K\", 3_400_000 → \"3.4M\". */\nexport function abbreviateNumber(n: number): string {\n  const abs = Math.abs(n);\n  const fmt = (v: number, s: string) => `${(Math.round(v * 10) / 10).toString()}${s}`;\n  if (abs >= 1e9) return fmt(n / 1e9, 'B');\n  if (abs >= 1e6) return fmt(n / 1e6, 'M');\n  if (abs >= 1e3) return fmt(n / 1e3, 'K');\n  return Number.isInteger(n) ? String(n) : (Math.round(n * 100) / 100).toString();\n}\n\nfunction resolveSeries(data?: ChartPoint[], series?: ChartSeries[]): ChartSeries[] {\n  if (series && series.length) return series;\n  return [{ data: data ?? [] }];\n}\n\nfunction domain(all: ChartSeries[], includeZero = true) {\n  const ys = all.flatMap((s) => s.data.map((d) => d.y));\n  const min = includeZero ? Math.min(0, ...ys) : Math.min(...ys);\n  const max = Math.max(...ys, includeZero ? 1 : -Infinity);\n  return { min, max: max === -Infinity ? 1 : max, range: max - min || 1 };\n}\n\nfunction scales(length: number, h: number, min: number, range: number) {\n  const innerW = VB_W - PAD * 2;\n  const innerH = h - PAD * 2;\n  const sx = (i: number) => (length <= 1 ? PAD + innerW / 2 : PAD + (i / (length - 1)) * innerW);\n  const sy = (v: number) => PAD + innerH - ((v - min) / range) * innerH;\n  return { sx, sy };\n}\n\n/** Catmull-Rom → cubic bézier: a smooth curve through every point. */\nfunction smoothPath(pts: [number, number][]): string {\n  if (pts.length === 0) return '';\n  if (pts.length < 3) return pts.map((p, i) => `${i ? 'L' : 'M'}${p[0]},${p[1]}`).join(' ');\n  let d = `M${pts[0][0]},${pts[0][1]}`;\n  for (let i = 0; i < pts.length - 1; i++) {\n    const p0 = pts[i - 1] ?? pts[i];\n    const p1 = pts[i];\n    const p2 = pts[i + 1];\n    const p3 = pts[i + 2] ?? p2;\n    const c1x = p1[0] + (p2[0] - p0[0]) / 6;\n    const c1y = p1[1] + (p2[1] - p0[1]) / 6;\n    const c2x = p2[0] - (p3[0] - p1[0]) / 6;\n    const c2y = p2[1] - (p3[1] - p1[1]) / 6;\n    d += ` C${c1x.toFixed(1)},${c1y.toFixed(1)} ${c2x.toFixed(1)},${c2y.toFixed(1)} ${p2[0].toFixed(1)},${p2[1].toFixed(1)}`;\n  }\n  return d;\n}\n\n/** Plain-language summary for the `<desc>` element. */\nfunction describe(all: ChartSeries[]): string {\n  return all\n    .map((s, i) => {\n      const ys = s.data.map((d) => d.y);\n      if (!ys.length) return `${s.name ?? `Series ${i + 1}`}: no data`;\n      const min = Math.min(...ys);\n      const max = Math.max(...ys);\n      const last = s.data[s.data.length - 1];\n      return `${s.name ?? `Series ${i + 1}`}: ${ys.length} points, min ${min}, max ${max}, last ${last.x}: ${last.y}`;\n    })\n    .join('. ');\n}\n\nfunction Grid({ height }: { height: number }) {\n  const innerH = height - PAD * 2;\n  return (\n    <g aria-hidden>\n      {Array.from({ length: GRID_LINES + 1 }, (_, i) => {\n        const y = PAD + (i / GRID_LINES) * innerH;\n        return (\n          <line\n            key={i}\n            x1={0}\n            x2={VB_W}\n            y1={y}\n            y2={y}\n            stroke=\"var(--color-border)\"\n            strokeWidth={1}\n            vectorEffect=\"non-scaling-stroke\"\n            opacity={0.6}\n          />\n        );\n      })}\n    </g>\n  );\n}\n\n/**\n * Axis labels are rendered in HTML (not inside the stretched SVG) so the text\n * is never distorted by `preserveAspectRatio=\"none\"`.\n */\nfunction YAxis({ min, max }: { min: number; max: number }) {\n  const ticks = Array.from(\n    { length: MAX_TICKS },\n    (_, i) => max - ((max - min) * i) / (MAX_TICKS - 1),\n  );\n  return (\n    <div\n      aria-hidden\n      className=\"tabular text-foreground-subtle pointer-events-none flex shrink-0 flex-col justify-between py-[6px] pr-1.5 text-right text-xs\"\n    >\n      {ticks.map((t, i) => (\n        <span key={i} className=\"leading-none\">\n          {abbreviateNumber(t)}\n        </span>\n      ))}\n    </div>\n  );\n}\n\nfunction XAxis({ first, last }: { first?: ChartPoint; last?: ChartPoint }) {\n  if (!first) return null;\n  return (\n    <div aria-hidden className=\"text-foreground-subtle flex justify-between text-xs\">\n      <span>{String(first.x)}</span>\n      {last && last !== first && <span>{String(last.x)}</span>}\n    </div>\n  );\n}\n\nfunction Frame({\n  caption,\n  ariaLabel,\n  title,\n  desc,\n  height,\n  width,\n  className,\n  showAxis,\n  yDomain,\n  xFirst,\n  xLast,\n  children,\n}: {\n  caption?: ReactNode;\n  ariaLabel?: string;\n  title?: string;\n  desc: string;\n  height: number;\n  width: number | string;\n  className?: string;\n  showAxis: boolean;\n  yDomain: { min: number; max: number };\n  xFirst?: ChartPoint;\n  xLast?: ChartPoint;\n  children: ReactNode;\n}) {\n  const id = useId().replace(/:/g, '');\n  const captionId = `chart-cap-${id}`;\n  const titleId = `chart-title-${id}`;\n  const descId = `chart-desc-${id}`;\n  const name = ariaLabel ?? title;\n\n  if (import.meta.env?.DEV && !name && !caption) {\n    console.warn(\n      '[craftzbay/ui] Chart: provide `caption`, `aria-label`, or `title` so the chart has an accessible name.',\n    );\n  }\n\n  return (\n    <figure className={cn('flex flex-col gap-1.5', className)} style={{ width }}>\n      {caption && (\n        <figcaption id={captionId} className=\"text-foreground-muted text-xs\">\n          {caption}\n        </figcaption>\n      )}\n      <div className=\"flex\">\n        {showAxis && <YAxis min={yDomain.min} max={yDomain.max} />}\n        <svg\n          viewBox={`0 0 ${VB_W} ${height}`}\n          width=\"100%\"\n          height={height}\n          preserveAspectRatio=\"none\"\n          role=\"img\"\n          aria-labelledby={caption ? captionId : name ? titleId : undefined}\n          aria-describedby={descId}\n          className=\"min-w-0 flex-1 overflow-visible\"\n        >\n          {name && <title id={titleId}>{name}</title>}\n          <desc id={descId}>{desc}</desc>\n          {children}\n        </svg>\n      </div>\n      {showAxis && <XAxis first={xFirst} last={xLast} />}\n    </figure>\n  );\n}\n\nexport function LineChart({\n  data,\n  series,\n  colors = DEFAULT_CHART_COLORS,\n  height = 160,\n  width = '100%',\n  caption,\n  'aria-label': ariaLabel,\n  title,\n  grid = true,\n  showAxis = true,\n  className,\n}: ChartProps) {\n  const all = resolveSeries(data, series);\n  const { min, max, range } = domain(all);\n  const longest = Math.max(...all.map((s) => s.data.length));\n  const primary = all[0].data;\n\n  return (\n    <Frame\n      caption={caption}\n      ariaLabel={ariaLabel}\n      title={title}\n      desc={describe(all)}\n      height={height}\n      width={width}\n      className={className}\n      showAxis={showAxis}\n      yDomain={{ min, max }}\n      xFirst={primary[0]}\n      xLast={primary[primary.length - 1]}\n    >\n      {grid && <Grid height={height} />}\n      {all.map((s, si) => {\n        const color = colors[si % colors.length];\n        const { sx, sy } = scales(longest, height, min, range);\n        const pts = s.data.map((d, i) => [sx(i), sy(d.y)] as [number, number]);\n        const line = smoothPath(pts);\n        const baseline = sy(Math.max(min, 0));\n        const area = pts.length\n          ? `${line} L${pts[pts.length - 1][0].toFixed(1)},${baseline.toFixed(1)} L${pts[0][0].toFixed(1)},${baseline.toFixed(1)} Z`\n          : '';\n        const last = pts[pts.length - 1];\n        const lastPoint = s.data[s.data.length - 1];\n        return (\n          <g key={si}>\n            {area && <path d={area} fill={color} fillOpacity={0.08} />}\n            <path\n              d={line}\n              fill=\"none\"\n              stroke={color}\n              strokeWidth={2}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              vectorEffect=\"non-scaling-stroke\"\n            />\n            {last && (\n              <circle\n                cx={last[0]}\n                cy={last[1]}\n                r={3.5}\n                fill={color}\n                vectorEffect=\"non-scaling-stroke\"\n              >\n                <title>{`${s.name ? `${s.name} — ` : ''}${lastPoint.x}: ${lastPoint.y}`}</title>\n              </circle>\n            )}\n          </g>\n        );\n      })}\n    </Frame>\n  );\n}\n\nexport function AreaChart(props: ChartProps) {\n  // The line chart already renders a flat low-opacity area; alias for intent / naming.\n  return <LineChart {...props} />;\n}\n\nexport function BarChart({\n  data,\n  series,\n  colors = DEFAULT_CHART_COLORS,\n  height = 160,\n  width = '100%',\n  caption,\n  'aria-label': ariaLabel,\n  title,\n  grid = true,\n  showAxis = true,\n  className,\n}: ChartProps) {\n  const all = resolveSeries(data, series);\n  const innerW = VB_W - PAD * 2;\n  const innerH = height - PAD * 2;\n  const longest = Math.max(...all.map((s) => s.data.length));\n  const slot = innerW / Math.max(1, longest);\n  const groupW = slot * 0.62;\n  const barW = Math.max(2, groupW / all.length);\n  const { max } = domain(all);\n  const primary = all[0].data;\n\n  return (\n    <Frame\n      caption={caption}\n      ariaLabel={ariaLabel}\n      title={title}\n      desc={describe(all)}\n      height={height}\n      width={width}\n      className={className}\n      showAxis={showAxis}\n      yDomain={{ min: 0, max }}\n      xFirst={primary[0]}\n      xLast={primary[primary.length - 1]}\n    >\n      {grid && <Grid height={height} />}\n      {all.map((s, si) =>\n        s.data.map((d, i) => {\n          const h = (Math.max(0, d.y) / max) * innerH;\n          const x = PAD + i * slot + (slot - groupW) / 2 + si * barW;\n          return (\n            <rect\n              key={`${si}-${i}`}\n              x={x}\n              y={PAD + innerH - h}\n              width={barW}\n              height={Math.max(0, h)}\n              fill={colors[si % colors.length]}\n              rx={2}\n              className=\"transition-opacity hover:opacity-80\"\n            >\n              <title>{`${s.name ? `${s.name} — ` : ''}${d.x}: ${d.y}`}</title>\n            </rect>\n          );\n        }),\n      )}\n    </Frame>\n  );\n}\n"],"names":["DEFAULT_CHART_COLORS","VB_W","PAD","GRID_LINES","MAX_TICKS","abbreviateNumber","n","abs","fmt","v","s","resolveSeries","data","series","domain","all","includeZero","ys","d","min","max","scales","length","h","range","innerW","innerH","i","smoothPath","pts","p","p0","p1","p2","p3","c1x","c1y","c2x","c2y","describe","last","Grid","height","jsx","_","y","YAxis","ticks","t","XAxis","first","Frame","caption","ariaLabel","title","desc","width","className","showAxis","yDomain","xFirst","xLast","children","id","useId","captionId","titleId","descId","name","jsxs","cn","LineChart","colors","grid","longest","primary","si","color","sx","sy","line","baseline","area","lastPoint","AreaChart","props","BarChart","slot","groupW","barW","x"],"mappings":";;;;AAkDO,MAAMA,IAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAIMC,IAAO,KACPC,IAAM,GACNC,IAAa,GACbC,IAAY;AAGX,SAASC,EAAiBC,GAAmB;AAClD,QAAMC,IAAM,KAAK,IAAID,CAAC,GAChBE,IAAM,CAACC,GAAWC,MAAc,IAAI,KAAK,MAAMD,IAAI,EAAE,IAAI,IAAI,SAAA,CAAU,GAAGC,CAAC;AACjF,SAAIH,KAAO,MAAYC,EAAIF,IAAI,KAAK,GAAG,IACnCC,KAAO,MAAYC,EAAIF,IAAI,KAAK,GAAG,IACnCC,KAAO,MAAYC,EAAIF,IAAI,KAAK,GAAG,IAChC,OAAO,UAAUA,CAAC,IAAI,OAAOA,CAAC,KAAK,KAAK,MAAMA,IAAI,GAAG,IAAI,KAAK,SAAA;AACvE;AAEA,SAASK,EAAcC,GAAqBC,GAAuC;AACjF,SAAIA,KAAUA,EAAO,SAAeA,IAC7B,CAAC,EAAE,MAAMD,KAAQ,CAAA,GAAI;AAC9B;AAEA,SAASE,EAAOC,GAAoBC,IAAc,IAAM;AACtD,QAAMC,IAAKF,EAAI,QAAQ,CAACL,MAAMA,EAAE,KAAK,IAAI,CAACQ,MAAMA,EAAE,CAAC,CAAC,GAC9CC,IAAMH,IAAc,KAAK,IAAI,GAAG,GAAGC,CAAE,IAAI,KAAK,IAAI,GAAGA,CAAE,GACvDG,IAAM,KAAK,IAAI,GAAGH,GAAID,IAAc,IAAI,MAAS;AACvD,SAAO,EAAE,KAAAG,GAAK,KAAKC,MAAQ,SAAY,IAAIA,GAAK,OAAOA,IAAMD,KAAO,EAAA;AACtE;AAEA,SAASE,EAAOC,GAAgBC,GAAWJ,GAAaK,GAAe;AACrE,QAAMC,IAASxB,IAAOC,IAAM,GACtBwB,IAASH,IAAIrB,IAAM;AAGzB,SAAO,EAAE,IAFE,CAACyB,MAAeL,KAAU,IAAIpB,IAAMuB,IAAS,IAAIvB,IAAOyB,KAAKL,IAAS,KAAMG,GAE1E,IADF,CAAChB,MAAcP,IAAMwB,KAAWjB,IAAIU,KAAOK,IAASE,EAClD;AACf;AAGA,SAASE,EAAWC,GAAiC;AACnD,MAAIA,EAAI,WAAW,EAAG,QAAO;AAC7B,MAAIA,EAAI,SAAS,EAAG,QAAOA,EAAI,IAAI,CAACC,GAAGH,MAAM,GAAGA,IAAI,MAAM,GAAG,GAAGG,EAAE,CAAC,CAAC,IAAIA,EAAE,CAAC,CAAC,EAAE,EAAE,KAAK,GAAG;AACxF,MAAIZ,IAAI,IAAIW,EAAI,CAAC,EAAE,CAAC,CAAC,IAAIA,EAAI,CAAC,EAAE,CAAC,CAAC;AAClC,WAASF,IAAI,GAAGA,IAAIE,EAAI,SAAS,GAAGF,KAAK;AACvC,UAAMI,IAAKF,EAAIF,IAAI,CAAC,KAAKE,EAAIF,CAAC,GACxBK,IAAKH,EAAIF,CAAC,GACVM,IAAKJ,EAAIF,IAAI,CAAC,GACdO,IAAKL,EAAIF,IAAI,CAAC,KAAKM,GACnBE,IAAMH,EAAG,CAAC,KAAKC,EAAG,CAAC,IAAIF,EAAG,CAAC,KAAK,GAChCK,IAAMJ,EAAG,CAAC,KAAKC,EAAG,CAAC,IAAIF,EAAG,CAAC,KAAK,GAChCM,IAAMJ,EAAG,CAAC,KAAKC,EAAG,CAAC,IAAIF,EAAG,CAAC,KAAK,GAChCM,IAAML,EAAG,CAAC,KAAKC,EAAG,CAAC,IAAIF,EAAG,CAAC,KAAK;AACtC,IAAAd,KAAK,KAAKiB,EAAI,QAAQ,CAAC,CAAC,IAAIC,EAAI,QAAQ,CAAC,CAAC,IAAIC,EAAI,QAAQ,CAAC,CAAC,IAAIC,EAAI,QAAQ,CAAC,CAAC,IAAIL,EAAG,CAAC,EAAE,QAAQ,CAAC,CAAC,IAAIA,EAAG,CAAC,EAAE,QAAQ,CAAC,CAAC;AAAA,EACxH;AACA,SAAOf;AACT;AAGA,SAASqB,EAASxB,GAA4B;AAC5C,SAAOA,EACJ,IAAI,CAACL,GAAGiB,MAAM;AACb,UAAMV,IAAKP,EAAE,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;AAChC,QAAI,CAACO,EAAG,OAAQ,QAAO,GAAGP,EAAE,QAAQ,UAAUiB,IAAI,CAAC,EAAE;AACrD,UAAMR,IAAM,KAAK,IAAI,GAAGF,CAAE,GACpBG,IAAM,KAAK,IAAI,GAAGH,CAAE,GACpBuB,IAAO9B,EAAE,KAAKA,EAAE,KAAK,SAAS,CAAC;AACrC,WAAO,GAAGA,EAAE,QAAQ,UAAUiB,IAAI,CAAC,EAAE,KAAKV,EAAG,MAAM,gBAAgBE,CAAG,SAASC,CAAG,UAAUoB,EAAK,CAAC,KAAKA,EAAK,CAAC;AAAA,EAC/G,CAAC,EACA,KAAK,IAAI;AACd;AAEA,SAASC,EAAK,EAAE,QAAAC,KAA8B;AAC5C,QAAMhB,IAASgB,IAASxC,IAAM;AAC9B,SACE,gBAAAyC,EAAC,KAAA,EAAE,eAAW,IACX,UAAA,MAAM,KAAK,EAAE,QAAQxC,IAAa,EAAA,GAAK,CAACyC,GAAGjB,MAAM;AAChD,UAAMkB,IAAI3C,IAAOyB,IAAIxB,IAAcuB;AACnC,WACE,gBAAAiB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,IAAI;AAAA,QACJ,IAAI1C;AAAA,QACJ,IAAI4C;AAAA,QACJ,IAAIA;AAAA,QACJ,QAAO;AAAA,QACP,aAAa;AAAA,QACb,cAAa;AAAA,QACb,SAAS;AAAA,MAAA;AAAA,MARJlB;AAAA,IAAA;AAAA,EAWX,CAAC,GACH;AAEJ;AAMA,SAASmB,EAAM,EAAE,KAAA3B,GAAK,KAAAC,KAAqC;AACzD,QAAM2B,IAAQ,MAAM;AAAA,IAClB,EAAE,QAAQ3C,EAAA;AAAA,IACV,CAACwC,GAAGjB,MAAMP,KAAQA,IAAMD,KAAOQ,KAAMvB,IAAY;AAAA,EAAA;AAEnD,SACE,gBAAAuC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAU;AAAA,MAET,UAAAI,EAAM,IAAI,CAACC,GAAGrB,MACb,gBAAAgB,EAAC,QAAA,EAAa,WAAU,gBACrB,UAAAtC,EAAiB2C,CAAC,EAAA,GADVrB,CAEX,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAASsB,EAAM,EAAE,OAAAC,GAAO,MAAAV,KAAmD;AACzE,SAAKU,sBAEF,OAAA,EAAI,eAAW,IAAC,WAAU,uDACzB,UAAA;AAAA,IAAA,gBAAAP,EAAC,QAAA,EAAM,UAAA,OAAOO,EAAM,CAAC,GAAE;AAAA,IACtBV,KAAQA,MAASU,KAAS,gBAAAP,EAAC,UAAM,UAAA,OAAOH,EAAK,CAAC,EAAA,CAAE;AAAA,EAAA,GACnD,IALiB;AAOrB;AAEA,SAASW,EAAM;AAAA,EACb,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAb;AAAA,EACA,OAAAc;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACF,GAaG;AACD,QAAMC,IAAKC,EAAA,EAAQ,QAAQ,MAAM,EAAE,GAC7BC,IAAY,aAAaF,CAAE,IAC3BG,IAAU,eAAeH,CAAE,IAC3BI,IAAS,cAAcJ,CAAE,IACzBK,IAAOf,KAAaC;AAQ1B,SACE,gBAAAe,EAAC,UAAA,EAAO,WAAWC,EAAG,yBAAyBb,CAAS,GAAG,OAAO,EAAE,OAAAD,EAAA,GACjE,UAAA;AAAA,IAAAJ,uBACE,cAAA,EAAW,IAAIa,GAAW,WAAU,iCAClC,UAAAb,GACH;AAAA,IAEF,gBAAAiB,EAAC,OAAA,EAAI,WAAU,QACZ,UAAA;AAAA,MAAAX,uBAAaZ,GAAA,EAAM,KAAKa,EAAQ,KAAK,KAAKA,EAAQ,KAAK;AAAA,MACxD,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS,OAAOpE,CAAI,IAAIyC,CAAM;AAAA,UAC9B,OAAM;AAAA,UACN,QAAAA;AAAA,UACA,qBAAoB;AAAA,UACpB,MAAK;AAAA,UACL,mBAAiBU,IAAUa,IAAYG,IAAOF,IAAU;AAAA,UACxD,oBAAkBC;AAAA,UAClB,WAAU;AAAA,UAET,UAAA;AAAA,YAAAC,uBAAS,SAAA,EAAM,IAAIF,GAAU,UAAAE,GAAK;AAAA,8BAClC,QAAA,EAAK,IAAID,GAAS,UAAAZ,GAAK;AAAA,YACvBO;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GACF;AAAA,IACCJ,uBAAaT,GAAA,EAAM,OAAOW,GAAQ,MAAMC,GAAO;AAAA,EAAA,GAClD;AAEJ;AAEO,SAASU,EAAU;AAAA,EACxB,MAAA3D;AAAA,EACA,QAAAC;AAAA,EACA,QAAA2D,IAASxE;AAAA,EACT,QAAA0C,IAAS;AAAA,EACT,OAAAc,IAAQ;AAAA,EACR,SAAAJ;AAAA,EACA,cAAcC;AAAA,EACd,OAAAC;AAAA,EACA,MAAAmB,IAAO;AAAA,EACP,UAAAf,IAAW;AAAA,EACX,WAAAD;AACF,GAAe;AACb,QAAM1C,IAAMJ,EAAcC,GAAMC,CAAM,GAChC,EAAE,KAAAM,GAAK,KAAAC,GAAK,OAAAI,EAAA,IAAUV,EAAOC,CAAG,GAChC2D,IAAU,KAAK,IAAI,GAAG3D,EAAI,IAAI,CAACL,MAAMA,EAAE,KAAK,MAAM,CAAC,GACnDiE,IAAU5D,EAAI,CAAC,EAAE;AAEvB,SACE,gBAAAsD;AAAA,IAAClB;AAAA,IAAA;AAAA,MACC,SAAAC;AAAA,MACA,WAAAC;AAAA,MACA,OAAAC;AAAA,MACA,MAAMf,EAASxB,CAAG;AAAA,MAClB,QAAA2B;AAAA,MACA,OAAAc;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,SAAS,EAAE,KAAAvC,GAAK,KAAAC,EAAA;AAAA,MAChB,QAAQuD,EAAQ,CAAC;AAAA,MACjB,OAAOA,EAAQA,EAAQ,SAAS,CAAC;AAAA,MAEhC,UAAA;AAAA,QAAAF,KAAQ,gBAAA9B,EAACF,KAAK,QAAAC,GAAgB;AAAA,QAC9B3B,EAAI,IAAI,CAACL,GAAGkE,MAAO;AAClB,gBAAMC,IAAQL,EAAOI,IAAKJ,EAAO,MAAM,GACjC,EAAE,IAAAM,GAAI,IAAAC,MAAO1D,EAAOqD,GAAShC,GAAQvB,GAAKK,CAAK,GAC/CK,IAAMnB,EAAE,KAAK,IAAI,CAACQ,GAAGS,MAAM,CAACmD,EAAGnD,CAAC,GAAGoD,EAAG7D,EAAE,CAAC,CAAC,CAAqB,GAC/D8D,IAAOpD,EAAWC,CAAG,GACrBoD,IAAWF,EAAG,KAAK,IAAI5D,GAAK,CAAC,CAAC,GAC9B+D,IAAOrD,EAAI,SACb,GAAGmD,CAAI,KAAKnD,EAAIA,EAAI,SAAS,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,IAAIoD,EAAS,QAAQ,CAAC,CAAC,KAAKpD,EAAI,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,IAAIoD,EAAS,QAAQ,CAAC,CAAC,OACpH,IACEzC,IAAOX,EAAIA,EAAI,SAAS,CAAC,GACzBsD,IAAYzE,EAAE,KAAKA,EAAE,KAAK,SAAS,CAAC;AAC1C,mCACG,KAAA,EACE,UAAA;AAAA,YAAAwE,uBAAS,QAAA,EAAK,GAAGA,GAAM,MAAML,GAAO,aAAa,MAAM;AAAA,YACxD,gBAAAlC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,GAAGqC;AAAA,gBACH,MAAK;AAAA,gBACL,QAAQH;AAAA,gBACR,aAAa;AAAA,gBACb,eAAc;AAAA,gBACd,gBAAe;AAAA,gBACf,cAAa;AAAA,cAAA;AAAA,YAAA;AAAA,YAEdrC,KACC,gBAAAG;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAIH,EAAK,CAAC;AAAA,gBACV,IAAIA,EAAK,CAAC;AAAA,gBACV,GAAG;AAAA,gBACH,MAAMqC;AAAA,gBACN,cAAa;AAAA,gBAEb,4BAAC,SAAA,EAAO,UAAA,GAAGnE,EAAE,OAAO,GAAGA,EAAE,IAAI,QAAQ,EAAE,GAAGyE,EAAU,CAAC,KAAKA,EAAU,CAAC,IAAG;AAAA,cAAA;AAAA,YAAA;AAAA,UAC1E,EAAA,GApBIP,CAsBR;AAAA,QAEJ,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAASQ,EAAUC,GAAmB;AAE3C,SAAO,gBAAA1C,EAAC4B,GAAA,EAAW,GAAGc,GAAO;AAC/B;AAEO,SAASC,GAAS;AAAA,EACvB,MAAA1E;AAAA,EACA,QAAAC;AAAA,EACA,QAAA2D,IAASxE;AAAA,EACT,QAAA0C,IAAS;AAAA,EACT,OAAAc,IAAQ;AAAA,EACR,SAAAJ;AAAA,EACA,cAAcC;AAAA,EACd,OAAAC;AAAA,EACA,MAAAmB,IAAO;AAAA,EACP,UAAAf,IAAW;AAAA,EACX,WAAAD;AACF,GAAe;AACb,QAAM1C,IAAMJ,EAAcC,GAAMC,CAAM,GAChCY,IAASxB,IAAOC,IAAM,GACtBwB,IAASgB,IAASxC,IAAM,GACxBwE,IAAU,KAAK,IAAI,GAAG3D,EAAI,IAAI,CAACL,MAAMA,EAAE,KAAK,MAAM,CAAC,GACnD6E,IAAO9D,IAAS,KAAK,IAAI,GAAGiD,CAAO,GACnCc,IAASD,IAAO,MAChBE,IAAO,KAAK,IAAI,GAAGD,IAASzE,EAAI,MAAM,GACtC,EAAE,KAAAK,EAAA,IAAQN,EAAOC,CAAG,GACpB4D,IAAU5D,EAAI,CAAC,EAAE;AAEvB,SACE,gBAAAsD;AAAA,IAAClB;AAAA,IAAA;AAAA,MACC,SAAAC;AAAA,MACA,WAAAC;AAAA,MACA,OAAAC;AAAA,MACA,MAAMf,EAASxB,CAAG;AAAA,MAClB,QAAA2B;AAAA,MACA,OAAAc;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,SAAS,EAAE,KAAK,GAAG,KAAAtC,EAAA;AAAA,MACnB,QAAQuD,EAAQ,CAAC;AAAA,MACjB,OAAOA,EAAQA,EAAQ,SAAS,CAAC;AAAA,MAEhC,UAAA;AAAA,QAAAF,KAAQ,gBAAA9B,EAACF,KAAK,QAAAC,GAAgB;AAAA,QAC9B3B,EAAI;AAAA,UAAI,CAACL,GAAGkE,MACXlE,EAAE,KAAK,IAAI,CAACQ,GAAGS,MAAM;AACnB,kBAAMJ,IAAK,KAAK,IAAI,GAAGL,EAAE,CAAC,IAAIE,IAAOM,GAC/BgE,IAAIxF,IAAMyB,IAAI4D,KAAQA,IAAOC,KAAU,IAAIZ,IAAKa;AACtD,mBACE,gBAAA9C;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,GAAA+C;AAAA,gBACA,GAAGxF,IAAMwB,IAASH;AAAA,gBAClB,OAAOkE;AAAA,gBACP,QAAQ,KAAK,IAAI,GAAGlE,CAAC;AAAA,gBACrB,MAAMiD,EAAOI,IAAKJ,EAAO,MAAM;AAAA,gBAC/B,IAAI;AAAA,gBACJ,WAAU;AAAA,gBAEV,4BAAC,SAAA,EAAO,UAAA,GAAG9D,EAAE,OAAO,GAAGA,EAAE,IAAI,QAAQ,EAAE,GAAGQ,EAAE,CAAC,KAAKA,EAAE,CAAC,IAAG;AAAA,cAAA;AAAA,cATnD,GAAG0D,CAAE,IAAIjD,CAAC;AAAA,YAAA;AAAA,UAYrB,CAAC;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist-lib/components/ui/Checkbox.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { forwardRef as g, useId as v } from "react";
+import * as m from "@radix-ui/react-checkbox";
+import { Minus as k, Check as p } from "../../icons/index.js";
+import { cn as i } from "../../lib/utils.js";
+const N = g(
+  function({ className: f, label: c, description: s, error: t, hideLabel: u, id: x, disabled: o, ...d }, h) {
+    const b = v(), a = x ?? b, n = s ? `${a}-desc` : void 0, l = t ? `${a}-error` : void 0;
+    return /* @__PURE__ */ r("div", { className: i("flex flex-col gap-1", f), children: [
+      /* @__PURE__ */ r("div", { className: "flex items-start gap-2.5", children: [
+        /* @__PURE__ */ e(
+          m.Root,
+          {
+            ref: h,
+            id: a,
+            disabled: o,
+            "aria-describedby": l ?? n,
+            "aria-invalid": !!t || void 0,
+            className: i(
+              "peer mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-sm border",
+              "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]",
+              "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+              "data-[state=checked]:bg-accent data-[state=checked]:border-accent data-[state=checked]:text-on-accent",
+              "data-[state=indeterminate]:bg-accent data-[state=indeterminate]:border-accent data-[state=indeterminate]:text-on-accent",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              t ? "border-danger" : "border-border-input"
+            ),
+            ...d,
+            children: /* @__PURE__ */ e(m.Indicator, { className: "flex items-center justify-center", children: d.checked === "indeterminate" ? /* @__PURE__ */ e(k, { className: "size-3", "aria-hidden": !0, strokeWidth: 3 }) : /* @__PURE__ */ e(p, { className: "size-3", "aria-hidden": !0, strokeWidth: 3 }) })
+          }
+        ),
+        c && /* @__PURE__ */ r("div", { className: i("flex flex-col gap-0.5", u && "sr-only"), children: [
+          /* @__PURE__ */ e(
+            "label",
+            {
+              htmlFor: a,
+              className: i(
+                "text-sm text-foreground select-none",
+                o && "opacity-50 cursor-not-allowed"
+              ),
+              children: c
+            }
+          ),
+          s && /* @__PURE__ */ e("p", { id: n, className: "text-xs text-foreground-subtle", children: s })
+        ] })
+      ] }),
+      t && /* @__PURE__ */ e("p", { id: l, role: "alert", className: "text-xs text-danger-text", children: t })
+    ] });
+  }
+);
+N.displayName = "Checkbox";
+export {
+  N as Checkbox
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist-lib/components/ui/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/ui/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useId, type ComponentPropsWithoutRef, type ElementRef, type ReactNode } from 'react';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Check, Minus } from '@/icons';\nimport { cn } from '@/lib/utils';\n\nexport interface CheckboxProps\n  extends Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'asChild'> {\n  /** Visible label rendered to the right of the box. */\n  label?: ReactNode;\n  /** Secondary description rendered below the label. */\n  description?: ReactNode;\n  /** Validation error message. */\n  error?: ReactNode;\n  /** Hide the label visually while keeping it in the a11y tree. */\n  hideLabel?: boolean;\n}\n\n/**\n * Checkbox with optional inline label + description. Pass `checked=\"indeterminate\"`\n * for the indeterminate state — Radix renders a `Minus` icon automatically.\n *\n * @example Single\n *   <Checkbox label=\"I agree to the terms\" checked={ok} onCheckedChange={setOk} />\n *\n * @example Tri-state header\n *   <Checkbox aria-label=\"Select all\"\n *             checked={allSelected ? true : someSelected ? 'indeterminate' : false}\n *             onCheckedChange={toggleAll} />\n *\n * @do Use indeterminate to summarise child rows in a table header.\n * @dont Use a Checkbox for mutually exclusive choices — use RadioGroup.\n */\nexport const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n  function Checkbox({ className, label, description, error, hideLabel, id, disabled, ...props }, ref) {\n    const autoId = useId();\n    const fieldId = id ?? autoId;\n    const descId = description ? `${fieldId}-desc` : undefined;\n    const errorId = error ? `${fieldId}-error` : undefined;\n\n    return (\n      <div className={cn('flex flex-col gap-1', className)}>\n        <div className=\"flex items-start gap-2.5\">\n          <CheckboxPrimitive.Root\n            ref={ref}\n            id={fieldId}\n            disabled={disabled}\n            aria-describedby={errorId ?? descId}\n            aria-invalid={Boolean(error) || undefined}\n            className={cn(\n              'peer mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-sm border',\n              'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n              'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n              'data-[state=checked]:bg-accent data-[state=checked]:border-accent data-[state=checked]:text-on-accent',\n              'data-[state=indeterminate]:bg-accent data-[state=indeterminate]:border-accent data-[state=indeterminate]:text-on-accent',\n              'disabled:cursor-not-allowed disabled:opacity-50',\n              error ? 'border-danger' : 'border-border-input',\n            )}\n            {...props}\n          >\n            <CheckboxPrimitive.Indicator className=\"flex items-center justify-center\">\n              {props.checked === 'indeterminate' ? (\n                <Minus className=\"size-3\" aria-hidden strokeWidth={3} />\n              ) : (\n                <Check className=\"size-3\" aria-hidden strokeWidth={3} />\n              )}\n            </CheckboxPrimitive.Indicator>\n          </CheckboxPrimitive.Root>\n\n          {label && (\n            <div className={cn('flex flex-col gap-0.5', hideLabel && 'sr-only')}>\n              <label\n                htmlFor={fieldId}\n                className={cn(\n                  'text-sm text-foreground select-none',\n                  disabled && 'opacity-50 cursor-not-allowed',\n                )}\n              >\n                {label}\n              </label>\n              {description && (\n                <p id={descId} className=\"text-xs text-foreground-subtle\">\n                  {description}\n                </p>\n              )}\n            </div>\n          )}\n        </div>\n        {error && (\n          <p id={errorId} role=\"alert\" className=\"text-xs text-danger-text\">\n            {error}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","forwardRef","className","label","description","error","hideLabel","id","disabled","props","ref","autoId","useId","fieldId","descId","errorId","cn","jsxs","jsx","CheckboxPrimitive","Minus","Check"],"mappings":";;;;;;AAkCO,MAAMA,IAAWC;AAAA,EACtB,SAAkB,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,GAAa,OAAAC,GAAO,WAAAC,GAAW,IAAAC,GAAI,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AAClG,UAAMC,IAASC,EAAA,GACTC,IAAUN,KAAMI,GAChBG,IAASV,IAAc,GAAGS,CAAO,UAAU,QAC3CE,IAAUV,IAAQ,GAAGQ,CAAO,WAAW;AAE7C,6BACG,OAAA,EAAI,WAAWG,EAAG,uBAAuBd,CAAS,GACjD,UAAA;AAAA,MAAA,gBAAAe,EAAC,OAAA,EAAI,WAAU,4BACb,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACC,EAAkB;AAAA,UAAlB;AAAA,YACC,KAAAT;AAAA,YACA,IAAIG;AAAA,YACJ,UAAAL;AAAA,YACA,oBAAkBO,KAAWD;AAAA,YAC7B,gBAAc,EAAQT,KAAU;AAAA,YAChC,WAAWW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACAX,IAAQ,kBAAkB;AAAA,YAAA;AAAA,YAE3B,GAAGI;AAAA,YAEJ,UAAA,gBAAAS,EAACC,EAAkB,WAAlB,EAA4B,WAAU,oCACpC,UAAAV,EAAM,YAAY,kBACjB,gBAAAS,EAACE,GAAA,EAAM,WAAU,UAAS,eAAW,IAAC,aAAa,EAAA,CAAG,IAEtD,gBAAAF,EAACG,GAAA,EAAM,WAAU,UAAS,eAAW,IAAC,aAAa,EAAA,CAAG,EAAA,CAE1D;AAAA,UAAA;AAAA,QAAA;AAAA,QAGDlB,uBACE,OAAA,EAAI,WAAWa,EAAG,yBAAyBV,KAAa,SAAS,GAChE,UAAA;AAAA,UAAA,gBAAAY;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAASL;AAAA,cACT,WAAWG;AAAA,gBACT;AAAA,gBACAR,KAAY;AAAA,cAAA;AAAA,cAGb,UAAAL;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFC,KACC,gBAAAc,EAAC,KAAA,EAAE,IAAIJ,GAAQ,WAAU,kCACtB,UAAAV,EAAA,CACH;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,GAEJ;AAAA,MACCC,uBACE,KAAA,EAAE,IAAIU,GAAS,MAAK,SAAQ,WAAU,4BACpC,UAAAV,EAAA,CACH;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AAEAL,EAAS,cAAc;"}

package/dist-lib/components/ui/Combobox.d.ts

@@ -17,6 +17,11 @@ export interface ComboboxProps {
      * Use for server-side search.
      */
     loadOptions?: (query: string) => Promise<ComboboxOption[]>;
+    /**
+     * Label to show for a preset `value` in `loadOptions` mode before the
+     * first search has resolved (the component has no option list yet).
+     */
+    selectedLabel?: string;
     /** Visible label above the field. */
     label?: ReactNode;
     /** Hint below the field. Hidden when `error` is set. */
@@ -35,6 +40,8 @@ export interface ComboboxProps {
     disabled?: boolean;
     /** Field size, matches Input. */
     size?: 'sm' | 'md' | 'lg';
+    /** Consumer-supplied id for the trigger (label association). */
+    id?: string;
     className?: string;
 }
 /**

package/dist-lib/components/ui/Combobox.js

@@ -0,0 +1,164 @@
+"use client";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { forwardRef as O, useState as i, useMemo as R, useEffect as ee, useCallback as te } from "react";
+import * as p from "@radix-ui/react-popover";
+import { Command as d } from "cmdk";
+import { X as re, ChevronsUpDown as oe, Loader2 as ae, Check as se } from "../../icons/index.js";
+import { cn as c } from "../../lib/utils.js";
+import { useStrings as le } from "../../hooks/use-strings.js";
+import { useFieldIds as ne } from "../../hooks/use-field-ids.js";
+import { IconButton as ie } from "./IconButton.js";
+const de = O(function({
+  value: o,
+  onChange: x,
+  options: C,
+  loadOptions: a,
+  selectedLabel: g,
+  label: I,
+  helperText: h,
+  error: v,
+  placeholder: H,
+  searchPlaceholder: L,
+  emptyText: q,
+  clearable: P = !0,
+  disabled: z,
+  size: u = "md",
+  id: D,
+  className: M
+}, Q) {
+  const m = le(), T = H ?? m.combobox.placeholder, U = L ?? m.combobox.searchPlaceholder, V = q ?? m.combobox.empty, N = !!v, { fieldId: y, helperId: X, errorId: $, describedBy: A } = ne(D, {
+    hasHelper: !!h,
+    hasError: N
+  }), k = `${y}-list`, [f, S] = i(!1), [w, G] = i(""), [B, J] = i([]), [E, j] = i(!1), [l, F] = i(null), b = R(() => a ? B : C ?? [], [a, B, C]);
+  ee(() => {
+    if (!a || !f) return;
+    let t = !1;
+    return j(!0), a(w).then((n) => {
+      t || J(n);
+    }).finally(() => {
+      t || j(!1);
+    }), () => {
+      t = !0;
+    };
+  }, [w, f, a]);
+  const s = R(() => {
+    if (o == null) return null;
+    const t = b.find((n) => n.value === o);
+    return t || ((l == null ? void 0 : l.value) === o ? l : g !== void 0 ? { value: o, label: g } : null);
+  }, [b, o, l, g]), K = u === "sm" ? "h-8" : u === "lg" ? "h-10" : "h-9", W = u === "sm" ? "px-2.5" : u === "lg" ? "px-3.5" : "px-3", Y = P ? "pr-14" : "pr-9", Z = te(() => {
+    F(null), x(null);
+  }, [x]);
+  return /* @__PURE__ */ r("div", { ref: Q, className: c("flex flex-col gap-1.5", M), children: [
+    I && /* @__PURE__ */ e("label", { htmlFor: y, className: "text-foreground text-sm font-medium", children: I }),
+    /* @__PURE__ */ r(p.Root, { open: f, onOpenChange: S, children: [
+      /* @__PURE__ */ r("div", { className: "relative w-full", children: [
+        /* @__PURE__ */ e(p.Trigger, { asChild: !0, children: /* @__PURE__ */ e(
+          "button",
+          {
+            id: y,
+            type: "button",
+            role: "combobox",
+            "aria-expanded": f,
+            "aria-haspopup": "listbox",
+            "aria-controls": k,
+            "aria-invalid": N || void 0,
+            "aria-describedby": A,
+            disabled: z,
+            className: c(
+              "bg-card text-foreground inline-flex w-full items-center justify-between gap-2 rounded-md border text-sm",
+              "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]",
+              "focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              K,
+              W,
+              Y,
+              N ? "border-danger focus-visible:border-danger focus-visible:ring-danger" : "border-border focus-visible:border-accent focus-visible:ring-ring"
+            ),
+            children: /* @__PURE__ */ e(
+              "span",
+              {
+                className: c("truncate", !s && "text-foreground-subtle"),
+                title: s ? s.label : void 0,
+                children: s ? s.label : T
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ r("span", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center gap-0.5 pr-2", children: [
+          P && s && !z && /* @__PURE__ */ e(
+            ie,
+            {
+              size: "sm",
+              variant: "ghost",
+              "aria-label": m.combobox.clear,
+              icon: /* @__PURE__ */ e(re, {}),
+              onClick: Z,
+              className: "text-foreground-subtle hover:text-foreground pointer-events-auto size-6"
+            }
+          ),
+          /* @__PURE__ */ e(oe, { className: "text-foreground-subtle size-4", "aria-hidden": !0 })
+        ] })
+      ] }),
+      /* @__PURE__ */ e(p.Portal, { children: /* @__PURE__ */ e(
+        p.Content,
+        {
+          align: "start",
+          sideOffset: 4,
+          className: c(
+            "border-border bg-popover text-popover-foreground z-[var(--z-popover)] w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-lg border shadow-md",
+            "data-[state=open]:animate-in data-[state=closed]:animate-out",
+            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+          ),
+          children: /* @__PURE__ */ r(d, { shouldFilter: !a, className: "flex h-full w-full flex-col", children: [
+            /* @__PURE__ */ r("div", { className: "border-border flex items-center border-b px-3", children: [
+              /* @__PURE__ */ e(
+                d.Input,
+                {
+                  value: w,
+                  onValueChange: G,
+                  placeholder: U,
+                  className: "placeholder:text-foreground-subtle flex h-9 w-full bg-transparent py-2 text-sm outline-none"
+                }
+              ),
+              E && /* @__PURE__ */ e(ae, { className: "text-foreground-subtle size-4 animate-spin", "aria-hidden": !0 })
+            ] }),
+            /* @__PURE__ */ r(d.List, { id: k, className: "max-h-64 overflow-y-auto p-1", children: [
+              b.map((t) => {
+                const n = t.value === o;
+                return /* @__PURE__ */ r(
+                  d.Item,
+                  {
+                    value: t.value,
+                    disabled: t.disabled,
+                    onSelect: (_) => {
+                      F(t), x(_), S(!1);
+                    },
+                    className: c(
+                      "text-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
+                      "data-[selected=true]:bg-background-muted",
+                      "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
+                    ),
+                    children: [
+                      /* @__PURE__ */ e("span", { className: "flex-1", children: t.label }),
+                      t.description && /* @__PURE__ */ e("span", { className: "text-foreground-subtle text-xs", children: t.description }),
+                      n && /* @__PURE__ */ e(se, { className: "text-accent size-4", "aria-hidden": !0 })
+                    ]
+                  },
+                  t.value
+                );
+              }),
+              !E && b.length === 0 && /* @__PURE__ */ e(d.Empty, { className: "text-foreground-subtle px-2 py-6 text-center text-sm", children: V })
+            ] })
+          ] })
+        }
+      ) })
+    ] }),
+    v ? /* @__PURE__ */ e("p", { id: $, role: "alert", className: "text-danger-text text-xs", children: v }) : h ? /* @__PURE__ */ e("p", { id: X, className: "text-foreground-subtle text-xs", children: h }) : null
+  ] });
+});
+de.displayName = "Combobox";
+export {
+  de as Combobox
+};
+//# sourceMappingURL=Combobox.js.map

package/dist-lib/components/ui/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.js","sources":["../../../src/components/ui/Combobox.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Check, ChevronsUpDown, Loader2, X } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { useFieldIds } from '@/hooks/use-field-ids';\nimport { IconButton } from './IconButton';\n\nexport interface ComboboxOption {\n  value: string;\n  label: string;\n  description?: string;\n  disabled?: boolean;\n}\n\nexport interface ComboboxProps {\n  /** Currently selected value (controlled). */\n  value: string | null;\n  /** Called when a value is picked or cleared. */\n  onChange: (value: string | null) => void;\n  /** Static options. Ignored if `loadOptions` is provided. */\n  options?: ComboboxOption[];\n  /**\n   * Async loader called with the current query each time it changes.\n   * Use for server-side search.\n   */\n  loadOptions?: (query: string) => Promise<ComboboxOption[]>;\n  /**\n   * Label to show for a preset `value` in `loadOptions` mode before the\n   * first search has resolved (the component has no option list yet).\n   */\n  selectedLabel?: string;\n  /** Visible label above the field. */\n  label?: ReactNode;\n  /** Hint below the field. Hidden when `error` is set. */\n  helperText?: ReactNode;\n  /** Validation error. */\n  error?: ReactNode;\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string;\n  /** Search placeholder inside the popover. */\n  searchPlaceholder?: string;\n  /** Empty state copy when nothing matches. */\n  emptyText?: string;\n  /** Allow clearing the selection with an inline ×. */\n  clearable?: boolean;\n  /** Disable the entire field. */\n  disabled?: boolean;\n  /** Field size, matches Input. */\n  size?: 'sm' | 'md' | 'lg';\n  /** Consumer-supplied id for the trigger (label association). */\n  id?: string;\n  className?: string;\n}\n\n/**\n * Single-select with typeahead. Use `options` for client-side filtering or\n * `loadOptions` for server-side search.\n *\n * @example Client-side\n *   <Combobox label=\"Country\" options={countries} value={c} onChange={setC} />\n *\n * @example Server-side\n *   <Combobox label=\"Assignee\"\n *             value={user}\n *             onChange={setUser}\n *             loadOptions={async (q) => api.searchUsers(q)} />\n *\n * @do Use Combobox over Select for >12 options or when the user is expected\n *      to know what they want.\n * @dont Re-query on every keystroke without debouncing — pass a debounced\n *       `loadOptions` to avoid hammering the server.\n */\nexport const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(function Combobox(\n  {\n    value,\n    onChange,\n    options,\n    loadOptions,\n    selectedLabel,\n    label,\n    helperText,\n    error,\n    placeholder: placeholderProp,\n    searchPlaceholder: searchPlaceholderProp,\n    emptyText: emptyTextProp,\n    clearable = true,\n    disabled,\n    size = 'md',\n    id,\n    className,\n  },\n  ref,\n) {\n  const strings = useStrings();\n  const placeholder = placeholderProp ?? strings.combobox.placeholder;\n  const searchPlaceholder = searchPlaceholderProp ?? strings.combobox.searchPlaceholder;\n  const emptyText = emptyTextProp ?? strings.combobox.empty;\n  const isError = Boolean(error);\n  const { fieldId, helperId, errorId, describedBy } = useFieldIds(id, {\n    hasHelper: Boolean(helperText),\n    hasError: isError,\n  });\n  const listId = `${fieldId}-list`;\n\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n  const [loaded, setLoaded] = useState<ComboboxOption[]>([]);\n  const [loading, setLoading] = useState(false);\n  // In async mode the option list only exists after the first search, so the\n  // chosen option is remembered here to keep its label on the trigger.\n  const [selectedOption, setSelectedOption] = useState<ComboboxOption | null>(null);\n\n  // Resolve options: static or async-loaded.\n  const items = useMemo(() => (loadOptions ? loaded : (options ?? [])), [loadOptions, loaded, options]);\n\n  useEffect(() => {\n    if (!loadOptions || !open) return;\n    let cancelled = false;\n    setLoading(true);\n    loadOptions(query)\n      .then((res) => {\n        if (!cancelled) setLoaded(res);\n      })\n      .finally(() => {\n        if (!cancelled) setLoading(false);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [query, open, loadOptions]);\n\n  const selected = useMemo<ComboboxOption | null>(() => {\n    if (value === null || value === undefined) return null;\n    const fromItems = items.find((o) => o.value === value);\n    if (fromItems) return fromItems;\n    if (selectedOption?.value === value) return selectedOption;\n    if (selectedLabel !== undefined) return { value, label: selectedLabel };\n    return null;\n  }, [items, value, selectedOption, selectedLabel]);\n\n  const triggerHeight = size === 'sm' ? 'h-8' : size === 'lg' ? 'h-10' : 'h-9';\n  const triggerPadding = size === 'sm' ? 'px-2.5' : size === 'lg' ? 'px-3.5' : 'px-3';\n  // Leave room on the right for the clear button + chevron.\n  const triggerPaddingRight = clearable ? 'pr-14' : 'pr-9';\n\n  const handleClear = useCallback(() => {\n    setSelectedOption(null);\n    onChange(null);\n  }, [onChange]);\n\n  return (\n    <div ref={ref} className={cn('flex flex-col gap-1.5', className)}>\n      {label && (\n        <label htmlFor={fieldId} className=\"text-foreground text-sm font-medium\">\n          {label}\n        </label>\n      )}\n\n      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n        <div className=\"relative w-full\">\n          <PopoverPrimitive.Trigger asChild>\n            <button\n              id={fieldId}\n              type=\"button\"\n              role=\"combobox\"\n              aria-expanded={open}\n              aria-haspopup=\"listbox\"\n              aria-controls={listId}\n              aria-invalid={isError || undefined}\n              aria-describedby={describedBy}\n              disabled={disabled}\n              className={cn(\n                'bg-card text-foreground inline-flex w-full items-center justify-between gap-2 rounded-md border text-sm',\n                'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n                'focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n                'disabled:cursor-not-allowed disabled:opacity-50',\n                triggerHeight,\n                triggerPadding,\n                triggerPaddingRight,\n                isError\n                  ? 'border-danger focus-visible:border-danger focus-visible:ring-danger'\n                  : 'border-border focus-visible:border-accent focus-visible:ring-ring',\n              )}\n            >\n              <span\n                className={cn('truncate', !selected && 'text-foreground-subtle')}\n                title={selected ? selected.label : undefined}\n              >\n                {selected ? selected.label : placeholder}\n              </span>\n            </button>\n          </PopoverPrimitive.Trigger>\n\n          {/* Controls sit outside the trigger: a button inside a button is invalid HTML. */}\n          <span className=\"pointer-events-none absolute inset-y-0 right-0 flex items-center gap-0.5 pr-2\">\n            {clearable && selected && !disabled && (\n              <IconButton\n                size=\"sm\"\n                variant=\"ghost\"\n                aria-label={strings.combobox.clear}\n                icon={<X />}\n                onClick={handleClear}\n                className=\"text-foreground-subtle hover:text-foreground pointer-events-auto size-6\"\n              />\n            )}\n            <ChevronsUpDown className=\"text-foreground-subtle size-4\" aria-hidden />\n          </span>\n        </div>\n\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            align=\"start\"\n            sideOffset={4}\n            className={cn(\n              'border-border bg-popover text-popover-foreground z-[var(--z-popover)] w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-lg border shadow-md',\n              'data-[state=open]:animate-in data-[state=closed]:animate-out',\n              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n              'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n            )}\n          >\n            <CommandPrimitive shouldFilter={!loadOptions} className=\"flex h-full w-full flex-col\">\n              <div className=\"border-border flex items-center border-b px-3\">\n                <CommandPrimitive.Input\n                  value={query}\n                  onValueChange={setQuery}\n                  placeholder={searchPlaceholder}\n                  className=\"placeholder:text-foreground-subtle flex h-9 w-full bg-transparent py-2 text-sm outline-none\"\n                />\n                {loading && (\n                  <Loader2 className=\"text-foreground-subtle size-4 animate-spin\" aria-hidden />\n                )}\n              </div>\n              <CommandPrimitive.List id={listId} className=\"max-h-64 overflow-y-auto p-1\">\n                {items.map((opt) => {\n                  const isSelected = opt.value === value;\n                  return (\n                    <CommandPrimitive.Item\n                      key={opt.value}\n                      value={opt.value}\n                      disabled={opt.disabled}\n                      onSelect={(v) => {\n                        setSelectedOption(opt);\n                        onChange(v);\n                        setOpen(false);\n                      }}\n                      className={cn(\n                        'text-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm',\n                        'data-[selected=true]:bg-background-muted',\n                        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n                      )}\n                    >\n                      <span className=\"flex-1\">{opt.label}</span>\n                      {opt.description && (\n                        <span className=\"text-foreground-subtle text-xs\">{opt.description}</span>\n                      )}\n                      {isSelected && <Check className=\"text-accent size-4\" aria-hidden />}\n                    </CommandPrimitive.Item>\n                  );\n                })}\n                {!loading && items.length === 0 && (\n                  <CommandPrimitive.Empty className=\"text-foreground-subtle px-2 py-6 text-center text-sm\">\n                    {emptyText}\n                  </CommandPrimitive.Empty>\n                )}\n              </CommandPrimitive.List>\n            </CommandPrimitive>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n\n      {error ? (\n        <p id={errorId} role=\"alert\" className=\"text-danger-text text-xs\">\n          {error}\n        </p>\n      ) : helperText ? (\n        <p id={helperId} className=\"text-foreground-subtle text-xs\">\n          {helperText}\n        </p>\n      ) : null}\n    </div>\n  );\n});\n\nCombobox.displayName = 'Combobox';\n"],"names":["Combobox","forwardRef","value","onChange","options","loadOptions","selectedLabel","label","helperText","error","placeholderProp","searchPlaceholderProp","emptyTextProp","clearable","disabled","size","id","className","ref","strings","useStrings","placeholder","searchPlaceholder","emptyText","isError","fieldId","helperId","errorId","describedBy","useFieldIds","listId","open","setOpen","useState","query","setQuery","loaded","setLoaded","loading","setLoading","selectedOption","setSelectedOption","items","useMemo","useEffect","cancelled","res","selected","fromItems","o","triggerHeight","triggerPadding","triggerPaddingRight","handleClear","useCallback","cn","PopoverPrimitive","jsxs","jsx","IconButton","X","ChevronsUpDown","CommandPrimitive","Loader2","opt","isSelected","v","Check"],"mappings":"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"}

package/dist-lib/components/ui/CommandPalette.d.ts

@@ -20,7 +20,7 @@ export declare const CommandInput: import('react').ForwardRefExoticComponent<Omi
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof import('react').InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
+}, "key" | "asChild" | keyof import('react').InputHTMLAttributes<HTMLInputElement>>, "value" | "type" | "onChange"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & import('react').RefAttributes<HTMLInputElement>, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
@@ -46,7 +46,7 @@ export declare const CommandGroup: import('react').ForwardRefExoticComponent<Omi
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -64,7 +64,7 @@ export declare const CommandItem: import('react').ForwardRefExoticComponent<Omit
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "onSelect" | "disabled"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;