@westpac/ui 0.3.0 → 0.5.0

package/dist/components/input-field/components/add-ons/components/default-add-on/default-add-on.styles.js

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

package/dist/components/input-field/components/add-ons/components/default-add-on/default-add-on.types.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { AddOnProps } from '../../add-ons.types.js';
+import { styles } from './default-add-on.styles.js';
+export type DefaultAddOnProps = AddOnProps & VariantProps<typeof styles> & HTMLAttributes<Element>;

package/dist/components/input-field/components/add-ons/components/default-add-on/default-add-on.types.js

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

package/dist/components/input-field/components/add-ons/components/default-add-on/index.d.ts

@@ -0,0 +1,2 @@
+export { DefaultAddOn } from './default-add-on.component.js';
+export { type DefaultAddOnProps } from './default-add-on.types.js';

package/dist/components/input-field/components/add-ons/components/default-add-on/index.js

@@ -0,0 +1 @@
+export { DefaultAddOn } from './default-add-on.component.js';

package/dist/components/input-field/components/add-ons/components/icon-add-on/icon-add-on.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type IconAddOnProps } from './icon-add-on.types.js';
+export declare const IconAddOn: ({ position, children, size, className, ...props }: IconAddOnProps) => JSX.Element;

package/dist/components/input-field/components/add-ons/components/icon-add-on/icon-add-on.component.js

@@ -0,0 +1,25 @@
+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 './icon-add-on.styles.js';
+export const IconAddOn = ({ position , children , size , className , ...props })=>{
+    return React.createElement("div", _extends({
+        className: styles({
+            className,
+            size,
+            position
+        })
+    }, props), children);
+};

package/dist/components/input-field/components/add-ons/components/icon-add-on/icon-add-on.styles.d.ts

@@ -0,0 +1,25 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    position: {
+        before: string;
+        after: string;
+    };
+}, undefined, "flex h-full items-center", {
+    responsiveVariants: string[];
+}, {
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    position: {
+        before: string;
+        after: string;
+    };
+}, undefined>;

package/dist/components/input-field/components/add-ons/components/icon-add-on/icon-add-on.styles.js

@@ -0,0 +1,66 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'flex h-full items-center',
+    variants: {
+        size: {
+            small: 'px-[0.5625rem]',
+            medium: 'px-2',
+            large: 'px-[0.9375rem]',
+            xlarge: 'px-3'
+        },
+        position: {
+            before: '',
+            after: ''
+        }
+    },
+    compoundVariants: [
+        {
+            position: 'before',
+            size: 'small',
+            className: 'pl-[0.5625rem]'
+        },
+        {
+            position: 'before',
+            size: 'medium',
+            className: 'pl-2'
+        },
+        {
+            position: 'before',
+            size: 'large',
+            className: 'pl-[0.9375rem]'
+        },
+        {
+            position: 'before',
+            size: 'xlarge',
+            className: 'pl-3'
+        },
+        {
+            position: 'after',
+            size: 'small',
+            className: 'pr-[0.5625rem]'
+        },
+        {
+            position: 'after',
+            size: 'medium',
+            className: 'pr-2'
+        },
+        {
+            position: 'after',
+            size: 'large',
+            className: 'pr-[0.9375rem]'
+        },
+        {
+            position: 'after',
+            size: 'xlarge',
+            className: 'pr-3'
+        }
+    ]
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/input-field/components/add-ons/components/icon-add-on/icon-add-on.types.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { type AddOnProps } from '../../add-ons.types.js';
+import { styles } from './icon-add-on.styles.js';
+export type IconAddOnProps = AddOnProps & VariantProps<typeof styles> & HTMLAttributes<Element>;

package/dist/components/input-field/components/add-ons/components/icon-add-on/icon-add-on.types.js

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

package/dist/components/input-field/components/add-ons/components/icon-add-on/index.d.ts

@@ -0,0 +1,2 @@
+export { IconAddOn } from './icon-add-on.component.js';
+export { type IconAddOnProps } from './icon-add-on.types.js';

package/dist/components/input-field/components/add-ons/components/icon-add-on/index.js

@@ -0,0 +1 @@
+export { IconAddOn } from './icon-add-on.component.js';

package/dist/components/input-field/components/add-ons/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './default-add-on/index.js';
+export * from './icon-add-on/index.js';
+export * from './text-add-on/index.js';

package/dist/components/input-field/components/add-ons/components/index.js

@@ -0,0 +1,3 @@
+export * from './default-add-on/index.js';
+export * from './icon-add-on/index.js';
+export * from './text-add-on/index.js';

package/dist/components/input-field/components/add-ons/components/text-add-on/index.d.ts

