@westpac/ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,54 @@
+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, { Children, cloneElement, createContext, useContext } from 'react';
+import { Item } from './components/item/index.js';
+import { styles as listStyles } from './list.styles.js';
+import { getStateValues } from './list.utils.js';
+export const ListContext = createContext({});
+export function List({ assistiveText , className , children , look , nested , icon , type , spacing , ...props }) {
+    const state = useContext(ListContext);
+    const Tag = type === 'ordered' ? 'ol' : 'ul';
+    const stateValues = getStateValues({
+        look,
+        type,
+        spacing,
+        state,
+        icon
+    });
+    if (typeof nested !== 'number') {
+        nested = typeof state.nested === 'number' && state.nested + 1 || 0;
+    }
+    assistiveText = (type === 'tick' || type === 'cross') && nested === 0 ? assistiveText || `The following items are ${type === 'tick' ? 'ticked' : 'crossed'}` : undefined;
+    const styles = listStyles({
+        type: stateValues.type,
+        nested: typeof state.nested === 'number'
+    });
+    return React.createElement(ListContext.Provider, {
+        value: {
+            nested,
+            ...stateValues
+        }
+    }, React.createElement(Tag, _extends({
+        className: styles.base({
+            className
+        })
+    }, props, {
+        role: "list",
+        "aria-label": assistiveText
+    }), Children.map(children, (child, index)=>cloneElement(child, {
+            key: index
+        }))));
+}
+List.Item = Item;

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

@@ -0,0 +1,26 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Meta, type StoryObj } from '@storybook/react';
+import { List } from './list.component.js';
+declare const meta: Meta<typeof List>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Type of list
+ */
+export declare const ListTypes: () => JSX.Element[];
+/**
+ * > Type of list
+ */
+export declare const ListLooks: () => JSX.Element[];
+/**
+ * Nested list
+ */
+export declare const NestedList: () => JSX.Element;
+/**
+ * List spacing
+ */
+export declare const ListSpacing: () => JSX.Element;

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

