@webority-technologies/mobile 0.0.14 → 0.0.20

package/lib/module/components/Skeleton/SkeletonContent.js

@@ -1,10 +1,67 @@
 "use strict";
 
-import React, { Children, cloneElement, isValidElement, useState } from 'react';
-import { Image, StyleSheet, Text, View } from 'react-native';
+/**
+ * SkeletonContent — show placeholder shapes while data is loading, then
+ * cross-fade to the real children once it arrives.
+ *
+ * Three usage patterns, listed in order of preference:
+ *
+ *   1. **Explicit placeholder** (recommended):
+ *
+ *        <SkeletonContent loading={isLoading} placeholder={<Card.Skeleton />}>
+ *          <Card>{realChildren}</Card>
+ *        </SkeletonContent>
+ *
+ *      Renders `placeholder` verbatim while loading and `children` once loaded.
+ *      Most precise and predictable — what you write is exactly what shimmers.
+ *      Prefer this for any non-trivial layout.
+ *
+ *   2. **Self-describing components inside an auto-walked tree**:
+ *
+ *        <SkeletonContent loading={isLoading}>
+ *          <Stepper steps={steps} />
+ *          <Card>...</Card>
+ *        </SkeletonContent>
+ *
+ *      With no `placeholder` prop, the walker substitutes each element. For
+ *      library components, the walker checks for a `Component.Skeleton` static
+ *      and replaces the element wholesale with it (the component author knows
+ *      its shape best). For plain `<Text>`, `<Image>`, and sized `<View>`
+ *      leaves the walker substitutes shape-matched `<Skeleton>` blocks based
+ *      on the element's own style. Good for screen-level wrappers.
+ *
+ *   3. **Hand-authored primitive trees** (legacy / quick prototyping):
+ *
+ *        <SkeletonContent loading={isLoading}>
+ *          <View>
+ *            <Text style={{ fontSize: 20 }}>Title</Text>
+ *            <Text>Subtitle</Text>
+ *          </View>
+ *        </SkeletonContent>
+ *
+ *      Same walker as (2) — the Text/Image/View introspection handles
+ *      primitive trees that mirror the loaded layout.
+ *
+ * Cross-fade: when `loading` flips from true to false, real children fade in
+ * over `fadeDuration` ms. The first render is guarded — content that was
+ * never in a loading state does NOT fade on mount, only the actual
+ * loading→loaded transition does. Matches Chakra UI's `isLoaded` feel.
+ */
+
+import React, { Children, cloneElement, isValidElement, useEffect, useRef } from 'react';
+import { Animated, Image, StyleSheet, Text, View } from 'react-native';
+import { createAnimatedValue } from "../../theme/index.js";
 import { Skeleton } from "./Skeleton.js";
 import { SkeletonSkip } from "./SkeletonSkip.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSkeletonDefaults } from "./SkeletonProvider.js";
