@storybook/addon-ondevice-controls 10.0.1 → 10.0.2-alpha.0

package/dist/components/ModalPortal.d.ts

@@ -0,0 +1,4 @@
+import { ModalProps } from 'react-native';
+export declare const ModalPortal: ({ children, visible, usePortal, ...props }: ModalProps & {
+    usePortal?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ModalPortal.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalPortal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const portal_1 = require("@gorhom/portal");
+const react_native_1 = require("react-native");
+const modalSupported = react_native_1.Platform.OS !== 'macos';
+const ModalPortal = ({ children, visible, usePortal, ...props }) => {
+    if (modalSupported && !usePortal) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: visible, ...props, children: children }));
+    }
+    if (!visible)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(portal_1.Portal, { hostName: "storybook-lite-ui-root", children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1, position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }, children: children }) }));
+};
+exports.ModalPortal = ModalPortal;

package/dist/components/SelectModal.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// NOTE This is adapted from react-native-modal-selector https://github.com/peacechen/react-native-modal-selector/blob/master/index.js
 const react_1 = require("react");
 const react_native_1 = require("react-native");
+const ModalPortal_1 = require("./ModalPortal");
 const PADDING = 8;
 const BORDER_RADIUS = 5;
 const FONT_SIZE = 16;
@@ -120,7 +120,6 @@ const SelectModal = ({ data = [], onChange, onModalOpen, onModalClose, keyExtrac
         const initialItem = data.find((item) => String(keyExtractor(item)) === String(initValue));
         return initialItem ? [initialItem] : [];
     });
-    const modalRef = (0, react_1.useRef)(null);
     const selectedItemsMap = (0, react_1.useMemo)(() => {
         if (multiselect) {
             return (selectedItems || []).reduce((acc, item) => {
@@ -290,7 +289,7 @@ const SelectModal = ({ data = [], onChange, onModalOpen, onModalClose, keyExtrac
         selectStyleProp,
         selectTextPassThruProps,
     ]);
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style, ...passThruProps, children: [(0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, ref: modalRef, supportedOrientations: supportedOrientations, visible: modalVisible, onRequestClose: close, animationType: animationType, onDismiss: () => selectedItems.length > 0 && onChange?.(selectedItems), children: renderOptionList() }), customSelector || ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { hitSlop: modalOpenerHitSlop, activeOpacity: touchableActiveOpacity, style: touchableStyle, onPress: open, onLongPress: handleLongPress, disabled: disabled, accessible: openButtonContainerAccessible, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: childrenContainerStyle, pointerEvents: "none", children: renderChildren() }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style, ...passThruProps, children: [(0, jsx_runtime_1.jsx)(ModalPortal_1.ModalPortal, { transparent: true, supportedOrientations: supportedOrientations, visible: modalVisible, onRequestClose: close, animationType: animationType, onDismiss: () => selectedItems.length > 0 && onChange?.(selectedItems), children: renderOptionList() }), customSelector || ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { hitSlop: modalOpenerHitSlop, activeOpacity: touchableActiveOpacity, style: touchableStyle, onPress: open, onLongPress: handleLongPress, disabled: disabled, accessible: openButtonContainerAccessible, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: childrenContainerStyle, pointerEvents: "none", children: renderChildren() }) }))] }));
 };
 exports.SelectModal = SelectModal;
 exports.default = exports.SelectModal;

package/dist/components/Slider.d.ts

