@westpac/ui 0.12.0 → 0.14.0

package/src/components/input-field/input-field.component.tsx

@@ -1,113 +0,0 @@
-'use client';
-
-import React, { Children, ReactNode, cloneElement, isValidElement, useCallback, useId, useMemo } from 'react';
-
-import { ErrorMessage, FormHint, FormLabel } from '../index.js';
-
-import { InputAddOn } from './components/add-ons/add-ons.component.js';
-import { SupportingText } from './components/index.js';
-import { styles } from './input-field.styles.js';
-import { type InputFieldProps } from './input-field.types.js';
-
-export function InputField({
-  label,
-  hideLabel,
-  size = 'medium',
-  hint,
-  errorMessage,
-  supportingText,
-  instanceId,
-  after,
-  before,
-  children,
-  tag: Tag = 'div',
-  ...props
-}: InputFieldProps) {
-  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 as ReactNode, 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 as ReactNode, icon: undefined, inset: false };
-  }, [after]);
-
-  const renderChildren = useCallback(() => {
-    return Children.map<ReactNode, ReactNode>(children, child => {
-      if (isValidElement(child)) {
-        return cloneElement(child, {
-          size,
-          id,
-          'aria-describedby': ariaDescribedByValue,
-        } as any);
-      }
-    });
-  }, [children, ariaDescribedByValue]);
-
-  const isFieldset = useMemo(() => Tag === 'fieldset', [Tag]);
-
-  return (
-    <Tag className={styles({ before: !!before, after: !!after, afterInset, beforeInset })} {...props}>
-      {label && (
-        <FormLabel srOnly={hideLabel} tag={isFieldset ? 'legend' : 'label'} {...(!isFieldset && { htmlFor: id })}>
-          {label}
-        </FormLabel>
-      )}
-      {hint && <FormHint id={`${id}-hint`}>{hint}</FormHint>}
-      {errorMessage && <ErrorMessage id={`${id}-error`} message={errorMessage} />}
-      <div className="relative flex">
-        {before && (
-          <InputAddOn position="before" size={size} inset={beforeInset} icon={beforeIcon} id={id}>
-            {beforeElement}
-          </InputAddOn>
-        )}
-        {renderChildren()}
-        {after && (
-          <InputAddOn position="after" size={size} inset={afterInset} icon={afterIcon} id={id}>
-            {afterElement}
-          </InputAddOn>
-        )}
-      </div>
-      {supportingText && <SupportingText id={`${id}-supporting-text`}>{supportingText}</SupportingText>}
-    </Tag>
-  );
-}

package/src/components/input-field/input-field.styles.ts

@@ -1,48 +0,0 @@
-import { tv } from 'tailwind-variants';
-
-export const styles = tv(
-  {
-    base: 'group m-0 mb-5 border-none p-0',
-    variants: {
-      before: {
-        true: '',
-        false: '',
-      },
-      after: {
-        true: '',
-        false: '',
-      },
-      beforeInset: {
-        true: '',
-        false: '',
-      },
-      afterInset: {
-        true: '',
-        false: '',
-      },
-    },
-    compoundVariants: [
-      {
-        after: true,
-        afterInset: false,
-        className: 'input-field-after',
-      },
-      {
-        before: true,
-        beforeInset: false,
-        className: 'input-field-before',
-      },
-      {
-        after: true,
-        afterInset: true,
-        className: 'input-field-inset-after',
-      },
-      {
-        before: true,
-        beforeInset: true,
-        className: 'input-field-inset-before',
-      },
-    ],
-  },
-  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
-);

package/src/components/input-field/input-field.types.ts

