@platform-blocks/ui 0.4.0 → 0.5.0

package/lib/esm/index.js

@@ -12056,7 +12056,7 @@ function AppShellBase(props, ref) {
     const breakpoint = useBreakpoint();
     // Determine if mobile based on breakpoint and platform
     const isMobile = Platform.OS !== 'web' || breakpoint === 'xs' || breakpoint === 'sm';
-    const headerConfig = layoutVisibility.header && !isMobile ? header : undefined;
+    const headerConfig = layoutVisibility.header ? header : undefined;
     const navbarConfig = layoutVisibility.navbar ? navbar : undefined;
     const asideConfig = layoutVisibility.aside ? aside : undefined;
     const footerConfig = layoutVisibility.footer ? footer : undefined;
@@ -17148,9 +17148,7 @@ const createInputStyles = (theme, isRTL = false) => {
                     ? theme.colors.error[5]
                     : props.focused
                         ? theme.colors.primary[5]
-                        : props.disabled
-                            ? theme.backgrounds.border
-                            : 'transparent',
+                        : theme.backgrounds.border,
                 // Optional focus shadow (web only) without affecting layout
                 ...(props.focused && !props.disabled && typeof window !== 'undefined' && ((_a = theme.states) === null || _a === void 0 ? void 0 : _a.focusRing) && {
                     boxShadow: `0 0 0 2px ${theme.states.focusRing}`,
@@ -21047,105 +21045,116 @@ const useSliderGesture = (min, max, step, restrictToTicks, ticks, disabled) => {
     }, [min, max, step, restrictToTicks, ticks]);
     return { calculateNewValue };
 };
-const SliderTrack = ({ disabled, theme, size, orientation, activeWidth = 0, activeLeft = SLIDER_CONSTANTS.THUMB_SIZE[size] / 2, isRange = false }) => {
+const SliderTrack = ({ disabled, theme, size, orientation, activeWidth = 0, activeLeft, isRange = false, trackColor, activeTrackColor, trackStyle, activeTrackStyle, trackHeight, thumbSize, }) => {
     const orientationProps = getOrientationProps(orientation);
-    const thumbSize = SLIDER_CONSTANTS.THUMB_SIZE[size];
-    const trackHeight = SLIDER_CONSTANTS.TRACK_HEIGHT[size];
-    const baseTrackStyle = {
+    const resolvedThumbSize = thumbSize !== null && thumbSize !== void 0 ? thumbSize : SLIDER_CONSTANTS.THUMB_SIZE[size];
+    const resolvedTrackHeight = trackHeight !== null && trackHeight !== void 0 ? trackHeight : SLIDER_CONSTANTS.TRACK_HEIGHT[size];
+    const resolvedActiveLeft = activeLeft !== null && activeLeft !== void 0 ? activeLeft : (resolvedThumbSize / 2);
+    const inactiveTrackBaseStyle = {
         position: 'absolute',
-        backgroundColor: disabled ? theme.colors.gray[2] : theme.colors.gray[3],
-        borderRadius: trackHeight / 2,
+        backgroundColor: disabled && !trackColor ? theme.colors.gray[2] : (trackColor !== null && trackColor !== void 0 ? trackColor : theme.colors.gray[3]),
+        borderRadius: resolvedTrackHeight / 2,
     };
-    const activeTrackStyle = {
+    const activeTrackBaseStyle = {
         position: 'absolute',
-        backgroundColor: disabled ? theme.colors.gray[4] : theme.colors.primary[5],
-        borderRadius: trackHeight / 2,
+        backgroundColor: disabled && !activeTrackColor ? theme.colors.gray[4] : (activeTrackColor !== null && activeTrackColor !== void 0 ? activeTrackColor : theme.colors.primary[5]),
+        borderRadius: resolvedTrackHeight / 2,
     };
     if (orientationProps.isVertical) {
-        return (jsxs(Fragment, { children: [jsx(View, { style: {
-                        ...baseTrackStyle,
-                        top: thumbSize / 2,
-                        bottom: thumbSize / 2,
-                        width: trackHeight,
-                        left: (thumbSize - trackHeight) / 2,
-                    } }), activeWidth > 0 && (jsx(View, { style: {
-                        ...activeTrackStyle,
-                        // For range sliders, use activeLeft as top position; for single sliders, start from bottom
-                        ...(isRange ? {
-                            top: activeLeft,
-                            height: activeWidth,
-                        } : {
-                            bottom: thumbSize / 2,
-                            height: activeWidth,
-                        }),
-                        width: trackHeight,
-                        left: (thumbSize - trackHeight) / 2,
-                    } }))] }));
-    }
-    return (jsxs(Fragment, { children: [jsx(View, { style: {
-                    ...baseTrackStyle,
-                    left: thumbSize / 2,
-                    right: thumbSize / 2,
-                    height: trackHeight,
-                    top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - trackHeight) / 2,
-                } }), activeWidth > 0 && (jsx(View, { style: {
-                    ...activeTrackStyle,
-                    left: activeLeft,
-                    width: activeWidth,
-                    height: trackHeight,
-                    top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - trackHeight) / 2,
-                } }))] }));
-};
-const SliderTicks = ({ ticks, disabled, theme, size, orientation, keyPrefix = 'tick' }) => {
+        return (jsxs(Fragment, { children: [jsx(View, { style: [
+                        {
+                            ...inactiveTrackBaseStyle,
+                            top: resolvedThumbSize / 2,
+                            bottom: resolvedThumbSize / 2,
+                            width: resolvedTrackHeight,
+                            left: (resolvedThumbSize - resolvedTrackHeight) / 2,
+                        },
+                        trackStyle,
+                    ] }), activeWidth > 0 && (jsx(View, { style: [
+                        {
+                            ...activeTrackBaseStyle,
+                            ...(isRange ? {
+                                top: activeLeft !== null && activeLeft !== void 0 ? activeLeft : resolvedActiveLeft,
+                                height: activeWidth,
+                            } : {
+                                bottom: resolvedThumbSize / 2,
+                                height: activeWidth,
+                            }),
+                            width: resolvedTrackHeight,
+                            left: (resolvedThumbSize - resolvedTrackHeight) / 2,
+                        },
+                        activeTrackStyle,
+                    ] }))] }));
+    }
+    return (jsxs(Fragment, { children: [jsx(View, { style: [
+                    {
+                        ...inactiveTrackBaseStyle,
+                        left: resolvedThumbSize / 2,
+                        right: resolvedThumbSize / 2,
+                        height: resolvedTrackHeight,
+                        top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - resolvedTrackHeight) / 2,
+                    },
+                    trackStyle,
+                ] }), activeWidth > 0 && (jsx(View, { style: [
+                    {
+                        ...activeTrackBaseStyle,
+                        left: activeLeft !== null && activeLeft !== void 0 ? activeLeft : resolvedActiveLeft,
+                        width: activeWidth,
+                        height: resolvedTrackHeight,
+                        top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - resolvedTrackHeight) / 2,
+                    },
+                    activeTrackStyle,
+                ] }))] }));
+};
+const SliderTicks = ({ ticks, disabled, theme, size, orientation, keyPrefix = 'tick', trackHeight, thumbSize, activeTickColor, tickColor, }) => {
     const orientationProps = getOrientationProps(orientation);
-    const thumbSize = SLIDER_CONSTANTS.THUMB_SIZE[size];
-    const trackHeight = SLIDER_CONSTANTS.TRACK_HEIGHT[size];
+    const resolvedThumbSize = thumbSize !== null && thumbSize !== void 0 ? thumbSize : SLIDER_CONSTANTS.THUMB_SIZE[size];
+    const resolvedTrackHeight = trackHeight !== null && trackHeight !== void 0 ? trackHeight : SLIDER_CONSTANTS.TRACK_HEIGHT[size];
+    const inactiveColor = disabled && !tickColor ? theme.colors.gray[2] : (tickColor !== null && tickColor !== void 0 ? tickColor : theme.colors.gray[4]);
+    const activeColor = disabled && !activeTickColor ? theme.colors.gray[4] : (activeTickColor !== null && activeTickColor !== void 0 ? activeTickColor : theme.colors.primary[5]);
     if (orientationProps.isVertical) {
         return (jsxs(Fragment, { children: [ticks.map((tick, index) => (jsx(View, { style: {
                         position: 'absolute',
-                        top: thumbSize / 2 + tick.position,
-                        left: (thumbSize - trackHeight) / 2 - 3,
+                        top: resolvedThumbSize / 2 + tick.position,
+                        left: (resolvedThumbSize - resolvedTrackHeight) / 2 - 3,
                         height: 2,
-                        width: trackHeight + 6,
-                        backgroundColor: tick.isActive
-                            ? (disabled ? theme.colors.gray[4] : theme.colors.primary[5])
-                            : (disabled ? theme.colors.gray[2] : theme.colors.gray[4]),
+                        width: resolvedTrackHeight + 6,
+                        backgroundColor: tick.isActive ? activeColor : inactiveColor,
                         borderRadius: 1,
                     } }, `${keyPrefix}-${tick.value}-${index}`))), ticks.map((tick, index) => (tick.label ? (jsx(View, { style: {
                         position: 'absolute',
-                        top: thumbSize / 2 + tick.position - 10,
-                        left: thumbSize + 8,
+                        top: resolvedThumbSize / 2 + tick.position - 10,
+                        left: resolvedThumbSize + 8,
                         height: 20,
                         justifyContent: 'center',
                     }, children: jsx(Text, { size: "xs", children: tick.label }) }, `${keyPrefix}-label-${tick.value}-${index}`)) : null))] }));
     }
     return (jsxs(Fragment, { children: [ticks.map((tick, index) => (jsx(View, { style: {
                     position: 'absolute',
-                    left: thumbSize / 2 + tick.position,
-                    top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - trackHeight) / 2 - 3,
+                    left: resolvedThumbSize / 2 + tick.position,
+                    top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - resolvedTrackHeight) / 2 - 3,
                     width: 2,
-                    height: trackHeight + 6,
-                    backgroundColor: tick.isActive
-                        ? (disabled ? theme.colors.gray[4] : theme.colors.primary[5])
-                        : (disabled ? theme.colors.gray[2] : theme.colors.gray[4]),
+                    height: resolvedTrackHeight + 6,
+                    backgroundColor: tick.isActive ? activeColor : inactiveColor,
                     borderRadius: 1,
                 } }, `${keyPrefix}-${tick.value}-${index}`))), ticks.map((tick, index) => (tick.label ? (jsx(View, { style: {
                     position: 'absolute',
-                    left: thumbSize / 2 + tick.position - 20,
+                    left: resolvedThumbSize / 2 + tick.position - 20,
                     top: SLIDER_CONSTANTS.CONTAINER_HEIGHT + 8,
                     width: 40,
                     alignItems: 'center',
                 }, children: jsx(Text, { size: "xs", style: { textAlign: 'center' }, children: tick.label }) }, `${keyPrefix}-label-${tick.value}-${index}`)) : null))] }));
 };
