npm - @westpac/ui - Versions diffs - 0.7.0 → 0.8.0 - Mend

@westpac/ui 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (687) hide show

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

@@ -1,10 +1,7 @@
 import { type ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
 import { type IconProps } from '../icon/index.js';
-import { styles } from './input-field.styles.js';
 export type Composition = Record<'before' | 'after', string | null>;
 export type Sizes = 'small' | 'medium' | 'large' | 'xlarge';
@@ -61,4 +58,4 @@ export type InputFieldProps = {
    */
   // TODO: maybe we could limit the tags to be only fieldset or div?
   tag?: keyof JSX.IntrinsicElements;
-} & Omit<VariantProps<typeof styles>, 'before' | 'after'>;
+};

package/src/components/link/link.component.tsx CHANGED Viewed

@@ -1,3 +1,5 @@
+'use client';
 import React, { forwardRef, useRef } from 'react';
 import { mergeProps, useFocusRing, useLink } from 'react-aria';

package/src/components/list/list.component.tsx CHANGED Viewed

@@ -1,3 +1,5 @@
+'use client';
 import React, { Children, ReactElement, cloneElement, createContext, useContext } from 'react';
 import { Item } from './components/item/index.js';

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

@@ -1,8 +1,5 @@
 import { type AriaModalOverlayProps } from 'react-aria';
 import { type OverlayTriggerState } from 'react-stately';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './backdrop.styles.js';
 export type BackdropProps = {
   /**
@@ -25,5 +22,4 @@ export type BackdropProps = {
    * zIndex of content inside
    */
   zIndex?: number;
-} & VariantProps<typeof styles> &
-  AriaModalOverlayProps;
+} & AriaModalOverlayProps;

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

@@ -1,6 +1,3 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './dialog-body.styles.js';
-export type DialogBodyProps = VariantProps<typeof styles> & HTMLAttributes<HTMLElement>;
+export type DialogBodyProps = HTMLAttributes<HTMLElement>;

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

@@ -1,6 +1,3 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-import { styles } from './dialog-footer.styles.js';
-export type DialogFooterProps = VariantProps<typeof styles> & HTMLAttributes<HTMLElement>;
+export type DialogFooterProps = HTMLAttributes<HTMLElement>;

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

@@ -3,6 +3,8 @@ 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
@@ -20,9 +22,12 @@ export type DialogProps = {
    * onClose callback
    */
   onClose?: () => unknown;
+  /**
+   * Size of dialog
+   */
+  size?: Variants['size'];
   /**
    * Title for Modal
    */
   title?: string;
-} & VariantProps<typeof styles> &
-  AriaDialogProps;
+} & AriaDialogProps;

package/src/components/modal/modal.component.tsx CHANGED Viewed

@@ -1,3 +1,5 @@
+'use client';
 import React from 'react';
 import { Backdrop, Dialog } from './components/index.js';

package/src/components/pagination/components/pagination-item/pagination-item.component.tsx CHANGED Viewed

@@ -6,6 +6,7 @@ import { type PaginationItemProps } from './pagination-item.types.js';
 export function PaginationItem({
   className,
   firstItem = false,
+  lastItem = false,
   tag: Tag = 'a',
   children,
   active,
@@ -14,7 +15,7 @@ export function PaginationItem({
 }: PaginationItemProps) {
   return (
     <Tag
-      className={styles({ className, firstItem, active, disabled })}
+      className={styles({ className, firstItem, lastItem, active, disabled })}
       {...props}
       disabled={disabled}
       aria-current={active ? 'page' : undefined}

package/src/components/pagination/components/pagination-item/pagination-item.styles.ts CHANGED Viewed

@@ -2,14 +2,18 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
-    base: 'typography-body-10 block border-l border-border px-2 py-[0.5625rem] text-center text-text transition-colors',
+    base: 'typography-body-10 relative block border border-border px-2 py-[0.5625rem] text-center text-text transition-colors',
     variants: {
       firstItem: {
-        true: 'border-l-0',
+        true: 'rounded-l-[0.1875rem]',
+        false: 'ml-[-1px]',
+      },
+      lastItem: {
+        true: 'rounded-r-[0.1875rem]',
         false: '',
       },
       active: {
-        true: 'bg-hero text-white',
+        true: 'z-10 border-hero bg-hero text-white',
         false: 'hover:bg-light',
       },
       disabled: {

package/src/components/pagination/components/pagination-item/pagination-item.types.ts CHANGED Viewed

@@ -1,12 +1,29 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement } from 'react';
-import { type VariantProps } from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
 import { styles } from './pagination-item.styles.js';
+type Variants = VariantProps<typeof styles>;
 export type PaginationItemProps = {
+  /**
+   * Whether item is active
+   */
+  active?: Variants['active'];
+  /**
+   * Whether item is disabled
+   */
+  disabled?: Variants['disabled'];
+  /**
+   * Whether it is the first item
+   */
+  firstItem?: Variants['firstItem'];
+  /**
+   * Whether it is the last item
+   */
+  lastItem?: Variants['lastItem'];
   /**
    * Link component to render
    */
   tag?: 'a' | 'button' | ((...args: any[]) => ReactElement | null);
-} & VariantProps<typeof styles> &
-  (AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>);
+} & (AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>);

package/src/components/pagination/pagination.component.tsx CHANGED Viewed

@@ -1,3 +1,5 @@
+'use client';
 import React, { useCallback, useMemo } from 'react';
 import { PaginationItem } from './components/index.js';
@@ -84,6 +86,7 @@ export function Pagination({
     const defaultNextProps = {
       disabled: !infinite && backwardsOnly,
       tag: linkComponent,
+      lastItem: true,
     };
     if (defaultNextProps.disabled) {
       return {

package/src/components/pagination/pagination.styles.ts CHANGED Viewed

@@ -4,7 +4,7 @@ export const styles = tv(
   {
     slots: {
       base: 'flex flex-col items-center',
-      ul: 'flex overflow-hidden rounded border border-border',
+      ul: 'flex overflow-hidden',
     },
     variants: {},
   },

package/src/components/pagination/pagination.types.ts CHANGED Viewed

@@ -1,8 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
 import { type PaginationItemProps } from './components/index.js';
-import { styles } from './pagination.styles.js';
 export type PageProps = {
   href: string;
@@ -63,5 +61,4 @@ export type PaginationProps = {
    */
   tag?: keyof JSX.IntrinsicElements;
 } & (PaginationAsLinkProps | PaginationAsButtonProps) &
-  VariantProps<typeof styles> &
   Omit<HTMLAttributes<Element>, 'onChange'>;