@westpac/ui 0.19.0 → 0.20.1

package/src/components/tabs/components/tabs-tab/tabs-tab.types.ts

@@ -7,7 +7,7 @@ import { styles } from './tabs-tab.styles.js';
 
 type Variants = VariantProps<typeof styles>;
 
-export type TabsTabProps<T = any> = {
+export type TabsTabProps<T = object> = {
   /**
    * Color of tab
    */

package/src/components/tabs/components/tabs-tab-panel/tabs-tab-panel.types.ts

@@ -7,7 +7,7 @@ import { styles } from './tabs-tab-panel.styles.js';
 
 type Variants = VariantProps<typeof styles>;
 
-export type TabsTabPanelProps<T = any> = {
+export type TabsTabPanelProps<T = object> = {
   /**
    * Table panel content
    */

package/src/components/tabs/tabs.component.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useRef } from 'react';
-import { AriaLinkOptions, useTabList } from 'react-aria';
+import { AriaLinkOptions, Key, useTabList } from 'react-aria';
 import { Item, ItemProps, useTabListState } from 'react-stately';
 
 import { TabsTab, TabsTabPanel } from './components/index.js';
@@ -24,9 +24,9 @@ export function Tabs({
 }: TabsProps) {
   const state = useTabListState({
     ...props,
-    disabledKeys: disabledKeys as any,
-    selectedKey: selectedKey as any,
-    defaultSelectedKey: defaultSelectedKey as any,
+    disabledKeys: disabledKeys as Iterable<Key>,
+    selectedKey: selectedKey as Key,
+    defaultSelectedKey: defaultSelectedKey as Key,
     children,
   });
   const styles = tabStyles({ orientation, look, sticky });
@@ -35,9 +35,9 @@ export function Tabs({
   const { tabListProps } = useTabList(
     {
       ...props,
-      disabledKeys: disabledKeys as any,
-      selectedKey: selectedKey as any,
-      defaultSelectedKey: defaultSelectedKey as any,
+      disabledKeys: disabledKeys as Iterable<Key>,
+      selectedKey: selectedKey as Key,
+      defaultSelectedKey: defaultSelectedKey as Key,
       orientation,
     },
     state,

package/src/components/tabs/tabs.types.ts

@@ -7,7 +7,7 @@ import { styles } from './tabs.styles.js';
 
 type Variants = VariantProps<typeof styles>;
 
-export type TabsProps<T = any> = SpectrumTabsProps<T> & {
+export type TabsProps<T = object> = SpectrumTabsProps<T> & {
   /**
    * Children
    */

package/src/tailwind/tailwind-plugin.ts

@@ -197,7 +197,7 @@ export const WestpacUIKitBasePlugin = plugin.withOptions(
           },
         },
         button: {
-          base: 'inline-flex items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
+          base: 'inline-flex items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-last/add-on-after:rounded-l-none group-first/add-on-before:rounded-r-none',
           look: {
             base: {
               primary: 'border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50',

package/src/tailwind/utils/create-font-sizes.ts

@@ -1,15 +1,26 @@
 import { FONT_SIZES } from '../constants/typography.js';
 
+type FontSizeType = Record<
+  string,
+  | string
+  | [fontSize: string, lineHeight: string]
+  | [
+      fontSize: string,
+      configuration: Partial<{
+        fontWeight: string | number;
+        letterSpacing: string;
+        lineHeight: string;
+      }>,
+    ]
+>;
+
 export const createFontSizes = (fontTypes: string[]) => {
-  return fontTypes.reduce(
-    (acc, fontType) => {
-      return Object.entries(FONT_SIZES).reduce((acc2, [fontSize, value]) => {
-        return {
-          ...acc2,
-          [`${fontType}-${fontSize}`]: value.fontSize,
-        };
-      }, acc);
-    },
-    {} as Record<string, any>,
-  );
+  return fontTypes.reduce((acc, fontType) => {
+    return Object.entries(FONT_SIZES).reduce((acc2, [fontSize, value]) => {
+      return {
+        ...acc2,
+        [`${fontType}-${fontSize}`]: value.fontSize,
+      };
+    }, acc);
+  }, {} as FontSizeType);
 };

package/src/tailwind/utils/generate-font-components.ts

@@ -1,25 +1,22 @@
-import { PluginAPI } from 'tailwindcss/types/config.js';
+import { CSSRuleObject, PluginAPI } from 'tailwindcss/types/config.js';
 
 export const generateFontComponents = (
   typographySizes: Record<string, { fontSize: string; lineHeight: string }>,
   theme: PluginAPI['theme'],
 ) => {
-  return Object.entries(typographySizes).reduce(
-    (acc, [size, value]) => {
-      return {
-        ...acc,
-        [`.typography-body-${size}`]: {
-          fontSize: theme(`fontSize.body-${size}`),
-          lineHeight: theme(`lineHeight.${value.lineHeight}`),
-          fontFamily: theme(`fontFamily.sans`),
-        },
-        [`.typography-brand-${size}`]: {
-          fontSize: theme(`fontSize.brand-${size}`),
-          lineHeight: theme(`lineHeight.${value.lineHeight}`),
-          fontFamily: theme(`fontFamily.brand`),
-        },
-      };
-    },
-    {} as Record<string, any>,
-  );
+  return Object.entries(typographySizes).reduce((acc, [size, value]) => {
+    return {
+      ...acc,
+      [`.typography-body-${size}`]: {
+        fontSize: theme(`fontSize.body-${size}`),
+        lineHeight: theme(`lineHeight.${value.lineHeight}`),
+        fontFamily: theme(`fontFamily.sans`),
+      },
+      [`.typography-brand-${size}`]: {
+        fontSize: theme(`fontSize.brand-${size}`),
+        lineHeight: theme(`lineHeight.${value.lineHeight}`),
+        fontFamily: theme(`fontFamily.brand`),
+      },
+    };
+  }, {} as CSSRuleObject[]);
 };

package/src/tailwind/utils/generate-form-control.ts

@@ -1,19 +1,18 @@
+import { CSSRuleObject } from 'tailwindcss/types/config.js';
+
 export const generateFormControlComponents = (formControlProps: {
   base: string;
   disabled: string;
   sizes: Record<string, string>;
 }) => {
-  const sizes = Object.entries(formControlProps.sizes).reduce(
-    (acc, [size, value]) => {
-      return {
-        ...acc,
-        [`.form-control-${size}`]: {
-          [`@apply ${value}`]: {},
-        },
-      };
-    },
-    {} as Record<string, any>,
-  );
+  const sizes = Object.entries(formControlProps.sizes).reduce((acc, [size, value]) => {
+    return {
+      ...acc,
+      [`.form-control-${size}`]: {
+        [`@apply ${value}`]: {},
+      },
+    };
+  }, {} as CSSRuleObject);
   return {
     '.form-control': {
       [`@apply ${formControlProps.base}`]: {},