@westpac/ui 0.13.0 → 0.14.0

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';

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

@@ -1,32 +0,0 @@
-import React, { forwardRef, useContext, useRef } from 'react';
-import { VisuallyHidden, useFocusRing, useRadio } from 'react-aria';
-
-import { RadioGroupContext } from '../../radio-group.component.js';
-
-import { styles as radioStyles } from './radio.styles.js';
-import { type RadioProps } from './radio.types.js';
-
-function BaseRadio({ className, hint, children, ...props }: RadioProps, ref: any) {
-  const state = useContext(RadioGroupContext);
-  const { size, orientation } = state;
-  const localRef = useRef(null);
-  const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children }, state, localRef);
-  const { isFocused, focusProps } = useFocusRing();
-  const styles = radioStyles({ isDisabled, isSelected, isFocused, size, orientation });
-
-  return (
-    <label className={styles.base({ className })} ref={ref}>
-      <VisuallyHidden>
-        <input {...inputProps} {...focusProps} ref={localRef} />
-      </VisuallyHidden>
-      <div className={styles.selector()} />
-      <div className={styles.textWrapper()}>
-        <span className={styles.labelText()}>{children}</span>
-        {hint && <span className={styles.hintText()}>{hint}</span>}
-      </div>
-    </label>
-  );
-}
-
-export const Radio = forwardRef(BaseRadio);
-Radio.displayName = 'RadioGroup.Radio';

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

@@ -1,51 +0,0 @@
-import { tv } from 'tailwind-variants';
-
-export const styles = tv(
-  {
-    slots: {
-      base: 'flex',
-      textWrapper: 'flex flex-col justify-center',
-      labelText: 'typography-body-10 py-[2px] pl-1',
-      hintText: 'typography-body-10 pl-1 text-muted',
-      selector: 'flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-hero',
-    },
-    variants: {
-      isDisabled: {
-        true: {
-          labelText: 'text-muted',
-          selector: 'border-border bg-border-20 before:bg-border',
-        },
-        false: {
-          base: 'hover:cursor-pointer',
-        },
-      },
-      isSelected: {
-        true: {
-          selector: 'before:block before:h-2 before:w-2 before:rounded-full before:bg-hero',
-        },
-      },
-      isFocused: {
-        true: { selector: 'focus-outline' },
-      },
-      orientation: {
-        horizontal: {
-          base: 'mr-3',
-        },
-        vertical: {
-          base: '',
-        },
-      },
-      size: {
-        large: {
-          selector: 'h-5 w-5',
-          base: 'mb-2',
-        },
-        medium: {
-          selector: 'h-4 w-4',
-          base: 'mb-1',
-        },
-      },
-    },
-  },
-  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
-);

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

@@ -1,13 +0,0 @@
-import { ReactNode } from 'react';
-import { type AriaRadioProps } from 'react-aria';
-
-export type RadioProps = {
-  /**
-   * `string` for overriding base style
-   */
-  className?: string;
-  /**
-   * Renders hint under radio, most likely a `string` but could be something else
-   */
-  hint?: ReactNode;
-} & AriaRadioProps;

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

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

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

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

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

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

package/src/components/table/components/caption/caption.component.tsx

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

package/src/components/table/components/caption/caption.types.ts

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

package/src/components/table/components/caption/index.ts

@@ -1,2 +0,0 @@
-export { Caption } from './caption.component.js';
-export { type CaptionProps } from './caption.types.js';

package/src/components/table/components/cell/cell.component.tsx

@@ -1,16 +0,0 @@
-import React, { useContext } from 'react';
-
-import { TableContext } from '../../table.component.js';
-
-import { styles as cellStyles } from './cell.styles.js';
-import { type CellProps } from './cell.types.js';
-
-export function Cell({ className, children, highlighted, highlightStart, ...props }: CellProps) {
-  const { bordered } = useContext(TableContext);
-  const styles = cellStyles({ bordered, highlighted, highlightStart });
-  return (
-    <td className={styles.base({ className })} {...props}>
-      {children}
-    </td>
-  );
-}

package/src/components/table/components/cell/cell.types.ts

@@ -1,14 +0,0 @@
-import { TdHTMLAttributes } from 'react';
-
-export type CellProps = {
-  /**
-   * Should be `true` if cell is start of highlight
-   */
-  highlightStart?: boolean;
-  /**
-   * Should be `true` if cell should be highlighted
-   * If cell is first cell in a highlight block highlightStart should also be `true`
-   * If multiple cells need to be highlighted it may be easier to pass array of cells through Row
-   */
-  highlighted?: boolean;
-} & TdHTMLAttributes<HTMLTableCellElement>;

