@cystackapp/ui 1.4.0

package/dist/assets/background-pattern-circles-md.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const r = (t) => /* @__PURE__ */ e.createElement("svg", { height: 480, width: 480, viewBox: "0 0 480 480", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("radialGradient", { id: "radialGradient-mask", cx: "50%", cy: "50%", r: "50%", fx: "50%", fy: "50%" }, /* @__PURE__ */ e.createElement("stop", { offset: "0%", stopColor: "white" }), /* @__PURE__ */ e.createElement("stop", { offset: "100%", stopColor: "black" })), /* @__PURE__ */ e.createElement("mask", { id: "background-pattern-decorative-mask" }, /* @__PURE__ */ e.createElement("rect", { x: 0, y: 0, height: "100%", width: "100%", fill: "url(#radialGradient-mask)" }))), /* @__PURE__ */ e.createElement("g", { mask: "url(#background-pattern-decorative-mask)" }, /* @__PURE__ */ e.createElement("circle", { cx: 240, cy: 240, r: 240, stroke: "#E9EAEB", fill: "transparent" }), /* @__PURE__ */ e.createElement("circle", { cx: 240, cy: 240, r: 208, stroke: "#E9EAEB", fill: "transparent" }), /* @__PURE__ */ e.createElement("circle", { cx: 240, cy: 240, r: 176, stroke: "#E9EAEB", fill: "transparent" }), /* @__PURE__ */ e.createElement("circle", { cx: 240, cy: 240, r: 144, stroke: "#E9EAEB", fill: "transparent" }), /* @__PURE__ */ e.createElement("circle", { cx: 240, cy: 240, r: 112, stroke: "#E9EAEB", fill: "transparent" }), /* @__PURE__ */ e.createElement("circle", { cx: 240, cy: 240, r: 80, stroke: "#E9EAEB", fill: "transparent" }), /* @__PURE__ */ e.createElement("circle", { cx: 240, cy: 240, r: 48, stroke: "#E9EAEB", fill: "transparent" })));
+export {
+  r as default
+};

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { BadgeColor, BadgeSize, BadgeType } from './badge-utils';
+export interface BadgeProps {
+    children: ReactNode;
+    color?: BadgeColor;
+    size?: BadgeSize;
+    type?: BadgeType;
+    dot?: boolean;
+    iconLeading?: ReactNode;
+    iconTrailing?: ReactNode;
+    /** When provided, renders a close/dismiss button. */
+    onClose?: () => void;
+    className?: string;
+}
+/**
+ * Visual indicator for categorizing items. Supports three style types:
+ * pill (rounded-full), badge (rounded-md), and modern (shadow + white bg).
+ *
+ * `dot` and `iconLeading` share the same leading slot — if both are provided,
+ * `iconLeading` takes precedence and the dot is not rendered.
+ *
+ * @example
+ * ```tsx
+ * <Badge color="success" size="sm">Active</Badge>
+ * <Badge type="modern" dot color="error">Failed</Badge>
+ * <Badge iconLeading={<AlertCircle />} onClose={handleDismiss}>Warning</Badge>
+ * ```
+ */
+export declare const Badge: ({ children, color, size, type, dot, iconLeading, iconTrailing, onClose, className, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/badge/Badge.js

@@ -0,0 +1,67 @@
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import { useRef as D, useState as i, useCallback as y, useEffect as N } from "react";
+import { XClose as k } from "@untitled-ui/icons-react";
+import { cn as u } from "../../utils/cn.js";
+import { Tooltip as B } from "../tooltip/Tooltip.js";
+import { useResizeObserver as R } from "../../hooks/element-shift/use-resize-observer.js";
+import { BADGE_ICON_SIZE_CLASSES as T, BADGE_DOT_CLASSES as h, BADGE_MODERN_TEXT_CLASSES as w, BADGE_COLOR_CLASSES as G, BADGE_SIZE_CLASSES as O, BADGE_TYPE_CLASSES as v } from "./badge-utils.js";
+const X = ({
+  children: t,
+  color: o = "gray",
+  size: a = "md",
+  type: l = "pill",
+  dot: f = !1,
+  iconLeading: n,
+  iconTrailing: c,
+  onClose: m,
+  className: p
+}) => {
+  const s = D(null), [S, E] = i(!1), [_, A] = i(!1), d = y(() => {
+    const r = s.current;
+    r && E(r.scrollWidth > r.clientWidth);
+  }, []);
+  R(s, d), N(() => {
+    A(!0);
+  }, []);
+  const C = f && !n;
+  return /* @__PURE__ */ b(
+    "span",
+    {
+      className: u(
+        "inline-flex items-center w-fit max-w-32 font-medium transition-all",
+        _ ? "opacity-100 scale-100" : "opacity-0 scale-90",
+        v[l],
+        O[a],
+        l === "modern" ? `bg-white border-gray-v2-300 ${w[o]}` : G[o],
+        p
+      ),
+      children: [
+        C ? /* @__PURE__ */ e(
+          "span",
+          {
+            className: u(
+              "size-1.5 rounded-full shrink-0",
+              h[o]
+            )
+          }
+        ) : null,
+        n || null,
+        S && typeof t == "string" ? /* @__PURE__ */ e(B, { content: t, children: /* @__PURE__ */ e("span", { ref: s, className: "block truncate min-w-0", children: t }) }) : /* @__PURE__ */ e("span", { ref: s, className: "block truncate min-w-0", children: t }),
+        c || null,
+        m ? /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            "aria-label": typeof t == "string" ? `Remove ${t}` : "Remove",
+            onClick: m,
+            className: "shrink-0 cursor-pointer rounded-full p-0 hover:opacity-70 transition-opacity",
+            children: /* @__PURE__ */ e(k, { className: T[a] })
+          }
+        ) : null
+      ]
+    }
+  );
+};
+export {
+  X as Badge
+};

