@brycks/core-front 0.3.5 → 0.5.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","sources":["../../../../src/components/feedback/Banner/Banner.tsx"],"sourcesContent":["/**\n * Banner Component\n *\n * App-level announcement bar for status, alerts, and notices.\n * Horizontal, full-width layout designed to sit at the top of a page or app shell.\n *\n * Unlike Alert (a contained, in-flow message), Banner spans the full width and\n * picks its ARIA role from the intent: critical intents (warning/error) announce\n * assertively as `alert`, informational intents (info/success/neutral) as `status`.\n *\n * All color styles are handled via CSS classes for easy customization.\n */\n\nimport React, {\n  forwardRef,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type BannerIntent = 'info' | 'success' | 'warning' | 'error' | 'neutral'\n\nexport interface BannerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Visual intent/status */\n  intent?: BannerIntent\n  /** Banner title (stronger weight, sits above the description) */\n  title?: ReactNode\n  /** Custom icon (overrides the default per-intent icon) */\n  icon?: ReactNode\n  /** Whether to show the leading icon */\n  showIcon?: boolean\n  /** Action element (button, link) shown on the trailing edge */\n  action?: ReactNode\n  /** Whether the banner can be dismissed */\n  isDismissible?: boolean\n  /** Callback when dismissed */\n  onDismiss?: () => void\n  /** Accessible label of the dismiss button */\n  dismissLabel?: string\n  /**\n   * ARIA live-region role. Defaults to `alert` for warning/error and\n   * `status` for info/success/neutral. Override when the default is wrong.\n   */\n  role?: 'alert' | 'status'\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n  /** Banner content (description) */\n  children?: ReactNode\n}\n\nconst defaultIcons: Record<Exclude<BannerIntent, 'neutral'>, React.JSX.Element> = {\n  info: (\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" aria-hidden=\"true\">\n      <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n      <path d=\"M9 8V12\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n      <circle cx=\"9\" cy=\"5.5\" r=\"0.75\" fill=\"currentColor\" />\n    </svg>\n  ),\n  success: (\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" aria-hidden=\"true\">\n      <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n      <path d=\"M6 9L8 11L12 7\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  ),\n  warning: (\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M9 2L16.5 15H1.5L9 2Z\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinejoin=\"round\" />\n      <path d=\"M9 7V10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n      <circle cx=\"9\" cy=\"12.5\" r=\"0.75\" fill=\"currentColor\" />\n    </svg>\n  ),\n  error: (\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" aria-hidden=\"true\">\n      <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n      <path d=\"M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  ),\n}\n\nconst criticalIntents: ReadonlySet<BannerIntent> = new Set<BannerIntent>(['warning', 'error'])\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n  {\n    intent = 'info',\n    title,\n    icon,\n    showIcon = true,\n    action,\n    isDismissible,\n    onDismiss,\n    dismissLabel = 'Dismiss',\n    role,\n    className,\n    style,\n    testId,\n    children,\n    ...props\n  },\n  ref\n) {\n  const resolvedRole = role ?? (criticalIntents.has(intent) ? 'alert' : 'status')\n  const resolvedIcon = icon ?? (intent === 'neutral' ? null : defaultIcons[intent])\n\n  return (\n    <div\n      ref={ref}\n      role={resolvedRole}\n      aria-live={resolvedRole === 'alert' ? 'assertive' : 'polite'}\n      className={cx('brycks-banner', `brycks-banner--${intent}`, className)}\n      style={style}\n      data-testid={testId}\n      {...props}\n    >\n      {showIcon && resolvedIcon && (\n        <span className=\"brycks-banner__icon\">{resolvedIcon}</span>\n      )}\n\n      <div className=\"brycks-banner__content\">\n        {title && <div className=\"brycks-banner__title\">{title}</div>}\n        {children && <div className=\"brycks-banner__description\">{children}</div>}\n      </div>\n\n      {(action || isDismissible) && (\n        <div className=\"brycks-banner__actions\">\n          {action}\n          {isDismissible && (\n            <button\n              type=\"button\"\n              className=\"brycks-banner__dismiss\"\n              onClick={onDismiss}\n              aria-label={dismissLabel}\n            >\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n                <path d=\"M3 3L11 11M11 3L3 11\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      )}\n    </div>\n  )\n})\n\nBanner.displayName = 'Banner'\n"],"names":["defaultIcons","jsxs","jsx","criticalIntents","Banner","forwardRef","intent","title","icon","showIcon","action","isDismissible","onDismiss","dismissLabel","role","className","style","testId","children","props","ref","resolvedRole","resolvedIcon","cx"],"mappings":"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"}

