@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/build/components/Tabs/TabsList.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeftSmallIcon, ChevronRightSmallIcon, } from '@utilitywarehouse/hearth-react-native-icons';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Platform, View } from 'react-native';
+import Animated, { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import { useTabsContext } from './Tabs.context';
+const Indicator = Animated.createAnimatedComponent(View);
+const SCROLL_STEP_RATIO = 0.6;
+const SCROLL_BUTTON_HITSLOP = { top: 10, bottom: 10, left: 10, right: 10 };
+const TabsList = ({ children, style, ...rest }) => {
+    const { indicatorSizeSV, indicatorXSV } = useTabsContext();
+    const scrollRef = useRef(null);
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(false);
+    const containerWidthRef = useRef(0);
+    const contentWidthRef = useRef(0);
+    const scrollX = useSharedValue(0);
+    const indicatorStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: indicatorXSV.value }],
+        width: indicatorSizeSV.value,
+    }));
+    const updateScrollState = useCallback(() => {
+        const cw = containerWidthRef.current;
+        const contentW = contentWidthRef.current;
+        const x = scrollX.value;
+        const overflow = contentW > cw + 1;
+        setCanScrollLeft(overflow && x > 0);
+        setCanScrollRight(overflow && x + cw < contentW - 1);
+    }, [scrollX]);
+    const onLayoutContainer = (e) => {
+        containerWidthRef.current = e.nativeEvent.layout.width;
+        updateScrollState();
+    };
+    const onContentSizeChange = (w) => {
+        contentWidthRef.current = w;
+        updateScrollState();
+    };
+    const onScrollHandler = useAnimatedScrollHandler({
+        onScroll: (e) => {
+            scrollX.value = e.contentOffset.x;
+            runOnJS(updateScrollState)();
+        },
+    });
+    const scrollBy = (direction) => {
+        const viewW = containerWidthRef.current;
+        const step = viewW * SCROLL_STEP_RATIO;
+        const current = scrollX.value;
+        const max = Math.max(0, contentWidthRef.current - viewW);
+        const target = Math.max(0, Math.min(current + direction * step, max));
+        scrollRef.current?.scrollTo({ x: target, animated: true });
+    };
+    useEffect(() => {
+        if (Platform.OS === 'web') {
+            const handler = () => updateScrollState();
+            window.addEventListener('resize', handler);
+            return () => window.removeEventListener('resize', handler);
+        }
+        return;
+    }, [updateScrollState]);
+    return (_jsxs(View, { style: [styles.wrapper, style], ...rest, accessibilityRole: "tablist", children: [canScrollLeft && (_jsx(View, { style: [styles.iconButtonWrap, styles.scrollButtonLeft], accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : {}), children: _jsx(UnstyledIconButton, { accessibilityLabel: undefined, icon: ChevronLeftSmallIcon, onPress: () => scrollBy(-1), style: styles.iconButton, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", hitSlop: SCROLL_BUTTON_HITSLOP, ...(Platform.OS === 'web' ? { 'aria-hidden': true, tabIndex: -1 } : {}) }) })), _jsx(Animated.ScrollView, { ref: scrollRef, horizontal: true, showsHorizontalScrollIndicator: false, onLayout: onLayoutContainer, onContentSizeChange: onContentSizeChange, onScroll: onScrollHandler, scrollEventThrottle: 16, bounces: false, contentContainerStyle: styles.scrollContent, children: _jsxs(View, { style: styles.container, children: [children, _jsx(Indicator, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: [styles.indicator, indicatorStyle] })] }) }), canScrollRight && (_jsx(View, { style: [styles.iconButtonWrap, styles.scrollButtonRight], accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : {}), children: _jsx(UnstyledIconButton, { accessibilityLabel: undefined, icon: ChevronRightSmallIcon, onPress: () => scrollBy(1), style: styles.iconButton, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", hitSlop: SCROLL_BUTTON_HITSLOP, ...(Platform.OS === 'web' ? { 'aria-hidden': true, tabIndex: -1 } : {}) }) }))] }));
+};
+TabsList.displayName = 'TabsList';
+const styles = StyleSheet.create(theme => ({
+    wrapper: {
+        position: 'relative',
+        width: '100%',
+        borderBottomWidth: theme.components.tabs.divider.borderWidth,
+        borderColor: theme.components.tabs.divider.color,
+    },
+    scrollContent: {
+        paddingBottom: 0,
+    },
+    container: {
+        position: 'relative',
+        flexDirection: 'row',
+        gap: theme.components.tabs.gap,
+    },
+    indicator: {
+        position: 'absolute',
+        height: 6,
+        borderTopLeftRadius: theme.components.tabs.item.selected.borderTopRadius,
+        borderTopRightRadius: theme.components.tabs.item.selected.borderTopRadius,
+        borderBottomLeftRadius: theme.components.tabs.item.selected.borderBottomRadius,
+        borderBottomRightRadius: theme.components.tabs.item.selected.borderBottomRadius,
+        backgroundColor: theme.color.surface.brand.default,
+        bottom: 0,
+        left: 0,
+    },
+    scrollButtonLeft: {
+        position: 'absolute',
+        left: 0,
+        top: '50%',
+        transform: [{ translateY: -theme.space[150] }],
+        zIndex: 10,
+    },
+    scrollButtonRight: {
+        position: 'absolute',
+        right: 0,
+        top: '50%',
+        transform: [{ translateY: -theme.space[150] }],
+        zIndex: 10,
+    },
+    iconButtonWrap: {},
+    iconButton: {
+        backgroundColor: theme.color.surface.neutral.subtle,
+        width: theme.space[300],
+        height: theme.space[300],
+    },
+}));
+export default TabsList;

