@yahoo/uds-mobile 2.4.3 → 2.6.0

package/generated/styles.d.ts

@@ -1233,7 +1233,7 @@ export declare const styles: {
       | '2xl-invert'
       | undefined;
     iconSize?: 'xs' | 'sm' | 'md' | 'lg' | undefined;
-    avatarSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
+    avatarSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '2xs' | '3xl' | undefined;
   }) => void;
 };
 
@@ -1259,25 +1259,25 @@ export declare const avatarStyles: {
     borderColor: string;
     borderRadius: number;
     fontSize: number;
-    iconSizeToken: 'lg' | 'md' | 'sm';
+    iconSizeToken: 'lg' | 'xs' | 'md' | 'sm';
     lineHeight: number;
   };
 } & {
   useVariants: (
     variants:
       | {
-          size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
+          size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '2xs' | '3xl' | undefined;
           icon?: 'primary' | 'secondary' | undefined;
           image?: 'primary' | 'secondary' | undefined;
           text?: 'primary' | 'secondary' | undefined;
         }
       | {
-          size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
+          size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '2xs' | '3xl' | undefined;
           icon?: 'primary' | 'secondary' | undefined;
           text?: 'primary' | 'secondary' | undefined;
         }
       | {
-          size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
+          size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '2xs' | '3xl' | undefined;
           icon?: 'primary' | 'secondary' | undefined;
         },
   ) => void;
@@ -1358,6 +1358,73 @@ export declare const badgeStyles: {
   ) => void;
 };
 
