@yahoo/uds-mobile 2.14.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.14.0",
+  "version": "2.16.0",
   "type": "module",
   "bin": {
     "uds-mobile": "./cli/uds-mobile.js"
@@ -22,12 +22,12 @@
   "exports": {
     "./Avatar": {
       "import": {
-        "types": "./dist/components/Avatar.d.ts",
-        "default": "./dist/components/Avatar.js"
+        "types": "./dist/components/Avatar/index.d.ts",
+        "default": "./dist/components/Avatar/index.js"
       },
       "require": {
-        "types": "./dist/components/Avatar.d.cts",
-        "default": "./dist/components/Avatar.cjs"
+        "types": "./dist/components/Avatar/index.d.cts",
+        "default": "./dist/components/Avatar/index.cjs"
       }
     },
     "./Badge": {
@@ -102,12 +102,12 @@
     },
     "./Chip": {
       "import": {
-        "types": "./dist/components/Chip.d.ts",
-        "default": "./dist/components/Chip.js"
+        "types": "./dist/components/Chip/index.d.ts",
+        "default": "./dist/components/Chip/index.js"
       },
       "require": {
-        "types": "./dist/components/Chip.d.cts",
-        "default": "./dist/components/Chip.cjs"
+        "types": "./dist/components/Chip/index.d.cts",
+        "default": "./dist/components/Chip/index.cjs"
       }
     },
     "./Divider": {
@@ -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",

package/dist/components/Avatar.cjs

@@ -1,116 +0,0 @@
-/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../_virtual/_rolldown/runtime.cjs");
-const require_components_Box = require("./Box.cjs");
-const require_components_IconSlot = require("./IconSlot.cjs");
-const require_components_Text = require("./Text.cjs");
-let react = require("react");
-let react_native = require("react-native");
-let react_jsx_runtime = require("react/jsx-runtime");
-let generated_styles = require("../../generated/styles");
-//#region src/components/Avatar.tsx
-const abbreviationStrategies = {
-	first: (initials) => initials[0] ?? "",
-	last: (initials) => initials[initials.length - 1] ?? "",
-	firstAndLast: (initials) => initials.length === 1 ? initials[0] ?? "" : `${initials[0]}${initials[initials.length - 1]}`,
-	firstTwo: (initials) => initials.slice(0, 2).join(""),
-	firstThree: (initials) => initials.slice(0, 3).join(""),
-	firstOfEach: (initials) => initials.join("")
-};
-/** Generate initials from a name */
-function generateInitials(name, strategy = "firstAndLast") {
-	if (!name) return "";
-	if (typeof strategy === "function") return strategy(name);
-	const initials = name.trim().split(/\s+/).map((word) => word[0]?.toUpperCase() ?? "");
-	return abbreviationStrategies[strategy](initials);
-}
-/**
-* **Avatar component for user representation**
-*
-* @description
-* Displays a user avatar with image, initials fallback, or icon fallback.
-*
-* @category Display
-* @platform mobile
-*
-* @example
-* ```tsx
-* import { Avatar } from '@yahoo/uds-mobile/Avatar';
-*
-* // With image
-* <Avatar
-*   src="https://example.com/photo.jpg"
-*   alt="Jane Doe"
-* />
-*
-* // With initials fallback
-* <Avatar alt="Jane Doe" />
-*
-* // With explicit initials
-* <Avatar fallback="JD" />
-*
-* // With custom icon
-* <Avatar icon="Person" variant="secondary" />
-* ```
-*
-* @accessibility
-* - Sets `accessibilityRole="image"` automatically
-* - Uses `alt` prop as accessibility label
-* - Always provide meaningful `alt` text for user identification
-*
-* @see {@link Image} for general image display
-*/
-const Avatar = (0, react.forwardRef)(function Avatar({ src, alt, fallback, size = "md", variant = "primary", icon, abbreviationStrategy = "firstAndLast", style, ...props }, ref) {
-	const [imageError, setImageError] = (0, react.useState)(false);
-	const initials = fallback || generateInitials(alt, abbreviationStrategy);
-	const hasImage = src && !imageError;
-	const hasText = initials.length > 0;
-	const showImage = hasImage;
-	const showText = !hasImage && hasText;
-	const showIcon = !hasImage && !hasText;
-	generated_styles.avatarStyles.useVariants({
-		size,
-		...showImage && { image: variant },
-		...showText && { text: variant },
-		...showIcon && { icon: variant }
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
-		ref,
-		style: [
-			generated_styles.avatarStyles.root,
-			{
-				alignItems: "center",
-				justifyContent: "center",
-				overflow: "hidden"
-			},
-			style
-		],
-		accessibilityRole: "image",
-		accessibilityLabel: alt,
-		...props,
-		children: [
-			showImage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Image, {
-				source: { uri: src },
-				style: {
-					width: "100%",
-					height: "100%"
-				},
-				onError: () => setImageError(true),
-				accessibilityLabel: alt
-			}),
-			showText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
-				style: generated_styles.avatarStyles.text,
-				numberOfLines: 1,
-				children: initials
-			}),
-			showIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
-				icon: icon ?? "Person",
-				variant: "fill",
-				style: generated_styles.avatarStyles.icon
-			})
-		]
-	});
-});
-Avatar.displayName = "Avatar";
-//#endregion
-exports.Avatar = Avatar;

