@brycks/core-front 0.3.5 → 0.3.6

package/dist/components/feedback/Toast/Toast.js

@@ -1,31 +1,31 @@
-import { jsxs as y, Fragment as Y, jsx as t } from "react/jsx-runtime";
-import { forwardRef as B, useState as b, useEffect as T, useCallback as x } from "react";
-import { createPortal as N } from "react-dom";
-import { cx as P } from "../../../utils/styles.js";
-import { ToastContext as R } from "./ToastContext.js";
-const $ = {
+import { jsxs as h, Fragment as $, jsx as t } from "react/jsx-runtime";
+import { forwardRef as D, useState as f, useEffect as w, useCallback as x } from "react";
+import { createPortal as H } from "react-dom";
+import { cx as V } from "../../../utils/styles.js";
+import { ToastContext as X } from "./ToastContext.js";
+const A = {
   info: {
-    bg: "var(--brycks-info-50)",
-    border: "var(--brycks-info-200)",
+    bg: "var(--brycks-info-muted)",
+    border: "var(--brycks-info-soft-hover)",
     icon: "var(--brycks-info-default)"
   },
   success: {
-    bg: "var(--brycks-success-50)",
-    border: "var(--brycks-success-200)",
+    bg: "var(--brycks-success-muted)",
+    border: "var(--brycks-success-soft-hover)",
     icon: "var(--brycks-success-default)"
   },
   warning: {
-    bg: "var(--brycks-warning-50)",
-    border: "var(--brycks-warning-200)",
+    bg: "var(--brycks-warning-muted)",
+    border: "var(--brycks-warning-soft-hover)",
     icon: "var(--brycks-warning-default)"
   },
   error: {
-    bg: "var(--brycks-error-50)",
-    border: "var(--brycks-error-200)",
+    bg: "var(--brycks-error-muted)",
+    border: "var(--brycks-error-soft-hover)",
     icon: "var(--brycks-error-default)"
   }
 };
-function D({ intent: m }) {
+function F({ intent: m }) {
   return /* @__PURE__ */ t("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ t("path", { d: {
     info: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
     success: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z",
@@ -33,71 +33,74 @@ function D({ intent: m }) {
     error: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
   }[m] }) });
 }