+
+/**
+ * Components that ship their own placeholder shape declare this static. The
+ * walker looks for it before falling back to primitive introspection. The
+ * function receives the original component's props so consumer-customizable
+ * dimensions (size, count, etc.) carry through to the placeholder.
+ */
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 const flattenStyle = style => {
   if (!style) return {};
   const flat = StyleSheet.flatten(style);
@@ -27,9 +84,9 @@ const skeletonizeNode = (node, variant, speed, colors, keyHint = 'r') => {
   if (node == null || typeof node === 'boolean') return null;
   if (typeof node === 'string' || typeof node === 'number') {
     return /*#__PURE__*/_jsx(Skeleton, {
+      shape: "text",
       width: "60%",
       height: 14,
-      radius: "sm",
       variant: variant,
       speed: speed,
       colors: colors
@@ -41,18 +98,35 @@ const skeletonizeNode = (node, variant, speed, colors, keyHint = 'r') => {
   if (! /*#__PURE__*/isValidElement(node)) return null;
   const element = node;
   const props = element.props ?? {};
-  const elementStyle = flattenStyle(props.style);
   const elementType = element.type;
 
-  // <SkeletonSkip /> → opt-out marker; render its children unchanged
+  // <SkeletonSkip /> → opt-out marker; render its children unchanged.
   if (elementType === SkeletonSkip) {
     return /*#__PURE__*/cloneElement(element, {
       key: `${keyHint}-skip`
     });
   }
 
-  // <Image /> → fixed-size skeleton block matching style.width/height/borderRadius
+  // Self-describing component path. If a custom component (Stepper, Card,
+  // Banner, etc.) ships a `Skeleton` static, prefer it over the primitive
+  // walker — the component author knows the shape better than we can guess.
+  // Forwards the original props so consumer-tunable params (size, count,
+  // tone) flow through. Crucially this short-circuits the walker BEFORE
+  // it tries to recurse into custom-component children, so we never end up
+  // rendering half-real / half-placeholder UI.
+  if (typeof elementType === 'function' || typeof elementType === 'object') {
+    const SkeletonStatic = elementType.Skeleton;
+    if (SkeletonStatic) {
+      const Sk = SkeletonStatic;
+      return /*#__PURE__*/_jsx(Sk, {
+        ...props
+      }, `${keyHint}-self`);
+    }
+  }
+
+  // <Image /> → fixed-size skeleton block matching style.width/height/borderRadius.
   if (elementType === Image) {
+    const elementStyle = flattenStyle(props.style);
     const width = resolveWidth(elementStyle.width, '100%');
     const height = typeof elementStyle.height === 'number' ? elementStyle.height : 120;
     const radius = resolveRadius(elementStyle.borderRadius, 'sm');
@@ -69,14 +143,15 @@ const skeletonizeNode = (node, variant, speed, colors, keyHint = 'r') => {
     }, `${keyHint}-img`);
   }
 
-  // <Text /> → text-line skeleton matching font size
+  // <Text /> → text-line skeleton matching font size.
   if (elementType === Text) {
+    const elementStyle = flattenStyle(props.style);
     const fontSize = typeof elementStyle.fontSize === 'number' ? elementStyle.fontSize : 14;
     const width = resolveWidth(elementStyle.width, '85%');
     return /*#__PURE__*/_jsx(Skeleton, {
+      shape: "text",
       width: width,
       height: Math.round(fontSize * 1.15),
-      radius: "sm",
       variant: variant,
       speed: speed,
       colors: colors,
@@ -86,30 +161,36 @@ const skeletonizeNode = (node, variant, speed, colors, keyHint = 'r') => {
     }, `${keyHint}-txt`);
   }
 
-  // Element with children → recurse, preserving the wrapper (View, Pressable, custom layouts)
+  // Element with children → recurse, preserving the wrapper (View, Pressable,
+  // custom layouts). Runs AFTER the self-describing check so any component
+  // with `.Skeleton` is replaced wholesale.
   if (props.children != null) {
     return /*#__PURE__*/cloneElement(element, {
       key: `${keyHint}-w`
     }, skeletonizeNode(props.children, variant, speed, colors, `${keyHint}-c`));
   }
 
-  // Leaf <View /> with explicit dimensions → skeleton block
-  if (elementType === View && (elementStyle.width != null || elementStyle.height != null)) {
-    const width = resolveWidth(elementStyle.width, '100%');
-    const height = typeof elementStyle.height === 'number' ? elementStyle.height : 20;
-    const radius = resolveRadius(elementStyle.borderRadius, 'sm');
-    return /*#__PURE__*/_jsx(Skeleton, {
-      width: width,
-      height: height,
-      radius: radius,
-      variant: variant,
-      speed: speed,
-      colors: colors
-    }, `${keyHint}-vw`);
+  // Leaf <View /> with explicit dimensions → skeleton block.
+  if (elementType === View) {
+    const elementStyle = flattenStyle(props.style);
+    if (elementStyle.width != null || elementStyle.height != null) {
+      const width = resolveWidth(elementStyle.width, '100%');
+      const height = typeof elementStyle.height === 'number' ? elementStyle.height : 20;
+      const radius = resolveRadius(elementStyle.borderRadius, 'sm');
+      return /*#__PURE__*/_jsx(Skeleton, {
+        width: width,
+        height: height,
+        radius: radius,
+        variant: variant,
+        speed: speed,
+        colors: colors
+      }, `${keyHint}-vw`);
+    }
   }
 
-  // Opaque leaf (custom component without inspectable children) → leave as-is.
-  // Consumers should use mode='block' when wrapping such elements.
+  // Opaque leaf (custom component without inspectable children and without a
+  // `.Skeleton` static) → leave as-is. Consumers should provide an explicit
+  // `placeholder` or author a `.Skeleton` static to handle these.
   return /*#__PURE__*/cloneElement(element, {
     key: `${keyHint}-leaf`
   });
@@ -117,92 +198,94 @@ const skeletonizeNode = (node, variant, speed, colors, keyHint = 'r') => {
 const SkeletonContent = ({
   loading,
   children,
+  placeholder,
   variant,
   speed,
-  mode = 'auto',
   count = 1,
   colors,
+  fadeDuration,
   style,
   testID
 }) => {
+  const defaults = useSkeletonDefaults();
+  const resolvedFadeDuration = fadeDuration ?? defaults.fadeDuration ?? 300;
+
+  // Cross-fade: opacity goes 0 → 1 when loading just flipped off. First
+  // render is guarded with `wasLoadingRef` so already-loaded content
+  // doesn't fade in on mount.
+  const wasLoadingRef = useRef(loading);
+  const fadeAnim = useRef(createAnimatedValue(loading ? 0 : 1)).current;
+  useEffect(() => {
+    if (wasLoadingRef.current && !loading) {
+      fadeAnim.setValue(0);
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: resolvedFadeDuration,
+        useNativeDriver: true
+      }).start();
+    } else if (!wasLoadingRef.current && loading) {
+      // Going back into loading from loaded — snap opacity so the
+      // placeholder appears instantly when data invalidates.
+      fadeAnim.setValue(1);
+    }
+    wasLoadingRef.current = loading;
+  }, [loading, fadeAnim, resolvedFadeDuration]);
   if (!loading) {
-    return /*#__PURE__*/_jsx(_Fragment, {
+    if (resolvedFadeDuration <= 0) {
+      return /*#__PURE__*/_jsx(_Fragment, {
+        children: children
+      });
+    }
+    return /*#__PURE__*/_jsx(Animated.View, {
+      style: [style, {
+        opacity: fadeAnim
+      }],
+      testID: testID,
       children: children
     });
   }
+
+  // Explicit placeholder path — no walker, no introspection.
+  if (placeholder !== undefined) {
+    const slots = count > 1 ? Array.from({
+      length: count
+    }, (_, i) => /*#__PURE__*/_jsx(React.Fragment, {
+      children: placeholder
+    }, `sk-ph-${i}`)) : placeholder;
+    return /*#__PURE__*/_jsx(View, {
+      style: style,
+      testID: testID,
+      accessible: true,
+      accessibilityLabel: "Loading",
+      accessibilityRole: "progressbar",
+      accessibilityState: {
+        busy: true
+      },
+      accessibilityLiveRegion: "polite",
+      children: slots
+    });
+  }
+
+  // Walker path — auto-substitute primitives and self-describing components.
   const repeated = count > 1 ? Array.from({
     length: count
   }, (_, i) => /*#__PURE__*/_jsx(React.Fragment, {
     children: children
   }, `sk-rep-${i}`)) : children;
-  if (mode === 'block') {
-    return /*#__PURE__*/_jsx(BlockSkeleton, {
-      style: style,
-      testID: testID,
-      variant: variant,
-      speed: speed,
-      colors: colors,
-      children: repeated
-    });
-  }
   return /*#__PURE__*/_jsx(View, {
     style: style,
     testID: testID,
     accessible: true,
     accessibilityLabel: "Loading",
     accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
     accessibilityLiveRegion: "polite",
     children: skeletonizeNode(repeated, variant, speed, colors)
   });
 };
 SkeletonContent.displayName = 'SkeletonContent';
-const BlockSkeleton = ({
-  children,
-  variant,
-  speed,
-  colors,
-  style,
-  testID
-}) => {
-  const [size, setSize] = useState(null);
-  const onLayout = event => {
-    const {
-      width,
-      height
-    } = event.nativeEvent.layout;
-    if (!size || size.width !== width || size.height !== height) {
-      setSize({
-        width,
-        height
-      });
-    }
-  };
-  return /*#__PURE__*/_jsxs(View, {
-    style: style,
-    testID: testID,
-    onLayout: onLayout,
-    accessible: true,
-    accessibilityLabel: "Loading",
-    children: [/*#__PURE__*/_jsx(View, {
-      style: {
-        opacity: 0
-      },
-      pointerEvents: "none",
-      children: children
-    }), size != null ? /*#__PURE__*/_jsx(View, {
-      style: StyleSheet.absoluteFill,
-      pointerEvents: "none",
-      children: /*#__PURE__*/_jsx(Skeleton, {
-        width: size.width,
-        height: size.height,
-        radius: "md",
-        variant: variant,
-        speed: speed,
-        colors: colors
-      })
-    }) : null]
-  });
-};
 export { SkeletonContent };
 export default SkeletonContent;
 //# sourceMappingURL=SkeletonContent.js.map

package/lib/module/components/Skeleton/SkeletonProvider.js

@@ -1,11 +1,29 @@
 "use strict";
 
-import React, { createContext, useContext, useMemo } from 'react';
+/**
+ * SkeletonProvider — app-level defaults for every <Skeleton> below it.
+ *
+ * Two responsibilities:
+ *   1. Broadcasts the default variant / speed / colors / radius /
+ *      placeholderCount so consumers don't repeat them per call site.
+ *   2. Mounts the shared `SkeletonClockProvider` (see SkeletonClock.tsx) so
+ *      every primitive shares a single Animated.Value — synchronized shimmer
+ *      across the whole subtree, one native-driver loop per provider.
+ *
+ * Also honors the OS "Reduce Motion" preference: when enabled, the clock is
+ * paused and skeletons render as static dim blocks. The detection is live —
+ * if the user toggles the setting while the app is open the skeletons stop
+ * shimmering immediately.
+ */
+
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+import { SkeletonClockProvider } from "./SkeletonClock.js";
 
 /**
- * Per-instance color override for a skeleton. `background` is the resting tone
- * of the placeholder; `highlight` is the moving shimmer band (or pulse fade).
- * Either can be omitted — missing keys fall back to the active theme.
+ * Per-instance color override for a skeleton. `background` is the resting
+ * tone of the placeholder; `highlight` is the moving shimmer band (or pulse
+ * fade). Either can be omitted — missing keys fall back to the active theme.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const SkeletonDefaultsContext = /*#__PURE__*/createContext({});
@@ -15,27 +33,70 @@ export const SkeletonProvider = ({
   speed,
   placeholderCount,
   radius,
-  colors
+  colors,
+  fadeDuration,
+  animation = 'auto'
 }) => {
+  const reduceMotion = useReduceMotion();
+  // Resolve whether the clock should actually tick. `'never'` forces off,
+  // `'always'` forces on, `'auto'` follows the OS preference.
+  const animationsEnabled = animation === 'always' ? true : animation === 'never' ? false : !reduceMotion;
+  const resolvedSpeed = speed ?? 'normal';
+  const resolvedVariant = variant ?? 'shimmer';
   const value = useMemo(() => ({
     variant,
     speed,
     placeholderCount,
     radius,
-    colors
-  }), [variant, speed, placeholderCount, radius, colors]);
+    colors,
+    fadeDuration,
+    animation
+  }), [variant, speed, placeholderCount, radius, colors, fadeDuration, animation]);
   return /*#__PURE__*/_jsx(SkeletonDefaultsContext.Provider, {
     value: value,
-    children: children
+    children: /*#__PURE__*/_jsx(SkeletonClockProvider, {
+      speed: resolvedSpeed,
+      variant: resolvedVariant,
+      enabled: animationsEnabled,
+      children: children
+    })
   });
 };
 SkeletonProvider.displayName = 'SkeletonProvider';
 
 /**
- * Read the current SkeletonProvider defaults. Returns an empty object when no
- * provider is mounted, so the skeleton primitives still work outside of one.
+ * Read the current SkeletonProvider defaults. Returns an empty object when
+ * no provider is mounted, so the skeleton primitives still work outside of
+ * one — but without a shared clock or theme-coordinated colors.
  */
 export const useSkeletonDefaults = () => {
   return useContext(SkeletonDefaultsContext);
 };
+
+/**
+ * Subscribes to the OS "Reduce Motion" preference. Live — updates when the
+ * user toggles the setting while the app is open. Used internally by
+ * `SkeletonProvider`; exposed so consumer screens can branch on it too.
+ */
+export const useReduceMotion = () => {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let mounted = true;
+    AccessibilityInfo.isReduceMotionEnabled().then(value => {
+      if (mounted) setReduce(value);
+    }).catch(() => {
+      // Some platforms / older RN versions throw if the native module is
+      // missing. Treat as "motion allowed" — degrade quietly to shimmer.
+      if (mounted) setReduce(false);
+    });
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', value => {
+      setReduce(value);
+    });
+    return () => {
+      mounted = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+};
 //# sourceMappingURL=SkeletonProvider.js.map

package/lib/module/components/Skeleton/index.js

@@ -1,8 +1,9 @@
 "use strict";
 
-export { Skeleton, SkeletonCircle, SkeletonText, SkeletonAvatar, SkeletonCard, SkeletonListItem, default } from "./Skeleton.js";
+export { Skeleton, SkeletonCircle, SkeletonText, default } from "./Skeleton.js";
 export { SkeletonContent } from "./SkeletonContent.js";
 export { SkeletonList } from "./SkeletonList.js";
-export { SkeletonProvider, useSkeletonDefaults } from "./SkeletonProvider.js";
+export { SkeletonProvider, useSkeletonDefaults, useReduceMotion } from "./SkeletonProvider.js";
+export { SkeletonClockProvider, useSkeletonClock } from "./SkeletonClock.js";
 export { SkeletonSkip } from "./SkeletonSkip.js";
 //# sourceMappingURL=index.js.map

package/lib/module/components/Slider/Slider.js

@@ -47,10 +47,27 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
     formatLabel = defaultFormatLabel,
     accessibilityLabel,
     style,
+    containerStyle,
+    trackStyle,
+    fillStyle,
+    thumbStyle,
+    labelStyle,
+    thumbPressScale,
+    labelShowDuration,
+    labelOpacity: labelOpacityProp,
     testID
   } = props;
   const theme = useTheme();
-  const sizeCfg = SIZE_MAP[size];
+  const sliderTheme = theme.components.slider;
+  const sliderSizeTheme = sliderTheme?.[size];
+  const sizeCfg = {
+    trackHeight: sliderSizeTheme?.trackHeight ?? SIZE_MAP[size].trackHeight,
+    thumbDiameter: sliderSizeTheme?.thumbDiameter ?? SIZE_MAP[size].thumbDiameter
+  };
+  const thumbPressAnimationEnabled = sliderTheme?.thumbPressAnimation ?? false;
+  const resolvedPressScale = thumbPressScale ?? sliderTheme?.thumbPressScale ?? 1.1;
+  const resolvedLabelDuration = labelShowDuration ?? sliderTheme?.labelShowDuration ?? theme.motion.duration.fast;
+  const resolvedLabelOpacity = labelOpacityProp ?? sliderTheme?.labelOpacity ?? 1;
   const styles = useMemo(() => buildStyles(theme, sizeCfg), [theme, sizeCfg]);
 
   // Track layout (width + x offset within container)
@@ -141,22 +158,24 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }, [isRange, props]);
   const animateThumbPress = useCallback((target, opacity, pressed) => {
-    Animated.spring(target, {
-      toValue: pressed ? 1.1 : 1,
-      damping: theme.motion.spring.snappy.damping,
-      stiffness: theme.motion.spring.snappy.stiffness,
-      mass: theme.motion.spring.snappy.mass,
-      useNativeDriver: true
-    }).start();
+    if (thumbPressAnimationEnabled) {
+      Animated.spring(target, {
+        toValue: pressed ? resolvedPressScale : 1,
+        damping: theme.motion.spring.snappy.damping,
+        stiffness: theme.motion.spring.snappy.stiffness,
+        mass: theme.motion.spring.snappy.mass,
+        useNativeDriver: true
+      }).start();
+    }
     if (showLabel) {
       Animated.timing(opacity, {
-        toValue: pressed ? 1 : 0,
-        duration: theme.motion.duration.fast,
+        toValue: pressed ? resolvedLabelOpacity : 0,
+        duration: resolvedLabelDuration,
         easing: Easing.out(Easing.cubic),
         useNativeDriver: true
       }).start();
     }
-  }, [showLabel, theme.motion]);
+  }, [showLabel, theme.motion, thumbPressAnimationEnabled, resolvedPressScale, resolvedLabelDuration, resolvedLabelOpacity]);
 
   // Build PanResponder for a thumb.
   const buildResponder = useCallback(which => {
@@ -166,7 +185,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
       onPanResponderGrant: () => {
         dragOffsetRef.current = which === 'low' ? valueToPx(lowRef.current, trackWidth) : valueToPx(highRef.current, trackWidth);
         animateThumbPress(which === 'low' ? lowScale : highScale, which === 'low' ? lowLabelOpacity : highLabelOpacity, true);
-        triggerHaptic('selection');
+        if (sliderTheme?.dragHaptic ?? false) triggerHaptic('selection');
       },
       onPanResponderMove: (_evt, gesture) => {
         if (trackWidth <= 0) return;
@@ -175,7 +194,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
         if (which === 'low') {
           if (isRange && nextValue > highRef.current) nextValue = highRef.current;
           if (nextValue !== lastReportedLow.current) {
-            triggerHaptic('selection');
+            if (sliderTheme?.stepHaptic ?? false) triggerHaptic('selection');
             lastReportedLow.current = nextValue;
           }
           lowRef.current = nextValue;
@@ -184,7 +203,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
         } else {
           if (isRange && nextValue < lowRef.current) nextValue = lowRef.current;
           if (nextValue !== lastReportedHigh.current) {
-            triggerHaptic('selection');
+            if (sliderTheme?.stepHaptic ?? false) triggerHaptic('selection');
             lastReportedHigh.current = nextValue;
           }
           highRef.current = nextValue;
@@ -211,7 +230,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
     const px = clamp(e.nativeEvent.locationX, 0, trackWidth);
     const next = pxToValue(px, trackWidth);
     if (next !== lowRef.current) {
-      triggerHaptic('selection');
+      if (sliderTheme?.tapHaptic ?? false) triggerHaptic('selection');
       lowRef.current = next;
       lastReportedLow.current = next;
       Animated.timing(lowX, {
@@ -234,7 +253,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
         lowRef.current = nextLow;
         lastReportedLow.current = nextLow;
         setNativeValue(lowX, valueToPx(nextLow, trackWidth));
-        triggerHaptic('selection');
+        if (sliderTheme?.a11yHaptic ?? false) triggerHaptic('selection');
         fireChange(nextLow, highRef.current);
       }
     } else {
@@ -243,11 +262,11 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
         lowRef.current = next;
         lastReportedLow.current = next;
         setNativeValue(lowX, valueToPx(next, trackWidth));
-        triggerHaptic('selection');
+        if (sliderTheme?.a11yHaptic ?? false) triggerHaptic('selection');
         fireChange(next, next);
       }
     }
-  }, [disabled, step, isRange, min, max, valueToPx, trackWidth, lowX, fireChange]);
+  }, [disabled, step, isRange, min, max, valueToPx, trackWidth, lowX, fireChange, sliderTheme]);
 
   // Computed values for fill bar.
   const fillLeft = isRange ? lowX : new Animated.Value(0);
