@mond-design-system/react 2.0.0 → 3.0.1

package/dist/index.cjs

@@ -103,14 +103,14 @@ function Spinner({
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Icon/Icon.module.css?mds-scoped
-var Icon_module_default = { "icon": "mds-Icon__icon", "size-sm": "mds-Icon__size-sm", "size-md": "mds-Icon__size-md", "size-lg": "mds-Icon__size-lg" };
+var Icon_module_default = { "icon": "mds-Icon__icon", "size-slot": "mds-Icon__size-slot", "size-sm": "mds-Icon__size-sm", "size-md": "mds-Icon__size-md", "size-lg": "mds-Icon__size-lg" };
 var IconContext = react.createContext(null);
 function IconProvider({ render, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(IconContext.Provider, { value: render, children });
 }
 var SIZE_PX = { sm: 16, md: 20, lg: 24 };
 var warned = /* @__PURE__ */ new Set();
-function Icon({ name, size = "md", label, className, ...rest }) {
+function Icon({ name, size, label, className, ...rest }) {
   const render = react.useContext(IconContext);
   if (render === null && !warned.has(name)) {
     warned.add(name);
@@ -121,10 +121,10 @@ function Icon({ name, size = "md", label, className, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: cx(Icon_module_default.icon, Icon_module_default[`size-${size}`], className),
+      className: cx(Icon_module_default.icon, Icon_module_default[`size-${size ?? "slot"}`], className),
       ...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
       ...rest,
-      children: render?.(name, { size: SIZE_PX[size] })
+      children: render?.(name, { size: size === void 0 ? void 0 : SIZE_PX[size] })
     }
   );
 }
@@ -371,7 +371,7 @@ function CountButton({
       className: cx(CountButton_module_default.button, active && CountButton_module_default[`tone-${tone}`], className),
       ...rest,
       children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: SPINNER_PX, label: "", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: CountButton_module_default.glyph, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: CountButton_module_default.glyph, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: SPINNER_PX, label: "", "aria-hidden": "true" }) : icon }),
         children != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { children }) : null
       ]
     }
@@ -481,20 +481,34 @@ function useOverlay(options) {
 }
 function usePresence(open, durationMs) {
   const [mounted, setMounted] = react.useState(open);
+  const [visible, setVisible] = react.useState(false);
   if (open && !mounted) setMounted(true);
+  if (!open && visible) setVisible(false);
+  react.useEffect(() => {
+    if (!open) return;
+    let second = 0;
+    const first = requestAnimationFrame(() => {
+      second = requestAnimationFrame(() => setVisible(true));
+    });
+    return () => {
+      cancelAnimationFrame(first);
+      cancelAnimationFrame(second);
+    };
+  }, [open]);
   react.useEffect(() => {
     if (open) return;
     const timer = setTimeout(() => setMounted(false), durationMs);
     return () => clearTimeout(timer);
   }, [open, durationMs]);
-  return { mounted: open || mounted, visible: open };
+  return { mounted: open || mounted, visible };
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Overlay/Overlay.module.css?mds-scoped
 var Overlay_module_default = { "scrim": "mds-Overlay__scrim", "variant-modal": "mds-Overlay__variant-modal", "variant-sheet": "mds-Overlay__variant-sheet" };
 var OVERLAY_EXIT_MS = 200;
+var SHEET_EXIT_MS = 320;
 function Overlay({ open, onClose, label, variant, role = "dialog", closeOnScrimClick, panelClassName, children }) {
-  const { mounted, visible } = usePresence(open, OVERLAY_EXIT_MS);
+  const { mounted, visible } = usePresence(open, variant === "sheet" ? SHEET_EXIT_MS : OVERLAY_EXIT_MS);
   const ref = useOverlay({ open, onClose });
   if (!mounted) return null;
   return reactDom.createPortal(