@mrmeg/expo-ui 0.6.1 → 0.7.0

package/dist/components/Progress.d.ts

@@ -15,8 +15,8 @@ export interface ProgressProps {
  * Progress Component
  *
  * A linear progress bar supporting determinate and indeterminate modes.
- * Determinate mode animates the fill width via Reanimated.
- * Indeterminate mode pulses opacity via RN core Animated.loop.
+ * Determinate mode animates the fill with React Native Animated.
+ * Indeterminate mode pulses opacity via Animated.loop.
  *
  * @example
  * ```tsx

package/dist/components/Progress.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { Animated, StyleSheet, View } from "react-native";
-import Reanimated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
 import { useTheme } from "../hooks/useTheme.js";
-import { shouldUseNativeDriver } from "../lib/animations.js";
+import { useReducedMotion } from "../hooks/useReduceMotion.js";
 // ============================================================================
 // Constants
 // ============================================================================
@@ -19,8 +18,8 @@ const SIZE_MAP = {
  * Progress Component
  *
  * A linear progress bar supporting determinate and indeterminate modes.
- * Determinate mode animates the fill width via Reanimated.
- * Indeterminate mode pulses opacity via RN core Animated.loop.
+ * Determinate mode animates the fill with React Native Animated.
+ * Indeterminate mode pulses opacity via Animated.loop.
  *
  * @example
  * ```tsx
@@ -52,28 +51,28 @@ export function Progress({ value, variant = "default", size = "md", style, }) {
         ]), children: isDeterminate ? (_jsx(DeterminateFill, { value: value, fillColor: fillColor, height: height, borderRadius: borderRadius, reduceMotion: reduceMotion })) : (_jsx(IndeterminateFill, { fillColor: fillColor, height: height, borderRadius: borderRadius, reduceMotion: reduceMotion })) }));
 }
 function DeterminateFill({ value, fillColor, height, borderRadius, reduceMotion, }) {
-    const [containerWidth, setContainerWidth] = useState(0);
     const clamped = Math.min(100, Math.max(0, value));
-    const animatedWidth = useSharedValue(0);
+    // Animate scaleX (GPU compositor) instead of width (JS-thread layout each
+    // frame). transformOrigin "left" grows the fill from the left edge, so a
+    // full-width bar scaled by clamped/100 needs no container measurement.
+    const scaleX = useRef(new Animated.Value(0)).current;
     useEffect(() => {
-        if (containerWidth === 0)
-            return;
-        const target = (clamped / 100) * containerWidth;
-        animatedWidth.value = withTiming(target, {
+        Animated.timing(scaleX, {
+            toValue: clamped / 100,
             duration: reduceMotion ? 0 : 300,
-        });
-    }, [clamped, containerWidth, reduceMotion]);
-    const animatedStyle = useAnimatedStyle(() => ({
-        width: animatedWidth.value,
-    }));
-    return (_jsx(View, { style: { flex: 1 }, onLayout: (e) => setContainerWidth(e.nativeEvent.layout.width), children: _jsx(Reanimated.View, { style: [
-                {
-                    height,
-                    borderRadius,
-                    backgroundColor: fillColor,
-                },
-                animatedStyle,
-            ] }) }));
+            useNativeDriver: true,
+        }).start();
+    }, [clamped, reduceMotion, scaleX]);
+    return (_jsx(Animated.View, { style: [
+            {
+                width: "100%",
+                height,
+                borderRadius,
+                backgroundColor: fillColor,
+                transformOrigin: "left",
+            },
+            { transform: [{ scaleX }] },
+        ] }));
 }
 function IndeterminateFill({ fillColor, height, borderRadius, reduceMotion, }) {
     const opacity = useRef(new Animated.Value(reduceMotion ? 0.7 : 0.4)).current;
@@ -82,26 +81,29 @@ function IndeterminateFill({ fillColor, height, borderRadius, reduceMotion, }) {
             opacity.setValue(0.7);
             return;
         }
+        opacity.setValue(0.4);
         const animation = Animated.loop(Animated.sequence([
             Animated.timing(opacity, {
-                toValue: 1.0,
+                toValue: 1,
                 duration: 800,
-                useNativeDriver: shouldUseNativeDriver,
+                useNativeDriver: true,
             }),
             Animated.timing(opacity, {
                 toValue: 0.4,
                 duration: 800,
-                useNativeDriver: shouldUseNativeDriver,
+                useNativeDriver: true,
             }),
         ]));
         animation.start();
         return () => animation.stop();
     }, [opacity, reduceMotion]);
