@westpac/ui 1.15.2 → 1.18.0

package/dist/components/button/button.component.d.ts

@@ -1,17 +1,2 @@
-import React from 'react';
-import { ButtonRef } from './button.types.js';
-export declare const Button: React.ForwardRefExoticComponent<{
-    block?: import("../../types/responsive-variants.types.js").ResponsiveVariants<boolean | undefined>;
-    children?: React.ReactNode;
-    iconAfter?: (props: import("../icon/icon.types.js").IconProps) => JSX.Element;
-    iconBefore?: (props: import("../icon/icon.types.js").IconProps) => JSX.Element;
-    iconColor?: import("../icon/icon.types.js").IconProps["color"];
-    iconLook?: import("../icon/icon.types.js").IconProps["look"];
-    iconSize?: import("../icon/icon.types.js").IconProps["size"];
-    justify?: import("../../types/responsive-variants.types.js").ResponsiveVariants<boolean | undefined>;
-    look?: import("../../types/responsive-variants.types.js").ResponsiveVariants<"link" | "primary" | "hero" | "faint" | "unstyled" | undefined>;
-    removeLinkPadding?: boolean;
-    size?: import("../../types/responsive-variants.types.js").ResponsiveVariants<"small" | "xlarge" | "medium" | "large" | undefined>;
-    soft?: import("../../types/responsive-variants.types.js").ResponsiveVariants<boolean | undefined>;
-    tag?: keyof Pick<JSX.IntrinsicElements, "a" | "span" | "button" | "div">;
-} & React.ButtonHTMLAttributes<Element> & React.AnchorHTMLAttributes<Element> & React.RefAttributes<ButtonRef>>;
+import { ButtonComponent } from './button.types.js';
+export declare const Button: ButtonComponent;

package/dist/components/button/button.component.js

@@ -5,7 +5,13 @@ import { useBreakpoint } from '../../hook/breakpoints.hook.js';
 import { resolveResponsiveVariant } from '../../utils/breakpoint.util.js';
 import { styles as buttonStyles } from './button.styles.js';
 import { getIconSize } from './button.utils.js';