-function H() {
+function q() {
   return /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ t("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
 }
-const C = B(function({
-  intent: n = "info",
+const z = D(function({
+  intent: e = "info",
   title: a,
   description: i,
-  isOpen: r = !0,
+  isOpen: o = !0,
   duration: c = 5e3,
   onClose: l,
   showCloseButton: g = !0,
-  action: d,
+  closeLabel: y = "Close toast",
+  action: b,
   icon: p,
-  className: h,
-  style: k,
-  testId: e,
-  ...o
-}, u) {
-  const [f, w] = b(r), [M, S] = b(!1);
-  if (T(() => {
-    if (r)
-      w(!0), S(!1);
+  className: v,
+  style: s,
+  testId: n,
+  onMouseEnter: u,
+  onMouseLeave: d,
+  ...I
+}, L) {
+  const [E, T] = f(o), [P, S] = f(!1), [C, M] = f(!1);
+  if (w(() => {
+    if (o)
+      T(!0), S(!1);
     else {
       S(!0);
-      const s = setTimeout(() => w(!1), 200);
-      return () => clearTimeout(s);
+      const r = setTimeout(() => T(!1), 200);
+      return () => clearTimeout(r);
     }
-  }, [r]), T(() => {
-    if (!r || c === 0) return;
-    const s = setTimeout(() => {
+  }, [o]), w(() => {
+    if (!o || c === 0 || C) return;
+    const r = setTimeout(() => {
       l?.();
     }, c);
-    return () => clearTimeout(s);
-  }, [r, c, l]), !f) return null;
-  const v = $[n], z = {
+    return () => clearTimeout(r);
+  }, [o, c, l, C]), !E) return null;
+  const k = A[e], W = {
     display: "flex",
     alignItems: "flex-start",
     gap: 12,
     padding: "12px 16px",
-    backgroundColor: v.bg,
-    border: `1px solid ${v.border}`,
+    backgroundColor: k.bg,
+    border: `1px solid ${k.border}`,
     borderRadius: "var(--brycks-radius-lg)",
     boxShadow: "var(--brycks-shadow-lg)",
     maxWidth: 400,
-    animation: M ? "brycks-toast-out 200ms ease-in forwards" : "brycks-toast-in 200ms ease-out",
-    ...k
-  }, I = {
-    color: v.icon,
+    animation: P ? "brycks-toast-out 200ms ease-in forwards" : "brycks-toast-in 200ms ease-out",
+    ...s
+  }, j = {
+    color: k.icon,
     flexShrink: 0,
     marginTop: 2
-  }, L = {
+  }, Y = {
     flex: 1,
     display: "flex",
     flexDirection: "column",
     gap: 4
-  }, E = {
+  }, B = {
     fontSize: 14,
     fontWeight: 600,
     color: "var(--brycks-foreground-default)",
     lineHeight: 1.4
-  }, W = {
+  }, N = {
     fontSize: 13,
     color: "var(--brycks-foreground-muted)",
     lineHeight: 1.4
-  }, j = {
+  }, R = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -109,7 +112,7 @@ const C = B(function({
     flexShrink: 0,
     marginLeft: "auto"
   };
-  return /* @__PURE__ */ y(Y, { children: [
+  return /* @__PURE__ */ h($, { children: [
     /* @__PURE__ */ t("style", { children: `
           @keyframes brycks-toast-in {
             from { opacity: 0; transform: translateY(-8px) scale(0.95); }
@@ -120,37 +123,43 @@ const C = B(function({
             to { opacity: 0; transform: translateY(-8px) scale(0.95); }
           }
         ` }),
-    /* @__PURE__ */ y(
+    /* @__PURE__ */ h(
       "div",
       {
-        ref: u,
-        role: "alert",
-        "aria-live": "polite",
-        className: P("brycks-toast", `brycks-toast--${n}`, h),
-        style: z,
-        "data-testid": e,
-        ...o,
+        ref: L,
+        role: e === "error" || e === "warning" ? "alert" : "status",
+        "aria-live": e === "error" || e === "warning" ? "assertive" : "polite",
+        className: V("brycks-toast", `brycks-toast--${e}`, v),
+        style: W,
+        "data-testid": n,
+        onMouseEnter: (r) => {
+          M(!0), u?.(r);
+        },
+        onMouseLeave: (r) => {
+          M(!1), d?.(r);
+        },
+        ...I,
         children: [
-          /* @__PURE__ */ t("span", { style: I, children: p || /* @__PURE__ */ t(D, { intent: n }) }),
-          /* @__PURE__ */ y("div", { style: L, children: [
-            a && /* @__PURE__ */ t("span", { style: E, children: a }),
-            i && /* @__PURE__ */ t("span", { style: W, children: i }),
-            d && /* @__PURE__ */ t("div", { style: { marginTop: 8 }, children: d })
+          /* @__PURE__ */ t("span", { style: j, children: p || /* @__PURE__ */ t(F, { intent: e }) }),
+          /* @__PURE__ */ h("div", { style: Y, children: [
+            a && /* @__PURE__ */ t("span", { style: B, children: a }),
+            i && /* @__PURE__ */ t("span", { style: N, children: i }),
+            b && /* @__PURE__ */ t("div", { style: { marginTop: 8 }, children: b })
           ] }),
           g && /* @__PURE__ */ t(
             "button",
             {
               type: "button",
-              style: j,
+              style: R,
               onClick: l,
-              "aria-label": "Close toast",
-              onMouseEnter: (s) => {
-                s.currentTarget.style.backgroundColor = "var(--brycks-background-muted)";
+              "aria-label": y,
+              onMouseEnter: (r) => {
+                r.currentTarget.style.backgroundColor = "var(--brycks-background-muted)";
               },
-              onMouseLeave: (s) => {
-                s.currentTarget.style.backgroundColor = "transparent";
+              onMouseLeave: (r) => {
+                r.currentTarget.style.backgroundColor = "transparent";
               },
-              children: /* @__PURE__ */ t(H, {})
+              children: /* @__PURE__ */ t(q, {})
             }
           )
         ]
@@ -158,8 +167,8 @@ const C = B(function({
     )
   ] });
 });
-C.displayName = "Toast";
-const V = {
+z.displayName = "Toast";
+const G = {
   "top-left": { top: 16, left: 16 },
   "top-center": { top: 16, left: "50%", transform: "translateX(-50%)" },
   "top-right": { top: 16, right: 16 },
@@ -167,50 +176,50 @@ const V = {
   "bottom-center": { bottom: 16, left: "50%", transform: "translateX(-50%)" },
   "bottom-right": { bottom: 16, right: 16 }
 };
-let X = 0;
-function K({
+let J = 0;
+function O({
   children: m,
-  position: n = "top-right",
+  position: e = "top-right",
   maxToasts: a = 5
 }) {
-  const [i, r] = b([]), [c, l] = b(!1);
-  T(() => {
+  const [i, o] = f([]), [c, l] = f(!1);
+  w(() => {
     l(!0);
   }, []);
   const g = x(
-    (e) => {
-      const o = `toast-${++X}`;
-      return r((u) => {
-        const f = [...u, { id: o, props: e }];
-        return f.length > a ? f.slice(-a) : f;
-      }), o;
+    (s) => {
+      const n = `toast-${++J}`;
+      return o((u) => {
+        const d = [...u, { id: n, props: s }];
+        return d.length > a ? d.slice(-a) : d;
+      }), n;
     },
     [a]
-  ), d = x((e) => {
-    r((o) => o.filter((u) => u.id !== e));
-  }, []), p = x(() => {
-    r([]);
-  }, []), h = {
+  ), y = x((s) => {
+    o((n) => n.filter((u) => u.id !== s));
+  }, []), b = x(() => {
+    o([]);
+  }, []), p = {
     position: "fixed",
     zIndex: "var(--brycks-z-toast)",
     display: "flex",
     flexDirection: "column",
     gap: 8,
     pointerEvents: "none",
-    ...V[n]
-  }, k = {
+    ...G[e]
+  }, v = {
     pointerEvents: "auto"
   };
-  return /* @__PURE__ */ y(R.Provider, { value: { toasts: i, addToast: g, removeToast: d, removeAll: p }, children: [
+  return /* @__PURE__ */ h(X.Provider, { value: { toasts: i, addToast: g, removeToast: y, removeAll: b }, children: [
     m,
-    c && N(
-      /* @__PURE__ */ t("div", { className: "brycks-toast-container", style: h, children: i.map(({ id: e, props: o }) => /* @__PURE__ */ t("div", { style: k, children: /* @__PURE__ */ t(C, { ...o, isOpen: !0, onClose: () => d(e) }) }, e)) }),
+    c && H(
+      /* @__PURE__ */ t("div", { className: "brycks-toast-container", style: p, children: i.map(({ id: s, props: n }) => /* @__PURE__ */ t("div", { style: v, children: /* @__PURE__ */ t(z, { ...n, isOpen: !0, onClose: () => y(s) }) }, s)) }),
       document.body
     )
   ] });
 }
 export {
-  C as Toast,
-  K as ToastProvider
+  z as Toast,
+  O as ToastProvider
 };
 //# sourceMappingURL=Toast.js.map

package/dist/components/feedback/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../../src/components/feedback/Toast/Toast.tsx"],"sourcesContent":["/**\n * Toast Component\n *\n * A notification toast with auto-dismiss and action support.\n * Includes a toast container for managing multiple toasts.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useEffect,\n  useCallback,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { ToastContext } from './ToastContext'\nimport type { ToastItem } from './ToastContext'\n\nexport type ToastIntent = 'info' | 'success' | 'warning' | 'error'\nexport type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n\nexport interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Toast intent/type */\n  intent?: ToastIntent\n  /** Toast title */\n  title?: ReactNode\n  /** Toast description */\n  description?: ReactNode\n  /** Whether the toast is visible */\n  isOpen?: boolean\n  /** Duration in ms before auto-dismiss (0 = no auto-dismiss) */\n  duration?: number\n  /** Callback when toast should close */\n  onClose?: () => void\n  /** Whether to show close button */\n  showCloseButton?: boolean\n  /** Action button */\n  action?: ReactNode\n  /** Custom icon */\n  icon?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst intentConfig: Record<ToastIntent, { bg: string; border: string; icon: string }> = {\n  info: {\n    bg: 'var(--brycks-info-50)',\n    border: 'var(--brycks-info-200)',\n    icon: 'var(--brycks-info-default)',\n  },\n  success: {\n    bg: 'var(--brycks-success-50)',\n    border: 'var(--brycks-success-200)',\n    icon: 'var(--brycks-success-default)',\n  },\n  warning: {\n    bg: 'var(--brycks-warning-50)',\n    border: 'var(--brycks-warning-200)',\n    icon: 'var(--brycks-warning-default)',\n  },\n  error: {\n    bg: 'var(--brycks-error-50)',\n    border: 'var(--brycks-error-200)',\n    icon: 'var(--brycks-error-default)',\n  },\n}\n\nfunction ToastIcon({ intent }: { intent: ToastIntent }) {\n  const paths: Record<ToastIntent, string> = {\n    info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',\n    success: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',\n    warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',\n    error: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z',\n  }\n\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d={paths[intent]} />\n    </svg>\n  )\n}\n\nfunction CloseIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n      <path d=\"M4 4l8 8M12 4l-8 8\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  {\n    intent = 'info',\n    title,\n    description,\n    isOpen = true,\n    duration = 5000,\n    onClose,\n    showCloseButton = true,\n    action,\n    icon,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [isVisible, setIsVisible] = useState(isOpen)\n  const [isExiting, setIsExiting] = useState(false)\n\n  useEffect(() => {\n    if (isOpen) {\n      setIsVisible(true)\n      setIsExiting(false)\n    } else {\n      setIsExiting(true)\n      const timer = setTimeout(() => setIsVisible(false), 200)\n      return () => clearTimeout(timer)\n    }\n  }, [isOpen])\n\n  useEffect(() => {\n    if (!isOpen || duration === 0) return\n\n    const timer = setTimeout(() => {\n      onClose?.()\n    }, duration)\n\n    return () => clearTimeout(timer)\n  }, [isOpen, duration, onClose])\n\n  if (!isVisible) return null\n\n  const config = intentConfig[intent]\n\n  const toastStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: 12,\n    padding: '12px 16px',\n    backgroundColor: config.bg,\n    border: `1px solid ${config.border}`,\n    borderRadius: 'var(--brycks-radius-lg)',\n    boxShadow: 'var(--brycks-shadow-lg)',\n    maxWidth: 400,\n    animation: isExiting\n      ? 'brycks-toast-out 200ms ease-in forwards'\n      : 'brycks-toast-in 200ms ease-out',\n    ...style,\n  }\n\n  const iconStyle: CSSProperties = {\n    color: config.icon,\n    flexShrink: 0,\n    marginTop: 2,\n  }\n\n  const contentStyle: CSSProperties = {\n    flex: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 4,\n  }\n\n  const titleStyle: CSSProperties = {\n    fontSize: 14,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const descriptionStyle: CSSProperties = {\n    fontSize: 13,\n    color: 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  const closeButtonStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 24,\n    height: 24,\n    borderRadius: 'var(--brycks-radius-sm)',\n    color: 'var(--brycks-foreground-muted)',\n    transition: 'all 150ms ease-out',\n    flexShrink: 0,\n    marginLeft: 'auto',\n  }\n\n  return (\n    <>\n      <style>\n        {`\n          @keyframes brycks-toast-in {\n            from { opacity: 0; transform: translateY(-8px) scale(0.95); }\n            to { opacity: 1; transform: translateY(0) scale(1); }\n          }\n          @keyframes brycks-toast-out {\n            from { opacity: 1; transform: translateY(0) scale(1); }\n            to { opacity: 0; transform: translateY(-8px) scale(0.95); }\n          }\n        `}\n      </style>\n      <div\n        ref={ref}\n        role=\"alert\"\n        aria-live=\"polite\"\n        className={cx('brycks-toast', `brycks-toast--${intent}`, className)}\n        style={toastStyle}\n        data-testid={testId}\n        {...props}\n      >\n        <span style={iconStyle}>\n          {icon || <ToastIcon intent={intent} />}\n        </span>\n        <div style={contentStyle}>\n          {title && <span style={titleStyle}>{title}</span>}\n          {description && <span style={descriptionStyle}>{description}</span>}\n          {action && <div style={{ marginTop: 8 }}>{action}</div>}\n        </div>\n        {showCloseButton && (\n          <button\n            type=\"button\"\n            style={closeButtonStyle}\n            onClick={onClose}\n            aria-label=\"Close toast\"\n            onMouseEnter={(e) => {\n              e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.backgroundColor = 'transparent'\n            }}\n          >\n            <CloseIcon />\n          </button>\n        )}\n      </div>\n    </>\n  )\n})\n\nToast.displayName = 'Toast'\n\n// Toast Provider\nexport interface ToastProviderProps {\n  children: ReactNode\n  position?: ToastPosition\n  maxToasts?: number\n}\n\nconst positionStyles: Record<ToastPosition, CSSProperties> = {\n  'top-left': { top: 16, left: 16 },\n  'top-center': { top: 16, left: '50%', transform: 'translateX(-50%)' },\n  'top-right': { top: 16, right: 16 },\n  'bottom-left': { bottom: 16, left: 16 },\n  'bottom-center': { bottom: 16, left: '50%', transform: 'translateX(-50%)' },\n  'bottom-right': { bottom: 16, right: 16 },\n}\n\nlet toastCounter = 0\n\nexport function ToastProvider({\n  children,\n  position = 'top-right',\n  maxToasts = 5,\n}: ToastProviderProps) {\n  const [toasts, setToasts] = useState<ToastItem[]>([])\n  const [mounted, setMounted] = useState(false)\n\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  const addToast = useCallback(\n    (props: Omit<ToastProps, 'isOpen' | 'onClose'>) => {\n      const id = `toast-${++toastCounter}`\n      setToasts((prev) => {\n        const newToasts = [...prev, { id, props }]\n        if (newToasts.length > maxToasts) {\n          return newToasts.slice(-maxToasts)\n        }\n        return newToasts\n      })\n      return id\n    },\n    [maxToasts]\n  )\n\n  const removeToast = useCallback((id: string) => {\n    setToasts((prev) => prev.filter((t) => t.id !== id))\n  }, [])\n\n  const removeAll = useCallback(() => {\n    setToasts([])\n  }, [])\n\n  const containerStyle: CSSProperties = {\n    position: 'fixed',\n    zIndex: 'var(--brycks-z-toast)' as unknown as number,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 8,\n    pointerEvents: 'none',\n    ...positionStyles[position],\n  }\n\n  const toastWrapperStyle: CSSProperties = {\n    pointerEvents: 'auto',\n  }\n\n  return (\n    <ToastContext.Provider value={{ toasts, addToast, removeToast, removeAll }}>\n      {children}\n      {mounted &&\n        createPortal(\n          <div className=\"brycks-toast-container\" style={containerStyle}>\n            {toasts.map(({ id, props }) => (\n              <div key={id} style={toastWrapperStyle}>\n                <Toast {...props} isOpen onClose={() => removeToast(id)} />\n              </div>\n            ))}\n          </div>,\n          document.body\n        )}\n    </ToastContext.Provider>\n  )\n}\n"],"names":["intentConfig","ToastIcon","intent","jsx","CloseIcon","Toast","forwardRef","title","description","isOpen","duration","onClose","showCloseButton","action","icon","className","style","testId","props","ref","isVisible","setIsVisible","useState","isExiting","setIsExiting","useEffect","timer","config","toastStyle","iconStyle","contentStyle","titleStyle","descriptionStyle","closeButtonStyle","jsxs","Fragment","cx","e","positionStyles","toastCounter","ToastProvider","children","position","maxToasts","toasts","setToasts","mounted","setMounted","addToast","useCallback","id","prev","newToasts","removeToast","t","removeAll","containerStyle","toastWrapperStyle","ToastContext","createPortal"],"mappings":"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"}
+{"version":3,"file":"Toast.js","sources":["../../../../src/components/feedback/Toast/Toast.tsx"],"sourcesContent":["/**\n * Toast Component\n *\n * A notification toast with auto-dismiss and action support.\n * Includes a toast container for managing multiple toasts.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useEffect,\n  useCallback,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { ToastContext } from './ToastContext'\nimport type { ToastItem } from './ToastContext'\n\nexport type ToastIntent = 'info' | 'success' | 'warning' | 'error'\nexport type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n\nexport interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Toast intent/type */\n  intent?: ToastIntent\n  /** Toast title */\n  title?: ReactNode\n  /** Toast description */\n  description?: ReactNode\n  /** Whether the toast is visible */\n  isOpen?: boolean\n  /** Duration in ms before auto-dismiss (0 = no auto-dismiss) */\n  duration?: number\n  /** Callback when toast should close */\n  onClose?: () => void\n  /** Whether to show close button */\n  showCloseButton?: boolean\n  /** Accessible label of the close button */\n  closeLabel?: string\n  /** Action button */\n  action?: ReactNode\n  /** Custom icon */\n  icon?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst intentConfig: Record<ToastIntent, { bg: string; border: string; icon: string }> = {\n  info: {\n    bg: 'var(--brycks-info-muted)',\n    border: 'var(--brycks-info-soft-hover)',\n    icon: 'var(--brycks-info-default)',\n  },\n  success: {\n    bg: 'var(--brycks-success-muted)',\n    border: 'var(--brycks-success-soft-hover)',\n    icon: 'var(--brycks-success-default)',\n  },\n  warning: {\n    bg: 'var(--brycks-warning-muted)',\n    border: 'var(--brycks-warning-soft-hover)',\n    icon: 'var(--brycks-warning-default)',\n  },\n  error: {\n    bg: 'var(--brycks-error-muted)',\n    border: 'var(--brycks-error-soft-hover)',\n    icon: 'var(--brycks-error-default)',\n  },\n}\n\nfunction ToastIcon({ intent }: { intent: ToastIntent }) {\n  const paths: Record<ToastIntent, string> = {\n    info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',\n    success: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',\n    warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',\n    error: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z',\n  }\n\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d={paths[intent]} />\n    </svg>\n  )\n}\n\nfunction CloseIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n      <path d=\"M4 4l8 8M12 4l-8 8\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  {\n    intent = 'info',\n    title,\n    description,\n    isOpen = true,\n    duration = 5000,\n    onClose,\n    showCloseButton = true,\n    closeLabel = 'Close toast',\n    action,\n    icon,\n    className,\n    style,\n    testId,\n    onMouseEnter,\n    onMouseLeave,\n    ...props\n  },\n  ref\n) {\n  const [isVisible, setIsVisible] = useState(isOpen)\n  const [isExiting, setIsExiting] = useState(false)\n  const [isPaused, setIsPaused] = useState(false)\n\n  useEffect(() => {\n    if (isOpen) {\n      setIsVisible(true)\n      setIsExiting(false)\n    } else {\n      setIsExiting(true)\n      const timer = setTimeout(() => setIsVisible(false), 200)\n      return () => clearTimeout(timer)\n    }\n  }, [isOpen])\n\n  // Auto-dismiss pauses while the pointer is over the toast\n  useEffect(() => {\n    if (!isOpen || duration === 0 || isPaused) return\n\n    const timer = setTimeout(() => {\n      onClose?.()\n    }, duration)\n\n    return () => clearTimeout(timer)\n  }, [isOpen, duration, onClose, isPaused])\n\n  if (!isVisible) return null\n\n  const config = intentConfig[intent]\n\n  const toastStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: 12,\n    padding: '12px 16px',\n    backgroundColor: config.bg,\n    border: `1px solid ${config.border}`,\n    borderRadius: 'var(--brycks-radius-lg)',\n    boxShadow: 'var(--brycks-shadow-lg)',\n    maxWidth: 400,\n    animation: isExiting\n      ? 'brycks-toast-out 200ms ease-in forwards'\n      : 'brycks-toast-in 200ms ease-out',\n    ...style,\n  }\n\n  const iconStyle: CSSProperties = {\n    color: config.icon,\n    flexShrink: 0,\n    marginTop: 2,\n  }\n\n  const contentStyle: CSSProperties = {\n    flex: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 4,\n  }\n\n  const titleStyle: CSSProperties = {\n    fontSize: 14,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const descriptionStyle: CSSProperties = {\n    fontSize: 13,\n    color: 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  const closeButtonStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 24,\n    height: 24,\n    borderRadius: 'var(--brycks-radius-sm)',\n    color: 'var(--brycks-foreground-muted)',\n    transition: 'all 150ms ease-out',\n    flexShrink: 0,\n    marginLeft: 'auto',\n  }\n\n  return (\n    <>\n      <style>\n        {`\n          @keyframes brycks-toast-in {\n            from { opacity: 0; transform: translateY(-8px) scale(0.95); }\n            to { opacity: 1; transform: translateY(0) scale(1); }\n          }\n          @keyframes brycks-toast-out {\n            from { opacity: 1; transform: translateY(0) scale(1); }\n            to { opacity: 0; transform: translateY(-8px) scale(0.95); }\n          }\n        `}\n      </style>\n      <div\n        ref={ref}\n        role={intent === 'error' || intent === 'warning' ? 'alert' : 'status'}\n        aria-live={intent === 'error' || intent === 'warning' ? 'assertive' : 'polite'}\n        className={cx('brycks-toast', `brycks-toast--${intent}`, className)}\n        style={toastStyle}\n        data-testid={testId}\n        onMouseEnter={(e) => {\n          setIsPaused(true)\n          onMouseEnter?.(e)\n        }}\n        onMouseLeave={(e) => {\n          setIsPaused(false)\n          onMouseLeave?.(e)\n        }}\n        {...props}\n      >\n        <span style={iconStyle}>\n          {icon || <ToastIcon intent={intent} />}\n        </span>\n        <div style={contentStyle}>\n          {title && <span style={titleStyle}>{title}</span>}\n          {description && <span style={descriptionStyle}>{description}</span>}\n          {action && <div style={{ marginTop: 8 }}>{action}</div>}\n        </div>\n        {showCloseButton && (\n          <button\n            type=\"button\"\n            style={closeButtonStyle}\n            onClick={onClose}\n            aria-label={closeLabel}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.backgroundColor = 'transparent'\n            }}\n          >\n            <CloseIcon />\n          </button>\n        )}\n      </div>\n    </>\n  )\n})\n\nToast.displayName = 'Toast'\n\n// Toast Provider\nexport interface ToastProviderProps {\n  children: ReactNode\n  position?: ToastPosition\n  maxToasts?: number\n}\n\nconst positionStyles: Record<ToastPosition, CSSProperties> = {\n  'top-left': { top: 16, left: 16 },\n  'top-center': { top: 16, left: '50%', transform: 'translateX(-50%)' },\n  'top-right': { top: 16, right: 16 },\n  'bottom-left': { bottom: 16, left: 16 },\n  'bottom-center': { bottom: 16, left: '50%', transform: 'translateX(-50%)' },\n  'bottom-right': { bottom: 16, right: 16 },\n}\n\nlet toastCounter = 0\n\nexport function ToastProvider({\n  children,\n  position = 'top-right',\n  maxToasts = 5,\n}: ToastProviderProps) {\n  const [toasts, setToasts] = useState<ToastItem[]>([])\n  const [mounted, setMounted] = useState(false)\n\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  const addToast = useCallback(\n    (props: Omit<ToastProps, 'isOpen' | 'onClose'>) => {\n      const id = `toast-${++toastCounter}`\n      setToasts((prev) => {\n        const newToasts = [...prev, { id, props }]\n        if (newToasts.length > maxToasts) {\n          return newToasts.slice(-maxToasts)\n        }\n        return newToasts\n      })\n      return id\n    },\n    [maxToasts]\n  )\n\n  const removeToast = useCallback((id: string) => {\n    setToasts((prev) => prev.filter((t) => t.id !== id))\n  }, [])\n\n  const removeAll = useCallback(() => {\n    setToasts([])\n  }, [])\n\n  const containerStyle: CSSProperties = {\n    position: 'fixed',\n    zIndex: 'var(--brycks-z-toast)' as unknown as number,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 8,\n    pointerEvents: 'none',\n    ...positionStyles[position],\n  }\n\n  const toastWrapperStyle: CSSProperties = {\n    pointerEvents: 'auto',\n  }\n\n  return (\n    <ToastContext.Provider value={{ toasts, addToast, removeToast, removeAll }}>\n      {children}\n      {mounted &&\n        createPortal(\n          <div className=\"brycks-toast-container\" style={containerStyle}>\n            {toasts.map(({ id, props }) => (\n              <div key={id} style={toastWrapperStyle}>\n                <Toast {...props} isOpen onClose={() => removeToast(id)} />\n              </div>\n            ))}\n          </div>,\n          document.body\n        )}\n    </ToastContext.Provider>\n  )\n}\n"],"names":["intentConfig","ToastIcon","intent","jsx","CloseIcon","Toast","forwardRef","title","description","isOpen","duration","onClose","showCloseButton","closeLabel","action","icon","className","style","testId","onMouseEnter","onMouseLeave","props","ref","isVisible","setIsVisible","useState","isExiting","setIsExiting","isPaused","setIsPaused","useEffect","timer","config","toastStyle","iconStyle","contentStyle","titleStyle","descriptionStyle","closeButtonStyle","jsxs","Fragment","cx","e","positionStyles","toastCounter","ToastProvider","children","position","maxToasts","toasts","setToasts","mounted","setMounted","addToast","useCallback","id","prev","newToasts","removeToast","t","removeAll","containerStyle","toastWrapperStyle","ToastContext","createPortal"],"mappings":"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"}

package/dist/components/form/Combobox/Combobox.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.cjs","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.cjs","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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"}