@westpac/ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,35 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    title: string;
+    close: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    title: string;
+    close: string;
+}>;

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

@@ -0,0 +1,29 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'relative mx-auto max-w-full overflow-hidden rounded-[0.1875rem] bg-white focus:focus-outline',
+        title: 'border-b border-b-heading pb-2 pl-4 pr-5 pt-3 text-lg font-medium',
+        close: 'absolute right-1 top-1 block p-1 focus:focus-outline'
+    },
+    variants: {
+        size: {
+            lg: {
+                base: 'w-[56.25rem]'
+            },
+            md: {
+                base: 'w-[37.5rem]'
+            },
+            sm: {
+                base: 'w-[18.75rem]'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,26 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type AriaDialogProps } from 'react-aria';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './dialog.styles.js';
+export type DialogProps = {
+    /**
+     * Boolean to wrap all children into a Modal.Body
+     */
+    body?: boolean;
+    /**
+     * Inner part of Dialog
+     */
+    children: React.ReactNode;
+    /**
+     * Additional className for Dialog
+     */
+    className?: string;
+    /**
+     * onClose callback
+     */
+    onClose?: () => any;
+    /**
+     * Title for Modal
+     */
+    title?: string;
+} & VariantProps<typeof styles> & AriaDialogProps;

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

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

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

@@ -0,0 +1,2 @@
+export { Dialog } from './dialog.component.js';
+export { type DialogProps } from './dialog.types.js';

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

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

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

@@ -0,0 +1,2 @@
+export * from './backdrop/index.js';
+export * from './dialog/index.js';

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

@@ -0,0 +1,2 @@
+export * from './backdrop/index.js';
+export * from './dialog/index.js';

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

@@ -0,0 +1,2 @@
+export { Modal } from './modal.component.js';
+export { type ModalProps } from './modal.types.js';

package/dist/components/modal/index.js

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

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

@@ -0,0 +1,7 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type ModalProps } from './modal.types.js';
+export declare function Modal({ children, title, role, body, size, ...props }: ModalProps): JSX.Element;
+export declare namespace Modal {
+    var Footer: typeof import("./components/dialog/components/dialog-footer/dialog-footer.component.js").DialogFooter;
+    var Body: typeof import("./components/dialog/components/dialog-body/dialog-body.component.js").DialogBody;
+}

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

@@ -0,0 +1,27 @@
+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 { Backdrop, Dialog } from './components/index.js';
+export function Modal({ children , title , role , body , size , ...props }) {
+    return React.createElement(Backdrop, _extends({}, props), React.createElement(Dialog, {
+        onClose: props.isDismissable ? props.state.close : undefined,
+        title: title,
+        role: role,
+        body: body,
+        size: size
+    }, children));
+}
+Modal.Footer = Dialog.Footer;
+Modal.Body = Dialog.Body;

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

@@ -0,0 +1,21 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Modal } from './modal.component.js';
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > WithFooter usage example
+ */
+export declare const WithFooterStory: Story;
+/**
+ * > All sizes usage example
+ */
+export declare const AllSizesStory: Story;
+/**
+ * > Not dismissable example
+ */
+export declare const NotDismissibleStory: Story;

package/dist/components/modal/modal.stories.js

@@ -0,0 +1,132 @@
+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 { Fragment, useMemo } from 'react';
+import { useOverlayTriggerState } from 'react-stately';
+import { Button } from '../index.js';
+import { Modal } from './modal.component.js';
+const meta = {
+    title: 'Example/Modal',
+    component: Modal,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement(Story, null)
+    ],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {
+        children: `
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
+    `,
+        title: 'Title',
+        isDismissable: true
+    },
+    render: ({ children , ...props })=>{
+        const state = useOverlayTriggerState({});
+        return React.createElement(React.Fragment, null, React.createElement(Modal, _extends({}, props, {
+            state: state,
+            "aria-label": "Modal title",
+            body: true
+        }), children), React.createElement(Button, {
+            onClick: state.open
+        }, "Open Modal"));
+    }
+};
+export const WithFooterStory = {
+    args: {
+        children: `I'm children`,
+        title: 'Title',
+        isDismissable: true
+    },
+    render: ({ children , ...props })=>{
+        const state = useOverlayTriggerState({});
+        return React.createElement(React.Fragment, null, React.createElement(Modal, _extends({}, props, {
+            state: state,
+            "aria-label": "Modal title"
+        }), React.createElement(Modal.Body, null, children), React.createElement(Modal.Footer, null, React.createElement("p", null, "Lorem, ipsum dolor"))), React.createElement(Button, {
+            onClick: state.open
+        }, "Open Modal"));
+    }
+};
+export const AllSizesStory = {
+    args: {
+        children: `I'm children`,
+        title: 'Title',
+        isDismissable: true
+    },
+    render: ({ children , ...props })=>{
+        const stateSM = useOverlayTriggerState({});
+        const stateMD = useOverlayTriggerState({});
+        const stateLG = useOverlayTriggerState({});
+        const states = useMemo(()=>{
+            return {
+                sm: stateSM,
+                md: stateMD,
+                lg: stateLG
+            };
+        }, [
+            stateSM,
+            stateMD,
+            stateLG
+        ]);
+        return React.createElement("div", {
+            className: "flex gap-2"
+        }, [
+            'sm',
+            'md',
+            'lg'
+        ].map((size)=>React.createElement(Fragment, {
+                key: size
+            }, React.createElement(Modal, _extends({}, props, {
+                size: size,
+                state: states[size],
+                title: `Modal ${size}`
+            }), React.createElement(Modal.Body, null, children), React.createElement(Modal.Footer, null, React.createElement("p", null, "Lorem, ipsum dolor"))), React.createElement(Button, {
+                onClick: states[size].open
+            }, "Open Modal ", size))));
+    }
+};
+export const NotDismissibleStory = {
+    args: {
+        children: `I'm children`,
+        title: 'Title',
+        isDismissable: false
+    },
+    render: ({ children , ...props })=>{
+        const state = useOverlayTriggerState({});
+        return React.createElement(React.Fragment, null, React.createElement(Modal, _extends({}, props, {
+            state: state,
+            "aria-label": "Modal title"
+        }), React.createElement(Modal.Body, null, children), React.createElement(Modal.Footer, {
+            className: "flex justify-end gap-2"
+        }, React.createElement(Button, {
+            look: "faint",
+            onClick: state.close
+        }, "Close"), React.createElement(Button, {
+            look: "primary"
+        }, "Submit"))), React.createElement(Button, {
+            onClick: state.open
+        }, "Open Modal"));
+    }
+};

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

