@utilitywarehouse/hearth-react-native 0.1.0

package/build/components/Select/SelectOption.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, View } from 'react-native';
+import { useSelectContext } from './Select.context';
+import { BodyText } from '../BodyText';
+import { StyleSheet } from 'react-native-unistyles';
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { Icon } from '../Icon';
+const SelectOption = ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, }) => {
+    const { selectedValue, onValueChange, close } = useSelectContext();
+    const isSelected = selected !== undefined ? selected : selectedValue === value;
+    styles.useVariants({ disabled });
+    const handlePress = () => {
+        if (disabled)
+            return;
+        if (onPress) {
+            onPress(value);
+        }
+        else if (onValueChange) {
+            onValueChange(value);
+        }
+        if (close) {
+            close();
+        }
+    };
+    return (_jsxs(Pressable, { onPress: handlePress, disabled: disabled, style: ({ pressed }) => [styles.container, pressed && styles.pressed], children: [!!LeftIcon && (_jsx(View, { children: (() => {
+                    const IconAny = Icon;
+                    return _jsx(IconAny, { style: styles.icon, as: LeftIcon });
+                })() })), _jsx(View, { style: styles.labelContainer, children: _jsx(BodyText, { children: label }) }), isSelected && (_jsx(View, { children: _jsx(TickSmallIcon, { style: styles.icon }) })), !!RightIcon && !isSelected && (_jsx(View, { children: (() => {
+                    const IconAny = Icon;
+                    return _jsx(IconAny, { style: styles.icon, as: RightIcon });
+                })() }))] }));
+};
+const styles = StyleSheet.create(theme => ({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme.components.select.dropdown.item.gap,
+        borderRadius: theme.components.select.dropdown.item.borderRadius,
+        paddingVertical: theme.components.select.dropdown.item.padding,
+        paddingHorizontal: theme.components.select.dropdown.padding,
+        variants: {
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+        },
+        _web: {
+            _hover: {
+                backgroundColor: theme.components.select.dropdown.item.backgroundColorHover,
+            },
+        },
+    },
+    icon: {
+        color: theme.components.select.dropdown.item.foregroundColor,
+    },
+    pressed: {
+        backgroundColor: theme.components.select.dropdown.item.backgroundColorActive,
+    },
+    labelContainer: {
+        flex: 1,
+    },
+}));
+SelectOption.displayName = 'SelectOption';
+export default SelectOption;

package/build/components/Select/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Select } from './Select';
+export { default as SelectOption } from './SelectOption';
+export type { default as SelectProps, SelectOptionProps, SelectOptionItemProps, } from './Select.props';

package/build/components/Select/index.js

@@ -0,0 +1,2 @@
+export { default as Select } from './Select';
+export { default as SelectOption } from './SelectOption';

package/build/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,6 @@
+import type SkeletonProps from './Skeleton.props';
+declare const Skeleton: {
+    ({ width, height, backgroundColor: bg, borderRadius, style, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Skeleton;

package/build/components/Skeleton/Skeleton.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { getFlattenedColorValue } from '../../utils';
+import getStyleValue from '../../utils/getStyleValue';
+const Skeleton = ({ width, height, backgroundColor: bg, borderRadius, style, ...props }) => {
+    const opacity = useSharedValue(1);
+    const { components } = useTheme();
+    const backgroundColor = bg ?? components.skeleton.loadingColor;
+    const { color: themeColor, colorMode, borderRadius: themeBorderRadius } = useTheme();
+    const backgroundColorValue = useMemo(() => getFlattenedColorValue(backgroundColor, themeColor), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [backgroundColor, colorMode]);
+    const borderRadiusValue = useMemo(() => getStyleValue(borderRadius, themeBorderRadius), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [borderRadius]);
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            opacity: opacity.value,
+            width,
+            height,
+            ...(backgroundColorValue ? { backgroundColor: backgroundColorValue } : {}),
+            ...(borderRadiusValue ? { borderRadius: borderRadiusValue } : {}),
+        };
+    }, [opacity]);
+    React.useEffect(() => {
+        opacity.value = withRepeat(withTiming(0.5, {
+            duration: 1000,
+            easing: Easing.inOut(Easing.ease),
+        }), -1, true);
+    }, [opacity]);
+    return _jsx(Animated.View, { ...props, style: [styles.skeleton, style, animatedStyle] });
+};
+Skeleton.displayName = 'Skeleton';
+const styles = StyleSheet.create(theme => ({
+    skeleton: {
+        backgroundColor: theme.components.skeleton.loadingColor,
+        borderRadius: theme.borderRadius.xs,
+    },
+}));
+export default Skeleton;

