@utilitywarehouse/hearth-react-native 0.12.0 → 0.14.0

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.14.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,7 +50,7 @@
     "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",
@@ -60,7 +59,7 @@
     "@utilitywarehouse/hearth-react-icons": "^0.7.4",
     "@utilitywarehouse/hearth-react-native-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,
       },

package/src/components/Alert/Alert.figma.tsx

@@ -0,0 +1,47 @@
+import figma from '@figma/code-connect';
+import { Alert } from './';
+
+figma.connect(Alert, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3288%3A4656', {
+  links: [
+    {
+      name: 'Engineering Docs',
+      url: 'https://hearth.prod.uw.systems/react-native/?path=/docs/components-alert--docs',
+    },
+  ],
+  props: {
+    colorScheme: figma.enum('Color Scheme', {
+      Info: 'info',
+      Positive: 'positive',
+      Warning: 'warning',
+      Danger: 'danger',
+    }),
+    iconButton: figma.boolean('Icon button?', {
+      true: () => console.log('icon button pressed'),
+      false: undefined,
+    }),
+    text: figma.string('Text'),
+    close: figma.boolean('Close?', {
+      true: () => console.log('close'),
+      false: undefined,
+    }),
+    title: figma.string('Title'),
+    showLink: figma.boolean('Link?', {
+      true: () => console.log('link pressed'),
+      false: undefined,
+    }),
+    link: figma.nestedProps('Link', {
+      text: figma.string('Text'),
+    }),
+  },
+  example: props => (
+    <Alert
+      colorScheme={props.colorScheme}
+      title={props.title}
+      text={props.text}
+      onClose={props.close}
+      onPressIconButton={props.iconButton}
+      link={props.link.text}
+      onPressLink={props.showLink}
+    />
+  ),
+});

package/src/components/Avatar/Avatar.figma.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import Avatar from "./Avatar"
+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(
+  Avatar,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6790%3A14313",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      size: figma.enum("Size", {
+        "SM-32": "sm",
+        "MD-48": "md",
+      }),
+      // No matching props could be found for these Figma properties:
+      // "initials": figma.string('Initials'),
+      // "image": figma.instance('Image'),
+      // "variant": figma.enum('Variant', {
+      //   "Image": "image",
+      //   "Initials": "initials",
+      //   "Icon": "icon"
+      // })
+    },
+    example: (props) => <Avatar size={props.size} />,
+  },
+)

package/src/components/Badge/Badge.figma.tsx

@@ -1,32 +1,56 @@
-import { Badge } from './';
-import figma from '@figma/code-connect';
+import React from "react"
+import Badge from "./Badge"
+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(
   Badge,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components-%26-Tokens?node-id=61-652&t=8rlYQ45xy8j75vwM-4',
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=61%3A652",
   {
-    links: [
-      {
-        name: 'Storybook - Docs',
-        url: 'https://uw-hearth-react-native.vercel.app/?path=/docs/components-badge--docs',
-      },
-    ],
     props: {
-      text: figma.string('Text'),
-      colorScheme: figma.enum('Color Scheme', {
-        Blue: 'blue',
-        Orange: 'orange',
-        Green: 'green',
-        Grey: 'grey',
-        Red: 'red',
+      // These props were automatically mapped based on your linked code:
+      variant: figma.enum("Variant", {
+        "Subtle - Default": "subtle",
+        Emphasis: "emphasis",
+        Outline: "outline",
+      }),
+      colorScheme: figma.enum("Color Scheme", {
+        Info: "info",
+        Positive: "positive",
+        Danger: "danger",
+        Warning: "warning",
+        Functional: "functional",
+        Energy: "energy",
+        Broadband: "broadband",
+        Mobile: "mobile",
+        Insurance: "insurance",
+        Cashback: "cashback",
+        Pig: "pig",
+        Highlight: "highlight",
       }),
-      variant: figma.enum('Variant', {
-        Solid: 'solid',
-        Outline: 'outline',
+      size: figma.enum("Size", {
+        "SM-24": "sm",
+        "MD-28": "md",
       }),
-      flatBase: figma.boolean('Flat Base?'),
-      icon: figma.instance('Icon'),
+      flatBase: figma.boolean("Flat Base?"),
+      // No matching props could be found for these Figma properties:
+      // "icon": figma.boolean('Icon?'),
+      // "icon20": figma.instance('Icon-20'),
+      // "text": figma.string('Text')
     },
-    example: ({ text, ...props }) => <Badge {...props}>{text}</Badge>,
-  }
-);
+    example: (props) => (
+      <Badge
+        variant={props.variant}
+        colorScheme={props.colorScheme}
+        size={props.size}
+        flatBase={props.flatBase}
+      />
+    ),
+  },
+)

package/src/components/Banner/Banner.figma.tsx

@@ -0,0 +1,15 @@
+import figma from '@figma/code-connect';
+import Banner from './Banner';
+
+/**
+ * -- 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(Banner, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=8294%3A3905', {
+  props: {},
+  example: props => <Banner heading={null} description={null} />,
+});

package/src/components/Banner/BannerIllustration.figma.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import BannerIllustration from "./BannerIllustration"
+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(
+  BannerIllustration,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=10145%3A4877",
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "illustration": figma.instance('Illustration'),
+      // "size": figma.enum('Size', {
+      //   "XL-120": "xl-120",
+      //   "LG-100": "lg-100",
+      //   "MD-80": "md-80",
+      //   "SM-60": "sm-60",
+      //   "XS-40": "xs-40"
+      // })
+    },
+    example: (props) => <BannerIllustration />,
+  },
+)