package/dist/components/Avatar.d.cts

@@ -1,68 +0,0 @@
-
-import { IconSlotType } from "./IconSlot.cjs";
-import * as _$react from "react";
-import { View, ViewProps } from "react-native";
-
-//#region src/components/Avatar.d.ts
-/** Avatar size options */
-type AvatarSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
-/** Avatar variant options */
-type AvatarVariant = 'primary' | 'secondary';
-/** Abbreviation strategy for generating initials */
-type AbbreviationStrategy = 'first' | 'last' | 'firstAndLast' | 'firstTwo' | 'firstThree' | 'firstOfEach' | ((name: string) => string);
-interface AvatarProps extends ViewProps {
-  /** Image source URL */
-  src?: string;
-  /** Alt text for the image, also used for generating initials */
-  alt?: string;
-  /** Explicit initials to display (overrides auto-generated from alt) */
-  fallback?: string;
-  /** Size of the avatar @default 'md' */
-  size?: AvatarSize;
-  /** Variant style @default 'primary' */
-  variant?: AvatarVariant;
-  /** Custom icon to display when no image or text fallback */
-  icon?: IconSlotType;
-  /** Strategy for generating initials from name @default 'firstAndLast' */
-  abbreviationStrategy?: AbbreviationStrategy;
-}
-/**
- * **Avatar component for user representation**
- *
- * @description
- * Displays a user avatar with image, initials fallback, or icon fallback.
- *
- * @category Display
- * @platform mobile
- *
- * @example
- * ```tsx
- * import { Avatar } from '@yahoo/uds-mobile/Avatar';
- *
- * // With image
- * <Avatar
- *   src="https://example.com/photo.jpg"
- *   alt="Jane Doe"
- * />
- *
- * // With initials fallback
- * <Avatar alt="Jane Doe" />
- *
- * // With explicit initials
- * <Avatar fallback="JD" />
- *
- * // With custom icon
- * <Avatar icon="Person" variant="secondary" />
- * ```
- *
- * @accessibility
- * - Sets `accessibilityRole="image"` automatically
- * - Uses `alt` prop as accessibility label
- * - Always provide meaningful `alt` text for user identification
- *
- * @see {@link Image} for general image display
- */
-declare const Avatar: _$react.ForwardRefExoticComponent<AvatarProps & _$react.RefAttributes<View>>;
-//#endregion
-export { Avatar, type AvatarProps };
-//# sourceMappingURL=Avatar.d.cts.map

