@westpac/ui 0.3.0 → 0.5.0

package/dist/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.styles.d.ts

@@ -0,0 +1,59 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    checkIcon: {
+        arrow: {
+            icon: string;
+        };
+        checkbox: {};
+    };
+    isSelected: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isFocusVisible: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    icon: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    checkIcon: {
+        arrow: {
+            icon: string;
+        };
+        checkbox: {};
+    };
+    isSelected: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isFocusVisible: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    icon: string;
+}>;

package/dist/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.styles.js

@@ -0,0 +1,57 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'group/radio-option cursor-pointer',
+        icon: 'transition-transform'
+    },
+    variants: {
+        checkIcon: {
+            arrow: {
+                icon: 'text-primary group-hover/radio-option:translate-x-1'
+            },
+            checkbox: {}
+        },
+        isSelected: {
+            true: {
+                base: 'border-hero shadow-[0_0_0_2px_inset] shadow-hero'
+            },
+            false: {}
+        },
+        isFocusVisible: {
+            true: {
+                base: 'focus-outline'
+            },
+            false: {}
+        },
+        isDisabled: {
+            true: {
+                base: 'opacity-50'
+            },
+            false: {}
+        }
+    },
+    compoundVariants: [
+        {
+            checkIcon: 'checkbox',
+            isSelected: false,
+            className: {
+                icon: 'opacity-0'
+            }
+        },
+        {
+            checkIcon: 'checkbox',
+            isSelected: true,
+            className: {
+                icon: 'opacity-100'
+            }
+        }
+    ]
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.types.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes } from 'react';
+import { type AriaRadioProps } from 'react-aria';
+import { type VariantProps } from 'tailwind-variants';
+import { type FlexiCellProps } from '../../../../../../index.js';
+import { styles } from './selector-radio-group-option.styles.js';
+export type SelectorRadioGroupOptionProps = {
+    /**
+     * Check icon to render
+     */
+    checkIcon?: 'checkbox' | 'arrow';
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & FlexiCellProps & AriaRadioProps & VariantProps<typeof styles> & HTMLAttributes<Element>;

package/dist/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.types.js

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

package/dist/components/selector/components/selector-radio-group/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectorRadioGroup } from './selector-radio-group.component.js';
+export { type SelectorRadioGroupProps } from './selector-radio-group.types.js';

package/dist/components/selector/components/selector-radio-group/index.js

@@ -0,0 +1 @@
+export { SelectorRadioGroup } from './selector-radio-group.component.js';

package/dist/components/selector/components/selector-radio-group/selector-radio-group.component.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { type SelectorRadioGroupContextState, type SelectorRadioGroupProps } from './selector-radio-group.types.js';
+export declare const SelectorRadioGroupContext: React.Context<SelectorRadioGroupContextState>;
+export declare function SelectorRadioGroup({ className, children, label, orientation, errorMessage, ...props }: SelectorRadioGroupProps): JSX.Element;
+export declare namespace SelectorRadioGroup {
+    var Option: React.ForwardRefExoticComponent<import("./components/index.js").SelectorRadioGroupOptionProps & React.RefAttributes<unknown>> & {
+        Adornment: ({ children, tag: Tag, align, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellAdornmentProps) => JSX.Element;
+        Body: ({ children, tag: Tag, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellBodyProps) => JSX.Element;
+        Button: ({ className, ...props }: import("../../../index.js").ButtonProps) => JSX.Element;
+        Circle: ({ className, ...props }: import("../../../index.js").CircleProps) => JSX.Element;
+        Footer: ({ children, className, tag: Tag, ...props }: import("../../../flexi-cell/index.js").FlexiCellFooterProps) => JSX.Element;
+        Hint: ({ children, tag: Tag, className, truncateText, ...props }: import("../../../flexi-cell/index.js").FlexiCellHintProps) => JSX.Element;
+        Label: ({ children, tag: Tag, truncateText, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellLabelProps) => JSX.Element;
+    };
+}

package/dist/components/selector/components/selector-radio-group/selector-radio-group.component.js

@@ -0,0 +1,58 @@
+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, { createContext } from 'react';
+import { useRadioGroup } from 'react-aria';
+import { useRadioGroupState } from 'react-stately';
+import { SelectorRadioGroupOption } from './components/index.js';
+import { styles } from './selector-radio-group.styles.js';
+export const SelectorRadioGroupContext = createContext({
+    name: '',
+    isDisabled: false,
+    isReadOnly: false,
+    isRequired: false,
+    validationState: null,
+    selectedValue: null,
+    setSelectedValue: ()=>null,
+    lastFocusedValue: null,
+    setLastFocusedValue: ()=>null,
+    orientation: 'vertical'
+});
+export function SelectorRadioGroup({ className , children , label , orientation ='vertical' , errorMessage , ...props }) {
+    const state = useRadioGroupState({
+        ...props,
+        errorMessage,
+        label,
+        orientation
+    });
+    const { radioGroupProps , labelProps , errorMessageProps  } = useRadioGroup({
+        ...props,
+        label,
+        orientation
+    }, state);
+    return React.createElement("div", _extends({
+        className: styles({
+            className,
+            orientation
+        })
+    }, radioGroupProps), React.createElement("span", _extends({}, labelProps), label), React.createElement(SelectorRadioGroupContext.Provider, {
+        value: {
+            ...state,
+            orientation
+        }
+    }, children), errorMessage && state.validationState === 'invalid' && React.createElement("div", _extends({}, errorMessageProps, {
+        className: "typography-body-10 text-danger"
+    }), errorMessage));
+}
+SelectorRadioGroup.Option = SelectorRadioGroupOption;

package/dist/components/selector/components/selector-radio-group/selector-radio-group.styles.d.ts

@@ -0,0 +1,13 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+}, undefined, "flex gap-2 md:gap-3", {
+    responsiveVariants: string[];
+}, {
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+}, undefined>;

package/dist/components/selector/components/selector-radio-group/selector-radio-group.styles.js

@@ -0,0 +1,18 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'flex gap-2 md:gap-3',
+    variants: {
+        orientation: {
+            vertical: 'flex-col',
+            horizontal: 'flex-row'
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/selector/components/selector-radio-group/selector-radio-group.types.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes } from 'react';
+import { type AriaRadioGroupProps } from 'react-aria';
+import { type RadioGroupState } from 'react-stately';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './selector-radio-group.styles.js';
+export type SelectorRadioGroupProps = {
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> & AriaRadioGroupProps & Omit<HTMLAttributes<Element>, 'onChange'>;
+export type SelectorRadioGroupContextState = {
+    /**
+     * Controls orientation of `Radio` components, can't be applied directly on `Radio`
+     */
+    orientation: 'vertical' | 'horizontal';
+} & RadioGroupState;

package/dist/components/selector/components/selector-radio-group/selector-radio-group.types.js

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

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

@@ -0,0 +1,2 @@
+export { Selector } from './selector.component.js';
+export { type SelectorProps } from './selector.types.js';

package/dist/components/selector/index.js

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

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type SelectorProps } from './selector.types.js';
+export declare function Selector(props: SelectorProps): JSX.Element;
+export declare namespace Selector {
+    var Radio: React.ForwardRefExoticComponent<import("./components/selector-radio-group/components/index.js").SelectorRadioGroupOptionProps & React.RefAttributes<unknown>> & {
+        Adornment: ({ children, tag: Tag, align, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellAdornmentProps) => JSX.Element;
+        Body: ({ children, tag: Tag, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellBodyProps) => JSX.Element;
+        Button: ({ className, ...props }: import("../index.js").ButtonProps) => JSX.Element;
+        Circle: ({ className, ...props }: import("../index.js").CircleProps) => JSX.Element;
+        Footer: ({ children, className, tag: Tag, ...props }: import("../flexi-cell/components/index.js").FlexiCellFooterProps) => JSX.Element;
+        Hint: ({ children, tag: Tag, className, truncateText, ...props }: import("../flexi-cell/components/index.js").FlexiCellHintProps) => JSX.Element;
+        Label: ({ children, tag: Tag, truncateText, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellLabelProps) => JSX.Element;
+    };
+    var Checkbox: React.ForwardRefExoticComponent<import("./components/selector-checkbox-group/components/index.js").SelectorCheckboxGroupOptionProps & React.RefAttributes<unknown>> & {
+        Adornment: ({ children, tag: Tag, align, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellAdornmentProps) => JSX.Element;
+        Body: ({ children, tag: Tag, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellBodyProps) => JSX.Element;
+        Button: ({ className, ...props }: import("../index.js").ButtonProps) => JSX.Element;
+        Circle: ({ className, ...props }: import("../index.js").CircleProps) => JSX.Element;
+        Footer: ({ children, className, tag: Tag, ...props }: import("../flexi-cell/components/index.js").FlexiCellFooterProps) => JSX.Element;
+        Hint: ({ children, tag: Tag, className, truncateText, ...props }: import("../flexi-cell/components/index.js").FlexiCellHintProps) => JSX.Element;
+        Label: ({ children, tag: Tag, truncateText, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellLabelProps) => JSX.Element;
+    };
+    var Body: ({ children, tag: Tag, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellBodyProps) => JSX.Element;
+    var Footer: ({ children, className, tag: Tag, ...props }: import("../flexi-cell/components/index.js").FlexiCellFooterProps) => JSX.Element;
+    var Adornment: ({ children, tag: Tag, align, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellAdornmentProps) => JSX.Element;
+    var Hint: ({ children, tag: Tag, className, truncateText, ...props }: import("../flexi-cell/components/index.js").FlexiCellHintProps) => JSX.Element;
+    var Label: ({ children, tag: Tag, truncateText, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellLabelProps) => JSX.Element;
+    var Button: ({ className, ...props }: import("../index.js").ButtonProps) => JSX.Element;
+    var Circle: ({ className, ...props }: import("../index.js").CircleProps) => JSX.Element;
+}

package/dist/components/selector/selector.component.js

@@ -0,0 +1,34 @@
+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 { FlexiCellAdornment, FlexiCellBody, FlexiCellButton, FlexiCellCircle, FlexiCellFooter, FlexiCellHint, FlexiCellLabel } from '../flexi-cell/components/index.js';
+import { SelectorCheckboxGroup, SelectorRadioGroup } from './components/index.js';
+import { SelectorCheckboxGroupOption } from './components/selector-checkbox-group/components/index.js';
+import { SelectorRadioGroupOption } from './components/selector-radio-group/components/index.js';
+export function Selector(props) {
+    if (props.type === 'checkbox') {
+        return React.createElement(SelectorCheckboxGroup, _extends({}, props));
+    }
+    return React.createElement(SelectorRadioGroup, _extends({}, props));
+}
+Selector.Radio = SelectorRadioGroupOption;
+Selector.Checkbox = SelectorCheckboxGroupOption;
+Selector.Body = FlexiCellBody;
+Selector.Footer = FlexiCellFooter;
+Selector.Adornment = FlexiCellAdornment;
+Selector.Hint = FlexiCellHint;
+Selector.Label = FlexiCellLabel;
+Selector.Button = FlexiCellButton;
+Selector.Circle = FlexiCellCircle;

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

@@ -0,0 +1,57 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Meta } from '@storybook/react';
+import { Selector } from './selector.component.js';
+declare const meta: Meta<typeof Selector>;
+export default meta;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: () => JSX.Element;
+/**
+ * > Radio usage example
+ */
+export declare const RadioStory: () => JSX.Element;
+/**
+ * > Radio usage example
+ */
+export declare const CheckWithArrowStory: () => JSX.Element;
+/**
+ * > Radio with state usage example
+ */
+export declare const RadioWithStateStory: () => JSX.Element;
+/**
+ * > Check options with state usage example
+ */
+export declare const CheckboxWithStateStory: () => JSX.Element;
+/**
+ * > Default usage example
+ */
+export declare const LongTextStory: () => JSX.Element;
+/**
+ * > With hint text usage example
+ */
+export declare const WithHintTextStory: () => JSX.Element;
+/**
+ * > With pictogram usage example
+ */
+export declare const WithPictogramStory: () => JSX.Element;
+/**
+ * > With pictogram with different sizes usage example
+ */
+export declare const WithPictogramDifferentSizesStory: () => JSX.Element;
+/**
+ * > With icon and different size
+ */
+export declare const WithIconsDifferentSizesStory: () => JSX.Element;
+/**
+ * > With icon and secondary label
+ */
+export declare const WithIconsAndSecondaryLabelStory: () => JSX.Element;
+/**
+ * > Radio example with icons and secondary text
+ */
+export declare const RadioWithIconsAndSecondaryLabelStory: () => JSX.Element;
+/**
+ * > Disable state style example
+ */
+export declare const DisableStateStory: () => JSX.Element;