@utilitywarehouse/hearth-react-native 0.35.7 → 0.35.9

package/build/components/Switch/Switch.web.js

@@ -67,7 +67,7 @@ const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = '
     const onPressOut = () => {
         scale.value = withSpring(1);
     };
-    return (_jsx(Pressable, { onPress: toggleSwitch, onPressIn: onPressIn, onPressOut: onPressOut, disabled: disabled, "aria-checked": value, accessibilityRole: "switch", accessibilityState: { checked: value, disabled }, accessibilityLabel: accessibilityProps.accessibilityLabel, accessibilityHint: accessibilityProps.accessibilityHint, ...accessibilityProps, children: _jsx(AnimatedView, { style: [styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle], children: _jsxs(AnimatedView, { style: [styles.thumb, animatedThumbStyle], children: [_jsx(AnimatedView, { style: [styles.iconWrap, animatedTickStyle], children: (() => {
+    return (_jsx(Pressable, { onPress: toggleSwitch, onPressIn: onPressIn, onPressOut: onPressOut, disabled: disabled, "aria-checked": value, accessibilityRole: "switch", accessibilityState: { checked: value, disabled }, accessibilityLabel: accessibilityProps.accessibilityLabel, accessibilityHint: accessibilityProps.accessibilityHint, style: styles.pressable, ...accessibilityProps, children: _jsx(AnimatedView, { style: [styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle], children: _jsxs(AnimatedView, { style: [styles.thumb, animatedThumbStyle], children: [_jsx(AnimatedView, { style: [styles.iconWrap, animatedTickStyle], children: (() => {
                             const IconAny = Icon;
                             return _jsx(IconAny, { as: TickSmallIcon, style: styles.icon });
                         })() }), _jsx(AnimatedView, { style: [styles.iconWrap, animatedCrossStyle], children: (() => {
@@ -76,6 +76,20 @@ const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = '
                         })() })] }) }) }));
 };
 const styles = StyleSheet.create(theme => ({
+    pressable: {
+        variants: {
+            disabled: {
+                false: {
+                    _web: {
+                        '_focus-visible': { outline: 'none' },
+                        '_focus-visible > div:nth-child(1)': {
+                            ...theme.helpers.focusVisible,
+                        },
+                    },
+                },
+            },
+        },
+    },
     switch: {
         justifyContent: 'center',
         variants: {
@@ -96,9 +110,19 @@ const styles = StyleSheet.create(theme => ({
             value: {
                 true: {
                     backgroundColor: theme.color.interactive.brand.surface.strong.default,
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.brand.surface.strong.hover,
+                        },
+                    },
                 },
                 false: {
                     backgroundColor: theme.color.interactive.functional.surface.strong.default,
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.functional.surface.strong.hover,
+                        },
+                    },
                 },
             },
             disabled: {

package/build/components/Table/Table.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: {
+            container: string | undefined;
+            pagination: boolean;
+        };
+    };
+};
+export default _default;

package/build/components/Table/Table.figma.js

@@ -0,0 +1,38 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6403-17515&t=pZwKJYFo1y1QRQD1-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Table/Table.tsx
+// component=Table
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const container = instance.getEnum('Container', {
+    Subtle: 'subtle',
+    Emphasis: 'emphasis',
+    None: 'none',
+});
+const pagination = instance.getBoolean('Pagination?');
+export default {
+    id: 'Table',
+    imports: [
+        "import { ExpandSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';",
+        "import { UnstyledIconButton, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow } from '@utilitywarehouse/hearth-react-native';",
+    ],
+    example: figma.code `<Table${figma.helpers.react.renderProp('container', container)}${figma.helpers.react.renderProp('pagination', pagination)}>
+      <TableHeader color="purple">
+        <TableHeaderCell trailingContent={<UnstyledIconButton accessibilityLabel="Sort" icon={ExpandSmallIcon} inverted size="sm" />}>
+          Header
+        </TableHeaderCell>
+        <TableHeaderCell trailingContent={<UnstyledIconButton accessibilityLabel="Sort" icon={ExpandSmallIcon} inverted size="sm" />}>
+          Header
+        </TableHeaderCell>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableHeaderCell row>Row title</TableHeaderCell>
+          <TableCell>Value</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>`,
+    metadata: {
+        nestable: true,
+        props: { container, pagination },
+    },
+};

package/build/components/Table/TableHeaderCell.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: {
+            sort: boolean;
+            color: string | undefined;
+            variant: string | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/Table/TableHeaderCell.figma.js

@@ -0,0 +1,31 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6414-6728&t=pZwKJYFo1y1QRQD1-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Table/TableHeaderCell.tsx
+// component=TableHeaderCell
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const sort = instance.getBoolean('Sort?');
+const color = instance.getEnum('Color', {
+    Purple: 'purple',
+    White: 'white',
+});
+const variant = instance.getEnum('Variant', {
+    Text: 'text',
+    Blank: 'blank',
+});
+const trailingContent = sort
+    ? figma.code `<UnstyledIconButton accessibilityLabel="Sort" icon={ExpandSmallIcon} size="sm" />`
+    : '';
+export default {
+    id: 'TableHeaderCell',
+    imports: [
+        "import { ExpandSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';",
+        "import { UnstyledIconButton, TableHeaderCell } from '@utilitywarehouse/hearth-react-native';",
+    ],
+    example: figma.code `<TableHeaderCell${figma.helpers.react.renderProp('color', color)}${trailingContent ? ` trailingContent={${trailingContent}}` : ''}>
+      Header
+    </TableHeaderCell>`,
+    metadata: {
+        nestable: true,
+        props: { sort, color, variant },
+    },
+};

package/build/components/Tabs/Tab.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;
+            icon: figma.ResultSection[] | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/Tabs/Tab.figma.js

@@ -0,0 +1,14 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6464-2288&m=dev
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Tabs/Tab.tsx
+// component=Tab
+import figma from 'figma';
+const label = figma.selectedInstance.getString('Label');
+const icon = figma.selectedInstance.getBoolean('Icon?', {
+    true: figma.selectedInstance.getInstanceSwap('Icon-20')?.executeTemplate().example,
+});
+export default {
+    id: 'Tab',
+    imports: ["import { Tab } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<Tab${figma.helpers.react.renderProp('value', label)}${figma.helpers.react.renderProp('icon', icon)}>${figma.helpers.react.renderChildren(label)}</Tab>`,
+    metadata: { nestable: true, props: { label, icon } },
+};

package/build/components/Tabs/Tab.js

@@ -22,7 +22,7 @@ const Tab = ({ value, children, icon, disabled, style, states, ...props }) => {
         registerTabLayout(value, { x, y, width, height });
     }, [value, registerTabLayout]);
     return (_jsx(Pressable, { ref: ref, accessibilityRole: "tab", accessibilityState: { selected: isActive, disabled: !!(disabled || allDisabled) }, onPress: handlePress, onLayout: handleLayout, style: [styles.tab, style], ...(Platform.OS === 'web'
-            ? { id: `tab-${value}`, 'aria-controls': `tabpanel-${value}` }
+            ? { id: `tab-${value}`, 'aria-controls': `tabpanel-${value}`, 'aria-selected': isActive }
             : null), ...props, children: _jsxs(View, { style: styles.content, children: [icon ? _jsx(Icon, { as: icon }) : null, _jsx(BodyText, { size: size, weight: "semibold", children: children })] }) }));
 };
 Tab.displayName = 'Tab';
@@ -38,11 +38,11 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
             },
-            // '_focus-visible': {
-            //   ...theme.helpers.focusVisible,
-            //   outlineOffset: -2,
-            //   borderRadius: theme.borderRadius.sm,
-            // },
+            '_focus-visible': {
+                ...theme.helpers.focusVisible,
+                outlineOffset: -2,
+                borderRadius: theme.borderRadius.sm,
+            },
             _active: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
             },

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

package/build/components/Tabs/Tabs.figma.js

@@ -0,0 +1,21 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6464%3A8744
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Tabs/Tabs.tsx
+// component=Tabs
+import figma from 'figma';
+const size = figma.selectedInstance.getEnum('Size', {
+    'MD-56': 'md',
+    'LG-64': 'lg',
+});
+const tabs = figma.properties.children(['Tab item']);
+export default {
+    id: 'Tabs',
+    imports: ["import { TabPanel, Tabs, TabsList } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<Tabs${figma.helpers.react.renderProp('size', size)}>
+      <TabsList>${figma.helpers.react.renderChildren(tabs)}</TabsList>
+      {/* Example TabPanel content, make sure they match the value of your Tab items */}
+      <TabPanel value="account">Account content</TabPanel>
+      <TabPanel value="billing">Billing content</TabPanel>
+      <TabPanel value="usage">Usage content</TabPanel>
+    </Tabs>`,
+    metadata: { nestable: true, props: { size, tabs } },
+};

package/build/components/Textarea/Textarea.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: {
+            disabled: boolean | undefined;
+            readonly: boolean | undefined;
+            placeholder: string | undefined;
+            value: string | undefined;
+            label: string;
+            labelVariant: string | undefined;
+            helperText: string;
+            validationStatus: string | undefined;
+            invalidText: string | undefined;
+            validText: string | undefined;
+            required: figma.EnumOptionsValues<{
+                true: boolean;
+                false: boolean;
+            }>;
+            focused: boolean | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/Textarea/Textarea.figma.js

@@ -0,0 +1,53 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2356:5180
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Textarea/Textarea.tsx
+// component=Textarea
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const disabled = instance.getEnum('State', { Disabled: true });
+const readonly = instance.getEnum('State', { 'Read-only': true });
+const placeholder = instance.getEnum('Value type', {
+    Placeholder: instance.getString('Value'),
+});
+const value = instance.getEnum('Value type', { Filled: instance.getString('Value') });
+const label = instance.getString('Label');
+const labelVariant = instance.getEnum('Label variant', { Body: 'body', Heading: 'heading' });
+const helperText = instance.getBoolean('Helper text?', {
+    true: instance.getString('Helper text'),
+});
+const validationStatus = instance.getEnum('State', {
+    Invalid: 'invalid',
+    Valid: 'valid',
+});
+const invalidText = instance.getEnum('State', {
+    Invalid: instance.getString('Validation'),
+});
+const validText = instance.getEnum('State', {
+    Valid: instance.getString('Validation'),
+});
+const required = instance.getBoolean('Optional?', {
+    true: false,
+    false: true,
+});
+const focused = instance.getEnum('Focus?', { True: true });
+export default {
+    id: 'textarea',
+    imports: ['import { Textarea } from "@utilitywarehouse/hearth-react-native";'],
+    example: figma.code `<Textarea${figma.helpers.react.renderProp('disabled', disabled)}${figma.helpers.react.renderProp('readonly', readonly)}${figma.helpers.react.renderProp('placeholder', placeholder)}${figma.helpers.react.renderProp('value', value)}${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('labelVariant', labelVariant)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('validationStatus', validationStatus)}${figma.helpers.react.renderProp('invalidText', invalidText)}${figma.helpers.react.renderProp('validText', validText)}${figma.helpers.react.renderProp('required', required)}${figma.helpers.react.renderProp('focused', focused)} />`,
+    metadata: {
+        nestable: true,
+        props: {
+            disabled,
+            readonly,
+            placeholder,
+            value,
+            label,
+            labelVariant,
+            helperText,
+            validationStatus,
+            invalidText,
+            validText,
+            required,
+            focused,
+        },
+    },
+};

package/build/components/TimePicker/TimePicker.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: {
+            hideFooter: figma.EnumOptionsValues<{
+                true: boolean;
+                false: boolean;
+            }>;
+        };
+    };
+};
+export default _default;

package/build/components/TimePicker/TimePicker.figma.js

@@ -0,0 +1,30 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10334-16770&t=Jg2fPJPQNzOyspmQ-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/TimePicker/TimePicker.tsx
+// component=TimePicker
+import figma from 'figma';
+const hideFooter = figma.selectedInstance.getBoolean('Footer?', {
+    true: false,
+    false: true,
+});
+export default {
+    id: 'time-picker',
+    imports: [
+        "import { useRef, useState } from 'react';",
+        "import { BottomSheetModalProvider, Button, TimePicker } from '@utilitywarehouse/hearth-react-native';",
+        "import type { DateType } from '@utilitywarehouse/hearth-react-native';",
+    ],
+    example: figma.code `const pickerRef = useRef(null);
+const [time, setTime] = useState<DateType>();
+
+<BottomSheetModalProvider>
+  <Button onPress={() => pickerRef.current?.present()}>Choose time</Button>
+  <TimePicker
+    ref={pickerRef}
+    date={time}
+    onChange={({ date }) => setTime(date)}
+    onCancel={() => setTime(undefined)}
+    use12Hours={false}${figma.helpers.react.renderProp('hideFooter', hideFooter)}
+  />
+</BottomSheetModalProvider>`,
+    metadata: { nestable: true, props: { hideFooter } },
+};

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

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

package/build/components/TimePickerInput/TimePickerInput.figma.js

@@ -0,0 +1,53 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10334-6212&t=Jg2fPJPQNzOyspmQ-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/TimePickerInput/TimePickerInput.tsx
+// component=TimePickerInput
+import figma from 'figma';
+const disabled = figma.selectedInstance.getEnum('Variant', {
+    Disabled: true,
+});
+const validationStatus = figma.selectedInstance.getEnum('Variant', {
+    Default: undefined,
+    Valid: 'valid',
+    Invalid: 'invalid',
+});
+const readonly = figma.selectedInstance.getEnum('Variant', {
+    'Read-only': true,
+});
+const label = figma.selectedInstance.getString('Label');
+const validText = figma.selectedInstance.getEnum('Variant', {
+    Valid: figma.selectedInstance.getString('Validation'),
+});
+const invalidText = figma.selectedInstance.getEnum('Variant', {
+    Invalid: figma.selectedInstance.getString('Validation'),
+});
+const placeholder = figma.selectedInstance.getEnum('Value type', {
+    Placeholder: figma.selectedInstance.getString('Value'),
+});
+const value = figma.selectedInstance.getEnum('Value type', {
+    Filled: figma.selectedInstance.getString('Value'),
+});
+const helperText = figma.selectedInstance.getBoolean('Helper text?', {
+    true: figma.selectedInstance.getString('Helper text'),
+    false: undefined,
+});
+const focused = figma.selectedInstance.getEnum('Focus?', { Yes: true });
+export default {
+    id: 'TimePickerInput',
+    imports: ["import { TimePickerInput } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<TimePickerInput${figma.helpers.react.renderProp('disabled', disabled)}${figma.helpers.react.renderProp('validationStatus', validationStatus)}${figma.helpers.react.renderProp('readonly', readonly)}${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('validText', validText)}${figma.helpers.react.renderProp('invalidText', invalidText)}${figma.helpers.react.renderProp('placeholder', placeholder)}${figma.helpers.react.renderProp('value', value)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('focused', focused)}/>`,
+    metadata: {
+        nestable: true,
+        props: {
+            disabled,
+            validationStatus,
+            readonly,
+            label,
+            validText,
+            invalidText,
+            placeholder,
+            value,
+            helperText,
+            focused,
+        },
+    },
+};

package/build/components/Timeline/Timeline.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;
+            items: figma.ResultSection[][];
+        };
+    };
+};
+export default _default;

package/build/components/Timeline/Timeline.figma.js

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10592-5483&t=pZwKJYFo1y1QRQD1-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Timeline/Timeline.tsx
+// component=Timeline
+import figma from 'figma';
+const variant = figma.selectedInstance.getEnum('Variant', {
+    Progress: 'progress',
+    Static: 'static',
+});
+const itemLayers = figma.selectedInstance
+    .findLayers(n => n.type === 'INSTANCE')
+    .filter((layer) => layer.type === 'INSTANCE');
+const items = itemLayers
+    .filter(layer => layer.hasCodeConnect())
+    .map(layer => layer.executeTemplate().example);
+export default {
+    id: 'Timeline',
+    imports: ['import { Timeline } from "@utilitywarehouse/hearth-react-native";'],
+    example: figma.code `<Timeline${figma.helpers.react.renderProp('variant', variant)}>${figma.helpers.react.renderChildren(items.flat())}</Timeline>`,
+    metadata: {
+        nestable: true,
+        props: { variant, items },
+    },
+};

package/build/components/Timeline/TimelineItemProgress.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: {
+            label: string;
+            helperText: string;
+            state: string | undefined;
+            customContent: figma.ResultSection[][];
+        };
+    };
+};
+export default _default;

package/build/components/Timeline/TimelineItemProgress.figma.js

@@ -0,0 +1,30 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10562-2810&t=pZwKJYFo1y1QRQD1-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Timeline/TimelineItem.tsx
+// component=TimelineItem
+import figma from 'figma';
+const label = figma.selectedInstance.getString('Label');
+const helperText = figma.selectedInstance.getBoolean('Helper text?', {
+    true: figma.selectedInstance.getString('Helper text'),
+});
+const state = figma.selectedInstance.getEnum('State', {
+    Complete: 'complete',
+    Active: 'active',
+    Incomplete: 'incomplete',
+});
+const slot = figma.selectedInstance.getSlot('Slot');
+const customContentInstance = figma.selectedInstance.getBoolean('Custom content?', {
+    true: figma.selectedInstance.getInstanceSwap('Custom content')?.executeTemplate().example,
+});
+const customContent = [
+    ...(slot?.connectedInstances.map(i => i.executeTemplate().example) ?? []),
+    ...(customContentInstance ? [customContentInstance] : []),
+];
+export default {
+    id: 'TimelineItem',
+    imports: ['import { TimelineItem } from "@utilitywarehouse/hearth-react-native";'],
+    example: figma.code `<TimelineItem variant="progress" position="middle"${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('state', state)}>${figma.helpers.react.renderChildren(customContent.flat())}</TimelineItem>`,
+    metadata: {
+        nestable: true,
+        props: { label, helperText, state, customContent },
+    },
+};

package/build/components/Timeline/TimelineItemStatic.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: {
+            label: string;
+            helperText: string;
+            position: string | undefined;
+            customContent: figma.ResultSection[][];
+        };
+    };
+};
+export default _default;

package/build/components/Timeline/TimelineItemStatic.figma.js

@@ -0,0 +1,30 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10592-5189&t=pZwKJYFo1y1QRQD1-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Timeline/TimelineItem.tsx
+// component=TimelineItem
+import figma from 'figma';
+const label = figma.selectedInstance.getString('Label');
+const helperText = figma.selectedInstance.getBoolean('Helper text?', {
+    true: figma.selectedInstance.getString('Helper text'),
+});
+const position = figma.selectedInstance.getEnum('Variant', {
+    Start: 'start',
+    Middle: 'middle',
+    End: 'end',
+});
+const slot = figma.selectedInstance.getSlot('Slot');
+const customContentInstance = figma.selectedInstance.getBoolean('Custom content?', {
+    true: figma.selectedInstance.getInstanceSwap('Custom content')?.executeTemplate().example,
+});
+const customContent = [
+    ...(slot?.connectedInstances.map(i => i.executeTemplate().example) ?? []),
+    ...(customContentInstance ? [customContentInstance] : []),
+];
+export default {
+    id: 'TimelineItem',
+    imports: ['import { TimelineItem } from "@utilitywarehouse/hearth-react-native";'],
+    example: figma.code `<TimelineItem variant="static"${figma.helpers.react.renderProp('position', position)}${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('helperText', helperText)}>${figma.helpers.react.renderChildren(customContent.flat())}</TimelineItem>`,
+    metadata: {
+        nestable: true,
+        props: { label, helperText, position, customContent },
+    },
+};

package/build/components/Toast/ToastItem.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: {
+            text: string;
+            hasIcon: boolean;
+            icon: figma.EnumOptionsValues<{
+                true: figma.ResultSection[] | undefined;
+                false: string;
+            }>;
+            hasLink: boolean;
+            hasDismiss: boolean;
+        };
+    };
+};
+export default _default;