@westpac/ui 0.1.0 → 0.2.0

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

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

package/dist/components/badge/badge.styles.js

@@ -0,0 +1,36 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'inline-block whitespace-nowrap text-center leading-none',
+    variants: {
+        color: {
+            danger: 'bg-danger text-white',
+            faint: 'border border-border bg-white text-muted',
+            hero: 'bg-hero text-white',
+            info: 'bg-info text-white',
+            neutral: 'bg-neutral text-white',
+            primary: 'bg-primary text-white',
+            success: 'bg-success text-white',
+            warning: 'bg-warning text-white',
+            'danger-inverted': 'bg-white text-danger',
+            'faint-inverted': 'bg-white text-muted',
+            'hero-inverted': 'bg-white text-hero',
+            'info-inverted': 'bg-white text-info',
+            'neutral-inverted': 'bg-white text-neutral',
+            'primary-inverted': 'bg-white text-primary',
+            'success-inverted': 'bg-white text-success',
+            'warning-inverted': 'bg-white text-warning'
+        },
+        type: {
+            pill: 'typography-body-10 rounded-xl px-[0.4375rem] py-[0.25rem] font-bold leading-none',
+            default: 'rounded-sm px-1 py-[0.1875rem] pb-[0.125rem] text-[0.75rem] leading-none'
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './badge.styles.js';
+export type BadgeProps = {
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> & Omit<HTMLAttributes<Element>, 'color' | 'type'>;

package/dist/components/badge/badge.types.js

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

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

@@ -0,0 +1,2 @@
+export { Badge } from './badge.component.js';
+export { type BadgeProps } from './badge.types.js';

package/dist/components/badge/index.js

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

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type BreadcrumbProps } from './breadcrumb.types.js';
+export declare function Breadcrumb({ className, children, ...props }: BreadcrumbProps): JSX.Element;
+export declare namespace Breadcrumb {
+    var Item: React.ForwardRefExoticComponent<{
+        isCurrent?: boolean | undefined;
+        isDisabled?: boolean | undefined;
+        tag?: keyof JSX.IntrinsicElements | undefined;
+    } & import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
+        isCurrent: {
+            true: string;
+            false: string;
+        };
+        isDisabled: {
+            true: string;
+            false: string;
+        };
+    }, undefined, "text-[0.8125rem]", {
+        responsiveVariants: string[];
+    }, {
+        isCurrent: {
+            true: string;
+            false: string;
+        };
+        isDisabled: {
+            true: string;
+            false: string;
+        };
+    }, undefined>> & React.AnchorHTMLAttributes<Element> & React.RefAttributes<any>>;
+}

package/dist/components/breadcrumb/breadcrumb.component.js

@@ -0,0 +1,30 @@
+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 } from 'react';
+import { useBreadcrumbs } from 'react-aria';
+import { BreadcrumbItem } from './components/breadcrumb-item/breadcrumb-item.component.js';
+export function Breadcrumb({ className , children , ...props }) {
+    const { navProps  } = useBreadcrumbs(props);
+    const childCount = Children.count(children);
+    var _cloneElement;
+    return React.createElement("nav", _extends({
+        className: className
+    }, navProps), React.createElement("ol", {
+        className: "m-0 flex list-none p-0"
+    }, Children.map(children, (child, i)=>(_cloneElement = cloneElement(child, {
+            isCurrent: i === childCount - 1
+        })) !== null && _cloneElement !== void 0 ? _cloneElement : React.createElement(React.Fragment, null))));
+}
+Breadcrumb.Item = BreadcrumbItem;

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

@@ -0,0 +1,9 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Breadcrumb } from './breadcrumb.component.js';
+declare const meta: Meta<typeof Breadcrumb>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;

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