@@ -0,0 +1,12 @@
+interface SliderProps {
+    minimumValue?: number;
+    maximumValue?: number;
+    step?: number;
+    value?: number;
+    onValueChange?: (value: number) => void;
+    onSlidingComplete?: (value: number) => void;
+    disabled?: boolean;
+    style?: any;
+}
+declare const Slider: ({ minimumValue, maximumValue, step, value, onValueChange, onSlidingComplete, disabled, style, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export default Slider;

package/dist/components/Slider.js

@@ -0,0 +1,207 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_theming_1 = require("@storybook/react-native-theming");
+const THUMB_SIZE = 32;
+const THUMB_RADIUS = THUMB_SIZE / 2;
+const THUMB_HIT_SLOP = THUMB_SIZE;
+const SliderContainer = react_native_theming_1.styled.View({
+    height: 48,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+});
+const Track = react_native_theming_1.styled.View(({ theme }) => ({
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: theme.appBorderColor,
+    position: 'relative',
+    width: '100%',
+}));
+const Fill = react_native_theming_1.styled.View(({ theme }) => ({
+    position: 'absolute',
+    top: 0,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: theme.color.positive,
+}));
+const Thumb = react_native_theming_1.styled.View(({ theme }) => ({
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: THUMB_RADIUS,
+    backgroundColor: theme.color.positive,
+    borderWidth: 2,
+    borderColor: theme.background.content,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+}));
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+const Slider = ({ minimumValue = 0, maximumValue = 1, step, value = minimumValue, onValueChange, onSlidingComplete, disabled = false, style, }) => {
+    const isRTL = react_native_1.I18nManager.isRTL;
+    const initialValueRef = (0, react_1.useRef)(value ?? minimumValue);
+    const [trackWidth, setTrackWidth] = (0, react_1.useState)(0);
+    const [displayValue, setDisplayValue] = (0, react_1.useState)(initialValueRef.current);
+    const translateX = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const currentTranslateRef = (0, react_1.useRef)(0);
+    const startTranslateRef = (0, react_1.useRef)(0);
+    const isDraggingRef = (0, react_1.useRef)(false);
+    const range = maximumValue - minimumValue || 1;
+    const clampValue = (0, react_1.useCallback)((raw) => {
+        let clampedValue = clamp(raw, minimumValue, maximumValue);
+        if (step && step > 0) {
+            const steps = Math.round((clampedValue - minimumValue) / step);
+            clampedValue = minimumValue + steps * step;
+            clampedValue = clamp(clampedValue, minimumValue, maximumValue);
+        }
+        return clampedValue;
+    }, [minimumValue, maximumValue, step]);
+    const valueToTranslate = (0, react_1.useCallback)((val, width) => {
+        if (width <= 0)
+            return 0;
+        const clampedValue = clampValue(val);
+        const ratio = (clampedValue - minimumValue) / range;
+        const normalized = isRTL ? 1 - ratio : ratio;
+        return normalized * width;
+    }, [clampValue, minimumValue, range, isRTL]);
+    const translateToValue = (0, react_1.useCallback)((translate, width) => {
+        if (width <= 0)
+            return clampValue(minimumValue);
+        const ratio = clamp(translate / width, 0, 1);
+        const normalized = isRTL ? 1 - ratio : ratio;
+        const raw = minimumValue + normalized * range;
+        return clampValue(raw);
+    }, [clampValue, minimumValue, range, isRTL]);
+    const clampTranslate = (0, react_1.useCallback)((translate, width) => clamp(translate, 0, width), []);
+    const updateFromTranslate = (0, react_1.useCallback)((nextTranslate, width, notify) => {
+        const clampedTranslate = clampTranslate(nextTranslate, width);
+        const snappedValue = translateToValue(clampedTranslate, width);
+        const snappedTranslate = valueToTranslate(snappedValue, width);
+        translateX.setValue(snappedTranslate);
+        currentTranslateRef.current = snappedTranslate;
+        setDisplayValue(snappedValue);
+        if (notify) {
+            onValueChange?.(snappedValue);
+        }
+    }, [clampTranslate, translateToValue, valueToTranslate, translateX, onValueChange]);
+    // Sync with external value when not dragging
+    (0, react_1.useEffect)(() => {
+        if (isDraggingRef.current)
+            return;
+        const clamped = clampValue(value ?? minimumValue);
+        setDisplayValue(clamped);
+        if (trackWidth > 0) {
+            const translate = valueToTranslate(clamped, trackWidth);
+            translateX.setValue(translate);
+            currentTranslateRef.current = translate;
+        }
+    }, [value, trackWidth, clampValue, valueToTranslate, translateX, minimumValue]);
+    const handlePanMove = (0, react_1.useCallback)((gestureState, width) => {
+        const delta = isRTL ? -gestureState.dx : gestureState.dx;
+        const nextTranslate = startTranslateRef.current + delta;
+        updateFromTranslate(nextTranslate, width, true);
+    }, [updateFromTranslate, isRTL]);
+    const handlePanEnd = (0, react_1.useCallback)((width, shouldNotifyComplete) => {
+        isDraggingRef.current = false;
+        const snappedValue = translateToValue(currentTranslateRef.current, width);
+        const snappedTranslate = valueToTranslate(snappedValue, width);
+        translateX.setValue(snappedTranslate);
+        currentTranslateRef.current = snappedTranslate;
+        setDisplayValue(snappedValue);
+        if (shouldNotifyComplete) {
+            onValueChange?.(snappedValue);
+            onSlidingComplete?.(snappedValue);
+        }
+    }, [translateToValue, valueToTranslate, translateX, onValueChange, onSlidingComplete]);
+    const panResponder = (0, react_1.useMemo)(() => react_native_1.PanResponder.create({
+        onStartShouldSetPanResponder: () => !disabled,
+        onMoveShouldSetPanResponder: () => !disabled,
+        onStartShouldSetPanResponderCapture: () => !disabled,
+        onMoveShouldSetPanResponderCapture: () => !disabled,
+        onPanResponderGrant: (evt) => {
+            if (disabled || trackWidth <= 0)
+                return;
+            isDraggingRef.current = true;
+            const rawTouchX = evt.nativeEvent.locationX - THUMB_RADIUS;
+            const clampedTouch = clamp(rawTouchX, 0, trackWidth);
+            const proposedTranslate = isRTL ? trackWidth - clampedTouch : clampedTouch;
+            const currentTranslate = currentTranslateRef.current;
+            const distanceFromThumb = Math.abs(proposedTranslate - currentTranslate);
+            if (distanceFromThumb <= THUMB_HIT_SLOP) {
+                // Treat as grabbing the existing thumb position — don't jump.
+                startTranslateRef.current = currentTranslate;
+                const currentValue = translateToValue(currentTranslate, trackWidth);
+                setDisplayValue(currentValue);
+                onValueChange?.(currentValue);
+            }
+            else {
+                // Treat as tap on track: jump to that location before dragging.
+                updateFromTranslate(proposedTranslate, trackWidth, true);
+                startTranslateRef.current = currentTranslateRef.current;
+            }
+        },
+        onPanResponderMove: (_evt, gestureState) => {
+            if (disabled || trackWidth <= 0)
+                return;
+            handlePanMove(gestureState, trackWidth);
+        },
+        onPanResponderRelease: () => {
+            if (trackWidth <= 0)
+                return;
+            handlePanEnd(trackWidth, true);
+        },
+        onPanResponderTerminationRequest: () => false,
+        onPanResponderTerminate: () => {
+            if (trackWidth <= 0)
+                return;
+            handlePanEnd(trackWidth, true);
+        },
+    }), [
+        disabled,
+        trackWidth,
+        handlePanMove,
+        handlePanEnd,
+        updateFromTranslate,
+        translateToValue,
+        onValueChange,
+        isRTL,
+    ]);
+    const handleTrackLayout = (event) => {
+        const { width } = event.nativeEvent.layout;
+        const usableWidth = Math.max(width - THUMB_RADIUS * 2, 0);
+        setTrackWidth(usableWidth);
+        if (usableWidth > 0) {
+            const translate = valueToTranslate(displayValue, usableWidth);
+            translateX.setValue(translate);
+            currentTranslateRef.current = translate;
+        }
+    };
+    const fillWidth = trackWidth > 0 ? ((displayValue - minimumValue) / range) * trackWidth : 0;
+    const fillStyle = isRTL
+        ? [styles.fillBase, { right: 0, width: fillWidth }]
+        : [styles.fillBase, { left: 0, width: fillWidth }];
+    return ((0, jsx_runtime_1.jsx)(SliderContainer, { style: style, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.touchArea, onLayout: handleTrackLayout, ...panResponder.panHandlers, collapsable: false, children: (0, jsx_runtime_1.jsxs)(Track, { children: [(0, jsx_runtime_1.jsx)(Fill, { style: fillStyle }), (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [styles.thumbWrapper, { transform: [{ translateX }] }], pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(Thumb, {}) })] }) }) }));
+};
+const styles = react_native_1.StyleSheet.create({
+    touchArea: {
+        height: 48,
+        justifyContent: 'center',
+        width: '100%',
+        paddingHorizontal: THUMB_RADIUS,
+    },
+    thumbWrapper: {
+        position: 'absolute',
+        top: -THUMB_RADIUS,
+        left: -THUMB_RADIUS,
+    },
+    fillBase: {
+        position: 'absolute',
+        top: 0,
+        height: 4,
+        borderRadius: 2,
+    },
+});
+exports.default = Slider;

