@utilitywarehouse/hearth-react-native 0.31.0 → 0.32.0

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

@@ -0,0 +1,31 @@
+import type { ComponentType, Ref } from 'react';
+import type { TextInput, TextInputProps, ViewProps } from 'react-native';
+export interface StepperBaseProps {
+    ref?: Ref<TextInput>;
+    disabled?: boolean;
+    validationStatus?: 'initial' | 'valid' | 'invalid';
+    readonly?: boolean;
+    focused?: boolean;
+    placeholder?: string;
+    inBottomSheet?: boolean;
+    required?: boolean;
+    label?: string;
+    labelVariant?: 'heading' | 'body';
+    helperText?: string;
+    helperIcon?: ComponentType;
+    validText?: string;
+    invalidText?: string;
+    value?: number | string;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    onChangeValue?: (value: number) => void;
+    focusInputOnStepPress?: boolean;
+    decrementAccessibilityLabel?: string;
+    incrementAccessibilityLabel?: string;
+}
+export type StepperInputProps = StepperBaseProps & Omit<TextInputProps, 'children' | 'value' | 'defaultValue' | 'onChangeText' | 'editable' | 'keyboardType'> & ViewProps & {
+    onChangeText?: (text: string) => void;
+};
+export default StepperInputProps;

package/build/components/StepperInput/StepperInput.props.js

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

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

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

package/build/components/StepperInput/index.js

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

package/build/components/Table/TableHeaderCell.js

@@ -6,8 +6,9 @@ import { BodyText } from '../BodyText';
 import { useTableContext } from './Table.context';
 import { getColumnStyle } from './Table.utils';
 const renderContent = (children, weight = 'semibold', color = 'white') => {
+    styles.useVariants({ color });
     if (typeof children === 'string' || typeof children === 'number') {
-        return (_jsx(BodyText, { size: "md", weight: weight, style: styles.text, inverted: color === 'purple', children: children }));
+        return (_jsx(BodyText, { size: "md", weight: weight, style: styles.text, children: children }));
     }
     return children;
 };
@@ -91,6 +92,14 @@ const styles = StyleSheet.create(theme => ({
                     color: theme.color.text.primary,
                 },
             },
+            color: {
+                purple: {
+                    color: theme.components.table.headerCell.foregoundColorInverted,
+                },
+                white: {
+                    color: theme.components.table.headerCell.foregoundColor,
+                },
+            },
         },
     },
 }));

package/build/components/Textarea/Textarea.d.ts

@@ -7,5 +7,5 @@ export declare const TextareaComponent: import("@gluestack-ui/textarea/lib/types
     };
 }, import("react-native").TextInputProps>;
 export declare const TextareaField: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & import("react").RefAttributes<import("react-native").TextInputProps> & import("@gluestack-ui/textarea/lib/typescript/types").IInputProps>;
