@utilitywarehouse/hearth-react-native 0.12.0 → 0.13.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.12.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.13.0 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.12.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.13.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint --max-warnings 0
 
 Rule | Time (ms) | Relative

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.13.0
+
+### Minor Changes
+
+- [#682](https://github.com/utilitywarehouse/hearth/pull/682) [`57d6c71`](https://github.com/utilitywarehouse/hearth/commit/57d6c71baedeaa0bc914ff5163e73bbf4281aa79) Thanks [@Utakato](https://github.com/Utakato)! - Add Verification Input component
+
 ## 0.12.0
 
 ### Minor Changes

package/build/components/Accordion/AccordionTrigger.js

@@ -25,7 +25,7 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
             },
-            '_focus-visible': theme.helpers.focusVisible,
+            // '_focus-visible': theme.helpers.focusVisible,
             _active: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
             },

package/build/components/Checkbox/CheckboxIndicator.js

@@ -30,9 +30,9 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 outlineColor: theme.components.checkbox.outlineColorHover,
             },
-            '_focus-within': {
-                ...theme.helpers.focusVisible,
-            },
+            // '_focus-within': {
+            //   ...theme.helpers.focusVisible,
+            // },
             _active: {
                 outlineColor: theme.components.checkbox.outlineColorActive,
             },

package/build/components/DatePicker/DatePickerDay.js

@@ -133,9 +133,9 @@ const styles = StyleSheet.create(theme => ({
             },
         ],
         _web: {
-            '_focus-visible': {
-                ...theme.helpers.focusVisible,
-            },
+            // '_focus-visible': {
+            //   ...theme.helpers.focusVisible,
+            // },
             _active: {
                 backgroundColor: theme.color.interactive.functional.surface.subtle.active,
             },

package/build/components/PillGroup/Pill.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createPressable } from '@gluestack-ui/pressable';
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { Icon } from '../Icon';
 import { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
 import { usePillGroupContext } from './PillGroup.context';
 const PillRoot = ({ value, label, icon, states = {}, ...props }) => {
     const { active } = states;
@@ -35,7 +35,7 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
             },
-            '_focus-visible': theme.helpers.focusVisible,
+            // '_focus-visible': theme.helpers.focusVisible,
         },
         variants: {
             active: {

package/build/components/Radio/RadioIndicator.js

@@ -30,9 +30,9 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 outlineColor: theme.components.radio.outlineColorHover,
             },
-            '_focus-within': {
-                ...theme.helpers.focusVisible,
-            },
+            // '_focus-within': {
+            //   ...theme.helpers.focusVisible,
+            // },
             _active: {
                 outlineColor: theme.components.radio.outlineColorActive,
             },

package/build/components/RadioCard/RadioCardIndicator.js

@@ -30,9 +30,9 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 outlineColor: theme.components.radio.outlineColorHover,
             },
-            '_focus-within': {
-                ...theme.helpers.focusVisible,
-            },
+            // '_focus-within': {
+            //   ...theme.helpers.focusVisible,
+            // },
             _active: {
                 outlineColor: theme.components.radio.outlineColorActive,
             },

package/build/components/RadioCard/RadioCardRoot.js

@@ -52,9 +52,9 @@ const styles = StyleSheet.create(theme => ({
             },
         },
         _web: {
-            '_focus-visible': {
-                ...theme.helpers.focusVisible,
-            },
+        // '_focus-visible': {
+        //   ...theme.helpers.focusVisible,
+        // },
         },
     },
 }));

package/build/components/Tabs/Tab.js

@@ -38,11 +38,11 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
             },
-            '_focus-visible': {
-                ...theme.helpers.focusVisible,
-                outlineOffset: -2,
-                borderRadius: theme.borderRadius.sm,
-            },
+            // '_focus-visible': {
+            //   ...theme.helpers.focusVisible,
+            //   outlineOffset: -2,
+            //   borderRadius: theme.borderRadius.sm,
+            // },
             _active: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
             },

