@stfrigerio/sito-template 0.1.76 → 0.1.78
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/organisms/charts/HabitTimeOfDayChart/HabitTimeOfDayChart.d.ts +25 -0
- package/dist/components/organisms/charts/HabitTimeOfDayChart/HabitTimeOfDayChart.d.ts.map +1 -0
- package/dist/components/organisms/charts/HabitTimeOfDayChart/HabitTimeOfDayChart.stories.d.ts +10 -0
- package/dist/components/organisms/charts/HabitTimeOfDayChart/HabitTimeOfDayChart.stories.d.ts.map +1 -0
- package/dist/components/organisms/charts/index.d.ts +2 -0
- package/dist/components/organisms/charts/index.d.ts.map +1 -1
- package/dist/components/organisms/index.d.ts +2 -0
- package/dist/components/organisms/index.d.ts.map +1 -1
- package/dist/index.esm.js +547 -220
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +550 -222
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.css.map +1 -1
- package/package.json +1 -1
- package/storybook-static/assets/{ASCIIText.stories-jyeGS_ve.js → ASCIIText.stories-CC7w_Zb7.js} +1 -1
- package/storybook-static/assets/{AllAtoms.stories-CemMq1qd.js → AllAtoms.stories-Qaf-lIlH.js} +1 -1
- package/storybook-static/assets/{AnimatedContent.stories-DffuqOCI.js → AnimatedContent.stories-CAWgPz_l.js} +1 -1
- package/storybook-static/assets/{AnimatedList.stories-DuwFQFkj.js → AnimatedList.stories-Dtm1Kj9o.js} +1 -1
- package/storybook-static/assets/{Antigravity.stories-DcbmxH5R.js → Antigravity.stories-CROe565M.js} +1 -1
- package/storybook-static/assets/{ArrayInput.stories-DvZKodHx.js → ArrayInput.stories-Cy0kQVYi.js} +1 -1
- package/storybook-static/assets/{Aurora.stories-BQOm4LDu.js → Aurora.stories-CiiqgrCk.js} +1 -1
- package/storybook-static/assets/{Beams.stories-CzdaOr3E.js → Beams.stories-BjWLvvyV.js} +1 -1
- package/storybook-static/assets/{BlobCursor.stories-DKhEEylD.js → BlobCursor.stories-C-Cy9Shk.js} +1 -1
- package/storybook-static/assets/{BlurText.stories-BXn21RBW.js → BlurText.stories-C_4t7beV.js} +1 -1
- package/storybook-static/assets/{BooleansHeatmap.stories-wo9Pvb36.js → BooleansHeatmap.stories-RaRlkL8c.js} +1 -1
- package/storybook-static/assets/{BorderGlow.stories-BVoYeD5v.js → BorderGlow.stories-8p9mPUnI.js} +1 -1
- package/storybook-static/assets/{BubbleMenu.stories-dqsJINuc.js → BubbleMenu.stories-24UYtJ08.js} +1 -1
- package/storybook-static/assets/{Button-C8DVgvIi.js → Button-DtzPIRXq.js} +1 -1
- package/storybook-static/assets/{Button.stories-X7b76nlX.js → Button.stories-CBkojkyr.js} +1 -1
- package/storybook-static/assets/{Calendar.stories-D0Uw8SPv.js → Calendar.stories-EWMWgOBv.js} +1 -1
- package/storybook-static/assets/{Card-C1CU1aJ4.js → Card-B6tfqfjH.js} +1 -1
- package/storybook-static/assets/{Card.stories-pOZ_I_3_.js → Card.stories-DteAEiOg.js} +1 -1
- package/storybook-static/assets/{CardNav.stories-OkPJO-Ni.js → CardNav.stories-C-OgJ7F_.js} +1 -1
- package/storybook-static/assets/{Carousel.stories-D3jZVWZF.js → Carousel.stories-B1w5LjkD.js} +1 -1
- package/storybook-static/assets/{Checkbox-CjfwEqdP.js → Checkbox-DAvHIuDy.js} +1 -1
- package/storybook-static/assets/{Checkbox.stories-BklK9_jk.js → Checkbox.stories-Co4ppn-V.js} +1 -1
- package/storybook-static/assets/{ChromaGrid.stories-Byrw6uQA.js → ChromaGrid.stories-tOSXlium.js} +1 -1
- package/storybook-static/assets/{CircularGallery.stories-fLTqpbyo.js → CircularGallery.stories-CdrJRVTt.js} +1 -1
- package/storybook-static/assets/{CircularText.stories-BA-dJIzs.js → CircularText.stories-Dt3nOaW4.js} +1 -1
- package/storybook-static/assets/{ClickSpark.stories-DoEJmAGn.js → ClickSpark.stories-DilLAXmz.js} +1 -1
- package/storybook-static/assets/{ColorBends.stories-DlI5eNgp.js → ColorBends.stories-hAsm_NVq.js} +1 -1
- package/storybook-static/assets/{CountUp.stories-DC06me0h.js → CountUp.stories-Bp7fmEJS.js} +1 -1
- package/storybook-static/assets/{Counter.stories-B0_x7SnO.js → Counter.stories-ASmBLuXV.js} +1 -1
- package/storybook-static/assets/{Crosshair.stories-MQfVFGQ7.js → Crosshair.stories-BTvCMRD1.js} +1 -1
- package/storybook-static/assets/{Cubes.stories-CB5LyVAa.js → Cubes.stories-BseAsSaR.js} +1 -1
- package/storybook-static/assets/{CurvedLoop.stories-pad6C9il.js → CurvedLoop.stories-BjqKVV6m.js} +1 -1
- package/storybook-static/assets/{DarkVeil.stories-CjoNpRrA.js → DarkVeil.stories-DNKi_B31.js} +1 -1
- package/storybook-static/assets/{DateInput-BOP5MJAA.js → DateInput-BVBf9Db2.js} +1 -1
- package/storybook-static/assets/{DateInput.stories-DpytWXTi.js → DateInput.stories-CeMSisPx.js} +1 -1
- package/storybook-static/assets/{DecayCard.stories-Ci8mCDU2.js → DecayCard.stories-C0wJHVS-.js} +1 -1
- package/storybook-static/assets/{DecryptedText.stories-_OcmqlGZ.js → DecryptedText.stories-BE_QpiGp.js} +1 -1
- package/storybook-static/assets/{Dither.stories-CoakUTGz.js → Dither.stories-BWuC6kd6.js} +1 -1
- package/storybook-static/assets/{Dock.stories-RZsDkvOK.js → Dock.stories-D6RP8Ryr.js} +1 -1
- package/storybook-static/assets/{EditFAB.stories-BYgIa7Ft.js → EditFAB.stories-BmCFS-7C.js} +1 -1
- package/storybook-static/assets/{EvilEye.stories-C9-B_l7O.js → EvilEye.stories-Gy3-kkok.js} +1 -1
- package/storybook-static/assets/{FadeContent.stories-BSUfS-Pa.js → FadeContent.stories-DHWHZaPD.js} +1 -1
- package/storybook-static/assets/{FaultyTerminal.stories-BaztxBZy.js → FaultyTerminal.stories-al-Vjs2U.js} +1 -1
- package/storybook-static/assets/{Fbo-BckR5Q0w.js → Fbo-CUv2NMMu.js} +1 -1
- package/storybook-static/assets/{FloatingLines.stories-B48w4g-P.js → FloatingLines.stories-DU5FAryJ.js} +1 -1
- package/storybook-static/assets/{FlowingMenu.stories-CGiY3eRk.js → FlowingMenu.stories-BxmUAvVg.js} +1 -1
- package/storybook-static/assets/{FluidGlass.stories-CHa9ViPX.js → FluidGlass.stories-BAcZi0B8.js} +1 -1
- package/storybook-static/assets/{Folder.stories-BolWKAzo.js → Folder.stories-cDjFOW5H.js} +1 -1
- package/storybook-static/assets/{FuzzyText.stories-CSRaTOLX.js → FuzzyText.stories-Cpb_7FZ5.js} +1 -1
- package/storybook-static/assets/{Galaxy.stories-CIg8QFfb.js → Galaxy.stories-D9PrakPH.js} +1 -1
- package/storybook-static/assets/{GhostCursor.stories-BQpjOfNR.js → GhostCursor.stories-Csfbqowz.js} +1 -1
- package/storybook-static/assets/{GlareHover.stories-Di_VEr2R.js → GlareHover.stories-oxm7_cy1.js} +1 -1
- package/storybook-static/assets/{GlassSurface.stories-DAkIcgOf.js → GlassSurface.stories-DuyltjNF.js} +1 -1
- package/storybook-static/assets/{GlitchText.stories-BxcuVmW5.js → GlitchText.stories-B5853b6h.js} +1 -1
- package/storybook-static/assets/{GooeyNav.stories-CTW-U7xs.js → GooeyNav.stories-B-Nb4351.js} +1 -1
- package/storybook-static/assets/{GradientBlinds.stories-fBqlT4g6.js → GradientBlinds.stories-B619oOT7.js} +1 -1
- package/storybook-static/assets/{GradientText.stories-BZerGqdF.js → GradientText.stories-DQ6xrREc.js} +1 -1
- package/storybook-static/assets/{Grainient.stories-CzqvhFb3.js → Grainient.stories-DXh9q7qM.js} +1 -1
- package/storybook-static/assets/{GridMotion.stories-CfjnoneJ.js → GridMotion.stories-DXeVQVRv.js} +1 -1
- package/storybook-static/assets/HabitTimeOfDayChart-CCVRaScE.css +1 -0
- package/storybook-static/assets/HabitTimeOfDayChart.stories-xpzlnQ95.js +44 -0
- package/storybook-static/assets/{ImageSlideshow.stories-DQvn07Dy.js → ImageSlideshow.stories-dd0nN5QE.js} +1 -1
- package/storybook-static/assets/{Iridescence.stories-DZ0dT4zy.js → Iridescence.stories-D1s7Q4uW.js} +1 -1
- package/storybook-static/assets/{LaserFlow.stories-CZg0PMHs.js → LaserFlow.stories---foHG1h.js} +1 -1
- package/storybook-static/assets/{LetterGlitch.stories-BNqR58lP.js → LetterGlitch.stories-mWR6cSTP.js} +1 -1
- package/storybook-static/assets/{LightPillar.stories-DkmTFDSR.js → LightPillar.stories-DO82NK6W.js} +1 -1
- package/storybook-static/assets/{LightRays.stories-CYtKgl66.js → LightRays.stories-C7ORCkFU.js} +1 -1
- package/storybook-static/assets/{Lightning.stories-CI_IBNog.js → Lightning.stories-CXKsWwIZ.js} +1 -1
- package/storybook-static/assets/{LineWaves.stories-19E6lLvu.js → LineWaves.stories-B9cdFW5z.js} +1 -1
- package/storybook-static/assets/{LiquidChrome.stories-Ik5wMITA.js → LiquidChrome.stories-DpEdip1S.js} +1 -1
- package/storybook-static/assets/{LiquidEther.stories-cRVhMCnV.js → LiquidEther.stories-B7BuQM2F.js} +1 -1
- package/storybook-static/assets/{LoadingSpinner-B3jiWJ5i.js → LoadingSpinner-lq4yMoNZ.js} +1 -1
- package/storybook-static/assets/{LoadingSpinner.stories-7o51GOVb.js → LoadingSpinner.stories-BYENiDYK.js} +1 -1
- package/storybook-static/assets/{MagicRings.stories-BdhXUzZR.js → MagicRings.stories-BiCNl5iP.js} +1 -1
- package/storybook-static/assets/{Magnet.stories-BP_O9O9B.js → Magnet.stories-jLEkLPcD.js} +1 -1
- package/storybook-static/assets/{MagnetLines.stories-DO5Vf2eN.js → MagnetLines.stories-YRUgkAu9.js} +1 -1
- package/storybook-static/assets/{Masonry.stories-CbvsjL9N.js → Masonry.stories-ChP6h5z3.js} +1 -1
- package/storybook-static/assets/{MetaBalls.stories-mzBfHDeT.js → MetaBalls.stories-CwxXREc7.js} +1 -1
- package/storybook-static/assets/{MetallicPaint.stories-DwrE7et4.js → MetallicPaint.stories-CY90vc3E.js} +1 -1
- package/storybook-static/assets/{MoodChart.stories-BW4k1gRH.js → MoodChart.stories-C54nQjeF.js} +1 -1
- package/storybook-static/assets/{MotionConfigContext-C6KIXCCK.js → MotionConfigContext-DPLvddvp.js} +1 -1
- package/storybook-static/assets/{Navbar.stories-MCOlCO7j.js → Navbar.stories-BZapiN1p.js} +1 -1
- package/storybook-static/assets/{Noise.stories-BX29bXzI.js → Noise.stories-uztpK8B2.js} +1 -1
- package/storybook-static/assets/{NumberStepper-CGuZE3IG.js → NumberStepper-CTYms_1a.js} +1 -1
- package/storybook-static/assets/{NumberStepper.stories-CM1-xjqx.js → NumberStepper.stories-pL8LYCQY.js} +1 -1
- package/storybook-static/assets/{Orb.stories-C1U1NFn1.js → Orb.stories-D4Fb6Q-L.js} +1 -1
- package/storybook-static/assets/{OrbitImages.stories-_U1a6MJ2.js → OrbitImages.stories-CPniDCsF.js} +1 -1
- package/storybook-static/assets/{PieChart.stories-U46uc40e.js → PieChart.stories-mAy_BCoF.js} +1 -1
- package/storybook-static/assets/{PixelBlast.stories--1zBJff-.js → PixelBlast.stories-Caf1SG-D.js} +1 -1
- package/storybook-static/assets/{PixelCard.stories-CKIsLyL5.js → PixelCard.stories-BZ31L-sS.js} +1 -1
- package/storybook-static/assets/{PixelSnow.stories-CR4xLE4U.js → PixelSnow.stories-BC-MlTcf.js} +1 -1
- package/storybook-static/assets/{PixelTransition.stories-Dd9P0Ope.js → PixelTransition.stories-Bn7uR_O_.js} +1 -1
- package/storybook-static/assets/{Plasma.stories-M-hYDX27.js → Plasma.stories-CXhXi8-9.js} +1 -1
- package/storybook-static/assets/{Prism.stories-DwfbD3cn.js → Prism.stories-BE4AyPs3.js} +1 -1
- package/storybook-static/assets/{PrismaticBurst.stories-CvPmYAX_.js → PrismaticBurst.stories-DT7lYI0J.js} +1 -1
- package/storybook-static/assets/{ProfileCard.stories-DP2eHRdZ.js → ProfileCard.stories-www_pmKI.js} +1 -1
- package/storybook-static/assets/{QuantifiableHabitsChart.stories-RglnD2R_.js → QuantifiableHabitsChart.stories-C-mB8ibQ.js} +1 -1
- package/storybook-static/assets/{Radar.stories-D-LhC9r4.js → Radar.stories-cKxUW3Pf.js} +1 -1
- package/storybook-static/assets/{Ribbons.stories-CJuxGieY.js → Ribbons.stories-R7mbMGR3.js} +1 -1
- package/storybook-static/assets/{RippleGrid.stories-D_3EPPTM.js → RippleGrid.stories-DJFPB45-.js} +1 -1
- package/storybook-static/assets/{RotatingText.stories-DYP0oyH6.js → RotatingText.stories-CT2iBJtr.js} +1 -1
- package/storybook-static/assets/{ScrollFloat.stories-Dzwz8uzu.js → ScrollFloat.stories-C00s7Tav.js} +1 -1
- package/storybook-static/assets/{ScrollReveal.stories-C_EqHFb_.js → ScrollReveal.stories-Cx0hRE56.js} +1 -1
- package/storybook-static/assets/{ScrollVelocity.stories-YdJitu_P.js → ScrollVelocity.stories-BGxqm84H.js} +1 -1
- package/storybook-static/assets/{SearchBar.stories-BJbLKP2g.js → SearchBar.stories-Gf4DuJ87.js} +1 -1
- package/storybook-static/assets/{SearchableDropdown-fnf6ZW_h.js → SearchableDropdown-BkGO_32K.js} +1 -1
- package/storybook-static/assets/{SearchableDropdown.stories-CJ8_zZjz.js → SearchableDropdown.stories-CT874V6G.js} +1 -1
- package/storybook-static/assets/SelectInput-BU8RV4V4.css +1 -0
- package/storybook-static/assets/{SelectInput-DXau1Dph.js → SelectInput-Hd6ZNqhj.js} +1 -1
- package/storybook-static/assets/{SelectInput.stories-DuPwC-pM.js → SelectInput.stories-Cp5WRoKm.js} +1 -1
- package/storybook-static/assets/{ShapeBlur.stories-BzSypzdO.js → ShapeBlur.stories-DBj0h6Ov.js} +1 -1
- package/storybook-static/assets/{ShapeGrid.stories-CDkUZpth.js → ShapeGrid.stories-BxR6R44A.js} +1 -1
- package/storybook-static/assets/{ShinyText.stories-CGKy0Lsc.js → ShinyText.stories-Cm6DUoFF.js} +1 -1
- package/storybook-static/assets/{Silk.stories-CChDBqxY.js → Silk.stories-D65z_bnD.js} +1 -1
- package/storybook-static/assets/SleepChart.stories-BhlTYTJM.js +58 -0
- package/storybook-static/assets/{Slider-BeoCTJYT.js → Slider-BX8qMaE_.js} +1 -1
- package/storybook-static/assets/{Slider.stories-DVeQHWs3.js → Slider.stories-DItcyS21.js} +1 -1
- package/storybook-static/assets/{SoftAurora.stories-DrO_ij-V.js → SoftAurora.stories-NYzJ9emk.js} +1 -1
- package/storybook-static/assets/{SoundDemo.stories-f1ehfLPn.js → SoundDemo.stories-DpuoGDe1.js} +1 -1
- package/storybook-static/assets/{SplashCursor.stories-BECToVQy.js → SplashCursor.stories-ByrBIxgW.js} +1 -1
- package/storybook-static/assets/{SpotlightCard.stories-Ck8nALce.js → SpotlightCard.stories-CPCRu27S.js} +1 -1
- package/storybook-static/assets/{Stack.stories-BdN1_7tM.js → Stack.stories-CzQ0roYS.js} +1 -1
- package/storybook-static/assets/{StaggeredMenu.stories-CTDmplGV.js → StaggeredMenu.stories-4-Ub5zq5.js} +1 -1
- package/storybook-static/assets/{StarBorder.stories-Bwpc59IM.js → StarBorder.stories-zxBxdEVo.js} +1 -1
- package/storybook-static/assets/{SunburstChart.stories-CNOZJwAZ.js → SunburstChart.stories-B8XjQlnj.js} +1 -1
- package/storybook-static/assets/{Table.stories-Cd6TvRiK.js → Table.stories-CeUZbyGR.js} +1 -1
- package/storybook-static/assets/{Tabs.stories-BoVk_o27.js → Tabs.stories-Bt4U-2zQ.js} +1 -1
- package/storybook-static/assets/{TargetCursor.stories-DdklJLjf.js → TargetCursor.stories-BoPvwDnE.js} +1 -1
- package/storybook-static/assets/{TextArea-BoTwFvlF.js → TextArea-D7KTGABN.js} +1 -1
- package/storybook-static/assets/{TextArea.stories-4mPBw5bl.js → TextArea.stories-ByTnocqN.js} +1 -1
- package/storybook-static/assets/{TextCursor.stories-Dbz8i54O.js → TextCursor.stories-DtuvL5LJ.js} +1 -1
- package/storybook-static/assets/{TextInput-DTyHhomU.js → TextInput-NcTywb5k.js} +1 -1
- package/storybook-static/assets/{TextInput.stories-CjQMs9vK.js → TextInput.stories-DCD3IVam.js} +1 -1
- package/storybook-static/assets/{TextPressure.stories-Da2afCXS.js → TextPressure.stories-B2pW02YP.js} +1 -1
- package/storybook-static/assets/{TextType.stories-DP8FaemU.js → TextType.stories-RxIjwcpK.js} +1 -1
- package/storybook-static/assets/{ThemeSwitcher.stories-BOdoMWBr.js → ThemeSwitcher.stories-CuS7ULFB.js} +1 -1
- package/storybook-static/assets/{Threads.stories-Bsyw4BNf.js → Threads.stories-C5cQzyMO.js} +1 -1
- package/storybook-static/assets/{TimeInput.stories-3qbOV7Ls.js → TimeInput.stories-CjaGp3VF.js} +1 -1
- package/storybook-static/assets/{Toggle-Bwvgtrvs.js → Toggle-CFshZc3M.js} +1 -1
- package/storybook-static/assets/{Toggle.stories-BZa844c0.js → Toggle.stories-KZTVvRIX.js} +1 -1
- package/storybook-static/assets/{ToggleButton-BINAb7TQ.js → ToggleButton-DahhKKKD.js} +1 -1
- package/storybook-static/assets/{ToggleButton.stories-GWQ4L4ac.js → ToggleButton.stories-BecyzTSv.js} +1 -1
- package/storybook-static/assets/{TrueFocus.stories-CiK6TsZ_.js → TrueFocus.stories-B2qukCVC.js} +1 -1
- package/storybook-static/assets/{VariableProximity.stories-DE-_f9_v.js → VariableProximity.stories-kLxJIzgW.js} +1 -1
- package/storybook-static/assets/{Waves.stories-Bah9ng0K.js → Waves.stories-HWs82fyv.js} +1 -1
- package/storybook-static/assets/band-BYy0bT_S.js +1 -0
- package/storybook-static/assets/{check-bvk6C-TA.js → check-C0QYXCQq.js} +1 -1
- package/storybook-static/assets/{chevron-down-Dnj3nVPe.js → chevron-down-BYkclAjw.js} +1 -1
- package/storybook-static/assets/{chevron-right-FoZPyhXE.js → chevron-right-BpTsdNPU.js} +1 -1
- package/storybook-static/assets/client-zvjl4wpt.js +1 -0
- package/storybook-static/assets/{createLucideIcon-DvNKQIkb.js → createLucideIcon-C0vN6Cdq.js} +1 -1
- package/storybook-static/assets/{download-BEyY_c4w.js → download-DjUyuZUg.js} +1 -1
- package/storybook-static/assets/{folder-Dr-EdDO1.js → folder-C0M5Rug7.js} +1 -1
- package/storybook-static/assets/{iconBase-daIQ2k2U.js → iconBase-D9JibhHP.js} +1 -1
- package/storybook-static/assets/{iframe-BmJYCQaV.js → iframe-CHP6sYHA.js} +3 -3
- package/storybook-static/assets/{index-GkLzrRJX.js → index-BE2LY7RL.js} +1 -1
- package/storybook-static/assets/{index-8y2D1xIF.js → index-MBwiYTbW.js} +1 -1
- package/storybook-static/assets/{index-CCV231j6.js → index-kmZmSx5Q.js} +1 -1
- package/storybook-static/assets/{linear-dkJHgUri.js → linear-DhrdWH9x.js} +1 -1
- package/storybook-static/assets/{monotone-DHdPkfDP.js → monotone-DouxdRGd.js} +1 -1
- package/storybook-static/assets/{proxy-MAU_yIzM.js → proxy-CKTlCz4V.js} +1 -1
- package/storybook-static/assets/{react-18-DCqWj-iG.js → react-18-Dbj2E7QK.js} +1 -1
- package/storybook-static/assets/{react-three-fiber.esm-J8Ycqtkj.js → react-three-fiber.esm-CEqTsj3Q.js} +1 -1
- package/storybook-static/assets/{search-T1_DPJWy.js → search-BN18ZfML.js} +1 -1
- package/storybook-static/assets/{settings-D0WRQxad.js → settings-C0mG0eRJ.js} +1 -1
- package/storybook-static/assets/{sun-D1G2h9I4.js → sun-B-kVinvA.js} +1 -1
- package/storybook-static/assets/{transform-BKmuZieF.js → transform-QOf3tDlt.js} +1 -1
- package/storybook-static/assets/{trash-2-B7B7imFa.js → trash-2-C1860oG6.js} +1 -1
- package/storybook-static/assets/{use-animation-frame-C3OkOmFg.js → use-animation-frame-B-TgEmgt.js} +1 -1
- package/storybook-static/assets/{use-in-view-BUiyIXbb.js → use-in-view-DuXpNPL7.js} +1 -1
- package/storybook-static/assets/{use-motion-value-D1yqdG0l.js → use-motion-value-BkTtRo1-.js} +1 -1
- package/storybook-static/assets/{use-spring-BwMrSe4y.js → use-spring-DXYP2-ws.js} +1 -1
- package/storybook-static/assets/{use-transform-CTCcIVjx.js → use-transform-D10ftuwp.js} +1 -1
- package/storybook-static/assets/{useSound-C72L733V.js → useSound-B5F93XCP.js} +1 -1
- package/storybook-static/assets/{users-DMXSY-kZ.js → users-CbNaSdtt.js} +1 -1
- package/storybook-static/assets/{x-DzTJWbpQ.js → x-BFuIQJ4n.js} +1 -1
- package/storybook-static/iframe.html +1 -1
- package/storybook-static/index.json +1 -1
- package/storybook-static/project.json +1 -1
- package/storybook-static/assets/SelectInput-BTPptV1H.css +0 -1
- package/storybook-static/assets/SleepChart.stories-WRltn-Jx.js +0 -58
- package/storybook-static/assets/client-Dyko2a81.js +0 -1
package/dist/index.js
CHANGED
|
@@ -9,7 +9,7 @@ var dayjs = require('dayjs');
|
|
|
9
9
|
var MobileTimePicker = require('@mui/x-date-pickers/MobileTimePicker');
|
|
10
10
|
var LocalizationProvider = require('@mui/x-date-pickers/LocalizationProvider');
|
|
11
11
|
var AdapterDayjs = require('@mui/x-date-pickers/AdapterDayjs');
|
|
12
|
-
var styles$
|
|
12
|
+
var styles$C = require('@mui/material/styles');
|
|
13
13
|
var d3 = require('d3');
|
|
14
14
|
|
|
15
15
|
function _interopNamespaceDefault(e) {
|
|
@@ -31,7 +31,7 @@ function _interopNamespaceDefault(e) {
|
|
|
31
31
|
|
|
32
32
|
var d3__namespace = /*#__PURE__*/_interopNamespaceDefault(d3);
|
|
33
33
|
|
|
34
|
-
var styles$
|
|
34
|
+
var styles$B = {"button":"Button-module_button__c6nkW","primary":"Button-module_primary__pMqAs","secondary":"Button-module_secondary__mBWx9","outline":"Button-module_outline__NGGGN","ghost":"Button-module_ghost__u2QBF","danger":"Button-module_danger__2ewhr","small":"Button-module_small__ZI9RX","medium":"Button-module_medium__Wnf9t","large":"Button-module_large__cQCpA","fullWidth":"Button-module_fullWidth__N8vYg","loading":"Button-module_loading__hcSI4","spinner":"Button-module_spinner__HtM96","spin":"Button-module_spin__jblrj","iconLeft":"Button-module_iconLeft__Fpz-y","iconRight":"Button-module_iconRight__kTfjS"};
|
|
35
35
|
|
|
36
36
|
const SOUND_PACKS = {
|
|
37
37
|
digital: {
|
|
@@ -596,11 +596,11 @@ function useComponentSound(config, options) {
|
|
|
596
596
|
const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loading = false, iconLeft, iconRight, children, className = '', disabled, motionProps, soundConfig, onClick, onMouseEnter, onFocus, ...rest }) => {
|
|
597
597
|
const { handlers } = useComponentSound(soundConfig);
|
|
598
598
|
const buttonClasses = [
|
|
599
|
-
styles$
|
|
600
|
-
styles$
|
|
601
|
-
styles$
|
|
602
|
-
fullWidth && styles$
|
|
603
|
-
loading && styles$
|
|
599
|
+
styles$B.button,
|
|
600
|
+
styles$B[variant],
|
|
601
|
+
styles$B[size],
|
|
602
|
+
fullWidth && styles$B.fullWidth,
|
|
603
|
+
loading && styles$B.loading,
|
|
604
604
|
className
|
|
605
605
|
].filter(Boolean).join(' ');
|
|
606
606
|
const handleClick = (e) => {
|
|
@@ -611,10 +611,10 @@ const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loadi
|
|
|
611
611
|
handlers.onMouseEnter?.();
|
|
612
612
|
onMouseEnter?.(e);
|
|
613
613
|
};
|
|
614
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: onFocus, ...motionProps, ...rest, children: [loading && jsxRuntime.jsx("span", { className: styles$
|
|
614
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: onFocus, ...motionProps, ...rest, children: [loading && jsxRuntime.jsx("span", { className: styles$B.spinner }), iconLeft && jsxRuntime.jsx("span", { className: styles$B.iconLeft, children: iconLeft }), children, iconRight && jsxRuntime.jsx("span", { className: styles$B.iconRight, children: iconRight })] }));
|
|
615
615
|
};
|
|
616
616
|
|
|
617
|
-
var styles$
|
|
617
|
+
var styles$A = {"card":"Card-module_card__r2DB2","hoverable":"Card-module_hoverable__X3OpS","elevated":"Card-module_elevated__hGV6-","outlined":"Card-module_outlined__ngRag","flat":"Card-module_flat__xy-xt","glass":"Card-module_glass__Sv-Vs","imageContainer":"Card-module_imageContainer__L4ma6","image":"Card-module_image__bQBt6","header":"Card-module_header__0dtj3","headerContent":"Card-module_headerContent__W7-jD","expandButton":"Card-module_expandButton__I7f49","expandIcon":"Card-module_expandIcon__Lu-OY","expandableContent":"Card-module_expandableContent__BFgO5","expandable":"Card-module_expandable__GMXzo","body":"Card-module_body__K7eL3","footer":"Card-module_footer__L5wO-","title":"Card-module_title__pW9g8","subtitle":"Card-module_subtitle__gejH4","clickable":"Card-module_clickable__Y6fm8","padding":"Card-module_padding__wtyDo","noPadding":"Card-module_noPadding__r5Qq0","loading":"Card-module_loading__S4Wng","loadingShimmer":"Card-module_loadingShimmer__Q1Osr","loadingPulse":"Card-module_loadingPulse__bXQmC"};
|
|
618
618
|
|
|
619
619
|
/**
|
|
620
620
|
* Card Component
|
|
@@ -679,28 +679,28 @@ const Card = ({ variant = 'elevated', hoverable = false, clickable = false, padd
|
|
|
679
679
|
onExpandChange?.(newExpanded);
|
|
680
680
|
};
|
|
681
681
|
const cardClasses = [
|
|
682
|
-
styles$
|
|
683
|
-
styles$
|
|
684
|
-
hoverable && styles$
|
|
685
|
-
clickable && styles$
|
|
686
|
-
!padding && styles$
|
|
687
|
-
expandable && styles$
|
|
682
|
+
styles$A.card,
|
|
683
|
+
styles$A[variant],
|
|
684
|
+
hoverable && styles$A.hoverable,
|
|
685
|
+
clickable && styles$A.clickable,
|
|
686
|
+
!padding && styles$A.noPadding,
|
|
687
|
+
expandable && styles$A.expandable,
|
|
688
688
|
className
|
|
689
689
|
].filter(Boolean).join(' ');
|
|
690
690
|
const renderHeader = () => {
|
|
691
691
|
if (header) {
|
|
692
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
692
|
+
return (jsxRuntime.jsxs("div", { className: styles$A.header, children: [jsxRuntime.jsx("div", { className: styles$A.headerContent, children: header }), expandable && (jsxRuntime.jsx("button", { className: styles$A.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: styles$A.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
|
|
693
693
|
}
|
|
694
694
|
if (title || subtitle) {
|
|
695
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
695
|
+
return (jsxRuntime.jsxs("div", { className: styles$A.header, children: [jsxRuntime.jsxs("div", { className: styles$A.headerContent, children: [title && jsxRuntime.jsx("h3", { className: styles$A.title, children: title }), subtitle && jsxRuntime.jsx("p", { className: styles$A.subtitle, children: subtitle })] }), expandable && (jsxRuntime.jsx("button", { className: styles$A.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: styles$A.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
|
|
696
696
|
}
|
|
697
697
|
return null;
|
|
698
698
|
};
|
|
699
|
-
const cardContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [image && (jsxRuntime.jsx("div", { className: styles$
|
|
699
|
+
const cardContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [image && (jsxRuntime.jsx("div", { className: styles$A.imageContainer, children: jsxRuntime.jsx("img", { src: image, alt: imageAlt, className: styles$A.image }) })), renderHeader(), jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: (!expandable || isExpanded) && (jsxRuntime.jsxs(framerMotion.motion.div, { initial: expandable ? { height: 0, opacity: 0 } : undefined, animate: expandable ? { height: 'auto', opacity: 1 } : undefined, exit: expandable ? { height: 0, opacity: 0 } : undefined, transition: { duration: 0.3, ease: "easeInOut" }, className: styles$A.expandableContent, children: [children && (jsxRuntime.jsx("div", { className: padding ? styles$A.body : undefined, children: children })), footer && jsxRuntime.jsx("div", { className: styles$A.footer, children: footer })] }, "content")) })] }));
|
|
700
700
|
return (jsxRuntime.jsx(framerMotion.motion.div, { className: cardClasses, onClick: clickable ? onClick : undefined, whileHover: hoverable ? { y: -4 } : undefined, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: cardContent }));
|
|
701
701
|
};
|
|
702
702
|
|
|
703
|
-
var styles$
|
|
703
|
+
var styles$z = {"wrapper":"EmptyState-module_wrapper__h3Y2E","compact":"EmptyState-module_compact__HdYu1","default":"EmptyState-module_default__ACAbn","large":"EmptyState-module_large__H3ELo","icon":"EmptyState-module_icon__i7-3M","title":"EmptyState-module_title__xCyfH","message":"EmptyState-module_message__Bc5xK","action":"EmptyState-module_action__UpnvZ"};
|
|
704
704
|
|
|
705
705
|
/**
|
|
706
706
|
* EmptyState Component
|
|
@@ -737,11 +737,11 @@ var styles$y = {"wrapper":"EmptyState-module_wrapper__h3Y2E","compact":"EmptySta
|
|
|
737
737
|
* @returns {JSX.Element} The rendered EmptyState component
|
|
738
738
|
*/
|
|
739
739
|
const EmptyState = ({ icon, title, message, action, size = 'default', }) => {
|
|
740
|
-
const wrapperClass = [styles$
|
|
741
|
-
return (jsxRuntime.jsxs("div", { className: wrapperClass, children: [icon && jsxRuntime.jsx("div", { className: styles$
|
|
740
|
+
const wrapperClass = [styles$z.wrapper, styles$z[size]].filter(Boolean).join(' ');
|
|
741
|
+
return (jsxRuntime.jsxs("div", { className: wrapperClass, children: [icon && jsxRuntime.jsx("div", { className: styles$z.icon, children: icon }), title && jsxRuntime.jsx("h3", { className: styles$z.title, children: title }), jsxRuntime.jsx("p", { className: styles$z.message, children: message }), action && jsxRuntime.jsx("div", { className: styles$z.action, children: action })] }));
|
|
742
742
|
};
|
|
743
743
|
|
|
744
|
-
var styles$
|
|
744
|
+
var styles$y = {"backdrop":"Modal-module_backdrop__yOx-a","dialog":"Modal-module_dialog__yEXTq","dialogCompact":"Modal-module_dialogCompact__z1Wxp","dialogWide":"Modal-module_dialogWide__9PTXK","header":"Modal-module_header__NHHKd","title":"Modal-module_title__i3R0x","headerActions":"Modal-module_headerActions__g28UN","closeButton":"Modal-module_closeButton__siC-1","body":"Modal-module_body__U7jvM","bodyFlush":"Modal-module_bodyFlush__wtk3q"};
|
|
745
745
|
|
|
746
746
|
/**
|
|
747
747
|
* Modal Component
|
|
@@ -795,16 +795,16 @@ const Modal = ({ open, title, onClose, children, size = 'default', actions, padd
|
|
|
795
795
|
if (typeof document === 'undefined')
|
|
796
796
|
return null;
|
|
797
797
|
const dialogClass = [
|
|
798
|
-
styles$
|
|
799
|
-
size === 'compact' && styles$
|
|
800
|
-
size === 'wide' && styles$
|
|
798
|
+
styles$y.dialog,
|
|
799
|
+
size === 'compact' && styles$y.dialogCompact,
|
|
800
|
+
size === 'wide' && styles$y.dialogWide,
|
|
801
801
|
]
|
|
802
802
|
.filter(Boolean)
|
|
803
803
|
.join(' ');
|
|
804
|
-
return reactDom.createPortal(jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
804
|
+
return reactDom.createPortal(jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$y.backdrop, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, onClick: onClose, "aria-hidden": "true", children: jsxRuntime.jsxs(framerMotion.motion.div, { className: dialogClass, role: "dialog", "aria-modal": "true", "aria-label": title, initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.96, y: 8 }, transition: { duration: 0.15, ease: 'easeOut' }, onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsxs("div", { className: styles$y.header, children: [jsxRuntime.jsx("span", { className: styles$y.title, children: title }), actions && jsxRuntime.jsx("div", { className: styles$y.headerActions, children: actions }), jsxRuntime.jsx("button", { className: styles$y.closeButton, onClick: onClose, "aria-label": "Close modal", type: "button", children: jsxRuntime.jsx(lucideReact.X, { size: 16 }) })] }), jsxRuntime.jsx("div", { className: padding ? styles$y.body : styles$y.bodyFlush, children: children })] }) })) }), document.body);
|
|
805
805
|
};
|
|
806
806
|
|
|
807
|
-
var styles$
|
|
807
|
+
var styles$x = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
|
|
808
808
|
|
|
809
809
|
/**
|
|
810
810
|
* Checkbox component - Modern interactive checkbox with animations
|
|
@@ -849,13 +849,13 @@ const Checkbox = ({ checked, onChange, label, disabled = false, indeterminate =
|
|
|
849
849
|
checkboxRef.current.indeterminate = indeterminate;
|
|
850
850
|
}
|
|
851
851
|
}, [indeterminate]);
|
|
852
|
-
return (jsxRuntime.jsxs("label", { className: styles$
|
|
852
|
+
return (jsxRuntime.jsxs("label", { className: styles$x.checkboxLabel, children: [jsxRuntime.jsx("input", { ref: checkboxRef, type: "checkbox", checked: checked, onChange: (e) => {
|
|
853
853
|
const isChecked = e.target.checked;
|
|
854
854
|
onChange(isChecked);
|
|
855
855
|
if (soundConfig?.onClick !== false) {
|
|
856
856
|
playSound('toggle');
|
|
857
857
|
}
|
|
858
|
-
}, className: styles$
|
|
858
|
+
}, className: styles$x.checkbox, disabled: disabled, id: id, name: name, value: value, "aria-checked": indeterminate ? 'mixed' : checked }), label && jsxRuntime.jsx("span", { className: styles$x.checkboxText, children: label })] }));
|
|
859
859
|
};
|
|
860
860
|
|
|
861
861
|
const formatDateToEuropean = (date) => {
|
|
@@ -886,7 +886,7 @@ const parseEuropeanDate = (dateString) => {
|
|
|
886
886
|
return '';
|
|
887
887
|
};
|
|
888
888
|
|
|
889
|
-
var styles$
|
|
889
|
+
var styles$w = {"dateInput":"DateInput-module_dateInput__54VPD","label":"DateInput-module_label__yDdUw","inputWrapper":"DateInput-module_inputWrapper__x-r1d","textInput":"DateInput-module_textInput__ToOSX","calendarButton":"DateInput-module_calendarButton__JzDGD","hiddenDateInput":"DateInput-module_hiddenDateInput__IWNg3","error":"DateInput-module_error__ieuPO","success":"DateInput-module_success__rPA93","loading":"DateInput-module_loading__1DAmD"};
|
|
890
890
|
|
|
891
891
|
/**
|
|
892
892
|
* DateInput component - European format date picker with manual input support
|
|
@@ -975,19 +975,19 @@ function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus
|
|
|
975
975
|
}
|
|
976
976
|
};
|
|
977
977
|
const getClassName = () => {
|
|
978
|
-
const classes = [styles$
|
|
978
|
+
const classes = [styles$w.dateInput];
|
|
979
979
|
if (error)
|
|
980
|
-
classes.push(styles$
|
|
980
|
+
classes.push(styles$w.error);
|
|
981
981
|
if (success)
|
|
982
|
-
classes.push(styles$
|
|
982
|
+
classes.push(styles$w.success);
|
|
983
983
|
if (loading)
|
|
984
|
-
classes.push(styles$
|
|
984
|
+
classes.push(styles$w.loading);
|
|
985
985
|
return classes.join(' ');
|
|
986
986
|
};
|
|
987
|
-
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsx("label", { className: styles$
|
|
987
|
+
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsx("label", { className: styles$w.label, children: label }), jsxRuntime.jsxs("div", { className: styles$w.inputWrapper, children: [jsxRuntime.jsx("input", { type: "text", value: value.includes('-') ? formatDateToEuropean(value) : value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$w.textInput, disabled: disabled || loading, ...handlers }), jsxRuntime.jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$w.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsxRuntime.jsx(lucideReact.Calendar, {}) }), jsxRuntime.jsx("input", { ref: hiddenDateInputRef, type: "date", onChange: handleCalendarChange, className: styles$w.hiddenDateInput, tabIndex: -1, disabled: disabled || loading })] })] }));
|
|
988
988
|
}
|
|
989
989
|
|
|
990
|
-
var styles$
|
|
990
|
+
var styles$v = {"searchableDropdown":"SearchableDropdown-module_searchableDropdown__S2Nh5","dropdownTrigger":"SearchableDropdown-module_dropdownTrigger__dihdr","open":"SearchableDropdown-module_open__P7mRt","dropdownValue":"SearchableDropdown-module_dropdownValue__ydrc2","placeholder":"SearchableDropdown-module_placeholder__BwM2W","dropdownArrow":"SearchableDropdown-module_dropdownArrow__yd5fp","dropdownMenu":"SearchableDropdown-module_dropdownMenu__2Z5cc","dropdownSearch":"SearchableDropdown-module_dropdownSearch__NRk7j","searchInput":"SearchableDropdown-module_searchInput__VS2Hw","searchIcon":"SearchableDropdown-module_searchIcon__2vKFF","dropdownOptions":"SearchableDropdown-module_dropdownOptions__6YXqF","dropdownOption":"SearchableDropdown-module_dropdownOption__YwDr-","selected":"SearchableDropdown-module_selected__31JeB","highlighted":"SearchableDropdown-module_highlighted__P0bBq","checkIcon":"SearchableDropdown-module_checkIcon__YxowK","dropdownNoResults":"SearchableDropdown-module_dropdownNoResults__WW-Da","loading":"SearchableDropdown-module_loading__xlYf0"};
|
|
991
991
|
|
|
992
992
|
/**
|
|
993
993
|
* SearchableDropdown component - Modern filterable dropdown with animations
|
|
@@ -1092,23 +1092,23 @@ function SearchableDropdown({ label, value, onChange, options, placeholder = "Se
|
|
|
1092
1092
|
}
|
|
1093
1093
|
};
|
|
1094
1094
|
const getTriggerClassName = () => {
|
|
1095
|
-
const classes = [styles$
|
|
1095
|
+
const classes = [styles$v.dropdownTrigger];
|
|
1096
1096
|
if (isOpen)
|
|
1097
|
-
classes.push(styles$
|
|
1097
|
+
classes.push(styles$v.open);
|
|
1098
1098
|
if (loading)
|
|
1099
|
-
classes.push(styles$
|
|
1099
|
+
classes.push(styles$v.loading);
|
|
1100
1100
|
if (error)
|
|
1101
|
-
classes.push(styles$
|
|
1101
|
+
classes.push(styles$v.error);
|
|
1102
1102
|
return classes.join(' ');
|
|
1103
1103
|
};
|
|
1104
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
1104
|
+
return (jsxRuntime.jsxs("div", { className: styles$v.searchableDropdown, ref: dropdownRef, onKeyDown: handleKeyDown, children: [jsxRuntime.jsx("label", { children: label }), jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: getTriggerClassName(), onClick: () => !disabled && !loading && setIsOpen(!isOpen), whileTap: { scale: disabled ? 1 : 0.98 }, style: { willChange: 'transform' }, disabled: disabled, children: [jsxRuntime.jsx("span", { className: `${styles$v.dropdownValue} ${!displayValue ? styles$v.placeholder : ''}`, children: displayValue || placeholder }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: styles$v.dropdownArrow })] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$v.dropdownMenu, initial: { opacity: 0, y: -10, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: -10, scale: 0.95 }, transition: { duration: 0.2, ease: "easeOut" }, children: [jsxRuntime.jsxs("div", { className: styles$v.dropdownSearch, children: [jsxRuntime.jsx(lucideReact.Search, { className: styles$v.searchIcon }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", className: styles$v.searchInput, placeholder: "Cerca...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })] }), jsxRuntime.jsxs("div", { className: styles$v.dropdownOptions, children: [allOptions.map((opt, index) => {
|
|
1105
1105
|
const isSelected = value === opt.value;
|
|
1106
1106
|
const isHighlighted = highlightedIndex === index;
|
|
1107
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: `${styles$
|
|
1108
|
-
}), allOptions.length === 0 && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1107
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: `${styles$v.dropdownOption} ${isSelected ? styles$v.selected : ''} ${isHighlighted ? styles$v.highlighted : ''}`, onClick: () => handleSelect(opt.value), onMouseEnter: () => setHighlightedIndex(index), initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { delay: index * 0.02 }, whileTap: { scale: 0.98 }, style: { willChange: 'transform' }, children: [jsxRuntime.jsx("span", { children: opt.label }), isSelected && jsxRuntime.jsx(lucideReact.Check, { className: styles$v.checkIcon })] }, `${opt.value}-${index}`));
|
|
1108
|
+
}), allOptions.length === 0 && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$v.dropdownNoResults, initial: { opacity: 0 }, animate: { opacity: 1 }, children: "No results found" }))] })] })) })] }));
|
|
1109
1109
|
}
|
|
1110
1110
|
|
|
1111
|
-
var styles$
|
|
1111
|
+
var styles$u = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWrapper":"SelectInput-module_selectWrapper__Qr4pl","selectIcon":"SelectInput-module_selectIcon__9pjhf","error":"SelectInput-module_error__3WNJc","success":"SelectInput-module_success__WJ5ga","loading":"SelectInput-module_loading__n35N9"};
|
|
1112
1112
|
|
|
1113
1113
|
/**
|
|
1114
1114
|
* SelectInput component - Styled dropdown selector with flexible option format
|
|
@@ -1146,26 +1146,26 @@ var styles$t = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWra
|
|
|
1146
1146
|
function SelectInput({ label, value, onChange, options, placeholder = "Select...", disabled = false, error = false, success = false, loading = false, required = false, soundConfig, className }) {
|
|
1147
1147
|
const { handlers, playSound } = useComponentSound(soundConfig);
|
|
1148
1148
|
const getClassName = () => {
|
|
1149
|
-
const classes = [styles$
|
|
1149
|
+
const classes = [styles$u.selectInput];
|
|
1150
1150
|
if (error)
|
|
1151
|
-
classes.push(styles$
|
|
1151
|
+
classes.push(styles$u.error);
|
|
1152
1152
|
if (success)
|
|
1153
|
-
classes.push(styles$
|
|
1153
|
+
classes.push(styles$u.success);
|
|
1154
1154
|
if (loading)
|
|
1155
|
-
classes.push(styles$
|
|
1155
|
+
classes.push(styles$u.loading);
|
|
1156
1156
|
return classes.join(' ');
|
|
1157
1157
|
};
|
|
1158
|
-
return (jsxRuntime.jsxs("div", { className: `${getClassName()}${className ? ` ${className}` : ''}`, children: [jsxRuntime.jsxs("label", { children: [label, required && jsxRuntime.jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxRuntime.jsxs("div", { className: styles$
|
|
1158
|
+
return (jsxRuntime.jsxs("div", { className: `${getClassName()}${className ? ` ${className}` : ''}`, children: [jsxRuntime.jsxs("label", { children: [label, required && jsxRuntime.jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxRuntime.jsxs("div", { className: styles$u.selectWrapper, children: [jsxRuntime.jsxs("select", { value: value, onChange: e => {
|
|
1159
1159
|
playSound('click');
|
|
1160
1160
|
onChange(e.target.value);
|
|
1161
1161
|
}, disabled: disabled || loading, required: required, ...handlers, children: [jsxRuntime.jsx("option", { value: "", children: placeholder }), options.map(opt => {
|
|
1162
1162
|
const optionValue = typeof opt === 'string' ? opt : opt.value;
|
|
1163
1163
|
const optionLabel = typeof opt === 'string' ? opt : opt.label;
|
|
1164
1164
|
return (jsxRuntime.jsx("option", { value: optionValue, children: optionLabel }, optionValue));
|
|
1165
|
-
})] }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: styles$
|
|
1165
|
+
})] }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: styles$u.selectIcon })] })] }));
|
|
1166
1166
|
}
|
|
1167
1167
|
|
|
1168
|
-
var styles$
|
|
1168
|
+
var styles$t = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","compact":"TextArea-module_compact__U5lPn","textareaLabel":"TextArea-module_textareaLabel__7Vmyx","requiredIndicator":"TextArea-module_requiredIndicator__3Fxyy","textareaInput":"TextArea-module_textareaInput__VCDZA","characterCount":"TextArea-module_characterCount__9FO5N","nearLimit":"TextArea-module_nearLimit__cUdnw","atLimit":"TextArea-module_atLimit__GoWCC","error":"TextArea-module_error__ciHgb","success":"TextArea-module_success__a0-xD","loading":"TextArea-module_loading__CSFBR","focusMode":"TextArea-module_focusMode__9A8U-"};
|
|
1169
1169
|
|
|
1170
1170
|
/**
|
|
1171
1171
|
* TextArea component - Multi-line text input with character counting
|
|
@@ -1200,38 +1200,38 @@ var styles$s = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","
|
|
|
1200
1200
|
function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false, compact = false, className = "" }) {
|
|
1201
1201
|
const textareaId = `textarea-${Math.random().toString(36).substr(2, 9)}`;
|
|
1202
1202
|
const getContainerClassName = () => {
|
|
1203
|
-
const classes = [styles$
|
|
1203
|
+
const classes = [styles$t.textareaContainer];
|
|
1204
1204
|
if (error)
|
|
1205
|
-
classes.push(styles$
|
|
1205
|
+
classes.push(styles$t.error);
|
|
1206
1206
|
if (success)
|
|
1207
|
-
classes.push(styles$
|
|
1207
|
+
classes.push(styles$t.success);
|
|
1208
1208
|
if (loading)
|
|
1209
|
-
classes.push(styles$
|
|
1209
|
+
classes.push(styles$t.loading);
|
|
1210
1210
|
if (focusMode)
|
|
1211
|
-
classes.push(styles$
|
|
1211
|
+
classes.push(styles$t.focusMode);
|
|
1212
1212
|
if (compact)
|
|
1213
|
-
classes.push(styles$
|
|
1213
|
+
classes.push(styles$t.compact);
|
|
1214
1214
|
if (className)
|
|
1215
1215
|
classes.push(className);
|
|
1216
1216
|
return classes.join(' ');
|
|
1217
1217
|
};
|
|
1218
1218
|
const getCharCountClassName = () => {
|
|
1219
1219
|
if (!maxLength)
|
|
1220
|
-
return styles$
|
|
1221
|
-
const classes = [styles$
|
|
1220
|
+
return styles$t.characterCount;
|
|
1221
|
+
const classes = [styles$t.characterCount];
|
|
1222
1222
|
const percentage = (value.length / maxLength) * 100;
|
|
1223
1223
|
if (percentage >= 100) {
|
|
1224
|
-
classes.push(styles$
|
|
1224
|
+
classes.push(styles$t.atLimit);
|
|
1225
1225
|
}
|
|
1226
1226
|
else if (percentage >= 80) {
|
|
1227
|
-
classes.push(styles$
|
|
1227
|
+
classes.push(styles$t.nearLimit);
|
|
1228
1228
|
}
|
|
1229
1229
|
return classes.join(' ');
|
|
1230
1230
|
};
|
|
1231
|
-
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [label && (jsxRuntime.jsxs("label", { htmlFor: textareaId, className: styles$
|
|
1231
|
+
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [label && (jsxRuntime.jsxs("label", { htmlFor: textareaId, className: styles$t.textareaLabel, children: [label, required && jsxRuntime.jsx("span", { className: styles$t.requiredIndicator, children: "*" })] })), jsxRuntime.jsx("textarea", { id: textareaId, value: value, onChange: (e) => onChange(e.target.value), rows: rows, placeholder: placeholder, maxLength: maxLength, className: styles$t.textareaInput, "aria-required": required, disabled: disabled || loading, "aria-invalid": error }), maxLength && (jsxRuntime.jsxs("div", { className: getCharCountClassName(), children: [jsxRuntime.jsx("span", { children: value.length }), jsxRuntime.jsx("span", { style: { opacity: 0.7 }, children: " / " }), jsxRuntime.jsx("span", { children: maxLength })] }))] }));
|
|
1232
1232
|
}
|
|
1233
1233
|
|
|
1234
|
-
var styles$
|
|
1234
|
+
var styles$s = {"textInput":"TextInput-module_textInput__b2LVM","required":"TextInput-module_required__7uLiM","inputError":"TextInput-module_inputError__QD0a-","errorMessage":"TextInput-module_errorMessage__nIDoQ","success":"TextInput-module_success__KbSS3","loading":"TextInput-module_loading__qXaca","withIcon":"TextInput-module_withIcon__-8swm","inputIcon":"TextInput-module_inputIcon__B4czN","withAction":"TextInput-module_withAction__JD3ku","actionButton":"TextInput-module_actionButton__zFJel"};
|
|
1235
1235
|
|
|
1236
1236
|
/**
|
|
1237
1237
|
* TextInput component - A versatile text input field with label and error handling
|
|
@@ -1268,21 +1268,21 @@ function TextInput({ label, value, onChange, type = "text", onBlur, placeholder,
|
|
|
1268
1268
|
const { handlers, playSound } = useComponentSound(soundConfig);
|
|
1269
1269
|
const prevValueRef = React.useRef(value);
|
|
1270
1270
|
const getContainerClassName = () => {
|
|
1271
|
-
const classes = [styles$
|
|
1271
|
+
const classes = [styles$s.textInput];
|
|
1272
1272
|
if (success)
|
|
1273
|
-
classes.push(styles$
|
|
1273
|
+
classes.push(styles$s.success);
|
|
1274
1274
|
if (loading)
|
|
1275
|
-
classes.push(styles$
|
|
1275
|
+
classes.push(styles$s.loading);
|
|
1276
1276
|
if (icon)
|
|
1277
|
-
classes.push(styles$
|
|
1277
|
+
classes.push(styles$s.withIcon);
|
|
1278
1278
|
if (actionButton)
|
|
1279
|
-
classes.push(styles$
|
|
1279
|
+
classes.push(styles$s.withAction);
|
|
1280
1280
|
return classes.join(' ');
|
|
1281
1281
|
};
|
|
1282
1282
|
React.useEffect(() => {
|
|
1283
1283
|
prevValueRef.current = value;
|
|
1284
1284
|
}, [value]);
|
|
1285
|
-
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: inputId, children: [label, required && jsxRuntime.jsx("span", { className: styles$
|
|
1285
|
+
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: inputId, children: [label, required && jsxRuntime.jsx("span", { className: styles$s.required, children: "*" })] }), jsxRuntime.jsxs("div", { style: { position: 'relative' }, children: [icon && jsxRuntime.jsx("div", { className: styles$s.inputIcon, children: icon }), jsxRuntime.jsx("input", { id: inputId, type: type, value: value, onChange: (e) => {
|
|
1286
1286
|
const newValue = e.target.value;
|
|
1287
1287
|
const oldValue = prevValueRef.current;
|
|
1288
1288
|
onChange(newValue);
|
|
@@ -1298,13 +1298,13 @@ function TextInput({ label, value, onChange, type = "text", onBlur, placeholder,
|
|
|
1298
1298
|
if (error && soundConfig?.onError) {
|
|
1299
1299
|
playSound(typeof soundConfig.onError === 'string' ? soundConfig.onError : 'error');
|
|
1300
1300
|
}
|
|
1301
|
-
}, onBlur: onBlur, placeholder: placeholder, className: error ? styles$
|
|
1301
|
+
}, onBlur: onBlur, placeholder: placeholder, className: error ? styles$s.inputError : '', "aria-invalid": !!error, "aria-describedby": error ? `${inputId}-error` : undefined, disabled: disabled || loading, maxLength: maxLength, autoComplete: autoComplete }), actionButton && (jsxRuntime.jsx("button", { type: "button", className: styles$s.actionButton, onClick: () => {
|
|
1302
1302
|
handlers.onClick?.();
|
|
1303
1303
|
actionButton.onClick();
|
|
1304
|
-
}, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsxRuntime.jsx("span", { id: `${inputId}-error`, className: styles$
|
|
1304
|
+
}, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsxRuntime.jsx("span", { id: `${inputId}-error`, className: styles$s.errorMessage, children: error }))] }));
|
|
1305
1305
|
}
|
|
1306
1306
|
|
|
1307
|
-
var styles$
|
|
1307
|
+
var styles$r = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
|
|
1308
1308
|
|
|
1309
1309
|
/**
|
|
1310
1310
|
* Toggle Component
|
|
@@ -1365,7 +1365,7 @@ function Toggle(props) {
|
|
|
1365
1365
|
justifyContent: 'center',
|
|
1366
1366
|
...style
|
|
1367
1367
|
};
|
|
1368
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
1368
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$r.toggleContainer} ${className || ''}`, children: [jsxRuntime.jsxs(framerMotion.motion.button, { ref: leftButtonRef, className: `${styles$r.toggleButton} ${!isOn ? styles$r.active : ''}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: () => {
|
|
1369
1369
|
if (!isOn) {
|
|
1370
1370
|
// Already on left
|
|
1371
1371
|
if (enableCelebration) {
|
|
@@ -1380,7 +1380,7 @@ function Toggle(props) {
|
|
|
1380
1380
|
playSound('toggle');
|
|
1381
1381
|
}
|
|
1382
1382
|
onToggle(false);
|
|
1383
|
-
}, onMouseEnter: () => handlers.onMouseEnter?.(), style: buttonStyle, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: { scale: !isOn ? 1.1 : 1, rotate: !isOn ? [0, -5, 5, 0] : 0 }, transition: { duration: 0.3 }, children: leftIcon }), leftLabel] }), jsxRuntime.jsxs(framerMotion.motion.button, { ref: rightButtonRef, className: `${styles$
|
|
1383
|
+
}, onMouseEnter: () => handlers.onMouseEnter?.(), style: buttonStyle, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: { scale: !isOn ? 1.1 : 1, rotate: !isOn ? [0, -5, 5, 0] : 0 }, transition: { duration: 0.3 }, children: leftIcon }), leftLabel] }), jsxRuntime.jsxs(framerMotion.motion.button, { ref: rightButtonRef, className: `${styles$r.toggleButton} ${isOn ? styles$r.active : ''}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: () => {
|
|
1384
1384
|
if (isOn) {
|
|
1385
1385
|
// Already on right
|
|
1386
1386
|
if (enableCelebration) {
|
|
@@ -1398,7 +1398,7 @@ function Toggle(props) {
|
|
|
1398
1398
|
}, onMouseEnter: () => handlers.onMouseEnter?.(), style: buttonStyle, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: { scale: isOn ? 1.1 : 1, rotate: isOn ? [0, 5, -5, 0] : 0 }, transition: { duration: 0.3 }, children: rightIcon }), rightLabel] })] }));
|
|
1399
1399
|
}
|
|
1400
1400
|
|
|
1401
|
-
var styles$
|
|
1401
|
+
var styles$q = {"container":"NumberStepper-module_container__WSGlU","header":"NumberStepper-module_header__qXI1Y","icon":"NumberStepper-module_icon__vHgsw","label":"NumberStepper-module_label__AYr3g","stepper":"NumberStepper-module_stepper__oQhTp","disabled":"NumberStepper-module_disabled__kGB-g","button":"NumberStepper-module_button__YcjRt","buttonIcon":"NumberStepper-module_buttonIcon__odXec","valueContainer":"NumberStepper-module_valueContainer__87w2D","valueWrapper":"NumberStepper-module_valueWrapper__TH65N","value":"NumberStepper-module_value__BxJeD","limits":"NumberStepper-module_limits__-UrRE","limit":"NumberStepper-module_limit__7nbIP","small":"NumberStepper-module_small__P-k96","large":"NumberStepper-module_large__Lz6lk","outlined":"NumberStepper-module_outlined__CIXv7","filled":"NumberStepper-module_filled__IxOg-","minimal":"NumberStepper-module_minimal__y47-W","custom":"NumberStepper-module_custom__XGSVg","vertical":"NumberStepper-module_vertical__nBcL7","pulse":"NumberStepper-module_pulse__51oUo"};
|
|
1402
1402
|
|
|
1403
1403
|
/**
|
|
1404
1404
|
* NumberStepper Component
|
|
@@ -1585,32 +1585,32 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
|
|
|
1585
1585
|
setDisplayValue(finalValue);
|
|
1586
1586
|
}, [displayValue, min, max, step, onChange]);
|
|
1587
1587
|
const containerClasses = [
|
|
1588
|
-
styles$
|
|
1589
|
-
styles$
|
|
1590
|
-
styles$
|
|
1591
|
-
layout === 'vertical' && styles$
|
|
1592
|
-
disabled && styles$
|
|
1588
|
+
styles$q.container,
|
|
1589
|
+
styles$q[size],
|
|
1590
|
+
styles$q[variant],
|
|
1591
|
+
layout === 'vertical' && styles$q.vertical,
|
|
1592
|
+
disabled && styles$q.disabled,
|
|
1593
1593
|
className
|
|
1594
1594
|
].filter(Boolean).join(' ');
|
|
1595
1595
|
// Merge custom styles with hover states
|
|
1596
1596
|
const [isButtonHovered, setIsButtonHovered] = React.useState(null);
|
|
1597
1597
|
const isDecrementDisabled = disabled || value <= min;
|
|
1598
1598
|
const isIncrementDisabled = disabled || value >= max;
|
|
1599
|
-
const stepperContent = (jsxRuntime.jsxs("div", { className: styles$
|
|
1599
|
+
const stepperContent = (jsxRuntime.jsxs("div", { className: styles$q.stepper, style: customStyles.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, ...handlers, children: [jsxRuntime.jsx(framerMotion.motion.button, { className: styles$q.button, style: {
|
|
1600
1600
|
...customStyles.button,
|
|
1601
1601
|
...(isButtonHovered === 'decrement' && customStyles.buttonHover)
|
|
1602
|
-
}, onMouseEnter: () => setIsButtonHovered('decrement'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleDecrement, disabled: isDecrementDisabled, whileTap: !isDecrementDisabled ? { scale: 0.9 } : undefined, animate: isDecrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Decrease value", children: customButtons.decrement || (showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$
|
|
1602
|
+
}, onMouseEnter: () => setIsButtonHovered('decrement'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleDecrement, disabled: isDecrementDisabled, whileTap: !isDecrementDisabled ? { scale: 0.9 } : undefined, animate: isDecrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Decrease value", children: customButtons.decrement || (showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$q.buttonIcon, style: customStyles.buttonIcon, children: "\u2212" })) : (jsxRuntime.jsx("svg", { className: styles$q.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) }), jsxRuntime.jsx("div", { className: styles$q.valueContainer, style: customStyles.valueContainer, children: jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: jsxRuntime.jsx(framerMotion.motion.div, { initial: { y: isIncrementing ? 10 : isDecrementing ? -10 : 0, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: isIncrementing ? -10 : isDecrementing ? 10 : 0, opacity: 0 }, transition: { duration: 0.15 }, className: styles$q.valueWrapper, children: jsxRuntime.jsx("input", { type: "text", className: styles$q.value, style: customStyles.value, value: displayValue, onChange: handleInputChange, onBlur: handleInputBlur, disabled: disabled, "aria-label": label || "Number input", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value }) }, value) }) }), jsxRuntime.jsx(framerMotion.motion.button, { className: styles$q.button, style: {
|
|
1603
1603
|
...customStyles.button,
|
|
1604
1604
|
...(isButtonHovered === 'increment' && customStyles.buttonHover)
|
|
1605
|
-
}, onMouseEnter: () => setIsButtonHovered('increment'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleIncrement, disabled: isIncrementDisabled, whileTap: !isIncrementDisabled ? { scale: 0.9 } : undefined, animate: isIncrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Increase value", children: customButtons.increment || (showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$
|
|
1605
|
+
}, onMouseEnter: () => setIsButtonHovered('increment'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleIncrement, disabled: isIncrementDisabled, whileTap: !isIncrementDisabled ? { scale: 0.9 } : undefined, animate: isIncrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Increase value", children: customButtons.increment || (showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$q.buttonIcon, style: customStyles.buttonIcon, children: "+" })) : (jsxRuntime.jsx("svg", { className: styles$q.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) })] }));
|
|
1606
1606
|
// For custom variant with horizontal layout, render differently
|
|
1607
1607
|
if (variant === 'custom' && (label || icon)) {
|
|
1608
|
-
return (jsxRuntime.jsxs("div", { className: containerClasses, style: { ...customStyles.container, display: 'flex', alignItems: 'center' }, children: [jsxRuntime.jsxs("div", { className: styles$
|
|
1608
|
+
return (jsxRuntime.jsxs("div", { className: containerClasses, style: { ...customStyles.container, display: 'flex', alignItems: 'center' }, children: [jsxRuntime.jsxs("div", { className: styles$q.header, style: { ...customStyles.header, flex: 1, marginBottom: 0 }, children: [icon && jsxRuntime.jsx("span", { className: styles$q.icon, style: customStyles.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$q.label, style: customStyles.label, children: label })] }), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxRuntime.jsxs("div", { className: styles$q.limits, style: customStyles.limits, children: [jsxRuntime.jsx("span", { className: styles$q.limit, children: min !== -Infinity && `Min: ${min}` }), jsxRuntime.jsx("span", { className: styles$q.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
|
|
1609
1609
|
}
|
|
1610
|
-
return (jsxRuntime.jsxs("div", { className: containerClasses, style: customStyles.container, children: [(label || icon) && (jsxRuntime.jsxs("div", { className: styles$
|
|
1610
|
+
return (jsxRuntime.jsxs("div", { className: containerClasses, style: customStyles.container, children: [(label || icon) && (jsxRuntime.jsxs("div", { className: styles$q.header, style: customStyles.header, children: [icon && jsxRuntime.jsx("span", { className: styles$q.icon, style: customStyles.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$q.label, style: customStyles.label, children: label })] })), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxRuntime.jsxs("div", { className: styles$q.limits, style: customStyles.limits, children: [jsxRuntime.jsx("span", { className: styles$q.limit, children: min !== -Infinity && `Min: ${min}` }), jsxRuntime.jsx("span", { className: styles$q.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
|
|
1611
1611
|
};
|
|
1612
1612
|
|
|
1613
|
-
var styles$
|
|
1613
|
+
var styles$p = {"button":"ToggleButton-module_button__DTuyY","background":"ToggleButton-module_background__NwfTp","content":"ToggleButton-module_content__NHqIN","iconWrapper":"ToggleButton-module_iconWrapper__yN4sP","icon":"ToggleButton-module_icon__r8juX","label":"ToggleButton-module_label__4mPJP","hideMobile":"ToggleButton-module_hideMobile__GFAc3","checkmark":"ToggleButton-module_checkmark__ZJwf-","ripple":"ToggleButton-module_ripple__2-faB","small":"ToggleButton-module_small__MhfoN","large":"ToggleButton-module_large__A3naL","default":"ToggleButton-module_default__q8QaZ","active":"ToggleButton-module_active__4DjlR","outlined":"ToggleButton-module_outlined__OtqJB","filled":"ToggleButton-module_filled__LySNn","ghost":"ToggleButton-module_ghost__9KXcb","active-primary":"ToggleButton-module_active-primary__vXMP7","active-secondary":"ToggleButton-module_active-secondary__9Ttdx","active-success":"ToggleButton-module_active-success__oi0rr","active-danger":"ToggleButton-module_active-danger__VUdxr","active-warning":"ToggleButton-module_active-warning__77nSu","animation-scale":"ToggleButton-module_animation-scale__j-3mJ","scaleAnimation":"ToggleButton-module_scaleAnimation__Ms1j2","animation-rotate":"ToggleButton-module_animation-rotate__pBmfc","rotateAnimation":"ToggleButton-module_rotateAnimation__xWZJ5","animation-flip":"ToggleButton-module_animation-flip__ErAbm","flipAnimation":"ToggleButton-module_flipAnimation__qwDTb","disabled":"ToggleButton-module_disabled__Gv5ji"};
|
|
1614
1614
|
|
|
1615
1615
|
/**
|
|
1616
1616
|
* ToggleButton Component
|
|
@@ -1649,18 +1649,18 @@ var styles$o = {"button":"ToggleButton-module_button__DTuyY","background":"Toggl
|
|
|
1649
1649
|
const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = 'medium', variant = 'default', activeColor = 'primary', showCheckmark = false, animation = 'scale', className = '', style = {}, color, tooltip, hideLabelOnMobile = false, soundConfig }) => {
|
|
1650
1650
|
const { handlers, playSound } = useComponentSound(soundConfig);
|
|
1651
1651
|
const buttonClasses = [
|
|
1652
|
-
styles$
|
|
1653
|
-
styles$
|
|
1654
|
-
styles$
|
|
1655
|
-
active && styles$
|
|
1656
|
-
active && styles$
|
|
1657
|
-
disabled && styles$
|
|
1658
|
-
animation !== 'none' && styles$
|
|
1652
|
+
styles$p.button,
|
|
1653
|
+
styles$p[size],
|
|
1654
|
+
styles$p[variant],
|
|
1655
|
+
active && styles$p.active,
|
|
1656
|
+
active && styles$p[`active-${activeColor}`],
|
|
1657
|
+
disabled && styles$p.disabled,
|
|
1658
|
+
animation !== 'none' && styles$p[`animation-${animation}`],
|
|
1659
1659
|
className
|
|
1660
1660
|
].filter(Boolean).join(' ');
|
|
1661
1661
|
const labelClasses = [
|
|
1662
|
-
styles$
|
|
1663
|
-
hideLabelOnMobile && styles$
|
|
1662
|
+
styles$p.label,
|
|
1663
|
+
hideLabelOnMobile && styles$p.hideMobile
|
|
1664
1664
|
].filter(Boolean).join(' ');
|
|
1665
1665
|
const iconVariants = {
|
|
1666
1666
|
scale: {
|
|
@@ -1724,10 +1724,10 @@ const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = '
|
|
|
1724
1724
|
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, style: dynamicStyle, onClick: () => {
|
|
1725
1725
|
playSound('toggle');
|
|
1726
1726
|
onClick();
|
|
1727
|
-
}, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, ...handlers, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1727
|
+
}, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, ...handlers, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$p.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxRuntime.jsxs("div", { className: styles$p.content, children: [icon && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$p.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsxRuntime.jsx("span", { className: styles$p.icon, children: icon })) : (jsxRuntime.jsx("div", { className: styles$p.icon, children: icon })) })), label && jsxRuntime.jsx("span", { className: labelClasses, children: label }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showCheckmark && active && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$p.checkmark, variants: checkmarkVariants, initial: "hidden", animate: "visible", exit: "hidden", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) })] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: active && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$p.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
|
|
1728
1728
|
};
|
|
1729
1729
|
|
|
1730
|
-
var styles$
|
|
1730
|
+
var styles$o = {"slider":"Slider-module_slider__RD4G7","label":"Slider-module_label__j4H8M","sliderContainer":"Slider-module_sliderContainer__kQICC","track":"Slider-module_track__fQ-oP","fill":"Slider-module_fill__AYR4-","shimmer":"Slider-module_shimmer__271tL","input":"Slider-module_input__fqY-G","thumb":"Slider-module_thumb__yQJho","ripple":"Slider-module_ripple__gVS04","tooltip":"Slider-module_tooltip__ZubHR","tooltipArrow":"Slider-module_tooltipArrow__1aV9s","valueDisplay":"Slider-module_valueDisplay__V6caL","labelsContainer":"Slider-module_labelsContainer__F6ojF","labelItem":"Slider-module_labelItem__FuEaY","size-sm":"Slider-module_size-sm__Y2bmS","size-lg":"Slider-module_size-lg__RSnPf","disabled":"Slider-module_disabled__gxYoH","loading":"Slider-module_loading__6FkKb","loadingTrack":"Slider-module_loadingTrack__8ItT2","loadingIndicator":"Slider-module_loadingIndicator__Elydq"};
|
|
1731
1731
|
|
|
1732
1732
|
/**
|
|
1733
1733
|
* Slider component - A beautiful, animated range input
|
|
@@ -1815,16 +1815,16 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1815
1815
|
setShowTooltipState(false);
|
|
1816
1816
|
};
|
|
1817
1817
|
const dynamicColor = getDynamicColor();
|
|
1818
|
-
const sizeClass = styles$
|
|
1819
|
-
const stateClass = disabled ? styles$
|
|
1818
|
+
const sizeClass = styles$o[`size-${size}`];
|
|
1819
|
+
const stateClass = disabled ? styles$o.disabled : loading ? styles$o.loading : '';
|
|
1820
1820
|
if (loading) {
|
|
1821
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
1821
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$o.slider} ${sizeClass} ${styles$o.loading} ${className}`, style: style, children: [label && jsxRuntime.jsx("label", { className: styles$o.label, children: label }), jsxRuntime.jsx("div", { className: styles$o.loadingTrack, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$o.loadingIndicator, animate: { x: ['-100%', '200%'] }, transition: {
|
|
1822
1822
|
repeat: Infinity,
|
|
1823
1823
|
duration: 1.5,
|
|
1824
1824
|
ease: "easeInOut"
|
|
1825
1825
|
} }) })] }));
|
|
1826
1826
|
}
|
|
1827
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
1827
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$o.slider} ${sizeClass} ${stateClass} ${className}`, style: style, children: [label && (jsxRuntime.jsx(framerMotion.motion.label, { className: styles$o.label, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, children: label })), jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$o.sliderContainer, ref: sliderRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, whileHover: { scale: 1.02 }, transition: { duration: 0.1 }, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$o.track, whileHover: { height: 8, marginTop: -1 }, transition: { duration: 0.1 }, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$o.fill, style: {
|
|
1828
1828
|
width: `${percentage}%`,
|
|
1829
1829
|
backgroundColor: dynamicColor
|
|
1830
1830
|
}, initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: {
|
|
@@ -1834,7 +1834,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1834
1834
|
damping: 30
|
|
1835
1835
|
}, whileHover: {
|
|
1836
1836
|
boxShadow: `inset 0 0 0 1px rgba(255,255,255,0.2)`
|
|
1837
|
-
} }) }), jsxRuntime.jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...handlers, className: styles$
|
|
1837
|
+
} }) }), jsxRuntime.jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...handlers, className: styles$o.input, disabled: disabled, "aria-label": label }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$o.thumb, style: {
|
|
1838
1838
|
left: `${percentage}%`,
|
|
1839
1839
|
backgroundColor: dynamicColor,
|
|
1840
1840
|
borderColor: colors.thumb || dynamicColor
|
|
@@ -1851,14 +1851,14 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1851
1851
|
}, whileHover: {
|
|
1852
1852
|
scale: 1.1,
|
|
1853
1853
|
transition: { duration: 0.1 }
|
|
1854
|
-
}, children: isDragging && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1854
|
+
}, children: isDragging && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$o.ripple, initial: { scale: 0, opacity: 0.6 }, animate: { scale: 2, opacity: 0 }, transition: { duration: 0.5 } })) }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showTooltipState && (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$o.tooltip, style: {
|
|
1855
1855
|
left: `${percentage}%`,
|
|
1856
1856
|
backgroundColor: dynamicColor
|
|
1857
|
-
}, initial: { opacity: 0, y: 10, scale: 0.8 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 10, scale: 0.8 }, transition: { duration: 0.2 }, children: [tooltipContent ? tooltipContent(value) : formatValue(value), jsxRuntime.jsx("div", { className: styles$
|
|
1857
|
+
}, initial: { opacity: 0, y: 10, scale: 0.8 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 10, scale: 0.8 }, transition: { duration: 0.2 }, children: [tooltipContent ? tooltipContent(value) : formatValue(value), jsxRuntime.jsx("div", { className: styles$o.tooltipArrow, style: { borderTopColor: dynamicColor } })] })) })] }), showValue && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$o.valueDisplay, style: { color: dynamicColor }, initial: { scale: 0.8 }, animate: { scale: 1 }, transition: {
|
|
1858
1858
|
duration: 0.2,
|
|
1859
1859
|
type: "spring",
|
|
1860
1860
|
stiffness: 300
|
|
1861
|
-
}, children: formatValue(value) }, value)), labels.length > 0 && (jsxRuntime.jsx("div", { className: styles$
|
|
1861
|
+
}, children: formatValue(value) }, value)), labels.length > 0 && (jsxRuntime.jsx("div", { className: styles$o.labelsContainer, children: labels.map((labelConfig, index) => {
|
|
1862
1862
|
let position = 0;
|
|
1863
1863
|
if (labelConfig.position === 'start')
|
|
1864
1864
|
position = 0;
|
|
@@ -1866,7 +1866,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1866
1866
|
position = 100;
|
|
1867
1867
|
else if (typeof labelConfig.position === 'number')
|
|
1868
1868
|
position = labelConfig.position;
|
|
1869
|
-
return (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1869
|
+
return (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$o.labelItem, style: {
|
|
1870
1870
|
left: `${position}%`,
|
|
1871
1871
|
color: labelConfig.color
|
|
1872
1872
|
}, initial: { opacity: 0, y: 5 }, animate: { opacity: 1, y: 0 }, transition: {
|
|
@@ -1879,7 +1879,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1879
1879
|
}) }))] }));
|
|
1880
1880
|
}
|
|
1881
1881
|
|
|
1882
|
-
var styles$
|
|
1882
|
+
var styles$n = {"loadingContainer":"LoadingSpinner-module_loadingContainer__m5u51","fullScreen":"LoadingSpinner-module_fullScreen__TuAem","overlay":"LoadingSpinner-module_overlay__X7FTa","shimmer":"LoadingSpinner-module_shimmer__xw4AH","small":"LoadingSpinner-module_small__nq8A3","loadingText":"LoadingSpinner-module_loadingText__wWwna","medium":"LoadingSpinner-module_medium__3JC1S","large":"LoadingSpinner-module_large__4MvAc","dotsSpinner":"LoadingSpinner-module_dotsSpinner__PXtfs","dot1":"LoadingSpinner-module_dot1__5YKSi","dot2":"LoadingSpinner-module_dot2__l6Rbu","dot3":"LoadingSpinner-module_dot3__b9YPW","circleSpinner":"LoadingSpinner-module_circleSpinner__ZmmWs","pulseSpinner":"LoadingSpinner-module_pulseSpinner__wTtDJ","textGradient":"LoadingSpinner-module_textGradient__QDrTY","sparkleContainer":"LoadingSpinner-module_sparkleContainer__9XLJG","sparkle":"LoadingSpinner-module_sparkle__LtFFf"};
|
|
1883
1883
|
|
|
1884
1884
|
const defaultMessages = [
|
|
1885
1885
|
'Loading your content...',
|
|
@@ -1963,22 +1963,22 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
|
|
|
1963
1963
|
}
|
|
1964
1964
|
}, [currentMessageIndex, message, messagesToUse, showMessage]);
|
|
1965
1965
|
const containerClasses = [
|
|
1966
|
-
styles$
|
|
1967
|
-
styles$
|
|
1968
|
-
styles$
|
|
1969
|
-
fullScreen && styles$
|
|
1970
|
-
overlay && styles$
|
|
1966
|
+
styles$n.loadingContainer,
|
|
1967
|
+
styles$n[size],
|
|
1968
|
+
styles$n[variant],
|
|
1969
|
+
fullScreen && styles$n.fullScreen,
|
|
1970
|
+
overlay && styles$n.overlay,
|
|
1971
1971
|
className
|
|
1972
1972
|
].filter(Boolean).join(' ');
|
|
1973
1973
|
const customStyle = {
|
|
1974
1974
|
...(color && { '--spinner-color': color }),
|
|
1975
1975
|
...(backgroundColor && { '--spinner-background': backgroundColor }),
|
|
1976
1976
|
};
|
|
1977
|
-
const renderDots = () => (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$
|
|
1977
|
+
const renderDots = () => (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$n.dotsSpinner, animate: { rotate: 360 }, transition: {
|
|
1978
1978
|
duration: 2,
|
|
1979
1979
|
repeat: Infinity,
|
|
1980
1980
|
ease: 'linear'
|
|
1981
|
-
}, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1981
|
+
}, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$n.dot1, animate: {
|
|
1982
1982
|
scale: [1, 1.3, 1],
|
|
1983
1983
|
y: [0, -6, 0]
|
|
1984
1984
|
}, transition: {
|
|
@@ -1986,7 +1986,7 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
|
|
|
1986
1986
|
repeat: Infinity,
|
|
1987
1987
|
ease: 'easeInOut',
|
|
1988
1988
|
delay: 0
|
|
1989
|
-
} }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1989
|
+
} }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$n.dot2, animate: {
|
|
1990
1990
|
scale: [1, 1.3, 1],
|
|
1991
1991
|
y: [0, -6, 0]
|
|
1992
1992
|
}, transition: {
|
|
@@ -1994,7 +1994,7 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
|
|
|
1994
1994
|
repeat: Infinity,
|
|
1995
1995
|
ease: 'easeInOut',
|
|
1996
1996
|
delay: 0.5
|
|
1997
|
-
} }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1997
|
+
} }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$n.dot3, animate: {
|
|
1998
1998
|
scale: [1, 1.3, 1],
|
|
1999
1999
|
y: [0, -6, 0]
|
|
2000
2000
|
}, transition: {
|
|
@@ -2003,12 +2003,12 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
|
|
|
2003
2003
|
ease: 'easeInOut',
|
|
2004
2004
|
delay: 1
|
|
2005
2005
|
} })] }));
|
|
2006
|
-
const renderSpinner = () => (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
2006
|
+
const renderSpinner = () => (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$n.circleSpinner, animate: { rotate: 360 }, transition: {
|
|
2007
2007
|
duration: 1,
|
|
2008
2008
|
repeat: Infinity,
|
|
2009
2009
|
ease: 'linear'
|
|
2010
2010
|
} }));
|
|
2011
|
-
const renderPulse = () => (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
2011
|
+
const renderPulse = () => (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$n.pulseSpinner, animate: {
|
|
2012
2012
|
scale: [1, 1.2, 1],
|
|
2013
2013
|
opacity: [1, 0.7, 1]
|
|
2014
2014
|
}, transition: {
|
|
@@ -2027,10 +2027,10 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
|
|
|
2027
2027
|
return renderDots();
|
|
2028
2028
|
}
|
|
2029
2029
|
};
|
|
2030
|
-
return (jsxRuntime.jsxs("div", { className: containerClasses, style: customStyle, children: [renderSpinnerVariant(), showMessage && (jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: jsxRuntime.jsx(framerMotion.motion.p, { className: styles$
|
|
2030
|
+
return (jsxRuntime.jsxs("div", { className: containerClasses, style: customStyle, children: [renderSpinnerVariant(), showMessage && (jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: jsxRuntime.jsx(framerMotion.motion.p, { className: styles$n.loadingText, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: {
|
|
2031
2031
|
duration: 0.4,
|
|
2032
2032
|
ease: 'easeOut'
|
|
2033
|
-
}, children: currentMessage }, currentMessage) })), showSparkles && (jsxRuntime.jsx("div", { className: styles$
|
|
2033
|
+
}, children: currentMessage }, currentMessage) })), showSparkles && (jsxRuntime.jsx("div", { className: styles$n.sparkleContainer, children: [...Array(4)].map((_, i) => (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$n.sparkle, animate: {
|
|
2034
2034
|
opacity: [0, 1, 0],
|
|
2035
2035
|
scale: [0.5, 1, 0.5],
|
|
2036
2036
|
rotate: [0, 180, 360]
|
|
@@ -2045,7 +2045,7 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
|
|
|
2045
2045
|
} }, i))) }))] }));
|
|
2046
2046
|
};
|
|
2047
2047
|
|
|
2048
|
-
var styles$
|
|
2048
|
+
var styles$m = {"wrapper":"DecryptedText-module_wrapper__tuLvf","srOnly":"DecryptedText-module_srOnly__A-K2T"};
|
|
2049
2049
|
|
|
2050
2050
|
/**
|
|
2051
2051
|
* DecryptedText Component
|
|
@@ -2229,13 +2229,13 @@ const DecryptedText = ({ text, speed = 50, maxIterations = 10, sequential = fals
|
|
|
2229
2229
|
onMouseLeave: () => setIsHovering(false),
|
|
2230
2230
|
}
|
|
2231
2231
|
: {};
|
|
2232
|
-
return (jsxRuntime.jsxs(framerMotion.motion.span, { className: `${styles$
|
|
2232
|
+
return (jsxRuntime.jsxs(framerMotion.motion.span, { className: `${styles$m.wrapper} ${parentClassName}`, ref: containerRef, ...hoverProps, ...props, children: [jsxRuntime.jsx("span", { className: styles$m.srOnly, children: displayText }), jsxRuntime.jsx("span", { "aria-hidden": "true", children: displayText.split('').map((char, index) => {
|
|
2233
2233
|
const isRevealedOrDone = revealedIndices.has(index) || !isScrambling || !isHovering;
|
|
2234
2234
|
return (jsxRuntime.jsx("span", { className: isRevealedOrDone ? className : encryptedClassName, children: char }, index));
|
|
2235
2235
|
}) })] }));
|
|
2236
2236
|
};
|
|
2237
2237
|
|
|
2238
|
-
var styles$
|
|
2238
|
+
var styles$l = {"arrayInput":"ArrayInput-module_arrayInput__q1x7A","arrayInputLabel":"ArrayInput-module_arrayInputLabel__HyUC7","arrayInputItem":"ArrayInput-module_arrayInputItem__bFtgl","inputWrapper":"ArrayInput-module_inputWrapper__ajhbW","input":"ArrayInput-module_input__1uywi","complexItem":"ArrayInput-module_complexItem__zr-Q-","fieldsWrapper":"ArrayInput-module_fieldsWrapper__7BVPa","removeButton":"ArrayInput-module_removeButton__gYf8Y","addButton":"ArrayInput-module_addButton__mia29"};
|
|
2239
2239
|
|
|
2240
2240
|
/**
|
|
2241
2241
|
* ArrayInput component - Versatile dynamic list manager
|
|
@@ -2302,11 +2302,11 @@ function SimpleArrayInput({ label, values, onChange, placeholder, itemStyle, inp
|
|
|
2302
2302
|
itemIdsRef.current.splice(index, 1);
|
|
2303
2303
|
onChange(newValues);
|
|
2304
2304
|
};
|
|
2305
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
2305
|
+
return (jsxRuntime.jsxs("div", { className: styles$l.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$l.arrayInputLabel, children: label }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(framerMotion.AnimatePresence, { children: values.map((value, index) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$l.arrayInputItem, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
|
|
2306
2306
|
duration: 0.3,
|
|
2307
2307
|
ease: "easeInOut",
|
|
2308
2308
|
layout: { duration: 0.2 }
|
|
2309
|
-
}, children: [jsxRuntime.jsx("div", { className: styles$
|
|
2309
|
+
}, children: [jsxRuntime.jsx("div", { className: styles$l.inputWrapper, children: multiline ? (jsxRuntime.jsx("div", { style: inputStyle, children: jsxRuntime.jsx(TextArea, { label: "", value: value, onChange: (newValue) => handleChange(index, newValue), placeholder: placeholder, rows: rows, compact: true }) })) : (jsxRuntime.jsx("input", { type: "text", value: value, onChange: (e) => handleChange(index, e.target.value), placeholder: placeholder, className: styles$l.input, style: inputStyle })) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$l.removeButton, children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }, itemIdsRef.current[index]))) }) }), jsxRuntime.jsx(Button, { variant: buttonVariant, size: "small", onClick: handleAdd, className: styles$l.addButton, children: label })] }));
|
|
2310
2310
|
}
|
|
2311
2311
|
// Complex object array implementation
|
|
2312
2312
|
function ComplexArrayInput({ label, values, onChange, fields, getKey, itemStyle, inputStyle, buttonVariant = 'primary' }) {
|
|
@@ -2331,14 +2331,14 @@ function ComplexArrayInput({ label, values, onChange, fields, getKey, itemStyle,
|
|
|
2331
2331
|
// Generate key from all field values
|
|
2332
2332
|
return fields.map(f => item[f.name] || '').join('-') + `-${index}`;
|
|
2333
2333
|
};
|
|
2334
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
2334
|
+
return (jsxRuntime.jsxs("div", { className: styles$l.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$l.arrayInputLabel, children: label }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(framerMotion.AnimatePresence, { children: values.map((value, index) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$l.arrayInputItem} ${fields.length > 1 ? styles$l.complexItem : ''}`, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
|
|
2335
2335
|
duration: 0.3,
|
|
2336
2336
|
ease: "easeInOut",
|
|
2337
2337
|
layout: { duration: 0.2 }
|
|
2338
|
-
}, children: [jsxRuntime.jsx("div", { className: styles$
|
|
2338
|
+
}, children: [jsxRuntime.jsx("div", { className: styles$l.fieldsWrapper, children: fields.map((field) => (jsxRuntime.jsx("div", { style: inputStyle, children: field.multiline ? (jsxRuntime.jsx(TextArea, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, placeholder: field.placeholder, rows: field.rows, compact: true })) : (jsxRuntime.jsx(TextInput, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, type: field.type, placeholder: field.placeholder })) }, field.name))) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$l.removeButton, children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }, generateKey(value, index)))) }) }), jsxRuntime.jsxs(Button, { variant: buttonVariant, size: "small", onClick: handleAdd, className: styles$l.addButton, children: ["Add ", label] })] }));
|
|
2339
2339
|
}
|
|
2340
2340
|
|
|
2341
|
-
var styles$
|
|
2341
|
+
var styles$k = {"fab":"EditFAB-module_fab__nSrTJ","primary":"EditFAB-module_primary__zbA9n","secondary":"EditFAB-module_secondary__BnXs0","success":"EditFAB-module_success__kcLg3","loader":"EditFAB-module_loader__TaJOm","draggable":"EditFAB-module_draggable__eE2vE","dragging":"EditFAB-module_dragging__btRJe"};
|
|
2342
2342
|
|
|
2343
2343
|
const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = false, onEnterEditMode, onExitEditMode, position = { bottom: 32, right: 32 } }) => {
|
|
2344
2344
|
const [isMobile, setIsMobile] = React.useState(false);
|
|
@@ -2423,15 +2423,15 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
|
|
|
2423
2423
|
};
|
|
2424
2424
|
const getVariantClass = () => {
|
|
2425
2425
|
if (isSaving)
|
|
2426
|
-
return styles$
|
|
2426
|
+
return styles$k.primary;
|
|
2427
2427
|
if (isEditMode) {
|
|
2428
|
-
return hasUnsavedChanges ? styles$
|
|
2428
|
+
return hasUnsavedChanges ? styles$k.success : styles$k.secondary;
|
|
2429
2429
|
}
|
|
2430
|
-
return styles$
|
|
2430
|
+
return styles$k.primary;
|
|
2431
2431
|
};
|
|
2432
2432
|
const getIcon = () => {
|
|
2433
2433
|
if (isSaving) {
|
|
2434
|
-
return jsxRuntime.jsx("div", { className: styles$
|
|
2434
|
+
return jsxRuntime.jsx("div", { className: styles$k.loader });
|
|
2435
2435
|
}
|
|
2436
2436
|
if (isEditMode) {
|
|
2437
2437
|
return hasUnsavedChanges ? jsxRuntime.jsx(lucideReact.Check, { size: 24 }) : jsxRuntime.jsx(lucideReact.X, { size: 24 });
|
|
@@ -2446,14 +2446,14 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
|
|
|
2446
2446
|
}
|
|
2447
2447
|
return "Enter edit mode";
|
|
2448
2448
|
};
|
|
2449
|
-
return (jsxRuntime.jsx(framerMotion.motion.button, { ref: fabRef, className: `${styles$
|
|
2449
|
+
return (jsxRuntime.jsx(framerMotion.motion.button, { ref: fabRef, className: `${styles$k.fab} ${getVariantClass()} ${isMobile ? styles$k.draggable : ''} ${isDragging ? styles$k.dragging : ''}`, style: getPositionStyles(), onClick: handleClick, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, disabled: isSaving, "aria-label": getAriaLabel(), initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0, opacity: 0 }, whileHover: !isSaving && !isDragging ? { scale: 1.1 } : {}, whileTap: !isSaving && !isDragging ? { scale: 0.9 } : {}, transition: {
|
|
2450
2450
|
type: "spring",
|
|
2451
2451
|
stiffness: 260,
|
|
2452
2452
|
damping: 20
|
|
2453
2453
|
}, children: getIcon() }));
|
|
2454
2454
|
};
|
|
2455
2455
|
|
|
2456
|
-
var styles$
|
|
2456
|
+
var styles$j = {"searchContainer":"SearchBar-module_searchContainer__TdM1w","searchInputWrapper":"SearchBar-module_searchInputWrapper__kCZLU","searchIcon":"SearchBar-module_searchIcon__IIxEu","searchInput":"SearchBar-module_searchInput__V4gkE","clearButton":"SearchBar-module_clearButton__7fNIY","filterSelect":"SearchBar-module_filterSelect__xIVE4","resultsDropdown":"SearchBar-module_resultsDropdown__yh6NF","loadingState":"SearchBar-module_loadingState__4gidK","emptyState":"SearchBar-module_emptyState__RbI4s","spinner":"SearchBar-module_spinner__PMc6-","resultsGroups":"SearchBar-module_resultsGroups__U24DC","resultGroup":"SearchBar-module_resultGroup__SoTQH","groupHeader":"SearchBar-module_groupHeader__bFRHA","groupIcon":"SearchBar-module_groupIcon__9ENM-","groupTitle":"SearchBar-module_groupTitle__ZekZs","groupCount":"SearchBar-module_groupCount__PQIqw","groupResults":"SearchBar-module_groupResults__xTF52","resultItem":"SearchBar-module_resultItem__VaKKy","highlighted":"SearchBar-module_highlighted__Q-3sH","resultTitle":"SearchBar-module_resultTitle__i1uqL","resultSubtitle":"SearchBar-module_resultSubtitle__LQOJ1","resultMeta":"SearchBar-module_resultMeta__Kmkrn","resultContent":"SearchBar-module_resultContent__TzVzL","highlight":"SearchBar-module_highlight__Q3PSP"};
|
|
2457
2457
|
|
|
2458
2458
|
// Default filter options for backwards compatibility
|
|
2459
2459
|
const defaultFilterOptions = [
|
|
@@ -2646,20 +2646,20 @@ const SearchBar = ({ className, placeholder = "Search (Ctrl+Space)...", onSearch
|
|
|
2646
2646
|
return text || '';
|
|
2647
2647
|
const regex = new RegExp(`(${highlight.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
|
|
2648
2648
|
const parts = text.split(regex);
|
|
2649
|
-
return parts.map((part, index) => regex.test(part) ? (jsxRuntime.jsx("mark", { className: styles$
|
|
2649
|
+
return parts.map((part, index) => regex.test(part) ? (jsxRuntime.jsx("mark", { className: styles$j.highlight, children: part }, index)) : (part));
|
|
2650
2650
|
};
|
|
2651
|
-
return (jsxRuntime.jsxs("div", { ref: searchRef, className: `${styles$
|
|
2651
|
+
return (jsxRuntime.jsxs("div", { ref: searchRef, className: `${styles$j.searchContainer} ${className || ''}`, children: [jsxRuntime.jsxs("div", { className: styles$j.searchInputWrapper, children: [jsxRuntime.jsx(lucideReact.Search, { className: styles$j.searchIcon }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: handleKeyDown, onFocus: () => query.trim() && results.length > 0 && setIsDropdownOpen(true), placeholder: placeholder, className: styles$j.searchInput, "aria-label": "Search", "aria-expanded": isDropdownOpen, "aria-controls": "search-results", "aria-autocomplete": "list" }), query && (jsxRuntime.jsx(framerMotion.motion.button, { className: styles$j.clearButton, onClick: handleClear, whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 }, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, children: jsxRuntime.jsx(lucideReact.X, {}) })), showFilter && (jsxRuntime.jsx("select", { value: filter, onChange: (e) => setFilter(e.target.value), className: styles$j.filterSelect, "aria-label": "Filter search results", children: filterOptions.map(option => (jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))) }))] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isDropdownOpen && (jsxRuntime.jsx(framerMotion.motion.div, { ref: resultsRef, id: "search-results", className: styles$j.resultsDropdown, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, children: isLoading ? (jsxRuntime.jsxs("div", { className: styles$j.loadingState, children: [jsxRuntime.jsx("div", { className: styles$j.spinner }), jsxRuntime.jsx("span", { children: "Searching..." })] })) : results.length === 0 ? (jsxRuntime.jsxs("div", { className: styles$j.emptyState, children: ["No results found for \"", query, "\""] })) : (jsxRuntime.jsx("div", { className: styles$j.resultsGroups, children: Object.entries(groupedResults).map(([type, groupResults]) => {
|
|
2652
2652
|
const Icon = entityIcons[type];
|
|
2653
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
2653
|
+
return (jsxRuntime.jsxs("div", { className: styles$j.resultGroup, children: [jsxRuntime.jsxs("div", { className: styles$j.groupHeader, children: [Icon && jsxRuntime.jsx(Icon, { className: styles$j.groupIcon }), jsxRuntime.jsx("span", { className: styles$j.groupTitle, children: type.charAt(0).toUpperCase() + type.slice(1) }), jsxRuntime.jsx("span", { className: styles$j.groupCount, children: groupResults.length })] }), jsxRuntime.jsx("div", { className: styles$j.groupResults, children: groupResults.map((result) => {
|
|
2654
2654
|
const globalIndex = results.indexOf(result);
|
|
2655
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { "data-result-index": globalIndex, className: `${styles$
|
|
2655
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { "data-result-index": globalIndex, className: `${styles$j.resultItem} ${highlightedIndex === globalIndex ? styles$j.highlighted : ''}`, onClick: () => handleResultClick(result), whileHover: { x: 4 }, onMouseEnter: () => setHighlightedIndex(globalIndex), children: [jsxRuntime.jsxs("div", { className: styles$j.resultContent, children: [jsxRuntime.jsx("div", { className: styles$j.resultTitle, children: highlightMatch(result.title || 'Untitled', query) }), result.subtitle && (jsxRuntime.jsx("div", { className: styles$j.resultSubtitle, children: highlightMatch(result.subtitle, query) }))] }), result.meta && (jsxRuntime.jsx("div", { className: styles$j.resultMeta, children: result.meta }))] }, `${result.type}-${result.id}`));
|
|
2656
2656
|
}) })] }, type));
|
|
2657
2657
|
}) })) })) })] }));
|
|
2658
2658
|
};
|
|
2659
2659
|
|
|
2660
|
-
var styles$
|
|
2660
|
+
var styles$i = {"timeInput":"TimeInput-module_timeInput__h1DpT","label":"TimeInput-module_label__d4rZw","required":"TimeInput-module_required__rc1vq","picker":"TimeInput-module_picker__9c6EI","error":"TimeInput-module_error__gJnpk","disabled":"TimeInput-module_disabled__wxiZ-"};
|
|
2661
2661
|
|
|
2662
|
-
const lightTheme = styles$
|
|
2662
|
+
const lightTheme = styles$C.createTheme({
|
|
2663
2663
|
palette: {
|
|
2664
2664
|
mode: 'light',
|
|
2665
2665
|
primary: { main: '#3b82f6' },
|
|
@@ -2673,7 +2673,7 @@ const lightTheme = styles$B.createTheme({
|
|
|
2673
2673
|
},
|
|
2674
2674
|
},
|
|
2675
2675
|
});
|
|
2676
|
-
const darkTheme = styles$
|
|
2676
|
+
const darkTheme = styles$C.createTheme({
|
|
2677
2677
|
palette: {
|
|
2678
2678
|
mode: 'dark',
|
|
2679
2679
|
primary: { main: '#f5b829' },
|
|
@@ -2693,26 +2693,26 @@ function TimeInput({ label, value, onChange, error = false, success = false, loa
|
|
|
2693
2693
|
!!document.documentElement.getAttribute('data-theme')?.includes('dark');
|
|
2694
2694
|
const muiTheme = React.useMemo(() => (isDark ? darkTheme : lightTheme), [isDark]);
|
|
2695
2695
|
const getContainerClassName = () => {
|
|
2696
|
-
const classes = [styles$
|
|
2696
|
+
const classes = [styles$i.timeInput];
|
|
2697
2697
|
if (error)
|
|
2698
|
-
classes.push(styles$
|
|
2698
|
+
classes.push(styles$i.error);
|
|
2699
2699
|
if (success)
|
|
2700
|
-
classes.push(styles$
|
|
2700
|
+
classes.push(styles$i.success);
|
|
2701
2701
|
if (loading)
|
|
2702
|
-
classes.push(styles$
|
|
2702
|
+
classes.push(styles$i.loading);
|
|
2703
2703
|
if (disabled)
|
|
2704
|
-
classes.push(styles$
|
|
2704
|
+
classes.push(styles$i.disabled);
|
|
2705
2705
|
if (className)
|
|
2706
2706
|
classes.push(className);
|
|
2707
2707
|
return classes.join(' ');
|
|
2708
2708
|
};
|
|
2709
|
-
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [label && (jsxRuntime.jsxs("label", { className: styles$
|
|
2709
|
+
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [label && (jsxRuntime.jsxs("label", { className: styles$i.label, children: [label, required && jsxRuntime.jsx("span", { className: styles$i.required, children: "*" })] })), jsxRuntime.jsx(styles$C.ThemeProvider, { theme: muiTheme, children: jsxRuntime.jsx(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, children: jsxRuntime.jsx(MobileTimePicker.MobileTimePicker, { value: dayjsValue, onChange: (newValue) => {
|
|
2710
2710
|
onChange(newValue ? newValue.format('HH:mm') : '');
|
|
2711
2711
|
}, ampm: false, views: ['hours', 'minutes'], disabled: disabled || loading, slotProps: {
|
|
2712
2712
|
textField: {
|
|
2713
2713
|
size: 'small',
|
|
2714
2714
|
fullWidth: true,
|
|
2715
|
-
className: styles$
|
|
2715
|
+
className: styles$i.picker,
|
|
2716
2716
|
sx: {
|
|
2717
2717
|
'& .MuiPickersOutlinedInput-root': {
|
|
2718
2718
|
fontFamily: "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace",
|
|
@@ -2800,7 +2800,7 @@ const ThemeProvider = ({ children, defaultTheme = 'light', storageKey = 'app-the
|
|
|
2800
2800
|
return (jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children: children }));
|
|
2801
2801
|
};
|
|
2802
2802
|
|
|
2803
|
-
var styles$
|
|
2803
|
+
var styles$h = {"button":"ThemeSwitcher-module_button__VfRjU","iconWrapper":"ThemeSwitcher-module_iconWrapper__FpHo8","label":"ThemeSwitcher-module_label__2Hfkp","toggle":"ThemeSwitcher-module_toggle__ATXx4","toggleTrack":"ThemeSwitcher-module_toggleTrack__x28Rv","toggleThumb":"ThemeSwitcher-module_toggleThumb__V8QeN","dropdown":"ThemeSwitcher-module_dropdown__3qLdt","dropdownTrigger":"ThemeSwitcher-module_dropdownTrigger__UzYV5","dropdownMenu":"ThemeSwitcher-module_dropdownMenu__3L5hT","dropdownItem":"ThemeSwitcher-module_dropdownItem__inw-K","active":"ThemeSwitcher-module_active__OHP19","icon":"ThemeSwitcher-module_icon__iRZiJ","text":"ThemeSwitcher-module_text__OCOoA"};
|
|
2804
2804
|
|
|
2805
2805
|
const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '', currentTheme, onThemeChange, themes: customThemes, }) => {
|
|
2806
2806
|
// Use safe version that returns null when outside a ThemeProvider
|
|
@@ -2821,19 +2821,19 @@ const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '',
|
|
|
2821
2821
|
if (variant === 'toggle') {
|
|
2822
2822
|
// Simple toggle between light and dark
|
|
2823
2823
|
const isDark = theme.includes('dark');
|
|
2824
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$
|
|
2824
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$h.toggle} ${className}`, onClick: () => setTheme(isDark ? 'light' : 'dark'), whileTap: { scale: 0.95 }, "aria-label": "Toggle theme", children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.toggleTrack, animate: { backgroundColor: isDark ? 'var(--color-primary)' : 'var(--color-border)' }, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.toggleThumb, animate: { x: isDark ? 24 : 0 }, transition: { type: 'spring', stiffness: 500, damping: 30 }, children: isDark ? jsxRuntime.jsx(lucideReact.Moon, { size: 14 }) : jsxRuntime.jsx(lucideReact.Sun, { size: 14 }) }) }), showLabel && jsxRuntime.jsx("span", { className: styles$h.label, children: isDark ? 'Dark' : 'Light' })] }));
|
|
2825
2825
|
}
|
|
2826
2826
|
if (variant === 'dropdown') {
|
|
2827
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
2827
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$h.dropdown} ${className}`, children: [jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$h.dropdownTrigger, whileTap: { scale: 0.98 }, children: [currentThemeData.icon, showLabel && jsxRuntime.jsx("span", { className: styles$h.label, children: currentThemeData.label })] }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.dropdownMenu, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, children: themes.map((t) => (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$h.dropdownItem} ${theme === t.value ? styles$h.active : ''}`, onClick: () => setTheme(t.value), whileHover: { x: 4 }, whileTap: { scale: 0.98 }, children: [jsxRuntime.jsx("span", { className: styles$h.icon, children: t.icon }), jsxRuntime.jsx("span", { className: styles$h.text, children: t.label })] }, t.value))) })] }));
|
|
2828
2828
|
}
|
|
2829
2829
|
// Default button variant - cycles through themes
|
|
2830
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$
|
|
2830
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$h.button} ${className}`, onClick: () => {
|
|
2831
2831
|
const nextIndex = (currentThemeIndex + 1) % themes.length;
|
|
2832
2832
|
setTheme(themes[nextIndex].value);
|
|
2833
|
-
}, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentThemeData.label}. Click to change.`, children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 180, opacity: 0 }, transition: { duration: 0.3 }, className: styles$
|
|
2833
|
+
}, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentThemeData.label}. Click to change.`, children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 180, opacity: 0 }, transition: { duration: 0.3 }, className: styles$h.iconWrapper, children: currentThemeData.icon }, theme), showLabel && jsxRuntime.jsx("span", { className: styles$h.label, children: currentThemeData.label })] }));
|
|
2834
2834
|
};
|
|
2835
2835
|
|
|
2836
|
-
var styles$
|
|
2836
|
+
var styles$g = {"tabs":"Tabs-module_tabs__Vlvn7","tab":"Tabs-module_tab__uQKim","tabIcon":"Tabs-module_tabIcon__AgN-O","fullWidth":"Tabs-module_fullWidth__X-GHP"};
|
|
2837
2837
|
|
|
2838
2838
|
// Default tabs for backwards compatibility
|
|
2839
2839
|
const defaultTabs = [
|
|
@@ -2844,39 +2844,39 @@ const defaultTabs = [
|
|
|
2844
2844
|
];
|
|
2845
2845
|
const Tabs = ({ activeTab, onTabChange, tabs: customTabs, className = '', fullWidth = false }) => {
|
|
2846
2846
|
const tabs = customTabs ?? defaultTabs;
|
|
2847
|
-
return (jsxRuntime.jsx("div", { className: `${styles$
|
|
2847
|
+
return (jsxRuntime.jsx("div", { className: `${styles$g.tabs} ${fullWidth ? styles$g.fullWidth : ''} ${className}`, children: tabs.map((tab) => {
|
|
2848
2848
|
const isActive = activeTab === tab.id;
|
|
2849
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$
|
|
2849
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$g.tab, "data-active": isActive, onClick: () => onTabChange(tab.id), style: { position: 'relative' }, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: {
|
|
2850
2850
|
rotate: isActive ? [0, -10, 10, -5, 5, 0] : 0,
|
|
2851
2851
|
}, transition: {
|
|
2852
2852
|
rotate: {
|
|
2853
2853
|
duration: 0.5,
|
|
2854
2854
|
ease: 'easeInOut'
|
|
2855
2855
|
}
|
|
2856
|
-
}, children: tab.icon && (React.isValidElement(tab.icon) ? (jsxRuntime.jsx("span", { className: styles$
|
|
2856
|
+
}, children: tab.icon && (React.isValidElement(tab.icon) ? (jsxRuntime.jsx("span", { className: styles$g.tabIcon, children: tab.icon })) : (jsxRuntime.jsx("span", { className: styles$g.tabIcon, children: React.createElement(tab.icon) }))) }), jsxRuntime.jsx("span", { children: tab.label })] }, tab.id));
|
|
2857
2857
|
}) }));
|
|
2858
2858
|
};
|
|
2859
2859
|
|
|
2860
|
-
var styles$
|
|
2860
|
+
var styles$f = {"toastContainer":"Toast-module_toastContainer__gp5C0","toast":"Toast-module_toast__eenNR","toastSuccess":"Toast-module_toastSuccess__e-cSx","toastError":"Toast-module_toastError__6JO9w","toastWarning":"Toast-module_toastWarning__pJoF1","toastInfo":"Toast-module_toastInfo__y33kR","icon":"Toast-module_icon__Z-D6i","iconSuccess":"Toast-module_iconSuccess__ehY27","iconError":"Toast-module_iconError__nXhZz","iconWarning":"Toast-module_iconWarning__Ie8oD","iconInfo":"Toast-module_iconInfo__8vOf5","content":"Toast-module_content__eBhK8","title":"Toast-module_title__EfUfZ","message":"Toast-module_message__l4pyr","closeButton":"Toast-module_closeButton__UWOVG","progressBar":"Toast-module_progressBar__fGwBU"};
|
|
2861
2861
|
|
|
2862
2862
|
const getIcon = (type) => {
|
|
2863
2863
|
switch (type) {
|
|
2864
2864
|
case 'success':
|
|
2865
|
-
return (jsxRuntime.jsx("svg", { className: `${styles$
|
|
2865
|
+
return (jsxRuntime.jsx("svg", { className: `${styles$f.icon} ${styles$f.iconSuccess}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }));
|
|
2866
2866
|
case 'error':
|
|
2867
|
-
return (jsxRuntime.jsx("svg", { className: `${styles$
|
|
2867
|
+
return (jsxRuntime.jsx("svg", { className: `${styles$f.icon} ${styles$f.iconError}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }));
|
|
2868
2868
|
case 'warning':
|
|
2869
|
-
return (jsxRuntime.jsx("svg", { className: `${styles$
|
|
2869
|
+
return (jsxRuntime.jsx("svg", { className: `${styles$f.icon} ${styles$f.iconWarning}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }));
|
|
2870
2870
|
case 'info':
|
|
2871
|
-
return (jsxRuntime.jsx("svg", { className: `${styles$
|
|
2871
|
+
return (jsxRuntime.jsx("svg", { className: `${styles$f.icon} ${styles$f.iconInfo}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }));
|
|
2872
2872
|
}
|
|
2873
2873
|
};
|
|
2874
2874
|
const getToastStyle = (type) => {
|
|
2875
2875
|
switch (type) {
|
|
2876
|
-
case 'success': return styles$
|
|
2877
|
-
case 'error': return styles$
|
|
2878
|
-
case 'warning': return styles$
|
|
2879
|
-
case 'info': return styles$
|
|
2876
|
+
case 'success': return styles$f.toastSuccess;
|
|
2877
|
+
case 'error': return styles$f.toastError;
|
|
2878
|
+
case 'warning': return styles$f.toastWarning;
|
|
2879
|
+
case 'info': return styles$f.toastInfo;
|
|
2880
2880
|
default: return '';
|
|
2881
2881
|
}
|
|
2882
2882
|
};
|
|
@@ -2898,7 +2898,7 @@ const ToastItem = ({ toast, removeToast, }) => {
|
|
|
2898
2898
|
clearInterval(interval);
|
|
2899
2899
|
};
|
|
2900
2900
|
}, [toast.id, duration, removeToast]);
|
|
2901
|
-
return (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$
|
|
2901
|
+
return (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$f.toast} ${getToastStyle(toast.type)}`, initial: { opacity: 0, x: 100, scale: 0.9 }, animate: { opacity: 1, x: 0, scale: 1 }, exit: { opacity: 0, x: 100, scale: 0.9 }, transition: { type: 'spring', stiffness: 500, damping: 40 }, layout: true, children: [getIcon(toast.type), jsxRuntime.jsxs("div", { className: styles$f.content, children: [toast.title && jsxRuntime.jsx("p", { className: styles$f.title, children: toast.title }), jsxRuntime.jsx("p", { className: styles$f.message, children: toast.message })] }), jsxRuntime.jsx("button", { className: styles$f.closeButton, onClick: () => removeToast(toast.id), "aria-label": "Close notification", children: jsxRuntime.jsx("svg", { width: "16", height: "16", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$f.progressBar, initial: { width: '100%' }, animate: { width: `${progress}%` }, style: {
|
|
2902
2902
|
color: toast.type === 'success' ? '#10B981'
|
|
2903
2903
|
: toast.type === 'error' ? '#EF4444'
|
|
2904
2904
|
: toast.type === 'warning' ? '#F59E0B'
|
|
@@ -2908,10 +2908,10 @@ const ToastItem = ({ toast, removeToast, }) => {
|
|
|
2908
2908
|
const ToastContainer = ({ toasts, removeToast }) => {
|
|
2909
2909
|
if (typeof document === 'undefined')
|
|
2910
2910
|
return null;
|
|
2911
|
-
return reactDom.createPortal(jsxRuntime.jsx("div", { className: styles$
|
|
2911
|
+
return reactDom.createPortal(jsxRuntime.jsx("div", { className: styles$f.toastContainer, children: jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "sync", children: toasts.map((toast) => (jsxRuntime.jsx(ToastItem, { toast: toast, removeToast: removeToast }, toast.id))) }) }), document.body);
|
|
2912
2912
|
};
|
|
2913
2913
|
|
|
2914
|
-
var styles$
|
|
2914
|
+
var styles$e = {"breadcrumb":"Breadcrumb-module_breadcrumb__pGabz","separator":"Breadcrumb-module_separator__UCmyy","item":"Breadcrumb-module_item__0cLOg","link":"Breadcrumb-module_link__udp8M","current":"Breadcrumb-module_current__3DpQc"};
|
|
2915
2915
|
|
|
2916
2916
|
/**
|
|
2917
2917
|
* Breadcrumb Component
|
|
@@ -2930,13 +2930,13 @@ var styles$d = {"breadcrumb":"Breadcrumb-module_breadcrumb__pGabz","separator":"
|
|
|
2930
2930
|
* />
|
|
2931
2931
|
*/
|
|
2932
2932
|
const Breadcrumb = ({ items, onNavigate, className = '' }) => {
|
|
2933
|
-
return (jsxRuntime.jsx("nav", { className: `${styles$
|
|
2933
|
+
return (jsxRuntime.jsx("nav", { className: `${styles$e.breadcrumb} ${className}`, "aria-label": "Breadcrumb", children: items.map((item, index) => {
|
|
2934
2934
|
const isLast = index === items.length - 1;
|
|
2935
|
-
return (jsxRuntime.jsxs(React.Fragment, { children: [index > 0 && jsxRuntime.jsx(lucideReact.ChevronRight, { size: 14, className: styles$
|
|
2935
|
+
return (jsxRuntime.jsxs(React.Fragment, { children: [index > 0 && jsxRuntime.jsx(lucideReact.ChevronRight, { size: 14, className: styles$e.separator }), isLast || !item.href ? (jsxRuntime.jsx("span", { className: `${styles$e.item} ${isLast ? styles$e.current : ''}`, children: item.label })) : (jsxRuntime.jsx("button", { className: `${styles$e.item} ${styles$e.link}`, onClick: () => onNavigate?.(item.href), children: item.label }))] }, index));
|
|
2936
2936
|
}) }));
|
|
2937
2937
|
};
|
|
2938
2938
|
|
|
2939
|
-
var styles$
|
|
2939
|
+
var styles$d = {"overlay":"LiquidButton-module_overlay__-P-xm","container":"LiquidButton-module_container__f1COS","actions":"LiquidButton-module_actions__XBz7p","actionButton":"LiquidButton-module_actionButton__PlEOk","actionLabel":"LiquidButton-module_actionLabel__tIGHE","button":"LiquidButton-module_button__znjyS"};
|
|
2940
2940
|
|
|
2941
2941
|
/**
|
|
2942
2942
|
* LiquidButton Component
|
|
@@ -2962,13 +2962,13 @@ const LiquidButton = ({ actions, icon: Icon = lucideReact.Plus, className = '',
|
|
|
2962
2962
|
setExpanded(false);
|
|
2963
2963
|
action.onClick();
|
|
2964
2964
|
}, []);
|
|
2965
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(framerMotion.AnimatePresence, { children: expanded && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
2965
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(framerMotion.AnimatePresence, { children: expanded && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$d.overlay, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: handleToggle })) }), jsxRuntime.jsxs("div", { className: `${styles$d.container} ${className}`, children: [jsxRuntime.jsx(framerMotion.AnimatePresence, { children: expanded && (jsxRuntime.jsx("div", { className: styles$d.actions, children: actions.map((action, index) => (jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: styles$d.actionButton, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, transition: {
|
|
2966
2966
|
duration: 0.15,
|
|
2967
2967
|
delay: (actions.length - 1 - index) * 0.05,
|
|
2968
|
-
}, onClick: () => handleAction(action), children: [jsxRuntime.jsx(action.icon, { size: 18, color: action.color }), jsxRuntime.jsx("span", { className: styles$
|
|
2968
|
+
}, onClick: () => handleAction(action), children: [jsxRuntime.jsx(action.icon, { size: 18, color: action.color }), jsxRuntime.jsx("span", { className: styles$d.actionLabel, children: action.label })] }, action.key))) })) }), jsxRuntime.jsx(framerMotion.motion.button, { type: "button", className: styles$d.button, onClick: handleToggle, animate: { rotate: expanded ? 45 : 0 }, transition: { duration: 0.2 }, "aria-label": expanded ? 'Close actions' : 'Open actions', children: jsxRuntime.jsx(Icon, { size: 24, strokeWidth: 2.5 }) })] })] }));
|
|
2969
2969
|
};
|
|
2970
2970
|
|
|
2971
|
-
var styles$
|
|
2971
|
+
var styles$c = {"wrap":"StreamConsole-module_wrap__MnVWw","header":"StreamConsole-module_header__FjnRM","headerLeft":"StreamConsole-module_headerLeft__gNDyh","statusDot":"StreamConsole-module_statusDot__xQ254","spin":"StreamConsole-module_spin__OrOeL","label":"StreamConsole-module_label__rJIDm","statusText":"StreamConsole-module_statusText__oG-ej","dismiss":"StreamConsole-module_dismiss__WH3Kv","body":"StreamConsole-module_body__-HIK-","hint":"StreamConsole-module_hint__BA4SI","line":"StreamConsole-module_line__5hMY2","linePrefix":"StreamConsole-module_linePrefix__xR-Oj","lineText":"StreamConsole-module_lineText__IyRSF","lineLabel":"StreamConsole-module_lineLabel__z-qj4"};
|
|
2972
2972
|
|
|
2973
2973
|
// Known prefixes produced by stream-json summarizers (DAO-style):
|
|
2974
2974
|
// "bash: ls -la", "read: path/to/file", "edit: path/to/file",
|
|
@@ -3034,21 +3034,21 @@ function StreamConsole({ stream, onCancel, onDismiss, hideDismiss = false, runni
|
|
|
3034
3034
|
? successLabel
|
|
3035
3035
|
: errorLabel;
|
|
3036
3036
|
const canShowDismiss = !hideDismiss && (stream.status === 'running' ? !!onCancel : !!onDismiss);
|
|
3037
|
-
return (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$
|
|
3037
|
+
return (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$c.wrap, "data-status": stream.status, initial: { opacity: 0, y: -8 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -8 }, transition: { duration: 0.18 }, children: [jsxRuntime.jsxs("header", { className: styles$c.header, children: [jsxRuntime.jsxs("div", { className: styles$c.headerLeft, children: [jsxRuntime.jsx("span", { className: styles$c.statusDot, "data-status": stream.status, children: jsxRuntime.jsx(Icon, { size: 12, className: stream.status === 'running' ? styles$c.spin : '' }) }), jsxRuntime.jsx("span", { className: styles$c.label, children: stream.label }), jsxRuntime.jsx("span", { className: styles$c.statusText, children: statusLabel })] }), canShowDismiss && (jsxRuntime.jsx("button", { type: "button", className: styles$c.dismiss, "aria-label": stream.status === 'running' ? 'Cancel' : 'Dismiss', onClick: () => {
|
|
3038
3038
|
if (stream.status === 'running')
|
|
3039
3039
|
onCancel?.(stream.id);
|
|
3040
3040
|
else
|
|
3041
3041
|
onDismiss?.(stream.id);
|
|
3042
|
-
}, children: jsxRuntime.jsx(lucideReact.X, { size: 14 }) }))] }), jsxRuntime.jsxs("div", { className: styles$
|
|
3042
|
+
}, children: jsxRuntime.jsx(lucideReact.X, { size: 14 }) }))] }), jsxRuntime.jsxs("div", { className: styles$c.body, ref: listRef, children: [stream.events.length === 0 && stream.status === 'running' && (jsxRuntime.jsx("p", { className: styles$c.hint, children: "Waiting for output\u2026" })), stream.events.map((event, i) => {
|
|
3043
3043
|
const step = event.type === 'step' ? parseStep(event.message) : null;
|
|
3044
3044
|
const StepIcon = step?.subtype ? STEP_ICON[step.subtype] : null;
|
|
3045
|
-
return (jsxRuntime.jsxs("p", { className: styles$
|
|
3046
|
-
}), stream.status === 'error' && stream.errorMessage && (jsxRuntime.jsxs("p", { className: styles$
|
|
3045
|
+
return (jsxRuntime.jsxs("p", { className: styles$c.line, "data-type": event.type, "data-subtype": step?.subtype ?? undefined, children: [jsxRuntime.jsx("span", { className: styles$c.linePrefix, children: StepIcon ? (jsxRuntime.jsx(StepIcon, { size: 11 })) : event.type === 'error' ? ('!') : event.type === 'warning' ? ('⚠') : event.type === 'success' ? ('✓') : ('·') }), step?.label ? (jsxRuntime.jsx("span", { className: styles$c.lineLabel, children: step.label })) : null, jsxRuntime.jsx("span", { className: styles$c.lineText, children: step ? step.body : event.message })] }, i));
|
|
3046
|
+
}), stream.status === 'error' && stream.errorMessage && (jsxRuntime.jsxs("p", { className: styles$c.line, "data-type": "error", children: [jsxRuntime.jsx("span", { className: styles$c.linePrefix, children: "!" }), jsxRuntime.jsx("span", { className: styles$c.lineText, children: stream.errorMessage })] }))] })] }));
|
|
3047
3047
|
}
|
|
3048
3048
|
|
|
3049
|
-
var styles$
|
|
3049
|
+
var styles$b = {"calendar":"Calendar-module_calendar__3mIJS","loading":"Calendar-module_loading__59Z9-","loadingSpinner":"Calendar-module_loadingSpinner__7MXqV","header":"Calendar-module_header__cZHNA","navigation":"Calendar-module_navigation__PGkpY","navButton":"Calendar-module_navButton__kOe-w","title":"Calendar-module_title__oJZ7m","controls":"Calendar-module_controls__i1Z38","exportDropdown":"Calendar-module_exportDropdown__yQX4q","exportButton":"Calendar-module_exportButton__dx7--","nightToggle":"Calendar-module_nightToggle__JGvmM","exportMenu":"Calendar-module_exportMenu__-lZ-8","exportMenuItem":"Calendar-module_exportMenuItem__D9MdL","todayButton":"Calendar-module_todayButton__Ac9zc","viewToggle":"Calendar-module_viewToggle__Fhg2t","viewButton":"Calendar-module_viewButton__J2WY6","active":"Calendar-module_active__lIqH-","filterBar":"Calendar-module_filterBar__ZD-lX","filterPill":"Calendar-module_filterPill__f7S8p","filterPillActive":"Calendar-module_filterPillActive__9Wtm9","filterDot":"Calendar-module_filterDot__E1Hp8","weekDays":"Calendar-module_weekDays__4J-8f","withWeekNumbers":"Calendar-module_withWeekNumbers__qbnUY","weekNumberHeader":"Calendar-module_weekNumberHeader__xhKbB","weekDay":"Calendar-module_weekDay__cg8Gr","daysGrid":"Calendar-module_daysGrid__ER0GM","dayCell":"Calendar-module_dayCell__TV-HR","dayNumber":"Calendar-module_dayNumber__ICH-X","today":"Calendar-module_today__eGuUU","events":"Calendar-module_events__qdbs7","event":"Calendar-module_event__Q1Zq3","eventTitle":"Calendar-module_eventTitle__XU7Wd","eventTime":"Calendar-module_eventTime__pMGEB","otherMonth":"Calendar-module_otherMonth__r6VJK","selected":"Calendar-module_selected__5e6h0","compact":"Calendar-module_compact__i0SF3","dots":"Calendar-module_dots__1Q7QR","dot":"Calendar-module_dot__tsCR1","dotMore":"Calendar-module_dotMore__emasD","weekNumberCell":"Calendar-module_weekNumberCell__bydCw","completed":"Calendar-module_completed__B-SHI","completedIcon":"Calendar-module_completedIcon__-oDZ9","moreEvents":"Calendar-module_moreEvents__TIKaT","emptyState":"Calendar-module_emptyState__2fcj7","dayView":"Calendar-module_dayView__PCIos","dayViewHeader":"Calendar-module_dayViewHeader__Gvxx2","timeColumnHeader":"Calendar-module_timeColumnHeader__B0btR","dayColumnHeader":"Calendar-module_dayColumnHeader__Rjqwg","allDayStrip":"Calendar-module_allDayStrip__VOqbV","allDayLabel":"Calendar-module_allDayLabel__2AmyT","allDayList":"Calendar-module_allDayList__6hFSb","dayViewScrollContainer":"Calendar-module_dayViewScrollContainer__84Byq","dayTimelineGrid":"Calendar-module_dayTimelineGrid__r1BNI","hourRow":"Calendar-module_hourRow__U-YN-","hourLabel":"Calendar-module_hourLabel__im84k","hourSlots":"Calendar-module_hourSlots__vbtYy","halfHourSlot":"Calendar-module_halfHourSlot__UWIri","halfHourSlotBottom":"Calendar-module_halfHourSlotBottom__aE5Mo","dayEventAnchor":"Calendar-module_dayEventAnchor__oryAi","weekTimeline":"Calendar-module_weekTimeline__q75EF","weekTimelineHeader":"Calendar-module_weekTimelineHeader__n5i06","weekDayColumnHeader":"Calendar-module_weekDayColumnHeader__u2ghX","weekDayLabel":"Calendar-module_weekDayLabel__i8Rm9","weekDayNumber":"Calendar-module_weekDayNumber__tqFKO","weekTimelineScroll":"Calendar-module_weekTimelineScroll__jesa0","weekTimelineGrid":"Calendar-module_weekTimelineGrid__MxIHF","weekTimeColumn":"Calendar-module_weekTimeColumn__rK4ZV","weekTimeSlot":"Calendar-module_weekTimeSlot__IFPUz","weekHourLabel":"Calendar-module_weekHourLabel__0ANmg","weekDayColumns":"Calendar-module_weekDayColumns__soiyU","weekDayColumn":"Calendar-module_weekDayColumn__sXVu0","weekHourRow":"Calendar-module_weekHourRow__FHcB2","weekEventAnchor":"Calendar-module_weekEventAnchor__nhG4x","currentTimeIndicator":"Calendar-module_currentTimeIndicator__GntOZ"};
|
|
3050
3050
|
|
|
3051
|
-
var styles$
|
|
3051
|
+
var styles$a = {"wrapper":"DayEventCard-module_wrapper__qvRgl","deleteUnderlay":"DayEventCard-module_deleteUnderlay__fTtuX","card":"DayEventCard-module_card__V9xTi","dragging":"DayEventCard-module_dragging__q19ID","completed":"DayEventCard-module_completed__tq8ol","text":"DayEventCard-module_text__3dWF7","grip":"DayEventCard-module_grip__tmim4","checkIcon":"DayEventCard-module_checkIcon__Ki67j","time":"DayEventCard-module_time__Ojdye","editButton":"DayEventCard-module_editButton__nDi-e"};
|
|
3052
3052
|
|
|
3053
3053
|
const SWIPE_DELETE_THRESHOLD = -80;
|
|
3054
3054
|
const DayEventCard = ({ event, color, textColor, onComplete, onEdit, onDelete, onDragEnd, draggable = true, }) => {
|
|
@@ -3110,9 +3110,9 @@ const DayEventCard = ({ event, color, textColor, onComplete, onEdit, onDelete, o
|
|
|
3110
3110
|
};
|
|
3111
3111
|
const canSwipe = !!onDelete;
|
|
3112
3112
|
const showGrip = draggable && !!onDragEnd;
|
|
3113
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
3113
|
+
return (jsxRuntime.jsxs("div", { className: styles$a.wrapper, children: [canSwipe && (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$a.deleteUnderlay, style: { opacity: deleteOpacity }, children: [jsxRuntime.jsx(lucideReact.Trash2, { size: 16 }), jsxRuntime.jsx("span", { children: "Delete" })] })), jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$a.card} ${completed ? styles$a.completed : ''} ${verticalDragging ? styles$a.dragging : ''}`, style: { x, y, background: color, color: textColor, borderLeftColor: color }, drag: canSwipe && !verticalDragging ? 'x' : false, dragConstraints: canSwipe ? { left: -200, right: 0 } : undefined, dragElastic: 0.15, dragDirectionLock: true, onDragStart: () => {
|
|
3114
3114
|
didSwipe.current = true;
|
|
3115
|
-
}, onDragEnd: handleSwipeEnd, whileTap: verticalDragging ? undefined : { scale: 0.98 }, animate: verticalDragging ? { scale: 1.03 } : { scale: 1 }, onClick: handleCardClick, children: [showGrip && (jsxRuntime.jsx("div", { className: styles$
|
|
3115
|
+
}, onDragEnd: handleSwipeEnd, whileTap: verticalDragging ? undefined : { scale: 0.98 }, animate: verticalDragging ? { scale: 1.03 } : { scale: 1 }, onClick: handleCardClick, children: [showGrip && (jsxRuntime.jsx("div", { className: styles$a.grip, onPointerDown: handleGripPointerDown, onPointerMove: handleGripPointerMove, onPointerUp: handleGripPointerUp, onPointerCancel: handleGripPointerUp, onClick: (e) => e.stopPropagation(), children: jsxRuntime.jsx(lucideReact.GripVertical, { size: 14 }) })), completed && jsxRuntime.jsx(lucideReact.Check, { size: 14, className: styles$a.checkIcon, strokeWidth: 3 }), jsxRuntime.jsx("span", { className: styles$a.text, children: event.title }), event.time && jsxRuntime.jsx("span", { className: styles$a.time, children: event.time }), onEdit && (jsxRuntime.jsx("button", { className: styles$a.editButton, onClick: (e) => {
|
|
3116
3116
|
e.stopPropagation();
|
|
3117
3117
|
onEdit(event);
|
|
3118
3118
|
}, "aria-label": "Edit event", children: jsxRuntime.jsx(lucideReact.Pencil, { size: 13 }) }))] })] }));
|
|
@@ -3536,15 +3536,15 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
|
|
|
3536
3536
|
return Math.floor(diff / oneWeek) + 1;
|
|
3537
3537
|
};
|
|
3538
3538
|
if (loading) {
|
|
3539
|
-
return (jsxRuntime.jsx("div", { className: `${styles$
|
|
3539
|
+
return (jsxRuntime.jsx("div", { className: `${styles$b.calendar} ${styles$b.loading} ${className}`, style: style, children: jsxRuntime.jsx("div", { className: styles$b.loadingSpinner, children: "Loading..." }) }));
|
|
3540
3540
|
}
|
|
3541
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
3541
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$b.calendar} ${compact ? styles$b.compact : ''} ${className}`, style: style, children: [!hideHeader && (jsxRuntime.jsxs("div", { className: styles$b.header, children: [jsxRuntime.jsxs("div", { className: styles$b.navigation, children: [jsxRuntime.jsx("button", { onClick: handlePrevious, className: styles$b.navButton, "aria-label": "Previous", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "15,18 9,12 15,6" }) }) }), jsxRuntime.jsx("h3", { className: styles$b.title, children: calendarData.displayTitle }), jsxRuntime.jsx("button", { onClick: handleNext, className: styles$b.navButton, "aria-label": "Next", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "9,6 15,12 9,18" }) }) })] }), categories && categories.length > 0 && (jsxRuntime.jsxs("div", { className: styles$b.filterBar, role: "tablist", "aria-label": "Filter by category", children: [jsxRuntime.jsx("button", { type: "button", role: "tab", "aria-selected": activeCategoryId === null, className: `${styles$b.filterPill} ${activeCategoryId === null ? styles$b.filterPillActive : ''}`, onClick: () => handleCategoryPick(null), children: "All" }), categories.map(cat => {
|
|
3542
3542
|
const active = activeCategoryId === cat.id;
|
|
3543
|
-
return (jsxRuntime.jsxs("button", { type: "button", role: "tab", "aria-selected": active, className: `${styles$
|
|
3544
|
-
})] })), jsxRuntime.jsxs("div", { className: styles$
|
|
3543
|
+
return (jsxRuntime.jsxs("button", { type: "button", role: "tab", "aria-selected": active, className: `${styles$b.filterPill} ${active ? styles$b.filterPillActive : ''}`, style: active ? { background: cat.color, borderColor: cat.color, color: '#ffffff' } : undefined, onClick: () => handleCategoryPick(cat.id), children: [!active && (jsxRuntime.jsx("span", { className: styles$b.filterDot, style: { background: cat.color } })), cat.label] }, cat.id));
|
|
3544
|
+
})] })), jsxRuntime.jsxs("div", { className: styles$b.controls, children: [exportFormats && exportFormats.length > 0 && (jsxRuntime.jsxs("div", { className: styles$b.exportDropdown, ref: exportRef, children: [jsxRuntime.jsx("button", { type: "button", className: styles$b.exportButton, onClick: () => setExportOpen(v => !v), "aria-haspopup": "menu", "aria-expanded": exportOpen, "aria-label": "Export events", title: "Export events", children: jsxRuntime.jsx(lucideReact.Download, { size: 16 }) }), exportOpen && (jsxRuntime.jsx("div", { className: styles$b.exportMenu, role: "menu", children: exportFormats.map(format => (jsxRuntime.jsx("button", { type: "button", role: "menuitem", className: styles$b.exportMenuItem, onClick: () => {
|
|
3545
3545
|
downloadEvents(filteredEvents, format);
|
|
3546
3546
|
setExportOpen(false);
|
|
3547
|
-
}, children: format.toUpperCase() }, format))) }))] })), (currentViewMode === 'day' || currentViewMode === 'week') && (jsxRuntime.jsx("button", { type: "button", className: styles$
|
|
3547
|
+
}, children: format.toUpperCase() }, format))) }))] })), (currentViewMode === 'day' || currentViewMode === 'week') && (jsxRuntime.jsx("button", { type: "button", className: styles$b.nightToggle, onClick: () => setHideNightHours(v => !v), "aria-pressed": hideNightHours, title: hideNightHours ? 'Show night hours' : 'Hide night hours (00:00–08:00)', "aria-label": hideNightHours ? 'Show night hours' : 'Hide night hours', children: hideNightHours ? jsxRuntime.jsx(lucideReact.Sun, { size: 16 }) : jsxRuntime.jsx(lucideReact.Moon, { size: 16 }) })), jsxRuntime.jsx("button", { onClick: handleToday, className: styles$b.todayButton, children: "Today" }), jsxRuntime.jsxs("div", { className: styles$b.viewToggle, children: [jsxRuntime.jsx("button", { className: `${styles$b.viewButton} ${currentViewMode === 'month' ? styles$b.active : ''}`, onClick: () => setCurrentViewMode('month'), children: "Month" }), jsxRuntime.jsx("button", { className: `${styles$b.viewButton} ${currentViewMode === 'week' ? styles$b.active : ''}`, onClick: () => setCurrentViewMode('week'), children: "Week" }), jsxRuntime.jsx("button", { className: `${styles$b.viewButton} ${currentViewMode === 'day' ? styles$b.active : ''}`, onClick: () => setCurrentViewMode('day'), children: "Day" })] })] })] })), currentViewMode === 'month' && (jsxRuntime.jsxs("div", { className: `${styles$b.weekDays} ${showWeekNumbers ? styles$b.withWeekNumbers : ''}`, children: [showWeekNumbers && jsxRuntime.jsx("div", { className: styles$b.weekNumberHeader, children: "Wk" }), finalDayLabels.map((day) => (jsxRuntime.jsx("div", { className: styles$b.weekDay, children: day }, day)))] })), currentViewMode === 'day' ? (
|
|
3548
3548
|
// Day view layout — positioned events with duration, all-day strip, now-line
|
|
3549
3549
|
(() => {
|
|
3550
3550
|
const dayEvents = getDayEvents(currentDate);
|
|
@@ -3579,7 +3579,7 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
|
|
|
3579
3579
|
const handleEventDragEnd = (event, clientY) => {
|
|
3580
3580
|
if (!onEventDrop)
|
|
3581
3581
|
return;
|
|
3582
|
-
const gridEl = dayViewScrollRef.current?.querySelector(`.${styles$
|
|
3582
|
+
const gridEl = dayViewScrollRef.current?.querySelector(`.${styles$b.dayTimelineGrid}`);
|
|
3583
3583
|
if (!gridEl)
|
|
3584
3584
|
return;
|
|
3585
3585
|
const rect = gridEl.getBoundingClientRect();
|
|
@@ -3594,7 +3594,7 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
|
|
|
3594
3594
|
newDate.setHours(newHour, newMinute, 0, 0);
|
|
3595
3595
|
onEventDrop(event, newDate);
|
|
3596
3596
|
};
|
|
3597
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
3597
|
+
return (jsxRuntime.jsxs("div", { className: styles$b.dayView, children: [jsxRuntime.jsxs("div", { className: styles$b.dayViewHeader, children: [jsxRuntime.jsx("div", { className: styles$b.timeColumnHeader }), jsxRuntime.jsx("div", { className: styles$b.dayColumnHeader, children: currentDate.toLocaleDateString(locale, { weekday: 'short', day: 'numeric' }) })] }), allDayEvents.length > 0 && (jsxRuntime.jsxs("div", { className: styles$b.allDayStrip, children: [jsxRuntime.jsx("span", { className: styles$b.allDayLabel, children: "All day" }), jsxRuntime.jsx("div", { className: styles$b.allDayList, children: allDayEvents.map(event => (jsxRuntime.jsx(DayEventCard, { event: event, color: getEventColor(event), textColor: getEventTextColor(event), onComplete: onEventComplete ?? (onEventClick ? handleEventClick : undefined), onEdit: onEventEdit, onDelete: onEventDelete, draggable: false }, event.id))) })] })), jsxRuntime.jsx("div", { className: styles$b.dayViewScrollContainer, ref: dayViewScrollRef, children: jsxRuntime.jsxs("div", { className: styles$b.dayTimelineGrid, style: { height: timelineHeight }, children: [hours.map(hour => (jsxRuntime.jsxs("div", { className: styles$b.hourRow, style: { height: hourHeight }, children: [jsxRuntime.jsxs("span", { className: styles$b.hourLabel, children: [hour.toString().padStart(2, '0'), ":00"] }), jsxRuntime.jsx("div", { className: styles$b.hourSlots, children: halfHourSlots ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: styles$b.halfHourSlot, onClick: () => handleSlotClick(hour, 0) }), jsxRuntime.jsx("div", { className: `${styles$b.halfHourSlot} ${styles$b.halfHourSlotBottom}`, onClick: () => handleSlotClick(hour, 30) })] })) : (jsxRuntime.jsx("div", { className: styles$b.halfHourSlot, onClick: () => handleSlotClick(hour, 0) })) })] }, hour))), scheduled.map((event) => {
|
|
3598
3598
|
const [h, m] = event.time.split(':').map(Number);
|
|
3599
3599
|
const top = (h - startHour) * hourHeight + (m / 60) * hourHeight;
|
|
3600
3600
|
const duration = eventDuration(event);
|
|
@@ -3602,13 +3602,13 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
|
|
|
3602
3602
|
const lane = dayLayout.get(event.id);
|
|
3603
3603
|
const totalCols = lane?.totalCols ?? 1;
|
|
3604
3604
|
const col = lane?.col ?? 0;
|
|
3605
|
-
return (jsxRuntime.jsx("div", { className: styles$
|
|
3605
|
+
return (jsxRuntime.jsx("div", { className: styles$b.dayEventAnchor, style: {
|
|
3606
3606
|
top,
|
|
3607
3607
|
height,
|
|
3608
3608
|
'--lane-col': col,
|
|
3609
3609
|
'--lane-total': totalCols,
|
|
3610
3610
|
}, onClick: (e) => e.stopPropagation(), children: jsxRuntime.jsx(DayEventCard, { event: event, color: getEventColor(event), textColor: getEventTextColor(event), onComplete: onEventComplete ?? (onEventClick ? handleEventClick : undefined), onEdit: onEventEdit, onDelete: onEventDelete, onDragEnd: onEventDrop ? (clientY) => handleEventDragEnd(event, clientY) : undefined }) }, event.id));
|
|
3611
|
-
}), showNow && (jsxRuntime.jsx("div", { className: styles$
|
|
3611
|
+
}), showNow && (jsxRuntime.jsx("div", { className: styles$b.currentTimeIndicator, style: { top: `${nowOffset}px` } }))] }) })] }));
|
|
3612
3612
|
})()) : currentViewMode === 'week' ? (
|
|
3613
3613
|
// Week view layout — 7 side-by-side day timelines. Drag events across
|
|
3614
3614
|
// columns to reschedule to a different day + hour in one gesture.
|
|
@@ -3642,7 +3642,7 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
|
|
|
3642
3642
|
const handleWeekDragEnd = (event, clientY, clientX) => {
|
|
3643
3643
|
if (!onEventDrop)
|
|
3644
3644
|
return;
|
|
3645
|
-
const gridEl = weekViewScrollRef.current?.querySelector(`.${styles$
|
|
3645
|
+
const gridEl = weekViewScrollRef.current?.querySelector(`.${styles$b.weekDayColumns}`);
|
|
3646
3646
|
if (!gridEl)
|
|
3647
3647
|
return;
|
|
3648
3648
|
const rect = gridEl.getBoundingClientRect();
|
|
@@ -3660,15 +3660,15 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
|
|
|
3660
3660
|
newDate.setHours(newHour, newMinute, 0, 0);
|
|
3661
3661
|
onEventDrop(event, newDate);
|
|
3662
3662
|
};
|
|
3663
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
3663
|
+
return (jsxRuntime.jsxs("div", { className: styles$b.weekTimeline, children: [jsxRuntime.jsxs("div", { className: styles$b.weekTimelineHeader, children: [jsxRuntime.jsx("div", { className: styles$b.timeColumnHeader }), days.map(day => {
|
|
3664
3664
|
const dayIsToday = day.toDateString() === now.toDateString();
|
|
3665
3665
|
const dayIsSelected = selectedDate && day.toDateString() === selectedDate.toDateString();
|
|
3666
|
-
return (jsxRuntime.jsxs("button", { type: "button", className: `${styles$
|
|
3667
|
-
})] }), jsxRuntime.jsx("div", { className: styles$
|
|
3666
|
+
return (jsxRuntime.jsxs("button", { type: "button", className: `${styles$b.weekDayColumnHeader} ${dayIsToday ? styles$b.today : ''} ${dayIsSelected ? styles$b.selected : ''}`, onClick: () => handleDateClick(day), children: [jsxRuntime.jsx("span", { className: styles$b.weekDayLabel, children: day.toLocaleDateString(locale, { weekday: 'short' }) }), jsxRuntime.jsx("span", { className: styles$b.weekDayNumber, children: day.getDate() })] }, day.toISOString()));
|
|
3667
|
+
})] }), jsxRuntime.jsx("div", { className: styles$b.weekTimelineScroll, ref: weekViewScrollRef, children: jsxRuntime.jsxs("div", { className: styles$b.weekTimelineGrid, style: { height: timelineHeight }, children: [jsxRuntime.jsx("div", { className: styles$b.weekTimeColumn, children: hours.map(hour => (jsxRuntime.jsx("div", { className: styles$b.weekTimeSlot, style: { height: hourHeight }, children: jsxRuntime.jsxs("span", { className: styles$b.weekHourLabel, children: [hour.toString().padStart(2, '0'), ":00"] }) }, hour))) }), jsxRuntime.jsx("div", { className: styles$b.weekDayColumns, children: days.map(day => {
|
|
3668
3668
|
const dayEvents = getDayEvents(day).filter(e => !e.allDay && e.time);
|
|
3669
3669
|
const dayIsToday = day.toDateString() === now.toDateString();
|
|
3670
3670
|
const dayLayout = layoutOverlappingEvents(dayEvents);
|
|
3671
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
3671
|
+
return (jsxRuntime.jsxs("div", { className: styles$b.weekDayColumn, children: [hours.map(hour => (jsxRuntime.jsx("div", { className: styles$b.weekHourRow, style: { height: hourHeight }, children: halfHourSlots ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: styles$b.halfHourSlot, onClick: () => handleWeekSlotClick(day, hour, 0) }), jsxRuntime.jsx("div", { className: `${styles$b.halfHourSlot} ${styles$b.halfHourSlotBottom}`, onClick: () => handleWeekSlotClick(day, hour, 30) })] })) : (jsxRuntime.jsx("div", { className: styles$b.halfHourSlot, onClick: () => handleWeekSlotClick(day, hour, 0) })) }, hour))), dayEvents.map(event => {
|
|
3672
3672
|
const [h, m] = event.time.split(':').map(Number);
|
|
3673
3673
|
const top = (h - startHour) * hourHeight + (m / 60) * hourHeight;
|
|
3674
3674
|
const duration = eventDuration(event);
|
|
@@ -3676,34 +3676,34 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
|
|
|
3676
3676
|
const lane = dayLayout.get(event.id);
|
|
3677
3677
|
const totalCols = lane?.totalCols ?? 1;
|
|
3678
3678
|
const col = lane?.col ?? 0;
|
|
3679
|
-
return (jsxRuntime.jsx("div", { className: styles$
|
|
3679
|
+
return (jsxRuntime.jsx("div", { className: styles$b.weekEventAnchor, style: {
|
|
3680
3680
|
top,
|
|
3681
3681
|
height,
|
|
3682
3682
|
'--lane-col': col,
|
|
3683
3683
|
'--lane-total': totalCols,
|
|
3684
3684
|
}, onClick: (e) => e.stopPropagation(), children: jsxRuntime.jsx(DayEventCard, { event: event, color: getEventColor(event), textColor: getEventTextColor(event), onComplete: onEventComplete ?? (onEventClick ? handleEventClick : undefined), onEdit: onEventEdit, onDelete: onEventDelete, onDragEnd: onEventDrop ? (cy, cx) => handleWeekDragEnd(event, cy, cx) : undefined }) }, event.id));
|
|
3685
|
-
}), dayIsToday && showNow && (jsxRuntime.jsx("div", { className: styles$
|
|
3685
|
+
}), dayIsToday && showNow && (jsxRuntime.jsx("div", { className: styles$b.currentTimeIndicator, style: { top: `${nowOffset}px`, left: 0 } }))] }, day.toISOString()));
|
|
3686
3686
|
}) })] }) })] }));
|
|
3687
3687
|
})()) : ((() => {
|
|
3688
3688
|
// Fixed month-view cell height derived from maxEventsPerDay.
|
|
3689
3689
|
// Day number + padding ≈ 40px, each event row ≈ 24px.
|
|
3690
3690
|
// Week and compact views keep their own CSS-driven sizing.
|
|
3691
3691
|
const monthCellHeight = !compact ? 40 + maxEventsPerDay * 24 : undefined;
|
|
3692
|
-
return (jsxRuntime.jsx("div", { className: `${styles$
|
|
3692
|
+
return (jsxRuntime.jsx("div", { className: `${styles$b.daysGrid} ${showWeekNumbers ? styles$b.withWeekNumbers : ''}`, children: calendarData.days.map((day, index) => {
|
|
3693
3693
|
const dayEvents = getDayEvents(day);
|
|
3694
3694
|
const dayIsToday = isToday(day);
|
|
3695
3695
|
const isInCurrentMonth = isCurrentMonth(day);
|
|
3696
3696
|
const isWeekStart = showWeekNumbers && (index % 7 === 0);
|
|
3697
3697
|
const dayIsSelected = selectedDate && day.toDateString() === selectedDate.toDateString();
|
|
3698
|
-
return (jsxRuntime.jsxs(React.Fragment, { children: [isWeekStart && (jsxRuntime.jsx("div", { className: styles$
|
|
3698
|
+
return (jsxRuntime.jsxs(React.Fragment, { children: [isWeekStart && (jsxRuntime.jsx("div", { className: styles$b.weekNumberCell, style: monthCellHeight !== undefined ? { height: monthCellHeight, minHeight: monthCellHeight } : undefined, children: getWeekNumber(day) })), jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$b.dayCell} ${dayIsToday ? styles$b.today : ''} ${!isInCurrentMonth ? styles$b.otherMonth : ''} ${dayIsSelected ? styles$b.selected : ''}`, style: monthCellHeight !== undefined ? { height: monthCellHeight, minHeight: monthCellHeight } : undefined, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: {
|
|
3699
3699
|
duration: 0.3,
|
|
3700
3700
|
delay: index * 0.02,
|
|
3701
3701
|
ease: "easeOut"
|
|
3702
|
-
}, onClick: () => handleDateClick(day), children: [jsxRuntime.jsx("div", { className: styles$
|
|
3702
|
+
}, onClick: () => handleDateClick(day), children: [jsxRuntime.jsx("div", { className: styles$b.dayNumber, children: day.getDate() }), dayEvents.length > 0 && compact && currentViewMode === 'month' ? (jsxRuntime.jsxs("div", { className: styles$b.dots, children: [dayEvents.slice(0, maxEventsPerDay).map((event) => (jsxRuntime.jsx("span", { className: styles$b.dot, style: {
|
|
3703
3703
|
backgroundColor: event.status === 'completed'
|
|
3704
3704
|
? '#10b981'
|
|
3705
3705
|
: getEventColor(event),
|
|
3706
|
-
} }, event.id))), dayEvents.length > maxEventsPerDay && (jsxRuntime.jsxs("span", { className: styles$
|
|
3706
|
+
} }, event.id))), dayEvents.length > maxEventsPerDay && (jsxRuntime.jsxs("span", { className: styles$b.dotMore, children: ["+", dayEvents.length - maxEventsPerDay] }))] })) : dayEvents.length > 0 ? (jsxRuntime.jsxs("div", { className: styles$b.events, children: [dayEvents.slice(0, maxEventsPerDay).map((event, eventIndex) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$b.event} ${event.status === 'completed' ? styles$b.completed : ''}`, style: {
|
|
3707
3707
|
backgroundColor: getEventColor(event),
|
|
3708
3708
|
color: getEventTextColor(event),
|
|
3709
3709
|
opacity: event.status === 'completed' ? 0.7 : 1
|
|
@@ -3721,7 +3721,7 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
|
|
|
3721
3721
|
}, whileTap: {
|
|
3722
3722
|
scale: 0.98,
|
|
3723
3723
|
transition: { duration: 0.1 }
|
|
3724
|
-
}, children: [iconRenderer && iconRenderer(event), jsxRuntime.jsxs("span", { className: styles$
|
|
3724
|
+
}, children: [iconRenderer && iconRenderer(event), jsxRuntime.jsxs("span", { className: styles$b.eventTitle, children: [event.time && (jsxRuntime.jsx("span", { className: styles$b.eventTime, children: event.time })), event.title] }), event.status === 'completed' && (jsxRuntime.jsx("svg", { className: styles$b.completedIcon, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "20,6 9,17 4,12" }) }))] }, event.id))), dayEvents.length > maxEventsPerDay && (jsxRuntime.jsxs("div", { className: styles$b.moreEvents, children: ["+", dayEvents.length - maxEventsPerDay, " more"] }))] })) : emptyState ? (jsxRuntime.jsx("div", { className: styles$b.emptyState, children: emptyState })) : null] })] }, `${day.getFullYear()}-${day.getMonth()}-${day.getDate()}`));
|
|
3725
3725
|
}) }));
|
|
3726
3726
|
})())] }));
|
|
3727
3727
|
}
|
|
@@ -3858,7 +3858,7 @@ const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = fals
|
|
|
3858
3858
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(framerMotion.motion.nav, { className: `${styles.navbar} ${styles[`navbar${variant.charAt(0).toUpperCase() + variant.slice(1)}`]} ${className}`, "data-colored-icons": coloredIconsAttr, initial: variant === 'sidebar' ? { x: -300 } : { opacity: 0 }, animate: variant === 'sidebar' ? { x: 0 } : { opacity: 1 }, transition: { type: 'spring', stiffness: 300, damping: 30 }, children: navContent }) }));
|
|
3859
3859
|
};
|
|
3860
3860
|
|
|
3861
|
-
var styles$
|
|
3861
|
+
var styles$9 = {"container":"MoodChart-module_container__MB1Vr","chart":"MoodChart-module_chart__4-spu","gridLine":"MoodChart-module_gridLine__YJpZ8","line":"MoodChart-module_line__LfeUX","xAxis":"MoodChart-module_xAxis__SeIWG","yAxis":"MoodChart-module_yAxis__sRjjE","dataPoint":"MoodChart-module_dataPoint__112P1","tooltip":"MoodChart-module_tooltip__vW59y","tooltipHeader":"MoodChart-module_tooltipHeader__U7yvN","tooltipDate":"MoodChart-module_tooltipDate__6Jjeu","tooltipRating":"MoodChart-module_tooltipRating__5A2Yx","ratingValue":"MoodChart-module_ratingValue__7Gpfx","ratingMax":"MoodChart-module_ratingMax__10WcJ","tooltipTags":"MoodChart-module_tooltipTags__FUQrU","tag":"MoodChart-module_tag__QhCh5","tooltipComment":"MoodChart-module_tooltipComment__6driJ"};
|
|
3862
3862
|
|
|
3863
3863
|
const MoodChart = ({ moodData, width = 800, height = 400 }) => {
|
|
3864
3864
|
const svgRef = React.useRef(null);
|
|
@@ -3916,27 +3916,27 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
|
|
|
3916
3916
|
g.selectAll('.grid-line-y')
|
|
3917
3917
|
.data(yScale.ticks(5))
|
|
3918
3918
|
.enter().append('line')
|
|
3919
|
-
.attr('class', styles$
|
|
3919
|
+
.attr('class', styles$9.gridLine)
|
|
3920
3920
|
.attr('x1', 0)
|
|
3921
3921
|
.attr('y1', d => yScale(d))
|
|
3922
3922
|
.attr('x2', chartWidth)
|
|
3923
3923
|
.attr('y2', d => yScale(d));
|
|
3924
3924
|
g.append('path')
|
|
3925
3925
|
.datum(processedData)
|
|
3926
|
-
.attr('class', styles$
|
|
3926
|
+
.attr('class', styles$9.line)
|
|
3927
3927
|
.attr('d', line);
|
|
3928
3928
|
g.append('g')
|
|
3929
|
-
.attr('class', styles$
|
|
3929
|
+
.attr('class', styles$9.xAxis)
|
|
3930
3930
|
.attr('transform', `translate(0,${chartHeight})`)
|
|
3931
3931
|
.call(d3__namespace.axisBottom(xScale)
|
|
3932
3932
|
.tickFormat(d => d3__namespace.timeFormat('%m/%d')(d)));
|
|
3933
3933
|
g.append('g')
|
|
3934
|
-
.attr('class', styles$
|
|
3934
|
+
.attr('class', styles$9.yAxis)
|
|
3935
3935
|
.call(d3__namespace.axisLeft(yScale));
|
|
3936
3936
|
g.selectAll('.mood-circle')
|
|
3937
3937
|
.data(processedData)
|
|
3938
3938
|
.enter().append('circle')
|
|
3939
|
-
.attr('class', styles$
|
|
3939
|
+
.attr('class', styles$9.dataPoint)
|
|
3940
3940
|
.attr('cx', d => xScale(d.date))
|
|
3941
3941
|
.attr('cy', d => yScale(d.rating))
|
|
3942
3942
|
.attr('r', 5)
|
|
@@ -3990,7 +3990,7 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
|
|
|
3990
3990
|
setSelectedMood(null);
|
|
3991
3991
|
};
|
|
3992
3992
|
}, []);
|
|
3993
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
3993
|
+
return (jsxRuntime.jsxs("div", { className: styles$9.container, ref: containerRef, children: [jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$9.chart }), selectedMood && (jsxRuntime.jsxs("div", { ref: tooltipRef, className: styles$9.tooltip, style: {
|
|
3994
3994
|
position: 'absolute',
|
|
3995
3995
|
pointerEvents: 'auto',
|
|
3996
3996
|
left: tooltipPosition.x,
|
|
@@ -3999,13 +3999,13 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
|
|
|
3999
3999
|
}, onMouseEnter: () => setIsHoveringTooltip(true), onMouseLeave: () => {
|
|
4000
4000
|
setIsHoveringTooltip(false);
|
|
4001
4001
|
setSelectedMood(null);
|
|
4002
|
-
}, children: [jsxRuntime.jsxs("div", { className: styles$
|
|
4002
|
+
}, children: [jsxRuntime.jsxs("div", { className: styles$9.tooltipHeader, children: [jsxRuntime.jsx("div", { className: styles$9.tooltipDate, children: selectedMood.date.toLocaleDateString() }), jsxRuntime.jsxs("div", { className: styles$9.tooltipRating, children: [jsxRuntime.jsx("span", { className: styles$9.ratingValue, children: selectedMood.rating }), jsxRuntime.jsx("span", { className: styles$9.ratingMax, children: "/10" })] })] }), selectedMood.tags.length > 0 && (jsxRuntime.jsx("div", { className: styles$9.tooltipTags, children: selectedMood.tags.map((tag, index) => (jsxRuntime.jsx("span", { className: styles$9.tag, children: tag }, index))) })), selectedMood.comment && (jsxRuntime.jsx("div", { className: styles$9.tooltipComment, children: selectedMood.comment }))] }))] }));
|
|
4003
4003
|
};
|
|
4004
4004
|
|
|
4005
|
-
var styles$
|
|
4005
|
+
var styles$8 = {"container":"QuantifiableHabitsChart-module_container__X5SBp","controls":"QuantifiableHabitsChart-module_controls__O-ObQ","viewToggle":"QuantifiableHabitsChart-module_viewToggle__24hKA","viewButton":"QuantifiableHabitsChart-module_viewButton__WFU6j","active":"QuantifiableHabitsChart-module_active__Pjqy9","viewIcon":"QuantifiableHabitsChart-module_viewIcon__b2mfk","viewLabel":"QuantifiableHabitsChart-module_viewLabel__9MjCU","aggregationToggle":"QuantifiableHabitsChart-module_aggregationToggle__WnxwB","aggregationButton":"QuantifiableHabitsChart-module_aggregationButton__sGCxX","aggregationIcon":"QuantifiableHabitsChart-module_aggregationIcon__HIaEf","aggregationLabel":"QuantifiableHabitsChart-module_aggregationLabel__Yc-S-","legend":"QuantifiableHabitsChart-module_legend__3Ki7c","compactLegend":"QuantifiableHabitsChart-module_compactLegend__jMpLB","legendItem":"QuantifiableHabitsChart-module_legendItem__Zl7fz","legendEmoji":"QuantifiableHabitsChart-module_legendEmoji__HG9CZ","legendLabel":"QuantifiableHabitsChart-module_legendLabel__H3oFL","inactive":"QuantifiableHabitsChart-module_inactive__TzZC-","legendColor":"QuantifiableHabitsChart-module_legendColor__zbPoV","chart":"QuantifiableHabitsChart-module_chart__FMeA-","gridLine":"QuantifiableHabitsChart-module_gridLine__CTNIq","line":"QuantifiableHabitsChart-module_line__CpYip","xAxis":"QuantifiableHabitsChart-module_xAxis__lbgBG","yAxis":"QuantifiableHabitsChart-module_yAxis__Y6WeV","dataPoint":"QuantifiableHabitsChart-module_dataPoint__s8UMX","tooltip":"QuantifiableHabitsChart-module_tooltip__Fay8N","visible":"QuantifiableHabitsChart-module_visible__-KSJq","tooltipHeader":"QuantifiableHabitsChart-module_tooltipHeader__7Q2up","tooltipEmoji":"QuantifiableHabitsChart-module_tooltipEmoji__atV3T","tooltipDot":"QuantifiableHabitsChart-module_tooltipDot__YbdFh","tooltipInfo":"QuantifiableHabitsChart-module_tooltipInfo__XC7WF","tooltipDate":"QuantifiableHabitsChart-module_tooltipDate__6V6Xi","tooltipValue":"QuantifiableHabitsChart-module_tooltipValue__ldASB"};
|
|
4006
4006
|
|
|
4007
4007
|
// Default colors as fallback
|
|
4008
|
-
const DEFAULT_HABIT_COLORS = {
|
|
4008
|
+
const DEFAULT_HABIT_COLORS$1 = {
|
|
4009
4009
|
'Exercise': '#6BCB77',
|
|
4010
4010
|
'Meditation': '#4D96FF',
|
|
4011
4011
|
'Reading': '#FFB319',
|
|
@@ -4058,7 +4058,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
4058
4058
|
}, [periodType]);
|
|
4059
4059
|
const getColor = React.useCallback((habit) => {
|
|
4060
4060
|
// First check custom colors, then defaults, then generate deterministic color
|
|
4061
|
-
return customHabitColors[habit] || DEFAULT_HABIT_COLORS[habit] || `hsl(${Math.abs(habit.split('').reduce((a, b) => a + b.charCodeAt(0), 0)) % 360}, 70%, 50%)`;
|
|
4061
|
+
return customHabitColors[habit] || DEFAULT_HABIT_COLORS$1[habit] || `hsl(${Math.abs(habit.split('').reduce((a, b) => a + b.charCodeAt(0), 0)) % 360}, 70%, 50%)`;
|
|
4062
4062
|
}, [customHabitColors]);
|
|
4063
4063
|
// Aggregate data based on view type
|
|
4064
4064
|
const aggregateData = React.useMemo(() => {
|
|
@@ -4155,7 +4155,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
4155
4155
|
g.selectAll('.grid-line-y')
|
|
4156
4156
|
.data(yScale.ticks(5))
|
|
4157
4157
|
.enter().append('line')
|
|
4158
|
-
.attr('class', styles$
|
|
4158
|
+
.attr('class', styles$8.gridLine)
|
|
4159
4159
|
.attr('x1', 0)
|
|
4160
4160
|
.attr('y1', d => yScale(d))
|
|
4161
4161
|
.attr('x2', chartWidth)
|
|
@@ -4168,7 +4168,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
4168
4168
|
const habitData = dates.map((date, i) => [date, aggregateData[habit][i]]).filter(d => typeof d[1] === 'number');
|
|
4169
4169
|
g.append('path')
|
|
4170
4170
|
.datum(habitData)
|
|
4171
|
-
.attr('class', styles$
|
|
4171
|
+
.attr('class', styles$8.line)
|
|
4172
4172
|
.attr('d', line)
|
|
4173
4173
|
.attr('stroke', getColor(habit))
|
|
4174
4174
|
.attr('opacity', hoveredHabit && hoveredHabit !== habit ? 0.3 : 1);
|
|
@@ -4215,7 +4215,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
4215
4215
|
g.selectAll(`.circle-${habit}`)
|
|
4216
4216
|
.data(habitData)
|
|
4217
4217
|
.enter().append('circle')
|
|
4218
|
-
.attr('class', (_d, i) => `${styles$
|
|
4218
|
+
.attr('class', (_d, i) => `${styles$8.dataPoint} circle-${habit}-${i}`)
|
|
4219
4219
|
.attr('cx', d => xScale(d[0]))
|
|
4220
4220
|
.attr('cy', d => yScale(d[1]))
|
|
4221
4221
|
.attr('r', 4)
|
|
@@ -4277,7 +4277,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
4277
4277
|
xAxisGenerator.ticks(tickCount);
|
|
4278
4278
|
}
|
|
4279
4279
|
const xAxis = g.append('g')
|
|
4280
|
-
.attr('class', styles$
|
|
4280
|
+
.attr('class', styles$8.xAxis)
|
|
4281
4281
|
.attr('transform', `translate(0,${chartHeight})`)
|
|
4282
4282
|
.call(xAxisGenerator);
|
|
4283
4283
|
// Rotate labels for better readability if needed
|
|
@@ -4289,7 +4289,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
4289
4289
|
.attr('transform', 'rotate(-45)');
|
|
4290
4290
|
}
|
|
4291
4291
|
g.append('g')
|
|
4292
|
-
.attr('class', styles$
|
|
4292
|
+
.attr('class', styles$8.yAxis)
|
|
4293
4293
|
.call(d3__namespace.axisLeft(yScale));
|
|
4294
4294
|
}, [aggregateData, activeHabits, chartWidth, chartHeight, margin, hoveredHabit, onDataPointClick, getColor, height, viewType, width]);
|
|
4295
4295
|
// Format date for tooltip display
|
|
@@ -4321,10 +4321,337 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
4321
4321
|
quarterly: { icon: '📊', label: 'Quarterly' }
|
|
4322
4322
|
};
|
|
4323
4323
|
const shouldShowAggregationToggle = viewType !== 'daily';
|
|
4324
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
4324
|
+
return (jsxRuntime.jsxs("div", { className: styles$8.container, children: [!hideControls && (jsxRuntime.jsxs("div", { className: styles$8.controls, children: [jsxRuntime.jsx("div", { className: styles$8.viewToggle, children: availableViewTypes.map(type => (jsxRuntime.jsxs("button", { className: `${styles$8.viewButton} ${viewType === type ? styles$8.active : ''}`, onClick: () => setViewType(type), title: viewTypeConfig[type].label, children: [jsxRuntime.jsx("span", { className: styles$8.viewIcon, children: viewTypeConfig[type].icon }), jsxRuntime.jsx("span", { className: styles$8.viewLabel, children: viewTypeConfig[type].label })] }, type))) }), shouldShowAggregationToggle && (jsxRuntime.jsxs("div", { className: styles$8.aggregationToggle, children: [jsxRuntime.jsxs("button", { className: `${styles$8.aggregationButton} ${aggregationMode === 'average' ? styles$8.active : ''}`, onClick: () => setAggregationMode('average'), title: "Show average values for each period", children: [jsxRuntime.jsx("span", { className: styles$8.aggregationIcon, children: "\uD83D\uDCCA" }), jsxRuntime.jsx("span", { className: styles$8.aggregationLabel, children: "Average" })] }), jsxRuntime.jsxs("button", { className: `${styles$8.aggregationButton} ${aggregationMode === 'sum' ? styles$8.active : ''}`, onClick: () => setAggregationMode('sum'), title: "Show total values for each period", children: [jsxRuntime.jsx("span", { className: styles$8.aggregationIcon, children: "\u2795" }), jsxRuntime.jsx("span", { className: styles$8.aggregationLabel, children: "Sum" })] })] }))] })), jsxRuntime.jsx("div", { className: `${styles$8.legend}${compactLegend ? ` ${styles$8.compactLegend}` : ''}`, children: habits.map(habit => (jsxRuntime.jsxs("button", { className: `${styles$8.legendItem} ${!activeHabits.includes(habit) ? styles$8.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsxRuntime.jsx("span", { className: styles$8.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsxRuntime.jsx("span", { className: styles$8.legendColor, style: { backgroundColor: getColor(habit) } }), jsxRuntime.jsx("span", { className: styles$8.legendLabel, children: habit })] }, habit))) }), jsxRuntime.jsx("svg", { ref: svgRef, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", className: styles$8.chart }), tooltipData && (jsxRuntime.jsxs("div", { ref: tooltipRef, className: `${styles$8.tooltip} ${tooltipData ? styles$8.visible : ''}`, style: {
|
|
4325
4325
|
left: `${tooltipData.x}px`,
|
|
4326
4326
|
top: `${tooltipData.y - 80}px`
|
|
4327
|
-
}, children: [jsxRuntime.jsxs("div", { className: styles$
|
|
4327
|
+
}, children: [jsxRuntime.jsxs("div", { className: styles$8.tooltipHeader, children: [jsxRuntime.jsx("span", { className: styles$8.tooltipEmoji, children: customHabitEmojis[tooltipData.habit] || '📊' }), jsxRuntime.jsx("span", { className: styles$8.tooltipDot, style: { backgroundColor: getColor(tooltipData.habit) } }), jsxRuntime.jsx("span", { children: tooltipData.habit })] }), jsxRuntime.jsxs("div", { className: styles$8.tooltipInfo, children: [jsxRuntime.jsx("div", { className: styles$8.tooltipDate, children: formatTooltipDate(tooltipData.date, viewType) }), jsxRuntime.jsxs("div", { className: styles$8.tooltipValue, children: [jsxRuntime.jsx("strong", { children: Math.round(tooltipData.value * 10) / 10 }), jsxRuntime.jsx("span", { style: { fontSize: '12px', fontWeight: 'normal', opacity: 0.6 }, children: "units" })] })] })] }))] }));
|
|
4328
|
+
};
|
|
4329
|
+
|
|
4330
|
+
var styles$7 = {"container":"HabitTimeOfDayChart-module_container__DCW3B","controls":"HabitTimeOfDayChart-module_controls__2p7mW","viewToggle":"HabitTimeOfDayChart-module_viewToggle__SSfDu","viewButton":"HabitTimeOfDayChart-module_viewButton__DENLF","active":"HabitTimeOfDayChart-module_active__VRrF1","viewIcon":"HabitTimeOfDayChart-module_viewIcon__MXqrp","viewLabel":"HabitTimeOfDayChart-module_viewLabel__XNKhi","legend":"HabitTimeOfDayChart-module_legend__y4Apu","compactLegend":"HabitTimeOfDayChart-module_compactLegend__Gsodv","legendItem":"HabitTimeOfDayChart-module_legendItem__QEXr4","legendEmoji":"HabitTimeOfDayChart-module_legendEmoji__T7zLH","legendLabel":"HabitTimeOfDayChart-module_legendLabel__TUT29","inactive":"HabitTimeOfDayChart-module_inactive__xVIwD","legendColor":"HabitTimeOfDayChart-module_legendColor__SzkAm","chart":"HabitTimeOfDayChart-module_chart__7Plpd","cell":"HabitTimeOfDayChart-module_cell__CBx4Z","cellEmpty":"HabitTimeOfDayChart-module_cellEmpty__8svdi","bar":"HabitTimeOfDayChart-module_bar__F0Rwy","gridLine":"HabitTimeOfDayChart-module_gridLine__waZrZ","xAxis":"HabitTimeOfDayChart-module_xAxis__pQGbi","yAxis":"HabitTimeOfDayChart-module_yAxis__fblot","tooltip":"HabitTimeOfDayChart-module_tooltip__8EPnz","visible":"HabitTimeOfDayChart-module_visible__3yEYR","tooltipHeader":"HabitTimeOfDayChart-module_tooltipHeader__1ywo5","tooltipInfo":"HabitTimeOfDayChart-module_tooltipInfo__xizGe","tooltipValue":"HabitTimeOfDayChart-module_tooltipValue__DcYfO","tooltipUnits":"HabitTimeOfDayChart-module_tooltipUnits__Um-EN","tooltipBreakdown":"HabitTimeOfDayChart-module_tooltipBreakdown__AQ27l","tooltipBreakdownRow":"HabitTimeOfDayChart-module_tooltipBreakdownRow__jHc6D","tooltipDot":"HabitTimeOfDayChart-module_tooltipDot__Khfwh","tooltipCount":"HabitTimeOfDayChart-module_tooltipCount__BRgaU"};
|
|
4331
|
+
|
|
4332
|
+
const DEFAULT_HABIT_COLORS = {
|
|
4333
|
+
Exercise: '#6BCB77',
|
|
4334
|
+
Meditation: '#4D96FF',
|
|
4335
|
+
Reading: '#FFB319',
|
|
4336
|
+
Water: '#00D9FF',
|
|
4337
|
+
Steps: '#FF6B6B',
|
|
4338
|
+
Sleep: '#9B59B6',
|
|
4339
|
+
Calories: '#FF9F1C',
|
|
4340
|
+
Study: '#C774E8',
|
|
4341
|
+
};
|
|
4342
|
+
const getDateKey = (d) => {
|
|
4343
|
+
const y = d.getFullYear();
|
|
4344
|
+
const m = String(d.getMonth() + 1).padStart(2, '0');
|
|
4345
|
+
const day = String(d.getDate()).padStart(2, '0');
|
|
4346
|
+
return `${y}-${m}-${day}`;
|
|
4347
|
+
};
|
|
4348
|
+
const formatHour = (hour) => {
|
|
4349
|
+
const h = hour % 24;
|
|
4350
|
+
if (h === 0)
|
|
4351
|
+
return '12a';
|
|
4352
|
+
if (h === 12)
|
|
4353
|
+
return '12p';
|
|
4354
|
+
return h < 12 ? `${h}a` : `${h - 12}p`;
|
|
4355
|
+
};
|
|
4356
|
+
const enumerateDates = (start, end) => {
|
|
4357
|
+
const dates = [];
|
|
4358
|
+
const [sy, sm, sd] = start.split('-').map(Number);
|
|
4359
|
+
const [ey, em, ed] = end.split('-').map(Number);
|
|
4360
|
+
const current = new Date(sy, sm - 1, sd);
|
|
4361
|
+
const last = new Date(ey, em - 1, ed);
|
|
4362
|
+
while (current <= last) {
|
|
4363
|
+
dates.push(getDateKey(current));
|
|
4364
|
+
current.setDate(current.getDate() + 1);
|
|
4365
|
+
}
|
|
4366
|
+
return dates;
|
|
4367
|
+
};
|
|
4368
|
+
const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, endDate, habitColors: customHabitColors = {}, habitEmojis: customHabitEmojis = {}, defaultView = 'heatmap', hideControls = false, compactLegend = false, }) => {
|
|
4369
|
+
const svgRef = React.useRef(null);
|
|
4370
|
+
const [view, setView] = React.useState(defaultView);
|
|
4371
|
+
const [activeHabits, setActiveHabits] = React.useState([]);
|
|
4372
|
+
const [hoveredHabit, setHoveredHabit] = React.useState(null);
|
|
4373
|
+
const [tooltipData, setTooltipData] = React.useState(null);
|
|
4374
|
+
const margin = React.useMemo(() => ({ top: 20, right: 20, bottom: 50, left: 70 }), []);
|
|
4375
|
+
const chartWidth = width - margin.left - margin.right;
|
|
4376
|
+
const chartHeight = height - margin.top - margin.bottom;
|
|
4377
|
+
const getColor = React.useCallback((habit) => {
|
|
4378
|
+
return (customHabitColors[habit] ||
|
|
4379
|
+
DEFAULT_HABIT_COLORS[habit] ||
|
|
4380
|
+
`hsl(${Math.abs(habit.split('').reduce((a, b) => a + b.charCodeAt(0), 0)) % 360}, 70%, 50%)`);
|
|
4381
|
+
}, [customHabitColors]);
|
|
4382
|
+
const parsed = React.useMemo(() => {
|
|
4383
|
+
return events
|
|
4384
|
+
.map(e => {
|
|
4385
|
+
const d = new Date(e.loggedAt);
|
|
4386
|
+
if (Number.isNaN(d.getTime()))
|
|
4387
|
+
return null;
|
|
4388
|
+
return { habitKey: e.habitKey, hour: d.getHours(), date: getDateKey(d) };
|
|
4389
|
+
})
|
|
4390
|
+
.filter((e) => e !== null);
|
|
4391
|
+
}, [events]);
|
|
4392
|
+
const habits = React.useMemo(() => {
|
|
4393
|
+
const set = new Set();
|
|
4394
|
+
parsed.forEach(e => set.add(e.habitKey));
|
|
4395
|
+
return Array.from(set).sort();
|
|
4396
|
+
}, [parsed]);
|
|
4397
|
+
React.useEffect(() => {
|
|
4398
|
+
setActiveHabits(habits);
|
|
4399
|
+
}, [habits]);
|
|
4400
|
+
React.useEffect(() => {
|
|
4401
|
+
const handleScroll = () => setTooltipData(null);
|
|
4402
|
+
window.addEventListener('scroll', handleScroll, true);
|
|
4403
|
+
return () => window.removeEventListener('scroll', handleScroll, true);
|
|
4404
|
+
}, []);
|
|
4405
|
+
const dateRange = React.useMemo(() => {
|
|
4406
|
+
if (startDate && endDate)
|
|
4407
|
+
return enumerateDates(startDate, endDate);
|
|
4408
|
+
if (parsed.length === 0)
|
|
4409
|
+
return [];
|
|
4410
|
+
const sorted = [...parsed].map(p => p.date).sort();
|
|
4411
|
+
return enumerateDates(sorted[0], sorted[sorted.length - 1]);
|
|
4412
|
+
}, [parsed, startDate, endDate]);
|
|
4413
|
+
const filtered = React.useMemo(() => {
|
|
4414
|
+
const active = new Set(activeHabits);
|
|
4415
|
+
return parsed.filter(e => active.has(e.habitKey));
|
|
4416
|
+
}, [parsed, activeHabits]);
|
|
4417
|
+
// Heatmap cell counts: key = `${date}|${hour}`, value = { total, byHabit }
|
|
4418
|
+
const cellCounts = React.useMemo(() => {
|
|
4419
|
+
const map = new Map();
|
|
4420
|
+
filtered.forEach(e => {
|
|
4421
|
+
const key = `${e.date}|${e.hour}`;
|
|
4422
|
+
let cell = map.get(key);
|
|
4423
|
+
if (!cell) {
|
|
4424
|
+
cell = { total: 0, byHabit: new Map() };
|
|
4425
|
+
map.set(key, cell);
|
|
4426
|
+
}
|
|
4427
|
+
cell.total += 1;
|
|
4428
|
+
cell.byHabit.set(e.habitKey, (cell.byHabit.get(e.habitKey) || 0) + 1);
|
|
4429
|
+
});
|
|
4430
|
+
return map;
|
|
4431
|
+
}, [filtered]);
|
|
4432
|
+
// Hourly totals: array of { hour, total, byHabit }
|
|
4433
|
+
const hourlyTotals = React.useMemo(() => {
|
|
4434
|
+
const totals = Array.from({ length: 24 }, (_, hour) => ({
|
|
4435
|
+
hour,
|
|
4436
|
+
total: 0,
|
|
4437
|
+
byHabit: new Map(),
|
|
4438
|
+
}));
|
|
4439
|
+
filtered.forEach(e => {
|
|
4440
|
+
const bucket = totals[e.hour];
|
|
4441
|
+
bucket.total += 1;
|
|
4442
|
+
bucket.byHabit.set(e.habitKey, (bucket.byHabit.get(e.habitKey) || 0) + 1);
|
|
4443
|
+
});
|
|
4444
|
+
return totals;
|
|
4445
|
+
}, [filtered]);
|
|
4446
|
+
const maxCellCount = React.useMemo(() => {
|
|
4447
|
+
let max = 0;
|
|
4448
|
+
cellCounts.forEach(v => {
|
|
4449
|
+
if (v.total > max)
|
|
4450
|
+
max = v.total;
|
|
4451
|
+
});
|
|
4452
|
+
return max;
|
|
4453
|
+
}, [cellCounts]);
|
|
4454
|
+
const maxHourTotal = React.useMemo(() => {
|
|
4455
|
+
return hourlyTotals.reduce((m, b) => Math.max(m, b.total), 0);
|
|
4456
|
+
}, [hourlyTotals]);
|
|
4457
|
+
const toggleHabit = (habit) => {
|
|
4458
|
+
setActiveHabits(prev => prev.includes(habit) ? prev.filter(h => h !== habit) : [...prev, habit]);
|
|
4459
|
+
};
|
|
4460
|
+
// Render heatmap
|
|
4461
|
+
React.useEffect(() => {
|
|
4462
|
+
if (!svgRef.current)
|
|
4463
|
+
return;
|
|
4464
|
+
const svg = d3__namespace.select(svgRef.current);
|
|
4465
|
+
svg.selectAll('*').remove();
|
|
4466
|
+
svg.append('rect')
|
|
4467
|
+
.attr('width', width)
|
|
4468
|
+
.attr('height', height)
|
|
4469
|
+
.attr('fill', 'transparent')
|
|
4470
|
+
.style('pointer-events', 'all')
|
|
4471
|
+
.on('mouseleave', () => setTooltipData(null));
|
|
4472
|
+
const g = svg
|
|
4473
|
+
.append('g')
|
|
4474
|
+
.attr('transform', `translate(${margin.left},${margin.top})`);
|
|
4475
|
+
if (view === 'heatmap') {
|
|
4476
|
+
if (dateRange.length === 0)
|
|
4477
|
+
return;
|
|
4478
|
+
const xScale = d3__namespace.scaleBand()
|
|
4479
|
+
.domain(d3__namespace.range(24))
|
|
4480
|
+
.range([0, chartWidth])
|
|
4481
|
+
.padding(0.08);
|
|
4482
|
+
const yScale = d3__namespace.scaleBand()
|
|
4483
|
+
.domain(dateRange)
|
|
4484
|
+
.range([0, chartHeight])
|
|
4485
|
+
.padding(0.08);
|
|
4486
|
+
const intensity = (count) => {
|
|
4487
|
+
if (count === 0)
|
|
4488
|
+
return 0;
|
|
4489
|
+
const denom = Math.max(1, maxCellCount);
|
|
4490
|
+
return 0.2 + 0.8 * (count / denom);
|
|
4491
|
+
};
|
|
4492
|
+
const cells = [];
|
|
4493
|
+
dateRange.forEach(date => {
|
|
4494
|
+
for (let hour = 0; hour < 24; hour++) {
|
|
4495
|
+
const cell = cellCounts.get(`${date}|${hour}`);
|
|
4496
|
+
cells.push({
|
|
4497
|
+
date,
|
|
4498
|
+
hour,
|
|
4499
|
+
count: cell?.total ?? 0,
|
|
4500
|
+
byHabit: cell?.byHabit ?? new Map(),
|
|
4501
|
+
});
|
|
4502
|
+
}
|
|
4503
|
+
});
|
|
4504
|
+
g.selectAll('rect.cell')
|
|
4505
|
+
.data(cells)
|
|
4506
|
+
.enter()
|
|
4507
|
+
.append('rect')
|
|
4508
|
+
.attr('class', d => (d.count === 0 ? styles$7.cellEmpty : styles$7.cell))
|
|
4509
|
+
.attr('x', d => xScale(d.hour) ?? 0)
|
|
4510
|
+
.attr('y', d => yScale(d.date) ?? 0)
|
|
4511
|
+
.attr('width', xScale.bandwidth())
|
|
4512
|
+
.attr('height', yScale.bandwidth())
|
|
4513
|
+
.attr('rx', 2)
|
|
4514
|
+
.attr('opacity', d => (d.count === 0 ? 1 : intensity(d.count)))
|
|
4515
|
+
.on('mouseenter', function (_event, d) {
|
|
4516
|
+
if (d.count === 0)
|
|
4517
|
+
return;
|
|
4518
|
+
const rect = svgRef.current?.getBoundingClientRect();
|
|
4519
|
+
if (!rect)
|
|
4520
|
+
return;
|
|
4521
|
+
setTooltipData({
|
|
4522
|
+
x: (xScale(d.hour) ?? 0) + xScale.bandwidth() / 2 + margin.left + rect.left,
|
|
4523
|
+
y: (yScale(d.date) ?? 0) + margin.top + rect.top,
|
|
4524
|
+
hour: d.hour,
|
|
4525
|
+
date: d.date,
|
|
4526
|
+
count: d.count,
|
|
4527
|
+
breakdown: Array.from(d.byHabit.entries())
|
|
4528
|
+
.map(([habit, count]) => ({ habit, count }))
|
|
4529
|
+
.sort((a, b) => b.count - a.count),
|
|
4530
|
+
});
|
|
4531
|
+
})
|
|
4532
|
+
.on('mouseleave', () => setTooltipData(null));
|
|
4533
|
+
// X axis (hours)
|
|
4534
|
+
const hourTicks = [0, 3, 6, 9, 12, 15, 18, 21];
|
|
4535
|
+
const xAxis = d3__namespace.axisBottom(xScale)
|
|
4536
|
+
.tickValues(hourTicks)
|
|
4537
|
+
.tickFormat(d => formatHour(d));
|
|
4538
|
+
g.append('g')
|
|
4539
|
+
.attr('class', styles$7.xAxis)
|
|
4540
|
+
.attr('transform', `translate(0,${chartHeight})`)
|
|
4541
|
+
.call(xAxis);
|
|
4542
|
+
// Y axis (dates) — show only a few evenly spaced
|
|
4543
|
+
const yTickCount = Math.min(8, dateRange.length);
|
|
4544
|
+
const yStep = Math.max(1, Math.floor(dateRange.length / yTickCount));
|
|
4545
|
+
const yTickValues = dateRange.filter((_, i) => i % yStep === 0);
|
|
4546
|
+
const yAxis = d3__namespace.axisLeft(yScale)
|
|
4547
|
+
.tickValues(yTickValues)
|
|
4548
|
+
.tickFormat(d => {
|
|
4549
|
+
const [, m, day] = d.split('-');
|
|
4550
|
+
return `${m}/${day}`;
|
|
4551
|
+
});
|
|
4552
|
+
g.append('g').attr('class', styles$7.yAxis).call(yAxis);
|
|
4553
|
+
}
|
|
4554
|
+
else {
|
|
4555
|
+
// Totals view: bar chart of hour totals
|
|
4556
|
+
const xScale = d3__namespace.scaleBand()
|
|
4557
|
+
.domain(d3__namespace.range(24))
|
|
4558
|
+
.range([0, chartWidth])
|
|
4559
|
+
.padding(0.15);
|
|
4560
|
+
const yScale = d3__namespace.scaleLinear()
|
|
4561
|
+
.domain([0, Math.max(1, maxHourTotal)])
|
|
4562
|
+
.nice()
|
|
4563
|
+
.range([chartHeight, 0]);
|
|
4564
|
+
// Grid lines
|
|
4565
|
+
g.selectAll('line.grid')
|
|
4566
|
+
.data(yScale.ticks(5))
|
|
4567
|
+
.enter()
|
|
4568
|
+
.append('line')
|
|
4569
|
+
.attr('class', styles$7.gridLine)
|
|
4570
|
+
.attr('x1', 0)
|
|
4571
|
+
.attr('x2', chartWidth)
|
|
4572
|
+
.attr('y1', d => yScale(d))
|
|
4573
|
+
.attr('y2', d => yScale(d));
|
|
4574
|
+
// Stacked bars by habit
|
|
4575
|
+
hourlyTotals.forEach(bucket => {
|
|
4576
|
+
let cumulative = 0;
|
|
4577
|
+
const entries = Array.from(bucket.byHabit.entries()).sort(([a], [b]) => a.localeCompare(b));
|
|
4578
|
+
entries.forEach(([habit, count]) => {
|
|
4579
|
+
const y = yScale(cumulative + count);
|
|
4580
|
+
const barHeight = Math.max(0, yScale(cumulative) - yScale(cumulative + count));
|
|
4581
|
+
g.append('rect')
|
|
4582
|
+
.attr('class', styles$7.bar)
|
|
4583
|
+
.attr('x', xScale(bucket.hour) ?? 0)
|
|
4584
|
+
.attr('y', y)
|
|
4585
|
+
.attr('width', xScale.bandwidth())
|
|
4586
|
+
.attr('height', barHeight)
|
|
4587
|
+
.attr('fill', getColor(habit))
|
|
4588
|
+
.attr('opacity', hoveredHabit && hoveredHabit !== habit ? 0.3 : 1);
|
|
4589
|
+
cumulative += count;
|
|
4590
|
+
});
|
|
4591
|
+
// Invisible hover target for the whole bar
|
|
4592
|
+
if (bucket.total > 0) {
|
|
4593
|
+
g.append('rect')
|
|
4594
|
+
.attr('x', xScale(bucket.hour) ?? 0)
|
|
4595
|
+
.attr('y', 0)
|
|
4596
|
+
.attr('width', xScale.bandwidth())
|
|
4597
|
+
.attr('height', chartHeight)
|
|
4598
|
+
.attr('fill', 'transparent')
|
|
4599
|
+
.style('cursor', 'pointer')
|
|
4600
|
+
.on('mouseenter', function () {
|
|
4601
|
+
const rect = svgRef.current?.getBoundingClientRect();
|
|
4602
|
+
if (!rect)
|
|
4603
|
+
return;
|
|
4604
|
+
setTooltipData({
|
|
4605
|
+
x: (xScale(bucket.hour) ?? 0) + xScale.bandwidth() / 2 + margin.left + rect.left,
|
|
4606
|
+
y: yScale(bucket.total) + margin.top + rect.top,
|
|
4607
|
+
hour: bucket.hour,
|
|
4608
|
+
count: bucket.total,
|
|
4609
|
+
breakdown: Array.from(bucket.byHabit.entries())
|
|
4610
|
+
.map(([habit, count]) => ({ habit, count }))
|
|
4611
|
+
.sort((a, b) => b.count - a.count),
|
|
4612
|
+
});
|
|
4613
|
+
})
|
|
4614
|
+
.on('mouseleave', () => setTooltipData(null));
|
|
4615
|
+
}
|
|
4616
|
+
});
|
|
4617
|
+
// X axis
|
|
4618
|
+
const xAxis = d3__namespace.axisBottom(xScale)
|
|
4619
|
+
.tickValues([0, 3, 6, 9, 12, 15, 18, 21])
|
|
4620
|
+
.tickFormat(d => formatHour(d));
|
|
4621
|
+
g.append('g')
|
|
4622
|
+
.attr('class', styles$7.xAxis)
|
|
4623
|
+
.attr('transform', `translate(0,${chartHeight})`)
|
|
4624
|
+
.call(xAxis);
|
|
4625
|
+
g.append('g').attr('class', styles$7.yAxis).call(d3__namespace.axisLeft(yScale).ticks(5));
|
|
4626
|
+
}
|
|
4627
|
+
}, [
|
|
4628
|
+
view,
|
|
4629
|
+
cellCounts,
|
|
4630
|
+
hourlyTotals,
|
|
4631
|
+
dateRange,
|
|
4632
|
+
maxCellCount,
|
|
4633
|
+
maxHourTotal,
|
|
4634
|
+
chartWidth,
|
|
4635
|
+
chartHeight,
|
|
4636
|
+
margin,
|
|
4637
|
+
width,
|
|
4638
|
+
height,
|
|
4639
|
+
hoveredHabit,
|
|
4640
|
+
getColor,
|
|
4641
|
+
]);
|
|
4642
|
+
const viewConfig = {
|
|
4643
|
+
heatmap: { icon: '🗓️', label: 'Grid' },
|
|
4644
|
+
totals: { icon: '📊', label: 'Totals' },
|
|
4645
|
+
};
|
|
4646
|
+
const formatTooltipDate = (date) => {
|
|
4647
|
+
const [y, m, d] = date.split('-').map(Number);
|
|
4648
|
+
return new Date(y, m - 1, d).toLocaleDateString('en-US', {
|
|
4649
|
+
weekday: 'short',
|
|
4650
|
+
month: 'short',
|
|
4651
|
+
day: 'numeric',
|
|
4652
|
+
});
|
|
4653
|
+
};
|
|
4654
|
+
return (jsxRuntime.jsxs("div", { className: styles$7.container, children: [!hideControls && (jsxRuntime.jsx("div", { className: styles$7.controls, children: jsxRuntime.jsx("div", { className: styles$7.viewToggle, children: ['heatmap', 'totals'].map(type => (jsxRuntime.jsxs("button", { className: `${styles$7.viewButton} ${view === type ? styles$7.active : ''}`, onClick: () => setView(type), title: viewConfig[type].label, children: [jsxRuntime.jsx("span", { className: styles$7.viewIcon, children: viewConfig[type].icon }), jsxRuntime.jsx("span", { className: styles$7.viewLabel, children: viewConfig[type].label })] }, type))) }) })), habits.length > 0 && (jsxRuntime.jsx("div", { className: `${styles$7.legend}${compactLegend ? ` ${styles$7.compactLegend}` : ''}`, children: habits.map(habit => (jsxRuntime.jsxs("button", { className: `${styles$7.legendItem} ${!activeHabits.includes(habit) ? styles$7.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsxRuntime.jsx("span", { className: styles$7.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsxRuntime.jsx("span", { className: styles$7.legendColor, style: { backgroundColor: getColor(habit) } }), jsxRuntime.jsx("span", { className: styles$7.legendLabel, children: habit })] }, habit))) })), jsxRuntime.jsx("svg", { ref: svgRef, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", className: styles$7.chart }), tooltipData && (jsxRuntime.jsxs("div", { className: `${styles$7.tooltip} ${styles$7.visible}`, style: { left: `${tooltipData.x}px`, top: `${tooltipData.y - 80}px` }, children: [jsxRuntime.jsx("div", { className: styles$7.tooltipHeader, children: jsxRuntime.jsxs("span", { children: [formatHour(tooltipData.hour), tooltipData.date ? ` · ${formatTooltipDate(tooltipData.date)}` : ''] }) }), jsxRuntime.jsxs("div", { className: styles$7.tooltipInfo, children: [jsxRuntime.jsxs("div", { className: styles$7.tooltipValue, children: [jsxRuntime.jsx("strong", { children: tooltipData.count }), jsxRuntime.jsxs("span", { className: styles$7.tooltipUnits, children: ["event", tooltipData.count === 1 ? '' : 's'] })] }), tooltipData.breakdown.length > 1 && (jsxRuntime.jsx("div", { className: styles$7.tooltipBreakdown, children: tooltipData.breakdown.map(({ habit, count }) => (jsxRuntime.jsxs("div", { className: styles$7.tooltipBreakdownRow, children: [jsxRuntime.jsx("span", { className: styles$7.tooltipDot, style: { backgroundColor: getColor(habit) } }), jsxRuntime.jsxs("span", { children: [customHabitEmojis[habit] || '', " ", habit] }), jsxRuntime.jsx("span", { className: styles$7.tooltipCount, children: count })] }, habit))) }))] })] }))] }));
|
|
4328
4655
|
};
|
|
4329
4656
|
|
|
4330
4657
|
var styles$6 = {"container":"SleepChart-module_container__RjHVU","header":"SleepChart-module_header__bcoWe","title":"SleepChart-module_title__6-QII","legend":"SleepChart-module_legend__VsqQj","legendItem":"SleepChart-module_legendItem__2c1nd","sleepDot":"SleepChart-module_sleepDot__qCY6O","wakeDot":"SleepChart-module_wakeDot__-RcrT","chart":"SleepChart-module_chart__jC1nL","gridLine":"SleepChart-module_gridLine__hi715","sleepBar":"SleepChart-module_sleepBar__Hk76f","xAxis":"SleepChart-module_xAxis__xzXyM","yAxis":"SleepChart-module_yAxis__7N-LA","tooltip":"SleepChart-module_tooltip__jQBv1","visible":"SleepChart-module_visible__wy0ck","tooltipHeader":"SleepChart-module_tooltipHeader__5BdPL","tooltipEmoji":"SleepChart-module_tooltipEmoji__c5vtz","tooltipInfo":"SleepChart-module_tooltipInfo__9Yrno","tooltipRow":"SleepChart-module_tooltipRow__CuDaE","tooltipLabel":"SleepChart-module_tooltipLabel__7SNzQ","tooltipValue":"SleepChart-module_tooltipValue__FoAVy","tooltipDuration":"SleepChart-module_tooltipDuration__d2wBW"};
|
|
@@ -5965,6 +6292,7 @@ exports.DateInput = DateInput;
|
|
|
5965
6292
|
exports.DecryptedText = DecryptedText;
|
|
5966
6293
|
exports.EditFAB = EditFAB;
|
|
5967
6294
|
exports.EmptyState = EmptyState;
|
|
6295
|
+
exports.HabitTimeOfDayChart = HabitTimeOfDayChart;
|
|
5968
6296
|
exports.ImageSlideshow = ImageSlideshow;
|
|
5969
6297
|
exports.LiquidButton = LiquidButton;
|
|
5970
6298
|
exports.LoadingSpinner = LoadingSpinner;
|