+export declare const bannerStyles: {
+  root: {
+    borderRadius: number;
+    gap: number;
+    paddingHorizontal: number;
+    paddingVertical: number;
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+  };
+  icon: { fontSize: number; iconSizeToken: 'md'; lineHeight: number; color: string };
+  close: { fontSize: number; iconSizeToken: 'sm'; lineHeight: number };
+  description: {
+    fontFamily: 'YahooProductSans-Medium';
+    fontSize: number;
+    letterSpacing: number;
+    lineHeight: number;
+  };
+  title: {
+    fontFamily: 'YahooProductSans-Medium';
+    fontSize: number;
+    letterSpacing: number;
+    lineHeight: number;
+  };
+} & {
+  useVariants: (
+    variants:
+      | {
+          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;
+        }
+      | { size?: undefined }
+      | { size?: undefined }
+      | { size?: undefined },
+  ) => void;
+};
+
 export declare const bottomSheetStyles: {
   root: {
     backgroundColor: string;
@@ -1981,16 +2048,16 @@ export declare const toastStyles: {
     variants:
       | {
           size?: undefined;
-          variant?: 'warning' | 'info' | 'error' | 'loading' | 'success' | undefined;
+          variant?: 'warning' | 'info' | 'success' | 'error' | 'loading' | undefined;
         }
-      | { variant?: 'warning' | 'info' | 'error' | 'loading' | 'success' | undefined }
+      | { variant?: 'warning' | 'info' | 'success' | 'error' | 'loading' | undefined }
       | {
           size?: undefined;
-          variant?: 'warning' | 'info' | 'error' | 'loading' | 'success' | undefined;
+          variant?: 'warning' | 'info' | 'success' | 'error' | 'loading' | undefined;
         }
       | {
           size?: undefined;
-          variant?: 'warning' | 'info' | 'error' | 'loading' | 'success' | undefined;
+          variant?: 'warning' | 'info' | 'success' | 'error' | 'loading' | undefined;
         }
       | { size?: undefined },
   ) => void;
@@ -3187,5 +3254,5 @@ export type StyleProps = {
     | '2xl-invert'
     | undefined;
   iconSize?: 'xs' | 'sm' | 'md' | 'lg' | undefined;
-  avatarSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
+  avatarSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '2xs' | '3xl' | undefined;
 };

package/generated/styles.mjs

@@ -1329,6 +1329,9 @@ const styles = StyleSheet.create((theme) => ({
         md: { width: theme.avatarSize['md'], height: theme.avatarSize['md'] },
         lg: { width: theme.avatarSize['lg'], height: theme.avatarSize['lg'] },
         xl: { width: theme.avatarSize['xl'], height: theme.avatarSize['xl'] },
+        '2xl': { width: theme.avatarSize['2xl'], height: theme.avatarSize['2xl'] },
+        '2xs': { width: theme.avatarSize['2xs'], height: theme.avatarSize['2xs'] },
+        '3xl': { width: theme.avatarSize['3xl'], height: theme.avatarSize['3xl'] },
       },
     },
   },
@@ -1354,6 +1357,9 @@ const avatarStyles = StyleSheet.create((theme) => ({
   root: {
     variants: {
       size: {
+        '2xl': theme.components['avatar/size/2xl/root/rest'],
+        '2xs': theme.components['avatar/size/2xs/root/rest'],
+        '3xl': theme.components['avatar/size/3xl/root/rest'],
         lg: theme.components['avatar/size/lg/root/rest'],
         md: theme.components['avatar/size/md/root/rest'],
         sm: theme.components['avatar/size/sm/root/rest'],
@@ -1377,6 +1383,9 @@ const avatarStyles = StyleSheet.create((theme) => ({
   text: {
     variants: {
       size: {
+        '2xl': theme.components['avatar/size/2xl/rootText/rest'],
+        '2xs': theme.components['avatar/size/2xs/rootText/rest'],
+        '3xl': theme.components['avatar/size/3xl/rootText/rest'],
         lg: theme.components['avatar/size/lg/rootText/rest'],
         md: theme.components['avatar/size/md/rootText/rest'],
         sm: theme.components['avatar/size/sm/rootText/rest'],
@@ -1396,6 +1405,9 @@ const avatarStyles = StyleSheet.create((theme) => ({
   icon: {
     variants: {
       size: {
+        '2xl': theme.components['avatar/size/2xl/icon/rest'],
+        '2xs': theme.components['avatar/size/2xs/icon/rest'],
+        '3xl': theme.components['avatar/size/3xl/icon/rest'],
         lg: theme.components['avatar/size/lg/icon/rest'],
         md: theme.components['avatar/size/md/icon/rest'],
         sm: theme.components['avatar/size/sm/icon/rest'],
@@ -1500,6 +1512,77 @@ const badgeStyles = StyleSheet.create((theme) => ({
   },
 }));
 
+/**
+ * Layer-based styles for Banner.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * bannerStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: bannerStyles.root, bannerStyles.icon, etc.
+ * ```
+ */
+const bannerStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      size: { default: theme.components['banner/size/default/root/rest'] },
+      variant: {
+        alert: theme.components['banner/variant/alert/root/rest'],
+        'alert-secondary': theme.components['banner/variant/alert-secondary/root/rest'],
+        brand: theme.components['banner/variant/brand/root/rest'],
+        'brand-secondary': theme.components['banner/variant/brand-secondary/root/rest'],
+        info: theme.components['banner/variant/info/root/rest'],
+        'info-secondary': theme.components['banner/variant/info-secondary/root/rest'],
+        primary: theme.components['banner/variant/primary/root/rest'],
+        secondary: theme.components['banner/variant/secondary/root/rest'],
+        success: theme.components['banner/variant/success/root/rest'],
+        'success-secondary': theme.components['banner/variant/success-secondary/root/rest'],
+        warning: theme.components['banner/variant/warning/root/rest'],
+        'warning-secondary': theme.components['banner/variant/warning-secondary/root/rest'],
+      },
+    },
+  },
+  icon: {
+    variants: {
+      size: { default: theme.components['banner/size/default/icon/rest'] },
+      variant: {
+        alert: theme.components['banner/variant/alert/icon/rest'],
+        'alert-secondary': theme.components['banner/variant/alert-secondary/icon/rest'],
+        brand: theme.components['banner/variant/brand/icon/rest'],
+        'brand-secondary': theme.components['banner/variant/brand-secondary/icon/rest'],
+        info: theme.components['banner/variant/info/icon/rest'],
+        'info-secondary': theme.components['banner/variant/info-secondary/icon/rest'],
+        primary: theme.components['banner/variant/primary/icon/rest'],
+        secondary: theme.components['banner/variant/secondary/icon/rest'],
+        success: theme.components['banner/variant/success/icon/rest'],
+        'success-secondary': theme.components['banner/variant/success-secondary/icon/rest'],
+        warning: theme.components['banner/variant/warning/icon/rest'],
+        'warning-secondary': theme.components['banner/variant/warning-secondary/icon/rest'],
+      },
+    },
+  },
+  close: {
+    variants: {
+      size: { default: theme.components['banner/size/default/close/rest'] },
+    },
+  },
+  description: {
+    variants: {
+      size: { default: theme.components['banner/size/default/description/rest'] },
+    },
+  },
+  title: {
+    variants: {
+      size: { default: theme.components['banner/size/default/title/rest'] },
+    },
+  },
+}));
+
 /**
  * Layer-based styles for BottomSheet.
  * Uses compound variants for state-specific (disabled/pressed) styles.
@@ -4893,6 +4976,7 @@ export {
   styles,
   avatarStyles,
   badgeStyles,
+  bannerStyles,
   bottomSheetStyles,
   buttonStyles,
   checkboxStyles,

package/generated/unistyles.d.ts

@@ -40,6 +40,54 @@ interface ComponentTheme {
     borderColor: string;
     borderRadius: number;
   };
+  'avatar/size/2xl/icon/rest': {
+    fontSize: number;
+    iconSizeToken: string;
+    lineHeight: number;
+  };
+  'avatar/size/2xl/root/rest': {
+    borderWidth: number;
+    height: number;
+    width: number;
+  };
+  'avatar/size/2xl/rootText/rest': {
+    fontFamily: string;
+    fontSize: number;
+    letterSpacing: number;
+    lineHeight: number;
+  };
+  'avatar/size/2xs/icon/rest': {
+    fontSize: number;
+    iconSizeToken: string;
+    lineHeight: number;
+  };
+  'avatar/size/2xs/root/rest': {
+    borderWidth: number;
+    height: number;
+    width: number;
+  };
+  'avatar/size/2xs/rootText/rest': {
+    fontFamily: string;
+    fontSize: number;
+    letterSpacing: number;
+    lineHeight: number;
+  };
+  'avatar/size/3xl/icon/rest': {
+    fontSize: number;
+    iconSizeToken: string;
+    lineHeight: number;
+  };
+  'avatar/size/3xl/root/rest': {
+    borderWidth: number;
+    height: number;
+    width: number;
+  };
+  'avatar/size/3xl/rootText/rest': {
+    fontFamily: string;
+    fontSize: number;
+    letterSpacing: number;
+    lineHeight: number;
+  };
   'avatar/size/lg/icon/rest': {
     fontSize: number;
     iconSizeToken: string;
@@ -344,6 +392,130 @@ interface ComponentTheme {
   'badge/variant/warning/rootText/rest': {
     color: string;
   };
+  'banner/size/default/close/rest': {
+    fontSize: number;
+    iconSizeToken: string;
+    lineHeight: number;
+  };
+  'banner/size/default/description/rest': {
+    fontFamily: string;
+    fontSize: number;
+    letterSpacing: number;
+    lineHeight: number;
+  };
+  'banner/size/default/icon/rest': {
+    fontSize: number;
+    iconSizeToken: string;
+    lineHeight: number;
+  };
+  'banner/size/default/root/rest': {
+    borderRadius: number;
+    gap: number;
+    paddingHorizontal: number;
+    paddingVertical: number;
+  };
+  'banner/size/default/title/rest': {
+    fontFamily: string;
+    fontSize: number;
+    letterSpacing: number;
+    lineHeight: number;
+  };
+  'banner/variant/alert-secondary/icon/rest': {
+    color: string;
+  };
+  'banner/variant/alert-secondary/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+  };
+  'banner/variant/alert/icon/rest': {
+    color: string;
+  };
+  'banner/variant/alert/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+  };
+  'banner/variant/brand-secondary/icon/rest': {
+    color: string;
+  };
+  'banner/variant/brand-secondary/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+  };
+  'banner/variant/brand/icon/rest': {
+    color: string;
+  };
+  'banner/variant/brand/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+  };
+  'banner/variant/info-secondary/icon/rest': {
+    color: string;
+  };
+  'banner/variant/info-secondary/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+  };
+  'banner/variant/info/icon/rest': {
+    color: string;
+  };
+  'banner/variant/info/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+  };
+  'banner/variant/primary/icon/rest': {
+    color: string;
+  };
+  'banner/variant/primary/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+  };
+  'banner/variant/secondary/icon/rest': {
+    color: string;
+  };
+  'banner/variant/secondary/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+  };
+  'banner/variant/success-secondary/icon/rest': {
+    color: string;
+  };
+  'banner/variant/success-secondary/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+  };
+  'banner/variant/success/icon/rest': {
+    color: string;
+  };
+  'banner/variant/success/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+  };
+  'banner/variant/warning-secondary/icon/rest': {
+    color: string;
+  };
+  'banner/variant/warning-secondary/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+  };
+  'banner/variant/warning/icon/rest': {
+    color: string;
+  };
+  'banner/variant/warning/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+  };
   'bottomSheet/variant/default/handleIndicator/rest': {
     backgroundColor: string;
   };
@@ -4624,6 +4796,9 @@ export interface AppTheme {
     md: number;
     lg: number;
     xl: number;
+    '2xl': number;
+    '2xs': number;
+    '3xl': number;
   };
   font: {
     sans: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yahoo/uds-mobile",
-  "version": "2.4.3",
+  "version": "2.6.0",
   "type": "module",
   "bin": {
     "uds-mobile": "./cli/uds-mobile.js"
@@ -40,6 +40,16 @@
         "default": "./dist/components/Badge.cjs"
       }
     },
+    "./Banner": {
+      "import": {
+        "types": "./dist/components/Banner/index.d.ts",
+        "default": "./dist/components/Banner/index.js"
+      },
+      "require": {
+        "types": "./dist/components/Banner/index.d.cts",
+        "default": "./dist/components/Banner/index.cjs"
+      }
+    },
     "./BlurTarget": {
       "import": {
         "types": "./dist/components/BlurTarget.d.ts",