erp-pro-ui 0.1.8 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +94 -0
- package/dist/ascii-text.cjs +1 -1
- package/dist/ascii-text.mjs +1 -1
- package/dist/background-gradient-animation.cjs +1 -1
- package/dist/background-gradient-animation.mjs +1 -1
- package/dist/button-hover-border-gradient.cjs +1 -1
- package/dist/button-hover-border-gradient.mjs +1 -1
- package/dist/button.cjs +1 -1
- package/dist/button.mjs +1 -1
- package/dist/calendar.cjs +1 -1
- package/dist/calendar.mjs +1 -1
- package/dist/carousel.cjs +1 -1
- package/dist/carousel.mjs +1 -1
- package/dist/charts.cjs +1 -1
- package/dist/charts.mjs +1 -1
- package/dist/chip.cjs +1 -1
- package/dist/chip.mjs +1 -1
- package/dist/chroma-grid.cjs +1 -1
- package/dist/chroma-grid.mjs +1 -1
- package/dist/chunks/{DropdownMenu-DOvo5pV_.cjs → DropdownMenu-BDrNYO-D.cjs} +6 -5
- package/dist/chunks/DropdownMenu-BDrNYO-D.cjs.map +1 -0
- package/dist/chunks/{DropdownMenu-C17Zqu_E.mjs → DropdownMenu-BtTOri-A.mjs} +6 -5
- package/dist/chunks/DropdownMenu-BtTOri-A.mjs.map +1 -0
- package/dist/chunks/{HoverBorderGradient-C5D6lGg0.cjs → HoverBorderGradient-9pfvBoHR.cjs} +2 -2
- package/dist/chunks/{HoverBorderGradient-C5D6lGg0.cjs.map → HoverBorderGradient-9pfvBoHR.cjs.map} +1 -1
- package/dist/chunks/{HoverBorderGradient-CduqqQgX.mjs → HoverBorderGradient-NbdXeLgC.mjs} +2 -2
- package/dist/chunks/{HoverBorderGradient-CduqqQgX.mjs.map → HoverBorderGradient-NbdXeLgC.mjs.map} +1 -1
- package/dist/chunks/SunToMoonButton-BkEfkElJ.mjs.map +1 -1
- package/dist/chunks/SunToMoonButton-jS4BJD9q.cjs.map +1 -1
- package/dist/chunks/{tooltip-PJaQa8_l.cjs → Tooltip-DD30yj3A.cjs} +1 -1
- package/dist/chunks/{tooltip-PJaQa8_l.cjs.map → Tooltip-DD30yj3A.cjs.map} +1 -1
- package/dist/chunks/{tooltip-CmB8xKOF.mjs → Tooltip-DK3B879v.mjs} +1 -1
- package/dist/chunks/{tooltip-CmB8xKOF.mjs.map → Tooltip-DK3B879v.mjs.map} +1 -1
- package/dist/chunks/animated-content-CLsFnjgr.cjs.map +1 -1
- package/dist/chunks/animated-content-bK6xp-vc.mjs.map +1 -1
- package/dist/chunks/{ascii-text-OnPOTd2I.cjs → ascii-text-BFnpVur6.cjs} +5 -3
- package/dist/chunks/{ascii-text-OnPOTd2I.cjs.map → ascii-text-BFnpVur6.cjs.map} +1 -1
- package/dist/chunks/{ascii-text-OBwVLFDC.mjs → ascii-text-Bdy4C5rU.mjs} +5 -3
- package/dist/chunks/{ascii-text-OBwVLFDC.mjs.map → ascii-text-Bdy4C5rU.mjs.map} +1 -1
- package/dist/chunks/{background-gradient-animation-DpKJ3ecq.mjs → background-gradient-animation-BR9wx6Z8.mjs} +2 -2
- package/dist/chunks/{background-gradient-animation-DpKJ3ecq.mjs.map → background-gradient-animation-BR9wx6Z8.mjs.map} +1 -1
- package/dist/chunks/{background-gradient-animation-II9hdrgB.cjs → background-gradient-animation-CiNdmA61.cjs} +2 -2
- package/dist/chunks/{background-gradient-animation-II9hdrgB.cjs.map → background-gradient-animation-CiNdmA61.cjs.map} +1 -1
- package/dist/chunks/{button-DddUhuR-.mjs → button-A6UTvrOu.mjs} +2 -2
- package/dist/chunks/{button-DddUhuR-.mjs.map → button-A6UTvrOu.mjs.map} +1 -1
- package/dist/chunks/{button-xqernofO.cjs → button-C4MXPxsC.cjs} +2 -2
- package/dist/chunks/{button-xqernofO.cjs.map → button-C4MXPxsC.cjs.map} +1 -1
- package/dist/chunks/{button-hover-border-gradient-DFppVRI4.mjs → button-hover-border-gradient-DnFvjNNw.mjs} +2 -2
- package/dist/chunks/{button-hover-border-gradient-DFppVRI4.mjs.map → button-hover-border-gradient-DnFvjNNw.mjs.map} +1 -1
- package/dist/chunks/{button-hover-border-gradient-DX2lBG5C.cjs → button-hover-border-gradient-ssmwU5-U.cjs} +2 -2
- package/dist/chunks/{button-hover-border-gradient-DX2lBG5C.cjs.map → button-hover-border-gradient-ssmwU5-U.cjs.map} +1 -1
- package/dist/chunks/{calendar-BOBm3dFA.mjs → calendar-5XzPqKbE.mjs} +4 -4
- package/dist/chunks/calendar-5XzPqKbE.mjs.map +1 -0
- package/dist/chunks/{calendar-DJkfDhQA.cjs → calendar-CQJgQ5H_.cjs} +4 -4
- package/dist/chunks/calendar-CQJgQ5H_.cjs.map +1 -0
- package/dist/chunks/{carousel-F4drTOr6.cjs → carousel-Cv0m1Pp5.cjs} +2 -2
- package/dist/chunks/{carousel-DUqOaYvs.mjs.map → carousel-Cv0m1Pp5.cjs.map} +1 -1
- package/dist/chunks/{carousel-DUqOaYvs.mjs → carousel-Dd4rp-jr.mjs} +2 -2
- package/dist/chunks/{carousel-F4drTOr6.cjs.map → carousel-Dd4rp-jr.mjs.map} +1 -1
- package/dist/chunks/{charts-CZEYcr6X.cjs → charts-BmIV-mJy.cjs} +41 -10
- package/dist/chunks/charts-BmIV-mJy.cjs.map +1 -0
- package/dist/chunks/{charts-C-Qee_JY.mjs → charts-DkVu0rFc.mjs} +41 -10
- package/dist/chunks/charts-DkVu0rFc.mjs.map +1 -0
- package/dist/chunks/{chip-CMs73sc5.cjs → chip-B0YzBwkz.cjs} +10 -7
- package/dist/chunks/chip-B0YzBwkz.cjs.map +1 -0
- package/dist/chunks/{chip-BFg3DJx6.mjs → chip-CqcdcSs2.mjs} +10 -7
- package/dist/chunks/chip-CqcdcSs2.mjs.map +1 -0
- package/dist/chunks/{chroma-grid-tJX7CzCS.cjs → chroma-grid-DcZ9f4Ui.cjs} +2 -2
- package/dist/chunks/{chroma-grid-tJX7CzCS.cjs.map → chroma-grid-DcZ9f4Ui.cjs.map} +1 -1
- package/dist/chunks/{chroma-grid-DlY9hIRI.mjs → chroma-grid-opB2DBtS.mjs} +2 -2
- package/dist/chunks/{chroma-grid-DlY9hIRI.mjs.map → chroma-grid-opB2DBtS.mjs.map} +1 -1
- package/dist/chunks/color-palette-C3lesasJ.mjs +329 -0
- package/dist/chunks/color-palette-C3lesasJ.mjs.map +1 -0
- package/dist/chunks/color-palette-pLh6En3n.cjs +384 -0
- package/dist/chunks/color-palette-pLh6En3n.cjs.map +1 -0
- package/dist/chunks/{combobox-Bcwi33Qx.mjs → combobox-B6yk5U82.mjs} +6 -6
- package/dist/chunks/combobox-B6yk5U82.mjs.map +1 -0
- package/dist/chunks/{combobox-DRiHHhXL.cjs → combobox-CtNrGmuR.cjs} +6 -6
- package/dist/chunks/combobox-CtNrGmuR.cjs.map +1 -0
- package/dist/chunks/{data-table-Biom5rvs.mjs → data-table-Dtf6lKpp.mjs} +19 -19
- package/dist/chunks/data-table-Dtf6lKpp.mjs.map +1 -0
- package/dist/chunks/{data-table-D0BD2sFz.cjs → data-table-fAEuevPn.cjs} +20 -20
- package/dist/chunks/data-table-fAEuevPn.cjs.map +1 -0
- package/dist/chunks/{date-picker-CXGwnrLr.mjs → date-picker-BmQ0rgwH.mjs} +2 -2
- package/dist/chunks/{date-picker-CXGwnrLr.mjs.map → date-picker-BmQ0rgwH.mjs.map} +1 -1
- package/dist/chunks/{date-picker-Cw_tZGuk.cjs → date-picker-qpUZMtZC.cjs} +2 -2
- package/dist/chunks/{date-picker-Cw_tZGuk.cjs.map → date-picker-qpUZMtZC.cjs.map} +1 -1
- package/dist/chunks/dialog-CanVyiAD.mjs.map +1 -1
- package/dist/chunks/dialog-fffx1-4D.cjs.map +1 -1
- package/dist/chunks/{drawer-DTRnKChF.cjs → drawer-D07dGN6R.cjs} +6 -6
- package/dist/chunks/drawer-D07dGN6R.cjs.map +1 -0
- package/dist/chunks/{drawer-BJsBK6cP.mjs → drawer-DaoAXL-w.mjs} +6 -6
- package/dist/chunks/drawer-DaoAXL-w.mjs.map +1 -0
- package/dist/chunks/{form-CvNNjA1i.mjs → form-CtZ6U-_B.mjs} +2 -2
- package/dist/chunks/{form-CvNNjA1i.mjs.map → form-CtZ6U-_B.mjs.map} +1 -1
- package/dist/chunks/{form-C_JxqsSZ.cjs → form-X6Vyaavl.cjs} +2 -2
- package/dist/chunks/{form-C_JxqsSZ.cjs.map → form-X6Vyaavl.cjs.map} +1 -1
- package/dist/chunks/{gradual-blur-BB-8oKX6.cjs → gradual-blur-C6NOnjTw.cjs} +2 -2
- package/dist/chunks/{gradual-blur-BB-8oKX6.cjs.map → gradual-blur-C6NOnjTw.cjs.map} +1 -1
- package/dist/chunks/{gradual-blur-BR06yO3Y.mjs → gradual-blur-DXfxpCdB.mjs} +2 -2
- package/dist/chunks/{gradual-blur-BR06yO3Y.mjs.map → gradual-blur-DXfxpCdB.mjs.map} +1 -1
- package/dist/chunks/{input-Dox16Ozo.mjs → input-Bqo9Q5zF.mjs} +34 -13
- package/dist/chunks/input-Bqo9Q5zF.mjs.map +1 -0
- package/dist/chunks/{input-T4OlFhBc.cjs → input-DkCPyWXi.cjs} +34 -13
- package/dist/chunks/input-DkCPyWXi.cjs.map +1 -0
- package/dist/chunks/{label-CxmbGh0l.cjs → label-BKzqfAAq.cjs} +2 -2
- package/dist/chunks/{label-CxmbGh0l.cjs.map → label-BKzqfAAq.cjs.map} +1 -1
- package/dist/chunks/{label-C1Ekt3j2.mjs → label-Drxg0cG2.mjs} +2 -2
- package/dist/chunks/{label-C1Ekt3j2.mjs.map → label-Drxg0cG2.mjs.map} +1 -1
- package/dist/chunks/loading-BiM4mKh6.cjs.map +1 -1
- package/dist/chunks/loading-Dtosnb4A.mjs.map +1 -1
- package/dist/chunks/{multi-select-combobox-BzqYLVpV.cjs → multi-select-combobox-C0DoDzxQ.cjs} +6 -6
- package/dist/chunks/multi-select-combobox-C0DoDzxQ.cjs.map +1 -0
- package/dist/chunks/{multi-select-combobox-BrFtvCrS.mjs → multi-select-combobox-Do23ZfOQ.mjs} +6 -6
- package/dist/chunks/multi-select-combobox-Do23ZfOQ.mjs.map +1 -0
- package/dist/chunks/otp-input-CkhV-sGl.cjs.map +1 -1
- package/dist/chunks/otp-input-JOysxKfD.mjs.map +1 -1
- package/dist/chunks/{password-strength-meter-BEx94cfy.mjs → password-strength-meter-BsvqQBAg.mjs} +3 -3
- package/dist/chunks/{password-strength-meter-BEx94cfy.mjs.map → password-strength-meter-BsvqQBAg.mjs.map} +1 -1
- package/dist/chunks/{password-strength-meter-BNnmSgLh.cjs → password-strength-meter-DCi_BP7e.cjs} +3 -3
- package/dist/chunks/{password-strength-meter-BNnmSgLh.cjs.map → password-strength-meter-DCi_BP7e.cjs.map} +1 -1
- package/dist/chunks/{progress-bar-DS8KZ7eO.cjs → progress-bar-CYaBO_lS.cjs} +2 -2
- package/dist/chunks/{progress-bar-DS8KZ7eO.cjs.map → progress-bar-CYaBO_lS.cjs.map} +1 -1
- package/dist/chunks/{progress-bar-C9O0tuZf.mjs → progress-bar-DQ5ZKk2Y.mjs} +2 -2
- package/dist/chunks/{progress-bar-C9O0tuZf.mjs.map → progress-bar-DQ5ZKk2Y.mjs.map} +1 -1
- package/dist/chunks/radio-CuiM_gDv.mjs +50 -0
- package/dist/chunks/radio-CuiM_gDv.mjs.map +1 -0
- package/dist/chunks/radio-zx9xEW_C.cjs +56 -0
- package/dist/chunks/radio-zx9xEW_C.cjs.map +1 -0
- package/dist/chunks/{select-D0GOBB-b.mjs → select-CUaSNR09.mjs} +6 -6
- package/dist/chunks/select-CUaSNR09.mjs.map +1 -0
- package/dist/chunks/{select-CORFYTvs.cjs → select-bZ9WqLOc.cjs} +6 -6
- package/dist/chunks/select-bZ9WqLOc.cjs.map +1 -0
- package/dist/chunks/{sidebar-BrOLz89T.mjs → sidebar-DYEDFV2u.mjs} +242 -231
- package/dist/chunks/sidebar-DYEDFV2u.mjs.map +1 -0
- package/dist/chunks/{sidebar-D9D651F6.cjs → sidebar-Kkr45nuN.cjs} +241 -230
- package/dist/chunks/sidebar-Kkr45nuN.cjs.map +1 -0
- package/dist/chunks/{skeleton-wQOE-pRg.cjs → skeleton-DCBGLNAZ.cjs} +2 -2
- package/dist/chunks/{skeleton-wQOE-pRg.cjs.map → skeleton-DCBGLNAZ.cjs.map} +1 -1
- package/dist/chunks/{skeleton-BdijDxP6.mjs → skeleton-nH1eAN96.mjs} +2 -2
- package/dist/chunks/{skeleton-BdijDxP6.mjs.map → skeleton-nH1eAN96.mjs.map} +1 -1
- package/dist/chunks/{splash-cursor-CCi5n3O-.cjs → splash-cursor-BqG7ClsJ.cjs} +2 -2
- package/dist/chunks/{splash-cursor-CCi5n3O-.cjs.map → splash-cursor-BqG7ClsJ.cjs.map} +1 -1
- package/dist/chunks/{splash-cursor-CDHTm5vA.mjs → splash-cursor-N4FdnkOa.mjs} +2 -2
- package/dist/chunks/{splash-cursor-CDHTm5vA.mjs.map → splash-cursor-N4FdnkOa.mjs.map} +1 -1
- package/dist/chunks/{spotlight-card-Bh7KG0vZ.cjs → spotlight-card-BmsqC7wm.cjs} +2 -2
- package/dist/chunks/{spotlight-card-Bh7KG0vZ.cjs.map → spotlight-card-BmsqC7wm.cjs.map} +1 -1
- package/dist/chunks/{spotlight-card-D0uTxfPZ.mjs → spotlight-card-D9Z3nTmb.mjs} +2 -2
- package/dist/chunks/{spotlight-card-D0uTxfPZ.mjs.map → spotlight-card-D9Z3nTmb.mjs.map} +1 -1
- package/dist/chunks/{stepper-Z_7ugZJN.cjs → stepper-DepvEGfr.cjs} +4 -4
- package/dist/chunks/{stepper-Z_7ugZJN.cjs.map → stepper-DepvEGfr.cjs.map} +1 -1
- package/dist/chunks/{stepper-BMKxjCdm.mjs → stepper-Jv5OS1nY.mjs} +4 -4
- package/dist/chunks/{stepper-BMKxjCdm.mjs.map → stepper-Jv5OS1nY.mjs.map} +1 -1
- package/dist/chunks/{sun-to-moon-button-DcRX0obV.mjs → sun-to-moon-button-BJtBEaa3.mjs} +70 -51
- package/dist/chunks/sun-to-moon-button-BJtBEaa3.mjs.map +1 -0
- package/dist/chunks/{sun-to-moon-button-De0_Sf01.cjs → sun-to-moon-button-PwgTPsTW.cjs} +70 -51
- package/dist/chunks/sun-to-moon-button-PwgTPsTW.cjs.map +1 -0
- package/dist/chunks/{switch-DPyzVrNh.cjs → switch-X3l8xnle.cjs} +10 -29
- package/dist/chunks/switch-X3l8xnle.cjs.map +1 -0
- package/dist/chunks/{switch-C1gKE0m0.mjs → switch-iPsN1NS2.mjs} +10 -29
- package/dist/chunks/switch-iPsN1NS2.mjs.map +1 -0
- package/dist/chunks/{textarea-BY5-J9No.mjs → textarea-Bdo-Trvi.mjs} +2 -2
- package/dist/chunks/{textarea-BY5-J9No.mjs.map → textarea-Bdo-Trvi.mjs.map} +1 -1
- package/dist/chunks/{textarea-D-oBQ3IZ.cjs → textarea-CGRl2hrM.cjs} +2 -2
- package/dist/chunks/{textarea-D-oBQ3IZ.cjs.map → textarea-CGRl2hrM.cjs.map} +1 -1
- package/dist/chunks/toast-BcBidy5n.mjs.map +1 -1
- package/dist/chunks/toast-DiFgv3IL.cjs.map +1 -1
- package/dist/chunks/{truncated-text-istgJRUq.cjs → truncated-text-BIXqNfOL.cjs} +2 -2
- package/dist/chunks/{truncated-text-istgJRUq.cjs.map → truncated-text-BIXqNfOL.cjs.map} +1 -1
- package/dist/chunks/{truncated-text-DTgks5yS.mjs → truncated-text-C9t9o9IA.mjs} +2 -2
- package/dist/chunks/{truncated-text-DTgks5yS.mjs.map → truncated-text-C9t9o9IA.mjs.map} +1 -1
- package/dist/chunks/{typography-C_IanU4b.mjs → typography-Ct-jDJP3.mjs} +2 -2
- package/dist/chunks/{typography-C_IanU4b.mjs.map → typography-Ct-jDJP3.mjs.map} +1 -1
- package/dist/chunks/{typography-DUD6Dzd5.cjs → typography-LwwY_MOy.cjs} +2 -2
- package/dist/chunks/{typography-DUD6Dzd5.cjs.map → typography-LwwY_MOy.cjs.map} +1 -1
- package/dist/chunks/{utils-ati1KkDb.mjs → utils-7S0u48mU.mjs} +1339 -1
- package/dist/chunks/{utils-B4SmmY4J.cjs.map → utils-7S0u48mU.mjs.map} +1 -1
- package/dist/chunks/{utils-B4SmmY4J.cjs → utils-LRbEQHYs.cjs} +1339 -1
- package/dist/chunks/{utils-ati1KkDb.mjs.map → utils-LRbEQHYs.cjs.map} +1 -1
- package/dist/color-palette.cjs +9 -1
- package/dist/color-palette.mjs +2 -2
- package/dist/combobox.cjs +1 -1
- package/dist/combobox.mjs +1 -1
- package/dist/components/data-display/charts/BarChart.d.ts +5 -0
- package/dist/components/data-display/charts/BarChart.d.ts.map +1 -1
- package/dist/components/data-display/chip/Chip.d.ts +1 -1
- package/dist/components/data-display/chip/Chip.d.ts.map +1 -1
- package/dist/components/data-display/color-palette/ColorPalette.d.ts +24 -16
- package/dist/components/data-display/color-palette/ColorPalette.d.ts.map +1 -1
- package/dist/components/data-display/color-palette/index.d.ts +2 -1
- package/dist/components/data-display/color-palette/index.d.ts.map +1 -1
- package/dist/components/data-display/dashboard-cards/ChartCard.d.ts +15 -0
- package/dist/components/data-display/dashboard-cards/ChartCard.d.ts.map +1 -0
- package/dist/components/data-display/dashboard-cards/StatCard.d.ts +42 -0
- package/dist/components/data-display/dashboard-cards/StatCard.d.ts.map +1 -0
- package/dist/components/data-display/dashboard-cards/TopProductsCard.d.ts +17 -0
- package/dist/components/data-display/dashboard-cards/TopProductsCard.d.ts.map +1 -0
- package/dist/components/data-display/dashboard-cards/index.d.ts +7 -0
- package/dist/components/data-display/dashboard-cards/index.d.ts.map +1 -0
- package/dist/components/effects/sun-to-moon-button/ThemeSwitcherButtons.d.ts +16 -1
- package/dist/components/effects/sun-to-moon-button/ThemeSwitcherButtons.d.ts.map +1 -1
- package/dist/components/effects/sun-to-moon-button/index.d.ts +1 -1
- package/dist/components/effects/sun-to-moon-button/index.d.ts.map +1 -1
- package/dist/components/forms/input/Input.d.ts.map +1 -1
- package/dist/components/forms/input/types.d.ts +2 -0
- package/dist/components/forms/input/types.d.ts.map +1 -1
- package/dist/components/forms/radio/Radio.d.ts.map +1 -1
- package/dist/components/forms/switch/Switch.d.ts.map +1 -1
- package/dist/components/navigation/sidebar/DashboardSidebarShell.d.ts +26 -6
- package/dist/components/navigation/sidebar/DashboardSidebarShell.d.ts.map +1 -1
- package/dist/components/navigation/sidebar/index.d.ts +1 -0
- package/dist/components/navigation/sidebar/index.d.ts.map +1 -1
- package/dist/components/overlays/dropdown-menu/DropdownMenu.d.ts +1 -1
- package/dist/components/overlays/dropdown-menu/DropdownMenu.d.ts.map +1 -1
- package/dist/components/overlays/dropdown-menu/types.d.ts +1 -0
- package/dist/components/overlays/dropdown-menu/types.d.ts.map +1 -1
- package/dist/data-table.cjs +1 -1
- package/dist/data-table.mjs +1 -1
- package/dist/date-picker.cjs +1 -1
- package/dist/date-picker.mjs +1 -1
- package/dist/docs.cjs.map +1 -1
- package/dist/docs.mjs.map +1 -1
- package/dist/drawer.cjs +1 -1
- package/dist/drawer.mjs +1 -1
- package/dist/form.cjs +1 -1
- package/dist/form.mjs +1 -1
- package/dist/gradual-blur.cjs +1 -1
- package/dist/gradual-blur.mjs +1 -1
- package/dist/hover-border-gradient.cjs +1 -1
- package/dist/hover-border-gradient.mjs +1 -1
- package/dist/index.cjs +325 -38
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +5 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +315 -39
- package/dist/index.mjs.map +1 -1
- package/dist/input.cjs +1 -1
- package/dist/input.mjs +1 -1
- package/dist/label.cjs +1 -1
- package/dist/label.mjs +1 -1
- package/dist/multi-select-combobox.cjs +1 -1
- package/dist/multi-select-combobox.mjs +1 -1
- package/dist/password-strength-meter.cjs +1 -1
- package/dist/password-strength-meter.mjs +1 -1
- package/dist/progress-bar.cjs +1 -1
- package/dist/progress-bar.mjs +1 -1
- package/dist/radio.cjs +1 -1
- package/dist/radio.mjs +1 -1
- package/dist/select.cjs +1 -1
- package/dist/select.mjs +1 -1
- package/dist/sidebar.cjs +1 -1
- package/dist/sidebar.mjs +1 -1
- package/dist/skeleton.cjs +1 -1
- package/dist/skeleton.mjs +1 -1
- package/dist/splash-cursor.cjs +1 -1
- package/dist/splash-cursor.mjs +1 -1
- package/dist/spotlight-card.cjs +1 -1
- package/dist/spotlight-card.mjs +1 -1
- package/dist/stepper.cjs +1 -1
- package/dist/stepper.mjs +1 -1
- package/dist/sun-to-moon-button.cjs +1 -1
- package/dist/sun-to-moon-button.mjs +1 -1
- package/dist/switch.cjs +1 -1
- package/dist/switch.mjs +1 -1
- package/dist/textarea.cjs +1 -1
- package/dist/textarea.mjs +1 -1
- package/dist/tooltip.cjs +2 -2
- package/dist/tooltip.mjs +1 -1
- package/dist/truncated-text.cjs +1 -1
- package/dist/truncated-text.mjs +1 -1
- package/dist/typography.cjs +1 -1
- package/dist/typography.mjs +1 -1
- package/dist/utils.cjs +1 -1
- package/dist/utils.mjs +1 -1
- package/package.json +8 -8
- package/dist/chunks/DropdownMenu-C17Zqu_E.mjs.map +0 -1
- package/dist/chunks/DropdownMenu-DOvo5pV_.cjs.map +0 -1
- package/dist/chunks/calendar-BOBm3dFA.mjs.map +0 -1
- package/dist/chunks/calendar-DJkfDhQA.cjs.map +0 -1
- package/dist/chunks/charts-C-Qee_JY.mjs.map +0 -1
- package/dist/chunks/charts-CZEYcr6X.cjs.map +0 -1
- package/dist/chunks/chip-BFg3DJx6.mjs.map +0 -1
- package/dist/chunks/chip-CMs73sc5.cjs.map +0 -1
- package/dist/chunks/color-palette-BmQC14gE.cjs +0 -789
- package/dist/chunks/color-palette-BmQC14gE.cjs.map +0 -1
- package/dist/chunks/color-palette-DnX1sODj.mjs +0 -782
- package/dist/chunks/color-palette-DnX1sODj.mjs.map +0 -1
- package/dist/chunks/combobox-Bcwi33Qx.mjs.map +0 -1
- package/dist/chunks/combobox-DRiHHhXL.cjs.map +0 -1
- package/dist/chunks/data-table-Biom5rvs.mjs.map +0 -1
- package/dist/chunks/data-table-D0BD2sFz.cjs.map +0 -1
- package/dist/chunks/drawer-BJsBK6cP.mjs.map +0 -1
- package/dist/chunks/drawer-DTRnKChF.cjs.map +0 -1
- package/dist/chunks/input-Dox16Ozo.mjs.map +0 -1
- package/dist/chunks/input-T4OlFhBc.cjs.map +0 -1
- package/dist/chunks/multi-select-combobox-BrFtvCrS.mjs.map +0 -1
- package/dist/chunks/multi-select-combobox-BzqYLVpV.cjs.map +0 -1
- package/dist/chunks/radio-BiD1ofmq.cjs +0 -50
- package/dist/chunks/radio-BiD1ofmq.cjs.map +0 -1
- package/dist/chunks/radio-C7Eg3FEp.mjs +0 -44
- package/dist/chunks/radio-C7Eg3FEp.mjs.map +0 -1
- package/dist/chunks/select-CORFYTvs.cjs.map +0 -1
- package/dist/chunks/select-D0GOBB-b.mjs.map +0 -1
- package/dist/chunks/sidebar-BrOLz89T.mjs.map +0 -1
- package/dist/chunks/sidebar-D9D651F6.cjs.map +0 -1
- package/dist/chunks/sun-to-moon-button-DcRX0obV.mjs.map +0 -1
- package/dist/chunks/sun-to-moon-button-De0_Sf01.cjs.map +0 -1
- package/dist/chunks/switch-C1gKE0m0.mjs.map +0 -1
- package/dist/chunks/switch-DPyzVrNh.cjs.map +0 -1
|
@@ -1,38 +1,15 @@
|
|
|
1
1
|
require("./chunk-B_GkZjkl.cjs");
|
|
2
2
|
const require_theme = require("./theme-D6B-FaoE.cjs");
|
|
3
|
-
const require_utils = require("./utils-
|
|
4
|
-
const require_button = require("./button-
|
|
3
|
+
const require_utils = require("./utils-LRbEQHYs.cjs");
|
|
4
|
+
const require_button = require("./button-C4MXPxsC.cjs");
|
|
5
5
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
6
6
|
//#region src/components/effects/sun-to-moon-button/ThemeSwitcherButtons.tsx
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
{
|
|
14
|
-
value: "teal",
|
|
15
|
-
label: "Teal",
|
|
16
|
-
swatch: "var(--ds-brand-teal)"
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
value: "yellow",
|
|
20
|
-
label: "Yellow",
|
|
21
|
-
swatch: "var(--ds-brand-yellow)"
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
value: "green",
|
|
25
|
-
label: "Green",
|
|
26
|
-
swatch: "var(--ds-brand-green)"
|
|
27
|
-
}
|
|
28
|
-
];
|
|
29
|
-
var VARIANT_OPTIONS = [{
|
|
30
|
-
value: "default",
|
|
31
|
-
label: "Default"
|
|
32
|
-
}, {
|
|
33
|
-
value: "alt",
|
|
34
|
-
label: "Alt"
|
|
35
|
-
}];
|
|
7
|
+
var BRAND_SWATCHES = {
|
|
8
|
+
purple: "var(--ds-brand-purple)",
|
|
9
|
+
teal: "var(--ds-brand-teal)",
|
|
10
|
+
yellow: "var(--ds-brand-yellow)",
|
|
11
|
+
green: "var(--ds-brand-green)"
|
|
12
|
+
};
|
|
36
13
|
function ToggleButton({ label, active, onClick, swatch, showBrandState = false, mode }) {
|
|
37
14
|
const isLightMode = mode === "light";
|
|
38
15
|
const toneStyle = (() => {
|
|
@@ -52,7 +29,7 @@ function ToggleButton({ label, active, onClick, swatch, showBrandState = false,
|
|
|
52
29
|
variant: "secondary",
|
|
53
30
|
size: "small",
|
|
54
31
|
onClick,
|
|
55
|
-
className: require_utils.mergeClassNames("group rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-200", active ? "border-ds-border-
|
|
32
|
+
className: require_utils.mergeClassNames("group rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-200", active ? "border-ds-border-accent bg-ds-surface-2 text-ds-1 shadow-sm ring-1 ring-ds-border-accent/40" : "border-ds-border-2 bg-ds-surface-1 text-ds-2 hover:border-ds-border-accent/50 hover:bg-ds-surface-2 hover:text-ds-1", showBrandState && isLightMode ? "bg-ds-surface-1! hover:bg-ds-surface-1!" : null, showBrandState && active ? "text-ds-1" : null),
|
|
56
33
|
style: toneStyle,
|
|
57
34
|
"aria-pressed": active,
|
|
58
35
|
children: [swatch ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
@@ -62,52 +39,94 @@ function ToggleButton({ label, active, onClick, swatch, showBrandState = false,
|
|
|
62
39
|
}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })]
|
|
63
40
|
});
|
|
64
41
|
}
|
|
65
|
-
function ThemeSwitcherButtons({ className }) {
|
|
42
|
+
function ThemeSwitcherButtons({ className, labels = {} }) {
|
|
66
43
|
const { mode, theme, variant, setMode, setTheme, setVariant } = require_theme.useThemeContext();
|
|
44
|
+
const l = {
|
|
45
|
+
mode: labels.mode ?? "Mode",
|
|
46
|
+
light: labels.light ?? "Light",
|
|
47
|
+
dark: labels.dark ?? "Dark",
|
|
48
|
+
brand: labels.brand ?? "Brand",
|
|
49
|
+
variant: labels.variant ?? "Variant",
|
|
50
|
+
variantDefault: labels.variantDefault ?? "Default",
|
|
51
|
+
variantAlt: labels.variantAlt ?? "Alt",
|
|
52
|
+
purple: labels.purple ?? "Purple",
|
|
53
|
+
teal: labels.teal ?? "Teal",
|
|
54
|
+
yellow: labels.yellow ?? "Yellow",
|
|
55
|
+
green: labels.green ?? "Green"
|
|
56
|
+
};
|
|
57
|
+
const brandOptions = [
|
|
58
|
+
{
|
|
59
|
+
value: "purple",
|
|
60
|
+
label: l.purple,
|
|
61
|
+
swatch: BRAND_SWATCHES.purple
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
value: "teal",
|
|
65
|
+
label: l.teal,
|
|
66
|
+
swatch: BRAND_SWATCHES.teal
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
value: "yellow",
|
|
70
|
+
label: l.yellow,
|
|
71
|
+
swatch: BRAND_SWATCHES.yellow
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
value: "green",
|
|
75
|
+
label: l.green,
|
|
76
|
+
swatch: BRAND_SWATCHES.green
|
|
77
|
+
}
|
|
78
|
+
];
|
|
79
|
+
const variantOptions = [{
|
|
80
|
+
value: "default",
|
|
81
|
+
label: l.variantDefault
|
|
82
|
+
}, {
|
|
83
|
+
value: "alt",
|
|
84
|
+
label: l.variantAlt
|
|
85
|
+
}];
|
|
67
86
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
68
|
-
className: require_utils.mergeClassNames("w-full rounded-2xl border border-ds-border-2 bg-ds-
|
|
87
|
+
className: require_utils.mergeClassNames("w-full rounded-2xl border border-ds-border-2 bg-ds-canvas p-4 shadow-sm", className),
|
|
69
88
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
70
89
|
className: "space-y-3",
|
|
71
90
|
children: [
|
|
72
91
|
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
73
92
|
className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3",
|
|
74
|
-
children:
|
|
93
|
+
children: l.mode
|
|
75
94
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
76
95
|
className: "flex flex-wrap gap-2",
|
|
77
96
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleButton, {
|
|
78
|
-
label:
|
|
97
|
+
label: l.light,
|
|
79
98
|
active: mode === "light",
|
|
80
99
|
onClick: () => setMode("light")
|
|
81
100
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleButton, {
|
|
82
|
-
label:
|
|
101
|
+
label: l.dark,
|
|
83
102
|
active: mode === "dark",
|
|
84
103
|
onClick: () => setMode("dark")
|
|
85
104
|
})]
|
|
86
105
|
})] }),
|
|
87
106
|
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
88
107
|
className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3",
|
|
89
|
-
children:
|
|
108
|
+
children: l.brand
|
|
90
109
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
91
110
|
className: "flex flex-wrap gap-2",
|
|
92
|
-
children:
|
|
93
|
-
label:
|
|
94
|
-
active: theme ===
|
|
95
|
-
onClick: () => setTheme(
|
|
96
|
-
swatch:
|
|
111
|
+
children: brandOptions.map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleButton, {
|
|
112
|
+
label: opt.label,
|
|
113
|
+
active: theme === opt.value,
|
|
114
|
+
onClick: () => setTheme(opt.value),
|
|
115
|
+
swatch: opt.swatch,
|
|
97
116
|
showBrandState: true,
|
|
98
117
|
mode
|
|
99
|
-
},
|
|
118
|
+
}, opt.value))
|
|
100
119
|
})] }),
|
|
101
120
|
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
102
121
|
className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3",
|
|
103
|
-
children:
|
|
122
|
+
children: l.variant
|
|
104
123
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
105
124
|
className: "flex flex-wrap gap-2",
|
|
106
|
-
children:
|
|
107
|
-
label:
|
|
108
|
-
active: variant ===
|
|
109
|
-
onClick: () => setVariant(
|
|
110
|
-
},
|
|
125
|
+
children: variantOptions.map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleButton, {
|
|
126
|
+
label: opt.label,
|
|
127
|
+
active: variant === opt.value,
|
|
128
|
+
onClick: () => setVariant(opt.value)
|
|
129
|
+
}, opt.value))
|
|
111
130
|
})] })
|
|
112
131
|
]
|
|
113
132
|
})
|
|
@@ -121,4 +140,4 @@ Object.defineProperty(exports, "ThemeSwitcherButtons", {
|
|
|
121
140
|
}
|
|
122
141
|
});
|
|
123
142
|
|
|
124
|
-
//# sourceMappingURL=sun-to-moon-button-
|
|
143
|
+
//# sourceMappingURL=sun-to-moon-button-PwgTPsTW.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sun-to-moon-button-PwgTPsTW.cjs","names":[],"sources":["../../src/components/effects/sun-to-moon-button/ThemeSwitcherButtons.tsx"],"sourcesContent":["import type {\n ThemeColorType,\n ThemeModeType,\n ThemeVariantType,\n} from \"../../../foundations/theme\";\nimport { useThemeContext } from \"../../../foundations/theme\";\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { CSSProperties } from \"react\";\n\nexport interface ThemeSwitcherLabels {\n mode?: string;\n light?: string;\n dark?: string;\n brand?: string;\n variant?: string;\n variantDefault?: string;\n variantAlt?: string;\n purple?: string;\n teal?: string;\n yellow?: string;\n green?: string;\n}\n\nexport interface ThemeSwitcherButtonsProps {\n className?: string;\n /** Override any label for localisation / translation. */\n labels?: ThemeSwitcherLabels;\n}\n\nconst BRAND_SWATCHES: Record<ThemeColorType, string> = {\n purple: \"var(--ds-brand-purple)\",\n teal: \"var(--ds-brand-teal)\",\n yellow: \"var(--ds-brand-yellow)\",\n green: \"var(--ds-brand-green)\",\n};\n\nfunction ToggleButton({\n label,\n active,\n onClick,\n swatch,\n showBrandState = false,\n mode,\n}: {\n label: string;\n active: boolean;\n onClick: () => void;\n swatch?: string;\n showBrandState?: boolean;\n mode?: ThemeModeType;\n}) {\n const isLightMode = mode === \"light\";\n const toneStyle: CSSProperties | undefined = (() => {\n if (!showBrandState || !swatch) {\n return undefined;\n }\n\n if (isLightMode) {\n return {\n borderColor: active ? swatch : \"var(--ds-border-2)\",\n backgroundColor: active\n ? `color-mix(in srgb, ${swatch} 12%, #ffffff)`\n : \"#ffffff\",\n color: active\n ? `color-mix(in srgb, ${swatch} 76%, var(--ds-text-1))`\n : \"var(--ds-text-2)\",\n boxShadow: active\n ? `0 0 0 1px color-mix(in srgb, ${swatch} 24%, transparent)`\n : \"none\",\n };\n }\n\n return {\n borderColor: active\n ? swatch\n : `color-mix(in srgb, ${swatch} 42%, var(--ds-border-3))`,\n backgroundColor: active\n ? `color-mix(in srgb, ${swatch} 16%, var(--ds-surface-1))`\n : `color-mix(in srgb, ${swatch} 6%, var(--ds-surface-1))`,\n };\n })();\n\n return (\n <Button\n variant=\"secondary\"\n size=\"small\"\n onClick={onClick}\n className={mergeClassNames(\n \"group rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-200\",\n active\n ? \"border-ds-border-accent bg-ds-surface-2 text-ds-1 shadow-sm ring-1 ring-ds-border-accent/40\"\n : \"border-ds-border-2 bg-ds-surface-1 text-ds-2 hover:border-ds-border-accent/50 hover:bg-ds-surface-2 hover:text-ds-1\",\n showBrandState && isLightMode\n ? \"bg-ds-surface-1! hover:bg-ds-surface-1!\"\n : null,\n showBrandState && active ? \"text-ds-1\" : null,\n )}\n style={toneStyle}\n aria-pressed={active}\n >\n {swatch ? (\n <span\n className={mergeClassNames(\n \"h-2.5 w-2.5 rounded-full ring-1 ring-black/10 transition-transform duration-200 group-hover:scale-110\",\n active\n ? isLightMode\n ? \"scale-110 ring-2 ring-black/15\"\n : \"scale-110 ring-2 ring-white/35\"\n : \"scale-100 opacity-90\",\n )}\n style={{ backgroundColor: swatch }}\n aria-hidden=\"true\"\n />\n ) : null}\n <span>{label}</span>\n </Button>\n );\n}\n\nexport default function ThemeSwitcherButtons({\n className,\n labels = {},\n}: ThemeSwitcherButtonsProps) {\n const { mode, theme, variant, setMode, setTheme, setVariant } =\n useThemeContext();\n\n const l: Required<ThemeSwitcherLabels> = {\n mode: labels.mode ?? \"Mode\",\n light: labels.light ?? \"Light\",\n dark: labels.dark ?? \"Dark\",\n brand: labels.brand ?? \"Brand\",\n variant: labels.variant ?? \"Variant\",\n variantDefault: labels.variantDefault ?? \"Default\",\n variantAlt: labels.variantAlt ?? \"Alt\",\n purple: labels.purple ?? \"Purple\",\n teal: labels.teal ?? \"Teal\",\n yellow: labels.yellow ?? \"Yellow\",\n green: labels.green ?? \"Green\",\n };\n\n const brandOptions: Array<{ value: ThemeColorType; label: string; swatch: string }> = [\n { value: \"purple\", label: l.purple, swatch: BRAND_SWATCHES.purple },\n { value: \"teal\", label: l.teal, swatch: BRAND_SWATCHES.teal },\n { value: \"yellow\", label: l.yellow, swatch: BRAND_SWATCHES.yellow },\n { value: \"green\", label: l.green, swatch: BRAND_SWATCHES.green },\n ];\n\n const variantOptions: Array<{ value: ThemeVariantType; label: string }> = [\n { value: \"default\", label: l.variantDefault },\n { value: \"alt\", label: l.variantAlt },\n ];\n\n return (\n <div\n className={mergeClassNames(\n \"w-full rounded-2xl border border-ds-border-2 bg-ds-canvas p-4 shadow-sm\",\n className,\n )}\n >\n <div className=\"space-y-3\">\n <div>\n <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n {l.mode}\n </p>\n <div className=\"flex flex-wrap gap-2\">\n <ToggleButton label={l.light} active={mode === \"light\"} onClick={() => setMode(\"light\")} />\n <ToggleButton label={l.dark} active={mode === \"dark\"} onClick={() => setMode(\"dark\")} />\n </div>\n </div>\n\n <div>\n <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n {l.brand}\n </p>\n <div className=\"flex flex-wrap gap-2\">\n {brandOptions.map((opt) => (\n <ToggleButton\n key={opt.value}\n label={opt.label}\n active={theme === opt.value}\n onClick={() => setTheme(opt.value)}\n swatch={opt.swatch}\n showBrandState\n mode={mode}\n />\n ))}\n </div>\n </div>\n\n <div>\n <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n {l.variant}\n </p>\n <div className=\"flex flex-wrap gap-2\">\n {variantOptions.map((opt) => (\n <ToggleButton\n key={opt.value}\n label={opt.label}\n active={variant === opt.value}\n onClick={() => setVariant(opt.value)}\n />\n ))}\n </div>\n </div>\n </div>\n </div>\n );\n}\n"],"mappings":"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"}
|
|
@@ -3,35 +3,30 @@ let react = require("react");
|
|
|
3
3
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
4
4
|
//#region src/components/forms/switch/Switch.tsx
|
|
5
5
|
var sanitizeId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "-");
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
if (direction === "rtl" || direction === "ltr") return direction;
|
|
6
|
+
function getEffectiveDir(dir) {
|
|
7
|
+
if (dir === "rtl" || dir === "ltr") return dir;
|
|
9
8
|
if (typeof document !== "undefined") {
|
|
10
|
-
|
|
11
|
-
if (explicitDirection === "rtl" || explicitDirection === "ltr") return explicitDirection;
|
|
9
|
+
if (document.documentElement.getAttribute("dir") === "rtl") return "rtl";
|
|
12
10
|
}
|
|
13
|
-
if (typeof navigator !== "undefined" && rtlLanguages.test(navigator.language)) return "rtl";
|
|
14
11
|
return "ltr";
|
|
15
12
|
}
|
|
16
13
|
var Switch = (0, react.forwardRef)(({ className = "", label, error, id, checked, dir, ...props }, ref) => {
|
|
17
14
|
const generatedId = (0, react.useId)();
|
|
18
15
|
const switchId = id || `switch-${sanitizeId(generatedId)}`;
|
|
19
|
-
const isRtl =
|
|
16
|
+
const isRtl = getEffectiveDir(dir) === "rtl";
|
|
17
|
+
const thumbClass = checked ? isRtl ? "translate-x-1" : "translate-x-6" : isRtl ? "translate-x-6" : "translate-x-1";
|
|
20
18
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
21
19
|
className: `flex items-center gap-2 ${className}`.trim().replace(/\s+/g, " "),
|
|
22
20
|
dir,
|
|
23
21
|
children: [
|
|
24
22
|
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
|
|
25
23
|
htmlFor: switchId,
|
|
26
|
-
|
|
27
|
-
borderRadius: "var(--border-radius-full, 9999px)",
|
|
28
|
-
...checked ? {} : { background: "#E0E5F2" }
|
|
29
|
-
},
|
|
24
|
+
dir: "ltr",
|
|
30
25
|
className: `
|
|
31
26
|
relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200
|
|
32
27
|
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1
|
|
33
28
|
disabled:cursor-not-allowed disabled:opacity-50
|
|
34
|
-
${checked ? "bg-ds-accent" : ""}
|
|
29
|
+
${checked ? "bg-ds-accent" : "bg-ds-surface-5 ring-1 ring-ds-border-field"}
|
|
35
30
|
`.trim().replace(/\s+/g, " "),
|
|
36
31
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
|
|
37
32
|
ref,
|
|
@@ -40,25 +35,11 @@ var Switch = (0, react.forwardRef)(({ className = "", label, error, id, checked,
|
|
|
40
35
|
className: "sr-only",
|
|
41
36
|
checked,
|
|
42
37
|
...props
|
|
43
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `
|
|
44
|
-
pointer-events-none
|
|
45
|
-
inline-block
|
|
46
|
-
h-4
|
|
47
|
-
w-4
|
|
48
|
-
transform
|
|
49
|
-
rounded-full
|
|
50
|
-
bg-ds-surface-1
|
|
51
|
-
shadow-lg
|
|
52
|
-
ring-0
|
|
53
|
-
transition-transform
|
|
54
|
-
duration-300
|
|
55
|
-
ease-in-out
|
|
56
|
-
${checked ? isRtl ? "translate-x-1" : "translate-x-6" : isRtl ? "translate-x-6" : "translate-x-1"}
|
|
57
|
-
`.trim().replace(/\s+/g, " ") })]
|
|
38
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-md ring-1 ring-ds-border-field transition-all duration-300 ease-in-out ${thumbClass}` })]
|
|
58
39
|
}),
|
|
59
40
|
label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
|
|
60
41
|
htmlFor: switchId,
|
|
61
|
-
className:
|
|
42
|
+
className: "cursor-pointer text-sm font-medium leading-none text-ds-1 text-start peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
|
62
43
|
children: label
|
|
63
44
|
}),
|
|
64
45
|
error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
@@ -77,4 +58,4 @@ Object.defineProperty(exports, "Switch", {
|
|
|
77
58
|
}
|
|
78
59
|
});
|
|
79
60
|
|
|
80
|
-
//# sourceMappingURL=switch-
|
|
61
|
+
//# sourceMappingURL=switch-X3l8xnle.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"switch-X3l8xnle.cjs","names":[],"sources":["../../src/components/forms/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\n\nimport type { SwitchProps } from \"./types\";\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nfunction getEffectiveDir(dir: string | undefined): \"ltr\" | \"rtl\" {\n if (dir === \"rtl\" || dir === \"ltr\") return dir;\n if (typeof document !== \"undefined\") {\n if (document.documentElement.getAttribute(\"dir\") === \"rtl\") return \"rtl\";\n }\n return \"ltr\";\n}\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n ({ className = \"\", label, error, id, checked, dir, ...props }, ref) => {\n const generatedId = useId();\n const switchId = id || `switch-${sanitizeId(generatedId)}`;\n const isRtl = getEffectiveDir(dir) === \"rtl\";\n\n const thumbClass = checked\n ? isRtl\n ? \"translate-x-1\"\n : \"translate-x-6\"\n : isRtl\n ? \"translate-x-6\"\n : \"translate-x-1\";\n\n return (\n <div\n className={`flex items-center gap-2 ${className}`.trim().replace(/\\s+/g, \" \")}\n dir={dir}\n >\n <label\n htmlFor={switchId}\n dir=\"ltr\"\n className={`\n relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200\n focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1\n disabled:cursor-not-allowed disabled:opacity-50\n ${checked ? \"bg-ds-accent\" : \"bg-ds-surface-5 ring-1 ring-ds-border-field\"}\n `\n .trim()\n .replace(/\\s+/g, \" \")}\n >\n <input\n ref={ref}\n type=\"checkbox\"\n id={switchId}\n className=\"sr-only\"\n checked={checked}\n {...props}\n />\n <span\n className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-md ring-1 ring-ds-border-field transition-all duration-300 ease-in-out ${thumbClass}`}\n />\n </label>\n {label && (\n <label\n htmlFor={switchId}\n className=\"cursor-pointer text-sm font-medium leading-none text-ds-1 text-start peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n >\n {label}\n </label>\n )}\n {error && (\n <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n )}\n </div>\n );\n },\n);\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;;AAIA,IAAM,cAAc,UAAkB,MAAM,QAAQ,mBAAmB,IAAI;AAE3E,SAAS,gBAAgB,KAAwC;AAC/D,KAAI,QAAQ,SAAS,QAAQ,MAAO,QAAO;AAC3C,KAAI,OAAO,aAAa;MAClB,SAAS,gBAAgB,aAAa,MAAM,KAAK,MAAO,QAAO;;AAErE,QAAO;;AAGT,IAAa,UAAA,GAAA,MAAA,aACV,EAAE,YAAY,IAAI,OAAO,OAAO,IAAI,SAAS,KAAK,GAAG,SAAS,QAAQ;CACrE,MAAM,eAAA,GAAA,MAAA,QAAqB;CAC3B,MAAM,WAAW,MAAM,UAAU,WAAW,YAAY;CACxD,MAAM,QAAQ,gBAAgB,IAAI,KAAK;CAEvC,MAAM,aAAa,UACf,QACE,kBACA,kBACF,QACE,kBACA;AAEN,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,WAAW,2BAA2B,YAAY,MAAM,CAAC,QAAQ,QAAQ,IAAI;EACxE;YAFP;GAIE,iBAAA,GAAA,kBAAA,MAAC,SAAD;IACE,SAAS;IACT,KAAI;IACJ,WAAW;;;;cAIP,UAAU,iBAAiB,8CAA8C;YAE1E,MAAM,CACN,QAAQ,QAAQ,IAAI;cAVzB,CAYE,iBAAA,GAAA,kBAAA,KAAC,SAAD;KACO;KACL,MAAK;KACL,IAAI;KACJ,WAAU;KACD;KACT,GAAI;KACJ,CAAA,EACF,iBAAA,GAAA,kBAAA,KAAC,QAAD,EACE,WAAW,gJAAgJ,cAC3J,CAAA,CACI;;GACP,SACC,iBAAA,GAAA,kBAAA,KAAC,SAAD;IACE,SAAS;IACT,WAAU;cAET;IACK,CAAA;GAET,SACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAElE;;EAGX;AAED,OAAO,cAAc"}
|
|
@@ -2,35 +2,30 @@ import { forwardRef, useId } from "react";
|
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
//#region src/components/forms/switch/Switch.tsx
|
|
4
4
|
var sanitizeId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "-");
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
if (direction === "rtl" || direction === "ltr") return direction;
|
|
5
|
+
function getEffectiveDir(dir) {
|
|
6
|
+
if (dir === "rtl" || dir === "ltr") return dir;
|
|
8
7
|
if (typeof document !== "undefined") {
|
|
9
|
-
|
|
10
|
-
if (explicitDirection === "rtl" || explicitDirection === "ltr") return explicitDirection;
|
|
8
|
+
if (document.documentElement.getAttribute("dir") === "rtl") return "rtl";
|
|
11
9
|
}
|
|
12
|
-
if (typeof navigator !== "undefined" && rtlLanguages.test(navigator.language)) return "rtl";
|
|
13
10
|
return "ltr";
|
|
14
11
|
}
|
|
15
12
|
var Switch = forwardRef(({ className = "", label, error, id, checked, dir, ...props }, ref) => {
|
|
16
13
|
const generatedId = useId();
|
|
17
14
|
const switchId = id || `switch-${sanitizeId(generatedId)}`;
|
|
18
|
-
const isRtl =
|
|
15
|
+
const isRtl = getEffectiveDir(dir) === "rtl";
|
|
16
|
+
const thumbClass = checked ? isRtl ? "translate-x-1" : "translate-x-6" : isRtl ? "translate-x-6" : "translate-x-1";
|
|
19
17
|
return /* @__PURE__ */ jsxs("div", {
|
|
20
18
|
className: `flex items-center gap-2 ${className}`.trim().replace(/\s+/g, " "),
|
|
21
19
|
dir,
|
|
22
20
|
children: [
|
|
23
21
|
/* @__PURE__ */ jsxs("label", {
|
|
24
22
|
htmlFor: switchId,
|
|
25
|
-
|
|
26
|
-
borderRadius: "var(--border-radius-full, 9999px)",
|
|
27
|
-
...checked ? {} : { background: "#E0E5F2" }
|
|
28
|
-
},
|
|
23
|
+
dir: "ltr",
|
|
29
24
|
className: `
|
|
30
25
|
relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200
|
|
31
26
|
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1
|
|
32
27
|
disabled:cursor-not-allowed disabled:opacity-50
|
|
33
|
-
${checked ? "bg-ds-accent" : ""}
|
|
28
|
+
${checked ? "bg-ds-accent" : "bg-ds-surface-5 ring-1 ring-ds-border-field"}
|
|
34
29
|
`.trim().replace(/\s+/g, " "),
|
|
35
30
|
children: [/* @__PURE__ */ jsx("input", {
|
|
36
31
|
ref,
|
|
@@ -39,25 +34,11 @@ var Switch = forwardRef(({ className = "", label, error, id, checked, dir, ...pr
|
|
|
39
34
|
className: "sr-only",
|
|
40
35
|
checked,
|
|
41
36
|
...props
|
|
42
|
-
}), /* @__PURE__ */ jsx("span", { className: `
|
|
43
|
-
pointer-events-none
|
|
44
|
-
inline-block
|
|
45
|
-
h-4
|
|
46
|
-
w-4
|
|
47
|
-
transform
|
|
48
|
-
rounded-full
|
|
49
|
-
bg-ds-surface-1
|
|
50
|
-
shadow-lg
|
|
51
|
-
ring-0
|
|
52
|
-
transition-transform
|
|
53
|
-
duration-300
|
|
54
|
-
ease-in-out
|
|
55
|
-
${checked ? isRtl ? "translate-x-1" : "translate-x-6" : isRtl ? "translate-x-6" : "translate-x-1"}
|
|
56
|
-
`.trim().replace(/\s+/g, " ") })]
|
|
37
|
+
}), /* @__PURE__ */ jsx("span", { className: `pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-md ring-1 ring-ds-border-field transition-all duration-300 ease-in-out ${thumbClass}` })]
|
|
57
38
|
}),
|
|
58
39
|
label && /* @__PURE__ */ jsx("label", {
|
|
59
40
|
htmlFor: switchId,
|
|
60
|
-
className:
|
|
41
|
+
className: "cursor-pointer text-sm font-medium leading-none text-ds-1 text-start peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
|
61
42
|
children: label
|
|
62
43
|
}),
|
|
63
44
|
error && /* @__PURE__ */ jsx("p", {
|
|
@@ -71,4 +52,4 @@ Switch.displayName = "Switch";
|
|
|
71
52
|
//#endregion
|
|
72
53
|
export { Switch as t };
|
|
73
54
|
|
|
74
|
-
//# sourceMappingURL=switch-
|
|
55
|
+
//# sourceMappingURL=switch-iPsN1NS2.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"switch-iPsN1NS2.mjs","names":[],"sources":["../../src/components/forms/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\n\nimport type { SwitchProps } from \"./types\";\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nfunction getEffectiveDir(dir: string | undefined): \"ltr\" | \"rtl\" {\n if (dir === \"rtl\" || dir === \"ltr\") return dir;\n if (typeof document !== \"undefined\") {\n if (document.documentElement.getAttribute(\"dir\") === \"rtl\") return \"rtl\";\n }\n return \"ltr\";\n}\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n ({ className = \"\", label, error, id, checked, dir, ...props }, ref) => {\n const generatedId = useId();\n const switchId = id || `switch-${sanitizeId(generatedId)}`;\n const isRtl = getEffectiveDir(dir) === \"rtl\";\n\n const thumbClass = checked\n ? isRtl\n ? \"translate-x-1\"\n : \"translate-x-6\"\n : isRtl\n ? \"translate-x-6\"\n : \"translate-x-1\";\n\n return (\n <div\n className={`flex items-center gap-2 ${className}`.trim().replace(/\\s+/g, \" \")}\n dir={dir}\n >\n <label\n htmlFor={switchId}\n dir=\"ltr\"\n className={`\n relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200\n focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1\n disabled:cursor-not-allowed disabled:opacity-50\n ${checked ? \"bg-ds-accent\" : \"bg-ds-surface-5 ring-1 ring-ds-border-field\"}\n `\n .trim()\n .replace(/\\s+/g, \" \")}\n >\n <input\n ref={ref}\n type=\"checkbox\"\n id={switchId}\n className=\"sr-only\"\n checked={checked}\n {...props}\n />\n <span\n className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-md ring-1 ring-ds-border-field transition-all duration-300 ease-in-out ${thumbClass}`}\n />\n </label>\n {label && (\n <label\n htmlFor={switchId}\n className=\"cursor-pointer text-sm font-medium leading-none text-ds-1 text-start peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n >\n {label}\n </label>\n )}\n {error && (\n <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n )}\n </div>\n );\n },\n);\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;AAIA,IAAM,cAAc,UAAkB,MAAM,QAAQ,mBAAmB,IAAI;AAE3E,SAAS,gBAAgB,KAAwC;AAC/D,KAAI,QAAQ,SAAS,QAAQ,MAAO,QAAO;AAC3C,KAAI,OAAO,aAAa;MAClB,SAAS,gBAAgB,aAAa,MAAM,KAAK,MAAO,QAAO;;AAErE,QAAO;;AAGT,IAAa,SAAS,YACnB,EAAE,YAAY,IAAI,OAAO,OAAO,IAAI,SAAS,KAAK,GAAG,SAAS,QAAQ;CACrE,MAAM,cAAc,OAAO;CAC3B,MAAM,WAAW,MAAM,UAAU,WAAW,YAAY;CACxD,MAAM,QAAQ,gBAAgB,IAAI,KAAK;CAEvC,MAAM,aAAa,UACf,QACE,kBACA,kBACF,QACE,kBACA;AAEN,QACE,qBAAC,OAAD;EACE,WAAW,2BAA2B,YAAY,MAAM,CAAC,QAAQ,QAAQ,IAAI;EACxE;YAFP;GAIE,qBAAC,SAAD;IACE,SAAS;IACT,KAAI;IACJ,WAAW;;;;cAIP,UAAU,iBAAiB,8CAA8C;YAE1E,MAAM,CACN,QAAQ,QAAQ,IAAI;cAVzB,CAYE,oBAAC,SAAD;KACO;KACL,MAAK;KACL,IAAI;KACJ,WAAU;KACD;KACT,GAAI;KACJ,CAAA,EACF,oBAAC,QAAD,EACE,WAAW,gJAAgJ,cAC3J,CAAA,CACI;;GACP,SACC,oBAAC,SAAD;IACE,SAAS;IACT,WAAU;cAET;IACK,CAAA;GAET,SACC,oBAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAElE;;EAGX;AAED,OAAO,cAAc"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { n as mergeClassNames } from "./utils-
|
|
1
|
+
import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
|
|
2
2
|
import { forwardRef, useState } from "react";
|
|
3
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
4
|
import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
|
|
@@ -54,4 +54,4 @@ Textarea.displayName = "Textarea";
|
|
|
54
54
|
//#endregion
|
|
55
55
|
export { Textarea as t };
|
|
56
56
|
|
|
57
|
-
//# sourceMappingURL=textarea-
|
|
57
|
+
//# sourceMappingURL=textarea-Bdo-Trvi.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea-
|
|
1
|
+
{"version":3,"file":"textarea-Bdo-Trvi.mjs","names":[],"sources":["../../src/components/forms/textarea/Textarea.tsx"],"sourcesContent":["import type { TextareaProps } from \"./types\";\nimport { forwardRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n ({ className = \"\", label, error, helperText, disabled, ...props }, ref) => {\n const radius = 100;\n const [visible, setVisible] = useState(false);\n const mouseX = useMotionValue(0);\n const mouseY = useMotionValue(0);\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n const { left, top } = event.currentTarget.getBoundingClientRect();\n mouseX.set(event.clientX - left);\n mouseY.set(event.clientY - top);\n };\n\n return (\n <div className=\"w-full\">\n {label && (\n <label className=\"mb-2 block text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n {label}\n </label>\n )}\n\n <motion.div\n style={{\n backgroundImage: disabled\n ? \"none\"\n : useMotionTemplate`\n radial-gradient(\n ${\n visible ? `${radius}px` : \"0px\"\n } circle at ${mouseX}px ${mouseY}px,\n var(--ds-color-accent),\n transparent 90%\n )\n `,\n }}\n onMouseMove={!disabled ? handleMouseMove : undefined}\n onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n className={mergeClassNames(\n \"group/textarea rounded-lg p-[2px] transition duration-300 hover:border-ds-border-accent\",\n error ? \"border-destructive\" : \"border-ds-border-2\",\n )}\n >\n <textarea\n ref={ref}\n disabled={disabled}\n className={mergeClassNames(\n \"flex min-h-[80px] w-full rounded-md border border-ds-border-field bg-ds-surface-1 px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out placeholder:text-ds-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus disabled:cursor-not-allowed disabled:opacity-50 resize-none\",\n error &&\n \"border-destructive text-destructive placeholder:text-destructive focus-visible:ring-destructive\",\n className,\n )}\n {...props}\n />\n </motion.div>\n\n {error && (\n <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n )}\n {helperText && !error && (\n <p className=\"mt-1 text-sm text-ds-2\">{helperText}</p>\n )}\n </div>\n );\n },\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";;;;;AAMA,IAAa,WAAW,YACrB,EAAE,YAAY,IAAI,OAAO,OAAO,YAAY,UAAU,GAAG,SAAS,QAAQ;CACzE,MAAM,SAAS;CACf,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,SAAS,eAAe,EAAE;CAChC,MAAM,SAAS,eAAe,EAAE;CAEhC,MAAM,mBAAmB,UAA4C;EACnE,MAAM,EAAE,MAAM,QAAQ,MAAM,cAAc,uBAAuB;AACjE,SAAO,IAAI,MAAM,UAAU,KAAK;AAChC,SAAO,IAAI,MAAM,UAAU,IAAI;;AAGjC,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,SACC,oBAAC,SAAD;IAAO,WAAU;cACd;IACK,CAAA;GAGV,oBAAC,OAAO,KAAR;IACE,OAAO,EACL,iBAAiB,WACb,SACA,iBAAiB;;sBAGX,UAAU,GAAG,OAAO,MAAM,MAC3B,aAAa,OAAO,KAAK,OAAO;;;;mBAK1C;IACD,aAAa,CAAC,WAAW,kBAAkB,KAAA;IAC3C,cAAc,CAAC,iBAAiB,WAAW,KAAK,GAAG,KAAA;IACnD,cAAc,CAAC,iBAAiB,WAAW,MAAM,GAAG,KAAA;IACpD,WAAW,gBACT,2FACA,QAAQ,uBAAuB,qBAChC;cAED,oBAAC,YAAD;KACO;KACK;KACV,WAAW,gBACT,mTACA,SACE,mGACF,UACD;KACD,GAAI;KACJ,CAAA;IACS,CAAA;GAEZ,SACC,oBAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAErE,cAAc,CAAC,SACd,oBAAC,KAAD;IAAG,WAAU;cAA0B;IAAe,CAAA;GAEpD;;EAGX;AAED,SAAS,cAAc"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
require("./chunk-B_GkZjkl.cjs");
|
|
2
|
-
const require_utils = require("./utils-
|
|
2
|
+
const require_utils = require("./utils-LRbEQHYs.cjs");
|
|
3
3
|
let react = require("react");
|
|
4
4
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
5
5
|
let framer_motion = require("framer-motion");
|
|
@@ -60,4 +60,4 @@ Object.defineProperty(exports, "Textarea", {
|
|
|
60
60
|
}
|
|
61
61
|
});
|
|
62
62
|
|
|
63
|
-
//# sourceMappingURL=textarea-
|
|
63
|
+
//# sourceMappingURL=textarea-CGRl2hrM.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea-
|
|
1
|
+
{"version":3,"file":"textarea-CGRl2hrM.cjs","names":[],"sources":["../../src/components/forms/textarea/Textarea.tsx"],"sourcesContent":["import type { TextareaProps } from \"./types\";\nimport { forwardRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n ({ className = \"\", label, error, helperText, disabled, ...props }, ref) => {\n const radius = 100;\n const [visible, setVisible] = useState(false);\n const mouseX = useMotionValue(0);\n const mouseY = useMotionValue(0);\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n const { left, top } = event.currentTarget.getBoundingClientRect();\n mouseX.set(event.clientX - left);\n mouseY.set(event.clientY - top);\n };\n\n return (\n <div className=\"w-full\">\n {label && (\n <label className=\"mb-2 block text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n {label}\n </label>\n )}\n\n <motion.div\n style={{\n backgroundImage: disabled\n ? \"none\"\n : useMotionTemplate`\n radial-gradient(\n ${\n visible ? `${radius}px` : \"0px\"\n } circle at ${mouseX}px ${mouseY}px,\n var(--ds-color-accent),\n transparent 90%\n )\n `,\n }}\n onMouseMove={!disabled ? handleMouseMove : undefined}\n onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n className={mergeClassNames(\n \"group/textarea rounded-lg p-[2px] transition duration-300 hover:border-ds-border-accent\",\n error ? \"border-destructive\" : \"border-ds-border-2\",\n )}\n >\n <textarea\n ref={ref}\n disabled={disabled}\n className={mergeClassNames(\n \"flex min-h-[80px] w-full rounded-md border border-ds-border-field bg-ds-surface-1 px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out placeholder:text-ds-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus disabled:cursor-not-allowed disabled:opacity-50 resize-none\",\n error &&\n \"border-destructive text-destructive placeholder:text-destructive focus-visible:ring-destructive\",\n className,\n )}\n {...props}\n />\n </motion.div>\n\n {error && (\n <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n )}\n {helperText && !error && (\n <p className=\"mt-1 text-sm text-ds-2\">{helperText}</p>\n )}\n </div>\n );\n },\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";;;;;;AAMA,IAAa,YAAA,GAAA,MAAA,aACV,EAAE,YAAY,IAAI,OAAO,OAAO,YAAY,UAAU,GAAG,SAAS,QAAQ;CACzE,MAAM,SAAS;CACf,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,MAAM;CAC7C,MAAM,UAAA,GAAA,cAAA,gBAAwB,EAAE;CAChC,MAAM,UAAA,GAAA,cAAA,gBAAwB,EAAE;CAEhC,MAAM,mBAAmB,UAA4C;EACnE,MAAM,EAAE,MAAM,QAAQ,MAAM,cAAc,uBAAuB;AACjE,SAAO,IAAI,MAAM,UAAU,KAAK;AAChC,SAAO,IAAI,MAAM,UAAU,IAAI;;AAGjC,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf;GACG,SACC,iBAAA,GAAA,kBAAA,KAAC,SAAD;IAAO,WAAU;cACd;IACK,CAAA;GAGV,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAO,KAAR;IACE,OAAO,EACL,iBAAiB,WACb,SACA,cAAA,iBAAiB;;sBAGX,UAAU,GAAG,OAAO,MAAM,MAC3B,aAAa,OAAO,KAAK,OAAO;;;;mBAK1C;IACD,aAAa,CAAC,WAAW,kBAAkB,KAAA;IAC3C,cAAc,CAAC,iBAAiB,WAAW,KAAK,GAAG,KAAA;IACnD,cAAc,CAAC,iBAAiB,WAAW,MAAM,GAAG,KAAA;IACpD,WAAW,cAAA,gBACT,2FACA,QAAQ,uBAAuB,qBAChC;cAED,iBAAA,GAAA,kBAAA,KAAC,YAAD;KACO;KACK;KACV,WAAW,cAAA,gBACT,mTACA,SACE,mGACF,UACD;KACD,GAAI;KACJ,CAAA;IACS,CAAA;GAEZ,SACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAErE,cAAc,CAAC,SACd,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA0B;IAAe,CAAA;GAEpD;;EAGX;AAED,SAAS,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast-BcBidy5n.mjs","names":[],"sources":["../../src/components/overlays/toast/Toast.tsx"],"sourcesContent":["import {\n createContext,\n useContext,\n useState,\n useCallback,\n useRef,\n useEffect,\n forwardRef,\n} from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n AlertTriangleIcon,\n CheckCircleIcon,\n CloseIcon,\n InfoCircleIcon,\n LoaderIcon,\n XCircleIcon,\n} from \"../../icons\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type ToastType =\n | \"success\"\n | \"error\"\n | \"warning\"\n | \"info\"\n | \"default\"\n | \"loading\";\nexport type ToastPosition =\n | \"top-left\"\n | \"top-center\"\n | \"top-right\"\n | \"bottom-left\"\n | \"bottom-center\"\n | \"bottom-right\";\n\nexport interface ToastAction {\n label: string;\n onClick: () => void;\n}\n\nexport interface Toast {\n id: string;\n type: ToastType;\n title?: string;\n description?: string;\n duration?: number;\n icon?: React.ReactNode;\n action?: ToastAction;\n dismissible?: boolean;\n onDismiss?: () => void;\n onAutoClose?: () => void;\n promise?: {\n loading: string;\n success: string | ((data: unknown) => string);\n error: string | ((error: unknown) => string);\n };\n}\n\nexport interface ToastOptions {\n type?: ToastType;\n title?: string;\n description?: string;\n duration?: number;\n icon?: React.ReactNode;\n action?: ToastAction;\n dismissible?: boolean;\n onDismiss?: () => void;\n onAutoClose?: () => void;\n}\n\nexport interface ToastContextValue {\n toasts: Toast[];\n toast: (options: ToastOptions | string) => string;\n success: (options: ToastOptions | string) => string;\n error: (options: ToastOptions | string) => string;\n warning: (options: ToastOptions | string) => string;\n info: (options: ToastOptions | string) => string;\n loading: (options: ToastOptions | string) => string;\n promise: <T>(\n promise: Promise<T>,\n options: {\n loading: string;\n success: string | ((data: T) => string);\n error: string | ((error: unknown) => string);\n },\n ) => Promise<T>;\n dismiss: (id: string) => void;\n dismissAll: () => void;\n update: (id: string, options: Partial<ToastOptions>) => void;\n}\n\nexport interface ToastProviderProps {\n children: React.ReactNode;\n /** Default position for toasts */\n position?: ToastPosition;\n /** Default duration in milliseconds */\n duration?: number;\n /** Maximum number of visible toasts */\n maxToasts?: number;\n /** Gap between toasts */\n gap?: number;\n /** Whether toasts are dismissible by default */\n dismissible?: boolean;\n /** Custom className for the toast container */\n containerClassName?: string;\n}\n\nexport interface ToastItemProps {\n toast: Toast;\n onDismiss: (id: string) => void;\n position: ToastPosition;\n}\n\n// ============================================================================\n// Context\n// ============================================================================\n\nconst ToastContext = createContext<ToastContextValue | null>(null);\n\nexport const useToast = (): ToastContextValue => {\n const context = useContext(ToastContext);\n if (!context) {\n throw new Error(\"useToast must be used within a ToastProvider\");\n }\n return context;\n};\n\n// ============================================================================\n// Styles\n// ============================================================================\n\nconst typeStyles: Record<\n ToastType,\n { bg: string; icon: string; iconBg: string }\n> = {\n success: {\n bg: \"bg-ds-surface-1 border-ds-state-success-border\",\n icon: \"text-ds-state-success-text\",\n iconBg: \"bg-ds-state-success-surface\",\n },\n error: {\n bg: \"bg-ds-surface-1 border-ds-state-error-border\",\n icon: \"text-ds-state-error-text\",\n iconBg: \"bg-ds-state-error-surface\",\n },\n warning: {\n bg: \"bg-ds-surface-1 border-ds-state-warning-border\",\n icon: \"text-ds-state-warning-text\",\n iconBg: \"bg-ds-state-warning-surface\",\n },\n info: {\n bg: \"bg-ds-surface-1 border-ds-state-info-border\",\n icon: \"text-ds-state-info-text\",\n iconBg: \"bg-ds-state-info-surface\",\n },\n default: {\n bg: \"bg-ds-surface-1 border-ds-border-2\",\n icon: \"text-ds-2\",\n iconBg: \"bg-ds-surface-2\",\n },\n loading: {\n bg: \"bg-ds-surface-1 border-ds-border-2\",\n icon: \"text-ds-1\",\n iconBg: \"bg-ds-accent-subtle\",\n },\n};\n\nconst positionStyles: Record<ToastPosition, string> = {\n \"top-left\": \"top-4 left-4\",\n \"top-center\": \"top-4 left-1/2 -translate-x-1/2\",\n \"top-right\": \"top-4 right-4\",\n \"bottom-left\": \"bottom-4 left-4\",\n \"bottom-center\": \"bottom-4 left-1/2 -translate-x-1/2\",\n \"bottom-right\": \"bottom-4 right-4\",\n};\n\nconst getMotionVariants = (position: ToastPosition) => {\n const isTop = position.startsWith(\"top\");\n const isCenter = position.includes(\"center\");\n const isLeft = position.includes(\"left\");\n\n return {\n initial: {\n opacity: 0,\n y: isTop ? -20 : 20,\n x: isCenter ? 0 : isLeft ? -20 : 20,\n scale: 0.95,\n },\n animate: {\n opacity: 1,\n y: 0,\n x: 0,\n scale: 1,\n },\n exit: {\n opacity: 0,\n y: isTop ? -20 : 20,\n scale: 0.95,\n transition: { duration: 0.15 },\n },\n };\n};\n\n// ============================================================================\n// Toast Item Component\n// ============================================================================\n\nconst ToastItem = forwardRef<HTMLDivElement, ToastItemProps>(\n ({ toast, onDismiss, position }, ref) => {\n const {\n type,\n title,\n description,\n icon,\n action,\n dismissible = true,\n duration,\n } = toast;\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const [progress, setProgress] = useState(100);\n const [isPaused, setIsPaused] = useState(false);\n\n const defaultIcons: Record<ToastType, React.ReactNode> = {\n success: <CheckCircleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n error: <XCircleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n warning: <AlertTriangleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n info: <InfoCircleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n loading: (\n <LoaderIcon className=\"w-5 h-5 animate-spin\" aria-hidden=\"true\" />\n ),\n default: null,\n };\n\n // Auto-dismiss timer with progress\n useEffect(() => {\n if (duration && duration > 0 && type !== \"loading\") {\n const startTime = Date.now();\n const interval = 50;\n\n const updateProgress = () => {\n if (isPaused) return;\n\n const elapsed = Date.now() - startTime;\n const remaining = Math.max(0, 100 - (elapsed / duration) * 100);\n setProgress(remaining);\n\n if (remaining <= 0) {\n toast.onAutoClose?.();\n onDismiss(toast.id);\n }\n };\n\n timerRef.current = setInterval(updateProgress, interval);\n\n return () => {\n if (timerRef.current) {\n clearInterval(timerRef.current);\n }\n };\n }\n }, [duration, toast.id, type, isPaused, onDismiss, toast]);\n\n const handleMouseEnter = () => setIsPaused(true);\n const handleMouseLeave = () => setIsPaused(false);\n\n const styles = typeStyles[type];\n const displayIcon = icon ?? defaultIcons[type];\n const variants = getMotionVariants(position);\n\n return (\n <motion.div\n ref={ref}\n layout\n initial={variants.initial}\n animate={variants.animate}\n exit={variants.exit}\n transition={{ type: \"spring\", stiffness: 400, damping: 30 }}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={`\n relative flex items-start gap-3 p-4 pr-10\n rounded-lg shadow-lg border min-w-[320px] max-w-[420px]\n overflow-hidden\n ${styles.bg}\n `}\n role=\"alert\"\n aria-live=\"polite\"\n >\n {/* Progress bar */}\n {duration && duration > 0 && type !== \"loading\" && (\n <div className=\"absolute bottom-0 left-0 right-0 h-1 bg-ds-surface-2\">\n <motion.div\n className={`h-full ${\n type === \"success\"\n ? \"bg-ds-state-success\"\n : type === \"error\"\n ? \"bg-ds-state-danger\"\n : type === \"warning\"\n ? \"bg-ds-state-warning\"\n : type === \"info\"\n ? \"bg-ds-state-info\"\n : \"bg-ds-border-3\"\n }`}\n style={{ width: `${progress}%` }}\n transition={{ duration: 0.05 }}\n />\n </div>\n )}\n\n {/* Icon */}\n {displayIcon && (\n <div\n className={`shrink-0 p-1.5 rounded-full ${styles.iconBg} ${styles.icon}`}\n >\n {displayIcon}\n </div>\n )}\n\n {/* Content */}\n <div className=\"flex-1 min-w-0\">\n {title && <p className=\"text-sm font-semibold text-ds-1\">{title}</p>}\n {description && (\n <p className={`text-sm text-ds-2 ${title ? \"mt-1\" : \"\"}`}>\n {description}\n </p>\n )}\n {action && (\n <button\n onClick={() => {\n action.onClick();\n onDismiss(toast.id);\n }}\n className=\"mt-2 text-sm font-medium text-ds-1 hover:underline\"\n >\n {action.label}\n </button>\n )}\n </div>\n\n {/* Dismiss button */}\n {dismissible && (\n <button\n onClick={() => {\n toast.onDismiss?.();\n onDismiss(toast.id);\n }}\n className=\"absolute top-3 right-3 rounded-full p-1 text-ds-2 transition-colors hover:bg-ds-surface-2 hover:text-ds-1\"\n aria-label=\"Dismiss\"\n >\n <CloseIcon className=\"w-4 h-4\" aria-hidden=\"true\" />\n </button>\n )}\n </motion.div>\n );\n },\n);\n\nToastItem.displayName = \"ToastItem\";\n\n// ============================================================================\n// Toast Provider Component\n// ============================================================================\n\nexport const ToastProvider: React.FC<ToastProviderProps> = ({\n children,\n position = \"bottom-right\",\n duration = 5000,\n maxToasts = 5,\n gap = 12,\n dismissible = true,\n containerClassName = \"\",\n}) => {\n const [toasts, setToasts] = useState<Toast[]>([]);\n const toastIdCounter = useRef(0);\n\n const generateId = () => {\n toastIdCounter.current += 1;\n return `toast-${toastIdCounter.current}-${Date.now()}`;\n };\n\n const addToast = useCallback(\n (options: ToastOptions | string, type: ToastType = \"default\"): string => {\n const id = generateId();\n const toastOptions: ToastOptions =\n typeof options === \"string\" ? { description: options } : options;\n\n const newToast: Toast = {\n id,\n type: toastOptions.type ?? type,\n title: toastOptions.title,\n description: toastOptions.description,\n duration: toastOptions.duration ?? duration,\n icon: toastOptions.icon,\n action: toastOptions.action,\n dismissible: toastOptions.dismissible ?? dismissible,\n onDismiss: toastOptions.onDismiss,\n onAutoClose: toastOptions.onAutoClose,\n };\n\n setToasts((prev) => {\n const updated = [...prev, newToast];\n // Keep only the last maxToasts\n return updated.slice(-maxToasts);\n });\n\n return id;\n },\n [duration, dismissible, maxToasts],\n );\n\n const dismiss = useCallback((id: string) => {\n setToasts((prev) => prev.filter((t) => t.id !== id));\n }, []);\n\n const dismissAll = useCallback(() => {\n setToasts([]);\n }, []);\n\n const update = useCallback((id: string, options: Partial<ToastOptions>) => {\n setToasts((prev) =>\n prev.map((t) =>\n t.id === id\n ? {\n ...t,\n ...options,\n type: options.type ?? t.type,\n }\n : t,\n ),\n );\n }, []);\n\n const toast = useCallback(\n (options: ToastOptions | string) => addToast(options, \"default\"),\n [addToast],\n );\n\n const success = useCallback(\n (options: ToastOptions | string) => addToast(options, \"success\"),\n [addToast],\n );\n\n const error = useCallback(\n (options: ToastOptions | string) => addToast(options, \"error\"),\n [addToast],\n );\n\n const warning = useCallback(\n (options: ToastOptions | string) => addToast(options, \"warning\"),\n [addToast],\n );\n\n const info = useCallback(\n (options: ToastOptions | string) => addToast(options, \"info\"),\n [addToast],\n );\n\n const loading = useCallback(\n (options: ToastOptions | string) => {\n const toastOptions: ToastOptions =\n typeof options === \"string\" ? { description: options } : options;\n return addToast(\n { ...toastOptions, duration: 0, dismissible: false },\n \"loading\",\n );\n },\n [addToast],\n );\n\n const promise = useCallback(\n async <T,>(\n promiseToResolve: Promise<T>,\n options: {\n loading: string;\n success: string | ((data: T) => string);\n error: string | ((error: unknown) => string);\n },\n ): Promise<T> => {\n const id = loading(options.loading);\n\n try {\n const result = await promiseToResolve;\n const successMessage =\n typeof options.success === \"function\"\n ? options.success(result)\n : options.success;\n update(id, {\n type: \"success\",\n description: successMessage,\n duration,\n dismissible: true,\n });\n return result;\n } catch (err) {\n const errorMessage =\n typeof options.error === \"function\"\n ? options.error(err)\n : options.error;\n update(id, {\n type: \"error\",\n description: errorMessage,\n duration,\n dismissible: true,\n });\n throw err;\n }\n },\n [loading, update, duration],\n );\n\n const contextValue: ToastContextValue = {\n toasts,\n toast,\n success,\n error,\n warning,\n info,\n loading,\n promise,\n dismiss,\n dismissAll,\n update,\n };\n\n const isTop = position.startsWith(\"top\");\n\n return (\n <ToastContext.Provider value={contextValue}>\n {children}\n <div\n className={`fixed z-100 flex flex-col pointer-events-none ${positionStyles[position]} ${containerClassName}`}\n style={{ gap: `${gap}px` }}\n >\n <AnimatePresence mode=\"popLayout\">\n {(isTop ? toasts : [...toasts].reverse()).map((t) => (\n <div key={t.id} className=\"pointer-events-auto\">\n <ToastItem toast={t} onDismiss={dismiss} position={position} />\n </div>\n ))}\n </AnimatePresence>\n </div>\n </ToastContext.Provider>\n );\n};\n\n// ============================================================================\n// Standalone toast function (for use without hooks)\n// ============================================================================\n\nlet globalToast: ToastContextValue | null = null;\n\nexport const setGlobalToast = (toastContext: ToastContextValue) => {\n globalToast = toastContext;\n};\n\nexport const toastStandalone = {\n show: (options: ToastOptions | string) => globalToast?.toast(options),\n success: (options: ToastOptions | string) => globalToast?.success(options),\n error: (options: ToastOptions | string) => globalToast?.error(options),\n warning: (options: ToastOptions | string) => globalToast?.warning(options),\n info: (options: ToastOptions | string) => globalToast?.info(options),\n loading: (options: ToastOptions | string) => globalToast?.loading(options),\n promise: <T,>(\n promise: Promise<T>,\n options: {\n loading: string;\n success: string | ((data: T) => string);\n error: string | ((error: unknown) => string);\n },\n ) => globalToast?.promise(promise, options),\n dismiss: (id: string) => globalToast?.dismiss(id),\n dismissAll: () => globalToast?.dismissAll(),\n};\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport default ToastProvider;\nexport { ToastItem };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"toast-BcBidy5n.mjs","names":[],"sources":["../../src/components/overlays/toast/Toast.tsx"],"sourcesContent":["import {\n createContext,\n useContext,\n useState,\n useCallback,\n useRef,\n useEffect,\n forwardRef,\n} from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n AlertTriangleIcon,\n CheckCircleIcon,\n CloseIcon,\n InfoCircleIcon,\n LoaderIcon,\n XCircleIcon,\n} from \"../../icons\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type ToastType =\n | \"success\"\n | \"error\"\n | \"warning\"\n | \"info\"\n | \"default\"\n | \"loading\";\nexport type ToastPosition =\n | \"top-left\"\n | \"top-center\"\n | \"top-right\"\n | \"bottom-left\"\n | \"bottom-center\"\n | \"bottom-right\";\n\nexport interface ToastAction {\n label: string;\n onClick: () => void;\n}\n\nexport interface Toast {\n id: string;\n type: ToastType;\n title?: string;\n description?: string;\n duration?: number;\n icon?: React.ReactNode;\n action?: ToastAction;\n dismissible?: boolean;\n onDismiss?: () => void;\n onAutoClose?: () => void;\n promise?: {\n loading: string;\n success: string | ((data: unknown) => string);\n error: string | ((error: unknown) => string);\n };\n}\n\nexport interface ToastOptions {\n type?: ToastType;\n title?: string;\n description?: string;\n duration?: number;\n icon?: React.ReactNode;\n action?: ToastAction;\n dismissible?: boolean;\n onDismiss?: () => void;\n onAutoClose?: () => void;\n}\n\nexport interface ToastContextValue {\n toasts: Toast[];\n toast: (options: ToastOptions | string) => string;\n success: (options: ToastOptions | string) => string;\n error: (options: ToastOptions | string) => string;\n warning: (options: ToastOptions | string) => string;\n info: (options: ToastOptions | string) => string;\n loading: (options: ToastOptions | string) => string;\n promise: <T>(\n promise: Promise<T>,\n options: {\n loading: string;\n success: string | ((data: T) => string);\n error: string | ((error: unknown) => string);\n },\n ) => Promise<T>;\n dismiss: (id: string) => void;\n dismissAll: () => void;\n update: (id: string, options: Partial<ToastOptions>) => void;\n}\n\nexport interface ToastProviderProps {\n children: React.ReactNode;\n /** Default position for toasts */\n position?: ToastPosition;\n /** Default duration in milliseconds */\n duration?: number;\n /** Maximum number of visible toasts */\n maxToasts?: number;\n /** Gap between toasts */\n gap?: number;\n /** Whether toasts are dismissible by default */\n dismissible?: boolean;\n /** Custom className for the toast container */\n containerClassName?: string;\n}\n\nexport interface ToastItemProps {\n toast: Toast;\n onDismiss: (id: string) => void;\n position: ToastPosition;\n}\n\n// ============================================================================\n// Context\n// ============================================================================\n\nconst ToastContext = createContext<ToastContextValue | null>(null);\n\nexport const useToast = (): ToastContextValue => {\n const context = useContext(ToastContext);\n if (!context) {\n throw new Error(\"useToast must be used within a ToastProvider\");\n }\n return context;\n};\n\n// ============================================================================\n// Styles\n// ============================================================================\n\nconst typeStyles: Record<\n ToastType,\n { bg: string; icon: string; iconBg: string }\n> = {\n success: {\n bg: \"bg-ds-surface-1 border-ds-state-success-border\",\n icon: \"text-ds-state-success-text\",\n iconBg: \"bg-ds-state-success-surface\",\n },\n error: {\n bg: \"bg-ds-surface-1 border-ds-state-error-border\",\n icon: \"text-ds-state-error-text\",\n iconBg: \"bg-ds-state-error-surface\",\n },\n warning: {\n bg: \"bg-ds-surface-1 border-ds-state-warning-border\",\n icon: \"text-ds-state-warning-text\",\n iconBg: \"bg-ds-state-warning-surface\",\n },\n info: {\n bg: \"bg-ds-surface-1 border-ds-state-info-border\",\n icon: \"text-ds-state-info-text\",\n iconBg: \"bg-ds-state-info-surface\",\n },\n default: {\n bg: \"bg-ds-surface-1 border-ds-border-2\",\n icon: \"text-ds-2\",\n iconBg: \"bg-ds-surface-2\",\n },\n loading: {\n bg: \"bg-ds-surface-1 border-ds-border-2\",\n icon: \"text-ds-1\",\n iconBg: \"bg-ds-accent-subtle\",\n },\n};\n\nconst positionStyles: Record<ToastPosition, string> = {\n \"top-left\": \"top-4 left-4\",\n \"top-center\": \"top-4 left-1/2 -translate-x-1/2\",\n \"top-right\": \"top-4 right-4\",\n \"bottom-left\": \"bottom-4 left-4\",\n \"bottom-center\": \"bottom-4 left-1/2 -translate-x-1/2\",\n \"bottom-right\": \"bottom-4 right-4\",\n};\n\nconst getMotionVariants = (position: ToastPosition) => {\n const isTop = position.startsWith(\"top\");\n const isCenter = position.includes(\"center\");\n const isLeft = position.includes(\"left\");\n\n return {\n initial: {\n opacity: 0,\n y: isTop ? -20 : 20,\n x: isCenter ? 0 : isLeft ? -20 : 20,\n scale: 0.95,\n },\n animate: {\n opacity: 1,\n y: 0,\n x: 0,\n scale: 1,\n },\n exit: {\n opacity: 0,\n y: isTop ? -20 : 20,\n scale: 0.95,\n transition: { duration: 0.15 },\n },\n };\n};\n\n// ============================================================================\n// Toast Item Component\n// ============================================================================\n\nconst ToastItem = forwardRef<HTMLDivElement, ToastItemProps>(\n ({ toast, onDismiss, position }, ref) => {\n const {\n type,\n title,\n description,\n icon,\n action,\n dismissible = true,\n duration,\n } = toast;\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const [progress, setProgress] = useState(100);\n const [isPaused, setIsPaused] = useState(false);\n\n const defaultIcons: Record<ToastType, React.ReactNode> = {\n success: <CheckCircleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n error: <XCircleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n warning: <AlertTriangleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n info: <InfoCircleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n loading: (\n <LoaderIcon className=\"w-5 h-5 animate-spin\" aria-hidden=\"true\" />\n ),\n default: null,\n };\n\n // Auto-dismiss timer with progress\n useEffect(() => {\n if (duration && duration > 0 && type !== \"loading\") {\n const startTime = Date.now();\n const interval = 50;\n\n const updateProgress = () => {\n if (isPaused) return;\n\n const elapsed = Date.now() - startTime;\n const remaining = Math.max(0, 100 - (elapsed / duration) * 100);\n setProgress(remaining);\n\n if (remaining <= 0) {\n toast.onAutoClose?.();\n onDismiss(toast.id);\n }\n };\n\n timerRef.current = setInterval(updateProgress, interval);\n\n return () => {\n if (timerRef.current) {\n clearInterval(timerRef.current);\n }\n };\n }\n }, [duration, toast.id, type, isPaused, onDismiss, toast]);\n\n const handleMouseEnter = () => setIsPaused(true);\n const handleMouseLeave = () => setIsPaused(false);\n\n const styles = typeStyles[type];\n const displayIcon = icon ?? defaultIcons[type];\n const variants = getMotionVariants(position);\n\n return (\n <motion.div\n ref={ref}\n layout\n initial={variants.initial}\n animate={variants.animate}\n exit={variants.exit}\n transition={{ type: \"spring\", stiffness: 400, damping: 30 }}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={`\n relative flex items-start gap-3 p-4 pr-10\n rounded-lg shadow-lg border min-w-[320px] max-w-[420px]\n overflow-hidden\n ${styles.bg}\n `}\n role=\"alert\"\n aria-live=\"polite\"\n >\n {/* Progress bar */}\n {duration && duration > 0 && type !== \"loading\" && (\n <div className=\"absolute bottom-0 left-0 right-0 h-1 bg-ds-surface-2\">\n <motion.div\n className={`h-full ${\n type === \"success\"\n ? \"bg-ds-state-success\"\n : type === \"error\"\n ? \"bg-ds-state-danger\"\n : type === \"warning\"\n ? \"bg-ds-state-warning\"\n : type === \"info\"\n ? \"bg-ds-state-info\"\n : \"bg-ds-border-3\"\n }`}\n style={{ width: `${progress}%` }}\n transition={{ duration: 0.05 }}\n />\n </div>\n )}\n\n {/* Icon */}\n {displayIcon && (\n <div\n className={`shrink-0 p-1.5 rounded-full ${styles.iconBg} ${styles.icon}`}\n >\n {displayIcon}\n </div>\n )}\n\n {/* Content */}\n <div className=\"flex-1 min-w-0\">\n {title && <p className=\"text-sm font-semibold text-ds-1\">{title}</p>}\n {description && (\n <p className={`text-sm text-ds-2 ${title ? \"mt-1\" : \"\"}`}>\n {description}\n </p>\n )}\n {action && (\n <button\n onClick={() => {\n action.onClick();\n onDismiss(toast.id);\n }}\n className=\"mt-2 text-sm font-medium text-ds-1 hover:underline\"\n >\n {action.label}\n </button>\n )}\n </div>\n\n {/* Dismiss button */}\n {dismissible && (\n <button\n onClick={() => {\n toast.onDismiss?.();\n onDismiss(toast.id);\n }}\n className=\"absolute top-3 right-3 rounded-full p-1 text-ds-2 transition-colors hover:bg-ds-surface-2 hover:text-ds-1\"\n aria-label=\"Dismiss\"\n >\n <CloseIcon className=\"w-4 h-4\" aria-hidden=\"true\" />\n </button>\n )}\n </motion.div>\n );\n },\n);\n\nToastItem.displayName = \"ToastItem\";\n\n// ============================================================================\n// Toast Provider Component\n// ============================================================================\n\nexport const ToastProvider: React.FC<ToastProviderProps> = ({\n children,\n position = \"bottom-right\",\n duration = 5000,\n maxToasts = 5,\n gap = 12,\n dismissible = true,\n containerClassName = \"\",\n}) => {\n const [toasts, setToasts] = useState<Toast[]>([]);\n const toastIdCounter = useRef(0);\n\n const generateId = () => {\n toastIdCounter.current += 1;\n return `toast-${toastIdCounter.current}-${Date.now()}`;\n };\n\n const addToast = useCallback(\n (options: ToastOptions | string, type: ToastType = \"default\"): string => {\n const id = generateId();\n const toastOptions: ToastOptions =\n typeof options === \"string\" ? { description: options } : options;\n\n const newToast: Toast = {\n id,\n type: toastOptions.type ?? type,\n title: toastOptions.title,\n description: toastOptions.description,\n duration: toastOptions.duration ?? duration,\n icon: toastOptions.icon,\n action: toastOptions.action,\n dismissible: toastOptions.dismissible ?? dismissible,\n onDismiss: toastOptions.onDismiss,\n onAutoClose: toastOptions.onAutoClose,\n };\n\n setToasts((prev) => {\n const updated = [...prev, newToast];\n // Keep only the last maxToasts\n return updated.slice(-maxToasts);\n });\n\n return id;\n },\n [duration, dismissible, maxToasts],\n );\n\n const dismiss = useCallback((id: string) => {\n setToasts((prev) => prev.filter((t) => t.id !== id));\n }, []);\n\n const dismissAll = useCallback(() => {\n setToasts([]);\n }, []);\n\n const update = useCallback((id: string, options: Partial<ToastOptions>) => {\n setToasts((prev) =>\n prev.map((t) =>\n t.id === id\n ? {\n ...t,\n ...options,\n type: options.type ?? t.type,\n }\n : t,\n ),\n );\n }, []);\n\n const toast = useCallback(\n (options: ToastOptions | string) => addToast(options, \"default\"),\n [addToast],\n );\n\n const success = useCallback(\n (options: ToastOptions | string) => addToast(options, \"success\"),\n [addToast],\n );\n\n const error = useCallback(\n (options: ToastOptions | string) => addToast(options, \"error\"),\n [addToast],\n );\n\n const warning = useCallback(\n (options: ToastOptions | string) => addToast(options, \"warning\"),\n [addToast],\n );\n\n const info = useCallback(\n (options: ToastOptions | string) => addToast(options, \"info\"),\n [addToast],\n );\n\n const loading = useCallback(\n (options: ToastOptions | string) => {\n const toastOptions: ToastOptions =\n typeof options === \"string\" ? { description: options } : options;\n return addToast(\n { ...toastOptions, duration: 0, dismissible: false },\n \"loading\",\n );\n },\n [addToast],\n );\n\n const promise = useCallback(\n async <T,>(\n promiseToResolve: Promise<T>,\n options: {\n loading: string;\n success: string | ((data: T) => string);\n error: string | ((error: unknown) => string);\n },\n ): Promise<T> => {\n const id = loading(options.loading);\n\n try {\n const result = await promiseToResolve;\n const successMessage =\n typeof options.success === \"function\"\n ? options.success(result)\n : options.success;\n update(id, {\n type: \"success\",\n description: successMessage,\n duration,\n dismissible: true,\n });\n return result;\n } catch (err) {\n const errorMessage =\n typeof options.error === \"function\"\n ? options.error(err)\n : options.error;\n update(id, {\n type: \"error\",\n description: errorMessage,\n duration,\n dismissible: true,\n });\n throw err;\n }\n },\n [loading, update, duration],\n );\n\n const contextValue: ToastContextValue = {\n toasts,\n toast,\n success,\n error,\n warning,\n info,\n loading,\n promise,\n dismiss,\n dismissAll,\n update,\n };\n\n const isTop = position.startsWith(\"top\");\n\n return (\n <ToastContext.Provider value={contextValue}>\n {children}\n <div\n className={`fixed z-100 flex flex-col pointer-events-none ${positionStyles[position]} ${containerClassName}`}\n style={{ gap: `${gap}px` }}\n >\n <AnimatePresence mode=\"popLayout\">\n {(isTop ? toasts : [...toasts].reverse()).map((t) => (\n <div key={t.id} className=\"pointer-events-auto\">\n <ToastItem toast={t} onDismiss={dismiss} position={position} />\n </div>\n ))}\n </AnimatePresence>\n </div>\n </ToastContext.Provider>\n );\n};\n\n// ============================================================================\n// Standalone toast function (for use without hooks)\n// ============================================================================\n\nlet globalToast: ToastContextValue | null = null;\n\nexport const setGlobalToast = (toastContext: ToastContextValue) => {\n globalToast = toastContext;\n};\n\nexport const toastStandalone = {\n show: (options: ToastOptions | string) => globalToast?.toast(options),\n success: (options: ToastOptions | string) => globalToast?.success(options),\n error: (options: ToastOptions | string) => globalToast?.error(options),\n warning: (options: ToastOptions | string) => globalToast?.warning(options),\n info: (options: ToastOptions | string) => globalToast?.info(options),\n loading: (options: ToastOptions | string) => globalToast?.loading(options),\n promise: <T,>(\n promise: Promise<T>,\n options: {\n loading: string;\n success: string | ((data: T) => string);\n error: string | ((error: unknown) => string);\n },\n ) => globalToast?.promise(promise, options),\n dismiss: (id: string) => globalToast?.dismiss(id),\n dismissAll: () => globalToast?.dismissAll(),\n};\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport default ToastProvider;\nexport { ToastItem };\n"],"mappings":"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"}
|