@@ -1,61 +0,0 @@
-import { type ReactNode } from 'react';
-
-import { type IconProps } from '../icon/index.js';
-
-export type Composition = Record<'before' | 'after', string | null>;
-
-export type Sizes = 'small' | 'medium' | 'large' | 'xlarge';
-
-export type InputFieldContextType = {
-  ariaDescribedByValue: string;
-  id: string;
-  size: Sizes;
-};
-
-export type InputFieldProps = {
-  /**
-   * After element
-   */
-  after?: ReactNode | { element?: ReactNode; icon?: (props: Omit<IconProps, 'icon'>) => JSX.Element; inset?: boolean };
-  /**
-   * Before element
-   */
-  before?: ReactNode | { element?: ReactNode; icon?: (props: Omit<IconProps, 'icon'>) => JSX.Element; inset?: boolean };
-  /**
-   * Children
-   */
-  children?: ReactNode;
-  /**
-   * Error message text
-   */
-  errorMessage?: string | string[];
-  /**
-   * Visually hide label
-   */
-  hideLabel?: boolean;
-  /**
-   * Hint text
-   */
-  hint?: ReactNode;
-  /**
-   * Define an id for internal elements
-   */
-  instanceId?: string;
-  /**
-   * Label text
-   */
-  label?: string;
-  /**
-   * Size for Before/After/Input child components
-   */
-  size?: Sizes;
-  /**
-   * Supporting text
-   */
-  supportingText?: ReactNode;
-  /**
-   * Tag to render
-   */
-  // TODO: maybe we could limit the tags to be only fieldset or div?
-  tag?: keyof JSX.IntrinsicElements;
-};

package/src/components/list/components/item/index.ts

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

package/src/components/list/components/item/item.component.tsx

@@ -1,55 +0,0 @@
-import React, { forwardRef, useContext } from 'react';
-import { useFocusRing } from 'react-aria';
-
-import { ListContext } from '../../list.component.js';
-import { getStateValues } from '../../list.utils.js';
-
-import { styles as itemStyles } from './item.styles.js';
-import { type ItemProps } from './item.types.js';
-
-export function BaseItem({ className, children, href, look, type, spacing, icon, ...props }: ItemProps, ref: any) {
-  const state = useContext(ListContext);
-
-  const stateValues = getStateValues({ look, type, spacing, state, icon });
-
-  look = stateValues.look;
-  type = stateValues.type;
-  const Icon = stateValues.icon;
-  const { isFocusVisible, focusProps } = useFocusRing();
-
-  const styles = itemStyles({
-    look,
-    type,
-    spacing: stateValues.spacing,
-    icon: !!Icon,
-    nested: (state.nested && state.nested > 0) || false,
-    isFocusVisible,
-  });
-
-  const bulletToRender = () => {
-    if (type === 'ordered' || type === 'unstyled') {
-      return null;
-    }
-    if ((type === 'icon' || type === 'link') && Icon) {
-      return <Icon size="small" className={styles.bullet()} color={look} data-testid={type} />;
-    }
-    return <div className={styles.bullet()} data-testid={type} />;
-  };
-
-  return (
-    <div className={styles.wrapper()} key={state.nested}>
-      {bulletToRender()}
-      <li className={styles.base({ className })} {...props}>
-        {type === 'link' ? (
-          <a href={href} className={styles.link()} ref={ref} {...focusProps}>
-            {children}
-          </a>
-        ) : (
-          children
-        )}
-      </li>
-    </div>
-  );
-}
-
-export const Item = forwardRef(BaseItem);

package/src/components/list/components/item/item.styles.ts

