@westpac/ui 0.49.0 → 0.50.0

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

@@ -0,0 +1,40 @@
+import { HTMLAttributes } from 'react';
+import { DateValue } from 'react-aria';
+import { DatePickerStateOptions } from 'react-stately';
+import { VariantProps } from 'tailwind-variants';
+
+import { Breakpoint } from '../../tailwind/constants/index.js';
+
+import { styles } from './date-picker.styles.js';
+
+type Variants = VariantProps<typeof styles>;
+
+export type DatePickerBetaProps<T extends DateValue = DateValue> = DatePickerStateOptions<T> &
+  Variants &
+  Omit<HTMLAttributes<HTMLDivElement>, 'invalid'> & {
+    /**
+     * Determines whether to display the component as a bottom sheet view.
+     * Can also accept an object to conditionally enable the bottom sheet based on breakpoints.
+     */
+    bottomSheetView?: boolean | Partial<Record<Breakpoint | 'initial', boolean>>;
+
+    /**
+     * An array of numbers representing the days of the week to disable.
+     * For example, to disable Monday, Wednesday, and Saturday: [0, 2, 5].
+     */
+    disableDaysOfWeek?: number[];
+
+    /**
+     * If true, disables selection of weekend days (Saturday and Sunday).
+     */
+    disableWeekends?: boolean;
+
+    /**
+     * Separator character used in the date field. Defaults to "/".
+     */
+    separator?: string;
+    /**
+     * portal container for date picker
+     */
+    portalContainer?: Element;
+  };

package/src/components/date-picker-beta/index.ts

@@ -0,0 +1,2 @@
+export { DatePickerBeta } from './date-picker.component.js';
+export { type DatePickerBetaProps } from './date-picker.types.js';

package/src/components/index.ts

@@ -17,6 +17,7 @@ export * from './switch/index.js';
 export * from './progress-bar/index.js';
 export * from './link/index.js';
 export * from './date-picker/index.js';
+export * from './date-picker-beta/index.js';
 export * from './grid/index.js';
 export * from './table/index.js';
 export * from './panel/index.js';

package/src/tailwind/tailwind-plugin.ts

@@ -129,6 +129,24 @@ export const WestpacUIKitBasePlugin = plugin.withOptions(
                 transform: 'translateY(0)',
               },
             },
+            fadeInUp: {
+              '0%': {
+                opacity: '0',
+                transform: 'translateY(10vh)',
+              },
+              '100%': {
+                opacity: '1',
+                transform: 'translateY(0)',
+              },
+            },
+            slideUp: {
+              '0%': {
+                transform: 'translateY(100%)',
+              },
+              '100%': {
+                transform: 'translateY(0)',
+              },
+            },
             maxHeightIn: {
               '0%': { maxHeight: '0' },
             },
@@ -137,6 +155,8 @@ export const WestpacUIKitBasePlugin = plugin.withOptions(
             skeleton: 'waveLines 2s infinite ease-out',
             fadeIn: 'fadeIn 0.2s ease',
             fadeInDown: 'fadeInDown 0.4s ease',
+            fadeInUp: 'fadeInUp 0.4s ease',
+            slideUp: 'slideUp 0.4s ease',
             maxHeightIn: 'maxHeightIn 0.4s ease',
           },
           boxShadow: {