@utilitywarehouse/hearth-react-native 0.35.0 → 0.35.2

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: hearth-react-native
-description: Use when building any UI component or screen with the Hearth React Native library. Use this implicitly whenever building any UI component or screen in a React Native app that has Hearth React Native installed — Hearth React Native is the default. Do not wait for an explicit mention of "Hearth React Native" — if it's UI work in an app with Hearth React Native, use this skill. Triggers when creating components, implementing Figma designs, adding UI features, or writing any React Native code in the app.
+description: MANDATORY prerequisite — you MUST load this skill BEFORE writing or editing any file that imports from `@utilitywarehouse/hearth-react-native` or `@utilitywarehouse/hearth-react-native-icons`, BEFORE adapting Figma `get_design_context` reference output into a React Native screen in a Hearth app, and BEFORE delegating research about a Hearth component's props or usage to a subagent. NEVER substitute node_modules type definitions or a grep of existing usage for this skill's own component docs — that is how this skill gets silently bypassed. This skill IS the "target project's conventions" that figma-design-to-code hands off to; loading that skill does NOT satisfy this requirement. Do not wait for an explicit mention of "Hearth React Native" — any React Native UI work in an app with the library installed requires this skill first.
 ---
 
 # Building with Hearth React Native
@@ -9,6 +9,31 @@ You are acting as a React Native engineer. Your job is to turn requirements —
 either Figma designs or written requirements — into UI React Native code using
 Hearth — Utility Warehouse's Design Systems libraries.
 
+## MANDATORY — when you must load this skill
+
+Load this skill — do not skip it — at each of these moments:
+
+- **Before writing or editing any file that imports from
+  `@utilitywarehouse/hearth-react-native` or
+  `@utilitywarehouse/hearth-react-native-icons`.** If the file touches either
+  package, this skill MUST be loaded first, no exceptions.
+- **Before adapting Figma `get_design_context` reference output into this
+  codebase.** `figma-design-to-code` hands off with "adapt the reference code
+  to the target project's conventions" without saying what those conventions
+  are. This skill IS that answer. Loading `figma-design-to-code` does NOT
+  satisfy this requirement — load both, this one before you touch the
+  reference code.
+- **Before delegating research about a Hearth component's props, variants, or
+  usage to a subagent.** Reading `node_modules` type definitions or grepping
+  existing usage in the app is NOT a substitute for this skill's own component
+  docs (see "Before you implement" below). Spawning a research subagent to
+  answer a question this skill already answers is how this skill gets
+  silently bypassed — load this skill, or pass its instructions into the
+  subagent's prompt, before delegating.
+
+Treat each moment above as a hard gate, not a vague "this is UI work" prompt
+to get around to eventually.
+
 ## Package imports
 
 | Purpose    | Package                                       |
@@ -106,6 +131,8 @@ pairing with someone, ask for it here too.
 
 ## Use layout components
 
+(Source of truth: [`public/llms/docs/layout-components.md`](public/llms/docs/layout-components.md))
+
 Use layout components to structure and space content. Do not add margin to
 individual UI elements to achieve spacing — keep spacing decisions at the layout
 level so UI components stay composable.
