radix-native-ui 0.1.0 → 0.1.2

package/dist/index.mjs

@@ -3116,7 +3116,7 @@ const ToastRoot = forwardRef(({ toast, onDismiss, config, index, style }, ref) =
 		opacity,
 		transform: [{ translateY }, { translateX }],
 		backgroundColor: colors.backgroundColor,
-		borderColor: colors.borderColor,
+		borderColor: "transparent",
 		borderWidth: 1,
 		borderRadius: theme.radii.large,
 		padding: theme.space[4],
@@ -3141,23 +3141,23 @@ const ToastRoot = forwardRef(({ toast, onDismiss, config, index, style }, ref) =
 		accessibilityLiveRegion: "polite",
 		accessibilityLabel: toast.accessibilityLabel || toast.title,
 		children: /* @__PURE__ */ jsxs(View, {
-			style: [styles$32.contentContainer, { alignItems: toast.description ? "flex-start" : "center" }],
+			style: [styles$34.contentContainer, { alignItems: toast.description ? "flex-start" : "center" }],
 			children: [
 				toast.icon && /* @__PURE__ */ jsx(View, {
-					style: styles$32.iconContainer,
+					style: styles$34.iconContainer,
 					children: toast.icon
 				}),
 				/* @__PURE__ */ jsxs(View, {
-					style: styles$32.textContainer,
-					children: [/* @__PURE__ */ jsx(Text, {
-						style: [styles$32.title, {
+					style: styles$34.textContainer,
+					children: [/* @__PURE__ */ jsx(TextComponent, {
+						style: [styles$34.title, {
 							color: colors.textColor,
 							fontSize: theme.typography.fontSizes[3].fontSize
 						}],
 						numberOfLines: 1,
 						children: toast.title
-					}), toast.description && /* @__PURE__ */ jsx(Text, {
-						style: [styles$32.description, {
+					}), toast.description && /* @__PURE__ */ jsx(TextComponent, {
+						style: [styles$34.description, {
 							fontSize: theme.typography.fontSizes[2].fontSize,
 							lineHeight: theme.typography.fontSizes[2].fontSize * 1.5,
 							opacity: .8
@@ -3168,14 +3168,14 @@ const ToastRoot = forwardRef(({ toast, onDismiss, config, index, style }, ref) =
 				}),
 				toast.action && /* @__PURE__ */ jsx(Pressable, {
 					onPress: toast.action.onPress,
-					style: ({ pressed }) => [styles$32.actionButton, { opacity: pressed ? .7 : 1 }],
-					children: /* @__PURE__ */ jsx(Text, {
-						style: [styles$32.actionText, { color: colors.accentColor }],
+					style: ({ pressed }) => [styles$34.actionButton, { opacity: pressed ? .7 : 1 }],
+					children: /* @__PURE__ */ jsx(TextComponent, {
+						style: [styles$34.actionText, { color: colors.accentColor }],
 						children: toast.action.label
 					})
 				}),
 				toast.showClose && /* @__PURE__ */ jsx(Button, {
-					style: { backgroundColor: colors.textColor },
+					color: getVariantColorName(toast.variant),
 					radius: "large",
 					size: 1,
 					onPress: () => handleDismiss(true),
@@ -3194,10 +3194,10 @@ const ToastViewport = forwardRef(({ style }, ref) => {
 	if (toasts.length === 0) return null;
 	return /* @__PURE__ */ jsxs(View, {
 		ref,
-		style: [styles$32.viewport, style],
+		style: [styles$34.viewport, style],
 		pointerEvents: "box-none",
 		children: [topToasts.length > 0 && /* @__PURE__ */ jsx(SafeAreaView, {
-			style: styles$32.topContainer,
+			style: styles$34.topContainer,
 			pointerEvents: "box-none",
 			children: topToasts.map((toast, index) => /* @__PURE__ */ jsx(ToastRoot, {
 				toast,
@@ -3206,7 +3206,7 @@ const ToastViewport = forwardRef(({ style }, ref) => {
 				index
 			}, toast.id))
 		}), bottomToasts.length > 0 && /* @__PURE__ */ jsx(SafeAreaView, {
-			style: styles$32.bottomContainer,
+			style: styles$34.bottomContainer,
 			pointerEvents: "box-none",
 			children: bottomToasts.map((toast, index) => /* @__PURE__ */ jsx(ToastRoot, {
 				toast,
@@ -3220,10 +3220,10 @@ const ToastViewport = forwardRef(({ style }, ref) => {
 ToastViewport.displayName = "Toast.Viewport";
 const ToastTitle = forwardRef(({ children, style }, ref) => {
 	const theme = useTheme$1();
-	return /* @__PURE__ */ jsx(Text, {
+	return /* @__PURE__ */ jsx(TextComponent, {
 		ref,
 		style: [
-			styles$32.title,
+			styles$34.title,
 			{ fontSize: theme.typography.fontSizes[2].fontSize },
 			style
 		],
@@ -3233,10 +3233,10 @@ const ToastTitle = forwardRef(({ children, style }, ref) => {
 ToastTitle.displayName = "Toast.Title";
 const ToastDescription = forwardRef(({ children, style }, ref) => {
 	const theme = useTheme$1();
-	return /* @__PURE__ */ jsx(Text, {
+	return /* @__PURE__ */ jsx(TextComponent, {
 		ref,
 		style: [
-			styles$32.description,
+			styles$34.description,
 			{ fontSize: theme.typography.fontSizes[1].fontSize },
 			style
 		],
@@ -3249,7 +3249,7 @@ const ToastClose = forwardRef(({ children, onPress, style }, ref) => {
 		ref,
 		onPress,
 		style: ({ pressed }) => [
-			styles$32.closeButton,
+			styles$34.closeButton,
 			{ opacity: pressed ? .7 : 1 },
 			style
 		],
@@ -3259,7 +3259,7 @@ const ToastClose = forwardRef(({ children, onPress, style }, ref) => {
 			left: 8,
 			right: 8
 		},
-		children: children || /* @__PURE__ */ jsx(Text, { children: "✕" })
+		children: children || /* @__PURE__ */ jsx(TextComponent, { children: "✕" })
 	});
 });
 ToastClose.displayName = "Toast.Close";
@@ -3269,18 +3269,18 @@ const ToastAction = forwardRef(({ label, onPress, style }, ref) => {
 		ref,
 		onPress,
 		style: ({ pressed }) => [
-			styles$32.actionButton,
+			styles$34.actionButton,
 			{ opacity: pressed ? .7 : 1 },
 			style
 		],
-		children: /* @__PURE__ */ jsx(Text, {
-			style: [styles$32.actionText, { color: theme.accentColor === "indigo" ? theme.colors.indigo[9] : theme.colors[theme.accentColor]?.[9] || theme.colors.indigo[9] }],
+		children: /* @__PURE__ */ jsx(TextComponent, {
+			style: [styles$34.actionText, { color: theme.accentColor === "indigo" ? theme.colors.indigo[9] : theme.colors[theme.accentColor]?.[9] || theme.colors.indigo[9] }],
 			children: label
 		})
 	});
 });
 ToastAction.displayName = "Toast.Action";
-const styles$32 = StyleSheet.create({
+const styles$34 = StyleSheet.create({
 	viewport: {
 		...StyleSheet.absoluteFillObject,
 		pointerEvents: "box-none"
@@ -3314,7 +3314,7 @@ const styles$32 = StyleSheet.create({
 	},
 	title: { fontWeight: "500" },
 	description: {
-		marginTop: 2,
+		marginTop: 1,
 		opacity: .8
 	},
 	actionButton: {
@@ -3380,7 +3380,7 @@ const useThemeContext = () => {
 * 2. themeOptions object (legacy support)
 * 3. Default values
 */
-const ThemeProvider = ({ children, accentColor, grayColor, radius, scaling, panelBackground, mode: initialMode, appearance, forcedMode, onModeChange, themeOptions = {}, toastConfig: userToastConfig }) => {
+const ThemeProvider = ({ children, accentColor, grayColor, radius, scaling, panelBackground, mode: initialMode, appearance, forcedMode, onModeChange, themeOptions = {}, toastConfig: userToastConfig, haptics: globalHaptics }) => {
 	const parentContext = useContext(ThemeContext);
 	const deviceColorScheme = useDeviceColorScheme();
 	const resolvedInitialMode = appearance === "inherit" ? void 0 : appearance ?? initialMode;
@@ -3398,9 +3398,10 @@ const ThemeProvider = ({ children, accentColor, grayColor, radius, scaling, pane
 		parentContext?.mode,
 		deviceColorScheme
 	]);
-	const handleSetMode = (newMode) => {
-		setMode(newMode);
-		onModeChange?.(newMode);
+	const handleSetMode = (newAppearance) => {
+		if (newAppearance === "inherit") setMode(deviceColorScheme ?? "light");
+		else setMode(newAppearance);
+		onModeChange?.(newAppearance === "inherit" ? deviceColorScheme ?? "light" : newAppearance);
 	};
 	const toggleMode = () => {
 		handleSetMode(mode === "light" ? "dark" : "light");
@@ -3471,11 +3472,14 @@ const ThemeProvider = ({ children, accentColor, grayColor, radius, scaling, pane
 			...options
 		} : t));
 	}, []);
+	const resolvedHaptics = globalHaptics ?? true;
 	const value = useMemo(() => ({
 		theme,
 		mode,
+		appearance: appearance ?? "inherit",
 		setMode: handleSetMode,
 		toggleMode,
+		haptics: resolvedHaptics,
 		toastConfig,
 		toasts,
 		showToast,
@@ -3485,7 +3489,9 @@ const ThemeProvider = ({ children, accentColor, grayColor, radius, scaling, pane
 	}), [
 		theme,
 		mode,
+		appearance,
 		toggleMode,
+		resolvedHaptics,
 		toastConfig,
 		toasts,
 		showToast,
@@ -3514,14 +3520,22 @@ const useThemeMode = () => {
 * Hook to access theme mode setter and toggle
 */
 const useThemeActions = () => {
-	const { setMode, toggleMode, mode } = useThemeContext();
+	const { setMode, toggleMode, mode, appearance } = useThemeContext();
 	return {
 		setMode,
 		toggleMode,
-		mode
+		mode,
+		appearance
 	};
 };
 /**
+* Hook to access the global haptics setting
+* @returns boolean - whether haptics are enabled globally
+*/
+const useHaptics = () => {
+	return useThemeContext().haptics;
+};
+/**
 * Hook to access toast functionality
 */
 const useToast = () => {
@@ -3593,6 +3607,15 @@ const useThemeColors = () => {
 		panel: isDark ? theme.colors.gray.dark[2] : "#ffffff"
 	};
 };
+/**
+* Hook to access the global haptics setting
+* @returns boolean - whether haptics are enabled globally
+*/
+const useHaptics$1 = () => {
+	const context = useContext(ThemeContext);
+	if (!context) throw new Error("useHaptics must be used within a ThemeProvider");
+	return context.haptics;
+};
 
 //#endregion
 //#region src/components/primitives/View.tsx
@@ -3610,7 +3633,6 @@ const RnView = React.memo(React.forwardRef(({ style, wrap, ...rest }, ref) => {
 	});
 }));
 RnView.displayName = "RnView";
-var View_default = RnView;
 
 //#endregion
 //#region src/components/primitives/Text.tsx
@@ -3662,7 +3684,6 @@ const RnPressable = React.memo(React.forwardRef(({ style, onPressIn, onPressOut,
 	});
 }));
 RnPressable.displayName = "RnPressable";
-var Pressable_default = RnPressable;
 
 //#endregion
 //#region src/components/primitives/TouchableOpacity.tsx
@@ -3782,10 +3803,67 @@ const RnActivityIndicator = React.memo(React.forwardRef(({ color, ...rest }, ref
 }));
 RnActivityIndicator.displayName = "RnActivityIndicator";
 
+//#endregion
+//#region src/utils/haptics.ts
+/**
+* Try to import expo-haptics, fallback to null if not available
+*/
+let Haptics = null;
+(async () => {
+	try {
+		Haptics = await import("expo-haptics");
+	} catch {}
+})();
+/**
+* Triggers haptic feedback with graceful fallback
+*
+* On iOS with expo-haptics:
+* - Uses Taptic Engine for precise, varied feedback (10-20ms)
+*
+* On Android or without expo-haptics:
+* - Falls back to basic vibration (10ms on Android, 400ms on iOS)
+*
+* @param type - The type of haptic feedback to trigger (default: 'selection')
+*/
+const triggerHaptic = (type = "selection") => {
+	if (Haptics) try {
+		switch (type) {
+			case "selection":
+				Haptics.selectionAsync();
+				break;
+			case "press":
+				Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+				break;
+			case "impactLight":
+				Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+				break;
+			case "impactMedium":
+				Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+				break;
+			case "impactHeavy":
+				Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
+				break;
+			case "notificationSuccess":
+				Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+				break;
+			case "notificationWarning":
+				Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
+				break;
+			case "notificationError":
+				Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+				break;
+		}
+	} catch (error) {
+		Platform.OS === "android" && Vibration.vibrate(10);
+	}
+	else Platform.OS === "android" && Vibration.vibrate(10);
+};
+
 //#endregion
 //#region src/components/primitives/AnimatedPressable.tsx
-const AnimatedPressableComponent = Animated.createAnimatedComponent(Pressable_default);
+const AnimatedPressableComponent = Animated.createAnimatedComponent(RnPressable);
 const AnimatedPressable = React.memo(React.forwardRef(({ children, onPressIn, onPressOut, disabled, pressedScale = .97, pressedOpacity = .9, animationDuration = 100, hapticFeedback = true, style, ...rest }, ref) => {
+	const globalHaptics = useHaptics$1();
 	const scaleAnim = useRef(new Animated.Value(1)).current;
 	const opacityAnim = useRef(new Animated.Value(1)).current;
 	const animatePressIn = useCallback(() => {
@@ -3825,12 +3903,13 @@ const AnimatedPressable = React.memo(React.forwardRef(({ children, onPressIn, on
 	return /* @__PURE__ */ jsx(AnimatedPressableComponent, {
 		ref,
 		onPressIn: useCallback((event) => {
-			if (hapticFeedback && !disabled) Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback && !disabled) triggerHaptic("press");
 			animatePressIn();
 			onPressIn?.(event);
 		}, [
 			animatePressIn,
 			onPressIn,
+			globalHaptics,
 			hapticFeedback,
 			disabled
 		]),
@@ -3849,15 +3928,14 @@ const AnimatedPressable = React.memo(React.forwardRef(({ children, onPressIn, on
 	});
 }));
 AnimatedPressable.displayName = "AnimatedPressable";
-var AnimatedPressable_default = AnimatedPressable;
 
 //#endregion
 //#region src/components/layout/Box.tsx
 const areEqual$12 = (prevProps, nextProps) => {
-	if (prevProps.children === nextProps.children && prevProps.style === nextProps.style && prevProps.backgroundColor === nextProps.backgroundColor && prevProps.display === nextProps.display && prevProps.flexDirection === nextProps.flexDirection && prevProps.opacity === nextProps.opacity && prevProps.radius === nextProps.radius) return true;
+	if (prevProps.children === nextProps.children && prevProps.style === nextProps.style && prevProps.backgroundColor === nextProps.backgroundColor && prevProps.display === nextProps.display && prevProps.flexDirection === nextProps.flexDirection && prevProps.flex === nextProps.flex && prevProps.opacity === nextProps.opacity && prevProps.radius === nextProps.radius) return true;
 	return false;
 };
-const Box = React.memo(React.forwardRef(({ asChild = false, children, style, backgroundColor, radius, display, flexDirection, justifyContent, alignItems, flexWrap, flexGrow, flexShrink, flexBasis, alignSelf, width, height, minWidth, maxWidth, minHeight, maxHeight, position, top, right, bottom, left, zIndex, overflow, margin, marginTop, marginBottom, marginLeft, marginRight, marginHorizontal, marginVertical, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, paddingHorizontal, paddingVertical, borderWidth, borderRadius: borderRadiusProp, borderColor, opacity, elevation, ...rest }, ref) => {
+const Box = React.memo(React.forwardRef(({ asChild = false, children, style, backgroundColor, radius, display, flexDirection, justifyContent, alignItems, flexWrap, flex, flexGrow, flexShrink, flexBasis, alignSelf, width, height, minWidth, maxWidth, minHeight, maxHeight, position, top, right, bottom, left, zIndex, overflow, margin, marginTop, marginBottom, marginLeft, marginRight, marginHorizontal, marginVertical, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, paddingHorizontal, paddingVertical, borderWidth, borderRadius: borderRadiusProp, borderColor, opacity, elevation, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const colors = theme.colors.gray;
 	const radii = theme.radii;
@@ -3881,6 +3959,7 @@ const Box = React.memo(React.forwardRef(({ asChild = false, children, style, bac
 		justifyContent,
 		alignItems,
 		flexWrap,
+		flex,
 		flexGrow,
 		flexShrink,
 		flexBasis,
@@ -3923,6 +4002,7 @@ const Box = React.memo(React.forwardRef(({ asChild = false, children, style, bac
 		justifyContent,
 		alignItems,
 		flexWrap,
+		flex,
 		flexGrow,
 		flexShrink,
 		flexBasis,
@@ -4721,12 +4801,12 @@ const Strong = React.memo(React.forwardRef(({ children, style = {}, color, ...re
 	const colors = useThemeMode$1() === "dark" ? theme.colors.gray.dark : theme.colors.gray;
 	const strongFont = theme.typography.fonts.strong;
 	return /* @__PURE__ */ jsx(TextComponent, {
+		color,
 		ref,
 		style: [useMemo(() => ({
 			fontFamily: strongFont.fontFamily,
 			fontWeight: strongFont.fontWeight,
-			fontStyle: strongFont.fontStyle,
-			color: color || colors[12]
+			fontStyle: strongFont.fontStyle
 		}), [
 			strongFont,
 			color,
@@ -4987,7 +5067,7 @@ const areEqual = (prevProps, nextProps) => {
 	if (prevProps.children === nextProps.children && prevProps.style === nextProps.style && prevProps.variant === nextProps.variant && prevProps.color === nextProps.color && prevProps.radius === nextProps.radius && prevProps.size === nextProps.size && prevProps.disabled === nextProps.disabled && prevProps.loading === nextProps.loading && prevProps.onPress === nextProps.onPress && prevProps.onLongPress === nextProps.onLongPress && prevProps.delayLongPress === nextProps.delayLongPress && prevProps.width === nextProps.width && prevProps.highContrast === nextProps.highContrast) return true;
 	return false;
 };
-const Button = React.memo(React.forwardRef(({ children, style, variant = "classic", color, radius, size = 2, disabled, loading, onPress, accessibilityLabel, width, highContrast, hapticFeedback, ...rest }, ref) => {
+const Button = React.memo(React.forwardRef(({ children, style, variant = "solid", color, radius, size = 2, disabled, loading, onPress, accessibilityLabel, width, highContrast, hapticFeedback, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const mode = useThemeMode$1();
 	const isDark = mode === "dark";
@@ -5141,7 +5221,7 @@ const Button = React.memo(React.forwardRef(({ children, style, variant = "classi
 			children: labelProps.children
 		}, "label");
 	};
-	return /* @__PURE__ */ jsx(AnimatedPressable_default, {
+	return /* @__PURE__ */ jsx(AnimatedPressable, {
 		ref,
 		style: [buttonStyle, style],
 		onPress: handlePress,
@@ -5174,52 +5254,48 @@ Button.Label = ButtonLabel;
 
 //#endregion
 //#region src/components/forms/IconButton.tsx
-const IconButton = React.forwardRef(({ children, style = {}, variant = "classic", color, size = 2, radius, asChild = false, disabled, loading, onPress, accessibilityLabel, highContrast, hapticFeedback, ...rest }, ref) => {
+const IconButton = React.forwardRef(({ children, style = {}, variant = "solid", color, size = 2, radius, asChild = false, disabled, loading, onPress, accessibilityLabel, highContrast, hapticFeedback, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const mode = useThemeMode$1();
 	mode === "dark" ? theme.colors.gray.dark : theme.colors.gray;
 	const grayAlpha = getGrayAlpha(theme);
 	getAccentColor(theme, mode);
 	getAccentAlpha(theme);
-	const radii = theme.radii;
-	const activeColor = color || theme.accentColor;
-	const getBorderRadius = () => {
-		if (radius) return radius === "full" ? 9999 : radii[radius];
-	};
-	const variantColors = getVariantColors(theme, activeColor, mode, variant, highContrast);
+	const radii = theme.radii[radius || theme.radius] ?? theme.radii.medium;
+	const selectedRadius = radius || theme.radius;
+	const variantColors = getVariantColors(theme, color || theme.accentColor, mode, variant, highContrast);
 	const getSizeValues = () => {
 		switch (size) {
 			case 1: return {
 				size: 32,
 				iconSize: 16,
-				borderRadius: radii.small
+				borderRadius: selectedRadius === "full" ? 9999 : radii
 			};
 			case 3: return {
 				size: 56,
 				iconSize: 24,
-				borderRadius: radii.medium
+				borderRadius: selectedRadius === "full" ? 9999 : radii
 			};
 			case 4: return {
 				size: 64,
 				iconSize: 28,
-				borderRadius: radii.large
+				borderRadius: selectedRadius === "full" ? 9999 : radii
 			};
 			default: return {
 				size: 40,
 				iconSize: 20,
-				borderRadius: radii.medium
+				borderRadius: selectedRadius === "full" ? 9999 : radii
 			};
 		}
 	};
 	const sizeValues = getSizeValues();
-	const customBorderRadius = getBorderRadius();
 	const buttonStyle = {
 		width: sizeValues.size,
 		height: sizeValues.size,
 		backgroundColor: disabled ? grayAlpha["3"] : variantColors.backgroundColor,
 		borderColor: variantColors.borderColor,
 		borderWidth: variant === "outline" ? 1 : 0,
-		borderRadius: customBorderRadius !== void 0 ? customBorderRadius : sizeValues.borderRadius,
+		borderRadius: sizeValues.borderRadius,
 		opacity: disabled ? .5 : 1,
 		alignItems: "center",
 		justifyContent: "center"
@@ -5242,7 +5318,7 @@ const IconButton = React.forwardRef(({ children, style = {}, variant = "classic"
 			...child.props
 		});
 	}
-	return /* @__PURE__ */ jsx(AnimatedPressable_default, {
+	return /* @__PURE__ */ jsx(AnimatedPressable, {
 		ref,
 		style: [buttonStyle, style],
 		onPress,
@@ -5259,8 +5335,8 @@ const IconButton = React.forwardRef(({ children, style = {}, variant = "classic"
 			size: "small",
 			color: variantColors.textColor
 		}) : React.isValidElement(children) ? React.cloneElement(children, {
-			size: sizeValues.iconSize,
-			color: variantColors.textColor
+			size: children.props?.size || sizeValues.iconSize,
+			color: children.props?.color || variantColors.textColor
 		}) : children
 	});
 });
@@ -5390,7 +5466,6 @@ const TextFieldRoot = React.forwardRef(({ children, ...props }, ref) => {
 	};
 	const inputContainerStyle = {
 		width: "100%",
-		flex: 1,
 		flexDirection: "row",
 		alignItems: "center",
 		justifyContent: "space-between",
@@ -5414,7 +5489,8 @@ const TextFieldRoot = React.forwardRef(({ children, ...props }, ref) => {
 		paddingHorizontal: sizeValues.paddingHorizontal / 2,
 		minHeight: multiline ? sizeValues.height : void 0,
 		height: multiline ? void 0 : sizeValues.height,
-		textAlignVertical: multiline ? "top" : "center"
+		textAlignVertical: multiline ? "top" : "center",
+		borderRadius: sizeValues.borderRadius
 	};
 	const errorStyle = {
 		color: theme.colors.ruby[10],
@@ -5440,7 +5516,7 @@ const TextFieldRoot = React.forwardRef(({ children, ...props }, ref) => {
 	};
 	return /* @__PURE__ */ jsxs(View, {
 		style: [
-			styles$31.container,
+			styles$33.container,
 			containerStyle,
 			style
 		],
@@ -5458,7 +5534,7 @@ const TextFieldRoot = React.forwardRef(({ children, ...props }, ref) => {
 					style: inputInnerContainerStyle,
 					children: [
 						leftSlots.length > 0 && /* @__PURE__ */ jsx(View, {
-							style: [styles$31.leftSlots, slotWrapperStyle],
+							style: [styles$33.leftSlots, slotWrapperStyle],
 							children: leftSlots.map((child, index) => isValidElement(child) ? React.cloneElement(child, {
 								key: index,
 								side: "left"
@@ -5469,11 +5545,11 @@ const TextFieldRoot = React.forwardRef(({ children, ...props }, ref) => {
 							style: { flex: 1 },
 							children: /* @__PURE__ */ jsx(RnTextInput, {
 								...commonInputProps,
-								style: [styles$31.input, inputStyle]
+								style: [styles$33.input, inputStyle]
 							})
 						}),
 						rightSlots.length > 0 && /* @__PURE__ */ jsx(View, {
-							style: [styles$31.rightSlots, slotWrapperStyle],
+							style: [styles$33.rightSlots, slotWrapperStyle],
 							children: rightSlots.map((child, index) => isValidElement(child) ? React.cloneElement(child, {
 								key: index,
 								side: "right"
@@ -5499,11 +5575,8 @@ const TextField = React.forwardRef((props, ref) => {
 TextField.displayName = "TextField";
 TextField.Root = TextFieldRoot;
 TextField.Slot = TextFieldSlot;
-const styles$31 = StyleSheet.create({
-	container: {
-		flex: 1,
-		width: "100%"
-	},
+const styles$33 = StyleSheet.create({
+	container: { width: "100%" },
 	leftSlots: {
 		flexDirection: "row",
 		alignItems: "center"
@@ -5515,25 +5588,73 @@ const styles$31 = StyleSheet.create({
 	input: {
 		flexDirection: "row",
 		width: "100%",
-		minWidth: "100%",
-		flex: 1
+		minWidth: "100%"
 	}
 });
 
 //#endregion
 //#region src/components/forms/TextArea.tsx
-const TextAreaRoot = React.forwardRef((props, ref) => {
+const TextAreaSlot = React.forwardRef(({ side, color, gap, paddingHorizontal, paddingLeft, paddingRight, children, ...props }, ref) => {
+	const theme = useTheme$1();
+	const isDark = useThemeMode$1() === "dark";
+	const slotStyle = {
+		...props.style,
+		gap: gap !== void 0 ? gap : void 0,
+		paddingHorizontal: paddingHorizontal !== void 0 ? paddingHorizontal : void 0,
+		paddingLeft: paddingLeft !== void 0 ? paddingLeft : void 0,
+		paddingRight: paddingRight !== void 0 ? paddingRight : void 0
+	};
+	const coloredChild = useMemo(() => {
+		if (!color || !isValidElement(children)) return children;
+		return React.cloneElement(children, { color: theme.colors[color][9] });
+	}, [
+		children,
+		color,
+		theme,
+		isDark
+	]);
+	return /* @__PURE__ */ jsx(Slot, {
+		ref,
+		style: slotStyle,
+		...props,
+		children: coloredChild
+	});
+});
+TextAreaSlot.displayName = "TextAreaSlot";
+const TextAreaRoot = React.forwardRef(({ children, ...props }, ref) => {
 	const theme = useTheme$1();
 	const mode = useThemeMode$1();
 	const isDark = mode === "dark";
 	const grayScale = isDark ? theme.colors.gray.dark : theme.colors.gray;
 	const grayAlpha = getGrayAlpha(theme);
 	const { value, onChangeText, placeholder, label, error, disabled = false, color = "gray", highContrast = false, radius = "medium", size = "2", variant = "outline", rows = 4, autoGrow = false, accessibilityLabel, accessibilityHint, style, ...rest } = props;
+	const { leftSlots, rightSlots } = useMemo(() => {
+		const slotChildren = [];
+		Children.forEach(children, (child) => {
+			if (!isValidElement(child)) return;
+			if (child.type?.displayName === "TextAreaSlot") slotChildren.push(child);
+		});
+		const leftSlots = [];
+		const rightSlots = [];
+		slotChildren.forEach((child) => {
+			if (!isValidElement(child)) return;
+			const explicitSide = child.props.side;
+			if (explicitSide === "left") leftSlots.push(child);
+			else if (explicitSide === "right") rightSlots.push(child);
+			else if (slotChildren.filter((c) => isValidElement(c) && !c.props?.side).indexOf(child) === 0) leftSlots.push(child);
+			else rightSlots.push(child);
+		});
+		return {
+			leftSlots,
+			rightSlots
+		};
+	}, [children]);
 	const [isFocused, setIsFocused] = useState(false);
 	const activeColor = color || theme.accentColor;
 	const radii = theme.radii[radius] ?? theme.radii.medium;
 	const selectedRadius = radius || theme.radius;
 	const variantColors = getVariantColors(theme, activeColor, mode, variant, highContrast);
+	const accentColorScale = getColorScale(theme, activeColor, mode);
 	const getSizeValues = () => {
 		switch (size) {
 			case "1": return {
@@ -5562,10 +5683,10 @@ const TextAreaRoot = React.forwardRef((props, ref) => {
 	};
 	const inputContainerBorderColor = () => {
 		if (error) return theme.colors.ruby[9];
-		else return isFocused ? theme.colors[activeColor]["8"] : "transparent";
+		else return isFocused ? accentColorScale["8"] : "transparent";
 	};
 	const inputContainerBackgroundColor = () => {
-		if (disabled) return isDark ? grayAlpha["3"] : grayAlpha["2"];
+		if (disabled) return isDark ? grayAlpha["2"] : grayAlpha["2"];
 		else return variantColors.backgroundColor;
 	};
 	const inputBorderColor = () => {
@@ -5574,16 +5695,21 @@ const TextAreaRoot = React.forwardRef((props, ref) => {
 	};
 	const inputContainerStyle = {
 		width: "100%",
-		borderWidth: 2,
+		flexDirection: "row",
+		alignItems: "flex-start",
+		justifyContent: "space-between",
+		borderWidth: variant === "soft" ? 1.4 : 2,
 		borderColor: inputContainerBorderColor(),
 		backgroundColor: inputContainerBackgroundColor(),
 		borderRadius: selectedRadius === "full" ? theme.radii.large : radii,
 		opacity: disabled ? .6 : 1
 	};
-	const inputStyle = {
+	const inputInnerContainerStyle = {
 		borderWidth: 1,
 		borderColor: inputBorderColor(),
-		borderRadius: selectedRadius === "full" ? theme.radii.large : radii,
+		borderRadius: selectedRadius === "full" ? theme.radii.large : radii
+	};
+	const inputStyle = {
 		fontSize: sizeValues.fontSize,
 		color: color !== "gray" ? variantColors.textColor : grayScale[12],
 		padding: sizeValues.padding,
@@ -5597,7 +5723,7 @@ const TextAreaRoot = React.forwardRef((props, ref) => {
 	};
 	return /* @__PURE__ */ jsxs(View, {
 		style: [
-			styles$30.container,
+			styles$32.container,
 			containerStyle,
 			style
 		],
@@ -5609,21 +5735,47 @@ const TextAreaRoot = React.forwardRef((props, ref) => {
 			}),
 			/* @__PURE__ */ jsx(View, {
 				style: inputContainerStyle,
-				children: /* @__PURE__ */ jsx(RnTextInput, {
-					ref,
-					value,
-					onChangeText,
-					placeholder,
-					placeholderTextColor: color !== "gray" ? theme.colors[color][12] + "99" : theme.colors.gray[9],
-					editable: !disabled,
-					multiline: true,
-					accessibilityLabel: accessibilityLabel || label,
-					accessibilityHint,
-					accessibilityState: { disabled },
-					style: [styles$30.input, inputStyle],
-					onFocus: () => setIsFocused(true),
-					onBlur: () => setIsFocused(false),
-					...rest
+				children: /* @__PURE__ */ jsxs(Flex, {
+					align: "stretch",
+					direction: "row",
+					style: inputInnerContainerStyle,
+					children: [
+						leftSlots.length > 0 && /* @__PURE__ */ jsx(View, {
+							style: styles$32.leftSlots,
+							children: leftSlots.map((child, index) => isValidElement(child) ? React.cloneElement(child, {
+								key: index,
+								side: "left"
+							}) : child)
+						}),
+						/* @__PURE__ */ jsx(Flex, {
+							direction: "row",
+							style: { flex: 1 },
+							wrap: "wrap",
+							children: /* @__PURE__ */ jsx(RnTextInput, {
+								ref,
+								value,
+								onChangeText,
+								placeholder,
+								placeholderTextColor: color !== "gray" ? theme.colors[color][12] + "99" : theme.colors.gray[9],
+								editable: !disabled,
+								multiline: true,
+								accessibilityLabel: accessibilityLabel || label,
+								accessibilityHint,
+								accessibilityState: { disabled },
+								style: [styles$32.input, inputStyle],
+								onFocus: () => setIsFocused(true),
+								onBlur: () => setIsFocused(false),
+								...rest
+							})
+						}),
+						rightSlots.length > 0 && /* @__PURE__ */ jsx(View, {
+							style: styles$32.rightSlots,
+							children: rightSlots.map((child, index) => isValidElement(child) ? React.cloneElement(child, {
+								key: index,
+								side: "right"
+							}) : child)
+						})
+					]
 				})
 			}),
 			error && /* @__PURE__ */ jsx(RnText, {
@@ -5641,12 +5793,19 @@ const TextArea = React.forwardRef((props, ref) => {
 	});
 });
 TextArea.displayName = "TextArea";
-const styles$30 = StyleSheet.create({
+TextArea.Root = TextAreaRoot;
+TextArea.Slot = TextAreaSlot;
+const styles$32 = StyleSheet.create({
 	container: { width: "100%" },
-	input: {
-		width: "100%",
-		minHeight: 100
-	}
+	leftSlots: {
+		flexDirection: "row",
+		alignItems: "flex-start"
+	},
+	rightSlots: {
+		flexDirection: "row",
+		alignItems: "flex-start"
+	},
+	input: { minWidth: "100%" }
 });
 
 //#endregion
@@ -5657,6 +5816,7 @@ const Checkbox = React.forwardRef(({ checked, defaultChecked = false, onCheckedC
 	const isChecked = isControlled ? checked : internalChecked;
 	const theme = useTheme$1();
 	const mode = useThemeMode$1();
+	const globalHaptics = useHaptics$1();
 	const isDark = mode === "dark";
 	const grayScale = isDark ? theme.colors.gray.dark : theme.colors.gray;
 	const grayAlpha = getGrayAlpha(theme);
@@ -5702,7 +5862,7 @@ const Checkbox = React.forwardRef(({ checked, defaultChecked = false, onCheckedC
 				setInternalChecked(newChecked);
 				onCheckedChange?.(newChecked);
 			}
-			if (hapticFeedback) Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback) triggerHaptic("press");
 		}
 	};
 	const boxStyle = {
@@ -5724,9 +5884,9 @@ const Checkbox = React.forwardRef(({ checked, defaultChecked = false, onCheckedC
 		color: theme.colors.gray || grayScale[12],
 		fontSize: sizeValues.fontSize
 	};
-	return /* @__PURE__ */ jsxs(AnimatedPressable_default, {
+	return /* @__PURE__ */ jsxs(AnimatedPressable, {
 		ref,
-		style: styles$29.container,
+		style: styles$31.container,
 		onPress: handlePress,
 		disabled,
 		accessibilityRole: "checkbox",
@@ -5742,9 +5902,9 @@ const Checkbox = React.forwardRef(({ checked, defaultChecked = false, onCheckedC
 		hapticFeedback: false,
 		...rest,
 		children: [/* @__PURE__ */ jsx(RnView, {
-			style: [styles$29.checkbox, boxStyle],
+			style: [styles$31.checkbox, boxStyle],
 			children: (isChecked || indeterminate) && /* @__PURE__ */ jsx(RnView, {
-				style: [styles$29.icon, iconStyle],
+				style: [styles$31.icon, iconStyle],
 				children: indeterminate ? /* @__PURE__ */ jsx(RnView, { style: {
 					width: sizeValues.iconSize * .9,
 					height: 2.8,
@@ -5775,13 +5935,13 @@ const Checkbox = React.forwardRef(({ checked, defaultChecked = false, onCheckedC
 				} })] })
 			})
 		}), label && /* @__PURE__ */ jsx(TextComponent, {
-			style: [styles$29.label, labelStyle],
+			style: [styles$31.label, labelStyle],
 			children: label
 		})]
 	});
 });
 Checkbox.displayName = "Checkbox";
-const styles$29 = StyleSheet.create({
+const styles$31 = StyleSheet.create({
 	container: {
 		flexDirection: "row",
 		alignItems: "center"
@@ -5811,7 +5971,7 @@ const CheckboxGroup = React.forwardRef(({ value, onValueChange, items, disabled
 	return /* @__PURE__ */ jsx(RnView, {
 		ref,
 		style: [
-			styles$28.container,
+			styles$30.container,
 			containerStyle,
 			style
 		],
@@ -5830,7 +5990,7 @@ const CheckboxGroup = React.forwardRef(({ value, onValueChange, items, disabled
 	});
 });
 CheckboxGroup.displayName = "CheckboxGroup";
-const styles$28 = StyleSheet.create({ container: { width: "100%" } });
+const styles$30 = StyleSheet.create({ container: { width: "100%" } });
 
 //#endregion
 //#region src/components/forms/CheckboxCards.tsx
@@ -5868,7 +6028,7 @@ const CheckboxCardsRoot = React.forwardRef(({ value: controlledValue, defaultVal
 		children: /* @__PURE__ */ jsx(RnView, {
 			ref,
 			style: [
-				styles$27.rootContainer,
+				styles$29.rootContainer,
 				containerStyle,
 				style
 			],
@@ -5882,6 +6042,7 @@ const CheckboxCardsItem = React.forwardRef(({ value, side: itemSide, disabled: i
 	const context = useCheckboxCardsContext();
 	const theme = useTheme$1();
 	const mode = useThemeMode$1();
+	const globalHaptics = useHaptics$1();
 	const isDark = mode === "dark";
 	const { value: selectedValues, onValueChange, variant, size, color, highContrast, radius, side: rootSide, disabled: rootDisabled } = context;
 	const isChecked = selectedValues.includes(value);
@@ -5921,7 +6082,7 @@ const CheckboxCardsItem = React.forwardRef(({ value, side: itemSide, disabled: i
 		if (!isDisabled) {
 			if (isChecked) onValueChange(selectedValues.filter((v) => v !== value));
 			else onValueChange([...selectedValues, value]);
-			Vibration.vibrate(10);
+			if (globalHaptics) triggerHaptic("press");
 		}
 	};
 	const cardStyle = {
@@ -5936,10 +6097,10 @@ const CheckboxCardsItem = React.forwardRef(({ value, side: itemSide, disabled: i
 		gap: theme.space[3]
 	};
 	sizeValues.indicatorSize, sizeValues.indicatorSize, sizeValues.borderWidth, isChecked ? variantColors.borderColor : grayAlpha["8"], isChecked && variantColors.backgroundColor;
-	return /* @__PURE__ */ jsxs(AnimatedPressable_default, {
+	return /* @__PURE__ */ jsxs(AnimatedPressable, {
 		ref,
 		style: [
-			styles$27.itemContainer,
+			styles$29.itemContainer,
 			cardStyle,
 			style
 		],
@@ -5966,13 +6127,13 @@ const CheckboxCardsItem = React.forwardRef(({ value, side: itemSide, disabled: i
 			size,
 			onCheckedChange: handlePress
 		}), /* @__PURE__ */ jsx(RnView, {
-			style: styles$27.content,
+			style: styles$29.content,
 			children
 		})]
 	});
 });
 CheckboxCardsItem.displayName = "CheckboxCards.Item";
-const styles$27 = StyleSheet.create({
+const styles$29 = StyleSheet.create({
 	rootContainer: { width: "100%" },
 	itemContainer: { flex: 1 },
 	content: { flex: 1 }
@@ -5987,6 +6148,7 @@ const CheckboxCards = {
 const Radio = React.forwardRef(({ defaultChecked, value, selected, onSelect, disabled = false, size = "2", variant = "solid", color, label, children, highContrast = false, accessibilityLabel, accessibilityHint, hapticFeedback = true, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const mode = useThemeMode$1();
+	const globalHaptics = useHaptics$1();
 	const grayScale = mode === "dark" ? theme.colors.gray.dark : theme.colors.gray;
 	getGrayAlpha(theme);
 	const accentScale = getAccentColor(theme, mode);
@@ -6026,7 +6188,7 @@ const Radio = React.forwardRef(({ defaultChecked, value, selected, onSelect, dis
 		if (!disabled) {
 			if (onSelect) onSelect(value);
 			if (selected === void 0) setIsInternallySelected(true);
-			if (hapticFeedback) Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback) triggerHaptic("press");
 		}
 	};
 	const outerStyle = {
@@ -6050,9 +6212,9 @@ const Radio = React.forwardRef(({ defaultChecked, value, selected, onSelect, dis
 		color: grayScale[12],
 		fontSize: sizeValues.fontSize
 	};
-	return /* @__PURE__ */ jsxs(AnimatedPressable_default, {
+	return /* @__PURE__ */ jsxs(AnimatedPressable, {
 		ref,
-		style: styles$26.container,
+		style: styles$28.container,
 		onPress: handlePress,
 		disabled,
 		accessibilityRole: "radio",
@@ -6068,19 +6230,19 @@ const Radio = React.forwardRef(({ defaultChecked, value, selected, onSelect, dis
 		hapticFeedback: false,
 		...rest,
 		children: [/* @__PURE__ */ jsx(RnView, {
-			style: [styles$26.radioOuter, outerStyle],
-			children: /* @__PURE__ */ jsx(RnView, { style: [styles$26.radioInner, innerStyle] })
+			style: [styles$28.radioOuter, outerStyle],
+			children: /* @__PURE__ */ jsx(RnView, { style: [styles$28.radioInner, innerStyle] })
 		}), children ? /* @__PURE__ */ jsx(RnView, {
-			style: styles$26.content,
+			style: styles$28.content,
 			children
 		}) : label ? /* @__PURE__ */ jsx(TextComponent, {
-			style: [styles$26.label, labelStyle],
+			style: [styles$28.label, labelStyle],
 			children: label
 		}) : null]
 	});
 });
 Radio.displayName = "Radio";
-const styles$26 = StyleSheet.create({
+const styles$28 = StyleSheet.create({
 	container: {
 		flexDirection: "row",
 		alignItems: "center"
@@ -6131,7 +6293,7 @@ const RadioGroupRoot = React.forwardRef(({ value: controlledValue, defaultValue,
 		children: /* @__PURE__ */ jsx(RnView, {
 			ref,
 			style: [
-				styles$25.container,
+				styles$27.container,
 				containerStyle,
 				style
 			],
@@ -6162,7 +6324,7 @@ const RadioGroupItem = React.forwardRef(({ value, disabled: itemDisabled, ...pro
 	});
 });
 RadioGroupItem.displayName = "RadioGroup.Item";
-const styles$25 = StyleSheet.create({ container: { width: "100%" } });
+const styles$27 = StyleSheet.create({ container: { width: "100%" } });
 const RadioGroup = {
 	Root: RadioGroupRoot,
 	Item: RadioGroupItem
@@ -6204,7 +6366,7 @@ const RadioCardsRoot = React.forwardRef(({ value: controlledValue, defaultValue,
 		children: /* @__PURE__ */ jsx(RnView, {
 			ref,
 			style: [
-				styles$24.rootContainer,
+				styles$26.rootContainer,
 				containerStyle,
 				style
 			],
@@ -6218,6 +6380,7 @@ const RadioCardsItem = React.forwardRef(({ value, side: itemSide, disabled: item
 	const context = useRadioCardsContext();
 	const theme = useTheme$1();
 	const mode = useThemeMode$1();
+	const globalHaptics = useHaptics$1();
 	const isDark = mode === "dark";
 	const { value: selectedValue, onValueChange, variant, size, color, highContrast, radius, side: rootSide, disabled: rootDisabled } = context;
 	const isSelected = selectedValue === value;
@@ -6253,14 +6416,14 @@ const RadioCardsItem = React.forwardRef(({ value, side: itemSide, disabled: item
 	const handlePress = () => {
 		if (!isDisabled) {
 			onValueChange(value);
-			Vibration.vibrate(10);
+			if (globalHaptics) triggerHaptic("press");
 		}
 	};
 	const cardStyle = {
 		padding: sizeValues.padding,
 		borderRadius: radius === "full" ? 9999 : radii,
 		borderWidth: isSelected ? 1.5 : 1,
-		borderColor: isSelected ? variantColors.borderColor : isDark ? grayAlpha["6"] : grayAlpha["6"],
+		borderColor: isSelected ? variantColors.borderColor : ["outline", "surface"].includes(variant) ? isDark ? grayAlpha["6"] : grayAlpha["6"] : "transparent",
 		backgroundColor: isSelected ? variantColors.backgroundColor : isDark ? grayAlpha["2"] : grayAlpha["2"],
 		opacity: isDisabled ? .5 : 1,
 		flexDirection: indicatorSide === "left" ? "row" : "row-reverse",
@@ -6283,10 +6446,10 @@ const RadioCardsItem = React.forwardRef(({ value, side: itemSide, disabled: item
 		borderRadius: sizeValues.innerIndicatorSize / 2,
 		backgroundColor: variantColors.textColor
 	};
-	return /* @__PURE__ */ jsxs(AnimatedPressable_default, {
+	return /* @__PURE__ */ jsxs(AnimatedPressable, {
 		ref,
 		style: [
-			styles$24.itemContainer,
+			styles$26.itemContainer,
 			cardStyle,
 			style
 		],
@@ -6311,15 +6474,15 @@ const RadioCardsItem = React.forwardRef(({ value, side: itemSide, disabled: item
 			style: indicatorStyle,
 			children: isSelected && /* @__PURE__ */ jsx(RnView, { style: innerDotStyle })
 		}), /* @__PURE__ */ jsx(RnView, {
-			style: styles$24.content,
+			style: styles$26.content,
 			children
 		})]
 	});
 });
 RadioCardsItem.displayName = "RadioCards.Item";
-const styles$24 = StyleSheet.create({
+const styles$26 = StyleSheet.create({
 	rootContainer: { width: "100%" },
-	itemContainer: { flex: 1 },
+	itemContainer: {},
 	content: { flex: 1 }
 });
 const RadioCards = {
@@ -6332,6 +6495,7 @@ const RadioCards = {
 const Switch = React.forwardRef(({ defaultChecked, checked, onCheckedChange, disabled = false, radius = "full", size = "2", color, variant = "solid", thumbColor, label, highContrast, accessibilityLabel, accessibilityHint, hapticFeedback = true, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const mode = useThemeMode$1();
+	const globalHaptics = useHaptics$1();
 	const isDark = mode === "dark";
 	const grayScale = isDark ? theme.colors.gray.dark : theme.colors.gray;
 	const grayAlpha = getGrayAlpha(theme);
@@ -6349,7 +6513,7 @@ const Switch = React.forwardRef(({ defaultChecked, checked, onCheckedChange, dis
 	const setChecked = (value) => {
 		if (checked === void 0) setInternalChecked(value);
 		if (onCheckedChange) onCheckedChange(value);
-		if (hapticFeedback && !disabled) Vibration.vibrate(10);
+		if (globalHaptics && hapticFeedback && !disabled) triggerHaptic("press");
 	};
 	const animatedValue = useRef(new Animated.Value(isChecked ? 1 : 0));
 	useEffect(() => {
@@ -6415,9 +6579,9 @@ const Switch = React.forwardRef(({ defaultChecked, checked, onCheckedChange, dis
 		color: grayScale[12],
 		fontSize: sizeValues.fontSize
 	};
-	return /* @__PURE__ */ jsxs(AnimatedPressable_default, {
+	return /* @__PURE__ */ jsxs(AnimatedPressable, {
 		ref,
-		style: styles$23.container,
+		style: styles$25.container,
 		onPress: handlePress,
 		disabled,
 		accessibilityRole: "switch",
@@ -6433,16 +6597,16 @@ const Switch = React.forwardRef(({ defaultChecked, checked, onCheckedChange, dis
 		hapticFeedback: false,
 		...rest,
 		children: [/* @__PURE__ */ jsx(RnView, {
-			style: [styles$23.track, trackStyle],
-			children: /* @__PURE__ */ jsx(Animated.View, { style: [styles$23.thumb, thumbStyle] })
+			style: [styles$25.track, trackStyle],
+			children: /* @__PURE__ */ jsx(Animated.View, { style: [styles$25.thumb, thumbStyle] })
 		}), label && /* @__PURE__ */ jsx(TextComponent, {
-			style: [styles$23.label, labelStyle],
+			style: [styles$25.label, labelStyle],
 			children: label
 		})]
 	});
 });
 Switch.displayName = "Switch";
-const styles$23 = StyleSheet.create({
+const styles$25 = StyleSheet.create({
 	container: {
 		flexDirection: "row",
 		alignItems: "center"
@@ -6640,25 +6804,25 @@ function calculateContextMenuPosition(touchPoint, contentSize, screenSize, side
 * ChevronDownIcon - A chevron pointing down using React Native View
 * Can be rotated to point in different directions
 */
-const ChevronDownIcon$1 = React.forwardRef(({ width = 9, height = 9, style, color = "currentColor" }, _forwardedRef) => {
+const ChevronDownIcon = React.forwardRef(({ width = 9, height = 9, style, color = "currentColor" }, _forwardedRef) => {
 	const armWidth = width * .55;
 	const armHeight = 2;
 	const armOffset = width * .22;
 	return /* @__PURE__ */ jsxs(View, {
 		style: [
-			styles$22.chevronContainer,
+			styles$24.chevronContainer,
 			{
 				width,
 				height
 			},
 			style
 		],
-		children: [/* @__PURE__ */ jsx(View, { style: [styles$22.chevronArm, {
+		children: [/* @__PURE__ */ jsx(View, { style: [styles$24.chevronArm, {
 			width: armWidth,
 			height: armHeight,
 			backgroundColor: color,
 			transform: [{ rotate: "45deg" }, { translateX: -armOffset }]
-		}] }), /* @__PURE__ */ jsx(View, { style: [styles$22.chevronArm, {
+		}] }), /* @__PURE__ */ jsx(View, { style: [styles$24.chevronArm, {
 			width: armWidth,
 			height: armHeight,
 			backgroundColor: color,
@@ -6666,7 +6830,7 @@ const ChevronDownIcon$1 = React.forwardRef(({ width = 9, height = 9, style, colo
 		}] })]
 	});
 });
-ChevronDownIcon$1.displayName = "ChevronDownIcon";
+ChevronDownIcon.displayName = "ChevronDownIcon";
 /**
 * ThickChevronRightIcon - A thick chevron pointing right using React Native View
 */
@@ -6675,19 +6839,19 @@ const ThickChevronRightIcon = React.forwardRef(({ width = 9, height = 9, style,
 	const armHeight = 2.5;
 	return /* @__PURE__ */ jsxs(View, {
 		style: [
-			styles$22.chevronContainer,
+			styles$24.chevronContainer,
 			{
 				width,
 				height
 			},
 			style
 		],
-		children: [/* @__PURE__ */ jsx(View, { style: [styles$22.chevronArm, {
+		children: [/* @__PURE__ */ jsx(View, { style: [styles$24.chevronArm, {
 			width: armWidth,
 			height: armHeight,
 			backgroundColor: color,
 			transform: [{ rotate: "45deg" }, { translateY: -1 }]
-		}] }), /* @__PURE__ */ jsx(View, { style: [styles$22.chevronArm, {
+		}] }), /* @__PURE__ */ jsx(View, { style: [styles$24.chevronArm, {
 			width: armWidth,
 			height: armHeight,
 			backgroundColor: color,
@@ -6702,14 +6866,14 @@ ThickChevronRightIcon.displayName = "ThickChevronRightIcon";
 const ThickCheckIcon = React.forwardRef(({ width = 9, height = 9, style, color = "currentColor" }, _forwardedRef) => {
 	return /* @__PURE__ */ jsxs(View, {
 		style: [
-			styles$22.checkContainer,
+			styles$24.checkContainer,
 			{
 				width,
 				height
 			},
 			style
 		],
-		children: [/* @__PURE__ */ jsx(View, { style: [styles$22.checkShortArm, { backgroundColor: color }] }), /* @__PURE__ */ jsx(View, { style: [styles$22.checkLongArm, { backgroundColor: color }] })]
+		children: [/* @__PURE__ */ jsx(View, { style: [styles$24.checkShortArm, { backgroundColor: color }] }), /* @__PURE__ */ jsx(View, { style: [styles$24.checkLongArm, { backgroundColor: color }] })]
 	});
 });
 ThickCheckIcon.displayName = "ThickCheckIcon";
@@ -6719,21 +6883,21 @@ ThickCheckIcon.displayName = "ThickCheckIcon";
 const ThickDividerHorizontalIcon = React.forwardRef(({ width = 9, height = 9, style, color = "currentColor" }, _forwardedRef) => {
 	return /* @__PURE__ */ jsx(View, {
 		style: [
-			styles$22.dividerContainer,
+			styles$24.dividerContainer,
 			{
 				width,
 				height
 			},
 			style
 		],
-		children: /* @__PURE__ */ jsx(View, { style: [styles$22.dividerLine, {
+		children: /* @__PURE__ */ jsx(View, { style: [styles$24.dividerLine, {
 			width: width * .9,
 			backgroundColor: color
 		}] })
 	});
 });
 ThickDividerHorizontalIcon.displayName = "ThickDividerHorizontalIcon";
-const styles$22 = StyleSheet.create({
+const styles$24 = StyleSheet.create({
 	chevronContainer: {
 		alignItems: "center",
 		justifyContent: "center"
@@ -6887,10 +7051,11 @@ const SelectRoot = ({ defaultValue, value: controlledValue, onValueChange, open:
 };
 const SelectTrigger = ({ children, asChild = false }) => {
 	const { onOpenChange, open, anchorRef, measureAnchor, disabled } = useSelect();
+	const globalHaptics = useHaptics$1();
 	const handlePress = () => {
 		measureAnchor();
 		onOpenChange(!open);
-		Vibration.vibrate(10);
+		if (globalHaptics) triggerHaptic("press");
 	};
 	if (asChild && React.isValidElement(children)) {
 		const child = children;
@@ -6943,7 +7108,7 @@ const SelectValue = ({ placeholder = "Select an option", style }) => {
 				flexShrink: 1
 			}, style || {}],
 			children: selectedText || placeholder
-		}), /* @__PURE__ */ jsx(ChevronDownIcon$1, {
+		}), /* @__PURE__ */ jsx(ChevronDownIcon, {
 			color: selectedText ? variantColors.textColor : grayAlpha[9],
 			width: sizeStyles(),
 			height: sizeStyles(),
@@ -6967,7 +7132,7 @@ const SelectOverlay = ({ style }) => {
 	const { onOpenChange } = useSelect();
 	return /* @__PURE__ */ jsx(TouchableWithoutFeedback, {
 		onPress: () => onOpenChange(false),
-		children: /* @__PURE__ */ jsx(View, { style: [styles$21.overlay, style] })
+		children: /* @__PURE__ */ jsx(View, { style: [styles$23.overlay, style] })
 	});
 };
 const SelectContent = ({ children, side = "bottom", sideOffset = 4, align = "start", alignOffset = 0, avoidCollisions = true, size = 2, style }) => {
@@ -7052,7 +7217,7 @@ const SelectContent = ({ children, side = "bottom", sideOffset = 4, align = "sta
 			ref: contentRef,
 			onLayout: handleLayout,
 			style: [
-				styles$21.content,
+				styles$23.content,
 				{
 					backgroundColor: isDark ? colors[3] : colors[1],
 					borderRadius: radii.medium,
@@ -7089,6 +7254,7 @@ const SelectItem = ({ children, value: itemValue, disabled = false, style }) =>
 	const { value, onValueChange, colors, onOpenChange, size, registerItem, unregisterItem, setSelectedItemText, color } = useSelect();
 	const theme = useTheme$1();
 	const mode = useThemeMode$1();
+	const globalHaptics = useHaptics$1();
 	const isSelected = value === itemValue;
 	const extractText = useCallback((node) => {
 		if (typeof node === "string") return node;
@@ -7169,7 +7335,7 @@ const SelectItem = ({ children, value: itemValue, disabled = false, style }) =>
 		if (!disabled) {
 			setSelectedItemText(extractText(children));
 			onValueChange(itemValue);
-			Vibration.vibrate(10);
+			if (globalHaptics) triggerHaptic("press");
 		}
 	};
 	const itemPadding = getItemPadding();
@@ -7184,8 +7350,8 @@ const SelectItem = ({ children, value: itemValue, disabled = false, style }) =>
 		onPress: handlePress,
 		disabled,
 		style: [
-			styles$21.item,
-			disabled && styles$21.itemDisabled,
+			styles$23.item,
+			disabled && styles$23.itemDisabled,
 			itemPadding,
 			style,
 			{
@@ -7249,7 +7415,7 @@ const SelectItem = ({ children, value: itemValue, disabled = false, style }) =>
 const SelectSeparator = ({ style }) => {
 	const { colors } = useSelect();
 	return /* @__PURE__ */ jsx(View, { style: [
-		styles$21.separator,
+		styles$23.separator,
 		{ backgroundColor: colors[6] },
 		style
 	] });
@@ -7293,7 +7459,7 @@ const SelectLabel = ({ children, style = {} }) => {
 		children
 	});
 };
-const styles$21 = StyleSheet.create({
+const styles$23 = StyleSheet.create({
 	overlay: {
 		flex: 1,
 		backgroundColor: "rgba(0, 0, 0, 0.01)"
@@ -7351,6 +7517,7 @@ const isRangeValue = (value) => {
 const Slider = React.forwardRef(({ value: controlledValue, defaultValue, onValueChange, onValueChangeEnd, min = 0, max = 100, step = 1, disabled = false, size = "2", variant = "solid", color, radius = "full", highContrast = false, minStepsBetweenThumbs = 0, label, showValueLabel = false, valueLabelFormatter = (v) => v.toString(), accessibilityLabel, accessibilityHint, style, hapticFeedback = true, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const mode = useThemeMode$1();
+	const globalHaptics = useHaptics$1();
 	const isDark = mode === "dark";
 	const grayScale = isDark ? theme.colors.gray.dark : theme.colors.gray;
 	const grayAlpha = getGrayAlpha(theme);
@@ -7499,7 +7666,7 @@ const Slider = React.forwardRef(({ value: controlledValue, defaultValue, onValue
 		const touchX = event.nativeEvent.locationX;
 		const position = Math.max(0, Math.min(1, touchX / currentTrackLayout.width));
 		const newValue = positionToValue(position);
-		if (hapticFeedback) Vibration.vibrate(10);
+		if (globalHaptics && hapticFeedback) triggerHaptic("press");
 		if (valuesRef.current.length === 1) {
 			updateValue([newValue]);
 			handleValueChangeEnd([newValue]);
@@ -7555,7 +7722,7 @@ const Slider = React.forwardRef(({ value: controlledValue, defaultValue, onValue
 			const nearestIndex = getNearestThumbIndex(Math.max(0, Math.min(1, touchX / trackLayoutRef2.current.width)));
 			setActiveThumbIndex(nearestIndex);
 			activeThumbIndexRef.current = nearestIndex;
-			if (hapticFeedback) Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback) triggerHaptic("selection");
 		},
 		onPanResponderMove: (_event, gestureState) => {
 			if (activeThumbIndexRef.current !== null) handleDrag(gestureState, activeThumbIndexRef.current);
@@ -7564,13 +7731,13 @@ const Slider = React.forwardRef(({ value: controlledValue, defaultValue, onValue
 			setActiveThumbIndex(null);
 			activeThumbIndexRef.current = null;
 			handleValueChangeEnd(valuesRef.current);
-			if (hapticFeedback) Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback) triggerHaptic("selection");
 		},
 		onPanResponderTerminate: () => {
 			setActiveThumbIndex(null);
 			activeThumbIndexRef.current = null;
 			handleValueChangeEnd(valuesRef.current);
-			if (hapticFeedback) Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback) triggerHaptic("selection");
 		},
 		onPanResponderTerminationRequest: () => false
 	})).current;
@@ -7716,7 +7883,7 @@ const Slider = React.forwardRef(({ value: controlledValue, defaultValue, onValue
 	]);
 	return /* @__PURE__ */ jsxs(RnView, {
 		ref,
-		style: [styles$20.container, style],
+		style: [styles$22.container, style],
 		accessibilityRole: "adjustable",
 		accessibilityLabel: accessibilityLabel || label || "Slider",
 		accessibilityHint: accessibilityHint || `Value: ${formatValueLabel()}, range: ${min} to ${max}`,
@@ -7724,17 +7891,17 @@ const Slider = React.forwardRef(({ value: controlledValue, defaultValue, onValue
 		accessibilityState: { disabled },
 		...rest,
 		children: [(label || showValueLabel) && /* @__PURE__ */ jsxs(RnView, {
-			style: styles$20.labelContainer,
+			style: styles$22.labelContainer,
 			children: [label && /* @__PURE__ */ jsx(TextComponent, {
-				style: [styles$20.label, labelStyle],
+				style: [styles$22.label, labelStyle],
 				children: label
 			}), showValueLabel && /* @__PURE__ */ jsx(TextComponent, {
-				style: [styles$20.valueLabel, labelStyle],
+				style: [styles$22.valueLabel, labelStyle],
 				children: formatValueLabel()
 			})]
 		}), /* @__PURE__ */ jsxs(RnView, {
 			ref: trackLayoutRef,
-			style: [styles$20.track, {
+			style: [styles$22.track, {
 				height: sizeValues.trackHeight,
 				borderRadius,
 				backgroundColor: trackBackgroundColor,
@@ -7747,15 +7914,15 @@ const Slider = React.forwardRef(({ value: controlledValue, defaultValue, onValue
 				values.length === 1 && thumbAnimations[0] && /* @__PURE__ */ jsx(Animated.View, { style: getFilledTrackStyle(thumbAnimations[0], 0) }),
 				values.length === 2 && thumbAnimations[0] && thumbAnimations[1] && /* @__PURE__ */ jsx(Animated.View, { style: getFilledTrackStyle(thumbAnimations[1], 1) }),
 				thumbAnimations.slice(0, values.length).map((animatedValue, index) => /* @__PURE__ */ jsx(Animated.View, {
-					style: [styles$20.thumb, getThumbStyle(animatedValue)],
-					children: !disabled && /* @__PURE__ */ jsx(RnView, { style: [styles$20.thumbInner, thumbInnerStyle] })
+					style: [styles$22.thumb, getThumbStyle(animatedValue)],
+					children: !disabled && /* @__PURE__ */ jsx(RnView, { style: [styles$22.thumbInner, thumbInnerStyle] })
 				}, index))
 			]
 		})]
 	});
 });
 Slider.displayName = "Slider";
-const styles$20 = StyleSheet.create({
+const styles$22 = StyleSheet.create({
 	container: { width: "100%" },
 	labelContainer: {
 		flexDirection: "row",
@@ -7835,7 +8002,7 @@ const DialogOverlay = ({ style }) => {
 	const { grayAlpha } = useDialog();
 	const overlayColor = useThemeMode$1() === "dark" ? "rgba(0, 0, 0, 0.6)" : "rgba(10, 10, 10, 0.6)";
 	return /* @__PURE__ */ jsx(TouchableWithoutFeedback, { children: /* @__PURE__ */ jsx(View, { style: [
-		styles$19.overlay,
+		styles$21.overlay,
 		{ backgroundColor: overlayColor },
 		style
 	] }) });
@@ -7877,7 +8044,7 @@ const DialogContent = ({ children, style, hideCloseButton = false, size = 2 }) =
 	const maxWidth = size <= 2 ? Math.min(screenWidth - 64, 400) : Math.min(screenWidth - 64, 500);
 	return /* @__PURE__ */ jsxs(View, {
 		style: [
-			styles$19.content,
+			styles$21.content,
 			{
 				backgroundColor: isDark ? theme.colors.gray.dark[2] : "#ffffff",
 				borderRadius: sizeStyles.radius,
@@ -7891,14 +8058,14 @@ const DialogContent = ({ children, style, hideCloseButton = false, size = 2 }) =
 			style
 		],
 		children: [/* @__PURE__ */ jsx(ScrollView, {
-			style: styles$19.scrollContent,
-			contentContainerStyle: styles$19.scrollContentContainer,
+			style: styles$21.scrollContent,
+			contentContainerStyle: styles$21.scrollContentContainer,
 			showsVerticalScrollIndicator: true,
 			bounces: true,
 			children
 		}), !hideCloseButton && /* @__PURE__ */ jsx(Pressable, {
 			onPress: handleClose,
-			style: [styles$19.closeButton, { backgroundColor: isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)" }],
+			style: [styles$21.closeButton, { backgroundColor: isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)" }],
 			accessibilityRole: "button",
 			accessibilityLabel: "Close dialog",
 			children: /* @__PURE__ */ jsx(TextComponent, {
@@ -7983,7 +8150,7 @@ const DialogAction = ({ children, onPress, ...buttonProps }) => {
 		children
 	});
 };
-const styles$19 = StyleSheet.create({
+const styles$21 = StyleSheet.create({
 	overlay: {
 		flex: 1,
 		backgroundColor: "rgba(0, 0, 0, 0.5)"
@@ -8080,7 +8247,7 @@ const AlertDialogPortal = ({ children, hostId }) => {
 const AlertDialogOverlay = ({ style }) => {
 	const overlayColor = useThemeMode$1() === "dark" ? "rgba(0, 0, 0, 0.6)" : "rgba(10, 10, 10, 0.6)";
 	return /* @__PURE__ */ jsx(TouchableWithoutFeedback, { children: /* @__PURE__ */ jsx(View, { style: [
-		styles$18.overlay,
+		styles$20.overlay,
 		{ backgroundColor: overlayColor },
 		style
 	] }) });
@@ -8121,7 +8288,7 @@ const AlertDialogContent = ({ children, style, hideCloseButton = true, size = 2
 	};
 	return /* @__PURE__ */ jsxs(View, {
 		style: [
-			styles$18.content,
+			styles$20.content,
 			{
 				backgroundColor: isDark ? theme.colors.gray.dark[2] : theme.colors.gray[1],
 				borderRadius: sizeStyles.radius,
@@ -8135,14 +8302,14 @@ const AlertDialogContent = ({ children, style, hideCloseButton = true, size = 2
 			style
 		],
 		children: [/* @__PURE__ */ jsx(ScrollView, {
-			style: styles$18.scrollContent,
-			contentContainerStyle: styles$18.scrollContentContainer,
+			style: styles$20.scrollContent,
+			contentContainerStyle: styles$20.scrollContentContainer,
 			showsVerticalScrollIndicator: true,
 			bounces: true,
 			children
 		}), !hideCloseButton && /* @__PURE__ */ jsx(Pressable, {
 			onPress: handleClose,
-			style: [styles$18.closeButton, { backgroundColor: isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)" }],
+			style: [styles$20.closeButton, { backgroundColor: isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)" }],
 			accessibilityRole: "button",
 			accessibilityLabel: "Close dialog",
 			children: /* @__PURE__ */ jsx(TextComponent, {
@@ -8232,7 +8399,7 @@ const AlertDialog = ({ open, onOpenChange, title, description, cancel, action, c
 			description && /* @__PURE__ */ jsx(AlertDialogDescription, { children: description }),
 			children,
 			/* @__PURE__ */ jsxs(View, {
-				style: styles$18.actionRow,
+				style: styles$20.actionRow,
 				children: [cancel && /* @__PURE__ */ jsx(AlertDialogCancel, {
 					variant: "ghost",
 					children: cancel.label || "Cancel"
@@ -8246,7 +8413,7 @@ const AlertDialog = ({ open, onOpenChange, title, description, cancel, action, c
 		] })] })
 	});
 };
-const styles$18 = StyleSheet.create({
+const styles$20 = StyleSheet.create({
 	overlay: {
 		flex: 1,
 		backgroundColor: "rgba(0, 0, 0, 0.5)"
@@ -8440,7 +8607,7 @@ const PopoverOverlay = ({ style }) => {
 	const { onOpenChange } = usePopover();
 	return /* @__PURE__ */ jsx(TouchableWithoutFeedback, {
 		onPress: () => onOpenChange(false),
-		children: /* @__PURE__ */ jsx(View, { style: [styles$17.overlay, style] })
+		children: /* @__PURE__ */ jsx(View, { style: [styles$19.overlay, style] })
 	});
 };
 const PopoverContent = ({ children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, avoidCollisions = true, size = 2, style }) => {
@@ -8509,7 +8676,7 @@ const PopoverContent = ({ children, side = "bottom", sideOffset = 4, align = "ce
 		ref: contentRef,
 		onLayout: handleLayout,
 		style: [
-			styles$17.content,
+			styles$19.content,
 			{
 				backgroundColor: colors["1"] || grayAlpha["12"],
 				borderRadius: radii.medium,
@@ -8575,7 +8742,7 @@ const PopoverClose = ({ children, ariaLabel = "Close popover" }) => {
 	const { onOpenChange, colors } = usePopover();
 	return /* @__PURE__ */ jsx(Pressable, {
 		onPress: () => onOpenChange(false),
-		style: styles$17.closeButton,
+		style: styles$19.closeButton,
 		accessibilityLabel: ariaLabel,
 		accessibilityRole: "button",
 		children: children || /* @__PURE__ */ jsx(TextComponent, {
@@ -8587,7 +8754,7 @@ const PopoverClose = ({ children, ariaLabel = "Close popover" }) => {
 		})
 	});
 };
-const styles$17 = StyleSheet.create({
+const styles$19 = StyleSheet.create({
 	overlay: {
 		flex: 1,
 		backgroundColor: "rgba(0, 0, 0, 0.01)"
@@ -8748,7 +8915,7 @@ const TooltipPortal = ({ children }) => {
 		children: /* @__PURE__ */ jsx(TouchableWithoutFeedback, {
 			onPress: () => onOpenChange(false),
 			children: /* @__PURE__ */ jsx(View, {
-				style: styles$16.overlay,
+				style: styles$18.overlay,
 				children
 			})
 		})
@@ -8809,7 +8976,7 @@ const TooltipContent = ({ children, side = "top", sideOffset = 8, align = "cente
 		ref: contentRef,
 		onLayout: handleLayout,
 		style: [
-			styles$16.content,
+			styles$18.content,
 			{
 				backgroundColor: tooltipBackground,
 				borderRadius,
@@ -8835,15 +9002,15 @@ const TooltipContent = ({ children, side = "top", sideOffset = 8, align = "cente
 			},
 			children
 		}), /* @__PURE__ */ jsx(View, { style: [
-			styles$16.arrow,
-			actualSide === "top" && [styles$16.arrowBottom, { borderTopColor: arrowColor }],
-			actualSide === "bottom" && [styles$16.arrowTop, { borderBottomColor: arrowColor }],
-			actualSide === "left" && [styles$16.arrowRight, {
+			styles$18.arrow,
+			actualSide === "top" && [styles$18.arrowBottom, { borderTopColor: arrowColor }],
+			actualSide === "bottom" && [styles$18.arrowTop, { borderBottomColor: arrowColor }],
+			actualSide === "left" && [styles$18.arrowRight, {
 				borderLeftColor: arrowColor,
 				borderTopColor: "transparent",
 				borderBottomColor: "transparent"
 			}],
-			actualSide === "right" && [styles$16.arrowLeft, {
+			actualSide === "right" && [styles$18.arrowLeft, {
 				borderRightColor: arrowColor,
 				borderTopColor: "transparent",
 				borderBottomColor: "transparent"
@@ -8882,7 +9049,7 @@ const Tooltip = ({ children, content, side = "top", sideOffset = 8, align = "cen
 		}) })]
 	});
 };
-const styles$16 = StyleSheet.create({
+const styles$18 = StyleSheet.create({
 	overlay: {
 		flex: 1,
 		backgroundColor: "rgba(0, 0, 0, 0.01)"
@@ -8993,10 +9160,11 @@ const DropdownMenuRoot = ({ children, open: controlledOpen, onOpenChange, defaul
 };
 const DropdownMenuTrigger = ({ children, asChild = false, hapticFeedback = true }) => {
 	const { onOpenChange, open, anchorRef, measureAnchor } = useDropdownMenu();
+	const globalHaptics = useHaptics$1();
 	const handlePress = () => {
 		measureAnchor();
 		onOpenChange(!open);
-		if (hapticFeedback) Vibration.vibrate(10);
+		if (globalHaptics && hapticFeedback) triggerHaptic("press");
 	};
 	if (asChild && React.isValidElement(children)) {
 		const child = children;
@@ -9008,7 +9176,7 @@ const DropdownMenuTrigger = ({ children, asChild = false, hapticFeedback = true
 			}
 		});
 	}
-	return /* @__PURE__ */ jsx(AnimatedPressable_default, {
+	return /* @__PURE__ */ jsx(AnimatedPressable, {
 		ref: anchorRef,
 		onPress: handlePress,
 		pressedScale: .98,
@@ -9018,18 +9186,6 @@ const DropdownMenuTrigger = ({ children, asChild = false, hapticFeedback = true
 		children
 	});
 };
-/**
-* Default down chevron icon for dropdown menu trigger
-* Uses Unicode character for React Native compatibility
-*/
-const ChevronDownIcon = ({ size, color }) => /* @__PURE__ */ jsx(TextComponent, {
-	style: {
-		fontSize: size || 16,
-		color: color || "currentColor",
-		lineHeight: size ? size + 2 : 18
-	},
-	children: "▾"
-});
 const DropdownMenuTriggerIcon = ({ icon, variant = "ghost", color, size = 2, disabled, accessibilityLabel = "Open menu", highContrast, style }) => {
 	const { onOpenChange, open, anchorRef, measureAnchor } = useDropdownMenu();
 	const handlePress = () => {
@@ -9065,7 +9221,7 @@ const DropdownMenuOverlay = ({ style }) => {
 	const { onOpenChange } = useDropdownMenu();
 	return /* @__PURE__ */ jsx(TouchableWithoutFeedback, {
 		onPress: () => onOpenChange(false),
-		children: /* @__PURE__ */ jsx(View, { style: [styles$15.overlay, style] })
+		children: /* @__PURE__ */ jsx(View, { style: [styles$17.overlay, style] })
 	});
 };
 const DropdownMenuContent = ({ children, side = "bottom", sideOffset = 4, align = "start", alignOffset = 0, avoidCollisions = true, size = 2, style }) => {
@@ -9149,7 +9305,7 @@ const DropdownMenuContent = ({ children, side = "bottom", sideOffset = 4, align
 			ref: contentRef,
 			onLayout: handleLayout,
 			style: [
-				styles$15.content,
+				styles$17.content,
 				{
 					backgroundColor: colors[1],
 					borderRadius: radii.medium,
@@ -9180,6 +9336,7 @@ const DropdownMenuGroup = ({ children }) => {
 };
 const DropdownMenuItem = ({ children, color, onSelect, disabled = false, shortcut, style, hapticFeedback = true }) => {
 	const { colors, onOpenChange, size } = useDropdownMenu();
+	const globalHaptics = useHaptics$1();
 	const theme = useTheme$1();
 	const mode = useThemeMode$1();
 	const activeColor = color || theme.accentColor;
@@ -9224,17 +9381,17 @@ const DropdownMenuItem = ({ children, color, onSelect, disabled = false, shortcu
 		if (!disabled) {
 			onSelect?.();
 			onOpenChange(false);
-			if (hapticFeedback) Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback) triggerHaptic("press");
 		}
 	};
 	const itemPadding = getItemPadding();
 	const fontSize = getFontSize();
-	return /* @__PURE__ */ jsxs(AnimatedPressable_default, {
+	return /* @__PURE__ */ jsxs(AnimatedPressable, {
 		onPress: handlePress,
 		disabled,
 		style: [
-			styles$15.item,
-			disabled && styles$15.itemDisabled,
+			styles$17.item,
+			disabled && styles$17.itemDisabled,
 			{ backgroundColor: disabled ? "transparent" : "transparent" },
 			itemPadding,
 			style
@@ -9264,7 +9421,7 @@ const DropdownMenuItem = ({ children, color, onSelect, disabled = false, shortcu
 const DropdownMenuSeparator = ({ style }) => {
 	const { colors } = useDropdownMenu();
 	return /* @__PURE__ */ jsx(View, { style: [
-		styles$15.separator,
+		styles$17.separator,
 		{ backgroundColor: colors[6] },
 		style
 	] });
@@ -9337,7 +9494,7 @@ const DropdownMenuCheckboxItem = ({ children, checked, onCheckedChange, disabled
 				alignItems: "center"
 			},
 			children: [/* @__PURE__ */ jsx(View, {
-				style: [styles$15.checkbox, {
+				style: [styles$17.checkbox, {
 					width: checkboxSize,
 					height: checkboxSize,
 					borderColor: colors[9],
@@ -9364,6 +9521,7 @@ const DropdownMenuCheckboxItem = ({ children, checked, onCheckedChange, disabled
 };
 const DropdownMenuRadioItem = ({ children, value, checked, onCheckedChange, disabled = false, hapticFeedback = true }) => {
 	const { colors, size } = useDropdownMenu();
+	const globalHaptics = useHaptics$1();
 	const theme = useTheme$1();
 	const getFontSize = useCallback(() => {
 		switch (size) {
@@ -9384,7 +9542,7 @@ const DropdownMenuRadioItem = ({ children, value, checked, onCheckedChange, disa
 	const handlePress = () => {
 		if (!disabled) {
 			onCheckedChange(value);
-			if (hapticFeedback) Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback) triggerHaptic("press");
 		}
 	};
 	const itemPadding = useCallback(() => {
@@ -9403,12 +9561,12 @@ const DropdownMenuRadioItem = ({ children, value, checked, onCheckedChange, disa
 			};
 		}
 	}, [size, theme.space])();
-	return /* @__PURE__ */ jsx(AnimatedPressable_default, {
+	return /* @__PURE__ */ jsx(AnimatedPressable, {
 		onPress: handlePress,
 		disabled,
 		style: [
-			styles$15.item,
-			disabled && styles$15.itemDisabled,
+			styles$17.item,
+			disabled && styles$17.itemDisabled,
 			itemPadding
 		],
 		accessibilityRole: "menuitem",
@@ -9427,7 +9585,7 @@ const DropdownMenuRadioItem = ({ children, value, checked, onCheckedChange, disa
 				flex: 1
 			},
 			children: [/* @__PURE__ */ jsx(View, {
-				style: [styles$15.radio, {
+				style: [styles$17.radio, {
 					width: radioSize,
 					height: radioSize,
 					borderRadius: radioSize / 2,
@@ -9456,6 +9614,7 @@ const DropdownMenuSub = ({ children }) => {
 };
 const DropdownMenuSubTrigger = ({ children, hapticFeedback = true }) => {
 	const { colors, openSubmenu, onOpenSubmenu, size } = useDropdownMenu();
+	const globalHaptics = useHaptics$1();
 	const theme = useTheme$1();
 	const submenuId = "submenu";
 	const getFontSize = useCallback(() => {
@@ -9483,13 +9642,13 @@ const DropdownMenuSubTrigger = ({ children, hapticFeedback = true }) => {
 	}, [size, theme.space]);
 	const handlePress = () => {
 		onOpenSubmenu(openSubmenu === submenuId ? null : submenuId);
-		if (hapticFeedback) Vibration.vibrate(10);
+		if (globalHaptics && hapticFeedback) triggerHaptic("press");
 	};
 	const itemPadding = getItemPadding();
 	const fontSize = getFontSize();
-	return /* @__PURE__ */ jsxs(AnimatedPressable_default, {
+	return /* @__PURE__ */ jsxs(AnimatedPressable, {
 		onPress: handlePress,
-		style: [styles$15.item, itemPadding],
+		style: [styles$17.item, itemPadding],
 		pressedScale: .98,
 		pressedOpacity: .95,
 		animationDuration: 100,
@@ -9530,7 +9689,7 @@ const DropdownMenuSubContent = ({ children }) => {
 		}
 	}, [size, theme.space])();
 	return /* @__PURE__ */ jsx(View, {
-		style: [styles$15.content, {
+		style: [styles$17.content, {
 			backgroundColor: colors[1],
 			borderRadius: radii.medium,
 			borderWidth: 1,
@@ -9545,7 +9704,7 @@ const DropdownMenuSubContent = ({ children }) => {
 		children
 	});
 };
-const styles$15 = StyleSheet.create({
+const styles$17 = StyleSheet.create({
 	overlay: {
 		flex: 1,
 		backgroundColor: "rgba(0, 0, 0, 0.01)"
@@ -9639,6 +9798,7 @@ const ContextMenuRoot = ({ children, open: controlledOpen, onOpenChange, default
 };
 const ContextMenuTrigger = ({ children, onLongPress, asChild = false, hapticFeedback = true }) => {
 	const { setPosition, onOpenChange } = useContextMenuContext();
+	const globalHaptics = useHaptics$1();
 	const handleLongPress = (event) => {
 		const { pageX, pageY } = event.nativeEvent;
 		setPosition({
@@ -9647,7 +9807,7 @@ const ContextMenuTrigger = ({ children, onLongPress, asChild = false, hapticFeed
 		});
 		onOpenChange(true);
 		onLongPress?.(event);
-		if (hapticFeedback) Vibration.vibrate(10);
+		if (globalHaptics && hapticFeedback) triggerHaptic("press");
 	};
 	if (asChild && React.isValidElement(children)) {
 		const child = children;
@@ -9656,7 +9816,7 @@ const ContextMenuTrigger = ({ children, onLongPress, asChild = false, hapticFeed
 			handleLongPress(e);
 		} });
 	}
-	return /* @__PURE__ */ jsx(AnimatedPressable_default, {
+	return /* @__PURE__ */ jsx(AnimatedPressable, {
 		onLongPress: handleLongPress,
 		pressedScale: .98,
 		pressedOpacity: .95,
@@ -9681,7 +9841,7 @@ const ContextMenuOverlay = ({ style }) => {
 	const { onOpenChange } = useContextMenuContext();
 	return /* @__PURE__ */ jsx(TouchableWithoutFeedback, {
 		onPress: () => onOpenChange(false),
-		children: /* @__PURE__ */ jsx(View, { style: [styles$14.overlay, style] })
+		children: /* @__PURE__ */ jsx(View, { style: [styles$16.overlay, style] })
 	});
 };
 /**
@@ -9718,6 +9878,7 @@ const getSizeStyles$2 = (size, theme) => {
 const ContextMenuContent = ({ children, side = "bottom", sideOffset = 4, align = "start", alignOffset = 0, avoidCollisions = true, size = 2, style }) => {
 	const { colors, radii, position } = useContextMenuContext();
 	const theme = useTheme$1();
+	const mode = useThemeMode$1();
 	const contentRef = useRef(null);
 	const [contentSize, setContentSize] = useState({
 		width: 0,
@@ -9763,12 +9924,11 @@ const ContextMenuContent = ({ children, side = "bottom", sideOffset = 4, align =
 			ref: contentRef,
 			onLayout: handleLayout,
 			style: [
-				styles$14.content,
+				styles$16.content,
 				{
-					backgroundColor: colors[1],
-					borderRadius: radii.medium,
-					borderWidth: 1,
-					borderColor: colors[6],
+					backgroundColor: mode === "dark" ? colors[3] : colors[1],
+					borderRadius: theme.radii[theme.radius] || radii.medium,
+					borderColor: colors[2],
 					paddingVertical: sizeStyles.paddingVertical,
 					paddingHorizontal: sizeStyles.paddingHorizontal,
 					minWidth: sizeStyles.minWidth,
@@ -9798,11 +9958,12 @@ const ContextMenuGroup = ({ children }) => {
 const ContextMenuItem = ({ children, color, onSelect, disabled = false, destructive = false, icon, shortcut, style, hapticFeedback = true }) => {
 	const { colors, onOpenChange, size } = useContextMenuContext();
 	const theme = useTheme$1();
+	const globalHaptics = useHaptics$1();
 	const handlePress = () => {
 		if (!disabled) {
 			onSelect?.();
 			onOpenChange(false);
-			if (hapticFeedback) Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback) triggerHaptic("press");
 		}
 	};
 	const getFontSize = useCallback(() => {
@@ -9837,12 +9998,12 @@ const ContextMenuItem = ({ children, color, onSelect, disabled = false, destruct
 	const itemPadding = getItemPadding();
 	const destructiveColor = theme.colors.red[11];
 	const textColor = disabled ? colors[8] : destructive ? destructiveColor : colors[12];
-	return /* @__PURE__ */ jsxs(AnimatedPressable_default, {
+	return /* @__PURE__ */ jsxs(AnimatedPressable, {
 		onPress: handlePress,
 		disabled,
 		style: [
-			styles$14.item,
-			disabled && styles$14.itemDisabled,
+			styles$16.item,
+			disabled && styles$16.itemDisabled,
 			itemPadding,
 			style
 		],
@@ -9878,7 +10039,7 @@ const ContextMenuItem = ({ children, color, onSelect, disabled = false, destruct
 const ContextMenuSeparator = ({ style }) => {
 	const { colors } = useContextMenuContext();
 	return /* @__PURE__ */ jsx(View, { style: [
-		styles$14.separator,
+		styles$16.separator,
 		{ backgroundColor: colors[6] },
 		style
 	] });
@@ -9952,7 +10113,7 @@ const ContextMenuCheckboxItem = ({ children, checked, onCheckedChange, disabled
 				flex: 1
 			},
 			children: [/* @__PURE__ */ jsx(View, {
-				style: [styles$14.checkbox, {
+				style: [styles$16.checkbox, {
 					width: checkboxSize,
 					height: checkboxSize,
 					borderColor: colors[9],
@@ -9977,9 +10138,10 @@ const ContextMenuCheckboxItem = ({ children, checked, onCheckedChange, disabled
 		})
 	});
 };
-const ContextMenuRadioItem = ({ children, value, checked, onCheckedChange, disabled = false }) => {
+const ContextMenuRadioItem = ({ children, value, checked, onCheckedChange, disabled = false, hapticFeedback = true }) => {
 	const { colors, size } = useContextMenuContext();
 	const theme = useTheme$1();
+	const globalHaptics = useHaptics$1();
 	const getFontSize = useCallback(() => {
 		switch (size) {
 			case 1: return theme.typography.fontSizes[1].fontSize;
@@ -9999,7 +10161,7 @@ const ContextMenuRadioItem = ({ children, value, checked, onCheckedChange, disab
 	const handlePress = () => {
 		if (!disabled) {
 			onCheckedChange(value);
-			Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback) triggerHaptic("press");
 		}
 	};
 	const itemPadding = useCallback(() => {
@@ -10018,12 +10180,12 @@ const ContextMenuRadioItem = ({ children, value, checked, onCheckedChange, disab
 			};
 		}
 	}, [size, theme.space])();
-	return /* @__PURE__ */ jsx(AnimatedPressable_default, {
+	return /* @__PURE__ */ jsx(AnimatedPressable, {
 		onPress: handlePress,
 		disabled,
 		style: [
-			styles$14.item,
-			disabled && styles$14.itemDisabled,
+			styles$16.item,
+			disabled && styles$16.itemDisabled,
 			itemPadding
 		],
 		accessibilityRole: "menuitem",
@@ -10042,7 +10204,7 @@ const ContextMenuRadioItem = ({ children, value, checked, onCheckedChange, disab
 				flex: 1
 			},
 			children: [/* @__PURE__ */ jsx(View, {
-				style: [styles$14.radio, {
+				style: [styles$16.radio, {
 					width: radioSize,
 					height: radioSize,
 					borderRadius: radioSize / 2,
@@ -10066,7 +10228,7 @@ const ContextMenuRadioItem = ({ children, value, checked, onCheckedChange, disab
 		})
 	});
 };
-const styles$14 = StyleSheet.create({
+const styles$16 = StyleSheet.create({
 	overlay: {
 		flex: 1,
 		backgroundColor: "rgba(0, 0, 0, 0.01)"
@@ -10231,7 +10393,7 @@ const BottomSheetRoot = ({ children, open: controlledOpen, onOpenChange, snapPoi
 			},
 			onPanResponderRelease: (_, gestureState) => {
 				if (gestureState.dy > 100 || gestureState.vy > 500 / 1e3) {
-					Vibration.vibrate(10);
+					if (globalHaptics) triggerHaptic("selection");
 					Animated.timing(translateY, {
 						toValue: targetSnapHeight,
 						duration: 200,
@@ -10263,7 +10425,9 @@ const BottomSheetRoot = ({ children, open: controlledOpen, onOpenChange, snapPoi
 		}
 	}, [open]);
 	const theme = useTheme$1();
-	const colors = useThemeMode$1() === "dark" ? theme.colors.gray.dark : theme.colors.gray;
+	const mode = useThemeMode$1();
+	const globalHaptics = useHaptics$1();
+	const colors = mode === "dark" ? theme.colors.gray.dark : theme.colors.gray;
 	const grayAlpha = getGrayAlpha(theme);
 	const radii = theme.radii;
 	return /* @__PURE__ */ jsx(BottomSheetContext.Provider, {
@@ -10287,15 +10451,16 @@ const BottomSheetRoot = ({ children, open: controlledOpen, onOpenChange, snapPoi
 };
 const BottomSheetTrigger = ({ children, asChild = true, hapticFeedback = false }) => {
 	const { onOpenChange, open } = useBottomSheet();
+	const globalHaptics = useHaptics$1();
 	const handlePress = () => {
 		onOpenChange(true);
-		if (hapticFeedback) Vibration.vibrate(10);
+		if (globalHaptics && hapticFeedback) triggerHaptic("press");
 	};
 	if (asChild && React.isValidElement(children)) return React.cloneElement(children, { onPress: (e) => {
 		children.props?.onPress?.(e);
 		handlePress();
 	} });
-	return /* @__PURE__ */ jsx(AnimatedPressable_default, {
+	return /* @__PURE__ */ jsx(AnimatedPressable, {
 		onPress: handlePress,
 		pressedScale: .98,
 		pressedOpacity: .95,
@@ -10317,15 +10482,17 @@ const BottomSheetPortal = ({ children, hostId }) => {
 };
 const BottomSheetOverlay = ({ style, hapticFeedback = true }) => {
 	const { onOpenChange } = useBottomSheet();
-	const overlayColor = useThemeMode$1() === "dark" ? "rgba(0, 0, 0, 0.6)" : "rgba(10, 10, 10, 0.6)";
+	const mode = useThemeMode$1();
+	const globalHaptics = useHaptics$1();
+	const overlayColor = mode === "dark" ? "rgba(0, 0, 0, 0.6)" : "rgba(10, 10, 10, 0.6)";
 	const handlePress = () => {
 		onOpenChange(false);
-		if (hapticFeedback) Vibration.vibrate(10);
+		if (globalHaptics && hapticFeedback) triggerHaptic("selection");
 	};
 	return /* @__PURE__ */ jsx(TouchableWithoutFeedback, {
 		onPress: handlePress,
 		children: /* @__PURE__ */ jsx(View, { style: [
-			styles$13.overlay,
+			styles$15.overlay,
 			{ backgroundColor: overlayColor },
 			style
 		] })
@@ -10336,10 +10503,10 @@ const BottomSheetHandle = ({ style }) => {
 	const theme = useTheme$1();
 	const handleColor = useThemeMode$1() === "dark" ? theme.colors.gray.dark[8] : theme.colors.gray[8];
 	return /* @__PURE__ */ jsx(Pressable, {
-		style: styles$13.handleContainer,
+		style: styles$15.handleContainer,
 		...panHandlers,
 		children: /* @__PURE__ */ jsx(View, { style: [
-			styles$13.handle,
+			styles$15.handle,
 			{ backgroundColor: handleColor },
 			style
 		] })
@@ -10349,7 +10516,9 @@ const BottomSheetContent = ({ children, style, snapPoints: localSnapPoints, size
 	const { radii, snapPoints: contextSnapPoints, currentSnapIndex, translateY, snapHeights, panHandlers } = useBottomSheet();
 	const theme = useTheme$1();
 	const isDark = useThemeMode$1() === "dark";
+	const effectiveSnapPoints = localSnapPoints || contextSnapPoints;
 	const targetSnapHeight = snapHeights[currentSnapIndex] || snapHeights[0];
+	const maxTargetSnapHeight = snapHeights[effectiveSnapPoints.length - 1] || snapHeights[0];
 	const sizeStyles = getSizeStyles$1(size, theme.space, radii);
 	const shadow = getShadow(6, isDark);
 	const backgroundColor = isDark ? theme.colors.gray.dark[2] : "#ffffff";
@@ -10357,27 +10526,22 @@ const BottomSheetContent = ({ children, style, snapPoints: localSnapPoints, size
 	const borderTopRightRadius = radii.large;
 	return /* @__PURE__ */ jsxs(Animated.View, {
 		style: [
-			styles$13.content,
+			styles$15.content,
 			{
 				backgroundColor,
 				borderTopLeftRadius,
 				borderTopRightRadius,
 				flex: 1,
 				paddingHorizontal: sizeStyles.paddingHorizontal,
-				height: targetSnapHeight,
+				minHeight: targetSnapHeight,
+				maxHeight: maxTargetSnapHeight,
 				transform: [{ translateY }],
 				...shadow || {}
 			},
 			style
 		],
 		...panHandlers,
-		children: [!hideHandle && /* @__PURE__ */ jsx(BottomSheetHandle, {}), /* @__PURE__ */ jsx(ScrollView, {
-			style: styles$13.scrollContent,
-			contentContainerStyle: styles$13.scrollContentContainer,
-			showsVerticalScrollIndicator: true,
-			bounces: true,
-			children
-		})]
+		children: [!hideHandle && /* @__PURE__ */ jsx(BottomSheetHandle, {}), children]
 	});
 };
 const BottomSheetTitle = ({ children, style = {}, size = 4, weight = "bold", align, color, truncate, numberOfLines, fontFamily, opacity, asChild = false, ...rest }) => {
@@ -10427,7 +10591,7 @@ const BottomSheetFooter = ({ children, style, withBorder = true, withPadding = t
 	const borderColor = useThemeMode$1() === "dark" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)";
 	return /* @__PURE__ */ jsx(View, {
 		style: [
-			styles$13.footer,
+			styles$15.footer,
 			withBorder && {
 				borderTopWidth: 1,
 				borderTopColor: borderColor
@@ -10439,16 +10603,17 @@ const BottomSheetFooter = ({ children, style, withBorder = true, withPadding = t
 			style
 		],
 		children: /* @__PURE__ */ jsx(View, {
-			style: styles$13.footerContent,
+			style: styles$15.footerContent,
 			children
 		})
 	});
 };
 const BottomSheetClose = ({ children, asChild = true, hapticFeedback = false, ...buttonProps }) => {
 	const { onOpenChange } = useBottomSheet();
+	const globalHaptics = useHaptics$1();
 	const handlePress = () => {
 		onOpenChange(false);
-		if (hapticFeedback) Vibration.vibrate(10);
+		if (globalHaptics && hapticFeedback) triggerHaptic("selection");
 	};
 	if (asChild && children && React.isValidElement(children)) return React.cloneElement(children, { onPress: (e) => {
 		children.props?.onPress?.(e);
@@ -10463,10 +10628,11 @@ const BottomSheetClose = ({ children, asChild = true, hapticFeedback = false, ..
 };
 const BottomSheetAction = ({ children, onPress, hapticFeedback = true, ...buttonProps }) => {
 	const { onOpenChange } = useBottomSheet();
+	const globalHaptics = useHaptics$1();
 	const handlePress = () => {
 		onPress?.();
 		onOpenChange(false);
-		if (hapticFeedback) Vibration.vibrate(10);
+		if (globalHaptics && hapticFeedback) triggerHaptic("selection");
 	};
 	return /* @__PURE__ */ jsx(Button, {
 		...buttonProps,
@@ -10474,7 +10640,7 @@ const BottomSheetAction = ({ children, onPress, hapticFeedback = true, ...button
 		children
 	});
 };
-const styles$13 = StyleSheet.create({
+const styles$15 = StyleSheet.create({
 	overlay: {
 		flex: 1,
 		backgroundColor: "rgba(0, 0, 0, 0.5)"
@@ -10484,7 +10650,8 @@ const styles$13 = StyleSheet.create({
 		left: 0,
 		right: 0,
 		bottom: 0,
-		elevation: 4
+		elevation: 4,
+		paddingBottom: 16
 	},
 	handleContainer: {
 		alignItems: "center",
@@ -10503,8 +10670,7 @@ const styles$13 = StyleSheet.create({
 	footer: {
 		flexDirection: "row",
 		justifyContent: "flex-end",
-		alignItems: "center",
-		marginTop: 8
+		alignItems: "center"
 	},
 	footerContent: {
 		flexDirection: "row",
@@ -10526,49 +10692,617 @@ const BottomSheet = {
 };
 
 //#endregion
-//#region src/components/data-display/Avatar.tsx
-const Avatar = React.forwardRef(({ src, alt = "Avatar", color, variant = "solid", highContrast, radius, size = 2, fallback, fallbackBehavior = "character", style, accessibilityLabel, children }, ref) => {
-	const theme = useTheme$1();
-	const mode = useThemeMode$1();
-	const isDark = mode === "dark";
-	const grayScale = isDark ? theme.colors.gray.dark : theme.colors.gray;
-	const grayAlpha = getGrayAlpha(theme);
-	const activeColor = color || theme.accentColor;
-	const radii = theme.radii[radius] ?? theme.radii.medium;
-	const selectedRadius = radius || theme.radius;
-	const [imageError, setImageError] = useState(false);
-	const variantColors = useMemo(() => getVariantColors(theme, activeColor, mode, variant, highContrast), [
-		getVariantColors,
-		color,
-		variant,
-		highContrast,
-		isDark,
-		theme
-	]);
-	const getSizeValues = () => {
-		switch (size) {
-			case 1: return {
-				size: 24,
-				fontSize: 10,
-				borderWidth: 0,
-				borderRadius: selectedRadius === "full" ? 9999 : radii
-			};
-			case 2: return {
-				size: 32,
-				fontSize: 12,
-				borderWidth: 0,
-				borderRadius: selectedRadius === "full" ? 9999 : radii
-			};
-			case 3: return {
-				size: 48,
-				fontSize: 18,
-				borderWidth: 0,
-				borderRadius: selectedRadius === "full" ? 9999 : radii
-			};
-			case 4: return {
-				size: 64,
-				fontSize: 24,
-				borderWidth: 0,
+//#region src/components/overlays/Sidebar.tsx
+const SidebarContext = createContext(null);
+const useSidebar = () => {
+	const context = useContext(SidebarContext);
+	if (!context) throw new Error("Sidebar components must be used within a Sidebar.Root");
+	return context;
+};
+const { width: SCREEN_WIDTH } = Dimensions.get("window");
+const SidebarRoot = ({ children, open: controlledOpen, onOpenChange, side = "left", variant = "overlay", width = 280, animationDuration = 300 }) => {
+	const [internalOpen, setInternalOpen] = useState(false);
+	const open = controlledOpen !== void 0 ? controlledOpen : internalOpen;
+	const initialTranslateX = side === "left" ? -width : width;
+	const translateX = useRef(new Animated.Value(open ? 0 : initialTranslateX)).current;
+	const mainTranslateX = useRef(new Animated.Value(0)).current;
+	const skipAnimationRef = useRef(false);
+	const swipeDistance = useRef(0);
+	const isSwiping = useRef(false);
+	const startX = useRef(0);
+	const handleOpenChange = useCallback((newOpen, skipAnimation = false) => {
+		skipAnimationRef.current = skipAnimation;
+		if (controlledOpen === void 0) setInternalOpen(newOpen);
+		onOpenChange?.(newOpen);
+	}, [controlledOpen, onOpenChange]);
+	const panResponder = useMemo(() => {
+		return PanResponder.create({
+			onStartShouldSetPanResponder: () => false,
+			onMoveShouldSetPanResponder: (_, gestureState) => {
+				return Math.abs(gestureState.dx) > 10 && Math.abs(gestureState.dx) > Math.abs(gestureState.dy);
+			},
+			onPanResponderGrant: () => {
+				startX.current = 0;
+				isSwiping.current = true;
+			},
+			onPanResponderMove: (_, gestureState) => {
+				isSwiping.current = true;
+				swipeDistance.current = gestureState.dx;
+				if (side === "left") {
+					const newTranslateX = initialTranslateX + gestureState.dx;
+					const clampedValue = Math.max(-width, Math.min(0, newTranslateX));
+					translateX.setValue(clampedValue);
+				} else {
+					const newTranslateX = initialTranslateX + gestureState.dx;
+					const clampedValue = Math.max(0, Math.min(width, newTranslateX));
+					translateX.setValue(clampedValue);
+				}
+			},
+			onPanResponderRelease: (_, gestureState) => {
+				const threshold = width * .25;
+				const velocityThreshold = 500;
+				if (side === "left") if (gestureState.dx > threshold || gestureState.vx > velocityThreshold / 1e3) Animated.timing(translateX, {
+					toValue: 0,
+					duration: animationDuration,
+					useNativeDriver: true
+				}).start();
+				else if (gestureState.dx < -threshold || gestureState.vx < -velocityThreshold / 1e3) {
+					if (globalHaptics) triggerHaptic("selection");
+					Animated.timing(translateX, {
+						toValue: -width,
+						duration: animationDuration,
+						useNativeDriver: true
+					}).start();
+				} else Animated.spring(translateX, {
+					toValue: open ? 0 : -width,
+					tension: 65,
+					friction: 11,
+					useNativeDriver: true
+				}).start();
+				else if (gestureState.dx < -threshold || gestureState.vx < -velocityThreshold / 1e3) Animated.timing(translateX, {
+					toValue: 0,
+					duration: animationDuration,
+					useNativeDriver: true
+				}).start();
+				else if (gestureState.dx > threshold || gestureState.vx > velocityThreshold / 1e3) {
+					if (globalHaptics) triggerHaptic("selection");
+					Animated.timing(translateX, {
+						toValue: width,
+						duration: animationDuration,
+						useNativeDriver: true
+					}).start();
+				} else Animated.spring(translateX, {
+					toValue: open ? 0 : width,
+					tension: 65,
+					friction: 11,
+					useNativeDriver: true
+				}).start();
+				isSwiping.current = false;
+			}
+		});
+	}, [
+		translateX,
+		width,
+		side,
+		open,
+		initialTranslateX,
+		handleOpenChange,
+		globalHaptics
+	]);
+	useEffect(() => {
+		if (skipAnimationRef.current) {
+			skipAnimationRef.current = false;
+			return;
+		}
+		if (open) {
+			translateX.setValue(side === "left" ? -width : width);
+			Animated.timing(translateX, {
+				toValue: 0,
+				duration: animationDuration,
+				useNativeDriver: true
+			}).start();
+		} else Animated.timing(translateX, {
+			toValue: side === "left" ? -width : width,
+			duration: animationDuration,
+			useNativeDriver: true
+		}).start();
+	}, [
+		open,
+		width,
+		side,
+		translateX,
+		animationDuration
+	]);
+	useEffect(() => {
+		if (skipAnimationRef.current) return;
+		if (variant === "push") if (open) Animated.timing(mainTranslateX, {
+			toValue: side === "left" ? width : -width,
+			duration: animationDuration,
+			useNativeDriver: true
+		}).start();
+		else Animated.timing(mainTranslateX, {
+			toValue: 0,
+			duration: animationDuration,
+			useNativeDriver: true
+		}).start();
+	}, [
+		open,
+		width,
+		side,
+		variant,
+		mainTranslateX,
+		animationDuration
+	]);
+	const theme = useTheme$1();
+	const mode = useThemeMode$1();
+	const globalHaptics = useHaptics$1();
+	const colors = mode === "dark" ? theme.colors.gray.dark : theme.colors.gray;
+	const grayAlpha = getGrayAlpha(theme);
+	const radii = theme.radii;
+	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
+		value: {
+			open,
+			onOpenChange: handleOpenChange,
+			side,
+			variant,
+			width,
+			animationDuration,
+			colors,
+			grayAlpha,
+			radii,
+			translateX,
+			mainTranslateX,
+			panHandlers: panResponder.panHandlers,
+			globalHaptics
+		},
+		children
+	});
+};
+const SidebarTrigger = ({ children, asChild = true, hapticFeedback = false }) => {
+	const { onOpenChange, globalHaptics } = useSidebar();
+	const handlePress = () => {
+		onOpenChange(true);
+		if (globalHaptics && hapticFeedback) triggerHaptic("selection");
+	};
+	if (asChild && React.isValidElement(children)) return React.cloneElement(children, { onPress: (e) => {
+		children.props?.onPress?.(e);
+		handlePress();
+	} });
+	return /* @__PURE__ */ jsx(AnimatedPressable, {
+		onPress: handlePress,
+		pressedScale: .98,
+		pressedOpacity: .95,
+		animationDuration: 100,
+		hapticFeedback: false,
+		children
+	});
+};
+const SidebarPortal = ({ children }) => {
+	const { open, variant } = useSidebar();
+	if (variant === "push") return null;
+	return /* @__PURE__ */ jsx(Modal, {
+		transparent: true,
+		visible: open,
+		animationType: "none",
+		supportedOrientations: ["portrait", "landscape"],
+		onRequestClose: () => {},
+		children
+	});
+};
+const SidebarOverlay = ({ style, hapticFeedback = true }) => {
+	const { onOpenChange, variant, globalHaptics } = useSidebar();
+	const isDark = useThemeMode$1() === "dark";
+	if (variant === "push") return null;
+	const overlayColor = isDark ? "rgba(0, 0, 0, 0.6)" : "rgba(10, 10, 10, 0.6)";
+	const handlePress = () => {
+		onOpenChange(false);
+		if (globalHaptics && hapticFeedback) triggerHaptic("press");
+	};
+	return /* @__PURE__ */ jsx(TouchableWithoutFeedback, {
+		onPress: handlePress,
+		children: /* @__PURE__ */ jsx(View, { style: [
+			styles$14.overlay,
+			{ backgroundColor: overlayColor },
+			style
+		] })
+	});
+};
+const SidebarContent = ({ children, style }) => {
+	const { side, variant, width, translateX, panHandlers, radii, colors } = useSidebar();
+	const theme = useTheme$1();
+	const isDark = useThemeMode$1() === "dark";
+	const backgroundColor = isDark ? theme.colors.gray.dark[2] : "#ffffff";
+	const shadow = getShadow(6, isDark);
+	const borderRadius = side === "left" ? {
+		borderTopRightRadius: radii.large,
+		borderBottomRightRadius: radii.large
+	} : {
+		borderTopLeftRadius: radii.large,
+		borderBottomLeftRadius: radii.large
+	};
+	if (variant === "push") {
+		const positionStyle = side === "left" ? { marginRight: -width } : { marginLeft: -width };
+		return /* @__PURE__ */ jsx(Animated.View, {
+			style: [{
+				backgroundColor,
+				width,
+				...borderRadius,
+				transform: [{ translateX }],
+				...shadow || {},
+				...positionStyle
+			}, style],
+			...panHandlers,
+			children
+		});
+	}
+	const positionStyle = side === "left" ? { left: 0 } : { right: 0 };
+	return /* @__PURE__ */ jsx(Animated.View, {
+		style: [
+			styles$14.content,
+			{
+				backgroundColor,
+				width,
+				...borderRadius,
+				...positionStyle,
+				transform: [{ translateX }],
+				...shadow || {}
+			},
+			style
+		],
+		...panHandlers,
+		children
+	});
+};
+const SidebarHeader = ({ children, style }) => {
+	const theme = useTheme$1();
+	const borderColor = useThemeMode$1() === "dark" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)";
+	return /* @__PURE__ */ jsx(View, {
+		style: [
+			styles$14.header,
+			{
+				paddingHorizontal: theme.space[4],
+				paddingVertical: theme.space[3],
+				borderBottomWidth: 1,
+				borderBottomColor: borderColor
+			},
+			style
+		],
+		children
+	});
+};
+const SidebarItem = ({ children, onPress, style, hapticFeedback = true }) => {
+	const { onOpenChange, globalHaptics } = useSidebar();
+	const theme = useTheme$1();
+	const isDark = useThemeMode$1() === "dark";
+	const handlePress = () => {
+		onPress?.();
+		onOpenChange(false);
+		if (globalHaptics && hapticFeedback) triggerHaptic("selection");
+	};
+	return /* @__PURE__ */ jsx(Pressable, {
+		style: ({ pressed }) => [
+			styles$14.item,
+			{
+				paddingHorizontal: theme.space[4],
+				paddingVertical: theme.space[3],
+				backgroundColor: pressed ? isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.05)" : "transparent"
+			},
+			style
+		],
+		onPress: handlePress,
+		children
+	});
+};
+const SidebarSeparator = ({ style }) => {
+	const theme = useTheme$1();
+	const borderColor = useThemeMode$1() === "dark" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)";
+	return /* @__PURE__ */ jsx(View, { style: [
+		styles$14.separator,
+		{
+			marginHorizontal: theme.space[4],
+			borderBottomWidth: 1,
+			borderBottomColor: borderColor
+		},
+		style
+	] });
+};
+const SidebarBackdrop = ({ style, hapticFeedback = true }) => {
+	const { onOpenChange, variant, globalHaptics } = useSidebar();
+	const isDark = useThemeMode$1() === "dark";
+	if (variant === "overlay") return null;
+	const overlayColor = isDark ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 0, 0, 0.2)";
+	const handlePress = () => {
+		onOpenChange(false);
+		if (globalHaptics && hapticFeedback) triggerHaptic("selection");
+	};
+	return /* @__PURE__ */ jsx(TouchableWithoutFeedback, {
+		onPress: handlePress,
+		children: /* @__PURE__ */ jsx(Animated.View, { style: [
+			styles$14.backdrop,
+			{ backgroundColor: overlayColor },
+			style
+		] })
+	});
+};
+const SidebarContainer = ({ children }) => {
+	const { animationDuration, variant, side, width, open, onOpenChange, translateX, mainTranslateX } = useSidebar();
+	if (variant !== "push") return /* @__PURE__ */ jsx(Fragment, { children });
+	const containerPanResponder = useMemo(() => {
+		return PanResponder.create({
+			onStartShouldSetPanResponder: () => false,
+			onMoveShouldSetPanResponder: (_, gestureState) => {
+				if (Math.abs(gestureState.dx) <= 10 || Math.abs(gestureState.dx) <= Math.abs(gestureState.dy)) return false;
+				if (!open) if (side === "left") return gestureState.dx > 10;
+				else return gestureState.dx < -10;
+				return true;
+			},
+			onPanResponderGrant: () => {},
+			onPanResponderMove: (_, gestureState) => {
+				if (side === "left") if (open) {
+					const newTranslateX = gestureState.dx;
+					const clampedValue = Math.max(-width, Math.min(0, newTranslateX));
+					translateX.setValue(clampedValue);
+					mainTranslateX.setValue(clampedValue + width);
+				} else {
+					const newTranslateX = -width + gestureState.dx;
+					const clampedValue = Math.max(-width, Math.min(0, newTranslateX));
+					translateX.setValue(clampedValue);
+					mainTranslateX.setValue(gestureState.dx);
+				}
+				else if (open) {
+					const newTranslateX = width + gestureState.dx;
+					const clampedValue = Math.max(0, Math.min(width, newTranslateX));
+					translateX.setValue(clampedValue);
+					mainTranslateX.setValue(clampedValue - width);
+				} else {
+					const newTranslateX = width + gestureState.dx;
+					const clampedValue = Math.max(0, Math.min(width, newTranslateX));
+					translateX.setValue(clampedValue);
+					mainTranslateX.setValue(gestureState.dx);
+				}
+			},
+			onPanResponderRelease: (_, gestureState) => {
+				const threshold = width * .25;
+				const velocityThreshold = 500;
+				if (side === "left") if (open) if (gestureState.dx < -threshold || gestureState.vx < -velocityThreshold / 1e3) {
+					triggerHaptic("selection");
+					onOpenChange(false, true);
+					Animated.timing(translateX, {
+						toValue: -width,
+						duration: animationDuration,
+						useNativeDriver: true
+					}).start();
+					Animated.timing(mainTranslateX, {
+						toValue: 0,
+						duration: animationDuration,
+						useNativeDriver: true
+					}).start();
+				} else {
+					Animated.spring(translateX, {
+						toValue: 0,
+						tension: 65,
+						friction: 11,
+						useNativeDriver: true
+					}).start();
+					Animated.spring(mainTranslateX, {
+						toValue: width,
+						tension: 65,
+						friction: 11,
+						useNativeDriver: true
+					}).start();
+				}
+				else if (gestureState.dx > threshold || gestureState.vx > velocityThreshold / 1e3) {
+					Animated.timing(translateX, {
+						toValue: 0,
+						duration: animationDuration,
+						useNativeDriver: true
+					}).start();
+					Animated.timing(mainTranslateX, {
+						toValue: width,
+						duration: animationDuration,
+						useNativeDriver: true
+					}).start();
+					onOpenChange(true, true);
+				} else {
+					Animated.spring(translateX, {
+						toValue: -width,
+						tension: 65,
+						friction: 11,
+						useNativeDriver: true
+					}).start();
+					Animated.spring(mainTranslateX, {
+						toValue: 0,
+						tension: 65,
+						friction: 11,
+						useNativeDriver: true
+					}).start();
+				}
+				else if (open) if (gestureState.dx > threshold || gestureState.vx > velocityThreshold / 1e3) {
+					triggerHaptic("selection");
+					onOpenChange(false, true);
+					Animated.timing(translateX, {
+						toValue: width,
+						duration: animationDuration,
+						useNativeDriver: true
+					}).start();
+					Animated.timing(mainTranslateX, {
+						toValue: 0,
+						duration: animationDuration,
+						useNativeDriver: true
+					}).start();
+				} else {
+					Animated.spring(translateX, {
+						toValue: 0,
+						tension: 65,
+						friction: 11,
+						useNativeDriver: true
+					}).start();
+					Animated.spring(mainTranslateX, {
+						toValue: -width,
+						tension: 65,
+						friction: 11,
+						useNativeDriver: true
+					}).start();
+				}
+				else if (gestureState.dx < -threshold || gestureState.vx < -velocityThreshold / 1e3) {
+					Animated.timing(translateX, {
+						toValue: 0,
+						duration: animationDuration,
+						useNativeDriver: true
+					}).start();
+					Animated.timing(mainTranslateX, {
+						toValue: -width,
+						duration: animationDuration,
+						useNativeDriver: true
+					}).start();
+					onOpenChange(true, true);
+				} else {
+					Animated.spring(translateX, {
+						toValue: width,
+						tension: 65,
+						friction: 11,
+						useNativeDriver: true
+					}).start();
+					Animated.spring(mainTranslateX, {
+						toValue: 0,
+						tension: 65,
+						friction: 11,
+						useNativeDriver: true
+					}).start();
+				}
+			}
+		});
+	}, [
+		side,
+		width,
+		open,
+		onOpenChange,
+		translateX,
+		mainTranslateX,
+		animationDuration
+	]);
+	const childArray = React.Children.toArray(children);
+	let contentChild = null;
+	let mainChild = null;
+	childArray.forEach((child) => {
+		if (React.isValidElement(child) && child.type === SidebarContent) contentChild = child;
+		else if (React.isValidElement(child) && child.type === SidebarMain) mainChild = child;
+	});
+	if (side === "right" && mainChild && contentChild) return /* @__PURE__ */ jsxs(View, {
+		style: styles$14.container,
+		...containerPanResponder.panHandlers,
+		children: [mainChild, contentChild]
+	});
+	return /* @__PURE__ */ jsx(View, {
+		style: styles$14.container,
+		...containerPanResponder.panHandlers,
+		children
+	});
+};
+const SidebarMain = ({ children, style }) => {
+	const { side, variant, width, open, mainTranslateX } = useSidebar();
+	useTheme$1();
+	if (variant === "push") return /* @__PURE__ */ jsx(Animated.View, {
+		style: [
+			styles$14.mainContent,
+			{
+				flex: 1,
+				transform: [{ translateX: mainTranslateX }]
+			},
+			style
+		],
+		children
+	});
+	return /* @__PURE__ */ jsx(Fragment, { children });
+};
+const styles$14 = StyleSheet.create({
+	container: {
+		flexDirection: "row",
+		flex: 1
+	},
+	overlay: {
+		...StyleSheet.absoluteFillObject,
+		zIndex: 1
+	},
+	backdrop: {
+		...StyleSheet.absoluteFillObject,
+		zIndex: 1
+	},
+	content: {
+		position: "absolute",
+		top: 0,
+		bottom: 0,
+		zIndex: 2,
+		elevation: 4
+	},
+	scrollContent: { flex: 1 },
+	scrollContentContainer: {
+		flexGrow: 1,
+		paddingBottom: 4
+	},
+	header: {},
+	item: {},
+	separator: { height: 1 },
+	mainContent: {}
+});
+const Sidebar = {
+	Root: SidebarRoot,
+	Trigger: SidebarTrigger,
+	Portal: SidebarPortal,
+	Overlay: SidebarOverlay,
+	Content: SidebarContent,
+	Header: SidebarHeader,
+	Item: SidebarItem,
+	Separator: SidebarSeparator,
+	Main: SidebarMain,
+	Backdrop: SidebarBackdrop,
+	Container: SidebarContainer
+};
+
+//#endregion
+//#region src/components/data-display/Avatar.tsx
+const Avatar = React.forwardRef(({ src, alt = "Avatar", color, variant = "solid", highContrast, radius, size = 2, fallback, fallbackBehavior = "character", style, accessibilityLabel, children }, ref) => {
+	const theme = useTheme$1();
+	const mode = useThemeMode$1();
+	const isDark = mode === "dark";
+	const grayScale = isDark ? theme.colors.gray.dark : theme.colors.gray;
+	const grayAlpha = getGrayAlpha(theme);
+	const activeColor = color || theme.accentColor;
+	const radii = theme.radii[radius] ?? theme.radii.medium;
+	const selectedRadius = radius || theme.radius;
+	const [imageError, setImageError] = useState(false);
+	const variantColors = useMemo(() => getVariantColors(theme, activeColor, mode, variant, highContrast), [
+		getVariantColors,
+		color,
+		variant,
+		highContrast,
+		isDark,
+		theme
+	]);
+	const getSizeValues = () => {
+		switch (size) {
+			case 1: return {
+				size: 24,
+				fontSize: 10,
+				borderWidth: 0,
+				borderRadius: selectedRadius === "full" ? 9999 : radii
+			};
+			case 2: return {
+				size: 32,
+				fontSize: 12,
+				borderWidth: 0,
+				borderRadius: selectedRadius === "full" ? 9999 : radii
+			};
+			case 3: return {
+				size: 48,
+				fontSize: 18,
+				borderWidth: 0,
+				borderRadius: selectedRadius === "full" ? 9999 : radii
+			};
+			case 4: return {
+				size: 64,
+				fontSize: 24,
+				borderWidth: 0,
 				borderRadius: selectedRadius === "full" ? 9999 : radii
 			};
 			case 5: return {
@@ -10620,10 +11354,10 @@ const Avatar = React.forwardRef(({ src, alt = "Avatar", color, variant = "solid"
 		if (!trimmed) return null;
 		return trimmed.split(/\s+/).map((word) => word[0]).join("").slice(0, 2).toUpperCase() || null;
 	})();
-	return /* @__PURE__ */ jsxs(View_default, {
+	return /* @__PURE__ */ jsxs(RnView, {
 		ref,
 		style: [
-			styles$12.avatar,
+			styles$13.avatar,
 			{
 				width: sizeValues.size,
 				height: sizeValues.size,
@@ -10648,8 +11382,8 @@ const Avatar = React.forwardRef(({ src, alt = "Avatar", color, variant = "solid"
 			onError: () => setImageError(true),
 			accessibilityLabel: alt,
 			testID: "avatar-image"
-		}) : /* @__PURE__ */ jsx(View_default, {
-			style: [styles$12.fallback, {
+		}) : /* @__PURE__ */ jsx(RnView, {
+			style: [styles$13.fallback, {
 				backgroundColor: variantColors.backgroundColor,
 				flex: 1,
 				width: "100%",
@@ -10673,7 +11407,7 @@ const AvatarFallback = ({ children }) => {
 	return /* @__PURE__ */ jsx(Fragment, { children });
 };
 Avatar.Fallback = AvatarFallback;
-const styles$12 = StyleSheet.create({
+const styles$13 = StyleSheet.create({
 	avatar: {
 		alignItems: "center",
 		justifyContent: "center"
@@ -10741,7 +11475,7 @@ const Badge = React.forwardRef(({ children, variant = "soft", color, radius = "m
 	return /* @__PURE__ */ jsx(RnView, {
 		ref,
 		style: [
-			styles$11.badge,
+			styles$12.badge,
 			badgeStyle,
 			style
 		],
@@ -10749,13 +11483,13 @@ const Badge = React.forwardRef(({ children, variant = "soft", color, radius = "m
 		accessibilityRole: "none",
 		...rest,
 		children: typeof children === "string" ? /* @__PURE__ */ jsx(TextComponent, {
-			style: [styles$11.text, textStyle],
+			style: [styles$12.text, textStyle],
 			children
 		}) : children
 	});
 });
 Badge.displayName = "Badge";
-const styles$11 = StyleSheet.create({
+const styles$12 = StyleSheet.create({
 	badge: {
 		flexDirection: "row",
 		alignItems: "center"
@@ -10991,14 +11725,14 @@ const Card = React.forwardRef(({ asChild = false, children, color, radius = "med
 		style,
 		...rest,
 		children: /* @__PURE__ */ jsx(RnView, {
-			style: [styles$10.card, cardStyle],
+			style: [styles$11.card, cardStyle],
 			children
 		})
 	});
 	return /* @__PURE__ */ jsx(RnView, {
 		ref,
 		style: [
-			styles$10.card,
+			styles$11.card,
 			cardStyle,
 			style
 		],
@@ -11012,7 +11746,7 @@ const CardFooter = ({ children, separate = true }) => {
 	useThemeMode$1();
 	const grayAlpha = getGrayAlpha(theme);
 	return /* @__PURE__ */ jsx(RnView, {
-		style: [styles$10.footer, separate && {
+		style: [styles$11.footer, separate && {
 			borderTopWidth: 1,
 			borderTopColor: grayAlpha["6"],
 			marginTop: theme.space[4],
@@ -11022,7 +11756,7 @@ const CardFooter = ({ children, separate = true }) => {
 	});
 };
 Card.Footer = CardFooter;
-const styles$10 = StyleSheet.create({
+const styles$11 = StyleSheet.create({
 	card: { overflow: "hidden" },
 	footer: {
 		flexDirection: "row",
@@ -11069,7 +11803,7 @@ const DataListRoot = ({ children, orientation = "horizontal", size = 2, trim = "
 		},
 		children: /* @__PURE__ */ jsx(View, {
 			style: [
-				styles$9.root,
+				styles$10.root,
 				rootStyle,
 				trimStyles,
 				style
@@ -11093,7 +11827,7 @@ const DataListItem = ({ children, align = "baseline", style }) => {
 	};
 	return /* @__PURE__ */ jsx(View, {
 		style: [
-			styles$9.item,
+			styles$10.item,
 			itemStyle,
 			style
 		],
@@ -11163,7 +11897,7 @@ const DataListValue = ({ children, style }) => {
 	});
 };
 DataListValue.displayName = "DataList.Value";
-const styles$9 = StyleSheet.create({
+const styles$10 = StyleSheet.create({
 	root: { width: "100%" },
 	item: { width: "100%" }
 });
@@ -11185,7 +11919,7 @@ const FancyList = ({ data, renderItem, keyExtractor, style, showDividers = true,
 	const backgroundColor = isDark ? grayAlpha["2"] : grayAlpha["1"];
 	const defaultKeyExtractor = (item, index) => {
 		if (keyExtractor) return keyExtractor(item, index);
-		if ("id" in item) return String(item.id);
+		if (item && typeof item === "object" && "id" in item) return String(item.id);
 		return String(index);
 	};
 	const renderListItem = (info) => {
@@ -11195,7 +11929,7 @@ const FancyList = ({ data, renderItem, keyExtractor, style, showDividers = true,
 			borderBottomColor: dividerColor
 		};
 		return /* @__PURE__ */ jsx(RnView, {
-			style: [styles$8.item, itemStyle],
+			style: [styles$9.item, itemStyle],
 			children: renderItem({
 				item: info.item,
 				index: info.index,
@@ -11210,14 +11944,14 @@ const FancyList = ({ data, renderItem, keyExtractor, style, showDividers = true,
 	};
 	if (!scrollable) return /* @__PURE__ */ jsxs(RnView, {
 		style: [
-			styles$8.container,
+			styles$9.container,
 			listContainerStyle,
 			style
 		],
 		children: [
 			ListHeaderComponent,
 			data.map((item, index) => /* @__PURE__ */ jsx(RnView, {
-				style: styles$8.nonScrollableItem,
+				style: styles$9.nonScrollableItem,
 				children: renderItem({
 					item,
 					index,
@@ -11228,28 +11962,28 @@ const FancyList = ({ data, renderItem, keyExtractor, style, showDividers = true,
 		]
 	});
 	return /* @__PURE__ */ jsx(RnView, {
-		style: [styles$8.container, style],
+		style: [styles$9.container, style],
 		children: /* @__PURE__ */ jsx(RnFlatList, {
 			data,
 			renderItem: renderListItem,
 			keyExtractor: defaultKeyExtractor,
-			style: [styles$8.flatList, listContainerStyle],
-			contentContainerStyle: styles$8.contentContainer,
+			style: [styles$9.flatList, listContainerStyle],
+			contentContainerStyle: styles$9.contentContainer,
 			showsVerticalScrollIndicator: true,
 			ListEmptyComponent,
 			ListHeaderComponent,
 			ListFooterComponent,
-			ItemSeparatorComponent: () => showDividers ? /* @__PURE__ */ jsx(RnView, { style: [styles$8.divider, {
+			ItemSeparatorComponent: () => showDividers ? /* @__PURE__ */ jsx(RnView, { style: [styles$9.divider, {
 				backgroundColor: dividerColor,
 				marginHorizontal: theme.space[4]
 			}] }) : null,
-			ListHeaderComponentStyle: styles$8.listHeaderFooter,
-			ListFooterComponentStyle: styles$8.listHeaderFooter
+			ListHeaderComponentStyle: styles$9.listHeaderFooter,
+			ListFooterComponentStyle: styles$9.listHeaderFooter
 		})
 	});
 };
 FancyList.displayName = "FancyList";
-const styles$8 = StyleSheet.create({
+const styles$9 = StyleSheet.create({
 	container: { width: "100%" },
 	flatList: { flex: 1 },
 	contentContainer: { flexGrow: 1 },
@@ -11353,7 +12087,7 @@ const Progress = forwardRef(({ value, max = 100, size = 2, variant = "solid", co
 	return /* @__PURE__ */ jsx(RnView, {
 		ref,
 		style: [
-			styles$7.track,
+			styles$8.track,
 			{
 				backgroundColor: trackBackgroundColor,
 				borderColor: trackBorder.borderColor,
@@ -11372,7 +12106,7 @@ const Progress = forwardRef(({ value, max = 100, size = 2, variant = "solid", co
 		},
 		accessibilityRole: "progressbar",
 		testID,
-		children: /* @__PURE__ */ jsx(Animated.View, { style: [styles$7.indicator, {
+		children: /* @__PURE__ */ jsx(Animated.View, { style: [styles$8.indicator, {
 			width: animatedWidth,
 			backgroundColor: indicatorColor,
 			borderRadius: selectedRadius
@@ -11380,7 +12114,7 @@ const Progress = forwardRef(({ value, max = 100, size = 2, variant = "solid", co
 	});
 });
 Progress.displayName = "Progress";
-const styles$7 = StyleSheet.create({
+const styles$8 = StyleSheet.create({
 	track: {
 		width: "100%",
 		overflow: "hidden"
@@ -11413,7 +12147,7 @@ const Spinner = React.forwardRef(({ size = "medium", color, highContrast = false
 	return /* @__PURE__ */ jsx(RnView, {
 		ref,
 		style: [
-			styles$6.container,
+			styles$7.container,
 			{
 				width: sizeConfig.dimension,
 				height: sizeConfig.dimension
@@ -11430,148 +12164,312 @@ const Spinner = React.forwardRef(({ size = "medium", color, highContrast = false
 	});
 });
 Spinner.displayName = "Spinner";
-const styles$6 = StyleSheet.create({ container: {
+const styles$7 = StyleSheet.create({ container: {
 	justifyContent: "center",
 	alignItems: "center"
 } });
 
+//#endregion
+//#region src/components/data-display/Skeleton.tsx
+const PULSE_ANIMATION = {
+	duration: 1e3,
+	useNativeDriver: true
+};
+const SKELEON_COLORS = {
+	light: "#E5E7EB",
+	dark: "#D1D5DB"
+};
+const Skeleton = React.forwardRef(({ children, loading = true, style, textStyle, width, height, accessibilityLabel = "Loading", testID }, ref) => {
+	const pulseAnim = useRef(new Animated.Value(0)).current;
+	useEffect(() => {
+		const animation = Animated.loop(Animated.sequence([Animated.timing(pulseAnim, {
+			toValue: 1,
+			...PULSE_ANIMATION
+		}), Animated.timing(pulseAnim, {
+			toValue: 0,
+			...PULSE_ANIMATION
+		})]));
+		animation.start();
+		return () => {
+			animation.stop();
+		};
+	}, [pulseAnim]);
+	const pulseStyle = { backgroundColor: pulseAnim.interpolate({
+		inputRange: [0, 1],
+		outputRange: [SKELEON_COLORS.light, SKELEON_COLORS.dark]
+	}) };
+	if (!loading) return /* @__PURE__ */ jsx(Fragment, { children });
+	if (!React.isValidElement(children) && typeof children === "string") return /* @__PURE__ */ jsx(Animated.Text, {
+		ref,
+		style: [
+			textStyle,
+			pulseStyle,
+			width !== void 0 ? { width } : void 0,
+			height !== void 0 ? { height } : void 0
+		],
+		accessibilityLabel,
+		accessibilityRole: "progressbar",
+		testID,
+		children
+	});
+	return /* @__PURE__ */ jsx(Animated.View, {
+		ref,
+		style: [
+			styles$6.blockContainer,
+			pulseStyle,
+			width !== void 0 ? { width } : void 0,
+			height !== void 0 ? { height } : void 0,
+			style
+		],
+		accessibilityLabel,
+		accessibilityRole: "progressbar",
+		testID,
+		children: children && /* @__PURE__ */ jsx(View, {
+			style: styles$6.hiddenChildren,
+			pointerEvents: "none",
+			children
+		})
+	});
+});
+Skeleton.displayName = "Skeleton";
+const styles$6 = StyleSheet.create({
+	inlineText: {
+		color: "transparent",
+		fontSize: 14,
+		lineHeight: 20,
+		overflow: "hidden"
+	},
+	blockContainer: {
+		minHeight: 20,
+		overflow: "hidden"
+	},
+	hiddenChildren: { opacity: 0 }
+});
+
 //#endregion
 //#region src/components/data-display/Table.tsx
-const Table = ({ columns, data, style, scrollable = true }) => {
+const TableContext = createContext(null);
+const useTableContext = () => {
+	const context = useContext(TableContext);
+	if (!context) throw new Error("Table sub-components must be used within Table.Root");
+	return context;
+};
+const TableRoot = React.forwardRef(({ children, size = "2", scrollable = true, style }, ref) => {
 	const theme = useTheme$1();
-	useThemeMode$1() === "dark" ? theme.colors.gray.dark : theme.colors.gray;
-	getGrayAlpha(theme);
+	const mode = useThemeMode$1();
+	const isDark = mode === "dark";
+	const grayAlpha = getGrayAlpha(theme, mode);
 	const tableStyle = {
 		borderRadius: theme.radii.medium,
-		overflow: "hidden"
+		overflow: "hidden",
+		backgroundColor: isDark ? grayAlpha["2"] : grayAlpha["1"]
+	};
+	const contextValue = {
+		size,
+		isRoot: true
 	};
-	const TableContent = () => /* @__PURE__ */ jsxs(RnView, {
-		style: [styles$5.table, tableStyle],
-		children: [/* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsx(Tr, {
-			isHeader: true,
-			children: columns.map((column) => /* @__PURE__ */ jsx(Th, {
-				width: column.width,
-				align: column.align,
-				children: column.title
-			}, column.key))
-		}) }), /* @__PURE__ */ jsx(Tbody, { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx(Tr, { children: columns.map((column) => /* @__PURE__ */ jsx(Td, {
-			align: column.align,
-			children: column.render ? column.render(row, rowIndex) : String(row[column.key] ?? "")
-		}, column.key)) }, rowIndex)) })]
-	});
-	if (scrollable) return /* @__PURE__ */ jsx(RnScrollView, {
+	const content = /* @__PURE__ */ jsx(TableContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(View, {
+			ref,
+			style: [
+				styles$5.root,
+				tableStyle,
+				style
+			],
+			children
+		})
+	});
+	if (scrollable) return /* @__PURE__ */ jsx(ScrollView, {
 		horizontal: true,
-		style: [styles$5.scrollContainer, style],
 		showsHorizontalScrollIndicator: false,
-		children: /* @__PURE__ */ jsx(TableContent, {})
-	});
-	return /* @__PURE__ */ jsx(RnView, {
-		style: [styles$5.container, style],
-		children: /* @__PURE__ */ jsx(TableContent, {})
+		contentContainerStyle: styles$5.scrollContent,
+		children: content
 	});
-};
-Table.displayName = "Table";
-const Thead = ({ children }) => {
-	return /* @__PURE__ */ jsx(RnView, {
-		style: styles$5.thead,
+	return content;
+});
+TableRoot.displayName = "Table.Root";
+const TableHeader = React.forwardRef(({ children, style }, ref) => {
+	const theme = useTheme$1();
+	const mode = useThemeMode$1();
+	const isDark = mode === "dark";
+	const grayAlpha = getGrayAlpha(theme, mode);
+	return /* @__PURE__ */ jsx(View, {
+		ref,
+		style: [
+			styles$5.header,
+			{
+				backgroundColor: isDark ? grayAlpha["3"] : grayAlpha["2"],
+				borderBottomWidth: 0,
+				borderBottomColor: isDark ? grayAlpha["6"] : grayAlpha["5"]
+			},
+			style
+		],
 		children
 	});
-};
-const Tbody = ({ children }) => {
-	return /* @__PURE__ */ jsx(RnView, {
-		style: styles$5.tbody,
+});
+TableHeader.displayName = "Table.Header";
+const TableBody = React.forwardRef(({ children, style }, ref) => {
+	return /* @__PURE__ */ jsx(View, {
+		ref,
+		style: [styles$5.body, style],
 		children
 	});
-};
-const Tr = ({ children, isHeader = false }) => {
+});
+TableBody.displayName = "Table.Body";
+const TableRow = React.forwardRef(({ children, style }, ref) => {
 	const theme = useTheme$1();
-	const isDark = useThemeMode$1() === "dark";
-	isDark ? theme.colors.gray.dark : theme.colors.gray;
-	const grayAlpha = getGrayAlpha(theme);
-	const headerBackground = isDark ? grayAlpha["3"] : grayAlpha["2"];
-	const borderColor = isDark ? grayAlpha["6"] : grayAlpha["5"];
-	return /* @__PURE__ */ jsx(RnView, {
+	const mode = useThemeMode$1();
+	const isDark = mode === "dark";
+	const grayAlpha = getGrayAlpha(theme, mode);
+	return /* @__PURE__ */ jsx(View, {
+		ref,
 		style: [
-			styles$5.tr,
-			isHeader && {
-				backgroundColor: headerBackground,
+			styles$5.row,
+			{
+				flex: 1,
 				borderBottomWidth: 1,
-				borderBottomColor: borderColor
+				borderBottomColor: isDark ? grayAlpha["6"] : grayAlpha["5"]
 			},
-			!isHeader && {
-				borderBottomWidth: 1,
-				borderBottomColor: borderColor
-			}
+			style
 		],
 		children
 	});
-};
-const Th = ({ children, width, align = "left" }) => {
+});
+TableRow.displayName = "Table.Row";
+const TableColumnHeaderCell = React.forwardRef(({ children, width, align = "left", style }, ref) => {
+	const context = useTableContext();
 	const theme = useTheme$1();
 	const grayScale = useThemeMode$1() === "dark" ? theme.colors.gray.dark : theme.colors.gray;
-	const thStyle = { width };
-	return /* @__PURE__ */ jsx(RnView, {
+	const getSizePadding = () => {
+		switch (context.size) {
+			case "1": return {
+				paddingVertical: theme.space[2],
+				paddingHorizontal: theme.space[3]
+			};
+			case "3": return {
+				paddingVertical: theme.space[4],
+				paddingHorizontal: theme.space[5]
+			};
+			default: return {
+				paddingVertical: theme.space[3],
+				paddingHorizontal: theme.space[4]
+			};
+		}
+	};
+	const getSizeFont = () => {
+		switch (context.size) {
+			case "1": return { fontSize: theme.typography.fontSizes[1].fontSize };
+			case "3": return { fontSize: theme.typography.fontSizes[3].fontSize };
+			default: return { fontSize: theme.typography.fontSizes[2].fontSize };
+		}
+	};
+	const padding = getSizePadding();
+	const fontSize = getSizeFont();
+	return /* @__PURE__ */ jsx(View, {
+		ref,
 		style: [
-			styles$5.th,
-			thStyle,
-			justifyContentMap[align]
+			styles$5.cell,
+			{
+				width,
+				alignItems: {
+					left: "flex-start",
+					center: "center",
+					right: "flex-end"
+				}[align],
+				...padding
+			},
+			style
 		],
 		children: /* @__PURE__ */ jsx(TextComponent, {
 			style: {
 				color: grayScale[12],
 				fontWeight: "600",
-				fontSize: theme.typography.fontSizes[1].fontSize
+				...fontSize
 			},
 			children
 		})
 	});
-};
-const Td = ({ children, align = "left" }) => {
+});
+TableColumnHeaderCell.displayName = "Table.ColumnHeaderCell";
+const TableCell = React.forwardRef(({ children, align = "left", style }, ref) => {
+	const context = useTableContext();
 	const theme = useTheme$1();
 	const grayScale = useThemeMode$1() === "dark" ? theme.colors.gray.dark : theme.colors.gray;
-	return /* @__PURE__ */ jsx(RnView, {
-		style: [styles$5.td, justifyContentMap[align]],
+	const getSizePadding = () => {
+		switch (context.size) {
+			case "1": return {
+				paddingVertical: theme.space[2],
+				paddingHorizontal: theme.space[3]
+			};
+			case "3": return {
+				paddingVertical: theme.space[4],
+				paddingHorizontal: theme.space[5]
+			};
+			default: return {
+				paddingVertical: theme.space[3],
+				paddingHorizontal: theme.space[4]
+			};
+		}
+	};
+	const getSizeFont = () => {
+		switch (context.size) {
+			case "1": return { fontSize: theme.typography.fontSizes[1].fontSize };
+			case "3": return { fontSize: theme.typography.fontSizes[3].fontSize };
+			default: return { fontSize: theme.typography.fontSizes[2].fontSize };
+		}
+	};
+	const padding = getSizePadding();
+	const fontSize = getSizeFont();
+	return /* @__PURE__ */ jsx(View, {
+		ref,
+		style: [
+			styles$5.cell,
+			{
+				alignItems: {
+					left: "flex-start",
+					center: "center",
+					right: "flex-end"
+				}[align],
+				...padding
+			},
+			style
+		],
 		children: /* @__PURE__ */ jsx(TextComponent, {
 			style: {
 				color: grayScale[11],
-				fontSize: theme.typography.fontSizes[1].fontSize
+				...fontSize
 			},
 			children
 		})
 	});
-};
-const justifyContentMap = {
-	left: { justifyContent: "flex-start" },
-	center: { justifyContent: "center" },
-	right: { justifyContent: "flex-end" }
-};
-Table.Thead = Thead;
-Table.Tbody = Tbody;
-Table.Tr = Tr;
-Table.Th = Th;
-Table.Td = Td;
+});
+TableCell.displayName = "Table.Cell";
 const styles$5 = StyleSheet.create({
-	container: { width: "100%" },
-	scrollContainer: { flex: 1 },
-	table: { minWidth: "100%" },
-	thead: { flexDirection: "row" },
-	tbody: { flexDirection: "column" },
-	tr: {
+	scrollContent: { flexGrow: 1 },
+	root: { minWidth: "100%" },
+	header: {
 		flexDirection: "row",
-		minHeight: 44,
-		alignItems: "center",
-		borderBottomWidth: 1,
-		borderBottomColor: "transparent"
-	},
-	th: {
-		padding: 12,
 		minHeight: 44
 	},
-	td: {
-		padding: 12,
+	body: { flexDirection: "column" },
+	row: {
+		flexDirection: "row",
 		minHeight: 44
+	},
+	cell: {
+		flex: 1,
+		minWidth: 80
 	}
 });
+const Table = {
+	Root: TableRoot,
+	Header: TableHeader,
+	Body: TableBody,
+	Row: TableRow,
+	ColumnHeaderCell: TableColumnHeaderCell,
+	Cell: TableCell
+};
 
 //#endregion
 //#region src/components/navigation/SegmentedControl.tsx
@@ -11581,19 +12479,57 @@ function useSegmentedControlContext() {
 	if (!context) throw new Error("SegmentedControl.Item must be used within SegmentedControl.Root");
 	return context;
 }
+const SegmentedControlValue = ({ children }) => {
+	const { value: selectedValue, color, isDark, grayScale, activeColor, solidVariantColors, softVariantColors, sizeValues, theme, itemValue, isItemSelected, itemDisabled } = useSegmentedControlContext();
+	return /* @__PURE__ */ jsx(TextComponent, {
+		style: {
+			color: itemDisabled ? grayScale["9"] : color ? isItemSelected ? solidVariantColors.textColor : softVariantColors.textColor : isItemSelected ? grayScale[12] : grayScale[10],
+			fontWeight: isItemSelected ? theme.typography.fontWeights.semibold : theme.typography.fontWeights.regular,
+			fontSize: sizeValues.fontSize
+		},
+		children
+	});
+};
+SegmentedControlValue.displayName = "SegmentedControlValue";
+const SegmentedControlIcon = ({ children }) => {
+	const { color, isDark, grayScale, activeColor, solidVariantColors, softVariantColors, sizeValues, itemValue, isItemSelected, itemDisabled } = useSegmentedControlContext();
+	const iconColor = itemDisabled ? grayScale["9"] : color ? isItemSelected ? solidVariantColors.textColor : softVariantColors.textColor : isItemSelected ? grayScale[12] : grayScale[10];
+	const iconSize = sizeValues.fontSize;
+	return React.cloneElement(children, {
+		...children.props,
+		color: iconColor,
+		size: children.props.size ?? iconSize
+	});
+};
+SegmentedControlIcon.displayName = "SegmentedControlIcon";
+const SegmentedControlItemContext = createContext(null);
 const SegmentedControlItem = ({ value, disabled: itemDisabled, children }) => {
-	const { value: selectedValue, onValueChange, disabled, sizeValues, isDark, grayScale, grayAlpha, activeColor, radii, selectedRadius, softVariantColors, solidVariantColors, color, onItemLayout, theme, pillBackgroundColor, hapticFeedback } = useSegmentedControlContext();
+	const { value: selectedValue, onValueChange, disabled, sizeValues, isDark, grayScale, grayAlpha, activeColor, radii, selectedRadius, softVariantColors, solidVariantColors, color, onItemLayout, theme, pillBackgroundColor, hapticFeedback, globalHaptics } = useSegmentedControlContext();
 	const isSelected = value === selectedValue;
 	const isDisabled = disabled || itemDisabled;
+	const hasValueChild = isValidElement(children) && children.type?.displayName === "SegmentedControlValue";
+	const hasIconChild = isValidElement(children) && children.type?.displayName === "SegmentedControlIcon";
+	const itemContextValue = {
+		itemValue: value,
+		isSelected,
+		isDisabled
+	};
+	const mergedContext = {
+		...useSegmentedControlContext(),
+		itemValue: value,
+		isItemSelected: isSelected,
+		itemDisabled: isDisabled
+	};
 	const handlePress = useCallback(() => {
 		if (!isDisabled) {
 			onValueChange(value);
-			if (hapticFeedback) Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback) triggerHaptic("press");
 		}
 	}, [
 		isDisabled,
 		onValueChange,
 		value,
+		globalHaptics,
 		hapticFeedback
 	]);
 	const handleLayout = useCallback((event) => {
@@ -11613,23 +12549,29 @@ const SegmentedControlItem = ({ value, disabled: itemDisabled, children }) => {
 		fontWeight: isSelected ? theme.typography.fontWeights.semibold : theme.typography.fontWeights.regular,
 		fontSize: sizeValues.fontSize
 	};
-	return /* @__PURE__ */ jsx(AnimatedPressable_default, {
-		style: optionStyle,
-		onPress: handlePress,
-		onLayout: handleLayout,
-		disabled: isDisabled,
-		accessibilityRole: "radio",
-		accessibilityState: {
-			checked: isSelected,
-			disabled: isDisabled
-		},
-		pressedScale: .975,
-		pressedOpacity: .9,
-		animationDuration: 100,
-		hapticFeedback: false,
-		children: /* @__PURE__ */ jsx(TextComponent, {
-			style: textStyle,
-			children
+	return /* @__PURE__ */ jsx(SegmentedControlItemContext.Provider, {
+		value: itemContextValue,
+		children: /* @__PURE__ */ jsx(SegmentedControlContext.Provider, {
+			value: mergedContext,
+			children: /* @__PURE__ */ jsx(AnimatedPressable, {
+				style: optionStyle,
+				onPress: handlePress,
+				onLayout: handleLayout,
+				disabled: isDisabled,
+				accessibilityRole: "radio",
+				accessibilityState: {
+					checked: isSelected,
+					disabled: isDisabled
+				},
+				pressedScale: .975,
+				pressedOpacity: .9,
+				animationDuration: 100,
+				hapticFeedback: false,
+				children: hasValueChild || hasIconChild ? children : /* @__PURE__ */ jsx(TextComponent, {
+					style: textStyle,
+					children
+				})
+			})
 		})
 	});
 };
@@ -11637,6 +12579,7 @@ SegmentedControlItem.displayName = "SegmentedControlItem";
 const SegmentedControlRoot = ({ defaultValue, value: controlledValue, onValueChange, disabled = false, color, radius, size = 3, style, highContrast = false, children, hapticFeedback = true }) => {
 	const theme = useTheme$1();
 	const mode = useThemeMode$1();
+	const globalHaptics = useHaptics$1();
 	const isDark = mode === "dark";
 	const grayScale = isDark ? theme.colors.gray.dark : theme.colors.gray;
 	const grayAlpha = getGrayAlpha(theme);
@@ -11733,7 +12676,11 @@ const SegmentedControlRoot = ({ defaultValue, value: controlledValue, onValueCha
 		onItemLayout: handleItemLayout,
 		theme,
 		pillBackgroundColor,
-		hapticFeedback
+		hapticFeedback,
+		globalHaptics,
+		itemValue: null,
+		isItemSelected: false,
+		itemDisabled: false
 	};
 	const pillWidth = itemLayouts[currentValue]?.width || 0;
 	const pillInnerRadius = selectedRadius === "full" ? 9999 : radii;
@@ -11762,7 +12709,9 @@ const SegmentedControlRoot = ({ defaultValue, value: controlledValue, onValueCha
 SegmentedControlRoot.displayName = "SegmentedControlRoot";
 const SegmentedControl = {
 	Item: SegmentedControlItem,
-	Root: SegmentedControlRoot
+	Root: SegmentedControlRoot,
+	Value: SegmentedControlValue,
+	Icon: SegmentedControlIcon
 };
 const styles$4 = StyleSheet.create({
 	container: {
@@ -12121,6 +13070,7 @@ const AccordionTrigger = React.forwardRef(({ children, style, icon, hapticFeedba
 	const itemContext = useAccordionItemContext();
 	const theme = useTheme$1();
 	const mode = useThemeMode$1();
+	const globalHaptics = useHaptics$1();
 	const { value, open, disabled } = itemContext;
 	const { size, dir, collapsible, type, onValueChange } = accordionContext;
 	const grayAlpha = getGrayAlpha(theme, mode);
@@ -12168,7 +13118,7 @@ const AccordionTrigger = React.forwardRef(({ children, style, icon, hapticFeedba
 			if (open) onValueChange(currentValue.filter((v) => v !== value));
 			else onValueChange([...currentValue, value]);
 		}
-		if (hapticFeedback) Vibration.vibrate(10);
+		if (globalHaptics && hapticFeedback) triggerHaptic("selection");
 	};
 	const rtlRotationInterpolate = rotationAnim.interpolate({
 		inputRange: [0, 1],
@@ -12188,7 +13138,7 @@ const AccordionTrigger = React.forwardRef(({ children, style, icon, hapticFeedba
 	const getIconColor = () => {
 		return grayAlpha["11"];
 	};
-	return /* @__PURE__ */ jsxs(AnimatedPressable_default, {
+	return /* @__PURE__ */ jsxs(AnimatedPressable, {
 		ref,
 		style: [triggerStyle, style],
 		onPress: handlePress,
@@ -12226,7 +13176,7 @@ const AccordionTrigger = React.forwardRef(({ children, style, icon, hapticFeedba
 				transform: [{ rotate: rtlRotationInterpolate }],
 				marginLeft: theme.space[2]
 			},
-			children: /* @__PURE__ */ jsx(ChevronDownIcon$1, {
+			children: /* @__PURE__ */ jsx(ChevronDownIcon, {
 				width: sizeStyles.iconSize,
 				height: sizeStyles.iconSize,
 				color: getIconColor()
@@ -12376,4 +13326,4 @@ const useResponsive = (breakpoints = defaultBreakpoints) => {
 };
 
 //#endregion
-export { AbsoluteCenter, Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, RnActivityIndicator as ActivityIndicator, AlertDialogComponent as AlertDialog, AnimatedPressable, AspectRatio, Avatar, Badge, Blockquote, BottomSheet, Box, Button, ButtonIcon, ButtonLabel, Callout, CalloutIcon, CalloutRoot, CalloutText, Card, Center, Checkbox, CheckboxCards, CheckboxCardsItem, CheckboxCardsRoot, CheckboxGroup, Code, Container, ContextMenu, DataList, DataListItem, DataListLabel, DataListRoot, DataListValue, Dialog, DropdownMenu, Em, FancyList, RnFlatList as FlatList, Flex, Grid, HCenter, HStack, Heading, IconButton, RnImage as Image, Inset, Kbd, Link, ManagedPortal, Popover, Portal, PortalProvider, RnPressable as Pressable, RnText as PrimitiveText, Progress, Radio, RadioCards, RadioCardsItem, RadioCardsRoot, RadioGroup, RadioGroupItem, RadioGroupRoot, ScrollArea, RnScrollView as ScrollView, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectOverlay, SelectPortal, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, Separator, Slider, Slot, Spacer, Spinner, Stack, Strong, Switch, TabNav, Table, Tabs, TextComponent as Text, TextArea, TextField, RnTextInput as TextInput, ThemeProvider, Toast, TooltipExport as Tooltip, RnTouchableHighlight as TouchableHighlight, RnTouchableOpacity as TouchableOpacity, VCenter, VStack, RnView as View, VisuallyHidden, addColorSchemeListener, amber, amberAlpha, black, blackAlpha, blue, blueAlpha, bronze, bronzeAlpha, brown, brownAlpha, calculatePopoverPosition, createTheme, crimson, crimsonAlpha, cyan, cyanAlpha, defaultTheme, fontFamilies, getAccentAlpha, getAccentAlphaScale, getAccentColor, getAccentContrast, getAccentScale, getAccentTextColor, getActiveColors, getColorAlpha, getColorScale, getColorScheme, getContrast, getDisabledColors, getExtendedAccentScale, getFocusColor, getForegroundColor, getGrayAlpha, getGrayScale, getHighContrastBackground, getHighContrastTextColor, getHoverColors, getRadii, getSelectionColor, getShadow, getShadows, getSpace, getThemeColors, getThemeShadow, getTypography, getVariantColors, gold, goldAlpha, grass, grassAlpha, gray, grayAlpha, green, greenAlpha, indigo, indigoAlpha, iris, irisAlpha, jade, jadeAlpha, lime, limeAlpha, mauve, mauveAlpha, mint, mintAlpha, needsDarkText, olive, oliveAlpha, orange, orangeAlpha, pink, pinkAlpha, plum, plumAlpha, purple, purpleAlpha, radii, radiusFactors, red, redAlpha, ruby, rubyAlpha, sage, sageAlpha, sand, sandAlpha, scalingOptions, shadows, sky, skyAlpha, slate, slateAlpha, space, teal, tealAlpha, tomato, tomatoAlpha, typography, useAnchorPosition, useDeviceColorScheme, usePortal, useResponsive, useTheme, useThemeActions, useThemeColors, useThemeContext, useThemeMode, useToast, useToastContext, violet, violetAlpha, white, whiteAlpha, yellow, yellowAlpha };
+export { AbsoluteCenter, Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, RnActivityIndicator as ActivityIndicator, AlertDialogComponent as AlertDialog, AnimatedPressable, AspectRatio, Avatar, Badge, Blockquote, BottomSheet, Box, Button, ButtonIcon, ButtonLabel, Callout, CalloutIcon, CalloutRoot, CalloutText, Card, Center, Checkbox, CheckboxCards, CheckboxCardsItem, CheckboxCardsRoot, CheckboxGroup, Code, Container, ContextMenu, DataList, DataListItem, DataListLabel, DataListRoot, DataListValue, Dialog, DropdownMenu, Em, FancyList, RnFlatList as FlatList, Flex, Grid, HCenter, HStack, Heading, IconButton, RnImage as Image, Inset, Kbd, Link, ManagedPortal, Popover, Portal, PortalProvider, RnPressable as Pressable, RnText as PrimitiveText, Progress, Radio, RadioCards, RadioCardsItem, RadioCardsRoot, RadioGroup, RadioGroupItem, RadioGroupRoot, ScrollArea, RnScrollView as ScrollView, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectOverlay, SelectPortal, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, Skeleton, Slider, Slot, Spacer, Spinner, Stack, Strong, Switch, TabNav, Table, Tabs, TextComponent as Text, TextArea, TextField, RnTextInput as TextInput, ThemeProvider, Toast, TooltipExport as Tooltip, RnTouchableHighlight as TouchableHighlight, RnTouchableOpacity as TouchableOpacity, VCenter, VStack, RnView as View, VisuallyHidden, addColorSchemeListener, amber, amberAlpha, black, blackAlpha, blue, blueAlpha, bronze, bronzeAlpha, brown, brownAlpha, calculatePopoverPosition, createTheme, crimson, crimsonAlpha, cyan, cyanAlpha, defaultTheme, fontFamilies, getAccentAlpha, getAccentAlphaScale, getAccentColor, getAccentContrast, getAccentScale, getAccentTextColor, getActiveColors, getColorAlpha, getColorScale, getColorScheme, getContrast, getDisabledColors, getExtendedAccentScale, getFocusColor, getForegroundColor, getGrayAlpha, getGrayScale, getHighContrastBackground, getHighContrastTextColor, getHoverColors, getRadii, getSelectionColor, getShadow, getShadows, getSpace, getThemeColors, getThemeShadow, getTypography, getVariantColors, gold, goldAlpha, grass, grassAlpha, gray, grayAlpha, green, greenAlpha, indigo, indigoAlpha, iris, irisAlpha, jade, jadeAlpha, lime, limeAlpha, mauve, mauveAlpha, mint, mintAlpha, needsDarkText, olive, oliveAlpha, orange, orangeAlpha, pink, pinkAlpha, plum, plumAlpha, purple, purpleAlpha, radii, radiusFactors, red, redAlpha, ruby, rubyAlpha, sage, sageAlpha, sand, sandAlpha, scalingOptions, shadows, sky, skyAlpha, slate, slateAlpha, space, teal, tealAlpha, tomato, tomatoAlpha, typography, useAnchorPosition, useDeviceColorScheme, useHaptics, usePortal, useResponsive, useTheme, useThemeActions, useThemeColors, useThemeContext, useThemeMode, useToast, useToastContext, violet, violetAlpha, white, whiteAlpha, yellow, yellowAlpha };