package/build/components/Skeleton/Skeleton.props.d.ts

@@ -0,0 +1,9 @@
+import type { DimensionValue, ViewProps } from 'react-native';
+import type { ColorValue, BorderRadiusValue } from '../../types';
+interface SkeletonProps extends ViewProps {
+    width: DimensionValue;
+    height: DimensionValue;
+    backgroundColor?: ColorValue;
+    borderRadius?: BorderRadiusValue;
+}
+export default SkeletonProps;

package/build/components/Skeleton/Skeleton.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton';

package/build/components/Skeleton/index.js

@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton';

package/build/components/Spinner/Spinner.d.ts

@@ -0,0 +1,3 @@
+import type SpinnerProps from './Spinner.props';
+declare const Spinner: import("react").ComponentType<SpinnerProps>;
+export default Spinner;

package/build/components/Spinner/Spinner.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createSpinner } from '@gluestack-ui/spinner';
+import { useCallback, useEffect, useMemo } from 'react';
+import { View } from 'react-native';
+import Animated, { Easing, useAnimatedProps, useAnimatedStyle, useReducedMotion, useSharedValue, withRepeat, withSequence, withTiming, } from 'react-native-reanimated';
+import { Circle, G, Svg } from 'react-native-svg';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { getFlattenedColorValue } from '../../utils';
+const AnimatedSvg = Animated.createAnimatedComponent(Svg);
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const SpinnerRoot = ({ size = 'md', color, ...props }) => {
+    const { components } = useTheme();
+    const width = components.spinner[size].size;
+    const CIRCUMFERENCE = (width - 4) * Math.PI;
+    const R = CIRCUMFERENCE / (2 * Math.PI);
+    const STROKE_WIDTH = components.spinner[size].strokeWidth;
+    const HALF_CIRCLE = R + STROKE_WIDTH;
+    const DIAMETER = 2 * HALF_CIRCLE;
+    const isReducedMotion = useReducedMotion();
+    const progress = useSharedValue(1);
+    const rotation = useSharedValue(0);
+    const startAnimation = useCallback(() => {
+        if (isReducedMotion) {
+            progress.value = withTiming(0.75, { duration: 0 });
+            return;
+        }
+        progress.value = withRepeat(withTiming(0.6, { duration: 1000 }), -1, true);
+        progress.value = withRepeat(withSequence(withTiming(0.7, { duration: 800 }), withTiming(0.1, { duration: 2000 })), -1, true);
+        rotation.value = withRepeat(withTiming(360, { duration: 900, easing: Easing.linear }), -1, false);
+    }, [progress, rotation, isReducedMotion]);
+    useEffect(() => {
+        startAnimation();
+    }, [startAnimation]);
+    const animatedCircleProps = useAnimatedProps(() => {
+        return {
+            strokeDashoffset: CIRCUMFERENCE * (1 - progress.value),
+        };
+    }, [progress]);
+    const animatedSvgStyle = useAnimatedStyle(() => ({
+        transform: [
+            {
+                rotate: `${rotation.value}deg`,
+            },
+        ],
+    }), [rotation]);
+    const { color: themeColor, colorMode } = useTheme();
+    const colorValue = useMemo(() => getFlattenedColorValue(color, themeColor), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [color, colorMode, themeColor]);
+    const defaultColor = colorValue || components.spinner.defaultFill;
+    styles.useVariants({ size });
+    return (_jsx(View, { ...props, style: [styles.container, props.style], "aria-busy": true, "aria-live": "polite", role: "status", children: _jsx(AnimatedSvg, { width: width, height: width, viewBox: `0 0 ${DIAMETER} ${DIAMETER}`, style: animatedSvgStyle, color: defaultColor, children: _jsx(G, { origin: `${HALF_CIRCLE}, ${HALF_CIRCLE}`, rotation: -90, children: _jsx(AnimatedCircle, { fill: "transparent", stroke: "currentColor", strokeWidth: STROKE_WIDTH, cx: "50%", cy: "50%", r: R, strokeLinecap: "round", animatedProps: animatedCircleProps, strokeDasharray: CIRCUMFERENCE }) }) }) }));
+};
+SpinnerRoot.displayName = 'Spinner';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: theme.components.spinner.padding,
+        variants: {
+            size: {
+                xs: {
+                    width: theme.components.spinner.xs.size + theme.components.spinner.padding * 2,
+                    height: theme.components.spinner.xs.size + theme.components.spinner.padding * 2,
+                },
+                sm: {
+                    width: theme.components.spinner.sm.size + theme.components.spinner.padding * 2,
+                    height: theme.components.spinner.sm.size + theme.components.spinner.padding * 2,
+                },
+                md: {
+                    width: theme.components.spinner.md.size + theme.components.spinner.padding * 2,
+                    height: theme.components.spinner.md.size + theme.components.spinner.padding * 2,
+                },
+                lg: {
+                    width: theme.components.spinner.lg.size + theme.components.spinner.padding * 2,
+                    height: theme.components.spinner.lg.size + theme.components.spinner.padding * 2,
+                },
+            },
+        },
+    },
+}));
+const Spinner = createSpinner({ Root: SpinnerRoot });
+export default Spinner;

