@westpac/ui 0.4.0 → 0.6.0

package/dist/components/index.d.ts

@@ -23,7 +23,7 @@ export * from './panel/index.js';
 export * from './collapsible/index.js';
 export * from './list/index.js';
 export * from './circle/index.js';
-export * from './flexi-cell/index.js';
+export { FlexiCell, type FlexiCellProps } from './flexi-cell/index.js';
 export * from './autocomplete/index.js';
 export * from './button-dropdown/index.js';
 export * from './form/index.js';
@@ -32,4 +32,6 @@ export * from './modal/index.js';
 export * from './pagination/index.js';
 export * from './popover/index.js';
 export * from './progress-rope/index.js';
+export * from './selector/index.js';
 export * from './compacta/index.js';
+export * from './repeater/index.js';

package/dist/components/index.js

@@ -23,7 +23,7 @@ export * from './panel/index.js';
 export * from './collapsible/index.js';
 export * from './list/index.js';
 export * from './circle/index.js';
-export * from './flexi-cell/index.js';
+export { FlexiCell } from './flexi-cell/index.js';
 export * from './autocomplete/index.js';
 export * from './button-dropdown/index.js';
 export * from './form/index.js';
@@ -32,4 +32,6 @@ export * from './modal/index.js';
 export * from './pagination/index.js';
 export * from './popover/index.js';
 export * from './progress-rope/index.js';
+export * from './selector/index.js';
 export * from './compacta/index.js';
+export * from './repeater/index.js';

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

@@ -14,7 +14,10 @@ export declare const Input: React.ForwardRefExoticComponent<{
         true: string;
         false: string;
     };
