boreal-ui 0.0.1 → 0.0.9
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/LICENSE +9 -0
- package/dist/core/Accordion-DOhvj3Ty.js.map +1 -1
- package/dist/core/Accordion-DQsSUVAE.cjs.map +1 -1
- package/dist/core/ArrowRightIcon-BYQv5XS8.js.map +1 -1
- package/dist/core/ArrowRightIcon-ClXQHGAD.cjs.map +1 -1
- package/dist/core/Avatar-B5aqfDZX.cjs.map +1 -1
- package/dist/core/Avatar-mhtrG5FT.js.map +1 -1
- package/dist/core/Badge-DfsFGYhY.js.map +1 -1
- package/dist/core/Badge-LyKc0uJG.cjs.map +1 -1
- package/dist/core/Breadcrumbs-DhioJUB9.js.map +1 -1
- package/dist/core/Breadcrumbs-xmUgcTXF.cjs.map +1 -1
- package/dist/core/Button-DEYbr8xW.js.map +1 -1
- package/dist/core/Button-wz_We8xU.cjs.map +1 -1
- package/dist/core/Card-DCxLBwi0.cjs.map +1 -1
- package/dist/core/Card-DKPk0zgQ.js.map +1 -1
- package/dist/core/Checkbox-BLBbE9Ww.js.map +1 -1
- package/dist/core/Checkbox-fVnseKGF.cjs.map +1 -1
- package/dist/core/Chip-7R6wAufO.js.map +1 -1
- package/dist/core/Chip-CNn0UvOB.cjs.map +1 -1
- package/dist/core/CircularProgress-B-N4px22.cjs.map +1 -1
- package/dist/core/CircularProgress-ClCxzsSz.js.map +1 -1
- package/dist/core/CloseIcon-C3eQm4EK.js.map +1 -1
- package/dist/core/CloseIcon-DSnN6ggf.cjs.map +1 -1
- package/dist/core/ColorPicker-BQiTjeqQ.js.map +1 -1
- package/dist/core/ColorPicker-DR9huYqs.cjs.map +1 -1
- package/dist/core/CommandPalette-CHOC0Z2m.js.map +1 -1
- package/dist/core/CommandPalette-XTi50U_E.cjs.map +1 -1
- package/dist/core/DataTable-DQU1WxPr.js.map +1 -1
- package/dist/core/DataTable-DZeVQIC0.cjs.map +1 -1
- package/dist/core/DateTimePicker-BtITiL_E.cjs.map +1 -1
- package/dist/core/DateTimePicker-O8khtyOu.js.map +1 -1
- package/dist/core/Divider-An2VsXog.js.map +1 -1
- package/dist/core/Divider-TtfSFBcp.cjs.map +1 -1
- package/dist/core/Dropdown-CL7TH2lJ.js.map +1 -1
- package/dist/core/Dropdown-CPsxvzTA.cjs.map +1 -1
- package/dist/core/EmptyState-BAaCfJzO.cjs.map +1 -1
- package/dist/core/EmptyState-Bd-es_rG.js.map +1 -1
- package/dist/core/FileUpload-Dv2cvYI2.cjs.map +1 -1
- package/dist/core/FileUpload-DxjQ2wnn.js.map +1 -1
- package/dist/core/Footer-B4Owy88y.cjs.map +1 -1
- package/dist/core/Footer-bKgKgU6L.js.map +1 -1
- package/dist/core/FormGroup-BXWYrYOK.cjs.map +1 -1
- package/dist/core/FormGroup-DS2tW-lC.js.map +1 -1
- package/dist/core/IconButton-B6cAP2hY.js.map +1 -1
- package/dist/core/IconButton-BxUXK-xn.cjs.map +1 -1
- package/dist/core/MarkdownRenderer-CQVfqnxf.js.map +1 -1
- package/dist/core/MarkdownRenderer-taVkZLE9.cjs.map +1 -1
- package/dist/core/MessagePopup-By89AGqE.js.map +1 -1
- package/dist/core/MessagePopup-OA1gjb8E.cjs.map +1 -1
- package/dist/core/MetricBox-D5Dl19d2.js.map +1 -1
- package/dist/core/MetricBox-DjE-rdp0.cjs.map +1 -1
- package/dist/core/Modal-BhQJOhWV.js.map +1 -1
- package/dist/core/Modal-CI2snbvk.cjs.map +1 -1
- package/dist/core/NavBar-BAHSDPtT.js.map +1 -1
- package/dist/core/NavBar-C5UMiYpA.cjs.map +1 -1
- package/dist/core/NotificationCenter-Bp7AqnTg.js.map +1 -1
- package/dist/core/NotificationCenter-DxaqoUD1.cjs.map +1 -1
- package/dist/core/Pager-2jW3cxx_.js.map +1 -1
- package/dist/core/Pager-ByVG_at-.cjs.map +1 -1
- package/dist/core/PopOver-DNqWcWjU.js.map +1 -1
- package/dist/core/PopOver-OijKNHZU.cjs.map +1 -1
- package/dist/core/ProgressBar-CuIHF5N0.js.map +1 -1
- package/dist/core/ProgressBar-PiSFvLwa.cjs.map +1 -1
- package/dist/core/RadioButton-DP8HSNZD.cjs.map +1 -1
- package/dist/core/RadioButton-DTPBlw1t.js.map +1 -1
- package/dist/core/Rating-Jx3DBFOd.cjs.map +1 -1
- package/dist/core/Rating-QF5O1MFS.js.map +1 -1
- package/dist/core/STT-D6L-amjZ.cjs.map +1 -1
- package/dist/core/STT-aXWWubSC.js.map +1 -1
- package/dist/core/Select-9F6p9ghR.cjs.map +1 -1
- package/dist/core/Select-C4a_4B87.js.map +1 -1
- package/dist/core/Skeleton-BniIVZmx.js.map +1 -1
- package/dist/core/Skeleton-CeMwLgnq.cjs.map +1 -1
- package/dist/core/Slider-DZycGDIY.cjs.map +1 -1
- package/dist/core/Slider-QEwgd0le.js.map +1 -1
- package/dist/core/Spinner-BTmQ7ZN9.cjs.map +1 -1
- package/dist/core/Spinner-DGF0pR7I.js.map +1 -1
- package/dist/core/Stepper-BkmPckKd.cjs.map +1 -1
- package/dist/core/Stepper-PjUFCUBG.js.map +1 -1
- package/dist/core/Tabs-DptKFvPK.cjs.map +1 -1
- package/dist/core/Tabs-gpyaJFUs.js.map +1 -1
- package/dist/core/Taginput-BMPHihSz.cjs.map +1 -1
- package/dist/core/Taginput-CrScreYL.js.map +1 -1
- package/dist/core/TextArea-B88b8dFf.js.map +1 -1
- package/dist/core/TextArea-CxJexFDv.cjs.map +1 -1
- package/dist/core/TextInput-8AbKEfUH.cjs.map +1 -1
- package/dist/core/TextInput-CtI8fsXR.js.map +1 -1
- package/dist/core/ThemeContext-Bo0vLczy.js.map +1 -1
- package/dist/core/ThemeContext-CtZXUeeU.cjs.map +1 -1
- package/dist/core/Timeline-D7fd8-u_.js.map +1 -1
- package/dist/core/Timeline-Dk0q-8BZ.cjs.map +1 -1
- package/dist/core/Toggle-CZftIdc3.js.map +1 -1
- package/dist/core/Toggle-v31rt4Ya.cjs.map +1 -1
- package/dist/core/Toolbar-94Pu5-SL.js.map +1 -1
- package/dist/core/Toolbar-Cg_ofRqY.cjs.map +1 -1
- package/dist/core/Tooltip-5SfsTZvz.cjs.map +1 -1
- package/dist/core/Tooltip-XfsZnGgV.js.map +1 -1
- package/dist/core/boreal-style-config-BILmxkZG.js.map +1 -1
- package/dist/core/boreal-style-config-Rr5d5Qts.cjs.map +1 -1
- package/dist/core/capitalize-C0TSQSPh.js.map +1 -1
- package/dist/core/capitalize-DoV-nOmN.cjs.map +1 -1
- package/dist/core/colorSchemes.cjs.js.map +1 -1
- package/dist/core/colorSchemes.js.map +1 -1
- package/dist/core/index.cjs.js.map +1 -1
- package/dist/core/index.js.map +1 -1
- package/dist/core/registerColorSheme-BPX0H7hl.js.map +1 -1
- package/dist/core/registerColorSheme-nhYu5hbY.cjs.map +1 -1
- package/dist/next/Accordion-BD-HsAos.cjs.map +1 -1
- package/dist/next/Accordion-Bu2IAjE6.js.map +1 -1
- package/dist/next/ArrowRightIcon-BVb75OpX.cjs.map +1 -1
- package/dist/next/ArrowRightIcon-BYQv5XS8.js.map +1 -1
- package/dist/next/{Avatar-B0KvtR9U.js → Avatar-B0vflpuy.js} +3 -3
- package/dist/next/{Avatar-B0KvtR9U.js.map → Avatar-B0vflpuy.js.map} +1 -1
- package/dist/next/{Avatar-s6BrkUFC.cjs → Avatar-DjuHvrMV.cjs} +3 -3
- package/dist/next/{Avatar-s6BrkUFC.cjs.map → Avatar-DjuHvrMV.cjs.map} +1 -1
- package/dist/next/Avatar.cjs.js +1 -1
- package/dist/next/Avatar.js +1 -1
- package/dist/next/Badge-CnKwIP4u.cjs.map +1 -1
- package/dist/next/Badge-WWxkzKOl.js.map +1 -1
- package/dist/next/{Breadcrumbs-DCPl_wHY.cjs → Breadcrumbs-0cJD4s9s.cjs} +3 -3
- package/dist/next/{Breadcrumbs-DCPl_wHY.cjs.map → Breadcrumbs-0cJD4s9s.cjs.map} +1 -1
- package/dist/next/{Breadcrumbs-BRfPnjv3.js → Breadcrumbs-liNC5ZzY.js} +3 -3
- package/dist/next/{Breadcrumbs-BRfPnjv3.js.map → Breadcrumbs-liNC5ZzY.js.map} +1 -1
- package/dist/next/Breadcrumbs.cjs.js +1 -1
- package/dist/next/Breadcrumbs.js +1 -1
- package/dist/next/{Button-BpVwB1WA.js → Button-CbX-VlK_.js} +2 -2
- package/dist/next/{Button-BpVwB1WA.js.map → Button-CbX-VlK_.js.map} +1 -1
- package/dist/next/{Button-DUh0L7vy.cjs → Button-WSFdkLsa.cjs} +2 -2
- package/dist/next/{Button-DUh0L7vy.cjs.map → Button-WSFdkLsa.cjs.map} +1 -1
- package/dist/next/Button.cjs.js +1 -1
- package/dist/next/Button.js +1 -1
- package/dist/next/{Card-BjYztK13.cjs → Card-BCYMEFyT.cjs} +4 -4
- package/dist/next/{Card-BjYztK13.cjs.map → Card-BCYMEFyT.cjs.map} +1 -1
- package/dist/next/{Card-RBCzxSIj.js → Card-DhdZiqdl.js} +4 -4
- package/dist/next/{Card-RBCzxSIj.js.map → Card-DhdZiqdl.js.map} +1 -1
- package/dist/next/Card.cjs.js +1 -1
- package/dist/next/Card.js +1 -1
- package/dist/next/Checkbox-COcqcXOD.cjs.map +1 -1
- package/dist/next/Checkbox-kWrAB9F7.js.map +1 -1
- package/dist/next/{Chip-BwyYgH0p.cjs → Chip-DJMY0KHl.cjs} +2 -2
- package/dist/next/{Chip-BwyYgH0p.cjs.map → Chip-DJMY0KHl.cjs.map} +1 -1
- package/dist/next/{Chip-YKbysMqv.js → Chip-DtHYUkJ4.js} +2 -2
- package/dist/next/{Chip-YKbysMqv.js.map → Chip-DtHYUkJ4.js.map} +1 -1
- package/dist/next/Chip.cjs.js +1 -1
- package/dist/next/Chip.js +1 -1
- package/dist/next/CircularProgress-CYo_VUG7.js.map +1 -1
- package/dist/next/CircularProgress-DXC_JBTG.cjs.map +1 -1
- package/dist/next/CloseIcon-7hy4qJ9o.cjs.map +1 -1
- package/dist/next/CloseIcon-C3eQm4EK.js.map +1 -1
- package/dist/next/ColorPicker-C-klUf3G.cjs.map +1 -1
- package/dist/next/ColorPicker-Ub3qNdeF.js.map +1 -1
- package/dist/next/{CommandPalette-Dm_njW12.js → CommandPalette-CEZwvLuu.js} +2 -2
- package/dist/next/{CommandPalette-Dm_njW12.js.map → CommandPalette-CEZwvLuu.js.map} +1 -1
- package/dist/next/{CommandPalette-BAxyNfRu.cjs → CommandPalette-Dp2pT5ot.cjs} +2 -2
- package/dist/next/{CommandPalette-BAxyNfRu.cjs.map → CommandPalette-Dp2pT5ot.cjs.map} +1 -1
- package/dist/next/CommandPalette.cjs.js +1 -1
- package/dist/next/CommandPalette.js +1 -1
- package/dist/next/DataTable-9JLEi0CK.cjs.map +1 -1
- package/dist/next/DataTable-D5ffcx-L.js.map +1 -1
- package/dist/next/DateTimePicker-C2-or1uL.js.map +1 -1
- package/dist/next/DateTimePicker-CoTQNBzD.cjs.map +1 -1
- package/dist/next/Divider-BlJMteki.cjs.map +1 -1
- package/dist/next/Divider-g7VS0Sbx.js.map +1 -1
- package/dist/next/{Dropdown-D2p7q140.cjs → Dropdown-BtbLZeZq.cjs} +2 -2
- package/dist/next/{Dropdown-D2p7q140.cjs.map → Dropdown-BtbLZeZq.cjs.map} +1 -1
- package/dist/next/{Dropdown-D-Jhdu_7.js → Dropdown-DyBmnKrz.js} +2 -2
- package/dist/next/{Dropdown-D-Jhdu_7.js.map → Dropdown-DyBmnKrz.js.map} +1 -1
- package/dist/next/Dropdown.cjs.js +1 -1
- package/dist/next/Dropdown.js +1 -1
- package/dist/next/{EmptyState-C6dGNF-O.js → EmptyState-CSEhZvTp.js} +2 -2
- package/dist/next/{EmptyState-C6dGNF-O.js.map → EmptyState-CSEhZvTp.js.map} +1 -1
- package/dist/next/{EmptyState-CBGawc9S.cjs → EmptyState-DUZQ2Qmn.cjs} +2 -2
- package/dist/next/{EmptyState-CBGawc9S.cjs.map → EmptyState-DUZQ2Qmn.cjs.map} +1 -1
- package/dist/next/EmptyState.cjs.js +1 -1
- package/dist/next/EmptyState.js +1 -1
- package/dist/next/{FileUpload-BOSrZhPq.js → FileUpload-CgPHe6Nn.js} +3 -3
- package/dist/next/{FileUpload-BOSrZhPq.js.map → FileUpload-CgPHe6Nn.js.map} +1 -1
- package/dist/next/{FileUpload-D65wKrsD.cjs → FileUpload-jh5iTgY-.cjs} +3 -3
- package/dist/next/{FileUpload-D65wKrsD.cjs.map → FileUpload-jh5iTgY-.cjs.map} +1 -1
- package/dist/next/FileUpload.cjs.js +1 -1
- package/dist/next/FileUpload.js +1 -1
- package/dist/next/{Footer-CdCqa4Pz.js → Footer-CQAWg2tl.js} +4 -4
- package/dist/next/{Footer-CdCqa4Pz.js.map → Footer-CQAWg2tl.js.map} +1 -1
- package/dist/next/{Footer-J5Q_SSa-.cjs → Footer-D2veQTa-.cjs} +4 -4
- package/dist/next/{Footer-J5Q_SSa-.cjs.map → Footer-D2veQTa-.cjs.map} +1 -1
- package/dist/next/Footer.cjs.js +1 -1
- package/dist/next/Footer.js +1 -1
- package/dist/next/FormGroup-BAtifQGH.cjs.map +1 -1
- package/dist/next/FormGroup-DuBfLAMv.js.map +1 -1
- package/dist/next/{IconButton-mY_E1gsn.cjs → IconButton-CNzF48hu.cjs} +2 -2
- package/dist/next/{IconButton-mY_E1gsn.cjs.map → IconButton-CNzF48hu.cjs.map} +1 -1
- package/dist/next/{IconButton-EbX_9a0k.js → IconButton-DFrFh0kg.js} +2 -2
- package/dist/next/{IconButton-EbX_9a0k.js.map → IconButton-DFrFh0kg.js.map} +1 -1
- package/dist/next/IconButton.cjs.js +1 -1
- package/dist/next/IconButton.js +1 -1
- package/dist/next/MarkdownRenderer-B-WThNR7.cjs.map +1 -1
- package/dist/next/MarkdownRenderer-CxJOetSp.js.map +1 -1
- package/dist/next/MessagePopUp.cjs.js +1 -1
- package/dist/next/MessagePopUp.js +1 -1
- package/dist/next/{MessagePopup-DuXLVt2z.cjs → MessagePopup-C-7N3vB0.cjs} +3 -3
- package/dist/next/{MessagePopup-DuXLVt2z.cjs.map → MessagePopup-C-7N3vB0.cjs.map} +1 -1
- package/dist/next/{MessagePopup-BL_Tp51e.js → MessagePopup-ClfrvxKq.js} +3 -3
- package/dist/next/{MessagePopup-BL_Tp51e.js.map → MessagePopup-ClfrvxKq.js.map} +1 -1
- package/dist/next/MetricBox-Dtkrwrtw.cjs.map +1 -1
- package/dist/next/MetricBox-rxFYolH_.js.map +1 -1
- package/dist/next/{Modal-DkAYQaOH.js → Modal-BZvTcgoM.js} +2 -2
- package/dist/next/{Modal-DkAYQaOH.js.map → Modal-BZvTcgoM.js.map} +1 -1
- package/dist/next/{Modal-Cr3uE4Wi.cjs → Modal-Bf7egMf2.cjs} +2 -2
- package/dist/next/{Modal-Cr3uE4Wi.cjs.map → Modal-Bf7egMf2.cjs.map} +1 -1
- package/dist/next/Modal.cjs.js +1 -1
- package/dist/next/Modal.js +1 -1
- package/dist/next/{NavBar-CyInu_3I.cjs → NavBar-CZtNDAdX.cjs} +103 -87
- package/dist/next/NavBar-CZtNDAdX.cjs.map +1 -0
- package/dist/next/{NavBar-CsrYdWSV.js → NavBar-DzRWv8W0.js} +103 -87
- package/dist/next/NavBar-DzRWv8W0.js.map +1 -0
- package/dist/next/NavBar.cjs.js +1 -1
- package/dist/next/NavBar.js +1 -1
- package/dist/next/{NotificationCenter-BGc41ims.js → NotificationCenter-BCXpVjHd.js} +3 -3
- package/dist/next/{NotificationCenter-BGc41ims.js.map → NotificationCenter-BCXpVjHd.js.map} +1 -1
- package/dist/next/{NotificationCenter-BTcM5bCY.cjs → NotificationCenter-DmcHIkOp.cjs} +3 -3
- package/dist/next/{NotificationCenter-BTcM5bCY.cjs.map → NotificationCenter-DmcHIkOp.cjs.map} +1 -1
- package/dist/next/NotificationCenter.cjs.js +1 -1
- package/dist/next/NotificationCenter.js +1 -1
- package/dist/next/{Pager-CRAgN3LJ.cjs → Pager-B81ecC4j.cjs} +3 -3
- package/dist/next/{Pager-CRAgN3LJ.cjs.map → Pager-B81ecC4j.cjs.map} +1 -1
- package/dist/next/{Pager-0B36P0k1.js → Pager-BqShs8_d.js} +3 -3
- package/dist/next/{Pager-0B36P0k1.js.map → Pager-BqShs8_d.js.map} +1 -1
- package/dist/next/Pager.cjs.js +1 -1
- package/dist/next/Pager.js +1 -1
- package/dist/next/PopOver-CHs0s9rp.cjs.map +1 -1
- package/dist/next/PopOver-pllmYvp6.js.map +1 -1
- package/dist/next/ProgressBar-Cvf0uNKW.cjs.map +1 -1
- package/dist/next/ProgressBar-D_fi1WW3.js.map +1 -1
- package/dist/next/RadioButton-BKS65jm9.js.map +1 -1
- package/dist/next/RadioButton-cXdUfJD2.cjs.map +1 -1
- package/dist/next/Rating-BjN0Sj0r.cjs.map +1 -1
- package/dist/next/Rating-Bs7oCe4w.js.map +1 -1
- package/dist/next/STT-Br81yPXp.js.map +1 -1
- package/dist/next/STT-C0q3yqiJ.cjs.map +1 -1
- package/dist/next/Select-DwWTQcCU.js.map +1 -1
- package/dist/next/Select-_f1aZuKO.cjs.map +1 -1
- package/dist/next/Skeleton-BWBHgsOM.js.map +1 -1
- package/dist/next/Skeleton-CMuXs5GO.cjs.map +1 -1
- package/dist/next/Slider-B5BJJyaD.js.map +1 -1
- package/dist/next/Slider-DbxNKdGq.cjs.map +1 -1
- package/dist/next/Spinner-BxvU43sx.js.map +1 -1
- package/dist/next/Spinner-Doh4Uft1.cjs.map +1 -1
- package/dist/next/{Stepper-DGbO-fUh.js → Stepper-5FojeYPE.js} +2 -2
- package/dist/next/{Stepper-DGbO-fUh.js.map → Stepper-5FojeYPE.js.map} +1 -1
- package/dist/next/{Stepper-CQaWoBJ2.cjs → Stepper-D2UYDRwT.cjs} +2 -2
- package/dist/next/{Stepper-CQaWoBJ2.cjs.map → Stepper-D2UYDRwT.cjs.map} +1 -1
- package/dist/next/Stepper.cjs.js +1 -1
- package/dist/next/Stepper.js +1 -1
- package/dist/next/Tabs-CNU0A_YY.js.map +1 -1
- package/dist/next/Tabs-DuZPFjen.cjs.map +1 -1
- package/dist/next/TagInput.cjs.js +1 -1
- package/dist/next/TagInput.js +1 -1
- package/dist/next/{Taginput-DAZs0PlQ.cjs → Taginput-BcNgwFOj.cjs} +3 -3
- package/dist/next/{Taginput-DAZs0PlQ.cjs.map → Taginput-BcNgwFOj.cjs.map} +1 -1
- package/dist/next/{Taginput-Bppb5ahN.js → Taginput-CdYMgcYY.js} +3 -3
- package/dist/next/{Taginput-Bppb5ahN.js.map → Taginput-CdYMgcYY.js.map} +1 -1
- package/dist/next/TextArea-CRo_5ZL_.cjs.map +1 -1
- package/dist/next/TextArea-W9ekr3ij.js.map +1 -1
- package/dist/next/{TextInput-DLROLZ7j.js → TextInput-DkNxrV4X.js} +2 -2
- package/dist/next/{TextInput-DLROLZ7j.js.map → TextInput-DkNxrV4X.js.map} +1 -1
- package/dist/next/{TextInput-D2cpcHhQ.cjs → TextInput-iQT-2lPj.cjs} +2 -2
- package/dist/next/{TextInput-D2cpcHhQ.cjs.map → TextInput-iQT-2lPj.cjs.map} +1 -1
- package/dist/next/TextInput.cjs.js +1 -1
- package/dist/next/TextInput.js +1 -1
- package/dist/next/ThemeContext-BNR3_OIq.cjs.map +1 -1
- package/dist/next/ThemeContext-Bo0vLczy.js.map +1 -1
- package/dist/next/Timeline-36_Qy1-m.cjs.map +1 -1
- package/dist/next/Timeline-EnwGQ4Mi.js.map +1 -1
- package/dist/next/Toggle-CU7I_vjc.cjs.map +1 -1
- package/dist/next/Toggle-R5pWM7gk.js.map +1 -1
- package/dist/next/{Toolbar-vNJ46DTU.js → Toolbar-B8AB6ADW.js} +2 -2
- package/dist/next/{Toolbar-vNJ46DTU.js.map → Toolbar-B8AB6ADW.js.map} +1 -1
- package/dist/next/{Toolbar-D05Q3wYG.cjs → Toolbar-BIruaq82.cjs} +2 -2
- package/dist/next/{Toolbar-D05Q3wYG.cjs.map → Toolbar-BIruaq82.cjs.map} +1 -1
- package/dist/next/Toolbar.cjs.js +1 -1
- package/dist/next/Toolbar.js +1 -1
- package/dist/next/Tooltip-DHhLeygn.cjs.map +1 -1
- package/dist/next/Tooltip-G3P0OyTP.js.map +1 -1
- package/dist/next/boreal-style-config-BILmxkZG.js.map +1 -1
- package/dist/next/boreal-style-config-Rr5d5Qts.cjs.map +1 -1
- package/dist/next/capitalize-C0TSQSPh.js.map +1 -1
- package/dist/next/capitalize-DoV-nOmN.cjs.map +1 -1
- package/dist/next/colorSchemes.cjs.js.map +1 -1
- package/dist/next/colorSchemes.js.map +1 -1
- package/dist/next/{image-Cs0ZR1Aj.js → image-CEz9QtOW.js} +3 -22
- package/dist/next/image-CEz9QtOW.js.map +1 -0
- package/dist/next/{image-C5jTmHeD.cjs → image-VX9Ty9NQ.cjs} +3 -22
- package/dist/next/image-VX9Ty9NQ.cjs.map +1 -0
- package/dist/next/index.cjs.js +20 -20
- package/dist/next/index.cjs.js.map +1 -1
- package/dist/next/index.js +21 -21
- package/dist/next/index.js.map +1 -1
- package/dist/next/{link-CX77u6b-.js → link-Bik5xH00.js} +15 -3
- package/dist/next/link-Bik5xH00.js.map +1 -0
- package/dist/next/{link-B8xgzNiC.cjs → link-hxAaLm0Q.cjs} +15 -3
- package/dist/next/link-hxAaLm0Q.cjs.map +1 -0
- package/dist/next/registerColorSheme-BPX0H7hl.js.map +1 -1
- package/dist/next/registerColorSheme-nhYu5hbY.cjs.map +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +3 -2
- package/dist/next/NavBar-CsrYdWSV.js.map +0 -1
- package/dist/next/NavBar-CyInu_3I.cjs.map +0 -1
- package/dist/next/image-C5jTmHeD.cjs.map +0 -1
- package/dist/next/image-Cs0ZR1Aj.js.map +0 -1
- package/dist/next/link-B8xgzNiC.cjs.map +0 -1
- package/dist/next/link-CX77u6b-.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Taginput-CrScreYL.js","sources":["../../src/components/TagInput/TagInputBase.tsx","../../src/components/TagInput/core/Taginput.tsx"],"sourcesContent":["import React, {\r\n useId,\r\n useState,\r\n KeyboardEvent,\r\n useMemo,\r\n useEffect,\r\n} from \"react\";\r\nimport { TagInputProps } from \"./Taginput.types\";\r\nimport { CloseIcon } from \"../../Icons\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultSize,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst TagInputBase: React.FC<\r\n TagInputProps & {\r\n classMap: Record<string, string>;\r\n IconButton: React.FC<any>;\r\n TextInput: React.FC<any>;\r\n }\r\n> = ({\r\n tags = [],\r\n onChange,\r\n fetchSuggestions,\r\n debounceMs = 300,\r\n placeholder = \"Add a tag...\",\r\n theme = getDefaultTheme(),\r\n state = \"\",\r\n size = getDefaultSize(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n \"data-testid\": testId = \"tag-input\",\r\n ariaDescription = \"Type a tag and press Enter or comma to add. Existing tags can be removed using the remove button next to each tag.\",\r\n classMap,\r\n IconButton,\r\n TextInput,\r\n}) => {\r\n const inputId = useId();\r\n const descId = `${inputId}-desc`;\r\n const labelId = `${inputId}-label`;\r\n\r\n const [inputValue, setInputValue] = useState(\"\");\r\n const [tagList, setTagList] = useState<string[]>(tags);\r\n const [lastAction, setLastAction] = useState<string>(\"\");\r\n\r\n const [suggestions, setSuggestions] = useState<string[]>([]);\r\n const [debounceTimeout, setDebounceTimeout] = useState<NodeJS.Timeout | null>(\r\n null\r\n );\r\n\r\n useEffect(() => {\r\n if (!fetchSuggestions || !inputValue.trim()) {\r\n setSuggestions([]);\r\n return;\r\n }\r\n\r\n if (debounceTimeout) {\r\n clearTimeout(debounceTimeout);\r\n }\r\n\r\n const timeout = setTimeout(async () => {\r\n try {\r\n const result = await fetchSuggestions(inputValue);\r\n setSuggestions(result);\r\n } catch (error) {\r\n console.error(\"Failed to fetch tag suggestions:\", error);\r\n }\r\n }, debounceMs);\r\n\r\n setDebounceTimeout(timeout);\r\n\r\n return () => clearTimeout(timeout);\r\n }, [inputValue, fetchSuggestions, debounceMs]);\r\n\r\n const handleAddTag = (event: KeyboardEvent<HTMLInputElement>) => {\r\n if (\r\n (event.key === \"Enter\" || event.key === \",\") &&\r\n inputValue.trim() !== \"\"\r\n ) {\r\n event.preventDefault();\r\n const newTag = inputValue.trim();\r\n if (!tagList.includes(newTag)) {\r\n const updated = [...tagList, newTag];\r\n setTagList(updated);\r\n onChange?.(updated);\r\n setLastAction(`Added tag ${newTag}`);\r\n }\r\n setInputValue(\"\");\r\n }\r\n };\r\n\r\n const handleRemoveTag = (tag: string) => {\r\n const updated = tagList.filter((t) => t !== tag);\r\n setTagList(updated);\r\n onChange?.(updated);\r\n setLastAction(`Removed tag ${tag}`);\r\n };\r\n\r\n const wrapperClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.tagInput,\r\n classMap[theme],\r\n classMap[state],\r\n classMap[size]\r\n ),\r\n [classMap, theme, state, size]\r\n );\r\n\r\n const tagClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.tag,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`]\r\n ),\r\n [classMap]\r\n );\r\n\r\n return (\r\n <div\r\n className={wrapperClass}\r\n role=\"group\"\r\n aria-labelledby={labelId}\r\n aria-describedby={descId}\r\n data-testid={testId}\r\n >\r\n <label id={labelId} className=\"sr_only\">\r\n Tag Input\r\n </label>\r\n <div\r\n id={descId}\r\n className=\"sr_only\"\r\n data-testid={`${testId}-description`}\r\n >\r\n {ariaDescription}\r\n </div>\r\n\r\n <ul\r\n className={classMap.tagContainer}\r\n aria-live=\"polite\"\r\n aria-relevant=\"additions removals\"\r\n data-testid={`${testId}-list`}\r\n >\r\n {tagList.map((tag, index) => (\r\n <li\r\n key={tag}\r\n className={tagClass}\r\n role=\"listitem\"\r\n data-testid={`${testId}-tag-${index}`}\r\n >\r\n <span className={classMap.tagLabel}>{tag}</span>\r\n <IconButton\r\n type=\"button\"\r\n aria-label={`Remove tag ${tag}`}\r\n className={classMap.removeButton}\r\n onClick={() => handleRemoveTag(tag)}\r\n data-testid={`${testId}-remove-${index}`}\r\n icon={CloseIcon}\r\n size=\"small\"\r\n theme=\"clear\"\r\n />\r\n </li>\r\n ))}\r\n </ul>\r\n\r\n <div className={classMap.inputWrapper}>\r\n <TextInput\r\n id={inputId}\r\n type=\"text\"\r\n theme={theme}\r\n state={state}\r\n rounding={rounding}\r\n shadow={shadow}\r\n className={classMap.input}\r\n value={inputValue}\r\n placeholder={tagList.length === 0 ? placeholder : \"\"}\r\n onChange={(e: { target: { value: string } }) =>\r\n setInputValue(e.target.value)\r\n }\r\n onKeyDown={handleAddTag}\r\n aria-label=\"Add new tag\"\r\n aria-describedby={descId}\r\n data-testid={`${testId}-input`}\r\n />\r\n </div>\r\n {suggestions.length > 0 && (\r\n <ul\r\n className={classMap.suggestionList}\r\n role=\"listbox\"\r\n id={`${inputId}-listbox`}\r\n title=\"suggestions\"\r\n data-testid={`${testId}-suggestions`}\r\n >\r\n {suggestions.map((suggestion, index) => (\r\n <li\r\n key={index}\r\n className={classMap.suggestionItem}\r\n onClick={() => {\r\n if (!tagList.includes(suggestion)) {\r\n const updated = [...tagList, suggestion];\r\n setTagList(updated);\r\n onChange?.(updated);\r\n setLastAction(`Added tag ${suggestion}`);\r\n }\r\n setInputValue(\"\");\r\n setSuggestions([]);\r\n }}\r\n role=\"option\"\r\n data-testid={`${testId}-suggestion-${index}`}\r\n >\r\n {suggestion}\r\n </li>\r\n ))}\r\n </ul>\r\n )}\r\n\r\n <div aria-live=\"polite\" className=\"sr_only\">\r\n {lastAction}\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default TagInputBase;\r\n","import React from \"react\";\r\nimport \"./Taginput.scss\";\r\nimport IconButton from \"../../Button/core/Button\";\r\nimport TextInput from \"../../TextInput/core/TextInput\";\r\nimport TagInputBase from \"../TagInputBase\";\r\nimport { TagInputProps } from \"../Taginput.types\";\r\n\r\nconst classes = {\r\n tagInput: \"tag_input\",\r\n tagContainer: \"tag_input_tag_container\",\r\n tag: \"tag_input_tag\",\r\n tagLabel: \"tag_input_tag_label\",\r\n removeButton: \"tag_input_remove_button\",\r\n inputWrapper: \"tag_input_input_wrapper\",\r\n input: \"tag_input_input\",\r\n suggestionList: \"tag_input_suggestion_list\",\r\n suggestionItem: \"tag_input_suggestion_item\",\r\n\r\n primary: \"tag_input_primary\",\r\n secondary: \"tag_input_secondary\",\r\n tertiary: \"tag_input_tertiary\",\r\n quaternary: \"tag_input_quaternary\",\r\n\r\n success: \"tag_input_success\",\r\n warning: \"tag_input_warning\",\r\n error: \"tag_input_error\",\r\n\r\n clear: \"tag_input_clear\",\r\n\r\n xs: \"tag_input_xs\",\r\n small: \"tag_input_small\",\r\n medium: \"tag_input_medium\",\r\n large: \"tag_input_large\",\r\n xl: \"tag_input_xl\",\r\n\r\n shadowNone: \"tag_shadow-None\",\r\n shadowLight: \"tag_shadow-Light\",\r\n shadowMedium: \"tag_shadow-Medium\",\r\n shadowStrong: \"tag_shadow-Strong\",\r\n shadowIntense: \"tag_shadow-Intense\",\r\n\r\n roundNone: \"tag_round-None\",\r\n roundSmall: \"tag_round-Small\",\r\n roundMedium: \"tag_round-Medium\",\r\n roundLarge: \"tag_round-Large\",\r\n};\r\n\r\nconst TagInput: React.FC<TagInputProps> = (props) => {\r\n return (\r\n <TagInputBase\r\n {...props}\r\n classMap={classes}\r\n IconButton={IconButton}\r\n TextInput={TextInput}\r\n />\r\n );\r\n};\r\n\r\nexport default TagInput;\r\n"],"names":["TextInput","IconButton"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Taginput-CrScreYL.js","sources":["../../src/components/TagInput/TagInputBase.tsx","../../src/components/TagInput/core/Taginput.tsx"],"sourcesContent":["import React, {\r\n useId,\r\n useState,\r\n KeyboardEvent,\r\n useMemo,\r\n useEffect,\r\n} from \"react\";\r\nimport { TagInputProps } from \"./Taginput.types\";\r\nimport { CloseIcon } from \"../../Icons\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultSize,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst TagInputBase: React.FC<\r\n TagInputProps & {\r\n classMap: Record<string, string>;\r\n IconButton: React.FC<any>;\r\n TextInput: React.FC<any>;\r\n }\r\n> = ({\r\n tags = [],\r\n onChange,\r\n fetchSuggestions,\r\n debounceMs = 300,\r\n placeholder = \"Add a tag...\",\r\n theme = getDefaultTheme(),\r\n state = \"\",\r\n size = getDefaultSize(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n \"data-testid\": testId = \"tag-input\",\r\n ariaDescription = \"Type a tag and press Enter or comma to add. Existing tags can be removed using the remove button next to each tag.\",\r\n classMap,\r\n IconButton,\r\n TextInput,\r\n}) => {\r\n const inputId = useId();\r\n const descId = `${inputId}-desc`;\r\n const labelId = `${inputId}-label`;\r\n\r\n const [inputValue, setInputValue] = useState(\"\");\r\n const [tagList, setTagList] = useState<string[]>(tags);\r\n const [lastAction, setLastAction] = useState<string>(\"\");\r\n\r\n const [suggestions, setSuggestions] = useState<string[]>([]);\r\n const [debounceTimeout, setDebounceTimeout] = useState<NodeJS.Timeout | null>(\r\n null\r\n );\r\n\r\n useEffect(() => {\r\n if (!fetchSuggestions || !inputValue.trim()) {\r\n setSuggestions([]);\r\n return;\r\n }\r\n\r\n if (debounceTimeout) {\r\n clearTimeout(debounceTimeout);\r\n }\r\n\r\n const timeout = setTimeout(async () => {\r\n try {\r\n const result = await fetchSuggestions(inputValue);\r\n setSuggestions(result);\r\n } catch (error) {\r\n console.error(\"Failed to fetch tag suggestions:\", error);\r\n }\r\n }, debounceMs);\r\n\r\n setDebounceTimeout(timeout);\r\n\r\n return () => clearTimeout(timeout);\r\n }, [inputValue, fetchSuggestions, debounceMs]);\r\n\r\n const handleAddTag = (event: KeyboardEvent<HTMLInputElement>) => {\r\n if (\r\n (event.key === \"Enter\" || event.key === \",\") &&\r\n inputValue.trim() !== \"\"\r\n ) {\r\n event.preventDefault();\r\n const newTag = inputValue.trim();\r\n if (!tagList.includes(newTag)) {\r\n const updated = [...tagList, newTag];\r\n setTagList(updated);\r\n onChange?.(updated);\r\n setLastAction(`Added tag ${newTag}`);\r\n }\r\n setInputValue(\"\");\r\n }\r\n };\r\n\r\n const handleRemoveTag = (tag: string) => {\r\n const updated = tagList.filter((t) => t !== tag);\r\n setTagList(updated);\r\n onChange?.(updated);\r\n setLastAction(`Removed tag ${tag}`);\r\n };\r\n\r\n const wrapperClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.tagInput,\r\n classMap[theme],\r\n classMap[state],\r\n classMap[size]\r\n ),\r\n [classMap, theme, state, size]\r\n );\r\n\r\n const tagClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.tag,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`]\r\n ),\r\n [classMap]\r\n );\r\n\r\n return (\r\n <div\r\n className={wrapperClass}\r\n role=\"group\"\r\n aria-labelledby={labelId}\r\n aria-describedby={descId}\r\n data-testid={testId}\r\n >\r\n <label id={labelId} className=\"sr_only\">\r\n Tag Input\r\n </label>\r\n <div\r\n id={descId}\r\n className=\"sr_only\"\r\n data-testid={`${testId}-description`}\r\n >\r\n {ariaDescription}\r\n </div>\r\n\r\n <ul\r\n className={classMap.tagContainer}\r\n aria-live=\"polite\"\r\n aria-relevant=\"additions removals\"\r\n data-testid={`${testId}-list`}\r\n >\r\n {tagList.map((tag, index) => (\r\n <li\r\n key={tag}\r\n className={tagClass}\r\n role=\"listitem\"\r\n data-testid={`${testId}-tag-${index}`}\r\n >\r\n <span className={classMap.tagLabel}>{tag}</span>\r\n <IconButton\r\n type=\"button\"\r\n aria-label={`Remove tag ${tag}`}\r\n className={classMap.removeButton}\r\n onClick={() => handleRemoveTag(tag)}\r\n data-testid={`${testId}-remove-${index}`}\r\n icon={CloseIcon}\r\n size=\"small\"\r\n theme=\"clear\"\r\n />\r\n </li>\r\n ))}\r\n </ul>\r\n\r\n <div className={classMap.inputWrapper}>\r\n <TextInput\r\n id={inputId}\r\n type=\"text\"\r\n theme={theme}\r\n state={state}\r\n rounding={rounding}\r\n shadow={shadow}\r\n className={classMap.input}\r\n value={inputValue}\r\n placeholder={tagList.length === 0 ? placeholder : \"\"}\r\n onChange={(e: { target: { value: string } }) =>\r\n setInputValue(e.target.value)\r\n }\r\n onKeyDown={handleAddTag}\r\n aria-label=\"Add new tag\"\r\n aria-describedby={descId}\r\n data-testid={`${testId}-input`}\r\n />\r\n </div>\r\n {suggestions.length > 0 && (\r\n <ul\r\n className={classMap.suggestionList}\r\n role=\"listbox\"\r\n id={`${inputId}-listbox`}\r\n title=\"suggestions\"\r\n data-testid={`${testId}-suggestions`}\r\n >\r\n {suggestions.map((suggestion, index) => (\r\n <li\r\n key={index}\r\n className={classMap.suggestionItem}\r\n onClick={() => {\r\n if (!tagList.includes(suggestion)) {\r\n const updated = [...tagList, suggestion];\r\n setTagList(updated);\r\n onChange?.(updated);\r\n setLastAction(`Added tag ${suggestion}`);\r\n }\r\n setInputValue(\"\");\r\n setSuggestions([]);\r\n }}\r\n role=\"option\"\r\n data-testid={`${testId}-suggestion-${index}`}\r\n >\r\n {suggestion}\r\n </li>\r\n ))}\r\n </ul>\r\n )}\r\n\r\n <div aria-live=\"polite\" className=\"sr_only\">\r\n {lastAction}\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default TagInputBase;\r\n","import React from \"react\";\r\nimport \"./Taginput.scss\";\r\nimport IconButton from \"../../Button/core/Button\";\r\nimport TextInput from \"../../TextInput/core/TextInput\";\r\nimport TagInputBase from \"../TagInputBase\";\r\nimport { TagInputProps } from \"../Taginput.types\";\r\n\r\nconst classes = {\r\n tagInput: \"tag_input\",\r\n tagContainer: \"tag_input_tag_container\",\r\n tag: \"tag_input_tag\",\r\n tagLabel: \"tag_input_tag_label\",\r\n removeButton: \"tag_input_remove_button\",\r\n inputWrapper: \"tag_input_input_wrapper\",\r\n input: \"tag_input_input\",\r\n suggestionList: \"tag_input_suggestion_list\",\r\n suggestionItem: \"tag_input_suggestion_item\",\r\n\r\n primary: \"tag_input_primary\",\r\n secondary: \"tag_input_secondary\",\r\n tertiary: \"tag_input_tertiary\",\r\n quaternary: \"tag_input_quaternary\",\r\n\r\n success: \"tag_input_success\",\r\n warning: \"tag_input_warning\",\r\n error: \"tag_input_error\",\r\n\r\n clear: \"tag_input_clear\",\r\n\r\n xs: \"tag_input_xs\",\r\n small: \"tag_input_small\",\r\n medium: \"tag_input_medium\",\r\n large: \"tag_input_large\",\r\n xl: \"tag_input_xl\",\r\n\r\n shadowNone: \"tag_shadow-None\",\r\n shadowLight: \"tag_shadow-Light\",\r\n shadowMedium: \"tag_shadow-Medium\",\r\n shadowStrong: \"tag_shadow-Strong\",\r\n shadowIntense: \"tag_shadow-Intense\",\r\n\r\n roundNone: \"tag_round-None\",\r\n roundSmall: \"tag_round-Small\",\r\n roundMedium: \"tag_round-Medium\",\r\n roundLarge: \"tag_round-Large\",\r\n};\r\n\r\nconst TagInput: React.FC<TagInputProps> = (props) => {\r\n return (\r\n <TagInputBase\r\n {...props}\r\n classMap={classes}\r\n IconButton={IconButton}\r\n TextInput={TextInput}\r\n />\r\n );\r\n};\r\n\r\nexport default TagInput;\r\n"],"names":["TextInput","IconButton"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea-B88b8dFf.js","sources":["../../src/components/TextArea/TextAreaBase.tsx","../../src/components/TextArea/core/TextArea.tsx"],"sourcesContent":["import { forwardRef, useId, useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { TextAreaProps } from \"./TextArea.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst TextAreaBase = forwardRef<\r\n HTMLTextAreaElement,\r\n TextAreaProps & { classMap: Record<string, string> }\r\n>(\r\n (\r\n {\r\n icon: Icon,\r\n placeholder = \"Enter text\",\r\n readOnly = false,\r\n outline = false,\r\n autoComplete = \"off\",\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n ariaLabel,\r\n ariaDescription,\r\n disabled = false,\r\n height,\r\n classMap,\r\n className = \"\",\r\n \"data-testid\": testId = \"text-area\",\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const id = useId();\r\n const descriptionId = ariaDescription ? `${id}-description` : undefined;\r\n\r\n const wrapperClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.textArea,\r\n classMap[theme],\r\n classMap[state],\r\n outline && classMap.outline,\r\n disabled && classMap.disabled,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n className\r\n ),\r\n [classMap, outline, disabled, rounding, shadow, className]\r\n );\r\n\r\n return (\r\n <div className={wrapperClass} data-testid={testId}>\r\n {Icon && (\r\n <div\r\n className={classMap.iconContainer}\r\n aria-hidden=\"true\"\r\n data-testid={`${testId}-icon`}\r\n >\r\n <Icon />\r\n </div>\r\n )}\r\n\r\n <textarea\r\n ref={ref}\r\n id={id}\r\n placeholder={placeholder}\r\n aria-label={ariaLabel || placeholder}\r\n aria-describedby={descriptionId}\r\n autoComplete={autoComplete}\r\n readOnly={readOnly}\r\n disabled={disabled}\r\n style={{ height }}\r\n className={classMap.textInput}\r\n data-testid={`${testId}-input`}\r\n {...props}\r\n />\r\n\r\n <div\r\n className={classMap.customResizeHandle}\r\n aria-hidden=\"true\"\r\n data-testid={`${testId}-resize-handle`}\r\n />\r\n\r\n {ariaDescription && (\r\n <span\r\n id={descriptionId}\r\n className={\"sr_only\"}\r\n data-testid={`${testId}-description`}\r\n >\r\n {ariaDescription}\r\n </span>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nTextAreaBase.displayName = \"TextAreaBase\";\r\n\r\nexport default TextAreaBase;\r\n","import { forwardRef } from \"react\";\r\nimport TextAreaBase from \"../TextAreaBase\";\r\nimport type { TextAreaProps } from \"../TextArea.types\";\r\nimport \"./TextArea.scss\";\r\n\r\nconst classes = {\r\n textArea: \"textArea\",\r\n textInput: \"textArea_textInput\",\r\n icon: \"textArea_icon\",\r\n\r\n primary: \"textArea_primary\",\r\n secondary: \"textArea_secondary\",\r\n tertiary: \"textArea_tertiary\",\r\n quaternary: \"textArea_quaternary\",\r\n\r\n success: \"textArea_success\",\r\n error: \"textArea_error\",\r\n warning: \"textArea_warning\",\r\n\r\n clear: \"textArea_clear\",\r\n\r\n outline: \"textArea_outline\",\r\n\r\n disabled: \"textArea_disabled\",\r\n\r\n errorMessage: \"textArea_errorMessage\",\r\n iconContainer: \"textArea_iconContainer\",\r\n errorMessageContainer: \"textArea_errorMessageContainer\",\r\n\r\n shadowNone: \"textArea_shadow-None\",\r\n shadowLight: \"textArea_shadow-Light\",\r\n shadowMedium: \"textArea_shadow-Medium\",\r\n shadowStrong: \"textArea_shadow-Strong\",\r\n shadowIntense: \"textArea_shadow-Intense\",\r\n\r\n roundNone: \"textArea_round-None\",\r\n roundSmall: \"textArea_round-Small\",\r\n roundMedium: \"textArea_round-Medium\",\r\n roundLarge: \"textArea_round-Large\",\r\n};\r\n\r\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\r\n (props, ref) => {\r\n return <TextAreaBase {...props} ref={ref} classMap={classes} />;\r\n }\r\n);\r\n\r\nTextArea.displayName = \"TextArea\";\r\n\r\nexport default TextArea;\r\n"],"names":[],"mappings":";;;;;AAUA,MAAM,eAAe;AAAA,EAInB,CACE;AAAA,IACE,MAAM;AAAA,IACN,cAAc;AAAA,IACd,WAAW;AAAA,IACX,UAAU;AAAA,IACV,eAAe;AAAA,IACf,QAAQ,
|
|
1
|
+
{"version":3,"file":"TextArea-B88b8dFf.js","sources":["../../src/components/TextArea/TextAreaBase.tsx","../../src/components/TextArea/core/TextArea.tsx"],"sourcesContent":["import { forwardRef, useId, useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { TextAreaProps } from \"./TextArea.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst TextAreaBase = forwardRef<\r\n HTMLTextAreaElement,\r\n TextAreaProps & { classMap: Record<string, string> }\r\n>(\r\n (\r\n {\r\n icon: Icon,\r\n placeholder = \"Enter text\",\r\n readOnly = false,\r\n outline = false,\r\n autoComplete = \"off\",\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n ariaLabel,\r\n ariaDescription,\r\n disabled = false,\r\n height,\r\n classMap,\r\n className = \"\",\r\n \"data-testid\": testId = \"text-area\",\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const id = useId();\r\n const descriptionId = ariaDescription ? `${id}-description` : undefined;\r\n\r\n const wrapperClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.textArea,\r\n classMap[theme],\r\n classMap[state],\r\n outline && classMap.outline,\r\n disabled && classMap.disabled,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n className\r\n ),\r\n [classMap, outline, disabled, rounding, shadow, className]\r\n );\r\n\r\n return (\r\n <div className={wrapperClass} data-testid={testId}>\r\n {Icon && (\r\n <div\r\n className={classMap.iconContainer}\r\n aria-hidden=\"true\"\r\n data-testid={`${testId}-icon`}\r\n >\r\n <Icon />\r\n </div>\r\n )}\r\n\r\n <textarea\r\n ref={ref}\r\n id={id}\r\n placeholder={placeholder}\r\n aria-label={ariaLabel || placeholder}\r\n aria-describedby={descriptionId}\r\n autoComplete={autoComplete}\r\n readOnly={readOnly}\r\n disabled={disabled}\r\n style={{ height }}\r\n className={classMap.textInput}\r\n data-testid={`${testId}-input`}\r\n {...props}\r\n />\r\n\r\n <div\r\n className={classMap.customResizeHandle}\r\n aria-hidden=\"true\"\r\n data-testid={`${testId}-resize-handle`}\r\n />\r\n\r\n {ariaDescription && (\r\n <span\r\n id={descriptionId}\r\n className={\"sr_only\"}\r\n data-testid={`${testId}-description`}\r\n >\r\n {ariaDescription}\r\n </span>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nTextAreaBase.displayName = \"TextAreaBase\";\r\n\r\nexport default TextAreaBase;\r\n","import { forwardRef } from \"react\";\r\nimport TextAreaBase from \"../TextAreaBase\";\r\nimport type { TextAreaProps } from \"../TextArea.types\";\r\nimport \"./TextArea.scss\";\r\n\r\nconst classes = {\r\n textArea: \"textArea\",\r\n textInput: \"textArea_textInput\",\r\n icon: \"textArea_icon\",\r\n\r\n primary: \"textArea_primary\",\r\n secondary: \"textArea_secondary\",\r\n tertiary: \"textArea_tertiary\",\r\n quaternary: \"textArea_quaternary\",\r\n\r\n success: \"textArea_success\",\r\n error: \"textArea_error\",\r\n warning: \"textArea_warning\",\r\n\r\n clear: \"textArea_clear\",\r\n\r\n outline: \"textArea_outline\",\r\n\r\n disabled: \"textArea_disabled\",\r\n\r\n errorMessage: \"textArea_errorMessage\",\r\n iconContainer: \"textArea_iconContainer\",\r\n errorMessageContainer: \"textArea_errorMessageContainer\",\r\n\r\n shadowNone: \"textArea_shadow-None\",\r\n shadowLight: \"textArea_shadow-Light\",\r\n shadowMedium: \"textArea_shadow-Medium\",\r\n shadowStrong: \"textArea_shadow-Strong\",\r\n shadowIntense: \"textArea_shadow-Intense\",\r\n\r\n roundNone: \"textArea_round-None\",\r\n roundSmall: \"textArea_round-Small\",\r\n roundMedium: \"textArea_round-Medium\",\r\n roundLarge: \"textArea_round-Large\",\r\n};\r\n\r\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\r\n (props, ref) => {\r\n return <TextAreaBase {...props} ref={ref} classMap={classes} />;\r\n }\r\n);\r\n\r\nTextArea.displayName = \"TextArea\";\r\n\r\nexport default TextArea;\r\n"],"names":[],"mappings":";;;;;AAUA,MAAM,eAAe;AAAA,EAInB,CACE;AAAA,IACE,MAAM;AAAA,IACN,cAAc;AAAA,IACd,WAAW;AAAA,IACX,UAAU;AAAA,IACV,eAAe;AAAA,IACf,QAAQ,gBAAA;AAAA,IACR,WAAW,mBAAA;AAAA,IACX,SAAS,iBAAA;AAAA,IACT,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,eAAe,SAAS;AAAA,IACxB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,KAAK,MAAA;AACX,UAAM,gBAAgB,kBAAkB,GAAG,EAAE,iBAAiB;AAE9D,UAAM,eAAe;AAAA,MACnB,MACE;AAAA,QACE,SAAS;AAAA,QACT,SAAS,KAAK;AAAA,QACd,SAAS,KAAK;AAAA,QACd,WAAW,SAAS;AAAA,QACpB,YAAY,SAAS;AAAA,QACrB,UAAU,SAAS,SAAS,WAAW,MAAM,CAAC,EAAE;AAAA,QAChD,YAAY,SAAS,QAAQ,WAAW,QAAQ,CAAC,EAAE;AAAA,QACnD;AAAA,MAAA;AAAA,MAEJ,CAAC,UAAU,SAAS,UAAU,UAAU,QAAQ,SAAS;AAAA,IAAA;AAG3D,WACE,qBAAC,OAAA,EAAI,WAAW,cAAc,eAAa,QACxC,UAAA;AAAA,MAAA,QACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,SAAS;AAAA,UACpB,eAAY;AAAA,UACZ,eAAa,GAAG,MAAM;AAAA,UAEtB,8BAAC,MAAA,CAAA,CAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAIV;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,cAAY,aAAa;AAAA,UACzB,oBAAkB;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO,EAAE,OAAA;AAAA,UACT,WAAW,SAAS;AAAA,UACpB,eAAa,GAAG,MAAM;AAAA,UACrB,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,MAGN;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,SAAS;AAAA,UACpB,eAAY;AAAA,UACZ,eAAa,GAAG,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAGvB,mBACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAW;AAAA,UACX,eAAa,GAAG,MAAM;AAAA,UAErB,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;AChG3B,MAAM,UAAU;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EAEN,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EAET,OAAO;AAAA,EAEP,SAAS;AAAA,EAET,UAAU;AAAA,EAEV,cAAc;AAAA,EACd,eAAe;AAAA,EACf,uBAAuB;AAAA,EAEvB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EAEf,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,YAAY;AACd;AAEA,MAAM,WAAW;AAAA,EACf,CAAC,OAAO,QAAQ;AACd,+BAAQ,cAAA,EAAc,GAAG,OAAO,KAAU,UAAU,SAAS;AAAA,EAC/D;AACF;AAEA,SAAS,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea-CxJexFDv.cjs","sources":["../../src/components/TextArea/TextAreaBase.tsx","../../src/components/TextArea/core/TextArea.tsx"],"sourcesContent":["import { forwardRef, useId, useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { TextAreaProps } from \"./TextArea.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst TextAreaBase = forwardRef<\r\n HTMLTextAreaElement,\r\n TextAreaProps & { classMap: Record<string, string> }\r\n>(\r\n (\r\n {\r\n icon: Icon,\r\n placeholder = \"Enter text\",\r\n readOnly = false,\r\n outline = false,\r\n autoComplete = \"off\",\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n ariaLabel,\r\n ariaDescription,\r\n disabled = false,\r\n height,\r\n classMap,\r\n className = \"\",\r\n \"data-testid\": testId = \"text-area\",\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const id = useId();\r\n const descriptionId = ariaDescription ? `${id}-description` : undefined;\r\n\r\n const wrapperClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.textArea,\r\n classMap[theme],\r\n classMap[state],\r\n outline && classMap.outline,\r\n disabled && classMap.disabled,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n className\r\n ),\r\n [classMap, outline, disabled, rounding, shadow, className]\r\n );\r\n\r\n return (\r\n <div className={wrapperClass} data-testid={testId}>\r\n {Icon && (\r\n <div\r\n className={classMap.iconContainer}\r\n aria-hidden=\"true\"\r\n data-testid={`${testId}-icon`}\r\n >\r\n <Icon />\r\n </div>\r\n )}\r\n\r\n <textarea\r\n ref={ref}\r\n id={id}\r\n placeholder={placeholder}\r\n aria-label={ariaLabel || placeholder}\r\n aria-describedby={descriptionId}\r\n autoComplete={autoComplete}\r\n readOnly={readOnly}\r\n disabled={disabled}\r\n style={{ height }}\r\n className={classMap.textInput}\r\n data-testid={`${testId}-input`}\r\n {...props}\r\n />\r\n\r\n <div\r\n className={classMap.customResizeHandle}\r\n aria-hidden=\"true\"\r\n data-testid={`${testId}-resize-handle`}\r\n />\r\n\r\n {ariaDescription && (\r\n <span\r\n id={descriptionId}\r\n className={\"sr_only\"}\r\n data-testid={`${testId}-description`}\r\n >\r\n {ariaDescription}\r\n </span>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nTextAreaBase.displayName = \"TextAreaBase\";\r\n\r\nexport default TextAreaBase;\r\n","import { forwardRef } from \"react\";\r\nimport TextAreaBase from \"../TextAreaBase\";\r\nimport type { TextAreaProps } from \"../TextArea.types\";\r\nimport \"./TextArea.scss\";\r\n\r\nconst classes = {\r\n textArea: \"textArea\",\r\n textInput: \"textArea_textInput\",\r\n icon: \"textArea_icon\",\r\n\r\n primary: \"textArea_primary\",\r\n secondary: \"textArea_secondary\",\r\n tertiary: \"textArea_tertiary\",\r\n quaternary: \"textArea_quaternary\",\r\n\r\n success: \"textArea_success\",\r\n error: \"textArea_error\",\r\n warning: \"textArea_warning\",\r\n\r\n clear: \"textArea_clear\",\r\n\r\n outline: \"textArea_outline\",\r\n\r\n disabled: \"textArea_disabled\",\r\n\r\n errorMessage: \"textArea_errorMessage\",\r\n iconContainer: \"textArea_iconContainer\",\r\n errorMessageContainer: \"textArea_errorMessageContainer\",\r\n\r\n shadowNone: \"textArea_shadow-None\",\r\n shadowLight: \"textArea_shadow-Light\",\r\n shadowMedium: \"textArea_shadow-Medium\",\r\n shadowStrong: \"textArea_shadow-Strong\",\r\n shadowIntense: \"textArea_shadow-Intense\",\r\n\r\n roundNone: \"textArea_round-None\",\r\n roundSmall: \"textArea_round-Small\",\r\n roundMedium: \"textArea_round-Medium\",\r\n roundLarge: \"textArea_round-Large\",\r\n};\r\n\r\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\r\n (props, ref) => {\r\n return <TextAreaBase {...props} ref={ref} classMap={classes} />;\r\n }\r\n);\r\n\r\nTextArea.displayName = \"TextArea\";\r\n\r\nexport default TextArea;\r\n"],"names":["forwardRef","getDefaultTheme","getDefaultRounding","getDefaultShadow","useId","useMemo","combineClassNames","capitalize","jsxs","jsx"],"mappings":";;;;;;AAUA,MAAM,eAAeA,
|
|
1
|
+
{"version":3,"file":"TextArea-CxJexFDv.cjs","sources":["../../src/components/TextArea/TextAreaBase.tsx","../../src/components/TextArea/core/TextArea.tsx"],"sourcesContent":["import { forwardRef, useId, useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { TextAreaProps } from \"./TextArea.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst TextAreaBase = forwardRef<\r\n HTMLTextAreaElement,\r\n TextAreaProps & { classMap: Record<string, string> }\r\n>(\r\n (\r\n {\r\n icon: Icon,\r\n placeholder = \"Enter text\",\r\n readOnly = false,\r\n outline = false,\r\n autoComplete = \"off\",\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n ariaLabel,\r\n ariaDescription,\r\n disabled = false,\r\n height,\r\n classMap,\r\n className = \"\",\r\n \"data-testid\": testId = \"text-area\",\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const id = useId();\r\n const descriptionId = ariaDescription ? `${id}-description` : undefined;\r\n\r\n const wrapperClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.textArea,\r\n classMap[theme],\r\n classMap[state],\r\n outline && classMap.outline,\r\n disabled && classMap.disabled,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n className\r\n ),\r\n [classMap, outline, disabled, rounding, shadow, className]\r\n );\r\n\r\n return (\r\n <div className={wrapperClass} data-testid={testId}>\r\n {Icon && (\r\n <div\r\n className={classMap.iconContainer}\r\n aria-hidden=\"true\"\r\n data-testid={`${testId}-icon`}\r\n >\r\n <Icon />\r\n </div>\r\n )}\r\n\r\n <textarea\r\n ref={ref}\r\n id={id}\r\n placeholder={placeholder}\r\n aria-label={ariaLabel || placeholder}\r\n aria-describedby={descriptionId}\r\n autoComplete={autoComplete}\r\n readOnly={readOnly}\r\n disabled={disabled}\r\n style={{ height }}\r\n className={classMap.textInput}\r\n data-testid={`${testId}-input`}\r\n {...props}\r\n />\r\n\r\n <div\r\n className={classMap.customResizeHandle}\r\n aria-hidden=\"true\"\r\n data-testid={`${testId}-resize-handle`}\r\n />\r\n\r\n {ariaDescription && (\r\n <span\r\n id={descriptionId}\r\n className={\"sr_only\"}\r\n data-testid={`${testId}-description`}\r\n >\r\n {ariaDescription}\r\n </span>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nTextAreaBase.displayName = \"TextAreaBase\";\r\n\r\nexport default TextAreaBase;\r\n","import { forwardRef } from \"react\";\r\nimport TextAreaBase from \"../TextAreaBase\";\r\nimport type { TextAreaProps } from \"../TextArea.types\";\r\nimport \"./TextArea.scss\";\r\n\r\nconst classes = {\r\n textArea: \"textArea\",\r\n textInput: \"textArea_textInput\",\r\n icon: \"textArea_icon\",\r\n\r\n primary: \"textArea_primary\",\r\n secondary: \"textArea_secondary\",\r\n tertiary: \"textArea_tertiary\",\r\n quaternary: \"textArea_quaternary\",\r\n\r\n success: \"textArea_success\",\r\n error: \"textArea_error\",\r\n warning: \"textArea_warning\",\r\n\r\n clear: \"textArea_clear\",\r\n\r\n outline: \"textArea_outline\",\r\n\r\n disabled: \"textArea_disabled\",\r\n\r\n errorMessage: \"textArea_errorMessage\",\r\n iconContainer: \"textArea_iconContainer\",\r\n errorMessageContainer: \"textArea_errorMessageContainer\",\r\n\r\n shadowNone: \"textArea_shadow-None\",\r\n shadowLight: \"textArea_shadow-Light\",\r\n shadowMedium: \"textArea_shadow-Medium\",\r\n shadowStrong: \"textArea_shadow-Strong\",\r\n shadowIntense: \"textArea_shadow-Intense\",\r\n\r\n roundNone: \"textArea_round-None\",\r\n roundSmall: \"textArea_round-Small\",\r\n roundMedium: \"textArea_round-Medium\",\r\n roundLarge: \"textArea_round-Large\",\r\n};\r\n\r\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\r\n (props, ref) => {\r\n return <TextAreaBase {...props} ref={ref} classMap={classes} />;\r\n }\r\n);\r\n\r\nTextArea.displayName = \"TextArea\";\r\n\r\nexport default TextArea;\r\n"],"names":["forwardRef","getDefaultTheme","getDefaultRounding","getDefaultShadow","useId","useMemo","combineClassNames","capitalize","jsxs","jsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput-8AbKEfUH.cjs","sources":["../../src/Icons/EyeIcon.tsx","../../src/Icons/EyeSlashIcon.tsx","../../src/components/TextInput/TextInputBase.tsx","../../src/components/TextInput/core/TextInput.tsx"],"sourcesContent":["const EyeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\r\n <svg\r\n width=\"24px\"\r\n height=\"24px\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n color=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n {...props}\r\n >\r\n <path\r\n d=\"M3 13C6.6 5 17.4 5 21 13\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M12 17C10.3431 17 9 15.6569 9 14C9 12.3431 10.3431 11 12 11C13.6569 11 15 12.3431 15 14C15 15.6569 13.6569 17 12 17Z\"\r\n fill=\"currentColor\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n </svg>\r\n);\r\n\r\nexport default EyeIcon;\r\n","const EyeSlashIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\r\n <svg\r\n width=\"24px\"\r\n height=\"24px\"\r\n viewBox=\"0 0 24 24\"\r\n strokeWidth=\"1.5\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n color=\"currentColor\"\r\n {...props}\r\n >\r\n <path\r\n d=\"M19.5 16L17.0248 12.6038\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M12 17.5V14\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M4.5 16L6.96895 12.6124\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M3 8C6.6 16 17.4 16 21 8\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n </svg>\r\n);\r\n\r\nexport default EyeSlashIcon;\r\n","import {\r\n forwardRef,\r\n useState,\r\n useId,\r\n InputHTMLAttributes,\r\n useMemo,\r\n} from \"react\";\r\nimport { EyeIcon, EyeSlashIcon } from \"../../Icons\";\r\nimport { TextInputProps } from \"./TextInput.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst TextInputBase = forwardRef<\r\n HTMLInputElement,\r\n TextInputProps & {\r\n classMap: Record<string, string>;\r\n IconButton: React.FC<any>;\r\n }\r\n>(\r\n (\r\n {\r\n icon: Icon,\r\n placeholder = \"Enter text\",\r\n password = false,\r\n readOnly = false,\r\n ariaLabel,\r\n ariaDescription,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n disabled = false,\r\n autocomplete = false,\r\n \"data-testid\": testId = \"text-input\",\r\n classMap,\r\n outline = false,\r\n IconButton,\r\n className = \"\",\r\n ...rest\r\n },\r\n ref\r\n ) => {\r\n const [showPassword, setShowPassword] = useState(false);\r\n const inputId = useId();\r\n const descId = `${inputId}-description`;\r\n\r\n const togglePasswordVisibility = () => setShowPassword((prev) => !prev);\r\n\r\n const wrapperClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.container,\r\n classMap[theme],\r\n classMap[state],\r\n outline && classMap.outline,\r\n disabled && classMap.disabled,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n className\r\n ),\r\n [classMap, theme, state, outline, disabled]\r\n );\r\n\r\n return (\r\n <div\r\n className={wrapperClass}\r\n data-testid={`${testId}-wrapper`}\r\n aria-disabled={disabled}\r\n >\r\n {Icon && (\r\n <div\r\n className={classMap.iconContainer}\r\n aria-hidden=\"true\"\r\n data-testid={`${testId}-icon`}\r\n >\r\n <Icon />\r\n </div>\r\n )}\r\n\r\n <input\r\n ref={ref}\r\n id={inputId}\r\n type={password && !showPassword ? \"password\" : \"text\"}\r\n className={`${classMap.textInput} ${classMap[theme]}`}\r\n placeholder={placeholder}\r\n aria-label={ariaLabel || placeholder}\r\n aria-describedby={ariaDescription ? descId : undefined}\r\n autoComplete={autocomplete ? \"on\" : \"off\"}\r\n readOnly={readOnly}\r\n disabled={disabled}\r\n data-testid={testId}\r\n {...(rest as InputHTMLAttributes<HTMLInputElement>)}\r\n />\r\n\r\n {password && (\r\n <IconButton\r\n type=\"button\"\r\n className={classMap.togglePassword}\r\n onClick={togglePasswordVisibility}\r\n theme=\"clear\"\r\n aria-label={showPassword ? \"Hide password\" : \"Show password\"}\r\n data-testid={`${testId}-password-toggle`}\r\n icon={showPassword ? EyeIcon : EyeSlashIcon}\r\n />\r\n )}\r\n\r\n {ariaDescription && (\r\n <span\r\n id={descId}\r\n className={\"sr_only\"}\r\n data-testid={`${testId}-input-description`}\r\n >\r\n {ariaDescription}\r\n </span>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nTextInputBase.displayName = \"TextInputBase\";\r\nexport default TextInputBase;\r\n","import { forwardRef } from \"react\";\r\nimport \"./TextInput.scss\";\r\nimport { TextInputProps } from \"../TextInput.types\";\r\nimport TextInputBase from \"../TextInputBase\";\r\nimport { IconButton } from \"@/index.core\";\r\n\r\nconst classes = {\r\n container: \"textInput_container\",\r\n textInput: \"textInput\",\r\n iconContainer: \"textInput_icon_container\",\r\n togglePassword: \"textInput_togglePassword\",\r\n\r\n primary: \"textInput_primary\",\r\n secondary: \"textInput_secondary\",\r\n tertiary: \"textInput_tertiary\",\r\n quaternary: \"textInput_quaternary\",\r\n\r\n success: \"textInput_success\",\r\n warning: \"textInput_warning\",\r\n error: \"textInput_error\",\r\n\r\n clear: \"textInput_clear\",\r\n\r\n xs: \"textInput_xs\",\r\n xl: \"textInput_xl\",\r\n small: \"textInput_small\",\r\n medium: \"textInput_medium\",\r\n large: \"textInput_large\",\r\n\r\n outline: \"textInput_outline\",\r\n disabled: \"textInput_disabled\",\r\n\r\n shadowNone: \"textInput_shadow-None\",\r\n shadowLight: \"textInput_shadow-Light\",\r\n shadowMedium: \"textInput_shadow-Medium\",\r\n shadowStrong: \"textInput_shadow-Strong\",\r\n shadowIntense: \"textInput_shadow-Intense\",\r\n\r\n roundNone: \"textInput_round-None\",\r\n roundSmall: \"textInput_round-Small\",\r\n roundMedium: \"textInput_round-Medium\",\r\n roundLarge: \"textInput_round-Large\",\r\n};\r\n\r\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, ref) => {\r\n return (\r\n <TextInputBase\r\n {...props}\r\n IconButton={IconButton}\r\n ref={ref}\r\n classMap={classes}\r\n />\r\n );\r\n});\r\n\r\nTextInput.displayName = \"TextInput\";\r\nexport default TextInput;\r\n"],"names":["jsxs","jsx","forwardRef","getDefaultTheme","getDefaultRounding","getDefaultShadow","IconButton","useState","useId","useMemo","combineClassNames","capitalize"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TextInput-8AbKEfUH.cjs","sources":["../../src/Icons/EyeIcon.tsx","../../src/Icons/EyeSlashIcon.tsx","../../src/components/TextInput/TextInputBase.tsx","../../src/components/TextInput/core/TextInput.tsx"],"sourcesContent":["const EyeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\r\n <svg\r\n width=\"24px\"\r\n height=\"24px\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n color=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n {...props}\r\n >\r\n <path\r\n d=\"M3 13C6.6 5 17.4 5 21 13\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M12 17C10.3431 17 9 15.6569 9 14C9 12.3431 10.3431 11 12 11C13.6569 11 15 12.3431 15 14C15 15.6569 13.6569 17 12 17Z\"\r\n fill=\"currentColor\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n </svg>\r\n);\r\n\r\nexport default EyeIcon;\r\n","const EyeSlashIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\r\n <svg\r\n width=\"24px\"\r\n height=\"24px\"\r\n viewBox=\"0 0 24 24\"\r\n strokeWidth=\"1.5\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n color=\"currentColor\"\r\n {...props}\r\n >\r\n <path\r\n d=\"M19.5 16L17.0248 12.6038\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M12 17.5V14\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M4.5 16L6.96895 12.6124\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M3 8C6.6 16 17.4 16 21 8\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n </svg>\r\n);\r\n\r\nexport default EyeSlashIcon;\r\n","import {\r\n forwardRef,\r\n useState,\r\n useId,\r\n InputHTMLAttributes,\r\n useMemo,\r\n} from \"react\";\r\nimport { EyeIcon, EyeSlashIcon } from \"../../Icons\";\r\nimport { TextInputProps } from \"./TextInput.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst TextInputBase = forwardRef<\r\n HTMLInputElement,\r\n TextInputProps & {\r\n classMap: Record<string, string>;\r\n IconButton: React.FC<any>;\r\n }\r\n>(\r\n (\r\n {\r\n icon: Icon,\r\n placeholder = \"Enter text\",\r\n password = false,\r\n readOnly = false,\r\n ariaLabel,\r\n ariaDescription,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n disabled = false,\r\n autocomplete = false,\r\n \"data-testid\": testId = \"text-input\",\r\n classMap,\r\n outline = false,\r\n IconButton,\r\n className = \"\",\r\n ...rest\r\n },\r\n ref\r\n ) => {\r\n const [showPassword, setShowPassword] = useState(false);\r\n const inputId = useId();\r\n const descId = `${inputId}-description`;\r\n\r\n const togglePasswordVisibility = () => setShowPassword((prev) => !prev);\r\n\r\n const wrapperClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.container,\r\n classMap[theme],\r\n classMap[state],\r\n outline && classMap.outline,\r\n disabled && classMap.disabled,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n className\r\n ),\r\n [classMap, theme, state, outline, disabled]\r\n );\r\n\r\n return (\r\n <div\r\n className={wrapperClass}\r\n data-testid={`${testId}-wrapper`}\r\n aria-disabled={disabled}\r\n >\r\n {Icon && (\r\n <div\r\n className={classMap.iconContainer}\r\n aria-hidden=\"true\"\r\n data-testid={`${testId}-icon`}\r\n >\r\n <Icon />\r\n </div>\r\n )}\r\n\r\n <input\r\n ref={ref}\r\n id={inputId}\r\n type={password && !showPassword ? \"password\" : \"text\"}\r\n className={`${classMap.textInput} ${classMap[theme]}`}\r\n placeholder={placeholder}\r\n aria-label={ariaLabel || placeholder}\r\n aria-describedby={ariaDescription ? descId : undefined}\r\n autoComplete={autocomplete ? \"on\" : \"off\"}\r\n readOnly={readOnly}\r\n disabled={disabled}\r\n data-testid={testId}\r\n {...(rest as InputHTMLAttributes<HTMLInputElement>)}\r\n />\r\n\r\n {password && (\r\n <IconButton\r\n type=\"button\"\r\n className={classMap.togglePassword}\r\n onClick={togglePasswordVisibility}\r\n theme=\"clear\"\r\n aria-label={showPassword ? \"Hide password\" : \"Show password\"}\r\n data-testid={`${testId}-password-toggle`}\r\n icon={showPassword ? EyeIcon : EyeSlashIcon}\r\n />\r\n )}\r\n\r\n {ariaDescription && (\r\n <span\r\n id={descId}\r\n className={\"sr_only\"}\r\n data-testid={`${testId}-input-description`}\r\n >\r\n {ariaDescription}\r\n </span>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nTextInputBase.displayName = \"TextInputBase\";\r\nexport default TextInputBase;\r\n","import { forwardRef } from \"react\";\r\nimport \"./TextInput.scss\";\r\nimport { TextInputProps } from \"../TextInput.types\";\r\nimport TextInputBase from \"../TextInputBase\";\r\nimport { IconButton } from \"@/index.core\";\r\n\r\nconst classes = {\r\n container: \"textInput_container\",\r\n textInput: \"textInput\",\r\n iconContainer: \"textInput_icon_container\",\r\n togglePassword: \"textInput_togglePassword\",\r\n\r\n primary: \"textInput_primary\",\r\n secondary: \"textInput_secondary\",\r\n tertiary: \"textInput_tertiary\",\r\n quaternary: \"textInput_quaternary\",\r\n\r\n success: \"textInput_success\",\r\n warning: \"textInput_warning\",\r\n error: \"textInput_error\",\r\n\r\n clear: \"textInput_clear\",\r\n\r\n xs: \"textInput_xs\",\r\n xl: \"textInput_xl\",\r\n small: \"textInput_small\",\r\n medium: \"textInput_medium\",\r\n large: \"textInput_large\",\r\n\r\n outline: \"textInput_outline\",\r\n disabled: \"textInput_disabled\",\r\n\r\n shadowNone: \"textInput_shadow-None\",\r\n shadowLight: \"textInput_shadow-Light\",\r\n shadowMedium: \"textInput_shadow-Medium\",\r\n shadowStrong: \"textInput_shadow-Strong\",\r\n shadowIntense: \"textInput_shadow-Intense\",\r\n\r\n roundNone: \"textInput_round-None\",\r\n roundSmall: \"textInput_round-Small\",\r\n roundMedium: \"textInput_round-Medium\",\r\n roundLarge: \"textInput_round-Large\",\r\n};\r\n\r\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, ref) => {\r\n return (\r\n <TextInputBase\r\n {...props}\r\n IconButton={IconButton}\r\n ref={ref}\r\n classMap={classes}\r\n />\r\n );\r\n});\r\n\r\nTextInput.displayName = \"TextInput\";\r\nexport default TextInput;\r\n"],"names":["jsxs","jsx","forwardRef","getDefaultTheme","getDefaultRounding","getDefaultShadow","IconButton","useState","useId","useMemo","combineClassNames","capitalize"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput-CtI8fsXR.js","sources":["../../src/Icons/EyeIcon.tsx","../../src/Icons/EyeSlashIcon.tsx","../../src/components/TextInput/TextInputBase.tsx","../../src/components/TextInput/core/TextInput.tsx"],"sourcesContent":["const EyeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\r\n <svg\r\n width=\"24px\"\r\n height=\"24px\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n color=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n {...props}\r\n >\r\n <path\r\n d=\"M3 13C6.6 5 17.4 5 21 13\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M12 17C10.3431 17 9 15.6569 9 14C9 12.3431 10.3431 11 12 11C13.6569 11 15 12.3431 15 14C15 15.6569 13.6569 17 12 17Z\"\r\n fill=\"currentColor\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n </svg>\r\n);\r\n\r\nexport default EyeIcon;\r\n","const EyeSlashIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\r\n <svg\r\n width=\"24px\"\r\n height=\"24px\"\r\n viewBox=\"0 0 24 24\"\r\n strokeWidth=\"1.5\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n color=\"currentColor\"\r\n {...props}\r\n >\r\n <path\r\n d=\"M19.5 16L17.0248 12.6038\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M12 17.5V14\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M4.5 16L6.96895 12.6124\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M3 8C6.6 16 17.4 16 21 8\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n </svg>\r\n);\r\n\r\nexport default EyeSlashIcon;\r\n","import {\r\n forwardRef,\r\n useState,\r\n useId,\r\n InputHTMLAttributes,\r\n useMemo,\r\n} from \"react\";\r\nimport { EyeIcon, EyeSlashIcon } from \"../../Icons\";\r\nimport { TextInputProps } from \"./TextInput.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst TextInputBase = forwardRef<\r\n HTMLInputElement,\r\n TextInputProps & {\r\n classMap: Record<string, string>;\r\n IconButton: React.FC<any>;\r\n }\r\n>(\r\n (\r\n {\r\n icon: Icon,\r\n placeholder = \"Enter text\",\r\n password = false,\r\n readOnly = false,\r\n ariaLabel,\r\n ariaDescription,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n disabled = false,\r\n autocomplete = false,\r\n \"data-testid\": testId = \"text-input\",\r\n classMap,\r\n outline = false,\r\n IconButton,\r\n className = \"\",\r\n ...rest\r\n },\r\n ref\r\n ) => {\r\n const [showPassword, setShowPassword] = useState(false);\r\n const inputId = useId();\r\n const descId = `${inputId}-description`;\r\n\r\n const togglePasswordVisibility = () => setShowPassword((prev) => !prev);\r\n\r\n const wrapperClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.container,\r\n classMap[theme],\r\n classMap[state],\r\n outline && classMap.outline,\r\n disabled && classMap.disabled,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n className\r\n ),\r\n [classMap, theme, state, outline, disabled]\r\n );\r\n\r\n return (\r\n <div\r\n className={wrapperClass}\r\n data-testid={`${testId}-wrapper`}\r\n aria-disabled={disabled}\r\n >\r\n {Icon && (\r\n <div\r\n className={classMap.iconContainer}\r\n aria-hidden=\"true\"\r\n data-testid={`${testId}-icon`}\r\n >\r\n <Icon />\r\n </div>\r\n )}\r\n\r\n <input\r\n ref={ref}\r\n id={inputId}\r\n type={password && !showPassword ? \"password\" : \"text\"}\r\n className={`${classMap.textInput} ${classMap[theme]}`}\r\n placeholder={placeholder}\r\n aria-label={ariaLabel || placeholder}\r\n aria-describedby={ariaDescription ? descId : undefined}\r\n autoComplete={autocomplete ? \"on\" : \"off\"}\r\n readOnly={readOnly}\r\n disabled={disabled}\r\n data-testid={testId}\r\n {...(rest as InputHTMLAttributes<HTMLInputElement>)}\r\n />\r\n\r\n {password && (\r\n <IconButton\r\n type=\"button\"\r\n className={classMap.togglePassword}\r\n onClick={togglePasswordVisibility}\r\n theme=\"clear\"\r\n aria-label={showPassword ? \"Hide password\" : \"Show password\"}\r\n data-testid={`${testId}-password-toggle`}\r\n icon={showPassword ? EyeIcon : EyeSlashIcon}\r\n />\r\n )}\r\n\r\n {ariaDescription && (\r\n <span\r\n id={descId}\r\n className={\"sr_only\"}\r\n data-testid={`${testId}-input-description`}\r\n >\r\n {ariaDescription}\r\n </span>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nTextInputBase.displayName = \"TextInputBase\";\r\nexport default TextInputBase;\r\n","import { forwardRef } from \"react\";\r\nimport \"./TextInput.scss\";\r\nimport { TextInputProps } from \"../TextInput.types\";\r\nimport TextInputBase from \"../TextInputBase\";\r\nimport { IconButton } from \"@/index.core\";\r\n\r\nconst classes = {\r\n container: \"textInput_container\",\r\n textInput: \"textInput\",\r\n iconContainer: \"textInput_icon_container\",\r\n togglePassword: \"textInput_togglePassword\",\r\n\r\n primary: \"textInput_primary\",\r\n secondary: \"textInput_secondary\",\r\n tertiary: \"textInput_tertiary\",\r\n quaternary: \"textInput_quaternary\",\r\n\r\n success: \"textInput_success\",\r\n warning: \"textInput_warning\",\r\n error: \"textInput_error\",\r\n\r\n clear: \"textInput_clear\",\r\n\r\n xs: \"textInput_xs\",\r\n xl: \"textInput_xl\",\r\n small: \"textInput_small\",\r\n medium: \"textInput_medium\",\r\n large: \"textInput_large\",\r\n\r\n outline: \"textInput_outline\",\r\n disabled: \"textInput_disabled\",\r\n\r\n shadowNone: \"textInput_shadow-None\",\r\n shadowLight: \"textInput_shadow-Light\",\r\n shadowMedium: \"textInput_shadow-Medium\",\r\n shadowStrong: \"textInput_shadow-Strong\",\r\n shadowIntense: \"textInput_shadow-Intense\",\r\n\r\n roundNone: \"textInput_round-None\",\r\n roundSmall: \"textInput_round-Small\",\r\n roundMedium: \"textInput_round-Medium\",\r\n roundLarge: \"textInput_round-Large\",\r\n};\r\n\r\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, ref) => {\r\n return (\r\n <TextInputBase\r\n {...props}\r\n IconButton={IconButton}\r\n ref={ref}\r\n classMap={classes}\r\n />\r\n );\r\n});\r\n\r\nTextInput.displayName = \"TextInput\";\r\nexport default TextInput;\r\n"],"names":["IconButton"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TextInput-CtI8fsXR.js","sources":["../../src/Icons/EyeIcon.tsx","../../src/Icons/EyeSlashIcon.tsx","../../src/components/TextInput/TextInputBase.tsx","../../src/components/TextInput/core/TextInput.tsx"],"sourcesContent":["const EyeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\r\n <svg\r\n width=\"24px\"\r\n height=\"24px\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n color=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n {...props}\r\n >\r\n <path\r\n d=\"M3 13C6.6 5 17.4 5 21 13\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M12 17C10.3431 17 9 15.6569 9 14C9 12.3431 10.3431 11 12 11C13.6569 11 15 12.3431 15 14C15 15.6569 13.6569 17 12 17Z\"\r\n fill=\"currentColor\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n </svg>\r\n);\r\n\r\nexport default EyeIcon;\r\n","const EyeSlashIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\r\n <svg\r\n width=\"24px\"\r\n height=\"24px\"\r\n viewBox=\"0 0 24 24\"\r\n strokeWidth=\"1.5\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n color=\"currentColor\"\r\n {...props}\r\n >\r\n <path\r\n d=\"M19.5 16L17.0248 12.6038\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M12 17.5V14\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M4.5 16L6.96895 12.6124\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n <path\r\n d=\"M3 8C6.6 16 17.4 16 21 8\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n ></path>\r\n </svg>\r\n);\r\n\r\nexport default EyeSlashIcon;\r\n","import {\r\n forwardRef,\r\n useState,\r\n useId,\r\n InputHTMLAttributes,\r\n useMemo,\r\n} from \"react\";\r\nimport { EyeIcon, EyeSlashIcon } from \"../../Icons\";\r\nimport { TextInputProps } from \"./TextInput.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst TextInputBase = forwardRef<\r\n HTMLInputElement,\r\n TextInputProps & {\r\n classMap: Record<string, string>;\r\n IconButton: React.FC<any>;\r\n }\r\n>(\r\n (\r\n {\r\n icon: Icon,\r\n placeholder = \"Enter text\",\r\n password = false,\r\n readOnly = false,\r\n ariaLabel,\r\n ariaDescription,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n disabled = false,\r\n autocomplete = false,\r\n \"data-testid\": testId = \"text-input\",\r\n classMap,\r\n outline = false,\r\n IconButton,\r\n className = \"\",\r\n ...rest\r\n },\r\n ref\r\n ) => {\r\n const [showPassword, setShowPassword] = useState(false);\r\n const inputId = useId();\r\n const descId = `${inputId}-description`;\r\n\r\n const togglePasswordVisibility = () => setShowPassword((prev) => !prev);\r\n\r\n const wrapperClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.container,\r\n classMap[theme],\r\n classMap[state],\r\n outline && classMap.outline,\r\n disabled && classMap.disabled,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n className\r\n ),\r\n [classMap, theme, state, outline, disabled]\r\n );\r\n\r\n return (\r\n <div\r\n className={wrapperClass}\r\n data-testid={`${testId}-wrapper`}\r\n aria-disabled={disabled}\r\n >\r\n {Icon && (\r\n <div\r\n className={classMap.iconContainer}\r\n aria-hidden=\"true\"\r\n data-testid={`${testId}-icon`}\r\n >\r\n <Icon />\r\n </div>\r\n )}\r\n\r\n <input\r\n ref={ref}\r\n id={inputId}\r\n type={password && !showPassword ? \"password\" : \"text\"}\r\n className={`${classMap.textInput} ${classMap[theme]}`}\r\n placeholder={placeholder}\r\n aria-label={ariaLabel || placeholder}\r\n aria-describedby={ariaDescription ? descId : undefined}\r\n autoComplete={autocomplete ? \"on\" : \"off\"}\r\n readOnly={readOnly}\r\n disabled={disabled}\r\n data-testid={testId}\r\n {...(rest as InputHTMLAttributes<HTMLInputElement>)}\r\n />\r\n\r\n {password && (\r\n <IconButton\r\n type=\"button\"\r\n className={classMap.togglePassword}\r\n onClick={togglePasswordVisibility}\r\n theme=\"clear\"\r\n aria-label={showPassword ? \"Hide password\" : \"Show password\"}\r\n data-testid={`${testId}-password-toggle`}\r\n icon={showPassword ? EyeIcon : EyeSlashIcon}\r\n />\r\n )}\r\n\r\n {ariaDescription && (\r\n <span\r\n id={descId}\r\n className={\"sr_only\"}\r\n data-testid={`${testId}-input-description`}\r\n >\r\n {ariaDescription}\r\n </span>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nTextInputBase.displayName = \"TextInputBase\";\r\nexport default TextInputBase;\r\n","import { forwardRef } from \"react\";\r\nimport \"./TextInput.scss\";\r\nimport { TextInputProps } from \"../TextInput.types\";\r\nimport TextInputBase from \"../TextInputBase\";\r\nimport { IconButton } from \"@/index.core\";\r\n\r\nconst classes = {\r\n container: \"textInput_container\",\r\n textInput: \"textInput\",\r\n iconContainer: \"textInput_icon_container\",\r\n togglePassword: \"textInput_togglePassword\",\r\n\r\n primary: \"textInput_primary\",\r\n secondary: \"textInput_secondary\",\r\n tertiary: \"textInput_tertiary\",\r\n quaternary: \"textInput_quaternary\",\r\n\r\n success: \"textInput_success\",\r\n warning: \"textInput_warning\",\r\n error: \"textInput_error\",\r\n\r\n clear: \"textInput_clear\",\r\n\r\n xs: \"textInput_xs\",\r\n xl: \"textInput_xl\",\r\n small: \"textInput_small\",\r\n medium: \"textInput_medium\",\r\n large: \"textInput_large\",\r\n\r\n outline: \"textInput_outline\",\r\n disabled: \"textInput_disabled\",\r\n\r\n shadowNone: \"textInput_shadow-None\",\r\n shadowLight: \"textInput_shadow-Light\",\r\n shadowMedium: \"textInput_shadow-Medium\",\r\n shadowStrong: \"textInput_shadow-Strong\",\r\n shadowIntense: \"textInput_shadow-Intense\",\r\n\r\n roundNone: \"textInput_round-None\",\r\n roundSmall: \"textInput_round-Small\",\r\n roundMedium: \"textInput_round-Medium\",\r\n roundLarge: \"textInput_round-Large\",\r\n};\r\n\r\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, ref) => {\r\n return (\r\n <TextInputBase\r\n {...props}\r\n IconButton={IconButton}\r\n ref={ref}\r\n classMap={classes}\r\n />\r\n );\r\n});\r\n\r\nTextInput.displayName = \"TextInput\";\r\nexport default TextInput;\r\n"],"names":["IconButton"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeContext-Bo0vLczy.js","sources":["../../src/context/ThemeContext.tsx"],"sourcesContent":["\"use client\";\r\n\r\n/**\r\n * ---------------------------------------------------------------------\r\n * ThemeProvider.tsx\r\n * ---------------------------------------------------------------------\r\n * Provides a React context for managing and applying color schemes\r\n * dynamically across the Boreal UI system.\r\n *\r\n * Responsibilities:\r\n * - Registers any custom color schemes at runtime\r\n * - Sets the active color scheme based on `localStorage` or fallback default\r\n * - Dynamically updates CSS custom properties (`--*`) on the `:root`\r\n * to reflect the selected theme's color values\r\n * - Ensures text color contrast by calculating luminance and WCAG ratios\r\n *\r\n * Includes:\r\n * - Lightness adjustment utilities for generating `*-light` and `*-hover` variants\r\n * - Contrast checking and accessible text color fallbacks\r\n * - `ThemeContext` with `selectedScheme` index and setter\r\n *\r\n * Hooks:\r\n * - `useEffect` to register schemes and sync saved theme index\r\n * - `useEffect` to apply all computed color variables to `document.documentElement`\r\n *\r\n * Usage:\r\n * ```tsx\r\n * <ThemeProvider customSchemes={[customTheme]}>\r\n * <App />\r\n * </ThemeProvider>\r\n * ```\r\n *\r\n * Access via context:\r\n * ```ts\r\n * const { selectedScheme, setSelectedScheme } = useContext(ThemeContext);\r\n * ```\r\n */\r\n\r\nimport React, { createContext, useState, useEffect } from \"react\";\r\nimport {\r\n getAllColorSchemes,\r\n registerColorScheme,\r\n} from \"../styles/colorSchemeRegistry\";\r\nimport { getDefaultColorSchemeName } from \"../config/boreal-style-config\";\r\nimport { colorSchemes } from \"../styles/Themes\";\r\nimport { ThemeContextType, ThemeProviderProps } from \"./ThemeContext.types\";\r\n\r\nexport const ThemeContext = createContext<ThemeContextType | undefined>(\r\n undefined\r\n);\r\n\r\nconst fallbackIndex = colorSchemes.findIndex(\r\n (scheme) => scheme.name === getDefaultColorSchemeName()\r\n);\r\nconst defaultIndex = fallbackIndex !== -1 ? fallbackIndex : 0;\r\n\r\nconst ThemeProvider: React.FC<ThemeProviderProps> = ({\r\n children,\r\n customSchemes = [],\r\n}) => {\r\n const [selectedScheme, setSelectedScheme] = useState<number>(defaultIndex);\r\n\r\n if (fallbackIndex === -1 && process.env.NODE_ENV === \"development\") {\r\n console.warn(\r\n `Default color scheme \"${getDefaultColorSchemeName()}\" not found. Falling back to index 0.`\r\n );\r\n }\r\n\r\n useEffect(() => {\r\n registerColorScheme(customSchemes);\r\n }, [customSchemes]);\r\n\r\n useEffect(() => {\r\n const savedScheme = localStorage.getItem(\"selectedScheme\");\r\n if (savedScheme) {\r\n setSelectedScheme(parseInt(savedScheme, 10));\r\n } else {\r\n setSelectedScheme(defaultIndex);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n const allSchemes = getAllColorSchemes();\r\n const {\r\n primaryColor,\r\n secondaryColor,\r\n tertiaryColor,\r\n quaternaryColor,\r\n backgroundColor,\r\n forceTextColor,\r\n } = allSchemes[selectedScheme];\r\n\r\n const hexToHSL = (hex: string) => {\r\n const r = parseInt(hex.slice(1, 3), 16) / 255;\r\n const g = parseInt(hex.slice(3, 5), 16) / 255;\r\n const b = parseInt(hex.slice(5, 7), 16) / 255;\r\n const max = Math.max(r, g, b),\r\n min = Math.min(r, g, b);\r\n let h = 0,\r\n s = 0;\r\n const l = (max + min) / 2;\r\n\r\n if (max !== min) {\r\n const d = max - min;\r\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\r\n switch (max) {\r\n case r:\r\n h = (g - b) / d + (g < b ? 6 : 0);\r\n break;\r\n case g:\r\n h = (b - r) / d + 2;\r\n break;\r\n case b:\r\n h = (r - g) / d + 4;\r\n break;\r\n }\r\n h /= 6;\r\n }\r\n\r\n return {\r\n h: Math.round(h * 360),\r\n s: Math.round(s * 100),\r\n l: Math.round(l * 100),\r\n };\r\n };\r\n\r\n const hslToHex = (h: number, s: number, l: number): string => {\r\n s /= 100;\r\n l /= 100;\r\n const k = (n: number) => (n + h / 30) % 12;\r\n const a = s * Math.min(l, 1 - l);\r\n const f = (n: number) =>\r\n Math.round(\r\n 255 *\r\n (l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))))\r\n );\r\n return `#${[f(0), f(8), f(4)].map((x) => x.toString(16).padStart(2, \"0\")).join(\"\")}`;\r\n };\r\n\r\n const adjustLightness = (hex: string, percent: number): string => {\r\n const { h, s, l } = hexToHSL(hex);\r\n return hslToHex(h, s, Math.min(100, Math.max(0, l + percent)));\r\n };\r\n\r\n const relativeLuminance = (hex: string): number => {\r\n const rgb = [1, 3, 5].map((i) => {\r\n const c = parseInt(hex.slice(i, i + 2), 16) / 255;\r\n return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\r\n });\r\n return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];\r\n };\r\n\r\n const contrastRatio = (hex1: string, hex2: string): number => {\r\n const lum1 = relativeLuminance(hex1);\r\n const lum2 = relativeLuminance(hex2);\r\n const lighter = Math.max(lum1, lum2);\r\n const darker = Math.min(lum1, lum2);\r\n return (lighter + 0.05) / (darker + 0.05);\r\n };\r\n\r\n const getAccessibleTextColor = (bgColor: string): string => {\r\n return contrastRatio(bgColor, \"#000000\") >= 4.5 ? \"#000000\" : \"#FFFFFF\";\r\n };\r\n\r\n const variants = {\r\n \"--primary-color\": primaryColor,\r\n \"--primary-color-light\": adjustLightness(primaryColor, 10),\r\n \"--primary-color-hover\": adjustLightness(primaryColor, -10),\r\n \"--text-color-primary\":\r\n forceTextColor ?? getAccessibleTextColor(primaryColor),\r\n\r\n \"--secondary-color\": secondaryColor,\r\n \"--secondary-color-light\": adjustLightness(secondaryColor, 10),\r\n \"--secondary-color-hover\": adjustLightness(secondaryColor, -10),\r\n \"--text-color-secondary\": getAccessibleTextColor(secondaryColor),\r\n\r\n \"--tertiary-color\": tertiaryColor,\r\n \"--tertiary-color-light\": adjustLightness(tertiaryColor, 10),\r\n \"--tertiary-color-hover\": adjustLightness(tertiaryColor, -10),\r\n \"--text-color-tertiary\": getAccessibleTextColor(tertiaryColor),\r\n\r\n \"--quaternary-color\": quaternaryColor,\r\n \"--quaternary-color-light\": adjustLightness(quaternaryColor, 10),\r\n \"--quaternary-color-hover\": adjustLightness(quaternaryColor, -10),\r\n \"--text-color-quaternary\": getAccessibleTextColor(quaternaryColor),\r\n\r\n \"--background-color\": backgroundColor,\r\n \"--background-color-dark\": adjustLightness(backgroundColor, -10),\r\n \"--background-color-darker\": adjustLightness(backgroundColor, -25),\r\n \"--background-color-light\": adjustLightness(backgroundColor, 10),\r\n \"--background-color-lighter\": adjustLightness(backgroundColor, 20),\r\n\r\n \"--link-color\": getAccessibleTextColor(backgroundColor),\r\n \"--link-color-hover\": adjustLightness(\r\n getAccessibleTextColor(backgroundColor),\r\n -20\r\n ),\r\n \"--link-hover-color-primary\": adjustLightness(primaryColor, -10),\r\n \"--link-hover-color-secondary\": adjustLightness(secondaryColor, -10),\r\n };\r\n\r\n const root = document.documentElement.style;\r\n for (const [key, value] of Object.entries(variants)) {\r\n root.setProperty(key, value);\r\n }\r\n\r\n if (typeof window !== \"undefined\") {\r\n localStorage.setItem(\"selectedScheme\", selectedScheme.toString());\r\n }\r\n }, [selectedScheme]);\r\n\r\n return (\r\n <ThemeContext.Provider value={{ selectedScheme, setSelectedScheme }}>\r\n {children}\r\n </ThemeContext.Provider>\r\n );\r\n};\r\n\r\nexport default ThemeProvider;\r\n"],"names":[],"mappings":";;;;;AA+CO,MAAM,eAAe;AAAA,EAC1B;AACF;AAEA,MAAM,gBAAgB,aAAa;AAAA,EACjC,CAAC,WAAW,OAAO,SAAS,0BAA0B;AACxD;AACA,MAAM,eAAe,kBAAkB,KAAK,gBAAgB;AAE5D,MAAM,gBAA8C,CAAC;AAAA,EACnD;AAAA,EACA,gBAAgB,CAAA;AAClB,MAAM;AACJ,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAiB,YAAY;AAEzE,MAAI,kBAAkB,MAAM,QAAQ,IAAI,aAAa,eAAe;AAC1D,YAAA;AAAA,MACN,yBAAyB,2BAA2B;AAAA,IACtD;AAAA,EAAA;AAGF,YAAU,MAAM;AACd,wBAAoB,aAAa;AAAA,EAAA,GAChC,CAAC,aAAa,CAAC;AAElB,YAAU,MAAM;AACR,UAAA,cAAc,aAAa,QAAQ,gBAAgB;AACzD,QAAI,aAAa;AACG,wBAAA,SAAS,aAAa,EAAE,CAAC;AAAA,IAAA,OACtC;AACL,wBAAkB,YAAY;AAAA,IAAA;AAAA,EAElC,GAAG,EAAE;AAEL,YAAU,MAAM;AACd,UAAM,aAAa,mBAAmB;AAChC,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACE,WAAW,cAAc;AAEvB,UAAA,WAAW,CAAC,QAAgB;AAC1B,YAAA,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE,IAAI;AACpC,YAAA,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE,IAAI;AACpC,YAAA,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE,IAAI;AAC1C,YAAM,MAAM,KAAK,IAAI,GAAG,GAAG,CAAC,GAC1B,MAAM,KAAK,IAAI,GAAG,GAAG,CAAC;AACpB,UAAA,IAAI,GACN,IAAI;AACA,YAAA,KAAK,MAAM,OAAO;AAExB,UAAI,QAAQ,KAAK;AACf,cAAM,IAAI,MAAM;AAChB,YAAI,IAAI,MAAM,KAAK,IAAI,MAAM,OAAO,KAAK,MAAM;AAC/C,gBAAQ,KAAK;AAAA,UACX,KAAK;AACH,iBAAK,IAAI,KAAK,KAAK,IAAI,IAAI,IAAI;AAC/B;AAAA,UACF,KAAK;AACE,iBAAA,IAAI,KAAK,IAAI;AAClB;AAAA,UACF,KAAK;AACE,iBAAA,IAAI,KAAK,IAAI;AAClB;AAAA,QAAA;AAEC,aAAA;AAAA,MAAA;AAGA,aAAA;AAAA,QACL,GAAG,KAAK,MAAM,IAAI,GAAG;AAAA,QACrB,GAAG,KAAK,MAAM,IAAI,GAAG;AAAA,QACrB,GAAG,KAAK,MAAM,IAAI,GAAG;AAAA,MACvB;AAAA,IACF;AAEA,UAAM,WAAW,CAAC,GAAW,GAAW,MAAsB;AACvD,WAAA;AACA,WAAA;AACL,YAAM,IAAI,CAAC,OAAe,IAAI,IAAI,MAAM;AACxC,YAAM,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,CAAC;AACzB,YAAA,IAAI,CAAC,MACT,KAAK;AAAA,QACH,OACG,IAAI,IAAI,KAAK,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC,IAAI,GAAG,KAAK,IAAI,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AAAA,MACnE;AACK,aAAA,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC;AAAA,IACpF;AAEM,UAAA,kBAAkB,CAAC,KAAa,YAA4B;AAChE,YAAM,EAAE,GAAG,GAAG,EAAE,IAAI,SAAS,GAAG;AAChC,aAAO,SAAS,GAAG,GAAG,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,IAAI,OAAO,CAAC,CAAC;AAAA,IAC/D;AAEM,UAAA,oBAAoB,CAAC,QAAwB;AAC3C,YAAA,MAAM,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM;AACzB,cAAA,IAAI,SAAS,IAAI,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI;AACvC,eAAA,KAAK,UAAU,IAAI,QAAQ,KAAK,KAAK,IAAI,SAAS,OAAO,GAAG;AAAA,MAAA,CACpE;AACM,aAAA,SAAS,IAAI,CAAC,IAAI,SAAS,IAAI,CAAC,IAAI,SAAS,IAAI,CAAC;AAAA,IAC3D;AAEM,UAAA,gBAAgB,CAAC,MAAc,SAAyB;AACtD,YAAA,OAAO,kBAAkB,IAAI;AAC7B,YAAA,OAAO,kBAAkB,IAAI;AACnC,YAAM,UAAU,KAAK,IAAI,MAAM,IAAI;AACnC,YAAM,SAAS,KAAK,IAAI,MAAM,IAAI;AAC1B,cAAA,UAAU,SAAS,SAAS;AAAA,IACtC;AAEM,UAAA,yBAAyB,CAAC,YAA4B;AAC1D,aAAO,cAAc,SAAS,SAAS,KAAK,MAAM,YAAY;AAAA,IAChE;AAEA,UAAM,WAAW;AAAA,MACf,mBAAmB;AAAA,MACnB,yBAAyB,gBAAgB,cAAc,EAAE;AAAA,MACzD,yBAAyB,gBAAgB,cAAc,GAAG;AAAA,MAC1D,wBACE,kBAAkB,uBAAuB,YAAY;AAAA,MAEvD,qBAAqB;AAAA,MACrB,2BAA2B,gBAAgB,gBAAgB,EAAE;AAAA,MAC7D,2BAA2B,gBAAgB,gBAAgB,GAAG;AAAA,MAC9D,0BAA0B,uBAAuB,cAAc;AAAA,MAE/D,oBAAoB;AAAA,MACpB,0BAA0B,gBAAgB,eAAe,EAAE;AAAA,MAC3D,0BAA0B,gBAAgB,eAAe,GAAG;AAAA,MAC5D,yBAAyB,uBAAuB,aAAa;AAAA,MAE7D,sBAAsB;AAAA,MACtB,4BAA4B,gBAAgB,iBAAiB,EAAE;AAAA,MAC/D,4BAA4B,gBAAgB,iBAAiB,GAAG;AAAA,MAChE,2BAA2B,uBAAuB,eAAe;AAAA,MAEjE,sBAAsB;AAAA,MACtB,2BAA2B,gBAAgB,iBAAiB,GAAG;AAAA,MAC/D,6BAA6B,gBAAgB,iBAAiB,GAAG;AAAA,MACjE,4BAA4B,gBAAgB,iBAAiB,EAAE;AAAA,MAC/D,8BAA8B,gBAAgB,iBAAiB,EAAE;AAAA,MAEjE,gBAAgB,uBAAuB,eAAe;AAAA,MACtD,sBAAsB;AAAA,QACpB,uBAAuB,eAAe;AAAA,QACtC;AAAA,MACF;AAAA,MACA,8BAA8B,gBAAgB,cAAc,GAAG;AAAA,MAC/D,gCAAgC,gBAAgB,gBAAgB,GAAG;AAAA,IACrE;AAEM,UAAA,OAAO,SAAS,gBAAgB;AACtC,eAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,QAAQ,GAAG;AAC9C,WAAA,YAAY,KAAK,KAAK;AAAA,IAAA;AAGzB,QAAA,OAAO,WAAW,aAAa;AACjC,mBAAa,QAAQ,kBAAkB,eAAe,SAAA,CAAU;AAAA,IAAA;AAAA,EAClE,GACC,CAAC,cAAc,CAAC;AAGjB,SAAA,oBAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,gBAAgB,qBAC7C,UACH;AAEJ;"}
|
|
1
|
+
{"version":3,"file":"ThemeContext-Bo0vLczy.js","sources":["../../src/context/ThemeContext.tsx"],"sourcesContent":["\"use client\";\r\n\r\n/**\r\n * ---------------------------------------------------------------------\r\n * ThemeProvider.tsx\r\n * ---------------------------------------------------------------------\r\n * Provides a React context for managing and applying color schemes\r\n * dynamically across the Boreal UI system.\r\n *\r\n * Responsibilities:\r\n * - Registers any custom color schemes at runtime\r\n * - Sets the active color scheme based on `localStorage` or fallback default\r\n * - Dynamically updates CSS custom properties (`--*`) on the `:root`\r\n * to reflect the selected theme's color values\r\n * - Ensures text color contrast by calculating luminance and WCAG ratios\r\n *\r\n * Includes:\r\n * - Lightness adjustment utilities for generating `*-light` and `*-hover` variants\r\n * - Contrast checking and accessible text color fallbacks\r\n * - `ThemeContext` with `selectedScheme` index and setter\r\n *\r\n * Hooks:\r\n * - `useEffect` to register schemes and sync saved theme index\r\n * - `useEffect` to apply all computed color variables to `document.documentElement`\r\n *\r\n * Usage:\r\n * ```tsx\r\n * <ThemeProvider customSchemes={[customTheme]}>\r\n * <App />\r\n * </ThemeProvider>\r\n * ```\r\n *\r\n * Access via context:\r\n * ```ts\r\n * const { selectedScheme, setSelectedScheme } = useContext(ThemeContext);\r\n * ```\r\n */\r\n\r\nimport React, { createContext, useState, useEffect } from \"react\";\r\nimport {\r\n getAllColorSchemes,\r\n registerColorScheme,\r\n} from \"../styles/colorSchemeRegistry\";\r\nimport { getDefaultColorSchemeName } from \"../config/boreal-style-config\";\r\nimport { colorSchemes } from \"../styles/Themes\";\r\nimport { ThemeContextType, ThemeProviderProps } from \"./ThemeContext.types\";\r\n\r\nexport const ThemeContext = createContext<ThemeContextType | undefined>(\r\n undefined\r\n);\r\n\r\nconst fallbackIndex = colorSchemes.findIndex(\r\n (scheme) => scheme.name === getDefaultColorSchemeName()\r\n);\r\nconst defaultIndex = fallbackIndex !== -1 ? fallbackIndex : 0;\r\n\r\nconst ThemeProvider: React.FC<ThemeProviderProps> = ({\r\n children,\r\n customSchemes = [],\r\n}) => {\r\n const [selectedScheme, setSelectedScheme] = useState<number>(defaultIndex);\r\n\r\n if (fallbackIndex === -1 && process.env.NODE_ENV === \"development\") {\r\n console.warn(\r\n `Default color scheme \"${getDefaultColorSchemeName()}\" not found. Falling back to index 0.`\r\n );\r\n }\r\n\r\n useEffect(() => {\r\n registerColorScheme(customSchemes);\r\n }, [customSchemes]);\r\n\r\n useEffect(() => {\r\n const savedScheme = localStorage.getItem(\"selectedScheme\");\r\n if (savedScheme) {\r\n setSelectedScheme(parseInt(savedScheme, 10));\r\n } else {\r\n setSelectedScheme(defaultIndex);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n const allSchemes = getAllColorSchemes();\r\n const {\r\n primaryColor,\r\n secondaryColor,\r\n tertiaryColor,\r\n quaternaryColor,\r\n backgroundColor,\r\n forceTextColor,\r\n } = allSchemes[selectedScheme];\r\n\r\n const hexToHSL = (hex: string) => {\r\n const r = parseInt(hex.slice(1, 3), 16) / 255;\r\n const g = parseInt(hex.slice(3, 5), 16) / 255;\r\n const b = parseInt(hex.slice(5, 7), 16) / 255;\r\n const max = Math.max(r, g, b),\r\n min = Math.min(r, g, b);\r\n let h = 0,\r\n s = 0;\r\n const l = (max + min) / 2;\r\n\r\n if (max !== min) {\r\n const d = max - min;\r\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\r\n switch (max) {\r\n case r:\r\n h = (g - b) / d + (g < b ? 6 : 0);\r\n break;\r\n case g:\r\n h = (b - r) / d + 2;\r\n break;\r\n case b:\r\n h = (r - g) / d + 4;\r\n break;\r\n }\r\n h /= 6;\r\n }\r\n\r\n return {\r\n h: Math.round(h * 360),\r\n s: Math.round(s * 100),\r\n l: Math.round(l * 100),\r\n };\r\n };\r\n\r\n const hslToHex = (h: number, s: number, l: number): string => {\r\n s /= 100;\r\n l /= 100;\r\n const k = (n: number) => (n + h / 30) % 12;\r\n const a = s * Math.min(l, 1 - l);\r\n const f = (n: number) =>\r\n Math.round(\r\n 255 *\r\n (l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))))\r\n );\r\n return `#${[f(0), f(8), f(4)].map((x) => x.toString(16).padStart(2, \"0\")).join(\"\")}`;\r\n };\r\n\r\n const adjustLightness = (hex: string, percent: number): string => {\r\n const { h, s, l } = hexToHSL(hex);\r\n return hslToHex(h, s, Math.min(100, Math.max(0, l + percent)));\r\n };\r\n\r\n const relativeLuminance = (hex: string): number => {\r\n const rgb = [1, 3, 5].map((i) => {\r\n const c = parseInt(hex.slice(i, i + 2), 16) / 255;\r\n return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\r\n });\r\n return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];\r\n };\r\n\r\n const contrastRatio = (hex1: string, hex2: string): number => {\r\n const lum1 = relativeLuminance(hex1);\r\n const lum2 = relativeLuminance(hex2);\r\n const lighter = Math.max(lum1, lum2);\r\n const darker = Math.min(lum1, lum2);\r\n return (lighter + 0.05) / (darker + 0.05);\r\n };\r\n\r\n const getAccessibleTextColor = (bgColor: string): string => {\r\n return contrastRatio(bgColor, \"#000000\") >= 4.5 ? \"#000000\" : \"#FFFFFF\";\r\n };\r\n\r\n const variants = {\r\n \"--primary-color\": primaryColor,\r\n \"--primary-color-light\": adjustLightness(primaryColor, 10),\r\n \"--primary-color-hover\": adjustLightness(primaryColor, -10),\r\n \"--text-color-primary\":\r\n forceTextColor ?? getAccessibleTextColor(primaryColor),\r\n\r\n \"--secondary-color\": secondaryColor,\r\n \"--secondary-color-light\": adjustLightness(secondaryColor, 10),\r\n \"--secondary-color-hover\": adjustLightness(secondaryColor, -10),\r\n \"--text-color-secondary\": getAccessibleTextColor(secondaryColor),\r\n\r\n \"--tertiary-color\": tertiaryColor,\r\n \"--tertiary-color-light\": adjustLightness(tertiaryColor, 10),\r\n \"--tertiary-color-hover\": adjustLightness(tertiaryColor, -10),\r\n \"--text-color-tertiary\": getAccessibleTextColor(tertiaryColor),\r\n\r\n \"--quaternary-color\": quaternaryColor,\r\n \"--quaternary-color-light\": adjustLightness(quaternaryColor, 10),\r\n \"--quaternary-color-hover\": adjustLightness(quaternaryColor, -10),\r\n \"--text-color-quaternary\": getAccessibleTextColor(quaternaryColor),\r\n\r\n \"--background-color\": backgroundColor,\r\n \"--background-color-dark\": adjustLightness(backgroundColor, -10),\r\n \"--background-color-darker\": adjustLightness(backgroundColor, -25),\r\n \"--background-color-light\": adjustLightness(backgroundColor, 10),\r\n \"--background-color-lighter\": adjustLightness(backgroundColor, 20),\r\n\r\n \"--link-color\": getAccessibleTextColor(backgroundColor),\r\n \"--link-color-hover\": adjustLightness(\r\n getAccessibleTextColor(backgroundColor),\r\n -20\r\n ),\r\n \"--link-hover-color-primary\": adjustLightness(primaryColor, -10),\r\n \"--link-hover-color-secondary\": adjustLightness(secondaryColor, -10),\r\n };\r\n\r\n const root = document.documentElement.style;\r\n for (const [key, value] of Object.entries(variants)) {\r\n root.setProperty(key, value);\r\n }\r\n\r\n if (typeof window !== \"undefined\") {\r\n localStorage.setItem(\"selectedScheme\", selectedScheme.toString());\r\n }\r\n }, [selectedScheme]);\r\n\r\n return (\r\n <ThemeContext.Provider value={{ selectedScheme, setSelectedScheme }}>\r\n {children}\r\n </ThemeContext.Provider>\r\n );\r\n};\r\n\r\nexport default ThemeProvider;\r\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeContext-CtZXUeeU.cjs","sources":["../../src/context/ThemeContext.tsx"],"sourcesContent":["\"use client\";\r\n\r\n/**\r\n * ---------------------------------------------------------------------\r\n * ThemeProvider.tsx\r\n * ---------------------------------------------------------------------\r\n * Provides a React context for managing and applying color schemes\r\n * dynamically across the Boreal UI system.\r\n *\r\n * Responsibilities:\r\n * - Registers any custom color schemes at runtime\r\n * - Sets the active color scheme based on `localStorage` or fallback default\r\n * - Dynamically updates CSS custom properties (`--*`) on the `:root`\r\n * to reflect the selected theme's color values\r\n * - Ensures text color contrast by calculating luminance and WCAG ratios\r\n *\r\n * Includes:\r\n * - Lightness adjustment utilities for generating `*-light` and `*-hover` variants\r\n * - Contrast checking and accessible text color fallbacks\r\n * - `ThemeContext` with `selectedScheme` index and setter\r\n *\r\n * Hooks:\r\n * - `useEffect` to register schemes and sync saved theme index\r\n * - `useEffect` to apply all computed color variables to `document.documentElement`\r\n *\r\n * Usage:\r\n * ```tsx\r\n * <ThemeProvider customSchemes={[customTheme]}>\r\n * <App />\r\n * </ThemeProvider>\r\n * ```\r\n *\r\n * Access via context:\r\n * ```ts\r\n * const { selectedScheme, setSelectedScheme } = useContext(ThemeContext);\r\n * ```\r\n */\r\n\r\nimport React, { createContext, useState, useEffect } from \"react\";\r\nimport {\r\n getAllColorSchemes,\r\n registerColorScheme,\r\n} from \"../styles/colorSchemeRegistry\";\r\nimport { getDefaultColorSchemeName } from \"../config/boreal-style-config\";\r\nimport { colorSchemes } from \"../styles/Themes\";\r\nimport { ThemeContextType, ThemeProviderProps } from \"./ThemeContext.types\";\r\n\r\nexport const ThemeContext = createContext<ThemeContextType | undefined>(\r\n undefined\r\n);\r\n\r\nconst fallbackIndex = colorSchemes.findIndex(\r\n (scheme) => scheme.name === getDefaultColorSchemeName()\r\n);\r\nconst defaultIndex = fallbackIndex !== -1 ? fallbackIndex : 0;\r\n\r\nconst ThemeProvider: React.FC<ThemeProviderProps> = ({\r\n children,\r\n customSchemes = [],\r\n}) => {\r\n const [selectedScheme, setSelectedScheme] = useState<number>(defaultIndex);\r\n\r\n if (fallbackIndex === -1 && process.env.NODE_ENV === \"development\") {\r\n console.warn(\r\n `Default color scheme \"${getDefaultColorSchemeName()}\" not found. Falling back to index 0.`\r\n );\r\n }\r\n\r\n useEffect(() => {\r\n registerColorScheme(customSchemes);\r\n }, [customSchemes]);\r\n\r\n useEffect(() => {\r\n const savedScheme = localStorage.getItem(\"selectedScheme\");\r\n if (savedScheme) {\r\n setSelectedScheme(parseInt(savedScheme, 10));\r\n } else {\r\n setSelectedScheme(defaultIndex);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n const allSchemes = getAllColorSchemes();\r\n const {\r\n primaryColor,\r\n secondaryColor,\r\n tertiaryColor,\r\n quaternaryColor,\r\n backgroundColor,\r\n forceTextColor,\r\n } = allSchemes[selectedScheme];\r\n\r\n const hexToHSL = (hex: string) => {\r\n const r = parseInt(hex.slice(1, 3), 16) / 255;\r\n const g = parseInt(hex.slice(3, 5), 16) / 255;\r\n const b = parseInt(hex.slice(5, 7), 16) / 255;\r\n const max = Math.max(r, g, b),\r\n min = Math.min(r, g, b);\r\n let h = 0,\r\n s = 0;\r\n const l = (max + min) / 2;\r\n\r\n if (max !== min) {\r\n const d = max - min;\r\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\r\n switch (max) {\r\n case r:\r\n h = (g - b) / d + (g < b ? 6 : 0);\r\n break;\r\n case g:\r\n h = (b - r) / d + 2;\r\n break;\r\n case b:\r\n h = (r - g) / d + 4;\r\n break;\r\n }\r\n h /= 6;\r\n }\r\n\r\n return {\r\n h: Math.round(h * 360),\r\n s: Math.round(s * 100),\r\n l: Math.round(l * 100),\r\n };\r\n };\r\n\r\n const hslToHex = (h: number, s: number, l: number): string => {\r\n s /= 100;\r\n l /= 100;\r\n const k = (n: number) => (n + h / 30) % 12;\r\n const a = s * Math.min(l, 1 - l);\r\n const f = (n: number) =>\r\n Math.round(\r\n 255 *\r\n (l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))))\r\n );\r\n return `#${[f(0), f(8), f(4)].map((x) => x.toString(16).padStart(2, \"0\")).join(\"\")}`;\r\n };\r\n\r\n const adjustLightness = (hex: string, percent: number): string => {\r\n const { h, s, l } = hexToHSL(hex);\r\n return hslToHex(h, s, Math.min(100, Math.max(0, l + percent)));\r\n };\r\n\r\n const relativeLuminance = (hex: string): number => {\r\n const rgb = [1, 3, 5].map((i) => {\r\n const c = parseInt(hex.slice(i, i + 2), 16) / 255;\r\n return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\r\n });\r\n return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];\r\n };\r\n\r\n const contrastRatio = (hex1: string, hex2: string): number => {\r\n const lum1 = relativeLuminance(hex1);\r\n const lum2 = relativeLuminance(hex2);\r\n const lighter = Math.max(lum1, lum2);\r\n const darker = Math.min(lum1, lum2);\r\n return (lighter + 0.05) / (darker + 0.05);\r\n };\r\n\r\n const getAccessibleTextColor = (bgColor: string): string => {\r\n return contrastRatio(bgColor, \"#000000\") >= 4.5 ? \"#000000\" : \"#FFFFFF\";\r\n };\r\n\r\n const variants = {\r\n \"--primary-color\": primaryColor,\r\n \"--primary-color-light\": adjustLightness(primaryColor, 10),\r\n \"--primary-color-hover\": adjustLightness(primaryColor, -10),\r\n \"--text-color-primary\":\r\n forceTextColor ?? getAccessibleTextColor(primaryColor),\r\n\r\n \"--secondary-color\": secondaryColor,\r\n \"--secondary-color-light\": adjustLightness(secondaryColor, 10),\r\n \"--secondary-color-hover\": adjustLightness(secondaryColor, -10),\r\n \"--text-color-secondary\": getAccessibleTextColor(secondaryColor),\r\n\r\n \"--tertiary-color\": tertiaryColor,\r\n \"--tertiary-color-light\": adjustLightness(tertiaryColor, 10),\r\n \"--tertiary-color-hover\": adjustLightness(tertiaryColor, -10),\r\n \"--text-color-tertiary\": getAccessibleTextColor(tertiaryColor),\r\n\r\n \"--quaternary-color\": quaternaryColor,\r\n \"--quaternary-color-light\": adjustLightness(quaternaryColor, 10),\r\n \"--quaternary-color-hover\": adjustLightness(quaternaryColor, -10),\r\n \"--text-color-quaternary\": getAccessibleTextColor(quaternaryColor),\r\n\r\n \"--background-color\": backgroundColor,\r\n \"--background-color-dark\": adjustLightness(backgroundColor, -10),\r\n \"--background-color-darker\": adjustLightness(backgroundColor, -25),\r\n \"--background-color-light\": adjustLightness(backgroundColor, 10),\r\n \"--background-color-lighter\": adjustLightness(backgroundColor, 20),\r\n\r\n \"--link-color\": getAccessibleTextColor(backgroundColor),\r\n \"--link-color-hover\": adjustLightness(\r\n getAccessibleTextColor(backgroundColor),\r\n -20\r\n ),\r\n \"--link-hover-color-primary\": adjustLightness(primaryColor, -10),\r\n \"--link-hover-color-secondary\": adjustLightness(secondaryColor, -10),\r\n };\r\n\r\n const root = document.documentElement.style;\r\n for (const [key, value] of Object.entries(variants)) {\r\n root.setProperty(key, value);\r\n }\r\n\r\n if (typeof window !== \"undefined\") {\r\n localStorage.setItem(\"selectedScheme\", selectedScheme.toString());\r\n }\r\n }, [selectedScheme]);\r\n\r\n return (\r\n <ThemeContext.Provider value={{ selectedScheme, setSelectedScheme }}>\r\n {children}\r\n </ThemeContext.Provider>\r\n );\r\n};\r\n\r\nexport default ThemeProvider;\r\n"],"names":["createContext","colorSchemes","getDefaultColorSchemeName","useState","useEffect","registerColorScheme","getAllColorSchemes","jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ThemeContext-CtZXUeeU.cjs","sources":["../../src/context/ThemeContext.tsx"],"sourcesContent":["\"use client\";\r\n\r\n/**\r\n * ---------------------------------------------------------------------\r\n * ThemeProvider.tsx\r\n * ---------------------------------------------------------------------\r\n * Provides a React context for managing and applying color schemes\r\n * dynamically across the Boreal UI system.\r\n *\r\n * Responsibilities:\r\n * - Registers any custom color schemes at runtime\r\n * - Sets the active color scheme based on `localStorage` or fallback default\r\n * - Dynamically updates CSS custom properties (`--*`) on the `:root`\r\n * to reflect the selected theme's color values\r\n * - Ensures text color contrast by calculating luminance and WCAG ratios\r\n *\r\n * Includes:\r\n * - Lightness adjustment utilities for generating `*-light` and `*-hover` variants\r\n * - Contrast checking and accessible text color fallbacks\r\n * - `ThemeContext` with `selectedScheme` index and setter\r\n *\r\n * Hooks:\r\n * - `useEffect` to register schemes and sync saved theme index\r\n * - `useEffect` to apply all computed color variables to `document.documentElement`\r\n *\r\n * Usage:\r\n * ```tsx\r\n * <ThemeProvider customSchemes={[customTheme]}>\r\n * <App />\r\n * </ThemeProvider>\r\n * ```\r\n *\r\n * Access via context:\r\n * ```ts\r\n * const { selectedScheme, setSelectedScheme } = useContext(ThemeContext);\r\n * ```\r\n */\r\n\r\nimport React, { createContext, useState, useEffect } from \"react\";\r\nimport {\r\n getAllColorSchemes,\r\n registerColorScheme,\r\n} from \"../styles/colorSchemeRegistry\";\r\nimport { getDefaultColorSchemeName } from \"../config/boreal-style-config\";\r\nimport { colorSchemes } from \"../styles/Themes\";\r\nimport { ThemeContextType, ThemeProviderProps } from \"./ThemeContext.types\";\r\n\r\nexport const ThemeContext = createContext<ThemeContextType | undefined>(\r\n undefined\r\n);\r\n\r\nconst fallbackIndex = colorSchemes.findIndex(\r\n (scheme) => scheme.name === getDefaultColorSchemeName()\r\n);\r\nconst defaultIndex = fallbackIndex !== -1 ? fallbackIndex : 0;\r\n\r\nconst ThemeProvider: React.FC<ThemeProviderProps> = ({\r\n children,\r\n customSchemes = [],\r\n}) => {\r\n const [selectedScheme, setSelectedScheme] = useState<number>(defaultIndex);\r\n\r\n if (fallbackIndex === -1 && process.env.NODE_ENV === \"development\") {\r\n console.warn(\r\n `Default color scheme \"${getDefaultColorSchemeName()}\" not found. Falling back to index 0.`\r\n );\r\n }\r\n\r\n useEffect(() => {\r\n registerColorScheme(customSchemes);\r\n }, [customSchemes]);\r\n\r\n useEffect(() => {\r\n const savedScheme = localStorage.getItem(\"selectedScheme\");\r\n if (savedScheme) {\r\n setSelectedScheme(parseInt(savedScheme, 10));\r\n } else {\r\n setSelectedScheme(defaultIndex);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n const allSchemes = getAllColorSchemes();\r\n const {\r\n primaryColor,\r\n secondaryColor,\r\n tertiaryColor,\r\n quaternaryColor,\r\n backgroundColor,\r\n forceTextColor,\r\n } = allSchemes[selectedScheme];\r\n\r\n const hexToHSL = (hex: string) => {\r\n const r = parseInt(hex.slice(1, 3), 16) / 255;\r\n const g = parseInt(hex.slice(3, 5), 16) / 255;\r\n const b = parseInt(hex.slice(5, 7), 16) / 255;\r\n const max = Math.max(r, g, b),\r\n min = Math.min(r, g, b);\r\n let h = 0,\r\n s = 0;\r\n const l = (max + min) / 2;\r\n\r\n if (max !== min) {\r\n const d = max - min;\r\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\r\n switch (max) {\r\n case r:\r\n h = (g - b) / d + (g < b ? 6 : 0);\r\n break;\r\n case g:\r\n h = (b - r) / d + 2;\r\n break;\r\n case b:\r\n h = (r - g) / d + 4;\r\n break;\r\n }\r\n h /= 6;\r\n }\r\n\r\n return {\r\n h: Math.round(h * 360),\r\n s: Math.round(s * 100),\r\n l: Math.round(l * 100),\r\n };\r\n };\r\n\r\n const hslToHex = (h: number, s: number, l: number): string => {\r\n s /= 100;\r\n l /= 100;\r\n const k = (n: number) => (n + h / 30) % 12;\r\n const a = s * Math.min(l, 1 - l);\r\n const f = (n: number) =>\r\n Math.round(\r\n 255 *\r\n (l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))))\r\n );\r\n return `#${[f(0), f(8), f(4)].map((x) => x.toString(16).padStart(2, \"0\")).join(\"\")}`;\r\n };\r\n\r\n const adjustLightness = (hex: string, percent: number): string => {\r\n const { h, s, l } = hexToHSL(hex);\r\n return hslToHex(h, s, Math.min(100, Math.max(0, l + percent)));\r\n };\r\n\r\n const relativeLuminance = (hex: string): number => {\r\n const rgb = [1, 3, 5].map((i) => {\r\n const c = parseInt(hex.slice(i, i + 2), 16) / 255;\r\n return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\r\n });\r\n return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];\r\n };\r\n\r\n const contrastRatio = (hex1: string, hex2: string): number => {\r\n const lum1 = relativeLuminance(hex1);\r\n const lum2 = relativeLuminance(hex2);\r\n const lighter = Math.max(lum1, lum2);\r\n const darker = Math.min(lum1, lum2);\r\n return (lighter + 0.05) / (darker + 0.05);\r\n };\r\n\r\n const getAccessibleTextColor = (bgColor: string): string => {\r\n return contrastRatio(bgColor, \"#000000\") >= 4.5 ? \"#000000\" : \"#FFFFFF\";\r\n };\r\n\r\n const variants = {\r\n \"--primary-color\": primaryColor,\r\n \"--primary-color-light\": adjustLightness(primaryColor, 10),\r\n \"--primary-color-hover\": adjustLightness(primaryColor, -10),\r\n \"--text-color-primary\":\r\n forceTextColor ?? getAccessibleTextColor(primaryColor),\r\n\r\n \"--secondary-color\": secondaryColor,\r\n \"--secondary-color-light\": adjustLightness(secondaryColor, 10),\r\n \"--secondary-color-hover\": adjustLightness(secondaryColor, -10),\r\n \"--text-color-secondary\": getAccessibleTextColor(secondaryColor),\r\n\r\n \"--tertiary-color\": tertiaryColor,\r\n \"--tertiary-color-light\": adjustLightness(tertiaryColor, 10),\r\n \"--tertiary-color-hover\": adjustLightness(tertiaryColor, -10),\r\n \"--text-color-tertiary\": getAccessibleTextColor(tertiaryColor),\r\n\r\n \"--quaternary-color\": quaternaryColor,\r\n \"--quaternary-color-light\": adjustLightness(quaternaryColor, 10),\r\n \"--quaternary-color-hover\": adjustLightness(quaternaryColor, -10),\r\n \"--text-color-quaternary\": getAccessibleTextColor(quaternaryColor),\r\n\r\n \"--background-color\": backgroundColor,\r\n \"--background-color-dark\": adjustLightness(backgroundColor, -10),\r\n \"--background-color-darker\": adjustLightness(backgroundColor, -25),\r\n \"--background-color-light\": adjustLightness(backgroundColor, 10),\r\n \"--background-color-lighter\": adjustLightness(backgroundColor, 20),\r\n\r\n \"--link-color\": getAccessibleTextColor(backgroundColor),\r\n \"--link-color-hover\": adjustLightness(\r\n getAccessibleTextColor(backgroundColor),\r\n -20\r\n ),\r\n \"--link-hover-color-primary\": adjustLightness(primaryColor, -10),\r\n \"--link-hover-color-secondary\": adjustLightness(secondaryColor, -10),\r\n };\r\n\r\n const root = document.documentElement.style;\r\n for (const [key, value] of Object.entries(variants)) {\r\n root.setProperty(key, value);\r\n }\r\n\r\n if (typeof window !== \"undefined\") {\r\n localStorage.setItem(\"selectedScheme\", selectedScheme.toString());\r\n }\r\n }, [selectedScheme]);\r\n\r\n return (\r\n <ThemeContext.Provider value={{ selectedScheme, setSelectedScheme }}>\r\n {children}\r\n </ThemeContext.Provider>\r\n );\r\n};\r\n\r\nexport default ThemeProvider;\r\n"],"names":["createContext","colorSchemes","getDefaultColorSchemeName","useState","useEffect","registerColorScheme","getAllColorSchemes","jsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline-D7fd8-u_.js","sources":["../../src/components/Timeline/TimelineBase.tsx","../../src/components/Timeline/core/Timeline.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\r\nimport { TimelineProps } from \"./Timeline.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst TimelineBase: React.FC<\r\n TimelineProps & { classMap: Record<string, string> }\r\n> = ({\r\n items,\r\n orientation = \"vertical\",\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n classMap,\r\n className,\r\n \"data-testid\": testId = \"timeline\",\r\n}) => {\r\n const outerWrapper = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.timeline,\r\n classMap[orientation],\r\n classMap[theme],\r\n className\r\n ),\r\n [classMap, orientation, theme, shadow, rounding]\r\n );\r\n\r\n const itemClassName = useMemo(\r\n () =>\r\n combineClassNames(classMap.item, classMap[orientation], classMap[theme]),\r\n [classMap, orientation, theme]\r\n );\r\n\r\n const markerClassName = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.marker,\r\n classMap[theme],\r\n classMap[orientation],\r\n shadow && classMap[`shadow${capitalize(shadow)}`]\r\n ),\r\n [classMap, orientation, theme, shadow]\r\n );\r\n\r\n const contentClassName = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.content,\r\n classMap[orientation],\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`]\r\n ),\r\n [classMap, orientation, shadow, rounding]\r\n );\r\n\r\n return (\r\n <ul className={outerWrapper} data-testid={testId} aria-label=\"Timeline\">\r\n {items.map((item, index) => {\r\n const IconComponent = item.icon;\r\n const itemTestId = `${testId}-item-${index}`;\r\n const labelId = `${itemTestId}-title`;\r\n\r\n return (\r\n <li\r\n key={index}\r\n className={itemClassName}\r\n data-testid={itemTestId}\r\n aria-labelledby={labelId}\r\n >\r\n <div\r\n className={markerClassName}\r\n data-testid={`${itemTestId}-marker`}\r\n aria-hidden={IconComponent ? \"true\" : undefined}\r\n >\r\n {IconComponent ? (\r\n <div\r\n className={classMap.icon}\r\n data-testid={`${itemTestId}-icon`}\r\n >\r\n <IconComponent />\r\n </div>\r\n ) : (\r\n <div\r\n className={classMap.dot}\r\n data-testid={`${itemTestId}-dot`}\r\n aria-hidden=\"true\"\r\n />\r\n )}\r\n </div>\r\n\r\n <div\r\n className={contentClassName}\r\n data-testid={`${itemTestId}-content`}\r\n >\r\n <h3 id={labelId} className={classMap.title}>\r\n {item.title}\r\n </h3>\r\n {item.date && (\r\n <p\r\n className={classMap.date}\r\n data-testid={`${itemTestId}-date`}\r\n aria-label={`Date: ${item.date}`}\r\n >\r\n {item.date}\r\n </p>\r\n )}\r\n {item.description && (\r\n <p\r\n className={classMap.description}\r\n data-testid={`${itemTestId}-description`}\r\n >\r\n {item.description}\r\n </p>\r\n )}\r\n </div>\r\n </li>\r\n );\r\n })}\r\n </ul>\r\n );\r\n};\r\n\r\nexport default TimelineBase;\r\n","import React from \"react\";\r\nimport \"./Timeline.scss\";\r\nimport TimelineBase from \"../TimelineBase\";\r\nimport { TimelineProps } from \"../Timeline.types\";\r\n\r\nconst classes = {\r\n timeline: \"timeline\",\r\n item: \"timeline_item\",\r\n marker: \"timeline_marker\",\r\n icon: \"timeline_icon\",\r\n dot: \"timeline_dot\",\r\n content: \"timeline_content\",\r\n title: \"timeline_title\",\r\n date: \"timeline_date\",\r\n description: \"timeline_description\",\r\n\r\n vertical: \"timeline_vertical\",\r\n horizontal: \"timeline_horizontal\",\r\n\r\n primary: \"timeline_primary\",\r\n secondary: \"timeline_secondary\",\r\n tertiary: \"timeline_tertiary\",\r\n quaternary: \"timeline_quaternary\",\r\n\r\n clear: \"timeline_clear\",\r\n\r\n shadowNone: \"timeline_shadow-None\",\r\n shadowLight: \"timeline_shadow-Light\",\r\n shadowMedium: \"timeline_shadow-Medium\",\r\n shadowStrong: \"timeline_shadow-Strong\",\r\n shadowIntense: \"timeline_shadow-Intense\",\r\n\r\n roundNone: \"timeline_round-None\",\r\n roundSmall: \"timeline_round-Small\",\r\n roundMedium: \"timeline_round-Medium\",\r\n roundLarge: \"timeline_round-Large\",\r\n};\r\n\r\nconst Timeline: React.FC<TimelineProps> = (props) => {\r\n return <TimelineBase {...props} classMap={classes} />;\r\n};\r\n\r\nexport default Timeline;\r\n"],"names":[],"mappings":";;;;;AAUA,MAAM,eAEF,CAAC;AAAA,EACH;AAAA,EACA,cAAc;AAAA,EACd,QAAQ,
|
|
1
|
+
{"version":3,"file":"Timeline-D7fd8-u_.js","sources":["../../src/components/Timeline/TimelineBase.tsx","../../src/components/Timeline/core/Timeline.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\r\nimport { TimelineProps } from \"./Timeline.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst TimelineBase: React.FC<\r\n TimelineProps & { classMap: Record<string, string> }\r\n> = ({\r\n items,\r\n orientation = \"vertical\",\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n classMap,\r\n className,\r\n \"data-testid\": testId = \"timeline\",\r\n}) => {\r\n const outerWrapper = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.timeline,\r\n classMap[orientation],\r\n classMap[theme],\r\n className\r\n ),\r\n [classMap, orientation, theme, shadow, rounding]\r\n );\r\n\r\n const itemClassName = useMemo(\r\n () =>\r\n combineClassNames(classMap.item, classMap[orientation], classMap[theme]),\r\n [classMap, orientation, theme]\r\n );\r\n\r\n const markerClassName = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.marker,\r\n classMap[theme],\r\n classMap[orientation],\r\n shadow && classMap[`shadow${capitalize(shadow)}`]\r\n ),\r\n [classMap, orientation, theme, shadow]\r\n );\r\n\r\n const contentClassName = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.content,\r\n classMap[orientation],\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`]\r\n ),\r\n [classMap, orientation, shadow, rounding]\r\n );\r\n\r\n return (\r\n <ul className={outerWrapper} data-testid={testId} aria-label=\"Timeline\">\r\n {items.map((item, index) => {\r\n const IconComponent = item.icon;\r\n const itemTestId = `${testId}-item-${index}`;\r\n const labelId = `${itemTestId}-title`;\r\n\r\n return (\r\n <li\r\n key={index}\r\n className={itemClassName}\r\n data-testid={itemTestId}\r\n aria-labelledby={labelId}\r\n >\r\n <div\r\n className={markerClassName}\r\n data-testid={`${itemTestId}-marker`}\r\n aria-hidden={IconComponent ? \"true\" : undefined}\r\n >\r\n {IconComponent ? (\r\n <div\r\n className={classMap.icon}\r\n data-testid={`${itemTestId}-icon`}\r\n >\r\n <IconComponent />\r\n </div>\r\n ) : (\r\n <div\r\n className={classMap.dot}\r\n data-testid={`${itemTestId}-dot`}\r\n aria-hidden=\"true\"\r\n />\r\n )}\r\n </div>\r\n\r\n <div\r\n className={contentClassName}\r\n data-testid={`${itemTestId}-content`}\r\n >\r\n <h3 id={labelId} className={classMap.title}>\r\n {item.title}\r\n </h3>\r\n {item.date && (\r\n <p\r\n className={classMap.date}\r\n data-testid={`${itemTestId}-date`}\r\n aria-label={`Date: ${item.date}`}\r\n >\r\n {item.date}\r\n </p>\r\n )}\r\n {item.description && (\r\n <p\r\n className={classMap.description}\r\n data-testid={`${itemTestId}-description`}\r\n >\r\n {item.description}\r\n </p>\r\n )}\r\n </div>\r\n </li>\r\n );\r\n })}\r\n </ul>\r\n );\r\n};\r\n\r\nexport default TimelineBase;\r\n","import React from \"react\";\r\nimport \"./Timeline.scss\";\r\nimport TimelineBase from \"../TimelineBase\";\r\nimport { TimelineProps } from \"../Timeline.types\";\r\n\r\nconst classes = {\r\n timeline: \"timeline\",\r\n item: \"timeline_item\",\r\n marker: \"timeline_marker\",\r\n icon: \"timeline_icon\",\r\n dot: \"timeline_dot\",\r\n content: \"timeline_content\",\r\n title: \"timeline_title\",\r\n date: \"timeline_date\",\r\n description: \"timeline_description\",\r\n\r\n vertical: \"timeline_vertical\",\r\n horizontal: \"timeline_horizontal\",\r\n\r\n primary: \"timeline_primary\",\r\n secondary: \"timeline_secondary\",\r\n tertiary: \"timeline_tertiary\",\r\n quaternary: \"timeline_quaternary\",\r\n\r\n clear: \"timeline_clear\",\r\n\r\n shadowNone: \"timeline_shadow-None\",\r\n shadowLight: \"timeline_shadow-Light\",\r\n shadowMedium: \"timeline_shadow-Medium\",\r\n shadowStrong: \"timeline_shadow-Strong\",\r\n shadowIntense: \"timeline_shadow-Intense\",\r\n\r\n roundNone: \"timeline_round-None\",\r\n roundSmall: \"timeline_round-Small\",\r\n roundMedium: \"timeline_round-Medium\",\r\n roundLarge: \"timeline_round-Large\",\r\n};\r\n\r\nconst Timeline: React.FC<TimelineProps> = (props) => {\r\n return <TimelineBase {...props} classMap={classes} />;\r\n};\r\n\r\nexport default Timeline;\r\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline-Dk0q-8BZ.cjs","sources":["../../src/components/Timeline/TimelineBase.tsx","../../src/components/Timeline/core/Timeline.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\r\nimport { TimelineProps } from \"./Timeline.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst TimelineBase: React.FC<\r\n TimelineProps & { classMap: Record<string, string> }\r\n> = ({\r\n items,\r\n orientation = \"vertical\",\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n classMap,\r\n className,\r\n \"data-testid\": testId = \"timeline\",\r\n}) => {\r\n const outerWrapper = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.timeline,\r\n classMap[orientation],\r\n classMap[theme],\r\n className\r\n ),\r\n [classMap, orientation, theme, shadow, rounding]\r\n );\r\n\r\n const itemClassName = useMemo(\r\n () =>\r\n combineClassNames(classMap.item, classMap[orientation], classMap[theme]),\r\n [classMap, orientation, theme]\r\n );\r\n\r\n const markerClassName = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.marker,\r\n classMap[theme],\r\n classMap[orientation],\r\n shadow && classMap[`shadow${capitalize(shadow)}`]\r\n ),\r\n [classMap, orientation, theme, shadow]\r\n );\r\n\r\n const contentClassName = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.content,\r\n classMap[orientation],\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`]\r\n ),\r\n [classMap, orientation, shadow, rounding]\r\n );\r\n\r\n return (\r\n <ul className={outerWrapper} data-testid={testId} aria-label=\"Timeline\">\r\n {items.map((item, index) => {\r\n const IconComponent = item.icon;\r\n const itemTestId = `${testId}-item-${index}`;\r\n const labelId = `${itemTestId}-title`;\r\n\r\n return (\r\n <li\r\n key={index}\r\n className={itemClassName}\r\n data-testid={itemTestId}\r\n aria-labelledby={labelId}\r\n >\r\n <div\r\n className={markerClassName}\r\n data-testid={`${itemTestId}-marker`}\r\n aria-hidden={IconComponent ? \"true\" : undefined}\r\n >\r\n {IconComponent ? (\r\n <div\r\n className={classMap.icon}\r\n data-testid={`${itemTestId}-icon`}\r\n >\r\n <IconComponent />\r\n </div>\r\n ) : (\r\n <div\r\n className={classMap.dot}\r\n data-testid={`${itemTestId}-dot`}\r\n aria-hidden=\"true\"\r\n />\r\n )}\r\n </div>\r\n\r\n <div\r\n className={contentClassName}\r\n data-testid={`${itemTestId}-content`}\r\n >\r\n <h3 id={labelId} className={classMap.title}>\r\n {item.title}\r\n </h3>\r\n {item.date && (\r\n <p\r\n className={classMap.date}\r\n data-testid={`${itemTestId}-date`}\r\n aria-label={`Date: ${item.date}`}\r\n >\r\n {item.date}\r\n </p>\r\n )}\r\n {item.description && (\r\n <p\r\n className={classMap.description}\r\n data-testid={`${itemTestId}-description`}\r\n >\r\n {item.description}\r\n </p>\r\n )}\r\n </div>\r\n </li>\r\n );\r\n })}\r\n </ul>\r\n );\r\n};\r\n\r\nexport default TimelineBase;\r\n","import React from \"react\";\r\nimport \"./Timeline.scss\";\r\nimport TimelineBase from \"../TimelineBase\";\r\nimport { TimelineProps } from \"../Timeline.types\";\r\n\r\nconst classes = {\r\n timeline: \"timeline\",\r\n item: \"timeline_item\",\r\n marker: \"timeline_marker\",\r\n icon: \"timeline_icon\",\r\n dot: \"timeline_dot\",\r\n content: \"timeline_content\",\r\n title: \"timeline_title\",\r\n date: \"timeline_date\",\r\n description: \"timeline_description\",\r\n\r\n vertical: \"timeline_vertical\",\r\n horizontal: \"timeline_horizontal\",\r\n\r\n primary: \"timeline_primary\",\r\n secondary: \"timeline_secondary\",\r\n tertiary: \"timeline_tertiary\",\r\n quaternary: \"timeline_quaternary\",\r\n\r\n clear: \"timeline_clear\",\r\n\r\n shadowNone: \"timeline_shadow-None\",\r\n shadowLight: \"timeline_shadow-Light\",\r\n shadowMedium: \"timeline_shadow-Medium\",\r\n shadowStrong: \"timeline_shadow-Strong\",\r\n shadowIntense: \"timeline_shadow-Intense\",\r\n\r\n roundNone: \"timeline_round-None\",\r\n roundSmall: \"timeline_round-Small\",\r\n roundMedium: \"timeline_round-Medium\",\r\n roundLarge: \"timeline_round-Large\",\r\n};\r\n\r\nconst Timeline: React.FC<TimelineProps> = (props) => {\r\n return <TimelineBase {...props} classMap={classes} />;\r\n};\r\n\r\nexport default Timeline;\r\n"],"names":["getDefaultTheme","getDefaultRounding","getDefaultShadow","useMemo","combineClassNames","capitalize","jsx","jsxs"],"mappings":";;;;;;AAUA,MAAM,eAEF,CAAC;AAAA,EACH;AAAA,EACA,cAAc;AAAA,EACd,QAAQA,kBAAAA,
|
|
1
|
+
{"version":3,"file":"Timeline-Dk0q-8BZ.cjs","sources":["../../src/components/Timeline/TimelineBase.tsx","../../src/components/Timeline/core/Timeline.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\r\nimport { TimelineProps } from \"./Timeline.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst TimelineBase: React.FC<\r\n TimelineProps & { classMap: Record<string, string> }\r\n> = ({\r\n items,\r\n orientation = \"vertical\",\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n classMap,\r\n className,\r\n \"data-testid\": testId = \"timeline\",\r\n}) => {\r\n const outerWrapper = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.timeline,\r\n classMap[orientation],\r\n classMap[theme],\r\n className\r\n ),\r\n [classMap, orientation, theme, shadow, rounding]\r\n );\r\n\r\n const itemClassName = useMemo(\r\n () =>\r\n combineClassNames(classMap.item, classMap[orientation], classMap[theme]),\r\n [classMap, orientation, theme]\r\n );\r\n\r\n const markerClassName = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.marker,\r\n classMap[theme],\r\n classMap[orientation],\r\n shadow && classMap[`shadow${capitalize(shadow)}`]\r\n ),\r\n [classMap, orientation, theme, shadow]\r\n );\r\n\r\n const contentClassName = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.content,\r\n classMap[orientation],\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`]\r\n ),\r\n [classMap, orientation, shadow, rounding]\r\n );\r\n\r\n return (\r\n <ul className={outerWrapper} data-testid={testId} aria-label=\"Timeline\">\r\n {items.map((item, index) => {\r\n const IconComponent = item.icon;\r\n const itemTestId = `${testId}-item-${index}`;\r\n const labelId = `${itemTestId}-title`;\r\n\r\n return (\r\n <li\r\n key={index}\r\n className={itemClassName}\r\n data-testid={itemTestId}\r\n aria-labelledby={labelId}\r\n >\r\n <div\r\n className={markerClassName}\r\n data-testid={`${itemTestId}-marker`}\r\n aria-hidden={IconComponent ? \"true\" : undefined}\r\n >\r\n {IconComponent ? (\r\n <div\r\n className={classMap.icon}\r\n data-testid={`${itemTestId}-icon`}\r\n >\r\n <IconComponent />\r\n </div>\r\n ) : (\r\n <div\r\n className={classMap.dot}\r\n data-testid={`${itemTestId}-dot`}\r\n aria-hidden=\"true\"\r\n />\r\n )}\r\n </div>\r\n\r\n <div\r\n className={contentClassName}\r\n data-testid={`${itemTestId}-content`}\r\n >\r\n <h3 id={labelId} className={classMap.title}>\r\n {item.title}\r\n </h3>\r\n {item.date && (\r\n <p\r\n className={classMap.date}\r\n data-testid={`${itemTestId}-date`}\r\n aria-label={`Date: ${item.date}`}\r\n >\r\n {item.date}\r\n </p>\r\n )}\r\n {item.description && (\r\n <p\r\n className={classMap.description}\r\n data-testid={`${itemTestId}-description`}\r\n >\r\n {item.description}\r\n </p>\r\n )}\r\n </div>\r\n </li>\r\n );\r\n })}\r\n </ul>\r\n );\r\n};\r\n\r\nexport default TimelineBase;\r\n","import React from \"react\";\r\nimport \"./Timeline.scss\";\r\nimport TimelineBase from \"../TimelineBase\";\r\nimport { TimelineProps } from \"../Timeline.types\";\r\n\r\nconst classes = {\r\n timeline: \"timeline\",\r\n item: \"timeline_item\",\r\n marker: \"timeline_marker\",\r\n icon: \"timeline_icon\",\r\n dot: \"timeline_dot\",\r\n content: \"timeline_content\",\r\n title: \"timeline_title\",\r\n date: \"timeline_date\",\r\n description: \"timeline_description\",\r\n\r\n vertical: \"timeline_vertical\",\r\n horizontal: \"timeline_horizontal\",\r\n\r\n primary: \"timeline_primary\",\r\n secondary: \"timeline_secondary\",\r\n tertiary: \"timeline_tertiary\",\r\n quaternary: \"timeline_quaternary\",\r\n\r\n clear: \"timeline_clear\",\r\n\r\n shadowNone: \"timeline_shadow-None\",\r\n shadowLight: \"timeline_shadow-Light\",\r\n shadowMedium: \"timeline_shadow-Medium\",\r\n shadowStrong: \"timeline_shadow-Strong\",\r\n shadowIntense: \"timeline_shadow-Intense\",\r\n\r\n roundNone: \"timeline_round-None\",\r\n roundSmall: \"timeline_round-Small\",\r\n roundMedium: \"timeline_round-Medium\",\r\n roundLarge: \"timeline_round-Large\",\r\n};\r\n\r\nconst Timeline: React.FC<TimelineProps> = (props) => {\r\n return <TimelineBase {...props} classMap={classes} />;\r\n};\r\n\r\nexport default Timeline;\r\n"],"names":["getDefaultTheme","getDefaultRounding","getDefaultShadow","useMemo","combineClassNames","capitalize","jsx","jsxs"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle-CZftIdc3.js","sources":["../../src/components/Toggle/ToggleBase.tsx","../../src/components/Toggle/core/Toggle.tsx"],"sourcesContent":["import { forwardRef, KeyboardEvent, useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { ToggleProps } from \"./Toggle.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultSize,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nexport interface ToggleBaseProps extends ToggleProps {\r\n classMap: Record<string, string>;\r\n}\r\n\r\nconst ToggleBase = forwardRef<HTMLButtonElement, ToggleBaseProps>(\r\n (\r\n {\r\n checked,\r\n onChange,\r\n label,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n size = getDefaultSize(),\r\n disabled = false,\r\n classMap,\r\n className,\r\n \"data-testid\": testId = \"toggle\",\r\n },\r\n ref\r\n ) => {\r\n const handleToggle = () => {\r\n if (!disabled) onChange(!checked);\r\n };\r\n\r\n const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\r\n if ((e.key === \"Enter\" || e.key === \" \") && !disabled) {\r\n e.preventDefault();\r\n handleToggle();\r\n }\r\n };\r\n\r\n const containerClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.container,\r\n classMap[theme],\r\n classMap[state],\r\n classMap[size],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n disabled && classMap.disabled,\r\n className\r\n ),\r\n [classMap, size, disabled, shadow, rounding, theme, state]\r\n );\r\n\r\n const toggleClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.toggle,\r\n checked && classMap.active,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`]\r\n ),\r\n [classMap, checked, rounding]\r\n );\r\n\r\n const labelId = label ? `${testId}-label` : undefined;\r\n\r\n return (\r\n <div className={containerClass} data-testid={`${testId}-wrapper`}>\r\n <button\r\n ref={ref}\r\n id={`${testId}-button`}\r\n className={toggleClass}\r\n role=\"switch\"\r\n aria-checked={checked}\r\n aria-labelledby={labelId}\r\n aria-label={label ? undefined : \"Toggle switch\"}\r\n type=\"button\"\r\n disabled={disabled}\r\n onClick={handleToggle}\r\n onKeyDown={handleKeyDown}\r\n data-testid={testId}\r\n >\r\n <span className={classMap.slider} data-testid={`${testId}-slider`} />\r\n </button>\r\n\r\n {label && (\r\n <label\r\n id={labelId}\r\n htmlFor={`${testId}-button`}\r\n className={classMap.label}\r\n data-testid={`${testId}-label`}\r\n >\r\n {label}\r\n </label>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nToggleBase.displayName = \"ToggleBase\";\r\nexport default ToggleBase;\r\n","import React from \"react\";\r\nimport \"./Toggle.scss\";\r\nimport ToggleBase from \"../ToggleBase\";\r\nimport { ToggleProps } from \"../Toggle.types\";\r\n\r\nconst classes = {\r\n container: \"container\",\r\n toggle: \"toggle\",\r\n active: \"toggle_active\",\r\n slider: \"toggle_slider\",\r\n label: \"toggle_label\",\r\n\r\n primary: \"toggle_primary\",\r\n secondary: \"toggle_secondary\",\r\n tertiary: \"toggle_tertiary\",\r\n quaternary: \"toggle_quaternary\",\r\n\r\n success: \"toggle_success\",\r\n warning: \"toggle_warning\",\r\n error: \"toggle_error\",\r\n\r\n clear: \"toggle_clear\",\r\n\r\n disabled: \"toggle_disabled\",\r\n\r\n xs: \"toggle_xs\",\r\n small: \"toggle_small\",\r\n medium: \"toggle_medium\",\r\n large: \"toggle_large\",\r\n xl: \"toggle_xl\",\r\n\r\n shadowNone: \"toggle_shadow-None\",\r\n shadowLight: \"toggle_shadow-Light\",\r\n shadowMedium: \"toggle_shadow-Medium\",\r\n shadowStrong: \"toggle_shadow-Strong\",\r\n shadowIntense: \"toggle_shadow-Intense\",\r\n\r\n roundNone: \"toggle_round-None\",\r\n roundSmall: \"toggle_round-Small\",\r\n roundMedium: \"toggle_round-Medium\",\r\n roundLarge: \"toggle_round-Large\",\r\n};\r\n\r\nconst Toggle: React.FC<ToggleProps> = (props) => {\r\n return <ToggleBase {...props} classMap={classes} />;\r\n};\r\n\r\nexport default Toggle;\r\n"],"names":[],"mappings":";;;;;AAeA,MAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,
|
|
1
|
+
{"version":3,"file":"Toggle-CZftIdc3.js","sources":["../../src/components/Toggle/ToggleBase.tsx","../../src/components/Toggle/core/Toggle.tsx"],"sourcesContent":["import { forwardRef, KeyboardEvent, useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { ToggleProps } from \"./Toggle.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultSize,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nexport interface ToggleBaseProps extends ToggleProps {\r\n classMap: Record<string, string>;\r\n}\r\n\r\nconst ToggleBase = forwardRef<HTMLButtonElement, ToggleBaseProps>(\r\n (\r\n {\r\n checked,\r\n onChange,\r\n label,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n size = getDefaultSize(),\r\n disabled = false,\r\n classMap,\r\n className,\r\n \"data-testid\": testId = \"toggle\",\r\n },\r\n ref\r\n ) => {\r\n const handleToggle = () => {\r\n if (!disabled) onChange(!checked);\r\n };\r\n\r\n const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\r\n if ((e.key === \"Enter\" || e.key === \" \") && !disabled) {\r\n e.preventDefault();\r\n handleToggle();\r\n }\r\n };\r\n\r\n const containerClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.container,\r\n classMap[theme],\r\n classMap[state],\r\n classMap[size],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n disabled && classMap.disabled,\r\n className\r\n ),\r\n [classMap, size, disabled, shadow, rounding, theme, state]\r\n );\r\n\r\n const toggleClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.toggle,\r\n checked && classMap.active,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`]\r\n ),\r\n [classMap, checked, rounding]\r\n );\r\n\r\n const labelId = label ? `${testId}-label` : undefined;\r\n\r\n return (\r\n <div className={containerClass} data-testid={`${testId}-wrapper`}>\r\n <button\r\n ref={ref}\r\n id={`${testId}-button`}\r\n className={toggleClass}\r\n role=\"switch\"\r\n aria-checked={checked}\r\n aria-labelledby={labelId}\r\n aria-label={label ? undefined : \"Toggle switch\"}\r\n type=\"button\"\r\n disabled={disabled}\r\n onClick={handleToggle}\r\n onKeyDown={handleKeyDown}\r\n data-testid={testId}\r\n >\r\n <span className={classMap.slider} data-testid={`${testId}-slider`} />\r\n </button>\r\n\r\n {label && (\r\n <label\r\n id={labelId}\r\n htmlFor={`${testId}-button`}\r\n className={classMap.label}\r\n data-testid={`${testId}-label`}\r\n >\r\n {label}\r\n </label>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nToggleBase.displayName = \"ToggleBase\";\r\nexport default ToggleBase;\r\n","import React from \"react\";\r\nimport \"./Toggle.scss\";\r\nimport ToggleBase from \"../ToggleBase\";\r\nimport { ToggleProps } from \"../Toggle.types\";\r\n\r\nconst classes = {\r\n container: \"container\",\r\n toggle: \"toggle\",\r\n active: \"toggle_active\",\r\n slider: \"toggle_slider\",\r\n label: \"toggle_label\",\r\n\r\n primary: \"toggle_primary\",\r\n secondary: \"toggle_secondary\",\r\n tertiary: \"toggle_tertiary\",\r\n quaternary: \"toggle_quaternary\",\r\n\r\n success: \"toggle_success\",\r\n warning: \"toggle_warning\",\r\n error: \"toggle_error\",\r\n\r\n clear: \"toggle_clear\",\r\n\r\n disabled: \"toggle_disabled\",\r\n\r\n xs: \"toggle_xs\",\r\n small: \"toggle_small\",\r\n medium: \"toggle_medium\",\r\n large: \"toggle_large\",\r\n xl: \"toggle_xl\",\r\n\r\n shadowNone: \"toggle_shadow-None\",\r\n shadowLight: \"toggle_shadow-Light\",\r\n shadowMedium: \"toggle_shadow-Medium\",\r\n shadowStrong: \"toggle_shadow-Strong\",\r\n shadowIntense: \"toggle_shadow-Intense\",\r\n\r\n roundNone: \"toggle_round-None\",\r\n roundSmall: \"toggle_round-Small\",\r\n roundMedium: \"toggle_round-Medium\",\r\n roundLarge: \"toggle_round-Large\",\r\n};\r\n\r\nconst Toggle: React.FC<ToggleProps> = (props) => {\r\n return <ToggleBase {...props} classMap={classes} />;\r\n};\r\n\r\nexport default Toggle;\r\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle-v31rt4Ya.cjs","sources":["../../src/components/Toggle/ToggleBase.tsx","../../src/components/Toggle/core/Toggle.tsx"],"sourcesContent":["import { forwardRef, KeyboardEvent, useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { ToggleProps } from \"./Toggle.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultSize,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nexport interface ToggleBaseProps extends ToggleProps {\r\n classMap: Record<string, string>;\r\n}\r\n\r\nconst ToggleBase = forwardRef<HTMLButtonElement, ToggleBaseProps>(\r\n (\r\n {\r\n checked,\r\n onChange,\r\n label,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n size = getDefaultSize(),\r\n disabled = false,\r\n classMap,\r\n className,\r\n \"data-testid\": testId = \"toggle\",\r\n },\r\n ref\r\n ) => {\r\n const handleToggle = () => {\r\n if (!disabled) onChange(!checked);\r\n };\r\n\r\n const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\r\n if ((e.key === \"Enter\" || e.key === \" \") && !disabled) {\r\n e.preventDefault();\r\n handleToggle();\r\n }\r\n };\r\n\r\n const containerClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.container,\r\n classMap[theme],\r\n classMap[state],\r\n classMap[size],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n disabled && classMap.disabled,\r\n className\r\n ),\r\n [classMap, size, disabled, shadow, rounding, theme, state]\r\n );\r\n\r\n const toggleClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.toggle,\r\n checked && classMap.active,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`]\r\n ),\r\n [classMap, checked, rounding]\r\n );\r\n\r\n const labelId = label ? `${testId}-label` : undefined;\r\n\r\n return (\r\n <div className={containerClass} data-testid={`${testId}-wrapper`}>\r\n <button\r\n ref={ref}\r\n id={`${testId}-button`}\r\n className={toggleClass}\r\n role=\"switch\"\r\n aria-checked={checked}\r\n aria-labelledby={labelId}\r\n aria-label={label ? undefined : \"Toggle switch\"}\r\n type=\"button\"\r\n disabled={disabled}\r\n onClick={handleToggle}\r\n onKeyDown={handleKeyDown}\r\n data-testid={testId}\r\n >\r\n <span className={classMap.slider} data-testid={`${testId}-slider`} />\r\n </button>\r\n\r\n {label && (\r\n <label\r\n id={labelId}\r\n htmlFor={`${testId}-button`}\r\n className={classMap.label}\r\n data-testid={`${testId}-label`}\r\n >\r\n {label}\r\n </label>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nToggleBase.displayName = \"ToggleBase\";\r\nexport default ToggleBase;\r\n","import React from \"react\";\r\nimport \"./Toggle.scss\";\r\nimport ToggleBase from \"../ToggleBase\";\r\nimport { ToggleProps } from \"../Toggle.types\";\r\n\r\nconst classes = {\r\n container: \"container\",\r\n toggle: \"toggle\",\r\n active: \"toggle_active\",\r\n slider: \"toggle_slider\",\r\n label: \"toggle_label\",\r\n\r\n primary: \"toggle_primary\",\r\n secondary: \"toggle_secondary\",\r\n tertiary: \"toggle_tertiary\",\r\n quaternary: \"toggle_quaternary\",\r\n\r\n success: \"toggle_success\",\r\n warning: \"toggle_warning\",\r\n error: \"toggle_error\",\r\n\r\n clear: \"toggle_clear\",\r\n\r\n disabled: \"toggle_disabled\",\r\n\r\n xs: \"toggle_xs\",\r\n small: \"toggle_small\",\r\n medium: \"toggle_medium\",\r\n large: \"toggle_large\",\r\n xl: \"toggle_xl\",\r\n\r\n shadowNone: \"toggle_shadow-None\",\r\n shadowLight: \"toggle_shadow-Light\",\r\n shadowMedium: \"toggle_shadow-Medium\",\r\n shadowStrong: \"toggle_shadow-Strong\",\r\n shadowIntense: \"toggle_shadow-Intense\",\r\n\r\n roundNone: \"toggle_round-None\",\r\n roundSmall: \"toggle_round-Small\",\r\n roundMedium: \"toggle_round-Medium\",\r\n roundLarge: \"toggle_round-Large\",\r\n};\r\n\r\nconst Toggle: React.FC<ToggleProps> = (props) => {\r\n return <ToggleBase {...props} classMap={classes} />;\r\n};\r\n\r\nexport default Toggle;\r\n"],"names":["forwardRef","getDefaultTheme","getDefaultRounding","getDefaultShadow","getDefaultSize","useMemo","combineClassNames","capitalize","jsx"],"mappings":";;;;;;AAeA,MAAM,aAAaA,
|
|
1
|
+
{"version":3,"file":"Toggle-v31rt4Ya.cjs","sources":["../../src/components/Toggle/ToggleBase.tsx","../../src/components/Toggle/core/Toggle.tsx"],"sourcesContent":["import { forwardRef, KeyboardEvent, useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { ToggleProps } from \"./Toggle.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultSize,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nexport interface ToggleBaseProps extends ToggleProps {\r\n classMap: Record<string, string>;\r\n}\r\n\r\nconst ToggleBase = forwardRef<HTMLButtonElement, ToggleBaseProps>(\r\n (\r\n {\r\n checked,\r\n onChange,\r\n label,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n size = getDefaultSize(),\r\n disabled = false,\r\n classMap,\r\n className,\r\n \"data-testid\": testId = \"toggle\",\r\n },\r\n ref\r\n ) => {\r\n const handleToggle = () => {\r\n if (!disabled) onChange(!checked);\r\n };\r\n\r\n const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\r\n if ((e.key === \"Enter\" || e.key === \" \") && !disabled) {\r\n e.preventDefault();\r\n handleToggle();\r\n }\r\n };\r\n\r\n const containerClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.container,\r\n classMap[theme],\r\n classMap[state],\r\n classMap[size],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n disabled && classMap.disabled,\r\n className\r\n ),\r\n [classMap, size, disabled, shadow, rounding, theme, state]\r\n );\r\n\r\n const toggleClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.toggle,\r\n checked && classMap.active,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`]\r\n ),\r\n [classMap, checked, rounding]\r\n );\r\n\r\n const labelId = label ? `${testId}-label` : undefined;\r\n\r\n return (\r\n <div className={containerClass} data-testid={`${testId}-wrapper`}>\r\n <button\r\n ref={ref}\r\n id={`${testId}-button`}\r\n className={toggleClass}\r\n role=\"switch\"\r\n aria-checked={checked}\r\n aria-labelledby={labelId}\r\n aria-label={label ? undefined : \"Toggle switch\"}\r\n type=\"button\"\r\n disabled={disabled}\r\n onClick={handleToggle}\r\n onKeyDown={handleKeyDown}\r\n data-testid={testId}\r\n >\r\n <span className={classMap.slider} data-testid={`${testId}-slider`} />\r\n </button>\r\n\r\n {label && (\r\n <label\r\n id={labelId}\r\n htmlFor={`${testId}-button`}\r\n className={classMap.label}\r\n data-testid={`${testId}-label`}\r\n >\r\n {label}\r\n </label>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nToggleBase.displayName = \"ToggleBase\";\r\nexport default ToggleBase;\r\n","import React from \"react\";\r\nimport \"./Toggle.scss\";\r\nimport ToggleBase from \"../ToggleBase\";\r\nimport { ToggleProps } from \"../Toggle.types\";\r\n\r\nconst classes = {\r\n container: \"container\",\r\n toggle: \"toggle\",\r\n active: \"toggle_active\",\r\n slider: \"toggle_slider\",\r\n label: \"toggle_label\",\r\n\r\n primary: \"toggle_primary\",\r\n secondary: \"toggle_secondary\",\r\n tertiary: \"toggle_tertiary\",\r\n quaternary: \"toggle_quaternary\",\r\n\r\n success: \"toggle_success\",\r\n warning: \"toggle_warning\",\r\n error: \"toggle_error\",\r\n\r\n clear: \"toggle_clear\",\r\n\r\n disabled: \"toggle_disabled\",\r\n\r\n xs: \"toggle_xs\",\r\n small: \"toggle_small\",\r\n medium: \"toggle_medium\",\r\n large: \"toggle_large\",\r\n xl: \"toggle_xl\",\r\n\r\n shadowNone: \"toggle_shadow-None\",\r\n shadowLight: \"toggle_shadow-Light\",\r\n shadowMedium: \"toggle_shadow-Medium\",\r\n shadowStrong: \"toggle_shadow-Strong\",\r\n shadowIntense: \"toggle_shadow-Intense\",\r\n\r\n roundNone: \"toggle_round-None\",\r\n roundSmall: \"toggle_round-Small\",\r\n roundMedium: \"toggle_round-Medium\",\r\n roundLarge: \"toggle_round-Large\",\r\n};\r\n\r\nconst Toggle: React.FC<ToggleProps> = (props) => {\r\n return <ToggleBase {...props} classMap={classes} />;\r\n};\r\n\r\nexport default Toggle;\r\n"],"names":["forwardRef","getDefaultTheme","getDefaultRounding","getDefaultShadow","getDefaultSize","useMemo","combineClassNames","capitalize","jsx"],"mappings":"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"}
|