@westpac/ui 0.7.0 → 0.7.1

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

@@ -1,33 +1,18 @@
 import React from 'react';
 import { Item } from 'react-stately';
 import { type AccordionProps } from './accordion.types.js';
-declare function Accordion<T extends object>({ className, color, rounded, look, ...props }: AccordionProps<T>, ref: any): import("react/jsx-runtime").JSX.Element;
+declare function Accordion<T extends object>({ className, rounded, look, ...props }: AccordionProps<T>, ref: any): import("react/jsx-runtime").JSX.Element;
 declare const _Accordion: {
     Item: typeof Item;
     displayName: string;
-} & (<T>(props: import("@react-types/accordion").SpectrumAccordionProps<T> & import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
-    rounded: {
-        true: string;
-    };
-    look: {
-        material: string;
-        default: string;
-    };
-}, undefined, "flex flex-col", {
-    responsiveVariants: string[];
-}, {
-    rounded: {
-        true: string;
-    };
-    look: {
-        material: string;
-        default: string;
-    };
-}, undefined>> & {
-    color?: "primary" | "hero" | ({
-        [x: string]: "primary" | "hero" | undefined;
-    } & string) | undefined;
+} & (<T>(props: import("@react-types/accordion").SpectrumAccordionProps<T> & {
     justify?: boolean | undefined;
+    look?: "soft" | "lego" | {
+        [x: string]: "soft" | "lego" | undefined;
+    } | undefined;
+    rounded?: boolean | {
+        [x: string]: boolean | undefined;
+    } | undefined;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
     ref?: any;
 }) => ReturnType<typeof Accordion>);

package/dist/components/accordion/accordion.component.js

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
@@ -19,7 +20,7 @@ import React, { Children, cloneElement, forwardRef, isValidElement } from 'react
 import { Item, useTreeState } from 'react-stately';
 import { styles } from './accordion.styles.js';
 import { AccordionItem } from './components/index.js';
-function Accordion({ className , color , rounded =true , look ='default' , ...props }, ref) {
+function Accordion({ className , rounded =true , look ='soft' , ...props }, ref) {
     const finalProps = {
         ...props,
         children: Children.map(props.children, (child)=>{
@@ -37,8 +38,7 @@ function Accordion({ className , color , rounded =true , look ='default' , ...pr
         ref: domRef,
         className: styles({
             className,
-            rounded,
-            look
+            rounded
         })
     }), React.createElement("div", {
         className: "mt-[-1px]"
@@ -48,7 +48,6 @@ function Accordion({ className , color , rounded =true , look ='default' , ...pr
             key: item.key,
             item: item,
             state: state,
-            color: color,
             look: look
         }))));
 }

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

@@ -8,14 +8,17 @@ type Story = StoryObj<typeof meta>;
  */
 export declare const Default: Story;
 /**
- * > Primary color usage example
+ * > Lego look using Hero color
  */
-export declare const PrimaryColor: Story;
+export declare const LegoLook: Story;
 /**
- * > Hero color usage example
+ * > Controlled example
  */
-export declare const HeroColor: Story;
+export declare const Controlled: Story;
 /**
- * > Controlled example
+ * > Example showing how you can use styling to change accordion to tabs responsively.
+ * > Replicates GEL Tabcordion functionality.
+ * NOTE: Due to how items work the Accordion.Item that are children of Tabs should be Tab.Panel but can't due to name sharing on this page.
+ * See the source of this example in, https://github.com/WestpacGEL/GEL-next/blob/main/packages/ui/src/components/accordion/accordion.stories.tsx#L142
  */
-export declare const ControlledColor: Story;
+export declare const Responsive: Story;

package/dist/components/accordion/accordion.stories.js

@@ -13,7 +13,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import { useState } from 'react';
-import { Button } from '../index.js';
+import { Button, Tabs } from '../index.js';
 import { Accordion } from './accordion.component.js';
 const meta = {
     title: 'Components/Accordion',
@@ -32,7 +32,6 @@ export default meta;
 export const Default = {
     args: {
         rounded: true,
-        color: undefined,
         children: [
             {
                 key: 'files',
@@ -52,32 +51,9 @@ export const Default = {
             }, React.createElement("h3", null, title), React.createElement("p", null, "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, nobis itaque iste sequi, pariatur, nam reiciendis quasi illum nulla aliquid mollitia corrupti nostrum incidunt? At minima error nobis ullam!"), React.createElement(Button, null, "Test")))
     }
 };
-export const PrimaryColor = {
+export const LegoLook = {
     args: {
-        color: 'primary',
-        rounded: false
-    },
-    render: ({ ...props })=>React.createElement(Accordion, _extends({}, props), [
-            {
-                key: 'colors',
-                title: 'Your colors'
-            },
-            {
-                key: 'shared',
-                title: 'Shared color'
-            },
-            {
-                key: 'last',
-                title: 'Last item'
-            }
-        ].map(({ key , title  })=>React.createElement(Accordion.Item, {
-                key: key,
-                title: title
-            }, React.createElement("p", null, title), React.createElement(Button, null, "Test"))))
-};
-export const HeroColor = {
-    args: {
-        color: 'hero',
+        look: 'lego',
         rounded: false
     },
     render: ({ ...props })=>React.createElement(Accordion, _extends({}, props), [
@@ -98,9 +74,9 @@ export const HeroColor = {
                 title: title
             }, React.createElement("p", null, title), React.createElement(Button, null, "Test"))))
 };
-export const ControlledColor = {
+export const Controlled = {
     args: {
-        color: 'hero',
+        look: 'lego',
         rounded: false
     },
     render: ({ ...props })=>{
@@ -129,3 +105,35 @@ export const ControlledColor = {
             }, React.createElement("p", null, title), React.createElement(Button, null, "Test"))));
     }
 };
+export const Responsive = {
+    render: ({ ...props })=>{
+        const data = [
+            {
+                key: 'files',
+                title: 'First Item',
+                content: 'First Accordion content...'
+            },
+            {
+                key: 'shared',
+                title: 'Second Item',
+                content: 'Second Accordion content...'
+            },
+            {
+                key: 'last',
+                title: 'Third Item',
+                content: 'Third Accordion content...'
+            }
+        ];
+        return React.createElement(React.Fragment, null, React.createElement(Accordion, _extends({}, props, {
+            className: "sm:hidden"
+        }), data.map(({ key , title , content  })=>React.createElement(Accordion.Item, {
+                key: key,
+                title: title
+            }, React.createElement("p", null, content)))), React.createElement(Tabs, {
+            className: "max-sm:hidden"
+        }, data.map(({ key , title , content  })=>React.createElement(Tabs.Panel, {
+                key: key,
+                title: title
+            }, React.createElement("p", null, content)))));
+    }
+};

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

@@ -2,18 +2,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     rounded: {
         true: string;
     };
-    look: {
-        material: string;
-        default: string;
-    };
-}, undefined, "flex flex-col", {
+}, undefined, "flex flex-col border border-border text-text", {
     responsiveVariants: string[];
 }, {
     rounded: {
         true: string;
     };
-    look: {
-        material: string;
-        default: string;
-    };
 }, undefined>;

package/dist/components/accordion/accordion.styles.js

@@ -1,13 +1,9 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'flex flex-col',
+    base: 'flex flex-col border border-border text-text',
     variants: {
         rounded: {
             true: 'overflow-hidden rounded'
-        },
-        look: {
-            material: '',
-            default: 'border border-border'
         }
     }
 }, {

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

@@ -3,13 +3,19 @@ import { HTMLAttributes } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 import { styles } from './accordion.styles.js';
 import { AccordionItemProps } from './components/index.js';
-export type AccordionProps<T = any> = SpectrumAccordionProps<T> & VariantProps<typeof styles> & {
-    /**
-     * Accordion colors
-     */
-    color?: AccordionItemProps['color'];
+type Variants = VariantProps<typeof styles>;
+export type AccordionProps<T = any> = SpectrumAccordionProps<T> & {
     /**
      * Stretch the tab to fill the whole content
      */
     justify?: boolean;
+    /**
+     * The look of the accordion
+     */
+    look?: AccordionItemProps['look'];
+    /**
+     * Whether the accordion is rounded
+     */
+    rounded?: Variants['rounded'];
 } & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
+export {};

package/dist/components/accordion/components/accordion-item/accordion-item.component.d.ts

@@ -1,2 +1,5 @@
 import { type AccordionItemProps } from './accordion-item.types.js';
-export declare function AccordionItem<T = any>({ className, tag: Tag, color, look, ...props }: AccordionItemProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionItem<T = any>({ className, tag: Tag, look, ...props }: AccordionItemProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace AccordionItem {
+    var displayName: string;
+}

package/dist/components/accordion/components/accordion-item/accordion-item.component.js

@@ -19,7 +19,7 @@ import { mergeProps, useFocusRing, useHover, useLocale } from 'react-aria';
 import { ArrowLeftIcon, ArrowRightIcon } from '../../../icon/index.js';
 import { styles as accordionItemStyles } from './accordion-item.styles.js';
 const loadAnimations = ()=>import('./accordion-item.utils.js').then((res)=>res.default);
-export function AccordionItem({ className , tag: Tag = 'div' , color , look ='default' , ...props }) {
+export function AccordionItem({ className , tag: Tag = 'div' , look ='soft' , ...props }) {
     const ref = useRef(null);
     const { state , item  } = props;
     const { buttonProps , regionProps  } = useAccordionItem(props, state, ref);
@@ -33,47 +33,48 @@ export function AccordionItem({ className , tag: Tag = 'div' , color , look ='de
     const styles = accordionItemStyles({
         isOpen,
         isDisabled,
-        className,
-        color,
         look,
         isFocusVisible
     });
     return React.createElement(Tag, {
-        className: styles.base()
+        className: styles.base({
+            className
+        })
     }, React.createElement("h3", null, React.createElement("button", _extends({}, mergeProps(buttonProps, hoverProps, focusProps), {
         ref: ref,
         className: styles.itemHeader()
-    }), React.createElement("span", null, item.props.title), look === 'material' && React.createElement("div", {
-        "aria-hidden": "true",
-        className: styles.indicator()
-    }), look === 'default' && (direction === 'ltr' ? React.createElement(ArrowRightIcon, {
+    }), React.createElement("span", null, item.props.title), direction === 'ltr' ? React.createElement(ArrowRightIcon, {
         "aria-hidden": "true",
         className: styles.indicator()
     }) : React.createElement(ArrowLeftIcon, {
         "aria-hidden": "true",
         className: styles.indicator()
-    })))), React.createElement("div", _extends({}, regionProps), React.createElement(LazyMotion, {
+    }))), React.createElement("div", _extends({}, regionProps), React.createElement(LazyMotion, {
         features: loadAnimations
     }, React.createElement(AnimatePresence, {
         initial: false
     }, isOpen && React.createElement(m.div, {
+        className: "overflow-hidden",
         initial: {
-            height: 0,
-            opacity: 0
+            height: 0
         },
         animate: {
-            height: 'auto',
-            opacity: 1
+            height: 'auto'
         },
         exit: {
-            height: 0,
-            opacity: 0
+            height: 0
         },
         transition: {
-            duration: 0.2,
-            ease: 'easeInOut'
+            duration: 0.3,
+            ease: [
+                0.25,
+                0.1,
+                0.25,
+                1.0
+            ]
         }
     }, React.createElement("div", {
         className: styles.content()
     }, item.props.children))))));
 }
+AccordionItem.displayName = 'Accordion.Item';

package/dist/components/accordion/components/accordion-item/accordion-item.styles.d.ts

@@ -1,19 +1,9 @@
 export declare const styles: import("tailwind-variants").TVReturnType<{
     look: {
-        material: {
+        soft: {
             itemHeader: string;
-            indicator: string;
         };
-        default: {
-            itemHeader: string;
-            indicator: string;
-        };
-    };
-    color: {
-        hero: {
-            itemHeader: string;
-        };
-        primary: {
+        lego: {
             itemHeader: string;
         };
     };
@@ -46,20 +36,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     responsiveVariants: string[];
 }, {
     look: {
-        material: {
-            itemHeader: string;
-            indicator: string;
-        };
-        default: {
-            itemHeader: string;
-            indicator: string;
-        };
-    };
-    color: {
-        hero: {
+        soft: {
             itemHeader: string;
         };
-        primary: {
+        lego: {
             itemHeader: string;
         };
     };

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

@@ -1,28 +1,18 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: '',
+        base: 'relative',
         itemHeader: 'typography-body-9 flex w-full items-center justify-between px-3 py-2',
-        indicator: '',
+        indicator: 'h-3 w-3 rotate-90',
         content: 'hidden'
     },
     variants: {
         look: {
-            material: {
-                itemHeader: 'bg-white transition-colors hover:bg-light',
-                indicator: 'relative h-2 w-2 before:absolute before:left-1/2 before:top-1/2 before:block before:h-[2px] before:w-full before:-translate-x-1/2 before:-translate-y-1/2 before:bg-muted after:absolute after:left-1/2 after:top-1/2 after:block after:h-full after:w-[2px] after:-translate-x-1/2 after:-translate-y-1/2 after:bg-muted after:transition-transform'
+            soft: {
+                itemHeader: 'border-t border-border bg-light'
             },
-            default: {
-                itemHeader: 'border-t border-border bg-light',
-                indicator: 'h-3 w-3 rotate-90 transition-transform'
-            }
-        },
-        color: {
-            hero: {
-                itemHeader: 'border-l-[0.375rem] border-l-border transition-colors'
-            },
-            primary: {
-                itemHeader: 'border-l-[0.375rem] border-l-border transition-colors'
+            lego: {
+                itemHeader: 'border-l-[0.375rem] border-t border-border bg-light transition-colors'
             }
         },
         isOpen: {
@@ -51,31 +41,14 @@ export const styles = tv({
             slots: [
                 'indicator'
             ],
-            look: 'default',
             isOpen: true,
             className: '-rotate-90'
         },
-        {
-            slots: [
-                'indicator'
-            ],
-            look: 'material',
-            isOpen: true,
-            className: 'after:rotate-90'
-        },
         {
             slots: [
                 'itemHeader'
             ],
-            color: 'primary',
-            isOpen: true,
-            className: 'border-l-primary'
-        },
-        {
-            slots: [
-                'itemHeader'
-            ],
-            color: 'hero',
+            look: 'lego',
             isOpen: true,
             className: 'border-l-hero'
         },
@@ -83,14 +56,7 @@ export const styles = tv({
             slots: [
                 'content'
             ],
-            color: 'hero',
-            className: 'border-l-[0.375rem] border-l-border'
-        },
-        {
-            slots: [
-                'content'
-            ],
-            color: 'primary',
+            look: 'lego',
             className: 'border-l-[0.375rem] border-l-border'
         }
     ]

package/dist/components/accordion/components/accordion-item/accordion-item.types.d.ts

@@ -2,11 +2,16 @@ import { HTMLAttributes } from 'react';
 import { Node, TreeState } from 'react-stately';
 import { type VariantProps } from 'tailwind-variants';
 import { styles } from './accordion-item.styles.js';
+type Variants = VariantProps<typeof styles>;
 export type AccordionItemProps<T = any> = {
     /**
      * Node from react-stately
      */
     item: Node<T>;
+    /**
+     * Look of the item
+     */
+    look?: Variants['look'];
     /**
      * Tree state
      */
@@ -15,4 +20,5 @@ export type AccordionItemProps<T = any> = {
      * Tag to render
      */
     tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> & HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;
+export {};

package/dist/components/alert/alert.component.js

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){

package/dist/components/alert/alert.styles.js

@@ -1,9 +1,9 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'typography-body-10 relative mb-4 xsl:flex',
-        icon: 'float-left mr-1 flex-none xsl:mr-2',
-        body: 'relative flex-1 xsl:top-[0.125rem] [&_a]:underline',
+        base: 'typography-body-10 xsl:flex relative mb-4',
+        icon: 'xsl:mr-2 float-left mr-1 flex-none',
+        body: 'xsl:top-[0.125rem] relative flex-1 overflow-hidden [&_a]:underline',
         heading: 'typography-body-9 mb-2 font-bold',
         close: 'absolute right-[0.1875rem] top-[0.1875rem] p-1 hover:opacity-[0.8]'
     },

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

@@ -1,6 +1,4 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './alert.styles.js';
 export type Look = 'info' | 'success' | 'warning' | 'danger' | 'system';
 export type AlertProps = {
     /**
@@ -41,4 +39,4 @@ export type AlertProps = {
      * Tag to render
      */
     tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> & HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

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

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){

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

@@ -5,6 +5,7 @@ import { type VariantProps } from 'tailwind-variants';
 import { FormHintProps } from '../index.js';
 import { styles } from './autocomplete.styles.js';
 import { PopoverProps } from './components/index.js';
+type Variants = VariantProps<typeof styles>;
 export type AutocompleteProps<T extends object> = {
     /**
      * error message
@@ -18,8 +19,21 @@ export type AutocompleteProps<T extends object> = {
      * hint message
      */
     hintMessage?: FormHintProps['children'];
+    /**
+     * Whether autocomplete is invalid
+     */
+    invalid?: Variants['invalid'];
+    /**
+     * Whether autocomplete is disabled
+     */
+    isDisabled?: Variants['isDisabled'];
     /**
      * Element where the popover will be rendered, by default it will be into the body
      */
     portalContainer?: PopoverProps['portalContainer'];
-} & VariantProps<typeof styles> & ComboBoxProps<T> & AriaLabelingProps;
+    /**
+     * Size of autocomplete
+     */
+    size?: Variants['size'];
+} & ComboBoxProps<T> & AriaLabelingProps;
+export {};

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

@@ -4,5 +4,8 @@ interface OptionProps<T = any> {
     item: Node<T>;
     state: ListState<T>;
 }
+/**
+ * @private
+ */
 export declare function Option({ item, state }: OptionProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,2 +1,5 @@
 import { type ListBoxSectionProps } from './list-box-section.types.js';
+/**
+ * @private
+ */
 export declare function ListBoxSection({ section, state }: ListBoxSectionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,5 @@
 import { ListBoxProps } from './list-box.types.js';
+/**
+ * @private
+ */
 export declare function ListBox(props: ListBoxProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,5 @@
 import { PopoverProps } from './popover.types.js';
+/**
+ * @private
+ */
 export declare function Popover(props: PopoverProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,53 +2,11 @@ import React from 'react';
 import { type BadgeProps } from './badge.types.js';
 export declare function BaseBadge({ className, tag: Tag, color, type, children, ...props }: BadgeProps, ref: any): import("react/jsx-runtime").JSX.Element;
 export declare const Badge: React.ForwardRefExoticComponent<{
+    color?: "primary" | "hero" | "faint" | "success" | "info" | "warning" | "danger" | "neutral" | "danger-inverted" | "faint-inverted" | "hero-inverted" | "info-inverted" | "neutral-inverted" | "primary-inverted" | "success-inverted" | "warning-inverted" | {
+        [x: string]: "primary" | "hero" | "faint" | "success" | "info" | "warning" | "danger" | "neutral" | "danger-inverted" | "faint-inverted" | "hero-inverted" | "info-inverted" | "neutral-inverted" | "primary-inverted" | "success-inverted" | "warning-inverted" | undefined;
+    } | undefined;
     tag?: keyof JSX.IntrinsicElements | undefined;
-} & import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
-    color: {
-        danger: string;
-        faint: string;
-        hero: string;
-        info: string;
-        neutral: string;
-        primary: string;
-        success: string;
-        warning: string;
-        'danger-inverted': string;
-        'faint-inverted': string;
-        'hero-inverted': string;
-        'info-inverted': string;
-        'neutral-inverted': string;
-        'primary-inverted': string;
-        'success-inverted': string;
-        'warning-inverted': string;
-    };
-    type: {
-        pill: string;
-        default: string;
-    };
-}, undefined, "inline-block whitespace-nowrap border text-center leading-none", {
-    responsiveVariants: string[];
-}, {
-    color: {
-        danger: string;
-        faint: string;
-        hero: string;
-        info: string;
-        neutral: string;
-        primary: string;
-        success: string;
-        warning: string;
-        'danger-inverted': string;
-        'faint-inverted': string;
-        'hero-inverted': string;
-        'info-inverted': string;
-        'neutral-inverted': string;
-        'primary-inverted': string;
-        'success-inverted': string;
-        'warning-inverted': string;
-    };
-    type: {
-        pill: string;
-        default: string;
-    };
-}, undefined>> & Omit<React.HTMLAttributes<Element>, "color" | "type"> & React.RefAttributes<any>>;
+    type?: "default" | "pill" | {
+        [x: string]: "default" | "pill" | undefined;
+    } | undefined;
+} & Omit<React.HTMLAttributes<Element>, "color" | "type"> & React.RefAttributes<any>>;

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

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){