package/dist/components/Avatar.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar.d.cts","names":[],"sources":["../../src/components/Avatar.tsx"],"mappings":";;;;;;;KAWK,UAAA;;KAGA,aAAA;;KAGA,oBAAA,qFAOC,IAAA;AAAA,UAEI,WAAA,SAAoB,SAAA;EAff;EAiBb,GAAA;EAdgB;EAgBhB,GAAA;EAhBgB;EAkBhB,QAAA;EAfG;EAiBH,IAAA,GAAO,UAAA;;EAEP,OAAA,GAAU,aAAA;EAZM;EAchB,IAAA,GAAO,YAAA;EAZa;EAcpB,oBAAA,GAAuB,oBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;AAAoB;;;;;;;;;;;;;;;;cAoEvC,MAAA,EAAM,OAAA,CAAA,yBAAA,CAAA,WAAA,GAAA,OAAA,CAAA,aAAA,CAAA,IAAA"}

package/dist/components/Avatar.d.ts

@@ -1,68 +0,0 @@
-
-import { IconSlotType } from "./IconSlot.js";
-import * as _$react from "react";
-import { View, ViewProps } from "react-native";
-
-//#region src/components/Avatar.d.ts
-/** Avatar size options */
-type AvatarSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
-/** Avatar variant options */
-type AvatarVariant = 'primary' | 'secondary';
-/** Abbreviation strategy for generating initials */
-type AbbreviationStrategy = 'first' | 'last' | 'firstAndLast' | 'firstTwo' | 'firstThree' | 'firstOfEach' | ((name: string) => string);
-interface AvatarProps extends ViewProps {
-  /** Image source URL */
-  src?: string;
-  /** Alt text for the image, also used for generating initials */
-  alt?: string;
-  /** Explicit initials to display (overrides auto-generated from alt) */
-  fallback?: string;
-  /** Size of the avatar @default 'md' */
-  size?: AvatarSize;
-  /** Variant style @default 'primary' */
-  variant?: AvatarVariant;
-  /** Custom icon to display when no image or text fallback */
-  icon?: IconSlotType;
-  /** Strategy for generating initials from name @default 'firstAndLast' */
-  abbreviationStrategy?: AbbreviationStrategy;
-}
-/**
- * **Avatar component for user representation**
- *
- * @description
- * Displays a user avatar with image, initials fallback, or icon fallback.
- *
- * @category Display
- * @platform mobile
- *
- * @example
- * ```tsx
- * import { Avatar } from '@yahoo/uds-mobile/Avatar';
- *
- * // With image
- * <Avatar
- *   src="https://example.com/photo.jpg"
- *   alt="Jane Doe"
- * />
- *
- * // With initials fallback
- * <Avatar alt="Jane Doe" />
- *
- * // With explicit initials
- * <Avatar fallback="JD" />
- *
- * // With custom icon
- * <Avatar icon="Person" variant="secondary" />
- * ```
- *
- * @accessibility
- * - Sets `accessibilityRole="image"` automatically
- * - Uses `alt` prop as accessibility label
- * - Always provide meaningful `alt` text for user identification
- *
- * @see {@link Image} for general image display
- */
-declare const Avatar: _$react.ForwardRefExoticComponent<AvatarProps & _$react.RefAttributes<View>>;
-//#endregion
-export { Avatar, type AvatarProps };
-//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/Avatar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar.d.ts","names":[],"sources":["../../src/components/Avatar.tsx"],"mappings":";;;;;;;KAWK,UAAA;;KAGA,aAAA;;KAGA,oBAAA,qFAOC,IAAA;AAAA,UAEI,WAAA,SAAoB,SAAA;EAff;EAiBb,GAAA;EAdgB;EAgBhB,GAAA;EAhBgB;EAkBhB,QAAA;EAfG;EAiBH,IAAA,GAAO,UAAA;;EAEP,OAAA,GAAU,aAAA;EAZM;EAchB,IAAA,GAAO,YAAA;EAZa;EAcpB,oBAAA,GAAuB,oBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;AAAoB;;;;;;;;;;;;;;;;cAoEvC,MAAA,EAAM,OAAA,CAAA,yBAAA,CAAA,WAAA,GAAA,OAAA,CAAA,aAAA,CAAA,IAAA"}