package/dist/components/badge/BadgeTestStory.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Test helper that renders a dismissible Badge and displays
+ * whether the onClose callback was fired.
+ */
+export declare const BadgeWithCloseDisplay: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/badge/badge-utils.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Available badge colors — matches Untitled UI's standard palette.
+ *
+ * These must correspond to color tokens defined in `packages/ui/theme.css`
+ * `@theme` block (e.g. `--color-gray-v2-50`, `--color-brand-v2-200`). If a color is
+ * added or removed from the theme, update this array and all class maps below.
+ */
+export declare const BADGE_COLORS: readonly ["gray", "brand", "error", "warning", "success", "gray-blue", "blue-light", "blue", "indigo", "purple", "pink", "orange"];
+/** Available badge sizes. */
+export declare const BADGE_SIZES: readonly ["sm", "md", "lg"];
+/** Available badge shape/style types. */
+export declare const BADGE_TYPES: readonly ["pill", "badge", "modern"];
+export type BadgeColor = (typeof BADGE_COLORS)[number];
+export type BadgeSize = (typeof BADGE_SIZES)[number];
+export type BadgeType = (typeof BADGE_TYPES)[number];
+/** Padding, font-size, and gap per size. */
+export declare const BADGE_SIZE_CLASSES: Record<BadgeSize, string>;
+/** Icon dimensions per size. */
+export declare const BADGE_ICON_SIZE_CLASSES: Record<BadgeSize, string>;
+/** Border-radius and structural classes per type. */
+export declare const BADGE_TYPE_CLASSES: Record<BadgeType, string>;
+/** Background, border, and text classes for `pill` and `badge` types. */
+export declare const BADGE_COLOR_CLASSES: Record<BadgeColor, string>;
+/** Text-only classes for `modern` type (white bg, gray border). */
+export declare const BADGE_MODERN_TEXT_CLASSES: Record<BadgeColor, string>;
+/** Dot indicator background per color. */
+export declare const BADGE_DOT_CLASSES: Record<BadgeColor, string>;