@@ -0,0 +1,47 @@
+import { Breadcrumb } from './breadcrumb.component.js';
+const meta = {
+    title: 'Example/Breadcrumb',
+    component: Breadcrumb,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "p-2"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'center'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {
+        children: [
+            React.createElement(Breadcrumb.Item, {
+                tag: "button",
+                onClick: ()=>alert('Folder 1')
+            }, "Button item"),
+            React.createElement(Breadcrumb.Item, {
+                tag: "a",
+                href: "#test"
+            }, "Anchor item"),
+            React.createElement(Breadcrumb.Item, {
+                tag: "span"
+            }, "Span item"),
+            React.createElement(Breadcrumb.Item, {
+                tag: "span",
+                isDisabled: true
+            }, "Span and disabled"),
+            React.createElement(Breadcrumb.Item, {
+                tag: "a",
+                isDisabled: true,
+                href: "#lol"
+            }, "anchor and disabled"),
+            React.createElement(Breadcrumb.Item, {
+                tag: "a",
+                href: "#loko"
+            }, "Last item")
+        ]
+    }
+};

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

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export type BreadcrumbProps = HTMLAttributes<HTMLDivElement>;

package/dist/components/breadcrumb/breadcrumb.types.js

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

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { type BreadcrumbItemProps } from './breadcrumb-item.types.js';
+export declare function BaseBreadcrumbItem({ className, isDisabled, isCurrent, href, children, tag: Tag, ...props }: BreadcrumbItemProps, propRef: any): JSX.Element;
+export declare const BreadcrumbItem: React.ForwardRefExoticComponent<{
+    isCurrent?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    tag?: keyof JSX.IntrinsicElements | undefined;
+} & import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
+    isCurrent: {
+        true: string;
+        false: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, "text-[0.8125rem]", {
+    responsiveVariants: string[];
+}, {
+    isCurrent: {
+        true: string;
+        false: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+}, undefined>> & React.AnchorHTMLAttributes<Element> & React.RefAttributes<any>>;

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

@@ -0,0 +1,50 @@
+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, { forwardRef, useRef } from 'react';
+import { useBreadcrumbItem } from 'react-aria';
+import { ArrowRightIcon } from '../../../index.js';
+import { styles } from './breadcrumb-item.styles.js';
+export function BaseBreadcrumbItem({ className , isDisabled =false , isCurrent =false , href , children , tag: Tag = 'span' , ...props }, propRef) {
+    const ref = useRef(propRef);
+    const FinalTag = Tag === 'a' && isDisabled || Tag === 'a' && isCurrent ? 'span' : Tag;
+    const { itemProps  } = useBreadcrumbItem({
+        ...props,
+        children,
+        isDisabled,
+        isCurrent,
+        elementType: FinalTag
+    }, ref);
+    return React.createElement("li", {
+        className: "inline-flex items-center"
+    }, React.createElement(FinalTag, _extends({}, {
+        ...itemProps,
+        ref: propRef,
+        href: FinalTag === 'a' ? href : undefined
+    }, {
+        className: styles({
+            className,
+            isDisabled,
+            isCurrent
+        })
+    }), children), !isCurrent && React.createElement("span", {
+        "aria-hidden": "true",
+        className: "flex items-center px-[0.1875rem]"
+    }, React.createElement(ArrowRightIcon, {
+        size: "small",
+        className: "inline-block",
+        color: "primary"
+    })));
+}
+export const BreadcrumbItem = forwardRef(BaseBreadcrumbItem);

package/dist/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.stories.d.ts

@@ -0,0 +1,13 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { BreadcrumbItem } from './breadcrumb-item.component.js';
+declare const meta: Meta<typeof BreadcrumbItem>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Disabled
+ */
+export declare const IsDisabledStory: Story;

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

@@ -0,0 +1,29 @@
+import { BreadcrumbItem } from './breadcrumb-item.component.js';
+const meta = {
+    title: 'Example/Breadcrumb/BreadCrumbItem',
+    component: BreadcrumbItem,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "p-2"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'center'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {
+        isDisabled: false,
+        children: 'Default Crumb'
+    }
+};
+export const IsDisabledStory = {
+    args: {
+        isDisabled: true,
+        children: 'Disabled Crumb'
+    }
+};

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

@@ -0,0 +1,21 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    isCurrent: {
+        true: string;
+        false: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, "text-[0.8125rem]", {
+    responsiveVariants: string[];
+}, {
+    isCurrent: {
+        true: string;
+        false: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+}, undefined>;

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

@@ -0,0 +1,29 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'text-[0.8125rem]',
+    variants: {
+        isCurrent: {
+            true: '',
+            false: ''
+        },
+        isDisabled: {
+            true: 'text-muted-100',
+            false: 'text-muted'
+        }
+    },
+    compoundVariants: [
+        {
+            isCurrent: false,
+            isDisabled: false,
+            className: 'cursor-pointer hover:underline'
+        }
+    ]
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,17 @@
+import { AnchorHTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './breadcrumb-item.styles.js';
+export type BreadcrumbItemProps = {
+    /**
+     * isCurrent flag
+     */
+    isCurrent?: boolean;
+    /**
+     * isDisabled flag
+     */
+    isDisabled?: boolean;
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> & AnchorHTMLAttributes<Element>;

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

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

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

@@ -0,0 +1,2 @@
+export { BreadcrumbItem } from './breadcrumb-item.component.js';
+export { type BreadcrumbItemProps } from './breadcrumb-item.types.js';

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

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

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

@@ -0,0 +1,2 @@
+export { Breadcrumb } from './breadcrumb.component.js';
+export { type BreadcrumbProps } from './breadcrumb.types.js';

package/dist/components/breadcrumb/index.js

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

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

@@ -1,38 +1,112 @@
 import React from 'react';
 export declare const Button: React.ForwardRefExoticComponent<{
+    iconAfter?: ((props: import("../index.js").IconProps) => JSX.Element) | undefined;
+    iconBefore?: ((props: import("../index.js").IconProps) => JSX.Element) | undefined;
     tag?: "a" | "button" | "div" | "span" | undefined;
-} & Omit<React.AnchorHTMLAttributes<Element>, "color" | "type"> & import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
+} & React.ButtonHTMLAttributes<Element> & React.AnchorHTMLAttributes<Element> & import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
     size: {
-        small: string;
-        medium: string;
-        large: string;
-        xlarge: string;
-    };
-    color: {
-        hero: string;
-        primary: string;
-        link: string;
-        faint: string;
-        'hero-soft': string;
-        'primary-soft': string;
-        'faint-soft': string;
-    };
-}, undefined, "inline-flex items-center gap-2 rounded transition-colors disabled:pointer-events-none disabled:opacity-50", {
+        small: {
+            base: string;
+        };
+        medium: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+        xlarge: {
+            base: string;
+        };
+    };
+    look: {
+        primary: {
+            base: string;
+        };
+        hero: {
+            base: string;
+        };
+        faint: {
+            base: string;
+        };
+        link: {
+            base: string;
+        };
+    };
+    soft: {
+        true: {
+            base: string;
+        };
+    };
+    block: {
+        true: {
+            base: string;
+        };
+    };
+    justify: {
+        true: {
+            base: string;
+        };
+    };
+    hasChildren: {
+        true: string;
+    };
+}, {
+    base: string;
+    iconBefore: string;
+    iconAfter: string;
+    text: string;
+}, undefined, {
     responsiveVariants: string[];
 }, {
     size: {
-        small: string;
-        medium: string;
-        large: string;
-        xlarge: string;
-    };
-    color: {
-        hero: string;
-        primary: string;
-        link: string;
-        faint: string;
-        'hero-soft': string;
-        'primary-soft': string;
-        'faint-soft': string;
-    };
-}, undefined>> & React.RefAttributes<unknown>>;
+        small: {
+            base: string;
+        };
+        medium: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+        xlarge: {
+            base: string;
+        };
+    };
+    look: {
+        primary: {
+            base: string;
+        };
+        hero: {
+            base: string;
+        };
+        faint: {
+            base: string;
+        };
+        link: {
+            base: string;
+        };
+    };
+    soft: {
+        true: {
+            base: string;
+        };
+    };
+    block: {
+        true: {
+            base: string;
+        };
+    };
+    justify: {
+        true: {
+            base: string;
+        };
+    };
+    hasChildren: {
+        true: string;
+    };
+}, {
+    base: string;
+    iconBefore: string;
+    iconAfter: string;
+    text: string;
+}>> & React.RefAttributes<unknown>>;

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

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