package/src/components/table/components/cell/index.ts

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

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

@@ -1,20 +0,0 @@
-import React, { useContext } from 'react';
-
-import { TableContext } from '../../table.component.js';
-
-import { styles as footerStyles } from './footer.styles.js';
-import { type FooterProps } from './footer.types.js';
-
-export function Footer({ className, children, colspan, ...props }: FooterProps) {
-  const { bordered } = useContext(TableContext);
-  const styles = footerStyles({ bordered });
-  return (
-    <tfoot {...props}>
-      <tr>
-        <td className={styles.base({ className })} colSpan={colspan}>
-          {children}
-        </td>
-      </tr>
-    </tfoot>
-  );
-}

package/src/components/table/components/footer/footer.styles.ts

@@ -1,13 +0,0 @@
-import { tv } from 'tailwind-variants';
-
-export const styles = tv(
-  {
-    slots: { base: 'typography-body-10 p-2 text-left font-light text-muted' },
-    variants: {
-      bordered: {
-        true: { base: 'border border-border' },
-      },
-    },
-  },
-  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
-);

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

@@ -1,8 +0,0 @@
-import { HTMLAttributes } from 'react';
-
-export type FooterProps = {
-  /**
-   * Span for footer, should be same length as amount of columns in table
-   */
-  colspan: number;
-} & HTMLAttributes<HTMLTableSectionElement>;

package/src/components/table/components/footer/index.ts

@@ -1,2 +0,0 @@
-export { Footer } from './footer.component.js';
-export { type FooterProps } from './footer.types.js';

package/src/components/table/components/header/header.component.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { styles } from './header.styles.js';
-import { type HeaderProps } from './header.types.js';
-
-export function Header({ className, children, ...props }: HeaderProps) {
-  return (
-    <thead className={styles({ className })} {...props}>
-      {children}
-    </thead>
-  );
-}

package/src/components/table/components/header/header.types.ts

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

package/src/components/table/components/header-cell/header-cell.component.tsx

@@ -1,16 +0,0 @@
-import React, { useContext } from 'react';
-
-import { TableContext } from '../../table.component.js';
-
-import { styles as headerCellStyles } from './header-cell.styles.js';
-import { type HeaderCellProps } from './header-cell.types.js';
-
-export function HeaderCell({ className, children, ...props }: HeaderCellProps) {
-  const { bordered } = useContext(TableContext);
-  const styles = headerCellStyles({ bordered });
-  return (
-    <th className={styles.base({ className })} {...props}>
-      {children}
-    </th>
-  );
-}

package/src/components/table/components/header-cell/header-cell.styles.ts

@@ -1,15 +0,0 @@
-import { tv } from 'tailwind-variants';
-
-export const styles = tv(
-  {
-    slots: {
-      base: 'typography-body-10 border border-x-0 border-b-[3px] border-t-0 border-hero p-2 text-left align-bottom text-text',
-    },
-    variants: {
-      bordered: {
-        true: { base: 'border-x border-t border-x-border border-t-border' },
-      },
-    },
-  },
-  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
-);

package/src/components/table/components/header-cell/header-cell.types.ts

@@ -1,3 +0,0 @@
-import { ThHTMLAttributes } from 'react';
-
-export type HeaderCellProps = ThHTMLAttributes<HTMLTableCellElement>;

package/src/components/table/components/header-cell/index.ts

@@ -1,2 +0,0 @@
-export { HeaderCell } from './header-cell.component.js';
-export { type HeaderCellProps } from './header-cell.types.js';

package/src/components/table/components/header-row/header-row.component.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { styles } from './header-row.styles.js';
-import { type HeaderRowProps } from './header-row.types.js';
-
-export function HeaderRow({ className, children, ...props }: HeaderRowProps) {
-  return (
-    <tr className={styles({ className })} {...props}>
-      {children}
-    </tr>
-  );
-}

package/src/components/table/components/header-row/header-row.types.ts

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

package/src/components/table/components/header-row/index.ts

@@ -1,2 +0,0 @@
-export { HeaderRow } from './header-row.component.js';
-export { type HeaderRowProps } from './header-row.types.js';

package/src/components/table/components/row/index.ts

@@ -1,2 +0,0 @@
-export { Row } from './row.component.js';
-export { type RowProps } from './row.types.js';