@mond-design-system/react 2.0.0 → 3.0.1

package/dist/index.d.ts

@@ -83,8 +83,11 @@ interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
 declare function Spinner({ size, label, className, style, ...rest }: SpinnerProps): ReactElement;
 
 interface IconRenderProps {
-    /** Pixel size of the requested step. */
-    size: number;
+    /** Pixel size of the requested step, or undefined when the glyph should take
+        the size of the slot it sits in. An icon set that can only be sized with a
+        number falls back to its own default; one that can read a CSS length uses
+        var(--mds-icon-slot, var(--mds-icon-md)). */
+    size?: number | undefined;
 }
 /** Brand-owned glyph resolver: name → rendered glyph (svg, font ligature, …). */
 type IconRender = (name: string, props: IconRenderProps) => ReactNode;
@@ -99,7 +102,7 @@ interface IconProviderProps {
  *
  * ```tsx
  * // App root: map names to your icon set once.
- * <IconProvider render={(name, { size }) => <MyGlyph name={name} width={size} />}>
+ * <IconProvider render={(name, { size }) => <MyGlyph name={name} width={size ?? 20} />}>
  *   <App />
  * </IconProvider>
  *
@@ -112,7 +115,8 @@ type IconSize = "sm" | "md" | "lg";
 interface IconProps extends HTMLAttributes<HTMLSpanElement> {
     /** Glyph name in the app's registered set. */
     name: string;
-    /** Default "md". */
+    /** A step on the icon scale. Left unset, the glyph takes the step of the
+        control slot around it, and the md step outside one. */
     size?: IconSize;
     /** Accessible name. Omitted = decorative (aria-hidden). */
     label?: string;
@@ -332,7 +336,8 @@ declare function ChipBar({ children, gap, bordered, fade, className, ...rest }:
 
 type CountButtonTone = "accent" | "danger";
 interface CountButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-label" | "aria-pressed"> {
-    /** Glyph shown before the text, e.g. `<Icon name="heart" />` (md). */
+    /** Glyph shown before the text, e.g. `<Icon name="heart" />`. Sized by the
+        button, whatever the icon set's own default is. */
     icon: ReactNode;
     /** Accessible label (required) — describes the action for screen readers. */
     label: string;
@@ -553,7 +558,7 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">
  *   <Input value={name} onChange={(e) => setName(e.target.value)} />
  * </Field>
  *
- * <Input aria-label="Search" iconLeft={<Icon name="search" size="sm" />} />
+ * <Input aria-label="Search" iconLeft={<Icon name="search" />} />
  * ```
  */
 declare function Input({ size, invalid, iconLeft, iconRight, className, ...rest }: InputProps): ReactElement;
@@ -1268,12 +1273,14 @@ declare const OverlayHistoryContext: react.Context<OverlayHistory | null>;
 interface Presence {
     /** Keep the element in the DOM (true during exit animation). */
     mounted: boolean;
-    /** Drive the visual state — false during exit. */
+    /** Drive the visual state — false on the frame it enters and during exit. */
     visible: boolean;
 }
 /**
- * Exit-animation helper. `open` flips instantly; `mounted` lags by
- * `durationMs` on close so the exit transition can play.
+ * Enter/exit animation helper. An element inserted already carrying its open
+ * style has nothing to transition from, so `visible` stays false for the frame
+ * the closed style is painted in and flips on the next one. `mounted` lags
+ * `open` by `durationMs` on close so the exit transition can finish.
  */
 declare function usePresence(open: boolean, durationMs: number): Presence;
 

package/dist/index.js

@@ -101,14 +101,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 = createContext(null);
 function IconProvider({ render, children }) {
   return /* @__PURE__ */ 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 = useContext(IconContext);
   if (render === null && !warned.has(name)) {
     warned.add(name);
@@ -119,10 +119,10 @@ function Icon({ name, size = "md", label, className, ...rest }) {
   return /* @__PURE__ */ 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] })
     }
   );
 }
@@ -369,7 +369,7 @@ function CountButton({
       className: cx(CountButton_module_default.button, active && CountButton_module_default[`tone-${tone}`], className),
       ...rest,
       children: [
-        loading ? /* @__PURE__ */ jsx(Spinner, { size: SPINNER_PX, label: "", "aria-hidden": "true" }) : /* @__PURE__ */ jsx("span", { className: CountButton_module_default.glyph, children: icon }),
+        /* @__PURE__ */ jsx("span", { className: CountButton_module_default.glyph, children: loading ? /* @__PURE__ */ jsx(Spinner, { size: SPINNER_PX, label: "", "aria-hidden": "true" }) : icon }),
         children != null ? /* @__PURE__ */ jsx("span", { children }) : null
       ]
     }
@@ -479,20 +479,34 @@ function useOverlay(options) {
 }
 function usePresence(open, durationMs) {
   const [mounted, setMounted] = useState(open);
+  const [visible, setVisible] = useState(false);
   if (open && !mounted) setMounted(true);
+  if (!open && visible) setVisible(false);
+  useEffect(() => {
+    if (!open) return;
+    let second = 0;
+    const first = requestAnimationFrame(() => {
+      second = requestAnimationFrame(() => setVisible(true));
+    });
+    return () => {
+      cancelAnimationFrame(first);
+      cancelAnimationFrame(second);
+    };
+  }, [open]);
   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 createPortal(