@utilitywarehouse/hearth-react-native 0.35.7 → 0.35.9

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/ToggleButton/ToggleButtonRoot.js

@@ -32,7 +32,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/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 => ({
@@ -43,11 +56,6 @@ const styles = StyleSheet.create(theme => ({
                 },
             },
         },
-        _web: {
-        // '_focus-visible': {
-        //   ...theme.helpers.focusVisible,
-        // },
-        },
     },
     buttonContainer: {
         flexDirection: 'row',

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/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.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/core/themes.d.ts

@@ -36,10 +36,10 @@ export declare const lightTheme: {
             pig: string;
         };
         readonly focusVisible: {
-            outlineStyle: string;
-            outlineWidth: number;
-            outlineColor: "#101010";
-            outlineOffset: number;
+            readonly outlineStyle: "solid";
+            readonly outlineWidth: 2;
+            readonly outlineColor: "#101010";
+            readonly outlineOffset: 1;
         };
     };
     readonly platform: "ios" | "android" | "windows" | "macos" | "web";
@@ -1337,10 +1337,10 @@ export declare const darkTheme: {
             pig: string;
         };
         readonly focusVisible: {
-            outlineStyle: string;
-            outlineWidth: number;
-            outlineColor: "#ebebeb";
-            outlineOffset: number;
+            readonly outlineStyle: "solid";
+            readonly outlineWidth: 2;
+            readonly outlineColor: "#ebebeb";
+            readonly outlineOffset: 1;
         };
     };
     readonly platform: "ios" | "android" | "windows" | "macos" | "web";
@@ -2650,10 +2650,10 @@ export declare const themes: {
                 pig: string;
             };
             readonly focusVisible: {
-                outlineStyle: string;
-                outlineWidth: number;
-                outlineColor: "#101010";
-                outlineOffset: number;
+                readonly outlineStyle: "solid";
+                readonly outlineWidth: 2;
+                readonly outlineColor: "#101010";
+                readonly outlineOffset: 1;
             };
         };
         readonly platform: "ios" | "android" | "windows" | "macos" | "web";
@@ -3951,10 +3951,10 @@ export declare const themes: {
                 pig: string;
             };
             readonly focusVisible: {
-                outlineStyle: string;
-                outlineWidth: number;
-                outlineColor: "#ebebeb";
-                outlineOffset: number;
+                readonly outlineStyle: "solid";
+                readonly outlineWidth: 2;
+                readonly outlineColor: "#ebebeb";
+                readonly outlineOffset: 1;
             };
         };
         readonly platform: "ios" | "android" | "windows" | "macos" | "web";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.35.7",
