@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

package/build/components/Modal/Modal.web.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import { AccessibilityInfo, Image, Platform, View, findNodeHandle } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withTiming, } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { hexWithOpacity } from '../../utils';
+import { BodyText } from '../BodyText';
+import { BottomSheetModal, BottomSheetScrollView } from '../BottomSheet';
+import { Button } from '../Button';
+import { Heading } from '../Heading';
+import { Spinner } from '../Spinner';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, fullscreen = false, ...props }) => {
+    const bottomSheetModalRef = useRef(null);
+    const viewRef = useRef(null);
+    const scrollViewRef = useRef(null);
+    const theme = useTheme();
+    const backgroundOpacity = useSharedValue(0);
+    const pretendContentTranslateY = useSharedValue(20);
+    const triggerCloseAnimation = useCallback(() => {
+        if (Platform.OS === 'android' && fullscreen) {
+            pretendContentTranslateY.value = withTiming(20, {
+                duration: 50,
+                easing: Easing.in(Easing.quad),
+            });
+            backgroundOpacity.value = withTiming(0, {
+                duration: 100,
+                easing: Easing.in(Easing.quad),
+            });
+        }
+    }, [Platform.OS, fullscreen, pretendContentTranslateY, backgroundOpacity]);
+    useImperativeHandle(ref, () => ({
+        ...bottomSheetModalRef.current,
+        triggerCloseAnimation,
+    }));
+    // Trigger animations on render for fullscreen Android modal
+    useEffect(() => {
+        if (Platform.OS === 'android' && fullscreen) {
+            backgroundOpacity.value = withDelay(300, withTiming(1, {
+                duration: 200,
+                easing: Easing.out(Easing.quad),
+            }));
+            pretendContentTranslateY.value = withDelay(500, withTiming(0, {
+                duration: 300,
+                easing: Easing.out(Easing.quad),
+            }));
+        }
+    }, [fullscreen, backgroundOpacity, pretendContentTranslateY]);
+    const animatedBackgroundStyle = useAnimatedStyle(() => ({
+        backgroundColor: hexWithOpacity(theme.components.overlay.backgroundColor, backgroundOpacity.value * (theme.components.overlay.opacity / 100)),
+    }));
+    const animatedFullscreenStyle = useAnimatedStyle(() => ({
+        backgroundColor: hexWithOpacity(theme.components.overlay.backgroundColor, backgroundOpacity.value * (theme.components.overlay.opacity / 100)),
+    }));
+    const animatedPretendContentStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: pretendContentTranslateY.value }],
+    }));
+    const handleChange = (index, position, type) => {
+        if (index > -1) {
+            // Add a small delay to ensure the modal is fully rendered
+            setTimeout(() => {
+                // Announce the modal opening to screen readers
+                AccessibilityInfo.announceForAccessibility('Modal opened.');
+                const scrollViewTargetRef = scrollViewRef.current?.getInnerViewNode();
+                const targetRef = viewRef.current;
+                if ((Platform.OS === 'android' && targetRef) || scrollViewTargetRef) {
+                    const nodeHandle = findNodeHandle(Platform.OS === 'android' ? targetRef : scrollViewTargetRef);
+                    if (nodeHandle) {
+                        AccessibilityInfo.setAccessibilityFocus(nodeHandle);
+                    }
+                }
+            }, 100);
+        }
+        props.onChange?.(index, position, type);
+    };
+    const handleCloseButtonPress = () => {
+        bottomSheetModalRef.current?.dismiss();
+        if (onPressCloseButton) {
+            onPressCloseButton();
+        }
+    };
+    const handlePrimaryButtonPress = () => {
+        if (onPressPrimaryButton) {
+            onPressPrimaryButton();
+        }
+        if (closeOnPrimaryButtonPress) {
+            bottomSheetModalRef.current?.dismiss();
+        }
+    };
+    const handleSecondaryButtonPress = () => {
+        if (onPressSecondaryButton) {
+            onPressSecondaryButton();
+        }
+        if (closeOnSecondaryButtonPress) {
+            bottomSheetModalRef.current?.dismiss();
+        }
+    };
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: "Loading..." })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [_jsx(Image, { style: styles.image, ...image }), _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, _jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] })] })) }));
+    return fullscreen ? (_jsxs(View, { style: { flex: 1, backgroundColor: theme.color.background.primary }, children: [Platform.OS === 'android' ? (_jsx(Animated.View, { style: [styles.androidContainer, animatedBackgroundStyle], children: _jsx(Animated.View, { style: [styles.pretendContent, animatedPretendContentStyle] }) })) : null, _jsx(Animated.View, { style: [styles.fullscreenContainer, Platform.OS === 'android' && animatedFullscreenStyle], children: _jsx(View, { style: styles.fullscreenContent, children: content }) })] })) : (_jsx(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, ...props, onChange: handleChange, children: _jsx(BottomSheetScrollView, { contentContainerStyle: styles.container, ref: scrollViewRef, children: content }) }));
+};
+const styles = StyleSheet.create((theme, rt) => ({
+    container: {
+        flex: 1,
+        gap: theme.components.dialog.gap,
+    },
+    header: {
+        flexDirection: 'row',
+        gap: theme.components.dialog.gap,
+    },
+    headerTextContent: {
+        flex: 1,
+        gap: theme.components.dialog.content.gap,
+    },
+    image: {
+        width: 260,
+        height: 260,
+    },
+    imageContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 1,
+    },
+    textContent: {
+        gap: theme.components.dialog.content.gap,
+    },
+    loadingContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: 140,
+        gap: theme.components.dialog.content.gap,
+    },
+    footer: {
+        gap: theme.components.dialog.action.gap,
+    },
+    fullscreenContainer: {
+        flex: 1,
+        ...(Platform.OS === 'ios' ? { backgroundColor: theme.components.overlay.backgroundColor } : {}),
+    },
+    fullscreenContent: {
+        flex: 1,
+        borderTopLeftRadius: theme.components.dialog.borderRadius,
+        borderTopRightRadius: theme.components.dialog.borderRadius,
+        backgroundColor: theme.color.surface.neutral.strong,
+        gap: theme.components.dialog.gap,
+        padding: theme.components.dialog.padding,
+        paddingBottom: theme.components.dialog.padding + rt.insets.bottom,
+    },
+    androidContainer: {
+        height: rt.insets.top + 18,
+        paddingLeft: theme.components.dialog.padding,
+        paddingRight: theme.components.dialog.padding,
+        justifyContent: 'flex-end',
+    },
+    pretendContent: {
+        borderTopLeftRadius: theme.components.dialog.borderRadius,
+        borderTopRightRadius: theme.components.dialog.borderRadius,
+        height: 12,
+        backgroundColor: theme.components.parts.modalStack.backgroundColorCardTop,
+    },
+}));
+export default Modal;

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

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

