@brycks/core-front 0.2.7 → 0.2.9

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.cjs","sources":["../../../../src/components/feedback/Drawer/Drawer.tsx"],"sourcesContent":["/**\n * Drawer Component\n *\n * A slide-out panel that can appear from any edge of the screen.\n * Supports focus trapping and keyboard navigation.\n */\n\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  useCallback,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\n\nexport type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom'\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Whether the drawer is open */\n  isOpen: boolean\n  /** Callback when drawer should close */\n  onClose: () => void\n  /** Drawer placement */\n  placement?: DrawerPlacement\n  /** Drawer size */\n  size?: DrawerSize\n  /** Drawer title */\n  title?: ReactNode\n  /** Whether to close on overlay click */\n  closeOnOverlayClick?: boolean\n  /** Whether to close on escape key */\n  closeOnEscape?: boolean\n  /** Whether to show close button */\n  showCloseButton?: boolean\n  /** Whether to show overlay */\n  showOverlay?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeMap: Record<DrawerSize, string> = {\n  sm: '320px',\n  md: '400px',\n  lg: '560px',\n  xl: '720px',\n  full: '100%',\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 Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n  {\n    isOpen,\n    onClose,\n    placement = 'right',\n    size = 'md',\n    title,\n    closeOnOverlayClick = true,\n    closeOnEscape = true,\n    showCloseButton = true,\n    showOverlay = true,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const drawerRef = useRef<HTMLDivElement>(null)\n  const previousActiveElement = useRef<HTMLElement | null>(null)\n\n  // Focus trap and keyboard handling\n  useEffect(() => {\n    if (!isOpen) return\n\n    previousActiveElement.current = document.activeElement as HTMLElement\n    const drawer = drawerRef.current\n    if (drawer) {\n      drawer.focus()\n    }\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && closeOnEscape) {\n        onClose()\n        return\n      }\n\n      if (e.key === 'Tab' && drawer) {\n        const focusableElements = drawer.querySelectorAll<HTMLElement>(\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        )\n        const firstElement = focusableElements[0]\n        const lastElement = focusableElements[focusableElements.length - 1]\n\n        if (e.shiftKey && document.activeElement === firstElement) {\n          e.preventDefault()\n          lastElement?.focus()\n        } else if (!e.shiftKey && document.activeElement === lastElement) {\n          e.preventDefault()\n          firstElement?.focus()\n        }\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown)\n    document.body.style.overflow = 'hidden'\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown)\n      document.body.style.overflow = ''\n      previousActiveElement.current?.focus()\n    }\n  }, [isOpen, closeOnEscape, onClose])\n\n  const handleOverlayClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === e.currentTarget && closeOnOverlayClick) {\n        onClose()\n      }\n    },\n    [closeOnOverlayClick, onClose]\n  )\n\n  if (!isOpen) return null\n\n  const isHorizontal = placement === 'left' || placement === 'right'\n  const drawerSize = sizeMap[size]\n\n  const overlayStyle: CSSProperties = {\n    position: 'fixed',\n    inset: 0,\n    zIndex: 'var(--brycks-z-drawer)' as unknown as number,\n    display: 'flex',\n    backgroundColor: showOverlay ? 'var(--brycks-background-overlay)' : 'transparent',\n    animation: 'brycks-drawer-overlay-in 200ms ease-out',\n  }\n\n  const getPositionStyles = (): CSSProperties => {\n    const base: CSSProperties = {\n      position: 'absolute',\n      backgroundColor: 'var(--brycks-background-elevated)',\n      boxShadow: 'var(--brycks-shadow-2xl)',\n      display: 'flex',\n      flexDirection: 'column',\n      overflow: 'hidden',\n    }\n\n    if (isHorizontal) {\n      return {\n        ...base,\n        top: 0,\n        bottom: 0,\n        [placement]: 0,\n        width: drawerSize,\n        maxWidth: '100vw',\n      }\n    }\n\n    return {\n      ...base,\n      left: 0,\n      right: 0,\n      [placement]: 0,\n      height: drawerSize,\n      maxHeight: '100vh',\n    }\n  }\n\n  const drawerStyle: CSSProperties = {\n    ...getPositionStyles(),\n    animation: `brycks-drawer-${placement}-in 250ms cubic-bezier(0.32, 0.72, 0, 1)`,\n    outline: 'none',\n    ...style,\n  }\n\n  const headerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    padding: '16px 20px',\n    borderBottom: '1px solid var(--brycks-border-muted)',\n    flexShrink: 0,\n  }\n\n  const titleStyle: CSSProperties = {\n    fontSize: 18,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-default)',\n    margin: 0,\n  }\n\n  const closeButtonStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 32,\n    height: 32,\n    borderRadius: 'var(--brycks-radius-md)',\n    color: 'var(--brycks-foreground-muted)',\n    transition: 'all 150ms ease-out',\n  }\n\n  const contentStyle: CSSProperties = {\n    flex: 1,\n    overflow: 'auto',\n    padding: 20,\n  }\n\n  const drawerContent = (\n    <>\n      <style>\n        {`\n          @keyframes brycks-drawer-overlay-in {\n            from { opacity: 0; }\n            to { opacity: 1; }\n          }\n          @keyframes brycks-drawer-left-in {\n            from { transform: translateX(-100%); }\n            to { transform: translateX(0); }\n          }\n          @keyframes brycks-drawer-right-in {\n            from { transform: translateX(100%); }\n            to { transform: translateX(0); }\n          }\n          @keyframes brycks-drawer-top-in {\n            from { transform: translateY(-100%); }\n            to { transform: translateY(0); }\n          }\n          @keyframes brycks-drawer-bottom-in {\n            from { transform: translateY(100%); }\n            to { transform: translateY(0); }\n          }\n        `}\n      </style>\n      <div\n        className=\"brycks-drawer-overlay\"\n        style={overlayStyle}\n        onClick={handleOverlayClick}\n        aria-hidden=\"true\"\n      >\n        <div\n          ref={(node) => {\n            (drawerRef as React.MutableRefObject<HTMLDivElement | null>).current = node\n            if (typeof ref === 'function') ref(node)\n            else if (ref) ref.current = node\n          }}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={title ? 'brycks-drawer-title' : undefined}\n          className={cx('brycks-drawer', `brycks-drawer--${placement}`, `brycks-drawer--${size}`, className)}\n          style={drawerStyle}\n          tabIndex={-1}\n          data-testid={testId}\n          {...props}\n        >\n          {(title || showCloseButton) && (\n            <div className=\"brycks-drawer-header\" style={headerStyle}>\n              {title && <h2 id=\"brycks-drawer-title\" style={titleStyle}>{title}</h2>}\n              {showCloseButton && (\n                <button\n                  type=\"button\"\n                  className=\"brycks-drawer-close\"\n                  style={closeButtonStyle}\n                  onClick={onClose}\n                  aria-label=\"Close drawer\"\n                  onMouseEnter={(e) => {\n                    e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n                    e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n                  }}\n                  onMouseLeave={(e) => {\n                    e.currentTarget.style.backgroundColor = 'transparent'\n                    e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\n                  }}\n                >\n                  <CloseIcon />\n                </button>\n              )}\n            </div>\n          )}\n          <div className=\"brycks-drawer-content\" style={contentStyle}>\n            {children}\n          </div>\n        </div>\n      </div>\n    </>\n  )\n\n  return createPortal(drawerContent, document.body)\n})\n\nDrawer.displayName = 'Drawer'\n"],"names":["sizeMap","CloseIcon","jsx","Drawer","forwardRef","isOpen","onClose","placement","size","title","closeOnOverlayClick","closeOnEscape","showCloseButton","showOverlay","className","style","children","testId","props","ref","drawerRef","useRef","previousActiveElement","useEffect","drawer","handleKeyDown","e","focusableElements","firstElement","lastElement","handleOverlayClick","useCallback","isHorizontal","drawerSize","overlayStyle","drawerStyle","base","headerStyle","titleStyle","closeButtonStyle","contentStyle","drawerContent","jsxs","Fragment","node","cx","createPortal"],"mappings":"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"}