-}, undefined, "form-control flex-1 read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline group-[.input-field-after]:rounded-r-none group-[.input-field-before]:rounded-l-none group-[.input-field-after]:border-r-0 group-[.input-field-before]:border-l-0", {
+    isFocused: {
+        true: string;
+    };
+}, undefined, "form-control read-only:form-control-disabled disabled:form-control-disabled flex-1 group-[.input-field-after]:rounded-r-none group-[.input-field-before]:rounded-l-none group-[.input-field-after]:border-r-0 group-[.input-field-before]:border-l-0", {
     responsiveVariants: string[];
 }, {
     size: {
@@ -27,4 +30,7 @@ export declare const Input: React.ForwardRefExoticComponent<{
         true: string;
         false: string;
     };
+    isFocused: {
+        true: string;
+    };
 }, undefined>>, "invalid"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;

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

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

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

@@ -9,7 +9,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "form-control flex-1 read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline group-[.input-field-after]:rounded-r-none group-[.input-field-before]:rounded-l-none group-[.input-field-after]:border-r-0 group-[.input-field-before]:border-l-0", {
+    isFocused: {
+        true: string;
+    };
+}, undefined, "form-control read-only:form-control-disabled disabled:form-control-disabled flex-1 group-[.input-field-after]:rounded-r-none group-[.input-field-before]:rounded-l-none group-[.input-field-after]:border-r-0 group-[.input-field-before]:border-l-0", {
     responsiveVariants: string[];
 }, {
     size: {
@@ -22,4 +25,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    isFocused: {
+        true: string;
+    };
 }, undefined>;

package/dist/components/input/input.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'form-control flex-1 read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline group-[.input-field-after]:rounded-r-none group-[.input-field-before]:rounded-l-none group-[.input-field-after]:border-r-0 group-[.input-field-before]:border-l-0',
+    base: 'form-control read-only:form-control-disabled disabled:form-control-disabled flex-1 group-[.input-field-after]:rounded-r-none group-[.input-field-before]:rounded-l-none group-[.input-field-after]:border-r-0 group-[.input-field-before]:border-l-0',
     variants: {
         size: {
             small: 'form-control-small group-[.input-field-inset-after]:pr-6 group-[.input-field-inset-before]:pl-6',
@@ -11,6 +11,9 @@ export const styles = tv({
         invalid: {
             true: 'border-danger',
             false: 'border-borderDark'
+        },
+        isFocused: {
+            true: 'focus-outline'
         }
     }
 }, {

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

@@ -6,7 +6,7 @@ export declare const Link: React.ForwardRefExoticComponent<{
     className?: string | undefined;
     iconAfter?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
     iconBefore?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
-    iconSize?: "small" | "xsmall" | "medium" | "large" | "xlarge" | undefined;
+    iconSize?: "small" | "medium" | "large" | "xlarge" | "xsmall" | undefined;
     type?: "inline" | "standalone" | undefined;
     underline?: boolean | undefined;
 } & Omit<import("react-aria").AriaLinkOptions, "isDisabled" | "elementType"> & React.AnchorHTMLAttributes<Element> & React.RefAttributes<unknown>>;

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

@@ -13,7 +13,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { forwardRef, useRef } from 'react';
-import { useLink } from 'react-aria';
+import { mergeProps, useFocusRing, useLink } 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 }, propRef) {
@@ -21,14 +21,16 @@ export function BaseLink({ className , children , href , iconBefore: IconBefore
     const { linkProps  } = useLink({
         ...props
     }, ref);
+    const { isFocusVisible , focusProps  } = useFocusRing();
     const styles = linkStyles({
         type,
-        underline
+        underline,
+        isFocusVisible
     });
     if (type === 'standalone' && !IconBefore && !IconAfter) {
         IconBefore = ArrowRightIcon;
     }
-    return React.createElement("a", _extends({}, linkProps, {
+    return React.createElement("a", _extends({}, mergeProps(linkProps, focusProps), {
         ref: propRef,
         href: href,
         target: target,

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

@@ -12,6 +12,14 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     underline: {
         true: string;
     };
+    isFocusVisible: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     text: string;
@@ -33,6 +41,14 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     underline: {
         true: string;
     };
+    isFocusVisible: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     text: string;

package/dist/components/link/link.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'inline-flex bg-[transparent] hover:underline focus:focus-outline',
+        base: 'inline-flex bg-[transparent] hover:underline',
         text: 'typography-body-10',
         iconBefore: 'mr-1',
         iconAfter: 'ml-1'
@@ -9,16 +9,24 @@ export const styles = tv({
     variants: {
         type: {
             inline: {
-                base: 'items-baseline text-link',
+                base: 'text-link items-baseline',
                 iconBefore: 'self-center',
                 iconAfter: 'self-center'
             },
             standalone: {
-                base: 'items-center text-text'
+                base: 'text-text items-center'
             }
         },
         underline: {
             true: ''
+        },
+        isFocusVisible: {
+            true: {
+                base: 'focus-outline'
+            },
+            false: {
+                base: 'outline-none'
+            }
         }
     },
     compoundSlots: [

package/dist/components/list/components/item/item.component.d.ts

@@ -4,7 +4,7 @@ export declare function BaseItem({ className, children, href, look, type, spacin
 export declare const Item: React.ForwardRefExoticComponent<{
     href?: string | undefined;
     icon?: ((props: import("../../../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
-    look?: "link" | "success" | "danger" | "hero" | "neutral" | "primary" | undefined;
+    look?: "link" | "primary" | "hero" | "success" | "danger" | "neutral" | undefined;
     nested?: number | undefined;
     spacing?: "medium" | "large" | undefined;
     type?: "link" | "icon" | "bullet" | "tick" | "cross" | "unstyled" | "ordered" | undefined;

package/dist/components/list/components/item/item.component.js

@@ -13,6 +13,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { forwardRef, useContext } from 'react';
+import { useFocusRing } from 'react-aria';
 import { ListContext } from '../../list.component.js';
 import { getStateValues } from '../../list.utils.js';
 import { styles as itemStyles } from './item.styles.js';
@@ -28,12 +29,14 @@ export function BaseItem({ className , children , href , look , type , spacing ,
     look = stateValues.look;
     type = stateValues.type;
     const Icon = stateValues.icon;
+    const { isFocusVisible , focusProps  } = useFocusRing();
     const styles = itemStyles({
         look,
         type,
         spacing: stateValues.spacing,
         icon: !!Icon,
-        nested: state.nested && state.nested > 0 || false
+        nested: state.nested && state.nested > 0 || false,
+        isFocusVisible
     });
     const bulletToRender = ()=>{
         if (type === 'ordered' || type === 'unstyled') {
@@ -59,10 +62,10 @@ export function BaseItem({ className , children , href , look , type , spacing ,
         className: styles.base({
             className
         })
-    }, props), type === 'link' ? React.createElement("a", {
+    }, props), type === 'link' ? React.createElement("a", _extends({
         href: href,
         className: styles.link(),
         ref: ref
-    }, children) : children));
+    }, focusProps), children) : children));
 }
 export const Item = forwardRef(BaseItem);

package/dist/components/list/components/item/item.styles.d.ts

@@ -60,6 +60,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             bullet: string;
         };
     };
+    isFocusVisible: {
+        true: {
+            link: string;
+        };
+    };
 }, {
     base: string;
     bullet: string;
@@ -129,6 +134,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             bullet: string;
         };
     };
+    isFocusVisible: {
+        true: {
+            link: string;
+        };
+    };
 }, {
     base: string;
     bullet: string;

package/dist/components/list/components/item/item.styles.js

@@ -1,9 +1,9 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'typography-body-10 pl-[1.1875rem]',
+        base: 'pl-[1.1875rem]',
         bullet: 'absolute block border',
-        link: 'text-text hover:cursor-pointer hover:underline focus:focus-outline',
+        link: 'text-text hover:cursor-pointer hover:underline',
         wrapper: 'relative'
     },
     variants: {
@@ -67,6 +67,11 @@ export const styles = tv({
             true: {
                 bullet: 'bg-[transparent]'
             }
+        },
+        isFocusVisible: {
+            true: {
+                link: 'focus-outline'
+            }
         }
     },
     compoundSlots: [

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

@@ -6,7 +6,7 @@ export declare namespace List {
     var Item: React.ForwardRefExoticComponent<{
         href?: string | undefined;
         icon?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
-        look?: "link" | "success" | "danger" | "hero" | "neutral" | "primary" | undefined;
+        look?: "link" | "primary" | "hero" | "success" | "danger" | "neutral" | undefined;
         nested?: number | undefined;
         spacing?: "medium" | "large" | undefined;
         type?: "link" | "icon" | "bullet" | "tick" | "cross" | "unstyled" | "ordered" | undefined;

package/dist/components/list/list.stories.js

@@ -50,7 +50,13 @@ export const ListTypes = ()=>TYPES.map((type)=>React.createElement("div", {
         }, type), React.createElement(List, {
             type: type,
             icon: type === 'icon' ? AndroidIcon : undefined
-        }, React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List, {
+        }, React.createElement(List.Item, {
+            href: type === 'link' ? '#' : undefined
+        }, "Styled ", type, " list"), React.createElement(List.Item, {
+            href: type === 'link' ? '#' : undefined
+        }, "Styled ", type, " list"), React.createElement(List.Item, {
+            href: type === 'link' ? '#' : undefined
+        }, "Styled ", type, " list"), React.createElement(List, {
             icon: type === 'link' ? AndroidIcon : undefined
         }, React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List.Item, null, "Styled ", type, " list")), React.createElement(List.Item, null, "Styled ", type, " list"))));
 export const ListLooks = ()=>LOOKS.map((look)=>React.createElement("div", {

package/dist/components/list/list.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'list-none'
+        base: 'typography-body-10 list-none'
     },
     variants: {
         type: {

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

@@ -2,7 +2,7 @@
 import { GetStateValuesProps } from './list.types.js';
 export declare const getStateValues: (props: GetStateValuesProps) => {
     type: "link" | "icon" | "bullet" | "tick" | "cross" | "unstyled" | "ordered";
-    look: "link" | "success" | "danger" | "hero" | "neutral" | "primary";
+    look: "link" | "primary" | "hero" | "success" | "danger" | "neutral";
     spacing: "medium" | "large";
     icon: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
 };

package/dist/components/modal/components/backdrop/backdrop.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'fixed inset-0 z-50 flex animate-fadeIn justify-center overflow-y-auto bg-black/50 p-2',
-        modal: 'relative top-5 z-10 h-fit w-full animate-fadeInDown focus:outline-none'
+        base: 'animate-fadeIn fixed inset-0 z-50 flex justify-center overflow-y-auto bg-black/50 p-2',
+        modal: 'animate-fadeInDown relative top-5 z-10 h-fit w-full'
     }
 });

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

@@ -13,27 +13,29 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { useRef } from 'react';
-import { useDialog } from 'react-aria';
+import { useDialog, useFocusRing } from 'react-aria';
 import { CloseIcon } from '../../../../components/icon/index.js';
 import { DialogBody } from './components/dialog-body/index.js';
 import { DialogFooter } from './components/dialog-footer/index.js';
 import { styles as dialogStyles } from './dialog.styles.js';
 export function Dialog({ className , body , onClose , size ='md' , ...props }) {
     const { children  } = props;
+    const { isFocusVisible , focusProps  } = useFocusRing();
     const styles = dialogStyles({
         className,
-        size
+        size,
+        isFocusVisible
     });
     const ref = useRef(null);
     const { dialogProps , titleProps  } = useDialog(props, ref);
     return React.createElement("div", _extends({}, dialogProps, {
         ref: ref,
         className: styles.base()
-    }), onClose && React.createElement("button", {
+    }), onClose && React.createElement("button", _extends({
         className: styles.close(),
         onClick: onClose,
         "aria-label": "Close modal"
-    }, React.createElement(CloseIcon, {
+    }, focusProps), React.createElement(CloseIcon, {
         className: "block",
         size: "small"
     })), props.title && React.createElement("h3", _extends({}, titleProps, {

package/dist/components/modal/components/dialog/dialog.styles.d.ts

@@ -10,6 +10,14 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    isFocusVisible: {
+        true: {
+            close: string;
+        };
+        false: {
+            close: string;
+        };
+    };
 }, {
     base: string;
     title: string;
@@ -28,6 +36,14 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    isFocusVisible: {
+        true: {
+            close: string;
+        };
+        false: {
+            close: string;
+        };
+    };
 }, {
     base: string;
     title: string;

package/dist/components/modal/components/dialog/dialog.styles.js

@@ -1,9 +1,9 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'relative mx-auto max-w-full overflow-hidden rounded-[0.1875rem] bg-white focus:focus-outline',
-        title: 'border-b border-b-heading pb-2 pl-4 pr-5 pt-3 text-lg font-medium',
-        close: 'absolute right-1 top-1 block p-1 focus:focus-outline'
+        base: 'relative mx-auto max-w-full overflow-hidden rounded-[0.1875rem] bg-white outline-none',
+        title: 'border-b-heading border-b pb-2 pl-4 pr-5 pt-3 text-lg font-medium',
+        close: 'absolute right-1 top-1 block p-1'
     },
     variants: {
         size: {
@@ -16,6 +16,14 @@ export const styles = tv({
             sm: {
                 base: 'w-[18.75rem]'
             }
+        },
+        isFocusVisible: {
+            true: {
+                close: 'focus-outline'
+            },
+            false: {
+                close: 'outline-none'
+            }
         }
     }
 }, {

package/dist/components/popover/components/panel/panel.styles.js

@@ -4,7 +4,7 @@ export const styles = tv({
         base: '',
         popover: 'border-muted absolute z-[999] rounded-[3px] border bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
         arrow: 'border-t-muted absolute h-0 w-0 border-x-[8px] border-t-[12px] border-x-[transparent] after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
-        closeBtn: 'focus:focus-outline absolute right-1 top-1 m-1 p-0 hover:opacity-80',
+        closeBtn: 'absolute right-1 top-1 m-1 p-0 hover:opacity-80',
         content: 'w-[17.625rem] py-4 pl-3 pr-5',
         heading: 'typography-body-9 mb-2 font-bold',
         body: 'typography-body-10'

package/dist/components/popover/popover.component.js

@@ -36,7 +36,6 @@ export function Popover({ children , className , headingTag , content , heading
     }, React.createElement(Button, {
         look: icon && !children ? 'link' : look,
         iconAfter: icon,
-        className: styles.button(),
         "aria-expanded": state.isOpen,
         "aria-controls": panelId,
         onClick: handleClick

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

@@ -1,9 +1,7 @@
 export declare const styles: import("tailwind-variants").TVReturnType<{}, {
     base: string;
-    button: string;
 }, undefined, {
     responsiveVariants: string[];
 }, {}, {
     base: string;
-    button: string;
 }>;

package/dist/components/popover/popover.styles.js

@@ -1,8 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'relative inline-block',
-        button: 'focus:focus-outline'
+        base: 'relative inline-block'
     },
     variants: {}
 }, {

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

@@ -24,11 +24,11 @@ function BaseRadio({ className , hint , children , ...props }, ref) {
         ...props,
         children
     }, state, localRef);
-    const { isFocusVisible , focusProps  } = useFocusRing();
+    const { isFocused , focusProps  } = useFocusRing();
     const styles = radioStyles({
         isDisabled,
         isSelected,
-        isFocusVisible,
+        isFocused,
         size,
         orientation
     });

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

@@ -13,7 +13,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             selector: string;
         };
     };
-    isFocusVisible: {
+    isFocused: {
         true: {
             selector: string;
         };
@@ -59,7 +59,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             selector: string;
         };
     };
-    isFocusVisible: {
+    isFocused: {
         true: {
             selector: string;
         };

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

@@ -4,8 +4,8 @@ export const styles = tv({
         base: 'flex',
         textWrapper: 'flex flex-col justify-center',
         labelText: 'typography-body-10 py-[2px] pl-1',
-        hintText: 'typography-body-10 pl-1 text-muted',
-        selector: 'flex h-4 w-4 items-center justify-center rounded-full border border-hero'
+        hintText: 'typography-body-10 text-muted pl-1',
+        selector: 'border-hero flex h-4 w-4 items-center justify-center rounded-full border'
     },
     variants: {
         isDisabled: {
@@ -19,12 +19,12 @@ export const styles = tv({
         },
         isSelected: {
             true: {
-                selector: 'before:block before:h-2 before:w-2 before:rounded-full before:bg-hero'
+                selector: 'before:bg-hero before:block before:h-2 before:w-2 before:rounded-full'
             }
         },
-        isFocusVisible: {
+        isFocused: {
             true: {
-                selector: 'rounded-full focus-outline'
+                selector: 'focus-outline'
             }
         },
         orientation: {

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

@@ -0,0 +1,2 @@
+export { Repeater } from './repeater.component.js';
+export { type RepeaterProps } from './repeater.types.js';

package/dist/components/repeater/index.js

@@ -0,0 +1 @@
+export { Repeater } from './repeater.component.js';

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

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type RepeaterProps } from './repeater.types.js';
+export declare function Repeater({ addText, indexTag: ItemIndex, children, separator, className, }: RepeaterProps): JSX.Element;