@dsn-starter-kit/components-react 3.0.0 → 3.1.0

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 (386) hide show
  1. package/README.md +32 -4
  2. package/dist/ActionGroup/ActionGroup.d.mts +51 -0
  3. package/dist/ActionGroup/ActionGroup.d.mts.map +1 -0
  4. package/dist/ActionGroup/ActionGroup2.mjs +65 -0
  5. package/dist/ActionGroup/ActionGroup2.mjs.map +1 -0
  6. package/dist/ActionGroup/index.d.mts +2 -0
  7. package/dist/Alert/Alert.d.mts +85 -0
  8. package/dist/Alert/Alert.d.mts.map +1 -0
  9. package/dist/Alert/Alert2.mjs +102 -0
  10. package/dist/Alert/Alert2.mjs.map +1 -0
  11. package/dist/Alert/index.d.mts +2 -0
  12. package/dist/Backdrop/Backdrop.d.mts +28 -0
  13. package/dist/Backdrop/Backdrop.d.mts.map +1 -0
  14. package/dist/Backdrop/Backdrop2.mjs +32 -0
  15. package/dist/Backdrop/Backdrop2.mjs.map +1 -0
  16. package/dist/Backdrop/index.d.mts +2 -0
  17. package/dist/Body/Body.d.mts +29 -0
  18. package/dist/Body/Body.d.mts.map +1 -0
  19. package/dist/Body/Body2.mjs +36 -0
  20. package/dist/Body/Body2.mjs.map +1 -0
  21. package/dist/Body/index.d.mts +2 -0
  22. package/dist/BreadcrumbNavigation/BreadcrumbNavigation.d.mts +45 -0
  23. package/dist/BreadcrumbNavigation/BreadcrumbNavigation.d.mts.map +1 -0
  24. package/dist/BreadcrumbNavigation/BreadcrumbNavigation2.mjs +51 -0
  25. package/dist/BreadcrumbNavigation/BreadcrumbNavigation2.mjs.map +1 -0
  26. package/dist/BreadcrumbNavigation/BreadcrumbNavigationItem.d.mts +41 -0
  27. package/dist/BreadcrumbNavigation/BreadcrumbNavigationItem.d.mts.map +1 -0
  28. package/dist/BreadcrumbNavigation/BreadcrumbNavigationItem.mjs +48 -0
  29. package/dist/BreadcrumbNavigation/BreadcrumbNavigationItem.mjs.map +1 -0
  30. package/dist/BreadcrumbNavigation/index.d.mts +3 -0
  31. package/dist/BreakoutSection/BreakoutSection.d.mts +32 -0
  32. package/dist/BreakoutSection/BreakoutSection.d.mts.map +1 -0
  33. package/dist/BreakoutSection/BreakoutSection2.mjs +36 -0
  34. package/dist/BreakoutSection/BreakoutSection2.mjs.map +1 -0
  35. package/dist/BreakoutSection/index.d.mts +2 -0
  36. package/dist/Button/Button.d.mts +92 -0
  37. package/dist/Button/Button.d.mts.map +1 -0
  38. package/dist/Button/Button2.mjs +76 -0
  39. package/dist/Button/Button2.mjs.map +1 -0
  40. package/dist/Button/index.d.mts +2 -0
  41. package/dist/ButtonLink/ButtonLink.d.mts +94 -0
  42. package/dist/ButtonLink/ButtonLink.d.mts.map +1 -0
  43. package/dist/ButtonLink/ButtonLink2.mjs +70 -0
  44. package/dist/ButtonLink/ButtonLink2.mjs.map +1 -0
  45. package/dist/ButtonLink/index.d.mts +2 -0
  46. package/dist/Card/Card.d.mts +107 -0
  47. package/dist/Card/Card.d.mts.map +1 -0
  48. package/dist/Card/Card2.mjs +125 -0
  49. package/dist/Card/Card2.mjs.map +1 -0
  50. package/dist/Card/index.d.mts +2 -0
  51. package/dist/Checkbox/Checkbox.d.mts +20 -0
  52. package/dist/Checkbox/Checkbox.d.mts.map +1 -0
  53. package/dist/Checkbox/Checkbox2.mjs +43 -0
  54. package/dist/Checkbox/Checkbox2.mjs.map +1 -0
  55. package/dist/Checkbox/index.d.mts +2 -0
  56. package/dist/CheckboxGroup/CheckboxGroup.d.mts +39 -0
  57. package/dist/CheckboxGroup/CheckboxGroup.d.mts.map +1 -0
  58. package/dist/CheckboxGroup/CheckboxGroup2.mjs +46 -0
  59. package/dist/CheckboxGroup/CheckboxGroup2.mjs.map +1 -0
  60. package/dist/CheckboxGroup/index.d.mts +2 -0
  61. package/dist/CheckboxOption/CheckboxOption.d.mts +17 -0
  62. package/dist/CheckboxOption/CheckboxOption.d.mts.map +1 -0
  63. package/dist/CheckboxOption/CheckboxOption2.mjs +29 -0
  64. package/dist/CheckboxOption/CheckboxOption2.mjs.map +1 -0
  65. package/dist/CheckboxOption/index.d.mts +2 -0
  66. package/dist/Container/Container.d.mts +43 -0
  67. package/dist/Container/Container.d.mts.map +1 -0
  68. package/dist/Container/Container2.mjs +42 -0
  69. package/dist/Container/Container2.mjs.map +1 -0
  70. package/dist/Container/index.d.mts +2 -0
  71. package/dist/DateInput/DateInput.d.mts +38 -0
  72. package/dist/DateInput/DateInput.d.mts.map +1 -0
  73. package/dist/DateInput/DateInput2.mjs +69 -0
  74. package/dist/DateInput/DateInput2.mjs.map +1 -0
  75. package/dist/DateInput/index.d.mts +2 -0
  76. package/dist/DateInputGroup/DateInputGroup.d.mts +67 -0
  77. package/dist/DateInputGroup/DateInputGroup.d.mts.map +1 -0
  78. package/dist/DateInputGroup/DateInputGroup2.mjs +120 -0
  79. package/dist/DateInputGroup/DateInputGroup2.mjs.map +1 -0
  80. package/dist/DateInputGroup/index.d.mts +2 -0
  81. package/dist/Details/Details.d.mts +48 -0
  82. package/dist/Details/Details.d.mts.map +1 -0
  83. package/dist/Details/Details2.mjs +61 -0
  84. package/dist/Details/Details2.mjs.map +1 -0
  85. package/dist/Details/index.d.mts +2 -0
  86. package/dist/DotBadge/DotBadge.d.mts +44 -0
  87. package/dist/DotBadge/DotBadge.d.mts.map +1 -0
  88. package/dist/DotBadge/DotBadge2.mjs +42 -0
  89. package/dist/DotBadge/DotBadge2.mjs.map +1 -0
  90. package/dist/DotBadge/index.d.mts +2 -0
  91. package/dist/Drawer/Drawer.d.mts +111 -0
  92. package/dist/Drawer/Drawer.d.mts.map +1 -0
  93. package/dist/Drawer/Drawer2.mjs +156 -0
  94. package/dist/Drawer/Drawer2.mjs.map +1 -0
  95. package/dist/Drawer/index.d.mts +2 -0
  96. package/dist/EmailInput/EmailInput.d.mts +40 -0
  97. package/dist/EmailInput/EmailInput.d.mts.map +1 -0
  98. package/dist/EmailInput/EmailInput.mjs +39 -0
  99. package/dist/EmailInput/EmailInput.mjs.map +1 -0
  100. package/dist/EmailInput/index.d.mts +2 -0
  101. package/dist/File/File.d.mts +124 -0
  102. package/dist/File/File.d.mts.map +1 -0
  103. package/dist/File/File2.mjs +196 -0
  104. package/dist/File/File2.mjs.map +1 -0
  105. package/dist/File/index.d.mts +2 -0
  106. package/dist/FileInput/FileInput.d.mts +38 -0
  107. package/dist/FileInput/FileInput.d.mts.map +1 -0
  108. package/dist/FileInput/FileInput2.mjs +41 -0
  109. package/dist/FileInput/FileInput2.mjs.map +1 -0
  110. package/dist/FileInput/index.d.mts +2 -0
  111. package/dist/FormField/FormField.d.mts +103 -0
  112. package/dist/FormField/FormField.d.mts.map +1 -0
  113. package/dist/FormField/FormField2.mjs +101 -0
  114. package/dist/FormField/FormField2.mjs.map +1 -0
  115. package/dist/FormField/index.d.mts +2 -0
  116. package/dist/FormFieldDescription/FormFieldDescription.d.mts +53 -0
  117. package/dist/FormFieldDescription/FormFieldDescription.d.mts.map +1 -0
  118. package/dist/FormFieldDescription/FormFieldDescription2.mjs +49 -0
  119. package/dist/FormFieldDescription/FormFieldDescription2.mjs.map +1 -0
  120. package/dist/FormFieldDescription/index.d.mts +2 -0
  121. package/dist/FormFieldErrorMessage/FormFieldErrorMessage.d.mts +42 -0
  122. package/dist/FormFieldErrorMessage/FormFieldErrorMessage.d.mts.map +1 -0
  123. package/dist/FormFieldErrorMessage/FormFieldErrorMessage2.mjs +44 -0
  124. package/dist/FormFieldErrorMessage/FormFieldErrorMessage2.mjs.map +1 -0
  125. package/dist/FormFieldErrorMessage/index.d.mts +2 -0
  126. package/dist/FormFieldLabel/FormFieldLabel.d.mts +40 -0
  127. package/dist/FormFieldLabel/FormFieldLabel.d.mts.map +1 -0
  128. package/dist/FormFieldLabel/FormFieldLabel2.mjs +42 -0
  129. package/dist/FormFieldLabel/FormFieldLabel2.mjs.map +1 -0
  130. package/dist/FormFieldLabel/index.d.mts +2 -0
  131. package/dist/FormFieldLegend/FormFieldLegend.d.mts +41 -0
  132. package/dist/FormFieldLegend/FormFieldLegend.d.mts.map +1 -0
  133. package/dist/FormFieldLegend/FormFieldLegend2.mjs +43 -0
  134. package/dist/FormFieldLegend/FormFieldLegend2.mjs.map +1 -0
  135. package/dist/FormFieldLegend/index.d.mts +2 -0
  136. package/dist/FormFieldStatus/FormFieldStatus.d.mts +62 -0
  137. package/dist/FormFieldStatus/FormFieldStatus.d.mts.map +1 -0
  138. package/dist/FormFieldStatus/FormFieldStatus2.mjs +54 -0
  139. package/dist/FormFieldStatus/FormFieldStatus2.mjs.map +1 -0
  140. package/dist/FormFieldStatus/index.d.mts +2 -0
  141. package/dist/FormFieldset/FormFieldset.d.mts +100 -0
  142. package/dist/FormFieldset/FormFieldset.d.mts.map +1 -0
  143. package/dist/FormFieldset/FormFieldset2.mjs +100 -0
  144. package/dist/FormFieldset/FormFieldset2.mjs.map +1 -0
  145. package/dist/FormFieldset/index.d.mts +2 -0
  146. package/dist/Grid/Grid.d.mts +37 -0
  147. package/dist/Grid/Grid.d.mts.map +1 -0
  148. package/dist/Grid/Grid2.mjs +38 -0
  149. package/dist/Grid/Grid2.mjs.map +1 -0
  150. package/dist/Grid/GridItem.d.mts +87 -0
  151. package/dist/Grid/GridItem.d.mts.map +1 -0
  152. package/dist/Grid/GridItem.mjs +48 -0
  153. package/dist/Grid/GridItem.mjs.map +1 -0
  154. package/dist/Grid/index.d.mts +3 -0
  155. package/dist/Heading/Heading.d.mts +40 -0
  156. package/dist/Heading/Heading.d.mts.map +1 -0
  157. package/dist/Heading/Heading2.mjs +33 -0
  158. package/dist/Heading/Heading2.mjs.map +1 -0
  159. package/dist/Heading/index.d.mts +2 -0
  160. package/dist/HeadingGroup/HeadingGroup.d.mts +25 -0
  161. package/dist/HeadingGroup/HeadingGroup.d.mts.map +1 -0
  162. package/dist/HeadingGroup/HeadingGroup2.mjs +24 -0
  163. package/dist/HeadingGroup/HeadingGroup2.mjs.map +1 -0
  164. package/dist/HeadingGroup/index.d.mts +2 -0
  165. package/dist/Hero/Hero.d.mts +47 -0
  166. package/dist/Hero/Hero.d.mts.map +1 -0
  167. package/dist/Hero/Hero2.mjs +50 -0
  168. package/dist/Hero/Hero2.mjs.map +1 -0
  169. package/dist/Hero/index.d.mts +2 -0
  170. package/dist/Icon/Icon.d.mts +47 -0
  171. package/dist/Icon/Icon.d.mts.map +1 -0
  172. package/dist/Icon/Icon2.mjs +47 -0
  173. package/dist/Icon/Icon2.mjs.map +1 -0
  174. package/dist/Icon/icon-registry.generated.d.mts +8 -0
  175. package/dist/Icon/icon-registry.generated.d.mts.map +1 -0
  176. package/dist/Icon/icon-registry.generated.mjs +818 -0
  177. package/dist/Icon/icon-registry.generated.mjs.map +1 -0
  178. package/dist/Icon/index.d.mts +3 -0
  179. package/dist/IconList/IconList.d.mts +68 -0
  180. package/dist/IconList/IconList.d.mts.map +1 -0
  181. package/dist/IconList/IconList2.mjs +65 -0
  182. package/dist/IconList/IconList2.mjs.map +1 -0
  183. package/dist/IconList/index.d.mts +2 -0
  184. package/dist/Image/Image.d.mts +56 -0
  185. package/dist/Image/Image.d.mts.map +1 -0
  186. package/dist/Image/Image2.mjs +67 -0
  187. package/dist/Image/Image2.mjs.map +1 -0
  188. package/dist/Image/index.d.mts +2 -0
  189. package/dist/Link/Link.d.mts +82 -0
  190. package/dist/Link/Link.d.mts.map +1 -0
  191. package/dist/Link/Link2.mjs +73 -0
  192. package/dist/Link/Link2.mjs.map +1 -0
  193. package/dist/Link/index.d.mts +2 -0
  194. package/dist/LinkButton/LinkButton.d.mts +54 -0
  195. package/dist/LinkButton/LinkButton.d.mts.map +1 -0
  196. package/dist/LinkButton/LinkButton2.mjs +48 -0
  197. package/dist/LinkButton/LinkButton2.mjs.map +1 -0
  198. package/dist/LinkButton/index.d.mts +2 -0
  199. package/dist/Logo/Logo.d.mts +35 -0
  200. package/dist/Logo/Logo.d.mts.map +1 -0
  201. package/dist/Logo/Logo2.mjs +66 -0
  202. package/dist/Logo/Logo2.mjs.map +1 -0
  203. package/dist/Logo/index.d.mts +2 -0
  204. package/dist/Menu/Menu.d.mts +58 -0
  205. package/dist/Menu/Menu.d.mts.map +1 -0
  206. package/dist/Menu/Menu2.mjs +47 -0
  207. package/dist/Menu/Menu2.mjs.map +1 -0
  208. package/dist/Menu/index.d.mts +2 -0
  209. package/dist/MenuButton/MenuButton.d.mts +56 -0
  210. package/dist/MenuButton/MenuButton.d.mts.map +1 -0
  211. package/dist/MenuButton/MenuButton2.mjs +57 -0
  212. package/dist/MenuButton/MenuButton2.mjs.map +1 -0
  213. package/dist/MenuButton/index.d.mts +2 -0
  214. package/dist/MenuLink/MenuLink.d.mts +98 -0
  215. package/dist/MenuLink/MenuLink.d.mts.map +1 -0
  216. package/dist/MenuLink/MenuLink2.mjs +98 -0
  217. package/dist/MenuLink/MenuLink2.mjs.map +1 -0
  218. package/dist/MenuLink/index.d.mts +2 -0
  219. package/dist/ModalDialog/ModalDialog.d.mts +97 -0
  220. package/dist/ModalDialog/ModalDialog.d.mts.map +1 -0
  221. package/dist/ModalDialog/ModalDialog2.mjs +134 -0
  222. package/dist/ModalDialog/ModalDialog2.mjs.map +1 -0
  223. package/dist/ModalDialog/index.d.mts +2 -0
  224. package/dist/Note/Note.d.mts +95 -0
  225. package/dist/Note/Note.d.mts.map +1 -0
  226. package/dist/Note/Note2.mjs +116 -0
  227. package/dist/Note/Note2.mjs.map +1 -0
  228. package/dist/Note/index.d.mts +2 -0
  229. package/dist/NumberBadge/NumberBadge.d.mts +44 -0
  230. package/dist/NumberBadge/NumberBadge.d.mts.map +1 -0
  231. package/dist/NumberBadge/NumberBadge2.mjs +50 -0
  232. package/dist/NumberBadge/NumberBadge2.mjs.map +1 -0
  233. package/dist/NumberBadge/index.d.mts +2 -0
  234. package/dist/NumberInput/NumberInput.d.mts +47 -0
  235. package/dist/NumberInput/NumberInput.d.mts.map +1 -0
  236. package/dist/NumberInput/NumberInput.mjs +40 -0
  237. package/dist/NumberInput/NumberInput.mjs.map +1 -0
  238. package/dist/NumberInput/index.d.mts +2 -0
  239. package/dist/OptionLabel/OptionLabel.d.mts +15 -0
  240. package/dist/OptionLabel/OptionLabel.d.mts.map +1 -0
  241. package/dist/OptionLabel/OptionLabel2.mjs +22 -0
  242. package/dist/OptionLabel/OptionLabel2.mjs.map +1 -0
  243. package/dist/OptionLabel/index.d.mts +2 -0
  244. package/dist/OrderedList/OrderedList.d.mts +34 -0
  245. package/dist/OrderedList/OrderedList.d.mts.map +1 -0
  246. package/dist/OrderedList/OrderedList2.mjs +37 -0
  247. package/dist/OrderedList/OrderedList2.mjs.map +1 -0
  248. package/dist/OrderedList/index.d.mts +2 -0
  249. package/dist/PageBody/PageBody.d.mts +35 -0
  250. package/dist/PageBody/PageBody.d.mts.map +1 -0
  251. package/dist/PageBody/PageBody2.mjs +40 -0
  252. package/dist/PageBody/PageBody2.mjs.map +1 -0
  253. package/dist/PageBody/index.d.mts +2 -0
  254. package/dist/PageFooter/PageFooter.d.mts +57 -0
  255. package/dist/PageFooter/PageFooter.d.mts.map +1 -0
  256. package/dist/PageFooter/PageFooter2.mjs +78 -0
  257. package/dist/PageFooter/PageFooter2.mjs.map +1 -0
  258. package/dist/PageFooter/index.d.mts +2 -0
  259. package/dist/PageHeader/PageHeader.d.mts +192 -0
  260. package/dist/PageHeader/PageHeader.d.mts.map +1 -0
  261. package/dist/PageHeader/PageHeader2.mjs +275 -0
  262. package/dist/PageHeader/PageHeader2.mjs.map +1 -0
  263. package/dist/PageHeader/index.d.mts +2 -0
  264. package/dist/PageLayout/PageLayout.d.mts +40 -0
  265. package/dist/PageLayout/PageLayout.d.mts.map +1 -0
  266. package/dist/PageLayout/PageLayout2.mjs +42 -0
  267. package/dist/PageLayout/PageLayout2.mjs.map +1 -0
  268. package/dist/PageLayout/index.d.mts +2 -0
  269. package/dist/Paragraph/Paragraph.d.mts +37 -0
  270. package/dist/Paragraph/Paragraph.d.mts.map +1 -0
  271. package/dist/Paragraph/Paragraph2.mjs +34 -0
  272. package/dist/Paragraph/Paragraph2.mjs.map +1 -0
  273. package/dist/Paragraph/index.d.mts +2 -0
  274. package/dist/PasswordInput/PasswordInput.d.mts +54 -0
  275. package/dist/PasswordInput/PasswordInput.d.mts.map +1 -0
  276. package/dist/PasswordInput/PasswordInput.mjs +43 -0
  277. package/dist/PasswordInput/PasswordInput.mjs.map +1 -0
  278. package/dist/PasswordInput/index.d.mts +2 -0
  279. package/dist/Popover/Popover.d.mts +118 -0
  280. package/dist/Popover/Popover.d.mts.map +1 -0
  281. package/dist/Popover/Popover2.mjs +235 -0
  282. package/dist/Popover/Popover2.mjs.map +1 -0
  283. package/dist/Popover/index.d.mts +2 -0
  284. package/dist/PreHeading/PreHeading.d.mts +10 -0
  285. package/dist/PreHeading/PreHeading.d.mts.map +1 -0
  286. package/dist/PreHeading/PreHeading2.mjs +18 -0
  287. package/dist/PreHeading/PreHeading2.mjs.map +1 -0
  288. package/dist/PreHeading/index.d.mts +2 -0
  289. package/dist/ProgressBar/ProgressBar.d.mts +60 -0
  290. package/dist/ProgressBar/ProgressBar.d.mts.map +1 -0
  291. package/dist/ProgressBar/ProgressBar2.mjs +73 -0
  292. package/dist/ProgressBar/ProgressBar2.mjs.map +1 -0
  293. package/dist/ProgressBar/index.d.mts +2 -0
  294. package/dist/Radio/Radio.d.mts +16 -0
  295. package/dist/Radio/Radio.d.mts.map +1 -0
  296. package/dist/Radio/Radio2.mjs +31 -0
  297. package/dist/Radio/Radio2.mjs.map +1 -0
  298. package/dist/Radio/index.d.mts +2 -0
  299. package/dist/RadioGroup/RadioGroup.d.mts +39 -0
  300. package/dist/RadioGroup/RadioGroup.d.mts.map +1 -0
  301. package/dist/RadioGroup/RadioGroup2.mjs +46 -0
  302. package/dist/RadioGroup/RadioGroup2.mjs.map +1 -0
  303. package/dist/RadioGroup/index.d.mts +2 -0
  304. package/dist/RadioOption/RadioOption.d.mts +17 -0
  305. package/dist/RadioOption/RadioOption.d.mts.map +1 -0
  306. package/dist/RadioOption/RadioOption2.mjs +29 -0
  307. package/dist/RadioOption/RadioOption2.mjs.map +1 -0
  308. package/dist/RadioOption/index.d.mts +2 -0
  309. package/dist/SearchInput/SearchInput.d.mts +41 -0
  310. package/dist/SearchInput/SearchInput.d.mts.map +1 -0
  311. package/dist/SearchInput/SearchInput2.mjs +48 -0
  312. package/dist/SearchInput/SearchInput2.mjs.map +1 -0
  313. package/dist/SearchInput/index.d.mts +2 -0
  314. package/dist/Select/Select.d.mts +53 -0
  315. package/dist/Select/Select.d.mts.map +1 -0
  316. package/dist/Select/Select2.mjs +61 -0
  317. package/dist/Select/Select2.mjs.map +1 -0
  318. package/dist/Select/index.d.mts +2 -0
  319. package/dist/SkipLink/SkipLink.d.mts +37 -0
  320. package/dist/SkipLink/SkipLink.d.mts.map +1 -0
  321. package/dist/SkipLink/SkipLink2.mjs +33 -0
  322. package/dist/SkipLink/SkipLink2.mjs.map +1 -0
  323. package/dist/SkipLink/index.d.mts +2 -0
  324. package/dist/Spinner/Spinner.d.mts +45 -0
  325. package/dist/Spinner/Spinner.d.mts.map +1 -0
  326. package/dist/Spinner/Spinner2.mjs +58 -0
  327. package/dist/Spinner/Spinner2.mjs.map +1 -0
  328. package/dist/Spinner/index.d.mts +2 -0
  329. package/dist/Stack/Stack.d.mts +37 -0
  330. package/dist/Stack/Stack.d.mts.map +1 -0
  331. package/dist/Stack/Stack2.mjs +38 -0
  332. package/dist/Stack/Stack2.mjs.map +1 -0
  333. package/dist/Stack/index.d.mts +2 -0
  334. package/dist/StatusBadge/StatusBadge.d.mts +52 -0
  335. package/dist/StatusBadge/StatusBadge.d.mts.map +1 -0
  336. package/dist/StatusBadge/StatusBadge2.mjs +49 -0
  337. package/dist/StatusBadge/StatusBadge2.mjs.map +1 -0
  338. package/dist/StatusBadge/index.d.mts +2 -0
  339. package/dist/SummaryList/SummaryList.d.mts +51 -0
  340. package/dist/SummaryList/SummaryList.d.mts.map +1 -0
  341. package/dist/SummaryList/SummaryList2.mjs +66 -0
  342. package/dist/SummaryList/SummaryList2.mjs.map +1 -0
  343. package/dist/SummaryList/index.d.mts +2 -0
  344. package/dist/Table/Table.d.mts +63 -0
  345. package/dist/Table/Table.d.mts.map +1 -0
  346. package/dist/Table/Table2.mjs +54 -0
  347. package/dist/Table/Table2.mjs.map +1 -0
  348. package/dist/Table/index.d.mts +2 -0
  349. package/dist/TableOfContents/TableOfContents.d.mts +64 -0
  350. package/dist/TableOfContents/TableOfContents.d.mts.map +1 -0
  351. package/dist/TableOfContents/TableOfContents2.mjs +51 -0
  352. package/dist/TableOfContents/TableOfContents2.mjs.map +1 -0
  353. package/dist/TableOfContents/index.d.mts +2 -0
  354. package/dist/TelephoneInput/TelephoneInput.d.mts +40 -0
  355. package/dist/TelephoneInput/TelephoneInput.d.mts.map +1 -0
  356. package/dist/TelephoneInput/TelephoneInput.mjs +39 -0
  357. package/dist/TelephoneInput/TelephoneInput.mjs.map +1 -0
  358. package/dist/TelephoneInput/index.d.mts +2 -0
  359. package/dist/TextArea/TextArea.d.mts +46 -0
  360. package/dist/TextArea/TextArea.d.mts.map +1 -0
  361. package/dist/TextArea/TextArea2.mjs +43 -0
  362. package/dist/TextArea/TextArea2.mjs.map +1 -0
  363. package/dist/TextArea/index.d.mts +2 -0
  364. package/dist/TextInput/TextInput.d.mts +46 -0
  365. package/dist/TextInput/TextInput.d.mts.map +1 -0
  366. package/dist/TextInput/TextInput2.mjs +43 -0
  367. package/dist/TextInput/TextInput2.mjs.map +1 -0
  368. package/dist/TextInput/index.d.mts +2 -0
  369. package/dist/TimeInput/TimeInput.d.mts +38 -0
  370. package/dist/TimeInput/TimeInput.d.mts.map +1 -0
  371. package/dist/TimeInput/TimeInput2.mjs +69 -0
  372. package/dist/TimeInput/TimeInput2.mjs.map +1 -0
  373. package/dist/TimeInput/index.d.mts +2 -0
  374. package/dist/UnorderedList/UnorderedList.d.mts +28 -0
  375. package/dist/UnorderedList/UnorderedList.d.mts.map +1 -0
  376. package/dist/UnorderedList/UnorderedList2.mjs +31 -0
  377. package/dist/UnorderedList/UnorderedList2.mjs.map +1 -0
  378. package/dist/UnorderedList/index.d.mts +2 -0
  379. package/dist/index.css +3470 -3470
  380. package/dist/index.d.mts +150 -3874
  381. package/dist/index.mjs +76 -5006
  382. package/dist/utils/describeControl.mjs +25 -0
  383. package/dist/utils/describeControl.mjs.map +1 -0
  384. package/package.json +4 -3
  385. package/dist/index.d.mts.map +0 -1
  386. package/dist/index.mjs.map +0 -1
