npm - @brycks/core-front - Versions diffs - 0.3.4 → 0.3.6 - Mend

@brycks/core-front 0.3.4 → 0.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (121) hide show

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

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

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

	@@ -1 +1 @@
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 // Store onClose in a ref to avoid re-running effects when it changes\n const onCloseRef = useRef(onClose)\n useEffect(() => {\n onCloseRef.current = onClose\n }, [onClose])\n\n // Focus drawer when it opens (only once)\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 }, [isOpen])\n\n // Keyboard handling and body scroll lock\n useEffect(() => {\n if (!isOpen) return\n\n const drawer = drawerRef.current\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' && closeOnEscape) {\n onCloseRef.current()\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])\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","onCloseRef","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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"}
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'\nimport { useId } from '../../../hooks/useId'\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 /* Accessible label of the close button /\n closeLabel?: string\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\" aria-hidden=\"true\">\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 closeLabel = 'Close drawer',\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 titleId = useId('drawer-title')\n const previousActiveElement = useRef<HTMLElement \| null>(null)\n\n // Store onClose in a ref to avoid re-running effects when it changes\n const onCloseRef = useRef(onClose)\n useEffect(() => {\n onCloseRef.current = onClose\n }, [onClose])\n\n // Focus drawer when it opens (only once)\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 }, [isOpen])\n\n // Keyboard handling and body scroll lock\n useEffect(() => {\n if (!isOpen) return\n\n const drawer = drawerRef.current\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' && closeOnEscape) {\n onCloseRef.current()\n return\n }\n\n if (e.key === 'Tab' && drawer) {\n const focusableElements = drawer.querySelectorAll<HTMLElement>(\n 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [contenteditable=\"true\"], [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])\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 >\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 ? titleId : 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={titleId} 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={closeLabel}\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","closeLabel","showOverlay","className","style","children","testId","props","ref","drawerRef","useRef","titleId","useId","previousActiveElement","onCloseRef","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 CHANGED Viewed

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

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

	@@ -1 +1 @@
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\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 /* 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 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 // 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, [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])\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 ? '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","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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"}
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\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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"}