@utilitywarehouse/hearth-react-native 0.35.7 → 0.35.9

package/SKILL.md

@@ -62,6 +62,12 @@ Whatever source you use, review what is available before writing any code.
 The library is broad — always check whether an existing component covers the
 need before implementing anything custom.
 
+When reusing an existing local pattern for a Hearth component, still check
+that component's own doc page — a local pattern may predate a more direct
+prop the library added later (e.g. `List`'s own `heading`/`helperText` props
+vs. a sibling `SectionHeader` or `Heading`). Prefer the documented, current shorthand over
+an older local convention when they diverge.
+
 ### Raw markdown files
 
 Full component API reference is available in the installed package. First,
@@ -129,6 +135,54 @@ pairing with someone, ask for it here too.
 
 # Critical Rules
 
+## Figma-to-code fidelity
+
+These apply whenever you're translating `get_design_context`/`get_metadata`
+output into code — they're easy to get right in principle and wrong in
+practice, so treat them as mechanical checks rather than judgment calls:
+
+- **Respect hidden-node flags.** Check a node's `hidden` flag before
+  implementing it — a hidden node is not part of the default/visible state,
+  so don't render it unconditionally just because its content was returned to
+  you. If you deliberately want to reuse hidden content for a different state
+  (e.g. an alternate variant), say so explicitly in a code comment and
+  confirm the condition with the user rather than silently flattening it into
+  the default view.
+- **Don't invent style variants beyond what's in the design.** When a text
+  node's colour variable isn't visible in the response, default to the
+  base/primary token rather than adding a muted/secondary colour or other
+  visual hierarchy that isn't actually specified.
+- **Verify each component instance individually.** When a design uses the
+  same component more than once with potentially different configurations
+  (variants, direction, size, etc.), check each instance against its own
+  region of the screenshot — don't assume the first instance's props apply
+  uniformly to the rest just because the component name matches. This
+  matters most for variant props (like `Flex`/`DescriptionList`'s
+  `direction`) that `get_metadata` doesn't expose at all, where the
+  screenshot is the only available ground truth.
+
+## Typography
+
+Map a text node's Figma **text style name** directly to a component + `size`
+(and `weight`, where present) — don't guess the size from screenshot
+proportions. `get_design_context` surfaces the style name verbatim in its
+"styles contained in the design" list, in the form
+`<Category>/<Style Name> <SIZE>[ <Weight>]`, e.g.:
+
+| Figma text style              | Component + props                    |
+| ------------------------------ | -------------------------------------- |
+| `Headings/Heading MD`          | `<Heading size="md">`                 |
+| `Detail/Detail Text 3XL`       | `<DetailText size="3xl">`             |
+| `Body/Body Text MD`            | `<BodyText size="md">`                |
+| `Body/Body Text MD SemiBold`   | `<BodyText size="md" weight="semibold">` |
+
+The prefix before the slash (`Headings`/`Detail`/`Body`) names the
+component (`Heading`/`DetailText`/`BodyText`); the last token is the `size`
+value (lowercased); a trailing weight modifier (`SemiBold`, `Bold`) maps to
+`BodyText`'s `weight` prop, lowercased. This is a direct, mechanical lookup —
+if a style name is present in the response, use it instead of picking a size
+by eye from the screenshot.
+
 ## Use layout components
 
 (Source of truth: [`public/llms/docs/layout-components.md`](public/llms/docs/layout-components.md))
