@westpac/ui 0.2.1 → 0.4.0

package/dist/hook/index.d.ts

@@ -0,0 +1 @@
+export * from '../components/pagination/pagination.hooks.js';

package/dist/hook/index.js

@@ -0,0 +1 @@
+export * from '../components/pagination/pagination.hooks.js';

package/dist/tailwind/constants/colors.d.ts

@@ -9,10 +9,10 @@ export declare const COLORS: {
     white: string;
     black: string;
     link: {
-        DEFAULT: string;
-        50: string;
         100: string;
         200: string;
+        50: string;
+        DEFAULT: string;
         300: string;
         400: string;
         500: string;
@@ -22,10 +22,10 @@ export declare const COLORS: {
         900: string;
     };
     text: {
-        DEFAULT: string;
-        50: string;
         100: string;
         200: string;
+        50: string;
+        DEFAULT: string;
         300: string;
         400: string;
         500: string;
@@ -35,10 +35,10 @@ export declare const COLORS: {
         900: string;
     };
     border: {
-        DEFAULT: string;
-        50: string;
         100: string;
         200: string;
+        50: string;
+        DEFAULT: string;
         300: string;
         400: string;
         500: string;
@@ -48,10 +48,10 @@ export declare const COLORS: {
         900: string;
     };
     heading: {
-        DEFAULT: string;
-        50: string;
         100: string;
         200: string;
+        50: string;
+        DEFAULT: string;
         300: string;
         400: string;
         500: string;
@@ -60,11 +60,11 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    primary: {
-        DEFAULT: string;
-        50: string;
+    background: {
         100: string;
         200: string;
+        50: string;
+        DEFAULT: string;
         300: string;
         400: string;
         500: string;
@@ -73,11 +73,11 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    hero: {
-        DEFAULT: string;
-        50: string;
+    borderDark: {
         100: string;
         200: string;
+        50: string;
+        DEFAULT: string;
         300: string;
         400: string;
         500: string;
@@ -86,11 +86,11 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    background: {
-        DEFAULT: string;
-        50: string;
+    focus: {
         100: string;
         200: string;
+        50: string;
+        DEFAULT: string;
         300: string;
         400: string;
         500: string;
@@ -99,11 +99,11 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    borderDark: {
-        DEFAULT: string;
-        50: string;
+    hero: {
         100: string;
         200: string;
+        50: string;
+        DEFAULT: string;
         300: string;
         400: string;
         500: string;
@@ -112,11 +112,11 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    focus: {
-        DEFAULT: string;
-        50: string;
+    light: {
         100: string;
         200: string;
+        50: string;
+        DEFAULT: string;
         300: string;
         400: string;
         500: string;
@@ -125,11 +125,11 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    light: {
-        DEFAULT: string;
-        50: string;
+    muted: {
         100: string;
         200: string;
+        50: string;
+        DEFAULT: string;
         300: string;
         400: string;
         500: string;
@@ -138,11 +138,11 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    muted: {
-        DEFAULT: string;
-        50: string;
+    neutral: {
         100: string;
         200: string;
+        50: string;
+        DEFAULT: string;
         300: string;
         400: string;
         500: string;
@@ -151,11 +151,11 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    neutral: {
-        DEFAULT: string;
-        50: string;
+    pop: {
         100: string;
         200: string;
+        50: string;
+        DEFAULT: string;
         300: string;
         400: string;
         500: string;
@@ -164,11 +164,11 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    pop: {
-        DEFAULT: string;
-        50: string;
+    primary: {
         100: string;
         200: string;
+        50: string;
+        DEFAULT: string;
         300: string;
         400: string;
         500: string;
@@ -177,4 +177,11 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
+    pictogram: {
+        dark: string;
+        duo: {
+            highlight: string;
+            outline: string;
+        };
+    };
 };

package/dist/tailwind/constants/spacing.d.ts

@@ -24,18 +24,18 @@ export declare const SPACING: {
     18: string;
     19: string;
     20: string;
+    31: string;
+    26: string;
+    32: string;
+    28: string;
+    25: string;
+    34: string;
+    35: string;
     30: string;
     21: string;
     23: string;
     24: string;
-    25: string;
-    26: string;
     27: string;
-    28: string;
     29: string;
-    31: string;
-    32: string;
     33: string;
-    34: string;
-    35: string;
 };

package/dist/tailwind/tailwind-plugin.js

@@ -4,6 +4,7 @@ import { BREAKPOINTS } from './constants/breakpoints.js';
 import { COLORS, DEFAULT_BODY_TYPOGRAPHY, FONT_TYPES, SPACING } from './constants/index.js';
 import { THEMES } from './themes/index.js';
 import { theme as WBCTheme } from './themes/wbc.js';
+import { generateDatePicker } from './utils/generate-date-picker-component.js';
 import { createFontSizes, generateFontComponents, generateFormControlComponents } from './utils/index.js';
 export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , addBase , theme  })=>{
     addBase({
@@ -21,6 +22,7 @@ export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , a
     });
     addComponents(generateFontComponents(theme('typographySizes'), theme));
     addComponents(generateFormControlComponents(theme('formControl')));
+    addComponents(generateDatePicker());
 }, {
     theme: {
         screens: BREAKPOINTS,
@@ -48,10 +50,31 @@ export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , a
                     '100%': {
                         opacity: '1'
                     }
+                },
+                fadeInDown: {
+                    '0%': {
+                        opacity: '0',
+                        transform: 'translateY(-10vh)'
+                    },
+                    '100%': {
+                        opacity: '1',
+                        transform: 'translateY(0)'
+                    }
                 }
             },
             animation: {
-                fadeIn: 'fadeIn 0.2s ease'
+                fadeIn: 'fadeIn 0.2s ease',
+                fadeInDown: 'fadeInDown 0.4s ease'
+            },
+            boxShadow: {
+                switch: '0.1875rem 0 0.375rem 0 rgba(0,0,0,0.53)'
+            },
+            maxWidth: {
+                xsl: BREAKPOINTS.xsl,
+                sm: BREAKPOINTS.sm,
+                md: BREAKPOINTS.md,
+                lg: BREAKPOINTS.lg,
+                container: '1320px'
             }
         },
         typographySizes: {
@@ -100,10 +123,10 @@ export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , a
             base: 'no-inner-spin-button box-border w-fit appearance-none overflow-visible rounded border bg-white align-middle text-text transition placeholder:font-light placeholder:text-text-50 placeholder:opacity-100 focus:focus-outline disabled:form-control-disabled',
             disabled: 'cursor-not-allowed border-dashed bg-background text-muted',
             sizes: {
-                small: 'px-[0.5625rem] pb-[0.25rem] pt-[0.1875rem] text-sm',
-                medium: 'typography-body-9 px-2 py-[0.3125rem]',
+                small: 'px-[0.5625rem] pb-[0.25rem] pt-[0.1875rem] text-sm leading-[1.3rem]',
+                medium: 'typography-body-9 px-2 py-[0.3125rem] leading-6',
                 large: 'px-[0.9375rem] py-[0.5rem] text-base',
-                xlarge: 'px-3 pb-[0.625rem] pt-[0.5625rem] text-lg'
+                xlarge: 'px-3 pb-[0.625rem] pt-[0.5625rem] text-lg leading-[1.685rem]'
             }
         },
         focusOutline: 'outline outline-2 outline-offset-[3px] outline-focus'

package/dist/tailwind/tailwind-transformer.d.ts

@@ -1,5 +1,9 @@
 import { type Config } from 'tailwindcss';
 export declare const withGEL: (config: Config) => {
+    safelist: (string | {
+        pattern: RegExp;
+        variants?: string[] | undefined;
+    } | undefined)[];
     plugins: (import("tailwindcss/types/config.js").PluginCreator | {
         handler: import("tailwindcss/types/config.js").PluginCreator;
         config?: Partial<Config> | undefined;
@@ -8,10 +12,6 @@ export declare const withGEL: (config: Config) => {
     important?: Partial<import("tailwindcss/types/config.js").ImportantConfig> | undefined;
     prefix?: string | undefined;
     separator?: string | undefined;
-    safelist?: (string | {
-        pattern: RegExp;
-        variants?: string[] | undefined;
-    } | undefined)[] | undefined;
     blocklist?: (string | undefined)[] | undefined;
     presets?: (Config | undefined)[] | undefined;
     future?: Partial<import("tailwindcss/types/config.js").FutureConfig> | undefined;

package/dist/tailwind/tailwind-transformer.js

@@ -2,6 +2,13 @@ import { withTV } from 'tailwind-variants/transformer';
 import { WestpacUIKitBasePlugin, WestpacUIKitThemesPlugin } from '@westpac/ui/tailwind';
 export const withGEL = (config)=>withTV({
         ...config,
+        safelist: [
+            'date-picker',
+            ...typeof config.safelist === 'string' ? [
+                config.safelist
+            ] : [],
+            ...Array.isArray(config.safelist) ? config.safelist : []
+        ],
         plugins: [
             WestpacUIKitBasePlugin,
             WestpacUIKitThemesPlugin,

package/dist/tailwind/themes/bom.js

@@ -1,21 +1,32 @@
 import { generateColorTints } from '../utils/generate-color-tints.js';
+const HERO = '#534891';
+const POP = '#A094FC';
 export const theme = {
     code: 'BOM',
-    colors: generateColorTints({
-        background: '#F7F7F7',
-        border: '#D4D4D8',
-        borderDark: '#939299',
-        focus: '#867BCD',
-        heading: '#534891',
-        hero: '#534891',
-        light: '#FBFBFD',
-        link: '#D13900',
-        muted: '#6E6C7A',
-        neutral: '#595762',
-        pop: '#A094FC',
-        primary: '#D13900',
-        text: '#20024E'
-    }),
+    colors: {
+        ...generateColorTints({
+            background: '#F7F7F7',
+            border: '#D4D4D8',
+            borderDark: '#939299',
+            focus: '#867BCD',
+            heading: '#534891',
+            hero: HERO,
+            light: '#FBFBFD',
+            link: '#D13900',
+            muted: '#6E6C7A',
+            neutral: '#595762',
+            pop: POP,
+            primary: '#D13900',
+            text: '#20024E'
+        }),
+        pictogram: {
+            dark: HERO,
+            duo: {
+                highlight: POP,
+                outline: HERO
+            }
+        }
+    },
     brandFont: 'Brown Pro',
     name: 'Bank of Melbourne'
 };

package/dist/tailwind/themes/bsa.js

@@ -1,21 +1,32 @@
 import { generateColorTints } from '../utils/generate-color-tints.js';
+const HERO = '#002F6C';
+const POP = '#00ADBD';
 export const theme = {
     code: 'BSA',
-    colors: generateColorTints({
-        background: '#F3F4F4',
-        border: '#D3D4D5',
-        borderDark: '#909396',
-        focus: '#C26F9D',
-        heading: '#002F6C',
-        hero: '#002F6C',
-        light: '#FAFAFA',
-        link: '#D81B2B',
-        muted: '#6A6E72',
-        neutral: '#6A6E72',
-        pop: '#00ADBD',
-        primary: '#D81B2B',
-        text: '#333'
-    }),
+    colors: {
+        ...generateColorTints({
+            background: '#F3F4F4',
+            border: '#D3D4D5',
+            borderDark: '#909396',
+            focus: '#C26F9D',
+            heading: '#002F6C',
+            hero: HERO,
+            light: '#FAFAFA',
+            link: '#D81B2B',
+            muted: '#6A6E72',
+            neutral: '#6A6E72',
+            pop: POP,
+            primary: '#D81B2B',
+            text: '#333'
+        }),
+        pictogram: {
+            dark: HERO,
+            duo: {
+                highlight: POP,
+                outline: HERO
+            }
+        }
+    },
     brandFont: 'Aller',
     name: 'BankSA'
 };

package/dist/tailwind/themes/btfg.js

@@ -1,21 +1,32 @@
 import { generateColorTints } from '../utils/generate-color-tints.js';
+const HERO = '#2574A9';
+const PRIMARY = '#9E005D';
 export const theme = {
     code: 'BTFG',
-    colors: generateColorTints({
-        background: '#F9F9F9',
-        border: '#E0E0E0',
-        borderDark: '#949494',
-        focus: '#CA73A6',
-        heading: '#2574A9',
-        hero: '#2574A9',
-        light: '#FCFCFC',
-        link: '#9E005D',
-        muted: '#666666',
-        neutral: '#637B98',
-        pop: '#9E005D',
-        primary: '#9E005D',
-        text: '#333'
-    }),
+    colors: {
+        ...generateColorTints({
+            background: '#F9F9F9',
+            border: '#E0E0E0',
+            borderDark: '#949494',
+            focus: '#CA73A6',
+            heading: '#2574A9',
+            hero: HERO,
+            light: '#FCFCFC',
+            link: '#9E005D',
+            muted: '#666666',
+            neutral: '#637B98',
+            pop: PRIMARY,
+            primary: PRIMARY,
+            text: '#333'
+        }),
+        pictogram: {
+            dark: HERO,
+            duo: {
+                highlight: PRIMARY,
+                outline: HERO
+            }
+        }
+    },
     brandFont: 'Georgia, "Times New Roman", Times, serif',
     name: 'BT Financial Group'
 };

package/dist/tailwind/themes/index.d.ts

@@ -8,10 +8,10 @@ export declare const THEMES: {
         };
         colors: {
             link: {
-                DEFAULT: string;
-                50: string;
                 100: string;
                 200: string;
+                50: string;
+                DEFAULT: string;
                 300: string;
                 400: string;
                 500: string;
@@ -21,10 +21,10 @@ export declare const THEMES: {
                 900: string;
             };
             text: {
-                DEFAULT: string;
-                50: string;
                 100: string;
                 200: string;
+                50: string;
+                DEFAULT: string;
                 300: string;
                 400: string;
                 500: string;
@@ -34,10 +34,10 @@ export declare const THEMES: {
                 900: string;
             };
             border: {
-                DEFAULT: string;
-                50: string;
                 100: string;
                 200: string;
+                50: string;
+                DEFAULT: string;
                 300: string;
                 400: string;
                 500: string;
@@ -47,10 +47,10 @@ export declare const THEMES: {
                 900: string;
             };
             heading: {
-                DEFAULT: string;
-                50: string;
                 100: string;
                 200: string;
+                50: string;
+                DEFAULT: string;
                 300: string;
                 400: string;
                 500: string;
@@ -59,11 +59,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            primary: {
-                DEFAULT: string;
-                50: string;
+            white: {
                 100: string;
                 200: string;
+                50: string;
+                DEFAULT: string;
                 300: string;
                 400: string;
                 500: string;
@@ -72,11 +72,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            hero: {
-                DEFAULT: string;
-                50: string;
+            black: {
                 100: string;
                 200: string;
+                50: string;
+                DEFAULT: string;
                 300: string;
                 400: string;
                 500: string;
@@ -85,11 +85,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            white: {
-                DEFAULT: string;
-                50: string;
+            background: {
                 100: string;
                 200: string;
+                50: string;
+                DEFAULT: string;
                 300: string;
                 400: string;
                 500: string;
@@ -98,11 +98,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            black: {
-                DEFAULT: string;
-                50: string;
+            borderDark: {
                 100: string;
                 200: string;
+                50: string;
+                DEFAULT: string;
                 300: string;
                 400: string;
                 500: string;
@@ -111,11 +111,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            background: {
-                DEFAULT: string;
-                50: string;
+            focus: {
                 100: string;
                 200: string;
+                50: string;
+                DEFAULT: string;
                 300: string;
                 400: string;
                 500: string;
@@ -124,11 +124,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            borderDark: {
-                DEFAULT: string;
-                50: string;
+            hero: {
                 100: string;
                 200: string;
+                50: string;
+                DEFAULT: string;
                 300: string;
                 400: string;
                 500: string;
@@ -137,11 +137,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            focus: {
-                DEFAULT: string;
-                50: string;
+            light: {
                 100: string;
                 200: string;
+                50: string;
+                DEFAULT: string;
                 300: string;
                 400: string;
                 500: string;
@@ -150,11 +150,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            light: {
-                DEFAULT: string;
-                50: string;
+            muted: {
                 100: string;
                 200: string;
+                50: string;
+                DEFAULT: string;
                 300: string;
                 400: string;
                 500: string;
@@ -163,11 +163,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            muted: {
-                DEFAULT: string;
-                50: string;
+            neutral: {
                 100: string;
                 200: string;
+                50: string;
+                DEFAULT: string;
                 300: string;
                 400: string;
                 500: string;
@@ -176,11 +176,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            neutral: {
-                DEFAULT: string;
-                50: string;
+            pop: {
                 100: string;
                 200: string;
+                50: string;
+                DEFAULT: string;
                 300: string;
                 400: string;
                 500: string;
@@ -189,11 +189,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            pop: {
-                DEFAULT: string;
-                50: string;
+            primary: {
                 100: string;
                 200: string;
+                50: string;
+                DEFAULT: string;
                 300: string;
                 400: string;
                 500: string;
@@ -202,6 +202,14 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
+        } & {
+            pictogram: {
+                dark: string;
+                duo: {
+                    highlight: string;
+                    outline: string;
+                };
+            };
         };
     };
 }[];