@yahoo/uds-mobile 1.0.0

package/dist/components/Screen.cjs

@@ -0,0 +1,89 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_components_HStack = require('./HStack.cjs');
+const require_components_VStack = require('./VStack.cjs');
+let react = require("react");
+let react_native = require("react-native");
+let generated_styles = require("../../generated/styles");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_native_unistyles = require("react-native-unistyles");
+
+//#region src/components/Screen.tsx
+/**
+* **📱 A screen container with safe area handling**
+*
+* @description
+* A scrollable screen component that handles safe area insets and provides
+* consistent padding and background styling. Uses Unistyles' built-in
+* safe area insets via the `rt` runtime object.
+*
+* @example
+* ```tsx
+* import { Screen } from '@yahoo/uds-mobile';
+*
+* <Screen backgroundColor="primary" spacingHorizontal="6">
+*   <Text>Screen content</Text>
+* </Screen>
+*
+* // With sticky header
+* <Screen
+*   stickyHeader={<Text>Header</Text>}
+*   stickyHeaderProps={{ backgroundColor: 'secondary' }}
+* >
+*   <Text>Content</Text>
+* </Screen>
+* ```
+*
+* @usage
+* - Use as the root component for screens
+* - Use stickyHeader for persistent header content
+* - Content is automatically scrollable
+*
+* @see The {@link https://uds.build/docs/components/screen Screen Docs} for more info
+*/
+const Screen = (0, react.memo)(function Screen$1({ children, backgroundColor = "primary", spacingHorizontal = "6", spacingTop = "6", gap, stickyHeader, stickyHeaderProps, style, ref, ...props }) {
+	const { style: stickyHeaderStyle, ...stickyHeaderPropsWithoutStyle } = stickyHeaderProps ?? {};
+	generated_styles.styles.useVariants({
+		backgroundColor,
+		flex: "1",
+		flexDirection: "column",
+		columnGap: gap
+	});
+	const scrollStyles = (0, react.useMemo)(() => [generated_styles.styles.foundation, style], [generated_styles.styles.foundation, style]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_VStack.VStack, {
+		backgroundColor: "primary",
+		style: screenStyles.wrapper,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.ScrollView, {
+			ref,
+			style: scrollStyles,
+			stickyHeaderIndices: stickyHeader ? [0] : void 0,
+			...props,
+			children: [stickyHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_HStack.HStack, {
+				spacingHorizontal: "6",
+				spacingBottom: "4",
+				backgroundColor: "primary",
+				justifyContent: "flex-end",
+				style: stickyHeaderStyle,
+				...stickyHeaderPropsWithoutStyle,
+				children: stickyHeader
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_VStack.VStack, {
+				flex: "1",
+				spacingHorizontal,
+				spacingTop,
+				gap,
+				children
+			})]
+		})
+	});
+});
+Screen.displayName = "Screen";
+const screenStyles = react_native_unistyles.StyleSheet.create((_theme, rt) => ({ wrapper: {
+	flex: 1,
+	paddingTop: rt.insets.top,
+	paddingBottom: rt.insets.bottom,
+	paddingLeft: rt.insets.left,
+	paddingRight: rt.insets.right
+} }));
+
+//#endregion
+exports.Screen = Screen;

package/dist/components/Screen.d.cts

