@yahoo/uds-mobile 2.6.0 → 2.7.1

package/generated/styles.cjs

@@ -1574,11 +1574,39 @@ const bannerStyles = StyleSheet.create((theme) => ({
   description: {
     variants: {
       size: { default: theme.components['banner/size/default/description/rest'] },
+      variant: {
+        alert: theme.components['banner/variant/alert/description/rest'],
+        'alert-secondary': theme.components['banner/variant/alert-secondary/description/rest'],
+        brand: theme.components['banner/variant/brand/description/rest'],
+        'brand-secondary': theme.components['banner/variant/brand-secondary/description/rest'],
+        info: theme.components['banner/variant/info/description/rest'],
+        'info-secondary': theme.components['banner/variant/info-secondary/description/rest'],
+        primary: theme.components['banner/variant/primary/description/rest'],
+        secondary: theme.components['banner/variant/secondary/description/rest'],
+        success: theme.components['banner/variant/success/description/rest'],
+        'success-secondary': theme.components['banner/variant/success-secondary/description/rest'],
+        warning: theme.components['banner/variant/warning/description/rest'],
+        'warning-secondary': theme.components['banner/variant/warning-secondary/description/rest'],
+      },
     },
   },
   title: {
     variants: {
       size: { default: theme.components['banner/size/default/title/rest'] },
+      variant: {
+        alert: theme.components['banner/variant/alert/title/rest'],
+        'alert-secondary': theme.components['banner/variant/alert-secondary/title/rest'],
+        brand: theme.components['banner/variant/brand/title/rest'],
+        'brand-secondary': theme.components['banner/variant/brand-secondary/title/rest'],
+        info: theme.components['banner/variant/info/title/rest'],
+        'info-secondary': theme.components['banner/variant/info-secondary/title/rest'],
+        primary: theme.components['banner/variant/primary/title/rest'],
+        secondary: theme.components['banner/variant/secondary/title/rest'],
+        success: theme.components['banner/variant/success/title/rest'],
+        'success-secondary': theme.components['banner/variant/success-secondary/title/rest'],
+        warning: theme.components['banner/variant/warning/title/rest'],
+        'warning-secondary': theme.components['banner/variant/warning-secondary/title/rest'],
+      },
     },
   },
 }));
@@ -4842,6 +4870,146 @@ const switchStyles = StyleSheet.create((theme) => ({
   },
 }));
 
