@westpac/ui 0.34.1 → 0.35.0

package/dist/components/button/button.component.d.ts

@@ -12,8 +12,8 @@ export declare const Button: React.ForwardRefExoticComponent<{
     justify?: boolean | {
         [x: string]: boolean | undefined;
     } | undefined;
-    look?: "link" | "primary" | "hero" | "faint" | {
-        [x: string]: "link" | "primary" | "hero" | "faint" | undefined;
+    look?: "link" | "primary" | "hero" | "faint" | "unstyled" | {
+        [x: string]: "link" | "primary" | "hero" | "faint" | "unstyled" | undefined;
     } | undefined;
     size?: "small" | "xlarge" | "medium" | "large" | {
         [x: string]: "small" | "xlarge" | "medium" | "large" | undefined;

package/dist/components/button/button.styles.d.ts

@@ -29,6 +29,9 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         link: {
             base: string;
         };
+        unstyled: {
+            base: string;
+        };
     };
     soft: {
         true: {
@@ -95,6 +98,9 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         link: {
             base: string;
         };
+        unstyled: {
+            base: string;
+        };
     };
     soft: {
         true: {
@@ -159,6 +165,9 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         link: {
             base: string;
         };
+        unstyled: {
+            base: string;
+        };
     };
     soft: {
         true: {

package/dist/components/button/button.styles.js

@@ -34,6 +34,9 @@ export const styles = tv({
             },
             link: {
                 base: 'text-link underline'
+            },
+            unstyled: {
+                base: ''
             }
         },
         soft: {

package/dist/components/date-picker/date-picker.component.d.ts

@@ -1,2 +1,2 @@
 import { type DatePickerProps } from './date-picker.types.js';
-export declare function DatePicker({ disableWeekends, disableDaysOfWeek, disableDates, placeholder, onChange, onFocus, onBlur, onOpen, onClose, min, max, value, id, size, name, block, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePicker({ disableWeekends, disableDaysOfWeek, disableDates, placeholder, onChange, onFocus, onBlur, onOpen, onClose, min, max, value, id, size, name, block, invalid, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/date-picker/date-picker.component.js

@@ -16,7 +16,7 @@ function _extends() {
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { styles } from './date-picker.styles.js';
 import { formatDate, isDateDisabled, useListener } from './date-picker.utils.js';
-export function DatePicker({ disableWeekends , disableDaysOfWeek , disableDates , placeholder , onChange , onFocus , onBlur , onOpen , onClose , min , max , value , id , size ='md' , name , block =false , ...props }) {
+export function DatePicker({ disableWeekends , disableDaysOfWeek , disableDates , placeholder , onChange , onFocus , onBlur , onOpen , onClose , min , max , value , id , size ='md' , name , block =false , invalid =false , ...props }) {
     const [initialized, setInitialized] = useState(false);
     useEffect(()=>{
         const initDatePicker = async ()=>{
@@ -143,7 +143,8 @@ export function DatePicker({ disableWeekends , disableDaysOfWeek , disableDates
     return React.createElement("duet-date-picker", _extends({
         class: styles({
             size,
-            block
+            block,
+            invalid
         }),
         ref: ref
     }, props));

package/dist/components/date-picker/date-picker.styles.d.ts

@@ -9,6 +9,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    invalid: {
+        true: string;
+        false: string;
+    };
 }, undefined, "date-picker", {
     responsiveVariants: string[];
 }, {
@@ -22,6 +26,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    invalid: {
+        true: string;
+        false: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     size: {
         sm: string;
@@ -33,6 +41,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    invalid: {
+        true: string;
+        false: string;
+    };
 }, undefined, "date-picker", {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

package/dist/components/date-picker/date-picker.styles.js

@@ -11,6 +11,10 @@ export const styles = tv({
         block: {
             true: 'date-picker-block',
             false: ''
+        },
+        invalid: {
+            true: 'date-picker-invalid',
+            false: ''
         }
     }
 }, {

package/dist/components/date-picker/date-picker.types.d.ts

@@ -20,6 +20,11 @@ export type DatePickerProps = {
     disableDates?: string[];
     disableDaysOfWeek?: number[];
     disableWeekends?: boolean;
+    /**
+     * Whether the user input is invalid
+     * @default false
+     */
+    invalid?: boolean;
     /**
      * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
      */

package/dist/components/list/list.utils.d.ts

@@ -1,6 +1,6 @@
 import { GetStateValuesProps } from './list.types.js';
 export declare const getStateValues: (props: GetStateValuesProps) => {
-    type: "link" | "icon" | "ordered" | "bullet" | "tick" | "cross" | "unstyled";
+    type: "link" | "unstyled" | "icon" | "ordered" | "bullet" | "tick" | "cross";
     look: "link" | "primary" | "hero" | "success" | "danger" | "neutral";
     spacing: "medium" | "large";
     icon: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;

package/dist/css/westpac-ui.css

@@ -3095,6 +3095,10 @@ body {
 .date-picker.date-picker-block .duet-date {
   max-width: none;
 }
+.date-picker.date-picker-invalid .duet-date__input {
+  --tw-border-opacity: 1;
+  border-color: rgb(196 0 0 / var(--tw-border-opacity, 1));
+}
 .date-picker .duet-date__dialog-content {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -6598,6 +6602,10 @@ body {
   .xsl\:date-picker-block.date-picker .duet-date {
     max-width: none;
   }
+  .xsl\:date-picker-invalid.date-picker .duet-date__input {
+    --tw-border-opacity: 1;
+    border-color: rgb(196 0 0 / var(--tw-border-opacity, 1));
+  }
 }
 @media (min-width: 768px) {
   .sm\:typography-body-1 {
@@ -6762,6 +6770,10 @@ body {
   .sm\:date-picker-block.date-picker .duet-date {
     max-width: none;
   }
+  .sm\:date-picker-invalid.date-picker .duet-date__input {
+    --tw-border-opacity: 1;
+    border-color: rgb(196 0 0 / var(--tw-border-opacity, 1));
+  }
 }
 @media (min-width: 992px) {
   .md\:typography-body-1 {
@@ -6926,6 +6938,10 @@ body {
   .md\:date-picker-block.date-picker .duet-date {
     max-width: none;
   }
+  .md\:date-picker-invalid.date-picker .duet-date__input {
+    --tw-border-opacity: 1;
+    border-color: rgb(196 0 0 / var(--tw-border-opacity, 1));
+  }
 }
 @media (min-width: 1200px) {
   .lg\:typography-body-1 {
@@ -7090,6 +7106,10 @@ body {
   .lg\:date-picker-block.date-picker .duet-date {
     max-width: none;
   }
+  .lg\:date-picker-invalid.date-picker .duet-date__input {
+    --tw-border-opacity: 1;
+    border-color: rgb(196 0 0 / var(--tw-border-opacity, 1));
+  }
 }
 @media (min-width: 1584px) {
   .xl\:typography-body-1 {
@@ -7254,6 +7274,10 @@ body {
   .xl\:date-picker-block.date-picker .duet-date {
     max-width: none;
   }
+  .xl\:date-picker-invalid.date-picker .duet-date__input {
+    --tw-border-opacity: 1;
+    border-color: rgb(196 0 0 / var(--tw-border-opacity, 1));
+  }
 }
 .placeholder\:font-light::-moz-placeholder {
   font-weight: 300;

package/dist/css/westpac-ui.min.css

@@ -3095,6 +3095,10 @@ body {
 .date-picker.date-picker-block .duet-date {
   max-width: none;
 }
+.date-picker.date-picker-invalid .duet-date__input {
+  --tw-border-opacity: 1;
+  border-color: rgb(196 0 0 / var(--tw-border-opacity, 1));
+}
 .date-picker .duet-date__dialog-content {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -6598,6 +6602,10 @@ body {
   .xsl\:date-picker-block.date-picker .duet-date {
     max-width: none;
   }
+  .xsl\:date-picker-invalid.date-picker .duet-date__input {
+    --tw-border-opacity: 1;
+    border-color: rgb(196 0 0 / var(--tw-border-opacity, 1));
+  }
 }
 @media (min-width: 768px) {
   .sm\:typography-body-1 {
@@ -6762,6 +6770,10 @@ body {
   .sm\:date-picker-block.date-picker .duet-date {
     max-width: none;
   }
+  .sm\:date-picker-invalid.date-picker .duet-date__input {
+    --tw-border-opacity: 1;
+    border-color: rgb(196 0 0 / var(--tw-border-opacity, 1));
+  }
 }
 @media (min-width: 992px) {
   .md\:typography-body-1 {
@@ -6926,6 +6938,10 @@ body {
   .md\:date-picker-block.date-picker .duet-date {
     max-width: none;
   }
+  .md\:date-picker-invalid.date-picker .duet-date__input {
+    --tw-border-opacity: 1;
+    border-color: rgb(196 0 0 / var(--tw-border-opacity, 1));
+  }
 }
 @media (min-width: 1200px) {
   .lg\:typography-body-1 {
@@ -7090,6 +7106,10 @@ body {
   .lg\:date-picker-block.date-picker .duet-date {
     max-width: none;
   }
+  .lg\:date-picker-invalid.date-picker .duet-date__input {
+    --tw-border-opacity: 1;
+    border-color: rgb(196 0 0 / var(--tw-border-opacity, 1));
+  }
 }
 @media (min-width: 1584px) {
   .xl\:typography-body-1 {
@@ -7254,6 +7274,10 @@ body {
   .xl\:date-picker-block.date-picker .duet-date {
     max-width: none;
   }
+  .xl\:date-picker-invalid.date-picker .duet-date__input {
+    --tw-border-opacity: 1;
+    border-color: rgb(196 0 0 / var(--tw-border-opacity, 1));
+  }
 }
 .placeholder\:font-light::-moz-placeholder {
   font-weight: 300;

package/dist/tailwind/utils/generate-date-picker-component.d.ts

@@ -72,6 +72,11 @@ export declare const generateDatePicker: () => {
                 '@apply max-w-none': {};
             };
         };
+        '&.date-picker-invalid': {
+            '.duet-date__input': {
+                '@apply border-danger': {};
+            };
+        };
         '.duet-date__dialog-content': {
             '@apply bg-white': {};
         };

package/dist/tailwind/utils/generate-date-picker-component.js

@@ -73,6 +73,11 @@ export const generateDatePicker = ()=>{
                     '@apply max-w-none': {}
                 }
             },
+            '&.date-picker-invalid': {
+                '.duet-date__input': {
+                    '@apply border-danger': {}
+                }
+            },
             '.duet-date__dialog-content': {
                 '@apply bg-white': {}
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.34.1",
+  "version": "0.35.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -258,8 +258,8 @@
     "vite": "^5.2.12",
     "vitest": "^0.30.1",
     "@westpac/eslint-config": "~0.4.0",
-    "@westpac/test-config": "~0.0.0",
-    "@westpac/ts-config": "~0.0.0"
+    "@westpac/ts-config": "~0.0.0",
+    "@westpac/test-config": "~0.0.0"
   },
   "dependencies": {
     "@duetds/date-picker": "~1.4.0",

package/src/components/button/button.styles.ts

@@ -34,6 +34,7 @@ export const styles = tv(
         hero: { base: 'border border-hero bg-hero text-white hover:bg-hero-70 active:bg-hero-50' },
         faint: { base: 'border border-border bg-light text-muted hover:bg-white active:bg-white' },
         link: { base: 'text-link underline' },
+        unstyled: { base: '' },
       },
       soft: {
         true: { base: 'bg-white' },

package/src/components/date-picker/date-picker.component.tsx

@@ -23,6 +23,7 @@ export function DatePicker({
   size = 'md',
   name,
   block = false,
+  invalid = false,
   ...props
 }: DatePickerProps) {
   const [initialized, setInitialized] = useState(false);
@@ -122,5 +123,5 @@ export function DatePicker({
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  return <duet-date-picker class={styles({ size, block })} ref={ref} {...props} />;
+  return <duet-date-picker class={styles({ size, block, invalid })} ref={ref} {...props} />;
 }

package/src/components/date-picker/date-picker.styles.ts

@@ -14,6 +14,10 @@ export const styles = tv(
         true: 'date-picker-block',
         false: '',
       },
+      invalid: {
+        true: 'date-picker-invalid',
+        false: '',
+      },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

package/src/components/date-picker/date-picker.types.ts

@@ -33,6 +33,11 @@ export type DatePickerProps = {
    * Disable weekend days
    */
   disableWeekends?: boolean;
+  /**
+   * Whether the user input is invalid
+   * @default false
+   */
+  invalid?: boolean;
   /**
    * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
    */

package/src/tailwind/utils/generate-date-picker-component.ts

@@ -77,6 +77,11 @@ export const generateDatePicker = () => {
           '@apply max-w-none': {},
         },
       },
+      '&.date-picker-invalid': {
+        '.duet-date__input': {
+          '@apply border-danger': {},
+        },
+      },
 
       /* Calendar selects */
       '.duet-date__dialog-content': {