@@ -0,0 +1,53 @@
+
+import { HStackProps } from "./HStack.cjs";
+import * as react1 from "react";
+import { ReactNode, Ref } from "react";
+import { ScrollView, ScrollViewProps } from "react-native";
+import { StyleProps } from "../../generated/styles";
+
+//#region src/components/Screen.d.ts
+interface ScreenProps extends ScrollViewProps {
+  ref?: Ref<ScrollView>;
+  backgroundColor?: StyleProps['backgroundColor'];
+  spacingHorizontal?: StyleProps['spacingHorizontal'];
+  spacingTop?: StyleProps['spacingTop'];
+  gap?: StyleProps['columnGap'];
+  stickyHeader?: ReactNode;
+  stickyHeaderProps?: HStackProps;
+}
+/**
+ * **📱 A screen container with safe area handling**
+ *
+ * @description
+ * A scrollable screen component that handles safe area insets and provides
+ * consistent padding and background styling. Uses Unistyles' built-in
+ * safe area insets via the `rt` runtime object.
+ *
+ * @example
+ * ```tsx
+ * import { Screen } from '@yahoo/uds-mobile';
+ *
+ * <Screen backgroundColor="primary" spacingHorizontal="6">
+ *   <Text>Screen content</Text>
+ * </Screen>
+ *
+ * // With sticky header
+ * <Screen
+ *   stickyHeader={<Text>Header</Text>}
+ *   stickyHeaderProps={{ backgroundColor: 'secondary' }}
+ * >
+ *   <Text>Content</Text>
+ * </Screen>
+ * ```
+ *
+ * @usage
+ * - Use as the root component for screens
+ * - Use stickyHeader for persistent header content
+ * - Content is automatically scrollable
+ *
+ * @see The {@link https://uds.build/docs/components/screen Screen Docs} for more info
+ */
+declare const Screen: react1.NamedExoticComponent<ScreenProps>;
+//#endregion
+export { Screen, type ScreenProps };
+//# sourceMappingURL=Screen.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Screen.d.cts","names":[],"sources":["../../src/components/Screen.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAYU,WAAA,SAAoB;QACtB,IAAI;EADF,eAAY,CAAA,EAGF,UAHE,CAAA,iBAAA,CAAA;EACV,iBAAA,CAAA,EAIU,UAJV,CAAA,mBAAA,CAAA;EAAJ,UAAA,CAAA,EAKO,UALP,CAAA,YAAA,CAAA;EAEY,GAAA,CAAA,EAIZ,UAJY,CAAA,WAAA,CAAA;EAEE,YAAA,CAAA,EAIL,SAJK;EACP,iBAAA,CAAA,EAIO,WAJP;;;;;;AAN8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA6CvC,QAAM,MAAA,CAAA,qBAAA"}

package/dist/components/Screen.d.mts

@@ -0,0 +1,53 @@
+
+import { HStackProps } from "./HStack.mjs";
+import * as react14 from "react";
+import { ReactNode, Ref } from "react";
+import { ScrollView, ScrollViewProps } from "react-native";
+import { StyleProps } from "../../generated/styles";
+
+//#region src/components/Screen.d.ts
+interface ScreenProps extends ScrollViewProps {
+  ref?: Ref<ScrollView>;
+  backgroundColor?: StyleProps['backgroundColor'];
+  spacingHorizontal?: StyleProps['spacingHorizontal'];
+  spacingTop?: StyleProps['spacingTop'];
+  gap?: StyleProps['columnGap'];
+  stickyHeader?: ReactNode;
+  stickyHeaderProps?: HStackProps;
+}
+/**
+ * **📱 A screen container with safe area handling**
+ *
+ * @description
+ * A scrollable screen component that handles safe area insets and provides
+ * consistent padding and background styling. Uses Unistyles' built-in
+ * safe area insets via the `rt` runtime object.
+ *
+ * @example
+ * ```tsx
+ * import { Screen } from '@yahoo/uds-mobile';
+ *
+ * <Screen backgroundColor="primary" spacingHorizontal="6">
+ *   <Text>Screen content</Text>
+ * </Screen>
+ *
+ * // With sticky header
+ * <Screen
+ *   stickyHeader={<Text>Header</Text>}
+ *   stickyHeaderProps={{ backgroundColor: 'secondary' }}
+ * >
+ *   <Text>Content</Text>
+ * </Screen>
+ * ```
+ *
+ * @usage
+ * - Use as the root component for screens
+ * - Use stickyHeader for persistent header content
+ * - Content is automatically scrollable
+ *
+ * @see The {@link https://uds.build/docs/components/screen Screen Docs} for more info
+ */
+declare const Screen: react14.NamedExoticComponent<ScreenProps>;
+//#endregion
+export { Screen, type ScreenProps };
+//# sourceMappingURL=Screen.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Screen.d.mts","names":[],"sources":["../../src/components/Screen.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAYU,WAAA,SAAoB;QACtB,IAAI;EADF,eAAY,CAAA,EAGF,UAHE,CAAA,iBAAA,CAAA;EACV,iBAAA,CAAA,EAIU,UAJV,CAAA,mBAAA,CAAA;EAAJ,UAAA,CAAA,EAKO,UALP,CAAA,YAAA,CAAA;EAEY,GAAA,CAAA,EAIZ,UAJY,CAAA,WAAA,CAAA;EAEE,YAAA,CAAA,EAIL,SAJK;EACP,iBAAA,CAAA,EAIO,WAJP;;;;;;AAN8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA6CvC,QAAM,OAAA,CAAA,qBAAA"}

