@utilitywarehouse/hearth-react-native 0.35.6 → 0.35.8

package/build/components/Tabs/Tabs.figma.js

@@ -0,0 +1,21 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6464%3A8744
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Tabs/Tabs.tsx
+// component=Tabs
+import figma from 'figma';
+const size = figma.selectedInstance.getEnum('Size', {
+    'MD-56': 'md',
+    'LG-64': 'lg',
+});
+const tabs = figma.properties.children(['Tab item']);
+export default {
+    id: 'Tabs',
+    imports: ["import { TabPanel, Tabs, TabsList } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<Tabs${figma.helpers.react.renderProp('size', size)}>
+      <TabsList>${figma.helpers.react.renderChildren(tabs)}</TabsList>
+      {/* Example TabPanel content, make sure they match the value of your Tab items */}
+      <TabPanel value="account">Account content</TabPanel>
+      <TabPanel value="billing">Billing content</TabPanel>
+      <TabPanel value="usage">Usage content</TabPanel>
+    </Tabs>`,
+    metadata: { nestable: true, props: { size, tabs } },
+};

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

@@ -0,0 +1,27 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            disabled: boolean | undefined;
+            readonly: boolean | undefined;
+            placeholder: string | undefined;
+            value: string | undefined;
+            label: string;
+            labelVariant: string | undefined;
+            helperText: string;
+            validationStatus: string | undefined;
+            invalidText: string | undefined;
+            validText: string | undefined;
+            required: figma.EnumOptionsValues<{
+                true: boolean;
+                false: boolean;
+            }>;
+            focused: boolean | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/Textarea/Textarea.figma.js

@@ -0,0 +1,53 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2356:5180
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Textarea/Textarea.tsx
+// component=Textarea
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const disabled = instance.getEnum('State', { Disabled: true });
+const readonly = instance.getEnum('State', { 'Read-only': true });
+const placeholder = instance.getEnum('Value type', {
+    Placeholder: instance.getString('Value'),
+});
+const value = instance.getEnum('Value type', { Filled: instance.getString('Value') });
+const label = instance.getString('Label');
+const labelVariant = instance.getEnum('Label variant', { Body: 'body', Heading: 'heading' });
+const helperText = instance.getBoolean('Helper text?', {
+    true: instance.getString('Helper text'),
+});
+const validationStatus = instance.getEnum('State', {
+    Invalid: 'invalid',
+    Valid: 'valid',
+});
+const invalidText = instance.getEnum('State', {
+    Invalid: instance.getString('Validation'),
+});
+const validText = instance.getEnum('State', {
+    Valid: instance.getString('Validation'),
+});
+const required = instance.getBoolean('Optional?', {
+    true: false,
+    false: true,
+});
+const focused = instance.getEnum('Focus?', { True: true });
+export default {
+    id: 'textarea',
+    imports: ['import { Textarea } from "@utilitywarehouse/hearth-react-native";'],
+    example: figma.code `<Textarea${figma.helpers.react.renderProp('disabled', disabled)}${figma.helpers.react.renderProp('readonly', readonly)}${figma.helpers.react.renderProp('placeholder', placeholder)}${figma.helpers.react.renderProp('value', value)}${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('labelVariant', labelVariant)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('validationStatus', validationStatus)}${figma.helpers.react.renderProp('invalidText', invalidText)}${figma.helpers.react.renderProp('validText', validText)}${figma.helpers.react.renderProp('required', required)}${figma.helpers.react.renderProp('focused', focused)} />`,
+    metadata: {
+        nestable: true,
+        props: {
+            disabled,
+            readonly,
+            placeholder,
+            value,
+            label,
+            labelVariant,
+            helperText,
+            validationStatus,
+            invalidText,
+            validText,
+            required,
+            focused,
+        },
+    },
+};

package/build/components/TimePicker/TimePicker.figma.d.ts

@@ -0,0 +1,16 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            hideFooter: figma.EnumOptionsValues<{
+                true: boolean;
+                false: boolean;
+            }>;
+        };
+    };
+};
+export default _default;

package/build/components/TimePicker/TimePicker.figma.js

@@ -0,0 +1,30 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10334-16770&t=Jg2fPJPQNzOyspmQ-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/TimePicker/TimePicker.tsx
+// component=TimePicker
+import figma from 'figma';
+const hideFooter = figma.selectedInstance.getBoolean('Footer?', {
+    true: false,
+    false: true,
+});
+export default {
+    id: 'time-picker',
+    imports: [
+        "import { useRef, useState } from 'react';",
+        "import { BottomSheetModalProvider, Button, TimePicker } from '@utilitywarehouse/hearth-react-native';",
+        "import type { DateType } from '@utilitywarehouse/hearth-react-native';",
+    ],
+    example: figma.code `const pickerRef = useRef(null);
+const [time, setTime] = useState<DateType>();
+
+<BottomSheetModalProvider>
+  <Button onPress={() => pickerRef.current?.present()}>Choose time</Button>
+  <TimePicker
+    ref={pickerRef}
+    date={time}
+    onChange={({ date }) => setTime(date)}
+    onCancel={() => setTime(undefined)}
+    use12Hours={false}${figma.helpers.react.renderProp('hideFooter', hideFooter)}
+  />
+</BottomSheetModalProvider>`,
+    metadata: { nestable: true, props: { hideFooter } },
+};

package/build/components/TimePickerInput/TimePickerInput.figma.d.ts

@@ -0,0 +1,29 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            disabled: boolean | undefined;
+            validationStatus: figma.EnumOptionsValues<{
+                Default: undefined;
+                Valid: string;
+                Invalid: string;
+            }>;
+            readonly: boolean | undefined;
+            label: string;
+            validText: string | undefined;
+            invalidText: string | undefined;
+            placeholder: string | undefined;
+            value: string | undefined;
+            helperText: figma.EnumOptionsValues<{
+                true: string;
+                false: undefined;
+            }>;
+            focused: boolean | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/TimePickerInput/TimePickerInput.figma.js

@@ -0,0 +1,53 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10334-6212&t=Jg2fPJPQNzOyspmQ-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/TimePickerInput/TimePickerInput.tsx
+// component=TimePickerInput
+import figma from 'figma';
+const disabled = figma.selectedInstance.getEnum('Variant', {
+    Disabled: true,
+});
+const validationStatus = figma.selectedInstance.getEnum('Variant', {
+    Default: undefined,
+    Valid: 'valid',
+    Invalid: 'invalid',
+});
+const readonly = figma.selectedInstance.getEnum('Variant', {
+    'Read-only': true,
+});
+const label = figma.selectedInstance.getString('Label');
+const validText = figma.selectedInstance.getEnum('Variant', {
+    Valid: figma.selectedInstance.getString('Validation'),
+});
+const invalidText = figma.selectedInstance.getEnum('Variant', {
+    Invalid: figma.selectedInstance.getString('Validation'),
+});
+const placeholder = figma.selectedInstance.getEnum('Value type', {
+    Placeholder: figma.selectedInstance.getString('Value'),
+});
+const value = figma.selectedInstance.getEnum('Value type', {
+    Filled: figma.selectedInstance.getString('Value'),
+});
+const helperText = figma.selectedInstance.getBoolean('Helper text?', {
+    true: figma.selectedInstance.getString('Helper text'),
+    false: undefined,
+});
+const focused = figma.selectedInstance.getEnum('Focus?', { Yes: true });
+export default {
+    id: 'TimePickerInput',
+    imports: ["import { TimePickerInput } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<TimePickerInput${figma.helpers.react.renderProp('disabled', disabled)}${figma.helpers.react.renderProp('validationStatus', validationStatus)}${figma.helpers.react.renderProp('readonly', readonly)}${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('validText', validText)}${figma.helpers.react.renderProp('invalidText', invalidText)}${figma.helpers.react.renderProp('placeholder', placeholder)}${figma.helpers.react.renderProp('value', value)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('focused', focused)}/>`,
+    metadata: {
+        nestable: true,
+        props: {
+            disabled,
+            validationStatus,
+            readonly,
+            label,
+            validText,
+            invalidText,
+            placeholder,
+            value,
+            helperText,
+            focused,
+        },
+    },
+};

package/build/components/Timeline/Timeline.figma.d.ts

@@ -0,0 +1,14 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            variant: string | undefined;
+            items: figma.ResultSection[][];
+        };
+    };
+};
+export default _default;

