@westpac/ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,58 @@
+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 { useAccordion } from '@react-aria/accordion';
+import { filterDOMProps } from '@react-aria/utils';
+import { useDOMRef } from '@react-spectrum/utils';
+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) {
+    const finalProps = {
+        ...props,
+        children: Children.map(props.children, (child)=>{
+            if (!isValidElement(child)) return child;
+            return cloneElement(child, {
+                ...child.props,
+                hasChildItems: false
+            });
+        })
+    };
+    const state = useTreeState(finalProps);
+    const domRef = useDOMRef(ref);
+    const { accordionProps  } = useAccordion(finalProps, state, domRef);
+    return React.createElement("div", _extends({}, filterDOMProps(finalProps), accordionProps, {
+        ref: domRef,
+        className: styles({
+            className,
+            rounded,
+            look
+        })
+    }), React.createElement("div", {
+        className: "mt-[-1px]"
+    }, [
+        ...state.collection
+    ].map((item)=>React.createElement(AccordionItem, {
+            key: item.key,
+            item: item,
+            state: state,
+            color: color,
+            look: look
+        }))));
+}
+const _Accordion = forwardRef(Accordion);
+_Accordion.displayName = 'Accordion';
+_Accordion.Item = Item;
+export { _Accordion as Accordion };

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

@@ -0,0 +1,25 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Accordion } from './accordion.component.js';
+declare const meta: Meta<typeof Accordion>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Primary color usage example
+ */
+export declare const PrimaryColorStory: Story;
+/**
+ * > Hero color usage example
+ */
+export declare const HeroColorStory: Story;
+/**
+ * > Hero color usage example
+ */
+export declare const MaterialLookStory: Story;
+/**
+ * > Controlled example
+ */
+export declare const ControlledColorStory: Story;

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