@@ -0,0 +1,85 @@
+import { AndroidIcon } from '../icon/index.js';
+import { List } from './list.component.js';
+const meta = {
+    title: 'Example/List',
+    component: List,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "p-2"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'center'
+    }
+};
+export default meta;
+const LOOKS = [
+    'primary',
+    'hero',
+    'neutral',
+    'success',
+    'danger',
+    'link'
+];
+const TYPES = [
+    'bullet',
+    'link',
+    'tick',
+    'cross',
+    'unstyled',
+    'icon',
+    'ordered'
+];
+export const DefaultStory = {
+    args: {
+        children: [
+            React.createElement(List.Item, null, "Styled list"),
+            React.createElement(List.Item, null, "Styled list"),
+            React.createElement(List.Item, null, "Styled list")
+        ]
+    }
+};
+export const ListTypes = ()=>TYPES.map((type)=>React.createElement("div", {
+            className: "mb-2",
+            key: type
+        }, React.createElement("h1", {
+            className: "typography-body-8"
+        }, 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, {
+            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", {
+            className: "mb-2",
+            key: look
+        }, React.createElement("h1", {
+            className: "typography-body-8"
+        }, look), React.createElement(List, {
+            look: look,
+            type: "bullet"
+        }, React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List, {
+            icon: look === 'link' ? AndroidIcon : undefined
+        }, React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List.Item, null, "Styled ", look, " list")), React.createElement(List.Item, null, "Styled ", look, " list"))));
+export const NestedList = ()=>React.createElement("div", null, React.createElement(List, {
+        type: "bullet",
+        assistiveText: "test"
+    }, React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List, null, React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List, {
+        nested: 0
+    }, React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List, null, React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"))))));
+export const ListSpacing = ()=>React.createElement("div", null, React.createElement("h1", {
+        className: "typography-body-10 mb-2"
+    }, "Medium"), React.createElement(List, {
+        type: "bullet",
+        className: "mb-4",
+        spacing: "medium"
+    }, React.createElement(List.Item, null, "Styled bullet list"), React.createElement(List.Item, null, "Styled bullet list"), React.createElement(List.Item, null, "Styled bullet list")), React.createElement("h1", {
+        className: "typography-body-10 mb-2"
+    }, "Large"), React.createElement(List, {
+        type: "bullet",
+        className: "mb-4",
+        spacing: "large"
+    }, React.createElement(List.Item, null, "Styled bullet list"), React.createElement(List.Item, null, "Styled bullet list"), React.createElement(List.Item, null, "Styled bullet list")));

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

@@ -0,0 +1,41 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    type: {
+        bullet: {};
+        link: {};
+        tick: {};
+        cross: {};
+        unstyled: {};
+        icon: {};
+        ordered: {
+            base: string;
+        };
+    };
+    nested: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    type: {
+        bullet: {};
+        link: {};
+        tick: {};
+        cross: {};
+        unstyled: {};
+        icon: {};
+        ordered: {
+            base: string;
+        };
+    };
+    nested: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}>;

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

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'typography-body-10 list-none'
+    },
+    variants: {
+        type: {
+            bullet: {},
+            link: {},
+            tick: {},
+            cross: {},
+            unstyled: {},
+            icon: {},
+            ordered: {
+                base: 'list-inside list-decimal'
+            }
+        },
+        nested: {
+            true: {
+                base: 'pl-4'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,78 @@
+import { HTMLAttributes } from 'react';
+import { IconProps } from '../icon/index.js';
+export type ListProps = {
+    /**
+     * Visually hidden text to use for the tick or cross list.
+     *
+     * Tick list default value: "The following items are ticked"
+     */
+    assistiveText?: string;
+    /**
+     * The icon for list
+     */
+    icon?: (props: IconProps) => JSX.Element;
+    /**
+     * The look of the bullet, icon, tick and cross lists
+     */
+    look?: 'primary' | 'hero' | 'neutral' | 'success' | 'danger' | 'link';
+    /**
+     * The level of nesting
+     */
+    nested?: number;
+    /**
+     * The size of space between list elements
+     */
+    spacing?: 'medium' | 'large';
+    /**
+     * The type of the bullet
+     */
+    type?: 'bullet' | 'link' | 'tick' | 'cross' | 'unstyled' | 'icon' | 'ordered';
+} & HTMLAttributes<Element>;
+export type ListContextState = {
+    /**
+     * The icon for list
+     */
+    icon?: (props: IconProps) => JSX.Element;
+    /**
+     * The look of the bullet, icon, tick and cross lists
+     */
+    look?: 'primary' | 'hero' | 'neutral' | 'success' | 'danger' | 'link';
+    /**
+     * The level of nesting
+     */
+    nested?: number;
+    /**
+     * The size of space between list elements
+     */
+    spacing?: 'medium' | 'large';
+    /**
+     * The type of the bullet
+     */
+    type?: 'bullet' | 'link' | 'tick' | 'cross' | 'unstyled' | 'icon' | 'ordered';
+};
+export type GetStateValuesProps = {
+    /**
+     * The icon for list
+     */
+    icon?: (props: IconProps) => JSX.Element;
+    /**
+     * The look of the bullet, icon, tick and cross lists
+     */
+    look?: 'primary' | 'hero' | 'neutral' | 'success' | 'danger' | 'link';
+    /**
+     * The level of nesting
+     */
+    nested?: number;
+    /**
+     * The size of space between list elements
+     */
+    spacing?: 'medium' | 'large';
+    /**
+     * List State
+     */
+    state: ListContextState;
+    /**
+     * The type of the bullet
+     */
+    type?: 'bullet' | 'link' | 'tick' | 'cross' | 'unstyled' | 'icon' | 'ordered';
+};

package/dist/components/list/list.types.js

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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" resolution-mode="require"/>
+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";
+    spacing: "medium" | "large";
+    icon: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
+};

package/dist/components/list/list.utils.js

@@ -0,0 +1,14 @@
+export const getStateValues = (props)=>{
+    const { state  } = props;
+    let { type , look , spacing , icon  } = props;
+    type = type || state && state.type || 'bullet';
+    look = look || state && state.look || type === 'link' && 'link' || 'hero';
+    spacing = spacing || state && state.spacing || 'medium';
+    icon = icon || state && state.icon;
+    return {
+        type,
+        look,
+        spacing,
+        icon
+    };
+};

package/dist/components/modal/components/backdrop/backdrop.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type BackdropProps } from './backdrop.types.js';
+export declare function Backdrop({ zIndex, portalContainer, ...props }: BackdropProps): JSX.Element | null;

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

@@ -0,0 +1,39 @@
+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, { useRef } from 'react';
+import { Overlay, useModalOverlay } from 'react-aria';
+import { styles as backdropStyles } from './backdrop.styles.js';
+export function Backdrop({ zIndex =100 , portalContainer , ...props }) {
+    const { children , state , className  } = props;
+    const ref = useRef(null);
+    const styles = backdropStyles({
+        className
+    });
+    const { modalProps , underlayProps  } = useModalOverlay(props, state, ref);
+    if (!state.isOpen) {
+        return null;
+    }
+    return React.createElement(Overlay, {
+        portalContainer: portalContainer
+    }, React.createElement("div", _extends({
+        style: {
+            zIndex
+        },
+        className: styles.base()
+    }, underlayProps), React.createElement("div", _extends({}, modalProps, {
+        ref: ref,
+        className: styles.modal()
+    }), children)));
+}

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

@@ -0,0 +1,20 @@
+export declare const styles: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<{
+    base: string;
+    modal: string;
+}, undefined> | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<{
+            base: string;
+            modal: string;
+        }, undefined>;
+    } | undefined;
+} | {}, {
+    base: string;
+    modal: string;
+}, undefined, TVConfig<V, EV>, import("tailwind-variants").TVVariantsDefault<{
+    base: string;
+    modal: string;
+}, undefined> | {}, {
+    base: string;
+    modal: string;
+}>;

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

