@westpac/ui 0.14.1 → 0.15.0

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

@@ -1,10 +1,13 @@
 import React from 'react';
 import { type BadgeProps } from './badge.types.js';
-export declare function BaseBadge({ className, tag: Tag, color, type, children, ...props }: BadgeProps, ref: any): import("react/jsx-runtime").JSX.Element;
+export declare function BaseBadge({ className, tag: Tag, color, type, soft, children, ...props }: BadgeProps, ref: any): import("react/jsx-runtime").JSX.Element;
 export declare const Badge: React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
-    color?: "primary" | "hero" | "faint" | "success" | "info" | "warning" | "danger" | "neutral" | "danger-inverted" | "faint-inverted" | "hero-inverted" | "info-inverted" | "neutral-inverted" | "primary-inverted" | "success-inverted" | "warning-inverted" | {
-        [x: string]: "primary" | "hero" | "faint" | "success" | "info" | "warning" | "danger" | "neutral" | "danger-inverted" | "faint-inverted" | "hero-inverted" | "info-inverted" | "neutral-inverted" | "primary-inverted" | "success-inverted" | "warning-inverted" | undefined;
+    color?: "primary" | "hero" | "faint" | "success" | "info" | "warning" | "danger" | "muted" | "neutral" | "danger-inverted" | "faint-inverted" | "hero-inverted" | "info-inverted" | "neutral-inverted" | "primary-inverted" | "success-inverted" | "warning-inverted" | {
+        [x: string]: "primary" | "hero" | "faint" | "success" | "info" | "warning" | "danger" | "muted" | "neutral" | "danger-inverted" | "faint-inverted" | "hero-inverted" | "info-inverted" | "neutral-inverted" | "primary-inverted" | "success-inverted" | "warning-inverted" | undefined;
+    } | undefined;
+    soft?: boolean | {
+        [x: string]: boolean | undefined;
     } | undefined;
     tag?: keyof JSX.IntrinsicElements | undefined;
     type?: "default" | "pill" | {

package/dist/components/badge/badge.component.js

@@ -15,14 +15,15 @@ function _extends() {
 }
 import React, { forwardRef } from 'react';
 import { styles } from './badge.styles.js';
-export function BaseBadge({ className , tag: Tag = 'div' , color ='hero' , type ='default' , children , ...props }, ref) {
+export function BaseBadge({ className , tag: Tag = 'div' , color ='hero' , type ='default' , soft =false , children , ...props }, ref) {
     return React.createElement(Tag, _extends({}, {
         ref
     }, {
         className: styles({
             className,
             color,
-            type
+            type,
+            soft
         })
     }, props), children);
 }

package/dist/components/badge/badge.styles.d.ts

@@ -5,6 +5,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         hero: string;
         info: string;
         neutral: string;
+        muted: string;
         primary: string;
         success: string;
         warning: string;
@@ -21,6 +22,9 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         pill: string;
         default: string;
     };
+    soft: {
+        true: string;
+    };
 }, undefined, "inline-block whitespace-nowrap border text-center leading-none", {
     responsiveVariants: string[];
 }, {
@@ -30,6 +34,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         hero: string;
         info: string;
         neutral: string;
+        muted: string;
         primary: string;
         success: string;
         warning: string;
@@ -46,4 +51,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         pill: string;
         default: string;
     };
+    soft: {
+        true: string;
+    };
 }, undefined>;

package/dist/components/badge/badge.styles.js