-    return (_jsx(Animated.View, { style: {
-            width: "40%",
-            height,
-            borderRadius,
-            backgroundColor: fillColor,
-            opacity,
-        } }));
+    return (_jsx(Animated.View, { style: [
+            {
+                width: "40%",
+                height,
+                borderRadius,
+                backgroundColor: fillColor,
+            },
+            { opacity },
+        ] }));
 }

package/dist/components/RadioGroup.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useEffect } from "react";
-import { View, StyleSheet, Pressable, Platform } from "react-native";
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
+import React, { createContext, use, useEffect, useRef } from "react";
+import { View, StyleSheet, Pressable, Platform, Animated } from "react-native";
 import { StyledText } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { hapticLight } from "../lib/haptics.js";
+import { useReducedMotion } from "../hooks/useReduceMotion.js";
 import * as RadioGroupPrimitive from "@rn-primitives/radio-group";
 const DEFAULT_HIT_SLOP = 8;
 const SIZE_CONFIGS = {
@@ -14,8 +14,11 @@ const SIZE_CONFIGS = {
     lg: { outer: 24, inner: 12, borderWidth: 1 },
 };
 const RadioGroupContext = createContext(null);
+function handleRadioPress() {
+    hapticLight();
+}
 function useRadioGroupContext() {
-    const context = useContext(RadioGroupContext);
+    const context = use(RadioGroupContext);
     if (context === null) {
         throw new Error("RadioGroup compound components cannot be rendered outside the RadioGroup component");
     }
@@ -38,7 +41,8 @@ function useRadioGroupContext() {
  */
 function RadioGroupRoot({ size = "md", error = false, value, onValueChange, style: styleOverride, children, ...props }) {
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
-    return (_jsx(RadioGroupContext.Provider, { value: { size, error, value, onValueChange }, children: _jsx(RadioGroupPrimitive.Root, { ...props, value: value, onValueChange: onValueChange, style: {
+    const contextValue = React.useMemo(() => ({ size, error, value, onValueChange }), [size, error, value, onValueChange]);
+    return (_jsx(RadioGroupContext.Provider, { value: contextValue, children: _jsx(RadioGroupPrimitive.Root, { ...props, value: value, onValueChange: onValueChange, style: {
                 flexDirection: "column",
                 gap: spacing.listItemSpacing,
                 ...(flattenedStyle || {}),
@@ -56,19 +60,14 @@ function RadioGroupItem({ label, required = false, style: styleOverride, labelSt
     const sizeConfig = SIZE_CONFIGS[size];
     const isChecked = groupValue === itemValue;
     // Animated dot scale — follows Checkbox opacity pattern
-    const dotScale = useSharedValue(isChecked ? 1 : 0);
+    const dotScale = useRef(new Animated.Value(isChecked ? 1 : 0)).current;
     useEffect(() => {
-        dotScale.value = reduceMotion
-            ? (isChecked ? 1 : 0)
-            : withTiming(isChecked ? 1 : 0, { duration: 60 });
+        Animated.timing(dotScale, {
+            toValue: isChecked ? 1 : 0,
+            duration: reduceMotion ? 0 : 60,
+            useNativeDriver: true,
+        }).start();
     }, [isChecked, reduceMotion, dotScale]);
-    const dotStyle = useAnimatedStyle(() => ({
-        transform: [{ scale: dotScale.value }],
-    }));
-    // Wrap onPress to add haptic feedback
-    const handlePress = () => {
-        hapticLight();
-    };
     // Border color follows Checkbox pattern
     const borderColor = error
         ? theme.colors.destructive
@@ -76,20 +75,19 @@ function RadioGroupItem({ label, required = false, style: styleOverride, labelSt
             ? theme.colors.primary
             : getContrastingColor(theme.colors.background, theme.colors.text, theme.colors.textDim);
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
-    const radioElement = (_jsx(RadioGroupPrimitive.Item, { ...props, value: itemValue, disabled: disabled, onPress: handlePress, style: {
+    const radioElement = (_jsx(RadioGroupPrimitive.Item, { ...props, value: itemValue, disabled: disabled, onPress: handleRadioPress, style: {
+            ...styles.radio,
             borderColor,
             backgroundColor: theme.colors.background,
             borderRadius: sizeConfig.outer / 2,
             borderWidth: sizeConfig.borderWidth,
             width: sizeConfig.outer,
             height: sizeConfig.outer,
-            justifyContent: "center",
-            alignItems: "center",
             opacity: disabled ? 0.5 : 1,
             ...(Platform.OS === "web" && { cursor: disabled ? "not-allowed" : "pointer" }),
             ...(flattenedStyle || {}),
         }, hitSlop: DEFAULT_HIT_SLOP, accessibilityLabel: label, children: _jsx(Animated.View, { style: [
-                dotStyle,
+                { transform: [{ scale: dotScale }] },
                 {
                     width: sizeConfig.inner,
                     height: sizeConfig.inner,
@@ -118,6 +116,10 @@ function RadioGroupItem({ label, required = false, style: styleOverride, labelSt
                     ], children: [label, required && (_jsx(StyledText, { selectable: false, style: [styles.required, { color: theme.colors.destructive }], children: " *" }))] }) })] }));
 }
 const styles = StyleSheet.create({
+    radio: {
+        justifyContent: "center",
+        alignItems: "center",
+    },
     container: {
         flexDirection: "row",
         alignItems: "center",

package/dist/components/Select.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import { Icon } from "./Icon.js";
 import { AnimatedView } from "./AnimatedView.js";
-import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.js";
+import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import * as SelectPrimitive from "@rn-primitives/select";
@@ -37,14 +37,10 @@ function SelectTrigger({ size = "md", error = false, children, style: styleOverr
     const { theme } = useTheme();
     const sizeConfig = SIZE_CONFIGS[size];
     return (_jsx(SelectPrimitive.Trigger, { disabled: disabled, ...props, style: {
-            flexDirection: "row",
-            justifyContent: "space-between",
-            alignItems: "center",
+            ...styles.trigger,
             height: sizeConfig.height,
             paddingHorizontal: sizeConfig.paddingHorizontal,
-            borderWidth: 1,
             borderColor: error ? theme.colors.destructive : theme.colors.border,
-            borderRadius: spacing.radiusMd,
             backgroundColor: theme.colors.background,
             ...(Platform.OS === "web" && {
                 cursor: disabled ? "not-allowed" : "pointer",
@@ -98,19 +94,13 @@ function SelectContent({ side, align = "start", sideOffset = 4, portalHost, styl
 }
 function SelectItem({ children, style: styleOverride, ...props }) {
     const { theme } = useTheme();
-    const shouldRenderDefaultText = children == null ||
-        typeof children === "string" ||
-        typeof children === "number";
+    // Render custom element/array children when provided; otherwise fall back to
+    // the default ItemText driven by the required `label` prop. Discriminating on
+    // "is this a renderable node?" keeps the API explicit without switching on the
+    // primitive type of children.
+    const hasCustomChildren = React.isValidElement(children) || Array.isArray(children);
     return (_jsx(TextClassContext.Provider, { value: "", children: _jsxs(SelectPrimitive.Item, { ...props, style: {
-                position: "relative",
-                flexDirection: "row",
-                alignItems: "center",
-                gap: spacing.sm,
-                borderRadius: spacing.radiusSm,
-                paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
-                paddingLeft: spacing.xl,
-                paddingRight: spacing.sm,
-                backgroundColor: "transparent",
+                ...styles.item,
                 ...(Platform.OS === "web" && {
                     cursor: props.disabled ? "not-allowed" : "pointer",
                     outlineStyle: "none",
@@ -127,11 +117,11 @@ function SelectItem({ children, style: styleOverride, ...props }) {
                         width: 14,
                         alignItems: "center",
                         justifyContent: "center",
-                    }, children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Icon, { name: "check", size: 16, color: theme.colors.accent, ...(Platform.OS === "web" && { style: { pointerEvents: "none" } }) }) }) }), _jsx(TextSelectabilityContext.Provider, { value: false, children: shouldRenderDefaultText ? (_jsx(SelectPrimitive.ItemText, { style: {
+                    }, children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Icon, { name: "check", size: 16, color: theme.colors.accent, ...(Platform.OS === "web" && { style: { pointerEvents: "none" } }) }) }) }), _jsx(TextSelectabilityContext.Provider, { value: false, children: hasCustomChildren ? (children) : (_jsx(SelectPrimitive.ItemText, { style: {
                             color: theme.colors.popoverForeground,
                             fontSize: 14,
                             lineHeight: 20,
-                        } })) : typeof children === "function" ? null : (children) })] }) }));
+                        } })) })] }) }));
 }
 function SelectGroup({ style: styleOverride, ...props }) {
     return (_jsx(SelectPrimitive.Group, { ...props, style: {
@@ -166,6 +156,26 @@ function SelectSeparator({ style: styleOverride, ...props }) {
                 : {}),
         } }));
 }
+const styles = StyleSheet.create({
+    trigger: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        borderWidth: 1,
+        borderRadius: spacing.radiusMd,
+    },
+    item: {
+        position: "relative",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.sm,
+        borderRadius: spacing.radiusSm,
+        paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
+        paddingLeft: spacing.xl,
+        paddingRight: spacing.sm,
+        backgroundColor: "transparent",
+    },
+});
 /**
  * Select Component with Sub-components
  * Properly typed interface for dot notation access (e.g., Select.Trigger)

package/dist/components/Skeleton.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
-import { View, Animated, StyleSheet } from "react-native";
-import { useReducedMotion } from "react-native-reanimated";
+import { View, StyleSheet, Animated } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
-import { shouldUseNativeDriver } from "../lib/animations.js";
+import { useReducedMotion } from "../hooks/useReduceMotion.js";
 import { spacing } from "../constants/spacing.js";
 /**
  * Skeleton Component
@@ -26,16 +25,17 @@ export function Skeleton({ width = "100%", height = 20, borderRadius = spacing.r
             opacity.setValue(0.6);
             return;
         }
+        opacity.setValue(0.3);
         const animation = Animated.loop(Animated.sequence([
             Animated.timing(opacity, {
                 toValue: 1,
                 duration: 800,
-                useNativeDriver: shouldUseNativeDriver,
+                useNativeDriver: true,
             }),
             Animated.timing(opacity, {
                 toValue: 0.3,
                 duration: 800,
-                useNativeDriver: shouldUseNativeDriver,
+                useNativeDriver: true,
             }),
         ]));
         animation.start();
@@ -48,8 +48,8 @@ export function Skeleton({ width = "100%", height = 20, borderRadius = spacing.r
                 height: circle ? resolvedSize : height,
                 borderRadius: circle ? (resolvedSize / 2) : borderRadius,
                 backgroundColor: theme.colors.muted,
-                opacity,
             },
+            { opacity },
             style,
         ] }));
 }

package/dist/components/Slider.js

@@ -2,17 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { palette } from "../constants/colors.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { hapticLight } from "../lib/haptics.js";
-import { useCallback, useEffect, useRef } from "react";
-import { Platform, StyleSheet, View } from "react-native";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming, } from "react-native-reanimated";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, PanResponder, Platform, StyleSheet, View } from "react-native";
 import { StyledText } from "./StyledText.js";
 const SIZES = {
     sm: { track: 4, thumb: 16 },
     md: { track: 6, thumb: 20 },
 };
 function clampAndSnap(raw, min, max, step) {
-    "worklet";
     const clamped = Math.min(Math.max(raw, min), max);
     const stepped = Math.round((clamped - min) / step) * step + min;
     // Avoid floating-point drift
@@ -37,76 +34,70 @@ function Slider({ value = 0, onValueChange, min = 0, max = 100, step = 1, size =
             ? withAlpha(palette.white, 0.32)
             : theme.colors.mutedForeground
         : theme.colors.accent;
-    // Track layout width captured via onLayout
-    const trackWidth = useSharedValue(0);
-    // Thumb position in pixels along the track
-    const thumbX = useSharedValue(0);
-    // Last snapped value (worklet-side) to detect step changes for haptics
-    const lastSnappedValue = useSharedValue(value);
-    // Keep a ref to onValueChange so the worklet always calls the latest version
-    const onValueChangeRef = useRef(onValueChange);
-    onValueChangeRef.current = onValueChange;
-    const jsOnValueChange = useCallback((v) => {
-        onValueChangeRef.current?.(v);
-    }, []);
-    const jsHaptic = useCallback(() => {
-        hapticLight();
-    }, []);
-    // Sync external value prop changes after render. Reanimated warns when shared
-    // values are read or written while React is rendering.
+    const [trackWidth, setTrackWidth] = useState(0);
+    const trackWidthRef = useRef(0);
+    const thumbX = useRef(new Animated.Value(0)).current;
+    const lastSnappedValue = useRef(value);
+    const updateFromPosition = useCallback((rawX) => {
+        const width = trackWidthRef.current;
+        const x = Math.min(Math.max(rawX, 0), width);
+        thumbX.stopAnimation();
+        thumbX.setValue(x);
+        const ratio = width > 0 ? x / width : 0;
+        const raw = min + ratio * (max - min);
+        const snapped = clampAndSnap(raw, min, max, step);
+        if (snapped !== lastSnappedValue.current) {
+            lastSnappedValue.current = snapped;
+            hapticLight();
+        }
+        onValueChange?.(snapped);
+    }, [max, min, onValueChange, step, thumbX]);
+    const handleGesture = useCallback((event) => {
+        updateFromPosition(event.nativeEvent.locationX);
+    }, [updateFromPosition]);
+    const panResponder = useMemo(() => PanResponder.create({
+        onStartShouldSetPanResponder: () => !disabled,
+        onMoveShouldSetPanResponder: () => !disabled,
+        onPanResponderGrant: handleGesture,
+        onPanResponderMove: handleGesture,
+    }), [disabled, handleGesture]);
     useEffect(() => {
         const ratio = getValueRatio(value, min, max);
-        const width = trackWidth.value;
+        const width = trackWidthRef.current;
         if (width > 0) {
-            thumbX.value = withTiming(ratio * width, { duration: 80 });
+            Animated.timing(thumbX, {
+                toValue: ratio * width,
+                duration: 80,
+                useNativeDriver: true,
+            }).start();
         }
-        lastSnappedValue.value = value;
-    }, [lastSnappedValue, max, min, thumbX, trackWidth, value]);
+        lastSnappedValue.current = value;
+    }, [max, min, thumbX, value]);
     const onTrackLayout = useCallback((e) => {
         const w = e.nativeEvent.layout.width;
-        trackWidth.value = w;
+        trackWidthRef.current = w;
+        setTrackWidth(w);
         // Set initial thumb position without animation
         const ratio = getValueRatio(value, min, max);
-        thumbX.value = ratio * w;
-    }, [max, min, thumbX, trackWidth, value]);
-    const panGesture = Gesture.Pan()
-        .enabled(!disabled)
-        .onBegin((e) => {
-        "worklet";
-        // Jump to touch position
-        const x = Math.min(Math.max(e.x, 0), trackWidth.value);
-        thumbX.value = x;
-        const ratio = trackWidth.value > 0 ? x / trackWidth.value : 0;
-        const raw = min + ratio * (max - min);
-        const snapped = clampAndSnap(raw, min, max, step);
-        if (snapped !== lastSnappedValue.value) {
-            lastSnappedValue.value = snapped;
-            runOnJS(jsHaptic)();
-        }
-        runOnJS(jsOnValueChange)(snapped);
-    })
-        .onUpdate((e) => {
-        "worklet";
-        const x = Math.min(Math.max(e.x, 0), trackWidth.value);
-        thumbX.value = x;
-        const ratio = trackWidth.value > 0 ? x / trackWidth.value : 0;
-        const raw = min + ratio * (max - min);
-        const snapped = clampAndSnap(raw, min, max, step);
-        if (snapped !== lastSnappedValue.value) {
-            lastSnappedValue.value = snapped;
-            runOnJS(jsHaptic)();
-        }
-        runOnJS(jsOnValueChange)(snapped);
+        thumbX.stopAnimation();
+        thumbX.setValue(ratio * w);
+    }, [max, min, thumbX, value]);
+    const safeTrackWidth = Math.max(trackWidth, 1);
+    const fillScale = thumbX.interpolate({
+        inputRange: [0, safeTrackWidth],
+        outputRange: [0, 1],
+        extrapolate: "clamp",
+    });
+    const thumbTranslateX = thumbX.interpolate({
+        inputRange: [0, safeTrackWidth],
+        outputRange: [-dims.thumb / 2, safeTrackWidth - dims.thumb / 2],
+        extrapolate: "clamp",
+    });
+    const labelTranslateX = thumbX.interpolate({
+        inputRange: [0, safeTrackWidth],
+        outputRange: [-14, safeTrackWidth - 14],
+        extrapolate: "clamp",
     });
-    const fillStyle = useAnimatedStyle(() => ({
-        width: thumbX.value,
-    }));
-    const thumbAnimatedStyle = useAnimatedStyle(() => ({
-        transform: [{ translateX: thumbX.value - dims.thumb / 2 }],
-    }));
-    const valueLabelStyle = useAnimatedStyle(() => ({
-        transform: [{ translateX: thumbX.value - 14 }],
-    }));
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
     // Accessibility action handler
     const handleAccessibilityAction = useCallback((event) => {
@@ -132,42 +123,44 @@ function Slider({ value = 0, onValueChange, min = 0, max = 100, step = 1, size =
                         width: 28,
                         alignItems: "center",
                     },
-                    valueLabelStyle,
+                    { transform: [{ translateX: labelTranslateX }] },
                     { pointerEvents: "none" },
                 ], children: _jsx(StyledText, { selectable: false, style: {
-                        fontSize: 11,
+                        fontSize: 12,
                         color: theme.colors.textDim,
                         userSelect: "none",
-                    }, children: value }) })), _jsx(GestureDetector, { gesture: panGesture, children: _jsxs(View, { style: {
-                        height: dims.thumb,
-                        justifyContent: "center",
-                        ...(Platform.OS === "web" && { cursor: disabled ? "default" : "pointer" }),
-                    }, onLayout: onTrackLayout, children: [_jsx(View, { style: {
-                                height: dims.track,
-                                borderRadius: dims.track / 2,
-                                backgroundColor: inactiveTrackColor,
-                                overflow: "hidden",
-                            }, children: _jsx(Animated.View, { style: [
-                                    {
-                                        height: dims.track,
-                                        borderRadius: dims.track / 2,
-                                        backgroundColor: activeTrackColor,
-                                    },
-                                    fillStyle,
-                                ] }) }), _jsx(Animated.View, { style: [
+                    }, children: value }) })), _jsxs(View, { style: {
+                    height: dims.thumb,
+                    justifyContent: "center",
+                    ...(Platform.OS === "web" && { cursor: disabled ? "default" : "pointer" }),
+                }, onLayout: onTrackLayout, ...panResponder.panHandlers, children: [_jsx(View, { style: {
+                            height: dims.track,
+                            borderRadius: dims.track / 2,
+                            backgroundColor: inactiveTrackColor,
+                            overflow: "hidden",
+                        }, children: _jsx(Animated.View, { style: [
                                 {
-                                    position: "absolute",
-                                    top: 0,
-                                    left: 0,
-                                    width: dims.thumb,
-                                    height: dims.thumb,
-                                    borderRadius: dims.thumb / 2,
-                                    backgroundColor: thumbBackgroundColor,
-                                    borderWidth: 1,
-                                    borderColor: thumbBorderColor,
-                                    ...getShadowStyle("subtle"),
+                                    width: "100%",
+                                    height: dims.track,
+                                    borderRadius: dims.track / 2,
+                                    backgroundColor: activeTrackColor,
+                                    transformOrigin: "left",
                                 },
-                                thumbAnimatedStyle,
-                            ] })] }) })] }));
+                                { transform: [{ scaleX: fillScale }] },
+                            ] }) }), _jsx(Animated.View, { style: [
+                            {
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                width: dims.thumb,
+                                height: dims.thumb,
+                                borderRadius: dims.thumb / 2,
+                                backgroundColor: thumbBackgroundColor,
+                                borderWidth: 1,
+                                borderColor: thumbBorderColor,
+                                ...getShadowStyle("subtle"),
+                            },
+                            { transform: [{ translateX: thumbTranslateX }] },
+                        ] })] })] }));
 }
 export { Slider };

package/dist/components/StyledText.context.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { StyleProp, TextStyle } from "react-native";
+export declare const TextClassContext: React.Context<string | undefined>;
+export declare const TextColorContext: React.Context<string | undefined>;
+export declare const TextStyleContext: React.Context<StyleProp<TextStyle>>;
+export declare const TextSelectabilityContext: React.Context<boolean | undefined>;

package/dist/components/StyledText.context.js

@@ -0,0 +1,5 @@
+import React from "react";
+export const TextClassContext = React.createContext(undefined);
+export const TextColorContext = React.createContext(undefined);
+export const TextStyleContext = React.createContext(undefined);
+export const TextSelectabilityContext = React.createContext(undefined);