@utilitywarehouse/hearth-react-native 0.20.0 → 0.21.0

package/build/components/DateInput/DateInput.d.ts

@@ -1,6 +1,6 @@
 import type { DateInputProps } from './DateInput.props';
 declare const DateInput: {
-    ({ label, helperText, helperIcon, validationStatus, validText, invalidText, disabled, readonly, required, hideDay, hideMonth, hideYear, dayPlaceholder, monthPlaceholder, yearPlaceholder, dayValue, monthValue, yearValue, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, inputLabelStyle, inputContainerStyle, inputStyle, ...props }: DateInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, helperText, helperIcon, validationStatus, validText, invalidText, disabled, readonly, required, hideDay, hideMonth, hideYear, dayPlaceholder, monthPlaceholder, yearPlaceholder, dayValue, monthValue, yearValue, dayRef, monthRef, yearRef, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, inputLabelStyle, inputContainerStyle, inputStyle, ...props }: DateInputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default DateInput;

package/build/components/DateInput/DateInput.js

@@ -3,8 +3,8 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { FormField } from '../FormField';
 import DateInputSegment from './DateInputSegment';
-const DateInput = ({ label, helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled, readonly, required, hideDay = false, hideMonth = false, hideYear = false, dayPlaceholder = 'DD', monthPlaceholder = 'MM', yearPlaceholder = 'YYYY', dayValue, monthValue, yearValue, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, inputLabelStyle, inputContainerStyle, inputStyle, ...props }) => {
-    return (_jsx(FormField, { label: label, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, required: required, style: styles.wrap, ...props, children: _jsxs(View, { style: styles.container, children: [!hideDay && (_jsx(DateInputSegment, { label: "Day", placeholder: dayPlaceholder, value: dayValue, onChange: onDayChange, onFocus: onDayFocus, onBlur: onDayBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-day", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle })), !hideMonth && (_jsx(DateInputSegment, { label: "Month", placeholder: monthPlaceholder, value: monthValue, onChange: onMonthChange, onFocus: onMonthFocus, onBlur: onMonthBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-month", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle })), !hideYear && (_jsx(DateInputSegment, { label: "Year", placeholder: yearPlaceholder, value: yearValue, onChange: onYearChange, onFocus: onYearFocus, onBlur: onYearBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 4, testID: "date-input-year", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle }))] }) }));
+const DateInput = ({ label, helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled, readonly, required, hideDay = false, hideMonth = false, hideYear = false, dayPlaceholder = 'DD', monthPlaceholder = 'MM', yearPlaceholder = 'YYYY', dayValue, monthValue, yearValue, dayRef, monthRef, yearRef, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, inputLabelStyle, inputContainerStyle, inputStyle, ...props }) => {
+    return (_jsx(FormField, { label: label, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, required: required, style: styles.wrap, ...props, children: _jsxs(View, { style: styles.container, children: [!hideDay && (_jsx(DateInputSegment, { label: "Day", placeholder: dayPlaceholder, value: dayValue, inputRef: dayRef, onChange: onDayChange, onFocus: onDayFocus, onBlur: onDayBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-day", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle })), !hideMonth && (_jsx(DateInputSegment, { label: "Month", placeholder: monthPlaceholder, value: monthValue, inputRef: monthRef, onChange: onMonthChange, onFocus: onMonthFocus, onBlur: onMonthBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-month", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle })), !hideYear && (_jsx(DateInputSegment, { label: "Year", placeholder: yearPlaceholder, value: yearValue, inputRef: yearRef, onChange: onYearChange, onFocus: onYearFocus, onBlur: onYearBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 4, testID: "date-input-year", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle }))] }) }));
 };
 DateInput.displayName = 'DateInput';
 const styles = StyleSheet.create(theme => ({

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

@@ -1,4 +1,5 @@
-import type { TextInputProps, ViewProps } from 'react-native';
+import type { Ref } from 'react';
+import type { TextInput, TextInputProps, ViewProps } from 'react-native';
 import type { FormFieldBaseProps } from '../FormField/FormField.props';
 import LabelProps from '../Label/Label.props';
 export interface DateInputProps extends FormFieldBaseProps {
@@ -41,6 +42,18 @@ export interface DateInputProps extends FormFieldBaseProps {
      * The controlled value for the year segment. Must be used with an `onYearChange` handler.
      */
     yearValue?: string;
+    /**
+     * Ref for the day segment input.
+     */
+    dayRef?: Ref<TextInput>;
+    /**
+     * Ref for the month segment input.
+     */
+    monthRef?: Ref<TextInput>;
+    /**
+     * Ref for the year segment input.
+     */
+    yearRef?: Ref<TextInput>;
     /**
      * Callback fired when the day value changes.
      */
@@ -85,6 +98,7 @@ export interface DateInputSegmentProps {
     label: string;
     placeholder?: string;
     value?: string;
+    inputRef?: Ref<TextInput>;
     onChange?: (text: string) => void;
     onFocus?: DateInputProps['onDayFocus'];
     onBlur?: DateInputProps['onDayBlur'];

package/build/components/DateInput/DateInputSegment.d.ts

@@ -1,6 +1,6 @@
 import type { DateInputSegmentProps } from './DateInput.props';
 declare const DateInputSegment: {
-    ({ label, placeholder, value, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, inputContainerStyle, inputStyle, inputLabelStyle, }: DateInputSegmentProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, placeholder, value, inputRef, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, inputContainerStyle, inputStyle, inputLabelStyle, }: DateInputSegmentProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default DateInputSegment;

package/build/components/DateInput/DateInputSegment.js

@@ -3,9 +3,9 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Input } from '../Input';
-const DateInputSegment = ({ label, placeholder, value, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, inputContainerStyle, inputStyle, inputLabelStyle, }) => {
+const DateInputSegment = ({ label, placeholder, value, inputRef, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, inputContainerStyle, inputStyle, inputLabelStyle, }) => {
     styles.useVariants({ disabled });
-    return (_jsxs(View, { style: [styles.container, inputContainerStyle], children: [_jsx(BodyText, { size: "md", style: [styles.label, inputLabelStyle], children: label }), _jsx(Input, { value: value, onChangeText: onChange, onFocus: onFocus, onBlur: onBlur, placeholder: disabled ? undefined : placeholder, keyboardType: "number-pad", maxLength: maxLength, testID: testID, accessibilityLabel: label, disabled: disabled, validationStatus: validationStatus, readonly: readonly, style: inputStyle })] }));
+    return (_jsxs(View, { style: [styles.container, inputContainerStyle], children: [_jsx(BodyText, { size: "md", style: [styles.label, inputLabelStyle], children: label }), _jsx(Input, { ref: inputRef, value: value, onChangeText: onChange, onFocus: onFocus, onBlur: onBlur, placeholder: disabled ? undefined : placeholder, keyboardType: "number-pad", maxLength: maxLength, testID: testID, accessibilityLabel: label, disabled: disabled, validationStatus: validationStatus, readonly: readonly, style: inputStyle })] }));
 };
 DateInputSegment.displayName = 'DateInputSegment';
 const styles = StyleSheet.create(theme => ({

package/build/components/DetailText/DetailText.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
 import { Text } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useTheme } from '../../hooks';
-import { getFlattenedColorValue } from '../../utils';
+import { useStyleProps } from '../../hooks';
+import { getFlattenedColorValue, resolveThemeValueWithFallback } from '../../utils';
 const DetailText = ({ children, color, size = 'md', truncated, underline, strikeThrough, italic, textTransform, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, userSelect, inverted, ...props }) => {
-    const { color: themeColor, colorMode } = useTheme();
+    const { computedStyles: utilityStyles, remainingProps } = useStyleProps(props);
     styles.useVariants({
         size,
         underline,
@@ -13,29 +12,23 @@ const DetailText = ({ children, color, size = 'md', truncated, underline, strike
         italic,
         inverted,
     });
-    const colorValue = useMemo(() => getFlattenedColorValue(color, themeColor), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [color, colorMode]);
-    const decorationColor = useMemo(() => getFlattenedColorValue(textDecorationColor, themeColor), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [textDecorationColor, colorMode]);
-    return (_jsx(Text, { ...props, ...(truncated
+    return (_jsx(Text, { ...remainingProps, ...(truncated
             ? {
                 numberOfLines: 1,
                 ellipsizeMode: 'tail',
             }
             : {}), style: [
             styles.text,
+            utilityStyles,
             {
-                ...(colorValue && { color: colorValue }),
                 ...(textTransform && { textTransform }),
                 ...(textAlign && { textAlign }),
-                ...(decorationColor && { textDecorationColor: decorationColor }),
                 ...(textDecorationLine && { textDecorationLine }),
                 ...(textDecorationStyle && { textDecorationStyle }),
                 ...(userSelect && { userSelect }),
                 ...(textAlignVertical && { textAlignVertical }),
             },
+            styles.getColours(color, textDecorationColor),
             props.style,
         ], children: children }));
 };
@@ -111,5 +104,13 @@ const styles = StyleSheet.create(theme => ({
             },
         },
     },
+    getColours: (color, textDecorationColor) => ({
+        ...(color
+            ? { color: resolveThemeValueWithFallback(color, theme.helpers.semanticColor.text, theme.color) }
+            : {}),
+        ...(textDecorationColor
+            ? { textDecorationColor: getFlattenedColorValue(textDecorationColor, theme.color) }
+            : {}),
+    }),
 }));
 export default DetailText;

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

@@ -1,19 +1,6 @@
-import type { TextProps as RNTextProps, TextStyle } from 'react-native';
-import type { ColorValue } from '../../types';
-interface TextProps extends RNTextProps {
+import type { CommonTextProps } from '../../types';
+interface DetailTextProps extends CommonTextProps {
+    /** Text size variant. */
     size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
-    strikeThrough?: boolean;
-    underline?: boolean;
-    truncated?: boolean;
-    italic?: boolean;
-    color?: ColorValue;
-    textTransform?: TextStyle['textTransform'];
-    textAlign?: TextStyle['textAlign'];
-    textAlignVertical?: TextStyle['textAlignVertical'];
-    textDecorationLine?: TextStyle['textDecorationLine'];
-    textDecorationStyle?: TextStyle['textDecorationStyle'];
-    textDecorationColor?: ColorValue;
-    userSelect?: TextStyle['userSelect'];
-    inverted?: boolean;
 }
-export default TextProps;
+export default DetailTextProps;

package/build/components/Flex/Flex.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { useStyleProps } from '../../hooks';
 const Flex = ({ style, children, direction = 'column', align = 'flex-start', justify = 'flex-start', wrap = 'nowrap', spacing = 'md', space, ...rest }) => {
     const propStyle = {
         flexDirection: direction,
@@ -8,8 +9,9 @@ const Flex = ({ style, children, direction = 'column', align = 'flex-start', jus
         justifyContent: justify,
         flexWrap: wrap,
     };
+    const { computedStyles, remainingProps } = useStyleProps(rest);
     styles.useVariants({ spacing: space ?? spacing });
-    return (_jsx(View, { style: [propStyle, styles.flex, style], ...rest, children: children }));
+    return (_jsx(View, { style: [propStyle, styles.flex, computedStyles, style], ...remainingProps, children: children }));
 };
 Flex.displayName = 'Flex';
 const styles = StyleSheet.create(theme => ({

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

@@ -1,6 +1,6 @@
 import type { FlexAlignType, ViewProps, ViewStyle } from 'react-native';
-import { SpacingValues } from '../../types';
-interface FlexProps extends ViewProps {
+import { FlexLayoutProps, GapProps, SpacingValues } from '../../types';
+interface FlexProps extends ViewProps, FlexLayoutProps, GapProps {
     direction?: ViewStyle['flexDirection'];
     align?: FlexAlignType;
     justify?: ViewStyle['justifyContent'];

package/build/components/Heading/Heading.js

@@ -1,40 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
 import { Text } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useTheme } from '../../hooks';
-import { getFlattenedColorValue } from '../../utils';
+import { useStyleProps } from '../../hooks';
+import { getFlattenedColorValue, resolveThemeValueWithFallback } from '../../utils';
 const Heading = ({ children, color, size = 'lg', truncated, underline, strikeThrough, textTransform, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, userSelect, inverted, ...props }) => {
+    // Extract margin utility props from remaining props
+    const { computedStyles: utilityStyles, remainingProps } = useStyleProps(props);
     styles.useVariants({
         size,
         underline,
         strikeThrough,
         inverted,
     });
-    const { color: themeColor, colorMode } = useTheme();
-    const colorValue = useMemo(() => getFlattenedColorValue(color, themeColor), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [color, colorMode]);
-    const decorationColor = useMemo(() => getFlattenedColorValue(textDecorationColor, themeColor), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [textDecorationColor, colorMode]);
-    return (_jsx(Text, { ...props, ...(truncated
+    return (_jsx(Text, { ...remainingProps, ...(truncated
             ? {
                 numberOfLines: 1,
                 ellipsizeMode: 'tail',
             }
             : {}), style: [
             styles.text,
+            utilityStyles,
             {
-                ...(colorValue ? { color: colorValue } : {}),
                 ...(textTransform ? { textTransform } : {}),
                 ...(textAlign ? { textAlign } : {}),
                 ...(textAlignVertical ? { textAlignVertical } : {}),
-                ...(decorationColor && { textDecorationColor: decorationColor }),
                 ...(textDecorationLine && { textDecorationLine }),
                 ...(textDecorationStyle && { textDecorationStyle }),
                 ...(userSelect && { userSelect }),
             },
+            styles.getColours(color, textDecorationColor),
             props.style,
         ], children: children }));
 };
@@ -115,6 +109,23 @@ const styles = StyleSheet.create(theme => ({
                         lg: theme.typography.desktop.heading.xl.lineHeight,
                     },
                 },
+                '2xl': {
+                    fontSize: {
+                        base: theme.typography.mobile.heading['2xl'].fontSize,
+                        md: theme.typography.tablet.heading['2xl'].fontSize,
+                        lg: theme.typography.desktop.heading['2xl'].fontSize,
+                    },
+                    fontWeight: {
+                        base: theme.typography.mobile.heading['2xl'].fontWeight,
+                        md: theme.typography.tablet.heading['2xl'].fontWeight,
+                        lg: theme.typography.desktop.heading['2xl'].fontWeight,
+                    },
+                    lineHeight: {
+                        base: theme.typography.mobile.heading['2xl'].lineHeight,
+                        md: theme.typography.tablet.heading['2xl'].lineHeight,
+                        lg: theme.typography.desktop.heading['2xl'].lineHeight,
+                    },
+                },
             },
             underline: {
                 true: {
@@ -133,5 +144,15 @@ const styles = StyleSheet.create(theme => ({
             },
         },
     },
+    getColours: (color, textDecorationColor) => ({
+        ...(color
+            ? {
+                color: resolveThemeValueWithFallback(color, theme.helpers.semanticColor.text, theme.color),
+            }
+            : {}),
+        ...(textDecorationColor
+            ? { textDecorationColor: getFlattenedColorValue(textDecorationColor, theme.color) }
+            : {}),
+    }),
 }));
 export default Heading;

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

@@ -1,20 +1,6 @@
-import type { Ref } from 'react';
-import type { Text, TextProps, TextStyle } from 'react-native';
-import type { ColorValue } from '../../types';
-interface HeadingProps extends TextProps {
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-    strikeThrough?: boolean;
-    underline?: boolean;
-    truncated?: boolean;
-    color?: ColorValue;
-    textTransform?: TextStyle['textTransform'];
-    textAlign?: TextStyle['textAlign'];
-    textAlignVertical?: TextStyle['textAlignVertical'];
-    textDecorationLine?: TextStyle['textDecorationLine'];
-    textDecorationStyle?: TextStyle['textDecorationStyle'];
-    textDecorationColor?: ColorValue;
-    userSelect?: TextStyle['userSelect'];
-    inverted?: boolean;
-    ref?: Ref<Text>;
+import type { CommonTextProps } from '../../types';
+interface HeadingProps extends CommonTextProps {
+    /** Heading size variant. */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 }
 export default HeadingProps;