@westpac/ui 0.13.0 → 0.14.0

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

@@ -0,0 +1,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>>;

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

@@ -0,0 +1,71 @@
+'use client';
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React, { forwardRef, useContext, useRef } from 'react';
+import { VisuallyHidden, useCheckboxGroupItem, useFocusRing } from 'react-aria';
+import { Icon } from '../../../icon/icon.component.js';
+import { CheckboxGroupContext } from '../../checkbox-group.component.js';
+import { styles as checkboxItemStyles } from './checkbox-group-checkbox.styles.js';
+function CheckIcon({ copyrightYear ='2023' , size , ...props }) {
+    const viewBoxSize = size === 'large' ? '0 0 30 30' : '0 0 24 24';
+    return React.createElement(Icon, _extends({
+        copyrightYear: copyrightYear,
+        viewBox: viewBoxSize
+    }, props), size === 'large' ? React.createElement("path", {
+        d: "M12.9952 17.5891L20.2923 10.292L21.7023 11.712L12.9952 20.4191L8.28809 15.712L9.69809 14.302L12.9952 17.5891Z",
+        fill: "currentColor"
+    }) : React.createElement("path", {
+        d: "M9.99519 14.5891L17.2923 7.29199L18.7023 8.71199L9.99519 17.4191L5.28809 12.712L6.69809 11.302L9.99519 14.5891Z",
+        fill: "currentColor"
+    }));
+}
+function BaseCheckbox({ className , hint , children , value , ...props }, ref) {
+    const state = useContext(CheckboxGroupContext);
+    const { size , orientation  } = state;
+    const localRef = useRef(null);
+    const { inputProps , isDisabled , isSelected  } = useCheckboxGroupItem({
+        ...props,
+        value,
+        children
+    }, state, localRef);
+    const { isFocusVisible , focusProps  } = useFocusRing();
+    const styles = checkboxItemStyles({
+        isDisabled,
+        size,
+        orientation,
+        isFocusVisible
+    });
+    return React.createElement("label", {
+        className: styles.base({
+            className
+        }),
+        ref: ref
+    }, React.createElement(VisuallyHidden, null, React.createElement("input", _extends({}, inputProps, focusProps, {
+        ref: localRef
+    }))), React.createElement("div", {
+        className: styles.checkbox()
+    }, isSelected && React.createElement(CheckIcon, {
+        className: styles.checkIcon(),
+        size: size,
+        color: isDisabled ? 'border' : 'hero'
+    })), React.createElement("div", {
+        className: styles.textWrapper()
+    }, React.createElement("span", {
+        className: styles.labelText()
+    }, children), hint && React.createElement("span", {
+        className: styles.hintText()
+    }, hint)));
+}
+export const CheckboxGroupCheckbox = forwardRef(BaseCheckbox);

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

