@postenbring/hedwig-react 0.0.76 → 0.0.77
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/_tsup-dts-rollup.d.mts +498 -492
- package/dist/_tsup-dts-rollup.d.ts +498 -492
- package/dist/accordion/accordion-content.js +20 -18
- package/dist/accordion/accordion-content.js.map +1 -1
- package/dist/accordion/accordion-content.mjs +1 -1
- package/dist/accordion/accordion-header.js +24 -22
- package/dist/accordion/accordion-header.js.map +1 -1
- package/dist/accordion/accordion-header.mjs +1 -1
- package/dist/accordion/accordion-item.js +2 -16
- package/dist/accordion/accordion-item.js.map +1 -1
- package/dist/accordion/accordion-item.mjs +1 -1
- package/dist/accordion/accordion.js +2 -2
- package/dist/accordion/accordion.js.map +1 -1
- package/dist/accordion/accordion.mjs +1 -1
- package/dist/accordion/index.js +48 -58
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs +7 -7
- package/dist/badge/badge.d.mts +2 -2
- package/dist/badge/badge.d.ts +2 -2
- package/dist/badge/badge.js +23 -30
- package/dist/badge/badge.js.map +1 -1
- package/dist/badge/badge.mjs +3 -3
- package/dist/badge/index.d.mts +2 -1
- package/dist/badge/index.d.ts +2 -1
- package/dist/badge/index.js +22 -29
- package/dist/badge/index.js.map +1 -1
- package/dist/badge/index.mjs +3 -3
- package/dist/box/box.js +5 -3
- package/dist/box/box.js.map +1 -1
- package/dist/box/box.mjs +1 -1
- package/dist/box/index.js +5 -3
- package/dist/box/index.js.map +1 -1
- package/dist/box/index.mjs +2 -2
- package/dist/breadcrumbs/breadcrumbs.js.map +1 -1
- package/dist/breadcrumbs/breadcrumbs.mjs +1 -1
- package/dist/breadcrumbs/index.js.map +1 -1
- package/dist/breadcrumbs/index.mjs +1 -1
- package/dist/button/button.d.mts +0 -1
- package/dist/button/button.d.ts +0 -1
- package/dist/button/button.js +15 -22
- package/dist/button/button.js.map +1 -1
- package/dist/button/button.mjs +1 -3
- package/dist/button/index.d.mts +0 -1
- package/dist/button/index.d.ts +0 -1
- package/dist/button/index.js +15 -20
- package/dist/button/index.js.map +1 -1
- package/dist/button/index.mjs +1 -1
- package/dist/card/card.d.mts +1 -1
- package/dist/card/card.d.ts +1 -1
- package/dist/card/card.js +63 -46
- package/dist/card/card.js.map +1 -1
- package/dist/card/card.mjs +1 -1
- package/dist/card/index.d.mts +3 -3
- package/dist/card/index.d.ts +3 -3
- package/dist/card/index.js +80 -59
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs +10 -2
- package/dist/chunk-2UWPZNXC.mjs +40 -0
- package/dist/chunk-2UWPZNXC.mjs.map +1 -0
- package/dist/chunk-3EFAPJ3H.mjs +44 -0
- package/dist/chunk-3EFAPJ3H.mjs.map +1 -0
- package/dist/{chunk-XVFQWVHO.mjs → chunk-3MQKXNZ6.mjs} +4 -2
- package/dist/chunk-3MQKXNZ6.mjs.map +1 -0
- package/dist/{chunk-NMMFIRLZ.mjs → chunk-3NL3TOZF.mjs} +2 -2
- package/dist/{chunk-DM4PJFLG.mjs → chunk-6N4TGRZB.mjs} +2 -2
- package/dist/{chunk-JDXYRFLJ.mjs → chunk-722MZPXO.mjs} +2 -2
- package/dist/chunk-7JDEN3T6.mjs +109 -0
- package/dist/chunk-7JDEN3T6.mjs.map +1 -0
- package/dist/{chunk-HMB4TY2F.mjs → chunk-7W4HONVO.mjs} +3 -3
- package/dist/{chunk-62F4I3MQ.mjs → chunk-A2H2LAII.mjs} +3 -17
- package/dist/chunk-A2H2LAII.mjs.map +1 -0
- package/dist/{chunk-YC7MT6SO.mjs → chunk-A4ME3VXV.mjs} +2 -2
- package/dist/chunk-ACEYO4LN.mjs +33 -0
- package/dist/chunk-ACEYO4LN.mjs.map +1 -0
- package/dist/{chunk-VVPJOVFP.mjs → chunk-AXKJB47E.mjs} +1 -1
- package/dist/chunk-AXKJB47E.mjs.map +1 -0
- package/dist/{chunk-UWTGHSWT.mjs → chunk-CCVZAHYA.mjs} +11 -6
- package/dist/chunk-CCVZAHYA.mjs.map +1 -0
- package/dist/chunk-CIHZDFSQ.mjs +148 -0
- package/dist/chunk-CIHZDFSQ.mjs.map +1 -0
- package/dist/chunk-COEZA7WA.mjs +30 -0
- package/dist/chunk-COEZA7WA.mjs.map +1 -0
- package/dist/chunk-CSXSUQ2M.mjs +1 -0
- package/dist/chunk-CSXSUQ2M.mjs.map +1 -0
- package/dist/{chunk-4GSNPCNT.mjs → chunk-CYEYGPRH.mjs} +2 -2
- package/dist/{chunk-E2AG5TUR.mjs → chunk-DCCQXWD6.mjs} +4 -4
- package/dist/{chunk-JXA3B33M.mjs → chunk-DEX36MFK.mjs} +1 -1
- package/dist/chunk-DEX36MFK.mjs.map +1 -0
- package/dist/chunk-DFU2THGC.mjs +31 -0
- package/dist/chunk-DFU2THGC.mjs.map +1 -0
- package/dist/{chunk-EGXM575K.mjs → chunk-ENKVTAJB.mjs} +6 -4
- package/dist/chunk-ENKVTAJB.mjs.map +1 -0
- package/dist/{chunk-25R7DBK6.mjs → chunk-ES6ISHOV.mjs} +1 -1
- package/dist/chunk-ES6ISHOV.mjs.map +1 -0
- package/dist/{chunk-PYR6QEIS.mjs → chunk-FCPQXZQV.mjs} +12 -12
- package/dist/chunk-FCPQXZQV.mjs.map +1 -0
- package/dist/{chunk-57SSGJ4X.mjs → chunk-GGQB2WWD.mjs} +6 -3
- package/dist/chunk-GGQB2WWD.mjs.map +1 -0
- package/dist/chunk-GSJPTZT3.mjs +121 -0
- package/dist/chunk-GSJPTZT3.mjs.map +1 -0
- package/dist/{chunk-S3BGPCLK.mjs → chunk-HFXVRPBA.mjs} +13 -26
- package/dist/chunk-HFXVRPBA.mjs.map +1 -0
- package/dist/{chunk-Z753E3XF.mjs → chunk-HMATZX4A.mjs} +1 -1
- package/dist/chunk-HMATZX4A.mjs.map +1 -0
- package/dist/{chunk-S5RB7KLJ.mjs → chunk-I3ZIMS72.mjs} +4 -2
- package/dist/chunk-I3ZIMS72.mjs.map +1 -0
- package/dist/{chunk-EJ7ANN7M.mjs → chunk-IKJJWKXM.mjs} +2 -2
- package/dist/{chunk-A47QULAK.mjs → chunk-JF3HBGAA.mjs} +10 -6
- package/dist/chunk-JF3HBGAA.mjs.map +1 -0
- package/dist/{chunk-KTRIVJM3.mjs → chunk-JL4PLDXN.mjs} +2 -2
- package/dist/{chunk-UXJIK76H.mjs → chunk-K3CBNVXC.mjs} +3 -5
- package/dist/chunk-K3CBNVXC.mjs.map +1 -0
- package/dist/{chunk-BWFFP6BB.mjs → chunk-KEKPEN2C.mjs} +17 -23
- package/dist/chunk-KEKPEN2C.mjs.map +1 -0
- package/dist/{chunk-VRIY65P5.mjs → chunk-KPGSRU4I.mjs} +3 -3
- package/dist/chunk-KPGSRU4I.mjs.map +1 -0
- package/dist/{chunk-CSAEHQ4R.mjs → chunk-LTTJWLS7.mjs} +2 -2
- package/dist/{chunk-5QL53TR2.mjs → chunk-MJ2DZH3N.mjs} +4 -2
- package/dist/chunk-MJ2DZH3N.mjs.map +1 -0
- package/dist/{chunk-DFH4YKQA.mjs → chunk-NAIBK23T.mjs} +2 -2
- package/dist/chunk-P6KBFRF4.mjs +54 -0
- package/dist/chunk-P6KBFRF4.mjs.map +1 -0
- package/dist/{chunk-TNU64NUN.mjs → chunk-P6WIBHQH.mjs} +2 -2
- package/dist/{chunk-E2RTLHMZ.mjs → chunk-PLXB3TNA.mjs} +2 -2
- package/dist/chunk-PLXB3TNA.mjs.map +1 -0
- package/dist/chunk-PT5H3QV6.mjs +29 -0
- package/dist/chunk-PT5H3QV6.mjs.map +1 -0
- package/dist/{chunk-5YMUST7H.mjs → chunk-QY2K3GWU.mjs} +3 -3
- package/dist/{chunk-6NGF7FFY.mjs → chunk-RYM3LM7K.mjs} +2 -2
- package/dist/{chunk-ME66RUR6.mjs → chunk-TQDUBRCZ.mjs} +7 -4
- package/dist/chunk-TQDUBRCZ.mjs.map +1 -0
- package/dist/{chunk-ZDPU3N54.mjs → chunk-UB2R7TCG.mjs} +1 -1
- package/dist/chunk-UB2R7TCG.mjs.map +1 -0
- package/dist/{chunk-RHCMBJOT.mjs → chunk-UMYOYHUI.mjs} +3 -3
- package/dist/{chunk-I6GDRDYD.mjs → chunk-USXU6ULZ.mjs} +4 -2
- package/dist/chunk-USXU6ULZ.mjs.map +1 -0
- package/dist/{chunk-MGUYIOP2.mjs → chunk-W2MRIP5P.mjs} +1 -1
- package/dist/chunk-W2MRIP5P.mjs.map +1 -0
- package/dist/chunk-WHMIHTPC.mjs +41 -0
- package/dist/chunk-WHMIHTPC.mjs.map +1 -0
- package/dist/{chunk-PUESATBQ.mjs → chunk-XC3UHH2U.mjs} +31 -45
- package/dist/chunk-XC3UHH2U.mjs.map +1 -0
- package/dist/{chunk-MKC7HZCM.mjs → chunk-XUWZ4HGD.mjs} +16 -15
- package/dist/chunk-XUWZ4HGD.mjs.map +1 -0
- package/dist/{chunk-GGEQEVZ4.mjs → chunk-YSFZCRWS.mjs} +1 -1
- package/dist/chunk-YSFZCRWS.mjs.map +1 -0
- package/dist/{chunk-XYIY6FHW.mjs → chunk-ZMLHJZQK.mjs} +9 -9
- package/dist/description-list/description-list.js.map +1 -1
- package/dist/description-list/description-list.mjs +1 -1
- package/dist/description-list/index.js.map +1 -1
- package/dist/description-list/index.mjs +1 -1
- package/dist/footer/footer.d.mts +1 -1
- package/dist/footer/footer.d.ts +1 -1
- package/dist/footer/footer.js +117 -134
- package/dist/footer/footer.js.map +1 -1
- package/dist/footer/footer.mjs +9 -9
- package/dist/footer/index.js +117 -134
- package/dist/footer/index.js.map +1 -1
- package/dist/footer/index.mjs +10 -10
- package/dist/form/checkbox/checkbox.js +25 -19
- package/dist/form/checkbox/checkbox.js.map +1 -1
- package/dist/form/checkbox/checkbox.mjs +3 -3
- package/dist/form/checkbox/index.js +25 -19
- package/dist/form/checkbox/index.js.map +1 -1
- package/dist/form/checkbox/index.mjs +3 -3
- package/dist/form/date-picker/date-picker.js +28 -22
- package/dist/form/date-picker/date-picker.js.map +1 -1
- package/dist/form/date-picker/date-picker.mjs +4 -4
- package/dist/form/date-picker/index.js +28 -22
- package/dist/form/date-picker/index.js.map +1 -1
- package/dist/form/date-picker/index.mjs +4 -4
- package/dist/form/error-message/error-message.d.mts +1 -1
- package/dist/form/error-message/error-message.d.ts +1 -1
- package/dist/form/error-message/error-message.js +46 -11
- package/dist/form/error-message/error-message.js.map +1 -1
- package/dist/form/error-message/error-message.mjs +1 -1
- package/dist/form/error-message/index.js +46 -11
- package/dist/form/error-message/index.js.map +1 -1
- package/dist/form/error-message/index.mjs +1 -1
- package/dist/form/fieldset/fieldset.js +22 -16
- package/dist/form/fieldset/fieldset.js.map +1 -1
- package/dist/form/fieldset/fieldset.mjs +2 -2
- package/dist/form/fieldset/index.js +22 -16
- package/dist/form/fieldset/index.js.map +1 -1
- package/dist/form/fieldset/index.mjs +2 -2
- package/dist/form/index.js +48 -42
- package/dist/form/index.js.map +1 -1
- package/dist/form/index.mjs +11 -11
- package/dist/form/input/index.js +26 -20
- package/dist/form/input/index.js.map +1 -1
- package/dist/form/input/index.mjs +3 -3
- package/dist/form/input/input.js +26 -20
- package/dist/form/input/input.js.map +1 -1
- package/dist/form/input/input.mjs +3 -3
- package/dist/form/input-group/index.js +24 -18
- package/dist/form/input-group/index.js.map +1 -1
- package/dist/form/input-group/index.mjs +2 -2
- package/dist/form/input-group/input-group.js +24 -18
- package/dist/form/input-group/input-group.js.map +1 -1
- package/dist/form/input-group/input-group.mjs +2 -2
- package/dist/form/radiobutton/index.js +28 -22
- package/dist/form/radiobutton/index.js.map +1 -1
- package/dist/form/radiobutton/index.mjs +4 -4
- package/dist/form/radiobutton/radiobutton.js +28 -22
- package/dist/form/radiobutton/radiobutton.js.map +1 -1
- package/dist/form/radiobutton/radiobutton.mjs +4 -4
- package/dist/form/radiobutton/radiogroup.js +25 -19
- package/dist/form/radiobutton/radiogroup.js.map +1 -1
- package/dist/form/radiobutton/radiogroup.mjs +3 -3
- package/dist/form/select/index.js +26 -20
- package/dist/form/select/index.js.map +1 -1
- package/dist/form/select/index.mjs +3 -3
- package/dist/form/select/select.js +26 -20
- package/dist/form/select/select.js.map +1 -1
- package/dist/form/select/select.mjs +3 -3
- package/dist/form/textarea/index.js +26 -20
- package/dist/form/textarea/index.js.map +1 -1
- package/dist/form/textarea/index.mjs +3 -3
- package/dist/form/textarea/textarea.js +26 -20
- package/dist/form/textarea/textarea.js.map +1 -1
- package/dist/form/textarea/textarea.mjs +3 -3
- package/dist/help-text/help-text.js +5 -3
- package/dist/help-text/help-text.js.map +1 -1
- package/dist/help-text/help-text.mjs +3 -3
- package/dist/help-text/index.js +5 -3
- package/dist/help-text/index.js.map +1 -1
- package/dist/help-text/index.mjs +3 -3
- package/dist/index-no-css.d.mts +12 -20
- package/dist/index-no-css.d.ts +12 -20
- package/dist/index-no-css.js +615 -614
- package/dist/index-no-css.js.map +1 -1
- package/dist/index-no-css.mjs +85 -92
- package/dist/index.d.mts +12 -20
- package/dist/index.d.ts +12 -20
- package/dist/index.js +615 -614
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +85 -92
- package/dist/index.mjs.map +1 -1
- package/dist/layout/container/container.js +3 -1
- package/dist/layout/container/container.js.map +1 -1
- package/dist/layout/container/container.mjs +1 -1
- package/dist/layout/grid/grid.js.map +1 -1
- package/dist/layout/grid/grid.mjs +1 -1
- package/dist/layout/grid/index.js.map +1 -1
- package/dist/layout/grid/index.mjs +2 -2
- package/dist/layout/index.js +8 -6
- package/dist/layout/index.js.map +1 -1
- package/dist/layout/index.mjs +4 -4
- package/dist/layout/stack/index.js.map +1 -1
- package/dist/layout/stack/index.mjs +1 -1
- package/dist/layout/stack/stack.js.map +1 -1
- package/dist/layout/stack/stack.mjs +1 -1
- package/dist/link/index.js +3 -1
- package/dist/link/index.js.map +1 -1
- package/dist/link/index.mjs +1 -1
- package/dist/link/link.js +3 -1
- package/dist/link/link.js.map +1 -1
- package/dist/link/link.mjs +1 -1
- package/dist/list/index.js +39 -31
- package/dist/list/index.js.map +1 -1
- package/dist/list/index.mjs +2 -2
- package/dist/list/link-list.d.mts +1 -1
- package/dist/list/link-list.d.ts +1 -1
- package/dist/list/link-list.js +39 -31
- package/dist/list/link-list.js.map +1 -1
- package/dist/list/link-list.mjs +2 -2
- package/dist/list/list.d.mts +1 -1
- package/dist/list/list.d.ts +1 -1
- package/dist/list/list.js +26 -26
- package/dist/list/list.js.map +1 -1
- package/dist/list/list.mjs +1 -1
- package/dist/message/index.js +10 -5
- package/dist/message/index.js.map +1 -1
- package/dist/message/index.mjs +3 -3
- package/dist/message/message.js +10 -5
- package/dist/message/message.js.map +1 -1
- package/dist/message/message.mjs +2 -2
- package/dist/modal/index.d.mts +0 -1
- package/dist/modal/index.d.ts +0 -1
- package/dist/modal/index.js +17 -13
- package/dist/modal/index.js.map +1 -1
- package/dist/modal/index.mjs +4 -4
- package/dist/modal/modal.d.mts +0 -1
- package/dist/modal/modal.d.ts +0 -1
- package/dist/modal/modal.js +19 -17
- package/dist/modal/modal.js.map +1 -1
- package/dist/modal/modal.mjs +5 -7
- package/dist/navbar/icons.js.map +1 -1
- package/dist/navbar/icons.mjs +1 -1
- package/dist/navbar/index.d.mts +7 -1
- package/dist/navbar/index.d.ts +7 -1
- package/dist/navbar/index.js +87 -39
- package/dist/navbar/index.js.map +1 -1
- package/dist/navbar/index.mjs +19 -7
- package/dist/navbar/navbar-expandable-menu.d.mts +3 -3
- package/dist/navbar/navbar-expandable-menu.d.ts +3 -3
- package/dist/navbar/navbar-expandable-menu.js +9 -9
- package/dist/navbar/navbar-expandable-menu.js.map +1 -1
- package/dist/navbar/navbar-expandable-menu.mjs +3 -3
- package/dist/navbar/navbar.d.mts +4 -1
- package/dist/navbar/navbar.d.ts +4 -1
- package/dist/navbar/navbar.js +64 -24
- package/dist/navbar/navbar.js.map +1 -1
- package/dist/navbar/navbar.mjs +9 -3
- package/dist/show-more/index.js +1 -3
- package/dist/show-more/index.js.map +1 -1
- package/dist/show-more/index.mjs +3 -3
- package/dist/show-more/show-more.js.map +1 -1
- package/dist/show-more/show-more.mjs +1 -1
- package/dist/skeleton/index.js +9 -5
- package/dist/skeleton/index.js.map +1 -1
- package/dist/skeleton/index.mjs +1 -1
- package/dist/skeleton/skeleton.js +9 -5
- package/dist/skeleton/skeleton.js.map +1 -1
- package/dist/skeleton/skeleton.mjs +1 -1
- package/dist/styled-html/index.js +3 -1
- package/dist/styled-html/index.js.map +1 -1
- package/dist/styled-html/index.mjs +1 -1
- package/dist/styled-html/styled-html.js +3 -1
- package/dist/styled-html/styled-html.js.map +1 -1
- package/dist/styled-html/styled-html.mjs +1 -1
- package/dist/tabs/index.d.mts +2 -2
- package/dist/tabs/index.d.ts +2 -2
- package/dist/tabs/index.js +73 -63
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +5 -5
- package/dist/tabs/tabs-content.d.mts +1 -1
- package/dist/tabs/tabs-content.d.ts +1 -1
- package/dist/tabs/tabs-content.js +10 -5
- package/dist/tabs/tabs-content.js.map +1 -1
- package/dist/tabs/tabs-content.mjs +1 -1
- package/dist/tabs/tabs-list.d.mts +1 -1
- package/dist/tabs/tabs-list.d.ts +1 -1
- package/dist/tabs/tabs-list.js +60 -57
- package/dist/tabs/tabs-list.js.map +1 -1
- package/dist/tabs/tabs-list.mjs +2 -2
- package/dist/tabs/tabs.js +3 -1
- package/dist/tabs/tabs.js.map +1 -1
- package/dist/tabs/tabs.mjs +1 -1
- package/dist/text/index.d.mts +0 -13
- package/dist/text/index.d.ts +0 -13
- package/dist/text/index.js +7 -68
- package/dist/text/index.js.map +1 -1
- package/dist/text/index.mjs +3 -30
- package/dist/text/text.js +5 -2
- package/dist/text/text.js.map +1 -1
- package/dist/text/text.mjs +1 -1
- package/dist/utilities/auto-animate-height.js +1 -3
- package/dist/utilities/auto-animate-height.js.map +1 -1
- package/dist/utilities/auto-animate-height.mjs +2 -2
- package/dist/utilities/index.js +1 -3
- package/dist/utilities/index.js.map +1 -1
- package/dist/utilities/index.mjs +2 -2
- package/dist/utils.d.mts +0 -1
- package/dist/utils.d.ts +0 -1
- package/dist/utils.js.map +1 -1
- package/dist/utils.mjs +1 -1
- package/dist/warning-banner/index.js +34 -46
- package/dist/warning-banner/index.js.map +1 -1
- package/dist/warning-banner/index.mjs +3 -3
- package/dist/warning-banner/warning-banner.js +34 -46
- package/dist/warning-banner/warning-banner.js.map +1 -1
- package/dist/warning-banner/warning-banner.mjs +3 -3
- package/package.json +5 -5
- package/dist/chunk-25R7DBK6.mjs.map +0 -1
- package/dist/chunk-57SSGJ4X.mjs.map +0 -1
- package/dist/chunk-5QL53TR2.mjs.map +0 -1
- package/dist/chunk-625SVQEP.mjs +0 -84
- package/dist/chunk-625SVQEP.mjs.map +0 -1
- package/dist/chunk-62F4I3MQ.mjs.map +0 -1
- package/dist/chunk-A47QULAK.mjs.map +0 -1
- package/dist/chunk-BWFFP6BB.mjs.map +0 -1
- package/dist/chunk-E2RTLHMZ.mjs.map +0 -1
- package/dist/chunk-EGXM575K.mjs.map +0 -1
- package/dist/chunk-FYNTNGIY.mjs +0 -61
- package/dist/chunk-FYNTNGIY.mjs.map +0 -1
- package/dist/chunk-GGEQEVZ4.mjs.map +0 -1
- package/dist/chunk-GJDRW6PA.mjs +0 -22
- package/dist/chunk-GJDRW6PA.mjs.map +0 -1
- package/dist/chunk-GUB3UCXO.mjs +0 -38
- package/dist/chunk-GUB3UCXO.mjs.map +0 -1
- package/dist/chunk-I6GDRDYD.mjs.map +0 -1
- package/dist/chunk-IL7576PP.mjs +0 -19
- package/dist/chunk-IL7576PP.mjs.map +0 -1
- package/dist/chunk-JXA3B33M.mjs.map +0 -1
- package/dist/chunk-ME66RUR6.mjs.map +0 -1
- package/dist/chunk-MF2AREPQ.mjs +0 -28
- package/dist/chunk-MF2AREPQ.mjs.map +0 -1
- package/dist/chunk-MGUYIOP2.mjs.map +0 -1
- package/dist/chunk-MKC7HZCM.mjs.map +0 -1
- package/dist/chunk-PMLDK3VC.mjs +0 -39
- package/dist/chunk-PMLDK3VC.mjs.map +0 -1
- package/dist/chunk-PUESATBQ.mjs.map +0 -1
- package/dist/chunk-PYR6QEIS.mjs.map +0 -1
- package/dist/chunk-S3BGPCLK.mjs.map +0 -1
- package/dist/chunk-S5RB7KLJ.mjs.map +0 -1
- package/dist/chunk-SRLRTLHS.mjs +0 -106
- package/dist/chunk-SRLRTLHS.mjs.map +0 -1
- package/dist/chunk-UWTGHSWT.mjs.map +0 -1
- package/dist/chunk-UXJIK76H.mjs.map +0 -1
- package/dist/chunk-VRIY65P5.mjs.map +0 -1
- package/dist/chunk-VVPJOVFP.mjs.map +0 -1
- package/dist/chunk-W3D4VR4Y.mjs +0 -61
- package/dist/chunk-W3D4VR4Y.mjs.map +0 -1
- package/dist/chunk-X5JERDDU.mjs +0 -131
- package/dist/chunk-X5JERDDU.mjs.map +0 -1
- package/dist/chunk-XE4UZBL2.mjs +0 -33
- package/dist/chunk-XE4UZBL2.mjs.map +0 -1
- package/dist/chunk-XVFQWVHO.mjs.map +0 -1
- package/dist/chunk-YXHXRUFX.mjs +0 -42
- package/dist/chunk-YXHXRUFX.mjs.map +0 -1
- package/dist/chunk-Z753E3XF.mjs.map +0 -1
- package/dist/chunk-ZDPU3N54.mjs.map +0 -1
- /package/dist/{chunk-NMMFIRLZ.mjs.map → chunk-3NL3TOZF.mjs.map} +0 -0
- /package/dist/{chunk-DM4PJFLG.mjs.map → chunk-6N4TGRZB.mjs.map} +0 -0
- /package/dist/{chunk-JDXYRFLJ.mjs.map → chunk-722MZPXO.mjs.map} +0 -0
- /package/dist/{chunk-HMB4TY2F.mjs.map → chunk-7W4HONVO.mjs.map} +0 -0
- /package/dist/{chunk-YC7MT6SO.mjs.map → chunk-A4ME3VXV.mjs.map} +0 -0
- /package/dist/{chunk-4GSNPCNT.mjs.map → chunk-CYEYGPRH.mjs.map} +0 -0
- /package/dist/{chunk-E2AG5TUR.mjs.map → chunk-DCCQXWD6.mjs.map} +0 -0
- /package/dist/{chunk-EJ7ANN7M.mjs.map → chunk-IKJJWKXM.mjs.map} +0 -0
- /package/dist/{chunk-KTRIVJM3.mjs.map → chunk-JL4PLDXN.mjs.map} +0 -0
- /package/dist/{chunk-CSAEHQ4R.mjs.map → chunk-LTTJWLS7.mjs.map} +0 -0
- /package/dist/{chunk-DFH4YKQA.mjs.map → chunk-NAIBK23T.mjs.map} +0 -0
- /package/dist/{chunk-TNU64NUN.mjs.map → chunk-P6WIBHQH.mjs.map} +0 -0
- /package/dist/{chunk-5YMUST7H.mjs.map → chunk-QY2K3GWU.mjs.map} +0 -0
- /package/dist/{chunk-6NGF7FFY.mjs.map → chunk-RYM3LM7K.mjs.map} +0 -0
- /package/dist/{chunk-RHCMBJOT.mjs.map → chunk-UMYOYHUI.mjs.map} +0 -0
- /package/dist/{chunk-XYIY6FHW.mjs.map → chunk-ZMLHJZQK.mjs.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/form/checkbox/checkbox.tsx","../../../src/form/error-message/error-message.tsx","../../../src/form/fieldset/fieldset.tsx"],"sourcesContent":["import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\nimport { useFieldsetContext } from \"../fieldset\";\n\nexport type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"defaultValue\"> & {\n children: ReactNode;\n variant?: \"plain\" | \"bounding-box\";\n title?: string;\n} & (\n | {\n /**\n * Set to `true` to add error styling. The component will take care of aria to indicate invalid state.\n *\n * Normally you don't need this, as you should wrap your Checkboxes in the Fieldset component.\n * When providing an errorMessage to Fieldset, all contained Checkboxes will get correct hasError state.\n *\n * You can use this when your checkbox is part of a non-HDS fieldset which shows an error message.\n */\n hasError?: boolean;\n errorMessage?: never;\n }\n | {\n hasError?: never;\n /**\n * Set an error message to add error styling, and display the error message.\n * The component will take care of aria to connect the error message to the checkbox.\n *\n * Use this when your checkbox is standalone (not part of a fieldset).\n */\n errorMessage?: ReactNode;\n }\n );\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n variant = \"plain\",\n hasError: hasErrorProp,\n errorMessage,\n title,\n children,\n className,\n ...rest\n },\n ref,\n ) => {\n const errorMessageId = useId();\n const { hasError: hasFieldsetError } = useFieldsetContext();\n const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;\n\n return (\n <div className={clsx(\"hds-checkbox-wrapper\")}>\n <div\n className={clsx(\n \"hds-checkbox\",\n {\n [`hds-checkbox--${variant}`]: variant === \"bounding-box\",\n \"hds-checkbox--error\": hasError,\n },\n className as undefined,\n )}\n >\n <label>\n <input\n {...rest}\n aria-invalid={hasError ? true : undefined}\n aria-describedby={errorMessage ? errorMessageId : undefined}\n ref={ref}\n type=\"checkbox\"\n />\n <span aria-hidden className=\"hds-checkbox__checkmark\" />\n {title ? <p className=\"hds-checkbox__title\">{title}</p> : children}\n </label>\n {title ? children : null}\n </div>\n {errorMessage ? <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage> : null}\n </div>\n );\n },\n);\nCheckbox.displayName = \"Checkbox\";\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type
|
|
1
|
+
{"version":3,"sources":["../../../src/form/checkbox/checkbox.tsx","../../../src/form/error-message/error-message.tsx","../../../src/form/fieldset/fieldset.tsx"],"sourcesContent":["import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\nimport { useFieldsetContext } from \"../fieldset\";\n\nexport type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"defaultValue\"> & {\n children: ReactNode;\n variant?: \"plain\" | \"bounding-box\";\n title?: string;\n} & (\n | {\n /**\n * Set to `true` to add error styling. The component will take care of aria to indicate invalid state.\n *\n * Normally you don't need this, as you should wrap your Checkboxes in the Fieldset component.\n * When providing an errorMessage to Fieldset, all contained Checkboxes will get correct hasError state.\n *\n * You can use this when your checkbox is part of a non-HDS fieldset which shows an error message.\n */\n hasError?: boolean;\n errorMessage?: never;\n }\n | {\n hasError?: never;\n /**\n * Set an error message to add error styling, and display the error message.\n * The component will take care of aria to connect the error message to the checkbox.\n *\n * Use this when your checkbox is standalone (not part of a fieldset).\n */\n errorMessage?: ReactNode;\n }\n );\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n variant = \"plain\",\n hasError: hasErrorProp,\n errorMessage,\n title,\n children,\n className,\n ...rest\n },\n ref,\n ) => {\n const errorMessageId = useId();\n const { hasError: hasFieldsetError } = useFieldsetContext();\n const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;\n\n return (\n <div className={clsx(\"hds-checkbox-wrapper\")}>\n <div\n className={clsx(\n \"hds-checkbox\",\n {\n [`hds-checkbox--${variant}`]: variant === \"bounding-box\",\n \"hds-checkbox--error\": hasError,\n },\n className as undefined,\n )}\n >\n <label>\n <input\n {...rest}\n aria-invalid={hasError ? true : undefined}\n aria-describedby={errorMessage ? errorMessageId : undefined}\n ref={ref}\n type=\"checkbox\"\n />\n <span aria-hidden className=\"hds-checkbox__checkmark\" />\n {title ? <p className=\"hds-checkbox__title\">{title}</p> : children}\n </label>\n {title ? children : null}\n </div>\n {errorMessage ? <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage> : null}\n </div>\n );\n },\n);\nCheckbox.displayName = \"Checkbox\";\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nexport interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n id: string;\n className?: string;\n}\n\nexport const ErrorMessage = forwardRef<HTMLDivElement, ErrorMessageProps>(\n ({ children, id, className, ...rest }) => {\n return (\n <div\n aria-live=\"assertive\"\n className={clsx(\"hds-error-message\", className as undefined)}\n id={id}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\nErrorMessage.displayName = \"ErrorMessage\";\n","import { useId, forwardRef, createContext, useContext } from \"react\";\nimport type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n className?: string;\n style?: CSSProperties;\n /**\n * Providing an errorMessage will also give contained Checkboxes or Radiobuttons\n * error styling and aria to indicate invalid state.\n *\n * For Radiobuttons you are even better off using RadioGroup.\n */\n errorMessage?: ReactNode;\n legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n legend: ReactNode;\n children: ReactNode;\n}\n\nconst FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });\n\nexport const useFieldsetContext = () => useContext(FieldsetContext);\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n {\n className,\n style,\n errorMessage,\n legendProps: { size: legendSize = \"default\", className: legendClassName, ...legendProps } = {},\n legend,\n children,\n ...rest\n },\n ref,\n) {\n const errorMessageId = useId();\n\n return (\n <fieldset\n aria-describedby={errorMessage ? errorMessageId : undefined}\n aria-invalid={errorMessage ? true : undefined}\n className={clsx(\"hds-fieldset\", className as undefined)}\n ref={ref}\n style={style}\n {...rest}\n >\n <legend\n className={clsx(\n \"hds-fieldset__legend\",\n { [`hds-fieldset__legend--${legendSize}`]: legendSize },\n legendClassName as undefined,\n )}\n {...legendProps}\n >\n {legend}\n </legend>\n <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>\n {children}\n </FieldsetContext.Provider>\n <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n </fieldset>\n );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,gBAA4E;AAC5E,IAAAC,0BAAqB;;;ACDrB,6BAAqB;AACrB,mBAA2C;AAWrC;AAHC,IAAM,mBAAe;AAAA,EAC1B,CAAC,OAAyC;AAAzC,iBAAE,YAAU,IAAI,UAVnB,IAUG,IAA8B,iBAA9B,IAA8B,CAA5B,YAAU,MAAI;AACf,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,eAAW,6BAAK,qBAAqB,SAAsB;AAAA,QAC3D;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;;;ACvB3B,IAAAC,gBAA6D;AAE7D,IAAAC,0BAAqB;AAqCjB,IAAAC,sBAAA;AAnBJ,IAAM,sBAAkB,6BAAqC,EAAE,UAAU,MAAM,CAAC;AAEzE,IAAM,qBAAqB,UAAM,0BAAW,eAAe;AAE3D,IAAM,eAAW,0BAA+C,SAASC,UAC9E,IASA,KACA;AAVA,eAIe;AAAA,IAHb;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,KAA+E,CAAC;AAAA,EA7BjG,IAyBE,IAIe,SAAE,QAAM,aAAa,WAAW,WAAW,gBA7B5D,IA6BiB,IAA+D,wBAA/D,IAA+D,CAA7D,QAA8B,eAJ/C,SAKE;AAAA;AAAA,IACA;AAAA,EA/BJ,IAyBE,IAOK,iBAPL,IAOK;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,qBAAiB,qBAAM;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,oBAAkB,eAAe,iBAAiB;AAAA,MAClD,gBAAc,eAAe,OAAO;AAAA,MACpC,eAAW,8BAAK,gBAAgB,SAAsB;AAAA,MACtD;AAAA,MACA;AAAA,OACI,OANL;AAAA,MAQC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT;AAAA,cACA,EAAE,CAAC,yBAAyB,UAAU,EAAE,GAAG,WAAW;AAAA,cACtD;AAAA,YACF;AAAA,aACI,cANL;AAAA,YAQE;AAAA;AAAA,QACH;AAAA,QACA,6CAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,QAAQ,YAAY,EAAE,GAChE,UACH;AAAA,QACA,6CAAC,gBAAa,IAAI,gBAAiB,wBAAa;AAAA;AAAA;AAAA,EAClD;AAEJ,CAAC;;;AFAS,IAAAC,sBAAA;AA7BH,IAAM,eAAW;AAAA,EACtB,CACE,IASA,QACG;AAVH,iBACE;AAAA,gBAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IA1CN,IAoCI,IAOK,iBAPL,IAOK;AAAA,MANH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,qBAAiB,qBAAM;AAC7B,UAAM,EAAE,UAAU,iBAAiB,IAAI,mBAAmB;AAC1D,UAAM,WAAW,CAAC,CAAC,gBAAgB,oBAAoB;AAEvD,WACE,8CAAC,SAAI,eAAW,8BAAK,sBAAsB,GACzC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,YACT;AAAA,YACA;AAAA,cACE,CAAC,iBAAiB,OAAO,EAAE,GAAG,YAAY;AAAA,cAC1C,uBAAuB;AAAA,YACzB;AAAA,YACA;AAAA,UACF;AAAA,UAEA;AAAA,0DAAC,WACC;AAAA;AAAA,gBAAC;AAAA,iDACK,OADL;AAAA,kBAEC,gBAAc,WAAW,OAAO;AAAA,kBAChC,oBAAkB,eAAe,iBAAiB;AAAA,kBAClD;AAAA,kBACA,MAAK;AAAA;AAAA,cACP;AAAA,cACA,6CAAC,UAAK,eAAW,MAAC,WAAU,2BAA0B;AAAA,cACrD,QAAQ,6CAAC,OAAE,WAAU,uBAAuB,iBAAM,IAAO;AAAA,eAC5D;AAAA,YACC,QAAQ,WAAW;AAAA;AAAA;AAAA,MACtB;AAAA,MACC,eAAe,6CAAC,gBAAa,IAAI,gBAAiB,wBAAa,IAAkB;AAAA,OACpF;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":["import_react","import_typed_classname","import_react","import_typed_classname","import_jsx_runtime","Fieldset","import_jsx_runtime"]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Checkbox
|
|
3
|
-
} from "../../chunk-
|
|
3
|
+
} from "../../chunk-UMYOYHUI.mjs";
|
|
4
4
|
import "../../chunk-LMF3QGSF.mjs";
|
|
5
|
-
import "../../chunk-
|
|
5
|
+
import "../../chunk-6N4TGRZB.mjs";
|
|
6
6
|
import "../../chunk-NSLSA7F7.mjs";
|
|
7
|
-
import "../../chunk-
|
|
7
|
+
import "../../chunk-DFU2THGC.mjs";
|
|
8
8
|
import "../../chunk-R4SQKVDQ.mjs";
|
|
9
9
|
export {
|
|
10
10
|
Checkbox
|
|
@@ -54,31 +54,37 @@ __export(checkbox_exports, {
|
|
|
54
54
|
module.exports = __toCommonJS(checkbox_exports);
|
|
55
55
|
|
|
56
56
|
// src/form/checkbox/checkbox.tsx
|
|
57
|
-
var
|
|
57
|
+
var import_react3 = require("react");
|
|
58
58
|
var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
|
|
59
59
|
|
|
60
60
|
// src/form/error-message/error-message.tsx
|
|
61
61
|
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
|
|
62
|
+
var import_react = require("react");
|
|
62
63
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
"
|
|
66
|
-
|
|
67
|
-
"
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
64
|
+
var ErrorMessage = (0, import_react.forwardRef)(
|
|
65
|
+
(_a) => {
|
|
66
|
+
var _b = _a, { children, id, className } = _b, rest = __objRest(_b, ["children", "id", "className"]);
|
|
67
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
68
|
+
"div",
|
|
69
|
+
__spreadProps(__spreadValues({
|
|
70
|
+
"aria-live": "assertive",
|
|
71
|
+
className: (0, import_typed_classname.clsx)("hds-error-message", className),
|
|
72
|
+
id
|
|
73
|
+
}, rest), {
|
|
74
|
+
children
|
|
75
|
+
})
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
ErrorMessage.displayName = "ErrorMessage";
|
|
74
80
|
|
|
75
81
|
// src/form/fieldset/fieldset.tsx
|
|
76
|
-
var
|
|
82
|
+
var import_react2 = require("react");
|
|
77
83
|
var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
|
|
78
84
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
79
|
-
var FieldsetContext = (0,
|
|
80
|
-
var useFieldsetContext = () => (0,
|
|
81
|
-
var Fieldset = (0,
|
|
85
|
+
var FieldsetContext = (0, import_react2.createContext)({ hasError: false });
|
|
86
|
+
var useFieldsetContext = () => (0, import_react2.useContext)(FieldsetContext);
|
|
87
|
+
var Fieldset = (0, import_react2.forwardRef)(function Fieldset2(_a, ref) {
|
|
82
88
|
var _b = _a, {
|
|
83
89
|
className,
|
|
84
90
|
style,
|
|
@@ -95,7 +101,7 @@ var Fieldset = (0, import_react.forwardRef)(function Fieldset2(_a, ref) {
|
|
|
95
101
|
"legend",
|
|
96
102
|
"children"
|
|
97
103
|
]);
|
|
98
|
-
const errorMessageId = (0,
|
|
104
|
+
const errorMessageId = (0, import_react2.useId)();
|
|
99
105
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
100
106
|
"fieldset",
|
|
101
107
|
__spreadProps(__spreadValues({
|
|
@@ -127,7 +133,7 @@ var Fieldset = (0, import_react.forwardRef)(function Fieldset2(_a, ref) {
|
|
|
127
133
|
|
|
128
134
|
// src/form/checkbox/checkbox.tsx
|
|
129
135
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
130
|
-
var Checkbox = (0,
|
|
136
|
+
var Checkbox = (0, import_react3.forwardRef)(
|
|
131
137
|
(_a, ref) => {
|
|
132
138
|
var _b = _a, {
|
|
133
139
|
variant = "plain",
|
|
@@ -144,7 +150,7 @@ var Checkbox = (0, import_react2.forwardRef)(
|
|
|
144
150
|
"children",
|
|
145
151
|
"className"
|
|
146
152
|
]);
|
|
147
|
-
const errorMessageId = (0,
|
|
153
|
+
const errorMessageId = (0, import_react3.useId)();
|
|
148
154
|
const { hasError: hasFieldsetError } = useFieldsetContext();
|
|
149
155
|
const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;
|
|
150
156
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_typed_classname3.clsx)("hds-checkbox-wrapper"), children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/form/checkbox/index.tsx","../../../src/form/checkbox/checkbox.tsx","../../../src/form/error-message/error-message.tsx","../../../src/form/fieldset/fieldset.tsx"],"sourcesContent":["export { Checkbox } from \"./checkbox\";\nexport type * from \"./checkbox\";\n","import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\nimport { useFieldsetContext } from \"../fieldset\";\n\nexport type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"defaultValue\"> & {\n children: ReactNode;\n variant?: \"plain\" | \"bounding-box\";\n title?: string;\n} & (\n | {\n /**\n * Set to `true` to add error styling. The component will take care of aria to indicate invalid state.\n *\n * Normally you don't need this, as you should wrap your Checkboxes in the Fieldset component.\n * When providing an errorMessage to Fieldset, all contained Checkboxes will get correct hasError state.\n *\n * You can use this when your checkbox is part of a non-HDS fieldset which shows an error message.\n */\n hasError?: boolean;\n errorMessage?: never;\n }\n | {\n hasError?: never;\n /**\n * Set an error message to add error styling, and display the error message.\n * The component will take care of aria to connect the error message to the checkbox.\n *\n * Use this when your checkbox is standalone (not part of a fieldset).\n */\n errorMessage?: ReactNode;\n }\n );\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n variant = \"plain\",\n hasError: hasErrorProp,\n errorMessage,\n title,\n children,\n className,\n ...rest\n },\n ref,\n ) => {\n const errorMessageId = useId();\n const { hasError: hasFieldsetError } = useFieldsetContext();\n const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;\n\n return (\n <div className={clsx(\"hds-checkbox-wrapper\")}>\n <div\n className={clsx(\n \"hds-checkbox\",\n {\n [`hds-checkbox--${variant}`]: variant === \"bounding-box\",\n \"hds-checkbox--error\": hasError,\n },\n className as undefined,\n )}\n >\n <label>\n <input\n {...rest}\n aria-invalid={hasError ? true : undefined}\n aria-describedby={errorMessage ? errorMessageId : undefined}\n ref={ref}\n type=\"checkbox\"\n />\n <span aria-hidden className=\"hds-checkbox__checkmark\" />\n {title ? <p className=\"hds-checkbox__title\">{title}</p> : children}\n </label>\n {title ? children : null}\n </div>\n {errorMessage ? <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage> : null}\n </div>\n );\n },\n);\nCheckbox.displayName = \"Checkbox\";\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type
|
|
1
|
+
{"version":3,"sources":["../../../src/form/checkbox/index.tsx","../../../src/form/checkbox/checkbox.tsx","../../../src/form/error-message/error-message.tsx","../../../src/form/fieldset/fieldset.tsx"],"sourcesContent":["export { Checkbox } from \"./checkbox\";\nexport type * from \"./checkbox\";\n","import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\nimport { useFieldsetContext } from \"../fieldset\";\n\nexport type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"defaultValue\"> & {\n children: ReactNode;\n variant?: \"plain\" | \"bounding-box\";\n title?: string;\n} & (\n | {\n /**\n * Set to `true` to add error styling. The component will take care of aria to indicate invalid state.\n *\n * Normally you don't need this, as you should wrap your Checkboxes in the Fieldset component.\n * When providing an errorMessage to Fieldset, all contained Checkboxes will get correct hasError state.\n *\n * You can use this when your checkbox is part of a non-HDS fieldset which shows an error message.\n */\n hasError?: boolean;\n errorMessage?: never;\n }\n | {\n hasError?: never;\n /**\n * Set an error message to add error styling, and display the error message.\n * The component will take care of aria to connect the error message to the checkbox.\n *\n * Use this when your checkbox is standalone (not part of a fieldset).\n */\n errorMessage?: ReactNode;\n }\n );\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n variant = \"plain\",\n hasError: hasErrorProp,\n errorMessage,\n title,\n children,\n className,\n ...rest\n },\n ref,\n ) => {\n const errorMessageId = useId();\n const { hasError: hasFieldsetError } = useFieldsetContext();\n const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;\n\n return (\n <div className={clsx(\"hds-checkbox-wrapper\")}>\n <div\n className={clsx(\n \"hds-checkbox\",\n {\n [`hds-checkbox--${variant}`]: variant === \"bounding-box\",\n \"hds-checkbox--error\": hasError,\n },\n className as undefined,\n )}\n >\n <label>\n <input\n {...rest}\n aria-invalid={hasError ? true : undefined}\n aria-describedby={errorMessage ? errorMessageId : undefined}\n ref={ref}\n type=\"checkbox\"\n />\n <span aria-hidden className=\"hds-checkbox__checkmark\" />\n {title ? <p className=\"hds-checkbox__title\">{title}</p> : children}\n </label>\n {title ? children : null}\n </div>\n {errorMessage ? <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage> : null}\n </div>\n );\n },\n);\nCheckbox.displayName = \"Checkbox\";\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nexport interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n id: string;\n className?: string;\n}\n\nexport const ErrorMessage = forwardRef<HTMLDivElement, ErrorMessageProps>(\n ({ children, id, className, ...rest }) => {\n return (\n <div\n aria-live=\"assertive\"\n className={clsx(\"hds-error-message\", className as undefined)}\n id={id}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\nErrorMessage.displayName = \"ErrorMessage\";\n","import { useId, forwardRef, createContext, useContext } from \"react\";\nimport type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n className?: string;\n style?: CSSProperties;\n /**\n * Providing an errorMessage will also give contained Checkboxes or Radiobuttons\n * error styling and aria to indicate invalid state.\n *\n * For Radiobuttons you are even better off using RadioGroup.\n */\n errorMessage?: ReactNode;\n legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n legend: ReactNode;\n children: ReactNode;\n}\n\nconst FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });\n\nexport const useFieldsetContext = () => useContext(FieldsetContext);\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n {\n className,\n style,\n errorMessage,\n legendProps: { size: legendSize = \"default\", className: legendClassName, ...legendProps } = {},\n legend,\n children,\n ...rest\n },\n ref,\n) {\n const errorMessageId = useId();\n\n return (\n <fieldset\n aria-describedby={errorMessage ? errorMessageId : undefined}\n aria-invalid={errorMessage ? true : undefined}\n className={clsx(\"hds-fieldset\", className as undefined)}\n ref={ref}\n style={style}\n {...rest}\n >\n <legend\n className={clsx(\n \"hds-fieldset__legend\",\n { [`hds-fieldset__legend--${legendSize}`]: legendSize },\n legendClassName as undefined,\n )}\n {...legendProps}\n >\n {legend}\n </legend>\n <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>\n {children}\n </FieldsetContext.Provider>\n <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n </fieldset>\n );\n});\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react","import_typed_classname","import_jsx_runtime","Fieldset","import_jsx_runtime"]}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import "../../chunk-YJOOSTJC.mjs";
|
|
2
2
|
import {
|
|
3
3
|
Checkbox
|
|
4
|
-
} from "../../chunk-
|
|
4
|
+
} from "../../chunk-UMYOYHUI.mjs";
|
|
5
5
|
import "../../chunk-LMF3QGSF.mjs";
|
|
6
|
-
import "../../chunk-
|
|
6
|
+
import "../../chunk-6N4TGRZB.mjs";
|
|
7
7
|
import "../../chunk-NSLSA7F7.mjs";
|
|
8
|
-
import "../../chunk-
|
|
8
|
+
import "../../chunk-DFU2THGC.mjs";
|
|
9
9
|
import "../../chunk-R4SQKVDQ.mjs";
|
|
10
10
|
export {
|
|
11
11
|
Checkbox
|
|
@@ -62,31 +62,37 @@ __export(date_picker_exports, {
|
|
|
62
62
|
DatePicker: () => DatePicker
|
|
63
63
|
});
|
|
64
64
|
module.exports = __toCommonJS(date_picker_exports);
|
|
65
|
-
var
|
|
65
|
+
var import_react4 = require("react");
|
|
66
66
|
var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
|
|
67
67
|
|
|
68
68
|
// src/form/input-group/input-group.tsx
|
|
69
|
-
var
|
|
69
|
+
var import_react2 = require("react");
|
|
70
70
|
var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
|
|
71
71
|
|
|
72
72
|
// src/form/error-message/error-message.tsx
|
|
73
73
|
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
|
|
74
|
+
var import_react = require("react");
|
|
74
75
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
"
|
|
78
|
-
|
|
79
|
-
"
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
76
|
+
var ErrorMessage = (0, import_react.forwardRef)(
|
|
77
|
+
(_a) => {
|
|
78
|
+
var _b = _a, { children, id, className } = _b, rest = __objRest(_b, ["children", "id", "className"]);
|
|
79
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
80
|
+
"div",
|
|
81
|
+
__spreadProps(__spreadValues({
|
|
82
|
+
"aria-live": "assertive",
|
|
83
|
+
className: (0, import_typed_classname.clsx)("hds-error-message", className),
|
|
84
|
+
id
|
|
85
|
+
}, rest), {
|
|
86
|
+
children
|
|
87
|
+
})
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
);
|
|
91
|
+
ErrorMessage.displayName = "ErrorMessage";
|
|
86
92
|
|
|
87
93
|
// src/form/input-group/input-group.tsx
|
|
88
94
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
89
|
-
var InputGroup = (0,
|
|
95
|
+
var InputGroup = (0, import_react2.forwardRef)(function InputGroup2(_a, ref) {
|
|
90
96
|
var _b = _a, {
|
|
91
97
|
id,
|
|
92
98
|
className,
|
|
@@ -111,8 +117,8 @@ var InputGroup = (0, import_react.forwardRef)(function InputGroup2(_a, ref) {
|
|
|
111
117
|
"readOnly",
|
|
112
118
|
"children"
|
|
113
119
|
]);
|
|
114
|
-
const errorMessageId = (0,
|
|
115
|
-
const inputId = (0,
|
|
120
|
+
const errorMessageId = (0, import_react2.useId)();
|
|
121
|
+
const inputId = (0, import_react2.useId)();
|
|
116
122
|
const renderInput = () => {
|
|
117
123
|
var _a2;
|
|
118
124
|
const inputProps = {
|
|
@@ -124,11 +130,11 @@ var InputGroup = (0, import_react.forwardRef)(function InputGroup2(_a, ref) {
|
|
|
124
130
|
if (typeof children === "function") {
|
|
125
131
|
return children(inputProps);
|
|
126
132
|
}
|
|
127
|
-
const input =
|
|
128
|
-
if (!(0,
|
|
133
|
+
const input = import_react2.Children.toArray(children)[0];
|
|
134
|
+
if (!(0, import_react2.isValidElement)(input)) {
|
|
129
135
|
return;
|
|
130
136
|
}
|
|
131
|
-
return (0,
|
|
137
|
+
return (0, import_react2.cloneElement)(input, __spreadProps(__spreadValues(__spreadValues({}, inputProps), input.props), {
|
|
132
138
|
className: `${inputProps.className} ${(_a2 = input.props.className) != null ? _a2 : ""}`
|
|
133
139
|
}));
|
|
134
140
|
};
|
|
@@ -173,7 +179,7 @@ var InputGroup = (0, import_react.forwardRef)(function InputGroup2(_a, ref) {
|
|
|
173
179
|
|
|
174
180
|
// src/utils.ts
|
|
175
181
|
var React = __toESM(require("react"));
|
|
176
|
-
var
|
|
182
|
+
var import_react3 = require("react");
|
|
177
183
|
function useMergeRefs(refs) {
|
|
178
184
|
return React.useMemo(() => {
|
|
179
185
|
if (refs.every((ref) => ref === null)) {
|
|
@@ -193,7 +199,7 @@ function useMergeRefs(refs) {
|
|
|
193
199
|
|
|
194
200
|
// src/form/date-picker/date-picker.tsx
|
|
195
201
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
196
|
-
var DatePicker = (0,
|
|
202
|
+
var DatePicker = (0, import_react4.forwardRef)(function DatePicker2(_a, ref) {
|
|
197
203
|
var _b = _a, {
|
|
198
204
|
className,
|
|
199
205
|
variant,
|
|
@@ -217,7 +223,7 @@ var DatePicker = (0, import_react3.forwardRef)(function DatePicker2(_a, ref) {
|
|
|
217
223
|
"readOnly",
|
|
218
224
|
"calendarButtonTitle"
|
|
219
225
|
]);
|
|
220
|
-
const inputRef = (0,
|
|
226
|
+
const inputRef = (0, import_react4.useRef)(null);
|
|
221
227
|
const mergedRef = useMergeRefs([inputRef, ref]);
|
|
222
228
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
223
229
|
InputGroup,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/form/date-picker/date-picker.tsx","../../../src/form/input-group/input-group.tsx","../../../src/form/error-message/error-message.tsx","../../../src/utils.ts"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { InputGroup, type InputGroupProps } from \"../input-group\";\nimport { useMergeRefs } from \"../../utils\";\n\nexport type DatePickerProps = Omit<\n InputGroupProps & InputHTMLAttributes<HTMLInputElement>,\n \"children\" | \"type\"\n> & {\n /**\n * Accessible title for the calendar button\n *\n * This button currently only shows in Chrome.\n *\n * @defaultValue \"Åpne kalender\"\n */\n calendarButtonTitle?: string;\n};\n\n/**\n * A basic implementation of a date picker\n *\n * This date picker is an implementation of native date picker, as you get\n * with `<input type=\"date\" />`, where the input field is dressed in Hedwig styling.\n *\n * Due to accessibility concerns you will only see the appropriate Hedwig calendar\n * icon in Chrome. Firefox will show built in icon and Safari will show no icon.\n * Not tested in Edge.\n */\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(function DatePicker(\n {\n className,\n variant,\n errorMessage,\n labelProps,\n label,\n id,\n style,\n disabled,\n readOnly,\n calendarButtonTitle = \"Åpne kalender\",\n ...rest\n },\n ref,\n) {\n const inputRef = useRef<HTMLInputElement>(null);\n const mergedRef = useMergeRefs([inputRef, ref]);\n\n return (\n <InputGroup\n className={clsx(\"hds-date-picker\", className as undefined)}\n disabled={disabled}\n errorMessage={errorMessage}\n id={id}\n label={label}\n labelProps={labelProps}\n readOnly={readOnly}\n style={style}\n variant={variant}\n >\n {(inputProps) => (\n <>\n <input\n {...rest}\n {...inputProps}\n disabled={disabled}\n readOnly={readOnly}\n ref={mergedRef}\n type=\"date\"\n />\n <button\n className={clsx(\"hds-date-picker__calendar-button\")}\n type=\"button\"\n title={calendarButtonTitle}\n onClick={() => {\n inputRef.current?.showPicker();\n }}\n />\n </>\n )}\n </InputGroup>\n );\n});\n\nDatePicker.displayName = \"DatePicker\";\n","import { useId, forwardRef, Children, isValidElement, cloneElement } from \"react\";\nimport type { LabelHTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\ninterface InputProps {\n \"aria-describedby\"?: string;\n \"aria-invalid\"?: boolean;\n id?: string;\n className?: string;\n}\n\nexport interface InputGroupProps {\n id?: string;\n className?: string;\n style?: CSSProperties;\n variant?: \"default\" | \"white\";\n errorMessage?: ReactNode;\n labelProps?: LabelHTMLAttributes<HTMLLabelElement>;\n label: ReactNode;\n disabled?: boolean;\n readOnly?: boolean;\n /**\n * `children` must be either a single input element or a render function.\n *\n * If you use a render function, make sure you spread the input props to the appropriate element.\n */\n children: Exclude<ReactNode, Iterable<ReactNode>> | ((inputProps: InputProps) => ReactNode);\n}\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n {\n id,\n className,\n style,\n variant = \"default\",\n errorMessage,\n labelProps: { className: labelClassName, ...labelProps } = {},\n label,\n disabled,\n readOnly,\n children,\n ...rest\n },\n ref,\n) {\n const errorMessageId = useId();\n const inputId = useId();\n\n const renderInput = () => {\n const inputProps: InputProps = {\n \"aria-describedby\": errorMessage ? errorMessageId : undefined,\n \"aria-invalid\": errorMessage ? true : undefined,\n id: id ?? inputId,\n className: clsx(\"hds-input-group__input\"),\n };\n\n if (typeof children === \"function\") {\n return children(inputProps);\n }\n\n const input: ReactNode = Children.toArray(children)[0];\n\n if (!isValidElement<InputProps>(input)) {\n return;\n }\n\n return cloneElement<InputProps>(input, {\n ...inputProps,\n ...input.props,\n className: `${inputProps.className} ${input.props.className ?? \"\"}`,\n });\n };\n\n return (\n <div\n className={clsx(\n \"hds-input-group\",\n {\n [`hds-input-group--${variant}`]: variant,\n \"hds-input-group--error\": errorMessage,\n },\n className as undefined,\n )}\n ref={ref}\n style={style}\n {...rest}\n >\n <label\n className={clsx(\"hds-input-group__label\", labelClassName as undefined)}\n {...labelProps}\n htmlFor={id ?? inputId}\n >\n {label}\n </label>\n <div\n className={clsx(\"hds-input-group__input-wrapper\")}\n data-disabled={disabled}\n data-readonly={readOnly}\n >\n {renderInput()}\n </div>\n <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n </div>\n );\n});\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { ReactNode } from \"react\";\n\nexport interface ErrorMessageProps {\n children: ReactNode;\n id: string;\n className?: string;\n}\n\nexport function ErrorMessage({ children, id, className }: ErrorMessageProps) {\n return (\n <div\n aria-live=\"assertive\"\n className={clsx(\"hds-error-message\", className as undefined)}\n id={id}\n >\n {children}\n </div>\n );\n}\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n <As extends ElementType>(\n props: {\n /** Override html element */\n as?: As;\n } & ComponentProps &\n Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\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_typed_classname","import_jsx_runtime","InputGroup","_a","import_react","import_jsx_runtime","DatePicker","_a"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/form/date-picker/date-picker.tsx","../../../src/form/input-group/input-group.tsx","../../../src/form/error-message/error-message.tsx","../../../src/utils.ts"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { InputGroup, type InputGroupProps } from \"../input-group\";\nimport { useMergeRefs } from \"../../utils\";\n\nexport type DatePickerProps = Omit<\n InputGroupProps & InputHTMLAttributes<HTMLInputElement>,\n \"children\" | \"type\"\n> & {\n /**\n * Accessible title for the calendar button\n *\n * This button currently only shows in Chrome.\n *\n * @defaultValue \"Åpne kalender\"\n */\n calendarButtonTitle?: string;\n};\n\n/**\n * A basic implementation of a date picker\n *\n * This date picker is an implementation of native date picker, as you get\n * with `<input type=\"date\" />`, where the input field is dressed in Hedwig styling.\n *\n * Due to accessibility concerns you will only see the appropriate Hedwig calendar\n * icon in Chrome. Firefox will show built in icon and Safari will show no icon.\n * Not tested in Edge.\n */\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(function DatePicker(\n {\n className,\n variant,\n errorMessage,\n labelProps,\n label,\n id,\n style,\n disabled,\n readOnly,\n calendarButtonTitle = \"Åpne kalender\",\n ...rest\n },\n ref,\n) {\n const inputRef = useRef<HTMLInputElement>(null);\n const mergedRef = useMergeRefs([inputRef, ref]);\n\n return (\n <InputGroup\n className={clsx(\"hds-date-picker\", className as undefined)}\n disabled={disabled}\n errorMessage={errorMessage}\n id={id}\n label={label}\n labelProps={labelProps}\n readOnly={readOnly}\n style={style}\n variant={variant}\n >\n {(inputProps) => (\n <>\n <input\n {...rest}\n {...inputProps}\n disabled={disabled}\n readOnly={readOnly}\n ref={mergedRef}\n type=\"date\"\n />\n <button\n className={clsx(\"hds-date-picker__calendar-button\")}\n type=\"button\"\n title={calendarButtonTitle}\n onClick={() => {\n inputRef.current?.showPicker();\n }}\n />\n </>\n )}\n </InputGroup>\n );\n});\n\nDatePicker.displayName = \"DatePicker\";\n","import { useId, forwardRef, Children, isValidElement, cloneElement } from \"react\";\nimport type { LabelHTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\ninterface InputProps {\n \"aria-describedby\"?: string;\n \"aria-invalid\"?: boolean;\n id?: string;\n className?: string;\n}\n\nexport interface InputGroupProps {\n id?: string;\n className?: string;\n style?: CSSProperties;\n variant?: \"default\" | \"white\";\n errorMessage?: ReactNode;\n labelProps?: LabelHTMLAttributes<HTMLLabelElement>;\n label: ReactNode;\n disabled?: boolean;\n readOnly?: boolean;\n /**\n * `children` must be either a single input element or a render function.\n *\n * If you use a render function, make sure you spread the input props to the appropriate element.\n */\n children: Exclude<ReactNode, Iterable<ReactNode>> | ((inputProps: InputProps) => ReactNode);\n}\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n {\n id,\n className,\n style,\n variant = \"default\",\n errorMessage,\n labelProps: { className: labelClassName, ...labelProps } = {},\n label,\n disabled,\n readOnly,\n children,\n ...rest\n },\n ref,\n) {\n const errorMessageId = useId();\n const inputId = useId();\n\n const renderInput = () => {\n const inputProps: InputProps = {\n \"aria-describedby\": errorMessage ? errorMessageId : undefined,\n \"aria-invalid\": errorMessage ? true : undefined,\n id: id ?? inputId,\n className: clsx(\"hds-input-group__input\"),\n };\n\n if (typeof children === \"function\") {\n return children(inputProps);\n }\n\n const input: ReactNode = Children.toArray(children)[0];\n\n if (!isValidElement<InputProps>(input)) {\n return;\n }\n\n return cloneElement<InputProps>(input, {\n ...inputProps,\n ...input.props,\n className: `${inputProps.className} ${input.props.className ?? \"\"}`,\n });\n };\n\n return (\n <div\n className={clsx(\n \"hds-input-group\",\n {\n [`hds-input-group--${variant}`]: variant,\n \"hds-input-group--error\": errorMessage,\n },\n className as undefined,\n )}\n ref={ref}\n style={style}\n {...rest}\n >\n <label\n className={clsx(\"hds-input-group__label\", labelClassName as undefined)}\n {...labelProps}\n htmlFor={id ?? inputId}\n >\n {label}\n </label>\n <div\n className={clsx(\"hds-input-group__input-wrapper\")}\n data-disabled={disabled}\n data-readonly={readOnly}\n >\n {renderInput()}\n </div>\n <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n </div>\n );\n});\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nexport interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n id: string;\n className?: string;\n}\n\nexport const ErrorMessage = forwardRef<HTMLDivElement, ErrorMessageProps>(\n ({ children, id, className, ...rest }) => {\n return (\n <div\n aria-live=\"assertive\"\n className={clsx(\"hds-error-message\", className as undefined)}\n id={id}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\nErrorMessage.displayName = \"ErrorMessage\";\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","import_typed_classname","import_jsx_runtime","InputGroup","_a","import_react","import_jsx_runtime","DatePicker","_a"]}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import {
|
|
2
2
|
DatePicker
|
|
3
|
-
} from "../../chunk-
|
|
3
|
+
} from "../../chunk-QY2K3GWU.mjs";
|
|
4
4
|
import "../../chunk-Y5SUMFYJ.mjs";
|
|
5
|
-
import "../../chunk-
|
|
5
|
+
import "../../chunk-P6WIBHQH.mjs";
|
|
6
6
|
import "../../chunk-NSLSA7F7.mjs";
|
|
7
|
-
import "../../chunk-
|
|
8
|
-
import "../../chunk-
|
|
7
|
+
import "../../chunk-DFU2THGC.mjs";
|
|
8
|
+
import "../../chunk-DEX36MFK.mjs";
|
|
9
9
|
import "../../chunk-R4SQKVDQ.mjs";
|
|
10
10
|
export {
|
|
11
11
|
DatePicker
|
|
@@ -64,31 +64,37 @@ __export(date_picker_exports, {
|
|
|
64
64
|
module.exports = __toCommonJS(date_picker_exports);
|
|
65
65
|
|
|
66
66
|
// src/form/date-picker/date-picker.tsx
|
|
67
|
-
var
|
|
67
|
+
var import_react4 = require("react");
|
|
68
68
|
var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
|
|
69
69
|
|
|
70
70
|
// src/form/input-group/input-group.tsx
|
|
71
|
-
var
|
|
71
|
+
var import_react2 = require("react");
|
|
72
72
|
var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
|
|
73
73
|
|
|
74
74
|
// src/form/error-message/error-message.tsx
|
|
75
75
|
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
|
|
76
|
+
var import_react = require("react");
|
|
76
77
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
"
|
|
80
|
-
|
|
81
|
-
"
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
78
|
+
var ErrorMessage = (0, import_react.forwardRef)(
|
|
79
|
+
(_a) => {
|
|
80
|
+
var _b = _a, { children, id, className } = _b, rest = __objRest(_b, ["children", "id", "className"]);
|
|
81
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
82
|
+
"div",
|
|
83
|
+
__spreadProps(__spreadValues({
|
|
84
|
+
"aria-live": "assertive",
|
|
85
|
+
className: (0, import_typed_classname.clsx)("hds-error-message", className),
|
|
86
|
+
id
|
|
87
|
+
}, rest), {
|
|
88
|
+
children
|
|
89
|
+
})
|
|
90
|
+
);
|
|
91
|
+
}
|
|
92
|
+
);
|
|
93
|
+
ErrorMessage.displayName = "ErrorMessage";
|
|
88
94
|
|
|
89
95
|
// src/form/input-group/input-group.tsx
|
|
90
96
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
91
|
-
var InputGroup = (0,
|
|
97
|
+
var InputGroup = (0, import_react2.forwardRef)(function InputGroup2(_a, ref) {
|
|
92
98
|
var _b = _a, {
|
|
93
99
|
id,
|
|
94
100
|
className,
|
|
@@ -113,8 +119,8 @@ var InputGroup = (0, import_react.forwardRef)(function InputGroup2(_a, ref) {
|
|
|
113
119
|
"readOnly",
|
|
114
120
|
"children"
|
|
115
121
|
]);
|
|
116
|
-
const errorMessageId = (0,
|
|
117
|
-
const inputId = (0,
|
|
122
|
+
const errorMessageId = (0, import_react2.useId)();
|
|
123
|
+
const inputId = (0, import_react2.useId)();
|
|
118
124
|
const renderInput = () => {
|
|
119
125
|
var _a2;
|
|
120
126
|
const inputProps = {
|
|
@@ -126,11 +132,11 @@ var InputGroup = (0, import_react.forwardRef)(function InputGroup2(_a, ref) {
|
|
|
126
132
|
if (typeof children === "function") {
|
|
127
133
|
return children(inputProps);
|
|
128
134
|
}
|
|
129
|
-
const input =
|
|
130
|
-
if (!(0,
|
|
135
|
+
const input = import_react2.Children.toArray(children)[0];
|
|
136
|
+
if (!(0, import_react2.isValidElement)(input)) {
|
|
131
137
|
return;
|
|
132
138
|
}
|
|
133
|
-
return (0,
|
|
139
|
+
return (0, import_react2.cloneElement)(input, __spreadProps(__spreadValues(__spreadValues({}, inputProps), input.props), {
|
|
134
140
|
className: `${inputProps.className} ${(_a2 = input.props.className) != null ? _a2 : ""}`
|
|
135
141
|
}));
|
|
136
142
|
};
|
|
@@ -175,7 +181,7 @@ var InputGroup = (0, import_react.forwardRef)(function InputGroup2(_a, ref) {
|
|
|
175
181
|
|
|
176
182
|
// src/utils.ts
|
|
177
183
|
var React = __toESM(require("react"));
|
|
178
|
-
var
|
|
184
|
+
var import_react3 = require("react");
|
|
179
185
|
function useMergeRefs(refs) {
|
|
180
186
|
return React.useMemo(() => {
|
|
181
187
|
if (refs.every((ref) => ref === null)) {
|
|
@@ -195,7 +201,7 @@ function useMergeRefs(refs) {
|
|
|
195
201
|
|
|
196
202
|
// src/form/date-picker/date-picker.tsx
|
|
197
203
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
198
|
-
var DatePicker = (0,
|
|
204
|
+
var DatePicker = (0, import_react4.forwardRef)(function DatePicker2(_a, ref) {
|
|
199
205
|
var _b = _a, {
|
|
200
206
|
className,
|
|
201
207
|
variant,
|
|
@@ -219,7 +225,7 @@ var DatePicker = (0, import_react3.forwardRef)(function DatePicker2(_a, ref) {
|
|
|
219
225
|
"readOnly",
|
|
220
226
|
"calendarButtonTitle"
|
|
221
227
|
]);
|
|
222
|
-
const inputRef = (0,
|
|
228
|
+
const inputRef = (0, import_react4.useRef)(null);
|
|
223
229
|
const mergedRef = useMergeRefs([inputRef, ref]);
|
|
224
230
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
225
231
|
InputGroup,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/form/date-picker/index.tsx","../../../src/form/date-picker/date-picker.tsx","../../../src/form/input-group/input-group.tsx","../../../src/form/error-message/error-message.tsx","../../../src/utils.ts"],"sourcesContent":["export { DatePicker } from \"./date-picker\";\nexport type * from \"./date-picker\";\n","import { forwardRef, useRef, type InputHTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { InputGroup, type InputGroupProps } from \"../input-group\";\nimport { useMergeRefs } from \"../../utils\";\n\nexport type DatePickerProps = Omit<\n InputGroupProps & InputHTMLAttributes<HTMLInputElement>,\n \"children\" | \"type\"\n> & {\n /**\n * Accessible title for the calendar button\n *\n * This button currently only shows in Chrome.\n *\n * @defaultValue \"Åpne kalender\"\n */\n calendarButtonTitle?: string;\n};\n\n/**\n * A basic implementation of a date picker\n *\n * This date picker is an implementation of native date picker, as you get\n * with `<input type=\"date\" />`, where the input field is dressed in Hedwig styling.\n *\n * Due to accessibility concerns you will only see the appropriate Hedwig calendar\n * icon in Chrome. Firefox will show built in icon and Safari will show no icon.\n * Not tested in Edge.\n */\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(function DatePicker(\n {\n className,\n variant,\n errorMessage,\n labelProps,\n label,\n id,\n style,\n disabled,\n readOnly,\n calendarButtonTitle = \"Åpne kalender\",\n ...rest\n },\n ref,\n) {\n const inputRef = useRef<HTMLInputElement>(null);\n const mergedRef = useMergeRefs([inputRef, ref]);\n\n return (\n <InputGroup\n className={clsx(\"hds-date-picker\", className as undefined)}\n disabled={disabled}\n errorMessage={errorMessage}\n id={id}\n label={label}\n labelProps={labelProps}\n readOnly={readOnly}\n style={style}\n variant={variant}\n >\n {(inputProps) => (\n <>\n <input\n {...rest}\n {...inputProps}\n disabled={disabled}\n readOnly={readOnly}\n ref={mergedRef}\n type=\"date\"\n />\n <button\n className={clsx(\"hds-date-picker__calendar-button\")}\n type=\"button\"\n title={calendarButtonTitle}\n onClick={() => {\n inputRef.current?.showPicker();\n }}\n />\n </>\n )}\n </InputGroup>\n );\n});\n\nDatePicker.displayName = \"DatePicker\";\n","import { useId, forwardRef, Children, isValidElement, cloneElement } from \"react\";\nimport type { LabelHTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\ninterface InputProps {\n \"aria-describedby\"?: string;\n \"aria-invalid\"?: boolean;\n id?: string;\n className?: string;\n}\n\nexport interface InputGroupProps {\n id?: string;\n className?: string;\n style?: CSSProperties;\n variant?: \"default\" | \"white\";\n errorMessage?: ReactNode;\n labelProps?: LabelHTMLAttributes<HTMLLabelElement>;\n label: ReactNode;\n disabled?: boolean;\n readOnly?: boolean;\n /**\n * `children` must be either a single input element or a render function.\n *\n * If you use a render function, make sure you spread the input props to the appropriate element.\n */\n children: Exclude<ReactNode, Iterable<ReactNode>> | ((inputProps: InputProps) => ReactNode);\n}\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n {\n id,\n className,\n style,\n variant = \"default\",\n errorMessage,\n labelProps: { className: labelClassName, ...labelProps } = {},\n label,\n disabled,\n readOnly,\n children,\n ...rest\n },\n ref,\n) {\n const errorMessageId = useId();\n const inputId = useId();\n\n const renderInput = () => {\n const inputProps: InputProps = {\n \"aria-describedby\": errorMessage ? errorMessageId : undefined,\n \"aria-invalid\": errorMessage ? true : undefined,\n id: id ?? inputId,\n className: clsx(\"hds-input-group__input\"),\n };\n\n if (typeof children === \"function\") {\n return children(inputProps);\n }\n\n const input: ReactNode = Children.toArray(children)[0];\n\n if (!isValidElement<InputProps>(input)) {\n return;\n }\n\n return cloneElement<InputProps>(input, {\n ...inputProps,\n ...input.props,\n className: `${inputProps.className} ${input.props.className ?? \"\"}`,\n });\n };\n\n return (\n <div\n className={clsx(\n \"hds-input-group\",\n {\n [`hds-input-group--${variant}`]: variant,\n \"hds-input-group--error\": errorMessage,\n },\n className as undefined,\n )}\n ref={ref}\n style={style}\n {...rest}\n >\n <label\n className={clsx(\"hds-input-group__label\", labelClassName as undefined)}\n {...labelProps}\n htmlFor={id ?? inputId}\n >\n {label}\n </label>\n <div\n className={clsx(\"hds-input-group__input-wrapper\")}\n data-disabled={disabled}\n data-readonly={readOnly}\n >\n {renderInput()}\n </div>\n <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n </div>\n );\n});\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { ReactNode } from \"react\";\n\nexport interface ErrorMessageProps {\n children: ReactNode;\n id: string;\n className?: string;\n}\n\nexport function ErrorMessage({ children, id, className }: ErrorMessageProps) {\n return (\n <div\n aria-live=\"assertive\"\n className={clsx(\"hds-error-message\", className as undefined)}\n id={id}\n >\n {children}\n </div>\n );\n}\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n <As extends ElementType>(\n props: {\n /** Override html element */\n as?: As;\n } & ComponentProps &\n Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\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_typed_classname","import_jsx_runtime","InputGroup","_a","import_react","import_jsx_runtime","DatePicker","_a"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/form/date-picker/index.tsx","../../../src/form/date-picker/date-picker.tsx","../../../src/form/input-group/input-group.tsx","../../../src/form/error-message/error-message.tsx","../../../src/utils.ts"],"sourcesContent":["export { DatePicker } from \"./date-picker\";\nexport type * from \"./date-picker\";\n","import { forwardRef, useRef, type InputHTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { InputGroup, type InputGroupProps } from \"../input-group\";\nimport { useMergeRefs } from \"../../utils\";\n\nexport type DatePickerProps = Omit<\n InputGroupProps & InputHTMLAttributes<HTMLInputElement>,\n \"children\" | \"type\"\n> & {\n /**\n * Accessible title for the calendar button\n *\n * This button currently only shows in Chrome.\n *\n * @defaultValue \"Åpne kalender\"\n */\n calendarButtonTitle?: string;\n};\n\n/**\n * A basic implementation of a date picker\n *\n * This date picker is an implementation of native date picker, as you get\n * with `<input type=\"date\" />`, where the input field is dressed in Hedwig styling.\n *\n * Due to accessibility concerns you will only see the appropriate Hedwig calendar\n * icon in Chrome. Firefox will show built in icon and Safari will show no icon.\n * Not tested in Edge.\n */\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(function DatePicker(\n {\n className,\n variant,\n errorMessage,\n labelProps,\n label,\n id,\n style,\n disabled,\n readOnly,\n calendarButtonTitle = \"Åpne kalender\",\n ...rest\n },\n ref,\n) {\n const inputRef = useRef<HTMLInputElement>(null);\n const mergedRef = useMergeRefs([inputRef, ref]);\n\n return (\n <InputGroup\n className={clsx(\"hds-date-picker\", className as undefined)}\n disabled={disabled}\n errorMessage={errorMessage}\n id={id}\n label={label}\n labelProps={labelProps}\n readOnly={readOnly}\n style={style}\n variant={variant}\n >\n {(inputProps) => (\n <>\n <input\n {...rest}\n {...inputProps}\n disabled={disabled}\n readOnly={readOnly}\n ref={mergedRef}\n type=\"date\"\n />\n <button\n className={clsx(\"hds-date-picker__calendar-button\")}\n type=\"button\"\n title={calendarButtonTitle}\n onClick={() => {\n inputRef.current?.showPicker();\n }}\n />\n </>\n )}\n </InputGroup>\n );\n});\n\nDatePicker.displayName = \"DatePicker\";\n","import { useId, forwardRef, Children, isValidElement, cloneElement } from \"react\";\nimport type { LabelHTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\ninterface InputProps {\n \"aria-describedby\"?: string;\n \"aria-invalid\"?: boolean;\n id?: string;\n className?: string;\n}\n\nexport interface InputGroupProps {\n id?: string;\n className?: string;\n style?: CSSProperties;\n variant?: \"default\" | \"white\";\n errorMessage?: ReactNode;\n labelProps?: LabelHTMLAttributes<HTMLLabelElement>;\n label: ReactNode;\n disabled?: boolean;\n readOnly?: boolean;\n /**\n * `children` must be either a single input element or a render function.\n *\n * If you use a render function, make sure you spread the input props to the appropriate element.\n */\n children: Exclude<ReactNode, Iterable<ReactNode>> | ((inputProps: InputProps) => ReactNode);\n}\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n {\n id,\n className,\n style,\n variant = \"default\",\n errorMessage,\n labelProps: { className: labelClassName, ...labelProps } = {},\n label,\n disabled,\n readOnly,\n children,\n ...rest\n },\n ref,\n) {\n const errorMessageId = useId();\n const inputId = useId();\n\n const renderInput = () => {\n const inputProps: InputProps = {\n \"aria-describedby\": errorMessage ? errorMessageId : undefined,\n \"aria-invalid\": errorMessage ? true : undefined,\n id: id ?? inputId,\n className: clsx(\"hds-input-group__input\"),\n };\n\n if (typeof children === \"function\") {\n return children(inputProps);\n }\n\n const input: ReactNode = Children.toArray(children)[0];\n\n if (!isValidElement<InputProps>(input)) {\n return;\n }\n\n return cloneElement<InputProps>(input, {\n ...inputProps,\n ...input.props,\n className: `${inputProps.className} ${input.props.className ?? \"\"}`,\n });\n };\n\n return (\n <div\n className={clsx(\n \"hds-input-group\",\n {\n [`hds-input-group--${variant}`]: variant,\n \"hds-input-group--error\": errorMessage,\n },\n className as undefined,\n )}\n ref={ref}\n style={style}\n {...rest}\n >\n <label\n className={clsx(\"hds-input-group__label\", labelClassName as undefined)}\n {...labelProps}\n htmlFor={id ?? inputId}\n >\n {label}\n </label>\n <div\n className={clsx(\"hds-input-group__input-wrapper\")}\n data-disabled={disabled}\n data-readonly={readOnly}\n >\n {renderInput()}\n </div>\n <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n </div>\n );\n});\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nexport interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n id: string;\n className?: string;\n}\n\nexport const ErrorMessage = forwardRef<HTMLDivElement, ErrorMessageProps>(\n ({ children, id, className, ...rest }) => {\n return (\n <div\n aria-live=\"assertive\"\n className={clsx(\"hds-error-message\", className as undefined)}\n id={id}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\nErrorMessage.displayName = \"ErrorMessage\";\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","import_typed_classname","import_jsx_runtime","InputGroup","_a","import_react","import_jsx_runtime","DatePicker","_a"]}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import "../../chunk-TDLSHJ4Z.mjs";
|
|
2
2
|
import {
|
|
3
3
|
DatePicker
|
|
4
|
-
} from "../../chunk-
|
|
4
|
+
} from "../../chunk-QY2K3GWU.mjs";
|
|
5
5
|
import "../../chunk-Y5SUMFYJ.mjs";
|
|
6
|
-
import "../../chunk-
|
|
6
|
+
import "../../chunk-P6WIBHQH.mjs";
|
|
7
7
|
import "../../chunk-NSLSA7F7.mjs";
|
|
8
|
-
import "../../chunk-
|
|
9
|
-
import "../../chunk-
|
|
8
|
+
import "../../chunk-DFU2THGC.mjs";
|
|
9
|
+
import "../../chunk-DEX36MFK.mjs";
|
|
10
10
|
import "../../chunk-R4SQKVDQ.mjs";
|
|
11
11
|
export {
|
|
12
12
|
DatePicker
|