@@ -0,0 +1,2 @@
+import { type BackdropProps, DialogProps } from './components/index.js';
+export type ModalProps = BackdropProps & DialogProps;

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

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

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

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

package/dist/components/pagination/components/index.js

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

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

@@ -0,0 +1,2 @@
+export { PaginationItem } from './pagination-item.component.js';
+export { type PaginationItemProps } from './pagination-item.types.js';

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

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type PaginationItemProps } from './pagination-item.types.js';
+export declare function PaginationItem({ className, firstItem, tag: Tag, children, active, disabled, ...props }: PaginationItemProps): JSX.Element;

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

@@ -0,0 +1,29 @@
+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 './pagination-item.styles.js';
+export function PaginationItem({ className , firstItem =false , tag: Tag = 'a' , children , active , disabled =false , ...props }) {
+    return React.createElement(Tag, _extends({
+        className: styles({
+            className,
+            firstItem,
+            active,
+            disabled
+        })
+    }, props, {
+        disabled: disabled,
+        "aria-current": active ? 'page' : undefined
+    }), children);
+}

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

@@ -0,0 +1,29 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    firstItem: {
+        true: string;
+        false: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, "typography-body-10 block border-l border-border px-2 py-[0.5625rem] text-center text-text transition-colors", {
+    responsiveVariants: string[];
+}, {
+    firstItem: {
+        true: string;
+        false: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined>;

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

@@ -0,0 +1,26 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'typography-body-10 block border-l border-border px-2 py-[0.5625rem] text-center text-text transition-colors',
+    variants: {
+        firstItem: {
+            true: 'border-l-0',
+            false: ''
+        },
+        active: {
+            true: 'bg-hero text-white',
+            false: 'hover:bg-light'
+        },
+        disabled: {
+            true: 'cursor-not-allowed bg-light text-muted-90',
+            false: 'cursor-pointer'
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,9 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './pagination-item.styles.js';
+export type PaginationItemProps = {
+    /**
+     * Link component to render
+     */
+    tag?: 'a' | 'button' | ((...args: any[]) => ReactElement | null);
+} & VariantProps<typeof styles> & (AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>);

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

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

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

@@ -0,0 +1,2 @@
+export { Pagination } from './pagination.component.js';
+export { type PaginationProps } from './pagination.types.js';

package/dist/components/pagination/index.js

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type PaginationProps } from './pagination.types.js';
+export declare function Pagination({ className, pages, tag: Tag, role, current, linkComponent, infinite, onChange, backLabel, nextLabel, ...props }: PaginationProps): JSX.Element;

package/dist/components/pagination/pagination.component.js

@@ -0,0 +1,131 @@
+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, useMemo } from 'react';
+import { PaginationItem } from './components/index.js';
+import { styles as paginationStyles } from './pagination.styles.js';
+export function Pagination({ className , pages , tag: Tag = 'nav' , role ='navigation' , current , linkComponent , infinite =false , onChange , backLabel ='Back' , nextLabel ='Next' , ...props }) {
+    const styles = paginationStyles({});
+    const generateHandleOnClickBackwards = useCallback((current, infinite, forwardOnly, onChange, pages)=>()=>{
+            if (infinite && forwardOnly) {
+                return onChange(pages.length);
+            }
+            if (!forwardOnly) {
+                return onChange(current - 1);
+            }
+        }, []);
+    const paginationBackProps = useMemo(()=>{
+        var _pages_;
+        const fowardOnly = (current || 1) <= 1;
+        const defaultBackProps = {
+            disabled: !infinite && fowardOnly,
+            firstItem: true
+        };
+        if (defaultBackProps.disabled) {
+            return {
+                ...defaultBackProps,
+                tag: 'button'
+            };
+        }
+        if (onChange) {
+            return {
+                ...defaultBackProps,
+                tag: linkComponent || 'button',
+                ...current && {
+                    onClick: generateHandleOnClickBackwards(current, infinite, fowardOnly, onChange, pages)
+                }
+            };
+        }
+        return {
+            ...defaultBackProps,
+            tag: linkComponent || 'a',
+            href: fowardOnly ? pages[pages.length - 1].href : (_pages_ = pages[(current || 0) - 2]) === null || _pages_ === void 0 ? void 0 : _pages_.href
+        };
+    }, [
+        current,
+        onChange,
+        linkComponent,
+        pages,
+        infinite
+    ]);
+    const generateHandleOnClickForward = useCallback((current, infinite, backwardsOnly, onChange)=>()=>{
+            if (infinite && backwardsOnly) {
+                return onChange(1);
+            }
+            if (backwardsOnly) {
+                return;
+            }
+            return onChange(current + 1);
+        }, []);
+    const paginationNextProps = useMemo(()=>{
+        var _pages_;
+        const backwardsOnly = (current || 1) >= pages.length;
+        const defaultNextProps = {
+            disabled: !infinite && backwardsOnly,
+            tag: linkComponent
+        };
+        if (defaultNextProps.disabled) {
+            return {
+                ...defaultNextProps,
+                tag: 'button'
+            };
+        }
+        if (onChange) {
+            return {
+                ...defaultNextProps,
+                tag: linkComponent || 'button',
+                ...current && {
+                    onClick: generateHandleOnClickForward(current, infinite, backwardsOnly, onChange)
+                }
+            };
+        }
+        return {
+            ...defaultNextProps,
+            tag: linkComponent || 'a',
+            href: backwardsOnly ? pages[0].href : (_pages_ = pages[current || 0]) === null || _pages_ === void 0 ? void 0 : _pages_.href
+        };
+    }, [
+        current,
+        onChange,
+        linkComponent,
+        pages,
+        infinite
+    ]);
+    return React.createElement(Tag, _extends({
+        className: styles.base({
+            className
+        }),
+        role: role
+    }, props), React.createElement("ul", {
+        className: styles.ul({})
+    }, React.createElement("li", null, React.createElement(PaginationItem, _extends({}, paginationBackProps), backLabel)), pages.map((page, index)=>{
+        const commonProps = {
+            active: (current || 0) === index + 1
+        };
+        return React.createElement("li", {
+            key: index
+        }, 'href' in page ? React.createElement(PaginationItem, _extends({}, commonProps, {
+            tag: linkComponent || 'a',
+            href: page.href
+        }), page.text) : React.createElement(PaginationItem, _extends({}, commonProps, {
+            tag: linkComponent || 'button',
+            onClick: onChange && (()=>{
+                onChange(index + 1);
+            })
+        }), page.text));
+    }), React.createElement("li", null, React.createElement(PaginationItem, _extends({}, paginationNextProps), nextLabel))), current && React.createElement("span", {
+        className: "sr-only",
+        role: "status"
+    }, "Page ", current));
+}

package/dist/components/pagination/pagination.hooks.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type PaginationHookProps } from './pagination.types.js';
+export declare const usePagination: ({ defaultCurrent, pages, infinite }: PaginationHookProps) => {
+    selectedPage: Omit<import("./pagination.types.js").PageProps, "href"> & {
+        href?: string | undefined;
+    };
+    currentPage: number;
+    setCurrentPage: import("react").Dispatch<import("react").SetStateAction<number>>;
+    next: () => void;
+    previous: () => void;
+    pages: (Omit<import("./pagination.types.js").PageProps, "href"> & {
+        href?: string | undefined;
+    })[];
+};

package/dist/components/pagination/pagination.hooks.js

@@ -0,0 +1,40 @@
+import { useCallback, useMemo, useState } from 'react';
+export const usePagination = ({ defaultCurrent =1 , pages , infinite =false  })=>{
+    const [currentPage, setCurrentPage] = useState(defaultCurrent);
+    const next = useCallback(()=>{
+        setCurrentPage((currentPage)=>{
+            const cannotGoForward = currentPage >= pages.length;
+            if (infinite && cannotGoForward) {
+                return 1;
+            }
+            return cannotGoForward ? currentPage : currentPage + 1;
+        });
+    }, [
+        pages
+    ]);
+    const previous = useCallback(()=>{
+        setCurrentPage((currentPage)=>{
+            const cannotGoBackwards = currentPage <= 1;
+            if (infinite && cannotGoBackwards) {
+                return pages.length;
+            }
+            return cannotGoBackwards ? currentPage : currentPage - 1;
+        });
+    }, [
+        pages
+    ]);
+    const selectedPage = useMemo(()=>{
+        return pages[currentPage - 1];
+    }, [
+        pages,
+        currentPage
+    ]);
+    return {
+        selectedPage,
+        currentPage,
+        setCurrentPage,
+        next,
+        previous,
+        pages
+    };
+};