@yahoo/uds-mobile 2.5.0 → 2.6.0

package/generated/styles.d.ts

@@ -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;

package/generated/styles.mjs

@@ -1512,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.
@@ -4905,6 +4976,7 @@ export {
   styles,
   avatarStyles,
   badgeStyles,
+  bannerStyles,
   bottomSheetStyles,
   buttonStyles,
   checkboxStyles,

package/generated/unistyles.d.ts

@@ -392,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;
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yahoo/uds-mobile",
-  "version": "2.5.0",
+  "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",