package/dist/components/feedback/ConfirmDialog/ConfirmDialog.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),p=require("react"),b=require("../Modal/Modal.cjs"),n=require("../../primitives/Button/Button.cjs"),x={margin:0,fontSize:"var(--brycks-fs-body-base)",lineHeight:1.5,color:"var(--brycks-foreground-default)"},h={display:"flex",justifyContent:"flex-end",gap:"var(--brycks-spacing-2, 8px)",marginTop:"var(--brycks-spacing-6, 24px)"},l=p.forwardRef(function({isOpen:t,onClose:i,onConfirm:a,title:c,message:o,confirmLabel:f="Confirm",cancelLabel:d="Cancel",closeLabel:u="Close",variant:y="default",isLoading:e=!1,testId:m,children:C},g){const s=()=>{e||i()};return r.jsxs(b.Modal,{ref:g,isOpen:t,onClose:s,title:c,size:"sm",closeLabel:u,closeOnOverlayClick:!e,closeOnEscape:!e,testId:m,children:[o&&r.jsx("p",{style:x,children:o}),C,r.jsxs("div",{style:h,className:"brycks-confirm-dialog__footer",children:[r.jsx(n.Button,{size:"sm",variant:"ghost",onClick:s,isDisabled:e,children:d}),r.jsx(n.Button,{size:"sm",intent:y==="danger"?"error":"primary",onClick:a,isLoading:e,children:f})]})]})});l.displayName="ConfirmDialog";exports.ConfirmDialog=l;
+//# sourceMappingURL=ConfirmDialog.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.cjs","sources":["../../../../src/components/feedback/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["/**\n * ConfirmDialog Component\n *\n * A small confirmation dialog built on top of Modal. Asks the user to confirm\n * or cancel an action, with an optional destructive (`danger`) styling and a\n * loading state for async confirmations.\n *\n * The component is i18n-agnostic: button labels default to English and should be\n * passed in by the consuming app when localization is needed.\n */\n\nimport {\n  forwardRef,\n  type ReactNode,\n  type CSSProperties,\n} from 'react'\nimport { Modal } from '../Modal'\nimport { Button } from '../../primitives/Button'\n\nexport type ConfirmDialogVariant = 'default' | 'danger'\n\nexport interface ConfirmDialogProps {\n  /** Whether the dialog is open */\n  isOpen: boolean\n  /** Callback when the dialog should close (cancel / overlay / escape) */\n  onClose: () => void\n  /** Callback when the user confirms */\n  onConfirm: () => void\n  /** Dialog title */\n  title: ReactNode\n  /** Body message (use `children` for richer content) */\n  message?: ReactNode\n  /** Label of the confirm button */\n  confirmLabel?: string\n  /** Label of the cancel button */\n  cancelLabel?: string\n  /** Accessible label of the modal close button */\n  closeLabel?: string\n  /** Visual variant — `danger` for destructive actions */\n  variant?: ConfirmDialogVariant\n  /** Whether the confirm action is in progress (disables cancel, spins confirm) */\n  isLoading?: boolean\n  /** Test ID */\n  testId?: string\n  /** Richer body content (rendered below `message`) */\n  children?: ReactNode\n}\n\nconst messageStyle: CSSProperties = {\n  margin: 0,\n  fontSize: 'var(--brycks-fs-body-base)',\n  lineHeight: 1.5,\n  color: 'var(--brycks-foreground-default)',\n}\n\nconst footerStyle: CSSProperties = {\n  display: 'flex',\n  justifyContent: 'flex-end',\n  gap: 'var(--brycks-spacing-2, 8px)',\n  marginTop: 'var(--brycks-spacing-6, 24px)',\n}\n\nexport const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(function ConfirmDialog(\n  {\n    isOpen,\n    onClose,\n    onConfirm,\n    title,\n    message,\n    confirmLabel = 'Confirm',\n    cancelLabel = 'Cancel',\n    closeLabel = 'Close',\n    variant = 'default',\n    isLoading = false,\n    testId,\n    children,\n  },\n  ref\n) {\n  // Block close while the async confirm is running.\n  const handleClose = () => {\n    if (!isLoading) onClose()\n  }\n\n  return (\n    <Modal\n      ref={ref}\n      isOpen={isOpen}\n      onClose={handleClose}\n      title={title}\n      size=\"sm\"\n      closeLabel={closeLabel}\n      closeOnOverlayClick={!isLoading}\n      closeOnEscape={!isLoading}\n      testId={testId}\n    >\n      {message && <p style={messageStyle}>{message}</p>}\n      {children}\n      <div style={footerStyle} className=\"brycks-confirm-dialog__footer\">\n        <Button size=\"sm\" variant=\"ghost\" onClick={handleClose} isDisabled={isLoading}>\n          {cancelLabel}\n        </Button>\n        <Button\n          size=\"sm\"\n          intent={variant === 'danger' ? 'error' : 'primary'}\n          onClick={onConfirm}\n          isLoading={isLoading}\n        >\n          {confirmLabel}\n        </Button>\n      </div>\n    </Modal>\n  )\n})\n\nConfirmDialog.displayName = 'ConfirmDialog'\n"],"names":["messageStyle","footerStyle","ConfirmDialog","forwardRef","isOpen","onClose","onConfirm","title","message","confirmLabel","cancelLabel","closeLabel","variant","isLoading","testId","children","ref","handleClose","jsxs","Modal","jsx","Button"],"mappings":"wNAgDMA,EAA8B,CAClC,OAAQ,EACR,SAAU,6BACV,WAAY,IACZ,MAAO,kCACT,EAEMC,EAA6B,CACjC,QAAS,OACT,eAAgB,WAChB,IAAK,+BACL,UAAW,+BACb,EAEaC,EAAgBC,EAAAA,WAA+C,SAC1E,CACE,OAAAC,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,QAAAC,EACA,aAAAC,EAAe,UACf,YAAAC,EAAc,SACd,WAAAC,EAAa,QACb,QAAAC,EAAU,UACV,UAAAC,EAAY,GACZ,OAAAC,EACA,SAAAC,CACF,EACAC,EACA,CAEA,MAAMC,EAAc,IAAM,CACnBJ,GAAWR,EAAA,CAClB,EAEA,OACEa,EAAAA,KAACC,EAAAA,MAAA,CACC,IAAAH,EACA,OAAAZ,EACA,QAASa,EACT,MAAAV,EACA,KAAK,KACL,WAAAI,EACA,oBAAqB,CAACE,EACtB,cAAe,CAACA,EAChB,OAAAC,EAEC,SAAA,CAAAN,GAAWY,EAAAA,IAAC,IAAA,CAAE,MAAOpB,EAAe,SAAAQ,EAAQ,EAC5CO,EACDG,EAAAA,KAAC,MAAA,CAAI,MAAOjB,EAAa,UAAU,gCACjC,SAAA,CAAAmB,EAAAA,IAACC,EAAAA,OAAA,CAAO,KAAK,KAAK,QAAQ,QAAQ,QAASJ,EAAa,WAAYJ,EACjE,SAAAH,CAAA,CACH,EACAU,EAAAA,IAACC,EAAAA,OAAA,CACC,KAAK,KACL,OAAQT,IAAY,SAAW,QAAU,UACzC,QAASN,EACT,UAAAO,EAEC,SAAAJ,CAAA,CAAA,CACH,CAAA,CACF,CAAA,CAAA,CAAA,CAGN,CAAC,EAEDP,EAAc,YAAc"}

package/dist/components/feedback/ConfirmDialog/ConfirmDialog.js

@@ -0,0 +1,68 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import { Modal as h } from "../Modal/Modal.js";
+import { Button as s } from "../../primitives/Button/Button.js";
+const k = {
+  margin: 0,
+  fontSize: "var(--brycks-fs-body-base)",
+  lineHeight: 1.5,
+  color: "var(--brycks-foreground-default)"
+}, u = {
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: "var(--brycks-spacing-2, 8px)",
+  marginTop: "var(--brycks-spacing-6, 24px)"
+}, v = b(function({
+  isOpen: i,
+  onClose: t,
+  onConfirm: a,
+  title: c,
+  message: o,
+  confirmLabel: f = "Confirm",
+  cancelLabel: m = "Cancel",
+  closeLabel: p = "Close",
+  variant: d = "default",
+  isLoading: r = !1,
+  testId: y,
+  children: C
+}, g) {
+  const l = () => {
+    r || t();
+  };
+  return /* @__PURE__ */ n(
+    h,
+    {
+      ref: g,
+      isOpen: i,
+      onClose: l,
+      title: c,
+      size: "sm",
+      closeLabel: p,
+      closeOnOverlayClick: !r,
+      closeOnEscape: !r,
+      testId: y,
+      children: [
+        o && /* @__PURE__ */ e("p", { style: k, children: o }),
+        C,
+        /* @__PURE__ */ n("div", { style: u, className: "brycks-confirm-dialog__footer", children: [
+          /* @__PURE__ */ e(s, { size: "sm", variant: "ghost", onClick: l, isDisabled: r, children: m }),
+          /* @__PURE__ */ e(
+            s,
+            {
+              size: "sm",
+              intent: d === "danger" ? "error" : "primary",
+              onClick: a,
+              isLoading: r,
+              children: f
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+v.displayName = "ConfirmDialog";
+export {
+  v as ConfirmDialog
+};
+//# sourceMappingURL=ConfirmDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.js","sources":["../../../../src/components/feedback/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["/**\n * ConfirmDialog Component\n *\n * A small confirmation dialog built on top of Modal. Asks the user to confirm\n * or cancel an action, with an optional destructive (`danger`) styling and a\n * loading state for async confirmations.\n *\n * The component is i18n-agnostic: button labels default to English and should be\n * passed in by the consuming app when localization is needed.\n */\n\nimport {\n  forwardRef,\n  type ReactNode,\n  type CSSProperties,\n} from 'react'\nimport { Modal } from '../Modal'\nimport { Button } from '../../primitives/Button'\n\nexport type ConfirmDialogVariant = 'default' | 'danger'\n\nexport interface ConfirmDialogProps {\n  /** Whether the dialog is open */\n  isOpen: boolean\n  /** Callback when the dialog should close (cancel / overlay / escape) */\n  onClose: () => void\n  /** Callback when the user confirms */\n  onConfirm: () => void\n  /** Dialog title */\n  title: ReactNode\n  /** Body message (use `children` for richer content) */\n  message?: ReactNode\n  /** Label of the confirm button */\n  confirmLabel?: string\n  /** Label of the cancel button */\n  cancelLabel?: string\n  /** Accessible label of the modal close button */\n  closeLabel?: string\n  /** Visual variant — `danger` for destructive actions */\n  variant?: ConfirmDialogVariant\n  /** Whether the confirm action is in progress (disables cancel, spins confirm) */\n  isLoading?: boolean\n  /** Test ID */\n  testId?: string\n  /** Richer body content (rendered below `message`) */\n  children?: ReactNode\n}\n\nconst messageStyle: CSSProperties = {\n  margin: 0,\n  fontSize: 'var(--brycks-fs-body-base)',\n  lineHeight: 1.5,\n  color: 'var(--brycks-foreground-default)',\n}\n\nconst footerStyle: CSSProperties = {\n  display: 'flex',\n  justifyContent: 'flex-end',\n  gap: 'var(--brycks-spacing-2, 8px)',\n  marginTop: 'var(--brycks-spacing-6, 24px)',\n}\n\nexport const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(function ConfirmDialog(\n  {\n    isOpen,\n    onClose,\n    onConfirm,\n    title,\n    message,\n    confirmLabel = 'Confirm',\n    cancelLabel = 'Cancel',\n    closeLabel = 'Close',\n    variant = 'default',\n    isLoading = false,\n    testId,\n    children,\n  },\n  ref\n) {\n  // Block close while the async confirm is running.\n  const handleClose = () => {\n    if (!isLoading) onClose()\n  }\n\n  return (\n    <Modal\n      ref={ref}\n      isOpen={isOpen}\n      onClose={handleClose}\n      title={title}\n      size=\"sm\"\n      closeLabel={closeLabel}\n      closeOnOverlayClick={!isLoading}\n      closeOnEscape={!isLoading}\n      testId={testId}\n    >\n      {message && <p style={messageStyle}>{message}</p>}\n      {children}\n      <div style={footerStyle} className=\"brycks-confirm-dialog__footer\">\n        <Button size=\"sm\" variant=\"ghost\" onClick={handleClose} isDisabled={isLoading}>\n          {cancelLabel}\n        </Button>\n        <Button\n          size=\"sm\"\n          intent={variant === 'danger' ? 'error' : 'primary'}\n          onClick={onConfirm}\n          isLoading={isLoading}\n        >\n          {confirmLabel}\n        </Button>\n      </div>\n    </Modal>\n  )\n})\n\nConfirmDialog.displayName = 'ConfirmDialog'\n"],"names":["messageStyle","footerStyle","ConfirmDialog","forwardRef","isOpen","onClose","onConfirm","title","message","confirmLabel","cancelLabel","closeLabel","variant","isLoading","testId","children","ref","handleClose","jsxs","Modal","jsx","Button"],"mappings":";;;;AAgDA,MAAMA,IAA8B;AAAA,EAClC,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AACT,GAEMC,IAA6B;AAAA,EACjC,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,KAAK;AAAA,EACL,WAAW;AACb,GAEaC,IAAgBC,EAA+C,SAC1E;AAAA,EACE,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,QAAAC;AAAA,EACA,UAAAC;AACF,GACAC,GACA;AAEA,QAAMC,IAAc,MAAM;AACxB,IAAKJ,KAAWR,EAAA;AAAA,EAClB;AAEA,SACE,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,QAAAZ;AAAA,MACA,SAASa;AAAA,MACT,OAAAV;AAAA,MACA,MAAK;AAAA,MACL,YAAAI;AAAA,MACA,qBAAqB,CAACE;AAAA,MACtB,eAAe,CAACA;AAAA,MAChB,QAAAC;AAAA,MAEC,UAAA;AAAA,QAAAN,KAAW,gBAAAY,EAAC,KAAA,EAAE,OAAOpB,GAAe,UAAAQ,GAAQ;AAAA,QAC5CO;AAAA,QACD,gBAAAG,EAAC,OAAA,EAAI,OAAOjB,GAAa,WAAU,iCACjC,UAAA;AAAA,UAAA,gBAAAmB,EAACC,GAAA,EAAO,MAAK,MAAK,SAAQ,SAAQ,SAASJ,GAAa,YAAYJ,GACjE,UAAAH,EAAA,CACH;AAAA,UACA,gBAAAU;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,QAAQT,MAAY,WAAW,UAAU;AAAA,cACzC,SAASN;AAAA,cACT,WAAAO;AAAA,cAEC,UAAAJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAEDP,EAAc,cAAc;"}

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

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

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

@@ -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

@@ -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":";;;;AA+CA,MAAMA,IAAsC;AAAA,EAC1C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAEA,SAASC,IAAY;AACnB,SACE,gBAAAC,EAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACnD,4BAAC,QAAA,EAAK,GAAE,sBAAqB,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,EAAA,CAC7F;AAEJ;AAEO,MAAMC,IAASC,EAAwC,SAC5D;AAAA,EACE,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,eAAAC,IAAgB;AAAA,EAChB,iBAAAC,IAAkB;AAAA,EAClB,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAuB,IAAI,GACvCC,IAAwBD,EAA2B,IAAI,GAGvDE,IAAaF,EAAOf,CAAO;AACjC,EAAAkB,EAAU,MAAM;AACd,IAAAD,EAAW,UAAUjB;AAAA,EACvB,GAAG,CAACA,CAAO,CAAC,GAGZkB,EAAU,MAAM;AACd,QAAI,CAACnB,EAAQ;AAEb,IAAAiB,EAAsB,UAAU,SAAS;AACzC,UAAMG,IAASL,EAAU;AACzB,IAAIK,KACFA,EAAO,MAAA;AAAA,EAEX,GAAG,CAACpB,CAAM,CAAC,GAGXmB,EAAU,MAAM;AACd,QAAI,CAACnB,EAAQ;AAEb,UAAMoB,IAASL,EAAU,SAEnBM,IAAgB,CAACC,MAAqB;AAC1C,UAAIA,EAAE,QAAQ,YAAYhB,GAAe;AACvC,QAAAY,EAAW,QAAA;AACX;AAAA,MACF;AAEA,UAAII,EAAE,QAAQ,SAASF,GAAQ;AAC7B,cAAMG,IAAoBH,EAAO;AAAA,UAC/B;AAAA,QAAA,GAEII,IAAeD,EAAkB,CAAC,GAClCE,IAAcF,EAAkBA,EAAkB,SAAS,CAAC;AAElE,QAAID,EAAE,YAAY,SAAS,kBAAkBE,KAC3CF,EAAE,eAAA,GACFG,GAAa,MAAA,KACJ,CAACH,EAAE,YAAY,SAAS,kBAAkBG,MACnDH,EAAE,eAAA,GACFE,GAAc,MAAA;AAAA,MAElB;AAAA,IACF;AAEA,oBAAS,iBAAiB,WAAWH,CAAa,GAClD,SAAS,KAAK,MAAM,WAAW,UAExB,MAAM;AACX,eAAS,oBAAoB,WAAWA,CAAa,GACrD,SAAS,KAAK,MAAM,WAAW,IAC/BJ,EAAsB,SAAS,MAAA;AAAA,IACjC;AAAA,EACF,GAAG,CAACjB,GAAQM,CAAa,CAAC;AAE1B,QAAMoB,IAAqBC;AAAA,IACzB,CAACL,MAAwB;AACvB,MAAIA,EAAE,WAAWA,EAAE,iBAAiBjB,KAClCJ,EAAA;AAAA,IAEJ;AAAA,IACA,CAACI,GAAqBJ,CAAO;AAAA,EAAA;AAG/B,MAAI,CAACD,EAAQ,QAAO;AAEpB,QAAM4B,IAAe1B,MAAc,UAAUA,MAAc,SACrD2B,IAAalC,EAAQQ,CAAI,GAEzB2B,IAA8B;AAAA,IAClC,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,iBAAiBtB,IAAc,qCAAqC;AAAA,IACpE,WAAW;AAAA,EAAA,GAkCPuB,IAA6B;AAAA,IACjC,IAhCwB,MAAqB;AAC7C,YAAMC,IAAsB;AAAA,QAC1B,UAAU;AAAA,QACV,iBAAiB;AAAA,QACjB,WAAW;AAAA,QACX,SAAS;AAAA,QACT,eAAe;AAAA,QACf,UAAU;AAAA,MAAA;AAGZ,aAAIJ,IACK;AAAA,QACL,GAAGI;AAAA,QACH,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,CAAC9B,CAAS,GAAG;AAAA,QACb,OAAO2B;AAAA,QACP,UAAU;AAAA,MAAA,IAIP;AAAA,QACL,GAAGG;AAAA,QACH,MAAM;AAAA,QACN,OAAO;AAAA,QACP,CAAC9B,CAAS,GAAG;AAAA,QACb,QAAQ2B;AAAA,QACR,WAAW;AAAA,MAAA;AAAA,IAEf,GAGK;AAAA,IACH,WAAW,iBAAiB3B,CAAS;AAAA,IACrC,SAAS;AAAA,IACT,GAAGQ;AAAA,EAAA,GAGCuB,IAA6B;AAAA,IACjC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,cAAc;AAAA,IACd,YAAY;AAAA,EAAA,GAGRC,IAA4B;AAAA,IAChC,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA,GAGJC,IAAkC;AAAA,IACtC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,OAAO;AAAA,IACP,YAAY;AAAA,EAAA,GAGRC,IAA8B;AAAA,IAClC,MAAM;AAAA,IACN,UAAU;AAAA,IACV,SAAS;AAAA,EAAA,GAGLC,IACJ,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAA1C,EAAC,SAAA,EACE,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAsBH;AAAA,IACA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAOiC;AAAA,QACP,SAASJ;AAAA,QACT,eAAY;AAAA,QAEZ,UAAA,gBAAAY;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK,CAACE,MAAS;AACZ,cAAAzB,EAA4D,UAAUyB,GACnE,OAAO1B,KAAQ,aAAYA,EAAI0B,CAAI,IAC9B1B,QAAS,UAAU0B;AAAA,YAC9B;AAAA,YACA,MAAK;AAAA,YACL,cAAW;AAAA,YACX,mBAAiBpC,IAAQ,wBAAwB;AAAA,YACjD,WAAWqC,EAAG,iBAAiB,kBAAkBvC,CAAS,IAAI,kBAAkBC,CAAI,IAAIM,CAAS;AAAA,YACjG,OAAOsB;AAAA,YACP,UAAU;AAAA,YACV,eAAanB;AAAA,YACZ,GAAGC;AAAA,YAEF,UAAA;AAAA,eAAAT,KAASG,MACT,gBAAA+B,EAAC,OAAA,EAAI,WAAU,wBAAuB,OAAOL,GAC1C,UAAA;AAAA,gBAAA7B,uBAAU,MAAA,EAAG,IAAG,uBAAsB,OAAO8B,GAAa,UAAA9B,GAAM;AAAA,gBAChEG,KACC,gBAAAV;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,WAAU;AAAA,oBACV,OAAOsC;AAAA,oBACP,SAASlC;AAAA,oBACT,cAAW;AAAA,oBACX,cAAc,CAACqB,MAAM;AACnB,sBAAAA,EAAE,cAAc,MAAM,kBAAkB,kCACxCA,EAAE,cAAc,MAAM,QAAQ;AAAA,oBAChC;AAAA,oBACA,cAAc,CAACA,MAAM;AACnB,sBAAAA,EAAE,cAAc,MAAM,kBAAkB,eACxCA,EAAE,cAAc,MAAM,QAAQ;AAAA,oBAChC;AAAA,oBAEA,4BAAC1B,GAAA,CAAA,CAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACb,GAEJ;AAAA,gCAED,OAAA,EAAI,WAAU,yBAAwB,OAAOwC,GAC3C,UAAAzB,EAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACF;AAGF,SAAO+B,EAAaL,GAAe,SAAS,IAAI;AAClD,CAAC;AAEDvC,EAAO,cAAc;"}
+{"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

@@ -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"),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;
 //# sourceMappingURL=Modal.cjs.map