-function BaseButton({ className, size = 'medium', look = 'hero', soft, block = false, justify, tag: Tag = 'button', iconBefore: IconBefore, iconAfter: IconAfter, iconLook, iconColor, iconSize, children, removeLinkPadding, type = Tag === 'button' ? 'button' : undefined, ...props }, ref) {
+function BaseButton({ className, size = 'medium', look = 'hero', soft, block = false, justify, tag: Tag, iconBefore: IconBefore, iconAfter: IconAfter, iconLook, iconColor, iconSize, children, removeLinkPadding, ...props }, ref) {
+    var _props_type;
+    const Component = Tag !== null && Tag !== void 0 ? Tag : 'button';
+    const renderProps = Component === 'button' ? {
+        ...props,
+        type: (_props_type = props.type) !== null && _props_type !== void 0 ? _props_type : 'button'
+    } : props;
     const { isFocusVisible, focusProps } = useFocusRing();
     const btnIconSize = useMemo(()=>iconSize || getIconSize(size), [
         iconSize,
@@ -52,13 +58,12 @@ function BaseButton({ className, size = 'medium', look = 'hero', soft, block = f
         look,
         soft
     ]);
-    return React.createElement(Tag, {
+    return React.createElement(Component, {
         ref: ref,
         className: styles.base({
             className
         }),
-        ...mergeProps(props, focusProps),
-        type: type
+        ...mergeProps(renderProps, focusProps)
     }, IconBefore && React.createElement(IconBefore, {
         look: iconLook,
         size: btnIconSize,

package/dist/components/button/button.types.d.ts

@@ -1,11 +1,10 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 import { ResponsiveVariants } from '../../types/responsive-variants.types.js';
 import { IconProps } from '../icon/index.js';
 import { styles } from './button.styles.js';
 type Variants = VariantProps<typeof styles>;
-export type ButtonRef = HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement;
-export type ButtonProps = {
+export type BaseButtonProps = {
     /**
      * Fit button width to its parent width.
      * @default false
@@ -64,10 +63,21 @@ export type ButtonProps = {
      * Removes background colour and adjusts text colour.
      */
     soft?: ResponsiveVariants<Variants['soft']>;
+};
+export type ButtonRef<C extends React.ElementType = 'button'> = React.ComponentRef<C>;
+export type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
+export type ButtonProps<C extends React.ElementType = 'button'> = BaseButtonProps & {
     /**
-     * Tag to render
+     * Type to render
      * @default button
      */
-    tag?: keyof Pick<JSX.IntrinsicElements, 'a' | 'span' | 'button' | 'div'>;
-} & ButtonHTMLAttributes<Element> & AnchorHTMLAttributes<Element>;
+    tag?: C;
+} & Omit<React.ComponentPropsWithoutRef<C>, keyof BaseButtonProps | 'tag'>;
+export type ButtonImplementationProps = BaseButtonProps & {
+    className?: string;
+    tag?: React.ElementType;
+} & Record<string, unknown>;
+export type ButtonComponent = <C extends React.ElementType = 'button'>(props: ButtonProps<C> & {
+    ref?: PolymorphicRef<C>;
+}) => React.ReactElement | null;
 export {};

package/dist/components/link/link.component.d.ts

@@ -1,12 +1,4 @@
-import React, { ForwardedRef } from 'react';
-import { type LinkProps } from './link.types.js';
-export declare function BaseLink({ className, children, href, iconBefore: IconBefore, iconAfter: IconAfter, iconSize, target, type, underline, ...props }: LinkProps, ref: ForwardedRef<HTMLAnchorElement>): import("react/jsx-runtime").JSX.Element;
-export declare const Link: React.ForwardRefExoticComponent<{
-    children?: React.ReactNode;
-    className?: string;
-    iconAfter?: (props: import("../icon/icon.types.js").IconProps) => JSX.Element;
-    iconBefore?: (props: import("../icon/icon.types.js").IconProps) => JSX.Element;
-    iconSize?: "xsmall" | "small" | "medium" | "large" | "xlarge";
-    type?: "inline" | "standalone";
-    underline?: boolean;
-} & Omit<import("react-aria").AriaLinkOptions, "isDisabled" | "elementType"> & React.AnchorHTMLAttributes<Element> & React.RefAttributes<HTMLAnchorElement>>;
+import { ForwardedRef } from 'react';
+import { LinkComponent, LinkImplementationProps } from './link.types.js';
+export declare function BaseLink({ className, children, href, tag: Tag, iconBefore: IconBefore, iconAfter: IconAfter, iconSize, target, type, underline, autoFocus, elementType, onBlur, onClick, onFocus, onFocusChange, onKeyDown, onKeyUp, onPress, onPressChange, onPressEnd, onPressStart, onPressUp, download, ping, referrerPolicy, rel, routerOptions, ...componentProps }: LinkImplementationProps, ref: ForwardedRef<unknown>): import("react/jsx-runtime").JSX.Element;
+export declare const Link: LinkComponent;

package/dist/components/link/link.component.js

@@ -1,13 +1,35 @@
 'use client';
 import React, { forwardRef } from 'react';
-import { mergeProps, useFocusRing, useLink } from 'react-aria';
+import { mergeProps, useFocusRing, useLink, useObjectRef } from 'react-aria';
 import { ArrowRightIcon } from '../icon/index.js';
 import { styles as linkStyles } from './link.styles.js';
-export function BaseLink({ className, children, href, iconBefore: IconBefore, iconAfter: IconAfter, iconSize = 'small', target, type = 'standalone', underline = true, ...props }, ref) {
+export function BaseLink({ className, children, href, tag: Tag, iconBefore: IconBefore, iconAfter: IconAfter, iconSize = 'small', target, type = 'standalone', underline = true, autoFocus, elementType, onBlur, onClick, onFocus, onFocusChange, onKeyDown, onKeyUp, onPress, onPressChange, onPressEnd, onPressStart, onPressUp, download, ping, referrerPolicy, rel, routerOptions, ...componentProps }, ref) {
+    const Component = Tag !== null && Tag !== void 0 ? Tag : 'a';
+    const ariaElementType = typeof Component === 'string' ? Component : elementType !== null && elementType !== void 0 ? elementType : 'a';
+    const linkRef = useObjectRef(ref);
     const { linkProps } = useLink({
-        ...props,
-        elementType: 'a'
-    }, ref);
+        ...componentProps,
+        autoFocus,
+        download,
+        elementType: ariaElementType,
+        href: typeof href === 'string' ? href : undefined,
+        onBlur,
+        onClick,
+        onFocus,
+        onFocusChange,
+        onKeyDown,
+        onKeyUp,
+        onPress,
+        onPressChange,
+        onPressEnd,
+        onPressStart,
+        onPressUp,
+        ping,
+        referrerPolicy,
+        rel,
+        routerOptions,
+        target
+    }, linkRef);
     const { isFocusVisible, focusProps } = useFocusRing();
     const styles = linkStyles({
         type,
@@ -17,9 +39,10 @@ export function BaseLink({ className, children, href, iconBefore: IconBefore, ic
     if (type === 'standalone' && !IconBefore && !IconAfter) {
         IconBefore = ArrowRightIcon;
     }
-    return React.createElement("a", {
+    return React.createElement(Component, {
+        ...componentProps,
         ...mergeProps(linkProps, focusProps),
-        ref: ref,
+        ref: linkRef,
         href: href,
         target: target,
         className: styles.base({

package/dist/components/link/link.types.d.ts

@@ -1,7 +1,7 @@
-import { AnchorHTMLAttributes, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { AriaLinkOptions } from 'react-aria';
 import { IconProps } from '../icon/index.js';
-export type LinkProps = {
+export type BaseLinkProps = {
     /**
      * Link text or component
      */
@@ -33,4 +33,27 @@ export type LinkProps = {
      * @default true
      */
     underline?: boolean;
-} & Omit<AriaLinkOptions, 'isDisabled' | 'elementType'> & AnchorHTMLAttributes<Element>;
+    /**
+     * Specifies DOM element rendered by a custom component
+     * Required when the custom component does not render an '<a>' element
+     * @default 'a'
+     */
+    elementType?: AriaLinkOptions['elementType'];
+} & Omit<AriaLinkOptions, 'elementType' | 'href' | 'isDisabled'>;
+export type LinkRef<C extends React.ElementType = 'a'> = React.ComponentRef<C>;
+export type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
+export type LinkProps<C extends React.ElementType = 'a'> = BaseLinkProps & {
+    /**
+     * Type to render
+     * @default a
+     */
+    tag?: C;
+} & Omit<React.ComponentPropsWithoutRef<C>, keyof BaseLinkProps | 'tag'>;
+export type LinkImplementationProps = BaseLinkProps & {
+    className?: string;
+    href?: unknown;
+    tag?: React.ElementType;
+} & Record<string, unknown>;
+export type LinkComponent = <C extends React.ElementType = 'a'>(props: LinkProps<C> & {
+    ref?: PolymorphicRef<C>;
+}) => React.ReactElement | null;

package/dist/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.component.d.ts

@@ -1,2 +1,2 @@
 import { type ModalDialogFooterProps } from './modal-dialog-footer.types.js';
-export declare function ModalDialogFooter({ className, primaryLabel, primaryOnClick, secondaryLabel, secondaryOnClick, ...props }: ModalDialogFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function ModalDialogFooter({ className, primaryButtonProps, primaryLabel, primaryOnClick, secondaryButtonProps, secondaryLabel, secondaryOnClick, ...props }: ModalDialogFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.component.js

@@ -5,7 +5,8 @@ import { resolveResponsiveVariant } from '../../../../../../utils/breakpoint.uti
 import { Button } from '../../../../../button/index.js';
 import { useModalDialogContext } from '../../modal-dialog.component.js';
 import { styles as modalFooterStyles } from './modal-dialog-footer.styles.js';
-export function ModalDialogFooter({ className, primaryLabel, primaryOnClick, secondaryLabel, secondaryOnClick, ...props }) {
+export function ModalDialogFooter({ className, primaryButtonProps, primaryLabel, primaryOnClick, secondaryButtonProps, secondaryLabel, secondaryOnClick, ...props }) {
+    var _ref, _ref1, _ref2, _ref3;
     const { size, compact, setFooterPresent } = useModalDialogContext();
     const breakpoint = useBreakpoint();
     const styles = modalFooterStyles({
@@ -23,14 +24,20 @@ export function ModalDialogFooter({ className, primaryLabel, primaryOnClick, sec
         }),
         ...props
     }, React.createElement(Button, {
-        look: "primary",
-        size: "large",
-        className: styles.primaryBtn(),
+        ...primaryButtonProps,
+        look: (_ref = primaryButtonProps === null || primaryButtonProps === void 0 ? void 0 : primaryButtonProps.look) !== null && _ref !== void 0 ? _ref : 'primary',
+        size: (_ref1 = primaryButtonProps === null || primaryButtonProps === void 0 ? void 0 : primaryButtonProps.size) !== null && _ref1 !== void 0 ? _ref1 : 'large',
+        className: styles.primaryBtn({
+            className: primaryButtonProps === null || primaryButtonProps === void 0 ? void 0 : primaryButtonProps.className
+        }),
         onClick: primaryOnClick
     }, primaryLabel), secondaryLabel && React.createElement(Button, {
-        look: "link",
-        size: "large",
-        className: styles.secondaryBtn(),
+        ...secondaryButtonProps,
+        look: (_ref2 = secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps.look) !== null && _ref2 !== void 0 ? _ref2 : 'link',
+        size: (_ref3 = secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps.size) !== null && _ref3 !== void 0 ? _ref3 : 'large',
+        className: styles.secondaryBtn({
+            className: secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps.className
+        }),
         onClick: secondaryOnClick
     }, secondaryLabel));
 }

package/dist/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.types.d.ts

@@ -1,9 +1,15 @@
 import { HTMLAttributes, ReactNode } from 'react';
+import { type ButtonProps } from '../../../../../button/index.js';
+type ModalFooterButtonProps = Omit<ButtonProps, 'children' | 'onClick'>;
 export type ModalDialogFooterProps = {
     /**
      * Footer content
      */
     children?: ReactNode;
+    /**
+     * Props passed to the primary button
+     */
+    primaryButtonProps?: ModalFooterButtonProps;
     /**
      * Label for primary button
      */
@@ -12,6 +18,10 @@ export type ModalDialogFooterProps = {
      * onClick for primary button
      */
     primaryOnClick: () => void;
+    /**
+     * Props passed to the secondary button
+     */
+    secondaryButtonProps?: ModalFooterButtonProps;
     /**
      * Label for secondary button
      */
@@ -21,3 +31,4 @@ export type ModalDialogFooterProps = {
      */
     secondaryOnClick?: () => void;
 } & HTMLAttributes<HTMLElement>;
+export {};

package/dist/components/pass-code/index.d.ts

@@ -1,2 +1,2 @@
 export { PassCode } from './pass-code.component.js';
-export { type PassCodeProps } from './pass-code.types.js';
+export { type PassCodeProps, type PassCodeRef } from './pass-code.types.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "1.15.2",
+  "version": "1.18.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -259,10 +259,10 @@
     "typescript": "^5.5.4",
     "vite": "^7.3.5",
     "vitest": "^3.2.6",
-    "@westpac/test-config": "~0.0.0",
-    "@westpac/ts-config": "~0.0.0",
+    "@westpac/eslint-config": "~1.1.0",
     "@westpac/style-config": "~1.0.2",
-    "@westpac/eslint-config": "~1.1.0"
+    "@westpac/test-config": "~0.0.0",
+    "@westpac/ts-config": "~0.0.0"
   },
   "dependencies": {
     "@internationalized/date": "^3.12.0",
@@ -280,6 +280,7 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
     "tailwindcss": "~4.1.12"
   },
   "repository": {

package/src/components/button/button.component.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import React, { Ref, forwardRef, useMemo } from 'react';
+import React, { ForwardedRef, forwardRef, useMemo } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 
 import { useBreakpoint } from '../../hook/breakpoints.hook.js';
 import { resolveResponsiveVariant } from '../../utils/breakpoint.util.js';
 
 import { styles as buttonStyles } from './button.styles.js';
-import { type ButtonProps, ButtonRef } from './button.types.js';
+import { ButtonImplementationProps, ButtonComponent } from './button.types.js';
 import { getIconSize } from './button.utils.js';
 
 function BaseButton(
@@ -18,7 +18,7 @@ function BaseButton(
     soft,
     block = false,
     justify,
-    tag: Tag = 'button',
+    tag: Tag,
     iconBefore: IconBefore,
     iconAfter: IconAfter,
     iconLook,
@@ -26,11 +26,12 @@ function BaseButton(
     iconSize,
     children,
     removeLinkPadding,
-    type = Tag === 'button' ? 'button' : undefined,
     ...props
-  }: ButtonProps,
-  ref: Ref<ButtonRef>,
+  }: ButtonImplementationProps,
+  ref: ForwardedRef<unknown>,
 ) {
+  const Component = Tag ?? 'button';
+  const renderProps = Component === 'button' ? { ...props, type: props.type ?? 'button' } : props;
   const { isFocusVisible, focusProps } = useFocusRing();
   const btnIconSize = useMemo(() => iconSize || getIconSize(size), [iconSize, size]);
   const breakpoint = useBreakpoint();
@@ -76,7 +77,7 @@ function BaseButton(
   }, [iconColor, look, soft]);
 
   return (
-    <Tag ref={ref} className={styles.base({ className })} {...mergeProps(props, focusProps)} type={type}>
+    <Component ref={ref} className={styles.base({ className })} {...mergeProps(renderProps, focusProps)}>
       {IconBefore && (
         <IconBefore
           look={iconLook}
@@ -96,8 +97,8 @@ function BaseButton(
           aria-hidden
         />
       )}
-    </Tag>
+    </Component>
   );
 }
 
-export const Button = forwardRef(BaseButton);
+export const Button = forwardRef(BaseButton) as unknown as ButtonComponent;

package/src/components/button/button.types.ts

@@ -1,4 +1,4 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 
 import { ResponsiveVariants } from '../../types/responsive-variants.types.js';
@@ -8,9 +8,7 @@ import { styles } from './button.styles.js';
 
 type Variants = VariantProps<typeof styles>;
 
-export type ButtonRef = HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement;
-
-export type ButtonProps = {
+export type BaseButtonProps = {
   /**
    * Fit button width to its parent width.
    * @default false
@@ -69,10 +67,25 @@ export type ButtonProps = {
    * Removes background colour and adjusts text colour.
    */
   soft?: ResponsiveVariants<Variants['soft']>;
+};
+
+export type ButtonRef<C extends React.ElementType = 'button'> = React.ComponentRef<C>;
+
+export type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
+
+export type ButtonProps<C extends React.ElementType = 'button'> = BaseButtonProps & {
   /**
-   * Tag to render
+   * Type to render
    * @default button
    */
-  tag?: keyof Pick<JSX.IntrinsicElements, 'a' | 'span' | 'button' | 'div'>;
-} & ButtonHTMLAttributes<Element> &
-  AnchorHTMLAttributes<Element>;
+  tag?: C;
+} & Omit<React.ComponentPropsWithoutRef<C>, keyof BaseButtonProps | 'tag'>;
+
+export type ButtonImplementationProps = BaseButtonProps & {
+  className?: string;
+  tag?: React.ElementType;
+} & Record<string, unknown>;
+
+export type ButtonComponent = <C extends React.ElementType = 'button'>(
+  props: ButtonProps<C> & { ref?: PolymorphicRef<C> },
+) => React.ReactElement | null;

package/src/components/link/link.component.tsx

@@ -1,30 +1,77 @@
-// TODO: This component will not work with the Next Link component in Next.js 16+ as legacyBehavior as has been deprecated in 15. Need to find a solution.
 'use client';
 
-import React, { ForwardedRef, RefObject, forwardRef } from 'react';
-import { mergeProps, useFocusRing, useLink } from 'react-aria';
+import { type FocusableElement } from '@react-types/shared';
+import React, { ForwardedRef, forwardRef } from 'react';
+import { mergeProps, useFocusRing, useLink, useObjectRef } from 'react-aria';
 
 import { ArrowRightIcon } from '../icon/index.js';
 
 import { styles as linkStyles } from './link.styles.js';
-import { type LinkProps } from './link.types.js';
+import { LinkComponent, LinkImplementationProps } from './link.types.js';
 
 export function BaseLink(
   {
     className,
     children,
     href,
+    tag: Tag,
     iconBefore: IconBefore,
     iconAfter: IconAfter,
     iconSize = 'small',
     target,
     type = 'standalone',
     underline = true,
-    ...props
-  }: LinkProps,
-  ref: ForwardedRef<HTMLAnchorElement>,
+    autoFocus,
+    elementType,
+    onBlur,
+    onClick,
+    onFocus,
+    onFocusChange,
+    onKeyDown,
+    onKeyUp,
+    onPress,
+    onPressChange,
+    onPressEnd,
+    onPressStart,
+    onPressUp,
+    download,
+    ping,
+    referrerPolicy,
+    rel,
+    routerOptions,
+    ...componentProps
+  }: LinkImplementationProps,
+  ref: ForwardedRef<unknown>,
 ) {
-  const { linkProps } = useLink({ ...props, elementType: 'a' }, ref as RefObject<HTMLAnchorElement>);
+  const Component = Tag ?? 'a';
+  const ariaElementType = typeof Component === 'string' ? Component : (elementType ?? 'a');
+  const linkRef = useObjectRef(ref as ForwardedRef<FocusableElement>);
+  const { linkProps } = useLink(
+    {
+      ...componentProps,
+      autoFocus,
+      download,
+      elementType: ariaElementType,
+      href: typeof href === 'string' ? href : undefined,
+      onBlur,
+      onClick,
+      onFocus,
+      onFocusChange,
+      onKeyDown,
+      onKeyUp,
+      onPress,
+      onPressChange,
+      onPressEnd,
+      onPressStart,
+      onPressUp,
+      ping,
+      referrerPolicy,
+      rel,
+      routerOptions,
+      target,
+    },
+    linkRef,
+  );
   const { isFocusVisible, focusProps } = useFocusRing();
   const styles = linkStyles({ type, underline, isFocusVisible });
 
@@ -33,9 +80,10 @@ export function BaseLink(
   }
 
   return (
-    <a
+    <Component
+      {...componentProps}
       {...mergeProps(linkProps, focusProps)}
-      ref={ref}
+      ref={linkRef}
       href={href}
       target={target}
       className={styles.base({ className })}
@@ -43,8 +91,8 @@ export function BaseLink(
       {IconBefore && <IconBefore size={iconSize} color="primary" className={styles.iconBefore()} />}
       <span>{children}</span>
       {IconAfter && <IconAfter size={iconSize} color="primary" className={styles.iconAfter()} />}
-    </a>
+    </Component>
   );
 }
 
-export const Link = forwardRef(BaseLink);
+export const Link = forwardRef(BaseLink) as unknown as LinkComponent;

package/src/components/link/link.types.ts

@@ -1,9 +1,9 @@
-import { AnchorHTMLAttributes, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { AriaLinkOptions } from 'react-aria';
 
 import { IconProps } from '../icon/index.js';
 
-export type LinkProps = {
+export type BaseLinkProps = {
   /**
    * Link text or component
    */
@@ -35,5 +35,32 @@ export type LinkProps = {
    * @default true
    */
   underline?: boolean;
-} & Omit<AriaLinkOptions, 'isDisabled' | 'elementType'> &
-  AnchorHTMLAttributes<Element>;
+  /**
+   * Specifies DOM element rendered by a custom component
+   * Required when the custom component does not render an '<a>' element
+   * @default 'a'
+   */
+  elementType?: AriaLinkOptions['elementType'];
+} & Omit<AriaLinkOptions, 'elementType' | 'href' | 'isDisabled'>;
+
+export type LinkRef<C extends React.ElementType = 'a'> = React.ComponentRef<C>;
+
+export type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
+
+export type LinkProps<C extends React.ElementType = 'a'> = BaseLinkProps & {
+  /**
+   * Type to render
+   * @default a
+   */
+  tag?: C;
+} & Omit<React.ComponentPropsWithoutRef<C>, keyof BaseLinkProps | 'tag'>;
+
+export type LinkImplementationProps = BaseLinkProps & {
+  className?: string;
+  href?: unknown;
+  tag?: React.ElementType;
+} & Record<string, unknown>;
+
+export type LinkComponent = <C extends React.ElementType = 'a'>(
+  props: LinkProps<C> & { ref?: PolymorphicRef<C> },
+) => React.ReactElement | null;

package/src/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.component.tsx

@@ -12,8 +12,10 @@ import { type ModalDialogFooterProps } from './modal-dialog-footer.types.js';
 
 export function ModalDialogFooter({
   className,
+  primaryButtonProps,
   primaryLabel,
   primaryOnClick,
+  secondaryButtonProps,
   secondaryLabel,
   secondaryOnClick,
   ...props
@@ -29,11 +31,23 @@ export function ModalDialogFooter({
 
   return (
     <div className={styles.base({ className })} {...props}>
-      <Button look="primary" size="large" className={styles.primaryBtn()} onClick={primaryOnClick}>
+      <Button
+        {...primaryButtonProps}
+        look={primaryButtonProps?.look ?? 'primary'}
+        size={primaryButtonProps?.size ?? 'large'}
+        className={styles.primaryBtn({ className: primaryButtonProps?.className })}
+        onClick={primaryOnClick}
+      >
         {primaryLabel}
       </Button>
       {secondaryLabel && (
-        <Button look="link" size="large" className={styles.secondaryBtn()} onClick={secondaryOnClick}>
+        <Button
+          {...secondaryButtonProps}
+          look={secondaryButtonProps?.look ?? 'link'}
+          size={secondaryButtonProps?.size ?? 'large'}
+          className={styles.secondaryBtn({ className: secondaryButtonProps?.className })}
+          onClick={secondaryOnClick}
+        >
           {secondaryLabel}
         </Button>
       )}

package/src/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.types.ts

@@ -1,10 +1,18 @@
 import { HTMLAttributes, ReactNode } from 'react';
 
+import { type ButtonProps } from '../../../../../button/index.js';
+
+type ModalFooterButtonProps = Omit<ButtonProps, 'children' | 'onClick'>;
+
 export type ModalDialogFooterProps = {
   /**
    * Footer content
    */
   children?: ReactNode;
+  /**
+   * Props passed to the primary button
+   */
+  primaryButtonProps?: ModalFooterButtonProps;
   /**
    * Label for primary button
    */
@@ -13,6 +21,10 @@ export type ModalDialogFooterProps = {
    * onClick for primary button
    */
   primaryOnClick: () => void;
+  /**
+   * Props passed to the secondary button
+   */
+  secondaryButtonProps?: ModalFooterButtonProps;
   /**
    * Label for secondary button
    */

package/src/components/pass-code/index.ts

@@ -1,2 +1,2 @@
 export { PassCode } from './pass-code.component.js';
-export { type PassCodeProps } from './pass-code.types.js';
+export { type PassCodeProps, type PassCodeRef } from './pass-code.types.js';