package/dist/components/badge/badge-utils.js

@@ -0,0 +1,74 @@
+const r = [
+  "gray",
+  "brand",
+  "error",
+  "warning",
+  "success",
+  "gray-blue",
+  "blue-light",
+  "blue",
+  "indigo",
+  "purple",
+  "pink",
+  "orange"
+], e = {
+  sm: "px-2 py-0.5 text-xs gap-1",
+  md: "px-2.5 py-0.5 text-sm gap-1.5",
+  lg: "px-3 py-1 text-sm gap-1.5"
+}, g = {
+  sm: "size-3",
+  md: "size-4",
+  lg: "size-4"
+}, b = {
+  pill: "rounded-full border",
+  badge: "rounded-md border",
+  modern: "rounded-md border shadow-xs"
+}, t = {
+  gray: "bg-gray-v2-50 border-gray-v2-200 text-gray-v2-700",
+  brand: "bg-brand-v2-50 border-brand-v2-200 text-brand-v2-700",
+  error: "bg-error-v2-50 border-error-v2-200 text-error-v2-700",
+  warning: "bg-warning-v2-50 border-warning-v2-200 text-warning-v2-700",
+  success: "bg-success-v2-50 border-success-v2-200 text-success-v2-700",
+  "gray-blue": "bg-gray-blue-v2-50 border-gray-blue-v2-200 text-gray-blue-v2-700",
+  "blue-light": "bg-blue-light-v2-50 border-blue-light-v2-200 text-blue-light-v2-700",
+  blue: "bg-blue-v2-50 border-blue-v2-200 text-blue-v2-700",
+  indigo: "bg-indigo-v2-50 border-indigo-v2-200 text-indigo-v2-700",
+  purple: "bg-purple-v2-50 border-purple-v2-200 text-purple-v2-700",
+  pink: "bg-pink-v2-50 border-pink-v2-200 text-pink-v2-700",
+  orange: "bg-orange-v2-50 border-orange-v2-200 text-orange-v2-700"
+}, n = {
+  gray: "text-gray-v2-700",
+  brand: "text-brand-v2-700",
+  error: "text-error-v2-700",
+  warning: "text-warning-v2-700",
+  success: "text-success-v2-700",
+  "gray-blue": "text-gray-blue-v2-700",
+  "blue-light": "text-blue-light-v2-700",
+  blue: "text-blue-v2-700",
+  indigo: "text-indigo-v2-700",
+  purple: "text-purple-v2-700",
+  pink: "text-pink-v2-700",
+  orange: "text-orange-v2-700"
+}, v = {
+  gray: "bg-gray-v2-500",
+  brand: "bg-brand-v2-500",
+  error: "bg-error-v2-500",
+  warning: "bg-warning-v2-500",
+  success: "bg-success-v2-500",
+  "gray-blue": "bg-gray-blue-v2-500",
+  "blue-light": "bg-blue-light-v2-500",
+  blue: "bg-blue-v2-500",
+  indigo: "bg-indigo-v2-500",
+  purple: "bg-purple-v2-500",
+  pink: "bg-pink-v2-500",
+  orange: "bg-orange-v2-500"
+};
+export {
+  r as BADGE_COLORS,
+  t as BADGE_COLOR_CLASSES,
+  v as BADGE_DOT_CLASSES,
+  g as BADGE_ICON_SIZE_CLASSES,
+  n as BADGE_MODERN_TEXT_CLASSES,
+  e as BADGE_SIZE_CLASSES,
+  b as BADGE_TYPE_CLASSES
+};