@@ -0,0 +1,156 @@
+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 { useState } from 'react';
+import { Button } from '../index.js';
+import { Accordion } from './accordion.component.js';
+const meta = {
+    title: 'Example/Accordion',
+    component: Accordion,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "p-3"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'center'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {
+        rounded: true,
+        color: undefined,
+        children: [
+            {
+                key: 'files',
+                title: 'My files'
+            },
+            {
+                key: 'shared',
+                title: 'Shared with us'
+            },
+            {
+                key: 'last',
+                title: 'Last item'
+            }
+        ].map(({ key , title  })=>React.createElement(Accordion.Item, {
+                key: key,
+                title: title
+            }, 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 PrimaryColorStory = {
+    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 HeroColorStory = {
+    args: {
+        color: 'hero',
+        rounded: false
+    },
+    render: ({ ...props })=>React.createElement(Accordion, _extends({}, props), [
+            {
+                key: 'files',
+                title: 'My files'
+            },
+            {
+                key: 'shared',
+                title: 'my shared with you'
+            },
+            {
+                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 MaterialLookStory = {
+    args: {
+        look: 'material',
+        rounded: false
+    },
+    render: ({ ...props })=>React.createElement(Accordion, _extends({}, props), [
+            {
+                key: 'files',
+                title: 'Your files'
+            },
+            {
+                key: 'shared',
+                title: 'Shared with you'
+            },
+            {
+                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 ControlledColorStory = {
+    args: {
+        color: 'hero',
+        rounded: false
+    },
+    render: ({ ...props })=>{
+        const [expandedKeys, setExpandedKeys] = useState();
+        return React.createElement(Accordion, _extends({}, props, {
+            expandedKeys: expandedKeys,
+            onExpandedChange: (keys)=>{
+                setExpandedKeys(keys);
+            }
+        }), [
+            {
+                key: 'files',
+                title: 'Your files'
+            },
+            {
+                key: 'shared',
+                title: 'Shared with you'
+            },
+            {
+                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"))));
+    }
+};

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

@@ -0,0 +1,19 @@
+export declare const styles: 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>;

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

@@ -0,0 +1,21 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'flex flex-col',
+    variants: {
+        rounded: {
+            true: 'overflow-hidden rounded'
+        },
+        look: {
+            material: '',
+            default: 'border border-border'
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,15 @@
+import { SpectrumAccordionProps } from '@react-types/accordion';
+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'];
+    /**
+     * Stretch the tab to fill the whole content
+     */
+    justify?: boolean;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;

package/dist/components/accordion/accordion.types.js

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type AccordionItemProps } from './accordion-item.types.js';
+export declare function AccordionItem<T = any>({ className, tag: Tag, color, look, ...props }: AccordionItemProps<T>): JSX.Element;

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

@@ -0,0 +1,77 @@
+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 { useAccordionItem } from '@react-aria/accordion';
+import { AnimatePresence, LazyMotion, m } from 'framer-motion';
+import React, { useRef } from 'react';
+import { mergeProps, useHover, useLocale } from 'react-aria';
+import { ArrowLeftIcon, ArrowRightIcon } from '../../../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 }) {
+    const ref = useRef(null);
+    const { state , item  } = props;
+    const { buttonProps , regionProps  } = useAccordionItem(props, state, ref);
+    const isOpen = state.expandedKeys.has(item.key);
+    const isDisabled = state.disabledKeys.has(item.key);
+    const { hoverProps  } = useHover({
+        isDisabled
+    });
+    const { direction  } = useLocale();
+    const styles = accordionItemStyles({
+        isOpen,
+        isDisabled,
+        className,
+        color,
+        look
+    });
+    return React.createElement(Tag, {
+        className: styles.base()
+    }, React.createElement("h3", null, React.createElement("button", _extends({}, mergeProps(buttonProps, hoverProps), {
+        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, {
+        "aria-hidden": "true",
+        className: styles.indicator()
+    }) : React.createElement(ArrowLeftIcon, {
+        "aria-hidden": "true",
+        className: styles.indicator()
+    })))), React.createElement("div", _extends({}, regionProps), React.createElement(LazyMotion, {
+        features: loadAnimations
+    }, React.createElement(AnimatePresence, {
+        initial: false
+    }, isOpen && React.createElement(m.div, {
+        initial: {
+            height: 0,
+            opacity: 0
+        },
+        animate: {
+            height: 'auto',
+            opacity: 1
+        },
+        exit: {
+            height: 0,
+            opacity: 0
+        },
+        transition: {
+            duration: 0.2,
+            ease: 'easeInOut'
+        }
+    }, React.createElement("div", {
+        className: styles.content()
+    }, item.props.children))))));
+}

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

@@ -0,0 +1,75 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    look: {
+        material: {
+            itemHeader: string;
+            indicator: string;
+        };
+        default: {
+            itemHeader: string;
+            indicator: string;
+        };
+    };
+    color: {
+        hero: {
+            itemHeader: string;
+        };
+        primary: {
+            itemHeader: string;
+        };
+    };
+    isOpen: {
+        true: {
+            content: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string;
+    itemHeader: string;
+    indicator: string;
+    content: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    look: {
+        material: {
+            itemHeader: string;
+            indicator: string;
+        };
+        default: {
+            itemHeader: string;
+            indicator: string;
+        };
+    };
+    color: {
+        hero: {
+            itemHeader: string;
+        };
+        primary: {
+            itemHeader: string;
+        };
+    };
+    isOpen: {
+        true: {
+            content: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string;
+    itemHeader: string;
+    indicator: string;
+    content: string;
+}>;

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

@@ -0,0 +1,97 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: '',
+        itemHeader: 'typography-body-9 flex w-full items-center justify-between px-3 py-2 focus:focus-outline',
+        indicator: '',
+        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'
+            },
+            default: {
+                itemHeader: 'border-t border-border bg-light',
+                indicator: 'h-3 w-3 -rotate-90 transition-transform'
+            }
+        },
+        color: {
+            hero: {
+                itemHeader: 'border-l-5 border-l-border transition-colors'
+            },
+            primary: {
+                itemHeader: 'border-l-5 border-l-border transition-colors'
+            }
+        },
+        isOpen: {
+            true: {
+                content: 'block border-t border-border p-3'
+            },
+            false: {
+                base: ''
+            }
+        },
+        isDisabled: {
+            true: '',
+            false: ''
+        }
+    },
+    compoundSlots: [
+        {
+            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',
+            isOpen: true,
+            className: 'border-l-hero'
+        },
+        {
+            slots: [
+                'content'
+            ],
+            color: 'hero',
+            className: 'border-l-5 border-l-border'
+        },
+        {
+            slots: [
+                'content'
+            ],
+            color: 'primary',
+            className: 'border-l-5 border-l-border'
+        }
+    ]
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'react';
+import { Node, TreeState } from 'react-stately';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './accordion-item.styles.js';
+export type AccordionItemProps<T = any> = {
+    /**
+     * Node from react-stately
+     */
+    item: Node<T>;
+    /**
+     * Tree state
+     */
+    state: TreeState<T>;
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> & HTMLAttributes<Element>;

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+export { AccordionItem } from './accordion-item.component.js';
+export { type AccordionItemProps } from './accordion-item.types.js';

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

@@ -0,0 +1 @@
+export { AccordionItem } from './accordion-item.component.js';

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

@@ -0,0 +1 @@
+export * from './accordion-item/index.js';

package/dist/components/accordion/components/index.js

@@ -0,0 +1 @@
+export * from './accordion-item/index.js';

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

@@ -0,0 +1,2 @@
+export { Accordion } from './accordion.component.js';
+export { type AccordionProps } from './accordion.types.js';

package/dist/components/accordion/index.js

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type AlertProps } from './alert.types.js';
+export declare function Alert({ look, mode, heading, headingTag: HeadingTag, dismissible, open: isOpen, onClose, icon, tag: Tag, className, children, ...props }: AlertProps): JSX.Element;