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

package/dist/components/Box.d.cts

@@ -1,13 +1,15 @@
 
 import { SizeProps } from "../types.cjs";
-import * as react5 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 import { StyleProps } from "../../generated/styles";
 
 //#region src/components/Box.d.ts
 interface BoxProps extends ViewProps, SizeProps {
+  /** Ref to the underlying View */
   ref?: Ref<View>;
+  /** Background color from the theme palette */
   backgroundColor?: StyleProps['backgroundColor'];
   borderRadius?: StyleProps['borderRadius'];
   borderTopStartRadius?: StyleProps['borderTopStartRadius'];
@@ -60,13 +62,16 @@ interface BoxProps extends ViewProps, SizeProps {
  * **📦 A layout component that can be used to compose other components**
  *
  * @description
- * The most simple component we ship - a div. But with all the power of the UDS design system.
+ * 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](./v-stack) or [HStack](./h-stack) respectively.
+ * consider using VStack or HStack respectively.
+ *
+ * @category Layout
+ * @platform mobile
  *
  * @example
  * ```tsx
- * import { Box } from '@yahoo/uds-mobile/Box';
+ * import { Box } from '@yahoo/uds-mobile';
  *
  * <Box backgroundColor="primary" spacing="6">
  *   Any kind of content can go here!
@@ -74,14 +79,14 @@ interface BoxProps extends ViewProps, SizeProps {
  * ```
  *
  * @usage
- * - If you need to div-like container to apply padding, shapes, or other styling.
- * - If you're creating card components.
- *
- * @see The {@link https://uds.build/docs/components/box Box Docs} for more info
+ * - Use as a container to apply padding, shapes, or other styling
+ * - Use for creating card components
+ * - Use HStack/VStack for directional layouts
  *
- * @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
+ * @see {@link HStack} for horizontal layouts
+ * @see {@link VStack} for vertical layouts
  */
-declare const Box: react5.NamedExoticComponent<BoxProps>;
+declare const Box: react.NamedExoticComponent<BoxProps>;
 //#endregion
 export { Box, type BoxProps };
 //# sourceMappingURL=Box.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.d.cts","names":[],"sources":["../../src/components/Box.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UASU,QAAA,SAAiB,WAAW;QAC9B,IAAI;EADF,eAAS,CAAA,EAEC,UAFD,CAAA,iBAAA,CAAA;EACP,YAAA,CAAA,EAEK,UAFL,CAAA,cAAA,CAAA;EAAJ,oBAAA,CAAA,EAGiB,UAHjB,CAAA,sBAAA,CAAA;EACY,kBAAA,CAAA,EAGG,UAHH,CAAA,oBAAA,CAAA;EACH,uBAAA,CAAA,EAGW,UAHX,CAAA,yBAAA,CAAA;EACQ,qBAAA,CAAA,EAGC,UAHD,CAAA,uBAAA,CAAA;EACF,WAAA,CAAA,EAGP,UAHO,CAAA,aAAA,CAAA;EACK,gBAAA,CAAA,EAGP,UAHO,CAAA,kBAAA,CAAA;EACF,cAAA,CAAA,EAGP,UAHO,CAAA,gBAAA,CAAA;EACV,cAAA,CAAA,EAGG,UAHH,CAAA,gBAAA,CAAA;EACK,iBAAA,CAAA,EAGC,UAHD,CAAA,mBAAA,CAAA;EACF,WAAA,CAAA,EAGH,UAHG,CAAA,aAAA,CAAA;EACA,mBAAA,CAAA,EAGK,UAHL,CAAA,qBAAA,CAAA;EACG,qBAAA,CAAA,EAGI,UAHJ,CAAA,uBAAA,CAAA;EACN,gBAAA,CAAA,EAGK,UAHL,CAAA,kBAAA,CAAA;EACQ,cAAA,CAAA,EAGL,UAHK,CAAA,gBAAA,CAAA;EACE,cAAA,CAAA,EAGP,UAHO,CAAA,gBAAA,CAAA;EACL,iBAAA,CAAA,EAGC,UAHD,CAAA,mBAAA,CAAA;EACF,YAAA,CAAA,EAGF,UAHE,CAAA,cAAA,CAAA;EACA,UAAA,CAAA,EAGJ,UAHI,CAAA,YAAA,CAAA;EACG,SAAA,CAAA,EAGR,UAHQ,CAAA,WAAA,CAAA;EACL,IAAA,CAAA,EAGR,UAHQ,CAAA,MAAA,CAAA;EACF,aAAA,CAAA,EAGG,UAHH,CAAA,eAAA,CAAA;EACD,QAAA,CAAA,EAGD,UAHC,CAAA,UAAA,CAAA;EACL,UAAA,CAAA,EAGM,UAHN,CAAA,YAAA,CAAA;EACS,QAAA,CAAA,EAGL,UAHK,CAAA,UAAA,CAAA;EACL,cAAA,CAAA,EAGM,UAHN,CAAA,gBAAA,CAAA;EACE,OAAA,CAAA,EAIH,UAJG,CAAA,SAAA,CAAA;EACF,QAAA,CAAA,EAIA,UAJA,CAAA,UAAA,CAAA;EACM,OAAA,CAAA,EAOP,UAPO,CAAA,SAAA,CAAA;EAEP,iBAAA,CAAA,EAMU,UANV,CAAA,mBAAA,CAAA;EACC,eAAA,CAAA,EAMO,UANP,CAAA,iBAAA,CAAA;EAID,aAAA,CAAA,EAGM,UAHN,CAAA,eAAA,CAAA;EACU,UAAA,CAAA,EAGP,UAHO,CAAA,YAAA,CAAA;EACF,YAAA,CAAA,EAGH,UAHG,CAAA,cAAA,CAAA;EACF,UAAA,CAAA,EAGH,UAHG,CAAA,YAAA,CAAA;EACH,MAAA,CAAA,EAGJ,UAHI,CAAA,QAAA,CAAA;EACE,cAAA,CAAA,EAGE,UAHF,CAAA,gBAAA,CAAA;EACF,gBAAA,CAAA,EAGM,UAHN,CAAA,kBAAA,CAAA;EACJ,YAAA,CAAA,EAGM,UAHN,CAAA,cAAA,CAAA;EACQ,SAAA,CAAA,EAGL,UAHK,CAAA,WAAA,CAAA;EACE,WAAA,CAAA,EAGL,UAHK,CAAA,aAAA,CAAA;EACJ,SAAA,CAAA,EAGH,UAHG,CAAA,WAAA,CAAA;EACH,SAAA,CAAA,EAGA,UAHA,CAAA,WAAA,CAAA;EACE,MAAA,CAAA,EAGL,UAHK,CAAA,QAAA,CAAA;EACF,6BAAA,CAAA,EAAA,MAAA;EACA,yBAAA,CAAA,EAAA,MAAA;;;;;AAjDiC;;;;;;;;;;;;;;;;;;;;;;cAgFzC,KAAG,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"Box.d.cts","names":[],"sources":["../../src/components/Box.tsx"],"mappings":";;;;;;;;UASU,QAAA,SAAiB,SAAA,EAAW,SAAA;;EAEpC,GAAA,GAAM,GAAA,CAAI,IAAA;EAFO;EAIjB,eAAA,GAAkB,UAAA;EAClB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAIX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;EACT,6BAAA;EACA,yBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BI,GAAA,EAAG,KAAA,CAAA,oBAAA,CAAA,QAAA"}

package/dist/components/Box.d.mts

@@ -1,13 +1,15 @@
 
 import { SizeProps } from "../types.mjs";
-import * as react4 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 import { StyleProps } from "../../generated/styles";
 
 //#region src/components/Box.d.ts
 interface BoxProps extends ViewProps, SizeProps {
+  /** Ref to the underlying View */
   ref?: Ref<View>;
+  /** Background color from the theme palette */
   backgroundColor?: StyleProps['backgroundColor'];
   borderRadius?: StyleProps['borderRadius'];
   borderTopStartRadius?: StyleProps['borderTopStartRadius'];
@@ -60,13 +62,16 @@ interface BoxProps extends ViewProps, SizeProps {
  * **📦 A layout component that can be used to compose other components**
  *
  * @description
- * The most simple component we ship - a div. But with all the power of the UDS design system.
+ * 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](./v-stack) or [HStack](./h-stack) respectively.
+ * consider using VStack or HStack respectively.
+ *
+ * @category Layout
+ * @platform mobile
  *
  * @example
  * ```tsx
- * import { Box } from '@yahoo/uds-mobile/Box';
+ * import { Box } from '@yahoo/uds-mobile';
  *
  * <Box backgroundColor="primary" spacing="6">
  *   Any kind of content can go here!
@@ -74,14 +79,14 @@ interface BoxProps extends ViewProps, SizeProps {
  * ```
  *
  * @usage
- * - If you need to div-like container to apply padding, shapes, or other styling.
- * - If you're creating card components.
- *
- * @see The {@link https://uds.build/docs/components/box Box Docs} for more info
+ * - Use as a container to apply padding, shapes, or other styling
+ * - Use for creating card components
+ * - Use HStack/VStack for directional layouts
  *
- * @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
+ * @see {@link HStack} for horizontal layouts
+ * @see {@link VStack} for vertical layouts
  */
-declare const Box: react4.NamedExoticComponent<BoxProps>;
+declare const Box: react.NamedExoticComponent<BoxProps>;
 //#endregion
 export { Box, type BoxProps };
 //# sourceMappingURL=Box.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.d.mts","names":[],"sources":["../../src/components/Box.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UASU,QAAA,SAAiB,WAAW;QAC9B,IAAI;EADF,eAAS,CAAA,EAEC,UAFD,CAAA,iBAAA,CAAA;EACP,YAAA,CAAA,EAEK,UAFL,CAAA,cAAA,CAAA;EAAJ,oBAAA,CAAA,EAGiB,UAHjB,CAAA,sBAAA,CAAA;EACY,kBAAA,CAAA,EAGG,UAHH,CAAA,oBAAA,CAAA;EACH,uBAAA,CAAA,EAGW,UAHX,CAAA,yBAAA,CAAA;EACQ,qBAAA,CAAA,EAGC,UAHD,CAAA,uBAAA,CAAA;EACF,WAAA,CAAA,EAGP,UAHO,CAAA,aAAA,CAAA;EACK,gBAAA,CAAA,EAGP,UAHO,CAAA,kBAAA,CAAA;EACF,cAAA,CAAA,EAGP,UAHO,CAAA,gBAAA,CAAA;EACV,cAAA,CAAA,EAGG,UAHH,CAAA,gBAAA,CAAA;EACK,iBAAA,CAAA,EAGC,UAHD,CAAA,mBAAA,CAAA;EACF,WAAA,CAAA,EAGH,UAHG,CAAA,aAAA,CAAA;EACA,mBAAA,CAAA,EAGK,UAHL,CAAA,qBAAA,CAAA;EACG,qBAAA,CAAA,EAGI,UAHJ,CAAA,uBAAA,CAAA;EACN,gBAAA,CAAA,EAGK,UAHL,CAAA,kBAAA,CAAA;EACQ,cAAA,CAAA,EAGL,UAHK,CAAA,gBAAA,CAAA;EACE,cAAA,CAAA,EAGP,UAHO,CAAA,gBAAA,CAAA;EACL,iBAAA,CAAA,EAGC,UAHD,CAAA,mBAAA,CAAA;EACF,YAAA,CAAA,EAGF,UAHE,CAAA,cAAA,CAAA;EACA,UAAA,CAAA,EAGJ,UAHI,CAAA,YAAA,CAAA;EACG,SAAA,CAAA,EAGR,UAHQ,CAAA,WAAA,CAAA;EACL,IAAA,CAAA,EAGR,UAHQ,CAAA,MAAA,CAAA;EACF,aAAA,CAAA,EAGG,UAHH,CAAA,eAAA,CAAA;EACD,QAAA,CAAA,EAGD,UAHC,CAAA,UAAA,CAAA;EACL,UAAA,CAAA,EAGM,UAHN,CAAA,YAAA,CAAA;EACS,QAAA,CAAA,EAGL,UAHK,CAAA,UAAA,CAAA;EACL,cAAA,CAAA,EAGM,UAHN,CAAA,gBAAA,CAAA;EACE,OAAA,CAAA,EAIH,UAJG,CAAA,SAAA,CAAA;EACF,QAAA,CAAA,EAIA,UAJA,CAAA,UAAA,CAAA;EACM,OAAA,CAAA,EAOP,UAPO,CAAA,SAAA,CAAA;EAEP,iBAAA,CAAA,EAMU,UANV,CAAA,mBAAA,CAAA;EACC,eAAA,CAAA,EAMO,UANP,CAAA,iBAAA,CAAA;EAID,aAAA,CAAA,EAGM,UAHN,CAAA,eAAA,CAAA;EACU,UAAA,CAAA,EAGP,UAHO,CAAA,YAAA,CAAA;EACF,YAAA,CAAA,EAGH,UAHG,CAAA,cAAA,CAAA;EACF,UAAA,CAAA,EAGH,UAHG,CAAA,YAAA,CAAA;EACH,MAAA,CAAA,EAGJ,UAHI,CAAA,QAAA,CAAA;EACE,cAAA,CAAA,EAGE,UAHF,CAAA,gBAAA,CAAA;EACF,gBAAA,CAAA,EAGM,UAHN,CAAA,kBAAA,CAAA;EACJ,YAAA,CAAA,EAGM,UAHN,CAAA,cAAA,CAAA;EACQ,SAAA,CAAA,EAGL,UAHK,CAAA,WAAA,CAAA;EACE,WAAA,CAAA,EAGL,UAHK,CAAA,aAAA,CAAA;EACJ,SAAA,CAAA,EAGH,UAHG,CAAA,WAAA,CAAA;EACH,SAAA,CAAA,EAGA,UAHA,CAAA,WAAA,CAAA;EACE,MAAA,CAAA,EAGL,UAHK,CAAA,QAAA,CAAA;EACF,6BAAA,CAAA,EAAA,MAAA;EACA,yBAAA,CAAA,EAAA,MAAA;;;;;AAjDiC;;;;;;;;;;;;;;;;;;;;;;cAgFzC,KAAG,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"Box.d.mts","names":[],"sources":["../../src/components/Box.tsx"],"mappings":";;;;;;;;UASU,QAAA,SAAiB,SAAA,EAAW,SAAA;;EAEpC,GAAA,GAAM,GAAA,CAAI,IAAA;EAFO;EAIjB,eAAA,GAAkB,UAAA;EAClB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAIX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;EACT,6BAAA;EACA,yBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BI,GAAA,EAAG,KAAA,CAAA,oBAAA,CAAA,QAAA"}

package/dist/components/Box.mjs

@@ -1,4 +1,4 @@
-/*! © 2026 Yahoo, Inc. UDS Mobile v1.3.0-beta.7 */
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 import { memo, useMemo } from "react";
 import { View } from "react-native";
 import { styles } from "../../generated/styles";
@@ -9,13 +9,16 @@ import { jsx } from "react/jsx-runtime";
 * **📦 A layout component that can be used to compose other components**
 *
 * @description
-* The most simple component we ship - a div. But with all the power of the UDS design system.
+* 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](./v-stack) or [HStack](./h-stack) respectively.
+* consider using VStack or HStack respectively.
+*
+* @category Layout
+* @platform mobile
 *
 * @example
 * ```tsx
-* import { Box } from '@yahoo/uds-mobile/Box';
+* import { Box } from '@yahoo/uds-mobile';
 *
 * <Box backgroundColor="primary" spacing="6">
 *   Any kind of content can go here!
@@ -23,14 +26,14 @@ import { jsx } from "react/jsx-runtime";
 * ```
 *
 * @usage
-* - If you need to div-like container to apply padding, shapes, or other styling.
-* - If you're creating card components.
-*
-* @see The {@link https://uds.build/docs/components/box Box Docs} for more info
+* - Use as a container to apply padding, shapes, or other styling
+* - Use for creating card components
+* - Use HStack/VStack for directional layouts
 *
-* @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
+* @see {@link HStack} for horizontal layouts
+* @see {@link VStack} for vertical layouts
 */
-const Box = memo(function Box$1({ 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, style, ref, ...props }) {
+const Box = memo(function Box({ 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, style, ref, ...props }) {
 	const variants = {
 		backgroundColor,
 		borderRadius,

package/dist/components/Box.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Box.mjs","names":["Box"],"sources":["../../src/components/Box.tsx"],"sourcesContent":["import type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { View } from 'react-native';\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  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  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 div. 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](./v-stack) or [HStack](./h-stack) respectively.\n *\n * @example\n * ```tsx\n * import { Box } from '@yahoo/uds-mobile/Box';\n *\n * <Box backgroundColor=\"primary\" spacing=\"6\">\n *   Any kind of content can go here!\n * </Box>\n * ```\n *\n * @usage\n * - If you need to div-like container to apply padding, shapes, or other styling.\n * - If you're creating card components.\n *\n * @see The {@link https://uds.build/docs/components/box Box Docs} for more info\n *\n * @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)\n */\nconst Box = memo(function Box({\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 variants = {\n    // background\n    backgroundColor,\n    // border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    // nestedBorderRadius,\n    // nestedBorderRadiusSize,\n    // nestedBorderRadiusSpacing,\n    // nestedBorderRadiusWidth,\n    borderColor,\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,\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  // 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      styles.foundation,\n      style,\n    ],\n    [\n      dangerouslySetBackgroundColor,\n      dangerouslySetBorderColor,\n      width,\n      height,\n      minWidth,\n      maxWidth,\n      minHeight,\n      maxHeight,\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\nexport { Box, type BoxProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFA,MAAM,MAAM,KAAK,SAASA,MAAI,EAE5B,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,WAUA,OACA,KAEA,GAAG,SACQ;CACX,MAAM,WAAW;EAEf;EAEA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;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;AAkC5B,QAAO,oBAAC;EAAU;EAAK,OA/BL,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,OAAO;GACP;GACD,EACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,OAAO;GACP;GACD,CACF;EAIwC,GAAI;GAAS;EACtD;AAEF,IAAI,cAAc"}
+{"version":3,"file":"Box.mjs","names":[],"sources":["../../src/components/Box.tsx"],"sourcesContent":["import type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { View } from 'react-native';\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 to the underlying View */\n  ref?: Ref<View>;\n  /** Background color from the theme palette */\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  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  // 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 variants = {\n    // background\n    backgroundColor,\n    // border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    // nestedBorderRadius,\n    // nestedBorderRadiusSize,\n    // nestedBorderRadiusSpacing,\n    // nestedBorderRadiusWidth,\n    borderColor,\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,\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  // 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      styles.foundation,\n      style,\n    ],\n    [\n      dangerouslySetBackgroundColor,\n      dangerouslySetBorderColor,\n      width,\n      height,\n      minWidth,\n      maxWidth,\n      minHeight,\n      maxHeight,\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\nexport { Box, type BoxProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,MAAM,MAAM,KAAK,SAAS,IAAI,EAE5B,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,WAUA,OACA,KAEA,GAAG,SACQ;CACX,MAAM,WAAW;EAEf;EAEA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;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;AAkC5B,QAAO,oBAAC;EAAU;EAAK,OA/BL,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,OAAO;GACP;GACD,EACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,OAAO;GACP;GACD,CACF;EAIwC,GAAI;GAAS;EACtD;AAEF,IAAI,cAAc"}

package/dist/components/Button.cjs

@@ -1,5 +1,6 @@
-/*! © 2026 Yahoo, Inc. UDS Mobile v1.3.0-beta.7 */
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 const require_index = require('../motion-tokens/dist/index.cjs');
 const require_motion = require('../motion.cjs');
 const require_components_IconSlot = require('./IconSlot.cjs');
@@ -10,7 +11,7 @@ let react_native = require("react-native");
 let generated_styles = require("../../generated/styles");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_native_reanimated = require("react-native-reanimated");
-react_native_reanimated = require_rolldown_runtime.__toESM(react_native_reanimated);
+react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
 let react_native_unistyles_reanimated = require("react-native-unistyles/reanimated");
 
 //#region src/components/Button.tsx
@@ -58,6 +59,9 @@ function AnimatedIconSlot({ children, visible, iconSize, gap }) {
 * Features animated scale effect on press and smooth icon transitions matching
 * the web UDS Button behavior.
 *
+* @category Interactive
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { Button } from '@yahoo/uds-mobile';
@@ -68,9 +72,15 @@ function AnimatedIconSlot({ children, visible, iconSize, gap }) {
 * <Button loading>Saving...</Button>
 * ```
 *
-* @see The {@link https://uds.build/docs/components/button Button Docs} for more info
+* @accessibility
+* - Sets `accessibilityRole="button"` automatically
+* - Announces loading state to screen readers
+* - Use `accessibilityLabel` for icon-only buttons
+*
+* @see {@link IconButton} for icon-only buttons
+* @see {@link Link} for navigation actions
 */
-const Button = (0, react.memo)(function Button$1({ variant = "primary", size = "md", iconVariant = "outline", startIcon, endIcon, loading, disabled, width: _width, children, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
+const Button = (0, react.memo)(function Button({ variant = "primary", size = "md", iconVariant = "outline", startIcon, endIcon, loading, disabled, width: _width, children, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
 	const shouldAnimate = !disableEffects;
 	const [pressed, setPressed] = (0, react.useState)(false);
 	generated_styles.buttonStyles.useVariants({

package/dist/components/Button.d.cts

@@ -2,28 +2,34 @@
 import { ButtonSize, ButtonVariantFlat, IconVariant } from "../types/dist/index.cjs";
 import { IconSlotType } from "./IconSlot.cjs";
 import { PressableProps as PressableProps$1 } from "./Pressable.cjs";
-import * as react6 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { View } from "react-native";
 
 //#region src/components/Button.d.ts
 interface ButtonProps extends Omit<PressableProps$1, 'children' | 'disabled'> {
-  /** @default 'primary' */
+  /** The visual style variant of the button @default 'primary' */
   variant?: ButtonVariantFlat;
-  /** @default 'md' */
+  /** The size of the button @default 'md' */
   size?: ButtonSize;
-  /** @default 'outline' */
+  /** The icon style variant @default 'outline' */
   iconVariant?: IconVariant;
+  /** Icon displayed before the button label */
   startIcon?: IconSlotType;
+  /** Icon displayed after the button label */
   endIcon?: IconSlotType;
+  /** Shows a loading spinner and disables the button */
   loading?: boolean;
+  /** Whether the button is disabled */
   disabled?: boolean;
+  /** Button label content */
   children?: React.ReactNode;
   /**
    * Disable motion effects (scale on press, icon animations)
    * @default false
    */
   disableEffects?: boolean;
+  /** Ref to the underlying View */
   ref?: Ref<View>;
 }
 /**
@@ -37,6 +43,9 @@ interface ButtonProps extends Omit<PressableProps$1, 'children' | 'disabled'> {
  * Features animated scale effect on press and smooth icon transitions matching
  * the web UDS Button behavior.
  *
+ * @category Interactive
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { Button } from '@yahoo/uds-mobile';
@@ -47,9 +56,15 @@ interface ButtonProps extends Omit<PressableProps$1, 'children' | 'disabled'> {
  * <Button loading>Saving...</Button>
  * ```
  *
- * @see The {@link https://uds.build/docs/components/button Button Docs} for more info
+ * @accessibility
+ * - Sets `accessibilityRole="button"` automatically
+ * - Announces loading state to screen readers
+ * - Use `accessibilityLabel` for icon-only buttons
+ *
+ * @see {@link IconButton} for icon-only buttons
+ * @see {@link Link} for navigation actions
  */
-declare const Button: react6.NamedExoticComponent<ButtonProps>;
+declare const Button: react.NamedExoticComponent<ButtonProps>;
 //#endregion
 export { Button, type ButtonProps };
 //# sourceMappingURL=Button.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.cts","names":[],"sources":["../../src/components/Button.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UA2GU,WAAA,SAAoB,KAAK;;YAEvB;EAFF;EAAyB,IAAA,CAAA,EAI1B,UAJ0B;EAEvB;EAEH,WAAA,CAAA,EAEO,WAFP;EAEO,SAAA,CAAA,EACF,YADE;EACF,OAAA,CAAA,EACF,YADE;EACF,OAAA,CAAA,EAAA,OAAA;EAGC,QAAM,CAAA,EAAA,OAAA;EAMP,QAAA,CAAA,EANC,KAAA,CAAM,SAMP;EAAJ;;;AAjB0B;;QAiB1B,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;cA8BN,QAAM,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"Button.d.cts","names":[],"sources":["../../src/components/Button.tsx"],"mappings":";;;;;;;;;UA2GU,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.d.mts

@@ -2,28 +2,34 @@
 import { ButtonSize, ButtonVariantFlat, IconVariant } from "../types/dist/index.mjs";
 import { IconSlotType } from "./IconSlot.mjs";
 import { PressableProps as PressableProps$1 } from "./Pressable.mjs";
-import * as react5 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { View } from "react-native";
 
 //#region src/components/Button.d.ts
 interface ButtonProps extends Omit<PressableProps$1, 'children' | 'disabled'> {
-  /** @default 'primary' */
+  /** The visual style variant of the button @default 'primary' */
   variant?: ButtonVariantFlat;
-  /** @default 'md' */
+  /** The size of the button @default 'md' */
   size?: ButtonSize;
-  /** @default 'outline' */
+  /** The icon style variant @default 'outline' */
   iconVariant?: IconVariant;
+  /** Icon displayed before the button label */
   startIcon?: IconSlotType;
+  /** Icon displayed after the button label */
   endIcon?: IconSlotType;
+  /** Shows a loading spinner and disables the button */
   loading?: boolean;
+  /** Whether the button is disabled */
   disabled?: boolean;
+  /** Button label content */
   children?: React.ReactNode;
   /**
    * Disable motion effects (scale on press, icon animations)
    * @default false
    */
   disableEffects?: boolean;
+  /** Ref to the underlying View */
   ref?: Ref<View>;
 }
 /**
@@ -37,6 +43,9 @@ interface ButtonProps extends Omit<PressableProps$1, 'children' | 'disabled'> {
  * Features animated scale effect on press and smooth icon transitions matching
  * the web UDS Button behavior.
  *
+ * @category Interactive
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { Button } from '@yahoo/uds-mobile';
@@ -47,9 +56,15 @@ interface ButtonProps extends Omit<PressableProps$1, 'children' | 'disabled'> {
  * <Button loading>Saving...</Button>
  * ```
  *
- * @see The {@link https://uds.build/docs/components/button Button Docs} for more info
+ * @accessibility
+ * - Sets `accessibilityRole="button"` automatically
+ * - Announces loading state to screen readers
+ * - Use `accessibilityLabel` for icon-only buttons
+ *
+ * @see {@link IconButton} for icon-only buttons
+ * @see {@link Link} for navigation actions
  */
-declare const Button: react5.NamedExoticComponent<ButtonProps>;
+declare const Button: react.NamedExoticComponent<ButtonProps>;
 //#endregion
 export { Button, type ButtonProps };
 //# sourceMappingURL=Button.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.mts","names":[],"sources":["../../src/components/Button.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UA2GU,WAAA,SAAoB,KAAK;;YAEvB;EAFF;EAAyB,IAAA,CAAA,EAI1B,UAJ0B;EAEvB;EAEH,WAAA,CAAA,EAEO,WAFP;EAEO,SAAA,CAAA,EACF,YADE;EACF,OAAA,CAAA,EACF,YADE;EACF,OAAA,CAAA,EAAA,OAAA;EAGC,QAAM,CAAA,EAAA,OAAA;EAMP,QAAA,CAAA,EANC,KAAA,CAAM,SAMP;EAAJ;;;AAjB0B;;QAiB1B,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;cA8BN,QAAM,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"Button.d.mts","names":[],"sources":["../../src/components/Button.tsx"],"mappings":";;;;;;;;;UA2GU,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

@@ -1,4 +1,4 @@
-/*! © 2026 Yahoo, Inc. UDS Mobile v1.3.0-beta.7 */
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 import { SCALE_EFFECTS } from "../motion-tokens/dist/index.mjs";
 import { BUTTON_SPRING_CONFIG } from "../motion.mjs";
 import { IconSlot } from "./IconSlot.mjs";
@@ -56,6 +56,9 @@ function AnimatedIconSlot({ children, visible, iconSize, gap }) {
 * Features animated scale effect on press and smooth icon transitions matching
 * the web UDS Button behavior.
 *
+* @category Interactive
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { Button } from '@yahoo/uds-mobile';
@@ -66,9 +69,15 @@ function AnimatedIconSlot({ children, visible, iconSize, gap }) {
 * <Button loading>Saving...</Button>
 * ```
 *
-* @see The {@link https://uds.build/docs/components/button Button Docs} for more info
+* @accessibility
+* - Sets `accessibilityRole="button"` automatically
+* - Announces loading state to screen readers
+* - Use `accessibilityLabel` for icon-only buttons
+*
+* @see {@link IconButton} for icon-only buttons
+* @see {@link Link} for navigation actions
 */
-const Button = memo(function Button$1({ variant = "primary", size = "md", iconVariant = "outline", startIcon, endIcon, loading, disabled, width: _width, children, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
+const Button = memo(function Button({ variant = "primary", size = "md", iconVariant = "outline", startIcon, endIcon, loading, disabled, width: _width, children, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
 	const shouldAnimate = !disableEffects;
 	const [pressed, setPressed] = useState(false);
 	buttonStyles.useVariants({

package/dist/components/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":["Button","Text"],"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonSize, ButtonVariantFlat, 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, alpha: number): string {\n  'worklet';\n  if (!shadow || 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  /** @default 'primary' */\n  variant?: ButtonVariantFlat;\n  /** @default 'md' */\n  size?: ButtonSize;\n  /** @default 'outline' */\n  iconVariant?: IconVariant;\n  startIcon?: IconSlotType;\n  endIcon?: IconSlotType;\n  loading?: boolean;\n  disabled?: boolean;\n  children?: React.ReactNode;\n  /**\n   * Disable motion effects (scale on press, icon animations)\n   * @default false\n   */\n  disableEffects?: boolean;\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 * @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 * @see The {@link https://uds.build/docs/components/button Button Docs} for more info\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      // backgroundColor: withTiming(backgroundColor.value, {\n      //   duration: 220,\n      //   easing: Easing.bezier(0, 0, 0.2, 1),\n      // }),\n      // borderColor: withTiming(borderColor.value, {\n      //   duration: 220,\n      //   easing: Easing.bezier(0, 0, 0.2, 1),\n      // }),\n      // Animate shadow by interpolating its color alpha\n      boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\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  // 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 icon={startIcon} variant={iconVariant} style={buttonStyles.icon} />\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 icon={endIcon} variant={iconVariant} style={buttonStyles.icon} />\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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"}
+{"version":3,"file":"Button.mjs","names":["Text"],"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonSize, ButtonVariantFlat, 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, alpha: number): string {\n  'worklet';\n  if (!shadow || 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      // backgroundColor: withTiming(backgroundColor.value, {\n      //   duration: 220,\n      //   easing: Easing.bezier(0, 0, 0.2, 1),\n      // }),\n      // borderColor: withTiming(borderColor.value, {\n      //   duration: 220,\n      //   easing: Easing.bezier(0, 0, 0.2, 1),\n      // }),\n      // Animate shadow by interpolating its color alpha\n      boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\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  // 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 icon={startIcon} variant={iconVariant} style={buttonStyles.icon} />\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 icon={endIcon} variant={iconVariant} style={buttonStyles.icon} />\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.cjs

@@ -1,5 +1,6 @@
-/*! © 2026 Yahoo, Inc. UDS Mobile v1.3.0-beta.7 */
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 const require_index = require('../motion-tokens/dist/index.cjs');
 const require_motion = require('../motion.cjs');
 const require_components_Icon = require('./Icon.cjs');
@@ -10,7 +11,7 @@ let react = require("react");
 let generated_styles = require("../../generated/styles");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_native_reanimated = require("react-native-reanimated");
-react_native_reanimated = require_rolldown_runtime.__toESM(react_native_reanimated);
+react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
 
 //#region src/components/Checkbox.tsx
 const VARIANT_ERROR_MAP = {
@@ -20,13 +21,14 @@ const VARIANT_ERROR_MAP = {
 /**
 * **⚙️ A checkbox component**
 *
-* @componentType Client component
-*
 * @description
 * A checkbox component allows users to select one or multiple options from a set.
 * It represents a binary state, typically as checked or unchecked, and optionally
 * includes a third "indeterminate" state to indicate partial selection.
 *
+* @category Form
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { Checkbox } from '@yahoo/uds-mobile';
@@ -41,9 +43,16 @@ const VARIANT_ERROR_MAP = {
 * - Settings: For toggling preferences
 * - Filters: For multi-select filtering
 *
-* @see The {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info
+* @accessibility
+* - Sets `accessibilityRole="checkbox"` automatically
+* - Announces checked/unchecked/mixed state
+* - Label is used as accessibility label
+* - Supports `reduceMotion` for users who prefer reduced motion
+*
+* @see {@link Radio} for single-select options
+* @see {@link Switch} for binary toggles
 */
-const Checkbox = (0, react.memo)(function Checkbox$1({ label, labelPosition = "start", variant: variantProp = "primary", size = "md", checked: checkedProp, hasError, reduceMotion, defaultChecked, disabled, required, onChange, ref, ...viewProps }) {
+const Checkbox = (0, react.memo)(function Checkbox({ label, labelPosition = "start", variant: variantProp = "primary", size = "md", checked: checkedProp, hasError, reduceMotion, defaultChecked, disabled, required, onChange, ref, ...viewProps }) {
 	const uid = `uds-checkbox-${(0, react.useId)()}`;
 	const isControlled = checkedProp !== void 0;
 	const [internalChecked, setInternalChecked] = (0, react.useState)(isControlled ? checkedProp : defaultChecked ?? false);