@@ -0,0 +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'
+    }
+});

package/dist/components/modal/components/backdrop/backdrop.types.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type AriaModalOverlayProps } from 'react-aria';
+import { type OverlayTriggerState } from 'react-stately';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './backdrop.styles.js';
+export type BackdropProps = {
+    /**
+     * Inner part of backdrop
+     */
+    children: React.ReactNode;
+    /**
+     * Clasname
+     */
+    className?: string;
+    /**
+     * Element where backdrop will be placed
+     */
+    portalContainer?: Element;
+    /**
+     * OverlayTriggerState props
+     */
+    state: OverlayTriggerState;
+    /**
+     * zIndex of content inside
+     */
+    zIndex?: number;
+} & VariantProps<typeof styles> & AriaModalOverlayProps;

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

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

package/dist/components/modal/components/backdrop/index.d.ts

@@ -0,0 +1,2 @@
+export { Backdrop } from './backdrop.component.js';
+export { type BackdropProps } from './backdrop.types.js';

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

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

package/dist/components/modal/components/dialog/components/dialog-body/dialog-body.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type DialogBodyProps } from './dialog-body.types.js';
+export declare function DialogBody({ className, children, ...props }: DialogBodyProps): JSX.Element;

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

@@ -0,0 +1,23 @@
+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 from 'react';
+import { styles } from './dialog-body.styles.js';
+export function DialogBody({ className , children , ...props }) {
+    return React.createElement("div", _extends({
+        className: styles({
+            className
+        })
+    }, props), children);
+}

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

