@brycks/core-front 0.5.0 → 0.6.0

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

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

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

@@ -1 +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'\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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"}
+{"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 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\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 drawerContent = (\n    <div\n      className={cx('brycks-drawer-overlay', !showOverlay && 'brycks-drawer-overlay--transparent')}\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={style}\n        tabIndex={-1}\n        data-testid={testId}\n        {...props}\n      >\n        {(title || showCloseButton) && (\n          <div className=\"brycks-drawer-header\">\n            {title && <h2 id={titleId} className=\"brycks-drawer-title\">{title}</h2>}\n            {showCloseButton && (\n              <button\n                type=\"button\"\n                className=\"brycks-drawer-close\"\n                onClick={onClose}\n                aria-label={closeLabel}\n              >\n                <CloseIcon />\n              </button>\n            )}\n          </div>\n        )}\n        <div className=\"brycks-drawer-content\">\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n\n  return createPortal(drawerContent, document.body)\n})\n\nDrawer.displayName = 'Drawer'\n"],"names":["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","drawerContent","cx","jsxs","node","createPortal"],"mappings":"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"}

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

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

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

@@ -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'\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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"}
+{"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 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\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 drawerContent = (\n    <div\n      className={cx('brycks-drawer-overlay', !showOverlay && 'brycks-drawer-overlay--transparent')}\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={style}\n        tabIndex={-1}\n        data-testid={testId}\n        {...props}\n      >\n        {(title || showCloseButton) && (\n          <div className=\"brycks-drawer-header\">\n            {title && <h2 id={titleId} className=\"brycks-drawer-title\">{title}</h2>}\n            {showCloseButton && (\n              <button\n                type=\"button\"\n                className=\"brycks-drawer-close\"\n                onClick={onClose}\n                aria-label={closeLabel}\n              >\n                <CloseIcon />\n              </button>\n            )}\n          </div>\n        )}\n        <div className=\"brycks-drawer-content\">\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n\n  return createPortal(drawerContent, document.body)\n})\n\nDrawer.displayName = 'Drawer'\n"],"names":["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","drawerContent","cx","jsxs","node","createPortal"],"mappings":"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"}

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

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

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

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