-declare const Textarea: ({ validationStatus, children, resizable, disabled, focused, readonly, label, labelVariant, helperText, validText, invalidText, required, helperIcon, onLayout, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+declare const Textarea: ({ validationStatus, children, resizable, defaultHeight, disabled, focused, readonly, label, labelVariant, helperText, validText, invalidText, required, helperIcon, onLayout, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
 export default Textarea;

package/build/components/Textarea/Textarea.js

@@ -18,7 +18,7 @@ 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, label, labelVariant, helperText, validText, invalidText, required, helperIcon, onLayout, ...props }) => {
+const Textarea = ({ validationStatus = 'initial', children, resizable = false, defaultHeight, disabled, focused, readonly, label, labelVariant, helperText, validText, invalidText, required, helperIcon, onLayout, ...props }) => {
     const formFieldContext = useFormFieldContext();
     const hasMeasuredHeight = useRef(false);
     const textareaLabel = label ?? formFieldContext?.label;
@@ -29,14 +29,21 @@ const Textarea = ({ validationStatus = 'initial', children, resizable = false, d
     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 textareaDefaultHeight = defaultHeight ?? DEFAULT_TEXTAREA_HEIGHT;
+    const textareaHeight = useSharedValue(textareaDefaultHeight);
+    const resizeStartHeight = useSharedValue(textareaDefaultHeight);
     const theme = useTheme();
     useEffect(() => {
         if (formFieldContext?.setShouldHandleAccessibility) {
             formFieldContext.setShouldHandleAccessibility(true);
         }
     }, [formFieldContext]);
+    useEffect(() => {
+        if (!hasMeasuredHeight.current) {
+            textareaHeight.value = textareaDefaultHeight;
+            resizeStartHeight.value = textareaDefaultHeight;
+        }
+    }, [resizeStartHeight, textareaDefaultHeight, textareaHeight]);
     const getAccessibilityLabel = () => {
         let accessibilityLabel = '';
         if (textareaLabel) {

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

@@ -1,5 +1,16 @@
 import type { TextInputProps, ViewProps } from 'react-native';
 export interface TextareaBaseProps {
+    /**
+     * Sets the initial height of a resizable textarea in pixels.
+     * Has no effect unless `resizable` is enabled.
+     *
+     * @type number
+     * @example
+     * ```tsx
+     * <Textarea resizable defaultHeight={140} />
+     * ```
+     */
+    defaultHeight?: number;
     /**
      * If true, the textarea can be resized vertically using a drag handle.
      *

package/build/components/index.d.ts

@@ -47,11 +47,14 @@ export * from './ProgressBar';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
+export * from './Rating';
+export * from './Roundel';
 export * from './SectionHeader';
 export * from './SegmentedControl';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';
+export * from './StepperInput';
 export * from './Switch';
 export * from './Table';
 export * from './Tabs';

package/build/components/index.js

@@ -48,11 +48,14 @@ export * from './ProgressBar';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
+export * from './Rating';
+export * from './Roundel';
 export * from './SectionHeader';
 export * from './SegmentedControl';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';
+export * from './StepperInput';
 export * from './Switch';
 export * from './Table';
 export * from './Tabs';

package/build/core/themes.d.ts

@@ -1276,6 +1276,7 @@ export declare const lightTheme: {
             readonly '700': "#4c4c4c";
             readonly '800': "#3f3f3f";
             readonly '900': "#3a3837";
+            readonly '925': "#2f2d2d";
             readonly '950': "#232323";
             readonly '975': "#191919";
             readonly '1000': "#101010";
@@ -1409,14 +1410,14 @@ export declare const darkTheme: {
     readonly helpers: {
         readonly semanticColor: {
             readonly background: {
-                readonly brand: "#7a42c8";
+                readonly brand: "#442484";
                 readonly loading: "#30302c";
                 readonly primary: "#191917";
-                readonly secondary: "#232323";
+                readonly secondary: "#2f2d2d";
             };
             readonly border: {
-                readonly strong: "#ebebeb";
-                readonly subtle: "#4c473d";
+                readonly strong: "#888888";
+                readonly subtle: "#5b5b5b";
             };
             readonly text: {
                 readonly affirmative: "#58ca93";
@@ -2360,25 +2361,25 @@ export declare const darkTheme: {
          */
         readonly black: "#000000";
         readonly background: {
-            readonly brand: "#7a42c8";
+            readonly brand: "#442484";
             readonly loading: "#30302c";
             readonly primary: "#191917";
-            readonly secondary: "#232323";
+            readonly secondary: "#2f2d2d";
         };
         readonly border: {
-            readonly strong: "#ebebeb";
-            readonly subtle: "#4c473d";
+            readonly strong: "#888888";
+            readonly subtle: "#5b5b5b";
         };
         readonly feedback: {
             readonly danger: {
-                readonly border: "#ff7964";
+                readonly border: "#f4412a";
                 readonly foreground: {
-                    readonly default: "#101010";
+                    readonly default: "#ffffff";
                     readonly subtle: "#ff7964";
                 };
                 readonly surface: {
-                    readonly default: "#ff634a";
-                    readonly subtle: "#ffa89d";
+                    readonly default: "#de2612";
+                    readonly subtle: "#6b1f1a";
                 };
             };
             readonly functional: {
@@ -2393,36 +2394,36 @@ export declare const darkTheme: {
                 };
             };
             readonly info: {
-                readonly border: "#6bb0ff";
+                readonly border: "#2786f1";
                 readonly foreground: {
-                    readonly default: "#101010";
+                    readonly default: "#ffffff";
                     readonly subtle: "#6bb0ff";
                 };
                 readonly surface: {
-                    readonly default: "#6bb0ff";
-                    readonly subtle: "#bcddff";
+                    readonly default: "#1c6cd4";
+                    readonly subtle: "#0b3375";
                 };
             };
             readonly positive: {
-                readonly border: "#58ca93";
+                readonly border: "#19a660";
                 readonly foreground: {
-                    readonly default: "#101010";
+                    readonly default: "#ffffff";
                     readonly subtle: "#58ca93";
                 };
                 readonly surface: {
-                    readonly default: "#36bf7d";
-                    readonly subtle: "#a2e2c3";
+                    readonly default: "#0f834a";
+                    readonly subtle: "#074b2a";
                 };
             };
             readonly warning: {
-                readonly border: "#ff9639";
+                readonly border: "#f56e00";
                 readonly foreground: {
-                    readonly default: "#101010";
+                    readonly default: "#ffffff";
                     readonly subtle: "#ff9639";
                 };
                 readonly surface: {
-                    readonly default: "#ff8010";
-                    readonly subtle: "#ffcca8";
+                    readonly default: "#cf5d00";
+                    readonly subtle: "#893900";
                 };
             };
         };
@@ -2465,9 +2466,9 @@ export declare const darkTheme: {
                 };
                 readonly surface: {
                     readonly strong: {
-                        readonly active: "#c6b5e2";
-                        readonly default: "#996cda";
-                        readonly hover: "#af90de";
+                        readonly active: "#ddd5eb";
+                        readonly default: "#af90de";
+                        readonly hover: "#c6b5e2";
                     };
                 };
             };
@@ -2550,52 +2551,52 @@ export declare const darkTheme: {
             };
         };
         readonly shadow: {
-            readonly brand: "#7a42c8";
-            readonly broadband: "#506c21";
-            readonly cashback: "#8b2bc9";
-            readonly default: "#f7f7f7";
-            readonly energy: "#326e7a";
-            readonly insurance: "#9b4c0e";
-            readonly mobile: "#a7266d";
-            readonly pig: "#8f358f";
+            readonly brand: "#442484";
+            readonly broadband: "#4f6b20";
+            readonly cashback: "#7429b5";
+            readonly default: "#3f3f3f";
+            readonly energy: "#2c6370";
+            readonly insurance: "#7f4518";
+            readonly mobile: "#8a3260";
+            readonly pig: "#7a1f7e";
         };
         readonly surface: {
             readonly brand: {
-                readonly default: "#996cda";
+                readonly default: "#af90de";
                 readonly strong: "#26164f";
                 readonly subtle: "#442484";
             };
             readonly broadband: {
                 readonly default: "#506c21";
-                readonly subtle: "#35421c";
+                readonly subtle: "#4f6b20";
             };
             readonly cashback: {
                 readonly default: "#8b2bc9";
-                readonly subtle: "#522270";
+                readonly subtle: "#7429b5";
             };
             readonly energy: {
                 readonly default: "#326e7a";
-                readonly subtle: "#254348";
+                readonly subtle: "#2c6370";
             };
             readonly highlight: {
                 readonly default: "#ffb921";
-                readonly subtle: "#756230";
+                readonly subtle: "#82692b";
             };
             readonly insurance: {
                 readonly default: "#9b4c0e";
-                readonly subtle: "#5a3213";
+                readonly subtle: "#7f4518";
             };
             readonly mobile: {
                 readonly default: "#a7266d";
-                readonly subtle: "#601f42";
+                readonly subtle: "#8a3260";
             };
             readonly neutral: {
-                readonly strong: "#232323";
+                readonly strong: "#2f2d2d";
                 readonly subtle: "#191917";
             };
             readonly pig: {
                 readonly default: "#8f358f";
-                readonly subtle: "#5d2167";
+                readonly subtle: "#7a1f7e";
             };
         };
         readonly text: {
@@ -2692,6 +2693,7 @@ export declare const darkTheme: {
             readonly '700': "#4c4c4c";
             readonly '800': "#3f3f3f";
             readonly '900': "#3a3837";
+            readonly '925': "#2f2d2d";
             readonly '950': "#232323";
             readonly '975': "#191919";
             readonly '1000': "#101010";
@@ -4098,6 +4100,7 @@ export declare const themes: {
                 readonly '700': "#4c4c4c";
                 readonly '800': "#3f3f3f";
                 readonly '900': "#3a3837";
+                readonly '925': "#2f2d2d";
                 readonly '950': "#232323";
                 readonly '975': "#191919";
                 readonly '1000': "#101010";
@@ -4231,14 +4234,14 @@ export declare const themes: {
         readonly helpers: {
             readonly semanticColor: {
                 readonly background: {
-                    readonly brand: "#7a42c8";
+                    readonly brand: "#442484";
                     readonly loading: "#30302c";
                     readonly primary: "#191917";
-                    readonly secondary: "#232323";
+                    readonly secondary: "#2f2d2d";
                 };
                 readonly border: {
-                    readonly strong: "#ebebeb";
-                    readonly subtle: "#4c473d";
+                    readonly strong: "#888888";
+                    readonly subtle: "#5b5b5b";
                 };
                 readonly text: {
                     readonly affirmative: "#58ca93";
@@ -5182,25 +5185,25 @@ export declare const themes: {
              */
             readonly black: "#000000";
             readonly background: {
-                readonly brand: "#7a42c8";
+                readonly brand: "#442484";
                 readonly loading: "#30302c";
                 readonly primary: "#191917";
-                readonly secondary: "#232323";
+                readonly secondary: "#2f2d2d";
             };
             readonly border: {
-                readonly strong: "#ebebeb";
-                readonly subtle: "#4c473d";
+                readonly strong: "#888888";
+                readonly subtle: "#5b5b5b";
             };
             readonly feedback: {
                 readonly danger: {
-                    readonly border: "#ff7964";
+                    readonly border: "#f4412a";
                     readonly foreground: {
-                        readonly default: "#101010";
+                        readonly default: "#ffffff";
                         readonly subtle: "#ff7964";
                     };
                     readonly surface: {
-                        readonly default: "#ff634a";
-                        readonly subtle: "#ffa89d";
+                        readonly default: "#de2612";
+                        readonly subtle: "#6b1f1a";
                     };
                 };
                 readonly functional: {
@@ -5215,36 +5218,36 @@ export declare const themes: {
                     };
                 };
                 readonly info: {
-                    readonly border: "#6bb0ff";
+                    readonly border: "#2786f1";
                     readonly foreground: {
-                        readonly default: "#101010";
+                        readonly default: "#ffffff";
                         readonly subtle: "#6bb0ff";
                     };
                     readonly surface: {
-                        readonly default: "#6bb0ff";
-                        readonly subtle: "#bcddff";
+                        readonly default: "#1c6cd4";
+                        readonly subtle: "#0b3375";
                     };
                 };
                 readonly positive: {
-                    readonly border: "#58ca93";
+                    readonly border: "#19a660";
                     readonly foreground: {
-                        readonly default: "#101010";
+                        readonly default: "#ffffff";
                         readonly subtle: "#58ca93";
                     };
                     readonly surface: {
-                        readonly default: "#36bf7d";
-                        readonly subtle: "#a2e2c3";
+                        readonly default: "#0f834a";
+                        readonly subtle: "#074b2a";
                     };
                 };
                 readonly warning: {
-                    readonly border: "#ff9639";
+                    readonly border: "#f56e00";
                     readonly foreground: {
-                        readonly default: "#101010";
+                        readonly default: "#ffffff";
                         readonly subtle: "#ff9639";
                     };
                     readonly surface: {
-                        readonly default: "#ff8010";
-                        readonly subtle: "#ffcca8";
+                        readonly default: "#cf5d00";
+                        readonly subtle: "#893900";
                     };
                 };
             };
@@ -5287,9 +5290,9 @@ export declare const themes: {
                     };
                     readonly surface: {
                         readonly strong: {
-                            readonly active: "#c6b5e2";
-                            readonly default: "#996cda";
-                            readonly hover: "#af90de";
+                            readonly active: "#ddd5eb";
+                            readonly default: "#af90de";
+                            readonly hover: "#c6b5e2";
                         };
                     };
                 };
@@ -5372,52 +5375,52 @@ export declare const themes: {
                 };
             };
             readonly shadow: {
-                readonly brand: "#7a42c8";
-                readonly broadband: "#506c21";
-                readonly cashback: "#8b2bc9";
-                readonly default: "#f7f7f7";
-                readonly energy: "#326e7a";
-                readonly insurance: "#9b4c0e";
-                readonly mobile: "#a7266d";
-                readonly pig: "#8f358f";
+                readonly brand: "#442484";
+                readonly broadband: "#4f6b20";
+                readonly cashback: "#7429b5";
+                readonly default: "#3f3f3f";
+                readonly energy: "#2c6370";
+                readonly insurance: "#7f4518";
+                readonly mobile: "#8a3260";
+                readonly pig: "#7a1f7e";
             };
             readonly surface: {
                 readonly brand: {
-                    readonly default: "#996cda";
+                    readonly default: "#af90de";
                     readonly strong: "#26164f";
                     readonly subtle: "#442484";
                 };
                 readonly broadband: {
                     readonly default: "#506c21";
-                    readonly subtle: "#35421c";
+                    readonly subtle: "#4f6b20";
                 };
                 readonly cashback: {
                     readonly default: "#8b2bc9";
-                    readonly subtle: "#522270";
+                    readonly subtle: "#7429b5";
                 };
                 readonly energy: {
                     readonly default: "#326e7a";
-                    readonly subtle: "#254348";
+                    readonly subtle: "#2c6370";
                 };
                 readonly highlight: {
                     readonly default: "#ffb921";
-                    readonly subtle: "#756230";
+                    readonly subtle: "#82692b";
                 };
                 readonly insurance: {
                     readonly default: "#9b4c0e";
-                    readonly subtle: "#5a3213";
+                    readonly subtle: "#7f4518";
                 };
                 readonly mobile: {
                     readonly default: "#a7266d";
-                    readonly subtle: "#601f42";
+                    readonly subtle: "#8a3260";
                 };
                 readonly neutral: {
-                    readonly strong: "#232323";
+                    readonly strong: "#2f2d2d";
                     readonly subtle: "#191917";
                 };
                 readonly pig: {
                     readonly default: "#8f358f";
-                    readonly subtle: "#5d2167";
+                    readonly subtle: "#7a1f7e";
                 };
             };
             readonly text: {
@@ -5514,6 +5517,7 @@ export declare const themes: {
                 readonly '700': "#4c4c4c";
                 readonly '800': "#3f3f3f";
                 readonly '900': "#3a3837";
+                readonly '925': "#2f2d2d";
                 readonly '950': "#232323";
                 readonly '975': "#191919";
                 readonly '1000': "#101010";