@@ -1,88 +0,0 @@
-import { tv } from 'tailwind-variants';
-
-export const styles = tv(
-  {
-    slots: {
-      base: 'pl-[1.1875rem]',
-      bullet: 'absolute block border',
-      link: 'text-text hover:cursor-pointer hover:underline',
-      wrapper: 'relative',
-    },
-    variants: {
-      icon: {
-        true: {},
-      },
-      spacing: {
-        medium: {
-          base: 'my-1',
-        },
-        large: {
-          base: 'my-2',
-        },
-      },
-      look: {
-        primary: {
-          bullet: 'border-primary bg-primary after:border-primary',
-        },
-        hero: {
-          bullet: 'border-hero bg-hero after:border-hero',
-        },
-        neutral: {
-          bullet: 'border-neutral bg-neutral after:border-neutral',
-        },
-        success: {
-          bullet: 'border-success bg-success after:border-success',
-        },
-        danger: {
-          bullet: 'border-danger bg-danger after:border-danger',
-        },
-        link: {
-          bullet: 'border-link bg-link after:border-link',
-        },
-      },
-      type: {
-        bullet: {
-          bullet: 'left-[0.25rem] top-1 h-[0.5rem] w-[0.5rem] rounded-full',
-        },
-        link: {
-          bullet:
-            'left-[0.125rem] top-1 h-[0.5rem] w-[0.5rem] rotate-45 border-b-0 border-l-0 border-r-[0.125rem] border-t-[0.125rem] bg-[transparent]',
-        },
-        tick: {
-          bullet:
-            ' left-[0.125rem] top-[0.3125rem] h-1 w-2 rotate-[-44deg] border-b-[0.125rem] border-l-[0.125rem] border-r-0 border-t-0 bg-[transparent]',
-        },
-        cross: {
-          bullet:
-            'left-1 top-[0.25rem] h-2 w-0 -rotate-45 border-y-0 border-l-[0.125rem] border-r-0 bg-[transparent] after:absolute after:left-[-0.125rem] after:block after:h-2 after:w-0 after:rotate-90 after:border-y-0 after:border-l-[0.125rem] after:border-r-0',
-        },
-        unstyled: {
-          base: 'pl-0',
-          bullet: 'pl-[1.1875rem] ',
-        },
-        icon: {
-          base: '',
-          bullet: 'border-none bg-[transparent]',
-        },
-        ordered: {
-          base: 'pl-0',
-        },
-      },
-      nested: {
-        true: { bullet: 'bg-[transparent]' },
-      },
-      isFocusVisible: {
-        true: { link: 'focus-outline' },
-      },
-    },
-    compoundSlots: [
-      {
-        slots: ['bullet'],
-        type: 'link',
-        icon: true,
-        className: 'left-0 top-0 h-3 w-3 rotate-0 border-none bg-[transparent]',
-      },
-    ],
-  },
-  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
-);

package/src/components/list/components/item/item.types.ts

@@ -1,30 +0,0 @@
-import { HTMLAttributes } from 'react';
-
-import { IconProps } from '../../../icon/index.js';
-
-export type ItemProps = {
-  /**
-   * Renders `<a>` link element around the item content
-   */
-  href?: string;
-  /**
-   * The icon for list item
-   */
-  icon?: (props: IconProps) => JSX.Element;
-  /**
-   * The look of the bullet, icon, tick and cross lists
-   */
-  look?: 'primary' | 'hero' | 'neutral' | 'success' | 'danger' | 'link';
-  /**
-   * The level of nesting
-   */
-  nested?: number;
-  /**
-   * The size of space between list elements
-   */
-  spacing?: 'medium' | 'large';
-  /**
-   * The list style
-   */
-  type?: 'bullet' | 'link' | 'tick' | 'cross' | 'unstyled' | 'icon' | 'ordered';
-} & HTMLAttributes<Element>;

package/src/components/modal/components/backdrop/backdrop.component.tsx

@@ -1,29 +0,0 @@
-import React, { useRef } from 'react';
-import { Overlay, useModalOverlay } from 'react-aria';
-
-import { styles as backdropStyles } from './backdrop.styles.js';
-import { type BackdropProps } from './backdrop.types.js';
-
-export function Backdrop({ zIndex = 100, portalContainer, ...props }: BackdropProps) {
-  const { children, state, className } = props;
-
-  const ref = useRef(null);
-  const styles = backdropStyles({ className });
-
-  const { modalProps, underlayProps } = useModalOverlay(props, state, ref);
-
-  // Don't render anything if the modal is not open and we're not animating out.
-  if (!state.isOpen) {
-    return null;
-  }
-
-  return (
-    <Overlay portalContainer={portalContainer}>
-      <div style={{ zIndex }} className={styles.base()} {...underlayProps}>
-        <div {...modalProps} ref={ref} className={styles.modal()}>
-          {children}
-        </div>
-      </div>
-    </Overlay>
-  );
-}

