npm - @yahoo/uds-mobile - Versions diffs - 1.0.0 → 1.1.0-beta.1 - Mend

@yahoo/uds-mobile 1.0.0 → 1.1.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (252) hide show

package/dist/components/Avatar.d.cts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { IconSlotType } from "./IconSlot.cjs";
-import * as react11 from "react";
+import * as react0 from "react";
 import { View, ViewProps } from "react-native";
 //#region src/components/Avatar.d.ts
@@ -54,7 +54,7 @@ interface AvatarProps extends ViewProps {
  *
  * @see The {@link https://uds.build/docs/components/avatar Avatar Docs} for more info
  */
-declare const Avatar: react11.ForwardRefExoticComponent<AvatarProps & react11.RefAttributes<View>>;
+declare const Avatar: react0.ForwardRefExoticComponent<AvatarProps & react0.RefAttributes<View>>;
 //#endregion
 export { Avatar, type AvatarProps };
 //# sourceMappingURL=Avatar.d.cts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.d.cts","names":[],"sources":["../../src/components/Avatar.tsx"],"sourcesContent":[],"mappings":";;;;;;;KAWK,UAAA;;AAL0C,KAQ1C,aAAA,GAHU,SAAA,GAAA,WAAA;AAAA;AAGG,KAGb,oBAAA,GAAoB,OAAA,GAAA,MAAA,GAAA,cAAA,GAAA,UAAA,GAAA,YAAA,GAAA,aAAA,GAAA,CAAA,CAAA,IAAA,EAAA,MAAA,EAAA,GAAA,MAAA,CAAA;AAAA,UASf,WAAA,SAAoB,SAAR,CAAA;EAQb;EAEG,GAAA,CAAA,EAAA,MAAA;EAEH;EAEgB,GAAA,CAAA,EAAA,MAAA;EAdK;EAAS,QAAA,CAAA,EAAA,MAAA;EA0EjC;EAAM,IAAA,CAAA,EAlEH,UAkEG;EAAA;EAAA,OAAA,CAAA,EAhEA,aAgEA;EAAA;EAAA,IAAA,CAAA,EA9DH,YA8DG;;yBA5Da;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4DnB,QAAM,~~OAAA~~,CAAA,0BAAA,cAAA,~~OAAA~~,CAAA,cAAA"}
1	+ {"version":3,"file":"Avatar.d.cts","names":[],"sources":["../../src/components/Avatar.tsx"],"sourcesContent":[],"mappings":";;;;;;;KAWK,UAAA;;AAL0C,KAQ1C,aAAA,GAHU,SAAA,GAAA,WAAA;AAAA;AAGG,KAGb,oBAAA,GAAoB,OAAA,GAAA,MAAA,GAAA,cAAA,GAAA,UAAA,GAAA,YAAA,GAAA,aAAA,GAAA,CAAA,CAAA,IAAA,EAAA,MAAA,EAAA,GAAA,MAAA,CAAA;AAAA,UASf,WAAA,SAAoB,SAAR,CAAA;EAQb;EAEG,GAAA,CAAA,EAAA,MAAA;EAEH;EAEgB,GAAA,CAAA,EAAA,MAAA;EAdK;EAAS,QAAA,CAAA,EAAA,MAAA;EA0EjC;EAAM,IAAA,CAAA,EAlEH,UAkEG;EAAA;EAAA,OAAA,CAAA,EAhEA,aAgEA;EAAA;EAAA,IAAA,CAAA,EA9DH,YA8DG;;yBA5Da;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4DnB,QAAM,MAAA,CAAA,0BAAA,cAAA,MAAA,CAAA,cAAA"}

package/dist/components/Avatar.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { IconSlotType } from "./IconSlot.mjs";
-import * as react0 from "react";
+import * as react1 from "react";
 import { View, ViewProps } from "react-native";
 //#region src/components/Avatar.d.ts
@@ -54,7 +54,7 @@ interface AvatarProps extends ViewProps {
  *
  * @see The {@link https://uds.build/docs/components/avatar Avatar Docs} for more info
  */
-declare const Avatar: react0.ForwardRefExoticComponent<AvatarProps & react0.RefAttributes<View>>;
+declare const Avatar: react1.ForwardRefExoticComponent<AvatarProps & react1.RefAttributes<View>>;
 //#endregion
 export { Avatar, type AvatarProps };
 //# sourceMappingURL=Avatar.d.mts.map

package/dist/components/Badge.d.cts CHANGED Viewed

@@ -1,7 +1,7 @@
-import { BadgeSize, BadgeVariant } from "../uds/dist/tokens/types.cjs";
+import { BadgeSize, BadgeVariant } from "../types/dist/index.cjs";
 import { IconSlotType } from "./IconSlot.cjs";
-import * as react14 from "react";
+import * as react3 from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
@@ -37,7 +37,7 @@ interface BadgeProps extends ViewProps {
  * <Badge variant="alert" startIcon="Warning">Error</Badge>
  * ```
  */
-declare const Badge: react14.NamedExoticComponent<BadgeProps>;
+declare const Badge: react3.NamedExoticComponent<BadgeProps>;
 //#endregion
 export { Badge, type BadgeProps };
 //# sourceMappingURL=Badge.d.cts.map

package/dist/components/Badge.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.d.cts","names":[],"sources":["../../src/components/Badge.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAWU,UAAA,SAAmB;;YAEjB;EAFF;EAEE,IAAA,CAAA,EAEH,SAFG;EAEH,QAAA,CAAA,EAAA,MAAA;EAIK;EACF,QAAA,CAAA,EAAA,MAAA;EAKA,SAAA,CAAA,EANE,YAMF;EAAJ,OAAA,CAAA,EALI,YAKJ;EAdqB,6BAAA,CAAA,EAAA,MAAA;EAAS,mBAAA,CAAA,EAAA,MAAA;EAgChC,yBAAK,CAAA,EAAA,MAAA;;QAlBH,IAAI;;;;;;;;;;;;;;;;;cAkBN,OAAK,~~OAAA~~,CAAA,qBAAA"}
1	+ {"version":3,"file":"Badge.d.cts","names":[],"sources":["../../src/components/Badge.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAWU,UAAA,SAAmB;;YAEjB;EAFF;EAEE,IAAA,CAAA,EAEH,SAFG;EAEH,QAAA,CAAA,EAAA,MAAA;EAIK;EACF,QAAA,CAAA,EAAA,MAAA;EAKA,SAAA,CAAA,EANE,YAMF;EAAJ,OAAA,CAAA,EALI,YAKJ;EAdqB,6BAAA,CAAA,EAAA,MAAA;EAAS,mBAAA,CAAA,EAAA,MAAA;EAgChC,yBAAK,CAAA,EAAA,MAAA;;QAlBH,IAAI;;;;;;;;;;;;;;;;;cAkBN,OAAK,MAAA,CAAA,qBAAA"}

package/dist/components/Badge.d.mts CHANGED Viewed

@@ -1,7 +1,7 @@
-import { BadgeSize, BadgeVariant } from "../uds/dist/tokens/types.mjs";
+import { BadgeSize, BadgeVariant } from "../types/dist/index.mjs";
 import { IconSlotType } from "./IconSlot.mjs";
-import * as react6 from "react";
+import * as react4 from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
@@ -37,7 +37,7 @@ interface BadgeProps extends ViewProps {
  * <Badge variant="alert" startIcon="Warning">Error</Badge>
  * ```
  */
-declare const Badge: react6.NamedExoticComponent<BadgeProps>;
+declare const Badge: react4.NamedExoticComponent<BadgeProps>;
 //#endregion
 export { Badge, type BadgeProps };
 //# sourceMappingURL=Badge.d.mts.map

package/dist/components/Badge.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.mjs","names":["Badge"],"sources":["../../src/components/Badge.tsx"],"sourcesContent":["import type { BadgeSize, BadgeVariant } from '@yahoo/uds~~/tokens~~';\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 /** @default 'primary' /\n variant?: BadgeVariant;\n /* @default 'md' /\n size?: BadgeSize;\n minWidth?: number;\n /* @default 200 /\n maxWidth?: number;\n startIcon?: IconSlotType;\n endIcon?: IconSlotType;\n dangerouslySetBackgroundColor?: string;\n dangerouslySetColor?: string;\n dangerouslySetBorderColor?: string;\n dangerouslySetIconColor?: string;\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 @example\n * ```tsx\n * import { Badge } from '~/components/ui/Badge';\n \n <Badge>Label</Badge>\n * <Badge variant=\"brand\" size=\"sm\">New</Badge>\n * <Badge variant=\"alert\" startIcon=\"Warning\">Error</Badge>\n * ```\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":";;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,QAAQ,KAAK,SAASA,QAAM,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"}
1	+ {"version":3,"file":"Badge.mjs","names":["Badge"],"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 /** @default 'primary' /\n variant?: BadgeVariant;\n /* @default 'md' /\n size?: BadgeSize;\n minWidth?: number;\n /* @default 200 /\n maxWidth?: number;\n startIcon?: IconSlotType;\n endIcon?: IconSlotType;\n dangerouslySetBackgroundColor?: string;\n dangerouslySetColor?: string;\n dangerouslySetBorderColor?: string;\n dangerouslySetIconColor?: string;\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 @example\n * ```tsx\n * import { Badge } from '~/components/ui/Badge';\n \n <Badge>Label</Badge>\n * <Badge variant=\"brand\" size=\"sm\">New</Badge>\n * <Badge variant=\"alert\" startIcon=\"Warning\">Error</Badge>\n * ```\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":";;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,QAAQ,KAAK,SAASA,QAAM,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.cjs CHANGED Viewed

@@ -16,7 +16,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 *
 * @example
 * ```tsx
-* import { Box } from '@yahoo/uds';
+* import { Box } from '@yahoo/uds-mobile/Box';
 *
 * <Box backgroundColor="primary" spacing="6">
 *   Any kind of content can go here!

package/dist/components/Box.d.cts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { SizeProps } from "../types.cjs";
-import * as react17 from "react";
+import * as react2 from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -66,7 +66,7 @@ interface BoxProps extends ViewProps, SizeProps {
  *
  * @example
  * ```tsx
- * import { Box } from '@yahoo/uds';
+ * import { Box } from '@yahoo/uds-mobile/Box';
  *
  * <Box backgroundColor="primary" spacing="6">
  *   Any kind of content can go here!
@@ -81,7 +81,7 @@ interface BoxProps extends ViewProps, SizeProps {
  *
  * @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
  */
-declare const Box: react17.NamedExoticComponent<BoxProps>;
+declare const Box: react2.NamedExoticComponent<BoxProps>;
 //#endregion
 export { Box, type BoxProps };
 //# sourceMappingURL=Box.d.cts.map

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

	@@ -1 +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,~~OAAA~~,CAAA,qBAAA"}
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"}

package/dist/components/Box.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { SizeProps } from "../types.mjs";
-import * as react10 from "react";
+import * as react3 from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -66,7 +66,7 @@ interface BoxProps extends ViewProps, SizeProps {
  *
  * @example
  * ```tsx
- * import { Box } from '@yahoo/uds';
+ * import { Box } from '@yahoo/uds-mobile/Box';
  *
  * <Box backgroundColor="primary" spacing="6">
  *   Any kind of content can go here!
@@ -81,7 +81,7 @@ interface BoxProps extends ViewProps, SizeProps {
  *
  * @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
  */
-declare const Box: react10.NamedExoticComponent<BoxProps>;
+declare const Box: react3.NamedExoticComponent<BoxProps>;
 //#endregion
 export { Box, type BoxProps };
 //# sourceMappingURL=Box.d.mts.map

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

	@@ -1 +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,~~OAAA~~,CAAA,qBAAA"}
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"}

package/dist/components/Box.mjs CHANGED Viewed

@@ -15,7 +15,7 @@ import { jsx } from "react/jsx-runtime";
 *
 * @example
 * ```tsx
-* import { Box } from '@yahoo/uds';
+* import { Box } from '@yahoo/uds-mobile/Box';
 *
 * <Box backgroundColor="primary" spacing="6">
 *   Any kind of content can go here!

package/dist/components/Box.mjs.map CHANGED Viewed

	@@ -1 +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';\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"}
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"}

package/dist/components/Button.cjs CHANGED Viewed

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_motion = require('../uds/dist/tokens/configs/motion.cjs');
-const require_motion$1 = require('../motion.cjs');
+const require_index = require('../motion-tokens/dist/index.cjs');
+const require_motion = require('../motion.cjs');
 const require_components_IconSlot = require('./IconSlot.cjs');
 const require_components_Text = require('./Text.cjs');
 const require_components_Pressable = require('./Pressable.cjs');
@@ -32,7 +32,7 @@ function interpolateShadowAlpha(shadow, alpha) {
 * Uses staggered animation: opacity waits until halfway through width animation.
 */
 function AnimatedIconSlot({ children, visible, iconSize, gap }) {
-	const progress = (0, react_native_reanimated.useDerivedValue)(() => (0, react_native_reanimated.withSpring)(visible ? 1 : 0, require_motion$1.BUTTON_SPRING_CONFIG), [visible]);
+	const progress = (0, react_native_reanimated.useDerivedValue)(() => (0, react_native_reanimated.withSpring)(visible ? 1 : 0, require_motion.BUTTON_SPRING_CONFIG), [visible]);
 	const animatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => {
 		const totalWidth = iconSize + gap;
 		return {
@@ -70,7 +70,7 @@ function AnimatedIconSlot({ children, visible, iconSize, gap }) {
 *
 * @see The {@link https://uds.build/docs/components/button Button Docs} for more info
 */
-const Button = (0, react.memo)(function Button$1({ variant = "primary", size = "md", iconVariant = "outline", startIcon, endIcon, loading, disabled, width, children, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
+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 shouldAnimate = !disableEffects;
 	const [pressed, setPressed] = (0, react.useState)(false);
 	generated_styles.buttonStyles.useVariants({
@@ -82,10 +82,10 @@ const Button = (0, react.memo)(function Button$1({ variant = "primary", size = "
 	const buttonGap = generated_styles.buttonStyles.root.gap;
 	const iconSize = generated_styles.buttonStyles.icon.fontSize;
 	const animatedTheme = (0, react_native_unistyles_reanimated.useAnimatedTheme)();
-	const scale = (0, react_native_reanimated.useSharedValue)(require_motion.SCALE_EFFECTS.none);
+	const scale = (0, react_native_reanimated.useSharedValue)(require_index.SCALE_EFFECTS.none);
 	const handlePressIn = (0, react.useCallback)((event) => {
 		setPressed(true);
-		if (shouldAnimate) scale.value = (0, react_native_reanimated.withSpring)(require_motion.SCALE_EFFECTS.down, require_motion$1.BUTTON_SPRING_CONFIG);
+		if (shouldAnimate) scale.value = (0, react_native_reanimated.withSpring)(require_index.SCALE_EFFECTS.down, require_motion.BUTTON_SPRING_CONFIG);
 		onPressIn?.(event);
 	}, [
 		shouldAnimate,
@@ -94,7 +94,7 @@ const Button = (0, react.memo)(function Button$1({ variant = "primary", size = "
 	]);
 	const handlePressOut = (0, react.useCallback)((event) => {
 		setPressed(false);
-		if (shouldAnimate) scale.value = (0, react_native_reanimated.withSpring)(require_motion.SCALE_EFFECTS.none, require_motion$1.BUTTON_SPRING_CONFIG);
+		if (shouldAnimate) scale.value = (0, react_native_reanimated.withSpring)(require_index.SCALE_EFFECTS.none, require_motion.BUTTON_SPRING_CONFIG);
 		onPressOut?.(event);
 	}, [
 		shouldAnimate,

package/dist/components/Button.d.cts CHANGED Viewed

@@ -1,9 +1,8 @@
-import { IconVariant } from "../icons/dist/types.cjs";
-import { ButtonSize, ButtonVariantFlat } from "../uds/dist/tokens/types.cjs";
+import { ButtonSize, ButtonVariantFlat, IconVariant } from "../types/dist/index.cjs";
 import { IconSlotType } from "./IconSlot.cjs";
 import { PressableProps as PressableProps$1 } from "./Pressable.cjs";
-import * as react13 from "react";
+import * as react1 from "react";
 import { Ref } from "react";
 import { View } from "react-native";
@@ -50,7 +49,7 @@ interface ButtonProps extends Omit<PressableProps$1, 'children' | 'disabled'> {
  *
  * @see The {@link https://uds.build/docs/components/button Button Docs} for more info
  */
-declare const Button: react13.NamedExoticComponent<ButtonProps>;
+declare const Button: react1.NamedExoticComponent<ButtonProps>;
 //#endregion
 export { Button, type ButtonProps };
 //# sourceMappingURL=Button.d.cts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.d.cts","names":[],"sources":["../../src/components/Button.tsx"],"sourcesContent":[],"mappings":"~~;;;;;;;;;;~~UA2GU,WAAA,SAAoB,KAAK;;YAEvB;;EAFF,IAAA,CAAA,~~EAID~~,~~UAJa~~;~~EAAa~~;~~EAEvB~~,WAAA,CAAA,~~EAII~~,~~WAJJ~~;~~EAEH~~,SAAA,CAAA,~~EAGK~~,~~YAHL~~;~~EAEO~~,OAAA,CAAA,~~EAEJ~~,~~YAFI~~;EACF,OAAA,CAAA,EAAA,OAAA;~~EACF~~,~~QAAA~~,CAAA,EAAA,OAAA;~~EAGC~~,~~QAAM~~,CAAA,~~EAAN~~,KAAA,CAAM,~~SAAA~~;~~EAMP;;;;EA8BN~~,~~cA4JJ,CAAA,EAAA,OA5JU;QA9BJ,~~IAAI;;;;;;;;;;;;;;;;;;;;;;;;;cA8BN,QAAM,~~OAAA~~,CAAA,qBAAA"}
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"}

package/dist/components/Button.d.mts CHANGED Viewed

@@ -1,9 +1,8 @@
-import { IconVariant } from "../icons/dist/types.mjs";
-import { ButtonSize, ButtonVariantFlat } from "../uds/dist/tokens/types.mjs";
+import { ButtonSize, ButtonVariantFlat, IconVariant } from "../types/dist/index.mjs";
 import { IconSlotType } from "./IconSlot.mjs";
 import { PressableProps as PressableProps$1 } from "./Pressable.mjs";
-import * as react17 from "react";
+import * as react0 from "react";
 import { Ref } from "react";
 import { View } from "react-native";
@@ -50,7 +49,7 @@ interface ButtonProps extends Omit<PressableProps$1, 'children' | 'disabled'> {
  *
  * @see The {@link https://uds.build/docs/components/button Button Docs} for more info
  */
-declare const Button: react17.NamedExoticComponent<ButtonProps>;
+declare const Button: react0.NamedExoticComponent<ButtonProps>;
 //#endregion
 export { Button, type ButtonProps };
 //# sourceMappingURL=Button.d.mts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.d.mts","names":[],"sources":["../../src/components/Button.tsx"],"sourcesContent":[],"mappings":"~~;;;;;;;;;;~~UA2GU,WAAA,SAAoB,KAAK;;YAEvB;;EAFF,IAAA,CAAA,~~EAID~~,~~UAJa~~;~~EAAa~~;~~EAEvB~~,WAAA,CAAA,~~EAII~~,~~WAJJ~~;~~EAEH~~,SAAA,CAAA,~~EAGK~~,~~YAHL~~;~~EAEO~~,OAAA,CAAA,~~EAEJ~~,~~YAFI~~;EACF,OAAA,CAAA,EAAA,OAAA;~~EACF~~,~~QAAA~~,CAAA,EAAA,OAAA;~~EAGC~~,~~QAAM~~,CAAA,~~EAAN~~,KAAA,CAAM,~~SAAA~~;~~EAMP;;;;EA8BN~~,~~cA4JJ,CAAA,EAAA,OA5JU;QA9BJ,~~IAAI;;;;;;;;;;;;;;;;;;;;;;;;;cA8BN,QAAM,~~OAAA~~,CAAA,qBAAA"}
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"}

package/dist/components/Button.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-import { SCALE_EFFECTS } from "../uds/dist/tokens/configs/motion.mjs";
+import { SCALE_EFFECTS } from "../motion-tokens/dist/index.mjs";
 import { BUTTON_SPRING_CONFIG } from "../motion.mjs";
 import { IconSlot } from "./IconSlot.mjs";
 import { Text as Text$1 } from "./Text.mjs";
@@ -68,7 +68,7 @@ function AnimatedIconSlot({ children, visible, iconSize, gap }) {
 *
 * @see The {@link https://uds.build/docs/components/button Button Docs} for more info
 */
-const Button = memo(function Button$1({ variant = "primary", size = "md", iconVariant = "outline", startIcon, endIcon, loading, disabled, width, children, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
+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 shouldAnimate = !disableEffects;
 	const [pressed, setPressed] = useState(false);
 	buttonStyles.useVariants({

package/dist/components/Button.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.mjs","names":["Button","Text"],"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonSize, ButtonVariantFlat, IconVariant } from '@yahoo/uds/tokens';\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,\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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"}
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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"}

package/dist/components/Checkbox.cjs CHANGED Viewed

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_motion = require('../uds/dist/tokens/configs/motion.cjs');
-const require_motion$1 = require('../motion.cjs');
+const require_index = require('../motion-tokens/dist/index.cjs');
+const require_motion = require('../motion.cjs');
 const require_components_Icon = require('./Icon.cjs');
 const require_components_Text = require('./Text.cjs');
 const require_components_HStack = require('./HStack.cjs');
@@ -56,8 +56,8 @@ const Checkbox = (0, react.memo)(function Checkbox$1({ label, labelPosition = "s
 	const iconName = valueState === "indeterminate" ? "Minus" : "Check";
 	const showIcon = valueState !== "unchecked";
 	const shouldAnimate = !reduceMotion;
-	const scaleProgress = (0, react_native_reanimated.useDerivedValue)(() => shouldAnimate ? (0, react_native_reanimated.withSpring)(pressed ? require_motion.SCALE_EFFECTS.down : require_motion.SCALE_EFFECTS.none, require_motion$1.BUTTON_SPRING_CONFIG) : require_motion.SCALE_EFFECTS.none, [pressed, shouldAnimate]);
-	const iconProgress = (0, react_native_reanimated.useDerivedValue)(() => shouldAnimate ? (0, react_native_reanimated.withSpring)(showIcon ? 1 : 0, require_motion$1.BUTTON_SPRING_CONFIG) : showIcon ? 1 : 0, [showIcon, shouldAnimate]);
+	const scaleProgress = (0, react_native_reanimated.useDerivedValue)(() => shouldAnimate ? (0, react_native_reanimated.withSpring)(pressed ? require_index.SCALE_EFFECTS.down : require_index.SCALE_EFFECTS.none, require_motion.BUTTON_SPRING_CONFIG) : require_index.SCALE_EFFECTS.none, [pressed, shouldAnimate]);
+	const iconProgress = (0, react_native_reanimated.useDerivedValue)(() => shouldAnimate ? (0, react_native_reanimated.withSpring)(showIcon ? 1 : 0, require_motion.BUTTON_SPRING_CONFIG) : showIcon ? 1 : 0, [showIcon, shouldAnimate]);
 	const checkboxAnimatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({ transform: [{ scale: scaleProgress.value }] }));
 	const iconAnimatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({
 		opacity: (0, react_native_reanimated.interpolate)(iconProgress.value, [0, 1], [0, 1]),

package/dist/components/Checkbox.d.cts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { UniversalCheckboxProps } from "../uds/dist/tokens/types.cjs";
+import { UniversalCheckboxProps } from "../types/dist/index.cjs";
 import * as react4 from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";

package/dist/components/Checkbox.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { UniversalCheckboxProps } from "../uds/dist/tokens/types.mjs";
-import * as react9 from "react";
+import { UniversalCheckboxProps } from "../types/dist/index.mjs";
+import * as react6 from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
@@ -42,7 +42,7 @@ interface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps
  *
  * @see The {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info
  */
-declare const Checkbox: react9.NamedExoticComponent<CheckboxProps>;
+declare const Checkbox: react6.NamedExoticComponent<CheckboxProps>;
 //#endregion
 export { Checkbox, type CheckboxProps };
 //# sourceMappingURL=Checkbox.d.mts.map

package/dist/components/Checkbox.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-import { SCALE_EFFECTS } from "../uds/dist/tokens/configs/motion.mjs";
+import { SCALE_EFFECTS } from "../motion-tokens/dist/index.mjs";
 import { BUTTON_SPRING_CONFIG } from "../motion.mjs";
 import { Icon } from "./Icon.mjs";
 import { Text } from "./Text.mjs";

package/dist/components/Checkbox.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.mjs","names":["VARIANT_ERROR_MAP: Record<CheckboxVariant, CheckboxStyleVariant>","Checkbox","valueState: CheckboxValueState","styleVariant: CheckboxStyleVariant"],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["import type { CheckboxValue, CheckboxVariant, UniversalCheckboxProps } from '@yahoo/uds/tokens';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport Animated, {\n interpolate,\n useAnimatedStyle,\n useDerivedValue,\n withSpring,\n} from 'react-native-reanimated';\n\nimport { checkboxStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { HStack } from './HStack';\nimport { Icon } from './Icon';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- /\n/ Types /\n/ -------------------------------------------------------------------------- /\n\n/* Derived from CheckboxValue - maps boolean to 'checked'/'unchecked' string literals /\ntype CheckboxValueState = Exclude<CheckboxValue, boolean> \| 'checked' \| 'unchecked';\n\ninterface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps {\n ref?: Ref<View>;\n /* Default checked state for uncontrolled mode /\n defaultChecked?: boolean;\n /* Whether the checkbox is disabled /\n disabled?: boolean;\n /* Whether the checkbox is required /\n required?: boolean;\n /* Callback fired when the checked state changes /\n onChange?: (checked: boolean) => void;\n}\n\n/ -------------------------------------------------------------------------- /\n/ Variant Mapping /\n/ -------------------------------------------------------------------------- /\n\n/* All style variants available in the generated styles (includes error variants) /\ntype CheckboxStyleVariant = 'primary' \| 'secondary' \| 'alert' \| 'alert-secondary';\n\nconst VARIANT_ERROR_MAP: Record<CheckboxVariant, CheckboxStyleVariant> = {\n primary: 'alert',\n secondary: 'alert-secondary',\n};\n\n/ -------------------------------------------------------------------------- /\n/ Checkbox Component /\n/ -------------------------------------------------------------------------- /\n\n/\n ⚙️ A checkbox component\n \n @componentType Client component\n \n @description\n * A checkbox component allows users to select one or multiple options from a set.\n * It represents a binary state, typically as checked or unchecked, and optionally\n * includes a third \"indeterminate\" state to indicate partial selection.\n \n @example\n * ```tsx\n * import { Checkbox } from '@yahoo/uds-mobile';\n \n <Checkbox label=\"Agree to terms\" />\n * <Checkbox label=\"Subscribe\" checked={true} onChange={setChecked} />\n * <Checkbox label=\"Partial\" checked=\"indeterminate\" />\n * ```\n \n @usage\n * - Forms: For selecting options\n * - Settings: For toggling preferences\n * - Filters: For multi-select filtering\n \n @see The {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info\n /\nconst Checkbox = memo(function Checkbox({\n // Checkbox props\n label,\n labelPosition = 'start',\n variant: variantProp = 'primary',\n size = 'md',\n checked: checkedProp,\n hasError,\n reduceMotion,\n // Native props\n defaultChecked,\n disabled,\n required,\n onChange,\n ref,\n ...viewProps\n}: CheckboxProps) {\n const generatedId = useId();\n const uid = `uds-checkbox-${generatedId}`;\n\n / --------------------------------- State ---------------------------------- /\n const isControlled = checkedProp !== undefined;\n const [internalChecked, setInternalChecked] = useState<CheckboxValue>(\n isControlled ? checkedProp : (defaultChecked ?? false),\n );\n const [pressed, setPressed] = useState(false);\n\n // Use controlled value if provided, otherwise use internal state\n const checked = isControlled ? checkedProp : internalChecked;\n\n / ------------------------------ Derived Values ---------------------------- /\n const valueState: CheckboxValueState = useMemo(() => {\n if (checked === 'indeterminate') {\n return 'indeterminate';\n }\n return checked ? 'checked' : 'unchecked';\n }, [checked]);\n\n const iconName = valueState === 'indeterminate' ? 'Minus' : 'Check';\n const showIcon = valueState !== 'unchecked';\n\n / -------------------------------- Animation ------------------------------- /\n const shouldAnimate = !reduceMotion;\n\n // Scale animation for press feedback (disabled when reduceMotion is true)\n const scaleProgress = useDerivedValue(\n () =>\n shouldAnimate\n ? withSpring(pressed ? SCALE_EFFECTS.down : SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG)\n : SCALE_EFFECTS.none, // No scale effect when reduceMotion is true\n [pressed, shouldAnimate],\n );\n\n // Icon visibility animation\n // When reduceMotion is true, still show/hide the icon but without animation\n const iconProgress = useDerivedValue(\n () => (shouldAnimate ? withSpring(showIcon ? 1 : 0, BUTTON_SPRING_CONFIG) : showIcon ? 1 : 0),\n [showIcon, shouldAnimate],\n );\n\n const checkboxAnimatedStyle = useAnimatedStyle(() => ({\n transform: [{ scale: scaleProgress.value }],\n }));\n\n const iconAnimatedStyle = useAnimatedStyle(() => ({\n opacity: interpolate(iconProgress.value, [0, 1], [0, 1]),\n transform: [{ scale: interpolate(iconProgress.value, [0, 1], [0.5, 1]) }],\n }));\n\n / -------------------------------- Handlers -------------------------------- /\n const handlePress = useCallback(() => {\n if (disabled) {\n return;\n }\n\n const newChecked = checked === 'indeterminate' ? true : !checked;\n\n if (!isControlled) {\n setInternalChecked(newChecked);\n }\n\n onChange?.(newChecked);\n }, [disabled, checked, isControlled, onChange]);\n\n const handlePressIn = useCallback(() => {\n setPressed(true);\n }, []);\n\n const handlePressOut = useCallback(() => {\n setPressed(false);\n }, []);\n\n / --------------------------------- Styles --------------------------------- /\n // Compute the style variant (primary/secondary maps to alert variants when hasError)\n const styleVariant: CheckboxStyleVariant = hasError\n ? VARIANT_ERROR_MAP[variantProp]\n : variantProp;\n\n checkboxStyles.useVariants({\n size,\n variant: styleVariant, // primary, secondary, alert, alert-secondary\n value: valueState, // checked, unchecked, indeterminate\n disabled,\n pressed,\n });\n\n const rootStyle = useMemo(\n () => [checkboxStyles.root, { opacity: disabled ? 0.5 : 1 }],\n [checkboxStyles.root, disabled],\n );\n\n const checkboxBoxStyle = useMemo(\n () => [\n checkboxStyles.checkbox,\n { alignItems: 'center' as const, justifyContent: 'center' as const },\n checkboxAnimatedStyle,\n ],\n [checkboxStyles.checkbox, checkboxAnimatedStyle],\n );\n\n / ---------------------------- Render Helpers ------------------------------ /\n const labelContent = useMemo(() => {\n if (!label) {\n return null;\n }\n\n const content =\n typeof label === 'function' ? label() : isValidElement(label) ? label : String(label);\n\n const textContent =\n typeof content === 'string' ? <Text style={checkboxStyles.text}>{content}</Text> : content;\n\n if (required) {\n return (\n <HStack columnGap=\"1\" alignItems=\"flex-start\">\n {textContent}\n <Text style={checkboxStyles.text}></Text>\n </HStack>\n );\n }\n\n return textContent;\n }, [label, required, checkboxStyles.text]);\n\n const a11yState = useMemo(\n () => ({\n disabled,\n checked:\n valueState === 'checked'\n ? true\n : valueState === 'indeterminate'\n ? ('mixed' as const)\n : false,\n }),\n [disabled, valueState],\n );\n\n /* --------------------------------- Render --------------------------------- */\n return (\n <Pressable\n ref={ref}\n nativeID={uid}\n onPress={handlePress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n disabled={disabled}\n flexDirection={labelPosition === 'start' ? 'row' : 'row-reverse'}\n alignItems=\"center\"\n alignSelf=\"flex-start\"\n accessibilityRole=\"checkbox\"\n accessibilityState={a11yState}\n accessibilityLabel={typeof label === 'string' ? label : undefined}\n {...viewProps}\n style={rootStyle}\n >\n <Animated.View style={checkboxBoxStyle}>\n <Animated.View style={iconAnimatedStyle}>\n <Icon name={iconName} size=\"sm\" style={checkboxStyles.checkboxIcon} />\n </Animated.View>\n </Animated.View>\n\n {labelContent}\n </Pressable>\n );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, type CheckboxProps };\n"],"mappings":"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"}
1	+ {"version":3,"file":"Checkbox.mjs","names":["VARIANT_ERROR_MAP: Record<CheckboxVariant, CheckboxStyleVariant>","Checkbox","valueState: CheckboxValueState","styleVariant: CheckboxStyleVariant"],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["import type { CheckboxValue, CheckboxVariant, UniversalCheckboxProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport Animated, {\n interpolate,\n useAnimatedStyle,\n useDerivedValue,\n withSpring,\n} from 'react-native-reanimated';\n\nimport { checkboxStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { HStack } from './HStack';\nimport { Icon } from './Icon';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- /\n/ Types /\n/ -------------------------------------------------------------------------- /\n\n/* Derived from CheckboxValue - maps boolean to 'checked'/'unchecked' string literals /\ntype CheckboxValueState = Exclude<CheckboxValue, boolean> \| 'checked' \| 'unchecked';\n\ninterface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps {\n ref?: Ref<View>;\n /* Default checked state for uncontrolled mode /\n defaultChecked?: boolean;\n /* Whether the checkbox is disabled /\n disabled?: boolean;\n /* Whether the checkbox is required /\n required?: boolean;\n /* Callback fired when the checked state changes /\n onChange?: (checked: boolean) => void;\n}\n\n/ -------------------------------------------------------------------------- /\n/ Variant Mapping /\n/ -------------------------------------------------------------------------- /\n\n/* All style variants available in the generated styles (includes error variants) /\ntype CheckboxStyleVariant = 'primary' \| 'secondary' \| 'alert' \| 'alert-secondary';\n\nconst VARIANT_ERROR_MAP: Record<CheckboxVariant, CheckboxStyleVariant> = {\n primary: 'alert',\n secondary: 'alert-secondary',\n};\n\n/ -------------------------------------------------------------------------- /\n/ Checkbox Component /\n/ -------------------------------------------------------------------------- /\n\n/\n ⚙️ A checkbox component\n \n @componentType Client component\n \n @description\n * A checkbox component allows users to select one or multiple options from a set.\n * It represents a binary state, typically as checked or unchecked, and optionally\n * includes a third \"indeterminate\" state to indicate partial selection.\n \n @example\n * ```tsx\n * import { Checkbox } from '@yahoo/uds-mobile';\n \n <Checkbox label=\"Agree to terms\" />\n * <Checkbox label=\"Subscribe\" checked={true} onChange={setChecked} />\n * <Checkbox label=\"Partial\" checked=\"indeterminate\" />\n * ```\n \n @usage\n * - Forms: For selecting options\n * - Settings: For toggling preferences\n * - Filters: For multi-select filtering\n \n @see The {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info\n /\nconst Checkbox = memo(function Checkbox({\n // Checkbox props\n label,\n labelPosition = 'start',\n variant: variantProp = 'primary',\n size = 'md',\n checked: checkedProp,\n hasError,\n reduceMotion,\n // Native props\n defaultChecked,\n disabled,\n required,\n onChange,\n ref,\n ...viewProps\n}: CheckboxProps) {\n const generatedId = useId();\n const uid = `uds-checkbox-${generatedId}`;\n\n / --------------------------------- State ---------------------------------- /\n const isControlled = checkedProp !== undefined;\n const [internalChecked, setInternalChecked] = useState<CheckboxValue>(\n isControlled ? checkedProp : (defaultChecked ?? false),\n );\n const [pressed, setPressed] = useState(false);\n\n // Use controlled value if provided, otherwise use internal state\n const checked = isControlled ? checkedProp : internalChecked;\n\n / ------------------------------ Derived Values ---------------------------- /\n const valueState: CheckboxValueState = useMemo(() => {\n if (checked === 'indeterminate') {\n return 'indeterminate';\n }\n return checked ? 'checked' : 'unchecked';\n }, [checked]);\n\n const iconName = valueState === 'indeterminate' ? 'Minus' : 'Check';\n const showIcon = valueState !== 'unchecked';\n\n / -------------------------------- Animation ------------------------------- /\n const shouldAnimate = !reduceMotion;\n\n // Scale animation for press feedback (disabled when reduceMotion is true)\n const scaleProgress = useDerivedValue(\n () =>\n shouldAnimate\n ? withSpring(pressed ? SCALE_EFFECTS.down : SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG)\n : SCALE_EFFECTS.none, // No scale effect when reduceMotion is true\n [pressed, shouldAnimate],\n );\n\n // Icon visibility animation\n // When reduceMotion is true, still show/hide the icon but without animation\n const iconProgress = useDerivedValue(\n () => (shouldAnimate ? withSpring(showIcon ? 1 : 0, BUTTON_SPRING_CONFIG) : showIcon ? 1 : 0),\n [showIcon, shouldAnimate],\n );\n\n const checkboxAnimatedStyle = useAnimatedStyle(() => ({\n transform: [{ scale: scaleProgress.value }],\n }));\n\n const iconAnimatedStyle = useAnimatedStyle(() => ({\n opacity: interpolate(iconProgress.value, [0, 1], [0, 1]),\n transform: [{ scale: interpolate(iconProgress.value, [0, 1], [0.5, 1]) }],\n }));\n\n / -------------------------------- Handlers -------------------------------- /\n const handlePress = useCallback(() => {\n if (disabled) {\n return;\n }\n\n const newChecked = checked === 'indeterminate' ? true : !checked;\n\n if (!isControlled) {\n setInternalChecked(newChecked);\n }\n\n onChange?.(newChecked);\n }, [disabled, checked, isControlled, onChange]);\n\n const handlePressIn = useCallback(() => {\n setPressed(true);\n }, []);\n\n const handlePressOut = useCallback(() => {\n setPressed(false);\n }, []);\n\n / --------------------------------- Styles --------------------------------- /\n // Compute the style variant (primary/secondary maps to alert variants when hasError)\n const styleVariant: CheckboxStyleVariant = hasError\n ? VARIANT_ERROR_MAP[variantProp]\n : variantProp;\n\n checkboxStyles.useVariants({\n size,\n variant: styleVariant, // primary, secondary, alert, alert-secondary\n value: valueState, // checked, unchecked, indeterminate\n disabled,\n pressed,\n });\n\n const rootStyle = useMemo(\n () => [checkboxStyles.root, { opacity: disabled ? 0.5 : 1 }],\n [checkboxStyles.root, disabled],\n );\n\n const checkboxBoxStyle = useMemo(\n () => [\n checkboxStyles.checkbox,\n { alignItems: 'center' as const, justifyContent: 'center' as const },\n checkboxAnimatedStyle,\n ],\n [checkboxStyles.checkbox, checkboxAnimatedStyle],\n );\n\n / ---------------------------- Render Helpers ------------------------------ /\n const labelContent = useMemo(() => {\n if (!label) {\n return null;\n }\n\n const content =\n typeof label === 'function' ? label() : isValidElement(label) ? label : String(label);\n\n const textContent =\n typeof content === 'string' ? <Text style={checkboxStyles.text}>{content}</Text> : content;\n\n if (required) {\n return (\n <HStack columnGap=\"1\" alignItems=\"flex-start\">\n {textContent}\n <Text style={checkboxStyles.text}></Text>\n </HStack>\n );\n }\n\n return textContent;\n }, [label, required, checkboxStyles.text]);\n\n const a11yState = useMemo(\n () => ({\n disabled,\n checked:\n valueState === 'checked'\n ? true\n : valueState === 'indeterminate'\n ? ('mixed' as const)\n : false,\n }),\n [disabled, valueState],\n );\n\n /* --------------------------------- Render --------------------------------- */\n return (\n <Pressable\n ref={ref}\n nativeID={uid}\n onPress={handlePress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n disabled={disabled}\n flexDirection={labelPosition === 'start' ? 'row' : 'row-reverse'}\n alignItems=\"center\"\n alignSelf=\"flex-start\"\n accessibilityRole=\"checkbox\"\n accessibilityState={a11yState}\n accessibilityLabel={typeof label === 'string' ? label : undefined}\n {...viewProps}\n style={rootStyle}\n >\n <Animated.View style={checkboxBoxStyle}>\n <Animated.View style={iconAnimatedStyle}>\n <Icon name={iconName} size=\"sm\" style={checkboxStyles.checkboxIcon} />\n </Animated.View>\n </Animated.View>\n\n {labelContent}\n </Pressable>\n );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, type CheckboxProps };\n"],"mappings":"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"}

package/dist/components/Chip.d.cts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { ChipSize, ChipVariant } from "../uds/dist/tokens/types.cjs";
+import { ChipSize, ChipVariant } from "../types/dist/index.cjs";
 import { IconSlotType } from "./IconSlot.cjs";
 import * as react5 from "react";
 import { Ref } from "react";

package/dist/components/Chip.d.mts CHANGED Viewed

@@ -1,7 +1,7 @@
-import { ChipSize, ChipVariant } from "../uds/dist/tokens/types.mjs";
+import { ChipSize, ChipVariant } from "../types/dist/index.mjs";
 import { IconSlotType } from "./IconSlot.mjs";
-import * as react3 from "react";
+import * as react0 from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
@@ -54,7 +54,7 @@ interface ChipProps extends Omit<ViewProps, 'children'> {
  * <Chip startIcon="Star" variant="brand">Favorite</Chip>
  * ```
  */
-declare const Chip: react3.NamedExoticComponent<ChipProps>;
+declare const Chip: react0.NamedExoticComponent<ChipProps>;
 //#endregion
 export { Chip, type ChipProps };
 //# sourceMappingURL=Chip.d.mts.map