package/build/components/Modal/index.js

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

package/build/components/Radio/RadioIndicator.js

@@ -17,8 +17,8 @@ const styles = StyleSheet.create(theme => ({
     container: {
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: theme.components.radio.unchecked.backgroundColor,
-        borderColor: theme.components.radio.unchecked.borderColor,
+        backgroundColor: theme.color.surface.neutral.strong,
+        borderColor: theme.color.border.strong,
         borderWidth: theme.components.radio.borderWidth,
         borderRadius: theme.components.radio.borderRadius,
         width: 24,

package/build/components/Radio/RadioTileRoot.js

@@ -18,14 +18,14 @@ const styles = StyleSheet.create(theme => ({
         gap: theme.components.radio.gap,
         padding: theme.components.radio.tile.padding,
         borderWidth: theme.components.radio.tile.borderWidth,
-        borderColor: theme.components.radio.tile.borderColor,
+        borderColor: theme.color.border.subtle,
         borderRadius: theme.components.radio.tile.borderRadius,
-        backgroundColor: theme.components.radio.tile.backgroundColor,
+        backgroundColor: theme.color.surface.neutral.strong,
         variants: {
             checked: {
                 true: {
                     borderWidth: theme.components.radio.tile.borderWidthSelected,
-                    borderColor: theme.components.radio.tile.borderColorSelected,
+                    borderColor: theme.color.border.strong,
                     margin: -theme.components.radio.tile.borderWidthSelected / 2,
                 },
             },

package/build/components/RadioCard/RadioCardIndicator.js

@@ -17,8 +17,8 @@ const styles = StyleSheet.create(theme => ({
     container: {
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: theme.components.radio.unchecked.backgroundColor,
-        borderColor: theme.components.radio.unchecked.borderColor,
+        backgroundColor: theme.color.surface.neutral.strong,
+        borderColor: theme.color.border.strong,
         borderWidth: theme.components.radio.borderWidth,
         borderRadius: theme.components.radio.borderRadius,
         width: 24,

package/build/components/RadioCard/RadioCardRoot.js

@@ -20,9 +20,9 @@ const styles = StyleSheet.create(theme => ({
         flexDirection: 'column',
         gap: theme.components.card.selectable.gap,
         borderRadius: theme.components.card.borderRadius,
-        backgroundColor: theme.components.card.neutral.whiteBackgroundColor,
+        backgroundColor: theme.color.surface.neutral.strong,
         borderWidth: theme.components.card.selectable.borderWidth,
-        borderColor: theme.components.card.selectable.borderColor,
+        borderColor: theme.color.border.subtle,
         alignSelf: 'stretch',
         padding: {
             base: theme.components.card.mobile.padding,
@@ -33,7 +33,7 @@ const styles = StyleSheet.create(theme => ({
             selected: {
                 true: {
                     borderWidth: theme.components.card.selectable.borderWidthSelected,
-                    borderColor: theme.components.card.selectable.borderColorSelected,
+                    borderColor: theme.color.border.strong,
                     margin: -theme.components.card.selectable.borderWidthSelected / 2,
                 },
             },

package/build/components/SectionHeader/SectionHeader.d.ts

@@ -0,0 +1,6 @@
+import SectionHeaderProps from './SectionHeader.props';
+declare const SectionHeader: {
+    ({ heading, helperText, children, style, linkHref, linkIcon, linkIconPosition, linkOnPress, linkShowIcon, linkTarget, linkText, ...props }: SectionHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SectionHeader;

package/build/components/SectionHeader/SectionHeader.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Link } from '../Link';
+import SectionHeaderTitle from './SectionHeaderHeading';
+import SectionHeaderHelperText from './SectionHeaderHelperText';
+import SectionHeaderTextContent from './SectionHeaderTextContent';
+const SectionHeader = ({ heading, helperText, children, style, linkHref, linkIcon, linkIconPosition, linkOnPress, linkShowIcon, linkTarget, linkText, ...props }) => {
+    return (_jsx(View, { ...props, style: [styles.container, style], children: children ? (children) : (_jsxs(_Fragment, { children: [_jsxs(SectionHeaderTextContent, { children: [_jsx(SectionHeaderTitle, { children: heading }), !!helperText && _jsx(SectionHeaderHelperText, { children: helperText })] }), !!linkText && (_jsx(Link, { href: linkHref, onPress: linkOnPress, icon: linkIcon, showIcon: linkShowIcon, iconPosition: linkIconPosition, target: linkTarget, children: linkText }))] })) }));
+};
+SectionHeader.displayName = 'SectionHeader';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        flexDirection: 'row',
+        gap: theme.components.sectionHeader.gap,
+        alignItems: 'flex-start',
+    },
+}));
+export default SectionHeader;

package/build/components/{List/ListHeading/ListHeading.props.d.ts → SectionHeader/SectionHeader.props.d.ts}

@@ -1,33 +1,31 @@
 import { ComponentType, Ref } from 'react';
 import type { ViewProps, View } from 'react-native';
-interface ListHeadingBaseProps extends Omit<ViewProps, 'children'> {
+interface SectionHeaderBaseProps extends Omit<ViewProps, 'children'> {
     ref?: Ref<View>;
 }
-export interface ListHeadingWithChildren extends ListHeadingBaseProps {
+export interface SectionHeaderWithChildren extends SectionHeaderBaseProps {
     children: ViewProps['children'];
-    text?: never;
+    heading?: never;
     helperText?: never;
     linkText?: never;
     linkHref?: never;
     linkOnPress?: never;
     linkTarget?: never;
-    linkDisabled?: never;
     linkIcon?: never;
     linkIconPosition?: never;
     linkShowIcon?: never;
 }
-export interface ListHeadingWithoutChildren extends ListHeadingBaseProps {
+export interface SectionHeaderWithoutChildren extends SectionHeaderBaseProps {
     children?: never;
-    text: string;
+    heading: string;
     helperText?: string;
     linkText?: string;
     linkHref?: string;
     linkOnPress?: () => void;
     linkTarget?: '_blank' | '_self' | '_parent' | '_top';
-    linkDisabled?: boolean;
     linkIcon?: ComponentType;
     linkIconPosition?: 'left' | 'right';
     linkShowIcon?: boolean;
 }
-type ListHeadingProps = ListHeadingWithChildren | ListHeadingWithoutChildren;
-export default ListHeadingProps;
+type SectionHeaderProps = SectionHeaderWithChildren | SectionHeaderWithoutChildren;
+export default SectionHeaderProps;

package/build/components/SectionHeader/SectionHeaderHeading.d.ts

@@ -0,0 +1,6 @@
+import HeadingProps from '../Heading/Heading.props';
+declare const SectionHeaderHeading: {
+    ({ children, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SectionHeaderHeading;

package/build/components/SectionHeader/SectionHeaderHeading.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Heading } from '../Heading';
+const SectionHeaderHeading = ({ children, ...props }) => {
+    return (_jsx(Heading, { size: "md", ...props, children: children }));
+};
+SectionHeaderHeading.displayName = 'SectionHeaderHeading';
+export default SectionHeaderHeading;

package/build/components/SectionHeader/SectionHeaderHelperText.d.ts

@@ -0,0 +1,6 @@
+import TextProps from '../BodyText/BodyText.props';
+declare const SectionHeaderHelperText: {
+    ({ children, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SectionHeaderHelperText;

package/build/components/{List/ListHeading/ListHeadingHelperText.js → SectionHeader/SectionHeaderHelperText.js}

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../../BodyText';
-const ListHeadingHelperText = ({ children, ...props }) => {
+import { BodyText } from '../BodyText';
+const SectionHeaderHelperText = ({ children, ...props }) => {
     return (_jsx(BodyText, { size: "md", ...props, style: [styles.helperText, props.style], children: children }));
 };
-ListHeadingHelperText.displayName = 'ListHeadingHelperText';
+SectionHeaderHelperText.displayName = 'SectionHeaderHelperText';
 const styles = StyleSheet.create(theme => ({
     helperText: {
-        color: theme.components.text.colorSecondary,
+        color: theme.color.text.secondary,
     },
 }));
-export default ListHeadingHelperText;
+export default SectionHeaderHelperText;

package/build/components/{List/ListHeading/ListHeadingTextContent.d.ts → SectionHeader/SectionHeaderTextContent.d.ts}

@@ -1,6 +1,6 @@
 import { type ViewProps } from 'react-native';
-declare const ListHeadingTextContent: {
+declare const SectionHeaderTextContent: {
     ({ children, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export default ListHeadingTextContent;
+export default SectionHeaderTextContent;

package/build/components/{List/ListHeading/ListHeadingTextContent.js → SectionHeader/SectionHeaderTextContent.js}

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-const ListHeadingTextContent = ({ children, ...props }) => {
+const SectionHeaderTextContent = ({ children, ...props }) => {
     return (_jsx(View, { ...props, style: [styles.container, props.style], children: children }));
 };
-ListHeadingTextContent.displayName = 'ListHeadingTextContent';
+SectionHeaderTextContent.displayName = 'SectionHeaderTextContent';
 const styles = StyleSheet.create(theme => ({
     container: {
-        gap: theme.components.list.heading.textContentGap,
+        gap: theme.components.sectionHeader.textContent.gap,
         flex: 1,
     },
 }));
-export default ListHeadingTextContent;
+export default SectionHeaderTextContent;

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

@@ -0,0 +1,4 @@
+export { default as SectionHeader } from './SectionHeader';
+export { default as SectionHeaderHeading } from './SectionHeaderHeading';
+export { default as SectionHeaderHelperText } from './SectionHeaderHelperText';
+export { default as SectionHeaderTextContent } from './SectionHeaderTextContent';

package/build/components/SectionHeader/index.js

@@ -0,0 +1,4 @@
+export { default as SectionHeader } from './SectionHeader';
+export { default as SectionHeaderHeading } from './SectionHeaderHeading';
+export { default as SectionHeaderHelperText } from './SectionHeaderHelperText';
+export { default as SectionHeaderTextContent } from './SectionHeaderTextContent';

package/build/components/Select/Select.js

@@ -86,9 +86,9 @@ const styles = StyleSheet.create(theme => ({
     selectContainer: {
         flexDirection: 'row',
         alignItems: 'center',
-        backgroundColor: theme.components.select.backgroundColor,
+        backgroundColor: theme.color.surface.neutral.strong,
         borderWidth: theme.components.select.borderWidth,
-        borderColor: theme.components.select.borderColor,
+        borderColor: theme.color.border.strong,
         borderRadius: theme.components.select.borderRadius,
         paddingHorizontal: theme.components.select.paddingHorizontal,
         paddingVertical: theme.components.select.paddingVertical,
@@ -101,16 +101,16 @@ const styles = StyleSheet.create(theme => ({
             },
             readonly: {
                 true: {
-                    borderColor: theme.components.select.borderColorReadOnly,
+                    borderColor: theme.color.border.subtle,
                 },
             },
             validationStatus: {
                 initial: {},
                 valid: {
-                    borderColor: theme.components.select.borderColorValid,
+                    borderColor: theme.color.feedback.positive.border,
                 },
                 invalid: {
-                    borderColor: theme.components.select.borderColorInvalid,
+                    borderColor: theme.color.feedback.danger.border,
                 },
             },
         },
@@ -133,27 +133,27 @@ const styles = StyleSheet.create(theme => ({
     pressedContainer: pressed => ({
         outlineWidth: pressed ? theme.components.select.borderWidth : 0,
         outlineStyle: 'solid',
-        outlineColor: pressed ? theme.components.select.borderColor : 'transparent',
+        outlineColor: pressed ? theme.color.border.strong : 'transparent',
         variants: {
             validationStatus: {
                 initial: {},
                 valid: {
-                    outlineColor: theme.components.select.borderColorValid,
+                    outlineColor: theme.color.feedback.positive.border,
                 },
                 invalid: {
-                    outlineColor: theme.components.select.borderColorInvalid,
+                    outlineColor: theme.color.feedback.danger.border,
                 },
             },
         },
     }),
     icon: {
-        color: theme.components.icon.color,
+        color: theme.color.icon.primary,
     },
     placeholderText: {
         variants: {
             hasValue: {
                 false: {
-                    color: theme.components.text.colorSecondary,
+                    color: theme.color.text.secondary,
                 },
             },
         },

package/build/components/Select/SelectOption.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 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 { BodyText } from '../BodyText';
 import { Icon } from '../Icon';
+import { useSelectContext } from './Select.context';
 const SelectOption = ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, }) => {
     const { selectedValue, onValueChange, close } = useSelectContext();
     const isSelected = selected !== undefined ? selected : selectedValue === value;
@@ -47,15 +47,15 @@ const styles = StyleSheet.create(theme => ({
         },
         _web: {
             _hover: {
-                backgroundColor: theme.components.select.dropdown.item.backgroundColorHover,
+                backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
             },
         },
     },
     icon: {
-        color: theme.components.select.dropdown.item.foregroundColor,
+        color: theme.color.interactive.functional.foreground.subtle,
     },
     pressed: {
-        backgroundColor: theme.components.select.dropdown.item.backgroundColorActive,
+        backgroundColor: theme.color.interactive.functional.surface.subtle.active,
     },
     labelContainer: {
         flex: 1,

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable react-hooks/exhaustive-deps */
+import { createSpinner } from '@gluestack-ui/spinner';
 import { useCallback, useEffect, useMemo } from 'react';
-import Animated, { useSharedValue, withTiming, useAnimatedProps, Easing, withSequence, withRepeat, useReducedMotion, } from 'react-native-reanimated';
+import { View } from 'react-native';
+import Animated, { Easing, useAnimatedProps, useReducedMotion, useSharedValue, withRepeat, withSequence, withTiming, } 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);

package/build/components/Switch/Switch.js

@@ -7,7 +7,7 @@ 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 { components, color } = 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;
@@ -19,7 +19,10 @@ const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = '
         transform: [{ translateX: offset.value }],
     }));
     const animatedSwitchBackgroundStyle = useAnimatedStyle(() => {
-        const backgroundColor = interpolateColor(progress.value, [0, 1], [components.switch.unchecked.backgroundColor, components.switch.checked.backgroundColor]);
+        const backgroundColor = interpolateColor(progress.value, [0, 1], [
+            color.interactive.functional.surface.strong.default,
+            color.interactive.brand.surface.strong.default,
+        ]);
         return { backgroundColor };
     });
     // Icon animations
@@ -89,10 +92,10 @@ const styles = StyleSheet.create(theme => ({
             },
             value: {
                 true: {
-                    backgroundColor: theme.components.switch.checked.backgroundColor,
+                    backgroundColor: theme.color.interactive.brand.surface.strong.default,
                 },
                 false: {
-                    backgroundColor: theme.components.switch.unchecked.backgroundColor,
+                    backgroundColor: theme.color.interactive.functional.surface.strong.default,
                 },
             },
             disabled: {
@@ -103,7 +106,7 @@ const styles = StyleSheet.create(theme => ({
         },
     },
     thumb: {
-        backgroundColor: theme.components.switch.circle.backgroundColor,
+        backgroundColor: theme.color.surface.neutral.strong,
         alignItems: 'center',
         justifyContent: 'center',
         variants: {
@@ -128,10 +131,10 @@ const styles = StyleSheet.create(theme => ({
         variants: {
             value: {
                 true: {
-                    color: theme.components.switch.checked.iconColor,
+                    color: theme.color.icon.primary,
                 },
                 false: {
-                    color: theme.components.switch.unchecked.iconColor,
+                    color: theme.color.icon.primary,
                 },
             },
         },

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

@@ -6,10 +6,9 @@ import Animated, { Easing, interpolateColor, useAnimatedStyle, useReducedMotion,
 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 { components, color } = 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;
@@ -21,7 +20,10 @@ const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = '
         transform: [{ translateX: offset.value }],
     }));
     const animatedSwitchBackgroundStyle = useAnimatedStyle(() => {
-        const backgroundColor = interpolateColor(progress.value, [0, 1], [components.switch.unchecked.backgroundColor, components.switch.checked.backgroundColor]);
+        const backgroundColor = interpolateColor(progress.value, [0, 1], [
+            color.interactive.functional.surface.strong.default,
+            color.interactive.brand.surface.strong.default,
+        ]);
         return { backgroundColor };
     });
     // Icon animations
@@ -91,10 +93,10 @@ const styles = StyleSheet.create(theme => ({
             },
             value: {
                 true: {
-                    backgroundColor: theme.components.switch.checked.backgroundColor,
+                    backgroundColor: theme.color.interactive.brand.surface.strong.default,
                 },
                 false: {
-                    backgroundColor: theme.components.switch.unchecked.backgroundColor,
+                    backgroundColor: theme.color.interactive.functional.surface.strong.default,
                 },
             },
             disabled: {
@@ -105,7 +107,7 @@ const styles = StyleSheet.create(theme => ({
         },
     },
     thumb: {
-        backgroundColor: theme.components.switch.circle.backgroundColor,
+        backgroundColor: theme.color.surface.neutral.strong,
         alignItems: 'center',
         justifyContent: 'center',
         variants: {
@@ -130,10 +132,10 @@ const styles = StyleSheet.create(theme => ({
         variants: {
             value: {
                 true: {
-                    color: theme.components.switch.checked.iconColor,
+                    color: theme.color.icon.primary,
                 },
                 false: {
-                    color: theme.components.switch.unchecked.iconColor,
+                    color: theme.color.icon.primary,
                 },
             },
         },