@hyphen/hyphen-components 7.3.2 → 7.3.4

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 (221) hide show
  1. package/dist/css/utilities.css +1 -1
  2. package/dist/css/variables.css +18 -28
  3. package/dist/hyphen-components.cjs.development.js +5873 -5019
  4. package/dist/hyphen-components.cjs.development.js.map +1 -1
  5. package/dist/hyphen-components.cjs.production.min.js +18 -2
  6. package/dist/hyphen-components.cjs.production.min.js.map +1 -1
  7. package/dist/hyphen-components.esm.js +5731 -4844
  8. package/dist/hyphen-components.esm.js.map +1 -1
  9. package/dist/index.d.ts +2799 -57
  10. package/dist/index.js +0 -1
  11. package/package.json +18 -19
  12. package/src/components/Badge/Badge.module.scss +6 -0
  13. package/src/components/Badge/Badge.stories.tsx +1 -0
  14. package/src/components/Badge/Badge.test.tsx +3 -2
  15. package/src/components/Badge/Badge.tsx +5 -3
  16. package/src/components/Box/Box.tsx +5 -2
  17. package/src/components/Button/Button.module.scss +1 -1
  18. package/src/components/Button/Button.test.tsx +2 -2
  19. package/src/components/Calendar/Calendar.test.tsx +262 -0
  20. package/src/components/Card/Card.tsx +2 -0
  21. package/src/components/CheckboxInput/components/Checkbox.module.scss +1 -1
  22. package/src/components/CheckboxInput/components/Checkbox.tsx +2 -0
  23. package/src/components/Details/Details.module.scss +2 -2
  24. package/src/components/Details/Details.tsx +2 -0
  25. package/src/components/Drawer/Drawer.stories.tsx +1 -1
  26. package/src/components/Drawer/Drawer.test.tsx +494 -56
  27. package/src/components/Drawer/Drawer.tsx +7 -1
  28. package/src/components/DropdownMenu/DropdownMenu.test.tsx +532 -12
  29. package/src/components/FormControl/FormControl.tsx +2 -0
  30. package/src/components/Formik/Formik.stories.tsx +30 -7
  31. package/src/components/Formik/FormikSelectInput/FormikSelectInput.tsx +6 -5
  32. package/src/components/Formik/FormikToggleGroup/FormikToggleGroup.tsx +1 -1
  33. package/src/components/HelpText/HelpText.tsx +2 -0
  34. package/src/components/Icon/Icon.stories.tsx +1 -1
  35. package/src/components/Icon/Icon.tsx +2 -0
  36. package/src/components/Modal/Modal.test.tsx +630 -81
  37. package/src/components/Modal/Modal.tsx +2 -0
  38. package/src/components/Modal/components/ModalFooter/ModalFooter.test.tsx +2 -2
  39. package/src/components/Popover/Popover.tsx +2 -0
  40. package/src/components/RadioGroup/RadioInput/RadioInput.tsx +2 -0
  41. package/src/components/SelectInput/SelectInput.stories.tsx +22 -22
  42. package/src/components/SelectInput/SelectInput.tsx +13 -9
  43. package/src/components/SelectInputInset/SelectInputInset.tsx +2 -0
  44. package/src/components/Sidebar/Sidebar.module.scss +4 -0
  45. package/src/components/Sidebar/Sidebar.stories.tsx +8 -4
  46. package/src/components/Sidebar/Sidebar.test.tsx +7 -4
  47. package/src/components/Sidebar/Sidebar.tsx +7 -4
  48. package/src/components/Table/Table.stories.tsx +102 -52
  49. package/src/components/TextInput/TextInput.tsx +2 -0
  50. package/src/components/TextInputInset/TextInputInset.tsx +2 -0
  51. package/src/components/TextareaInputInset/TextareaInputInset.tsx +2 -0
  52. package/src/components/TimePickerNative/TimePickerNative.stories.tsx +0 -1
  53. package/src/components/Toast/Toast.store.ts +1 -1
  54. package/src/components/Toast/Toast.stories.tsx +3 -2
  55. package/src/components/Toast/Toast.test.tsx +8 -6
  56. package/src/components/Toggle/Toggle.tsx +2 -0
  57. package/src/components/ToggleGroup/ToggleGroup.tsx +2 -0
  58. package/src/docs/Colors.mdx +0 -13
  59. package/src/index.ts +2 -0
  60. package/src/lib/getColumnKeys.ts +3 -3
  61. package/src/lib/mergeRefs.ts +1 -1
  62. package/src/lib/tokens.ts +4 -4
  63. package/dist/components/Alert/Alert.constants.d.ts +0 -8
  64. package/dist/components/Alert/Alert.d.ts +0 -42
  65. package/dist/components/Alert/Alert.stories.d.ts +0 -12
  66. package/dist/components/Alert/Alert.types.d.ts +0 -7
  67. package/dist/components/AspectRatio/AspectRatio.d.ts +0 -3
  68. package/dist/components/AspectRatio/AspectRatio.stories.d.ts +0 -6
  69. package/dist/components/Badge/Badge.d.ts +0 -24
  70. package/dist/components/Badge/Badge.stories.d.ts +0 -8
  71. package/dist/components/Box/Box.d.ts +0 -247
  72. package/dist/components/Box/Box.stories.d.ts +0 -46
  73. package/dist/components/Button/Button.constants.d.ts +0 -3
  74. package/dist/components/Button/Button.d.ts +0 -53
  75. package/dist/components/Button/Button.stories.d.ts +0 -16
  76. package/dist/components/Calendar/Calendar.d.ts +0 -7
  77. package/dist/components/Calendar/Calendar.stories.d.ts +0 -12
  78. package/dist/components/Card/Card.d.ts +0 -17
  79. package/dist/components/Card/Card.stories.d.ts +0 -8
  80. package/dist/components/Card/components/CardFooter/CardFooter.d.ts +0 -13
  81. package/dist/components/Card/components/CardHeader/CardHeader.d.ts +0 -13
  82. package/dist/components/Card/components/CardSection/CardSection.d.ts +0 -46
  83. package/dist/components/Card/components/index.d.ts +0 -3
  84. package/dist/components/CheckboxInput/CheckboxInput.d.ts +0 -72
  85. package/dist/components/CheckboxInput/CheckboxInput.stories.d.ts +0 -18
  86. package/dist/components/CheckboxInput/components/Checkbox.d.ts +0 -71
  87. package/dist/components/CheckboxInput/components/CheckboxIcon.d.ts +0 -27
  88. package/dist/components/Collapsible/Collapsible.d.ts +0 -5
  89. package/dist/components/Collapsible/Collapsible.stories.d.ts +0 -9
  90. package/dist/components/Details/Details.d.ts +0 -15
  91. package/dist/components/Details/Details.stories.d.ts +0 -6
  92. package/dist/components/Details/DetailsSummary.d.ts +0 -7
  93. package/dist/components/Drawer/Drawer.d.ts +0 -105
  94. package/dist/components/Drawer/Drawer.stories.d.ts +0 -62
  95. package/dist/components/DropdownMenu/DropdownMenu.d.ts +0 -25
  96. package/dist/components/DropdownMenu/DropdownMenu.stories.d.ts +0 -9
  97. package/dist/components/FormControl/FormControl.d.ts +0 -38
  98. package/dist/components/FormLabel/FormLabel.d.ts +0 -41
  99. package/dist/components/FormLabel/FormLabel.stories.d.ts +0 -6
  100. package/dist/components/Formik/Formik.stories.d.ts +0 -18
  101. package/dist/components/Formik/FormikCheckboxInput/FormikCheckboxInput.d.ts +0 -12
  102. package/dist/components/Formik/FormikRadioGroup/FormikRadioGroup.d.ts +0 -12
  103. package/dist/components/Formik/FormikSelectInput/FormikSelectInput.d.ts +0 -13
  104. package/dist/components/Formik/FormikSelectInputInset/FormikSelectInputInset.d.ts +0 -12
  105. package/dist/components/Formik/FormikSelectInputNative/FormikSelectInputNative.d.ts +0 -12
  106. package/dist/components/Formik/FormikSwitch/FormikSwitch.d.ts +0 -12
  107. package/dist/components/Formik/FormikTextInput/FormikTextInput.d.ts +0 -12
  108. package/dist/components/Formik/FormikTextInputInset/FormikTextInputInset.d.ts +0 -12
  109. package/dist/components/Formik/FormikTextareaInput/FormikTextareaInput.d.ts +0 -12
  110. package/dist/components/Formik/FormikTextareaInputInset/FormikTextareaInputInset.d.ts +0 -12
  111. package/dist/components/Formik/FormikTimePicker/FormikTimePicker.d.ts +0 -12
  112. package/dist/components/Formik/FormikTimePickerNative/FormikTimePickerNative.d.ts +0 -12
  113. package/dist/components/Formik/FormikToggleGroup/FormikToggleGroup.d.ts +0 -20
  114. package/dist/components/Formik/FormikToggleGroupMulti/FormikToggleGroupMulti.d.ts +0 -18
  115. package/dist/components/Heading/Heading.constants.d.ts +0 -10
  116. package/dist/components/Heading/Heading.d.ts +0 -35
  117. package/dist/components/Heading/Heading.stories.d.ts +0 -9
  118. package/dist/components/HelpText/HelpText.d.ts +0 -12
  119. package/dist/components/Icon/Icon.d.ts +0 -22
  120. package/dist/components/Icon/Icon.stories.d.ts +0 -10
  121. package/dist/components/InputValidationMessage/InputValidationMessage.d.ts +0 -9
  122. package/dist/components/Modal/Modal.d.ts +0 -83
  123. package/dist/components/Modal/Modal.stories.d.ts +0 -13
  124. package/dist/components/Modal/components/ModalBody/ModalBody.d.ts +0 -4
  125. package/dist/components/Modal/components/ModalFooter/ModalFooter.d.ts +0 -4
  126. package/dist/components/Modal/components/ModalHeader/ModalHeader.d.ts +0 -21
  127. package/dist/components/Modal/components/index.d.ts +0 -4
  128. package/dist/components/Pagination/Pagination.d.ts +0 -51
  129. package/dist/components/Pagination/Pagination.stories.d.ts +0 -8
  130. package/dist/components/Pagination/Pagination.utilities.d.ts +0 -10
  131. package/dist/components/Popover/Popover.d.ts +0 -8
  132. package/dist/components/Popover/Popover.stories.d.ts +0 -7
  133. package/dist/components/RadioGroup/RadioGroup.d.ts +0 -75
  134. package/dist/components/RadioGroup/RadioGroup.stories.d.ts +0 -16
  135. package/dist/components/RadioGroup/RadioInput/RadioInput.d.ts +0 -57
  136. package/dist/components/RadioGroup/RadioInput/RadioInputIcon.d.ts +0 -27
  137. package/dist/components/RangeInput/RangeInput.d.ts +0 -29
  138. package/dist/components/RangeInput/RangeInput.stories.d.ts +0 -7
  139. package/dist/components/ResponsiveProvider/ResponsiveProvider.d.ts +0 -17
  140. package/dist/components/ResponsiveProvider/ResponsiveProvider.stories.d.ts +0 -7
  141. package/dist/components/SelectInput/SelectInput.d.ts +0 -148
  142. package/dist/components/SelectInput/SelectInput.stories.d.ts +0 -24
  143. package/dist/components/SelectInputInset/SelectInputInset.d.ts +0 -92
  144. package/dist/components/SelectInputInset/SelectInputInset.stories.d.ts +0 -12
  145. package/dist/components/SelectInputNative/SelectInputNative.d.ts +0 -45
  146. package/dist/components/SelectInputNative/SelectInputNative.stories.d.ts +0 -19
  147. package/dist/components/Sidebar/Sidebar.d.ts +0 -57
  148. package/dist/components/Sidebar/Sidebar.stories.d.ts +0 -9
  149. package/dist/components/Spinner/Spinner.d.ts +0 -12
  150. package/dist/components/Spinner/Spinner.stories.d.ts +0 -8
  151. package/dist/components/Switch/Switch.d.ts +0 -64
  152. package/dist/components/Switch/Switch.stories.d.ts +0 -12
  153. package/dist/components/Table/Table.d.ts +0 -86
  154. package/dist/components/Table/Table.stories.d.ts +0 -31
  155. package/dist/components/Table/TableBody/TableBody.d.ts +0 -52
  156. package/dist/components/Table/TableBody/TableBodyCell/TableBodyCell.d.ts +0 -45
  157. package/dist/components/Table/TableHead/TableHead.d.ts +0 -46
  158. package/dist/components/Table/TableHead/TableHeaderCell/TableHeaderCell.d.ts +0 -65
  159. package/dist/components/Table/common/TableRow/TableRow.d.ts +0 -67
  160. package/dist/components/TextInput/TextInput.d.ts +0 -106
  161. package/dist/components/TextInput/TextInput.stories.d.ts +0 -19
  162. package/dist/components/TextInputInset/TextInputInset.d.ts +0 -102
  163. package/dist/components/TextInputInset/TextInputInset.stories.d.ts +0 -13
  164. package/dist/components/TextareaInput/TextareaInput.d.ts +0 -97
  165. package/dist/components/TextareaInput/TextareaInput.stories.d.ts +0 -23
  166. package/dist/components/TextareaInputInset/TextareaInputInset.d.ts +0 -105
  167. package/dist/components/TextareaInputInset/TextareaInputInset.stories.d.ts +0 -12
  168. package/dist/components/ThemeProvider/ThemeProvider.d.ts +0 -15
  169. package/dist/components/ThemeProvider/ThemeProvider.stories.d.ts +0 -6
  170. package/dist/components/TimePicker/TimePicker.d.ts +0 -35
  171. package/dist/components/TimePicker/TimePicker.stories.d.ts +0 -12
  172. package/dist/components/TimePickerNative/TimePickerNative.d.ts +0 -39
  173. package/dist/components/TimePickerNative/TimePickerNative.stories.d.ts +0 -11
  174. package/dist/components/Toast/Toast.store.d.ts +0 -36
  175. package/dist/components/Toast/Toast.stories.d.ts +0 -14
  176. package/dist/components/Toast/Toast.types.d.ts +0 -75
  177. package/dist/components/Toast/ToastContainer.d.ts +0 -43
  178. package/dist/components/Toast/ToastNotification.d.ts +0 -28
  179. package/dist/components/Toast/index.d.ts +0 -4
  180. package/dist/components/Toast/toast.d.ts +0 -20
  181. package/dist/components/Toast/useToasts.d.ts +0 -14
  182. package/dist/components/Toggle/Toggle.d.ts +0 -7
  183. package/dist/components/Toggle/Toggle.stories.d.ts +0 -11
  184. package/dist/components/ToggleGroup/ToggleGroup.d.ts +0 -19
  185. package/dist/components/ToggleGroup/ToggleGroup.stories.d.ts +0 -12
  186. package/dist/components/Tooltip/Tooltip.d.ts +0 -8
  187. package/dist/components/Tooltip/Tooltip.stories.d.ts +0 -8
  188. package/dist/constants/keyCodes.d.ts +0 -2
  189. package/dist/css/index.css +0 -36
  190. package/dist/hooks/index.d.ts +0 -6
  191. package/dist/hooks/useBreakpoint/useBreakpoint.d.ts +0 -9
  192. package/dist/hooks/useBreakpoint/useBreakpoint.stories.d.ts +0 -6
  193. package/dist/hooks/useIsMobile/useIsMobile.d.ts +0 -1
  194. package/dist/hooks/useIsMobile/useIsMobile.stories.d.ts +0 -6
  195. package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.ts +0 -2
  196. package/dist/hooks/useOpenClose/useOpenClose.d.ts +0 -39
  197. package/dist/hooks/useOpenClose/useOpenClose.stories.d.ts +0 -6
  198. package/dist/hooks/useTheme/useTheme.d.ts +0 -5
  199. package/dist/hooks/useTheme/useTheme.stories.d.ts +0 -6
  200. package/dist/hooks/useWindowSize/useWindowSize.d.ts +0 -7
  201. package/dist/hooks/useWindowSize/useWindowSize.stories.d.ts +0 -6
  202. package/dist/lib/cssShorthandToClasses.d.ts +0 -4
  203. package/dist/lib/doesStringIncludeCssUnit.d.ts +0 -1
  204. package/dist/lib/generateResponsiveClasses.d.ts +0 -2
  205. package/dist/lib/getAutoCompleteValue.d.ts +0 -1
  206. package/dist/lib/getColumnKeys.d.ts +0 -3
  207. package/dist/lib/getDimensionCss.d.ts +0 -12
  208. package/dist/lib/getElementType.d.ts +0 -14
  209. package/dist/lib/getFlexCss.d.ts +0 -9
  210. package/dist/lib/index.d.ts +0 -15
  211. package/dist/lib/isFunction.d.ts +0 -3
  212. package/dist/lib/mergeRefs.d.ts +0 -2
  213. package/dist/lib/prefersReducedMotion.d.ts +0 -1
  214. package/dist/lib/react-children-utilities/filter.d.ts +0 -3
  215. package/dist/lib/react-children-utilities/index.d.ts +0 -1
  216. package/dist/lib/reactRouterClickHandler.d.ts +0 -12
  217. package/dist/lib/resolveValue.d.ts +0 -3
  218. package/dist/lib/tokens.d.ts +0 -22
  219. package/dist/modes.d.ts +0 -8
  220. package/dist/types/index.d.ts +0 -103
  221. package/dist/types/lib.types.d.ts +0 -3
