@zentauri-ui/zentauri-components 1.7.4 → 1.7.6
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 +9 -4
- package/cli/registry.json +3 -0
- package/dist/{chunk-CL55KGDF.js → chunk-3W224B3M.js} +22 -22
- package/dist/chunk-3W224B3M.js.map +1 -0
- package/dist/{chunk-NZDHSIIC.js → chunk-4OCTFG3W.js} +3 -3
- package/dist/chunk-4OCTFG3W.js.map +1 -0
- package/dist/{chunk-4ZKBLVQX.js → chunk-5565GZ4T.js} +19 -19
- package/dist/chunk-5565GZ4T.js.map +1 -0
- package/dist/{chunk-BTJYXKCW.js → chunk-6HPS3ZOP.js} +15 -15
- package/dist/chunk-6HPS3ZOP.js.map +1 -0
- package/dist/chunk-7XCUMSCJ.mjs +80 -0
- package/dist/chunk-7XCUMSCJ.mjs.map +1 -0
- package/dist/{chunk-QAJOE3HJ.js → chunk-BU2MPXPZ.js} +6 -6
- package/dist/chunk-BU2MPXPZ.js.map +1 -0
- package/dist/{chunk-BC6M42HQ.mjs → chunk-CL3VH223.mjs} +21 -21
- package/dist/chunk-CL3VH223.mjs.map +1 -0
- package/dist/{chunk-QXHS3HHZ.mjs → chunk-D3VZKUMH.mjs} +15 -15
- package/dist/chunk-D3VZKUMH.mjs.map +1 -0
- package/dist/chunk-DEZRB6DS.mjs +83 -0
- package/dist/chunk-DEZRB6DS.mjs.map +1 -0
- package/dist/{chunk-EDARAO7X.js → chunk-DFCDLVZA.js} +7 -7
- package/dist/chunk-DFCDLVZA.js.map +1 -0
- package/dist/{chunk-ACGVDY5J.mjs → chunk-EZCYSFML.mjs} +4 -4
- package/dist/chunk-EZCYSFML.mjs.map +1 -0
- package/dist/{chunk-ZYKJC5HH.js → chunk-G66SXATZ.js} +15 -15
- package/dist/chunk-G66SXATZ.js.map +1 -0
- package/dist/{chunk-QBPVJH4P.mjs → chunk-H7WDA6U6.mjs} +5 -5
- package/dist/chunk-H7WDA6U6.mjs.map +1 -0
- package/dist/{chunk-OZMSE44N.mjs → chunk-HLG2YJFZ.mjs} +19 -19
- package/dist/chunk-HLG2YJFZ.mjs.map +1 -0
- package/dist/{chunk-QYLTKBH7.js → chunk-INXWZ4DS.js} +3 -3
- package/dist/chunk-INXWZ4DS.js.map +1 -0
- package/dist/{chunk-QSPXPU72.js → chunk-KTLJEPLF.js} +21 -21
- package/dist/chunk-KTLJEPLF.js.map +1 -0
- package/dist/chunk-LMIL2R4R.js +197 -0
- package/dist/chunk-LMIL2R4R.js.map +1 -0
- package/dist/{chunk-PR4QXFJT.js → chunk-LNYCEPW5.js} +5 -5
- package/dist/chunk-LNYCEPW5.js.map +1 -0
- package/dist/chunk-MEAVYU2Y.mjs +192 -0
- package/dist/chunk-MEAVYU2Y.mjs.map +1 -0
- package/dist/{chunk-P5WLYJ2C.mjs → chunk-NNZXBL7R.mjs} +6 -6
- package/dist/chunk-NNZXBL7R.mjs.map +1 -0
- package/dist/{chunk-HMNIH3KJ.mjs → chunk-ORFI4BCJ.mjs} +3 -3
- package/dist/chunk-ORFI4BCJ.mjs.map +1 -0
- package/dist/{chunk-K7TCW5PJ.js → chunk-PMALYOPA.js} +3 -3
- package/dist/chunk-PMALYOPA.js.map +1 -0
- package/dist/{chunk-WPXQHWPV.js → chunk-PYUZOVLY.js} +4 -4
- package/dist/chunk-PYUZOVLY.js.map +1 -0
- package/dist/{chunk-ITVMSCOJ.mjs → chunk-R2JJTREQ.mjs} +22 -22
- package/dist/chunk-R2JJTREQ.mjs.map +1 -0
- package/dist/chunk-RIHJAEOL.js +107 -0
- package/dist/chunk-RIHJAEOL.js.map +1 -0
- package/dist/{chunk-FHLZH3PB.mjs → chunk-SFRS4EZ5.mjs} +3 -3
- package/dist/chunk-SFRS4EZ5.mjs.map +1 -0
- package/dist/{chunk-KTGV76M3.mjs → chunk-SSJXWD2M.mjs} +3 -3
- package/dist/chunk-SSJXWD2M.mjs.map +1 -0
- package/dist/{chunk-YAO62VH2.js → chunk-UGH23TAH.js} +15 -15
- package/dist/chunk-UGH23TAH.js.map +1 -0
- package/dist/chunk-UPZ5XGUD.mjs +100 -0
- package/dist/chunk-UPZ5XGUD.mjs.map +1 -0
- package/dist/{chunk-4XVNQ7IY.mjs → chunk-UR7TNW45.mjs} +15 -15
- package/dist/chunk-UR7TNW45.mjs.map +1 -0
- package/dist/{chunk-HCGSEPOD.mjs → chunk-UROKWFPX.mjs} +7 -7
- package/dist/chunk-UROKWFPX.mjs.map +1 -0
- package/dist/chunk-V5JTDRV5.mjs +278 -0
- package/dist/chunk-V5JTDRV5.mjs.map +1 -0
- package/dist/{chunk-XRDVD2EN.js → chunk-X3O45MPI.js} +3 -3
- package/dist/{chunk-XRDVD2EN.js.map → chunk-X3O45MPI.js.map} +1 -1
- package/dist/{chunk-KEKMMNL5.mjs → chunk-XXRDLZW7.mjs} +3 -3
- package/dist/chunk-XXRDLZW7.mjs.map +1 -0
- package/dist/chunk-Z4KHAD6Y.js +295 -0
- package/dist/chunk-Z4KHAD6Y.js.map +1 -0
- package/dist/{chunk-NHQ3S4Y6.mjs → chunk-ZIFMIS7D.mjs} +15 -15
- package/dist/chunk-ZIFMIS7D.mjs.map +1 -0
- package/dist/chunk-ZUT7ZUM7.js +84 -0
- package/dist/chunk-ZUT7ZUM7.js.map +1 -0
- package/dist/chunk-ZX2IBIZT.js +92 -0
- package/dist/chunk-ZX2IBIZT.js.map +1 -0
- package/dist/design-system/accordion.d.ts +1 -1
- package/dist/design-system/alert.d.ts +5 -5
- package/dist/design-system/badge.d.ts +3 -3
- package/dist/design-system/card.d.ts +2 -2
- package/dist/design-system/checkbox.d.ts +10 -10
- package/dist/design-system/checkbox.d.ts.map +1 -1
- package/dist/design-system/command.d.ts +1 -1
- package/dist/design-system/command.d.ts.map +1 -1
- package/dist/design-system/context-menu.d.ts +41 -0
- package/dist/design-system/context-menu.d.ts.map +1 -0
- package/dist/design-system/drawer.d.ts +1 -1
- package/dist/design-system/dropdown.d.ts +31 -31
- package/dist/design-system/dropdown.d.ts.map +1 -1
- package/dist/design-system/file-upload.d.ts +15 -15
- package/dist/design-system/file-upload.d.ts.map +1 -1
- package/dist/design-system/index.d.ts +3 -0
- package/dist/design-system/index.d.ts.map +1 -1
- package/dist/design-system/inputs.d.ts +13 -13
- package/dist/design-system/inputs.d.ts.map +1 -1
- package/dist/design-system/modal.d.ts +1 -1
- package/dist/design-system/modal.d.ts.map +1 -1
- package/dist/design-system/pagination.d.ts +25 -25
- package/dist/design-system/popover.d.ts +19 -19
- package/dist/design-system/popover.d.ts.map +1 -1
- package/dist/design-system/radio-group.d.ts +10 -10
- package/dist/design-system/radio-group.d.ts.map +1 -1
- package/dist/design-system/scroll-area.d.ts +33 -0
- package/dist/design-system/scroll-area.d.ts.map +1 -0
- package/dist/design-system/select.d.ts +35 -35
- package/dist/design-system/select.d.ts.map +1 -1
- package/dist/design-system/skeleton.d.ts +13 -13
- package/dist/design-system/skeleton.d.ts.map +1 -1
- package/dist/design-system/slider.d.ts +23 -23
- package/dist/design-system/slider.d.ts.map +1 -1
- package/dist/design-system/stepper.d.ts +22 -22
- package/dist/design-system/table.d.ts +13 -13
- package/dist/design-system/tabs.d.ts +4 -4
- package/dist/design-system/tabs.d.ts.map +1 -1
- package/dist/design-system/timeline.d.ts +56 -0
- package/dist/design-system/timeline.d.ts.map +1 -0
- package/dist/design-system/toast.d.ts +17 -17
- package/dist/design-system/toast.d.ts.map +1 -1
- package/dist/design-system/toggle.d.ts +54 -54
- package/dist/design-system/toggle.d.ts.map +1 -1
- package/dist/design-system/tooltip.d.ts +20 -20
- package/dist/design-system/typography.d.ts +15 -15
- package/dist/ui/accordion/animated.js +7 -7
- package/dist/ui/accordion/animated.mjs +2 -2
- package/dist/ui/accordion.js +9 -9
- package/dist/ui/accordion.mjs +2 -2
- package/dist/ui/alert/animated/alert-animated.d.ts.map +1 -1
- package/dist/ui/alert/animated.js +2 -2
- package/dist/ui/alert/animated.js.map +1 -1
- package/dist/ui/alert/animated.mjs +1 -1
- package/dist/ui/alert/animated.mjs.map +1 -1
- package/dist/ui/alert.js +10 -10
- package/dist/ui/alert.mjs +2 -2
- package/dist/ui/badge/animated.js +2 -2
- package/dist/ui/badge/animated.mjs +1 -1
- package/dist/ui/badge/variants.d.ts +1 -1
- package/dist/ui/badge.js +4 -4
- package/dist/ui/badge.mjs +2 -2
- package/dist/ui/card/animated.js +7 -7
- package/dist/ui/card/animated.mjs +2 -2
- package/dist/ui/card.js +12 -12
- package/dist/ui/card.mjs +2 -2
- package/dist/ui/checkbox/animated.js +4 -4
- package/dist/ui/checkbox/animated.mjs +1 -1
- package/dist/ui/checkbox.js +8 -8
- package/dist/ui/checkbox.mjs +2 -2
- package/dist/ui/command/animated.js +2 -2
- package/dist/ui/command/animated.mjs +1 -1
- package/dist/ui/command.js +15 -15
- package/dist/ui/command.mjs +2 -2
- package/dist/ui/context-menu/context-menu.d.ts +11 -0
- package/dist/ui/context-menu/context-menu.d.ts.map +1 -0
- package/dist/ui/context-menu/index.d.ts +4 -0
- package/dist/ui/context-menu/index.d.ts.map +1 -0
- package/dist/ui/context-menu/types.d.ts +81 -0
- package/dist/ui/context-menu/types.d.ts.map +1 -0
- package/dist/ui/context-menu/variants.d.ts +7 -0
- package/dist/ui/context-menu/variants.d.ts.map +1 -0
- package/dist/ui/context-menu.js +500 -0
- package/dist/ui/context-menu.js.map +1 -0
- package/dist/ui/context-menu.mjs +488 -0
- package/dist/ui/context-menu.mjs.map +1 -0
- package/dist/ui/drawer/animated.js +11 -11
- package/dist/ui/drawer/animated.mjs +2 -2
- package/dist/ui/drawer.js +11 -11
- package/dist/ui/drawer.mjs +1 -1
- package/dist/ui/dropdown.js +9 -89
- package/dist/ui/dropdown.js.map +1 -1
- package/dist/ui/dropdown.mjs +1 -81
- package/dist/ui/dropdown.mjs.map +1 -1
- package/dist/ui/dynamic-stepper.js +47 -47
- package/dist/ui/dynamic-stepper.js.map +1 -1
- package/dist/ui/dynamic-stepper.mjs +47 -47
- package/dist/ui/dynamic-stepper.mjs.map +1 -1
- package/dist/ui/file-upload.js +15 -15
- package/dist/ui/file-upload.js.map +1 -1
- package/dist/ui/file-upload.mjs +15 -15
- package/dist/ui/file-upload.mjs.map +1 -1
- package/dist/ui/inputs/animated.js +3 -3
- package/dist/ui/inputs/animated.mjs +1 -1
- package/dist/ui/inputs.js +4 -4
- package/dist/ui/inputs.mjs +2 -2
- package/dist/ui/modal/animated.js +4 -4
- package/dist/ui/modal/animated.mjs +1 -1
- package/dist/ui/modal.js +12 -12
- package/dist/ui/modal.mjs +2 -2
- package/dist/ui/pagination.js +25 -25
- package/dist/ui/pagination.js.map +1 -1
- package/dist/ui/pagination.mjs +25 -25
- package/dist/ui/pagination.mjs.map +1 -1
- package/dist/ui/popover/animated.js +4 -4
- package/dist/ui/popover/animated.mjs +1 -1
- package/dist/ui/popover.js +7 -7
- package/dist/ui/popover.mjs +1 -1
- package/dist/ui/radio-group/animated.js +7 -7
- package/dist/ui/radio-group/animated.mjs +1 -1
- package/dist/ui/radio-group.js +11 -11
- package/dist/ui/radio-group.mjs +2 -2
- package/dist/ui/scroll-area/index.d.ts +4 -0
- package/dist/ui/scroll-area/index.d.ts.map +1 -0
- package/dist/ui/scroll-area/scroll-area.d.ts +6 -0
- package/dist/ui/scroll-area/scroll-area.d.ts.map +1 -0
- package/dist/ui/scroll-area/types.d.ts +8 -0
- package/dist/ui/scroll-area/types.d.ts.map +1 -0
- package/dist/ui/scroll-area/variants.d.ts +8 -0
- package/dist/ui/scroll-area/variants.d.ts.map +1 -0
- package/dist/ui/scroll-area.js +123 -0
- package/dist/ui/scroll-area.js.map +1 -0
- package/dist/ui/scroll-area.mjs +120 -0
- package/dist/ui/scroll-area.mjs.map +1 -0
- package/dist/ui/search.js +2 -2
- package/dist/ui/search.mjs +1 -1
- package/dist/ui/select.js +35 -35
- package/dist/ui/select.js.map +1 -1
- package/dist/ui/select.mjs +35 -35
- package/dist/ui/select.mjs.map +1 -1
- package/dist/ui/skeleton/animated.js +8 -8
- package/dist/ui/skeleton/animated.mjs +1 -1
- package/dist/ui/skeleton.js +9 -9
- package/dist/ui/skeleton.mjs +1 -1
- package/dist/ui/slider.js +23 -23
- package/dist/ui/slider.js.map +1 -1
- package/dist/ui/slider.mjs +23 -23
- package/dist/ui/slider.mjs.map +1 -1
- package/dist/ui/stepper.js +22 -22
- package/dist/ui/stepper.js.map +1 -1
- package/dist/ui/stepper.mjs +22 -22
- package/dist/ui/stepper.mjs.map +1 -1
- package/dist/ui/table/animated.js +8 -8
- package/dist/ui/table/animated.mjs +2 -2
- package/dist/ui/table.js +14 -14
- package/dist/ui/table.mjs +1 -1
- package/dist/ui/tabs/animated.js +2 -2
- package/dist/ui/tabs/animated.mjs +1 -1
- package/dist/ui/tabs.js +9 -9
- package/dist/ui/tabs.mjs +1 -1
- package/dist/ui/timeline/animated/animations.d.ts +8 -0
- package/dist/ui/timeline/animated/animations.d.ts.map +1 -0
- package/dist/ui/timeline/animated/index.d.ts +6 -0
- package/dist/ui/timeline/animated/index.d.ts.map +1 -0
- package/dist/ui/timeline/animated/timeline-item-animated.d.ts +8 -0
- package/dist/ui/timeline/animated/timeline-item-animated.d.ts.map +1 -0
- package/dist/ui/timeline/animated/types.d.ts +12 -0
- package/dist/ui/timeline/animated/types.d.ts.map +1 -0
- package/dist/ui/timeline/animated.js +94 -0
- package/dist/ui/timeline/animated.js.map +1 -0
- package/dist/ui/timeline/animated.mjs +71 -0
- package/dist/ui/timeline/animated.mjs.map +1 -0
- package/dist/ui/timeline/index.d.ts +4 -0
- package/dist/ui/timeline/index.d.ts.map +1 -0
- package/dist/ui/timeline/timeline-base.d.ts +37 -0
- package/dist/ui/timeline/timeline-base.d.ts.map +1 -0
- package/dist/ui/timeline/timeline.d.ts +8 -0
- package/dist/ui/timeline/timeline.d.ts.map +1 -0
- package/dist/ui/timeline/types.d.ts +38 -0
- package/dist/ui/timeline/types.d.ts.map +1 -0
- package/dist/ui/timeline/variants.d.ts +19 -0
- package/dist/ui/timeline/variants.d.ts.map +1 -0
- package/dist/ui/timeline.js +63 -0
- package/dist/ui/timeline.js.map +1 -0
- package/dist/ui/timeline.mjs +14 -0
- package/dist/ui/timeline.mjs.map +1 -0
- package/dist/ui/toast/animated.js +7 -7
- package/dist/ui/toast/animated.mjs +1 -1
- package/dist/ui/toast.js +12 -12
- package/dist/ui/toast.mjs +1 -1
- package/dist/ui/toggle/animated.js +4 -4
- package/dist/ui/toggle/animated.mjs +1 -1
- package/dist/ui/toggle.js +4 -4
- package/dist/ui/toggle.mjs +2 -2
- package/dist/ui/tooltip/animated.js +3 -3
- package/dist/ui/tooltip/animated.mjs +1 -1
- package/dist/ui/tooltip.js +7 -7
- package/dist/ui/tooltip.mjs +1 -1
- package/dist/ui/typography.js +15 -15
- package/dist/ui/typography.js.map +1 -1
- package/dist/ui/typography.mjs +15 -15
- package/dist/ui/typography.mjs.map +1 -1
- package/package.json +1 -1
- package/src/design-system/accordion.ts +1 -1
- package/src/design-system/alert.ts +5 -5
- package/src/design-system/badge.ts +3 -3
- package/src/design-system/card.ts +2 -2
- package/src/design-system/checkbox.ts +10 -12
- package/src/design-system/command.ts +1 -1
- package/src/design-system/context-menu.ts +44 -0
- package/src/design-system/drawer.ts +1 -1
- package/src/design-system/dropdown.ts +31 -31
- package/src/design-system/dynamic-stepper.ts +47 -47
- package/src/design-system/file-upload.ts +15 -15
- package/src/design-system/index.ts +3 -0
- package/src/design-system/inputs.ts +13 -13
- package/src/design-system/modal.ts +1 -1
- package/src/design-system/pagination.ts +25 -25
- package/src/design-system/popover.ts +19 -23
- package/src/design-system/radio-group.ts +10 -12
- package/src/design-system/scroll-area.ts +47 -0
- package/src/design-system/select.ts +36 -35
- package/src/design-system/skeleton.ts +20 -13
- package/src/design-system/slider.ts +23 -23
- package/src/design-system/stepper.ts +22 -22
- package/src/design-system/table.ts +13 -13
- package/src/design-system/tabs.ts +5 -4
- package/src/design-system/timeline.ts +87 -0
- package/src/design-system/toast.ts +17 -17
- package/src/design-system/toggle.ts +55 -54
- package/src/design-system/tooltip.ts +20 -20
- package/src/design-system/typography.ts +15 -15
- package/src/ui/alert/animated/alert-animated.tsx +1 -0
- package/src/ui/context-menu/context-menu.test.tsx +176 -0
- package/src/ui/context-menu/context-menu.tsx +536 -0
- package/src/ui/context-menu/index.ts +29 -0
- package/src/ui/context-menu/types.ts +110 -0
- package/src/ui/context-menu/variants.ts +26 -0
- package/src/ui/scroll-area/index.ts +5 -0
- package/src/ui/scroll-area/scroll-area.test.tsx +116 -0
- package/src/ui/scroll-area/scroll-area.tsx +62 -0
- package/src/ui/scroll-area/types.ts +11 -0
- package/src/ui/scroll-area/variants.ts +44 -0
- package/src/ui/timeline/animated/animations.ts +16 -0
- package/src/ui/timeline/animated/index.ts +22 -0
- package/src/ui/timeline/animated/timeline-item-animated.tsx +76 -0
- package/src/ui/timeline/animated/types.ts +21 -0
- package/src/ui/timeline/index.ts +30 -0
- package/src/ui/timeline/timeline-base.tsx +232 -0
- package/src/ui/timeline/timeline.test.tsx +262 -0
- package/src/ui/timeline/timeline.tsx +24 -0
- package/src/ui/timeline/types.ts +61 -0
- package/src/ui/timeline/variants.ts +60 -0
- package/dist/chunk-4XVNQ7IY.mjs.map +0 -1
- package/dist/chunk-4ZKBLVQX.js.map +0 -1
- package/dist/chunk-6QQUQLPB.js +0 -107
- package/dist/chunk-6QQUQLPB.js.map +0 -1
- package/dist/chunk-ACGVDY5J.mjs.map +0 -1
- package/dist/chunk-BC6M42HQ.mjs.map +0 -1
- package/dist/chunk-BTJYXKCW.js.map +0 -1
- package/dist/chunk-CL55KGDF.js.map +0 -1
- package/dist/chunk-EDARAO7X.js.map +0 -1
- package/dist/chunk-EN4VLNBF.js +0 -197
- package/dist/chunk-EN4VLNBF.js.map +0 -1
- package/dist/chunk-FHLZH3PB.mjs.map +0 -1
- package/dist/chunk-HCGSEPOD.mjs.map +0 -1
- package/dist/chunk-HMNIH3KJ.mjs.map +0 -1
- package/dist/chunk-ITVMSCOJ.mjs.map +0 -1
- package/dist/chunk-K6IZANTI.mjs +0 -80
- package/dist/chunk-K6IZANTI.mjs.map +0 -1
- package/dist/chunk-K7TCW5PJ.js.map +0 -1
- package/dist/chunk-KEKMMNL5.mjs.map +0 -1
- package/dist/chunk-KTGV76M3.mjs.map +0 -1
- package/dist/chunk-MTTXLC2V.mjs +0 -100
- package/dist/chunk-MTTXLC2V.mjs.map +0 -1
- package/dist/chunk-NHQ3S4Y6.mjs.map +0 -1
- package/dist/chunk-NZDHSIIC.js.map +0 -1
- package/dist/chunk-OZMSE44N.mjs.map +0 -1
- package/dist/chunk-P5WLYJ2C.mjs.map +0 -1
- package/dist/chunk-PHEUJ4EF.js +0 -84
- package/dist/chunk-PHEUJ4EF.js.map +0 -1
- package/dist/chunk-PMWRJ2KS.mjs +0 -192
- package/dist/chunk-PMWRJ2KS.mjs.map +0 -1
- package/dist/chunk-PR4QXFJT.js.map +0 -1
- package/dist/chunk-QAJOE3HJ.js.map +0 -1
- package/dist/chunk-QBPVJH4P.mjs.map +0 -1
- package/dist/chunk-QSPXPU72.js.map +0 -1
- package/dist/chunk-QXHS3HHZ.mjs.map +0 -1
- package/dist/chunk-QYLTKBH7.js.map +0 -1
- package/dist/chunk-WPXQHWPV.js.map +0 -1
- package/dist/chunk-YAO62VH2.js.map +0 -1
- package/dist/chunk-ZYKJC5HH.js.map +0 -1
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkZS5756ZC_js = require('./chunk-ZS5756ZC.js');
|
|
4
|
+
var classVarianceAuthority = require('class-variance-authority');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
|
|
8
|
+
// src/design-system/toggle.ts
|
|
9
|
+
var zuiToggleTrackBase = "relative inline-flex shrink-0 cursor-pointer rounded-full border border-[color:var(--zui-toggle-track-border,#0000001a)] dark:border-[color:var(--zui-toggle-track-border-dark,#ffffff1a)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-toggle-track-ring-focus,oklch(44.6%_0.043_257.281))] dark:focus-visible:ring-[var(--zui-toggle-track-ring-focus-dark,oklch(86.9%_0.022_252.894))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-toggle-track-ring-offset-focus,oklch(98.4%_0.003_247.858))] dark:focus-visible:ring-offset-[var(--zui-toggle-track-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))] data-[state=checked]:border-[color:var(--zui-toggle-track-border-checked,oklch(71.5%_0.143_215.221_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-border-checked-dark,oklch(71.5%_0.143_215.221_/_0.4))] disabled:cursor-not-allowed disabled:opacity-50";
|
|
10
|
+
var zuiToggleTrackSizes = {
|
|
11
|
+
sm: "h-5 w-9",
|
|
12
|
+
md: "h-6 w-11",
|
|
13
|
+
lg: "h-7 w-[3.25rem]"
|
|
14
|
+
};
|
|
15
|
+
var zuiToggleTrackAppearances = {
|
|
16
|
+
default: "data-[state=checked]:bg-[var(--zui-toggle-track-default-bg-checked,oklch(78.9%_0.154_211.53_/_0.7))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-default-bg-checked-dark,oklch(60.9%_0.126_221.723_/_0.9))]",
|
|
17
|
+
success: "data-[state=checked]:border-[color:var(--zui-toggle-track-success-border-checked,oklch(69.6%_0.17_162.48_/_0.7))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-success-border-checked-dark,oklch(69.6%_0.17_162.48_/_0.7))] data-[state=checked]:bg-[var(--zui-toggle-track-success-bg-checked,oklch(76.5%_0.177_163.223_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-success-bg-checked-dark,oklch(59.6%_0.145_163.225_/_0.8))]",
|
|
18
|
+
destructive: "data-[state=checked]:border-[color:var(--zui-toggle-track-destructive-border-checked,oklch(64.5%_0.246_16.439_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-destructive-border-checked-dark,oklch(64.5%_0.246_16.439_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-destructive-bg-checked,oklch(71.2%_0.194_13.428_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-destructive-bg-checked-dark,oklch(58.6%_0.253_17.585_/_0.8))]",
|
|
19
|
+
neutral: "data-[state=checked]:border-[color:var(--zui-toggle-track-neutral-border-checked,oklch(55.4%_0.046_257.417_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-neutral-border-checked-dark,oklch(70.4%_0.04_256.788_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-neutral-bg-checked,oklch(70.4%_0.04_256.788_/_0.9))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-neutral-bg-checked-dark,oklch(44.6%_0.043_257.281_/_0.9))]",
|
|
20
|
+
indigo: "data-[state=checked]:border-[color:var(--zui-toggle-track-indigo-border-checked,oklch(58.5%_0.233_277.117_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-indigo-border-checked-dark,oklch(58.5%_0.233_277.117_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-indigo-bg-checked,oklch(67.3%_0.182_276.935_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-indigo-bg-checked-dark,oklch(51.1%_0.262_276.966_/_0.8))]",
|
|
21
|
+
purple: "data-[state=checked]:border-[color:var(--zui-toggle-track-purple-border-checked,oklch(62.7%_0.265_303.9_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-purple-border-checked-dark,oklch(62.7%_0.265_303.9_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-purple-bg-checked,oklch(71.4%_0.203_305.504_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-purple-bg-checked-dark,oklch(55.8%_0.288_302.321_/_0.8))]",
|
|
22
|
+
pink: "data-[state=checked]:border-[color:var(--zui-toggle-track-pink-border-checked,oklch(65.6%_0.241_354.308_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-pink-border-checked-dark,oklch(65.6%_0.241_354.308_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-pink-bg-checked,oklch(71.8%_0.202_349.761_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-pink-bg-checked-dark,oklch(59.2%_0.249_0.584_/_0.8))]",
|
|
23
|
+
orange: "data-[state=checked]:border-[color:var(--zui-toggle-track-orange-border-checked,oklch(70.5%_0.213_47.604_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-orange-border-checked-dark,oklch(70.5%_0.213_47.604_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-orange-bg-checked,oklch(75%_0.183_55.934_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-orange-bg-checked-dark,oklch(64.6%_0.222_41.116_/_0.8))]",
|
|
24
|
+
yellow: "data-[state=checked]:border-[color:var(--zui-toggle-track-yellow-border-checked,oklch(79.5%_0.184_86.047_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-yellow-border-checked-dark,oklch(79.5%_0.184_86.047_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-yellow-bg-checked,oklch(85.2%_0.199_91.936_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-yellow-bg-checked-dark,oklch(68.1%_0.162_75.834_/_0.8))]",
|
|
25
|
+
green: "data-[state=checked]:border-[color:var(--zui-toggle-track-green-border-checked,oklch(72.3%_0.219_149.579_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-green-border-checked-dark,oklch(72.3%_0.219_149.579_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-green-bg-checked,oklch(79.2%_0.209_151.711_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-green-bg-checked-dark,oklch(62.7%_0.194_149.214_/_0.8))]",
|
|
26
|
+
teal: "data-[state=checked]:border-[color:var(--zui-toggle-track-teal-border-checked,oklch(70.4%_0.14_182.503_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-teal-border-checked-dark,oklch(70.4%_0.14_182.503_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-teal-bg-checked,oklch(77.7%_0.152_181.912_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-teal-bg-checked-dark,oklch(60%_0.118_184.704_/_0.8))]",
|
|
27
|
+
cyan: "data-[state=checked]:border-[color:var(--zui-toggle-track-cyan-border-checked,oklch(71.5%_0.143_215.221_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-cyan-border-checked-dark,oklch(71.5%_0.143_215.221_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-cyan-bg-checked,oklch(78.9%_0.154_211.53_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-cyan-bg-checked-dark,oklch(60.9%_0.126_221.723_/_0.8))]",
|
|
28
|
+
lime: "data-[state=checked]:border-[color:var(--zui-toggle-track-lime-border-checked,oklch(76.8%_0.233_130.85_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-lime-border-checked-dark,oklch(76.8%_0.233_130.85_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-lime-bg-checked,oklch(84.1%_0.238_128.85_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-lime-bg-checked-dark,oklch(64.8%_0.2_131.684_/_0.8))]",
|
|
29
|
+
emerald: "data-[state=checked]:border-[color:var(--zui-toggle-track-emerald-border-checked,oklch(69.6%_0.17_162.48_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-emerald-border-checked-dark,oklch(69.6%_0.17_162.48_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-emerald-bg-checked,oklch(76.5%_0.177_163.223_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-emerald-bg-checked-dark,oklch(59.6%_0.145_163.225_/_0.8))]",
|
|
30
|
+
rose: "data-[state=checked]:border-[color:var(--zui-toggle-track-rose-border-checked,oklch(64.5%_0.246_16.439_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-rose-border-checked-dark,oklch(64.5%_0.246_16.439_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-rose-bg-checked,oklch(71.2%_0.194_13.428_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-rose-bg-checked-dark,oklch(58.6%_0.253_17.585_/_0.8))]",
|
|
31
|
+
slate: "data-[state=checked]:border-[color:var(--zui-toggle-track-slate-border-checked,oklch(55.4%_0.046_257.417_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-slate-border-checked-dark,oklch(70.4%_0.04_256.788_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-slate-bg-checked,oklch(70.4%_0.04_256.788_/_0.9))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-slate-bg-checked-dark,oklch(44.6%_0.043_257.281_/_0.9))]",
|
|
32
|
+
zinc: "data-[state=checked]:border-[color:var(--zui-toggle-track-zinc-border-checked,oklch(70.5%_0.015_286.067_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-zinc-border-checked-dark,oklch(70.5%_0.015_286.067_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-zinc-bg-checked,oklch(44.2%_0.017_285.786_/_0.9))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-zinc-bg-checked-dark,oklch(44.2%_0.017_285.786_/_0.9))]",
|
|
33
|
+
gray: "data-[state=checked]:border-[color:var(--zui-toggle-track-gray-border-checked,oklch(70.7%_0.022_261.325_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-gray-border-checked-dark,oklch(70.7%_0.022_261.325_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-gray-bg-checked,oklch(70.7%_0.022_261.325_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-gray-bg-checked-dark,oklch(44.6%_0.03_256.802_/_0.9))]",
|
|
34
|
+
stone: "bg-[var(--zui-toggle-track-stone-bg,oklch(86.9%_0.005_56.366))] dark:bg-[var(--zui-toggle-track-stone-bg-dark,oklch(86.9%_0.005_56.366))] data-[state=checked]:border-[color:var(--zui-toggle-track-stone-border-checked,oklch(70.9%_0.01_56.259_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-stone-border-checked-dark,oklch(70.9%_0.01_56.259_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-stone-bg-checked,oklch(44.4%_0.011_73.639_/_0.9))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-stone-bg-checked-dark,oklch(44.4%_0.011_73.639_/_0.9))]",
|
|
35
|
+
"gradient-blue": "bg-[var(--zui-toggle-track-gradient-blue-bg,oklch(80.9%_0.105_251.813))] dark:bg-[var(--zui-toggle-track-gradient-blue-bg-dark,oklch(80.9%_0.105_251.813))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-toggle-track-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-toggle-track-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-toggle-track-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))]",
|
|
36
|
+
"gradient-green": "bg-[var(--zui-toggle-track-gradient-green-bg,oklch(87.1%_0.15_154.449))] dark:bg-[var(--zui-toggle-track-gradient-green-bg-dark,oklch(87.1%_0.15_154.449))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-toggle-track-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-toggle-track-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-toggle-track-gradient-green-to-dark,oklch(64.8%_0.2_131.684))]",
|
|
37
|
+
"gradient-red": "bg-[var(--zui-toggle-track-gradient-red-bg,oklch(80.8%_0.114_19.571))] dark:bg-[var(--zui-toggle-track-gradient-red-bg-dark,oklch(80.8%_0.114_19.571))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-toggle-track-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-toggle-track-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-toggle-track-gradient-red-to-dark,oklch(59.2%_0.249_0.584))]",
|
|
38
|
+
"gradient-yellow": "bg-[var(--zui-toggle-track-gradient-yellow-bg,oklch(90.5%_0.182_98.111))] dark:bg-[var(--zui-toggle-track-gradient-yellow-bg-dark,oklch(90.5%_0.182_98.111))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-toggle-track-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-toggle-track-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-toggle-track-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))]",
|
|
39
|
+
"gradient-purple": "bg-[var(--zui-toggle-track-gradient-purple-bg,oklch(82.7%_0.119_306.383))] dark:bg-[var(--zui-toggle-track-gradient-purple-bg-dark,oklch(82.7%_0.119_306.383))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-toggle-track-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-toggle-track-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-toggle-track-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))]",
|
|
40
|
+
"gradient-teal": "bg-[var(--zui-toggle-track-gradient-teal-bg,oklch(85.5%_0.138_181.071))] dark:bg-[var(--zui-toggle-track-gradient-teal-bg-dark,oklch(85.5%_0.138_181.071))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-toggle-track-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-toggle-track-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-toggle-track-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))]",
|
|
41
|
+
"gradient-indigo": "bg-[var(--zui-toggle-track-gradient-indigo-bg,oklch(78.5%_0.115_274.713))] dark:bg-[var(--zui-toggle-track-gradient-indigo-bg-dark,oklch(78.5%_0.115_274.713))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-toggle-track-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-toggle-track-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-toggle-track-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))]",
|
|
42
|
+
"gradient-pink": "bg-[var(--zui-toggle-track-gradient-pink-bg,oklch(82.3%_0.12_346.018))] dark:bg-[var(--zui-toggle-track-gradient-pink-bg-dark,oklch(82.3%_0.12_346.018))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-toggle-track-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-toggle-track-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-toggle-track-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))]",
|
|
43
|
+
"gradient-orange": "bg-[var(--zui-toggle-track-gradient-orange-bg,oklch(83.7%_0.128_66.29))] dark:bg-[var(--zui-toggle-track-gradient-orange-bg-dark,oklch(83.7%_0.128_66.29))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-toggle-track-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-toggle-track-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-toggle-track-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))]"
|
|
44
|
+
};
|
|
45
|
+
var zuiToggleThumbBase = "pointer-events-none block rounded-full border border-[color:var(--zui-toggle-thumb-border,oklch(20.8%_0.042_265.755_/_0.3))] dark:border-[color:var(--zui-toggle-thumb-border-dark,#ffffff1a)] shadow-[var(--zui-toggle-thumb-shadow,0_1px_2px_rgba(15,23,42,0.12))] dark:shadow-[var(--zui-toggle-thumb-shadow-dark,0_1px_2px_rgba(15,23,42,0.35))] ring-0";
|
|
46
|
+
var zuiToggleThumbSizes = {
|
|
47
|
+
sm: "size-4",
|
|
48
|
+
md: "size-5",
|
|
49
|
+
lg: "size-6"
|
|
50
|
+
};
|
|
51
|
+
var zuiToggleThumbColors = {
|
|
52
|
+
default: "bg-[var(--zui-toggle-thumb-colors-default-bg,#ffffff)] dark:bg-[var(--zui-toggle-thumb-colors-default-bg-dark,#ffffff)]",
|
|
53
|
+
success: "bg-[var(--zui-toggle-thumb-colors-success-bg,oklch(69.6%_0.17_162.48))] dark:bg-[var(--zui-toggle-thumb-colors-success-bg-dark,oklch(69.6%_0.17_162.48))]",
|
|
54
|
+
destructive: "bg-[var(--zui-toggle-thumb-colors-destructive-bg,oklch(64.5%_0.246_16.439))] dark:bg-[var(--zui-toggle-thumb-colors-destructive-bg-dark,oklch(64.5%_0.246_16.439))]",
|
|
55
|
+
neutral: "bg-[var(--zui-toggle-thumb-colors-neutral-bg,oklch(55.4%_0.046_257.417))] dark:bg-[var(--zui-toggle-thumb-colors-neutral-bg-dark,oklch(55.4%_0.046_257.417))]",
|
|
56
|
+
indigo: "bg-[var(--zui-toggle-thumb-colors-indigo-bg,oklch(58.5%_0.233_277.117))] dark:bg-[var(--zui-toggle-thumb-colors-indigo-bg-dark,oklch(58.5%_0.233_277.117))]",
|
|
57
|
+
purple: "bg-[var(--zui-toggle-thumb-colors-purple-bg,oklch(62.7%_0.265_303.9))] dark:bg-[var(--zui-toggle-thumb-colors-purple-bg-dark,oklch(62.7%_0.265_303.9))]",
|
|
58
|
+
pink: "bg-[var(--zui-toggle-thumb-colors-pink-bg,oklch(65.6%_0.241_354.308))] dark:bg-[var(--zui-toggle-thumb-colors-pink-bg-dark,oklch(65.6%_0.241_354.308))]",
|
|
59
|
+
orange: "bg-[var(--zui-toggle-thumb-colors-orange-bg,oklch(70.5%_0.213_47.604))] dark:bg-[var(--zui-toggle-thumb-colors-orange-bg-dark,oklch(70.5%_0.213_47.604))]",
|
|
60
|
+
yellow: "bg-[var(--zui-toggle-thumb-colors-yellow-bg,oklch(79.5%_0.184_86.047))] dark:bg-[var(--zui-toggle-thumb-colors-yellow-bg-dark,oklch(79.5%_0.184_86.047))]",
|
|
61
|
+
green: "bg-[var(--zui-toggle-thumb-colors-green-bg,oklch(72.3%_0.219_149.579))] dark:bg-[var(--zui-toggle-thumb-colors-green-bg-dark,oklch(72.3%_0.219_149.579))]",
|
|
62
|
+
teal: "bg-[var(--zui-toggle-thumb-colors-teal-bg,oklch(70.4%_0.14_182.503))] dark:bg-[var(--zui-toggle-thumb-colors-teal-bg-dark,oklch(70.4%_0.14_182.503))]",
|
|
63
|
+
cyan: "bg-[var(--zui-toggle-thumb-colors-cyan-bg,oklch(71.5%_0.143_215.221))] dark:bg-[var(--zui-toggle-thumb-colors-cyan-bg-dark,oklch(71.5%_0.143_215.221))]",
|
|
64
|
+
lime: "bg-[var(--zui-toggle-thumb-colors-lime-bg,oklch(76.8%_0.233_130.85))] dark:bg-[var(--zui-toggle-thumb-colors-lime-bg-dark,oklch(76.8%_0.233_130.85))]",
|
|
65
|
+
emerald: "bg-[var(--zui-toggle-thumb-colors-emerald-bg,oklch(69.6%_0.17_162.48))] dark:bg-[var(--zui-toggle-thumb-colors-emerald-bg-dark,oklch(69.6%_0.17_162.48))]",
|
|
66
|
+
rose: "bg-[var(--zui-toggle-thumb-colors-rose-bg,oklch(64.5%_0.246_16.439))] dark:bg-[var(--zui-toggle-thumb-colors-rose-bg-dark,oklch(64.5%_0.246_16.439))]",
|
|
67
|
+
slate: "bg-[var(--zui-toggle-thumb-colors-slate-bg,oklch(55.4%_0.046_257.417))] dark:bg-[var(--zui-toggle-thumb-colors-slate-bg-dark,oklch(55.4%_0.046_257.417))]",
|
|
68
|
+
zinc: "bg-[var(--zui-toggle-thumb-colors-zinc-bg,oklch(55.2%_0.016_285.938))] dark:bg-[var(--zui-toggle-thumb-colors-zinc-bg-dark,oklch(55.2%_0.016_285.938))]",
|
|
69
|
+
gray: "bg-[var(--zui-toggle-thumb-colors-gray-bg,oklch(55.1%_0.027_264.364))] dark:bg-[var(--zui-toggle-thumb-colors-gray-bg-dark,oklch(55.1%_0.027_264.364))]",
|
|
70
|
+
stone: "bg-[var(--zui-toggle-thumb-colors-stone-bg,oklch(55.3%_0.013_58.071))] dark:bg-[var(--zui-toggle-thumb-colors-stone-bg-dark,oklch(55.3%_0.013_58.071))]",
|
|
71
|
+
"gradient-blue": "bg-[var(--zui-toggle-thumb-colors-gradient-blue-bg,oklch(62.3%_0.214_259.815))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-blue-bg-dark,oklch(62.3%_0.214_259.815))]",
|
|
72
|
+
"gradient-green": "bg-[var(--zui-toggle-thumb-colors-gradient-green-bg,oklch(72.3%_0.219_149.579))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-green-bg-dark,oklch(72.3%_0.219_149.579))]",
|
|
73
|
+
"gradient-red": "bg-[var(--zui-toggle-thumb-colors-gradient-red-bg,oklch(63.7%_0.237_25.331))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-red-bg-dark,oklch(63.7%_0.237_25.331))]",
|
|
74
|
+
"gradient-yellow": "bg-[var(--zui-toggle-thumb-colors-gradient-yellow-bg,oklch(79.5%_0.184_86.047))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-yellow-bg-dark,oklch(79.5%_0.184_86.047))]",
|
|
75
|
+
"gradient-purple": "bg-[var(--zui-toggle-thumb-colors-gradient-purple-bg,oklch(62.7%_0.265_303.9))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-purple-bg-dark,oklch(62.7%_0.265_303.9))]",
|
|
76
|
+
"gradient-teal": "bg-[var(--zui-toggle-thumb-colors-gradient-teal-bg,oklch(70.4%_0.14_182.503))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-teal-bg-dark,oklch(70.4%_0.14_182.503))]",
|
|
77
|
+
"gradient-indigo": "bg-[var(--zui-toggle-thumb-colors-gradient-indigo-bg,oklch(58.5%_0.233_277.117))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-indigo-bg-dark,oklch(58.5%_0.233_277.117))]",
|
|
78
|
+
"gradient-pink": "bg-[var(--zui-toggle-thumb-colors-gradient-pink-bg,oklch(65.6%_0.241_354.308))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-pink-bg-dark,oklch(65.6%_0.241_354.308))]",
|
|
79
|
+
"gradient-orange": "bg-[var(--zui-toggle-thumb-colors-gradient-orange-bg,oklch(70.5%_0.213_47.604))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-orange-bg-dark,oklch(70.5%_0.213_47.604))]"
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
// src/ui/toggle/variants.ts
|
|
83
|
+
var toggleTrackVariants = classVarianceAuthority.cva(zuiToggleTrackBase, {
|
|
84
|
+
variants: {
|
|
85
|
+
size: zuiToggleTrackSizes,
|
|
86
|
+
appearance: zuiToggleTrackAppearances
|
|
87
|
+
},
|
|
88
|
+
defaultVariants: {
|
|
89
|
+
size: "md",
|
|
90
|
+
appearance: "default"
|
|
91
|
+
}
|
|
92
|
+
});
|
|
93
|
+
var toggleThumbVariants = classVarianceAuthority.cva(zuiToggleThumbBase, {
|
|
94
|
+
variants: {
|
|
95
|
+
size: zuiToggleThumbSizes,
|
|
96
|
+
thumbColor: zuiToggleThumbColors
|
|
97
|
+
},
|
|
98
|
+
defaultVariants: {
|
|
99
|
+
size: "md",
|
|
100
|
+
thumbColor: "default"
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
function hasToggleLabelChildren(node) {
|
|
104
|
+
if (node === void 0 || node === null) {
|
|
105
|
+
return false;
|
|
106
|
+
}
|
|
107
|
+
if (typeof node === "boolean") {
|
|
108
|
+
return false;
|
|
109
|
+
}
|
|
110
|
+
if (typeof node === "string") {
|
|
111
|
+
return node.trim().length > 0;
|
|
112
|
+
}
|
|
113
|
+
if (typeof node === "number") {
|
|
114
|
+
return true;
|
|
115
|
+
}
|
|
116
|
+
if (Array.isArray(node)) {
|
|
117
|
+
return node.some(hasToggleLabelChildren);
|
|
118
|
+
}
|
|
119
|
+
return true;
|
|
120
|
+
}
|
|
121
|
+
function ToggleBase(props) {
|
|
122
|
+
const {
|
|
123
|
+
className,
|
|
124
|
+
size,
|
|
125
|
+
appearance,
|
|
126
|
+
checked,
|
|
127
|
+
defaultChecked = false,
|
|
128
|
+
onCheckedChange,
|
|
129
|
+
disabled,
|
|
130
|
+
ref,
|
|
131
|
+
"aria-label": ariaLabelProp,
|
|
132
|
+
children,
|
|
133
|
+
thumbColor,
|
|
134
|
+
...rest
|
|
135
|
+
} = props;
|
|
136
|
+
const toggleLabelId = react.useId();
|
|
137
|
+
const isControlled = checked !== void 0;
|
|
138
|
+
const [uncontrolled, setUncontrolled] = react.useState(defaultChecked);
|
|
139
|
+
const resolved = isControlled ? Boolean(checked) : uncontrolled;
|
|
140
|
+
const setChecked = react.useCallback(
|
|
141
|
+
(next) => {
|
|
142
|
+
if (!isControlled) {
|
|
143
|
+
setUncontrolled(next);
|
|
144
|
+
}
|
|
145
|
+
onCheckedChange?.(next);
|
|
146
|
+
},
|
|
147
|
+
[isControlled, onCheckedChange]
|
|
148
|
+
);
|
|
149
|
+
const thumbShiftPx = size === "sm" ? 16 : size === "lg" ? 24 : 20;
|
|
150
|
+
const labeledByChildren = hasToggleLabelChildren(children);
|
|
151
|
+
const labeling = labeledByChildren ? {
|
|
152
|
+
"aria-labelledby": toggleLabelId
|
|
153
|
+
} : {
|
|
154
|
+
"aria-label": ariaLabelProp ?? "Toggle"
|
|
155
|
+
};
|
|
156
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
157
|
+
"button",
|
|
158
|
+
{
|
|
159
|
+
ref,
|
|
160
|
+
type: "button",
|
|
161
|
+
role: "switch",
|
|
162
|
+
"data-slot": "toggle",
|
|
163
|
+
"aria-checked": resolved,
|
|
164
|
+
"data-state": resolved ? "checked" : "unchecked",
|
|
165
|
+
disabled,
|
|
166
|
+
className: chunkZS5756ZC_js.cn(toggleTrackVariants({ size, appearance }), className),
|
|
167
|
+
...labeling,
|
|
168
|
+
onClick: () => {
|
|
169
|
+
if (!disabled) {
|
|
170
|
+
setChecked(!resolved);
|
|
171
|
+
}
|
|
172
|
+
},
|
|
173
|
+
...rest,
|
|
174
|
+
children: [
|
|
175
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", id: labeledByChildren ? toggleLabelId : void 0, children }),
|
|
176
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
177
|
+
"span",
|
|
178
|
+
{
|
|
179
|
+
className: chunkZS5756ZC_js.cn(
|
|
180
|
+
toggleThumbVariants({ size, thumbColor }),
|
|
181
|
+
"absolute top-1/2 -translate-y-1/2 transition-[transform] duration-200 ease-out"
|
|
182
|
+
),
|
|
183
|
+
style: { transform: `translateX(${resolved ? thumbShiftPx : 0}px)` }
|
|
184
|
+
}
|
|
185
|
+
)
|
|
186
|
+
]
|
|
187
|
+
}
|
|
188
|
+
);
|
|
189
|
+
}
|
|
190
|
+
ToggleBase.displayName = "Toggle";
|
|
191
|
+
|
|
192
|
+
exports.ToggleBase = ToggleBase;
|
|
193
|
+
exports.hasToggleLabelChildren = hasToggleLabelChildren;
|
|
194
|
+
exports.toggleThumbVariants = toggleThumbVariants;
|
|
195
|
+
exports.toggleTrackVariants = toggleTrackVariants;
|
|
196
|
+
//# sourceMappingURL=chunk-LMIL2R4R.js.map
|
|
197
|
+
//# sourceMappingURL=chunk-LMIL2R4R.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/design-system/toggle.ts","../src/ui/toggle/variants.ts","../src/ui/toggle/toggle-base.tsx"],"names":["cva","useId","useState","useCallback","jsxs","cn","jsx"],"mappings":";;;;;;;;AAAO,IAAM,kBAAA,GACX,w6BAAA;AAEK,IAAM,mBAAA,GAAsB;AAAA,EACjC,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,UAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,IAAM,yBAAA,GAA4B;AAAA,EACvC,OAAA,EACE,sNAAA;AAAA,EACF,OAAA,EACE,qcAAA;AAAA,EACF,WAAA,EACE,qdAAA;AAAA,EACF,OAAA,EACE,ucAAA;AAAA,EACF,MAAA,EACE,qcAAA;AAAA,EACF,MAAA,EACE,icAAA;AAAA,EACF,IAAA,EAAM,2bAAA;AAAA,EACN,MAAA,EACE,+bAAA;AAAA,EACF,MAAA,EACE,icAAA;AAAA,EACF,KAAA,EACE,icAAA;AAAA,EACF,IAAA,EAAM,ybAAA;AAAA,EACN,IAAA,EAAM,4bAAA;AAAA,EACN,IAAA,EAAM,wbAAA;AAAA,EACN,OAAA,EACE,qcAAA;AAAA,EACF,IAAA,EAAM,ybAAA;AAAA,EACN,KAAA,EACE,+bAAA;AAAA,EACF,IAAA,EAAM,6bAAA;AAAA,EACN,IAAA,EAAM,4bAAA;AAAA,EACN,KAAA,EACE,qkBAAA;AAAA,EACF,eAAA,EACE,igBAAA;AAAA,EACF,gBAAA,EACE,mgBAAA;AAAA,EACF,cAAA,EACE,mfAAA;AAAA,EACF,iBAAA,EACE,qgBAAA;AAAA,EACF,iBAAA,EACE,ygBAAA;AAAA,EACF,eAAA,EACE,6fAAA;AAAA,EACF,iBAAA,EACE,6gBAAA;AAAA,EACF,eAAA,EACE,yfAAA;AAAA,EACF,iBAAA,EACE;AACJ,CAAA;AAEO,IAAM,kBAAA,GACX,6VAAA;AAEK,IAAM,mBAAA,GAAsB;AAAA,EACjC,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,IAAM,oBAAA,GAAuB;AAAA,EAClC,OAAA,EACE,yHAAA;AAAA,EACF,OAAA,EACE,2JAAA;AAAA,EACF,WAAA,EACE,qKAAA;AAAA,EACF,OAAA,EACE,+JAAA;AAAA,EACF,MAAA,EACE,6JAAA;AAAA,EACF,MAAA,EACE,yJAAA;AAAA,EACF,IAAA,EAAM,yJAAA;AAAA,EACN,MAAA,EACE,2JAAA;AAAA,EACF,MAAA,EACE,2JAAA;AAAA,EACF,KAAA,EACE,2JAAA;AAAA,EACF,IAAA,EAAM,uJAAA;AAAA,EACN,IAAA,EAAM,yJAAA;AAAA,EACN,IAAA,EAAM,uJAAA;AAAA,EACN,OAAA,EACE,2JAAA;AAAA,EACF,IAAA,EAAM,uJAAA;AAAA,EACN,KAAA,EACE,2JAAA;AAAA,EACF,IAAA,EAAM,yJAAA;AAAA,EACN,IAAA,EAAM,yJAAA;AAAA,EACN,KAAA,EACE,yJAAA;AAAA,EACF,eAAA,EACE,2KAAA;AAAA,EACF,gBAAA,EACE,6KAAA;AAAA,EACF,cAAA,EACE,uKAAA;AAAA,EACF,iBAAA,EACE,6KAAA;AAAA,EACF,iBAAA,EACE,2KAAA;AAAA,EACF,eAAA,EACE,yKAAA;AAAA,EACF,iBAAA,EACE,+KAAA;AAAA,EACF,eAAA,EACE,2KAAA;AAAA,EACF,iBAAA,EACE;AACJ,CAAA;;;AC7GO,IAAM,mBAAA,GAAsBA,2BAAI,kBAAA,EAAoB;AAAA,EACzD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,mBAAA;AAAA,IACN,UAAA,EAAY;AAAA,GACd;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,IAAA;AAAA,IACN,UAAA,EAAY;AAAA;AAEhB,CAAC;AAEM,IAAM,mBAAA,GAAsBA,2BAAI,kBAAA,EAAoB;AAAA,EACzD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,mBAAA;AAAA,IACN,UAAA,EAAY;AAAA,GACd;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,IAAA;AAAA,IACN,UAAA,EAAY;AAAA;AAEhB,CAAC;ACtBM,SAAS,uBAAuB,IAAA,EAA0B;AAC/D,EAAA,IAAI,IAAA,KAAS,MAAA,IAAa,IAAA,KAAS,IAAA,EAAM;AACvC,IAAA,OAAO,KAAA;AAAA,EACT;AACA,EAAA,IAAI,OAAO,SAAS,SAAA,EAAW;AAC7B,IAAA,OAAO,KAAA;AAAA,EACT;AACA,EAAA,IAAI,OAAO,SAAS,QAAA,EAAU;AAC5B,IAAA,OAAO,IAAA,CAAK,IAAA,EAAK,CAAE,MAAA,GAAS,CAAA;AAAA,EAC9B;AACA,EAAA,IAAI,OAAO,SAAS,QAAA,EAAU;AAC5B,IAAA,OAAO,IAAA;AAAA,EACT;AACA,EAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,IAAI,CAAA,EAAG;AACvB,IAAA,OAAO,IAAA,CAAK,KAAK,sBAAsB,CAAA;AAAA,EACzC;AACA,EAAA,OAAO,IAAA;AACT;AAEO,SAAS,WAAW,KAAA,EAAoB;AAC7C,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,cAAA,GAAiB,KAAA;AAAA,IACjB,eAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAA;AAAA,IACA,YAAA,EAAc,aAAA;AAAA,IACd,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,gBAAgBC,WAAA,EAAM;AAC5B,EAAA,MAAM,eAAe,OAAA,KAAY,MAAA;AACjC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,eAAS,cAAc,CAAA;AAC/D,EAAA,MAAM,QAAA,GAAW,YAAA,GAAe,OAAA,CAAQ,OAAO,CAAA,GAAI,YAAA;AAEnD,EAAA,MAAM,UAAA,GAAaC,iBAAA;AAAA,IACjB,CAAC,IAAA,KAAkB;AACjB,MAAA,IAAI,CAAC,YAAA,EAAc;AACjB,QAAA,eAAA,CAAgB,IAAI,CAAA;AAAA,MACtB;AACA,MAAA,eAAA,GAAkB,IAAI,CAAA;AAAA,IACxB,CAAA;AAAA,IACA,CAAC,cAAc,eAAe;AAAA,GAChC;AAEA,EAAA,MAAM,eAAe,IAAA,KAAS,IAAA,GAAO,EAAA,GAAK,IAAA,KAAS,OAAO,EAAA,GAAK,EAAA;AAC/D,EAAA,MAAM,iBAAA,GAAoB,uBAAuB,QAAQ,CAAA;AACzD,EAAA,MAAM,WAAW,iBAAA,GACb;AAAA,IACE,iBAAA,EAAmB;AAAA,GACrB,GACA;AAAA,IACE,cAAc,aAAA,IAAiB;AAAA,GACjC;AAEJ,EAAA,uBACEC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MACL,IAAA,EAAK,QAAA;AAAA,MACL,WAAA,EAAU,QAAA;AAAA,MACV,cAAA,EAAc,QAAA;AAAA,MACd,YAAA,EAAY,WAAW,SAAA,GAAY,WAAA;AAAA,MACnC,QAAA;AAAA,MACA,SAAA,EAAWC,oBAAG,mBAAA,CAAoB,EAAE,MAAM,UAAA,EAAY,GAAG,SAAS,CAAA;AAAA,MACjE,GAAG,QAAA;AAAA,MACJ,SAAS,MAAM;AACb,QAAA,IAAI,CAAC,QAAA,EAAU;AACb,UAAA,UAAA,CAAW,CAAC,QAAQ,CAAA;AAAA,QACtB;AAAA,MACF,CAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,UAAK,SAAA,EAAU,SAAA,EAAU,IAAI,iBAAA,GAAoB,aAAA,GAAgB,QAAY,QAAA,EAAS,CAAA;AAAA,wBACvFA,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWD,mBAAA;AAAA,cACT,mBAAA,CAAoB,EAAE,IAAA,EAAM,UAAA,EAAY,CAAA;AAAA,cACxC;AAAA,aACF;AAAA,YACA,OAAO,EAAE,SAAA,EAAW,cAAc,QAAA,GAAW,YAAA,GAAe,CAAC,CAAA,GAAA,CAAA;AAAM;AAAA;AACrE;AAAA;AAAA,GACF;AAEJ;AAEA,UAAA,CAAW,WAAA,GAAc,QAAA","file":"chunk-LMIL2R4R.js","sourcesContent":["export const zuiToggleTrackBase =\n \"relative inline-flex shrink-0 cursor-pointer rounded-full border border-[color:var(--zui-toggle-track-border,#0000001a)] dark:border-[color:var(--zui-toggle-track-border-dark,#ffffff1a)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-toggle-track-ring-focus,oklch(44.6%_0.043_257.281))] dark:focus-visible:ring-[var(--zui-toggle-track-ring-focus-dark,oklch(86.9%_0.022_252.894))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-toggle-track-ring-offset-focus,oklch(98.4%_0.003_247.858))] dark:focus-visible:ring-offset-[var(--zui-toggle-track-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))] data-[state=checked]:border-[color:var(--zui-toggle-track-border-checked,oklch(71.5%_0.143_215.221_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-border-checked-dark,oklch(71.5%_0.143_215.221_/_0.4))] disabled:cursor-not-allowed disabled:opacity-50\";\n\nexport const zuiToggleTrackSizes = {\n sm: \"h-5 w-9\",\n md: \"h-6 w-11\",\n lg: \"h-7 w-[3.25rem]\",\n} as const;\n\nexport const zuiToggleTrackAppearances = {\n default:\n \"data-[state=checked]:bg-[var(--zui-toggle-track-default-bg-checked,oklch(78.9%_0.154_211.53_/_0.7))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-default-bg-checked-dark,oklch(60.9%_0.126_221.723_/_0.9))]\",\n success:\n \"data-[state=checked]:border-[color:var(--zui-toggle-track-success-border-checked,oklch(69.6%_0.17_162.48_/_0.7))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-success-border-checked-dark,oklch(69.6%_0.17_162.48_/_0.7))] data-[state=checked]:bg-[var(--zui-toggle-track-success-bg-checked,oklch(76.5%_0.177_163.223_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-success-bg-checked-dark,oklch(59.6%_0.145_163.225_/_0.8))]\",\n destructive:\n \"data-[state=checked]:border-[color:var(--zui-toggle-track-destructive-border-checked,oklch(64.5%_0.246_16.439_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-destructive-border-checked-dark,oklch(64.5%_0.246_16.439_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-destructive-bg-checked,oklch(71.2%_0.194_13.428_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-destructive-bg-checked-dark,oklch(58.6%_0.253_17.585_/_0.8))]\",\n neutral:\n \"data-[state=checked]:border-[color:var(--zui-toggle-track-neutral-border-checked,oklch(55.4%_0.046_257.417_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-neutral-border-checked-dark,oklch(70.4%_0.04_256.788_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-neutral-bg-checked,oklch(70.4%_0.04_256.788_/_0.9))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-neutral-bg-checked-dark,oklch(44.6%_0.043_257.281_/_0.9))]\",\n indigo:\n \"data-[state=checked]:border-[color:var(--zui-toggle-track-indigo-border-checked,oklch(58.5%_0.233_277.117_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-indigo-border-checked-dark,oklch(58.5%_0.233_277.117_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-indigo-bg-checked,oklch(67.3%_0.182_276.935_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-indigo-bg-checked-dark,oklch(51.1%_0.262_276.966_/_0.8))]\",\n purple:\n \"data-[state=checked]:border-[color:var(--zui-toggle-track-purple-border-checked,oklch(62.7%_0.265_303.9_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-purple-border-checked-dark,oklch(62.7%_0.265_303.9_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-purple-bg-checked,oklch(71.4%_0.203_305.504_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-purple-bg-checked-dark,oklch(55.8%_0.288_302.321_/_0.8))]\",\n pink: \"data-[state=checked]:border-[color:var(--zui-toggle-track-pink-border-checked,oklch(65.6%_0.241_354.308_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-pink-border-checked-dark,oklch(65.6%_0.241_354.308_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-pink-bg-checked,oklch(71.8%_0.202_349.761_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-pink-bg-checked-dark,oklch(59.2%_0.249_0.584_/_0.8))]\",\n orange:\n \"data-[state=checked]:border-[color:var(--zui-toggle-track-orange-border-checked,oklch(70.5%_0.213_47.604_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-orange-border-checked-dark,oklch(70.5%_0.213_47.604_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-orange-bg-checked,oklch(75%_0.183_55.934_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-orange-bg-checked-dark,oklch(64.6%_0.222_41.116_/_0.8))]\",\n yellow:\n \"data-[state=checked]:border-[color:var(--zui-toggle-track-yellow-border-checked,oklch(79.5%_0.184_86.047_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-yellow-border-checked-dark,oklch(79.5%_0.184_86.047_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-yellow-bg-checked,oklch(85.2%_0.199_91.936_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-yellow-bg-checked-dark,oklch(68.1%_0.162_75.834_/_0.8))]\",\n green:\n \"data-[state=checked]:border-[color:var(--zui-toggle-track-green-border-checked,oklch(72.3%_0.219_149.579_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-green-border-checked-dark,oklch(72.3%_0.219_149.579_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-green-bg-checked,oklch(79.2%_0.209_151.711_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-green-bg-checked-dark,oklch(62.7%_0.194_149.214_/_0.8))]\",\n teal: \"data-[state=checked]:border-[color:var(--zui-toggle-track-teal-border-checked,oklch(70.4%_0.14_182.503_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-teal-border-checked-dark,oklch(70.4%_0.14_182.503_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-teal-bg-checked,oklch(77.7%_0.152_181.912_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-teal-bg-checked-dark,oklch(60%_0.118_184.704_/_0.8))]\",\n cyan: \"data-[state=checked]:border-[color:var(--zui-toggle-track-cyan-border-checked,oklch(71.5%_0.143_215.221_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-cyan-border-checked-dark,oklch(71.5%_0.143_215.221_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-cyan-bg-checked,oklch(78.9%_0.154_211.53_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-cyan-bg-checked-dark,oklch(60.9%_0.126_221.723_/_0.8))]\",\n lime: \"data-[state=checked]:border-[color:var(--zui-toggle-track-lime-border-checked,oklch(76.8%_0.233_130.85_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-lime-border-checked-dark,oklch(76.8%_0.233_130.85_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-lime-bg-checked,oklch(84.1%_0.238_128.85_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-lime-bg-checked-dark,oklch(64.8%_0.2_131.684_/_0.8))]\",\n emerald:\n \"data-[state=checked]:border-[color:var(--zui-toggle-track-emerald-border-checked,oklch(69.6%_0.17_162.48_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-emerald-border-checked-dark,oklch(69.6%_0.17_162.48_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-emerald-bg-checked,oklch(76.5%_0.177_163.223_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-emerald-bg-checked-dark,oklch(59.6%_0.145_163.225_/_0.8))]\",\n rose: \"data-[state=checked]:border-[color:var(--zui-toggle-track-rose-border-checked,oklch(64.5%_0.246_16.439_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-rose-border-checked-dark,oklch(64.5%_0.246_16.439_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-rose-bg-checked,oklch(71.2%_0.194_13.428_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-rose-bg-checked-dark,oklch(58.6%_0.253_17.585_/_0.8))]\",\n slate:\n \"data-[state=checked]:border-[color:var(--zui-toggle-track-slate-border-checked,oklch(55.4%_0.046_257.417_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-slate-border-checked-dark,oklch(70.4%_0.04_256.788_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-slate-bg-checked,oklch(70.4%_0.04_256.788_/_0.9))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-slate-bg-checked-dark,oklch(44.6%_0.043_257.281_/_0.9))]\",\n zinc: \"data-[state=checked]:border-[color:var(--zui-toggle-track-zinc-border-checked,oklch(70.5%_0.015_286.067_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-zinc-border-checked-dark,oklch(70.5%_0.015_286.067_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-zinc-bg-checked,oklch(44.2%_0.017_285.786_/_0.9))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-zinc-bg-checked-dark,oklch(44.2%_0.017_285.786_/_0.9))]\",\n gray: \"data-[state=checked]:border-[color:var(--zui-toggle-track-gray-border-checked,oklch(70.7%_0.022_261.325_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-gray-border-checked-dark,oklch(70.7%_0.022_261.325_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-gray-bg-checked,oklch(70.7%_0.022_261.325_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-gray-bg-checked-dark,oklch(44.6%_0.03_256.802_/_0.9))]\",\n stone:\n \"bg-[var(--zui-toggle-track-stone-bg,oklch(86.9%_0.005_56.366))] dark:bg-[var(--zui-toggle-track-stone-bg-dark,oklch(86.9%_0.005_56.366))] data-[state=checked]:border-[color:var(--zui-toggle-track-stone-border-checked,oklch(70.9%_0.01_56.259_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-stone-border-checked-dark,oklch(70.9%_0.01_56.259_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-stone-bg-checked,oklch(44.4%_0.011_73.639_/_0.9))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-stone-bg-checked-dark,oklch(44.4%_0.011_73.639_/_0.9))]\",\n \"gradient-blue\":\n \"bg-[var(--zui-toggle-track-gradient-blue-bg,oklch(80.9%_0.105_251.813))] dark:bg-[var(--zui-toggle-track-gradient-blue-bg-dark,oklch(80.9%_0.105_251.813))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-toggle-track-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-toggle-track-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-toggle-track-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))]\",\n \"gradient-green\":\n \"bg-[var(--zui-toggle-track-gradient-green-bg,oklch(87.1%_0.15_154.449))] dark:bg-[var(--zui-toggle-track-gradient-green-bg-dark,oklch(87.1%_0.15_154.449))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-toggle-track-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-toggle-track-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-toggle-track-gradient-green-to-dark,oklch(64.8%_0.2_131.684))]\",\n \"gradient-red\":\n \"bg-[var(--zui-toggle-track-gradient-red-bg,oklch(80.8%_0.114_19.571))] dark:bg-[var(--zui-toggle-track-gradient-red-bg-dark,oklch(80.8%_0.114_19.571))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-toggle-track-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-toggle-track-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-toggle-track-gradient-red-to-dark,oklch(59.2%_0.249_0.584))]\",\n \"gradient-yellow\":\n \"bg-[var(--zui-toggle-track-gradient-yellow-bg,oklch(90.5%_0.182_98.111))] dark:bg-[var(--zui-toggle-track-gradient-yellow-bg-dark,oklch(90.5%_0.182_98.111))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-toggle-track-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-toggle-track-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-toggle-track-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))]\",\n \"gradient-purple\":\n \"bg-[var(--zui-toggle-track-gradient-purple-bg,oklch(82.7%_0.119_306.383))] dark:bg-[var(--zui-toggle-track-gradient-purple-bg-dark,oklch(82.7%_0.119_306.383))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-toggle-track-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-toggle-track-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-toggle-track-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))]\",\n \"gradient-teal\":\n \"bg-[var(--zui-toggle-track-gradient-teal-bg,oklch(85.5%_0.138_181.071))] dark:bg-[var(--zui-toggle-track-gradient-teal-bg-dark,oklch(85.5%_0.138_181.071))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-toggle-track-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-toggle-track-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-toggle-track-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))]\",\n \"gradient-indigo\":\n \"bg-[var(--zui-toggle-track-gradient-indigo-bg,oklch(78.5%_0.115_274.713))] dark:bg-[var(--zui-toggle-track-gradient-indigo-bg-dark,oklch(78.5%_0.115_274.713))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-toggle-track-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-toggle-track-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-toggle-track-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))]\",\n \"gradient-pink\":\n \"bg-[var(--zui-toggle-track-gradient-pink-bg,oklch(82.3%_0.12_346.018))] dark:bg-[var(--zui-toggle-track-gradient-pink-bg-dark,oklch(82.3%_0.12_346.018))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-toggle-track-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-toggle-track-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-toggle-track-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))]\",\n \"gradient-orange\":\n \"bg-[var(--zui-toggle-track-gradient-orange-bg,oklch(83.7%_0.128_66.29))] dark:bg-[var(--zui-toggle-track-gradient-orange-bg-dark,oklch(83.7%_0.128_66.29))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-toggle-track-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-toggle-track-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-toggle-track-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))]\",\n} as const;\n\nexport const zuiToggleThumbBase =\n \"pointer-events-none block rounded-full border border-[color:var(--zui-toggle-thumb-border,oklch(20.8%_0.042_265.755_/_0.3))] dark:border-[color:var(--zui-toggle-thumb-border-dark,#ffffff1a)] shadow-[var(--zui-toggle-thumb-shadow,0_1px_2px_rgba(15,23,42,0.12))] dark:shadow-[var(--zui-toggle-thumb-shadow-dark,0_1px_2px_rgba(15,23,42,0.35))] ring-0\";\n\nexport const zuiToggleThumbSizes = {\n sm: \"size-4\",\n md: \"size-5\",\n lg: \"size-6\",\n} as const;\n\nexport const zuiToggleThumbColors = {\n default:\n \"bg-[var(--zui-toggle-thumb-colors-default-bg,#ffffff)] dark:bg-[var(--zui-toggle-thumb-colors-default-bg-dark,#ffffff)]\",\n success:\n \"bg-[var(--zui-toggle-thumb-colors-success-bg,oklch(69.6%_0.17_162.48))] dark:bg-[var(--zui-toggle-thumb-colors-success-bg-dark,oklch(69.6%_0.17_162.48))]\",\n destructive:\n \"bg-[var(--zui-toggle-thumb-colors-destructive-bg,oklch(64.5%_0.246_16.439))] dark:bg-[var(--zui-toggle-thumb-colors-destructive-bg-dark,oklch(64.5%_0.246_16.439))]\",\n neutral:\n \"bg-[var(--zui-toggle-thumb-colors-neutral-bg,oklch(55.4%_0.046_257.417))] dark:bg-[var(--zui-toggle-thumb-colors-neutral-bg-dark,oklch(55.4%_0.046_257.417))]\",\n indigo:\n \"bg-[var(--zui-toggle-thumb-colors-indigo-bg,oklch(58.5%_0.233_277.117))] dark:bg-[var(--zui-toggle-thumb-colors-indigo-bg-dark,oklch(58.5%_0.233_277.117))]\",\n purple:\n \"bg-[var(--zui-toggle-thumb-colors-purple-bg,oklch(62.7%_0.265_303.9))] dark:bg-[var(--zui-toggle-thumb-colors-purple-bg-dark,oklch(62.7%_0.265_303.9))]\",\n pink: \"bg-[var(--zui-toggle-thumb-colors-pink-bg,oklch(65.6%_0.241_354.308))] dark:bg-[var(--zui-toggle-thumb-colors-pink-bg-dark,oklch(65.6%_0.241_354.308))]\",\n orange:\n \"bg-[var(--zui-toggle-thumb-colors-orange-bg,oklch(70.5%_0.213_47.604))] dark:bg-[var(--zui-toggle-thumb-colors-orange-bg-dark,oklch(70.5%_0.213_47.604))]\",\n yellow:\n \"bg-[var(--zui-toggle-thumb-colors-yellow-bg,oklch(79.5%_0.184_86.047))] dark:bg-[var(--zui-toggle-thumb-colors-yellow-bg-dark,oklch(79.5%_0.184_86.047))]\",\n green:\n \"bg-[var(--zui-toggle-thumb-colors-green-bg,oklch(72.3%_0.219_149.579))] dark:bg-[var(--zui-toggle-thumb-colors-green-bg-dark,oklch(72.3%_0.219_149.579))]\",\n teal: \"bg-[var(--zui-toggle-thumb-colors-teal-bg,oklch(70.4%_0.14_182.503))] dark:bg-[var(--zui-toggle-thumb-colors-teal-bg-dark,oklch(70.4%_0.14_182.503))]\",\n cyan: \"bg-[var(--zui-toggle-thumb-colors-cyan-bg,oklch(71.5%_0.143_215.221))] dark:bg-[var(--zui-toggle-thumb-colors-cyan-bg-dark,oklch(71.5%_0.143_215.221))]\",\n lime: \"bg-[var(--zui-toggle-thumb-colors-lime-bg,oklch(76.8%_0.233_130.85))] dark:bg-[var(--zui-toggle-thumb-colors-lime-bg-dark,oklch(76.8%_0.233_130.85))]\",\n emerald:\n \"bg-[var(--zui-toggle-thumb-colors-emerald-bg,oklch(69.6%_0.17_162.48))] dark:bg-[var(--zui-toggle-thumb-colors-emerald-bg-dark,oklch(69.6%_0.17_162.48))]\",\n rose: \"bg-[var(--zui-toggle-thumb-colors-rose-bg,oklch(64.5%_0.246_16.439))] dark:bg-[var(--zui-toggle-thumb-colors-rose-bg-dark,oklch(64.5%_0.246_16.439))]\",\n slate:\n \"bg-[var(--zui-toggle-thumb-colors-slate-bg,oklch(55.4%_0.046_257.417))] dark:bg-[var(--zui-toggle-thumb-colors-slate-bg-dark,oklch(55.4%_0.046_257.417))]\",\n zinc: \"bg-[var(--zui-toggle-thumb-colors-zinc-bg,oklch(55.2%_0.016_285.938))] dark:bg-[var(--zui-toggle-thumb-colors-zinc-bg-dark,oklch(55.2%_0.016_285.938))]\",\n gray: \"bg-[var(--zui-toggle-thumb-colors-gray-bg,oklch(55.1%_0.027_264.364))] dark:bg-[var(--zui-toggle-thumb-colors-gray-bg-dark,oklch(55.1%_0.027_264.364))]\",\n stone:\n \"bg-[var(--zui-toggle-thumb-colors-stone-bg,oklch(55.3%_0.013_58.071))] dark:bg-[var(--zui-toggle-thumb-colors-stone-bg-dark,oklch(55.3%_0.013_58.071))]\",\n \"gradient-blue\":\n \"bg-[var(--zui-toggle-thumb-colors-gradient-blue-bg,oklch(62.3%_0.214_259.815))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-blue-bg-dark,oklch(62.3%_0.214_259.815))]\",\n \"gradient-green\":\n \"bg-[var(--zui-toggle-thumb-colors-gradient-green-bg,oklch(72.3%_0.219_149.579))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-green-bg-dark,oklch(72.3%_0.219_149.579))]\",\n \"gradient-red\":\n \"bg-[var(--zui-toggle-thumb-colors-gradient-red-bg,oklch(63.7%_0.237_25.331))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-red-bg-dark,oklch(63.7%_0.237_25.331))]\",\n \"gradient-yellow\":\n \"bg-[var(--zui-toggle-thumb-colors-gradient-yellow-bg,oklch(79.5%_0.184_86.047))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-yellow-bg-dark,oklch(79.5%_0.184_86.047))]\",\n \"gradient-purple\":\n \"bg-[var(--zui-toggle-thumb-colors-gradient-purple-bg,oklch(62.7%_0.265_303.9))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-purple-bg-dark,oklch(62.7%_0.265_303.9))]\",\n \"gradient-teal\":\n \"bg-[var(--zui-toggle-thumb-colors-gradient-teal-bg,oklch(70.4%_0.14_182.503))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-teal-bg-dark,oklch(70.4%_0.14_182.503))]\",\n \"gradient-indigo\":\n \"bg-[var(--zui-toggle-thumb-colors-gradient-indigo-bg,oklch(58.5%_0.233_277.117))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-indigo-bg-dark,oklch(58.5%_0.233_277.117))]\",\n \"gradient-pink\":\n \"bg-[var(--zui-toggle-thumb-colors-gradient-pink-bg,oklch(65.6%_0.241_354.308))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-pink-bg-dark,oklch(65.6%_0.241_354.308))]\",\n \"gradient-orange\":\n \"bg-[var(--zui-toggle-thumb-colors-gradient-orange-bg,oklch(70.5%_0.213_47.604))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-orange-bg-dark,oklch(70.5%_0.213_47.604))]\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n zuiToggleThumbBase,\n zuiToggleThumbColors,\n zuiToggleThumbSizes,\n zuiToggleTrackAppearances,\n zuiToggleTrackBase,\n zuiToggleTrackSizes,\n} from \"../../design-system/toggle\";\n\nexport const toggleTrackVariants = cva(zuiToggleTrackBase, {\n variants: {\n size: zuiToggleTrackSizes,\n appearance: zuiToggleTrackAppearances,\n },\n defaultVariants: {\n size: \"md\",\n appearance: \"default\",\n },\n});\n\nexport const toggleThumbVariants = cva(zuiToggleThumbBase, {\n variants: {\n size: zuiToggleThumbSizes,\n thumbColor: zuiToggleThumbColors,\n },\n defaultVariants: {\n size: \"md\",\n thumbColor: \"default\",\n },\n});\n","\"use client\";\n\nimport { useCallback, useId, useState, type ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { ToggleProps } from \"./types\";\nimport { toggleThumbVariants, toggleTrackVariants } from \"./variants\";\n\nexport function hasToggleLabelChildren(node: ReactNode): boolean {\n if (node === undefined || node === null) {\n return false;\n }\n if (typeof node === \"boolean\") {\n return false;\n }\n if (typeof node === \"string\") {\n return node.trim().length > 0;\n }\n if (typeof node === \"number\") {\n return true;\n }\n if (Array.isArray(node)) {\n return node.some(hasToggleLabelChildren);\n }\n return true;\n}\n\nexport function ToggleBase(props: ToggleProps) {\n const {\n className,\n size,\n appearance,\n checked,\n defaultChecked = false,\n onCheckedChange,\n disabled,\n ref,\n \"aria-label\": ariaLabelProp,\n children,\n thumbColor,\n ...rest\n } = props;\n const toggleLabelId = useId();\n const isControlled = checked !== undefined;\n const [uncontrolled, setUncontrolled] = useState(defaultChecked);\n const resolved = isControlled ? Boolean(checked) : uncontrolled;\n\n const setChecked = useCallback(\n (next: boolean) => {\n if (!isControlled) {\n setUncontrolled(next);\n }\n onCheckedChange?.(next);\n },\n [isControlled, onCheckedChange],\n );\n\n const thumbShiftPx = size === \"sm\" ? 16 : size === \"lg\" ? 24 : 20;\n const labeledByChildren = hasToggleLabelChildren(children);\n const labeling = labeledByChildren\n ? {\n \"aria-labelledby\": toggleLabelId,\n }\n : {\n \"aria-label\": ariaLabelProp ?? \"Toggle\",\n };\n\n return (\n <button\n ref={ref}\n type=\"button\"\n role=\"switch\"\n data-slot=\"toggle\"\n aria-checked={resolved}\n data-state={resolved ? \"checked\" : \"unchecked\"}\n disabled={disabled}\n className={cn(toggleTrackVariants({ size, appearance }), className)}\n {...labeling}\n onClick={() => {\n if (!disabled) {\n setChecked(!resolved);\n }\n }}\n {...rest}\n >\n <span className=\"sr-only\" id={labeledByChildren ? toggleLabelId : undefined}>{children}</span>\n <span\n className={cn(\n toggleThumbVariants({ size, thumbColor }),\n \"absolute top-1/2 -translate-y-1/2 transition-[transform] duration-200 ease-out\",\n )}\n style={{ transform: `translateX(${resolved ? thumbShiftPx : 0}px)` }}\n />\n </button>\n );\n}\n\nToggleBase.displayName = \"Toggle\";\n"]}
|
|
@@ -11,7 +11,7 @@ var zuiButtonLikeSolidAppearances = {
|
|
|
11
11
|
secondary: "bg-[var(--zui-badge-secondary-bg,oklch(92.9%_0.013_255.508))] dark:bg-[var(--zui-badge-secondary-bg-dark,oklch(27.9%_0.041_260.031))] text-[color:var(--zui-badge-secondary-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-badge-secondary-fg-dark,oklch(98.4%_0.003_247.858))]",
|
|
12
12
|
destructive: "bg-[var(--zui-badge-destructive-bg,oklch(64.5%_0.246_16.439))] dark:bg-[var(--zui-badge-destructive-bg-dark,oklch(51.4%_0.222_16.935))] text-[color:var(--zui-badge-default-fg,oklch(98.4%_0.003_247.858))] dark:text-[color:var(--zui-badge-destructive-fg-dark,#ffffff)]",
|
|
13
13
|
outline: "border border-[color:var(--zui-badge-outline-border,#0000001a)] dark:border-[color:var(--zui-badge-outline-border-dark,#ffffff1a)] bg-[var(--zui-badge-outline-bg,#0000000d)] dark:bg-[var(--zui-badge-outline-bg-dark,#ffffff0d)] text-[color:var(--zui-badge-outline-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-badge-outline-fg-dark,oklch(98.4%_0.003_247.858))]",
|
|
14
|
-
ghost: "bg-[var(--zui-badge-ghost-bg,transparent)] text-[color:var(--zui-badge-ghost-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-badge-ghost-fg-dark,oklch(92.9%_0.013_255.508))]",
|
|
14
|
+
ghost: "bg-[var(--zui-badge-ghost-bg,transparent)] dark:bg-[var(--zui-badge-ghost-bg-dark,transparent)] text-[color:var(--zui-badge-ghost-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-badge-ghost-fg-dark,oklch(92.9%_0.013_255.508))]",
|
|
15
15
|
glass: "border border-[color:var(--zui-badge-glass-border,#00000026)] dark:border-[color:var(--zui-badge-glass-border-dark,#ffffff26)] bg-[var(--zui-badge-glass-bg,#0000001a)] dark:bg-[var(--zui-badge-glass-bg-dark,#ffffff1a)] text-[color:var(--zui-badge-glass-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-badge-glass-fg-dark,#ffffff)] backdrop-blur-md",
|
|
16
16
|
emerald: "bg-[var(--zui-badge-emerald-bg,oklch(69.6%_0.17_162.48))] dark:bg-[var(--zui-badge-emerald-bg-dark,oklch(43.2%_0.095_166.913))] text-[color:var(--zui-badge-emerald-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-emerald-fg-dark,#ffffff)]",
|
|
17
17
|
indigo: "bg-[var(--zui-badge-indigo-bg,oklch(39.8%_0.195_277.366))] dark:bg-[var(--zui-badge-indigo-bg-dark,oklch(51.1%_0.262_276.966))] text-[color:var(--zui-badge-indigo-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-indigo-fg-dark,#ffffff)]",
|
|
@@ -40,8 +40,8 @@ var zuiBadgeBase = [
|
|
|
40
40
|
];
|
|
41
41
|
var zuiBadgeAppearances = {
|
|
42
42
|
...zuiButtonLikeSolidAppearances,
|
|
43
|
-
outline: "border border-[color:var(--zui-badge-outline-border,#00000026)] dark:border-[color:var(--zui-badge-outline-border-dark,#ffffff26)] bg-[var(--zui-badge-outline-bg,transparent)] text-[color:var(--zui-badge-outline-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-badge-outline-fg-dark,oklch(92.9%_0.013_255.508))] shadow-none",
|
|
44
|
-
ghost: "bg-[var(--zui-badge-ghost-bg,transparent)] text-[color:var(--zui-badge-ghost-fg,oklch(44.6%_0.043_257.281))] dark:text-[color:var(--zui-badge-ghost-fg-dark,oklch(86.9%_0.022_252.894))] shadow-none"
|
|
43
|
+
outline: "border border-[color:var(--zui-badge-outline-border,#00000026)] dark:border-[color:var(--zui-badge-outline-border-dark,#ffffff26)] bg-[var(--zui-badge-outline-bg,transparent)] dark:bg-[var(--zui-badge-outline-bg-dark,transparent)] text-[color:var(--zui-badge-outline-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-badge-outline-fg-dark,oklch(92.9%_0.013_255.508))] shadow-none",
|
|
44
|
+
ghost: "bg-[var(--zui-badge-ghost-bg,transparent)] dark:bg-[var(--zui-badge-ghost-bg-dark,transparent)] text-[color:var(--zui-badge-ghost-fg,oklch(44.6%_0.043_257.281))] dark:text-[color:var(--zui-badge-ghost-fg-dark,oklch(86.9%_0.022_252.894))] shadow-none"
|
|
45
45
|
};
|
|
46
46
|
var zuiBadgeSizes = {
|
|
47
47
|
sm: "h-6 min-h-6 px-2 text-[0.65rem] leading-none",
|
|
@@ -128,5 +128,5 @@ BadgeBase.displayName = "Badge";
|
|
|
128
128
|
exports.BadgeBase = BadgeBase;
|
|
129
129
|
exports.badgeCloseButtonVariants = badgeCloseButtonVariants;
|
|
130
130
|
exports.badgeVariants = badgeVariants;
|
|
131
|
-
//# sourceMappingURL=chunk-
|
|
132
|
-
//# sourceMappingURL=chunk-
|
|
131
|
+
//# sourceMappingURL=chunk-LNYCEPW5.js.map
|
|
132
|
+
//# sourceMappingURL=chunk-LNYCEPW5.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/design-system/badge.ts","../src/ui/badge/variants.ts","../src/ui/badge/badge-base.tsx"],"names":["cva","jsxs","cn","jsx","HiXMark"],"mappings":"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","file":"chunk-LNYCEPW5.js","sourcesContent":["export const zuiButtonLikeSolidAppearances = {\n default:\n \"bg-[var(--zui-badge-default-bg,oklch(20.8%_0.042_265.755))] dark:bg-[var(--zui-badge-default-bg-dark,oklch(98.4%_0.003_247.858))] text-[color:var(--zui-badge-default-fg,oklch(98.4%_0.003_247.858))] dark:text-[color:var(--zui-badge-default-fg-dark,oklch(12.9%_0.042_264.695))] shadow-[var(--zui-badge-default-shadow,0_1px_2px_rgba(15,23,42,0.08))] dark:shadow-[var(--zui-badge-default-shadow-dark,0_1px_2px_rgba(15,23,42,0.12))]\",\n secondary:\n \"bg-[var(--zui-badge-secondary-bg,oklch(92.9%_0.013_255.508))] dark:bg-[var(--zui-badge-secondary-bg-dark,oklch(27.9%_0.041_260.031))] text-[color:var(--zui-badge-secondary-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-badge-secondary-fg-dark,oklch(98.4%_0.003_247.858))]\",\n destructive:\n \"bg-[var(--zui-badge-destructive-bg,oklch(64.5%_0.246_16.439))] dark:bg-[var(--zui-badge-destructive-bg-dark,oklch(51.4%_0.222_16.935))] text-[color:var(--zui-badge-default-fg,oklch(98.4%_0.003_247.858))] dark:text-[color:var(--zui-badge-destructive-fg-dark,#ffffff)]\",\n outline:\n \"border border-[color:var(--zui-badge-outline-border,#0000001a)] dark:border-[color:var(--zui-badge-outline-border-dark,#ffffff1a)] bg-[var(--zui-badge-outline-bg,#0000000d)] dark:bg-[var(--zui-badge-outline-bg-dark,#ffffff0d)] text-[color:var(--zui-badge-outline-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-badge-outline-fg-dark,oklch(98.4%_0.003_247.858))]\",\n ghost:\n \"bg-[var(--zui-badge-ghost-bg,transparent)] dark:bg-[var(--zui-badge-ghost-bg-dark,transparent)] text-[color:var(--zui-badge-ghost-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-badge-ghost-fg-dark,oklch(92.9%_0.013_255.508))]\",\n glass:\n \"border border-[color:var(--zui-badge-glass-border,#00000026)] dark:border-[color:var(--zui-badge-glass-border-dark,#ffffff26)] bg-[var(--zui-badge-glass-bg,#0000001a)] dark:bg-[var(--zui-badge-glass-bg-dark,#ffffff1a)] text-[color:var(--zui-badge-glass-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-badge-glass-fg-dark,#ffffff)] backdrop-blur-md\",\n emerald:\n \"bg-[var(--zui-badge-emerald-bg,oklch(69.6%_0.17_162.48))] dark:bg-[var(--zui-badge-emerald-bg-dark,oklch(43.2%_0.095_166.913))] text-[color:var(--zui-badge-emerald-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-emerald-fg-dark,#ffffff)]\",\n indigo:\n \"bg-[var(--zui-badge-indigo-bg,oklch(39.8%_0.195_277.366))] dark:bg-[var(--zui-badge-indigo-bg-dark,oklch(51.1%_0.262_276.966))] text-[color:var(--zui-badge-indigo-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-indigo-fg-dark,#ffffff)]\",\n purple:\n \"bg-[var(--zui-badge-purple-bg,oklch(43.8%_0.218_303.724))] dark:bg-[var(--zui-badge-purple-bg-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-badge-purple-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-purple-fg-dark,#ffffff)]\",\n pink: \"bg-[var(--zui-badge-pink-bg,oklch(45.9%_0.187_3.815))] dark:bg-[var(--zui-badge-pink-bg-dark,oklch(59.2%_0.249_0.584))] text-[color:var(--zui-badge-pink-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-pink-fg-dark,#ffffff)]\",\n rose: \"bg-[var(--zui-badge-rose-bg,oklch(64.5%_0.246_16.439))] dark:bg-[var(--zui-badge-rose-bg-dark,oklch(51.4%_0.222_16.935))] text-[color:var(--zui-badge-rose-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-rose-fg-dark,#ffffff)]\",\n sky: \"bg-[var(--zui-badge-sky-bg,oklch(68.5%_0.169_237.323))] dark:bg-[var(--zui-badge-sky-bg-dark,oklch(50%_0.134_242.749))] text-[color:var(--zui-badge-sky-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-sky-fg-dark,#ffffff)]\",\n teal: \"bg-[var(--zui-badge-teal-bg,oklch(70.4%_0.14_182.503))] dark:bg-[var(--zui-badge-teal-bg-dark,oklch(51.1%_0.096_186.391))] text-[color:var(--zui-badge-teal-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-teal-fg-dark,#ffffff)]\",\n yellow:\n \"bg-[var(--zui-badge-yellow-bg,oklch(79.5%_0.184_86.047))] dark:bg-[var(--zui-badge-yellow-bg-dark,oklch(47.6%_0.114_61.907))] text-[color:var(--zui-badge-yellow-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-yellow-fg-dark,#ffffff)]\",\n orange:\n \"bg-[var(--zui-badge-orange-bg,oklch(70.5%_0.213_47.604))] dark:bg-[var(--zui-badge-orange-bg-dark,oklch(47%_0.157_37.304))] text-[color:var(--zui-badge-orange-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-orange-fg-dark,#ffffff)]\",\n \"gradient-blue\":\n \"bg-linear-to-r from-[var(--zui-badge-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-badge-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-badge-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-badge-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-badge-gradient-blue-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-gradient-blue-fg-dark,#ffffff)]\",\n \"gradient-green\":\n \"bg-linear-to-r from-[var(--zui-badge-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-badge-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-badge-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-badge-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] text-[color:var(--zui-badge-gradient-green-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-gradient-green-fg-dark,#ffffff)]\",\n \"gradient-red\":\n \"bg-linear-to-r from-[var(--zui-badge-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-badge-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-badge-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-badge-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] text-[color:var(--zui-badge-gradient-red-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-gradient-red-fg-dark,#ffffff)]\",\n \"gradient-yellow\":\n \"bg-linear-to-r from-[var(--zui-badge-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-badge-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-badge-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-badge-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] text-[color:var(--zui-badge-gradient-yellow-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-gradient-yellow-fg-dark,#ffffff)]\",\n \"gradient-purple\":\n \"bg-linear-to-r from-[var(--zui-badge-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-badge-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-badge-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-badge-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] text-[color:var(--zui-badge-gradient-purple-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-gradient-purple-fg-dark,#ffffff)]\",\n \"gradient-teal\":\n \"bg-linear-to-r from-[var(--zui-badge-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-badge-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-badge-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-badge-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] text-[color:var(--zui-badge-gradient-teal-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-gradient-teal-fg-dark,#ffffff)]\",\n \"gradient-indigo\":\n \"bg-linear-to-r from-[var(--zui-badge-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-badge-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-badge-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-badge-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-badge-gradient-indigo-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-gradient-indigo-fg-dark,#ffffff)]\",\n \"gradient-pink\":\n \"bg-linear-to-r from-[var(--zui-badge-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-badge-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-badge-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-badge-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] text-[color:var(--zui-badge-gradient-pink-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-gradient-pink-fg-dark,#ffffff)]\",\n \"gradient-orange\":\n \"bg-linear-to-r from-[var(--zui-badge-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-badge-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-badge-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-badge-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] text-[color:var(--zui-badge-gradient-orange-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-gradient-orange-fg-dark,#ffffff)]\",\n} as const;\n\nexport type ZuiButtonLikeSolidAppearance =\n keyof typeof zuiButtonLikeSolidAppearances;\n\nexport const zuiBadgeBase = [\n \"inline-flex max-w-full items-center justify-center gap-1 font-medium\",\n \"whitespace-nowrap ring-offset-[var(--zui-badge-ring-offset,oklch(98.4%_0.003_247.858))] dark:ring-offset-[var(--zui-badge-ring-offset-dark,oklch(12.9%_0.042_264.695))] transition-colors\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-badge-ring-focus,oklch(44.6%_0.043_257.281))] dark:focus-visible:ring-[var(--zui-badge-ring-focus-dark,oklch(86.9%_0.022_252.894))] focus-visible:ring-offset-2\",\n \"select-none\",\n] as const;\n\nexport const zuiBadgeAppearances = {\n ...zuiButtonLikeSolidAppearances,\n outline:\n \"border border-[color:var(--zui-badge-outline-border,#00000026)] dark:border-[color:var(--zui-badge-outline-border-dark,#ffffff26)] bg-[var(--zui-badge-outline-bg,transparent)] dark:bg-[var(--zui-badge-outline-bg-dark,transparent)] text-[color:var(--zui-badge-outline-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-badge-outline-fg-dark,oklch(92.9%_0.013_255.508))] shadow-none\",\n ghost:\n \"bg-[var(--zui-badge-ghost-bg,transparent)] dark:bg-[var(--zui-badge-ghost-bg-dark,transparent)] text-[color:var(--zui-badge-ghost-fg,oklch(44.6%_0.043_257.281))] dark:text-[color:var(--zui-badge-ghost-fg-dark,oklch(86.9%_0.022_252.894))] shadow-none\",\n} as const;\n\nexport const zuiBadgeSizes = {\n sm: \"h-6 min-h-6 px-2 text-[0.65rem] leading-none\",\n md: \"h-7 min-h-7 px-2.5 text-xs leading-none\",\n lg: \"h-8 min-h-8 px-3 text-sm leading-none\",\n} as const;\n\nexport const zuiBadgeShapes = {\n pill: \"rounded-full\",\n square: \"rounded-md\",\n dot: \"h-2.5 min-h-2.5 w-2.5 min-w-2.5 rounded-full p-0 px-0 text-[0]\",\n} as const;\n\nexport const zuiBadgeCloseButtonBase =\n \"inline-flex shrink-0 items-center justify-center rounded-md p-0.5 text-current transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-badge-close-button-ring-focus,#00000066)] dark:focus-visible:ring-[var(--zui-badge-close-button-ring-focus-dark,#ffffff66)]\";\n\nexport const zuiBadgeCloseButtonSizes = {\n sm: \"size-4\",\n md: \"size-5\",\n lg: \"size-6\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n zuiBadgeAppearances,\n zuiBadgeBase,\n zuiBadgeCloseButtonBase,\n zuiBadgeCloseButtonSizes,\n zuiBadgeShapes,\n zuiBadgeSizes,\n zuiButtonLikeSolidAppearances,\n type ZuiButtonLikeSolidAppearance,\n} from \"../../design-system/badge\";\n\nexport const buttonLikeSolidAppearances = zuiButtonLikeSolidAppearances;\nexport type ButtonLikeSolidAppearance = ZuiButtonLikeSolidAppearance;\n\nexport const badgeVariants = cva(zuiBadgeBase, {\n variants: {\n appearance: zuiBadgeAppearances,\n size: zuiBadgeSizes,\n shape: zuiBadgeShapes,\n },\n defaultVariants: {\n appearance: \"default\",\n size: \"md\",\n shape: \"pill\",\n },\n});\n\nexport const badgeCloseButtonVariants = cva(zuiBadgeCloseButtonBase, {\n variants: {\n size: zuiBadgeCloseButtonSizes,\n },\n defaultVariants: { size: \"md\" },\n});\n","\"use client\";\n\nimport { HiXMark } from \"react-icons/hi2\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { BadgeBaseProps } from \"./types\";\nimport { badgeCloseButtonVariants, badgeVariants } from \"./variants\";\n\nexport function BadgeBase({\n className,\n appearance,\n size,\n shape,\n closable = false,\n liveRegion = false,\n onClose,\n closeLabel = \"Remove\",\n children,\n ref,\n \"aria-label\": ariaLabel,\n as: Wrapper = \"span\",\n ...rest\n}: BadgeBaseProps) {\n const isDot = shape === \"dot\";\n const resolvedAriaLabel =\n ariaLabel ?? (isDot ? \"Status indicator\" : undefined);\n const landmarkRole =\n liveRegion === true || isDot ? (\"status\" as const) : undefined;\n\n return (\n <Wrapper\n ref={ref}\n role={landmarkRole}\n data-slot=\"badge\"\n aria-label={resolvedAriaLabel}\n className={cn(badgeVariants({ appearance, size, shape }), className)}\n {...rest}\n >\n {!isDot ? children : null}\n {closable ? (\n <button\n type=\"button\"\n data-slot=\"badge-close\"\n aria-label={closeLabel}\n onClick={onClose}\n className={badgeCloseButtonVariants({ size })}\n >\n <HiXMark className=\"size-3.5\" aria-hidden />\n </button>\n ) : null}\n </Wrapper>\n );\n}\n\nBadgeBase.displayName = \"Badge\";\n"]}
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
import { cn } from './chunk-4D54YOL6.mjs';
|
|
2
|
+
import { cva } from 'class-variance-authority';
|
|
3
|
+
import { useId, useState, useCallback } from 'react';
|
|
4
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
// src/design-system/toggle.ts
|
|
7
|
+
var zuiToggleTrackBase = "relative inline-flex shrink-0 cursor-pointer rounded-full border border-[color:var(--zui-toggle-track-border,#0000001a)] dark:border-[color:var(--zui-toggle-track-border-dark,#ffffff1a)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-toggle-track-ring-focus,oklch(44.6%_0.043_257.281))] dark:focus-visible:ring-[var(--zui-toggle-track-ring-focus-dark,oklch(86.9%_0.022_252.894))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-toggle-track-ring-offset-focus,oklch(98.4%_0.003_247.858))] dark:focus-visible:ring-offset-[var(--zui-toggle-track-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))] data-[state=checked]:border-[color:var(--zui-toggle-track-border-checked,oklch(71.5%_0.143_215.221_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-border-checked-dark,oklch(71.5%_0.143_215.221_/_0.4))] disabled:cursor-not-allowed disabled:opacity-50";
|
|
8
|
+
var zuiToggleTrackSizes = {
|
|
9
|
+
sm: "h-5 w-9",
|
|
10
|
+
md: "h-6 w-11",
|
|
11
|
+
lg: "h-7 w-[3.25rem]"
|
|
12
|
+
};
|
|
13
|
+
var zuiToggleTrackAppearances = {
|
|
14
|
+
default: "data-[state=checked]:bg-[var(--zui-toggle-track-default-bg-checked,oklch(78.9%_0.154_211.53_/_0.7))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-default-bg-checked-dark,oklch(60.9%_0.126_221.723_/_0.9))]",
|
|
15
|
+
success: "data-[state=checked]:border-[color:var(--zui-toggle-track-success-border-checked,oklch(69.6%_0.17_162.48_/_0.7))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-success-border-checked-dark,oklch(69.6%_0.17_162.48_/_0.7))] data-[state=checked]:bg-[var(--zui-toggle-track-success-bg-checked,oklch(76.5%_0.177_163.223_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-success-bg-checked-dark,oklch(59.6%_0.145_163.225_/_0.8))]",
|
|
16
|
+
destructive: "data-[state=checked]:border-[color:var(--zui-toggle-track-destructive-border-checked,oklch(64.5%_0.246_16.439_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-destructive-border-checked-dark,oklch(64.5%_0.246_16.439_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-destructive-bg-checked,oklch(71.2%_0.194_13.428_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-destructive-bg-checked-dark,oklch(58.6%_0.253_17.585_/_0.8))]",
|
|
17
|
+
neutral: "data-[state=checked]:border-[color:var(--zui-toggle-track-neutral-border-checked,oklch(55.4%_0.046_257.417_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-neutral-border-checked-dark,oklch(70.4%_0.04_256.788_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-neutral-bg-checked,oklch(70.4%_0.04_256.788_/_0.9))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-neutral-bg-checked-dark,oklch(44.6%_0.043_257.281_/_0.9))]",
|
|
18
|
+
indigo: "data-[state=checked]:border-[color:var(--zui-toggle-track-indigo-border-checked,oklch(58.5%_0.233_277.117_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-indigo-border-checked-dark,oklch(58.5%_0.233_277.117_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-indigo-bg-checked,oklch(67.3%_0.182_276.935_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-indigo-bg-checked-dark,oklch(51.1%_0.262_276.966_/_0.8))]",
|
|
19
|
+
purple: "data-[state=checked]:border-[color:var(--zui-toggle-track-purple-border-checked,oklch(62.7%_0.265_303.9_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-purple-border-checked-dark,oklch(62.7%_0.265_303.9_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-purple-bg-checked,oklch(71.4%_0.203_305.504_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-purple-bg-checked-dark,oklch(55.8%_0.288_302.321_/_0.8))]",
|
|
20
|
+
pink: "data-[state=checked]:border-[color:var(--zui-toggle-track-pink-border-checked,oklch(65.6%_0.241_354.308_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-pink-border-checked-dark,oklch(65.6%_0.241_354.308_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-pink-bg-checked,oklch(71.8%_0.202_349.761_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-pink-bg-checked-dark,oklch(59.2%_0.249_0.584_/_0.8))]",
|
|
21
|
+
orange: "data-[state=checked]:border-[color:var(--zui-toggle-track-orange-border-checked,oklch(70.5%_0.213_47.604_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-orange-border-checked-dark,oklch(70.5%_0.213_47.604_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-orange-bg-checked,oklch(75%_0.183_55.934_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-orange-bg-checked-dark,oklch(64.6%_0.222_41.116_/_0.8))]",
|
|
22
|
+
yellow: "data-[state=checked]:border-[color:var(--zui-toggle-track-yellow-border-checked,oklch(79.5%_0.184_86.047_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-yellow-border-checked-dark,oklch(79.5%_0.184_86.047_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-yellow-bg-checked,oklch(85.2%_0.199_91.936_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-yellow-bg-checked-dark,oklch(68.1%_0.162_75.834_/_0.8))]",
|
|
23
|
+
green: "data-[state=checked]:border-[color:var(--zui-toggle-track-green-border-checked,oklch(72.3%_0.219_149.579_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-green-border-checked-dark,oklch(72.3%_0.219_149.579_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-green-bg-checked,oklch(79.2%_0.209_151.711_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-green-bg-checked-dark,oklch(62.7%_0.194_149.214_/_0.8))]",
|
|
24
|
+
teal: "data-[state=checked]:border-[color:var(--zui-toggle-track-teal-border-checked,oklch(70.4%_0.14_182.503_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-teal-border-checked-dark,oklch(70.4%_0.14_182.503_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-teal-bg-checked,oklch(77.7%_0.152_181.912_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-teal-bg-checked-dark,oklch(60%_0.118_184.704_/_0.8))]",
|
|
25
|
+
cyan: "data-[state=checked]:border-[color:var(--zui-toggle-track-cyan-border-checked,oklch(71.5%_0.143_215.221_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-cyan-border-checked-dark,oklch(71.5%_0.143_215.221_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-cyan-bg-checked,oklch(78.9%_0.154_211.53_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-cyan-bg-checked-dark,oklch(60.9%_0.126_221.723_/_0.8))]",
|
|
26
|
+
lime: "data-[state=checked]:border-[color:var(--zui-toggle-track-lime-border-checked,oklch(76.8%_0.233_130.85_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-lime-border-checked-dark,oklch(76.8%_0.233_130.85_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-lime-bg-checked,oklch(84.1%_0.238_128.85_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-lime-bg-checked-dark,oklch(64.8%_0.2_131.684_/_0.8))]",
|
|
27
|
+
emerald: "data-[state=checked]:border-[color:var(--zui-toggle-track-emerald-border-checked,oklch(69.6%_0.17_162.48_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-emerald-border-checked-dark,oklch(69.6%_0.17_162.48_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-emerald-bg-checked,oklch(76.5%_0.177_163.223_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-emerald-bg-checked-dark,oklch(59.6%_0.145_163.225_/_0.8))]",
|
|
28
|
+
rose: "data-[state=checked]:border-[color:var(--zui-toggle-track-rose-border-checked,oklch(64.5%_0.246_16.439_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-rose-border-checked-dark,oklch(64.5%_0.246_16.439_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-rose-bg-checked,oklch(71.2%_0.194_13.428_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-rose-bg-checked-dark,oklch(58.6%_0.253_17.585_/_0.8))]",
|
|
29
|
+
slate: "data-[state=checked]:border-[color:var(--zui-toggle-track-slate-border-checked,oklch(55.4%_0.046_257.417_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-slate-border-checked-dark,oklch(70.4%_0.04_256.788_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-slate-bg-checked,oklch(70.4%_0.04_256.788_/_0.9))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-slate-bg-checked-dark,oklch(44.6%_0.043_257.281_/_0.9))]",
|
|
30
|
+
zinc: "data-[state=checked]:border-[color:var(--zui-toggle-track-zinc-border-checked,oklch(70.5%_0.015_286.067_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-zinc-border-checked-dark,oklch(70.5%_0.015_286.067_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-zinc-bg-checked,oklch(44.2%_0.017_285.786_/_0.9))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-zinc-bg-checked-dark,oklch(44.2%_0.017_285.786_/_0.9))]",
|
|
31
|
+
gray: "data-[state=checked]:border-[color:var(--zui-toggle-track-gray-border-checked,oklch(70.7%_0.022_261.325_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-gray-border-checked-dark,oklch(70.7%_0.022_261.325_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-gray-bg-checked,oklch(70.7%_0.022_261.325_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-gray-bg-checked-dark,oklch(44.6%_0.03_256.802_/_0.9))]",
|
|
32
|
+
stone: "bg-[var(--zui-toggle-track-stone-bg,oklch(86.9%_0.005_56.366))] dark:bg-[var(--zui-toggle-track-stone-bg-dark,oklch(86.9%_0.005_56.366))] data-[state=checked]:border-[color:var(--zui-toggle-track-stone-border-checked,oklch(70.9%_0.01_56.259_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-stone-border-checked-dark,oklch(70.9%_0.01_56.259_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-stone-bg-checked,oklch(44.4%_0.011_73.639_/_0.9))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-stone-bg-checked-dark,oklch(44.4%_0.011_73.639_/_0.9))]",
|
|
33
|
+
"gradient-blue": "bg-[var(--zui-toggle-track-gradient-blue-bg,oklch(80.9%_0.105_251.813))] dark:bg-[var(--zui-toggle-track-gradient-blue-bg-dark,oklch(80.9%_0.105_251.813))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-toggle-track-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-toggle-track-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-toggle-track-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))]",
|
|
34
|
+
"gradient-green": "bg-[var(--zui-toggle-track-gradient-green-bg,oklch(87.1%_0.15_154.449))] dark:bg-[var(--zui-toggle-track-gradient-green-bg-dark,oklch(87.1%_0.15_154.449))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-toggle-track-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-toggle-track-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-toggle-track-gradient-green-to-dark,oklch(64.8%_0.2_131.684))]",
|
|
35
|
+
"gradient-red": "bg-[var(--zui-toggle-track-gradient-red-bg,oklch(80.8%_0.114_19.571))] dark:bg-[var(--zui-toggle-track-gradient-red-bg-dark,oklch(80.8%_0.114_19.571))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-toggle-track-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-toggle-track-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-toggle-track-gradient-red-to-dark,oklch(59.2%_0.249_0.584))]",
|
|
36
|
+
"gradient-yellow": "bg-[var(--zui-toggle-track-gradient-yellow-bg,oklch(90.5%_0.182_98.111))] dark:bg-[var(--zui-toggle-track-gradient-yellow-bg-dark,oklch(90.5%_0.182_98.111))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-toggle-track-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-toggle-track-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-toggle-track-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))]",
|
|
37
|
+
"gradient-purple": "bg-[var(--zui-toggle-track-gradient-purple-bg,oklch(82.7%_0.119_306.383))] dark:bg-[var(--zui-toggle-track-gradient-purple-bg-dark,oklch(82.7%_0.119_306.383))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-toggle-track-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-toggle-track-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-toggle-track-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))]",
|
|
38
|
+
"gradient-teal": "bg-[var(--zui-toggle-track-gradient-teal-bg,oklch(85.5%_0.138_181.071))] dark:bg-[var(--zui-toggle-track-gradient-teal-bg-dark,oklch(85.5%_0.138_181.071))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-toggle-track-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-toggle-track-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-toggle-track-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))]",
|
|
39
|
+
"gradient-indigo": "bg-[var(--zui-toggle-track-gradient-indigo-bg,oklch(78.5%_0.115_274.713))] dark:bg-[var(--zui-toggle-track-gradient-indigo-bg-dark,oklch(78.5%_0.115_274.713))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-toggle-track-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-toggle-track-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-toggle-track-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))]",
|
|
40
|
+
"gradient-pink": "bg-[var(--zui-toggle-track-gradient-pink-bg,oklch(82.3%_0.12_346.018))] dark:bg-[var(--zui-toggle-track-gradient-pink-bg-dark,oklch(82.3%_0.12_346.018))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-toggle-track-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-toggle-track-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-toggle-track-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))]",
|
|
41
|
+
"gradient-orange": "bg-[var(--zui-toggle-track-gradient-orange-bg,oklch(83.7%_0.128_66.29))] dark:bg-[var(--zui-toggle-track-gradient-orange-bg-dark,oklch(83.7%_0.128_66.29))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-toggle-track-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-toggle-track-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-toggle-track-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))]"
|
|
42
|
+
};
|
|
43
|
+
var zuiToggleThumbBase = "pointer-events-none block rounded-full border border-[color:var(--zui-toggle-thumb-border,oklch(20.8%_0.042_265.755_/_0.3))] dark:border-[color:var(--zui-toggle-thumb-border-dark,#ffffff1a)] shadow-[var(--zui-toggle-thumb-shadow,0_1px_2px_rgba(15,23,42,0.12))] dark:shadow-[var(--zui-toggle-thumb-shadow-dark,0_1px_2px_rgba(15,23,42,0.35))] ring-0";
|
|
44
|
+
var zuiToggleThumbSizes = {
|
|
45
|
+
sm: "size-4",
|
|
46
|
+
md: "size-5",
|
|
47
|
+
lg: "size-6"
|
|
48
|
+
};
|
|
49
|
+
var zuiToggleThumbColors = {
|
|
50
|
+
default: "bg-[var(--zui-toggle-thumb-colors-default-bg,#ffffff)] dark:bg-[var(--zui-toggle-thumb-colors-default-bg-dark,#ffffff)]",
|
|
51
|
+
success: "bg-[var(--zui-toggle-thumb-colors-success-bg,oklch(69.6%_0.17_162.48))] dark:bg-[var(--zui-toggle-thumb-colors-success-bg-dark,oklch(69.6%_0.17_162.48))]",
|
|
52
|
+
destructive: "bg-[var(--zui-toggle-thumb-colors-destructive-bg,oklch(64.5%_0.246_16.439))] dark:bg-[var(--zui-toggle-thumb-colors-destructive-bg-dark,oklch(64.5%_0.246_16.439))]",
|
|
53
|
+
neutral: "bg-[var(--zui-toggle-thumb-colors-neutral-bg,oklch(55.4%_0.046_257.417))] dark:bg-[var(--zui-toggle-thumb-colors-neutral-bg-dark,oklch(55.4%_0.046_257.417))]",
|
|
54
|
+
indigo: "bg-[var(--zui-toggle-thumb-colors-indigo-bg,oklch(58.5%_0.233_277.117))] dark:bg-[var(--zui-toggle-thumb-colors-indigo-bg-dark,oklch(58.5%_0.233_277.117))]",
|
|
55
|
+
purple: "bg-[var(--zui-toggle-thumb-colors-purple-bg,oklch(62.7%_0.265_303.9))] dark:bg-[var(--zui-toggle-thumb-colors-purple-bg-dark,oklch(62.7%_0.265_303.9))]",
|
|
56
|
+
pink: "bg-[var(--zui-toggle-thumb-colors-pink-bg,oklch(65.6%_0.241_354.308))] dark:bg-[var(--zui-toggle-thumb-colors-pink-bg-dark,oklch(65.6%_0.241_354.308))]",
|
|
57
|
+
orange: "bg-[var(--zui-toggle-thumb-colors-orange-bg,oklch(70.5%_0.213_47.604))] dark:bg-[var(--zui-toggle-thumb-colors-orange-bg-dark,oklch(70.5%_0.213_47.604))]",
|
|
58
|
+
yellow: "bg-[var(--zui-toggle-thumb-colors-yellow-bg,oklch(79.5%_0.184_86.047))] dark:bg-[var(--zui-toggle-thumb-colors-yellow-bg-dark,oklch(79.5%_0.184_86.047))]",
|
|
59
|
+
green: "bg-[var(--zui-toggle-thumb-colors-green-bg,oklch(72.3%_0.219_149.579))] dark:bg-[var(--zui-toggle-thumb-colors-green-bg-dark,oklch(72.3%_0.219_149.579))]",
|
|
60
|
+
teal: "bg-[var(--zui-toggle-thumb-colors-teal-bg,oklch(70.4%_0.14_182.503))] dark:bg-[var(--zui-toggle-thumb-colors-teal-bg-dark,oklch(70.4%_0.14_182.503))]",
|
|
61
|
+
cyan: "bg-[var(--zui-toggle-thumb-colors-cyan-bg,oklch(71.5%_0.143_215.221))] dark:bg-[var(--zui-toggle-thumb-colors-cyan-bg-dark,oklch(71.5%_0.143_215.221))]",
|
|
62
|
+
lime: "bg-[var(--zui-toggle-thumb-colors-lime-bg,oklch(76.8%_0.233_130.85))] dark:bg-[var(--zui-toggle-thumb-colors-lime-bg-dark,oklch(76.8%_0.233_130.85))]",
|
|
63
|
+
emerald: "bg-[var(--zui-toggle-thumb-colors-emerald-bg,oklch(69.6%_0.17_162.48))] dark:bg-[var(--zui-toggle-thumb-colors-emerald-bg-dark,oklch(69.6%_0.17_162.48))]",
|
|
64
|
+
rose: "bg-[var(--zui-toggle-thumb-colors-rose-bg,oklch(64.5%_0.246_16.439))] dark:bg-[var(--zui-toggle-thumb-colors-rose-bg-dark,oklch(64.5%_0.246_16.439))]",
|
|
65
|
+
slate: "bg-[var(--zui-toggle-thumb-colors-slate-bg,oklch(55.4%_0.046_257.417))] dark:bg-[var(--zui-toggle-thumb-colors-slate-bg-dark,oklch(55.4%_0.046_257.417))]",
|
|
66
|
+
zinc: "bg-[var(--zui-toggle-thumb-colors-zinc-bg,oklch(55.2%_0.016_285.938))] dark:bg-[var(--zui-toggle-thumb-colors-zinc-bg-dark,oklch(55.2%_0.016_285.938))]",
|
|
67
|
+
gray: "bg-[var(--zui-toggle-thumb-colors-gray-bg,oklch(55.1%_0.027_264.364))] dark:bg-[var(--zui-toggle-thumb-colors-gray-bg-dark,oklch(55.1%_0.027_264.364))]",
|
|
68
|
+
stone: "bg-[var(--zui-toggle-thumb-colors-stone-bg,oklch(55.3%_0.013_58.071))] dark:bg-[var(--zui-toggle-thumb-colors-stone-bg-dark,oklch(55.3%_0.013_58.071))]",
|
|
69
|
+
"gradient-blue": "bg-[var(--zui-toggle-thumb-colors-gradient-blue-bg,oklch(62.3%_0.214_259.815))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-blue-bg-dark,oklch(62.3%_0.214_259.815))]",
|
|
70
|
+
"gradient-green": "bg-[var(--zui-toggle-thumb-colors-gradient-green-bg,oklch(72.3%_0.219_149.579))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-green-bg-dark,oklch(72.3%_0.219_149.579))]",
|
|
71
|
+
"gradient-red": "bg-[var(--zui-toggle-thumb-colors-gradient-red-bg,oklch(63.7%_0.237_25.331))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-red-bg-dark,oklch(63.7%_0.237_25.331))]",
|
|
72
|
+
"gradient-yellow": "bg-[var(--zui-toggle-thumb-colors-gradient-yellow-bg,oklch(79.5%_0.184_86.047))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-yellow-bg-dark,oklch(79.5%_0.184_86.047))]",
|
|
73
|
+
"gradient-purple": "bg-[var(--zui-toggle-thumb-colors-gradient-purple-bg,oklch(62.7%_0.265_303.9))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-purple-bg-dark,oklch(62.7%_0.265_303.9))]",
|
|
74
|
+
"gradient-teal": "bg-[var(--zui-toggle-thumb-colors-gradient-teal-bg,oklch(70.4%_0.14_182.503))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-teal-bg-dark,oklch(70.4%_0.14_182.503))]",
|
|
75
|
+
"gradient-indigo": "bg-[var(--zui-toggle-thumb-colors-gradient-indigo-bg,oklch(58.5%_0.233_277.117))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-indigo-bg-dark,oklch(58.5%_0.233_277.117))]",
|
|
76
|
+
"gradient-pink": "bg-[var(--zui-toggle-thumb-colors-gradient-pink-bg,oklch(65.6%_0.241_354.308))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-pink-bg-dark,oklch(65.6%_0.241_354.308))]",
|
|
77
|
+
"gradient-orange": "bg-[var(--zui-toggle-thumb-colors-gradient-orange-bg,oklch(70.5%_0.213_47.604))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-orange-bg-dark,oklch(70.5%_0.213_47.604))]"
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
// src/ui/toggle/variants.ts
|
|
81
|
+
var toggleTrackVariants = cva(zuiToggleTrackBase, {
|
|
82
|
+
variants: {
|
|
83
|
+
size: zuiToggleTrackSizes,
|
|
84
|
+
appearance: zuiToggleTrackAppearances
|
|
85
|
+
},
|
|
86
|
+
defaultVariants: {
|
|
87
|
+
size: "md",
|
|
88
|
+
appearance: "default"
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
var toggleThumbVariants = cva(zuiToggleThumbBase, {
|
|
92
|
+
variants: {
|
|
93
|
+
size: zuiToggleThumbSizes,
|
|
94
|
+
thumbColor: zuiToggleThumbColors
|
|
95
|
+
},
|
|
96
|
+
defaultVariants: {
|
|
97
|
+
size: "md",
|
|
98
|
+
thumbColor: "default"
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
function hasToggleLabelChildren(node) {
|
|
102
|
+
if (node === void 0 || node === null) {
|
|
103
|
+
return false;
|
|
104
|
+
}
|
|
105
|
+
if (typeof node === "boolean") {
|
|
106
|
+
return false;
|
|
107
|
+
}
|
|
108
|
+
if (typeof node === "string") {
|
|
109
|
+
return node.trim().length > 0;
|
|
110
|
+
}
|
|
111
|
+
if (typeof node === "number") {
|
|
112
|
+
return true;
|
|
113
|
+
}
|
|
114
|
+
if (Array.isArray(node)) {
|
|
115
|
+
return node.some(hasToggleLabelChildren);
|
|
116
|
+
}
|
|
117
|
+
return true;
|
|
118
|
+
}
|
|
119
|
+
function ToggleBase(props) {
|
|
120
|
+
const {
|
|
121
|
+
className,
|
|
122
|
+
size,
|
|
123
|
+
appearance,
|
|
124
|
+
checked,
|
|
125
|
+
defaultChecked = false,
|
|
126
|
+
onCheckedChange,
|
|
127
|
+
disabled,
|
|
128
|
+
ref,
|
|
129
|
+
"aria-label": ariaLabelProp,
|
|
130
|
+
children,
|
|
131
|
+
thumbColor,
|
|
132
|
+
...rest
|
|
133
|
+
} = props;
|
|
134
|
+
const toggleLabelId = useId();
|
|
135
|
+
const isControlled = checked !== void 0;
|
|
136
|
+
const [uncontrolled, setUncontrolled] = useState(defaultChecked);
|
|
137
|
+
const resolved = isControlled ? Boolean(checked) : uncontrolled;
|
|
138
|
+
const setChecked = useCallback(
|
|
139
|
+
(next) => {
|
|
140
|
+
if (!isControlled) {
|
|
141
|
+
setUncontrolled(next);
|
|
142
|
+
}
|
|
143
|
+
onCheckedChange?.(next);
|
|
144
|
+
},
|
|
145
|
+
[isControlled, onCheckedChange]
|
|
146
|
+
);
|
|
147
|
+
const thumbShiftPx = size === "sm" ? 16 : size === "lg" ? 24 : 20;
|
|
148
|
+
const labeledByChildren = hasToggleLabelChildren(children);
|
|
149
|
+
const labeling = labeledByChildren ? {
|
|
150
|
+
"aria-labelledby": toggleLabelId
|
|
151
|
+
} : {
|
|
152
|
+
"aria-label": ariaLabelProp ?? "Toggle"
|
|
153
|
+
};
|
|
154
|
+
return /* @__PURE__ */ jsxs(
|
|
155
|
+
"button",
|
|
156
|
+
{
|
|
157
|
+
ref,
|
|
158
|
+
type: "button",
|
|
159
|
+
role: "switch",
|
|
160
|
+
"data-slot": "toggle",
|
|
161
|
+
"aria-checked": resolved,
|
|
162
|
+
"data-state": resolved ? "checked" : "unchecked",
|
|
163
|
+
disabled,
|
|
164
|
+
className: cn(toggleTrackVariants({ size, appearance }), className),
|
|
165
|
+
...labeling,
|
|
166
|
+
onClick: () => {
|
|
167
|
+
if (!disabled) {
|
|
168
|
+
setChecked(!resolved);
|
|
169
|
+
}
|
|
170
|
+
},
|
|
171
|
+
...rest,
|
|
172
|
+
children: [
|
|
173
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", id: labeledByChildren ? toggleLabelId : void 0, children }),
|
|
174
|
+
/* @__PURE__ */ jsx(
|
|
175
|
+
"span",
|
|
176
|
+
{
|
|
177
|
+
className: cn(
|
|
178
|
+
toggleThumbVariants({ size, thumbColor }),
|
|
179
|
+
"absolute top-1/2 -translate-y-1/2 transition-[transform] duration-200 ease-out"
|
|
180
|
+
),
|
|
181
|
+
style: { transform: `translateX(${resolved ? thumbShiftPx : 0}px)` }
|
|
182
|
+
}
|
|
183
|
+
)
|
|
184
|
+
]
|
|
185
|
+
}
|
|
186
|
+
);
|
|
187
|
+
}
|
|
188
|
+
ToggleBase.displayName = "Toggle";
|
|
189
|
+
|
|
190
|
+
export { ToggleBase, hasToggleLabelChildren, toggleThumbVariants, toggleTrackVariants };
|
|
191
|
+
//# sourceMappingURL=chunk-MEAVYU2Y.mjs.map
|
|
192
|
+
//# sourceMappingURL=chunk-MEAVYU2Y.mjs.map
|