@utilitywarehouse/hearth-react-native 0.35.6 → 0.35.8

package/build/components/Button/Button.figma.js

@@ -0,0 +1,84 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=90%3A432
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Button/Button.tsx
+// component=Button
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const disabled = instance.getEnum('State', {
+    Disabled: true,
+});
+const size = instance.getEnum('Size', {
+    'SM-32': 'sm',
+    'MD-48': 'md',
+});
+const paddingNone = instance.getEnum('Padding None?', {
+    True: true,
+    False: false,
+});
+const colorScheme = instance.getEnum('Color Scheme', {
+    Affirmative: 'affirmative',
+    Destructive: 'destructive',
+    Functional: 'functional',
+    Highlight: 'highlight',
+});
+const loading = instance.getEnum('State', {
+    Loading: true,
+});
+const text = instance.getString('Text');
+const ghostText = instance.getString('Ghost Text');
+const iconPosition = instance.getBoolean('Show icon left?', {
+    true: undefined,
+    false: instance.getBoolean('Show icon right?', {
+        true: 'right',
+        false: undefined,
+    }),
+});
+const iconName = instance.getBoolean('Show icon left?', {
+    true: instance.getInstanceSwap('Icon left-20')?.executeTemplate().metadata?.props
+        ?.componentName,
+    false: instance.getBoolean('Show icon right?', {
+        true: instance.getInstanceSwap('Icon right-20')?.executeTemplate().metadata?.props
+            ?.componentName,
+        false: undefined,
+    }),
+});
+const icon = iconName ? figma.helpers.react.reactComponent(iconName) : undefined;
+const variant = instance.getEnum('Variant', {
+    Emphasis: 'emphasis',
+    Solid: 'solid',
+    Outline: 'outline',
+    Ghost: 'ghost',
+});
+const inverted = instance.getEnum('Inverted?', {
+    True: true,
+    False: false,
+});
+// Use ghostText for Ghost variant, text for all others
+const childrenContent = variant === 'ghost' ? ghostText : text;
+export default {
+    id: 'Button',
+    imports: [
+        "import { Button } from '@utilitywarehouse/hearth-react-native';",
+        ...(iconName
+            ? [`import { ${iconName} } from '@utilitywarehouse/hearth-react-native-icons';`]
+            : []),
+    ],
+    example: figma.code `<Button${figma.helpers.react.renderProp('disabled', disabled)}${figma.helpers.react.renderProp('size', size)}${figma.helpers.react.renderProp('variant', variant)}${figma.helpers.react.renderProp('inverted', inverted)}${figma.helpers.react.renderProp('paddingNone', paddingNone)}${figma.helpers.react.renderProp('colorScheme', colorScheme)}${figma.helpers.react.renderProp('loading', loading)}${figma.helpers.react.renderProp('icon', icon)}${figma.helpers.react.renderProp('iconPosition', iconPosition)}>
+    ${figma.helpers.react.renderChildren(childrenContent)}
+  </Button>`,
+    metadata: {
+        nestable: true,
+        props: {
+            disabled,
+            size,
+            paddingNone,
+            colorScheme,
+            loading,
+            text,
+            ghostText,
+            iconPosition,
+            icon,
+            variant,
+            inverted,
+        },
+    },
+};

package/build/components/Card/Card.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: {
+            variant: string | undefined;
+            colorScheme: string | undefined;
+            noPadding: boolean;
+            content: figma.ResultSection[][];
+        };
+    };
+};
+export default _default;

package/build/components/Card/Card.figma.js

