@westpac/ui 0.4.0 → 0.6.0

package/dist/components/tabs/components/tab/tab.styles.d.ts

@@ -18,7 +18,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         primary: string;
         hero: string;
     };
-}, undefined, "typography-body-9 flex cursor-pointer px-3 py-2 text-text transition-colors hover:bg-white focus:focus-outline", {
+    isFocusVisible: {
+        true: string;
+        false: string;
+    };
+}, undefined, "typography-body-9 text-text flex cursor-pointer px-3 py-2 transition-colors hover:bg-white", {
     responsiveVariants: string[];
 }, {
     look: {
@@ -40,4 +44,8 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         primary: string;
         hero: string;
     };
+    isFocusVisible: {
+        true: string;
+        false: string;
+    };
 }, undefined>;

package/dist/components/tabs/components/tab/tab.styles.js

@@ -1,9 +1,9 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'typography-body-9 flex cursor-pointer px-3 py-2 text-text transition-colors hover:bg-white focus:focus-outline',
+    base: 'typography-body-9 text-text flex cursor-pointer px-3 py-2 transition-colors hover:bg-white',
     variants: {
         look: {
-            default: 'border border-border bg-white',
+            default: 'border-border border bg-white',
             material: ''
         },
         selected: {
@@ -20,6 +20,10 @@ export const styles = tv({
         color: {
             primary: '',
             hero: ''
+        },
+        isFocusVisible: {
+            true: 'focus-outline',
+            false: 'outline-none'
         }
     },
     compoundVariants: [
@@ -52,35 +56,35 @@ export const styles = tv({
             color: 'primary',
             look: 'default',
             selected: false,
-            className: 'border-primary-90 bg-primary text-white hover:bg-primary-70'
+            className: 'border-primary-90 bg-primary hover:bg-primary-70 text-white'
         },
         {
             color: 'hero',
             selected: false,
             look: 'default',
-            className: 'border-hero-90 bg-hero text-white hover:bg-hero-70'
+            className: 'border-hero-90 bg-hero hover:bg-hero-70 text-white'
         },
         {
             look: 'material',
             orientation: 'horizontal',
-            className: 'border-b-4 border-r border-b-white border-r-border last:border-r-0'
+            className: 'border-r-border border-b-4 border-r border-b-white last:border-r-0'
         },
         {
             look: 'material',
             orientation: 'vertical',
-            className: 'border-b border-l-4 border-b-border border-l-white last:border-b-0'
+            className: 'border-b-border border-b border-l-4 border-l-white last:border-b-0'
         },
         {
             look: 'material',
             selected: true,
             orientation: 'horizontal',
-            className: 'border-bottom border-b-white text-text'
+            className: 'border-bottom text-text border-b-white'
         },
         {
             look: 'material',
             selected: true,
             orientation: 'vertical',
-            className: 'border-left border-l-transparent text-text'
+            className: 'border-left text-text border-l-transparent'
         },
         {
             color: 'primary',

package/dist/components/tabs/components/tab-panel/tab-panel.component.js

@@ -13,19 +13,21 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { useRef } from 'react';
-import { useTabPanel } from 'react-aria';
+import { mergeProps, useFocusRing, useTabPanel } from 'react-aria';
 import { styles } from './tab-panel.styles.js';
 export function TabPanel({ className , state , look , ...props }) {
     var _state_selectedItem;
     const ref = useRef(null);
+    const { isFocused , focusProps  } = useFocusRing();
     const { tabPanelProps  } = useTabPanel({
         ...props
     }, state, ref);
-    return React.createElement("div", _extends({}, tabPanelProps, {
+    return React.createElement("div", _extends({}, mergeProps(tabPanelProps, focusProps), {
         ref: ref,
         className: styles({
             className,
-            look
+            look,
+            isFocused
         })
     }), (_state_selectedItem = state.selectedItem) === null || _state_selectedItem === void 0 ? void 0 : _state_selectedItem.props.children);
 }

package/dist/components/tabs/components/tab-panel/tab-panel.styles.d.ts

@@ -3,11 +3,17 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         default: string;
         material: string;
     };
-}, undefined, "flex-1 bg-white p-4 focus:focus-outline", {
+    isFocused: {
+        true: string;
+    };
+}, undefined, "flex-1 bg-white p-4", {
     responsiveVariants: string[];
 }, {
     look: {
         default: string;
         material: string;
     };
+    isFocused: {
+        true: string;
+    };
 }, undefined>;

package/dist/components/tabs/components/tab-panel/tab-panel.styles.js

@@ -1,10 +1,13 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'flex-1 bg-white p-4 focus:focus-outline',
+    base: 'flex-1 bg-white p-4',
     variants: {
         look: {
-            default: 'border border-border',
+            default: 'border-border border',
             material: ''
+        },
+        isFocused: {
+            true: 'outline-none'
         }
     }
 }, {

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

@@ -10,7 +10,10 @@ export declare const Textarea: React.ForwardRefExoticComponent<import("tailwind-
         true: string;
         false: string;
     };
-}, undefined, "form-control w-full read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline", {
+    isFocused: {
+        true: string;
+    };
+}, undefined, "form-control read-only:form-control-disabled disabled:form-control-disabled w-full", {
     responsiveVariants: string[];
 }, {
     size: {
@@ -23,4 +26,7 @@ export declare const Textarea: React.ForwardRefExoticComponent<import("tailwind-
         true: string;
         false: string;
     };
+    isFocused: {
+        true: string;
+    };
 }, undefined>> & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/textarea/textarea.component.js

@@ -13,15 +13,18 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { forwardRef } from 'react';
+import { mergeProps, useFocusRing } from 'react-aria';
 import { styles } from './textarea.styles.js';
 function BaseTextarea({ className , size ='medium' , invalid =false , ...props }, ref) {
+    const { isFocused , focusProps  } = useFocusRing();
     return React.createElement("textarea", _extends({
         ref: ref,
         className: styles({
             className,
             size,
-            invalid
+            invalid,
+            isFocused
         })
-    }, props));
+    }, mergeProps(props, focusProps)));
 }
 export const Textarea = forwardRef(BaseTextarea);

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

@@ -9,7 +9,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "form-control w-full read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline", {
+    isFocused: {
+        true: string;
+    };
+}, undefined, "form-control read-only:form-control-disabled disabled:form-control-disabled w-full", {
     responsiveVariants: string[];
 }, {
     size: {
@@ -22,4 +25,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    isFocused: {
+        true: string;
+    };
 }, undefined>;

package/dist/components/textarea/textarea.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'form-control w-full read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline',
+    base: 'form-control read-only:form-control-disabled disabled:form-control-disabled w-full',
     variants: {
         size: {
             small: 'form-control-small min-h-[3.375rem]',
@@ -11,6 +11,9 @@ export const styles = tv({
         invalid: {
             true: 'border-danger',
             false: 'border-borderDark'
+        },
+        isFocused: {
+            true: 'focus-outline'
         }
     }
 }, {