@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.
- package/README.md +32 -4
- package/dist/ActionGroup/ActionGroup.d.mts +51 -0
- package/dist/ActionGroup/ActionGroup.d.mts.map +1 -0
- package/dist/ActionGroup/ActionGroup2.mjs +65 -0
- package/dist/ActionGroup/ActionGroup2.mjs.map +1 -0
- package/dist/ActionGroup/index.d.mts +2 -0
- package/dist/Alert/Alert.d.mts +85 -0
- package/dist/Alert/Alert.d.mts.map +1 -0
- package/dist/Alert/Alert2.mjs +102 -0
- package/dist/Alert/Alert2.mjs.map +1 -0
- package/dist/Alert/index.d.mts +2 -0
- package/dist/Backdrop/Backdrop.d.mts +28 -0
- package/dist/Backdrop/Backdrop.d.mts.map +1 -0
- package/dist/Backdrop/Backdrop2.mjs +32 -0
- package/dist/Backdrop/Backdrop2.mjs.map +1 -0
- package/dist/Backdrop/index.d.mts +2 -0
- package/dist/Body/Body.d.mts +29 -0
- package/dist/Body/Body.d.mts.map +1 -0
- package/dist/Body/Body2.mjs +36 -0
- package/dist/Body/Body2.mjs.map +1 -0
- package/dist/Body/index.d.mts +2 -0
- package/dist/BreadcrumbNavigation/BreadcrumbNavigation.d.mts +45 -0
- package/dist/BreadcrumbNavigation/BreadcrumbNavigation.d.mts.map +1 -0
- package/dist/BreadcrumbNavigation/BreadcrumbNavigation2.mjs +51 -0
- package/dist/BreadcrumbNavigation/BreadcrumbNavigation2.mjs.map +1 -0
- package/dist/BreadcrumbNavigation/BreadcrumbNavigationItem.d.mts +41 -0
- package/dist/BreadcrumbNavigation/BreadcrumbNavigationItem.d.mts.map +1 -0
- package/dist/BreadcrumbNavigation/BreadcrumbNavigationItem.mjs +48 -0
- package/dist/BreadcrumbNavigation/BreadcrumbNavigationItem.mjs.map +1 -0
- package/dist/BreadcrumbNavigation/index.d.mts +3 -0
- package/dist/BreakoutSection/BreakoutSection.d.mts +32 -0
- package/dist/BreakoutSection/BreakoutSection.d.mts.map +1 -0
- package/dist/BreakoutSection/BreakoutSection2.mjs +36 -0
- package/dist/BreakoutSection/BreakoutSection2.mjs.map +1 -0
- package/dist/BreakoutSection/index.d.mts +2 -0
- package/dist/Button/Button.d.mts +92 -0
- package/dist/Button/Button.d.mts.map +1 -0
- package/dist/Button/Button2.mjs +76 -0
- package/dist/Button/Button2.mjs.map +1 -0
- package/dist/Button/index.d.mts +2 -0
- package/dist/ButtonLink/ButtonLink.d.mts +94 -0
- package/dist/ButtonLink/ButtonLink.d.mts.map +1 -0
- package/dist/ButtonLink/ButtonLink2.mjs +70 -0
- package/dist/ButtonLink/ButtonLink2.mjs.map +1 -0
- package/dist/ButtonLink/index.d.mts +2 -0
- package/dist/Card/Card.d.mts +107 -0
- package/dist/Card/Card.d.mts.map +1 -0
- package/dist/Card/Card2.mjs +125 -0
- package/dist/Card/Card2.mjs.map +1 -0
- package/dist/Card/index.d.mts +2 -0
- package/dist/Checkbox/Checkbox.d.mts +20 -0
- package/dist/Checkbox/Checkbox.d.mts.map +1 -0
- package/dist/Checkbox/Checkbox2.mjs +43 -0
- package/dist/Checkbox/Checkbox2.mjs.map +1 -0
- package/dist/Checkbox/index.d.mts +2 -0
- package/dist/CheckboxGroup/CheckboxGroup.d.mts +39 -0
- package/dist/CheckboxGroup/CheckboxGroup.d.mts.map +1 -0
- package/dist/CheckboxGroup/CheckboxGroup2.mjs +46 -0
- package/dist/CheckboxGroup/CheckboxGroup2.mjs.map +1 -0
- package/dist/CheckboxGroup/index.d.mts +2 -0
- package/dist/CheckboxOption/CheckboxOption.d.mts +17 -0
- package/dist/CheckboxOption/CheckboxOption.d.mts.map +1 -0
- package/dist/CheckboxOption/CheckboxOption2.mjs +29 -0
- package/dist/CheckboxOption/CheckboxOption2.mjs.map +1 -0
- package/dist/CheckboxOption/index.d.mts +2 -0
- package/dist/Container/Container.d.mts +43 -0
- package/dist/Container/Container.d.mts.map +1 -0
- package/dist/Container/Container2.mjs +42 -0
- package/dist/Container/Container2.mjs.map +1 -0
- package/dist/Container/index.d.mts +2 -0
- package/dist/DateInput/DateInput.d.mts +38 -0
- package/dist/DateInput/DateInput.d.mts.map +1 -0
- package/dist/DateInput/DateInput2.mjs +69 -0
- package/dist/DateInput/DateInput2.mjs.map +1 -0
- package/dist/DateInput/index.d.mts +2 -0
- package/dist/DateInputGroup/DateInputGroup.d.mts +67 -0
- package/dist/DateInputGroup/DateInputGroup.d.mts.map +1 -0
- package/dist/DateInputGroup/DateInputGroup2.mjs +120 -0
- package/dist/DateInputGroup/DateInputGroup2.mjs.map +1 -0
- package/dist/DateInputGroup/index.d.mts +2 -0
- package/dist/Details/Details.d.mts +48 -0
- package/dist/Details/Details.d.mts.map +1 -0
- package/dist/Details/Details2.mjs +61 -0
- package/dist/Details/Details2.mjs.map +1 -0
- package/dist/Details/index.d.mts +2 -0
- package/dist/DotBadge/DotBadge.d.mts +44 -0
- package/dist/DotBadge/DotBadge.d.mts.map +1 -0
- package/dist/DotBadge/DotBadge2.mjs +42 -0
- package/dist/DotBadge/DotBadge2.mjs.map +1 -0
- package/dist/DotBadge/index.d.mts +2 -0
- package/dist/Drawer/Drawer.d.mts +111 -0
- package/dist/Drawer/Drawer.d.mts.map +1 -0
- package/dist/Drawer/Drawer2.mjs +156 -0
- package/dist/Drawer/Drawer2.mjs.map +1 -0
- package/dist/Drawer/index.d.mts +2 -0
- package/dist/EmailInput/EmailInput.d.mts +40 -0
- package/dist/EmailInput/EmailInput.d.mts.map +1 -0
- package/dist/EmailInput/EmailInput.mjs +39 -0
- package/dist/EmailInput/EmailInput.mjs.map +1 -0
- package/dist/EmailInput/index.d.mts +2 -0
- package/dist/File/File.d.mts +124 -0
- package/dist/File/File.d.mts.map +1 -0
- package/dist/File/File2.mjs +196 -0
- package/dist/File/File2.mjs.map +1 -0
- package/dist/File/index.d.mts +2 -0
- package/dist/FileInput/FileInput.d.mts +38 -0
- package/dist/FileInput/FileInput.d.mts.map +1 -0
- package/dist/FileInput/FileInput2.mjs +41 -0
- package/dist/FileInput/FileInput2.mjs.map +1 -0
- package/dist/FileInput/index.d.mts +2 -0
- package/dist/FormField/FormField.d.mts +103 -0
- package/dist/FormField/FormField.d.mts.map +1 -0
- package/dist/FormField/FormField2.mjs +101 -0
- package/dist/FormField/FormField2.mjs.map +1 -0
- package/dist/FormField/index.d.mts +2 -0
- package/dist/FormFieldDescription/FormFieldDescription.d.mts +53 -0
- package/dist/FormFieldDescription/FormFieldDescription.d.mts.map +1 -0
- package/dist/FormFieldDescription/FormFieldDescription2.mjs +49 -0
- package/dist/FormFieldDescription/FormFieldDescription2.mjs.map +1 -0
- package/dist/FormFieldDescription/index.d.mts +2 -0
- package/dist/FormFieldErrorMessage/FormFieldErrorMessage.d.mts +42 -0
- package/dist/FormFieldErrorMessage/FormFieldErrorMessage.d.mts.map +1 -0
- package/dist/FormFieldErrorMessage/FormFieldErrorMessage2.mjs +44 -0
- package/dist/FormFieldErrorMessage/FormFieldErrorMessage2.mjs.map +1 -0
- package/dist/FormFieldErrorMessage/index.d.mts +2 -0
- package/dist/FormFieldLabel/FormFieldLabel.d.mts +40 -0
- package/dist/FormFieldLabel/FormFieldLabel.d.mts.map +1 -0
- package/dist/FormFieldLabel/FormFieldLabel2.mjs +42 -0
- package/dist/FormFieldLabel/FormFieldLabel2.mjs.map +1 -0
- package/dist/FormFieldLabel/index.d.mts +2 -0
- package/dist/FormFieldLegend/FormFieldLegend.d.mts +41 -0
- package/dist/FormFieldLegend/FormFieldLegend.d.mts.map +1 -0
- package/dist/FormFieldLegend/FormFieldLegend2.mjs +43 -0
- package/dist/FormFieldLegend/FormFieldLegend2.mjs.map +1 -0
- package/dist/FormFieldLegend/index.d.mts +2 -0
- package/dist/FormFieldStatus/FormFieldStatus.d.mts +62 -0
- package/dist/FormFieldStatus/FormFieldStatus.d.mts.map +1 -0
- package/dist/FormFieldStatus/FormFieldStatus2.mjs +54 -0
- package/dist/FormFieldStatus/FormFieldStatus2.mjs.map +1 -0
- package/dist/FormFieldStatus/index.d.mts +2 -0
- package/dist/FormFieldset/FormFieldset.d.mts +100 -0
- package/dist/FormFieldset/FormFieldset.d.mts.map +1 -0
- package/dist/FormFieldset/FormFieldset2.mjs +100 -0
- package/dist/FormFieldset/FormFieldset2.mjs.map +1 -0
- package/dist/FormFieldset/index.d.mts +2 -0
- package/dist/Grid/Grid.d.mts +37 -0
- package/dist/Grid/Grid.d.mts.map +1 -0
- package/dist/Grid/Grid2.mjs +38 -0
- package/dist/Grid/Grid2.mjs.map +1 -0
- package/dist/Grid/GridItem.d.mts +87 -0
- package/dist/Grid/GridItem.d.mts.map +1 -0
- package/dist/Grid/GridItem.mjs +48 -0
- package/dist/Grid/GridItem.mjs.map +1 -0
- package/dist/Grid/index.d.mts +3 -0
- package/dist/Heading/Heading.d.mts +40 -0
- package/dist/Heading/Heading.d.mts.map +1 -0
- package/dist/Heading/Heading2.mjs +33 -0
- package/dist/Heading/Heading2.mjs.map +1 -0
- package/dist/Heading/index.d.mts +2 -0
- package/dist/HeadingGroup/HeadingGroup.d.mts +25 -0
- package/dist/HeadingGroup/HeadingGroup.d.mts.map +1 -0
- package/dist/HeadingGroup/HeadingGroup2.mjs +24 -0
- package/dist/HeadingGroup/HeadingGroup2.mjs.map +1 -0
- package/dist/HeadingGroup/index.d.mts +2 -0
- package/dist/Hero/Hero.d.mts +47 -0
- package/dist/Hero/Hero.d.mts.map +1 -0
- package/dist/Hero/Hero2.mjs +50 -0
- package/dist/Hero/Hero2.mjs.map +1 -0
- package/dist/Hero/index.d.mts +2 -0
- package/dist/Icon/Icon.d.mts +47 -0
- package/dist/Icon/Icon.d.mts.map +1 -0
- package/dist/Icon/Icon2.mjs +47 -0
- package/dist/Icon/Icon2.mjs.map +1 -0
- package/dist/Icon/icon-registry.generated.d.mts +8 -0
- package/dist/Icon/icon-registry.generated.d.mts.map +1 -0
- package/dist/Icon/icon-registry.generated.mjs +818 -0
- package/dist/Icon/icon-registry.generated.mjs.map +1 -0
- package/dist/Icon/index.d.mts +3 -0
- package/dist/IconList/IconList.d.mts +68 -0
- package/dist/IconList/IconList.d.mts.map +1 -0
- package/dist/IconList/IconList2.mjs +65 -0
- package/dist/IconList/IconList2.mjs.map +1 -0
- package/dist/IconList/index.d.mts +2 -0
- package/dist/Image/Image.d.mts +56 -0
- package/dist/Image/Image.d.mts.map +1 -0
- package/dist/Image/Image2.mjs +67 -0
- package/dist/Image/Image2.mjs.map +1 -0
- package/dist/Image/index.d.mts +2 -0
- package/dist/Link/Link.d.mts +82 -0
- package/dist/Link/Link.d.mts.map +1 -0
- package/dist/Link/Link2.mjs +73 -0
- package/dist/Link/Link2.mjs.map +1 -0
- package/dist/Link/index.d.mts +2 -0
- package/dist/LinkButton/LinkButton.d.mts +54 -0
- package/dist/LinkButton/LinkButton.d.mts.map +1 -0
- package/dist/LinkButton/LinkButton2.mjs +48 -0
- package/dist/LinkButton/LinkButton2.mjs.map +1 -0
- package/dist/LinkButton/index.d.mts +2 -0
- package/dist/Logo/Logo.d.mts +35 -0
- package/dist/Logo/Logo.d.mts.map +1 -0
- package/dist/Logo/Logo2.mjs +66 -0
- package/dist/Logo/Logo2.mjs.map +1 -0
- package/dist/Logo/index.d.mts +2 -0
- package/dist/Menu/Menu.d.mts +58 -0
- package/dist/Menu/Menu.d.mts.map +1 -0
- package/dist/Menu/Menu2.mjs +47 -0
- package/dist/Menu/Menu2.mjs.map +1 -0
- package/dist/Menu/index.d.mts +2 -0
- package/dist/MenuButton/MenuButton.d.mts +56 -0
- package/dist/MenuButton/MenuButton.d.mts.map +1 -0
- package/dist/MenuButton/MenuButton2.mjs +57 -0
- package/dist/MenuButton/MenuButton2.mjs.map +1 -0
- package/dist/MenuButton/index.d.mts +2 -0
- package/dist/MenuLink/MenuLink.d.mts +98 -0
- package/dist/MenuLink/MenuLink.d.mts.map +1 -0
- package/dist/MenuLink/MenuLink2.mjs +98 -0
- package/dist/MenuLink/MenuLink2.mjs.map +1 -0
- package/dist/MenuLink/index.d.mts +2 -0
- package/dist/ModalDialog/ModalDialog.d.mts +97 -0
- package/dist/ModalDialog/ModalDialog.d.mts.map +1 -0
- package/dist/ModalDialog/ModalDialog2.mjs +134 -0
- package/dist/ModalDialog/ModalDialog2.mjs.map +1 -0
- package/dist/ModalDialog/index.d.mts +2 -0
- package/dist/Note/Note.d.mts +95 -0
- package/dist/Note/Note.d.mts.map +1 -0
- package/dist/Note/Note2.mjs +116 -0
- package/dist/Note/Note2.mjs.map +1 -0
- package/dist/Note/index.d.mts +2 -0
- package/dist/NumberBadge/NumberBadge.d.mts +44 -0
- package/dist/NumberBadge/NumberBadge.d.mts.map +1 -0
- package/dist/NumberBadge/NumberBadge2.mjs +50 -0
- package/dist/NumberBadge/NumberBadge2.mjs.map +1 -0
- package/dist/NumberBadge/index.d.mts +2 -0
- package/dist/NumberInput/NumberInput.d.mts +47 -0
- package/dist/NumberInput/NumberInput.d.mts.map +1 -0
- package/dist/NumberInput/NumberInput.mjs +40 -0
- package/dist/NumberInput/NumberInput.mjs.map +1 -0
- package/dist/NumberInput/index.d.mts +2 -0
- package/dist/OptionLabel/OptionLabel.d.mts +15 -0
- package/dist/OptionLabel/OptionLabel.d.mts.map +1 -0
- package/dist/OptionLabel/OptionLabel2.mjs +22 -0
- package/dist/OptionLabel/OptionLabel2.mjs.map +1 -0
- package/dist/OptionLabel/index.d.mts +2 -0
- package/dist/OrderedList/OrderedList.d.mts +34 -0
- package/dist/OrderedList/OrderedList.d.mts.map +1 -0
- package/dist/OrderedList/OrderedList2.mjs +37 -0
- package/dist/OrderedList/OrderedList2.mjs.map +1 -0
- package/dist/OrderedList/index.d.mts +2 -0
- package/dist/PageBody/PageBody.d.mts +35 -0
- package/dist/PageBody/PageBody.d.mts.map +1 -0
- package/dist/PageBody/PageBody2.mjs +40 -0
- package/dist/PageBody/PageBody2.mjs.map +1 -0
- package/dist/PageBody/index.d.mts +2 -0
- package/dist/PageFooter/PageFooter.d.mts +57 -0
- package/dist/PageFooter/PageFooter.d.mts.map +1 -0
- package/dist/PageFooter/PageFooter2.mjs +78 -0
- package/dist/PageFooter/PageFooter2.mjs.map +1 -0
- package/dist/PageFooter/index.d.mts +2 -0
- package/dist/PageHeader/PageHeader.d.mts +192 -0
- package/dist/PageHeader/PageHeader.d.mts.map +1 -0
- package/dist/PageHeader/PageHeader2.mjs +275 -0
- package/dist/PageHeader/PageHeader2.mjs.map +1 -0
- package/dist/PageHeader/index.d.mts +2 -0
- package/dist/PageLayout/PageLayout.d.mts +40 -0
- package/dist/PageLayout/PageLayout.d.mts.map +1 -0
- package/dist/PageLayout/PageLayout2.mjs +42 -0
- package/dist/PageLayout/PageLayout2.mjs.map +1 -0
- package/dist/PageLayout/index.d.mts +2 -0
- package/dist/Paragraph/Paragraph.d.mts +37 -0
- package/dist/Paragraph/Paragraph.d.mts.map +1 -0
- package/dist/Paragraph/Paragraph2.mjs +34 -0
- package/dist/Paragraph/Paragraph2.mjs.map +1 -0
- package/dist/Paragraph/index.d.mts +2 -0
- package/dist/PasswordInput/PasswordInput.d.mts +54 -0
- package/dist/PasswordInput/PasswordInput.d.mts.map +1 -0
- package/dist/PasswordInput/PasswordInput.mjs +43 -0
- package/dist/PasswordInput/PasswordInput.mjs.map +1 -0
- package/dist/PasswordInput/index.d.mts +2 -0
- package/dist/Popover/Popover.d.mts +118 -0
- package/dist/Popover/Popover.d.mts.map +1 -0
- package/dist/Popover/Popover2.mjs +235 -0
- package/dist/Popover/Popover2.mjs.map +1 -0
- package/dist/Popover/index.d.mts +2 -0
- package/dist/PreHeading/PreHeading.d.mts +10 -0
- package/dist/PreHeading/PreHeading.d.mts.map +1 -0
- package/dist/PreHeading/PreHeading2.mjs +18 -0
- package/dist/PreHeading/PreHeading2.mjs.map +1 -0
- package/dist/PreHeading/index.d.mts +2 -0
- package/dist/ProgressBar/ProgressBar.d.mts +60 -0
- package/dist/ProgressBar/ProgressBar.d.mts.map +1 -0
- package/dist/ProgressBar/ProgressBar2.mjs +73 -0
- package/dist/ProgressBar/ProgressBar2.mjs.map +1 -0
- package/dist/ProgressBar/index.d.mts +2 -0
- package/dist/Radio/Radio.d.mts +16 -0
- package/dist/Radio/Radio.d.mts.map +1 -0
- package/dist/Radio/Radio2.mjs +31 -0
- package/dist/Radio/Radio2.mjs.map +1 -0
- package/dist/Radio/index.d.mts +2 -0
- package/dist/RadioGroup/RadioGroup.d.mts +39 -0
- package/dist/RadioGroup/RadioGroup.d.mts.map +1 -0
- package/dist/RadioGroup/RadioGroup2.mjs +46 -0
- package/dist/RadioGroup/RadioGroup2.mjs.map +1 -0
- package/dist/RadioGroup/index.d.mts +2 -0
- package/dist/RadioOption/RadioOption.d.mts +17 -0
- package/dist/RadioOption/RadioOption.d.mts.map +1 -0
- package/dist/RadioOption/RadioOption2.mjs +29 -0
- package/dist/RadioOption/RadioOption2.mjs.map +1 -0
- package/dist/RadioOption/index.d.mts +2 -0
- package/dist/SearchInput/SearchInput.d.mts +41 -0
- package/dist/SearchInput/SearchInput.d.mts.map +1 -0
- package/dist/SearchInput/SearchInput2.mjs +48 -0
- package/dist/SearchInput/SearchInput2.mjs.map +1 -0
- package/dist/SearchInput/index.d.mts +2 -0
- package/dist/Select/Select.d.mts +53 -0
- package/dist/Select/Select.d.mts.map +1 -0
- package/dist/Select/Select2.mjs +61 -0
- package/dist/Select/Select2.mjs.map +1 -0
- package/dist/Select/index.d.mts +2 -0
- package/dist/SkipLink/SkipLink.d.mts +37 -0
- package/dist/SkipLink/SkipLink.d.mts.map +1 -0
- package/dist/SkipLink/SkipLink2.mjs +33 -0
- package/dist/SkipLink/SkipLink2.mjs.map +1 -0
- package/dist/SkipLink/index.d.mts +2 -0
- package/dist/Spinner/Spinner.d.mts +45 -0
- package/dist/Spinner/Spinner.d.mts.map +1 -0
- package/dist/Spinner/Spinner2.mjs +58 -0
- package/dist/Spinner/Spinner2.mjs.map +1 -0
- package/dist/Spinner/index.d.mts +2 -0
- package/dist/Stack/Stack.d.mts +37 -0
- package/dist/Stack/Stack.d.mts.map +1 -0
- package/dist/Stack/Stack2.mjs +38 -0
- package/dist/Stack/Stack2.mjs.map +1 -0
- package/dist/Stack/index.d.mts +2 -0
- package/dist/StatusBadge/StatusBadge.d.mts +52 -0
- package/dist/StatusBadge/StatusBadge.d.mts.map +1 -0
- package/dist/StatusBadge/StatusBadge2.mjs +49 -0
- package/dist/StatusBadge/StatusBadge2.mjs.map +1 -0
- package/dist/StatusBadge/index.d.mts +2 -0
- package/dist/SummaryList/SummaryList.d.mts +51 -0
- package/dist/SummaryList/SummaryList.d.mts.map +1 -0
- package/dist/SummaryList/SummaryList2.mjs +66 -0
- package/dist/SummaryList/SummaryList2.mjs.map +1 -0
- package/dist/SummaryList/index.d.mts +2 -0
- package/dist/Table/Table.d.mts +63 -0
- package/dist/Table/Table.d.mts.map +1 -0
- package/dist/Table/Table2.mjs +54 -0
- package/dist/Table/Table2.mjs.map +1 -0
- package/dist/Table/index.d.mts +2 -0
- package/dist/TableOfContents/TableOfContents.d.mts +64 -0
- package/dist/TableOfContents/TableOfContents.d.mts.map +1 -0
- package/dist/TableOfContents/TableOfContents2.mjs +51 -0
- package/dist/TableOfContents/TableOfContents2.mjs.map +1 -0
- package/dist/TableOfContents/index.d.mts +2 -0
- package/dist/TelephoneInput/TelephoneInput.d.mts +40 -0
- package/dist/TelephoneInput/TelephoneInput.d.mts.map +1 -0
- package/dist/TelephoneInput/TelephoneInput.mjs +39 -0
- package/dist/TelephoneInput/TelephoneInput.mjs.map +1 -0
- package/dist/TelephoneInput/index.d.mts +2 -0
- package/dist/TextArea/TextArea.d.mts +46 -0
- package/dist/TextArea/TextArea.d.mts.map +1 -0
- package/dist/TextArea/TextArea2.mjs +43 -0
- package/dist/TextArea/TextArea2.mjs.map +1 -0
- package/dist/TextArea/index.d.mts +2 -0
- package/dist/TextInput/TextInput.d.mts +46 -0
- package/dist/TextInput/TextInput.d.mts.map +1 -0
- package/dist/TextInput/TextInput2.mjs +43 -0
- package/dist/TextInput/TextInput2.mjs.map +1 -0
- package/dist/TextInput/index.d.mts +2 -0
- package/dist/TimeInput/TimeInput.d.mts +38 -0
- package/dist/TimeInput/TimeInput.d.mts.map +1 -0
- package/dist/TimeInput/TimeInput2.mjs +69 -0
- package/dist/TimeInput/TimeInput2.mjs.map +1 -0
- package/dist/TimeInput/index.d.mts +2 -0
- package/dist/UnorderedList/UnorderedList.d.mts +28 -0
- package/dist/UnorderedList/UnorderedList.d.mts.map +1 -0
- package/dist/UnorderedList/UnorderedList2.mjs +31 -0
- package/dist/UnorderedList/UnorderedList2.mjs.map +1 -0
- package/dist/UnorderedList/index.d.mts +2 -0
- package/dist/index.css +3470 -3470
- package/dist/index.d.mts +150 -3874
- package/dist/index.mjs +76 -5006
- package/dist/utils/describeControl.mjs +25 -0
- package/dist/utils/describeControl.mjs.map +1 -0
- package/package.json +4 -3
- package/dist/index.d.mts.map +0 -1
- package/dist/index.mjs.map +0 -1
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
//#region src/LinkButton/LinkButton.d.ts
|
|
3
|
+
type LinkButtonSize = 'small' | 'default' | 'large';
|
|
4
|
+
interface LinkButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
|
+
/**
|
|
6
|
+
* Button size — controls font-size, gap, and icon size.
|
|
7
|
+
* When omitted, the button inherits the surrounding font (same as Link).
|
|
8
|
+
*/
|
|
9
|
+
size?: LinkButtonSize;
|
|
10
|
+
/**
|
|
11
|
+
* Icon element rendered before the button text
|
|
12
|
+
*/
|
|
13
|
+
iconStart?: React.ReactNode;
|
|
14
|
+
/**
|
|
15
|
+
* Icon element rendered after the button text
|
|
16
|
+
*/
|
|
17
|
+
iconEnd?: React.ReactNode;
|
|
18
|
+
/**
|
|
19
|
+
* Additional CSS class names
|
|
20
|
+
*/
|
|
21
|
+
className?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Button content
|
|
24
|
+
*/
|
|
25
|
+
children?: React.ReactNode;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* LinkButton — semantically a <button>, visually styled as a Link.
|
|
29
|
+
*
|
|
30
|
+
* Use when an action requires a JavaScript handler or form submit,
|
|
31
|
+
* but the visual prominence of a Button does not fit the context.
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* ```tsx
|
|
35
|
+
* // Basic usage (inherits font from parent)
|
|
36
|
+
* <LinkButton onClick={handleClick}>Wachtwoord vergeten?</LinkButton>
|
|
37
|
+
*
|
|
38
|
+
* // With explicit size
|
|
39
|
+
* <LinkButton size="small">Klein</LinkButton>
|
|
40
|
+
*
|
|
41
|
+
* // With icon
|
|
42
|
+
* <LinkButton iconStart={<Icon name="arrow-left" aria-hidden />}>Terug</LinkButton>
|
|
43
|
+
*
|
|
44
|
+
* // Disabled
|
|
45
|
+
* <LinkButton disabled>Niet beschikbaar</LinkButton>
|
|
46
|
+
*
|
|
47
|
+
* // Form submit
|
|
48
|
+
* <LinkButton type="submit">Bevestigen</LinkButton>
|
|
49
|
+
* ```
|
|
50
|
+
*/
|
|
51
|
+
declare const LinkButton: React.ForwardRefExoticComponent<LinkButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
52
|
+
//#endregion
|
|
53
|
+
export { LinkButton, LinkButtonProps, LinkButtonSize };
|
|
54
|
+
//# sourceMappingURL=LinkButton.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LinkButton.d.mts","names":[],"sources":["../../src/LinkButton/LinkButton.tsx"],"mappings":";;KAIY;UAEK,wBAAwB,MAAM,qBAAqB;;;;;EAKlE,OAAO;;;;EAKP,YAAY,MAAM;;;;EAKlB,UAAU,MAAM;;;;EAKhB;;;;EAKA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;cA2BN,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/* empty css */
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { classNames } from "@dsn-starter-kit/core";
|
|
4
|
+
import { jsxs } from "react/jsx-runtime";
|
|
5
|
+
//#region src/LinkButton/LinkButton.tsx
|
|
6
|
+
/**
|
|
7
|
+
* LinkButton — semantically a <button>, visually styled as a Link.
|
|
8
|
+
*
|
|
9
|
+
* Use when an action requires a JavaScript handler or form submit,
|
|
10
|
+
* but the visual prominence of a Button does not fit the context.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```tsx
|
|
14
|
+
* // Basic usage (inherits font from parent)
|
|
15
|
+
* <LinkButton onClick={handleClick}>Wachtwoord vergeten?</LinkButton>
|
|
16
|
+
*
|
|
17
|
+
* // With explicit size
|
|
18
|
+
* <LinkButton size="small">Klein</LinkButton>
|
|
19
|
+
*
|
|
20
|
+
* // With icon
|
|
21
|
+
* <LinkButton iconStart={<Icon name="arrow-left" aria-hidden />}>Terug</LinkButton>
|
|
22
|
+
*
|
|
23
|
+
* // Disabled
|
|
24
|
+
* <LinkButton disabled>Niet beschikbaar</LinkButton>
|
|
25
|
+
*
|
|
26
|
+
* // Form submit
|
|
27
|
+
* <LinkButton type="submit">Bevestigen</LinkButton>
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
30
|
+
const LinkButton = React.forwardRef(({ size, iconStart, iconEnd, className, type = "button", children, ...props }, ref) => {
|
|
31
|
+
const classes = classNames("dsn-link", "dsn-link-button", size && `dsn-link--size-${size}`, className);
|
|
32
|
+
return /* @__PURE__ */ jsxs("button", {
|
|
33
|
+
ref,
|
|
34
|
+
type,
|
|
35
|
+
className: classes,
|
|
36
|
+
...props,
|
|
37
|
+
children: [
|
|
38
|
+
iconStart,
|
|
39
|
+
children,
|
|
40
|
+
iconEnd
|
|
41
|
+
]
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
LinkButton.displayName = "LinkButton";
|
|
45
|
+
//#endregion
|
|
46
|
+
export { LinkButton };
|
|
47
|
+
|
|
48
|
+
//# sourceMappingURL=LinkButton2.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LinkButton2.mjs","names":[],"sources":["../../src/LinkButton/LinkButton.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './LinkButton.css';\n\nexport type LinkButtonSize = 'small' | 'default' | 'large';\n\nexport interface LinkButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * Button size — controls font-size, gap, and icon size.\n * When omitted, the button inherits the surrounding font (same as Link).\n */\n size?: LinkButtonSize;\n\n /**\n * Icon element rendered before the button text\n */\n iconStart?: React.ReactNode;\n\n /**\n * Icon element rendered after the button text\n */\n iconEnd?: React.ReactNode;\n\n /**\n * Additional CSS class names\n */\n className?: string;\n\n /**\n * Button content\n */\n children?: React.ReactNode;\n}\n\n/**\n * LinkButton — semantically a <button>, visually styled as a Link.\n *\n * Use when an action requires a JavaScript handler or form submit,\n * but the visual prominence of a Button does not fit the context.\n *\n * @example\n * ```tsx\n * // Basic usage (inherits font from parent)\n * <LinkButton onClick={handleClick}>Wachtwoord vergeten?</LinkButton>\n *\n * // With explicit size\n * <LinkButton size=\"small\">Klein</LinkButton>\n *\n * // With icon\n * <LinkButton iconStart={<Icon name=\"arrow-left\" aria-hidden />}>Terug</LinkButton>\n *\n * // Disabled\n * <LinkButton disabled>Niet beschikbaar</LinkButton>\n *\n * // Form submit\n * <LinkButton type=\"submit\">Bevestigen</LinkButton>\n * ```\n */\nexport const LinkButton = React.forwardRef<HTMLButtonElement, LinkButtonProps>(\n (\n {\n size,\n iconStart,\n iconEnd,\n className,\n type = 'button',\n children,\n ...props\n },\n ref\n ) => {\n const classes = classNames(\n 'dsn-link',\n 'dsn-link-button',\n size && `dsn-link--size-${size}`,\n className\n );\n\n return (\n <button ref={ref} type={type} className={classes} {...props}>\n {iconStart}\n {children}\n {iconEnd}\n </button>\n );\n }\n);\n\nLinkButton.displayName = 'LinkButton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,MAAa,aAAa,MAAM,YAE5B,EACE,MACA,WACA,SACA,WACA,OAAO,UACP,UACA,GAAG,SAEL,QACG;CACH,MAAM,UAAU,WACd,YACA,mBACA,QAAQ,kBAAkB,QAC1B,SACF;CAEA,OACE,qBAAC,UAAD;EAAa;EAAW;EAAM,WAAW;EAAS,GAAI;EAAtD,UAAA;GACG;GACA;GACA;EACK;;AAEZ,CACF;AAEA,WAAW,cAAc"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
//#region src/Logo/Logo.d.ts
|
|
3
|
+
interface LogoProps extends React.SVGProps<SVGSVGElement> {
|
|
4
|
+
/**
|
|
5
|
+
* Accessible naam via <title> in de SVG.
|
|
6
|
+
* Niet gerenderd wanneer aria-hidden={true}.
|
|
7
|
+
* @default 'Starter Kit'
|
|
8
|
+
*/
|
|
9
|
+
title?: string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Logo component
|
|
13
|
+
* Rendert het Starter Kit-logo als inline SVG met theme-aware kleuren via design tokens.
|
|
14
|
+
*
|
|
15
|
+
* De twee kleurlagen zijn gekoppeld aan tokens:
|
|
16
|
+
* - dsn-logo__primary — achtergrondrechthoek + letterpaden (merkkleur van het actieve thema)
|
|
17
|
+
* - dsn-logo__label — binnenste rechthoek (documentachtergrondkleur, doorkijkje-effect)
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* // Standalone — screenreader leest de title
|
|
21
|
+
* <Logo />
|
|
22
|
+
*
|
|
23
|
+
* // Decoratief — in een link, omringende context levert de accessible name
|
|
24
|
+
* <a href="/">
|
|
25
|
+
* <Logo aria-hidden={true} />
|
|
26
|
+
* <span className="dsn-visually-hidden">Starter Kit — terug naar homepage</span>
|
|
27
|
+
* </a>
|
|
28
|
+
*
|
|
29
|
+
* // Custom title (bijv. na white-label herbranding)
|
|
30
|
+
* <Logo title="Mijn Organisatie" />
|
|
31
|
+
*/
|
|
32
|
+
declare const Logo: React.ForwardRefExoticComponent<Omit<LogoProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
|
|
33
|
+
//#endregion
|
|
34
|
+
export { Logo, LogoProps };
|
|
35
|
+
//# sourceMappingURL=Logo.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Logo.d.mts","names":[],"sources":["../../src/Logo/Logo.tsx"],"mappings":";;UAIiB,kBAAkB,MAAM,SAAS;;;;;;EAMhD;;;;;;;;;;;;;;;;;;;;;;;cAwBW,MAAI,MAAA,0BAAA,KAAA,oBAAA,MAAA,cAAA"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/* empty css */
|
|
2
|
+
import React, { useId } from "react";
|
|
3
|
+
import { classNames } from "@dsn-starter-kit/core";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
//#region src/Logo/Logo.tsx
|
|
6
|
+
/**
|
|
7
|
+
* Logo component
|
|
8
|
+
* Rendert het Starter Kit-logo als inline SVG met theme-aware kleuren via design tokens.
|
|
9
|
+
*
|
|
10
|
+
* De twee kleurlagen zijn gekoppeld aan tokens:
|
|
11
|
+
* - dsn-logo__primary — achtergrondrechthoek + letterpaden (merkkleur van het actieve thema)
|
|
12
|
+
* - dsn-logo__label — binnenste rechthoek (documentachtergrondkleur, doorkijkje-effect)
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* // Standalone — screenreader leest de title
|
|
16
|
+
* <Logo />
|
|
17
|
+
*
|
|
18
|
+
* // Decoratief — in een link, omringende context levert de accessible name
|
|
19
|
+
* <a href="/">
|
|
20
|
+
* <Logo aria-hidden={true} />
|
|
21
|
+
* <span className="dsn-visually-hidden">Starter Kit — terug naar homepage</span>
|
|
22
|
+
* </a>
|
|
23
|
+
*
|
|
24
|
+
* // Custom title (bijv. na white-label herbranding)
|
|
25
|
+
* <Logo title="Mijn Organisatie" />
|
|
26
|
+
*/
|
|
27
|
+
const Logo = React.forwardRef(({ className, title = "Starter Kit", "aria-hidden": ariaHidden, ...props }, ref) => {
|
|
28
|
+
const titleId = useId();
|
|
29
|
+
const isDecorative = ariaHidden === true || ariaHidden === "true";
|
|
30
|
+
return /* @__PURE__ */ jsxs("svg", {
|
|
31
|
+
ref,
|
|
32
|
+
className: classNames("dsn-logo", className),
|
|
33
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
34
|
+
width: "186",
|
|
35
|
+
height: "48",
|
|
36
|
+
viewBox: "0 0 186 48",
|
|
37
|
+
fill: "none",
|
|
38
|
+
role: isDecorative ? void 0 : "img",
|
|
39
|
+
"aria-labelledby": isDecorative ? void 0 : titleId,
|
|
40
|
+
"aria-hidden": isDecorative ? true : void 0,
|
|
41
|
+
...props,
|
|
42
|
+
children: [
|
|
43
|
+
!isDecorative && /* @__PURE__ */ jsx("title", {
|
|
44
|
+
id: titleId,
|
|
45
|
+
children: title
|
|
46
|
+
}),
|
|
47
|
+
/* @__PURE__ */ jsx("path", {
|
|
48
|
+
className: "dsn-logo__primary",
|
|
49
|
+
d: "M0 0h185.491v48H0z"
|
|
50
|
+
}),
|
|
51
|
+
/* @__PURE__ */ jsx("path", {
|
|
52
|
+
className: "dsn-logo__label",
|
|
53
|
+
d: "M8 8h169.491v32H8z"
|
|
54
|
+
}),
|
|
55
|
+
/* @__PURE__ */ jsx("path", {
|
|
56
|
+
className: "dsn-logo__primary",
|
|
57
|
+
d: "M164.624 32h-3.6q-.423 0-.622-.178-.178-.2-.178-.622V20.289h-3.267q-.422 0-.622-.178-.178-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h11.734q.422 0 .6.2.2.178.2.6v2.689q0 .422-.2.622-.178.178-.6.178h-3.267V31.2q0 .423-.2.622-.178.178-.6.178M144.059 32q-.423 0-.622-.178-.178-.2-.178-.622v-2.644q0-.423.178-.6.2-.2.622-.2h2.2v-7.467h-2.2q-.423 0-.622-.178-.178-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h9.466q.423 0 .6.2.2.178.2.6v2.689q0 .422-.2.622-.177.178-.6.178h-2.155v7.467h2.155q.423 0 .6.2.2.177.2.6V31.2q0 .423-.2.622-.177.178-.6.178zM131.279 32h-3.445q-.422 0-.622-.178-.178-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h3.445q.421 0 .6.2.2.178.2.6v5.111h.889l2.288-5.178q.156-.399.423-.555.266-.178.689-.178h3.422q.378 0 .511.2.133.178-.022.533l-2.267 5.178q1.245.066 1.978.889.755.8.755 2.133V31.2q0 .423-.2.622-.177.178-.6.178h-3.422q-.422 0-.622-.178-.178-.2-.178-.622v-4.333q0-.356-.178-.556-.177-.2-.533-.2h-2.933V31.2q0 .423-.2.622-.179.178-.6.178M110.551 20v2.844h1.666q.578 0 .778-.288.2-.312.2-.756v-.756q0-.444-.2-.733-.2-.31-.778-.311zm-.8 12h-3.423q-.422 0-.622-.178-.178-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h7.4q2.49 0 3.423 1.044.955 1.022.955 2.667v1.022q0 .934-.289 1.6-.267.645-.955.934 1.2.134 1.933.977.756.845.756 2.245V31.2q0 .423-.2.622-.178.178-.6.178h-3.445q-.422 0-.622-.178-.178-.2-.178-.622v-3.4q0-.489-.2-.711-.177-.245-.644-.245h-3.111V31.2q0 .423-.2.622-.178.178-.6.178M102.099 32h-10.31q-.423 0-.623-.178-.177-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2H102.1q.423 0 .6.2.2.178.2.6v2.6q0 .423-.2.622-.177.178-.6.178h-6.133v1.711h4.333q.423 0 .6.2.2.178.2.6v2.378q0 .422-.2.622-.177.178-.6.178h-4.333V27.8h6.133q.423 0 .6.2.2.178.2.6v2.6q0 .423-.2.622-.177.178-.6.178M83.96 32h-3.6q-.423 0-.622-.178-.178-.2-.178-.622V20.289h-3.267q-.422 0-.622-.178-.178-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h11.733q.423 0 .6.2.2.178.2.6v2.689q0 .422-.2.622-.177.178-.6.178H84.76V31.2q0 .423-.2.622-.178.178-.6.178M65.585 20v2.844h1.666q.579 0 .778-.288.2-.312.2-.756v-.756q0-.444-.2-.733-.2-.31-.778-.311zm-.8 12h-3.422q-.423 0-.623-.178-.177-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h7.4q2.49 0 3.423 1.044.955 1.022.955 2.667v1.022q0 .934-.289 1.6-.266.645-.955.934 1.2.134 1.933.977.756.845.756 2.245V31.2q0 .423-.2.622-.178.178-.6.178H70.34q-.422 0-.622-.178-.177-.2-.178-.622v-3.4q0-.489-.2-.711-.177-.245-.644-.245h-3.111V31.2q0 .423-.2.622-.178.178-.6.178M50.13 20.667l-1.044 3.377h3.489l-1.045-3.377a.76.76 0 0 0-.2-.29.3.3 0 0 0-.222-.088h-.555q-.134 0-.245.089a1 1 0 0 0-.178.289M48.864 31.2q0 .423-.2.622-.179.178-.6.178h-3.267q-.422 0-.622-.178-.178-.2-.178-.622v-5.867q0-.666.2-1.533.222-.867.667-2.022l1.933-5.045q.133-.378.4-.555.29-.178.733-.178h5.978q.422 0 .69.178.288.177.421.555l1.934 5.045q.443 1.155.644 2.022.222.867.222 1.533V31.2q0 .423-.2.622-.177.178-.6.178h-3.355q-.445 0-.667-.178-.2-.2-.2-.622v-3.111h-3.933zM38.192 32h-3.6q-.422 0-.622-.178-.178-.2-.178-.622V20.289h-3.266q-.423 0-.623-.178-.177-.2-.177-.622V16.8q0-.423.177-.6.2-.2.623-.2h11.733q.421 0 .6.2.2.178.2.6v2.689q0 .422-.2.622-.179.178-.6.178h-3.267V31.2q0 .423-.2.622-.177.178-.6.178M23.822 32H16.8q-.423 0-.622-.178-.178-.2-.178-.622v-2.6q0-.423.178-.6.2-.2.622-.2h5.978q.288 0 .422-.178a.74.74 0 0 0 .156-.466q0-.378-.156-.556-.134-.178-.422-.2l-3.334-.467q-1.556-.222-2.51-1.022-.934-.8-.934-2.667v-2.333q0-1.89 1.222-2.889Q18.445 16 20.6 16h6.222q.423 0 .6.2.2.178.2.6v2.644q0 .423-.2.623-.177.177-.6.177h-5.178a.53.53 0 0 0-.444.2.68.68 0 0 0-.156.467q0 .29.156.489a.6.6 0 0 0 .444.222l3.312.445q1.556.222 2.51 1.022.957.8.956 2.667v2.333q0 1.89-1.244 2.911-1.223 1-3.356 1"
|
|
58
|
+
})
|
|
59
|
+
]
|
|
60
|
+
});
|
|
61
|
+
});
|
|
62
|
+
Logo.displayName = "Logo";
|
|
63
|
+
//#endregion
|
|
64
|
+
export { Logo };
|
|
65
|
+
|
|
66
|
+
//# sourceMappingURL=Logo2.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Logo2.mjs","names":[],"sources":["../../src/Logo/Logo.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Logo.css';\n\nexport interface LogoProps extends React.SVGProps<SVGSVGElement> {\n /**\n * Accessible naam via <title> in de SVG.\n * Niet gerenderd wanneer aria-hidden={true}.\n * @default 'Starter Kit'\n */\n title?: string;\n}\n\n/**\n * Logo component\n * Rendert het Starter Kit-logo als inline SVG met theme-aware kleuren via design tokens.\n *\n * De twee kleurlagen zijn gekoppeld aan tokens:\n * - dsn-logo__primary — achtergrondrechthoek + letterpaden (merkkleur van het actieve thema)\n * - dsn-logo__label — binnenste rechthoek (documentachtergrondkleur, doorkijkje-effect)\n *\n * @example\n * // Standalone — screenreader leest de title\n * <Logo />\n *\n * // Decoratief — in een link, omringende context levert de accessible name\n * <a href=\"/\">\n * <Logo aria-hidden={true} />\n * <span className=\"dsn-visually-hidden\">Starter Kit — terug naar homepage</span>\n * </a>\n *\n * // Custom title (bijv. na white-label herbranding)\n * <Logo title=\"Mijn Organisatie\" />\n */\nexport const Logo = React.forwardRef<SVGSVGElement, LogoProps>(\n (\n { className, title = 'Starter Kit', 'aria-hidden': ariaHidden, ...props },\n ref\n ) => {\n const titleId = useId();\n const isDecorative = ariaHidden === true || ariaHidden === 'true';\n\n return (\n <svg\n ref={ref}\n className={classNames('dsn-logo', className)}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"186\"\n height=\"48\"\n viewBox=\"0 0 186 48\"\n fill=\"none\"\n role={isDecorative ? undefined : 'img'}\n aria-labelledby={isDecorative ? undefined : titleId}\n aria-hidden={isDecorative ? true : undefined}\n {...props}\n >\n {!isDecorative && <title id={titleId}>{title}</title>}\n {/* Achtergrondrechthoek (primaire kleur) */}\n <path className=\"dsn-logo__primary\" d=\"M0 0h185.491v48H0z\" />\n {/* Binnenste label (documentachtergrondkleur) */}\n <path className=\"dsn-logo__label\" d=\"M8 8h169.491v32H8z\" />\n {/* Letterpaden (primaire kleur) */}\n <path\n className=\"dsn-logo__primary\"\n d=\"M164.624 32h-3.6q-.423 0-.622-.178-.178-.2-.178-.622V20.289h-3.267q-.422 0-.622-.178-.178-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h11.734q.422 0 .6.2.2.178.2.6v2.689q0 .422-.2.622-.178.178-.6.178h-3.267V31.2q0 .423-.2.622-.178.178-.6.178M144.059 32q-.423 0-.622-.178-.178-.2-.178-.622v-2.644q0-.423.178-.6.2-.2.622-.2h2.2v-7.467h-2.2q-.423 0-.622-.178-.178-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h9.466q.423 0 .6.2.2.178.2.6v2.689q0 .422-.2.622-.177.178-.6.178h-2.155v7.467h2.155q.423 0 .6.2.2.177.2.6V31.2q0 .423-.2.622-.177.178-.6.178zM131.279 32h-3.445q-.422 0-.622-.178-.178-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h3.445q.421 0 .6.2.2.178.2.6v5.111h.889l2.288-5.178q.156-.399.423-.555.266-.178.689-.178h3.422q.378 0 .511.2.133.178-.022.533l-2.267 5.178q1.245.066 1.978.889.755.8.755 2.133V31.2q0 .423-.2.622-.177.178-.6.178h-3.422q-.422 0-.622-.178-.178-.2-.178-.622v-4.333q0-.356-.178-.556-.177-.2-.533-.2h-2.933V31.2q0 .423-.2.622-.179.178-.6.178M110.551 20v2.844h1.666q.578 0 .778-.288.2-.312.2-.756v-.756q0-.444-.2-.733-.2-.31-.778-.311zm-.8 12h-3.423q-.422 0-.622-.178-.178-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h7.4q2.49 0 3.423 1.044.955 1.022.955 2.667v1.022q0 .934-.289 1.6-.267.645-.955.934 1.2.134 1.933.977.756.845.756 2.245V31.2q0 .423-.2.622-.178.178-.6.178h-3.445q-.422 0-.622-.178-.178-.2-.178-.622v-3.4q0-.489-.2-.711-.177-.245-.644-.245h-3.111V31.2q0 .423-.2.622-.178.178-.6.178M102.099 32h-10.31q-.423 0-.623-.178-.177-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2H102.1q.423 0 .6.2.2.178.2.6v2.6q0 .423-.2.622-.177.178-.6.178h-6.133v1.711h4.333q.423 0 .6.2.2.178.2.6v2.378q0 .422-.2.622-.177.178-.6.178h-4.333V27.8h6.133q.423 0 .6.2.2.178.2.6v2.6q0 .423-.2.622-.177.178-.6.178M83.96 32h-3.6q-.423 0-.622-.178-.178-.2-.178-.622V20.289h-3.267q-.422 0-.622-.178-.178-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h11.733q.423 0 .6.2.2.178.2.6v2.689q0 .422-.2.622-.177.178-.6.178H84.76V31.2q0 .423-.2.622-.178.178-.6.178M65.585 20v2.844h1.666q.579 0 .778-.288.2-.312.2-.756v-.756q0-.444-.2-.733-.2-.31-.778-.311zm-.8 12h-3.422q-.423 0-.623-.178-.177-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h7.4q2.49 0 3.423 1.044.955 1.022.955 2.667v1.022q0 .934-.289 1.6-.266.645-.955.934 1.2.134 1.933.977.756.845.756 2.245V31.2q0 .423-.2.622-.178.178-.6.178H70.34q-.422 0-.622-.178-.177-.2-.178-.622v-3.4q0-.489-.2-.711-.177-.245-.644-.245h-3.111V31.2q0 .423-.2.622-.178.178-.6.178M50.13 20.667l-1.044 3.377h3.489l-1.045-3.377a.76.76 0 0 0-.2-.29.3.3 0 0 0-.222-.088h-.555q-.134 0-.245.089a1 1 0 0 0-.178.289M48.864 31.2q0 .423-.2.622-.179.178-.6.178h-3.267q-.422 0-.622-.178-.178-.2-.178-.622v-5.867q0-.666.2-1.533.222-.867.667-2.022l1.933-5.045q.133-.378.4-.555.29-.178.733-.178h5.978q.422 0 .69.178.288.177.421.555l1.934 5.045q.443 1.155.644 2.022.222.867.222 1.533V31.2q0 .423-.2.622-.177.178-.6.178h-3.355q-.445 0-.667-.178-.2-.2-.2-.622v-3.111h-3.933zM38.192 32h-3.6q-.422 0-.622-.178-.178-.2-.178-.622V20.289h-3.266q-.423 0-.623-.178-.177-.2-.177-.622V16.8q0-.423.177-.6.2-.2.623-.2h11.733q.421 0 .6.2.2.178.2.6v2.689q0 .422-.2.622-.179.178-.6.178h-3.267V31.2q0 .423-.2.622-.177.178-.6.178M23.822 32H16.8q-.423 0-.622-.178-.178-.2-.178-.622v-2.6q0-.423.178-.6.2-.2.622-.2h5.978q.288 0 .422-.178a.74.74 0 0 0 .156-.466q0-.378-.156-.556-.134-.178-.422-.2l-3.334-.467q-1.556-.222-2.51-1.022-.934-.8-.934-2.667v-2.333q0-1.89 1.222-2.889Q18.445 16 20.6 16h6.222q.423 0 .6.2.2.178.2.6v2.644q0 .423-.2.623-.177.177-.6.177h-5.178a.53.53 0 0 0-.444.2.68.68 0 0 0-.156.467q0 .29.156.489a.6.6 0 0 0 .444.222l3.312.445q1.556.222 2.51 1.022.957.8.956 2.667v2.333q0 1.89-1.244 2.911-1.223 1-3.356 1\"\n />\n </svg>\n );\n }\n);\n\nLogo.displayName = 'Logo';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAa,OAAO,MAAM,YAEtB,EAAE,WAAW,QAAQ,eAAe,eAAe,YAAY,GAAG,SAClE,QACG;CACH,MAAM,UAAU,MAAM;CACtB,MAAM,eAAe,eAAe,QAAQ,eAAe;CAE3D,OACE,qBAAC,OAAD;EACO;EACL,WAAW,WAAW,YAAY,SAAS;EAC3C,OAAM;EACN,OAAM;EACN,QAAO;EACP,SAAQ;EACR,MAAK;EACL,MAAM,eAAe,KAAA,IAAY;EACjC,mBAAiB,eAAe,KAAA,IAAY;EAC5C,eAAa,eAAe,OAAO,KAAA;EACnC,GAAI;EAXN,UAAA;GAaG,CAAC,gBAAgB,oBAAC,SAAD;IAAO,IAAI;IAAU,UAAA;GAAa,CAAA;GAEpD,oBAAC,QAAD;IAAM,WAAU;IAAoB,GAAE;GAAsB,CAAA;GAE5D,oBAAC,QAAD;IAAM,WAAU;IAAkB,GAAE;GAAsB,CAAA;GAE1D,oBAAC,QAAD;IACE,WAAU;IACV,GAAE;GACH,CAAA;EACE;;AAET,CACF;AAEA,KAAK,cAAc"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
//#region src/Menu/Menu.d.ts
|
|
3
|
+
type MenuOrientation = 'vertical' | 'horizontal';
|
|
4
|
+
interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
|
|
5
|
+
/**
|
|
6
|
+
* Bepaalt de lay-out van de items.
|
|
7
|
+
* - `vertical` (standaard): items onder elkaar, volledige breedte
|
|
8
|
+
* - `horizontal`: items naast elkaar, breedte op inhoud
|
|
9
|
+
* @default 'vertical'
|
|
10
|
+
*/
|
|
11
|
+
orientation?: MenuOrientation;
|
|
12
|
+
/**
|
|
13
|
+
* Geeft aan dat level-1 items een `iconStart` hebben.
|
|
14
|
+
* Level 2+ items worden dan ingesprongen zodat hun tekst uitlijnt met het label van level 1.
|
|
15
|
+
* @default false
|
|
16
|
+
*/
|
|
17
|
+
iconStart?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* `MenuLink`- en/of `MenuButton`-items (verplicht)
|
|
20
|
+
*/
|
|
21
|
+
children: React.ReactNode;
|
|
22
|
+
/**
|
|
23
|
+
* Aanvullende CSS-klassen voor het `<ul>`-element
|
|
24
|
+
*/
|
|
25
|
+
className?: string;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Menu component
|
|
29
|
+
* Containercomponent voor MenuLink- en MenuButton-items.
|
|
30
|
+
* Rendert een `<ul>` met verticale (standaard) of horizontale oriëntatie.
|
|
31
|
+
*
|
|
32
|
+
* Gebruik `Menu` altijd binnen een semantisch element zoals `<nav>` —
|
|
33
|
+
* dit is de verantwoordelijkheid van de ouder.
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* ```tsx
|
|
37
|
+
* // Verticaal (standaard)
|
|
38
|
+
* <nav aria-label="Hoofdnavigatie">
|
|
39
|
+
* <Menu>
|
|
40
|
+
* <MenuLink href="/home">Home</MenuLink>
|
|
41
|
+
* <MenuLink href="/over">Over ons</MenuLink>
|
|
42
|
+
* <MenuButton onClick={handleLogout}>Uitloggen</MenuButton>
|
|
43
|
+
* </Menu>
|
|
44
|
+
* </nav>
|
|
45
|
+
*
|
|
46
|
+
* // Horizontaal
|
|
47
|
+
* <nav aria-label="Paginanavigatie">
|
|
48
|
+
* <Menu orientation="horizontal">
|
|
49
|
+
* <MenuLink href="/home" current>Home</MenuLink>
|
|
50
|
+
* <MenuLink href="/over">Over ons</MenuLink>
|
|
51
|
+
* </Menu>
|
|
52
|
+
* </nav>
|
|
53
|
+
* ```
|
|
54
|
+
*/
|
|
55
|
+
declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>>;
|
|
56
|
+
//#endregion
|
|
57
|
+
export { Menu, MenuOrientation, MenuProps };
|
|
58
|
+
//# sourceMappingURL=Menu.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Menu.d.mts","names":[],"sources":["../../src/Menu/Menu.tsx"],"mappings":";;KAIY;UAEK,kBAAkB,MAAM,eAAe;;;;;;;EAOtD,cAAc;;;;;;EAOd;;;;EAKA,UAAU,MAAM;;;;EAKhB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BW,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/* empty css */
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { classNames } from "@dsn-starter-kit/core";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
//#region src/Menu/Menu.tsx
|
|
6
|
+
/**
|
|
7
|
+
* Menu component
|
|
8
|
+
* Containercomponent voor MenuLink- en MenuButton-items.
|
|
9
|
+
* Rendert een `<ul>` met verticale (standaard) of horizontale oriëntatie.
|
|
10
|
+
*
|
|
11
|
+
* Gebruik `Menu` altijd binnen een semantisch element zoals `<nav>` —
|
|
12
|
+
* dit is de verantwoordelijkheid van de ouder.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```tsx
|
|
16
|
+
* // Verticaal (standaard)
|
|
17
|
+
* <nav aria-label="Hoofdnavigatie">
|
|
18
|
+
* <Menu>
|
|
19
|
+
* <MenuLink href="/home">Home</MenuLink>
|
|
20
|
+
* <MenuLink href="/over">Over ons</MenuLink>
|
|
21
|
+
* <MenuButton onClick={handleLogout}>Uitloggen</MenuButton>
|
|
22
|
+
* </Menu>
|
|
23
|
+
* </nav>
|
|
24
|
+
*
|
|
25
|
+
* // Horizontaal
|
|
26
|
+
* <nav aria-label="Paginanavigatie">
|
|
27
|
+
* <Menu orientation="horizontal">
|
|
28
|
+
* <MenuLink href="/home" current>Home</MenuLink>
|
|
29
|
+
* <MenuLink href="/over">Over ons</MenuLink>
|
|
30
|
+
* </Menu>
|
|
31
|
+
* </nav>
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
const Menu = React.forwardRef(({ orientation = "vertical", iconStart = false, className, children, ...props }, ref) => {
|
|
35
|
+
const classes = classNames("dsn-menu", orientation === "horizontal" && "dsn-menu--horizontal", iconStart && "dsn-menu--icon-start", className);
|
|
36
|
+
return /* @__PURE__ */ jsx("ul", {
|
|
37
|
+
ref,
|
|
38
|
+
className: classes,
|
|
39
|
+
...props,
|
|
40
|
+
children
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
Menu.displayName = "Menu";
|
|
44
|
+
//#endregion
|
|
45
|
+
export { Menu };
|
|
46
|
+
|
|
47
|
+
//# sourceMappingURL=Menu2.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Menu2.mjs","names":[],"sources":["../../src/Menu/Menu.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Menu.css';\n\nexport type MenuOrientation = 'vertical' | 'horizontal';\n\nexport interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {\n /**\n * Bepaalt de lay-out van de items.\n * - `vertical` (standaard): items onder elkaar, volledige breedte\n * - `horizontal`: items naast elkaar, breedte op inhoud\n * @default 'vertical'\n */\n orientation?: MenuOrientation;\n\n /**\n * Geeft aan dat level-1 items een `iconStart` hebben.\n * Level 2+ items worden dan ingesprongen zodat hun tekst uitlijnt met het label van level 1.\n * @default false\n */\n iconStart?: boolean;\n\n /**\n * `MenuLink`- en/of `MenuButton`-items (verplicht)\n */\n children: React.ReactNode;\n\n /**\n * Aanvullende CSS-klassen voor het `<ul>`-element\n */\n className?: string;\n}\n\n/**\n * Menu component\n * Containercomponent voor MenuLink- en MenuButton-items.\n * Rendert een `<ul>` met verticale (standaard) of horizontale oriëntatie.\n *\n * Gebruik `Menu` altijd binnen een semantisch element zoals `<nav>` —\n * dit is de verantwoordelijkheid van de ouder.\n *\n * @example\n * ```tsx\n * // Verticaal (standaard)\n * <nav aria-label=\"Hoofdnavigatie\">\n * <Menu>\n * <MenuLink href=\"/home\">Home</MenuLink>\n * <MenuLink href=\"/over\">Over ons</MenuLink>\n * <MenuButton onClick={handleLogout}>Uitloggen</MenuButton>\n * </Menu>\n * </nav>\n *\n * // Horizontaal\n * <nav aria-label=\"Paginanavigatie\">\n * <Menu orientation=\"horizontal\">\n * <MenuLink href=\"/home\" current>Home</MenuLink>\n * <MenuLink href=\"/over\">Over ons</MenuLink>\n * </Menu>\n * </nav>\n * ```\n */\nexport const Menu = React.forwardRef<HTMLUListElement, MenuProps>(\n (\n {\n orientation = 'vertical',\n iconStart = false,\n className,\n children,\n ...props\n },\n ref\n ) => {\n const classes = classNames(\n 'dsn-menu',\n orientation === 'horizontal' && 'dsn-menu--horizontal',\n iconStart && 'dsn-menu--icon-start',\n className\n );\n\n return (\n <ul ref={ref} className={classes} {...props}>\n {children}\n </ul>\n );\n }\n);\n\nMenu.displayName = 'Menu';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAa,OAAO,MAAM,YAEtB,EACE,cAAc,YACd,YAAY,OACZ,WACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,UAAU,WACd,YACA,gBAAgB,gBAAgB,wBAChC,aAAa,wBACb,SACF;CAEA,OACE,oBAAC,MAAD;EAAS;EAAK,WAAW;EAAS,GAAI;EACnC;CACC,CAAA;AAER,CACF;AAEA,KAAK,cAAc"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
//#region src/MenuButton/MenuButton.d.ts
|
|
3
|
+
interface MenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
4
|
+
/**
|
|
5
|
+
* Icoon links van het label
|
|
6
|
+
*/
|
|
7
|
+
iconStart?: React.ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Icoon rechts van het label
|
|
10
|
+
*/
|
|
11
|
+
iconEnd?: React.ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* DotBadge element voor statusindicatie (bijv. nieuw/ongelezen zonder getal).
|
|
14
|
+
* Verwacht een `<DotBadge>` component.
|
|
15
|
+
*/
|
|
16
|
+
dotBadge?: React.ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* Zichtbare knoptekst
|
|
19
|
+
*/
|
|
20
|
+
children?: React.ReactNode;
|
|
21
|
+
/**
|
|
22
|
+
* Aanvullende CSS-klassen voor het `<li>`-element
|
|
23
|
+
*/
|
|
24
|
+
className?: string;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* MenuButton component
|
|
28
|
+
* Navigatieknop voor JavaScript-acties — semantisch een `<button>`, visueel consistent met MenuLink.
|
|
29
|
+
*
|
|
30
|
+
* Gebruik in een `<ul>`-element wanneer de actie geen URL-navigatie is maar een JS-handeling triggert
|
|
31
|
+
* (bijv. uitloggen, een modal openen of een sectie in/uitklappen).
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* ```tsx
|
|
35
|
+
* // Basisgebruik
|
|
36
|
+
* <MenuButton onClick={handleLogout}>Uitloggen</MenuButton>
|
|
37
|
+
*
|
|
38
|
+
* // Met icoon start
|
|
39
|
+
* <MenuButton iconStart={<Icon name="settings" aria-hidden />}>
|
|
40
|
+
* Instellingen
|
|
41
|
+
* </MenuButton>
|
|
42
|
+
*
|
|
43
|
+
* // Met DotBadge (statusindicatie)
|
|
44
|
+
* <MenuButton
|
|
45
|
+
* iconStart={<Icon name="bell" aria-hidden />}
|
|
46
|
+
* dotBadge={<DotBadge variant="negative" />}
|
|
47
|
+
* >
|
|
48
|
+
* Meldingen
|
|
49
|
+
* <span className="dsn-visually-hidden">, nieuwe meldingen beschikbaar</span>
|
|
50
|
+
* </MenuButton>
|
|
51
|
+
* ```
|
|
52
|
+
*/
|
|
53
|
+
declare const MenuButton: React.ForwardRefExoticComponent<MenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
54
|
+
//#endregion
|
|
55
|
+
export { MenuButton, MenuButtonProps };
|
|
56
|
+
//# sourceMappingURL=MenuButton.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MenuButton.d.mts","names":[],"sources":["../../src/MenuButton/MenuButton.tsx"],"mappings":";;UAIiB,wBAAwB,MAAM,qBAAqB;;;;EAIlE,YAAY,MAAM;;;;EAKlB,UAAU,MAAM;;;;;EAMhB,WAAW,MAAM;;;;EAKjB,WAAW,MAAM;;;;EAKjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8BW,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/* empty css */
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { classNames } from "@dsn-starter-kit/core";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
//#region src/MenuButton/MenuButton.tsx
|
|
6
|
+
/**
|
|
7
|
+
* MenuButton component
|
|
8
|
+
* Navigatieknop voor JavaScript-acties — semantisch een `<button>`, visueel consistent met MenuLink.
|
|
9
|
+
*
|
|
10
|
+
* Gebruik in een `<ul>`-element wanneer de actie geen URL-navigatie is maar een JS-handeling triggert
|
|
11
|
+
* (bijv. uitloggen, een modal openen of een sectie in/uitklappen).
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* // Basisgebruik
|
|
16
|
+
* <MenuButton onClick={handleLogout}>Uitloggen</MenuButton>
|
|
17
|
+
*
|
|
18
|
+
* // Met icoon start
|
|
19
|
+
* <MenuButton iconStart={<Icon name="settings" aria-hidden />}>
|
|
20
|
+
* Instellingen
|
|
21
|
+
* </MenuButton>
|
|
22
|
+
*
|
|
23
|
+
* // Met DotBadge (statusindicatie)
|
|
24
|
+
* <MenuButton
|
|
25
|
+
* iconStart={<Icon name="bell" aria-hidden />}
|
|
26
|
+
* dotBadge={<DotBadge variant="negative" />}
|
|
27
|
+
* >
|
|
28
|
+
* Meldingen
|
|
29
|
+
* <span className="dsn-visually-hidden">, nieuwe meldingen beschikbaar</span>
|
|
30
|
+
* </MenuButton>
|
|
31
|
+
* ```
|
|
32
|
+
*/
|
|
33
|
+
const MenuButton = React.forwardRef(({ iconStart, iconEnd, dotBadge, className, children, type = "button", ...props }, ref) => {
|
|
34
|
+
const liClasses = classNames("dsn-menu-button", className);
|
|
35
|
+
return /* @__PURE__ */ jsx("li", {
|
|
36
|
+
className: liClasses,
|
|
37
|
+
children: /* @__PURE__ */ jsxs("button", {
|
|
38
|
+
ref,
|
|
39
|
+
type,
|
|
40
|
+
className: "dsn-menu-button__button",
|
|
41
|
+
...props,
|
|
42
|
+
children: [
|
|
43
|
+
iconStart,
|
|
44
|
+
/* @__PURE__ */ jsxs("span", {
|
|
45
|
+
className: "dsn-menu-button__label",
|
|
46
|
+
children: [children, dotBadge]
|
|
47
|
+
}),
|
|
48
|
+
iconEnd
|
|
49
|
+
]
|
|
50
|
+
})
|
|
51
|
+
});
|
|
52
|
+
});
|
|
53
|
+
MenuButton.displayName = "MenuButton";
|
|
54
|
+
//#endregion
|
|
55
|
+
export { MenuButton };
|
|
56
|
+
|
|
57
|
+
//# sourceMappingURL=MenuButton2.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MenuButton2.mjs","names":[],"sources":["../../src/MenuButton/MenuButton.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './MenuButton.css';\n\nexport interface MenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * Icoon links van het label\n */\n iconStart?: React.ReactNode;\n\n /**\n * Icoon rechts van het label\n */\n iconEnd?: React.ReactNode;\n\n /**\n * DotBadge element voor statusindicatie (bijv. nieuw/ongelezen zonder getal).\n * Verwacht een `<DotBadge>` component.\n */\n dotBadge?: React.ReactNode;\n\n /**\n * Zichtbare knoptekst\n */\n children?: React.ReactNode;\n\n /**\n * Aanvullende CSS-klassen voor het `<li>`-element\n */\n className?: string;\n}\n\n/**\n * MenuButton component\n * Navigatieknop voor JavaScript-acties — semantisch een `<button>`, visueel consistent met MenuLink.\n *\n * Gebruik in een `<ul>`-element wanneer de actie geen URL-navigatie is maar een JS-handeling triggert\n * (bijv. uitloggen, een modal openen of een sectie in/uitklappen).\n *\n * @example\n * ```tsx\n * // Basisgebruik\n * <MenuButton onClick={handleLogout}>Uitloggen</MenuButton>\n *\n * // Met icoon start\n * <MenuButton iconStart={<Icon name=\"settings\" aria-hidden />}>\n * Instellingen\n * </MenuButton>\n *\n * // Met DotBadge (statusindicatie)\n * <MenuButton\n * iconStart={<Icon name=\"bell\" aria-hidden />}\n * dotBadge={<DotBadge variant=\"negative\" />}\n * >\n * Meldingen\n * <span className=\"dsn-visually-hidden\">, nieuwe meldingen beschikbaar</span>\n * </MenuButton>\n * ```\n */\nexport const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(\n (\n {\n iconStart,\n iconEnd,\n dotBadge,\n className,\n children,\n type = 'button',\n ...props\n },\n ref\n ) => {\n const liClasses = classNames('dsn-menu-button', className);\n\n return (\n <li className={liClasses}>\n <button\n ref={ref}\n type={type}\n className=\"dsn-menu-button__button\"\n {...props}\n >\n {iconStart}\n <span className=\"dsn-menu-button__label\">\n {children}\n {dotBadge}\n </span>\n {iconEnd}\n </button>\n </li>\n );\n }\n);\n\nMenuButton.displayName = 'MenuButton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DA,MAAa,aAAa,MAAM,YAE5B,EACE,WACA,SACA,UACA,WACA,UACA,OAAO,UACP,GAAG,SAEL,QACG;CACH,MAAM,YAAY,WAAW,mBAAmB,SAAS;CAEzD,OACE,oBAAC,MAAD;EAAI,WAAW;EACb,UAAA,qBAAC,UAAD;GACO;GACC;GACN,WAAU;GACV,GAAI;GAJN,UAAA;IAMG;IACD,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACG,UACA,QACG;;IACL;GACK;;CACN,CAAA;AAER,CACF;AAEA,WAAW,cAAc"}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
//#region src/MenuLink/MenuLink.d.ts
|
|
3
|
+
type MenuLinkLevel = 1 | 2 | 3 | 4;
|
|
4
|
+
interface MenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
5
|
+
/**
|
|
6
|
+
* Navigatie-URL van de link
|
|
7
|
+
*/
|
|
8
|
+
href?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Hiërarchisch niveau — bepaalt de `padding-inline-start` inspringing
|
|
11
|
+
* @default 1
|
|
12
|
+
*/
|
|
13
|
+
level?: MenuLinkLevel;
|
|
14
|
+
/**
|
|
15
|
+
* Markeert de actieve/huidige pagina.
|
|
16
|
+
* Voegt `aria-current="page"` toe aan het `<a>`-element.
|
|
17
|
+
* @default false
|
|
18
|
+
*/
|
|
19
|
+
current?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Icoon links van het label
|
|
22
|
+
*/
|
|
23
|
+
iconStart?: React.ReactNode;
|
|
24
|
+
/**
|
|
25
|
+
* Icoon rechts van het label — gebruik hier bij voorkeur geen NumberBadge (zie `numberBadge`)
|
|
26
|
+
*/
|
|
27
|
+
iconEnd?: React.ReactNode;
|
|
28
|
+
/**
|
|
29
|
+
* NumberBadge element rechts van het label (naast iconEnd)
|
|
30
|
+
* Verwacht een `<NumberBadge>` component.
|
|
31
|
+
*/
|
|
32
|
+
numberBadge?: React.ReactNode;
|
|
33
|
+
/**
|
|
34
|
+
* Toont een uitklapknop naast de link (voor subnavigatie).
|
|
35
|
+
* @default false
|
|
36
|
+
*/
|
|
37
|
+
subItems?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Geeft aan of de subnavigatie momenteel uitgevouwen is.
|
|
40
|
+
* Alleen relevant wanneer `subItems` true is.
|
|
41
|
+
* @default false
|
|
42
|
+
*/
|
|
43
|
+
expanded?: boolean;
|
|
44
|
+
/**
|
|
45
|
+
* Callback die aangeroepen wordt wanneer op de uitklapknop geklikt wordt.
|
|
46
|
+
*/
|
|
47
|
+
onExpandToggle?: () => void;
|
|
48
|
+
/**
|
|
49
|
+
* Zichtbare linktekst — ook gebruikt voor de toegankelijke naam van de uitklapknop
|
|
50
|
+
*/
|
|
51
|
+
children?: React.ReactNode;
|
|
52
|
+
/**
|
|
53
|
+
* Aanvullende CSS-klassen voor het `<li>`-element
|
|
54
|
+
*/
|
|
55
|
+
className?: string;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* MenuLink component
|
|
59
|
+
* Navigatielink met niveau-hiërarchie, actieve staat en uitklapbare subnavigatie.
|
|
60
|
+
* Semantisch een `<a>`, visueel consistent met MenuButton.
|
|
61
|
+
*
|
|
62
|
+
* Gebruik in een `<ul>`-element (het `<nav>`-element met lijst).
|
|
63
|
+
*
|
|
64
|
+
* @example
|
|
65
|
+
* ```tsx
|
|
66
|
+
* // Basisgebruik (level 1)
|
|
67
|
+
* <MenuLink href="/dashboard">Dashboard</MenuLink>
|
|
68
|
+
*
|
|
69
|
+
* // Actieve pagina
|
|
70
|
+
* <MenuLink href="/rapporten" current>Rapporten</MenuLink>
|
|
71
|
+
*
|
|
72
|
+
* // Level 2 (subpagina)
|
|
73
|
+
* <MenuLink href="/rapporten/maandelijks" level={2}>Maandelijks</MenuLink>
|
|
74
|
+
*
|
|
75
|
+
* // Met icoon en NumberBadge
|
|
76
|
+
* <MenuLink
|
|
77
|
+
* href="/inbox"
|
|
78
|
+
* iconStart={<Icon name="mail" aria-hidden />}
|
|
79
|
+
* numberBadge={<NumberBadge variant="negative">5</NumberBadge>}
|
|
80
|
+
* >
|
|
81
|
+
* Inbox
|
|
82
|
+
* </MenuLink>
|
|
83
|
+
*
|
|
84
|
+
* // Met uitklapknop
|
|
85
|
+
* <MenuLink
|
|
86
|
+
* href="/rapporten"
|
|
87
|
+
* subItems
|
|
88
|
+
* expanded={isExpanded}
|
|
89
|
+
* onExpandToggle={() => setIsExpanded(!isExpanded)}
|
|
90
|
+
* >
|
|
91
|
+
* Rapporten
|
|
92
|
+
* </MenuLink>
|
|
93
|
+
* ```
|
|
94
|
+
*/
|
|
95
|
+
declare const MenuLink: React.ForwardRefExoticComponent<MenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
96
|
+
//#endregion
|
|
97
|
+
export { MenuLink, MenuLinkLevel, MenuLinkProps };
|
|
98
|
+
//# sourceMappingURL=MenuLink.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MenuLink.d.mts","names":[],"sources":["../../src/MenuLink/MenuLink.tsx"],"mappings":";;KAKY;UAEK,sBAAsB,MAAM,qBAAqB;;;;EAIhE;;;;;EAMA,QAAQ;;;;;;EAOR;;;;EAKA,YAAY,MAAM;;;;EAKlB,UAAU,MAAM;;;;;EAMhB,cAAc,MAAM;;;;;EAMpB;;;;;;EAOA;;;;EAKA;;;;EAKA,WAAW,MAAM;;;;EAKjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAyCW,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA"}
|