@@ -0,0 +1,49 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2160%3A11
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Card/CardRoot.tsx
+// component=Card
+import figma from 'figma';
+const variant = figma.selectedInstance.getEnum('Variant', {
+    Emphasis: 'emphasis',
+    Subtle: 'subtle',
+});
+const colorScheme = figma.selectedInstance.getEnum('Color Scheme', {
+    'Neutral Strong': 'neutralStrong',
+    'Neutral Subtle': 'neutralSubtle',
+    Brand: 'brand',
+    Energy: 'energy',
+    Broadband: 'broadband',
+    Mobile: 'mobile',
+    Insurance: 'insurance',
+    Cashback: 'cashback',
+    Pig: 'pig',
+    Highlight: 'highlight',
+});
+const noPadding = figma.selectedInstance.getBoolean('Padding None?');
+const contentResults = (figma.selectedInstance.getSlot('Content')?.connectedInstances ?? []).map(i => i.executeTemplate());
+const content = contentResults.map(r => r.example);
+// Banner and HighlightBanner already wrap themselves in a Card, so when Card's Content slot is
+// swapped directly to one of them, render just that component rather than nesting it in another.
+// Detected from the rendered code itself (custom metadata.props fields that aren't referenced in
+// a template's own `example` don't survive publish/resolve, so componentName-style flags can't be
+// used here) — strip any leading comment lines, then check the JSX tag.
+const rootCode = (contentResults.length === 1 ? contentResults[0].example : [])
+    .filter(section => section.type === 'CODE')
+    .map(section => section.code)
+    .join('')
+    .replace(/^\s*\/\/.*$/gm, '')
+    .trim();
+const standaloneContent = /^<(Banner|HighlightBanner)[\s/>]/.test(rootCode)
+    ? contentResults[0].example
+    : undefined;
+export default {
+    id: 'Card',
+    imports: standaloneContent
+        ? []
+        : ["import { Card } from '@utilitywarehouse/hearth-react-native';"],
+    example: standaloneContent
+        ? figma.code `${standaloneContent}`
+        : figma.code `<Card${figma.helpers.react.renderProp('variant', variant)}${figma.helpers.react.renderProp('colorScheme', colorScheme)}${figma.helpers.react.renderProp('noPadding', noPadding)}>
+      ${content.flat()}
+    </Card>`,
+    metadata: { nestable: true, props: { variant, colorScheme, noPadding, content } },
+};

package/build/components/Card/CardAction/CardAction.figma.d.ts

@@ -0,0 +1,35 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            state: string | undefined;
+            size: string | undefined;
+            loading: boolean;
+            disabled: boolean;
+            heading: string;
+            helperTextEnabled: boolean;
+            helperText: string | undefined;
+            leadingIconEnabled: boolean;
+            leadingIcon: {
+                $value: string;
+                $type: "react-component";
+            } | undefined;
+            iconContainerVariant: string | undefined;
+            iconContainerColor: string | undefined;
+            trailingIcon: {
+                $value: string;
+                $type: "react-component";
+            } | undefined;
+            iconContainerEnabled: boolean;
+            badgeBottomEnabled: boolean;
+            badgeRightEnabled: boolean;
+            badgeMiddleEnabled: boolean;
+            badgePosition: string | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/Card/CardAction/CardAction.figma.js

