@westpac/ui 0.2.1 → 0.4.0

package/dist/components/flexi-cell/flexi-cell.styles.d.ts

@@ -0,0 +1,37 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    withBorder: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isLink: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    bodyWrapper: string;
+    badge: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    withBorder: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isLink: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    bodyWrapper: string;
+    badge: string;
+}>;

package/dist/components/flexi-cell/flexi-cell.styles.js

@@ -0,0 +1,30 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'relative flex gap-2 bg-white px-2 py-3 transition-colors focus:focus-outline',
+        bodyWrapper: 'flex flex-1 flex-col',
+        badge: 'absolute right-0 top-0'
+    },
+    variants: {
+        withBorder: {
+            true: {
+                base: 'rounded border border-borderDark'
+            },
+            false: {}
+        },
+        isLink: {
+            true: {
+                base: 'hover:border-hero'
+            },
+            false: {}
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/flexi-cell/flexi-cell.types.d.ts

@@ -0,0 +1,61 @@
+import { CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './flexi-cell.styles.js';
+type BaseFlexiCellProps = {
+    /**
+     * Renders an element on the right
+     */
+    after?: ReactNode;
+    /**
+     * Renders an element on the top right corner
+     */
+    badge?: ReactNode;
+    /**
+     * zIndex for badge
+     */
+    badgeZIndex?: CSSProperties['zIndex'];
+    /**
+     * Renders an element on the left
+     */
+    before?: ReactNode;
+    /**
+     * Injects the FlexiCell.Body inside of the children
+     */
+    body?: boolean;
+    /**
+     * the middle content of FlexiCell
+     */
+    children?: ReactNode;
+    /**
+     * href in case it is an "a" tag
+     */
+    href?: string;
+    /**
+     * The native tag that flexicell will be rendered
+     */
+    tag?: keyof JSX.IntrinsicElements;
+    /**
+     * Adds an arrow on top right
+     */
+    withArrow?: boolean;
+    /**
+     * Adds a border radius and a border
+     */
+    withBorder?: boolean;
+} & HTMLAttributes<HTMLOrSVGElement>;
+type FlexiCellAsLinkProps = {
+    /**
+     * The href for the link
+     */
+    href: string;
+    /**
+     * The native tag that the circle will be rendered as
+     */
+    tag: 'a';
+};
+type FlexiCellAsAllOtherTagsProps<Tag> = {
+    href?: never;
+    tag?: Tag;
+};
+export type FlexiCellProps<Tag extends keyof Omit<JSX.IntrinsicElements, 'a'> = keyof Omit<JSX.IntrinsicElements, 'a'>> = (FlexiCellAsLinkProps | FlexiCellAsAllOtherTagsProps<Tag>) & BaseFlexiCellProps & VariantProps<typeof styles> & HTMLAttributes<Element>;
+export {};

package/dist/components/flexi-cell/flexi-cell.types.js

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

package/dist/components/flexi-cell/index.d.ts

@@ -0,0 +1,2 @@
+export { FlexiCell } from './flexi-cell.component.js';
+export { type FlexiCellProps } from './flexi-cell.types.js';

package/dist/components/flexi-cell/index.js

@@ -0,0 +1 @@
+export { FlexiCell } from './flexi-cell.component.js';

package/dist/components/form/components/error-message/error-message.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type ErrorMessageProps } from './error-message.types.js';
+export declare function ErrorMessage({ className, tag: Tag, icon: Icon, message, ...props }: ErrorMessageProps): JSX.Element;

package/dist/components/form/components/error-message/error-message.component.js

@@ -0,0 +1,42 @@
+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 { AlertIcon } from '../../../../components/icon/index.js';
+import { styles as errorMessageStyles } from './error-message.styles.js';
+export function ErrorMessage({ className , tag: Tag = 'div' , icon: Icon , message , ...props }) {
+    const styles = errorMessageStyles({});
+    const FinalIcon = Icon !== null && Icon !== void 0 ? Icon : AlertIcon;
+    return Array.isArray(message) ? React.createElement("ul", _extends({
+        className: styles.list({})
+    }, props), message.map((msg)=>React.createElement("li", {
+            className: styles.base({
+                className
+            })
+        }, React.createElement(FinalIcon, {
+            copyrightYear: "2023",
+            className: styles.icon({}),
+            size: "xsmall",
+            look: "outlined"
+        }), msg))) : React.createElement(Tag, _extends({
+        className: styles.base({
+            className: `${className} mb-2`
+        })
+    }, props), React.createElement(FinalIcon, {
+        copyrightYear: "2020",
+        className: styles.icon({}),
+        size: "xsmall",
+        look: "outlined"
+    }), message);
+}

package/dist/components/form/components/error-message/error-message.styles.d.ts

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

package/dist/components/form/components/error-message/error-message.styles.js

@@ -0,0 +1,8 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'typography-body-10 flex items-center text-danger',
+        list: 'mb-2 flex flex-col gap-1',
+        icon: 'mr-[0.5rem] mt-[mr-0.25rem] align-top'
+    }
+});

