@utilitywarehouse/hearth-react-native 0.35.0 → 0.35.1

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/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.35.0",
+  "version": "0.35.1",
   "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.8.7",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.8.6",
     "@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/docs/ai-tooling.md

@@ -0,0 +1,188 @@
+# AI Tooling
+
+- [Figma MCP Server](#figma-mcp-server)
+- [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 Figma design, start with Figma's own
+[Figma MCP Server](#figma-mcp-server), for most people building UI, this is
+the first step, since it gives your agent direct access to the design you're
+implementing. 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)
+
+## Figma MCP Server
+
+If you're implementing a Figma design, this should be the first tool you reach
+for. Figma's [Dev Mode MCP Server](https://developers.figma.com/docs/figma-mcp-server/)
+gives your agent direct access to the design file itself, layout, variables,
+and generated code for a selected frame or component. This is a Figma-provided
+tool, separate from the Hearth React Native MCP Server below.
+
+### If you're using Claude
+
+Utility Warehouse has the [Figma connector](https://claude.com/connectors/figma)
+enabled at an organisation level. It already includes the Figma MCP Server's
+tools, so if you have it connected there's nothing else to set up — just
+prompt Claude with a link to the Figma design you want to build, and it will
+pull in the design context itself.
+
+To check it's connected for you:
+
+1. In Claude, go to **Customize > Connectors**.
+2. Find **Figma** and click **Connect**, authenticating with your Figma account if prompted.
+3. In a conversation, open the **+** menu (or type `/`) in the chat box, then **Connectors**, and toggle **Figma** on. Once it's connected, Claude can also bring it into a conversation on its own when a Figma link is relevant, so you don't have to toggle it every time.
+
+If you're not using Claude, or don't have the connector available, set up the
+Figma MCP Server manually instead.
+
+### Manual setup
+
+Figma recommends the **remote server** for most people, as it supports the
+broadest set of features. Add an entry to your `mcp.json` file:
+
+```json
+{
+  "servers": {
+    "figma": {
+      "url": "https://mcp.figma.com/mcp",
+      "type": "http"
+    }
+  }
+}
+```
+
+See Figma's [remote server installation guide](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/)
+for the full setup flow, including the OAuth step required to grant the server
+access to your Figma account.
+
+Alternatively, a **local server** runs from the Figma desktop app itself (Dev
+Mode → enable desktop MCP server), which some organisations use instead of the
+remote option:
+
+```json
+{
+  "servers": {
+    "figma-desktop": {
+      "url": "http://127.0.0.1:3845/mcp",
+      "type": "http"
+    }
+  }
+}
+```
+
+See Figma's [local server installation guide](https://developers.figma.com/docs/figma-mcp-server/local-server-installation/)
+for prerequisites and setup.
+
+### Works with Hearth components
+
+Hearth publishes [Figma Code Connect](https://help.figma.com/hc/en-us/articles/23920389749655-Code-Connect)
+mappings for its React Native components. In practice, this means: when the
+Figma frame you're implementing uses a component we've mapped, the Figma MCP
+Server returns real Hearth code, for example `<Button variant="emphasis">`,
+rather than generic markup reconstructed from layer names and styles. You
+don't need to know how these mappings work under the hood, just that a mapped
+component gets you code that's ready to use, with little to no rework needed.
+
+### Supplement it with Hearth's AI tooling
+
+The Figma MCP Server tells your agent what design it's looking at, and, via
+Code Connect, which Hearth component to use. It doesn't know the rest of the
+Hearth React Native API: prop combinations a mapping doesn't cover,
+accessibility guidance, or usage conventions.
+
+For most use cases, that's exactly what the tools below are for. Set up the
+Figma MCP Server alongside the Hearth Agent Skill and/or Hearth MCP Server,
+rather than in place of them, so your agent can confirm the full prop API,
+correct usage, and any guidance the Figma mapping doesn't capture.
+
+## 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.1
 
 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)
+  - Figma MCP Server
+  - 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