-const SliderThumb = ({ position, disabled, theme, size, orientation, isDragging, zIndex = 1, panHandlers }) => {
+const SliderThumb = ({ position, disabled, theme, size, orientation, isDragging, zIndex = 1, panHandlers, thumbColor, thumbStyle, thumbSize, }) => {
     const orientationProps = getOrientationProps(orientation);
-    const thumbSize = SLIDER_CONSTANTS.THUMB_SIZE[size];
+    const resolvedThumbSize = thumbSize !== null && thumbSize !== void 0 ? thumbSize : SLIDER_CONSTANTS.THUMB_SIZE[size];
+    const resolvedThumbColor = disabled && !thumbColor ? theme.colors.gray[4] : (thumbColor !== null && thumbColor !== void 0 ? thumbColor : theme.colors.primary[5]);
     const baseStyle = {
         position: 'absolute',
-        width: thumbSize,
-        height: thumbSize,
-        backgroundColor: disabled ? theme.colors.gray[4] : theme.colors.primary[5],
-        borderRadius: thumbSize / 2,
+        width: resolvedThumbSize,
+        height: resolvedThumbSize,
+        backgroundColor: resolvedThumbColor,
+        borderRadius: resolvedThumbSize / 2,
         borderWidth: 2,
         borderColor: 'white',
         boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
@@ -21154,36 +21163,43 @@ const SliderThumb = ({ position, disabled, theme, size, orientation, isDragging,
         zIndex,
     };
     if (orientationProps.isVertical) {
-        return (jsx(View, { style: {
-                ...baseStyle,
-                top: position,
-                left: 0,
-            }, ...panHandlers }));
+        return (jsx(View, { style: [
+                baseStyle,
+                {
+                    top: position,
+                    left: 0,
+                },
+                thumbStyle,
+            ], ...panHandlers }));
     }
-    return (jsx(View, { style: {
-            ...baseStyle,
-            left: position,
-            top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - thumbSize) / 2,
-        }, ...panHandlers }));
+    return (jsx(View, { style: [
+            baseStyle,
+            {
+                left: position,
+                top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - resolvedThumbSize) / 2,
+            },
+            thumbStyle,
+        ], ...panHandlers }));
 };
 const SliderLabel = ({ label }) => (jsx(View, { style: { marginBottom: 8 }, children: typeof label === 'string' ? (jsx(Text, { size: "sm", weight: "medium", children: label })) : (label) }));
-const SliderValueLabel = ({ value, position, size, orientation, isCard = false }) => {
+const SliderValueLabel = ({ value, position, size, orientation, isCard = false, thumbSize, }) => {
     const orientationProps = getOrientationProps(orientation);
-    const thumbSize = SLIDER_CONSTANTS.THUMB_SIZE[size];
+    const resolvedThumbSize = thumbSize !== null && thumbSize !== void 0 ? thumbSize : SLIDER_CONSTANTS.THUMB_SIZE[size];
     // round number to 2 decimal places for display
     const displayValue = typeof value === 'number' ? value.toFixed(2) : value;
     if (orientationProps.isVertical) {
+        const verticalLabelOffset = resolvedThumbSize + 16; // keep label clear of the thumb
         return (jsx(View, { style: {
                 position: 'absolute',
-                top: position + (thumbSize / 2) - 10,
-                right: thumbSize + 8,
+                top: position + (resolvedThumbSize / 2) - 10,
+                right: verticalLabelOffset,
                 height: 20,
                 justifyContent: 'center',
             }, children: isCard ? (jsx(Card, { p: "xs", variant: "filled", children: jsx(Text, { size: "sm", children: displayValue }) })) : (jsx(Text, { size: "sm", children: displayValue })) }));
     }
     return (jsx(View, { style: {
             position: 'absolute',
-            left: position + (thumbSize / 2) - 50,
+            left: position + (resolvedThumbSize / 2) - 50,
             bottom: SLIDER_CONSTANTS.CONTAINER_HEIGHT - 6, // Moved closer to thumb
             width: 100,
             alignItems: 'center',
@@ -21199,9 +21215,34 @@ const SLIDER_SIZE_SCALE = {
     '2xl': 'lg',
     '3xl': 'lg',
 };
+const resolvePaletteColor = (themeColors, scheme) => {
+    if (!scheme || typeof scheme !== 'string') {
+        return undefined;
+    }
+    const palette = themeColors[scheme];
+    if (Array.isArray(palette)) {
+        return palette;
+    }
+    return undefined;
+};
+const resolveSliderColors = (theme, { colorScheme, trackColor, activeTrackColor, thumbColor, tickColor, activeTickColor, }) => {
+    var _a, _b;
+    const palette = resolvePaletteColor(theme.colors, colorScheme);
+    const schemeColor = (_b = (_a = palette === null || palette === void 0 ? void 0 : palette[5]) !== null && _a !== void 0 ? _a : (typeof colorScheme === 'string' ? colorScheme : undefined)) !== null && _b !== void 0 ? _b : theme.colors.primary[5];
+    const resolvedActiveTrack = activeTrackColor !== null && activeTrackColor !== void 0 ? activeTrackColor : schemeColor;
+    const defaultTrackColor = theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[3];
+    const defaultTickColor = theme.colorScheme === 'dark' ? theme.colors.gray[5] : theme.colors.gray[4];
+    return {
+        trackColor: trackColor !== null && trackColor !== void 0 ? trackColor : defaultTrackColor,
+        activeTrackColor: resolvedActiveTrack,
+        thumbColor: thumbColor !== null && thumbColor !== void 0 ? thumbColor : resolvedActiveTrack,
+        tickColor: tickColor !== null && tickColor !== void 0 ? tickColor : defaultTickColor,
+        activeTickColor: activeTickColor !== null && activeTickColor !== void 0 ? activeTickColor : resolvedActiveTrack,
+    };
+};
 // Optimized Single Slider Component
 const Slider = factory((props, ref) => {
-    const { value, defaultValue = 0, onChange, min = 0, max = 100, step = 1, disabled = false, size = 'md', orientation = 'horizontal', containerSize, fullWidth = true, label, valueLabel, valueLabelAlwaysOn = false, ticks, showTicks = false, restrictToTicks = false, style, ...spacingProps } = props;
+    const { value, defaultValue = 0, onChange, min = 0, max = 100, step = 1, disabled = false, size = 'md', orientation = 'horizontal', containerSize, fullWidth = true, label, valueLabel, valueLabelAlwaysOn = false, ticks, showTicks = false, restrictToTicks = false, trackColor, activeTrackColor, thumbColor, trackSize, thumbSize: thumbSizeProp, colorScheme = 'primary', trackStyle, activeTrackStyle, thumbStyle, tickColor, activeTickColor, style, ...spacingProps } = props;
     const theme = useTheme();
     const [isDragging, setIsDragging] = useState(false);
     // Uncontrolled internal value
@@ -21230,14 +21271,31 @@ const Slider = factory((props, ref) => {
                 : 'md'
         : (resolvedSliderSize !== null && resolvedSliderSize !== void 0 ? resolvedSliderSize : 'md');
     const orientationProps = getOrientationProps(orientation, containerSize);
-    const thumbSize = SLIDER_CONSTANTS.THUMB_SIZE[sliderSize];
+    const thumbSize = thumbSizeProp !== null && thumbSizeProp !== void 0 ? thumbSizeProp : SLIDER_CONSTANTS.THUMB_SIZE[sliderSize];
+    const trackHeight = trackSize !== null && trackSize !== void 0 ? trackSize : SLIDER_CONSTANTS.TRACK_HEIGHT[sliderSize];
     // Memoized processed value
     const clampedValue = useSliderValue(isControlled ? value : internal, min, max, step, restrictToTicks, ticks, false);
     // Memoized value label handling
+    const defaultValueFormatter = useCallback((val) => Math.round(val).toString(), []);
+    const resolvedValueLabel = useMemo(() => {
+        if (valueLabel === null)
+            return null;
+        if (valueLabel)
+            return valueLabel;
+        return defaultValueFormatter;
+    }, [valueLabel, defaultValueFormatter]);
     const labelConfig = useMemo(() => ({
-        shouldShow: valueLabel !== null && (valueLabelAlwaysOn || isDragging || (Platform.OS === 'web' && isHovering)),
-        formatter: valueLabel || ((val) => (Number.isInteger(val) ? val.toString() : val.toFixed(2)))
-    }), [valueLabel, valueLabelAlwaysOn, isDragging, isHovering]);
+        shouldShow: !!resolvedValueLabel && (valueLabelAlwaysOn || isDragging || (Platform.OS === 'web' && isHovering)),
+        formatter: resolvedValueLabel !== null && resolvedValueLabel !== void 0 ? resolvedValueLabel : defaultValueFormatter,
+    }), [resolvedValueLabel, valueLabelAlwaysOn, isDragging, isHovering, defaultValueFormatter]);
+    const sliderColors = useMemo(() => resolveSliderColors(theme, {
+        colorScheme,
+        trackColor,
+        activeTrackColor,
+        thumbColor,
+        tickColor,
+        activeTickColor,
+    }), [theme, colorScheme, trackColor, activeTrackColor, thumbColor, tickColor, activeTickColor]);
     // Memoized position calculations
     const positions = useMemo(() => {
         var _a, _b;
@@ -21367,6 +21425,7 @@ const Slider = factory((props, ref) => {
                     height: fullWidth && orientation === 'vertical' ? '100%' : orientationProps.containerHeight,
                     justifyContent: 'center',
                     position: 'relative',
+                    ...(Platform.OS === 'web' && orientation === 'vertical' ? { touchAction: 'none' } : null),
                 }, onLayout: (event) => {
                     // When fullWidth is enabled, track the actual container dimensions
                     if (fullWidth) {
@@ -21380,11 +21439,11 @@ const Slider = factory((props, ref) => {
                 }, onStartShouldSetResponder: () => !isDragging, onResponderGrant: handlePress, ...(Platform.OS === 'web' && {
                     onMouseEnter: () => setIsHovering(true),
                     onMouseLeave: () => setIsHovering(false),
-                }), ...panResponder.panHandlers, children: [jsx(SliderTrack, { disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, activeWidth: positions.activeLength }), jsx(SliderTicks, { ticks: allTicks, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation }), jsx(SliderThumb, { position: positions.thumbPosition, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, isDragging: isDragging }), labelConfig.shouldShow && (jsx(SliderValueLabel, { value: labelConfig.formatter(clampedValue), position: positions.thumbPosition, size: sliderSize, orientation: orientation, isCard: true }))] })] }));
+                }), ...panResponder.panHandlers, children: [jsx(SliderTrack, { disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, activeWidth: positions.activeLength, trackColor: sliderColors.trackColor, activeTrackColor: sliderColors.activeTrackColor, trackStyle: trackStyle, activeTrackStyle: activeTrackStyle, trackHeight: trackHeight, thumbSize: thumbSize }), jsx(SliderTicks, { ticks: allTicks, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, trackHeight: trackHeight, thumbSize: thumbSize, tickColor: sliderColors.tickColor, activeTickColor: sliderColors.activeTickColor }), jsx(SliderThumb, { position: positions.thumbPosition, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, isDragging: isDragging, thumbColor: sliderColors.thumbColor, thumbStyle: thumbStyle, thumbSize: thumbSize }), labelConfig.shouldShow && (jsx(SliderValueLabel, { value: labelConfig.formatter(clampedValue), position: positions.thumbPosition, size: sliderSize, orientation: orientation, isCard: true, thumbSize: thumbSize }))] })] }));
 });
 // Optimized Range Slider Component
 const RangeSlider = factory((props, ref) => {
-    const { value = [0, 100], onChange, min = 0, max = 100, step = 1, disabled = false, size = 'md', orientation = 'horizontal', containerSize, fullWidth = true, label, valueLabel, valueLabelAlwaysOn = false, ticks, showTicks = false, restrictToTicks = false, pushOnOverlap = true, style, ...spacingProps } = props;
+    const { value = [0, 100], onChange, min = 0, max = 100, step = 1, disabled = false, size = 'md', orientation = 'horizontal', containerSize, fullWidth = true, label, valueLabel, valueLabelAlwaysOn = false, ticks, showTicks = false, restrictToTicks = false, pushOnOverlap = true, trackColor, activeTrackColor, thumbColor, trackSize, thumbSize: thumbSizeProp, colorScheme = 'primary', trackStyle, activeTrackStyle, thumbStyle, tickColor, activeTickColor, style, ...spacingProps } = props;
     const theme = useTheme();
     const [dragState, setDragState] = useState({ thumb: null });
     const [isHovering, setIsHovering] = useState(false);
@@ -21404,8 +21463,17 @@ const RangeSlider = factory((props, ref) => {
                 : 'md'
         : (rangeResolvedSliderSize !== null && rangeResolvedSliderSize !== void 0 ? rangeResolvedSliderSize : 'md');
     const orientationProps = getOrientationProps(orientation, containerSize);
-    const thumbSize = SLIDER_CONSTANTS.THUMB_SIZE[sliderSize];
+    const thumbSize = thumbSizeProp !== null && thumbSizeProp !== void 0 ? thumbSizeProp : SLIDER_CONSTANTS.THUMB_SIZE[sliderSize];
+    const trackHeight = trackSize !== null && trackSize !== void 0 ? trackSize : SLIDER_CONSTANTS.TRACK_HEIGHT[sliderSize];
     useRef(null);
+    const sliderColors = useMemo(() => resolveSliderColors(theme, {
+        colorScheme,
+        trackColor,
+        activeTrackColor,
+        thumbColor,
+        tickColor,
+        activeTickColor,
+    }), [theme, colorScheme, trackColor, activeTrackColor, thumbColor, tickColor, activeTickColor]);
     // Memoized processed values
     const [minValue, maxValue] = useSliderValue(value, min, max, step, restrictToTicks, ticks, true);
     // Memoized backward compatibility handling
@@ -21641,6 +21709,7 @@ const RangeSlider = factory((props, ref) => {
                     height: fullWidth && orientation === 'vertical' ? '100%' : orientationProps.containerHeight,
                     justifyContent: 'center',
                     position: 'relative',
+                    ...(Platform.OS === 'web' && orientation === 'vertical' ? { touchAction: 'none' } : null),
                 }, onLayout: (event) => {
                     // When fullWidth is enabled, track the actual container dimensions
                     if (fullWidth) {
@@ -21654,7 +21723,7 @@ const RangeSlider = factory((props, ref) => {
                 }, onStartShouldSetResponder: () => true, onResponderGrant: handleTrackPress, ...(Platform.OS === 'web' && {
                     onMouseEnter: () => setIsHovering(true),
                     onMouseLeave: () => setIsHovering(false),
-                }), collapsable: false, children: [jsx(SliderTrack, { disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, activeWidth: positions.activeWidth, activeLeft: positions.activeLeft, isRange: true }), jsx(SliderTicks, { ticks: allTicks, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, keyPrefix: "range-tick" }), jsx(SliderThumb, { position: positions.minThumbPosition, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, isDragging: dragState.thumb === 'min', zIndex: dragState.thumb === 'min' ? 10 : 1, panHandlers: minThumbPanResponder.panHandlers }), jsx(SliderThumb, { position: positions.maxThumbPosition, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, isDragging: dragState.thumb === 'max', zIndex: dragState.thumb === 'max' ? 10 : 2, panHandlers: maxThumbPanResponder.panHandlers }), labelConfig.shouldShow && (jsxs(Fragment, { children: [jsx(SliderValueLabel, { value: labelConfig.formatter(minValue, 0), position: positions.minThumbPosition, size: sliderSize, orientation: orientation, isCard: true }), jsx(SliderValueLabel, { value: labelConfig.formatter(maxValue, 1), position: positions.maxThumbPosition, size: sliderSize, orientation: orientation, isCard: true })] }))] })] }));
+                }), collapsable: false, children: [jsx(SliderTrack, { disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, activeWidth: positions.activeWidth, activeLeft: positions.activeLeft, isRange: true, trackColor: sliderColors.trackColor, activeTrackColor: sliderColors.activeTrackColor, trackStyle: trackStyle, activeTrackStyle: activeTrackStyle, trackHeight: trackHeight, thumbSize: thumbSize }), jsx(SliderTicks, { ticks: allTicks, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, keyPrefix: "range-tick", trackHeight: trackHeight, thumbSize: thumbSize, tickColor: sliderColors.tickColor, activeTickColor: sliderColors.activeTickColor }), jsx(SliderThumb, { position: positions.minThumbPosition, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, isDragging: dragState.thumb === 'min', zIndex: dragState.thumb === 'min' ? 10 : 1, panHandlers: minThumbPanResponder.panHandlers, thumbColor: sliderColors.thumbColor, thumbStyle: thumbStyle, thumbSize: thumbSize }), jsx(SliderThumb, { position: positions.maxThumbPosition, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, isDragging: dragState.thumb === 'max', zIndex: dragState.thumb === 'max' ? 10 : 2, panHandlers: maxThumbPanResponder.panHandlers, thumbColor: sliderColors.thumbColor, thumbStyle: thumbStyle, thumbSize: thumbSize }), labelConfig.shouldShow && (jsxs(Fragment, { children: [jsx(SliderValueLabel, { value: labelConfig.formatter(minValue, 0), position: positions.minThumbPosition, size: sliderSize, orientation: orientation, isCard: true, thumbSize: thumbSize }), jsx(SliderValueLabel, { value: labelConfig.formatter(maxValue, 1), position: positions.maxThumbPosition, size: sliderSize, orientation: orientation, isCard: true, thumbSize: thumbSize })] }))] })] }));
 });
 
 const clampNumber$1 = (value, min, max) => Math.min(max, Math.max(min, value));