package/build/components/Timeline/Timeline.figma.js

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10592-5483&t=pZwKJYFo1y1QRQD1-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Timeline/Timeline.tsx
+// component=Timeline
+import figma from 'figma';
+const variant = figma.selectedInstance.getEnum('Variant', {
+    Progress: 'progress',
+    Static: 'static',
+});
+const itemLayers = figma.selectedInstance
+    .findLayers(n => n.type === 'INSTANCE')
+    .filter((layer) => layer.type === 'INSTANCE');
+const items = itemLayers
+    .filter(layer => layer.hasCodeConnect())
+    .map(layer => layer.executeTemplate().example);
+export default {
+    id: 'Timeline',
+    imports: ['import { Timeline } from "@utilitywarehouse/hearth-react-native";'],
+    example: figma.code `<Timeline${figma.helpers.react.renderProp('variant', variant)}>${figma.helpers.react.renderChildren(items.flat())}</Timeline>`,
+    metadata: {
+        nestable: true,
+        props: { variant, items },
+    },
+};

package/build/components/Timeline/TimelineItemProgress.figma.d.ts

@@ -0,0 +1,16 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            label: string;
+            helperText: string;
+            state: string | undefined;
+            customContent: figma.ResultSection[][];
+        };
+    };
+};
+export default _default;

