@mond-design-system/react 4.10.2 → 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

@@ -1786,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
@@ -1803,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,
@@ -1829,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