@bspk/ui 1.3.21 → 1.3.23

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 (307) hide show
  1. package/dist/components/Accordion/Accordion.js +1 -1
  2. package/dist/components/Accordion/Accordion.js.map +1 -1
  3. package/dist/components/Accordion/accordion.css +19 -12
  4. package/dist/components/Accordion/accordion.css.js +19 -12
  5. package/dist/components/BottomNavigation/BottomNavigation.d.ts +0 -1
  6. package/dist/components/BottomNavigation/BottomNavigation.js +0 -1
  7. package/dist/components/BottomNavigation/BottomNavigation.js.map +1 -1
  8. package/dist/components/BottomNavigation/bottom-navigation.css +1 -0
  9. package/dist/components/BottomNavigation/bottom-navigation.css.js +1 -0
  10. package/dist/components/Button/button.css +4 -0
  11. package/dist/components/Button/button.css.js +4 -0
  12. package/dist/components/Checkbox/Checkbox.js +3 -3
  13. package/dist/components/Checkbox/Checkbox.js.map +1 -1
  14. package/dist/components/CheckboxGroup/CheckboxGroup.d.ts +4 -5
  15. package/dist/components/CheckboxGroup/CheckboxGroup.js +8 -13
  16. package/dist/components/CheckboxGroup/CheckboxGroup.js.map +1 -1
  17. package/dist/components/CheckboxGroup/CheckboxGroupExample.js +5 -0
  18. package/dist/components/CheckboxGroup/CheckboxGroupExample.js.map +1 -1
  19. package/dist/components/CheckboxGroup/checkbox-group.css +5 -0
  20. package/dist/components/CheckboxGroup/checkbox-group.css.js +5 -0
  21. package/dist/components/CheckboxGroupField/CheckboxGroupField.d.ts +3 -3
  22. package/dist/components/CheckboxGroupField/CheckboxGroupField.js +6 -4
  23. package/dist/components/CheckboxGroupField/CheckboxGroupField.js.map +1 -1
  24. package/dist/components/ChipGroup/ChipGroup.d.ts +0 -1
  25. package/dist/components/ChipGroup/ChipGroup.js +0 -1
  26. package/dist/components/ChipGroup/ChipGroup.js.map +1 -1
  27. package/dist/components/ChipGroup/chip-group.css +3 -0
  28. package/dist/components/ChipGroup/chip-group.css.js +3 -0
  29. package/dist/components/DatePicker/DatePicker.d.ts +4 -8
  30. package/dist/components/DatePicker/DatePicker.js +6 -18
  31. package/dist/components/DatePicker/DatePicker.js.map +1 -1
  32. package/dist/components/DatePicker/DatePickerExample.js +3 -3
  33. package/dist/components/DatePicker/DatePickerExample.js.map +1 -1
  34. package/dist/components/DatePickerField/DatePickerField.d.ts +4 -4
  35. package/dist/components/DatePickerField/DatePickerField.js +6 -4
  36. package/dist/components/DatePickerField/DatePickerField.js.map +1 -1
  37. package/dist/components/Dialog/Dialog.d.ts +2 -3
  38. package/dist/components/Dialog/Dialog.js +2 -3
  39. package/dist/components/Dialog/Dialog.js.map +1 -1
  40. package/dist/components/Fab/Fab.d.ts +8 -5
  41. package/dist/components/Fab/Fab.js +8 -5
  42. package/dist/components/Fab/Fab.js.map +1 -1
  43. package/dist/components/Fab/fab.css +1 -0
  44. package/dist/components/Fab/fab.css.js +1 -0
  45. package/dist/components/Field/Field.d.ts +39 -20
  46. package/dist/components/Field/Field.js +10 -40
  47. package/dist/components/Field/Field.js.map +1 -1
  48. package/dist/components/Field/FieldExample.d.ts +1 -0
  49. package/dist/components/Field/FieldExample.js +10 -3
  50. package/dist/components/Field/FieldExample.js.map +1 -1
  51. package/dist/components/Field/Fieldset.d.ts +40 -0
  52. package/dist/components/Field/Fieldset.js +44 -0
  53. package/dist/components/Field/Fieldset.js.map +1 -0
  54. package/dist/components/Field/field.css +9 -7
  55. package/dist/components/Field/field.css.js +9 -7
  56. package/dist/components/Field/index.d.ts +1 -3
  57. package/dist/components/Field/index.js +1 -3
  58. package/dist/components/Field/index.js.map +1 -1
  59. package/dist/components/Field/utils.d.ts +8 -38
  60. package/dist/components/Field/utils.js +6 -33
  61. package/dist/components/Field/utils.js.map +1 -1
  62. package/dist/components/FileUpload/FileUpload.js +1 -1
  63. package/dist/components/FileUpload/FileUpload.js.map +1 -1
  64. package/dist/components/FileUploadItem/FileUploadItem.js +1 -1
  65. package/dist/components/FileUploadItem/FileUploadItem.js.map +1 -1
  66. package/dist/components/Flex/Flex.d.ts +10 -6
  67. package/dist/components/Flex/Flex.js +10 -6
  68. package/dist/components/Flex/Flex.js.map +1 -1
  69. package/dist/components/InlineAlert/InlineAlert.d.ts +2 -2
  70. package/dist/components/InlineAlert/InlineAlert.js +2 -2
  71. package/dist/components/InlineAlert/InlineAlert.js.map +1 -1
  72. package/dist/components/Input/Input.d.ts +59 -15
  73. package/dist/components/Input/Input.js +40 -25
  74. package/dist/components/Input/Input.js.map +1 -1
  75. package/dist/components/Input/InputExample.js +4 -4
  76. package/dist/components/Input/InputExample.js.map +1 -1
  77. package/dist/components/Input/index.d.ts +0 -1
  78. package/dist/components/Input/index.js +0 -1
  79. package/dist/components/Input/index.js.map +1 -1
  80. package/dist/components/InputField/InputField.d.ts +4 -4
  81. package/dist/components/InputField/InputField.js +6 -4
  82. package/dist/components/InputField/InputField.js.map +1 -1
  83. package/dist/components/InputNumber/InputNumber.d.ts +8 -7
  84. package/dist/components/InputNumber/InputNumber.js +9 -16
  85. package/dist/components/InputNumber/InputNumber.js.map +1 -1
  86. package/dist/components/InputNumber/InputNumberExample.js +3 -3
  87. package/dist/components/InputNumber/InputNumberExample.js.map +1 -1
  88. package/dist/components/InputNumber/input-number.css +1 -0
  89. package/dist/components/InputNumber/input-number.css.js +1 -0
  90. package/dist/components/InputNumberField/InputNumberField.d.ts +4 -4
  91. package/dist/components/InputNumberField/InputNumberField.js +6 -4
  92. package/dist/components/InputNumberField/InputNumberField.js.map +1 -1
  93. package/dist/components/InputPhone/InputPhone.d.ts +8 -8
  94. package/dist/components/InputPhone/InputPhone.js +12 -18
  95. package/dist/components/InputPhone/InputPhone.js.map +1 -1
  96. package/dist/components/InputPhone/InputPhoneExample.js +3 -3
  97. package/dist/components/InputPhone/InputPhoneExample.js.map +1 -1
  98. package/dist/components/InputPhone/input-phone.css +1 -0
  99. package/dist/components/InputPhone/input-phone.css.js +1 -0
  100. package/dist/components/InputPhoneField/InputPhoneField.d.ts +4 -4
  101. package/dist/components/InputPhoneField/InputPhoneField.js +6 -4
  102. package/dist/components/InputPhoneField/InputPhoneField.js.map +1 -1
  103. package/dist/components/Link/Link.d.ts +0 -1
  104. package/dist/components/Link/Link.js +0 -1
  105. package/dist/components/Link/Link.js.map +1 -1
  106. package/dist/components/ListItem/list-item.css +1 -0
  107. package/dist/components/ListItem/list-item.css.js +1 -0
  108. package/dist/components/Modal/Modal.js +22 -26
  109. package/dist/components/Modal/Modal.js.map +1 -1
  110. package/dist/components/Modal/ModalExample.js +4 -1
  111. package/dist/components/Modal/ModalExample.js.map +1 -1
  112. package/dist/components/Modal/modal.css +4 -2
  113. package/dist/components/Modal/modal.css.js +4 -2
  114. package/dist/components/OTPInput/otp-input.css +1 -0
  115. package/dist/components/OTPInput/otp-input.css.js +1 -0
  116. package/dist/components/Pagination/Pagination.js +2 -2
  117. package/dist/components/Pagination/Pagination.js.map +1 -1
  118. package/dist/components/Password/Password.d.ts +9 -7
  119. package/dist/components/Password/Password.js +13 -17
  120. package/dist/components/Password/Password.js.map +1 -1
  121. package/dist/components/Password/PasswordExample.js +3 -3
  122. package/dist/components/Password/PasswordExample.js.map +1 -1
  123. package/dist/components/PasswordField/PasswordField.d.ts +4 -4
  124. package/dist/components/PasswordField/PasswordField.js +6 -4
  125. package/dist/components/PasswordField/PasswordField.js.map +1 -1
  126. package/dist/components/Popover/Popover.d.ts +0 -1
  127. package/dist/components/Popover/Popover.js +0 -1
  128. package/dist/components/Popover/Popover.js.map +1 -1
  129. package/dist/components/RadioGroup/RadioGroup.d.ts +1 -2
  130. package/dist/components/RadioGroup/RadioGroup.js +5 -11
  131. package/dist/components/RadioGroup/RadioGroup.js.map +1 -1
  132. package/dist/components/RadioGroup/radio-group.css +3 -0
  133. package/dist/components/RadioGroup/radio-group.css.js +3 -0
  134. package/dist/components/RadioGroupField/RadioGroupField.d.ts +3 -3
  135. package/dist/components/RadioGroupField/RadioGroupField.js +6 -4
  136. package/dist/components/RadioGroupField/RadioGroupField.js.map +1 -1
  137. package/dist/components/SearchBar/SearchBar.d.ts +0 -1
  138. package/dist/components/SearchBar/SearchBar.js +0 -1
  139. package/dist/components/SearchBar/SearchBar.js.map +1 -1
  140. package/dist/components/SegmentedControl/SegmentedControl.d.ts +0 -1
  141. package/dist/components/SegmentedControl/SegmentedControl.js +0 -1
  142. package/dist/components/SegmentedControl/SegmentedControl.js.map +1 -1
  143. package/dist/components/Select/Select.d.ts +7 -6
  144. package/dist/components/Select/Select.js +10 -15
  145. package/dist/components/Select/Select.js.map +1 -1
  146. package/dist/components/Select/SelectExample.js +3 -3
  147. package/dist/components/Select/SelectExample.js.map +1 -1
  148. package/dist/components/Select/select.css +0 -10
  149. package/dist/components/Select/select.css.js +0 -10
  150. package/dist/components/SelectField/SelectField.d.ts +4 -4
  151. package/dist/components/SelectField/SelectField.js +6 -4
  152. package/dist/components/SelectField/SelectField.js.map +1 -1
  153. package/dist/components/Slider/Slider.d.ts +1 -2
  154. package/dist/components/Slider/Slider.js +1 -2
  155. package/dist/components/Slider/Slider.js.map +1 -1
  156. package/dist/components/Snackbar/Snackbar.d.ts +0 -1
  157. package/dist/components/Snackbar/Snackbar.js +0 -1
  158. package/dist/components/Snackbar/Snackbar.js.map +1 -1
  159. package/dist/components/Switch/Switch.d.ts +0 -1
  160. package/dist/components/Switch/Switch.js +0 -1
  161. package/dist/components/Switch/Switch.js.map +1 -1
  162. package/dist/components/TabGroup/TabGroup.d.ts +0 -1
  163. package/dist/components/TabGroup/TabGroup.js +0 -1
  164. package/dist/components/TabGroup/TabGroup.js.map +1 -1
  165. package/dist/components/TabList/TabList.d.ts +0 -1
  166. package/dist/components/TabList/TabList.js +0 -1
  167. package/dist/components/TabList/TabList.js.map +1 -1
  168. package/dist/components/TabList/tab-list.css +1 -0
  169. package/dist/components/TabList/tab-list.css.js +1 -0
  170. package/dist/components/Table/table.css +2 -1
  171. package/dist/components/Table/table.css.js +2 -1
  172. package/dist/components/Textarea/Textarea.d.ts +4 -7
  173. package/dist/components/Textarea/Textarea.js +5 -16
  174. package/dist/components/Textarea/Textarea.js.map +1 -1
  175. package/dist/components/Textarea/TextareaExample.js +3 -3
  176. package/dist/components/Textarea/TextareaExample.js.map +1 -1
  177. package/dist/components/TextareaField/TextareaField.d.ts +4 -4
  178. package/dist/components/TextareaField/TextareaField.js +6 -4
  179. package/dist/components/TextareaField/TextareaField.js.map +1 -1
  180. package/dist/components/TimePicker/TimePicker.d.ts +8 -6
  181. package/dist/components/TimePicker/TimePicker.js +10 -14
  182. package/dist/components/TimePicker/TimePicker.js.map +1 -1
  183. package/dist/components/TimePicker/TimePickerExample.js +3 -3
  184. package/dist/components/TimePicker/TimePickerExample.js.map +1 -1
  185. package/dist/components/TimePickerField/TimePickerField.d.ts +4 -4
  186. package/dist/components/TimePickerField/TimePickerField.js +6 -4
  187. package/dist/components/TimePickerField/TimePickerField.js.map +1 -1
  188. package/dist/hooks/useFloating.d.ts +0 -6
  189. package/dist/hooks/useFloating.js +0 -6
  190. package/dist/hooks/useFloating.js.map +1 -1
  191. package/dist/styles/base.css +71 -81
  192. package/dist/styles/base.css.js +71 -81
  193. package/dist/types/common.d.ts +3 -0
  194. package/dist/types/common.js.map +1 -1
  195. package/package.json +3 -4
  196. package/src/components/Accordion/Accordion.tsx +2 -2
  197. package/src/components/Accordion/accordion.scss +10 -1
  198. package/src/components/BottomNavigation/BottomNavigation.tsx +0 -1
  199. package/src/components/BottomNavigation/bottom-navigation.scss +1 -0
  200. package/src/components/Button/button.scss +4 -0
  201. package/src/components/Checkbox/Checkbox.tsx +3 -3
  202. package/src/components/CheckboxGroup/CheckboxGroup.tsx +37 -52
  203. package/src/components/CheckboxGroup/CheckboxGroupExample.tsx +6 -0
  204. package/src/components/CheckboxGroup/checkbox-group.scss +6 -0
  205. package/src/components/CheckboxGroupField/CheckboxGroupField.tsx +16 -11
  206. package/src/components/ChipGroup/ChipGroup.tsx +0 -1
  207. package/src/components/ChipGroup/chip-group.scss +4 -0
  208. package/src/components/DatePicker/DatePicker.tsx +9 -20
  209. package/src/components/DatePicker/DatePickerExample.tsx +3 -5
  210. package/src/components/DatePickerField/DatePickerField.rtl.test.tsx +1 -1
  211. package/src/components/DatePickerField/DatePickerField.tsx +11 -6
  212. package/src/components/Dialog/Dialog.tsx +2 -3
  213. package/src/components/Fab/Fab.tsx +8 -5
  214. package/src/components/Fab/fab.scss +1 -0
  215. package/src/components/Field/Field.rtl.test.tsx +8 -6
  216. package/src/components/Field/Field.tsx +71 -63
  217. package/src/components/Field/FieldExample.tsx +27 -5
  218. package/src/components/Field/Fieldset.tsx +82 -0
  219. package/src/components/Field/field.scss +27 -26
  220. package/src/components/Field/index.tsx +1 -3
  221. package/src/components/Field/utils.ts +15 -77
  222. package/src/components/FileUpload/FileUpload.tsx +1 -1
  223. package/src/components/FileUploadItem/FileUploadItem.tsx +1 -1
  224. package/src/components/Flex/Flex.tsx +10 -6
  225. package/src/components/InlineAlert/InlineAlert.rtl.test.tsx +1 -1
  226. package/src/components/InlineAlert/InlineAlert.tsx +3 -3
  227. package/src/components/Input/Input.tsx +135 -48
  228. package/src/components/Input/InputExample.tsx +4 -6
  229. package/src/components/Input/index.tsx +0 -1
  230. package/src/components/InputField/InputField.tsx +11 -6
  231. package/src/components/InputNumber/InputNumber.tsx +11 -16
  232. package/src/components/InputNumber/InputNumberExample.tsx +7 -4
  233. package/src/components/InputNumber/input-number.scss +1 -0
  234. package/src/components/InputNumberField/InputNumberField.tsx +11 -6
  235. package/src/components/InputPhone/InputPhone.tsx +14 -18
  236. package/src/components/InputPhone/InputPhoneExample.tsx +7 -6
  237. package/src/components/InputPhone/input-phone.scss +1 -0
  238. package/src/components/InputPhoneField/InputPhoneField.tsx +11 -6
  239. package/src/components/Link/Link.tsx +0 -1
  240. package/src/components/ListItem/list-item.scss +1 -0
  241. package/src/components/Modal/Modal.tsx +26 -30
  242. package/src/components/Modal/ModalExample.tsx +7 -2
  243. package/src/components/Modal/modal.scss +1 -1
  244. package/src/components/OTPInput/otp-input.scss +1 -0
  245. package/src/components/Pagination/Pagination.tsx +2 -2
  246. package/src/components/Password/Password.tsx +15 -17
  247. package/src/components/Password/PasswordExample.tsx +13 -5
  248. package/src/components/PasswordField/PasswordField.tsx +11 -6
  249. package/src/components/Popover/Popover.tsx +0 -1
  250. package/src/components/RadioGroup/RadioGroup.tsx +14 -20
  251. package/src/components/RadioGroup/radio-group.scss +4 -0
  252. package/src/components/RadioGroupField/RadioGroupField.tsx +16 -11
  253. package/src/components/SearchBar/SearchBar.tsx +0 -1
  254. package/src/components/SegmentedControl/SegmentedControl.tsx +0 -1
  255. package/src/components/Select/Select.tsx +13 -14
  256. package/src/components/Select/SelectExample.tsx +7 -4
  257. package/src/components/Select/select.scss +0 -12
  258. package/src/components/SelectField/SelectField.rtl.test.tsx +7 -18
  259. package/src/components/SelectField/SelectField.tsx +11 -6
  260. package/src/components/Slider/Slider.tsx +1 -2
  261. package/src/components/Snackbar/Snackbar.tsx +0 -1
  262. package/src/components/Switch/Switch.tsx +0 -1
  263. package/src/components/TabGroup/TabGroup.tsx +0 -1
  264. package/src/components/TabList/TabList.tsx +0 -1
  265. package/src/components/TabList/tab-list.scss +1 -0
  266. package/src/components/Table/table.scss +2 -1
  267. package/src/components/Textarea/Textarea.tsx +8 -17
  268. package/src/components/Textarea/TextareaExample.tsx +3 -5
  269. package/src/components/TextareaField/TextareaField.tsx +11 -6
  270. package/src/components/TimePicker/TimePicker.tsx +12 -15
  271. package/src/components/TimePicker/TimePickerExample.tsx +3 -5
  272. package/src/components/TimePickerField/TimePickerField.tsx +11 -6
  273. package/src/hooks/useFloating.ts +0 -6
  274. package/src/styles/base.scss +109 -87
  275. package/src/types/common.ts +9 -0
  276. package/dist/components/Field/FieldDescription.d.ts +0 -9
  277. package/dist/components/Field/FieldDescription.js +0 -13
  278. package/dist/components/Field/FieldDescription.js.map +0 -1
  279. package/dist/components/Field/FieldError.d.ts +0 -11
  280. package/dist/components/Field/FieldError.js +0 -14
  281. package/dist/components/Field/FieldError.js.map +0 -1
  282. package/dist/components/Field/FieldLabel.d.ts +0 -21
  283. package/dist/components/Field/FieldLabel.js +0 -14
  284. package/dist/components/Field/FieldLabel.js.map +0 -1
  285. package/dist/components/FormField/FormField.d.ts +0 -66
  286. package/dist/components/FormField/FormField.js +0 -31
  287. package/dist/components/FormField/FormField.js.map +0 -1
  288. package/dist/components/FormField/FormFieldExample.d.ts +0 -9
  289. package/dist/components/FormField/FormFieldExample.js +0 -99
  290. package/dist/components/FormField/FormFieldExample.js.map +0 -1
  291. package/dist/components/FormField/index.d.ts +0 -1
  292. package/dist/components/FormField/index.js +0 -2
  293. package/dist/components/FormField/index.js.map +0 -1
  294. package/dist/components/Input/InputElement.d.ts +0 -82
  295. package/dist/components/Input/InputElement.js +0 -64
  296. package/dist/components/Input/InputElement.js.map +0 -1
  297. package/dist/components/Link/link.css +0 -18
  298. package/dist/components/Link/link.css.js +0 -23
  299. package/src/components/Field/FieldDescription.tsx +0 -17
  300. package/src/components/Field/FieldError.tsx +0 -25
  301. package/src/components/Field/FieldLabel.tsx +0 -44
  302. package/src/components/FormField/FormField.rtl.test.tsx +0 -20
  303. package/src/components/FormField/FormField.tsx +0 -95
  304. package/src/components/FormField/FormFieldExample.tsx +0 -277
  305. package/src/components/FormField/index.tsx +0 -1
  306. package/src/components/Input/InputElement.tsx +0 -192
  307. package/src/components/Link/link.scss +0 -21
