@brycks/core-front 0.3.4 → 0.3.6

package/dist/components/form/Combobox/Combobox.js

@@ -1,70 +1,74 @@
-import { jsxs as m, jsx as o, Fragment as ye } from "react/jsx-runtime";
-import { forwardRef as he, useState as v, useRef as D, useMemo as V, useEffect as $, useCallback as I } from "react";
-import { createPortal as ve } from "react-dom";
-import { cx as ge } from "../../../utils/styles.js";
-import { durations as k, easings as w } from "../../../design-system/tokens/motion.js";
-import { iconSizes as j, componentPaddingX as L, componentHeights as B, componentGap as ke } from "../../../design-system/primitives/sizing.js";
-import { fontSizes as E } from "../../../design-system/tokens/typography.js";
-import { spacing as c } from "../../../design-system/tokens/spacing.js";
-const we = {
-  sm: { height: B.sm, fontSize: E.base - 1, padding: L.sm, iconSize: j.sm },
-  md: { height: B.md, fontSize: E.base, padding: L.md, iconSize: j.md },
-  lg: { height: B.lg, fontSize: E.md, padding: L.lg, iconSize: j.lg }
-}, xe = (x, f) => {
-  const d = f.toLowerCase();
-  return x.label.toLowerCase().includes(d) || x.value.toLowerCase().includes(d) || (x.description?.toLowerCase().includes(d) ?? !1);
+import { jsxs as v, jsx as o, Fragment as ke } from "react/jsx-runtime";
+import { forwardRef as we, useState as g, useRef as j, useMemo as X, useEffect as I, useCallback as L } from "react";
+import { createPortal as xe } from "react-dom";
+import { cx as Se } from "../../../utils/styles.js";
+import { useId as Ce } from "../../../hooks/useId.js";
+import { durations as w, easings as x } from "../../../design-system/tokens/motion.js";
+import { iconSizes as B, componentPaddingX as E, componentHeights as P, componentGap as $e } from "../../../design-system/primitives/sizing.js";
+import { fontSizes as R } from "../../../design-system/tokens/typography.js";
+import { spacing as d } from "../../../design-system/tokens/spacing.js";
+const ze = {
+  sm: { height: P.sm, fontSize: R.base - 1, padding: E.sm, iconSize: B.sm },
+  md: { height: P.md, fontSize: R.base, padding: E.md, iconSize: B.md },
+  lg: { height: P.lg, fontSize: R.md, padding: E.lg, iconSize: B.lg }
+}, Ie = (S, f) => {
+  const c = f.toLowerCase();
+  return S.label.toLowerCase().includes(c) || S.value.toLowerCase().includes(c) || (S.description?.toLowerCase().includes(c) ?? !1);
 };
-function Se() {
+function Le() {
   return /* @__PURE__ */ o("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ o("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
-function Ce() {
+function Ee() {
   return /* @__PURE__ */ o("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ o("path", { d: "M4 4l6 6M10 4l-6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
 }
-const ze = he(function({
+const Re = we(function({
   options: f,
-  value: d,
-  defaultValue: X = null,
-  onChange: P,
-  onInputChange: W,
-  placeholder: G = "Select or search...",
-  size: F = "md",
+  value: c,
+  defaultValue: G = null,
+  onChange: W,
+  onInputChange: F,
+  placeholder: U = "Select or search...",
+  size: T = "md",
   disabled: b = !1,
-  isInvalid: T = !1,
-  required: U = !1,
-  clearable: J = !0,
-  "aria-label": A,
-  "aria-labelledby": Q,
-  filterFn: Y = xe,
-  emptyText: Z = "No options found",
-  creatable: R = !1,
-  onCreate: M,
-  className: _,
-  testId: ee
-}, S) {
-  const [re, te] = v(X), [a, y] = v(""), [r, p] = v(!1), [n, s] = v(-1), [N, q] = v(!1), C = D(null), z = D(null), H = D(null), i = d !== void 0 ? d : re, h = we[F], l = V(
+  isInvalid: A = !1,
+  required: J = !1,
+  clearable: Q = !0,
+  "aria-label": Y,
+  "aria-labelledby": Z,
+  filterFn: N = Ie,
+  emptyText: _ = "No options found",
+  creatable: M = !1,
+  onCreate: O,
+  createLabel: ee = (m) => `Create "${m}"`,
+  clearLabel: re = "Clear selection",
+  listboxLabel: te = "Options",
+  className: oe,
+  testId: ne
+}, C) {
+  const m = Ce("combobox-listbox"), [ae, se] = g(G), [a, y] = g(""), [r, p] = g(!1), [n, s] = g(-1), [q, H] = g(!1), $ = j(null), z = j(null), K = j(null), i = c !== void 0 ? c : ae, h = ze[T], l = X(
     () => f.find((e) => e.value === i),
     [f, i]
-  ), u = V(() => a ? f.filter((e) => Y(e, a)) : f, [f, a, Y]);
-  $(() => {
+  ), u = X(() => a ? f.filter((e) => N(e, a)) : f, [f, a, N]);
+  I(() => {
     !r && l ? y(l.label) : !r && !i && y("");
   }, [r, l, i]);
-  const g = I(
+  const k = L(
     (e) => {
-      d === void 0 && te(e), P?.(e), p(!1), s(-1), z.current?.focus();
+      c === void 0 && se(e), W?.(e), p(!1), s(-1), z.current?.focus();
     },
-    [d, P]
-  ), oe = I(
+    [c, W]
+  ), ie = L(
     (e) => {
       const t = e.target.value;
-      y(t), W?.(t), r || p(!0), s(0);
+      y(t), F?.(t), r || p(!0), s(0);
     },
-    [r, W]
-  ), ne = I(
+    [r, F]
+  ), le = L(
     (e) => {
-      e.stopPropagation(), g(null), y(""), z.current?.focus();
+      e.stopPropagation(), k(null), y(""), z.current?.focus();
     },
-    [g]
-  ), ae = I(
+    [k]
+  ), de = L(
     (e) => {
       switch (e.key) {
         case "ArrowDown":
@@ -74,7 +78,7 @@ const ze = he(function({
           e.preventDefault(), r && s((t) => Math.max(t - 1, 0));
           break;
         case "Enter":
-          e.preventDefault(), r && n >= 0 && u[n] ? u[n].disabled || g(u[n].value) : R && a && u.length === 0 && M?.(a);
+          e.preventDefault(), r && n >= 0 && u[n] ? u[n].disabled || k(u[n].value) : M && a && u.length === 0 && O?.(a);
           break;
         case "Escape":
           e.preventDefault(), p(!1), s(-1), l && y(l.label);
@@ -84,25 +88,25 @@ const ze = he(function({
           break;
       }
     },
-    [r, n, u, g, R, a, M, l]
+    [r, n, u, k, M, a, O, l]
   );
-  $(() => {
+  I(() => {
     if (!r) return;
     const e = (t) => {
-      C.current?.contains(t.target) || (p(!1), s(-1), l && y(l.label));
+      $.current?.contains(t.target) || (p(!1), s(-1), l && y(l.label));
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [r, l]), $(() => {
+  }, [r, l]), I(() => {
     if (!r || n < 0) return;
-    H.current?.children[n]?.scrollIntoView({ block: "nearest" });
+    K.current?.children[n]?.scrollIntoView({ block: "nearest" });
   }, [r, n]);
-  const [O, se] = v({ top: 0, left: 0, width: 0 });
-  $(() => {
-    if (!r || !C.current) return;
+  const [D, ce] = g({ top: 0, left: 0, width: 0 });
+  I(() => {
+    if (!r || !$.current) return;
     const e = () => {
-      const t = C.current.getBoundingClientRect();
-      se({
-        top: t.bottom + window.scrollY + c[1],
+      const t = $.current.getBoundingClientRect();
+      ce({
+        top: t.bottom + window.scrollY + d[1],
         left: t.left + window.scrollX,
         width: t.width
       });
@@ -111,63 +115,63 @@ const ze = he(function({
       window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
     };
   }, [r]);
-  const ie = {
+  const ue = {
     position: "relative",
     display: "inline-flex",
     width: "100%"
-  }, le = {
+  }, fe = {
     position: "relative",
     display: "flex",
     alignItems: "center",
     width: "100%",
     height: h.height,
     backgroundColor: b ? "var(--brycks-background-muted)" : "var(--brycks-background-default)",
-    border: `1px solid ${T ? "var(--brycks-error-default)" : N ? "var(--brycks-primary-default)" : "var(--brycks-border-default)"}`,
+    border: `1px solid ${A ? "var(--brycks-error-default)" : q ? "var(--brycks-primary-default)" : "var(--brycks-border-default)"}`,
     borderRadius: "var(--brycks-radius-md)",
-    transition: `all ${k.fast}ms ${w.easeOut}`,
+    transition: `all ${w.fast}ms ${x.easeOut}`,
     cursor: b ? "not-allowed" : "text",
-    boxShadow: N ? "var(--brycks-focus-ring)" : void 0
-  }, ce = {
+    boxShadow: q ? "var(--brycks-focus-ring)" : void 0
+  }, be = {
     flex: 1,
     height: "100%",
     padding: `0 ${h.padding}px`,
-    paddingRight: c[10],
+    paddingRight: d[10],
     fontSize: h.fontSize,
     color: b ? "var(--brycks-foreground-disabled)" : "var(--brycks-foreground-default)",
     backgroundColor: "transparent",
     border: "none",
     outline: "none",
     cursor: b ? "not-allowed" : "text"
-  }, de = {
+  }, pe = {
     position: "absolute",
     right: h.padding,
     display: "flex",
     alignItems: "center",
-    gap: c[1],
+    gap: d[1],
     pointerEvents: "none"
-  }, ue = {
+  }, me = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    width: c[5],
-    height: c[5],
+    width: d[5],
+    height: d[5],
     color: "var(--brycks-foreground-muted)",
     cursor: "pointer",
     borderRadius: "var(--brycks-radius-sm)",
-    transition: `all ${k.fast}ms ${w.easeOut}`,
+    transition: `all ${w.fast}ms ${x.easeOut}`,
     pointerEvents: "auto"
-  }, fe = {
+  }, ye = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     color: "var(--brycks-foreground-muted)",
     transform: r ? "rotate(180deg)" : "rotate(0)",
-    transition: `transform ${k.fast}ms ${w.easeOut}`
-  }, be = {
+    transition: `transform ${w.fast}ms ${x.easeOut}`
+  }, he = {
     position: "absolute",
-    top: O.top,
-    left: O.left,
-    width: O.width,
+    top: D.top,
+    left: D.left,
+    width: D.width,
     maxHeight: 300,
     overflowY: "auto",
     backgroundColor: "var(--brycks-background-elevated)",
@@ -175,92 +179,92 @@ const ze = he(function({
     borderRadius: "var(--brycks-radius-lg)",
     boxShadow: "var(--brycks-shadow-lg)",
     zIndex: "var(--brycks-z-dropdown)",
-    padding: c[1],
-    animation: `brycks-dropdown-in ${k.quick}ms ${w.easeOut}`
-  }, K = (e, t, me) => ({
+    padding: d[1],
+    animation: `brycks-dropdown-in ${w.quick}ms ${x.easeOut}`
+  }, V = (e, t, ge) => ({
     display: "flex",
     alignItems: "center",
-    gap: ke.md,
-    padding: `${c[2]}px ${L.sm}px`,
+    gap: $e.md,
+    padding: `${d[2]}px ${E.sm}px`,
     fontSize: h.fontSize,
     color: t ? "var(--brycks-foreground-disabled)" : "var(--brycks-foreground-default)",
-    backgroundColor: e ? "var(--brycks-background-muted)" : me ? "var(--brycks-primary-50)" : "transparent",
+    backgroundColor: e ? "var(--brycks-background-muted)" : ge ? "var(--brycks-primary-muted)" : "transparent",
     borderRadius: "var(--brycks-radius-md)",
     cursor: t ? "not-allowed" : "pointer",
-    transition: `background-color ${k.fast}ms ${w.easeOut}`
-  }), pe = {
-    padding: `${c[4]}px ${c[3]}px`,
+    transition: `background-color ${w.fast}ms ${x.easeOut}`
+  }), ve = {
+    padding: `${d[4]}px ${d[3]}px`,
     fontSize: h.fontSize,
     color: "var(--brycks-foreground-muted)",
     textAlign: "center"
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ v(
     "div",
     {
-      ref: C,
-      className: ge("brycks-combobox", `brycks-combobox--${F}`, _),
-      style: ie,
-      "data-testid": ee,
+      ref: $,
+      className: Se("brycks-combobox", `brycks-combobox--${T}`, oe),
+      style: ue,
+      "data-testid": ne,
       children: [
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ v(
           "div",
           {
-            style: le,
+            style: fe,
             onClick: () => !b && z.current?.focus(),
             children: [
               /* @__PURE__ */ o(
                 "input",
                 {
                   ref: (e) => {
-                    z.current = e, typeof S == "function" ? S(e) : S && (S.current = e);
+                    z.current = e, typeof C == "function" ? C(e) : C && (C.current = e);
                   },
                   type: "text",
                   role: "combobox",
                   "aria-expanded": r,
                   "aria-haspopup": "listbox",
                   "aria-autocomplete": "list",
-                  "aria-controls": r ? "combobox-listbox" : void 0,
-                  "aria-activedescendant": r && n >= 0 ? `combobox-option-${n}` : void 0,
-                  "aria-invalid": T,
-                  "aria-required": U,
-                  "aria-label": A,
-                  "aria-labelledby": Q,
+                  "aria-controls": r ? m : void 0,
+                  "aria-activedescendant": r && n >= 0 ? `${m}-option-${n}` : void 0,
+                  "aria-invalid": A,
+                  "aria-required": J,
+                  "aria-label": Y,
+                  "aria-labelledby": Z,
                   value: a,
-                  placeholder: G,
+                  placeholder: U,
                   disabled: b,
-                  style: ce,
-                  onChange: oe,
-                  onKeyDown: ae,
+                  style: be,
+                  onChange: ie,
+                  onKeyDown: de,
                   onFocus: () => {
-                    q(!0), p(!0);
+                    H(!0), p(!0);
                   },
-                  onBlur: () => q(!1)
+                  onBlur: () => H(!1)
                 }
               ),
-              /* @__PURE__ */ m("div", { style: de, children: [
-                J && i && !b && /* @__PURE__ */ o(
+              /* @__PURE__ */ v("div", { style: pe, children: [
+                Q && i && !b && /* @__PURE__ */ o(
                   "button",
                   {
                     type: "button",
-                    "aria-label": "Clear selection",
-                    style: ue,
-                    onClick: ne,
+                    "aria-label": re,
+                    style: me,
+                    onClick: le,
                     onMouseEnter: (e) => {
                       e.currentTarget.style.backgroundColor = "var(--brycks-background-muted)", e.currentTarget.style.color = "var(--brycks-foreground-default)";
                     },
                     onMouseLeave: (e) => {
                       e.currentTarget.style.backgroundColor = "transparent", e.currentTarget.style.color = "var(--brycks-foreground-muted)";
                     },
-                    children: /* @__PURE__ */ o(Ce, {})
+                    children: /* @__PURE__ */ o(Ee, {})
                   }
                 ),
-                /* @__PURE__ */ o("span", { style: fe, children: /* @__PURE__ */ o(Se, {}) })
+                /* @__PURE__ */ o("span", { style: ye, children: /* @__PURE__ */ o(Le, {}) })
               ] })
             ]
           }
         ),
-        r && ve(
-          /* @__PURE__ */ m(ye, { children: [
+        r && xe(
+          /* @__PURE__ */ v(ke, { children: [
             /* @__PURE__ */ o("style", { children: `
                 @keyframes brycks-dropdown-in {
                   from { opacity: 0; transform: translateY(-4px); }
@@ -270,26 +274,26 @@ const ze = he(function({
             /* @__PURE__ */ o(
               "ul",
               {
-                ref: H,
-                id: "combobox-listbox",
+                ref: K,
+                id: m,
                 role: "listbox",
-                "aria-label": A || "Options",
-                style: be,
-                children: u.length > 0 ? u.map((e, t) => /* @__PURE__ */ m(
+                "aria-label": Y || te,
+                style: he,
+                children: u.length > 0 ? u.map((e, t) => /* @__PURE__ */ v(
                   "li",
                   {
-                    id: `combobox-option-${t}`,
+                    id: `${m}-option-${t}`,
                     role: "option",
                     "aria-selected": e.value === i,
                     "aria-disabled": e.disabled,
-                    style: K(t === n, !!e.disabled, e.value === i),
-                    onClick: () => !e.disabled && g(e.value),
+                    style: V(t === n, !!e.disabled, e.value === i),
+                    onClick: () => !e.disabled && k(e.value),
                     onMouseEnter: () => s(t),
                     children: [
                       e.icon && /* @__PURE__ */ o("span", { style: { flexShrink: 0 }, children: e.icon }),
-                      /* @__PURE__ */ m("div", { style: { flex: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ v("div", { style: { flex: 1, minWidth: 0 }, children: [
                         /* @__PURE__ */ o("div", { style: { fontWeight: e.value === i ? 500 : 400 }, children: e.label }),
-                        e.description && /* @__PURE__ */ o("div", { style: { fontSize: E.sm, color: "var(--brycks-foreground-muted)" }, children: e.description })
+                        e.description && /* @__PURE__ */ o("div", { style: { fontSize: R.sm, color: "var(--brycks-foreground-muted)" }, children: e.description })
                       ] }),
                       e.value === i && /* @__PURE__ */ o("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ o(
                         "path",
@@ -304,24 +308,20 @@ const ze = he(function({
                     ]
                   },
                   e.value
-                )) : /* @__PURE__ */ o("li", { style: pe, children: R && a ? /* @__PURE__ */ m(
+                )) : /* @__PURE__ */ o("li", { style: ve, children: M && a ? /* @__PURE__ */ o(
                   "button",
                   {
                     type: "button",
                     style: {
-                      ...K(!0, !1, !1),
+                      ...V(!0, !1, !1),
                       width: "100%",
                       border: "none",
                       cursor: "pointer"
                     },
-                    onClick: () => M?.(a),
-                    children: [
-                      'Create "',
-                      a,
-                      '"'
-                    ]
+                    onClick: () => O?.(a),
+                    children: ee(a)
                   }
-                ) : Z })
+                ) : _ })
               }
             )
           ] }),
@@ -331,8 +331,8 @@ const ze = he(function({
     }
   );
 });
-ze.displayName = "Combobox";
+Re.displayName = "Combobox";
 export {
-  ze as Combobox
+  Re as Combobox
 };
 //# sourceMappingURL=Combobox.js.map

package/dist/components/form/Combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../../src/components/form/Combobox/Combobox.tsx"],"sourcesContent":["/**\n * Combobox Component\n *\n * A searchable select/autocomplete component with keyboard navigation.\n * Combines the functionality of Input with dropdown selection.\n *\n * @module components/form/Combobox\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  useMemo,\n  type CSSProperties,\n  type ReactNode,\n  type KeyboardEvent,\n  type ChangeEvent,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport {\n  componentHeights,\n  componentPaddingX,\n  componentGap,\n  iconSizes,\n} from '../../../design-system/primitives'\n\nexport type ComboboxSize = 'sm' | 'md' | 'lg'\n\nexport interface ComboboxOption {\n  /** Unique identifier for the option */\n  value: string\n  /** Display label */\n  label: string\n  /** Optional description */\n  description?: string\n  /** Optional icon */\n  icon?: ReactNode\n  /** Whether the option is disabled */\n  disabled?: boolean\n}\n\nexport interface ComboboxProps {\n  /** Available options */\n  options: ComboboxOption[]\n  /** Currently selected value (controlled) */\n  value?: string | null\n  /** Default selected value (uncontrolled) */\n  defaultValue?: string | null\n  /** Callback when selection changes */\n  onChange?: (value: string | null) => void\n  /** Callback when input value changes */\n  onInputChange?: (value: string) => void\n  /** Placeholder text */\n  placeholder?: string\n  /** Component size */\n  size?: ComboboxSize\n  /** Whether the combobox is disabled */\n  disabled?: boolean\n  /** Whether the combobox is invalid */\n  isInvalid?: boolean\n  /** Whether the combobox is required */\n  required?: boolean\n  /** Whether to allow clearing the selection */\n  clearable?: boolean\n  /** Label for accessibility */\n  'aria-label'?: string\n  /** ID of element that labels this combobox */\n  'aria-labelledby'?: string\n  /** Custom filter function */\n  filterFn?: (option: ComboboxOption, inputValue: string) => boolean\n  /** Text to show when no options match */\n  emptyText?: string\n  /** Whether to allow creating new options */\n  creatable?: boolean\n  /** Callback when creating new option */\n  onCreate?: (inputValue: string) => void\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<ComboboxSize, { height: number; fontSize: number; padding: number; iconSize: number }> = {\n  sm: { height: componentHeights.sm, fontSize: fontSizes.base - 1, padding: componentPaddingX.sm, iconSize: iconSizes.sm },\n  md: { height: componentHeights.md, fontSize: fontSizes.base, padding: componentPaddingX.md, iconSize: iconSizes.md },\n  lg: { height: componentHeights.lg, fontSize: fontSizes.md, padding: componentPaddingX.lg, iconSize: iconSizes.lg },\n}\n\nconst defaultFilterFn = (option: ComboboxOption, inputValue: string): boolean => {\n  const search = inputValue.toLowerCase()\n  return (\n    option.label.toLowerCase().includes(search) ||\n    option.value.toLowerCase().includes(search) ||\n    (option.description?.toLowerCase().includes(search) ?? false)\n  )\n}\n\nfunction ChevronDownIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M4 6l4 4 4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nfunction ClearIcon() {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n\nexport const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(function Combobox(\n  {\n    options,\n    value: controlledValue,\n    defaultValue = null,\n    onChange,\n    onInputChange,\n    placeholder = 'Select or search...',\n    size = 'md',\n    disabled = false,\n    isInvalid = false,\n    required = false,\n    clearable = true,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    filterFn = defaultFilterFn,\n    emptyText = 'No options found',\n    creatable = false,\n    onCreate,\n    className,\n    testId,\n  },\n  ref\n) {\n  const [internalValue, setInternalValue] = useState(defaultValue)\n  const [inputValue, setInputValue] = useState('')\n  const [isOpen, setIsOpen] = useState(false)\n  const [activeIndex, setActiveIndex] = useState(-1)\n  const [isFocused, setIsFocused] = useState(false)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const listRef = useRef<HTMLUListElement>(null)\n\n  const value = controlledValue !== undefined ? controlledValue : internalValue\n  const config = sizeConfig[size]\n\n  // Get selected option\n  const selectedOption = useMemo(\n    () => options.find((opt) => opt.value === value),\n    [options, value]\n  )\n\n  // Filter options based on input\n  const filteredOptions = useMemo(() => {\n    if (!inputValue) return options\n    return options.filter((opt) => filterFn(opt, inputValue))\n  }, [options, inputValue, filterFn])\n\n  // Sync input with selected value\n  useEffect(() => {\n    if (!isOpen && selectedOption) {\n      setInputValue(selectedOption.label)\n    } else if (!isOpen && !value) {\n      setInputValue('')\n    }\n  }, [isOpen, selectedOption, value])\n\n  const handleSelect = useCallback(\n    (optionValue: string | null) => {\n      if (controlledValue === undefined) {\n        setInternalValue(optionValue)\n      }\n      onChange?.(optionValue)\n      setIsOpen(false)\n      setActiveIndex(-1)\n      inputRef.current?.focus()\n    },\n    [controlledValue, onChange]\n  )\n\n  const handleInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value\n      setInputValue(newValue)\n      onInputChange?.(newValue)\n      if (!isOpen) setIsOpen(true)\n      setActiveIndex(0)\n    },\n    [isOpen, onInputChange]\n  )\n\n  const handleClear = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation()\n      handleSelect(null)\n      setInputValue('')\n      inputRef.current?.focus()\n    },\n    [handleSelect]\n  )\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault()\n          if (!isOpen) {\n            setIsOpen(true)\n            setActiveIndex(0)\n          } else {\n            setActiveIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1))\n          }\n          break\n        case 'ArrowUp':\n          e.preventDefault()\n          if (isOpen) {\n            setActiveIndex((prev) => Math.max(prev - 1, 0))\n          }\n          break\n        case 'Enter':\n          e.preventDefault()\n          if (isOpen && activeIndex >= 0 && filteredOptions[activeIndex]) {\n            if (!filteredOptions[activeIndex].disabled) {\n              handleSelect(filteredOptions[activeIndex].value)\n            }\n          } else if (creatable && inputValue && filteredOptions.length === 0) {\n            onCreate?.(inputValue)\n          }\n          break\n        case 'Escape':\n          e.preventDefault()\n          setIsOpen(false)\n          setActiveIndex(-1)\n          if (selectedOption) {\n            setInputValue(selectedOption.label)\n          }\n          break\n        case 'Tab':\n          if (isOpen) {\n            setIsOpen(false)\n            setActiveIndex(-1)\n          }\n          break\n      }\n    },\n    [isOpen, activeIndex, filteredOptions, handleSelect, creatable, inputValue, onCreate, selectedOption]\n  )\n\n  // Close on outside click\n  useEffect(() => {\n    if (!isOpen) return\n\n    const handleClick = (e: MouseEvent) => {\n      if (!containerRef.current?.contains(e.target as Node)) {\n        setIsOpen(false)\n        setActiveIndex(-1)\n        if (selectedOption) {\n          setInputValue(selectedOption.label)\n        }\n      }\n    }\n\n    document.addEventListener('mousedown', handleClick)\n    return () => document.removeEventListener('mousedown', handleClick)\n  }, [isOpen, selectedOption])\n\n  // Scroll active option into view\n  useEffect(() => {\n    if (!isOpen || activeIndex < 0) return\n    const list = listRef.current\n    const activeItem = list?.children[activeIndex] as HTMLElement | undefined\n    activeItem?.scrollIntoView({ block: 'nearest' })\n  }, [isOpen, activeIndex])\n\n  // Calculate dropdown position\n  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 })\n\n  useEffect(() => {\n    if (!isOpen || !containerRef.current) return\n\n    const updatePosition = () => {\n      const rect = containerRef.current!.getBoundingClientRect()\n      setDropdownPosition({\n        top: rect.bottom + window.scrollY + spacing[1],\n        left: rect.left + window.scrollX,\n        width: rect.width,\n      })\n    }\n\n    updatePosition()\n    window.addEventListener('resize', updatePosition)\n    window.addEventListener('scroll', updatePosition, true)\n\n    return () => {\n      window.removeEventListener('resize', updatePosition)\n      window.removeEventListener('scroll', updatePosition, true)\n    }\n  }, [isOpen])\n\n  const containerStyle: CSSProperties = {\n    position: 'relative',\n    display: 'inline-flex',\n    width: '100%',\n  }\n\n  const inputWrapperStyle: CSSProperties = {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n    height: config.height,\n    backgroundColor: disabled ? 'var(--brycks-background-muted)' : 'var(--brycks-background-default)',\n    border: `1px solid ${\n      isInvalid\n        ? 'var(--brycks-error-default)'\n        : isFocused\n        ? 'var(--brycks-primary-default)'\n        : 'var(--brycks-border-default)'\n    }`,\n    borderRadius: 'var(--brycks-radius-md)',\n    transition: `all ${durations.fast}ms ${easings.easeOut}`,\n    cursor: disabled ? 'not-allowed' : 'text',\n    boxShadow: isFocused ? 'var(--brycks-focus-ring)' : undefined,\n  }\n\n  const inputStyle: CSSProperties = {\n    flex: 1,\n    height: '100%',\n    padding: `0 ${config.padding}px`,\n    paddingRight: spacing[10],\n    fontSize: config.fontSize,\n    color: disabled ? 'var(--brycks-foreground-disabled)' : 'var(--brycks-foreground-default)',\n    backgroundColor: 'transparent',\n    border: 'none',\n    outline: 'none',\n    cursor: disabled ? 'not-allowed' : 'text',\n  }\n\n  const iconsStyle: CSSProperties = {\n    position: 'absolute',\n    right: config.padding,\n    display: 'flex',\n    alignItems: 'center',\n    gap: spacing[1],\n    pointerEvents: 'none',\n  }\n\n  const clearButtonStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: spacing[5],\n    height: spacing[5],\n    color: 'var(--brycks-foreground-muted)',\n    cursor: 'pointer',\n    borderRadius: 'var(--brycks-radius-sm)',\n    transition: `all ${durations.fast}ms ${easings.easeOut}`,\n    pointerEvents: 'auto',\n  }\n\n  const chevronStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    color: 'var(--brycks-foreground-muted)',\n    transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',\n    transition: `transform ${durations.fast}ms ${easings.easeOut}`,\n  }\n\n  const dropdownStyle: CSSProperties = {\n    position: 'absolute',\n    top: dropdownPosition.top,\n    left: dropdownPosition.left,\n    width: dropdownPosition.width,\n    maxHeight: 300,\n    overflowY: 'auto',\n    backgroundColor: 'var(--brycks-background-elevated)',\n    border: '1px solid var(--brycks-border-default)',\n    borderRadius: 'var(--brycks-radius-lg)',\n    boxShadow: 'var(--brycks-shadow-lg)',\n    zIndex: 'var(--brycks-z-dropdown)' as unknown as number,\n    padding: spacing[1],\n    animation: `brycks-dropdown-in ${durations.quick}ms ${easings.easeOut}`,\n  }\n\n  const optionStyle = (isActive: boolean, isDisabled: boolean, isSelected: boolean): CSSProperties => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: componentGap.md,\n    padding: `${spacing[2]}px ${componentPaddingX.sm}px`,\n    fontSize: config.fontSize,\n    color: isDisabled\n      ? 'var(--brycks-foreground-disabled)'\n      : 'var(--brycks-foreground-default)',\n    backgroundColor: isActive\n      ? 'var(--brycks-background-muted)'\n      : isSelected\n      ? 'var(--brycks-primary-50)'\n      : 'transparent',\n    borderRadius: 'var(--brycks-radius-md)',\n    cursor: isDisabled ? 'not-allowed' : 'pointer',\n    transition: `background-color ${durations.fast}ms ${easings.easeOut}`,\n  })\n\n  const emptyStyle: CSSProperties = {\n    padding: `${spacing[4]}px ${spacing[3]}px`,\n    fontSize: config.fontSize,\n    color: 'var(--brycks-foreground-muted)',\n    textAlign: 'center',\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      className={cx('brycks-combobox', `brycks-combobox--${size}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n    >\n      <div\n        style={inputWrapperStyle}\n        onClick={() => !disabled && inputRef.current?.focus()}\n      >\n        <input\n          ref={(node) => {\n            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n            if (typeof ref === 'function') ref(node)\n            else if (ref) ref.current = node\n          }}\n          type=\"text\"\n          role=\"combobox\"\n          aria-expanded={isOpen}\n          aria-haspopup=\"listbox\"\n          aria-autocomplete=\"list\"\n          aria-controls={isOpen ? 'combobox-listbox' : undefined}\n          aria-activedescendant={isOpen && activeIndex >= 0 ? `combobox-option-${activeIndex}` : undefined}\n          aria-invalid={isInvalid}\n          aria-required={required}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          value={inputValue}\n          placeholder={placeholder}\n          disabled={disabled}\n          style={inputStyle}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={() => {\n            setIsFocused(true)\n            setIsOpen(true)\n          }}\n          onBlur={() => setIsFocused(false)}\n        />\n        <div style={iconsStyle}>\n          {clearable && value && !disabled && (\n            <button\n              type=\"button\"\n              aria-label=\"Clear selection\"\n              style={clearButtonStyle}\n              onClick={handleClear}\n              onMouseEnter={(e) => {\n                e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n                e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n              }}\n              onMouseLeave={(e) => {\n                e.currentTarget.style.backgroundColor = 'transparent'\n                e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\n              }}\n            >\n              <ClearIcon />\n            </button>\n          )}\n          <span style={chevronStyle}>\n            <ChevronDownIcon />\n          </span>\n        </div>\n      </div>\n\n      {isOpen &&\n        createPortal(\n          <>\n            <style>\n              {`\n                @keyframes brycks-dropdown-in {\n                  from { opacity: 0; transform: translateY(-4px); }\n                  to { opacity: 1; transform: translateY(0); }\n                }\n              `}\n            </style>\n            <ul\n              ref={listRef}\n              id=\"combobox-listbox\"\n              role=\"listbox\"\n              aria-label={ariaLabel || 'Options'}\n              style={dropdownStyle}\n            >\n              {filteredOptions.length > 0 ? (\n                filteredOptions.map((option, index) => (\n                  <li\n                    key={option.value}\n                    id={`combobox-option-${index}`}\n                    role=\"option\"\n                    aria-selected={option.value === value}\n                    aria-disabled={option.disabled}\n                    style={optionStyle(index === activeIndex, !!option.disabled, option.value === value)}\n                    onClick={() => !option.disabled && handleSelect(option.value)}\n                    onMouseEnter={() => setActiveIndex(index)}\n                  >\n                    {option.icon && <span style={{ flexShrink: 0 }}>{option.icon}</span>}\n                    <div style={{ flex: 1, minWidth: 0 }}>\n                      <div style={{ fontWeight: option.value === value ? 500 : 400 }}>{option.label}</div>\n                      {option.description && (\n                        <div style={{ fontSize: fontSizes.sm, color: 'var(--brycks-foreground-muted)' }}>\n                          {option.description}\n                        </div>\n                      )}\n                    </div>\n                    {option.value === value && (\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" style={{ flexShrink: 0 }}>\n                        <path\n                          d=\"M3 8l3 3 7-7\"\n                          stroke=\"var(--brycks-primary-default)\"\n                          strokeWidth=\"2\"\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                        />\n                      </svg>\n                    )}\n                  </li>\n                ))\n              ) : (\n                <li style={emptyStyle}>\n                  {creatable && inputValue ? (\n                    <button\n                      type=\"button\"\n                      style={{\n                        ...optionStyle(true, false, false),\n                        width: '100%',\n                        border: 'none',\n                        cursor: 'pointer',\n                      }}\n                      onClick={() => onCreate?.(inputValue)}\n                    >\n                      Create \"{inputValue}\"\n                    </button>\n                  ) : (\n                    emptyText\n                  )}\n                </li>\n              )}\n            </ul>\n          </>,\n          document.body\n        )}\n    </div>\n  )\n})\n\nCombobox.displayName = 'Combobox'\n"],"names":["sizeConfig","componentHeights","fontSizes","componentPaddingX","iconSizes","defaultFilterFn","option","inputValue","search","ChevronDownIcon","jsx","ClearIcon","Combobox","forwardRef","options","controlledValue","defaultValue","onChange","onInputChange","placeholder","size","disabled","isInvalid","required","clearable","ariaLabel","ariaLabelledby","filterFn","emptyText","creatable","onCreate","className","testId","ref","internalValue","setInternalValue","useState","setInputValue","isOpen","setIsOpen","activeIndex","setActiveIndex","isFocused","setIsFocused","containerRef","useRef","inputRef","listRef","value","config","selectedOption","useMemo","opt","filteredOptions","useEffect","handleSelect","useCallback","optionValue","handleInputChange","newValue","handleClear","handleKeyDown","prev","handleClick","e","dropdownPosition","setDropdownPosition","updatePosition","rect","spacing","containerStyle","inputWrapperStyle","durations","easings","inputStyle","iconsStyle","clearButtonStyle","chevronStyle","dropdownStyle","optionStyle","isActive","isDisabled","isSelected","componentGap","emptyStyle","jsxs","cx","node","createPortal","Fragment","index"],"mappings":"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"}
+{"version":3,"file":"Combobox.js","sources":["../../../../src/components/form/Combobox/Combobox.tsx"],"sourcesContent":["/**\n * Combobox Component\n *\n * A searchable select/autocomplete component with keyboard navigation.\n * Combines the functionality of Input with dropdown selection.\n *\n * @module components/form/Combobox\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  useMemo,\n  type CSSProperties,\n  type ReactNode,\n  type KeyboardEvent,\n  type ChangeEvent,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { useId } from '../../../hooks/useId'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport {\n  componentHeights,\n  componentPaddingX,\n  componentGap,\n  iconSizes,\n} from '../../../design-system/primitives'\n\nexport type ComboboxSize = 'sm' | 'md' | 'lg'\n\nexport interface ComboboxOption {\n  /** Unique identifier for the option */\n  value: string\n  /** Display label */\n  label: string\n  /** Optional description */\n  description?: string\n  /** Optional icon */\n  icon?: ReactNode\n  /** Whether the option is disabled */\n  disabled?: boolean\n}\n\nexport interface ComboboxProps {\n  /** Available options */\n  options: ComboboxOption[]\n  /** Currently selected value (controlled) */\n  value?: string | null\n  /** Default selected value (uncontrolled) */\n  defaultValue?: string | null\n  /** Callback when selection changes */\n  onChange?: (value: string | null) => void\n  /** Callback when input value changes */\n  onInputChange?: (value: string) => void\n  /** Placeholder text */\n  placeholder?: string\n  /** Component size */\n  size?: ComboboxSize\n  /** Whether the combobox is disabled */\n  disabled?: boolean\n  /** Whether the combobox is invalid */\n  isInvalid?: boolean\n  /** Whether the combobox is required */\n  required?: boolean\n  /** Whether to allow clearing the selection */\n  clearable?: boolean\n  /** Label for accessibility */\n  'aria-label'?: string\n  /** ID of element that labels this combobox */\n  'aria-labelledby'?: string\n  /** Custom filter function */\n  filterFn?: (option: ComboboxOption, inputValue: string) => boolean\n  /** Text to show when no options match */\n  emptyText?: string\n  /** Whether to allow creating new options */\n  creatable?: boolean\n  /** Callback when creating new option */\n  onCreate?: (inputValue: string) => void\n  /** Label of the create-option button */\n  createLabel?: (inputValue: string) => ReactNode\n  /** Accessible label of the clear button */\n  clearLabel?: string\n  /** Accessible label of the options listbox (when no aria-label is given) */\n  listboxLabel?: string\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<ComboboxSize, { height: number; fontSize: number; padding: number; iconSize: number }> = {\n  sm: { height: componentHeights.sm, fontSize: fontSizes.base - 1, padding: componentPaddingX.sm, iconSize: iconSizes.sm },\n  md: { height: componentHeights.md, fontSize: fontSizes.base, padding: componentPaddingX.md, iconSize: iconSizes.md },\n  lg: { height: componentHeights.lg, fontSize: fontSizes.md, padding: componentPaddingX.lg, iconSize: iconSizes.lg },\n}\n\nconst defaultFilterFn = (option: ComboboxOption, inputValue: string): boolean => {\n  const search = inputValue.toLowerCase()\n  return (\n    option.label.toLowerCase().includes(search) ||\n    option.value.toLowerCase().includes(search) ||\n    (option.description?.toLowerCase().includes(search) ?? false)\n  )\n}\n\nfunction ChevronDownIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M4 6l4 4 4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nfunction ClearIcon() {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n\nexport const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(function Combobox(\n  {\n    options,\n    value: controlledValue,\n    defaultValue = null,\n    onChange,\n    onInputChange,\n    placeholder = 'Select or search...',\n    size = 'md',\n    disabled = false,\n    isInvalid = false,\n    required = false,\n    clearable = true,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    filterFn = defaultFilterFn,\n    emptyText = 'No options found',\n    creatable = false,\n    onCreate,\n    createLabel = (input) => `Create \"${input}\"`,\n    clearLabel = 'Clear selection',\n    listboxLabel = 'Options',\n    className,\n    testId,\n  },\n  ref\n) {\n  const listboxId = useId('combobox-listbox')\n  const [internalValue, setInternalValue] = useState(defaultValue)\n  const [inputValue, setInputValue] = useState('')\n  const [isOpen, setIsOpen] = useState(false)\n  const [activeIndex, setActiveIndex] = useState(-1)\n  const [isFocused, setIsFocused] = useState(false)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const listRef = useRef<HTMLUListElement>(null)\n\n  const value = controlledValue !== undefined ? controlledValue : internalValue\n  const config = sizeConfig[size]\n\n  // Get selected option\n  const selectedOption = useMemo(\n    () => options.find((opt) => opt.value === value),\n    [options, value]\n  )\n\n  // Filter options based on input\n  const filteredOptions = useMemo(() => {\n    if (!inputValue) return options\n    return options.filter((opt) => filterFn(opt, inputValue))\n  }, [options, inputValue, filterFn])\n\n  // Sync input with selected value\n  useEffect(() => {\n    if (!isOpen && selectedOption) {\n      setInputValue(selectedOption.label)\n    } else if (!isOpen && !value) {\n      setInputValue('')\n    }\n  }, [isOpen, selectedOption, value])\n\n  const handleSelect = useCallback(\n    (optionValue: string | null) => {\n      if (controlledValue === undefined) {\n        setInternalValue(optionValue)\n      }\n      onChange?.(optionValue)\n      setIsOpen(false)\n      setActiveIndex(-1)\n      inputRef.current?.focus()\n    },\n    [controlledValue, onChange]\n  )\n\n  const handleInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value\n      setInputValue(newValue)\n      onInputChange?.(newValue)\n      if (!isOpen) setIsOpen(true)\n      setActiveIndex(0)\n    },\n    [isOpen, onInputChange]\n  )\n\n  const handleClear = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation()\n      handleSelect(null)\n      setInputValue('')\n      inputRef.current?.focus()\n    },\n    [handleSelect]\n  )\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault()\n          if (!isOpen) {\n            setIsOpen(true)\n            setActiveIndex(0)\n          } else {\n            setActiveIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1))\n          }\n          break\n        case 'ArrowUp':\n          e.preventDefault()\n          if (isOpen) {\n            setActiveIndex((prev) => Math.max(prev - 1, 0))\n          }\n          break\n        case 'Enter':\n          e.preventDefault()\n          if (isOpen && activeIndex >= 0 && filteredOptions[activeIndex]) {\n            if (!filteredOptions[activeIndex].disabled) {\n              handleSelect(filteredOptions[activeIndex].value)\n            }\n          } else if (creatable && inputValue && filteredOptions.length === 0) {\n            onCreate?.(inputValue)\n          }\n          break\n        case 'Escape':\n          e.preventDefault()\n          setIsOpen(false)\n          setActiveIndex(-1)\n          if (selectedOption) {\n            setInputValue(selectedOption.label)\n          }\n          break\n        case 'Tab':\n          if (isOpen) {\n            setIsOpen(false)\n            setActiveIndex(-1)\n          }\n          break\n      }\n    },\n    [isOpen, activeIndex, filteredOptions, handleSelect, creatable, inputValue, onCreate, selectedOption]\n  )\n\n  // Close on outside click\n  useEffect(() => {\n    if (!isOpen) return\n\n    const handleClick = (e: MouseEvent) => {\n      if (!containerRef.current?.contains(e.target as Node)) {\n        setIsOpen(false)\n        setActiveIndex(-1)\n        if (selectedOption) {\n          setInputValue(selectedOption.label)\n        }\n      }\n    }\n\n    document.addEventListener('mousedown', handleClick)\n    return () => document.removeEventListener('mousedown', handleClick)\n  }, [isOpen, selectedOption])\n\n  // Scroll active option into view\n  useEffect(() => {\n    if (!isOpen || activeIndex < 0) return\n    const list = listRef.current\n    const activeItem = list?.children[activeIndex] as HTMLElement | undefined\n    activeItem?.scrollIntoView({ block: 'nearest' })\n  }, [isOpen, activeIndex])\n\n  // Calculate dropdown position\n  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 })\n\n  useEffect(() => {\n    if (!isOpen || !containerRef.current) return\n\n    const updatePosition = () => {\n      const rect = containerRef.current!.getBoundingClientRect()\n      setDropdownPosition({\n        top: rect.bottom + window.scrollY + spacing[1],\n        left: rect.left + window.scrollX,\n        width: rect.width,\n      })\n    }\n\n    updatePosition()\n    window.addEventListener('resize', updatePosition)\n    window.addEventListener('scroll', updatePosition, true)\n\n    return () => {\n      window.removeEventListener('resize', updatePosition)\n      window.removeEventListener('scroll', updatePosition, true)\n    }\n  }, [isOpen])\n\n  const containerStyle: CSSProperties = {\n    position: 'relative',\n    display: 'inline-flex',\n    width: '100%',\n  }\n\n  const inputWrapperStyle: CSSProperties = {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n    height: config.height,\n    backgroundColor: disabled ? 'var(--brycks-background-muted)' : 'var(--brycks-background-default)',\n    border: `1px solid ${\n      isInvalid\n        ? 'var(--brycks-error-default)'\n        : isFocused\n        ? 'var(--brycks-primary-default)'\n        : 'var(--brycks-border-default)'\n    }`,\n    borderRadius: 'var(--brycks-radius-md)',\n    transition: `all ${durations.fast}ms ${easings.easeOut}`,\n    cursor: disabled ? 'not-allowed' : 'text',\n    boxShadow: isFocused ? 'var(--brycks-focus-ring)' : undefined,\n  }\n\n  const inputStyle: CSSProperties = {\n    flex: 1,\n    height: '100%',\n    padding: `0 ${config.padding}px`,\n    paddingRight: spacing[10],\n    fontSize: config.fontSize,\n    color: disabled ? 'var(--brycks-foreground-disabled)' : 'var(--brycks-foreground-default)',\n    backgroundColor: 'transparent',\n    border: 'none',\n    outline: 'none',\n    cursor: disabled ? 'not-allowed' : 'text',\n  }\n\n  const iconsStyle: CSSProperties = {\n    position: 'absolute',\n    right: config.padding,\n    display: 'flex',\n    alignItems: 'center',\n    gap: spacing[1],\n    pointerEvents: 'none',\n  }\n\n  const clearButtonStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: spacing[5],\n    height: spacing[5],\n    color: 'var(--brycks-foreground-muted)',\n    cursor: 'pointer',\n    borderRadius: 'var(--brycks-radius-sm)',\n    transition: `all ${durations.fast}ms ${easings.easeOut}`,\n    pointerEvents: 'auto',\n  }\n\n  const chevronStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    color: 'var(--brycks-foreground-muted)',\n    transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',\n    transition: `transform ${durations.fast}ms ${easings.easeOut}`,\n  }\n\n  const dropdownStyle: CSSProperties = {\n    position: 'absolute',\n    top: dropdownPosition.top,\n    left: dropdownPosition.left,\n    width: dropdownPosition.width,\n    maxHeight: 300,\n    overflowY: 'auto',\n    backgroundColor: 'var(--brycks-background-elevated)',\n    border: '1px solid var(--brycks-border-default)',\n    borderRadius: 'var(--brycks-radius-lg)',\n    boxShadow: 'var(--brycks-shadow-lg)',\n    zIndex: 'var(--brycks-z-dropdown)' as unknown as number,\n    padding: spacing[1],\n    animation: `brycks-dropdown-in ${durations.quick}ms ${easings.easeOut}`,\n  }\n\n  const optionStyle = (isActive: boolean, isDisabled: boolean, isSelected: boolean): CSSProperties => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: componentGap.md,\n    padding: `${spacing[2]}px ${componentPaddingX.sm}px`,\n    fontSize: config.fontSize,\n    color: isDisabled\n      ? 'var(--brycks-foreground-disabled)'\n      : 'var(--brycks-foreground-default)',\n    backgroundColor: isActive\n      ? 'var(--brycks-background-muted)'\n      : isSelected\n      ? 'var(--brycks-primary-muted)'\n      : 'transparent',\n    borderRadius: 'var(--brycks-radius-md)',\n    cursor: isDisabled ? 'not-allowed' : 'pointer',\n    transition: `background-color ${durations.fast}ms ${easings.easeOut}`,\n  })\n\n  const emptyStyle: CSSProperties = {\n    padding: `${spacing[4]}px ${spacing[3]}px`,\n    fontSize: config.fontSize,\n    color: 'var(--brycks-foreground-muted)',\n    textAlign: 'center',\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      className={cx('brycks-combobox', `brycks-combobox--${size}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n    >\n      <div\n        style={inputWrapperStyle}\n        onClick={() => !disabled && inputRef.current?.focus()}\n      >\n        <input\n          ref={(node) => {\n            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n            if (typeof ref === 'function') ref(node)\n            else if (ref) ref.current = node\n          }}\n          type=\"text\"\n          role=\"combobox\"\n          aria-expanded={isOpen}\n          aria-haspopup=\"listbox\"\n          aria-autocomplete=\"list\"\n          aria-controls={isOpen ? listboxId : undefined}\n          aria-activedescendant={isOpen && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined}\n          aria-invalid={isInvalid}\n          aria-required={required}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          value={inputValue}\n          placeholder={placeholder}\n          disabled={disabled}\n          style={inputStyle}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={() => {\n            setIsFocused(true)\n            setIsOpen(true)\n          }}\n          onBlur={() => setIsFocused(false)}\n        />\n        <div style={iconsStyle}>\n          {clearable && value && !disabled && (\n            <button\n              type=\"button\"\n              aria-label={clearLabel}\n              style={clearButtonStyle}\n              onClick={handleClear}\n              onMouseEnter={(e) => {\n                e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n                e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n              }}\n              onMouseLeave={(e) => {\n                e.currentTarget.style.backgroundColor = 'transparent'\n                e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\n              }}\n            >\n              <ClearIcon />\n            </button>\n          )}\n          <span style={chevronStyle}>\n            <ChevronDownIcon />\n          </span>\n        </div>\n      </div>\n\n      {isOpen &&\n        createPortal(\n          <>\n            <style>\n              {`\n                @keyframes brycks-dropdown-in {\n                  from { opacity: 0; transform: translateY(-4px); }\n                  to { opacity: 1; transform: translateY(0); }\n                }\n              `}\n            </style>\n            <ul\n              ref={listRef}\n              id={listboxId}\n              role=\"listbox\"\n              aria-label={ariaLabel || listboxLabel}\n              style={dropdownStyle}\n            >\n              {filteredOptions.length > 0 ? (\n                filteredOptions.map((option, index) => (\n                  <li\n                    key={option.value}\n                    id={`${listboxId}-option-${index}`}\n                    role=\"option\"\n                    aria-selected={option.value === value}\n                    aria-disabled={option.disabled}\n                    style={optionStyle(index === activeIndex, !!option.disabled, option.value === value)}\n                    onClick={() => !option.disabled && handleSelect(option.value)}\n                    onMouseEnter={() => setActiveIndex(index)}\n                  >\n                    {option.icon && <span style={{ flexShrink: 0 }}>{option.icon}</span>}\n                    <div style={{ flex: 1, minWidth: 0 }}>\n                      <div style={{ fontWeight: option.value === value ? 500 : 400 }}>{option.label}</div>\n                      {option.description && (\n                        <div style={{ fontSize: fontSizes.sm, color: 'var(--brycks-foreground-muted)' }}>\n                          {option.description}\n                        </div>\n                      )}\n                    </div>\n                    {option.value === value && (\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" style={{ flexShrink: 0 }}>\n                        <path\n                          d=\"M3 8l3 3 7-7\"\n                          stroke=\"var(--brycks-primary-default)\"\n                          strokeWidth=\"2\"\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                        />\n                      </svg>\n                    )}\n                  </li>\n                ))\n              ) : (\n                <li style={emptyStyle}>\n                  {creatable && inputValue ? (\n                    <button\n                      type=\"button\"\n                      style={{\n                        ...optionStyle(true, false, false),\n                        width: '100%',\n                        border: 'none',\n                        cursor: 'pointer',\n                      }}\n                      onClick={() => onCreate?.(inputValue)}\n                    >\n                      {createLabel(inputValue)}\n                    </button>\n                  ) : (\n                    emptyText\n                  )}\n                </li>\n              )}\n            </ul>\n          </>,\n          document.body\n        )}\n    </div>\n  )\n})\n\nCombobox.displayName = 'Combobox'\n"],"names":["sizeConfig","componentHeights","fontSizes","componentPaddingX","iconSizes","defaultFilterFn","option","inputValue","search","ChevronDownIcon","jsx","ClearIcon","Combobox","forwardRef","options","controlledValue","defaultValue","onChange","onInputChange","placeholder","size","disabled","isInvalid","required","clearable","ariaLabel","ariaLabelledby","filterFn","emptyText","creatable","onCreate","createLabel","input","clearLabel","listboxLabel","className","testId","ref","listboxId","useId","internalValue","setInternalValue","useState","setInputValue","isOpen","setIsOpen","activeIndex","setActiveIndex","isFocused","setIsFocused","containerRef","useRef","inputRef","listRef","value","config","selectedOption","useMemo","opt","filteredOptions","useEffect","handleSelect","useCallback","optionValue","handleInputChange","newValue","handleClear","handleKeyDown","prev","handleClick","e","dropdownPosition","setDropdownPosition","updatePosition","rect","spacing","containerStyle","inputWrapperStyle","durations","easings","inputStyle","iconsStyle","clearButtonStyle","chevronStyle","dropdownStyle","optionStyle","isActive","isDisabled","isSelected","componentGap","emptyStyle","jsxs","cx","node","createPortal","Fragment","index"],"mappings":"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"}

package/dist/components/form/DateInput/DateInput.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("react"),F=require("../../../utils/styles.cjs"),$={sm:{height:32,fontSize:13,padding:10,iconSize:14},md:{height:40,fontSize:14,padding:12,iconSize:16},lg:{height:48,fontSize:16,padding:14,iconSize:18}},g=d.forwardRef(function({size:c="md",variant:o="outline",type:b="date",label:l,helperText:u,error:s,isInvalid:S=!1,leftIcon:n,disabled:a=!1,className:h,style:k,testId:v,...m},x){const[i,y]=d.useState(!1),[z,f]=d.useState(!1),e=$[c],r=S||!!s,j={display:"flex",flexDirection:"column",gap:6,...k},R={fontSize:e.fontSize-1,fontWeight:500,color:"var(--brycks-foreground-default)"},I={position:"relative",display:"flex",alignItems:"center"},w=()=>{const p={width:"100%",height:e.height,fontSize:e.fontSize,fontFamily:"inherit",color:"var(--brycks-foreground-default)",backgroundColor:o==="filled"?"var(--brycks-background-muted)":"var(--brycks-background-input)",paddingLeft:n?e.padding+e.iconSize+8:e.padding,paddingRight:e.padding,transition:"all 150ms ease-out",outline:"none",opacity:a?.5:1,cursor:a?"not-allowed":"pointer"};return o==="flushed"?{...p,border:"none",borderBottom:`2px solid ${r?"var(--brycks-error-default)":i?"var(--brycks-primary-default)":"var(--brycks-border-default)"}`,borderRadius:0,paddingLeft:n?e.iconSize+8:0,paddingRight:0,backgroundColor:"transparent"}:{...p,border:`1px solid ${r?"var(--brycks-error-default)":i?"var(--brycks-primary-default)":z?"var(--brycks-border-strong)":"var(--brycks-border-default)"}`,borderRadius:"var(--brycks-radius-md)",boxShadow:i&&!r?"0 0 0 3px var(--brycks-primary-100)":i&&r?"0 0 0 3px var(--brycks-error-100)":void 0}},C={position:"absolute",left:o==="flushed"?0:e.padding,color:"var(--brycks-foreground-muted)",display:"flex",alignItems:"center",justifyContent:"center",width:e.iconSize,height:e.iconSize,pointerEvents:"none"},D={fontSize:e.fontSize-2,color:r?"var(--brycks-error-default)":"var(--brycks-foreground-muted)"};return t.jsxs("div",{className:F.cx("brycks-date-input",`brycks-date-input--${c}`,`brycks-date-input--${o}`,h),style:j,children:[l&&t.jsx("label",{style:R,children:l}),t.jsxs("div",{style:I,onMouseEnter:()=>f(!0),onMouseLeave:()=>f(!1),children:[n&&t.jsx("span",{style:C,children:n}),t.jsx("input",{ref:x,type:b,disabled:a,style:w(),onFocus:()=>y(!0),onBlur:()=>y(!1),"data-testid":v,...m})]}),(u||s)&&t.jsx("span",{style:D,children:s||u})]})});g.displayName="DateInput";exports.DateInput=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("react"),F=require("../../../utils/styles.cjs"),$={sm:{height:32,fontSize:13,padding:10,iconSize:14},md:{height:40,fontSize:14,padding:12,iconSize:16},lg:{height:48,fontSize:16,padding:14,iconSize:18}},p=d.forwardRef(function({size:c="md",variant:o="outline",type:b="date",label:l,helperText:u,error:i,isInvalid:S=!1,leftIcon:n,disabled:a=!1,className:h,style:k,testId:v,...m},z){const[s,f]=d.useState(!1),[x,y]=d.useState(!1),e=$[c],r=S||!!i,j={display:"flex",flexDirection:"column",gap:6,...k},R={fontSize:e.fontSize-1,fontWeight:500,color:"var(--brycks-foreground-default)"},I={position:"relative",display:"flex",alignItems:"center"},w=()=>{const g={width:"100%",height:e.height,fontSize:e.fontSize,fontFamily:"inherit",color:"var(--brycks-foreground-default)",backgroundColor:o==="filled"?"var(--brycks-background-muted)":"var(--brycks-background-elevated)",paddingLeft:n?e.padding+e.iconSize+8:e.padding,paddingRight:e.padding,transition:"all 150ms ease-out",outline:"none",opacity:a?.5:1,cursor:a?"not-allowed":"pointer"};return o==="flushed"?{...g,border:"none",borderBottom:`2px solid ${r?"var(--brycks-error-default)":s?"var(--brycks-primary-default)":"var(--brycks-border-default)"}`,borderRadius:0,paddingLeft:n?e.iconSize+8:0,paddingRight:0,backgroundColor:"transparent"}:{...g,border:`1px solid ${r?"var(--brycks-error-default)":s?"var(--brycks-primary-default)":x?"var(--brycks-border-strong)":"var(--brycks-border-default)"}`,borderRadius:"var(--brycks-radius-md)",boxShadow:s&&!r?"var(--brycks-focus-ring)":s&&r?"0 0 0 3px var(--brycks-focus-ring-error)":void 0}},C={position:"absolute",left:o==="flushed"?0:e.padding,color:"var(--brycks-foreground-muted)",display:"flex",alignItems:"center",justifyContent:"center",width:e.iconSize,height:e.iconSize,pointerEvents:"none"},D={fontSize:e.fontSize-2,color:r?"var(--brycks-error-default)":"var(--brycks-foreground-muted)"};return t.jsxs("div",{className:F.cx("brycks-date-input",`brycks-date-input--${c}`,`brycks-date-input--${o}`,h),style:j,children:[l&&t.jsx("label",{style:R,children:l}),t.jsxs("div",{style:I,onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1),children:[n&&t.jsx("span",{style:C,children:n}),t.jsx("input",{ref:z,type:b,disabled:a,style:w(),onFocus:()=>f(!0),onBlur:()=>f(!1),"data-testid":v,...m})]}),(u||i)&&t.jsx("span",{style:D,children:i||u})]})});p.displayName="DateInput";exports.DateInput=p;
 //# sourceMappingURL=DateInput.cjs.map