package/dist/components/feedback/Drawer/Drawer.js

@@ -0,0 +1,199 @@
+import { jsxs as c, Fragment as Y, jsx as e } from "react/jsx-runtime";
+import { forwardRef as K, useRef as g, useEffect as P, useCallback as W } from "react";
+import { createPortal as $ } from "react-dom";
+import { cx as A } from "../../../utils/styles.js";
+const B = {
+  sm: "320px",
+  md: "400px",
+  lg: "560px",
+  xl: "720px",
+  full: "100%"
+};
+function H() {
+  return /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ e("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
+}
+const q = K(function({
+  isOpen: l,
+  onClose: a,
+  placement: t = "right",
+  size: d = "md",
+  title: n,
+  closeOnOverlayClick: u = !0,
+  closeOnEscape: y = !0,
+  showCloseButton: f = !0,
+  showOverlay: p = !0,
+  className: x,
+  style: S,
+  children: E,
+  testId: C,
+  ...D
+}, s) {
+  const m = g(null), b = g(null);
+  P(() => {
+    if (!l) return;
+    b.current = document.activeElement;
+    const r = m.current;
+    r && r.focus();
+    const h = (o) => {
+      if (o.key === "Escape" && y) {
+        a();
+        return;
+      }
+      if (o.key === "Tab" && r) {
+        const i = r.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        ), v = i[0], w = i[i.length - 1];
+        o.shiftKey && document.activeElement === v ? (o.preventDefault(), w?.focus()) : !o.shiftKey && document.activeElement === w && (o.preventDefault(), v?.focus());
+      }
+    };
+    return document.addEventListener("keydown", h), document.body.style.overflow = "hidden", () => {
+      document.removeEventListener("keydown", h), document.body.style.overflow = "", b.current?.focus();
+    };
+  }, [l, y, a]);
+  const z = W(
+    (r) => {
+      r.target === r.currentTarget && u && a();
+    },
+    [u, a]
+  );
+  if (!l) return null;
+  const N = t === "left" || t === "right", k = B[d], T = {
+    position: "fixed",
+    inset: 0,
+    zIndex: "var(--brycks-z-drawer)",
+    display: "flex",
+    backgroundColor: p ? "var(--brycks-background-overlay)" : "transparent",
+    animation: "brycks-drawer-overlay-in 200ms ease-out"
+  }, I = {
+    ...(() => {
+      const r = {
+        position: "absolute",
+        backgroundColor: "var(--brycks-background-elevated)",
+        boxShadow: "var(--brycks-shadow-2xl)",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      };
+      return N ? {
+        ...r,
+        top: 0,
+        bottom: 0,
+        [t]: 0,
+        width: k,
+        maxWidth: "100vw"
+      } : {
+        ...r,
+        left: 0,
+        right: 0,
+        [t]: 0,
+        height: k,
+        maxHeight: "100vh"
+      };
+    })(),
+    animation: `brycks-drawer-${t}-in 250ms cubic-bezier(0.32, 0.72, 0, 1)`,
+    outline: "none",
+    ...S
+  }, M = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "16px 20px",
+    borderBottom: "1px solid var(--brycks-border-muted)",
+    flexShrink: 0
+  }, j = {
+    fontSize: 18,
+    fontWeight: 600,
+    color: "var(--brycks-foreground-default)",
+    margin: 0
+  }, L = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 32,
+    height: 32,
+    borderRadius: "var(--brycks-radius-md)",
+    color: "var(--brycks-foreground-muted)",
+    transition: "all 150ms ease-out"
+  }, R = {
+    flex: 1,
+    overflow: "auto",
+    padding: 20
+  }, X = /* @__PURE__ */ c(Y, { children: [
+    /* @__PURE__ */ e("style", { children: `
+          @keyframes brycks-drawer-overlay-in {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+          @keyframes brycks-drawer-left-in {
+            from { transform: translateX(-100%); }
+            to { transform: translateX(0); }
+          }
+          @keyframes brycks-drawer-right-in {
+            from { transform: translateX(100%); }
+            to { transform: translateX(0); }
+          }
+          @keyframes brycks-drawer-top-in {
+            from { transform: translateY(-100%); }
+            to { transform: translateY(0); }
+          }
+          @keyframes brycks-drawer-bottom-in {
+            from { transform: translateY(100%); }
+            to { transform: translateY(0); }
+          }
+        ` }),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "brycks-drawer-overlay",
+        style: T,
+        onClick: z,
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ c(
+          "div",
+          {
+            ref: (r) => {
+              m.current = r, typeof s == "function" ? s(r) : s && (s.current = r);
+            },
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": n ? "brycks-drawer-title" : void 0,
+            className: A("brycks-drawer", `brycks-drawer--${t}`, `brycks-drawer--${d}`, x),
+            style: I,
+            tabIndex: -1,
+            "data-testid": C,
+            ...D,
+            children: [
+              (n || f) && /* @__PURE__ */ c("div", { className: "brycks-drawer-header", style: M, children: [
+                n && /* @__PURE__ */ e("h2", { id: "brycks-drawer-title", style: j, children: n }),
+                f && /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    className: "brycks-drawer-close",
+                    style: L,
+                    onClick: a,
+                    "aria-label": "Close drawer",
+                    onMouseEnter: (r) => {
+                      r.currentTarget.style.backgroundColor = "var(--brycks-background-muted)", r.currentTarget.style.color = "var(--brycks-foreground-default)";
+                    },
+                    onMouseLeave: (r) => {
+                      r.currentTarget.style.backgroundColor = "transparent", r.currentTarget.style.color = "var(--brycks-foreground-muted)";
+                    },
+                    children: /* @__PURE__ */ e(H, {})
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e("div", { className: "brycks-drawer-content", style: R, children: E })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+  return $(X, document.body);
+});
+q.displayName = "Drawer";
+export {
+  q as Drawer
+};
+//# sourceMappingURL=Drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../../src/components/feedback/Drawer/Drawer.tsx"],"sourcesContent":["/**\n * Drawer Component\n *\n * A slide-out panel that can appear from any edge of the screen.\n * Supports focus trapping and keyboard navigation.\n */\n\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  useCallback,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\n\nexport type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom'\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Whether the drawer is open */\n  isOpen: boolean\n  /** Callback when drawer should close */\n  onClose: () => void\n  /** Drawer placement */\n  placement?: DrawerPlacement\n  /** Drawer size */\n  size?: DrawerSize\n  /** Drawer title */\n  title?: ReactNode\n  /** Whether to close on overlay click */\n  closeOnOverlayClick?: boolean\n  /** Whether to close on escape key */\n  closeOnEscape?: boolean\n  /** Whether to show close button */\n  showCloseButton?: boolean\n  /** Whether to show overlay */\n  showOverlay?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeMap: Record<DrawerSize, string> = {\n  sm: '320px',\n  md: '400px',\n  lg: '560px',\n  xl: '720px',\n  full: '100%',\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 Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n  {\n    isOpen,\n    onClose,\n    placement = 'right',\n    size = 'md',\n    title,\n    closeOnOverlayClick = true,\n    closeOnEscape = true,\n    showCloseButton = true,\n    showOverlay = true,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const drawerRef = useRef<HTMLDivElement>(null)\n  const previousActiveElement = useRef<HTMLElement | null>(null)\n\n  // Focus trap and keyboard handling\n  useEffect(() => {\n    if (!isOpen) return\n\n    previousActiveElement.current = document.activeElement as HTMLElement\n    const drawer = drawerRef.current\n    if (drawer) {\n      drawer.focus()\n    }\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && closeOnEscape) {\n        onClose()\n        return\n      }\n\n      if (e.key === 'Tab' && drawer) {\n        const focusableElements = drawer.querySelectorAll<HTMLElement>(\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        )\n        const firstElement = focusableElements[0]\n        const lastElement = focusableElements[focusableElements.length - 1]\n\n        if (e.shiftKey && document.activeElement === firstElement) {\n          e.preventDefault()\n          lastElement?.focus()\n        } else if (!e.shiftKey && document.activeElement === lastElement) {\n          e.preventDefault()\n          firstElement?.focus()\n        }\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown)\n    document.body.style.overflow = 'hidden'\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown)\n      document.body.style.overflow = ''\n      previousActiveElement.current?.focus()\n    }\n  }, [isOpen, closeOnEscape, onClose])\n\n  const handleOverlayClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === e.currentTarget && closeOnOverlayClick) {\n        onClose()\n      }\n    },\n    [closeOnOverlayClick, onClose]\n  )\n\n  if (!isOpen) return null\n\n  const isHorizontal = placement === 'left' || placement === 'right'\n  const drawerSize = sizeMap[size]\n\n  const overlayStyle: CSSProperties = {\n    position: 'fixed',\n    inset: 0,\n    zIndex: 'var(--brycks-z-drawer)' as unknown as number,\n    display: 'flex',\n    backgroundColor: showOverlay ? 'var(--brycks-background-overlay)' : 'transparent',\n    animation: 'brycks-drawer-overlay-in 200ms ease-out',\n  }\n\n  const getPositionStyles = (): CSSProperties => {\n    const base: CSSProperties = {\n      position: 'absolute',\n      backgroundColor: 'var(--brycks-background-elevated)',\n      boxShadow: 'var(--brycks-shadow-2xl)',\n      display: 'flex',\n      flexDirection: 'column',\n      overflow: 'hidden',\n    }\n\n    if (isHorizontal) {\n      return {\n        ...base,\n        top: 0,\n        bottom: 0,\n        [placement]: 0,\n        width: drawerSize,\n        maxWidth: '100vw',\n      }\n    }\n\n    return {\n      ...base,\n      left: 0,\n      right: 0,\n      [placement]: 0,\n      height: drawerSize,\n      maxHeight: '100vh',\n    }\n  }\n\n  const drawerStyle: CSSProperties = {\n    ...getPositionStyles(),\n    animation: `brycks-drawer-${placement}-in 250ms cubic-bezier(0.32, 0.72, 0, 1)`,\n    outline: 'none',\n    ...style,\n  }\n\n  const headerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    padding: '16px 20px',\n    borderBottom: '1px solid var(--brycks-border-muted)',\n    flexShrink: 0,\n  }\n\n  const titleStyle: CSSProperties = {\n    fontSize: 18,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-default)',\n    margin: 0,\n  }\n\n  const closeButtonStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 32,\n    height: 32,\n    borderRadius: 'var(--brycks-radius-md)',\n    color: 'var(--brycks-foreground-muted)',\n    transition: 'all 150ms ease-out',\n  }\n\n  const contentStyle: CSSProperties = {\n    flex: 1,\n    overflow: 'auto',\n    padding: 20,\n  }\n\n  const drawerContent = (\n    <>\n      <style>\n        {`\n          @keyframes brycks-drawer-overlay-in {\n            from { opacity: 0; }\n            to { opacity: 1; }\n          }\n          @keyframes brycks-drawer-left-in {\n            from { transform: translateX(-100%); }\n            to { transform: translateX(0); }\n          }\n          @keyframes brycks-drawer-right-in {\n            from { transform: translateX(100%); }\n            to { transform: translateX(0); }\n          }\n          @keyframes brycks-drawer-top-in {\n            from { transform: translateY(-100%); }\n            to { transform: translateY(0); }\n          }\n          @keyframes brycks-drawer-bottom-in {\n            from { transform: translateY(100%); }\n            to { transform: translateY(0); }\n          }\n        `}\n      </style>\n      <div\n        className=\"brycks-drawer-overlay\"\n        style={overlayStyle}\n        onClick={handleOverlayClick}\n        aria-hidden=\"true\"\n      >\n        <div\n          ref={(node) => {\n            (drawerRef as React.MutableRefObject<HTMLDivElement | null>).current = node\n            if (typeof ref === 'function') ref(node)\n            else if (ref) ref.current = node\n          }}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={title ? 'brycks-drawer-title' : undefined}\n          className={cx('brycks-drawer', `brycks-drawer--${placement}`, `brycks-drawer--${size}`, className)}\n          style={drawerStyle}\n          tabIndex={-1}\n          data-testid={testId}\n          {...props}\n        >\n          {(title || showCloseButton) && (\n            <div className=\"brycks-drawer-header\" style={headerStyle}>\n              {title && <h2 id=\"brycks-drawer-title\" style={titleStyle}>{title}</h2>}\n              {showCloseButton && (\n                <button\n                  type=\"button\"\n                  className=\"brycks-drawer-close\"\n                  style={closeButtonStyle}\n                  onClick={onClose}\n                  aria-label=\"Close drawer\"\n                  onMouseEnter={(e) => {\n                    e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n                    e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n                  }}\n                  onMouseLeave={(e) => {\n                    e.currentTarget.style.backgroundColor = 'transparent'\n                    e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\n                  }}\n                >\n                  <CloseIcon />\n                </button>\n              )}\n            </div>\n          )}\n          <div className=\"brycks-drawer-content\" style={contentStyle}>\n            {children}\n          </div>\n        </div>\n      </div>\n    </>\n  )\n\n  return createPortal(drawerContent, document.body)\n})\n\nDrawer.displayName = 'Drawer'\n"],"names":["sizeMap","CloseIcon","jsx","Drawer","forwardRef","isOpen","onClose","placement","size","title","closeOnOverlayClick","closeOnEscape","showCloseButton","showOverlay","className","style","children","testId","props","ref","drawerRef","useRef","previousActiveElement","useEffect","drawer","handleKeyDown","e","focusableElements","firstElement","lastElement","handleOverlayClick","useCallback","isHorizontal","drawerSize","overlayStyle","drawerStyle","base","headerStyle","titleStyle","closeButtonStyle","contentStyle","drawerContent","jsxs","Fragment","node","cx","createPortal"],"mappings":"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"}

package/dist/components/feedback/Modal/Modal.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("react"),K=require("react-dom"),z=require("../../../utils/styles.cjs"),A={sm:"400px",md:"500px",lg:"640px",xl:"800px",full:"calc(100vw - 48px)"},B=r.memo(function(){return t.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:t.jsx("path",{d:"M4 4L12 12M12 4L4 12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})}),p=r.forwardRef(function({isOpen:o,onClose:a,size:l="md",title:s,description:i,closeOnOverlayClick:m=!0,closeOnEscape:f=!0,showCloseButton:b=!0,className:w,style:v,testId:E,children:S,...M},c){const k=r.useRef(null),u=r.useRef(null),d=r.useRef(!1);r.useEffect(()=>{o&&!d.current?(u.current=document.activeElement,d.current=!0):!o&&d.current&&(document.activeElement instanceof HTMLElement&&document.activeElement.blur(),u.current?.focus(),u.current=null,d.current=!1)},[o]),r.useEffect(()=>{if(!o)return;const e=k.current;e&&e.focus();const x=n=>{if(n.key==="Escape"&&f){a();return}if(n.key==="Tab"&&e){const y=e.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),g=y[0],h=y[y.length-1];n.shiftKey&&document.activeElement===g?(n.preventDefault(),h?.focus()):!n.shiftKey&&document.activeElement===h&&(n.preventDefault(),g?.focus())}};return document.addEventListener("keydown",x),document.body.style.overflow="hidden",()=>{document.removeEventListener("keydown",x),document.body.style.overflow=""}},[o,f,a]);const C=r.useCallback(e=>{e.target===e.currentTarget&&m&&a()},[m,a]),R=r.useMemo(()=>({position:"fixed",inset:0,zIndex:"var(--brycks-z-modal)",display:"flex",alignItems:"center",justifyContent:"center",padding:24,backgroundColor:"var(--brycks-background-overlay)",backdropFilter:"blur(4px)",animation:"brycks-fade-in var(--brycks-duration-normal) var(--brycks-ease-out)"}),[]),L=r.useMemo(()=>({position:"relative",width:"100%",maxWidth:A[l],maxHeight:l==="full"?"calc(100vh - 48px)":"85vh",backgroundColor:"var(--brycks-background-elevated)",borderRadius:"var(--brycks-radius-xl)",boxShadow:"var(--brycks-shadow-2xl)",display:"flex",flexDirection:"column",overflow:"hidden",animation:"brycks-scale-in var(--brycks-duration-normal) var(--brycks-ease-spring)",outline:"none",...v}),[l,v]);if(!o)return null;const T={display:"flex",alignItems:"flex-start",justifyContent:"space-between",padding:"20px 24px",borderBottom:"1px solid var(--brycks-border-muted)"},I={display:"flex",flexDirection:"column",gap:4},D={fontSize:18,fontWeight:600,color:"var(--brycks-foreground-default)",margin:0,lineHeight:1.3},N={fontSize:14,color:"var(--brycks-foreground-muted)",margin:0},q={display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,borderRadius:"var(--brycks-radius-md)",color:"var(--brycks-foreground-muted)",transition:"all var(--brycks-duration-fast) var(--brycks-ease-out)",marginLeft:12,flexShrink:0},W={flex:1,overflow:"auto",padding:24},H=t.jsx("div",{className:"brycks-modal-overlay",style:R,onClick:C,children:t.jsxs("div",{ref:e=>{k.current=e,typeof c=="function"?c(e):c&&(c.current=e)},role:"dialog","aria-modal":"true","aria-labelledby":s?"brycks-modal-title":void 0,"aria-describedby":i?"brycks-modal-description":void 0,className:z.cx("brycks-modal",`brycks-modal--${l}`,w),style:L,tabIndex:-1,"data-testid":E,...M,children:[(s||b)&&t.jsxs("div",{className:"brycks-modal-header",style:T,children:[t.jsxs("div",{style:I,children:[s&&t.jsx("h2",{id:"brycks-modal-title",style:D,children:s}),i&&t.jsx("p",{id:"brycks-modal-description",style:N,children:i})]}),b&&t.jsx("button",{type:"button",className:"brycks-modal-close",style:q,onClick:a,"aria-label":"Close modal",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(B,{})})]}),t.jsx("div",{className:"brycks-modal-content",style:W,children:S})]})});return K.createPortal(H,document.body)});p.displayName="Modal";exports.Modal=p;
+//# sourceMappingURL=Modal.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.cjs","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\n\r\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '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  /** 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  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    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 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  // Focus trap and keyboard handling\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\r\n    const handleKeyDown = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape' && closeOnEscape) {\r\n        onClose()\r\n        return\r\n      }\r\n\r\n      if (e.key === 'Tab' && modal) {\r\n        const focusableElements = modal.querySelectorAll<HTMLElement>(\r\n          'button, [href], input, select, textarea, [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, onClose])\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: 24,\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: '20px 24px',\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: 4,\r\n  }\r\n\r\n  const titleStyle: CSSProperties = {\r\n    fontSize: 18,\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: 14,\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: 32,\r\n    height: 32,\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: 12,\r\n    flexShrink: 0,\r\n  }\r\n\r\n  const contentStyle: CSSProperties = {\r\n    flex: 1,\r\n    overflow: 'auto',\r\n    padding: 24,\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 ? 'brycks-modal-title' : undefined}\r\n          aria-describedby={description ? 'brycks-modal-description' : 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=\"brycks-modal-title\" style={titleStyle}>\r\n                    {title}\r\n                  </h2>\r\n                )}\r\n                {description && (\r\n                  <p id=\"brycks-modal-description\" 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=\"Close modal\"\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","className","style","testId","children","props","ref","modalRef","useRef","previousActiveElement","wasOpen","useEffect","modal","handleKeyDown","e","focusableElements","firstElement","lastElement","handleOverlayClick","useCallback","overlayStyle","useMemo","modalStyle","headerStyle","titleContainerStyle","titleStyle","descriptionStyle","closeButtonStyle","contentStyle","modalContent","jsxs","node","cx","createPortal"],"mappings":"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"}

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

@@ -0,0 +1,183 @@
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { forwardRef as B, useRef as y, useEffect as w, useCallback as q, useMemo as E, memo as F } from "react";
+import { createPortal as P } from "react-dom";
+import { cx as $ } from "../../../utils/styles.js";
+const G = {
+  sm: "400px",
+  md: "500px",
+  lg: "640px",
+  xl: "800px",
+  full: "calc(100vw - 48px)"
+}, J = F(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",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }
+  ) });
+}), Q = B(function({
+  isOpen: r,
+  onClose: n,
+  size: a = "md",
+  title: l,
+  description: d,
+  closeOnOverlayClick: f = !0,
+  closeOnEscape: b = !0,
+  showCloseButton: v = !0,
+  className: C,
+  style: k,
+  testId: M,
+  children: L,
+  ...I
+}, c) {
+  const g = y(null), i = y(null), s = y(!1);
+  w(() => {
+    r && !s.current ? (i.current = document.activeElement, s.current = !0) : !r && s.current && (document.activeElement instanceof HTMLElement && document.activeElement.blur(), i.current?.focus(), i.current = null, s.current = !1);
+  }, [r]), w(() => {
+    if (!r) return;
+    const e = g.current;
+    e && e.focus();
+    const h = (o) => {
+      if (o.key === "Escape" && b) {
+        n();
+        return;
+      }
+      if (o.key === "Tab" && e) {
+        const u = e.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        ), p = u[0], x = u[u.length - 1];
+        o.shiftKey && document.activeElement === p ? (o.preventDefault(), x?.focus()) : !o.shiftKey && document.activeElement === x && (o.preventDefault(), p?.focus());
+      }
+    };
+    return document.addEventListener("keydown", h), document.body.style.overflow = "hidden", () => {
+      document.removeEventListener("keydown", h), document.body.style.overflow = "";
+    };
+  }, [r, b, n]);
+  const T = q(
+    (e) => {
+      e.target === e.currentTarget && f && n();
+    },
+    [f, n]
+  ), N = E(() => ({
+    position: "fixed",
+    inset: 0,
+    zIndex: "var(--brycks-z-modal)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24,
+    backgroundColor: "var(--brycks-background-overlay)",
+    backdropFilter: "blur(4px)",
+    animation: "brycks-fade-in var(--brycks-duration-normal) var(--brycks-ease-out)"
+  }), []), j = E(() => ({
+    position: "relative",
+    width: "100%",
+    maxWidth: G[a],
+    maxHeight: a === "full" ? "calc(100vh - 48px)" : "85vh",
+    backgroundColor: "var(--brycks-background-elevated)",
+    borderRadius: "var(--brycks-radius-xl)",
+    boxShadow: "var(--brycks-shadow-2xl)",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    animation: "brycks-scale-in var(--brycks-duration-normal) var(--brycks-ease-spring)",
+    outline: "none",
+    ...k
+  }), [a, k]);
+  if (!r) return null;
+  const D = {
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    padding: "20px 24px",
+    borderBottom: "1px solid var(--brycks-border-muted)"
+  }, R = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 4
+  }, W = {
+    fontSize: 18,
+    fontWeight: 600,
+    color: "var(--brycks-foreground-default)",
+    margin: 0,
+    lineHeight: 1.3
+  }, H = {
+    fontSize: 14,
+    color: "var(--brycks-foreground-muted)",
+    margin: 0
+  }, K = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 32,
+    height: 32,
+    borderRadius: "var(--brycks-radius-md)",
+    color: "var(--brycks-foreground-muted)",
+    transition: "all var(--brycks-duration-fast) var(--brycks-ease-out)",
+    marginLeft: 12,
+    flexShrink: 0
+  }, z = {
+    flex: 1,
+    overflow: "auto",
+    padding: 24
+  }, A = /* @__PURE__ */ t(
+    "div",
+    {
+      className: "brycks-modal-overlay",
+      style: N,
+      onClick: T,
+      children: /* @__PURE__ */ m(
+        "div",
+        {
+          ref: (e) => {
+            g.current = e, typeof c == "function" ? c(e) : c && (c.current = e);
+          },
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": l ? "brycks-modal-title" : void 0,
+          "aria-describedby": d ? "brycks-modal-description" : void 0,
+          className: $("brycks-modal", `brycks-modal--${a}`, C),
+          style: j,
+          tabIndex: -1,
+          "data-testid": M,
+          ...I,
+          children: [
+            (l || v) && /* @__PURE__ */ m("div", { className: "brycks-modal-header", style: D, children: [
+              /* @__PURE__ */ m("div", { style: R, children: [
+                l && /* @__PURE__ */ t("h2", { id: "brycks-modal-title", style: W, children: l }),
+                d && /* @__PURE__ */ t("p", { id: "brycks-modal-description", style: H, children: d })
+              ] }),
+              v && /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  className: "brycks-modal-close",
+                  style: K,
+                  onClick: n,
+                  "aria-label": "Close modal",
+                  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__ */ t(J, {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ t("div", { className: "brycks-modal-content", style: z, children: L })
+          ]
+        }
+      )
+    }
+  );
+  return P(A, document.body);
+});
+Q.displayName = "Modal";
+export {
+  Q as Modal
+};
+//# sourceMappingURL=Modal.js.map

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

@@ -0,0 +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\n\r\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '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  /** 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  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    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 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  // Focus trap and keyboard handling\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\r\n    const handleKeyDown = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape' && closeOnEscape) {\r\n        onClose()\r\n        return\r\n      }\r\n\r\n      if (e.key === 'Tab' && modal) {\r\n        const focusableElements = modal.querySelectorAll<HTMLElement>(\r\n          'button, [href], input, select, textarea, [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, onClose])\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: 24,\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: '20px 24px',\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: 4,\r\n  }\r\n\r\n  const titleStyle: CSSProperties = {\r\n    fontSize: 18,\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: 14,\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: 32,\r\n    height: 32,\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: 12,\r\n    flexShrink: 0,\r\n  }\r\n\r\n  const contentStyle: CSSProperties = {\r\n    flex: 1,\r\n    overflow: 'auto',\r\n    padding: 24,\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 ? 'brycks-modal-title' : undefined}\r\n          aria-describedby={description ? 'brycks-modal-description' : 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=\"brycks-modal-title\" style={titleStyle}>\r\n                    {title}\r\n                  </h2>\r\n                )}\r\n                {description && (\r\n                  <p id=\"brycks-modal-description\" 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=\"Close modal\"\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","className","style","testId","children","props","ref","modalRef","useRef","previousActiveElement","wasOpen","useEffect","modal","handleKeyDown","e","focusableElements","firstElement","lastElement","handleOverlayClick","useCallback","overlayStyle","useMemo","modalStyle","headerStyle","titleContainerStyle","titleStyle","descriptionStyle","closeButtonStyle","contentStyle","modalContent","jsxs","node","cx","createPortal"],"mappings":"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"}

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

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

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

@@ -0,0 +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  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 triggerElement = cloneElement(children as ReactElement<Record<string, unknown>>, {\n    ref: triggerRef,\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","handleOpen","handleClose","handleToggle","childProps","triggerElement","cloneElement","contentStyle","popoverContent","jsxs","Fragment","jsx","node","cx","createPortal"],"mappings":"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"}