eidos-ui 0.1.0

package/dist/chunk-MSQXPGOD.cjs

@@ -0,0 +1,125 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkR5UNLPQZcjs = require('./chunk-R5UNLPQZ.cjs');
+
+
+var _chunkLTOHGCU4cjs = require('./chunk-LTOHGCU4.cjs');
+
+
+var _chunkTBMVUI7Scjs = require('./chunk-TBMVUI7S.cjs');
+
+
+var _chunkR5QPUQSIcjs = require('./chunk-R5QPUQSI.cjs');
+
+// src/components/Navigation/Navigation.component.tsx
+var _react = require('react');
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+var NavigationBrandLogo = ({ logo }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: logo.src, alt: logo.alt, className: "eidos-navigation__brand-logo" });
+var Navigation = ({
+  brand,
+  items,
+  footer,
+  collapsed: collapsedProp,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  collapseBelow,
+  collapsible = true,
+  className = ""
+}) => {
+  const isControlled = collapsedProp !== void 0;
+  const [internalCollapsed, setInternalCollapsed] = _react.useState.call(void 0, defaultCollapsed);
+  const collapsed = isControlled ? collapsedProp : internalCollapsed;
+  const applyCollapsed = _react.useCallback.call(void 0, 
+    (next) => {
+      if (!isControlled) setInternalCollapsed(next);
+      _optionalChain([onCollapsedChange, 'optionalCall', _ => _(next)]);
+    },
+    [isControlled, onCollapsedChange]
+  );
+  const toggleCollapsed = _react.useCallback.call(void 0, () => {
+    applyCollapsed(!collapsed);
+  }, [applyCollapsed, collapsed]);
+  _react.useEffect.call(void 0, () => {
+    if (collapseBelow === void 0) return;
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const query = window.matchMedia(`(max-width: ${collapseBelow}px)`);
+    applyCollapsed(query.matches);
+    const handleChange = (e) => applyCollapsed(e.matches);
+    query.addEventListener("change", handleChange);
+    return () => query.removeEventListener("change", handleChange);
+  }, [collapseBelow, applyCollapsed]);
+  const classes = ["eidos-navigation", collapsed && "eidos-navigation--collapsed", className].filter(Boolean).join(" ");
+  const brandClasses = [
+    "eidos-navigation__brand",
+    brand.logo && "eidos-navigation__brand--logo-only",
+    brand.onClick && "eidos-navigation__brand--clickable"
+  ].filter(Boolean).join(" ");
+  const brandAccessibleName = brand.logo ? brand.logo.alt : brand.name;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "nav", { className: classes, "aria-label": "Main", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        className: brandClasses,
+        onClick: brand.onClick,
+        role: brand.onClick ? "button" : void 0,
+        tabIndex: brand.onClick ? 0 : void 0,
+        "aria-label": brand.onClick ? brandAccessibleName : void 0,
+        onKeyDown: brand.onClick ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            _optionalChain([brand, 'access', _2 => _2.onClick, 'optionalCall', _3 => _3()]);
+          }
+        } : void 0,
+        children: brand.logo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NavigationBrandLogo, { logo: brand.logo }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR5UNLPQZcjs.Avatar, { name: brand.name, shape: "square", size: "sm" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "span",
+            {
+              className: "eidos-navigation__brand-name",
+              "aria-hidden": brand.onClick ? true : void 0,
+              children: brand.name
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { className: "eidos-navigation__items", children: items.map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { className: "eidos-navigation__item-wrapper", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR5QPUQSIcjs.Tooltip, { message: item.label, placement: "right", disabled: !collapsed, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "button",
+      {
+        type: "button",
+        className: [
+          "eidos-navigation__item",
+          item.active && "eidos-navigation__item--active"
+        ].filter(Boolean).join(" "),
+        disabled: item.disabled,
+        onClick: item.onClick,
+        "aria-current": item.active ? "page" : void 0,
+        "aria-label": collapsed ? item.label : void 0,
+        children: [
+          item.icon && _chunkTBMVUI7Scjs.renderIcon.call(void 0, item.icon, "eidos-navigation__item-icon"),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-navigation__item-label", "aria-hidden": collapsed || void 0, children: item.label })
+        ]
+      }
+    ) }) }, item.id)) }),
+    footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-navigation__footer", children: footer }),
+    collapsible && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-navigation__toggle", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkLTOHGCU4cjs.IconButton,
+      {
+        icon: collapsed ? _lucidereact.SquareChevronRight : _lucidereact.SquareChevronLeft,
+        variant: "text",
+        color: "secondary",
+        size: "sm",
+        tooltip: collapsed ? "Expand navigation" : "Collapse navigation",
+        "aria-label": collapsed ? "Expand navigation" : "Collapse navigation",
+        onClick: toggleCollapsed
+      }
+    ) })
+  ] });
+};
+Navigation.displayName = "Navigation";
+
+
+
+exports.Navigation = Navigation;
+//# sourceMappingURL=chunk-MSQXPGOD.cjs.map