package/build/components/Spinner/Spinner.props.d.ts

@@ -0,0 +1,8 @@
+import { RefAttributes } from 'react';
+import { type ViewProps } from 'react-native';
+import { ColorValue } from '../../types';
+interface SpinnerProps extends ViewProps, RefAttributes<any> {
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    color?: ColorValue;
+}
+export default SpinnerProps;

package/build/components/Spinner/Spinner.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/Spinner/Spinner.web.d.ts

@@ -0,0 +1,3 @@
+import type SpinnerProps from './Spinner.props';
+declare const Spinner: import("react").ComponentType<SpinnerProps>;
+export default Spinner;

package/build/components/Spinner/Spinner.web.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useCallback, useEffect, useMemo } from 'react';
+import Animated, { useSharedValue, withTiming, useAnimatedProps, Easing, withSequence, withRepeat, useReducedMotion, } from 'react-native-reanimated';
+import { Circle, G, Svg } from 'react-native-svg';
+import { createSpinner } from '@gluestack-ui/spinner';
+import { StyleSheet } from 'react-native-unistyles';
+import { View } from 'react-native';
+import { useTheme } from '../../hooks';
+import { getFlattenedColorValue } from '../../utils';
+const AnimatedSvg = Animated.createAnimatedComponent(Svg);
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const SpinnerRoot = ({ size = 'md', color, ...props }) => {
+    const { components } = useTheme();
+    const width = components.spinner[size].size;
+    const CIRCUMFERENCE = (width - 4) * Math.PI;
+    const R = CIRCUMFERENCE / (2 * Math.PI);
+    const STROKE_WIDTH = components.spinner[size].strokeWidth;
+    const HALF_CIRCLE = R + STROKE_WIDTH;
+    const DIAMETER = 2 * HALF_CIRCLE;
+    const isReducedMotion = useReducedMotion();
+    const progress = useSharedValue(1);
+    const rotation = useSharedValue(0);
+    const startAnimation = useCallback(() => {
+        if (isReducedMotion) {
+            progress.value = withTiming(0.75, { duration: 0 });
+            return;
+        }
+        progress.value = withRepeat(withTiming(0.6, { duration: 1000 }), -1, true);
+        progress.value = withRepeat(withSequence(withTiming(0.7, { duration: 800 }), withTiming(0.1, { duration: 2000 })), -1, true);
+        rotation.value = withRepeat(withTiming(360, { duration: 900, easing: Easing.linear }), -1, false);
+    }, [progress, rotation]);
+    useEffect(() => {
+        startAnimation();
+    }, [startAnimation]);
+    const animatedCircleProps = useAnimatedProps(() => {
+        return {
+            strokeDashoffset: CIRCUMFERENCE * (1 - progress.value),
+        };
+    }, [progress]);
+    const animatedSvgProps = useAnimatedProps(() => {
+        return {
+            rotation: rotation.value,
+        };
+    }, [progress]);
+    const { color: themeColor, colorMode } = useTheme();
+    const colorValue = useMemo(() => getFlattenedColorValue(color, themeColor), [color, colorMode, themeColor]);
+    const defaultColor = colorValue || components.spinner.defaultFill;
+    styles.useVariants({ size });
+    return (_jsx(View, { ...props, style: [styles.container, props.style], "aria-busy": true, "aria-live": "polite", role: "status", children: _jsx(AnimatedSvg, { width: width, height: width, viewBox: `0 0 ${DIAMETER} ${DIAMETER}`, animatedProps: animatedSvgProps, color: defaultColor, children: _jsx(G, { origin: `${HALF_CIRCLE}, ${HALF_CIRCLE}`, rotation: -90, children: _jsx(AnimatedCircle, { fill: "transparent", stroke: "currentColor", strokeWidth: STROKE_WIDTH, cx: "50%", cy: "50%", r: R, strokeLinecap: "round", animatedProps: animatedCircleProps, strokeDasharray: CIRCUMFERENCE }) }) }) }));
+};
+const styles = StyleSheet.create(theme => ({
+    container: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: theme.components.spinner.padding,
+        variants: {
+            size: {
+                xs: {
+                    width: theme.components.spinner.xs.size + theme.components.spinner.padding * 2,
+                    height: theme.components.spinner.xs.size + theme.components.spinner.padding * 2,
+                },
+                sm: {
+                    width: theme.components.spinner.sm.size + theme.components.spinner.padding * 2,
+                    height: theme.components.spinner.sm.size + theme.components.spinner.padding * 2,
+                },
+                md: {
+                    width: theme.components.spinner.md.size + theme.components.spinner.padding * 2,
+                    height: theme.components.spinner.md.size + theme.components.spinner.padding * 2,
+                },
+                lg: {
+                    width: theme.components.spinner.lg.size + theme.components.spinner.padding * 2,
+                    height: theme.components.spinner.lg.size + theme.components.spinner.padding * 2,
+                },
+            },
+        },
+    },
+}));
+const Spinner = createSpinner({ Root: SpinnerRoot });
+export default Spinner;

