@westpac/ui 0.4.0 → 0.6.0

package/dist/components/repeater/repeater.component.js

@@ -0,0 +1,144 @@
+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 { AnimatePresence, LazyMotion, m } from 'framer-motion';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useFocusRing } from 'react-aria';
+import { generateID } from '../../utils/index.js';
+import { Button } from '../button/index.js';
+import { AddCircleIcon, RemoveCircleIcon } from '../icon/index.js';
+import { VisuallyHidden } from '../index.js';
+import { styles as repeaterStyles } from './repeater.styles.js';
+const loadAnimations = ()=>import('./repeater.utils.js').then((res)=>res.default);
+export function Repeater({ addText ='Add another item' , indexTag: ItemIndex = 'h3' , children , separator =false , className  }) {
+    const [items, setItems] = useState([
+        {
+            id: generateID()
+        }
+    ]);
+    const [action, setAction] = useState({
+        type: '',
+        index: 0
+    });
+    const [status, setStatus] = useState('');
+    const refArr = useRef([]);
+    const { isFocused , focusProps  } = useFocusRing();
+    const handleAdd = useCallback(()=>{
+        setItems([
+            ...items,
+            {
+                id: generateID()
+            }
+        ]);
+        setAction({
+            type: 'add',
+            index: items.length
+        });
+    }, [
+        items
+    ]);
+    const handleRemove = useCallback((id, index)=>{
+        const newItems = items.filter((item)=>item.id !== id);
+        setItems(newItems);
+        setAction({
+            type: 'remove',
+            index,
+            id
+        });
+    }, [
+        items
+    ]);
+    useEffect(()=>{
+        if (action.type === 'add') {
+            var _refArr_current_;
+            (_refArr_current_ = refArr.current[items.length - 1]) === null || _refArr_current_ === void 0 ? void 0 : _refArr_current_.focus();
+            setStatus(`Item added`);
+        }
+        if (action.type === 'remove') {
+            var _refArr_current_focusIndex;
+            refArr.current.splice(action.index, 1);
+            const focusIndex = action.index === 0 ? 0 : action.index - 1;
+            (_refArr_current_focusIndex = refArr.current[focusIndex]) === null || _refArr_current_focusIndex === void 0 ? void 0 : _refArr_current_focusIndex.focus();
+            setStatus(`Item ${action.index + 1} removed`);
+        }
+    }, [
+        items.length,
+        action
+    ]);
+    const Tag = separator ? 'ol' : 'ul';
+    const styles = repeaterStyles({
+        separator,
+        isFocused
+    });
+    return React.createElement("div", {
+        className: styles.base({
+            className
+        })
+    }, React.createElement(Tag, {
+        className: styles.list()
+    }, React.createElement(LazyMotion, {
+        features: loadAnimations
+    }, React.createElement(AnimatePresence, null, items.map((item, index)=>{
+        return React.createElement(m.li, {
+            initial: {
+                opacity: 1
+            },
+            animate: {
+                opacity: 1
+            },
+            exit: {
+                opacity: 0
+            },
+            transition: {
+                duration: 0.15
+            },
+            key: index
+        }, React.createElement("div", _extends({
+            ref: (el)=>{
+                refArr.current[index] = el;
+            },
+            tabIndex: -1,
+            className: styles.item()
+        }, focusProps), separator && React.createElement(ItemIndex, {
+            className: styles.itemIndex()
+        }, index + 1, "."), React.createElement("div", {
+            className: styles.content()
+        }, children), items.length > 1 && React.createElement(Button, {
+            className: styles.removeBtn(),
+            "aria-label": `remove item ${index + 1}`,
+            iconBefore: (props)=>React.createElement(RemoveCircleIcon, _extends({}, props, {
+                    "aria-hidden": true,
+                    size: "xsmall"
+                })),
+            look: "link",
+            size: "small",
+            soft: true,
+            onClick: ()=>handleRemove(item.id, index)
+        }, "Remove")));
+    })))), React.createElement("div", {
+        className: styles.footer()
+    }, React.createElement(Button, {
+        className: styles.addBtn(),
+        iconBefore: (props)=>React.createElement(AddCircleIcon, _extends({}, props, {
+                "aria-hidden": true,
+                look: "outlined"
+            })),
+        look: "link",
+        size: "small",
+        soft: true,
+        onClick: ()=>handleAdd()
+    }, addText)), React.createElement(VisuallyHidden, {
+        role: "status"
+    }, status));
+}

package/dist/components/repeater/repeater.stories.d.ts