@@ -0,0 +1,87 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    isDisabled: {
+        true: {
+            labelText: string;
+            checkbox: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            checkbox: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+    size: {
+        large: {
+            checkIcon: string;
+            base: string;
+            checkbox: string;
+        };
+        medium: {
+            checkIcon: string;
+            base: string;
+            checkbox: string;
+        };
+    };
+}, {
+    base: string;
+    checkIcon: string;
+    textWrapper: string;
+    labelText: string;
+    hintText: string;
+    checkbox: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    isDisabled: {
+        true: {
+            labelText: string;
+            checkbox: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            checkbox: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+    size: {
+        large: {
+            checkIcon: string;
+            base: string;
+            checkbox: string;
+        };
+        medium: {
+            checkIcon: string;
+            base: string;
+            checkbox: string;
+        };
+    };
+}, {
+    base: string;
+    checkIcon: string;
+    textWrapper: string;
+    labelText: string;
+    hintText: string;
+    checkbox: string;
+}>;

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

@@ -0,0 +1,55 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'flex',
+        checkIcon: 'overflow-visible',
+        textWrapper: 'flex flex-col justify-center',
+        labelText: 'typography-body-10 py-[2px] pl-1',
+        hintText: 'typography-body-10 pl-1 text-muted',
+        checkbox: 'flex shrink-0 items-center justify-center rounded border border-hero'
+    },
+    variants: {
+        isDisabled: {
+            true: {
+                labelText: 'text-muted',
+                checkbox: 'border-border bg-border-20'
+            },
+            false: {
+                base: 'hover:cursor-pointer'
+            }
+        },
+        isFocusVisible: {
+            true: {
+                checkbox: 'focus-outline'
+            }
+        },
+        orientation: {
+            horizontal: {
+                base: 'mr-3'
+            },
+            vertical: {
+                base: ''
+            }
+        },
+        size: {
+            large: {
+                checkIcon: 'h-5 w-5',
+                base: 'mb-2',
+                checkbox: 'h-5 w-5'
+            },
+            medium: {
+                checkIcon: 'h-4 w-4',
+                base: 'mb-1',
+                checkbox: 'h-4 w-4'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { AriaCheckboxGroupItemProps } from 'react-aria';
+export type CheckboxGroupCheckboxProps = {
+    /**
+     * `string` for overriding base style
+     */
+    className?: string;
+    /**
+     * Renders hint under option, most likely a `string` but could be something else
+     */
+    hint?: ReactNode;
+} & Omit<AriaCheckboxGroupItemProps, 'isIndeterminate'>;

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

@@ -0,0 +1,2 @@
+export { CheckboxGroupCheckbox } from './checkbox-group-checkbox.component.js';
+export { type CheckboxGroupCheckboxProps } from './checkbox-group-checkbox.types.js';

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

@@ -0,0 +1 @@
+export { CheckboxGroupCheckbox } from './checkbox-group-checkbox.component.js';

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

@@ -1,2 +1,3 @@
+export { CheckboxGroupCheckbox } from './components/checkbox-group-checkbox/index.js';
 export { CheckboxGroup } from './checkbox-group.component.js';
 export { type CheckboxGroupProps } from './checkbox-group.types.js';

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

@@ -1 +1,2 @@
+export { CheckboxGroupCheckbox } from './components/checkbox-group-checkbox/index.js';
 export { CheckboxGroup } from './checkbox-group.component.js';

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

@@ -1,6 +1,10 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { ButtonProps } from '../button/index.js';
 export type CollapsibleProps = {
+    /**
+     * Collapsible hidden content
+     */
+    children?: ReactNode;
     /**
      * A function for the onClick event
      */

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

@@ -10,6 +10,7 @@ export type CompactaProps = {
     children: (...props: ContentProps[]) => ReactNode;
     /**
      * Tag for primary title
+     * @default h3
      */
     titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 } & Omit<HTMLAttributes<Element>, 'children'>;

package/dist/components/date-picker/date-picker.component.d.ts

@@ -1,2 +1,2 @@
 import { type DatePickerProps } from './date-picker.types.js';
-export declare function DatePicker({ disableWeekends, disableDaysOfWeek, disableDates, placeholder, onChange, onFocus, onBlur, onOpen, onClose, min, max, value, id, size, name, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePicker({ disableWeekends, disableDaysOfWeek, disableDates, placeholder, onChange, onFocus, onBlur, onOpen, onClose, min, max, value, id, size, name, block, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/date-picker/date-picker.component.js

@@ -16,7 +16,7 @@ function _extends() {
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { styles } from './date-picker.styles.js';
 import { formatDate, isDateDisabled, useListener } from './date-picker.utils.js';
-export function DatePicker({ disableWeekends , disableDaysOfWeek , disableDates , placeholder , onChange , onFocus , onBlur , onOpen , onClose , min , max , value , id , size ='xl' , name , ...props }) {
+export function DatePicker({ disableWeekends , disableDaysOfWeek , disableDates , placeholder , onChange , onFocus , onBlur , onOpen , onClose , min , max , value , id , size ='md' , name , block =false , ...props }) {
     const [initialized, setInitialized] = useState(false);
     useEffect(()=>{
         const initDatePicker = async ()=>{
@@ -133,7 +133,8 @@ export function DatePicker({ disableWeekends , disableDaysOfWeek , disableDates
     ]);
     return React.createElement("duet-date-picker", _extends({
         class: styles({
-            size
+            size,
+            block
         }),
         ref: ref
     }, props));

package/dist/components/date-picker/date-picker.styles.d.ts

@@ -5,6 +5,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         lg: string;
         xl: string;
     };
+    block: {
+        true: string;
+        false: string;
+    };
 }, undefined, "date-picker", {
     responsiveVariants: string[];
 }, {
@@ -14,4 +18,8 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         lg: string;
         xl: string;
     };
+    block: {
+        true: string;
+        false: string;
+    };
 }, undefined>;

package/dist/components/date-picker/date-picker.styles.js

@@ -7,6 +7,10 @@ export const styles = tv({
             md: 'date-picker-md',
             lg: 'date-picker-lg',
             xl: 'date-picker-xl'
+        },
+        block: {
+            true: 'date-picker-block',
+            false: ''
         }
     }
 }, {

package/dist/components/date-picker/date-picker.types.d.ts

@@ -13,6 +13,10 @@ export type DuetDatePickerElement = Element & {
 };
 type Variants = VariantProps<typeof styles>;
 export type DatePickerProps = {
+    /**
+     * Make Datepicker block
+     */
+    block?: Variants['block'];
     disableDates?: string[];
     disableDaysOfWeek?: number[];
     disableWeekends?: boolean;

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

@@ -1,2 +1,2 @@
 import { type FieldProps } from './field.types.js';
-export declare function Field({ className, label, tag: Tag, children, hintMessage, errorMessage, labelElementType, ...props }: FieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function Field({ className, label, tag: Tag, children, hintMessage, errorMessage, labelElementType, labelSize, ...props }: FieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/field/field.component.js

@@ -15,9 +15,9 @@ function _extends() {
 }
 import React, { Children, cloneElement, isValidElement, useCallback } from 'react';
 import { useField } from 'react-aria';
-import { ErrorMessage, FormHint, FormLabel } from '../index.js';
+import { ErrorMessage, Hint, Label } from '../index.js';
 import { styles } from './field.styles.js';
-export function Field({ className , label , tag: Tag = 'div' , children , hintMessage , errorMessage , labelElementType , ...props }) {
+export function Field({ className , label , tag: Tag = 'div' , children , hintMessage , errorMessage , labelElementType , labelSize , ...props }) {
     const { labelProps , fieldProps , descriptionProps , errorMessageProps  } = useField({
         ...props,
         description: hintMessage,
@@ -38,7 +38,9 @@ export function Field({ className , label , tag: Tag = 'div' , children , hintMe
         className: styles({
             className
         })
-    }, props), React.createElement(FormLabel, _extends({}, labelProps), label), hintMessage && React.createElement(FormHint, _extends({}, descriptionProps), hintMessage), errorMessage && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+    }, props), React.createElement(Label, _extends({
+        size: labelSize
+    }, labelProps), label), hintMessage && React.createElement(Hint, _extends({}, descriptionProps), hintMessage), errorMessage && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
         message: errorMessage
     })), renderChildren());
 }

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { AriaFieldProps } from 'react-aria';
-import { FormHintProps } from '../index.js';
+import { HintProps, LabelProps } from '../index.js';
 export type FieldProps = {
     /**
      * error message
@@ -9,7 +9,11 @@ export type FieldProps = {
     /**
      * hint message
      */
-    hintMessage?: FormHintProps['children'];
+    hintMessage?: HintProps['children'];
+    /**
+     * label size
+     */
+    labelSize?: LabelProps['size'];
     /**
      * Tag to render
      */

package/dist/components/filter/components/filter-buttons/filter-buttons.component.d.ts

@@ -0,0 +1,2 @@
+import { type FilterButtonsProps } from './filter-buttons.types.js';
+export declare function FilterButtons({ filterButtons, onClick, selectedButton, resultsFound, tag: Tag, className, ...props }: FilterButtonsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/filter/components/filter-buttons/filter-buttons.component.js

@@ -0,0 +1,34 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { Button } from '../../../index.js';
+import { generateAriaDescription } from '../../filter.util.js';
+import { styles } from './filter-buttons.styles.js';
+export function FilterButtons({ filterButtons , onClick , selectedButton , resultsFound , tag: Tag = 'div' , className , ...props }) {
+    return React.createElement(Tag, _extends({
+        className: styles({
+            className
+        })
+    }, props), filterButtons.map((button)=>React.createElement(Button, {
+            "aria-pressed": button.id === selectedButton,
+            "aria-description": generateAriaDescription(button.id, selectedButton, filterButtons.length, resultsFound),
+            "aria-label": button.text,
+            look: "hero",
+            size: "small",
+            onClick: ()=>onClick(button.id),
+            key: button.id,
+            soft: button.id !== selectedButton
+        }, button.text)));
+}

package/dist/components/filter/components/filter-buttons/filter-buttons.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const styles: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "flex w-full gap-1 overflow-auto whitespace-nowrap"> | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "flex w-full gap-1 overflow-auto whitespace-nowrap">;
+    } | undefined;
+} | {}, undefined, "flex w-full gap-1 overflow-auto whitespace-nowrap", TVConfig<V, EV>, import("tailwind-variants").TVVariantsDefault<undefined, "flex w-full gap-1 overflow-auto whitespace-nowrap"> | {}, undefined>;

package/dist/components/filter/components/filter-buttons/filter-buttons.styles.js

@@ -0,0 +1,4 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'flex w-full gap-1 overflow-auto whitespace-nowrap'
+});

package/dist/components/filter/components/filter-buttons/filter-buttons.types.d.ts

@@ -0,0 +1,35 @@
+import { HTMLAttributes } from 'react';
+export type FilterButtonProps = {
+    /**
+     * id for the button used for the key and knowing which button is selected
+     */
+    id: string;
+    /**
+     * The text that displays on the button and used in aria-label
+     */
+    text: string;
+};
+export type FilterButtonsProps = {
+    /**
+     * An array of FilterButtonProps that generate buttons for the filter
+     * - id: used to identify selected button and for key `string`
+     * - text: text on the button `string`
+     */
+    filterButtons: FilterButtonProps[];
+    /**
+     * Function that is called when a button on the filter is clicked
+     */
+    onClick: (id: string) => unknown;
+    /**
+     * Needed for custom `aria-description`, number of results filter returns
+     */
+    resultsFound: number;
+    /**
+     * id of which button should be selected
+     */
+    selectedButton: string;
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & Omit<HTMLAttributes<Element>, 'onClick'>;

package/dist/components/filter/components/filter-buttons/index.d.ts

@@ -0,0 +1,2 @@
+export { FilterButtons } from './filter-buttons.component.js';
+export { type FilterButtonsProps } from './filter-buttons.types.js';

package/dist/components/filter/components/filter-buttons/index.js

@@ -0,0 +1 @@
+export { FilterButtons } from './filter-buttons.component.js';

package/dist/components/filter/components/filter-input/filter-input.component.d.ts

@@ -0,0 +1,2 @@
+import { type InputProps } from '../../../index.js';
+export declare function FilterInput({ onChange, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/filter/components/filter-input/filter-input.component.js

@@ -0,0 +1,28 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { SearchIcon } from '../../../icon/index.js';
+import { Input as GELInput, InputGroup } from '../../../index.js';
+export function FilterInput({ onChange , ...props }) {
+    return React.createElement(InputGroup, {
+        className: "mb-0",
+        before: {
+            icon: SearchIcon
+        }
+    }, React.createElement(GELInput, _extends({}, props, {
+        placeholder: "Search",
+        onChange: onChange
+    })));
+}

package/dist/components/filter/components/filter-input/index.d.ts

@@ -0,0 +1 @@
+export { FilterInput } from './filter-input.component.js';

package/dist/components/filter/components/filter-input/index.js

@@ -0,0 +1 @@
+export { FilterInput } from './filter-input.component.js';

package/dist/components/filter/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './filter-buttons/index.js';
+export * from './filter-input/index.js';

package/dist/components/filter/components/index.js

@@ -0,0 +1,2 @@
+export * from './filter-buttons/index.js';
+export * from './filter-input/index.js';

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

@@ -0,0 +1,2 @@
+import { type FilterProps } from './filter.types.js';
+export declare function Filter({ children, ...props }: FilterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/filter/filter.component.js

@@ -0,0 +1,20 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+export function Filter({ children , ...props }) {
+    return React.createElement("div", _extends({}, props, {
+        className: "flex flex-col gap-3"
+    }), children);
+}

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

@@ -0,0 +1,7 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type FilterProps = {
+    /**
+     * Should contain `FilterInput` and `Filter.Buttons` components
+     */
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement>;

package/dist/components/filter/filter.util.d.ts

@@ -0,0 +1 @@
+export declare const generateAriaDescription: (id: string, selected: string, length: number, results: number) => string;

package/dist/components/filter/filter.util.js

@@ -0,0 +1,4 @@
+export const generateAriaDescription = (id, selected, length, results)=>{
+    if (id === selected) return `${id} of ${length} filters. ${results} results found.`;
+    return `${id} of ${length} filters. Double tap to activate. ${results} results found.`;
+};

package/dist/components/filter/index.d.ts

@@ -0,0 +1,3 @@
+export { FilterButtons, FilterInput } from './components/index.js';
+export * from './filter.component.js';
+export * from './filter.types.js';

package/dist/components/filter/index.js

@@ -0,0 +1,3 @@
+export { FilterButtons, FilterInput } from './components/index.js';
+export * from './filter.component.js';
+export * from './filter.types.js';

package/dist/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.component.d.ts

@@ -1,6 +1,3 @@
 import { type FlexiCellAdornmentProps } from './flexi-cell-adornment.types.js';
 /** Flexi Cell Adornment: Flexi Cell Adornment */
-export declare const FlexiCellAdornment: {
-    ({ children, tag: Tag, align, className, ...props }: FlexiCellAdornmentProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const FlexiCellAdornment: ({ children, tag: Tag, align, className, ...props }: FlexiCellAdornmentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.component.js

@@ -13,13 +13,14 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React from 'react';
-import { styles } from './flexi-cell-adornment.styles.js';
-export const FlexiCellAdornment = ({ children , tag: Tag = 'div' , align ='center' , className , ...props })=>{
+import { styles as adornmentStyles } from './flexi-cell-adornment.styles.js';
+export const FlexiCellAdornment = ({ children , tag: Tag = 'div' , align , className , ...props })=>{
+    const styles = adornmentStyles({
+        align
+    });
     return React.createElement(Tag, _extends({}, props, {
-        className: styles({
-            align,
+        className: styles.base({
             className
         })
     }), children);
 };
-FlexiCellAdornment.displayName = 'FlexiCell.Adornment';