@utilitywarehouse/hearth-react-native 0.35.7 → 0.35.9

package/build/components/Input/Input_2.figma.js

@@ -0,0 +1,34 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2161-1311&t=3uUSBVdxldgG5uz3-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Input/Input.tsx
+// component=Input
+import figma from 'figma';
+const loading = figma.selectedInstance.getEnum('State', {
+    Loading: true,
+});
+const placeholder = figma.selectedInstance.getEnum('State', {
+    Placeholder: figma.selectedInstance.getString('Value'),
+});
+const value = figma.selectedInstance.getEnum('State', {
+    Filled: figma.selectedInstance.getString('Value'),
+});
+const label = figma.selectedInstance.getBoolean('Label?', {
+    true: figma.selectedInstance.getString('Label'),
+});
+const helperText = figma.selectedInstance.getBoolean('Helper text?', {
+    true: figma.selectedInstance.getString('Helper text'),
+});
+export default {
+    id: 'Input',
+    imports: ["import { Input } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<Input type="search"${figma.helpers.react.renderProp('loading', loading)}${figma.helpers.react.renderProp('placeholder', placeholder)}${figma.helpers.react.renderProp('value', value)}${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('helperText', helperText)}/>`,
+    metadata: {
+        nestable: true,
+        props: {
+            loading,
+            placeholder,
+            value,
+            label,
+            helperText,
+        },
+    },
+};

package/build/components/Label/Label.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;
+            optional: boolean;
+        };
+    };
+};
+export default _default;

package/build/components/Label/Label.figma.js

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=8145%3A617
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Label/Label.tsx
+// component=Label
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const label = instance.getString('Label');
+const optional = instance.getBoolean('Optional?');
+export default {
+    id: 'label',
+    imports: ['import { Label } from "@utilitywarehouse/hearth-react-native";'],
+    example: figma.code `<Label>${figma.helpers.react.renderChildren(label)}${optional ? ' (optional)' : ''}</Label>`,
+    metadata: {
+        nestable: true,
+        props: {
+            label,
+            optional,
+        },
+    },
+};

package/build/components/Link/Link.d.ts