@@ -0,0 +1,2 @@
+export { TextAddOn } from './text-add-on.component.js';
+export { type TextAddOnProps } from './text-add-on.types.js';

package/dist/components/input-field/components/add-ons/components/text-add-on/index.js

@@ -0,0 +1 @@
+export { TextAddOn } from './text-add-on.component.js';

package/dist/components/input-field/components/add-ons/components/text-add-on/text-add-on.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type TextAddOnProps } from './text-add-on.types.js';
+export declare const TextAddOn: ({ position, className, size, id, children, ...props }: TextAddOnProps) => JSX.Element;

package/dist/components/input-field/components/add-ons/components/text-add-on/text-add-on.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 { styles } from './text-add-on.styles.js';
+export const TextAddOn = ({ position , className , size , id , children , ...props })=>{
+    return React.createElement("div", _extends({
+        id: `${id}-text-${position}`,
+        className: styles({
+            className,
+            position,
+            size
+        })
+    }, props), children);
+};

package/dist/components/input-field/components/add-ons/components/text-add-on/text-add-on.styles.d.ts

@@ -0,0 +1,25 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    position: {
+        before: string;
+        after: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+}, undefined, "relative box-border whitespace-nowrap border border-borderDark bg-light", {
+    responsiveVariants: string[];
+}, {
+    position: {
+        before: string;
+        after: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+}, undefined>;

package/dist/components/input-field/components/add-ons/components/text-add-on/text-add-on.styles.js

@@ -0,0 +1,24 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'relative box-border whitespace-nowrap border border-borderDark bg-light',
+    variants: {
+        position: {
+            before: 'rounded-l-[0.1875rem]',
+            after: 'rounded-r-[0.1875rem]'
+        },
+        size: {
+            small: 'typography-body-10 h-5 px-[0.5625rem] pb-[0.25rem] pt-[0.1875rem]',
+            medium: 'typography-body-9 h-6 px-2 py-[0.3125rem]',
+            large: 'typography-body-9 h-7 px-[0.9375rem] py-[0.5rem]',
+            xlarge: 'typography-body-8 h-8 px-3 py-[0.5625rem] pb-[0.625rem]'
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/input-field/components/add-ons/components/text-add-on/text-add-on.types.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { AddOnProps } from '../../add-ons.types.js';
+import { styles } from './text-add-on.styles.js';
+export type TextAddOnProps = AddOnProps & VariantProps<typeof styles> & HTMLAttributes<Element>;

package/dist/components/input-field/components/add-ons/components/text-add-on/text-add-on.types.js

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

package/dist/components/input-field/components/add-ons/index.d.ts

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

package/dist/components/input-field/components/add-ons/index.js

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

package/dist/components/input-field/components/index.d.ts

@@ -0,0 +1 @@
+export * from './supporting-text/index.js';

package/dist/components/input-field/components/index.js

@@ -0,0 +1 @@
+export * from './supporting-text/index.js';

package/dist/components/input-field/components/supporting-text/index.d.ts

@@ -0,0 +1,2 @@
+export { SupportingText } from './supporting-text.component.js';
+export { type SupportingTextProps } from './supporting-text.types.js';

package/dist/components/input-field/components/supporting-text/index.js

@@ -0,0 +1 @@
+export { SupportingText } from './supporting-text.component.js';

package/dist/components/input-field/components/supporting-text/supporting-text.component.d.ts

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

package/dist/components/input-field/components/supporting-text/supporting-text.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 './supporting-text.styles.js';
+export function SupportingText({ className , tag: Tag = 'p' , children , ...props }) {
+    return React.createElement(Tag, _extends({
+        className: styles({
+            className
+        })
+    }, props), children);
+}

package/dist/components/input-field/components/supporting-text/supporting-text.styles.d.ts

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

package/dist/components/input-field/components/supporting-text/supporting-text.styles.js

@@ -0,0 +1,4 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'mt-1 text-xs text-muted'
+});

package/dist/components/input-field/components/supporting-text/supporting-text.types.d.ts

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

package/dist/components/input-field/components/supporting-text/supporting-text.types.js

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

package/dist/components/input-field/index.d.ts

@@ -0,0 +1,2 @@
+export { InputField } from './input-field.component.js';
+export { type InputFieldProps } from './input-field.types.js';

package/dist/components/input-field/index.js

@@ -0,0 +1 @@
+export { InputField } from './input-field.component.js';

package/dist/components/input-field/input-field.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type InputFieldProps } from './input-field.types.js';
+export declare function InputField({ label, hideLabel, size, hint, errorMessage, supportingText, instanceId, after, before, children, tag: Tag, ...props }: InputFieldProps): JSX.Element;

