@mond-design-system/react 4.10.1 → 4.11.0

package/dist/index.d.cts

@@ -1125,16 +1125,21 @@ interface ToastProviderProps {
  */
 declare function ToastProvider({ children, regionLabel, dismissLabel, }: ToastProviderProps): ReactElement;
 
+/** A component's own props, plus every prop the element it renders takes. */
+type Polymorphic<T extends ElementType, Own> = Own & {
+    /** Element to render. Default div. */
+    as?: T;
+} & Omit<ComponentPropsWithRef<T>, keyof Own | "as">;
+
 type StackGap = "hairline" | "tight" | "base" | "loose" | "group" | "section";
 type StackAlign = "start" | "center" | "end" | "stretch";
-interface StackProps extends HTMLAttributes<HTMLElement> {
+interface StackOwnProps {
     /** Space between children, on the gap scale. Default "base". */
     gap?: StackGap;
     /** Cross-axis alignment. Default "stretch". */
     align?: StackAlign;
-    /** Element to render. Default div. */
-    as?: ElementType;
 }
+type StackProps<T extends ElementType = "div"> = Polymorphic<T, StackOwnProps>;
 /**
  * Vertical flow. The parent owns spacing between siblings via gap —
  * children carry no outer margins. Token-bounded on purpose: no arbitrary
@@ -1147,12 +1152,12 @@ interface StackProps extends HTMLAttributes<HTMLElement> {
  * </Stack>
  * ```
  */
-declare function Stack({ gap, align, as, className, ...rest }: StackProps): ReactElement;
+declare function Stack<T extends ElementType = "div">(props: StackProps<T>): ReactElement;
 
 type InlineGap = "hairline" | "tight" | "base" | "loose";
 type InlineAlign = "start" | "center" | "end" | "baseline";
 type InlineJustify = "start" | "center" | "end" | "between";
-interface InlineProps extends HTMLAttributes<HTMLElement> {
+interface InlineOwnProps {
     /** Space between children, on the gap scale. Default "base". */
     gap?: InlineGap;
     /** Cross-axis alignment. Default "center". */
@@ -1161,9 +1166,8 @@ interface InlineProps extends HTMLAttributes<HTMLElement> {
     justify?: InlineJustify;
     /** Allow wrapping onto new lines. */
     wrap?: boolean;
-    /** Element to render. Default div. */
-    as?: ElementType;
 }
+type InlineProps<T extends ElementType = "div"> = Polymorphic<T, InlineOwnProps>;
 /**
  * Horizontal flow — Stack's row twin. Same token-bounded contract.
  *
@@ -1174,15 +1178,14 @@ interface InlineProps extends HTMLAttributes<HTMLElement> {
  * </Inline>
  * ```
  */
-declare function Inline({ gap, align, justify, wrap, as, className, ...rest }: InlineProps): ReactElement;
+declare function Inline<T extends ElementType = "div">(props: InlineProps<T>): ReactElement;
 
 type ContainerWidth = "content" | "wide";
-interface ContainerProps extends HTMLAttributes<HTMLElement> {
+interface ContainerOwnProps {
     /** content = reading column, wide = desktop shell. Default "content". */
     width?: ContainerWidth;
-    /** Element to render. Default div. */
-    as?: ElementType;
 }
+type ContainerProps<T extends ElementType = "div"> = Polymorphic<T, ContainerOwnProps>;
 /**
  * Centered max-width column with page-edge padding.
  *
@@ -1192,7 +1195,7 @@ interface ContainerProps extends HTMLAttributes<HTMLElement> {
  * </Container>
  * ```
  */
-declare function Container({ width, as, className, ...rest }: ContainerProps): ReactElement;
+declare function Container<T extends ElementType = "div">(props: ContainerProps<T>): ReactElement;
 
 type CardVariant = "card" | "raised" | "sunken";
 interface CardProps extends Omit<HTMLAttributes<HTMLElement>, "onClick"> {

package/dist/index.d.ts

@@ -1125,16 +1125,21 @@ interface ToastProviderProps {
  */
 declare function ToastProvider({ children, regionLabel, dismissLabel, }: ToastProviderProps): ReactElement;
 
+/** A component's own props, plus every prop the element it renders takes. */
+type Polymorphic<T extends ElementType, Own> = Own & {
+    /** Element to render. Default div. */
+    as?: T;
+} & Omit<ComponentPropsWithRef<T>, keyof Own | "as">;
+
 type StackGap = "hairline" | "tight" | "base" | "loose" | "group" | "section";
 type StackAlign = "start" | "center" | "end" | "stretch";
-interface StackProps extends HTMLAttributes<HTMLElement> {
+interface StackOwnProps {
     /** Space between children, on the gap scale. Default "base". */
     gap?: StackGap;
     /** Cross-axis alignment. Default "stretch". */
     align?: StackAlign;
-    /** Element to render. Default div. */
-    as?: ElementType;
 }
+type StackProps<T extends ElementType = "div"> = Polymorphic<T, StackOwnProps>;
 /**
  * Vertical flow. The parent owns spacing between siblings via gap —
  * children carry no outer margins. Token-bounded on purpose: no arbitrary
@@ -1147,12 +1152,12 @@ interface StackProps extends HTMLAttributes<HTMLElement> {
  * </Stack>
  * ```
  */
-declare function Stack({ gap, align, as, className, ...rest }: StackProps): ReactElement;
+declare function Stack<T extends ElementType = "div">(props: StackProps<T>): ReactElement;
 
 type InlineGap = "hairline" | "tight" | "base" | "loose";
 type InlineAlign = "start" | "center" | "end" | "baseline";
 type InlineJustify = "start" | "center" | "end" | "between";
-interface InlineProps extends HTMLAttributes<HTMLElement> {
+interface InlineOwnProps {
     /** Space between children, on the gap scale. Default "base". */
     gap?: InlineGap;
     /** Cross-axis alignment. Default "center". */
@@ -1161,9 +1166,8 @@ interface InlineProps extends HTMLAttributes<HTMLElement> {
     justify?: InlineJustify;
     /** Allow wrapping onto new lines. */
     wrap?: boolean;
-    /** Element to render. Default div. */
-    as?: ElementType;
 }
+type InlineProps<T extends ElementType = "div"> = Polymorphic<T, InlineOwnProps>;
 /**
  * Horizontal flow — Stack's row twin. Same token-bounded contract.
  *
@@ -1174,15 +1178,14 @@ interface InlineProps extends HTMLAttributes<HTMLElement> {
  * </Inline>
  * ```
  */
-declare function Inline({ gap, align, justify, wrap, as, className, ...rest }: InlineProps): ReactElement;
+declare function Inline<T extends ElementType = "div">(props: InlineProps<T>): ReactElement;
 
 type ContainerWidth = "content" | "wide";
-interface ContainerProps extends HTMLAttributes<HTMLElement> {
+interface ContainerOwnProps {
     /** content = reading column, wide = desktop shell. Default "content". */
     width?: ContainerWidth;
-    /** Element to render. Default div. */
-    as?: ElementType;
 }
+type ContainerProps<T extends ElementType = "div"> = Polymorphic<T, ContainerOwnProps>;
 /**
  * Centered max-width column with page-edge padding.
  *
@@ -1192,7 +1195,7 @@ interface ContainerProps extends HTMLAttributes<HTMLElement> {
  * </Container>
  * ```
  */
-declare function Container({ width, as, className, ...rest }: ContainerProps): ReactElement;
+declare function Container<T extends ElementType = "div">(props: ContainerProps<T>): ReactElement;
 
 type CardVariant = "card" | "raised" | "sunken";
 interface CardProps extends Omit<HTMLAttributes<HTMLElement>, "onClick"> {

package/dist/index.js

@@ -148,6 +148,8 @@ function Button({
   children,
   ...rest
 }) {
+  const glyph = iconOnly && children != null ? /* @__PURE__ */ jsx("span", { className: Button_module_default.slot, children }) : children;
+  const body = loading && iconOnly ? null : glyph;
   const Element = as ?? (href !== void 0 ? "a" : "button");
   const isButton = Element === "button";
   const own = isButton ? { type, disabled: disabled || loading } : { href };
@@ -169,7 +171,7 @@ function Button({
       ...rest,
       children: [
         loading ? /* @__PURE__ */ jsx("span", { className: Button_module_default.slot, children: /* @__PURE__ */ jsx(Spinner, { size: ICON_PX[size], label: "", "aria-hidden": "true" }) }) : iconLeft ? /* @__PURE__ */ jsx("span", { className: Button_module_default.slot, children: iconLeft }) : null,
-        children,
+        body,
         !loading && iconRight ? /* @__PURE__ */ jsx("span", { className: Button_module_default.slot, children: iconRight }) : null
       ]
     }
@@ -383,10 +385,10 @@ function CountButton({
   );
 }
 function CloseGlyph({ className }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) });
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) });
 }
 function ChevronLeftGlyph({ className }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx(
     "path",
     {
       d: "M10 3l-5 5 5 5",
@@ -399,7 +401,7 @@ function ChevronLeftGlyph({ className }) {
   ) });
 }
 function ChevronRightGlyph({ className }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx(
     "path",
     {
       d: "M6 3l5 5-5 5",
@@ -412,7 +414,7 @@ function ChevronRightGlyph({ className }) {
   ) });
 }
 function Magnifier({ className, children }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", children: [
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", children: [
     /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "4.25" }),
     /* @__PURE__ */ jsx("path", { d: "M10.2 10.2L14 14" }),
     children
@@ -425,35 +427,35 @@ function ZoomOutGlyph({ className }) {
   return /* @__PURE__ */ jsx(Magnifier, { className, children: /* @__PURE__ */ jsx("path", { d: "M4.75 7h4.5" }) });
 }
 function PlayGlyph({ className }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx("path", { d: "M5 3.2l7.5 4.8L5 12.8z", fill: "currentColor" }) });
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx("path", { d: "M5 3.2l7.5 4.8L5 12.8z", fill: "currentColor" }) });
 }
 function PauseGlyph({ className }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx("path", { d: "M4.5 3h2.25v10H4.5zM9.25 3h2.25v10H9.25z", fill: "currentColor" }) });
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx("path", { d: "M4.5 3h2.25v10H4.5zM9.25 3h2.25v10H9.25z", fill: "currentColor" }) });
 }
 function Speaker() {
   return /* @__PURE__ */ jsx("path", { d: "M2.5 6.25h2.25L8 3.4v9.2L4.75 9.75H2.5z", fill: "currentColor", stroke: "none" });
 }
 function VolumeGlyph({ className }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
     /* @__PURE__ */ jsx(Speaker, {}),
     /* @__PURE__ */ jsx("path", { d: "M10.5 5.75a3.25 3.25 0 010 4.5" }),
     /* @__PURE__ */ jsx("path", { d: "M12.5 3.9a5.75 5.75 0 010 8.2" })
   ] }) });
 }
 function VolumeOffGlyph({ className }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
     /* @__PURE__ */ jsx(Speaker, {}),
     /* @__PURE__ */ jsx("path", { d: "M10.75 6.25l3.5 3.5M14.25 6.25l-3.5 3.5" })
   ] }) });
 }
 function CaptionsGlyph({ className }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
     /* @__PURE__ */ jsx("rect", { x: "1.75", y: "3.25", width: "12.5", height: "9.5", rx: "2" }),
     /* @__PURE__ */ jsx("path", { d: "M6.25 6.75a2 2 0 100 2.5M11.25 6.75a2 2 0 100 2.5" })
   ] }) });
 }
 function FullscreenGlyph({ className }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx(
     "path",
     {
       d: "M6 2.5H2.5V6M10 2.5h3.5V6M6 13.5H2.5V10M10 13.5h3.5V10",
@@ -466,7 +468,7 @@ function FullscreenGlyph({ className }) {
   ) });
 }
 function FullscreenExitGlyph({ className }) {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx(
     "path",
     {
       d: "M2.5 6H6V2.5M13.5 6H10V2.5M2.5 10H6v3.5M13.5 10H10v3.5",
@@ -1784,13 +1786,14 @@ function ToastProvider({
 var Stack_module_default = { "stack": "mds-Stack__stack", "gap-hairline": "mds-Stack__gap-hairline", "gap-tight": "mds-Stack__gap-tight", "gap-base": "mds-Stack__gap-base", "gap-loose": "mds-Stack__gap-loose", "gap-group": "mds-Stack__gap-group", "gap-section": "mds-Stack__gap-section", "align-start": "mds-Stack__align-start", "align-center": "mds-Stack__align-center", "align-end": "mds-Stack__align-end", "align-stretch": "mds-Stack__align-stretch" };
 
 // src/components/Stack/Stack.tsx
-function Stack({
-  gap = "base",
-  align = "stretch",
-  as = "div",
-  className,
-  ...rest
-}) {
+function Stack(props) {
+  const {
+    gap = "base",
+    align = "stretch",
+    as = "div",
+    className,
+    ...rest
+  } = props;
   return createElement(as, {
     className: cx(Stack_module_default.stack, Stack_module_default[`gap-${gap}`], Stack_module_default[`align-${align}`], className),
     ...rest
@@ -1801,15 +1804,16 @@ function Stack({
 var Inline_module_default = { "inline": "mds-Inline__inline", "gap-hairline": "mds-Inline__gap-hairline", "gap-tight": "mds-Inline__gap-tight", "gap-base": "mds-Inline__gap-base", "gap-loose": "mds-Inline__gap-loose", "align-start": "mds-Inline__align-start", "align-center": "mds-Inline__align-center", "align-end": "mds-Inline__align-end", "align-baseline": "mds-Inline__align-baseline", "justify-start": "mds-Inline__justify-start", "justify-center": "mds-Inline__justify-center", "justify-end": "mds-Inline__justify-end", "justify-between": "mds-Inline__justify-between", "wrap": "mds-Inline__wrap" };
 
 // src/components/Inline/Inline.tsx
-function Inline({
-  gap = "base",
-  align = "center",
-  justify = "start",
-  wrap = false,
-  as = "div",
-  className,
-  ...rest
-}) {
+function Inline(props) {
+  const {
+    gap = "base",
+    align = "center",
+    justify = "start",
+    wrap = false,
+    as = "div",
+    className,
+    ...rest
+  } = props;
   return createElement(as, {
     className: cx(
       Inline_module_default.inline,
@@ -1827,12 +1831,8 @@ function Inline({
 var Container_module_default = { "container": "mds-Container__container", "width-content": "mds-Container__width-content", "width-wide": "mds-Container__width-wide" };
 
 // src/components/Container/Container.tsx
-function Container({
-  width = "content",
-  as = "div",
-  className,
-  ...rest
-}) {
+function Container(props) {
+  const { width = "content", as = "div", className, ...rest } = props;
   return createElement(as, {
     className: cx(Container_module_default.container, Container_module_default[`width-${width}`], className),
     ...rest