@utilitywarehouse/hearth-react-native 0.35.6 → 0.35.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (187) hide show
  1. package/SKILL.md +129 -3
  2. package/build/components/Accordion/Accordion.figma.d.ts +15 -0
  3. package/build/components/Accordion/Accordion.figma.js +20 -0
  4. package/build/components/Accordion/AccordionItem.figma.d.ts +17 -0
  5. package/build/components/Accordion/AccordionItem.figma.js +26 -0
  6. package/build/components/Alert/Alert.figma.d.ts +33 -0
  7. package/build/components/Alert/Alert.figma.js +40 -0
  8. package/build/components/Avatar/Avatar.figma.d.ts +16 -0
  9. package/build/components/Avatar/Avatar.figma.js +29 -0
  10. package/build/components/Badge/Badge.figma.d.ts +21 -0
  11. package/build/components/Badge/Badge.figma.js +47 -0
  12. package/build/components/Banner/Banner.figma.d.ts +26 -0
  13. package/build/components/Banner/Banner.figma.js +47 -0
  14. package/build/components/Banner/BannerIllustration.figma.d.ts +11 -0
  15. package/build/components/Banner/BannerIllustration.figma.js +13 -0
  16. package/build/components/BottomSheet/BottomSheetModal.figma.d.ts +11 -0
  17. package/build/components/BottomSheet/BottomSheetModal.figma.js +11 -0
  18. package/build/components/Button/Button.figma.d.ts +38 -0
  19. package/build/components/Button/Button.figma.js +84 -0
  20. package/build/components/Card/Card.figma.d.ts +16 -0
  21. package/build/components/Card/Card.figma.js +49 -0
  22. package/build/components/Card/CardAction/CardAction.figma.d.ts +35 -0
  23. package/build/components/Card/CardAction/CardAction.figma.js +104 -0
  24. package/build/components/Carousel/Carousel.figma.d.ts +17 -0
  25. package/build/components/Carousel/Carousel.figma.js +18 -0
  26. package/build/components/Checkbox/Checkbox.figma.d.ts +22 -0
  27. package/build/components/Checkbox/Checkbox.figma.js +29 -0
  28. package/build/components/Checkbox/CheckboxGroup.figma.d.ts +26 -0
  29. package/build/components/Checkbox/CheckboxGroup.figma.js +46 -0
  30. package/build/components/Checkbox/CheckboxImage.figma.d.ts +11 -0
  31. package/build/components/Checkbox/CheckboxImage.figma.js +10 -0
  32. package/build/components/Checkbox/CheckboxTileRoot.figma.d.ts +20 -0
  33. package/build/components/Checkbox/CheckboxTileRoot.figma.js +22 -0
  34. package/build/components/Combobox/Combobox.figma.d.ts +23 -0
  35. package/build/components/Combobox/Combobox.figma.js +69 -0
  36. package/build/components/CurrencyInput/CurrencyInput.figma.d.ts +31 -0
  37. package/build/components/CurrencyInput/CurrencyInput.figma.js +51 -0
  38. package/build/components/DateInput/DateInput.figma.d.ts +41 -0
  39. package/build/components/DateInput/DateInput.figma.js +87 -0
  40. package/build/components/DatePicker/DatePicker.figma.d.ts +25 -0
  41. package/build/components/DatePicker/DatePicker.figma.js +23 -0
  42. package/build/components/DatePickerInput/DatePickerInput.figma.d.ts +25 -0
  43. package/build/components/DatePickerInput/DatePickerInput.figma.js +52 -0
  44. package/build/components/DescriptionList/DescriptionList.figma.d.ts +26 -0
  45. package/build/components/DescriptionList/DescriptionList.figma.js +59 -0
  46. package/build/components/DescriptionList/DescriptionListItem.figma.d.ts +22 -0
  47. package/build/components/DescriptionList/DescriptionListItem.figma.js +42 -0
  48. package/build/components/Divider/Divider.figma.d.ts +13 -0
  49. package/build/components/Divider/Divider.figma.js +14 -0
  50. package/build/components/ExpandableCard/ExpandableCard.figma.d.ts +28 -0
  51. package/build/components/ExpandableCard/ExpandableCard.figma.js +52 -0
  52. package/build/components/ExpandableCard/ExpandableCardGroup.figma.d.ts +23 -0
  53. package/build/components/ExpandableCard/ExpandableCardGroup.figma.js +55 -0
  54. package/build/components/Flex/Flex.props.d.ts +2 -2
  55. package/build/components/FormField/FormField.figma.d.ts +15 -0
  56. package/build/components/FormField/FormField.figma.js +27 -0
  57. package/build/components/Helper/HelperText.figma.d.ts +13 -0
  58. package/build/components/Helper/HelperText.figma.js +12 -0
  59. package/build/components/HighlightBanner/HighlightBanner.figma.d.ts +19 -0
  60. package/build/components/HighlightBanner/HighlightBanner.figma.js +45 -0
  61. package/build/components/IconButton/IconButton.figma.d.ts +22 -0
  62. package/build/components/IconButton/IconButton.figma.js +47 -0
  63. package/build/components/IconContainer/IconContainer.figma.d.ts +20 -0
  64. package/build/components/IconContainer/IconContainer.figma.js +43 -0
  65. package/build/components/IndicatorIconButton/IndicatorIconButton.figma.d.ts +17 -0
  66. package/build/components/IndicatorIconButton/IndicatorIconButton.figma.js +23 -0
  67. package/build/components/InlineLink/InlineLink.d.ts +1 -1
  68. package/build/components/InlineLink/InlineLink.js +7 -2
  69. package/build/components/InlineLink/InlineLink.props.d.ts +2 -0
  70. package/build/components/InlineLink/InlineLinkRoot.d.ts +1 -1
  71. package/build/components/InlineLink/InlineLinkRoot.js +8 -3
  72. package/build/components/Input/Input.figma.d.ts +28 -0
  73. package/build/components/Input/Input.figma.js +67 -0
  74. package/build/components/Input/Input_1.figma.d.ts +22 -0
  75. package/build/components/Input/Input_1.figma.js +54 -0
  76. package/build/components/Input/Input_2.figma.d.ts +17 -0
  77. package/build/components/Input/Input_2.figma.js +34 -0
  78. package/build/components/Label/Label.figma.d.ts +14 -0
  79. package/build/components/Label/Label.figma.js +19 -0
  80. package/build/components/Link/Link.d.ts +1 -1
  81. package/build/components/Link/Link.figma.d.ts +27 -0
  82. package/build/components/Link/Link.figma.js +45 -0
  83. package/build/components/Link/Link.js +7 -2
  84. package/build/components/Link/Link.props.d.ts +2 -0
  85. package/build/components/Link/LinkRoot.d.ts +1 -1
  86. package/build/components/Link/LinkRoot.js +8 -3
  87. package/build/components/List/List.figma.d.ts +21 -0
  88. package/build/components/List/List.figma.js +49 -0
  89. package/build/components/List/ListAction/ListAction.figma.d.ts +15 -0
  90. package/build/components/List/ListAction/ListAction.figma.js +17 -0
  91. package/build/components/List/ListItem/ListItem.figma.d.ts +33 -0
  92. package/build/components/List/ListItem/ListItem.figma.js +83 -0
  93. package/build/components/List/ListItem/ListItemLeadingContent.figma.d.ts +14 -0
  94. package/build/components/List/ListItem/ListItemLeadingContent.figma.js +17 -0
  95. package/build/components/List/ListItem/ListItemTrailingContent.figma.d.ts +13 -0
  96. package/build/components/List/ListItem/ListItemTrailingContent.figma.js +14 -0
  97. package/build/components/Menu/Menu.figma.d.ts +14 -0
  98. package/build/components/Menu/Menu.figma.js +33 -0
  99. package/build/components/Menu/MenuItem.figma.d.ts +29 -0
  100. package/build/components/Menu/MenuItem.figma.js +45 -0
  101. package/build/components/Modal/Modal.figma.d.ts +24 -0
  102. package/build/components/Modal/Modal.figma.js +64 -0
  103. package/build/components/NavModal/NavModal.figma.d.ts +19 -0
  104. package/build/components/NavModal/NavModal.figma.js +42 -0
  105. package/build/components/Pagination/Pagination.figma.d.ts +16 -0
  106. package/build/components/Pagination/Pagination.figma.js +20 -0
  107. package/build/components/PillGroup/Pill.figma.d.ts +17 -0
  108. package/build/components/PillGroup/Pill.figma.js +21 -0
  109. package/build/components/PillGroup/PillGroup.figma.d.ts +13 -0
  110. package/build/components/PillGroup/PillGroup.figma.js +18 -0
  111. package/build/components/ProgressBar/ProgressBar.circular.figma.d.ts +16 -0
  112. package/build/components/ProgressBar/ProgressBar.circular.figma.js +35 -0
  113. package/build/components/ProgressBar/ProgressBar.figma.d.ts +15 -0
  114. package/build/components/ProgressBar/ProgressBar.figma.js +31 -0
  115. package/build/components/ProgressStepper/ProgressStep.figma.d.ts +15 -0
  116. package/build/components/ProgressStepper/ProgressStep.figma.js +17 -0
  117. package/build/components/ProgressStepper/ProgressStepper.figma.d.ts +13 -0
  118. package/build/components/ProgressStepper/ProgressStepper.figma.js +14 -0
  119. package/build/components/Radio/Radio.figma.d.ts +15 -0
  120. package/build/components/Radio/Radio.figma.js +17 -0
  121. package/build/components/Radio/RadioGroup.figma.d.ts +19 -0
  122. package/build/components/Radio/RadioGroup.figma.js +45 -0
  123. package/build/components/Radio/RadioImage.figma.d.ts +11 -0
  124. package/build/components/Radio/RadioImage.figma.js +10 -0
  125. package/build/components/Radio/RadioTile.figma.d.ts +16 -0
  126. package/build/components/Radio/RadioTile.figma.js +23 -0
  127. package/build/components/RadioCard/RadioCard.figma.d.ts +16 -0
  128. package/build/components/RadioCard/RadioCard.figma.js +22 -0
  129. package/build/components/Rating/Rating.figma.d.ts +12 -0
  130. package/build/components/Rating/Rating.figma.js +18 -0
  131. package/build/components/Roundel/Roundel.figma.d.ts +13 -0
  132. package/build/components/Roundel/Roundel.figma.js +15 -0
  133. package/build/components/SectionHeader/SectionHeader.figma.d.ts +21 -0
  134. package/build/components/SectionHeader/SectionHeader.figma.js +50 -0
  135. package/build/components/SegmentedControl/SegmentedControl.figma.d.ts +16 -0
  136. package/build/components/SegmentedControl/SegmentedControl.figma.js +20 -0
  137. package/build/components/SegmentedControl/SegmentedControlOption.figma.d.ts +17 -0
  138. package/build/components/SegmentedControl/SegmentedControlOption.figma.js +23 -0
  139. package/build/components/Select/Select.figma.d.ts +24 -0
  140. package/build/components/Select/Select.figma.js +65 -0
  141. package/build/components/Select/SelectOption.figma.d.ts +15 -0
  142. package/build/components/Select/SelectOption.figma.js +27 -0
  143. package/build/components/Spinner/Spinner.figma.d.ts +13 -0
  144. package/build/components/Spinner/Spinner.figma.js +16 -0
  145. package/build/components/Spinner/Spinner.js +1 -1
  146. package/build/components/Spinner/Spinner.web.js +1 -1
  147. package/build/components/StepperInput/StepperInput.figma.d.ts +25 -0
  148. package/build/components/StepperInput/StepperInput.figma.js +32 -0
  149. package/build/components/Switch/Switch.figma.d.ts +15 -0
  150. package/build/components/Switch/Switch.figma.js +18 -0
  151. package/build/components/Table/Table.figma.d.ts +14 -0
  152. package/build/components/Table/Table.figma.js +38 -0
  153. package/build/components/Table/TableHeaderCell.figma.d.ts +15 -0
  154. package/build/components/Table/TableHeaderCell.figma.js +31 -0
  155. package/build/components/Tabs/Tab.figma.d.ts +14 -0
  156. package/build/components/Tabs/Tab.figma.js +14 -0
  157. package/build/components/Tabs/Tab.js +1 -1
  158. package/build/components/Tabs/Tabs.figma.d.ts +14 -0
  159. package/build/components/Tabs/Tabs.figma.js +21 -0
  160. package/build/components/Textarea/Textarea.figma.d.ts +27 -0
  161. package/build/components/Textarea/Textarea.figma.js +53 -0
  162. package/build/components/TimePicker/TimePicker.figma.d.ts +16 -0
  163. package/build/components/TimePicker/TimePicker.figma.js +30 -0
  164. package/build/components/TimePickerInput/TimePickerInput.figma.d.ts +29 -0
  165. package/build/components/TimePickerInput/TimePickerInput.figma.js +53 -0
  166. package/build/components/Timeline/Timeline.figma.d.ts +14 -0
  167. package/build/components/Timeline/Timeline.figma.js +23 -0
  168. package/build/components/Timeline/TimelineItemProgress.figma.d.ts +16 -0
  169. package/build/components/Timeline/TimelineItemProgress.figma.js +30 -0
  170. package/build/components/Timeline/TimelineItemStatic.figma.d.ts +16 -0
  171. package/build/components/Timeline/TimelineItemStatic.figma.js +30 -0
  172. package/build/components/Toast/ToastItem.figma.d.ts +20 -0
  173. package/build/components/Toast/ToastItem.figma.js +42 -0
  174. package/build/components/ToggleButtonCard/ToggleButtonCard.figma.d.ts +14 -0
  175. package/build/components/ToggleButtonCard/ToggleButtonCard.figma.js +28 -0
  176. package/build/components/ToggleButtonCard/ToggleButtonCardRoot.js +16 -3
  177. package/build/components/UnstyledIconButton/UnstyledIconButton.figma.d.ts +21 -0
  178. package/build/components/UnstyledIconButton/UnstyledIconButton.figma.js +32 -0
  179. package/build/components/VerificationInput/VerificationInput.figma.d.ts +19 -0
  180. package/build/components/VerificationInput/VerificationInput.figma.js +22 -0
  181. package/build/components/index.d.ts +1 -0
  182. package/build/components/index.js +1 -0
  183. package/build/types/utilityProps.d.ts +1 -1
  184. package/package.json +5 -4
  185. package/public/llms/components/list.md +6 -11
  186. package/public/llms/docs/ai-tooling.md +27 -5
  187. package/public/llms/docs/introduction.md +1 -1