package/dist/components/form/components/error-message/error-message.types.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './error-message.styles.js';
+export type ErrorMessageProps = {
+    /**
+     * Icon
+     */
+    icon?: (...args: unknown[]) => JSX.Element;
+    /**
+     * Message or messages
+     */
+    message?: ReactNode | ReactNode[];
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> & HTMLAttributes<Element>;

package/dist/components/form/components/error-message/error-message.types.js

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

package/dist/components/form/components/error-message/index.d.ts

@@ -0,0 +1,2 @@
+export { ErrorMessage } from './error-message.component.js';
+export { type ErrorMessageProps } from './error-message.types.js';

package/dist/components/form/components/error-message/index.js

@@ -0,0 +1 @@
+export { ErrorMessage } from './error-message.component.js';

package/dist/components/form/components/form-chit-chat/form-chit-chat.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type FormChitChatProps } from './form-chit-chat.types.js';
+export declare function FormChitChat({ className, tag: Tag, children, ...props }: FormChitChatProps): JSX.Element;

package/dist/components/form/components/form-chit-chat/form-chit-chat.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 './form-chit-chat.styles.js';
+export function FormChitChat({ className , tag: Tag = 'div' , children , ...props }) {
+    return React.createElement(Tag, _extends({
+        className: styles({
+            className
+        })
+    }, props), children);
+}

package/dist/components/form/components/form-chit-chat/form-chit-chat.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const styles: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "typography-body-8 m-0 text-center font-bold leading-[1.125rem] text-heading sm:mb-5"> | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "typography-body-8 m-0 text-center font-bold leading-[1.125rem] text-heading sm:mb-5">;
+    } | undefined;
+} | {}, undefined, "typography-body-8 m-0 text-center font-bold leading-[1.125rem] text-heading sm:mb-5", TVConfig<V, EV>, import("tailwind-variants").TVVariantsDefault<undefined, "typography-body-8 m-0 text-center font-bold leading-[1.125rem] text-heading sm:mb-5"> | {}, undefined>;

package/dist/components/form/components/form-chit-chat/form-chit-chat.styles.js

@@ -0,0 +1,4 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'typography-body-8 m-0 text-center font-bold leading-[1.125rem] text-heading sm:mb-5'
+});

package/dist/components/form/components/form-chit-chat/form-chit-chat.types.d.ts

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

package/dist/components/form/components/form-chit-chat/form-chit-chat.types.js

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

package/dist/components/form/components/form-chit-chat/index.d.ts

@@ -0,0 +1,2 @@
+export { FormChitChat } from './form-chit-chat.component.js';
+export { type FormChitChatProps } from './form-chit-chat.types.js';

package/dist/components/form/components/form-chit-chat/index.js

@@ -0,0 +1 @@
+export { FormChitChat } from './form-chit-chat.component.js';

package/dist/components/form/components/form-group/form-group.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type FormGroupProps } from './form-group.types.js';
+export declare function FormGroup({ className, tag: Tag, children, ...props }: FormGroupProps): JSX.Element;

package/dist/components/form/components/form-group/form-group.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 { useFormContext } from '../../form.component.js';
+import { styles } from './form-group.styles.js';
+export function FormGroup({ className , tag: Tag = 'div' , children , ...props }) {
+    const { inline , spacing  } = useFormContext();
+    return React.createElement(Tag, _extends({
+        className: styles({
+            className,
+            inline,
+            spacing
+        })
+    }, props), children);
+}

package/dist/components/form/components/form-group/form-group.styles.d.ts

@@ -0,0 +1,21 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+    spacing: {
+        medium: string;
+        large: string;
+    };
+}, undefined, "", {
+    responsiveVariants: string[];
+}, {
+    inline: {
+        true: string;
+        false: string;
+    };
+    spacing: {
+        medium: string;
+        large: string;
+    };
+}, undefined>;

package/dist/components/form/components/form-group/form-group.styles.js

@@ -0,0 +1,22 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: '',
+    variants: {
+        inline: {
+            true: 'sm:inline-block sm:align-middle',
+            false: ''
+        },
+        spacing: {
+            medium: 'mb-3',
+            large: 'mb-4'
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/form/components/form-group/form-group.types.d.ts

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

package/dist/components/form/components/form-group/form-group.types.js

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

package/dist/components/form/components/form-group/index.d.ts

@@ -0,0 +1,2 @@
+export { FormGroup } from './form-group.component.js';
+export { type FormGroupProps } from './form-group.types.js';

package/dist/components/form/components/form-group/index.js

@@ -0,0 +1 @@
+export { FormGroup } from './form-group.component.js';

package/dist/components/form/components/form-hint/form-hint.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type FormHintProps } from './form-hint.types.js';
+export declare function FormHint({ className, tag: Tag, children, ...props }: FormHintProps): JSX.Element;

package/dist/components/form/components/form-hint/form-hint.component.js

@@ -0,0 +1,26 @@
+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 { useFormContext } from '../../form.component.js';
+import { styles } from './form-hint.styles.js';
+export function FormHint({ className , tag: Tag = 'div' , children , ...props }) {
+    const { spacing  } = useFormContext();
+    return React.createElement(Tag, _extends({
+        className: styles({
+            className,
+            spacing: spacing || 'medium'
+        })
+    }, props), children);
+}

package/dist/components/form/components/form-hint/form-hint.styles.d.ts

@@ -0,0 +1,13 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    spacing: {
+        medium: string;
+        large: string;
+    };
+}, undefined, "typography-body-10 mb-2 text-muted", {
+    responsiveVariants: string[];
+}, {
+    spacing: {
+        medium: string;
+        large: string;
+    };
+}, undefined>;