@@ -259,7 +278,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
   const highDisplayValue = highRef.current;
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
-    style: [styles.container, style],
+    style: [styles.container, containerStyle, style],
     testID: testID,
     accessibilityRole: "adjustable",
     accessibilityLabel: accessibilityLabel,
@@ -289,14 +308,14 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
         children: [/*#__PURE__*/_jsx(View, {
           style: [styles.track, {
             backgroundColor: disabled ? theme.colors.surface.disabled : theme.colors.border.primary
-          }]
+          }, trackStyle]
         }), /*#__PURE__*/_jsx(Animated.View, {
           style: [styles.fill, {
             left: fillLeft,
             width: fillWidth,
             backgroundColor: disabled ? theme.colors.surface.disabled : fillColor,
             opacity: disabled ? 0.6 : 1
-          }]
+          }, fillStyle]
         }), /*#__PURE__*/_jsx(Animated.View, {
           ...lowResponder.panHandlers,
           style: [styles.thumb, {
@@ -311,7 +330,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
               scale: lowScale
             }],
             opacity: disabled ? 0.6 : 1
-          }],
+          }, thumbStyle],
           accessibilityElementsHidden: true,
           importantForAccessibility: "no-hide-descendants",
           children: showLabel ? /*#__PURE__*/_jsx(Animated.View, {
@@ -321,7 +340,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
             }],
             pointerEvents: "none",
             children: /*#__PURE__*/_jsx(Text, {
-              style: styles.bubbleText,
+              style: [styles.bubbleText, labelStyle],
               children: formatLabel(lowDisplayValue)
             })
           }) : null
@@ -339,7 +358,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
               scale: highScale
             }],
             opacity: disabled ? 0.6 : 1
-          }],
+          }, thumbStyle],
           accessibilityElementsHidden: true,
           importantForAccessibility: "no-hide-descendants",
           children: showLabel ? /*#__PURE__*/_jsx(Animated.View, {
@@ -349,7 +368,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
             }],
             pointerEvents: "none",
             children: /*#__PURE__*/_jsx(Text, {
-              style: styles.bubbleText,
+              style: [styles.bubbleText, labelStyle],
               children: formatLabel(highDisplayValue)
             })
           }) : null