package/dist/chunk-MSQXPGOD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-MSQXPGOD.cjs","../src/components/Navigation/Navigation.component.tsx"],"names":[],"mappings":"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","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-MSQXPGOD.cjs","sourcesContent":[null,"import React, { useCallback, useEffect, useState } from 'react';\r\nimport { SquareChevronLeft, SquareChevronRight } from 'lucide-react';\r\nimport type { NavigationLogo, NavigationProps } from './Navigation.types';\r\nimport { Avatar } from '../Avatar';\r\nimport { IconButton } from '../Button';\r\nimport { Tooltip } from '../Tooltip';\r\nimport { renderIcon } from '../../utils';\r\nimport './Navigation.scss';\r\n\r\n/**\r\n * Renders a custom brand logo, guaranteeing correct aspect-ratio rendering\r\n * regardless of whether the source image is vertical, horizontal, or square\r\n * - and regardless of how much width is actually available, expanded or\r\n * collapsed. Deliberately no JS sizing/measurement at all: a fixed `height`,\r\n * `width: auto` (derived from the image's own intrinsic ratio), a `max-width`\r\n * expressed as `min(72px, 100%)` (see `.eidos-navigation__brand-logo` in\r\n * Navigation.scss) so it never renders wider than whatever space its\r\n * container - the rail, expanded or collapsed - actually has, and\r\n * `object-fit: contain` so it's letterboxed rather than distorted if that\r\n * ever clamps it below its natural width-at-32px-tall. Centering is handled\r\n * separately, at the row level - see `&__brand--logo-only` in Navigation.scss.\r\n */\r\nconst NavigationBrandLogo: React.FC<{ logo: NavigationLogo }> = ({ logo }) => (\r\n  <img src={logo.src} alt={logo.alt} className=\"eidos-navigation__brand-logo\" />\r\n);\r\n\r\nexport const Navigation: React.FC<NavigationProps> = ({\r\n  brand,\r\n  items,\r\n  footer,\r\n  collapsed: collapsedProp,\r\n  defaultCollapsed = false,\r\n  onCollapsedChange,\r\n  collapseBelow,\r\n  collapsible = true,\r\n  className = '',\r\n}) => {\r\n  // ── Controlled / uncontrolled collapsed state ─────────────────────────────\r\n  // Mirrors CommandPalette's `open`/`defaultOpen` pattern - omitting\r\n  // `collapsed` lets Navigation own its state entirely, while passing it\r\n  // (+ `onCollapsedChange`) keeps full external control for consumers who\r\n  // need to persist the preference or drive it from a responsive breakpoint.\r\n  const isControlled = collapsedProp !== undefined;\r\n  const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);\r\n  const collapsed = isControlled ? collapsedProp : internalCollapsed;\r\n\r\n  // Shared by the manual toggle button and `collapseBelow` below - uncontrolled\r\n  // flips the internal state directly, controlled defers to `onCollapsedChange`\r\n  // since Navigation can't change `collapsed` itself.\r\n  const applyCollapsed = useCallback(\r\n    (next: boolean) => {\r\n      if (!isControlled) setInternalCollapsed(next);\r\n      onCollapsedChange?.(next);\r\n    },\r\n    [isControlled, onCollapsedChange],\r\n  );\r\n\r\n  const toggleCollapsed = useCallback(() => {\r\n    applyCollapsed(!collapsed);\r\n  }, [applyCollapsed, collapsed]);\r\n\r\n  // Auto-collapse/expand at a viewport breakpoint. `matchMedia`'s `change`\r\n  // event only fires exactly at the crossing point, not on every resize\r\n  // tick, so a manual toggle in between crossings is left alone until the\r\n  // viewport actually crosses the breakpoint again.\r\n  useEffect(() => {\r\n    if (collapseBelow === undefined) return;\r\n    if (typeof window === 'undefined' || !window.matchMedia) return;\r\n\r\n    const query = window.matchMedia(`(max-width: ${collapseBelow}px)`);\r\n\r\n    applyCollapsed(query.matches);\r\n\r\n    const handleChange = (e: MediaQueryListEvent) => applyCollapsed(e.matches);\r\n    query.addEventListener('change', handleChange);\r\n    return () => query.removeEventListener('change', handleChange);\r\n  }, [collapseBelow, applyCollapsed]);\r\n\r\n  const classes = ['eidos-navigation', collapsed && 'eidos-navigation--collapsed', className]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  // A `logo` brand has no `name` text alongside it (see the discriminated\r\n  // union in Navigation.types.ts), so there's never a second, variable-width\r\n  // sibling competing for space - unlike the `name` variant, it's always\r\n  // safe to just center it outright, in both expanded and collapsed states,\r\n  // with nothing further to compute. See `&__brand--logo-only` in\r\n  // Navigation.scss.\r\n  const brandClasses = [\r\n    'eidos-navigation__brand',\r\n    brand.logo && 'eidos-navigation__brand--logo-only',\r\n    brand.onClick && 'eidos-navigation__brand--clickable',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  const brandAccessibleName = brand.logo ? brand.logo.alt : brand.name;\r\n\r\n  return (\r\n    <nav className={classes} aria-label=\"Main\">\r\n      <div\r\n        className={brandClasses}\r\n        onClick={brand.onClick}\r\n        role={brand.onClick ? 'button' : undefined}\r\n        tabIndex={brand.onClick ? 0 : undefined}\r\n        // Only a real interactive control (role=\"button\") reliably exposes\r\n        // `aria-label` as its accessible name - a plain, non-interactive div\r\n        // doesn't, so the visible (if currently faded) text remains the only\r\n        // way assistive tech gets the brand name in that case.\r\n        aria-label={brand.onClick ? brandAccessibleName : undefined}\r\n        onKeyDown={\r\n          brand.onClick\r\n            ? (e) => {\r\n                if (e.key === 'Enter' || e.key === ' ') {\r\n                  e.preventDefault();\r\n                  brand.onClick?.();\r\n                }\r\n              }\r\n            : undefined\r\n        }\r\n      >\r\n        {brand.logo ? (\r\n          <NavigationBrandLogo logo={brand.logo} />\r\n        ) : (\r\n          <>\r\n            <Avatar name={brand.name} shape=\"square\" size=\"sm\" />\r\n            {/* Only redundant with the wrapper's own `aria-label` when\r\n                `brand.onClick` is set (see the note on it above) - otherwise\r\n                this is the only accessible text for the brand at all. */}\r\n            <span\r\n              className=\"eidos-navigation__brand-name\"\r\n              aria-hidden={brand.onClick ? true : undefined}\r\n            >\r\n              {brand.name}\r\n            </span>\r\n          </>\r\n        )}\r\n      </div>\r\n\r\n      <ul className=\"eidos-navigation__items\">\r\n        {items.map((item) => (\r\n          <li key={item.id} className=\"eidos-navigation__item-wrapper\">\r\n            {/* Always wrapped (disabled rather than omitted while expanded)\r\n                so the button underneath is never unmounted/remounted across\r\n                a collapse toggle - that would otherwise reset its own CSS\r\n                transitions (gap, padding, justify-content) partway through\r\n                the rail's width animation, snapping instead of easing. */}\r\n            <Tooltip message={item.label} placement=\"right\" disabled={!collapsed}>\r\n              <button\r\n                type=\"button\"\r\n                className={[\r\n                  'eidos-navigation__item',\r\n                  item.active && 'eidos-navigation__item--active',\r\n                ]\r\n                  .filter(Boolean)\r\n                  .join(' ')}\r\n                disabled={item.disabled}\r\n                onClick={item.onClick}\r\n                aria-current={item.active ? 'page' : undefined}\r\n                // The label fades out visually while collapsed (see\r\n                // `.eidos-navigation__item-label` in Navigation.scss) but\r\n                // isn't removed from the DOM, so it's given directly as the\r\n                // accessible name here instead of relying on the (also\r\n                // fading) visible text, and hidden from assistive tech below\r\n                // to avoid it being announced twice alongside the `Tooltip`.\r\n                aria-label={collapsed ? item.label : undefined}\r\n              >\r\n                {item.icon && renderIcon(item.icon, 'eidos-navigation__item-icon')}\r\n                <span className=\"eidos-navigation__item-label\" aria-hidden={collapsed || undefined}>\r\n                  {item.label}\r\n                </span>\r\n              </button>\r\n            </Tooltip>\r\n          </li>\r\n        ))}\r\n      </ul>\r\n\r\n      {footer && <div className=\"eidos-navigation__footer\">{footer}</div>}\r\n\r\n      {/* Floats half in/half out of the rail's right edge (see `&__toggle`\r\n          in Navigation.scss) rather than sitting in its own row - a\r\n          dedicated row reserved space in the flex column even when there\r\n          were too few items to need it.\r\n\r\n          The positioning has to live on this wrapping `<span>`, not on the\r\n          `IconButton` itself: its `tooltip` prop makes `Button` wrap it in\r\n          `Tooltip`'s own `.eidos-tooltip-trigger` div, which - not the\r\n          button - is the actual flex child of `.eidos-navigation`. Removing\r\n          only the inner button from flow left that outer wrapper still\r\n          in-flow, still consuming space and still getting `gap` applied\r\n          around it, which is exactly why a gap remained. */}\r\n      {collapsible && (\r\n        <span className=\"eidos-navigation__toggle\">\r\n          <IconButton\r\n            icon={collapsed ? SquareChevronRight : SquareChevronLeft}\r\n            variant=\"text\"\r\n            color=\"secondary\"\r\n            size=\"sm\"\r\n            tooltip={collapsed ? 'Expand navigation' : 'Collapse navigation'}\r\n            aria-label={collapsed ? 'Expand navigation' : 'Collapse navigation'}\r\n            onClick={toggleCollapsed}\r\n          />\r\n        </span>\r\n      )}\r\n    </nav>\r\n  );\r\n};\r\n\r\nNavigation.displayName = 'Navigation';\r\n"]}