@@ -0,0 +1,104 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=8154%3A4346
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Card/CardAction/CardActionRoot.tsx
+// component=CardAction
+import figma from 'figma';
+const state = figma.selectedInstance.getEnum('State', {
+    Default: 'default',
+    Hover: 'hover',
+    Active: 'active',
+    Disabled: 'disabled',
+    Loading: 'loading',
+});
+const size = figma.selectedInstance.getEnum('Size', {
+    Default: 'md',
+    Large: 'lg',
+});
+const loading = state === 'loading';
+const disabled = state === 'disabled';
+const heading = figma.selectedInstance.getString('List heading');
+const helperTextEnabled = figma.selectedInstance.getBoolean('Helper text?');
+const helperText = helperTextEnabled ? figma.selectedInstance.getString('Helper text') : undefined;
+const iconContainerEnabled = figma.selectedInstance.getBoolean('Icon container?');
+const iconContainerInstance = figma.selectedInstance.findInstance('Icon Container');
+// When "Icon container?" is on, the leading icon and its container styling come from this
+// nested Icon Container instance rather than the bare "Leading icon-24" swap below.
+const iconContainer = iconContainerEnabled && iconContainerInstance.type !== 'ERROR'
+    ? iconContainerInstance
+    : undefined;
+const iconContainerSize = iconContainer?.getEnum('Size', {
+    'SM-32': 'sm',
+    'MD-48': 'md',
+    'LG-64': 'lg',
+});
+const iconContainerIconName = iconContainer
+    ?.getInstanceSwap(iconContainerSize === 'sm' ? 'Icon-20' : 'Icon-24')
+    ?.executeTemplate().metadata?.props?.componentName;
+const iconContainerVariant = iconContainer?.getEnum('Variant', {
+    Subtle: 'subtle',
+    Emphasis: 'emphasis',
+});
+const iconContainerColor = iconContainer?.getEnum('Color', {
+    Pig: 'pig',
+    Energy: 'energy',
+    Broadband: 'broadband',
+    Mobile: 'mobile',
+    Insurance: 'insurance',
+    Cashback: 'cashback',
+    Highlight: 'highlight',
+});
+const leadingIconEnabled = figma.selectedInstance.getBoolean('Leading Icon?');
+const leadingIconName = iconContainer
+    ? iconContainerIconName
+    : leadingIconEnabled
+        ? figma.selectedInstance.getInstanceSwap('Leading icon-24')?.executeTemplate().metadata?.props
+            ?.componentName
+        : undefined;
+const leadingIcon = leadingIconName
+    ? figma.helpers.react.reactComponent(leadingIconName)
+    : undefined;
+const trailingIconName = figma.selectedInstance
+    .getInstanceSwap('Trailing icon-20')
+    ?.executeTemplate().metadata?.props?.componentName;
+const trailingIcon = trailingIconName
+    ? figma.helpers.react.reactComponent(trailingIconName)
+    : undefined;
+const badgeBottomEnabled = figma.selectedInstance.getBoolean('Badge bottom?');
+const badgeRightEnabled = figma.selectedInstance.getBoolean('Badge right?');
+const badgeMiddleEnabled = figma.selectedInstance.getBoolean('Badge middle?');
+const badgePosition = badgeRightEnabled
+    ? 'right'
+    : badgeMiddleEnabled
+        ? 'middle'
+        : badgeBottomEnabled
+            ? 'bottom'
+            : undefined;
+export default {
+    id: 'CardAction',
+    imports: [
+        "import { CardAction } from '@utilitywarehouse/hearth-react-native';",
+        ...[...new Set([leadingIconName, trailingIconName].filter(Boolean))].map(name => `import { ${name} } from '@utilitywarehouse/hearth-react-native-icons';`),
+    ],
+    example: figma.code `<CardAction${figma.helpers.react.renderProp('loading', loading)}${figma.helpers.react.renderProp('disabled', disabled)}${figma.helpers.react.renderProp('size', size)}${figma.helpers.react.renderProp('heading', heading)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('badgePosition', badgePosition)}${figma.helpers.react.renderProp('iconContainer', iconContainerEnabled)}${figma.helpers.react.renderProp('leadingIcon', leadingIcon)}${figma.helpers.react.renderProp('iconContainerVariant', iconContainerVariant)}${figma.helpers.react.renderProp('iconContainerColor', iconContainerColor)}${figma.helpers.react.renderProp('trailingIcon', trailingIcon)} />`,
+    metadata: {
+        nestable: true,
+        props: {
+            state,
+            size,
+            loading,
+            disabled,
+            heading,
+            helperTextEnabled,
+            helperText,
+            leadingIconEnabled,
+            leadingIcon,
+            iconContainerVariant,
+            iconContainerColor,
+            trailingIcon,
+            iconContainerEnabled,
+            badgeBottomEnabled,
+            badgeRightEnabled,
+            badgeMiddleEnabled,
+            badgePosition,
+        },
+    },
+};

package/build/components/Carousel/Carousel.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: {
+            inverted: figma.EnumOptionsValues<{
+                False: boolean;
+                True: boolean;
+            }> | undefined;
+            showNavigation: boolean;
+        };
+    };
+};
+export default _default;

package/build/components/Carousel/Carousel.figma.js