package/dist/components/Screen.mjs

@@ -0,0 +1,89 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { HStack } from "./HStack.mjs";
+import { VStack } from "./VStack.mjs";
+import { memo, useMemo } from "react";
+import { ScrollView } from "react-native";
+import { styles } from "../../generated/styles";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { StyleSheet } from "react-native-unistyles";
+
+//#region src/components/Screen.tsx
+/**
+* **📱 A screen container with safe area handling**
+*
+* @description
+* A scrollable screen component that handles safe area insets and provides
+* consistent padding and background styling. Uses Unistyles' built-in
+* safe area insets via the `rt` runtime object.
+*
+* @example
+* ```tsx
+* import { Screen } from '@yahoo/uds-mobile';
+*
+* <Screen backgroundColor="primary" spacingHorizontal="6">
+*   <Text>Screen content</Text>
+* </Screen>
+*
+* // With sticky header
+* <Screen
+*   stickyHeader={<Text>Header</Text>}
+*   stickyHeaderProps={{ backgroundColor: 'secondary' }}
+* >
+*   <Text>Content</Text>
+* </Screen>
+* ```
+*
+* @usage
+* - Use as the root component for screens
+* - Use stickyHeader for persistent header content
+* - Content is automatically scrollable
+*
+* @see The {@link https://uds.build/docs/components/screen Screen Docs} for more info
+*/
+const Screen = memo(function Screen$1({ children, backgroundColor = "primary", spacingHorizontal = "6", spacingTop = "6", gap, stickyHeader, stickyHeaderProps, style, ref, ...props }) {
+	const { style: stickyHeaderStyle, ...stickyHeaderPropsWithoutStyle } = stickyHeaderProps ?? {};
+	styles.useVariants({
+		backgroundColor,
+		flex: "1",
+		flexDirection: "column",
+		columnGap: gap
+	});
+	const scrollStyles = useMemo(() => [styles.foundation, style], [styles.foundation, style]);
+	return /* @__PURE__ */ jsx(VStack, {
+		backgroundColor: "primary",
+		style: screenStyles.wrapper,
+		children: /* @__PURE__ */ jsxs(ScrollView, {
+			ref,
+			style: scrollStyles,
+			stickyHeaderIndices: stickyHeader ? [0] : void 0,
+			...props,
+			children: [stickyHeader && /* @__PURE__ */ jsx(HStack, {
+				spacingHorizontal: "6",
+				spacingBottom: "4",
+				backgroundColor: "primary",
+				justifyContent: "flex-end",
+				style: stickyHeaderStyle,
+				...stickyHeaderPropsWithoutStyle,
+				children: stickyHeader
+			}), /* @__PURE__ */ jsx(VStack, {
+				flex: "1",
+				spacingHorizontal,
+				spacingTop,
+				gap,
+				children
+			})]
+		})
+	});
+});
+Screen.displayName = "Screen";
+const screenStyles = StyleSheet.create((_theme, rt) => ({ wrapper: {
+	flex: 1,
+	paddingTop: rt.insets.top,
+	paddingBottom: rt.insets.bottom,
+	paddingLeft: rt.insets.left,
+	paddingRight: rt.insets.right
+} }));
+
+//#endregion
+export { Screen };
+//# sourceMappingURL=Screen.mjs.map