@@ -0,0 +1,13 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Repeater } from './repeater.component.js';
+declare const meta: Meta<typeof Repeater>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Example using the separator prop
+ */
+export declare const SeparatedRepeater: Story;

package/dist/components/repeater/repeater.stories.js

@@ -0,0 +1,34 @@
+import { Form, Input } from '../index.js';
+import { Repeater } from './repeater.component.js';
+const meta = {
+    title: 'Example/Repeater',
+    component: Repeater,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "p-5"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'fullscreen'
+    },
+    args: {
+        children: React.createElement(Form, null, React.createElement(Form.Group, null, React.createElement(Form.Label, {
+            htmlFor: `test`
+        }, "Primary"), React.createElement(Form.Hint, null, "Primary title text"), React.createElement(Input, {
+            name: `test`,
+            onChange: (e)=>console.log(e)
+        })))
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {}
+};
+export const SeparatedRepeater = {
+    args: {
+        separator: true
+    }
+};

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

@@ -0,0 +1,49 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    separator: {
+        true: {
+            item: string;
+            content: string;
+            removeBtn: string;
+            footer: string;
+        };
+    };
+    isFocused: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    base: string;
+    list: string;
+    item: string;
+    itemIndex: string;
+    content: string;
+    removeBtn: string;
+    footer: string;
+    addBtn: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    separator: {
+        true: {
+            item: string;
+            content: string;
+            removeBtn: string;
+            footer: string;
+        };
+    };
+    isFocused: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    base: string;
+    list: string;
+    item: string;
+    itemIndex: string;
+    content: string;
+    removeBtn: string;
+    footer: string;
+    addBtn: string;
+}>;

package/dist/components/repeater/repeater.styles.js

@@ -0,0 +1,36 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: '',
+        list: 'm-0 list-none pl-0',
+        item: 'relative',
+        itemIndex: 'mb-[1.125rem] font-bold',
+        content: '',
+        removeBtn: 'absolute right-0 top-0 h-auto p-0 no-underline hover:underline',
+        footer: 'flex justify-between',
+        addBtn: 'height-auto p-0 no-underline hover:underline'
+    },
+    variants: {
+        separator: {
+            true: {
+                item: 'border-neutral border-t-2 pt-[0.625rem]',
+                content: 'p-[0_1.125rem_2.625rem]',
+                removeBtn: 'relative m-[0_0_1.875rem_1.125rem]',
+                footer: 'border-neutral border-t-2 pt-[0.875rem]'
+            }
+        },
+        isFocused: {
+            true: {
+                item: 'outline-none'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from 'react';
+export type RepeaterProps = {
+    /**
+     * Text for add button
+     */
+    addText?: string;
+    /**
+     * Component to repeat
+     */
+    children: React.ReactNode;
+    /**
+     * Index heading tag to use for index on separator version
+     */
+    indexTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Enable separator version
+     */
+    separator?: boolean;
+} & HTMLAttributes<Element>;

package/dist/components/repeater/repeater.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/repeater/repeater.utils.d.ts

@@ -0,0 +1,2 @@
+import { domAnimation } from 'framer-motion';
+export default domAnimation;

package/dist/components/repeater/repeater.utils.js

@@ -0,0 +1,2 @@
+import { domAnimation } from 'framer-motion';
+export default domAnimation;

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

@@ -10,7 +10,12 @@ export declare const Select: React.ForwardRefExoticComponent<import("tailwind-va
         true: string;
         false: string;
     };
-}, undefined, "form-control bg-no-repeat select-caret disabled:form-control-disabled focus:focus-outline group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none", {
+    isFocused: {
+        true: {
+            base: string;
+        };
+    };
+}, undefined, "form-control select-caret disabled:form-control-disabled bg-no-repeat group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none", {
     responsiveVariants: string[];
 }, {
     size: {
@@ -23,4 +28,9 @@ export declare const Select: React.ForwardRefExoticComponent<import("tailwind-va
         true: string;
         false: string;
     };
+    isFocused: {
+        true: {
+            base: string;
+        };
+    };
 }, undefined>> & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> & React.RefAttributes<HTMLSelectElement>>;

package/dist/components/select/select.component.js

@@ -13,15 +13,18 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { forwardRef } from 'react';
+import { mergeProps, useFocusRing } from 'react-aria';
 import { styles } from './select.styles.js';
 function BaseSelect({ className , size ='medium' , invalid =false , children , ...props }, ref) {
+    const { isFocused , focusProps  } = useFocusRing();
     return React.createElement("select", _extends({
         ref: ref,
         className: styles({
             className,
             size,
-            invalid
+            invalid,
+            isFocused
         })
-    }, props), children);
+    }, mergeProps(props, focusProps)), children);
 }
 export const Select = forwardRef(BaseSelect);

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