package/dist/components/form/components/form-hint/form-hint.styles.js

@@ -0,0 +1,18 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'typography-body-10 mb-2 text-muted',
+    variants: {
+        spacing: {
+            medium: '-mt-1 mb-2',
+            large: '-mt-2 mb-3'
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/form/components/form-hint/form-hint.types.d.ts

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

package/dist/components/form/components/form-hint/form-hint.types.js

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

package/dist/components/form/components/form-hint/index.d.ts

@@ -0,0 +1,2 @@
+export { FormHint } from './form-hint.component.js';
+export { type FormHintProps } from './form-hint.types.js';

package/dist/components/form/components/form-hint/index.js

@@ -0,0 +1 @@
+export { FormHint } from './form-hint.component.js';

package/dist/components/form/components/form-label/form-label.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type FormLabelProps } from './form-label.types.js';
+export declare function FormLabel({ className, tag: Tag, spacing, srOnly, children, subLabel, ...props }: FormLabelProps): JSX.Element;

package/dist/components/form/components/form-label/form-label.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 { VisuallyHidden } from '../../../index.js';
+import { useFormContext } from '../../form.component.js';
+import { styles } from './form-label.styles.js';
+export function FormLabel({ className , tag: Tag = 'label' , spacing , srOnly , children , subLabel =false , ...props }) {
+    const context = useFormContext();
+    const finalSpacing = spacing || (context === null || context === void 0 ? void 0 : context.spacing) || 'medium';
+    return srOnly ? React.createElement(VisuallyHidden, null, children) : React.createElement(Tag, _extends({
+        className: styles({
+            className,
+            spacing: finalSpacing,
+            subLabel
+        })
+    }, props), children);
+}

package/dist/components/form/components/form-label/form-label.styles.d.ts

@@ -0,0 +1,21 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    spacing: {
+        medium: string;
+        large: string;
+    };
+    subLabel: {
+        true: string;
+        false: string;
+    };
+}, undefined, "typography-body-9 block font-medium", {
+    responsiveVariants: string[];
+}, {
+    spacing: {
+        medium: string;
+        large: string;
+    };
+    subLabel: {
+        true: string;
+        false: string;
+    };
+}, undefined>;

package/dist/components/form/components/form-label/form-label.styles.js

@@ -0,0 +1,44 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'typography-body-9 block font-medium',
+    variants: {
+        spacing: {
+            medium: '',
+            large: ''
+        },
+        subLabel: {
+            true: 'typography-body-10',
+            false: 'typography-body-9'
+        }
+    },
+    compoundVariants: [
+        {
+            subLabel: true,
+            spacing: 'medium',
+            className: 'mb-1'
+        },
+        {
+            subLabel: true,
+            spacing: 'large',
+            className: 'mb-1'
+        },
+        {
+            subLabel: false,
+            spacing: 'medium',
+            className: 'mb-2'
+        },
+        {
+            subLabel: false,
+            spacing: 'large',
+            className: 'mb-3'
+        }
+    ]
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/form/components/form-label/form-label.types.d.ts

@@ -0,0 +1,26 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './form-label.styles.js';
+export type FormLabelProps = {
+    /**
+     * Children
+     */
+    children?: ReactNode;
+    /**
+     * Label `for` attribute.
+     *
+     */
+    htmlFor?: string;
+    /**
+     * Enable ‘screen reader only’ mode
+     */
+    srOnly?: boolean;
+    /**
+     * Sub-label mode (smaller label text size)
+     */
+    subLabel?: boolean;
+    /**
+     * Component tag
+     */
+    tag?: 'label' | 'legend';
+} & VariantProps<typeof styles> & HTMLAttributes<Element>;

package/dist/components/form/components/form-label/form-label.types.js

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

package/dist/components/form/components/form-label/index.d.ts

@@ -0,0 +1,2 @@
+export { FormLabel } from './form-label.component.js';
+export { type FormLabelProps } from './form-label.types.js';

package/dist/components/form/components/form-label/index.js

@@ -0,0 +1 @@
+export { FormLabel } from './form-label.component.js';

package/dist/components/form/components/form-section/form-section.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type FormSectionProps } from './form-section.types.js';
+export declare function FormSection({ className, noPadding, tag: Tag, children, ...props }: FormSectionProps): JSX.Element;