package/build/components/Timeline/TimelineItemProgress.figma.js

@@ -0,0 +1,30 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10562-2810&t=pZwKJYFo1y1QRQD1-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Timeline/TimelineItem.tsx
+// component=TimelineItem
+import figma from 'figma';
+const label = figma.selectedInstance.getString('Label');
+const helperText = figma.selectedInstance.getBoolean('Helper text?', {
+    true: figma.selectedInstance.getString('Helper text'),
+});
+const state = figma.selectedInstance.getEnum('State', {
+    Complete: 'complete',
+    Active: 'active',
+    Incomplete: 'incomplete',
+});
+const slot = figma.selectedInstance.getSlot('Slot');
+const customContentInstance = figma.selectedInstance.getBoolean('Custom content?', {
+    true: figma.selectedInstance.getInstanceSwap('Custom content')?.executeTemplate().example,
+});
+const customContent = [
+    ...(slot?.connectedInstances.map(i => i.executeTemplate().example) ?? []),
+    ...(customContentInstance ? [customContentInstance] : []),
+];
+export default {
+    id: 'TimelineItem',
+    imports: ['import { TimelineItem } from "@utilitywarehouse/hearth-react-native";'],
+    example: figma.code `<TimelineItem variant="progress" position="middle"${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('state', state)}>${figma.helpers.react.renderChildren(customContent.flat())}</TimelineItem>`,
+    metadata: {
+        nestable: true,
+        props: { label, helperText, state, customContent },
+    },
+};

package/build/components/Timeline/TimelineItemStatic.figma.d.ts

@@ -0,0 +1,16 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            label: string;
+            helperText: string;
+            position: string | undefined;
+            customContent: figma.ResultSection[][];
+        };
+    };
+};
+export default _default;

package/build/components/Timeline/TimelineItemStatic.figma.js