@@ -9,7 +9,12 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "form-control bg-no-repeat select-caret disabled:form-control-disabled focus:focus-outline group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none", {
+    isFocused: {
+        true: {
+            base: string;
+        };
+    };
+}, undefined, "form-control select-caret disabled:form-control-disabled bg-no-repeat group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none", {
     responsiveVariants: string[];
 }, {
     size: {
@@ -22,4 +27,9 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    isFocused: {
+        true: {
+            base: string;
+        };
+    };
 }, undefined>;

package/dist/components/select/select.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'form-control bg-no-repeat select-caret disabled:form-control-disabled focus:focus-outline group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
+    base: 'form-control select-caret disabled:form-control-disabled bg-no-repeat group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
     variants: {
         size: {
             small: 'form-control-small bg-[right_0.5625rem_center] pr-[calc(0.5rem+14px+0.5625rem)]',
@@ -11,6 +11,11 @@ export const styles = tv({
         invalid: {
             true: 'border-danger',
             false: 'border-borderDark'
+        },
+        isFocused: {
+            true: {
+                base: 'focus-outline'
+            }
         }
     }
 }, {

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

@@ -0,0 +1,2 @@
+export * from './selector-checkbox-group/index.js';
+export * from './selector-radio-group/index.js';

package/dist/components/selector/components/index.js

@@ -0,0 +1,2 @@
+export * from './selector-checkbox-group/index.js';
+export * from './selector-radio-group/index.js';

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

@@ -0,0 +1 @@
+export * from './selector-checkbox-group-option/index.js';

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

@@ -0,0 +1 @@
+export * from './selector-checkbox-group-option/index.js';

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

@@ -0,0 +1,2 @@
+export { SelectorCheckboxGroupOption } from './selector-checkbox-group-option.component.js';
+export { type SelectorCheckboxGroupOptionProps } from './selector-checkbox-group-option.types.js';

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

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FlexiCell } from '../../../../../../components/index.js';
+import { type SelectorCheckboxGroupOptionProps } from './selector-checkbox-group-option.types.js';
+export declare const SelectorCheckboxGroupOption: React.ForwardRefExoticComponent<SelectorCheckboxGroupOptionProps & React.RefAttributes<unknown>> & {
+    Adornment: typeof FlexiCell.Adornment;
+    Body: typeof FlexiCell.Body;
+    Button: typeof FlexiCell.Button;
+    Circle: typeof FlexiCell.Circle;
+    Footer: typeof FlexiCell.Footer;
+    Hint: typeof FlexiCell.Hint;
+    Label: typeof FlexiCell.Label;
+};

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

@@ -0,0 +1,67 @@
+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, mergeProps, useCheckboxGroupItem, useFocusRing } from 'react-aria';
+import { FlexiCellAdornment, FlexiCellBody, FlexiCellButton, FlexiCellCircle, FlexiCellFooter, FlexiCellHint, FlexiCellLabel } from '../../../../../../components/flexi-cell/index.js';
+import { ArrowRightIcon, TickIcon } from '../../../../../../components/icon/index.js';
+import { FlexiCell } from '../../../../../../components/index.js';
+import { SelectorCheckboxGroupContext } from '../../selector-checkbox-group.component.js';
+import { styles as selectorCheckboxGroupOptionStyles } from './selector-checkbox-group-option.styles.js';
+function BaseSelectorCheckboxGroupOption({ className , children , value , withBorder =true , withArrow , after , badge , badgeZIndex , before , body =true , checkIcon ='checkbox' , ...props }, ref) {
+    const state = useContext(SelectorCheckboxGroupContext);
+    const localRef = useRef(null);
+    const { inputProps , isDisabled , isSelected  } = useCheckboxGroupItem({
+        ...props,
+        value,
+        children
+    }, state, localRef);
+    const { isFocused , focusProps  } = useFocusRing();
+    const styles = selectorCheckboxGroupOptionStyles({
+        className,
+        isSelected,
+        isFocused,
+        isDisabled,
+        checkIcon
+    });
+    const FinalIcon = checkIcon === 'checkbox' ? TickIcon : ArrowRightIcon;
+    return React.createElement(FlexiCell, {
+        after: React.createElement("div", {
+            className: "flex gap-2"
+        }, after, React.createElement(FinalIcon, {
+            "aria-hidden": "true",
+            className: styles.icon({})
+        })),
+        badge: badge,
+        badgeZIndex: badgeZIndex,
+        before: before,
+        body: body,
+        withBorder: withBorder,
+        withArrow: withArrow,
+        tag: "label",
+        ref: ref,
+        withHoverEffect: true,
+        className: styles.base({})
+    }, React.createElement(VisuallyHidden, null, React.createElement("input", _extends({}, mergeProps(inputProps, focusProps), {
+        ref: localRef
+    }))), children);
+}
+export const SelectorCheckboxGroupOption = forwardRef(BaseSelectorCheckboxGroupOption);
+SelectorCheckboxGroupOption.Body = FlexiCellBody;
+SelectorCheckboxGroupOption.Footer = FlexiCellFooter;
+SelectorCheckboxGroupOption.Adornment = FlexiCellAdornment;
+SelectorCheckboxGroupOption.Hint = FlexiCellHint;
+SelectorCheckboxGroupOption.Label = FlexiCellLabel;
+SelectorCheckboxGroupOption.Button = FlexiCellButton;
+SelectorCheckboxGroupOption.Circle = FlexiCellCircle;

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

@@ -0,0 +1,59 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    checkIcon: {
+        arrow: {
+            icon: string;
+        };
+        checkbox: {};
+    };
+    isSelected: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isFocused: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    icon: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    checkIcon: {
+        arrow: {
+            icon: string;
+        };
+        checkbox: {};
+    };
+    isSelected: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isFocused: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    icon: string;
+}>;

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

@@ -0,0 +1,57 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'group/checkbox-option cursor-pointer',
+        icon: 'transition-transform'
+    },
+    variants: {
+        checkIcon: {
+            arrow: {
+                icon: 'text-primary group-hover/checkbox-option:translate-x-1'
+            },
+            checkbox: {}
+        },
+        isSelected: {
+            true: {
+                base: 'border-hero shadow-[0_0_0_2px_inset]'
+            },
+            false: {}
+        },
+        isFocused: {
+            true: {
+                base: 'focus-outline'
+            },
+            false: {}
+        },
+        isDisabled: {
+            true: {
+                base: 'opacity-50'
+            },
+            false: {}
+        }
+    },
+    compoundVariants: [
+        {
+            checkIcon: 'checkbox',
+            isSelected: false,
+            className: {
+                icon: 'opacity-0'
+            }
+        },
+        {
+            checkIcon: 'checkbox',
+            isSelected: true,
+            className: {
+                icon: 'opacity-100'
+            }
+        }
+    ]
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,10 @@
+import { type AriaCheckboxGroupItemProps } from 'react-aria';
+import { type VariantProps } from 'tailwind-variants';
+import { FlexiCellProps } from '../../../../../index.js';
+import { styles } from './selector-checkbox-group-option.styles.js';
+export type SelectorCheckboxGroupOptionProps = {
+    /**
+     * Check icon to render
+     */
+    checkIcon?: 'checkbox' | 'arrow';
+} & FlexiCellProps & VariantProps<typeof styles> & Omit<AriaCheckboxGroupItemProps, 'isIndeterminate'>;