package/src/components/modal/components/backdrop/backdrop.styles.ts

@@ -1,8 +0,0 @@
-import { tv } from 'tailwind-variants';
-
-export const styles = tv({
-  slots: {
-    base: 'fixed inset-0 z-50 flex animate-fadeIn justify-center overflow-y-auto bg-black/50 p-2',
-    modal: 'relative top-5 z-10 h-fit w-full animate-fadeInDown',
-  },
-});

package/src/components/modal/components/backdrop/backdrop.types.ts

@@ -1,25 +0,0 @@
-import { type AriaModalOverlayProps } from 'react-aria';
-import { type OverlayTriggerState } from 'react-stately';
-
-export type BackdropProps = {
-  /**
-   * Inner part of backdrop
-   */
-  children: React.ReactNode;
-  /**
-   * Clasname
-   */
-  className?: string;
-  /**
-   * Element where backdrop will be placed
-   */
-  portalContainer?: Element;
-  /**
-   * OverlayTriggerState props
-   */
-  state: OverlayTriggerState;
-  /**
-   * zIndex of content inside
-   */
-  zIndex?: number;
-} & AriaModalOverlayProps;

package/src/components/modal/components/backdrop/index.ts

@@ -1,2 +0,0 @@
-export { Backdrop } from './backdrop.component.js';
-export { type BackdropProps } from './backdrop.types.js';

package/src/components/modal/components/dialog/components/dialog-body/dialog-body.component.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { styles } from './dialog-body.styles.js';
-import { type DialogBodyProps } from './dialog-body.types.js';
-
-export function DialogBody({ className, children, ...props }: DialogBodyProps) {
-  return (
-    <div className={styles({ className })} {...props}>
-      {children}
-    </div>
-  );
-}

package/src/components/modal/components/dialog/components/dialog-body/dialog-body.styles.ts

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

package/src/components/modal/components/dialog/components/dialog-body/dialog-body.types.ts

@@ -1,3 +0,0 @@
-import { HTMLAttributes } from 'react';
-
-export type DialogBodyProps = HTMLAttributes<HTMLElement>;

package/src/components/modal/components/dialog/components/dialog-body/index.ts

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

package/src/components/modal/components/dialog/components/dialog-footer/dialog-footer.component.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { styles } from './dialog-footer.styles.js';
-import { type DialogFooterProps } from './dialog-footer.types.js';
-
-export function DialogFooter({ className, children, ...props }: DialogFooterProps) {
-  return (
-    <div className={styles({ className })} {...props}>
-      {children}
-    </div>
-  );
-}

package/src/components/modal/components/dialog/components/dialog-footer/dialog-footer.types.ts

@@ -1,3 +0,0 @@
-import { HTMLAttributes } from 'react';
-
-export type DialogFooterProps = HTMLAttributes<HTMLElement>;

package/src/components/modal/components/dialog/components/dialog-footer/index.ts

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

package/src/components/modal/components/dialog/dialog.component.tsx

@@ -1,38 +0,0 @@
-import React, { useRef } from 'react';
-import { useDialog, useFocusRing } from 'react-aria';
-
-import { CloseIcon } from '../../../../components/icon/index.js';
-
-import { DialogBody } from './components/dialog-body/index.js';
-import { DialogFooter } from './components/dialog-footer/index.js';
-import { styles as dialogStyles } from './dialog.styles.js';
-import { type DialogProps } from './dialog.types.js';
-
-export function Dialog({ className, body, onClose, size = 'md', ...props }: DialogProps) {
-  const { children } = props;
-  const { isFocusVisible, focusProps } = useFocusRing();
-  const styles = dialogStyles({ className, size, isFocusVisible });
-
-  const ref = useRef(null);
-
-  const { dialogProps, titleProps } = useDialog(props, ref);
-
-  return (
-    <div {...dialogProps} ref={ref} className={styles.base()}>
-      {onClose && (
-        <button className={styles.close()} onClick={onClose} aria-label="Close modal" {...focusProps}>
-          <CloseIcon className="block" size="small" />
-        </button>
-      )}
-      {props.title && (
-        <h3 {...titleProps} className={styles.title()}>
-          {props.title}
-        </h3>
-      )}
-      {body ? <DialogBody>{children}</DialogBody> : children}
-    </div>
-  );
-}
-
-Dialog.Body = DialogBody;
-Dialog.Footer = DialogFooter;