@@ -171,9 +225,44 @@ Five layout primitives, all built on design tokens:
 </Center>
 ```
 
-Use `gap` (or the `spacing`/`space` alias) on the parent `Flex`/`Grid` to space
-children. For distribution and alignment, use `justify`/`align` on `Flex`. Don't
-put margin on individual sibling components just for spacing.
+**Default to `Container` for a screen's top-level scrollable content
+wrapper** — it auto-applies the exact responsive page margin/padding tokens
+(mobile: 16px horizontal margin, 24px top padding, 32px bottom padding —
+scaling up at larger breakpoints) that `Box`/`Flex` have no dedicated
+shortcut for, instead of a manually-guessed `p`/`px`/`py`:
+
+```tsx
+<Container>
+  <Flex direction="column" spacing="2xl">
+    {...}
+  </Flex>
+</Container>
+```
+
+More generally: before picking a layout prop/component for **any** node, scan
+the Figma variable paths bound to it. If any contain the segment `container`
+(e.g. `layout/container/padding-top`), that's a direct signal to reach for
+`Container`'s own padding/margin props (or the nearest container-aware
+ancestor) rather than a bare `Flex`/`Box` — regardless of whether the node
+happens to be the literal screen root.
+
+`Flex`/`Grid` have two distinct props for spacing children — don't treat them
+as interchangeable aliases:
+
+- **`gap`** — a raw numeric space token (`'0'..'900'`), non-responsive.
+- **`spacing`** (aliased as the deprecated `space`) — Hearth's semantic layout
+  scale (`'2xs'..'2xl'`). This is both the direct match for Figma's
+  `layout/spacing/*` variable names **and** automatically responsive per
+  breakpoint (e.g. `spacing="2xl"` resolves to 28px on mobile, 40px on
+  desktop).
+
+**If a Figma variable path bound to a node contains the segment `spacing`**
+(e.g. `layout/spacing/lg`), use the `spacing` prop with the matching value
+(`lg`, `2xl`, etc.) — never `gap`. Reserve `gap` for adjustments that don't
+correspond to any named Figma variable.
+
+For distribution and alignment, use `justify`/`align` on `Flex`. Don't put
+margin on individual sibling components just for spacing.
 
 ```tsx
 // ❌ WRONG — margin for spacing
@@ -377,6 +466,43 @@ Compound components share state via a `<Component>Context` (check for a
 
 ## Common patterns
 
+### Icon next to wrapping body text
+
+A `Text`/`BodyText` child inside a `direction="row"` `Flex` has no inherent
+width constraint in RN's layout engine — it lays out at its intrinsic
+single-line width unless told to share the remaining row space, and will
+overflow instead of wrapping. This is a general React Native flexbox gotcha,
+not Hearth-specific, and easy to miss when translating from a Figma/web
+reference where text wraps by default.
+
+```tsx
+<Flex direction="row" align="flex-start" gap="100">
+  <CheckIcon />
+  <BodyText style={{ flex: 1 }}>{longWrappingCopy}</BodyText>
+</Flex>
+```
+
+Give the text `flex: 1` (or `flexShrink: 1`, or wrap it in its own `Box`) so
+it wraps instead of overflowing, and use `align="flex-start"` on the row
+rather than `"center"` once the text can span multiple lines.
+
+### Interactive rows auto-render their own trailing chevron
+
+`ListItem` renders a trailing `ChevronRightSmallIcon` automatically whenever
+`onPress` is set and `trailingContent` is omitted — passing
+`trailingContent={<ListItemTrailingIcon as={ChevronRightSmallIcon} />}`
+yourself is redundant. `CardAction` goes further: it defaults its trailing
+icon to `ChevronRightSmallIcon` unconditionally unless `trailingContent` is
+supplied. Only pass `trailingContent` when you need a **different** trailing
+element (a `Switch`, a `Link`, a custom icon).
+
+This isn't visible from a Figma screenshot or `get_design_context` alone — a
+row with a chevron doesn't tell you whether the component renders it for you
+or expects it explicitly. Default/automatic behaviour driven by props like
+`onPress` (not just visual appearance) should be checked against the
+component's own source/docs before manually replicating something that might
+already be automatic.
+
 ### 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))

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

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

package/build/components/Accordion/Accordion.figma.js

@@ -0,0 +1,20 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3385%3A7751
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Accordion/Accordion.tsx
+// component=Accordion
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const sectionHeader = instance.findInstance('Section Header');
+const heading = sectionHeader.type !== 'ERROR' ? sectionHeader.getString('Heading') : undefined;
+const helperText = sectionHeader.type !== 'ERROR' ? sectionHeader.getString('Helper text') : undefined;
+// "Accordion items" is a slot — connectedInstances only includes children with their own
+// Code Connect definitions, i.e. AccordionItem once its .figma.ts is published.
+const itemsSlot = instance.getSlot('Accordion items');
+const items = itemsSlot?.connectedInstances.map(item => item.executeTemplate().example) ?? [];
+export default {
+    id: 'Accordion',
+    imports: ["import { Accordion } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<Accordion${figma.helpers.react.renderProp('heading', heading)}${figma.helpers.react.renderProp('helperText', helperText)}>
+      ${items.flat()}
+    </Accordion>`,
+    metadata: { nestable: true, props: { heading, helperText, items } },
+};

package/build/components/Accordion/AccordionItem.figma.d.ts

@@ -0,0 +1,17 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            title: string;
+            expanded: boolean;
+            description: string;
+            triggerContent: figma.ResultSection[] | undefined;
+            content: figma.ResultSection[][];
+        };
+    };
+};
+export default _default;

package/build/components/Accordion/AccordionItem.figma.js

@@ -0,0 +1,26 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3390%3A6160
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Accordion/Accordion.tsx
+// component=AccordionItem
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const title = instance.getString('Title');
+const expanded = instance.getBoolean('Expand?');
+const description = instance.getString('Description');
+// "Trigger custom content" and "Custom content" are slots — connectedInstances only includes
+// children with their own Code Connect definitions.
+const triggerSlot = instance.getSlot('Trigger custom content');
+const triggerContent = triggerSlot?.connectedInstances[0]?.executeTemplate().example;
+const contentSlot = instance.getSlot('Custom content');
+const content = contentSlot?.connectedInstances.map(item => item.executeTemplate().example) ?? [];
+export default {
+    id: 'AccordionItem',
+    imports: [
+        "import { BodyText } from '@utilitywarehouse/hearth-react-native';",
+        "import { AccordionItem } from '@utilitywarehouse/hearth-react-native';",
+    ],
+    example: figma.code `<AccordionItem${figma.helpers.react.renderProp('title', title)}${figma.helpers.react.renderProp('expanded', expanded)}${triggerContent ? figma.code ` triggerContent={${triggerContent}}` : ''}>
+      <BodyText>${figma.helpers.react.renderChildren(description)}</BodyText>
+      ${content.flat()}
+    </AccordionItem>`,
+    metadata: { nestable: true, props: { title, expanded, description, triggerContent, content } },
+};

package/build/components/Accordion/AccordionTrigger.js

@@ -25,7 +25,7 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
             },
-            // '_focus-visible': theme.helpers.focusVisible,
+            '_focus-visible': theme.helpers.focusVisible,
             _active: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
             },

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

@@ -0,0 +1,33 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            colorScheme: string | undefined;
+            onPressIconButton: {
+                $value: string;
+                $type: "function";
+            } | undefined;
+            text: string;
+            onClose: {
+                $value: string;
+                $type: "function";
+            } | undefined;
+            title: figma.EnumOptionsValues<{
+                true: string;
+                false: undefined;
+            }>;
+            onPressLink: {
+                $value: string;
+                $type: "function";
+            } | undefined;
+            link: {
+                text: string | undefined;
+            };
+        };
+    };
+};
+export default _default;

package/build/components/Alert/Alert.figma.js

@@ -0,0 +1,40 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3288%3A4656
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Alert/Alert.tsx
+// component=Alert
+import figma from 'figma';
+const colorScheme = figma.selectedInstance.getEnum('Color Scheme', {
+    Info: 'info',
+    Positive: 'positive',
+    Warning: 'warning',
+    Danger: 'danger',
+});
+const showIconButton = figma.selectedInstance.getBoolean('Icon button?');
+const onPressIconButton = showIconButton === true
+    ? figma.helpers.react.function("() => console.log('icon button pressed')")
+    : undefined;
+const text = figma.selectedInstance.getString('Text');
+const showClose = figma.selectedInstance.getBoolean('Close?');
+const onClose = showClose === true ? figma.helpers.react.function("() => console.log('close')") : undefined;
+const title = figma.selectedInstance.getBoolean('Title?', {
+    true: figma.selectedInstance.getString('Title'),
+    false: undefined,
+});
+const showLinkPress = figma.selectedInstance.getBoolean('Link?');
+const onPressLink = showLinkPress === true
+    ? figma.helpers.react.function("() => console.log('link pressed')")
+    : undefined;
+const link = (function () {
+    const nestedLayer0 = figma.selectedInstance.findInstance('Link');
+    return {
+        text: nestedLayer0.type !== 'ERROR' ? nestedLayer0.getString('Text') : undefined,
+    };
+})();
+export default {
+    id: 'Alert',
+    imports: ['import { Alert } from "@utilitywarehouse/hearth-react-native";'],
+    example: figma.code `<Alert${figma.helpers.react.renderProp('colorScheme', colorScheme)}${figma.helpers.react.renderProp('title', title)}${figma.helpers.react.renderProp('text', text)}${figma.helpers.react.renderProp('onClose', onClose)}${figma.helpers.react.renderProp('onPressIconButton', onPressIconButton)}${figma.helpers.react.renderProp('link', link.text)}${figma.helpers.react.renderProp('onPressLink', onPressLink)}/>`,
+    metadata: {
+        nestable: true,
+        props: { colorScheme, onPressIconButton, text, onClose, title, onPressLink, link },
+    },
+};

package/build/components/Avatar/Avatar.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: {
+            size: string | undefined;
+            name: string;
+            src: figma.ResultSection[] | undefined;
+            variant: string | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/Avatar/Avatar.figma.js

@@ -0,0 +1,29 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6790-14313
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Avatar/Avatar.tsx
+// component=Avatar
+import figma from 'figma';
+const size = figma.selectedInstance.getEnum('Size', {
+    'SM-32': 'sm',
+    'MD-48': 'md',
+});
+const name = figma.selectedInstance.getString('Initials');
+const src = figma.selectedInstance.getInstanceSwap('Image')?.executeTemplate().example;
+const variant = figma.selectedInstance.getEnum('Variant', {
+    Image: 'image',
+    Initials: 'initials',
+    Icon: 'icon',
+});
+export default {
+    id: 'Avatar',
+    imports: ["import { Avatar } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<Avatar${figma.helpers.react.renderProp('size', size)}${figma.helpers.react.renderProp('name', name)}${figma.helpers.react.renderProp('src', src)}/>`,
+    metadata: {
+        nestable: true,
+        props: {
+            size,
+            name,
+            src,
+            variant,
+        },
+    },
+};

package/build/components/Badge/Badge.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: {
+            variant: string | undefined;
+            colorScheme: string | undefined;
+            size: string | undefined;
+            flatBase: boolean;
+            icon: {
+                $value: string;
+                $type: "react-component";
+            } | undefined;
+            text: string;
+        };
+    };
+};
+export default _default;

package/build/components/Badge/Badge.figma.js

@@ -0,0 +1,47 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=61%3A652
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Badge/Badge.tsx
+// component=Badge
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const variant = instance.getEnum('Variant', {
+    'Subtle - Default': 'subtle',
+    Emphasis: 'emphasis',
+    Outline: 'outline',
+});
+const colorScheme = instance.getEnum('Color Scheme', {
+    Info: 'info',
+    Positive: 'positive',
+    Danger: 'danger',
+    Warning: 'warning',
+    Functional: 'functional',
+    Energy: 'energy',
+    Broadband: 'broadband',
+    Mobile: 'mobile',
+    Insurance: 'insurance',
+    Cashback: 'cashback',
+    Pig: 'pig',
+    Highlight: 'highlight',
+});
+const size = instance.getEnum('Size', {
+    'SM-24': 'sm',
+    'MD-28': 'md',
+});
+const flatBase = instance.getBoolean('Flat Base?');
+const iconName = instance.getBoolean('Icon?', {
+    true: instance.getInstanceSwap('Icon-20')?.executeTemplate().metadata?.props?.componentName,
+});
+const icon = iconName ? figma.helpers.react.reactComponent(iconName) : undefined;
+const text = instance.getString('Text');
+export default {
+    id: 'Badge',
+    imports: [
+        "import { Badge } from '@utilitywarehouse/hearth-react-native';",
+        ...(iconName
+            ? [`import { ${iconName} } from '@utilitywarehouse/hearth-react-native-icons';`]
+            : []),
+    ],
+    example: figma.code `<Badge${figma.helpers.react.renderProp('variant', variant)}${figma.helpers.react.renderProp('colorScheme', colorScheme)}${figma.helpers.react.renderProp('size', size)}${figma.helpers.react.renderProp('flatBase', flatBase)}${figma.helpers.react.renderProp('icon', icon)}>
+      ${figma.helpers.react.renderChildren(text)}
+    </Badge>`,
+    metadata: { nestable: true, props: { variant, colorScheme, size, flatBase, icon, text } },
+};

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

@@ -0,0 +1,26 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            heading: string;
+            description: string;
+            direction: string;
+            image: figma.ResultSection[] | undefined;
+            button: figma.ResultSection[] | undefined;
+            link: figma.ResultSection[] | undefined;
+            onPress: {
+                $value: string;
+                $type: "function";
+            } | undefined;
+            onClose: {
+                $value: string;
+                $type: "function";
+            } | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/Banner/Banner.figma.js

@@ -0,0 +1,47 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=8294-3905&m=dev
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Banner/Banner.tsx
+// component=Banner
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const headingText = instance.findText('Banner heading');
+const heading = (headingText.type !== 'ERROR' ? headingText.textContent : undefined) || 'The banner heading';
+const descriptionText = instance.findText('Description');
+const description = (descriptionText.type !== 'ERROR' ? descriptionText.textContent : undefined) ||
+    'The text in the banner';
+const rawDirection = instance.getEnum('Direction', {
+    Horizontal: 'horizontal',
+    Vertical: 'vertical',
+});
+// getEnum() can resolve to a non-string sentinel when Direction can't be matched to either
+// option — always fall back to the component's own default ('horizontal') rather than pass
+// that sentinel through to renderProp, which renders it as broken, unparseable syntax.
+const direction = typeof rawDirection === 'string' ? rawDirection : 'horizontal';
+const imageSlot = instance.getSlot('Image');
+const image2Slot = instance.getSlot('Image2');
+const image = imageSlot?.connectedInstances[0]?.executeTemplate().example ??
+    image2Slot?.connectedInstances[0]?.executeTemplate().example;
+const showClose = instance.getBoolean('Close?');
+const onClose = showClose === true
+    ? figma.helpers.react.function("() => console.log('Close pressed')")
+    : undefined;
+const showButton = instance.getBoolean('Button?');
+const buttonInstance = instance.findInstance('Button');
+const button = showButton && buttonInstance.type !== 'ERROR'
+    ? buttonInstance.executeTemplate().example
+    : undefined;
+const showLink = instance.getBoolean('Link?');
+const linkInstance = instance.findInstance('Link');
+const link = showLink && linkInstance.type !== 'ERROR' ? linkInstance.executeTemplate().example : undefined;
+const showChevron = instance.getBoolean('Chevron?');
+const onPress = showChevron === true
+    ? figma.helpers.react.function("() => console.log('Banner pressed')")
+    : undefined;
+export default {
+    id: 'Banner',
+    imports: ["import { Banner } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<Banner${figma.helpers.react.renderProp('heading', heading)}${figma.helpers.react.renderProp('description', description)}${figma.helpers.react.renderProp('direction', direction)}${figma.helpers.react.renderProp('image', image)}${figma.helpers.react.renderProp('button', button)}${figma.helpers.react.renderProp('link', link)}${figma.helpers.react.renderProp('onPress', onPress)}${figma.helpers.react.renderProp('onClose', onClose)} />`,
+    metadata: {
+        nestable: true,
+        props: { heading, description, direction, image, button, link, onPress, onClose },
+    },
+};

package/build/components/Banner/BannerIllustration.figma.d.ts

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

package/build/components/Banner/BannerIllustration.figma.js

@@ -0,0 +1,13 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=10145%3A4877
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Banner/BannerIllustration.tsx
+// component=BannerIllustration
+import figma from 'figma';
+export default {
+    id: 'BannerIllustration',
+    imports: ["import { BannerIllustration } from '@utilitywarehouse/hearth-react-native'"],
+    example: figma.code `<BannerIllustration />`,
+    metadata: {
+        nestable: true,
+        props: {},
+    },
+};

package/build/components/BottomSheet/BottomSheetModal.figma.d.ts

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

package/build/components/BottomSheet/BottomSheetModal.figma.js

@@ -0,0 +1,11 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4084%3A33378
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/BottomSheet/BottomSheetModal.tsx
+// component=BottomSheetModal
+import figma from 'figma';
+const instance = figma.selectedInstance;
+export default {
+    id: 'BottomSheetModal',
+    imports: ["import { BottomSheetModal } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<BottomSheetModal />`,
+    metadata: { nestable: true, props: {} },
+};

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

@@ -0,0 +1,38 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            disabled: boolean | undefined;
+            size: string | undefined;
+            paddingNone: figma.EnumOptionsValues<{
+                True: boolean;
+                False: boolean;
+            }> | undefined;
+            colorScheme: string | undefined;
+            loading: boolean | undefined;
+            text: string;
+            ghostText: string;
+            iconPosition: figma.EnumOptionsValues<{
+                true: undefined;
+                false: figma.EnumOptionsValues<{
+                    true: string;
+                    false: undefined;
+                }>;
+            }>;
+            icon: {
+                $value: string;
+                $type: "react-component";
+            } | undefined;
+            variant: string | undefined;
+            inverted: figma.EnumOptionsValues<{
+                True: boolean;
+                False: boolean;
+            }> | undefined;
+        };
+    };
+};
+export default _default;