package/dist/chunk-N5JDL4VE.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-N5JDL4VE.js.map

package/dist/chunk-N5JDL4VE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-N7HX5635.cjs

@@ -0,0 +1,138 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
+
+var _chunkLTOHGCU4cjs = require('./chunk-LTOHGCU4.cjs');
+
+// src/components/Drawer/Drawer.component.tsx
+var _react = require('react');
+var _reactdom = require('react-dom');
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+var Drawer = ({
+  isOpen,
+  onClose,
+  placement = "right",
+  title,
+  children,
+  actions,
+  size = "md",
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  className = ""
+}) => {
+  const titleId = _react.useId.call(void 0, );
+  const bodyId = _react.useId.call(void 0, );
+  const TRANSITION_MS = 300;
+  const [isMounted, setIsMounted] = _react.useState.call(void 0, isOpen);
+  const [isVisible, setIsVisible] = _react.useState.call(void 0, isOpen);
+  _react.useEffect.call(void 0, () => {
+    let raf1 = 0;
+    let raf2 = 0;
+    let timerId;
+    if (isOpen) {
+      setIsMounted(true);
+      raf1 = requestAnimationFrame(() => {
+        raf2 = requestAnimationFrame(() => setIsVisible(true));
+      });
+    } else {
+      setIsVisible(false);
+      timerId = setTimeout(() => setIsMounted(false), TRANSITION_MS);
+    }
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+      clearTimeout(timerId);
+    };
+  }, [isOpen]);
+  const handleEscapeKey = _react.useCallback.call(void 0, 
+    (event) => {
+      if (closeOnEscape && event.key === "Escape" && isOpen) {
+        onClose();
+      }
+    },
+    [closeOnEscape, isOpen, onClose]
+  );
+  _react.useEffect.call(void 0, () => {
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscapeKey);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscapeKey);
+      document.body.style.overflow = "";
+    };
+  }, [isOpen, handleEscapeKey]);
+  const handleBackdropClick = _react.useCallback.call(void 0, 
+    (event) => {
+      if (closeOnBackdropClick && event.target === event.currentTarget) {
+        onClose();
+      }
+    },
+    [closeOnBackdropClick, onClose]
+  );
+  if (!isMounted) return null;
+  return _reactdom.createPortal.call(void 0, 
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: [
+          "eidos-drawer",
+          `eidos-drawer--${placement}`,
+          isVisible && "eidos-drawer--open",
+          className
+        ].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-drawer-backdrop", onClick: handleBackdropClick, "aria-hidden": "true" }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "div",
+            {
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": title ? titleId : void 0,
+              "aria-describedby": bodyId,
+              className: [
+                "eidos-drawer-panel",
+                `eidos-drawer-panel--${size}`,
+                `eidos-drawer-panel--${placement}`
+              ].filter(Boolean).join(" "),
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-drawer-header", children: [
+                  title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { id: titleId, className: "eidos-drawer-title", children: title }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    "button",
+                    {
+                      type: "button",
+                      className: "eidos-drawer-close",
+                      onClick: onClose,
+                      "aria-label": "Close drawer",
+                      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { "aria-hidden": "true" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { id: bodyId, className: "eidos-drawer-body", children }),
+                actions && actions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-drawer-footer", children: actions.map((action) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _chunkLTOHGCU4cjs.Button,
+                  {
+                    variant: _nullishCoalesce(action.variant, () => ( "outlined")),
+                    color: action.color,
+                    disabled: action.disabled,
+                    loading: action.loading,
+                    onClick: action.onClick,
+                    children: action.label
+                  },
+                  action.id
+                )) })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+};
+Drawer.displayName = "Drawer";
+
+
+
+exports.Drawer = Drawer;
+//# sourceMappingURL=chunk-N7HX5635.cjs.map