package/src/components/modal/components/dialog/dialog.styles.ts

@@ -1,29 +0,0 @@
-import { tv } from 'tailwind-variants';
-
-export const styles = tv(
-  {
-    slots: {
-      base: 'relative mx-auto max-w-full overflow-hidden rounded bg-white outline-none',
-      title: 'border-b border-b-heading pb-2 pl-4 pr-5 pt-3 text-lg font-medium',
-      close: 'absolute right-1 top-1 block p-1',
-    },
-    variants: {
-      size: {
-        lg: {
-          base: 'w-[56.25rem]',
-        },
-        md: {
-          base: 'w-[37.5rem]',
-        },
-        sm: {
-          base: 'w-[18.75rem]',
-        },
-      },
-      isFocusVisible: {
-        true: { close: 'focus-outline' },
-        false: { close: 'outline-none' },
-      },
-    },
-  },
-  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
-);

package/src/components/modal/components/dialog/dialog.types.ts

@@ -1,33 +0,0 @@
-import { type AriaDialogProps } from 'react-aria';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './dialog.styles.js';
-
-type Variants = VariantProps<typeof styles>;
-
-export type DialogProps = {
-  /**
-   * Boolean to wrap all children into a Modal.Body
-   */
-  body?: boolean;
-  /**
-   * Inner part of Dialog
-   */
-  children: React.ReactNode;
-  /**
-   * Additional className for Dialog
-   */
-  className?: string;
-  /**
-   * onClose callback
-   */
-  onClose?: () => unknown;
-  /**
-   * Size of dialog
-   */
-  size?: Variants['size'];
-  /**
-   * Title for Modal
-   */
-  title?: string;
-} & AriaDialogProps;

package/src/components/modal/components/dialog/index.ts

@@ -1,2 +0,0 @@
-export { Dialog } from './dialog.component.js';
-export { type DialogProps } from './dialog.types.js';

package/src/components/panel/components/body/body.component.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-
-import { styles as bodyStyles } from './body.styles.js';
-import { type BodyProps } from './body.types.js';
-
-export function Body({ className, children, ...props }: BodyProps) {
-  const styles = bodyStyles({});
-  return (
-    <div className={styles.base({ className })} {...props}>
-      {children}
-    </div>
-  );
-}

package/src/components/panel/components/body/body.types.ts

@@ -1,3 +0,0 @@
-import { HTMLAttributes } from 'react';
-
-export type BodyProps = HTMLAttributes<Element>;

package/src/components/panel/components/body/index.ts

@@ -1,2 +0,0 @@
-export { Body } from './body.component.js';
-export { type BodyProps } from './body.types.js';

package/src/components/panel/components/footer/footer.component.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-
-import { styles as footerStyles } from './footer.styles.js';
-import { type FooterProps } from './footer.types.js';
-
-export function Footer({ className, children, ...props }: FooterProps) {
-  const styles = footerStyles();
-  return (
-    <div className={styles.base({ className })} {...props}>
-      {children}
-    </div>
-  );
-}

package/src/components/panel/components/footer/footer.types.ts

@@ -1,3 +0,0 @@
-import { HTMLAttributes } from 'react';
-
-export type FooterProps = HTMLAttributes<Element>;

package/src/components/radio-group/components/radio/index.ts

@@ -1,2 +0,0 @@
-export { Radio } from './radio.component.js';
-export { type RadioProps } from './radio.types.js';