silver-ui 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/dist/{chunk-GYUWDJXS.cjs → chunk-25FU5AVR.cjs} +5 -5
- package/dist/{chunk-GYUWDJXS.cjs.map → chunk-25FU5AVR.cjs.map} +1 -1
- package/dist/{chunk-3SLWOIT4.cjs → chunk-276LEL3G.cjs} +15 -6
- package/dist/chunk-276LEL3G.cjs.map +1 -0
- package/dist/{chunk-Z7ID5TC7.cjs → chunk-2D6SGEPH.cjs} +4 -4
- package/dist/{chunk-Z7ID5TC7.cjs.map → chunk-2D6SGEPH.cjs.map} +1 -1
- package/dist/{chunk-DH2ZFYKE.cjs → chunk-2TGDDZG6.cjs} +6 -6
- package/dist/{chunk-DH2ZFYKE.cjs.map → chunk-2TGDDZG6.cjs.map} +1 -1
- package/dist/{chunk-MEBIRX2P.js → chunk-2YC7SMVF.js} +4 -4
- package/dist/{chunk-MEBIRX2P.js.map → chunk-2YC7SMVF.js.map} +1 -1
- package/dist/{chunk-NF63IRZR.cjs → chunk-32G54PL3.cjs} +4 -4
- package/dist/{chunk-NF63IRZR.cjs.map → chunk-32G54PL3.cjs.map} +1 -1
- package/dist/{chunk-CBJ4APCT.js → chunk-3DW2N6UN.js} +4 -3
- package/dist/chunk-3DW2N6UN.js.map +1 -0
- package/dist/{chunk-MMQIQILP.cjs → chunk-3PDUOYAT.cjs} +17 -17
- package/dist/{chunk-MMQIQILP.cjs.map → chunk-3PDUOYAT.cjs.map} +1 -1
- package/dist/{chunk-UYKFE7KF.js → chunk-4CVDLMD6.js} +15 -6
- package/dist/chunk-4CVDLMD6.js.map +1 -0
- package/dist/{chunk-ABEOBHAM.cjs → chunk-4T62TLOD.cjs} +4 -4
- package/dist/{chunk-ABEOBHAM.cjs.map → chunk-4T62TLOD.cjs.map} +1 -1
- package/dist/{chunk-OBBPRWYD.js → chunk-4Z62KDKI.js} +5 -5
- package/dist/{chunk-OBBPRWYD.js.map → chunk-4Z62KDKI.js.map} +1 -1
- package/dist/{chunk-SXIBQQ55.js → chunk-5BLNJVIA.js} +3 -3
- package/dist/{chunk-SXIBQQ55.js.map → chunk-5BLNJVIA.js.map} +1 -1
- package/dist/{chunk-AXCE2HKG.js → chunk-5Q5TJUHI.js} +3 -3
- package/dist/{chunk-AXCE2HKG.js.map → chunk-5Q5TJUHI.js.map} +1 -1
- package/dist/{chunk-ESJND7B6.js → chunk-67VLK263.js} +5 -5
- package/dist/{chunk-ESJND7B6.js.map → chunk-67VLK263.js.map} +1 -1
- package/dist/{chunk-FDSUILCM.cjs → chunk-6ADWXOZ2.cjs} +2 -3
- package/dist/chunk-6ADWXOZ2.cjs.map +1 -0
- package/dist/{chunk-7DWASA3K.js → chunk-6XESVFC3.js} +3 -3
- package/dist/{chunk-7DWASA3K.js.map → chunk-6XESVFC3.js.map} +1 -1
- package/dist/{chunk-QADMIAYK.js → chunk-7FY26X2V.js} +3 -3
- package/dist/{chunk-QADMIAYK.js.map → chunk-7FY26X2V.js.map} +1 -1
- package/dist/{chunk-VBL5SI5N.js → chunk-AADUJ6CN.js} +4 -4
- package/dist/{chunk-VBL5SI5N.js.map → chunk-AADUJ6CN.js.map} +1 -1
- package/dist/{chunk-U5ZCQI5O.cjs → chunk-ACQMLJ4I.cjs} +29 -29
- package/dist/chunk-ACQMLJ4I.cjs.map +1 -0
- package/dist/{chunk-SA3LUT6E.js → chunk-AGJ5SZCM.js} +4 -4
- package/dist/{chunk-SA3LUT6E.js.map → chunk-AGJ5SZCM.js.map} +1 -1
- package/dist/{chunk-3JVD4AXC.js → chunk-AH4AMQEO.js} +3 -3
- package/dist/{chunk-3JVD4AXC.js.map → chunk-AH4AMQEO.js.map} +1 -1
- package/dist/{chunk-47FUQCAT.cjs → chunk-ATDW2VII.cjs} +38 -38
- package/dist/{chunk-47FUQCAT.cjs.map → chunk-ATDW2VII.cjs.map} +1 -1
- package/dist/{chunk-ZP3UZDSV.cjs → chunk-AXT4VA5N.cjs} +6 -6
- package/dist/{chunk-ZP3UZDSV.cjs.map → chunk-AXT4VA5N.cjs.map} +1 -1
- package/dist/{chunk-DZ3NHSJ4.js → chunk-BERQEJYB.js} +3 -3
- package/dist/{chunk-DZ3NHSJ4.js.map → chunk-BERQEJYB.js.map} +1 -1
- package/dist/{chunk-MX2F3HUI.cjs → chunk-BFWKL5MJ.cjs} +7 -7
- package/dist/{chunk-MX2F3HUI.cjs.map → chunk-BFWKL5MJ.cjs.map} +1 -1
- package/dist/{chunk-3IDEWEDY.cjs → chunk-BJD32VBQ.cjs} +4 -4
- package/dist/{chunk-3IDEWEDY.cjs.map → chunk-BJD32VBQ.cjs.map} +1 -1
- package/dist/{chunk-BZ4XKKNH.js → chunk-BYBVI7UN.js} +5 -5
- package/dist/{chunk-BZ4XKKNH.js.map → chunk-BYBVI7UN.js.map} +1 -1
- package/dist/{chunk-TZQWZ7IL.cjs → chunk-C264Z2GQ.cjs} +6 -6
- package/dist/{chunk-TZQWZ7IL.cjs.map → chunk-C264Z2GQ.cjs.map} +1 -1
- package/dist/{chunk-PWL6TWVC.cjs → chunk-CFOGSQCG.cjs} +4 -4
- package/dist/{chunk-PWL6TWVC.cjs.map → chunk-CFOGSQCG.cjs.map} +1 -1
- package/dist/{chunk-YUONTRNC.js → chunk-CZNN2GOC.js} +5 -5
- package/dist/{chunk-YUONTRNC.js.map → chunk-CZNN2GOC.js.map} +1 -1
- package/dist/{chunk-HMWV6KCW.cjs → chunk-DSNJDFO3.cjs} +4 -4
- package/dist/{chunk-HMWV6KCW.cjs.map → chunk-DSNJDFO3.cjs.map} +1 -1
- package/dist/{chunk-FHKB6MBQ.js → chunk-E4KM3RQ2.js} +11 -11
- package/dist/{chunk-FHKB6MBQ.js.map → chunk-E4KM3RQ2.js.map} +1 -1
- package/dist/{chunk-AKTUU5ML.js → chunk-EUN5TCB2.js} +6 -6
- package/dist/{chunk-AKTUU5ML.js.map → chunk-EUN5TCB2.js.map} +1 -1
- package/dist/{chunk-V7Q64Z3S.cjs → chunk-FQSOUCZS.cjs} +8 -8
- package/dist/{chunk-V7Q64Z3S.cjs.map → chunk-FQSOUCZS.cjs.map} +1 -1
- package/dist/{chunk-PTZAJW3J.js → chunk-GI5MVVIX.js} +3 -3
- package/dist/{chunk-PTZAJW3J.js.map → chunk-GI5MVVIX.js.map} +1 -1
- package/dist/{chunk-63RKQ237.js → chunk-H2SGYAUO.js} +4 -4
- package/dist/{chunk-63RKQ237.js.map → chunk-H2SGYAUO.js.map} +1 -1
- package/dist/{chunk-RRNT32KY.js → chunk-HLN3JQYD.js} +3 -3
- package/dist/chunk-HLN3JQYD.js.map +1 -0
- package/dist/{chunk-3DZPRXMC.cjs → chunk-I2X2Z7FA.cjs} +3 -3
- package/dist/chunk-I2X2Z7FA.cjs.map +1 -0
- package/dist/{chunk-ZJ2NV4SQ.js → chunk-IG4UJZ6B.js} +15 -15
- package/dist/chunk-IG4UJZ6B.js.map +1 -0
- package/dist/{chunk-STSR3FAC.js → chunk-ISYUZ5FS.js} +3 -3
- package/dist/{chunk-STSR3FAC.js.map → chunk-ISYUZ5FS.js.map} +1 -1
- package/dist/{chunk-VQ7IRFRR.cjs → chunk-ITDQSF2O.cjs} +9 -9
- package/dist/{chunk-VQ7IRFRR.cjs.map → chunk-ITDQSF2O.cjs.map} +1 -1
- package/dist/{chunk-36QGPGT2.cjs → chunk-JAHKLROD.cjs} +4 -4
- package/dist/{chunk-36QGPGT2.cjs.map → chunk-JAHKLROD.cjs.map} +1 -1
- package/dist/{chunk-7MB2KK6X.js → chunk-KIGRE6NA.js} +4 -4
- package/dist/{chunk-7MB2KK6X.js.map → chunk-KIGRE6NA.js.map} +1 -1
- package/dist/{chunk-U4GWNENK.js → chunk-M4JUQCKP.js} +3 -3
- package/dist/chunk-M4JUQCKP.js.map +1 -0
- package/dist/{chunk-74ONIT6C.js → chunk-MACIT6C6.js} +3 -3
- package/dist/{chunk-74ONIT6C.js.map → chunk-MACIT6C6.js.map} +1 -1
- package/dist/{chunk-BDBHHJGN.cjs → chunk-MAL4D4LR.cjs} +4 -4
- package/dist/{chunk-BDBHHJGN.cjs.map → chunk-MAL4D4LR.cjs.map} +1 -1
- package/dist/{chunk-DP4KK2N4.cjs → chunk-MQQ4GSUG.cjs} +12 -8
- package/dist/chunk-MQQ4GSUG.cjs.map +1 -0
- package/dist/{chunk-4YQTSHIB.cjs → chunk-OJKZS6HG.cjs} +5 -5
- package/dist/{chunk-4YQTSHIB.cjs.map → chunk-OJKZS6HG.cjs.map} +1 -1
- package/dist/chunk-OMHOVHPX.js +78 -0
- package/dist/chunk-OMHOVHPX.js.map +1 -0
- package/dist/{chunk-TH3H5UGK.cjs → chunk-PLXUM7U6.cjs} +10 -10
- package/dist/{chunk-TH3H5UGK.cjs.map → chunk-PLXUM7U6.cjs.map} +1 -1
- package/dist/{chunk-2VIJC4NW.cjs → chunk-PTJ5YZFY.cjs} +6 -6
- package/dist/{chunk-2VIJC4NW.cjs.map → chunk-PTJ5YZFY.cjs.map} +1 -1
- package/dist/{chunk-POW2Z7TP.js → chunk-PXIWITSS.js} +3 -3
- package/dist/{chunk-POW2Z7TP.js.map → chunk-PXIWITSS.js.map} +1 -1
- package/dist/{chunk-2K44WLBJ.js → chunk-PXTE3XRD.js} +4 -4
- package/dist/{chunk-2K44WLBJ.js.map → chunk-PXTE3XRD.js.map} +1 -1
- package/dist/{chunk-IR4COTIR.js → chunk-RKMW3ZOK.js} +3 -3
- package/dist/{chunk-IR4COTIR.js.map → chunk-RKMW3ZOK.js.map} +1 -1
- package/dist/{chunk-UQV5MOGR.js → chunk-SEAVOF6B.js} +3 -3
- package/dist/{chunk-UQV5MOGR.js.map → chunk-SEAVOF6B.js.map} +1 -1
- package/dist/{chunk-RSG7N5QQ.cjs → chunk-SFT5LCQP.cjs} +6 -6
- package/dist/{chunk-RSG7N5QQ.cjs.map → chunk-SFT5LCQP.cjs.map} +1 -1
- package/dist/{chunk-AJYVGSBW.cjs → chunk-TRK2ZZFB.cjs} +2 -3
- package/dist/chunk-TRK2ZZFB.cjs.map +1 -0
- package/dist/{chunk-2RIDPITG.cjs → chunk-UMGW7WJI.cjs} +5 -5
- package/dist/{chunk-2RIDPITG.cjs.map → chunk-UMGW7WJI.cjs.map} +1 -1
- package/dist/{chunk-GGZGVAEF.cjs → chunk-UR7RYJOU.cjs} +9 -9
- package/dist/{chunk-GGZGVAEF.cjs.map → chunk-UR7RYJOU.cjs.map} +1 -1
- package/dist/{chunk-JMLJLDHO.cjs → chunk-UYXQBM2B.cjs} +6 -6
- package/dist/{chunk-JMLJLDHO.cjs.map → chunk-UYXQBM2B.cjs.map} +1 -1
- package/dist/{chunk-6NY5DOFM.js → chunk-VSEKSDTK.js} +3 -3
- package/dist/{chunk-6NY5DOFM.js.map → chunk-VSEKSDTK.js.map} +1 -1
- package/dist/{chunk-WE2AXMPB.js → chunk-VYFMYXU4.js} +4 -4
- package/dist/{chunk-WE2AXMPB.js.map → chunk-VYFMYXU4.js.map} +1 -1
- package/dist/{chunk-QPYPPJEZ.js → chunk-WATCCAQU.js} +3 -3
- package/dist/chunk-WATCCAQU.js.map +1 -0
- package/dist/{chunk-UC36KIEP.cjs → chunk-WGCGHFXE.cjs} +2 -3
- package/dist/chunk-WGCGHFXE.cjs.map +1 -0
- package/dist/chunk-WNGBWUWZ.cjs +80 -0
- package/dist/chunk-WNGBWUWZ.cjs.map +1 -0
- package/dist/{chunk-JEK5SVB5.cjs → chunk-WWB4NSEY.cjs} +6 -6
- package/dist/{chunk-JEK5SVB5.cjs.map → chunk-WWB4NSEY.cjs.map} +1 -1
- package/dist/{chunk-O2ZMOBMA.cjs → chunk-X5ZQRMEM.cjs} +11 -11
- package/dist/{chunk-O2ZMOBMA.cjs.map → chunk-X5ZQRMEM.cjs.map} +1 -1
- package/dist/{chunk-463O56TB.js → chunk-XM3AZXOA.js} +4 -4
- package/dist/{chunk-463O56TB.js.map → chunk-XM3AZXOA.js.map} +1 -1
- package/dist/{chunk-CPZWTWYQ.js → chunk-XQU4ECJY.js} +9 -5
- package/dist/chunk-XQU4ECJY.js.map +1 -0
- package/dist/{chunk-XHTKGOQV.cjs → chunk-Y5SXQR52.cjs} +7 -7
- package/dist/{chunk-XHTKGOQV.cjs.map → chunk-Y5SXQR52.cjs.map} +1 -1
- package/dist/{chunk-O3T7Z6RH.cjs → chunk-YBPG5RPR.cjs} +3 -3
- package/dist/chunk-YBPG5RPR.cjs.map +1 -0
- package/dist/{chunk-EBCHOGKT.js → chunk-YGYA4BYN.js} +3 -3
- package/dist/{chunk-EBCHOGKT.js.map → chunk-YGYA4BYN.js.map} +1 -1
- package/dist/{chunk-BTL6GUMN.js → chunk-YJJOKZN2.js} +3 -3
- package/dist/{chunk-BTL6GUMN.js.map → chunk-YJJOKZN2.js.map} +1 -1
- package/dist/{chunk-WVQDFCFQ.js → chunk-ZH3GKYUZ.js} +3 -3
- package/dist/chunk-ZH3GKYUZ.js.map +1 -0
- package/dist/{chunk-3DFRJSNE.cjs → chunk-ZNPTARIS.cjs} +6 -6
- package/dist/{chunk-3DFRJSNE.cjs.map → chunk-ZNPTARIS.cjs.map} +1 -1
- package/dist/{chunk-OJ3KVNW2.js → chunk-ZNZ67KFM.js} +3 -3
- package/dist/{chunk-OJ3KVNW2.js.map → chunk-ZNZ67KFM.js.map} +1 -1
- package/dist/{chunk-UUIAGGFW.cjs → chunk-ZTQQ2O6O.cjs} +4 -4
- package/dist/{chunk-UUIAGGFW.cjs.map → chunk-ZTQQ2O6O.cjs.map} +1 -1
- package/dist/{chunk-MNVBSOAQ.cjs → chunk-ZXPKFGRB.cjs} +6 -6
- package/dist/{chunk-MNVBSOAQ.cjs.map → chunk-ZXPKFGRB.cjs.map} +1 -1
- package/dist/components/Alert/index.cjs +3 -3
- package/dist/components/Alert/index.js +2 -2
- package/dist/components/AlertDialog/index.cjs +5 -5
- package/dist/components/AlertDialog/index.js +3 -3
- package/dist/components/AppShell/index.cjs +9 -9
- package/dist/components/AppShell/index.js +6 -6
- package/dist/components/AutocompleteInput/index.cjs +7 -7
- package/dist/components/AutocompleteInput/index.js +3 -3
- package/dist/components/Blockquote/index.cjs +2 -6
- package/dist/components/Blockquote/index.d.ts +0 -1
- package/dist/components/Blockquote/index.d.ts.map +1 -1
- package/dist/components/Blockquote/index.js +1 -1
- package/dist/components/Button/index.cjs +2 -2
- package/dist/components/Button/index.js +1 -1
- package/dist/components/ButtonGroup/ButtonGroup.recipe.d.ts +4 -4
- package/dist/components/ButtonGroup/ButtonGroup.recipe.d.ts.map +1 -1
- package/dist/components/ButtonGroup/index.cjs +2 -2
- package/dist/components/ButtonGroup/index.js +1 -1
- package/dist/components/Calendar/index.cjs +3 -3
- package/dist/components/Calendar/index.js +2 -2
- package/dist/components/CodeBlock/index.cjs +3 -3
- package/dist/components/CodeBlock/index.d.ts +0 -1
- package/dist/components/CodeBlock/index.d.ts.map +1 -1
- package/dist/components/CodeBlock/index.js +2 -2
- package/dist/components/ContextMenu/index.cjs +6 -6
- package/dist/components/ContextMenu/index.js +4 -4
- package/dist/components/DateInput/index.cjs +5 -5
- package/dist/components/DateInput/index.js +4 -4
- package/dist/components/DateRangeInput/index.cjs +5 -5
- package/dist/components/DateRangeInput/index.js +4 -4
- package/dist/components/DateTimeInput/index.cjs +7 -7
- package/dist/components/DateTimeInput/index.js +6 -6
- package/dist/components/DropdownMenu/index.cjs +7 -7
- package/dist/components/DropdownMenu/index.js +3 -3
- package/dist/components/FileInput/index.cjs +3 -3
- package/dist/components/FileInput/index.js +2 -2
- package/dist/components/Kbd/index.d.ts +0 -1
- package/dist/components/Kbd/index.d.ts.map +1 -1
- package/dist/components/Layout/index.cjs +7 -7
- package/dist/components/Layout/index.js +2 -2
- package/dist/components/Lightbox/index.cjs +4 -4
- package/dist/components/Lightbox/index.js +2 -2
- package/dist/components/MultiSelect/index.cjs +4 -4
- package/dist/components/MultiSelect/index.js +3 -3
- package/dist/components/NumberInput/index.cjs +3 -3
- package/dist/components/NumberInput/index.js +2 -2
- package/dist/components/Pagination/index.cjs +3 -3
- package/dist/components/Pagination/index.js +2 -2
- package/dist/components/PasswordInput/index.cjs +4 -4
- package/dist/components/PasswordInput/index.js +3 -3
- package/dist/components/Popover/index.cjs +4 -4
- package/dist/components/Popover/index.js +2 -2
- package/dist/components/RadioGroup/index.d.ts +0 -1
- package/dist/components/RadioGroup/index.d.ts.map +1 -1
- package/dist/components/Rating/index.cjs +2 -6
- package/dist/components/Rating/index.d.ts +0 -1
- package/dist/components/Rating/index.d.ts.map +1 -1
- package/dist/components/Rating/index.js +1 -1
- package/dist/components/Schedule/index.cjs +16 -16
- package/dist/components/Schedule/index.js +5 -5
- package/dist/components/SearchFilterInput/index.cjs +19 -19
- package/dist/components/SearchFilterInput/index.js +11 -11
- package/dist/components/Select/index.cjs +5 -5
- package/dist/components/Select/index.js +3 -3
- package/dist/components/SideNav/SideNavItem.d.ts.map +1 -1
- package/dist/components/SideNav/index.cjs +9 -9
- package/dist/components/SideNav/index.js +3 -3
- package/dist/components/Skeleton/index.cjs +2 -6
- package/dist/components/Skeleton/index.d.ts +0 -1
- package/dist/components/Skeleton/index.d.ts.map +1 -1
- package/dist/components/Skeleton/index.js +1 -1
- package/dist/components/Slider/Slider.d.ts.map +1 -1
- package/dist/components/Slider/index.cjs +2 -6
- package/dist/components/Slider/index.d.ts +0 -1
- package/dist/components/Slider/index.d.ts.map +1 -1
- package/dist/components/Slider/index.js +1 -1
- package/dist/components/SplitButton/SplitButton.d.ts +89 -0
- package/dist/components/SplitButton/SplitButton.d.ts.map +1 -0
- package/dist/components/SplitButton/index.cjs +34 -0
- package/dist/components/SplitButton/index.cjs.map +1 -0
- package/dist/components/SplitButton/index.d.ts +2 -0
- package/dist/components/SplitButton/index.d.ts.map +1 -0
- package/dist/components/SplitButton/index.js +25 -0
- package/dist/components/SplitButton/index.js.map +1 -0
- package/dist/components/Table/index.cjs +41 -41
- package/dist/components/Table/index.js +13 -13
- package/dist/components/Table/plugins/pagination/useTablePagination.d.ts.map +1 -1
- package/dist/components/Tabs/index.cjs +8 -8
- package/dist/components/Tabs/index.js +3 -3
- package/dist/components/TagsInput/index.cjs +5 -5
- package/dist/components/TagsInput/index.js +4 -4
- package/dist/components/TextInput/index.cjs +3 -3
- package/dist/components/TextInput/index.js +2 -2
- package/dist/components/Thumbnail/index.cjs +4 -4
- package/dist/components/Thumbnail/index.d.ts +0 -1
- package/dist/components/Thumbnail/index.d.ts.map +1 -1
- package/dist/components/Thumbnail/index.js +3 -3
- package/dist/components/TimeInput/index.cjs +3 -3
- package/dist/components/TimeInput/index.js +2 -2
- package/dist/components/Toast/index.cjs +5 -5
- package/dist/components/Toast/index.js +2 -2
- package/dist/components/TopNav/index.cjs +9 -9
- package/dist/components/TopNav/index.js +3 -3
- package/dist/index.cjs +164 -163
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +40 -39
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/dist/chunk-3DZPRXMC.cjs.map +0 -1
- package/dist/chunk-3SLWOIT4.cjs.map +0 -1
- package/dist/chunk-AJYVGSBW.cjs.map +0 -1
- package/dist/chunk-CBJ4APCT.js.map +0 -1
- package/dist/chunk-CPZWTWYQ.js.map +0 -1
- package/dist/chunk-DP4KK2N4.cjs.map +0 -1
- package/dist/chunk-FDSUILCM.cjs.map +0 -1
- package/dist/chunk-O3T7Z6RH.cjs.map +0 -1
- package/dist/chunk-QPYPPJEZ.js.map +0 -1
- package/dist/chunk-RRNT32KY.js.map +0 -1
- package/dist/chunk-U4GWNENK.js.map +0 -1
- package/dist/chunk-U5ZCQI5O.cjs.map +0 -1
- package/dist/chunk-UC36KIEP.cjs.map +0 -1
- package/dist/chunk-UYKFE7KF.js.map +0 -1
- package/dist/chunk-WVQDFCFQ.js.map +0 -1
- package/dist/chunk-ZJ2NV4SQ.js.map +0 -1
package/README.md
CHANGED
|
@@ -128,6 +128,7 @@ mode details, scoped theming examples, and per-instance overrides.
|
|
|
128
128
|
- **ContextMenu** — right-click context menu
|
|
129
129
|
- **DropdownMenu** — button-triggered dropdown menu
|
|
130
130
|
- **SegmentedControl** — mutually exclusive option selector
|
|
131
|
+
- **SplitButton** — primary action paired with a dropdown menu of related actions
|
|
131
132
|
- **ToggleButton** — button with pressed/unpressed state
|
|
132
133
|
|
|
133
134
|
### Data Display
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkYBPG5RPR_cjs = require('./chunk-YBPG5RPR.cjs');
|
|
4
4
|
var chunkJMNH45Q3_cjs = require('./chunk-JMNH45Q3.cjs');
|
|
5
5
|
var chunk5QPM5LUS_cjs = require('./chunk-5QPM5LUS.cjs');
|
|
6
6
|
var chunk4TIAKZ4Q_cjs = require('./chunk-4TIAKZ4Q.cjs');
|
|
@@ -233,7 +233,7 @@ function Alert({
|
|
|
233
233
|
showEndArea ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.endArea, children: [
|
|
234
234
|
endContent,
|
|
235
235
|
hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
236
|
-
|
|
236
|
+
chunkYBPG5RPR_cjs.Button,
|
|
237
237
|
{
|
|
238
238
|
"aria-controls": bodyId,
|
|
239
239
|
"aria-expanded": isExpanded,
|
|
@@ -247,7 +247,7 @@ function Alert({
|
|
|
247
247
|
}
|
|
248
248
|
) : null,
|
|
249
249
|
isDismissable ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
250
|
-
|
|
250
|
+
chunkYBPG5RPR_cjs.Button,
|
|
251
251
|
{
|
|
252
252
|
icon: lucideReact.X,
|
|
253
253
|
isIconOnly: true,
|
|
@@ -278,5 +278,5 @@ function Alert({
|
|
|
278
278
|
Alert.displayName = "Alert";
|
|
279
279
|
|
|
280
280
|
exports.Alert = Alert;
|
|
281
|
-
//# sourceMappingURL=chunk-
|
|
282
|
-
//# sourceMappingURL=chunk-
|
|
281
|
+
//# sourceMappingURL=chunk-25FU5AVR.cjs.map
|
|
282
|
+
//# sourceMappingURL=chunk-25FU5AVR.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Alert/Alert.recipe.ts","../src/components/Alert/Alert.tsx"],"names":["sva","jsx","Icon","XCircle","Info","CheckCircle2","TriangleAlert","useId","useState","jsxs","cx","Text","Button","ChevronDown","X"],"mappings":"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","file":"chunk-GYUWDJXS.cjs","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\n/**\n * Symmetric padding overrides for the collapsible body. Keys mirror the\n * `SpacingToken` scale so the `padding` prop maps onto build-time-validated\n * spacing tokens instead of a runtime token lookup.\n */\nconst paddingVariants = {\n 0: {bodyContent: {px: '0', py: '0'}},\n 0.5: {bodyContent: {px: '0.5', py: '0.5'}},\n 1: {bodyContent: {px: '1', py: '1'}},\n 1.5: {bodyContent: {px: '1.5', py: '1.5'}},\n 2: {bodyContent: {px: '2', py: '2'}},\n 3: {bodyContent: {px: '3', py: '3'}},\n 4: {bodyContent: {px: '4', py: '4'}},\n 5: {bodyContent: {px: '5', py: '5'}},\n 6: {bodyContent: {px: '6', py: '6'}},\n 8: {bodyContent: {px: '8', py: '8'}},\n 10: {bodyContent: {px: '10', py: '10'}},\n};\n\nexport const alertRecipe = sva({\n slots: [\n 'root',\n 'header',\n 'icon',\n 'content',\n 'endArea',\n 'chevron',\n 'body',\n 'bodyContent',\n ],\n base: {\n root: {\n display: 'flex',\n flexDirection: 'column',\n fontFamily: 'body',\n },\n header: {\n display: 'flex',\n alignItems: 'flex-start',\n gap: '2',\n px: '4',\n py: '3',\n },\n icon: {\n display: 'inline-flex',\n alignItems: 'center',\n flexShrink: 0,\n },\n content: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n minW: 0,\n },\n endArea: {\n display: 'flex',\n alignItems: 'center',\n flexShrink: 0,\n gap: '2',\n ms: 'auto',\n },\n // The body stays mounted so child state and the `aria-controls` target are\n // preserved; it is collapsed with a `grid-template-rows` 1fr -> 0fr\n // transition (mirroring `AccordionItem`). `overflow: hidden` lives on this\n // grid so the body chrome on `bodyContent` is fully clipped when collapsed.\n body: {\n display: 'grid',\n gridTemplateRows: '1fr',\n overflow: 'hidden',\n // `visibility` is transitioned alongside the rows so the content stays\n // readable while collapsing, then becomes `hidden` (removing it from the\n // a11y tree and tab order) once closed. The inline `visibility` style in\n // the component drives the open/closed value.\n transitionProperty: 'grid-template-rows, visibility',\n transitionDuration: 'normal',\n transitionTimingFunction: 'default',\n '@media (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01s',\n },\n },\n bodyContent: {\n minH: 0,\n bg: 'bg',\n borderBlockEndWidth: 'default',\n borderColor: 'border',\n borderInlineWidth: 'default',\n borderStyle: 'solid',\n px: '4',\n py: '3',\n },\n },\n variants: {\n status: {\n error: {\n header: {\n bg: 'surface.red',\n color: 'surface.red.fg',\n '--silver-text-color': 'token(colors.surface.red.fg)',\n '--silver-text-color-muted': 'token(colors.surface.red.fg)',\n },\n },\n info: {\n header: {\n bg: 'surface.blue',\n color: 'surface.blue.fg',\n '--silver-text-color': 'token(colors.surface.blue.fg)',\n '--silver-text-color-muted': 'token(colors.surface.blue.fg)',\n },\n },\n success: {\n header: {\n bg: 'surface.green',\n color: 'surface.green.fg',\n '--silver-text-color': 'token(colors.surface.green.fg)',\n '--silver-text-color-muted': 'token(colors.surface.green.fg)',\n },\n },\n warning: {\n header: {\n bg: 'surface.yellow',\n color: 'surface.yellow.fg',\n '--silver-text-color': 'token(colors.surface.yellow.fg)',\n '--silver-text-color-muted': 'token(colors.surface.yellow.fg)',\n },\n },\n },\n container: {\n card: {\n header: {borderTopRadius: 'lg'},\n bodyContent: {borderBottomRadius: 'lg'},\n },\n section: {},\n },\n // Squares off the header's bottom corners while the body is revealed; the\n // compound variant rounds them back when there is no expanded content.\n hasContent: {\n true: {},\n false: {},\n },\n isCentered: {\n true: {header: {alignItems: 'center'}},\n false: {},\n },\n isExpanded: {\n true: {chevron: {transform: 'rotate(180deg)'}},\n false: {body: {gridTemplateRows: '0fr'}},\n },\n padding: paddingVariants,\n },\n compoundVariants: [\n {\n container: 'card',\n css: {header: {borderBottomRadius: 'lg'}},\n hasContent: false,\n },\n ],\n defaultVariants: {\n container: 'card',\n hasContent: false,\n isCentered: false,\n isExpanded: false,\n status: 'info',\n },\n});\n\nexport type AlertVariants = RecipeVariantProps<typeof alertRecipe>;\n","import {\n CheckCircle2,\n ChevronDown,\n Info,\n TriangleAlert,\n X,\n XCircle,\n} from 'lucide-react';\nimport {\n useId,\n useState,\n type CSSProperties,\n type ReactNode,\n type Ref,\n} from 'react';\nimport {cx} from '../../internal/cx';\nimport type {SpacingToken} from '../../internal/spacingTokens';\nimport {Button} from '../Button';\nimport {Icon} from '../Icon';\nimport {Text} from '../Text';\nimport {alertRecipe, type AlertVariants} from './Alert.recipe';\n\n/**\n * Derived from the recipe's `container` variant so the prop stays in sync with\n * the styles.\n */\nexport type AlertContainer = NonNullable<\n NonNullable<AlertVariants>['container']\n>;\n/**\n * Derived from the recipe's `status` variant so the prop stays in sync with the\n * styles.\n */\nexport type AlertStatus = NonNullable<NonNullable<AlertVariants>['status']>;\n\nexport interface AlertProps {\n /**\n * Extra content rendered below the alert header in a collapsible area.\n */\n children?: ReactNode;\n /**\n * Additional CSS class names applied to the root element.\n */\n className?: string;\n /**\n * Visual container style.\n * @default 'card'\n */\n container?: AlertContainer;\n /**\n * Test ID applied to the root element.\n */\n 'data-testid'?: string;\n /**\n * Supporting description displayed below the title.\n */\n description?: ReactNode;\n /**\n * Content rendered at the end of the header, before collapse and dismiss controls.\n */\n endContent?: ReactNode;\n /**\n * Custom status icon. A default icon is rendered when omitted.\n */\n icon?: ReactNode;\n /**\n * Whether collapsible children are expanded initially.\n * @default false\n */\n isDefaultExpanded?: boolean;\n /**\n * Whether the alert can be dismissed.\n * @default false\n */\n isDismissable?: boolean;\n /**\n * Called when the dismiss button is clicked.\n */\n onDismiss?: () => void;\n /**\n * Inner padding step.\n * @default 4\n */\n padding?: SpacingToken;\n /**\n * Ref forwarded to the root element.\n */\n ref?: Ref<HTMLDivElement>;\n /**\n * Status controlling role, icon, and color.\n */\n status: AlertStatus;\n /**\n * Inline styles applied to the root element.\n */\n style?: CSSProperties;\n /**\n * Primary alert title.\n */\n title: ReactNode;\n}\n\nconst statusRole: Record<AlertStatus, 'alert' | 'status'> = {\n error: 'alert',\n info: 'status',\n success: 'status',\n warning: 'alert',\n};\n\nconst defaultIcons: Record<AlertStatus, ReactNode> = {\n error: <Icon color=\"error\" icon={XCircle} />,\n info: <Icon color=\"info\" icon={Info} />,\n success: <Icon color=\"success\" icon={CheckCircle2} />,\n warning: <Icon color=\"warning\" icon={TriangleAlert} />,\n};\n\n/**\n * Displays a contextual message with status-based styling, an optional\n * collapsible body, and dismiss functionality.\n */\nexport function Alert({\n children,\n className,\n container = 'card',\n 'data-testid': dataTestId,\n description,\n endContent,\n icon,\n isDefaultExpanded = false,\n isDismissable = false,\n onDismiss,\n padding,\n ref,\n status,\n style,\n title,\n}: AlertProps): React.JSX.Element | null {\n const bodyId = useId();\n const [isDismissed, setIsDismissed] = useState(false);\n const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);\n const hasChildren = children != null;\n // The body is kept mounted whenever there are children (so child state and\n // the `aria-controls` target survive collapsing); `isExpanded` only drives\n // the visual collapse. `showContent` reflects whether the body is currently\n // revealed, which the header uses to square off its bottom corners.\n const showContent = hasChildren && isExpanded;\n const showEndArea = endContent != null || isDismissable || hasChildren;\n const isSingleLine =\n description == null && (endContent != null || isDismissable || hasChildren);\n\n if (isDismissed) {\n return null;\n }\n\n const classes = alertRecipe({\n container,\n hasContent: showContent,\n isCentered: isSingleLine,\n isExpanded,\n padding,\n status,\n });\n\n return (\n <div\n className={cx(classes.root, className)}\n data-testid={dataTestId}\n ref={ref}\n role={statusRole[status]}\n style={style}>\n <div className={classes.header}>\n <span aria-hidden=\"true\" className={classes.icon}>\n {icon ?? defaultIcons[status]}\n </span>\n <div className={classes.content}>\n <Text as=\"p\" type=\"label\" weight=\"semibold\">\n {title}\n </Text>\n {description != null ? (\n <Text as=\"p\" color=\"secondary\" type=\"supporting\">\n {description}\n </Text>\n ) : null}\n </div>\n {showEndArea ? (\n <div className={classes.endArea}>\n {endContent}\n {hasChildren ? (\n <Button\n aria-controls={bodyId}\n aria-expanded={isExpanded}\n className={classes.chevron}\n icon={ChevronDown}\n isIconOnly\n label={isExpanded ? 'Collapse' : 'Expand'}\n onClick={() => setIsExpanded(value => !value)}\n size=\"sm\"\n variant=\"ghost\"\n />\n ) : null}\n {isDismissable ? (\n <Button\n icon={X}\n isIconOnly\n label=\"Dismiss\"\n onClick={() => {\n setIsDismissed(true);\n onDismiss?.();\n }}\n size=\"sm\"\n variant=\"ghost\"\n />\n ) : null}\n </div>\n ) : null}\n </div>\n {hasChildren ? (\n <div\n className={classes.body}\n id={bodyId}\n style={{visibility: isExpanded ? undefined : 'hidden'}}>\n <div className={classes.bodyContent}>{children}</div>\n </div>\n ) : null}\n </div>\n );\n}\n\nAlert.displayName = 'Alert';\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/Alert/Alert.recipe.ts","../src/components/Alert/Alert.tsx"],"names":["sva","jsx","Icon","XCircle","Info","CheckCircle2","TriangleAlert","useId","useState","jsxs","cx","Text","Button","ChevronDown","X"],"mappings":"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","file":"chunk-25FU5AVR.cjs","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\n/**\n * Symmetric padding overrides for the collapsible body. Keys mirror the\n * `SpacingToken` scale so the `padding` prop maps onto build-time-validated\n * spacing tokens instead of a runtime token lookup.\n */\nconst paddingVariants = {\n 0: {bodyContent: {px: '0', py: '0'}},\n 0.5: {bodyContent: {px: '0.5', py: '0.5'}},\n 1: {bodyContent: {px: '1', py: '1'}},\n 1.5: {bodyContent: {px: '1.5', py: '1.5'}},\n 2: {bodyContent: {px: '2', py: '2'}},\n 3: {bodyContent: {px: '3', py: '3'}},\n 4: {bodyContent: {px: '4', py: '4'}},\n 5: {bodyContent: {px: '5', py: '5'}},\n 6: {bodyContent: {px: '6', py: '6'}},\n 8: {bodyContent: {px: '8', py: '8'}},\n 10: {bodyContent: {px: '10', py: '10'}},\n};\n\nexport const alertRecipe = sva({\n slots: [\n 'root',\n 'header',\n 'icon',\n 'content',\n 'endArea',\n 'chevron',\n 'body',\n 'bodyContent',\n ],\n base: {\n root: {\n display: 'flex',\n flexDirection: 'column',\n fontFamily: 'body',\n },\n header: {\n display: 'flex',\n alignItems: 'flex-start',\n gap: '2',\n px: '4',\n py: '3',\n },\n icon: {\n display: 'inline-flex',\n alignItems: 'center',\n flexShrink: 0,\n },\n content: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n minW: 0,\n },\n endArea: {\n display: 'flex',\n alignItems: 'center',\n flexShrink: 0,\n gap: '2',\n ms: 'auto',\n },\n // The body stays mounted so child state and the `aria-controls` target are\n // preserved; it is collapsed with a `grid-template-rows` 1fr -> 0fr\n // transition (mirroring `AccordionItem`). `overflow: hidden` lives on this\n // grid so the body chrome on `bodyContent` is fully clipped when collapsed.\n body: {\n display: 'grid',\n gridTemplateRows: '1fr',\n overflow: 'hidden',\n // `visibility` is transitioned alongside the rows so the content stays\n // readable while collapsing, then becomes `hidden` (removing it from the\n // a11y tree and tab order) once closed. The inline `visibility` style in\n // the component drives the open/closed value.\n transitionProperty: 'grid-template-rows, visibility',\n transitionDuration: 'normal',\n transitionTimingFunction: 'default',\n '@media (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01s',\n },\n },\n bodyContent: {\n minH: 0,\n bg: 'bg',\n borderBlockEndWidth: 'default',\n borderColor: 'border',\n borderInlineWidth: 'default',\n borderStyle: 'solid',\n px: '4',\n py: '3',\n },\n },\n variants: {\n status: {\n error: {\n header: {\n bg: 'surface.red',\n color: 'surface.red.fg',\n '--silver-text-color': 'token(colors.surface.red.fg)',\n '--silver-text-color-muted': 'token(colors.surface.red.fg)',\n },\n },\n info: {\n header: {\n bg: 'surface.blue',\n color: 'surface.blue.fg',\n '--silver-text-color': 'token(colors.surface.blue.fg)',\n '--silver-text-color-muted': 'token(colors.surface.blue.fg)',\n },\n },\n success: {\n header: {\n bg: 'surface.green',\n color: 'surface.green.fg',\n '--silver-text-color': 'token(colors.surface.green.fg)',\n '--silver-text-color-muted': 'token(colors.surface.green.fg)',\n },\n },\n warning: {\n header: {\n bg: 'surface.yellow',\n color: 'surface.yellow.fg',\n '--silver-text-color': 'token(colors.surface.yellow.fg)',\n '--silver-text-color-muted': 'token(colors.surface.yellow.fg)',\n },\n },\n },\n container: {\n card: {\n header: {borderTopRadius: 'lg'},\n bodyContent: {borderBottomRadius: 'lg'},\n },\n section: {},\n },\n // Squares off the header's bottom corners while the body is revealed; the\n // compound variant rounds them back when there is no expanded content.\n hasContent: {\n true: {},\n false: {},\n },\n isCentered: {\n true: {header: {alignItems: 'center'}},\n false: {},\n },\n isExpanded: {\n true: {chevron: {transform: 'rotate(180deg)'}},\n false: {body: {gridTemplateRows: '0fr'}},\n },\n padding: paddingVariants,\n },\n compoundVariants: [\n {\n container: 'card',\n css: {header: {borderBottomRadius: 'lg'}},\n hasContent: false,\n },\n ],\n defaultVariants: {\n container: 'card',\n hasContent: false,\n isCentered: false,\n isExpanded: false,\n status: 'info',\n },\n});\n\nexport type AlertVariants = RecipeVariantProps<typeof alertRecipe>;\n","import {\n CheckCircle2,\n ChevronDown,\n Info,\n TriangleAlert,\n X,\n XCircle,\n} from 'lucide-react';\nimport {\n useId,\n useState,\n type CSSProperties,\n type ReactNode,\n type Ref,\n} from 'react';\nimport {cx} from '../../internal/cx';\nimport type {SpacingToken} from '../../internal/spacingTokens';\nimport {Button} from '../Button';\nimport {Icon} from '../Icon';\nimport {Text} from '../Text';\nimport {alertRecipe, type AlertVariants} from './Alert.recipe';\n\n/**\n * Derived from the recipe's `container` variant so the prop stays in sync with\n * the styles.\n */\nexport type AlertContainer = NonNullable<\n NonNullable<AlertVariants>['container']\n>;\n/**\n * Derived from the recipe's `status` variant so the prop stays in sync with the\n * styles.\n */\nexport type AlertStatus = NonNullable<NonNullable<AlertVariants>['status']>;\n\nexport interface AlertProps {\n /**\n * Extra content rendered below the alert header in a collapsible area.\n */\n children?: ReactNode;\n /**\n * Additional CSS class names applied to the root element.\n */\n className?: string;\n /**\n * Visual container style.\n * @default 'card'\n */\n container?: AlertContainer;\n /**\n * Test ID applied to the root element.\n */\n 'data-testid'?: string;\n /**\n * Supporting description displayed below the title.\n */\n description?: ReactNode;\n /**\n * Content rendered at the end of the header, before collapse and dismiss controls.\n */\n endContent?: ReactNode;\n /**\n * Custom status icon. A default icon is rendered when omitted.\n */\n icon?: ReactNode;\n /**\n * Whether collapsible children are expanded initially.\n * @default false\n */\n isDefaultExpanded?: boolean;\n /**\n * Whether the alert can be dismissed.\n * @default false\n */\n isDismissable?: boolean;\n /**\n * Called when the dismiss button is clicked.\n */\n onDismiss?: () => void;\n /**\n * Inner padding step.\n * @default 4\n */\n padding?: SpacingToken;\n /**\n * Ref forwarded to the root element.\n */\n ref?: Ref<HTMLDivElement>;\n /**\n * Status controlling role, icon, and color.\n */\n status: AlertStatus;\n /**\n * Inline styles applied to the root element.\n */\n style?: CSSProperties;\n /**\n * Primary alert title.\n */\n title: ReactNode;\n}\n\nconst statusRole: Record<AlertStatus, 'alert' | 'status'> = {\n error: 'alert',\n info: 'status',\n success: 'status',\n warning: 'alert',\n};\n\nconst defaultIcons: Record<AlertStatus, ReactNode> = {\n error: <Icon color=\"error\" icon={XCircle} />,\n info: <Icon color=\"info\" icon={Info} />,\n success: <Icon color=\"success\" icon={CheckCircle2} />,\n warning: <Icon color=\"warning\" icon={TriangleAlert} />,\n};\n\n/**\n * Displays a contextual message with status-based styling, an optional\n * collapsible body, and dismiss functionality.\n */\nexport function Alert({\n children,\n className,\n container = 'card',\n 'data-testid': dataTestId,\n description,\n endContent,\n icon,\n isDefaultExpanded = false,\n isDismissable = false,\n onDismiss,\n padding,\n ref,\n status,\n style,\n title,\n}: AlertProps): React.JSX.Element | null {\n const bodyId = useId();\n const [isDismissed, setIsDismissed] = useState(false);\n const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);\n const hasChildren = children != null;\n // The body is kept mounted whenever there are children (so child state and\n // the `aria-controls` target survive collapsing); `isExpanded` only drives\n // the visual collapse. `showContent` reflects whether the body is currently\n // revealed, which the header uses to square off its bottom corners.\n const showContent = hasChildren && isExpanded;\n const showEndArea = endContent != null || isDismissable || hasChildren;\n const isSingleLine =\n description == null && (endContent != null || isDismissable || hasChildren);\n\n if (isDismissed) {\n return null;\n }\n\n const classes = alertRecipe({\n container,\n hasContent: showContent,\n isCentered: isSingleLine,\n isExpanded,\n padding,\n status,\n });\n\n return (\n <div\n className={cx(classes.root, className)}\n data-testid={dataTestId}\n ref={ref}\n role={statusRole[status]}\n style={style}>\n <div className={classes.header}>\n <span aria-hidden=\"true\" className={classes.icon}>\n {icon ?? defaultIcons[status]}\n </span>\n <div className={classes.content}>\n <Text as=\"p\" type=\"label\" weight=\"semibold\">\n {title}\n </Text>\n {description != null ? (\n <Text as=\"p\" color=\"secondary\" type=\"supporting\">\n {description}\n </Text>\n ) : null}\n </div>\n {showEndArea ? (\n <div className={classes.endArea}>\n {endContent}\n {hasChildren ? (\n <Button\n aria-controls={bodyId}\n aria-expanded={isExpanded}\n className={classes.chevron}\n icon={ChevronDown}\n isIconOnly\n label={isExpanded ? 'Collapse' : 'Expand'}\n onClick={() => setIsExpanded(value => !value)}\n size=\"sm\"\n variant=\"ghost\"\n />\n ) : null}\n {isDismissable ? (\n <Button\n icon={X}\n isIconOnly\n label=\"Dismiss\"\n onClick={() => {\n setIsDismissed(true);\n onDismiss?.();\n }}\n size=\"sm\"\n variant=\"ghost\"\n />\n ) : null}\n </div>\n ) : null}\n </div>\n {hasChildren ? (\n <div\n className={classes.body}\n id={bodyId}\n style={{visibility: isExpanded ? undefined : 'hidden'}}>\n <div className={classes.bodyContent}>{children}</div>\n </div>\n ) : null}\n </div>\n );\n}\n\nAlert.displayName = 'Alert';\n"]}
|
|
@@ -23,28 +23,37 @@ var buttonGroupRecipe = chunkJRBQKFVO_cjs.cva({
|
|
|
23
23
|
orientation: {
|
|
24
24
|
horizontal: {
|
|
25
25
|
flexDirection: "row",
|
|
26
|
-
"& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a)": {
|
|
26
|
+
"& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a):not([popover] *)": {
|
|
27
27
|
borderTopLeftRadius: 0,
|
|
28
28
|
borderBottomLeftRadius: 0,
|
|
29
29
|
borderInlineStartWidth: "default",
|
|
30
30
|
borderInlineStartStyle: "solid",
|
|
31
31
|
borderInlineStartColor: "border"
|
|
32
32
|
},
|
|
33
|
-
|
|
33
|
+
// `:has(~ :not([popover]))` rather than `:not(:last-child)` so that a
|
|
34
|
+
// trailing `[popover]` sibling (e.g. DropdownMenu's floating content,
|
|
35
|
+
// which is display:none but still counts for :last-child) does not
|
|
36
|
+
// strip the end radius from the last visible button in the group. The
|
|
37
|
+
// `:not([popover] *)` on the descendant clause keeps these joins from
|
|
38
|
+
// leaking onto buttons rendered inside a child's popover (menu items).
|
|
39
|
+
"& > :has(~ :not([popover])):is(button, a), & > :has(~ :not([popover])) :where(button, a):not([popover] *)": {
|
|
34
40
|
borderTopRightRadius: 0,
|
|
35
41
|
borderBottomRightRadius: 0
|
|
36
42
|
}
|
|
37
43
|
},
|
|
38
44
|
vertical: {
|
|
39
45
|
flexDirection: "column",
|
|
40
|
-
"& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a)": {
|
|
46
|
+
"& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a):not([popover] *)": {
|
|
41
47
|
borderTopLeftRadius: 0,
|
|
42
48
|
borderTopRightRadius: 0,
|
|
43
49
|
borderBlockStartWidth: "default",
|
|
44
50
|
borderBlockStartStyle: "solid",
|
|
45
51
|
borderBlockStartColor: "border"
|
|
46
52
|
},
|
|
47
|
-
|
|
53
|
+
// See the horizontal note above: skip trailing `[popover]` siblings so
|
|
54
|
+
// the last visible button keeps its bottom radius, and exclude popover
|
|
55
|
+
// descendants so menu items don't inherit the group joins.
|
|
56
|
+
"& > :has(~ :not([popover])):is(button, a), & > :has(~ :not([popover])) :where(button, a):not([popover] *)": {
|
|
48
57
|
borderBottomLeftRadius: 0,
|
|
49
58
|
borderBottomRightRadius: 0
|
|
50
59
|
}
|
|
@@ -88,5 +97,5 @@ function ButtonGroup({
|
|
|
88
97
|
ButtonGroup.displayName = "ButtonGroup";
|
|
89
98
|
|
|
90
99
|
exports.ButtonGroup = ButtonGroup;
|
|
91
|
-
//# sourceMappingURL=chunk-
|
|
92
|
-
//# sourceMappingURL=chunk-
|
|
100
|
+
//# sourceMappingURL=chunk-276LEL3G.cjs.map
|
|
101
|
+
//# sourceMappingURL=chunk-276LEL3G.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/ButtonGroup/ButtonGroup.recipe.ts","../src/components/ButtonGroup/ButtonGroup.tsx"],"names":["cva","useMemo","jsx","ButtonGroupContext","cx"],"mappings":";;;;;;;;;AAEO,IAAM,oBAAoBA,qBAAA,CAAI;AAAA,EACnC,IAAA,EAAM;AAAA,IACJ,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY,SAAA;AAAA,IACZ,SAAA,EAAW,SAAA;AAAA,IACX,qBAAA,EAAuB;AAAA,MACrB,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,mCAAA,EAAqC;AAAA,MACnC,MAAA,EAAQ;AAAA;AACV,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,UAAA,EAAY;AAAA,QACV,aAAA,EAAe,KAAA;AAAA,QACf,iGAAA,EACE;AAAA,UACE,mBAAA,EAAqB,CAAA;AAAA,UACrB,sBAAA,EAAwB,CAAA;AAAA,UACxB,sBAAA,EAAwB,SAAA;AAAA,UACxB,sBAAA,EAAwB,OAAA;AAAA,UACxB,sBAAA,EAAwB;AAAA,SAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOF,2GAAA,EACE;AAAA,UACE,oBAAA,EAAsB,CAAA;AAAA,UACtB,uBAAA,EAAyB;AAAA;AAC3B,OACJ;AAAA,MACA,QAAA,EAAU;AAAA,QACR,aAAA,EAAe,QAAA;AAAA,QACf,iGAAA,EACE;AAAA,UACE,mBAAA,EAAqB,CAAA;AAAA,UACrB,oBAAA,EAAsB,CAAA;AAAA,UACtB,qBAAA,EAAuB,SAAA;AAAA,UACvB,qBAAA,EAAuB,OAAA;AAAA,UACvB,qBAAA,EAAuB;AAAA,SACzB;AAAA;AAAA;AAAA;AAAA,QAIF,2GAAA,EACE;AAAA,UACE,sBAAA,EAAwB,CAAA;AAAA,UACxB,uBAAA,EAAyB;AAAA;AAC3B;AACJ;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,WAAA,EAAa;AAAA;AAEjB,CAAC,CAAA;ACLM,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,UAAA,GAAa,KAAA;AAAA,EACb,KAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,GAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,EAAwC;AACtC,EAAA,MAAM,YAAA,GAAeC,aAAA;AAAA,IACnB,OAAO,EAAC,UAAA,EAAY,WAAA,EAAa,IAAA,EAAI,CAAA;AAAA,IACrC,CAAC,UAAA,EAAY,WAAA,EAAa,IAAI;AAAA,GAChC;AAEA,EAAA,uBACEC,cAAA,CAACC,oCAAA,EAAA,EAAmB,KAAA,EAAO,YAAA,EACzB,QAAA,kBAAAD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,iBAAe,UAAA,IAAc,MAAA;AAAA,MAC7B,YAAA,EAAY,KAAA;AAAA,MACZ,WAAWE,oBAAA,CAAG,iBAAA,CAAkB,EAAC,WAAA,EAAY,GAAG,SAAS,CAAA;AAAA,MACzD,kBAAA,EAAkB,WAAA;AAAA,MAClB,aAAA,EAAa,UAAA;AAAA,MACb,GAAA;AAAA,MACA,IAAA,EAAK,OAAA;AAAA,MACL,KAAA;AAAA,MACC;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-276LEL3G.cjs","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const buttonGroupRecipe = cva({\n base: {\n display: 'inline-flex',\n alignItems: 'stretch',\n isolation: 'isolate',\n '& :where(button, a)': {\n position: 'relative',\n },\n '& :where(button, a):focus-visible': {\n zIndex: 1,\n },\n },\n variants: {\n orientation: {\n horizontal: {\n flexDirection: 'row',\n '& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a):not([popover] *)':\n {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n borderInlineStartWidth: 'default',\n borderInlineStartStyle: 'solid',\n borderInlineStartColor: 'border',\n },\n // `:has(~ :not([popover]))` rather than `:not(:last-child)` so that a\n // trailing `[popover]` sibling (e.g. DropdownMenu's floating content,\n // which is display:none but still counts for :last-child) does not\n // strip the end radius from the last visible button in the group. The\n // `:not([popover] *)` on the descendant clause keeps these joins from\n // leaking onto buttons rendered inside a child's popover (menu items).\n '& > :has(~ :not([popover])):is(button, a), & > :has(~ :not([popover])) :where(button, a):not([popover] *)':\n {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n },\n vertical: {\n flexDirection: 'column',\n '& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a):not([popover] *)':\n {\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n borderBlockStartWidth: 'default',\n borderBlockStartStyle: 'solid',\n borderBlockStartColor: 'border',\n },\n // See the horizontal note above: skip trailing `[popover]` siblings so\n // the last visible button keeps its bottom radius, and exclude popover\n // descendants so menu items don't inherit the group joins.\n '& > :has(~ :not([popover])):is(button, a), & > :has(~ :not([popover])) :where(button, a):not([popover] *)':\n {\n borderBottomLeftRadius: 0,\n borderBottomRightRadius: 0,\n },\n },\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\n },\n});\n\nexport type ButtonGroupVariants = RecipeVariantProps<typeof buttonGroupRecipe>;\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {useMemo} from 'react';\nimport {cx} from '../../internal/cx';\nimport type {ButtonSize} from '../Button/Button';\nimport {buttonGroupRecipe} from './ButtonGroup.recipe';\nimport {\n ButtonGroupContext,\n type ButtonGroupOrientation,\n} from './ButtonGroupContext';\n\n/**\n * Groups related Buttons and propagates shared size, disabled state, and\n * orientation to child Buttons.\n */\nexport interface ButtonGroupProps {\n /**\n * Direct children should be `<Button>` elements.\n */\n children: ReactNode;\n /**\n * Additional CSS class names applied to the root element.\n */\n className?: string;\n /**\n * Test ID applied to the root element.\n */\n 'data-testid'?: string;\n /**\n * Whether all buttons in the group are disabled.\n */\n isDisabled?: boolean;\n /**\n * Accessible label for the group.\n */\n label: string;\n /**\n * Orientation for layout. Default is `horizontal`.\n */\n orientation?: ButtonGroupOrientation;\n /**\n * Ref forwarded to the root element.\n */\n ref?: Ref<HTMLDivElement>;\n /**\n * Default size for Buttons in the group. Individual Buttons can override it.\n */\n size?: ButtonSize;\n /**\n * Inline styles applied to the root element.\n */\n style?: CSSProperties;\n}\n\n/**\n * Groups related Buttons and propagates shared size, disabled state, and\n * orientation to child Buttons.\n */\nexport function ButtonGroup({\n children,\n className,\n 'data-testid': dataTestId,\n isDisabled = false,\n label,\n orientation = 'horizontal',\n ref,\n size = 'md',\n style,\n}: ButtonGroupProps): React.JSX.Element {\n const contextValue = useMemo(\n () => ({isDisabled, orientation, size}),\n [isDisabled, orientation, size],\n );\n\n return (\n <ButtonGroupContext value={contextValue}>\n <div\n aria-disabled={isDisabled || undefined}\n aria-label={label}\n className={cx(buttonGroupRecipe({orientation}), className)}\n data-orientation={orientation}\n data-testid={dataTestId}\n ref={ref}\n role=\"group\"\n style={style}>\n {children}\n </div>\n </ButtonGroupContext>\n );\n}\n\nButtonGroup.displayName = 'ButtonGroup';\n"]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var chunkVXBVSYPA_cjs = require('./chunk-VXBVSYPA.cjs');
|
|
4
4
|
var chunkKFEXS6OK_cjs = require('./chunk-KFEXS6OK.cjs');
|
|
5
5
|
var chunk2P6D43V2_cjs = require('./chunk-2P6D43V2.cjs');
|
|
6
|
-
var
|
|
6
|
+
var chunkYBPG5RPR_cjs = require('./chunk-YBPG5RPR.cjs');
|
|
7
7
|
var chunkYXYD5HKL_cjs = require('./chunk-YXYD5HKL.cjs');
|
|
8
8
|
var chunk4TIAKZ4Q_cjs = require('./chunk-4TIAKZ4Q.cjs');
|
|
9
9
|
var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
|
|
@@ -120,7 +120,7 @@ function TimeInput({
|
|
|
120
120
|
}
|
|
121
121
|
),
|
|
122
122
|
hasClear && value != null && !isDisabled ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
123
|
-
|
|
123
|
+
chunkYBPG5RPR_cjs.Button,
|
|
124
124
|
{
|
|
125
125
|
icon: lucideReact.X,
|
|
126
126
|
isIconOnly: true,
|
|
@@ -141,5 +141,5 @@ function TimeInput({
|
|
|
141
141
|
TimeInput.displayName = "TimeInput";
|
|
142
142
|
|
|
143
143
|
exports.TimeInput = TimeInput;
|
|
144
|
-
//# sourceMappingURL=chunk-
|
|
145
|
-
//# sourceMappingURL=chunk-
|
|
144
|
+
//# sourceMappingURL=chunk-2D6SGEPH.cjs.map
|
|
145
|
+
//# sourceMappingURL=chunk-2D6SGEPH.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TimeInput/TimeInput.tsx"],"names":["css","Temporal","useId","getStatusMessageID","getDescribedBy","getNecessity","jsx","Field","jsxs","inputRecipe","inputStyles","Icon","Clock","cx","Button","X","Spinner","getStatusIcon"],"mappings":"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","file":"chunk-Z7ID5TC7.cjs","sourcesContent":["import {Temporal} from '@js-temporal/polyfill';\nimport {Clock, X} from 'lucide-react';\nimport {useId, type CSSProperties, type ReactNode, type Ref} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {Button} from '../Button';\nimport {\n Field,\n getNecessity,\n type FieldNecessity,\n type InputSize,\n type InputStatus,\n} from '../Field';\nimport {inputRecipe, inputStyles} from '../Field/inputStyles';\nimport {\n getDescribedBy,\n getStatusIcon,\n getStatusMessageID,\n} from '../Field/inputUtils';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Spinner} from '../Spinner';\n\nconst styles = {\n input: css({\n '&::-webkit-calendar-picker-indicator': {\n display: 'none',\n },\n }),\n} as const;\n\nexport type PlainTime = Temporal.PlainTime;\n\nexport type TimeInputProps = {\n /**\n * Additional CSS class names applied to the input wrapper.\n */\n className?: string;\n /**\n * Test ID applied to the input element.\n */\n 'data-testid'?: string;\n /**\n * Supporting text displayed below the label.\n */\n description?: ReactNode;\n /**\n * Whether to focus the input on mount.\n * @default false\n */\n hasAutoFocus?: boolean;\n /**\n * Whether to show a clear button when a value is set.\n * @default false\n */\n hasClear?: boolean;\n /**\n * Whether the input includes a seconds field.\n * @default false\n */\n hasSeconds?: boolean;\n /**\n * HTML name attribute.\n */\n htmlName?: string;\n /**\n * Whether the input is disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Whether to visually hide the label.\n * @default false\n */\n isLabelHidden?: boolean;\n /**\n * Whether the input is loading.\n * @default false\n */\n isLoading?: boolean;\n /**\n * Field label.\n */\n label: string;\n /**\n * Icon shown before the label.\n */\n labelIcon?: IconComponent;\n /**\n * Tooltip content shown next to the label.\n */\n labelTooltip?: ReactNode;\n /**\n * Latest allowed time.\n */\n max?: PlainTime;\n /**\n * Earliest allowed time.\n */\n min?: PlainTime;\n /**\n * Called when the time value changes.\n */\n onChange: (value: PlainTime | undefined) => void;\n /**\n * Placeholder text.\n * @default 'Select a time'\n */\n placeholder?: string;\n /**\n * Ref forwarded to the input element.\n */\n ref?: Ref<HTMLInputElement>;\n /**\n * Visual size.\n * @default 'md'\n */\n size?: InputSize;\n /**\n * Validation status displayed below the input.\n */\n status?: InputStatus;\n /**\n * Step increment in seconds for the time picker.\n */\n step?: number;\n /**\n * Inline styles applied to the input wrapper.\n */\n style?: CSSProperties;\n /**\n * Controlled time value.\n */\n value: PlainTime | undefined;\n} & FieldNecessity;\n\nfunction toInputString(\n time: PlainTime | undefined,\n hasSeconds: boolean,\n): string {\n if (time == null) {\n return '';\n }\n return time.toString({\n smallestUnit: hasSeconds ? 'second' : 'minute',\n });\n}\n\nfunction fromInputString(value: string): PlainTime | undefined {\n if (value === '') {\n return undefined;\n }\n try {\n return Temporal.PlainTime.from(value);\n } catch {\n return undefined;\n }\n}\n\n/**\n * Time picker input field with optional seconds granularity.\n */\nexport function TimeInput({\n label,\n value,\n onChange,\n hasSeconds = false,\n hasClear = false,\n hasAutoFocus = false,\n min,\n max,\n step,\n size = 'md',\n description,\n isLabelHidden = false,\n isOptional,\n isRequired,\n isDisabled = false,\n isLoading = false,\n htmlName,\n status,\n labelIcon,\n labelTooltip,\n placeholder = 'Select a time',\n className,\n 'data-testid': dataTestId,\n style,\n ref,\n}: TimeInputProps): React.JSX.Element {\n const inputId = useId();\n const descriptionID =\n description != null ? `${inputId}-description` : undefined;\n const statusMessageID = getStatusMessageID(inputId, status);\n const describedBy = getDescribedBy(descriptionID, statusMessageID);\n\n const necessity = getNecessity(isOptional, isRequired);\n\n return (\n <Field\n className={className}\n description={description}\n descriptionID={descriptionID}\n inputId={inputId}\n isDisabled={isDisabled}\n isLabelHidden={isLabelHidden}\n {...necessity}\n label={label}\n labelIcon={labelIcon}\n labelTooltip={labelTooltip}\n status={\n status == null ? undefined : {...status, messageID: statusMessageID}\n }\n style={style}>\n <div\n className={inputRecipe({\n size,\n status: status?.type,\n isDisabled,\n })}>\n <span className={inputStyles.iconSlot}>\n <Icon icon={Clock} size=\"sm\" />\n </span>\n <input\n aria-busy={isLoading || undefined}\n aria-describedby={describedBy}\n aria-invalid={status?.type === 'error' || undefined}\n aria-required={isRequired ?? undefined}\n // eslint-disable-next-line jsx-a11y-x/no-autofocus\n autoFocus={hasAutoFocus}\n className={cx(inputStyles.control, styles.input)}\n data-autofocus={hasAutoFocus || undefined}\n data-testid={dataTestId}\n disabled={isDisabled}\n id={inputId}\n max={toInputString(max, hasSeconds)}\n min={toInputString(min, hasSeconds)}\n name={htmlName}\n onChange={event => onChange(fromInputString(event.target.value))}\n placeholder={placeholder}\n ref={ref}\n step={step ?? (hasSeconds ? 1 : 60)}\n type=\"time\"\n value={toInputString(value, hasSeconds)}\n />\n {hasClear && value != null && !isDisabled ? (\n <Button\n icon={X}\n isIconOnly\n label={`Clear ${label}`}\n onClick={() => onChange(undefined)}\n size=\"sm\"\n variant=\"ghost\"\n />\n ) : null}\n {isLoading ? <Spinner size=\"sm\" /> : null}\n {status != null ? (\n <span className={inputStyles.iconSlot}>\n {getStatusIcon(status.type)}\n </span>\n ) : null}\n </div>\n </Field>\n );\n}\n\nTimeInput.displayName = 'TimeInput';\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/TimeInput/TimeInput.tsx"],"names":["css","Temporal","useId","getStatusMessageID","getDescribedBy","getNecessity","jsx","Field","jsxs","inputRecipe","inputStyles","Icon","Clock","cx","Button","X","Spinner","getStatusIcon"],"mappings":"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","file":"chunk-2D6SGEPH.cjs","sourcesContent":["import {Temporal} from '@js-temporal/polyfill';\nimport {Clock, X} from 'lucide-react';\nimport {useId, type CSSProperties, type ReactNode, type Ref} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {Button} from '../Button';\nimport {\n Field,\n getNecessity,\n type FieldNecessity,\n type InputSize,\n type InputStatus,\n} from '../Field';\nimport {inputRecipe, inputStyles} from '../Field/inputStyles';\nimport {\n getDescribedBy,\n getStatusIcon,\n getStatusMessageID,\n} from '../Field/inputUtils';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Spinner} from '../Spinner';\n\nconst styles = {\n input: css({\n '&::-webkit-calendar-picker-indicator': {\n display: 'none',\n },\n }),\n} as const;\n\nexport type PlainTime = Temporal.PlainTime;\n\nexport type TimeInputProps = {\n /**\n * Additional CSS class names applied to the input wrapper.\n */\n className?: string;\n /**\n * Test ID applied to the input element.\n */\n 'data-testid'?: string;\n /**\n * Supporting text displayed below the label.\n */\n description?: ReactNode;\n /**\n * Whether to focus the input on mount.\n * @default false\n */\n hasAutoFocus?: boolean;\n /**\n * Whether to show a clear button when a value is set.\n * @default false\n */\n hasClear?: boolean;\n /**\n * Whether the input includes a seconds field.\n * @default false\n */\n hasSeconds?: boolean;\n /**\n * HTML name attribute.\n */\n htmlName?: string;\n /**\n * Whether the input is disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Whether to visually hide the label.\n * @default false\n */\n isLabelHidden?: boolean;\n /**\n * Whether the input is loading.\n * @default false\n */\n isLoading?: boolean;\n /**\n * Field label.\n */\n label: string;\n /**\n * Icon shown before the label.\n */\n labelIcon?: IconComponent;\n /**\n * Tooltip content shown next to the label.\n */\n labelTooltip?: ReactNode;\n /**\n * Latest allowed time.\n */\n max?: PlainTime;\n /**\n * Earliest allowed time.\n */\n min?: PlainTime;\n /**\n * Called when the time value changes.\n */\n onChange: (value: PlainTime | undefined) => void;\n /**\n * Placeholder text.\n * @default 'Select a time'\n */\n placeholder?: string;\n /**\n * Ref forwarded to the input element.\n */\n ref?: Ref<HTMLInputElement>;\n /**\n * Visual size.\n * @default 'md'\n */\n size?: InputSize;\n /**\n * Validation status displayed below the input.\n */\n status?: InputStatus;\n /**\n * Step increment in seconds for the time picker.\n */\n step?: number;\n /**\n * Inline styles applied to the input wrapper.\n */\n style?: CSSProperties;\n /**\n * Controlled time value.\n */\n value: PlainTime | undefined;\n} & FieldNecessity;\n\nfunction toInputString(\n time: PlainTime | undefined,\n hasSeconds: boolean,\n): string {\n if (time == null) {\n return '';\n }\n return time.toString({\n smallestUnit: hasSeconds ? 'second' : 'minute',\n });\n}\n\nfunction fromInputString(value: string): PlainTime | undefined {\n if (value === '') {\n return undefined;\n }\n try {\n return Temporal.PlainTime.from(value);\n } catch {\n return undefined;\n }\n}\n\n/**\n * Time picker input field with optional seconds granularity.\n */\nexport function TimeInput({\n label,\n value,\n onChange,\n hasSeconds = false,\n hasClear = false,\n hasAutoFocus = false,\n min,\n max,\n step,\n size = 'md',\n description,\n isLabelHidden = false,\n isOptional,\n isRequired,\n isDisabled = false,\n isLoading = false,\n htmlName,\n status,\n labelIcon,\n labelTooltip,\n placeholder = 'Select a time',\n className,\n 'data-testid': dataTestId,\n style,\n ref,\n}: TimeInputProps): React.JSX.Element {\n const inputId = useId();\n const descriptionID =\n description != null ? `${inputId}-description` : undefined;\n const statusMessageID = getStatusMessageID(inputId, status);\n const describedBy = getDescribedBy(descriptionID, statusMessageID);\n\n const necessity = getNecessity(isOptional, isRequired);\n\n return (\n <Field\n className={className}\n description={description}\n descriptionID={descriptionID}\n inputId={inputId}\n isDisabled={isDisabled}\n isLabelHidden={isLabelHidden}\n {...necessity}\n label={label}\n labelIcon={labelIcon}\n labelTooltip={labelTooltip}\n status={\n status == null ? undefined : {...status, messageID: statusMessageID}\n }\n style={style}>\n <div\n className={inputRecipe({\n size,\n status: status?.type,\n isDisabled,\n })}>\n <span className={inputStyles.iconSlot}>\n <Icon icon={Clock} size=\"sm\" />\n </span>\n <input\n aria-busy={isLoading || undefined}\n aria-describedby={describedBy}\n aria-invalid={status?.type === 'error' || undefined}\n aria-required={isRequired ?? undefined}\n // eslint-disable-next-line jsx-a11y-x/no-autofocus\n autoFocus={hasAutoFocus}\n className={cx(inputStyles.control, styles.input)}\n data-autofocus={hasAutoFocus || undefined}\n data-testid={dataTestId}\n disabled={isDisabled}\n id={inputId}\n max={toInputString(max, hasSeconds)}\n min={toInputString(min, hasSeconds)}\n name={htmlName}\n onChange={event => onChange(fromInputString(event.target.value))}\n placeholder={placeholder}\n ref={ref}\n step={step ?? (hasSeconds ? 1 : 60)}\n type=\"time\"\n value={toInputString(value, hasSeconds)}\n />\n {hasClear && value != null && !isDisabled ? (\n <Button\n icon={X}\n isIconOnly\n label={`Clear ${label}`}\n onClick={() => onChange(undefined)}\n size=\"sm\"\n variant=\"ghost\"\n />\n ) : null}\n {isLoading ? <Spinner size=\"sm\" /> : null}\n {status != null ? (\n <span className={inputStyles.iconSlot}>\n {getStatusIcon(status.type)}\n </span>\n ) : null}\n </div>\n </Field>\n );\n}\n\nTimeInput.displayName = 'TimeInput';\n"]}
|
|
@@ -4,8 +4,8 @@ var chunkL6JT244G_cjs = require('./chunk-L6JT244G.cjs');
|
|
|
4
4
|
var chunk4I6VIR44_cjs = require('./chunk-4I6VIR44.cjs');
|
|
5
5
|
var chunkVXBVSYPA_cjs = require('./chunk-VXBVSYPA.cjs');
|
|
6
6
|
var chunkKFEXS6OK_cjs = require('./chunk-KFEXS6OK.cjs');
|
|
7
|
-
var
|
|
8
|
-
var
|
|
7
|
+
var chunkMAL4D4LR_cjs = require('./chunk-MAL4D4LR.cjs');
|
|
8
|
+
var chunkYBPG5RPR_cjs = require('./chunk-YBPG5RPR.cjs');
|
|
9
9
|
var chunkYXYD5HKL_cjs = require('./chunk-YXYD5HKL.cjs');
|
|
10
10
|
var chunk4TIAKZ4Q_cjs = require('./chunk-4TIAKZ4Q.cjs');
|
|
11
11
|
var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
|
|
@@ -344,7 +344,7 @@ function Select({
|
|
|
344
344
|
),
|
|
345
345
|
isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkYXYD5HKL_cjs.Spinner, { size: "sm" }) : null,
|
|
346
346
|
hasClear && selectedOption != null && !isDisabled ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
347
|
-
|
|
347
|
+
chunkYBPG5RPR_cjs.Button,
|
|
348
348
|
{
|
|
349
349
|
icon: lucideReact.X,
|
|
350
350
|
isIconOnly: true,
|
|
@@ -380,7 +380,7 @@ function Select({
|
|
|
380
380
|
children: [
|
|
381
381
|
trigger,
|
|
382
382
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
383
|
-
|
|
383
|
+
chunkMAL4D4LR_cjs.Popover,
|
|
384
384
|
{
|
|
385
385
|
anchorRef: triggerRef,
|
|
386
386
|
content: menu,
|
|
@@ -437,5 +437,5 @@ SelectOption.displayName = "SelectOption";
|
|
|
437
437
|
|
|
438
438
|
exports.Select = Select;
|
|
439
439
|
exports.SelectOption = SelectOption;
|
|
440
|
-
//# sourceMappingURL=chunk-
|
|
441
|
-
//# sourceMappingURL=chunk-
|
|
440
|
+
//# sourceMappingURL=chunk-2TGDDZG6.cjs.map
|
|
441
|
+
//# sourceMappingURL=chunk-2TGDDZG6.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Select/Select.tsx","../src/components/Select/SelectOption.tsx"],"names":["css","useMemo","useCallback","useSelectListbox","jsxs","cx","jsx","Fragment","Icon","Check","renderSelectListboxOptions","getNecessity","inputRecipe","Spinner","Button","X","ChevronDown","Field","Popover","styles","Item"],"mappings":"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","file":"chunk-DH2ZFYKE.cjs","sourcesContent":["import {Check, ChevronDown, X} from 'lucide-react';\nimport {\n useCallback,\n useMemo,\n type CSSProperties,\n type ReactNode,\n type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {\n renderSelectListboxOptions,\n useSelectListbox,\n type SelectListboxOptionData,\n} from '../../internal/useSelectListbox';\nimport {Button} from '../Button';\nimport {\n Field,\n getNecessity,\n type FieldNecessity,\n type InputSize,\n type InputStatus,\n} from '../Field';\nimport {inputRecipe} from '../Field/inputStyles';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Popover} from '../Popover';\nimport {Spinner} from '../Spinner';\n\nexport interface SelectOptionData extends SelectListboxOptionData {\n /**\n * Icon displayed before the label.\n */\n icon?: IconComponent;\n /**\n * Whether the option is disabled.\n */\n isDisabled?: boolean;\n /**\n * Option label. Defaults to `value`.\n */\n label?: string;\n /**\n * Option value.\n */\n value: string;\n}\n\nexport interface SelectDivider {\n /**\n * Discriminator identifying a divider entry.\n */\n type: 'divider';\n}\n\nexport interface SelectSection {\n /**\n * Options within this section.\n */\n options: ReadonlyArray<SelectOptionData>;\n /**\n * Optional heading text for the section.\n */\n title?: string;\n /**\n * Discriminator identifying a section entry.\n */\n type: 'section';\n}\n\nexport type SelectOptionDefinition =\n | SelectDivider\n | SelectOptionData\n | SelectSection\n | string;\n\nexport type SelectProps = {\n /**\n * Additional CSS class names applied to the trigger wrapper.\n */\n className?: string;\n /**\n * Test ID applied to the combobox button.\n */\n 'data-testid'?: string;\n /**\n * Supporting text displayed below the label.\n */\n description?: ReactNode;\n /**\n * Whether to show a clear button when a value is selected.\n * @default false\n */\n hasClear?: boolean;\n /**\n * Whether to show search input in the dropdown.\n * @default false\n */\n hasSearch?: boolean;\n /**\n * Whether the selector is disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Whether to visually hide the label.\n * @default false\n */\n isLabelHidden?: boolean;\n /**\n * Whether the selector is loading.\n * @default false\n */\n isLoading?: boolean;\n /**\n * Field label.\n */\n label: string;\n /**\n * Icon shown before the label.\n */\n labelIcon?: IconComponent;\n /**\n * Tooltip content shown next to the label.\n */\n labelTooltip?: ReactNode;\n /**\n * Called when selection changes.\n */\n onChange: (value: string | null) => void;\n /**\n * Options to display.\n */\n options: ReadonlyArray<SelectOptionDefinition>;\n /**\n * Placeholder shown when no option is selected.\n * @default 'Select...'\n */\n placeholder?: string;\n /**\n * Ref forwarded to the combobox button.\n */\n ref?: Ref<HTMLButtonElement>;\n /**\n * Custom render function for selectable options.\n */\n renderOption?: (option: SelectOptionData) => ReactNode;\n /**\n * Search input placeholder.\n * @default 'Search...'\n */\n searchPlaceholder?: string;\n /**\n * Select size.\n * @default 'md'\n */\n size?: InputSize;\n /**\n * Start icon rendered in the trigger.\n */\n startIcon?: IconComponent;\n /**\n * Validation status displayed below the selector.\n */\n status?: InputStatus;\n /**\n * Inline styles applied to the trigger wrapper.\n */\n style?: CSSProperties;\n /**\n * Selected option value.\n */\n value: string | null;\n} & FieldNecessity;\n\nconst styles = {\n wrapper: css({\n cursor: 'pointer',\n }),\n wrapperDisabled: css({\n cursor: 'not-allowed',\n }),\n trigger: css({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: '2',\n flex: 1,\n minW: 0,\n p: 0,\n borderWidth: 0,\n bg: 'transparent',\n color: 'inherit',\n cursor: 'pointer',\n fontFamily: 'body',\n outline: 'none',\n textAlign: 'start',\n _disabled: {\n cursor: 'not-allowed',\n },\n }),\n label: css({\n flex: 1,\n minW: 0,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }),\n placeholder: css({\n color: 'fg.muted',\n }),\n iconSlot: css({\n display: 'inline-flex',\n alignItems: 'center',\n flexShrink: 0,\n color: 'fg.muted',\n }),\n menu: css({\n display: 'flex',\n flexDirection: 'column',\n gap: '0.5',\n maxH: '80',\n overflowY: 'auto',\n p: '1',\n }),\n search: css({\n w: 'full',\n px: '2',\n py: '1',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'border.emphasized',\n borderRadius: 'md',\n fontFamily: 'body',\n outline: 'none',\n _focus: {\n borderColor: 'primary',\n },\n }),\n option: css({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: '2',\n w: 'full',\n px: '2',\n py: '2',\n borderWidth: 0,\n borderRadius: 'md',\n bg: 'transparent',\n color: 'fg',\n cursor: 'pointer',\n fontFamily: 'body',\n textAlign: 'start',\n _hover: {bg: 'bg.subtle'},\n _focusVisible: {\n outlineWidth: 'focus',\n outlineStyle: 'solid',\n outlineColor: 'primary',\n outlineOffset: 'focusOffsetTight',\n },\n _disabled: {\n opacity: 0.5,\n cursor: 'not-allowed',\n },\n }),\n optionSelected: css({fontWeight: 'medium'}),\n optionHighlighted: css({bg: 'bg.subtle'}),\n optionContent: css({\n display: 'inline-flex',\n alignItems: 'center',\n gap: '2',\n minW: 0,\n }),\n check: css({\n display: 'inline-flex',\n color: 'primary',\n }),\n sectionHeading: css({\n px: '2',\n py: '1',\n color: 'fg.muted',\n fontFamily: 'body',\n fontSize: 'sm',\n fontWeight: 'semibold',\n }),\n divider: css({\n h: '1px',\n bg: 'border',\n my: '1',\n }),\n} as const;\n\n/**\n * Single-select dropdown field.\n */\nexport function Select({\n className,\n 'data-testid': dataTestId,\n description,\n hasClear = false,\n hasSearch = false,\n isDisabled = false,\n isLabelHidden = false,\n isLoading = false,\n isOptional,\n isRequired,\n label,\n labelIcon,\n labelTooltip,\n onChange,\n options,\n placeholder = 'Select...',\n ref,\n renderOption: renderOptionProp,\n searchPlaceholder = 'Search...',\n size = 'md',\n startIcon,\n status,\n style,\n value,\n}: SelectProps): React.JSX.Element {\n const selectedValues = useMemo(\n () => (value == null ? new Set<string>() : new Set([value])),\n [value],\n );\n\n const commitOption = useCallback(\n (option: SelectOptionData): boolean => {\n if (option.isDisabled) {\n return false;\n }\n\n onChange(option.value);\n return true;\n },\n [onChange],\n );\n\n const {\n activeDescendantId,\n describedBy,\n descriptionID,\n filteredValues,\n getOptionId,\n handleKeyboardNavigation,\n handleOptionClick,\n handleOptionMouseEnter,\n highlightedValue,\n inputId,\n isInteractionDisabled,\n isOpen,\n listboxId,\n query,\n selectableOptions,\n setHighlightedValue,\n setIsOpen,\n setQuery,\n statusMessageID,\n triggerRef,\n } = useSelectListbox({\n clearQueryOnCommit: true,\n closeOnCommit: true,\n description,\n isDisabled,\n isLoading,\n onCommitOption: commitOption,\n options,\n selectedValues,\n status,\n });\n\n const selectedOption = useMemo(\n () => selectableOptions.find(option => option.value === value),\n [selectableOptions, value],\n );\n\n const renderOption = useCallback(\n (option: SelectOptionData): ReactNode => {\n if (!filteredValues.has(option.value)) {\n return null;\n }\n const isSelected = option.value === value;\n const isHighlighted = option.value === highlightedValue;\n return (\n <button\n aria-selected={isSelected}\n className={cx(\n styles.option,\n isSelected ? styles.optionSelected : undefined,\n isHighlighted ? styles.optionHighlighted : undefined,\n )}\n data-value={option.value}\n disabled={option.isDisabled}\n id={getOptionId(option.value)}\n key={option.value}\n onClick={handleOptionClick}\n onMouseEnter={handleOptionMouseEnter}\n role=\"option\"\n tabIndex={isHighlighted ? 0 : -1}\n type=\"button\">\n <span className={styles.optionContent}>\n {renderOptionProp == null ? (\n <>\n {option.icon != null ? (\n <span className={styles.iconSlot}>\n <Icon color=\"secondary\" icon={option.icon} size=\"sm\" />\n </span>\n ) : null}\n {option.label}\n </>\n ) : (\n renderOptionProp(option)\n )}\n </span>\n {isSelected ? (\n <span className={styles.check}>\n <Icon color=\"accent\" icon={Check} size=\"sm\" />\n </span>\n ) : null}\n </button>\n );\n },\n [\n filteredValues,\n getOptionId,\n handleOptionClick,\n handleOptionMouseEnter,\n highlightedValue,\n renderOptionProp,\n value,\n ],\n );\n\n const optionNodes = renderSelectListboxOptions({\n dividerClassName: styles.divider,\n inputId,\n options,\n renderOption,\n sectionHeadingClassName: styles.sectionHeading,\n });\n\n const menu = (\n <>\n {hasSearch ? (\n <input\n aria-activedescendant={activeDescendantId}\n aria-autocomplete=\"list\"\n aria-controls={listboxId}\n aria-label={`Search ${label}`}\n className={styles.search}\n onChange={event => {\n setQuery(event.target.value);\n setHighlightedValue(null);\n }}\n onKeyDown={handleKeyboardNavigation}\n placeholder={searchPlaceholder}\n type=\"search\"\n value={query}\n />\n ) : null}\n <div\n aria-label={`${label} options`}\n className={styles.menu}\n id={listboxId}\n role=\"listbox\">\n {optionNodes}\n </div>\n </>\n );\n\n const necessity = getNecessity(isOptional, isRequired);\n\n const trigger = (\n // eslint-disable-next-line jsx-a11y-x/click-events-have-key-events, jsx-a11y-x/no-static-element-interactions -- mouse clicks anywhere on the visual input delegate to the inner combobox button; keyboard handling stays on that button.\n <div\n className={cx(\n inputRecipe({\n size,\n status: status?.type,\n isDisabled,\n }),\n styles.wrapper,\n isInteractionDisabled ? styles.wrapperDisabled : undefined,\n )}\n onClick={() => {\n if (!isInteractionDisabled) {\n setIsOpen(currentIsOpen => !currentIsOpen);\n }\n }}\n ref={triggerRef}>\n {startIcon != null ? (\n <span className={styles.iconSlot}>\n <Icon color=\"secondary\" icon={startIcon} size=\"sm\" />\n </span>\n ) : null}\n <button\n aria-activedescendant={activeDescendantId}\n aria-busy={isLoading || undefined}\n aria-controls={listboxId}\n aria-describedby={describedBy}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n aria-invalid={status?.type === 'error' || undefined}\n className={styles.trigger}\n data-testid={dataTestId}\n disabled={isInteractionDisabled}\n id={inputId}\n onKeyDown={handleKeyboardNavigation}\n ref={ref}\n role=\"combobox\"\n type=\"button\">\n <span\n className={cx(\n styles.label,\n selectedOption == null ? styles.placeholder : undefined,\n )}>\n {selectedOption?.label ?? placeholder}\n </span>\n </button>\n {isLoading ? <Spinner size=\"sm\" /> : null}\n {hasClear && selectedOption != null && !isDisabled ? (\n <Button\n icon={X}\n isIconOnly\n label={`Clear ${label}`}\n onClick={event => {\n event.stopPropagation();\n onChange(null);\n }}\n size=\"sm\"\n variant=\"ghost\"\n />\n ) : null}\n <span className={styles.iconSlot}>\n <Icon icon={ChevronDown} size=\"sm\" />\n </span>\n </div>\n );\n\n return (\n <Field\n className={className}\n description={description}\n descriptionID={descriptionID}\n inputId={inputId}\n isDisabled={isDisabled}\n isLabelHidden={isLabelHidden}\n {...necessity}\n label={label}\n labelIcon={labelIcon}\n labelTooltip={labelTooltip}\n status={\n status == null ? undefined : {...status, messageID: statusMessageID}\n }\n style={style}>\n {trigger}\n <Popover\n anchorRef={triggerRef}\n content={menu}\n hasAutoFocus={hasSearch}\n hasCloseButton={false}\n isEnabled={false}\n isOpen={isOpen}\n onOpenChange={setIsOpen}\n />\n </Field>\n );\n}\n\nSelect.displayName = 'Select';\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Item} from '../Item';\n\nexport interface SelectOptionProps {\n /**\n * Additional CSS class names applied to the option layout.\n */\n className?: string;\n /**\n * Test ID applied to the option layout.\n */\n 'data-testid'?: string;\n /**\n * Supporting text displayed below the label.\n */\n description?: ReactNode;\n /**\n * Trailing content.\n */\n endContent?: ReactNode;\n /**\n * Icon displayed before the label.\n */\n icon?: IconComponent;\n /**\n * Primary label.\n */\n label: ReactNode;\n /**\n * Ref forwarded to the layout root.\n */\n ref?: Ref<HTMLSpanElement>;\n /**\n * Inline styles applied to the layout root.\n */\n style?: CSSProperties;\n}\n\nconst styles = {\n root: css({\n display: 'flex',\n minW: 0,\n p: 0,\n }),\n icon: css({\n display: 'inline-flex',\n flexShrink: 0,\n color: 'fg.muted',\n }),\n} as const;\n\n/**\n * Helper layout for custom Select option rendering.\n */\nexport function SelectOption({\n className,\n 'data-testid': dataTestId,\n description,\n endContent,\n icon,\n label,\n ref,\n style,\n}: SelectOptionProps): React.JSX.Element {\n return (\n <Item\n as=\"span\"\n className={cx(styles.root, className)}\n data-testid={dataTestId}\n description={description}\n endContent={endContent}\n label={label}\n ref={ref}\n startContent={\n icon != null ? (\n <span className={styles.icon}>\n <Icon color=\"secondary\" icon={icon} size=\"sm\" />\n </span>\n ) : null\n }\n style={style}\n />\n );\n}\n\nSelectOption.displayName = 'SelectOption';\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/Select/Select.tsx","../src/components/Select/SelectOption.tsx"],"names":["css","useMemo","useCallback","useSelectListbox","jsxs","cx","jsx","Fragment","Icon","Check","renderSelectListboxOptions","getNecessity","inputRecipe","Spinner","Button","X","ChevronDown","Field","Popover","styles","Item"],"mappings":"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","file":"chunk-2TGDDZG6.cjs","sourcesContent":["import {Check, ChevronDown, X} from 'lucide-react';\nimport {\n useCallback,\n useMemo,\n type CSSProperties,\n type ReactNode,\n type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {\n renderSelectListboxOptions,\n useSelectListbox,\n type SelectListboxOptionData,\n} from '../../internal/useSelectListbox';\nimport {Button} from '../Button';\nimport {\n Field,\n getNecessity,\n type FieldNecessity,\n type InputSize,\n type InputStatus,\n} from '../Field';\nimport {inputRecipe} from '../Field/inputStyles';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Popover} from '../Popover';\nimport {Spinner} from '../Spinner';\n\nexport interface SelectOptionData extends SelectListboxOptionData {\n /**\n * Icon displayed before the label.\n */\n icon?: IconComponent;\n /**\n * Whether the option is disabled.\n */\n isDisabled?: boolean;\n /**\n * Option label. Defaults to `value`.\n */\n label?: string;\n /**\n * Option value.\n */\n value: string;\n}\n\nexport interface SelectDivider {\n /**\n * Discriminator identifying a divider entry.\n */\n type: 'divider';\n}\n\nexport interface SelectSection {\n /**\n * Options within this section.\n */\n options: ReadonlyArray<SelectOptionData>;\n /**\n * Optional heading text for the section.\n */\n title?: string;\n /**\n * Discriminator identifying a section entry.\n */\n type: 'section';\n}\n\nexport type SelectOptionDefinition =\n | SelectDivider\n | SelectOptionData\n | SelectSection\n | string;\n\nexport type SelectProps = {\n /**\n * Additional CSS class names applied to the trigger wrapper.\n */\n className?: string;\n /**\n * Test ID applied to the combobox button.\n */\n 'data-testid'?: string;\n /**\n * Supporting text displayed below the label.\n */\n description?: ReactNode;\n /**\n * Whether to show a clear button when a value is selected.\n * @default false\n */\n hasClear?: boolean;\n /**\n * Whether to show search input in the dropdown.\n * @default false\n */\n hasSearch?: boolean;\n /**\n * Whether the selector is disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Whether to visually hide the label.\n * @default false\n */\n isLabelHidden?: boolean;\n /**\n * Whether the selector is loading.\n * @default false\n */\n isLoading?: boolean;\n /**\n * Field label.\n */\n label: string;\n /**\n * Icon shown before the label.\n */\n labelIcon?: IconComponent;\n /**\n * Tooltip content shown next to the label.\n */\n labelTooltip?: ReactNode;\n /**\n * Called when selection changes.\n */\n onChange: (value: string | null) => void;\n /**\n * Options to display.\n */\n options: ReadonlyArray<SelectOptionDefinition>;\n /**\n * Placeholder shown when no option is selected.\n * @default 'Select...'\n */\n placeholder?: string;\n /**\n * Ref forwarded to the combobox button.\n */\n ref?: Ref<HTMLButtonElement>;\n /**\n * Custom render function for selectable options.\n */\n renderOption?: (option: SelectOptionData) => ReactNode;\n /**\n * Search input placeholder.\n * @default 'Search...'\n */\n searchPlaceholder?: string;\n /**\n * Select size.\n * @default 'md'\n */\n size?: InputSize;\n /**\n * Start icon rendered in the trigger.\n */\n startIcon?: IconComponent;\n /**\n * Validation status displayed below the selector.\n */\n status?: InputStatus;\n /**\n * Inline styles applied to the trigger wrapper.\n */\n style?: CSSProperties;\n /**\n * Selected option value.\n */\n value: string | null;\n} & FieldNecessity;\n\nconst styles = {\n wrapper: css({\n cursor: 'pointer',\n }),\n wrapperDisabled: css({\n cursor: 'not-allowed',\n }),\n trigger: css({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: '2',\n flex: 1,\n minW: 0,\n p: 0,\n borderWidth: 0,\n bg: 'transparent',\n color: 'inherit',\n cursor: 'pointer',\n fontFamily: 'body',\n outline: 'none',\n textAlign: 'start',\n _disabled: {\n cursor: 'not-allowed',\n },\n }),\n label: css({\n flex: 1,\n minW: 0,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }),\n placeholder: css({\n color: 'fg.muted',\n }),\n iconSlot: css({\n display: 'inline-flex',\n alignItems: 'center',\n flexShrink: 0,\n color: 'fg.muted',\n }),\n menu: css({\n display: 'flex',\n flexDirection: 'column',\n gap: '0.5',\n maxH: '80',\n overflowY: 'auto',\n p: '1',\n }),\n search: css({\n w: 'full',\n px: '2',\n py: '1',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'border.emphasized',\n borderRadius: 'md',\n fontFamily: 'body',\n outline: 'none',\n _focus: {\n borderColor: 'primary',\n },\n }),\n option: css({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: '2',\n w: 'full',\n px: '2',\n py: '2',\n borderWidth: 0,\n borderRadius: 'md',\n bg: 'transparent',\n color: 'fg',\n cursor: 'pointer',\n fontFamily: 'body',\n textAlign: 'start',\n _hover: {bg: 'bg.subtle'},\n _focusVisible: {\n outlineWidth: 'focus',\n outlineStyle: 'solid',\n outlineColor: 'primary',\n outlineOffset: 'focusOffsetTight',\n },\n _disabled: {\n opacity: 0.5,\n cursor: 'not-allowed',\n },\n }),\n optionSelected: css({fontWeight: 'medium'}),\n optionHighlighted: css({bg: 'bg.subtle'}),\n optionContent: css({\n display: 'inline-flex',\n alignItems: 'center',\n gap: '2',\n minW: 0,\n }),\n check: css({\n display: 'inline-flex',\n color: 'primary',\n }),\n sectionHeading: css({\n px: '2',\n py: '1',\n color: 'fg.muted',\n fontFamily: 'body',\n fontSize: 'sm',\n fontWeight: 'semibold',\n }),\n divider: css({\n h: '1px',\n bg: 'border',\n my: '1',\n }),\n} as const;\n\n/**\n * Single-select dropdown field.\n */\nexport function Select({\n className,\n 'data-testid': dataTestId,\n description,\n hasClear = false,\n hasSearch = false,\n isDisabled = false,\n isLabelHidden = false,\n isLoading = false,\n isOptional,\n isRequired,\n label,\n labelIcon,\n labelTooltip,\n onChange,\n options,\n placeholder = 'Select...',\n ref,\n renderOption: renderOptionProp,\n searchPlaceholder = 'Search...',\n size = 'md',\n startIcon,\n status,\n style,\n value,\n}: SelectProps): React.JSX.Element {\n const selectedValues = useMemo(\n () => (value == null ? new Set<string>() : new Set([value])),\n [value],\n );\n\n const commitOption = useCallback(\n (option: SelectOptionData): boolean => {\n if (option.isDisabled) {\n return false;\n }\n\n onChange(option.value);\n return true;\n },\n [onChange],\n );\n\n const {\n activeDescendantId,\n describedBy,\n descriptionID,\n filteredValues,\n getOptionId,\n handleKeyboardNavigation,\n handleOptionClick,\n handleOptionMouseEnter,\n highlightedValue,\n inputId,\n isInteractionDisabled,\n isOpen,\n listboxId,\n query,\n selectableOptions,\n setHighlightedValue,\n setIsOpen,\n setQuery,\n statusMessageID,\n triggerRef,\n } = useSelectListbox({\n clearQueryOnCommit: true,\n closeOnCommit: true,\n description,\n isDisabled,\n isLoading,\n onCommitOption: commitOption,\n options,\n selectedValues,\n status,\n });\n\n const selectedOption = useMemo(\n () => selectableOptions.find(option => option.value === value),\n [selectableOptions, value],\n );\n\n const renderOption = useCallback(\n (option: SelectOptionData): ReactNode => {\n if (!filteredValues.has(option.value)) {\n return null;\n }\n const isSelected = option.value === value;\n const isHighlighted = option.value === highlightedValue;\n return (\n <button\n aria-selected={isSelected}\n className={cx(\n styles.option,\n isSelected ? styles.optionSelected : undefined,\n isHighlighted ? styles.optionHighlighted : undefined,\n )}\n data-value={option.value}\n disabled={option.isDisabled}\n id={getOptionId(option.value)}\n key={option.value}\n onClick={handleOptionClick}\n onMouseEnter={handleOptionMouseEnter}\n role=\"option\"\n tabIndex={isHighlighted ? 0 : -1}\n type=\"button\">\n <span className={styles.optionContent}>\n {renderOptionProp == null ? (\n <>\n {option.icon != null ? (\n <span className={styles.iconSlot}>\n <Icon color=\"secondary\" icon={option.icon} size=\"sm\" />\n </span>\n ) : null}\n {option.label}\n </>\n ) : (\n renderOptionProp(option)\n )}\n </span>\n {isSelected ? (\n <span className={styles.check}>\n <Icon color=\"accent\" icon={Check} size=\"sm\" />\n </span>\n ) : null}\n </button>\n );\n },\n [\n filteredValues,\n getOptionId,\n handleOptionClick,\n handleOptionMouseEnter,\n highlightedValue,\n renderOptionProp,\n value,\n ],\n );\n\n const optionNodes = renderSelectListboxOptions({\n dividerClassName: styles.divider,\n inputId,\n options,\n renderOption,\n sectionHeadingClassName: styles.sectionHeading,\n });\n\n const menu = (\n <>\n {hasSearch ? (\n <input\n aria-activedescendant={activeDescendantId}\n aria-autocomplete=\"list\"\n aria-controls={listboxId}\n aria-label={`Search ${label}`}\n className={styles.search}\n onChange={event => {\n setQuery(event.target.value);\n setHighlightedValue(null);\n }}\n onKeyDown={handleKeyboardNavigation}\n placeholder={searchPlaceholder}\n type=\"search\"\n value={query}\n />\n ) : null}\n <div\n aria-label={`${label} options`}\n className={styles.menu}\n id={listboxId}\n role=\"listbox\">\n {optionNodes}\n </div>\n </>\n );\n\n const necessity = getNecessity(isOptional, isRequired);\n\n const trigger = (\n // eslint-disable-next-line jsx-a11y-x/click-events-have-key-events, jsx-a11y-x/no-static-element-interactions -- mouse clicks anywhere on the visual input delegate to the inner combobox button; keyboard handling stays on that button.\n <div\n className={cx(\n inputRecipe({\n size,\n status: status?.type,\n isDisabled,\n }),\n styles.wrapper,\n isInteractionDisabled ? styles.wrapperDisabled : undefined,\n )}\n onClick={() => {\n if (!isInteractionDisabled) {\n setIsOpen(currentIsOpen => !currentIsOpen);\n }\n }}\n ref={triggerRef}>\n {startIcon != null ? (\n <span className={styles.iconSlot}>\n <Icon color=\"secondary\" icon={startIcon} size=\"sm\" />\n </span>\n ) : null}\n <button\n aria-activedescendant={activeDescendantId}\n aria-busy={isLoading || undefined}\n aria-controls={listboxId}\n aria-describedby={describedBy}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n aria-invalid={status?.type === 'error' || undefined}\n className={styles.trigger}\n data-testid={dataTestId}\n disabled={isInteractionDisabled}\n id={inputId}\n onKeyDown={handleKeyboardNavigation}\n ref={ref}\n role=\"combobox\"\n type=\"button\">\n <span\n className={cx(\n styles.label,\n selectedOption == null ? styles.placeholder : undefined,\n )}>\n {selectedOption?.label ?? placeholder}\n </span>\n </button>\n {isLoading ? <Spinner size=\"sm\" /> : null}\n {hasClear && selectedOption != null && !isDisabled ? (\n <Button\n icon={X}\n isIconOnly\n label={`Clear ${label}`}\n onClick={event => {\n event.stopPropagation();\n onChange(null);\n }}\n size=\"sm\"\n variant=\"ghost\"\n />\n ) : null}\n <span className={styles.iconSlot}>\n <Icon icon={ChevronDown} size=\"sm\" />\n </span>\n </div>\n );\n\n return (\n <Field\n className={className}\n description={description}\n descriptionID={descriptionID}\n inputId={inputId}\n isDisabled={isDisabled}\n isLabelHidden={isLabelHidden}\n {...necessity}\n label={label}\n labelIcon={labelIcon}\n labelTooltip={labelTooltip}\n status={\n status == null ? undefined : {...status, messageID: statusMessageID}\n }\n style={style}>\n {trigger}\n <Popover\n anchorRef={triggerRef}\n content={menu}\n hasAutoFocus={hasSearch}\n hasCloseButton={false}\n isEnabled={false}\n isOpen={isOpen}\n onOpenChange={setIsOpen}\n />\n </Field>\n );\n}\n\nSelect.displayName = 'Select';\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Item} from '../Item';\n\nexport interface SelectOptionProps {\n /**\n * Additional CSS class names applied to the option layout.\n */\n className?: string;\n /**\n * Test ID applied to the option layout.\n */\n 'data-testid'?: string;\n /**\n * Supporting text displayed below the label.\n */\n description?: ReactNode;\n /**\n * Trailing content.\n */\n endContent?: ReactNode;\n /**\n * Icon displayed before the label.\n */\n icon?: IconComponent;\n /**\n * Primary label.\n */\n label: ReactNode;\n /**\n * Ref forwarded to the layout root.\n */\n ref?: Ref<HTMLSpanElement>;\n /**\n * Inline styles applied to the layout root.\n */\n style?: CSSProperties;\n}\n\nconst styles = {\n root: css({\n display: 'flex',\n minW: 0,\n p: 0,\n }),\n icon: css({\n display: 'inline-flex',\n flexShrink: 0,\n color: 'fg.muted',\n }),\n} as const;\n\n/**\n * Helper layout for custom Select option rendering.\n */\nexport function SelectOption({\n className,\n 'data-testid': dataTestId,\n description,\n endContent,\n icon,\n label,\n ref,\n style,\n}: SelectOptionProps): React.JSX.Element {\n return (\n <Item\n as=\"span\"\n className={cx(styles.root, className)}\n data-testid={dataTestId}\n description={description}\n endContent={endContent}\n label={label}\n ref={ref}\n startContent={\n icon != null ? (\n <span className={styles.icon}>\n <Icon color=\"secondary\" icon={icon} size=\"sm\" />\n </span>\n ) : null\n }\n style={style}\n />\n );\n}\n\nSelectOption.displayName = 'SelectOption';\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { TimeInput } from './chunk-
|
|
2
|
-
import { DateInput } from './chunk-
|
|
1
|
+
import { TimeInput } from './chunk-5Q5TJUHI.js';
|
|
2
|
+
import { DateInput } from './chunk-67VLK263.js';
|
|
3
3
|
import { plainDateIsEqual } from './chunk-QSEDH7T2.js';
|
|
4
4
|
import { getNecessity, Field } from './chunk-K6CQ45C2.js';
|
|
5
5
|
import { cx } from './chunk-PPNETWIP.js';
|
|
@@ -149,5 +149,5 @@ function DateTimeInput({
|
|
|
149
149
|
DateTimeInput.displayName = "DateTimeInput";
|
|
150
150
|
|
|
151
151
|
export { DateTimeInput };
|
|
152
|
-
//# sourceMappingURL=chunk-
|
|
153
|
-
//# sourceMappingURL=chunk-
|
|
152
|
+
//# sourceMappingURL=chunk-2YC7SMVF.js.map
|
|
153
|
+
//# sourceMappingURL=chunk-2YC7SMVF.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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","file":"chunk-MEBIRX2P.js","sourcesContent":["import {Temporal} from '@js-temporal/polyfill';\nimport {\n useCallback,\n useId,\n useMemo,\n type CSSProperties,\n type ReactNode,\n type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {plainDateIsEqual, type PlainDate} from '../../internal/plainDate';\nimport {DateInput} from '../DateInput';\nimport {\n Field,\n getNecessity,\n type FieldNecessity,\n type InputSize,\n type InputStatus,\n} from '../Field';\nimport type {IconComponent} from '../Icon';\nimport {TimeInput, type PlainTime} from '../TimeInput';\n\nexport type PlainDateTime = Temporal.PlainDateTime;\n\nexport type DateTimeInputProps = {\n /**\n * Additional CSS class names applied to the root element.\n */\n className?: string;\n /**\n * Test ID applied to the root element.\n */\n 'data-testid'?: string;\n /**\n * Returns true for dates that should be disabled.\n */\n getIsDateDisabled?: (date: PlainDate) => boolean;\n /**\n * Supporting text rendered below the label.\n */\n description?: ReactNode;\n /**\n * Whether to show the seconds field in the time input.\n * @default false\n */\n hasSeconds?: boolean;\n /**\n * Whether the input is disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Whether to visually hide the label.\n * @default false\n */\n isLabelHidden?: boolean;\n /**\n * Whether the input is in a loading state.\n * @default false\n */\n isLoading?: boolean;\n /**\n * Field label text.\n */\n label: string;\n /**\n * Icon shown before the label.\n */\n labelIcon?: IconComponent;\n /**\n * Tooltip content shown next to the label.\n */\n labelTooltip?: ReactNode;\n /**\n * Maximum selectable date-time.\n */\n max?: PlainDateTime;\n /**\n * Minimum selectable date-time.\n */\n min?: PlainDateTime;\n /**\n * Called when the selected date-time changes.\n */\n onChange: (value: PlainDateTime | undefined) => void;\n /**\n * Ref forwarded to the date input element.\n */\n ref?: Ref<HTMLInputElement>;\n /**\n * Visual size of the inputs.\n * @default 'md'\n */\n size?: InputSize;\n /**\n * Validation status displayed below the input.\n */\n status?: InputStatus;\n /**\n * Inline styles applied to the root element.\n */\n style?: CSSProperties;\n /**\n * Currently selected date-time.\n */\n value: PlainDateTime | undefined;\n} & FieldNecessity;\n\nconst styles = {\n row: css({\n display: 'grid',\n gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 0.75fr)',\n gap: '2',\n }),\n} as const;\n\nfunction splitDateTime(value: PlainDateTime | undefined): {\n date: PlainDate | undefined;\n time: PlainTime | undefined;\n} {\n if (value == null) {\n return {date: undefined, time: undefined};\n }\n return {\n date: value.toPlainDate(),\n time: value.toPlainTime(),\n };\n}\n\nfunction combineDateTime(\n date: PlainDate | undefined,\n time: PlainTime | undefined,\n): PlainDateTime | undefined {\n if (date == null && time == null) {\n return undefined;\n }\n const resolvedDate = date ?? Temporal.Now.plainDateISO();\n const resolvedTime = time ?? Temporal.Now.plainTimeISO();\n return resolvedDate.toPlainDateTime(resolvedTime);\n}\n\nfunction clampTime(\n time: PlainTime,\n min: PlainTime | undefined,\n max: PlainTime | undefined,\n): PlainTime {\n if (min != null && Temporal.PlainTime.compare(time, min) < 0) {\n return min;\n }\n if (max != null && Temporal.PlainTime.compare(time, max) > 0) {\n return max;\n }\n return time;\n}\n\n/**\n * A combined date and time input with calendar popover and time fields.\n */\nexport function DateTimeInput({\n label,\n value,\n onChange,\n min,\n max,\n getIsDateDisabled,\n hasSeconds = false,\n size = 'md',\n description,\n isLabelHidden = false,\n isOptional,\n isRequired,\n isDisabled = false,\n isLoading = false,\n status,\n labelIcon,\n labelTooltip,\n className,\n 'data-testid': dataTestId,\n style,\n ref,\n}: DateTimeInputProps): React.JSX.Element {\n const fieldId = useId();\n const {date, time} = useMemo(() => splitDateTime(value), [value]);\n const minParts = useMemo(() => splitDateTime(min), [min]);\n const maxParts = useMemo(() => splitDateTime(max), [max]);\n\n const handleDateChange = useCallback(\n (nextDate: PlainDate | undefined) => {\n if (nextDate == null || time == null) {\n onChange(combineDateTime(nextDate, time));\n return;\n }\n const effectiveTimeMin =\n min != null && nextDate.equals(min.toPlainDate())\n ? min.toPlainTime()\n : undefined;\n const effectiveTimeMax =\n max != null && nextDate.equals(max.toPlainDate())\n ? max.toPlainTime()\n : undefined;\n onChange(\n combineDateTime(\n nextDate,\n clampTime(time, effectiveTimeMin, effectiveTimeMax),\n ),\n );\n },\n [onChange, time, min, max],\n );\n const handleTimeChange = useCallback(\n (nextTime: PlainTime | undefined) =>\n onChange(combineDateTime(date, nextTime)),\n [onChange, date],\n );\n\n const necessity = getNecessity(isOptional, isRequired);\n\n return (\n <Field\n description={description}\n inputId={fieldId}\n isDisabled={isDisabled}\n isLabelHidden={isLabelHidden}\n {...necessity}\n label={label}\n labelIcon={labelIcon}\n labelTooltip={labelTooltip}\n status={status}>\n <div\n className={cx(styles.row, className)}\n data-testid={dataTestId}\n style={style}>\n <DateInput\n getIsDateDisabled={getIsDateDisabled}\n isDisabled={isDisabled}\n isLabelHidden\n isLoading={isLoading}\n label={`${label} date`}\n max={maxParts.date}\n min={minParts.date}\n onChange={handleDateChange}\n ref={ref}\n size={size}\n value={date}\n />\n <TimeInput\n hasSeconds={hasSeconds}\n isDisabled={isDisabled}\n isLabelHidden\n isLoading={isLoading}\n label={`${label} time`}\n max={\n date != null &&\n maxParts.date != null &&\n plainDateIsEqual(date, maxParts.date)\n ? maxParts.time\n : undefined\n }\n min={\n date != null &&\n minParts.date != null &&\n plainDateIsEqual(date, minParts.date)\n ? minParts.time\n : undefined\n }\n onChange={handleTimeChange}\n size={size}\n value={time}\n />\n </div>\n </Field>\n );\n}\n\nDateTimeInput.displayName = 'DateTimeInput';\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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","file":"chunk-2YC7SMVF.js","sourcesContent":["import {Temporal} from '@js-temporal/polyfill';\nimport {\n useCallback,\n useId,\n useMemo,\n type CSSProperties,\n type ReactNode,\n type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {plainDateIsEqual, type PlainDate} from '../../internal/plainDate';\nimport {DateInput} from '../DateInput';\nimport {\n Field,\n getNecessity,\n type FieldNecessity,\n type InputSize,\n type InputStatus,\n} from '../Field';\nimport type {IconComponent} from '../Icon';\nimport {TimeInput, type PlainTime} from '../TimeInput';\n\nexport type PlainDateTime = Temporal.PlainDateTime;\n\nexport type DateTimeInputProps = {\n /**\n * Additional CSS class names applied to the root element.\n */\n className?: string;\n /**\n * Test ID applied to the root element.\n */\n 'data-testid'?: string;\n /**\n * Returns true for dates that should be disabled.\n */\n getIsDateDisabled?: (date: PlainDate) => boolean;\n /**\n * Supporting text rendered below the label.\n */\n description?: ReactNode;\n /**\n * Whether to show the seconds field in the time input.\n * @default false\n */\n hasSeconds?: boolean;\n /**\n * Whether the input is disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Whether to visually hide the label.\n * @default false\n */\n isLabelHidden?: boolean;\n /**\n * Whether the input is in a loading state.\n * @default false\n */\n isLoading?: boolean;\n /**\n * Field label text.\n */\n label: string;\n /**\n * Icon shown before the label.\n */\n labelIcon?: IconComponent;\n /**\n * Tooltip content shown next to the label.\n */\n labelTooltip?: ReactNode;\n /**\n * Maximum selectable date-time.\n */\n max?: PlainDateTime;\n /**\n * Minimum selectable date-time.\n */\n min?: PlainDateTime;\n /**\n * Called when the selected date-time changes.\n */\n onChange: (value: PlainDateTime | undefined) => void;\n /**\n * Ref forwarded to the date input element.\n */\n ref?: Ref<HTMLInputElement>;\n /**\n * Visual size of the inputs.\n * @default 'md'\n */\n size?: InputSize;\n /**\n * Validation status displayed below the input.\n */\n status?: InputStatus;\n /**\n * Inline styles applied to the root element.\n */\n style?: CSSProperties;\n /**\n * Currently selected date-time.\n */\n value: PlainDateTime | undefined;\n} & FieldNecessity;\n\nconst styles = {\n row: css({\n display: 'grid',\n gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 0.75fr)',\n gap: '2',\n }),\n} as const;\n\nfunction splitDateTime(value: PlainDateTime | undefined): {\n date: PlainDate | undefined;\n time: PlainTime | undefined;\n} {\n if (value == null) {\n return {date: undefined, time: undefined};\n }\n return {\n date: value.toPlainDate(),\n time: value.toPlainTime(),\n };\n}\n\nfunction combineDateTime(\n date: PlainDate | undefined,\n time: PlainTime | undefined,\n): PlainDateTime | undefined {\n if (date == null && time == null) {\n return undefined;\n }\n const resolvedDate = date ?? Temporal.Now.plainDateISO();\n const resolvedTime = time ?? Temporal.Now.plainTimeISO();\n return resolvedDate.toPlainDateTime(resolvedTime);\n}\n\nfunction clampTime(\n time: PlainTime,\n min: PlainTime | undefined,\n max: PlainTime | undefined,\n): PlainTime {\n if (min != null && Temporal.PlainTime.compare(time, min) < 0) {\n return min;\n }\n if (max != null && Temporal.PlainTime.compare(time, max) > 0) {\n return max;\n }\n return time;\n}\n\n/**\n * A combined date and time input with calendar popover and time fields.\n */\nexport function DateTimeInput({\n label,\n value,\n onChange,\n min,\n max,\n getIsDateDisabled,\n hasSeconds = false,\n size = 'md',\n description,\n isLabelHidden = false,\n isOptional,\n isRequired,\n isDisabled = false,\n isLoading = false,\n status,\n labelIcon,\n labelTooltip,\n className,\n 'data-testid': dataTestId,\n style,\n ref,\n}: DateTimeInputProps): React.JSX.Element {\n const fieldId = useId();\n const {date, time} = useMemo(() => splitDateTime(value), [value]);\n const minParts = useMemo(() => splitDateTime(min), [min]);\n const maxParts = useMemo(() => splitDateTime(max), [max]);\n\n const handleDateChange = useCallback(\n (nextDate: PlainDate | undefined) => {\n if (nextDate == null || time == null) {\n onChange(combineDateTime(nextDate, time));\n return;\n }\n const effectiveTimeMin =\n min != null && nextDate.equals(min.toPlainDate())\n ? min.toPlainTime()\n : undefined;\n const effectiveTimeMax =\n max != null && nextDate.equals(max.toPlainDate())\n ? max.toPlainTime()\n : undefined;\n onChange(\n combineDateTime(\n nextDate,\n clampTime(time, effectiveTimeMin, effectiveTimeMax),\n ),\n );\n },\n [onChange, time, min, max],\n );\n const handleTimeChange = useCallback(\n (nextTime: PlainTime | undefined) =>\n onChange(combineDateTime(date, nextTime)),\n [onChange, date],\n );\n\n const necessity = getNecessity(isOptional, isRequired);\n\n return (\n <Field\n description={description}\n inputId={fieldId}\n isDisabled={isDisabled}\n isLabelHidden={isLabelHidden}\n {...necessity}\n label={label}\n labelIcon={labelIcon}\n labelTooltip={labelTooltip}\n status={status}>\n <div\n className={cx(styles.row, className)}\n data-testid={dataTestId}\n style={style}>\n <DateInput\n getIsDateDisabled={getIsDateDisabled}\n isDisabled={isDisabled}\n isLabelHidden\n isLoading={isLoading}\n label={`${label} date`}\n max={maxParts.date}\n min={minParts.date}\n onChange={handleDateChange}\n ref={ref}\n size={size}\n value={date}\n />\n <TimeInput\n hasSeconds={hasSeconds}\n isDisabled={isDisabled}\n isLabelHidden\n isLoading={isLoading}\n label={`${label} time`}\n max={\n date != null &&\n maxParts.date != null &&\n plainDateIsEqual(date, maxParts.date)\n ? maxParts.time\n : undefined\n }\n min={\n date != null &&\n minParts.date != null &&\n plainDateIsEqual(date, minParts.date)\n ? minParts.time\n : undefined\n }\n onChange={handleTimeChange}\n size={size}\n value={time}\n />\n </div>\n </Field>\n );\n}\n\nDateTimeInput.displayName = 'DateTimeInput';\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkMAL4D4LR_cjs = require('./chunk-MAL4D4LR.cjs');
|
|
4
4
|
var chunkLFRTNC7M_cjs = require('./chunk-LFRTNC7M.cjs');
|
|
5
5
|
var chunk6SHL7FYO_cjs = require('./chunk-6SHL7FYO.cjs');
|
|
6
6
|
var chunk4TIAKZ4Q_cjs = require('./chunk-4TIAKZ4Q.cjs');
|
|
@@ -429,7 +429,7 @@ function TabMenu({
|
|
|
429
429
|
focusMenuItem(event, nextIndex);
|
|
430
430
|
};
|
|
431
431
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
432
|
-
|
|
432
|
+
chunkMAL4D4LR_cjs.Popover,
|
|
433
433
|
{
|
|
434
434
|
content: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles3.menu, children: options.map((option) => {
|
|
435
435
|
const isSelected = option.value === context.value;
|
|
@@ -521,5 +521,5 @@ exports.TabMenu = TabMenu;
|
|
|
521
521
|
exports.Tabs = Tabs;
|
|
522
522
|
exports.TabsContext = TabsContext;
|
|
523
523
|
exports.useTabsContext = useTabsContext;
|
|
524
|
-
//# sourceMappingURL=chunk-
|
|
525
|
-
//# sourceMappingURL=chunk-
|
|
524
|
+
//# sourceMappingURL=chunk-32G54PL3.cjs.map
|
|
525
|
+
//# sourceMappingURL=chunk-32G54PL3.cjs.map
|