@@ -0,0 +1,30 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10592-5189&t=pZwKJYFo1y1QRQD1-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Timeline/TimelineItem.tsx
+// component=TimelineItem
+import figma from 'figma';
+const label = figma.selectedInstance.getString('Label');
+const helperText = figma.selectedInstance.getBoolean('Helper text?', {
+    true: figma.selectedInstance.getString('Helper text'),
+});
+const position = figma.selectedInstance.getEnum('Variant', {
+    Start: 'start',
+    Middle: 'middle',
+    End: 'end',
+});
+const slot = figma.selectedInstance.getSlot('Slot');
+const customContentInstance = figma.selectedInstance.getBoolean('Custom content?', {
+    true: figma.selectedInstance.getInstanceSwap('Custom content')?.executeTemplate().example,
+});
+const customContent = [
+    ...(slot?.connectedInstances.map(i => i.executeTemplate().example) ?? []),
+    ...(customContentInstance ? [customContentInstance] : []),
+];
+export default {
+    id: 'TimelineItem',
+    imports: ['import { TimelineItem } from "@utilitywarehouse/hearth-react-native";'],
+    example: figma.code `<TimelineItem variant="static"${figma.helpers.react.renderProp('position', position)}${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('helperText', helperText)}>${figma.helpers.react.renderChildren(customContent.flat())}</TimelineItem>`,
+    metadata: {
+        nestable: true,
+        props: { label, helperText, position, customContent },
+    },
+};

package/build/components/Toast/ToastItem.figma.d.ts

@@ -0,0 +1,20 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            text: string;
+            hasIcon: boolean;
+            icon: figma.EnumOptionsValues<{
+                true: figma.ResultSection[] | undefined;
+                false: string;
+            }>;
+            hasLink: boolean;
+            hasDismiss: boolean;
+        };
+    };
+};
+export default _default;

package/build/components/Toast/ToastItem.figma.js

@@ -0,0 +1,42 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7072%3A913
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Toast/ToastItem.tsx
+// component=ToastItem
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const text = instance.getString('Text');
+const hasIcon = instance.getBoolean('Icon?');
+const icon = instance.getBoolean('Icon?', {
+    true: instance.getInstanceSwap('Icon-24')?.executeTemplate().example,
+    false: '',
+});
+const hasLink = instance.getBoolean('Link?');
+const hasDismiss = instance.getBoolean('Dismiss?');
+export default {
+    id: 'toast-item',
+    imports: [
+        "import { ToastItem } from '@utilitywarehouse/hearth-react-native';",
+        "import type { ToastInstance } from '@utilitywarehouse/hearth-react-native';",
+    ],
+    example: figma.code `<ToastItem
+    toast={{
+      id: 'toast-1',
+      text: '${text || 'Toast notification'}',
+      ${hasIcon ? figma.code `icon: ${icon},` : ''}
+      ${hasLink ? "actionText: 'Action'," : ''}
+      showDismissIcon: ${hasDismiss},
+      dismissOnPress: false,
+      duration: 6000,
+    }}
+    onClose={() => {}}
+  />`,
+    metadata: {
+        nestable: true,
+        props: {
+            text,
+            hasIcon,
+            icon,
+            hasLink,
+            hasDismiss,
+        },
+    },
+};

package/build/components/ToggleButtonCard/ToggleButtonCard.figma.d.ts

@@ -0,0 +1,14 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            label: string | undefined;
+            contentItems: figma.ResultSection[][];
+        };
+    };
+};
+export default _default;

package/build/components/ToggleButtonCard/ToggleButtonCard.figma.js