package/dist/components/SliderWrapper.d.ts

@@ -0,0 +1,13 @@
+interface SliderWrapperProps {
+    minimumValue?: number;
+    maximumValue?: number;
+    step?: number;
+    value?: number;
+    onValueChange?: (value: number) => void;
+    onSlidingComplete?: (value: number) => void;
+    disabled?: boolean;
+    style?: any;
+    useBuiltInSlider?: boolean;
+}
+declare const SliderWrapper: ({ useBuiltInSlider, ...props }: SliderWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export default SliderWrapper;

package/dist/components/SliderWrapper.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Slider_1 = __importDefault(require("./Slider"));
+const react_native_1 = require("react-native");
+let Slider = null;
+try {
+    Slider = require('@react-native-community/slider').default;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+}
+catch (error) { }
+const supportedPlatforms = ['android', 'ios', 'windows', 'web'];
+const nativeSliderSupported = supportedPlatforms.includes(react_native_1.Platform.OS);
+const SliderWrapper = ({ useBuiltInSlider = false, ...props }) => {
+    if (!nativeSliderSupported || useBuiltInSlider || Slider === null) {
+        return (0, jsx_runtime_1.jsx)(Slider_1.default, { ...props });
+    }
+    return (0, jsx_runtime_1.jsx)(Slider, { ...props });
+};
+exports.default = SliderWrapper;

package/dist/components/color-picker/HoloColorPicker.js

@@ -5,11 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HoloColorPicker = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const slider_1 = __importDefault(require("@react-native-community/slider"));
 const react_1 = require("react");
 const react_native_1 = require("react-native");
 const tinycolor2_1 = __importDefault(require("tinycolor2"));
 const utils_1 = require("./utils");
+const SliderWrapper_1 = __importDefault(require("../SliderWrapper"));
 class HoloColorPicker extends react_1.PureComponent {
     _layout;
     _pageX;
@@ -128,7 +128,7 @@ class HoloColorPicker extends react_1.PureComponent {
             angle,
             isRTL: this._isRTL,
         });
-        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { onLayout: this._onLayout, ref: this.pickerContainer, style: styles.pickerContainer, children: !pickerSize ? null : ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { ...this._pickerResponder.panHandlers, style: [computed.picker], collapsable: false, children: [(0, jsx_runtime_1.jsx)(react_native_1.Image, { source: require('./resources/color-circle.png'), resizeMode: "contain", style: [styles.pickerImage] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.pickerIndicator, computed.pickerIndicator] })] }), oldColor && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.selectedPreview, computed.selectedPreview], onPress: this._onColorSelected, activeOpacity: 0.7 })), oldColor && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.originalPreview, computed.originalPreview], onPress: this._onOldColorSelected, activeOpacity: 0.7 })), !oldColor && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.selectedFullPreview, computed.selectedFullPreview], onPress: this._onColorSelected, activeOpacity: 0.7 }))] })) }), this.props.hideSliders ? null : ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { paddingStart: 4, color: '#859499', fontSize: 12 }, children: "Saturation" }), (0, jsx_runtime_1.jsx)(slider_1.default, { value: s, onValueChange: this._onSValueChange }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { paddingStart: 4, color: '#859499', fontSize: 12 }, children: "Lightness" }), (0, jsx_runtime_1.jsx)(slider_1.default, { value: v, onValueChange: this._onVValueChange })] }))] }));
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { onLayout: this._onLayout, ref: this.pickerContainer, style: styles.pickerContainer, children: !pickerSize ? null : ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { ...this._pickerResponder.panHandlers, style: [computed.picker], collapsable: false, children: [(0, jsx_runtime_1.jsx)(react_native_1.Image, { source: require('./resources/color-circle.png'), resizeMode: "contain", style: [styles.pickerImage] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.pickerIndicator, computed.pickerIndicator] })] }), oldColor && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.selectedPreview, computed.selectedPreview], onPress: this._onColorSelected, activeOpacity: 0.7 })), oldColor && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.originalPreview, computed.originalPreview], onPress: this._onOldColorSelected, activeOpacity: 0.7 })), !oldColor && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.selectedFullPreview, computed.selectedFullPreview], onPress: this._onColorSelected, activeOpacity: 0.7 }))] })) }), this.props.hideSliders ? null : ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { paddingStart: 4, color: '#859499', fontSize: 12 }, children: "Saturation" }), (0, jsx_runtime_1.jsx)(SliderWrapper_1.default, { value: s, onValueChange: this._onSValueChange }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { paddingStart: 4, color: '#859499', fontSize: 12 }, children: "Lightness" }), (0, jsx_runtime_1.jsx)(SliderWrapper_1.default, { value: v, onValueChange: this._onVValueChange })] }))] }));
     }
 }
 exports.HoloColorPicker = HoloColorPicker;