@@ -31548,13 +31617,13 @@ function Indicator({ size = 'sm', color, borderColor, borderWidth = 1, placement
 
 const AVATAR_ALLOWED_SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
 const AVATAR_SIZE_SCALE = {
-    xs: { avatar: 24, badge: 6, text: 'xs' },
-    sm: { avatar: 32, badge: 8, text: 'xs' },
-    md: { avatar: 40, badge: 10, text: 'sm' },
-    lg: { avatar: 48, badge: 12, text: 'md' },
-    xl: { avatar: 64, badge: 16, text: 'lg' },
-    '2xl': { avatar: 80, badge: 20, text: 'xl' },
-    '3xl': { avatar: 96, badge: 24, text: '2xl' },
+    xs: { avatar: 24, indicator: 6, text: 'xs' },
+    sm: { avatar: 32, indicator: 8, text: 'xs' },
+    md: { avatar: 40, indicator: 10, text: 'sm' },
+    lg: { avatar: 48, indicator: 12, text: 'md' },
+    xl: { avatar: 64, indicator: 16, text: 'lg' },
+    '2xl': { avatar: 80, indicator: 20, text: 'xl' },
+    '3xl': { avatar: 96, indicator: 24, text: '2xl' },
 };
 const BASE_AVATAR_METRICS = AVATAR_SIZE_SCALE.md;
 function resolveAvatarMetrics(value) {
@@ -31572,11 +31641,11 @@ function resolveAvatarMetrics(value) {
 }
 function calculateNumericMetrics$1(value) {
     const ratio = value / BASE_AVATAR_METRICS.avatar;
-    const badge = Math.max(4, Math.round(BASE_AVATAR_METRICS.badge * ratio));
+    const indicator = Math.max(4, Math.round(BASE_AVATAR_METRICS.indicator * ratio));
     const text = pickTextSize(value);
     return {
         avatar: value,
-        badge,
+        indicator,
         text,
     };
 }
@@ -31595,9 +31664,9 @@ function pickTextSize(value) {
         return 'sm';
     return 'xs';
 }
-function Avatar({ size = 'md', src, fallback, backgroundColor, textColor = 'white', online, badgeColor, style, accessibilityLabel, label, description, gap = 8, showText = true, }) {
+function Avatar({ size = 'md', src, fallback, backgroundColor, textColor = 'white', online, indicatorColor, style, accessibilityLabel, label, description, gap = 8, showText = true, }) {
     const theme = useTheme();
-    const { avatar: avatarSize, badge: badgeSize, text: textSize } = resolveAvatarMetrics(size);
+    const { avatar: avatarSize, indicator: indicatorSize, text: textSize } = resolveAvatarMetrics(size);
     const avatarStyle = {
         width: avatarSize,
         height: avatarSize,
@@ -31615,7 +31684,7 @@ function Avatar({ size = 'md', src, fallback, backgroundColor, textColor = 'whit
                         width: avatarSize,
                         height: avatarSize,
                         borderRadius: avatarSize / 2,
-                    }, accessibilityLabel: accessibilityLabel })) : (jsx(Text, { size: textSize, color: textColor, weight: "semibold", style: { textAlign: 'center' }, children: fallback || '?' })) }), online && (jsx(Indicator, { size: badgeSize, color: badgeColor || theme.colors.success[5], borderColor: theme.colors.gray[0], placement: "bottom-right" }))] }));
+                    }, accessibilityLabel: accessibilityLabel })) : (jsx(Text, { size: textSize, color: textColor, weight: "semibold", style: { textAlign: 'center' }, children: fallback || '?' })) }), online && (jsx(Indicator, { size: indicatorSize, color: indicatorColor || theme.colors.success[5], borderColor: theme.colors.gray[0], placement: "bottom-right" }))] }));
     if (label || description) {
         return (jsxs(View, { style: { flexDirection: 'row', alignItems: 'center' }, children: [content, showText && (jsxs(View, { style: { marginLeft: gap, justifyContent: 'center' }, children: [label && (typeof label === 'string' ? (jsx(Text, { size: textSize, weight: "semibold", children: label })) : label), description && (typeof description === 'string' ? (jsx(Text, { size: textSize, color: theme.colors.gray[6], children: description })) : description)] }))] }));
     }
