@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/src/components/Tabs/TabsList.tsx

@@ -0,0 +1,194 @@
+import {
+  ChevronLeftSmallIcon,
+  ChevronRightSmallIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { LayoutChangeEvent, 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';
+import type TabsListProps from './TabsList.props';
+
+const Indicator = Animated.createAnimatedComponent(View);
+
+const SCROLL_STEP_RATIO = 0.6;
+const SCROLL_BUTTON_HITSLOP = { top: 10, bottom: 10, left: 10, right: 10 } as const;
+
+const TabsList = ({ children, style, ...rest }: TabsListProps) => {
+  const { indicatorSizeSV, indicatorXSV } = useTabsContext();
+
+  const scrollRef = useRef<Animated.ScrollView | null>(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: LayoutChangeEvent) => {
+    containerWidthRef.current = e.nativeEvent.layout.width;
+    updateScrollState();
+  };
+  const onContentSizeChange = (w: number) => {
+    contentWidthRef.current = w;
+    updateScrollState();
+  };
+  const onScrollHandler = useAnimatedScrollHandler({
+    onScroll: (e: { contentOffset: { x: number } }) => {
+      scrollX.value = e.contentOffset.x;
+      runOnJS(updateScrollState)();
+    },
+  });
+
+  const scrollBy = (direction: 1 | -1) => {
+    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 (
+    <View style={[styles.wrapper, style]} {...rest} accessibilityRole="tablist">
+      {canScrollLeft && (
+        <View
+          style={[styles.iconButtonWrap, styles.scrollButtonLeft]}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : {})}
+        >
+          <UnstyledIconButton
+            accessibilityLabel={undefined}
+            icon={ChevronLeftSmallIcon}
+            onPress={() => scrollBy(-1)}
+            style={styles.iconButton}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+            hitSlop={SCROLL_BUTTON_HITSLOP}
+            {...(Platform.OS === 'web' ? ({ 'aria-hidden': true, tabIndex: -1 } as any) : {})}
+          />
+        </View>
+      )}
+      <Animated.ScrollView
+        ref={scrollRef}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        onLayout={onLayoutContainer}
+        onContentSizeChange={onContentSizeChange}
+        onScroll={onScrollHandler}
+        scrollEventThrottle={16}
+        bounces={false}
+        contentContainerStyle={styles.scrollContent}
+      >
+        <View style={styles.container}>
+          {children}
+          <Indicator
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+            style={[styles.indicator, indicatorStyle]}
+          />
+        </View>
+      </Animated.ScrollView>
+      {canScrollRight && (
+        <View
+          style={[styles.iconButtonWrap, styles.scrollButtonRight]}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : {})}
+        >
+          <UnstyledIconButton
+            accessibilityLabel={undefined}
+            icon={ChevronRightSmallIcon}
+            onPress={() => scrollBy(1)}
+            style={styles.iconButton}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+            hitSlop={SCROLL_BUTTON_HITSLOP}
+            {...(Platform.OS === 'web' ? ({ 'aria-hidden': true, tabIndex: -1 } as any) : {})}
+          />
+        </View>
+      )}
+    </View>
+  );
+};
+
+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/src/components/Tabs/index.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/src/components/Textarea/TextareaField.tsx