package/build/components/Spinner/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Spinner } from './Spinner';
+export type { default as SpinnerProps } from './Spinner.props';

package/build/components/Spinner/index.js

@@ -0,0 +1 @@
+export { default as Spinner } from './Spinner';

package/build/components/Switch/Switch.d.ts

@@ -0,0 +1,3 @@
+import SwitchProps from './Switch.props';
+declare const CustomSwitch: ({ value, onValueChange, disabled, size, ...accessibilityProps }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export default CustomSwitch;

package/build/components/Switch/Switch.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CloseSmallIcon, TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useEffect } from 'react';
+import { Pressable } from 'react-native';
+import Animated, { Easing, interpolateColor, useAnimatedStyle, useReducedMotion, useSharedValue, withSpring, withTiming, } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { Icon } from '../Icon';
+const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = 'medium', ...accessibilityProps }) => {
+    const { components } = useTheme();
+    const SWITCH_WIDTH = size === 'medium' ? components.switch.md.width : components.switch.sm.width;
+    const THUMB_SIZE = size === 'medium' ? components.switch.md.circle.size : components.switch.sm.circle.size;
+    const PADDING = components.switch.padding;
+    const isReducedMotion = useReducedMotion();
+    styles.useVariants({ size, disabled, value });
+    const offset = useSharedValue(value ? SWITCH_WIDTH - THUMB_SIZE - PADDING * 2 : 0);
+    const progress = useSharedValue(value ? 1 : 0);
+    const animatedThumbStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: offset.value }],
+    }));
+    const animatedSwitchBackgroundStyle = useAnimatedStyle(() => {
+        const backgroundColor = interpolateColor(progress.value, [0, 1], [components.switch.unchecked.backgroundColor, components.switch.checked.backgroundColor]);
+        return { backgroundColor };
+    });
+    // Icon animations
+    const tickScale = useSharedValue(value ? 1 : 0);
+    const crossScale = useSharedValue(value ? 0 : 1);
+    const animatedTickStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: tickScale.value }],
+    }));
+    const animatedCrossStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: crossScale.value }],
+    }));
+    // Press feedback animation
+    const scale = useSharedValue(1);
+    const animatedSwitchStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: scale.value }],
+    }));
+    useEffect(() => {
+        const userConfig = {
+            duration: isReducedMotion ? 0 : 300,
+            easing: Easing.inOut(Easing.ease),
+        };
+        // Animate the thumb position
+        offset.value = withTiming(value ? SWITCH_WIDTH - THUMB_SIZE - PADDING * 2 : 0, userConfig);
+        // Animate the icons
+        tickScale.value = withTiming(value ? 1 : 0, userConfig);
+        crossScale.value = withTiming(value ? 0 : 1, userConfig);
+        // Animate the background color with ease-in-out easing
+        progress.value = withTiming(value ? 1 : 0, userConfig);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value, disabled]);
+    const toggleSwitch = () => {
+        if (disabled)
+            return;
+        onValueChange?.(!value);
+    };
+    const onPressIn = () => {
+        scale.value = withSpring(0.95);
+    };
+    const onPressOut = () => {
+        scale.value = withSpring(1);
+    };
+    return (_jsx(Pressable, { onPress: toggleSwitch, onPressIn: onPressIn, onPressOut: onPressOut, disabled: disabled, "aria-checked": value, accessibilityRole: "switch", accessibilityState: { checked: value, disabled }, accessibilityLabel: accessibilityProps.accessibilityLabel, accessibilityHint: accessibilityProps.accessibilityHint, ...accessibilityProps, children: _jsx(Animated.View, { style: [styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle], children: _jsxs(Animated.View, { style: [styles.thumb, animatedThumbStyle], children: [_jsx(Animated.View, { style: [styles.iconWrap, animatedTickStyle], children: (() => {
+                            const IconAny = Icon;
+                            return _jsx(IconAny, { as: TickSmallIcon, style: styles.icon });
+                        })() }), _jsx(Animated.View, { style: [styles.iconWrap, animatedCrossStyle], children: (() => {
+                            const IconAny = Icon;
+                            return _jsx(IconAny, { as: CloseSmallIcon, style: styles.icon });
+                        })() })] }) }) }));
+};
+const styles = StyleSheet.create(theme => ({
+    switch: {
+        justifyContent: 'center',
+        variants: {
+            size: {
+                medium: {
+                    width: theme.components.switch.md.width,
+                    height: theme.components.switch.md.height,
+                    borderRadius: theme.components.switch.radius,
+                    padding: theme.components.switch.padding,
+                },
+                small: {
+                    width: theme.components.switch.sm.width,
+                    height: theme.components.switch.sm.height,
+                    borderRadius: theme.components.switch.radius,
+                    padding: theme.components.switch.padding,
+                },
+            },
+            value: {
+                true: {
+                    backgroundColor: theme.components.switch.checked.backgroundColor,
+                },
+                false: {
+                    backgroundColor: theme.components.switch.unchecked.backgroundColor,
+                },
+            },
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+        },
+    },
+    thumb: {
+        backgroundColor: theme.components.switch.circle.backgroundColor,
+        alignItems: 'center',
+        justifyContent: 'center',
+        variants: {
+            size: {
+                medium: {
+                    width: theme.components.switch.md.circle.size,
+                    height: theme.components.switch.md.circle.size,
+                    borderRadius: theme.components.switch.radius,
+                },
+                small: {
+                    width: theme.components.switch.sm.circle.size,
+                    height: theme.components.switch.sm.circle.size,
+                    borderRadius: theme.components.switch.radius,
+                },
+            },
+        },
+    },
+    iconWrap: {
+        position: 'absolute',
+    },
+    icon: {
+        variants: {
+            value: {
+                true: {
+                    color: theme.components.switch.checked.iconColor,
+                },
+                false: {
+                    color: theme.components.switch.unchecked.iconColor,
+                },
+            },
+        },
+    },
+}));
+export default CustomSwitch;

