@utilitywarehouse/hearth-react-native 0.30.3 → 0.30.4-testid-fix-1

package/.turbo/turbo-build.log

@@ -1,4 +1,5 @@
-
-> @utilitywarehouse/hearth-react-native@0.30.3 build /home/runner/work/hearth/hearth/packages/react-native
-> tsc
-
+
+
+> @utilitywarehouse/hearth-react-native@0.30.4-testid-fix-1 build /Users/filmondaniels/Projects/Work/hearth/packages/react-native
+> tsc
+

package/.turbo/turbo-lint.log

@@ -1,65 +1,70 @@
-
-> @utilitywarehouse/hearth-react-native@0.30.3 lint /home/runner/work/hearth/hearth/packages/react-native
-> TIMING=1 eslint .
-
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.context.tsx
-  6:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.tsx
-  146:6  warning  React Hook useMemo has a missing dependency: 'hasCarouselControlsInTree'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePicker.tsx
-  109:6  warning  React Hook useCallback has an unnecessary dependency: 'modalRef.current'. Either exclude it or remove the dependency array. Mutable values like 'modalRef.current' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  259:6  warning  React Hook useEffect has a missing dependency: 'initialState'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
-  346:6  warning  React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
-  468:5  warning  React Hook useCallback has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                       react-hooks/exhaustive-deps
-  536:6  warning  React Hook useEffect has a missing dependency: 'onSelectMonth'. Either include it or remove the dependency array                                                                                                                                    react-hooks/exhaustive-deps
-  542:6  warning  React Hook useEffect has a missing dependency: 'onSelectYear'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDay.tsx
-  76:6  warning  React Hook useMemo has an unnecessary dependency: 'styles.rangeRoot'. Either exclude it or remove the dependency array. Outer scope values like 'styles.rangeRoot' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  84:6  warning  React Hook useMemo has a missing dependency: 'isSelected'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDays.tsx
-  179:6  warning  React Hook useMemo has unnecessary dependencies: 'month' and 'year'. Either exclude them or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerYears.tsx
-  52:6  warning  React Hook useCallback has a missing dependency: 'containerHeight'. Either include it or remove the dependency array. Outer scope values like 'styles' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Input/Input.tsx
-  78:8  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/PillGroup/PillGroup.tsx
-  17:9  warning  The 'normalizedValue' conditional could make the dependencies of useMemo Hook (at line 33) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'normalizedValue' in its own useMemo() Hook  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Table/Table.context.tsx
-  23:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Tabs/Tabs.tsx
-   53:6   warning  React Hook useEffect has a missing dependency: 'tabValues'. Either include it or remove the dependency array                              react-hooks/exhaustive-deps
-   53:7   warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
-  104:5   warning  React Hook useMemo has an unnecessary dependency: 'tabValues'. Either exclude it or remove the dependency array                           react-hooks/exhaustive-deps
-  127:62  warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Textarea/Textarea.tsx
-  45:6  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Toast/Toast.context.tsx
-   14:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
-  106:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
-
-✖ 22 problems (0 errors, 22 warnings)
-
-Rule                                              | Time (ms) | Relative
-:-------------------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars                 |  1593.466 |    60.1%
-react-hooks/rules-of-hooks                        |   130.000 |     4.9%
-react-hooks/exhaustive-deps                       |   126.596 |     4.8%
-no-global-assign                                  |   112.238 |     4.2%
-no-unexpected-multiline                           |    53.984 |     2.0%
-@typescript-eslint/ban-ts-comment                 |    41.634 |     1.6%
-no-useless-escape                                 |    37.152 |     1.4%
-no-loss-of-precision                              |    36.053 |     1.4%
-no-misleading-character-class                     |    33.418 |     1.3%
-@typescript-eslint/no-unnecessary-type-constraint |    30.353 |     1.1%
+
+
+> @utilitywarehouse/hearth-react-native@0.27.2 lint /Users/filmondaniels/Projects/Work/hearth/packages/react-native
+> TIMING=1 eslint .
+
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Carousel/Carousel.context.tsx
+  6:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Carousel/Carousel.tsx
+  146:6  warning  React Hook useMemo has a missing dependency: 'hasCarouselControlsInTree'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/DatePicker/DatePicker.tsx
+  109:6  warning  React Hook useCallback has an unnecessary dependency: 'modalRef.current'. Either exclude it or remove the dependency array. Mutable values like 'modalRef.current' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  259:6  warning  React Hook useEffect has a missing dependency: 'initialState'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
+  346:6  warning  React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
+  468:5  warning  React Hook useCallback has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                       react-hooks/exhaustive-deps
+  536:6  warning  React Hook useEffect has a missing dependency: 'onSelectMonth'. Either include it or remove the dependency array                                                                                                                                    react-hooks/exhaustive-deps
+  542:6  warning  React Hook useEffect has a missing dependency: 'onSelectYear'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/DatePicker/DatePickerDay.tsx
+  76:6  warning  React Hook useMemo has an unnecessary dependency: 'styles.rangeRoot'. Either exclude it or remove the dependency array. Outer scope values like 'styles.rangeRoot' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  84:6  warning  React Hook useMemo has a missing dependency: 'isSelected'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/DatePicker/DatePickerDays.tsx
+  179:6  warning  React Hook useMemo has unnecessary dependencies: 'month' and 'year'. Either exclude them or remove the dependency array  react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/DatePicker/DatePickerYears.tsx
+  52:6  warning  React Hook useCallback has a missing dependency: 'containerHeight'. Either include it or remove the dependency array. Outer scope values like 'styles' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Input/Input.tsx
+  78:8  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Modal/Modal.tsx
+   93:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  330:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Modal/Modal.web.tsx
+  66:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/PillGroup/PillGroup.tsx
+  17:9  warning  The 'normalizedValue' conditional could make the dependencies of useMemo Hook (at line 33) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'normalizedValue' in its own useMemo() Hook  react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Tabs/Tabs.tsx
+   53:6   warning  React Hook useEffect has a missing dependency: 'tabValues'. Either include it or remove the dependency array                              react-hooks/exhaustive-deps
+   53:7   warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
+  104:5   warning  React Hook useMemo has an unnecessary dependency: 'tabValues'. Either exclude it or remove the dependency array                           react-hooks/exhaustive-deps
+  127:62  warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Textarea/Textarea.tsx
+  45:6  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Toast/Toast.context.tsx
+   14:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
+  106:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
+
+✖ 24 problems (0 errors, 24 warnings)
+
+Rule                                      | Time (ms) | Relative
+:-----------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars         |   436.390 |    62.5%
+react-hooks/exhaustive-deps               |    28.433 |     4.1%
+no-global-assign                          |    25.595 |     3.7%
+react-hooks/rules-of-hooks                |    20.152 |     2.9%
+@typescript-eslint/ban-ts-comment         |    17.023 |     2.4%
+no-misleading-character-class             |    12.606 |     1.8%
+@typescript-eslint/no-unused-expressions  |     9.189 |     1.3%
+no-unexpected-multiline                   |     8.943 |     1.3%
+@typescript-eslint/triple-slash-reference |     8.378 |     1.2%
+no-loss-of-precision                      |     8.049 |     1.2%