@@ -1,14 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { errorMessageId, useFieldContext } from './utils';
3
- import { InlineAlert } from '../InlineAlert';
4
- /**
5
- * FieldError component displays an error message associated with a form field.
6
- *
7
- * @name FieldError
8
- * @parent Field
9
- */
10
- export function FieldError({ children }) {
11
- const { id } = useFieldContext();
12
- return (children && (_jsx(InlineAlert, { id: errorMessageId(id), owner: "field-error", variant: "error", children: children })));
13
- }
14
- //# sourceMappingURL=FieldError.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"FieldError.js","sourceRoot":"","sources":["../../../src/components/Field/FieldError.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAOvD;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAmB;IACpD,MAAM,EAAE,EAAE,EAAE,GAAG,eAAe,EAAE,CAAC;IAEjC,OAAO,CACH,QAAQ,IAAI,CACR,KAAC,WAAW,IAAC,EAAE,EAAE,cAAc,CAAC,EAAE,CAAC,EAAE,KAAK,EAAC,aAAa,EAAC,OAAO,EAAC,OAAO,YACnE,QAAQ,GACC,CACjB,CACJ,CAAC;AACN,CAAC"}
@@ -1,21 +0,0 @@
1
- import { ElementType } from 'react';
2
- import { FieldContext } from './utils';
3
- import { ElementProps } from '-/types/common';
4
- export type FieldLabelProps<As extends ElementType = ElementType> = Pick<FieldContext, 'labelTrailing' | 'required'> & {
5
- /** The label text. */
6
- children: string;
7
- /**
8
- * The element type to render as.
9
- *
10
- * @default label
11
- * @type ElementType
12
- */
13
- as?: As;
14
- };
15
- /**
16
- * FieldLabel component displays a label associated with a form field.
17
- *
18
- * @name FieldLabel
19
- * @parent Field
20
- */
21
- export declare function FieldLabel<As extends ElementType = ElementType>({ children, labelTrailing, as, ...props }: ElementProps<FieldLabelProps<As>, As>): import("react/jsx-runtime").JSX.Element;
@@ -1,14 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useFieldContext, labelledById } from './utils';
3
- /**
4
- * FieldLabel component displays a label associated with a form field.
5
- *
6
- * @name FieldLabel
7
- * @parent Field
8
- */
9
- export function FieldLabel({ children, labelTrailing, as, ...props }) {
10
- const As = as || 'label';
11
- const { required, id, htmlFor, ...context } = useFieldContext();
12
- return (_jsxs(As, { "data-bspk": "field-label", htmlFor: As === 'label' ? htmlFor : undefined, id: labelledById(id), ...props, children: [_jsx("span", { children: children }), required && _jsx("span", { "data-required": true, children: ' (Required)' }), (labelTrailing || context.labelTrailing) && (_jsx("span", { "aria-hidden": true, "data-trailing": true, children: labelTrailing || context.labelTrailing }))] }));
13
- }
14
- //# sourceMappingURL=FieldLabel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"FieldLabel.js","sourceRoot":"","sources":["../../../src/components/Field/FieldLabel.tsx"],"names":[],"mappings":";AACA,OAAO,EAAgB,eAAe,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAetE;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CAAuC,EAC7D,QAAQ,EACR,aAAa,EACb,EAAE,EACF,GAAG,KAAK,EAC4B;IACpC,MAAM,EAAE,GAAG,EAAE,IAAI,OAAO,CAAC;IAEzB,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,OAAO,EAAE,GAAG,eAAe,EAAE,CAAC;IAEhE,OAAO,CACH,MAAC,EAAE,iBAAW,aAAa,EAAC,OAAO,EAAE,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE,EAAE,YAAY,CAAC,EAAE,CAAC,KAAM,KAAK,aACtG,yBAAO,QAAQ,GAAQ,EACtB,QAAQ,IAAI,gDAAqB,aAAa,GAAQ,EACtD,CAAC,aAAa,IAAI,OAAO,CAAC,aAAa,CAAC,IAAI,CACzC,qEACK,aAAa,IAAI,OAAO,CAAC,aAAa,GACpC,CACV,IACA,CACR,CAAC;AACN,CAAC"}
@@ -1,66 +0,0 @@
1
- import { ElementType, ReactNode } from 'react';
2
- import { CommonProps } from '-/types/common';
3
- export type FormFieldControlProps<P extends Record<string, unknown>> = Omit<FormFieldProps, 'children'> & Omit<P, keyof FormFieldProps>;
4
- export type FormFieldProps<As extends ElementType = ElementType> = CommonProps<'style'> & {
5
- /** Displays an error message and marks the field as invalid. */
6
- errorMessage?: string;
7
- /**
8
- * The label of the field.
9
- *
10
- * @required
11
- */
12
- label: string;
13
- /**
14
- * The children of the form field. This should at least contain a FieldLabel component and a control such as
15
- * DatePicker, Input, InputNumber, InputPhone, Password, Select, Textarea, or TimePicker.
16
- *
17
- * Other components such as FieldDescription and FieldError can also be included.
18
- *
19
- * @required
20
- */
21
- children: ReactNode;
22
- /**
23
- * This text provides additional context or instructions for the field.
24
- *
25
- * If an errorMessage is present, the helperText will not be displayed.
26
- */
27
- helperText?: string;
28
- /** The trailing element of the label. */
29
- labelTrailing?: string;
30
- /** Marks the field as required. */
31
- required?: boolean;
32
- /**
33
- * The element type to render as.
34
- *
35
- * With grouped fields, this is typically set to "fieldset".
36
- *
37
- * @default div
38
- * @type ElementType
39
- */
40
- as?: As;
41
- };
42
- /**
43
- * Wrapper component for form controls.
44
- *
45
- * Children should be one of the following: DatePicker, Input, InputNumber, InputPhone, Password, Select, Textarea, or
46
- * TimePicker.
47
- *
48
- * @example
49
- * import { Input } from '@bspk/ui/Input';
50
- * import { FormField } from '@bspk/ui/FormField';
51
- *
52
- * () => {
53
- * const [state, setState] = useState<string | undefined>(undefined);
54
- *
55
- * return (
56
- * <FormField controlId="Example controlId" label="Example label">
57
- * <Input name="example-text" onChange={(next) => setState(next)} value={state} />
58
- * </FormField>
59
- * );
60
- * };
61
- *
62
- * @name FormField
63
- * @phase Utility
64
- */
65
- export declare function FormField({ label, errorMessage, helperText, children, labelTrailing, required, as, style, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
66
- /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
@@ -1,31 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Field, FieldLabel, FieldDescription, FieldError } from '../Field';
3
- /**
4
- * Wrapper component for form controls.
5
- *
6
- * Children should be one of the following: DatePicker, Input, InputNumber, InputPhone, Password, Select, Textarea, or
7
- * TimePicker.
8
- *
9
- * @example
10
- * import { Input } from '@bspk/ui/Input';
11
- * import { FormField } from '@bspk/ui/FormField';
12
- *
13
- * () => {
14
- * const [state, setState] = useState<string | undefined>(undefined);
15
- *
16
- * return (
17
- * <FormField controlId="Example controlId" label="Example label">
18
- * <Input name="example-text" onChange={(next) => setState(next)} value={state} />
19
- * </FormField>
20
- * );
21
- * };
22
- *
23
- * @name FormField
24
- * @phase Utility
25
- */
26
- export function FormField({ label, errorMessage, helperText, children, labelTrailing, required, as, style, }) {
27
- const fieldAs = as || 'div';
28
- const labelAs = fieldAs === 'fieldset' ? 'legend' : undefined;
29
- return (_jsxs(Field, { as: fieldAs, style: style, children: [_jsx(FieldLabel, { as: labelAs, labelTrailing: labelTrailing, required: required, children: label }), children, !errorMessage && helperText && _jsx(FieldDescription, { children: helperText }), _jsx(FieldError, { children: errorMessage })] }));
30
- }
31
- //# sourceMappingURL=FormField.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AA6CrF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,SAAS,CAAC,EACtB,KAAK,EACL,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,EAAE,EACF,KAAK,GACQ;IACb,MAAM,OAAO,GAAG,EAAE,IAAI,KAAK,CAAC;IAE5B,MAAM,OAAO,GAAG,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAC9D,OAAO,CACH,MAAC,KAAK,IAAC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,aAC5B,KAAC,UAAU,IAAC,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,YACpE,KAAK,GACG,EACZ,QAAQ,EACR,CAAC,YAAY,IAAI,UAAU,IAAI,KAAC,gBAAgB,cAAE,UAAU,GAAoB,EACjF,KAAC,UAAU,cAAE,YAAY,GAAc,IACnC,CACX,CAAC;AACN,CAAC"}
@@ -1,9 +0,0 @@
1
- import { FormFieldProps } from '.';
2
- import { FieldControlProps } from '-/types/common';
3
- import { ComponentExample, Preset, Syntax } from '-/utils/demo';
4
- export type ExampleProps = Partial<FieldControlProps & FormFieldProps>;
5
- export declare const presets: Preset<Partial<ExampleProps>>[];
6
- export declare const FormFieldExample: ComponentExample<ExampleProps>;
7
- export declare function FormFieldExampleRender({ ...props }: ExampleProps & {
8
- syntax?: Syntax;
9
- }): import("react/jsx-runtime").JSX.Element;
@@ -1,99 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { useState } from 'react';
3
- import { FormField } from '.';
4
- import { Button } from '../Button';
5
- import { CheckboxGroup } from '../CheckboxGroup';
6
- import { DatePicker } from '../DatePicker';
7
- import { Input } from '../Input';
8
- import { InputNumber } from '../InputNumber';
9
- import { InputPhone } from '../InputPhone';
10
- import { Password } from '../Password';
11
- import { RadioGroup } from '../RadioGroup';
12
- import { Select } from '../Select';
13
- import { SwitchOption } from '../SwitchOption';
14
- import { Textarea } from '../Textarea';
15
- import { TimePicker } from '../TimePicker';
16
- export const presets = [
17
- {
18
- label: 'Control Disabled',
19
- propState: { disabled: true },
20
- },
21
- ];
22
- export const FormFieldExample = {
23
- defaultState: {},
24
- disableProps: [],
25
- presets: presets,
26
- render: ({ props, Component }) => (_jsx(Component, { ...props, children: _jsx(Input, { name: "input", onChange: () => { }, placeholder: "Example input", value: "" }) })),
27
- sections: [
28
- {
29
- title: 'Form Field Example',
30
- content: ({ Syntax: syntax, props }) => (_jsxs(_Fragment, { children: [_jsx("p", { children: "This example demonstrates the FormField component wrapping various form controls including CheckboxGroup, RadioGroup, DatePicker, Input, InputNumber, InputPhone, Password, Select, Textarea, and TimePicker. It showcases how to manage state and handle form submissions." }), _jsxs("p", { children: ["All the controls have a HTML input element inside of them so they will work with form submissions natively. You can see the raw submitted", ' ', _jsx("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/FormData", children: "FormData" }), " at the bottom after clicking the Submit button."] }), _jsx(FormFieldExampleRender, { ...props, syntax: syntax })] })),
31
- location: 'afterDemo',
32
- },
33
- ],
34
- variants: false,
35
- };
36
- export function FormFieldExampleRender({ ...props }) {
37
- const [value, setValueState] = useState({});
38
- const setValue = (next) => {
39
- setValueState((prev) => ({ ...prev, ...next }));
40
- };
41
- const [formValues, setFormValues] = useState({});
42
- const [disabled, setDisabled] = useState(!!props.disabled);
43
- const [required, setRequired] = useState(!!props.required);
44
- const [fieldProps, setFieldProps] = useState({
45
- errorMessage: false,
46
- description: false,
47
- });
48
- const internalProps = (label) => {
49
- return {
50
- errorMessage: fieldProps.errorMessage ? `This is an error message for the ${label}.` : undefined,
51
- helperText: fieldProps.description ? `This is a description for the ${label}.` : undefined,
52
- label,
53
- };
54
- };
55
- return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
56
- display: 'flex',
57
- flexDirection: 'row',
58
- }, children: [_jsx(SwitchOption, { checked: fieldProps.errorMessage, label: "Has Error", name: "hasError", onChange: (checked) => setFieldProps((prev) => ({ ...prev, errorMessage: checked })), value: "hasError" }), _jsx(SwitchOption, { checked: disabled, label: "Disabled", name: "disabled", onChange: setDisabled, value: "disabled" }), _jsx(SwitchOption, { checked: required, label: "Required", name: "required", onChange: setRequired, value: "required" }), _jsx(SwitchOption, { checked: !!fieldProps.description, label: "With Description", name: "description", onChange: (checked) => setFieldProps((prev) => ({ ...prev, description: checked })), value: "description" })] }), _jsxs("form", { onReset: () => {
59
- setValueState({});
60
- setFormValues({});
61
- }, onSubmit: (e) => {
62
- e.preventDefault();
63
- const formData = new FormData(e.currentTarget);
64
- const next = {};
65
- // handle multiple form entries with the same name
66
- formData.forEach((fieldValue, key) => {
67
- if (next[key]) {
68
- if (Array.isArray(next[key])) {
69
- next[key].push(fieldValue);
70
- }
71
- else {
72
- next[key] = [next[key], fieldValue];
73
- }
74
- }
75
- else {
76
- next[key] = fieldValue;
77
- }
78
- });
79
- setFormValues(next);
80
- }, style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-sizing-04)', width: '400px' }, children: [_jsx(FormField, { ...props, as: "fieldset", ...internalProps('CheckboxGroup'), children: _jsx(CheckboxGroup, { disabled: disabled, name: "checkbox-group", onChange: (next) => setValue({ 'checkbox-group': next }), options: [
81
- { label: 'Option 1', value: 'option1' },
82
- { label: 'Option 2', value: 'option2' },
83
- { label: 'Option 3', value: 'option3' },
84
- ], required: required, value: value['checkbox-group'] }) }), _jsx(FormField, { ...props, as: "fieldset", ...internalProps('RadioGroup'), children: _jsx(RadioGroup, { disabled: disabled, name: "radio-group", onChange: (next) => setValue({ 'radio-group': next }), options: [
85
- { label: 'Option 1', value: 'option1' },
86
- { label: 'Option 2', value: 'option2' },
87
- { label: 'Option 3', value: 'option3' },
88
- ], required: required, value: value['radio-group'] }) }), _jsx(FormField, { ...props, ...internalProps('DatePicker'), children: _jsx(DatePicker, { disabled: disabled, name: "date-picker", onChange: (next) => setValue({ 'date-picker': next }), placeholder: "Example input", required: required, value: value['date-picker'] }) }), _jsx(FormField, { ...props, ...internalProps('Input'), children: _jsx(Input, { disabled: disabled, name: "input", onChange: (next) => setValue({ input: next }), placeholder: "Example input", required: required, value: value['input'] }) }), _jsx(FormField, { ...props, ...internalProps('InputNumber'), children: _jsx(InputNumber, { disabled: disabled, name: "input-number", onChange: (next) => setValue({ 'input-number': next }), required: required, value: value['input-number'] }) }), _jsx(FormField, { ...props, ...internalProps('InputPhone'), children: _jsx(InputPhone, { disabled: disabled, name: "input-phone", onChange: (next) => setValue({ 'input-phone': next }), required: required, value: value['input-phone'] }) }), _jsx(FormField, { ...props, ...internalProps('Password'), children: _jsx(Password, { disabled: disabled, name: "password", onChange: (next) => setValue({ password: next }), required: required, value: value['password'] }) }), _jsx(FormField, { ...props, ...internalProps('Select'), children: _jsx(Select, { disabled: disabled, name: "select", onChange: (next) => setValue({ select: next }), options: [
89
- { label: 'Option 1', value: 'option1' },
90
- { label: 'Option 2', value: 'option2' },
91
- { label: 'Option 3', value: 'option3' },
92
- ], placeholder: "Example input", required: required, value: value['select'] }) }), _jsx(FormField, { ...props, ...internalProps('Textarea'), children: _jsx(Textarea, { disabled: disabled, name: "textarea", onChange: (next) => setValue({ textarea: next }), placeholder: "Example input", required: required, value: value['textarea'] }) }), _jsx(FormField, { ...props, ...internalProps('TimePicker'), children: _jsx(TimePicker, { disabled: disabled, name: "time-picker", onChange: (next) => setValue({ 'time-picker': next }), required: required, value: value['time-picker'] }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-sizing-02)' }, children: [_jsx(Button, { label: "Reset", type: "reset", variant: "secondary" }), _jsx(Button, { label: "Submit", type: "submit", variant: "primary" })] }), _jsx("code", { style: {
93
- background: 'var(--surface-neutral-t3-low)',
94
- // fontWeight: 'bold',
95
- padding: 'var(--spacing-sizing-02)',
96
- borderRadius: 'var(--radius-sm)',
97
- }, children: _jsx("pre", { children: `// Raw FormData\n\n${JSON.stringify(formValues, null, 2)}` }) })] })] }));
98
- }
99
- //# sourceMappingURL=FormFieldExample.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"FormFieldExample.js","sourceRoot":"","sources":["../../../src/components/FormField/FormFieldExample.tsx"],"names":[],"mappings":"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"}
@@ -1 +0,0 @@
1
- export * from './FormField';
@@ -1,2 +0,0 @@
1
- export * from './FormField';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FormField/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}
@@ -1,82 +0,0 @@
1
- import './input.scss';
2
- import { HTMLInputTypeAttribute, ReactNode } from 'react';
3
- import { FieldContextProps } from '-/components/Field';
4
- import { CommonProps, ElementProps, SetRef, FieldControlProps } from '-/types/common';
5
- export declare const DEFAULT: {
6
- readonly size: "medium";
7
- readonly value: "";
8
- readonly type: Extract<HTMLInputTypeAttribute, "number" | "text">;
9
- readonly autoComplete: "off";
10
- };
11
- export type InputElementBaseProps = CommonProps<'owner' | 'size'> & FieldControlProps & Pick<FieldContextProps, 'ariaDescribedBy' | 'ariaErrorMessage'> & {
12
- /** The ref of the container. */
13
- containerRef?: SetRef<HTMLDivElement>;
14
- /** The ref of the input. */
15
- inputRef?: SetRef<HTMLInputElement>;
16
- /**
17
- * The trailing element to display in the field.
18
- *
19
- * @exampleType string
20
- */
21
- trailing?: ReactNode;
22
- /**
23
- * The leading element to display in the field.
24
- *
25
- * @exampleType string
26
- */
27
- leading?: ReactNode;
28
- /** The placeholder of the field. */
29
- placeholder?: string;
30
- /**
31
- * The type of the input.
32
- *
33
- * @default text
34
- */
35
- type?: Extract<HTMLInputTypeAttribute, 'number' | 'password' | 'text'>;
36
- /**
37
- * Specifies if user agent has any permission to provide automated assistance in filling out form field values
38
- *
39
- * @default off
40
- */
41
- autoComplete?: 'off' | 'on';
42
- /**
43
- * Specifies if the clear button should be shown. This should almost always be true, but can be set to false.
44
- *
45
- * @default true
46
- */
47
- showClearButton?: boolean;
48
- };
49
- export type InputElementProps = InputElementBaseProps & {
50
- inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof InputElementBaseProps>;
51
- };
52
- /**
53
- * An input that allows users to enter text, numbers or symbols in a singular line. This is a utility element and is not
54
- * intended to be used directly but rather through the Input, and other components.
55
- *
56
- * @example
57
- * import { useState } from 'react';
58
- * import { InputElement } from '@bspk/ui/InputElement';
59
- * import { Field, FieldLabel } from '@bspk/ui/Field';
60
- *
61
- * () => {
62
- * const [value, setValue] = useState('');
63
- *
64
- * return (
65
- * <>
66
- * // standalone input element example
67
- * <InputElement name="example-name" onChange={setValue} value={value} />
68
- * <br />
69
- * // input element used within a field
70
- * <Field>
71
- * <FieldLabel>Example Label</FieldLabel>
72
- * <InputElement name="example-name" onChange={setValue} value={value} />
73
- * </Field>
74
- * </>
75
- * );
76
- * };
77
- *
78
- * @name InputElement
79
- * @phase Utility
80
- */
81
- export declare function InputElement({ invalid, onChange, size, value, name, 'aria-label': ariaLabel, inputRef, required, placeholder, id, leading, trailing, type, readOnly, disabled, autoComplete, containerRef, showClearButton: showClearButtonProp, owner, inputProps, ariaDescribedBy, ariaErrorMessage, ...props }: ElementProps<InputElementProps, 'div'>): import("react/jsx-runtime").JSX.Element;
82
- /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
@@ -1,64 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import './input.css.js';
3
- import { SvgCancel } from '@bspk/icons/Cancel';
4
- import { useMemo, useRef } from 'react';
5
- import { Button } from '../Button';
6
- import { useTimeout } from '../../hooks/useTimeout';
7
- export const DEFAULT = {
8
- size: 'medium',
9
- value: '',
10
- type: 'text',
11
- autoComplete: 'off',
12
- };
13
- /**
14
- * An input that allows users to enter text, numbers or symbols in a singular line. This is a utility element and is not
15
- * intended to be used directly but rather through the Input, and other components.
16
- *
17
- * @example
18
- * import { useState } from 'react';
19
- * import { InputElement } from '@bspk/ui/InputElement';
20
- * import { Field, FieldLabel } from '@bspk/ui/Field';
21
- *
22
- * () => {
23
- * const [value, setValue] = useState('');
24
- *
25
- * return (
26
- * <>
27
- * // standalone input element example
28
- * <InputElement name="example-name" onChange={setValue} value={value} />
29
- * <br />
30
- * // input element used within a field
31
- * <Field>
32
- * <FieldLabel>Example Label</FieldLabel>
33
- * <InputElement name="example-name" onChange={setValue} value={value} />
34
- * </Field>
35
- * </>
36
- * );
37
- * };
38
- *
39
- * @name InputElement
40
- * @phase Utility
41
- */
42
- export function InputElement({ invalid, onChange, size = DEFAULT.size, value = DEFAULT.value, name, 'aria-label': ariaLabel = 'Input', inputRef, required = false, placeholder, id, leading, trailing, type = DEFAULT.type, readOnly, disabled, autoComplete = DEFAULT.autoComplete, containerRef, showClearButton: showClearButtonProp = true, owner, inputProps, ariaDescribedBy, ariaErrorMessage, ...props }) {
43
- const showClearButton = useMemo(() => showClearButtonProp !== false && !readOnly && !disabled && !!value?.toString().length, [showClearButtonProp, readOnly, disabled, value]);
44
- const inputRefInternal = useRef(null);
45
- const focusTimeout = useTimeout();
46
- return (_jsxs("div", { ...props, "data-bspk": "input", "data-bspk-owner": owner || undefined, "data-disabled": disabled || undefined, "data-empty": !value.toString().length || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "data-show-clear-button": showClearButton || undefined, "data-size": size, ref: containerRef, children: [leading && _jsx("span", { "data-leading": true, children: leading }), _jsx("input", { ...inputProps, "aria-describedby": ariaDescribedBy || undefined, "aria-errormessage": ariaErrorMessage || undefined, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, autoComplete: autoComplete, "data-main-input": true, disabled: disabled || undefined, id: id, name: name, onBlur: (event) => {
47
- inputProps?.onBlur?.(event);
48
- }, onChange: (event) => {
49
- onChange(event.target.value, event);
50
- }, onFocus: (event) => {
51
- inputProps?.onFocus?.(event);
52
- }, placeholder: placeholder || ' ', readOnly: readOnly || undefined, ref: (node) => {
53
- if (!node)
54
- return;
55
- inputRef?.(node);
56
- inputRefInternal.current = node;
57
- }, required: required || undefined, type: type, value: value || '' }), trailing && _jsx("span", { "data-trailing": true, children: trailing }), showClearButton && (_jsx(Button, { "data-clear-button": true, icon: _jsx(SvgCancel, {}), iconOnly: true, label: "Clear", onClick: () => {
58
- onChange('');
59
- inputRefInternal.current?.focus();
60
- }, onFocus: () => {
61
- focusTimeout.clear();
62
- }, size: size, variant: "tertiary" }))] }));
63
- }
64
- //# sourceMappingURL=InputElement.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"InputElement.js","sourceRoot":"","sources":["../../../src/components/Input/InputElement.tsx"],"names":[],"mappings":"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"}
@@ -1,18 +0,0 @@
1
- [data-bspk=link] {
2
- display: inline-flex;
3
- flex-direction: row;
4
- align-items: center;
5
- gap: var(--spacing-sizing-01);
6
- font: var(--labels-base);
7
- }
8
- [data-bspk=link][data-size=large] {
9
- font: var(--labels-large);
10
- }
11
- [data-bspk=link][data-size=small] {
12
- font: var(--labels-small);
13
- }
14
- [data-bspk=link] svg {
15
- width: var(--spacing-sizing-05);
16
- }
17
-
18
- /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
@@ -1,23 +0,0 @@
1
- /** * This file is generated by the build script.
2
- * Do not edit this file directly. */
3
- const style = document.createElement('style');
4
- style.appendChild(document.createTextNode(`[data-bspk=link] {
5
- display: inline-flex;
6
- flex-direction: row;
7
- align-items: center;
8
- gap: var(--spacing-sizing-01);
9
- font: var(--labels-base);
10
- }
11
- [data-bspk=link][data-size=large] {
12
- font: var(--labels-large);
13
- }
14
- [data-bspk=link][data-size=small] {
15
- font: var(--labels-small);
16
- }
17
- [data-bspk=link] svg {
18
- width: var(--spacing-sizing-05);
19
- }
20
-
21
- /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
22
- `));
23
- document.head.appendChild(style);
@@ -1,17 +0,0 @@
1
- import { useFieldContext, describedById } from './utils';
2
-
3
- /**
4
- * FieldDescription component displays a description associated with a form field.
5
- *
6
- * @name FieldDescription
7
- * @parent Field
8
- */
9
- export function FieldDescription({ children }: { children?: string }) {
10
- const { id } = useFieldContext();
11
-
12
- return children ? (
13
- <p data-bspk="field-description" id={describedById(id)}>
14
- {children}
15
- </p>
16
- ) : null;
17
- }
@@ -1,25 +0,0 @@
1
- import { errorMessageId, useFieldContext } from './utils';
2
- import { InlineAlert } from '-/components/InlineAlert';
3
-
4
- export type FieldErrorProps = {
5
- /** The error message text. */
6
- children?: string;
7
- };
8
-
9
- /**
10
- * FieldError component displays an error message associated with a form field.
11
- *
12
- * @name FieldError
13
- * @parent Field
14
- */
15
- export function FieldError({ children }: FieldErrorProps) {
16
- const { id } = useFieldContext();
17
-
18
- return (
19
- children && (
20
- <InlineAlert id={errorMessageId(id)} owner="field-error" variant="error">
21
- {children}
22
- </InlineAlert>
23
- )
24
- );
25
- }
@@ -1,44 +0,0 @@
1
- import { ElementType } from 'react';
2
- import { FieldContext, useFieldContext, labelledById } from './utils';
3
- import { ElementProps } from '-/types/common';
4
-
5
- export type FieldLabelProps<As extends ElementType = ElementType> = Pick<FieldContext, 'labelTrailing' | 'required'> & {
6
- /** The label text. */
7
- children: string;
8
- /**
9
- * The element type to render as.
10
- *
11
- * @default label
12
- * @type ElementType
13
- */
14
- as?: As;
15
- };
16
-
17
- /**
18
- * FieldLabel component displays a label associated with a form field.
19
- *
20
- * @name FieldLabel
21
- * @parent Field
22
- */
23
- export function FieldLabel<As extends ElementType = ElementType>({
24
- children,
25
- labelTrailing,
26
- as,
27
- ...props
28
- }: ElementProps<FieldLabelProps<As>, As>) {
29
- const As = as || 'label';
30
-
31
- const { required, id, htmlFor, ...context } = useFieldContext();
32
-
33
- return (
34
- <As data-bspk="field-label" htmlFor={As === 'label' ? htmlFor : undefined} id={labelledById(id)} {...props}>
35
- <span>{children}</span>
36
- {required && <span data-required>{' (Required)'}</span>}
37
- {(labelTrailing || context.labelTrailing) && (
38
- <span aria-hidden data-trailing>
39
- {labelTrailing || context.labelTrailing}
40
- </span>
41
- )}
42
- </As>
43
- );
44
- }
@@ -1,20 +0,0 @@
1
- import { FormFieldExampleRender, presets } from './FormFieldExample';
2
- import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
3
- import { render } from '-/rtl/util';
4
-
5
- describe('FormField (RTL)', () => {
6
- presets.forEach((preset) => {
7
- it(
8
- `has no basic a11y issues - ${preset.label}`,
9
- hasNoBasicA11yIssues(<FormFieldExampleRender {...preset.propState} />),
10
- );
11
- });
12
-
13
- it('renders', () => {
14
- const { getByText } = render(<FormFieldExampleRender {...presets[0].propState} />);
15
-
16
- expect(getByText('InputPhone')).toBeInTheDocument();
17
- });
18
- });
19
-
20
- /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */