@westpac/ui 0.13.0 → 0.14.1

package/src/components/selector/components/selector-checkbox-group/selector-checkbox-group.component.tsx

@@ -1,8 +1,10 @@
+'use client';
+
 import React, { createContext } from 'react';
 import { useCheckboxGroup } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
 
-import { ErrorMessage, FormHint, FormLabel } from '../../../index.js';
+import { ErrorMessage, Hint, Label } from '../../../index.js';
 
 import { SelectorCheckboxGroupOption } from './components/index.js';
 import { styles } from './selector-checkbox-group.styles.js';
@@ -30,8 +32,8 @@ export function SelectorCheckboxGroup(props: SelectorCheckboxGroupProps) {
 
   return (
     <div {...groupProps} className={styles({ className: groupProps.className })}>
-      <FormLabel {...labelProps}>{label}</FormLabel>
-      {description && <FormHint {...descriptionProps}>{description}</FormHint>}
+      {label && <Label {...labelProps}>{label}</Label>}
+      {description && <Hint {...descriptionProps}>{description}</Hint>}
       {errorMessage && state.validationState === 'invalid' && (
         <ErrorMessage {...errorMessageProps} message={errorMessage} />
       )}
@@ -39,4 +41,3 @@ export function SelectorCheckboxGroup(props: SelectorCheckboxGroupProps) {
     </div>
   );
 }
-SelectorCheckboxGroup.Option = SelectorCheckboxGroupOption;

package/src/components/selector/components/selector-checkbox-group/selector-checkbox-group.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'flex flex-col gap-2 md:gap-3',
+    base: 'flex flex-col gap-2 sm:gap-3',
     variants: {},
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

package/src/components/selector/components/selector-checkbox-group/selector-checkbox-group.types.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes } from 'react';
 import { AriaCheckboxGroupProps } from 'react-aria';
 import { CheckboxGroupState } from 'react-stately';
 

package/src/components/selector/components/selector-label/selector-label.styles.ts

@@ -1,5 +1,5 @@
 import { tv } from 'tailwind-variants';
 
 export const styles = tv({
-  base: 'font-medium',
+  base: 'font-medium max-sm:typography-body-9 sm:typography-body-8',
 });

package/src/components/selector/components/selector-link-group/components/index.ts

@@ -0,0 +1 @@
+export * from './selector-link-group-option/index.js';

package/src/components/selector/components/selector-link-group/components/selector-link-group-option/index.ts

@@ -0,0 +1,2 @@
+export { SelectorLinkGroupOption } from './selector-link-group-option.component.js';
+export { type SelectorLinkGroupOptionProps } from './selector-link-group-option.types.js';

package/src/components/selector/components/selector-link-group/components/selector-link-group-option/selector-link-group-option.component.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import React, { forwardRef, useContext, useId, useRef } from 'react';
+import { mergeProps, useFocusRing, useLink } from 'react-aria';
+
+import { FlexiCell } from '../../../../../../index.js';
+import { ArrowRightIcon } from '../../../../../icon/index.js';
+import { SelectorLinkContext } from '../../selector-link-group.component.js';
+
+import { styles as SelectorLinkGroupOptionStyles } from './selector-link-group-option.styles.js';
+import { type SelectorLinkGroupOptionProps } from './selector-link-group-option.types.js';
+
+function BaseSelectorLinkGroupOption(
+  {
+    className,
+    children,
+    withBorder = true,
+    withArrow,
+    after,
+    before,
+    isDisabled = false,
+    href,
+    ...props
+  }: SelectorLinkGroupOptionProps,
+  ref: any,
+) {
+  const id = useId();
+  const localRef = useRef(ref);
+  const state = useContext(SelectorLinkContext);
+  const { linkProps } = useLink({ ...props }, localRef);
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const styles = SelectorLinkGroupOptionStyles({
+    className,
+    isFocusVisible,
+    isDisabled: state.isDisabled ? state.isDisabled : isDisabled,
+  });
+
+  return (
+    <FlexiCell
+      after={
+        <div className="flex gap-2">
+          {after}
+          <ArrowRightIcon aria-hidden="true" className={styles.icon({})} />
+        </div>
+      }
+      before={before}
+      withBorder={withBorder}
+      withArrow={withArrow}
+      tag="a"
+      ref={ref}
+      className={styles.base({})}
+      id={id}
+      href={href}
+      disabled={isDisabled}
+      {...mergeProps(linkProps, focusProps)}
+    >
+      {children}
+    </FlexiCell>
+  );
+}
+
+export const SelectorLinkGroupOption = forwardRef(BaseSelectorLinkGroupOption) as React.ForwardRefExoticComponent<
+  SelectorLinkGroupOptionProps & React.RefAttributes<unknown>
+>;
+SelectorLinkGroupOption.displayName = 'SelectorLink';