@@ -0,0 +1,18 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=5191-3220&m=dev
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Carousel/Carousel.tsx
+// component=Carousel
+import figma from 'figma';
+const inverted = figma.selectedInstance.getEnum('Inverted?', { False: false, True: true });
+const showNavigation = figma.selectedInstance.getBoolean('Arrows?');
+export default {
+    id: 'Carousel',
+    imports: ["import { Carousel, CarouselItem } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `// Example usage of the Carousel component
+// See https://hearth.prod.uw.systems/react-native/?path=/docs/components-carousel--docs
+<Carousel width={300}${figma.helpers.react.renderProp('inverted', inverted)}${figma.helpers.react.renderProp('showNavigation', showNavigation)}>
+        <CarouselItem>Item 1</CarouselItem>
+        <CarouselItem>Item 2</CarouselItem>
+        <CarouselItem>Item 3</CarouselItem>
+      </Carousel>`,
+    metadata: { nestable: true, props: { inverted, showNavigation } },
+};

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

@@ -0,0 +1,22 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            disabled: boolean | undefined;
+            validationStatus: string | undefined;
+            checked: boolean;
+            label: string;
+            helperText: figma.EnumOptionsValues<{
+                true: string;
+                false: undefined;
+            }>;
+            invalidText: string;
+            image: figma.ResultSection[] | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/Checkbox/Checkbox.figma.js

@@ -0,0 +1,29 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3087-7316
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Checkbox/Checkbox.tsx
+// component=Checkbox
+import figma from 'figma';
+const disabled = figma.selectedInstance.getEnum('State', {
+    Disabled: true,
+});
+const validationStatus = figma.selectedInstance.getEnum('State', {
+    Invalid: 'invalid',
+});
+const checked = figma.selectedInstance.getBoolean('Checked?');
+const label = figma.selectedInstance.getString('Label');
+const helperText = figma.selectedInstance.getBoolean('Helper text?', {
+    true: figma.selectedInstance.getString('Helper text'),
+    false: undefined,
+});
+const invalidText = figma.selectedInstance.getString('Validation text');
+const showImage = figma.selectedInstance.getBoolean('Image?');
+const imageInstance = figma.selectedInstance.findInstance('Checkbox Image');
+const image = showImage ? imageInstance?.executeTemplate().example : undefined;
+export default {
+    id: 'Checkbox',
+    imports: ["import { Checkbox } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<Checkbox${figma.helpers.react.renderProp('disabled', disabled)}${figma.helpers.react.renderProp('validationStatus', validationStatus)}${figma.helpers.react.renderProp('checked', checked)}${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('invalidText', invalidText)}${figma.helpers.react.renderProp('image', image)}/>`,
+    metadata: {
+        nestable: true,
+        props: { disabled, validationStatus, checked, label, helperText, invalidText, image },
+    },
+};

package/build/components/Checkbox/CheckboxGroup.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: {
+            label: string;
+            labelVariant: string | undefined;
+            helperText: figma.EnumOptionsValues<{
+                true: string;
+                false: undefined;
+            }>;
+            direction: figma.EnumOptionsValues<{
+                Column: undefined;
+                Row: string;
+            }>;
+            validationStatus: string | undefined;
+            invalidText: string;
+            tiles: figma.ResultSection[];
+            checkboxes: figma.ResultSection[];
+        };
+    };
+};
+export default _default;

package/build/components/Checkbox/CheckboxGroup.figma.js