package/dist/components/badge/variants/BadgeMore.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+interface Props {
+    badges: ReactNode[];
+}
+export declare const BadgeMore: ({ badges }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/badge/variants/BadgeMore.js

@@ -0,0 +1,10 @@
+import { jsx as o, jsxs as e } from "react/jsx-runtime";
+import { Popover as t } from "../../popover/Popover.js";
+import { Badge as n } from "../Badge.js";
+const c = ({ badges: r }) => r.length === 0 ? null : /* @__PURE__ */ o(t, { content: r, contentClassName: "max-w-[40vw]", children: /* @__PURE__ */ e(n, { color: "gray", size: "sm", children: [
+  "+",
+  r.length
+] }) });
+export {
+  c as BadgeMore
+};

package/dist/components/badge/variants/BadgeMoreTestStory.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Test helper that renders a BadgeMore with a fixed set of badges
+ * for use in hover interaction tests.
+ */
+export declare const BadgeMoreHoverDisplay: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/badge/variants/BadgeTag.d.ts

@@ -0,0 +1,10 @@
+import { BadgeColor, BadgeSize } from '../badge-utils';
+/** Decide the color of the badge by getting a hash from text content. */
+export declare function getBadgeAutoColor(name: string): BadgeColor;
+export declare const TAG_ICON_COLOR_CLASSES: Record<BadgeColor, string>;
+interface Props {
+    name: string;
+    size?: BadgeSize;
+}
+export declare const BadgeTag: ({ name, size }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/badge/variants/BadgeTag.js

@@ -0,0 +1,50 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Tag01 as g } from "@untitled-ui/icons-react";
+import { cn as i } from "../../../utils/cn.js";
+import { Badge as c } from "../Badge.js";
+import { BADGE_COLORS as n, BADGE_ICON_SIZE_CLASSES as l } from "../badge-utils.js";
+function u(t) {
+  const r = Array.from(t).reduce(
+    (e, a) => e + a.charCodeAt(0),
+    0
+  );
+  return n[r % n.length];
+}
+const s = {
+  gray: "text-gray-v2-500",
+  brand: "text-brand-v2-500",
+  error: "text-error-v2-500",
+  warning: "text-warning-v2-500",
+  success: "text-success-v2-500",
+  "gray-blue": "text-gray-blue-v2-500",
+  "blue-light": "text-blue-light-v2-500",
+  blue: "text-blue-v2-500",
+  indigo: "text-indigo-v2-500",
+  purple: "text-purple-v2-500",
+  pink: "text-pink-v2-500",
+  orange: "text-orange-v2-500"
+}, b = ({ name: t, size: r = "sm" }) => {
+  const e = u(t);
+  return /* @__PURE__ */ o(
+    c,
+    {
+      color: e,
+      size: r,
+      iconLeading: /* @__PURE__ */ o(
+        g,
+        {
+          className: i(
+            s[e],
+            l[r]
+          )
+        }
+      ),
+      children: t
+    }
+  );
+};
+export {
+  b as BadgeTag,
+  s as TAG_ICON_COLOR_CLASSES,
+  u as getBadgeAutoColor
+};

package/dist/components/combobox/Combobox.d.ts

@@ -0,0 +1,96 @@
+import { ReactNode } from 'react';
+import { BadgeProps } from '../badge/Badge';
+export interface ComboboxSuggestionItem {
+    value: string;
+    label?: string;
+    icon?: ReactNode;
+}
+interface Props {
+    id?: string;
+    /**
+     * Comma-joined string encoding both confirmed items and the current pending
+     * input. The last segment (after the final comma) is always the pending input;
+     * all preceding segments are confirmed items rendered as badges.
+     *
+     * Examples:
+     *   ""                  — empty field
+     *   "bob"               — "bob" is pending (not yet confirmed)
+     *   "bob,"              — "bob" is confirmed, pending is empty
+     *   "bob,alice"         — "bob" confirmed, "alice" pending
+     *   "bob,alice,"        — both confirmed, pending is empty
+     *
+     * The form owns this value. Validation (shape, required, etc.) is the form's
+     * responsibility — this component does not validate.
+     */
+    value: string;
+    /**
+     * Called on every keystroke and every confirmation.
+     *
+     * Validation pattern — the form parses the value on each change:
+     *
+     * ```
+     *   const segments = value.split(",");
+     *   const pending   = segments.at(-1);                        // not yet confirmed
+     *   const confirmed = segments.slice(0, -1).filter(Boolean);  // confirmed badges
+     * ```
+     *
+     * To validate item shape on confirmation: check whether the number of
+     * confirmed items increased. If the newest confirmed item is invalid, do NOT
+     * update state — the value reverts to the previous string, the invalid input
+     * stays in the pending field, and the form sets error={true} to show the ring.
+     *
+     * To validate the whole field (e.g. required, min items): run against
+     * `confirmed` on onBlur or onSubmit.
+     *
+     * The `pending` segment should generally be excluded from submit-time
+     * validation — if you want it included, append "," to the value before
+     * reading confirmed items.
+     *
+     */
+    onChange: (value: string) => void;
+    /** Called when focus leaves the combobox. The pending input is NOT
+     *  auto-confirmed — it remains in the value string as-is. The form decides
+     *  whether to validate or consume the pending segment on blur. */
+    onBlur?: () => void;
+    getSuggestions?: (input: string) => ComboboxSuggestionItem[];
+    /** Characters that trigger confirmation of the pending input in addition to
+     *  Enter. The character is swallowed (not inserted into the field).
+     *  Default: [",", ";"] */
+    delimiter?: string[];
+    placeholder?: string;
+    error?: boolean;
+    disabled?: boolean;
+    getBadgeProps?: (value: string) => Partial<Omit<BadgeProps, "children" | "onClose" | "size">>;
+    /** Maps a confirmed value to its display label. Use when the stored value
+     *  (e.g. an ID) differs from what should appear in the badge. */
+    getLabel?: (value: string) => string;
+}
+/**
+ * Multi-value input that renders confirmed items as badges. The `value` string
+ * encodes both confirmed items and the current pending input — see the `value`
+ * and `onChange` prop docs for the format.
+ *
+ * @example
+ * const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ *
+ * const [value, setValue] = useState("");
+ * const [error, setError] = useState(false);
+ *
+ * const handleChange = (next: string) => {
+ *   const confirmed = next.split(",").slice(0, -1).filter(Boolean);
+ *   const prev = value.split(",").slice(0, -1).filter(Boolean);
+ *   if (confirmed.length > prev.length) {
+ *     const newest = confirmed[confirmed.length - 1];
+ *     if (!EMAIL.test(newest)) {
+ *       setError(true);
+ *       return; // reject — value reverts, invalid input stays pending
+ *     }
+ *   }
+ *   setError(false);
+ *   setValue(next);
+ * };
+ *
+ * <Combobox value={value} onChange={handleChange} error={error} />
+ */
+export declare const Combobox: ({ id, value, onChange, onBlur, getSuggestions, delimiter, placeholder, error, disabled, getBadgeProps, getLabel, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/combobox/Combobox.js

@@ -0,0 +1,206 @@
+import { jsxs as b, Fragment as _, jsx as w } from "react/jsx-runtime";
+import { useId as B, useRef as x, useState as O, useMemo as D, useCallback as G, useEffect as k } from "react";
+import { createPortal as J } from "react-dom";
+import { cn as T } from "../../utils/cn.js";
+import { Badge as Q } from "../badge/Badge.js";
+import { usePopoverCoord as X } from "../popover/use-popover-coord.js";
+const Y = [",", ";"];
+function I(p) {
+  return `combobox-option-${p}`;
+}
+const le = ({
+  id: p,
+  value: E,
+  onChange: f,
+  onBlur: m,
+  getSuggestions: h,
+  delimiter: P = Y,
+  placeholder: S,
+  error: z = !1,
+  disabled: g = !1,
+  getBadgeProps: M,
+  getLabel: C
+}) => {
+  const R = B(), y = x(null), j = x(null), u = x(null), [a, c] = O(!1), [l, n] = O(-1), { style: U } = X(y, u, {
+    syncWidth: !0
+  }), d = D(() => E.split(","), [E]), i = d[d.length - 1], o = D(
+    () => d.slice(0, -1).filter(Boolean),
+    [d]
+  ), r = D(() => h ? h(i).filter(
+    (e) => !o.includes(e.value)
+  ) : [], [h, i, o]), $ = l >= 0 && r[l] ? I(r[l].value) : void 0, v = G(() => {
+    c(!1), n(-1);
+  }, []), A = () => {
+    const e = i.trim();
+    e !== "" && f([...o, e, ""].join(","));
+  }, q = (e) => {
+    const t = e.target.value;
+    f([...o, t].join(",")), c(!0);
+  }, H = () => {
+    r.length > 0 && c(!0);
+  }, V = () => {
+    v(), m == null || m();
+  }, L = (e) => {
+    f([...o, e.value, ""].join(",")), n(-1);
+  }, N = (e) => {
+    const t = o.filter((s) => s !== e);
+    f([...t, i].join(","));
+  }, W = (e) => {
+    if (e.key === "ArrowDown") {
+      if (e.preventDefault(), !a && r.length > 0) {
+        c(!0), e.altKey || n(0);
+        return;
+      }
+      e.altKey || n((t) => Math.min(t + 1, r.length - 1));
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      if (e.preventDefault(), e.altKey) {
+        v();
+        return;
+      }
+      n((t) => Math.max(t - 1, -1));
+      return;
+    }
+    if (e.key === "Home" && a) {
+      e.preventDefault(), n(0);
+      return;
+    }
+    if (e.key === "End" && a) {
+      e.preventDefault(), n(r.length - 1);
+      return;
+    }
+    if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Delete") {
+      n(-1);
+      return;
+    }
+    if (P.includes(e.key)) {
+      e.preventDefault(), A();
+      return;
+    }
+    if (e.key === "Enter") {
+      if (e.preventDefault(), a && l >= 0) {
+        L(r[l]);
+        return;
+      }
+      A();
+      return;
+    }
+    if (e.key === "Escape") {
+      a && (e.stopPropagation(), v());
+      return;
+    }
+    if (e.key === "Tab") {
+      v();
+      return;
+    }
+    e.key === "Backspace" && i === "" && l < 0 && o.length > 0 && N(o[o.length - 1]);
+  };
+  return k(() => {
+    if (!a) return;
+    const e = (t) => {
+      var K, F;
+      const { target: s } = t;
+      s instanceof Node && ((K = y.current) != null && K.contains(s) || (F = u.current) != null && F.contains(s) || (c(!1), n(-1)));
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [a]), k(() => {
+    n(-1);
+  }, [r]), k(() => {
+    if (l < 0 || !u.current) return;
+    const e = r[l];
+    if (!e) return;
+    const t = u.current.querySelector(
+      `[id="${I(e.value)}"]`
+    );
+    t == null || t.scrollIntoView({ block: "nearest" });
+  }, [l, r]), /* @__PURE__ */ b(_, { children: [
+    /* @__PURE__ */ b(
+      "div",
+      {
+        ref: y,
+        onMouseDown: (e) => {
+          var t;
+          e.target === e.currentTarget && (e.preventDefault(), (t = j.current) == null || t.focus());
+        },
+        className: T(
+          "flex flex-wrap items-center gap-1.5 px-3 py-1.5 min-h-10 bg-white rounded-lg border shadow-xs transition-all outline outline-transparent",
+          g ? "bg-gray-v2-50 border-gray-v2-300" : z ? "border-error-v2-300 focus-within:border-error-v2 focus-within:outline-error-v2" : "border-gray-v2-300 focus-within:border-brand-v2 focus-within:outline-brand-v2"
+        ),
+        children: [
+          o.map((e) => /* @__PURE__ */ w(
+            Q,
+            {
+              ...M ? M(e) : void 0,
+              size: "sm",
+              onClose: g ? void 0 : () => N(e),
+              className: "max-w-48",
+              children: C ? C(e) : e
+            },
+            e
+          )),
+          /* @__PURE__ */ w(
+            "input",
+            {
+              id: p,
+              role: "combobox",
+              "aria-expanded": a,
+              "aria-controls": R,
+              "aria-autocomplete": "list",
+              "aria-activedescendant": $,
+              ref: j,
+              autoComplete: "off",
+              value: i,
+              onChange: q,
+              onKeyDown: W,
+              onFocus: H,
+              onBlur: V,
+              placeholder: o.length === 0 ? S : void 0,
+              disabled: g,
+              className: "flex-1 min-w-20 bg-transparent outline-none text-sm text-gray-v2-900 placeholder:text-gray-v2-500 disabled:cursor-not-allowed"
+            }
+          )
+        ]
+      }
+    ),
+    a && r.length > 0 ? J(
+      /* @__PURE__ */ w(
+        "div",
+        {
+          ref: u,
+          role: "listbox",
+          id: R,
+          style: U,
+          className: "z-20 rounded-lg border border-gray-v2-200 bg-white p-1 shadow-lg transition-all max-h-[40vh] overflow-auto",
+          children: r.map((e, t) => /* @__PURE__ */ b(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": "false",
+              tabIndex: -1,
+              id: I(e.value),
+              className: T(
+                "flex w-full items-center gap-2 rounded-md p-2 pr-2.5 text-left text-sm font-semibold text-gray-v2-700",
+                t === l ? "bg-gray-v2-100" : "hover:bg-gray-v2-50"
+              ),
+              onMouseDown: (s) => s.preventDefault(),
+              onClick: () => L(e),
+              onMouseEnter: () => n(t),
+              onMouseLeave: () => n(-1),
+              children: [
+                e.icon ? e.icon : null,
+                e.label ? e.label : e.value
+              ]
+            },
+            e.value
+          ))
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+};
+export {
+  le as Combobox
+};

package/dist/components/combobox/use-validated-combobox.d.ts

@@ -0,0 +1,17 @@
+interface Options {
+    pattern: RegExp;
+    initialValue?: string;
+}
+interface Result {
+    value: string;
+    error: boolean;
+    items: string[];
+    onChange: (next: string) => void;
+    reset: () => void;
+}
+/**
+ * Validates each confirmed item against a pattern and rejects invalid ones.
+ * Invalid confirmation leaves the input text in place and sets error=true.
+ */
+export declare function useValidatedCombobox({ pattern, initialValue, }: Options): Result;
+export {};

package/dist/components/combobox/use-validated-combobox.js

@@ -0,0 +1,23 @@
+import { useState as c, useCallback as g } from "react";
+function b({
+  pattern: l,
+  initialValue: t = ""
+}) {
+  const [s, n] = c(t), [f, o] = c(!1), i = (e) => {
+    const r = e.split(",").slice(0, -1).filter(Boolean), m = s.split(",").slice(0, -1).filter(Boolean);
+    if (r.length > m.length) {
+      const p = r[r.length - 1];
+      if (!l.test(p)) {
+        o(!0);
+        return;
+      }
+    }
+    o(!1), n(e);
+  }, a = g(() => {
+    n(t), o(!1);
+  }, [t]), u = s.split(",").filter((e) => l.test(e));
+  return { value: s, error: f, items: u, onChange: i, reset: a };
+}
+export {
+  b as useValidatedCombobox
+};

package/dist/components/error-state/ErrorState.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface Props {
+    title: string;
+    supportingText?: string;
+    buttons?: ReactNode;
+    className?: string;
+}
+export declare const ErrorState: ({ title, supportingText, buttons, className, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};