@yahoo/uds-mobile 2.15.0 → 2.16.0

package/generated/styles.d.ts

@@ -2011,6 +2011,35 @@ export declare const modalStyles: {
   ) => void;
 };
 
+export declare const paddleNavStyles: {
+  root: { borderRadius: number; borderWidth: number; padding: number; borderColor: string };
+  icon: {
+    fontSize: number;
+    iconSizeToken: 'md' | 'sm' | 'lg' | 'xs';
+    lineHeight: number;
+    color: string;
+  };
+  background: { backgroundColor: string; opacity: number };
+} & {
+  useVariants: (
+    variants:
+      | {
+          size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
+          variant?: 'primary' | 'secondary' | 'tertiary' | undefined;
+          pressed?: boolean | 'true' | undefined;
+        }
+      | {
+          size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
+          variant?: 'primary' | 'secondary' | 'tertiary' | undefined;
+          pressed?: boolean | 'true' | undefined;
+        }
+      | {
+          variant?: 'primary' | 'secondary' | 'tertiary' | undefined;
+          pressed?: boolean | 'true' | undefined;
+        },
+  ) => void;
+};
+
 export declare const popoverStyles: {
   root: { boxShadow: string };
   blur: { backgroundBlurRadius: number };

package/generated/styles.mjs

@@ -4456,6 +4456,119 @@ const modalStyles = StyleSheet.create((theme) => ({
   },
 }));
 
