@orion-ds/react 4.9.2 → 4.9.3

package/dist/components/Combobox/Combobox.mjs

@@ -0,0 +1,271 @@
+import { jsx as s, jsxs as v, Fragment as fe } from "react/jsx-runtime";
+import { forwardRef as me, useId as he, useRef as M, useState as R, useMemo as Y, useEffect as z, useCallback as h } from "react";
+import { createPortal as pe } from "react-dom";
+import { Loader2 as be, X as we, ChevronDown as ve, Check as ge } from "lucide-react";
+import t from "./Combobox.module.css.mjs";
+const Ne = (d, l) => {
+  const o = l.toLowerCase().trim();
+  return o ? d.label.toLowerCase().includes(o) || d.value.toLowerCase().includes(o) || (d.description?.toLowerCase().includes(o) ?? !1) : !0;
+}, xe = me(
+  ({
+    options: d,
+    value: l,
+    onChange: o,
+    onInputChange: T,
+    size: B = "md",
+    label: I,
+    helperText: V,
+    error: k,
+    loading: G = !1,
+    clearable: J = !0,
+    allowFreeInput: u = !1,
+    filterFn: A = Ne,
+    openOnFocus: H = !0,
+    minChars: C = 0,
+    emptyText: Q = "No results found",
+    renderOption: W,
+    maxHeight: Z = 300,
+    fullWidth: _ = !1,
+    placeholder: X,
+    disabled: g,
+    className: F,
+    id: ee,
+    onFocus: q,
+    onBlur: K,
+    onKeyDown: U,
+    ...te
+  }, L) => {
+    const ne = he(), O = ee || ne, P = `${O}-listbox`, N = M(null), y = M(null), p = M(null), [i, f] = R(!1), [E, a] = R(""), [c, x] = R(-1), [S, se] = R({
+      top: 0,
+      left: 0,
+      width: 0
+    }), r = Y(
+      () => d.find((e) => e.value === l) ?? null,
+      [d, l]
+    );
+    z(() => {
+      r ? a(r.label) : u || a("");
+    }, [r, u]);
+    const b = Y(() => E.length < C ? [] : d.filter((e) => A(e, E)), [d, E, C, A]), w = h(() => {
+      if (!N.current) return;
+      const e = N.current.getBoundingClientRect();
+      se({
+        top: e.bottom + window.scrollY + 4,
+        left: e.left + window.scrollX,
+        width: e.width
+      });
+    }, []);
+    z(() => {
+      if (i)
+        return w(), window.addEventListener("resize", w), window.addEventListener("scroll", w, !0), () => {
+          window.removeEventListener("resize", w), window.removeEventListener("scroll", w, !0);
+        };
+    }, [i, w]), z(() => {
+      if (!i) return;
+      const e = (n) => {
+        const m = n.target;
+        N.current && !N.current.contains(m) && p.current && !p.current.contains(m) && (f(!1), !u && !l ? a("") : r && a(r.label));
+      };
+      return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+    }, [i, u, l, r]);
+    const re = h(
+      (e) => {
+        const n = e.target.value;
+        a(n), x(-1), T?.(n), !i && n.length >= C && f(!0), r && n !== r.label && !u && o?.(null, null);
+      },
+      [
+        i,
+        C,
+        T,
+        r,
+        u,
+        o
+      ]
+    ), ie = h(
+      (e) => {
+        H && !g && f(!0), q?.(e);
+      },
+      [H, g, q]
+    ), le = h(
+      (e) => {
+        setTimeout(() => {
+          p.current?.contains(document.activeElement) || (f(!1), !u && !l ? a("") : r && a(r.label));
+        }, 200), K?.(e);
+      },
+      [u, l, r, K]
+    ), j = h(
+      (e) => {
+        e.disabled || (o?.(e.value, e), a(e.label), f(!1), x(-1), y.current?.focus());
+      },
+      [o]
+    ), oe = h(
+      (e) => {
+        e.stopPropagation(), o?.(null, null), a(""), y.current?.focus();
+      },
+      [o]
+    ), ae = h(
+      (e) => {
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault(), i ? x(
+              (n) => Math.min(n + 1, b.length - 1)
+            ) : f(!0);
+            break;
+          case "ArrowUp":
+            e.preventDefault(), x((n) => Math.max(n - 1, 0));
+            break;
+          case "Enter":
+            e.preventDefault(), i && c >= 0 && b[c] && j(b[c]);
+            break;
+          case "Escape":
+            e.preventDefault(), f(!1), a(r ? r.label : "");
+            break;
+          case "Tab":
+            f(!1);
+            break;
+        }
+        U?.(e);
+      },
+      [
+        i,
+        c,
+        b,
+        j,
+        r,
+        U
+      ]
+    );
+    z(() => {
+      c >= 0 && p.current && p.current.querySelectorAll('[role="option"]')[c]?.scrollIntoView({ block: "nearest" });
+    }, [c]);
+    const ce = [
+      t.container,
+      t[B],
+      _ && t.fullWidth,
+      g && t.disabled,
+      k && t.error,
+      F
+    ].filter(Boolean).join(" "), D = B === "sm" ? 14 : B === "lg" ? 20 : 16, de = (e, n) => {
+      const m = e.value === l, $ = n === c;
+      return W ? W(e, m, $) : /* @__PURE__ */ v(fe, { children: [
+        e.icon && /* @__PURE__ */ s("span", { className: t.optionIcon, "aria-hidden": "true", children: e.icon }),
+        /* @__PURE__ */ v("div", { className: t.optionContent, children: [
+          /* @__PURE__ */ s("span", { className: t.optionLabel, children: e.label }),
+          e.description && /* @__PURE__ */ s("span", { className: t.optionDescription, children: e.description })
+        ] }),
+        m && /* @__PURE__ */ s(
+          ge,
+          {
+            size: D,
+            className: t.checkIcon,
+            "aria-hidden": "true"
+          }
+        )
+      ] });
+    }, ue = /* @__PURE__ */ s(
+      "div",
+      {
+        ref: p,
+        className: `${t.dropdown} ${i && t.visible}`,
+        style: {
+          top: S.top,
+          left: S.left,
+          width: S.width,
+          maxHeight: Z
+        },
+        role: "listbox",
+        id: P,
+        "aria-label": I || X,
+        children: G ? /* @__PURE__ */ v("div", { className: t.loading, children: [
+          /* @__PURE__ */ s(be, { size: D, className: t.spinner }),
+          /* @__PURE__ */ s("span", { children: "Loading..." })
+        ] }) : b.length === 0 ? /* @__PURE__ */ s("div", { className: t.empty, children: Q }) : b.map((e, n) => {
+          const m = n === c, $ = e.value === l;
+          return /* @__PURE__ */ s(
+            "div",
+            {
+              className: [
+                t.option,
+                m && t.highlighted,
+                $ && t.selected,
+                e.disabled && t.disabled
+              ].filter(Boolean).join(" "),
+              role: "option",
+              "aria-selected": $,
+              "aria-disabled": e.disabled,
+              onClick: () => j(e),
+              onMouseEnter: () => x(n),
+              children: de(e, n)
+            },
+            e.value
+          );
+        })
+      }
+    );
+    return /* @__PURE__ */ v("div", { className: ce, children: [
+      I && /* @__PURE__ */ s("label", { htmlFor: O, className: t.label, children: I }),
+      /* @__PURE__ */ v(
+        "div",
+        {
+          ref: N,
+          className: t.inputWrapper,
+          onClick: () => y.current?.focus(),
+          children: [
+            /* @__PURE__ */ s(
+              "input",
+              {
+                ...te,
+                ref: (e) => {
+                  typeof L == "function" ? L(e) : L && (L.current = e), y.current = e;
+                },
+                id: O,
+                type: "text",
+                className: t.input,
+                value: E,
+                onChange: re,
+                onFocus: ie,
+                onBlur: le,
+                onKeyDown: ae,
+                disabled: g,
+                placeholder: X,
+                role: "combobox",
+                "aria-expanded": i,
+                "aria-haspopup": "listbox",
+                "aria-controls": P,
+                "aria-autocomplete": "list",
+                "aria-activedescendant": c >= 0 ? `${P}-option-${c}` : void 0
+              }
+            ),
+            /* @__PURE__ */ v("div", { className: t.actions, children: [
+              J && l && !g && /* @__PURE__ */ s(
+                "button",
+                {
+                  type: "button",
+                  className: t.clearButton,
+                  onClick: oe,
+                  "aria-label": "Clear selection",
+                  tabIndex: -1,
+                  children: /* @__PURE__ */ s(we, { size: D })
+                }
+              ),
+              /* @__PURE__ */ s(
+                "span",
+                {
+                  className: `${t.chevron} ${i ? t.open : ""}`,
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ s(ve, { size: D })
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      (V || k) && /* @__PURE__ */ s("span", { className: k ? t.errorText : t.helperText, children: k || V }),
+      i && pe(ue, document.body)
+    ] });
+  }
+);
+xe.displayName = "Combobox";
+export {
+  xe as Combobox
+};

package/dist/components/Combobox/Combobox.module.css

@@ -0,0 +1 @@
+._container_1v6vo_9{display:flex;flex-direction:column;gap:var(--spacing-1)}._fullWidth_1v6vo_15{width:100%}._label_1v6vo_20{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-primary)}._inputWrapper_1v6vo_27{position:relative;display:flex;align-items:center;background:var(--surface-base);border:1px solid var(--border-subtle);border-radius:var(--radius-control);cursor:text;transition:all var(--transition-fast)}._inputWrapper_1v6vo_27:hover:not(._disabled_1v6vo_39 ._inputWrapper_1v6vo_27){border-color:var(--border-strong)}._inputWrapper_1v6vo_27:focus-within{border-color:var(--interactive-primary);box-shadow:0 0 0 3px var(--soft-brand)}._inputWrapper_1v6vo_27:has(._input_1v6vo_27:focus-visible){border-color:var(--interactive-primary);box-shadow:0 0 0 3px var(--soft-brand);outline:2px solid var(--interactive-primary);outline-offset:2px}._sm_1v6vo_58 ._inputWrapper_1v6vo_27{height:32px}._sm_1v6vo_58 ._input_1v6vo_27{padding:var(--spacing-1) var(--spacing-8) var(--spacing-1) var(--spacing-3);font-size:var(--font-size-sm)}._md_1v6vo_67 ._inputWrapper_1v6vo_27{height:40px}._md_1v6vo_67 ._input_1v6vo_27{padding:var(--spacing-2) var(--spacing-10) var(--spacing-2) var(--spacing-3);font-size:var(--font-size-base)}._lg_1v6vo_76 ._inputWrapper_1v6vo_27{height:48px}._lg_1v6vo_76 ._input_1v6vo_27{padding:var(--spacing-3) var(--spacing-12) var(--spacing-3) var(--spacing-4);font-size:var(--font-size-lg)}._input_1v6vo_27{flex:1;width:100%;height:100%;background:transparent;border:none;border-radius:inherit;font-family:var(--font-secondary);color:var(--text-primary);outline:none}._input_1v6vo_27::placeholder{color:var(--text-tertiary)}._actions_1v6vo_103{position:absolute;right:var(--spacing-2);display:flex;align-items:center;gap:var(--spacing-1)}._clearButton_1v6vo_111{display:flex;align-items:center;justify-content:center;padding:var(--spacing-1);background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-tertiary);cursor:pointer;transition:color var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out)}._clearButton_1v6vo_111:hover{color:var(--text-primary);background:var(--surface-subtle)}._chevron_1v6vo_131{display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);transition:transform var(--duration-fast) var(--ease-out)}._chevron_1v6vo_131._open_1v6vo_139{transform:rotate(180deg)}._error_1v6vo_144 ._inputWrapper_1v6vo_27{border-color:var(--status-error)}._error_1v6vo_144 ._inputWrapper_1v6vo_27:focus-within{border-color:var(--status-error);box-shadow:0 0 0 3px var(--soft-error)}._error_1v6vo_144 ._inputWrapper_1v6vo_27:has(._input_1v6vo_27:focus-visible){border-color:var(--status-error);box-shadow:0 0 0 3px var(--soft-error);outline:2px solid var(--status-error);outline-offset:2px}._errorText_1v6vo_160{font-size:var(--font-size-sm);color:var(--status-error)}._helperText_1v6vo_166{font-size:var(--font-size-sm);color:var(--text-secondary)}._disabled_1v6vo_39 ._inputWrapper_1v6vo_27{background:var(--surface-subtle);cursor:not-allowed}._disabled_1v6vo_39 ._input_1v6vo_27{cursor:not-allowed;color:var(--text-tertiary)}._dropdown_1v6vo_183{position:fixed;z-index:var(--z-popover);background:var(--surface-base);border:1px solid var(--border-subtle);border-radius:var(--radius-control);box-shadow:var(--shadow-lg);overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out),visibility var(--duration-fast) var(--ease-out)}._dropdown_1v6vo_183._visible_1v6vo_200{opacity:1;visibility:visible;transform:translateY(0)}._option_1v6vo_207{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-2) var(--spacing-3);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out)}._option_1v6vo_207:first-child{border-top-left-radius:calc(var(--radius-control) - 1px);border-top-right-radius:calc(var(--radius-control) - 1px)}._option_1v6vo_207:last-child{border-bottom-left-radius:calc(var(--radius-control) - 1px);border-bottom-right-radius:calc(var(--radius-control) - 1px)}._option_1v6vo_207._highlighted_1v6vo_226{background:var(--surface-subtle)}._option_1v6vo_207._selected_1v6vo_230{background:var(--interactive-primary-subtle)}._option_1v6vo_207._disabled_1v6vo_39{opacity:.5;cursor:not-allowed}._optionIcon_1v6vo_240{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-secondary)}._optionContent_1v6vo_248{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-1)}._optionLabel_1v6vo_256{font-weight:var(--font-weight-medium);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._optionDescription_1v6vo_264{font-size:var(--font-size-sm);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._checkIcon_1v6vo_272{flex-shrink:0;color:var(--interactive-primary)}._loading_1v6vo_278{display:flex;align-items:center;justify-content:center;gap:var(--spacing-2);padding:var(--spacing-4);color:var(--text-secondary)}._spinner_1v6vo_287{animation:_spin_1v6vo_287 1s linear infinite}@keyframes _spin_1v6vo_287{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._empty_1v6vo_301{padding:var(--spacing-4);text-align:center;color:var(--text-secondary);font-size:var(--font-size-sm)}@media(forced-colors:active){._inputWrapper_1v6vo_27{border:2px solid CanvasText;background:Canvas}._inputWrapper_1v6vo_27:focus-within,._inputWrapper_1v6vo_27:has(._input_1v6vo_27:focus-visible){outline:3px solid Highlight;outline-offset:2px}._disabled_1v6vo_39 ._inputWrapper_1v6vo_27{border-color:GrayText}._input_1v6vo_27{color:CanvasText}._error_1v6vo_144 ._inputWrapper_1v6vo_27{border-color:LinkText}._errorText_1v6vo_160{color:LinkText}._dropdown_1v6vo_183{border:2px solid CanvasText;background:Canvas}._option_1v6vo_207._highlighted_1v6vo_226,._option_1v6vo_207._selected_1v6vo_230{background:Highlight;color:HighlightText}._clearButton_1v6vo_111,._chevron_1v6vo_131{color:CanvasText}._checkIcon_1v6vo_272{color:Highlight}}@media(prefers-reduced-motion:reduce){._inputWrapper_1v6vo_27,._dropdown_1v6vo_183,._clearButton_1v6vo_111,._chevron_1v6vo_131,._option_1v6vo_207{transition:none}._spinner_1v6vo_287{animation:none}}

package/dist/components/Combobox/Combobox.module.css.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o="_container_1v6vo_9",n="_fullWidth_1v6vo_15",t="_label_1v6vo_20",e="_inputWrapper_1v6vo_27",_="_disabled_1v6vo_39",i="_input_1v6vo_27",c="_sm_1v6vo_58",v="_md_1v6vo_67",s="_lg_1v6vo_76",p="_actions_1v6vo_103",r="_clearButton_1v6vo_111",l="_chevron_1v6vo_131",d="_open_1v6vo_139",a="_error_1v6vo_144",h="_errorText_1v6vo_160",u="_helperText_1v6vo_166",b="_dropdown_1v6vo_183",g="_visible_1v6vo_200",m="_option_1v6vo_207",T="_highlighted_1v6vo_226",x="_selected_1v6vo_230",I="_optionIcon_1v6vo_240",W="_optionContent_1v6vo_248",f="_optionLabel_1v6vo_256",y="_optionDescription_1v6vo_264",k="_checkIcon_1v6vo_272",w="_loading_1v6vo_278",B="_spinner_1v6vo_287",C="_spin_1v6vo_287",D="_empty_1v6vo_301",L={container:o,fullWidth:n,label:t,inputWrapper:e,disabled:_,input:i,sm:c,md:v,lg:s,actions:p,clearButton:r,chevron:l,open:d,error:a,errorText:h,helperText:u,dropdown:b,visible:g,option:m,highlighted:T,selected:x,optionIcon:I,optionContent:W,optionLabel:f,optionDescription:y,checkIcon:k,loading:w,spinner:B,spin:C,empty:D};exports.actions=p;exports.checkIcon=k;exports.chevron=l;exports.clearButton=r;exports.container=o;exports.default=L;exports.disabled=_;exports.dropdown=b;exports.empty=D;exports.error=a;exports.errorText=h;exports.fullWidth=n;exports.helperText=u;exports.highlighted=T;exports.input=i;exports.inputWrapper=e;exports.label=t;exports.lg=s;exports.loading=w;exports.md=v;exports.open=d;exports.option=m;exports.optionContent=W;exports.optionDescription=y;exports.optionIcon=I;exports.optionLabel=f;exports.selected=x;exports.sm=c;exports.spin=C;exports.spinner=B;exports.visible=g;

package/dist/components/Combobox/Combobox.module.css.mjs

@@ -0,0 +1,65 @@
+const o = "_container_1v6vo_9", n = "_fullWidth_1v6vo_15", t = "_label_1v6vo_20", _ = "_inputWrapper_1v6vo_27", e = "_disabled_1v6vo_39", v = "_input_1v6vo_27", c = "_sm_1v6vo_58", i = "_md_1v6vo_67", s = "_lg_1v6vo_76", p = "_actions_1v6vo_103", r = "_clearButton_1v6vo_111", l = "_chevron_1v6vo_131", d = "_open_1v6vo_139", a = "_error_1v6vo_144", h = "_errorText_1v6vo_160", u = "_helperText_1v6vo_166", b = "_dropdown_1v6vo_183", g = "_visible_1v6vo_200", m = "_option_1v6vo_207", x = "_highlighted_1v6vo_226", I = "_selected_1v6vo_230", T = "_optionIcon_1v6vo_240", W = "_optionContent_1v6vo_248", f = "_optionLabel_1v6vo_256", y = "_optionDescription_1v6vo_264", k = "_checkIcon_1v6vo_272", w = "_loading_1v6vo_278", B = "_spinner_1v6vo_287", C = "_spin_1v6vo_287", D = "_empty_1v6vo_301", L = {
+  container: o,
+  fullWidth: n,
+  label: t,
+  inputWrapper: _,
+  disabled: e,
+  input: v,
+  sm: c,
+  md: i,
+  lg: s,
+  actions: p,
+  clearButton: r,
+  chevron: l,
+  open: d,
+  error: a,
+  errorText: h,
+  helperText: u,
+  dropdown: b,
+  visible: g,
+  option: m,
+  highlighted: x,
+  selected: I,
+  optionIcon: T,
+  optionContent: W,
+  optionLabel: f,
+  optionDescription: y,
+  checkIcon: k,
+  loading: w,
+  spinner: B,
+  spin: C,
+  empty: D
+};
+export {
+  p as actions,
+  k as checkIcon,
+  l as chevron,
+  r as clearButton,
+  o as container,
+  L as default,
+  e as disabled,
+  b as dropdown,
+  D as empty,
+  a as error,
+  h as errorText,
+  n as fullWidth,
+  u as helperText,
+  x as highlighted,
+  v as input,
+  _ as inputWrapper,
+  t as label,
+  s as lg,
+  w as loading,
+  i as md,
+  d as open,
+  m as option,
+  W as optionContent,
+  y as optionDescription,
+  T as optionIcon,
+  f as optionLabel,
+  I as selected,
+  c as sm,
+  C as spin,
+  B as spinner,
+  g as visible
+};

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

@@ -0,0 +1,149 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Combobox size variants
+ */
+export type ComboboxSize = "sm" | "md" | "lg";
+/**
+ * Combobox option item
+ */
+export interface ComboboxOption {
+    /**
+     * Unique value for the option
+     */
+    value: string;
+    /**
+     * Display label for the option
+     */
+    label: string;
+    /**
+     * Optional description
+     */
+    description?: string;
+    /**
+     * Optional icon/avatar
+     */
+    icon?: ReactNode;
+    /**
+     * Whether this option is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Group this option belongs to
+     */
+    group?: string;
+}
+/**
+ * Combobox option group
+ */
+export interface ComboboxGroup {
+    /**
+     * Group label
+     */
+    label: string;
+    /**
+     * Options in this group
+     */
+    options: ComboboxOption[];
+}
+/**
+ * Combobox component props
+ *
+ * @example
+ * ```tsx
+ * <Combobox
+ *   options={[
+ *     { value: 'react', label: 'React' },
+ *     { value: 'vue', label: 'Vue' },
+ *     { value: 'angular', label: 'Angular' },
+ *   ]}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   placeholder="Select a framework..."
+ * />
+ * ```
+ */
+export interface ComboboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "onChange"> {
+    /**
+     * Available options
+     */
+    options: ComboboxOption[];
+    /**
+     * Currently selected value
+     */
+    value?: string | null;
+    /**
+     * Callback when selection changes
+     */
+    onChange?: (value: string | null, option: ComboboxOption | null) => void;
+    /**
+     * Callback when input value changes (for custom filtering)
+     */
+    onInputChange?: (value: string) => void;
+    /**
+     * Size variant
+     * @default 'md'
+     */
+    size?: ComboboxSize;
+    /**
+     * Field label
+     */
+    label?: string;
+    /**
+     * Helper text below the input
+     */
+    helperText?: string;
+    /**
+     * Error message (also sets error state)
+     */
+    error?: string;
+    /**
+     * Whether the combobox is loading
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether to allow clearing the selection
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Whether to allow free text input (not just selection)
+     * @default false
+     */
+    allowFreeInput?: boolean;
+    /**
+     * Custom filter function
+     */
+    filterFn?: (option: ComboboxOption, inputValue: string) => boolean;
+    /**
+     * Whether to show the dropdown when input is focused
+     * @default true
+     */
+    openOnFocus?: boolean;
+    /**
+     * Minimum characters before showing options
+     * @default 0
+     */
+    minChars?: number;
+    /**
+     * Text to show when no options match
+     * @default 'No results found'
+     */
+    emptyText?: string;
+    /**
+     * Custom render function for options
+     */
+    renderOption?: (option: ComboboxOption, isSelected: boolean, isHighlighted: boolean) => ReactNode;
+    /**
+     * Maximum height of the dropdown
+     * @default 300
+     */
+    maxHeight?: number;
+    /**
+     * Whether the input is full width
+     * @default false
+     */
+    fullWidth?: boolean;
+}
+//# sourceMappingURL=Combobox.types.d.ts.map

package/dist/components/Combobox/Combobox.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/Combobox.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,OAAO,GAAG,UAAU,CAC9B;IACC;;OAEG;IACH,OAAO,EAAE,cAAc,EAAE,CAAC;IAE1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAEzE;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;IAEnE;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,cAAc,EACtB,UAAU,EAAE,OAAO,EACnB,aAAa,EAAE,OAAO,KACnB,SAAS,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

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

@@ -0,0 +1,22 @@
+/**
+ * Combobox Component - Autocomplete/typeahead input.
+ *
+ * @example
+ * ```tsx
+ * import { Combobox } from '@orion-ds/react';
+ *
+ * <Combobox
+ *   label="Select a country"
+ *   placeholder="Search countries..."
+ *   options={[
+ *     { value: 'us', label: 'United States' },
+ *     { value: 'uk', label: 'United Kingdom' },
+ *     { value: 'ca', label: 'Canada' },
+ *   ]}
+ *   onSelect={(option) => setCountry(option.value)}
+ * />
+ * ```
+ */
+export { Combobox } from './Combobox';
+export type { ComboboxProps, ComboboxOption, ComboboxGroup, ComboboxSize, } from './Combobox.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Combobox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EACV,aAAa,EACb,cAAc,EACd,aAAa,EACb,YAAY,GACb,MAAM,kBAAkB,CAAC"}

package/dist/components/Command/Command.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("react"),H=require("react-dom"),K=require("lucide-react"),r=require("./Command.module.css.cjs"),U=require("../Divider/Divider.cjs"),B=s.createContext(null);function S(){const e=s.useContext(B);if(!e)throw new Error("Command compound components must be used within <Command>");return e}const $=(e,t)=>t?e.toLowerCase().includes(t.toLowerCase())?1:0:1,d=({value:e,onValueChange:t,filter:n=$,children:i,className:c,...l})=>{const[C,b]=s.useState(""),[v,p]=s.useState(0),y=s.useRef(new Map),[,j]=s.useState(0),x=s.useId(),m=e!==void 0?e:C,I=s.useCallback(o=>{e!==void 0?t?.(o):b(o),p(0)},[e,t]),N=s.useCallback((o,u)=>{y.current.set(o,u),j(f=>f+1)},[]),w=s.useCallback(o=>{y.current.delete(o),j(u=>u+1)},[]),g=s.useCallback(()=>{const o=[];for(const[u,f]of y.current)n(f,m)>0&&o.push(u);return o},[n,m]),h=s.useMemo(()=>({search:m,setSearch:I,filter:n,activeIndex:v,setActiveIndex:p,registerItem:N,unregisterItem:w,items:y.current,getVisibleItems:g,listId:x}),[m,I,n,v,p,N,w,g,x]),k=s.useRef(null),E=s.useCallback(o=>{const u=g();if(u.length){if(o.key==="ArrowDown")o.preventDefault(),p(f=>(f+1)%u.length);else if(o.key==="ArrowUp")o.preventDefault(),p(f=>(f-1+u.length)%u.length);else if(o.key==="Enter"){o.preventDefault();const f=u[v];f&&k.current?.querySelector(`[data-command-id="${f}"]`)?.click()}}},[g,v,p]),T=[r.default.command,c].filter(Boolean).join(" ");return a.jsx(B.Provider,{value:h,children:a.jsx("div",{ref:k,className:T,onKeyDown:E,...l,children:i})})},R=({className:e,...t})=>{const{search:n,setSearch:i,listId:c}=S(),l=s.useRef(null);s.useEffect(()=>{l.current?.focus()},[]);const C=[r.default.inputWrapper,e].filter(Boolean).join(" ");return a.jsxs("div",{className:C,children:[a.jsx(K.Search,{size:16,className:r.default.searchIcon,"aria-hidden":"true"}),a.jsx("input",{ref:l,className:r.default.input,value:n,onChange:b=>i(b.target.value),type:"text",role:"combobox","aria-expanded":"true","aria-autocomplete":"list","aria-controls":c,...t})]})};R.displayName="Command.Input";const q=({children:e,className:t,...n})=>{const{listId:i}=S(),c=[r.default.list,t].filter(Boolean).join(" ");return a.jsx("div",{id:i,className:c,role:"listbox",...n,children:e})};q.displayName="Command.List";const L=({children:e,className:t})=>{const{getVisibleItems:n}=S();if(n().length>0)return null;const c=[r.default.empty,t].filter(Boolean).join(" ");return a.jsx("div",{className:c,role:"status","aria-live":"polite",children:e})};L.displayName="Command.Empty";const A=({heading:e,children:t,className:n})=>{const i=[r.default.group,n].filter(Boolean).join(" ");return a.jsxs("div",{className:i,role:"group","aria-label":e,children:[e&&a.jsx("div",{className:r.default.groupHeading,children:e}),t]})};A.displayName="Command.Group";let z=0;const V=({onSelect:e,disabled:t=!1,value:n,children:i,className:c,...l})=>{const{filter:C,search:b,activeIndex:v,getVisibleItems:p,registerItem:y,unregisterItem:j}=S(),x=s.useRef("");x.current||(x.current=`cmd-item-${++z}`);const m=x.current,I=n||D(i);s.useEffect(()=>(y(m,I),()=>j(m)),[m,I,y,j]);const N=C(I,b)>0,h=p().indexOf(m)===v,k=()=>{t||e?.()},E=[r.default.item,t&&r.default.itemDisabled,!N&&r.default.itemHidden,c].filter(Boolean).join(" ");return a.jsx("div",{className:E,"data-command-id":m,"data-active":h,role:"option","aria-selected":h,"aria-disabled":t,onClick:k,...l,children:i})};V.displayName="Command.Item";const G=({className:e})=>{const t=[r.default.separator,e].filter(Boolean).join(" ");return a.jsx(U.Divider,{spacing:"none",className:t})};G.displayName="Command.Separator";const M=({children:e,className:t})=>{const n=[r.default.shortcut,t].filter(Boolean).join(" ");return a.jsx("span",{className:n,children:e})};M.displayName="Command.Shortcut";const P=({open:e,onOpenChange:t,children:n,className:i})=>{if(s.useEffect(()=>{if(!e)return;const l=C=>{C.key==="Escape"&&t(!1)};return document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[e,t]),s.useEffect(()=>(e?document.body.style.overflow="hidden":document.body.style.overflow="",()=>{document.body.style.overflow=""}),[e]),!e)return null;const c=l=>{l.target===l.currentTarget&&t(!1)};return H.createPortal(a.jsx("div",{className:r.default.dialogBackdrop,onClick:c,children:a.jsx("div",{className:[r.default.dialogContent,i].filter(Boolean).join(" "),children:a.jsx(d,{children:n})})}),document.body)};P.displayName="Command.Dialog";d.Input=R;d.List=q;d.Empty=L;d.Group=A;d.Item=V;d.Separator=G;d.Shortcut=M;d.Dialog=P;d.displayName="Command";function D(e){return typeof e=="string"?e:typeof e=="number"?String(e):Array.isArray(e)?e.map(D).join(" "):s.isValidElement(e)&&e.props?D(e.props.children):""}exports.Command=d;

package/dist/components/Command/Command.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { CommandProps, CommandDialogProps, CommandInputProps, CommandListProps, CommandEmptyProps, CommandGroupProps, CommandItemProps, CommandSeparatorProps, CommandShortcutProps } from './Command.types';
+
+export declare const Command: React.FC<CommandProps> & {
+    Input: React.FC<CommandInputProps>;
+    List: React.FC<CommandListProps>;
+    Empty: React.FC<CommandEmptyProps>;
+    Group: React.FC<CommandGroupProps>;
+    Item: React.FC<CommandItemProps>;
+    Separator: React.FC<CommandSeparatorProps>;
+    Shortcut: React.FC<CommandShortcutProps>;
+    Dialog: React.FC<CommandDialogProps>;
+};
+//# sourceMappingURL=Command.d.ts.map

package/dist/components/Command/Command.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.d.ts","sourceRoot":"","sources":["../../../src/components/Command/Command.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KASN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EACV,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AAwCzB,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,GAAG;IAC7C,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;IACnC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;IACjC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;IACnC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;IACnC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;IACjC,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAC3C,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC;IACzC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;CAoHtC,CAAC"}