package/dist/types/Color.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const react_native_1 = require("react-native");
 const react_native_theming_1 = require("@storybook/react-native-theming");
 const color_picker_1 = require("../components/color-picker");
+const ModalPortal_1 = require("../components/ModalPortal");
 const TouchableContainer = react_native_theming_1.styled.View(({ theme }) => ({
     width: 40,
     height: 40,
@@ -63,7 +64,7 @@ const ColorType = ({ arg, onChange = (value) => value }) => {
                 backgroundColor: theme.background.content,
             } }));
     }
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(TouchableContainer, { children: (0, jsx_runtime_1.jsx)(Touchable, { color: arg.value, onPress: openColorPicker }) }), (0, jsx_runtime_1.jsxs)(react_native_1.Modal, { supportedOrientations: ['portrait', 'landscape'], transparent: true, visible: displayColorPicker, onRequestClose: closeColorPicker, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: closeColorPicker, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.modalOverlay }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.centerContainer, children: (0, jsx_runtime_1.jsxs)(InnerContainer, { pointerEvents: "box-none", children: [(0, jsx_runtime_1.jsx)(color_picker_1.ColorPicker, { onColorSelected: onChangeColor, onColorChange: (color) => setCurrentColor(color), defaultColor: arg.value, oldColor: arg.value, style: styles.picker }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.actionContainer, children: [(0, jsx_runtime_1.jsx)(ButtonTouchable, { onPress: closeColorPicker, children: (0, jsx_runtime_1.jsx)(ButtonText, { children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: 12 } }), (0, jsx_runtime_1.jsx)(ButtonTouchable, { primary: true, onPress: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(TouchableContainer, { children: (0, jsx_runtime_1.jsx)(Touchable, { color: arg.value, onPress: openColorPicker }) }), (0, jsx_runtime_1.jsxs)(ModalPortal_1.ModalPortal, { supportedOrientations: ['portrait', 'landscape'], transparent: true, visible: displayColorPicker, onRequestClose: closeColorPicker, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: closeColorPicker, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.modalOverlay }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.centerContainer, children: (0, jsx_runtime_1.jsxs)(InnerContainer, { pointerEvents: "box-none", children: [(0, jsx_runtime_1.jsx)(color_picker_1.ColorPicker, { onColorSelected: onChangeColor, onColorChange: (color) => setCurrentColor(color), defaultColor: arg.value, oldColor: arg.value, style: styles.picker }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.actionContainer, children: [(0, jsx_runtime_1.jsx)(ButtonTouchable, { onPress: closeColorPicker, children: (0, jsx_runtime_1.jsx)(ButtonText, { children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: 12 } }), (0, jsx_runtime_1.jsx)(ButtonTouchable, { primary: true, onPress: () => {
                                                 onChangeColor(currentColor);
                                                 closeColorPicker();
                                             }, children: (0, jsx_runtime_1.jsx)(ButtonText, { primary: true, children: "Select" }) })] })] }) })] })] }));

package/dist/types/Number.js

@@ -4,12 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const slider_1 = __importDefault(require("@react-native-community/slider"));
 const react_native_theming_1 = require("@storybook/react-native-theming");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
 const useResyncValue_1 = require("./useResyncValue");
 const common_1 = require("./common");
+const SliderWrapper_1 = __importDefault(require("../components/SliderWrapper"));
 const ValueContainer = react_native_theming_1.styled.View({ flexDirection: 'row' });
 const LabelText = react_native_theming_1.styled.Text(({ theme }) => ({
     color: theme.color.mediumdark,
@@ -60,7 +60,7 @@ const NumberType = ({ arg, isPristine, onChange = (value) => value }) => {
     };
     if (arg.range || arg.type === 'range') {
         const { min, max, step } = getRangeOptions(arg);
-        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(ValueContainer, { children: [(0, jsx_runtime_1.jsx)(LabelText, { children: "Value: " }), (0, jsx_runtime_1.jsx)(ValueText, { children: arg.value })] }), (0, jsx_runtime_1.jsx)(slider_1.default, { minimumValue: min, maximumValue: max, step: step, value: arg.value, onSlidingComplete: (val) => {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(ValueContainer, { children: [(0, jsx_runtime_1.jsx)(LabelText, { children: "Value: " }), (0, jsx_runtime_1.jsx)(ValueText, { children: arg.value })] }), (0, jsx_runtime_1.jsx)(SliderWrapper_1.default, { minimumValue: min, maximumValue: max, step: step, value: arg.value, onSlidingComplete: (val) => {
                         onChange(val);
                         setCurrentValue(val);
                     } })] }, key));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-controls",
-  "version": "10.0.1",
+  "version": "10.0.2-alpha.0",
   "description": "Display storybook controls on your device.",
   "keywords": [
     "addon",
@@ -30,8 +30,9 @@
     "copyimages": "cross-env-shell cp -r src/components/color-picker/resources dist/components/color-picker/resources"
   },
   "dependencies": {
-    "@storybook/react-native-theming": "^10.0.1",
-    "@storybook/react-native-ui-common": "^10.0.1",
+    "@gorhom/portal": "^1.0.14",
+    "@storybook/react-native-theming": "^10.0.2-alpha.0",
+    "@storybook/react-native-ui-common": "^10.0.2-alpha.0",
     "polished": "^4.3.1",
     "react-native-modal-datetime-picker": "^18.0.0",
     "tinycolor2": "^1.6.0"
@@ -56,5 +57,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7604d1c21f15767940d30d9c5dcf9da73d0a9fe7"
+  "gitHead": "f88cc47d0ddc9958f4a8b029f8366de9184bfc8e"
 }