@@ -4,10 +4,11 @@ export const styles = tv({
     variants: {
         color: {
             danger: 'border-danger bg-danger text-white',
-            faint: 'border-border bg-white text-muted',
+            faint: 'border-border bg-border text-muted',
             hero: 'border-hero bg-hero text-white',
             info: 'border-info bg-info text-white',
             neutral: 'border-neutral bg-neutral text-white',
+            muted: 'border-muted bg-muted text-white',
             primary: 'border-primary bg-primary text-white',
             success: 'border-success bg-success text-white',
             warning: 'border-warning bg-warning text-white',
@@ -21,10 +22,60 @@ export const styles = tv({
             'warning-inverted': 'border-none bg-white text-warning'
         },
         type: {
-            pill: 'typography-body-10 rounded-xl px-[0.4375rem] py-[0.25rem] font-bold leading-none',
+            pill: 'typography-body-10 rounded-xl px-[0.4375rem] py-[0.25rem] font-medium leading-none',
             default: 'rounded-sm px-1 py-0.5 pb-[0.125rem] text-[0.75rem] leading-none'
+        },
+        soft: {
+            true: 'bg-white'
         }
-    }
+    },
+    compoundVariants: [
+        {
+            color: 'danger',
+            soft: true,
+            className: 'text-danger'
+        },
+        {
+            color: 'faint',
+            soft: true,
+            className: 'text-muted'
+        },
+        {
+            color: 'hero',
+            soft: true,
+            className: 'text-hero'
+        },
+        {
+            color: 'info',
+            soft: true,
+            className: 'text-info'
+        },
+        {
+            color: 'neutral',
+            soft: true,
+            className: 'text-neutral'
+        },
+        {
+            color: 'muted',
+            soft: true,
+            className: 'text-muted'
+        },
+        {
+            color: 'primary',
+            soft: true,
+            className: 'text-primary'
+        },
+        {
+            color: 'success',
+            soft: true,
+            className: 'text-success'
+        },
+        {
+            color: 'warning',
+            soft: true,
+            className: 'text-warning'
+        }
+    ]
 }, {
     responsiveVariants: [
         'xsl',

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

@@ -12,6 +12,11 @@ export type BadgeProps = {
      * @default hero
      */
     color?: Variants['color'];
+    /**
+     * Removes background colour and adjusts text colour.
+     * @default false
+     */
+    soft?: Variants['soft'];
     /**
      * Tag to render
      * @default div

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ButtonGroupContextState, type ButtonGroupProps } from './button-group.types.js';
 export declare const ButtonGroupContext: React.Context<ButtonGroupContextState>;
-export declare function ButtonGroup({ className, children, label, look, size, block, errorMessage, hintMessage, ...props }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonGroup({ className, buttons, label, look, size, block, errorMessage, hintMessage, ...props }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;

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

@@ -13,10 +13,10 @@ function _extends() {
     };
     return _extends.apply(this, arguments);
 }
-import React, { cloneElement, createContext } from 'react';
+import React, { createContext } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
-import { ErrorMessage, Hint, Label } from '../index.js';
+import { ButtonGroupButton, ErrorMessage, Hint, Label } from '../index.js';
 import { styles as buttonGroupStyles } from './button-group.styles.js';
 export const ButtonGroupContext = createContext({
     name: '',
@@ -32,7 +32,7 @@ export const ButtonGroupContext = createContext({
     look: 'hero',
     size: 'medium'
 });
-export function ButtonGroup({ className , children , label , look ='hero' , size ='medium' , block =false , errorMessage , hintMessage , ...props }) {
+export function ButtonGroup({ className , buttons , label , look ='hero' , size ='medium' , block =false , errorMessage , hintMessage , ...props }) {
     const state = useRadioGroupState({
         ...props,
         label,
@@ -45,12 +45,6 @@ export function ButtonGroup({ className , children , label , look ='hero' , size
         orientation: 'horizontal'
     }, state);
     const styles = buttonGroupStyles({});
-    const childrenToRender = children.map((child, index)=>{
-        return cloneElement(child, {
-            key: index,
-            className: 'group/buttons'
-        });
-    });
     return React.createElement("div", _extends({
         className: styles.base({
             className
@@ -66,5 +60,8 @@ export function ButtonGroup({ className , children , label , look ='hero' , size
             look,
             block
         }
-    }, childrenToRender)));
+    }, buttons.map((button, index)=>React.createElement(ButtonGroupButton, _extends({
+            key: index,
+            className: "group/buttons"
+        }, button))))));
 }

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

@@ -1,16 +1,16 @@
-import { ReactNode } from 'react';
 import { AriaRadioGroupProps } from 'react-aria';
 import { RadioGroupState } from 'react-stately';
 import { type ButtonProps } from '../button/index.js';
+import { ButtonGroupButtonProps } from './components/button-group-button/button-group-button.types.js';
 export type ButtonGroupProps = {
     /**
      * Sets whether buttons fill the entire box they are located in
      */
     block?: boolean;
     /**
-     * The `Button` components to render
+     * The `Button` components to render in the form of an object
      */
-    children: ReactNode[];
+    buttons: Omit<ButtonGroupButtonProps, 'className'>[];
     /**
      * String to override base style
      */
@@ -27,7 +27,7 @@ export type ButtonGroupProps = {
      * Controls look of `Button` components, can't be applied directly to `Button`
      */
     look?: 'hero' | 'primary';
-} & Omit<AriaRadioGroupProps, 'errorMessage' | 'description' | 'orientation'> & Pick<ButtonProps, 'size'>;
+} & Omit<AriaRadioGroupProps, 'errorMessage' | 'description' | 'orientation' | 'children'> & Pick<ButtonProps, 'size'>;
 export type ButtonGroupContextState = {
     /**
      * Sets whether buttons fill the entire box they are located in

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

@@ -1,2 +1,2 @@
 import { type ButtonGroupButtonProps } from './button-group-button.types.js';
-export declare function ButtonGroupButton({ className, children, ...props }: ButtonGroupButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonGroupButton({ className, label, ...props }: ButtonGroupButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -18,13 +18,13 @@ import { VisuallyHidden, useFocusRing, useRadio } from 'react-aria';
 import { Button as GELButton } from '../../../button/index.js';
 import { ButtonGroupContext } from '../../button-group.component.js';
 import { styles as buttonStyles } from './button-group-button.styles.js';
-export function ButtonGroupButton({ className , children , ...props }) {
+export function ButtonGroupButton({ className , label , ...props }) {
     const state = useContext(ButtonGroupContext);
     const { size , look , block  } = state;
     const ref = useRef(null);
     const { inputProps , isSelected , isDisabled  } = useRadio({
         ...props,
-        children
+        children: label
     }, state, ref);
     const { isFocusVisible , focusProps  } = useFocusRing();
     const styles = buttonStyles({
@@ -46,5 +46,5 @@ export function ButtonGroupButton({ className , children , ...props }) {
         look: look,
         size: size,
         className: styles.button()
-    }, children));
+    }, label));
 }

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

@@ -1,7 +1,12 @@
+import { ReactNode } from 'react';
 import { AriaRadioProps } from 'react-aria';
 export type ButtonGroupButtonProps = {
     /**
      * `string` for overriding base style
      */
     className?: string;
-} & AriaRadioProps;
+    /**
+     * Label to render
+     */
+    label: ReactNode;
+} & Omit<AriaRadioProps, 'children'>;

package/dist/components/checkbox-group/checkbox-group.component.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type CheckboxGroupContextState, type CheckboxGroupProps } from './checkbox-group.types.js';
 export declare const CheckboxGroupContext: React.Context<CheckboxGroupContextState>;
-export declare function CheckboxGroup({ className, children, label, orientation, showAmount, size, errorMessage, hintMessage, ...props }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckboxGroup({ className, checkboxes, label, orientation, showAmount, size, errorMessage, hintMessage, ...props }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/checkbox-group/checkbox-group.component.js

@@ -13,12 +13,12 @@ function _extends() {
     };
     return _extends.apply(this, arguments);
 }
-import React, { cloneElement, createContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useCheckboxGroup, useFocusRing } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
 import { Button } from '../button/index.js';
 import { ExpandMoreIcon } from '../icon/index.js';
-import { ErrorMessage, Hint, Label } from '../index.js';
+import { CheckboxGroupCheckbox, ErrorMessage, Hint, Label } from '../index.js';
 import { styles as checkboxStyles } from './checkbox-group.styles.js';
 export const CheckboxGroupContext = createContext({
     orientation: 'vertical',
@@ -33,7 +33,7 @@ export const CheckboxGroupContext = createContext({
     toggleValue: ()=>null,
     validationState: 'valid'
 });
-export function CheckboxGroup({ className , children , label , orientation ='vertical' , showAmount =0 , size ='medium' , errorMessage , hintMessage , ...props }) {
+export function CheckboxGroup({ className , checkboxes , label , orientation ='vertical' , showAmount =0 , size ='medium' , errorMessage , hintMessage , ...props }) {
     const state = useCheckboxGroupState({
         ...props,
         label
@@ -45,21 +45,19 @@ export function CheckboxGroup({ className , children , label , orientation ='ver
     const { isFocusVisible , focusProps  } = useFocusRing();
     const [hiddenOptions, setHiddenOptions] = useState(showAmount > 0);
     const firstNewCheckboxRef = useRef(null);
-    const revealAmount = children && children.length - showAmount;
+    const revealAmount = checkboxes && checkboxes.length - showAmount;
     const styles = checkboxStyles({
         orientation,
         isFocusVisible
     });
     const childrenToRender = useMemo(()=>{
-        const newChildren = children.map((child, index)=>{
-            return cloneElement(child, {
+        const newChildren = checkboxes.map((checkbox, index)=>React.createElement(CheckboxGroupCheckbox, _extends({
                 key: index,
                 ref: index === showAmount ? firstNewCheckboxRef : null
-            });
-        });
+            }, checkbox)));
         return hiddenOptions ? newChildren.slice(0, showAmount) : newChildren;
     }, [
-        children,
+        checkboxes,
         hiddenOptions,
         showAmount
     ]);

package/dist/components/checkbox-group/checkbox-group.types.d.ts

@@ -1,12 +1,12 @@
-import { ReactNode } from 'react';
 import { AriaCheckboxGroupProps } from 'react-aria';
 import { CheckboxGroupState } from 'react-stately';
 import { HintProps } from '../index.js';
+import { CheckboxGroupCheckboxProps } from './components/checkbox-group-checkbox/checkbox-group-checkbox.types.js';
 export type CheckboxGroupProps = {
     /**
      * The `CheckboxItem` components to render
      */
-    children: ReactNode[];
+    checkboxes: CheckboxGroupCheckboxProps[];
     /**
      * String to override base style
      */

package/dist/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.component.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const CheckboxGroupCheckbox: React.ForwardRefExoticComponent<{
     className?: string | undefined;
     hint?: React.ReactNode;
-} & Omit<import("react-aria").AriaCheckboxGroupItemProps, "isIndeterminate"> & React.RefAttributes<unknown>>;
+    label: React.ReactNode;
+} & Omit<import("react-aria").AriaCheckboxGroupItemProps, "children" | "isIndeterminate"> & React.RefAttributes<unknown>>;

package/dist/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.component.js

@@ -31,14 +31,14 @@ function CheckIcon({ copyrightYear ='2023' , size , ...props }) {
         fill: "currentColor"
     }));
 }
-function BaseCheckbox({ className , hint , children , value , ...props }, ref) {
+function BaseCheckbox({ className , hint , label , value , ...props }, ref) {
     const state = useContext(CheckboxGroupContext);
     const { size , orientation  } = state;
     const localRef = useRef(null);
     const { inputProps , isDisabled , isSelected  } = useCheckboxGroupItem({
         ...props,
         value,
-        children
+        children: label
     }, state, localRef);
     const { isFocusVisible , focusProps  } = useFocusRing();
     const styles = checkboxItemStyles({
@@ -64,7 +64,7 @@ function BaseCheckbox({ className , hint , children , value , ...props }, ref) {
         className: styles.textWrapper()
     }, React.createElement("span", {
         className: styles.labelText()
-    }, children), hint && React.createElement("span", {
+    }, label), hint && React.createElement("span", {
         className: styles.hintText()
     }, hint)));
 }

package/dist/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.types.d.ts

@@ -9,4 +9,8 @@ export type CheckboxGroupCheckboxProps = {
      * Renders hint under option, most likely a `string` but could be something else
      */
     hint?: ReactNode;
-} & Omit<AriaCheckboxGroupItemProps, 'isIndeterminate'>;
+    /**
+     * Label to render
+     */
+    label: ReactNode;
+} & Omit<AriaCheckboxGroupItemProps, 'isIndeterminate' | 'children'>;

package/dist/components/radio-group/components/radio-group-radio/radio-group-radio.component.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const RadioGroupRadio: React.ForwardRefExoticComponent<{
     className?: string | undefined;
     hint?: React.ReactNode;
-} & import("react-aria").AriaRadioProps & React.RefAttributes<unknown>>;
+    label: React.ReactNode;
+} & Omit<import("react-aria").AriaRadioProps, "children"> & React.RefAttributes<unknown>>;

package/dist/components/radio-group/components/radio-group-radio/radio-group-radio.component.js

@@ -17,13 +17,13 @@ import React, { forwardRef, useContext, useRef } from 'react';
 import { VisuallyHidden, useFocusRing, useRadio } from 'react-aria';
 import { RadioGroupContext } from '../../radio-group.component.js';
 import { styles as radioStyles } from './radio-group-radio.styles.js';
-function BaseRadioGroupRadio({ className , hint , children , ...props }, ref) {
+function BaseRadioGroupRadio({ className , hint , label , ...props }, ref) {
     const state = useContext(RadioGroupContext);
     const { size , orientation  } = state;
     const localRef = useRef(null);
     const { inputProps , isSelected , isDisabled  } = useRadio({
         ...props,
-        children
+        children: label
     }, state, localRef);
     const { isFocusVisible , focusProps  } = useFocusRing();
     const styles = radioStyles({
@@ -46,7 +46,7 @@ function BaseRadioGroupRadio({ className , hint , children , ...props }, ref) {
         className: styles.textWrapper()
     }, React.createElement("span", {
         className: styles.labelText()
-    }, children), hint && React.createElement("span", {
+    }, label), hint && React.createElement("span", {
         className: styles.hintText()
     }, hint)));
 }

package/dist/components/radio-group/components/radio-group-radio/radio-group-radio.types.d.ts

@@ -9,4 +9,8 @@ export type RadioGroupRadioProps = {
      * Renders hint under radio, most likely a `string` but could be something else
      */
     hint?: ReactNode;
-} & AriaRadioProps;
+    /**
+     * Label to render
+     */
+    label: ReactNode;
+} & Omit<AriaRadioProps, 'children'>;

package/dist/components/radio-group/radio-group.component.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type RadioGroupContextState, type RadioGroupProps } from './radio-group.types.js';
 export declare const RadioGroupContext: React.Context<RadioGroupContextState>;
-export declare function RadioGroup({ className, children, label, orientation, showAmount, size, errorMessage, hintMessage, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function RadioGroup({ className, radios, label, orientation, showAmount, size, errorMessage, hintMessage, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/radio-group/radio-group.component.js

@@ -13,12 +13,12 @@ function _extends() {
     };
     return _extends.apply(this, arguments);
 }
-import React, { cloneElement, createContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useFocusRing, useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
 import { Button } from '../button/index.js';
 import { ExpandMoreIcon } from '../icon/index.js';
-import { ErrorMessage, Hint, Label } from '../index.js';
+import { ErrorMessage, Hint, Label, RadioGroupRadio } from '../index.js';
 import { styles as radioGroupStyles } from './radio-group.styles.js';
 export const RadioGroupContext = createContext({
     name: '',
@@ -33,7 +33,7 @@ export const RadioGroupContext = createContext({
     orientation: 'vertical',
     size: 'medium'
 });
-export function RadioGroup({ className , children , label , orientation ='vertical' , showAmount =0 , size ='medium' , errorMessage , hintMessage , ...props }) {
+export function RadioGroup({ className , radios , label , orientation ='vertical' , showAmount =0 , size ='medium' , errorMessage , hintMessage , ...props }) {
     const state = useRadioGroupState({
         ...props,
         label,
@@ -47,21 +47,19 @@ export function RadioGroup({ className , children , label , orientation ='vertic
     const { isFocusVisible , focusProps  } = useFocusRing();
     const [hiddenOptions, setHiddenOptions] = useState(showAmount > 0);
     const firstNewRadioRef = useRef(null);
-    const revealAmount = children && children.length - showAmount;
+    const revealAmount = radios && radios.length - showAmount;
     const styles = radioGroupStyles({
         orientation,
         isFocusVisible
     });
     const childrenToRender = useMemo(()=>{
-        const newChildren = children.map((child, index)=>{
-            return cloneElement(child, {
+        const newChildren = radios.map((radio, index)=>React.createElement(RadioGroupRadio, _extends({
                 key: index,
                 ref: index === showAmount ? firstNewRadioRef : null
-            });
-        });
+            }, radio)));
         return hiddenOptions ? newChildren.slice(0, showAmount) : newChildren;
     }, [
-        children,
+        radios,
         hiddenOptions,
         showAmount
     ]);

package/dist/components/radio-group/radio-group.types.d.ts

@@ -1,12 +1,8 @@
-import { ReactNode } from 'react';
 import { type AriaRadioGroupProps } from 'react-aria';
 import { type RadioGroupState } from 'react-stately';
 import { HintProps } from '../index.js';
+import { RadioGroupRadioProps } from './components/radio-group-radio/radio-group-radio.types.js';
 export type RadioGroupProps = {
-    /**
-     * The `Radio` components to render
-     */
-    children: ReactNode[];
     /**
      * String to override base style
      */
@@ -19,6 +15,10 @@ export type RadioGroupProps = {
      * hint message
      */
     hintMessage?: HintProps['children'];
+    /**
+     * The `Radio` components to render
+     */
+    radios: RadioGroupRadioProps[];
     /**
      * Amount of Radios to display, remainder will be hidden behind reveal button
      */