package/build/components/Tabs/TabsList.props.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+export interface TabsListProps extends ViewProps {
+    children: ReactNode;
+}
+export default TabsListProps;

package/build/components/Tabs/TabsList.props.js

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

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

@@ -0,0 +1,8 @@
+export { default as Tab } from './Tab';
+export type { TabProps } from './Tab.props';
+export { default as TabPanel } from './TabPanel';
+export type { TabPanelProps } from './TabPanel.props';
+export { default as Tabs } from './Tabs';
+export type { TabsProps } from './Tabs.props';
+export { default as TabsList } from './TabsList';
+export type { TabsListProps } from './TabsList.props';

package/build/components/Tabs/index.js

@@ -0,0 +1,4 @@
+export { default as Tab } from './Tab';
+export { default as TabPanel } from './TabPanel';
+export { default as Tabs } from './Tabs';
+export { default as TabsList } from './TabsList';

package/build/components/Textarea/TextareaField.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { StyleSheet } from 'react-native-unistyles';
 import { TextInput } from 'react-native';
-import { useTextareaContext } from './Textarea.context';
+import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
+import { useTextareaContext } from './Textarea.context';
 const TextareaField = ({ style, ...props }) => {
     const { disabled } = useTextareaContext();
-    const { components, color } = useTheme();
-    return (_jsx(TextInput, { placeholderTextColor: components.input.placeholderColor, selectionColor: color.purple[700], cursorColor: color.purple[700], verticalAlign: "top", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
+    const { color } = useTheme();
+    return (_jsx(TextInput, { placeholderTextColor: color.text.secondary, selectionColor: color.purple[700], cursorColor: color.purple[700], verticalAlign: "top", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
 };
 TextareaField.displayName = 'TextareaField';
 const styles = StyleSheet.create(theme => ({
@@ -17,7 +17,7 @@ const styles = StyleSheet.create(theme => ({
         justifyContent: 'flex-start',
         textAlignVertical: 'top',
         alignItems: 'flex-start',
-        color: theme.components.text.color,
+        color: theme.color.text.primary,
         fontSize: theme.typography.mobile.bodyText.md.fontSize,
         fontFamily: theme.typography.mobile.bodyText.fontFamily,
         fontWeight: theme.typography.mobile.bodyText.fontWeight,

package/build/components/Textarea/TextareaRoot.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { StyleSheet } from 'react-native-unistyles';
 import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { TextareaContext } from './Textarea.context';
 const TextareaRoot = ({ children, style, states, validationStatus, ...props }) => {
     const { focus = false, disabled = false, readonly = false } = states || {};
@@ -12,7 +12,7 @@ const TextareaRoot = ({ children, style, states, validationStatus, ...props }) =
 TextareaRoot.displayName = 'TextareaRoot';
 const styles = StyleSheet.create(theme => ({
     container: {
-        borderColor: theme.components.input.borderColor,
+        borderColor: theme.color.border.strong,
         height: theme.components.input.textArea.height,
         borderRadius: theme.components.input.borderRadius,
         flexDirection: 'row',
@@ -20,11 +20,11 @@ const styles = StyleSheet.create(theme => ({
         alignContent: 'center',
         paddingHorizontal: theme.components.input.paddingHorizontal,
         paddingVertical: theme.components.input.paddingVertical,
-        backgroundColor: theme.components.input.backgroundColor,
+        backgroundColor: theme.color.surface.neutral.strong,
         gap: theme.components.input.gap,
         outlineStyle: 'solid',
         outlineWidth: theme.components.input.borderWidth,
-        outlineColor: theme.components.input.borderColor,
+        outlineColor: theme.color.border.strong,
         variants: {
             focus: {
                 true: {
@@ -33,12 +33,12 @@ const styles = StyleSheet.create(theme => ({
             },
             validationStatus: {
                 invalid: {
-                    borderColor: theme.components.input.borderColorInvalid,
-                    outlineColor: theme.components.input.borderColorInvalid,
+                    borderColor: theme.color.feedback.danger.border,
+                    outlineColor: theme.color.feedback.danger.border,
                 },
                 valid: {
-                    borderColor: theme.components.input.borderColorValid,
-                    outlineColor: theme.components.input.borderColorValid,
+                    borderColor: theme.color.feedback.positive.border,
+                    outlineColor: theme.color.feedback.positive.border,
                 },
                 initial: {},
             },
@@ -49,7 +49,7 @@ const styles = StyleSheet.create(theme => ({
             },
             readonly: {
                 true: {
-                    borderColor: theme.components.input.borderColorReadOnly,
+                    borderColor: theme.color.border.subtle,
                 },
             },
         },

package/build/components/ToggleButton/ToggleButtonIcon.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { Platform } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
-import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 const ButtonIcon = ({ children, toggled, as = TickSmallIcon, ...props }) => {
     styles.useVariants({ toggled });
     const IconAny = Icon;
@@ -13,11 +13,11 @@ const ButtonIcon = ({ children, toggled, as = TickSmallIcon, ...props }) => {
 ButtonIcon.displayName = 'ButtonIcon';
 const styles = StyleSheet.create(theme => ({
     icon: {
-        color: theme.components.toggleButton.foregroundColor,
+        color: theme.color.interactive.neutral.foreground.subtle,
         variants: {
             toggled: {
                 true: {
-                    color: theme.components.toggleButton.selected.foregroundColor,
+                    color: theme.color.interactive.brand.foreground.strong,
                 },
             },
         },

package/build/components/ToggleButton/ToggleButtonRoot.js

@@ -31,35 +31,35 @@ const styles = StyleSheet.create(theme => ({
         minWidth: theme.components.toggleButton.minWidth,
         paddingHorizontal: theme.components.toggleButton.paddingHorizontal,
         paddingVertical: theme.components.toggleButton.paddingVertical - theme.components.toggleButton.borderWidth,
-        borderColor: theme.components.toggleButton.borderColor,
+        borderColor: theme.color.interactive.neutral.border.subtle,
         height: theme.components.toggleButton.height,
         _web: {
             '_focus-visible': theme.helpers.focusVisible,
             _hover: {
-                backgroundColor: theme.components.toggleButton.backgroundColorHover,
+                backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
             },
             _active: {
-                backgroundColor: theme.components.toggleButton.backgroundColorActive,
+                backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
             },
         },
         variants: {
             toggled: {
                 true: {
-                    backgroundColor: theme.components.toggleButton.selected.backgroundColor,
-                    borderColor: theme.components.toggleButton.selected.borderColor,
+                    backgroundColor: theme.color.interactive.brand.surface.strong.default,
+                    borderColor: theme.color.interactive.brand.border.strong,
                     _web: {
                         _hover: {
-                            backgroundColor: theme.components.toggleButton.selected.backgroundColorHover,
+                            backgroundColor: theme.color.interactive.brand.surface.strong.hover,
                         },
                         _active: {
-                            backgroundColor: theme.components.toggleButton.selected.backgroundColorActive,
+                            backgroundColor: theme.color.interactive.brand.surface.strong.active,
                         },
                     },
                 },
             },
             active: {
                 true: {
-                    backgroundColor: theme.components.toggleButton.backgroundColorActive,
+                    backgroundColor: theme.color.interactive.brand.surface.strong.active,
                 },
             },
         },
@@ -68,7 +68,7 @@ const styles = StyleSheet.create(theme => ({
                 toggled: true,
                 active: true,
                 styles: {
-                    backgroundColor: theme.components.toggleButton.selected.backgroundColorActive,
+                    backgroundColor: theme.color.interactive.brand.surface.strong.active,
                 },
             },
         ],

package/build/components/ToggleButton/ToggleButtonText.js

@@ -8,11 +8,11 @@ const ToggleButtonText = ({ children, toggled, ...props }) => {
 ToggleButtonText.displayName = 'ToggleButtonText';
 const styles = StyleSheet.create(theme => ({
     text: {
-        color: theme.components.toggleButton.foregroundColor,
+        color: theme.color.interactive.neutral.foreground.subtle,
         variants: {
             toggled: {
                 true: {
-                    color: theme.components.toggleButton.selected.foregroundColor,
+                    color: theme.color.interactive.brand.foreground.strong,
                 },
             },
         },

package/build/components/ToggleButtonCard/ToggleButtonCardRoot.js

@@ -25,9 +25,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,
@@ -38,7 +38,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/index.d.ts

@@ -2,12 +2,14 @@ export * from './Accordion';
 export * from './Alert';
 export * from './Badge';
 export * from './BodyText';
-export * from './Box';
 export * from './BottomSheet';
+export * from './Box';
 export * from './Button';
 export * from './Card';
-export * from './Checkbox';
 export * from './Center';
+export * from './Checkbox';
+export * from './CurrencyInput';
+export * from './DescriptionList';
 export * from './DetailText';
 export * from './Divider';
 export * from './Flex';
@@ -18,19 +20,23 @@ export * from './Helper';
 export * from './HTMLElements';
 export * from './Icon';
 export * from './IconButton';
+export * from './IconContainer';
 export * from './InlineLink';
 export * from './Input';
 export * from './Label';
 export * from './Link';
 export * from './List';
+export * from './Modal';
 export * from './Radio';
 export * from './RadioCard';
+export * from './SectionHeader';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';
 export * from './Switch';
+export * from './Tabs';
 export * from './Textarea';
 export * from './ToggleButtonCard';
-export { FlatList, ScrollView, KeyboardAvoidingView, StatusBar, View, SectionList, Image, } from 'react-native';
+export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, StatusBar, View, } from 'react-native';
 export { Pressable } from 'react-native';
 export { createIcon } from '@gluestack-ui/icon';

package/build/components/index.js

@@ -3,12 +3,14 @@ export * from './Accordion';
 export * from './Alert';
 export * from './Badge';
 export * from './BodyText';
-export * from './Box';
 export * from './BottomSheet';
+export * from './Box';
 export * from './Button';
 export * from './Card';
-export * from './Checkbox';
 export * from './Center';
+export * from './Checkbox';
+export * from './CurrencyInput';
+export * from './DescriptionList';
 export * from './DetailText';
 export * from './Divider';
 export * from './Flex';
@@ -19,19 +21,23 @@ export * from './Helper';
 export * from './HTMLElements';
 export * from './Icon';
 export * from './IconButton';
+export * from './IconContainer';
 export * from './InlineLink';
 export * from './Input';
 export * from './Label';
 export * from './Link';
 export * from './List';
+export * from './Modal';
 export * from './Radio';
 export * from './RadioCard';
+export * from './SectionHeader';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';
 export * from './Switch';
+export * from './Tabs';
 export * from './Textarea';
 export * from './ToggleButtonCard';
-export { FlatList, ScrollView, KeyboardAvoidingView, StatusBar, View, SectionList, Image, } from 'react-native';
+export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, StatusBar, View, } from 'react-native';
 export { Pressable } from 'react-native';
 export { createIcon } from '@gluestack-ui/icon';