@@ -0,0 +1,46 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3141-4275&m=dev
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Checkbox/CheckboxGroup.tsx
+// component=CheckboxGroup
+import figma from 'figma';
+const label = figma.selectedInstance.getString('Group label');
+const labelVariant = figma.selectedInstance.getEnum('Label variant', {
+    Heading: 'heading',
+    Body: 'body',
+});
+const helperText = figma.selectedInstance.getBoolean('Helper text?', {
+    true: figma.selectedInstance.getString('Helper text'),
+    false: undefined,
+});
+const direction = figma.selectedInstance.getEnum('Direction', {
+    Column: undefined,
+    Row: 'row',
+});
+const validationStatus = figma.selectedInstance.getEnum('State', {
+    Invalid: 'invalid',
+});
+const invalidText = figma.selectedInstance.getString('Validation text');
+const content = figma.selectedInstance.getPropertyValue('Content');
+const tiles = figma.properties.children(['Checkbox Tile']);
+const checkboxes = figma.properties.children(['Checkbox']);
+const isTile = content === 'Checkbox Tile';
+const children = isTile ? tiles : checkboxes;
+export default {
+    id: 'CheckboxGroup',
+    imports: ["import { CheckboxGroup } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<CheckboxGroup${isTile ? ` type="tile"` : ''}${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('labelVariant', labelVariant)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('direction', direction)}${figma.helpers.react.renderProp('validationStatus', validationStatus)}${figma.helpers.react.renderProp('invalidText', invalidText)}>
+    ${figma.helpers.react.renderChildren(children)}
+  </CheckboxGroup>`,
+    metadata: {
+        nestable: true,
+        props: {
+            label,
+            labelVariant,
+            helperText,
+            direction,
+            validationStatus,
+            invalidText,
+            tiles,
+            checkboxes,
+        },
+    },
+};

package/build/components/Checkbox/CheckboxImage.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/Checkbox/CheckboxImage.figma.js

@@ -0,0 +1,10 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7428%3A3207
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Checkbox/CheckboxImage.tsx
+// component=CheckboxImage
+import figma from 'figma';
+export default {
+    id: 'CheckboxImage',
+    imports: ["import { CheckboxImage } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<CheckboxImage source={require('./image.png')} style={{ width: 40, height: 24, resizeMode: 'contain' }} />`,
+    metadata: { nestable: true, props: {} },
+};

package/build/components/Checkbox/CheckboxTileRoot.figma.d.ts

@@ -0,0 +1,20 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            validationStatus: string | undefined;
+            checked: boolean;
+            label: string;
+            helperText: figma.EnumOptionsValues<{
+                true: string;
+                false: undefined;
+            }>;
+            image: figma.ResultSection[] | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/Checkbox/CheckboxTileRoot.figma.js

@@ -0,0 +1,22 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=4961-23797&m=dev
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Checkbox/Checkbox.tsx
+// component=Checkbox
+import figma from 'figma';
+const validationStatus = figma.selectedInstance.getEnum('State', {
+    Invalid: 'invalid',
+});
+const checked = figma.selectedInstance.getBoolean('Checked?');
+const label = figma.selectedInstance.getString('Label');
+const helperText = figma.selectedInstance.getBoolean('Helper text?', {
+    true: figma.selectedInstance.getString('Helper text'),
+    false: undefined,
+});
+const showImage = figma.selectedInstance.getBoolean('Image?');
+const imageInstance = figma.selectedInstance.findInstance('Checkbox Image');
+const image = showImage ? imageInstance?.executeTemplate().example : undefined;
+export default {
+    id: 'CheckboxTile',
+    imports: ["import { Checkbox } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<Checkbox type="tile"${figma.helpers.react.renderProp('validationStatus', validationStatus)}${figma.helpers.react.renderProp('checked', checked)}${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('image', image)}/>`,
+    metadata: { nestable: true, props: { validationStatus, checked, label, helperText, image } },
+};

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

@@ -0,0 +1,23 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            label: string;
+            placeholder: string | undefined;
+            validationStatus: string | undefined;
+            invalidText: string | undefined;
+            helperText: string;
+            required: figma.EnumOptionsValues<{
+                true: boolean;
+                false: boolean;
+            }>;
+            loading: boolean | undefined;
+            value: string | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/Combobox/Combobox.figma.js

@@ -0,0 +1,69 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=9359%3A2923
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Combobox/Combobox.tsx
+// component=Combobox
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const label = instance.getString('Label');
+const placeholder = instance.getEnum('Value type', {
+    Empty: '',
+    Placeholder: instance.getString('Value'),
+    Filled: instance.getString('Value'),
+});
+const validationStatus = instance.getEnum('Variant', {
+    Default: 'initial',
+    Invalid: 'invalid',
+    Loading: 'initial',
+});
+const invalidText = instance.getEnum('Variant', {
+    Invalid: instance.getString('Validation'),
+});
+const helperText = instance.getBoolean('Helper text?', {
+    true: instance.getString('Helper text'),
+});
+const required = instance.getBoolean('Optional?', {
+    true: false,
+    false: true,
+});
+const loading = instance.getEnum('Variant', {
+    Loading: true,
+});
+const value = instance.getEnum('Value type', {
+    Filled: instance.getString('Value'),
+});
+export default {
+    id: 'combobox',
+    imports: [
+        'import { Combobox } from "@utilitywarehouse/hearth-react-native";',
+        'import { useState } from "react";',
+    ],
+    example: figma.code `function Example() {
+  const [value, setValue] = useState<string | null>(${value ? "'1'" : 'null'});
+
+  return (
+    <Combobox
+      label="${label}"
+      placeholder="${placeholder}"${figma.helpers.react.renderProp('validationStatus', validationStatus)}${figma.helpers.react.renderProp('invalidText', invalidText)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('required', required)}${figma.helpers.react.renderProp('loading', loading)}
+      options={[
+        { label: 'Option 1', value: '1' },
+        { label: 'Option 2', value: '2' },
+        { label: 'Option 3', value: '3' },
+      ]}
+      value={value}
+      onValueChange={setValue}
+    />
+  );
+}`,
+    metadata: {
+        nestable: true,
+        props: {
+            label,
+            placeholder,
+            validationStatus,
+            invalidText,
+            helperText,
+            required,
+            loading,
+            value,
+        },
+    },
+};

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

@@ -0,0 +1,31 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            valueType: string | undefined;
+            value: string;
+            label: string;
+            helperText: figma.EnumOptionsValues<{
+                true: string;
+                false: undefined;
+            }>;
+            invalidText: figma.EnumOptionsValues<{
+                Default: undefined;
+                Invalid: string;
+            }>;
+            validationStatus: figma.EnumOptionsValues<{
+                Default: undefined;
+                Invalid: string;
+            }>;
+            focused: boolean;
+            labelVariant: string | undefined;
+            placeholder: string | undefined;
+            displayValue: string | undefined;
+        };
+    };
+};
+export default _default;