+/**
+ * Layer-based styles for Tab.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * tabStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: tabStyles.root, tabStyles.icon, etc.
+ * ```
+ */
+const tabStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      size: { default: theme.components['tab/size/default/root/rest'] },
+      variant: {
+        off: theme.components['tab/variant/primary/active/off/root/rest'],
+        on: theme.components['tab/variant/primary/active/on/root/rest'],
+      },
+      pressed: { true: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'off',
+        pressed: true,
+        styles: theme.components['tab/variant/primary/active/off/root/pressed'],
+      },
+      {
+        variant: 'off',
+        pressed: true,
+        styles: theme.components['tab/variant/secondary/active/off/root/pressed'],
+      },
+      {
+        variant: 'on',
+        pressed: true,
+        styles: theme.components['tab/variant/primary/active/on/root/pressed'],
+      },
+      {
+        variant: 'on',
+        pressed: true,
+        styles: theme.components['tab/variant/secondary/active/on/root/pressed'],
+      },
+    ],
+  },
+  text: {
+    variants: {
+      size: { default: theme.components['tab/size/default/rootText/rest'] },
+      variant: {
+        off: theme.components['tab/variant/primary/active/off/rootText/rest'],
+        on: theme.components['tab/variant/primary/active/on/rootText/rest'],
+      },
+      pressed: { true: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'off',
+        pressed: true,
+        styles: theme.components['tab/variant/primary/active/off/rootText/pressed'],
+      },
+      {
+        variant: 'off',
+        pressed: true,
+        styles: theme.components['tab/variant/secondary/active/off/rootText/pressed'],
+      },
+      {
+        variant: 'on',
+        pressed: true,
+        styles: theme.components['tab/variant/primary/active/on/rootText/pressed'],
+      },
+      {
+        variant: 'on',
+        pressed: true,
+        styles: theme.components['tab/variant/secondary/active/on/rootText/pressed'],
+      },
+    ],
+  },
+  icon: {
+    variants: {
+      size: { default: theme.components['tab/size/default/icon/rest'] },
+      variant: {
+        off: theme.components['tab/variant/primary/active/off/icon/rest'],
+        on: theme.components['tab/variant/primary/active/on/icon/rest'],
+      },
+      pressed: { true: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'off',
+        pressed: true,
+        styles: theme.components['tab/variant/primary/active/off/icon/pressed'],
+      },
+      {
+        variant: 'off',
+        pressed: true,
+        styles: theme.components['tab/variant/secondary/active/off/icon/pressed'],
+      },
+      {
+        variant: 'on',
+        pressed: true,
+        styles: theme.components['tab/variant/primary/active/on/icon/pressed'],
+      },
+      {
+        variant: 'on',
+        pressed: true,
+        styles: theme.components['tab/variant/secondary/active/on/icon/pressed'],
+      },
+    ],
+  },
+}));
+
+/**
+ * Layer-based styles for Tabs.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * tabsStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: tabsStyles.root, tabsStyles.icon, etc.
+ * ```
+ */
+const tabsStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      variant: {
+        primary: theme.components['tabs/variant/primary/root/rest'],
+        secondary: theme.components['tabs/variant/secondary/root/rest'],
+      },
+    },
+  },
+}));
+
 /**
  * Layer-based styles for Toast.
  * Uses compound variants for state-specific (disabled/pressed) styles.
@@ -4991,6 +5159,8 @@ module.exports = {
   radioStyles,
   scrimStyles,
   switchStyles,
+  tabStyles,
+  tabsStyles,
   toastStyles,
   tooltipStyles,
 };

package/generated/styles.d.ts

@@ -1361,6 +1361,7 @@ export declare const badgeStyles: {
 export declare const bannerStyles: {
   root: {
     borderRadius: number;
+    boxShadow: string;
     gap: number;
     paddingHorizontal: number;
     paddingVertical: number;
@@ -1375,12 +1376,14 @@ export declare const bannerStyles: {
     fontSize: number;
     letterSpacing: number;
     lineHeight: number;
+    color: string;
   };
   title: {
     fontFamily: 'YahooProductSans-Medium';
     fontSize: number;
     letterSpacing: number;
     lineHeight: number;
+    color: string;
   };
 } & {
   useVariants: (
@@ -1420,13 +1423,47 @@ export declare const bannerStyles: {
             | undefined;
         }
       | { size?: undefined }
-      | { size?: undefined }
-      | { size?: undefined },
+      | {
+          size?: undefined;
+          variant?:
+            | 'primary'
+            | 'secondary'
+            | 'brand'
+            | 'alert'
+            | 'warning'
+            | 'info'
+            | 'brand-secondary'
+            | 'alert-secondary'
+            | 'warning-secondary'
+            | 'info-secondary'
+            | 'success'
+            | 'success-secondary'
+            | undefined;
+        }
+      | {
+          size?: undefined;
+          variant?:
+            | 'primary'
+            | 'secondary'
+            | 'brand'
+            | 'alert'
+            | 'warning'
+            | 'info'
+            | 'brand-secondary'
+            | 'alert-secondary'
+            | 'warning-secondary'
+            | 'info-secondary'
+            | 'success'
+            | 'success-secondary'
+            | undefined;
+        },
   ) => void;
 };
 
 export declare const bottomSheetStyles: {
   root: {
+    backgroundBlurColor: string;
+    backgroundBlurRadius: number;
     backgroundColor: string;
     borderColor: string;
     borderRadius: number;
@@ -1891,6 +1928,8 @@ export declare const menuContentStyles: {
     gap: number;
     paddingHorizontal: number;
     paddingVertical: number;
+    backgroundBlurColor: string;
+    backgroundBlurRadius: number;
     backgroundColor: string;
     borderColor: string;
   };
@@ -2021,6 +2060,61 @@ export declare const switchStyles: {
   ) => void;
 };
 
+export declare const tabStyles: {
+  root: {
+    gap: number;
+    paddingHorizontal: number;
+    paddingVertical: number;
+    backgroundColor: string;
+    borderColor: string;
+    borderRadius: number;
+    borderWidth: number;
+    boxShadow: string;
+  };
+  text: {
+    fontFamily: 'YahooProductSans-Medium';
+    fontSize: number;
+    letterSpacing: number;
+    lineHeight: number;
+    color: string;
+  };
+  icon: { fontSize: number; iconSizeToken: 'sm'; lineHeight: number; color: string };
+} & {
+  useVariants: (
+    variants:
+      | {
+          size?: undefined;
+          variant?: 'off' | 'on' | undefined;
+          pressed?: boolean | 'true' | undefined;
+        }
+      | {
+          size?: undefined;
+          variant?: 'off' | 'on' | undefined;
+          pressed?: boolean | 'true' | undefined;
+        }
+      | {
+          size?: undefined;
+          variant?: 'off' | 'on' | undefined;
+          pressed?: boolean | 'true' | undefined;
+        },
+  ) => void;
+};
+
+export declare const tabsStyles: {
+  root: {
+    backgroundColor: string;
+    borderColor: string;
+    borderRadius: number;
+    borderWidth: number;
+    gap: number;
+    paddingHorizontal: number;
+    paddingVertical: number;
+    boxShadow: string;
+  };
+} & {
+  useVariants: (variants: { variant?: 'primary' | 'secondary' | undefined }) => void;
+};
+
 export declare const toastStyles: {
   root: {
     borderRadius: number;

package/generated/styles.mjs

@@ -1574,11 +1574,39 @@ const bannerStyles = StyleSheet.create((theme) => ({
   description: {
     variants: {
       size: { default: theme.components['banner/size/default/description/rest'] },
+      variant: {
+        alert: theme.components['banner/variant/alert/description/rest'],
+        'alert-secondary': theme.components['banner/variant/alert-secondary/description/rest'],
+        brand: theme.components['banner/variant/brand/description/rest'],
+        'brand-secondary': theme.components['banner/variant/brand-secondary/description/rest'],
+        info: theme.components['banner/variant/info/description/rest'],
+        'info-secondary': theme.components['banner/variant/info-secondary/description/rest'],
+        primary: theme.components['banner/variant/primary/description/rest'],
+        secondary: theme.components['banner/variant/secondary/description/rest'],
+        success: theme.components['banner/variant/success/description/rest'],
+        'success-secondary': theme.components['banner/variant/success-secondary/description/rest'],
+        warning: theme.components['banner/variant/warning/description/rest'],
+        'warning-secondary': theme.components['banner/variant/warning-secondary/description/rest'],
+      },
     },
   },
   title: {
     variants: {
       size: { default: theme.components['banner/size/default/title/rest'] },
+      variant: {
+        alert: theme.components['banner/variant/alert/title/rest'],
+        'alert-secondary': theme.components['banner/variant/alert-secondary/title/rest'],
+        brand: theme.components['banner/variant/brand/title/rest'],
+        'brand-secondary': theme.components['banner/variant/brand-secondary/title/rest'],
+        info: theme.components['banner/variant/info/title/rest'],
+        'info-secondary': theme.components['banner/variant/info-secondary/title/rest'],
+        primary: theme.components['banner/variant/primary/title/rest'],
+        secondary: theme.components['banner/variant/secondary/title/rest'],
+        success: theme.components['banner/variant/success/title/rest'],
+        'success-secondary': theme.components['banner/variant/success-secondary/title/rest'],
+        warning: theme.components['banner/variant/warning/title/rest'],
+        'warning-secondary': theme.components['banner/variant/warning-secondary/title/rest'],
+      },
     },
   },
 }));
@@ -4842,6 +4870,146 @@ const switchStyles = StyleSheet.create((theme) => ({
   },
 }));
 
+/**
+ * Layer-based styles for Tab.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * tabStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: tabStyles.root, tabStyles.icon, etc.
+ * ```
+ */
+const tabStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      size: { default: theme.components['tab/size/default/root/rest'] },
+      variant: {
+        off: theme.components['tab/variant/primary/active/off/root/rest'],
+        on: theme.components['tab/variant/primary/active/on/root/rest'],
+      },
+      pressed: { true: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'off',
+        pressed: true,
+        styles: theme.components['tab/variant/primary/active/off/root/pressed'],
+      },
+      {
+        variant: 'off',
+        pressed: true,
+        styles: theme.components['tab/variant/secondary/active/off/root/pressed'],
+      },
+      {
+        variant: 'on',
+        pressed: true,
+        styles: theme.components['tab/variant/primary/active/on/root/pressed'],
+      },
+      {
+        variant: 'on',
+        pressed: true,
+        styles: theme.components['tab/variant/secondary/active/on/root/pressed'],
+      },
+    ],
+  },
+  text: {
+    variants: {
+      size: { default: theme.components['tab/size/default/rootText/rest'] },
+      variant: {
+        off: theme.components['tab/variant/primary/active/off/rootText/rest'],
+        on: theme.components['tab/variant/primary/active/on/rootText/rest'],
+      },
+      pressed: { true: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'off',
+        pressed: true,
+        styles: theme.components['tab/variant/primary/active/off/rootText/pressed'],
+      },
+      {
+        variant: 'off',
+        pressed: true,
+        styles: theme.components['tab/variant/secondary/active/off/rootText/pressed'],
+      },
+      {
+        variant: 'on',
+        pressed: true,
+        styles: theme.components['tab/variant/primary/active/on/rootText/pressed'],
+      },
+      {
+        variant: 'on',
+        pressed: true,
+        styles: theme.components['tab/variant/secondary/active/on/rootText/pressed'],
+      },
+    ],
+  },
+  icon: {
+    variants: {
+      size: { default: theme.components['tab/size/default/icon/rest'] },
+      variant: {
+        off: theme.components['tab/variant/primary/active/off/icon/rest'],
+        on: theme.components['tab/variant/primary/active/on/icon/rest'],
+      },
+      pressed: { true: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'off',
+        pressed: true,
+        styles: theme.components['tab/variant/primary/active/off/icon/pressed'],
+      },
+      {
+        variant: 'off',
+        pressed: true,
+        styles: theme.components['tab/variant/secondary/active/off/icon/pressed'],
+      },
+      {
+        variant: 'on',
+        pressed: true,
+        styles: theme.components['tab/variant/primary/active/on/icon/pressed'],
+      },
+      {
+        variant: 'on',
+        pressed: true,
+        styles: theme.components['tab/variant/secondary/active/on/icon/pressed'],
+      },
+    ],
+  },
+}));
+
+/**
+ * Layer-based styles for Tabs.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * tabsStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: tabsStyles.root, tabsStyles.icon, etc.
+ * ```
+ */
+const tabsStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      variant: {
+        primary: theme.components['tabs/variant/primary/root/rest'],
+        secondary: theme.components['tabs/variant/secondary/root/rest'],
+      },
+    },
+  },
+}));
+
 /**
  * Layer-based styles for Toast.
  * Uses compound variants for state-specific (disabled/pressed) styles.
@@ -4991,6 +5159,8 @@ export {
   radioStyles,
   scrimStyles,
   switchStyles,
+  tabStyles,
+  tabsStyles,
   toastStyles,
   tooltipStyles,
 };