package/dist/components/input-field/input-field.component.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 React, { Children, cloneElement, isValidElement, useCallback, useId, useMemo } from 'react';
+import { Form } from '../form/form.component.js';
+import { InputAddOn } from './components/add-ons/add-ons.component.js';
+import { SupportingText } from './components/index.js';
+import { styles } from './input-field.styles.js';
+export function InputField({ label , hideLabel , size ='medium' , hint , errorMessage , supportingText , instanceId , after , before , children , tag: Tag = 'div' , ...props }) {
+    const _id = useId();
+    const id = useMemo(()=>instanceId || `gel-field-${_id}`, [
+        _id,
+        instanceId
+    ]);
+    const ariaDescribedByValue = useMemo(()=>{
+        const arr = [
+            ...errorMessage ? [
+                `${id}-error`
+            ] : [],
+            ...hint ? [
+                `${id}-hint`
+            ] : [],
+            ...before ? [
+                `${id}-text-before`
+            ] : [],
+            ...after ? [
+                `${id}-text-after`
+            ] : [],
+            ...supportingText ? [
+                `${id}-supporting-text`
+            ] : []
+        ];
+        return arr.join(' ');
+    }, [
+        id,
+        hint,
+        errorMessage,
+        supportingText
+    ]);
+    const { element: beforeElement , icon: beforeIcon , inset: beforeInset  } = useMemo(()=>{
+        if (before && typeof before !== 'boolean' && typeof before !== 'string' && typeof before !== 'number' && ('element' in before || 'icon' in before || 'inset' in before)) {
+            return {
+                ...before,
+                inset: before.inset || !!before.icon
+            };
+        }
+        return {
+            element: before,
+            icon: undefined,
+            inset: false
+        };
+    }, [
+        before
+    ]);
+    const { element: afterElement , icon: afterIcon , inset: afterInset  } = useMemo(()=>{
+        if (after && typeof after !== 'boolean' && typeof after !== 'string' && typeof after !== 'number' && ('element' in after || 'icon' in after || 'inset' in after)) {
+            return {
+                ...after,
+                inset: after.inset || !!after.icon
+            };
+        }
+        return {
+            element: after,
+            icon: undefined,
+            inset: false
+        };
+    }, [
+        after
+    ]);
+    const renderChildren = useCallback(()=>{
+        return Children.map(children, (child)=>{
+            if (isValidElement(child)) {
+                return cloneElement(child, {
+                    size,
+                    id,
+                    'aria-describedby': ariaDescribedByValue
+                });
+            }
+        });
+    }, [
+        children,
+        ariaDescribedByValue
+    ]);
+    const isFieldset = useMemo(()=>Tag === 'fieldset', [
+        Tag
+    ]);
+    return React.createElement(Tag, _extends({
+        className: styles({
+            before: !!before,
+            after: !!after,
+            afterInset,
+            beforeInset
+        })
+    }, props), label && React.createElement(Form.Label, _extends({
+        srOnly: hideLabel,
+        tag: isFieldset ? 'legend' : 'label'
+    }, !isFieldset && {
+        htmlFor: id
+    }), label), hint && React.createElement(Form.Hint, {
+        id: `${id}-hint`
+    }, hint), errorMessage && React.createElement(Form.ErrorMessage, {
+        id: `${id}-error`,
+        message: errorMessage
+    }), React.createElement("div", {
+        className: "relative flex"
+    }, before && React.createElement(InputAddOn, {
+        position: "before",
+        size: size,
+        inset: beforeInset,
+        icon: beforeIcon,
+        id: id
+    }, beforeElement), renderChildren(), after && React.createElement(InputAddOn, {
+        position: "after",
+        size: size,
+        inset: afterInset,
+        icon: afterIcon,
+        id: id
+    }, afterElement)), supportingText && React.createElement(SupportingText, {
+        id: `${id}-supporting-text`
+    }, supportingText));
+}

package/dist/components/input-field/input-field.scenarios.stories.d.ts

@@ -0,0 +1,26 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { InputField } from './input-field.component.js';
+declare const meta: Meta<typeof InputField>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Number of dependents
+ */
+export declare const NumberStepperStory: Story;
+/**
+ * > Masked characters in field
+ */
+export declare const MaskedCharactersStory: Story;
+/**
+ * > Search with left icon and clear button
+ */
+export declare const SearchWithLeftIconAndClearButtonStory: Story;
+/**
+ * > Inline field validation flow
+ */
+export declare const InlineFieldValidationFlowStory: Story;
+/**
+ * > Search Currency and frequency
+ */
+export declare const CurrencyAndFrequencyStory: Story;
+export declare const TextareaWithCharacterCountStory: Story;