@brycks/core-front 0.5.0 → 0.6.0

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

@@ -1,174 +1,91 @@
-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-muted)",
-    border: "var(--brycks-info-soft-hover)",
-    icon: "var(--brycks-info-default)"
-  },
-  success: {
-    bg: "var(--brycks-success-muted)",
-    border: "var(--brycks-success-soft-hover)",
-    icon: "var(--brycks-success-default)"
-  },
-  warning: {
-    bg: "var(--brycks-warning-muted)",
-    border: "var(--brycks-warning-soft-hover)",
-    icon: "var(--brycks-warning-default)"
-  },
-  error: {
-    bg: "var(--brycks-error-muted)",
-    border: "var(--brycks-error-soft-hover)",
-    icon: "var(--brycks-error-default)"
-  }
-};
-function F({ intent: m }) {
+import { jsxs as v, jsx as t } from "react/jsx-runtime";
+import { forwardRef as z, useState as d, useEffect as g, useCallback as k } from "react";
+import { createPortal as E } from "react-dom";
+import { cx as j } from "../../../utils/styles.js";
+import { ToastContext as B } from "./ToastContext.js";
+function S({ intent: f }) {
   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",
     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",
     error: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-  }[m] }) });
+  }[f] }) });
 }
-function q() {
+function V() {
   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 z = D(function({
+const M = z(function({
   intent: e = "info",
-  title: a,
+  title: n,
   description: i,
-  isOpen: o = !0,
+  isOpen: s = !0,
   duration: c = 5e3,
   onClose: l,
-  showCloseButton: g = !0,
-  closeLabel: y = "Close toast",
-  action: b,
-  icon: p,
-  className: v,
-  style: s,
-  testId: n,
-  onMouseEnter: u,
-  onMouseLeave: d,
-  ...I
+  showCloseButton: b = !0,
+  closeLabel: h = "Close toast",
+  action: p,
+  icon: o,
+  className: r,
+  style: u,
+  testId: m,
+  onMouseEnter: N,
+  onMouseLeave: x,
+  ...C
 }, L) {
-  const [E, T] = f(o), [P, S] = f(!1), [C, M] = f(!1);
-  if (w(() => {
-    if (o)
-      T(!0), S(!1);
+  const [I, y] = d(s), [P, T] = d(!1), [_, w] = d(!1);
+  return g(() => {
+    if (s)
+      y(!0), T(!1);
     else {
-      S(!0);
-      const r = setTimeout(() => T(!1), 200);
-      return () => clearTimeout(r);
+      T(!0);
+      const a = setTimeout(() => y(!1), 200);
+      return () => clearTimeout(a);
     }
-  }, [o]), w(() => {
-    if (!o || c === 0 || C) return;
-    const r = setTimeout(() => {
+  }, [s]), g(() => {
+    if (!s || c === 0 || _) return;
+    const a = setTimeout(() => {
       l?.();
     }, c);
-    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: k.bg,
-    border: `1px solid ${k.border}`,
-    borderRadius: "var(--brycks-radius-lg)",
-    boxShadow: "var(--brycks-shadow-lg)",
-    maxWidth: 400,
-    animation: P ? "brycks-toast-out 200ms ease-in forwards" : "brycks-toast-in 200ms ease-out",
-    ...s
-  }, j = {
-    color: k.icon,
-    flexShrink: 0,
-    marginTop: 2
-  }, Y = {
-    flex: 1,
-    display: "flex",
-    flexDirection: "column",
-    gap: 4
-  }, B = {
-    fontSize: 14,
-    fontWeight: 600,
-    color: "var(--brycks-foreground-default)",
-    lineHeight: 1.4
-  }, N = {
-    fontSize: 13,
-    color: "var(--brycks-foreground-muted)",
-    lineHeight: 1.4
-  }, R = {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 24,
-    height: 24,
-    borderRadius: "var(--brycks-radius-sm)",
-    color: "var(--brycks-foreground-muted)",
-    transition: "all 150ms ease-out",
-    flexShrink: 0,
-    marginLeft: "auto"
-  };
-  return /* @__PURE__ */ h($, { children: [
-    /* @__PURE__ */ t("style", { children: `
-          @keyframes brycks-toast-in {
-            from { opacity: 0; transform: translateY(-8px) scale(0.95); }
-            to { opacity: 1; transform: translateY(0) scale(1); }
-          }
-          @keyframes brycks-toast-out {
-            from { opacity: 1; transform: translateY(0) scale(1); }
-            to { opacity: 0; transform: translateY(-8px) scale(0.95); }
+    return () => clearTimeout(a);
+  }, [s, c, l, _]), I ? /* @__PURE__ */ v(
+    "div",
+    {
+      ref: L,
+      role: e === "error" || e === "warning" ? "alert" : "status",
+      "aria-live": e === "error" || e === "warning" ? "assertive" : "polite",
+      className: j("brycks-toast", `brycks-toast--${e}`, P && "brycks-toast--exiting", r),
+      style: u,
+      "data-testid": m,
+      onMouseEnter: (a) => {
+        w(!0), N?.(a);
+      },
+      onMouseLeave: (a) => {
+        w(!1), x?.(a);
+      },
+      ...C,
+      children: [
+        /* @__PURE__ */ t("span", { className: "brycks-toast__icon", children: o || /* @__PURE__ */ t(S, { intent: e }) }),
+        /* @__PURE__ */ v("div", { className: "brycks-toast__content", children: [
+          n && /* @__PURE__ */ t("span", { className: "brycks-toast__title", children: n }),
+          i && /* @__PURE__ */ t("span", { className: "brycks-toast__description", children: i }),
+          p && /* @__PURE__ */ t("div", { className: "brycks-toast__action", children: p })
+        ] }),
+        b && /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: "brycks-toast__close",
+            onClick: l,
+            "aria-label": h,
+            children: /* @__PURE__ */ t(V, {})
           }
-        ` }),
-    /* @__PURE__ */ h(
-      "div",
-      {
-        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: 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: R,
-              onClick: l,
-              "aria-label": y,
-              onMouseEnter: (r) => {
-                r.currentTarget.style.backgroundColor = "var(--brycks-background-muted)";
-              },
-              onMouseLeave: (r) => {
-                r.currentTarget.style.backgroundColor = "transparent";
-              },
-              children: /* @__PURE__ */ t(q, {})
-            }
-          )
-        ]
-      }
-    )
-  ] });
+        )
+      ]
+    }
+  ) : null;
 });
-z.displayName = "Toast";
-const G = {
+M.displayName = "Toast";
+const W = {
   "top-left": { top: 16, left: 16 },
   "top-center": { top: 16, left: "50%", transform: "translateX(-50%)" },
   "top-right": { top: 16, right: 16 },
@@ -176,50 +93,40 @@ const G = {
   "bottom-center": { bottom: 16, left: "50%", transform: "translateX(-50%)" },
   "bottom-right": { bottom: 16, right: 16 }
 };
-let J = 0;
-function O({
-  children: m,
+let X = 0;
+function F({
+  children: f,
   position: e = "top-right",
-  maxToasts: a = 5
+  maxToasts: n = 5
 }) {
-  const [i, o] = f([]), [c, l] = f(!1);
-  w(() => {
+  const [i, s] = d([]), [c, l] = d(!1);
+  g(() => {
     l(!0);
   }, []);
-  const g = x(
-    (s) => {
-      const n = `toast-${++J}`;
-      return o((u) => {
-        const d = [...u, { id: n, props: s }];
-        return d.length > a ? d.slice(-a) : d;
-      }), n;
+  const b = k(
+    (o) => {
+      const r = `toast-${++X}`;
+      return s((u) => {
+        const m = [...u, { id: r, props: o }];
+        return m.length > n ? m.slice(-n) : m;
+      }), r;
     },
-    [a]
-  ), 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",
-    ...G[e]
-  }, v = {
-    pointerEvents: "auto"
-  };
-  return /* @__PURE__ */ h(X.Provider, { value: { toasts: i, addToast: g, removeToast: y, removeAll: b }, children: [
-    m,
-    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)) }),
+    [n]
+  ), h = k((o) => {
+    s((r) => r.filter((u) => u.id !== o));
+  }, []), p = k(() => {
+    s([]);
+  }, []);
+  return /* @__PURE__ */ v(B.Provider, { value: { toasts: i, addToast: b, removeToast: h, removeAll: p }, children: [
+    f,
+    c && E(
+      /* @__PURE__ */ t("div", { className: "brycks-toast-container", style: W[e], children: i.map(({ id: o, props: r }) => /* @__PURE__ */ t("div", { className: "brycks-toast-wrapper", children: /* @__PURE__ */ t(M, { ...r, isOpen: !0, onClose: () => h(o) }) }, o)) }),
       document.body
     )
   ] });
 }
 export {
-  z as Toast,
-  O as ToastProvider
+  M as Toast,
+  F 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  /** 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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"}
+{"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\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  return (\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}`, isExiting && 'brycks-toast--exiting', className)}\n      style={style}\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 className=\"brycks-toast__icon\">\n        {icon || <ToastIcon intent={intent} />}\n      </span>\n      <div className=\"brycks-toast__content\">\n        {title && <span className=\"brycks-toast__title\">{title}</span>}\n        {description && <span className=\"brycks-toast__description\">{description}</span>}\n        {action && <div className=\"brycks-toast__action\">{action}</div>}\n      </div>\n      {showCloseButton && (\n        <button\n          type=\"button\"\n          className=\"brycks-toast__close\"\n          onClick={onClose}\n          aria-label={closeLabel}\n        >\n          <CloseIcon />\n        </button>\n      )}\n    </div>\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  return (\n    <ToastContext.Provider value={{ toasts, addToast, removeToast, removeAll }}>\n      {children}\n      {mounted &&\n        createPortal(\n          <div className=\"brycks-toast-container\" style={positionStyles[position]}>\n            {toasts.map(({ id, props }) => (\n              <div key={id} className=\"brycks-toast-wrapper\">\n                <Toast {...props} isOpen onClose={() => removeToast(id)} />\n              </div>\n            ))}\n          </div>,\n          document.body\n        )}\n    </ToastContext.Provider>\n  )\n}\n"],"names":["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","jsxs","cx","e","positionStyles","toastCounter","ToastProvider","children","position","maxToasts","toasts","setToasts","mounted","setMounted","addToast","useCallback","id","prev","newToasts","removeToast","t","removeAll","ToastContext","createPortal"],"mappings":"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"}

package/dist/components/form/Checkbox/Checkbox.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),T=require("../../../utils/styles.cjs"),n=require("../../../design-system/primitives/opacity.cjs"),p=require("../../../design-system/primitives/sizing.cjs"),h=require("../../../design-system/primitives/typography.cjs"),m=require("../../../design-system/primitives/focus.cjs"),v=require("../../../design-system/primitives/transitions.cjs");function D({size:o}){return e.jsx("svg",{width:o,height:o,viewBox:"0 0 12 12",fill:"none",children:e.jsx("path",{d:"M2.5 6L5 8.5L9.5 4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function G({size:o}){return e.jsx("svg",{width:o,height:o,viewBox:"0 0 12 12",fill:"none",children:e.jsx("path",{d:"M2.5 6H9.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}const S=c.forwardRef(function({size:i="md",label:a,description:l,isInvalid:u,isIndeterminate:b,className:j,style:w,testId:C,disabled:s,checked:k,onChange:q,...L},M){const[x,f]=c.useState(!1),[H,g]=c.useState(!1),[R,d]=c.useState(!1),t=p.controlSizes[i],y=h.componentFontSize[i],r=k||b,$={display:"inline-flex",alignItems:"flex-start",gap:p.componentGap.lg,cursor:s?"not-allowed":"pointer",opacity:s?n.stateOpacity.disabled:1},I={position:"relative",width:t.box,height:t.box,borderRadius:"var(--brycks-radius-sm)",border:`1.5px solid ${u?"var(--brycks-error-default)":r?"var(--brycks-primary-default)":x?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`,backgroundColor:r?"var(--brycks-primary-default)":H?"var(--brycks-background-subtle)":"var(--brycks-background-app)",transition:v.transition.quick,transform:R?`scale(${n.scale.controlPressed})`:`scale(${n.scale.normal})`,boxShadow:x?m.focusRing.default:m.focusRing.none,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},F={color:"var(--brycks-primary-foreground)",opacity:r?1:0,transform:r?`scale(${n.scale.normal})`:`scale(${n.scale.hidden})`,transition:v.transition.quick},P={position:"absolute",width:"100%",height:"100%",opacity:0,cursor:s?"not-allowed":"pointer",margin:0},z={display:"flex",flexDirection:"column",gap:p.componentGap.xs,paddingTop:(t.box-y)/2},B={fontSize:y,lineHeight:h.componentLineHeight.snug,color:"var(--brycks-foreground-default)",userSelect:"none"},O={fontSize:y-1,lineHeight:h.componentLineHeight.snug,color:"var(--brycks-foreground-muted)",userSelect:"none"};return e.jsxs("label",{className:T.cx("brycks-checkbox",`brycks-checkbox--${i}`,r&&"brycks-checkbox--checked",u&&"brycks-checkbox--invalid",s&&"brycks-checkbox--disabled",j),style:{...$,...w},"data-testid":C,onMouseEnter:()=>g(!0),onMouseLeave:()=>{g(!1),d(!1)},onMouseDown:()=>d(!0),onMouseUp:()=>d(!1),children:[e.jsxs("span",{style:I,children:[e.jsx("input",{ref:M,type:"checkbox",style:P,checked:k,disabled:s,"aria-invalid":u,onChange:q,onFocus:()=>f(!0),onBlur:()=>f(!1),...L}),e.jsx("span",{style:F,children:b?e.jsx(G,{size:t.icon}):e.jsx(D,{size:t.icon})})]}),(a||l)&&e.jsxs("span",{style:z,children:[a&&e.jsx("span",{style:B,children:a}),l&&e.jsx("span",{style:O,children:l})]})]})});S.displayName="Checkbox";exports.Checkbox=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),T=require("../../../utils/styles.cjs"),n=require("../../../design-system/primitives/opacity.cjs"),m=require("../../../design-system/primitives/focus.cjs"),v=require("../../../design-system/primitives/transitions.cjs"),p=require("../../../design-system/primitives/sizing.cjs"),h=require("../../../design-system/primitives/typography.cjs");function D({size:o}){return e.jsx("svg",{width:o,height:o,viewBox:"0 0 12 12",fill:"none",children:e.jsx("path",{d:"M2.5 6L5 8.5L9.5 4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function G({size:o}){return e.jsx("svg",{width:o,height:o,viewBox:"0 0 12 12",fill:"none",children:e.jsx("path",{d:"M2.5 6H9.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}const S=c.forwardRef(function({size:i="md",label:a,description:l,isInvalid:u,isIndeterminate:b,className:j,style:w,testId:C,disabled:s,checked:k,onChange:q,...L},M){const[x,f]=c.useState(!1),[H,g]=c.useState(!1),[R,d]=c.useState(!1),t=p.controlSizes[i],y=h.componentFontSize[i],r=k||b,$={display:"inline-flex",alignItems:"flex-start",gap:p.componentGap.lg,cursor:s?"not-allowed":"pointer",opacity:s?n.stateOpacity.disabled:1},I={position:"relative",width:t.box,height:t.box,borderRadius:"var(--brycks-radius-sm)",border:`1.5px solid ${u?"var(--brycks-error-default)":r?"var(--brycks-primary-default)":x?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`,backgroundColor:r?"var(--brycks-primary-default)":H?"var(--brycks-background-subtle)":"var(--brycks-background-app)",transition:v.transition.quick,transform:R?`scale(${n.scale.controlPressed})`:`scale(${n.scale.normal})`,boxShadow:x?m.focusRing.default:m.focusRing.none,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},F={color:"var(--brycks-primary-foreground)",opacity:r?1:0,transform:r?`scale(${n.scale.normal})`:`scale(${n.scale.hidden})`,transition:v.transition.quick},P={position:"absolute",width:"100%",height:"100%",opacity:0,cursor:s?"not-allowed":"pointer",margin:0},z={display:"flex",flexDirection:"column",gap:p.componentGap.xs,paddingTop:(t.box-y)/2},B={fontSize:y,lineHeight:h.componentLineHeight.snug,color:"var(--brycks-foreground-default)",userSelect:"none"},O={fontSize:y-1,lineHeight:h.componentLineHeight.snug,color:"var(--brycks-foreground-muted)",userSelect:"none"};return e.jsxs("label",{className:T.cx("brycks-checkbox",`brycks-checkbox--${i}`,r&&"brycks-checkbox--checked",u&&"brycks-checkbox--invalid",s&&"brycks-checkbox--disabled",j),style:{...$,...w},"data-testid":C,onMouseEnter:()=>g(!0),onMouseLeave:()=>{g(!1),d(!1)},onMouseDown:()=>d(!0),onMouseUp:()=>d(!1),children:[e.jsxs("span",{style:I,children:[e.jsx("input",{ref:M,type:"checkbox",style:P,checked:k,disabled:s,"aria-invalid":u,onChange:q,onFocus:()=>f(!0),onBlur:()=>f(!1),...L}),e.jsx("span",{style:F,children:b?e.jsx(G,{size:t.icon}):e.jsx(D,{size:t.icon})})]}),(a||l)&&e.jsxs("span",{style:z,children:[a&&e.jsx("span",{style:B,children:a}),l&&e.jsx("span",{style:O,children:l})]})]})});S.displayName="Checkbox";exports.Checkbox=S;
 //# sourceMappingURL=Checkbox.cjs.map

package/dist/components/form/Checkbox/Checkbox.js

@@ -2,10 +2,10 @@ import { jsxs as p, jsx as e } from "react/jsx-runtime";
 import { forwardRef as N, useState as f } from "react";
 import { cx as O } from "../../../utils/styles.js";
 import { stateOpacity as T, scale as s } from "../../../design-system/primitives/opacity.js";
-import { componentGap as x, controlSizes as W } from "../../../design-system/primitives/sizing.js";
-import { componentLineHeight as g, componentFontSize as E } from "../../../design-system/primitives/typography.js";
-import { focusRing as v } from "../../../design-system/primitives/focus.js";
-import { transition as S } from "../../../design-system/primitives/transitions.js";
+import { focusRing as x } from "../../../design-system/primitives/focus.js";
+import { transition as g } from "../../../design-system/primitives/transitions.js";
+import { componentGap as v, controlSizes as W } from "../../../design-system/primitives/sizing.js";
+import { componentLineHeight as S, componentFontSize as E } from "../../../design-system/primitives/typography.js";
 function G({ size: o }) {
   return /* @__PURE__ */ e("svg", { width: o, height: o, viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ e(
     "path",
@@ -46,7 +46,7 @@ const A = N(function({
   const [k, b] = f(!1), [I, m] = f(!1), [j, d] = f(!1), t = W[c], u = E[c], n = h || y, F = {
     display: "inline-flex",
     alignItems: "flex-start",
-    gap: x.lg,
+    gap: v.lg,
     cursor: r ? "not-allowed" : "pointer",
     opacity: r ? T.disabled : 1
   }, B = {
@@ -56,9 +56,9 @@ const A = N(function({
     borderRadius: "var(--brycks-radius-sm)",
     border: `1.5px solid ${l ? "var(--brycks-error-default)" : n ? "var(--brycks-primary-default)" : k ? "var(--brycks-border-focus)" : "var(--brycks-border-default)"}`,
     backgroundColor: n ? "var(--brycks-primary-default)" : I ? "var(--brycks-background-subtle)" : "var(--brycks-background-app)",
-    transition: S.quick,
+    transition: g.quick,
     transform: j ? `scale(${s.controlPressed})` : `scale(${s.normal})`,
-    boxShadow: k ? v.default : v.none,
+    boxShadow: k ? x.default : x.none,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -67,7 +67,7 @@ const A = N(function({
     color: "var(--brycks-primary-foreground)",
     opacity: n ? 1 : 0,
     transform: n ? `scale(${s.normal})` : `scale(${s.hidden})`,
-    transition: S.quick
+    transition: g.quick
   }, R = {
     position: "absolute",
     width: "100%",
@@ -78,16 +78,16 @@ const A = N(function({
   }, q = {
     display: "flex",
     flexDirection: "column",
-    gap: x.xs,
+    gap: v.xs,
     paddingTop: (t.box - u) / 2
   }, z = {
     fontSize: u,
-    lineHeight: g.snug,
+    lineHeight: S.snug,
     color: "var(--brycks-foreground-default)",
     userSelect: "none"
   }, D = {
     fontSize: u - 1,
-    lineHeight: g.snug,
+    lineHeight: S.snug,
     color: "var(--brycks-foreground-muted)",
     userSelect: "none"
   };

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

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