@@ -0,0 +1,28 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2164-727&t=Uq6QfQcygdNGv5lM-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/ToggleButtonCard/ToggleButtonCard.tsx
+// component=ToggleButtonCard
+import figma from 'figma';
+const instance = figma.selectedInstance;
+// Get label from the nested Toggle Button instance
+const label = (function () {
+    const nestedToggleButton = instance.findInstance('Toggle Button');
+    if (nestedToggleButton?.type !== 'ERROR') {
+        return nestedToggleButton.getString('Label');
+    }
+    return undefined;
+})();
+// Content is a SLOT property
+const contentSlot = instance.getSlot('Content');
+const contentItems = contentSlot?.connectedInstances.map(i => i.executeTemplate().example) ?? [];
+export default {
+    id: 'ToggleButtonCard',
+    imports: ["import { ToggleButtonCard } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `// This should be wrapped in a ToggleButtonCardGroup, see docs
+<ToggleButtonCard${figma.helpers.react.renderProp('label', label)} value="someValue">
+  ${contentItems.flat()}
+</ToggleButtonCard>`,
+    metadata: {
+        nestable: true,
+        props: { label, contentItems },
+    },
+};

package/build/components/ToggleButtonCard/ToggleButtonCardRoot.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { Pressable, View } from 'react-native';
+import { useMemo, useRef } from 'react';
+import { Platform, Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import ToggleButton from '../ToggleButton/ToggleButton';
 import { ToggleButtonCardContext } from './ToggleButtonCard.context';
 const ToggleButtonCardRoot = ({ children, style, label, states, onPress, ...props }) => {
     const { checked, active } = states ?? {};
+    const containerRef = useRef(null);
     const value = useMemo(() => ({
         checked,
         active,
@@ -14,10 +15,22 @@ const ToggleButtonCardRoot = ({ children, style, label, states, onPress, ...prop
         selected: checked,
     });
     const handlePress = (e) => {
+        // gluestack's Radio selection state on web is driven by the hidden native
+        // <input type="radio"> receiving a real click (label-forwarding). The
+        // ToggleButton nested inside is itself an interactive element, so browsers
+        // don't forward the click to that hidden input. Click it directly instead.
+        if (Platform.OS === 'web') {
+            const node = containerRef.current;
+            const input = node?.querySelector?.('input[type="radio"]');
+            if (input && !input.checked) {
+                input.click();
+                return;
+            }
+        }
         onPress?.(e);
         props.onChange?.(!checked);
     };
-    return (_jsx(ToggleButtonCardContext.Provider, { value: value, children: _jsxs(Pressable, { ...props, onPress: onPress, style: [styles.container, style], children: [children, _jsx(View, { style: styles.buttonContainer, children: _jsx(ToggleButton, { text: label, toggled: checked, onPress: handlePress, style: styles.button }) })] }) }));
+    return (_jsx(ToggleButtonCardContext.Provider, { value: value, children: _jsxs(Pressable, { ...props, ref: containerRef, onPress: onPress, style: [styles.container, style], children: [children, _jsx(View, { style: styles.buttonContainer, children: _jsx(ToggleButton, { text: label, toggled: checked, onPress: handlePress, style: styles.button }) })] }) }));
 };
 ToggleButtonCardRoot.displayName = 'ToggleButtonCardRoot';
 const styles = StyleSheet.create(theme => ({

package/build/components/UnstyledIconButton/UnstyledIconButton.figma.d.ts

@@ -0,0 +1,21 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            size: string | undefined;
+            state: string | undefined;
+            disabled: boolean;
+            loading: boolean;
+            inverted: boolean;
+            icon: {
+                $value: string;
+                $type: "react-component";
+            } | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/UnstyledIconButton/UnstyledIconButton.figma.js

@@ -0,0 +1,32 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2926%3A2430
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/UnstyledIconButton/UnstyledIconButton.tsx
+// component=UnstyledIconButton
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const size = instance.getEnum('Size', { 'SM-20': 'sm', 'MD-24': 'md' });
+const state = instance.getEnum('State', {
+    Default: 'default',
+    Hover: 'hover',
+    Active: 'active',
+    Focus: 'focus',
+    Disabled: 'disabled',
+    Loading: 'loading',
+});
+const disabled = state === 'disabled';
+const loading = state === 'loading';
+const inverted = instance.getBoolean('Inverted?');
+const iconName = (size === 'sm'
+    ? instance.getInstanceSwap('Icon-20')?.executeTemplate().metadata?.props?.componentName
+    : instance.getInstanceSwap('Icon-24')?.executeTemplate().metadata?.props?.componentName);
+const icon = iconName ? figma.helpers.react.reactComponent(iconName) : undefined;
+export default {
+    id: 'unstyled-icon-button',
+    imports: [
+        'import { UnstyledIconButton } from "@utilitywarehouse/hearth-react-native";',
+        ...(iconName
+            ? [`import { ${iconName} } from '@utilitywarehouse/hearth-react-native-icons';`]
+            : []),
+    ],
+    example: figma.code `<UnstyledIconButton${figma.helpers.react.renderProp('size', size)}${figma.helpers.react.renderProp('disabled', disabled)}${figma.helpers.react.renderProp('loading', loading)}${figma.helpers.react.renderProp('inverted', inverted)}${figma.helpers.react.renderProp('icon', icon)} />`,
+    metadata: { nestable: true, props: { size, state, disabled, loading, inverted, icon } },
+};

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

@@ -0,0 +1,19 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            validationStatus: string | undefined;
+            valueType: string | undefined;
+            label: string;
+            labelVariant: string | undefined;
+            value: string;
+            helperText: string;
+            invalidText: string;
+        };
+    };
+};
+export default _default;

package/build/components/VerificationInput/VerificationInput.figma.js

@@ -0,0 +1,22 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=4049-3615
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/VerificationInput/VerificationInput.tsx
+// component=VerificationInput
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const validationStatus = instance.getEnum('State', { Default: 'initial', Invalid: 'invalid' });
+const valueType = instance.getEnum('Value type', { Empty: '', Filled: 'filled' });
+const label = instance.getString('Label');
+const labelVariant = instance.getEnum('Label variant', { Body: 'body', Heading: 'heading' });
+const value = valueType === 'filled' ? instance.getString('Value 1') : '';
+const showHelperText = instance.getBoolean('Helper text?');
+const helperText = showHelperText ? instance.getString('Helper text') : '';
+const invalidText = validationStatus === 'invalid' ? instance.getString('Validation') : '';
+export default {
+    id: 'verification-input',
+    imports: ['import { VerificationInput } from "@utilitywarehouse/hearth-react-native";'],
+    example: figma.code `<VerificationInput${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('labelVariant', labelVariant)}${figma.helpers.react.renderProp('validationStatus', validationStatus)}${figma.helpers.react.renderProp('value', value)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('invalidText', invalidText)} />`,
+    metadata: {
+        nestable: true,
+        props: { validationStatus, valueType, label, labelVariant, value, helperText, invalidText },
+    },
+};

package/build/components/index.d.ts

@@ -65,6 +65,7 @@ export * from './TimePicker';
 export * from './TimePickerInput';
 export * from './Toast';
 export * from './ToggleButtonCard';
+export * from './UnstyledIconButton';
 export * from './VerificationInput';
 export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';
 export { Pressable } from 'react-native';

package/build/components/index.js

@@ -66,6 +66,7 @@ export * from './TimePicker';
 export * from './TimePickerInput';
 export * from './Toast';
 export * from './ToggleButtonCard';
+export * from './UnstyledIconButton';
 export * from './VerificationInput';
 export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';
 export { Pressable } from 'react-native';

package/build/types/utilityProps.d.ts

@@ -282,7 +282,7 @@ export interface IconColorProps {
  * Common text styling props shared across text components (BodyText, Heading, DetailText).
  * Includes margin utility props, simplified semantic text color, and standard text style props.
  */
-export interface CommonTextProps extends RNTextProps, MarginProps {
+export interface CommonTextProps extends RNTextProps, MarginProps, Pick<FlexLayoutProps, 'flexShrink'> {
     /** Whether to truncate text with an ellipsis. */
     truncated?: boolean;
     /** Whether to show strikethrough text. */