@yahoo/uds-mobile 1.3.0-beta.8 → 1.3.0

package/generated/styles.cjs

@@ -4009,74 +4009,98 @@ const linkStyles = StyleSheet.create((theme) => ({
 }));
 
 /**
- * Layer-based styles for Menu.
+ * Layer-based styles for MenuContent.
  * Uses compound variants for state-specific (disabled/pressed) styles.
  *
  * Usage:
  * ```tsx
- * menuStyles.useVariants({
+ * menuContentStyles.useVariants({
  *   size,
  *   variant,
  *   disabled: isDisabled,  // boolean
  *   pressed: isPressed,    // boolean
  * });
- * // Access: menuStyles.root, menuStyles.icon, etc.
+ * // Access: menuContentStyles.root, menuContentStyles.icon, etc.
  * ```
  */
-const menuStyles = StyleSheet.create((theme) => ({
+const menuContentStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      size: { default: theme.components['menuContent/size/default/root/rest'] },
+      variant: { default: theme.components['menuContent/variant/default/root/rest'] },
+    },
+  },
+}));
+
+/**
+ * Layer-based styles for MenuItem.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * menuItemStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: menuItemStyles.root, menuItemStyles.icon, etc.
+ * ```
+ */
+const menuItemStyles = StyleSheet.create((theme) => ({
   root: {
     variants: {
       item: {
-        off: theme.components['menu/item/variant/default/active/off/root/rest'],
-        on: theme.components['menu/item/variant/default/active/on/root/rest'],
+        off: theme.components['menuItem/item/variant/default/active/off/root/rest'],
+        on: theme.components['menuItem/item/variant/default/active/on/root/rest'],
       },
       itemCheckbox: {
-        off: theme.components['menu/itemCheckbox/variant/default/active/off/root/rest'],
-        on: theme.components['menu/itemCheckbox/variant/default/active/on/root/rest'],
+        off: theme.components['menuItem/itemCheckbox/variant/default/active/off/root/rest'],
+        on: theme.components['menuItem/itemCheckbox/variant/default/active/on/root/rest'],
       },
     },
   },
   text: {
     variants: {
-      divider: { default: theme.components['menu/divider/variant/default/text/rest'] },
+      divider: { default: theme.components['menuItem/divider/variant/default/text/rest'] },
       item: {
-        off: theme.components['menu/item/variant/default/active/off/text/rest'],
-        on: theme.components['menu/item/variant/default/active/on/text/rest'],
+        off: theme.components['menuItem/item/variant/default/active/off/text/rest'],
+        on: theme.components['menuItem/item/variant/default/active/on/text/rest'],
       },
       itemCheckbox: {
-        off: theme.components['menu/itemCheckbox/variant/default/active/off/text/rest'],
-        on: theme.components['menu/itemCheckbox/variant/default/active/on/text/rest'],
+        off: theme.components['menuItem/itemCheckbox/variant/default/active/off/text/rest'],
+        on: theme.components['menuItem/itemCheckbox/variant/default/active/on/text/rest'],
       },
     },
   },
   icon: {
     variants: {
       item: {
-        off: theme.components['menu/item/variant/default/active/off/icon/rest'],
-        on: theme.components['menu/item/variant/default/active/on/icon/rest'],
+        off: theme.components['menuItem/item/variant/default/active/off/icon/rest'],
+        on: theme.components['menuItem/item/variant/default/active/on/icon/rest'],
       },
     },
   },
   endIcon: {
     variants: {
-      size: { default: theme.components['menu/size/default/endIcon/rest'] },
+      size: { default: theme.components['menuItem/size/default/endIcon/rest'] },
       itemCheckbox: {
-        off: theme.components['menu/itemCheckbox/variant/default/active/off/endIcon/rest'],
-        on: theme.components['menu/itemCheckbox/variant/default/active/on/endIcon/rest'],
+        off: theme.components['menuItem/itemCheckbox/variant/default/active/off/endIcon/rest'],
+        on: theme.components['menuItem/itemCheckbox/variant/default/active/on/endIcon/rest'],
       },
     },
   },
   line: {
     variants: {
-      divider: { default: theme.components['menu/divider/variant/default/line/rest'] },
+      divider: { default: theme.components['menuItem/divider/variant/default/line/rest'] },
     },
   },
   startIcon: {
     variants: {
-      size: { default: theme.components['menu/size/default/startIcon/rest'] },
+      size: { default: theme.components['menuItem/size/default/startIcon/rest'] },
       itemCheckbox: {
-        off: theme.components['menu/itemCheckbox/variant/default/active/off/startIcon/rest'],
-        on: theme.components['menu/itemCheckbox/variant/default/active/on/startIcon/rest'],
+        off: theme.components['menuItem/itemCheckbox/variant/default/active/off/startIcon/rest'],
+        on: theme.components['menuItem/itemCheckbox/variant/default/active/on/startIcon/rest'],
       },
     },
   },
@@ -4496,6 +4520,76 @@ const switchStyles = StyleSheet.create((theme) => ({
   },
 }));
 
+/**
+ * Layer-based styles for Toast.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * toastStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: toastStyles.root, toastStyles.icon, etc.
+ * ```
+ */
+const toastStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      size: { default: theme.components['toast/size/default/root/rest'] },
+      variant: {
+        error: theme.components['toast/variant/error/root/rest'],
+        info: theme.components['toast/variant/info/root/rest'],
+        loading: theme.components['toast/variant/loading/root/rest'],
+        success: theme.components['toast/variant/success/root/rest'],
+        warning: theme.components['toast/variant/warning/root/rest'],
+      },
+    },
+  },
+  text: {
+    variants: {
+      variant: {
+        error: theme.components['toast/variant/error/rootText/rest'],
+        info: theme.components['toast/variant/info/rootText/rest'],
+        loading: theme.components['toast/variant/loading/rootText/rest'],
+        success: theme.components['toast/variant/success/rootText/rest'],
+        warning: theme.components['toast/variant/warning/rootText/rest'],
+      },
+    },
+  },
+  icon: {
+    variants: {
+      size: { default: theme.components['toast/size/default/icon/rest'] },
+      variant: {
+        error: theme.components['toast/variant/error/icon/rest'],
+        info: theme.components['toast/variant/info/icon/rest'],
+        loading: theme.components['toast/variant/loading/icon/rest'],
+        success: theme.components['toast/variant/success/icon/rest'],
+        warning: theme.components['toast/variant/warning/icon/rest'],
+      },
+    },
+  },
+  closeIcon: {
+    variants: {
+      size: { default: theme.components['toast/size/default/closeIcon/rest'] },
+      variant: {
+        error: theme.components['toast/variant/error/closeIcon/rest'],
+        info: theme.components['toast/variant/info/closeIcon/rest'],
+        loading: theme.components['toast/variant/loading/closeIcon/rest'],
+        success: theme.components['toast/variant/success/closeIcon/rest'],
+        warning: theme.components['toast/variant/warning/closeIcon/rest'],
+      },
+    },
+  },
+  label: {
+    variants: {
+      size: { default: theme.components['toast/size/default/label/rest'] },
+    },
+  },
+}));
+
 module.exports = {
   styles,
   avatarStyles,
@@ -4507,7 +4601,9 @@ module.exports = {
   iconButtonStyles,
   inputStyles,
   linkStyles,
-  menuStyles,
+  menuContentStyles,
+  menuItemStyles,
   radioStyles,
   switchStyles,
+  toastStyles,
 };

package/generated/styles.d.ts

@@ -1434,6 +1434,7 @@ export declare const checkboxStyles: {
     color: string;
   };
   checkbox: {
+    borderRadius: number;
     borderWidth: number;
     height: number;
     width: number;
@@ -1745,7 +1746,22 @@ export declare const linkStyles: {
   ) => void;
 };
 
-export declare const menuStyles: {
+export declare const menuContentStyles: {
+  root: {
+    borderRadius: number;
+    borderWidth: number;
+    boxShadow: string;
+    gap: number;
+    paddingHorizontal: number;
+    paddingVertical: number;
+    backgroundColor: string;
+    borderColor: string;
+  };
+} & {
+  useVariants: (variants: { size?: undefined; variant?: undefined }) => void;
+};
+
+export declare const menuItemStyles: {
   root: { backgroundColor: string };
   icon: { color: string };
   endIcon: { color: string; fontSize: number; lineHeight: number };
@@ -1838,6 +1854,37 @@ export declare const switchStyles: {
   ) => void;
 };
 
+export declare const toastStyles: {
+  root: { borderRadius: number; gap: number; paddingHorizontal: number; paddingVertical: number };
+  text: { color: string };
+  icon: { fontSize: number; lineHeight: number; color: string };
+  closeIcon: { fontSize: number; lineHeight: number; color: string };
+  label: {
+    fontFamily: 'YahooProductSans-Medium';
+    fontSize: number;
+    letterSpacing: number;
+    lineHeight: number;
+  };
+} & {
+  useVariants: (
+    variants:
+      | {
+          size?: undefined;
+          variant?: 'warning' | 'info' | 'error' | 'loading' | 'success' | undefined;
+        }
+      | { variant?: 'warning' | 'info' | 'error' | 'loading' | 'success' | undefined }
+      | {
+          size?: undefined;
+          variant?: 'warning' | 'info' | 'error' | 'loading' | 'success' | undefined;
+        }
+      | {
+          size?: undefined;
+          variant?: 'warning' | 'info' | 'error' | 'loading' | 'success' | undefined;
+        }
+      | { size?: undefined },
+  ) => void;
+};
+
 export type StyleProps = {
   backgroundColor?:
     | 'primary'

package/generated/styles.mjs

@@ -4009,74 +4009,98 @@ const linkStyles = StyleSheet.create((theme) => ({
 }));
 
 /**
- * Layer-based styles for Menu.
+ * Layer-based styles for MenuContent.
  * Uses compound variants for state-specific (disabled/pressed) styles.
  *
  * Usage:
  * ```tsx
- * menuStyles.useVariants({
+ * menuContentStyles.useVariants({
  *   size,
  *   variant,
  *   disabled: isDisabled,  // boolean
  *   pressed: isPressed,    // boolean
  * });
- * // Access: menuStyles.root, menuStyles.icon, etc.
+ * // Access: menuContentStyles.root, menuContentStyles.icon, etc.
  * ```
  */
-const menuStyles = StyleSheet.create((theme) => ({
+const menuContentStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      size: { default: theme.components['menuContent/size/default/root/rest'] },
+      variant: { default: theme.components['menuContent/variant/default/root/rest'] },
+    },
+  },
+}));
+
+/**
+ * Layer-based styles for MenuItem.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * menuItemStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: menuItemStyles.root, menuItemStyles.icon, etc.
+ * ```
+ */
+const menuItemStyles = StyleSheet.create((theme) => ({
   root: {
     variants: {
       item: {
-        off: theme.components['menu/item/variant/default/active/off/root/rest'],
-        on: theme.components['menu/item/variant/default/active/on/root/rest'],
+        off: theme.components['menuItem/item/variant/default/active/off/root/rest'],
+        on: theme.components['menuItem/item/variant/default/active/on/root/rest'],
       },
       itemCheckbox: {
-        off: theme.components['menu/itemCheckbox/variant/default/active/off/root/rest'],
-        on: theme.components['menu/itemCheckbox/variant/default/active/on/root/rest'],
+        off: theme.components['menuItem/itemCheckbox/variant/default/active/off/root/rest'],
+        on: theme.components['menuItem/itemCheckbox/variant/default/active/on/root/rest'],
       },
     },
   },
   text: {
     variants: {
-      divider: { default: theme.components['menu/divider/variant/default/text/rest'] },
+      divider: { default: theme.components['menuItem/divider/variant/default/text/rest'] },
       item: {
-        off: theme.components['menu/item/variant/default/active/off/text/rest'],
-        on: theme.components['menu/item/variant/default/active/on/text/rest'],
+        off: theme.components['menuItem/item/variant/default/active/off/text/rest'],
+        on: theme.components['menuItem/item/variant/default/active/on/text/rest'],
       },
       itemCheckbox: {
-        off: theme.components['menu/itemCheckbox/variant/default/active/off/text/rest'],
-        on: theme.components['menu/itemCheckbox/variant/default/active/on/text/rest'],
+        off: theme.components['menuItem/itemCheckbox/variant/default/active/off/text/rest'],
+        on: theme.components['menuItem/itemCheckbox/variant/default/active/on/text/rest'],
       },
     },
   },
   icon: {
     variants: {
       item: {
-        off: theme.components['menu/item/variant/default/active/off/icon/rest'],
-        on: theme.components['menu/item/variant/default/active/on/icon/rest'],
+        off: theme.components['menuItem/item/variant/default/active/off/icon/rest'],
+        on: theme.components['menuItem/item/variant/default/active/on/icon/rest'],
       },
     },
   },
   endIcon: {
     variants: {
-      size: { default: theme.components['menu/size/default/endIcon/rest'] },
+      size: { default: theme.components['menuItem/size/default/endIcon/rest'] },
       itemCheckbox: {
-        off: theme.components['menu/itemCheckbox/variant/default/active/off/endIcon/rest'],
-        on: theme.components['menu/itemCheckbox/variant/default/active/on/endIcon/rest'],
+        off: theme.components['menuItem/itemCheckbox/variant/default/active/off/endIcon/rest'],
+        on: theme.components['menuItem/itemCheckbox/variant/default/active/on/endIcon/rest'],
       },
     },
   },
   line: {
     variants: {
-      divider: { default: theme.components['menu/divider/variant/default/line/rest'] },
+      divider: { default: theme.components['menuItem/divider/variant/default/line/rest'] },
     },
   },
   startIcon: {
     variants: {
-      size: { default: theme.components['menu/size/default/startIcon/rest'] },
+      size: { default: theme.components['menuItem/size/default/startIcon/rest'] },
       itemCheckbox: {
-        off: theme.components['menu/itemCheckbox/variant/default/active/off/startIcon/rest'],
-        on: theme.components['menu/itemCheckbox/variant/default/active/on/startIcon/rest'],
+        off: theme.components['menuItem/itemCheckbox/variant/default/active/off/startIcon/rest'],
+        on: theme.components['menuItem/itemCheckbox/variant/default/active/on/startIcon/rest'],
       },
     },
   },
@@ -4496,6 +4520,76 @@ const switchStyles = StyleSheet.create((theme) => ({
   },
 }));
 
+/**
+ * Layer-based styles for Toast.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * toastStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: toastStyles.root, toastStyles.icon, etc.
+ * ```
+ */
+const toastStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      size: { default: theme.components['toast/size/default/root/rest'] },
+      variant: {
+        error: theme.components['toast/variant/error/root/rest'],
+        info: theme.components['toast/variant/info/root/rest'],
+        loading: theme.components['toast/variant/loading/root/rest'],
+        success: theme.components['toast/variant/success/root/rest'],
+        warning: theme.components['toast/variant/warning/root/rest'],
+      },
+    },
+  },
+  text: {
+    variants: {
+      variant: {
+        error: theme.components['toast/variant/error/rootText/rest'],
+        info: theme.components['toast/variant/info/rootText/rest'],
+        loading: theme.components['toast/variant/loading/rootText/rest'],
+        success: theme.components['toast/variant/success/rootText/rest'],
+        warning: theme.components['toast/variant/warning/rootText/rest'],
+      },
+    },
+  },
+  icon: {
+    variants: {
+      size: { default: theme.components['toast/size/default/icon/rest'] },
+      variant: {
+        error: theme.components['toast/variant/error/icon/rest'],
+        info: theme.components['toast/variant/info/icon/rest'],
+        loading: theme.components['toast/variant/loading/icon/rest'],
+        success: theme.components['toast/variant/success/icon/rest'],
+        warning: theme.components['toast/variant/warning/icon/rest'],
+      },
+    },
+  },
+  closeIcon: {
+    variants: {
+      size: { default: theme.components['toast/size/default/closeIcon/rest'] },
+      variant: {
+        error: theme.components['toast/variant/error/closeIcon/rest'],
+        info: theme.components['toast/variant/info/closeIcon/rest'],
+        loading: theme.components['toast/variant/loading/closeIcon/rest'],
+        success: theme.components['toast/variant/success/closeIcon/rest'],
+        warning: theme.components['toast/variant/warning/closeIcon/rest'],
+      },
+    },
+  },
+  label: {
+    variants: {
+      size: { default: theme.components['toast/size/default/label/rest'] },
+    },
+  },
+}));
+
 export {
   styles,
   avatarStyles,
@@ -4507,7 +4601,9 @@ export {
   iconButtonStyles,
   inputStyles,
   linkStyles,
-  menuStyles,
+  menuContentStyles,
+  menuItemStyles,
   radioStyles,
   switchStyles,
+  toastStyles,
 };