@postenbring/hedwig-react 0.0.81 → 0.0.82
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/dist/accordion/accordion-content.d.ts +6 -2
- package/dist/accordion/accordion-content.d.ts.map +1 -0
- package/dist/accordion/accordion-header.d.ts +6 -2
- package/dist/accordion/accordion-header.d.ts.map +1 -0
- package/dist/accordion/accordion-item.d.ts +24 -3
- package/dist/accordion/accordion-item.d.ts.map +1 -0
- package/dist/accordion/accordion.d.ts +44 -2
- package/dist/accordion/accordion.d.ts.map +1 -0
- package/dist/accordion/accordion.js +102 -4
- package/dist/accordion/accordion.js.map +1 -1
- package/dist/accordion/accordion.mjs +5 -1
- package/dist/accordion/context.d.ts +7 -2
- package/dist/accordion/context.d.ts.map +1 -0
- package/dist/accordion/index.d.ts +9 -9
- package/dist/accordion/index.d.ts.map +1 -0
- package/dist/accordion/index.js +52 -53
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs +7 -7
- package/dist/badge/badge.d.ts +21 -5
- package/dist/badge/badge.d.ts.map +1 -0
- package/dist/badge/index.d.ts +3 -6
- package/dist/badge/index.d.ts.map +1 -0
- package/dist/box/box.d.ts +50 -4
- package/dist/box/box.d.ts.map +1 -0
- package/dist/box/box.js +15 -14
- package/dist/box/box.js.map +1 -1
- package/dist/box/box.mjs +1 -1
- package/dist/box/index.d.ts +3 -4
- package/dist/box/index.d.ts.map +1 -0
- package/dist/box/index.js +16 -19
- package/dist/box/index.js.map +1 -1
- package/dist/box/index.mjs +4 -5
- package/dist/breadcrumbs/breadcrumbs.d.ts +33 -2
- package/dist/breadcrumbs/breadcrumbs.d.ts.map +1 -0
- package/dist/breadcrumbs/index.d.ts +3 -2
- package/dist/breadcrumbs/index.d.ts.map +1 -0
- package/dist/button/button.d.ts +33 -3
- package/dist/button/button.d.ts.map +1 -0
- package/dist/button/index.d.ts +3 -3
- package/dist/button/index.d.ts.map +1 -0
- package/dist/card/card.d.ts +69 -12
- package/dist/card/card.d.ts.map +1 -0
- package/dist/card/card.js +17 -6
- package/dist/card/card.js.map +1 -1
- package/dist/card/card.mjs +1 -1
- package/dist/card/index.d.ts +3 -12
- package/dist/card/index.d.ts.map +1 -0
- package/dist/card/index.js +18 -19
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs +4 -5
- package/dist/{chunk-XC3UHH2U.mjs → chunk-3WVRY6CC.mjs} +4 -4
- package/dist/{chunk-XC3UHH2U.mjs.map → chunk-3WVRY6CC.mjs.map} +1 -1
- package/dist/{chunk-GSJPTZT3.mjs → chunk-6AGDK5V3.mjs} +34 -19
- package/dist/chunk-6AGDK5V3.mjs.map +1 -0
- package/dist/{chunk-3MQKXNZ6.mjs → chunk-7UD72WOC.mjs} +13 -1
- package/dist/chunk-7UD72WOC.mjs.map +1 -0
- package/dist/chunk-7YWW46R3.mjs +1 -0
- package/dist/chunk-7YWW46R3.mjs.map +1 -0
- package/dist/{chunk-ENKVTAJB.mjs → chunk-AJWSQEDP.mjs} +18 -17
- package/dist/chunk-AJWSQEDP.mjs.map +1 -0
- package/dist/chunk-ARHJZUZG.mjs +1 -0
- package/dist/chunk-ARHJZUZG.mjs.map +1 -0
- package/dist/chunk-BCFV6VOE.mjs +1 -0
- package/dist/chunk-BCFV6VOE.mjs.map +1 -0
- package/dist/{chunk-7JRS4WEB.mjs → chunk-C34HEQXO.mjs} +33 -29
- package/dist/chunk-C34HEQXO.mjs.map +1 -0
- package/dist/{chunk-PLXB3TNA.mjs → chunk-D7QPJIUZ.mjs} +5 -5
- package/dist/{chunk-PLXB3TNA.mjs.map → chunk-D7QPJIUZ.mjs.map} +1 -1
- package/dist/chunk-FYFJ75NX.mjs +1 -0
- package/dist/chunk-FYFJ75NX.mjs.map +1 -0
- package/dist/chunk-G65EYZFQ.mjs +1 -0
- package/dist/chunk-G65EYZFQ.mjs.map +1 -0
- package/dist/chunk-H3E546OT.mjs +1 -0
- package/dist/chunk-H3E546OT.mjs.map +1 -0
- package/dist/chunk-HQVL3ZJ2.mjs +1 -0
- package/dist/chunk-HQVL3ZJ2.mjs.map +1 -0
- package/dist/{chunk-XUWZ4HGD.mjs → chunk-LCJSUBCZ.mjs} +48 -45
- package/dist/chunk-LCJSUBCZ.mjs.map +1 -0
- package/dist/{chunk-KPGSRU4I.mjs → chunk-M3Y3XOGC.mjs} +13 -1
- package/dist/chunk-M3Y3XOGC.mjs.map +1 -0
- package/dist/{chunk-CIHZDFSQ.mjs → chunk-NU6OSFAU.mjs} +20 -9
- package/dist/chunk-NU6OSFAU.mjs.map +1 -0
- package/dist/chunk-RC76SXBP.mjs +1 -0
- package/dist/chunk-RC76SXBP.mjs.map +1 -0
- package/dist/{chunk-TQDUBRCZ.mjs → chunk-SQ63E7KM.mjs} +24 -22
- package/dist/chunk-SQ63E7KM.mjs.map +1 -0
- package/dist/{chunk-ES6ISHOV.mjs → chunk-UP3M3NEZ.mjs} +14 -13
- package/dist/{chunk-ES6ISHOV.mjs.map → chunk-UP3M3NEZ.mjs.map} +1 -1
- package/dist/chunk-ZKMFJZSH.mjs +1 -0
- package/dist/chunk-ZKMFJZSH.mjs.map +1 -0
- package/dist/description-list/description-list.d.ts +42 -2
- package/dist/description-list/description-list.d.ts.map +1 -0
- package/dist/description-list/index.d.ts +3 -2
- package/dist/description-list/index.d.ts.map +1 -0
- package/dist/footer/footer.d.ts +67 -7
- package/dist/footer/footer.d.ts.map +1 -0
- package/dist/footer/footer.js +79 -76
- package/dist/footer/footer.js.map +1 -1
- package/dist/footer/footer.mjs +4 -4
- package/dist/footer/index.d.ts +3 -7
- package/dist/footer/index.d.ts.map +1 -0
- package/dist/footer/index.js +80 -84
- package/dist/footer/index.js.map +1 -1
- package/dist/footer/index.mjs +7 -8
- package/dist/form/checkbox/checkbox.d.ts +28 -2
- package/dist/form/checkbox/checkbox.d.ts.map +1 -0
- package/dist/form/checkbox/index.d.ts +3 -2
- package/dist/form/checkbox/index.d.ts.map +1 -0
- package/dist/form/date-picker/date-picker.d.ts +33 -2
- package/dist/form/date-picker/date-picker.d.ts.map +1 -0
- package/dist/form/date-picker/index.d.ts +3 -2
- package/dist/form/date-picker/index.d.ts.map +1 -0
- package/dist/form/error-message/error-message.d.ts +8 -2
- package/dist/form/error-message/error-message.d.ts.map +1 -0
- package/dist/form/error-message/index.d.ts +3 -2
- package/dist/form/error-message/index.d.ts.map +1 -0
- package/dist/form/fieldset/fieldset.d.ts +22 -3
- package/dist/form/fieldset/fieldset.d.ts.map +1 -0
- package/dist/form/fieldset/index.d.ts +3 -3
- package/dist/form/fieldset/index.d.ts.map +1 -0
- package/dist/form/index.d.ts +9 -20
- package/dist/form/index.d.ts.map +1 -0
- package/dist/form/input/index.d.ts +3 -2
- package/dist/form/input/index.d.ts.map +1 -0
- package/dist/form/input/input.d.ts +5 -2
- package/dist/form/input/input.d.ts.map +1 -0
- package/dist/form/input-group/index.d.ts +3 -2
- package/dist/form/input-group/index.d.ts.map +1 -0
- package/dist/form/input-group/input-group.d.ts +27 -2
- package/dist/form/input-group/input-group.d.ts.map +1 -0
- package/dist/form/radiobutton/index.d.ts +5 -5
- package/dist/form/radiobutton/index.d.ts.map +1 -0
- package/dist/form/radiobutton/radiobutton.d.ts +17 -2
- package/dist/form/radiobutton/radiobutton.d.ts.map +1 -0
- package/dist/form/radiobutton/radiogroup.d.ts +24 -3
- package/dist/form/radiobutton/radiogroup.d.ts.map +1 -0
- package/dist/form/select/index.d.ts +3 -2
- package/dist/form/select/index.d.ts.map +1 -0
- package/dist/form/select/select.d.ts +9 -2
- package/dist/form/select/select.d.ts.map +1 -0
- package/dist/form/textarea/index.d.ts +3 -2
- package/dist/form/textarea/index.d.ts.map +1 -0
- package/dist/form/textarea/textarea.d.ts +5 -2
- package/dist/form/textarea/textarea.d.ts.map +1 -0
- package/dist/help-text/help-text.d.ts +51 -1
- package/dist/help-text/help-text.d.ts.map +1 -0
- package/dist/help-text/help-text.js +17 -20
- package/dist/help-text/help-text.js.map +1 -1
- package/dist/help-text/help-text.mjs +3 -3
- package/dist/help-text/index.d.ts +3 -1
- package/dist/help-text/index.d.ts.map +1 -0
- package/dist/help-text/index.js +17 -20
- package/dist/help-text/index.js.map +1 -1
- package/dist/help-text/index.mjs +3 -3
- package/dist/index-no-css.d.ts +26 -128
- package/dist/index-no-css.d.ts.map +1 -0
- package/dist/index-no-css.js +372 -393
- package/dist/index-no-css.js.map +1 -1
- package/dist/index-no-css.mjs +50 -57
- package/dist/index.d.ts +11 -128
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +372 -393
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +50 -57
- package/dist/index.mjs.map +1 -1
- package/dist/layout/container/container.d.ts +23 -2
- package/dist/layout/container/container.d.ts.map +1 -0
- package/dist/layout/grid/grid.d.ts +101 -4
- package/dist/layout/grid/grid.d.ts.map +1 -0
- package/dist/layout/grid/grid.js +11 -10
- package/dist/layout/grid/grid.js.map +1 -1
- package/dist/layout/grid/grid.mjs +1 -1
- package/dist/layout/grid/index.d.ts +3 -4
- package/dist/layout/grid/index.d.ts.map +1 -0
- package/dist/layout/grid/index.js +12 -15
- package/dist/layout/grid/index.js.map +1 -1
- package/dist/layout/grid/index.mjs +4 -5
- package/dist/layout/index.d.ts +4 -10
- package/dist/layout/index.d.ts.map +1 -0
- package/dist/layout/index.js +12 -15
- package/dist/layout/index.js.map +1 -1
- package/dist/layout/index.mjs +4 -5
- package/dist/layout/responsive.d.ts +10 -2
- package/dist/layout/responsive.d.ts.map +1 -0
- package/dist/layout/spacing.d.ts +33 -3
- package/dist/layout/spacing.d.ts.map +1 -0
- package/dist/layout/stack/index.d.ts +3 -4
- package/dist/layout/stack/index.d.ts.map +1 -0
- package/dist/layout/stack/stack.d.ts +62 -4
- package/dist/layout/stack/stack.d.ts.map +1 -0
- package/dist/link/index.d.ts +3 -2
- package/dist/link/index.d.ts.map +1 -0
- package/dist/link/link.d.ts +20 -2
- package/dist/link/link.d.ts.map +1 -0
- package/dist/list/index.d.ts +5 -5
- package/dist/list/index.d.ts.map +1 -0
- package/dist/list/link-list.d.ts +12 -2
- package/dist/list/link-list.d.ts.map +1 -0
- package/dist/list/list.d.ts +40 -3
- package/dist/list/list.d.ts.map +1 -0
- package/dist/message/index.d.ts +3 -3
- package/dist/message/index.d.ts.map +1 -0
- package/dist/message/index.js +36 -38
- package/dist/message/index.js.map +1 -1
- package/dist/message/index.mjs +5 -6
- package/dist/message/message.d.ts +36 -4
- package/dist/message/message.d.ts.map +1 -0
- package/dist/message/message.js +35 -32
- package/dist/message/message.js.map +1 -1
- package/dist/message/message.mjs +2 -2
- package/dist/modal/index.d.ts +3 -5
- package/dist/modal/index.d.ts.map +1 -0
- package/dist/modal/index.js +60 -62
- package/dist/modal/index.js.map +1 -1
- package/dist/modal/index.mjs +5 -6
- package/dist/modal/modal.d.ts +81 -5
- package/dist/modal/modal.d.ts.map +1 -0
- package/dist/modal/modal.js +59 -55
- package/dist/modal/modal.js.map +1 -1
- package/dist/modal/modal.mjs +2 -2
- package/dist/navbar/icons.d.ts +3 -2
- package/dist/navbar/icons.d.ts.map +1 -0
- package/dist/navbar/index.d.ts +4 -13
- package/dist/navbar/index.d.ts.map +1 -0
- package/dist/navbar/index.js +144 -145
- package/dist/navbar/index.js.map +1 -1
- package/dist/navbar/index.mjs +4 -5
- package/dist/navbar/navbar-expandable-menu.d.ts +35 -7
- package/dist/navbar/navbar-expandable-menu.d.ts.map +1 -0
- package/dist/navbar/navbar.d.ts +130 -9
- package/dist/navbar/navbar.d.ts.map +1 -0
- package/dist/navbar/navbar.js +237 -28
- package/dist/navbar/navbar.js.map +1 -1
- package/dist/navbar/navbar.mjs +4 -1
- package/dist/show-more/index.d.ts +5 -4
- package/dist/show-more/index.d.ts.map +1 -0
- package/dist/show-more/show-more.d.ts +42 -2
- package/dist/show-more/show-more.d.ts.map +1 -0
- package/dist/skeleton/index.d.ts +3 -2
- package/dist/skeleton/index.d.ts.map +1 -0
- package/dist/skeleton/skeleton.d.ts +67 -2
- package/dist/skeleton/skeleton.d.ts.map +1 -0
- package/dist/step-indicator/index.d.ts +3 -1
- package/dist/step-indicator/index.d.ts.map +1 -0
- package/dist/step-indicator/step-indicator.d.ts +36 -1
- package/dist/step-indicator/step-indicator.d.ts.map +1 -0
- package/dist/styled-html/index.d.ts +3 -2
- package/dist/styled-html/index.d.ts.map +1 -0
- package/dist/styled-html/styled-html.d.ts +36 -2
- package/dist/styled-html/styled-html.d.ts.map +1 -0
- package/dist/table/index.d.ts +3 -1
- package/dist/table/index.d.ts.map +1 -0
- package/dist/table/table.d.ts +25 -1
- package/dist/table/table.d.ts.map +1 -0
- package/dist/tabs/context.d.ts +8 -3
- package/dist/tabs/context.d.ts.map +1 -0
- package/dist/tabs/index.d.ts +7 -10
- package/dist/tabs/index.d.ts.map +1 -0
- package/dist/tabs/index.js +34 -37
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +4 -4
- package/dist/tabs/tabs-content.d.ts +26 -4
- package/dist/tabs/tabs-content.d.ts.map +1 -0
- package/dist/tabs/tabs-list.d.ts +21 -4
- package/dist/tabs/tabs-list.d.ts.map +1 -0
- package/dist/tabs/tabs.d.ts +26 -2
- package/dist/tabs/tabs.d.ts.map +1 -0
- package/dist/tabs/tabs.js +205 -8
- package/dist/tabs/tabs.js.map +1 -1
- package/dist/tabs/tabs.mjs +4 -1
- package/dist/text/index.d.ts +4 -2
- package/dist/text/index.d.ts.map +1 -0
- package/dist/text/text.d.ts +58 -2
- package/dist/text/text.d.ts.map +1 -0
- package/dist/utilities/auto-animate-height.d.ts +33 -2
- package/dist/utilities/auto-animate-height.d.ts.map +1 -0
- package/dist/utilities/index.d.ts +3 -2
- package/dist/utilities/index.d.ts.map +1 -0
- package/dist/utils.d.ts +28 -5
- package/dist/utils.d.ts.map +1 -0
- package/dist/warning-banner/index.d.ts +3 -2
- package/dist/warning-banner/index.d.ts.map +1 -0
- package/dist/warning-banner/index.js +16 -19
- package/dist/warning-banner/index.js.map +1 -1
- package/dist/warning-banner/index.mjs +3 -3
- package/dist/warning-banner/warning-banner.d.ts +8 -2
- package/dist/warning-banner/warning-banner.d.ts.map +1 -0
- package/dist/warning-banner/warning-banner.js +16 -19
- package/dist/warning-banner/warning-banner.js.map +1 -1
- package/dist/warning-banner/warning-banner.mjs +3 -3
- package/package.json +9 -5
- package/src/accordion/accordion-content.tsx +31 -0
- package/src/accordion/accordion-header.tsx +36 -0
- package/src/accordion/accordion-item.tsx +62 -0
- package/src/accordion/accordion.stories.tsx +154 -0
- package/src/accordion/accordion.tsx +68 -0
- package/src/accordion/context.ts +8 -0
- package/src/accordion/index.tsx +9 -0
- package/src/badge/badge.stories.tsx +44 -0
- package/src/badge/badge.tsx +63 -0
- package/src/badge/index.tsx +3 -0
- package/src/box/box.stories.tsx +112 -0
- package/src/box/box.tsx +122 -0
- package/src/box/index.tsx +3 -0
- package/src/breadcrumbs/breadcrumbs.stories.tsx +50 -0
- package/src/breadcrumbs/breadcrumbs.tsx +47 -0
- package/src/breadcrumbs/index.tsx +3 -0
- package/src/button/button.stories.tsx +104 -0
- package/src/button/button.tsx +87 -0
- package/src/button/index.tsx +3 -0
- package/src/card/card.stories.tsx +82 -0
- package/src/card/card.tsx +222 -0
- package/src/card/index.tsx +14 -0
- package/src/description-list/description-list.stories.tsx +95 -0
- package/src/description-list/description-list.tsx +61 -0
- package/src/description-list/index.tsx +2 -0
- package/src/footer/footer.tsx +169 -0
- package/src/footer/index.tsx +9 -0
- package/src/form/checkbox/checkbox.stories.tsx +104 -0
- package/src/form/checkbox/checkbox.tsx +82 -0
- package/src/form/checkbox/index.tsx +2 -0
- package/src/form/date-picker/date-picker.stories.tsx +27 -0
- package/src/form/date-picker/date-picker.tsx +85 -0
- package/src/form/date-picker/index.tsx +2 -0
- package/src/form/error-message/error-message.stories.tsx +19 -0
- package/src/form/error-message/error-message.tsx +25 -0
- package/src/form/error-message/index.tsx +2 -0
- package/src/form/fieldset/fieldset.stories.tsx +86 -0
- package/src/form/fieldset/fieldset.tsx +64 -0
- package/src/form/fieldset/index.tsx +2 -0
- package/src/form/index.tsx +8 -0
- package/src/form/input/index.tsx +2 -0
- package/src/form/input/input.stories.tsx +166 -0
- package/src/form/input/input.tsx +30 -0
- package/src/form/input-group/index.tsx +2 -0
- package/src/form/input-group/input-group.tsx +106 -0
- package/src/form/radiobutton/index.tsx +4 -0
- package/src/form/radiobutton/radiobutton.stories.tsx +93 -0
- package/src/form/radiobutton/radiobutton.tsx +85 -0
- package/src/form/radiobutton/radiogroup.stories.tsx +39 -0
- package/src/form/radiobutton/radiogroup.tsx +52 -0
- package/src/form/select/index.tsx +2 -0
- package/src/form/select/select.stories.tsx +93 -0
- package/src/form/select/select.tsx +33 -0
- package/src/form/textarea/index.tsx +2 -0
- package/src/form/textarea/textarea.stories.tsx +106 -0
- package/src/form/textarea/textarea.tsx +33 -0
- package/src/help-text/help-text.tsx +98 -0
- package/src/help-text/index.ts +2 -0
- package/src/index-no-css.tsx +25 -0
- package/src/index.tsx +11 -0
- package/src/layout/container/container.stories.tsx +62 -0
- package/src/layout/container/container.tsx +47 -0
- package/src/layout/grid/grid.tsx +163 -0
- package/src/layout/grid/index.tsx +3 -0
- package/src/layout/index.tsx +3 -0
- package/src/layout/responsive.ts +26 -0
- package/src/layout/spacing.ts +37 -0
- package/src/layout/stack/index.tsx +2 -0
- package/src/layout/stack/stack.tsx +128 -0
- package/src/link/index.tsx +3 -0
- package/src/link/link.stories.tsx +64 -0
- package/src/link/link.tsx +46 -0
- package/src/list/index.tsx +5 -0
- package/src/list/link-list.stories.tsx +38 -0
- package/src/list/link-list.tsx +26 -0
- package/src/list/list.stories.tsx +71 -0
- package/src/list/list.tsx +65 -0
- package/src/message/index.tsx +2 -0
- package/src/message/message.stories.tsx +93 -0
- package/src/message/message.tsx +89 -0
- package/src/modal/index.tsx +3 -0
- package/src/modal/modal.stories.tsx +147 -0
- package/src/modal/modal.tsx +199 -0
- package/src/navbar/icons.tsx +21 -0
- package/src/navbar/index.tsx +18 -0
- package/src/navbar/navbar-expandable-menu.tsx +176 -0
- package/src/navbar/navbar.stories.tsx +99 -0
- package/src/navbar/navbar.tsx +264 -0
- package/src/show-more/index.ts +5 -0
- package/src/show-more/show-more.stories.tsx +119 -0
- package/src/show-more/show-more.tsx +66 -0
- package/src/skeleton/index.ts +2 -0
- package/src/skeleton/skeleton.stories.tsx +152 -0
- package/src/skeleton/skeleton.tsx +114 -0
- package/src/step-indicator/index.ts +2 -0
- package/src/step-indicator/step-indicator.stories.tsx +50 -0
- package/src/step-indicator/step-indicator.tsx +116 -0
- package/src/styled-html/index.ts +2 -0
- package/src/styled-html/styled-html.stories.tsx +189 -0
- package/src/styled-html/styled-html.tsx +59 -0
- package/src/table/index.ts +2 -0
- package/src/table/table.tsx +59 -0
- package/src/tabs/context.ts +18 -0
- package/src/tabs/index.tsx +7 -0
- package/src/tabs/tabs-content.tsx +62 -0
- package/src/tabs/tabs-list.tsx +129 -0
- package/src/tabs/tabs.stories.tsx +138 -0
- package/src/tabs/tabs.tsx +50 -0
- package/src/text/index.tsx +4 -0
- package/src/text/text.stories.tsx +112 -0
- package/src/text/text.tsx +129 -0
- package/src/utilities/auto-animate-height.tsx +139 -0
- package/src/utilities/index.ts +2 -0
- package/src/utils.ts +110 -0
- package/src/warning-banner/index.tsx +2 -0
- package/src/warning-banner/warning-banner.stories.tsx +43 -0
- package/src/warning-banner/warning-banner.tsx +79 -0
- package/dist/_tsup-dts-rollup.d.mts +0 -2600
- package/dist/_tsup-dts-rollup.d.ts +0 -2600
- package/dist/accordion/accordion-content.d.mts +0 -2
- package/dist/accordion/accordion-header.d.mts +0 -2
- package/dist/accordion/accordion-item.d.mts +0 -3
- package/dist/accordion/accordion.d.mts +0 -2
- package/dist/accordion/context.d.mts +0 -2
- package/dist/accordion/index.d.mts +0 -9
- package/dist/badge/badge.d.mts +0 -5
- package/dist/badge/index.d.mts +0 -6
- package/dist/box/box.d.mts +0 -4
- package/dist/box/index.d.mts +0 -4
- package/dist/breadcrumbs/breadcrumbs.d.mts +0 -2
- package/dist/breadcrumbs/index.d.mts +0 -2
- package/dist/button/button.d.mts +0 -3
- package/dist/button/index.d.mts +0 -3
- package/dist/card/card.d.mts +0 -12
- package/dist/card/index.d.mts +0 -12
- package/dist/chunk-3MQKXNZ6.mjs.map +0 -1
- package/dist/chunk-3NDUE23B.mjs +0 -19
- package/dist/chunk-3NDUE23B.mjs.map +0 -1
- package/dist/chunk-3NL3TOZF.mjs +0 -13
- package/dist/chunk-3NL3TOZF.mjs.map +0 -1
- package/dist/chunk-3ZFEUABU.mjs +0 -23
- package/dist/chunk-3ZFEUABU.mjs.map +0 -1
- package/dist/chunk-722MZPXO.mjs +0 -13
- package/dist/chunk-722MZPXO.mjs.map +0 -1
- package/dist/chunk-7JRS4WEB.mjs.map +0 -1
- package/dist/chunk-CIHZDFSQ.mjs.map +0 -1
- package/dist/chunk-CYEYGPRH.mjs +0 -17
- package/dist/chunk-CYEYGPRH.mjs.map +0 -1
- package/dist/chunk-ENKVTAJB.mjs.map +0 -1
- package/dist/chunk-GSJPTZT3.mjs.map +0 -1
- package/dist/chunk-IJAX6APL.mjs +0 -23
- package/dist/chunk-IJAX6APL.mjs.map +0 -1
- package/dist/chunk-IKJJWKXM.mjs +0 -15
- package/dist/chunk-IKJJWKXM.mjs.map +0 -1
- package/dist/chunk-KPGSRU4I.mjs.map +0 -1
- package/dist/chunk-PT5H3QV6.mjs +0 -29
- package/dist/chunk-PT5H3QV6.mjs.map +0 -1
- package/dist/chunk-TQDUBRCZ.mjs.map +0 -1
- package/dist/chunk-V6UKKHKD.mjs +0 -33
- package/dist/chunk-V6UKKHKD.mjs.map +0 -1
- package/dist/chunk-XUWZ4HGD.mjs.map +0 -1
- package/dist/description-list/description-list.d.mts +0 -2
- package/dist/description-list/index.d.mts +0 -2
- package/dist/footer/footer.d.mts +0 -7
- package/dist/footer/index.d.mts +0 -7
- package/dist/form/checkbox/checkbox.d.mts +0 -2
- package/dist/form/checkbox/index.d.mts +0 -2
- package/dist/form/date-picker/date-picker.d.mts +0 -2
- package/dist/form/date-picker/index.d.mts +0 -2
- package/dist/form/error-message/error-message.d.mts +0 -2
- package/dist/form/error-message/index.d.mts +0 -2
- package/dist/form/fieldset/fieldset.d.mts +0 -3
- package/dist/form/fieldset/index.d.mts +0 -3
- package/dist/form/index.d.mts +0 -20
- package/dist/form/input/index.d.mts +0 -2
- package/dist/form/input/input.d.mts +0 -2
- package/dist/form/input-group/index.d.mts +0 -2
- package/dist/form/input-group/input-group.d.mts +0 -2
- package/dist/form/radiobutton/index.d.mts +0 -5
- package/dist/form/radiobutton/radiobutton.d.mts +0 -2
- package/dist/form/radiobutton/radiogroup.d.mts +0 -3
- package/dist/form/select/index.d.mts +0 -2
- package/dist/form/select/select.d.mts +0 -2
- package/dist/form/textarea/index.d.mts +0 -2
- package/dist/form/textarea/textarea.d.mts +0 -2
- package/dist/help-text/help-text.d.mts +0 -1
- package/dist/help-text/index.d.mts +0 -1
- package/dist/index-no-css.d.mts +0 -128
- package/dist/index.d.mts +0 -128
- package/dist/layout/container/container.d.mts +0 -2
- package/dist/layout/grid/grid.d.mts +0 -4
- package/dist/layout/grid/index.d.mts +0 -4
- package/dist/layout/index.d.mts +0 -10
- package/dist/layout/responsive.d.mts +0 -2
- package/dist/layout/spacing.d.mts +0 -3
- package/dist/layout/stack/index.d.mts +0 -4
- package/dist/layout/stack/stack.d.mts +0 -4
- package/dist/link/index.d.mts +0 -2
- package/dist/link/link.d.mts +0 -2
- package/dist/list/index.d.mts +0 -5
- package/dist/list/link-list.d.mts +0 -2
- package/dist/list/list.d.mts +0 -3
- package/dist/message/index.d.mts +0 -3
- package/dist/message/message.d.mts +0 -4
- package/dist/modal/index.d.mts +0 -5
- package/dist/modal/modal.d.mts +0 -5
- package/dist/navbar/icons.d.mts +0 -2
- package/dist/navbar/index.d.mts +0 -13
- package/dist/navbar/navbar-expandable-menu.d.mts +0 -7
- package/dist/navbar/navbar.d.mts +0 -9
- package/dist/show-more/index.d.mts +0 -4
- package/dist/show-more/show-more.d.mts +0 -2
- package/dist/skeleton/index.d.mts +0 -2
- package/dist/skeleton/skeleton.d.mts +0 -2
- package/dist/step-indicator/index.d.mts +0 -1
- package/dist/step-indicator/step-indicator.d.mts +0 -1
- package/dist/styled-html/index.d.mts +0 -2
- package/dist/styled-html/styled-html.d.mts +0 -2
- package/dist/table/index.d.mts +0 -1
- package/dist/table/table.d.mts +0 -1
- package/dist/tabs/context.d.mts +0 -3
- package/dist/tabs/index.d.mts +0 -10
- package/dist/tabs/tabs-content.d.mts +0 -4
- package/dist/tabs/tabs-list.d.mts +0 -4
- package/dist/tabs/tabs.d.mts +0 -2
- package/dist/text/index.d.mts +0 -2
- package/dist/text/text.d.mts +0 -2
- package/dist/utilities/auto-animate-height.d.mts +0 -2
- package/dist/utilities/index.d.mts +0 -2
- package/dist/utils.d.mts +0 -5
- package/dist/warning-banner/index.d.mts +0 -2
- package/dist/warning-banner/warning-banner.d.mts +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/message/index.tsx","../../src/message/message.tsx","../../src/box/box.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../../src/message/index.tsx","../../src/message/message.tsx","../../src/box/box.tsx"],"sourcesContent":["export { Message, MessageTitle, MessageDescription } from \"./message\";\nexport type * from \"./message\";\n","import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box, type BoxProps } from \"../box/box\";\n\ninterface MessageTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const MessageTitle = forwardRef<HTMLParagraphElement, MessageTitleProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n className={clsx(\"hds-message__title\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nMessageTitle.displayName = \"Message.Title\";\n\ninterface MessageDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const MessageDescription = forwardRef<HTMLParagraphElement, MessageDescriptionProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n className={clsx(\"hds-message__description\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nMessageDescription.displayName = \"Message.Description\";\n\nexport type MessageProps = (\n | {\n variant?: \"success\" | \"attention\" | \"warning\";\n icon?: never;\n iconClassName?: never;\n }\n | {\n variant: \"neutral\";\n icon?: React.ReactNode;\n iconClassName?: string;\n }\n) &\n Omit<BoxProps, \"variant\" | \"asChild\">;\n\nexport const Message = forwardRef<HTMLDivElement, MessageProps>(\n ({ children, className, variant = \"success\", icon, iconClassName, ...rest }, ref) => {\n return (\n <Box\n className={clsx(`hds-message`, `hds-message--${variant}`, className as undefined)}\n ref={ref}\n {...rest}\n >\n {variant === \"neutral\" && (\n <div className={clsx(\"hds-message--neutral__icon\", iconClassName as undefined)}>\n {icon}\n </div>\n )}\n {children}\n </Box>\n );\n },\n) as MessageType;\nMessage.displayName = \"Message\";\n\ntype MessageType = ReturnType<typeof forwardRef<HTMLDivElement, MessageProps>> & {\n Title: typeof MessageTitle;\n Description: typeof MessageDescription;\n};\nMessage.Title = MessageTitle;\nMessage.Description = MessageDescription;\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n ({ className, ...rest }, ref) => {\n return (\n <button\n className={clsx(\"hds-box__close-button\", className as undefined)}\n ref={ref}\n type=\"button\"\n {...rest}\n />\n );\n },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n children?: React.ReactNode;\n\n /**\n * Color variant of the box\n *\n * @default \"light-grey\"\n */\n variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n\n /**\n * If `true`, a close button will be shown.\n * Use when you want to control the close button using the BoxCloseButton component.\n *\n * @default false\n */\n closeable?: boolean;\n\n /**\n * Callback fired when the component requests to be closed.\n * If not set, the component will be closed without any user interaction.\n *\n * If set, and the handler returns non-true value, the component will not be closed.\n * Use this if you want to control the closing of the component, using the `closed` prop\n *\n * If set, and the handler returns the true, the component will be closed.\n * Use this with `window.confirm()` to ask the user to confirm closing the component.\n */\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n onClose?: () => boolean | unknown;\n\n /**\n * If `true`, the box will be closed and hidden from view\n */\n closed?: boolean;\n\n /**\n * Props applied to the close button element.\n */\n closeButtonProps?: BoxCloseButtonProps;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n (\n {\n asChild,\n variant,\n closeable = false,\n onClose: onCloseProp,\n closed: closedProp,\n closeButtonProps,\n children,\n className,\n ...rest\n },\n ref,\n ) => {\n const [closedState, setClosedState] = useState(false);\n const onClose = useCallback(() => {\n if (onCloseProp) {\n const result = onCloseProp();\n if (result === true) {\n setClosedState(true);\n }\n } else {\n setClosedState(true);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n }, []);\n const closed = closedProp ?? closedState;\n const Component = asChild ? Slot : \"div\";\n\n return (\n <Component\n className={clsx(\n \"hds-box\",\n variant && `hds-box--${variant}`,\n { \"hds-box--closed\": closed },\n className as undefined,\n )}\n ref={ref}\n {...rest}\n >\n {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n <Slottable>{children}</Slottable>\n </Component>\n );\n },\n) as BoxType;\nBox.displayName = \"Box\";\n\nBox.CloseButton = BoxCloseButton;\n\ntype BoxType = ReturnType<typeof forwardRef<HTMLDivElement, BoxProps>> & {\n CloseButton: typeof BoxCloseButton;\n};\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react_slot","import_jsx_runtime"]}
|
package/dist/message/index.mjs
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
|
+
import "../chunk-RC76SXBP.mjs";
|
|
1
2
|
import {
|
|
2
|
-
|
|
3
|
-
} from "../chunk-IKJJWKXM.mjs";
|
|
4
|
-
import {
|
|
3
|
+
Message,
|
|
5
4
|
MessageDescription,
|
|
6
5
|
MessageTitle
|
|
7
|
-
} from "../chunk-
|
|
8
|
-
import "../chunk-
|
|
6
|
+
} from "../chunk-SQ63E7KM.mjs";
|
|
7
|
+
import "../chunk-AJWSQEDP.mjs";
|
|
9
8
|
import "../chunk-R4SQKVDQ.mjs";
|
|
10
9
|
export {
|
|
11
|
-
|
|
10
|
+
Message,
|
|
12
11
|
MessageDescription,
|
|
13
12
|
MessageTitle
|
|
14
13
|
};
|
|
@@ -1,4 +1,36 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { forwardRef } from "react";
|
|
2
|
+
import { type BoxProps } from "../box/box";
|
|
3
|
+
interface MessageTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
|
|
4
|
+
/**
|
|
5
|
+
* Change the default rendered element for the one passed as a child, merging their props and behavior.
|
|
6
|
+
*
|
|
7
|
+
* @default false
|
|
8
|
+
*/
|
|
9
|
+
asChild?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export declare const MessageTitle: import("react").ForwardRefExoticComponent<MessageTitleProps & import("react").RefAttributes<HTMLParagraphElement>>;
|
|
12
|
+
interface MessageDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
|
|
13
|
+
/**
|
|
14
|
+
* Change the default rendered element for the one passed as a child, merging their props and behavior.
|
|
15
|
+
*
|
|
16
|
+
* @default false
|
|
17
|
+
*/
|
|
18
|
+
asChild?: boolean;
|
|
19
|
+
}
|
|
20
|
+
export declare const MessageDescription: import("react").ForwardRefExoticComponent<MessageDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
|
|
21
|
+
export type MessageProps = ({
|
|
22
|
+
variant?: "success" | "attention" | "warning";
|
|
23
|
+
icon?: never;
|
|
24
|
+
iconClassName?: never;
|
|
25
|
+
} | {
|
|
26
|
+
variant: "neutral";
|
|
27
|
+
icon?: React.ReactNode;
|
|
28
|
+
iconClassName?: string;
|
|
29
|
+
}) & Omit<BoxProps, "variant" | "asChild">;
|
|
30
|
+
export declare const Message: MessageType;
|
|
31
|
+
type MessageType = ReturnType<typeof forwardRef<HTMLDivElement, MessageProps>> & {
|
|
32
|
+
Title: typeof MessageTitle;
|
|
33
|
+
Description: typeof MessageDescription;
|
|
34
|
+
};
|
|
35
|
+
export {};
|
|
36
|
+
//# sourceMappingURL=message.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../src/message/message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IAC5E;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,YAAY,oHAWxB,CAAC;AAGF,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IAClF;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,kBAAkB,0HAW9B,CAAC;AAGF,MAAM,MAAM,YAAY,GAAG,CACvB;IACE,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IAC9C,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB,GACD;IACE,OAAO,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CACJ,GACC,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,aAiBJ,CAAC;AAGjB,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC,GAAG;IAC/E,KAAK,EAAE,OAAO,YAAY,CAAC;IAC3B,WAAW,EAAE,OAAO,kBAAkB,CAAC;CACxC,CAAC"}
|
package/dist/message/message.js
CHANGED
|
@@ -63,6 +63,20 @@ var import_react = require("react");
|
|
|
63
63
|
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
|
|
64
64
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
65
65
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
66
|
+
var BoxCloseButton = (0, import_react.forwardRef)(
|
|
67
|
+
(_a, ref) => {
|
|
68
|
+
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
|
69
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
|
+
"button",
|
|
71
|
+
__spreadValues({
|
|
72
|
+
className: (0, import_typed_classname.clsx)("hds-box__close-button", className),
|
|
73
|
+
ref,
|
|
74
|
+
type: "button"
|
|
75
|
+
}, rest)
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
BoxCloseButton.displayName = "Box.CloseButton";
|
|
66
80
|
var Box = (0, import_react.forwardRef)(
|
|
67
81
|
(_a, ref) => {
|
|
68
82
|
var _b = _a, {
|
|
@@ -117,41 +131,10 @@ var Box = (0, import_react.forwardRef)(
|
|
|
117
131
|
}
|
|
118
132
|
);
|
|
119
133
|
Box.displayName = "Box";
|
|
120
|
-
|
|
121
|
-
(_a, ref) => {
|
|
122
|
-
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
|
123
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
124
|
-
"button",
|
|
125
|
-
__spreadValues({
|
|
126
|
-
className: (0, import_typed_classname.clsx)("hds-box__close-button", className),
|
|
127
|
-
ref,
|
|
128
|
-
type: "button"
|
|
129
|
-
}, rest)
|
|
130
|
-
);
|
|
131
|
-
}
|
|
132
|
-
);
|
|
133
|
-
BoxCloseButton.displayName = "Box.CloseButton";
|
|
134
|
+
Box.CloseButton = BoxCloseButton;
|
|
134
135
|
|
|
135
136
|
// src/message/message.tsx
|
|
136
137
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
137
|
-
var Message = (0, import_react2.forwardRef)(
|
|
138
|
-
(_a, ref) => {
|
|
139
|
-
var _b = _a, { children, className, variant = "success", icon, iconClassName } = _b, rest = __objRest(_b, ["children", "className", "variant", "icon", "iconClassName"]);
|
|
140
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
141
|
-
Box,
|
|
142
|
-
__spreadProps(__spreadValues({
|
|
143
|
-
className: (0, import_typed_classname2.clsx)(`hds-message`, `hds-message--${variant}`, className),
|
|
144
|
-
ref
|
|
145
|
-
}, rest), {
|
|
146
|
-
children: [
|
|
147
|
-
variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_typed_classname2.clsx)("hds-message--neutral__icon", iconClassName), children: icon }),
|
|
148
|
-
children
|
|
149
|
-
]
|
|
150
|
-
})
|
|
151
|
-
);
|
|
152
|
-
}
|
|
153
|
-
);
|
|
154
|
-
Message.displayName = "Message";
|
|
155
138
|
var MessageTitle = (0, import_react2.forwardRef)(
|
|
156
139
|
(_a, ref) => {
|
|
157
140
|
var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
|
|
@@ -180,6 +163,26 @@ var MessageDescription = (0, import_react2.forwardRef)(
|
|
|
180
163
|
}
|
|
181
164
|
);
|
|
182
165
|
MessageDescription.displayName = "Message.Description";
|
|
166
|
+
var Message = (0, import_react2.forwardRef)(
|
|
167
|
+
(_a, ref) => {
|
|
168
|
+
var _b = _a, { children, className, variant = "success", icon, iconClassName } = _b, rest = __objRest(_b, ["children", "className", "variant", "icon", "iconClassName"]);
|
|
169
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
170
|
+
Box,
|
|
171
|
+
__spreadProps(__spreadValues({
|
|
172
|
+
className: (0, import_typed_classname2.clsx)(`hds-message`, `hds-message--${variant}`, className),
|
|
173
|
+
ref
|
|
174
|
+
}, rest), {
|
|
175
|
+
children: [
|
|
176
|
+
variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_typed_classname2.clsx)("hds-message--neutral__icon", iconClassName), children: icon }),
|
|
177
|
+
children
|
|
178
|
+
]
|
|
179
|
+
})
|
|
180
|
+
);
|
|
181
|
+
}
|
|
182
|
+
);
|
|
183
|
+
Message.displayName = "Message";
|
|
184
|
+
Message.Title = MessageTitle;
|
|
185
|
+
Message.Description = MessageDescription;
|
|
183
186
|
// Annotate the CommonJS export names for ESM import in node:
|
|
184
187
|
0 && (module.exports = {
|
|
185
188
|
Message,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/message/message.tsx","../../src/box/box.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box, type BoxProps } from \"../box/box\";\n\
|
|
1
|
+
{"version":3,"sources":["../../src/message/message.tsx","../../src/box/box.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box, type BoxProps } from \"../box/box\";\n\ninterface MessageTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const MessageTitle = forwardRef<HTMLParagraphElement, MessageTitleProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n className={clsx(\"hds-message__title\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nMessageTitle.displayName = \"Message.Title\";\n\ninterface MessageDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const MessageDescription = forwardRef<HTMLParagraphElement, MessageDescriptionProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n className={clsx(\"hds-message__description\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nMessageDescription.displayName = \"Message.Description\";\n\nexport type MessageProps = (\n | {\n variant?: \"success\" | \"attention\" | \"warning\";\n icon?: never;\n iconClassName?: never;\n }\n | {\n variant: \"neutral\";\n icon?: React.ReactNode;\n iconClassName?: string;\n }\n) &\n Omit<BoxProps, \"variant\" | \"asChild\">;\n\nexport const Message = forwardRef<HTMLDivElement, MessageProps>(\n ({ children, className, variant = \"success\", icon, iconClassName, ...rest }, ref) => {\n return (\n <Box\n className={clsx(`hds-message`, `hds-message--${variant}`, className as undefined)}\n ref={ref}\n {...rest}\n >\n {variant === \"neutral\" && (\n <div className={clsx(\"hds-message--neutral__icon\", iconClassName as undefined)}>\n {icon}\n </div>\n )}\n {children}\n </Box>\n );\n },\n) as MessageType;\nMessage.displayName = \"Message\";\n\ntype MessageType = ReturnType<typeof forwardRef<HTMLDivElement, MessageProps>> & {\n Title: typeof MessageTitle;\n Description: typeof MessageDescription;\n};\nMessage.Title = MessageTitle;\nMessage.Description = MessageDescription;\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n ({ className, ...rest }, ref) => {\n return (\n <button\n className={clsx(\"hds-box__close-button\", className as undefined)}\n ref={ref}\n type=\"button\"\n {...rest}\n />\n );\n },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n children?: React.ReactNode;\n\n /**\n * Color variant of the box\n *\n * @default \"light-grey\"\n */\n variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n\n /**\n * If `true`, a close button will be shown.\n * Use when you want to control the close button using the BoxCloseButton component.\n *\n * @default false\n */\n closeable?: boolean;\n\n /**\n * Callback fired when the component requests to be closed.\n * If not set, the component will be closed without any user interaction.\n *\n * If set, and the handler returns non-true value, the component will not be closed.\n * Use this if you want to control the closing of the component, using the `closed` prop\n *\n * If set, and the handler returns the true, the component will be closed.\n * Use this with `window.confirm()` to ask the user to confirm closing the component.\n */\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n onClose?: () => boolean | unknown;\n\n /**\n * If `true`, the box will be closed and hidden from view\n */\n closed?: boolean;\n\n /**\n * Props applied to the close button element.\n */\n closeButtonProps?: BoxCloseButtonProps;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n (\n {\n asChild,\n variant,\n closeable = false,\n onClose: onCloseProp,\n closed: closedProp,\n closeButtonProps,\n children,\n className,\n ...rest\n },\n ref,\n ) => {\n const [closedState, setClosedState] = useState(false);\n const onClose = useCallback(() => {\n if (onCloseProp) {\n const result = onCloseProp();\n if (result === true) {\n setClosedState(true);\n }\n } else {\n setClosedState(true);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n }, []);\n const closed = closedProp ?? closedState;\n const Component = asChild ? Slot : \"div\";\n\n return (\n <Component\n className={clsx(\n \"hds-box\",\n variant && `hds-box--${variant}`,\n { \"hds-box--closed\": closed },\n className as undefined,\n )}\n ref={ref}\n {...rest}\n >\n {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n <Slottable>{children}</Slottable>\n </Component>\n );\n },\n) as BoxType;\nBox.displayName = \"Box\";\n\nBox.CloseButton = BoxCloseButton;\n\ntype BoxType = ReturnType<typeof forwardRef<HTMLDivElement, BoxProps>> & {\n CloseButton: typeof BoxCloseButton;\n};\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react_slot","import_jsx_runtime"]}
|
package/dist/message/message.mjs
CHANGED
package/dist/modal/index.d.ts
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export
|
|
3
|
-
|
|
4
|
-
export { ModalFooter_alias_2 as ModalFooter } from '../_tsup-dts-rollup';
|
|
5
|
-
export { ModalProps_alias_2 as ModalProps } from '../_tsup-dts-rollup';
|
|
1
|
+
export { Modal, ModalHeader, ModalContent, ModalFooter } from "./modal";
|
|
2
|
+
export type * from "./modal";
|
|
3
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/modal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAExE,mBAAmB,SAAS,CAAC"}
|
package/dist/modal/index.js
CHANGED
|
@@ -59,7 +59,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
59
59
|
// src/modal/index.tsx
|
|
60
60
|
var modal_exports = {};
|
|
61
61
|
__export(modal_exports, {
|
|
62
|
-
Modal: () =>
|
|
62
|
+
Modal: () => Modal,
|
|
63
63
|
ModalContent: () => ModalContent,
|
|
64
64
|
ModalFooter: () => ModalFooter,
|
|
65
65
|
ModalHeader: () => ModalHeader
|
|
@@ -76,6 +76,20 @@ var import_react = require("react");
|
|
|
76
76
|
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
|
|
77
77
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
78
78
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
79
|
+
var BoxCloseButton = (0, import_react.forwardRef)(
|
|
80
|
+
(_a, ref) => {
|
|
81
|
+
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
|
82
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
83
|
+
"button",
|
|
84
|
+
__spreadValues({
|
|
85
|
+
className: (0, import_typed_classname.clsx)("hds-box__close-button", className),
|
|
86
|
+
ref,
|
|
87
|
+
type: "button"
|
|
88
|
+
}, rest)
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
);
|
|
92
|
+
BoxCloseButton.displayName = "Box.CloseButton";
|
|
79
93
|
var Box = (0, import_react.forwardRef)(
|
|
80
94
|
(_a, ref) => {
|
|
81
95
|
var _b = _a, {
|
|
@@ -130,20 +144,7 @@ var Box = (0, import_react.forwardRef)(
|
|
|
130
144
|
}
|
|
131
145
|
);
|
|
132
146
|
Box.displayName = "Box";
|
|
133
|
-
|
|
134
|
-
(_a, ref) => {
|
|
135
|
-
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
|
136
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
137
|
-
"button",
|
|
138
|
-
__spreadValues({
|
|
139
|
-
className: (0, import_typed_classname.clsx)("hds-box__close-button", className),
|
|
140
|
-
ref,
|
|
141
|
-
type: "button"
|
|
142
|
-
}, rest)
|
|
143
|
-
);
|
|
144
|
-
}
|
|
145
|
-
);
|
|
146
|
-
BoxCloseButton.displayName = "Box.CloseButton";
|
|
147
|
+
Box.CloseButton = BoxCloseButton;
|
|
147
148
|
|
|
148
149
|
// src/utils.ts
|
|
149
150
|
var React = __toESM(require("react"));
|
|
@@ -167,47 +168,6 @@ function useMergeRefs(refs) {
|
|
|
167
168
|
|
|
168
169
|
// src/modal/modal.tsx
|
|
169
170
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
170
|
-
var Modal = (0, import_react3.forwardRef)(
|
|
171
|
-
(_a, ref) => {
|
|
172
|
-
var _b = _a, { children, className, open, closeOnBackdropClick, onClick } = _b, rest = __objRest(_b, ["children", "className", "open", "closeOnBackdropClick", "onClick"]);
|
|
173
|
-
const modalRef = (0, import_react3.useRef)(null);
|
|
174
|
-
const mergedRef = useMergeRefs([modalRef, ref]);
|
|
175
|
-
function onCloseButtonClick() {
|
|
176
|
-
var _a2;
|
|
177
|
-
(_a2 = modalRef.current) == null ? void 0 : _a2.close();
|
|
178
|
-
return false;
|
|
179
|
-
}
|
|
180
|
-
useScrollLock(modalRef, "hds-modal-scroll-lock");
|
|
181
|
-
(0, import_react3.useEffect)(() => {
|
|
182
|
-
if (modalRef.current && open !== void 0) {
|
|
183
|
-
if (open && !modalRef.current.open) {
|
|
184
|
-
modalRef.current.showModal();
|
|
185
|
-
} else if (!open && modalRef.current.open) {
|
|
186
|
-
modalRef.current.close();
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
}, [modalRef, open]);
|
|
190
|
-
function onDialogClick(e) {
|
|
191
|
-
if (closeOnBackdropClick && e.target === modalRef.current) {
|
|
192
|
-
modalRef.current.close();
|
|
193
|
-
}
|
|
194
|
-
onClick == null ? void 0 : onClick(e);
|
|
195
|
-
}
|
|
196
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
197
|
-
Box,
|
|
198
|
-
{
|
|
199
|
-
asChild: true,
|
|
200
|
-
className: (0, import_typed_classname2.clsx)("hds-modal", className),
|
|
201
|
-
closeable: true,
|
|
202
|
-
onClick: onDialogClick,
|
|
203
|
-
onClose: onCloseButtonClick,
|
|
204
|
-
variant: "white",
|
|
205
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dialog", __spreadProps(__spreadValues({ ref: mergedRef }, rest), { children }))
|
|
206
|
-
}
|
|
207
|
-
);
|
|
208
|
-
}
|
|
209
|
-
);
|
|
210
|
-
Modal.displayName = "Modal";
|
|
211
171
|
var ModalHeader = (0, import_react3.forwardRef)(
|
|
212
172
|
(_a, ref) => {
|
|
213
173
|
var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
|
|
@@ -250,6 +210,50 @@ var ModalFooter = (0, import_react3.forwardRef)(
|
|
|
250
210
|
}
|
|
251
211
|
);
|
|
252
212
|
ModalFooter.displayName = "Modal.Footer";
|
|
213
|
+
var Modal = (0, import_react3.forwardRef)(
|
|
214
|
+
(_a, ref) => {
|
|
215
|
+
var _b = _a, { children, className, open, closeOnBackdropClick, onClick } = _b, rest = __objRest(_b, ["children", "className", "open", "closeOnBackdropClick", "onClick"]);
|
|
216
|
+
const modalRef = (0, import_react3.useRef)(null);
|
|
217
|
+
const mergedRef = useMergeRefs([modalRef, ref]);
|
|
218
|
+
function onCloseButtonClick() {
|
|
219
|
+
var _a2;
|
|
220
|
+
(_a2 = modalRef.current) == null ? void 0 : _a2.close();
|
|
221
|
+
return false;
|
|
222
|
+
}
|
|
223
|
+
useScrollLock(modalRef, "hds-modal-scroll-lock");
|
|
224
|
+
(0, import_react3.useEffect)(() => {
|
|
225
|
+
if (modalRef.current && open !== void 0) {
|
|
226
|
+
if (open && !modalRef.current.open) {
|
|
227
|
+
modalRef.current.showModal();
|
|
228
|
+
} else if (!open && modalRef.current.open) {
|
|
229
|
+
modalRef.current.close();
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
}, [modalRef, open]);
|
|
233
|
+
function onDialogClick(e) {
|
|
234
|
+
if (closeOnBackdropClick && e.target === modalRef.current) {
|
|
235
|
+
modalRef.current.close();
|
|
236
|
+
}
|
|
237
|
+
onClick == null ? void 0 : onClick(e);
|
|
238
|
+
}
|
|
239
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
240
|
+
Box,
|
|
241
|
+
{
|
|
242
|
+
asChild: true,
|
|
243
|
+
className: (0, import_typed_classname2.clsx)("hds-modal", className),
|
|
244
|
+
closeable: true,
|
|
245
|
+
onClick: onDialogClick,
|
|
246
|
+
onClose: onCloseButtonClick,
|
|
247
|
+
variant: "white",
|
|
248
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dialog", __spreadProps(__spreadValues({ ref: mergedRef }, rest), { children }))
|
|
249
|
+
}
|
|
250
|
+
);
|
|
251
|
+
}
|
|
252
|
+
);
|
|
253
|
+
Modal.displayName = "Modal";
|
|
254
|
+
Modal.Header = ModalHeader;
|
|
255
|
+
Modal.Content = ModalContent;
|
|
256
|
+
Modal.Footer = ModalFooter;
|
|
253
257
|
function useScrollLock(modalRef, bodyClass) {
|
|
254
258
|
(0, import_react3.useEffect)(() => {
|
|
255
259
|
if (!modalRef.current)
|
|
@@ -273,12 +277,6 @@ function useScrollLock(modalRef, bodyClass) {
|
|
|
273
277
|
};
|
|
274
278
|
}, [bodyClass, modalRef]);
|
|
275
279
|
}
|
|
276
|
-
|
|
277
|
-
// src/modal/index.tsx
|
|
278
|
-
var ModalComponent = Modal;
|
|
279
|
-
ModalComponent.Header = ModalHeader;
|
|
280
|
-
ModalComponent.Content = ModalContent;
|
|
281
|
-
ModalComponent.Footer = ModalFooter;
|
|
282
280
|
// Annotate the CommonJS export names for ESM import in node:
|
|
283
281
|
0 && (module.exports = {
|
|
284
282
|
Modal,
|
package/dist/modal/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/modal/index.tsx","../../src/modal/modal.tsx","../../src/box/box.tsx","../../src/utils.ts"],"sourcesContent":["import { Modal, ModalHeader, ModalContent, ModalFooter } from \"./modal\";\n\nconst ModalComponent = Modal as typeof Modal & {\n Header: typeof ModalHeader;\n Content: typeof ModalContent;\n Footer: typeof ModalFooter;\n};\nModalComponent.Header = ModalHeader;\nModalComponent.Content = ModalContent;\nModalComponent.Footer = ModalFooter;\n\nexport { ModalComponent as Modal, ModalHeader, ModalContent, ModalFooter };\nexport type * from \"./modal\";\n","import { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box } from \"../box/box\";\nimport { useMergeRefs } from \"../utils\";\n\nexport interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {\n children: React.ReactNode;\n\n /**\n * Controls the open state of the modal\n */\n open?: boolean;\n\n /**\n * Whether to close when clicking on the backdrop.\n */\n closeOnBackdropClick?: boolean;\n}\n\n/**\n * A modal dialog is a window that forces the user to interact with it before they can return to other parts of the application.\n *\n * Uses the native [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element.\n *\n * @example\n * ```tsx\n * const modalRef = useRef<HTMLDialogElement>(null);\n * const onClose = () => modalRef.current?.close();\n *\n * return (\n * <>\n * <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>\n * <Modal ref={modalRef}>\n * <Modal.Header>Dialog header</Modal.Header>\n * <Modal.Content>\n * <p>\n * Dialog header Dialog description - a description of what is about to happen and maybe\n * something about the consequences.\n * </p>\n * </Modal.Content>\n * <Modal.Footer>\n * <HStack gap=\"16\" wrap>\n * <PrimaryButton onClick={onMainAction}>Main action</PrimaryButton>\n * <PrimaryButton fill=\"outline\" onClick={onClose}>\n * Cancel\n * </PrimaryButton>\n * </HStack>\n * </Modal.Footer>\n * </Modal>\n * </>\n * );\n * ```\n */\nexport const Modal = forwardRef<HTMLDialogElement, ModalProps>(\n ({ children, className, open, closeOnBackdropClick, onClick, ...rest }, ref) => {\n const modalRef = useRef<HTMLDialogElement>(null);\n const mergedRef = useMergeRefs([modalRef, ref]);\n\n // The X close button that comes from the `Box` component\n function onCloseButtonClick() {\n modalRef.current?.close();\n return false;\n }\n\n // No scroll when modal is open\n useScrollLock(modalRef, \"hds-modal-scroll-lock\");\n\n // `open` prop\n useEffect(() => {\n if (modalRef.current && open !== undefined) {\n if (open && !modalRef.current.open) {\n modalRef.current.showModal();\n } else if (!open && modalRef.current.open) {\n modalRef.current.close();\n }\n }\n }, [modalRef, open]);\n\n function onDialogClick(e: React.MouseEvent<HTMLElement>) {\n if (closeOnBackdropClick && e.target === modalRef.current) {\n modalRef.current.close();\n }\n onClick?.(e as React.MouseEvent<HTMLDialogElement>);\n }\n\n return (\n <Box\n asChild\n className={clsx(\"hds-modal\", className as undefined)}\n closeable\n onClick={onDialogClick}\n onClose={onCloseButtonClick}\n variant=\"white\"\n >\n <dialog ref={mergedRef} {...rest}>\n {children}\n </dialog>\n </Box>\n );\n },\n);\nModal.displayName = \"Modal\";\n\ninterface ModalHeaderProps extends React.HTMLAttributes<HTMLHeadingElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const ModalHeader = forwardRef<HTMLHeadingElement, ModalHeaderProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"h1\";\n return (\n <Component\n className={clsx(\"hds-modal__header\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalHeader.displayName = \"Modal.Header\";\n\ninterface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n className={clsx(\"hds-modal__content\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalContent.displayName = \"Modal.Content\";\n\ninterface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"footer\";\n return (\n <Component\n className={clsx(\"hds-modal__footer\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalFooter.displayName = \"Modal.Footer\";\n\nfunction useScrollLock(modalRef: React.RefObject<HTMLDialogElement>, bodyClass: string) {\n useEffect(() => {\n if (!modalRef.current) return;\n if (modalRef.current.open) document.body.classList.add(bodyClass);\n\n const observer = new MutationObserver(() => {\n if (modalRef.current?.open) document.body.classList.add(bodyClass);\n else document.body.classList.remove(bodyClass);\n });\n observer.observe(modalRef.current, {\n attributes: true,\n attributeFilter: [\"open\"],\n });\n return () => {\n observer.disconnect();\n document.body.classList.remove(bodyClass);\n };\n }, [bodyClass, modalRef]);\n}\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n children?: React.ReactNode;\n\n /**\n * Color variant of the box\n *\n * @default \"light-grey\"\n */\n variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n\n /**\n * If `true`, a close button will be shown.\n * Use when you want to control the close button using the BoxCloseButton component.\n *\n * @default false\n */\n closeable?: boolean;\n\n /**\n * Callback fired when the component requests to be closed.\n * If not set, the component will be closed without any user interaction.\n *\n * If set, and the handler returns non-true value, the component will not be closed.\n * Use this if you want to control the closing of the component, using the `closed` prop\n *\n * If set, and the handler returns the true, the component will be closed.\n * Use this with `window.confirm()` to ask the user to confirm closing the component.\n */\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n onClose?: () => boolean | unknown;\n\n /**\n * If `true`, the box will be closed and hidden from view\n */\n closed?: boolean;\n\n /**\n * Props applied to the close button element.\n */\n closeButtonProps?: BoxCloseButtonProps;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n (\n {\n asChild,\n variant,\n closeable = false,\n onClose: onCloseProp,\n closed: closedProp,\n closeButtonProps,\n children,\n className,\n ...rest\n },\n ref,\n ) => {\n const [closedState, setClosedState] = useState(false);\n const onClose = useCallback(() => {\n if (onCloseProp) {\n const result = onCloseProp();\n if (result === true) {\n setClosedState(true);\n }\n } else {\n setClosedState(true);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n }, []);\n const closed = closedProp ?? closedState;\n const Component = asChild ? Slot : \"div\";\n\n return (\n <Component\n className={clsx(\n \"hds-box\",\n variant && `hds-box--${variant}`,\n { \"hds-box--closed\": closed },\n className as undefined,\n )}\n ref={ref}\n {...rest}\n >\n {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n <Slottable>{children}</Slottable>\n </Component>\n );\n },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n ({ className, ...rest }, ref) => {\n return (\n <button\n className={clsx(\"hds-box__close-button\", className as undefined)}\n ref={ref}\n type=\"button\"\n {...rest}\n />\n );\n },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n return React.useMemo(() => {\n if (refs.every((ref) => ref === null)) {\n return null;\n }\n\n return (value) => {\n refs.forEach((ref) => {\n if (typeof ref === \"function\") {\n ref(value);\n } else if (ref !== null) {\n (ref as React.MutableRefObject<Instance | null>).current = value;\n }\n });\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n const [width, setWidth] = useState<number>(0);\n const [height, setHeight] = useState<number>(0);\n const handleResize = useCallback(() => {\n if (ref?.current !== null) {\n setWidth(ref?.current?.offsetWidth ?? 0);\n setHeight(ref?.current?.offsetHeight ?? 0);\n }\n }, [ref]);\n useEffect(() => {\n window.addEventListener(\"load\", handleResize);\n window.addEventListener(\"resize\", handleResize);\n return () => {\n window.removeEventListener(\"load\", handleResize);\n window.removeEventListener(\"resize\", handleResize);\n };\n }, [ref, handleResize]);\n useEffect(() => {\n handleResize();\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, []);\n return { width, height };\n}\n\nfunction subscribe() {\n // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n return () => {};\n}\n\nexport function useHydrated() {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n if (element === document.body) return () => {};\n\n let inertElements: HTMLElement[] = [];\n for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n if (el === document.body) break;\n\n for (const sibling of el.parentElement?.children ?? []) {\n if (sibling === el) continue;\n if (!(sibling instanceof HTMLElement)) continue;\n if (sibling.hasAttribute(\"inert\")) continue;\n\n sibling.setAttribute(\"inert\", \"true\");\n inertElements.push(sibling);\n }\n }\n\n return () => {\n releaseFocusTrap(inertElements);\n inertElements = [];\n };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nexport function releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n for (const el of inertElements) {\n el.removeAttribute(\"inert\");\n }\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react_slot","import_react","import_jsx_runtime","_a"]}
|
|
1
|
+
{"version":3,"sources":["../../src/modal/index.tsx","../../src/modal/modal.tsx","../../src/box/box.tsx","../../src/utils.ts"],"sourcesContent":["export { Modal, ModalHeader, ModalContent, ModalFooter } from \"./modal\";\n\nexport type * from \"./modal\";\n","import { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box } from \"../box/box\";\nimport { useMergeRefs } from \"../utils\";\n\ninterface ModalHeaderProps extends React.HTMLAttributes<HTMLHeadingElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const ModalHeader = forwardRef<HTMLHeadingElement, ModalHeaderProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"h1\";\n return (\n <Component\n className={clsx(\"hds-modal__header\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalHeader.displayName = \"Modal.Header\";\n\ninterface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n className={clsx(\"hds-modal__content\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalContent.displayName = \"Modal.Content\";\n\ninterface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"footer\";\n return (\n <Component\n className={clsx(\"hds-modal__footer\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalFooter.displayName = \"Modal.Footer\";\n\nexport interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {\n children: React.ReactNode;\n\n /**\n * Controls the open state of the modal\n */\n open?: boolean;\n\n /**\n * Whether to close when clicking on the backdrop.\n */\n closeOnBackdropClick?: boolean;\n}\n\n/**\n * A modal dialog is a window that forces the user to interact with it before they can return to other parts of the application.\n *\n * Uses the native [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element.\n *\n * @example\n * ```tsx\n * const modalRef = useRef<HTMLDialogElement>(null);\n * const onClose = () => modalRef.current?.close();\n *\n * return (\n * <>\n * <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>\n * <Modal ref={modalRef}>\n * <Modal.Header>Dialog header</Modal.Header>\n * <Modal.Content>\n * <p>\n * Dialog header Dialog description - a description of what is about to happen and maybe\n * something about the consequences.\n * </p>\n * </Modal.Content>\n * <Modal.Footer>\n * <HStack gap=\"16\" wrap>\n * <PrimaryButton onClick={onMainAction}>Main action</PrimaryButton>\n * <PrimaryButton fill=\"outline\" onClick={onClose}>\n * Cancel\n * </PrimaryButton>\n * </HStack>\n * </Modal.Footer>\n * </Modal>\n * </>\n * );\n * ```\n */\nexport const Modal = forwardRef<HTMLDialogElement, ModalProps>(\n ({ children, className, open, closeOnBackdropClick, onClick, ...rest }, ref) => {\n const modalRef = useRef<HTMLDialogElement>(null);\n const mergedRef = useMergeRefs([modalRef, ref]);\n\n // The X close button that comes from the `Box` component\n function onCloseButtonClick() {\n modalRef.current?.close();\n return false;\n }\n\n // No scroll when modal is open\n useScrollLock(modalRef, \"hds-modal-scroll-lock\");\n\n // `open` prop\n useEffect(() => {\n if (modalRef.current && open !== undefined) {\n if (open && !modalRef.current.open) {\n modalRef.current.showModal();\n } else if (!open && modalRef.current.open) {\n modalRef.current.close();\n }\n }\n }, [modalRef, open]);\n\n function onDialogClick(e: React.MouseEvent<HTMLElement>) {\n if (closeOnBackdropClick && e.target === modalRef.current) {\n modalRef.current.close();\n }\n onClick?.(e as React.MouseEvent<HTMLDialogElement>);\n }\n\n return (\n <Box\n asChild\n className={clsx(\"hds-modal\", className as undefined)}\n closeable\n onClick={onDialogClick}\n onClose={onCloseButtonClick}\n variant=\"white\"\n >\n <dialog ref={mergedRef} {...rest}>\n {children}\n </dialog>\n </Box>\n );\n },\n) as ModalType;\nModal.displayName = \"Modal\";\n\ntype ModalType = ReturnType<typeof forwardRef<HTMLDialogElement, ModalProps>> & {\n Header: typeof ModalHeader;\n Content: typeof ModalContent;\n Footer: typeof ModalFooter;\n};\n\nModal.Header = ModalHeader;\nModal.Content = ModalContent;\nModal.Footer = ModalFooter;\n\nfunction useScrollLock(modalRef: React.RefObject<HTMLDialogElement>, bodyClass: string) {\n useEffect(() => {\n if (!modalRef.current) return;\n if (modalRef.current.open) document.body.classList.add(bodyClass);\n\n const observer = new MutationObserver(() => {\n if (modalRef.current?.open) document.body.classList.add(bodyClass);\n else document.body.classList.remove(bodyClass);\n });\n observer.observe(modalRef.current, {\n attributes: true,\n attributeFilter: [\"open\"],\n });\n return () => {\n observer.disconnect();\n document.body.classList.remove(bodyClass);\n };\n }, [bodyClass, modalRef]);\n}\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n ({ className, ...rest }, ref) => {\n return (\n <button\n className={clsx(\"hds-box__close-button\", className as undefined)}\n ref={ref}\n type=\"button\"\n {...rest}\n />\n );\n },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n children?: React.ReactNode;\n\n /**\n * Color variant of the box\n *\n * @default \"light-grey\"\n */\n variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n\n /**\n * If `true`, a close button will be shown.\n * Use when you want to control the close button using the BoxCloseButton component.\n *\n * @default false\n */\n closeable?: boolean;\n\n /**\n * Callback fired when the component requests to be closed.\n * If not set, the component will be closed without any user interaction.\n *\n * If set, and the handler returns non-true value, the component will not be closed.\n * Use this if you want to control the closing of the component, using the `closed` prop\n *\n * If set, and the handler returns the true, the component will be closed.\n * Use this with `window.confirm()` to ask the user to confirm closing the component.\n */\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n onClose?: () => boolean | unknown;\n\n /**\n * If `true`, the box will be closed and hidden from view\n */\n closed?: boolean;\n\n /**\n * Props applied to the close button element.\n */\n closeButtonProps?: BoxCloseButtonProps;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n (\n {\n asChild,\n variant,\n closeable = false,\n onClose: onCloseProp,\n closed: closedProp,\n closeButtonProps,\n children,\n className,\n ...rest\n },\n ref,\n ) => {\n const [closedState, setClosedState] = useState(false);\n const onClose = useCallback(() => {\n if (onCloseProp) {\n const result = onCloseProp();\n if (result === true) {\n setClosedState(true);\n }\n } else {\n setClosedState(true);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n }, []);\n const closed = closedProp ?? closedState;\n const Component = asChild ? Slot : \"div\";\n\n return (\n <Component\n className={clsx(\n \"hds-box\",\n variant && `hds-box--${variant}`,\n { \"hds-box--closed\": closed },\n className as undefined,\n )}\n ref={ref}\n {...rest}\n >\n {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n <Slottable>{children}</Slottable>\n </Component>\n );\n },\n) as BoxType;\nBox.displayName = \"Box\";\n\nBox.CloseButton = BoxCloseButton;\n\ntype BoxType = ReturnType<typeof forwardRef<HTMLDivElement, BoxProps>> & {\n CloseButton: typeof BoxCloseButton;\n};\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n return React.useMemo(() => {\n if (refs.every((ref) => ref === null)) {\n return null;\n }\n\n return (value) => {\n refs.forEach((ref) => {\n if (typeof ref === \"function\") {\n ref(value);\n } else if (ref !== null) {\n (ref as React.MutableRefObject<Instance | null>).current = value;\n }\n });\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n const [width, setWidth] = useState<number>(0);\n const [height, setHeight] = useState<number>(0);\n const handleResize = useCallback(() => {\n if (ref?.current !== null) {\n setWidth(ref?.current?.offsetWidth ?? 0);\n setHeight(ref?.current?.offsetHeight ?? 0);\n }\n }, [ref]);\n useEffect(() => {\n window.addEventListener(\"load\", handleResize);\n window.addEventListener(\"resize\", handleResize);\n return () => {\n window.removeEventListener(\"load\", handleResize);\n window.removeEventListener(\"resize\", handleResize);\n };\n }, [ref, handleResize]);\n useEffect(() => {\n handleResize();\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, []);\n return { width, height };\n}\n\nfunction subscribe() {\n // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n return () => {};\n}\n\nexport function useHydrated() {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n if (element === document.body) return () => {};\n\n let inertElements: HTMLElement[] = [];\n for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n if (el === document.body) break;\n\n for (const sibling of el.parentElement?.children ?? []) {\n if (sibling === el) continue;\n if (!(sibling instanceof HTMLElement)) continue;\n if (sibling.hasAttribute(\"inert\")) continue;\n\n sibling.setAttribute(\"inert\", \"true\");\n inertElements.push(sibling);\n }\n }\n\n return () => {\n releaseFocusTrap(inertElements);\n inertElements = [];\n };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nexport function releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n for (const el of inertElements) {\n el.removeAttribute(\"inert\");\n }\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react_slot","import_react","import_jsx_runtime","_a"]}
|
package/dist/modal/index.mjs
CHANGED
|
@@ -1,16 +1,15 @@
|
|
|
1
|
+
import "../chunk-FYFJ75NX.mjs";
|
|
1
2
|
import {
|
|
2
|
-
|
|
3
|
-
} from "../chunk-CYEYGPRH.mjs";
|
|
4
|
-
import {
|
|
3
|
+
Modal,
|
|
5
4
|
ModalContent,
|
|
6
5
|
ModalFooter,
|
|
7
6
|
ModalHeader
|
|
8
|
-
} from "../chunk-
|
|
9
|
-
import "../chunk-
|
|
7
|
+
} from "../chunk-LCJSUBCZ.mjs";
|
|
8
|
+
import "../chunk-AJWSQEDP.mjs";
|
|
10
9
|
import "../chunk-DEX36MFK.mjs";
|
|
11
10
|
import "../chunk-R4SQKVDQ.mjs";
|
|
12
11
|
export {
|
|
13
|
-
|
|
12
|
+
Modal,
|
|
14
13
|
ModalContent,
|
|
15
14
|
ModalFooter,
|
|
16
15
|
ModalHeader
|