@brycks/core-front 0.3.6 → 0.5.0

package/dist/components/feedback/Modal/Modal.js

@@ -1,21 +1,21 @@
-import { jsx as r, jsxs as v } from "react/jsx-runtime";
-import { forwardRef as U, useRef as i, useEffect as u, useCallback as V, useMemo as M, memo as X } from "react";
-import { createPortal as Y } from "react-dom";
-import { cx as Z } from "../../../utils/styles.js";
-import { useId as L } from "../../../hooks/useId.js";
-import { iconButtonSizes as T } from "../../../design-system/primitives/layout.js";
-import { spacing as a } from "../../../design-system/tokens/spacing.js";
-import { fontSizes as N } from "../../../design-system/tokens/typography.js";
-import { componentGap as _ } from "../../../design-system/primitives/sizing.js";
-const O = {
+import { jsx as t, jsxs as v } from "react/jsx-runtime";
+import { forwardRef as X, useRef as i, useEffect as u, useCallback as Y, useMemo as L, memo as Z } from "react";
+import { createPortal as _ } from "react-dom";
+import { cx as O } from "../../../utils/styles.js";
+import { useId as T } from "../../../hooks/useId.js";
+import { iconButtonSizes as N } from "../../../design-system/primitives/layout.js";
+import { spacing as o } from "../../../design-system/tokens/spacing.js";
+import { fontSizes as j } from "../../../design-system/tokens/typography.js";
+import { componentGap as ee } from "../../../design-system/primitives/sizing.js";
+const te = {
   sm: "400px",
   md: "500px",
   lg: "640px",
   xl: "800px",
   "2xl": "1200px",
   full: "calc(100vw - 48px)"
-}, ee = X(function() {
-  return /* @__PURE__ */ r("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ r(
+}, re = Z(function() {
+  return /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ t(
     "path",
     {
       d: "M4 4L12 12M12 4L4 12",
@@ -24,71 +24,71 @@ const O = {
       strokeLinecap: "round"
     }
   ) });
-}), te = U(function({
-  isOpen: t,
-  onClose: o,
+}), oe = X(function({
+  isOpen: r,
+  onClose: n,
   size: l = "md",
   title: c,
   description: m,
-  closeOnOverlayClick: k = !0,
-  closeOnEscape: p = !0,
-  showCloseButton: g = !0,
-  closeLabel: j = "Close modal",
-  className: D,
-  style: x,
+  closeOnOverlayClick: p = !0,
+  closeOnEscape: k = !0,
+  showCloseButton: x = !0,
+  closeLabel: D = "Close modal",
+  footer: g,
+  className: $,
+  style: h,
   testId: z,
   children: W,
   ...B
 }, d) {
-  const f = i(null), h = L("modal-title"), w = L("modal-description"), y = i(null), s = i(!1);
+  const f = i(null), w = T("modal-title"), S = T("modal-description"), y = i(null), s = i(!1);
   u(() => {
-    t && !s.current ? (y.current = document.activeElement, s.current = !0) : !t && s.current && (document.activeElement instanceof HTMLElement && document.activeElement.blur(), y.current?.focus(), y.current = null, s.current = !1);
-  }, [t]);
-  const S = i(o);
+    r && !s.current ? (y.current = document.activeElement, s.current = !0) : !r && s.current && (document.activeElement instanceof HTMLElement && document.activeElement.blur(), y.current?.focus(), y.current = null, s.current = !1);
+  }, [r]);
+  const E = i(n);
   u(() => {
-    S.current = o;
-  }, [o]), u(() => {
-    if (!t) return;
+    E.current = n;
+  }, [n]), u(() => {
+    if (!r) return;
     const e = f.current;
     e && e.focus();
-  }, [t]), u(() => {
-    if (!t) return;
-    const e = f.current, E = (n) => {
-      if (n.key === "Escape" && p) {
-        S.current();
+  }, [r]), u(() => {
+    if (!r) return;
+    const e = f.current, C = (a) => {
+      if (a.key === "Escape" && k) {
+        E.current();
         return;
       }
-      if (n.key === "Tab" && e) {
+      if (a.key === "Tab" && e) {
         const b = e.querySelectorAll(
           'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [contenteditable="true"], [tabindex]:not([tabindex="-1"])'
-        ), C = b[0], I = b[b.length - 1];
-        n.shiftKey && document.activeElement === C ? (n.preventDefault(), I?.focus()) : !n.shiftKey && document.activeElement === I && (n.preventDefault(), C?.focus());
+        ), I = b[0], M = b[b.length - 1];
+        a.shiftKey && document.activeElement === I ? (a.preventDefault(), M?.focus()) : !a.shiftKey && document.activeElement === M && (a.preventDefault(), I?.focus());
       }
     };
-    return document.addEventListener("keydown", E), document.body.style.overflow = "hidden", () => {
-      document.removeEventListener("keydown", E), document.body.style.overflow = "";
+    return document.addEventListener("keydown", C), document.body.style.overflow = "hidden", () => {
+      document.removeEventListener("keydown", C), document.body.style.overflow = "";
     };
-  }, [t, p]);
-  const H = V(
+  }, [r, k]);
+  const H = Y(
     (e) => {
-      e.target === e.currentTarget && k && o();
+      e.target === e.currentTarget && p && n();
     },
-    [k, o]
-  ), K = M(() => ({
+    [p, n]
+  ), K = L(() => ({
     position: "fixed",
     inset: 0,
     zIndex: "var(--brycks-z-modal)",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    padding: a[6],
+    padding: o[6],
     backgroundColor: "var(--brycks-background-overlay)",
-    backdropFilter: "blur(4px)",
     animation: "brycks-fade-in var(--brycks-duration-normal) var(--brycks-ease-out)"
-  }), []), $ = M(() => ({
+  }), []), A = L(() => ({
     position: "relative",
     width: "100%",
-    maxWidth: O[l],
+    maxWidth: te[l],
     maxHeight: l === "full" ? "calc(100vh - 48px)" : "85vh",
     backgroundColor: "var(--brycks-background-elevated)",
     borderRadius: "var(--brycks-radius-xl)",
@@ -96,47 +96,54 @@ const O = {
     display: "flex",
     flexDirection: "column",
     overflow: "hidden",
-    animation: "brycks-scale-in var(--brycks-duration-normal) var(--brycks-ease-spring)",
+    animation: "brycks-scale-in var(--brycks-duration-normal) var(--brycks-ease-out)",
     outline: "none",
-    ...x
-  }), [l, x]);
-  if (!t) return null;
-  const A = {
+    ...h
+  }), [l, h]);
+  if (!r) return null;
+  const q = {
     display: "flex",
     alignItems: "flex-start",
     justifyContent: "space-between",
-    padding: `${a[5]}px ${a[6]}px`,
+    padding: `${o[5]}px ${o[6]}px`,
     borderBottom: "1px solid var(--brycks-border-muted)"
-  }, q = {
+  }, G = {
     display: "flex",
     flexDirection: "column",
-    gap: a[1]
-  }, F = {
-    fontSize: N.lg,
+    gap: o[1]
+  }, P = {
+    fontSize: j.lg,
     fontWeight: 600,
     color: "var(--brycks-foreground-default)",
     margin: 0,
     lineHeight: 1.3
-  }, G = {
-    fontSize: N.base,
+  }, F = {
+    fontSize: j.base,
     color: "var(--brycks-foreground-muted)",
     margin: 0
-  }, P = {
+  }, J = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    width: T.sm,
-    height: T.sm,
+    width: N.sm,
+    height: N.sm,
     borderRadius: "var(--brycks-radius-md)",
     color: "var(--brycks-foreground-muted)",
     transition: "all var(--brycks-duration-fast) var(--brycks-ease-out)",
-    marginLeft: _.xl,
+    marginLeft: ee.xl,
     flexShrink: 0
-  }, J = {
+  }, Q = {
     flex: 1,
     overflow: "auto",
-    padding: a[6]
-  }, Q = /* @__PURE__ */ r(
+    padding: o[6]
+  }, U = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: o[2],
+    padding: `${o[4]}px ${o[6]}px`,
+    borderTop: "1px solid var(--brycks-border-muted)"
+  }, V = /* @__PURE__ */ t(
     "div",
     {
       className: "brycks-modal-overlay",
@@ -150,47 +157,48 @@ const O = {
           },
           role: "dialog",
           "aria-modal": "true",
-          "aria-labelledby": c ? h : void 0,
-          "aria-describedby": m ? w : void 0,
-          className: Z("brycks-modal", `brycks-modal--${l}`, D),
-          style: $,
+          "aria-labelledby": c ? w : void 0,
+          "aria-describedby": m ? S : void 0,
+          className: O("brycks-modal", `brycks-modal--${l}`, $),
+          style: A,
           tabIndex: -1,
           "data-testid": z,
           ...B,
           children: [
-            (c || g) && /* @__PURE__ */ v("div", { className: "brycks-modal-header", style: A, children: [
-              /* @__PURE__ */ v("div", { style: q, children: [
-                c && /* @__PURE__ */ r("h2", { id: h, style: F, children: c }),
-                m && /* @__PURE__ */ r("p", { id: w, style: G, children: m })
+            (c || x) && /* @__PURE__ */ v("div", { className: "brycks-modal-header", style: q, children: [
+              /* @__PURE__ */ v("div", { style: G, children: [
+                c && /* @__PURE__ */ t("h2", { id: w, style: P, children: c }),
+                m && /* @__PURE__ */ t("p", { id: S, style: F, children: m })
               ] }),
-              g && /* @__PURE__ */ r(
+              x && /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
                   className: "brycks-modal-close",
-                  style: P,
-                  onClick: o,
-                  "aria-label": j,
+                  style: J,
+                  onClick: n,
+                  "aria-label": D,
                   onMouseEnter: (e) => {
                     e.currentTarget.style.backgroundColor = "var(--brycks-background-muted)", e.currentTarget.style.color = "var(--brycks-foreground-default)";
                   },
                   onMouseLeave: (e) => {
                     e.currentTarget.style.backgroundColor = "transparent", e.currentTarget.style.color = "var(--brycks-foreground-muted)";
                   },
-                  children: /* @__PURE__ */ r(ee, {})
+                  children: /* @__PURE__ */ t(re, {})
                 }
               )
             ] }),
-            /* @__PURE__ */ r("div", { className: "brycks-modal-content", style: J, children: W })
+            /* @__PURE__ */ t("div", { className: "brycks-modal-content", style: Q, children: W }),
+            g && /* @__PURE__ */ t("div", { className: "brycks-modal-footer", style: U, children: g })
           ]
         }
       )
     }
   );
-  return Y(Q, document.body);
+  return _(V, document.body);
 });
-te.displayName = "Modal";
+oe.displayName = "Modal";
 export {
-  te as Modal
+  oe as Modal
 };
 //# sourceMappingURL=Modal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../../src/components/feedback/Modal/Modal.tsx"],"sourcesContent":["/**\r\n * Modal Component\r\n *\r\n * Accessible modal dialog with smooth Apple-inspired animations.\r\n * Supports focus trapping and keyboard navigation.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useEffect,\r\n  useRef,\r\n  useCallback,\r\n  useMemo,\r\n  memo,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { cx } from '../../../utils/styles'\r\nimport { useId } from '../../../hooks/useId'\r\nimport { spacing, fontSizes } from '../../../design-system'\r\nimport { componentGap, iconButtonSizes } from '../../../design-system/primitives'\r\n\r\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'\r\n\r\nexport interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  /** Whether the modal is open */\r\n  isOpen: boolean\r\n  /** Callback when modal should close */\r\n  onClose: () => void\r\n  /** Modal size */\r\n  size?: ModalSize\r\n  /** Modal title */\r\n  title?: ReactNode\r\n  /** Modal description */\r\n  description?: ReactNode\r\n  /** Whether to close on overlay click */\r\n  closeOnOverlayClick?: boolean\r\n  /** Whether to close on escape key */\r\n  closeOnEscape?: boolean\r\n  /** Whether to show close button */\r\n  showCloseButton?: boolean\r\n  /** Accessible label of the close button */\r\n  closeLabel?: string\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Modal content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst sizeWidths: Record<ModalSize, string> = {\r\n  sm: '400px',\r\n  md: '500px',\r\n  lg: '640px',\r\n  xl: '800px',\r\n  '2xl': '1200px',\r\n  full: 'calc(100vw - 48px)',\r\n}\r\n\r\n/** Close icon - memoized to prevent re-renders */\r\nconst CloseIcon = memo(function CloseIcon() {\r\n  return (\r\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M4 4L12 12M12 4L4 12\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"1.5\"\r\n        strokeLinecap=\"round\"\r\n      />\r\n    </svg>\r\n  )\r\n})\r\n\r\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(\r\n  {\r\n    isOpen,\r\n    onClose,\r\n    size = 'md',\r\n    title,\r\n    description,\r\n    closeOnOverlayClick = true,\r\n    closeOnEscape = true,\r\n    showCloseButton = true,\r\n    closeLabel = 'Close modal',\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const modalRef = useRef<HTMLDivElement>(null)\r\n  const titleId = useId('modal-title')\r\n  const descriptionId = useId('modal-description')\r\n  const previousActiveElement = useRef<HTMLElement | null>(null)\r\n  const wasOpen = useRef(false)\r\n\r\n  // Track previous open state to handle focus restoration before unmount\r\n  useEffect(() => {\r\n    // Modal just opened\r\n    if (isOpen && !wasOpen.current) {\r\n      previousActiveElement.current = document.activeElement as HTMLElement\r\n      wasOpen.current = true\r\n    }\r\n    // Modal is about to close - restore focus BEFORE unmount\r\n    else if (!isOpen && wasOpen.current) {\r\n      // Blur any focused element inside modal to prevent aria-hidden warning\r\n      if (document.activeElement instanceof HTMLElement) {\r\n        document.activeElement.blur()\r\n      }\r\n      // Restore focus to previous element\r\n      previousActiveElement.current?.focus()\r\n      previousActiveElement.current = null\r\n      wasOpen.current = false\r\n    }\r\n  }, [isOpen])\r\n\r\n  // Store onClose in a ref to avoid re-running effects when it changes\r\n  const onCloseRef = useRef(onClose)\r\n  useEffect(() => {\r\n    onCloseRef.current = onClose\r\n  }, [onClose])\r\n\r\n  // Focus modal when it opens (only once)\r\n  useEffect(() => {\r\n    if (!isOpen) return\r\n\r\n    const modal = modalRef.current\r\n    if (modal) {\r\n      modal.focus()\r\n    }\r\n  }, [isOpen])\r\n\r\n  // Keyboard handling and body scroll lock\r\n  useEffect(() => {\r\n    if (!isOpen) return\r\n\r\n    const modal = modalRef.current\r\n\r\n    const handleKeyDown = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape' && closeOnEscape) {\r\n        onCloseRef.current()\r\n        return\r\n      }\r\n\r\n      if (e.key === 'Tab' && modal) {\r\n        const focusableElements = modal.querySelectorAll<HTMLElement>(\r\n          'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [contenteditable=\"true\"], [tabindex]:not([tabindex=\"-1\"])'\r\n        )\r\n        const firstElement = focusableElements[0]\r\n        const lastElement = focusableElements[focusableElements.length - 1]\r\n\r\n        if (e.shiftKey && document.activeElement === firstElement) {\r\n          e.preventDefault()\r\n          lastElement?.focus()\r\n        } else if (!e.shiftKey && document.activeElement === lastElement) {\r\n          e.preventDefault()\r\n          firstElement?.focus()\r\n        }\r\n      }\r\n    }\r\n\r\n    document.addEventListener('keydown', handleKeyDown)\r\n    document.body.style.overflow = 'hidden'\r\n\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKeyDown)\r\n      document.body.style.overflow = ''\r\n    }\r\n  }, [isOpen, closeOnEscape])\r\n\r\n  const handleOverlayClick = useCallback(\r\n    (e: React.MouseEvent) => {\r\n      if (e.target === e.currentTarget && closeOnOverlayClick) {\r\n        onClose()\r\n      }\r\n    },\r\n    [closeOnOverlayClick, onClose]\r\n  )\r\n\r\n  // Memoize styles to prevent object recreation on every render\r\n  const overlayStyle = useMemo<CSSProperties>(() => ({\r\n    position: 'fixed',\r\n    inset: 0,\r\n    zIndex: 'var(--brycks-z-modal)',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    padding: spacing[6],\r\n    backgroundColor: 'var(--brycks-background-overlay)',\r\n    backdropFilter: 'blur(4px)',\r\n    animation: 'brycks-fade-in var(--brycks-duration-normal) var(--brycks-ease-out)',\r\n  }), [])\r\n\r\n  const modalStyle = useMemo<CSSProperties>(() => ({\r\n    position: 'relative',\r\n    width: '100%',\r\n    maxWidth: sizeWidths[size],\r\n    maxHeight: size === 'full' ? 'calc(100vh - 48px)' : '85vh',\r\n    backgroundColor: 'var(--brycks-background-elevated)',\r\n    borderRadius: 'var(--brycks-radius-xl)',\r\n    boxShadow: 'var(--brycks-shadow-2xl)',\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    overflow: 'hidden',\r\n    animation: 'brycks-scale-in var(--brycks-duration-normal) var(--brycks-ease-spring)',\r\n    outline: 'none',\r\n    ...style,\r\n  }), [size, style])\r\n\r\n  if (!isOpen) return null\r\n\r\n  const headerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'flex-start',\r\n    justifyContent: 'space-between',\r\n    padding: `${spacing[5]}px ${spacing[6]}px`,\r\n    borderBottom: '1px solid var(--brycks-border-muted)',\r\n  }\r\n\r\n  const titleContainerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    gap: spacing[1],\r\n  }\r\n\r\n  const titleStyle: CSSProperties = {\r\n    fontSize: fontSizes.lg,\r\n    fontWeight: 600,\r\n    color: 'var(--brycks-foreground-default)',\r\n    margin: 0,\r\n    lineHeight: 1.3,\r\n  }\r\n\r\n  const descriptionStyle: CSSProperties = {\r\n    fontSize: fontSizes.base,\r\n    color: 'var(--brycks-foreground-muted)',\r\n    margin: 0,\r\n  }\r\n\r\n  const closeButtonStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    width: iconButtonSizes.sm,\r\n    height: iconButtonSizes.sm,\r\n    borderRadius: 'var(--brycks-radius-md)',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    transition: 'all var(--brycks-duration-fast) var(--brycks-ease-out)',\r\n    marginLeft: componentGap.xl,\r\n    flexShrink: 0,\r\n  }\r\n\r\n  const contentStyle: CSSProperties = {\r\n    flex: 1,\r\n    overflow: 'auto',\r\n    padding: spacing[6],\r\n  }\r\n\r\n  const modalContent = (\r\n    <div\r\n        className=\"brycks-modal-overlay\"\r\n        style={overlayStyle}\r\n        onClick={handleOverlayClick}\r\n      >\r\n        <div\r\n          ref={(node) => {\r\n            (modalRef as React.MutableRefObject<HTMLDivElement | null>).current = node\r\n            if (typeof ref === 'function') ref(node)\r\n            else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\r\n          }}\r\n          role=\"dialog\"\r\n          aria-modal=\"true\"\r\n          aria-labelledby={title ? titleId : undefined}\r\n          aria-describedby={description ? descriptionId : undefined}\r\n          className={cx('brycks-modal', `brycks-modal--${size}`, className)}\r\n          style={modalStyle}\r\n          tabIndex={-1}\r\n          data-testid={testId}\r\n          {...props}\r\n        >\r\n          {(title || showCloseButton) && (\r\n            <div className=\"brycks-modal-header\" style={headerStyle}>\r\n              <div style={titleContainerStyle}>\r\n                {title && (\r\n                  <h2 id={titleId} style={titleStyle}>\r\n                    {title}\r\n                  </h2>\r\n                )}\r\n                {description && (\r\n                  <p id={descriptionId} style={descriptionStyle}>\r\n                    {description}\r\n                  </p>\r\n                )}\r\n              </div>\r\n              {showCloseButton && (\r\n                <button\r\n                  type=\"button\"\r\n                  className=\"brycks-modal-close\"\r\n                  style={closeButtonStyle}\r\n                  onClick={onClose}\r\n                  aria-label={closeLabel}\r\n                  onMouseEnter={(e) => {\r\n                    e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\r\n                    e.currentTarget.style.color = 'var(--brycks-foreground-default)'\r\n                  }}\r\n                  onMouseLeave={(e) => {\r\n                    e.currentTarget.style.backgroundColor = 'transparent'\r\n                    e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\r\n                  }}\r\n                >\r\n                  <CloseIcon />\r\n                </button>\r\n              )}\r\n            </div>\r\n          )}\r\n\r\n          <div className=\"brycks-modal-content\" style={contentStyle}>\r\n            {children}\r\n          </div>\r\n        </div>\r\n      </div>\r\n  )\r\n\r\n  return createPortal(modalContent, document.body)\r\n})\r\n\r\nModal.displayName = 'Modal'\r\n"],"names":["sizeWidths","CloseIcon","memo","jsx","Modal","forwardRef","isOpen","onClose","size","title","description","closeOnOverlayClick","closeOnEscape","showCloseButton","closeLabel","className","style","testId","children","props","ref","modalRef","useRef","titleId","useId","descriptionId","previousActiveElement","wasOpen","useEffect","onCloseRef","modal","handleKeyDown","e","focusableElements","firstElement","lastElement","handleOverlayClick","useCallback","overlayStyle","useMemo","spacing","modalStyle","headerStyle","titleContainerStyle","titleStyle","fontSizes","descriptionStyle","closeButtonStyle","iconButtonSizes","componentGap","contentStyle","modalContent","jsxs","node","cx","createPortal"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../../../src/components/feedback/Modal/Modal.tsx"],"sourcesContent":["/**\r\n * Modal Component\r\n *\r\n * Accessible modal dialog with smooth Apple-inspired animations.\r\n * Supports focus trapping and keyboard navigation.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useEffect,\r\n  useRef,\r\n  useCallback,\r\n  useMemo,\r\n  memo,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { cx } from '../../../utils/styles'\r\nimport { useId } from '../../../hooks/useId'\r\nimport { spacing, fontSizes } from '../../../design-system'\r\nimport { componentGap, iconButtonSizes } from '../../../design-system/primitives'\r\n\r\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'\r\n\r\nexport interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  /** Whether the modal is open */\r\n  isOpen: boolean\r\n  /** Callback when modal should close */\r\n  onClose: () => void\r\n  /** Modal size */\r\n  size?: ModalSize\r\n  /** Modal title */\r\n  title?: ReactNode\r\n  /** Modal description */\r\n  description?: ReactNode\r\n  /** Whether to close on overlay click */\r\n  closeOnOverlayClick?: boolean\r\n  /** Whether to close on escape key */\r\n  closeOnEscape?: boolean\r\n  /** Whether to show close button */\r\n  showCloseButton?: boolean\r\n  /** Accessible label of the close button */\r\n  closeLabel?: string\r\n  /** Footer content (e.g. action buttons), pinned below the scrollable body */\r\n  footer?: ReactNode\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Modal content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst sizeWidths: Record<ModalSize, string> = {\r\n  sm: '400px',\r\n  md: '500px',\r\n  lg: '640px',\r\n  xl: '800px',\r\n  '2xl': '1200px',\r\n  full: 'calc(100vw - 48px)',\r\n}\r\n\r\n/** Close icon - memoized to prevent re-renders */\r\nconst CloseIcon = memo(function CloseIcon() {\r\n  return (\r\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M4 4L12 12M12 4L4 12\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"1.5\"\r\n        strokeLinecap=\"round\"\r\n      />\r\n    </svg>\r\n  )\r\n})\r\n\r\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(\r\n  {\r\n    isOpen,\r\n    onClose,\r\n    size = 'md',\r\n    title,\r\n    description,\r\n    closeOnOverlayClick = true,\r\n    closeOnEscape = true,\r\n    showCloseButton = true,\r\n    closeLabel = 'Close modal',\r\n    footer,\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const modalRef = useRef<HTMLDivElement>(null)\r\n  const titleId = useId('modal-title')\r\n  const descriptionId = useId('modal-description')\r\n  const previousActiveElement = useRef<HTMLElement | null>(null)\r\n  const wasOpen = useRef(false)\r\n\r\n  // Track previous open state to handle focus restoration before unmount\r\n  useEffect(() => {\r\n    // Modal just opened\r\n    if (isOpen && !wasOpen.current) {\r\n      previousActiveElement.current = document.activeElement as HTMLElement\r\n      wasOpen.current = true\r\n    }\r\n    // Modal is about to close - restore focus BEFORE unmount\r\n    else if (!isOpen && wasOpen.current) {\r\n      // Blur any focused element inside modal to prevent aria-hidden warning\r\n      if (document.activeElement instanceof HTMLElement) {\r\n        document.activeElement.blur()\r\n      }\r\n      // Restore focus to previous element\r\n      previousActiveElement.current?.focus()\r\n      previousActiveElement.current = null\r\n      wasOpen.current = false\r\n    }\r\n  }, [isOpen])\r\n\r\n  // Store onClose in a ref to avoid re-running effects when it changes\r\n  const onCloseRef = useRef(onClose)\r\n  useEffect(() => {\r\n    onCloseRef.current = onClose\r\n  }, [onClose])\r\n\r\n  // Focus modal when it opens (only once)\r\n  useEffect(() => {\r\n    if (!isOpen) return\r\n\r\n    const modal = modalRef.current\r\n    if (modal) {\r\n      modal.focus()\r\n    }\r\n  }, [isOpen])\r\n\r\n  // Keyboard handling and body scroll lock\r\n  useEffect(() => {\r\n    if (!isOpen) return\r\n\r\n    const modal = modalRef.current\r\n\r\n    const handleKeyDown = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape' && closeOnEscape) {\r\n        onCloseRef.current()\r\n        return\r\n      }\r\n\r\n      if (e.key === 'Tab' && modal) {\r\n        const focusableElements = modal.querySelectorAll<HTMLElement>(\r\n          'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [contenteditable=\"true\"], [tabindex]:not([tabindex=\"-1\"])'\r\n        )\r\n        const firstElement = focusableElements[0]\r\n        const lastElement = focusableElements[focusableElements.length - 1]\r\n\r\n        if (e.shiftKey && document.activeElement === firstElement) {\r\n          e.preventDefault()\r\n          lastElement?.focus()\r\n        } else if (!e.shiftKey && document.activeElement === lastElement) {\r\n          e.preventDefault()\r\n          firstElement?.focus()\r\n        }\r\n      }\r\n    }\r\n\r\n    document.addEventListener('keydown', handleKeyDown)\r\n    document.body.style.overflow = 'hidden'\r\n\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKeyDown)\r\n      document.body.style.overflow = ''\r\n    }\r\n  }, [isOpen, closeOnEscape])\r\n\r\n  const handleOverlayClick = useCallback(\r\n    (e: React.MouseEvent) => {\r\n      if (e.target === e.currentTarget && closeOnOverlayClick) {\r\n        onClose()\r\n      }\r\n    },\r\n    [closeOnOverlayClick, onClose]\r\n  )\r\n\r\n  // Memoize styles to prevent object recreation on every render\r\n  const overlayStyle = useMemo<CSSProperties>(() => ({\r\n    position: 'fixed',\r\n    inset: 0,\r\n    zIndex: 'var(--brycks-z-modal)',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    padding: spacing[6],\r\n    backgroundColor: 'var(--brycks-background-overlay)',\r\n    animation: 'brycks-fade-in var(--brycks-duration-normal) var(--brycks-ease-out)',\r\n  }), [])\r\n\r\n  const modalStyle = useMemo<CSSProperties>(() => ({\r\n    position: 'relative',\r\n    width: '100%',\r\n    maxWidth: sizeWidths[size],\r\n    maxHeight: size === 'full' ? 'calc(100vh - 48px)' : '85vh',\r\n    backgroundColor: 'var(--brycks-background-elevated)',\r\n    borderRadius: 'var(--brycks-radius-xl)',\r\n    boxShadow: 'var(--brycks-shadow-2xl)',\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    overflow: 'hidden',\r\n    animation: 'brycks-scale-in var(--brycks-duration-normal) var(--brycks-ease-out)',\r\n    outline: 'none',\r\n    ...style,\r\n  }), [size, style])\r\n\r\n  if (!isOpen) return null\r\n\r\n  const headerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'flex-start',\r\n    justifyContent: 'space-between',\r\n    padding: `${spacing[5]}px ${spacing[6]}px`,\r\n    borderBottom: '1px solid var(--brycks-border-muted)',\r\n  }\r\n\r\n  const titleContainerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    gap: spacing[1],\r\n  }\r\n\r\n  const titleStyle: CSSProperties = {\r\n    fontSize: fontSizes.lg,\r\n    fontWeight: 600,\r\n    color: 'var(--brycks-foreground-default)',\r\n    margin: 0,\r\n    lineHeight: 1.3,\r\n  }\r\n\r\n  const descriptionStyle: CSSProperties = {\r\n    fontSize: fontSizes.base,\r\n    color: 'var(--brycks-foreground-muted)',\r\n    margin: 0,\r\n  }\r\n\r\n  const closeButtonStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    width: iconButtonSizes.sm,\r\n    height: iconButtonSizes.sm,\r\n    borderRadius: 'var(--brycks-radius-md)',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    transition: 'all var(--brycks-duration-fast) var(--brycks-ease-out)',\r\n    marginLeft: componentGap.xl,\r\n    flexShrink: 0,\r\n  }\r\n\r\n  const contentStyle: CSSProperties = {\r\n    flex: 1,\r\n    overflow: 'auto',\r\n    padding: spacing[6],\r\n  }\r\n\r\n  const footerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'flex-end',\r\n    gap: spacing[2],\r\n    padding: `${spacing[4]}px ${spacing[6]}px`,\r\n    borderTop: '1px solid var(--brycks-border-muted)',\r\n  }\r\n\r\n  const modalContent = (\r\n    <div\r\n        className=\"brycks-modal-overlay\"\r\n        style={overlayStyle}\r\n        onClick={handleOverlayClick}\r\n      >\r\n        <div\r\n          ref={(node) => {\r\n            (modalRef as React.MutableRefObject<HTMLDivElement | null>).current = node\r\n            if (typeof ref === 'function') ref(node)\r\n            else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\r\n          }}\r\n          role=\"dialog\"\r\n          aria-modal=\"true\"\r\n          aria-labelledby={title ? titleId : undefined}\r\n          aria-describedby={description ? descriptionId : undefined}\r\n          className={cx('brycks-modal', `brycks-modal--${size}`, className)}\r\n          style={modalStyle}\r\n          tabIndex={-1}\r\n          data-testid={testId}\r\n          {...props}\r\n        >\r\n          {(title || showCloseButton) && (\r\n            <div className=\"brycks-modal-header\" style={headerStyle}>\r\n              <div style={titleContainerStyle}>\r\n                {title && (\r\n                  <h2 id={titleId} style={titleStyle}>\r\n                    {title}\r\n                  </h2>\r\n                )}\r\n                {description && (\r\n                  <p id={descriptionId} style={descriptionStyle}>\r\n                    {description}\r\n                  </p>\r\n                )}\r\n              </div>\r\n              {showCloseButton && (\r\n                <button\r\n                  type=\"button\"\r\n                  className=\"brycks-modal-close\"\r\n                  style={closeButtonStyle}\r\n                  onClick={onClose}\r\n                  aria-label={closeLabel}\r\n                  onMouseEnter={(e) => {\r\n                    e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\r\n                    e.currentTarget.style.color = 'var(--brycks-foreground-default)'\r\n                  }}\r\n                  onMouseLeave={(e) => {\r\n                    e.currentTarget.style.backgroundColor = 'transparent'\r\n                    e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\r\n                  }}\r\n                >\r\n                  <CloseIcon />\r\n                </button>\r\n              )}\r\n            </div>\r\n          )}\r\n\r\n          <div className=\"brycks-modal-content\" style={contentStyle}>\r\n            {children}\r\n          </div>\r\n\r\n          {footer && (\r\n            <div className=\"brycks-modal-footer\" style={footerStyle}>\r\n              {footer}\r\n            </div>\r\n          )}\r\n        </div>\r\n      </div>\r\n  )\r\n\r\n  return createPortal(modalContent, document.body)\r\n})\r\n\r\nModal.displayName = 'Modal'\r\n"],"names":["sizeWidths","CloseIcon","memo","jsx","Modal","forwardRef","isOpen","onClose","size","title","description","closeOnOverlayClick","closeOnEscape","showCloseButton","closeLabel","footer","className","style","testId","children","props","ref","modalRef","useRef","titleId","useId","descriptionId","previousActiveElement","wasOpen","useEffect","onCloseRef","modal","handleKeyDown","e","focusableElements","firstElement","lastElement","handleOverlayClick","useCallback","overlayStyle","useMemo","spacing","modalStyle","headerStyle","titleContainerStyle","titleStyle","fontSizes","descriptionStyle","closeButtonStyle","iconButtonSizes","componentGap","contentStyle","footerStyle","modalContent","jsxs","node","cx","createPortal"],"mappings":"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"}

package/dist/components/feedback/Popover/Popover.cjs

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),t=require("react"),V=require("react-dom"),Z=require("../../../utils/styles.cjs"),$=require("../../../hooks/useClickOutside.cjs"),ee=require("../../../hooks/useMediaQuery.cjs"),I=t.forwardRef(function({content:z,children:M,placement:E="bottom",trigger:s="click",isOpen:C,defaultOpen:A=!1,onOpenChange:x,offset:l=8,openDelay:P=200,closeDelay:T=200,closeOnOutsideClick:B=!0,showArrow:oe=!0,className:F,style:N,testId:X,...Y},h){const[K,Q]=t.useState(A),[L,W]=t.useState({top:0,left:0}),[v,O]=t.useState(!1),m=t.useRef(null),S=t.useRef(null),d=t.useRef(null),f=t.useRef(null),j=t.useId(),_=ee.usePrefersReducedMotion(),r=C??K,n=t.useCallback(e=>{C===void 0&&Q(e),x?.(e)},[C,x]),D=$.useClickOutside(()=>{B&&s==="click"&&r&&n(!1)},{enabled:r&&s==="click"});t.useEffect(()=>(O(!0),()=>O(!1)),[]),t.useEffect(()=>{if(!r||!m.current||!v)return;const e=()=>{const g=m.current,q=S.current;if(!g||!q)return;const o=g.getBoundingClientRect(),c=q.getBoundingClientRect(),p=window.scrollX,b=window.scrollY;let a=0,i=0;switch(E){case"top":case"top-start":case"top-end":a=o.top+b-c.height-l;break;case"bottom":case"bottom-start":case"bottom-end":a=o.bottom+b+l;break;case"left":case"left-start":case"left-end":i=o.left+p-c.width-l;break;case"right":case"right-start":case"right-end":i=o.right+p+l;break}switch(E){case"top":case"bottom":i=o.left+p+(o.width-c.width)/2;break;case"top-start":case"bottom-start":i=o.left+p;break;case"top-end":case"bottom-end":i=o.right+p-c.width;break;case"left":case"right":a=o.top+b+(o.height-c.height)/2;break;case"left-start":case"right-start":a=o.top+b;break;case"left-end":case"right-end":a=o.bottom+b-c.height;break}W({top:a,left:i})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[r,E,l,v]),t.useEffect(()=>()=>{d.current&&clearTimeout(d.current),f.current&&clearTimeout(f.current)},[]),t.useEffect(()=>{if(!r)return;const e=g=>{g.key==="Escape"&&(n(!1),m.current?.focus())};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[r,n]);const k=t.useCallback(()=>{f.current&&clearTimeout(f.current),s==="hover"?d.current=setTimeout(()=>n(!0),P):n(!0)},[s,P,n]),w=t.useCallback(()=>{d.current&&clearTimeout(d.current),s==="hover"?f.current=setTimeout(()=>n(!1),T):n(!1)},[s,T,n]),G=t.useCallback(()=>{r?w():k()},[r,k,w]),y=M.props,R=y.ref,H=t.cloneElement(M,{ref:e=>{m.current=e,typeof R=="function"?R(e):R&&(R.current=e)},"aria-expanded":r,"aria-haspopup":"dialog","aria-controls":r?j:void 0,...s==="click"&&{onClick:e=>{y.onClick?.(e),G()}},...s==="hover"&&{onMouseEnter:e=>{y.onMouseEnter?.(e),k()},onMouseLeave:e=>{y.onMouseLeave?.(e),w()}}}),J={position:"absolute",top:L.top,left:L.left,zIndex:"var(--brycks-z-popover)",backgroundColor:"var(--brycks-background-elevated)",border:"1px solid var(--brycks-border-default)",borderRadius:"var(--brycks-radius-lg)",boxShadow:"var(--brycks-shadow-lg)",padding:"var(--brycks-space-3)",minWidth:120,animation:_?"none":"brycks-popover-in 150ms ease-out",...N},U=r&&v&&u.jsxs(u.Fragment,{children:[u.jsx("style",{children:`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),t=require("react"),Z=require("react-dom"),_=require("../../../utils/styles.cjs"),$=require("../../../hooks/useClickOutside.cjs"),ee=require("../../../hooks/useMediaQuery.cjs"),I=t.forwardRef(function({content:z,children:M,placement:E="bottom",trigger:s="click",isOpen:C,defaultOpen:B=!1,onOpenChange:x,offset:l=8,openDelay:P=200,closeDelay:T=200,closeOnOutsideClick:F=!0,className:N,style:X,testId:Y,...K},v){const[Q,W]=t.useState(B),[L,A]=t.useState({top:0,left:0}),[h,O]=t.useState(!1),m=t.useRef(null),S=t.useRef(null),d=t.useRef(null),f=t.useRef(null),j=t.useId(),D=ee.usePrefersReducedMotion(),r=C??Q,n=t.useCallback(e=>{C===void 0&&W(e),x?.(e)},[C,x]),G=$.useClickOutside(()=>{F&&s==="click"&&r&&n(!1)},{enabled:r&&s==="click"});t.useEffect(()=>(O(!0),()=>O(!1)),[]),t.useEffect(()=>{if(!r||!m.current||!h)return;const e=()=>{const g=m.current,q=S.current;if(!g||!q)return;const o=g.getBoundingClientRect(),c=q.getBoundingClientRect(),p=window.scrollX,b=window.scrollY;let a=0,i=0;switch(E){case"top":case"top-start":case"top-end":a=o.top+b-c.height-l;break;case"bottom":case"bottom-start":case"bottom-end":a=o.bottom+b+l;break;case"left":case"left-start":case"left-end":i=o.left+p-c.width-l;break;case"right":case"right-start":case"right-end":i=o.right+p+l;break}switch(E){case"top":case"bottom":i=o.left+p+(o.width-c.width)/2;break;case"top-start":case"bottom-start":i=o.left+p;break;case"top-end":case"bottom-end":i=o.right+p-c.width;break;case"left":case"right":a=o.top+b+(o.height-c.height)/2;break;case"left-start":case"right-start":a=o.top+b;break;case"left-end":case"right-end":a=o.bottom+b-c.height;break}A({top:a,left:i})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[r,E,l,h]),t.useEffect(()=>()=>{d.current&&clearTimeout(d.current),f.current&&clearTimeout(f.current)},[]),t.useEffect(()=>{if(!r)return;const e=g=>{g.key==="Escape"&&(n(!1),m.current?.focus())};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[r,n]);const k=t.useCallback(()=>{f.current&&clearTimeout(f.current),s==="hover"?d.current=setTimeout(()=>n(!0),P):n(!0)},[s,P,n]),y=t.useCallback(()=>{d.current&&clearTimeout(d.current),s==="hover"?f.current=setTimeout(()=>n(!1),T):n(!1)},[s,T,n]),H=t.useCallback(()=>{r?y():k()},[r,k,y]),w=M.props,R=w.ref,J=t.cloneElement(M,{ref:e=>{m.current=e,typeof R=="function"?R(e):R&&(R.current=e)},"aria-expanded":r,"aria-haspopup":"dialog","aria-controls":r?j:void 0,...s==="click"&&{onClick:e=>{w.onClick?.(e),H()}},...s==="hover"&&{onMouseEnter:e=>{w.onMouseEnter?.(e),k()},onMouseLeave:e=>{w.onMouseLeave?.(e),y()}}}),U={position:"absolute",top:L.top,left:L.left,zIndex:"var(--brycks-z-popover)",backgroundColor:"var(--brycks-background-elevated)",border:"1px solid var(--brycks-border-default)",borderRadius:"var(--brycks-radius-lg)",boxShadow:"var(--brycks-shadow-lg)",padding:"var(--brycks-space-3)",minWidth:120,animation:D?"none":"brycks-popover-in 150ms ease-out",...X},V=r&&h&&u.jsxs(u.Fragment,{children:[u.jsx("style",{children:`
           @keyframes brycks-popover-in {
             from { opacity: 0; transform: scale(0.95); }
             to { opacity: 1; transform: scale(1); }
           }
-        `}),u.jsx("div",{ref:e=>{S.current=e,D.current=e,typeof h=="function"?h(e):h&&(h.current=e)},id:j,className:Z.cx("brycks-popover",F),style:J,role:"dialog","aria-modal":"false","data-testid":X,onMouseEnter:s==="hover"?k:void 0,onMouseLeave:s==="hover"?w:void 0,...Y,children:z})]});return u.jsxs(u.Fragment,{children:[H,v&&V.createPortal(U,document.body)]})});I.displayName="Popover";exports.Popover=I;
+        `}),u.jsx("div",{ref:e=>{S.current=e,G.current=e,typeof v=="function"?v(e):v&&(v.current=e)},id:j,className:_.cx("brycks-popover",N),style:U,role:"dialog","aria-modal":"false","data-testid":Y,onMouseEnter:s==="hover"?k:void 0,onMouseLeave:s==="hover"?y:void 0,...K,children:z})]});return u.jsxs(u.Fragment,{children:[J,h&&Z.createPortal(V,document.body)]})});I.displayName="Popover";exports.Popover=I;
 //# sourceMappingURL=Popover.cjs.map

package/dist/components/feedback/Popover/Popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.cjs","sources":["../../../../src/components/feedback/Popover/Popover.tsx"],"sourcesContent":["/**\n * Popover Component\n *\n * A floating content panel that appears relative to a trigger element.\n * Supports different placements and can be triggered by click or hover.\n */\n\nimport React, {\n  forwardRef,\n  useState,\n  useEffect,\n  useRef,\n  useCallback,\n  cloneElement,\n  useId,\n  type CSSProperties,\n  type ReactNode,\n  type ReactElement,\n  type HTMLAttributes,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { useClickOutside } from '../../../hooks/useClickOutside'\nimport { usePrefersReducedMotion } from '../../../hooks/useMediaQuery'\n\nexport type PopoverPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n\nexport type PopoverTrigger = 'click' | 'hover'\n\nexport interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {\n  /** Popover content */\n  content: ReactNode\n  /** Trigger element */\n  children: ReactElement\n  /** Placement relative to trigger */\n  placement?: PopoverPlacement\n  /** How to trigger the popover */\n  trigger?: PopoverTrigger\n  /** Whether the popover is open (controlled) */\n  isOpen?: boolean\n  /** Default open state (uncontrolled) */\n  defaultOpen?: boolean\n  /** Callback when open state changes */\n  onOpenChange?: (isOpen: boolean) => void\n  /** Offset from trigger in pixels */\n  offset?: number\n  /** Delay before showing (hover trigger) */\n  openDelay?: number\n  /** Delay before hiding (hover trigger) */\n  closeDelay?: number\n  /** Whether to close on outside click */\n  closeOnOutsideClick?: boolean\n  /** Whether to show arrow */\n  showArrow?: boolean\n  /** Custom class name for content */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const Popover = forwardRef<HTMLDivElement, PopoverProps>(function Popover(\n  {\n    content,\n    children,\n    placement = 'bottom',\n    trigger = 'click',\n    isOpen: controlledIsOpen,\n    defaultOpen = false,\n    onOpenChange,\n    offset = 8,\n    openDelay = 200,\n    closeDelay = 200,\n    closeOnOutsideClick = true,\n    showArrow: _showArrow = true,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [internalIsOpen, setInternalIsOpen] = useState(defaultOpen)\n  const [position, setPosition] = useState({ top: 0, left: 0 })\n  const [mounted, setMounted] = useState(false)\n  const triggerRef = useRef<HTMLElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const openTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null)\n  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null)\n  const popoverId = useId()\n  const prefersReducedMotion = usePrefersReducedMotion()\n\n  const isOpen = controlledIsOpen ?? internalIsOpen\n\n  const setIsOpen = useCallback(\n    (open: boolean) => {\n      if (controlledIsOpen === undefined) {\n        setInternalIsOpen(open)\n      }\n      onOpenChange?.(open)\n    },\n    [controlledIsOpen, onOpenChange]\n  )\n\n  // Click outside handler\n  const clickOutsideRef = useClickOutside<HTMLDivElement>(() => {\n    if (closeOnOutsideClick && trigger === 'click' && isOpen) {\n      setIsOpen(false)\n    }\n  }, { enabled: isOpen && trigger === 'click' })\n\n  useEffect(() => {\n    setMounted(true)\n    return () => setMounted(false)\n  }, [])\n\n  // Calculate position\n  useEffect(() => {\n    if (!isOpen || !triggerRef.current || !mounted) return\n\n    const updatePosition = () => {\n      const trigger = triggerRef.current\n      const content = contentRef.current\n      if (!trigger || !content) return\n\n      const triggerRect = trigger.getBoundingClientRect()\n      const contentRect = content.getBoundingClientRect()\n      const scrollX = window.scrollX\n      const scrollY = window.scrollY\n\n      let top = 0\n      let left = 0\n\n      // Calculate base position\n      switch (placement) {\n        case 'top':\n        case 'top-start':\n        case 'top-end':\n          top = triggerRect.top + scrollY - contentRect.height - offset\n          break\n        case 'bottom':\n        case 'bottom-start':\n        case 'bottom-end':\n          top = triggerRect.bottom + scrollY + offset\n          break\n        case 'left':\n        case 'left-start':\n        case 'left-end':\n          left = triggerRect.left + scrollX - contentRect.width - offset\n          break\n        case 'right':\n        case 'right-start':\n        case 'right-end':\n          left = triggerRect.right + scrollX + offset\n          break\n      }\n\n      // Calculate alignment\n      switch (placement) {\n        case 'top':\n        case 'bottom':\n          left = triggerRect.left + scrollX + (triggerRect.width - contentRect.width) / 2\n          break\n        case 'top-start':\n        case 'bottom-start':\n          left = triggerRect.left + scrollX\n          break\n        case 'top-end':\n        case 'bottom-end':\n          left = triggerRect.right + scrollX - contentRect.width\n          break\n        case 'left':\n        case 'right':\n          top = triggerRect.top + scrollY + (triggerRect.height - contentRect.height) / 2\n          break\n        case 'left-start':\n        case 'right-start':\n          top = triggerRect.top + scrollY\n          break\n        case 'left-end':\n        case 'right-end':\n          top = triggerRect.bottom + scrollY - contentRect.height\n          break\n      }\n\n      setPosition({ top, left })\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, placement, offset, mounted])\n\n  // Cleanup timeouts\n  useEffect(() => {\n    return () => {\n      if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current)\n      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current)\n    }\n  }, [])\n\n  // Escape dismisses the popover and returns focus to the trigger (WCAG 1.4.13)\n  useEffect(() => {\n    if (!isOpen) return\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setIsOpen(false)\n        triggerRef.current?.focus()\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [isOpen, setIsOpen])\n\n  const handleOpen = useCallback(() => {\n    if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current)\n    if (trigger === 'hover') {\n      openTimeoutRef.current = setTimeout(() => setIsOpen(true), openDelay)\n    } else {\n      setIsOpen(true)\n    }\n  }, [trigger, openDelay, setIsOpen])\n\n  const handleClose = useCallback(() => {\n    if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current)\n    if (trigger === 'hover') {\n      closeTimeoutRef.current = setTimeout(() => setIsOpen(false), closeDelay)\n    } else {\n      setIsOpen(false)\n    }\n  }, [trigger, closeDelay, setIsOpen])\n\n  const handleToggle = useCallback(() => {\n    if (isOpen) {\n      handleClose()\n    } else {\n      handleOpen()\n    }\n  }, [isOpen, handleOpen, handleClose])\n\n  // Clone trigger with event handlers and ARIA attributes\n  const childProps = children.props as Record<string, unknown>\n  const childRef = childProps.ref as React.Ref<HTMLElement> | undefined\n  const triggerElement = cloneElement(children as ReactElement<Record<string, unknown>>, {\n    // Merge refs so a ref the consumer set on the trigger keeps working\n    ref: (node: HTMLElement | null) => {\n      (triggerRef as React.MutableRefObject<HTMLElement | null>).current = node\n      if (typeof childRef === 'function') childRef(node)\n      else if (childRef) (childRef as React.MutableRefObject<HTMLElement | null>).current = node\n    },\n    'aria-expanded': isOpen,\n    'aria-haspopup': 'dialog',\n    'aria-controls': isOpen ? popoverId : undefined,\n    ...(trigger === 'click' && {\n      onClick: (e: React.MouseEvent) => {\n        (childProps.onClick as ((e: React.MouseEvent) => void) | undefined)?.(e)\n        handleToggle()\n      },\n    }),\n    ...(trigger === 'hover' && {\n      onMouseEnter: (e: React.MouseEvent) => {\n        (childProps.onMouseEnter as ((e: React.MouseEvent) => void) | undefined)?.(e)\n        handleOpen()\n      },\n      onMouseLeave: (e: React.MouseEvent) => {\n        (childProps.onMouseLeave as ((e: React.MouseEvent) => void) | undefined)?.(e)\n        handleClose()\n      },\n    }),\n  })\n\n  const contentStyle: CSSProperties = {\n    position: 'absolute',\n    top: position.top,\n    left: position.left,\n    zIndex: 'var(--brycks-z-popover)',\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    padding: 'var(--brycks-space-3)',\n    minWidth: 120,\n    animation: prefersReducedMotion ? 'none' : 'brycks-popover-in 150ms ease-out',\n    ...style,\n  }\n\n  const popoverContent = isOpen && mounted && (\n    <>\n      <style>\n        {`\n          @keyframes brycks-popover-in {\n            from { opacity: 0; transform: scale(0.95); }\n            to { opacity: 1; transform: scale(1); }\n          }\n        `}\n      </style>\n      <div\n        ref={(node) => {\n          (contentRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n          (clickOutsideRef as React.MutableRefObject<HTMLDivElement | null>).current = node\n          if (typeof ref === 'function') ref(node)\n          else if (ref) ref.current = node\n        }}\n        id={popoverId}\n        className={cx('brycks-popover', className)}\n        style={contentStyle}\n        role=\"dialog\"\n        aria-modal=\"false\"\n        data-testid={testId}\n        onMouseEnter={trigger === 'hover' ? handleOpen : undefined}\n        onMouseLeave={trigger === 'hover' ? handleClose : undefined}\n        {...props}\n      >\n        {content}\n      </div>\n    </>\n  )\n\n  return (\n    <>\n      {triggerElement}\n      {mounted && createPortal(popoverContent, document.body)}\n    </>\n  )\n})\n\nPopover.displayName = 'Popover'\n"],"names":["Popover","forwardRef","content","children","placement","trigger","controlledIsOpen","defaultOpen","onOpenChange","offset","openDelay","closeDelay","closeOnOutsideClick","_showArrow","className","style","testId","props","ref","internalIsOpen","setInternalIsOpen","useState","position","setPosition","mounted","setMounted","triggerRef","useRef","contentRef","openTimeoutRef","closeTimeoutRef","popoverId","useId","prefersReducedMotion","usePrefersReducedMotion","isOpen","setIsOpen","useCallback","open","clickOutsideRef","useClickOutside","useEffect","updatePosition","triggerRect","contentRect","scrollX","scrollY","top","left","handleKeyDown","e","handleOpen","handleClose","handleToggle","childProps","childRef","triggerElement","cloneElement","node","contentStyle","popoverContent","jsxs","Fragment","jsx","cx","createPortal"],"mappings":"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"}
+{"version":3,"file":"Popover.cjs","sources":["../../../../src/components/feedback/Popover/Popover.tsx"],"sourcesContent":["/**\n * Popover Component\n *\n * A floating content panel that appears relative to a trigger element.\n * Supports different placements and can be triggered by click or hover.\n */\n\nimport React, {\n  forwardRef,\n  useState,\n  useEffect,\n  useRef,\n  useCallback,\n  cloneElement,\n  useId,\n  type CSSProperties,\n  type ReactNode,\n  type ReactElement,\n  type HTMLAttributes,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { useClickOutside } from '../../../hooks/useClickOutside'\nimport { usePrefersReducedMotion } from '../../../hooks/useMediaQuery'\n\nexport type PopoverPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n\nexport type PopoverTrigger = 'click' | 'hover'\n\nexport interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {\n  /** Popover content */\n  content: ReactNode\n  /** Trigger element */\n  children: ReactElement\n  /** Placement relative to trigger */\n  placement?: PopoverPlacement\n  /** How to trigger the popover */\n  trigger?: PopoverTrigger\n  /** Whether the popover is open (controlled) */\n  isOpen?: boolean\n  /** Default open state (uncontrolled) */\n  defaultOpen?: boolean\n  /** Callback when open state changes */\n  onOpenChange?: (isOpen: boolean) => void\n  /** Offset from trigger in pixels */\n  offset?: number\n  /** Delay before showing (hover trigger) */\n  openDelay?: number\n  /** Delay before hiding (hover trigger) */\n  closeDelay?: number\n  /** Whether to close on outside click */\n  closeOnOutsideClick?: boolean\n  /** Custom class name for content */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const Popover = forwardRef<HTMLDivElement, PopoverProps>(function Popover(\n  {\n    content,\n    children,\n    placement = 'bottom',\n    trigger = 'click',\n    isOpen: controlledIsOpen,\n    defaultOpen = false,\n    onOpenChange,\n    offset = 8,\n    openDelay = 200,\n    closeDelay = 200,\n    closeOnOutsideClick = true,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [internalIsOpen, setInternalIsOpen] = useState(defaultOpen)\n  const [position, setPosition] = useState({ top: 0, left: 0 })\n  const [mounted, setMounted] = useState(false)\n  const triggerRef = useRef<HTMLElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const openTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null)\n  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null)\n  const popoverId = useId()\n  const prefersReducedMotion = usePrefersReducedMotion()\n\n  const isOpen = controlledIsOpen ?? internalIsOpen\n\n  const setIsOpen = useCallback(\n    (open: boolean) => {\n      if (controlledIsOpen === undefined) {\n        setInternalIsOpen(open)\n      }\n      onOpenChange?.(open)\n    },\n    [controlledIsOpen, onOpenChange]\n  )\n\n  // Click outside handler\n  const clickOutsideRef = useClickOutside<HTMLDivElement>(() => {\n    if (closeOnOutsideClick && trigger === 'click' && isOpen) {\n      setIsOpen(false)\n    }\n  }, { enabled: isOpen && trigger === 'click' })\n\n  useEffect(() => {\n    setMounted(true)\n    return () => setMounted(false)\n  }, [])\n\n  // Calculate position\n  useEffect(() => {\n    if (!isOpen || !triggerRef.current || !mounted) return\n\n    const updatePosition = () => {\n      const trigger = triggerRef.current\n      const content = contentRef.current\n      if (!trigger || !content) return\n\n      const triggerRect = trigger.getBoundingClientRect()\n      const contentRect = content.getBoundingClientRect()\n      const scrollX = window.scrollX\n      const scrollY = window.scrollY\n\n      let top = 0\n      let left = 0\n\n      // Calculate base position\n      switch (placement) {\n        case 'top':\n        case 'top-start':\n        case 'top-end':\n          top = triggerRect.top + scrollY - contentRect.height - offset\n          break\n        case 'bottom':\n        case 'bottom-start':\n        case 'bottom-end':\n          top = triggerRect.bottom + scrollY + offset\n          break\n        case 'left':\n        case 'left-start':\n        case 'left-end':\n          left = triggerRect.left + scrollX - contentRect.width - offset\n          break\n        case 'right':\n        case 'right-start':\n        case 'right-end':\n          left = triggerRect.right + scrollX + offset\n          break\n      }\n\n      // Calculate alignment\n      switch (placement) {\n        case 'top':\n        case 'bottom':\n          left = triggerRect.left + scrollX + (triggerRect.width - contentRect.width) / 2\n          break\n        case 'top-start':\n        case 'bottom-start':\n          left = triggerRect.left + scrollX\n          break\n        case 'top-end':\n        case 'bottom-end':\n          left = triggerRect.right + scrollX - contentRect.width\n          break\n        case 'left':\n        case 'right':\n          top = triggerRect.top + scrollY + (triggerRect.height - contentRect.height) / 2\n          break\n        case 'left-start':\n        case 'right-start':\n          top = triggerRect.top + scrollY\n          break\n        case 'left-end':\n        case 'right-end':\n          top = triggerRect.bottom + scrollY - contentRect.height\n          break\n      }\n\n      setPosition({ top, left })\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, placement, offset, mounted])\n\n  // Cleanup timeouts\n  useEffect(() => {\n    return () => {\n      if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current)\n      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current)\n    }\n  }, [])\n\n  // Escape dismisses the popover and returns focus to the trigger (WCAG 1.4.13)\n  useEffect(() => {\n    if (!isOpen) return\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setIsOpen(false)\n        triggerRef.current?.focus()\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [isOpen, setIsOpen])\n\n  const handleOpen = useCallback(() => {\n    if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current)\n    if (trigger === 'hover') {\n      openTimeoutRef.current = setTimeout(() => setIsOpen(true), openDelay)\n    } else {\n      setIsOpen(true)\n    }\n  }, [trigger, openDelay, setIsOpen])\n\n  const handleClose = useCallback(() => {\n    if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current)\n    if (trigger === 'hover') {\n      closeTimeoutRef.current = setTimeout(() => setIsOpen(false), closeDelay)\n    } else {\n      setIsOpen(false)\n    }\n  }, [trigger, closeDelay, setIsOpen])\n\n  const handleToggle = useCallback(() => {\n    if (isOpen) {\n      handleClose()\n    } else {\n      handleOpen()\n    }\n  }, [isOpen, handleOpen, handleClose])\n\n  // Clone trigger with event handlers and ARIA attributes\n  const childProps = children.props as Record<string, unknown>\n  const childRef = childProps.ref as React.Ref<HTMLElement> | undefined\n  const triggerElement = cloneElement(children as ReactElement<Record<string, unknown>>, {\n    // Merge refs so a ref the consumer set on the trigger keeps working\n    ref: (node: HTMLElement | null) => {\n      (triggerRef as React.MutableRefObject<HTMLElement | null>).current = node\n      if (typeof childRef === 'function') childRef(node)\n      else if (childRef) (childRef as React.MutableRefObject<HTMLElement | null>).current = node\n    },\n    'aria-expanded': isOpen,\n    'aria-haspopup': 'dialog',\n    'aria-controls': isOpen ? popoverId : undefined,\n    ...(trigger === 'click' && {\n      onClick: (e: React.MouseEvent) => {\n        (childProps.onClick as ((e: React.MouseEvent) => void) | undefined)?.(e)\n        handleToggle()\n      },\n    }),\n    ...(trigger === 'hover' && {\n      onMouseEnter: (e: React.MouseEvent) => {\n        (childProps.onMouseEnter as ((e: React.MouseEvent) => void) | undefined)?.(e)\n        handleOpen()\n      },\n      onMouseLeave: (e: React.MouseEvent) => {\n        (childProps.onMouseLeave as ((e: React.MouseEvent) => void) | undefined)?.(e)\n        handleClose()\n      },\n    }),\n  })\n\n  const contentStyle: CSSProperties = {\n    position: 'absolute',\n    top: position.top,\n    left: position.left,\n    zIndex: 'var(--brycks-z-popover)',\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    padding: 'var(--brycks-space-3)',\n    minWidth: 120,\n    animation: prefersReducedMotion ? 'none' : 'brycks-popover-in 150ms ease-out',\n    ...style,\n  }\n\n  const popoverContent = isOpen && mounted && (\n    <>\n      <style>\n        {`\n          @keyframes brycks-popover-in {\n            from { opacity: 0; transform: scale(0.95); }\n            to { opacity: 1; transform: scale(1); }\n          }\n        `}\n      </style>\n      <div\n        ref={(node) => {\n          (contentRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n          (clickOutsideRef as React.MutableRefObject<HTMLDivElement | null>).current = node\n          if (typeof ref === 'function') ref(node)\n          else if (ref) ref.current = node\n        }}\n        id={popoverId}\n        className={cx('brycks-popover', className)}\n        style={contentStyle}\n        role=\"dialog\"\n        aria-modal=\"false\"\n        data-testid={testId}\n        onMouseEnter={trigger === 'hover' ? handleOpen : undefined}\n        onMouseLeave={trigger === 'hover' ? handleClose : undefined}\n        {...props}\n      >\n        {content}\n      </div>\n    </>\n  )\n\n  return (\n    <>\n      {triggerElement}\n      {mounted && createPortal(popoverContent, document.body)}\n    </>\n  )\n})\n\nPopover.displayName = 'Popover'\n"],"names":["Popover","forwardRef","content","children","placement","trigger","controlledIsOpen","defaultOpen","onOpenChange","offset","openDelay","closeDelay","closeOnOutsideClick","className","style","testId","props","ref","internalIsOpen","setInternalIsOpen","useState","position","setPosition","mounted","setMounted","triggerRef","useRef","contentRef","openTimeoutRef","closeTimeoutRef","popoverId","useId","prefersReducedMotion","usePrefersReducedMotion","isOpen","setIsOpen","useCallback","open","clickOutsideRef","useClickOutside","useEffect","updatePosition","triggerRect","contentRect","scrollX","scrollY","top","left","handleKeyDown","e","handleOpen","handleClose","handleToggle","childProps","childRef","triggerElement","cloneElement","node","contentStyle","popoverContent","jsxs","Fragment","jsx","cx","createPortal"],"mappings":"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"}