@@ -172,6 +199,8 @@ alongside their own layout-specific props (`direction`, `align`, `justify`,
 
 ## Styling: Unistyles, not `StyleSheet` from `react-native`
 
+(Source of truth: [`public/llms/docs/styling.md`](public/llms/docs/styling.md))
+
 Custom styles use `react-native-unistyles`'s `StyleSheet.create(theme => ({...}))`,
 re-exported from the package. Only reach for this when utility props and
 existing component variants don't cover the need.
@@ -235,6 +264,8 @@ const styles = StyleSheet.create(theme => ({
 
 ## Responsive breakpoints
 
+(Source of truth: [`public/llms/docs/styling.md`](public/llms/docs/styling.md#responsive-design-with-breakpoints))
+
 Breakpoints are configured once (via Unistyles' `StyleSheet.configure`) and
 cascade **mobile-first**: a value applies from that breakpoint upward until
 overridden by a larger one. See the
@@ -264,6 +295,8 @@ const styles = StyleSheet.create(theme => ({
 
 ## Required app-level providers
 
+(Source of truth: [`public/llms/docs/getting-started.md`](public/llms/docs/getting-started.md))
+
 Hearth React Native components rely on these wrapping the app root:
 
 - `GestureHandlerRootView` (from `react-native-gesture-handler`) — required for
@@ -299,11 +332,13 @@ applies before reaching for `react-native-safe-area-context` directly:
   `SafeAreaView` applies the `top` edge. Set `useSafeAreaInsets={false}` on
   `BottomSheetModalProvider` only if the parent screen already handles
   safe-area insets itself — don't look for the prop on the individual
-  components.
+  components. (Source of truth:
+  [`public/llms/components/modal.md`](public/llms/components/modal.md))
 - **`NavModal`** (used when a screen is already presented by React Navigation)
   reads safe-area insets directly from the Unistyles runtime
   (`rt.insets.top`/`rt.insets.bottom` inside `StyleSheet.create((theme, rt) =>
-  ...)`) rather than rendering a `SafeAreaView`.
+  ...)`) rather than rendering a `SafeAreaView`. (Source of truth:
+  [`public/llms/components/nav-modal.md`](public/llms/components/nav-modal.md))
 
 Don't wrap Hearth components in your own `SafeAreaView` on top of these —
 check `BottomSheetModalProvider`'s `useSafeAreaInsets` prop (or `NavModal`'s
@@ -344,6 +379,8 @@ Compound components share state via a `<Component>Context` (check for a
 
 ### Themed images that adapt to light/dark mode
 
+(Source of truth: [`public/llms/docs/dark-mode-best-practice.md`](public/llms/docs/dark-mode-best-practice.md))
+
 ```tsx
 <ThemedImage light={require('./logo-light.png')} dark={require('./logo-dark.png')} />
 ```

package/build/components/FormField/FormField.d.ts

@@ -1,24 +1,24 @@
 import { View } from 'react-native';
 import FormFieldProps from './FormField.props';
-export declare const FormFieldComponent: import("@gluestack-ui/form-control/lib/types").IFormControlComponentType<import("react-native").ViewProps, Omit<import("../Helper/Helper.props").default, "validationStatus">, Omit<import("../Helper/Helper.props").default, "validationStatus">, Omit<import("..").IconProps, "as">, unknown, Omit<import("../Label/Label.props").default, "disabled">, unknown, Omit<import("../Helper/Helper.props").default, "validationStatus">, import("../BodyText").BodyTextProps>;
+export declare const FormFieldComponent: import("@gluestack-ui/form-control/lib/types").IFormControlComponentType<import("react-native").ViewProps, Omit<import("../Helper/Helper.props").default, "validationStatus">, Omit<import("../Helper/Helper.props").default, "validationStatus">, Omit<import("..").IconProps, "as">, unknown, Omit<import("../Label/Label.props").default, "disabled">, unknown, Omit<import("../Helper/Helper.props").default, "validationStatus">, import("..").BodyTextProps>;
 export declare const FormFieldLabel: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>> & {
     Text: import("react").ForwardRefExoticComponent<Omit<Omit<import("../Label/Label.props").default, "disabled">, "ref"> & import("react").RefAttributes<Omit<import("../Label/Label.props").default, "disabled">>>;
 };
 export declare const FormFieldLabelText: import("react").ForwardRefExoticComponent<Omit<Omit<import("../Label/Label.props").default, "disabled">, "ref"> & import("react").RefAttributes<Omit<import("../Label/Label.props").default, "disabled">>>;
 export declare const FormFieldHelper: import("react").ForwardRefExoticComponent<Omit<import("../Helper/Helper.props").default, "validationStatus"> & import("react").RefAttributes<Omit<import("../Helper/Helper.props").default, "validationStatus">>> & {
-    Text: import("react").ForwardRefExoticComponent<Omit<import("../BodyText").BodyTextProps, "ref"> & import("react").RefAttributes<import("../BodyText").BodyTextProps>>;
+    Text: import("react").ForwardRefExoticComponent<Omit<import("..").BodyTextProps, "ref"> & import("react").RefAttributes<import("..").BodyTextProps>>;
 };
-export declare const FormFieldHelperText: import("react").ForwardRefExoticComponent<Omit<import("../BodyText").BodyTextProps, "ref"> & import("react").RefAttributes<import("../BodyText").BodyTextProps>>;
+export declare const FormFieldHelperText: import("react").ForwardRefExoticComponent<Omit<import("..").BodyTextProps, "ref"> & import("react").RefAttributes<import("..").BodyTextProps>>;
 export declare const FormFieldHelperIcon: {
     (props: import("..").IconProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const FormFieldValidText: {
-    (props: import("../BodyText").BodyTextProps): import("react/jsx-runtime").JSX.Element;
+    (props: import("..").BodyTextProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const FormFieldInvalidText: {
-    (props: import("../BodyText").BodyTextProps): import("react/jsx-runtime").JSX.Element;
+    (props: import("..").BodyTextProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const FormFieldTextContent: typeof View;

package/build/components/Modal/Modal.d.ts

@@ -3,5 +3,5 @@ import ModalProps from './Modal.props';
 type Modal<T = any> = BottomSheetModalMethods<T> & {
     triggerCloseAnimation?: () => void;
 };
-declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, loadingDescription, fullscreen, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, loadingDescription, fullscreen, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter, testID, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/build/components/Modal/Modal.js

@@ -12,7 +12,7 @@ import { Button } from '../Button';
 import { Heading } from '../Heading';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
-const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', loadingDescription, fullscreen = false, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter = true, ...props }) => {
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', loadingDescription, fullscreen = false, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter = true, testID, ...props }) => {
     const theme = useTheme();
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
@@ -90,7 +90,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         secondaryButtonProps,
         secondaryButtonText,
     ]);
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? (loadingHeading ?? 'Loading') : undefined, accessibilityHint: Platform.OS === 'android' && loadingDescription ? loadingDescription : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading }), loadingDescription ? _jsx(BodyText, { textAlign: "center", children: loadingDescription }) : null] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, hasDescription && !image ? (descriptionIsText ? (_jsx(BodyText, { accessible: true, children: description })) : (description)) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, hasDescription ? (descriptionIsText ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : (description)) : null] })] })) : null, children, !stickyFooter && shouldShowFooter ? (_jsx(View, { style: footerStyle, children: footerContent })) : null] })) }));
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, testID: testID, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? (loadingHeading ?? 'Loading') : undefined, accessibilityHint: Platform.OS === 'android' && loadingDescription ? loadingDescription : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading }), loadingDescription ? _jsx(BodyText, { textAlign: "center", children: loadingDescription }) : null] })) : (_jsxs(View, { style: styles.container, testID: testID, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, hasDescription && !image ? (descriptionIsText ? (_jsx(BodyText, { accessible: true, children: description })) : (description)) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, hasDescription ? (descriptionIsText ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : (description)) : null] })] })) : null, children, !stickyFooter && shouldShowFooter ? (_jsx(View, { style: footerStyle, children: footerContent })) : null] })) }));
     const renderFooter = useCallback((bottomSheetFooterProps) => (_jsx(BottomSheetFooter, { ...bottomSheetFooterProps, children: _jsx(View, { onLayout: handleStickyFooterLayout, style: [styles.footerWrap, footerStyle], children: footerContent }) })), [footerContent, footerStyle, handleStickyFooterLayout]);
     return (_jsxs(_Fragment, { children: [stickyFooter && shouldShowFooter && stickyFooterHeight === 0 ? (_jsx(View, { accessible: false, importantForAccessibility: "no-hide-descendants", pointerEvents: "none", style: styles.footerMeasurementContainer, children: _jsx(View, { onLayout: handleStickyFooterLayout, style: [styles.footerWrap, footerStyle], children: footerContent }) })) : null, _jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, style: styles.modal, footerComponent: stickyFooter && shouldShowFooter ? renderFooter : undefined, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: [
                             styles.scrollView,

package/build/components/Modal/Modal.shared.types.d.ts

@@ -3,6 +3,7 @@ import { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { ButtonWithoutChildrenProps } from '../Button/Button.props';
 import { UnstyledIconButtonProps } from '../UnstyledIconButton';
 export interface ModalCommonBaseProps {
+    testID?: string;
     loading?: boolean;
     image?: ReactNode;
     showCloseButton?: boolean;

package/build/components/Modal/Modal.web.d.ts

@@ -3,5 +3,5 @@ import ModalProps from './Modal.props';
 type Modal<T = any> = BottomSheetModalMethods<T> & {
     triggerCloseAnimation?: () => void;
 };
-declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, fullscreen, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, fullscreen, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, testID, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/build/components/Modal/Modal.web.js

@@ -9,7 +9,7 @@ import { Button } from '../Button';
 import { Heading } from '../Heading';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
-const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', fullscreen = false, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, ...props }) => {
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', fullscreen = false, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, testID, ...props }) => {
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
     const scrollViewRef = useRef(null);
@@ -62,7 +62,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     const descriptionIsText = typeof description === 'string' || typeof description === 'number';
     const hasDescription = description !== undefined && description !== null;
     const footerContent = footer ?? (_jsxs(View, { style: styles.footer, children: [hasPrimaryButton ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, hasSecondaryButton ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] }));
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, hasDescription && !image ? (descriptionIsText ? (_jsx(BodyText, { accessible: true, children: description })) : (description)) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, hasDescription ? (descriptionIsText ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : (description)) : null] })] })) : null, children, hasFooter ? _jsx(View, { style: footerStyle, children: footerContent }) : null] })) }));
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, testID: testID, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, testID: testID, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, hasDescription && !image ? (descriptionIsText ? (_jsx(BodyText, { accessible: true, children: description })) : (description)) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, hasDescription ? (descriptionIsText ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : (description)) : null] })] })) : null, children, hasFooter ? _jsx(View, { style: footerStyle, children: footerContent }) : null] })) }));
     return (_jsx(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, ...props, onChange: handleChange, children: _jsx(BottomSheetScrollView, { contentContainerStyle: styles.container, ref: scrollViewRef, children: content }) }));
 };
 const styles = StyleSheet.create(theme => ({

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.35.0",
+  "version": "0.35.2",
   "description": "Utility Warehouse React Native UI library",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/utilitywarehouse/hearth.git"
+    "url": "git+https://github.com/utilitywarehouse/hearth.git",
+    "directory": "packages/react-native"
   },
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -77,10 +78,10 @@
     "vitest": "^4.1.7",
     "@utilitywarehouse/hearth-storybook-utils": "0.0.0",
     "@utilitywarehouse/hearth-fonts": "^0.1.1",
-    "@utilitywarehouse/hearth-react-icons": "^0.8.6",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.8.5",
+    "@utilitywarehouse/hearth-react-icons": "^0.9.0",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.9.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.6.5",
-    "@utilitywarehouse/hearth-tokens": "^0.4.2"
+    "@utilitywarehouse/hearth-tokens": "^0.4.3"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5.0.0",
@@ -104,6 +105,7 @@
     "lint": "TIMING=1 eslint .",
     "build": "tsc",
     "watch": "tsc --watch",
+    "typecheck": "tsc --noEmit",
     "figma:create": "figma connect create",
     "figma:publish": "figma connect publish",
     "test": "vitest run --config vitest.unit.config.ts",

package/public/llms/components/modal.md

@@ -106,6 +106,7 @@ The Modal component extends the `BottomSheetModal` component and accepts all of
 | `footerStyle`                 | `StyleProp<ViewStyle>`                                             | Styles applied to the footer container, useful for sticky footer shadows or custom spacing                             | -              |
 | `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`                        | Additional props to pass to the close button                                                                           | -              |
 | `fullscreen`                  | `boolean`                                                          | Whether the modal should take up the full screen height                                                                | `false`        |
+| `testID`                      | `string`                                                           | Applied to the modal content container, useful for locating the modal in e2e tests                                     | -              |
 
 When `footer` is provided, the primary and secondary button props are not available. Build your footer actions directly inside the custom footer content instead.
 

package/public/llms/docs/ai-tooling.md

@@ -0,0 +1,113 @@
+# AI Tooling
+
+- [Plugin](#plugin)
+- [llms.txt and markdown docs](#llms-txt-and-markdown-docs)
+- [Agent Skill](#agent-skill)
+- [Hearth React Native MCP Server](#hearth-react-native-mcp-server)
+
+The Hearth React Native AI Tools are intended to help your AI agents use Hearth
+React Native components to build Utility Warehouse UIs. They provide access to
+APIs, component documentation and usage guidelines, so your agent has the
+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.
+
+Hearth's own AI tooling 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:
+
+- [llms.txt](https://hearth.prod.uw.systems/react-native/llms.txt) and markdown docs
+- [SKILL.md](https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/SKILL.md)
+- [Hearth MCP Server](https://main--68e3ad5c6e80b57678cad6c6.chromatic.com/mcp)
+
+## 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.
+
+## llms.txt and markdown docs
+
+The [llms.txt](https://hearth.prod.uw.systems/react-native/llms.txt) file is a list of
+all Hearth React Native documentation, and each documentation page has a corresponding
+markdown, file for use by AI agents.
+
+This documentation is also included in the Hearth React Native package, so your agent
+can access it locally if you have the package installed. The easiest way to do
+this is via the Hearth React Native Agent Skill.
+
+## Agent Skill
+
+The [Hearth React Native Agent Skill](https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/SKILL.md)
+is a skill for your AI agent to use when building any React Native UI.
+
+This skill is focused on usage of the Hearth React Native component library, and
+doesn't attempt to cover any other aspects of building a React application, or
+local custom components.
+
+The skill is packaged with the Hearth React Native package, so your agent can access
+it locally if you have the package installed. To ensure your agent has access
+to the skill, you can add an entry to your local `AGENTS.md` or `CLAUDE.md` file.
+
+You can do this by using the `init-ai` tool:
+
+```console
+npx @utilitywarehouse/hearth-react-native init-ai
+```
+
+This will add an entry to your `AGENTS.md` or `CLAUDE.md` file pointing to the
+skill file.
+
+Alternatively, you can add an entry manually to your `AGENTS.md` or `CLAUDE.md`
+file like this:
+
+```markdown
+<!-- @utilitywarehouse/hearth-react — AI skill for component library usage guidance -->
+
+@node_modules/@utilitywarehouse/hearth-react-native/SKILL.md
+```
+
+or if you are using a monorepo with the Hearth React Native package in a subdirectory,
+you can add an entry like this:
+
+```markdown
+<!-- @utilitywarehouse/hearth-react-native — AI skill for component library usage guidance -->
+
+@../../node_modules/@utilitywarehouse/hearth-react-native/SKILL.md
+```
+
+We recommend having `v0.34.5` or later of the Hearth React Native package installed,
+as this version includes the latest updates to the skill.
+
+## Hearth React Native MCP Server
+
+The remote [Hearth React Native MCP Server](https://main--68e3ad5c6e80b57678cad6c6.chromatic.com/mcp),
+built on the [Storybook MCP Server](https://storybook.js.org/docs/ai/mcp/overview#docs),
+provides tools for agents to use Hearth React Native documentation and components.
+
+It is referenced in the Hearth React Native Agent Skill, so your agent can access it
+remotely if you have the skill installed, and the MCP server configured in your
+agent.
+
+To configure your agent to use the MCP server, you can add an entry to your
+configuration file like this:
+
+```json
+{
+  "servers": {
+    "hearth-react-native": {
+      "url": "https://main--68e3ad5c6e80b57678cad6c6.chromatic.com/mcp",
+      "type": "http"
+    }
+  }
+}
+```
+
+This is an example for adding to the VS Code `mcp.json` file, but the
+configuration format may vary depending on your agent. We are in the process of
+adding support for the MCP Server to the organisation's Claude configuration.

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.0
+Current version: v0.35.2
 
 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,6 +7,11 @@
 - [Adding Shadows](llms/docs/adding-shadows.md)
   - Using Predefined Shadows
   - Components with Shadow Props
+- [AI Tooling](llms/docs/ai-tooling.md)
+  - Plugin
+  - llms.txt and markdown docs
+  - Agent Skill
+  - Hearth React Native MCP Server
 - [All Components](llms/docs/all-components.md)
 - [Dark Mode Best Practice](llms/docs/dark-mode-best-practice.md)
   - Setting Up Dark Mode