package/build/components/ToggleButton/ToggleButtonRoot.js

@@ -7,7 +7,7 @@ const ButtonRoot = ({ children, onToggle, toggled, states, onPress, ...props })
     const { pressed } = useCardPressHandlerContext();
     styles.useVariants({
         toggled,
-        active: active || pressed,
+        active,
     });
     const handlePress = (e) => {
         onPress?.(e);
@@ -34,7 +34,7 @@ const styles = StyleSheet.create(theme => ({
         borderColor: theme.color.interactive.neutral.border.subtle,
         height: theme.components.toggleButton.height,
         _web: {
-            '_focus-visible': theme.helpers.focusVisible,
+            // '_focus-visible': theme.helpers.focusVisible,
             _hover: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
             },

package/build/components/ToggleButtonCard/ToggleButtonCardRoot.js

@@ -44,9 +44,9 @@ const styles = StyleSheet.create(theme => ({
             },
         },
         _web: {
-            '_focus-visible': {
-                ...theme.helpers.focusVisible,
-            },
+        // '_focus-visible': {
+        //   ...theme.helpers.focusVisible,
+        // },
         },
     },
     buttonContainer: {

package/build/components/UnstyledIconButton/UnstyledIconButtonRoot.js

@@ -17,7 +17,7 @@ const styles = StyleSheet.create(theme => ({
         alignItems: 'center',
         borderRadius: theme.borderRadius.sm,
         _web: {
-            '_focus-visible': theme.helpers.focusVisible,
+        // '_focus-visible': theme.helpers.focusVisible,
         },
         variants: {
             disabled: {

package/build/components/VerificationInput/VerificationInput.d.ts

@@ -0,0 +1,6 @@
+import VerificationInputProps from './VerificationInput.props';
+declare const VerificationInput: {
+    ({ value, onChangeText, label, helperText, helperIcon, validationStatus, validText, invalidText, disabled, readonly, secureTextEntry, style, ...props }: VerificationInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default VerificationInput;

package/build/components/VerificationInput/VerificationInput.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { FormField } from '../FormField';
+import { useVerificationInput } from './useVerificationInput';
+import { VerificationInputSlot } from './VerificationInputSlot';
+const VerificationInput = ({ value = '', onChangeText, label, helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled = false, readonly = false, secureTextEntry = false, style, ...props }) => {
+    const length = 6;
+    const { inputRefs, focusedIndex, handleFocus, handleBlur, handleChangeText, handleKeyPress } = useVerificationInput({
+        value,
+        onChangeText,
+    });
+    const slots = Array.from({ length }, (_, index) => index);
+    return (_jsx(FormField, { label: label, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, style: [styles.root, style], ...props, children: _jsx(View, { style: styles.slotsContainer, children: slots.map(index => {
+                const char = value[index] || '';
+                const isActive = focusedIndex === index;
+                return (_jsx(VerificationInputSlot, { ref: ref => {
+                        inputRefs.current[index] = ref;
+                    }, value: char, isActive: isActive, validationStatus: validationStatus, disabled: disabled, readonly: readonly, secureTextEntry: secureTextEntry, onChangeText: text => handleChangeText(text, index), onKeyPress: e => handleKeyPress(e, index), onFocus: () => handleFocus(index), onBlur: handleBlur }, index));
+            }) }) }));
+};
+const styles = StyleSheet.create(theme => ({
+    root: {
+        gap: theme.components.input.verification.gap,
+        width: '100%',
+        maxWidth: theme.components.input.maxWidth,
+    },
+    slotsContainer: {
+        flexDirection: 'row',
+        gap: theme.components.input.verification.gap,
+        width: '100%',
+    },
+}));
+VerificationInput.displayName = 'VerificationInput';
+export default VerificationInput;

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

@@ -0,0 +1,49 @@
+import type { ComponentType } from 'react';
+import { ViewProps } from 'react-native';
+export interface VerificationInputProps extends ViewProps {
+    /**
+     * The value of the input.
+     */
+    value?: string;
+    /**
+     * Callback when the value changes.
+     */
+    onChangeText?: (text: string) => void;
+    /**
+     * The label for the input.
+     */
+    label?: string;
+    /**
+     * Helper text to display below the input.
+     */
+    helperText?: string;
+    /**
+     * Icon to display alongside the helper text.
+     */
+    helperIcon?: ComponentType;
+    /**
+     * The validation status of the input.
+     */
+    validationStatus?: 'initial' | 'valid' | 'invalid';
+    /**
+     * Text to display when validation status is 'valid'.
+     */
+    validText?: string;
+    /**
+     * Text to display when validation status is 'invalid'.
+     */
+    invalidText?: string;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input is read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Whether to obscure the text entry (e.g. for passwords/OTPs).
+     */
+    secureTextEntry?: boolean;
+}
+export default VerificationInputProps;

package/build/components/VerificationInput/VerificationInput.props.js

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

package/build/components/VerificationInput/VerificationInputSlot.d.ts

@@ -0,0 +1,9 @@
+import { TextInput, TextInputProps } from 'react-native';
+interface VerificationInputSlotProps extends TextInputProps {
+    isActive: boolean;
+    validationStatus: 'initial' | 'valid' | 'invalid';
+    disabled?: boolean;
+    readonly?: boolean;
+}
+export declare const VerificationInputSlot: import("react").ForwardRefExoticComponent<VerificationInputSlotProps & import("react").RefAttributes<TextInput>>;
+export {};

package/build/components/VerificationInput/VerificationInputSlot.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { StyleSheet } from 'react-native-unistyles';
+import InputField from '../Input/InputField';
+export const VerificationInputSlot = forwardRef(({ isActive, validationStatus, disabled, readonly, style, ...props }, ref) => {
+    styles.useVariants({
+        disabled,
+        readonly,
+        validationStatus,
+        active: isActive,
+    });
+    return (_jsx(InputField, { ref: ref, ...props, editable: !disabled && !readonly, selectTextOnFocus: true, keyboardType: "number-pad", style: [styles.slot, style] }));
+});
+VerificationInputSlot.displayName = 'VerificationInputSlot';
+const styles = StyleSheet.create(theme => ({
+    slot: {
+        flex: 0,
+        width: theme.components.input.height,
+        height: theme.components.input.height,
+        borderWidth: theme.components.input.borderWidth,
+        borderColor: theme.color.border.strong,
+        borderRadius: theme.components.input.borderRadius,
+        backgroundColor: theme.color.surface.neutral.strong,
+        textAlign: 'center',
+        padding: 0,
+        variants: {
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                    color: theme.color.text.secondary,
+                },
+            },
+            readonly: {
+                true: {
+                    borderColor: theme.color.border.subtle,
+                    backgroundColor: theme.color.surface.neutral.subtle,
+                },
+            },
+            validationStatus: {
+                initial: {},
+                valid: {
+                    borderColor: theme.color.feedback.positive.border,
+                },
+                invalid: {
+                    borderColor: theme.color.feedback.danger.border,
+                },
+            },
+            active: {
+                true: {
+                    borderColor: theme.color.border.strong,
+                    borderWidth: theme.components.input.borderWidthFocused,
+                },
+            },
+        },
+        compoundVariants: [
+            {
+                validationStatus: 'invalid',
+                active: true,
+                styles: {
+                    borderColor: theme.color.feedback.danger.border,
+                },
+            },
+            {
+                validationStatus: 'valid',
+                active: true,
+                styles: {
+                    borderColor: theme.color.border.strong,
+                },
+            },
+        ],
+    },
+}));

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

@@ -0,0 +1,4 @@
+import VerificationInput from './VerificationInput';
+export { default as VerificationInput } from './VerificationInput';
+export type { default as VerificationInputProps } from './VerificationInput.props';
+export default VerificationInput;

package/build/components/VerificationInput/index.js

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

package/build/components/VerificationInput/useVerificationInput.d.ts

@@ -0,0 +1,14 @@
+import { NativeSyntheticEvent, TextInput, TextInputKeyPressEventData } from 'react-native';
+interface UseVerificationInputProps {
+    value: string;
+    onChangeText?: (text: string) => void;
+}
+export declare const useVerificationInput: ({ value, onChangeText }: UseVerificationInputProps) => {
+    inputRefs: import("react").RefObject<(TextInput | null)[]>;
+    focusedIndex: number | null;
+    handleFocus: (index: number) => void;
+    handleBlur: () => void;
+    handleChangeText: (text: string, index: number) => void;
+    handleKeyPress: (e: NativeSyntheticEvent<TextInputKeyPressEventData>, index: number) => void;
+};
+export {};

package/build/components/VerificationInput/useVerificationInput.js

@@ -0,0 +1,58 @@
+import { useRef, useState } from 'react';
+export const useVerificationInput = ({ value, onChangeText }) => {
+    const length = 6;
+    const inputRefs = useRef([]);
+    const [focusedIndex, setFocusedIndex] = useState(null);
+    const handleFocus = (index) => {
+        setFocusedIndex(index);
+    };
+    const handleBlur = () => {
+        setFocusedIndex(null);
+    };
+    const handleChangeText = (text, index) => {
+        // Break down the text into an array of characters
+        const chars = Array(length).fill('');
+        for (let i = 0; i < value.length && i < length; i++) {
+            chars[i] = value[i];
+        }
+        if (text.length > 1) {
+            // Handle paste
+            const pastedChars = text.slice(0, length - index).split('');
+            for (let i = 0; i < pastedChars.length; i++) {
+                chars[index + i] = pastedChars[i];
+            }
+            const nextIndex = Math.min(index + pastedChars.length, length - 1);
+            inputRefs.current[nextIndex]?.focus();
+        }
+        else {
+            // Handle single char input
+            chars[index] = text;
+            if (text.length === 1 && index < length - 1) {
+                inputRefs.current[index + 1]?.focus();
+            }
+        }
+        onChangeText?.(chars.join(''));
+    };
+    const handleKeyPress = (e, index) => {
+        if (e.nativeEvent.key === 'Backspace') {
+            if (!value[index] && index > 0) {
+                e.preventDefault();
+                inputRefs.current[index - 1]?.focus();
+                const chars = Array(length).fill('');
+                for (let i = 0; i < value.length && i < length; i++) {
+                    chars[i] = value[i];
+                }
+                chars[index - 1] = '';
+                onChangeText?.(chars.join(''));
+            }
+        }
+    };
+    return {
+        inputRefs,
+        focusedIndex,
+        handleFocus,
+        handleBlur,
+        handleChangeText,
+        handleKeyPress,
+    };
+};

package/build/components/index.d.ts

@@ -53,6 +53,7 @@ export * from './Textarea';
 export * from './ThemedImage';
 export * from './Toast';
 export * from './ToggleButtonCard';
+export * from './VerificationInput';
 export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';
 export { Pressable } from 'react-native';
 export { createIcon } from '@gluestack-ui/icon';

package/build/components/index.js

@@ -54,6 +54,7 @@ export * from './Textarea';
 export * from './ThemedImage';
 export * from './Toast';
 export * from './ToggleButtonCard';
+export * from './VerificationInput';
 export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';
 export { Pressable } from 'react-native';
 export { createIcon } from '@gluestack-ui/icon';

package/docs/components/AllComponents.web.tsx

@@ -94,6 +94,7 @@ import {
   ToggleButtonCardGroup,
   UL,
   useColorMode,
+  VerificationInput,
 } from '../../src';
 import { addReactNativePrefix } from '../heplers';
 
@@ -821,6 +822,14 @@ const AllComponents: React.FC = () => {
               </UL>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper
+            name="Verification Input"
+            link="/?path=/docs/forms-verificationinput--docs"
+          >
+            <Center flex={1} padding="200">
+              <VerificationInput onChangeText={() => {}} />
+            </Center>
+          </ComponentWrapper>
         </Flex>
       </ScrollView>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -24,20 +24,19 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@chromatic-com/storybook": "^4.1.2",
-    "@figma/code-connect": "^1.3.3",
+    "@chromatic-com/storybook": "^4.1.3",
+    "@figma/code-connect": "^1.3.11",
     "@gorhom/bottom-sheet": "5.2.6",
-    "@storybook/addon-a11y": "^10.0.5",
-    "@storybook/addon-docs": "^10.0.5",
-    "@storybook/addon-vitest": "^10.0.5",
-    "@storybook/react": "^10.0.5",
-    "@storybook/react-native-web-vite": "^10.0.5",
+    "@storybook/addon-a11y": "^10.1.4",
+    "@storybook/addon-docs": "^10.1.4",
+    "@storybook/addon-vitest": "^10.1.4",
+    "@storybook/react-native-web-vite": "^10.1.4",
     "@types/prismjs": "^1.26.5",
     "@types/react": "^19.1.10",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "chromatic": "^13.3.0",
-    "eslint-plugin-storybook": "10.0.5",
+    "eslint-plugin-storybook": "10.1.4",
     "playwright": "^1.55.1",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
@@ -51,16 +50,16 @@
     "react-native-web": "^0.20.0",
     "react-native-worklets": "^0.6.1",
     "remark-gfm": "^4.0.1",
-    "storybook": "^10.0.5",
+    "storybook": "^10.1.4",
     "typescript": "^5.7.3",
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.7.4",
     "@utilitywarehouse/hearth-react-native-icons": "^0.7.4",
+    "@utilitywarehouse/hearth-react-icons": "^0.7.4",
     "@utilitywarehouse/hearth-svg-assets": "^0.2.0",
-    "@utilitywarehouse/hearth-tokens": "^0.2.1"
+    "@utilitywarehouse/hearth-tokens": "^0.2.2"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",

package/src/components/Accordion/Accordion.figma.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import Accordion from "./Accordion"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Accordion,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3385%3A7751",
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "sectionHeader": figma.boolean('Section header?')
+    },
+    example: (props) => <Accordion />,
+  },
+)

package/src/components/Accordion/AccordionItemRoot.figma.tsx

@@ -0,0 +1,47 @@
+import React from "react"
+import AccordionItemRoot from "./AccordionItemRoot"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from your code props to Figma properties.
+ * You should check this is correct, and update the `example` function
+ * to return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  AccordionItemRoot,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3390%3A6160",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      disabled: figma.enum("State", {
+        Active: true,
+      }),
+      title: figma.string("Title"),
+      expanded: figma.boolean("Expand?"),
+      triggerContent: figma.instance("Trigger custom content"),
+      collapsable: figma.boolean("Expand?"),
+      focusable: figma.enum("State", {
+        Focus: true,
+      }),
+      // No matching props could be found for these Figma properties:
+      // "customContent": figma.boolean('Custom content?'),
+      // "title": figma.string('Title'),
+      // "description": figma.string('Description'),
+      // "customContent": figma.instance('Custom content'),
+      // "triggerCustomContent": figma.instance('Trigger custom content'),
+      // "triggerCustomContent": figma.boolean('Trigger custom content?')
+    },
+    example: (props) => (
+      <AccordionItemRoot
+        disabled={props.disabled}
+        title={props.title}
+        expanded={props.expanded}
+        triggerContent={props.triggerContent}
+        collapsable={props.collapsable}
+        focusable={props.focusable}
+      />
+    ),
+  },
+)

package/src/components/Accordion/AccordionTrigger.tsx

@@ -31,7 +31,7 @@ const styles = StyleSheet.create(theme => ({
       _hover: {
         backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
       },
-      '_focus-visible': theme.helpers.focusVisible,
+      // '_focus-visible': theme.helpers.focusVisible,
       _active: {
         backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
       },