+  "version": "0.35.9",
   "description": "Utility Warehouse React Native UI library",
   "license": "Apache-2.0",
   "repository": {
@@ -46,6 +46,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@figma/code-connect": "^1.4.9",
     "@gorhom/bottom-sheet": "5.2.6",
     "@storybook/addon-a11y": "^10.2.1",
     "@storybook/addon-docs": "^10.2.1",
@@ -78,12 +79,12 @@
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^4.1.7",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.9.0",
-    "@utilitywarehouse/hearth-react-icons": "^0.9.0",
     "@utilitywarehouse/hearth-fonts": "^0.1.1",
+    "@utilitywarehouse/hearth-react-icons": "^0.9.0",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.9.0",
     "@utilitywarehouse/hearth-storybook-utils": "0.0.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.6.5",
-    "@utilitywarehouse/hearth-tokens": "^0.4.4"
+    "@utilitywarehouse/hearth-tokens": "^0.4.5"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5.0.0",

package/public/llms/components/list.md

@@ -329,15 +329,9 @@ You can use the `SectionHeader` component to add a heading and supporting text t
 
 ```tsx
 // Example usage
-import {
-  List,
-  ListItem,
-  ListItemIcon,
-  ListItemTrailingIcon,
-} from '@utilitywarehouse/hearth-react-native';
+import { List, ListItem, ListItemIcon } from '@utilitywarehouse/hearth-react-native';
 import {
   BillMediumIcon,
-  ChevronRightSmallIcon,
   PaymentMediumIcon,
   HomeMediumIcon,
   UserMediumIcon,
@@ -353,34 +347,35 @@ const MyComponent = ({ navigate }) => (
       heading="Bills"
       helperText="View your bills"
       leadingContent={<ListItemIcon as={BillMediumIcon} />}
-      trailingContent={<ListItemTrailingIcon as={ChevronRightSmallIcon} />}
       onPress={() => console.log('pressed')}
     />
     <ListItem
       heading="Payments"
       helperText="Make a payment"
       leadingContent={<ListItemIcon as={PaymentMediumIcon} />}
-      trailingContent={<ListItemTrailingIcon as={ChevronRightSmallIcon} />}
       onPress={() => console.log('pressed')}
     />
     <ListItem
       heading="Moving home"
       helperText="Tell us if you're moving"
       leadingContent={<ListItemIcon as={HomeMediumIcon} />}
-      trailingContent={<ListItemTrailingIcon as={ChevronRightSmallIcon} />}
       onPress={() => console.log('pressed')}
     />
     <ListItem
       heading="Refer a friend"
       helperText="Get rewarded with a friend"
       leadingContent={<ListItemIcon as={UserMediumIcon} />}
-      trailingContent={<ListItemTrailingIcon as={ChevronRightSmallIcon} />}
       onPress={() => console.log('pressed')}
     />
   </List>
 );
 ```
 
+`ListItem` renders its own trailing chevron automatically when `onPress` is
+set and `trailingContent` is omitted — no need to pass
+`trailingContent={<ListItemTrailingIcon as={ChevronRightSmallIcon} />}`
+yourself unless you want a different trailing element.
+
 ### `List` with `ListAction`
 
 You can use the `ListAction` component to add actionable items to your list.

package/public/llms/docs/{ai-tooling.md → ai-toolkit.md}

@@ -1,6 +1,8 @@
-# AI Tooling
+# AI Toolkit
 
 - [Plugin](#plugin)
+  - [Claude CLI](#claude-cli)
+  - [Claude Desktop](#claude-desktop)
 - [llms.txt and markdown docs](#llms-txt-and-markdown-docs)
 - [Agent Skill](#agent-skill)
 - [Hearth React Native MCP Server](#hearth-react-native-mcp-server)
@@ -13,9 +15,9 @@ context it needs to build with Hearth correctly.
 If you're building UI from a design in Figma, start with Figma's MCP Server.
 This should be the first step, since it gives your agent direct access to the
 design you're implementing. You can read more information about setting this up
-in the root AI Toolkit documentation.
+in the [root AI Toolkit documentation](https://hearth.prod.uw.systems/?path=/docs/ai-toolkit--docs).
 
-Hearth's own AI tooling then supplements it for most use cases, filling in the
+Hearth's own AI toolkit then supplements it for most use cases, filling in the
 parts of the Hearth React Native API and usage guidance that the design alone
 doesn't capture:
 
@@ -26,10 +28,30 @@ doesn't capture:
 ## Plugin
 
 The Hearth AI Toolkit plugin is the recommended way to set up your agent with
-the Hearth React Native AI Tools. It will automatically add the skill and MCP
-server to your agent configuration, and ensure that your agent has access to
-the latest Hearth React Native documentation and usage guidance. How to install
-and use the plugin is documented in the root AI Toolkit documentation.
+the Hearth React Native AI Tools. It will automatically add the `hearth-react-native`
+skill and MCP server to your agent configuration, and ensure that your agent has
+access to the latest Hearth React Native documentation and usage guidance.
+
+### Claude CLI
+
+```console
+/plugin marketplace add utilitywarehouse/hearth
+/plugin install hearth-ai-toolkit@hearth-plugins
+```
+
+### Claude Desktop
+
+In the desktop app, click on **Customize** in the sidebar, then navigate to
+**Plugins**. In the **Add** menu, choose **Add Marketplace**, then select the
+**utilitywarehouse/hearth** repository, and click **Sync**.
+
+This will add the `hearth-plugins` marketplace to Claude, and if you then click
+the **+** symbol in the corner of the Hearth Design Systems card, you will have
+the plugin installed and ready to use.
+
+See the [root AI Toolkit documentation](https://hearth.prod.uw.systems/?path=/docs/ai-toolkit--docs)
+for the full plugin scope (it also covers `hearth-react`), and for how to
+combine it with the Figma MCP Server.
 
 ## llms.txt and markdown docs
 

package/public/llms/docs/introduction.md

@@ -1,7 +1,7 @@
 # Hearth React Native
 
 React Native component library for building UIs at Utility Warehouse.<br/>
-Current version: v0.35.7
+Current version: v0.35.9
 
 Hearth React Native is a comprehensive design system library for React Native, providing reusable components, consistent styling, and tools to streamline UI development. It is built to enhance productivity and maintain design consistency across projects.
 

package/public/llms.txt

@@ -7,7 +7,7 @@
 - [Adding Shadows](llms/docs/adding-shadows.md)
   - Using Predefined Shadows
   - Components with Shadow Props
-- [AI Tooling](llms/docs/ai-tooling.md)
+- [AI Toolkit](llms/docs/ai-toolkit.md)
   - Plugin
   - llms.txt and markdown docs
   - Agent Skill