silver-ui 0.6.0 → 0.7.1
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-FQN22DO5.js → chunk-223UOU3H.js} +5 -5
- package/dist/{chunk-FQN22DO5.js.map → chunk-223UOU3H.js.map} +1 -1
- package/dist/{chunk-DYMZ4DLN.cjs → chunk-2AOR4EVA.cjs} +8 -8
- package/dist/{chunk-DYMZ4DLN.cjs.map → chunk-2AOR4EVA.cjs.map} +1 -1
- package/dist/{chunk-UT45YVPI.js → chunk-2KLTODOC.js} +7 -7
- package/dist/{chunk-UT45YVPI.js.map → chunk-2KLTODOC.js.map} +1 -1
- package/dist/chunk-2N3PIXZ5.cjs +165 -0
- package/dist/chunk-2N3PIXZ5.cjs.map +1 -0
- package/dist/{chunk-GUUCIG7U.js → chunk-3PCXFOOS.js} +16 -10
- package/dist/chunk-3PCXFOOS.js.map +1 -0
- package/dist/{chunk-ISWZQUVA.cjs → chunk-4MIIXRZN.cjs} +12 -12
- package/dist/{chunk-ISWZQUVA.cjs.map → chunk-4MIIXRZN.cjs.map} +1 -1
- package/dist/{chunk-JR353MN5.js → chunk-4NPVIEWF.js} +6 -6
- package/dist/{chunk-JR353MN5.js.map → chunk-4NPVIEWF.js.map} +1 -1
- package/dist/{chunk-WM7NEOME.js → chunk-4UYMGEBF.js} +6 -6
- package/dist/{chunk-WM7NEOME.js.map → chunk-4UYMGEBF.js.map} +1 -1
- package/dist/{chunk-WHDDBOJN.js → chunk-54B36CSW.js} +4 -4
- package/dist/{chunk-WHDDBOJN.js.map → chunk-54B36CSW.js.map} +1 -1
- package/dist/{chunk-NXTDP6AX.js → chunk-5GSRIOXE.js} +14 -2
- package/dist/chunk-5GSRIOXE.js.map +1 -0
- package/dist/{chunk-FIOCTAXT.js → chunk-6KG76KUZ.js} +3 -3
- package/dist/{chunk-FIOCTAXT.js.map → chunk-6KG76KUZ.js.map} +1 -1
- package/dist/{chunk-RU7JPU7V.js → chunk-6KGF66TR.js} +3 -3
- package/dist/{chunk-RU7JPU7V.js.map → chunk-6KGF66TR.js.map} +1 -1
- package/dist/{chunk-BDFNEQR3.js → chunk-6R2UZNVE.js} +6 -6
- package/dist/{chunk-BDFNEQR3.js.map → chunk-6R2UZNVE.js.map} +1 -1
- package/dist/{chunk-AFJEAYR4.cjs → chunk-6SFMORQF.cjs} +5 -5
- package/dist/{chunk-AFJEAYR4.cjs.map → chunk-6SFMORQF.cjs.map} +1 -1
- package/dist/{chunk-XTLNUYCK.js → chunk-6SKIBUCY.js} +3 -3
- package/dist/{chunk-XTLNUYCK.js.map → chunk-6SKIBUCY.js.map} +1 -1
- package/dist/{chunk-VRQ66IBW.cjs → chunk-6SMVH3ON.cjs} +6 -6
- package/dist/{chunk-VRQ66IBW.cjs.map → chunk-6SMVH3ON.cjs.map} +1 -1
- package/dist/{chunk-WINDLDH3.cjs → chunk-6ZPHID26.cjs} +9 -9
- package/dist/{chunk-WINDLDH3.cjs.map → chunk-6ZPHID26.cjs.map} +1 -1
- package/dist/{chunk-PHFJBQXU.cjs → chunk-76GVUEFH.cjs} +8 -8
- package/dist/{chunk-PHFJBQXU.cjs.map → chunk-76GVUEFH.cjs.map} +1 -1
- package/dist/chunk-7VUDE5BI.js +91 -0
- package/dist/chunk-7VUDE5BI.js.map +1 -0
- package/dist/{chunk-4JJFQZVY.js → chunk-7WQW7H3D.js} +12 -12
- package/dist/{chunk-4JJFQZVY.js.map → chunk-7WQW7H3D.js.map} +1 -1
- package/dist/{chunk-HKGFMJFK.js → chunk-A4QLLTMD.js} +16 -16
- package/dist/{chunk-HKGFMJFK.js.map → chunk-A4QLLTMD.js.map} +1 -1
- package/dist/{chunk-DFEAB7Z3.cjs → chunk-AC4E3WQA.cjs} +10 -10
- package/dist/{chunk-DFEAB7Z3.cjs.map → chunk-AC4E3WQA.cjs.map} +1 -1
- package/dist/{chunk-DWZR2AGT.js → chunk-AO4RVSCG.js} +4 -4
- package/dist/{chunk-DWZR2AGT.js.map → chunk-AO4RVSCG.js.map} +1 -1
- package/dist/{chunk-KCI4I42U.js → chunk-AX653SYJ.js} +7 -7
- package/dist/{chunk-KCI4I42U.js.map → chunk-AX653SYJ.js.map} +1 -1
- package/dist/{chunk-P7TSM63O.js → chunk-AXTX3IOR.js} +3 -3
- package/dist/{chunk-P7TSM63O.js.map → chunk-AXTX3IOR.js.map} +1 -1
- package/dist/{chunk-6FC5YF2O.cjs → chunk-BPAZTKMC.cjs} +8 -8
- package/dist/{chunk-6FC5YF2O.cjs.map → chunk-BPAZTKMC.cjs.map} +1 -1
- package/dist/{chunk-CNDUYO7I.cjs → chunk-BYV7NXC5.cjs} +5 -5
- package/dist/{chunk-CNDUYO7I.cjs.map → chunk-BYV7NXC5.cjs.map} +1 -1
- package/dist/{chunk-MHAXS4GO.cjs → chunk-CKDB7QNT.cjs} +14 -2
- package/dist/chunk-CKDB7QNT.cjs.map +1 -0
- package/dist/{chunk-U5HW5P7Q.cjs → chunk-CWZCBYVZ.cjs} +11 -11
- package/dist/{chunk-U5HW5P7Q.cjs.map → chunk-CWZCBYVZ.cjs.map} +1 -1
- package/dist/{chunk-P5LMEANN.cjs → chunk-DTNIUZ3C.cjs} +5 -5
- package/dist/{chunk-P5LMEANN.cjs.map → chunk-DTNIUZ3C.cjs.map} +1 -1
- package/dist/{chunk-NG2H3PYA.cjs → chunk-DUGGZUJP.cjs} +11 -11
- package/dist/{chunk-NG2H3PYA.cjs.map → chunk-DUGGZUJP.cjs.map} +1 -1
- package/dist/{chunk-5JROXZBG.cjs → chunk-DVCDAKPK.cjs} +4 -4
- package/dist/{chunk-5JROXZBG.cjs.map → chunk-DVCDAKPK.cjs.map} +1 -1
- package/dist/{chunk-45OSUS5A.js → chunk-E6AKSBSP.js} +6 -6
- package/dist/{chunk-45OSUS5A.js.map → chunk-E6AKSBSP.js.map} +1 -1
- package/dist/{chunk-HMJINNXZ.js → chunk-EBV3EX3J.js} +3 -3
- package/dist/{chunk-HMJINNXZ.js.map → chunk-EBV3EX3J.js.map} +1 -1
- package/dist/{chunk-UZGPFPIV.cjs → chunk-EQFSDFV2.cjs} +15 -15
- package/dist/{chunk-UZGPFPIV.cjs.map → chunk-EQFSDFV2.cjs.map} +1 -1
- package/dist/chunk-ESWYWWY2.js +162 -0
- package/dist/chunk-ESWYWWY2.js.map +1 -0
- package/dist/{chunk-G5PU2EL2.js → chunk-FHUOUARL.js} +4 -4
- package/dist/{chunk-G5PU2EL2.js.map → chunk-FHUOUARL.js.map} +1 -1
- package/dist/{chunk-RXKDRZF3.js → chunk-FTNEAX24.js} +3 -3
- package/dist/{chunk-RXKDRZF3.js.map → chunk-FTNEAX24.js.map} +1 -1
- package/dist/{chunk-TQDJVPHP.js → chunk-FUU3I22W.js} +3 -3
- package/dist/{chunk-TQDJVPHP.js.map → chunk-FUU3I22W.js.map} +1 -1
- package/dist/{chunk-KG7RHDVX.js → chunk-GFMQIR5U.js} +7 -7
- package/dist/{chunk-KG7RHDVX.js.map → chunk-GFMQIR5U.js.map} +1 -1
- package/dist/{chunk-ERVWZILR.js → chunk-GKYGZWSQ.js} +3 -3
- package/dist/{chunk-ERVWZILR.js.map → chunk-GKYGZWSQ.js.map} +1 -1
- package/dist/{chunk-CABYRYVA.cjs → chunk-GLFWSLJB.cjs} +6 -6
- package/dist/{chunk-CABYRYVA.cjs.map → chunk-GLFWSLJB.cjs.map} +1 -1
- package/dist/{chunk-JHMUMJF3.js → chunk-GTZQT6MK.js} +4 -4
- package/dist/{chunk-JHMUMJF3.js.map → chunk-GTZQT6MK.js.map} +1 -1
- package/dist/{chunk-WAWHHXSR.js → chunk-HEF53COU.js} +3 -3
- package/dist/{chunk-WAWHHXSR.js.map → chunk-HEF53COU.js.map} +1 -1
- package/dist/{chunk-DPSAPA6B.js → chunk-I2DXEPDF.js} +5 -5
- package/dist/{chunk-DPSAPA6B.js.map → chunk-I2DXEPDF.js.map} +1 -1
- package/dist/{chunk-NFEL5GNX.cjs → chunk-I4XYOJJS.cjs} +9 -9
- package/dist/{chunk-NFEL5GNX.cjs.map → chunk-I4XYOJJS.cjs.map} +1 -1
- package/dist/{chunk-U4L75VA4.cjs → chunk-IE7GWY4E.cjs} +40 -40
- package/dist/{chunk-U4L75VA4.cjs.map → chunk-IE7GWY4E.cjs.map} +1 -1
- package/dist/{chunk-TNYAYXKC.cjs → chunk-IH6DJWYH.cjs} +35 -35
- package/dist/{chunk-TNYAYXKC.cjs.map → chunk-IH6DJWYH.cjs.map} +1 -1
- package/dist/{chunk-4EUUZQAM.js → chunk-J4MQQ4K5.js} +5 -5
- package/dist/{chunk-4EUUZQAM.js.map → chunk-J4MQQ4K5.js.map} +1 -1
- package/dist/{chunk-BGLT7XH6.js → chunk-JFLU2X5Q.js} +5 -5
- package/dist/{chunk-BGLT7XH6.js.map → chunk-JFLU2X5Q.js.map} +1 -1
- package/dist/{chunk-K2WT7A64.js → chunk-JMVYWHJ7.js} +3 -3
- package/dist/{chunk-K2WT7A64.js.map → chunk-JMVYWHJ7.js.map} +1 -1
- package/dist/{chunk-VREW3BK6.cjs → chunk-JTPVAZE6.cjs} +11 -11
- package/dist/{chunk-VREW3BK6.cjs.map → chunk-JTPVAZE6.cjs.map} +1 -1
- package/dist/{chunk-FLDTPAG4.cjs → chunk-JWMS6LHN.cjs} +6 -6
- package/dist/{chunk-FLDTPAG4.cjs.map → chunk-JWMS6LHN.cjs.map} +1 -1
- package/dist/{chunk-INQ34SVW.cjs → chunk-KLPVBJGZ.cjs} +5 -5
- package/dist/{chunk-INQ34SVW.cjs.map → chunk-KLPVBJGZ.cjs.map} +1 -1
- package/dist/{chunk-LLSWAAFH.js → chunk-L747HIHG.js} +4 -4
- package/dist/{chunk-LLSWAAFH.js.map → chunk-L747HIHG.js.map} +1 -1
- package/dist/{chunk-7TJ2O56S.js → chunk-LBOWHXOF.js} +23 -5
- package/dist/chunk-LBOWHXOF.js.map +1 -0
- package/dist/{chunk-H7VK36SZ.cjs → chunk-LTHPJRFK.cjs} +9 -8
- package/dist/chunk-LTHPJRFK.cjs.map +1 -0
- package/dist/{chunk-6ZV7HGZT.cjs → chunk-LWB2CTX6.cjs} +4 -4
- package/dist/{chunk-6ZV7HGZT.cjs.map → chunk-LWB2CTX6.cjs.map} +1 -1
- package/dist/{chunk-ENVDR66N.cjs → chunk-MJHEPDDX.cjs} +17 -17
- package/dist/{chunk-ENVDR66N.cjs.map → chunk-MJHEPDDX.cjs.map} +1 -1
- package/dist/{chunk-ZSB43DEI.js → chunk-MUXUHIIV.js} +5 -5
- package/dist/{chunk-ZSB43DEI.js.map → chunk-MUXUHIIV.js.map} +1 -1
- package/dist/{chunk-RAMDISDK.cjs → chunk-MYSLJWCW.cjs} +6 -6
- package/dist/{chunk-RAMDISDK.cjs.map → chunk-MYSLJWCW.cjs.map} +1 -1
- package/dist/{chunk-WEXTGWRE.js → chunk-N6C37HXD.js} +4 -4
- package/dist/{chunk-WEXTGWRE.js.map → chunk-N6C37HXD.js.map} +1 -1
- package/dist/{chunk-NW36BN7N.cjs → chunk-NGNVNRAZ.cjs} +17 -17
- package/dist/{chunk-NW36BN7N.cjs.map → chunk-NGNVNRAZ.cjs.map} +1 -1
- package/dist/{chunk-7EE6DCRP.cjs → chunk-NMC7QG2X.cjs} +14 -14
- package/dist/{chunk-7EE6DCRP.cjs.map → chunk-NMC7QG2X.cjs.map} +1 -1
- package/dist/{chunk-6I5QWA6A.js → chunk-NSWKBWPP.js} +6 -5
- package/dist/chunk-NSWKBWPP.js.map +1 -0
- package/dist/{chunk-2SN3KVWF.js → chunk-NYOZQE6P.js} +4 -4
- package/dist/{chunk-2SN3KVWF.js.map → chunk-NYOZQE6P.js.map} +1 -1
- package/dist/{chunk-CZUMVOPH.js → chunk-O3UT5D57.js} +19 -15
- package/dist/chunk-O3UT5D57.js.map +1 -0
- package/dist/{chunk-GU65FGY6.cjs → chunk-OCYZKZ24.cjs} +4 -4
- package/dist/{chunk-GU65FGY6.cjs.map → chunk-OCYZKZ24.cjs.map} +1 -1
- package/dist/{chunk-M64WMYYV.js → chunk-OP6WQYYP.js} +5 -5
- package/dist/{chunk-M64WMYYV.js.map → chunk-OP6WQYYP.js.map} +1 -1
- package/dist/{chunk-SKZNSOB7.cjs → chunk-OX2FNKIV.cjs} +6 -6
- package/dist/{chunk-SKZNSOB7.cjs.map → chunk-OX2FNKIV.cjs.map} +1 -1
- package/dist/{chunk-C6EWA3H2.js → chunk-PQXPYN23.js} +6 -6
- package/dist/{chunk-C6EWA3H2.js.map → chunk-PQXPYN23.js.map} +1 -1
- package/dist/{chunk-K2V3IOAX.js → chunk-QM7NQK2K.js} +3 -3
- package/dist/{chunk-K2V3IOAX.js.map → chunk-QM7NQK2K.js.map} +1 -1
- package/dist/chunk-RNUQWYJJ.cjs +93 -0
- package/dist/chunk-RNUQWYJJ.cjs.map +1 -0
- package/dist/{chunk-DK6USFZP.cjs → chunk-RUQODCTW.cjs} +16 -16
- package/dist/{chunk-DK6USFZP.cjs.map → chunk-RUQODCTW.cjs.map} +1 -1
- package/dist/{chunk-R3ZS6FU6.cjs → chunk-RX2FXCIH.cjs} +6 -6
- package/dist/{chunk-R3ZS6FU6.cjs.map → chunk-RX2FXCIH.cjs.map} +1 -1
- package/dist/{chunk-J4LJXCXB.cjs → chunk-SY2A4K6P.cjs} +9 -9
- package/dist/{chunk-J4LJXCXB.cjs.map → chunk-SY2A4K6P.cjs.map} +1 -1
- package/dist/{chunk-PNM7MPUX.cjs → chunk-U7QJJ3NR.cjs} +8 -8
- package/dist/{chunk-PNM7MPUX.cjs.map → chunk-U7QJJ3NR.cjs.map} +1 -1
- package/dist/{chunk-H5VMHDRD.cjs → chunk-UJDHRILS.cjs} +24 -6
- package/dist/chunk-UJDHRILS.cjs.map +1 -0
- package/dist/{chunk-EVCQCZMM.cjs → chunk-UNS7OCEA.cjs} +5 -5
- package/dist/{chunk-EVCQCZMM.cjs.map → chunk-UNS7OCEA.cjs.map} +1 -1
- package/dist/{chunk-QTOFQB26.cjs → chunk-UR5EWWWL.cjs} +11 -11
- package/dist/{chunk-QTOFQB26.cjs.map → chunk-UR5EWWWL.cjs.map} +1 -1
- package/dist/{chunk-SEDUAMDW.js → chunk-USEA7DB5.js} +3 -3
- package/dist/{chunk-SEDUAMDW.js.map → chunk-USEA7DB5.js.map} +1 -1
- package/dist/{chunk-LDYUVGD4.js → chunk-UUVI3TYW.js} +6 -6
- package/dist/{chunk-LDYUVGD4.js.map → chunk-UUVI3TYW.js.map} +1 -1
- package/dist/{chunk-QYZXTIB2.cjs → chunk-UW3KCCBT.cjs} +4 -4
- package/dist/{chunk-QYZXTIB2.cjs.map → chunk-UW3KCCBT.cjs.map} +1 -1
- package/dist/{chunk-PU4PBI3H.js → chunk-V5XVXQWE.js} +4 -4
- package/dist/{chunk-PU4PBI3H.js.map → chunk-V5XVXQWE.js.map} +1 -1
- package/dist/{chunk-GJKRSQEA.cjs → chunk-VCM4MR7N.cjs} +51 -47
- package/dist/chunk-VCM4MR7N.cjs.map +1 -0
- package/dist/{chunk-LF6I2B7G.js → chunk-VEQ5H765.js} +8 -8
- package/dist/{chunk-LF6I2B7G.js.map → chunk-VEQ5H765.js.map} +1 -1
- package/dist/{chunk-HPOURAKV.cjs → chunk-VULMEKZZ.cjs} +9 -9
- package/dist/{chunk-HPOURAKV.cjs.map → chunk-VULMEKZZ.cjs.map} +1 -1
- package/dist/{chunk-TVWU4XBL.cjs → chunk-VWG54F6X.cjs} +6 -6
- package/dist/{chunk-TVWU4XBL.cjs.map → chunk-VWG54F6X.cjs.map} +1 -1
- package/dist/{chunk-DAO4UXR4.js → chunk-WG4NNC3P.js} +3 -3
- package/dist/{chunk-DAO4UXR4.js.map → chunk-WG4NNC3P.js.map} +1 -1
- package/dist/{chunk-ZUAWNT66.cjs → chunk-WIFMXZIN.cjs} +14 -14
- package/dist/{chunk-ZUAWNT66.cjs.map → chunk-WIFMXZIN.cjs.map} +1 -1
- package/dist/{chunk-VXOIOPGZ.cjs → chunk-WOVSJHY6.cjs} +5 -5
- package/dist/{chunk-VXOIOPGZ.cjs.map → chunk-WOVSJHY6.cjs.map} +1 -1
- package/dist/{chunk-QHXI2QDK.js → chunk-X2P5SPGB.js} +3 -3
- package/dist/{chunk-QHXI2QDK.js.map → chunk-X2P5SPGB.js.map} +1 -1
- package/dist/{chunk-JC66FRQX.js → chunk-XUCLNECV.js} +3 -3
- package/dist/{chunk-JC66FRQX.js.map → chunk-XUCLNECV.js.map} +1 -1
- package/dist/{chunk-VW52NVGM.cjs → chunk-Y2GYPMLW.cjs} +5 -5
- package/dist/{chunk-VW52NVGM.cjs.map → chunk-Y2GYPMLW.cjs.map} +1 -1
- package/dist/{chunk-ATK3F3MC.js → chunk-YAQB3UMC.js} +4 -4
- package/dist/{chunk-ATK3F3MC.js.map → chunk-YAQB3UMC.js.map} +1 -1
- package/dist/{chunk-B5QX6KGJ.js → chunk-YGESCFX2.js} +3 -3
- package/dist/{chunk-B5QX6KGJ.js.map → chunk-YGESCFX2.js.map} +1 -1
- package/dist/{chunk-FWBYCTUB.cjs → chunk-YOAFVMEN.cjs} +13 -13
- package/dist/{chunk-FWBYCTUB.cjs.map → chunk-YOAFVMEN.cjs.map} +1 -1
- package/dist/{chunk-PYJX2SBC.cjs → chunk-YQIDUJW2.cjs} +5 -5
- package/dist/{chunk-PYJX2SBC.cjs.map → chunk-YQIDUJW2.cjs.map} +1 -1
- package/dist/{chunk-UMS46KF4.cjs → chunk-YQVWDHP4.cjs} +7 -7
- package/dist/{chunk-UMS46KF4.cjs.map → chunk-YQVWDHP4.cjs.map} +1 -1
- package/dist/{chunk-UYZQGHFI.js → chunk-YRJYWTVG.js} +7 -7
- package/dist/{chunk-UYZQGHFI.js.map → chunk-YRJYWTVG.js.map} +1 -1
- package/dist/{chunk-MHEPDHL5.cjs → chunk-ZNAGK36T.cjs} +9 -9
- package/dist/{chunk-MHEPDHL5.cjs.map → chunk-ZNAGK36T.cjs.map} +1 -1
- package/dist/{chunk-3IDT3PZC.cjs → chunk-ZW2ZOEYM.cjs} +19 -13
- package/dist/chunk-ZW2ZOEYM.cjs.map +1 -0
- package/dist/components/Alert/index.cjs +5 -5
- package/dist/components/Alert/index.js +4 -4
- package/dist/components/AlertDialog/index.cjs +7 -7
- package/dist/components/AlertDialog/index.js +5 -5
- package/dist/components/AppShell/index.cjs +12 -12
- package/dist/components/AppShell/index.js +9 -9
- package/dist/components/AutocompleteInput/index.cjs +10 -10
- package/dist/components/AutocompleteInput/index.js +6 -6
- package/dist/components/Badge/Badge.d.ts.map +1 -1
- package/dist/components/Badge/Badge.recipe.d.ts +75 -41
- package/dist/components/Badge/Badge.recipe.d.ts.map +1 -1
- package/dist/components/Badge/index.cjs +3 -2
- package/dist/components/Badge/index.js +2 -1
- package/dist/components/Button/index.cjs +4 -4
- package/dist/components/Button/index.js +3 -3
- package/dist/components/Calendar/index.cjs +5 -5
- package/dist/components/Calendar/index.js +4 -4
- package/dist/components/CheckboxGroup/CheckboxGroup.d.ts +83 -0
- package/dist/components/CheckboxGroup/CheckboxGroup.d.ts.map +1 -0
- package/dist/components/CheckboxGroup/CheckboxGroup.recipe.d.ts +17 -0
- package/dist/components/CheckboxGroup/CheckboxGroup.recipe.d.ts.map +1 -0
- package/dist/components/CheckboxGroup/CheckboxGroupContext.d.ts +13 -0
- package/dist/components/CheckboxGroup/CheckboxGroupContext.d.ts.map +1 -0
- package/dist/components/CheckboxGroup/CheckboxGroupItem.d.ts +58 -0
- package/dist/components/CheckboxGroup/CheckboxGroupItem.d.ts.map +1 -0
- package/dist/components/CheckboxGroup/index.cjs +35 -0
- package/dist/components/CheckboxGroup/index.cjs.map +1 -0
- package/dist/components/CheckboxGroup/index.d.ts +4 -0
- package/dist/components/CheckboxGroup/index.d.ts.map +1 -0
- package/dist/components/CheckboxGroup/index.js +22 -0
- package/dist/components/CheckboxGroup/index.js.map +1 -0
- package/dist/components/CheckboxInput/CheckboxInput.d.ts +11 -2
- package/dist/components/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/components/CheckboxInput/CheckboxInput.recipe.d.ts +6 -0
- package/dist/components/CheckboxInput/CheckboxInput.recipe.d.ts.map +1 -1
- package/dist/components/CheckboxInput/index.cjs +5 -5
- package/dist/components/CheckboxInput/index.js +4 -4
- package/dist/components/CodeBlock/index.cjs +5 -5
- package/dist/components/CodeBlock/index.js +4 -4
- package/dist/components/ContextMenu/index.cjs +9 -9
- package/dist/components/ContextMenu/index.js +7 -7
- package/dist/components/DateInput/index.cjs +8 -8
- package/dist/components/DateInput/index.js +7 -7
- package/dist/components/DateRangeInput/index.cjs +8 -8
- package/dist/components/DateRangeInput/index.js +7 -7
- package/dist/components/DateTimeInput/index.cjs +10 -10
- package/dist/components/DateTimeInput/index.js +9 -9
- package/dist/components/DropdownMenu/index.cjs +10 -10
- package/dist/components/DropdownMenu/index.js +6 -6
- package/dist/components/EmptyState/index.cjs +3 -3
- package/dist/components/EmptyState/index.js +2 -2
- package/dist/components/Field/index.cjs +4 -4
- package/dist/components/Field/index.js +2 -2
- package/dist/components/FileInput/index.cjs +6 -6
- package/dist/components/FileInput/index.js +5 -5
- package/dist/components/InputGroup/index.cjs +7 -7
- package/dist/components/InputGroup/index.js +3 -3
- package/dist/components/Item/index.cjs +3 -3
- package/dist/components/Item/index.js +2 -2
- package/dist/components/Layout/LayoutHeader.d.ts +7 -1
- package/dist/components/Layout/LayoutHeader.d.ts.map +1 -1
- package/dist/components/Layout/index.cjs +9 -9
- package/dist/components/Layout/index.js +4 -4
- package/dist/components/Lightbox/index.cjs +6 -6
- package/dist/components/Lightbox/index.js +4 -4
- package/dist/components/List/index.cjs +5 -5
- package/dist/components/List/index.js +3 -3
- package/dist/components/MetadataList/index.cjs +4 -4
- package/dist/components/MetadataList/index.js +2 -2
- package/dist/components/MultiSelect/index.cjs +8 -8
- package/dist/components/MultiSelect/index.js +7 -7
- package/dist/components/NumberInput/index.cjs +7 -7
- package/dist/components/NumberInput/index.js +6 -6
- package/dist/components/Pagination/index.cjs +5 -5
- package/dist/components/Pagination/index.js +4 -4
- package/dist/components/PasswordInput/index.cjs +8 -8
- package/dist/components/PasswordInput/index.js +7 -7
- package/dist/components/Popover/index.cjs +6 -6
- package/dist/components/Popover/index.js +4 -4
- package/dist/components/RadioGroup/index.cjs +6 -6
- package/dist/components/RadioGroup/index.js +4 -4
- package/dist/components/Schedule/TimeGridView.d.ts.map +1 -1
- package/dist/components/Schedule/index.cjs +25 -25
- package/dist/components/Schedule/index.js +10 -10
- package/dist/components/SearchFilterInput/index.cjs +24 -24
- package/dist/components/SearchFilterInput/index.js +16 -16
- package/dist/components/Select/index.cjs +9 -9
- package/dist/components/Select/index.js +7 -7
- package/dist/components/SideNav/index.cjs +12 -12
- package/dist/components/SideNav/index.js +6 -6
- package/dist/components/Slider/index.cjs +4 -4
- package/dist/components/Slider/index.js +3 -3
- package/dist/components/Spinner/index.cjs +3 -3
- package/dist/components/Spinner/index.js +2 -2
- package/dist/components/SplitButton/index.cjs +8 -8
- package/dist/components/SplitButton/index.js +7 -7
- package/dist/components/Stepper/index.cjs +3 -3
- package/dist/components/Stepper/index.js +2 -2
- package/dist/components/Switch/index.cjs +4 -4
- package/dist/components/Switch/index.js +3 -3
- package/dist/components/Table/index.cjs +47 -47
- package/dist/components/Table/index.js +21 -21
- package/dist/components/Tabs/index.cjs +10 -10
- package/dist/components/Tabs/index.js +5 -5
- package/dist/components/TagsInput/index.cjs +8 -8
- package/dist/components/TagsInput/index.js +7 -7
- package/dist/components/Text/index.cjs +3 -3
- package/dist/components/Text/index.js +1 -1
- package/dist/components/TextArea/index.cjs +5 -5
- package/dist/components/TextArea/index.js +4 -4
- package/dist/components/TextInput/index.cjs +7 -7
- package/dist/components/TextInput/index.js +6 -6
- package/dist/components/Thumbnail/index.cjs +5 -5
- package/dist/components/Thumbnail/index.js +4 -4
- package/dist/components/TimeInput/index.cjs +6 -6
- package/dist/components/TimeInput/index.js +5 -5
- package/dist/components/Toast/ToastViewport.d.ts.map +1 -1
- package/dist/components/Toast/index.cjs +7 -7
- package/dist/components/Toast/index.js +4 -4
- package/dist/components/ToggleButton/index.cjs +5 -5
- package/dist/components/ToggleButton/index.js +3 -3
- package/dist/components/TopNav/index.cjs +10 -10
- package/dist/components/TopNav/index.js +5 -5
- package/dist/index.cjs +215 -206
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +51 -50
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/dist/chunk-3IDT3PZC.cjs.map +0 -1
- package/dist/chunk-6I5QWA6A.js.map +0 -1
- package/dist/chunk-7TJ2O56S.js.map +0 -1
- package/dist/chunk-CZUMVOPH.js.map +0 -1
- package/dist/chunk-GJKRSQEA.cjs.map +0 -1
- package/dist/chunk-GUUCIG7U.js.map +0 -1
- package/dist/chunk-H2EMKCWT.js +0 -78
- package/dist/chunk-H2EMKCWT.js.map +0 -1
- package/dist/chunk-H5VMHDRD.cjs.map +0 -1
- package/dist/chunk-H7VK36SZ.cjs.map +0 -1
- package/dist/chunk-KUXFEAT4.cjs +0 -80
- package/dist/chunk-KUXFEAT4.cjs.map +0 -1
- package/dist/chunk-MHAXS4GO.cjs.map +0 -1
- package/dist/chunk-NXTDP6AX.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/InputGroup/InputGroup.recipe.ts","../src/components/InputGroup/InputGroupContext.ts","../src/components/InputGroup/InputGroup.tsx","../src/components/InputGroup/InputGroupText.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-FIOCTAXT.js","sourcesContent":["import type {InputSize, InputStatusType} from 'components/Field';\nimport {cva, type RecipeVariantProps} from 'styled-system/css';\n\nconst addonSelector = '& > [data-silver-input-group-text]';\nconst controlSelector = '& > :not([data-silver-input-group-text])';\nconst itemSelector = '& > *';\n\nconst statusStyles = {\n error: {\n borderColor: 'status.error.border',\n _focusWithin: {borderColor: 'status.error.border'},\n },\n success: {\n borderColor: 'status.success.border',\n _focusWithin: {borderColor: 'status.success.border'},\n },\n warning: {\n borderColor: 'status.warning.border',\n _focusWithin: {borderColor: 'status.warning.border'},\n },\n} satisfies Record<InputStatusType, object>;\n\nexport const inputGroupRecipe = cva({\n base: {\n display: 'inline-flex',\n alignItems: 'stretch',\n isolation: 'isolate',\n maxW: 'full',\n [itemSelector]: {\n position: 'relative',\n borderRadius: 0,\n },\n [`${itemSelector}:not(:first-child)`]: {\n marginInlineStart: '-1px',\n },\n [`${itemSelector}:first-child`]: {\n borderStartStartRadius: 'md',\n borderEndStartRadius: 'md',\n },\n [`${itemSelector}:last-child`]: {\n borderStartEndRadius: 'md',\n borderEndEndRadius: 'md',\n },\n [`${itemSelector}:focus-within`]: {\n zIndex: 1,\n },\n [controlSelector]: {\n flex: 1,\n minW: 0,\n h: 'full',\n },\n [addonSelector]: {\n display: 'inline-flex',\n alignItems: 'center',\n flexShrink: 0,\n px: '3',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'border.emphasized',\n bg: 'bg.subtle',\n color: 'fg.muted',\n fontFamily: 'body',\n fontSize: 'md',\n lineHeight: 'normal',\n whiteSpace: 'nowrap',\n },\n },\n variants: {\n isDisabled: {\n false: {},\n true: {\n cursor: 'not-allowed',\n opacity: 0.55,\n },\n },\n size: {\n lg: {\n [addonSelector]: {\n minH: 'component.lg',\n },\n },\n md: {\n [addonSelector]: {\n minH: 'component.md',\n },\n },\n sm: {\n [addonSelector]: {\n minH: 'component.sm',\n },\n },\n },\n status: {\n error: {\n [addonSelector]: statusStyles.error,\n [controlSelector]: statusStyles.error,\n },\n success: {\n [addonSelector]: statusStyles.success,\n [controlSelector]: statusStyles.success,\n },\n warning: {\n [addonSelector]: statusStyles.warning,\n [controlSelector]: statusStyles.warning,\n },\n },\n },\n defaultVariants: {\n isDisabled: false,\n size: 'md',\n },\n});\n\nexport type InputGroupVariants = RecipeVariantProps<typeof inputGroupRecipe>;\nexport type InputGroupSize = InputSize;\n","import {createContext, use} from 'react';\nimport type {InputSize, InputStatusType} from 'components/Field';\n\nexport interface InputGroupContextValue {\n isDisabled: boolean;\n isInGroup: true;\n label: string;\n size: InputSize;\n statusType?: InputStatusType;\n}\n\nexport const InputGroupContext = createContext<InputGroupContextValue | null>(\n null,\n);\n\nInputGroupContext.displayName = 'InputGroupContext';\n\nexport function useInputGroup(): InputGroupContextValue | null {\n return use(InputGroupContext);\n}\n","import {\n useMemo,\n useId,\n type CSSProperties,\n type ReactNode,\n type Ref,\n} from 'react';\nimport {\n Field,\n getNecessity,\n type FieldNecessity,\n type InputSize,\n type InputStatus,\n} from 'components/Field';\nimport {inputGroupRecipe} from 'components/InputGroup/InputGroup.recipe';\nimport {InputGroupContext} from 'components/InputGroup/InputGroupContext';\nimport {cx} from 'internal/cx';\nimport isReactNode from 'internal/isReactNode';\n\nexport type InputGroupProps = {\n /**\n * Grouped input children to render side-by-side.\n */\n children: ReactNode;\n /**\n * Additional CSS class names applied to the group wrapper.\n */\n className?: string;\n /**\n * Test ID applied to the group wrapper.\n */\n 'data-testid'?: string;\n /**\n * Supporting text displayed below the label.\n */\n description?: ReactNode;\n /**\n * Whether all grouped inputs are 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 * Label text for the input group.\n */\n label: string;\n /**\n * Tooltip content shown next to the label.\n */\n labelTooltip?: ReactNode;\n /**\n * Ref forwarded to the group wrapper.\n */\n ref?: Ref<HTMLDivElement>;\n /**\n * Visual size applied to the group.\n * @default 'md'\n */\n size?: InputSize;\n /**\n * Validation status displayed below the group.\n */\n status?: InputStatus;\n /**\n * Inline styles applied to the group wrapper.\n */\n style?: CSSProperties;\n} & FieldNecessity;\n\n/**\n * Groups multiple inputs into a single visually connected row.\n */\nexport function InputGroup({\n children,\n label,\n description,\n isDisabled = false,\n isLabelHidden = false,\n isOptional,\n isRequired,\n size = 'md',\n status,\n labelTooltip,\n className,\n 'data-testid': dataTestId,\n style,\n ref,\n}: InputGroupProps): React.JSX.Element {\n const inputId = useId();\n const labelId = `${inputId}-label`;\n const descriptionID = isReactNode(description)\n ? `${inputId}-description`\n : undefined;\n const statusID = status?.message != null ? `${inputId}-status` : undefined;\n const describedBy =\n [descriptionID, statusID].filter(Boolean).join(' ') || undefined;\n const contextValue = useMemo(\n () => ({\n isInGroup: true as const,\n isDisabled,\n label,\n size,\n statusType: status?.type,\n }),\n [isDisabled, label, size, status?.type],\n );\n\n const necessity = getNecessity(isOptional, isRequired);\n\n return (\n <InputGroupContext value={contextValue}>\n <Field\n description={description}\n descriptionID={descriptionID}\n inputId={inputId}\n isDisabled={isDisabled}\n isLabelHidden={isLabelHidden}\n labelAs=\"span\"\n labelId={labelId}\n {...necessity}\n label={label}\n labelTooltip={labelTooltip}\n status={status == null ? undefined : {...status, messageID: statusID}}\n statusVariant=\"detached\">\n <div\n aria-describedby={describedBy}\n aria-disabled={isDisabled || undefined}\n aria-labelledby={labelId}\n className={cx(\n inputGroupRecipe({\n isDisabled,\n size,\n status: status?.type,\n }),\n className,\n )}\n data-testid={dataTestId}\n ref={ref}\n role=\"group\"\n style={style}>\n {children}\n </div>\n </Field>\n </InputGroupContext>\n );\n}\n\nInputGroup.displayName = 'InputGroup';\n","import type {CSSProperties, ReactNode, Ref} from 'react';\n\nexport interface InputGroupTextProps {\n children: ReactNode;\n className?: string;\n 'data-testid'?: string;\n ref?: Ref<HTMLDivElement>;\n style?: CSSProperties;\n}\n\nexport function InputGroupText({\n children,\n className,\n 'data-testid': dataTestId,\n style,\n ref,\n}: InputGroupTextProps): React.JSX.Element {\n return (\n <div\n className={className}\n data-silver-input-group-text=\"\"\n data-testid={dataTestId}\n ref={ref}\n style={style}>\n {children}\n </div>\n );\n}\n\nInputGroupText.displayName = 'InputGroupText';\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/InputGroup/InputGroup.recipe.ts","../src/components/InputGroup/InputGroupContext.ts","../src/components/InputGroup/InputGroup.tsx","../src/components/InputGroup/InputGroupText.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-6KG76KUZ.js","sourcesContent":["import type {InputSize, InputStatusType} from 'components/Field';\nimport {cva, type RecipeVariantProps} from 'styled-system/css';\n\nconst addonSelector = '& > [data-silver-input-group-text]';\nconst controlSelector = '& > :not([data-silver-input-group-text])';\nconst itemSelector = '& > *';\n\nconst statusStyles = {\n error: {\n borderColor: 'status.error.border',\n _focusWithin: {borderColor: 'status.error.border'},\n },\n success: {\n borderColor: 'status.success.border',\n _focusWithin: {borderColor: 'status.success.border'},\n },\n warning: {\n borderColor: 'status.warning.border',\n _focusWithin: {borderColor: 'status.warning.border'},\n },\n} satisfies Record<InputStatusType, object>;\n\nexport const inputGroupRecipe = cva({\n base: {\n display: 'inline-flex',\n alignItems: 'stretch',\n isolation: 'isolate',\n maxW: 'full',\n [itemSelector]: {\n position: 'relative',\n borderRadius: 0,\n },\n [`${itemSelector}:not(:first-child)`]: {\n marginInlineStart: '-1px',\n },\n [`${itemSelector}:first-child`]: {\n borderStartStartRadius: 'md',\n borderEndStartRadius: 'md',\n },\n [`${itemSelector}:last-child`]: {\n borderStartEndRadius: 'md',\n borderEndEndRadius: 'md',\n },\n [`${itemSelector}:focus-within`]: {\n zIndex: 1,\n },\n [controlSelector]: {\n flex: 1,\n minW: 0,\n h: 'full',\n },\n [addonSelector]: {\n display: 'inline-flex',\n alignItems: 'center',\n flexShrink: 0,\n px: '3',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'border.emphasized',\n bg: 'bg.subtle',\n color: 'fg.muted',\n fontFamily: 'body',\n fontSize: 'md',\n lineHeight: 'normal',\n whiteSpace: 'nowrap',\n },\n },\n variants: {\n isDisabled: {\n false: {},\n true: {\n cursor: 'not-allowed',\n opacity: 0.55,\n },\n },\n size: {\n lg: {\n [addonSelector]: {\n minH: 'component.lg',\n },\n },\n md: {\n [addonSelector]: {\n minH: 'component.md',\n },\n },\n sm: {\n [addonSelector]: {\n minH: 'component.sm',\n },\n },\n },\n status: {\n error: {\n [addonSelector]: statusStyles.error,\n [controlSelector]: statusStyles.error,\n },\n success: {\n [addonSelector]: statusStyles.success,\n [controlSelector]: statusStyles.success,\n },\n warning: {\n [addonSelector]: statusStyles.warning,\n [controlSelector]: statusStyles.warning,\n },\n },\n },\n defaultVariants: {\n isDisabled: false,\n size: 'md',\n },\n});\n\nexport type InputGroupVariants = RecipeVariantProps<typeof inputGroupRecipe>;\nexport type InputGroupSize = InputSize;\n","import {createContext, use} from 'react';\nimport type {InputSize, InputStatusType} from 'components/Field';\n\nexport interface InputGroupContextValue {\n isDisabled: boolean;\n isInGroup: true;\n label: string;\n size: InputSize;\n statusType?: InputStatusType;\n}\n\nexport const InputGroupContext = createContext<InputGroupContextValue | null>(\n null,\n);\n\nInputGroupContext.displayName = 'InputGroupContext';\n\nexport function useInputGroup(): InputGroupContextValue | null {\n return use(InputGroupContext);\n}\n","import {\n useMemo,\n useId,\n type CSSProperties,\n type ReactNode,\n type Ref,\n} from 'react';\nimport {\n Field,\n getNecessity,\n type FieldNecessity,\n type InputSize,\n type InputStatus,\n} from 'components/Field';\nimport {inputGroupRecipe} from 'components/InputGroup/InputGroup.recipe';\nimport {InputGroupContext} from 'components/InputGroup/InputGroupContext';\nimport {cx} from 'internal/cx';\nimport isReactNode from 'internal/isReactNode';\n\nexport type InputGroupProps = {\n /**\n * Grouped input children to render side-by-side.\n */\n children: ReactNode;\n /**\n * Additional CSS class names applied to the group wrapper.\n */\n className?: string;\n /**\n * Test ID applied to the group wrapper.\n */\n 'data-testid'?: string;\n /**\n * Supporting text displayed below the label.\n */\n description?: ReactNode;\n /**\n * Whether all grouped inputs are 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 * Label text for the input group.\n */\n label: string;\n /**\n * Tooltip content shown next to the label.\n */\n labelTooltip?: ReactNode;\n /**\n * Ref forwarded to the group wrapper.\n */\n ref?: Ref<HTMLDivElement>;\n /**\n * Visual size applied to the group.\n * @default 'md'\n */\n size?: InputSize;\n /**\n * Validation status displayed below the group.\n */\n status?: InputStatus;\n /**\n * Inline styles applied to the group wrapper.\n */\n style?: CSSProperties;\n} & FieldNecessity;\n\n/**\n * Groups multiple inputs into a single visually connected row.\n */\nexport function InputGroup({\n children,\n label,\n description,\n isDisabled = false,\n isLabelHidden = false,\n isOptional,\n isRequired,\n size = 'md',\n status,\n labelTooltip,\n className,\n 'data-testid': dataTestId,\n style,\n ref,\n}: InputGroupProps): React.JSX.Element {\n const inputId = useId();\n const labelId = `${inputId}-label`;\n const descriptionID = isReactNode(description)\n ? `${inputId}-description`\n : undefined;\n const statusID = status?.message != null ? `${inputId}-status` : undefined;\n const describedBy =\n [descriptionID, statusID].filter(Boolean).join(' ') || undefined;\n const contextValue = useMemo(\n () => ({\n isInGroup: true as const,\n isDisabled,\n label,\n size,\n statusType: status?.type,\n }),\n [isDisabled, label, size, status?.type],\n );\n\n const necessity = getNecessity(isOptional, isRequired);\n\n return (\n <InputGroupContext value={contextValue}>\n <Field\n description={description}\n descriptionID={descriptionID}\n inputId={inputId}\n isDisabled={isDisabled}\n isLabelHidden={isLabelHidden}\n labelAs=\"span\"\n labelId={labelId}\n {...necessity}\n label={label}\n labelTooltip={labelTooltip}\n status={status == null ? undefined : {...status, messageID: statusID}}\n statusVariant=\"detached\">\n <div\n aria-describedby={describedBy}\n aria-disabled={isDisabled || undefined}\n aria-labelledby={labelId}\n className={cx(\n inputGroupRecipe({\n isDisabled,\n size,\n status: status?.type,\n }),\n className,\n )}\n data-testid={dataTestId}\n ref={ref}\n role=\"group\"\n style={style}>\n {children}\n </div>\n </Field>\n </InputGroupContext>\n );\n}\n\nInputGroup.displayName = 'InputGroup';\n","import type {CSSProperties, ReactNode, Ref} from 'react';\n\nexport interface InputGroupTextProps {\n children: ReactNode;\n className?: string;\n 'data-testid'?: string;\n ref?: Ref<HTMLDivElement>;\n style?: CSSProperties;\n}\n\nexport function InputGroupText({\n children,\n className,\n 'data-testid': dataTestId,\n style,\n ref,\n}: InputGroupTextProps): React.JSX.Element {\n return (\n <div\n className={className}\n data-silver-input-group-text=\"\"\n data-testid={dataTestId}\n ref={ref}\n style={style}>\n {children}\n </div>\n );\n}\n\nInputGroupText.displayName = 'InputGroupText';\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Text } from './chunk-
|
|
1
|
+
import { Text } from './chunk-5GSRIOXE.js';
|
|
2
2
|
import { isReactNode } from './chunk-2PSZAWLC.js';
|
|
3
3
|
import { Icon } from './chunk-IUW777WZ.js';
|
|
4
4
|
import { sva } from './chunk-IAVZKGZS.js';
|
|
@@ -385,5 +385,5 @@ function Stepper({
|
|
|
385
385
|
Stepper.displayName = "Stepper";
|
|
386
386
|
|
|
387
387
|
export { Stepper };
|
|
388
|
-
//# sourceMappingURL=chunk-
|
|
389
|
-
//# sourceMappingURL=chunk-
|
|
388
|
+
//# sourceMappingURL=chunk-6KGF66TR.js.map
|
|
389
|
+
//# sourceMappingURL=chunk-6KGF66TR.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Stepper/internal/Step.recipe.ts","../src/components/Stepper/internal/Step.tsx","../src/components/Stepper/Stepper.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-RU7JPU7V.js","sourcesContent":["import type {StepState} from 'components/Stepper/internal/Step';\nimport {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const stepRecipe = sva({\n slots: [\n 'root',\n 'content',\n 'indicatorColumn',\n 'indicator',\n 'labelRow',\n 'label',\n 'description',\n 'connectorWrapper',\n 'connector',\n 'childrenContent',\n ],\n base: {\n root: {\n display: 'flex',\n position: 'relative',\n '&:last-child [data-step-connector]': {\n display: 'none',\n },\n },\n content: {\n display: 'flex',\n flexDirection: 'column',\n },\n indicatorColumn: {},\n indicator: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n w: '7',\n h: '7',\n borderRadius: 'full',\n fontFamily: 'body',\n fontSize: 'sm',\n fontWeight: 'semibold',\n lineHeight: 'none',\n transitionProperty: 'background-color, color, border-color, opacity',\n transitionDuration: 'fast',\n transitionTimingFunction: 'default',\n flexShrink: 0,\n userSelect: 'none',\n borderWidth: 'emphasized',\n borderStyle: 'solid',\n },\n labelRow: {\n display: 'flex',\n flexDirection: 'column',\n },\n label: {\n textAlign: 'center',\n },\n description: {},\n connectorWrapper: {\n flex: 1,\n display: 'flex',\n },\n connector: {\n borderRadius: 'full',\n transitionProperty: 'background-color',\n transitionDuration: 'fast',\n transitionTimingFunction: 'default',\n },\n childrenContent: {\n pt: '3',\n },\n },\n variants: {\n orientation: {\n horizontal: {\n root: {\n flexDirection: 'row',\n alignItems: 'flex-start',\n flex: 1,\n _last: {flex: 'none'},\n },\n content: {\n alignItems: 'center',\n position: 'relative',\n zIndex: 1,\n },\n labelRow: {\n alignItems: 'center',\n pt: '1',\n maxW: '120px',\n },\n description: {textAlign: 'center'},\n connectorWrapper: {\n alignItems: 'center',\n px: '2',\n minW: '6',\n h: '7',\n },\n connector: {h: '0.5', w: 'full'},\n },\n vertical: {\n root: {\n flexDirection: 'row',\n alignItems: 'stretch',\n minH: '12',\n },\n content: {\n ps: '3',\n pb: '6',\n flex: 1,\n },\n indicatorColumn: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n w: '7',\n flexShrink: 0,\n },\n labelRow: {\n alignItems: 'flex-start',\n pt: '0.5',\n },\n label: {textAlign: 'start'},\n description: {textAlign: 'start'},\n connectorWrapper: {\n justifyContent: 'center',\n py: '1',\n },\n connector: {w: '0.5', h: 'full'},\n },\n },\n state: {\n active: {\n indicator: {\n bg: 'primary',\n borderColor: 'primary',\n color: 'fg.onPrimary',\n },\n label: {color: 'fg', fontWeight: 'semibold'},\n },\n completed: {\n indicator: {\n bg: 'primary',\n borderColor: 'primary',\n color: 'fg.onPrimary',\n },\n label: {color: 'fg'},\n },\n upcoming: {\n indicator: {\n bg: 'transparent',\n borderColor: 'border.emphasized',\n color: 'fg.muted',\n },\n label: {color: 'fg.muted'},\n },\n disabled: {\n indicator: {\n bg: 'transparent',\n borderColor: 'border',\n color: 'fg.disabled',\n },\n label: {color: 'fg.disabled'},\n },\n error: {\n indicator: {\n bg: 'status.error.solid',\n borderColor: 'status.error.solid',\n color: 'status.error.solidFg',\n },\n label: {color: 'status.error.fg'},\n description: {color: 'status.error.fg'},\n },\n } satisfies Record<StepState, object>,\n isClickable: {\n true: {\n indicator: {\n cursor: 'pointer',\n m: 0,\n p: 0,\n _hover: {opacity: 0.85},\n _focusVisible: {\n outlineWidth: 'focus',\n outlineStyle: 'solid',\n outlineColor: 'primary',\n outlineOffset: 'focusOffset',\n },\n },\n },\n false: {},\n },\n isCompleted: {\n true: {connector: {bg: 'primary'}},\n false: {connector: {bg: 'track.emphasized'}},\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\n state: 'upcoming',\n isClickable: false,\n isCompleted: false,\n },\n});\n\nexport type StepVariants = RecipeVariantProps<typeof stepRecipe>;\n","import {Check, TriangleAlert} from 'lucide-react';\nimport type {ReactNode} from 'react';\nimport {Icon} from 'components/Icon';\nimport type {StepperOrientation} from 'components/Stepper/Stepper';\nimport {stepRecipe} from 'components/Stepper/internal/Step.recipe';\nimport {Text} from 'components/Text';\nimport isReactNode from 'internal/isReactNode';\n\nexport type StepState =\n | 'active'\n | 'completed'\n | 'disabled'\n | 'error'\n | 'upcoming';\n\n/**\n * Resolved props for a single rendered step. Computed by `Stepper`; not part of\n * the public API.\n */\nexport interface StepProps {\n content?: ReactNode;\n 'data-testid'?: string;\n description?: string;\n hasError: boolean;\n icon?: ReactNode;\n /**\n * Zero-based position of this step within the stepper.\n */\n index: number;\n isActive: boolean;\n isClickable: boolean;\n isCompleted: boolean;\n isDisabled: boolean;\n label: string;\n /**\n * Invoked when a clickable indicator is activated.\n */\n onClick: () => void;\n orientation: StepperOrientation;\n}\n\nfunction getStepState({\n hasError,\n isActive,\n isCompleted,\n isDisabled,\n}: {\n hasError: boolean;\n isActive: boolean;\n isCompleted: boolean;\n isDisabled: boolean;\n}): StepState {\n if (hasError) {\n return 'error';\n }\n if (isDisabled) {\n return 'disabled';\n }\n if (isActive) {\n return 'active';\n }\n if (isCompleted) {\n return 'completed';\n }\n return 'upcoming';\n}\n\n/**\n * Individual step within a `Stepper`. Rendered internally by `Stepper`.\n */\nexport function Step({\n content,\n 'data-testid': dataTestId,\n description,\n hasError,\n icon,\n index,\n isActive,\n isClickable,\n isCompleted,\n isDisabled,\n label,\n onClick,\n orientation,\n}: StepProps): React.JSX.Element {\n const isVertical = orientation === 'vertical';\n const state = getStepState({hasError, isActive, isCompleted, isDisabled});\n\n const classes = stepRecipe({orientation, state, isClickable, isCompleted});\n\n const defaultIndicatorContent = isCompleted ? (\n <Icon color=\"inherit\" icon={Check} size=\"sm\" />\n ) : (\n <span>{index + 1}</span>\n );\n const indicatorContent = hasError ? (\n <Icon color=\"inherit\" icon={TriangleAlert} size=\"sm\" />\n ) : (\n (icon ?? defaultIndicatorContent)\n );\n\n const stepLabel = hasError\n ? `Go to step ${index + 1}: ${label} (error)`\n : `Go to step ${index + 1}: ${label}`;\n\n const indicator = isClickable ? (\n <button\n aria-label={stepLabel}\n className={classes.indicator}\n onClick={onClick}\n type=\"button\">\n {indicatorContent}\n </button>\n ) : (\n <div aria-hidden=\"true\" className={classes.indicator}>\n {indicatorContent}\n </div>\n );\n\n const labelNode = (\n <div className={classes.labelRow}>\n <Text as=\"span\" className={classes.label} color=\"inherit\" type=\"label\">\n {label}\n </Text>\n {description != null ? (\n <Text\n as=\"span\"\n className={classes.description}\n color=\"secondary\"\n type=\"supporting\">\n {description}\n </Text>\n ) : null}\n </div>\n );\n\n if (isVertical) {\n return (\n <li\n aria-current={isActive ? 'step' : undefined}\n className={classes.root}\n data-testid={dataTestId}>\n <div className={classes.indicatorColumn}>\n {indicator}\n <div className={classes.connectorWrapper} data-step-connector=\"\">\n <div className={classes.connector} />\n </div>\n </div>\n <div className={classes.content}>\n {labelNode}\n {isReactNode(content) ? (\n <div className={classes.childrenContent}>{content}</div>\n ) : null}\n </div>\n </li>\n );\n }\n\n return (\n <li\n aria-current={isActive ? 'step' : undefined}\n className={classes.root}\n data-testid={dataTestId}>\n <div className={classes.content}>\n {indicator}\n {labelNode}\n </div>\n <div className={classes.connectorWrapper} data-step-connector=\"\">\n <div className={classes.connector} />\n </div>\n </li>\n );\n}\n\nStep.displayName = 'Step';\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {Step} from 'components/Stepper/internal/Step';\nimport {cx} from 'internal/cx';\nimport {css} from 'styled-system/css';\n\nexport type StepperOrientation = 'horizontal' | 'vertical';\n\nexport interface StepConfig {\n /**\n * Content rendered below the label and description in vertical steppers.\n */\n content?: ReactNode;\n /**\n * Test ID applied to the step's list item.\n */\n 'data-testid'?: string;\n /**\n * Optional supporting text.\n */\n description?: string;\n /**\n * Whether the step has an error.\n * @default false\n */\n hasError?: boolean;\n /**\n * Custom indicator content replacing the number or check icon.\n */\n icon?: ReactNode;\n /**\n * Stable identifier for the step. Referenced by `activeStep` and passed to\n * `onStepClick`, and used as the React key when rendering.\n */\n id: string;\n /**\n * Override the automatically computed completed state. By default a step is\n * completed when it appears before the active step.\n */\n isCompleted?: boolean;\n /**\n * Whether the step is disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Step label.\n */\n label: string;\n}\n\nexport interface StepperProps {\n /**\n * `id` of the active step. A step is completed when it appears before the\n * active step in `steps`; pass an `id` that is not in `steps` (or mark steps\n * `isCompleted`) to represent a fully finished sequence.\n */\n activeStep: string;\n /**\n * Additional CSS class names applied to the ordered list.\n */\n className?: string;\n /**\n * Test ID applied to the ordered list.\n */\n 'data-testid'?: string;\n /**\n * Accessible label for the navigation landmark.\n * @default 'Progress'\n */\n label?: string;\n /**\n * Called with the step `id` when a completed or active step indicator is\n * clicked.\n */\n onStepClick?: (id: string) => void;\n /**\n * Layout direction.\n * @default 'horizontal'\n */\n orientation?: StepperOrientation;\n /**\n * Ref forwarded to the navigation element.\n */\n ref?: Ref<HTMLElement>;\n /**\n * Ordered list of steps to render.\n */\n steps: StepConfig[];\n /**\n * Inline styles applied to the ordered list.\n */\n style?: CSSProperties;\n}\n\nconst styles = {\n root: css({\n display: 'flex',\n w: 'full',\n m: 0,\n p: 0,\n listStyleType: 'none',\n }),\n horizontal: css({\n flexDirection: 'row',\n alignItems: 'flex-start',\n }),\n vertical: css({\n flexDirection: 'column',\n }),\n} as const;\n\n/**\n * Displays progress through a sequence of logical steps.\n */\nexport function Stepper({\n activeStep,\n className,\n 'data-testid': dataTestId,\n label = 'Progress',\n onStepClick,\n orientation = 'horizontal',\n ref,\n steps,\n style,\n}: StepperProps): React.JSX.Element {\n const isNonLinear = onStepClick != null;\n const activeIndex = steps.findIndex(step => step.id === activeStep);\n\n return (\n <nav\n aria-label={label}\n className={className}\n data-testid={dataTestId}\n ref={ref}\n style={style}>\n <ol\n className={cx(\n styles.root,\n orientation === 'horizontal' ? styles.horizontal : styles.vertical,\n )}>\n {steps.map((step, index) => {\n const isActive = index === activeIndex;\n const isDisabled = step.isDisabled ?? false;\n const hasError = step.hasError ?? false;\n const isCompleted =\n step.isCompleted ?? (activeIndex !== -1 && index < activeIndex);\n const isClickable =\n isNonLinear && !isDisabled && (isCompleted || isActive);\n\n return (\n <Step\n content={step.content}\n data-testid={step['data-testid']}\n description={step.description}\n hasError={hasError}\n icon={step.icon}\n index={index}\n isActive={isActive}\n isClickable={isClickable}\n isCompleted={isCompleted}\n isDisabled={isDisabled}\n key={step.id}\n label={step.label}\n onClick={() => onStepClick?.(step.id)}\n orientation={orientation}\n />\n );\n })}\n </ol>\n </nav>\n );\n}\n\nStepper.displayName = 'Stepper';\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/Stepper/internal/Step.recipe.ts","../src/components/Stepper/internal/Step.tsx","../src/components/Stepper/Stepper.tsx"],"names":["jsx"],"mappings":";;;;;;;;;;AAGO,IAAM,aAAa,GAAA,CAAI;AAAA,EAC5B,KAAA,EAAO;AAAA,IACL,MAAA;AAAA,IACA,SAAA;AAAA,IACA,iBAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,aAAA;AAAA,IACA,kBAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS,MAAA;AAAA,MACT,QAAA,EAAU,UAAA;AAAA,MACV,oCAAA,EAAsC;AAAA,QACpC,OAAA,EAAS;AAAA;AACX,KACF;AAAA,IACA,OAAA,EAAS;AAAA,MACP,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe;AAAA,KACjB;AAAA,IACA,iBAAiB,EAAC;AAAA,IAClB,SAAA,EAAW;AAAA,MACT,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,cAAA,EAAgB,QAAA;AAAA,MAChB,CAAA,EAAG,GAAA;AAAA,MACH,CAAA,EAAG,GAAA;AAAA,MACH,YAAA,EAAc,MAAA;AAAA,MACd,UAAA,EAAY,MAAA;AAAA,MACZ,QAAA,EAAU,IAAA;AAAA,MACV,UAAA,EAAY,UAAA;AAAA,MACZ,UAAA,EAAY,MAAA;AAAA,MACZ,kBAAA,EAAoB,gDAAA;AAAA,MACpB,kBAAA,EAAoB,MAAA;AAAA,MACpB,wBAAA,EAA0B,SAAA;AAAA,MAC1B,UAAA,EAAY,CAAA;AAAA,MACZ,UAAA,EAAY,MAAA;AAAA,MACZ,WAAA,EAAa,YAAA;AAAA,MACb,WAAA,EAAa;AAAA,KACf;AAAA,IACA,QAAA,EAAU;AAAA,MACR,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe;AAAA,KACjB;AAAA,IACA,KAAA,EAAO;AAAA,MACL,SAAA,EAAW;AAAA,KACb;AAAA,IACA,aAAa,EAAC;AAAA,IACd,gBAAA,EAAkB;AAAA,MAChB,IAAA,EAAM,CAAA;AAAA,MACN,OAAA,EAAS;AAAA,KACX;AAAA,IACA,SAAA,EAAW;AAAA,MACT,YAAA,EAAc,MAAA;AAAA,MACd,kBAAA,EAAoB,kBAAA;AAAA,MACpB,kBAAA,EAAoB,MAAA;AAAA,MACpB,wBAAA,EAA0B;AAAA,KAC5B;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,EAAA,EAAI;AAAA;AACN,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,UAAA,EAAY;AAAA,QACV,IAAA,EAAM;AAAA,UACJ,aAAA,EAAe,KAAA;AAAA,UACf,UAAA,EAAY,YAAA;AAAA,UACZ,IAAA,EAAM,CAAA;AAAA,UACN,KAAA,EAAO,EAAC,IAAA,EAAM,MAAA;AAAM,SACtB;AAAA,QACA,OAAA,EAAS;AAAA,UACP,UAAA,EAAY,QAAA;AAAA,UACZ,QAAA,EAAU,UAAA;AAAA,UACV,MAAA,EAAQ;AAAA,SACV;AAAA,QACA,QAAA,EAAU;AAAA,UACR,UAAA,EAAY,QAAA;AAAA,UACZ,EAAA,EAAI,GAAA;AAAA,UACJ,IAAA,EAAM;AAAA,SACR;AAAA,QACA,WAAA,EAAa,EAAC,SAAA,EAAW,QAAA,EAAQ;AAAA,QACjC,gBAAA,EAAkB;AAAA,UAChB,UAAA,EAAY,QAAA;AAAA,UACZ,EAAA,EAAI,GAAA;AAAA,UACJ,IAAA,EAAM,GAAA;AAAA,UACN,CAAA,EAAG;AAAA,SACL;AAAA,QACA,SAAA,EAAW,EAAC,CAAA,EAAG,KAAA,EAAO,GAAG,MAAA;AAAM,OACjC;AAAA,MACA,QAAA,EAAU;AAAA,QACR,IAAA,EAAM;AAAA,UACJ,aAAA,EAAe,KAAA;AAAA,UACf,UAAA,EAAY,SAAA;AAAA,UACZ,IAAA,EAAM;AAAA,SACR;AAAA,QACA,OAAA,EAAS;AAAA,UACP,EAAA,EAAI,GAAA;AAAA,UACJ,EAAA,EAAI,GAAA;AAAA,UACJ,IAAA,EAAM;AAAA,SACR;AAAA,QACA,eAAA,EAAiB;AAAA,UACf,OAAA,EAAS,MAAA;AAAA,UACT,aAAA,EAAe,QAAA;AAAA,UACf,UAAA,EAAY,QAAA;AAAA,UACZ,CAAA,EAAG,GAAA;AAAA,UACH,UAAA,EAAY;AAAA,SACd;AAAA,QACA,QAAA,EAAU;AAAA,UACR,UAAA,EAAY,YAAA;AAAA,UACZ,EAAA,EAAI;AAAA,SACN;AAAA,QACA,KAAA,EAAO,EAAC,SAAA,EAAW,OAAA,EAAO;AAAA,QAC1B,WAAA,EAAa,EAAC,SAAA,EAAW,OAAA,EAAO;AAAA,QAChC,gBAAA,EAAkB;AAAA,UAChB,cAAA,EAAgB,QAAA;AAAA,UAChB,EAAA,EAAI;AAAA,SACN;AAAA,QACA,SAAA,EAAW,EAAC,CAAA,EAAG,KAAA,EAAO,GAAG,MAAA;AAAM;AACjC,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,MAAA,EAAQ;AAAA,QACN,SAAA,EAAW;AAAA,UACT,EAAA,EAAI,SAAA;AAAA,UACJ,WAAA,EAAa,SAAA;AAAA,UACb,KAAA,EAAO;AAAA,SACT;AAAA,QACA,KAAA,EAAO,EAAC,KAAA,EAAO,IAAA,EAAM,YAAY,UAAA;AAAU,OAC7C;AAAA,MACA,SAAA,EAAW;AAAA,QACT,SAAA,EAAW;AAAA,UACT,EAAA,EAAI,SAAA;AAAA,UACJ,WAAA,EAAa,SAAA;AAAA,UACb,KAAA,EAAO;AAAA,SACT;AAAA,QACA,KAAA,EAAO,EAAC,KAAA,EAAO,IAAA;AAAI,OACrB;AAAA,MACA,QAAA,EAAU;AAAA,QACR,SAAA,EAAW;AAAA,UACT,EAAA,EAAI,aAAA;AAAA,UACJ,WAAA,EAAa,mBAAA;AAAA,UACb,KAAA,EAAO;AAAA,SACT;AAAA,QACA,KAAA,EAAO,EAAC,KAAA,EAAO,UAAA;AAAU,OAC3B;AAAA,MACA,QAAA,EAAU;AAAA,QACR,SAAA,EAAW;AAAA,UACT,EAAA,EAAI,aAAA;AAAA,UACJ,WAAA,EAAa,QAAA;AAAA,UACb,KAAA,EAAO;AAAA,SACT;AAAA,QACA,KAAA,EAAO,EAAC,KAAA,EAAO,aAAA;AAAa,OAC9B;AAAA,MACA,KAAA,EAAO;AAAA,QACL,SAAA,EAAW;AAAA,UACT,EAAA,EAAI,oBAAA;AAAA,UACJ,WAAA,EAAa,oBAAA;AAAA,UACb,KAAA,EAAO;AAAA,SACT;AAAA,QACA,KAAA,EAAO,EAAC,KAAA,EAAO,iBAAA,EAAiB;AAAA,QAChC,WAAA,EAAa,EAAC,KAAA,EAAO,iBAAA;AAAiB;AACxC,KACF;AAAA,IACA,WAAA,EAAa;AAAA,MACX,IAAA,EAAM;AAAA,QACJ,SAAA,EAAW;AAAA,UACT,MAAA,EAAQ,SAAA;AAAA,UACR,CAAA,EAAG,CAAA;AAAA,UACH,CAAA,EAAG,CAAA;AAAA,UACH,MAAA,EAAQ,EAAC,OAAA,EAAS,IAAA,EAAI;AAAA,UACtB,aAAA,EAAe;AAAA,YACb,YAAA,EAAc,OAAA;AAAA,YACd,YAAA,EAAc,OAAA;AAAA,YACd,YAAA,EAAc,SAAA;AAAA,YACd,aAAA,EAAe;AAAA;AACjB;AACF,OACF;AAAA,MACA,OAAO;AAAC,KACV;AAAA,IACA,WAAA,EAAa;AAAA,MACX,MAAM,EAAC,SAAA,EAAW,EAAC,EAAA,EAAI,WAAS,EAAC;AAAA,MACjC,OAAO,EAAC,SAAA,EAAW,EAAC,EAAA,EAAI,oBAAkB;AAAC;AAC7C,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,WAAA,EAAa,YAAA;AAAA,IACb,KAAA,EAAO,UAAA;AAAA,IACP,WAAA,EAAa,KAAA;AAAA,IACb,WAAA,EAAa;AAAA;AAEjB,CAAC,CAAA;AC/JD,SAAS,YAAA,CAAa;AAAA,EACpB,QAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAKc;AACZ,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO,OAAA;AAAA,EACT;AACA,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,OAAO,UAAA;AAAA,EACT;AACA,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO,QAAA;AAAA,EACT;AACA,EAAA,IAAI,WAAA,EAAa;AACf,IAAA,OAAO,WAAA;AAAA,EACT;AACA,EAAA,OAAO,UAAA;AACT;AAKO,SAAS,IAAA,CAAK;AAAA,EACnB,OAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,WAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAAiC;AAC/B,EAAA,MAAM,aAAa,WAAA,KAAgB,UAAA;AACnC,EAAA,MAAM,QAAQ,YAAA,CAAa,EAAC,UAAU,QAAA,EAAU,WAAA,EAAa,YAAW,CAAA;AAExE,EAAA,MAAM,UAAU,UAAA,CAAW,EAAC,aAAa,KAAA,EAAO,WAAA,EAAa,aAAY,CAAA;AAEzE,EAAA,MAAM,uBAAA,GAA0B,WAAA,mBAC9B,GAAA,CAAC,IAAA,EAAA,EAAK,OAAM,SAAA,EAAU,IAAA,EAAM,KAAA,EAAO,IAAA,EAAK,IAAA,EAAK,CAAA,mBAE7C,GAAA,CAAC,MAAA,EAAA,EAAM,kBAAQ,CAAA,EAAE,CAAA;AAEnB,EAAA,MAAM,gBAAA,GAAmB,QAAA,mBACvB,GAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAM,SAAA,EAAU,IAAA,EAAM,aAAA,EAAe,IAAA,EAAK,IAAA,EAAK,CAAA,GAEpD,IAAA,IAAQ,uBAAA;AAGX,EAAA,MAAM,SAAA,GAAY,QAAA,GACd,CAAA,WAAA,EAAc,KAAA,GAAQ,CAAC,CAAA,EAAA,EAAK,KAAK,CAAA,QAAA,CAAA,GACjC,CAAA,WAAA,EAAc,KAAA,GAAQ,CAAC,CAAA,EAAA,EAAK,KAAK,CAAA,CAAA;AAErC,EAAA,MAAM,YAAY,WAAA,mBAChB,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,SAAA;AAAA,MACZ,WAAW,OAAA,CAAQ,SAAA;AAAA,MACnB,OAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MACJ,QAAA,EAAA;AAAA;AAAA,GACH,uBAEC,KAAA,EAAA,EAAI,aAAA,EAAY,QAAO,SAAA,EAAW,OAAA,CAAQ,WACxC,QAAA,EAAA,gBAAA,EACH,CAAA;AAGF,EAAA,MAAM,SAAA,mBACJ,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,QAAQ,QAAA,EACtB,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,MAAA,EAAO,SAAA,EAAW,OAAA,CAAQ,OAAO,KAAA,EAAM,SAAA,EAAU,IAAA,EAAK,OAAA,EAC5D,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,IACC,eAAe,IAAA,mBACd,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAG,MAAA;AAAA,QACH,WAAW,OAAA,CAAQ,WAAA;AAAA,QACnB,KAAA,EAAM,WAAA;AAAA,QACN,IAAA,EAAK,YAAA;AAAA,QACJ,QAAA,EAAA;AAAA;AAAA,KACH,GACE;AAAA,GAAA,EACN,CAAA;AAGF,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,uBACE,IAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,cAAA,EAAc,WAAW,MAAA,GAAS,MAAA;AAAA,QAClC,WAAW,OAAA,CAAQ,IAAA;AAAA,QACnB,aAAA,EAAa,UAAA;AAAA,QACb,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,eAAA,EACrB,QAAA,EAAA;AAAA,YAAA,SAAA;AAAA,4BACD,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,gBAAA,EAAkB,qBAAA,EAAoB,EAAA,EAC5D,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,SAAA,EAAW,CAAA,EACrC;AAAA,WAAA,EACF,CAAA;AAAA,0BACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,OAAA,EACrB,QAAA,EAAA;AAAA,YAAA,SAAA;AAAA,YACA,WAAA,CAAY,OAAO,CAAA,mBAClB,GAAA,CAAC,SAAI,SAAA,EAAW,OAAA,CAAQ,eAAA,EAAkB,QAAA,EAAA,OAAA,EAAQ,CAAA,GAChD;AAAA,WAAA,EACN;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAc,WAAW,MAAA,GAAS,MAAA;AAAA,MAClC,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,aAAA,EAAa,UAAA;AAAA,MACb,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,OAAA,EACrB,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA;AAAA,SAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,gBAAA,EAAkB,qBAAA,EAAoB,EAAA,EAC5D,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,SAAA,EAAW,CAAA,EACrC;AAAA;AAAA;AAAA,GACF;AAEJ;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA;AChFnB,IAAM,MAAA,GAAS;AAAA,EACb,MAAM,GAAA,CAAI;AAAA,IACR,OAAA,EAAS,MAAA;AAAA,IACT,CAAA,EAAG,MAAA;AAAA,IACH,CAAA,EAAG,CAAA;AAAA,IACH,CAAA,EAAG,CAAA;AAAA,IACH,aAAA,EAAe;AAAA,GAChB,CAAA;AAAA,EACD,YAAY,GAAA,CAAI;AAAA,IACd,aAAA,EAAe,KAAA;AAAA,IACf,UAAA,EAAY;AAAA,GACb,CAAA;AAAA,EACD,UAAU,GAAA,CAAI;AAAA,IACZ,aAAA,EAAe;AAAA,GAChB;AACH,CAAA;AAKO,SAAS,OAAA,CAAQ;AAAA,EACtB,UAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,KAAA,GAAQ,UAAA;AAAA,EACR,WAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,GAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAAoC;AAClC,EAAA,MAAM,cAAc,WAAA,IAAe,IAAA;AACnC,EAAA,MAAM,cAAc,KAAA,CAAM,SAAA,CAAU,CAAA,IAAA,KAAQ,IAAA,CAAK,OAAO,UAAU,CAAA;AAElE,EAAA,uBACEA,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,KAAA;AAAA,MACZ,SAAA;AAAA,MACA,aAAA,EAAa,UAAA;AAAA,MACb,GAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAA,kBAAAA,GAAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,EAAA;AAAA,YACT,MAAA,CAAO,IAAA;AAAA,YACP,WAAA,KAAgB,YAAA,GAAe,MAAA,CAAO,UAAA,GAAa,MAAA,CAAO;AAAA,WAC5D;AAAA,UACC,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,KAAU;AAC1B,YAAA,MAAM,WAAW,KAAA,KAAU,WAAA;AAC3B,YAAA,MAAM,UAAA,GAAa,KAAK,UAAA,IAAc,KAAA;AACtC,YAAA,MAAM,QAAA,GAAW,KAAK,QAAA,IAAY,KAAA;AAClC,YAAA,MAAM,WAAA,GACJ,IAAA,CAAK,WAAA,KAAgB,WAAA,KAAgB,MAAM,KAAA,GAAQ,WAAA,CAAA;AACrD,YAAA,MAAM,WAAA,GACJ,WAAA,IAAe,CAAC,UAAA,KAAe,WAAA,IAAe,QAAA,CAAA;AAEhD,YAAA,uBACEA,GAAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBACC,SAAS,IAAA,CAAK,OAAA;AAAA,gBACd,aAAA,EAAa,KAAK,aAAa,CAAA;AAAA,gBAC/B,aAAa,IAAA,CAAK,WAAA;AAAA,gBAClB,QAAA;AAAA,gBACA,MAAM,IAAA,CAAK,IAAA;AAAA,gBACX,KAAA;AAAA,gBACA,QAAA;AAAA,gBACA,WAAA;AAAA,gBACA,WAAA;AAAA,gBACA,UAAA;AAAA,gBAEA,OAAO,IAAA,CAAK,KAAA;AAAA,gBACZ,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,gBACpC;AAAA,eAAA;AAAA,cAHK,IAAA,CAAK;AAAA,aAIZ;AAAA,UAEJ,CAAC;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-6KGF66TR.js","sourcesContent":["import type {StepState} from 'components/Stepper/internal/Step';\nimport {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const stepRecipe = sva({\n slots: [\n 'root',\n 'content',\n 'indicatorColumn',\n 'indicator',\n 'labelRow',\n 'label',\n 'description',\n 'connectorWrapper',\n 'connector',\n 'childrenContent',\n ],\n base: {\n root: {\n display: 'flex',\n position: 'relative',\n '&:last-child [data-step-connector]': {\n display: 'none',\n },\n },\n content: {\n display: 'flex',\n flexDirection: 'column',\n },\n indicatorColumn: {},\n indicator: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n w: '7',\n h: '7',\n borderRadius: 'full',\n fontFamily: 'body',\n fontSize: 'sm',\n fontWeight: 'semibold',\n lineHeight: 'none',\n transitionProperty: 'background-color, color, border-color, opacity',\n transitionDuration: 'fast',\n transitionTimingFunction: 'default',\n flexShrink: 0,\n userSelect: 'none',\n borderWidth: 'emphasized',\n borderStyle: 'solid',\n },\n labelRow: {\n display: 'flex',\n flexDirection: 'column',\n },\n label: {\n textAlign: 'center',\n },\n description: {},\n connectorWrapper: {\n flex: 1,\n display: 'flex',\n },\n connector: {\n borderRadius: 'full',\n transitionProperty: 'background-color',\n transitionDuration: 'fast',\n transitionTimingFunction: 'default',\n },\n childrenContent: {\n pt: '3',\n },\n },\n variants: {\n orientation: {\n horizontal: {\n root: {\n flexDirection: 'row',\n alignItems: 'flex-start',\n flex: 1,\n _last: {flex: 'none'},\n },\n content: {\n alignItems: 'center',\n position: 'relative',\n zIndex: 1,\n },\n labelRow: {\n alignItems: 'center',\n pt: '1',\n maxW: '120px',\n },\n description: {textAlign: 'center'},\n connectorWrapper: {\n alignItems: 'center',\n px: '2',\n minW: '6',\n h: '7',\n },\n connector: {h: '0.5', w: 'full'},\n },\n vertical: {\n root: {\n flexDirection: 'row',\n alignItems: 'stretch',\n minH: '12',\n },\n content: {\n ps: '3',\n pb: '6',\n flex: 1,\n },\n indicatorColumn: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n w: '7',\n flexShrink: 0,\n },\n labelRow: {\n alignItems: 'flex-start',\n pt: '0.5',\n },\n label: {textAlign: 'start'},\n description: {textAlign: 'start'},\n connectorWrapper: {\n justifyContent: 'center',\n py: '1',\n },\n connector: {w: '0.5', h: 'full'},\n },\n },\n state: {\n active: {\n indicator: {\n bg: 'primary',\n borderColor: 'primary',\n color: 'fg.onPrimary',\n },\n label: {color: 'fg', fontWeight: 'semibold'},\n },\n completed: {\n indicator: {\n bg: 'primary',\n borderColor: 'primary',\n color: 'fg.onPrimary',\n },\n label: {color: 'fg'},\n },\n upcoming: {\n indicator: {\n bg: 'transparent',\n borderColor: 'border.emphasized',\n color: 'fg.muted',\n },\n label: {color: 'fg.muted'},\n },\n disabled: {\n indicator: {\n bg: 'transparent',\n borderColor: 'border',\n color: 'fg.disabled',\n },\n label: {color: 'fg.disabled'},\n },\n error: {\n indicator: {\n bg: 'status.error.solid',\n borderColor: 'status.error.solid',\n color: 'status.error.solidFg',\n },\n label: {color: 'status.error.fg'},\n description: {color: 'status.error.fg'},\n },\n } satisfies Record<StepState, object>,\n isClickable: {\n true: {\n indicator: {\n cursor: 'pointer',\n m: 0,\n p: 0,\n _hover: {opacity: 0.85},\n _focusVisible: {\n outlineWidth: 'focus',\n outlineStyle: 'solid',\n outlineColor: 'primary',\n outlineOffset: 'focusOffset',\n },\n },\n },\n false: {},\n },\n isCompleted: {\n true: {connector: {bg: 'primary'}},\n false: {connector: {bg: 'track.emphasized'}},\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\n state: 'upcoming',\n isClickable: false,\n isCompleted: false,\n },\n});\n\nexport type StepVariants = RecipeVariantProps<typeof stepRecipe>;\n","import {Check, TriangleAlert} from 'lucide-react';\nimport type {ReactNode} from 'react';\nimport {Icon} from 'components/Icon';\nimport type {StepperOrientation} from 'components/Stepper/Stepper';\nimport {stepRecipe} from 'components/Stepper/internal/Step.recipe';\nimport {Text} from 'components/Text';\nimport isReactNode from 'internal/isReactNode';\n\nexport type StepState =\n | 'active'\n | 'completed'\n | 'disabled'\n | 'error'\n | 'upcoming';\n\n/**\n * Resolved props for a single rendered step. Computed by `Stepper`; not part of\n * the public API.\n */\nexport interface StepProps {\n content?: ReactNode;\n 'data-testid'?: string;\n description?: string;\n hasError: boolean;\n icon?: ReactNode;\n /**\n * Zero-based position of this step within the stepper.\n */\n index: number;\n isActive: boolean;\n isClickable: boolean;\n isCompleted: boolean;\n isDisabled: boolean;\n label: string;\n /**\n * Invoked when a clickable indicator is activated.\n */\n onClick: () => void;\n orientation: StepperOrientation;\n}\n\nfunction getStepState({\n hasError,\n isActive,\n isCompleted,\n isDisabled,\n}: {\n hasError: boolean;\n isActive: boolean;\n isCompleted: boolean;\n isDisabled: boolean;\n}): StepState {\n if (hasError) {\n return 'error';\n }\n if (isDisabled) {\n return 'disabled';\n }\n if (isActive) {\n return 'active';\n }\n if (isCompleted) {\n return 'completed';\n }\n return 'upcoming';\n}\n\n/**\n * Individual step within a `Stepper`. Rendered internally by `Stepper`.\n */\nexport function Step({\n content,\n 'data-testid': dataTestId,\n description,\n hasError,\n icon,\n index,\n isActive,\n isClickable,\n isCompleted,\n isDisabled,\n label,\n onClick,\n orientation,\n}: StepProps): React.JSX.Element {\n const isVertical = orientation === 'vertical';\n const state = getStepState({hasError, isActive, isCompleted, isDisabled});\n\n const classes = stepRecipe({orientation, state, isClickable, isCompleted});\n\n const defaultIndicatorContent = isCompleted ? (\n <Icon color=\"inherit\" icon={Check} size=\"sm\" />\n ) : (\n <span>{index + 1}</span>\n );\n const indicatorContent = hasError ? (\n <Icon color=\"inherit\" icon={TriangleAlert} size=\"sm\" />\n ) : (\n (icon ?? defaultIndicatorContent)\n );\n\n const stepLabel = hasError\n ? `Go to step ${index + 1}: ${label} (error)`\n : `Go to step ${index + 1}: ${label}`;\n\n const indicator = isClickable ? (\n <button\n aria-label={stepLabel}\n className={classes.indicator}\n onClick={onClick}\n type=\"button\">\n {indicatorContent}\n </button>\n ) : (\n <div aria-hidden=\"true\" className={classes.indicator}>\n {indicatorContent}\n </div>\n );\n\n const labelNode = (\n <div className={classes.labelRow}>\n <Text as=\"span\" className={classes.label} color=\"inherit\" type=\"label\">\n {label}\n </Text>\n {description != null ? (\n <Text\n as=\"span\"\n className={classes.description}\n color=\"secondary\"\n type=\"supporting\">\n {description}\n </Text>\n ) : null}\n </div>\n );\n\n if (isVertical) {\n return (\n <li\n aria-current={isActive ? 'step' : undefined}\n className={classes.root}\n data-testid={dataTestId}>\n <div className={classes.indicatorColumn}>\n {indicator}\n <div className={classes.connectorWrapper} data-step-connector=\"\">\n <div className={classes.connector} />\n </div>\n </div>\n <div className={classes.content}>\n {labelNode}\n {isReactNode(content) ? (\n <div className={classes.childrenContent}>{content}</div>\n ) : null}\n </div>\n </li>\n );\n }\n\n return (\n <li\n aria-current={isActive ? 'step' : undefined}\n className={classes.root}\n data-testid={dataTestId}>\n <div className={classes.content}>\n {indicator}\n {labelNode}\n </div>\n <div className={classes.connectorWrapper} data-step-connector=\"\">\n <div className={classes.connector} />\n </div>\n </li>\n );\n}\n\nStep.displayName = 'Step';\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {Step} from 'components/Stepper/internal/Step';\nimport {cx} from 'internal/cx';\nimport {css} from 'styled-system/css';\n\nexport type StepperOrientation = 'horizontal' | 'vertical';\n\nexport interface StepConfig {\n /**\n * Content rendered below the label and description in vertical steppers.\n */\n content?: ReactNode;\n /**\n * Test ID applied to the step's list item.\n */\n 'data-testid'?: string;\n /**\n * Optional supporting text.\n */\n description?: string;\n /**\n * Whether the step has an error.\n * @default false\n */\n hasError?: boolean;\n /**\n * Custom indicator content replacing the number or check icon.\n */\n icon?: ReactNode;\n /**\n * Stable identifier for the step. Referenced by `activeStep` and passed to\n * `onStepClick`, and used as the React key when rendering.\n */\n id: string;\n /**\n * Override the automatically computed completed state. By default a step is\n * completed when it appears before the active step.\n */\n isCompleted?: boolean;\n /**\n * Whether the step is disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Step label.\n */\n label: string;\n}\n\nexport interface StepperProps {\n /**\n * `id` of the active step. A step is completed when it appears before the\n * active step in `steps`; pass an `id` that is not in `steps` (or mark steps\n * `isCompleted`) to represent a fully finished sequence.\n */\n activeStep: string;\n /**\n * Additional CSS class names applied to the ordered list.\n */\n className?: string;\n /**\n * Test ID applied to the ordered list.\n */\n 'data-testid'?: string;\n /**\n * Accessible label for the navigation landmark.\n * @default 'Progress'\n */\n label?: string;\n /**\n * Called with the step `id` when a completed or active step indicator is\n * clicked.\n */\n onStepClick?: (id: string) => void;\n /**\n * Layout direction.\n * @default 'horizontal'\n */\n orientation?: StepperOrientation;\n /**\n * Ref forwarded to the navigation element.\n */\n ref?: Ref<HTMLElement>;\n /**\n * Ordered list of steps to render.\n */\n steps: StepConfig[];\n /**\n * Inline styles applied to the ordered list.\n */\n style?: CSSProperties;\n}\n\nconst styles = {\n root: css({\n display: 'flex',\n w: 'full',\n m: 0,\n p: 0,\n listStyleType: 'none',\n }),\n horizontal: css({\n flexDirection: 'row',\n alignItems: 'flex-start',\n }),\n vertical: css({\n flexDirection: 'column',\n }),\n} as const;\n\n/**\n * Displays progress through a sequence of logical steps.\n */\nexport function Stepper({\n activeStep,\n className,\n 'data-testid': dataTestId,\n label = 'Progress',\n onStepClick,\n orientation = 'horizontal',\n ref,\n steps,\n style,\n}: StepperProps): React.JSX.Element {\n const isNonLinear = onStepClick != null;\n const activeIndex = steps.findIndex(step => step.id === activeStep);\n\n return (\n <nav\n aria-label={label}\n className={className}\n data-testid={dataTestId}\n ref={ref}\n style={style}>\n <ol\n className={cx(\n styles.root,\n orientation === 'horizontal' ? styles.horizontal : styles.vertical,\n )}>\n {steps.map((step, index) => {\n const isActive = index === activeIndex;\n const isDisabled = step.isDisabled ?? false;\n const hasError = step.hasError ?? false;\n const isCompleted =\n step.isCompleted ?? (activeIndex !== -1 && index < activeIndex);\n const isClickable =\n isNonLinear && !isDisabled && (isCompleted || isActive);\n\n return (\n <Step\n content={step.content}\n data-testid={step['data-testid']}\n description={step.description}\n hasError={hasError}\n icon={step.icon}\n index={index}\n isActive={isActive}\n isClickable={isClickable}\n isCompleted={isCompleted}\n isDisabled={isDisabled}\n key={step.id}\n label={step.label}\n onClick={() => onStepClick?.(step.id)}\n orientation={orientation}\n />\n );\n })}\n </ol>\n </nav>\n );\n}\n\nStepper.displayName = 'Stepper';\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { TopNavMobileContentContext, TopNavRenderContext } from './chunk-
|
|
2
|
-
import { SideNavRenderContext } from './chunk-
|
|
3
|
-
import { AppShellMobileContext, MobileNavToggle } from './chunk-
|
|
4
|
-
import { Layout, LayoutPanel, LayoutContent } from './chunk-
|
|
1
|
+
import { TopNavMobileContentContext, TopNavRenderContext } from './chunk-N6C37HXD.js';
|
|
2
|
+
import { SideNavRenderContext } from './chunk-UUVI3TYW.js';
|
|
3
|
+
import { AppShellMobileContext, MobileNavToggle } from './chunk-FTNEAX24.js';
|
|
4
|
+
import { Layout, LayoutPanel, LayoutContent } from './chunk-NSWKBWPP.js';
|
|
5
5
|
import { mergeRefs } from './chunk-SGLIDI6R.js';
|
|
6
6
|
import { isReactNode } from './chunk-2PSZAWLC.js';
|
|
7
7
|
import { cva } from './chunk-FMEIPGUP.js';
|
|
@@ -349,5 +349,5 @@ function AppShell({
|
|
|
349
349
|
AppShell.displayName = "AppShell";
|
|
350
350
|
|
|
351
351
|
export { AppShell };
|
|
352
|
-
//# sourceMappingURL=chunk-
|
|
353
|
-
//# sourceMappingURL=chunk-
|
|
352
|
+
//# sourceMappingURL=chunk-6R2UZNVE.js.map
|
|
353
|
+
//# sourceMappingURL=chunk-6R2UZNVE.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AppShell/AppShell.recipe.ts","../src/components/AppShell/useSlotPresence.tsx","../src/internal/sharedResizeObserver.ts","../src/internal/useMediaQuery.ts","../src/components/AppShell/AppShell.tsx"],"names":["observer","useCallback","useState","useRef","useEffect"],"mappings":"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","file":"chunk-BDFNEQR3.js","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const appShellRecipe = cva({\n base: {\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n },\n variants: {\n height: {\n fill: {\n h: '100dvh',\n },\n auto: {\n minH: '100dvh',\n },\n },\n variant: {\n default: {\n bg: 'bg.subtle',\n },\n section: {\n bg: 'bg',\n },\n },\n },\n defaultVariants: {\n height: 'fill',\n variant: 'default',\n },\n});\n\nexport type AppShellVariants = RecipeVariantProps<typeof appShellRecipe>;\n","import {useCallback, useEffect, useRef, useState} from 'react';\n\nfunction hasChildContent(element: HTMLElement): boolean {\n for (const node of element.childNodes) {\n if (node.nodeType === Node.ELEMENT_NODE) {\n return true;\n }\n\n if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '') {\n return true;\n }\n }\n\n return false;\n}\n\nexport function useSlotPresence(initialValue = false): {\n hasContent: boolean;\n ref: (node: HTMLDivElement | null) => void;\n} {\n const [hasContent, setHasContent] = useState(initialValue);\n const observerRef = useRef<MutationObserver | null>(null);\n\n const ref = useCallback((node: HTMLDivElement | null) => {\n observerRef.current?.disconnect();\n observerRef.current = null;\n\n if (node == null) {\n setHasContent(false);\n return;\n }\n\n setHasContent(hasChildContent(node));\n\n const observer = new MutationObserver(() => {\n setHasContent(hasChildContent(node));\n });\n observer.observe(node, {childList: true});\n observerRef.current = observer;\n }, []);\n\n useEffect(() => {\n return () => observerRef.current?.disconnect();\n }, []);\n\n return {hasContent, ref};\n}\n","type ResizeCallback = (entry: ResizeObserverEntry) => void;\n\nlet observer: ResizeObserver | null = null;\nconst callbacks = new Map<Element, ResizeCallback>();\n\nfunction getObserver(): ResizeObserver {\n observer ??= new ResizeObserver(entries => {\n for (const entry of entries) {\n callbacks.get(entry.target)?.(entry);\n }\n });\n\n return observer;\n}\n\nexport function observeResize(\n element: Element,\n callback: ResizeCallback,\n): void {\n callbacks.set(element, callback);\n getObserver().observe(element);\n}\n\nexport function unobserveResize(element: Element): void {\n callbacks.delete(element);\n\n if (observer == null) {\n return;\n }\n\n observer.unobserve(element);\n\n if (callbacks.size === 0) {\n observer.disconnect();\n observer = null;\n }\n}\n","import {useCallback, useSyncExternalStore} from 'react';\n\nfunction getServerSnapshot(): boolean {\n return false;\n}\n\n/**\n * Subscribe to a browser media query using React's external-store API.\n */\nexport function useMediaQuery(query: string): boolean {\n const subscribe = useCallback(\n (onStoreChange: () => void) => {\n const mediaQueryList = window.matchMedia(query);\n mediaQueryList.addEventListener('change', onStoreChange);\n return () => mediaQueryList.removeEventListener('change', onStoreChange);\n },\n [query],\n );\n\n const getSnapshot = useCallback(() => {\n return window.matchMedia(query).matches;\n }, [query]);\n\n return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n}\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {useEffect, useId, useMemo, useRef, useState} from 'react';\nimport {appShellRecipe} from 'components/AppShell/AppShell.recipe';\nimport {\n AppShellMobileContext,\n type AppShellMobileContextValue,\n} from 'components/AppShell/AppShellMobileContext';\nimport {useSlotPresence} from 'components/AppShell/useSlotPresence';\nimport {Layout, LayoutContent, LayoutPanel} from 'components/Layout';\nimport {SideNavRenderContext} from 'components/SideNav';\nimport {\n TopNavMobileContentContext,\n TopNavRenderContext,\n} from 'components/TopNav';\nimport {MobileNavToggle} from 'internal/MobileNav';\nimport {cx} from 'internal/cx';\nimport isReactNode from 'internal/isReactNode';\nimport {mergeRefs} from 'internal/mergeRefs';\nimport {observeResize, unobserveResize} from 'internal/sharedResizeObserver';\nimport type {SpacingToken} from 'internal/spacingTokens';\nimport {useMediaQuery} from 'internal/useMediaQuery';\nimport {css} from 'styled-system/css';\n\nexport type AppShellBreakpoint = 'sm' | 'md' | 'lg' | 'none';\nexport type AppShellVariant = 'default' | 'section';\nexport type AppShellHeight = 'fill' | 'auto';\n\n/**\n * Application-level layout shell with top navigation, side navigation,\n * banner, skip-to-content support, and responsive mobile navigation.\n */\nexport interface AppShellProps {\n /**\n * System-wide content rendered above the top navigation.\n */\n banner?: ReactNode;\n /**\n * Main content rendered inside the shell's `<main>` landmark.\n */\n children: ReactNode;\n /**\n * Additional CSS class names applied to the root element.\n */\n className?: string;\n /**\n * Padding applied to the main content area. Default is `0`.\n */\n contentPadding?: SpacingToken;\n /**\n * Test ID applied to the root element.\n */\n 'data-testid'?: string;\n /**\n * Height behavior. `fill` keeps scrolling inside the shell; `auto` lets the\n * page grow with content.\n */\n height?: AppShellHeight;\n /**\n * Disable generated mobile navigation.\n */\n isMobileNavDisabled?: boolean;\n /**\n * Breakpoint below which mobile navigation is used.\n * @default 'md'\n */\n mobileBreakpoint?: AppShellBreakpoint;\n /**\n * Ref forwarded to the root element.\n */\n ref?: Ref<HTMLDivElement>;\n /**\n * Side navigation slot, typically a SideNav.\n */\n sideNav?: ReactNode;\n /**\n * Inline styles applied to the root element.\n */\n style?: CSSProperties;\n /**\n * Top navigation slot, typically a TopNav.\n */\n topNav?: ReactNode;\n /**\n * Background and divider style for the shell.\n */\n variant?: AppShellVariant;\n}\n\nconst BREAKPOINT_VALUES: Record<AppShellBreakpoint, number> = {\n sm: 640,\n md: 768,\n lg: 1024,\n none: 0,\n};\n\nconst styles = {\n skipLink: css({\n position: 'absolute',\n top: 0,\n insetInlineStart: 0,\n w: '1px',\n h: '1px',\n p: 0,\n m: '-1px',\n overflow: 'hidden',\n clipPath: 'inset(50%)',\n whiteSpace: 'nowrap',\n borderWidth: 0,\n zIndex: 9999,\n bg: 'bg',\n color: 'primary',\n textDecoration: 'none',\n fontWeight: 'semibold',\n _focus: {\n position: 'fixed',\n top: '2',\n insetInlineStart: '2',\n w: 'auto',\n h: 'auto',\n p: '2',\n m: 0,\n overflow: 'visible',\n clipPath: 'none',\n whiteSpace: 'normal',\n outlineWidth: 'focus',\n outlineStyle: 'solid',\n outlineColor: 'primary',\n outlineOffset: 'focusOffset',\n },\n }),\n headerSticky: css({\n position: 'sticky',\n top: 0,\n zIndex: 1,\n }),\n banner: css({\n flexShrink: 0,\n }),\n autoMobileTopBar: css({\n display: 'flex',\n alignItems: 'center',\n h: '12',\n px: '2',\n }),\n sideNavSticky: css({\n flexShrink: 0,\n overflow: 'clip',\n position: 'sticky',\n top: 'var(--appshell-header-height, 0px)',\n h: 'calc(100dvh - var(--appshell-header-height, 0px))',\n display: 'flex',\n flexDirection: 'column',\n }),\n elevatedWrapper: css({\n position: 'relative',\n display: 'flex',\n flex: 1,\n minH: 0,\n h: '100%',\n }),\n elevatedBackdrop: css({\n position: 'absolute',\n inset: 0,\n bg: 'bg',\n borderStartStartRadius: '2xl',\n pointerEvents: 'none',\n }),\n contentSurface: css({\n bg: 'bg',\n }),\n contentTransparent: css({\n bg: 'transparent',\n isolation: 'isolate',\n }),\n slotContents: css({\n display: 'contents',\n }),\n};\n\ntype AppShellRootStyle = CSSProperties & {\n '--appshell-header-height'?: string;\n};\n\n/**\n * Application-level layout shell with top navigation, side navigation,\n * banner, skip-to-content support, and responsive mobile navigation.\n */\nexport function AppShell({\n banner,\n children,\n className,\n contentPadding,\n 'data-testid': dataTestId,\n height = 'fill',\n isMobileNavDisabled = false,\n mobileBreakpoint = 'md',\n ref,\n sideNav,\n style,\n topNav,\n variant = 'default',\n}: AppShellProps): React.JSX.Element {\n const mainContentId = useId();\n const breakpointQuery =\n mobileBreakpoint === 'none'\n ? '(max-width: 0px)'\n : `(max-width: ${BREAKPOINT_VALUES[mobileBreakpoint]}px)`;\n const isBelowBreakpoint = useMediaQuery(breakpointQuery);\n const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);\n const {ref: topNavPresenceRef, hasContent: hasTopNavContent} =\n useSlotPresence(isReactNode(topNav));\n const {ref: sideNavPresenceRef, hasContent: hasSideNavContent} =\n useSlotPresence(isReactNode(sideNav));\n const hasTopNav = isReactNode(topNav);\n const hasSideNav = isReactNode(sideNav);\n const hasNavContent = hasTopNavContent || hasSideNavContent;\n const mobileNavEnabled = !isMobileNavDisabled && hasNavContent;\n const showSideNavInline = hasSideNav && !isBelowBreakpoint;\n const isAuto = height === 'auto';\n const isFill = height === 'fill';\n const navHasDividers = variant === 'section';\n const headerRef = useRef<HTMLDivElement>(null);\n const shellRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!isAuto || headerRef.current == null || shellRef.current == null) {\n return;\n }\n\n const headerElement = headerRef.current;\n const shellElement = shellRef.current;\n const updateHeight = () => {\n shellElement.style.setProperty(\n '--appshell-header-height',\n `${headerElement.getBoundingClientRect().height}px`,\n );\n };\n\n observeResize(headerElement, updateHeight);\n return () => unobserveResize(headerElement);\n }, [isAuto]);\n\n const mobileContextValue = useMemo<AppShellMobileContextValue>(\n () => ({\n closeMobileNav: () => setIsMobileNavOpen(false),\n hasAutoToggle: true,\n isMobile: isBelowBreakpoint,\n isMobileNavEnabled: mobileNavEnabled,\n isMobileNavOpen,\n openMobileNav: () => mobileNavEnabled && setIsMobileNavOpen(true),\n toggleMobileNav: () => {\n if (mobileNavEnabled) {\n setIsMobileNavOpen(prev => !prev);\n }\n },\n }),\n [isBelowBreakpoint, isMobileNavOpen, mobileNavEnabled],\n );\n\n /* eslint-disable @eslint-react/no-unstable-context-value -- sideNav ReactNode prop prevents stable memoization */\n const mobileContentValue = hasSideNavContent ? (\n <SideNavRenderContext value=\"drawer-content\">\n <div className={styles.slotContents} ref={sideNavPresenceRef}>\n {sideNav}\n </div>\n </SideNavRenderContext>\n ) : null;\n const drawerMobileContentValue = hasSideNavContent ? (\n <SideNavRenderContext value=\"drawer-content\">\n {sideNav}\n </SideNavRenderContext>\n ) : null;\n /* eslint-enable @eslint-react/no-unstable-context-value */\n const topNavContent =\n hasTopNav && isBelowBreakpoint && !isMobileNavDisabled ? (\n <TopNavMobileContentContext value={mobileContentValue}>\n <TopNavRenderContext value=\"mobile-bar\">\n <div className={styles.slotContents} ref={topNavPresenceRef}>\n {topNav}\n </div>\n </TopNavRenderContext>\n </TopNavMobileContentContext>\n ) : (\n topNav\n );\n const headerContent =\n hasTopNav || isReactNode(banner) ? (\n <div className={cx(isAuto && styles.headerSticky)} ref={headerRef}>\n <header style={{flexShrink: 0}}>\n {isReactNode(banner) ? (\n <div className={styles.banner}>{banner}</div>\n ) : null}\n {hasTopNav ? (\n <div className={styles.slotContents} ref={topNavPresenceRef}>\n {topNavContent}\n </div>\n ) : null}\n </header>\n </div>\n ) : undefined;\n const autoMobileTopBar =\n !isMobileNavDisabled &&\n isBelowBreakpoint &&\n !hasTopNavContent &&\n hasSideNav ? (\n <header style={{flexShrink: 0}}>\n <div\n aria-label=\"Mobile navigation\"\n className={styles.autoMobileTopBar}\n role=\"navigation\">\n <SideNavRenderContext value=\"topbar\">\n <div className={styles.slotContents} ref={sideNavPresenceRef}>\n {sideNav}\n </div>\n </SideNavRenderContext>\n <MobileNavToggle />\n </div>\n </header>\n ) : undefined;\n const sideNavPanel = showSideNavInline ? (\n <LayoutPanel isScrollable={isFill} padding={0}>\n <div className={styles.slotContents} ref={sideNavPresenceRef}>\n {sideNav}\n </div>\n </LayoutPanel>\n ) : undefined;\n const sideNavContent =\n sideNavPanel != null && isAuto ? (\n <div className={styles.sideNavSticky}>{sideNavPanel}</div>\n ) : (\n sideNavPanel\n );\n const contentClassName =\n variant === 'default' && hasTopNavContent && showSideNavInline\n ? styles.contentTransparent\n : variant === 'default'\n ? styles.contentSurface\n : undefined;\n const mainInner = (\n <LayoutContent\n as=\"main\"\n className={contentClassName}\n id={mainContentId}\n isScrollable={isFill}\n padding={contentPadding ?? 0}>\n {children}\n </LayoutContent>\n );\n const shouldElevateWithCorner =\n variant === 'default' && hasTopNavContent && showSideNavInline;\n const mainContent = shouldElevateWithCorner ? (\n <div className={styles.elevatedWrapper}>\n <div className={styles.elevatedBackdrop} />\n {mainInner}\n </div>\n ) : (\n mainInner\n );\n const rootStyle: AppShellRootStyle = {...style};\n\n return (\n <AppShellMobileContext value={mobileContextValue}>\n <div\n className={cx(appShellRecipe({height, variant}), className)}\n data-testid={dataTestId}\n ref={mergeRefs(ref, shellRef)}\n style={rootStyle}>\n <a\n className={styles.skipLink}\n data-testid=\"skip-to-content\"\n href={`#${mainContentId}`}>\n Skip to content\n </a>\n <Layout\n content={mainContent}\n hasDividers={navHasDividers}\n header={\n <>\n {headerContent}\n {autoMobileTopBar}\n </>\n }\n height={height}\n padding={0}\n start={sideNavContent}\n />\n {isBelowBreakpoint && !isMobileNavDisabled ? (\n <>\n {hasSideNav && !hasTopNavContent ? (\n <SideNavRenderContext value=\"drawer\">\n {sideNav}\n </SideNavRenderContext>\n ) : null}\n {hasTopNav && hasTopNavContent ? (\n <TopNavMobileContentContext value={drawerMobileContentValue}>\n <TopNavRenderContext value=\"drawer\">\n {topNav}\n </TopNavRenderContext>\n </TopNavMobileContentContext>\n ) : null}\n </>\n ) : null}\n </div>\n </AppShellMobileContext>\n );\n}\n\nAppShell.displayName = 'AppShell';\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/AppShell/AppShell.recipe.ts","../src/components/AppShell/useSlotPresence.tsx","../src/internal/sharedResizeObserver.ts","../src/internal/useMediaQuery.ts","../src/components/AppShell/AppShell.tsx"],"names":["observer","useCallback","useState","useRef","useEffect"],"mappings":"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","file":"chunk-6R2UZNVE.js","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const appShellRecipe = cva({\n base: {\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n },\n variants: {\n height: {\n fill: {\n h: '100dvh',\n },\n auto: {\n minH: '100dvh',\n },\n },\n variant: {\n default: {\n bg: 'bg.subtle',\n },\n section: {\n bg: 'bg',\n },\n },\n },\n defaultVariants: {\n height: 'fill',\n variant: 'default',\n },\n});\n\nexport type AppShellVariants = RecipeVariantProps<typeof appShellRecipe>;\n","import {useCallback, useEffect, useRef, useState} from 'react';\n\nfunction hasChildContent(element: HTMLElement): boolean {\n for (const node of element.childNodes) {\n if (node.nodeType === Node.ELEMENT_NODE) {\n return true;\n }\n\n if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '') {\n return true;\n }\n }\n\n return false;\n}\n\nexport function useSlotPresence(initialValue = false): {\n hasContent: boolean;\n ref: (node: HTMLDivElement | null) => void;\n} {\n const [hasContent, setHasContent] = useState(initialValue);\n const observerRef = useRef<MutationObserver | null>(null);\n\n const ref = useCallback((node: HTMLDivElement | null) => {\n observerRef.current?.disconnect();\n observerRef.current = null;\n\n if (node == null) {\n setHasContent(false);\n return;\n }\n\n setHasContent(hasChildContent(node));\n\n const observer = new MutationObserver(() => {\n setHasContent(hasChildContent(node));\n });\n observer.observe(node, {childList: true});\n observerRef.current = observer;\n }, []);\n\n useEffect(() => {\n return () => observerRef.current?.disconnect();\n }, []);\n\n return {hasContent, ref};\n}\n","type ResizeCallback = (entry: ResizeObserverEntry) => void;\n\nlet observer: ResizeObserver | null = null;\nconst callbacks = new Map<Element, ResizeCallback>();\n\nfunction getObserver(): ResizeObserver {\n observer ??= new ResizeObserver(entries => {\n for (const entry of entries) {\n callbacks.get(entry.target)?.(entry);\n }\n });\n\n return observer;\n}\n\nexport function observeResize(\n element: Element,\n callback: ResizeCallback,\n): void {\n callbacks.set(element, callback);\n getObserver().observe(element);\n}\n\nexport function unobserveResize(element: Element): void {\n callbacks.delete(element);\n\n if (observer == null) {\n return;\n }\n\n observer.unobserve(element);\n\n if (callbacks.size === 0) {\n observer.disconnect();\n observer = null;\n }\n}\n","import {useCallback, useSyncExternalStore} from 'react';\n\nfunction getServerSnapshot(): boolean {\n return false;\n}\n\n/**\n * Subscribe to a browser media query using React's external-store API.\n */\nexport function useMediaQuery(query: string): boolean {\n const subscribe = useCallback(\n (onStoreChange: () => void) => {\n const mediaQueryList = window.matchMedia(query);\n mediaQueryList.addEventListener('change', onStoreChange);\n return () => mediaQueryList.removeEventListener('change', onStoreChange);\n },\n [query],\n );\n\n const getSnapshot = useCallback(() => {\n return window.matchMedia(query).matches;\n }, [query]);\n\n return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n}\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {useEffect, useId, useMemo, useRef, useState} from 'react';\nimport {appShellRecipe} from 'components/AppShell/AppShell.recipe';\nimport {\n AppShellMobileContext,\n type AppShellMobileContextValue,\n} from 'components/AppShell/AppShellMobileContext';\nimport {useSlotPresence} from 'components/AppShell/useSlotPresence';\nimport {Layout, LayoutContent, LayoutPanel} from 'components/Layout';\nimport {SideNavRenderContext} from 'components/SideNav';\nimport {\n TopNavMobileContentContext,\n TopNavRenderContext,\n} from 'components/TopNav';\nimport {MobileNavToggle} from 'internal/MobileNav';\nimport {cx} from 'internal/cx';\nimport isReactNode from 'internal/isReactNode';\nimport {mergeRefs} from 'internal/mergeRefs';\nimport {observeResize, unobserveResize} from 'internal/sharedResizeObserver';\nimport type {SpacingToken} from 'internal/spacingTokens';\nimport {useMediaQuery} from 'internal/useMediaQuery';\nimport {css} from 'styled-system/css';\n\nexport type AppShellBreakpoint = 'sm' | 'md' | 'lg' | 'none';\nexport type AppShellVariant = 'default' | 'section';\nexport type AppShellHeight = 'fill' | 'auto';\n\n/**\n * Application-level layout shell with top navigation, side navigation,\n * banner, skip-to-content support, and responsive mobile navigation.\n */\nexport interface AppShellProps {\n /**\n * System-wide content rendered above the top navigation.\n */\n banner?: ReactNode;\n /**\n * Main content rendered inside the shell's `<main>` landmark.\n */\n children: ReactNode;\n /**\n * Additional CSS class names applied to the root element.\n */\n className?: string;\n /**\n * Padding applied to the main content area. Default is `0`.\n */\n contentPadding?: SpacingToken;\n /**\n * Test ID applied to the root element.\n */\n 'data-testid'?: string;\n /**\n * Height behavior. `fill` keeps scrolling inside the shell; `auto` lets the\n * page grow with content.\n */\n height?: AppShellHeight;\n /**\n * Disable generated mobile navigation.\n */\n isMobileNavDisabled?: boolean;\n /**\n * Breakpoint below which mobile navigation is used.\n * @default 'md'\n */\n mobileBreakpoint?: AppShellBreakpoint;\n /**\n * Ref forwarded to the root element.\n */\n ref?: Ref<HTMLDivElement>;\n /**\n * Side navigation slot, typically a SideNav.\n */\n sideNav?: ReactNode;\n /**\n * Inline styles applied to the root element.\n */\n style?: CSSProperties;\n /**\n * Top navigation slot, typically a TopNav.\n */\n topNav?: ReactNode;\n /**\n * Background and divider style for the shell.\n */\n variant?: AppShellVariant;\n}\n\nconst BREAKPOINT_VALUES: Record<AppShellBreakpoint, number> = {\n sm: 640,\n md: 768,\n lg: 1024,\n none: 0,\n};\n\nconst styles = {\n skipLink: css({\n position: 'absolute',\n top: 0,\n insetInlineStart: 0,\n w: '1px',\n h: '1px',\n p: 0,\n m: '-1px',\n overflow: 'hidden',\n clipPath: 'inset(50%)',\n whiteSpace: 'nowrap',\n borderWidth: 0,\n zIndex: 9999,\n bg: 'bg',\n color: 'primary',\n textDecoration: 'none',\n fontWeight: 'semibold',\n _focus: {\n position: 'fixed',\n top: '2',\n insetInlineStart: '2',\n w: 'auto',\n h: 'auto',\n p: '2',\n m: 0,\n overflow: 'visible',\n clipPath: 'none',\n whiteSpace: 'normal',\n outlineWidth: 'focus',\n outlineStyle: 'solid',\n outlineColor: 'primary',\n outlineOffset: 'focusOffset',\n },\n }),\n headerSticky: css({\n position: 'sticky',\n top: 0,\n zIndex: 1,\n }),\n banner: css({\n flexShrink: 0,\n }),\n autoMobileTopBar: css({\n display: 'flex',\n alignItems: 'center',\n h: '12',\n px: '2',\n }),\n sideNavSticky: css({\n flexShrink: 0,\n overflow: 'clip',\n position: 'sticky',\n top: 'var(--appshell-header-height, 0px)',\n h: 'calc(100dvh - var(--appshell-header-height, 0px))',\n display: 'flex',\n flexDirection: 'column',\n }),\n elevatedWrapper: css({\n position: 'relative',\n display: 'flex',\n flex: 1,\n minH: 0,\n h: '100%',\n }),\n elevatedBackdrop: css({\n position: 'absolute',\n inset: 0,\n bg: 'bg',\n borderStartStartRadius: '2xl',\n pointerEvents: 'none',\n }),\n contentSurface: css({\n bg: 'bg',\n }),\n contentTransparent: css({\n bg: 'transparent',\n isolation: 'isolate',\n }),\n slotContents: css({\n display: 'contents',\n }),\n};\n\ntype AppShellRootStyle = CSSProperties & {\n '--appshell-header-height'?: string;\n};\n\n/**\n * Application-level layout shell with top navigation, side navigation,\n * banner, skip-to-content support, and responsive mobile navigation.\n */\nexport function AppShell({\n banner,\n children,\n className,\n contentPadding,\n 'data-testid': dataTestId,\n height = 'fill',\n isMobileNavDisabled = false,\n mobileBreakpoint = 'md',\n ref,\n sideNav,\n style,\n topNav,\n variant = 'default',\n}: AppShellProps): React.JSX.Element {\n const mainContentId = useId();\n const breakpointQuery =\n mobileBreakpoint === 'none'\n ? '(max-width: 0px)'\n : `(max-width: ${BREAKPOINT_VALUES[mobileBreakpoint]}px)`;\n const isBelowBreakpoint = useMediaQuery(breakpointQuery);\n const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);\n const {ref: topNavPresenceRef, hasContent: hasTopNavContent} =\n useSlotPresence(isReactNode(topNav));\n const {ref: sideNavPresenceRef, hasContent: hasSideNavContent} =\n useSlotPresence(isReactNode(sideNav));\n const hasTopNav = isReactNode(topNav);\n const hasSideNav = isReactNode(sideNav);\n const hasNavContent = hasTopNavContent || hasSideNavContent;\n const mobileNavEnabled = !isMobileNavDisabled && hasNavContent;\n const showSideNavInline = hasSideNav && !isBelowBreakpoint;\n const isAuto = height === 'auto';\n const isFill = height === 'fill';\n const navHasDividers = variant === 'section';\n const headerRef = useRef<HTMLDivElement>(null);\n const shellRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!isAuto || headerRef.current == null || shellRef.current == null) {\n return;\n }\n\n const headerElement = headerRef.current;\n const shellElement = shellRef.current;\n const updateHeight = () => {\n shellElement.style.setProperty(\n '--appshell-header-height',\n `${headerElement.getBoundingClientRect().height}px`,\n );\n };\n\n observeResize(headerElement, updateHeight);\n return () => unobserveResize(headerElement);\n }, [isAuto]);\n\n const mobileContextValue = useMemo<AppShellMobileContextValue>(\n () => ({\n closeMobileNav: () => setIsMobileNavOpen(false),\n hasAutoToggle: true,\n isMobile: isBelowBreakpoint,\n isMobileNavEnabled: mobileNavEnabled,\n isMobileNavOpen,\n openMobileNav: () => mobileNavEnabled && setIsMobileNavOpen(true),\n toggleMobileNav: () => {\n if (mobileNavEnabled) {\n setIsMobileNavOpen(prev => !prev);\n }\n },\n }),\n [isBelowBreakpoint, isMobileNavOpen, mobileNavEnabled],\n );\n\n /* eslint-disable @eslint-react/no-unstable-context-value -- sideNav ReactNode prop prevents stable memoization */\n const mobileContentValue = hasSideNavContent ? (\n <SideNavRenderContext value=\"drawer-content\">\n <div className={styles.slotContents} ref={sideNavPresenceRef}>\n {sideNav}\n </div>\n </SideNavRenderContext>\n ) : null;\n const drawerMobileContentValue = hasSideNavContent ? (\n <SideNavRenderContext value=\"drawer-content\">\n {sideNav}\n </SideNavRenderContext>\n ) : null;\n /* eslint-enable @eslint-react/no-unstable-context-value */\n const topNavContent =\n hasTopNav && isBelowBreakpoint && !isMobileNavDisabled ? (\n <TopNavMobileContentContext value={mobileContentValue}>\n <TopNavRenderContext value=\"mobile-bar\">\n <div className={styles.slotContents} ref={topNavPresenceRef}>\n {topNav}\n </div>\n </TopNavRenderContext>\n </TopNavMobileContentContext>\n ) : (\n topNav\n );\n const headerContent =\n hasTopNav || isReactNode(banner) ? (\n <div className={cx(isAuto && styles.headerSticky)} ref={headerRef}>\n <header style={{flexShrink: 0}}>\n {isReactNode(banner) ? (\n <div className={styles.banner}>{banner}</div>\n ) : null}\n {hasTopNav ? (\n <div className={styles.slotContents} ref={topNavPresenceRef}>\n {topNavContent}\n </div>\n ) : null}\n </header>\n </div>\n ) : undefined;\n const autoMobileTopBar =\n !isMobileNavDisabled &&\n isBelowBreakpoint &&\n !hasTopNavContent &&\n hasSideNav ? (\n <header style={{flexShrink: 0}}>\n <div\n aria-label=\"Mobile navigation\"\n className={styles.autoMobileTopBar}\n role=\"navigation\">\n <SideNavRenderContext value=\"topbar\">\n <div className={styles.slotContents} ref={sideNavPresenceRef}>\n {sideNav}\n </div>\n </SideNavRenderContext>\n <MobileNavToggle />\n </div>\n </header>\n ) : undefined;\n const sideNavPanel = showSideNavInline ? (\n <LayoutPanel isScrollable={isFill} padding={0}>\n <div className={styles.slotContents} ref={sideNavPresenceRef}>\n {sideNav}\n </div>\n </LayoutPanel>\n ) : undefined;\n const sideNavContent =\n sideNavPanel != null && isAuto ? (\n <div className={styles.sideNavSticky}>{sideNavPanel}</div>\n ) : (\n sideNavPanel\n );\n const contentClassName =\n variant === 'default' && hasTopNavContent && showSideNavInline\n ? styles.contentTransparent\n : variant === 'default'\n ? styles.contentSurface\n : undefined;\n const mainInner = (\n <LayoutContent\n as=\"main\"\n className={contentClassName}\n id={mainContentId}\n isScrollable={isFill}\n padding={contentPadding ?? 0}>\n {children}\n </LayoutContent>\n );\n const shouldElevateWithCorner =\n variant === 'default' && hasTopNavContent && showSideNavInline;\n const mainContent = shouldElevateWithCorner ? (\n <div className={styles.elevatedWrapper}>\n <div className={styles.elevatedBackdrop} />\n {mainInner}\n </div>\n ) : (\n mainInner\n );\n const rootStyle: AppShellRootStyle = {...style};\n\n return (\n <AppShellMobileContext value={mobileContextValue}>\n <div\n className={cx(appShellRecipe({height, variant}), className)}\n data-testid={dataTestId}\n ref={mergeRefs(ref, shellRef)}\n style={rootStyle}>\n <a\n className={styles.skipLink}\n data-testid=\"skip-to-content\"\n href={`#${mainContentId}`}>\n Skip to content\n </a>\n <Layout\n content={mainContent}\n hasDividers={navHasDividers}\n header={\n <>\n {headerContent}\n {autoMobileTopBar}\n </>\n }\n height={height}\n padding={0}\n start={sideNavContent}\n />\n {isBelowBreakpoint && !isMobileNavDisabled ? (\n <>\n {hasSideNav && !hasTopNavContent ? (\n <SideNavRenderContext value=\"drawer\">\n {sideNav}\n </SideNavRenderContext>\n ) : null}\n {hasTopNav && hasTopNavContent ? (\n <TopNavMobileContentContext value={drawerMobileContentValue}>\n <TopNavRenderContext value=\"drawer\">\n {topNav}\n </TopNavRenderContext>\n </TopNavMobileContentContext>\n ) : null}\n </>\n ) : null}\n </div>\n </AppShellMobileContext>\n );\n}\n\nAppShell.displayName = 'AppShell';\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var chunkMAYQGKKW_cjs = require('./chunk-MAYQGKKW.cjs');
|
|
4
|
-
var
|
|
4
|
+
var chunkOCYZKZ24_cjs = require('./chunk-OCYZKZ24.cjs');
|
|
5
5
|
var chunkGJZAGTPV_cjs = require('./chunk-GJZAGTPV.cjs');
|
|
6
6
|
var chunkJ4PIYOWT_cjs = require('./chunk-J4PIYOWT.cjs');
|
|
7
7
|
var chunkZ6RT3WPE_cjs = require('./chunk-Z6RT3WPE.cjs');
|
|
@@ -219,12 +219,12 @@ function ToggleButton({
|
|
|
219
219
|
style,
|
|
220
220
|
type: "button",
|
|
221
221
|
children: /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": isLoading || void 0, className: classes.content, children: [
|
|
222
|
-
resolvedIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.icon, children: isIconOnly && isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
222
|
+
resolvedIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.icon, children: isIconOnly && isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkOCYZKZ24_cjs.Spinner, { size }) : /* @__PURE__ */ jsxRuntime.jsx(chunkJ4PIYOWT_cjs.Icon, { icon: resolvedIcon, size }) }) : null,
|
|
223
223
|
!isIconOnly ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: classes.labelWrapper, children: [
|
|
224
224
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.label, children: label }),
|
|
225
225
|
/* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: classes.widthReservation, children: label })
|
|
226
226
|
] }) : null,
|
|
227
|
-
!isIconOnly && isLoading ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: classes.spinner, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
227
|
+
!isIconOnly && isLoading ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: classes.spinner, children: /* @__PURE__ */ jsxRuntime.jsx(chunkOCYZKZ24_cjs.Spinner, { size }) }) : null
|
|
228
228
|
] })
|
|
229
229
|
}
|
|
230
230
|
);
|
|
@@ -237,5 +237,5 @@ ToggleButton.displayName = "ToggleButton";
|
|
|
237
237
|
|
|
238
238
|
exports.ToggleButton = ToggleButton;
|
|
239
239
|
exports.ToggleButtonGroup = ToggleButtonGroup;
|
|
240
|
-
//# sourceMappingURL=chunk-
|
|
241
|
-
//# sourceMappingURL=chunk-
|
|
240
|
+
//# sourceMappingURL=chunk-6SFMORQF.cjs.map
|
|
241
|
+
//# sourceMappingURL=chunk-6SFMORQF.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.recipe.ts","../src/components/ToggleButton/ToggleButtonGroup.tsx","../src/components/ToggleButton/ToggleButton.tsx"],"names":["sva","createContext","use","css","useMemo","useCallback","current","jsx","cx","buttonRecipe","Spinner","Icon","jsxs","Tooltip"],"mappings":"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","file":"chunk-AFJEAYR4.cjs","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const toggleButtonRecipe = sva({\n slots: [\n 'root',\n 'content',\n 'labelWrapper',\n 'label',\n 'widthReservation',\n 'icon',\n 'spinner',\n ],\n base: {\n content: {\n display: 'contents',\n },\n labelWrapper: {\n display: 'inline-flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n minW: 0,\n },\n label: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n minW: 0,\n // The label is a (blockified) flex item, so `overflow: hidden` clips it to\n // its line box. With a tight line-height that crops descenders (e.g. the\n // \"g\" in \"Going\"), so pad the clip box vertically and cancel the padding\n // with a negative margin to keep layout unchanged.\n py: '0.25em',\n mt: '-0.35em',\n mb: '-0.25em',\n },\n widthReservation: {\n display: 'block',\n h: 0,\n overflow: 'hidden',\n visibility: 'hidden',\n pointerEvents: 'none',\n fontWeight: 'semibold',\n },\n icon: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n },\n spinner: {\n display: 'inline-flex',\n alignItems: 'center',\n color: 'inherit',\n },\n },\n variants: {\n // The core button visuals (size/variant/iconOnly) come from the shared\n // `buttonRecipe`; this recipe only layers the selected-state override on the\n // root, which is composed with the button root via `cx`.\n isSelected: {\n true: {\n root: {\n bg: 'bg.subtle',\n fontWeight: 'semibold',\n _hover: {bg: 'bg.subtle'},\n _active: {bg: 'bg.subtle'},\n },\n },\n false: {},\n },\n },\n defaultVariants: {\n isSelected: false,\n },\n});\n\nexport type ToggleButtonVariants = RecipeVariantProps<\n typeof toggleButtonRecipe\n>;\n","import {\n createContext,\n use,\n useCallback,\n useMemo,\n type CSSProperties,\n type ReactNode,\n type Ref,\n} from 'react';\nimport type {ButtonSize} from 'components/Button';\nimport {cx} from 'internal/cx';\nimport {css} from 'styled-system/css';\n\nexport type ToggleButtonGroupOrientation = 'horizontal' | 'vertical';\n\ninterface ToggleButtonGroupContextValue {\n isDisabled?: boolean;\n onToggle: (value: string) => void;\n selectedValues: Set<string>;\n size?: ButtonSize;\n}\n\nconst ToggleButtonGroupContext =\n createContext<ToggleButtonGroupContextValue | null>(null);\n\nToggleButtonGroupContext.displayName = 'ToggleButtonGroupContext';\n\nexport function useToggleButtonGroup(): ToggleButtonGroupContextValue | null {\n return use(ToggleButtonGroupContext);\n}\n\ninterface ToggleButtonGroupBaseProps {\n /**\n * Toggle button children.\n */\n children: ReactNode;\n /**\n * Additional CSS class names applied to the group root.\n */\n className?: string;\n /**\n * Test ID applied to the group root.\n */\n 'data-testid'?: string;\n /**\n * Whether all buttons in the group are disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Accessible label for the group.\n */\n label: string;\n /**\n * Group orientation.\n * @default 'horizontal'\n */\n orientation?: ToggleButtonGroupOrientation;\n /**\n * Ref forwarded to the group root.\n */\n ref?: Ref<HTMLDivElement>;\n /**\n * Default size for buttons in the group.\n */\n size?: ButtonSize;\n /**\n * Inline styles applied to the group root.\n */\n style?: CSSProperties;\n}\n\nexport interface ToggleButtonGroupSingleProps extends ToggleButtonGroupBaseProps {\n /**\n * Called with the selected value when selection changes, or `null`\n * when the active button is deselected.\n */\n onChange: (value: string | null) => void;\n /**\n * Single-selection mode. Clicking the active button clears selection.\n * @default 'single'\n */\n type?: 'single';\n /**\n * Currently selected value, or `null` for no selection.\n */\n value: string | null;\n}\n\nexport interface ToggleButtonGroupMultipleProps extends ToggleButtonGroupBaseProps {\n /**\n * Called with the array of selected values when selection changes.\n */\n onChange: (value: string[]) => void;\n /**\n * Multiple-selection mode.\n */\n type: 'multiple';\n /**\n * Currently selected values.\n */\n value: string[];\n}\n\nexport type ToggleButtonGroupProps =\n | ToggleButtonGroupSingleProps\n | ToggleButtonGroupMultipleProps;\n\nconst styles = {\n group: css({\n display: 'inline-flex',\n alignItems: 'center',\n gap: '1',\n }),\n vertical: css({\n flexDirection: 'column',\n alignItems: 'stretch',\n }),\n} as const;\n\n/**\n * Groups related ToggleButtons and manages shared selection state.\n */\nexport function ToggleButtonGroup({\n children,\n className,\n 'data-testid': dataTestId,\n isDisabled = false,\n label,\n orientation = 'horizontal',\n ref,\n size,\n style,\n ...props\n}: ToggleButtonGroupProps): React.JSX.Element {\n const isMultiple = props.type === 'multiple';\n const {onChange, value} = props;\n\n const selectedValues = useMemo(() => {\n if (isMultiple) {\n return new Set(value as string[]);\n }\n\n return value == null ? new Set<string>() : new Set([value as string]);\n }, [isMultiple, value]);\n\n const onToggle = useCallback(\n (itemValue: string) => {\n if (isMultiple) {\n const current = value as string[];\n (onChange as (v: string[]) => void)(\n current.includes(itemValue)\n ? current.filter(v => v !== itemValue)\n : [...current, itemValue],\n );\n return;\n }\n\n const current = value as string | null;\n (onChange as (v: string | null) => void)(\n current === itemValue ? null : itemValue,\n );\n },\n [isMultiple, value, onChange],\n );\n\n const contextValue = useMemo(\n () => ({isDisabled, onToggle, selectedValues, size}),\n [isDisabled, onToggle, selectedValues, size],\n );\n\n return (\n <ToggleButtonGroupContext value={contextValue}>\n <div\n aria-disabled={isDisabled || undefined}\n aria-label={label}\n className={cx(\n styles.group,\n orientation === 'vertical' ? styles.vertical : undefined,\n className,\n )}\n data-orientation={orientation}\n data-testid={dataTestId}\n ref={ref}\n role=\"group\"\n style={style}>\n {children}\n </div>\n </ToggleButtonGroupContext>\n );\n}\n\nToggleButtonGroup.displayName = 'ToggleButtonGroup';\n","import type {CSSProperties, MouseEvent, Ref} from 'react';\nimport type {ButtonSize} from 'components/Button';\nimport {buttonRecipe} from 'components/Button/Button.recipe';\nimport {Icon, type IconComponent} from 'components/Icon';\nimport {Spinner} from 'components/Spinner';\nimport {toggleButtonRecipe} from 'components/ToggleButton/ToggleButton.recipe';\nimport {useToggleButtonGroup} from 'components/ToggleButton/ToggleButtonGroup';\nimport {Tooltip} from 'components/Tooltip';\nimport {cx} from 'internal/cx';\n\nexport interface ToggleButtonProps {\n /**\n * Additional CSS class names applied to the button root.\n */\n className?: string;\n /**\n * Test ID applied to the button root.\n */\n 'data-testid'?: string;\n /**\n * Icon element rendered before the label.\n */\n icon?: IconComponent;\n /**\n * Whether the button is disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Whether to visually hide the label and render a square icon button.\n * @default false\n */\n isIconOnly?: boolean;\n /**\n * Whether the button is loading.\n * @default false\n */\n isLoading?: boolean;\n /**\n * Whether the button is currently selected.\n * @default false\n */\n isSelected?: boolean;\n /**\n * Accessible label for the button.\n */\n label: string;\n /**\n * Called when the selected state should change.\n */\n onChange?: (isSelected: boolean) => void;\n /**\n * Ref forwarded to the button root.\n */\n ref?: Ref<HTMLButtonElement>;\n /**\n * Icon element rendered when the button is selected.\n */\n selectedIcon?: IconComponent;\n /**\n * Visual size of the button.\n */\n size?: ButtonSize;\n /**\n * Inline styles applied to the button root.\n */\n style?: CSSProperties;\n /**\n * Tooltip text shown on hover.\n */\n tooltip?: string;\n /**\n * Value identifier when used inside `ToggleButtonGroup`.\n */\n value?: string;\n}\n\n/**\n * Button that toggles between selected and unselected states.\n */\nexport function ToggleButton({\n className,\n 'data-testid': dataTestId,\n icon,\n isDisabled: isDisabledProp = false,\n isIconOnly = false,\n isLoading = false,\n isSelected: isSelectedProp = false,\n label,\n onChange,\n selectedIcon,\n ref,\n size: sizeProp,\n style,\n tooltip,\n value,\n}: ToggleButtonProps): React.JSX.Element {\n const group = useToggleButtonGroup();\n\n if (process.env.NODE_ENV !== 'production') {\n if (group != null && value == null) {\n throw new Error(\n 'ToggleButton: `value` prop is required when used inside a ToggleButtonGroup.',\n );\n }\n }\n\n const isSelected =\n group != null && value != null\n ? group.selectedValues.has(value)\n : isSelectedProp;\n const size = sizeProp ?? group?.size ?? 'md';\n const isDisabled = isDisabledProp || group?.isDisabled === true;\n const resolvedIcon = isSelected && selectedIcon != null ? selectedIcon : icon;\n const classes = toggleButtonRecipe({isSelected});\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (isDisabled || isLoading) {\n event.preventDefault();\n return;\n }\n\n if (group != null && value != null) {\n group.onToggle(value);\n return;\n }\n\n onChange?.(!isSelected);\n };\n\n const button = (\n <button\n aria-busy={isLoading || undefined}\n aria-label={isIconOnly || isLoading ? label : undefined}\n aria-pressed={isSelected}\n className={cx(\n buttonRecipe({variant: 'ghost', size, iconOnly: isIconOnly}).root,\n classes.root,\n className,\n )}\n data-testid={dataTestId}\n disabled={isDisabled || isLoading}\n onClick={handleClick}\n ref={ref}\n style={style}\n type=\"button\">\n <span aria-hidden={isLoading || undefined} className={classes.content}>\n {resolvedIcon != null ? (\n <span className={classes.icon}>\n {isIconOnly && isLoading ? (\n <Spinner size={size} />\n ) : (\n <Icon icon={resolvedIcon} size={size} />\n )}\n </span>\n ) : null}\n {!isIconOnly ? (\n <span className={classes.labelWrapper}>\n <span className={classes.label}>{label}</span>\n <span aria-hidden=\"true\" className={classes.widthReservation}>\n {label}\n </span>\n </span>\n ) : null}\n {!isIconOnly && isLoading ? (\n <span aria-hidden=\"true\" className={classes.spinner}>\n <Spinner size={size} />\n </span>\n ) : null}\n </span>\n </button>\n );\n\n if (tooltip != null) {\n return <Tooltip content={tooltip}>{button}</Tooltip>;\n }\n\n return button;\n}\n\nToggleButton.displayName = 'ToggleButton';\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.recipe.ts","../src/components/ToggleButton/ToggleButtonGroup.tsx","../src/components/ToggleButton/ToggleButton.tsx"],"names":["sva","createContext","use","css","useMemo","useCallback","current","jsx","cx","buttonRecipe","Spinner","Icon","jsxs","Tooltip"],"mappings":"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","file":"chunk-6SFMORQF.cjs","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const toggleButtonRecipe = sva({\n slots: [\n 'root',\n 'content',\n 'labelWrapper',\n 'label',\n 'widthReservation',\n 'icon',\n 'spinner',\n ],\n base: {\n content: {\n display: 'contents',\n },\n labelWrapper: {\n display: 'inline-flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n minW: 0,\n },\n label: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n minW: 0,\n // The label is a (blockified) flex item, so `overflow: hidden` clips it to\n // its line box. With a tight line-height that crops descenders (e.g. the\n // \"g\" in \"Going\"), so pad the clip box vertically and cancel the padding\n // with a negative margin to keep layout unchanged.\n py: '0.25em',\n mt: '-0.35em',\n mb: '-0.25em',\n },\n widthReservation: {\n display: 'block',\n h: 0,\n overflow: 'hidden',\n visibility: 'hidden',\n pointerEvents: 'none',\n fontWeight: 'semibold',\n },\n icon: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n },\n spinner: {\n display: 'inline-flex',\n alignItems: 'center',\n color: 'inherit',\n },\n },\n variants: {\n // The core button visuals (size/variant/iconOnly) come from the shared\n // `buttonRecipe`; this recipe only layers the selected-state override on the\n // root, which is composed with the button root via `cx`.\n isSelected: {\n true: {\n root: {\n bg: 'bg.subtle',\n fontWeight: 'semibold',\n _hover: {bg: 'bg.subtle'},\n _active: {bg: 'bg.subtle'},\n },\n },\n false: {},\n },\n },\n defaultVariants: {\n isSelected: false,\n },\n});\n\nexport type ToggleButtonVariants = RecipeVariantProps<\n typeof toggleButtonRecipe\n>;\n","import {\n createContext,\n use,\n useCallback,\n useMemo,\n type CSSProperties,\n type ReactNode,\n type Ref,\n} from 'react';\nimport type {ButtonSize} from 'components/Button';\nimport {cx} from 'internal/cx';\nimport {css} from 'styled-system/css';\n\nexport type ToggleButtonGroupOrientation = 'horizontal' | 'vertical';\n\ninterface ToggleButtonGroupContextValue {\n isDisabled?: boolean;\n onToggle: (value: string) => void;\n selectedValues: Set<string>;\n size?: ButtonSize;\n}\n\nconst ToggleButtonGroupContext =\n createContext<ToggleButtonGroupContextValue | null>(null);\n\nToggleButtonGroupContext.displayName = 'ToggleButtonGroupContext';\n\nexport function useToggleButtonGroup(): ToggleButtonGroupContextValue | null {\n return use(ToggleButtonGroupContext);\n}\n\ninterface ToggleButtonGroupBaseProps {\n /**\n * Toggle button children.\n */\n children: ReactNode;\n /**\n * Additional CSS class names applied to the group root.\n */\n className?: string;\n /**\n * Test ID applied to the group root.\n */\n 'data-testid'?: string;\n /**\n * Whether all buttons in the group are disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Accessible label for the group.\n */\n label: string;\n /**\n * Group orientation.\n * @default 'horizontal'\n */\n orientation?: ToggleButtonGroupOrientation;\n /**\n * Ref forwarded to the group root.\n */\n ref?: Ref<HTMLDivElement>;\n /**\n * Default size for buttons in the group.\n */\n size?: ButtonSize;\n /**\n * Inline styles applied to the group root.\n */\n style?: CSSProperties;\n}\n\nexport interface ToggleButtonGroupSingleProps extends ToggleButtonGroupBaseProps {\n /**\n * Called with the selected value when selection changes, or `null`\n * when the active button is deselected.\n */\n onChange: (value: string | null) => void;\n /**\n * Single-selection mode. Clicking the active button clears selection.\n * @default 'single'\n */\n type?: 'single';\n /**\n * Currently selected value, or `null` for no selection.\n */\n value: string | null;\n}\n\nexport interface ToggleButtonGroupMultipleProps extends ToggleButtonGroupBaseProps {\n /**\n * Called with the array of selected values when selection changes.\n */\n onChange: (value: string[]) => void;\n /**\n * Multiple-selection mode.\n */\n type: 'multiple';\n /**\n * Currently selected values.\n */\n value: string[];\n}\n\nexport type ToggleButtonGroupProps =\n | ToggleButtonGroupSingleProps\n | ToggleButtonGroupMultipleProps;\n\nconst styles = {\n group: css({\n display: 'inline-flex',\n alignItems: 'center',\n gap: '1',\n }),\n vertical: css({\n flexDirection: 'column',\n alignItems: 'stretch',\n }),\n} as const;\n\n/**\n * Groups related ToggleButtons and manages shared selection state.\n */\nexport function ToggleButtonGroup({\n children,\n className,\n 'data-testid': dataTestId,\n isDisabled = false,\n label,\n orientation = 'horizontal',\n ref,\n size,\n style,\n ...props\n}: ToggleButtonGroupProps): React.JSX.Element {\n const isMultiple = props.type === 'multiple';\n const {onChange, value} = props;\n\n const selectedValues = useMemo(() => {\n if (isMultiple) {\n return new Set(value as string[]);\n }\n\n return value == null ? new Set<string>() : new Set([value as string]);\n }, [isMultiple, value]);\n\n const onToggle = useCallback(\n (itemValue: string) => {\n if (isMultiple) {\n const current = value as string[];\n (onChange as (v: string[]) => void)(\n current.includes(itemValue)\n ? current.filter(v => v !== itemValue)\n : [...current, itemValue],\n );\n return;\n }\n\n const current = value as string | null;\n (onChange as (v: string | null) => void)(\n current === itemValue ? null : itemValue,\n );\n },\n [isMultiple, value, onChange],\n );\n\n const contextValue = useMemo(\n () => ({isDisabled, onToggle, selectedValues, size}),\n [isDisabled, onToggle, selectedValues, size],\n );\n\n return (\n <ToggleButtonGroupContext value={contextValue}>\n <div\n aria-disabled={isDisabled || undefined}\n aria-label={label}\n className={cx(\n styles.group,\n orientation === 'vertical' ? styles.vertical : undefined,\n className,\n )}\n data-orientation={orientation}\n data-testid={dataTestId}\n ref={ref}\n role=\"group\"\n style={style}>\n {children}\n </div>\n </ToggleButtonGroupContext>\n );\n}\n\nToggleButtonGroup.displayName = 'ToggleButtonGroup';\n","import type {CSSProperties, MouseEvent, Ref} from 'react';\nimport type {ButtonSize} from 'components/Button';\nimport {buttonRecipe} from 'components/Button/Button.recipe';\nimport {Icon, type IconComponent} from 'components/Icon';\nimport {Spinner} from 'components/Spinner';\nimport {toggleButtonRecipe} from 'components/ToggleButton/ToggleButton.recipe';\nimport {useToggleButtonGroup} from 'components/ToggleButton/ToggleButtonGroup';\nimport {Tooltip} from 'components/Tooltip';\nimport {cx} from 'internal/cx';\n\nexport interface ToggleButtonProps {\n /**\n * Additional CSS class names applied to the button root.\n */\n className?: string;\n /**\n * Test ID applied to the button root.\n */\n 'data-testid'?: string;\n /**\n * Icon element rendered before the label.\n */\n icon?: IconComponent;\n /**\n * Whether the button is disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Whether to visually hide the label and render a square icon button.\n * @default false\n */\n isIconOnly?: boolean;\n /**\n * Whether the button is loading.\n * @default false\n */\n isLoading?: boolean;\n /**\n * Whether the button is currently selected.\n * @default false\n */\n isSelected?: boolean;\n /**\n * Accessible label for the button.\n */\n label: string;\n /**\n * Called when the selected state should change.\n */\n onChange?: (isSelected: boolean) => void;\n /**\n * Ref forwarded to the button root.\n */\n ref?: Ref<HTMLButtonElement>;\n /**\n * Icon element rendered when the button is selected.\n */\n selectedIcon?: IconComponent;\n /**\n * Visual size of the button.\n */\n size?: ButtonSize;\n /**\n * Inline styles applied to the button root.\n */\n style?: CSSProperties;\n /**\n * Tooltip text shown on hover.\n */\n tooltip?: string;\n /**\n * Value identifier when used inside `ToggleButtonGroup`.\n */\n value?: string;\n}\n\n/**\n * Button that toggles between selected and unselected states.\n */\nexport function ToggleButton({\n className,\n 'data-testid': dataTestId,\n icon,\n isDisabled: isDisabledProp = false,\n isIconOnly = false,\n isLoading = false,\n isSelected: isSelectedProp = false,\n label,\n onChange,\n selectedIcon,\n ref,\n size: sizeProp,\n style,\n tooltip,\n value,\n}: ToggleButtonProps): React.JSX.Element {\n const group = useToggleButtonGroup();\n\n if (process.env.NODE_ENV !== 'production') {\n if (group != null && value == null) {\n throw new Error(\n 'ToggleButton: `value` prop is required when used inside a ToggleButtonGroup.',\n );\n }\n }\n\n const isSelected =\n group != null && value != null\n ? group.selectedValues.has(value)\n : isSelectedProp;\n const size = sizeProp ?? group?.size ?? 'md';\n const isDisabled = isDisabledProp || group?.isDisabled === true;\n const resolvedIcon = isSelected && selectedIcon != null ? selectedIcon : icon;\n const classes = toggleButtonRecipe({isSelected});\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (isDisabled || isLoading) {\n event.preventDefault();\n return;\n }\n\n if (group != null && value != null) {\n group.onToggle(value);\n return;\n }\n\n onChange?.(!isSelected);\n };\n\n const button = (\n <button\n aria-busy={isLoading || undefined}\n aria-label={isIconOnly || isLoading ? label : undefined}\n aria-pressed={isSelected}\n className={cx(\n buttonRecipe({variant: 'ghost', size, iconOnly: isIconOnly}).root,\n classes.root,\n className,\n )}\n data-testid={dataTestId}\n disabled={isDisabled || isLoading}\n onClick={handleClick}\n ref={ref}\n style={style}\n type=\"button\">\n <span aria-hidden={isLoading || undefined} className={classes.content}>\n {resolvedIcon != null ? (\n <span className={classes.icon}>\n {isIconOnly && isLoading ? (\n <Spinner size={size} />\n ) : (\n <Icon icon={resolvedIcon} size={size} />\n )}\n </span>\n ) : null}\n {!isIconOnly ? (\n <span className={classes.labelWrapper}>\n <span className={classes.label}>{label}</span>\n <span aria-hidden=\"true\" className={classes.widthReservation}>\n {label}\n </span>\n </span>\n ) : null}\n {!isIconOnly && isLoading ? (\n <span aria-hidden=\"true\" className={classes.spinner}>\n <Spinner size={size} />\n </span>\n ) : null}\n </span>\n </button>\n );\n\n if (tooltip != null) {\n return <Tooltip content={tooltip}>{button}</Tooltip>;\n }\n\n return button;\n}\n\nToggleButton.displayName = 'ToggleButton';\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { buttonRecipe } from './chunk-TCTPR7YQ.js';
|
|
2
|
-
import { Spinner } from './chunk-
|
|
2
|
+
import { Spinner } from './chunk-X2P5SPGB.js';
|
|
3
3
|
import { Tooltip } from './chunk-KWZMXX4F.js';
|
|
4
4
|
import { Icon } from './chunk-IUW777WZ.js';
|
|
5
5
|
import { sva } from './chunk-IAVZKGZS.js';
|
|
@@ -234,5 +234,5 @@ function ToggleButton({
|
|
|
234
234
|
ToggleButton.displayName = "ToggleButton";
|
|
235
235
|
|
|
236
236
|
export { ToggleButton, ToggleButtonGroup };
|
|
237
|
-
//# sourceMappingURL=chunk-
|
|
238
|
-
//# sourceMappingURL=chunk-
|
|
237
|
+
//# sourceMappingURL=chunk-6SKIBUCY.js.map
|
|
238
|
+
//# sourceMappingURL=chunk-6SKIBUCY.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.recipe.ts","../src/components/ToggleButton/ToggleButtonGroup.tsx","../src/components/ToggleButton/ToggleButton.tsx"],"names":["current","jsx"],"mappings":"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","file":"chunk-XTLNUYCK.js","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const toggleButtonRecipe = sva({\n slots: [\n 'root',\n 'content',\n 'labelWrapper',\n 'label',\n 'widthReservation',\n 'icon',\n 'spinner',\n ],\n base: {\n content: {\n display: 'contents',\n },\n labelWrapper: {\n display: 'inline-flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n minW: 0,\n },\n label: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n minW: 0,\n // The label is a (blockified) flex item, so `overflow: hidden` clips it to\n // its line box. With a tight line-height that crops descenders (e.g. the\n // \"g\" in \"Going\"), so pad the clip box vertically and cancel the padding\n // with a negative margin to keep layout unchanged.\n py: '0.25em',\n mt: '-0.35em',\n mb: '-0.25em',\n },\n widthReservation: {\n display: 'block',\n h: 0,\n overflow: 'hidden',\n visibility: 'hidden',\n pointerEvents: 'none',\n fontWeight: 'semibold',\n },\n icon: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n },\n spinner: {\n display: 'inline-flex',\n alignItems: 'center',\n color: 'inherit',\n },\n },\n variants: {\n // The core button visuals (size/variant/iconOnly) come from the shared\n // `buttonRecipe`; this recipe only layers the selected-state override on the\n // root, which is composed with the button root via `cx`.\n isSelected: {\n true: {\n root: {\n bg: 'bg.subtle',\n fontWeight: 'semibold',\n _hover: {bg: 'bg.subtle'},\n _active: {bg: 'bg.subtle'},\n },\n },\n false: {},\n },\n },\n defaultVariants: {\n isSelected: false,\n },\n});\n\nexport type ToggleButtonVariants = RecipeVariantProps<\n typeof toggleButtonRecipe\n>;\n","import {\n createContext,\n use,\n useCallback,\n useMemo,\n type CSSProperties,\n type ReactNode,\n type Ref,\n} from 'react';\nimport type {ButtonSize} from 'components/Button';\nimport {cx} from 'internal/cx';\nimport {css} from 'styled-system/css';\n\nexport type ToggleButtonGroupOrientation = 'horizontal' | 'vertical';\n\ninterface ToggleButtonGroupContextValue {\n isDisabled?: boolean;\n onToggle: (value: string) => void;\n selectedValues: Set<string>;\n size?: ButtonSize;\n}\n\nconst ToggleButtonGroupContext =\n createContext<ToggleButtonGroupContextValue | null>(null);\n\nToggleButtonGroupContext.displayName = 'ToggleButtonGroupContext';\n\nexport function useToggleButtonGroup(): ToggleButtonGroupContextValue | null {\n return use(ToggleButtonGroupContext);\n}\n\ninterface ToggleButtonGroupBaseProps {\n /**\n * Toggle button children.\n */\n children: ReactNode;\n /**\n * Additional CSS class names applied to the group root.\n */\n className?: string;\n /**\n * Test ID applied to the group root.\n */\n 'data-testid'?: string;\n /**\n * Whether all buttons in the group are disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Accessible label for the group.\n */\n label: string;\n /**\n * Group orientation.\n * @default 'horizontal'\n */\n orientation?: ToggleButtonGroupOrientation;\n /**\n * Ref forwarded to the group root.\n */\n ref?: Ref<HTMLDivElement>;\n /**\n * Default size for buttons in the group.\n */\n size?: ButtonSize;\n /**\n * Inline styles applied to the group root.\n */\n style?: CSSProperties;\n}\n\nexport interface ToggleButtonGroupSingleProps extends ToggleButtonGroupBaseProps {\n /**\n * Called with the selected value when selection changes, or `null`\n * when the active button is deselected.\n */\n onChange: (value: string | null) => void;\n /**\n * Single-selection mode. Clicking the active button clears selection.\n * @default 'single'\n */\n type?: 'single';\n /**\n * Currently selected value, or `null` for no selection.\n */\n value: string | null;\n}\n\nexport interface ToggleButtonGroupMultipleProps extends ToggleButtonGroupBaseProps {\n /**\n * Called with the array of selected values when selection changes.\n */\n onChange: (value: string[]) => void;\n /**\n * Multiple-selection mode.\n */\n type: 'multiple';\n /**\n * Currently selected values.\n */\n value: string[];\n}\n\nexport type ToggleButtonGroupProps =\n | ToggleButtonGroupSingleProps\n | ToggleButtonGroupMultipleProps;\n\nconst styles = {\n group: css({\n display: 'inline-flex',\n alignItems: 'center',\n gap: '1',\n }),\n vertical: css({\n flexDirection: 'column',\n alignItems: 'stretch',\n }),\n} as const;\n\n/**\n * Groups related ToggleButtons and manages shared selection state.\n */\nexport function ToggleButtonGroup({\n children,\n className,\n 'data-testid': dataTestId,\n isDisabled = false,\n label,\n orientation = 'horizontal',\n ref,\n size,\n style,\n ...props\n}: ToggleButtonGroupProps): React.JSX.Element {\n const isMultiple = props.type === 'multiple';\n const {onChange, value} = props;\n\n const selectedValues = useMemo(() => {\n if (isMultiple) {\n return new Set(value as string[]);\n }\n\n return value == null ? new Set<string>() : new Set([value as string]);\n }, [isMultiple, value]);\n\n const onToggle = useCallback(\n (itemValue: string) => {\n if (isMultiple) {\n const current = value as string[];\n (onChange as (v: string[]) => void)(\n current.includes(itemValue)\n ? current.filter(v => v !== itemValue)\n : [...current, itemValue],\n );\n return;\n }\n\n const current = value as string | null;\n (onChange as (v: string | null) => void)(\n current === itemValue ? null : itemValue,\n );\n },\n [isMultiple, value, onChange],\n );\n\n const contextValue = useMemo(\n () => ({isDisabled, onToggle, selectedValues, size}),\n [isDisabled, onToggle, selectedValues, size],\n );\n\n return (\n <ToggleButtonGroupContext value={contextValue}>\n <div\n aria-disabled={isDisabled || undefined}\n aria-label={label}\n className={cx(\n styles.group,\n orientation === 'vertical' ? styles.vertical : undefined,\n className,\n )}\n data-orientation={orientation}\n data-testid={dataTestId}\n ref={ref}\n role=\"group\"\n style={style}>\n {children}\n </div>\n </ToggleButtonGroupContext>\n );\n}\n\nToggleButtonGroup.displayName = 'ToggleButtonGroup';\n","import type {CSSProperties, MouseEvent, Ref} from 'react';\nimport type {ButtonSize} from 'components/Button';\nimport {buttonRecipe} from 'components/Button/Button.recipe';\nimport {Icon, type IconComponent} from 'components/Icon';\nimport {Spinner} from 'components/Spinner';\nimport {toggleButtonRecipe} from 'components/ToggleButton/ToggleButton.recipe';\nimport {useToggleButtonGroup} from 'components/ToggleButton/ToggleButtonGroup';\nimport {Tooltip} from 'components/Tooltip';\nimport {cx} from 'internal/cx';\n\nexport interface ToggleButtonProps {\n /**\n * Additional CSS class names applied to the button root.\n */\n className?: string;\n /**\n * Test ID applied to the button root.\n */\n 'data-testid'?: string;\n /**\n * Icon element rendered before the label.\n */\n icon?: IconComponent;\n /**\n * Whether the button is disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Whether to visually hide the label and render a square icon button.\n * @default false\n */\n isIconOnly?: boolean;\n /**\n * Whether the button is loading.\n * @default false\n */\n isLoading?: boolean;\n /**\n * Whether the button is currently selected.\n * @default false\n */\n isSelected?: boolean;\n /**\n * Accessible label for the button.\n */\n label: string;\n /**\n * Called when the selected state should change.\n */\n onChange?: (isSelected: boolean) => void;\n /**\n * Ref forwarded to the button root.\n */\n ref?: Ref<HTMLButtonElement>;\n /**\n * Icon element rendered when the button is selected.\n */\n selectedIcon?: IconComponent;\n /**\n * Visual size of the button.\n */\n size?: ButtonSize;\n /**\n * Inline styles applied to the button root.\n */\n style?: CSSProperties;\n /**\n * Tooltip text shown on hover.\n */\n tooltip?: string;\n /**\n * Value identifier when used inside `ToggleButtonGroup`.\n */\n value?: string;\n}\n\n/**\n * Button that toggles between selected and unselected states.\n */\nexport function ToggleButton({\n className,\n 'data-testid': dataTestId,\n icon,\n isDisabled: isDisabledProp = false,\n isIconOnly = false,\n isLoading = false,\n isSelected: isSelectedProp = false,\n label,\n onChange,\n selectedIcon,\n ref,\n size: sizeProp,\n style,\n tooltip,\n value,\n}: ToggleButtonProps): React.JSX.Element {\n const group = useToggleButtonGroup();\n\n if (process.env.NODE_ENV !== 'production') {\n if (group != null && value == null) {\n throw new Error(\n 'ToggleButton: `value` prop is required when used inside a ToggleButtonGroup.',\n );\n }\n }\n\n const isSelected =\n group != null && value != null\n ? group.selectedValues.has(value)\n : isSelectedProp;\n const size = sizeProp ?? group?.size ?? 'md';\n const isDisabled = isDisabledProp || group?.isDisabled === true;\n const resolvedIcon = isSelected && selectedIcon != null ? selectedIcon : icon;\n const classes = toggleButtonRecipe({isSelected});\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (isDisabled || isLoading) {\n event.preventDefault();\n return;\n }\n\n if (group != null && value != null) {\n group.onToggle(value);\n return;\n }\n\n onChange?.(!isSelected);\n };\n\n const button = (\n <button\n aria-busy={isLoading || undefined}\n aria-label={isIconOnly || isLoading ? label : undefined}\n aria-pressed={isSelected}\n className={cx(\n buttonRecipe({variant: 'ghost', size, iconOnly: isIconOnly}).root,\n classes.root,\n className,\n )}\n data-testid={dataTestId}\n disabled={isDisabled || isLoading}\n onClick={handleClick}\n ref={ref}\n style={style}\n type=\"button\">\n <span aria-hidden={isLoading || undefined} className={classes.content}>\n {resolvedIcon != null ? (\n <span className={classes.icon}>\n {isIconOnly && isLoading ? (\n <Spinner size={size} />\n ) : (\n <Icon icon={resolvedIcon} size={size} />\n )}\n </span>\n ) : null}\n {!isIconOnly ? (\n <span className={classes.labelWrapper}>\n <span className={classes.label}>{label}</span>\n <span aria-hidden=\"true\" className={classes.widthReservation}>\n {label}\n </span>\n </span>\n ) : null}\n {!isIconOnly && isLoading ? (\n <span aria-hidden=\"true\" className={classes.spinner}>\n <Spinner size={size} />\n </span>\n ) : null}\n </span>\n </button>\n );\n\n if (tooltip != null) {\n return <Tooltip content={tooltip}>{button}</Tooltip>;\n }\n\n return button;\n}\n\nToggleButton.displayName = 'ToggleButton';\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.recipe.ts","../src/components/ToggleButton/ToggleButtonGroup.tsx","../src/components/ToggleButton/ToggleButton.tsx"],"names":["current","jsx"],"mappings":"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","file":"chunk-6SKIBUCY.js","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const toggleButtonRecipe = sva({\n slots: [\n 'root',\n 'content',\n 'labelWrapper',\n 'label',\n 'widthReservation',\n 'icon',\n 'spinner',\n ],\n base: {\n content: {\n display: 'contents',\n },\n labelWrapper: {\n display: 'inline-flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n minW: 0,\n },\n label: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n minW: 0,\n // The label is a (blockified) flex item, so `overflow: hidden` clips it to\n // its line box. With a tight line-height that crops descenders (e.g. the\n // \"g\" in \"Going\"), so pad the clip box vertically and cancel the padding\n // with a negative margin to keep layout unchanged.\n py: '0.25em',\n mt: '-0.35em',\n mb: '-0.25em',\n },\n widthReservation: {\n display: 'block',\n h: 0,\n overflow: 'hidden',\n visibility: 'hidden',\n pointerEvents: 'none',\n fontWeight: 'semibold',\n },\n icon: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n },\n spinner: {\n display: 'inline-flex',\n alignItems: 'center',\n color: 'inherit',\n },\n },\n variants: {\n // The core button visuals (size/variant/iconOnly) come from the shared\n // `buttonRecipe`; this recipe only layers the selected-state override on the\n // root, which is composed with the button root via `cx`.\n isSelected: {\n true: {\n root: {\n bg: 'bg.subtle',\n fontWeight: 'semibold',\n _hover: {bg: 'bg.subtle'},\n _active: {bg: 'bg.subtle'},\n },\n },\n false: {},\n },\n },\n defaultVariants: {\n isSelected: false,\n },\n});\n\nexport type ToggleButtonVariants = RecipeVariantProps<\n typeof toggleButtonRecipe\n>;\n","import {\n createContext,\n use,\n useCallback,\n useMemo,\n type CSSProperties,\n type ReactNode,\n type Ref,\n} from 'react';\nimport type {ButtonSize} from 'components/Button';\nimport {cx} from 'internal/cx';\nimport {css} from 'styled-system/css';\n\nexport type ToggleButtonGroupOrientation = 'horizontal' | 'vertical';\n\ninterface ToggleButtonGroupContextValue {\n isDisabled?: boolean;\n onToggle: (value: string) => void;\n selectedValues: Set<string>;\n size?: ButtonSize;\n}\n\nconst ToggleButtonGroupContext =\n createContext<ToggleButtonGroupContextValue | null>(null);\n\nToggleButtonGroupContext.displayName = 'ToggleButtonGroupContext';\n\nexport function useToggleButtonGroup(): ToggleButtonGroupContextValue | null {\n return use(ToggleButtonGroupContext);\n}\n\ninterface ToggleButtonGroupBaseProps {\n /**\n * Toggle button children.\n */\n children: ReactNode;\n /**\n * Additional CSS class names applied to the group root.\n */\n className?: string;\n /**\n * Test ID applied to the group root.\n */\n 'data-testid'?: string;\n /**\n * Whether all buttons in the group are disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Accessible label for the group.\n */\n label: string;\n /**\n * Group orientation.\n * @default 'horizontal'\n */\n orientation?: ToggleButtonGroupOrientation;\n /**\n * Ref forwarded to the group root.\n */\n ref?: Ref<HTMLDivElement>;\n /**\n * Default size for buttons in the group.\n */\n size?: ButtonSize;\n /**\n * Inline styles applied to the group root.\n */\n style?: CSSProperties;\n}\n\nexport interface ToggleButtonGroupSingleProps extends ToggleButtonGroupBaseProps {\n /**\n * Called with the selected value when selection changes, or `null`\n * when the active button is deselected.\n */\n onChange: (value: string | null) => void;\n /**\n * Single-selection mode. Clicking the active button clears selection.\n * @default 'single'\n */\n type?: 'single';\n /**\n * Currently selected value, or `null` for no selection.\n */\n value: string | null;\n}\n\nexport interface ToggleButtonGroupMultipleProps extends ToggleButtonGroupBaseProps {\n /**\n * Called with the array of selected values when selection changes.\n */\n onChange: (value: string[]) => void;\n /**\n * Multiple-selection mode.\n */\n type: 'multiple';\n /**\n * Currently selected values.\n */\n value: string[];\n}\n\nexport type ToggleButtonGroupProps =\n | ToggleButtonGroupSingleProps\n | ToggleButtonGroupMultipleProps;\n\nconst styles = {\n group: css({\n display: 'inline-flex',\n alignItems: 'center',\n gap: '1',\n }),\n vertical: css({\n flexDirection: 'column',\n alignItems: 'stretch',\n }),\n} as const;\n\n/**\n * Groups related ToggleButtons and manages shared selection state.\n */\nexport function ToggleButtonGroup({\n children,\n className,\n 'data-testid': dataTestId,\n isDisabled = false,\n label,\n orientation = 'horizontal',\n ref,\n size,\n style,\n ...props\n}: ToggleButtonGroupProps): React.JSX.Element {\n const isMultiple = props.type === 'multiple';\n const {onChange, value} = props;\n\n const selectedValues = useMemo(() => {\n if (isMultiple) {\n return new Set(value as string[]);\n }\n\n return value == null ? new Set<string>() : new Set([value as string]);\n }, [isMultiple, value]);\n\n const onToggle = useCallback(\n (itemValue: string) => {\n if (isMultiple) {\n const current = value as string[];\n (onChange as (v: string[]) => void)(\n current.includes(itemValue)\n ? current.filter(v => v !== itemValue)\n : [...current, itemValue],\n );\n return;\n }\n\n const current = value as string | null;\n (onChange as (v: string | null) => void)(\n current === itemValue ? null : itemValue,\n );\n },\n [isMultiple, value, onChange],\n );\n\n const contextValue = useMemo(\n () => ({isDisabled, onToggle, selectedValues, size}),\n [isDisabled, onToggle, selectedValues, size],\n );\n\n return (\n <ToggleButtonGroupContext value={contextValue}>\n <div\n aria-disabled={isDisabled || undefined}\n aria-label={label}\n className={cx(\n styles.group,\n orientation === 'vertical' ? styles.vertical : undefined,\n className,\n )}\n data-orientation={orientation}\n data-testid={dataTestId}\n ref={ref}\n role=\"group\"\n style={style}>\n {children}\n </div>\n </ToggleButtonGroupContext>\n );\n}\n\nToggleButtonGroup.displayName = 'ToggleButtonGroup';\n","import type {CSSProperties, MouseEvent, Ref} from 'react';\nimport type {ButtonSize} from 'components/Button';\nimport {buttonRecipe} from 'components/Button/Button.recipe';\nimport {Icon, type IconComponent} from 'components/Icon';\nimport {Spinner} from 'components/Spinner';\nimport {toggleButtonRecipe} from 'components/ToggleButton/ToggleButton.recipe';\nimport {useToggleButtonGroup} from 'components/ToggleButton/ToggleButtonGroup';\nimport {Tooltip} from 'components/Tooltip';\nimport {cx} from 'internal/cx';\n\nexport interface ToggleButtonProps {\n /**\n * Additional CSS class names applied to the button root.\n */\n className?: string;\n /**\n * Test ID applied to the button root.\n */\n 'data-testid'?: string;\n /**\n * Icon element rendered before the label.\n */\n icon?: IconComponent;\n /**\n * Whether the button is disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Whether to visually hide the label and render a square icon button.\n * @default false\n */\n isIconOnly?: boolean;\n /**\n * Whether the button is loading.\n * @default false\n */\n isLoading?: boolean;\n /**\n * Whether the button is currently selected.\n * @default false\n */\n isSelected?: boolean;\n /**\n * Accessible label for the button.\n */\n label: string;\n /**\n * Called when the selected state should change.\n */\n onChange?: (isSelected: boolean) => void;\n /**\n * Ref forwarded to the button root.\n */\n ref?: Ref<HTMLButtonElement>;\n /**\n * Icon element rendered when the button is selected.\n */\n selectedIcon?: IconComponent;\n /**\n * Visual size of the button.\n */\n size?: ButtonSize;\n /**\n * Inline styles applied to the button root.\n */\n style?: CSSProperties;\n /**\n * Tooltip text shown on hover.\n */\n tooltip?: string;\n /**\n * Value identifier when used inside `ToggleButtonGroup`.\n */\n value?: string;\n}\n\n/**\n * Button that toggles between selected and unselected states.\n */\nexport function ToggleButton({\n className,\n 'data-testid': dataTestId,\n icon,\n isDisabled: isDisabledProp = false,\n isIconOnly = false,\n isLoading = false,\n isSelected: isSelectedProp = false,\n label,\n onChange,\n selectedIcon,\n ref,\n size: sizeProp,\n style,\n tooltip,\n value,\n}: ToggleButtonProps): React.JSX.Element {\n const group = useToggleButtonGroup();\n\n if (process.env.NODE_ENV !== 'production') {\n if (group != null && value == null) {\n throw new Error(\n 'ToggleButton: `value` prop is required when used inside a ToggleButtonGroup.',\n );\n }\n }\n\n const isSelected =\n group != null && value != null\n ? group.selectedValues.has(value)\n : isSelectedProp;\n const size = sizeProp ?? group?.size ?? 'md';\n const isDisabled = isDisabledProp || group?.isDisabled === true;\n const resolvedIcon = isSelected && selectedIcon != null ? selectedIcon : icon;\n const classes = toggleButtonRecipe({isSelected});\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (isDisabled || isLoading) {\n event.preventDefault();\n return;\n }\n\n if (group != null && value != null) {\n group.onToggle(value);\n return;\n }\n\n onChange?.(!isSelected);\n };\n\n const button = (\n <button\n aria-busy={isLoading || undefined}\n aria-label={isIconOnly || isLoading ? label : undefined}\n aria-pressed={isSelected}\n className={cx(\n buttonRecipe({variant: 'ghost', size, iconOnly: isIconOnly}).root,\n classes.root,\n className,\n )}\n data-testid={dataTestId}\n disabled={isDisabled || isLoading}\n onClick={handleClick}\n ref={ref}\n style={style}\n type=\"button\">\n <span aria-hidden={isLoading || undefined} className={classes.content}>\n {resolvedIcon != null ? (\n <span className={classes.icon}>\n {isIconOnly && isLoading ? (\n <Spinner size={size} />\n ) : (\n <Icon icon={resolvedIcon} size={size} />\n )}\n </span>\n ) : null}\n {!isIconOnly ? (\n <span className={classes.labelWrapper}>\n <span className={classes.label}>{label}</span>\n <span aria-hidden=\"true\" className={classes.widthReservation}>\n {label}\n </span>\n </span>\n ) : null}\n {!isIconOnly && isLoading ? (\n <span aria-hidden=\"true\" className={classes.spinner}>\n <Spinner size={size} />\n </span>\n ) : null}\n </span>\n </button>\n );\n\n if (tooltip != null) {\n return <Tooltip content={tooltip}>{button}</Tooltip>;\n }\n\n return button;\n}\n\nToggleButton.displayName = 'ToggleButton';\n"]}
|