@@ -33448,7 +33517,7 @@ const filterData = (data, filters, columns, searchValue, rowFeatureToggle) => {
     return filteredData;
 };
 // DataTable component
-const DataTable = ({ id, data, columns, loading = false, error = null, emptyMessage = 'No data available', searchable = true, searchPlaceholder = 'Search...', searchValue: controlledSearchValue, onSearchChange, sortBy = [], onSortChange, filters = [], onFilterChange, pagination, onPaginationChange, selectable = false, selectedRows = [], onSelectionChange, getRowId = (_, index) => index, onRowClick, editMode = false, onEditModeChange, onCellEdit, bulkActions = [], variant = 'default', density = 'normal', height, virtual = false, style, hoverHighlight = true, enableColumnResizing = false, rowFeatureToggle, initialHiddenColumns = [], onColumnVisibilityChange, onColumnSettings, showColumnVisibilityManager = true, rowsPerPageOptions = [10, 25, 50, 100], showRowsPerPageControl = true, rowActions, actionsColumnWidth = 100, fullWidth = true, 
+const DataTable = ({ id, data, columns, loading = false, error = null, emptyMessage = 'No data available', searchable = true, searchPlaceholder = 'Search...', searchValue: controlledSearchValue, onSearchChange, sortBy = [], onSortChange, filters = [], onFilterChange, pagination, onPaginationChange, selectable = false, selectedRows = [], onSelectionChange, getRowId = (_, index) => index, onRowClick, editMode = false, onEditModeChange, onCellEdit, bulkActions = [], variant = 'default', striped: stripedProp, density = 'normal', height, virtual = false, style, hoverHighlight = true, enableColumnResizing = false, rowFeatureToggle, initialHiddenColumns = [], onColumnVisibilityChange, onColumnSettings, showColumnVisibilityManager = true, rowsPerPageOptions = [10, 25, 50, 100], showRowsPerPageControl = true, rowActions, actionsColumnWidth = 100, fullWidth = true, 
 // Border styling props
 rowBorderWidth, rowBorderColor, rowBorderStyle = 'solid', columnBorderWidth, columnBorderColor, columnBorderStyle = 'solid', showOuterBorder = false, outerBorderWidth = 1, outerBorderColor, 
 // Expandable rows props
@@ -33456,6 +33525,7 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
     const { spacingProps, otherProps } = extractSpacingProps(props);
     const theme = useTheme();
     const { isRTL } = useDirection();
+    const isStriped = stripedProp !== null && stripedProp !== void 0 ? stripedProp : variant === 'striped';
     // Local state
     const [internalSearchValue, setInternalSearchValue] = useState('');
     const [editingCell, setEditingCell] = useState(null);
@@ -33892,7 +33962,7 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
         const rowElement = (jsxs(Fragment, { children: [jsxs(TableTr, { selected: isSelected, onPress: () => onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, rowIndex), style: {
                         backgroundColor: isSelected
                             ? theme.colors.primary[1]
-                            : variant === 'striped' && rowIndex % 2 === 1
+                            : isStriped && rowIndex % 2 === 1
                                 ? theme.colors.gray[0]
                                 : 'transparent',
                         borderBottomWidth: rowBorderWidth || (variant === 'bordered' ? 1 : 0),
@@ -33972,7 +34042,7 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
         borderRadius: showOuterBorder ? 8 : 0
     };
     if (loading) {
-        return (jsxs(View, { style: [getSpacingStyles(spacingProps), style], ...otherProps, children: [renderHeader(), jsxs(Table, { striped: variant === 'striped', withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth: fullWidth, children: [jsxs(TableTr, { style: { backgroundColor: theme.colors.gray[0] }, children: [selectable && (jsx(TableTh, { w: 50, children: jsx(View, { style: { width: 20, height: 20, backgroundColor: theme.colors.gray[2], borderRadius: 4 } }) })), expandableRowRender && (jsx(TableTh, { w: 50, children: jsx(View, { style: { width: 20, height: 20, backgroundColor: theme.colors.gray[2], borderRadius: 4 } }) })), visibleColumns.map(column => (jsx(TableTh, { w: column.width || columnWidths[column.key], minWidth: column.minWidth, children: jsx(View, { style: {
+        return (jsxs(View, { style: [getSpacingStyles(spacingProps), style], ...otherProps, children: [renderHeader(), jsxs(Table, { striped: isStriped, withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth: fullWidth, children: [jsxs(TableTr, { style: { backgroundColor: theme.colors.gray[0] }, children: [selectable && (jsx(TableTh, { w: 50, children: jsx(View, { style: { width: 20, height: 20, backgroundColor: theme.colors.gray[2], borderRadius: 4 } }) })), expandableRowRender && (jsx(TableTh, { w: 50, children: jsx(View, { style: { width: 20, height: 20, backgroundColor: theme.colors.gray[2], borderRadius: 4 } }) })), visibleColumns.map(column => (jsx(TableTh, { w: column.width || columnWidths[column.key], minWidth: column.minWidth, children: jsx(View, { style: {
                                             height: 20,
                                             backgroundColor: theme.colors.gray[2],
                                             borderRadius: 4,
@@ -33994,9 +34064,9 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
                         borderColor: theme.colors.error[2]
                     }, children: [jsx(Icon, { name: "error", size: 32, color: theme.colors.error[5], style: { marginBottom: 12 } }), jsx(Text, { variant: "h6", color: theme.colors.error[7], style: { marginBottom: 8 }, children: "Error Loading Data" }), jsx(Text, { variant: "p", colorVariant: "muted", style: { textAlign: 'center' }, children: error })] })] }));
     }
-    return (jsxs(View, { style: [getSpacingStyles(spacingProps), style], ...otherProps, children: [renderHeader(), virtual ? (jsx(View, { style: [{ width: '100%', overflow: 'hidden' }, tableBorderStyle], children: jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: Platform.OS === 'web', contentContainerStyle: minWidthValue ? { minWidth: minWidthValue } : undefined, children: jsxs(View, { style: { flex: 1 }, children: [jsx(Table, { striped: variant === 'striped', withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth: fullWidth, children: headerRow }), processedData.length === 0 ? (jsx(Table, { striped: variant === 'striped', withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth: fullWidth, children: emptyStateRow })) : (jsx(FlashList, { data: processedData, keyExtractor: (item, index) => String(getRowId(item, index)), renderItem: renderVirtualRow, ...flashListSizingProps, extraData: flashListExtraData, contentContainerStyle: { flexGrow: 1 }, showsVerticalScrollIndicator: Platform.OS === 'web' }))] }) }) })) : (
+    return (jsxs(View, { style: [getSpacingStyles(spacingProps), style], ...otherProps, children: [renderHeader(), virtual ? (jsx(View, { style: [{ width: '100%', overflow: 'hidden' }, tableBorderStyle], children: jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: Platform.OS === 'web', contentContainerStyle: minWidthValue ? { minWidth: minWidthValue } : undefined, children: jsxs(View, { style: { flex: 1 }, children: [jsx(Table, { striped: isStriped, withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth: fullWidth, children: headerRow }), processedData.length === 0 ? (jsx(Table, { striped: isStriped, withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth: fullWidth, children: emptyStateRow })) : (jsx(FlashList, { data: processedData, keyExtractor: (item, index) => String(getRowId(item, index)), renderItem: renderVirtualRow, ...flashListSizingProps, extraData: flashListExtraData, contentContainerStyle: { flexGrow: 1 }, showsVerticalScrollIndicator: Platform.OS === 'web' }))] }) }) })) : (
             // <TableScrollContainer style={tableBorderStyle} minWidth={minWidthValue}>
-            jsxs(Table, { striped: variant === 'striped', withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth //</TableScrollContainer>={fullWidth}
+            jsxs(Table, { striped: isStriped, withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth //</TableScrollContainer>={fullWidth}
                 : true, children: [headerRow, processedData.length === 0 ? emptyStateRow : nonVirtualRows] })
             // </TableScrollContainer>
             ), pagination && onPaginationChange && (jsx(View, { style: {
@@ -37434,49 +37504,101 @@ const CarouselDot = memo(({ index, pageProgress, metrics, totalPages, loop, them
         : { marginHorizontal: metrics.margin, height: baseDotSize, justifyContent: 'center' };
     return (jsx(Pressable, { onPress: handlePress, accessibilityRole: "button", accessibilityLabel: `Go to slide ${index + 1}`, style: containerStyle, children: jsx(Animated.View, { style: [{ borderRadius: baseDotSize / 2 }, animatedStyle] }) }));
 });
+const getBreakpointName = (width) => {
+    if (width >= 1200)
+        return 'xl';
+    if (width >= 992)
+        return 'lg';
+    if (width >= 768)
+        return 'md';
+    if (width >= 576)
+        return 'sm';
+    return 'xs';
+};
+const getViewportWidth = () => {
+    if (Platform.OS === 'web' && typeof window !== 'undefined' && typeof window.innerWidth === 'number') {
+        return window.innerWidth;
+    }
+    const dimensions = Dimensions.get('window');
+    return typeof (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) === 'number' ? dimensions.width : 0;
+};
 // Optimized breakpoint hook with debouncing
 const useOptimizedBreakpoint = () => {
-    const [breakpoint, setBreakpoint] = useState('sm');
+    const computeState = () => {
+        const width = getViewportWidth();
+        return {
+            width,
+            breakpoint: getBreakpointName(width),
+        };
+    };
+    const [state, setState] = useState(computeState);
     useEffect(() => {
         let timeoutId;
-        const compute = () => {
-            const w = Platform.OS === 'web'
-                ? window.innerWidth
-                : Dimensions.get('window').width;
-            let newBreakpoint = 'sm';
-            if (w >= 1200)
-                newBreakpoint = 'xl';
-            else if (w >= 992)
-                newBreakpoint = 'lg';
-            else if (w >= 768)
-                newBreakpoint = 'md';
-            else if (w >= 576)
-                newBreakpoint = 'sm';
-            else
-                newBreakpoint = 'xs';
-            setBreakpoint(prev => prev !== newBreakpoint ? newBreakpoint : prev);
+        const update = () => {
+            const next = computeState();
+            setState(prev => (prev.breakpoint === next.breakpoint && prev.width === next.width) ? prev : next);
         };
-        const debouncedCompute = () => {
+        const debouncedUpdate = () => {
             clearTimeout(timeoutId);
-            timeoutId = setTimeout(compute, 100); // Debounce resize events
+            timeoutId = setTimeout(update, 100); // Debounce resize events
         };
-        compute();
-        if (Platform.OS === 'web') {
-            window.addEventListener('resize', debouncedCompute, { passive: true });
+        update();
+        if (Platform.OS === 'web' && typeof window !== 'undefined') {
+            window.addEventListener('resize', debouncedUpdate, { passive: true });
             return () => {
-                window.removeEventListener('resize', debouncedCompute);
+                window.removeEventListener('resize', debouncedUpdate);
                 clearTimeout(timeoutId);
             };
         }
-        return () => clearTimeout(timeoutId);
+        const subscription = Dimensions.addEventListener('change', debouncedUpdate);
+        return () => {
+            subscription === null || subscription === void 0 ? void 0 : subscription.remove();
+            clearTimeout(timeoutId);
+        };
     }, []);
-    return breakpoint;
+    return state;
+};
+const parseMediaQuery = (query) => {
+    const minMatch = query.match(/min-width:\s*(\d+)px/);
+    const maxMatch = query.match(/max-width:\s*(\d+)px/);
+    return {
+        min: minMatch ? parseInt(minMatch[1], 10) : undefined,
+        max: maxMatch ? parseInt(maxMatch[1], 10) : undefined,
+    };
+};
+const matchQuery = (query, width) => {
+    const { min, max } = parseMediaQuery(query);
+    if (min != null && width < min)
+        return false;
+    if (max != null && width > max)
+        return false;
+    return true;
+};
+const mergeBreakpointProps = (baseProps, breakpointProps, width) => {
+    if (!breakpointProps)
+        return baseProps;
+    const sortedEntries = Object.entries(breakpointProps).sort((a, b) => {
+        var _a, _b;
+        const aMin = (_a = parseMediaQuery(a[0]).min) !== null && _a !== void 0 ? _a : 0;
+        const bMin = (_b = parseMediaQuery(b[0]).min) !== null && _b !== void 0 ? _b : 0;
+        return aMin - bMin;
+    });
+    let resolvedProps = { ...baseProps };
+    sortedEntries.forEach(([query, value]) => {
+        const shouldApply = width != null ? matchQuery(query, width) : (Platform.OS === 'web' && typeof window !== 'undefined' ? window.matchMedia(query).matches : false);
+        if (shouldApply) {
+            resolvedProps = { ...resolvedProps, ...value };
+        }
+    });
+    return resolvedProps;
 };
-const Carousel = (props) => {
-    const { children, orientation = 'horizontal', height = 200, w = 300, showDots = true, showArrows = true, loop = true, autoPlay = false, autoPlayInterval = 3000, itemsPerPage = 1, slideSize, slideGap, itemGap = 16, onSlideChange, style, itemStyle, arrowSize = 'md', dotSize = 'md', // currently uniform size; active expands
+const Carousel = (incomingProps) => {
+    const { breakpoint, width: viewportWidth } = useOptimizedBreakpoint();
+    const mergedProps = useMemo(() => mergeBreakpointProps(incomingProps, incomingProps.breakpoints, viewportWidth), [incomingProps, viewportWidth]);
+    const { children, orientation = 'horizontal', height = 200, showDots = true, showArrows = true, loop = true, autoPlay = false, autoPlayInterval = 3000, itemsPerPage = 1, slidesToScroll, slideSize, slideGap, itemGap = 16, containScroll = 'trimSnaps', startIndex, align = 'start', dragFree = false, skipSnaps = true, dragThreshold, duration, breakpoints: _breakpoints, onSlideChange, style, itemStyle, arrowSize = 'md', dotSize = 'md', // currently uniform size; active expands
     snapToItem = true, // kept for API parity (engine handles snapping)
     windowSize = 0, // 0 means no virtualization
-    reducedMotion = false, ...rest } = props;
+    reducedMotion = false, ...rest } = mergedProps;
     const { spacingProps, otherProps } = extractSpacingProps(rest);
     const spacingStyles = getSpacingStyles(spacingProps);
     const theme = useTheme();
@@ -37488,10 +37610,9 @@ const Carousel = (props) => {
     // progress holds absolute item progress (fractional, not modulo) supplied by engine
     const progress = useSharedValue(0);
     const [currentIndex, setCurrentIndex] = useState(0);
+    const hasInitializedRef = useRef(false);
     const itemsArray = useMemo(() => React__default.Children.toArray(children), [children]);
     const totalItems = itemsArray.length;
-    // Use optimized breakpoint detection with debouncing
-    const breakpoint = useOptimizedBreakpoint();
     const resolvedGap = useMemo(() => {
         const raw = resolveResponsive(slideGap, breakpoint);
         if (raw == null)
@@ -37506,7 +37627,7 @@ const Carousel = (props) => {
     }, [slideGap, breakpoint, itemGap]);
     const isVertical = orientation === 'vertical';
     const containerSize = isVertical ? containerHeight : containerWidth;
-    const itemSize = useMemo(() => {
+    const desiredItemSize = useMemo(() => {
         if (containerSize <= 0)
             return 0;
         const rawSize = resolveResponsive(slideSize, breakpoint);
@@ -37532,28 +37653,166 @@ const Carousel = (props) => {
         }
         return (containerSize - resolvedGap * (itemsPerPage - 1)) / itemsPerPage;
     }, [slideSize, breakpoint, containerSize, itemsPerPage, resolvedGap]);
+    const hasLayout = isVertical ? containerHeight > 0 : containerWidth > 0;
+    const baseItemsPerPage = Math.max(1, itemsPerPage);
+    const slidesToScrollValue = Math.max(1, slidesToScroll !== null && slidesToScroll !== void 0 ? slidesToScroll : baseItemsPerPage);
+    const containMode = containScroll === false
+        ? 'none'
+        : containScroll === 'keepSnaps'
+            ? 'keepSnaps'
+            : 'trimSnaps';
+    const isDragFree = !!dragFree;
+    const allowSkipSnaps = skipSnaps !== null && skipSnaps !== void 0 ? skipSnaps : true;
+    const dragThresholdValue = typeof dragThreshold === 'number'
+        ? Math.max(dragThreshold, 0)
+        : undefined;
+    const visibleSlides = useMemo(() => {
+        if (!hasLayout || containerSize <= 0)
+            return baseItemsPerPage;
+        if (desiredItemSize <= 0)
+            return baseItemsPerPage;
+        const maxFit = Math.max(1, Math.floor((containerSize + resolvedGap) / (desiredItemSize + resolvedGap)));
+        if (slideSize == null) {
+            return Math.min(baseItemsPerPage, maxFit);
+        }
+        return maxFit;
+    }, [hasLayout, containerSize, desiredItemSize, resolvedGap, baseItemsPerPage, slideSize]);
+    const cardSize = useMemo(() => {
+        if (!hasLayout)
+            return desiredItemSize;
+        if (visibleSlides <= 1) {
+            if (desiredItemSize > 0)
+                return desiredItemSize;
+            return containerSize > 0 ? containerSize : desiredItemSize;
+        }
+        const totalGap = resolvedGap * (visibleSlides - 1);
+        const available = Math.max(containerSize - totalGap, 0);
+        return available / visibleSlides;
+    }, [hasLayout, desiredItemSize, visibleSlides, resolvedGap, containerSize]);
+    const slideExtent = useMemo(() => {
+        if (!hasLayout || cardSize <= 0)
+            return undefined;
+        return cardSize + resolvedGap;
+    }, [hasLayout, cardSize, resolvedGap]);
+    const scrollStep = useMemo(() => {
+        if (totalItems === 0)
+            return slidesToScrollValue;
+        return Math.min(slidesToScrollValue, Math.max(1, totalItems));
+    }, [slidesToScrollValue, totalItems]);
+    const maxScrollDistancePerSwipe = useMemo(() => {
+        if (allowSkipSnaps || slideExtent == null)
+            return undefined;
+        return slideExtent * scrollStep;
+    }, [allowSkipSnaps, slideExtent, scrollStep]);
+    const lastStart = useMemo(() => Math.max(totalItems - visibleSlides, 0), [totalItems, visibleSlides]);
+    const pageStartIndices = useMemo(() => {
+        if (totalItems === 0)
+            return [];
+        if (loop) {
+            const count = Math.max(1, Math.ceil(totalItems / scrollStep));
+            return Array.from({ length: count }, (_, idx) => (idx * scrollStep) % totalItems);
+        }
+        const starts = [];
+        const seen = new Set();
+        const limit = containMode === 'none' ? Math.max(totalItems - 1, 0) : lastStart;
+        const addStart = (value) => {
+            if (!seen.has(value)) {
+                seen.add(value);
+                starts.push(Math.max(0, value));
+            }
+        };
+        for (let start = 0; start <= limit; start += scrollStep) {
+            const value = containMode === 'trimSnaps'
+                ? Math.min(start, lastStart)
+                : start;
+            addStart(value);
+        }
+        if (containMode !== 'trimSnaps') {
+            addStart(lastStart);
+        }
+        starts.sort((a, b) => a - b);
+        return starts;
+    }, [totalItems, loop, scrollStep, containMode, lastStart]);
+    const pagedItems = useMemo(() => {
+        if (!totalItems)
+            return [];
+        return pageStartIndices.map(start => {
+            const group = [];
+            for (let offset = 0; offset < visibleSlides; offset++) {
+                const targetIndex = start + offset;
+                if (loop) {
+                    const normalized = ((targetIndex % totalItems) + totalItems) % totalItems;
+                    group.push(itemsArray[normalized]);
+                }
+                else if (targetIndex < totalItems) {
+                    group.push(itemsArray[targetIndex]);
+                }
+            }
+            return group;
+        });
+    }, [pageStartIndices, visibleSlides, loop, totalItems, itemsArray]);
+    const totalPages = pagedItems.length;
+    const normalizedStartIndex = useMemo(() => {
+        if (!totalItems)
+            return 0;
+        const rawIndex = startIndex !== null && startIndex !== void 0 ? startIndex : 0;
+        if (loop) {
+            return ((rawIndex % totalItems) + totalItems) % totalItems;
+        }
+        return Math.max(0, Math.min(rawIndex, Math.max(totalItems - 1, 0)));
+    }, [startIndex, totalItems, loop]);
+    const initialPageStart = useMemo(() => {
+        if (!totalItems)
+            return 0;
+        const base = Math.floor(normalizedStartIndex / scrollStep) * scrollStep;
+        if (loop) {
+            return totalItems ? base % totalItems : 0;
+        }
+        if (containMode === 'none') {
+            return Math.min(base, Math.max(totalItems - 1, 0));
+        }
+        if (containMode === 'keepSnaps') {
+            return Math.min(base, Math.max(totalItems - 1, 0));
+        }
+        return Math.min(base, lastStart);
+    }, [normalizedStartIndex, scrollStep, loop, totalItems, containMode, lastStart]);
+    const initialPageIndex = useMemo(() => {
+        if (!pageStartIndices.length)
+            return 0;
+        const idx = pageStartIndices.indexOf(initialPageStart);
+        return idx >= 0 ? idx : 0;
+    }, [pageStartIndices, initialPageStart]);
     const handleLayout = useCallback((e) => {
         setContainerWidth(e.nativeEvent.layout.width);
         setContainerHeight(e.nativeEvent.layout.height);
     }, []);
-    const goTo = useCallback((index) => {
-        if (!carouselRef.current)
+    const scrollToPage = useCallback((index, animated = true) => {
+        if (!carouselRef.current || totalPages === 0)
             return;
-        if (totalItems === 0)
-            return;
-        const clamped = ((index % totalItems) + totalItems) % totalItems;
+        const clamped = ((index % totalPages) + totalPages) % totalPages;
         const delta = clamped - currentIndex;
-        if (delta === 0)
+        if (delta === 0) {
+            if (!animated) {
+                progress.value = clamped;
+                setCurrentIndex(clamped);
+            }
             return;
-        // For looping choose shortest path if loop enabled
+        }
         let count = delta;
         if (loop) {
-            const alt = delta > 0 ? delta - totalItems : delta + totalItems;
+            const alt = delta > 0 ? delta - totalPages : delta + totalPages;
             if (Math.abs(alt) < Math.abs(count))
                 count = alt;
         }
-        carouselRef.current.scrollTo({ count, animated: true });
-    }, [carouselRef, totalItems, currentIndex, loop]);
+        carouselRef.current.scrollTo({ count, animated });
+        if (!animated) {
+            progress.value = clamped;
+            setCurrentIndex(clamped);
+        }
+    }, [carouselRef, totalPages, currentIndex, loop, progress]);
+    const goTo = useCallback((index) => {
+        scrollToPage(index, true);
+    }, [scrollToPage]);
     const goPrev = useCallback(() => {
         if (!carouselRef.current)
             return;
@@ -37564,13 +37823,22 @@ const Carousel = (props) => {
             return;
         carouselRef.current.next();
     }, []);
-    const totalPages = useMemo(() => totalItems, [totalItems]);
     // Page progress derived directly from absolute item progress
     const pageProgress = useDerivedValue(() => {
         return progress.value;
     }, []);
     const arrowMetrics = useMemo(() => resolveCarouselArrowMetrics(arrowSize), [arrowSize]);
     const dotMetrics = useMemo(() => resolveCarouselDotMetrics(dotSize), [dotSize]);
+    const alignJustify = useMemo(() => {
+        switch (align) {
+            case 'center':
+                return 'center';
+            case 'end':
+                return 'flex-end';
+            default:
+                return 'flex-start';
+        }
+    }, [align]);
     // Memoized render functions to prevent unnecessary re-renders
     const renderDots = useMemo(() => {
         if (!showDots || totalPages <= 1)
@@ -37586,7 +37854,7 @@ const Carousel = (props) => {
     }, [showDots, totalPages, pageProgress, dotMetrics, loop, theme, goTo, isVertical, isRTL]);
     // Arrows
     const renderArrows = () => {
-        if (!showArrows || totalItems <= 1)
+        if (!showArrows || totalPages <= 1)
             return null;
         const buttonSize = arrowMetrics.buttonSizeToken;
         const iconSize = arrowMetrics.iconSize;
@@ -37623,37 +37891,69 @@ const Carousel = (props) => {
                     }, children: jsx(Button, { size: buttonSize, variant: "secondary", icon: jsx(Icon, { name: isRTL ? 'chevron-left' : 'chevron-right', size: iconSize }), onPress: goNext, radius: "full" }) })] }));
     };
     // Autoplay: if library autoPlay not sufficient for pause logic, we can just pass through for now.
-    const enableAutoPlay = autoPlay && totalItems > 1;
+    const enableAutoPlay = autoPlay && totalPages > 1;
+    useEffect(() => {
+        if (!carouselRef.current || totalPages === 0 || !hasLayout)
+            return;
+        const controlledStart = startIndex != null;
+        if (controlledStart) {
+            scrollToPage(initialPageIndex, false);
+            return;
+        }
+        if (!hasInitializedRef.current) {
+            scrollToPage(initialPageIndex, false);
+            hasInitializedRef.current = true;
+        }
+    }, [scrollToPage, initialPageIndex, startIndex, totalPages, hasLayout]);
     return (jsxs(View, { ref: containerRef, style: [
             {
+                width: '100%',
                 position: 'relative',
                 ...(isVertical ? { flexDirection: 'row' } : {})
             },
             spacingStyles,
             style
-        ], onLayout: handleLayout, ...otherProps, children: [jsx(View, { style: { flex: 1 }, children: itemSize > 0 && (jsx(ReanimatedCarousel, { ref: carouselRef, width: isVertical ? containerWidth : itemSize, height: isVertical ? itemSize : height, style: isVertical ? { height: containerHeight } : { width: containerWidth }, vertical: isVertical, loop: loop, autoPlay: enableAutoPlay, autoPlayInterval: autoPlayInterval, data: itemsArray, pagingEnabled: snapToItem, windowSize: windowSize > 0 ? windowSize : undefined, 
+        ], onLayout: handleLayout, ...otherProps, children: [jsx(View, { style: { flex: 1 }, children: hasLayout && pagedItems.length > 0 && cardSize > 0 && (jsx(ReanimatedCarousel, { ref: carouselRef, width: isVertical ? containerWidth : containerWidth, height: isVertical ? containerHeight : height, style: isVertical ? { height: containerHeight } : { width: containerWidth }, vertical: isVertical, loop: loop, autoPlay: enableAutoPlay, autoPlayInterval: autoPlayInterval, data: pagedItems, pagingEnabled: isDragFree ? false : snapToItem, snapEnabled: isDragFree ? false : undefined, windowSize: windowSize > 0 ? windowSize : undefined, scrollAnimationDuration: duration, 
                     // Performance optimizations
                     overscrollEnabled: false, enabled: !reducedMotion, withAnimation: reducedMotion ?
                         { type: 'timing', config: { duration: 100 } } :
-                        { type: 'spring', config: { damping: 60, stiffness: 150 } }, onProgressChange: (offset, absolute) => {
+                        { type: 'spring', config: { damping: 60, stiffness: 150 } }, maxScrollDistancePerSwipe: maxScrollDistancePerSwipe, minScrollDistancePerSwipe: dragThresholdValue, onProgressChange: (offset, absolute) => {
                         // absolute may be undefined in some versions; fallback to offset
                         const val = typeof absolute === 'number' ? absolute : offset;
                         progress.value = val;
-                        const ci = ((Math.round(val) % totalItems) + totalItems) % totalItems;
+                        const ci = totalPages > 0
+                            ? ((Math.round(val) % totalPages) + totalPages) % totalPages
+                            : 0;
                         if (ci !== currentIndex) {
                             setCurrentIndex(ci);
                             onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(ci);
                         }
-                    }, renderItem: ({ item, index }) => (jsx(View, { style: [
-                            {
-                                width: isVertical ? containerWidth : itemSize,
-                                height: isVertical ? itemSize : height,
-                                ...(isVertical
-                                    ? { marginBottom: index < itemsArray.length - 1 ? resolvedGap : 0 }
-                                    : { marginRight: index < itemsArray.length - 1 ? resolvedGap : 0 }),
-                            },
-                            itemStyle,
-                        ], accessibilityLabel: `Carousel item ${index + 1} of ${totalItems}`, children: item })) })) }), renderArrows(), renderDots] }));
+                    }, renderItem: ({ item, index }) => {
+                        const pageItems = Array.isArray(item) ? item : [item];
+                        const pageWidth = isVertical ? containerWidth : containerWidth;
+                        const pageHeight = isVertical ? containerHeight : height;
+                        const justify = containMode === 'trimSnaps' ? 'flex-start' : alignJustify;
+                        return (jsx(View, { style: [
+                                {
+                                    width: pageWidth,
+                                    height: pageHeight,
+                                    justifyContent: 'center',
+                                },
+                                itemStyle,
+                            ], accessibilityLabel: `Carousel item ${index + 1} of ${totalPages}`, children: jsx(View, { style: {
+                                    flexDirection: isVertical ? 'column' : 'row',
+                                    alignItems: 'stretch',
+                                    justifyContent: justify,
+                                    flexWrap: 'nowrap',
+                                    flex: 1,
+                                }, children: pageItems.map((child, childIndex) => (jsx(View, { style: {
+                                        width: isVertical ? '100%' : cardSize,
+                                        height: isVertical ? cardSize : '100%',
+                                        marginRight: !isVertical && childIndex < pageItems.length - 1 ? resolvedGap : 0,
+                                        marginBottom: isVertical && childIndex < pageItems.length - 1 ? resolvedGap : 0,
+                                        flexShrink: 0,
+                                    }, children: child }, childIndex))) }) }));
+                    } })) }), renderArrows(), renderDots] }));
 };
 
 // Types extracted to types.ts