package/build/components/DatePicker/TimePicker.d.ts

@@ -0,0 +1,3 @@
+export type Period = 'AM' | 'PM';
+declare const TimePicker: () => import("react/jsx-runtime").JSX.Element;
+export default TimePicker;

package/build/components/DatePicker/TimePicker.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import dayjs from 'dayjs';
+import { useCallback, useMemo } from 'react';
+import { ScrollView, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { useDatePickerContext } from './DatePicker.context';
+import { CONTAINER_HEIGHT } from './enums';
+import PeriodPicker from './time-picker/period-picker';
+import Wheel from './time-picker/wheel';
+import { formatNumber, getParsedDate } from './utils';
+const createNumberList = (num, numerals, startFrom = 0) => {
+    return Array.from({ length: num }, (_, i) => ({
+        value: i + startFrom,
+        text: i + startFrom < 10
+            ? `${formatNumber(0, numerals)}${formatNumber(i + startFrom, numerals)}`
+            : `${formatNumber(i + startFrom, numerals)}`,
+    }));
+};
+const TimePicker = () => {
+    const { currentDate, date, onSelectDate, timeZone, numerals = 'latn', use12Hours, } = useDatePickerContext();
+    const hours = useMemo(() => createNumberList(use12Hours ? 12 : 24, numerals, use12Hours ? 1 : 0), [numerals, use12Hours]);
+    const minutes = useMemo(() => createNumberList(60, numerals), [numerals]);
+    const { hour, hour12, minute, period } = getParsedDate(date || currentDate);
+    const handleChangeHour = useCallback((value) => {
+        let hour24 = value;
+        if (use12Hours) {
+            if (period === 'AM' && value === 12) {
+                hour24 = 0;
+            }
+            else if (period === 'PM' && value < 12) {
+                hour24 = value + 12;
+            }
+            else {
+                hour24 = value;
+            }
+        }
+        const newDate = dayjs.tz(date, timeZone).hour(hour24).minute(minute);
+        onSelectDate(newDate);
+    }, [date, onSelectDate, timeZone, use12Hours, period, minute]);
+    const handleChangeMinute = useCallback((value) => {
+        const newDate = dayjs.tz(date, timeZone).minute(value);
+        onSelectDate(newDate);
+    }, [date, onSelectDate, timeZone]);
+    const handlePeriodChange = useCallback((newPeriod) => {
+        let newHour = hour12;
+        if (newPeriod === 'PM' && hour12 < 12) {
+            newHour = hour12 + 12;
+        }
+        else if (newPeriod === 'AM' && hour12 === 12) {
+            newHour = 0;
+        }
+        else if (newPeriod === 'AM' && hour >= 12) {
+            newHour = hour12;
+        }
+        const newDate = dayjs.tz(date || currentDate, timeZone).hour(newHour);
+        onSelectDate(newDate);
+    }, [date, currentDate, onSelectDate, timeZone, hour, hour12]);
+    return (_jsxs(ScrollView, { horizontal: true, scrollEnabled: false, contentContainerStyle: styles.container, testID: "time-selector", children: [_jsxs(View, { style: styles.timePickerContainer, children: [_jsx(View, { style: styles.wheelContainer, children: _jsx(Wheel, { value: use12Hours ? hour12 : hour, items: hours, setValue: handleChangeHour }) }), _jsx(BodyText, { style: styles.timeSeparator, children: ":" }), _jsx(View, { style: styles.wheelContainer, children: _jsx(Wheel, { value: minute, items: minutes, setValue: handleChangeMinute }) })] }), use12Hours && period ? (_jsx(View, { style: styles.periodContainer, children: _jsx(PeriodPicker, { value: period, setValue: handlePeriodChange }) })) : null] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    wheelContainer: {
+        flex: 1,
+    },
+    timePickerContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: CONTAINER_HEIGHT / 2,
+        height: CONTAINER_HEIGHT / 2,
+        flexDirection: 'row',
+    },
+    timeSeparator: {
+        marginHorizontal: 5,
+    },
+    periodContainer: {
+        marginLeft: 10,
+    },
+});
+export default TimePicker;

package/build/components/DatePicker/time-picker/animated-math.d.ts

@@ -0,0 +1,4 @@
+import { Animated } from 'react-native';
+declare function sin(animated: Animated.Animated): Animated.AnimatedAddition<string | number>;
+declare function normalize(animated: Animated.Animated): Animated.Animated;
+export { sin, normalize };

package/build/components/DatePicker/time-picker/animated-math.js

@@ -0,0 +1,19 @@
+import { Animated } from 'react-native';
+const FACTORIAL_3 = 3 * 2;
+const FACTORIAL_5 = 5 * 4 * FACTORIAL_3;
+const FACTORIAL_7 = 7 * 6 * FACTORIAL_5;
+function sin(animated) {
+    const normalized = normalize(animated);
+    const square = Animated.multiply(normalized, normalized);
+    const pow3 = Animated.multiply(normalized, square);
+    const pow5 = Animated.multiply(pow3, square);
+    const pow7 = Animated.multiply(pow5, square);
+    return Animated.add(Animated.add(normalized, Animated.multiply(pow3, -1 / FACTORIAL_3)), Animated.add(Animated.multiply(pow5, 1 / FACTORIAL_5), Animated.multiply(pow7, -1 / FACTORIAL_7)));
+}
+function normalize(animated) {
+    return Animated.add(Animated.modulo(Animated.add(animated, Math.PI), Math.PI * 2), -Math.PI).interpolate({
+        inputRange: [-Math.PI, -Math.PI / 2, Math.PI / 2, Math.PI],
+        outputRange: [0, -Math.PI / 2, Math.PI / 2, 0],
+    });
+}
+export { sin, normalize };

package/build/components/DatePicker/time-picker/period-native.d.ts

@@ -0,0 +1,6 @@
+interface PeriodProps {
+    value: string;
+    setValue?: (value: any) => void;
+}
+declare const _default: import("react").MemoExoticComponent<({ value, setValue }: PeriodProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/DatePicker/time-picker/period-native.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import WheelPicker from './wheel-picker';
+const options = [
+    { value: 'AM', text: 'AM' },
+    { value: 'PM', text: 'PM' },
+];
+const PeriodNative = ({ value, setValue = () => { } }) => {
+    return (_jsx(WheelPicker, { value: value, options: options, onChange: setValue, 
+        //containerStyle={defaultStyles.container}
+        itemHeight: 44, decelerationRate: "fast" }));
+};
+const customComparator = (prev, next) => {
+    const areEqual = prev.value === next.value && prev.setValue === next.setValue;
+    return areEqual;
+};
+export default memo(PeriodNative, customComparator);

package/build/components/DatePicker/time-picker/period-picker.d.ts

@@ -0,0 +1,6 @@
+type PeriodProps = {
+    value: string;
+    setValue?: (value: any) => void;
+};
+declare const _default: import("react").MemoExoticComponent<(props: PeriodProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/DatePicker/time-picker/period-picker.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Platform } from 'react-native';
+import PeriodNative from './period-native';
+import PeriodWeb from './period-web';
+const PeriodPicker = (props) => {
+    const Component = Platform.OS === 'web' ? PeriodWeb : PeriodNative;
+    return _jsx(Component, { ...props });
+};
+export default memo(PeriodPicker);

package/build/components/DatePicker/time-picker/period-web.d.ts

@@ -0,0 +1,6 @@
+interface PeriodProps {
+    value: string;
+    setValue?: (value: any) => void;
+}
+declare const _default: import("react").MemoExoticComponent<({ value, setValue }: PeriodProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/DatePicker/time-picker/period-web.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../../BodyText';
+const PeriodWeb = ({ value, setValue = () => { } }) => {
+    return (_jsx(Pressable, { onPress: () => setValue(value == 'AM' ? 'PM' : 'AM'), children: _jsx(View, { style: [styles.period], children: _jsx(BodyText, { children: value }) }) }));
+};
+const styles = StyleSheet.create({
+    period: {
+        width: 65,
+        height: 44,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+const customComparator = (prev, next) => {
+    const areEqual = prev.value === next.value && prev.setValue === next.setValue;
+    return areEqual;
+};
+export default memo(PeriodWeb, customComparator);

package/build/components/DatePicker/time-picker/wheel-native.d.ts

@@ -0,0 +1,8 @@
+import { PickerOption } from '../DatePicker.props';
+interface WheelProps {
+    value: number | string;
+    setValue?: (value: any) => void;
+    items: PickerOption[];
+}
+declare const _default: import("react").MemoExoticComponent<({ value, setValue, items }: WheelProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/DatePicker/time-picker/wheel-native.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Platform } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import WheelPicker from './wheel-picker';
+const WheelNative = ({ value, setValue = () => { }, items }) => {
+    return (_jsx(WheelPicker, { value: value, options: items, onChange: setValue, containerStyle: styles.container, itemHeight: 44, decelerationRate: "fast" }));
+};
+const styles = StyleSheet.create({
+    container: {
+        display: 'flex',
+        ...Platform.select({
+            web: {
+                userSelect: 'none',
+            },
+        }),
+    },
+});
+export default memo(WheelNative);

package/build/components/DatePicker/time-picker/wheel-picker/index.d.ts

@@ -0,0 +1,2 @@
+import WheelPicker from './wheel-picker';
+export default WheelPicker;

package/build/components/DatePicker/time-picker/wheel-picker/index.js

@@ -0,0 +1,2 @@
+import WheelPicker from './wheel-picker';
+export default WheelPicker;

package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker-item.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Animated, StyleProp, ViewStyle } from 'react-native';
+import { PickerOption } from '../../DatePicker.props';
+interface ItemProps {
+    style: StyleProp<ViewStyle>;
+    option: PickerOption | null;
+    height: number;
+    index: number;
+    currentScrollIndex: Animated.AnimatedAddition<number>;
+    visibleRest: number;
+    rotationFunction: (x: number) => number;
+    opacityFunction: (x: number) => number;
+    scaleFunction: (x: number) => number;
+}
+declare const _default: React.NamedExoticComponent<ItemProps>;
+export default _default;

package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker-item.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Animated } from 'react-native';
+import { BodyText } from '../../../BodyText';
+import styles from './wheel-picker.style';
+const WheelPickerItem = ({ style, height, option, index, visibleRest, currentScrollIndex, opacityFunction, rotationFunction, scaleFunction, }) => {
+    const relativeScrollIndex = Animated.subtract(index, currentScrollIndex);
+    const translateY = relativeScrollIndex.interpolate({
+        inputRange: (() => {
+            const range = [0];
+            for (let i = 1; i <= visibleRest + 1; i++) {
+                range.unshift(-i);
+                range.push(i);
+            }
+            return range;
+        })(),
+        outputRange: (() => {
+            const range = [0];
+            for (let i = 1; i <= visibleRest + 1; i++) {
+                let y = (height / 2) * (1 - Math.sin(Math.PI / 2 - rotationFunction(i)));
+                for (let j = 1; j < i; j++) {
+                    y += height * (1 - Math.sin(Math.PI / 2 - rotationFunction(j)));
+                }
+                range.unshift(y);
+                range.push(-y);
+            }
+            return range;
+        })(),
+    });
+    const opacity = relativeScrollIndex.interpolate({
+        inputRange: (() => {
+            const range = [0];
+            for (let i = 1; i <= visibleRest + 1; i++) {
+                range.unshift(-i);
+                range.push(i);
+            }
+            return range;
+        })(),
+        outputRange: (() => {
+            const range = [1];
+            for (let x = 1; x <= visibleRest + 1; x++) {
+                const y = opacityFunction(x);
+                range.unshift(y);
+                range.push(y);
+            }
+            return range;
+        })(),
+    });
+    const scale = relativeScrollIndex.interpolate({
+        inputRange: (() => {
+            const range = [0];
+            for (let i = 1; i <= visibleRest + 1; i++) {
+                range.unshift(-i);
+                range.push(i);
+            }
+            return range;
+        })(),
+        outputRange: (() => {
+            const range = [1.0];
+            for (let x = 1; x <= visibleRest + 1; x++) {
+                const y = scaleFunction(x);
+                range.unshift(y);
+                range.push(y);
+            }
+            return range;
+        })(),
+    });
+    const rotateX = relativeScrollIndex.interpolate({
+        inputRange: (() => {
+            const range = [0];
+            for (let i = 1; i <= visibleRest + 1; i++) {
+                range.unshift(-i);
+                range.push(i);
+            }
+            return range;
+        })(),
+        outputRange: (() => {
+            const range = ['0deg'];
+            for (let x = 1; x <= visibleRest + 1; x++) {
+                const y = rotationFunction(x);
+                range.unshift(`${y}deg`);
+                range.push(`${y}deg`);
+            }
+            return range;
+        })(),
+    });
+    return (_jsx(Animated.View, { style: [
+            styles.option,
+            style,
+            {
+                height,
+                opacity,
+                transform: [{ translateY }, { rotateX }, { scale }],
+            },
+        ], children: _jsx(BodyText, { children: option?.text }) }));
+};
+export default React.memo(WheelPickerItem);

package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { FlatListProps, StyleProp, ViewProps, ViewStyle } from 'react-native';
+import { PickerOption } from '../../DatePicker.props';
+interface Props {
+    value: number | string;
+    options: PickerOption[];
+    onChange: (index: number | string) => void;
+    selectedIndicatorStyle?: StyleProp<ViewStyle>;
+    itemStyle?: ViewStyle;
+    itemHeight?: number;
+    containerStyle?: ViewStyle;
+    containerProps?: Omit<ViewProps, 'style'>;
+    scaleFunction?: (x: number) => number;
+    rotationFunction?: (x: number) => number;
+    opacityFunction?: (x: number) => number;
+    visibleRest?: number;
+    decelerationRate?: 'normal' | 'fast' | number;
+    flatListProps?: Omit<FlatListProps<PickerOption | null>, 'data' | 'renderItem'>;
+}
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Platform, View, } from 'react-native';
+import WheelPickerItem from './wheel-picker-item';
+import styles from './wheel-picker.style';
+const WheelPicker = ({ value, options, onChange, selectedIndicatorStyle = {}, containerStyle = {}, itemStyle = {}, itemHeight = 40, scaleFunction = (x) => 1.0 ** x, rotationFunction = (x) => 1 - Math.pow(1 / 2, x), opacityFunction = (x) => Math.pow(1 / 3, x), visibleRest = 2, decelerationRate = 'normal', containerProps = {}, flatListProps = {}, }) => {
+    const momentumStarted = useRef(false);
+    const selectedIndex = options.findIndex(item => item.value === value);
+    const flatListRef = useRef(null);
+    const [scrollY] = useState(new Animated.Value(selectedIndex * itemHeight));
+    const containerHeight = (1 + visibleRest * 2) * itemHeight;
+    const paddedOptions = useMemo(() => {
+        const array = [...options];
+        for (let i = 0; i < visibleRest; i++) {
+            array.unshift(null);
+            array.push(null);
+        }
+        return array;
+    }, [options, visibleRest]);
+    const offsets = useMemo(() => [...Array(paddedOptions.length)].map((_, i) => i * itemHeight), [paddedOptions, itemHeight]);
+    const currentScrollIndex = useMemo(() => Animated.add(Animated.divide(scrollY, itemHeight), visibleRest), [visibleRest, scrollY, itemHeight]);
+    const handleScrollEnd = (event) => {
+        const offsetY = Math.min(itemHeight * (options.length - 1), Math.max(event.nativeEvent.contentOffset.y, 0));
+        let index = Math.floor(offsetY / itemHeight);
+        const remainder = offsetY % itemHeight;
+        if (remainder > itemHeight / 2) {
+            index++;
+        }
+        if (index !== selectedIndex) {
+            onChange(options[index]?.value || 0);
+        }
+    };
+    const handleMomentumScrollBegin = () => {
+        momentumStarted.current = true;
+    };
+    const handleMomentumScrollEnd = (event) => {
+        momentumStarted.current = false;
+        handleScrollEnd(event);
+    };
+    const handleScrollEndDrag = (event) => {
+        // Capture the offset value immediately
+        const offsetY = event.nativeEvent.contentOffset?.y;
+        // We'll start a short timer to see if momentum scroll begins
+        setTimeout(() => {
+            // If momentum scroll hasn't started within the timeout,
+            // then it was a slow scroll that won't trigger momentum
+            if (!momentumStarted.current && offsetY !== undefined) {
+                // Create a synthetic event with just the data we need
+                const syntheticEvent = {
+                    nativeEvent: {
+                        contentOffset: { y: offsetY },
+                    },
+                };
+                handleScrollEnd(syntheticEvent);
+            }
+        }, 50);
+    };
+    useEffect(() => {
+        if (selectedIndex < 0 || selectedIndex >= options.length) {
+            throw new Error(`Selected index ${selectedIndex} is out of bounds [0, ${options.length - 1}]`);
+        }
+    }, [selectedIndex, options]);
+    /**
+     * If selectedIndex is changed from outside (not via onChange) we need to scroll to the specified index.
+     * This ensures that what the user sees as selected in the picker always corresponds to the value state.
+     */
+    useEffect(() => {
+        flatListRef.current?.scrollToIndex({
+            index: selectedIndex,
+            animated: Platform.OS === 'ios',
+        });
+    }, [selectedIndex, itemHeight]);
+    return (_jsxs(View, { style: [styles.container, { height: containerHeight }, containerStyle], ...containerProps, children: [_jsx(View, { style: [
+                    styles.selectedIndicator,
+                    selectedIndicatorStyle,
+                    {
+                        transform: [{ translateY: -itemHeight / 2 }],
+                        height: itemHeight,
+                    },
+                ] }), _jsx(Animated.FlatList, { ...flatListProps, ref: flatListRef, nestedScrollEnabled: true, style: styles.scrollView, showsVerticalScrollIndicator: false, onScroll: Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+                    useNativeDriver: true,
+                }), onScrollEndDrag: handleScrollEndDrag, onMomentumScrollBegin: handleMomentumScrollBegin, onMomentumScrollEnd: handleMomentumScrollEnd, snapToOffsets: offsets, decelerationRate: decelerationRate, initialScrollIndex: selectedIndex, getItemLayout: (_, index) => ({
+                    length: itemHeight,
+                    offset: itemHeight * index,
+                    index,
+                }), data: paddedOptions, keyExtractor: (item, index) => item ? `${item.value}-${item.text}-${index}` : `null-${index}`, renderItem: ({ item: option, index }) => (_jsx(WheelPickerItem, { index: index, option: option, style: itemStyle, height: itemHeight, currentScrollIndex: currentScrollIndex, scaleFunction: scaleFunction, rotationFunction: rotationFunction, opacityFunction: opacityFunction, visibleRest: visibleRest }, `option-${index}`)) })] }));
+};
+export default memo(WheelPicker);

package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker.style.d.ts

@@ -0,0 +1,23 @@
+declare const _default: {
+    container: {
+        position: "relative";
+    };
+    selectedIndicator: {
+        position: "absolute";
+        width: "100%";
+        top: "50%";
+    };
+    scrollView: {
+        overflow: "hidden";
+        flex: number;
+    };
+    option: {
+        alignItems: "center";
+        justifyContent: "center";
+        paddingHorizontal: number;
+        zIndex: number;
+    };
+} & {
+    useVariants: (variants: never) => void;
+};
+export default _default;

package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker.style.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native-unistyles';
+export default StyleSheet.create({
+    container: {
+        position: 'relative',
+    },
+    selectedIndicator: {
+        position: 'absolute',
+        width: '100%',
+        top: '50%',
+    },
+    scrollView: {
+        overflow: 'hidden',
+        flex: 1,
+    },
+    option: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 16,
+        zIndex: 100,
+    },
+});

package/build/components/DatePicker/time-picker/wheel-web.d.ts

@@ -0,0 +1,8 @@
+import { PickerOption } from '../DatePicker.props';
+interface WheelProps {
+    value: number | string;
+    setValue?: (value: any) => void;
+    items: PickerOption[];
+}
+declare const _default: import("react").MemoExoticComponent<({ value, setValue, items }: WheelProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/DatePicker/time-picker/wheel-web.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useRef } from 'react';
+import { Animated, PanResponder, Platform, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { isEqual } from '../../../utils';
+import { BodyText } from '../../BodyText';
+import { CONTAINER_HEIGHT } from '../enums';
+import { sin } from './animated-math';
+const ITEM_HEIGHT = 44;
+const WheelWeb = ({ value, setValue = () => { }, items }) => {
+    const displayCount = 5;
+    const translateY = useRef(new Animated.Value(0)).current;
+    const renderCount = displayCount * 2 < items.length ? displayCount * 8 : displayCount * 2 - 1;
+    const circular = items.length >= displayCount;
+    const height = 140;
+    const radius = height / 2;
+    const valueIndex = useMemo(() => {
+        return Math.max(0, items.findIndex(item => item.value === value));
+    }, [items, value]);
+    const panResponder = useMemo(() => {
+        return PanResponder.create({
+            onMoveShouldSetPanResponder: () => true,
+            onStartShouldSetPanResponderCapture: () => true,
+            onPanResponderGrant: () => {
+                translateY.setValue(0);
+            },
+            onPanResponderMove: (evt, gestureState) => {
+                translateY.setValue(gestureState.dy);
+                evt.stopPropagation();
+            },
+            onPanResponderRelease: (_, gestureState) => {
+                translateY.extractOffset();
+                let newValueIndex = valueIndex - Math.round(gestureState.dy / ((radius * 2) / displayCount));
+                if (circular) {
+                    newValueIndex = (newValueIndex + items.length) % items.length;
+                }
+                else {
+                    if (newValueIndex < 0) {
+                        newValueIndex = 0;
+                    }
+                    else if (newValueIndex >= items.length) {
+                        newValueIndex = items.length - 1;
+                    }
+                }
+                const newValue = items[newValueIndex];
+                if (newValue?.value === value) {
+                    translateY.setOffset(0);
+                    translateY.setValue(0);
+                }
+                else if (newValue?.value) {
+                    setValue(newValue.value);
+                }
+                else if (items[0]?.value) {
+                    setValue(items[0].value);
+                }
+            },
+        });
+    }, [circular, displayCount, radius, setValue, value, valueIndex, items, translateY]);
+    const displayValues = useMemo(() => {
+        const centerIndex = Math.floor(renderCount / 2);
+        return Array.from({ length: renderCount }, (_, index) => {
+            let targetIndex = valueIndex + index - centerIndex;
+            if (circular) {
+                targetIndex = ((targetIndex % items.length) + items.length) % items.length;
+            }
+            else {
+                targetIndex = Math.max(0, Math.min(targetIndex, items.length - 1));
+            }
+            return items[targetIndex] || items[0];
+        });
+    }, [renderCount, valueIndex, items, circular]);
+    const animatedAngles = useMemo(() => {
+        //translateY.setValue(0);
+        translateY.setOffset(0);
+        const currentIndex = displayValues.findIndex(item => item?.value === value);
+        return displayValues && displayValues.length > 0
+            ? displayValues.map((_, index) => translateY
+                .interpolate({
+                inputRange: [-radius, radius],
+                outputRange: [
+                    -radius + ((radius * 2) / displayCount) * (index - currentIndex),
+                    radius + ((radius * 2) / displayCount) * (index - currentIndex),
+                ],
+                extrapolate: 'extend',
+            })
+                .interpolate({
+                inputRange: [-radius, radius],
+                outputRange: [-Math.PI / 2, Math.PI / 2],
+                extrapolate: 'clamp',
+            }))
+            : [];
+    }, [displayValues, radius, value, displayCount, translateY]);
+    return (_jsxs(View, { style: [styles.container], ...panResponder.panHandlers, children: [_jsx(View, { style: [
+                    styles.selectedIndicator,
+                    {
+                        transform: [{ translateY: -ITEM_HEIGHT / 2 }],
+                        height: ITEM_HEIGHT,
+                    },
+                ] }), displayValues?.map((displayValue, index) => {
+                const animatedAngle = animatedAngles[index];
+                return (_jsx(Animated.View, { style: {
+                        position: 'absolute',
+                        height: ITEM_HEIGHT - 10,
+                        transform: animatedAngle
+                            ? [
+                                {
+                                    translateY: Animated.multiply(radius, sin(animatedAngle)),
+                                },
+                                {
+                                    rotateX: animatedAngle.interpolate({
+                                        inputRange: [-Math.PI / 2, Math.PI / 2],
+                                        outputRange: ['-89deg', '89deg'],
+                                        extrapolate: 'clamp',
+                                    }),
+                                },
+                            ]
+                            : [],
+                        opacity: displayValue?.value !== value ? 0.3 : 1,
+                    }, children: _jsx(BodyText, { children: displayValue?.text }) }, `${displayValue?.text}-${index}`));
+            })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        minWidth: 30,
+        overflow: 'hidden',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: CONTAINER_HEIGHT / 2,
+        ...Platform.select({
+            web: {
+                cursor: 'pointer',
+                userSelect: 'none',
+            },
+        }),
+    },
+    selectedIndicator: {
+        position: 'absolute',
+        width: '100%',
+        top: '50%',
+    },
+});
+const customComparator = (prev, next) => {
+    const areEqual = prev.value === next.value && prev.setValue === next.setValue && isEqual(prev.items, next.items);
+    return areEqual;
+};
+export default memo(WheelWeb, customComparator);

package/build/components/DatePicker/time-picker/wheel.d.ts

@@ -0,0 +1,8 @@
+import { PickerOption } from '../DatePicker.props';
+type WheelProps = {
+    value: number | string;
+    setValue?: (value: any) => void;
+    items: PickerOption[];
+};
+declare const _default: import("react").MemoExoticComponent<(props: WheelProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/DatePicker/time-picker/wheel.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Platform } from 'react-native';
+import WheelNative from './wheel-native';
+import WheelWeb from './wheel-web';
+const Wheel = (props) => {
+    const Component = Platform.OS === 'web' ? WheelWeb : WheelNative;
+    return _jsx(Component, { ...props });
+};
+export default memo(Wheel);

package/build/components/SafeAreaView/SafeAreaView.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { View } from 'react-native';
+import SafeAreaViewProps from './SafeAreaView.props';
+declare const SafeAreaView: React.ForwardRefExoticComponent<SafeAreaViewProps & React.RefAttributes<View>>;
+export default SafeAreaView;

package/build/components/SafeAreaView/SafeAreaView.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { StyleSheet as RNStyleSheet, useWindowDimensions, View, } from 'react-native';
+import { UnistylesRuntime } from '../../core';
+const DEFAULT_EDGES = ['top', 'right', 'bottom', 'left'];
+const EMPTY_INSETS = { top: 0, right: 0, bottom: 0, left: 0 };
+const EDGE_EPSILON = 1;
+const getNumericStyleValue = (value) => {
+    return typeof value === 'number' ? value : 0;
+};
+const getStyleInsetValue = (style, mode, edge) => {
+    const prefix = mode === 'margin' ? 'margin' : 'padding';
+    if (!style) {
+        // No style specified at all; treat as zero inset for safe-area calculations.
+        return 0;
+    }
+    if (edge === 'top') {
+        const raw = style[`${prefix}Top`] ?? style[`${prefix}Vertical`] ?? style[prefix];
+        if (raw == null) {
+            return 0;
+        }
+        return getNumericStyleValue(raw);
+    }
+    if (edge === 'bottom') {
+        const raw = style[`${prefix}Bottom`] ?? style[`${prefix}Vertical`] ?? style[prefix];
+        if (raw == null) {
+            return 0;
+        }
+        return getNumericStyleValue(raw);
+    }
+    if (edge === 'left') {
+        const raw = style[`${prefix}Left`] ?? style[`${prefix}Horizontal`] ?? style[prefix];
+        if (raw == null) {
+            return 0;
+        }
+        return getNumericStyleValue(raw);
+    }
+    const raw = style[`${prefix}Right`] ?? style[`${prefix}Horizontal`] ?? style[prefix];
+    if (raw == null) {
+        return 0;
+    }
+    return getNumericStyleValue(raw);
+};
+const SafeAreaView = forwardRef(({ children, edges = DEFAULT_EDGES, mode = 'padding', onLayout, style, ...props }, ref) => {
+    const viewRef = useRef(null);
+    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+    const [edgeInsets, setEdgeInsets] = useState(EMPTY_INSETS);
+    const flattenedStyle = useMemo(() => RNStyleSheet.flatten(style), [style]);
+    const updateEdgeInsets = useCallback(() => {
+        const currentView = viewRef.current;
+        if (!currentView) {
+            return;
+        }
+        currentView.measureInWindow((x, y, width, height) => {
+            const runtimeInsets = UnistylesRuntime.insets ?? EMPTY_INSETS;
+            const nextEdgeInsets = {
+                top: edges.includes('top') ? Math.max(runtimeInsets.top - Math.max(y, 0), 0) : 0,
+                right: edges.includes('right')
+                    ? Math.max(runtimeInsets.right - Math.max(windowWidth - (x + width), 0), 0)
+                    : 0,
+                bottom: edges.includes('bottom')
+                    ? Math.max(runtimeInsets.bottom - Math.max(windowHeight - (y + height), 0), 0)
+                    : 0,
+                left: edges.includes('left') ? Math.max(runtimeInsets.left - Math.max(x, 0), 0) : 0,
+            };
+            setEdgeInsets(previousInsets => {
+                const hasChanged = Object.keys(nextEdgeInsets).some(edge => Math.abs(previousInsets[edge] - nextEdgeInsets[edge]) > EDGE_EPSILON);
+                return hasChanged ? nextEdgeInsets : previousInsets;
+            });
+        });
+    }, [edges, windowHeight, windowWidth]);
+    useEffect(() => {
+        const frame = requestAnimationFrame(updateEdgeInsets);
+        return () => cancelAnimationFrame(frame);
+    }, [updateEdgeInsets]);
+    const handleRef = useCallback((node) => {
+        viewRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const handleLayout = useCallback((event) => {
+        onLayout?.(event);
+        requestAnimationFrame(updateEdgeInsets);
+    }, [onLayout, updateEdgeInsets]);
+    const safeAreaStyle = useMemo(() => {
+        const nextStyle = {};
+        if (mode === 'padding') {
+            nextStyle.paddingTop = getStyleInsetValue(flattenedStyle, mode, 'top') + edgeInsets.top;
+            nextStyle.paddingRight =
+                getStyleInsetValue(flattenedStyle, mode, 'right') + edgeInsets.right;
+            nextStyle.paddingBottom =
+                getStyleInsetValue(flattenedStyle, mode, 'bottom') + edgeInsets.bottom;
+            nextStyle.paddingLeft = getStyleInsetValue(flattenedStyle, mode, 'left') + edgeInsets.left;
+            return nextStyle;
+        }
+        nextStyle.marginTop = getStyleInsetValue(flattenedStyle, mode, 'top') + edgeInsets.top;
+        nextStyle.marginRight = getStyleInsetValue(flattenedStyle, mode, 'right') + edgeInsets.right;
+        nextStyle.marginBottom =
+            getStyleInsetValue(flattenedStyle, mode, 'bottom') + edgeInsets.bottom;
+        nextStyle.marginLeft = getStyleInsetValue(flattenedStyle, mode, 'left') + edgeInsets.left;
+        return nextStyle;
+    }, [
+        edgeInsets.bottom,
+        edgeInsets.left,
+        edgeInsets.right,
+        edgeInsets.top,
+        flattenedStyle,
+        mode,
+    ]);
+    return (_jsx(View, { ref: handleRef, onLayout: handleLayout, style: [style, safeAreaStyle], ...props, children: children }));
+});
+SafeAreaView.displayName = 'SafeAreaView';
+export default SafeAreaView;

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

@@ -0,0 +1,17 @@
+import { ViewProps } from 'react-native';
+export type SafeAreaEdge = 'top' | 'right' | 'bottom' | 'left';
+interface SafeAreaViewProps extends ViewProps {
+    /**
+     * Which edges should receive safe area compensation.
+     *
+     * @default ['top', 'right', 'bottom', 'left']
+     */
+    edges?: SafeAreaEdge[];
+    /**
+     * Whether safe area compensation should be applied as padding or margin.
+     *
+     * @default 'padding'
+     */
+    mode?: 'padding' | 'margin';
+}
+export default SafeAreaViewProps;

package/build/components/SafeAreaView/SafeAreaView.props.js

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

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

@@ -0,0 +1,2 @@
+export { default as SafeAreaView } from './SafeAreaView';
+export type { default as SafeAreaViewProps, SafeAreaEdge } from './SafeAreaView.props';

package/build/components/SafeAreaView/index.js

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

package/build/components/Select/Select.js

@@ -79,7 +79,7 @@ const Select = ({ options = [], value, onValueChange, label, labelVariant = 'bod
                         selectedValue: value,
                         onValueChange,
                         close: closeBottomSheet,
-                    }, children: _jsxs(SafeAreaView, { edges: useSafeAreaInsets ? ['top'] : [], style: { flex: 1 }, children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), searchable && (_jsx(View, { style: styles.searchContainer, children: _jsx(Input, { placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search", testID: testID ? `${testID}-search` : undefined }) })), children ? (_jsx(BottomSheetScrollView, { testID: testID ? `${testID}-options` : undefined, children: children })) : (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, testID: testID ? `${testID}-options` : undefined, ...listProps }))] }) }) })] }));
+                    }, children: _jsxs(SafeAreaView, { edges: useSafeAreaInsets ? ['top'] : [], style: { flex: 1 }, accessible: false, children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), searchable && (_jsx(View, { style: styles.searchContainer, children: _jsx(Input, { placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search", testID: testID ? `${testID}-search` : undefined }) })), children ? (_jsx(BottomSheetScrollView, { testID: testID ? `${testID}-options` : undefined, children: children })) : (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, testID: testID ? `${testID}-options` : undefined, ...listProps }))] }) }) })] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.30.3",
+  "version": "0.30.4-testid-fix-1",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -57,11 +57,11 @@
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
-    "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.4",
-    "@utilitywarehouse/hearth-svg-assets": "^0.6.0",
-    "@utilitywarehouse/hearth-react-icons": "^0.8.0"
+    "@utilitywarehouse/hearth-fonts": "^0.0.4",
+    "@utilitywarehouse/hearth-react-icons": "^0.8.0",
+    "@utilitywarehouse/hearth-svg-assets": "^0.6.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5.0.0",

package/src/components/Select/Select.tsx

@@ -185,7 +185,11 @@ const Select = ({
             close: closeBottomSheet,
           }}
         >
-          <SafeAreaView edges={useSafeAreaInsets ? ['top'] : []} style={{ flex: 1 }}>
+          <SafeAreaView
+            edges={useSafeAreaInsets ? ['top'] : []}
+            style={{ flex: 1 }}
+            accessible={false}
+          >
             {menuHeading && (
               <View style={styles.headingContainer}>
                 <DetailText size="lg">{menuHeading}</DetailText>