@@ -1,7 +1,7 @@
 import type { LinkProps } from './Link.props';
 export declare const LinkText: import("react").ForwardRefExoticComponent<import("react-native/types").TextProps & import("react").RefAttributes<import("react-native/types").TextProps>>;
 declare const Link: {
-    ({ children, icon, disabled, target, iconPosition, showIcon, textStyle, iconStyle, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, icon, disabled, target, rel, iconPosition, showIcon, textStyle, iconStyle, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Link;

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

@@ -0,0 +1,27 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            iconRight: boolean;
+            iconLeft: boolean;
+            inverted: figma.EnumOptionsValues<{
+                True: boolean;
+                False: boolean;
+            }> | undefined;
+            text: string;
+            showIcon: boolean;
+            iconPosition: string | undefined;
+            iconRightName: string | undefined;
+            iconLeftName: string | undefined;
+            icon: {
+                $value: string;
+                $type: "react-component";
+            } | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/Link/Link.figma.js

@@ -0,0 +1,45 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=163%3A562
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Link/Link.tsx
+// component=Link
+import figma from 'figma';
+const iconRight = figma.selectedInstance.getBoolean('Icon right?');
+const iconLeft = figma.selectedInstance.getBoolean('Icon left?');
+const inverted = figma.selectedInstance.getEnum('Inverted?', {
+    True: true,
+    False: false,
+});
+const text = figma.selectedInstance.getString('Text');
+const showIcon = iconRight || iconLeft;
+const iconPosition = iconRight ? 'right' : iconLeft ? 'left' : undefined;
+const iconRightName = figma.selectedInstance.getInstanceSwap('Icon right-20')?.executeTemplate()
+    .metadata?.props?.componentName;
+const iconLeftName = figma.selectedInstance.getInstanceSwap('Icon left-20')?.executeTemplate()
+    .metadata?.props?.componentName;
+const iconName = showIcon ? (iconRight ? iconRightName : iconLeftName) : undefined;
+const icon = iconName ? figma.helpers.react.reactComponent(iconName) : undefined;
+export default {
+    id: 'Link',
+    imports: [
+        "import { Link } from '@utilitywarehouse/hearth-react-native';",
+        ...(iconName
+            ? [`import { ${iconName} } from '@utilitywarehouse/hearth-react-native-icons';`]
+            : []),
+    ],
+    example: figma.code `<Link${figma.helpers.react.renderProp('inverted', inverted)}${figma.helpers.react.renderProp('showIcon', showIcon)}${figma.helpers.react.renderProp('iconPosition', iconPosition)}${figma.helpers.react.renderProp('icon', icon)}>
+      ${figma.helpers.react.renderChildren(text)}
+    </Link>`,
+    metadata: {
+        nestable: true,
+        props: {
+            iconRight,
+            iconLeft,
+            inverted,
+            text,
+            showIcon,
+            iconPosition,
+            iconRightName,
+            iconLeftName,
+            icon,
+        },
+    },
+};

package/build/components/Link/Link.js

@@ -10,9 +10,14 @@ const LinkComponent = createLink({
 });
 export const LinkText = LinkComponent.Text;
 LinkText.displayName = 'LinkText';
-const Link = ({ children, icon = ChevronRightSmallIcon, disabled = false, target = '_self', iconPosition = 'right', showIcon = true, textStyle, iconStyle, ...props }) => {
+const Link = ({ children, icon = ChevronRightSmallIcon, disabled = false, target = '_self', rel, iconPosition = 'right', showIcon = true, textStyle, iconStyle, ...props }) => {
     const LinkAny = LinkComponent;
-    return (_jsxs(LinkAny, { ...props, isDisabled: disabled, isExternal: target === '_blank', children: [showIcon && icon && iconPosition === 'left' ? (_jsx(LinkIcon, { as: icon, style: iconStyle })) : null, _jsx(LinkText, { style: textStyle, children: children }), showIcon && icon && iconPosition === 'right' ? (_jsx(LinkIcon, { as: icon, style: iconStyle })) : null] }));
+    // `@gluestack-ui/link`'s `useLink` only ever applies `target`/`rel` via a ref
+    // mutation during render, before the ref is attached at commit - it never
+    // takes effect. Pass them through explicitly instead; LinkRoot forwards them
+    // to the underlying Pressable as `hrefAttrs`, which is how react-native-web
+    // actually applies them to the rendered `<a>`.
+    return (_jsxs(LinkAny, { ...props, target: target, rel: rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined), isDisabled: disabled, isExternal: target === '_blank', children: [showIcon && icon && iconPosition === 'left' ? (_jsx(LinkIcon, { as: icon, style: iconStyle })) : null, _jsx(LinkText, { style: textStyle, children: children }), showIcon && icon && iconPosition === 'right' ? (_jsx(LinkIcon, { as: icon, style: iconStyle })) : null] }));
 };
 Link.displayName = 'Link';
 export default Link;

package/build/components/Link/Link.props.d.ts

@@ -5,6 +5,8 @@ export interface LinkProps extends Omit<PressableProps, 'children'> {
     children: TextProps['children'];
     href?: string;
     target?: '_blank' | '_self' | '_parent' | '_top';
+    /** Defaults to `noopener noreferrer` when `target` is `_blank`. */
+    rel?: string;
     inverted?: boolean;
     disabled?: boolean;
     icon?: ComponentType;

package/build/components/Link/LinkRoot.d.ts

@@ -1,6 +1,6 @@
 import LinkProps from './Link.props';
 declare const LinkRoot: {
-    ({ children, inverted, states, ...props }: LinkProps & {
+    ({ children, inverted, states, target, rel, ...props }: LinkProps & {
         states?: {
             active?: boolean;
             disabled?: boolean;

package/build/components/Link/LinkRoot.js

@@ -1,13 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { Pressable } from 'react-native';
+import { Platform, Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { LinkContext } from './Link.context';
-const LinkRoot = ({ children, inverted = false, states, ...props }) => {
+const LinkRoot = ({ children, inverted = false, states, target, rel, ...props }) => {
     const { active, disabled = false } = states || {};
     styles.useVariants({ disabled, inverted, active });
     const value = useMemo(() => ({ inverted, disabled, active }), [inverted, disabled, active]);
-    return (_jsx(LinkContext.Provider, { value: value, children: _jsx(Pressable, { ...props, style: [styles.container, props.style], children: children }) }));
+    // react-native-web only applies `target`/`rel` to the rendered `<a>` via
+    // `hrefAttrs` - passing them as bare props is a no-op. Not typed on
+    // `PressableProps`, hence the spread rather than a named JSX attribute.
+    // Web-only prop, so it's gated to avoid an unknown-prop warning on native.
+    const hrefAttrsProp = Platform.OS === 'web' && (target || rel) ? { hrefAttrs: { target, rel } } : {};
+    return (_jsx(LinkContext.Provider, { value: value, children: _jsx(Pressable, { ...props, ...hrefAttrsProp, style: [styles.container, props.style], children: children }) }));
 };
 LinkRoot.displayName = 'LinkRoot';
 const styles = StyleSheet.create(theme => ({

package/build/components/List/List.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: {
+            container: string | undefined;
+            sectionHeader: {
+                heading: string | undefined;
+                helperText: string | undefined;
+                trailingContent: {
+                    headerTrailingContent: figma.ResultSection[] | undefined;
+                } | undefined;
+            };
+            listContainer: figma.ResultSection[][];
+        };
+    };
+};
+export default _default;

package/build/components/List/List.figma.js

@@ -0,0 +1,49 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2437%3A621
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/List/List.tsx
+// component=List
+import figma from 'figma';
+const container = figma.selectedInstance.getEnum('Container', {
+    'Subtle White': 'subtleWhite',
+    'Emphasis White': 'emphasisWhite',
+    'Subtle Warm White': 'subtleWarmWhite',
+    'Emphasis Warm White': 'emphasisWarmWhite',
+});
+const sectionHeader = figma.selectedInstance.getBoolean('Section header?', {
+    true: (function () {
+        const nestedLayer0 = figma.selectedInstance.findInstance('Section Header');
+        return {
+            heading: nestedLayer0.type !== 'ERROR' ? nestedLayer0.getString('Heading') : undefined,
+            helperText: nestedLayer0.type !== 'ERROR'
+                ? nestedLayer0.getBoolean('Helper text?', {
+                    true: nestedLayer0.getString('Helper text'),
+                })
+                : undefined,
+            trailingContent: nestedLayer0.type !== 'ERROR'
+                ? nestedLayer0.getBoolean('Trailing content?', {
+                    true: (function () {
+                        const nestedLayer1 = figma.selectedInstance.findInstance('Trailing content');
+                        return {
+                            headerTrailingContent: nestedLayer1.type !== 'ERROR'
+                                ? nestedLayer1.getInstanceSwap('Variant')?.executeTemplate().example
+                                : undefined,
+                        };
+                    })(),
+                })
+                : undefined,
+        };
+    })(),
+});
+const listContainer = figma.selectedInstance
+    .getSlot('List Container')
+    ?.connectedInstances.map(i => i.executeTemplate().example) ?? [];
+export default {
+    id: 'List',
+    imports: ["import { List } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<List${figma.helpers.react.renderProp('container', container)}${figma.helpers.react.renderProp('heading', sectionHeader?.heading)}${figma.helpers.react.renderProp('helperText', sectionHeader?.helperText)}${figma.helpers.react.renderProp('headerTrailingContent', sectionHeader?.trailingContent?.headerTrailingContent)}>
+      ${figma.helpers.react.renderChildren(listContainer.flat())}
+    </List>`,
+    metadata: {
+        nestable: true,
+        props: { container, sectionHeader, listContainer },
+    },
+};

package/build/components/List/ListAction/ListAction.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;
+            disabled: boolean | undefined;
+            loading: boolean | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/List/ListAction/ListAction.figma.js

@@ -0,0 +1,17 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=9661%3A5128
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/List/ListAction/ListAction.tsx
+// component=ListAction
+import figma from 'figma';
+const heading = figma.selectedInstance.getString('Action heading');
+const disabled = figma.selectedInstance.getEnum('State', {
+    Disabled: true,
+});
+const loading = figma.selectedInstance.getEnum('State', {
+    Loading: true,
+});
+export default {
+    id: 'ListAction',
+    imports: ["import { ListAction } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<ListAction${figma.helpers.react.renderProp('heading', heading)}${figma.helpers.react.renderProp('disabled', disabled)}${figma.helpers.react.renderProp('loading', loading)}/>`,
+    metadata: { nestable: true, props: { heading, disabled, loading } },
+};

package/build/components/List/ListAction/ListAction.js

@@ -82,6 +82,7 @@ const styles = StyleSheet.create(theme => ({
                 },
                 false: {
                     _web: {
+                        '_focus-visible': theme.helpers.focusVisible,
                         _hover: {
                             backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
                         },

package/build/components/List/ListItem/ListItem.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: {
+            loading: boolean | undefined;
+            disabled: boolean | undefined;
+            leadingContent: {
+                variant: figma.EnumOptionsValues<{
+                    Icon: figma.ResultSection[] | undefined;
+                    'Icon Container': figma.ResultSection[] | undefined;
+                    Avatar: figma.ResultSection[] | undefined;
+                    Indicator: figma.ResultSection[] | undefined;
+                }>;
+            };
+            trailingContent: {
+                variant: figma.EnumOptionsValues<{
+                    Link: figma.ResultSection[] | undefined;
+                    Button: figma.ResultSection[] | undefined;
+                }>;
+            };
+            heading: string;
+            helperText: string;
+            badge: figma.ResultSection[] | undefined;
+            numericValue: string;
+            customContent: figma.ResultSection[][] | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/List/ListItem/ListItem.figma.js

@@ -0,0 +1,83 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2421%3A1628
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/List/ListItem/ListItem.tsx
+// component=ListItem
+import figma from 'figma';
+const loading = figma.selectedInstance.getEnum('State', {
+    Loading: true,
+});
+const disabled = figma.selectedInstance.getEnum('State', {
+    Disabled: true,
+});
+// findLayers() returns a union that includes TextHandle, which has no executeTemplate() —
+// guard on the INSTANCE type before calling it.
+function executeFirstInstanceTemplate(layers) {
+    const layer = layers[0];
+    return layer && layer.type === 'INSTANCE' ? layer.executeTemplate().example : undefined;
+}
+const leadingContent = figma.selectedInstance.getBoolean('Leading content?', {
+    true: (function () {
+        const nestedLayer3 = figma.selectedInstance.findInstance('Leading content');
+        return {
+            variant: nestedLayer3.type !== 'ERROR'
+                ? nestedLayer3.getEnum('Variant', {
+                    Icon: nestedLayer3.getInstanceSwap('Icon-24')?.executeTemplate().example,
+                    'Icon Container': executeFirstInstanceTemplate(nestedLayer3.findLayers(n => n.type === 'INSTANCE' && n.name === 'Icon Container')),
+                    Avatar: executeFirstInstanceTemplate(nestedLayer3.findLayers(n => n.type === 'INSTANCE' && n.name === 'Avatar')),
+                    Indicator: executeFirstInstanceTemplate(nestedLayer3.findLayers(n => n.type === 'INSTANCE' && n.name === 'Indicator')),
+                })
+                : undefined,
+        };
+    })(),
+});
+const trailingContent = figma.selectedInstance.getBoolean('Trailing Content?', {
+    true: (function () {
+        const nestedLayer4 = figma.selectedInstance.findInstance('Trailing content');
+        return {
+            variant: nestedLayer4.type !== 'ERROR'
+                ? nestedLayer4.getEnum('Variant', {
+                    Link: executeFirstInstanceTemplate(nestedLayer4.findLayers(n => n.type === 'INSTANCE' && n.name === 'Link')),
+                    Button: executeFirstInstanceTemplate(nestedLayer4.findLayers(n => n.type === 'INSTANCE' && n.name === 'Button')),
+                })
+                : undefined,
+        };
+    })(),
+});
+const heading = figma.selectedInstance.getString('List heading');
+const helperText = figma.selectedInstance.getBoolean('Helper text?', {
+    true: figma.selectedInstance.getString('Helper text'),
+});
+const showBadge = figma.selectedInstance.getBoolean('Badge?');
+const badgeInstance = figma.selectedInstance.findInstance('Badge');
+const badge = showBadge && badgeInstance.type !== 'ERROR' ? badgeInstance.executeTemplate().example : undefined;
+const numericValue = figma.selectedInstance.getBoolean('Numerical value?', {
+    true: figma.selectedInstance.getString('Numerical value'),
+});
+// "Slot" is a genuine slot property, only populated for the 'Custom' variant.
+const customContent = figma.selectedInstance.getEnum('Variant', {
+    Custom: figma.selectedInstance
+        .getSlot('Slot')
+        ?.connectedInstances.map(i => i.executeTemplate().example) ?? [],
+});
+export default {
+    id: 'ListItem',
+    imports: ["import { ListItem } from '@utilitywarehouse/hearth-react-native';"],
+    example: customContent
+        ? figma.code `<ListItem${figma.helpers.react.renderProp('loading', loading)}${figma.helpers.react.renderProp('disabled', disabled)}>
+      ${figma.helpers.react.renderChildren(customContent.flat())}
+    </ListItem>`
+        : figma.code `<ListItem${figma.helpers.react.renderProp('heading', heading)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('badge', badge)}${figma.helpers.react.renderProp('numericValue', numericValue)}${figma.helpers.react.renderProp('loading', loading)}${figma.helpers.react.renderProp('disabled', disabled)}${figma.helpers.react.renderProp('leadingContent', leadingContent?.variant)}${figma.helpers.react.renderProp('trailingContent', trailingContent?.variant)}/>`,
+    metadata: {
+        nestable: true,
+        props: {
+            loading,
+            disabled,
+            leadingContent,
+            trailingContent,
+            heading,
+            helperText,
+            badge,
+            numericValue,
+            customContent,
+        },
+    },
+};

package/build/components/List/ListItem/ListItemHelperText.d.ts

@@ -1,6 +1,6 @@
 import { BodyTextProps } from '../../BodyText';
 declare const ListItemHelperText: {
-    ({ children, style, ...props }: BodyTextProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, ...props }: BodyTextProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default ListItemHelperText;

package/build/components/List/ListItem/ListItemHelperText.js

@@ -1,13 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../../BodyText';
-const ListItemHelperText = ({ children, style, ...props }) => {
-    return (_jsx(BodyText, { size: "md", style: [styles.text, style], ...props, children: children }));
+const ListItemHelperText = ({ children, ...props }) => {
+    return (_jsx(BodyText, { size: "md", color: "secondary", ...props, children: children }));
 };
 ListItemHelperText.displayName = 'ListItemHelperText';
-const styles = StyleSheet.create(theme => ({
-    text: {
-        color: theme.color.text.secondary,
-    },
-}));
 export default ListItemHelperText;

package/build/components/List/ListItem/ListItemLeadingContent.figma.d.ts

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

package/build/components/List/ListItem/ListItemLeadingContent.figma.js

@@ -0,0 +1,17 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6732%3A5792
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/List/ListItem/ListItemLeadingContent.tsx
+// component=ListItemLeadingContent
+import figma from 'figma';
+const variant = figma.selectedInstance.getEnum('Variant', {
+    Icon: 'icon',
+    'Icon Container': 'iconContainer',
+    Avatar: 'avatar',
+    Indicator: 'indicator',
+});
+const icon = figma.selectedInstance.getInstanceSwap('Icon-24');
+export default {
+    id: 'ListItemLeadingContent',
+    imports: ["import { ListItemLeadingContent } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<ListItemLeadingContent${figma.helpers.react.renderProp('variant', variant)} />`,
+    metadata: { nestable: true, props: { variant, icon } },
+};

package/build/components/List/ListItem/ListItemRoot.js

@@ -99,6 +99,7 @@ const styles = StyleSheet.create(theme => ({
             showPressed: {
                 true: {
                     _web: {
+                        '_focus-visible': theme.helpers.focusVisible,
                         _hover: {
                             backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
                         },

package/build/components/List/ListItem/ListItemTrailingContent.figma.d.ts

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

package/build/components/List/ListItem/ListItemTrailingContent.figma.js

@@ -0,0 +1,14 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=9852%3A9858
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/List/ListItem/ListItemTrailingContent.tsx
+// component=ListItemTrailingContent
+import figma from 'figma';
+const variant = figma.selectedInstance.getEnum('Variant', {
+    Link: 'link',
+    Button: 'button',
+});
+export default {
+    id: 'ListItemTrailingContent',
+    imports: ["import { ListItemTrailingContent } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<ListItemTrailingContent${figma.helpers.react.renderProp('variant', variant)} />`,
+    metadata: { nestable: true, props: { variant } },
+};

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

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

package/build/components/Menu/Menu.figma.js

@@ -0,0 +1,33 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3263%3A18832
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Menu/Menu.tsx
+// component=Menu
+import figma from 'figma';
+const heading = figma.selectedInstance.getBoolean('Heading?', {
+    true: figma.selectedInstance.getString('Heading'),
+});
+const showHandle = figma.selectedInstance.getBoolean('Grabber?', {
+    true: true,
+});
+const menuItemLayers = figma.selectedInstance.findConnectedInstances(n => n.hasCodeConnect());
+const menuItems = menuItemLayers.map(layer => layer.executeTemplate().example) ?? [];
+export default {
+    id: 'Menu',
+    imports: [
+        "import { Button, Menu, MenuTrigger } from '@utilitywarehouse/hearth-react-native';",
+        "import { useRef } from 'react';",
+    ],
+    example: figma.code `function Example() {
+  const menuRef = useRef(null);
+  return (<>
+    <MenuTrigger onPress={() => menuRef.current?.present()}>
+      <Button>Open Menu</Button>
+    </MenuTrigger>
+    <Menu ref={menuRef}${figma.helpers.react.renderProp('heading', heading)}${figma.helpers.react.renderProp('showHandle', showHandle)}>
+      ${figma.helpers.react.renderChildren(menuItems.flat())}
+    </Menu>
+  </>);
+}`,
+    metadata: {
+        props: { heading, showHandle, menuItems },
+    },
+};

package/build/components/Menu/MenuItem.figma.d.ts

@@ -0,0 +1,29 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        props: {
+            text: string;
+            icon: {
+                $value: string;
+                $type: "react-component";
+            } | undefined;
+            iconPosition: string;
+            colorScheme: figma.EnumOptionsValues<{
+                Destructive: string;
+                Functional: undefined;
+            }>;
+            disabled: figma.EnumOptionsValues<{
+                Disabled: boolean;
+                Default: undefined;
+                Hover: undefined;
+                Active: undefined;
+                Focus: undefined;
+            }>;
+        };
+        nestable: boolean;
+    };
+};
+export default _default;