@@ -1,15 +1,15 @@
+import { TextInput, TextInputProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { TextInputProps, TextInput } from 'react-native';
-import { useTextareaContext } from './Textarea.context';
 import { useTheme } from '../../hooks';
+import { useTextareaContext } from './Textarea.context';
 
 const TextareaField = ({ style, ...props }: TextInputProps) => {
   const { disabled } = useTextareaContext();
-  const { components, color } = useTheme();
+  const { color } = useTheme();
 
   return (
     <TextInput
-      placeholderTextColor={components.input.placeholderColor}
+      placeholderTextColor={color.text.secondary}
       selectionColor={color.purple[700]}
       cursorColor={color.purple[700]}
       verticalAlign="top"
@@ -30,7 +30,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/src/components/Textarea/TextareaRoot.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
-import { StyleSheet } from 'react-native-unistyles';
 import { View } from 'react-native';
-import InputProps from './Textarea.props';
+import { StyleSheet } from 'react-native-unistyles';
 import { TextareaContext } from './Textarea.context';
+import InputProps from './Textarea.props';
 
 const TextareaRoot = ({
   children,
@@ -32,7 +32,7 @@ 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',
@@ -40,11 +40,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: {
@@ -53,12 +53,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: {},
       },
@@ -69,7 +69,7 @@ const styles = StyleSheet.create(theme => ({
       },
       readonly: {
         true: {
-          borderColor: theme.components.input.borderColorReadOnly,
+          borderColor: theme.color.border.subtle,
         },
       },
     },

package/src/components/ToggleButton/ToggleButtonIcon.tsx

@@ -1,8 +1,8 @@
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { Platform, type StyleProp, type ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import IconProps from '../Icon/Icon.props';
-import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
 const ButtonIcon = ({
   children,
@@ -32,11 +32,11 @@ 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/src/components/ToggleButton/ToggleButtonRoot.tsx

@@ -1,7 +1,7 @@
-import type { ToggleButtonProps } from './ToggleButton.props';
-import { Pressable, ViewStyle, GestureResponderEvent } from 'react-native';
+import { GestureResponderEvent, Pressable, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useCardActionContext } from '../Card';
+import type { ToggleButtonProps } from './ToggleButton.props';
 
 const ButtonRoot = ({
   children,
@@ -53,35 +53,35 @@ const styles = StyleSheet.create(theme => ({
     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,
         },
       },
     },
@@ -90,7 +90,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/src/components/ToggleButton/ToggleButtonText.tsx

@@ -15,11 +15,11 @@ 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/src/components/ToggleButtonCard/ToggleButtonCardRoot.tsx

@@ -58,9 +58,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,
@@ -71,7 +71,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/src/components/index.ts

@@ -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,28 +21,32 @@ 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,
+  Image,
   KeyboardAvoidingView,
+  ScrollView,
+  SectionList,
   StatusBar,
   View,
-  SectionList,
-  Image,
 } from 'react-native';
 
 export { Pressable } from 'react-native';

package/src/core/themes.ts

@@ -36,6 +36,42 @@ const shared = {
     '4/6': '66.666%',
     '5/6': '83.333%',
     full: '100%' as DimensionValue,
+    none: 0,
+    '2xs': {
+      base: layout.mobile.spacing['2xs'],
+      md: layout.tablet.spacing['2xs'],
+      lg: layout.desktop.spacing['2xs'],
+    },
+    xs: {
+      base: layout.mobile.spacing.xs,
+      md: layout.tablet.spacing.xs,
+      lg: layout.desktop.spacing.xs,
+    },
+    sm: {
+      base: layout.mobile.spacing.sm,
+      md: layout.tablet.spacing.sm,
+      lg: layout.desktop.spacing.sm,
+    },
+    md: {
+      base: layout.mobile.spacing.md,
+      md: layout.tablet.spacing.md,
+      lg: layout.desktop.spacing.md,
+    },
+    lg: {
+      base: layout.mobile.spacing.lg,
+      md: layout.tablet.spacing.lg,
+      lg: layout.desktop.spacing.lg,
+    },
+    xl: {
+      base: layout.mobile.spacing.xl,
+      md: layout.tablet.spacing.xl,
+      lg: layout.desktop.spacing.xl,
+    },
+    '2xl': {
+      base: layout.mobile.spacing['2xl'],
+      md: layout.tablet.spacing['2xl'],
+      lg: layout.desktop.spacing['2xl'],
+    },
   },
   borderWidth,
   borderRadius,
@@ -169,7 +205,20 @@ const shared = {
         },
       },
       space: {
-        none: {},
+        none: {
+          gap: {
+            base: layout.mobile.spacing.none,
+            md: layout.tablet.spacing.none,
+            lg: layout.desktop.spacing.none,
+          },
+        },
+        '2xs': {
+          gap: {
+            base: layout.mobile.spacing['2xs'],
+            md: layout.tablet.spacing['2xs'],
+            lg: layout.desktop.spacing['2xs'],
+          },
+        },
         xs: {
           gap: {
             base: layout.mobile.spacing.xs,
@@ -205,6 +254,13 @@ const shared = {
             lg: layout.desktop.spacing.xl,
           },
         },
+        '2xl': {
+          gap: {
+            base: layout.mobile.spacing['2xl'],
+            md: layout.tablet.spacing['2xl'],
+            lg: layout.desktop.spacing['2xl'],
+          },
+        },
       },
     },
   },
@@ -215,7 +271,7 @@ const lightHelpers = {
   focusVisible: {
     outlineStyle: 'solid',
     outlineWidth: 2,
-    outlineColor: components.light.focus.border,
+    outlineColor: color.light.focus.primary,
     outlineOffset: 1,
   },
 };
@@ -240,7 +296,7 @@ const darkHelpers = {
   focusVisible: {
     outlineStyle: 'solid',
     outlineWidth: 2,
-    outlineColor: components.dark.focus.border,
+    outlineColor: color.dark.focus.primary,
     outlineOffset: 1,
   },
 };