package/dist/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/selector-checkbox-group-option.types.js

@@ -0,0 +1 @@
+export { };

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

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

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

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

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { type SelectorCheckboxGroupProps } from './selector-checkbox-group.types.js';
+export declare const SelectorCheckboxGroupContext: React.Context<import("react-stately").CheckboxGroupState>;
+export declare function SelectorCheckboxGroup(props: SelectorCheckboxGroupProps): JSX.Element;
+export declare namespace SelectorCheckboxGroup {
+    var Option: React.ForwardRefExoticComponent<import("./components/index.js").SelectorCheckboxGroupOptionProps & React.RefAttributes<unknown>> & {
+        Adornment: ({ children, tag: Tag, align, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellAdornmentProps) => JSX.Element;
+        Body: ({ children, tag: Tag, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellBodyProps) => JSX.Element;
+        Button: ({ className, ...props }: import("../../../index.js").ButtonProps) => JSX.Element;
+        Circle: ({ className, ...props }: import("../../../index.js").CircleProps) => JSX.Element;
+        Footer: ({ children, className, tag: Tag, ...props }: import("../../../flexi-cell/index.js").FlexiCellFooterProps) => JSX.Element;
+        Hint: ({ children, tag: Tag, className, truncateText, ...props }: import("../../../flexi-cell/index.js").FlexiCellHintProps) => JSX.Element;
+        Label: ({ children, tag: Tag, truncateText, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellLabelProps) => JSX.Element;
+    };
+}