@westpac/ui 0.3.0 → 0.4.0

package/dist/components/autocomplete/components/list-box/components/list-box-option/list-box-option.styles.js

@@ -0,0 +1,23 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'flex cursor-pointer items-center justify-between border-t border-t-border bg-white p-2 px-3 text-sm transition-colors first:border-t-0 hover:bg-hero hover:text-white focus:bg-hero focus:text-white',
+    variants: {
+        isFocused: {
+            true: 'bg-hero !text-white'
+        },
+        isSelected: {
+            true: 'font-bold'
+        },
+        isDisabled: {
+            true: 'text-muted'
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/autocomplete/components/list-box/components/list-box-option/list-box-option.types.d.ts

@@ -0,0 +1,6 @@
+import { type Node } from '@react-types/shared';
+import { type ListState } from 'react-stately';
+export type OptionProps<T = any> = {
+    item: Node<T>;
+    state: ListState<T>;
+};

package/dist/components/autocomplete/components/list-box/components/list-box-option/list-box-option.types.js

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

package/dist/components/autocomplete/components/list-box/components/list-box-section/index.d.ts

@@ -0,0 +1,2 @@
+export { ListBoxSection } from './list-box-section.component.js';
+export { type ListBoxSectionProps } from './list-box-section.types.js';

package/dist/components/autocomplete/components/list-box/components/list-box-section/index.js

@@ -0,0 +1 @@
+export { ListBoxSection } from './list-box-section.component.js';

package/dist/components/autocomplete/components/list-box/components/list-box-section/list-box-section.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type ListBoxSectionProps } from './list-box-section.types.js';
+export declare function ListBoxSection({ section, state }: ListBoxSectionProps): JSX.Element;

package/dist/components/autocomplete/components/list-box/components/list-box-section/list-box-section.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 * as React from 'react';
+import { useListBoxSection } from 'react-aria';
+import { Option } from '../list-box-option/index.js';
+export function ListBoxSection({ section , state  }) {
+    const { itemProps , headingProps , groupProps  } = useListBoxSection({
+        heading: section.rendered,
+        'aria-label': section['aria-label']
+    });
+    return React.createElement(React.Fragment, null, React.createElement("li", _extends({}, itemProps, {
+        className: "pt-2"
+    }), section.rendered && React.createElement("span", _extends({}, headingProps, {
+        className: "mx-3 text-xs font-bold uppercase text-text"
+    }), section.rendered), React.createElement("ul", _extends({}, groupProps), [
+        ...section.childNodes
+    ].map((node)=>React.createElement(Option, {
+            key: node.key,
+            item: node,
+            state: state
+        })))));
+}

package/dist/components/autocomplete/components/list-box/components/list-box-section/list-box-section.types.d.ts

@@ -0,0 +1,6 @@
+import { type Node } from '@react-types/shared';
+import { ListState } from 'react-stately';
+export type ListBoxSectionProps<T = any> = {
+    section: Node<T>;
+    state: ListState<T>;
+};

package/dist/components/autocomplete/components/list-box/components/list-box-section/list-box-section.types.js

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

package/dist/components/autocomplete/components/list-box/index.d.ts

@@ -0,0 +1,2 @@
+export { ListBox } from './list-box.component.js';
+export { type ListBoxProps } from './list-box.types.js';

package/dist/components/autocomplete/components/list-box/index.js

@@ -0,0 +1 @@
+export { ListBox } from './list-box.component.js';

package/dist/components/autocomplete/components/list-box/list-box.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { ListBoxProps } from './list-box.types.js';
+export declare function ListBox(props: ListBoxProps): JSX.Element;

package/dist/components/autocomplete/components/list-box/list-box.component.js

@@ -0,0 +1,36 @@
+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 * as React from 'react';
+import { useListBox } from 'react-aria';
+import { ListBoxSection, Option } from './components/index.js';
+export function ListBox(props) {
+    const ref = React.useRef(null);
+    const { listBoxRef =ref , state  } = props;
+    const { listBoxProps  } = useListBox(props, state, listBoxRef);
+    return React.createElement("ul", _extends({}, listBoxProps, {
+        ref: listBoxRef,
+        className: "max-h-[400px] w-full overflow-auto outline-none"
+    }), [
+        ...state.collection
+    ].map((item)=>item.type === 'section' ? React.createElement(ListBoxSection, {
+            key: item.key,
+            section: item,
+            state: state
+        }) : React.createElement(Option, {
+            key: item.key,
+            item: item,
+            state: state
+        })));
+}

package/dist/components/autocomplete/components/list-box/list-box.types.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+import { AriaListBoxOptions } from 'react-aria';
+import { ListState } from 'react-stately';
+export type ListBoxProps<T = any> = AriaListBoxOptions<T> & {
+    listBoxRef?: React.RefObject<HTMLUListElement>;
+    state: ListState<T>;
+} & HTMLAttributes<Element>;

package/dist/components/autocomplete/components/list-box/list-box.types.js

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

package/dist/components/autocomplete/components/popover/index.d.ts

@@ -0,0 +1,2 @@
+export { Popover } from './popover.component.js';
+export { type PopoverProps } from './popover.types.js';

package/dist/components/autocomplete/components/popover/index.js

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

package/dist/components/autocomplete/components/popover/popover.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { PopoverProps } from './popover.types.js';
+export declare function Popover(props: PopoverProps): JSX.Element;

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

@@ -0,0 +1,43 @@
+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 { clsx } from 'clsx';
+import * as React from 'react';
+import { DismissButton, Overlay, usePopover } from 'react-aria';
+export function Popover(props) {
+    var _props_triggerRef_current;
+    const ref = React.useRef(null);
+    const { popoverRef =ref , state , children , className , isNonModal , portalContainer  } = props;
+    const { popoverProps , underlayProps  } = usePopover({
+        ...props,
+        popoverRef
+    }, state);
+    const width = (_props_triggerRef_current = props.triggerRef.current) === null || _props_triggerRef_current === void 0 ? void 0 : _props_triggerRef_current.getBoundingClientRect().width;
+    return React.createElement(Overlay, {
+        portalContainer: portalContainer
+    }, !isNonModal && React.createElement("div", _extends({}, underlayProps, {
+        className: "fixed inset-0"
+    })), React.createElement("div", _extends({}, popoverProps, {
+        style: {
+            ...popoverProps.style,
+            width: width ? `${width}px` : undefined
+        },
+        ref: popoverRef,
+        className: clsx('z-10 border border-border bg-white shadow-lg', className)
+    }), !isNonModal && React.createElement(DismissButton, {
+        onDismiss: state.close
+    }), children, React.createElement(DismissButton, {
+        onDismiss: state.close
+    })));
+}

package/dist/components/autocomplete/components/popover/popover.types.d.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { type AriaPopoverProps } from 'react-aria';
+import { type OverlayTriggerState } from 'react-stately';
+export type PopoverProps = Omit<AriaPopoverProps, 'popoverRef'> & {
+    /**
+     * Popover content
+     */
+    children: ReactNode;
+    /**
+     * Classname
+     */
+    className?: string;
+    /**
+     * Popover ref
+     */
+    popoverRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * Element where the popover will be rendered, by default it will be into the body
+     */
+    portalContainer?: Element;
+    /**
+     * Popover state
+     */
+    state: OverlayTriggerState;
+} & HTMLAttributes<Element>;

package/dist/components/autocomplete/components/popover/popover.types.js

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

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

@@ -0,0 +1,2 @@
+export { Autocomplete } from './autocomplete.component.js';
+export { type AutocompleteProps } from './autocomplete.types.js';

package/dist/components/autocomplete/index.js

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

package/dist/components/badge/badge.stories.js

@@ -31,7 +31,7 @@ const meta = {
             }, React.createElement(Story, null))
     ],
     parameters: {
-        layout: 'center'
+        layout: 'fullscreen'
     },
     argTypes: {
         children: {

package/dist/components/breadcrumb/breadcrumb.stories.js

@@ -11,7 +11,7 @@ const meta = {
             }, React.createElement(Story, null))
     ],
     parameters: {
-        layout: 'center'
+        layout: 'fullscreen'
     }
 };
 export default meta;