@@ -1,38 +0,0 @@
1
- import React, { ReactNode } from 'react';
2
- import { BoxProps } from '../Box/Box';
3
- export interface FormControlProps extends BoxProps {
4
- /**
5
- * The input's id attribute. Used to programmatically tie the input with its label.
6
- */
7
- id: string;
8
- /**
9
- * Custom content to be displayed above the input. If the label is hidden, will be used to set aria-label attribute.
10
- */
11
- label: string;
12
- /**
13
- * Mark the input field as invalid and display a validation message.
14
- * Pass a string or node to render a validation message below the input.
15
- */
16
- error?: ReactNode;
17
- /**
18
- * Visually hide the label.
19
- */
20
- hideLabel?: boolean;
21
- /**
22
- * Additional clarifying text to help describe the input
23
- */
24
- helpText?: ReactNode;
25
- /**
26
- * The input's disabled attribute
27
- */
28
- isDisabled?: boolean;
29
- /**
30
- * The required and aria-required attributes on the input
31
- */
32
- isRequired?: boolean;
33
- /**
34
- * Visual indicator that the field is required, that gets appended to the label
35
- */
36
- requiredIndicator?: ReactNode;
37
- }
38
- export declare const FormControl: React.ForwardRefExoticComponent<Omit<FormControlProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -1,41 +0,0 @@
1
- import { FC, ReactNode } from 'react';
2
- import { BoxProps } from '../Box/Box';
3
- export interface FormLabelProps extends BoxProps {
4
- /**
5
- * Content to be rendered inside the label.
6
- */
7
- children: ReactNode;
8
- /**
9
- * The id of the form control that the label is labeling
10
- */
11
- inputId: string;
12
- /**
13
- * Custom class to pass to label element.
14
- */
15
- className?: string;
16
- /**
17
- * Additional clarifying text to that helps describe the field
18
- */
19
- helpText?: ReactNode;
20
- /**
21
- * Mark the label has disabled
22
- */
23
- isDisabled?: boolean;
24
- /**
25
- * prop deprecated: no longer in use and will be remove in next major release.
26
- */
27
- isFieldRequired?: boolean;
28
- /**
29
- * Apply custom styling to labels for a radio input
30
- */
31
- isRadioInputLabel?: boolean;
32
- /**
33
- * Visual indicator that the field is required, that gets appended to the label
34
- */
35
- requiredIndicator?: ReactNode;
36
- /**
37
- * Additional props to be spread to rendered element
38
- */
39
- [x: string]: any;
40
- }
41
- export declare const FormLabel: FC<FormLabelProps>;
@@ -1,6 +0,0 @@
1
- import { FormLabel } from './FormLabel';
2
- import type { Meta } from '@storybook/react-vite';
3
- import React from 'react';
4
- declare const meta: Meta<typeof FormLabel>;
5
- export default meta;
6
- export declare const BasicUsage: () => React.JSX.Element;
@@ -1,18 +0,0 @@
1
- import React from 'react';
2
- declare const meta: {
3
- title: string;
4
- parameters: {
5
- chromatic: {
6
- modes: {
7
- light: {
8
- theme: string;
9
- };
10
- dark: {
11
- theme: string;
12
- };
13
- };
14
- };
15
- };
16
- };
17
- export default meta;
18
- export declare const FormikForm: () => React.JSX.Element;
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- import { FormikTouched, FormikErrors, FieldAttributes, FormikValues } from 'formik';
3
- import { CheckboxInputProps } from '../../CheckboxInput/CheckboxInput';
4
- export interface FormikCheckboxInputProps extends Omit<CheckboxInputProps, 'onChange'> {
5
- field: FieldAttributes<HTMLInputElement>;
6
- form: {
7
- touched: FormikTouched<FormikValues>;
8
- errors: FormikErrors<FormikValues>;
9
- };
10
- onChange?: CheckboxInputProps['onChange'];
11
- }
12
- export declare const FormikCheckboxInput: React.FC<FormikCheckboxInputProps>;
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- import { FormikTouched, FormikErrors, FieldAttributes, FormikValues } from 'formik';
3
- import { RadioGroupProps } from '../../RadioGroup/RadioGroup';
4
- export interface FormikRadioGroupProps extends Omit<RadioGroupProps, 'onChange'> {
5
- field: FieldAttributes<HTMLInputElement>;
6
- form: {
7
- touched: FormikTouched<FormikValues>;
8
- errors: FormikErrors<FormikValues>;
9
- };
10
- onChange?: RadioGroupProps['onChange'];
11
- }
12
- export declare const FormikRadioGroup: React.FC<FormikRadioGroupProps>;
@@ -1,13 +0,0 @@
1
- import React from 'react';
2
- import { FormikTouched, FormikErrors, FieldAttributes, FormikValues } from 'formik';
3
- import { SelectInputProps } from '../../SelectInput/SelectInput';
4
- export interface FormikSelectInputProps extends Omit<SelectInputProps, 'onChange'> {
5
- field: FieldAttributes<HTMLSelectElement>;
6
- form: {
7
- touched: FormikTouched<FormikValues>;
8
- errors: FormikErrors<FormikValues>;
9
- };
10
- onChange?: SelectInputProps['onChange'];
11
- error?: any[] | string;
12
- }
13
- export declare const FormikSelectInput: React.FC<FormikSelectInputProps>;
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- import { FormikTouched, FormikErrors, FieldAttributes, FormikValues } from 'formik';
3
- import { SelectInputInsetProps } from '../../SelectInputInset/SelectInputInset';
4
- export interface FormikSelectInputInsetProps extends Omit<SelectInputInsetProps, 'onChange'> {
5
- field: FieldAttributes<HTMLSelectElement>;
6
- form: {
7
- touched: FormikTouched<FormikValues>;
8
- errors: FormikErrors<FormikValues>;
9
- };
10
- onChange?: SelectInputInsetProps['onChange'];
11
- }
12
- export declare const FormikSelectInputInset: React.FC<FormikSelectInputInsetProps>;
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- import { FormikTouched, FormikErrors, FieldAttributes, FormikValues } from 'formik';
3
- import { SelectInputNativeProps } from '../../SelectInputNative/SelectInputNative';
4
- export interface FormikSelectInputNativeProps extends Omit<SelectInputNativeProps, 'onChange'> {
5
- field: FieldAttributes<HTMLSelectElement>;
6
- form: {
7
- touched: FormikTouched<FormikValues>;
8
- errors: FormikErrors<FormikValues>;
9
- };
10
- onChange?: SelectInputNativeProps['onChange'];
11
- }
12
- export declare const FormikSelectInputNative: React.FC<FormikSelectInputNativeProps>;
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- import { FormikTouched, FormikErrors, FieldAttributes, FormikValues } from 'formik';
3
- export interface FormikSwitchProps {
4
- field: FieldAttributes<HTMLTextAreaElement>;
5
- form: {
6
- touched: FormikTouched<FormikValues>;
7
- errors: FormikErrors<FormikValues>;
8
- };
9
- id: string;
10
- label: string;
11
- }
12
- export declare const FormikSwitch: React.FC<FormikSwitchProps>;
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- import { FormikTouched, FormikErrors, FieldAttributes, FormikValues } from 'formik';
3
- import { TextInputProps } from '../../TextInput/TextInput';
4
- export interface FormikTextInputProps extends Omit<TextInputProps, 'onChange'> {
5
- field: FieldAttributes<HTMLInputElement>;
6
- form: {
7
- touched: FormikTouched<FormikValues>;
8
- errors: FormikErrors<FormikValues>;
9
- };
10
- onChange?: TextInputProps['onChange'];
11
- }
12
- export declare const FormikTextInput: React.FC<FormikTextInputProps>;
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- import { FormikTouched, FormikErrors, FieldAttributes, FormikValues } from 'formik';
3
- import { TextInputInsetProps } from '../../TextInputInset/TextInputInset';
4
- export interface FormikTextInputInsetProps extends Omit<TextInputInsetProps, 'onChange'> {
5
- field: FieldAttributes<HTMLInputElement>;
6
- form: {
7
- touched: FormikTouched<FormikValues>;
8
- errors: FormikErrors<FormikValues>;
9
- };
10
- onChange?: TextInputInsetProps['onChange'];
11
- }
12
- export declare const FormikTextInputInset: React.FC<FormikTextInputInsetProps>;
@@ -1,12 +0,0 @@
1
- import { FC } from 'react';
2
- import { FormikTouched, FormikErrors, FormikValues, FieldAttributes } from 'formik';
3
- import { TextareaInputProps } from '../../TextareaInput/TextareaInput';
4
- export interface FormikTextareaInputProps extends Omit<TextareaInputProps, 'onChange'> {
5
- field: FieldAttributes<HTMLTextAreaElement>;
6
- form: {
7
- touched: FormikTouched<FormikValues>;
8
- errors: FormikErrors<FormikValues>;
9
- };
10
- onChange?: TextareaInputProps['onChange'];
11
- }
12
- export declare const FormikTextareaInput: FC<FormikTextareaInputProps>;
@@ -1,12 +0,0 @@
1
- import { FC } from 'react';
2
- import { FormikTouched, FormikErrors, FormikValues, FieldAttributes } from 'formik';
3
- import { TextareaInputInsetProps } from '../../TextareaInputInset/TextareaInputInset';
4
- export interface FormikTextareaInputInsetProps extends Omit<TextareaInputInsetProps, 'onChange'> {
5
- field: FieldAttributes<HTMLTextAreaElement>;
6
- form: {
7
- touched: FormikTouched<FormikValues>;
8
- errors: FormikErrors<FormikValues>;
9
- };
10
- onChange?: TextareaInputInsetProps['onChange'];
11
- }
12
- export declare const FormikTextareaInputInset: FC<FormikTextareaInputInsetProps>;
@@ -1,12 +0,0 @@
1
- import { FC } from 'react';
2
- import { FormikTouched, FormikErrors, FormikValues, FieldAttributes } from 'formik';
3
- import { TimePickerProps } from '../../TimePicker/TimePicker';
4
- export interface FormikTimePickerProps extends Omit<TimePickerProps, 'onChange'> {
5
- field: FieldAttributes<HTMLSelectElement>;
6
- form: {
7
- touched: FormikTouched<FormikValues>;
8
- errors: FormikErrors<FormikValues>;
9
- };
10
- onChange?: TimePickerProps['onChange'];
11
- }
12
- export declare const FormikTimePicker: FC<FormikTimePickerProps>;
@@ -1,12 +0,0 @@
1
- import { FC } from 'react';
2
- import { FormikTouched, FormikErrors, FormikValues, FieldAttributes } from 'formik';
3
- import { TimePickerNativeProps } from '../../TimePickerNative/TimePickerNative';
4
- export interface FormikTimePickerNativeProps extends Omit<TimePickerNativeProps, 'onChange'> {
5
- field: FieldAttributes<HTMLTextAreaElement>;
6
- form: {
7
- touched: FormikTouched<FormikValues>;
8
- errors: FormikErrors<FormikValues>;
9
- };
10
- onChange: TimePickerNativeProps['onChange'];
11
- }
12
- export declare const FormikTimePickerNative: FC<FormikTimePickerNativeProps>;
@@ -1,20 +0,0 @@
1
- import React from 'react';
2
- import { FormikTouched, FormikErrors, FieldAttributes, FormikValues } from 'formik';
3
- export interface FormikToggleGroupProps {
4
- field: FieldAttributes<HTMLInputElement>;
5
- form: {
6
- touched: FormikTouched<FormikValues>;
7
- errors: FormikErrors<FormikValues>;
8
- setFieldValue: (field: string, value: any) => void;
9
- };
10
- options: Array<{
11
- id: string;
12
- value: string;
13
- label: React.ReactNode;
14
- disabled?: boolean;
15
- }>;
16
- helpText?: string;
17
- label?: string;
18
- children?: React.ReactNode;
19
- }
20
- export declare const FormikToggleGroup: React.FC<FormikToggleGroupProps>;
@@ -1,18 +0,0 @@
1
- import React from 'react';
2
- import { ToggleVariant } from '../../ToggleGroup/ToggleGroup';
3
- import { BaseSpacing, ResponsiveProp } from 'src/types';
4
- export interface FormikToggleGroupMultiProps {
5
- name: string;
6
- options: Array<{
7
- id: string;
8
- value: string;
9
- label: React.ReactNode;
10
- disabled?: boolean;
11
- }>;
12
- helpText?: string;
13
- label?: string;
14
- children?: React.ReactNode;
15
- variant: ToggleVariant;
16
- gap?: BaseSpacing | ResponsiveProp<BaseSpacing>;
17
- }
18
- export declare const FormikToggleGroupMulti: ({ name, options, helpText, label, children, variant, gap, ...props }: FormikToggleGroupMultiProps) => React.JSX.Element;
@@ -1,10 +0,0 @@
1
- export type HEADING_LEVELS_TYPE = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
2
- export declare const HEADING_LEVELS: HEADING_LEVELS_TYPE[];
3
- export declare const HEADING_DEFAULT_SIZE_MAP: {
4
- h1: string;
5
- h2: string;
6
- h3: string;
7
- h4: string;
8
- h5: string;
9
- h6: string;
10
- };
@@ -1,35 +0,0 @@
1
- import { FC, ReactNode } from 'react';
2
- import { FontColor, HeadingSize, ResponsiveProp } from '../../types';
3
- import { HEADING_LEVELS_TYPE } from './Heading.constants';
4
- export interface HeadingProps {
5
- /**
6
- * The DOM tag or react component to use for the element.
7
- * Select the appropriate semantic element (h1-h6).
8
- */
9
- as?: HEADING_LEVELS_TYPE;
10
- /**
11
- * Content of the heading. Can be a string or any valid DOM node.
12
- */
13
- children?: ReactNode;
14
- /**
15
- * Additional class names to add.
16
- */
17
- className?: string;
18
- /**
19
- * A variant token identifier to use for the text variant. Available variants found:
20
- * [here](https://github.com/hyphen/hyphen-design-tokens/blob/main/properties/color/font.json).
21
- */
22
- color?: FontColor;
23
- /**
24
- * By default, size is determined by the chosen tag (e.g. h1 is bigger than h2).
25
- * However, size can be set independently so that its size is appropriate for the surrounding content.
26
- * Available sizes found:
27
- * [here](https://github.com/hyphen/hyphen-design-tokens/blob/main/properties/size/font.json).
28
- */
29
- size?: HeadingSize | ResponsiveProp<HeadingSize>;
30
- /**
31
- * Additional props to be spread to rendered element
32
- */
33
- [x: string]: any;
34
- }
35
- export declare const Heading: FC<HeadingProps>;
@@ -1,9 +0,0 @@
1
- import { Heading } from './Heading';
2
- import type { Meta } from '@storybook/react-vite';
3
- import React from 'react';
4
- declare const meta: Meta<typeof Heading>;
5
- export default meta;
6
- export declare const Levels: () => React.JSX.Element;
7
- export declare const Sizes: () => React.JSX.Element;
8
- export declare const ResponsiveSizes: () => React.JSX.Element;
9
- export declare const Colors: () => React.JSX.Element;
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- export interface HelpTextProps {
3
- /**
4
- * Contents of the help text.
5
- */
6
- children?: React.ReactNode;
7
- /**
8
- * Additional class names to add.
9
- */
10
- className?: string;
11
- }
12
- export declare const HelpText: React.ForwardRefExoticComponent<HelpTextProps & React.RefAttributes<HTMLDivElement>>;
@@ -1,22 +0,0 @@
1
- import { FontColor, FontSize, IconName, ResponsiveProp } from '../../types';
2
- import { FC } from 'react';
3
- export interface IconProps {
4
- className?: string;
5
- /**
6
- * A color token identifier to use for the text color.
7
- */
8
- color?: FontColor | ResponsiveProp<FontColor>;
9
- /**
10
- * A [font size token](/?path=/docs/design-tokens-design-tokens--page#font-size) identifier
11
- */
12
- size?: FontSize | ResponsiveProp<FontSize>;
13
- /**
14
- * Name of the icon
15
- */
16
- name: IconName;
17
- /**
18
- * Additional props to be spread to rendered element
19
- */
20
- [x: string]: any;
21
- }
22
- export declare const Icon: FC<IconProps>;
@@ -1,10 +0,0 @@
1
- import { Icon } from './Icon';
2
- import type { Meta } from '@storybook/react-vite';
3
- import React from 'react';
4
- declare const meta: Meta<typeof Icon>;
5
- export default meta;
6
- export declare const Default: () => React.JSX.Element;
7
- export declare const Sizes: () => React.JSX.Element;
8
- export declare const Colors: () => React.JSX.Element;
9
- export declare const UnknownIcon: () => React.JSX.Element;
10
- export declare const AvailableIcons: () => React.JSX.Element;
@@ -1,9 +0,0 @@
1
- import { FC, ReactNode } from 'react';
2
- /**
3
- * Used by form inputs such as TextInput, to display a validation message for an invalid input.
4
- */
5
- export interface InputValidationMessageProps {
6
- children: ReactNode;
7
- size?: 'xs' | 'sm' | 'md';
8
- }
9
- export declare const InputValidationMessage: FC<InputValidationMessageProps>;
@@ -1,83 +0,0 @@
1
- import React, { ReactNode, RefObject } from 'react';
2
- import { BackgroundColor, CssOverflowValue } from '../../types';
3
- import { BoxProps } from '../Box/Box';
4
- import { ModalFooter, ModalHeader, ModalBody } from './components';
5
- export interface ModalProps {
6
- /**
7
- * Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
8
- */
9
- allowPinchZoom?: boolean;
10
- /**
11
- * Each modal needs to be properly labeled to provide context for users with
12
- * assistive technology such as screen readers. If a modal is announced to
13
- * the user without a label, it can be confusing and difficult to navigate.
14
- */
15
- ariaLabel?: string;
16
- /**
17
- * The id of the element that should be used as the Modal's label by assistive
18
- * technologies like screen readers. Usually the id is set on the `Modal.Header`
19
- */
20
- ariaLabelledBy?: string;
21
- /**
22
- * Contents of the dialog.
23
- */
24
- children?: ReactNode;
25
- /**
26
- * Additional ClassNames to add to dialog.
27
- */
28
- className?: string;
29
- /**
30
- * The ref of the container where the dialog will be inserted into the DOM.
31
- * By default, Modals are inserted in the document.body, but if need be they can
32
- * be scoped as necessary.
33
- */
34
- containerRef?: React.RefObject<Node>;
35
- /**
36
- * At mobile viewport widths, the modal will take up the fullscreen
37
- */
38
- fullScreenMobile?: boolean;
39
- /**
40
- * Background color for the modal content using design tokens
41
- */
42
- background?: BackgroundColor;
43
- /**
44
- * By default the first focusable element will receive focus when the dialog
45
- * opens but you can provide a ref to focus instead.
46
- *
47
- * @see Docs https://reach.tech/dialog#dialog-initialfocusref
48
- */
49
- initialFocusRef?: RefObject<HTMLDivElement>;
50
- /**
51
- * Whether the modal is visible or not
52
- */
53
- isOpen: boolean;
54
- /**
55
- * Max width for modal content. Uses the same maxWidth prop as the `Box` component,
56
- * and as such can be responsive as well.
57
- */
58
- maxWidth?: BoxProps['maxWidth'];
59
- /**
60
- * Function that is called whenever the user hits "Escape" key or clicks outside the modal.
61
- */
62
- onDismiss: (event?: React.SyntheticEvent) => void;
63
- /**
64
- * The css overflow behavior of the Modal
65
- */
66
- overflow?: CssOverflowValue;
67
- /**
68
- * Inline styles for the modal container
69
- */
70
- style?: React.CSSProperties;
71
- /**
72
- * Allows spread props
73
- */
74
- [x: string]: any;
75
- }
76
- export declare const ModalBaseComponent: React.FC<ModalProps>;
77
- export interface ModalStatic {
78
- Body: typeof ModalBody;
79
- Header: typeof ModalHeader;
80
- Footer: typeof ModalFooter;
81
- }
82
- export type ModalWithStaticComponents = typeof ModalBaseComponent & ModalStatic;
83
- export declare const Modal: ModalWithStaticComponents;
@@ -1,13 +0,0 @@
1
- import React from 'react';
2
- import { Modal } from './Modal';
3
- import type { Meta, StoryObj } from '@storybook/react-vite';
4
- declare const meta: Meta<typeof Modal>;
5
- export default meta;
6
- type Story = StoryObj<typeof Modal>;
7
- export declare const BasicUsage: () => React.JSX.Element;
8
- export declare const OpenModal: Story;
9
- export declare const BodyAndFooter: () => React.JSX.Element;
10
- export declare const CloseButton: () => React.JSX.Element;
11
- export declare const WithoutHeader: () => React.JSX.Element;
12
- export declare const FullscreenMobile: () => React.JSX.Element;
13
- export declare const MaxWidth: () => React.JSX.Element;
@@ -1,4 +0,0 @@
1
- import { FC } from 'react';
2
- import { BoxProps } from '../../../Box/Box';
3
- export type ModalBodyProps = BoxProps;
4
- export declare const ModalBody: FC<ModalBodyProps>;
@@ -1,4 +0,0 @@
1
- import { FC } from 'react';
2
- import { BoxProps } from '../../../Box/Box';
3
- export type ModalFooterProps = Omit<BoxProps, 'as' | 'radius'>;
4
- export declare const ModalFooter: FC<ModalFooterProps>;
@@ -1,21 +0,0 @@
1
- import React, { FC } from 'react';
2
- import { BoxProps } from '../../../Box/Box';
3
- export type ModalHeaderProps = Omit<BoxProps, 'as' | 'radius' | 'justifyContent'> & {
4
- /**
5
- * id of the element containing the title, used by the Modal `aria-labelledby` prop
6
- */
7
- id: string;
8
- /**
9
- * Modal's header title
10
- */
11
- title?: string;
12
- /**
13
- * Additional content to render in the modal header, displayed alongside the title.
14
- */
15
- children?: React.ReactNode;
16
- /**
17
- * If defined, will render a 'x' close button on the right side of the ModalHeader
18
- */
19
- onDismiss?: (event?: React.SyntheticEvent) => void;
20
- };
21
- export declare const ModalHeader: FC<ModalHeaderProps>;
@@ -1,4 +0,0 @@
1
- import { ModalFooter } from './ModalFooter/ModalFooter';
2
- import { ModalHeader } from './ModalHeader/ModalHeader';
3
- import { ModalBody } from './ModalBody/ModalBody';
4
- export { ModalFooter, ModalHeader, ModalBody };
@@ -1,51 +0,0 @@
1
- import { FC, ReactNode } from 'react';
2
- export interface PaginationProps {
3
- /**
4
- * The current page number being displayed.
5
- */
6
- activePage: number;
7
- /**
8
- * The number of list items contained in a page.
9
- */
10
- itemsPerPage: number;
11
- /**
12
- * Callback fired when the user clicks a page or prev/next button.
13
- */
14
- onChange: (pageNumber: number) => void;
15
- /**
16
- * The total number of items in the list
17
- */
18
- totalItemsCount: number;
19
- /**
20
- * Boolean to determine if individual page buttons (or dropdown are visible). Takes a `ResponsiveProp`
21
- * if you want to render it differently at different breakpoints
22
- */
23
- arePagesVisible?: boolean;
24
- /**
25
- * Custom class to pass down to the pagination container.
26
- */
27
- className?: string;
28
- /**
29
- * Pass true to render a version of Pagination with smaller buttons.
30
- */
31
- isCompact?: boolean;
32
- /**
33
- * Boolean to determine if the list totals (and current range) are visible.
34
- * NOTE: these are hidden on mobile regardless of this prop value.
35
- */
36
- isTotalVisible?: boolean;
37
- /**
38
- * The text (or react node) to pass to the NEXT page button.
39
- */
40
- nextPageText?: string | ReactNode;
41
- /**
42
- * Number of pages shown in paginator, not including navigation blocks (prev, next), as well as first, last pages.
43
- * In other words the number of pages displayed 'in the middle', that the user can navigate to.
44
- */
45
- numberOfPagesDisplayed?: number;
46
- /**
47
- * The text (or react node) to pass to the PREVIOUS page button.
48
- */
49
- prevPageText?: string | ReactNode;
50
- }
51
- export declare const Pagination: FC<PaginationProps>;
@@ -1,8 +0,0 @@
1
- import { Pagination } from './Pagination';
2
- import type { Meta } from '@storybook/react-vite';
3
- import React from 'react';
4
- declare const meta: Meta<typeof Pagination>;
5
- export default meta;
6
- export declare const Default: () => React.JSX.Element;
7
- export declare const Compact: () => React.JSX.Element;
8
- export declare const PageNumbers: () => React.JSX.Element;
@@ -1,10 +0,0 @@
1
- export interface Page {
2
- isPage: boolean;
3
- pageNumber: number;
4
- }
5
- export declare const generatePages: (pageTotal: number, activePage: number, numberOfPagesDisplayed: number) => Page[];
6
- export declare const generatePageTotal: (totalItemsCount: number, itemsPerPage: number) => number;
7
- export declare const generateActiveListRange: (activePage: number, totalItemsCount: number, itemsPerPage: number) => {
8
- first: number;
9
- last: number;
10
- };