package/dist/components/Screen.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Screen.mjs","names":["Screen"],"sources":["../../src/components/Screen.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { ScrollViewProps, ViewProps } from 'react-native';\nimport { ScrollView } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport type { HStackProps } from './HStack';\nimport { HStack } from './HStack';\nimport { VStack } from './VStack';\n\ninterface ScreenProps extends ScrollViewProps {\n  ref?: Ref<ScrollView>;\n  // Background\n  backgroundColor?: StyleProps['backgroundColor'];\n  // Spacing\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingTop?: StyleProps['spacingTop'];\n  gap?: StyleProps['columnGap'];\n  // Header\n  stickyHeader?: ReactNode;\n  stickyHeaderProps?: HStackProps;\n}\n\n/**\n * **📱 A screen container with safe area handling**\n *\n * @description\n * A scrollable screen component that handles safe area insets and provides\n * consistent padding and background styling. Uses Unistyles' built-in\n * safe area insets via the `rt` runtime object.\n *\n * @example\n * ```tsx\n * import { Screen } from '@yahoo/uds-mobile';\n *\n * <Screen backgroundColor=\"primary\" spacingHorizontal=\"6\">\n *   <Text>Screen content</Text>\n * </Screen>\n *\n * // With sticky header\n * <Screen\n *   stickyHeader={<Text>Header</Text>}\n *   stickyHeaderProps={{ backgroundColor: 'secondary' }}\n * >\n *   <Text>Content</Text>\n * </Screen>\n * ```\n *\n * @usage\n * - Use as the root component for screens\n * - Use stickyHeader for persistent header content\n * - Content is automatically scrollable\n *\n * @see The {@link https://uds.build/docs/components/screen Screen Docs} for more info\n */\nconst Screen = memo(function Screen({\n  children,\n  // Background\n  backgroundColor = 'primary',\n  // Spacing\n  spacingHorizontal = '6',\n  spacingTop = '6',\n  gap,\n  // Header\n  stickyHeader,\n  stickyHeaderProps,\n  style,\n  ref,\n  ...props\n}: ScreenProps) {\n  const { style: stickyHeaderStyle, ...stickyHeaderPropsWithoutStyle } = stickyHeaderProps ?? {};\n\n  styles.useVariants({\n    backgroundColor,\n    flex: '1',\n    flexDirection: 'column',\n    columnGap: gap,\n  });\n\n  // styles.foundation must be in deps - it returns a new reference when variants change\n  const scrollStyles = useMemo(\n    () => [styles.foundation as ViewProps['style'], style],\n    [styles.foundation, style],\n  );\n\n  return (\n    <VStack backgroundColor=\"primary\" style={screenStyles.wrapper}>\n      <ScrollView\n        ref={ref}\n        style={scrollStyles}\n        stickyHeaderIndices={stickyHeader ? [0] : undefined}\n        {...props}\n      >\n        {stickyHeader && (\n          <HStack\n            spacingHorizontal=\"6\"\n            spacingBottom=\"4\"\n            backgroundColor=\"primary\"\n            justifyContent=\"flex-end\"\n            style={stickyHeaderStyle}\n            {...stickyHeaderPropsWithoutStyle}\n          >\n            {stickyHeader}\n          </HStack>\n        )}\n        <VStack flex=\"1\" spacingHorizontal={spacingHorizontal} spacingTop={spacingTop} gap={gap}>\n          {children}\n        </VStack>\n      </ScrollView>\n    </VStack>\n  );\n});\n\nScreen.displayName = 'Screen';\n\nconst screenStyles = StyleSheet.create((_theme, rt) => ({\n  wrapper: {\n    flex: 1, // apply insets to the container,\n    // so it will add required paddings\n    paddingTop: rt.insets.top,\n    paddingBottom: rt.insets.bottom,\n    paddingLeft: rt.insets.left,\n    paddingRight: rt.insets.right,\n  },\n}));\n\nexport { Screen, type ScreenProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,MAAM,SAAS,KAAK,SAASA,SAAO,EAClC,UAEA,kBAAkB,WAElB,oBAAoB,KACpB,aAAa,KACb,KAEA,cACA,mBACA,OACA,KACA,GAAG,SACW;CACd,MAAM,EAAE,OAAO,mBAAmB,GAAG,kCAAkC,qBAAqB,EAAE;AAE9F,QAAO,YAAY;EACjB;EACA,MAAM;EACN,eAAe;EACf,WAAW;EACZ,CAAC;CAGF,MAAM,eAAe,cACb,CAAC,OAAO,YAAkC,MAAM,EACtD,CAAC,OAAO,YAAY,MAAM,CAC3B;AAED,QACE,oBAAC;EAAO,iBAAgB;EAAU,OAAO,aAAa;YACpD,qBAAC;GACM;GACL,OAAO;GACP,qBAAqB,eAAe,CAAC,EAAE,GAAG;GAC1C,GAAI;cAEH,gBACC,oBAAC;IACC,mBAAkB;IAClB,eAAc;IACd,iBAAgB;IAChB,gBAAe;IACf,OAAO;IACP,GAAI;cAEH;KACM,EAEX,oBAAC;IAAO,MAAK;IAAuB;IAA+B;IAAiB;IACjF;KACM;IACE;GACN;EAEX;AAEF,OAAO,cAAc;AAErB,MAAM,eAAe,WAAW,QAAQ,QAAQ,QAAQ,EACtD,SAAS;CACP,MAAM;CAEN,YAAY,GAAG,OAAO;CACtB,eAAe,GAAG,OAAO;CACzB,aAAa,GAAG,OAAO;CACvB,cAAc,GAAG,OAAO;CACzB,EACF,EAAE"}

package/dist/components/Switch.cjs

@@ -0,0 +1,172 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_components_IconSlot = require('./IconSlot.cjs');
+const require_components_Text = require('./Text.cjs');
+const require_components_HStack = require('./HStack.cjs');
+let react = require("react");
+let react_native = require("react-native");
+let generated_styles = require("../../generated/styles");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_native_unistyles = require("react-native-unistyles");
+let react_native_reanimated = require("react-native-reanimated");
+react_native_reanimated = require_rolldown_runtime.__toESM(react_native_reanimated);
+let react_native_unistyles_reanimated = require("react-native-unistyles/reanimated");
+
+//#region src/components/Switch.tsx
+const HANDLE_TRAVEL = {
+	md: 20,
+	sm: 12
+};
+const ANIMATION_DURATION = 120;
+/**
+* **Switch component for toggling options**
+*
+* @description
+* A switch (also called a toggle) is a binary on/off input control.
+* It allows users to pick between two clearly opposite choices.
+*
+* @example
+* ```tsx
+* import { Switch } from '@yahoo/uds-mobile';
+*
+* <Switch label="Notifications" />
+* <Switch isOn={enabled} onChange={setEnabled} label="Dark mode" />
+* <Switch onIcon="Check" offIcon="Cross" label="Sync" />
+* ```
+*
+* @see The {@link https://uds.build/docs/components/switch Switch Docs} for more info
+*/
+const Switch = (0, react.memo)(function Switch$1({ isOn: isOnProp, defaultIsOn = false, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, disabled = false, required, accessibilityHint, reduceMotion = false, ref }) {
+	const isControlled = isOnProp !== void 0;
+	const [internalIsOn, setInternalIsOn] = (0, react.useState)(defaultIsOn);
+	const [prefersReducedMotion, setPrefersReducedMotion] = (0, react.useState)(false);
+	const isOn = isControlled ? isOnProp : internalIsOn;
+	(0, react.useEffect)(() => {
+		const checkReducedMotion = async () => {
+			setPrefersReducedMotion(await react_native.AccessibilityInfo.isReduceMotionEnabled());
+		};
+		checkReducedMotion();
+		const subscription = react_native.AccessibilityInfo.addEventListener("reduceMotionChanged", setPrefersReducedMotion);
+		return () => subscription.remove();
+	}, []);
+	const animationDuration = reduceMotion || prefersReducedMotion ? 0 : ANIMATION_DURATION;
+	const progress = (0, react_native_reanimated.useDerivedValue)(() => (0, react_native_reanimated.withTiming)(isOn ? 1 : 0, { duration: animationDuration }), [isOn, animationDuration]);
+	const travelDistance = HANDLE_TRAVEL[size];
+	const handlePress = (0, react.useCallback)(() => {
+		if (disabled) return;
+		const newValue = !isOn;
+		if (!isControlled) setInternalIsOn(newValue);
+		onChange?.(newValue);
+	}, [
+		disabled,
+		isOn,
+		isControlled,
+		onChange
+	]);
+	generated_styles.switchStyles.useVariants({
+		size,
+		variant: isOn ? "on" : "off"
+	});
+	const trackBackgroundColor = (0, react_native_unistyles_reanimated.useAnimatedVariantColor)(generated_styles.switchStyles.switch, "backgroundColor");
+	const animatedTrackStyle = (0, react_native_reanimated.useAnimatedStyle)(() => {
+		"worklet";
+		return { backgroundColor: (0, react_native_reanimated.withTiming)(trackBackgroundColor.value, { duration: animationDuration }) };
+	});
+	const animatedHandleStyle = (0, react_native_reanimated.useAnimatedStyle)(() => {
+		"worklet";
+		return { transform: [{ translateX: progress.value * travelDistance }] };
+	});
+	const rootStyle = (0, react.useMemo)(() => [generated_styles.switchStyles.root, switchStaticStyles.root({ disabled })], [generated_styles.switchStyles.root, disabled]);
+	const trackStyle = (0, react.useMemo)(() => [
+		generated_styles.switchStyles.switch,
+		switchStaticStyles.track,
+		animatedTrackStyle
+	], [generated_styles.switchStyles.switch, animatedTrackStyle]);
+	const handleStyle = (0, react.useMemo)(() => [
+		generated_styles.switchStyles.handle,
+		switchStaticStyles.handle,
+		animatedHandleStyle
+	], [generated_styles.switchStyles.handle, animatedHandleStyle]);
+	const accessibilityLabel = typeof label === "string" ? label : void 0;
+	const resolvedAccessibilityHint = accessibilityHint ?? "Double tap to toggle";
+	const resolvedLabel = typeof label === "function" ? label() : label;
+	const labelContent = resolvedLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_HStack.HStack, {
+		gap: "2",
+		alignItems: "center",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+			style: generated_styles.switchStyles.text,
+			children: resolvedLabel
+		}), required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+			color: "alert",
+			children: "*"
+		})]
+	});
+	const a11yValue = (0, react.useMemo)(() => ({ text: isOn ? "On" : "Off" }), [isOn]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.Pressable, {
+		ref,
+		onPress: handlePress,
+		disabled,
+		accessible: true,
+		accessibilityRole: "switch",
+		accessibilityState: {
+			checked: isOn,
+			disabled
+		},
+		accessibilityLabel,
+		accessibilityHint: resolvedAccessibilityHint,
+		accessibilityValue: a11yValue,
+		style: rootStyle,
+		children: [
+			labelPosition === "end" && labelContent,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
+				style: trackStyle,
+				importantForAccessibility: "no-hide-descendants",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native_reanimated.default.View, {
+					style: handleStyle,
+					children: [onIcon && isOn && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
+						style: switchStaticStyles.iconContainer,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+							icon: onIcon,
+							variant: "fill",
+							style: generated_styles.switchStyles.handleIcon
+						})
+					}), offIcon && !isOn && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
+						style: switchStaticStyles.iconContainer,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+							icon: offIcon,
+							variant: "fill",
+							style: generated_styles.switchStyles.handleIcon
+						})
+					})]
+				})
+			}),
+			labelPosition === "start" && labelContent
+		]
+	});
+});
+Switch.displayName = "Switch";
+const switchStaticStyles = react_native_unistyles.StyleSheet.create((theme) => ({
+	handle: {
+		borderRadius: theme.borderRadius.full,
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	iconContainer: {
+		position: "absolute",
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	track: {
+		justifyContent: "center",
+		borderRadius: theme.borderRadius.full
+	},
+	root: ({ disabled }) => ({
+		flexDirection: "row",
+		alignItems: "center",
+		alignSelf: "flex-start",
+		opacity: disabled ? .5 : 1
+	})
+}));
+
+//#endregion
+exports.Switch = Switch;

package/dist/components/Switch.d.cts

@@ -0,0 +1,42 @@
+
+import { UniversalSwitchProps } from "../uds/dist/tokens/types.cjs";
+import { IconSlotType } from "./IconSlot.cjs";
+import * as react18 from "react";
+import { Ref } from "react";
+import { AccessibilityProps, View } from "react-native";
+
+//#region src/components/Switch.d.ts
+interface SwitchProps extends UniversalSwitchProps<IconSlotType> {
+  /** Ref to the underlying View */
+  ref?: Ref<View>;
+  /** Callback when the switch value changes */
+  onChange?: (value: boolean) => void;
+  /** Whether the switch is disabled */
+  disabled?: boolean;
+  /** Whether the switch is required (shows asterisk with label) */
+  required?: boolean;
+  /** Accessibility hint describing what happens when activated */
+  accessibilityHint?: AccessibilityProps['accessibilityHint'];
+}
+/**
+ * **Switch component for toggling options**
+ *
+ * @description
+ * A switch (also called a toggle) is a binary on/off input control.
+ * It allows users to pick between two clearly opposite choices.
+ *
+ * @example
+ * ```tsx
+ * import { Switch } from '@yahoo/uds-mobile';
+ *
+ * <Switch label="Notifications" />
+ * <Switch isOn={enabled} onChange={setEnabled} label="Dark mode" />
+ * <Switch onIcon="Check" offIcon="Cross" label="Sync" />
+ * ```
+ *
+ * @see The {@link https://uds.build/docs/components/switch Switch Docs} for more info
+ */
+declare const Switch: react18.NamedExoticComponent<SwitchProps>;
+//#endregion
+export { Switch, type SwitchProps };
+//# sourceMappingURL=Switch.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.cts","names":[],"sources":["../../src/components/Switch.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAeU,WAAA,SAAoB,qBAAqB;;QAE3C,IAAI;EAFF;EAAyC,QAAA,CAAA,EAAA,CAAA,KAAA,EAAA,OAAA,EAAA,GAAA,IAAA;EAEvC;EAAJ,QAAA,CAAA,EAAA,OAAA;EAQc;EAVQ,QAAA,CAAA,EAAA,OAAA;EAAoB;EAsC5C,iBA8IJ,CAAA,EA1KoB,kBA4BV,CAAA,mBAAA,CAAA;;;;;;;;;;;;;;;;;;;;cAAN,QAAM,OAAA,CAAA,qBAAA"}

package/dist/components/Switch.d.mts

@@ -0,0 +1,42 @@
+
+import { UniversalSwitchProps } from "../uds/dist/tokens/types.mjs";
+import { IconSlotType } from "./IconSlot.mjs";
+import * as react16 from "react";
+import { Ref } from "react";
+import { AccessibilityProps, View } from "react-native";
+
+//#region src/components/Switch.d.ts
+interface SwitchProps extends UniversalSwitchProps<IconSlotType> {
+  /** Ref to the underlying View */
+  ref?: Ref<View>;
+  /** Callback when the switch value changes */
+  onChange?: (value: boolean) => void;
+  /** Whether the switch is disabled */
+  disabled?: boolean;
+  /** Whether the switch is required (shows asterisk with label) */
+  required?: boolean;
+  /** Accessibility hint describing what happens when activated */
+  accessibilityHint?: AccessibilityProps['accessibilityHint'];
+}
+/**
+ * **Switch component for toggling options**
+ *
+ * @description
+ * A switch (also called a toggle) is a binary on/off input control.
+ * It allows users to pick between two clearly opposite choices.
+ *
+ * @example
+ * ```tsx
+ * import { Switch } from '@yahoo/uds-mobile';
+ *
+ * <Switch label="Notifications" />
+ * <Switch isOn={enabled} onChange={setEnabled} label="Dark mode" />
+ * <Switch onIcon="Check" offIcon="Cross" label="Sync" />
+ * ```
+ *
+ * @see The {@link https://uds.build/docs/components/switch Switch Docs} for more info
+ */
+declare const Switch: react16.NamedExoticComponent<SwitchProps>;
+//#endregion
+export { Switch, type SwitchProps };
+//# sourceMappingURL=Switch.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.mts","names":[],"sources":["../../src/components/Switch.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAeU,WAAA,SAAoB,qBAAqB;;QAE3C,IAAI;EAFF;EAAyC,QAAA,CAAA,EAAA,CAAA,KAAA,EAAA,OAAA,EAAA,GAAA,IAAA;EAEvC;EAAJ,QAAA,CAAA,EAAA,OAAA;EAQc;EAVQ,QAAA,CAAA,EAAA,OAAA;EAAoB;EAsC5C,iBA8IJ,CAAA,EA1KoB,kBA4BV,CAAA,mBAAA,CAAA;;;;;;;;;;;;;;;;;;;;cAAN,QAAM,OAAA,CAAA,qBAAA"}