package/build/components/Switch/Switch.props.d.ts

@@ -0,0 +1,8 @@
+import type { AccessibilityProps, PressableProps } from 'react-native';
+interface SwitchProps extends PressableProps, AccessibilityProps {
+    value: boolean;
+    onValueChange?: (value: boolean) => void;
+    disabled?: boolean;
+    size?: 'small' | 'medium';
+}
+export default SwitchProps;

package/build/components/Switch/Switch.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/Switch/Switch.web.d.ts

@@ -0,0 +1,3 @@
+import SwitchProps from './Switch.props';
+declare const CustomSwitch: ({ value, onValueChange, disabled, size, ...accessibilityProps }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export default CustomSwitch;

package/build/components/Switch/Switch.web.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CloseSmallIcon, TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useEffect } from 'react';
+import { Pressable, View } from 'react-native';
+import Animated, { Easing, interpolateColor, useAnimatedStyle, useReducedMotion, useSharedValue, withSpring, withTiming, } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { Icon } from '../Icon';
+// @ts-expect-error - Animated.createAnimatedComponent is not typed correctly in the library
+const AnimatedView = Animated.createAnimatedComponent(View);
+const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = 'medium', ...accessibilityProps }) => {
+    const { components } = useTheme();
+    const SWITCH_WIDTH = size === 'medium' ? components.switch.md.width : components.switch.sm.width;
+    const THUMB_SIZE = size === 'medium' ? components.switch.md.circle.size : components.switch.sm.circle.size;
+    const PADDING = components.switch.padding;
+    const isReducedMotion = useReducedMotion();
+    styles.useVariants({ size, disabled, value });
+    const offset = useSharedValue(value ? SWITCH_WIDTH - THUMB_SIZE - PADDING * 2 : 0);
+    const progress = useSharedValue(value ? 1 : 0);
+    const animatedThumbStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: offset.value }],
+    }));
+    const animatedSwitchBackgroundStyle = useAnimatedStyle(() => {
+        const backgroundColor = interpolateColor(progress.value, [0, 1], [components.switch.unchecked.backgroundColor, components.switch.checked.backgroundColor]);
+        return { backgroundColor };
+    });
+    // Icon animations
+    const tickScale = useSharedValue(value ? 1 : 0);
+    const crossScale = useSharedValue(value ? 0 : 1);
+    const animatedTickStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: tickScale.value }],
+    }));
+    const animatedCrossStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: crossScale.value }],
+    }));
+    // Press feedback animation
+    const scale = useSharedValue(1);
+    const animatedSwitchStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: scale.value }],
+    }));
+    useEffect(() => {
+        const userConfig = {
+            duration: isReducedMotion ? 0 : 300,
+            easing: Easing.inOut(Easing.ease),
+        };
+        // Animate the thumb position
+        offset.value = withTiming(value ? SWITCH_WIDTH - THUMB_SIZE - PADDING * 2 : 0, userConfig);
+        // Animate the icons
+        tickScale.value = withTiming(value ? 1 : 0, userConfig);
+        crossScale.value = withTiming(value ? 0 : 1, userConfig);
+        // Animate the background color with ease-in-out easing
+        progress.value = withTiming(value ? 1 : 0, userConfig);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value, disabled]);
+    const toggleSwitch = () => {
+        if (disabled)
+            return;
+        onValueChange?.(!value);
+    };
+    const onPressIn = () => {
+        scale.value = withSpring(0.95);
+    };
+    const onPressOut = () => {
+        scale.value = withSpring(1);
+    };
+    return (_jsx(Pressable, { onPress: toggleSwitch, onPressIn: onPressIn, onPressOut: onPressOut, disabled: disabled, "aria-checked": value, accessibilityRole: "switch", accessibilityState: { checked: value, disabled }, accessibilityLabel: accessibilityProps.accessibilityLabel, accessibilityHint: accessibilityProps.accessibilityHint, ...accessibilityProps, children: _jsx(AnimatedView, { style: [styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle], children: _jsxs(AnimatedView, { style: [styles.thumb, animatedThumbStyle], children: [_jsx(AnimatedView, { style: [styles.iconWrap, animatedTickStyle], children: (() => {
+                            const IconAny = Icon;
+                            return _jsx(IconAny, { as: TickSmallIcon, style: styles.icon });
+                        })() }), _jsx(AnimatedView, { style: [styles.iconWrap, animatedCrossStyle], children: (() => {
+                            const IconAny = Icon;
+                            return _jsx(IconAny, { as: CloseSmallIcon, style: styles.icon });
+                        })() })] }) }) }));
+};
+const styles = StyleSheet.create(theme => ({
+    switch: {
+        justifyContent: 'center',
+        variants: {
+            size: {
+                medium: {
+                    width: theme.components.switch.md.width,
+                    height: theme.components.switch.md.height,
+                    borderRadius: theme.components.switch.radius,
+                    padding: theme.components.switch.padding,
+                },
+                small: {
+                    width: theme.components.switch.sm.width,
+                    height: theme.components.switch.sm.height,
+                    borderRadius: theme.components.switch.radius,
+                    padding: theme.components.switch.padding,
+                },
+            },
+            value: {
+                true: {
+                    backgroundColor: theme.components.switch.checked.backgroundColor,
+                },
+                false: {
+                    backgroundColor: theme.components.switch.unchecked.backgroundColor,
+                },
+            },
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+        },
+    },
+    thumb: {
+        backgroundColor: theme.components.switch.circle.backgroundColor,
+        alignItems: 'center',
+        justifyContent: 'center',
+        variants: {
+            size: {
+                medium: {
+                    width: theme.components.switch.md.circle.size,
+                    height: theme.components.switch.md.circle.size,
+                    borderRadius: theme.components.switch.radius,
+                },
+                small: {
+                    width: theme.components.switch.sm.circle.size,
+                    height: theme.components.switch.sm.circle.size,
+                    borderRadius: theme.components.switch.radius,
+                },
+            },
+        },
+    },
+    iconWrap: {
+        position: 'absolute',
+    },
+    icon: {
+        variants: {
+            value: {
+                true: {
+                    color: theme.components.switch.checked.iconColor,
+                },
+                false: {
+                    color: theme.components.switch.unchecked.iconColor,
+                },
+            },
+        },
+    },
+}));
+export default CustomSwitch;

package/build/components/Switch/index.d.ts

@@ -0,0 +1 @@
+export { default as Switch } from './Switch';

package/build/components/Switch/index.js

@@ -0,0 +1 @@
+export { default as Switch } from './Switch';