@@ -0,0 +1,51 @@
1
+ // url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2161%3A1336
2
+ // source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/CurrencyInput/CurrencyInput.tsx
3
+ // component=CurrencyInput
4
+ import figma from 'figma';
5
+ const instance = figma.selectedInstance;
6
+ const valueType = instance.getEnum('Value type', {
7
+ Filled: 'filled',
8
+ Placeholder: 'placeholder',
9
+ });
10
+ const value = instance.getString('Value');
11
+ const label = instance.getString('Label');
12
+ const helperText = instance.getBoolean('Helper text?', {
13
+ true: instance.getString('Helper text'),
14
+ false: undefined,
15
+ });
16
+ const invalidText = instance.getEnum('State', {
17
+ Default: undefined,
18
+ Invalid: instance.getString('Validation'),
19
+ });
20
+ const validationStatus = instance.getEnum('State', {
21
+ Default: undefined,
22
+ Invalid: 'invalid',
23
+ });
24
+ const focused = instance.getBoolean('Focus?');
25
+ const labelVariant = instance.getEnum('Label variant', {
26
+ Body: 'body',
27
+ Heading: 'heading',
28
+ });
29
+ const placeholder = valueType === 'placeholder' ? instance.getString('Value') : undefined;
30
+ const displayValue = valueType === 'filled' ? value : undefined;
31
+ export default {
32
+ id: 'currency-input',
33
+ imports: ["import { CurrencyInput } from '@utilitywarehouse/hearth-react-native';"],
34
+ example: figma.code `
35
+ <CurrencyInput${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('invalidText', invalidText)}${figma.helpers.react.renderProp('validationStatus', validationStatus)}${figma.helpers.react.renderProp('placeholder', placeholder)}${figma.helpers.react.renderProp('value', displayValue)}${figma.helpers.react.renderProp('focused', focused)}${figma.helpers.react.renderProp('labelVariant', labelVariant)} onChange={() => {}}/>`,
36
+ metadata: {
37
+ nestable: true,
38
+ props: {
39
+ valueType,
40
+ value,
41
+ label,
42
+ helperText,
43
+ invalidText,
44
+ validationStatus,
45
+ focused,
46
+ labelVariant,
47
+ placeholder,
48
+ displayValue,
49
+ },
50
+ },
51
+ };
@@ -0,0 +1,41 @@
1
+ import figma from 'figma';
2
+ declare const _default: {
3
+ id: string;
4
+ imports: string[];
5
+ example: figma.TemplateStringResult;
6
+ metadata: {
7
+ nestable: boolean;
8
+ props: {
9
+ required: figma.EnumOptionsValues<{
10
+ true: boolean;
11
+ false: boolean;
12
+ }>;
13
+ hideDay: figma.EnumOptionsValues<{
14
+ true: boolean;
15
+ false: boolean;
16
+ }>;
17
+ hideMonth: figma.EnumOptionsValues<{
18
+ true: boolean;
19
+ false: boolean;
20
+ }>;
21
+ monthPlaceholder: string | undefined;
22
+ yearPlaceholder: string | undefined;
23
+ dayPlaceholder: string | undefined;
24
+ dayValue: string | undefined;
25
+ monthValue: string | undefined;
26
+ yearValue: string | undefined;
27
+ disabled: boolean | undefined;
28
+ readonly: boolean | undefined;
29
+ label: string;
30
+ helperText: string;
31
+ validText: string | undefined;
32
+ invalidText: string | undefined;
33
+ validationStatus: figma.EnumOptionsValues<{
34
+ Default: undefined;
35
+ Valid: string;
36
+ Invalid: string;
37
+ }>;
38
+ };
39
+ };
40
+ };
41
+ export default _default;
@@ -0,0 +1,87 @@
1
+ // url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2277%3A14708
2
+ // source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/DateInput/DateInput.tsx
3
+ // component=DateInput
4
+ import figma from 'figma';
5
+ const required = figma.selectedInstance.getBoolean('Optional?', {
6
+ true: false,
7
+ false: true,
8
+ });
9
+ const hideDay = figma.selectedInstance.getBoolean('Day?', {
10
+ true: false,
11
+ false: true,
12
+ });
13
+ const hideMonth = figma.selectedInstance.getBoolean('Month?', {
14
+ true: false,
15
+ false: true,
16
+ });
17
+ const monthPlaceholder = figma.selectedInstance.getEnum('Value type', {
18
+ Placeholder: figma.selectedInstance.getBoolean('Month?', {
19
+ true: figma.selectedInstance.getString('Month value'),
20
+ }),
21
+ });
22
+ const yearPlaceholder = figma.selectedInstance.getEnum('Value type', {
23
+ Placeholder: figma.selectedInstance.getString('Year value'),
24
+ });
25
+ const dayPlaceholder = figma.selectedInstance.getEnum('Value type', {
26
+ Placeholder: figma.selectedInstance.getBoolean('Day?', {
27
+ true: figma.selectedInstance.getString('Day value'),
28
+ }),
29
+ });
30
+ const dayValue = figma.selectedInstance.getEnum('Value type', {
31
+ Filled: figma.selectedInstance.getBoolean('Day?', {
32
+ true: figma.selectedInstance.getString('Day value'),
33
+ }),
34
+ });
35
+ const monthValue = figma.selectedInstance.getEnum('Value type', {
36
+ Filled: figma.selectedInstance.getBoolean('Month?', {
37
+ true: figma.selectedInstance.getString('Month value'),
38
+ }),
39
+ });
40
+ const yearValue = figma.selectedInstance.getEnum('Value type', {
41
+ Filled: figma.selectedInstance.getString('Year value'),
42
+ });
43
+ const disabled = figma.selectedInstance.getEnum('State', {
44
+ Disabled: true,
45
+ });
46
+ const readonly = figma.selectedInstance.getEnum('State', {
47
+ 'Read-only': true,
48
+ });
49
+ const label = figma.selectedInstance.getString('Label');
50
+ const helperText = figma.selectedInstance.getString('Helper text');
51
+ const validText = figma.selectedInstance.getEnum('State', {
52
+ Valid: figma.selectedInstance.getString('Validation'),
53
+ });
54
+ const invalidText = figma.selectedInstance.getEnum('State', {
55
+ Invalid: figma.selectedInstance.getString('Validation'),
56
+ });
57
+ const validationStatus = figma.selectedInstance.getEnum('State', {
58
+ Default: undefined,
59
+ Valid: 'valid',
60
+ Invalid: 'invalid',
61
+ });
62
+ export default {
63
+ id: 'DateInput',
64
+ imports: ["import { DateInput } from '@utilitywarehouse/hearth-react-native';"],
65
+ example: figma.code `<DateInput${figma.helpers.react.renderProp('required', required)}${figma.helpers.react.renderProp('hideDay', hideDay)}${figma.helpers.react.renderProp('hideMonth', hideMonth)}${figma.helpers.react.renderProp('monthPlaceholder', monthPlaceholder)}${figma.helpers.react.renderProp('yearPlaceholder', yearPlaceholder)}${figma.helpers.react.renderProp('dayValue', dayValue)}${figma.helpers.react.renderProp('monthValue', monthValue)}${figma.helpers.react.renderProp('yearValue', yearValue)}${figma.helpers.react.renderProp('disabled', disabled)}${figma.helpers.react.renderProp('readonly', readonly)}${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('validText', validText)}${figma.helpers.react.renderProp('invalidText', invalidText)}${figma.helpers.react.renderProp('validationStatus', validationStatus)}/>`,
66
+ metadata: {
67
+ nestable: true,
68
+ props: {
69
+ required,
70
+ hideDay,
71
+ hideMonth,
72
+ monthPlaceholder,
73
+ yearPlaceholder,
74
+ dayPlaceholder,
75
+ dayValue,
76
+ monthValue,
77
+ yearValue,
78
+ disabled,
79
+ readonly,
80
+ label,
81
+ helperText,
82
+ validText,
83
+ invalidText,
84
+ validationStatus,
85
+ },
86
+ },
87
+ };
@@ -0,0 +1,25 @@
1
+ import figma from 'figma';
2
+ declare const _default: {
3
+ id: string;
4
+ imports: string[];
5
+ example: figma.TemplateStringResult;
6
+ metadata: {
7
+ nestable: boolean;
8
+ props: {
9
+ header: figma.EnumOptionsValues<{
10
+ true: boolean;
11
+ false: boolean;
12
+ }>;
13
+ footer: figma.EnumOptionsValues<{
14
+ true: boolean;
15
+ false: boolean;
16
+ }>;
17
+ initialView: figma.EnumOptionsValues<{
18
+ Day: undefined;
19
+ Month: string;
20
+ Year: string;
21
+ }>;
22
+ };
23
+ };
24
+ };
25
+ export default _default;
@@ -0,0 +1,23 @@
1
+ // url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3797-6383&m=dev
2
+ // source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/DatePicker/DatePicker.tsx
3
+ // component=DatePicker
4
+ import figma from 'figma';
5
+ const header = figma.selectedInstance.getBoolean('Header?', {
6
+ true: false,
7
+ false: true,
8
+ });
9
+ const footer = figma.selectedInstance.getBoolean('Footer?', {
10
+ true: false,
11
+ false: true,
12
+ });
13
+ const initialView = figma.selectedInstance.getEnum('Type', {
14
+ Day: undefined,
15
+ Month: 'month',
16
+ Year: 'year',
17
+ });
18
+ export default {
19
+ id: 'date-picker',
20
+ imports: ['import { DatePicker } from "@utilitywarehouse/hearth-react-native";'],
21
+ example: figma.code `<DatePicker mode="single"${figma.helpers.react.renderProp('hideFooter', footer)}${figma.helpers.react.renderProp('hideHeader', header)}${figma.helpers.react.renderProp('initialView', initialView)} />`,
22
+ metadata: { nestable: true, props: { header, footer, initialView } },
23
+ };
@@ -0,0 +1,25 @@
1
+ import figma from 'figma';
2
+ declare const _default: {
3
+ id: string;
4
+ imports: string[];
5
+ example: figma.TemplateStringResult;
6
+ metadata: {
7
+ props: {
8
+ variantValue: string | undefined;
9
+ valueType: string | undefined;
10
+ label: string;
11
+ validationText: string;
12
+ helperTextContent: string;
13
+ rawValue: string;
14
+ focused: boolean | undefined;
15
+ disabled: boolean;
16
+ readonly: boolean;
17
+ validationStatus: string | undefined;
18
+ value: string | undefined;
19
+ placeholder: string | undefined;
20
+ validText: string | undefined;
21
+ invalidText: string | undefined;
22
+ };
23
+ };
24
+ };
25
+ export default _default;
@@ -0,0 +1,52 @@
1
+ // url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3917:7057
2
+ // source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/DatePickerInput/DatePickerInput.tsx
3
+ // component=DatePickerInput
4
+ import figma from 'figma';
5
+ const instance = figma.selectedInstance;
6
+ const variantValue = instance.getEnum('Variant', {
7
+ Default: 'default',
8
+ Valid: 'valid',
9
+ Invalid: 'invalid',
10
+ Disabled: 'disabled',
11
+ 'Read-only': 'readonly',
12
+ });
13
+ const valueType = instance.getEnum('Value type', {
14
+ Empty: 'empty',
15
+ Placeholder: 'placeholder',
16
+ Filled: 'filled',
17
+ });
18
+ const label = instance.getString('Label');
19
+ const validationText = instance.getString('Validation');
20
+ const helperTextContent = instance.getString('Helper text');
21
+ const rawValue = instance.getString('Value');
22
+ const focused = instance.getEnum('Focus?', { Yes: true });
23
+ const disabled = variantValue === 'disabled';
24
+ const readonly = variantValue === 'readonly';
25
+ const validationStatus = variantValue === 'valid' ? 'valid' : variantValue === 'invalid' ? 'invalid' : undefined;
26
+ const value = valueType === 'filled' ? rawValue : undefined;
27
+ const placeholder = valueType === 'placeholder' ? rawValue : undefined;
28
+ const validText = validationStatus === 'valid' ? validationText : undefined;
29
+ const invalidText = validationStatus === 'invalid' ? validationText : undefined;
30
+ export default {
31
+ id: 'date-picker-input',
32
+ imports: ['import { DatePickerInput } from "@utilitywarehouse/hearth-react-native";'],
33
+ example: figma.code `<DatePickerInput${figma.helpers.react.renderProp('disabled', disabled)}${figma.helpers.react.renderProp('readonly', readonly)}${figma.helpers.react.renderProp('validationStatus', validationStatus)}${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('focused', focused)}${figma.helpers.react.renderProp('helperText', helperTextContent)} />`,
34
+ metadata: {
35
+ props: {
36
+ variantValue,
37
+ valueType,
38
+ label,
39
+ validationText,
40
+ helperTextContent,
41
+ rawValue,
42
+ focused,
43
+ disabled,
44
+ readonly,
45
+ validationStatus,
46
+ value,
47
+ placeholder,
48
+ validText,
49
+ invalidText,
50
+ },
51
+ },
52
+ };
@@ -0,0 +1,26 @@
1
+ import figma from 'figma';
2
+ declare const _default: {
3
+ id: string;
4
+ imports: string[];
5
+ example: figma.TemplateStringResult;
6
+ metadata: {
7
+ nestable: boolean;
8
+ props: {
9
+ sectionHeader: {
10
+ heading: string | undefined;
11
+ helperText: string | undefined;
12
+ trailingContent: {
13
+ headerTrailingContent: figma.ResultSection[] | undefined;
14
+ } | undefined;
15
+ invalidText: {
16
+ invalidText: string | undefined;
17
+ } | undefined;
18
+ };
19
+ items: figma.ResultSection[];
20
+ direction: {
21
+ direction: string | undefined;
22
+ };
23
+ };
24
+ };
25
+ };
26
+ export default _default;
@@ -0,0 +1,59 @@
1
+ // url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7247%3A4636
2
+ // source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/DescriptionList/DescriptionList.tsx
3
+ // component=DescriptionList
4
+ import figma from 'figma';
5
+ const sectionHeader = figma.selectedInstance.getBoolean('Section header?', {
6
+ true: (function () {
7
+ const nestedLayer2 = figma.selectedInstance.findInstance('Section Header');
8
+ return {
9
+ heading: nestedLayer2.type !== 'ERROR' ? nestedLayer2.getString('Heading') : undefined,
10
+ helperText: nestedLayer2.type !== 'ERROR'
11
+ ? nestedLayer2.getBoolean('Helper text?', {
12
+ true: nestedLayer2.getString('Helper text'),
13
+ })
14
+ : undefined,
15
+ trailingContent: nestedLayer2.type !== 'ERROR'
16
+ ? nestedLayer2.getBoolean('Trailing content?', {
17
+ true: (function () {
18
+ const nestedLayer3 = figma.selectedInstance.findInstance('Trailing content');
19
+ return {
20
+ headerTrailingContent: nestedLayer3.type !== 'ERROR'
21
+ ? nestedLayer3.getInstanceSwap('Variant')?.executeTemplate().example
22
+ : undefined,
23
+ };
24
+ })(),
25
+ })
26
+ : undefined,
27
+ invalidText: nestedLayer2.type !== 'ERROR'
28
+ ? nestedLayer2.getEnum('State', {
29
+ Invalid: (function () {
30
+ const nestedLayer4 = figma.selectedInstance.findInstance('Validation Text');
31
+ return {
32
+ invalidText: nestedLayer4.type !== 'ERROR' ? nestedLayer4.getString('Text') : undefined,
33
+ };
34
+ })(),
35
+ })
36
+ : undefined,
37
+ };
38
+ })(),
39
+ });
40
+ const items = figma.properties.children(['Item']);
41
+ const direction = (function () {
42
+ const nestedLayer5 = figma.selectedInstance.findInstance('Item');
43
+ return {
44
+ direction: nestedLayer5.type !== 'ERROR'
45
+ ? nestedLayer5.getEnum('Direction', {
46
+ Row: 'row',
47
+ Column: 'column',
48
+ })
49
+ : undefined,
50
+ };
51
+ })();
52
+ export default {
53
+ id: 'DescriptionList',
54
+ imports: ["import { DescriptionList } from '@utilitywarehouse/hearth-react-native';"],
55
+ example: figma.code `<DescriptionList${figma.helpers.react.renderProp('heading', sectionHeader?.heading)}${figma.helpers.react.renderProp('helperText', sectionHeader?.helperText)}${figma.helpers.react.renderProp('direction', direction?.direction)}${figma.helpers.react.renderProp('headerTrailingContent', sectionHeader?.trailingContent?.headerTrailingContent)}${figma.helpers.react.renderProp('invalidText', sectionHeader?.invalidText?.invalidText)}>
56
+ ${figma.helpers.react.renderChildren(items)}
57
+ </DescriptionList>`,
58
+ metadata: { nestable: true, props: { sectionHeader, items, direction } },
59
+ };
@@ -0,0 +1,22 @@
1
+ import figma from 'figma';
2
+ declare const _default: {
3
+ id: string;
4
+ imports: string[];
5
+ example: figma.TemplateStringResult;
6
+ metadata: {
7
+ nestable: boolean;
8
+ props: {
9
+ heading: string;
10
+ direction: string | undefined;
11
+ description: string;
12
+ trailingContent: {
13
+ trailingContent: figma.ResultSection[] | undefined;
14
+ };
15
+ invalidText: {
16
+ invalidText: string | undefined;
17
+ } | undefined;
18
+ numericValue: string;
19
+ };
20
+ };
21
+ };
22
+ export default _default;
@@ -0,0 +1,42 @@
1
+ // url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7247-5209&t=3uUSBVdxldgG5uz3-4
2
+ // source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/DescriptionList/DescriptionListItem.tsx
3
+ // component=DescriptionListItem
4
+ import figma from 'figma';
5
+ const heading = figma.selectedInstance.getString('Heading');
6
+ const direction = figma.selectedInstance.getEnum('Direction', {
7
+ Row: 'row',
8
+ Column: 'column',
9
+ });
10
+ const description = figma.selectedInstance.getBoolean('Description?', {
11
+ true: figma.selectedInstance.getString('Description'),
12
+ });
13
+ const trailingContent = figma.selectedInstance.getBoolean('Trailing content?', {
14
+ true: (function () {
15
+ const nestedLayer0 = figma.selectedInstance.findInstance('Trailing content');
16
+ return {
17
+ trailingContent: nestedLayer0.type !== 'ERROR'
18
+ ? nestedLayer0.getInstanceSwap('Variant')?.executeTemplate().example
19
+ : undefined,
20
+ };
21
+ })(),
22
+ });
23
+ const invalidText = figma.selectedInstance.getEnum('State', {
24
+ Invalid: (function () {
25
+ const nestedLayer1 = figma.selectedInstance.findInstance('Validation Text');
26
+ return {
27
+ invalidText: nestedLayer1.type !== 'ERROR' ? nestedLayer1.getString('Text') : undefined,
28
+ };
29
+ })(),
30
+ });
31
+ const numericValue = figma.selectedInstance.getBoolean('Numerical value?', {
32
+ true: figma.selectedInstance.getString('Numerical value'),
33
+ });
34
+ export default {
35
+ id: 'DescriptionListItem',
36
+ imports: ["import { DescriptionListItem } from '@utilitywarehouse/hearth-react-native';"],
37
+ example: figma.code `<DescriptionListItem${figma.helpers.react.renderProp('heading', heading)}${figma.helpers.react.renderProp('description', description)}${figma.helpers.react.renderProp('trailingContent', trailingContent?.trailingContent)}${figma.helpers.react.renderProp('invalidText', invalidText?.invalidText)}${figma.helpers.react.renderProp('numericValue', numericValue)}/>`,
38
+ metadata: {
39
+ nestable: true,
40
+ props: { heading, direction, description, trailingContent, invalidText, numericValue },
41
+ },
42
+ };
@@ -0,0 +1,13 @@
1
+ import figma from 'figma';
2
+ declare const _default: {
3
+ id: string;
4
+ imports: string[];
5
+ example: figma.TemplateStringResult;
6
+ metadata: {
7
+ nestable: boolean;
8
+ props: {
9
+ orientation: string | undefined;
10
+ };
11
+ };
12
+ };
13
+ export default _default;
@@ -0,0 +1,14 @@
1
+ // url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2421%3A1687
2
+ // source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Divider/Divider.tsx
3
+ // component=Divider
4
+ import figma from 'figma';
5
+ const orientation = figma.selectedInstance.getEnum('Orientation', {
6
+ Horizontal: 'horizontal',
7
+ Vertical: 'vertical',
8
+ });
9
+ export default {
10
+ id: 'Divider',
11
+ imports: ['import { Divider } from "@utilitywarehouse/hearth-react-native";'],
12
+ example: figma.code `<Divider${figma.helpers.react.renderProp('orientation', orientation)}/>`,
13
+ metadata: { nestable: true, props: { orientation } },
14
+ };
@@ -0,0 +1,28 @@
1
+ import figma from 'figma';
2
+ declare const _default: {
3
+ id: string;
4
+ imports: string[];
5
+ example: figma.TemplateStringResult;
6
+ metadata: {
7
+ nestable: boolean;
8
+ props: {
9
+ expanded: boolean;
10
+ heading: string;
11
+ helperText: string;
12
+ leadingContent: {
13
+ variant: figma.EnumOptionsValues<{
14
+ Icon: figma.ResultSection[] | undefined;
15
+ 'Icon Container': {
16
+ $value: string;
17
+ $type: "jsx-element";
18
+ };
19
+ }>;
20
+ };
21
+ content: figma.ResultSection[] | undefined;
22
+ numericalValue: string;
23
+ badge: figma.ResultSection[] | undefined;
24
+ expandedContent: figma.ResultSection[] | undefined;
25
+ };
26
+ };
27
+ };
28
+ export default _default;
@@ -0,0 +1,52 @@
1
+ // url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7222%3A5935
2
+ // source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/ExpandableCard/ExpandableCard.tsx
3
+ // component=ExpandableCard
4
+ import figma from 'figma';
5
+ const expanded = figma.selectedInstance.getBoolean('Expand?');
6
+ const heading = figma.selectedInstance.getString('Heading');
7
+ const helperText = figma.selectedInstance.getString('Helper text');
8
+ const leadingContent = figma.selectedInstance.getBoolean('Leading content?', {
9
+ true: (function () {
10
+ const nestedLayer3 = figma.selectedInstance.findInstance('Leading content');
11
+ return {
12
+ variant: nestedLayer3.type !== 'ERROR'
13
+ ? nestedLayer3.getEnum('Variant', {
14
+ Icon: nestedLayer3.getInstanceSwap('Icon-24')?.executeTemplate().example,
15
+ 'Icon Container': figma.helpers.react.jsxElement("<IconContainer icon={figma.instance('Icon-24')} />"),
16
+ })
17
+ : undefined,
18
+ };
19
+ })(),
20
+ });
21
+ const content = figma.selectedInstance.getInstanceSwap('Custom content')?.executeTemplate().example;
22
+ const numericalValue = figma.selectedInstance.getBoolean('Numerical value?', {
23
+ true: figma.selectedInstance.getString('Numerical value'),
24
+ });
25
+ const badge = figma.selectedInstance.getBoolean('Badge?', {
26
+ true: figma.selectedInstance.getInstanceSwap('Badge')?.executeTemplate().example,
27
+ });
28
+ const slot = figma.selectedInstance.getSlot('Slot');
29
+ const expandedContentItems = slot?.connectedInstances.map(i => i.executeTemplate().example) ?? [];
30
+ // An empty array passed to renderProp() renders as broken, unparseable `prop={}` syntax
31
+ // instead of being omitted — only pass it through when there's actually something to render.
32
+ const expandedContent = expandedContentItems.length > 0 ? expandedContentItems.flat() : undefined;
33
+ export default {
34
+ id: 'ExpandableCard',
35
+ imports: ["import { ExpandableCard } from '@utilitywarehouse/hearth-react-native';"],
36
+ example: figma.code `<ExpandableCard${figma.helpers.react.renderProp('expanded', expanded)}${figma.helpers.react.renderProp('heading', heading)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('leadingContent', leadingContent?.variant)}${figma.helpers.react.renderProp('numericValue', numericalValue)}${figma.helpers.react.renderProp('badge', badge)}${figma.helpers.react.renderProp('expandedContent', expandedContent)}>
37
+ ${figma.helpers.react.renderChildren(content)}
38
+ </ExpandableCard>`,
39
+ metadata: {
40
+ nestable: true,
41
+ props: {
42
+ expanded,
43
+ heading,
44
+ helperText,
45
+ leadingContent,
46
+ content,
47
+ numericalValue,
48
+ badge,
49
+ expandedContent,
50
+ },
51
+ },
52
+ };
@@ -0,0 +1,23 @@
1
+ import figma from 'figma';
2
+ declare const _default: {
3
+ id: string;
4
+ imports: string[];
5
+ example: figma.TemplateStringResult;
6
+ metadata: {
7
+ nestable: boolean;
8
+ props: {
9
+ sectionHeader: {
10
+ heading: string | undefined;
11
+ helperText: string | undefined;
12
+ trailingContent: {
13
+ headerTrailingContent: figma.ResultSection[] | undefined;
14
+ } | undefined;
15
+ invalidText: {
16
+ invalidText: string | undefined;
17
+ } | undefined;
18
+ };
19
+ cards: figma.ResultSection[][];
20
+ };
21
+ };
22
+ };
23
+ export default _default;
@@ -0,0 +1,55 @@
1
+ // url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7222-7221&m=dev
2
+ // source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/ExpandableCard/ExpandableCardGroup.tsx
3
+ // component=ExpandableCardGroup
4
+ import figma from 'figma';
5
+ const sectionHeader = figma.selectedInstance.getBoolean('Section header?', {
6
+ true: (function () {
7
+ const nestedLayer0 = figma.selectedInstance.findInstance('Section Header');
8
+ return {
9
+ heading: nestedLayer0.type !== 'ERROR' ? nestedLayer0.getString('Heading') : undefined,
10
+ helperText: nestedLayer0.type !== 'ERROR'
11
+ ? nestedLayer0.getBoolean('Helper text?', {
12
+ true: nestedLayer0.getString('Helper text'),
13
+ })
14
+ : undefined,
15
+ trailingContent: nestedLayer0.type !== 'ERROR'
16
+ ? nestedLayer0.getBoolean('Trailing content?', {
17
+ true: (function () {
18
+ const nestedLayer1 = figma.selectedInstance.findInstance('Trailing content');
19
+ return {
20
+ headerTrailingContent: nestedLayer1.type !== 'ERROR'
21
+ ? nestedLayer1.getInstanceSwap('Variant')?.executeTemplate().example
22
+ : undefined,
23
+ };
24
+ })(),
25
+ })
26
+ : undefined,
27
+ invalidText: nestedLayer0.type !== 'ERROR'
28
+ ? nestedLayer0.getEnum('State', {
29
+ Invalid: (function () {
30
+ const nestedLayer2 = figma.selectedInstance.findInstance('Validation Text');
31
+ return {
32
+ invalidText: nestedLayer2.type !== 'ERROR' ? nestedLayer2.getString('Text') : undefined,
33
+ };
34
+ })(),
35
+ })
36
+ : undefined,
37
+ };
38
+ })(),
39
+ });
40
+ const cardLayers = figma.selectedInstance.findConnectedInstances(n => n.hasCodeConnect());
41
+ const cards = cardLayers.map(layer => layer.executeTemplate().example) ?? [];
42
+ export default {
43
+ id: 'ExpandableCardGroup',
44
+ imports: ["import { ExpandableCardGroup } from '@utilitywarehouse/hearth-react-native';"],
45
+ example: figma.code `<ExpandableCardGroup${figma.helpers.react.renderProp('heading', sectionHeader?.heading)}${figma.helpers.react.renderProp('helperText', sectionHeader?.helperText)}${figma.helpers.react.renderProp('headerTrailingContent', sectionHeader?.trailingContent?.headerTrailingContent)}${figma.helpers.react.renderProp('invalidText', sectionHeader?.invalidText?.invalidText)}>
46
+ ${figma.helpers.react.renderChildren(cards.flat())}
47
+ </ExpandableCardGroup>`,
48
+ metadata: {
49
+ nestable: true,
50
+ props: {
51
+ sectionHeader,
52
+ cards,
53
+ },
54
+ },
55
+ };