+/**
+ * Layer-based styles for PaddleNav.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * paddleNavStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: paddleNavStyles.root, paddleNavStyles.icon, etc.
+ * ```
+ */
+const paddleNavStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      size: {
+        lg: theme.components['paddleNav/size/lg/root/rest'],
+        md: theme.components['paddleNav/size/md/root/rest'],
+        sm: theme.components['paddleNav/size/sm/root/rest'],
+        xl: theme.components['paddleNav/size/xl/root/rest'],
+        xs: theme.components['paddleNav/size/xs/root/rest'],
+      },
+      variant: {
+        primary: theme.components['paddleNav/variant/primary/root/rest'],
+        secondary: theme.components['paddleNav/variant/secondary/root/rest'],
+        tertiary: theme.components['paddleNav/variant/tertiary/root/rest'],
+      },
+      pressed: { true: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'primary',
+        pressed: true,
+        styles: theme.components['paddleNav/variant/primary/root/pressed'],
+      },
+      {
+        variant: 'secondary',
+        pressed: true,
+        styles: theme.components['paddleNav/variant/secondary/root/pressed'],
+      },
+      {
+        variant: 'tertiary',
+        pressed: true,
+        styles: theme.components['paddleNav/variant/tertiary/root/pressed'],
+      },
+    ],
+  },
+  icon: {
+    variants: {
+      size: {
+        lg: theme.components['paddleNav/size/lg/icon/rest'],
+        md: theme.components['paddleNav/size/md/icon/rest'],
+        sm: theme.components['paddleNav/size/sm/icon/rest'],
+        xl: theme.components['paddleNav/size/xl/icon/rest'],
+        xs: theme.components['paddleNav/size/xs/icon/rest'],
+      },
+      variant: {
+        primary: theme.components['paddleNav/variant/primary/icon/rest'],
+        secondary: theme.components['paddleNav/variant/secondary/icon/rest'],
+        tertiary: theme.components['paddleNav/variant/tertiary/icon/rest'],
+      },
+      pressed: { true: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'primary',
+        pressed: true,
+        styles: theme.components['paddleNav/variant/primary/icon/pressed'],
+      },
+      {
+        variant: 'secondary',
+        pressed: true,
+        styles: theme.components['paddleNav/variant/secondary/icon/pressed'],
+      },
+      {
+        variant: 'tertiary',
+        pressed: true,
+        styles: theme.components['paddleNav/variant/tertiary/icon/pressed'],
+      },
+    ],
+  },
+  background: {
+    variants: {
+      variant: {
+        primary: theme.components['paddleNav/variant/primary/background/rest'],
+        secondary: theme.components['paddleNav/variant/secondary/background/rest'],
+        tertiary: theme.components['paddleNav/variant/tertiary/background/rest'],
+      },
+      pressed: { true: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'primary',
+        pressed: true,
+        styles: theme.components['paddleNav/variant/primary/background/pressed'],
+      },
+      {
+        variant: 'secondary',
+        pressed: true,
+        styles: theme.components['paddleNav/variant/secondary/background/pressed'],
+      },
+      {
+        variant: 'tertiary',
+        pressed: true,
+        styles: theme.components['paddleNav/variant/tertiary/background/pressed'],
+      },
+    ],
+  },
+}));
+
 /**
  * Layer-based styles for Popover.
  * Uses compound variants for state-specific (disabled/pressed) styles.
@@ -5233,6 +5346,7 @@ export {
   menuContentStyles,
   menuItemStyles,
   modalStyles,
+  paddleNavStyles,
   popoverStyles,
   radioStyles,
   scrimStyles,

package/generated/unistyles.d.ts

@@ -4003,6 +4003,116 @@ interface ComponentTheme {
   'modal/variant/default/title/rest': {
     color: string;
   };
+  'paddleNav/size/lg/icon/rest': {
+    fontSize: number;
+    iconSizeToken: string;
+    lineHeight: number;
+  };
+  'paddleNav/size/lg/root/rest': {
+    borderRadius: number;
+    borderWidth: number;
+    padding: number;
+  };
+  'paddleNav/size/md/icon/rest': {
+    fontSize: number;
+    iconSizeToken: string;
+    lineHeight: number;
+  };
+  'paddleNav/size/md/root/rest': {
+    borderRadius: number;
+    borderWidth: number;
+    padding: number;
+  };
+  'paddleNav/size/sm/icon/rest': {
+    fontSize: number;
+    iconSizeToken: string;
+    lineHeight: number;
+  };
+  'paddleNav/size/sm/root/rest': {
+    borderRadius: number;
+    borderWidth: number;
+    padding: number;
+  };
+  'paddleNav/size/xl/icon/rest': {
+    fontSize: number;
+    iconSizeToken: string;
+    lineHeight: number;
+  };
+  'paddleNav/size/xl/root/rest': {
+    borderRadius: number;
+    borderWidth: number;
+    padding: number;
+  };
+  'paddleNav/size/xs/icon/rest': {
+    fontSize: number;
+    iconSizeToken: string;
+    lineHeight: number;
+  };
+  'paddleNav/size/xs/root/rest': {
+    borderRadius: number;
+    borderWidth: number;
+    padding: number;
+  };
+  'paddleNav/variant/primary/background/pressed': {
+    backgroundColor: string;
+    opacity: number;
+  };
+  'paddleNav/variant/primary/background/rest': {
+    backgroundColor: string;
+    opacity: number;
+  };
+  'paddleNav/variant/primary/icon/pressed': {
+    color: string;
+  };
+  'paddleNav/variant/primary/icon/rest': {
+    color: string;
+  };
+  'paddleNav/variant/primary/root/pressed': {
+    borderColor: string;
+  };
+  'paddleNav/variant/primary/root/rest': {
+    borderColor: string;
+  };
+  'paddleNav/variant/secondary/background/pressed': {
+    backgroundColor: string;
+    opacity: number;
+  };
+  'paddleNav/variant/secondary/background/rest': {
+    backgroundColor: string;
+    opacity: number;
+  };
+  'paddleNav/variant/secondary/icon/pressed': {
+    color: string;
+  };
+  'paddleNav/variant/secondary/icon/rest': {
+    color: string;
+  };
+  'paddleNav/variant/secondary/root/pressed': {
+    borderColor: string;
+  };
+  'paddleNav/variant/secondary/root/rest': {
+    borderColor: string;
+  };
+  'paddleNav/variant/tertiary/background/pressed': {
+    backgroundColor: string;
+    opacity: number;
+  };
+  'paddleNav/variant/tertiary/background/rest': {
+    backgroundColor: string;
+    opacity: number;
+  };
+  'paddleNav/variant/tertiary/icon/pressed': {
+    color: string;
+  };
+  'paddleNav/variant/tertiary/icon/rest': {
+    color: string;
+  };
+  'paddleNav/variant/tertiary/root/pressed': {
+    borderColor: string;
+  };
+  'paddleNav/variant/tertiary/root/rest': {
+    borderColor: string;
+  };
   'popover/size/default/closeIcon/rest': {
     fontSize: number;
     iconSizeToken: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yahoo/uds-mobile",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "type": "module",
   "bin": {
     "uds-mobile": "./cli/uds-mobile.js"
@@ -190,6 +190,16 @@
         "default": "./dist/components/Input.cjs"
       }
     },
+    "./InputHelpText": {
+      "import": {
+        "types": "./dist/components/InputHelpText.d.ts",
+        "default": "./dist/components/InputHelpText.js"
+      },
+      "require": {
+        "types": "./dist/components/InputHelpText.d.cts",
+        "default": "./dist/components/InputHelpText.cjs"
+      }
+    },
     "./Link": {
       "import": {
         "types": "./dist/components/Link.d.ts",