radix-native-ui 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -1,4 +1,5 @@
-//#region rolldown:runtime
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+//#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -3144,7 +3145,7 @@ const ToastRoot = (0, react.forwardRef)(({ toast, onDismiss, config, index, styl
 		opacity,
 		transform: [{ translateY }, { translateX }],
 		backgroundColor: colors.backgroundColor,
-		borderColor: colors.borderColor,
+		borderColor: "transparent",
 		borderWidth: 1,
 		borderRadius: theme.radii.large,
 		padding: theme.space[4],
@@ -3169,23 +3170,23 @@ const ToastRoot = (0, react.forwardRef)(({ toast, onDismiss, config, index, styl
 		accessibilityLiveRegion: "polite",
 		accessibilityLabel: toast.accessibilityLabel || toast.title,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.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__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-					style: styles$32.iconContainer,
+					style: styles$34.iconContainer,
 					children: toast.icon
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
-					style: styles$32.textContainer,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
-						style: [styles$32.title, {
+					style: styles$34.textContainer,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextComponent, {
+						style: [styles$34.title, {
 							color: colors.textColor,
 							fontSize: theme.typography.fontSizes[3].fontSize
 						}],
 						numberOfLines: 1,
 						children: toast.title
-					}), toast.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
-						style: [styles$32.description, {
+					}), toast.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextComponent, {
+						style: [styles$34.description, {
 							fontSize: theme.typography.fontSizes[2].fontSize,
 							lineHeight: theme.typography.fontSizes[2].fontSize * 1.5,
 							opacity: .8
@@ -3196,14 +3197,14 @@ const ToastRoot = (0, react.forwardRef)(({ toast, onDismiss, config, index, styl
 				}),
 				toast.action && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Pressable, {
 					onPress: toast.action.onPress,
-					style: ({ pressed }) => [styles$32.actionButton, { opacity: pressed ? .7 : 1 }],
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
-						style: [styles$32.actionText, { color: colors.accentColor }],
+					style: ({ pressed }) => [styles$34.actionButton, { opacity: pressed ? .7 : 1 }],
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextComponent, {
+						style: [styles$34.actionText, { color: colors.accentColor }],
 						children: toast.action.label
 					})
 				}),
 				toast.showClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-					style: { backgroundColor: colors.textColor },
+					color: getVariantColorName(toast.variant),
 					radius: "large",
 					size: 1,
 					onPress: () => handleDismiss(true),
@@ -3222,10 +3223,10 @@ const ToastViewport = (0, react.forwardRef)(({ style }, ref) => {
 	if (toasts.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
 		ref,
-		style: [styles$32.viewport, style],
+		style: [styles$34.viewport, style],
 		pointerEvents: "box-none",
 		children: [topToasts.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.SafeAreaView, {
-			style: styles$32.topContainer,
+			style: styles$34.topContainer,
 			pointerEvents: "box-none",
 			children: topToasts.map((toast, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastRoot, {
 				toast,
@@ -3234,7 +3235,7 @@ const ToastViewport = (0, react.forwardRef)(({ style }, ref) => {
 				index
 			}, toast.id))
 		}), bottomToasts.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.SafeAreaView, {
-			style: styles$32.bottomContainer,
+			style: styles$34.bottomContainer,
 			pointerEvents: "box-none",
 			children: bottomToasts.map((toast, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastRoot, {
 				toast,
@@ -3248,10 +3249,10 @@ const ToastViewport = (0, react.forwardRef)(({ style }, ref) => {
 ToastViewport.displayName = "Toast.Viewport";
 const ToastTitle = (0, react.forwardRef)(({ children, style }, ref) => {
 	const theme = useTheme$1();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextComponent, {
 		ref,
 		style: [
-			styles$32.title,
+			styles$34.title,
 			{ fontSize: theme.typography.fontSizes[2].fontSize },
 			style
 		],
@@ -3261,10 +3262,10 @@ const ToastTitle = (0, react.forwardRef)(({ children, style }, ref) => {
 ToastTitle.displayName = "Toast.Title";
 const ToastDescription = (0, react.forwardRef)(({ children, style }, ref) => {
 	const theme = useTheme$1();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextComponent, {
 		ref,
 		style: [
-			styles$32.description,
+			styles$34.description,
 			{ fontSize: theme.typography.fontSizes[1].fontSize },
 			style
 		],
@@ -3277,7 +3278,7 @@ const ToastClose = (0, react.forwardRef)(({ children, onPress, style }, ref) =>
 		ref,
 		onPress,
 		style: ({ pressed }) => [
-			styles$32.closeButton,
+			styles$34.closeButton,
 			{ opacity: pressed ? .7 : 1 },
 			style
 		],
@@ -3287,7 +3288,7 @@ const ToastClose = (0, react.forwardRef)(({ children, onPress, style }, ref) =>
 			left: 8,
 			right: 8
 		},
-		children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, { children: "✕" })
+		children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextComponent, { children: "✕" })
 	});
 });
 ToastClose.displayName = "Toast.Close";
@@ -3297,18 +3298,18 @@ const ToastAction = (0, react.forwardRef)(({ label, onPress, style }, ref) => {
 		ref,
 		onPress,
 		style: ({ pressed }) => [
-			styles$32.actionButton,
+			styles$34.actionButton,
 			{ opacity: pressed ? .7 : 1 },
 			style
 		],
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
-			style: [styles$32.actionText, { color: theme.accentColor === "indigo" ? theme.colors.indigo[9] : theme.colors[theme.accentColor]?.[9] || theme.colors.indigo[9] }],
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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 = react_native.StyleSheet.create({
+const styles$34 = react_native.StyleSheet.create({
 	viewport: {
 		...react_native.StyleSheet.absoluteFillObject,
 		pointerEvents: "box-none"
@@ -3342,7 +3343,7 @@ const styles$32 = react_native.StyleSheet.create({
 	},
 	title: { fontWeight: "500" },
 	description: {
-		marginTop: 2,
+		marginTop: 1,
 		opacity: .8
 	},
 	actionButton: {
@@ -3408,7 +3409,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 = (0, react.useContext)(ThemeContext);
 	const deviceColorScheme = useDeviceColorScheme();
 	const resolvedInitialMode = appearance === "inherit" ? void 0 : appearance ?? initialMode;
@@ -3426,9 +3427,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");
@@ -3499,11 +3501,14 @@ const ThemeProvider = ({ children, accentColor, grayColor, radius, scaling, pane
 			...options
 		} : t));
 	}, []);
+	const resolvedHaptics = globalHaptics ?? true;
 	const value = (0, react.useMemo)(() => ({
 		theme,
 		mode,
+		appearance: appearance ?? "inherit",
 		setMode: handleSetMode,
 		toggleMode,
+		haptics: resolvedHaptics,
 		toastConfig,
 		toasts,
 		showToast,
@@ -3513,7 +3518,9 @@ const ThemeProvider = ({ children, accentColor, grayColor, radius, scaling, pane
 	}), [
 		theme,
 		mode,
+		appearance,
 		toggleMode,
+		resolvedHaptics,
 		toastConfig,
 		toasts,
 		showToast,
@@ -3542,14 +3549,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 = () => {
@@ -3621,6 +3636,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 = (0, react.useContext)(ThemeContext);
+	if (!context) throw new Error("useHaptics must be used within a ThemeProvider");
+	return context.haptics;
+};
 
 //#endregion
 //#region src/components/primitives/View.tsx
@@ -3638,7 +3662,6 @@ const RnView = react.default.memo(react.default.forwardRef(({ style, wrap, ...re
 	});
 }));
 RnView.displayName = "RnView";
-var View_default = RnView;
 
 //#endregion
 //#region src/components/primitives/Text.tsx
@@ -3690,7 +3713,6 @@ const RnPressable = react.default.memo(react.default.forwardRef(({ style, onPres
 	});
 }));
 RnPressable.displayName = "RnPressable";
-var Pressable_default = RnPressable;
 
 //#endregion
 //#region src/components/primitives/TouchableOpacity.tsx
@@ -3810,10 +3832,67 @@ const RnActivityIndicator = react.default.memo(react.default.forwardRef(({ color
 }));
 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) {
+		react_native.Platform.OS === "android" && react_native.Vibration.vibrate(10);
+	}
+	else react_native.Platform.OS === "android" && react_native.Vibration.vibrate(10);
+};
+
 //#endregion
 //#region src/components/primitives/AnimatedPressable.tsx
-const AnimatedPressableComponent = react_native.Animated.createAnimatedComponent(Pressable_default);
+const AnimatedPressableComponent = react_native.Animated.createAnimatedComponent(RnPressable);
 const AnimatedPressable = react.default.memo(react.default.forwardRef(({ children, onPressIn, onPressOut, disabled, pressedScale = .97, pressedOpacity = .9, animationDuration = 100, hapticFeedback = true, style, ...rest }, ref) => {
+	const globalHaptics = useHaptics$1();
 	const scaleAnim = (0, react.useRef)(new react_native.Animated.Value(1)).current;
 	const opacityAnim = (0, react.useRef)(new react_native.Animated.Value(1)).current;
 	const animatePressIn = (0, react.useCallback)(() => {
@@ -3853,12 +3932,13 @@ const AnimatedPressable = react.default.memo(react.default.forwardRef(({ childre
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedPressableComponent, {
 		ref,
 		onPressIn: (0, react.useCallback)((event) => {
-			if (hapticFeedback && !disabled) react_native.Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback && !disabled) triggerHaptic("press");
 			animatePressIn();
 			onPressIn?.(event);
 		}, [
 			animatePressIn,
 			onPressIn,
+			globalHaptics,
 			hapticFeedback,
 			disabled
 		]),
@@ -3877,15 +3957,14 @@ const AnimatedPressable = react.default.memo(react.default.forwardRef(({ childre
 	});
 }));
 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.default.memo(react.default.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.default.memo(react.default.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;
@@ -3909,6 +3988,7 @@ const Box = react.default.memo(react.default.forwardRef(({ asChild = false, chil
 		justifyContent,
 		alignItems,
 		flexWrap,
+		flex,
 		flexGrow,
 		flexShrink,
 		flexBasis,
@@ -3951,6 +4031,7 @@ const Box = react.default.memo(react.default.forwardRef(({ asChild = false, chil
 		justifyContent,
 		alignItems,
 		flexWrap,
+		flex,
 		flexGrow,
 		flexShrink,
 		flexBasis,
@@ -4749,12 +4830,12 @@ const Strong = react.default.memo(react.default.forwardRef(({ children, style =
 	const colors = useThemeMode$1() === "dark" ? theme.colors.gray.dark : theme.colors.gray;
 	const strongFont = theme.typography.fonts.strong;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextComponent, {
+		color,
 		ref,
 		style: [(0, react.useMemo)(() => ({
 			fontFamily: strongFont.fontFamily,
 			fontWeight: strongFont.fontWeight,
-			fontStyle: strongFont.fontStyle,
-			color: color || colors[12]
+			fontStyle: strongFont.fontStyle
 		}), [
 			strongFont,
 			color,
@@ -5015,7 +5096,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.default.memo(react.default.forwardRef(({ children, style, variant = "classic", color, radius, size = 2, disabled, loading, onPress, accessibilityLabel, width, highContrast, hapticFeedback, ...rest }, ref) => {
+const Button = react.default.memo(react.default.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";
@@ -5169,7 +5250,7 @@ const Button = react.default.memo(react.default.forwardRef(({ children, style, v
 			children: labelProps.children
 		}, "label");
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedPressable_default, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedPressable, {
 		ref,
 		style: [buttonStyle, style],
 		onPress: handlePress,
@@ -5202,52 +5283,48 @@ Button.Label = ButtonLabel;
 
 //#endregion
 //#region src/components/forms/IconButton.tsx
-const IconButton = react.default.forwardRef(({ children, style = {}, variant = "classic", color, size = 2, radius, asChild = false, disabled, loading, onPress, accessibilityLabel, highContrast, hapticFeedback, ...rest }, ref) => {
+const IconButton = react.default.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"
@@ -5270,7 +5347,7 @@ const IconButton = react.default.forwardRef(({ children, style = {}, variant = "
 			...child.props
 		});
 	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedPressable_default, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedPressable, {
 		ref,
 		style: [buttonStyle, style],
 		onPress,
@@ -5287,8 +5364,8 @@ const IconButton = react.default.forwardRef(({ children, style = {}, variant = "
 			size: "small",
 			color: variantColors.textColor
 		}) : react.default.isValidElement(children) ? react.default.cloneElement(children, {
-			size: sizeValues.iconSize,
-			color: variantColors.textColor
+			size: children.props?.size || sizeValues.iconSize,
+			color: children.props?.color || variantColors.textColor
 		}) : children
 	});
 });
@@ -5418,7 +5495,6 @@ const TextFieldRoot = react.default.forwardRef(({ children, ...props }, ref) =>
 	};
 	const inputContainerStyle = {
 		width: "100%",
-		flex: 1,
 		flexDirection: "row",
 		alignItems: "center",
 		justifyContent: "space-between",
@@ -5442,7 +5518,8 @@ const TextFieldRoot = react.default.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],
@@ -5468,7 +5545,7 @@ const TextFieldRoot = react.default.forwardRef(({ children, ...props }, ref) =>
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
 		style: [
-			styles$31.container,
+			styles$33.container,
 			containerStyle,
 			style
 		],
@@ -5486,7 +5563,7 @@ const TextFieldRoot = react.default.forwardRef(({ children, ...props }, ref) =>
 					style: inputInnerContainerStyle,
 					children: [
 						leftSlots.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-							style: [styles$31.leftSlots, slotWrapperStyle],
+							style: [styles$33.leftSlots, slotWrapperStyle],
 							children: leftSlots.map((child, index) => (0, react.isValidElement)(child) ? react.default.cloneElement(child, {
 								key: index,
 								side: "left"
@@ -5497,11 +5574,11 @@ const TextFieldRoot = react.default.forwardRef(({ children, ...props }, ref) =>
 							style: { flex: 1 },
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnTextInput, {
 								...commonInputProps,
-								style: [styles$31.input, inputStyle]
+								style: [styles$33.input, inputStyle]
 							})
 						}),
 						rightSlots.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-							style: [styles$31.rightSlots, slotWrapperStyle],
+							style: [styles$33.rightSlots, slotWrapperStyle],
 							children: rightSlots.map((child, index) => (0, react.isValidElement)(child) ? react.default.cloneElement(child, {
 								key: index,
 								side: "right"
@@ -5527,11 +5604,8 @@ const TextField = react.default.forwardRef((props, ref) => {
 TextField.displayName = "TextField";
 TextField.Root = TextFieldRoot;
 TextField.Slot = TextFieldSlot;
-const styles$31 = react_native.StyleSheet.create({
-	container: {
-		flex: 1,
-		width: "100%"
-	},
+const styles$33 = react_native.StyleSheet.create({
+	container: { width: "100%" },
 	leftSlots: {
 		flexDirection: "row",
 		alignItems: "center"
@@ -5543,25 +5617,73 @@ const styles$31 = react_native.StyleSheet.create({
 	input: {
 		flexDirection: "row",
 		width: "100%",
-		minWidth: "100%",
-		flex: 1
+		minWidth: "100%"
 	}
 });
 
 //#endregion
 //#region src/components/forms/TextArea.tsx
-const TextAreaRoot = react.default.forwardRef((props, ref) => {
+const TextAreaSlot = react.default.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 = (0, react.useMemo)(() => {
+		if (!color || !(0, react.isValidElement)(children)) return children;
+		return react.default.cloneElement(children, { color: theme.colors[color][9] });
+	}, [
+		children,
+		color,
+		theme,
+		isDark
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slot, {
+		ref,
+		style: slotStyle,
+		...props,
+		children: coloredChild
+	});
+});
+TextAreaSlot.displayName = "TextAreaSlot";
+const TextAreaRoot = react.default.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 } = (0, react.useMemo)(() => {
+		const slotChildren = [];
+		react.Children.forEach(children, (child) => {
+			if (!(0, react.isValidElement)(child)) return;
+			if (child.type?.displayName === "TextAreaSlot") slotChildren.push(child);
+		});
+		const leftSlots = [];
+		const rightSlots = [];
+		slotChildren.forEach((child) => {
+			if (!(0, react.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) => (0, react.isValidElement)(c) && !c.props?.side).indexOf(child) === 0) leftSlots.push(child);
+			else rightSlots.push(child);
+		});
+		return {
+			leftSlots,
+			rightSlots
+		};
+	}, [children]);
 	const [isFocused, setIsFocused] = (0, react.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 {
@@ -5590,10 +5712,10 @@ const TextAreaRoot = react.default.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 = () => {
@@ -5602,16 +5724,21 @@ const TextAreaRoot = react.default.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,
@@ -5625,7 +5752,7 @@ const TextAreaRoot = react.default.forwardRef((props, ref) => {
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
 		style: [
-			styles$30.container,
+			styles$32.container,
 			containerStyle,
 			style
 		],
@@ -5637,21 +5764,47 @@ const TextAreaRoot = react.default.forwardRef((props, ref) => {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
 				style: inputContainerStyle,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(Flex, {
+					align: "stretch",
+					direction: "row",
+					style: inputInnerContainerStyle,
+					children: [
+						leftSlots.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+							style: styles$32.leftSlots,
+							children: leftSlots.map((child, index) => (0, react.isValidElement)(child) ? react.default.cloneElement(child, {
+								key: index,
+								side: "left"
+							}) : child)
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Flex, {
+							direction: "row",
+							style: { flex: 1 },
+							wrap: "wrap",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+							style: styles$32.rightSlots,
+							children: rightSlots.map((child, index) => (0, react.isValidElement)(child) ? react.default.cloneElement(child, {
+								key: index,
+								side: "right"
+							}) : child)
+						})
+					]
 				})
 			}),
 			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnText, {
@@ -5669,12 +5822,19 @@ const TextArea = react.default.forwardRef((props, ref) => {
 	});
 });
 TextArea.displayName = "TextArea";
-const styles$30 = react_native.StyleSheet.create({
+TextArea.Root = TextAreaRoot;
+TextArea.Slot = TextAreaSlot;
+const styles$32 = react_native.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
@@ -5685,6 +5845,7 @@ const Checkbox = react.default.forwardRef(({ checked, defaultChecked = false, on
 	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);
@@ -5730,7 +5891,7 @@ const Checkbox = react.default.forwardRef(({ checked, defaultChecked = false, on
 				setInternalChecked(newChecked);
 				onCheckedChange?.(newChecked);
 			}
-			if (hapticFeedback) react_native.Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback) triggerHaptic("press");
 		}
 	};
 	const boxStyle = {
@@ -5752,9 +5913,9 @@ const Checkbox = react.default.forwardRef(({ checked, defaultChecked = false, on
 		color: theme.colors.gray || grayScale[12],
 		fontSize: sizeValues.fontSize
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AnimatedPressable_default, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AnimatedPressable, {
 		ref,
-		style: styles$29.container,
+		style: styles$31.container,
 		onPress: handlePress,
 		disabled,
 		accessibilityRole: "checkbox",
@@ -5770,9 +5931,9 @@ const Checkbox = react.default.forwardRef(({ checked, defaultChecked = false, on
 		hapticFeedback: false,
 		...rest,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
-			style: [styles$29.checkbox, boxStyle],
+			style: [styles$31.checkbox, boxStyle],
 			children: (isChecked || indeterminate) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
-				style: [styles$29.icon, iconStyle],
+				style: [styles$31.icon, iconStyle],
 				children: indeterminate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, { style: {
 					width: sizeValues.iconSize * .9,
 					height: 2.8,
@@ -5803,13 +5964,13 @@ const Checkbox = react.default.forwardRef(({ checked, defaultChecked = false, on
 				} })] })
 			})
 		}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextComponent, {
-			style: [styles$29.label, labelStyle],
+			style: [styles$31.label, labelStyle],
 			children: label
 		})]
 	});
 });
 Checkbox.displayName = "Checkbox";
-const styles$29 = react_native.StyleSheet.create({
+const styles$31 = react_native.StyleSheet.create({
 	container: {
 		flexDirection: "row",
 		alignItems: "center"
@@ -5839,7 +6000,7 @@ const CheckboxGroup = react.default.forwardRef(({ value, onValueChange, items, d
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
 		ref,
 		style: [
-			styles$28.container,
+			styles$30.container,
 			containerStyle,
 			style
 		],
@@ -5858,7 +6019,7 @@ const CheckboxGroup = react.default.forwardRef(({ value, onValueChange, items, d
 	});
 });
 CheckboxGroup.displayName = "CheckboxGroup";
-const styles$28 = react_native.StyleSheet.create({ container: { width: "100%" } });
+const styles$30 = react_native.StyleSheet.create({ container: { width: "100%" } });
 
 //#endregion
 //#region src/components/forms/CheckboxCards.tsx
@@ -5896,7 +6057,7 @@ const CheckboxCardsRoot = react.default.forwardRef(({ value: controlledValue, de
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
 			ref,
 			style: [
-				styles$27.rootContainer,
+				styles$29.rootContainer,
 				containerStyle,
 				style
 			],
@@ -5910,6 +6071,7 @@ const CheckboxCardsItem = react.default.forwardRef(({ value, side: itemSide, dis
 	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);
@@ -5949,7 +6111,7 @@ const CheckboxCardsItem = react.default.forwardRef(({ value, side: itemSide, dis
 		if (!isDisabled) {
 			if (isChecked) onValueChange(selectedValues.filter((v) => v !== value));
 			else onValueChange([...selectedValues, value]);
-			react_native.Vibration.vibrate(10);
+			if (globalHaptics) triggerHaptic("press");
 		}
 	};
 	const cardStyle = {
@@ -5964,10 +6126,10 @@ const CheckboxCardsItem = react.default.forwardRef(({ value, side: itemSide, dis
 		gap: theme.space[3]
 	};
 	sizeValues.indicatorSize, sizeValues.indicatorSize, sizeValues.borderWidth, isChecked ? variantColors.borderColor : grayAlpha["8"], isChecked && variantColors.backgroundColor;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AnimatedPressable_default, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AnimatedPressable, {
 		ref,
 		style: [
-			styles$27.itemContainer,
+			styles$29.itemContainer,
 			cardStyle,
 			style
 		],
@@ -5994,13 +6156,13 @@ const CheckboxCardsItem = react.default.forwardRef(({ value, side: itemSide, dis
 			size,
 			onCheckedChange: handlePress
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
-			style: styles$27.content,
+			style: styles$29.content,
 			children
 		})]
 	});
 });
 CheckboxCardsItem.displayName = "CheckboxCards.Item";
-const styles$27 = react_native.StyleSheet.create({
+const styles$29 = react_native.StyleSheet.create({
 	rootContainer: { width: "100%" },
 	itemContainer: { flex: 1 },
 	content: { flex: 1 }
@@ -6015,6 +6177,7 @@ const CheckboxCards = {
 const Radio = react.default.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);
@@ -6054,7 +6217,7 @@ const Radio = react.default.forwardRef(({ defaultChecked, value, selected, onSel
 		if (!disabled) {
 			if (onSelect) onSelect(value);
 			if (selected === void 0) setIsInternallySelected(true);
-			if (hapticFeedback) react_native.Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback) triggerHaptic("press");
 		}
 	};
 	const outerStyle = {
@@ -6078,9 +6241,9 @@ const Radio = react.default.forwardRef(({ defaultChecked, value, selected, onSel
 		color: grayScale[12],
 		fontSize: sizeValues.fontSize
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AnimatedPressable_default, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AnimatedPressable, {
 		ref,
-		style: styles$26.container,
+		style: styles$28.container,
 		onPress: handlePress,
 		disabled,
 		accessibilityRole: "radio",
@@ -6096,19 +6259,19 @@ const Radio = react.default.forwardRef(({ defaultChecked, value, selected, onSel
 		hapticFeedback: false,
 		...rest,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
-			style: [styles$26.radioOuter, outerStyle],
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, { style: [styles$26.radioInner, innerStyle] })
+			style: [styles$28.radioOuter, outerStyle],
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, { style: [styles$28.radioInner, innerStyle] })
 		}), children ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
-			style: styles$26.content,
+			style: styles$28.content,
 			children
 		}) : label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextComponent, {
-			style: [styles$26.label, labelStyle],
+			style: [styles$28.label, labelStyle],
 			children: label
 		}) : null]
 	});
 });
 Radio.displayName = "Radio";
-const styles$26 = react_native.StyleSheet.create({
+const styles$28 = react_native.StyleSheet.create({
 	container: {
 		flexDirection: "row",
 		alignItems: "center"
@@ -6159,7 +6322,7 @@ const RadioGroupRoot = react.default.forwardRef(({ value: controlledValue, defau
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
 			ref,
 			style: [
-				styles$25.container,
+				styles$27.container,
 				containerStyle,
 				style
 			],
@@ -6190,7 +6353,7 @@ const RadioGroupItem = react.default.forwardRef(({ value, disabled: itemDisabled
 	});
 });
 RadioGroupItem.displayName = "RadioGroup.Item";
-const styles$25 = react_native.StyleSheet.create({ container: { width: "100%" } });
+const styles$27 = react_native.StyleSheet.create({ container: { width: "100%" } });
 const RadioGroup = {
 	Root: RadioGroupRoot,
 	Item: RadioGroupItem
@@ -6232,7 +6395,7 @@ const RadioCardsRoot = react.default.forwardRef(({ value: controlledValue, defau
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
 			ref,
 			style: [
-				styles$24.rootContainer,
+				styles$26.rootContainer,
 				containerStyle,
 				style
 			],
@@ -6246,6 +6409,7 @@ const RadioCardsItem = react.default.forwardRef(({ value, side: itemSide, disabl
 	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;
@@ -6281,14 +6445,14 @@ const RadioCardsItem = react.default.forwardRef(({ value, side: itemSide, disabl
 	const handlePress = () => {
 		if (!isDisabled) {
 			onValueChange(value);
-			react_native.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",
@@ -6311,10 +6475,10 @@ const RadioCardsItem = react.default.forwardRef(({ value, side: itemSide, disabl
 		borderRadius: sizeValues.innerIndicatorSize / 2,
 		backgroundColor: variantColors.textColor
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AnimatedPressable_default, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AnimatedPressable, {
 		ref,
 		style: [
-			styles$24.itemContainer,
+			styles$26.itemContainer,
 			cardStyle,
 			style
 		],
@@ -6339,15 +6503,15 @@ const RadioCardsItem = react.default.forwardRef(({ value, side: itemSide, disabl
 			style: indicatorStyle,
 			children: isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, { style: innerDotStyle })
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
-			style: styles$24.content,
+			style: styles$26.content,
 			children
 		})]
 	});
 });
 RadioCardsItem.displayName = "RadioCards.Item";
-const styles$24 = react_native.StyleSheet.create({
+const styles$26 = react_native.StyleSheet.create({
 	rootContainer: { width: "100%" },
-	itemContainer: { flex: 1 },
+	itemContainer: {},
 	content: { flex: 1 }
 });
 const RadioCards = {
@@ -6360,6 +6524,7 @@ const RadioCards = {
 const Switch = react.default.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);
@@ -6377,7 +6542,7 @@ const Switch = react.default.forwardRef(({ defaultChecked, checked, onCheckedCha
 	const setChecked = (value) => {
 		if (checked === void 0) setInternalChecked(value);
 		if (onCheckedChange) onCheckedChange(value);
-		if (hapticFeedback && !disabled) react_native.Vibration.vibrate(10);
+		if (globalHaptics && hapticFeedback && !disabled) triggerHaptic("press");
 	};
 	const animatedValue = (0, react.useRef)(new react_native.Animated.Value(isChecked ? 1 : 0));
 	(0, react.useEffect)(() => {
@@ -6443,9 +6608,9 @@ const Switch = react.default.forwardRef(({ defaultChecked, checked, onCheckedCha
 		color: grayScale[12],
 		fontSize: sizeValues.fontSize
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AnimatedPressable_default, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AnimatedPressable, {
 		ref,
-		style: styles$23.container,
+		style: styles$25.container,
 		onPress: handlePress,
 		disabled,
 		accessibilityRole: "switch",
@@ -6461,16 +6626,16 @@ const Switch = react.default.forwardRef(({ defaultChecked, checked, onCheckedCha
 		hapticFeedback: false,
 		...rest,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
-			style: [styles$23.track, trackStyle],
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Animated.View, { style: [styles$23.thumb, thumbStyle] })
+			style: [styles$25.track, trackStyle],
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Animated.View, { style: [styles$25.thumb, thumbStyle] })
 		}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextComponent, {
-			style: [styles$23.label, labelStyle],
+			style: [styles$25.label, labelStyle],
 			children: label
 		})]
 	});
 });
 Switch.displayName = "Switch";
-const styles$23 = react_native.StyleSheet.create({
+const styles$25 = react_native.StyleSheet.create({
 	container: {
 		flexDirection: "row",
 		alignItems: "center"
@@ -6668,25 +6833,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.default.forwardRef(({ width = 9, height = 9, style, color = "currentColor" }, _forwardedRef) => {
+const ChevronDownIcon = react.default.forwardRef(({ width = 9, height = 9, style, color = "currentColor" }, _forwardedRef) => {
 	const armWidth = width * .55;
 	const armHeight = 2;
 	const armOffset = width * .22;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
 		style: [
-			styles$22.chevronContainer,
+			styles$24.chevronContainer,
 			{
 				width,
 				height
 			},
 			style
 		],
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$22.chevronArm, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$24.chevronArm, {
 			width: armWidth,
 			height: armHeight,
 			backgroundColor: color,
 			transform: [{ rotate: "45deg" }, { translateX: -armOffset }]
-		}] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$22.chevronArm, {
+		}] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$24.chevronArm, {
 			width: armWidth,
 			height: armHeight,
 			backgroundColor: color,
@@ -6694,7 +6859,7 @@ const ChevronDownIcon$1 = react.default.forwardRef(({ width = 9, height = 9, sty
 		}] })]
 	});
 });
-ChevronDownIcon$1.displayName = "ChevronDownIcon";
+ChevronDownIcon.displayName = "ChevronDownIcon";
 /**
 * ThickChevronRightIcon - A thick chevron pointing right using React Native View
 */
@@ -6703,19 +6868,19 @@ const ThickChevronRightIcon = react.default.forwardRef(({ width = 9, height = 9,
 	const armHeight = 2.5;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
 		style: [
-			styles$22.chevronContainer,
+			styles$24.chevronContainer,
 			{
 				width,
 				height
 			},
 			style
 		],
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$22.chevronArm, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$24.chevronArm, {
 			width: armWidth,
 			height: armHeight,
 			backgroundColor: color,
 			transform: [{ rotate: "45deg" }, { translateY: -1 }]
-		}] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$22.chevronArm, {
+		}] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$24.chevronArm, {
 			width: armWidth,
 			height: armHeight,
 			backgroundColor: color,
@@ -6730,14 +6895,14 @@ ThickChevronRightIcon.displayName = "ThickChevronRightIcon";
 const ThickCheckIcon = react.default.forwardRef(({ width = 9, height = 9, style, color = "currentColor" }, _forwardedRef) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
 		style: [
-			styles$22.checkContainer,
+			styles$24.checkContainer,
 			{
 				width,
 				height
 			},
 			style
 		],
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$22.checkShortArm, { backgroundColor: color }] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$22.checkLongArm, { backgroundColor: color }] })]
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$24.checkShortArm, { backgroundColor: color }] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$24.checkLongArm, { backgroundColor: color }] })]
 	});
 });
 ThickCheckIcon.displayName = "ThickCheckIcon";
@@ -6747,21 +6912,21 @@ ThickCheckIcon.displayName = "ThickCheckIcon";
 const ThickDividerHorizontalIcon = react.default.forwardRef(({ width = 9, height = 9, style, color = "currentColor" }, _forwardedRef) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
 		style: [
-			styles$22.dividerContainer,
+			styles$24.dividerContainer,
 			{
 				width,
 				height
 			},
 			style
 		],
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$22.dividerLine, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$24.dividerLine, {
 			width: width * .9,
 			backgroundColor: color
 		}] })
 	});
 });
 ThickDividerHorizontalIcon.displayName = "ThickDividerHorizontalIcon";
-const styles$22 = react_native.StyleSheet.create({
+const styles$24 = react_native.StyleSheet.create({
 	chevronContainer: {
 		alignItems: "center",
 		justifyContent: "center"
@@ -6915,10 +7080,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);
-		react_native.Vibration.vibrate(10);
+		if (globalHaptics) triggerHaptic("press");
 	};
 	if (asChild && react.default.isValidElement(children)) {
 		const child = children;
@@ -6971,7 +7137,7 @@ const SelectValue = ({ placeholder = "Select an option", style }) => {
 				flexShrink: 1
 			}, style || {}],
 			children: selectedText || placeholder
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDownIcon$1, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDownIcon, {
 			color: selectedText ? variantColors.textColor : grayAlpha[9],
 			width: sizeStyles(),
 			height: sizeStyles(),
@@ -6995,7 +7161,7 @@ const SelectOverlay = ({ style }) => {
 	const { onOpenChange } = useSelect();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.TouchableWithoutFeedback, {
 		onPress: () => onOpenChange(false),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$21.overlay, style] })
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$23.overlay, style] })
 	});
 };
 const SelectContent = ({ children, side = "bottom", sideOffset = 4, align = "start", alignOffset = 0, avoidCollisions = true, size = 2, style }) => {
@@ -7080,7 +7246,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,
@@ -7117,6 +7283,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 = (0, react.useCallback)((node) => {
 		if (typeof node === "string") return node;
@@ -7197,7 +7364,7 @@ const SelectItem = ({ children, value: itemValue, disabled = false, style }) =>
 		if (!disabled) {
 			setSelectedItemText(extractText(children));
 			onValueChange(itemValue);
-			react_native.Vibration.vibrate(10);
+			if (globalHaptics) triggerHaptic("press");
 		}
 	};
 	const itemPadding = getItemPadding();
@@ -7212,8 +7379,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,
 			{
@@ -7277,7 +7444,7 @@ const SelectItem = ({ children, value: itemValue, disabled = false, style }) =>
 const SelectSeparator = ({ style }) => {
 	const { colors } = useSelect();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [
-		styles$21.separator,
+		styles$23.separator,
 		{ backgroundColor: colors[6] },
 		style
 	] });
@@ -7321,7 +7488,7 @@ const SelectLabel = ({ children, style = {} }) => {
 		children
 	});
 };
-const styles$21 = react_native.StyleSheet.create({
+const styles$23 = react_native.StyleSheet.create({
 	overlay: {
 		flex: 1,
 		backgroundColor: "rgba(0, 0, 0, 0.01)"
@@ -7379,6 +7546,7 @@ const isRangeValue = (value) => {
 const Slider = react.default.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);
@@ -7527,7 +7695,7 @@ const Slider = react.default.forwardRef(({ value: controlledValue, defaultValue,
 		const touchX = event.nativeEvent.locationX;
 		const position = Math.max(0, Math.min(1, touchX / currentTrackLayout.width));
 		const newValue = positionToValue(position);
-		if (hapticFeedback) react_native.Vibration.vibrate(10);
+		if (globalHaptics && hapticFeedback) triggerHaptic("press");
 		if (valuesRef.current.length === 1) {
 			updateValue([newValue]);
 			handleValueChangeEnd([newValue]);
@@ -7583,7 +7751,7 @@ const Slider = react.default.forwardRef(({ value: controlledValue, defaultValue,
 			const nearestIndex = getNearestThumbIndex(Math.max(0, Math.min(1, touchX / trackLayoutRef2.current.width)));
 			setActiveThumbIndex(nearestIndex);
 			activeThumbIndexRef.current = nearestIndex;
-			if (hapticFeedback) react_native.Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback) triggerHaptic("selection");
 		},
 		onPanResponderMove: (_event, gestureState) => {
 			if (activeThumbIndexRef.current !== null) handleDrag(gestureState, activeThumbIndexRef.current);
@@ -7592,13 +7760,13 @@ const Slider = react.default.forwardRef(({ value: controlledValue, defaultValue,
 			setActiveThumbIndex(null);
 			activeThumbIndexRef.current = null;
 			handleValueChangeEnd(valuesRef.current);
-			if (hapticFeedback) react_native.Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback) triggerHaptic("selection");
 		},
 		onPanResponderTerminate: () => {
 			setActiveThumbIndex(null);
 			activeThumbIndexRef.current = null;
 			handleValueChangeEnd(valuesRef.current);
-			if (hapticFeedback) react_native.Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback) triggerHaptic("selection");
 		},
 		onPanResponderTerminationRequest: () => false
 	})).current;
@@ -7744,7 +7912,7 @@ const Slider = react.default.forwardRef(({ value: controlledValue, defaultValue,
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.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}`,
@@ -7752,17 +7920,17 @@ const Slider = react.default.forwardRef(({ value: controlledValue, defaultValue,
 		accessibilityState: { disabled },
 		...rest,
 		children: [(label || showValueLabel) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RnView, {
-			style: styles$20.labelContainer,
+			style: styles$22.labelContainer,
 			children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextComponent, {
-				style: [styles$20.label, labelStyle],
+				style: [styles$22.label, labelStyle],
 				children: label
 			}), showValueLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextComponent, {
-				style: [styles$20.valueLabel, labelStyle],
+				style: [styles$22.valueLabel, labelStyle],
 				children: formatValueLabel()
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RnView, {
 			ref: trackLayoutRef,
-			style: [styles$20.track, {
+			style: [styles$22.track, {
 				height: sizeValues.trackHeight,
 				borderRadius,
 				backgroundColor: trackBackgroundColor,
@@ -7775,15 +7943,15 @@ const Slider = react.default.forwardRef(({ value: controlledValue, defaultValue,
 				values.length === 1 && thumbAnimations[0] && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Animated.View, { style: getFilledTrackStyle(thumbAnimations[0], 0) }),
 				values.length === 2 && thumbAnimations[0] && thumbAnimations[1] && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Animated.View, { style: getFilledTrackStyle(thumbAnimations[1], 1) }),
 				thumbAnimations.slice(0, values.length).map((animatedValue, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Animated.View, {
-					style: [styles$20.thumb, getThumbStyle(animatedValue)],
-					children: !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, { style: [styles$20.thumbInner, thumbInnerStyle] })
+					style: [styles$22.thumb, getThumbStyle(animatedValue)],
+					children: !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, { style: [styles$22.thumbInner, thumbInnerStyle] })
 				}, index))
 			]
 		})]
 	});
 });
 Slider.displayName = "Slider";
-const styles$20 = react_native.StyleSheet.create({
+const styles$22 = react_native.StyleSheet.create({
 	container: { width: "100%" },
 	labelContainer: {
 		flexDirection: "row",
@@ -7863,7 +8031,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__ */ (0, react_jsx_runtime.jsx)(react_native.TouchableWithoutFeedback, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [
-		styles$19.overlay,
+		styles$21.overlay,
 		{ backgroundColor: overlayColor },
 		style
 	] }) });
@@ -7905,7 +8073,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__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
 		style: [
-			styles$19.content,
+			styles$21.content,
 			{
 				backgroundColor: isDark ? theme.colors.gray.dark[2] : "#ffffff",
 				borderRadius: sizeStyles.radius,
@@ -7919,14 +8087,14 @@ const DialogContent = ({ children, style, hideCloseButton = false, size = 2 }) =
 			style
 		],
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.ScrollView, {
-			style: styles$19.scrollContent,
-			contentContainerStyle: styles$19.scrollContentContainer,
+			style: styles$21.scrollContent,
+			contentContainerStyle: styles$21.scrollContentContainer,
 			showsVerticalScrollIndicator: true,
 			bounces: true,
 			children
 		}), !hideCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.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__ */ (0, react_jsx_runtime.jsx)(TextComponent, {
@@ -8011,7 +8179,7 @@ const DialogAction = ({ children, onPress, ...buttonProps }) => {
 		children
 	});
 };
-const styles$19 = react_native.StyleSheet.create({
+const styles$21 = react_native.StyleSheet.create({
 	overlay: {
 		flex: 1,
 		backgroundColor: "rgba(0, 0, 0, 0.5)"
@@ -8108,7 +8276,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__ */ (0, react_jsx_runtime.jsx)(react_native.TouchableWithoutFeedback, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [
-		styles$18.overlay,
+		styles$20.overlay,
 		{ backgroundColor: overlayColor },
 		style
 	] }) });
@@ -8149,7 +8317,7 @@ const AlertDialogContent = ({ children, style, hideCloseButton = true, size = 2
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
 		style: [
-			styles$18.content,
+			styles$20.content,
 			{
 				backgroundColor: isDark ? theme.colors.gray.dark[2] : theme.colors.gray[1],
 				borderRadius: sizeStyles.radius,
@@ -8163,14 +8331,14 @@ const AlertDialogContent = ({ children, style, hideCloseButton = true, size = 2
 			style
 		],
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.ScrollView, {
-			style: styles$18.scrollContent,
-			contentContainerStyle: styles$18.scrollContentContainer,
+			style: styles$20.scrollContent,
+			contentContainerStyle: styles$20.scrollContentContainer,
 			showsVerticalScrollIndicator: true,
 			bounces: true,
 			children
 		}), !hideCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.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__ */ (0, react_jsx_runtime.jsx)(TextComponent, {
@@ -8260,7 +8428,7 @@ const AlertDialog = ({ open, onOpenChange, title, description, cancel, action, c
 			description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialogDescription, { children: description }),
 			children,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
-				style: styles$18.actionRow,
+				style: styles$20.actionRow,
 				children: [cancel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialogCancel, {
 					variant: "ghost",
 					children: cancel.label || "Cancel"
@@ -8274,7 +8442,7 @@ const AlertDialog = ({ open, onOpenChange, title, description, cancel, action, c
 		] })] })
 	});
 };
-const styles$18 = react_native.StyleSheet.create({
+const styles$20 = react_native.StyleSheet.create({
 	overlay: {
 		flex: 1,
 		backgroundColor: "rgba(0, 0, 0, 0.5)"
@@ -8468,7 +8636,7 @@ const PopoverOverlay = ({ style }) => {
 	const { onOpenChange } = usePopover();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.TouchableWithoutFeedback, {
 		onPress: () => onOpenChange(false),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$17.overlay, style] })
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$19.overlay, style] })
 	});
 };
 const PopoverContent = ({ children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, avoidCollisions = true, size = 2, style }) => {
@@ -8537,7 +8705,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,
@@ -8603,7 +8771,7 @@ const PopoverClose = ({ children, ariaLabel = "Close popover" }) => {
 	const { onOpenChange, colors } = usePopover();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Pressable, {
 		onPress: () => onOpenChange(false),
-		style: styles$17.closeButton,
+		style: styles$19.closeButton,
 		accessibilityLabel: ariaLabel,
 		accessibilityRole: "button",
 		children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextComponent, {
@@ -8615,7 +8783,7 @@ const PopoverClose = ({ children, ariaLabel = "Close popover" }) => {
 		})
 	});
 };
-const styles$17 = react_native.StyleSheet.create({
+const styles$19 = react_native.StyleSheet.create({
 	overlay: {
 		flex: 1,
 		backgroundColor: "rgba(0, 0, 0, 0.01)"
@@ -8776,7 +8944,7 @@ const TooltipPortal = ({ children }) => {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.TouchableWithoutFeedback, {
 			onPress: () => onOpenChange(false),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-				style: styles$16.overlay,
+				style: styles$18.overlay,
 				children
 			})
 		})
@@ -8837,7 +9005,7 @@ const TooltipContent = ({ children, side = "top", sideOffset = 8, align = "cente
 		ref: contentRef,
 		onLayout: handleLayout,
 		style: [
-			styles$16.content,
+			styles$18.content,
 			{
 				backgroundColor: tooltipBackground,
 				borderRadius,
@@ -8863,15 +9031,15 @@ const TooltipContent = ({ children, side = "top", sideOffset = 8, align = "cente
 			},
 			children
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.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"
@@ -8910,7 +9078,7 @@ const Tooltip = ({ children, content, side = "top", sideOffset = 8, align = "cen
 		}) })]
 	});
 };
-const styles$16 = react_native.StyleSheet.create({
+const styles$18 = react_native.StyleSheet.create({
 	overlay: {
 		flex: 1,
 		backgroundColor: "rgba(0, 0, 0, 0.01)"
@@ -9021,10 +9189,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) react_native.Vibration.vibrate(10);
+		if (globalHaptics && hapticFeedback) triggerHaptic("press");
 	};
 	if (asChild && react.default.isValidElement(children)) {
 		const child = children;
@@ -9036,7 +9205,7 @@ const DropdownMenuTrigger = ({ children, asChild = false, hapticFeedback = true
 			}
 		});
 	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedPressable_default, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedPressable, {
 		ref: anchorRef,
 		onPress: handlePress,
 		pressedScale: .98,
@@ -9046,18 +9215,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__ */ (0, react_jsx_runtime.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 = () => {
@@ -9093,7 +9250,7 @@ const DropdownMenuOverlay = ({ style }) => {
 	const { onOpenChange } = useDropdownMenu();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.TouchableWithoutFeedback, {
 		onPress: () => onOpenChange(false),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$15.overlay, style] })
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$17.overlay, style] })
 	});
 };
 const DropdownMenuContent = ({ children, side = "bottom", sideOffset = 4, align = "start", alignOffset = 0, avoidCollisions = true, size = 2, style }) => {
@@ -9177,7 +9334,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,
@@ -9208,6 +9365,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;
@@ -9252,17 +9410,17 @@ const DropdownMenuItem = ({ children, color, onSelect, disabled = false, shortcu
 		if (!disabled) {
 			onSelect?.();
 			onOpenChange(false);
-			if (hapticFeedback) react_native.Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback) triggerHaptic("press");
 		}
 	};
 	const itemPadding = getItemPadding();
 	const fontSize = getFontSize();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AnimatedPressable_default, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.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
@@ -9292,7 +9450,7 @@ const DropdownMenuItem = ({ children, color, onSelect, disabled = false, shortcu
 const DropdownMenuSeparator = ({ style }) => {
 	const { colors } = useDropdownMenu();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [
-		styles$15.separator,
+		styles$17.separator,
 		{ backgroundColor: colors[6] },
 		style
 	] });
@@ -9365,7 +9523,7 @@ const DropdownMenuCheckboxItem = ({ children, checked, onCheckedChange, disabled
 				alignItems: "center"
 			},
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-				style: [styles$15.checkbox, {
+				style: [styles$17.checkbox, {
 					width: checkboxSize,
 					height: checkboxSize,
 					borderColor: colors[9],
@@ -9392,6 +9550,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 = (0, react.useCallback)(() => {
 		switch (size) {
@@ -9412,7 +9571,7 @@ const DropdownMenuRadioItem = ({ children, value, checked, onCheckedChange, disa
 	const handlePress = () => {
 		if (!disabled) {
 			onCheckedChange(value);
-			if (hapticFeedback) react_native.Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback) triggerHaptic("press");
 		}
 	};
 	const itemPadding = (0, react.useCallback)(() => {
@@ -9431,12 +9590,12 @@ const DropdownMenuRadioItem = ({ children, value, checked, onCheckedChange, disa
 			};
 		}
 	}, [size, theme.space])();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedPressable_default, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedPressable, {
 		onPress: handlePress,
 		disabled,
 		style: [
-			styles$15.item,
-			disabled && styles$15.itemDisabled,
+			styles$17.item,
+			disabled && styles$17.itemDisabled,
 			itemPadding
 		],
 		accessibilityRole: "menuitem",
@@ -9455,7 +9614,7 @@ const DropdownMenuRadioItem = ({ children, value, checked, onCheckedChange, disa
 				flex: 1
 			},
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-				style: [styles$15.radio, {
+				style: [styles$17.radio, {
 					width: radioSize,
 					height: radioSize,
 					borderRadius: radioSize / 2,
@@ -9484,6 +9643,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 = (0, react.useCallback)(() => {
@@ -9511,13 +9671,13 @@ const DropdownMenuSubTrigger = ({ children, hapticFeedback = true }) => {
 	}, [size, theme.space]);
 	const handlePress = () => {
 		onOpenSubmenu(openSubmenu === submenuId ? null : submenuId);
-		if (hapticFeedback) react_native.Vibration.vibrate(10);
+		if (globalHaptics && hapticFeedback) triggerHaptic("press");
 	};
 	const itemPadding = getItemPadding();
 	const fontSize = getFontSize();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AnimatedPressable_default, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AnimatedPressable, {
 		onPress: handlePress,
-		style: [styles$15.item, itemPadding],
+		style: [styles$17.item, itemPadding],
 		pressedScale: .98,
 		pressedOpacity: .95,
 		animationDuration: 100,
@@ -9558,7 +9718,7 @@ const DropdownMenuSubContent = ({ children }) => {
 		}
 	}, [size, theme.space])();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-		style: [styles$15.content, {
+		style: [styles$17.content, {
 			backgroundColor: colors[1],
 			borderRadius: radii.medium,
 			borderWidth: 1,
@@ -9573,7 +9733,7 @@ const DropdownMenuSubContent = ({ children }) => {
 		children
 	});
 };
-const styles$15 = react_native.StyleSheet.create({
+const styles$17 = react_native.StyleSheet.create({
 	overlay: {
 		flex: 1,
 		backgroundColor: "rgba(0, 0, 0, 0.01)"
@@ -9667,6 +9827,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({
@@ -9675,7 +9836,7 @@ const ContextMenuTrigger = ({ children, onLongPress, asChild = false, hapticFeed
 		});
 		onOpenChange(true);
 		onLongPress?.(event);
-		if (hapticFeedback) react_native.Vibration.vibrate(10);
+		if (globalHaptics && hapticFeedback) triggerHaptic("press");
 	};
 	if (asChild && react.default.isValidElement(children)) {
 		const child = children;
@@ -9684,7 +9845,7 @@ const ContextMenuTrigger = ({ children, onLongPress, asChild = false, hapticFeed
 			handleLongPress(e);
 		} });
 	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedPressable_default, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedPressable, {
 		onLongPress: handleLongPress,
 		pressedScale: .98,
 		pressedOpacity: .95,
@@ -9709,7 +9870,7 @@ const ContextMenuOverlay = ({ style }) => {
 	const { onOpenChange } = useContextMenuContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.TouchableWithoutFeedback, {
 		onPress: () => onOpenChange(false),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$14.overlay, style] })
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$16.overlay, style] })
 	});
 };
 /**
@@ -9746,6 +9907,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 = (0, react.useRef)(null);
 	const [contentSize, setContentSize] = (0, react.useState)({
 		width: 0,
@@ -9791,12 +9953,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,
@@ -9826,11 +9987,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) react_native.Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback) triggerHaptic("press");
 		}
 	};
 	const getFontSize = (0, react.useCallback)(() => {
@@ -9865,12 +10027,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__ */ (0, react_jsx_runtime.jsxs)(AnimatedPressable_default, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AnimatedPressable, {
 		onPress: handlePress,
 		disabled,
 		style: [
-			styles$14.item,
-			disabled && styles$14.itemDisabled,
+			styles$16.item,
+			disabled && styles$16.itemDisabled,
 			itemPadding,
 			style
 		],
@@ -9906,7 +10068,7 @@ const ContextMenuItem = ({ children, color, onSelect, disabled = false, destruct
 const ContextMenuSeparator = ({ style }) => {
 	const { colors } = useContextMenuContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [
-		styles$14.separator,
+		styles$16.separator,
 		{ backgroundColor: colors[6] },
 		style
 	] });
@@ -9980,7 +10142,7 @@ const ContextMenuCheckboxItem = ({ children, checked, onCheckedChange, disabled
 				flex: 1
 			},
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-				style: [styles$14.checkbox, {
+				style: [styles$16.checkbox, {
 					width: checkboxSize,
 					height: checkboxSize,
 					borderColor: colors[9],
@@ -10005,9 +10167,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 = (0, react.useCallback)(() => {
 		switch (size) {
 			case 1: return theme.typography.fontSizes[1].fontSize;
@@ -10027,7 +10190,7 @@ const ContextMenuRadioItem = ({ children, value, checked, onCheckedChange, disab
 	const handlePress = () => {
 		if (!disabled) {
 			onCheckedChange(value);
-			react_native.Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback) triggerHaptic("press");
 		}
 	};
 	const itemPadding = (0, react.useCallback)(() => {
@@ -10046,12 +10209,12 @@ const ContextMenuRadioItem = ({ children, value, checked, onCheckedChange, disab
 			};
 		}
 	}, [size, theme.space])();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedPressable_default, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedPressable, {
 		onPress: handlePress,
 		disabled,
 		style: [
-			styles$14.item,
-			disabled && styles$14.itemDisabled,
+			styles$16.item,
+			disabled && styles$16.itemDisabled,
 			itemPadding
 		],
 		accessibilityRole: "menuitem",
@@ -10070,7 +10233,7 @@ const ContextMenuRadioItem = ({ children, value, checked, onCheckedChange, disab
 				flex: 1
 			},
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-				style: [styles$14.radio, {
+				style: [styles$16.radio, {
 					width: radioSize,
 					height: radioSize,
 					borderRadius: radioSize / 2,
@@ -10094,7 +10257,7 @@ const ContextMenuRadioItem = ({ children, value, checked, onCheckedChange, disab
 		})
 	});
 };
-const styles$14 = react_native.StyleSheet.create({
+const styles$16 = react_native.StyleSheet.create({
 	overlay: {
 		flex: 1,
 		backgroundColor: "rgba(0, 0, 0, 0.01)"
@@ -10259,7 +10422,7 @@ const BottomSheetRoot = ({ children, open: controlledOpen, onOpenChange, snapPoi
 			},
 			onPanResponderRelease: (_, gestureState) => {
 				if (gestureState.dy > 100 || gestureState.vy > 500 / 1e3) {
-					react_native.Vibration.vibrate(10);
+					if (globalHaptics) triggerHaptic("selection");
 					react_native.Animated.timing(translateY, {
 						toValue: targetSnapHeight,
 						duration: 200,
@@ -10291,7 +10454,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__ */ (0, react_jsx_runtime.jsx)(BottomSheetContext.Provider, {
@@ -10315,15 +10480,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) react_native.Vibration.vibrate(10);
+		if (globalHaptics && hapticFeedback) triggerHaptic("press");
 	};
 	if (asChild && react.default.isValidElement(children)) return react.default.cloneElement(children, { onPress: (e) => {
 		children.props?.onPress?.(e);
 		handlePress();
 	} });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedPressable_default, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedPressable, {
 		onPress: handlePress,
 		pressedScale: .98,
 		pressedOpacity: .95,
@@ -10345,15 +10511,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) react_native.Vibration.vibrate(10);
+		if (globalHaptics && hapticFeedback) triggerHaptic("selection");
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.TouchableWithoutFeedback, {
 		onPress: handlePress,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [
-			styles$13.overlay,
+			styles$15.overlay,
 			{ backgroundColor: overlayColor },
 			style
 		] })
@@ -10364,10 +10532,10 @@ const BottomSheetHandle = ({ style }) => {
 	const theme = useTheme$1();
 	const handleColor = useThemeMode$1() === "dark" ? theme.colors.gray.dark[8] : theme.colors.gray[8];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Pressable, {
-		style: styles$13.handleContainer,
+		style: styles$15.handleContainer,
 		...panHandlers,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [
-			styles$13.handle,
+			styles$15.handle,
 			{ backgroundColor: handleColor },
 			style
 		] })
@@ -10377,7 +10545,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";
@@ -10385,27 +10555,22 @@ const BottomSheetContent = ({ children, style, snapPoints: localSnapPoints, size
 	const borderTopRightRadius = radii.large;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.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__ */ (0, react_jsx_runtime.jsx)(BottomSheetHandle, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.ScrollView, {
-			style: styles$13.scrollContent,
-			contentContainerStyle: styles$13.scrollContentContainer,
-			showsVerticalScrollIndicator: true,
-			bounces: true,
-			children
-		})]
+		children: [!hideHandle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BottomSheetHandle, {}), children]
 	});
 };
 const BottomSheetTitle = ({ children, style = {}, size = 4, weight = "bold", align, color, truncate, numberOfLines, fontFamily, opacity, asChild = false, ...rest }) => {
@@ -10455,7 +10620,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__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
 		style: [
-			styles$13.footer,
+			styles$15.footer,
 			withBorder && {
 				borderTopWidth: 1,
 				borderTopColor: borderColor
@@ -10467,16 +10632,17 @@ const BottomSheetFooter = ({ children, style, withBorder = true, withPadding = t
 			style
 		],
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.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) react_native.Vibration.vibrate(10);
+		if (globalHaptics && hapticFeedback) triggerHaptic("selection");
 	};
 	if (asChild && children && react.default.isValidElement(children)) return react.default.cloneElement(children, { onPress: (e) => {
 		children.props?.onPress?.(e);
@@ -10491,10 +10657,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) react_native.Vibration.vibrate(10);
+		if (globalHaptics && hapticFeedback) triggerHaptic("selection");
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 		...buttonProps,
@@ -10502,7 +10669,7 @@ const BottomSheetAction = ({ children, onPress, hapticFeedback = true, ...button
 		children
 	});
 };
-const styles$13 = react_native.StyleSheet.create({
+const styles$15 = react_native.StyleSheet.create({
 	overlay: {
 		flex: 1,
 		backgroundColor: "rgba(0, 0, 0, 0.5)"
@@ -10512,7 +10679,8 @@ const styles$13 = react_native.StyleSheet.create({
 		left: 0,
 		right: 0,
 		bottom: 0,
-		elevation: 4
+		elevation: 4,
+		paddingBottom: 16
 	},
 	handleContainer: {
 		alignItems: "center",
@@ -10531,8 +10699,7 @@ const styles$13 = react_native.StyleSheet.create({
 	footer: {
 		flexDirection: "row",
 		justifyContent: "flex-end",
-		alignItems: "center",
-		marginTop: 8
+		alignItems: "center"
 	},
 	footerContent: {
 		flexDirection: "row",
@@ -10554,49 +10721,617 @@ const BottomSheet = {
 };
 
 //#endregion
-//#region src/components/data-display/Avatar.tsx
-const Avatar = react.default.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] = (0, react.useState)(false);
-	const variantColors = (0, react.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 = (0, react.createContext)(null);
+const useSidebar = () => {
+	const context = (0, react.useContext)(SidebarContext);
+	if (!context) throw new Error("Sidebar components must be used within a Sidebar.Root");
+	return context;
+};
+const { width: SCREEN_WIDTH } = react_native.Dimensions.get("window");
+const SidebarRoot = ({ children, open: controlledOpen, onOpenChange, side = "left", variant = "overlay", width = 280, animationDuration = 300 }) => {
+	const [internalOpen, setInternalOpen] = (0, react.useState)(false);
+	const open = controlledOpen !== void 0 ? controlledOpen : internalOpen;
+	const initialTranslateX = side === "left" ? -width : width;
+	const translateX = (0, react.useRef)(new react_native.Animated.Value(open ? 0 : initialTranslateX)).current;
+	const mainTranslateX = (0, react.useRef)(new react_native.Animated.Value(0)).current;
+	const skipAnimationRef = (0, react.useRef)(false);
+	const swipeDistance = (0, react.useRef)(0);
+	const isSwiping = (0, react.useRef)(false);
+	const startX = (0, react.useRef)(0);
+	const handleOpenChange = (0, react.useCallback)((newOpen, skipAnimation = false) => {
+		skipAnimationRef.current = skipAnimation;
+		if (controlledOpen === void 0) setInternalOpen(newOpen);
+		onOpenChange?.(newOpen);
+	}, [controlledOpen, onOpenChange]);
+	const panResponder = (0, react.useMemo)(() => {
+		return react_native.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) react_native.Animated.timing(translateX, {
+					toValue: 0,
+					duration: animationDuration,
+					useNativeDriver: true
+				}).start();
+				else if (gestureState.dx < -threshold || gestureState.vx < -velocityThreshold / 1e3) {
+					if (globalHaptics) triggerHaptic("selection");
+					react_native.Animated.timing(translateX, {
+						toValue: -width,
+						duration: animationDuration,
+						useNativeDriver: true
+					}).start();
+				} else react_native.Animated.spring(translateX, {
+					toValue: open ? 0 : -width,
+					tension: 65,
+					friction: 11,
+					useNativeDriver: true
+				}).start();
+				else if (gestureState.dx < -threshold || gestureState.vx < -velocityThreshold / 1e3) react_native.Animated.timing(translateX, {
+					toValue: 0,
+					duration: animationDuration,
+					useNativeDriver: true
+				}).start();
+				else if (gestureState.dx > threshold || gestureState.vx > velocityThreshold / 1e3) {
+					if (globalHaptics) triggerHaptic("selection");
+					react_native.Animated.timing(translateX, {
+						toValue: width,
+						duration: animationDuration,
+						useNativeDriver: true
+					}).start();
+				} else react_native.Animated.spring(translateX, {
+					toValue: open ? 0 : width,
+					tension: 65,
+					friction: 11,
+					useNativeDriver: true
+				}).start();
+				isSwiping.current = false;
+			}
+		});
+	}, [
+		translateX,
+		width,
+		side,
+		open,
+		initialTranslateX,
+		handleOpenChange,
+		globalHaptics
+	]);
+	(0, react.useEffect)(() => {
+		if (skipAnimationRef.current) {
+			skipAnimationRef.current = false;
+			return;
+		}
+		if (open) {
+			translateX.setValue(side === "left" ? -width : width);
+			react_native.Animated.timing(translateX, {
+				toValue: 0,
+				duration: animationDuration,
+				useNativeDriver: true
+			}).start();
+		} else react_native.Animated.timing(translateX, {
+			toValue: side === "left" ? -width : width,
+			duration: animationDuration,
+			useNativeDriver: true
+		}).start();
+	}, [
+		open,
+		width,
+		side,
+		translateX,
+		animationDuration
+	]);
+	(0, react.useEffect)(() => {
+		if (skipAnimationRef.current) return;
+		if (variant === "push") if (open) react_native.Animated.timing(mainTranslateX, {
+			toValue: side === "left" ? width : -width,
+			duration: animationDuration,
+			useNativeDriver: true
+		}).start();
+		else react_native.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__ */ (0, react_jsx_runtime.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.default.isValidElement(children)) return react.default.cloneElement(children, { onPress: (e) => {
+		children.props?.onPress?.(e);
+		handlePress();
+	} });
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(react_native.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__ */ (0, react_jsx_runtime.jsx)(react_native.TouchableWithoutFeedback, {
+		onPress: handlePress,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.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__ */ (0, react_jsx_runtime.jsx)(react_native.Animated.View, {
+			style: [{
+				backgroundColor,
+				width,
+				...borderRadius,
+				transform: [{ translateX }],
+				...shadow || {},
+				...positionStyle
+			}, style],
+			...panHandlers,
+			children
+		});
+	}
+	const positionStyle = side === "left" ? { left: 0 } : { right: 0 };
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.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__ */ (0, react_jsx_runtime.jsx)(react_native.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__ */ (0, react_jsx_runtime.jsx)(react_native.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__ */ (0, react_jsx_runtime.jsx)(react_native.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__ */ (0, react_jsx_runtime.jsx)(react_native.TouchableWithoutFeedback, {
+		onPress: handlePress,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.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__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+	const containerPanResponder = (0, react.useMemo)(() => {
+		return react_native.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);
+					react_native.Animated.timing(translateX, {
+						toValue: -width,
+						duration: animationDuration,
+						useNativeDriver: true
+					}).start();
+					react_native.Animated.timing(mainTranslateX, {
+						toValue: 0,
+						duration: animationDuration,
+						useNativeDriver: true
+					}).start();
+				} else {
+					react_native.Animated.spring(translateX, {
+						toValue: 0,
+						tension: 65,
+						friction: 11,
+						useNativeDriver: true
+					}).start();
+					react_native.Animated.spring(mainTranslateX, {
+						toValue: width,
+						tension: 65,
+						friction: 11,
+						useNativeDriver: true
+					}).start();
+				}
+				else if (gestureState.dx > threshold || gestureState.vx > velocityThreshold / 1e3) {
+					react_native.Animated.timing(translateX, {
+						toValue: 0,
+						duration: animationDuration,
+						useNativeDriver: true
+					}).start();
+					react_native.Animated.timing(mainTranslateX, {
+						toValue: width,
+						duration: animationDuration,
+						useNativeDriver: true
+					}).start();
+					onOpenChange(true, true);
+				} else {
+					react_native.Animated.spring(translateX, {
+						toValue: -width,
+						tension: 65,
+						friction: 11,
+						useNativeDriver: true
+					}).start();
+					react_native.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);
+					react_native.Animated.timing(translateX, {
+						toValue: width,
+						duration: animationDuration,
+						useNativeDriver: true
+					}).start();
+					react_native.Animated.timing(mainTranslateX, {
+						toValue: 0,
+						duration: animationDuration,
+						useNativeDriver: true
+					}).start();
+				} else {
+					react_native.Animated.spring(translateX, {
+						toValue: 0,
+						tension: 65,
+						friction: 11,
+						useNativeDriver: true
+					}).start();
+					react_native.Animated.spring(mainTranslateX, {
+						toValue: -width,
+						tension: 65,
+						friction: 11,
+						useNativeDriver: true
+					}).start();
+				}
+				else if (gestureState.dx < -threshold || gestureState.vx < -velocityThreshold / 1e3) {
+					react_native.Animated.timing(translateX, {
+						toValue: 0,
+						duration: animationDuration,
+						useNativeDriver: true
+					}).start();
+					react_native.Animated.timing(mainTranslateX, {
+						toValue: -width,
+						duration: animationDuration,
+						useNativeDriver: true
+					}).start();
+					onOpenChange(true, true);
+				} else {
+					react_native.Animated.spring(translateX, {
+						toValue: width,
+						tension: 65,
+						friction: 11,
+						useNativeDriver: true
+					}).start();
+					react_native.Animated.spring(mainTranslateX, {
+						toValue: 0,
+						tension: 65,
+						friction: 11,
+						useNativeDriver: true
+					}).start();
+				}
+			}
+		});
+	}, [
+		side,
+		width,
+		open,
+		onOpenChange,
+		translateX,
+		mainTranslateX,
+		animationDuration
+	]);
+	const childArray = react.default.Children.toArray(children);
+	let contentChild = null;
+	let mainChild = null;
+	childArray.forEach((child) => {
+		if (react.default.isValidElement(child) && child.type === SidebarContent) contentChild = child;
+		else if (react.default.isValidElement(child) && child.type === SidebarMain) mainChild = child;
+	});
+	if (side === "right" && mainChild && contentChild) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+		style: styles$14.container,
+		...containerPanResponder.panHandlers,
+		children: [mainChild, contentChild]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.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__ */ (0, react_jsx_runtime.jsx)(react_native.Animated.View, {
+		style: [
+			styles$14.mainContent,
+			{
+				flex: 1,
+				transform: [{ translateX: mainTranslateX }]
+			},
+			style
+		],
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+};
+const styles$14 = react_native.StyleSheet.create({
+	container: {
+		flexDirection: "row",
+		flex: 1
+	},
+	overlay: {
+		...react_native.StyleSheet.absoluteFillObject,
+		zIndex: 1
+	},
+	backdrop: {
+		...react_native.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.default.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] = (0, react.useState)(false);
+	const variantColors = (0, react.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 {
@@ -10648,10 +11383,10 @@ const Avatar = react.default.forwardRef(({ src, alt = "Avatar", color, variant =
 		if (!trimmed) return null;
 		return trimmed.split(/\s+/).map((word) => word[0]).join("").slice(0, 2).toUpperCase() || null;
 	})();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(View_default, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RnView, {
 		ref,
 		style: [
-			styles$12.avatar,
+			styles$13.avatar,
 			{
 				width: sizeValues.size,
 				height: sizeValues.size,
@@ -10676,8 +11411,8 @@ const Avatar = react.default.forwardRef(({ src, alt = "Avatar", color, variant =
 			onError: () => setImageError(true),
 			accessibilityLabel: alt,
 			testID: "avatar-image"
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(View_default, {
-			style: [styles$12.fallback, {
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
+			style: [styles$13.fallback, {
 				backgroundColor: variantColors.backgroundColor,
 				flex: 1,
 				width: "100%",
@@ -10701,7 +11436,7 @@ const AvatarFallback = ({ children }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
 };
 Avatar.Fallback = AvatarFallback;
-const styles$12 = react_native.StyleSheet.create({
+const styles$13 = react_native.StyleSheet.create({
 	avatar: {
 		alignItems: "center",
 		justifyContent: "center"
@@ -10769,7 +11504,7 @@ const Badge = react.default.forwardRef(({ children, variant = "soft", color, rad
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
 		ref,
 		style: [
-			styles$11.badge,
+			styles$12.badge,
 			badgeStyle,
 			style
 		],
@@ -10777,13 +11512,13 @@ const Badge = react.default.forwardRef(({ children, variant = "soft", color, rad
 		accessibilityRole: "none",
 		...rest,
 		children: typeof children === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextComponent, {
-			style: [styles$11.text, textStyle],
+			style: [styles$12.text, textStyle],
 			children
 		}) : children
 	});
 });
 Badge.displayName = "Badge";
-const styles$11 = react_native.StyleSheet.create({
+const styles$12 = react_native.StyleSheet.create({
 	badge: {
 		flexDirection: "row",
 		alignItems: "center"
@@ -11019,14 +11754,14 @@ const Card = react.default.forwardRef(({ asChild = false, children, color, radiu
 		style,
 		...rest,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
-			style: [styles$10.card, cardStyle],
+			style: [styles$11.card, cardStyle],
 			children
 		})
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
 		ref,
 		style: [
-			styles$10.card,
+			styles$11.card,
 			cardStyle,
 			style
 		],
@@ -11040,7 +11775,7 @@ const CardFooter = ({ children, separate = true }) => {
 	useThemeMode$1();
 	const grayAlpha = getGrayAlpha(theme);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
-		style: [styles$10.footer, separate && {
+		style: [styles$11.footer, separate && {
 			borderTopWidth: 1,
 			borderTopColor: grayAlpha["6"],
 			marginTop: theme.space[4],
@@ -11050,7 +11785,7 @@ const CardFooter = ({ children, separate = true }) => {
 	});
 };
 Card.Footer = CardFooter;
-const styles$10 = react_native.StyleSheet.create({
+const styles$11 = react_native.StyleSheet.create({
 	card: { overflow: "hidden" },
 	footer: {
 		flexDirection: "row",
@@ -11097,7 +11832,7 @@ const DataListRoot = ({ children, orientation = "horizontal", size = 2, trim = "
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
 			style: [
-				styles$9.root,
+				styles$10.root,
 				rootStyle,
 				trimStyles,
 				style
@@ -11121,7 +11856,7 @@ const DataListItem = ({ children, align = "baseline", style }) => {
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
 		style: [
-			styles$9.item,
+			styles$10.item,
 			itemStyle,
 			style
 		],
@@ -11191,7 +11926,7 @@ const DataListValue = ({ children, style }) => {
 	});
 };
 DataListValue.displayName = "DataList.Value";
-const styles$9 = react_native.StyleSheet.create({
+const styles$10 = react_native.StyleSheet.create({
 	root: { width: "100%" },
 	item: { width: "100%" }
 });
@@ -11213,7 +11948,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) => {
@@ -11223,7 +11958,7 @@ const FancyList = ({ data, renderItem, keyExtractor, style, showDividers = true,
 			borderBottomColor: dividerColor
 		};
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
-			style: [styles$8.item, itemStyle],
+			style: [styles$9.item, itemStyle],
 			children: renderItem({
 				item: info.item,
 				index: info.index,
@@ -11238,14 +11973,14 @@ const FancyList = ({ data, renderItem, keyExtractor, style, showDividers = true,
 	};
 	if (!scrollable) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RnView, {
 		style: [
-			styles$8.container,
+			styles$9.container,
 			listContainerStyle,
 			style
 		],
 		children: [
 			ListHeaderComponent,
 			data.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
-				style: styles$8.nonScrollableItem,
+				style: styles$9.nonScrollableItem,
 				children: renderItem({
 					item,
 					index,
@@ -11256,28 +11991,28 @@ const FancyList = ({ data, renderItem, keyExtractor, style, showDividers = true,
 		]
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
-		style: [styles$8.container, style],
+		style: [styles$9.container, style],
 		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(RnView, { style: [styles$8.divider, {
+			ItemSeparatorComponent: () => showDividers ? /* @__PURE__ */ (0, react_jsx_runtime.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 = react_native.StyleSheet.create({
+const styles$9 = react_native.StyleSheet.create({
 	container: { width: "100%" },
 	flatList: { flex: 1 },
 	contentContainer: { flexGrow: 1 },
@@ -11381,7 +12116,7 @@ const Progress = (0, react.forwardRef)(({ value, max = 100, size = 2, variant =
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
 		ref,
 		style: [
-			styles$7.track,
+			styles$8.track,
 			{
 				backgroundColor: trackBackgroundColor,
 				borderColor: trackBorder.borderColor,
@@ -11400,7 +12135,7 @@ const Progress = (0, react.forwardRef)(({ value, max = 100, size = 2, variant =
 		},
 		accessibilityRole: "progressbar",
 		testID,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Animated.View, { style: [styles$7.indicator, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Animated.View, { style: [styles$8.indicator, {
 			width: animatedWidth,
 			backgroundColor: indicatorColor,
 			borderRadius: selectedRadius
@@ -11408,7 +12143,7 @@ const Progress = (0, react.forwardRef)(({ value, max = 100, size = 2, variant =
 	});
 });
 Progress.displayName = "Progress";
-const styles$7 = react_native.StyleSheet.create({
+const styles$8 = react_native.StyleSheet.create({
 	track: {
 		width: "100%",
 		overflow: "hidden"
@@ -11441,7 +12176,7 @@ const Spinner = react.default.forwardRef(({ size = "medium", color, highContrast
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
 		ref,
 		style: [
-			styles$6.container,
+			styles$7.container,
 			{
 				width: sizeConfig.dimension,
 				height: sizeConfig.dimension
@@ -11458,148 +12193,312 @@ const Spinner = react.default.forwardRef(({ size = "medium", color, highContrast
 	});
 });
 Spinner.displayName = "Spinner";
-const styles$6 = react_native.StyleSheet.create({ container: {
+const styles$7 = react_native.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.default.forwardRef(({ children, loading = true, style, textStyle, width, height, accessibilityLabel = "Loading", testID }, ref) => {
+	const pulseAnim = (0, react.useRef)(new react_native.Animated.Value(0)).current;
+	(0, react.useEffect)(() => {
+		const animation = react_native.Animated.loop(react_native.Animated.sequence([react_native.Animated.timing(pulseAnim, {
+			toValue: 1,
+			...PULSE_ANIMATION
+		}), react_native.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__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+	if (!react.default.isValidElement(children) && typeof children === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.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__ */ (0, react_jsx_runtime.jsx)(react_native.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__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+			style: styles$6.hiddenChildren,
+			pointerEvents: "none",
+			children
+		})
+	});
+});
+Skeleton.displayName = "Skeleton";
+const styles$6 = react_native.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 = (0, react.createContext)(null);
+const useTableContext = () => {
+	const context = (0, react.useContext)(TableContext);
+	if (!context) throw new Error("Table sub-components must be used within Table.Root");
+	return context;
+};
+const TableRoot = react.default.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__ */ (0, react_jsx_runtime.jsxs)(RnView, {
-		style: [styles$5.table, tableStyle],
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Thead, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tr, {
-			isHeader: true,
-			children: columns.map((column) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Th, {
-				width: column.width,
-				align: column.align,
-				children: column.title
-			}, column.key))
-		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tbody, { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tr, { children: columns.map((column) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Td, {
-			align: column.align,
-			children: column.render ? column.render(row, rowIndex) : String(row[column.key] ?? "")
-		}, column.key)) }, rowIndex)) })]
-	});
-	if (scrollable) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnScrollView, {
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+			ref,
+			style: [
+				styles$5.root,
+				tableStyle,
+				style
+			],
+			children
+		})
+	});
+	if (scrollable) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.ScrollView, {
 		horizontal: true,
-		style: [styles$5.scrollContainer, style],
 		showsHorizontalScrollIndicator: false,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableContent, {})
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
-		style: [styles$5.container, style],
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableContent, {})
+		contentContainerStyle: styles$5.scrollContent,
+		children: content
 	});
-};
-Table.displayName = "Table";
-const Thead = ({ children }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
-		style: styles$5.thead,
+	return content;
+});
+TableRoot.displayName = "Table.Root";
+const TableHeader = react.default.forwardRef(({ children, style }, ref) => {
+	const theme = useTheme$1();
+	const mode = useThemeMode$1();
+	const isDark = mode === "dark";
+	const grayAlpha = getGrayAlpha(theme, mode);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.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__ */ (0, react_jsx_runtime.jsx)(RnView, {
-		style: styles$5.tbody,
+});
+TableHeader.displayName = "Table.Header";
+const TableBody = react.default.forwardRef(({ children, style }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+		ref,
+		style: [styles$5.body, style],
 		children
 	});
-};
-const Tr = ({ children, isHeader = false }) => {
+});
+TableBody.displayName = "Table.Body";
+const TableRow = react.default.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__ */ (0, react_jsx_runtime.jsx)(RnView, {
+	const mode = useThemeMode$1();
+	const isDark = mode === "dark";
+	const grayAlpha = getGrayAlpha(theme, mode);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.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.default.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(react_native.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__ */ (0, react_jsx_runtime.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.default.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+		ref,
+		style: [
+			styles$5.cell,
+			{
+				alignItems: {
+					left: "flex-start",
+					center: "center",
+					right: "flex-end"
+				}[align],
+				...padding
+			},
+			style
+		],
 		children: /* @__PURE__ */ (0, react_jsx_runtime.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 = react_native.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
@@ -11609,19 +12508,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__ */ (0, react_jsx_runtime.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.default.cloneElement(children, {
+		...children.props,
+		color: iconColor,
+		size: children.props.size ?? iconSize
+	});
+};
+SegmentedControlIcon.displayName = "SegmentedControlIcon";
+const SegmentedControlItemContext = (0, react.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 = (0, react.isValidElement)(children) && children.type?.displayName === "SegmentedControlValue";
+	const hasIconChild = (0, react.isValidElement)(children) && children.type?.displayName === "SegmentedControlIcon";
+	const itemContextValue = {
+		itemValue: value,
+		isSelected,
+		isDisabled
+	};
+	const mergedContext = {
+		...useSegmentedControlContext(),
+		itemValue: value,
+		isItemSelected: isSelected,
+		itemDisabled: isDisabled
+	};
 	const handlePress = (0, react.useCallback)(() => {
 		if (!isDisabled) {
 			onValueChange(value);
-			if (hapticFeedback) react_native.Vibration.vibrate(10);
+			if (globalHaptics && hapticFeedback) triggerHaptic("press");
 		}
 	}, [
 		isDisabled,
 		onValueChange,
 		value,
+		globalHaptics,
 		hapticFeedback
 	]);
 	const handleLayout = (0, react.useCallback)((event) => {
@@ -11641,23 +12578,29 @@ const SegmentedControlItem = ({ value, disabled: itemDisabled, children }) => {
 		fontWeight: isSelected ? theme.typography.fontWeights.semibold : theme.typography.fontWeights.regular,
 		fontSize: sizeValues.fontSize
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(TextComponent, {
-			style: textStyle,
-			children
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentedControlItemContext.Provider, {
+		value: itemContextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentedControlContext.Provider, {
+			value: mergedContext,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(TextComponent, {
+					style: textStyle,
+					children
+				})
+			})
 		})
 	});
 };
@@ -11665,6 +12608,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);
@@ -11761,7 +12705,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;
@@ -11790,7 +12738,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 = react_native.StyleSheet.create({
 	container: {
@@ -12149,6 +13099,7 @@ const AccordionTrigger = react.default.forwardRef(({ children, style, icon, hapt
 	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);
@@ -12196,7 +13147,7 @@ const AccordionTrigger = react.default.forwardRef(({ children, style, icon, hapt
 			if (open) onValueChange(currentValue.filter((v) => v !== value));
 			else onValueChange([...currentValue, value]);
 		}
-		if (hapticFeedback) react_native.Vibration.vibrate(10);
+		if (globalHaptics && hapticFeedback) triggerHaptic("selection");
 	};
 	const rtlRotationInterpolate = rotationAnim.interpolate({
 		inputRange: [0, 1],
@@ -12216,7 +13167,7 @@ const AccordionTrigger = react.default.forwardRef(({ children, style, icon, hapt
 	const getIconColor = () => {
 		return grayAlpha["11"];
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AnimatedPressable_default, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AnimatedPressable, {
 		ref,
 		style: [triggerStyle, style],
 		onPress: handlePress,
@@ -12254,7 +13205,7 @@ const AccordionTrigger = react.default.forwardRef(({ children, style, icon, hapt
 				transform: [{ rotate: rtlRotationInterpolate }],
 				marginLeft: theme.space[2]
 			},
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDownIcon$1, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDownIcon, {
 				width: sizeStyles.iconSize,
 				height: sizeStyles.iconSize,
 				color: getIconColor()
@@ -12486,6 +13437,8 @@ exports.SelectSeparator = SelectSeparator;
 exports.SelectTrigger = SelectTrigger;
 exports.SelectValue = SelectValue;
 exports.Separator = Separator;
+exports.Sidebar = Sidebar;
+exports.Skeleton = Skeleton;
 exports.Slider = Slider;
 exports.Slot = Slot;
 exports.Spacer = Spacer;
@@ -12612,6 +13565,7 @@ exports.tomatoAlpha = tomatoAlpha;
 exports.typography = typography;
 exports.useAnchorPosition = useAnchorPosition;
 exports.useDeviceColorScheme = useDeviceColorScheme;
+exports.useHaptics = useHaptics;
 exports.usePortal = usePortal;
 exports.useResponsive = useResponsive;
 exports.useTheme = useTheme;