@utilitywarehouse/hearth-react-native 0.35.7 → 0.35.9

package/build/components/RadioCard/RadioCard.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: {
+            radio: {
+                label: string | undefined;
+            };
+            content: figma.ResultSection[][];
+        };
+    };
+};
+export default _default;

package/build/components/RadioCard/RadioCard.figma.js

@@ -0,0 +1,22 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2164-727&t=Uq6QfQcygdNGv5lM-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/RadioCard/RadioCard.tsx
+// component=RadioCard
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const radio = (function () {
+    const nestedLayer0 = instance.findText('Label');
+    return {
+        label: nestedLayer0.type !== 'ERROR' ? nestedLayer0.textContent : undefined,
+    };
+})();
+const contentSlot = instance.getSlot('Content');
+const content = contentSlot?.connectedInstances.map(item => item.executeTemplate().example) ?? [];
+export default {
+    id: 'RadioCard',
+    imports: ["import { RadioCard } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `// This should be wrapped in a RadioCardGroup, see docs
+<RadioCard${figma.helpers.react.renderProp('label', radio.label)} value="someValue">
+  ${figma.helpers.react.renderChildren(content.flat())}
+</RadioCard>`,
+    metadata: { nestable: true, props: { radio, content } },
+};

package/build/components/RadioCard/RadioCardIndicator.js

@@ -30,9 +30,6 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 outlineColor: theme.components.radio.outlineColorHover,
             },
-            // '_focus-within': {
-            //   ...theme.helpers.focusVisible,
-            // },
             _active: {
                 outlineColor: theme.components.radio.outlineColorActive,
             },

package/build/components/RadioCard/RadioCardRoot.js

@@ -59,9 +59,9 @@ const styles = StyleSheet.create(theme => ({
             },
         },
         _web: {
-        // '_focus-visible': {
-        //   ...theme.helpers.focusVisible,
-        // },
+            '_focus-visible': {
+                ...theme.helpers.focusVisible,
+            },
         },
     },
 }));

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

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

package/build/components/Rating/Rating.figma.js

@@ -0,0 +1,18 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10620-4185
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Rating/Rating.tsx
+// component=Rating
+import figma from 'figma';
+const value = figma.selectedInstance.getEnum('Rating', {
+    '0 Star': 0,
+    '1 Star': 1,
+    '2 Star': 2,
+    '3 Star': 3,
+    '4 Star': 4,
+    '5 Star': 5,
+});
+export default {
+    id: 'rating',
+    imports: ["import { Rating } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<Rating${figma.helpers.react.renderProp('value', value)} />`,
+    metadata: { props: { value } },
+};

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/SegmentedControl/SegmentedControlOption.js

@@ -51,6 +51,9 @@ const styles = StyleSheet.create(theme => ({
         alignItems: 'center',
         backgroundColor: 'transparent',
         zIndex: 1,
+        _web: {
+            '_focus-visible': theme.helpers.focusVisible,
+        },
         variants: {
             size: {
                 sm: {

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/Switch/Switch.js

@@ -68,7 +68,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(Animated.View, { style: [styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle], children: _jsxs(Animated.View, { style: [styles.thumb, animatedThumbStyle], children: [_jsx(Animated.View, { 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(Animated.View, { style: [styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle], children: _jsxs(Animated.View, { style: [styles.thumb, animatedThumbStyle], children: [_jsx(Animated.View, { style: [styles.iconWrap, animatedTickStyle], children: (() => {
                             const IconAny = Icon;
                             return _jsx(IconAny, { as: TickSmallIcon, style: styles.icon });
                         })() }), _jsx(Animated.View, { style: [styles.iconWrap, animatedCrossStyle], children: (() => {
@@ -77,6 +77,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: {
@@ -97,9 +111,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: {