@mond-design-system/react 2.0.0 → 3.0.0

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;

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
       ]
     }