@@ -0,0 +1,5 @@
+export declare const styles: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "px-4 py-3"> | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "px-4 py-3">;
+    } | undefined;
+} | {}, undefined, "px-4 py-3", TVConfig<V, EV>, import("tailwind-variants").TVVariantsDefault<undefined, "px-4 py-3"> | {}, undefined>;

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

@@ -0,0 +1,4 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'px-4 py-3'
+});

package/dist/components/modal/components/dialog/components/dialog-body/dialog-body.types.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './dialog-body.styles.js';
+export type DialogBodyProps = VariantProps<typeof styles> & HTMLAttributes<HTMLElement>;

package/dist/components/modal/components/dialog/components/dialog-body/dialog-body.types.js

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

package/dist/components/modal/components/dialog/components/dialog-body/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dialog-body.component.js';
+export * from './dialog-body.types.js';

package/dist/components/modal/components/dialog/components/dialog-body/index.js

@@ -0,0 +1,2 @@
+export * from './dialog-body.component.js';
+export * from './dialog-body.types.js';

package/dist/components/modal/components/dialog/components/dialog-footer/dialog-footer.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type DialogFooterProps } from './dialog-footer.types.js';
+export declare function DialogFooter({ className, children, ...props }: DialogFooterProps): JSX.Element;

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

@@ -0,0 +1,23 @@
+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 from 'react';
+import { styles } from './dialog-footer.styles.js';
+export function DialogFooter({ className , children , ...props }) {
+    return React.createElement("div", _extends({
+        className: styles({
+            className
+        })
+    }, props), children);
+}

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

@@ -0,0 +1,5 @@
+export declare const styles: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "border-t border-t-border bg-background px-3 py-2"> | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "border-t border-t-border bg-background px-3 py-2">;
+    } | undefined;
+} | {}, undefined, "border-t border-t-border bg-background px-3 py-2", TVConfig<V, EV>, import("tailwind-variants").TVVariantsDefault<undefined, "border-t border-t-border bg-background px-3 py-2"> | {}, undefined>;

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

@@ -0,0 +1,4 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'border-t border-t-border bg-background px-3 py-2'
+});

package/dist/components/modal/components/dialog/components/dialog-footer/dialog-footer.types.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './dialog-footer.styles.js';
+export type DialogFooterProps = VariantProps<typeof styles> & HTMLAttributes<HTMLElement>;

package/dist/components/modal/components/dialog/components/dialog-footer/dialog-footer.types.js

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

package/dist/components/modal/components/dialog/components/dialog-footer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dialog-footer.component.js';
+export * from './dialog-footer.types.js';

package/dist/components/modal/components/dialog/components/dialog-footer/index.js

@@ -0,0 +1,2 @@
+export * from './dialog-footer.component.js';
+export * from './dialog-footer.types.js';

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

@@ -0,0 +1,9 @@
+/// <reference types="react" resolution-mode="require"/>
+import { DialogBody } from './components/dialog-body/index.js';
+import { DialogFooter } from './components/dialog-footer/index.js';
+import { type DialogProps } from './dialog.types.js';
+export declare function Dialog({ className, body, onClose, size, ...props }: DialogProps): JSX.Element;
+export declare namespace Dialog {
+    var Body: typeof DialogBody;
+    var Footer: typeof DialogFooter;
+}

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

@@ -0,0 +1,44 @@
+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, { useRef } from 'react';
+import { useDialog } 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 styles = dialogStyles({
+        className,
+        size
+    });
+    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", {
+        className: styles.close(),
+        onClick: onClose,
+        "aria-label": "Close modal"
+    }, React.createElement(CloseIcon, {
+        className: "block",
+        size: "small"
+    })), props.title && React.createElement("h3", _extends({}, titleProps, {
+        className: styles.title()
+    }), props.title), body ? React.createElement(DialogBody, null, children) : children);
+}
+Dialog.Body = DialogBody;
+Dialog.Footer = DialogFooter;