package/src/components/selector/components/selector-link-group/components/selector-link-group-option/selector-link-group-option.styles.ts

@@ -0,0 +1,28 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'group/radio-option max-sm:mb-0 max-sm:gap-2 max-sm:p-2 sm:mb-0 sm:gap-3 sm:p-3',
+      icon: 'mr-[-6px] text-primary transition-transform',
+    },
+    variants: {
+      isFocusVisible: {
+        true: {
+          base: 'focus-outline',
+        },
+        false: {},
+      },
+      isDisabled: {
+        true: {
+          base: 'pointer-events-none opacity-50',
+        },
+        false: {
+          base: 'cursor-pointer hover:border-hero',
+          icon: 'max-sm:group-hover/radio-option:translate-x-0.5 sm:group-hover/radio-option:translate-x-1',
+        },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/selector/components/selector-link-group/components/selector-link-group-option/selector-link-group-option.types.ts

@@ -0,0 +1,21 @@
+import { AnchorHTMLAttributes } from 'react';
+import { AriaLinkOptions } from 'react-aria';
+
+import { type FlexiCellProps } from '../../../../../flexi-cell/index.js';
+
+export type SelectorLinkGroupOptionProps = {
+  /**
+   * href for link
+   */
+  href: string;
+  /**
+   * Whether option isDisabled
+   */
+  isDisabled?: boolean;
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & Omit<AriaLinkOptions, 'isDisabled' | 'elementType'> &
+  Omit<FlexiCellProps, 'dualAction' | 'href'> &
+  AnchorHTMLAttributes<Element>;

package/src/components/selector/components/selector-link-group/index.ts

@@ -0,0 +1,2 @@
+export { SelectorLinkGroup } from './selector-link-group.component.js';
+export { type SelectorLinkGroupProps } from './selector-link-group.types.js';

package/src/components/selector/components/selector-link-group/selector-link-group.component.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { createContext } from 'react';
+import { useField } from 'react-aria';
+
+import { ErrorMessage, Hint, Label } from '../../../index.js';
+
+import { SelectorLinkGroupOption } from './components/index.js';
+import { styles } from './selector-link-group.styles.js';
+import { SelectorLinkGroupProps } from './selector-link-group.types.js';
+
+export const SelectorLinkContext = createContext<{ isDisabled?: boolean }>({
+  isDisabled: undefined,
+});
+
+export function SelectorLinkGroup({
+  className,
+  children,
+  label,
+  orientation = 'vertical',
+  errorMessage,
+  description,
+  isDisabled,
+  ...props
+}: SelectorLinkGroupProps) {
+  const validationState = errorMessage ? 'invalid' : 'valid';
+  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({
+    validationState: validationState,
+    label,
+    errorMessage,
+    description,
+    ...props,
+  });
+
+  const state: { isDisabled?: boolean } = { isDisabled };
+
+  return (
+    <div className={styles({ className, orientation })} {...fieldProps}>
+      {label && <Label {...labelProps}>{label}</Label>}
+      {description && <Hint {...descriptionProps}>{description}</Hint>}
+      {errorMessage && <ErrorMessage {...errorMessageProps} message={errorMessage} />}
+      <SelectorLinkContext.Provider value={state}>{children}</SelectorLinkContext.Provider>
+    </div>
+  );
+}

package/src/components/selector/components/selector-link-group/selector-link-group.styles.ts

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

package/src/components/selector/components/selector-link-group/selector-link-group.types.ts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes } from 'react';
+import { AriaFieldProps } from 'react-aria';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './selector-link-group.styles.js';
+
+type Variants = VariantProps<typeof styles>;
+
+export type SelectorLinkGroupProps = {
+  /**
+   * Whether all options are disabled
+   */
+  isDisabled?: boolean;
+  /**
+   * Orientation of radio
+   */
+  orientation?: Variants['orientation'];
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & AriaFieldProps &
+  Omit<HTMLAttributes<Element>, 'onChange'>;

package/src/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.component.tsx

@@ -1,15 +1,8 @@
+'use client';
+
 import React, { forwardRef, useContext, useRef } from 'react';
 import { VisuallyHidden, mergeProps, useFocusRing, useRadio } from 'react-aria';
 
-import {
-  FlexiCellAdornment,
-  FlexiCellBody,
-  FlexiCellButton,
-  FlexiCellCircle,
-  FlexiCellFooter,
-  FlexiCellHint,
-  FlexiCellLabel,
-} from '../../../../../../components/flexi-cell/index.js';
 import { ArrowRightIcon, TickIcon } from '../../../../../../components/icon/index.js';
 import { FlexiCell } from '../../../../../index.js';
 import { SelectorRadioGroupContext } from '../../selector-radio-group.component.js';
@@ -25,10 +18,7 @@ function BaseSelectorRadioGroupOption(
     withBorder = true,
     withArrow,
     after,
-    badge,
-    badgeZIndex,
     before,
-    body = true,
     checkIcon = 'checkbox',
     ...props
   }: SelectorRadioGroupOptionProps,
@@ -37,8 +27,8 @@ function BaseSelectorRadioGroupOption(
   const state = useContext(SelectorRadioGroupContext);
   const localRef = useRef(null);
   const { inputProps, isSelected, isDisabled } = useRadio({ ...props, value, children }, state, localRef);
-  const { isFocused, focusProps } = useFocusRing();
-  const styles = selectorRadioGroupOptionStyles({ className, isSelected, isFocused, isDisabled, checkIcon });
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const styles = selectorRadioGroupOptionStyles({ className, isSelected, isFocusVisible, isDisabled, checkIcon });
 
   const FinalIcon = checkIcon === 'checkbox' ? TickIcon : ArrowRightIcon;
 
@@ -50,16 +40,12 @@ function BaseSelectorRadioGroupOption(
           <FinalIcon aria-hidden="true" className={styles.icon({})} />
         </div>
       }
-      badge={badge}
-      badgeZIndex={badgeZIndex}
       before={before}
-      body={body}
       withBorder={withBorder}
       withArrow={withArrow}
       tag="label"
       ref={ref}
       className={styles.base({})}
-      withHoverEffect
     >
       <VisuallyHidden>
         <input {...mergeProps(inputProps, focusProps)} ref={localRef} />
@@ -71,20 +57,5 @@ function BaseSelectorRadioGroupOption(
 
 export const SelectorRadioGroupOption = forwardRef(BaseSelectorRadioGroupOption) as React.ForwardRefExoticComponent<
   SelectorRadioGroupOptionProps & React.RefAttributes<unknown>
-> & {
-  Adornment: typeof FlexiCell.Adornment;
-  Body: typeof FlexiCell.Body;
-  Button: typeof FlexiCell.Button;
-  Circle: typeof FlexiCell.Circle;
-  Footer: typeof FlexiCell.Footer;
-  Hint: typeof FlexiCell.Hint;
-  Label: typeof FlexiCell.Label;
-};
-
-SelectorRadioGroupOption.Body = FlexiCellBody;
-SelectorRadioGroupOption.Footer = FlexiCellFooter;
-SelectorRadioGroupOption.Adornment = FlexiCellAdornment;
-SelectorRadioGroupOption.Hint = FlexiCellHint;
-SelectorRadioGroupOption.Label = FlexiCellLabel;
-SelectorRadioGroupOption.Button = FlexiCellButton;
-SelectorRadioGroupOption.Circle = FlexiCellCircle;
+>;
+SelectorRadioGroupOption.displayName = 'SelectorRadio';

package/src/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.styles.ts

@@ -3,13 +3,13 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'group/radio-option cursor-pointer',
+      base: 'group/radio-option max-sm:mb-0 max-sm:gap-2 max-sm:p-2 sm:mb-0 sm:gap-3 sm:p-3',
       icon: 'transition-transform',
     },
     variants: {
       checkIcon: {
         arrow: {
-          icon: 'text-primary group-hover/radio-option:translate-x-1',
+          icon: 'mr-[-6px] text-primary',
         },
         checkbox: {},
       },
@@ -19,7 +19,7 @@ export const styles = tv(
         },
         false: {},
       },
-      isFocused: {
+      isFocusVisible: {
         true: {
           base: 'focus-outline',
         },
@@ -29,7 +29,7 @@ export const styles = tv(
         true: {
           base: 'opacity-50',
         },
-        false: {},
+        false: { base: 'cursor-pointer hover:border-hero' },
       },
     },
     compoundVariants: [
@@ -47,6 +47,13 @@ export const styles = tv(
           icon: 'opacity-100',
         },
       },
+      {
+        checkIcon: 'arrow',
+        isDisabled: false,
+        className: {
+          icon: 'max-sm:group-hover/radio-option:translate-x-0.5 sm:group-hover/radio-option:translate-x-1',
+        },
+      },
     ],
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

package/src/components/selector/components/selector-radio-group/selector-radio-group.component.tsx

@@ -1,8 +1,10 @@
+'use client';
+
 import React, { createContext } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
 
-import { ErrorMessage, FormHint, FormLabel } from '../../../index.js';
+import { ErrorMessage, Hint, Label } from '../../../index.js';
 
 import { SelectorRadioGroupOption } from './components/index.js';
 import { styles } from './selector-radio-group.styles.js';
@@ -39,8 +41,8 @@ export function SelectorRadioGroup({
 
   return (
     <div className={styles({ className, orientation })} {...radioGroupProps}>
-      <FormLabel {...labelProps}>{label}</FormLabel>
-      {description && <FormHint {...descriptionProps}>{description}</FormHint>}
+      {label && <Label {...labelProps}>{label}</Label>}
+      {description && <Hint {...descriptionProps}>{description}</Hint>}
       {errorMessage && state.validationState === 'invalid' && (
         <ErrorMessage {...errorMessageProps} message={errorMessage} />
       )}
@@ -50,4 +52,3 @@ export function SelectorRadioGroup({
     </div>
   );
 }
-SelectorRadioGroup.Option = SelectorRadioGroupOption;

package/src/components/selector/components/selector-radio-group/selector-radio-group.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'flex gap-2 md:gap-3',
+    base: 'flex gap-2 sm:gap-3',
     variants: {
       orientation: {
         vertical: 'flex-col',

package/src/components/selector/index.ts

@@ -1,2 +1,17 @@
+export {
+  FlexiCellAdornment as SelectorAdornment,
+  FlexiCellBody as SelectorBody,
+  FlexiCellButton as SelectorButton,
+  FlexiCellCircle as SelectorCircle,
+  FlexiCellFooter as SelectorFooter,
+  FlexiCellHint as SelectorHint,
+} from '../flexi-cell/index.js';
+
+export { SelectorButtonGroupOption as SelectorButtonOption } from './components/selector-button-group/components/index.js';
+export { SelectorCheckboxGroupOption as SelectorCheckbox } from './components/selector-checkbox-group/components/index.js';
+export { SelectorLabel } from './components/selector-label/selector-label.component.js';
+export { SelectorLinkGroupOption as SelectorLink } from './components/selector-link-group/components/index.js';
+export { SelectorRadioGroupOption as SelectorRadio } from './components/selector-radio-group/components/index.js';
+
 export { Selector } from './selector.component.js';
 export { type SelectorProps } from './selector.types.js';

package/src/components/selector/selector.component.tsx

@@ -3,18 +3,11 @@
 import React from 'react';
 
 import {
-  FlexiCellAdornment,
-  FlexiCellBody,
-  FlexiCellButton,
-  FlexiCellCircle,
-  FlexiCellFooter,
-  FlexiCellHint,
-} from '../flexi-cell/components/index.js';
-
-import { SelectorCheckboxGroup, SelectorRadioGroup } from './components/index.js';
-import { SelectorCheckboxGroupOption } from './components/selector-checkbox-group/components/index.js';
-import { SelectorLabel } from './components/selector-label/index.js';
-import { SelectorRadioGroupOption } from './components/selector-radio-group/components/index.js';
+  SelectorButtonGroup,
+  SelectorCheckboxGroup,
+  SelectorLinkGroup,
+  SelectorRadioGroup,
+} from './components/index.js';
 import { type SelectorProps } from './selector.types.js';
 
 // TODO: react-aria doesn't consider the click as focus. so the focusRing will appeared just with the tab.
@@ -22,15 +15,13 @@ export function Selector(props: SelectorProps) {
   if (props.type === 'checkbox') {
     return <SelectorCheckboxGroup {...props} />;
   }
-  return <SelectorRadioGroup {...props} />;
+  if (props.type === 'radio') {
+    return <SelectorRadioGroup {...props} />;
+  }
+  if (props.type === 'button') {
+    return <SelectorButtonGroup {...props} />;
+  }
+  if (props.type === 'link') {
+    return <SelectorLinkGroup {...props} />;
+  }
 }
-
-Selector.Radio = SelectorRadioGroupOption;
-Selector.Checkbox = SelectorCheckboxGroupOption;
-Selector.Body = FlexiCellBody;
-Selector.Footer = FlexiCellFooter;
-Selector.Adornment = FlexiCellAdornment;
-Selector.Hint = FlexiCellHint;
-Selector.Label = SelectorLabel;
-Selector.Button = FlexiCellButton;
-Selector.Circle = FlexiCellCircle;

package/src/components/selector/selector.types.ts

@@ -1,8 +1,19 @@
 import { ReactNode } from 'react';
 
-import { type SelectorCheckboxGroupProps, type SelectorRadioGroupProps } from './components/index.js';
+import {
+  type SelectorButtonGroupProps,
+  type SelectorCheckboxGroupProps,
+  type SelectorLinkGroupProps,
+  type SelectorRadioGroupProps,
+} from './components/index.js';
 
 export type SelectorPropsPerType = {
+  button: {
+    /**
+     * Type button
+     */
+    type: 'button';
+  } & SelectorButtonGroupProps;
   checkbox: {
     children: ReactNode;
     /**
@@ -10,6 +21,12 @@ export type SelectorPropsPerType = {
      */
     type: 'checkbox';
   } & SelectorCheckboxGroupProps;
+  link: {
+    /**
+     * Type link
+     */
+    type: 'link';
+  } & SelectorLinkGroupProps;
   radio: {
     children: ReactNode;
     /**
@@ -21,4 +38,9 @@ export type SelectorPropsPerType = {
 
 export type SelectorPropsType = keyof SelectorPropsPerType;
 
-export type SelectorProps<K extends SelectorPropsType = SelectorPropsType> = SelectorPropsPerType[K];
+export type SelectorProps<K extends SelectorPropsType = SelectorPropsType> = SelectorPropsPerType[K] & {
+  /**
+   * <SelectorRadio /> | <SelectorCheckbox /> children
+   */
+  children?: ReactNode;
+};

package/src/components/switch/switch.component.tsx

@@ -25,8 +25,8 @@ export function Switch({
     state,
     ref,
   );
-  const { isFocused, focusProps } = useFocusRing();
-  const styles = switchStyles({ block, isFocused, isSelected, isDisabled, size });
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const styles = switchStyles({ block, isFocusVisible, isSelected, isDisabled, size });
 
   return (
     <label className={styles.base({ className })}>

package/src/components/switch/switch.styles.ts

@@ -23,7 +23,7 @@ export const styles = tv(
           switchDiv: 'h-[2.875rem] w-14 rounded-[2.875rem] after:h-[2.875rem] after:w-[2.875rem]',
         },
       },
-      isFocused: {
+      isFocusVisible: {
         true: {
           switchDiv: 'focus-outline',
         },