@utilitywarehouse/hearth-react-native 0.35.6 → 0.35.8

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

@@ -0,0 +1,15 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6414%3A8697&m=dev
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Roundel/Roundel.tsx
+// component=Roundel
+import figma from 'figma';
+const variant = figma.selectedInstance.getEnum('Variant', {
+    Success: 'success',
+    Pending: 'pending',
+    Error: 'error',
+});
+export default {
+    id: 'Roundel',
+    imports: ["import { Roundel } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<Roundel${figma.helpers.react.renderProp('variant', variant)} />`,
+    metadata: { nestable: true, props: { variant } },
+};

package/build/components/SectionHeader/SectionHeader.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: {
+            state: string | undefined;
+            heading: string;
+            helperTextVisible: boolean;
+            helperText: string | undefined;
+            badgeVisible: boolean;
+            badge: figma.ResultSection[] | undefined;
+            trailingContentVisible: boolean;
+            trailingContent: figma.ResultSection[] | undefined;
+            invalidText: string | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/SectionHeader/SectionHeader.figma.js

@@ -0,0 +1,50 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=9092%3A3352
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/SectionHeader/SectionHeader.tsx
+// component=SectionHeader
+import figma from 'figma';
+const state = figma.selectedInstance.getEnum('State', {
+    Invalid: 'invalid',
+    Default: 'default',
+});
+const heading = figma.selectedInstance.getString('Heading');
+const helperTextVisible = figma.selectedInstance.getBoolean('Helper text?');
+const helperText = helperTextVisible ? figma.selectedInstance.getString('Helper text') : undefined;
+const badgeVisible = figma.selectedInstance.getBoolean('Badge?');
+const badge = badgeVisible
+    ? figma.selectedInstance.findInstance('Badge')?.executeTemplate().example
+    : undefined;
+const trailingContentVisible = figma.selectedInstance.getBoolean('Trailing content?');
+const trailingContent = trailingContentVisible
+    ? (() => {
+        const trailingContentInstance = figma.selectedInstance.findInstance('Trailing content');
+        const link = trailingContentInstance.type === 'INSTANCE'
+            ? trailingContentInstance.findInstance('Link')
+            : undefined;
+        return link?.executeTemplate().example;
+    })()
+    : undefined;
+const invalidText = state === 'invalid'
+    ? (() => {
+        const validationText = figma.selectedInstance.findInstance('Validation Text');
+        return validationText.type === 'INSTANCE' ? validationText.getString('Text') : undefined;
+    })()
+    : undefined;
+export default {
+    id: 'section-header',
+    imports: ["import { SectionHeader } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<SectionHeader${figma.helpers.react.renderProp('heading', heading)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('badge', badge)}${figma.helpers.react.renderProp('trailingContent', trailingContent)}${figma.helpers.react.renderProp('invalidText', invalidText)}/>`,
+    metadata: {
+        nestable: true,
+        props: {
+            state,
+            heading,
+            helperTextVisible,
+            helperText,
+            badgeVisible,
+            badge,
+            trailingContentVisible,
+            trailingContent,
+            invalidText,
+        },
+    },
+};

package/build/components/SegmentedControl/SegmentedControl.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;
+            option0: figma.ResultSection[] | undefined;
+            option1: figma.ResultSection[] | undefined;
+            option2: figma.ResultSection[] | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/SegmentedControl/SegmentedControl.figma.js

@@ -0,0 +1,20 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6185-1021&m=dev
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/SegmentedControl/SegmentedControl.tsx
+// component=SegmentedControl
+import figma from 'figma';
+const size = figma.selectedInstance.getEnum('Size', {
+    'SM-32': 'sm',
+    'MD-48': 'md',
+});
+const optionLayers = figma.selectedInstance.findLayers(n => n.type === 'INSTANCE');
+const option0 = optionLayers[0]?.type === 'INSTANCE' ? optionLayers[0].executeTemplate().example : undefined;
+const option1 = optionLayers[1]?.type === 'INSTANCE' ? optionLayers[1].executeTemplate().example : undefined;
+const option2 = optionLayers[2]?.type === 'INSTANCE' ? optionLayers[2].executeTemplate().example : undefined;
+export default {
+    id: 'segmented-control',
+    imports: ["import { SegmentedControl } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<SegmentedControl defaultValue="option-1"${figma.helpers.react.renderProp('size', size)}>
+        ${option0}${option1}${option2}
+      </SegmentedControl>`,
+    metadata: { nestable: true, props: { size, option0, option1, option2 } },
+};

package/build/components/SegmentedControl/SegmentedControlOption.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: {
+            label: string;
+            icon: {
+                $value: string;
+                $type: "react-component";
+            } | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/SegmentedControl/SegmentedControlOption.figma.js

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

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

@@ -0,0 +1,24 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            label: string;
+            labelVariant: string | undefined;
+            variant: string | undefined;
+            disabled: boolean | undefined;
+            validationStatus: string | undefined;
+            invalidText: string | undefined;
+            validText: string | undefined;
+            helperText: string;
+            required: boolean;
+            valueType: string | undefined;
+            placeholder: string | undefined;
+            value: string | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/Select/Select.figma.js

@@ -0,0 +1,65 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3224%3A995
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Select/Select.tsx
+// component=Select
+import figma from 'figma';
+const label = figma.selectedInstance.getString('Label');
+const labelVariant = figma.selectedInstance.getEnum('Label variant', {
+    Body: 'body',
+    Heading: 'heading',
+});
+const variant = figma.selectedInstance.getEnum('Variant', {
+    Disabled: 'disabled',
+    Invalid: 'invalid',
+    Valid: 'valid',
+    Default: 'default',
+    'Read-only': 'readonly',
+});
+const disabled = variant === 'disabled' ? true : undefined;
+const validationStatus = variant === 'invalid' ? 'invalid' : variant === 'valid' ? 'valid' : undefined;
+const invalidText = variant === 'invalid' ? figma.selectedInstance.getString('Validation') : undefined;
+const validText = variant === 'valid' ? figma.selectedInstance.getString('Validation') : undefined;
+const helperText = figma.selectedInstance.getBoolean('Helper text?', {
+    true: figma.selectedInstance.getString('Helper text'),
+});
+const required = !figma.selectedInstance.getBoolean('Optional?', {
+    true: false,
+});
+const valueType = figma.selectedInstance.getEnum('Value type', {
+    Placeholder: 'placeholder',
+    Selected: 'selected',
+    Empty: 'empty',
+});
+const placeholder = valueType === 'placeholder' ? figma.selectedInstance.getString('Value') : undefined;
+const value = valueType === 'selected' ? figma.selectedInstance.getString('Value') : undefined;
+export default {
+    id: 'Select',
+    imports: [
+        "import { Select } from '@utilitywarehouse/hearth-react-native';",
+        "import { useState } from 'react';",
+    ],
+    example: figma.code `function Example() {
+    const [value, setValue] = useState(null);
+    return (<Select${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('labelVariant', labelVariant)}${figma.helpers.react.renderProp('placeholder', placeholder)}${figma.helpers.react.renderProp('disabled', disabled)}${figma.helpers.react.renderProp('validationStatus', validationStatus)}${figma.helpers.react.renderProp('invalidText', invalidText)}${figma.helpers.react.renderProp('validText', validText)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('required', required)} options={[
+            { label: 'Option 1', value: '1' },
+            { label: 'Option 2', value: '2' },
+            { label: 'Option 3', value: '3' },
+        ]} value={value} onValueChange={value => setValue(value)}/>);
+}`,
+    metadata: {
+        nestable: false,
+        props: {
+            label,
+            labelVariant,
+            variant,
+            disabled,
+            validationStatus,
+            invalidText,
+            validText,
+            helperText,
+            required,
+            valueType,
+            placeholder,
+            value,
+        },
+    },
+};

package/build/components/Select/SelectOption.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: {
+            label: string;
+            disabled: boolean | undefined;
+            selected: boolean;
+        };
+    };
+};
+export default _default;

package/build/components/Select/SelectOption.figma.js

@@ -0,0 +1,27 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3394-3663&m=dev
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Select/SelectOption.tsx
+// component=SelectOption
+import figma from 'figma';
+const label = figma.selectedInstance.getString('Text');
+const disabled = figma.selectedInstance.getEnum('State', {
+    Disabled: true,
+});
+const rawSelected = figma.selectedInstance.getBoolean('Selected?#3481:0');
+// getBoolean() can resolve to a non-boolean sentinel when the property can't be cleanly
+// matched (this node has a duplicate "Selected?" property disambiguated by id) — always fall
+// back to a real boolean rather than pass that sentinel through to renderProp, which renders
+// it as broken, unparseable syntax.
+const selected = typeof rawSelected === 'boolean' ? rawSelected : false;
+export default {
+    id: 'SelectOption',
+    imports: ["import { SelectOption } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<SelectOption${figma.helpers.react.renderProp('label', label)} value="some value"${figma.helpers.react.renderProp('disabled', disabled)}${figma.helpers.react.renderProp('selected', selected)}/>`,
+    metadata: {
+        nestable: true,
+        props: {
+            label,
+            disabled,
+            selected,
+        },
+    },
+};

package/build/components/Spinner/Spinner.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: {
+            size: string | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/Spinner/Spinner.figma.js

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=61%3A195
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Spinner/Spinner.tsx
+// component=Spinner
+import figma from 'figma';
+const size = figma.selectedInstance.getEnum('Size', {
+    'XS-20': 'xs',
+    'SM-24': 'sm',
+    'MD-32': 'md',
+    'LG-44': 'lg',
+});
+export default {
+    id: 'Spinner',
+    imports: ["import { Spinner } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<Spinner${figma.helpers.react.renderProp('size', size)}/>`,
+    metadata: { nestable: true, props: { size } },
+};

package/build/components/Spinner/Spinner.js

@@ -50,7 +50,7 @@ const SpinnerRoot = ({ size = 'md', color, ...props }) => {
     [color, colorMode, themeColor]);
     const defaultColor = colorValue || components.spinner.defaultFill;
     styles.useVariants({ size });
-    return (_jsx(View, { ...props, style: [styles.container, props.style], "aria-busy": true, "aria-live": "polite", role: "status", children: _jsx(AnimatedSvg, { width: width, height: width, viewBox: `0 0 ${DIAMETER} ${DIAMETER}`, style: animatedSvgStyle, color: defaultColor, children: _jsx(G, { origin: `${HALF_CIRCLE}, ${HALF_CIRCLE}`, rotation: -90, children: _jsx(AnimatedCircle, { fill: "transparent", stroke: "currentColor", strokeWidth: STROKE_WIDTH, cx: "50%", cy: "50%", r: R, strokeLinecap: "round", animatedProps: animatedCircleProps, strokeDasharray: CIRCUMFERENCE }) }) }) }));
+    return (_jsx(View, { ...props, "aria-label": props['aria-label'] ?? props.accessibilityLabel ?? 'loading', accessibilityLabel: props.accessibilityLabel ?? props['aria-label'] ?? 'loading', style: [styles.container, props.style], "aria-busy": true, "aria-live": "polite", role: "status", tabIndex: props.tabIndex ?? 0, children: _jsx(AnimatedSvg, { width: width, height: width, viewBox: `0 0 ${DIAMETER} ${DIAMETER}`, style: animatedSvgStyle, color: defaultColor, children: _jsx(G, { origin: `${HALF_CIRCLE}, ${HALF_CIRCLE}`, rotation: -90, children: _jsx(AnimatedCircle, { fill: "transparent", stroke: "currentColor", strokeWidth: STROKE_WIDTH, cx: "50%", cy: "50%", r: R, strokeLinecap: "round", animatedProps: animatedCircleProps, strokeDasharray: CIRCUMFERENCE }) }) }) }));
 };
 SpinnerRoot.displayName = 'Spinner';
 const styles = StyleSheet.create(theme => ({

package/build/components/Spinner/Spinner.web.js

@@ -47,7 +47,7 @@ const SpinnerRoot = ({ size = 'md', color, ...props }) => {
     const colorValue = useMemo(() => getFlattenedColorValue(color, themeColor), [color, colorMode, themeColor]);
     const defaultColor = colorValue || components.spinner.defaultFill;
     styles.useVariants({ size });
-    return (_jsx(View, { ...props, style: [styles.container, props.style], "aria-busy": true, "aria-live": "polite", role: "status", children: _jsx(AnimatedSvg, { width: width, height: width, viewBox: `0 0 ${DIAMETER} ${DIAMETER}`, animatedProps: animatedSvgProps, color: defaultColor, children: _jsx(G, { origin: `${HALF_CIRCLE}, ${HALF_CIRCLE}`, rotation: -90, children: _jsx(AnimatedCircle, { fill: "transparent", stroke: "currentColor", strokeWidth: STROKE_WIDTH, cx: "50%", cy: "50%", r: R, strokeLinecap: "round", animatedProps: animatedCircleProps, strokeDasharray: CIRCUMFERENCE }) }) }) }));
+    return (_jsx(View, { ...props, "aria-label": props['aria-label'] ?? props.accessibilityLabel ?? 'loading', accessibilityLabel: props.accessibilityLabel ?? props['aria-label'] ?? 'loading', style: [styles.container, props.style], "aria-busy": true, "aria-live": "polite", role: "status", tabIndex: props.tabIndex ?? 0, children: _jsx(AnimatedSvg, { width: width, height: width, viewBox: `0 0 ${DIAMETER} ${DIAMETER}`, animatedProps: animatedSvgProps, color: defaultColor, children: _jsx(G, { origin: `${HALF_CIRCLE}, ${HALF_CIRCLE}`, rotation: -90, children: _jsx(AnimatedCircle, { fill: "transparent", stroke: "currentColor", strokeWidth: STROKE_WIDTH, cx: "50%", cy: "50%", r: R, strokeLinecap: "round", animatedProps: animatedCircleProps, strokeDasharray: CIRCUMFERENCE }) }) }) }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

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

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

package/build/components/StepperInput/StepperInput.figma.js

@@ -0,0 +1,32 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10612%3A1860&m=dev
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/StepperInput/StepperInput.tsx
+// component=StepperInput
+import figma from 'figma';
+const value = figma.selectedInstance.getString('Value');
+const label = figma.selectedInstance.getString('Label');
+const labelVariant = figma.selectedInstance.getEnum('Label variant', {
+    Body: 'body',
+    Heading: 'heading',
+});
+const helperText = figma.selectedInstance.getBoolean('Helper text?', {
+    true: figma.selectedInstance.getString('Helper text'),
+    false: undefined,
+});
+const validationStatus = figma.selectedInstance.getEnum('State', {
+    Default: 'initial',
+    Invalid: 'invalid',
+});
+const invalidText = figma.selectedInstance.getEnum('State', {
+    Default: undefined,
+    Invalid: figma.selectedInstance.getString('Validation'),
+});
+const focused = figma.selectedInstance.getEnum('Focus?', { True: true });
+export default {
+    id: 'StepperInput',
+    imports: ["import { StepperInput } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<StepperInput${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('focused', focused)} onChangeText={() => {}}/>`,
+    metadata: {
+        nestable: true,
+        props: { value, label, labelVariant, helperText, validationStatus, invalidText, focused },
+    },
+};

package/build/components/Switch/Switch.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: {
+            disabled: boolean | undefined;
+            checked: boolean;
+            size: string | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/Switch/Switch.figma.js

@@ -0,0 +1,18 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3044%3A243
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Switch/Switch.tsx
+// component=Switch
+import figma from 'figma';
+const disabled = figma.selectedInstance.getEnum('State', {
+    Disabled: true,
+});
+const checked = figma.selectedInstance.getBoolean('Checked?');
+const size = figma.selectedInstance.getEnum('Size', {
+    'MD-32': 'md',
+    'SM-24': 'sm',
+});
+export default {
+    id: 'switch',
+    imports: ["import { Switch } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<Switch${figma.helpers.react.renderProp('value', checked)}${figma.helpers.react.renderProp('disabled', disabled)}${figma.helpers.react.renderProp('size', size)}/>`,
+    metadata: { nestable: true, props: { disabled, checked, size } },
+};

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';

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;