package/dist/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.stories.js

@@ -11,7 +11,7 @@ const meta = {
             }, React.createElement(Story, null))
     ],
     parameters: {
-        layout: 'center'
+        layout: 'fullscreen'
     }
 };
 export default meta;

package/dist/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.styles.js

@@ -7,7 +7,7 @@ export const styles = tv({
             false: ''
         },
         isDisabled: {
-            true: 'text-muted-100',
+            true: 'text-muted-10',
             false: 'text-muted'
         }
     },

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

@@ -2,6 +2,9 @@ import React from 'react';
 export declare const Button: React.ForwardRefExoticComponent<{
     iconAfter?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
     iconBefore?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
+    iconColor?: "link" | "text" | "border" | "heading" | "success" | "info" | "warning" | "danger" | "system" | "white" | "black" | "background" | "borderDark" | "focus" | "hero" | "light" | "muted" | "neutral" | "pop" | "primary" | (string & {
+        [x: string]: "link" | "text" | "border" | "heading" | "success" | "info" | "warning" | "danger" | "system" | "white" | "black" | "background" | "borderDark" | "focus" | "hero" | "light" | "muted" | "neutral" | "pop" | "primary" | undefined;
+    }) | undefined;
     tag?: "a" | "button" | "div" | "span" | undefined;
 } & React.ButtonHTMLAttributes<Element> & React.AnchorHTMLAttributes<Element> & import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
     size: {
@@ -54,6 +57,7 @@ export declare const Button: React.ForwardRefExoticComponent<{
     base: string;
     iconBefore: string;
     iconAfter: string;
+    dropdown: string;
     text: string;
 }, undefined, {
     responsiveVariants: string[];
@@ -108,5 +112,6 @@ export declare const Button: React.ForwardRefExoticComponent<{
     base: string;
     iconBefore: string;
     iconAfter: string;
+    dropdown: string;
     text: string;
 }>> & React.RefAttributes<unknown>>;

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

@@ -16,7 +16,7 @@ import React, { forwardRef, useMemo } from 'react';
 import { FocusRing } from 'react-aria';
 import { styles as buttonStyles } from './button.styles.js';
 import { getIconSize } from './button.utils.js';
-function BaseButton({ className , size ='medium' , look ='hero' , soft , block , justify , tag: Tag = 'button' , iconBefore: IconBefore , iconAfter: IconAfter , children , ...props }, ref) {
+function BaseButton({ className , size ='medium' , look ='hero' , soft , block , justify , tag: Tag = 'button' , iconBefore: IconBefore , iconAfter: IconAfter , iconColor , children , ...props }, ref) {
     const iconSize = useMemo(()=>getIconSize(size), [
         size
     ]);
@@ -37,12 +37,14 @@ function BaseButton({ className , size ='medium' , look ='hero' , soft , block ,
         })
     }, props), IconBefore && React.createElement(IconBefore, {
         size: iconSize,
-        className: styles.iconBefore()
+        className: styles.iconBefore(),
+        color: iconColor
     }), React.createElement("span", {
         className: styles.text()
     }, children), IconAfter && React.createElement(IconAfter, {
         size: iconSize,
-        className: styles.iconAfter()
+        className: styles.iconAfter(),
+        color: iconColor
     })));
 }
 export const Button = forwardRef(BaseButton);

