@yahoo/uds-mobile 2.1.0-beta.1 → 2.2.0

package/generated/styles.mjs

@@ -1500,6 +1500,34 @@ const badgeStyles = StyleSheet.create((theme) => ({
   },
 }));
 
+/**
+ * Layer-based styles for BottomSheet.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * bottomSheetStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: bottomSheetStyles.root, bottomSheetStyles.icon, etc.
+ * ```
+ */
+const bottomSheetStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      variant: { default: theme.components['bottomSheet/variant/default/root/rest'] },
+    },
+  },
+  header: {
+    variants: {
+      variant: { default: theme.components['bottomSheet/variant/default/header/rest'] },
+    },
+  },
+}));
+
 /**
  * Layer-based styles for Button.
  * Uses compound variants for state-specific (disabled/pressed) styles.
@@ -4583,6 +4611,29 @@ const radioStyles = StyleSheet.create((theme) => ({
   },
 }));
 
+/**
+ * Layer-based styles for Scrim.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * scrimStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: scrimStyles.root, scrimStyles.icon, etc.
+ * ```
+ */
+const scrimStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      variant: { default: theme.components['scrim/variant/default/root/rest'] },
+    },
+  },
+}));
+
 /**
  * Layer-based styles for Switch.
  * Uses compound variants for state-specific (disabled/pressed) styles.
@@ -4782,6 +4833,7 @@ export {
   styles,
   avatarStyles,
   badgeStyles,
+  bottomSheetStyles,
   buttonStyles,
   checkboxStyles,
   chipStyles,
@@ -4792,6 +4844,7 @@ export {
   menuContentStyles,
   menuItemStyles,
   radioStyles,
+  scrimStyles,
   switchStyles,
   toastStyles,
   tooltipStyles,

package/generated/unistyles.d.ts

@@ -344,6 +344,22 @@ interface ComponentTheme {
   'badge/variant/warning/rootText/rest': {
     color: string;
   };
+  'bottomSheet/variant/default/header/rest': {
+    color: string;
+    fontFamily: string;
+    fontSize: number;
+    letterSpacing: number;
+    lineHeight: number;
+  };
+  'bottomSheet/variant/default/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+    borderRadius: number;
+    borderWidth: number;
+    boxShadow: string;
+    paddingHorizontal: number;
+    paddingVertical: number;
+  };
   'button/size/lg/icon/rest': {
     fontSize: number;
     iconSizeToken: string;
@@ -3876,6 +3892,10 @@ interface ComponentTheme {
   'radio/variant/secondary/value/unchecked/rootText/rest': {
     color: string;
   };
+  'scrim/variant/default/root/rest': {
+    backgroundColor: string;
+    opacity: number;
+  };
   'switch/size/md/handle/rest': {
     height: number;
     width: number;
@@ -4643,6 +4663,15 @@ export interface AppTheme {
       '2xl-invert': string;
     };
   };
+  blur: {
+    'elevation-0': number;
+    'elevation-1': number;
+    'elevation-2': number;
+    'elevation-3': number;
+    'elevation-4': number;
+    'elevation-5': number;
+    none: number;
+  };
   components: ComponentTheme;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yahoo/uds-mobile",
-  "version": "2.1.0-beta.1",
+  "version": "2.2.0",
   "type": "module",
   "bin": {
     "uds-mobile": "./cli/uds-mobile.js"
@@ -19,8 +19,8 @@
   "exports": {
     "./Avatar": {
       "import": {
-        "types": "./dist/components/Avatar.d.mts",
-        "default": "./dist/components/Avatar.mjs"
+        "types": "./dist/components/Avatar.d.ts",
+        "default": "./dist/components/Avatar.js"
       },
       "require": {
         "types": "./dist/components/Avatar.d.cts",
@@ -29,18 +29,28 @@
     },
     "./Badge": {
       "import": {
-        "types": "./dist/components/Badge.d.mts",
-        "default": "./dist/components/Badge.mjs"
+        "types": "./dist/components/Badge.d.ts",
+        "default": "./dist/components/Badge.js"
       },
       "require": {
         "types": "./dist/components/Badge.d.cts",
         "default": "./dist/components/Badge.cjs"
       }
     },
+    "./BlurTarget": {
+      "import": {
+        "types": "./dist/components/BlurTarget.d.ts",
+        "default": "./dist/components/BlurTarget.js"
+      },
+      "require": {
+        "types": "./dist/components/BlurTarget.d.cts",
+        "default": "./dist/components/BlurTarget.cjs"
+      }
+    },
     "./Box": {
       "import": {
-        "types": "./dist/components/Box.d.mts",
-        "default": "./dist/components/Box.mjs"
+        "types": "./dist/components/Box.d.ts",
+        "default": "./dist/components/Box.js"
       },
       "require": {
         "types": "./dist/components/Box.d.cts",
@@ -49,8 +59,8 @@
     },
     "./Button": {
       "import": {
-        "types": "./dist/components/Button.d.mts",
-        "default": "./dist/components/Button.mjs"
+        "types": "./dist/components/Button.d.ts",
+        "default": "./dist/components/Button.js"
       },
       "require": {
         "types": "./dist/components/Button.d.cts",
@@ -59,8 +69,8 @@
     },
     "./Checkbox": {
       "import": {
-        "types": "./dist/components/Checkbox.d.mts",
-        "default": "./dist/components/Checkbox.mjs"
+        "types": "./dist/components/Checkbox.d.ts",
+        "default": "./dist/components/Checkbox.js"
       },
       "require": {
         "types": "./dist/components/Checkbox.d.cts",
@@ -69,8 +79,8 @@
     },
     "./Chip": {
       "import": {
-        "types": "./dist/components/Chip.d.mts",
-        "default": "./dist/components/Chip.mjs"
+        "types": "./dist/components/Chip.d.ts",
+        "default": "./dist/components/Chip.js"
       },
       "require": {
         "types": "./dist/components/Chip.d.cts",
@@ -79,8 +89,8 @@
     },
     "./HStack": {
       "import": {
-        "types": "./dist/components/HStack.d.mts",
-        "default": "./dist/components/HStack.mjs"
+        "types": "./dist/components/HStack.d.ts",
+        "default": "./dist/components/HStack.js"
       },
       "require": {
         "types": "./dist/components/HStack.d.cts",
@@ -89,8 +99,8 @@
     },
     "./Icon": {
       "import": {
-        "types": "./dist/components/Icon.d.mts",
-        "default": "./dist/components/Icon.mjs"
+        "types": "./dist/components/Icon.d.ts",
+        "default": "./dist/components/Icon.js"
       },
       "require": {
         "types": "./dist/components/Icon.d.cts",
@@ -99,8 +109,8 @@
     },
     "./IconButton": {
       "import": {
-        "types": "./dist/components/IconButton.d.mts",
-        "default": "./dist/components/IconButton.mjs"
+        "types": "./dist/components/IconButton.d.ts",
+        "default": "./dist/components/IconButton.js"
       },
       "require": {
         "types": "./dist/components/IconButton.d.cts",
@@ -109,8 +119,8 @@
     },
     "./IconSlot": {
       "import": {
-        "types": "./dist/components/IconSlot.d.mts",
-        "default": "./dist/components/IconSlot.mjs"
+        "types": "./dist/components/IconSlot.d.ts",
+        "default": "./dist/components/IconSlot.js"
       },
       "require": {
         "types": "./dist/components/IconSlot.d.cts",
@@ -119,8 +129,8 @@
     },
     "./Image": {
       "import": {
-        "types": "./dist/components/Image.d.mts",
-        "default": "./dist/components/Image.mjs"
+        "types": "./dist/components/Image.d.ts",
+        "default": "./dist/components/Image.js"
       },
       "require": {
         "types": "./dist/components/Image.d.cts",
@@ -129,8 +139,8 @@
     },
     "./Input": {
       "import": {
-        "types": "./dist/components/Input.d.mts",
-        "default": "./dist/components/Input.mjs"
+        "types": "./dist/components/Input.d.ts",
+        "default": "./dist/components/Input.js"
       },
       "require": {
         "types": "./dist/components/Input.d.cts",
@@ -139,8 +149,8 @@
     },
     "./Link": {
       "import": {
-        "types": "./dist/components/Link.d.mts",
-        "default": "./dist/components/Link.mjs"
+        "types": "./dist/components/Link.d.ts",
+        "default": "./dist/components/Link.js"
       },
       "require": {
         "types": "./dist/components/Link.d.cts",
@@ -149,8 +159,8 @@
     },
     "./Pressable": {
       "import": {
-        "types": "./dist/components/Pressable.d.mts",
-        "default": "./dist/components/Pressable.mjs"
+        "types": "./dist/components/Pressable.d.ts",
+        "default": "./dist/components/Pressable.js"
       },
       "require": {
         "types": "./dist/components/Pressable.d.cts",
@@ -159,8 +169,8 @@
     },
     "./Radio": {
       "import": {
-        "types": "./dist/components/Radio.d.mts",
-        "default": "./dist/components/Radio.mjs"
+        "types": "./dist/components/Radio.d.ts",
+        "default": "./dist/components/Radio.js"
       },
       "require": {
         "types": "./dist/components/Radio.d.cts",
@@ -169,8 +179,8 @@
     },
     "./Screen": {
       "import": {
-        "types": "./dist/components/Screen.d.mts",
-        "default": "./dist/components/Screen.mjs"
+        "types": "./dist/components/Screen.d.ts",
+        "default": "./dist/components/Screen.js"
       },
       "require": {
         "types": "./dist/components/Screen.d.cts",
@@ -179,8 +189,8 @@
     },
     "./Switch": {
       "import": {
-        "types": "./dist/components/Switch.d.mts",
-        "default": "./dist/components/Switch.mjs"
+        "types": "./dist/components/Switch.d.ts",
+        "default": "./dist/components/Switch.js"
       },
       "require": {
         "types": "./dist/components/Switch.d.cts",
@@ -189,8 +199,8 @@
     },
     "./Text": {
       "import": {
-        "types": "./dist/components/Text.d.mts",
-        "default": "./dist/components/Text.mjs"
+        "types": "./dist/components/Text.d.ts",
+        "default": "./dist/components/Text.js"
       },
       "require": {
         "types": "./dist/components/Text.d.cts",
@@ -199,8 +209,8 @@
     },
     "./VStack": {
       "import": {
-        "types": "./dist/components/VStack.d.mts",
-        "default": "./dist/components/VStack.mjs"
+        "types": "./dist/components/VStack.d.ts",
+        "default": "./dist/components/VStack.js"
       },
       "require": {
         "types": "./dist/components/VStack.d.cts",
@@ -209,8 +219,8 @@
     },
     "./motion": {
       "import": {
-        "types": "./dist/motion.d.mts",
-        "default": "./dist/motion.mjs"
+        "types": "./dist/motion.d.ts",
+        "default": "./dist/motion.js"
       },
       "require": {
         "types": "./dist/motion.d.cts",
@@ -235,6 +245,7 @@
   },
   "peerDependencies": {
     "@yahoo/uds-icons": "workspace:*",
+    "expo-blur": "~55.0.0",
     "expo-font": "~55.0.0",
     "react": "*",
     "react-native": ">=0.83.0",
@@ -245,6 +256,9 @@
     "react-native-unistyles": ">=3.0.0"
   },
   "peerDependenciesMeta": {
+    "expo-blur": {
+      "optional": true
+    },
     "expo-font": {
       "optional": true
     },

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

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar.d.mts","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,KAAA,CAAA,yBAAA,CAAA,WAAA,GAAA,KAAA,CAAA,aAAA,CAAA,IAAA"}

package/dist/components/Avatar.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar.mjs","names":["RNImage","Text"],"sources":["../../src/components/Avatar.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport { Image as RNImage } from 'react-native';\n\nimport { avatarStyles } from '../../generated/styles';\nimport { Box } from './Box';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\n\n/** Avatar size options */\ntype AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Avatar variant options */\ntype AvatarVariant = 'primary' | 'secondary';\n\n/** Abbreviation strategy for generating initials */\ntype AbbreviationStrategy =\n  | 'first'\n  | 'last'\n  | 'firstAndLast'\n  | 'firstTwo'\n  | 'firstThree'\n  | 'firstOfEach'\n  | ((name: string) => string);\n\ninterface AvatarProps extends ViewProps {\n  /** Image source URL */\n  src?: string;\n  /** Alt text for the image, also used for generating initials */\n  alt?: string;\n  /** Explicit initials to display (overrides auto-generated from alt) */\n  fallback?: string;\n  /** Size of the avatar @default 'md' */\n  size?: AvatarSize;\n  /** Variant style @default 'primary' */\n  variant?: AvatarVariant;\n  /** Custom icon to display when no image or text fallback */\n  icon?: IconSlotType;\n  /** Strategy for generating initials from name @default 'firstAndLast' */\n  abbreviationStrategy?: AbbreviationStrategy;\n}\n\nconst abbreviationStrategies: Record<\n  Exclude<AbbreviationStrategy, (name: string) => string>,\n  (initials: string[]) => string\n> = {\n  first: (initials) => initials[0] ?? '',\n  last: (initials) => initials[initials.length - 1] ?? '',\n  firstAndLast: (initials) =>\n    initials.length === 1 ? (initials[0] ?? '') : `${initials[0]}${initials[initials.length - 1]}`,\n  firstTwo: (initials) => initials.slice(0, 2).join(''),\n  firstThree: (initials) => initials.slice(0, 3).join(''),\n  firstOfEach: (initials) => initials.join(''),\n};\n\n/** Generate initials from a name */\nfunction generateInitials(name?: string, strategy: AbbreviationStrategy = 'firstAndLast'): string {\n  if (!name) {\n    return '';\n  }\n\n  if (typeof strategy === 'function') {\n    return strategy(name);\n  }\n\n  const words = name.trim().split(/\\s+/);\n  const initials = words.map((word) => word[0]?.toUpperCase() ?? '');\n\n  return abbreviationStrategies[strategy](initials);\n}\n\n/**\n * **Avatar component for user representation**\n *\n * @description\n * Displays a user avatar with image, initials fallback, or icon fallback.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Avatar } from '@yahoo/uds-mobile';\n *\n * // With image\n * <Avatar\n *   src=\"https://example.com/photo.jpg\"\n *   alt=\"Jane Doe\"\n * />\n *\n * // With initials fallback\n * <Avatar alt=\"Jane Doe\" />\n *\n * // With explicit initials\n * <Avatar fallback=\"JD\" />\n *\n * // With custom icon\n * <Avatar icon=\"Person\" variant=\"secondary\" />\n * ```\n *\n * @accessibility\n * - Sets `accessibilityRole=\"image\"` automatically\n * - Uses `alt` prop as accessibility label\n * - Always provide meaningful `alt` text for user identification\n *\n * @see {@link Image} for general image display\n */\nconst Avatar = forwardRef<View, AvatarProps>(function Avatar(\n  {\n    src,\n    alt,\n    fallback,\n    size = 'md',\n    variant = 'primary',\n    icon,\n    abbreviationStrategy = 'firstAndLast',\n    style,\n    ...props\n  },\n  ref,\n) {\n  const [imageError, setImageError] = useState(false);\n\n  const initials = fallback || generateInitials(alt, abbreviationStrategy);\n\n  const hasImage = src && !imageError;\n  const hasText = initials.length > 0;\n  const showImage = hasImage;\n  const showText = !hasImage && hasText;\n  const showIcon = !hasImage && !hasText;\n\n  avatarStyles.useVariants({\n    size,\n    ...(showImage && { image: variant }),\n    ...(showText && { text: variant }),\n    ...(showIcon && { icon: variant }),\n  });\n\n  return (\n    <Box\n      ref={ref}\n      style={[\n        avatarStyles.root,\n        { alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },\n        style,\n      ]}\n      accessibilityRole=\"image\"\n      accessibilityLabel={alt}\n      {...props}\n    >\n      {showImage && (\n        <RNImage\n          source={{ uri: src }}\n          style={{ width: '100%', height: '100%' }}\n          onError={() => setImageError(true)}\n          accessibilityLabel={alt}\n        />\n      )}\n\n      {showText && (\n        <Text style={avatarStyles.text} numberOfLines={1}>\n          {initials}\n        </Text>\n      )}\n\n      {showIcon && <IconSlot icon={icon ?? 'Person'} variant=\"fill\" style={avatarStyles.icon} />}\n    </Box>\n  );\n});\n\nAvatar.displayName = 'Avatar';\n\nexport { Avatar, type AvatarProps };\n"],"mappings":";;;;;;;;;;AA2CA,MAAM,yBAGF;CACF,QAAQ,aAAa,SAAS,MAAM;CACpC,OAAO,aAAa,SAAS,SAAS,SAAS,MAAM;CACrD,eAAe,aACb,SAAS,WAAW,IAAK,SAAS,MAAM,KAAM,GAAG,SAAS,KAAK,SAAS,SAAS,SAAS;CAC5F,WAAW,aAAa,SAAS,MAAM,GAAG,EAAE,CAAC,KAAK,GAAG;CACrD,aAAa,aAAa,SAAS,MAAM,GAAG,EAAE,CAAC,KAAK,GAAG;CACvD,cAAc,aAAa,SAAS,KAAK,GAAG;CAC7C;;AAGD,SAAS,iBAAiB,MAAe,WAAiC,gBAAwB;AAChG,KAAI,CAAC,KACH,QAAO;AAGT,KAAI,OAAO,aAAa,WACtB,QAAO,SAAS,KAAK;CAIvB,MAAM,WADQ,KAAK,MAAM,CAAC,MAAM,MAAM,CACf,KAAK,SAAS,KAAK,IAAI,aAAa,IAAI,GAAG;AAElE,QAAO,uBAAuB,UAAU,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCnD,MAAM,SAAS,WAA8B,SAAS,OACpD,EACE,KACA,KACA,UACA,OAAO,MACP,UAAU,WACV,MACA,uBAAuB,gBACvB,OACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAEnD,MAAM,WAAW,YAAY,iBAAiB,KAAK,qBAAqB;CAExE,MAAM,WAAW,OAAO,CAAC;CACzB,MAAM,UAAU,SAAS,SAAS;CAClC,MAAM,YAAY;CAClB,MAAM,WAAW,CAAC,YAAY;CAC9B,MAAM,WAAW,CAAC,YAAY,CAAC;AAE/B,cAAa,YAAY;EACvB;EACA,GAAI,aAAa,EAAE,OAAO,SAAS;EACnC,GAAI,YAAY,EAAE,MAAM,SAAS;EACjC,GAAI,YAAY,EAAE,MAAM,SAAS;EAClC,CAAC;AAEF,QACE,qBAAC;EACM;EACL,OAAO;GACL,aAAa;GACb;IAAE,YAAY;IAAU,gBAAgB;IAAU,UAAU;IAAU;GACtE;GACD;EACD,mBAAkB;EAClB,oBAAoB;EACpB,GAAI;;GAEH,aACC,oBAACA;IACC,QAAQ,EAAE,KAAK,KAAK;IACpB,OAAO;KAAE,OAAO;KAAQ,QAAQ;KAAQ;IACxC,eAAe,cAAc,KAAK;IAClC,oBAAoB;KACpB;GAGH,YACC,oBAACC;IAAK,OAAO,aAAa;IAAM,eAAe;cAC5C;KACI;GAGR,YAAY,oBAAC;IAAS,MAAM,QAAQ;IAAU,SAAQ;IAAO,OAAO,aAAa;KAAQ;;GACtF;EAER;AAEF,OAAO,cAAc"}

package/dist/components/Badge.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Badge.d.mts","names":[],"sources":["../../src/components/Badge.tsx"],"mappings":";;;;;;;;UAWU,UAAA,SAAmB,SAAA;;EAE3B,OAAA,GAAU,YAAA;EAFF;EAIR,IAAA,GAAO,SAAA;;EAEP,QAAA;EAFO;EAIP,QAAA;EAIU;EAFV,SAAA,GAAY,YAAA;EAYN;EAVN,OAAA,GAAU,YAAA;EAZ0B;EAcpC,6BAAA;EAd2B;EAgB3B,mBAAA;EAdU;EAgBV,yBAAA;EAdO;EAgBP,uBAAA;EAZA;EAcA,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;cA4BV,KAAA,EAAK,KAAA,CAAA,oBAAA,CAAA,UAAA"}

package/dist/components/Badge.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Badge.mjs","names":[],"sources":["../../src/components/Badge.tsx"],"sourcesContent":["import type { BadgeSize, BadgeVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { View, ViewProps } from 'react-native';\n\nimport { badgeStyles } from '../../generated/styles';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\n\ninterface BadgeProps extends ViewProps {\n  /** The visual style variant of the badge. @default 'primary' */\n  variant?: BadgeVariant;\n  /** The size of the badge. @default 'md' */\n  size?: BadgeSize;\n  /** Minimum width of the badge in pixels. */\n  minWidth?: number;\n  /** Maximum width of the badge in pixels. @default 200 */\n  maxWidth?: number;\n  /** Icon to display at the start of the badge. */\n  startIcon?: IconSlotType;\n  /** Icon to display at the end of the badge. */\n  endIcon?: IconSlotType;\n  /** Override the background color. Use sparingly. */\n  dangerouslySetBackgroundColor?: string;\n  /** Override the text color. Use sparingly. */\n  dangerouslySetColor?: string;\n  /** Override the border color. Use sparingly. */\n  dangerouslySetBorderColor?: string;\n  /** Override the icon color. Use sparingly. */\n  dangerouslySetIconColor?: string;\n  /** Ref to the underlying View component. */\n  ref?: Ref<View>;\n}\n\n/**\n * **A badge component for status indicators**\n *\n * @description\n * Badges show notifications, counts, or status information on navigation items and icons.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Badge } from '@yahoo/uds-mobile';\n *\n * <Badge>Label</Badge>\n * <Badge variant=\"brand\" size=\"sm\">New</Badge>\n * <Badge variant=\"alert\" startIcon=\"Warning\">Error</Badge>\n * ```\n *\n * @accessibility\n * - Badge content is read by screen readers\n * - Use descriptive text for status indicators\n * - Consider `accessibilityLabel` for icon-only badges\n *\n * @see {@link Chip} for interactive tag-like elements\n */\nconst Badge = memo(function Badge({\n  variant = 'primary',\n  size = 'md',\n  minWidth,\n  maxWidth = 200,\n  startIcon,\n  endIcon,\n  dangerouslySetBackgroundColor,\n  dangerouslySetColor,\n  dangerouslySetIconColor,\n  dangerouslySetBorderColor,\n  children,\n  style,\n  ref,\n  ...rest\n}: BadgeProps) {\n  badgeStyles.useVariants({ size, variant });\n  const rootStyles = useMemo(() => [badgeStyles.root, style], [style, badgeStyles.root]);\n\n  return (\n    <HStack\n      ref={ref}\n      alignItems=\"center\"\n      overflow=\"hidden\"\n      alignSelf=\"flex-start\"\n      maxWidth={maxWidth}\n      minWidth={minWidth}\n      dangerouslySetBackgroundColor={dangerouslySetBackgroundColor}\n      dangerouslySetBorderColor={dangerouslySetBorderColor}\n      // Cannot memoize - styles contain theme-reactive values\n      style={rootStyles}\n      {...rest}\n    >\n      {startIcon && (\n        <IconSlot\n          icon={startIcon}\n          variant=\"fill\"\n          dangerouslySetColor={dangerouslySetIconColor}\n          style={badgeStyles.icon}\n        />\n      )}\n      <Text\n        numberOfLines={1}\n        flexShrink=\"1\"\n        dangerouslySetColor={dangerouslySetColor}\n        style={badgeStyles.text}\n      >\n        {children}\n      </Text>\n      {endIcon && (\n        <IconSlot\n          icon={endIcon}\n          variant=\"fill\"\n          dangerouslySetColor={dangerouslySetIconColor}\n          style={badgeStyles.icon}\n        />\n      )}\n    </HStack>\n  );\n});\n\nBadge.displayName = 'Badge';\n\nexport { Badge, type BadgeProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAM,QAAQ,KAAK,SAAS,MAAM,EAChC,UAAU,WACV,OAAO,MACP,UACA,WAAW,KACX,WACA,SACA,+BACA,qBACA,yBACA,2BACA,UACA,OACA,KACA,GAAG,QACU;AACb,aAAY,YAAY;EAAE;EAAM;EAAS,CAAC;AAG1C,QACE,qBAAC;EACM;EACL,YAAW;EACX,UAAS;EACT,WAAU;EACA;EACA;EACqB;EACJ;EAE3B,OAbe,cAAc,CAAC,YAAY,MAAM,MAAM,EAAE,CAAC,OAAO,YAAY,KAAK,CAAC;EAclF,GAAI;;GAEH,aACC,oBAAC;IACC,MAAM;IACN,SAAQ;IACR,qBAAqB;IACrB,OAAO,YAAY;KACnB;GAEJ,oBAAC;IACC,eAAe;IACf,YAAW;IACU;IACrB,OAAO,YAAY;IAElB;KACI;GACN,WACC,oBAAC;IACC,MAAM;IACN,SAAQ;IACR,qBAAqB;IACrB,OAAO,YAAY;KACnB;;GAEG;EAEX;AAEF,MAAM,cAAc"}

package/dist/components/Box.mjs

@@ -1,131 +0,0 @@
-/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-import { memo, useMemo } from "react";
-import { View } from "react-native";
-import { styles } from "../../generated/styles";
-import { StyleSheet } from "react-native-unistyles";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/Box.tsx
-/**
-* **📦 A layout component that can be used to compose other components**
-*
-* @description
-* The most simple component we ship - a View. But with all the power of the UDS design system.
-* By default, `Box` is a flexbox container. When working with vertical or horizontal layouts,
-* consider using VStack or HStack respectively.
-*
-* @category Layout
-* @platform mobile
-*
-* @example
-* ```tsx
-* import { Box } from '@yahoo/uds-mobile';
-*
-* <Box backgroundColor="primary" spacing="6">
-*   Any kind of content can go here!
-* </Box>
-* ```
-*
-* @usage
-* - Use as a container to apply padding, shapes, or other styling
-* - Use for creating card components
-* - Use HStack/VStack for directional layouts
-*
-* @see {@link HStack} for horizontal layouts
-* @see {@link VStack} for vertical layouts
-*/
-const Box = memo(function Box({ elevation, backgroundColor, dangerouslySetBackgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, dangerouslySetBorderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, display = "flex", overflow, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, width, height, minWidth, maxWidth, minHeight, maxHeight, dropShadow, insetShadow, style, ref, ...props }) {
-	const elevationAlias = elevation !== void 0 ? `elevation-${elevation}` : void 0;
-	const variants = {
-		backgroundColor: backgroundColor ?? elevationAlias,
-		borderRadius,
-		borderTopStartRadius,
-		borderTopEndRadius,
-		borderBottomStartRadius,
-		borderBottomEndRadius,
-		borderColor: borderColor ?? elevationAlias,
-		borderStartColor,
-		borderEndColor,
-		borderTopColor,
-		borderBottomColor,
-		borderWidth: borderWidth ?? elevationAlias,
-		borderVerticalWidth,
-		borderHorizontalWidth,
-		borderStartWidth,
-		borderEndWidth,
-		borderTopWidth,
-		borderBottomWidth,
-		alignContent,
-		alignItems,
-		alignSelf,
-		flex,
-		flexDirection,
-		flexGrow,
-		flexShrink,
-		flexWrap,
-		justifyContent,
-		display,
-		overflow,
-		spacing,
-		spacingHorizontal,
-		spacingVertical,
-		spacingBottom,
-		spacingEnd,
-		spacingStart,
-		spacingTop,
-		offset,
-		offsetVertical,
-		offsetHorizontal,
-		offsetBottom,
-		offsetEnd,
-		offsetStart,
-		offsetTop,
-		columnGap,
-		rowGap
-	};
-	styles.useVariants(variants);
-	const effectiveDropShadow = dropShadow ?? elevationAlias;
-	const shadowStyle = effectiveDropShadow || insetShadow ? shadowSheet.shadow(effectiveDropShadow, insetShadow) : void 0;
-	return /* @__PURE__ */ jsx(View, {
-		ref,
-		style: useMemo(() => [
-			dangerouslySetBackgroundColor ? { backgroundColor: dangerouslySetBackgroundColor } : void 0,
-			dangerouslySetBorderColor ? { borderColor: dangerouslySetBorderColor } : void 0,
-			width ? { width } : void 0,
-			height ? { height } : void 0,
-			minWidth ? { minWidth } : void 0,
-			maxWidth ? { maxWidth } : void 0,
-			minHeight ? { minHeight } : void 0,
-			maxHeight ? { maxHeight } : void 0,
-			shadowStyle,
-			styles.foundation,
-			style
-		], [
-			dangerouslySetBackgroundColor,
-			dangerouslySetBorderColor,
-			width,
-			height,
-			minWidth,
-			maxWidth,
-			minHeight,
-			maxHeight,
-			shadowStyle,
-			styles.foundation,
-			style
-		]),
-		...props
-	});
-});
-Box.displayName = "Box";
-/**
-* Dynamic shadow stylesheet that merges drop and inset shadows into a single
-* boxShadow CSS string. Theme-reactive so shadows update on color mode change.
-*/
-const shadowSheet = StyleSheet.create((theme) => ({ shadow: (drop, inset) => {
-	const parts = [drop ? theme.boxShadow.drop[drop] : "", inset ? theme.boxShadow.inset[inset] : ""].filter(Boolean);
-	return parts.length > 0 ? { boxShadow: parts.join(", ") } : {};
-} }));
-
-//#endregion
-export { Box };
-//# sourceMappingURL=Box.mjs.map

package/dist/components/Box.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Box.mjs","names":[],"sources":["../../src/components/Box.tsx"],"sourcesContent":["import type { ElevationLevel } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { View } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport type { SizeProps } from '../types';\n\ninterface BoxProps extends ViewProps, SizeProps {\n  ref?: Ref<View>;\n  elevation?: ElevationLevel;\n  backgroundColor?: StyleProps['backgroundColor'];\n  borderRadius?: StyleProps['borderRadius'];\n  borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n  borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n  borderColor?: StyleProps['borderColor'];\n  borderStartColor?: StyleProps['borderStartColor'];\n  borderEndColor?: StyleProps['borderEndColor'];\n  borderTopColor?: StyleProps['borderTopColor'];\n  borderBottomColor?: StyleProps['borderBottomColor'];\n  borderWidth?: StyleProps['borderWidth'];\n  borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n  borderStartWidth?: StyleProps['borderStartWidth'];\n  borderEndWidth?: StyleProps['borderEndWidth'];\n  borderTopWidth?: StyleProps['borderTopWidth'];\n  borderBottomWidth?: StyleProps['borderBottomWidth'];\n  alignContent?: StyleProps['alignContent'];\n  alignItems?: StyleProps['alignItems'];\n  alignSelf?: StyleProps['alignSelf'];\n  flex?: StyleProps['flex'];\n  flexDirection?: StyleProps['flexDirection'];\n  flexGrow?: StyleProps['flexGrow'];\n  flexShrink?: StyleProps['flexShrink'];\n  flexWrap?: StyleProps['flexWrap'];\n  justifyContent?: StyleProps['justifyContent'];\n  //   flexBasis?: StyleProps['flexBasis'];\n  display?: StyleProps['display'];\n  overflow?: StyleProps['overflow'];\n  //   overflowX?: StyleProps['overflowX'];\n  //   overflowY?: StyleProps['overflowY'];\n  //   position?: StyleProps['position'];\n  spacing?: StyleProps['spacing'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingStart?: StyleProps['spacingStart'];\n  spacingTop?: StyleProps['spacingTop'];\n  offset?: StyleProps['offset'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetStart?: StyleProps['offsetStart'];\n  offsetTop?: StyleProps['offsetTop'];\n  columnGap?: StyleProps['columnGap'];\n  rowGap?: StyleProps['rowGap'];\n  dropShadow?: StyleProps['dropShadow'];\n  insetShadow?: StyleProps['insetShadow'];\n  dangerouslySetBackgroundColor?: string;\n  dangerouslySetBorderColor?: string;\n}\n\n/**\n * **📦 A layout component that can be used to compose other components**\n *\n * @description\n * The most simple component we ship - a View. But with all the power of the UDS design system.\n * By default, `Box` is a flexbox container. When working with vertical or horizontal layouts,\n * consider using VStack or HStack respectively.\n *\n * @category Layout\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Box } from '@yahoo/uds-mobile';\n *\n * <Box backgroundColor=\"primary\" spacing=\"6\">\n *   Any kind of content can go here!\n * </Box>\n * ```\n *\n * @usage\n * - Use as a container to apply padding, shapes, or other styling\n * - Use for creating card components\n * - Use HStack/VStack for directional layouts\n *\n * @see {@link HStack} for horizontal layouts\n * @see {@link VStack} for vertical layouts\n */\nconst Box = memo(function Box({\n  // elevation\n  elevation,\n  // background\n  backgroundColor,\n  dangerouslySetBackgroundColor,\n  // border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  dangerouslySetBorderColor,\n  borderStartColor,\n  borderEndColor,\n  borderTopColor,\n  borderBottomColor,\n  borderWidth,\n  borderVerticalWidth,\n  borderHorizontalWidth,\n  borderStartWidth,\n  borderEndWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  // flex\n  alignContent,\n  alignItems,\n  alignSelf,\n  flex,\n  flexDirection,\n  flexGrow,\n  flexShrink,\n  flexWrap,\n  justifyContent,\n  // flexBasis,\n  // layout\n  display = 'flex',\n  overflow,\n  //     overflowX,\n  //     overflowY,\n  // position,\n  // spacing\n  spacing,\n  spacingHorizontal,\n  spacingVertical,\n  spacingBottom,\n  spacingEnd,\n  spacingStart,\n  spacingTop,\n  offset,\n  offsetVertical,\n  offsetHorizontal,\n  offsetBottom,\n  offsetEnd,\n  offsetStart,\n  offsetTop,\n  columnGap,\n  rowGap,\n  // size\n  width,\n  height,\n  minWidth,\n  maxWidth,\n  minHeight,\n  maxHeight,\n  // shadow\n  dropShadow,\n  insetShadow,\n  // // nested border radius\n  // nestedBorderRadius,\n  // nestedBorderRadiusSize = nestedBorderRadius ? borderRadius : undefined,\n  // nestedBorderRadiusSpacing = nestedBorderRadius ? spacing : undefined,\n  // nestedBorderRadiusWidth = nestedBorderRadius ? borderWidth : undefined,\n  // style - extracted to merge with variants\n  style,\n  ref,\n  // rest\n  ...props\n}: BoxProps) {\n  const elevationAlias = elevation !== undefined ? (`elevation-${elevation}` as const) : undefined;\n\n  const variants = {\n    // background\n    backgroundColor: backgroundColor ?? elevationAlias,\n    // border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    // nestedBorderRadius,\n    // nestedBorderRadiusSize,\n    // nestedBorderRadiusSpacing,\n    // nestedBorderRadiusWidth,\n    borderColor: borderColor ?? elevationAlias,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth: borderWidth ?? elevationAlias,\n    borderVerticalWidth,\n    borderHorizontalWidth,\n    borderStartWidth,\n    borderEndWidth,\n    borderTopWidth,\n    borderBottomWidth,\n    // flex\n    alignContent,\n    alignItems,\n    alignSelf,\n    flex,\n    flexDirection,\n    flexGrow,\n    flexShrink,\n    flexWrap,\n    justifyContent,\n    // flexBasis,\n    // layout\n    display,\n    overflow,\n    // overflowX,\n    // overflowY,\n    // position,\n    // spacing\n    spacing,\n    spacingHorizontal,\n    spacingVertical,\n    spacingBottom,\n    spacingEnd,\n    spacingStart,\n    spacingTop,\n    offset,\n    offsetVertical,\n    offsetHorizontal,\n    offsetBottom,\n    offsetEnd,\n    offsetStart,\n    offsetTop,\n    columnGap,\n    rowGap,\n    // rest\n  };\n\n  styles.useVariants(variants);\n\n  const effectiveDropShadow = dropShadow ?? elevationAlias;\n  const shadowStyle =\n    effectiveDropShadow || insetShadow\n      ? shadowSheet.shadow(effectiveDropShadow, insetShadow)\n      : undefined;\n\n  // styles.foundation must be in deps - it returns a new reference when variants change\n  const boxStyles = useMemo(\n    () => [\n      dangerouslySetBackgroundColor\n        ? { backgroundColor: dangerouslySetBackgroundColor }\n        : undefined,\n      dangerouslySetBorderColor ? { borderColor: dangerouslySetBorderColor } : undefined,\n      width ? { width } : undefined,\n      height ? { height } : undefined,\n      minWidth ? { minWidth } : undefined,\n      maxWidth ? { maxWidth } : undefined,\n      minHeight ? { minHeight } : undefined,\n      maxHeight ? { maxHeight } : undefined,\n      shadowStyle,\n      styles.foundation,\n      style,\n    ],\n    [\n      dangerouslySetBackgroundColor,\n      dangerouslySetBorderColor,\n      width,\n      height,\n      minWidth,\n      maxWidth,\n      minHeight,\n      maxHeight,\n      shadowStyle,\n      styles.foundation,\n      style,\n    ],\n  );\n\n  // Merge variant styles with user-provided style prop\n  // User styles come last so they can override variant styles if needed\n  return <View ref={ref} style={boxStyles} {...props} />;\n});\n\nBox.displayName = 'Box';\n\n/**\n * Dynamic shadow stylesheet that merges drop and inset shadows into a single\n * boxShadow CSS string. Theme-reactive so shadows update on color mode change.\n */\nconst shadowSheet = StyleSheet.create((theme) => ({\n  shadow: (drop?: string, inset?: string) => {\n    const parts = [\n      drop ? theme.boxShadow.drop[drop as keyof typeof theme.boxShadow.drop] : '',\n      inset ? theme.boxShadow.inset[inset as keyof typeof theme.boxShadow.inset] : '',\n    ].filter(Boolean);\n    return parts.length > 0 ? { boxShadow: parts.join(', ') } : {};\n  },\n}));\n\nexport { Box, type BoxProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGA,MAAM,MAAM,KAAK,SAAS,IAAI,EAE5B,WAEA,iBACA,+BAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,2BACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,cACA,YACA,WACA,MACA,eACA,UACA,YACA,UACA,gBAGA,UAAU,QACV,UAKA,SACA,mBACA,iBACA,eACA,YACA,cACA,YACA,QACA,gBACA,kBACA,cACA,WACA,aACA,WACA,WACA,QAEA,OACA,QACA,UACA,UACA,WACA,WAEA,YACA,aAOA,OACA,KAEA,GAAG,SACQ;CACX,MAAM,iBAAiB,cAAc,SAAa,aAAa,cAAwB;CAEvF,MAAM,WAAW;EAEf,iBAAiB,mBAAmB;EAEpC;EACA;EACA;EACA;EACA;EAKA,aAAa,eAAe;EAC5B;EACA;EACA;EACA;EACA,aAAa,eAAe;EAC5B;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAED;AAED,QAAO,YAAY,SAAS;CAE5B,MAAM,sBAAsB,cAAc;CAC1C,MAAM,cACJ,uBAAuB,cACnB,YAAY,OAAO,qBAAqB,YAAY,GACpD;AAoCN,QAAO,oBAAC;EAAU;EAAK,OAjCL,cACV;GACJ,gCACI,EAAE,iBAAiB,+BAA+B,GAClD;GACJ,4BAA4B,EAAE,aAAa,2BAA2B,GAAG;GACzE,QAAQ,EAAE,OAAO,GAAG;GACpB,SAAS,EAAE,QAAQ,GAAG;GACtB,WAAW,EAAE,UAAU,GAAG;GAC1B,WAAW,EAAE,UAAU,GAAG;GAC1B,YAAY,EAAE,WAAW,GAAG;GAC5B,YAAY,EAAE,WAAW,GAAG;GAC5B;GACA,OAAO;GACP;GACD,EACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,OAAO;GACP;GACD,CACF;EAIwC,GAAI;GAAS;EACtD;AAEF,IAAI,cAAc;;;;;AAMlB,MAAM,cAAc,WAAW,QAAQ,WAAW,EAChD,SAAS,MAAe,UAAmB;CACzC,MAAM,QAAQ,CACZ,OAAO,MAAM,UAAU,KAAK,QAA6C,IACzE,QAAQ,MAAM,UAAU,MAAM,SAA+C,GAC9E,CAAC,OAAO,QAAQ;AACjB,QAAO,MAAM,SAAS,IAAI,EAAE,WAAW,MAAM,KAAK,KAAK,EAAE,GAAG,EAAE;GAEjE,EAAE"}

package/dist/components/Button.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.d.mts","names":[],"sources":["../../src/components/Button.tsx"],"mappings":";;;;;;;;;UA8GU,WAAA,SAAoB,IAAA,CAAK,gBAAA;;EAEjC,OAAA,GAAU,iBAAA;EAFF;EAIR,IAAA,GAAO,UAAA;;EAEP,WAAA,GAAc,WAAA;EAJJ;EAMV,SAAA,GAAY,YAAA;EAFE;EAId,OAAA,GAAU,YAAA;EAAA;EAEV,OAAA;EAWU;EATV,QAAA;EAd4B;EAgB5B,QAAA,GAAW,KAAA,CAAM,SAAA;EAhBe;;;;EAqBhC,cAAA;EAjBA;EAmBA,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;cAuCV,MAAA,EAAM,KAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/Button.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.mjs","names":["Text"],"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonSize, ButtonVariantFlat, IconSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useMemo, useState } from 'react';\nimport type { View } from 'react-native';\nimport { ActivityIndicator } from 'react-native';\nimport Animated, {\n  Easing,\n  interpolate,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme } from 'react-native-unistyles/reanimated';\n\nimport { buttonStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport type { PressableProps } from './Pressable';\nimport { AnimatedPressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- */\n/*                              Animation Helpers                              */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Interpolates a boxShadow string by scaling the alpha of all colors.\n * This allows smooth fade-in/out of shadows.\n */\nfunction interpolateShadowAlpha(shadow: string | undefined, alpha: number): string {\n  'worklet';\n  if (!shadow) {\n    return '';\n  }\n  if (alpha >= 1) {\n    return shadow;\n  }\n  if (alpha <= 0) {\n    return '';\n  }\n\n  return shadow.replace(/rgba\\(([^,]+),\\s*([^,]+),\\s*([^,]+),\\s*([^)]+)\\)/g, (_, r, g, b, a) => {\n    const newAlpha = parseFloat(a) * alpha;\n    return `rgba(${r}, ${g}, ${b}, ${newAlpha.toFixed(3)})`;\n  });\n}\n\n/* -------------------------------------------------------------------------- */\n/*                           Animated Icon Slot                                */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Animated wrapper for icon/loading content.\n * Matches web Button icon animation: scale 0.7→1, opacity 0→1, width 0→auto\n * Uses staggered animation: opacity waits until halfway through width animation.\n */\nfunction AnimatedIconSlot({\n  children,\n  visible,\n  iconSize,\n  gap,\n}: {\n  children: React.ReactNode;\n  visible: boolean;\n  iconSize: number;\n  gap: number;\n}) {\n  // Use useDerivedValue instead of useEffect + useSharedValue\n  // This is the idiomatic Reanimated pattern for deriving animated values from React state\n  const progress = useDerivedValue(\n    () => withSpring(visible ? 1 : 0, BUTTON_SPRING_CONFIG),\n    [visible],\n  );\n\n  const animatedStyle = useAnimatedStyle(() => {\n    // Total width includes icon + gap when visible\n    const totalWidth = iconSize + gap;\n    const width = interpolate(progress.value, [0, 1], [0, totalWidth]);\n\n    // Staggered animation: opacity starts at 50% of width animation\n    // On enter: width expands first, then icon fades in\n    // On exit: icon fades out first, then width collapses\n    const opacity = interpolate(progress.value, [0.5, 1], [0, 1], 'clamp');\n    const scale = interpolate(progress.value, [0.5, 1], [0.7, 1], 'clamp');\n\n    return {\n      width,\n      opacity,\n      transform: [{ scale }],\n      overflow: 'hidden' as const,\n    };\n  });\n\n  return <Animated.View style={animatedStyle}>{children}</Animated.View>;\n}\n\n// function LoadingIcon({ size, variant }: { size: ButtonSize, variant: ButtonVariantFlat }) {\n//   const { theme } = useUnistyles();\n//   const themeKey = `buttonVariant${variantToCapitalMap[variant]}IconRest` as const;\n//   const iconSize = theme.components.buttonSizeLgIconRest.fontSize;\n//   return <ActivityIndicator size={iconSize} color={theme.colors.text.primary} />;\n// }\n\n/* -------------------------------------------------------------------------- */\n/*                              Button Props                                   */\n/* -------------------------------------------------------------------------- */\n\ninterface ButtonProps extends Omit<PressableProps, 'children' | 'disabled'> {\n  /** The visual style variant of the button @default 'primary' */\n  variant?: ButtonVariantFlat;\n  /** The size of the button @default 'md' */\n  size?: ButtonSize;\n  /** The icon style variant @default 'outline' */\n  iconVariant?: IconVariant;\n  /** Icon displayed before the button label */\n  startIcon?: IconSlotType;\n  /** Icon displayed after the button label */\n  endIcon?: IconSlotType;\n  /** Shows a loading spinner and disables the button */\n  loading?: boolean;\n  /** Whether the button is disabled */\n  disabled?: boolean;\n  /** Button label content */\n  children?: React.ReactNode;\n  /**\n   * Disable motion effects (scale on press, icon animations)\n   * @default false\n   */\n  disableEffects?: boolean;\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Button Component                               */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **🖲️ A button element that can be used to trigger an action**\n *\n * @description\n * A button is a fundamental component used to trigger an action or event.\n * Buttons are interactive elements that users can click, tap, or otherwise\n * engage with to submit forms, open dialogues, or perform any other interaction.\n *\n * Features animated scale effect on press and smooth icon transitions matching\n * the web UDS Button behavior.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Button } from '@yahoo/uds-mobile';\n *\n * <Button onPress={() => console.log('pressed')}>Save</Button>\n * <Button variant=\"secondary\">Cancel</Button>\n * <Button startIcon=\"Add\" variant=\"brand\">Add Item</Button>\n * <Button loading>Saving...</Button>\n * ```\n *\n * @accessibility\n * - Sets `accessibilityRole=\"button\"` automatically\n * - Announces loading state to screen readers\n * - Use `accessibilityLabel` for icon-only buttons\n *\n * @see {@link IconButton} for icon-only buttons\n * @see {@link Link} for navigation actions\n */\nconst Button = memo(function Button({\n  variant = 'primary',\n  size = 'md',\n  iconVariant = 'outline',\n  startIcon,\n  endIcon,\n  loading,\n  disabled,\n  width: _width,\n  children,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  disableEffects = false,\n  onPressIn,\n  onPressOut,\n  ref,\n  ...props\n}: ButtonProps) {\n  const shouldAnimate = !disableEffects;\n\n  /* --------------------------------- State ---------------------------------- */\n  const [pressed, setPressed] = useState(false);\n\n  buttonStyles.useVariants({ size, variant, disabled, pressed });\n\n  // Get gap and icon size from current variant styles\n  const buttonGap = buttonStyles.root.gap;\n  const iconSize = buttonStyles.icon.fontSize;\n\n  // Get animated theme for boxShadow (useAnimatedVariantColor doesn't support non-color props)\n  const animatedTheme = useAnimatedTheme();\n\n  /* ------------------------------- Animation -------------------------------- */\n  const scale = useSharedValue<number>(SCALE_EFFECTS.none);\n\n  const handlePressIn = useCallback(\n    (event: Parameters<NonNullable<PressableProps['onPressIn']>>[0]) => {\n      setPressed(true);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.down, BUTTON_SPRING_CONFIG);\n      }\n      onPressIn?.(event);\n    },\n    [shouldAnimate, scale, onPressIn],\n  );\n\n  const handlePressOut = useCallback(\n    (event: Parameters<NonNullable<PressableProps['onPressOut']>>[0]) => {\n      setPressed(false);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG);\n      }\n      onPressOut?.(event);\n    },\n    [shouldAnimate, scale, onPressOut],\n  );\n\n  /* -------------------------------- Content --------------------------------- */\n  const childrenNode =\n    children &&\n    (isValidElement(children) ? (\n      children\n    ) : (\n      <Text numberOfLines={1} textAlign=\"center\" style={buttonStyles.text}>\n        {children}\n      </Text>\n    ));\n\n  const a11yState = useMemo(() => ({ disabled, busy: loading }), [disabled, loading]);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Animate pressed state for shadow (0 = rest, 1 = pressed)\n  const pressProgress = useDerivedValue(\n    () => withTiming(pressed ? 1 : 0, { duration: 220, easing: Easing.bezier(0, 0, 0.2, 1) }),\n    [pressed],\n  );\n\n  // Animate using Unistyles' variant color system + boxShadow from theme\n  const animatedStyles = useAnimatedStyle(() => {\n    // Get boxShadow from theme using flattened path (no camelCase conversion needed!)\n    const components = animatedTheme.value.components;\n    const buttonVariantPath = `button/variant/${variant}/root/pressed` as const;\n    const shadowPressed = components[buttonVariantPath]?.boxShadow;\n\n    return {\n      transform: [{ scale: scale.value }],\n      // Only animate shadow if the theme defines one for this variant\n      ...(shadowPressed && {\n        boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\n      }),\n    };\n  });\n\n  // Determine what should be visible in start slot\n  const showLoading = !!loading;\n  const showStartIcon = !!startIcon && !loading;\n  const showEndIcon = !!endIcon && !loading;\n\n  const iconSizeToken = (buttonStyles.icon.iconSizeToken as IconSize) ?? 'sm';\n\n  // Start slot: either loading spinner or start icon\n  const startContent = (\n    <AnimatedIconSlot visible={showLoading || showStartIcon} iconSize={iconSize} gap={buttonGap}>\n      {showLoading ? (\n        <ActivityIndicator size={buttonStyles.icon.fontSize} color={buttonStyles.icon.color} />\n      ) : (\n        <IconSlot\n          icon={startIcon}\n          size={iconSizeToken}\n          variant={iconVariant}\n          style={buttonStyles.icon}\n        />\n      )}\n    </AnimatedIconSlot>\n  );\n\n  // End slot: only end icon (no loading here)\n  const endContent = (\n    <AnimatedIconSlot visible={showEndIcon} iconSize={iconSize} gap={buttonGap}>\n      <IconSlot\n        icon={endIcon}\n        size={iconSizeToken}\n        variant={iconVariant}\n        style={buttonStyles.icon}\n      />\n    </AnimatedIconSlot>\n  );\n\n  const rootStyles = useMemo(\n    () => [\n      buttonStyles.root,\n      animatedStyles,\n      typeof style === 'function' ? style({ pressed }) : style,\n    ],\n    [buttonStyles.root, animatedStyles, style, pressed],\n  );\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <AnimatedPressable\n      ref={ref}\n      disabled={disabled}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      overflow=\"hidden\"\n      accessibilityLabel={loading ? `${accessibilityLabel ?? ''}, loading` : accessibilityLabel}\n      accessibilityHint={accessibilityHint}\n      accessibilityRole=\"button\"\n      accessibilityState={a11yState}\n      alignContent=\"center\"\n      style={rootStyles}\n      {...props}\n    >\n      {startContent}\n      {childrenNode}\n      {endContent}\n    </AnimatedPressable>\n  );\n});\n\nButton.displayName = 'Button';\n\nexport { Button, type ButtonProps };\n"],"mappings":"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"}

package/dist/components/Checkbox.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox.d.mts","names":[],"sources":["../../src/components/Checkbox.tsx"],"mappings":";;;;;;;UAyBU,aAAA,SAAsB,IAAA,CAAK,SAAA,YAAqB,sBAAA;;EAExD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,cAAA;;EAEA,QAAA;EAJU;EAMV,QAAA;EAR8B;EAU9B,QAAA,IAAY,OAAA;AAAA;;;;;;;;;;;;;;;AAAgB;;;;;;;;;;;;;;;;;;;;cAqDxB,QAAA,EAAQ,KAAA,CAAA,oBAAA,CAAA,aAAA"}