package/dist/index.d.mts CHANGED
@@ -1,3874 +1,150 @@
1
- import React from "react";
2
- import { FormControlWidth } from "@dsn-starter-kit/core";
3
- //#region src/ActionGroup/ActionGroup.d.ts
4
- interface ActionGroupProps extends React.HTMLAttributes<HTMLUListElement> {
5
- /**
6
- * Richting van de groep — horizontale rij met wrapping of verticale kolom
7
- * @default 'horizontal'
8
- */
9
- direction?: 'horizontal' | 'vertical';
10
- /**
11
- * `Button`- en/of `Link`-componenten
12
- */
13
- children?: React.ReactNode;
14
- }
15
- /**
16
- * ActionGroup component
17
- * Groepeert gerelateerde acties en verzorgt de lay-out van Buttons en Links.
18
- * Horizontale richting (default) wraps automatisch bij te weinig ruimte.
19
- * Rendert als `<ul>` met elke actie in een `<li>`, zodat screenreaders het
20
- * aantal acties en de groepsnaam aankondigen (zie issue #295).
21
- *
22
- * @example
23
- * ```tsx
24
- * // Horizontaal (default)
25
- * <ActionGroup>
26
- * <Button variant="strong">Opslaan</Button>
27
- * <Button variant="subtle">Annuleren</Button>
28
- * </ActionGroup>
29
- *
30
- * // Horizontaal met Link
31
- * <ActionGroup>
32
- * <Button variant="strong">Volgende stap</Button>
33
- * <Link href="/">Terug naar overzicht</Link>
34
- * </ActionGroup>
35
- *
36
- * // Verticaal
37
- * <ActionGroup direction="vertical">
38
- * <Button variant="strong">Primaire actie</Button>
39
- * <Button variant="subtle">Secundaire actie</Button>
40
- * </ActionGroup>
41
- *
42
- * // Aangepast aria-label
43
- * <ActionGroup aria-label="Formulierknoppen">
44
- * <Button variant="strong" type="submit">Verstuur</Button>
45
- * <Button variant="subtle">Annuleren</Button>
46
- * </ActionGroup>
47
- * ```
48
- */
49
- declare const ActionGroup: React.ForwardRefExoticComponent<ActionGroupProps & React.RefAttributes<HTMLUListElement>>;
50
- //#endregion
51
- //#region src/Body/Body.d.ts
52
- interface BodyProps extends React.HTMLAttributes<HTMLDivElement> {
53
- /**
54
- * Child-elementen die de document-level stijlen erven
55
- */
56
- children?: React.ReactNode;
57
- }
58
- /**
59
- * Body component
60
- * Stelt document-level CSS stijlen in via CSS inheritance zodat alle child-elementen
61
- * automatisch de juiste typografie, kleur en achtergrond erven.
62
- *
63
- * @example
64
- * ```tsx
65
- * // In een applicatie: wrap de root-content
66
- * <Body>
67
- * <h1>Mijn pagina</h1>
68
- * <p>Inhoud met geërfde stijlen</p>
69
- * </Body>
70
- *
71
- * // Of pas de CSS class direct toe op het <body> element
72
- * // <body class="dsn-body">
73
- * ```
74
- */
75
- declare const Body: React.ForwardRefExoticComponent<BodyProps & React.RefAttributes<HTMLDivElement>>;
76
- //#endregion
77
- //#region src/BreakoutSection/BreakoutSection.d.ts
78
- type BreakoutSectionAs = 'div' | 'section' | 'article' | 'aside';
79
- interface BreakoutSectionProps extends React.HTMLAttributes<HTMLElement> {
80
- /**
81
- * HTML-element — ontkoppelt semantiek van visuele stijl
82
- * @default 'section'
83
- */
84
- as?: BreakoutSectionAs;
85
- children?: React.ReactNode;
86
- }
87
- /**
88
- * BreakoutSection layout component
89
- * Laat een sectie "uitslaan" buiten een beperkte paginabreedte om de volledige
90
- * viewportbreedte te beslaan via `margin-inline: calc(50% - 50vw)`.
91
- *
92
- * Vereiste: de parent (.dsn-page-body) heeft `overflow-x: clip` zodat er geen
93
- * horizontale scrolbalk verschijnt.
94
- *
95
- * @example
96
- * ```tsx
97
- * <BreakoutSection style={{ backgroundColor: 'var(--dsn-color-accent-1-inverse-bg-default)' }}>
98
- * <div style={{ maxInlineSize: 'var(--dsn-page-max-inline-size)', marginInline: 'auto', paddingInline: 'var(--dsn-page-body-padding-inline)' }}>
99
- * <Heading level={2}>Uitgeslagen sectie</Heading>
100
- * </div>
101
- * </BreakoutSection>
102
- * ```
103
- */
104
- declare const BreakoutSection: React.ForwardRefExoticComponent<BreakoutSectionProps & React.RefAttributes<HTMLElement>>;
105
- //#endregion
106
- //#region src/Container/Container.d.ts
107
- type ContainerAs = 'div' | 'section' | 'article' | 'aside';
108
- interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
109
- /**
110
- * HTML-element — ontkoppelt semantiek van visuele stijl
111
- * @default 'div'
112
- */
113
- as?: ContainerAs;
114
- /**
115
- * Voegt een lichte schaduw toe voor een zwevend, kaart-achtig effect
116
- * @default false
117
- */
118
- elevated?: boolean;
119
- children?: React.ReactNode;
120
- }
121
- /**
122
- * Container component
123
- * Visuele groepering van gerelateerde content met achtergrond, border en optionele schaduw.
124
- *
125
- * @example
126
- * ```tsx
127
- * // Standaard
128
- * <Container>
129
- * <Paragraph>Inhoud</Paragraph>
130
- * </Container>
131
- *
132
- * // Elevated (kaart-achtig)
133
- * <Container elevated>
134
- * <Paragraph>Inhoud</Paragraph>
135
- * </Container>
136
- *
137
- * // Semantisch element
138
- * <Container as="section">
139
- * <Heading level={2}>Sectietitel</Heading>
140
- * <Paragraph>Inhoud</Paragraph>
141
- * </Container>
142
- * ```
143
- */
144
- declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLElement>>;
145
- //#endregion
146
- //#region src/Hero/Hero.d.ts
147
- type HeroVariant = 'default' | 'inverse' | 'image' | 'image-blend';
148
- type HeroAlign = 'start' | 'center';
149
- interface HeroProps extends React.HTMLAttributes<HTMLElement> {
150
- /**
151
- * Achtergrondstijl van de Hero.
152
- * @default 'default'
153
- */
154
- variant?: HeroVariant;
155
- /**
156
- * URL van de achtergrondafbeelding — vereist bij `variant="image"` of `"image-blend"`.
157
- * Wordt toegepast als CSS custom property `--dsn-hero-bg-image`.
158
- */
159
- backgroundImage?: string;
160
- /**
161
- * Horizontale uitlijning van de inhoud en tekst.
162
- * @default 'start'
163
- */
164
- align?: HeroAlign;
165
- children?: React.ReactNode;
166
- className?: string;
167
- }
168
- /**
169
- * Hero component
170
- * Prominente introductiesectie direct onder de PageHeader. Beslaat de volledige
171
- * paginabreedte via het BreakoutSection-patroon.
172
- *
173
- * Vereiste: de parent heeft `overflow-x: clip` (dsn-page-body).
174
- *
175
- * @example
176
- * ```tsx
177
- * <Hero>
178
- * <Stack space="lg">
179
- * <Heading level={1}>Paginatitel</Heading>
180
- * <Paragraph variant="lead">Introductietekst.</Paragraph>
181
- * <ActionGroup>
182
- * <ButtonLink href="/start" variant="strong" size="large">Aan de slag</ButtonLink>
183
- * </ActionGroup>
184
- * </Stack>
185
- * </Hero>
186
- * ```
187
- */
188
- declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLElement>>;
189
- //#endregion
190
- //#region src/Grid/Grid.d.ts
191
- interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
192
- /**
193
- * Voegt een maximale breedte toe (--dsn-grid-max-width) en centreert de grid horizontaal.
194
- * Gebruik dit voor pagina-brede layouts met een vaste breedte.
195
- * @default false
196
- */
197
- contained?: boolean;
198
- /**
199
- * Child-elementen van de grid.
200
- */
201
- children?: React.ReactNode;
202
- }
203
- /**
204
- * Grid layout component
205
- * 12-koloms CSS Grid container met gutter en optionele max-width.
206
- * Gebruik GridItem voor kolomspanning van directe children.
207
- *
208
- * @example
209
- * ```tsx
210
- * // Standaard grid (volledige breedte)
211
- * <Grid>
212
- * <GridItem colSpan={8}>Hoofdinhoud</GridItem>
213
- * <GridItem colSpan={4}>Sidebar</GridItem>
214
- * </Grid>
215
- *
216
- * // Contained grid met max-width
217
- * <Grid contained>
218
- * <GridItem colSpan={12}>Full-width sectie</GridItem>
219
- * </Grid>
220
- * ```
221
- */
222
- declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
223
- //#endregion
224
- //#region src/Grid/GridItem.d.ts
225
- type GridColSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
226
- type GridColPosition = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
227
- interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
228
- /**
229
- * Aantal kolommen dat dit item beslaat (1–12).
230
- * Zonder colSpan beslaat het item de volledige breedte (12 kolommen).
231
- */
232
- colSpan?: GridColSpan;
233
- /**
234
- * Kolomspanning vanaf sm-breakpoint (36em ~576px).
235
- * Overschrijft colSpan op dit breekpunt.
236
- */
237
- colSpanSm?: GridColSpan;
238
- /**
239
- * Kolomspanning vanaf md-breakpoint (44em ~704px).
240
- * Overschrijft colSpan op dit breekpunt.
241
- */
242
- colSpanMd?: GridColSpan;
243
- /**
244
- * Kolomspanning vanaf lg-breakpoint (64em ~1024px).
245
- * Overschrijft colSpan op dit breekpunt.
246
- */
247
- colSpanLg?: GridColSpan;
248
- /** Startkolom (grid-column-start, 1–13). */
249
- colStart?: GridColPosition;
250
- /** Startkolom vanaf sm-breakpoint. */
251
- colStartSm?: GridColPosition;
252
- /** Startkolom vanaf md-breakpoint. */
253
- colStartMd?: GridColPosition;
254
- /** Startkolom vanaf lg-breakpoint. */
255
- colStartLg?: GridColPosition;
256
- /** Eindkolom (grid-column-end, 1–13). */
257
- colEnd?: GridColPosition;
258
- /** Eindkolom vanaf sm-breakpoint. */
259
- colEndSm?: GridColPosition;
260
- /** Eindkolom vanaf md-breakpoint. */
261
- colEndMd?: GridColPosition;
262
- /** Eindkolom vanaf lg-breakpoint. */
263
- colEndLg?: GridColPosition;
264
- /**
265
- * Breekt visueel uit tot de buitenrand van de grid container.
266
- * Het item beslaat de volledige breedte inclusief de grid margin.
267
- * Gebruik dit voor achtergrondvlakken die edge-to-edge lopen.
268
- * @default false
269
- */
270
- fullBleed?: boolean;
271
- /**
272
- * Child-elementen van het grid item.
273
- */
274
- children?: React.ReactNode;
275
- }
276
- /**
277
- * GridItem component
278
- * Directe child van Grid met kolomspanning en optionele responsive varianten.
279
- *
280
- * @example
281
- * ```tsx
282
- * // Vaste kolomverdeling
283
- * <Grid>
284
- * <GridItem colSpan={8}>Hoofdinhoud</GridItem>
285
- * <GridItem colSpan={4}>Sidebar</GridItem>
286
- * </Grid>
287
- *
288
- * // Responsive: 12 kolommen op mobiel, 6 op md, 4 op lg
289
- * <Grid contained>
290
- * <GridItem colSpan={12} colSpanMd={6} colSpanLg={4}>Item</GridItem>
291
- * <GridItem colSpan={12} colSpanMd={6} colSpanLg={4}>Item</GridItem>
292
- * <GridItem colSpan={12} colSpanMd={12} colSpanLg={4}>Item</GridItem>
293
- * </Grid>
294
- *
295
- * // Full-bleed: breekt uit tot de container-randen
296
- * <Grid contained>
297
- * <GridItem colSpan={8}>Normale content</GridItem>
298
- * <GridItem fullBleed>
299
- * <div style={{ background: 'var(--dsn-color-brand-bg)', padding: '2rem' }}>
300
- * Edge-to-edge sectie
301
- * </div>
302
- * </GridItem>
303
- * </Grid>
304
- * ```
305
- */
306
- declare const GridItem: React.ForwardRefExoticComponent<GridItemProps & React.RefAttributes<HTMLDivElement>>;
307
- //#endregion
308
- //#region src/Stack/Stack.d.ts
309
- type StackSpace = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
310
- interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
311
- /**
312
- * Verticale ruimte tussen directe child-elementen
313
- * @default 'md'
314
- */
315
- space?: StackSpace;
316
- /**
317
- * Child-elementen om verticaal te stapelen
318
- */
319
- children?: React.ReactNode;
320
- }
321
- /**
322
- * Stack layout component
323
- * Brengt consistente verticale ruimte aan tussen directe child-elementen via flexbox + gap.
324
- *
325
- * @example
326
- * ```tsx
327
- * // Default (md = 8px)
328
- * <Stack>
329
- * <Paragraph>Eerste paragraaf</Paragraph>
330
- * <Paragraph>Tweede paragraaf</Paragraph>
331
- * </Stack>
332
- *
333
- * // Grote ruimte tussen secties
334
- * <Stack space="3xl">
335
- * <section>...</section>
336
- * <section>...</section>
337
- * </Stack>
338
- * ```
339
- */
340
- declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
341
- //#endregion
342
- //#region src/Heading/Heading.d.ts
343
- type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
344
- type HeadingAppearance = 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4' | 'heading-5' | 'heading-6';
345
- interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
346
- /**
347
- * Semantic heading level — determines the HTML element (h1–h6)
348
- * @default 2
349
- */
350
- level?: HeadingLevel;
351
- /**
352
- * Visual appearance — controls font size, line height, and spacing.
353
- * Defaults to matching the level (e.g. level 2 → heading-2).
354
- */
355
- appearance?: HeadingAppearance;
356
- /**
357
- * Additional CSS class names
358
- */
359
- className?: string;
360
- /**
361
- * Heading content
362
- */
363
- children?: React.ReactNode;
364
- }
365
- /**
366
- * Heading component with independent semantic level and visual appearance
367
- *
368
- * @example
369
- * ```tsx
370
- * // Basic usage — level and appearance match
371
- * <Heading level={1}>Page Title</Heading>
372
- *
373
- * // Semantic h2, styled as heading-4
374
- * <Heading level={2} appearance="heading-4">Subsection</Heading>
375
- * ```
376
- */
377
- declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
378
- //#endregion
379
- //#region src/HeadingGroup/HeadingGroup.d.ts
380
- interface HeadingGroupProps extends React.HTMLAttributes<HTMLHeadingElement> {
381
- /**
382
- * Semantic heading level — determines the HTML element (h1–h6)
383
- * @default 2
384
- */
385
- level?: HeadingLevel;
386
- /**
387
- * Visual appearance — controls font size, line height, and spacing.
388
- * Defaults to matching the level (e.g. level 2 → heading-2).
389
- */
390
- appearance?: HeadingAppearance;
391
- /**
392
- * Content of the pre-heading. Wrapped in a dsn-pre-heading span automatically.
393
- */
394
- preHeading?: React.ReactNode;
395
- children?: React.ReactNode;
396
- className?: string;
397
- }
398
- declare const HeadingGroup: React.ForwardRefExoticComponent<HeadingGroupProps & React.RefAttributes<HTMLHeadingElement>>;
399
- //#endregion
400
- //#region src/PreHeading/PreHeading.d.ts
401
- interface PreHeadingProps extends React.HTMLAttributes<HTMLSpanElement> {
402
- children?: React.ReactNode;
403
- className?: string;
404
- }
405
- declare const PreHeading: React.ForwardRefExoticComponent<PreHeadingProps & React.RefAttributes<HTMLSpanElement>>;
406
- //#endregion
407
- //#region src/Paragraph/Paragraph.d.ts
408
- type ParagraphVariant = 'default' | 'lead' | 'small-print';
409
- interface ParagraphProps extends React.HTMLAttributes<HTMLParagraphElement> {
410
- /**
411
- * Paragraph visual style
412
- * @default 'default'
413
- */
414
- variant?: ParagraphVariant;
415
- /**
416
- * Additional CSS class names
417
- */
418
- className?: string;
419
- /**
420
- * Paragraph content
421
- */
422
- children?: React.ReactNode;
423
- }
424
- /**
425
- * Paragraph component with multiple variants
426
- *
427
- * @example
428
- * ```tsx
429
- * // Basic usage
430
- * <Paragraph>Body text content</Paragraph>
431
- *
432
- * // Lead paragraph
433
- * <Paragraph variant="lead">Introductory text</Paragraph>
434
- *
435
- * // Small print
436
- * <Paragraph variant="small-print">Terms and conditions apply.</Paragraph>
437
- * ```
438
- */
439
- declare const Paragraph: React.ForwardRefExoticComponent<ParagraphProps & React.RefAttributes<HTMLParagraphElement>>;
440
- //#endregion
441
- //#region src/Link/Link.d.ts
442
- type LinkSize = 'small' | 'default' | 'large';
443
- interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
444
- /**
445
- * Whether the link is disabled
446
- * @default false
447
- */
448
- disabled?: boolean;
449
- /**
450
- * Whether the link represents the current page
451
- * @default false
452
- */
453
- current?: boolean;
454
- /**
455
- * Link size — controls font-size, gap, and icon size.
456
- * When omitted, the link inherits the surrounding font (ideal for inline usage in paragraphs).
457
- */
458
- size?: LinkSize;
459
- /**
460
- * Icon element rendered before the link text
461
- */
462
- iconStart?: React.ReactNode;
463
- /**
464
- * Icon element rendered after the link text
465
- */
466
- iconEnd?: React.ReactNode;
467
- /**
468
- * Whether the link opens in a new tab.
469
- * Automatically adds target="_blank", rel="noopener noreferrer",
470
- * and an inline "(opent nieuw tabblad)" hint.
471
- * @default false
472
- */
473
- external?: boolean;
474
- /**
475
- * Additional CSS class names
476
- */
477
- className?: string;
478
- /**
479
- * Link content
480
- */
481
- children?: React.ReactNode;
482
- }
483
- /**
484
- * Link component with icon support and size variants
485
- *
486
- * @example
487
- * ```tsx
488
- * // Basic usage (inherits font from parent)
489
- * <Link href="/about">About us</Link>
490
- *
491
- * // With explicit size
492
- * <Link href="/about" size="small">Small link</Link>
493
- * <Link href="/about" size="default">Default link</Link>
494
- * <Link href="/about" size="large">Large link</Link>
495
- *
496
- * // With icon before text
497
- * <Link href="/download" iconStart={<Icon name="download" />}>
498
- * Download
499
- * </Link>
500
- *
501
- * // With icon after text
502
- * <Link href="/next" iconEnd={<Icon name="arrow-right" />}>
503
- * Next page
504
- * </Link>
505
- *
506
- * // External link (opens in new tab with visible hint)
507
- * <Link href="https://example.com" external>
508
- * External site
509
- * </Link>
510
- *
511
- * // Current page
512
- * <Link href="/dashboard" current>Dashboard</Link>
513
- *
514
- * // Disabled
515
- * <Link disabled>Unavailable</Link>
516
- * ```
517
- */
518
- declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
519
- //#endregion
520
- //#region src/UnorderedList/UnorderedList.d.ts
521
- interface UnorderedListProps extends React.HTMLAttributes<HTMLUListElement> {
522
- /**
523
- * Additional CSS class names
524
- */
525
- className?: string;
526
- /**
527
- * List content (li elements)
528
- */
529
- children?: React.ReactNode;
530
- }
531
- /**
532
- * Unordered list component with accent-colored bullet markers
533
- *
534
- * @example
535
- * ```tsx
536
- * <UnorderedList>
537
- * <li>First item</li>
538
- * <li>Second item</li>
539
- * <li>Third item</li>
540
- * </UnorderedList>
541
- * ```
542
- */
543
- declare const UnorderedList: React.ForwardRefExoticComponent<UnorderedListProps & React.RefAttributes<HTMLUListElement>>;
544
- //#endregion
545
- //#region src/OrderedList/OrderedList.d.ts
546
- interface OrderedListProps extends React.OlHTMLAttributes<HTMLOListElement> {
547
- /**
548
- * Additional CSS class names
549
- */
550
- className?: string;
551
- /**
552
- * List content (li elements)
553
- */
554
- children?: React.ReactNode;
555
- }
556
- /**
557
- * Ordered list component with numbered markers
558
- *
559
- * @example
560
- * ```tsx
561
- * <OrderedList>
562
- * <li>First step</li>
563
- * <li>Second step</li>
564
- * <li>Third step</li>
565
- * </OrderedList>
566
- *
567
- * // Starting from a specific number
568
- * <OrderedList start={5}>
569
- * <li>Fifth step</li>
570
- * <li>Sixth step</li>
571
- * </OrderedList>
572
- * ```
573
- */
574
- declare const OrderedList: React.ForwardRefExoticComponent<OrderedListProps & React.RefAttributes<HTMLOListElement>>;
575
- //#endregion
576
- //#region src/Icon/icon-registry.generated.d.ts
577
- type IconComponent = React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
578
- type IconName = 'alert-triangle' | 'archive' | 'arrow-down' | 'arrow-left' | 'arrow-narrow-down' | 'arrow-narrow-up' | 'arrow-right' | 'arrow-up' | 'arrows-sort' | 'bell' | 'calendar-event' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-check' | 'clock' | 'dots-vertical' | 'download' | 'edit' | 'exclamation-circle' | 'external-link' | 'eye' | 'file-description' | 'folder' | 'heart-filled' | 'heart' | 'home' | 'info-circle' | 'loader' | 'mail' | 'menu' | 'message-circle' | 'minus' | 'paperclip' | 'pencil' | 'photo' | 'plus' | 'printer' | 'search' | 'selector' | 'settings' | 'sort-ascending' | 'sort-descending' | 'star-filled' | 'star' | 'trash' | 'upload' | 'user' | 'x';
579
- declare const iconMap: Record<IconName, IconComponent>;
580
- //#endregion
581
- //#region src/Icon/Icon.d.ts
582
- type IconSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
583
- interface IconProps extends Omit<React.SVGAttributes<SVGSVGElement>, 'name'> {
584
- /**
585
- * Icon name from Tabler Icons
586
- */
587
- name: IconName;
588
- /**
589
- * Icon size variant
590
- * @default 'md'
591
- */
592
- size?: IconSize;
593
- /**
594
- * Additional CSS class names
595
- */
596
- className?: string;
597
- /**
598
- * Accessible label for the icon
599
- * If not provided, icon is marked as decorative (aria-hidden="true")
600
- */
601
- 'aria-label'?: string;
602
- }
603
- /**
604
- * Icon component using individual Tabler Icon SVG imports
605
- * Only icons you use will be included in your bundle (tree-shaking)
606
- *
607
- * @example
608
- * ```tsx
609
- * // Decorative icon (no label needed)
610
- * <Icon name="check" size="md" />
611
- *
612
- * // Standalone icon (needs label)
613
- * <Icon name="settings" size="lg" aria-label="Open settings" />
614
- *
615
- * // Icon with text (mark as decorative)
616
- * <span>
617
- * <Icon name="check" size="sm" />
618
- * Task complete
619
- * </span>
620
- * ```
621
- */
622
- declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
623
- //#endregion
624
- //#region src/IconList/IconList.d.ts
625
- interface IconListProps extends React.HTMLAttributes<HTMLUListElement | HTMLOListElement> {
626
- /**
627
- * Semantic list element
628
- * @default 'ul'
629
- */
630
- as?: 'ul' | 'ol';
631
- /**
632
- * CSS color value that overrides `--dsn-icon-list-icon-color` for the whole
633
- * list; accepts any `var(--dsn-color-*-color-default)`
634
- */
635
- iconColor?: string;
636
- /**
637
- * Additional CSS class names
638
- */
639
- className?: string;
640
- /**
641
- * `IconListItem` elements
642
- */
643
- children?: React.ReactNode;
644
- }
645
- /**
646
- * List where every item carries an icon instead of a bullet or number
647
- *
648
- * `role="list"` is set explicitly: `list-style-type: none` makes
649
- * Safari/VoiceOver drop the list announcement, and the role restores it.
650
- *
651
- * @example
652
- * ```tsx
653
- * <IconList>
654
- * <IconListItem icon="calendar-event">Afspraak op maandag 24 maart</IconListItem>
655
- * <IconListItem icon="clock">Duurt 30 minuten</IconListItem>
656
- * </IconList>
657
- *
658
- * // Ordered steps
659
- * <IconList as="ol">
660
- * <IconListItem icon="calendar-event">Maak een afspraak</IconListItem>
661
- * <IconListItem icon="clock">Wacht op bevestiging</IconListItem>
662
- * </IconList>
663
- *
664
- * // Positive status color for the whole list
665
- * <IconList iconColor="var(--dsn-color-positive-color-default)">
666
- * <IconListItem icon="check">Aanvraag goedgekeurd</IconListItem>
667
- * </IconList>
668
- * ```
669
- */
670
- declare const IconList: React.ForwardRefExoticComponent<IconListProps & React.RefAttributes<HTMLUListElement | HTMLOListElement>>;
671
- interface IconListItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
672
- /**
673
- * Icon name from the icon set; the icon is decorative and replaces the marker
674
- */
675
- icon: IconName;
676
- /**
677
- * Additional CSS class names
678
- */
679
- className?: string;
680
- /**
681
- * Item text content
682
- */
683
- children?: React.ReactNode;
684
- }
685
- declare const IconListItem: React.ForwardRefExoticComponent<IconListItemProps & React.RefAttributes<HTMLLIElement>>;
686
- //#endregion
687
- //#region src/Button/Button.d.ts
688
- type ButtonVariant = 'strong' | 'strong-negative' | 'strong-positive' | 'default' | 'default-negative' | 'default-positive' | 'subtle' | 'subtle-negative' | 'subtle-positive';
689
- type ButtonSize = 'small' | 'default' | 'large';
690
- interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
691
- /**
692
- * Button visual style
693
- * @default 'strong'
694
- */
695
- variant?: ButtonVariant;
696
- /**
697
- * Button size
698
- * @default 'default'
699
- */
700
- size?: ButtonSize;
701
- /**
702
- * Whether button shows loading state
703
- * @default false
704
- */
705
- loading?: boolean;
706
- /**
707
- * Whether button takes full width of container
708
- * @default false
709
- */
710
- fullWidth?: boolean;
711
- /**
712
- * Whether button contains only an icon (adjusts padding)
713
- * @default false
714
- */
715
- iconOnly?: boolean;
716
- /**
717
- * Icon element rendered before the button text
718
- */
719
- iconStart?: React.ReactNode;
720
- /**
721
- * Icon element rendered after the button text
722
- */
723
- iconEnd?: React.ReactNode;
724
- /**
725
- * Additional CSS class names
726
- */
727
- className?: string;
728
- /**
729
- * Button content
730
- */
731
- children?: React.ReactNode;
732
- }
733
- /**
734
- * Button component with multiple variants and sizes
735
- *
736
- * @example
737
- * ```tsx
738
- * // Basic usage
739
- * <Button variant="strong">Save</Button>
740
- *
741
- * // With icon before text
742
- * <Button variant="default" iconStart={<Icon name="plus" />}>
743
- * Add item
744
- * </Button>
745
- *
746
- * // With icon after text
747
- * <Button variant="default" iconEnd={<Icon name="arrow-right" />}>
748
- * Next
749
- * </Button>
750
- *
751
- * // With icons on both sides
752
- * <Button iconStart={<Icon name="check" />} iconEnd={<Icon name="arrow-right" />}>
753
- * Confirm
754
- * </Button>
755
- *
756
- * // Icon only — children is the accessible text label, icon via iconStart
757
- * <Button variant="subtle" iconOnly iconStart={<Icon name="x" />}>
758
- * Sluiten
759
- * </Button>
760
- *
761
- * // Loading state
762
- * <Button loading disabled>Saving...</Button>
763
- *
764
- * // Different sizes
765
- * <Button size="small">Small</Button>
766
- * <Button size="default">Default</Button>
767
- * <Button size="large">Large</Button>
768
- *
769
- * // Sentiment variants
770
- * <Button variant="strong-negative">Delete</Button>
771
- * <Button variant="strong-positive">Confirm</Button>
772
- * ```
773
- */
774
- declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
775
- //#endregion
776
- //#region src/ButtonLink/ButtonLink.d.ts
777
- type ButtonLinkVariant = 'strong' | 'strong-negative' | 'strong-positive' | 'default' | 'default-negative' | 'default-positive' | 'subtle' | 'subtle-negative' | 'subtle-positive';
778
- type ButtonLinkSize = 'small' | 'default' | 'large';
779
- interface ButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
780
- /**
781
- * Navigation URL
782
- */
783
- href?: string;
784
- /**
785
- * Visual style — same variants as Button (excl. 'link')
786
- * @default 'strong'
787
- */
788
- variant?: ButtonLinkVariant;
789
- /**
790
- * Button size
791
- * @default 'default'
792
- */
793
- size?: ButtonLinkSize;
794
- /**
795
- * Whether the button-link takes full width of container
796
- * @default false
797
- */
798
- fullWidth?: boolean;
799
- /**
800
- * Whether button-link contains only an icon (hides label text visually)
801
- * @default false
802
- */
803
- iconOnly?: boolean;
804
- /**
805
- * Icon element rendered before the label text
806
- */
807
- iconStart?: React.ReactNode;
808
- /**
809
- * Icon element rendered after the label text
810
- */
811
- iconEnd?: React.ReactNode;
812
- /**
813
- * Whether the link is disabled.
814
- * Maps to aria-disabled="true" + tabIndex={-1} + prevents navigation.
815
- * <a> has no native disabled attribute.
816
- * @default false
817
- */
818
- disabled?: boolean;
819
- /**
820
- * Whether the link opens in a new tab.
821
- * Automatically adds target="_blank", rel="noopener noreferrer",
822
- * and an inline "(opent nieuw tabblad)" hint — same behaviour as Link.
823
- * @default false
824
- */
825
- external?: boolean;
826
- /**
827
- * Additional CSS class names
828
- */
829
- className?: string;
830
- /**
831
- * Link content (wrapped in dsn-button__label, same as Button)
832
- */
833
- children?: React.ReactNode;
834
- }
835
- /**
836
- * ButtonLink — semantically an <a>, visually styled as a Button.
837
- *
838
- * Use when an action navigates to a URL but needs the visual prominence of a Button.
839
- *
840
- * @example
841
- * ```tsx
842
- * // Basic usage (strong, default size)
843
- * <ButtonLink href="/volgende">Volgende stap</ButtonLink>
844
- *
845
- * // Subtle variant
846
- * <ButtonLink href="/" variant="subtle">Terug naar overzicht</ButtonLink>
847
- *
848
- * // With icon
849
- * <ButtonLink href="/download" iconStart={<Icon name="download" aria-hidden />}>
850
- * Download rapport
851
- * </ButtonLink>
852
- *
853
- * // Icon-only
854
- * <ButtonLink href="/info" iconOnly iconStart={<Icon name="info-circle" aria-hidden />}>
855
- * Meer informatie
856
- * </ButtonLink>
857
- *
858
- * // Disabled
859
- * <ButtonLink href="/dashboard" disabled>Niet beschikbaar</ButtonLink>
860
- *
861
- * // Opens in new tab with visible hint
862
- * <ButtonLink href="https://example.com" external>Externe pagina</ButtonLink>
863
- * ```
864
- */
865
- declare const ButtonLink: React.ForwardRefExoticComponent<ButtonLinkProps & React.RefAttributes<HTMLAnchorElement>>;
866
- //#endregion
867
- //#region src/LinkButton/LinkButton.d.ts
868
- type LinkButtonSize = 'small' | 'default' | 'large';
869
- interface LinkButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
870
- /**
871
- * Button size — controls font-size, gap, and icon size.
872
- * When omitted, the button inherits the surrounding font (same as Link).
873
- */
874
- size?: LinkButtonSize;
875
- /**
876
- * Icon element rendered before the button text
877
- */
878
- iconStart?: React.ReactNode;
879
- /**
880
- * Icon element rendered after the button text
881
- */
882
- iconEnd?: React.ReactNode;
883
- /**
884
- * Additional CSS class names
885
- */
886
- className?: string;
887
- /**
888
- * Button content
889
- */
890
- children?: React.ReactNode;
891
- }
892
- /**
893
- * LinkButton — semantically a <button>, visually styled as a Link.
894
- *
895
- * Use when an action requires a JavaScript handler or form submit,
896
- * but the visual prominence of a Button does not fit the context.
897
- *
898
- * @example
899
- * ```tsx
900
- * // Basic usage (inherits font from parent)
901
- * <LinkButton onClick={handleClick}>Wachtwoord vergeten?</LinkButton>
902
- *
903
- * // With explicit size
904
- * <LinkButton size="small">Klein</LinkButton>
905
- *
906
- * // With icon
907
- * <LinkButton iconStart={<Icon name="arrow-left" aria-hidden />}>Terug</LinkButton>
908
- *
909
- * // Disabled
910
- * <LinkButton disabled>Niet beschikbaar</LinkButton>
911
- *
912
- * // Form submit
913
- * <LinkButton type="submit">Bevestigen</LinkButton>
914
- * ```
915
- */
916
- declare const LinkButton: React.ForwardRefExoticComponent<LinkButtonProps & React.RefAttributes<HTMLButtonElement>>;
917
- //#endregion
918
- //#region src/TextInput/TextInput.d.ts
919
- interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
920
- /**
921
- * Additional CSS class names
922
- */
923
- className?: string;
924
- /**
925
- * Whether the input is in an invalid state
926
- * @default false
927
- */
928
- invalid?: boolean;
929
- /**
930
- * Width variant for the input
931
- * @default undefined (uses default max-width from form-control)
932
- */
933
- width?: FormControlWidth;
934
- }
935
- /**
936
- * Text Input component
937
- * Single-line text input with support for various states (hover, focus, disabled, invalid, read-only)
938
- *
939
- * @example
940
- * ```tsx
941
- * // Basic usage
942
- * <TextInput placeholder="Enter your name" />
943
- *
944
- * // With label
945
- * <FormFieldLabel htmlFor="email">Email</FormFieldLabel>
946
- * <TextInput id="email" type="email" />
947
- *
948
- * // Disabled
949
- * <TextInput disabled value="Read only value" />
950
- *
951
- * // Invalid
952
- * <TextInput invalid aria-invalid="true" aria-describedby="error" />
953
- *
954
- * // Read-only
955
- * <TextInput readOnly value="Cannot edit this" />
956
- * ```
957
- */
958
- declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
959
- //#endregion
960
- //#region src/FileInput/FileInput.d.ts
961
- interface FileInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
962
- /**
963
- * Additional CSS class names
964
- */
965
- className?: string;
966
- /**
967
- * Whether the input is in an invalid state
968
- * @default false
969
- */
970
- invalid?: boolean;
971
- }
972
- /**
973
- * File Input component
974
- * Styled wrapper around native <input type="file"> with support for
975
- * disabled and invalid states and multiple file selection.
976
- *
977
- * @example
978
- * ```tsx
979
- * // Basic usage
980
- * <FileInput />
981
- *
982
- * // With label
983
- * <FormFieldLabel htmlFor="attachment">Bijlage</FormFieldLabel>
984
- * <FileInput id="attachment" accept=".pdf,.docx" />
985
- *
986
- * // Multiple files
987
- * <FileInput multiple />
988
- *
989
- * // Invalid
990
- * <FileInput invalid aria-describedby="error" />
991
- * ```
992
- */
993
- declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
994
- //#endregion
995
- //#region src/EmailInput/EmailInput.d.ts
996
- interface EmailInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
997
- /**
998
- * Whether the input is in an invalid state
999
- * @default false
1000
- */
1001
- invalid?: boolean;
1002
- /**
1003
- * Width variant for the input
1004
- * @default undefined (uses default max-width from form-control)
1005
- */
1006
- width?: FormControlWidth;
1007
- /**
1008
- * Additional CSS class names
1009
- */
1010
- className?: string;
1011
- }
1012
- /**
1013
- * Email Input component
1014
- * Email input with appropriate inputmode and autocomplete
1015
- *
1016
- * @example
1017
- * ```tsx
1018
- * // Basic usage
1019
- * <EmailInput placeholder="naam@voorbeeld.nl" />
1020
- *
1021
- * // With label
1022
- * <FormFieldLabel htmlFor="email">E-mailadres</FormFieldLabel>
1023
- * <EmailInput id="email" />
1024
- *
1025
- * // Invalid state
1026
- * <EmailInput invalid aria-invalid="true" aria-describedby="error" />
1027
- * ```
1028
- */
1029
- declare const EmailInput: React.ForwardRefExoticComponent<EmailInputProps & React.RefAttributes<HTMLInputElement>>;
1030
- //#endregion
1031
- //#region src/PasswordInput/PasswordInput.d.ts
1032
- type PasswordAutocomplete = 'current-password' | 'new-password' | 'off';
1033
- interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
1034
- /**
1035
- * Autocomplete hint for password managers
1036
- * - 'current-password': voor inlogformulieren (default)
1037
- * - 'new-password': voor registratie- en wachtwoord wijzigformulieren
1038
- * - 'off': autocomplete uitschakelen
1039
- * @default 'current-password'
1040
- */
1041
- passwordAutocomplete?: PasswordAutocomplete;
1042
- /**
1043
- * Whether the input is in an invalid state
1044
- * @default false
1045
- */
1046
- invalid?: boolean;
1047
- /**
1048
- * Width variant for the input
1049
- * @default undefined (uses default max-width from form-control)
1050
- */
1051
- width?: FormControlWidth;
1052
- /**
1053
- * Additional CSS class names
1054
- */
1055
- className?: string;
1056
- }
1057
- /**
1058
- * Password Input component
1059
- * Uses type="password" for secure text entry.
1060
- * Het tonen/verbergen van het wachtwoord is bewust niet ingebouwd in dit component —
1061
- * dat patroon wordt separaat gedefinieerd via een Button naast het invoerveld.
1062
- *
1063
- * @example
1064
- * ```tsx
1065
- * // Login form (current password)
1066
- * <PasswordInput placeholder="Wachtwoord" />
1067
- *
1068
- * // Registration form (new password)
1069
- * <PasswordInput passwordAutocomplete="new-password" placeholder="Nieuw wachtwoord" />
1070
- *
1071
- * // With label
1072
- * <FormFieldLabel htmlFor="password">Wachtwoord</FormFieldLabel>
1073
- * <PasswordInput id="password" />
1074
- *
1075
- * // Invalid state
1076
- * <PasswordInput invalid aria-invalid="true" aria-describedby="error" />
1077
- * ```
1078
- */
1079
- declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
1080
- //#endregion
1081
- //#region src/NumberInput/NumberInput.d.ts
1082
- interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
1083
- /**
1084
- * Whether the input is in an invalid state
1085
- * @default false
1086
- */
1087
- invalid?: boolean;
1088
- /**
1089
- * Width variant for the input
1090
- * @default undefined (uses default max-width from form-control)
1091
- */
1092
- width?: FormControlWidth;
1093
- /**
1094
- * Allow decimal input (e.g. amounts). When false, uses GOV.UK pattern:
1095
- * inputmode="numeric" + pattern="[0-9]*" for a numeric-only keyboard.
1096
- * When true, uses inputmode="decimal" without pattern restriction.
1097
- * @default false
1098
- */
1099
- allowDecimals?: boolean;
1100
- /**
1101
- * Additional CSS class names
1102
- */
1103
- className?: string;
1104
- }
1105
- /**
1106
- * Number Input component
1107
- * Uses type="text" with inputmode="decimal" for better mobile UX (no spinner buttons)
1108
- *
1109
- * @example
1110
- * ```tsx
1111
- * // Basic usage
1112
- * <NumberInput placeholder="0,00" />
1113
- *
1114
- * // With label
1115
- * <FormFieldLabel htmlFor="amount">Bedrag</FormFieldLabel>
1116
- * <NumberInput id="amount" />
1117
- *
1118
- * // Invalid state
1119
- * <NumberInput invalid aria-invalid="true" aria-describedby="error" />
1120
- * ```
1121
- */
1122
- declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
1123
- //#endregion
1124
- //#region src/TelephoneInput/TelephoneInput.d.ts
1125
- interface TelephoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
1126
- /**
1127
- * Whether the input is in an invalid state
1128
- * @default false
1129
- */
1130
- invalid?: boolean;
1131
- /**
1132
- * Width variant for the input
1133
- * @default undefined (uses default max-width from form-control)
1134
- */
1135
- width?: FormControlWidth;
1136
- /**
1137
- * Additional CSS class names
1138
- */
1139
- className?: string;
1140
- }
1141
- /**
1142
- * Telephone Input component
1143
- * Telephone input with appropriate inputmode and autocomplete
1144
- *
1145
- * @example
1146
- * ```tsx
1147
- * // Basic usage
1148
- * <TelephoneInput placeholder="06 12345678" />
1149
- *
1150
- * // With label
1151
- * <FormFieldLabel htmlFor="phone">Telefoonnummer</FormFieldLabel>
1152
- * <TelephoneInput id="phone" />
1153
- *
1154
- * // Invalid state
1155
- * <TelephoneInput invalid aria-invalid="true" aria-describedby="error" />
1156
- * ```
1157
- */
1158
- declare const TelephoneInput: React.ForwardRefExoticComponent<TelephoneInputProps & React.RefAttributes<HTMLInputElement>>;
1159
- //#endregion
1160
- //#region src/SearchInput/SearchInput.d.ts
1161
- interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
1162
- /**
1163
- * Whether the input is in an invalid state
1164
- * @default false
1165
- */
1166
- invalid?: boolean;
1167
- /**
1168
- * Width variant for the input
1169
- * @default undefined (uses default max-width from form-control)
1170
- */
1171
- width?: FormControlWidth;
1172
- /**
1173
- * Additional CSS class names
1174
- */
1175
- className?: string;
1176
- }
1177
- /**
1178
- * Search Input component
1179
- * Search input with a non-interactive search icon positioned at inline-start.
1180
- * The icon has the same color as the input text (dsn-text-input-color).
1181
- *
1182
- * @example
1183
- * ```tsx
1184
- * // Basic usage
1185
- * <SearchInput placeholder="Zoeken..." />
1186
- *
1187
- * // With label
1188
- * <FormFieldLabel htmlFor="search">Zoeken</FormFieldLabel>
1189
- * <SearchInput id="search" />
1190
- *
1191
- * // Invalid state
1192
- * <SearchInput invalid aria-invalid="true" aria-describedby="error" />
1193
- * ```
1194
- */
1195
- declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
1196
- //#endregion
1197
- //#region src/TimeInput/TimeInput.d.ts
1198
- interface TimeInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
1199
- /**
1200
- * Whether the input is in an invalid state
1201
- * @default false
1202
- */
1203
- invalid?: boolean;
1204
- /**
1205
- * Additional CSS class names
1206
- */
1207
- className?: string;
1208
- }
1209
- /**
1210
- * Time Input component
1211
- * Time input with an interactive clock button at inline-end that opens the native time picker.
1212
- * Fixed width (sm) — not configurable, as time inputs have a predictable content width.
1213
- *
1214
- * @example
1215
- * ```tsx
1216
- * // Basic usage
1217
- * <TimeInput />
1218
- *
1219
- * // With label
1220
- * <FormFieldLabel htmlFor="time">Tijd</FormFieldLabel>
1221
- * <TimeInput id="time" />
1222
- *
1223
- * // With default value
1224
- * <TimeInput defaultValue="14:30" />
1225
- *
1226
- * // Invalid state
1227
- * <TimeInput invalid aria-invalid="true" aria-describedby="error" />
1228
- * ```
1229
- */
1230
- declare const TimeInput: React.ForwardRefExoticComponent<TimeInputProps & React.RefAttributes<HTMLInputElement>>;
1231
- //#endregion
1232
- //#region src/DateInput/DateInput.d.ts
1233
- interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
1234
- /**
1235
- * Whether the input is in an invalid state
1236
- * @default false
1237
- */
1238
- invalid?: boolean;
1239
- /**
1240
- * Additional CSS class names
1241
- */
1242
- className?: string;
1243
- }
1244
- /**
1245
- * Date Input component
1246
- * Date input with an interactive calendar button at inline-end that opens the native date picker.
1247
- * Fixed width (sm) — not configurable, as date inputs have a predictable content width.
1248
- *
1249
- * @example
1250
- * ```tsx
1251
- * // Basic usage
1252
- * <DateInput />
1253
- *
1254
- * // With label
1255
- * <FormFieldLabel htmlFor="date">Datum</FormFieldLabel>
1256
- * <DateInput id="date" />
1257
- *
1258
- * // With default value
1259
- * <DateInput defaultValue="2025-03-15" />
1260
- *
1261
- * // Invalid state
1262
- * <DateInput invalid aria-invalid="true" aria-describedby="error" />
1263
- * ```
1264
- */
1265
- declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
1266
- //#endregion
1267
- //#region src/DateInputGroup/DateInputGroup.d.ts
1268
- interface DateInputGroupValue {
1269
- day: string;
1270
- month: string;
1271
- year: string;
1272
- }
1273
- interface DateInputGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
1274
- /**
1275
- * The current value of the date group
1276
- */
1277
- value?: DateInputGroupValue;
1278
- /**
1279
- * Called when any field changes, with the full updated value object
1280
- */
1281
- onChange?: (value: DateInputGroupValue) => void;
1282
- /**
1283
- * Whether all fields are in an invalid state
1284
- * @default false
1285
- */
1286
- invalid?: boolean;
1287
- /**
1288
- * Whether all fields are disabled
1289
- * @default false
1290
- */
1291
- disabled?: boolean;
1292
- /**
1293
- * id prefix used to generate unique ids for each field (dag, maand, jaar)
1294
- * E.g. id="geboortedatum" → "geboortedatum-dag", "geboortedatum-maand", "geboortedatum-jaar"
1295
- */
1296
- id?: string;
1297
- }
1298
- /**
1299
- * Date Input Group component
1300
- * Three separate inputs for day, month and year.
1301
- * More accessible than a native date picker: works consistently across all browsers and
1302
- * devices, and allows partial input (e.g. year only).
1303
- *
1304
- * Wrap in a FormFieldset for a complete form field with legend and error message.
1305
- *
1306
- * @example
1307
- * ```tsx
1308
- * // Basic usage
1309
- * <DateInputGroup
1310
- * value={{ day: '', month: '', year: '' }}
1311
- * onChange={(val) => setValue(val)}
1312
- * />
1313
- *
1314
- * // Complete form field
1315
- * <FormFieldset>
1316
- * <FormFieldLegend>Geboortedatum</FormFieldLegend>
1317
- * <FormFieldDescription>Bijvoorbeeld: 15 3 1990</FormFieldDescription>
1318
- * <DateInputGroup
1319
- * id="geboortedatum"
1320
- * value={value}
1321
- * onChange={setValue}
1322
- * />
1323
- * </FormFieldset>
1324
- *
1325
- * // Invalid state
1326
- * <DateInputGroup invalid value={value} onChange={setValue} />
1327
- * ```
1328
- */
1329
- declare const DateInputGroup: React.ForwardRefExoticComponent<DateInputGroupProps & React.RefAttributes<HTMLDivElement>>;
1330
- //#endregion
1331
- //#region src/Select/Select.d.ts
1332
- interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
1333
- /**
1334
- * Whether the select is in an invalid state
1335
- * @default false
1336
- */
1337
- invalid?: boolean;
1338
- /**
1339
- * Width variant for the select
1340
- * @default undefined (uses default max-width from form-control)
1341
- */
1342
- width?: FormControlWidth;
1343
- /**
1344
- * Additional CSS class names
1345
- */
1346
- className?: string;
1347
- }
1348
- /**
1349
- * Select component
1350
- * Dropdown select with a custom chevron-down icon at inline-end.
1351
- * The native select arrow is hidden; the custom icon is decorative and non-interactive.
1352
- *
1353
- * @example
1354
- * ```tsx
1355
- * // Basic usage
1356
- * <Select>
1357
- * <option value="">Kies een optie</option>
1358
- * <option value="1">Optie 1</option>
1359
- * <option value="2">Optie 2</option>
1360
- * </Select>
1361
- *
1362
- * // With label
1363
- * <FormField label="Land" htmlFor="land">
1364
- * <Select id="land">
1365
- * <option value="">Kies een land</option>
1366
- * <option value="nl">Nederland</option>
1367
- * <option value="be">België</option>
1368
- * </Select>
1369
- * </FormField>
1370
- *
1371
- * // Width variant
1372
- * <Select width="lg">...</Select>
1373
- *
1374
- * // Invalid state
1375
- * <Select invalid aria-invalid="true" aria-describedby="error">...</Select>
1376
- * ```
1377
- */
1378
- declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
1379
- //#endregion
1380
- //#region src/TextArea/TextArea.d.ts
1381
- interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
1382
- /**
1383
- * Additional CSS class names
1384
- */
1385
- className?: string;
1386
- /**
1387
- * Whether the textarea is in an invalid state
1388
- * @default false
1389
- */
1390
- invalid?: boolean;
1391
- /**
1392
- * Width variant for the textarea
1393
- * @default undefined (uses default max-width from form-control)
1394
- */
1395
- width?: FormControlWidth;
1396
- }
1397
- /**
1398
- * Text Area component
1399
- * Multi-line text input with support for various states (hover, focus, disabled, invalid, read-only)
1400
- *
1401
- * @example
1402
- * ```tsx
1403
- * // Basic usage
1404
- * <TextArea placeholder="Enter your bio" rows={4} />
1405
- *
1406
- * // With label
1407
- * <FormFieldLabel htmlFor="bio">Biography</FormFieldLabel>
1408
- * <TextArea id="bio" rows={6} />
1409
- *
1410
- * // Disabled
1411
- * <TextArea disabled value="Cannot edit" rows={3} />
1412
- *
1413
- * // Invalid
1414
- * <TextArea invalid aria-invalid="true" aria-describedby="error" rows={4} />
1415
- *
1416
- * // Read-only
1417
- * <TextArea readOnly value="View only" rows={3} />
1418
- * ```
1419
- */
1420
- declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
1421
- //#endregion
1422
- //#region src/Checkbox/Checkbox.d.ts
1423
- interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
1424
- /**
1425
- * Whether the checkbox is in an invalid state
1426
- */
1427
- invalid?: boolean;
1428
- /**
1429
- * Whether the checkbox is in an indeterminate state
1430
- */
1431
- indeterminate?: boolean;
1432
- }
1433
- /**
1434
- * Checkbox component for boolean selection (without label)
1435
- * Use CheckboxOption component to combine with a label
1436
- */
1437
- declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
1438
- //#endregion
1439
- //#region src/CheckboxGroup/CheckboxGroup.d.ts
1440
- interface CheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {
1441
- /**
1442
- * Checkbox options to display in the group
1443
- */
1444
- children: React.ReactNode;
1445
- }
1446
- /**
1447
- * Checkbox Group component
1448
- * Container for multiple CheckboxOption components
1449
- *
1450
- * Note: This is just a list container. For a complete form field with label,
1451
- * wrap this in a FormFieldset component.
1452
- *
1453
- * @example
1454
- * ```tsx
1455
- * // Basic usage (list only)
1456
- * <CheckboxGroup>
1457
- * <CheckboxOption label="Sport" value="sport" />
1458
- * <CheckboxOption label="Muziek" value="music" />
1459
- * <CheckboxOption label="Reizen" value="travel" />
1460
- * </CheckboxGroup>
1461
- *
1462
- * // Complete form field (with FormFieldset and FormFieldLegend)
1463
- * <FormFieldset>
1464
- * <FormFieldLegend>Interesses</FormFieldLegend>
1465
- * <CheckboxGroup>
1466
- * <CheckboxOption label="Sport" value="sport" />
1467
- * <CheckboxOption label="Muziek" value="music" />
1468
- * <CheckboxOption label="Reizen" value="travel" />
1469
- * </CheckboxGroup>
1470
- * </FormFieldset>
1471
- * ```
1472
- */
1473
- declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
1474
- //#endregion
1475
- //#region src/CheckboxOption/CheckboxOption.d.ts
1476
- interface CheckboxOptionProps extends CheckboxProps {
1477
- /**
1478
- * Label text for the checkbox
1479
- */
1480
- label: string;
1481
- }
1482
- /**
1483
- * Checkbox with label - combines Checkbox and OptionLabel
1484
- */
1485
- declare const CheckboxOption: React.ForwardRefExoticComponent<CheckboxOptionProps & React.RefAttributes<HTMLInputElement>>;
1486
- //#endregion
1487
- //#region src/Radio/Radio.d.ts
1488
- interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
1489
- /**
1490
- * Whether the radio button is in an invalid state
1491
- */
1492
- invalid?: boolean;
1493
- }
1494
- /**
1495
- * Radio button component for single selection (without label)
1496
- * Use RadioOption component to combine with a label
1497
- */
1498
- declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
1499
- //#endregion
1500
- //#region src/RadioGroup/RadioGroup.d.ts
1501
- interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
1502
- /**
1503
- * Radio options to display in the group
1504
- */
1505
- children: React.ReactNode;
1506
- }
1507
- /**
1508
- * Radio Group component
1509
- * Container for multiple RadioOption components
1510
- *
1511
- * Note: This is just a list container. For a complete form field with label,
1512
- * wrap this in a FormFieldset component.
1513
- *
1514
- * @example
1515
- * ```tsx
1516
- * // Basic usage (list only)
1517
- * <RadioGroup>
1518
- * <RadioOption name="gender" label="Man" value="male" />
1519
- * <RadioOption name="gender" label="Vrouw" value="female" />
1520
- * <RadioOption name="gender" label="Anders" value="other" />
1521
- * </RadioGroup>
1522
- *
1523
- * // Complete form field (with FormFieldset and FormFieldLegend)
1524
- * <FormFieldset>
1525
- * <FormFieldLegend>Geslacht</FormFieldLegend>
1526
- * <RadioGroup>
1527
- * <RadioOption name="gender" label="Man" value="male" />
1528
- * <RadioOption name="gender" label="Vrouw" value="female" />
1529
- * <RadioOption name="gender" label="Anders" value="other" />
1530
- * </RadioGroup>
1531
- * </FormFieldset>
1532
- * ```
1533
- */
1534
- declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
1535
- //#endregion
1536
- //#region src/RadioOption/RadioOption.d.ts
1537
- interface RadioOptionProps extends RadioProps {
1538
- /**
1539
- * Label text for the radio button
1540
- */
1541
- label: string;
1542
- }
1543
- /**
1544
- * Radio button with label - combines Radio and OptionLabel
1545
- */
1546
- declare const RadioOption: React.ForwardRefExoticComponent<RadioOptionProps & React.RefAttributes<HTMLInputElement>>;
1547
- //#endregion
1548
- //#region src/OptionLabel/OptionLabel.d.ts
1549
- interface OptionLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
1550
- /**
1551
- * Whether the label is for a disabled input
1552
- */
1553
- disabled?: boolean;
1554
- }
1555
- /**
1556
- * Label component for checkbox and radio button options
1557
- */
1558
- declare const OptionLabel: React.ForwardRefExoticComponent<OptionLabelProps & React.RefAttributes<HTMLSpanElement>>;
1559
- //#endregion
1560
- //#region src/Backdrop/Backdrop.d.ts
1561
- interface BackdropProps extends React.HTMLAttributes<HTMLDivElement> {
1562
- /**
1563
- * Schakelt het blur-filter in of uit.
1564
- * Gebruik `false` als fallback voor omgevingen zonder backdrop-filter support.
1565
- * @default true
1566
- */
1567
- blur?: boolean;
1568
- }
1569
- /**
1570
- * Backdrop component
1571
- * Vaste, volledig-scherm overlay die de achtergrondinhoud visueel verhult
1572
- * wanneer een modaal UI-element open is (Modal Dialog, Drawer).
1573
- *
1574
- * Altijd aria-hidden="true" — puur decoratief, geen interactieve rol.
1575
- * Conditioneel renderen vanuit de parent.
1576
- *
1577
- * @example
1578
- * ```tsx
1579
- * {isOpen && <Backdrop />}
1580
- * {isOpen && <Backdrop blur={false} />}
1581
- * ```
1582
- */
1583
- declare const Backdrop: React.ForwardRefExoticComponent<BackdropProps & React.RefAttributes<HTMLDivElement>>;
1584
- //#endregion
1585
- //#region src/DotBadge/DotBadge.d.ts
1586
- type DotBadgeVariant = 'negative' | 'positive' | 'warning' | 'info' | 'neutral';
1587
- interface DotBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
1588
- /**
1589
- * Signaalkleur van de stip
1590
- * @default 'negative'
1591
- */
1592
- variant?: DotBadgeVariant;
1593
- /**
1594
- * Voegt een pulserend ring-effect toe om extra aandacht te trekken.
1595
- * De pulse loopt 3 keer (4500ms) en stopt dan vanzelf, zodat de beweging
1596
- * binnen de 5 seconden van WCAG 2.2.2 blijft. De dot zelf blijft staan.
1597
- * @default false
1598
- */
1599
- pulse?: boolean;
1600
- }
1601
- /**
1602
- * DotBadge component
1603
- * Kleine gekleurde stip die bij een Button of Link wordt geplaatst om
1604
- * zonder label of getal de aandacht te trekken bij een statuswijziging.
1605
- *
1606
- * Altijd aria-hidden="true" — context via dsn-visually-hidden in de parent.
1607
- * Parent-wrapper heeft position: relative nodig.
1608
- *
1609
- * @example
1610
- * ```tsx
1611
- * // Basis gebruik — negatieve dot bij een icon-only Button
1612
- * <div style={{ position: 'relative', display: 'inline-flex' }}>
1613
- * <Button variant="subtle" iconOnly iconStart={<Icon name="inbox" aria-hidden />}>
1614
- * Inbox
1615
- * <span className="dsn-visually-hidden">, 3 ongelezen berichten</span>
1616
- * </Button>
1617
- * <DotBadge variant="negative" />
1618
- * </div>
1619
- *
1620
- * // Met pulse-effect voor urgente statuswijzigingen
1621
- * <DotBadge variant="negative" pulse />
1622
- * ```
1623
- */
1624
- declare const DotBadge: React.ForwardRefExoticComponent<DotBadgeProps & React.RefAttributes<HTMLSpanElement>>;
1625
- //#endregion
1626
- //#region src/Spinner/Spinner.d.ts
1627
- type SpinnerSize = 'default' | 'large';
1628
- interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
1629
- /**
1630
- * Tekstlabel dat de laadtoestand beschrijft voor alle gebruikers.
1631
- * Altijd vereist — ook bij hideLabel wordt het label doorgegeven aan screenreaders.
1632
- */
1633
- label: string;
1634
- /**
1635
- * Verbergt het label visueel maar behoudt het voor screenreaders via dsn-visually-hidden
1636
- * @default false
1637
- */
1638
- hideLabel?: boolean;
1639
- /**
1640
- * Grootte van de spinner.
1641
- * default: 24×24px, label rechts.
1642
- * large: 48×48px, label gecentreerd onder de spinner.
1643
- * @default 'default'
1644
- */
1645
- size?: SpinnerSize;
1646
- }
1647
- /**
1648
- * Spinner component
1649
- * Cirkelvormige laadindicator voor onbepaalde wachttijden.
1650
- *
1651
- * role="status" op de container kondigt de laadtoestand aan bij screenreaders.
1652
- * Het label is altijd aanwezig — visueel verbergen via hideLabel behoudt toegankelijkheid.
1653
- *
1654
- * @example
1655
- * ```tsx
1656
- * // Standaard met zichtbaar label
1657
- * <Spinner label="Laden..." />
1658
- *
1659
- * // Grote variant met label onder de spinner
1660
- * <Spinner size="large" label="Pagina wordt geladen" />
1661
- *
1662
- * // Enkel visueel verborgen label (toegankelijk voor screenreaders)
1663
- * <Spinner label="Laden..." hideLabel />
1664
- * ```
1665
- */
1666
- declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLDivElement>>;
1667
- //#endregion
1668
- //#region src/ProgressBar/ProgressBar.d.ts
1669
- interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
1670
- /**
1671
- * Visueel verborgen label dat de voortgangsbalk beschrijft voor screenreaders.
1672
- * Altijd vereist — gekoppeld via `<label for>` aan het `<progress>`-element.
1673
- */
1674
- label: string;
1675
- /**
1676
- * Huidige voortgang (0 t/m max).
1677
- */
1678
- value: number;
1679
- /**
1680
- * Maximale waarde. Percentage wordt berekend als Math.round((value / max) * 100).
1681
- * @default 100
1682
- */
1683
- max?: number;
1684
- /**
1685
- * Optionele beschrijvende tekst onder de balk.
1686
- */
1687
- description?: React.ReactNode;
1688
- /**
1689
- * ID voor het `<progress>`-element en de bijbehorende `<label>`.
1690
- * Automatisch gegenereerd via useId() indien weggelaten.
1691
- */
1692
- id?: string;
1693
- /**
1694
- * Verbergt het zichtbare percentage-getal. Gebruik dit voor decoratief gebruik
1695
- * in combinatie met aria-hidden="true" op de component.
1696
- */
1697
- hideValue?: boolean;
1698
- }
1699
- /**
1700
- * ProgressBar component
1701
- * Horizontale voortgangsbalk voor bepaalde wachttijden.
1702
- *
1703
- * Het native <progress>-element biedt impliciete role="progressbar" met
1704
- * aria-valuenow, aria-valuemin en aria-valuemax. Een visueel verborgen
1705
- * <label> koppelt de toegankelijke naam via for/id.
1706
- *
1707
- * @example
1708
- * ```tsx
1709
- * // Basis
1710
- * <ProgressBar label="Bestand uploaden" value={35} />
1711
- *
1712
- * // Met beschrijving
1713
- * <ProgressBar
1714
- * label="Bestand uploaden"
1715
- * value={35}
1716
- * description="Bestand wordt geüpload, even geduld..."
1717
- * />
1718
- *
1719
- * // Stappen (stap 3 van 7)
1720
- * <ProgressBar label="Stap voortgang" value={3} max={7} />
1721
- * ```
1722
- */
1723
- declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
1724
- //#endregion
1725
- //#region src/NumberBadge/NumberBadge.d.ts
1726
- type NumberBadgeVariant = 'negative' | 'positive' | 'warning' | 'info' | 'neutral';
1727
- interface NumberBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
1728
- /**
1729
- * Signaalkleur van de badge
1730
- * @default 'negative'
1731
- */
1732
- variant?: NumberBadgeVariant;
1733
- /**
1734
- * Als `children` als getal groter is dan `maxCount`, wordt `{maxCount}+` getoond.
1735
- * Heeft geen effect als `children` geen getal is.
1736
- */
1737
- maxCount?: number;
1738
- }
1739
- /**
1740
- * NumberBadge component
1741
- * Compact inline-element dat een getal toont — zoals het aantal ongelezen berichten
1742
- * of openstaande taken. Geplaatst binnen een Button of Menu-item, naast het label.
1743
- *
1744
- * Altijd aria-hidden="true" — context via dsn-visually-hidden in de parent.
1745
- *
1746
- * @example
1747
- * ```tsx
1748
- * // Basis gebruik — inline in een Button
1749
- * <Button variant="subtle" iconStart={<Icon name="inbox" aria-hidden />}>
1750
- * Inbox
1751
- * <NumberBadge variant="negative">5</NumberBadge>
1752
- * </Button>
1753
- *
1754
- * // Afgekapt getal — toont "99+" als count > 99
1755
- * <Button variant="subtle" iconStart={<Icon name="inbox" aria-hidden />}>
1756
- * <span>
1757
- * Inbox
1758
- * <span className="dsn-visually-hidden">, 128 ongelezen berichten</span>
1759
- * </span>
1760
- * <NumberBadge variant="negative" maxCount={99}>128</NumberBadge>
1761
- * </Button>
1762
- * ```
1763
- */
1764
- declare const NumberBadge: React.ForwardRefExoticComponent<NumberBadgeProps & React.RefAttributes<HTMLSpanElement>>;
1765
- //#endregion
1766
- //#region src/StatusBadge/StatusBadge.d.ts
1767
- type StatusBadgeVariant = 'neutral' | 'positive' | 'negative' | 'warning' | 'info';
1768
- interface StatusBadgeProps extends React.HTMLAttributes<HTMLElement> {
1769
- /**
1770
- * Semantische variant die de signaalkleur bepaalt
1771
- * @default 'neutral'
1772
- */
1773
- variant?: StatusBadgeVariant;
1774
- /**
1775
- * Optioneel decoratief icoon vóór de badge-tekst (altijd aria-hidden)
1776
- */
1777
- iconStart?: React.ReactNode;
1778
- /**
1779
- * Badge-tekst (verplicht)
1780
- */
1781
- children: React.ReactNode;
1782
- }
1783
- /**
1784
- * StatusBadge component
1785
- * Compact label dat een status communiceert met een signaalkleur en optioneel icoon.
1786
- *
1787
- * @example
1788
- * ```tsx
1789
- * // Neutral (default), zonder icoon
1790
- * <StatusBadge>Actief</StatusBadge>
1791
- *
1792
- * // Positive met icoon
1793
- * <StatusBadge variant="positive" iconStart={<Icon name="circle-check" size="sm" aria-hidden />}>
1794
- * Goedgekeurd
1795
- * </StatusBadge>
1796
- *
1797
- * // Negative met icoon
1798
- * <StatusBadge variant="negative" iconStart={<Icon name="exclamation-circle" size="sm" aria-hidden />}>
1799
- * Afgewezen
1800
- * </StatusBadge>
1801
- *
1802
- * // Info met icoon
1803
- * <StatusBadge variant="info" iconStart={<Icon name="info-circle" size="sm" aria-hidden />}>
1804
- * Nieuw
1805
- * </StatusBadge>
1806
- *
1807
- * // Warning met icoon
1808
- * <StatusBadge variant="warning" iconStart={<Icon name="alert-triangle" size="sm" aria-hidden />}>
1809
- * Let op
1810
- * </StatusBadge>
1811
- * ```
1812
- */
1813
- declare const StatusBadge: React.ForwardRefExoticComponent<StatusBadgeProps & React.RefAttributes<HTMLElement>>;
1814
- //#endregion
1815
- //#region src/Alert/Alert.d.ts
1816
- type AlertVariant = 'info' | 'positive' | 'negative' | 'warning';
1817
- interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
1818
- /**
1819
- * Semantische variant die de signaalkleur bepaalt
1820
- * @default 'info'
1821
- */
1822
- variant?: AlertVariant;
1823
- /**
1824
- * Koptekst van het bericht (verplicht)
1825
- */
1826
- heading: string;
1827
- /**
1828
- * Semantisch heading-niveau — bepaalt het HTML-element (h1–h6)
1829
- * @default 2
1830
- */
1831
- headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
1832
- /**
1833
- * Icoon vóór de heading.
1834
- * - `undefined` (default) — aanbevolen icoon per variant
1835
- * - `null` — geen icoon
1836
- * - `ReactNode` — aangepast icoon
1837
- */
1838
- iconStart?: React.ReactNode;
1839
- /**
1840
- * Visueel verborgen tekst vóór de heading die de variant benoemt voor
1841
- * screenreadergebruikers (inclusief scheidingsteken en spatie).
1842
- * - `undefined` (default) — standaardtekst per variant:
1843
- * `'Informatie: '` / `'Succes: '` / `'Foutmelding: '` / `'Let op: '`
1844
- * - `''` — geen variant-label (bijv. als de heading de variant al benoemt)
1845
- * - `string` — eigen tekst, bijv. voor een andere taal
1846
- */
1847
- variantLabel?: string;
1848
- /**
1849
- * Optionele body content (tekst, lijst, links, etc.)
1850
- */
1851
- children?: React.ReactNode;
1852
- }
1853
- /**
1854
- * Alert component
1855
- * Belangrijk bericht dat de gebruiker informeert over de huidige activiteit of toestand.
1856
- *
1857
- * @example
1858
- * ```tsx
1859
- * // Info (default)
1860
- * <Alert heading="Uw aanvraag wordt verwerkt">
1861
- * Dit kan enkele minuten duren.
1862
- * </Alert>
1863
- *
1864
- * // Positive
1865
- * <Alert variant="positive" heading="Gelukt">
1866
- * Uw gegevens zijn opgeslagen.
1867
- * </Alert>
1868
- *
1869
- * // Negative
1870
- * <Alert variant="negative" heading="Er is een fout opgetreden">
1871
- * Controleer uw gegevens en probeer het opnieuw.
1872
- * </Alert>
1873
- *
1874
- * // Warning
1875
- * <Alert variant="warning" heading="Let op">
1876
- * Uw sessie verloopt over 5 minuten.
1877
- * </Alert>
1878
- *
1879
- * // Zonder icoon
1880
- * <Alert variant="info" heading="Opmerking" iconStart={null}>
1881
- * Aanvullende informatie.
1882
- * </Alert>
1883
- *
1884
- * // Met aangepast icoon
1885
- * <Alert variant="info" heading="Tip" iconStart={<Icon name="star" aria-hidden />}>
1886
- * Gebruik de zoekfunctie om snel te navigeren.
1887
- * </Alert>
1888
- *
1889
- * // Variant-label onderdrukken (heading benoemt de variant al)
1890
- * <Alert variant="negative" heading="Foutmelding" variantLabel="">
1891
- * Controleer uw gegevens.
1892
- * </Alert>
1893
- * ```
1894
- */
1895
- declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
1896
- //#endregion
1897
- //#region src/Note/Note.d.ts
1898
- type NoteVariant = 'neutral' | 'info' | 'positive' | 'negative' | 'warning';
1899
- type NoteAs = 'div' | 'aside' | 'nav' | 'section';
1900
- interface NoteProps extends React.HTMLAttributes<HTMLElement> {
1901
- /**
1902
- * HTML-element — ontkoppelt semantiek van visuele stijl
1903
- * @default 'div'
1904
- */
1905
- as?: NoteAs;
1906
- /**
1907
- * Semantische variant die de signaalkleur bepaalt
1908
- * @default 'neutral'
1909
- */
1910
- variant?: NoteVariant;
1911
- /**
1912
- * Optionele heading-tekst (renders als `<Heading appearance="heading-3">`)
1913
- */
1914
- heading?: string;
1915
- /**
1916
- * Semantisch heading-niveau — bepaalt het HTML-element (h1–h6)
1917
- * @default 3
1918
- */
1919
- headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
1920
- /**
1921
- * Icoon vóór de heading.
1922
- * - `undefined` (default) — aanbevolen icoon per variant
1923
- * - `null` — geen icoon
1924
- * - `ReactNode` — aangepast icoon
1925
- */
1926
- iconStart?: React.ReactNode;
1927
- /**
1928
- * Visueel verborgen tekst die de variant benoemt voor screenreadergebruikers
1929
- * (inclusief scheidingsteken en spatie). Komt vóór de heading, of vóór de
1930
- * content als er geen heading is.
1931
- * - `undefined` (default) — standaardtekst per variant:
1932
- * `''` (neutral) / `'Informatie: '` / `'Succes: '` / `'Foutmelding: '` / `'Let op: '`
1933
- * - `''` — geen variant-label (bijv. als de heading de variant al benoemt)
1934
- * - `string` — eigen tekst, bijv. voor een andere taal
1935
- */
1936
- variantLabel?: string;
1937
- /**
1938
- * Body-content: tekst, lijst, links, etc.
1939
- */
1940
- children?: React.ReactNode;
1941
- }
1942
- /**
1943
- * Note component
1944
- * Visueel uitgelicht bericht voor aanvullende of belangrijke informatie.
1945
- * Passieve tegenhanger van Alert — geen live region, wordt alleen voorgelezen bij navigatie.
1946
- *
1947
- * @example
1948
- * ```tsx
1949
- * // Neutral (default), inline tip
1950
- * <Note heading="Let op">
1951
- * <Paragraph>Aanvullende informatie over dit onderwerp.</Paragraph>
1952
- * </Note>
1953
- *
1954
- * // Info variant
1955
- * <Note variant="info" heading="Wist je dat...">
1956
- * <Paragraph>Extra context.</Paragraph>
1957
- * </Note>
1958
- *
1959
- * // Zonder heading — icoon overspant beide rijen
1960
- * <Note variant="warning">
1961
- * <Paragraph>Dit heeft gevolgen voor uw aanvraag.</Paragraph>
1962
- * </Note>
1963
- *
1964
- * // as="aside" — echt aanvullende content
1965
- * <Note as="aside" variant="info" heading="Achtergrondinformatie">
1966
- * <Paragraph>Meer context.</Paragraph>
1967
- * </Note>
1968
- *
1969
- * // as="nav" — eigenstandige navigatiesectie (niet voor een pagina-inhoudsopgave: gebruik TableOfContents)
1970
- * <Note as="nav" variant="neutral" heading="Gerelateerde pagina's" headingLevel={2}>
1971
- * <UnorderedList>
1972
- * <li><Link href="/gerelateerd-1">Gerelateerde pagina 1</Link></li>
1973
- * </UnorderedList>
1974
- * </Note>
1975
- *
1976
- * // Icoon weglaten
1977
- * <Note variant="info" heading="Opmerking" iconStart={null}>
1978
- * <Paragraph>Zonder icoon.</Paragraph>
1979
- * </Note>
1980
- *
1981
- * // Variant-label onderdrukken (heading benoemt de variant al)
1982
- * <Note variant="warning" heading="Waarschuwing" variantLabel="">
1983
- * <Paragraph>Dit heeft gevolgen voor uw aanvraag.</Paragraph>
1984
- * </Note>
1985
- * ```
1986
- */
1987
- declare const Note: React.ForwardRefExoticComponent<NoteProps & React.RefAttributes<HTMLElement>>;
1988
- //#endregion
1989
- //#region src/Table/Table.d.ts
1990
- type TableProps = React.HTMLAttributes<HTMLTableElement> & {
1991
- /**
1992
- * Zichtbaar bijschrift boven de tabel.
1993
- * Dient ook als toegankelijke naam van de tabel voor schermlezers.
1994
- */
1995
- caption: string;
1996
- /**
1997
- * Optionele ID voor de caption.
1998
- * Standaard auto-gegenereerd via `useId()`.
1999
- * Wordt gebruikt voor `aria-labelledby` op de scroll-wrapper.
2000
- */
2001
- captionId?: string;
2002
- /**
2003
- * Wikkelt de tabel in een scroll-container (`role="region"`, `tabIndex={0}`, `aria-labelledby`).
2004
- * Gebruik dit voor tabellen die mogelijk breder zijn dan hun container.
2005
- */
2006
- scrollable?: boolean;
2007
- };
2008
- /**
2009
- * Tabel component voor het weergeven van tweedimensionale tabeldata.
2010
- *
2011
- * Gebruik altijd `<th scope="col">` voor kolomkoppen en `<th scope="row">` voor rijkoppen.
2012
- * Voeg `<tfoot>` toe via children voor een optionele totaal- of samenvattingsrij.
2013
- *
2014
- * @example
2015
- * <Table caption="Productoverzicht">
2016
- * <thead>
2017
- * <tr>
2018
- * <th scope="col">Product</th>
2019
- * <th scope="col">Prijs</th>
2020
- * </tr>
2021
- * </thead>
2022
- * <tbody>
2023
- * <tr>
2024
- * <th scope="row">Laptop</th>
2025
- * <td>€999</td>
2026
- * </tr>
2027
- * </tbody>
2028
- * </Table>
2029
- */
2030
- declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & {
2031
- /**
2032
- * Zichtbaar bijschrift boven de tabel.
2033
- * Dient ook als toegankelijke naam van de tabel voor schermlezers.
2034
- */
2035
- caption: string;
2036
- /**
2037
- * Optionele ID voor de caption.
2038
- * Standaard auto-gegenereerd via `useId()`.
2039
- * Wordt gebruikt voor `aria-labelledby` op de scroll-wrapper.
2040
- */
2041
- captionId?: string;
2042
- /**
2043
- * Wikkelt de tabel in een scroll-container (`role="region"`, `tabIndex={0}`, `aria-labelledby`).
2044
- * Gebruik dit voor tabellen die mogelijk breder zijn dan hun container.
2045
- */
2046
- scrollable?: boolean;
2047
- } & React.RefAttributes<HTMLTableElement>>;
2048
- //#endregion
2049
- //#region src/Details/Details.d.ts
2050
- interface DetailsProps extends Omit<React.HTMLAttributes<HTMLDetailsElement>, 'onToggle'> {
2051
- /**
2052
- * Zichtbare labeltekst in de `<summary>`
2053
- */
2054
- summary: string;
2055
- /**
2056
- * Standaard open bij eerste render (ongecontroleerde staat)
2057
- * @default false
2058
- */
2059
- defaultOpen?: boolean;
2060
- /**
2061
- * Callback die wordt aangeroepen wanneer de open/dicht staat wijzigt
2062
- */
2063
- onToggle?: (open: boolean) => void;
2064
- /**
2065
- * De verborgen inhoud
2066
- */
2067
- children?: React.ReactNode;
2068
- }
2069
- /**
2070
- * Details component
2071
- * Uitvouwbare inhoudsaanwijzer voor aanvullende inhoud die niet iedereen nodig heeft.
2072
- * Gebaseerd op het native `<details>`/`<summary>` element — CSS-only, geen JavaScript voor de toggle.
2073
- *
2074
- * @example
2075
- * ```tsx
2076
- * // Standaard gesloten
2077
- * <Details summary="Meer informatie">
2078
- * <Paragraph>Aanvullende informatie die beschikbaar is voor wie dit nodig heeft.</Paragraph>
2079
- * </Details>
2080
- *
2081
- * // Standaard open
2082
- * <Details summary="Meer informatie" defaultOpen>
2083
- * <Paragraph>Inhoud is standaard zichtbaar.</Paragraph>
2084
- * </Details>
2085
- *
2086
- * // Met toggle callback
2087
- * <Details summary="Meer informatie" onToggle={(open) => console.log('open:', open)}>
2088
- * <Paragraph>Inhoud.</Paragraph>
2089
- * </Details>
2090
- * ```
2091
- */
2092
- declare const Details: React.ForwardRefExoticComponent<DetailsProps & React.RefAttributes<HTMLDetailsElement>>;
2093
- //#endregion
2094
- //#region src/SummaryList/SummaryList.d.ts
2095
- interface SummaryListProps extends React.HTMLAttributes<HTMLDListElement> {
2096
- /**
2097
- * Removes the row separator borders
2098
- * @default false
2099
- */
2100
- noBorder?: boolean;
2101
- /**
2102
- * `SummaryListRow` elements
2103
- */
2104
- children?: React.ReactNode;
2105
- }
2106
- declare const SummaryList: React.ForwardRefExoticComponent<SummaryListProps & React.RefAttributes<HTMLDListElement>>;
2107
- interface SummaryListRowProps extends React.HTMLAttributes<HTMLDivElement> {
2108
- /**
2109
- * Marks a row without an actions cell; ensures consistent column alignment
2110
- * in mixed lists where some rows have actions and others do not.
2111
- * @default false
2112
- */
2113
- noActions?: boolean;
2114
- /**
2115
- * `SummaryListKey`, `SummaryListValue`, and optionally `SummaryListActions`
2116
- */
2117
- children?: React.ReactNode;
2118
- }
2119
- declare const SummaryListRow: React.ForwardRefExoticComponent<SummaryListRowProps & React.RefAttributes<HTMLDivElement>>;
2120
- interface SummaryListKeyProps extends React.HTMLAttributes<HTMLElement> {
2121
- /**
2122
- * Label text or content
2123
- */
2124
- children?: React.ReactNode;
2125
- }
2126
- declare const SummaryListKey: React.ForwardRefExoticComponent<SummaryListKeyProps & React.RefAttributes<HTMLElement>>;
2127
- interface SummaryListValueProps extends React.HTMLAttributes<HTMLElement> {
2128
- /**
2129
- * Value content; may contain text, a `Link`, or other inline elements
2130
- */
2131
- children?: React.ReactNode;
2132
- }
2133
- declare const SummaryListValue: React.ForwardRefExoticComponent<SummaryListValueProps & React.RefAttributes<HTMLElement>>;
2134
- interface SummaryListActionsProps extends React.HTMLAttributes<HTMLElement> {
2135
- /**
2136
- * One or more `Link` or `LinkButton` components
2137
- */
2138
- children?: React.ReactNode;
2139
- }
2140
- declare const SummaryListActions: React.ForwardRefExoticComponent<SummaryListActionsProps & React.RefAttributes<HTMLElement>>;
2141
- //#endregion
2142
- //#region src/Logo/Logo.d.ts
2143
- interface LogoProps extends React.SVGProps<SVGSVGElement> {
2144
- /**
2145
- * Accessible naam via <title> in de SVG.
2146
- * Niet gerenderd wanneer aria-hidden={true}.
2147
- * @default 'Starter Kit'
2148
- */
2149
- title?: string;
2150
- }
2151
- /**
2152
- * Logo component
2153
- * Rendert het Starter Kit-logo als inline SVG met theme-aware kleuren via design tokens.
2154
- *
2155
- * De twee kleurlagen zijn gekoppeld aan tokens:
2156
- * - dsn-logo__primary — achtergrondrechthoek + letterpaden (merkkleur van het actieve thema)
2157
- * - dsn-logo__label — binnenste rechthoek (documentachtergrondkleur, doorkijkje-effect)
2158
- *
2159
- * @example
2160
- * // Standalone — screenreader leest de title
2161
- * <Logo />
2162
- *
2163
- * // Decoratief — in een link, omringende context levert de accessible name
2164
- * <a href="/">
2165
- * <Logo aria-hidden={true} />
2166
- * <span className="dsn-visually-hidden">Starter Kit — terug naar homepage</span>
2167
- * </a>
2168
- *
2169
- * // Custom title (bijv. na white-label herbranding)
2170
- * <Logo title="Mijn Organisatie" />
2171
- */
2172
- declare const Logo: React.ForwardRefExoticComponent<Omit<LogoProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
2173
- //#endregion
2174
- //#region src/SkipLink/SkipLink.d.ts
2175
- interface SkipLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
2176
- /**
2177
- * Het doel-ID waarnaar de gebruiker gesprongen wordt (inclusief `#`).
2178
- * Het element met dit ID moet `tabindex="-1"` hebben als het niet natively focusbaar is.
2179
- * @example "#main-content"
2180
- */
2181
- href: string;
2182
- /**
2183
- * Tekst van de skip-link — zichtbaar voor screenreaders en bij focus.
2184
- * @default "Ga direct naar de hoofdinhoud"
2185
- */
2186
- children?: React.ReactNode;
2187
- /**
2188
- * Extra CSS klassen
2189
- */
2190
- className?: string;
2191
- }
2192
- /**
2193
- * SkipLink — toegankelijkheidskoppeling om herhalende navigatie te omzeilen.
2194
- *
2195
- * Plaatst de link als **eerste focusbaar element** in de DOM, vóór `<header>` en `<nav>`.
2196
- * Voldoet aan WCAG 2.2 succescriterium 2.4.1 (Bypass Blocks, Level A).
2197
- *
2198
- * @example
2199
- * ```tsx
2200
- * // Standaard gebruik — eerste element in <body>
2201
- * <SkipLink href="#main-content">Ga direct naar de hoofdinhoud</SkipLink>
2202
- * <header>...</header>
2203
- * <main id="main-content" tabIndex={-1}>...</main>
2204
- * ```
2205
- */
2206
- declare const SkipLink: React.ForwardRefExoticComponent<SkipLinkProps & React.RefAttributes<HTMLAnchorElement>>;
2207
- //#endregion
2208
- //#region src/BreadcrumbNavigation/BreadcrumbNavigation.d.ts
2209
- interface BreadcrumbNavigationProps extends React.HTMLAttributes<HTMLElement> {
2210
- /**
2211
- * Toegankelijke naam van het `<nav>` landmark
2212
- * @default "Broodkruimelpad"
2213
- */
2214
- 'aria-label'?: string;
2215
- /**
2216
- * `"compact"` activeert container-query responsief gedrag:
2217
- * bij weinig ruimte wordt enkel het ouder-item met terug-pijl getoond
2218
- * @default "default"
2219
- */
2220
- variant?: 'default' | 'compact';
2221
- /**
2222
- * `BreadcrumbNavigationItem` elementen
2223
- */
2224
- children: React.ReactNode;
2225
- }
2226
- /**
2227
- * BreadcrumbNavigation component
2228
- * Toont de hiërarchische locatie van de gebruiker en biedt navigatie naar bovenliggende pagina's.
2229
- * Plaatsen vóór `<main>`, na de primaire navigatie.
2230
- *
2231
- * @example
2232
- * ```tsx
2233
- * // Standaard
2234
- * <BreadcrumbNavigation aria-label="Broodkruimelpad">
2235
- * <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
2236
- * <BreadcrumbNavigationItem href="/categorie">Categorie</BreadcrumbNavigationItem>
2237
- * <BreadcrumbNavigationItem current>Product</BreadcrumbNavigationItem>
2238
- * </BreadcrumbNavigation>
2239
- *
2240
- * // Compact variant
2241
- * <BreadcrumbNavigation aria-label="Broodkruimelpad" variant="compact">
2242
- * <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
2243
- * <BreadcrumbNavigationItem href="/categorie">Categorie</BreadcrumbNavigationItem>
2244
- * <BreadcrumbNavigationItem current>Product</BreadcrumbNavigationItem>
2245
- * </BreadcrumbNavigation>
2246
- * ```
2247
- */
2248
- declare const BreadcrumbNavigation: React.ForwardRefExoticComponent<BreadcrumbNavigationProps & React.RefAttributes<HTMLElement>>;
2249
- //#endregion
2250
- //#region src/BreadcrumbNavigation/BreadcrumbNavigationItem.d.ts
2251
- interface BreadcrumbNavigationItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
2252
- /**
2253
- * URL van de pagina. Laat weg bij het huidige pagina-item: dat wordt
2254
- * als platte tekst gerenderd en niet als link
2255
- */
2256
- href?: string;
2257
- /**
2258
- * Markeert het huidige pagina-item. Rendert de tekst zonder link en
2259
- * zet `aria-current="page"` op de `<li>`
2260
- * @default false
2261
- */
2262
- current?: boolean;
2263
- /**
2264
- * Zichtbare link- of paginatekst
2265
- */
2266
- children: React.ReactNode;
2267
- /**
2268
- * @internal — wordt gezet door BreadcrumbNavigation (compact variant)
2269
- */
2270
- showBackIcon?: boolean;
2271
- }
2272
- /**
2273
- * BreadcrumbNavigationItem component
2274
- * Enkel item in een BreadcrumbNavigation. Gebruik altijd binnen een `<BreadcrumbNavigation>`.
2275
- *
2276
- * Het huidige pagina-item is bewust géén link: een link naar de pagina waar je
2277
- * al bent doet niets, terwijl hij er wel uitziet als de andere items. Zie
2278
- * WCAG 3.2.4 Consistent Identification.
2279
- *
2280
- * @example
2281
- * ```tsx
2282
- * <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
2283
- * <BreadcrumbNavigationItem current>Categorie</BreadcrumbNavigationItem>
2284
- * ```
2285
- */
2286
- declare const BreadcrumbNavigationItem: React.ForwardRefExoticComponent<BreadcrumbNavigationItemProps & React.RefAttributes<HTMLLIElement>>;
2287
- //#endregion
2288
- //#region src/Menu/Menu.d.ts
2289
- type MenuOrientation = 'vertical' | 'horizontal';
2290
- interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
2291
- /**
2292
- * Bepaalt de lay-out van de items.
2293
- * - `vertical` (standaard): items onder elkaar, volledige breedte
2294
- * - `horizontal`: items naast elkaar, breedte op inhoud
2295
- * @default 'vertical'
2296
- */
2297
- orientation?: MenuOrientation;
2298
- /**
2299
- * Geeft aan dat level-1 items een `iconStart` hebben.
2300
- * Level 2+ items worden dan ingesprongen zodat hun tekst uitlijnt met het label van level 1.
2301
- * @default false
2302
- */
2303
- iconStart?: boolean;
2304
- /**
2305
- * `MenuLink`- en/of `MenuButton`-items (verplicht)
2306
- */
2307
- children: React.ReactNode;
2308
- /**
2309
- * Aanvullende CSS-klassen voor het `<ul>`-element
2310
- */
2311
- className?: string;
2312
- }
2313
- /**
2314
- * Menu component
2315
- * Containercomponent voor MenuLink- en MenuButton-items.
2316
- * Rendert een `<ul>` met verticale (standaard) of horizontale oriëntatie.
2317
- *
2318
- * Gebruik `Menu` altijd binnen een semantisch element zoals `<nav>` —
2319
- * dit is de verantwoordelijkheid van de ouder.
2320
- *
2321
- * @example
2322
- * ```tsx
2323
- * // Verticaal (standaard)
2324
- * <nav aria-label="Hoofdnavigatie">
2325
- * <Menu>
2326
- * <MenuLink href="/home">Home</MenuLink>
2327
- * <MenuLink href="/over">Over ons</MenuLink>
2328
- * <MenuButton onClick={handleLogout}>Uitloggen</MenuButton>
2329
- * </Menu>
2330
- * </nav>
2331
- *
2332
- * // Horizontaal
2333
- * <nav aria-label="Paginanavigatie">
2334
- * <Menu orientation="horizontal">
2335
- * <MenuLink href="/home" current>Home</MenuLink>
2336
- * <MenuLink href="/over">Over ons</MenuLink>
2337
- * </Menu>
2338
- * </nav>
2339
- * ```
2340
- */
2341
- declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>>;
2342
- //#endregion
2343
- //#region src/MenuButton/MenuButton.d.ts
2344
- interface MenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
2345
- /**
2346
- * Icoon links van het label
2347
- */
2348
- iconStart?: React.ReactNode;
2349
- /**
2350
- * Icoon rechts van het label
2351
- */
2352
- iconEnd?: React.ReactNode;
2353
- /**
2354
- * DotBadge element voor statusindicatie (bijv. nieuw/ongelezen zonder getal).
2355
- * Verwacht een `<DotBadge>` component.
2356
- */
2357
- dotBadge?: React.ReactNode;
2358
- /**
2359
- * Zichtbare knoptekst
2360
- */
2361
- children?: React.ReactNode;
2362
- /**
2363
- * Aanvullende CSS-klassen voor het `<li>`-element
2364
- */
2365
- className?: string;
2366
- }
2367
- /**
2368
- * MenuButton component
2369
- * Navigatieknop voor JavaScript-acties — semantisch een `<button>`, visueel consistent met MenuLink.
2370
- *
2371
- * Gebruik in een `<ul>`-element wanneer de actie geen URL-navigatie is maar een JS-handeling triggert
2372
- * (bijv. uitloggen, een modal openen of een sectie in/uitklappen).
2373
- *
2374
- * @example
2375
- * ```tsx
2376
- * // Basisgebruik
2377
- * <MenuButton onClick={handleLogout}>Uitloggen</MenuButton>
2378
- *
2379
- * // Met icoon start
2380
- * <MenuButton iconStart={<Icon name="settings" aria-hidden />}>
2381
- * Instellingen
2382
- * </MenuButton>
2383
- *
2384
- * // Met DotBadge (statusindicatie)
2385
- * <MenuButton
2386
- * iconStart={<Icon name="bell" aria-hidden />}
2387
- * dotBadge={<DotBadge variant="negative" />}
2388
- * >
2389
- * Meldingen
2390
- * <span className="dsn-visually-hidden">, nieuwe meldingen beschikbaar</span>
2391
- * </MenuButton>
2392
- * ```
2393
- */
2394
- declare const MenuButton: React.ForwardRefExoticComponent<MenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
2395
- //#endregion
2396
- //#region src/MenuLink/MenuLink.d.ts
2397
- type MenuLinkLevel = 1 | 2 | 3 | 4;
2398
- interface MenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
2399
- /**
2400
- * Navigatie-URL van de link
2401
- */
2402
- href?: string;
2403
- /**
2404
- * Hiërarchisch niveau — bepaalt de `padding-inline-start` inspringing
2405
- * @default 1
2406
- */
2407
- level?: MenuLinkLevel;
2408
- /**
2409
- * Markeert de actieve/huidige pagina.
2410
- * Voegt `aria-current="page"` toe aan het `<a>`-element.
2411
- * @default false
2412
- */
2413
- current?: boolean;
2414
- /**
2415
- * Icoon links van het label
2416
- */
2417
- iconStart?: React.ReactNode;
2418
- /**
2419
- * Icoon rechts van het label — gebruik hier bij voorkeur geen NumberBadge (zie `numberBadge`)
2420
- */
2421
- iconEnd?: React.ReactNode;
2422
- /**
2423
- * NumberBadge element rechts van het label (naast iconEnd)
2424
- * Verwacht een `<NumberBadge>` component.
2425
- */
2426
- numberBadge?: React.ReactNode;
2427
- /**
2428
- * Toont een uitklapknop naast de link (voor subnavigatie).
2429
- * @default false
2430
- */
2431
- subItems?: boolean;
2432
- /**
2433
- * Geeft aan of de subnavigatie momenteel uitgevouwen is.
2434
- * Alleen relevant wanneer `subItems` true is.
2435
- * @default false
2436
- */
2437
- expanded?: boolean;
2438
- /**
2439
- * Callback die aangeroepen wordt wanneer op de uitklapknop geklikt wordt.
2440
- */
2441
- onExpandToggle?: () => void;
2442
- /**
2443
- * Zichtbare linktekst — ook gebruikt voor de toegankelijke naam van de uitklapknop
2444
- */
2445
- children?: React.ReactNode;
2446
- /**
2447
- * Aanvullende CSS-klassen voor het `<li>`-element
2448
- */
2449
- className?: string;
2450
- }
2451
- /**
2452
- * MenuLink component
2453
- * Navigatielink met niveau-hiërarchie, actieve staat en uitklapbare subnavigatie.
2454
- * Semantisch een `<a>`, visueel consistent met MenuButton.
2455
- *
2456
- * Gebruik in een `<ul>`-element (het `<nav>`-element met lijst).
2457
- *
2458
- * @example
2459
- * ```tsx
2460
- * // Basisgebruik (level 1)
2461
- * <MenuLink href="/dashboard">Dashboard</MenuLink>
2462
- *
2463
- * // Actieve pagina
2464
- * <MenuLink href="/rapporten" current>Rapporten</MenuLink>
2465
- *
2466
- * // Level 2 (subpagina)
2467
- * <MenuLink href="/rapporten/maandelijks" level={2}>Maandelijks</MenuLink>
2468
- *
2469
- * // Met icoon en NumberBadge
2470
- * <MenuLink
2471
- * href="/inbox"
2472
- * iconStart={<Icon name="mail" aria-hidden />}
2473
- * numberBadge={<NumberBadge variant="negative">5</NumberBadge>}
2474
- * >
2475
- * Inbox
2476
- * </MenuLink>
2477
- *
2478
- * // Met uitklapknop
2479
- * <MenuLink
2480
- * href="/rapporten"
2481
- * subItems
2482
- * expanded={isExpanded}
2483
- * onExpandToggle={() => setIsExpanded(!isExpanded)}
2484
- * >
2485
- * Rapporten
2486
- * </MenuLink>
2487
- * ```
2488
- */
2489
- declare const MenuLink: React.ForwardRefExoticComponent<MenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
2490
- //#endregion
2491
- //#region src/PageBody/PageBody.d.ts
2492
- interface PageBodyProps extends React.HTMLAttributes<HTMLDivElement> {
2493
- /**
2494
- * De paginainhoud: doorgaans een `<main>` element met `id="main-content"`.
2495
- */
2496
- children: React.ReactNode;
2497
- /**
2498
- * Extra CSS-klassen
2499
- */
2500
- className?: string;
2501
- }
2502
- /**
2503
- * PageBody component
2504
- * Structurele wrapper voor de hoofdinhoud van een pagina. Vult de beschikbare
2505
- * verticale ruimte op binnen `PageLayout` zodat `PageFooter` altijd onderaan
2506
- * de viewport staat (sticky footer patroon via `flex: 1`).
2507
- *
2508
- * @example
2509
- * ```tsx
2510
- * <PageLayout>
2511
- * <PageHeader logoSlot={<Logo />} />
2512
- * <PageBody>
2513
- * <main id="main-content" tabIndex={-1}>
2514
- * <Container>...</Container>
2515
- * </main>
2516
- * </PageBody>
2517
- * <PageFooter slot1={<Logo />} />
2518
- * </PageLayout>
2519
- * ```
2520
- */
2521
- declare const PageBody: React.ForwardRefExoticComponent<PageBodyProps & React.RefAttributes<HTMLDivElement>>;
2522
- //#endregion
2523
- //#region src/PageFooter/PageFooter.d.ts
2524
- type PageFooterColorScheme = 'default' | 'inverse';
2525
- interface PageFooterProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
2526
- /** Kolom 1 (inline-start). Doorgaans het organisatielogo in een `<a>`. */
2527
- slot1?: React.ReactNode;
2528
- /** Kolom 2. Optioneel — wordt niet gerenderd als weggelaten. */
2529
- slot2?: React.ReactNode;
2530
- /** Kolom 3. Vrije inhoud: navigatielinks, tekst, adressen, etc. */
2531
- slot3?: React.ReactNode;
2532
- /** Kolom 4 (inline-end). Vrije inhoud: juridische links, social media, etc. */
2533
- slot4?: React.ReactNode;
2534
- /**
2535
- * Kleurschema van de footer.
2536
- * - `default`: accent-1 achtergrond (`bg-default`)
2537
- * - `inverse`: accent-1-inverse achtergrond voor een donkere huisstijlvariant
2538
- * @default 'default'
2539
- */
2540
- colorScheme?: PageFooterColorScheme;
2541
- }
2542
- /**
2543
- * PageFooter component
2544
- * Paginavoettekst met accent-1 achtergrond, dikke border-block-start en
2545
- * een 4-koloms grid. Responsief: verticale stapeling op mobiel,
2546
- * vier gelijke kolommen op grote viewports (≥ 64em).
2547
- *
2548
- * Het `<footer>` element als directe afstammeling van `<body>` heeft
2549
- * impliciet `role="contentinfo"` — geen extra attribuut nodig.
2550
- *
2551
- * @example
2552
- * ```tsx
2553
- * <PageFooter
2554
- * slot1={
2555
- * <a href="/">
2556
- * <Logo aria-hidden={true} />
2557
- * <span className="dsn-visually-hidden">Starter Kit — terug naar homepage</span>
2558
- * </a>
2559
- * }
2560
- * slot3={
2561
- * <UnorderedList>
2562
- * <li><Link href="/nieuws">Nieuws</Link></li>
2563
- * <li><Link href="/over-ons">Over ons</Link></li>
2564
- * </UnorderedList>
2565
- * }
2566
- * slot4={
2567
- * <UnorderedList>
2568
- * <li><Link href="/privacy">Privacyverklaring</Link></li>
2569
- * <li><Link href="/accessibility">Toegankelijkheid</Link></li>
2570
- * </UnorderedList>
2571
- * }
2572
- * />
2573
- * ```
2574
- */
2575
- declare const PageFooter: React.ForwardRefExoticComponent<PageFooterProps & React.RefAttributes<HTMLElement>>;
2576
- //#endregion
2577
- //#region src/PageHeader/PageHeader.d.ts
2578
- type PageHeaderSticky = 'none' | 'sticky' | 'auto-hide';
2579
- type PageHeaderLayout = 'default' | 'compact';
2580
- type PageHeaderColorScheme = 'default' | 'inverse';
2581
- interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
2582
- /**
2583
- * Logo-inhoud — `<svg>`, `<img>`, of een `<a>` die een logo omhult.
2584
- * De CSS past automatisch `max-block-size` toe op de directe child.
2585
- */
2586
- logoSlot: React.ReactNode;
2587
- /**
2588
- * Scrollgedrag van de header.
2589
- * - `none` (standaard): header scrollt mee met de pagina
2590
- * - `sticky`: header blijft bovenaan de viewport vastgeplakt
2591
- * - `auto-hide`: sticky + verbergt bij scroll-down, toont bij scroll-up
2592
- * @default 'none'
2593
- */
2594
- sticky?: PageHeaderSticky;
2595
- /**
2596
- * Lay-out van de header op large viewport (≥ 64em).
2597
- * - `default`: twee horizontale banden — Masthead (logo + servicemenu + zoekveld)
2598
- * en Navigatiebalk (primaire navigatie op accent-1 achtergrond)
2599
- * - `compact`: één enkele rij — logo (inline-start), primaire navigatie (gecentreerd),
2600
- * servicemenu + zoekknop (inline-end). Geeft `primaryNavigationLarge` voorrang
2601
- * boven `primaryNavigation` (en idem voor secondary) zodat de Drawer altijd
2602
- * de verticale variant ontvangt.
2603
- * @default 'default'
2604
- */
2605
- layout?: PageHeaderLayout;
2606
- /**
2607
- * Kleurschema van de header.
2608
- * - `default`: neutrale achtergrond met accent-1 navbar
2609
- * - `inverse`: sterke accent-1-inverse achtergrond op navbar en compact balk
2610
- * voor prominente branding. Het masthead blijft altijd neutraal.
2611
- * Logo-kleuren passen zich automatisch aan via CSS context overrides.
2612
- * @default 'default'
2613
- */
2614
- colorScheme?: PageHeaderColorScheme;
2615
- /**
2616
- * Initiële open-staat van het zoekpaneel (small viewport).
2617
- * Handig voor Storybook en tests — het paneel kan daarna nog steeds
2618
- * worden geopend/gesloten via de knop.
2619
- * @default false
2620
- */
2621
- initialSearchOpen?: boolean;
2622
- /**
2623
- * Primaire navigatie-inhoud in de Drawer (small viewport) — doorgaans een verticale `<Menu>` met
2624
- * `<MenuLink>`-items inclusief uitklapmogelijkheden voor sub-niveaus.
2625
- */
2626
- primaryNavigation?: React.ReactNode;
2627
- /**
2628
- * Primaire navigatie-inhoud in de Navigatiebalk (large viewport) — doorgaans een horizontale
2629
- * `<Menu>` met alleen Level 1 `<MenuLink>`-items. Als niet meegegeven valt de component
2630
- * terug op `primaryNavigation`.
2631
- */
2632
- primaryNavigationLarge?: React.ReactNode;
2633
- /**
2634
- * Servicemenu-inhoud in de Drawer (small viewport) — doorgaans een verticale `<Menu>`.
2635
- */
2636
- secondaryNavigation?: React.ReactNode;
2637
- /**
2638
- * Servicemenu-inhoud in de Masthead (large viewport) — doorgaans een horizontale `<Menu>`.
2639
- * Als niet meegegeven valt de component terug op `secondaryNavigation`.
2640
- */
2641
- secondaryNavigationLarge?: React.ReactNode;
2642
- /**
2643
- * Inline zoekveld voor de Masthead op large viewport (SearchInput + zoekknop).
2644
- * Optioneel — toont geen zoekveld als weggelaten.
2645
- */
2646
- searchSlot?: React.ReactNode;
2647
- /**
2648
- * Visuele badge-indicator bij de menuknop (small viewport), doorgaans een `<DotBadge>`.
2649
- * Gebruik dit om ongelezen meldingen te signaleren. De badge is altijd `aria-hidden` —
2650
- * geef de toegankelijke tekst mee via `menuButtonBadgeLabel`.
2651
- */
2652
- menuButtonBadge?: React.ReactNode;
2653
- /**
2654
- * Toegankelijke tekst die wordt toegevoegd aan het label van de menuknop als er een badge
2655
- * aanwezig is, bijvoorbeeld `"2 nieuwe berichten"`. Wordt visueel verborgen getoond zodat
2656
- * screenreadergebruikers de melding horen: "Menu, 2 nieuwe berichten".
2657
- * Vereist als `menuButtonBadge` is meegegeven.
2658
- */
2659
- menuButtonBadgeLabel?: string;
2660
- /**
2661
- * Callback wanneer de navigatielade opent.
2662
- */
2663
- onMenuOpen?: () => void;
2664
- /**
2665
- * Callback wanneer de navigatielade sluit.
2666
- */
2667
- onMenuClose?: () => void;
2668
- /**
2669
- * Callback wanneer het zoekpaneel opent.
2670
- */
2671
- onSearchOpen?: () => void;
2672
- /**
2673
- * Callback wanneer het zoekpaneel sluit.
2674
- */
2675
- onSearchClose?: () => void;
2676
- /**
2677
- * Label van de menuknop en de Drawer-heading.
2678
- * @default 'Menu'
2679
- */
2680
- menuButtonLabel?: string;
2681
- /**
2682
- * Label van de zoekknop wanneer het zoekpaneel gesloten is.
2683
- * @default 'Zoeken'
2684
- */
2685
- searchButtonLabel?: string;
2686
- /**
2687
- * Label van de zoekknop wanneer het zoekpaneel open is.
2688
- * @default 'Sluiten'
2689
- */
2690
- closeButtonLabel?: string;
2691
- /**
2692
- * Placeholder van het zoekveld in het zoekpaneel (small viewport en compact layout).
2693
- * @default 'Zoeken…'
2694
- */
2695
- searchInputPlaceholder?: string;
2696
- /**
2697
- * `aria-label` van het zoekveld in het zoekpaneel.
2698
- * @default 'Zoekopdracht'
2699
- */
2700
- searchInputAriaLabel?: string;
2701
- /**
2702
- * Label van de zoek-submitknop in het zoekpaneel.
2703
- * @default 'Zoeken'
2704
- */
2705
- searchSubmitLabel?: string;
2706
- /**
2707
- * `aria-label` van de primaire navigatie-`<nav>` (large viewport) en
2708
- * visueel verborgen heading in de Drawer.
2709
- * @default 'Hoofd-navigatie'
2710
- */
2711
- primaryNavAriaLabel?: string;
2712
- /**
2713
- * `aria-label` van het servicemenu-`<nav>` (large viewport) en
2714
- * visueel verborgen heading in de Drawer.
2715
- * @default 'Service-navigatie'
2716
- */
2717
- secondaryNavAriaLabel?: string;
2718
- /**
2719
- * Verbergt de menuknop in de small viewport layout.
2720
- * Gebruik dit wanneer er geen navigatie aanwezig is (bijv. formulierpagina's).
2721
- * @default false
2722
- */
2723
- hideMenuButton?: boolean;
2724
- /**
2725
- * Verbergt de zoekknop in zowel de small viewport als compact layout.
2726
- * Gebruik dit wanneer zoeken niet relevant is (bijv. formulierpagina's).
2727
- * @default false
2728
- */
2729
- hideSearchButton?: boolean;
2730
- className?: string;
2731
- }
2732
- /**
2733
- * PageHeader component
2734
- * Primaire navigatieheader voor een pagina. Mobile-first implementatie.
2735
- *
2736
- * Op mobile toont de header drie elementen:
2737
- * - Menuknop (inline-start) — opent een `Drawer` met primaire en service-navigatie
2738
- * - Logo (gecentreerd, onafhankelijk van knopbreedte via CSS-grid 1fr auto 1fr)
2739
- * - Zoekknop (inline-end) — opent een zoekpaneel direct onder de header
2740
- *
2741
- * @example
2742
- * ```tsx
2743
- * <PageHeader
2744
- * logoSlot={
2745
- * <a href="/">
2746
- * <Logo aria-hidden={true} />
2747
- * <span className="dsn-visually-hidden">Starter Kit — terug naar homepage</span>
2748
- * </a>
2749
- * }
2750
- * primaryNavigation={
2751
- * <Menu orientation="vertical">
2752
- * <MenuLink href="/home" level={1}>Home</MenuLink>
2753
- * <MenuLink href="/over" level={1}>Over ons</MenuLink>
2754
- * </Menu>
2755
- * }
2756
- * secondaryNavigation={
2757
- * <Menu orientation="vertical">
2758
- * <MenuLink href="/contact" level={1}>Contact</MenuLink>
2759
- * </Menu>
2760
- * }
2761
- * />
2762
- * ```
2763
- */
2764
- declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
2765
- //#endregion
2766
- //#region src/PageLayout/PageLayout.d.ts
2767
- interface PageLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
2768
- /**
2769
- * Paginainhoud: doorgaans `PageHeader`, `PageBody` en `PageFooter`.
2770
- */
2771
- children: React.ReactNode;
2772
- /**
2773
- * Extra CSS-klassen
2774
- */
2775
- className?: string;
2776
- }
2777
- /**
2778
- * PageLayout component
2779
- * Structurele wrapper die `PageHeader`, `PageBody` en `PageFooter` verticaal
2780
- * stapelt via flexbox. Garandeert dat de pagina altijd de volledige viewport
2781
- * vult (`min-block-size: 100dvh`) en dat `PageFooter` altijd onderaan staat
2782
- * zodra `PageBody` `flex: 1` heeft.
2783
- *
2784
- * `PageLayout` is een neutrale `<div>` zonder semantische rol. De semantische
2785
- * landmarks komen van de children (`<header>`, `<main>`, `<footer>`).
2786
- *
2787
- * @example
2788
- * ```tsx
2789
- * <SkipLink href="#main-content" />
2790
- * <PageLayout>
2791
- * <PageHeader logoSlot={<Logo />} />
2792
- * <PageBody>
2793
- * <main id="main-content" tabIndex={-1}>
2794
- * <Container>...</Container>
2795
- * </main>
2796
- * </PageBody>
2797
- * <PageFooter slot1={<Logo />} />
2798
- * </PageLayout>
2799
- * ```
2800
- */
2801
- declare const PageLayout: React.ForwardRefExoticComponent<PageLayoutProps & React.RefAttributes<HTMLDivElement>>;
2802
- //#endregion
2803
- //#region src/TableOfContents/TableOfContents.d.ts
2804
- type TableOfContentsAppearance = 'framed' | 'plain';
2805
- interface TableOfContentsItem {
2806
- /**
2807
- * Anchor target — moet overeenkomen met het `id` van de bijbehorende H2 op de pagina
2808
- */
2809
- id: string;
2810
- /**
2811
- * Zichtbare linktekst
2812
- */
2813
- label: string;
2814
- }
2815
- interface TableOfContentsProps extends React.HTMLAttributes<HTMLElement> {
2816
- /**
2817
- * Zichtbare heading-tekst
2818
- * @default 'Op deze pagina'
2819
- */
2820
- heading?: string;
2821
- /**
2822
- * Semantisch heading-niveau
2823
- * @default 2
2824
- */
2825
- headingLevel?: HeadingLevel;
2826
- /**
2827
- * Visuele weergave:
2828
- * - `'framed'` — accent-1 achtergrond + linkerborder, heading als heading-3 (voor gebruik inline in de content-flow)
2829
- * - `'plain'` — geen kader, heading als heading-5 (voor gebruik in een losstaande kolom)
2830
- * @default 'framed'
2831
- */
2832
- appearance?: TableOfContentsAppearance;
2833
- /**
2834
- * Secties waarnaar gelinkt wordt — alleen H2's horen hierin opgenomen te worden
2835
- */
2836
- items: TableOfContentsItem[];
2837
- /**
2838
- * Additional CSS class names
2839
- */
2840
- className?: string;
2841
- }
2842
- /**
2843
- * TableOfContents component
2844
- * Inhoudsopgave met ankerlinks naar de H2-secties op de huidige pagina.
2845
- *
2846
- * @example
2847
- * ```tsx
2848
- * // Framed (default) — inline in de content-flow
2849
- * <TableOfContents
2850
- * items={[
2851
- * { id: 'sectie-1', label: 'Sectie 1' },
2852
- * { id: 'sectie-2', label: 'Sectie 2' },
2853
- * ]}
2854
- * />
2855
- *
2856
- * // Plain — in een losstaande kolom naast de hoofdinhoud
2857
- * <TableOfContents appearance="plain" items={items} />
2858
- * ```
2859
- */
2860
- declare const TableOfContents: React.ForwardRefExoticComponent<TableOfContentsProps & React.RefAttributes<HTMLElement>>;
2861
- //#endregion
2862
- //#region src/FormFieldStatus/FormFieldStatus.d.ts
2863
- type FormFieldStatusVariant = 'default' | 'positive' | 'warning';
2864
- interface FormFieldStatusProps extends React.HTMLAttributes<HTMLParagraphElement> {
2865
- /**
2866
- * Additional CSS class names
2867
- */
2868
- className?: string;
2869
- /**
2870
- * Status variant
2871
- * @default 'default'
2872
- */
2873
- variant?: FormFieldStatusVariant;
2874
- /**
2875
- * Whether to show the icon (only for positive and warning variants)
2876
- * @default true
2877
- */
2878
- showIcon?: boolean;
2879
- /**
2880
- * Whether to announce changes to this status via an aria-live region.
2881
- * Enable this only for status text that changes during interaction, such as
2882
- * a character counter. A status that never changes should not be a live
2883
- * region: it would be announced twice.
2884
- * @default false
2885
- */
2886
- live?: boolean;
2887
- /**
2888
- * Status content
2889
- */
2890
- children?: React.ReactNode;
2891
- }
2892
- /**
2893
- * Form Field Status component
2894
- * Status message displayed below the form control
2895
- * Supports three variants: default (subtle info), positive (success), warning (caution)
2896
- *
2897
- * @example
2898
- * ```tsx
2899
- * // Default - Character counter (no icon)
2900
- * <FormFieldStatus>45 van 100 karakters</FormFieldStatus>
2901
- *
2902
- * // Positive - Success feedback (with check icon)
2903
- * <FormFieldStatus variant="positive">Wachtwoord is sterk genoeg</FormFieldStatus>
2904
- *
2905
- * // Warning - Caution (with alert-triangle icon)
2906
- * <FormFieldStatus variant="warning">Wachtwoord is zwak</FormFieldStatus>
2907
- *
2908
- * // Without icon (for positive/warning)
2909
- * <FormFieldStatus variant="positive" showIcon={false}>
2910
- * Gebruikersnaam beschikbaar
2911
- * </FormFieldStatus>
2912
- *
2913
- * // With ID for aria-describedby
2914
- * <FormFieldStatus id="bio-status">
2915
- * 280 van 500 karakters gebruikt
2916
- * </FormFieldStatus>
2917
- * ```
2918
- */
2919
- declare const FormFieldStatus: React.ForwardRefExoticComponent<FormFieldStatusProps & React.RefAttributes<HTMLParagraphElement>>;
2920
- //#endregion
2921
- //#region src/FormField/FormField.d.ts
2922
- interface FormFieldProps {
2923
- /**
2924
- * The label text for the form field
2925
- */
2926
- label: string;
2927
- /**
2928
- * The ID of the form control. Used for the label's htmlFor and as the base
2929
- * for the generated description/error/status IDs. When omitted, the IDs are
2930
- * generated via useId(), but the label is no longer explicitly linked.
2931
- */
2932
- htmlFor?: string;
2933
- /**
2934
- * Optional suffix for the label (e.g., "(niet verplicht)" or "(verplicht)")
2935
- */
2936
- labelSuffix?: string;
2937
- /**
2938
- * Optional description text
2939
- */
2940
- description?: React.ReactNode;
2941
- /**
2942
- * Optional error message (shows when field is invalid)
2943
- */
2944
- error?: React.ReactNode;
2945
- /**
2946
- * Optional status message
2947
- */
2948
- status?: React.ReactNode;
2949
- /**
2950
- * Status variant (for status message styling)
2951
- * @default 'default'
2952
- */
2953
- statusVariant?: FormFieldStatusVariant;
2954
- /**
2955
- * Announce status changes to screen readers via an aria-live region.
2956
- * Only enable this for status text that changes during interaction,
2957
- * such as a character counter.
2958
- * @default false
2959
- */
2960
- statusLive?: boolean;
2961
- /**
2962
- * Additional CSS class names
2963
- */
2964
- className?: string;
2965
- /**
2966
- * The form control element (input, textarea, CheckboxGroup, RadioGroup, etc.)
2967
- */
2968
- children: React.ReactNode;
2969
- }
2970
- /**
2971
- * Form Field component
2972
- * Container that combines FormFieldLabel, FormFieldDescription, Control, FormFieldErrorMessage, and FormFieldStatus
2973
- * Uses div/label structure (for fieldset/legend use FormFieldset component)
2974
- *
2975
- * Description, error and status are linked to the control via aria-describedby.
2976
- * FormField clones the child element to add the attribute, so the child must be
2977
- * a single element that forwards props to its DOM node. An aria-describedby the
2978
- * consumer already set on the control is preserved.
2979
- *
2980
- * @example
2981
- * ```tsx
2982
- * // Text input field
2983
- * <FormField label="E-mailadres" htmlFor="email" description="We sturen hier geen spam naartoe">
2984
- * <TextInput id="email" type="email" />
2985
- * </FormField>
2986
- *
2987
- * // With error
2988
- * <FormField
2989
- * label="Wachtwoord"
2990
- * htmlFor="password"
2991
- * error="Wachtwoord moet minimaal 8 tekens bevatten"
2992
- * >
2993
- * <PasswordInput id="password" invalid />
2994
- * </FormField>
2995
- *
2996
- * // With status (character counter): statusLive announces each change
2997
- * <FormField
2998
- * label="Bio"
2999
- * htmlFor="bio"
3000
- * status="280 van 500 karakters gebruikt"
3001
- * statusLive
3002
- * >
3003
- * <TextArea id="bio" rows={4} />
3004
- * </FormField>
3005
- *
3006
- * // With positive status
3007
- * <FormField
3008
- * label="Wachtwoord"
3009
- * htmlFor="password"
3010
- * status="Wachtwoord is sterk genoeg"
3011
- * statusVariant="positive"
3012
- * >
3013
- * <PasswordInput id="password" />
3014
- * </FormField>
3015
- * ```
3016
- */
3017
- declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
3018
- //#endregion
3019
- //#region src/FormFieldLabel/FormFieldLabel.d.ts
3020
- interface FormFieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
3021
- /**
3022
- * Optional suffix text displayed after the label (e.g., "(niet verplicht)")
3023
- */
3024
- suffix?: string;
3025
- /**
3026
- * Additional CSS class names
3027
- */
3028
- className?: string;
3029
- /**
3030
- * Label content
3031
- */
3032
- children?: React.ReactNode;
3033
- }
3034
- /**
3035
- * Form Field Label component
3036
- * Label for form controls with optional suffix for "(niet verplicht)" or "(verplicht)"
3037
- *
3038
- * @example
3039
- * ```tsx
3040
- * // Basic usage
3041
- * <FormFieldLabel htmlFor="firstname">Voornaam</FormFieldLabel>
3042
- *
3043
- * // With suffix for optional fields
3044
- * <FormFieldLabel htmlFor="middlename" suffix="(niet verplicht)">
3045
- * Tussenvoegsel
3046
- * </FormFieldLabel>
3047
- *
3048
- * // With suffix for required fields (when most fields are optional)
3049
- * <FormFieldLabel htmlFor="email" suffix="(verplicht)">
3050
- * E-mailadres
3051
- * </FormFieldLabel>
3052
- * ```
3053
- */
3054
- declare const FormFieldLabel: React.ForwardRefExoticComponent<FormFieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
3055
- //#endregion
3056
- //#region src/FormFieldDescription/FormFieldDescription.d.ts
3057
- interface FormFieldDescriptionProps extends React.HTMLAttributes<HTMLElement> {
3058
- /**
3059
- * HTML element to render: use 'div' when the description contains block-level
3060
- * content, which a `<p>` cannot hold. Note that block-level content in a
3061
- * description is discouraged, see the component docs.
3062
- * @default 'p'
3063
- */
3064
- as?: 'p' | 'div';
3065
- /**
3066
- * Additional CSS class names
3067
- */
3068
- className?: string;
3069
- /**
3070
- * Description content
3071
- */
3072
- children?: React.ReactNode;
3073
- }
3074
- /**
3075
- * Form Field Description component
3076
- * Optional help text displayed below the label and above the form control.
3077
- *
3078
- * Use text only. The content of an `aria-describedby` reference is flattened into a
3079
- * single string, so list structure and links lose their meaning. VoiceOver in Safari
3080
- * does not read a list inside a description at all, and a link inside a description
3081
- * cannot be reached or activated. To make several requirements scannable, put them on
3082
- * their own lines with a `<br>` and a space on both sides of it: the description then
3083
- * stays a single `<p>` holding only text. A real list belongs above the form field,
3084
- * outside the `aria-describedby` reference, where it keeps its list semantics.
3085
- *
3086
- * @example
3087
- * ```tsx
3088
- * // Basic usage
3089
- * <FormFieldDescription>
3090
- * Vul hier uw officiële voornaam in zoals deze op uw paspoort staat.
3091
- * </FormFieldDescription>
3092
- *
3093
- * // With ID for aria-describedby
3094
- * <FormFieldDescription id="email-description">
3095
- * We gebruiken uw e-mailadres alleen voor accountgerelateerde berichten.
3096
- * </FormFieldDescription>
3097
- *
3098
- * // Several requirements: one line each via <br>, never a list
3099
- * <FormFieldDescription id="upload-description">
3100
- * Het bestand mag maximaal 5 MB zijn. <br /> Toegestane bestandstypen: pdf en docx.
3101
- * </FormFieldDescription>
3102
- * ```
3103
- */
3104
- declare const FormFieldDescription: React.ForwardRefExoticComponent<FormFieldDescriptionProps & React.RefAttributes<HTMLElement>>;
3105
- //#endregion
3106
- //#region src/FormFieldErrorMessage/FormFieldErrorMessage.d.ts
3107
- interface FormFieldErrorMessageProps extends React.HTMLAttributes<HTMLParagraphElement> {
3108
- /**
3109
- * Whether to show the exclamation-circle icon before the message
3110
- * @default true
3111
- */
3112
- showIcon?: boolean;
3113
- /**
3114
- * Additional CSS class names
3115
- */
3116
- className?: string;
3117
- /**
3118
- * Error message content
3119
- */
3120
- children?: React.ReactNode;
3121
- }
3122
- /**
3123
- * Form Field Error Message component
3124
- * Error message displayed below the description and above the form control
3125
- * Shows exclamation-circle icon by default for visual emphasis
3126
- *
3127
- * @example
3128
- * ```tsx
3129
- * // Basic usage with icon (default)
3130
- * <FormFieldErrorMessage>Dit veld is verplicht.</FormFieldErrorMessage>
3131
- *
3132
- * // Without icon
3133
- * <FormFieldErrorMessage showIcon={false}>
3134
- * Ongeldige waarde opgegeven.
3135
- * </FormFieldErrorMessage>
3136
- *
3137
- * // With ID for aria-describedby
3138
- * <FormFieldErrorMessage id="email-error">
3139
- * Vul een geldig e-mailadres in.
3140
- * </FormFieldErrorMessage>
3141
- * ```
3142
- */
3143
- declare const FormFieldErrorMessage: React.ForwardRefExoticComponent<FormFieldErrorMessageProps & React.RefAttributes<HTMLParagraphElement>>;
3144
- //#endregion
3145
- //#region src/FormFieldset/FormFieldset.d.ts
3146
- interface FormFieldsetProps {
3147
- /**
3148
- * The legend text for the fieldset
3149
- */
3150
- legend: string;
3151
- /**
3152
- * Optional suffix for the legend (e.g., "(niet verplicht)" or "(verplicht)")
3153
- */
3154
- legendSuffix?: string;
3155
- /**
3156
- * Optional description text
3157
- */
3158
- description?: React.ReactNode;
3159
- /**
3160
- * Optional error message (shows when field is invalid)
3161
- */
3162
- error?: React.ReactNode;
3163
- /**
3164
- * Optional status message
3165
- */
3166
- status?: React.ReactNode;
3167
- /**
3168
- * Status variant (for status message styling)
3169
- * @default 'default'
3170
- */
3171
- statusVariant?: FormFieldStatusVariant;
3172
- /**
3173
- * Announce status changes to screen readers via an aria-live region.
3174
- * Only enable this for status text that changes during interaction.
3175
- * @default false
3176
- */
3177
- statusLive?: boolean;
3178
- /**
3179
- * Optional ID for the fieldset. Used as the base for the generated
3180
- * description/error/status IDs. Generated via useId() when omitted.
3181
- */
3182
- id?: string;
3183
- /**
3184
- * Additional CSS class names
3185
- */
3186
- className?: string;
3187
- /**
3188
- * The form control element (CheckboxGroup, RadioGroup, DateInputGroup, etc.)
3189
- */
3190
- children: React.ReactNode;
3191
- }
3192
- /**
3193
- * Form Fieldset component
3194
- * Container that combines FormFieldLegend, FormFieldDescription, Control, FormFieldErrorMessage, and FormFieldStatus
3195
- * Uses fieldset/legend structure for group controls (CheckboxGroup, RadioGroup, DateInputGroup)
3196
- *
3197
- * Description, error and status are linked via aria-describedby on the fieldset
3198
- * itself: a group has no single control to hang the association on.
3199
- *
3200
- * @example
3201
- * ```tsx
3202
- * // Checkbox group
3203
- * <FormFieldset legend="Interesses" description="Selecteer minimaal één interesse">
3204
- * <CheckboxGroup>
3205
- * <CheckboxOption label="Sport" value="sport" />
3206
- * <CheckboxOption label="Muziek" value="music" />
3207
- * <CheckboxOption label="Reizen" value="travel" />
3208
- * </CheckboxGroup>
3209
- * </FormFieldset>
3210
- *
3211
- * // Radio group with error
3212
- * <FormFieldset
3213
- * legend="Geslacht"
3214
- * legendSuffix="(verplicht)"
3215
- * error="Selecteer een optie"
3216
- * >
3217
- * <RadioGroup>
3218
- * <RadioOption name="gender" label="Man" value="male" />
3219
- * <RadioOption name="gender" label="Vrouw" value="female" />
3220
- * <RadioOption name="gender" label="Anders" value="other" />
3221
- * </RadioGroup>
3222
- * </FormFieldset>
3223
- *
3224
- * // With status
3225
- * <FormFieldset
3226
- * legend="Voorkeuren"
3227
- * status="Minimaal 2 opties vereist"
3228
- * statusVariant="warning"
3229
- * >
3230
- * <CheckboxGroup>
3231
- * <CheckboxOption label="E-mail" value="email" />
3232
- * <CheckboxOption label="SMS" value="sms" />
3233
- * <CheckboxOption label="Push" value="push" />
3234
- * </CheckboxGroup>
3235
- * </FormFieldset>
3236
- * ```
3237
- */
3238
- declare const FormFieldset: React.ForwardRefExoticComponent<FormFieldsetProps & React.RefAttributes<HTMLFieldSetElement>>;
3239
- //#endregion
3240
- //#region src/FormFieldLegend/FormFieldLegend.d.ts
3241
- interface FormFieldLegendProps extends React.HTMLAttributes<HTMLLegendElement> {
3242
- /**
3243
- * Optional suffix text displayed after the legend (e.g., "(niet verplicht)")
3244
- */
3245
- suffix?: string;
3246
- /**
3247
- * Additional CSS class names
3248
- */
3249
- className?: string;
3250
- /**
3251
- * Legend content
3252
- */
3253
- children?: React.ReactNode;
3254
- }
3255
- /**
3256
- * Form Field Legend component
3257
- * Legend for fieldsets with optional suffix for "(niet verplicht)" or "(verplicht)"
3258
- * Uses the same CSS classes as FormFieldLabel for consistent styling
3259
- *
3260
- * @example
3261
- * ```tsx
3262
- * // Basic usage
3263
- * <FormFieldLegend>Interesses</FormFieldLegend>
3264
- *
3265
- * // With suffix for optional fields
3266
- * <FormFieldLegend suffix="(niet verplicht)">
3267
- * Hobby's
3268
- * </FormFieldLegend>
3269
- *
3270
- * // With suffix for required fields
3271
- * <FormFieldLegend suffix="(verplicht)">
3272
- * Geslacht
3273
- * </FormFieldLegend>
3274
- * ```
3275
- */
3276
- declare const FormFieldLegend: React.ForwardRefExoticComponent<FormFieldLegendProps & React.RefAttributes<HTMLLegendElement>>;
3277
- //#endregion
3278
- //#region src/Image/Image.d.ts
3279
- interface ImageProps extends React.HTMLAttributes<HTMLElement> {
3280
- /** Verplicht. URL van de afbeelding */
3281
- src: string;
3282
- /** Verplicht. Alternatieve tekst. Lege string (`""`) voor decoratieve afbeeldingen — activeert automatisch `aria-hidden="true"` op de figure */
3283
- alt: string;
3284
- /** Verplicht. Intrinsieke breedte in pixels (voorkomt CLS) */
3285
- width: number;
3286
- /** Verplicht. Intrinsieke hoogte in pixels (voorkomt CLS) */
3287
- height: number;
3288
- /** Forceert beeldverhouding via CSS `aspect-ratio` + `object-fit: cover` */
3289
- ratio?: '16:9' | '4:3' | '1:1';
3290
- /** Hoe de afbeelding het ratio-kader vult. @default 'cover' */
3291
- objectFit?: 'cover' | 'contain';
3292
- /**
3293
- * LCP-modus: `loading="eager"` + `fetchpriority="high"`.
3294
- * Gebruik maximaal één keer per pagina voor de primaire LCP-afbeelding.
3295
- * @default false
3296
- */
3297
- priority?: boolean;
3298
- /** Optioneel bijschrift, rendert als `<figcaption>` */
3299
- caption?: React.ReactNode;
3300
- /** Pass-through naar native `srcset` attribuut */
3301
- srcSet?: string;
3302
- /** Pass-through naar native `sizes` attribuut */
3303
- sizes?: string;
3304
- }
3305
- /**
3306
- * Image component
3307
- * Performante, toegankelijke wrapper rond het native `<img>` element.
3308
- * Biedt ingebakken lazy loading, expliciete ondersteuning voor LCP/hero-afbeeldingen
3309
- * via een `priority` prop, en vaste beeldverhoudingen via de CSS `aspect-ratio` property.
3310
- *
3311
- * @example
3312
- * ```tsx
3313
- * // Basis
3314
- * <Image src="/foto.jpg" alt="Beschrijving" width={800} height={600} />
3315
- *
3316
- * // Met vaste beeldverhouding
3317
- * <Image src="/hero.jpg" alt="Hero" width={1600} height={900} ratio="16:9" />
3318
- *
3319
- * // LCP / hero-afbeelding — max. één keer per pagina
3320
- * <Image src="/hero.jpg" alt="Pagina hero" width={1600} height={900} ratio="16:9" priority />
3321
- *
3322
- * // Met bijschrift
3323
- * <Image src="/foto.jpg" alt="Beschrijving" width={800} height={600} caption="Bijschrift" />
3324
- *
3325
- * // Decoratief — alt="" activeert automatisch aria-hidden="true" op de figure
3326
- * <Image src="/decoratief.jpg" alt="" width={800} height={600} />
3327
- * ```
3328
- */
3329
- declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLElement>>;
3330
- //#endregion
3331
- //#region src/Card/Card.d.ts
3332
- interface CardProps extends React.HTMLAttributes<HTMLElement> {
3333
- /**
3334
- * URL voor de stretched link. De `CardHeading` ontvangt `href` automatisch
3335
- * via React context en wraps de heading-tekst in een `<a>`.
3336
- */
3337
- href?: string;
3338
- /** Sub-componenten: `CardHeader`, `CardBody`, `CardFooter` */
3339
- children?: React.ReactNode;
3340
- className?: string;
3341
- }
3342
- /**
3343
- * Card component
3344
- * Configureerbare container voor gestructureerde content met header, body en footer.
3345
- * Gebruikt een stretched-link techniek: de link in `CardHeading` dekt de volledige card.
3346
- * Screenreaders lezen alleen de heading-tekst als linknaam.
3347
- *
3348
- * @example
3349
- * ```tsx
3350
- * <Card href="/artikel/slug">
3351
- * <CardHeader>
3352
- * <Image src="/foto.jpg" alt="" width={800} height={450} ratio="16:9" />
3353
- * </CardHeader>
3354
- * <CardBody>
3355
- * <CardHeading level={2}>Artikeltitel</CardHeading>
3356
- * <Paragraph>Korte beschrijving.</Paragraph>
3357
- * </CardBody>
3358
- * <CardFooter>
3359
- * <Link href="/artikel/slug" aria-hidden tabIndex={-1}>Lees meer</Link>
3360
- * </CardFooter>
3361
- * </Card>
3362
- * ```
3363
- */
3364
- declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLElement>>;
3365
- interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
3366
- /**
3367
- * Afbeelding (`Image` component). Zonder children → toont placeholder
3368
- * met `aspect-ratio: 16 / 9` voor visuele consistentie in groep.
3369
- */
3370
- children?: React.ReactNode;
3371
- className?: string;
3372
- }
3373
- /**
3374
- * CardHeader sub-component
3375
- * Zonder children → toont automatisch een afbeeldingsplaceholder.
3376
- */
3377
- declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
3378
- interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
3379
- /** `CardHeading`, optionele extra content (bijv. `StatusBadge`), `Paragraph` */
3380
- children?: React.ReactNode;
3381
- className?: string;
3382
- }
3383
- /**
3384
- * CardBody sub-component
3385
- * Groeit via `flex: 1` zodat de footer altijd onderaan uitlijnt.
3386
- */
3387
- declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
3388
- interface CardHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
3389
- /**
3390
- * Semantisch heading-niveau. Visuele appearance is altijd "card-heading".
3391
- * @default 2
3392
- */
3393
- level?: 2 | 3 | 4;
3394
- /** Heading-tekst */
3395
- children?: React.ReactNode;
3396
- className?: string;
3397
- }
3398
- /**
3399
- * CardHeading sub-component
3400
- * Ontvangt `href` automatisch via React context van de parent `Card`.
3401
- * Wanneer `href` beschikbaar is, wraps de heading-tekst in een `<a class="dsn-card-heading__link">`.
3402
- * Het `::before` pseudo-element dekt de volledige card (stretched link).
3403
- */
3404
- declare const CardHeading: React.ForwardRefExoticComponent<CardHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
3405
- interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
3406
- /** `Link` of `ButtonLink` — staat boven de stretched link via CSS z-index */
3407
- children?: React.ReactNode;
3408
- className?: string;
3409
- }
3410
- /**
3411
- * CardFooter sub-component
3412
- * Directe kinderen staan boven de stretched link via `z-index: 2` in CSS.
3413
- * Gebruik `aria-hidden` + `tabIndex={-1}` op de link wanneer deze dezelfde
3414
- * bestemming heeft als de card — vermijdt een dubbele tabstop.
3415
- */
3416
- declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
3417
- interface CardGroupProps extends React.HTMLAttributes<HTMLElement> {
3418
- /**
3419
- * Semantisch container-element.
3420
- * Gebruik `div` wanneer cards geen lijst-context hebben.
3421
- * @default 'ul'
3422
- */
3423
- as?: 'ul' | 'div';
3424
- /** `Card` componenten */
3425
- children?: React.ReactNode;
3426
- className?: string;
3427
- }
3428
- /**
3429
- * CardGroup sub-component
3430
- * Flexbox wrapper die gelijke hoogte garandeert en de footer in elke card onderaan uitlijnt.
3431
- * Rendert `role="list"` wanneer `as="ul"` — nodig omdat CSS-resets de lijstsemantiek verwijderen.
3432
- */
3433
- declare const CardGroup: React.ForwardRefExoticComponent<CardGroupProps & React.RefAttributes<HTMLElement>>;
3434
- //#endregion
3435
- //#region src/ModalDialog/ModalDialog.d.ts
3436
- interface ModalDialogProps extends Omit<React.HTMLAttributes<HTMLDialogElement>, 'children'> {
3437
- /**
3438
- * Bepaalt of het dialoogvenster getoond wordt.
3439
- * Het dialoogvenster wordt via `.showModal()` geopend — nooit via `.show()`.
3440
- */
3441
- isOpen: boolean;
3442
- /**
3443
- * Callback die wordt aangeroepen wanneer het dialoogvenster sluit
3444
- * (sluitknop, Escape-toets of klik buiten het venster).
3445
- */
3446
- onClose?: () => void;
3447
- /**
3448
- * De subcomponenten van het dialoogvenster:
3449
- * `ModalDialogHeader`, `ModalDialogBody`, `ModalDialogFooter`
3450
- */
3451
- children?: React.ReactNode;
3452
- }
3453
- /**
3454
- * ModalDialog component
3455
- * Modaal dialoogvenster gebaseerd op het native `<dialog>` element.
3456
- *
3457
- * Gebruik altijd `.showModal()` (intern afgehandeld via `isOpen` prop) — nooit `.show()`.
3458
- * Dit garandeert natieve focus-trap, aria-modal semantiek en inert-attribuut op de achtergrond.
3459
- *
3460
- * @example
3461
- * ```tsx
3462
- * <ModalDialog isOpen={isOpen} onClose={() => setIsOpen(false)}>
3463
- * <ModalDialogHeader>
3464
- * <ModalDialogHeading>Bevestig verwijderen</ModalDialogHeading>
3465
- * </ModalDialogHeader>
3466
- * <ModalDialogBody>
3467
- * <Paragraph>Weet u zeker dat u dit item wilt verwijderen?</Paragraph>
3468
- * </ModalDialogBody>
3469
- * <ModalDialogFooter>
3470
- * <ActionGroup>
3471
- * <Button variant="negative" onClick={() => setIsOpen(false)}>Verwijderen</Button>
3472
- * <Button variant="default" onClick={() => setIsOpen(false)}>Annuleren</Button>
3473
- * </ActionGroup>
3474
- * </ModalDialogFooter>
3475
- * </ModalDialog>
3476
- * ```
3477
- */
3478
- declare const ModalDialog: React.ForwardRefExoticComponent<ModalDialogProps & React.RefAttributes<HTMLDialogElement>>;
3479
- interface ModalDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
3480
- /**
3481
- * Inhoud van de header — doorgaans een `ModalDialogHeading`
3482
- */
3483
- children?: React.ReactNode;
3484
- }
3485
- /**
3486
- * ModalDialogHeader
3487
- * De headerstrook van het dialoogvenster met heading en sluitknop.
3488
- */
3489
- declare const ModalDialogHeader: React.ForwardRefExoticComponent<ModalDialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
3490
- interface ModalDialogHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
3491
- /**
3492
- * Semantisch heading-niveau. Kies op basis van documenthiërarchie, niet visuele grootte.
3493
- * @default 2
3494
- */
3495
- level?: 1 | 2 | 3 | 4 | 5 | 6;
3496
- /**
3497
- * De zichtbare heading-tekst
3498
- */
3499
- children?: React.ReactNode;
3500
- }
3501
- /**
3502
- * ModalDialogHeading
3503
- * De heading van het dialoogvenster. ID wordt automatisch gegenereerd voor aria-labelledby.
3504
- */
3505
- declare const ModalDialogHeading: React.ForwardRefExoticComponent<ModalDialogHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
3506
- interface ModalDialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {
3507
- /**
3508
- * De hoofdinhoud van het dialoogvenster
3509
- */
3510
- children?: React.ReactNode;
3511
- }
3512
- /**
3513
- * ModalDialogBody
3514
- * De scrollbare inhoudssectie van het dialoogvenster met scroll-affordance schaduw.
3515
- */
3516
- declare const ModalDialogBody: React.ForwardRefExoticComponent<ModalDialogBodyProps & React.RefAttributes<HTMLDivElement>>;
3517
- interface ModalDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
3518
- /**
3519
- * De acties van het dialoogvenster — doorgaans een `ActionGroup` met knoppen
3520
- */
3521
- children?: React.ReactNode;
3522
- }
3523
- /**
3524
- * ModalDialogFooter
3525
- * De voettekst van het dialoogvenster met actieknoppen.
3526
- */
3527
- declare const ModalDialogFooter: React.ForwardRefExoticComponent<ModalDialogFooterProps & React.RefAttributes<HTMLDivElement>>;
3528
- //#endregion
3529
- //#region src/Drawer/Drawer.d.ts
3530
- interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDialogElement>, 'children'> {
3531
- /**
3532
- * Bepaalt of het zijpaneel getoond wordt.
3533
- */
3534
- isOpen: boolean;
3535
- /**
3536
- * Callback die wordt aangeroepen wanneer het zijpaneel sluit
3537
- * (sluitknop, Escape-toets).
3538
- */
3539
- onClose?: () => void;
3540
- /**
3541
- * Modaal of non-modaal gedrag.
3542
- * - `true` (standaard): opent via `.showModal()` — achtergrond geblokkeerd,
3543
- * natieve focus-trap, Escape sluit via `cancel`-event.
3544
- * - `false`: opent via `.show()` — achtergrond blijft interactief,
3545
- * Escape sluit via `keydown`-listener.
3546
- * @default true
3547
- */
3548
- modal?: boolean;
3549
- /**
3550
- * De kant van de viewport vanwaar het zijpaneel inschuift.
3551
- * @default "right"
3552
- */
3553
- side?: 'right' | 'left';
3554
- /**
3555
- * De subcomponenten van het zijpaneel:
3556
- * `DrawerHeader`, `DrawerBody`, `DrawerFooter`
3557
- */
3558
- children?: React.ReactNode;
3559
- }
3560
- /**
3561
- * Drawer component
3562
- * Zijpaneel dat vanuit links of rechts de viewport inschuift.
3563
- *
3564
- * Gebruik `modal={true}` (standaard) voor gefocuste taken waarbij de achtergrond
3565
- * geblokkeerd moet worden. Gebruik `modal={false}` als de gebruiker de achtergrondpagina
3566
- * nodig heeft voor context.
3567
- *
3568
- * @example
3569
- * ```tsx
3570
- * <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
3571
- * <DrawerHeader>
3572
- * <DrawerHeading>Filteropties</DrawerHeading>
3573
- * </DrawerHeader>
3574
- * <DrawerBody>
3575
- * <Paragraph>Inhoud van het zijpaneel</Paragraph>
3576
- * </DrawerBody>
3577
- * <DrawerFooter>
3578
- * <ActionGroup>
3579
- * <Button variant="strong" onClick={() => setIsOpen(false)}>Toepassen</Button>
3580
- * <Button variant="default" onClick={() => setIsOpen(false)}>Annuleren</Button>
3581
- * </ActionGroup>
3582
- * </DrawerFooter>
3583
- * </Drawer>
3584
- * ```
3585
- */
3586
- declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDialogElement>>;
3587
- interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
3588
- /**
3589
- * Inhoud van de header — doorgaans een `DrawerHeading`
3590
- */
3591
- children?: React.ReactNode;
3592
- }
3593
- /**
3594
- * DrawerHeader
3595
- * De headerstrook van het zijpaneel met heading en sluitknop.
3596
- */
3597
- declare const DrawerHeader: React.ForwardRefExoticComponent<DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
3598
- interface DrawerHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
3599
- /**
3600
- * Semantisch heading-niveau. Kies op basis van documenthiërarchie, niet visuele grootte.
3601
- * @default 2
3602
- */
3603
- level?: 1 | 2 | 3 | 4 | 5 | 6;
3604
- /**
3605
- * De zichtbare heading-tekst
3606
- */
3607
- children?: React.ReactNode;
3608
- }
3609
- /**
3610
- * DrawerHeading
3611
- * De heading van het zijpaneel. ID wordt automatisch gegenereerd voor aria-labelledby.
3612
- */
3613
- declare const DrawerHeading: React.ForwardRefExoticComponent<DrawerHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
3614
- interface DrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {
3615
- /**
3616
- * De hoofdinhoud van het zijpaneel
3617
- */
3618
- children?: React.ReactNode;
3619
- }
3620
- /**
3621
- * DrawerBody
3622
- * De scrollbare inhoudssectie van het zijpaneel met scroll-affordance schaduw.
3623
- */
3624
- declare const DrawerBody: React.ForwardRefExoticComponent<DrawerBodyProps & React.RefAttributes<HTMLDivElement>>;
3625
- interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {
3626
- /**
3627
- * De acties van het zijpaneel — doorgaans een `ActionGroup` met knoppen
3628
- */
3629
- children?: React.ReactNode;
3630
- }
3631
- /**
3632
- * DrawerFooter
3633
- * De voettekst van het zijpaneel met actieknoppen.
3634
- */
3635
- declare const DrawerFooter: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
3636
- //#endregion
3637
- //#region src/Popover/Popover.d.ts
3638
- declare module 'react' {
3639
- interface HTMLAttributes<T> {
3640
- popover?: 'auto' | 'manual' | '' | undefined;
3641
- popoverTarget?: string | undefined;
3642
- popoverTargetAction?: 'hide' | 'show' | 'toggle' | undefined;
3643
- }
3644
- }
3645
- declare global {
3646
- interface HTMLElement {
3647
- showPopover(): void;
3648
- hidePopover(): void;
3649
- }
3650
- }
3651
- type Placement = 'top' | 'bottom' | 'start' | 'end';
3652
- interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
3653
- /**
3654
- * Bepaalt of de popover getoond wordt.
3655
- */
3656
- isOpen: boolean;
3657
- /**
3658
- * Callback bij sluiten (Escape, klik buiten, sluitknop in header).
3659
- */
3660
- onClose?: () => void;
3661
- /**
3662
- * Referentie naar het triggerelement voor positionering en focus-herstel.
3663
- */
3664
- triggerRef: React.RefObject<HTMLElement>;
3665
- /**
3666
- * Gewenste plaatsing relatief aan het triggerelement.
3667
- * @default 'bottom'
3668
- */
3669
- placement?: Placement;
3670
- /**
3671
- * Toegankelijke naam voor popovers zonder `PopoverHeader`/`PopoverHeading`.
3672
- * Gebruik `aria-labelledby` via context wanneer er wél een heading is.
3673
- */
3674
- label?: string;
3675
- /**
3676
- * Subcomponenten: `PopoverHeader`, `PopoverBody`, `PopoverFooter`
3677
- */
3678
- children?: React.ReactNode;
3679
- }
3680
- /**
3681
- * Popover component
3682
- * Lichtgewicht, contextgebonden overlay verankerd aan een triggerelement.
3683
- *
3684
- * Gebaseerd op de HTML Popover API (`popover="auto"`) voor ingebakken
3685
- * light-dismiss en top-layer gedrag. Positionering via JavaScript.
3686
- *
3687
- * @example
3688
- * ```tsx
3689
- * const triggerRef = useRef<HTMLButtonElement>(null);
3690
- * const [isOpen, setIsOpen] = useState(false);
3691
- *
3692
- * <Button ref={triggerRef} onClick={() => setIsOpen(true)}>Opties</Button>
3693
- * <Popover isOpen={isOpen} onClose={() => setIsOpen(false)} triggerRef={triggerRef} label="Opties">
3694
- * <PopoverBody>
3695
- * <Menu>...</Menu>
3696
- * </PopoverBody>
3697
- * </Popover>
3698
- * ```
3699
- */
3700
- declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
3701
- interface PopoverHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
3702
- /**
3703
- * Inhoud van de header — doorgaans een `PopoverHeading`.
3704
- * De sluitknop wordt automatisch geïnjecteerd.
3705
- */
3706
- children?: React.ReactNode;
3707
- }
3708
- /**
3709
- * PopoverHeader
3710
- * De headerstrook van de popover met heading en sluitknop.
3711
- */
3712
- declare const PopoverHeader: React.ForwardRefExoticComponent<PopoverHeaderProps & React.RefAttributes<HTMLDivElement>>;
3713
- interface PopoverHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
3714
- /**
3715
- * Semantisch heading-niveau. Kies op basis van documenthiërarchie.
3716
- * @default 2
3717
- */
3718
- level?: 1 | 2 | 3 | 4 | 5 | 6;
3719
- /**
3720
- * De zichtbare heading-tekst.
3721
- */
3722
- children?: React.ReactNode;
3723
- }
3724
- /**
3725
- * PopoverHeading
3726
- * De heading van de popover. ID wordt automatisch gegenereerd voor aria-labelledby.
3727
- */
3728
- declare const PopoverHeading: React.ForwardRefExoticComponent<PopoverHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
3729
- interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {
3730
- /**
3731
- * De hoofdinhoud van de popover — willekeurige slot-content.
3732
- */
3733
- children?: React.ReactNode;
3734
- }
3735
- /**
3736
- * PopoverBody
3737
- * De inhoudssectie van de popover.
3738
- */
3739
- declare const PopoverBody: React.ForwardRefExoticComponent<PopoverBodyProps & React.RefAttributes<HTMLDivElement>>;
3740
- interface PopoverFooterProps extends React.HTMLAttributes<HTMLDivElement> {
3741
- /**
3742
- * Actieknoppen of slotzin van de popover.
3743
- */
3744
- children?: React.ReactNode;
3745
- }
3746
- /**
3747
- * PopoverFooter
3748
- * De voettekst van de popover met actieknoppen.
3749
- */
3750
- declare const PopoverFooter: React.ForwardRefExoticComponent<PopoverFooterProps & React.RefAttributes<HTMLDivElement>>;
3751
- //#endregion
3752
- //#region src/File/File.d.ts
3753
- type FileStatus = 'default' | 'loading' | 'uploaded' | 'error';
3754
- type FileCtaVariant = 'view' | 'download';
3755
- type FileMediaType = 'document' | 'image';
3756
- interface FileProps extends React.HTMLAttributes<HTMLDivElement> {
3757
- /** Bestandsnaam inclusief extensie (vereist). Extensie wordt visueel afgekapt. */
3758
- fileName: string;
3759
- /** Bestandstype als afkorting: "PDF", "JPG". Getoond in dsn-file__meta. */
3760
- fileType?: string;
3761
- /** Bestandsgrootte als geformatteerde string: "1,2 MB". */
3762
- fileSize?: string;
3763
- /**
3764
- * State van het bestand.
3765
- * Bij 'uploaded' keert het component na 2 seconden automatisch terug naar 'default'.
3766
- * @default 'default'
3767
- */
3768
- status?: FileStatus;
3769
- /** Foutmelding, getoond bij status="error". */
3770
- errorMessage?: string;
3771
- /** URL naar het bestand. Maakt de naam een <a> en schakelt de interactieve variant in. */
3772
- href?: string;
3773
- /** Callback voor de verwijderactie. Toont de "Verwijder"-knop. */
3774
- onDelete?: () => void;
3775
- /**
3776
- * Zichtbare tekst op de verwijder-knop.
3777
- * @default "Verwijder"
3778
- */
3779
- deleteLabel?: string;
3780
- /**
3781
- * CTA-type in de interactieve variant.
3782
- * 'view' toont geen aparte CTA; de bestandsnaam opent als stretched link in een nieuw tabblad.
3783
- * 'download' toont een aparte download-knop; de bestandsnaam opent in een nieuw tabblad.
3784
- * @default 'view'
3785
- */
3786
- ctaVariant?: FileCtaVariant;
3787
- /**
3788
- * Overschrijft het standaard CTA-label voor de download-variant.
3789
- * Standaard: "Download".
3790
- */
3791
- ctaLabel?: string;
3792
- /**
3793
- * Bepaalt het icoon: file-description.svg of photo.svg.
3794
- * Genegeerd wanneer previewSrc aanwezig is.
3795
- * @default 'document'
3796
- */
3797
- mediaType?: FileMediaType;
3798
- /** URL van de afbeeldingspreview. Vervangt het icoon in het media-vlak. */
3799
- previewSrc?: string;
3800
- /**
3801
- * Visueel verborgen label voor de Spinner.
3802
- * @default "Bezig met uploaden"
3803
- */
3804
- loadingLabel?: string;
3805
- /**
3806
- * Tekst voor de aria-live regio bij de uploaded state.
3807
- * @default "{fileName} succesvol geüpload"
3808
- */
3809
- uploadedLabel?: string;
3810
- /**
3811
- * Tekst voor de aria-live regio bij de error state.
3812
- * Standaard "{fileName}: {errorMessage}", of "{fileName} uploaden mislukt"
3813
- * wanneer er geen errorMessage is.
3814
- */
3815
- errorLabel?: string;
3816
- }
3817
- /**
3818
- * File component
3819
- * Toont meta-informatie over een bestand (naam, type, grootte) samen met acties.
3820
- * Ondersteunt vier upload-states (default, loading, uploaded, error) en een
3821
- * interactieve variant voor controle- of detailpagina's.
3822
- *
3823
- * @example
3824
- * ```tsx
3825
- * // Default — eerder geüpload bestand, met verwijder-optie
3826
- * <File
3827
- * fileName="document.pdf"
3828
- * fileType="PDF"
3829
- * fileSize="1,2 MB"
3830
- * href="/bestanden/document.pdf"
3831
- * onDelete={() => handleDelete()}
3832
- * />
3833
- *
3834
- * // Interactief — bestandsnaam als link (nieuw tabblad)
3835
- * <File
3836
- * fileName="rapport-2024.pdf"
3837
- * fileType="PDF"
3838
- * fileSize="2,1 MB"
3839
- * href="/bestanden/rapport-2024.pdf"
3840
- * />
3841
- *
3842
- * // Interactief — download CTA
3843
- * <File
3844
- * fileName="rapport-2024.pdf"
3845
- * fileType="PDF"
3846
- * fileSize="2,1 MB"
3847
- * href="/bestanden/rapport-2024.pdf"
3848
- * ctaVariant="download"
3849
- * />
3850
- * ```
3851
- */
3852
- declare const File: React.ForwardRefExoticComponent<FileProps & React.RefAttributes<HTMLDivElement>>;
3853
- interface FileListProps extends React.HTMLAttributes<HTMLUListElement> {
3854
- /** File componenten */
3855
- children?: React.ReactNode;
3856
- className?: string;
3857
- }
3858
- /**
3859
- * FileList component
3860
- * Wrapper voor meerdere File componenten.
3861
- * Rendert een <ul role="list"> met <li> wrappers — nodig omdat CSS-resets lijstsemantiek verwijderen.
3862
- *
3863
- * @example
3864
- * ```tsx
3865
- * <FileList>
3866
- * <File fileName="document.pdf" fileType="PDF" fileSize="1,2 MB" href="..." onDelete={() => {}} />
3867
- * <File fileName="foto.jpg" fileType="JPG" fileSize="3,4 MB" href="..." onDelete={() => {}} />
3868
- * </FileList>
3869
- * ```
3870
- */
3871
- declare const FileList: React.ForwardRefExoticComponent<FileListProps & React.RefAttributes<HTMLUListElement>>;
3872
- //#endregion
3873
- export { ActionGroup, type ActionGroupProps, Alert, type AlertProps, type AlertVariant, Backdrop, type BackdropProps, Body, type BodyProps, BreadcrumbNavigation, BreadcrumbNavigationItem, BreadcrumbNavigationItemProps, BreadcrumbNavigationProps, BreakoutSection, type BreakoutSectionAs, type BreakoutSectionProps, Button, ButtonLink, type ButtonLinkProps, type ButtonLinkSize, type ButtonLinkVariant, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardGroup, type CardGroupProps, CardHeader, type CardHeaderProps, CardHeading, type CardHeadingProps, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, CheckboxOption, type CheckboxOptionProps, type CheckboxProps, Container, type ContainerAs, type ContainerProps, DateInput, DateInputGroup, type DateInputGroupProps, type DateInputGroupValue, type DateInputProps, Details, type DetailsProps, DotBadge, DotBadgeProps, DotBadgeVariant, Drawer, DrawerBody, type DrawerBodyProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerHeading, type DrawerHeadingProps, type DrawerProps, EmailInput, type EmailInputProps, File, type FileCtaVariant, FileInput, type FileInputProps, FileList, type FileListProps, type FileMediaType, type FileProps, type FileStatus, FormField, FormFieldDescription, type FormFieldDescriptionProps, FormFieldErrorMessage, type FormFieldErrorMessageProps, FormFieldLabel, type FormFieldLabelProps, FormFieldLegend, FormFieldLegendProps, type FormFieldProps, FormFieldStatus, type FormFieldStatusProps, type FormFieldStatusVariant, FormFieldset, FormFieldsetProps, Grid, type GridColSpan, GridItem, type GridItemProps, type GridProps, Heading, type HeadingAppearance, HeadingGroup, type HeadingGroupProps, type HeadingLevel, type HeadingProps, Hero, type HeroAlign, type HeroProps, type HeroVariant, Icon, IconList, IconListItem, type IconListItemProps, type IconListProps, type IconName, type IconProps, type IconSize, Image, type ImageProps, Link, LinkButton, type LinkButtonProps, type LinkButtonSize, type LinkProps, type LinkSize, Logo, LogoProps, Menu, MenuButton, MenuButtonProps, MenuLink, MenuLinkLevel, MenuLinkProps, MenuOrientation, MenuProps, ModalDialog, ModalDialogBody, type ModalDialogBodyProps, ModalDialogFooter, type ModalDialogFooterProps, ModalDialogHeader, type ModalDialogHeaderProps, ModalDialogHeading, type ModalDialogHeadingProps, type ModalDialogProps, Note, type NoteAs, type NoteProps, type NoteVariant, NumberBadge, NumberBadgeProps, NumberBadgeVariant, NumberInput, type NumberInputProps, OptionLabel, type OptionLabelProps, OrderedList, type OrderedListProps, PageBody, PageBodyProps, PageFooter, PageFooterColorScheme, PageFooterProps, PageHeader, PageHeaderColorScheme, PageHeaderLayout, PageHeaderProps, PageHeaderSticky, PageLayout, PageLayoutProps, Paragraph, type ParagraphProps, type ParagraphVariant, type PasswordAutocomplete, PasswordInput, type PasswordInputProps, Popover, PopoverBody, type PopoverBodyProps, PopoverFooter, type PopoverFooterProps, PopoverHeader, type PopoverHeaderProps, PopoverHeading, type PopoverHeadingProps, type PopoverProps, PreHeading, type PreHeadingProps, ProgressBar, ProgressBarProps, Radio, RadioGroup, type RadioGroupProps, RadioOption, type RadioOptionProps, type RadioProps, SearchInput, type SearchInputProps, Select, type SelectProps, SkipLink, SkipLinkProps, Spinner, SpinnerProps, SpinnerSize, Stack, type StackProps, type StackSpace, StatusBadge, StatusBadgeProps, StatusBadgeVariant, SummaryList, SummaryListActions, type SummaryListActionsProps, SummaryListKey, type SummaryListKeyProps, type SummaryListProps, SummaryListRow, type SummaryListRowProps, SummaryListValue, type SummaryListValueProps, Table, TableOfContents, type TableOfContentsAppearance, type TableOfContentsItem, type TableOfContentsProps, type TableProps, TelephoneInput, type TelephoneInputProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TimeInput, type TimeInputProps, UnorderedList, type UnorderedListProps, iconMap };
3874
- //# sourceMappingURL=index.d.mts.map
1
+ import { ActionGroup, ActionGroupProps } from "./ActionGroup/ActionGroup.mjs";
2
+ import "./ActionGroup/index.mjs";
3
+ import { Body, BodyProps } from "./Body/Body.mjs";
4
+ import "./Body/index.mjs";
5
+ import { BreakoutSection, BreakoutSectionAs, BreakoutSectionProps } from "./BreakoutSection/BreakoutSection.mjs";
6
+ import "./BreakoutSection/index.mjs";
7
+ import { Container, ContainerAs, ContainerProps } from "./Container/Container.mjs";
8
+ import "./Container/index.mjs";
9
+ import { Hero, HeroAlign, HeroProps, HeroVariant } from "./Hero/Hero.mjs";
10
+ import "./Hero/index.mjs";
11
+ import { Grid, GridProps } from "./Grid/Grid.mjs";
12
+ import { GridColSpan, GridItem, GridItemProps } from "./Grid/GridItem.mjs";
13
+ import "./Grid/index.mjs";
14
+ import { Stack, StackProps, StackSpace } from "./Stack/Stack.mjs";
15
+ import "./Stack/index.mjs";
16
+ import { Heading, HeadingAppearance, HeadingLevel, HeadingProps } from "./Heading/Heading.mjs";
17
+ import "./Heading/index.mjs";
18
+ import { HeadingGroup, HeadingGroupProps } from "./HeadingGroup/HeadingGroup.mjs";
19
+ import "./HeadingGroup/index.mjs";
20
+ import { PreHeading, PreHeadingProps } from "./PreHeading/PreHeading.mjs";
21
+ import "./PreHeading/index.mjs";
22
+ import { Paragraph, ParagraphProps, ParagraphVariant } from "./Paragraph/Paragraph.mjs";
23
+ import "./Paragraph/index.mjs";
24
+ import { Link, LinkProps, LinkSize } from "./Link/Link.mjs";
25
+ import "./Link/index.mjs";
26
+ import { UnorderedList, UnorderedListProps } from "./UnorderedList/UnorderedList.mjs";
27
+ import "./UnorderedList/index.mjs";
28
+ import { OrderedList, OrderedListProps } from "./OrderedList/OrderedList.mjs";
29
+ import "./OrderedList/index.mjs";
30
+ import { IconName, iconMap } from "./Icon/icon-registry.generated.mjs";
31
+ import { Icon, IconProps, IconSize } from "./Icon/Icon.mjs";
32
+ import "./Icon/index.mjs";
33
+ import { IconList, IconListItem, IconListItemProps, IconListProps } from "./IconList/IconList.mjs";
34
+ import "./IconList/index.mjs";
35
+ import { Button, ButtonProps, ButtonSize, ButtonVariant } from "./Button/Button.mjs";
36
+ import "./Button/index.mjs";
37
+ import { ButtonLink, ButtonLinkProps, ButtonLinkSize, ButtonLinkVariant } from "./ButtonLink/ButtonLink.mjs";
38
+ import "./ButtonLink/index.mjs";
39
+ import { LinkButton, LinkButtonProps, LinkButtonSize } from "./LinkButton/LinkButton.mjs";
40
+ import "./LinkButton/index.mjs";
41
+ import { TextInput, TextInputProps } from "./TextInput/TextInput.mjs";
42
+ import "./TextInput/index.mjs";
43
+ import { FileInput, FileInputProps } from "./FileInput/FileInput.mjs";
44
+ import "./FileInput/index.mjs";
45
+ import { EmailInput, EmailInputProps } from "./EmailInput/EmailInput.mjs";
46
+ import "./EmailInput/index.mjs";
47
+ import { PasswordAutocomplete, PasswordInput, PasswordInputProps } from "./PasswordInput/PasswordInput.mjs";
48
+ import "./PasswordInput/index.mjs";
49
+ import { NumberInput, NumberInputProps } from "./NumberInput/NumberInput.mjs";
50
+ import "./NumberInput/index.mjs";
51
+ import { TelephoneInput, TelephoneInputProps } from "./TelephoneInput/TelephoneInput.mjs";
52
+ import "./TelephoneInput/index.mjs";
53
+ import { SearchInput, SearchInputProps } from "./SearchInput/SearchInput.mjs";
54
+ import "./SearchInput/index.mjs";
55
+ import { TimeInput, TimeInputProps } from "./TimeInput/TimeInput.mjs";
56
+ import "./TimeInput/index.mjs";
57
+ import { DateInput, DateInputProps } from "./DateInput/DateInput.mjs";
58
+ import "./DateInput/index.mjs";
59
+ import { DateInputGroup, DateInputGroupProps, DateInputGroupValue } from "./DateInputGroup/DateInputGroup.mjs";
60
+ import "./DateInputGroup/index.mjs";
61
+ import { Select, SelectProps } from "./Select/Select.mjs";
62
+ import "./Select/index.mjs";
63
+ import { TextArea, TextAreaProps } from "./TextArea/TextArea.mjs";
64
+ import "./TextArea/index.mjs";
65
+ import { Checkbox, CheckboxProps } from "./Checkbox/Checkbox.mjs";
66
+ import "./Checkbox/index.mjs";
67
+ import { CheckboxGroup, CheckboxGroupProps } from "./CheckboxGroup/CheckboxGroup.mjs";
68
+ import "./CheckboxGroup/index.mjs";
69
+ import { CheckboxOption, CheckboxOptionProps } from "./CheckboxOption/CheckboxOption.mjs";
70
+ import "./CheckboxOption/index.mjs";
71
+ import { Radio, RadioProps } from "./Radio/Radio.mjs";
72
+ import "./Radio/index.mjs";
73
+ import { RadioGroup, RadioGroupProps } from "./RadioGroup/RadioGroup.mjs";
74
+ import "./RadioGroup/index.mjs";
75
+ import { RadioOption, RadioOptionProps } from "./RadioOption/RadioOption.mjs";
76
+ import "./RadioOption/index.mjs";
77
+ import { OptionLabel, OptionLabelProps } from "./OptionLabel/OptionLabel.mjs";
78
+ import "./OptionLabel/index.mjs";
79
+ import { Backdrop, BackdropProps } from "./Backdrop/Backdrop.mjs";
80
+ import "./Backdrop/index.mjs";
81
+ import { DotBadge, DotBadgeProps, DotBadgeVariant } from "./DotBadge/DotBadge.mjs";
82
+ import "./DotBadge/index.mjs";
83
+ import { Spinner, SpinnerProps, SpinnerSize } from "./Spinner/Spinner.mjs";
84
+ import "./Spinner/index.mjs";
85
+ import { ProgressBar, ProgressBarProps } from "./ProgressBar/ProgressBar.mjs";
86
+ import "./ProgressBar/index.mjs";
87
+ import { NumberBadge, NumberBadgeProps, NumberBadgeVariant } from "./NumberBadge/NumberBadge.mjs";
88
+ import "./NumberBadge/index.mjs";
89
+ import { StatusBadge, StatusBadgeProps, StatusBadgeVariant } from "./StatusBadge/StatusBadge.mjs";
90
+ import "./StatusBadge/index.mjs";
91
+ import { Alert, AlertProps, AlertVariant } from "./Alert/Alert.mjs";
92
+ import "./Alert/index.mjs";
93
+ import { Note, NoteAs, NoteProps, NoteVariant } from "./Note/Note.mjs";
94
+ import "./Note/index.mjs";
95
+ import { Table, TableProps } from "./Table/Table.mjs";
96
+ import "./Table/index.mjs";
97
+ import { Details, DetailsProps } from "./Details/Details.mjs";
98
+ import "./Details/index.mjs";
99
+ import { SummaryList, SummaryListActions, SummaryListActionsProps, SummaryListKey, SummaryListKeyProps, SummaryListProps, SummaryListRow, SummaryListRowProps, SummaryListValue, SummaryListValueProps } from "./SummaryList/SummaryList.mjs";
100
+ import "./SummaryList/index.mjs";
101
+ import { Logo, LogoProps } from "./Logo/Logo.mjs";
102
+ import "./Logo/index.mjs";
103
+ import { SkipLink, SkipLinkProps } from "./SkipLink/SkipLink.mjs";
104
+ import "./SkipLink/index.mjs";
105
+ import { BreadcrumbNavigation, BreadcrumbNavigationProps } from "./BreadcrumbNavigation/BreadcrumbNavigation.mjs";
106
+ import { BreadcrumbNavigationItem, BreadcrumbNavigationItemProps } from "./BreadcrumbNavigation/BreadcrumbNavigationItem.mjs";
107
+ import "./BreadcrumbNavigation/index.mjs";
108
+ import { Menu, MenuOrientation, MenuProps } from "./Menu/Menu.mjs";
109
+ import "./Menu/index.mjs";
110
+ import { MenuButton, MenuButtonProps } from "./MenuButton/MenuButton.mjs";
111
+ import "./MenuButton/index.mjs";
112
+ import { MenuLink, MenuLinkLevel, MenuLinkProps } from "./MenuLink/MenuLink.mjs";
113
+ import "./MenuLink/index.mjs";
114
+ import { PageBody, PageBodyProps } from "./PageBody/PageBody.mjs";
115
+ import "./PageBody/index.mjs";
116
+ import { PageFooter, PageFooterColorScheme, PageFooterProps } from "./PageFooter/PageFooter.mjs";
117
+ import "./PageFooter/index.mjs";
118
+ import { PageHeader, PageHeaderColorScheme, PageHeaderLayout, PageHeaderProps, PageHeaderSticky } from "./PageHeader/PageHeader.mjs";
119
+ import "./PageHeader/index.mjs";
120
+ import { PageLayout, PageLayoutProps } from "./PageLayout/PageLayout.mjs";
121
+ import "./PageLayout/index.mjs";
122
+ import { TableOfContents, TableOfContentsAppearance, TableOfContentsItem, TableOfContentsProps } from "./TableOfContents/TableOfContents.mjs";
123
+ import "./TableOfContents/index.mjs";
124
+ import { FormFieldStatus, FormFieldStatusProps, FormFieldStatusVariant } from "./FormFieldStatus/FormFieldStatus.mjs";
125
+ import "./FormFieldStatus/index.mjs";
126
+ import { FormField, FormFieldProps } from "./FormField/FormField.mjs";
127
+ import "./FormField/index.mjs";
128
+ import { FormFieldLabel, FormFieldLabelProps } from "./FormFieldLabel/FormFieldLabel.mjs";
129
+ import "./FormFieldLabel/index.mjs";
130
+ import { FormFieldDescription, FormFieldDescriptionProps } from "./FormFieldDescription/FormFieldDescription.mjs";
131
+ import "./FormFieldDescription/index.mjs";
132
+ import { FormFieldErrorMessage, FormFieldErrorMessageProps } from "./FormFieldErrorMessage/FormFieldErrorMessage.mjs";
133
+ import "./FormFieldErrorMessage/index.mjs";
134
+ import { FormFieldset, FormFieldsetProps } from "./FormFieldset/FormFieldset.mjs";
135
+ import "./FormFieldset/index.mjs";
136
+ import { FormFieldLegend, FormFieldLegendProps } from "./FormFieldLegend/FormFieldLegend.mjs";
137
+ import "./FormFieldLegend/index.mjs";
138
+ import { Image, ImageProps } from "./Image/Image.mjs";
139
+ import "./Image/index.mjs";
140
+ import { Card, CardBody, CardBodyProps, CardFooter, CardFooterProps, CardGroup, CardGroupProps, CardHeader, CardHeaderProps, CardHeading, CardHeadingProps, CardProps } from "./Card/Card.mjs";
141
+ import "./Card/index.mjs";
142
+ import { ModalDialog, ModalDialogBody, ModalDialogBodyProps, ModalDialogFooter, ModalDialogFooterProps, ModalDialogHeader, ModalDialogHeaderProps, ModalDialogHeading, ModalDialogHeadingProps, ModalDialogProps } from "./ModalDialog/ModalDialog.mjs";
143
+ import "./ModalDialog/index.mjs";
144
+ import { Drawer, DrawerBody, DrawerBodyProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerHeading, DrawerHeadingProps, DrawerProps } from "./Drawer/Drawer.mjs";
145
+ import "./Drawer/index.mjs";
146
+ import { Popover, PopoverBody, PopoverBodyProps, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps, PopoverHeading, PopoverHeadingProps, PopoverProps } from "./Popover/Popover.mjs";
147
+ import "./Popover/index.mjs";
148
+ import { File, FileCtaVariant, FileList, FileListProps, FileMediaType, FileProps, FileStatus } from "./File/File.mjs";
149
+ import "./File/index.mjs";
150
+ export { ActionGroup, type ActionGroupProps, Alert, type AlertProps, type AlertVariant, Backdrop, type BackdropProps, Body, type BodyProps, BreadcrumbNavigation, BreadcrumbNavigationItem, BreadcrumbNavigationItemProps, BreadcrumbNavigationProps, BreakoutSection, type BreakoutSectionAs, type BreakoutSectionProps, Button, ButtonLink, type ButtonLinkProps, type ButtonLinkSize, type ButtonLinkVariant, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardGroup, type CardGroupProps, CardHeader, type CardHeaderProps, CardHeading, type CardHeadingProps, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, CheckboxOption, type CheckboxOptionProps, type CheckboxProps, Container, type ContainerAs, type ContainerProps, DateInput, DateInputGroup, type DateInputGroupProps, type DateInputGroupValue, type DateInputProps, Details, type DetailsProps, DotBadge, DotBadgeProps, DotBadgeVariant, Drawer, DrawerBody, type DrawerBodyProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerHeading, type DrawerHeadingProps, type DrawerProps, EmailInput, type EmailInputProps, File, type FileCtaVariant, FileInput, type FileInputProps, FileList, type FileListProps, type FileMediaType, type FileProps, type FileStatus, FormField, FormFieldDescription, type FormFieldDescriptionProps, FormFieldErrorMessage, type FormFieldErrorMessageProps, FormFieldLabel, type FormFieldLabelProps, FormFieldLegend, FormFieldLegendProps, type FormFieldProps, FormFieldStatus, type FormFieldStatusProps, type FormFieldStatusVariant, FormFieldset, FormFieldsetProps, Grid, type GridColSpan, GridItem, type GridItemProps, type GridProps, Heading, type HeadingAppearance, HeadingGroup, type HeadingGroupProps, type HeadingLevel, type HeadingProps, Hero, type HeroAlign, type HeroProps, type HeroVariant, Icon, IconList, IconListItem, type IconListItemProps, type IconListProps, type IconName, type IconProps, type IconSize, Image, type ImageProps, Link, LinkButton, type LinkButtonProps, type LinkButtonSize, type LinkProps, type LinkSize, Logo, LogoProps, Menu, MenuButton, MenuButtonProps, MenuLink, MenuLinkLevel, MenuLinkProps, MenuOrientation, MenuProps, ModalDialog, ModalDialogBody, type ModalDialogBodyProps, ModalDialogFooter, type ModalDialogFooterProps, ModalDialogHeader, type ModalDialogHeaderProps, ModalDialogHeading, type ModalDialogHeadingProps, type ModalDialogProps, Note, type NoteAs, type NoteProps, type NoteVariant, NumberBadge, NumberBadgeProps, NumberBadgeVariant, NumberInput, type NumberInputProps, OptionLabel, type OptionLabelProps, OrderedList, type OrderedListProps, PageBody, PageBodyProps, PageFooter, PageFooterColorScheme, PageFooterProps, PageHeader, PageHeaderColorScheme, PageHeaderLayout, PageHeaderProps, PageHeaderSticky, PageLayout, PageLayoutProps, Paragraph, type ParagraphProps, type ParagraphVariant, type PasswordAutocomplete, PasswordInput, type PasswordInputProps, Popover, PopoverBody, type PopoverBodyProps, PopoverFooter, type PopoverFooterProps, PopoverHeader, type PopoverHeaderProps, PopoverHeading, type PopoverHeadingProps, type PopoverProps, PreHeading, type PreHeadingProps, ProgressBar, ProgressBarProps, Radio, RadioGroup, type RadioGroupProps, RadioOption, type RadioOptionProps, type RadioProps, SearchInput, type SearchInputProps, Select, type SelectProps, SkipLink, SkipLinkProps, Spinner, SpinnerProps, SpinnerSize, Stack, type StackProps, type StackSpace, StatusBadge, StatusBadgeProps, StatusBadgeVariant, SummaryList, SummaryListActions, type SummaryListActionsProps, SummaryListKey, type SummaryListKeyProps, type SummaryListProps, SummaryListRow, type SummaryListRowProps, SummaryListValue, type SummaryListValueProps, Table, TableOfContents, type TableOfContentsAppearance, type TableOfContentsItem, type TableOfContentsProps, type TableProps, TelephoneInput, type TelephoneInputProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TimeInput, type TimeInputProps, UnorderedList, type UnorderedListProps, iconMap };