package/dist/components/button/button.stories.js

@@ -14,7 +14,7 @@ const meta = {
             }, React.createElement(Story, null))
     ],
     parameters: {
-        layout: 'center'
+        layout: 'fullscreen'
     }
 };
 export default meta;

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

@@ -52,6 +52,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     base: string;
     iconBefore: string;
     iconAfter: string;
+    dropdown: string;
     text: string;
 }, undefined, {
     responsiveVariants: string[];
@@ -106,5 +107,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     base: string;
     iconBefore: string;
     iconAfter: string;
+    dropdown: string;
     text: string;
 }>;

package/dist/components/button/button.styles.js

@@ -1,9 +1,10 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'inline-flex items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50',
+        base: 'inline-flex items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
         iconBefore: '',
         iconAfter: '',
+        dropdown: 'ml-[0.4em]',
         text: 'overflow-hidden text-ellipsis'
     },
     variants: {
@@ -23,13 +24,13 @@ export const styles = tv({
         },
         look: {
             primary: {
-                base: 'border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50'
+                base: 'border-primary bg-primary hover:bg-primary-70 active:bg-primary-50 border text-white'
             },
             hero: {
-                base: 'border border-hero bg-hero text-white hover:bg-hero-70 active:bg-hero-50'
+                base: 'border-hero bg-hero hover:bg-hero-70 active:bg-hero-50 border text-white'
             },
             faint: {
-                base: 'border border-border bg-light text-muted hover:bg-white active:bg-white'
+                base: 'border-border bg-light text-muted border hover:bg-white active:bg-white'
             },
             link: {
                 base: 'text-link underline'

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

@@ -11,6 +11,12 @@ export type ButtonProps = {
      * Places an icon within the button, before the button’s text
      */
     iconBefore?: (props: IconProps) => JSX.Element;
+    /**
+     * The color for the icon.
+     *
+     * Defaults to the current text color.
+     */
+    iconColor?: IconProps['color'];
     /**
      * Tag to render
      */

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

@@ -0,0 +1,6 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type ButtonDropdownProps } from './button-dropdown.types.js';
+export declare function ButtonDropdown({ className, dropdownSize, iconBefore: IconBefore, open, text, children, size, look, soft, block, }: ButtonDropdownProps): JSX.Element;
+export declare namespace ButtonDropdown {
+    var Heading: typeof import("./components/heading/heading.component.js").Heading;
+}

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

@@ -0,0 +1,74 @@
+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, { useCallback, useEffect, useId, useRef } from 'react';
+import { useButton, useOverlayTrigger } from 'react-aria';
+import { useOverlayTriggerState } from 'react-stately';
+import { Button } from '../button/index.js';
+import { DropDownIcon } from '../icon/index.js';
+import { styles as buttonDropdownStyles } from './button-dropdown.styles.js';
+import { Heading } from './components/heading/index.js';
+import { Panel } from './components/panel/panel.component.js';
+export function ButtonDropdown({ className , dropdownSize ='medium' , iconBefore: IconBefore , open =false , text , children , size , look ='hero' , soft =false , block =false  }) {
+    const ref = useRef(null);
+    const panelId = useId();
+    const styles = buttonDropdownStyles({
+        block,
+        dropdownSize
+    });
+    const state = useOverlayTriggerState({
+        defaultOpen: open
+    });
+    const { overlayProps , triggerProps  } = useOverlayTrigger({
+        type: 'menu'
+    }, state, ref);
+    const { buttonProps  } = useButton(triggerProps, ref);
+    const keyHandler = useCallback((event)=>{
+        if (state.isOpen && event.key === 'Escape') state.close();
+    }, [
+        state.isOpen
+    ]);
+    useEffect(()=>{
+        window.document.addEventListener('keydown', keyHandler);
+        return ()=>{
+            window.document.removeEventListener('keydown', keyHandler);
+        };
+    }, [
+        keyHandler
+    ]);
+    return React.createElement(React.Fragment, null, React.createElement(Button, _extends({
+        ref: ref,
+        iconAfter: (props)=>React.createElement(DropDownIcon, _extends({
+                "aria-hidden": true
+            }, props)),
+        iconBefore: IconBefore,
+        size: size,
+        look: look,
+        soft: soft,
+        block: block,
+        "aria-expanded": state.isOpen,
+        "aria-controls": "panel-dialog",
+        className: styles.base()
+    }, buttonProps), text), state.isOpen && React.createElement(Panel, _extends({
+        className: styles.panel({
+            className
+        }),
+        placement: "bottom start",
+        triggerRef: ref,
+        state: state,
+        block: block,
+        id: panelId
+    }, overlayProps), children));
+}
+ButtonDropdown.Heading = Heading;

package/dist/components/button-dropdown/button-dropdown.stories.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Meta, type StoryObj } from '@storybook/react';
+import { ButtonDropdown } from './button-dropdown.component.js';
+declare const meta: Meta<typeof ButtonDropdown>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Standard looks of button
+ */
+export declare const StandardLooks: () => JSX.Element;
+/**
+ * > Soft looks of button
+ */
+export declare const SoftLooks: () => JSX.Element;
+/**
+ * > Sizes of buttons
+ */
+export declare const ButtonSizes: () => JSX.Element;
+/**
+ * > Sizes of dropdown
+ */
+export declare const DropdownSizes: () => JSX.Element;
+/**
+ * > Block usage example
+ */
+export declare const BlockDropdownButton: Story;
+/**
+ * > Icon usage example
+ */
+export declare const DropdownButtonWithIcons: Story;
+/**
+ * > With headings example
+ */
+export declare const DropdownWithHeadings: Story;

package/dist/components/button-dropdown/button-dropdown.stories.js

@@ -0,0 +1,104 @@
+import { AndroidIcon } from '../icon/index.js';
+import { ButtonDropdown } from './button-dropdown.component.js';
+const meta = {
+    title: 'Example/ButtonDropdown',
+    component: ButtonDropdown,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "p-3"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export default meta;
+const LOOKS = [
+    'primary',
+    'hero',
+    'faint'
+];
+const SIZES = [
+    'small',
+    'medium',
+    'large',
+    'xlarge'
+];
+const DROPDOWNSIZE = [
+    'small',
+    'medium',
+    'large'
+];
+export const DefaultStory = {
+    args: {
+        text: 'Default Dropdown',
+        children: React.createElement("p", null, "Example dropdown", React.createElement("a", {
+            href: "#",
+            className: "text-[blue] underline"
+        }, "content"), "...")
+    }
+};
+export const StandardLooks = ()=>React.createElement("div", {
+        className: "flex gap-2"
+    }, LOOKS.map((look)=>React.createElement(ButtonDropdown, {
+            look: look,
+            text: look
+        }, React.createElement("p", null, "Example dropdown", React.createElement("a", {
+            href: "#",
+            className: "text-[blue] underline"
+        }, "content"), "..."))));
+export const SoftLooks = ()=>React.createElement("div", {
+        className: "flex gap-2"
+    }, LOOKS.map((look)=>React.createElement(ButtonDropdown, {
+            look: look,
+            soft: true,
+            text: look
+        }, React.createElement("p", null, "Example dropdown", React.createElement("a", {
+            href: "#",
+            className: "text-[blue] underline"
+        }, "content"), "..."))));
+export const ButtonSizes = ()=>React.createElement("div", null, SIZES.map((size)=>React.createElement(React.Fragment, null, React.createElement("h3", {
+            className: "font-bold"
+        }, size), React.createElement(ButtonDropdown, {
+            size: size,
+            text: size
+        }, React.createElement("p", null, "Example dropdown", React.createElement("a", {
+            href: "#",
+            className: "text-[blue] underline"
+        }, "content"), "...")))));
+export const DropdownSizes = ()=>React.createElement("div", null, DROPDOWNSIZE.map((size)=>React.createElement(React.Fragment, null, React.createElement("h3", {
+            className: "font-bold"
+        }, size), React.createElement(ButtonDropdown, {
+            dropdownSize: size,
+            text: size
+        }, size))));
+export const BlockDropdownButton = {
+    args: {
+        block: true,
+        text: 'Block Dropdown',
+        children: React.createElement("p", null, "Example dropdown", React.createElement("a", {
+            href: "#",
+            className: "text-[blue] underline"
+        }, "content"), "...")
+    }
+};
+export const DropdownButtonWithIcons = {
+    args: {
+        iconBefore: AndroidIcon,
+        text: 'Icon Dropdown',
+        children: React.createElement("p", null, "Example dropdown", React.createElement("a", {
+            href: "#",
+            className: "text-[blue] underline"
+        }, "content"), "...")
+    }
+};
+export const DropdownWithHeadings = {
+    args: {
+        text: 'Heading Dropdown',
+        block: false,
+        children: React.createElement(React.Fragment, null, React.createElement(ButtonDropdown.Heading, null, "Dropdown heading #1"), "Example dropdown content...", React.createElement(ButtonDropdown.Heading, null, "Dropdown heading #2"), "Example dropdown content...")
+    }
+};