package/dist/chunk-N7HX5635.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-N7HX5635.cjs","../src/components/Drawer/Drawer.component.tsx"],"names":[],"mappings":"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","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-N7HX5635.cjs","sourcesContent":[null,"import React, { useEffect, useCallback, useId, useState } from 'react';\r\nimport { createPortal } from 'react-dom';\r\nimport { X } from 'lucide-react';\r\nimport { Button } from '../Button';\r\nimport type { DrawerProps } from './Drawer.types';\r\n\r\nexport const Drawer: React.FC<DrawerProps> = ({\r\n  isOpen,\r\n  onClose,\r\n  placement = 'right',\r\n  title,\r\n  children,\r\n  actions,\r\n  size = 'md',\r\n  closeOnBackdropClick = true,\r\n  closeOnEscape = true,\r\n  className = '',\r\n}) => {\r\n  const titleId = useId();\r\n  const bodyId = useId();\r\n\r\n  // ── Animation state ────────────────────────────────────────────────────────\r\n  // isMounted: whether the portal DOM node exists at all.\r\n  // isVisible: whether the '--open' CSS class is applied (drives the transition).\r\n  //\r\n  // On open:  mount first → one rAF → apply --open (browser sees initial\r\n  //           closed position before transitioning, so the animation fires).\r\n  // On close: remove --open (CSS transition plays) → after 300 ms unmount.\r\n  //           300 ms matches the CSS `transition: 0.3s` in Drawer.scss.\r\n  const TRANSITION_MS = 300;\r\n  const [isMounted, setIsMounted] = useState(isOpen);\r\n  const [isVisible, setIsVisible] = useState(isOpen);\r\n\r\n  useEffect(() => {\r\n    let raf1 = 0;\r\n    let raf2 = 0;\r\n    let timerId: ReturnType<typeof setTimeout>;\r\n\r\n    if (isOpen) {\r\n      setIsMounted(true);\r\n      // Double rAF: React 18 automatic batching means setIsMounted(true) may\r\n      // not produce a committed browser paint before the first rAF fires.\r\n      // The second frame guarantees the panel is rendered in its off-screen\r\n      // (closed) position before the CSS transition begins.\r\n      raf1 = requestAnimationFrame(() => {\r\n        raf2 = requestAnimationFrame(() => setIsVisible(true));\r\n      });\r\n    } else {\r\n      setIsVisible(false);\r\n      timerId = setTimeout(() => setIsMounted(false), TRANSITION_MS);\r\n    }\r\n\r\n    return () => {\r\n      cancelAnimationFrame(raf1);\r\n      cancelAnimationFrame(raf2);\r\n      clearTimeout(timerId);\r\n    };\r\n  }, [isOpen]);\r\n\r\n  // ── Escape key + scroll lock (tied to isOpen, not isMounted) ───────────────\r\n  const handleEscapeKey = useCallback(\r\n    (event: KeyboardEvent) => {\r\n      if (closeOnEscape && event.key === 'Escape' && isOpen) {\r\n        onClose();\r\n      }\r\n    },\r\n    [closeOnEscape, isOpen, onClose],\r\n  );\r\n\r\n  useEffect(() => {\r\n    if (isOpen) {\r\n      document.addEventListener('keydown', handleEscapeKey);\r\n      document.body.style.overflow = 'hidden';\r\n    }\r\n    return () => {\r\n      document.removeEventListener('keydown', handleEscapeKey);\r\n      document.body.style.overflow = '';\r\n    };\r\n  }, [isOpen, handleEscapeKey]);\r\n\r\n  // ── Backdrop click ─────────────────────────────────────────────────────────\r\n  const handleBackdropClick = useCallback(\r\n    (event: React.MouseEvent) => {\r\n      if (closeOnBackdropClick && event.target === event.currentTarget) {\r\n        onClose();\r\n      }\r\n    },\r\n    [closeOnBackdropClick, onClose],\r\n  );\r\n\r\n  if (!isMounted) return null;\r\n\r\n  return createPortal(\r\n    <div\r\n      className={[\r\n        'eidos-drawer',\r\n        `eidos-drawer--${placement}`,\r\n        isVisible && 'eidos-drawer--open',\r\n        className,\r\n      ]\r\n        .filter(Boolean)\r\n        .join(' ')}\r\n    >\r\n      {/* Backdrop */}\r\n      <div className=\"eidos-drawer-backdrop\" onClick={handleBackdropClick} aria-hidden=\"true\" />\r\n\r\n      {/* Panel */}\r\n      <div\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby={title ? titleId : undefined}\r\n        aria-describedby={bodyId}\r\n        className={[\r\n          'eidos-drawer-panel',\r\n          `eidos-drawer-panel--${size}`,\r\n          `eidos-drawer-panel--${placement}`,\r\n        ]\r\n          .filter(Boolean)\r\n          .join(' ')}\r\n      >\r\n        {/* Header */}\r\n        <div className=\"eidos-drawer-header\">\r\n          {title && (\r\n            <h3 id={titleId} className=\"eidos-drawer-title\">\r\n              {title}\r\n            </h3>\r\n          )}\r\n          <button\r\n            type=\"button\"\r\n            className=\"eidos-drawer-close\"\r\n            onClick={onClose}\r\n            aria-label=\"Close drawer\"\r\n          >\r\n            <X aria-hidden=\"true\" />\r\n          </button>\r\n        </div>\r\n\r\n        {/* Body */}\r\n        <div id={bodyId} className=\"eidos-drawer-body\">\r\n          {children}\r\n        </div>\r\n\r\n        {/* Footer - only rendered when actions are provided */}\r\n        {actions && actions.length > 0 && (\r\n          <div className=\"eidos-drawer-footer\">\r\n            {actions.map((action) => (\r\n              <Button\r\n                key={action.id}\r\n                variant={action.variant ?? 'outlined'}\r\n                color={action.color}\r\n                disabled={action.disabled}\r\n                loading={action.loading}\r\n                onClick={action.onClick}\r\n              >\r\n                {action.label}\r\n              </Button>\r\n            ))}\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>,\r\n    document.body,\r\n  );\r\n};\r\n\r\nDrawer.displayName = 'Drawer';\r\n"]}