@utilitywarehouse/hearth-react-native 0.30.4 → 0.31.1

package/src/components/Textarea/Textarea.props.ts

@@ -1,6 +1,16 @@
 import type { TextInputProps, ViewProps } from 'react-native';
 
 export interface TextareaBaseProps {
+  /**
+   * If true, the textarea can be resized vertically using a drag handle.
+   *
+   * @type boolean
+   * @example
+   * ```tsx
+   * <Textarea resizable />
+   * ```
+   */
+  resizable?: boolean;
   /**
    * If true, the textarea will be disabled.
    *
@@ -37,8 +47,7 @@ export interface TextareaBaseProps {
 export interface TextareaWithChildrenProps extends TextareaBaseProps, ViewProps {}
 
 export interface TextareaWithoutChildrenProps
-  extends TextareaBaseProps,
-    Omit<TextInputProps, 'children'> {
+  extends TextareaBaseProps, Omit<TextInputProps, 'children'> {
   children?: never;
 }
 

package/src/components/Textarea/Textarea.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { Meta, StoryObj } from '@storybook/react-native';
 import { Textarea } from '.';
 
 const meta = {
@@ -56,6 +56,16 @@ const meta = {
       description: 'Focus the Textarea component',
       defaultValue: false,
     },
+    required: {
+      control: 'boolean',
+      description: 'Whether the Textarea component is required',
+      defaultValue: true,
+    },
+    resizable: {
+      control: 'boolean',
+      description: 'Enables a drag handle to resize the Textarea vertically',
+      defaultValue: false,
+    },
   },
   args: {
     placeholder: 'Textarea placeholder',
@@ -63,6 +73,7 @@ const meta = {
     disabled: false,
     readonly: false,
     focused: false,
+    resizable: false,
   },
 } satisfies Meta<typeof Textarea>;
 
@@ -70,3 +81,12 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {};
+
+export const Resizable: Story = {
+  args: {
+    label: 'Notes',
+    helperText: 'Drag the bottom-right handle to resize',
+    placeholder: 'Add more detail here...',
+    resizable: true,
+  },
+};

package/src/components/Textarea/Textarea.tsx

@@ -1,7 +1,19 @@
 import { createTextarea } from '@gluestack-ui/textarea';
 import type TextareaProps from './Textarea.props';
 
-import { useEffect } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
+import {
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import { Path, Svg } from 'react-native-svg';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
 import { FormField, useFormFieldContext } from '../FormField';
 import TextareaFieldComponent from './TextareaField';
 import TextareaRoot from './TextareaRoot';
@@ -13,9 +25,14 @@ export const TextareaComponent = createTextarea({
 
 export const TextareaField = TextareaComponent.Input;
 
+const DEFAULT_TEXTAREA_HEIGHT = 96;
+const RESIZE_HANDLE_TOUCH_SIZE = 28;
+const RESIZE_HANDLE_ICON_SIZE = 9;
+
 const Textarea = ({
   validationStatus = 'initial',
   children,
+  resizable = false,
   disabled,
   focused,
   readonly,
@@ -26,9 +43,11 @@ const Textarea = ({
   invalidText,
   required,
   helperIcon,
+  onLayout,
   ...props
 }: TextareaProps) => {
   const formFieldContext = useFormFieldContext();
+  const hasMeasuredHeight = useRef(false);
   const textareaLabel = label ?? formFieldContext?.label;
   const textareaHelperText = helperText ?? formFieldContext?.helperText;
   const textareaValidText = validText ?? formFieldContext?.validText;
@@ -37,12 +56,15 @@ const Textarea = ({
   const textareaDisabled = disabled ?? formFieldContext?.disabled;
   const textareaReadonly = readonly ?? formFieldContext?.readonly;
   const textareaValidationStatus = formFieldContext?.validationStatus ?? validationStatus;
+  const textareaHeight = useSharedValue(DEFAULT_TEXTAREA_HEIGHT);
+  const resizeStartHeight = useSharedValue(DEFAULT_TEXTAREA_HEIGHT);
+  const theme = useTheme();
 
   useEffect(() => {
     if (formFieldContext?.setShouldHandleAccessibility) {
       formFieldContext.setShouldHandleAccessibility(true);
     }
-  }, []);
+  }, [formFieldContext]);
 
   const getAccessibilityLabel = () => {
     let accessibilityLabel = '';
@@ -75,6 +97,47 @@ const Textarea = ({
     return accessibilityHint || props.accessibilityHint;
   };
 
+  const handleTextareaLayout = (event: LayoutChangeEvent) => {
+    if (!hasMeasuredHeight.current) {
+      textareaHeight.value = event.nativeEvent.layout.height;
+      resizeStartHeight.value = event.nativeEvent.layout.height;
+      hasMeasuredHeight.current = true;
+    }
+
+    if (children) {
+      onLayout?.(event);
+    }
+  };
+
+  const resizeGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .enabled(resizable && !textareaDisabled)
+        .onBegin(() => {
+          resizeStartHeight.value = textareaHeight.value;
+        })
+        .onUpdate(event => {
+          const nextHeight =
+            resizeStartHeight.value + event.translationY + event.translationX * 0.35;
+
+          textareaHeight.value = Math.max(DEFAULT_TEXTAREA_HEIGHT, nextHeight);
+        }),
+    [resizable, resizeStartHeight, textareaDisabled, textareaHeight]
+  );
+
+  const animatedHeightStyle = useAnimatedStyle(
+    () => ({
+      height: textareaHeight.value,
+    }),
+    [textareaHeight]
+  );
+
+  const rootStyle = (children ? props.style : undefined) as StyleProp<ViewStyle>;
+  const inputStyle = (!children ? props.style : undefined) as StyleProp<TextStyle>;
+  const textareaStyle = (
+    resizable ? [rootStyle, animatedHeightStyle] : rootStyle
+  ) as StyleProp<ViewStyle>;
+
   return (
     <FormField
       label={label}
@@ -91,6 +154,8 @@ const Textarea = ({
     >
       <TextareaComponent
         {...(children ? props : {})}
+        onLayout={handleTextareaLayout}
+        style={textareaStyle}
         validationStatus={textareaValidationStatus}
         isInvalid={textareaValidationStatus === 'invalid'}
         isReadOnly={textareaReadonly}
@@ -104,12 +169,51 @@ const Textarea = ({
           <>{children}</>
         ) : (
           <>
-            <TextareaField {...props} />
+            <TextareaField {...props} onLayout={onLayout} style={[styles.textarea, inputStyle]} />
           </>
         )}
+        {resizable && !textareaDisabled ? (
+          <GestureDetector gesture={resizeGesture}>
+            <View style={styles.resizeHandle}>
+              <Svg
+                width={RESIZE_HANDLE_ICON_SIZE}
+                height={RESIZE_HANDLE_ICON_SIZE}
+                viewBox="0 0 9 9"
+                fill="none"
+              >
+                <Path
+                  d="M0.353516 8.35355L8.35352 0.353546M4.35352 8.35355L8.35352 4.35355"
+                  stroke={theme.color.icon.primary}
+                />
+              </Svg>
+            </View>
+          </GestureDetector>
+        ) : null}
       </TextareaComponent>
     </FormField>
   );
 };
 
+const styles = StyleSheet.create({
+  textarea: {
+    padding: 0,
+    _web: {
+      outlineStyle: 'none',
+      _focusVisible: {
+        outlineStyle: 'none',
+      },
+    },
+  },
+  resizeHandle: {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+    width: RESIZE_HANDLE_TOUCH_SIZE,
+    height: RESIZE_HANDLE_TOUCH_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1,
+  },
+});
+
 export default Textarea;

package/src/components/Textarea/TextareaRoot.tsx

@@ -1,9 +1,12 @@
 import { useMemo } from 'react';
 import { View } from 'react-native';
+import Animated from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
 import { TextareaContext } from './Textarea.context';
 import InputProps from './Textarea.props';
 
+const AnimatedView = Animated.createAnimatedComponent(View);
+
 const TextareaRoot = ({
   children,
   style,
@@ -21,9 +24,9 @@ const TextareaRoot = ({
 
   return (
     <TextareaContext.Provider value={value}>
-      <View {...props} style={[styles.container, style]}>
+      <AnimatedView {...props} style={[styles.container, style]}>
         {children}
-      </View>
+      </AnimatedView>
     </TextareaContext.Provider>
   );
 };
@@ -35,6 +38,7 @@ const styles = StyleSheet.create(theme => ({
     borderColor: theme.color.border.strong,
     height: theme.components.input.textArea.height,
     borderRadius: theme.components.input.borderRadius,
+    position: 'relative',
     flexDirection: 'row',
     overflow: 'hidden',
     alignContent: 'center',

package/src/tokens/color.ts

@@ -94,6 +94,7 @@ export const grey = {
   '700': '#4c4c4c',
   '800': '#3f3f3f',
   '900': '#3a3837',
+  '925': '#2f2d2d',
   '950': '#232323',
   '975': '#191919',
   '1000': '#101010',
@@ -480,25 +481,25 @@ export const light = {
 
 export const dark = {
   background: {
-    brand: '#7a42c8',
+    brand: '#442484',
     loading: '#30302c',
     primary: '#191917',
-    secondary: '#232323',
+    secondary: '#2f2d2d',
   },
   border: {
-    strong: '#ebebeb',
-    subtle: '#4c473d',
+    strong: '#888888',
+    subtle: '#5b5b5b',
   },
   feedback: {
     danger: {
-      border: '#ff7964',
+      border: '#f4412a',
       foreground: {
-        default: '#101010',
+        default: '#ffffff',
         subtle: '#ff7964',
       },
       surface: {
-        default: '#ff634a',
-        subtle: '#ffa89d',
+        default: '#de2612',
+        subtle: '#6b1f1a',
       },
     },
     functional: {
@@ -513,36 +514,36 @@ export const dark = {
       },
     },
     info: {
-      border: '#6bb0ff',
+      border: '#2786f1',
       foreground: {
-        default: '#101010',
+        default: '#ffffff',
         subtle: '#6bb0ff',
       },
       surface: {
-        default: '#6bb0ff',
-        subtle: '#bcddff',
+        default: '#1c6cd4',
+        subtle: '#0b3375',
       },
     },
     positive: {
-      border: '#58ca93',
+      border: '#19a660',
       foreground: {
-        default: '#101010',
+        default: '#ffffff',
         subtle: '#58ca93',
       },
       surface: {
-        default: '#36bf7d',
-        subtle: '#a2e2c3',
+        default: '#0f834a',
+        subtle: '#074b2a',
       },
     },
     warning: {
-      border: '#ff9639',
+      border: '#f56e00',
       foreground: {
-        default: '#101010',
+        default: '#ffffff',
         subtle: '#ff9639',
       },
       surface: {
-        default: '#ff8010',
-        subtle: '#ffcca8',
+        default: '#cf5d00',
+        subtle: '#893900',
       },
     },
   },
@@ -585,9 +586,9 @@ export const dark = {
       },
       surface: {
         strong: {
-          active: '#c6b5e2',
-          default: '#996cda',
-          hover: '#af90de',
+          active: '#ddd5eb',
+          default: '#af90de',
+          hover: '#c6b5e2',
         },
       },
     },
@@ -670,52 +671,52 @@ export const dark = {
     },
   },
   shadow: {
-    brand: '#7a42c8',
-    broadband: '#506c21',
-    cashback: '#8b2bc9',
-    default: '#f7f7f7',
-    energy: '#326e7a',
-    insurance: '#9b4c0e',
-    mobile: '#a7266d',
-    pig: '#8f358f',
+    brand: '#442484',
+    broadband: '#4f6b20',
+    cashback: '#7429b5',
+    default: '#3f3f3f',
+    energy: '#2c6370',
+    insurance: '#7f4518',
+    mobile: '#8a3260',
+    pig: '#7a1f7e',
   },
   surface: {
     brand: {
-      default: '#996cda',
+      default: '#af90de',
       strong: '#26164f',
       subtle: '#442484',
     },
     broadband: {
       default: '#506c21',
-      subtle: '#35421c',
+      subtle: '#4f6b20',
     },
     cashback: {
       default: '#8b2bc9',
-      subtle: '#522270',
+      subtle: '#7429b5',
     },
     energy: {
       default: '#326e7a',
-      subtle: '#254348',
+      subtle: '#2c6370',
     },
     highlight: {
       default: '#ffb921',
-      subtle: '#756230',
+      subtle: '#82692b',
     },
     insurance: {
       default: '#9b4c0e',
-      subtle: '#5a3213',
+      subtle: '#7f4518',
     },
     mobile: {
       default: '#a7266d',
-      subtle: '#601f42',
+      subtle: '#8a3260',
     },
     neutral: {
-      strong: '#232323',
+      strong: '#2f2d2d',
       subtle: '#191917',
     },
     pig: {
       default: '#8f358f',
-      subtle: '#5d2167',
+      subtle: '#7a1f7e',
     },
   },
   text: {

package/src/tokens/components/dark/alert.ts

@@ -10,15 +10,15 @@ export default {
   gap: 8,
   iconButton: {
     unstyled: {
-      foregroundColor: '#101010',
-      foregroundColorActive: '#3f3f3f',
-      foregroundColorHover: '#3a3837',
+      foregroundColor: '#ebebeb',
+      foregroundColorActive: '#b2afae',
+      foregroundColorHover: '#d3d3d3',
     },
   },
   link: {
-    color: '#101010',
-    colorActive: '#3f3f3f',
-    colorHover: '#3a3837',
+    color: '#ebebeb',
+    colorActive: '#b2afae',
+    colorHover: '#d3d3d3',
   },
   padding: 14,
 } as const;

package/src/tokens/components/dark/bottom-navigation.ts

@@ -12,10 +12,10 @@ export default {
   item: {
     gap: 2,
     icon: {
-      colorActive: '#996cda',
+      colorActive: '#af90de',
     },
     label: {
-      colorActive: '#996cda',
+      colorActive: '#af90de',
     },
     paddingBottom: 2,
     paddingHorizontal: 0,

package/src/tokens/components/dark/checkbox.ts

@@ -6,7 +6,7 @@ export default {
   borderRadius: 4,
   borderWidth: 2,
   checked: {
-    backgroundColor: '#ebebeb',
+    backgroundColor: '#888888',
     icon: {
       color: '#101010',
     },

package/src/tokens/components/dark/icon-button.ts

@@ -5,9 +5,9 @@
 export default {
   iconButton: {
     unstyled: {
-      foregroundColor: '#101010',
-      foregroundColorActive: '#3f3f3f',
-      foregroundColorHover: '#3a3837',
+      foregroundColor: '#ebebeb',
+      foregroundColorActive: '#b2afae',
+      foregroundColorHover: '#d3d3d3',
     },
   },
   borderRadius: 8,

package/src/tokens/components/dark/inline-link.ts

@@ -4,7 +4,7 @@
 
 export default {
   color: '#6bb0ff',
-  colorVisited: '#996cda',
+  colorVisited: '#af90de',
   inverted: {
     color: '#fcfbf2',
     colorActive: '#f1efe4',

package/src/tokens/components/dark/link.ts

@@ -4,9 +4,9 @@
 
 export default {
   link: {
-    color: '#101010',
-    colorActive: '#3f3f3f',
-    colorHover: '#3a3837',
+    color: '#ebebeb',
+    colorActive: '#b2afae',
+    colorHover: '#d3d3d3',
   },
   color: '#ebebeb',
   colorActive: '#b2afae',

package/src/tokens/components/dark/navigation.ts

@@ -7,12 +7,12 @@ export default {
     borderRadiusNone: 0,
     borderRadiusRounded: 4,
   },
-  borderBottom: '#5c2ca9',
+  borderBottom: '#996cda',
   borderRadius: 6,
   desktop: {
     height: 88,
   },
-  dividerBorderColor: '#5c2ca9',
+  dividerBorderColor: '#996cda',
   gap: 4,
   mobile: {
     height: 64,

package/src/tokens/components/dark/parts.ts

@@ -27,7 +27,7 @@ export default {
   },
   statusBar: {
     foregroundColor: '#ffffff',
-    foregroundColorInverted: '#000000',
-    notch: '#000000',
+    foregroundColorInverted: '#ffffff',
+    notch: '#101010',
   },
 } as const;

package/src/tokens/components/dark/progress-bar.ts

@@ -34,8 +34,8 @@ export default {
     },
   },
   progress: {
-    dangerColor: '#ff634a',
-    defaultColor: '#c6b5e2',
-    successColor: '#36bf7d',
+    dangerColor: '#f4412a',
+    defaultColor: '#996cda',
+    successColor: '#19a660',
   },
 } as const;

package/src/tokens/components/dark/progress-stepper.ts

@@ -5,7 +5,7 @@
 export default {
   bar: {
     complete: {
-      backgroundColor: '#7a42c8',
+      backgroundColor: '#996cda',
     },
     height: 2,
   },

package/src/tokens/components/dark/spinner.ts

@@ -3,7 +3,7 @@
  */
 
 export default {
-  defaultFill: '#af90de',
+  defaultFill: '#996cda',
   lg: {
     size: 40,
     strokeWidth: 3,

package/src/tokens/components/dark/table.ts

@@ -14,6 +14,8 @@ export default {
   },
   headerCell: {
     borderWidth: 2,
+    foregoundColor: '#ebebeb',
+    foregoundColorInverted: '#101010',
     gap: 8,
     height: 56,
     paddingHorizontal: 12,

package/src/tokens/components/dark/time-picker.ts

@@ -3,6 +3,7 @@
  */
 
 export default {
+  fade: '#2f2d2d00',
   gap: 6,
   gapContainer: 4,
   minWidth: 288,

package/src/tokens/components/light/parts.ts

@@ -4,7 +4,7 @@
 
 export default {
   homeIndicator: {
-    foregroundColor: '#000000',
+    foregroundColor: '#101010',
     foregroundColorInverted: '#ffffff',
   },
   modalStack: {
@@ -26,8 +26,8 @@ export default {
     borderRadius: 9999,
   },
   statusBar: {
-    foregroundColor: '#000000',
+    foregroundColor: '#101010',
     foregroundColorInverted: '#ffffff',
-    notch: '#000000',
+    notch: '#101010',
   },
 } as const;

package/src/tokens/components/light/table.ts

@@ -14,6 +14,8 @@ export default {
   },
   headerCell: {
     borderWidth: 2,
+    foregoundColor: '#101010',
+    foregoundColorInverted: '#ffffff',
     gap: 8,
     height: 56,
     paddingHorizontal: 12,

package/src/tokens/components/light/time-picker.ts

@@ -3,6 +3,7 @@
  */
 
 export default {
+  fade: '#ffffff00',
   gap: 6,
   gapContainer: 4,
   minWidth: 288,