@zyncat/ui 0.10.0 → 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +135 -40
- package/dist/alert.css +126 -121
- package/dist/alert.js +12 -14
- package/dist/alert.js.map +1 -1
- package/dist/avatar-group.js.map +1 -1
- package/dist/avatar.css +179 -174
- package/dist/avatar.js.map +1 -1
- package/dist/badge.css +166 -160
- package/dist/badge.js +1 -1
- package/dist/button.css +272 -246
- package/dist/button.js +1 -1
- package/dist/checkbox.css +158 -153
- package/dist/checkbox.js +2 -2
- package/dist/{chunk-UXONUUPI.js → chunk-227ZW4V7.js} +40 -32
- package/dist/chunk-227ZW4V7.js.map +1 -0
- package/dist/{chunk-2ERBBFZS.js → chunk-3MPF7FZV.js} +2 -2
- package/dist/chunk-3MPF7FZV.js.map +1 -0
- package/dist/{chunk-OMHQ4U4J.js → chunk-43M6GQ4Q.js} +86 -79
- package/dist/chunk-43M6GQ4Q.js.map +1 -0
- package/dist/{chunk-7SZCJ7WI.js → chunk-45R4Z5XN.js} +3 -3
- package/dist/chunk-45R4Z5XN.js.map +1 -0
- package/dist/{chunk-I4XQ4PV2.js → chunk-4BSHB7R3.js} +9 -7
- package/dist/chunk-4BSHB7R3.js.map +1 -0
- package/dist/{chunk-YGGCQNNU.js → chunk-4C5RZXBT.js} +33 -34
- package/dist/chunk-4C5RZXBT.js.map +1 -0
- package/dist/{chunk-2QWJ6FAX.js → chunk-5PZ43DCG.js} +31 -15
- package/dist/chunk-5PZ43DCG.js.map +1 -0
- package/dist/{chunk-S5ZTZANS.js → chunk-7IZJERGA.js} +35 -12
- package/dist/chunk-7IZJERGA.js.map +1 -0
- package/dist/{chunk-ZCOUPPTI.js → chunk-A5WTZACK.js} +22 -12
- package/dist/chunk-A5WTZACK.js.map +1 -0
- package/dist/{chunk-64UU4LGU.js → chunk-AADAJL7D.js} +3 -3
- package/dist/{chunk-64UU4LGU.js.map → chunk-AADAJL7D.js.map} +1 -1
- package/dist/{chunk-FTOAUJL5.js → chunk-CF4QHO4N.js} +21 -11
- package/dist/chunk-CF4QHO4N.js.map +1 -0
- package/dist/{chunk-WM5J5TDI.js → chunk-CNWTIMIP.js} +13 -17
- package/dist/chunk-CNWTIMIP.js.map +1 -0
- package/dist/{chunk-356HZMT4.js → chunk-DDRSMHN4.js} +31 -22
- package/dist/chunk-DDRSMHN4.js.map +1 -0
- package/dist/{chunk-VTJTGVZZ.js → chunk-DMX2F6B4.js} +2 -2
- package/dist/chunk-DMX2F6B4.js.map +1 -0
- package/dist/{chunk-3SBCBYB7.js → chunk-EAI4POPB.js} +2 -2
- package/dist/{chunk-3SBCBYB7.js.map → chunk-EAI4POPB.js.map} +1 -1
- package/dist/{chunk-Y7AJQVWJ.js → chunk-EF6RPXU7.js} +17 -15
- package/dist/chunk-EF6RPXU7.js.map +1 -0
- package/dist/{chunk-K5X2GCXU.js → chunk-FONOS5RN.js} +14 -15
- package/dist/chunk-FONOS5RN.js.map +1 -0
- package/dist/{chunk-PMECHR3A.js → chunk-FQEHSKEI.js} +2 -2
- package/dist/chunk-FQEHSKEI.js.map +1 -0
- package/dist/chunk-HDSFWZ7L.js +12 -0
- package/dist/chunk-HDSFWZ7L.js.map +1 -0
- package/dist/{chunk-2F5PITAO.js → chunk-HY5MPISE.js} +2 -2
- package/dist/chunk-HY5MPISE.js.map +1 -0
- package/dist/{chunk-QDK66S4G.js → chunk-I45AU6KH.js} +3 -3
- package/dist/chunk-I45AU6KH.js.map +1 -0
- package/dist/{chunk-YGCVWGUG.js → chunk-IJS7TPGV.js} +153 -46
- package/dist/chunk-IJS7TPGV.js.map +1 -0
- package/dist/{chunk-62P3KD57.js → chunk-IUQAUBVM.js} +18 -11
- package/dist/chunk-IUQAUBVM.js.map +1 -0
- package/dist/chunk-JY6A2ZJZ.js +44 -0
- package/dist/chunk-JY6A2ZJZ.js.map +1 -0
- package/dist/{chunk-XWUWYSCT.js → chunk-M43IOM5C.js} +20 -10
- package/dist/chunk-M43IOM5C.js.map +1 -0
- package/dist/{chunk-S7B34VGN.js → chunk-OWNMRMPN.js} +3 -3
- package/dist/{chunk-S7B34VGN.js.map → chunk-OWNMRMPN.js.map} +1 -1
- package/dist/chunk-RFRE4WKX.js +22 -0
- package/dist/chunk-RFRE4WKX.js.map +1 -0
- package/dist/{chunk-NNXJCLTV.js → chunk-RJFGWJ4W.js} +2 -2
- package/dist/chunk-RJFGWJ4W.js.map +1 -0
- package/dist/{chunk-NEF5XAHG.js → chunk-TUTXXC3W.js} +4 -4
- package/dist/chunk-TUTXXC3W.js.map +1 -0
- package/dist/chunk-TVYH4AN7.js +70 -0
- package/dist/chunk-TVYH4AN7.js.map +1 -0
- package/dist/{chunk-RCONNA7I.js → chunk-VAXCXZ53.js} +34 -22
- package/dist/chunk-VAXCXZ53.js.map +1 -0
- package/dist/chunk-XNIYSAMJ.js +52 -0
- package/dist/chunk-XNIYSAMJ.js.map +1 -0
- package/dist/{chunk-CONSWNIV.js → chunk-Y2YA7QRF.js} +6 -6
- package/dist/chunk-Y2YA7QRF.js.map +1 -0
- package/dist/cli.js +1809 -0
- package/dist/collapse.css +70 -61
- package/dist/collapse.js +2 -2
- package/dist/confetti.css +45 -0
- package/dist/confetti.js +540 -0
- package/dist/confetti.js.map +1 -0
- package/dist/count-badge.js +3 -3
- package/dist/count-badge.js.map +1 -1
- package/dist/date-field.js +24 -19
- package/dist/date-field.js.map +1 -1
- package/dist/date-picker.css +563 -559
- package/dist/date-range-field.js +58 -41
- package/dist/date-range-field.js.map +1 -1
- package/dist/datetime-field.js +24 -19
- package/dist/datetime-field.js.map +1 -1
- package/dist/dialog.css +176 -172
- package/dist/dialog.js +30 -19
- package/dist/dialog.js.map +1 -1
- package/dist/digit-strip.css +65 -0
- package/dist/dropdown.css +65 -0
- package/dist/dropdown.js +350 -0
- package/dist/dropdown.js.map +1 -0
- package/dist/emoji-picker.js +713 -0
- package/dist/emoji-picker.js.map +1 -0
- package/dist/facebook-feed.css +880 -0
- package/dist/facebook-feed.js +697 -0
- package/dist/facebook-feed.js.map +1 -0
- package/dist/flow-field.css +49 -0
- package/dist/flow-field.js +269 -0
- package/dist/flow-field.js.map +1 -0
- package/dist/glide.js +3 -3
- package/dist/icon.css +34 -30
- package/dist/input.css +296 -318
- package/dist/instagram-feed.css +378 -0
- package/dist/instagram-feed.js +272 -0
- package/dist/instagram-feed.js.map +1 -0
- package/dist/lens.css +119 -0
- package/dist/lens.js +307 -0
- package/dist/lens.js.map +1 -0
- package/dist/mcp.js +379 -184
- package/dist/menu-surface.css +127 -0
- package/dist/modal.css +11 -7
- package/dist/modal.js +24 -17
- package/dist/modal.js.map +1 -1
- package/dist/morphing-text.css +84 -0
- package/dist/morphing-text.js +256 -0
- package/dist/morphing-text.js.map +1 -0
- package/dist/motion-devtools.css +237 -233
- package/dist/motion-devtools.js +7 -6
- package/dist/motion-devtools.js.map +1 -1
- package/dist/motion-tokens.js +1 -1
- package/dist/multi-select.js +20 -17
- package/dist/multi-select.js.map +1 -1
- package/dist/number-field.js +11 -7
- package/dist/number-field.js.map +1 -1
- package/dist/odometer.css +58 -59
- package/dist/odometer.js +109 -0
- package/dist/odometer.js.map +1 -0
- package/dist/otp-field.js.map +1 -1
- package/dist/overlay.css +24 -20
- package/dist/pagination.css +42 -38
- package/dist/pagination.js +6 -12
- package/dist/pagination.js.map +1 -1
- package/dist/popover.css +69 -65
- package/dist/popover.js +12 -10
- package/dist/radio-group.css +275 -276
- package/dist/radio-group.js +70 -95
- package/dist/radio-group.js.map +1 -1
- package/dist/select.css +291 -386
- package/dist/select.js +18 -15
- package/dist/select.js.map +1 -1
- package/dist/sheet.css +47 -23
- package/dist/sheet.js +11 -10
- package/dist/status-badge.js +3 -3
- package/dist/status-badge.js.map +1 -1
- package/dist/styles.css +221 -0
- package/dist/support-rail.css +421 -0
- package/dist/support-rail.js +243 -0
- package/dist/support-rail.js.map +1 -0
- package/dist/table.css +333 -323
- package/dist/table.js +32 -21
- package/dist/table.js.map +1 -1
- package/dist/tabs.css +163 -156
- package/dist/tabs.js +26 -20
- package/dist/tabs.js.map +1 -1
- package/dist/tag.css +209 -231
- package/dist/tag.js +11 -10
- package/dist/tag.js.map +1 -1
- package/dist/text-field.js +7 -67
- package/dist/text-field.js.map +1 -1
- package/dist/textarea.css +205 -211
- package/dist/textarea.js +12 -12
- package/dist/textarea.js.map +1 -1
- package/dist/theme.js +69 -0
- package/dist/theme.js.map +1 -0
- package/dist/tiktok.css +662 -0
- package/dist/tiktok.js +494 -0
- package/dist/tiktok.js.map +1 -0
- package/dist/time-field.js +6 -6
- package/dist/time-field.js.map +1 -1
- package/dist/toast.css +237 -233
- package/dist/toast.js +43 -47
- package/dist/toast.js.map +1 -1
- package/dist/toggle-tag.js +1 -1
- package/dist/toggle-tag.js.map +1 -1
- package/dist/toggle.css +139 -135
- package/dist/toggle.js.map +1 -1
- package/dist/tooltip.css +79 -78
- package/dist/tooltip.js +50 -60
- package/dist/tooltip.js.map +1 -1
- package/dist/trigger.css +13 -0
- package/dist/{alert.d.ts → types/components/composites/alert/Alert.d.ts} +13 -15
- package/dist/{date-field.d.ts → types/components/composites/date-picker/DateField.d.ts} +4 -10
- package/dist/types/components/composites/date-picker/DateRangeField.d.ts +21 -0
- package/dist/{datetime-field.d.ts → types/components/composites/date-picker/DateTimeField.d.ts} +4 -10
- package/dist/{time-field.d.ts → types/components/composites/date-picker/TimeField.d.ts} +5 -11
- package/dist/types/components/composites/date-picker/calendar-panel.d.ts +16 -0
- package/dist/types/components/composites/date-picker/date-utils.d.ts +12 -0
- package/dist/types/components/composites/date-picker/field-shell.d.ts +46 -0
- package/dist/types/components/composites/date-picker/range-panel.d.ts +24 -0
- package/dist/types/components/composites/date-picker/time-core.d.ts +14 -0
- package/dist/types/components/composites/date-picker/use-day-focus.d.ts +2 -0
- package/dist/{dialog.d.ts → types/components/composites/dialog/Dialog.d.ts} +10 -11
- package/dist/types/components/composites/dropdown/Dropdown.d.ts +37 -0
- package/dist/types/components/composites/dropdown/menu-panel.d.ts +7 -0
- package/dist/types/components/composites/dropdown/types.d.ts +71 -0
- package/dist/types/components/composites/emoji-picker/EmojiPickerPanel.d.ts +45 -0
- package/dist/types/components/composites/emoji-picker/category-icons.d.ts +9 -0
- package/dist/types/components/composites/emoji-picker/data.d.ts +33 -0
- package/dist/types/components/composites/emoji-picker/dom.d.ts +19 -0
- package/dist/types/components/composites/emoji-picker/getEmojiUrl.d.ts +2 -0
- package/dist/types/components/composites/emoji-picker/navigation.d.ts +7 -0
- package/dist/types/components/composites/emoji-picker/picker.d.ts +20 -0
- package/dist/types/components/composites/emoji-picker/react/category-bar.d.ts +6 -0
- package/dist/types/components/composites/emoji-picker/react/useEmojiPicker.d.ts +50 -0
- package/dist/types/components/composites/emoji-picker/scaffold.d.ts +8 -0
- package/dist/types/components/composites/emoji-picker/search.d.ts +1 -0
- package/dist/types/components/composites/emoji-picker/types.d.ts +13 -0
- package/dist/{modal.d.ts → types/components/composites/modal/Modal.d.ts} +10 -11
- package/dist/{pagination.d.ts → types/components/composites/pagination/Pagination.d.ts} +5 -8
- package/dist/{popover.d.ts → types/components/composites/popover/Popover.d.ts} +11 -14
- package/dist/{multi-select.d.ts → types/components/composites/select/MultiSelect.d.ts} +12 -11
- package/dist/{select.d.ts → types/components/composites/select/Select.d.ts} +16 -14
- package/dist/types/components/composites/select/core/index.d.ts +4 -0
- package/dist/types/components/composites/select/core/menu.d.ts +13 -0
- package/dist/types/components/composites/select/core/panel.d.ts +18 -0
- package/dist/types/components/composites/select/core/trigger.d.ts +16 -0
- package/dist/{types-SGMShK7R.d.ts → types/components/composites/select/core/types.d.ts} +13 -6
- package/dist/types/components/composites/select/core/use-listbox.d.ts +42 -0
- package/dist/{sheet.d.ts → types/components/composites/sheet/Sheet.d.ts} +10 -11
- package/dist/types/components/composites/sheet/use-sheet-drag.d.ts +13 -0
- package/dist/{table.d.ts → types/components/composites/table/Table.d.ts} +12 -12
- package/dist/{tabs.d.ts → types/components/composites/tabs/Tabs.d.ts} +13 -13
- package/dist/types/components/composites/toast/Toast.d.ts +10 -0
- package/dist/{toast-store.d.ts → types/components/composites/toast/toast-store.d.ts} +12 -14
- package/dist/{tooltip.d.ts → types/components/composites/tooltip/Tooltip.d.ts} +6 -10
- package/dist/types/components/composites/tooltip/tooltip-host.d.ts +1 -0
- package/dist/types/components/composites/tooltip/tooltip-store.d.ts +29 -0
- package/dist/types/components/compound/support-rail/SupportRail.d.ts +41 -0
- package/dist/types/components/dev/MotionDevtools.d.ts +24 -0
- package/dist/types/components/dev/slowmo-engine.d.ts +27 -0
- package/dist/types/components/expressive/confetti/Confetti.d.ts +43 -0
- package/dist/types/components/expressive/facebook-feed/FacebookFeed.d.ts +73 -0
- package/dist/types/components/expressive/facebook-feed/chrome.d.ts +30 -0
- package/dist/types/components/expressive/facebook-feed/icons.d.ts +21 -0
- package/dist/types/components/expressive/facebook-feed/post.d.ts +25 -0
- package/dist/types/components/expressive/facebook-feed/reel.d.ts +26 -0
- package/dist/types/components/expressive/facebook-feed/story.d.ts +20 -0
- package/dist/types/components/expressive/flow-field/FlowField.d.ts +23 -0
- package/dist/types/components/expressive/instagram-feed/InstagramFeed.d.ts +59 -0
- package/dist/types/components/expressive/lens/Lens.d.ts +23 -0
- package/dist/types/components/expressive/morphing-text/MorphingText.d.ts +21 -0
- package/dist/types/components/expressive/odometer/Odometer.d.ts +21 -0
- package/dist/types/components/expressive/tiktok/TikTok.d.ts +85 -0
- package/dist/types/components/expressive/tiktok/glyphs.d.ts +40 -0
- package/dist/types/components/expressive/typing-lines/TypingLines.d.ts +25 -0
- package/dist/types/components/expressive/weight-field/WeightField.d.ts +19 -0
- package/dist/types/components/expressive/youtube/YouTube.d.ts +73 -0
- package/dist/types/components/expressive/youtube/format.d.ts +2 -0
- package/dist/types/components/expressive/youtube/glyphs.d.ts +16 -0
- package/dist/types/components/expressive/youtube/media.d.ts +8 -0
- package/dist/types/components/expressive/youtube/post.d.ts +19 -0
- package/dist/types/components/expressive/youtube/short.d.ts +18 -0
- package/dist/types/components/expressive/youtube/video.d.ts +14 -0
- package/dist/types/components/internal/collection/collection.d.ts +19 -0
- package/dist/types/components/internal/glass/glint.d.ts +1 -0
- package/dist/types/components/internal/hooks/use-controllable.d.ts +1 -0
- package/dist/types/components/internal/hooks/use-media-query.d.ts +1 -0
- package/dist/types/components/internal/hooks/use-scroll-edges.d.ts +10 -0
- package/dist/types/components/internal/hooks/use-typeahead.d.ts +5 -0
- package/dist/types/components/internal/icon/Icon.d.ts +33 -0
- package/dist/types/components/internal/icon/IconSlot.d.ts +7 -0
- package/dist/types/components/internal/menu/menu-row.d.ts +11 -0
- package/dist/types/components/internal/overlay/focus.d.ts +8 -0
- package/dist/types/components/internal/overlay/layer.d.ts +38 -0
- package/dist/types/components/internal/overlay/modal.d.ts +18 -0
- package/dist/types/components/internal/overlay/position.d.ts +14 -0
- package/dist/types/components/internal/support/types.d.ts +15 -0
- package/dist/types/components/internal/utils/activation.d.ts +23 -0
- package/dist/types/components/internal/utils/cx.d.ts +1 -0
- package/dist/types/components/internal/utils/token-px.d.ts +1 -0
- package/dist/{avatar.d.ts → types/components/primitives/avatar/Avatar.d.ts} +10 -12
- package/dist/{avatar-group.d.ts → types/components/primitives/avatar/AvatarGroup.d.ts} +7 -9
- package/dist/{badge.d.ts → types/components/primitives/badge/Badge.d.ts} +8 -10
- package/dist/types/components/primitives/badge/CountBadge.d.ts +8 -0
- package/dist/types/components/primitives/badge/StatusBadge.d.ts +15 -0
- package/dist/types/components/primitives/badge/digit-strip.d.ts +5 -0
- package/dist/{button.d.ts → types/components/primitives/button/Button.d.ts} +6 -8
- package/dist/{checkbox.d.ts → types/components/primitives/checkbox/Checkbox.d.ts} +6 -8
- package/dist/types/components/primitives/checkbox/check-glyph.d.ts +6 -0
- package/dist/{collapse.d.ts → types/components/primitives/collapse/Collapse.d.ts} +12 -13
- package/dist/types/components/primitives/collapse/collapse.typecheck.d.ts +2 -0
- package/dist/{number-field.d.ts → types/components/primitives/input/NumberField.d.ts} +7 -9
- package/dist/{otp-field.d.ts → types/components/primitives/input/OtpField.d.ts} +6 -8
- package/dist/{text-field.d.ts → types/components/primitives/input/TextField.d.ts} +7 -9
- package/dist/types/components/primitives/input/field-chrome.d.ts +45 -0
- package/dist/{radio-group.d.ts → types/components/primitives/radio-group/RadioGroup.d.ts} +8 -10
- package/dist/{tag.d.ts → types/components/primitives/tag/Tag.d.ts} +9 -12
- package/dist/{toggle-tag.d.ts → types/components/primitives/tag/ToggleTag.d.ts} +7 -8
- package/dist/{textarea.d.ts → types/components/primitives/textarea/Textarea.d.ts} +7 -9
- package/dist/{toggle.d.ts → types/components/primitives/toggle/Toggle.d.ts} +6 -8
- package/dist/{dom-props-C0jrllBw.d.ts → types/dom-props.d.ts} +1 -3
- package/dist/types/engine/animate.d.ts +30 -0
- package/dist/types/engine/drag.d.ts +17 -0
- package/dist/types/engine/ease.d.ts +15 -0
- package/dist/types/engine/flip.d.ts +18 -0
- package/dist/types/engine/index.d.ts +4 -0
- package/dist/types/engine/loop.d.ts +9 -0
- package/dist/types/motion/element.d.ts +17 -0
- package/dist/types/motion/flip.d.ts +4 -0
- package/dist/types/motion/glide.d.ts +11 -0
- package/dist/types/motion/motion-timing.d.ts +16 -0
- package/dist/types/motion/presence-context.d.ts +11 -0
- package/dist/types/motion/presence.d.ts +12 -0
- package/dist/types/motion/presets.d.ts +6 -0
- package/dist/{timing-7JA_zQHP.d.ts → types/motion/timing.d.ts} +9 -9
- package/dist/types/motion/use-motion.d.ts +17 -0
- package/dist/types/tokens/component-styles.generated.d.ts +262 -0
- package/dist/{motion-scale-Canq4stZ.d.ts → types/tokens/motion-scale.d.ts} +4 -4
- package/dist/{motion-tokens.d.ts → types/tokens/motion-tokens.d.ts} +9 -9
- package/dist/types/tokens/theme-tokens.generated.d.ts +1249 -0
- package/dist/types/tokens/theme.d.ts +12 -0
- package/dist/typing-lines.css +92 -0
- package/dist/typing-lines.js +139 -0
- package/dist/typing-lines.js.map +1 -0
- package/dist/weight-field.css +84 -0
- package/dist/weight-field.js +17 -0
- package/dist/weight-field.js.map +1 -0
- package/dist/youtube.css +611 -0
- package/dist/youtube.js +814 -0
- package/dist/youtube.js.map +1 -0
- package/package.json +155 -49
- package/skills/zyncat-ui/SKILL.md +95 -0
- package/skills/zyncat-ui/references/components.md +85 -0
- package/skills/zyncat-ui/references/recipes.md +171 -0
- package/skills/zyncat-ui/references/theming.md +83 -0
- package/src/components/composites/alert/Alert.tsx +13 -11
- package/src/components/composites/alert/Alert.usage.md +15 -0
- package/src/components/composites/alert/alert.css +126 -121
- package/src/components/composites/date-picker/DateField.tsx +7 -2
- package/src/components/composites/date-picker/DateField.usage.md +10 -0
- package/src/components/composites/date-picker/DateRangeField.tsx +18 -16
- package/src/components/composites/date-picker/DateRangeField.usage.md +10 -0
- package/src/components/composites/date-picker/DateTimeField.tsx +10 -5
- package/src/components/composites/date-picker/DateTimeField.usage.md +12 -0
- package/src/components/composites/date-picker/TimeField.tsx +3 -1
- package/src/components/composites/date-picker/TimeField.usage.md +12 -0
- package/src/components/composites/date-picker/calendar-panel.tsx +15 -10
- package/src/components/composites/date-picker/date-picker.css +563 -559
- package/src/components/composites/date-picker/field-shell.tsx +9 -3
- package/src/components/composites/date-picker/range-panel.tsx +23 -8
- package/src/components/composites/date-picker/time-core.tsx +2 -0
- package/src/components/composites/dialog/Dialog.tsx +30 -15
- package/src/components/composites/dialog/Dialog.usage.md +17 -0
- package/src/components/composites/dialog/dialog.css +176 -172
- package/src/components/composites/dropdown/Dropdown.tsx +184 -0
- package/src/components/composites/dropdown/Dropdown.usage.md +19 -0
- package/src/components/composites/dropdown/dropdown.css +65 -0
- package/src/components/composites/dropdown/menu-panel.tsx +255 -0
- package/src/components/composites/dropdown/types.ts +95 -0
- package/src/components/composites/emoji-picker/EmojiPickerPanel.tsx +153 -0
- package/src/components/composites/emoji-picker/EmojiPickerPanel.usage.md +26 -0
- package/src/components/composites/emoji-picker/category-icons.ts +29 -0
- package/src/components/composites/emoji-picker/data.ts +83 -0
- package/src/components/composites/emoji-picker/dom.ts +79 -0
- package/src/components/composites/emoji-picker/getEmojiUrl.ts +17 -0
- package/src/components/composites/emoji-picker/navigation.ts +86 -0
- package/src/components/composites/emoji-picker/picker.ts +169 -0
- package/src/components/composites/emoji-picker/react/category-bar.tsx +77 -0
- package/src/components/composites/emoji-picker/react/useEmojiPicker.ts +139 -0
- package/src/components/composites/emoji-picker/scaffold.ts +74 -0
- package/src/components/composites/emoji-picker/search.ts +79 -0
- package/src/components/composites/emoji-picker/styles.css +221 -0
- package/src/components/composites/emoji-picker/types.ts +14 -0
- package/src/components/composites/modal/Modal.tsx +24 -13
- package/src/components/composites/modal/Modal.usage.md +24 -0
- package/src/components/composites/modal/modal.css +11 -7
- package/src/components/composites/pagination/Pagination.tsx +6 -11
- package/src/components/composites/pagination/Pagination.usage.md +12 -0
- package/src/components/composites/pagination/pagination.css +42 -38
- package/src/components/composites/popover/Popover.tsx +22 -7
- package/src/components/composites/popover/Popover.usage.md +15 -0
- package/src/components/composites/popover/popover.css +69 -65
- package/src/components/composites/select/MultiSelect.tsx +13 -5
- package/src/components/composites/select/MultiSelect.usage.md +12 -0
- package/src/components/composites/select/Select.tsx +23 -7
- package/src/components/composites/select/Select.usage.md +20 -0
- package/src/components/composites/select/core/index.ts +1 -1
- package/src/components/composites/select/core/menu.tsx +8 -6
- package/src/components/composites/select/core/panel.tsx +25 -26
- package/src/components/composites/select/core/trigger.tsx +36 -24
- package/src/components/composites/select/core/types.ts +17 -15
- package/src/components/composites/select/core/use-listbox.ts +22 -21
- package/src/components/composites/select/select.css +291 -386
- package/src/components/composites/sheet/Sheet.tsx +28 -18
- package/src/components/composites/sheet/Sheet.usage.md +15 -0
- package/src/components/composites/sheet/sheet.css +47 -23
- package/src/components/composites/sheet/use-sheet-drag.ts +19 -15
- package/src/components/composites/table/Table.tsx +17 -6
- package/src/components/composites/table/Table.usage.md +19 -0
- package/src/components/composites/table/table.css +333 -323
- package/src/components/composites/tabs/Tabs.tsx +31 -23
- package/src/components/composites/tabs/Tabs.usage.md +13 -0
- package/src/components/composites/tabs/tabs.css +163 -156
- package/src/components/composites/toast/Toast.tsx +48 -51
- package/src/components/composites/toast/Toast.usage.md +23 -0
- package/src/components/composites/toast/toast-store.usage.md +16 -0
- package/src/components/composites/toast/toast.css +237 -233
- package/src/components/composites/tooltip/Tooltip.tsx +13 -8
- package/src/components/composites/tooltip/Tooltip.usage.md +14 -0
- package/src/components/composites/tooltip/tooltip-host.tsx +29 -61
- package/src/components/composites/tooltip/tooltip-store.ts +10 -0
- package/src/components/composites/tooltip/tooltip.css +79 -78
- package/src/components/compound/support-rail/SupportRail.tsx +343 -0
- package/src/components/compound/support-rail/SupportRail.usage.md +18 -0
- package/src/components/compound/support-rail/support-rail.css +421 -0
- package/src/components/dev/MotionDevtools.tsx +3 -1
- package/src/components/dev/MotionDevtools.usage.md +16 -0
- package/src/components/dev/motion-devtools.css +237 -233
- package/src/components/expressive/confetti/Confetti.tsx +727 -0
- package/src/components/expressive/confetti/Confetti.usage.md +18 -0
- package/src/components/expressive/confetti/confetti.css +45 -0
- package/src/components/expressive/facebook-feed/FacebookFeed.tsx +200 -0
- package/src/components/expressive/facebook-feed/FacebookFeed.usage.md +18 -0
- package/src/components/expressive/facebook-feed/chrome.tsx +120 -0
- package/src/components/expressive/facebook-feed/facebook-feed.css +880 -0
- package/src/components/expressive/facebook-feed/icons.tsx +145 -0
- package/src/components/expressive/facebook-feed/post.tsx +213 -0
- package/src/components/expressive/facebook-feed/reel.tsx +199 -0
- package/src/components/expressive/facebook-feed/story.tsx +132 -0
- package/src/components/expressive/flow-field/FlowField.tsx +348 -0
- package/src/components/expressive/flow-field/FlowField.usage.md +19 -0
- package/src/components/expressive/flow-field/flow-field.css +49 -0
- package/src/components/expressive/instagram-feed/InstagramFeed.tsx +374 -0
- package/src/components/expressive/instagram-feed/InstagramFeed.usage.md +18 -0
- package/src/components/expressive/instagram-feed/instagram-feed.css +378 -0
- package/src/components/expressive/lens/Lens.tsx +415 -0
- package/src/components/expressive/lens/Lens.usage.md +20 -0
- package/src/components/expressive/lens/lens.css +119 -0
- package/src/components/expressive/morphing-text/MorphingText.tsx +328 -0
- package/src/components/expressive/morphing-text/MorphingText.usage.md +19 -0
- package/src/components/expressive/morphing-text/morphing-text.css +84 -0
- package/src/components/expressive/odometer/Odometer.tsx +158 -0
- package/src/components/expressive/odometer/Odometer.usage.md +17 -0
- package/src/components/expressive/odometer/odometer.css +61 -0
- package/src/components/expressive/tiktok/TikTok.tsx +542 -0
- package/src/components/expressive/tiktok/TikTok.usage.md +17 -0
- package/src/components/expressive/tiktok/glyphs.tsx +163 -0
- package/src/components/expressive/tiktok/tiktok.css +662 -0
- package/src/components/expressive/typing-lines/TypingLines.tsx +0 -0
- package/src/components/expressive/typing-lines/TypingLines.usage.md +17 -0
- package/src/components/expressive/typing-lines/typing-lines.css +92 -0
- package/src/components/expressive/weight-field/WeightField.tsx +41 -0
- package/src/components/expressive/weight-field/WeightField.usage.md +20 -0
- package/src/components/expressive/weight-field/weight-field.css +84 -0
- package/src/components/expressive/youtube/YouTube.tsx +192 -0
- package/src/components/expressive/youtube/YouTube.usage.md +18 -0
- package/src/components/expressive/youtube/format.ts +22 -0
- package/src/components/expressive/youtube/glyphs.tsx +235 -0
- package/src/components/expressive/youtube/media.tsx +18 -0
- package/src/components/expressive/youtube/post.tsx +282 -0
- package/src/components/expressive/youtube/short.tsx +212 -0
- package/src/components/expressive/youtube/video.tsx +75 -0
- package/src/components/expressive/youtube/youtube.css +611 -0
- package/src/components/internal/collection/collection.ts +44 -0
- package/src/components/internal/glass/glass.css +88 -84
- package/src/components/internal/hooks/use-media-query.ts +20 -0
- package/src/components/internal/hooks/use-typeahead.ts +28 -0
- package/src/components/internal/icon/Icon.tsx +2 -0
- package/src/components/internal/icon/IconSlot.tsx +2 -0
- package/src/components/internal/icon/icon.css +34 -30
- package/src/components/internal/menu/menu-row.tsx +34 -0
- package/src/components/internal/menu/menu-surface.css +127 -0
- package/src/components/internal/overlay/focus.ts +26 -10
- package/src/components/internal/overlay/layer.tsx +50 -19
- package/src/components/internal/overlay/modal.tsx +14 -12
- package/src/components/internal/overlay/overlay.css +24 -20
- package/src/components/internal/overlay/position.ts +19 -9
- package/src/components/internal/overlay/trigger.css +13 -0
- package/src/components/internal/support/types.ts +16 -0
- package/src/components/internal/utils/activation.ts +78 -0
- package/src/components/primitives/avatar/Avatar.tsx +2 -0
- package/src/components/primitives/avatar/Avatar.usage.md +12 -0
- package/src/components/primitives/avatar/AvatarGroup.tsx +3 -1
- package/src/components/primitives/avatar/AvatarGroup.usage.md +15 -0
- package/src/components/primitives/avatar/avatar.css +179 -174
- package/src/components/primitives/badge/Badge.tsx +3 -1
- package/src/components/primitives/badge/Badge.usage.md +14 -0
- package/src/components/primitives/badge/CountBadge.tsx +2 -2
- package/src/components/primitives/badge/CountBadge.usage.md +13 -0
- package/src/components/primitives/badge/StatusBadge.tsx +3 -1
- package/src/components/primitives/badge/StatusBadge.usage.md +14 -0
- package/src/components/primitives/badge/badge.css +166 -160
- package/src/components/primitives/badge/digit-strip.css +65 -0
- package/src/components/primitives/badge/{odometer.tsx → digit-strip.tsx} +3 -3
- package/src/components/primitives/button/Button.tsx +2 -0
- package/src/components/primitives/button/Button.usage.md +14 -0
- package/src/components/primitives/button/button.css +272 -246
- package/src/components/primitives/checkbox/Checkbox.tsx +3 -1
- package/src/components/primitives/checkbox/Checkbox.usage.md +12 -0
- package/src/components/primitives/checkbox/check-glyph.tsx +1 -0
- package/src/components/primitives/checkbox/checkbox.css +158 -153
- package/src/components/primitives/collapse/Collapse.tsx +3 -1
- package/src/components/primitives/collapse/Collapse.usage.md +17 -0
- package/src/components/primitives/collapse/collapse.css +70 -61
- package/src/components/primitives/collapse/collapse.typecheck.tsx +2 -0
- package/src/components/primitives/input/NumberField.tsx +18 -5
- package/src/components/primitives/input/NumberField.usage.md +12 -0
- package/src/components/primitives/input/OtpField.tsx +2 -0
- package/src/components/primitives/input/OtpField.usage.md +12 -0
- package/src/components/primitives/input/TextField.tsx +16 -4
- package/src/components/primitives/input/TextField.usage.md +13 -0
- package/src/components/primitives/input/field-chrome.tsx +11 -2
- package/src/components/primitives/input/input.css +296 -318
- package/src/components/primitives/radio-group/RadioGroup.tsx +20 -44
- package/src/components/primitives/radio-group/RadioGroup.usage.md +13 -0
- package/src/components/primitives/radio-group/radio-group.css +275 -276
- package/src/components/primitives/tag/Tag.tsx +10 -6
- package/src/components/primitives/tag/Tag.usage.md +14 -0
- package/src/components/primitives/tag/ToggleTag.tsx +4 -2
- package/src/components/primitives/tag/ToggleTag.usage.md +14 -0
- package/src/components/primitives/tag/tag.css +209 -231
- package/src/components/primitives/textarea/Textarea.tsx +17 -7
- package/src/components/primitives/textarea/Textarea.usage.md +12 -0
- package/src/components/primitives/textarea/textarea.css +205 -211
- package/src/components/primitives/toggle/Toggle.tsx +3 -1
- package/src/components/primitives/toggle/Toggle.usage.md +12 -0
- package/src/components/primitives/toggle/toggle.css +139 -135
- package/src/engine/animate.ts +40 -13
- package/src/engine/ease.ts +1 -0
- package/src/engine/flip.ts +32 -15
- package/src/engine/index.ts +2 -1
- package/src/engine/loop.ts +97 -0
- package/src/mcp/server.ts +315 -221
- package/src/motion/element.tsx +1 -0
- package/src/motion/flip.ts +29 -10
- package/src/motion/glide.tsx +11 -14
- package/src/motion/glide.usage.md +15 -0
- package/src/motion/motion-timing.ts +3 -3
- package/src/motion/presence.tsx +38 -21
- package/src/motion/presets.ts +13 -0
- package/src/motion/timing.ts +1 -0
- package/src/motion/use-motion.ts +16 -3
- package/src/styles.css +5 -0
- package/src/tokens/avatar.css +20 -16
- package/src/tokens/color.css +67 -56
- package/src/tokens/component-styles.generated.ts +270 -0
- package/src/tokens/elevation.css +28 -17
- package/src/tokens/fonts.css +1 -1
- package/src/tokens/glass.css +19 -15
- package/src/tokens/icons.css +8 -4
- package/src/tokens/layers.css +9 -4
- package/src/tokens/motion-scale.ts +4 -0
- package/src/tokens/motion-tokens.ts +42 -12
- package/src/tokens/motion-tokens.usage.md +16 -0
- package/src/tokens/motion.css +63 -45
- package/src/tokens/radius.css +12 -8
- package/src/tokens/semantic.css +62 -54
- package/src/tokens/spacing.css +25 -21
- package/src/tokens/theme-tokens.generated.ts +1278 -0
- package/src/tokens/theme.tsx +83 -0
- package/src/tokens/theme.usage.md +36 -0
- package/src/tokens/typography.css +53 -49
- package/dist/chunk-2ERBBFZS.js.map +0 -1
- package/dist/chunk-2F5PITAO.js.map +0 -1
- package/dist/chunk-2QWJ6FAX.js.map +0 -1
- package/dist/chunk-356HZMT4.js.map +0 -1
- package/dist/chunk-62P3KD57.js.map +0 -1
- package/dist/chunk-7SZCJ7WI.js.map +0 -1
- package/dist/chunk-CONSWNIV.js.map +0 -1
- package/dist/chunk-FTOAUJL5.js.map +0 -1
- package/dist/chunk-I4XQ4PV2.js.map +0 -1
- package/dist/chunk-K5X2GCXU.js.map +0 -1
- package/dist/chunk-NEF5XAHG.js.map +0 -1
- package/dist/chunk-NNXJCLTV.js.map +0 -1
- package/dist/chunk-OMHQ4U4J.js.map +0 -1
- package/dist/chunk-PMECHR3A.js.map +0 -1
- package/dist/chunk-QDK66S4G.js.map +0 -1
- package/dist/chunk-RCONNA7I.js.map +0 -1
- package/dist/chunk-S5ZTZANS.js.map +0 -1
- package/dist/chunk-UXONUUPI.js.map +0 -1
- package/dist/chunk-VTJTGVZZ.js.map +0 -1
- package/dist/chunk-WM5J5TDI.js.map +0 -1
- package/dist/chunk-XWUWYSCT.js.map +0 -1
- package/dist/chunk-Y7AJQVWJ.js.map +0 -1
- package/dist/chunk-YGCVWGUG.js.map +0 -1
- package/dist/chunk-YGGCQNNU.js.map +0 -1
- package/dist/chunk-ZCOUPPTI.js.map +0 -1
- package/dist/count-badge.d.ts +0 -13
- package/dist/date-range-field.d.ts +0 -33
- package/dist/field-chrome-CMPOQSLs.d.ts +0 -28
- package/dist/field-shell-Cuda-feL.d.ts +0 -24
- package/dist/glide.d.ts +0 -15
- package/dist/motion-devtools.d.ts +0 -51
- package/dist/status-badge.d.ts +0 -19
- package/dist/toast.d.ts +0 -12
- package/llms.txt +0 -220
- package/src/components/primitives/badge/odometer.css +0 -62
package/dist/toast.js
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
'use client';import { DEFAULT_TOASTER_CONFIG, UIToast } from './chunk-TYHR4VNM.js';
|
|
2
2
|
export { toast } from './chunk-TYHR4VNM.js';
|
|
3
3
|
import { tokenPx } from './chunk-UE63OOVG.js';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import './chunk-
|
|
7
|
-
import
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
4
|
+
import { popOut } from './chunk-HDSFWZ7L.js';
|
|
5
|
+
import { Presence } from './chunk-DDRSMHN4.js';
|
|
6
|
+
import { Motion } from './chunk-5PZ43DCG.js';
|
|
7
|
+
import './chunk-M43IOM5C.js';
|
|
8
|
+
import { animate, startDrag } from './chunk-IJS7TPGV.js';
|
|
9
|
+
import { Icon } from './chunk-EAI4POPB.js';
|
|
10
|
+
import { fireGlint } from './chunk-OWNMRMPN.js';
|
|
11
|
+
import { UIMotion } from './chunk-7IZJERGA.js';
|
|
12
|
+
import { Button } from './chunk-HY5MPISE.js';
|
|
12
13
|
import { cx } from './chunk-QGNC7LH5.js';
|
|
13
14
|
import './toast.css';
|
|
14
15
|
import { useEffect, useSyncExternalStore, useState, useRef, useLayoutEffect } from 'react';
|
|
@@ -20,6 +21,7 @@ var store = UIToast;
|
|
|
20
21
|
var COLLAPSE_GRACE = 140;
|
|
21
22
|
var SWIPE_X = 64;
|
|
22
23
|
var SWIPE_V = 480;
|
|
24
|
+
var SWIPE_FLING_X = 420;
|
|
23
25
|
var GAP = 0;
|
|
24
26
|
function stackGap() {
|
|
25
27
|
if (!GAP) GAP = tokenPx("--space-3") || 12;
|
|
@@ -32,33 +34,24 @@ var TONE_ICON = {
|
|
|
32
34
|
info: "info"
|
|
33
35
|
};
|
|
34
36
|
function useToneGesture(tone, ref) {
|
|
35
|
-
const prevTone = useRef(null);
|
|
36
37
|
useEffect(() => {
|
|
37
|
-
const prev = prevTone.current;
|
|
38
|
-
prevTone.current = tone;
|
|
39
|
-
if (tone === prev) return;
|
|
40
38
|
if (tone === "success") return fireGlint(ref.current);
|
|
41
39
|
if (tone === "danger" && ref.current) {
|
|
42
|
-
const
|
|
43
|
-
if (!shake) return;
|
|
44
|
-
const fall = animate(shake, {
|
|
40
|
+
const fall = animate(ref.current, {
|
|
45
41
|
x: [0, -7, 5, -2, 0],
|
|
46
|
-
timing: { duration: SM.dur.slow, ease: SM.ease.standard, delay: SM.dur.base }
|
|
42
|
+
timing: { duration: SM.dur.slow, ease: SM.ease.standard, delay: SM.dur.base, fill: "none" },
|
|
43
|
+
composite: "add"
|
|
47
44
|
});
|
|
48
|
-
fall.finished.then(() => fall.stop());
|
|
49
45
|
return () => fall.stop();
|
|
50
46
|
}
|
|
51
47
|
}, [tone]);
|
|
52
48
|
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
}, [token]);
|
|
60
|
-
return ref;
|
|
61
|
-
}
|
|
49
|
+
var GLYPH_POP = [
|
|
50
|
+
{ scale: [0.5, 1], timing: SM.t.settle },
|
|
51
|
+
{ opacity: [0, 1], timing: SM.t.enter }
|
|
52
|
+
];
|
|
53
|
+
var TEXT_FADE = [{ opacity: [0, 1], timing: SM.t.enter }];
|
|
54
|
+
var COUNT_POP = [{ scale: [0.6, 1], timing: SM.t.settle }];
|
|
62
55
|
function ToastItem({
|
|
63
56
|
t,
|
|
64
57
|
depth,
|
|
@@ -72,6 +65,8 @@ function ToastItem({
|
|
|
72
65
|
const ref = useRef(null);
|
|
73
66
|
const settled = useRef(false);
|
|
74
67
|
const swipeBack = useRef(null);
|
|
68
|
+
const swipeX = useRef(0);
|
|
69
|
+
const restY = useRef(0);
|
|
75
70
|
useToneGesture(t.tone, ref);
|
|
76
71
|
useLayoutEffect(() => {
|
|
77
72
|
if (ref.current && ref.current.firstElementChild)
|
|
@@ -83,10 +78,11 @@ function ToastItem({
|
|
|
83
78
|
el.style.pointerEvents = hidden ? "none" : "auto";
|
|
84
79
|
const y = isTop ? offset : -offset;
|
|
85
80
|
const scale = 1 - depth * 0.05;
|
|
81
|
+
restY.current = y;
|
|
86
82
|
if (settled.current) {
|
|
87
83
|
animate(
|
|
88
84
|
el,
|
|
89
|
-
{ y: [y], scale: [scale], height: [frameHeight ?? "auto"], timing: SM.t.settle },
|
|
85
|
+
{ x: [swipeX.current], y: [y], scale: [scale], height: [frameHeight ?? "auto"], timing: SM.t.settle },
|
|
90
86
|
{ opacity: [hidden ? 0 : 1], timing: SM.t.enter }
|
|
91
87
|
);
|
|
92
88
|
return;
|
|
@@ -94,27 +90,35 @@ function ToastItem({
|
|
|
94
90
|
settled.current = true;
|
|
95
91
|
animate(
|
|
96
92
|
el,
|
|
97
|
-
{ y: [isTop ? -
|
|
93
|
+
{ y: [isTop ? -SM.dist.lg : SM.dist.lg, y], scale: [SM.scale.floating, scale], timing: SM.t.settle },
|
|
98
94
|
{ opacity: [0, hidden ? 0 : 1], timing: SM.t.enter }
|
|
99
95
|
);
|
|
100
96
|
}, [offset, depth, hidden, frameHeight, isTop]);
|
|
101
97
|
const onPointerDown = (e) => {
|
|
102
|
-
const
|
|
103
|
-
if (!t.dismissible || e.button !== 0 || !
|
|
98
|
+
const el = ref.current;
|
|
99
|
+
if (!t.dismissible || e.button !== 0 || !el) return;
|
|
104
100
|
swipeBack.current?.stop();
|
|
101
|
+
swipeBack.current = null;
|
|
102
|
+
const place = (x) => {
|
|
103
|
+
swipeX.current = x;
|
|
104
|
+
animate(el, { x: [x], y: [restY.current], timing: { duration: 0 } });
|
|
105
|
+
};
|
|
106
|
+
place(swipeX.current);
|
|
105
107
|
startDrag(e, {
|
|
106
108
|
onMove: (info) => {
|
|
107
109
|
const dx = info.offset.x;
|
|
108
|
-
|
|
110
|
+
place(dx > 0 ? dx * 0.9 : dx * 0.04);
|
|
109
111
|
},
|
|
110
112
|
onEnd: (info) => {
|
|
111
113
|
if (info.offset.x > SWIPE_X || info.velocity.x > SWIPE_V) {
|
|
112
|
-
|
|
114
|
+
swipeX.current = SWIPE_FLING_X;
|
|
115
|
+
animate(el, { x: [SWIPE_FLING_X], y: [restY.current], timing: SM.t.exit }).finished.then(
|
|
116
|
+
() => store.dismiss(t.id)
|
|
117
|
+
);
|
|
113
118
|
return;
|
|
114
119
|
}
|
|
115
|
-
|
|
116
|
-
swipeBack.current =
|
|
117
|
-
back.finished.then(() => back.stop());
|
|
120
|
+
swipeX.current = 0;
|
|
121
|
+
swipeBack.current = animate(el, { x: [0], y: [restY.current], timing: SM.t.settle });
|
|
118
122
|
}
|
|
119
123
|
});
|
|
120
124
|
};
|
|
@@ -123,7 +127,7 @@ function ToastItem({
|
|
|
123
127
|
{
|
|
124
128
|
as: "li",
|
|
125
129
|
ref,
|
|
126
|
-
exit:
|
|
130
|
+
exit: popOut(SM.scale.floating, SM.t.exit),
|
|
127
131
|
className: "toast glass",
|
|
128
132
|
"data-tone": t.tone,
|
|
129
133
|
"data-behind": behind ? "" : void 0,
|
|
@@ -138,17 +142,9 @@ function ToastItem({
|
|
|
138
142
|
);
|
|
139
143
|
}
|
|
140
144
|
function ToastBody({ t }) {
|
|
141
|
-
const glyphRef = useReplay(t.tone, () => [
|
|
142
|
-
{ scale: [0.5, 1], timing: SM.t.settle },
|
|
143
|
-
{ opacity: [0, 1], timing: SM.t.enter }
|
|
144
|
-
]);
|
|
145
|
-
const textRef = useReplay(String(t.message) + "-" + String(t.description), () => [
|
|
146
|
-
{ opacity: [0, 1], timing: SM.t.enter }
|
|
147
|
-
]);
|
|
148
|
-
const countRef = useReplay(t.count, () => [{ scale: [0.6, 1], timing: SM.t.settle }]);
|
|
149
145
|
return /* @__PURE__ */ jsxs("div", { className: "toast__inner", children: [
|
|
150
146
|
(t.tone !== "default" || isFinite(t.duration)) && /* @__PURE__ */ jsxs("span", { className: "toast__icon", children: [
|
|
151
|
-
t.tone !== "default" && /* @__PURE__ */ jsx(
|
|
147
|
+
t.tone !== "default" && /* @__PURE__ */ jsx(Motion, { as: "span", className: "toast__icon-glyph", animate: GLYPH_POP, deps: [t.tone], children: t.tone === "loading" ? /* @__PURE__ */ jsx("span", { className: "toast__spinner", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Icon, { name: TONE_ICON[t.tone] || "info", weight: "fill" }) }),
|
|
152
148
|
isFinite(t.duration) && /* @__PURE__ */ jsxs("svg", { className: "toast__ring", viewBox: "0 0 36 36", "aria-hidden": "true", children: [
|
|
153
149
|
/* @__PURE__ */ jsx("circle", { className: "toast__ring-track", cx: "18", cy: "18", r: "16.5" }),
|
|
154
150
|
/* @__PURE__ */ jsx(
|
|
@@ -164,11 +160,11 @@ function ToastBody({ t }) {
|
|
|
164
160
|
)
|
|
165
161
|
] }, "ring-" + t.timerKey)
|
|
166
162
|
] }),
|
|
167
|
-
/* @__PURE__ */ jsxs(
|
|
163
|
+
/* @__PURE__ */ jsxs(Motion, { className: "toast__text", animate: TEXT_FADE, deps: [String(t.message) + "-" + String(t.description)], children: [
|
|
168
164
|
/* @__PURE__ */ jsx("p", { className: "toast__message", children: t.message }),
|
|
169
165
|
t.description != null && /* @__PURE__ */ jsx("p", { className: "toast__desc", children: t.description })
|
|
170
166
|
] }),
|
|
171
|
-
t.count > 1 && /* @__PURE__ */ jsxs(
|
|
167
|
+
t.count > 1 && /* @__PURE__ */ jsxs(Motion, { as: "span", className: "toast__count", animate: COUNT_POP, deps: [t.count], children: [
|
|
172
168
|
"\xD7",
|
|
173
169
|
t.count
|
|
174
170
|
] }),
|
package/dist/toast.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/composites/toast/Toast.tsx"],"names":[],"mappings":"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","file":"toast.js","sourcesContent":["'use client';\n\nimport './toast.css';\nimport {\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n useSyncExternalStore,\n type CSSProperties,\n type FocusEvent as ReactFocusEvent,\n type KeyboardEvent as ReactKeyboardEvent,\n type PointerEvent as ReactPointerEvent,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n type RefObject,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { animate, startDrag, type Layer, type Playback } from '../../../engine';\nimport { Presence } from '../../../motion/presence';\nimport { Motion } from '../../../motion/element';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { fireGlint } from '../../internal/glass/glint';\nimport { tokenPx } from '../../internal/utils/token-px';\nimport { Icon, type IconName } from '../../internal/icon/Icon';\nimport { Button } from '../../primitives/button/Button';\nimport { UIToast, DEFAULT_TOASTER_CONFIG, type ToastRecord, type ToastTone, type ToasterConfig } from './toast-store';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nconst SM = UIMotion;\nconst store = UIToast;\n\nconst COLLAPSE_GRACE = 140;\nconst SWIPE_X = 64;\nconst SWIPE_V = 480;\n\nlet GAP = 0;\nfunction stackGap() {\n if (!GAP) GAP = tokenPx('--space-3') || 12;\n return GAP;\n}\n\nconst TONE_ICON: Partial<Record<ToastTone, IconName>> = {\n success: 'check-circle',\n danger: 'warning-circle',\n warning: 'warning',\n info: 'info',\n};\n\nfunction useToneGesture(tone: ToastTone, ref: RefObject<HTMLElement>) {\n const prevTone = useRef<ToastTone | null>(null);\n useEffect(() => {\n const prev = prevTone.current;\n prevTone.current = tone;\n if (tone === prev) return;\n if (tone === 'success') return fireGlint(ref.current);\n if (tone === 'danger' && ref.current) {\n const shake = ref.current.firstElementChild as HTMLElement | null;\n if (!shake) return;\n const fall = animate(shake, {\n x: [0, -7, 5, -2, 0],\n timing: { duration: SM.dur.slow, ease: SM.ease.standard, delay: SM.dur.base },\n });\n fall.finished.then(() => fall.stop());\n return () => fall.stop();\n }\n }, [tone]);\n}\n\nfunction useReplay<T extends HTMLElement>(token: unknown, build: () => Layer[]) {\n const ref = useRef<T>(null);\n const latest = useRef(build);\n latest.current = build;\n useLayoutEffect(() => {\n if (ref.current) animate(ref.current, ...latest.current());\n }, [token]);\n return ref;\n}\n\nfunction ToastItem({\n t,\n depth,\n offset,\n hidden,\n behind,\n frameHeight,\n isTop,\n onHeight,\n}: {\n t: ToastRecord;\n depth: number;\n offset: number;\n hidden: boolean;\n behind: boolean;\n frameHeight: number | null;\n isTop: boolean;\n onHeight: (id: string, h: number) => void;\n}) {\n const ref = useRef<HTMLLIElement>(null);\n const settled = useRef(false);\n const swipeBack = useRef<Playback | null>(null);\n useToneGesture(t.tone, ref);\n\n useLayoutEffect(() => {\n if (ref.current && ref.current.firstElementChild)\n onHeight(t.id, (ref.current.firstElementChild as HTMLElement).offsetHeight);\n });\n\n useLayoutEffect(() => {\n const el = ref.current;\n if (!el) return;\n el.style.pointerEvents = hidden ? 'none' : 'auto';\n const y = isTop ? offset : -offset;\n const scale = 1 - depth * 0.05;\n if (settled.current) {\n animate(\n el,\n { y: [y], scale: [scale], height: [frameHeight ?? 'auto'], timing: SM.t.settle },\n { opacity: [hidden ? 0 : 1], timing: SM.t.enter },\n );\n return;\n }\n settled.current = true;\n animate(\n el,\n { y: [isTop ? -24 : 24, y], scale: [0.97, scale], timing: SM.t.settle },\n { opacity: [0, hidden ? 0 : 1], timing: SM.t.enter },\n );\n }, [offset, depth, hidden, frameHeight, isTop]);\n\n const onPointerDown = (e: ReactPointerEvent) => {\n const inner = ref.current?.firstElementChild as HTMLElement | null;\n if (!t.dismissible || e.button !== 0 || !inner) return;\n swipeBack.current?.stop();\n startDrag(e, {\n onMove: (info) => {\n const dx = info.offset.x;\n inner.style.translate = `${dx > 0 ? dx * 0.9 : dx * 0.04}px 0px`;\n },\n onEnd: (info) => {\n if (info.offset.x > SWIPE_X || info.velocity.x > SWIPE_V) {\n animate(inner, { x: [420], timing: SM.t.exit }).finished.then(() => store.dismiss(t.id));\n return;\n }\n const back = animate(inner, { x: [0], timing: SM.t.settle });\n swipeBack.current = back;\n back.finished.then(() => back.stop());\n },\n });\n };\n\n return (\n <Motion\n as=\"li\"\n ref={ref}\n exit={{ opacity: [0], scale: [0.96], timing: SM.t.exit }}\n className=\"toast glass\"\n data-tone={t.tone}\n data-behind={behind ? '' : undefined}\n role={t.tone === 'danger' ? 'alert' : 'status'}\n aria-atomic=\"true\"\n onPointerDown={onPointerDown}\n onKeyDown={(e: ReactKeyboardEvent) => {\n if (e.key === 'Escape' && t.dismissible) store.dismiss(t.id);\n }}\n >\n {t.node ? <div className=\"toast__custom\">{t.node as ReactNode}</div> : <ToastBody t={t} />}\n </Motion>\n );\n}\n\nfunction ToastBody({ t }: { t: ToastRecord }) {\n const glyphRef = useReplay<HTMLSpanElement>(t.tone, () => [\n { scale: [0.5, 1], timing: SM.t.settle },\n { opacity: [0, 1], timing: SM.t.enter },\n ]);\n const textRef = useReplay<HTMLDivElement>(String(t.message) + '-' + String(t.description), () => [\n { opacity: [0, 1], timing: SM.t.enter },\n ]);\n const countRef = useReplay<HTMLSpanElement>(t.count, () => [{ scale: [0.6, 1], timing: SM.t.settle }]);\n\n return (\n <div className=\"toast__inner\">\n {(t.tone !== 'default' || isFinite(t.duration)) && (\n <span className=\"toast__icon\">\n {t.tone !== 'default' && (\n <span ref={glyphRef} className=\"toast__icon-glyph\">\n {t.tone === 'loading' ? (\n <span className=\"toast__spinner\" aria-hidden=\"true\"></span>\n ) : (\n <Icon name={TONE_ICON[t.tone] || 'info'} weight=\"fill\" />\n )}\n </span>\n )}\n {isFinite(t.duration) && (\n <svg key={'ring-' + t.timerKey} className=\"toast__ring\" viewBox=\"0 0 36 36\" aria-hidden=\"true\">\n <circle className=\"toast__ring-track\" cx=\"18\" cy=\"18\" r=\"16.5\"></circle>\n <circle\n className=\"toast__ring-arc\"\n cx=\"18\"\n cy=\"18\"\n r=\"16.5\"\n pathLength={1}\n style={{ animationDuration: t.duration + 'ms' }}\n ></circle>\n </svg>\n )}\n </span>\n )}\n <div ref={textRef} className=\"toast__text\">\n <p className=\"toast__message\">{t.message}</p>\n {t.description != null && <p className=\"toast__desc\">{t.description}</p>}\n </div>\n {t.count > 1 && (\n <span ref={countRef} className=\"toast__count\">\n ×{t.count}\n </span>\n )}\n {t.action && (\n <Button\n variant=\"secondary\"\n size=\"sm\"\n className=\"toast__action\"\n onClick={() => {\n if (t.action.onClick) t.action.onClick();\n store.dismiss(t.id);\n }}\n >\n {t.action.label}\n </Button>\n )}\n {t.dismissible && (\n <button type=\"button\" className=\"toast__close\" aria-label=\"Dismiss\" onClick={() => store.dismiss(t.id)}>\n <Icon name=\"close\" size=\"sm\" />\n </button>\n )}\n </div>\n );\n}\n\nfunction ToastHost({ config, htmlProps }: { config: ToasterConfig; htmlProps?: HTMLAttributes<HTMLOListElement> }) {\n const { toasts, paused, expanded: hoverExpanded } = useSyncExternalStore(store.subscribe, store.get, store.get);\n const [heights, setHeights] = useState<Record<string, number>>({});\n const [ready, setReady] = useState(false);\n const collapseTimer = useRef<ReturnType<typeof setTimeout> | 0>(0);\n const hovering = useRef(false);\n\n useEffect(() => setReady(true), []);\n\n const onHeight = (id: string, h: number) => setHeights((prev) => (prev[id] === h ? prev : { ...prev, [id]: h }));\n\n const onHold = () => {\n hovering.current = true;\n clearTimeout(collapseTimer.current);\n store.setExpanded(true);\n store.pause();\n };\n const onRelease = (graced: boolean) => {\n hovering.current = false;\n clearTimeout(collapseTimer.current);\n collapseTimer.current = setTimeout(\n () => {\n store.setExpanded(false);\n store.resume();\n },\n graced ? COLLAPSE_GRACE : 0,\n );\n };\n\n useEffect(() => {\n const onVis = () => {\n if (document.hidden) store.pause();\n else if (!hovering.current) store.resume();\n };\n document.addEventListener('visibilitychange', onVis);\n return () => document.removeEventListener('visibilitychange', onVis);\n }, []);\n\n useEffect(() => {\n if (toasts.length === 0) {\n hovering.current = false;\n clearTimeout(collapseTimer.current);\n store.setExpanded(false);\n store.resume();\n }\n }, [toasts.length]);\n\n if (!ready) return null;\n\n const isTop = config.position.startsWith('top');\n const visible = config.visibleToasts;\n const rendered = visible * 2;\n const gap = config.gap || stackGap();\n const expanded = config.expand || hoverExpanded;\n\n const slice = toasts.slice(-rendered);\n const n = slice.length;\n const frontH = n ? heights[slice[n - 1].id] || 0 : 0;\n\n return createPortal(\n <ol\n {...htmlProps}\n className={cx('toast-viewport', paused && 'is-paused', htmlProps?.className)}\n data-position={config.position}\n style={\n config.offset\n ? ({ ...htmlProps?.style, '--toast-offset': `${config.offset}px` } as CSSProperties)\n : htmlProps?.style\n }\n aria-label=\"Notifications\"\n onPointerOver={(e: ReactPointerEvent<HTMLOListElement>) => {\n if (e.pointerType !== 'touch') onHold();\n }}\n onPointerOut={(e: ReactPointerEvent<HTMLOListElement>) => {\n if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) onRelease(true);\n }}\n onFocus={onHold}\n onBlur={(e: ReactFocusEvent<HTMLOListElement>) => {\n if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) onRelease(false);\n }}\n >\n <Presence>\n {slice.map((t, i) => {\n const depth = n - 1 - i;\n let offset = depth * gap;\n if (expanded) {\n offset = 0;\n for (let j = i + 1; j < n; j++) offset += (heights[slice[j].id] || 0) + gap;\n }\n return (\n <ToastItem\n key={t.id}\n t={t}\n depth={expanded ? 0 : depth}\n offset={offset}\n hidden={!expanded && depth >= visible}\n behind={!expanded && depth > 0}\n frameHeight={!expanded && depth > 0 && frontH ? frontH : null}\n isTop={isTop}\n onHeight={onHeight}\n />\n );\n })}\n </Presence>\n </ol>,\n document.body,\n );\n}\n\nfunction stripUndefined<T extends object>(o: T): Partial<T> {\n const out: Partial<T> = {};\n (Object.keys(o) as (keyof T)[]).forEach((k) => {\n if (o[k] !== undefined) out[k] = o[k];\n });\n return out;\n}\n\nexport interface ToasterProps extends Partial<ToasterConfig> {\n /** Standard <ol> attributes (className, style, data-*, ...) forwarded to the toast viewport. */\n htmlProps?: HTMLAttributes<HTMLOListElement> & DataAttributes;\n}\n\nexport function Toaster({ htmlProps, ...props }: ToasterProps): ReactElement {\n const config: ToasterConfig = { ...DEFAULT_TOASTER_CONFIG, ...stripUndefined(props) };\n\n useEffect(() => {\n store.config = config;\n store.mounted = true;\n if (config.expand) store.setExpanded(true);\n return () => {\n store.mounted = false;\n };\n }, [config.position, config.duration, config.visibleToasts, config.gap, config.offset, config.expand]);\n\n return <ToastHost config={config} htmlProps={htmlProps} />;\n}\n\nexport { toast } from './toast-store';\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/composites/toast/Toast.tsx"],"names":[],"mappings":"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","file":"toast.js","sourcesContent":["'use client';\n\nimport './toast.css';\n\nimport {\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n useSyncExternalStore,\n type CSSProperties,\n type HTMLAttributes,\n type ReactElement,\n type FocusEvent as ReactFocusEvent,\n type KeyboardEvent as ReactKeyboardEvent,\n type ReactNode,\n type PointerEvent as ReactPointerEvent,\n type RefObject,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport { animate, startDrag, type Layer, type Playback } from '../../../engine';\nimport { Motion } from '../../../motion/element';\nimport { Presence } from '../../../motion/presence';\nimport { popOut } from '../../../motion/presets';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { fireGlint } from '../../internal/glass/glint';\nimport { Icon, type IconName } from '../../internal/icon/Icon';\nimport { cx } from '../../internal/utils/cx';\nimport { tokenPx } from '../../internal/utils/token-px';\nimport { Button } from '../../primitives/button/Button';\nimport { DEFAULT_TOASTER_CONFIG, UIToast, type ToasterConfig, type ToastRecord, type ToastTone } from './toast-store';\n\nconst SM = UIMotion;\nconst store = UIToast;\n\nconst COLLAPSE_GRACE = 140;\nconst SWIPE_X = 64;\nconst SWIPE_V = 480;\nconst SWIPE_FLING_X = 420;\n\nlet GAP = 0;\nfunction stackGap() {\n if (!GAP) GAP = tokenPx('--space-3') || 12;\n return GAP;\n}\n\nconst TONE_ICON: Partial<Record<ToastTone, IconName>> = {\n success: 'check-circle',\n danger: 'warning-circle',\n warning: 'warning',\n info: 'info',\n};\n\nfunction useToneGesture(tone: ToastTone, ref: RefObject<HTMLElement>) {\n useEffect(() => {\n if (tone === 'success') return fireGlint(ref.current);\n if (tone === 'danger' && ref.current) {\n const fall = animate(ref.current, {\n x: [0, -7, 5, -2, 0],\n timing: { duration: SM.dur.slow, ease: SM.ease.standard, delay: SM.dur.base, fill: 'none' },\n composite: 'add',\n });\n return () => fall.stop();\n }\n }, [tone]);\n}\n\nconst GLYPH_POP: Layer[] = [\n { scale: [0.5, 1], timing: SM.t.settle },\n { opacity: [0, 1], timing: SM.t.enter },\n];\nconst TEXT_FADE: Layer[] = [{ opacity: [0, 1], timing: SM.t.enter }];\nconst COUNT_POP: Layer[] = [{ scale: [0.6, 1], timing: SM.t.settle }];\n\nfunction ToastItem({\n t,\n depth,\n offset,\n hidden,\n behind,\n frameHeight,\n isTop,\n onHeight,\n}: {\n t: ToastRecord;\n depth: number;\n offset: number;\n hidden: boolean;\n behind: boolean;\n frameHeight: number | null;\n isTop: boolean;\n onHeight: (id: string, h: number) => void;\n}) {\n const ref = useRef<HTMLLIElement>(null);\n const settled = useRef(false);\n const swipeBack = useRef<Playback | null>(null);\n const swipeX = useRef(0);\n const restY = useRef(0);\n useToneGesture(t.tone, ref);\n\n useLayoutEffect(() => {\n if (ref.current && ref.current.firstElementChild)\n onHeight(t.id, (ref.current.firstElementChild as HTMLElement).offsetHeight);\n });\n\n useLayoutEffect(() => {\n const el = ref.current;\n if (!el) return;\n el.style.pointerEvents = hidden ? 'none' : 'auto';\n const y = isTop ? offset : -offset;\n const scale = 1 - depth * 0.05;\n restY.current = y;\n if (settled.current) {\n animate(\n el,\n { x: [swipeX.current], y: [y], scale: [scale], height: [frameHeight ?? 'auto'], timing: SM.t.settle },\n { opacity: [hidden ? 0 : 1], timing: SM.t.enter },\n );\n return;\n }\n settled.current = true;\n animate(\n el,\n { y: [isTop ? -SM.dist.lg : SM.dist.lg, y], scale: [SM.scale.floating, scale], timing: SM.t.settle },\n { opacity: [0, hidden ? 0 : 1], timing: SM.t.enter },\n );\n }, [offset, depth, hidden, frameHeight, isTop]);\n\n const onPointerDown = (e: ReactPointerEvent) => {\n const el = ref.current;\n if (!t.dismissible || e.button !== 0 || !el) return;\n swipeBack.current?.stop();\n swipeBack.current = null;\n const place = (x: number) => {\n swipeX.current = x;\n animate(el, { x: [x], y: [restY.current], timing: { duration: 0 } });\n };\n place(swipeX.current);\n startDrag(e, {\n onMove: (info) => {\n const dx = info.offset.x;\n place(dx > 0 ? dx * 0.9 : dx * 0.04);\n },\n onEnd: (info) => {\n if (info.offset.x > SWIPE_X || info.velocity.x > SWIPE_V) {\n swipeX.current = SWIPE_FLING_X;\n animate(el, { x: [SWIPE_FLING_X], y: [restY.current], timing: SM.t.exit }).finished.then(() =>\n store.dismiss(t.id),\n );\n return;\n }\n swipeX.current = 0;\n swipeBack.current = animate(el, { x: [0], y: [restY.current], timing: SM.t.settle });\n },\n });\n };\n\n return (\n <Motion\n as=\"li\"\n ref={ref}\n exit={popOut(SM.scale.floating, SM.t.exit)}\n className=\"toast glass\"\n data-tone={t.tone}\n data-behind={behind ? '' : undefined}\n role={t.tone === 'danger' ? 'alert' : 'status'}\n aria-atomic=\"true\"\n onPointerDown={onPointerDown}\n onKeyDown={(e: ReactKeyboardEvent) => {\n if (e.key === 'Escape' && t.dismissible) store.dismiss(t.id);\n }}\n >\n {t.node ? <div className=\"toast__custom\">{t.node as ReactNode}</div> : <ToastBody t={t} />}\n </Motion>\n );\n}\n\nfunction ToastBody({ t }: { t: ToastRecord }) {\n return (\n <div className=\"toast__inner\">\n {(t.tone !== 'default' || isFinite(t.duration)) && (\n <span className=\"toast__icon\">\n {t.tone !== 'default' && (\n <Motion as=\"span\" className=\"toast__icon-glyph\" animate={GLYPH_POP} deps={[t.tone]}>\n {t.tone === 'loading' ? (\n <span className=\"toast__spinner\" aria-hidden=\"true\"></span>\n ) : (\n <Icon name={TONE_ICON[t.tone] || 'info'} weight=\"fill\" />\n )}\n </Motion>\n )}\n {isFinite(t.duration) && (\n <svg key={'ring-' + t.timerKey} className=\"toast__ring\" viewBox=\"0 0 36 36\" aria-hidden=\"true\">\n <circle className=\"toast__ring-track\" cx=\"18\" cy=\"18\" r=\"16.5\"></circle>\n <circle\n className=\"toast__ring-arc\"\n cx=\"18\"\n cy=\"18\"\n r=\"16.5\"\n pathLength={1}\n style={{ animationDuration: t.duration + 'ms' }}\n ></circle>\n </svg>\n )}\n </span>\n )}\n <Motion className=\"toast__text\" animate={TEXT_FADE} deps={[String(t.message) + '-' + String(t.description)]}>\n <p className=\"toast__message\">{t.message}</p>\n {t.description != null && <p className=\"toast__desc\">{t.description}</p>}\n </Motion>\n {t.count > 1 && (\n <Motion as=\"span\" className=\"toast__count\" animate={COUNT_POP} deps={[t.count]}>\n ×{t.count}\n </Motion>\n )}\n {t.action && (\n <Button\n variant=\"secondary\"\n size=\"sm\"\n className=\"toast__action\"\n onClick={() => {\n if (t.action.onClick) t.action.onClick();\n store.dismiss(t.id);\n }}\n >\n {t.action.label}\n </Button>\n )}\n {t.dismissible && (\n <button type=\"button\" className=\"toast__close\" aria-label=\"Dismiss\" onClick={() => store.dismiss(t.id)}>\n <Icon name=\"close\" size=\"sm\" />\n </button>\n )}\n </div>\n );\n}\n\nfunction ToastHost({ config, htmlProps }: { config: ToasterConfig; htmlProps?: HTMLAttributes<HTMLOListElement> }) {\n const { toasts, paused, expanded: hoverExpanded } = useSyncExternalStore(store.subscribe, store.get, store.get);\n const [heights, setHeights] = useState<Record<string, number>>({});\n const [ready, setReady] = useState(false);\n const collapseTimer = useRef<ReturnType<typeof setTimeout> | 0>(0);\n const hovering = useRef(false);\n\n useEffect(() => setReady(true), []);\n\n const onHeight = (id: string, h: number) => setHeights((prev) => (prev[id] === h ? prev : { ...prev, [id]: h }));\n\n const onHold = () => {\n hovering.current = true;\n clearTimeout(collapseTimer.current);\n store.setExpanded(true);\n store.pause();\n };\n const onRelease = (graced: boolean) => {\n hovering.current = false;\n clearTimeout(collapseTimer.current);\n collapseTimer.current = setTimeout(\n () => {\n store.setExpanded(false);\n store.resume();\n },\n graced ? COLLAPSE_GRACE : 0,\n );\n };\n\n useEffect(() => {\n const onVis = () => {\n if (document.hidden) store.pause();\n else if (!hovering.current) store.resume();\n };\n document.addEventListener('visibilitychange', onVis);\n return () => document.removeEventListener('visibilitychange', onVis);\n }, []);\n\n useEffect(() => {\n if (toasts.length === 0) {\n hovering.current = false;\n clearTimeout(collapseTimer.current);\n store.setExpanded(false);\n store.resume();\n }\n }, [toasts.length]);\n\n if (!ready) return null;\n\n const isTop = config.position.startsWith('top');\n const visible = config.visibleToasts;\n const rendered = visible * 2;\n const gap = config.gap || stackGap();\n const expanded = config.expand || hoverExpanded;\n\n const slice = toasts.slice(-rendered);\n const n = slice.length;\n const frontH = n ? heights[slice[n - 1].id] || 0 : 0;\n\n return createPortal(\n <ol\n {...htmlProps}\n className={cx('toast-viewport', paused && 'is-paused', htmlProps?.className)}\n data-position={config.position}\n style={\n config.offset\n ? ({ ...htmlProps?.style, '--toast-offset': `${config.offset}px` } as CSSProperties)\n : htmlProps?.style\n }\n aria-label=\"Notifications\"\n onPointerOver={(e: ReactPointerEvent<HTMLOListElement>) => {\n if (e.pointerType !== 'touch') onHold();\n }}\n onPointerOut={(e: ReactPointerEvent<HTMLOListElement>) => {\n if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) onRelease(true);\n }}\n onFocus={onHold}\n onBlur={(e: ReactFocusEvent<HTMLOListElement>) => {\n if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) onRelease(false);\n }}\n >\n <Presence>\n {slice.map((t, i) => {\n const depth = n - 1 - i;\n let offset = depth * gap;\n if (expanded) {\n offset = 0;\n for (let j = i + 1; j < n; j++) offset += (heights[slice[j].id] || 0) + gap;\n }\n return (\n <ToastItem\n key={t.id}\n t={t}\n depth={expanded ? 0 : depth}\n offset={offset}\n hidden={!expanded && depth >= visible}\n behind={!expanded && depth > 0}\n frameHeight={!expanded && depth > 0 && frontH ? frontH : null}\n isTop={isTop}\n onHeight={onHeight}\n />\n );\n })}\n </Presence>\n </ol>,\n document.body,\n );\n}\n\nfunction stripUndefined<T extends object>(o: T): Partial<T> {\n const out: Partial<T> = {};\n (Object.keys(o) as (keyof T)[]).forEach((k) => {\n if (o[k] !== undefined) out[k] = o[k];\n });\n return out;\n}\n\nexport interface ToasterProps extends Partial<ToasterConfig> {\n /** Standard <ol> attributes (className, style, data-*, ...) forwarded to the toast viewport. */\n htmlProps?: HTMLAttributes<HTMLOListElement> & DataAttributes;\n}\n\nexport function Toaster({ htmlProps, ...props }: ToasterProps): ReactElement {\n const config: ToasterConfig = { ...DEFAULT_TOASTER_CONFIG, ...stripUndefined(props) };\n\n useEffect(() => {\n store.config = config;\n store.mounted = true;\n if (config.expand) store.setExpanded(true);\n return () => {\n store.mounted = false;\n };\n }, [config.position, config.duration, config.visibleToasts, config.gap, config.offset, config.expand]);\n\n return <ToastHost config={config} htmlProps={htmlProps} />;\n}\n\nexport { toast } from './toast-store';\n"]}
|
package/dist/toggle-tag.js
CHANGED
package/dist/toggle-tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/primitives/tag/ToggleTag.tsx"],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/components/primitives/tag/ToggleTag.tsx"],"names":[],"mappings":";;;;;;;AAyCA,SAAS,aAAA,CAAc,EAAE,QAAA,EAAS,EAA0B;AAC1D,EAAA,uBACE,GAAA,CAAC,UAAK,SAAA,EAAU,qBAAA,EAAsB,aAAU,OAAA,EAAQ,WAAA,EAAW,WAAW,MAAA,GAAS,OAAA,EAAS,eAAY,MAAA,EAC1G,QAAA,kBAAA,GAAA,CAAC,UAAK,SAAA,EAAU,iBAAA,EACd,8BAAC,KAAA,EAAA,EAAI,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAC5B,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,CAAA,EAAE,wBAAA;AAAA,MACF,UAAA,EAAW,GAAA;AAAA,MACX,WAAA,EAAY,KAAA;AAAA,MACZ,aAAA,EAAc,OAAA;AAAA,MACd,cAAA,EAAe;AAAA;AAAA,GACjB,EACF,GACF,CAAA,EACF,CAAA;AAEJ;AAEO,SAAS,SAAA,CAAU;AAAA,EACxB,QAAA;AAAA,EACA,QAAA,EAAU,YAAA;AAAA,EACV,eAAA,GAAkB,KAAA;AAAA,EAClB,QAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,KAAA,GAAQ,IAAA;AAAA,EACR,IAAA,GAAO,IAAA;AAAA,EACP,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,EAAA;AAAA,EACZ,KAAA;AAAA,EACA;AACF,CAAA,EAAmB;AACjB,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,IAAI,eAAA,CAAgB,YAAA,EAAc,iBAAiB,QAAQ,CAAA;AACvF,EAAA,MAAM,MAAA,GAAS,MAAM,WAAA,CAAY,CAAC,QAAQ,CAAA;AAE1C,EAAA,MAAM,MAAM,EAAA,CAAG,KAAA,EAAO,eAAe,IAAA,KAAS,IAAA,IAAQ,WAAW,SAAS,CAAA;AAE1E,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,SAAA,EAAW,GAAA;AAAA,MACX,KAAA;AAAA,MACA,cAAA,EAAc,QAAA;AAAA,MACd,QAAA;AAAA,MACA,OAAA,EAAS,MAAA;AAAA,MACR,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,mBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,WAAA,EACd,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,IAAA,EAAK,CAAA,EAC5B,CAAA,mBAEA,GAAA,CAAC,iBAAc,QAAA,EAAoB,CAAA;AAAA,wBAErC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,YAAA,EAAc,QAAA,EAAS,CAAA;AAAA,QACtC,SAAS,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,cAAc,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GACxD;AAEJ","file":"toggle-tag.js","sourcesContent":["'use client';\n\nimport './tag.css';\nimport '../collapse/collapse.css';\n\nimport type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { IconSlot } from '../../internal/icon/IconSlot';\nimport { cx } from '../../internal/utils/cx';\n\ninterface ToggleTagOwnProps {\n /** Chip content; the label shown beside the tick or `icon`. */\n children: ReactNode;\n /** Controlled selected value. Omit for uncontrolled. */\n selected?: boolean;\n /** Uncontrolled initial value. */\n defaultSelected?: boolean;\n /** Fires with the next value on every toggle. */\n onChange?: (selected: boolean) => void;\n /** Your own icon node; replaces the tick. Selected state reads from the wash. */\n icon?: ReactNode | null;\n /** Optional result count - rendered mono/tabular. */\n count?: ReactNode;\n /** 'md' = 28px (default) - 'sm' = 24px for dense rows. */\n size?: 'md' | 'sm';\n /** Disable the button, blocking toggles. @default false */\n disabled?: boolean;\n /** Extra class(es) merged onto the root element. */\n className?: string;\n /** Inline styles merged onto the root element. */\n style?: CSSProperties;\n}\n\n/** ToggleTag - the on/off filter chip (<button aria-pressed>). */\nexport interface ToggleTagProps extends ToggleTagOwnProps {\n /** Standard <button> attributes forwarded to the chip. */\n htmlProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ToggleTagOwnProps> & DataAttributes;\n}\n\nfunction ToggleTagTick({ selected }: { selected: boolean }) {\n return (\n <span className=\"tag__check collapse\" data-axis=\"width\" data-open={selected ? 'true' : 'false'} aria-hidden=\"true\">\n <span className=\"collapse__inner\">\n <svg viewBox=\"0 0 12 12\" fill=\"none\">\n <path\n d=\"M2.5 6.5 L5 9 L9.5 3.5\"\n pathLength=\"1\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </span>\n </span>\n );\n}\n\nexport function ToggleTag({\n children,\n selected: selectedProp,\n defaultSelected = false,\n onChange,\n icon = null,\n count = null,\n size = 'md',\n disabled = false,\n className = '',\n style,\n htmlProps,\n}: ToggleTagProps) {\n const [selected, setSelected] = useControllable(selectedProp, defaultSelected, onChange);\n const toggle = () => setSelected(!selected);\n\n const cls = cx('tag', 'tag--toggle', size === 'sm' && 'tag--sm', className);\n\n return (\n <button\n type=\"button\"\n className={cls}\n style={style}\n aria-pressed={selected}\n disabled={disabled}\n onClick={toggle}\n {...htmlProps}\n >\n {icon ? (\n <span className=\"tag__icon\">\n <IconSlot size=\"sm\">{icon}</IconSlot>\n </span>\n ) : (\n <ToggleTagTick selected={selected} />\n )}\n <span className=\"tag__label\">{children}</span>\n {count != null && <span className=\"tag__count\">{count}</span>}\n </button>\n );\n}\n"]}
|
package/dist/toggle.css
CHANGED
|
@@ -1,152 +1,156 @@
|
|
|
1
|
-
|
|
1
|
+
@layer zyncat.tokens, zyncat.components;
|
|
2
2
|
|
|
3
|
-
.
|
|
4
|
-
|
|
5
|
-
--sw-off-fill: var(--bg-muted);
|
|
6
|
-
--sw-on-border: var(--accent);
|
|
7
|
-
--sw-off-border: var(--border-strong);
|
|
8
|
-
--sw-ring: var(--ring-accent);
|
|
9
|
-
/* track size is the only input; thumb + travel derive from it */
|
|
10
|
-
--sw-w: var(--control-height);
|
|
11
|
-
--sw-h: var(--control-switch);
|
|
12
|
-
--sw-inset: calc(2 * var(--space-px));
|
|
13
|
-
/* inner track height minus both borders and the gap each side, so the inset is uniform on all edges */
|
|
14
|
-
--sw-thumb: calc(var(--sw-h) - 2 * var(--border-hairline) - 2 * var(--sw-inset));
|
|
15
|
-
/* colors read this flag; the thumb is moved by transform, not by it */
|
|
16
|
-
--on: 0;
|
|
3
|
+
@layer zyncat.components {
|
|
4
|
+
/* Toggle (switch) - immediate on/off; native input hidden, track + thumb painted, thumb travels on a CSS spring. */
|
|
17
5
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
6
|
+
.sw {
|
|
7
|
+
--sw-on-fill: linear-gradient(180deg, var(--accent), var(--accent-hover));
|
|
8
|
+
--sw-off-fill: var(--bg-muted);
|
|
9
|
+
--sw-on-border: var(--accent);
|
|
10
|
+
--sw-off-border: var(--border-strong);
|
|
11
|
+
--sw-ring: var(--ring-accent);
|
|
12
|
+
/* track size is the only input; thumb + travel derive from it */
|
|
13
|
+
--sw-w: var(--control-height);
|
|
14
|
+
--sw-h: var(--control-switch);
|
|
15
|
+
--sw-inset: calc(2 * var(--space-px));
|
|
16
|
+
/* inner track height minus both borders and the gap each side, so the inset is uniform on all edges */
|
|
17
|
+
--sw-thumb: calc(var(--sw-h) - 2 * var(--border-hairline) - 2 * var(--sw-inset));
|
|
18
|
+
/* colors read this flag; the thumb is moved by transform, not by it */
|
|
19
|
+
--sw-checked: 0;
|
|
26
20
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
21
|
+
display: inline-flex;
|
|
22
|
+
align-items: flex-start;
|
|
23
|
+
gap: var(--space-3);
|
|
24
|
+
padding: var(--space-2);
|
|
25
|
+
border-radius: var(--radius-md);
|
|
26
|
+
cursor: pointer;
|
|
27
|
+
-webkit-tap-highlight-color: transparent;
|
|
28
|
+
transition: background-color var(--duration-fast) var(--ease-standard);
|
|
30
29
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
&:not(.sw--disabled):hover:not(:has(:checked)) {
|
|
35
|
-
--sw-off-border: var(--text-subtle);
|
|
36
|
-
}
|
|
37
|
-
&:has(:focus-visible) .sw__track {
|
|
38
|
-
box-shadow: var(--sw-ring);
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.sw__input {
|
|
43
|
-
position: absolute;
|
|
44
|
-
width: 1px;
|
|
45
|
-
height: 1px;
|
|
46
|
-
margin: 0;
|
|
47
|
-
padding: 0;
|
|
48
|
-
border: 0;
|
|
49
|
-
opacity: 0;
|
|
50
|
-
clip-path: inset(50%);
|
|
51
|
-
white-space: nowrap;
|
|
52
|
-
overflow: hidden;
|
|
53
|
-
}
|
|
30
|
+
&:has(:checked) {
|
|
31
|
+
--sw-checked: 1;
|
|
32
|
+
}
|
|
54
33
|
|
|
55
|
-
.
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
border: var(--border-hairline) solid
|
|
66
|
-
color-mix(in oklab, var(--sw-on-border) calc(var(--on) * 100%), var(--sw-off-border));
|
|
67
|
-
border-radius: var(--radius-full);
|
|
68
|
-
background: var(--sw-off-fill);
|
|
69
|
-
transform: scale(1);
|
|
70
|
-
transition:
|
|
71
|
-
border-color var(--duration-base) var(--ease-standard),
|
|
72
|
-
background-color var(--duration-base) var(--ease-standard),
|
|
73
|
-
box-shadow var(--duration-fast) var(--ease-standard),
|
|
74
|
-
transform var(--duration-fast) var(--ease-spring);
|
|
34
|
+
&:not(.sw--disabled):hover {
|
|
35
|
+
background: var(--bg-muted);
|
|
36
|
+
}
|
|
37
|
+
&:not(.sw--disabled):hover:not(:has(:checked)) {
|
|
38
|
+
--sw-off-border: var(--text-subtle);
|
|
39
|
+
}
|
|
40
|
+
&:has(:focus-visible) .sw__track {
|
|
41
|
+
box-shadow: var(--sw-ring);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
75
44
|
|
|
76
|
-
|
|
77
|
-
content: '';
|
|
45
|
+
.sw__input {
|
|
78
46
|
position: absolute;
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
47
|
+
width: 1px;
|
|
48
|
+
height: 1px;
|
|
49
|
+
margin: 0;
|
|
50
|
+
padding: 0;
|
|
51
|
+
border: 0;
|
|
52
|
+
opacity: 0;
|
|
53
|
+
clip-path: inset(50%);
|
|
54
|
+
white-space: nowrap;
|
|
55
|
+
overflow: hidden;
|
|
84
56
|
}
|
|
85
|
-
}
|
|
86
|
-
/* --tx (travel) + --sx (press-stretch) compose one transform, so press and travel never fight over it */
|
|
87
|
-
.sw__thumb {
|
|
88
|
-
--tx: 0px;
|
|
89
|
-
--sx: 1;
|
|
90
|
-
position: relative;
|
|
91
|
-
z-index: 1;
|
|
92
|
-
flex: none;
|
|
93
|
-
width: var(--sw-thumb);
|
|
94
|
-
height: var(--sw-thumb);
|
|
95
|
-
border-radius: var(--radius-full);
|
|
96
|
-
background: var(--bg-surface);
|
|
97
|
-
box-shadow: var(--shadow-sm);
|
|
98
|
-
transform: translateX(var(--tx)) scaleX(var(--sx));
|
|
99
|
-
transition: transform var(--duration-base) var(--ease-spring);
|
|
100
|
-
}
|
|
101
|
-
/* React-set [data-on] drives travel - no :has() twin to move the thumb out from under the spring and snap it */
|
|
102
|
-
.sw__track[data-on='true'] .sw__thumb {
|
|
103
|
-
--tx: calc(var(--sw-w) - var(--sw-h));
|
|
104
|
-
}
|
|
105
|
-
.sw__track[data-pressed='true'] {
|
|
106
|
-
transform: scale(0.96);
|
|
107
|
-
}
|
|
108
|
-
.sw__track[data-pressed='true'] .sw__thumb {
|
|
109
|
-
--sx: 1.16;
|
|
110
|
-
}
|
|
111
57
|
|
|
112
|
-
.
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
58
|
+
.sw__track {
|
|
59
|
+
position: relative;
|
|
60
|
+
flex: none;
|
|
61
|
+
display: flex;
|
|
62
|
+
align-items: center;
|
|
63
|
+
justify-content: flex-start;
|
|
64
|
+
padding: var(--sw-inset);
|
|
65
|
+
width: var(--sw-w);
|
|
66
|
+
height: var(--sw-h);
|
|
67
|
+
margin-top: calc((var(--leading-body) - var(--sw-h)) / 2);
|
|
68
|
+
border: var(--border-hairline) solid
|
|
69
|
+
color-mix(in oklab, var(--sw-on-border) calc(var(--sw-checked) * 100%), var(--sw-off-border));
|
|
70
|
+
border-radius: var(--radius-full);
|
|
71
|
+
background: var(--sw-off-fill);
|
|
72
|
+
transform: scale(1);
|
|
73
|
+
transition:
|
|
74
|
+
border-color var(--duration-base) var(--ease-standard),
|
|
75
|
+
background-color var(--duration-base) var(--ease-standard),
|
|
76
|
+
box-shadow var(--duration-fast) var(--ease-standard),
|
|
77
|
+
transform var(--duration-fast) var(--ease-spring);
|
|
124
78
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
79
|
+
&::before {
|
|
80
|
+
content: '';
|
|
81
|
+
position: absolute;
|
|
82
|
+
inset: 0;
|
|
83
|
+
border-radius: inherit;
|
|
84
|
+
background: var(--sw-on-fill);
|
|
85
|
+
opacity: var(--sw-checked);
|
|
86
|
+
transition: opacity var(--duration-base) var(--ease-standard);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
/* --sw-tx (travel) + --sw-sx (press-stretch) compose one transform, so press and travel never fight over it */
|
|
90
|
+
.sw__thumb {
|
|
91
|
+
--sw-tx: 0px;
|
|
92
|
+
--sw-sx: 1;
|
|
93
|
+
position: relative;
|
|
94
|
+
z-index: 1;
|
|
95
|
+
flex: none;
|
|
96
|
+
width: var(--sw-thumb);
|
|
97
|
+
height: var(--sw-thumb);
|
|
98
|
+
border-radius: var(--radius-full);
|
|
99
|
+
background: var(--bg-surface);
|
|
100
|
+
box-shadow: var(--shadow-sm);
|
|
101
|
+
transform: translateX(var(--sw-tx)) scaleX(var(--sw-sx));
|
|
102
|
+
transition: transform var(--duration-base) var(--ease-spring);
|
|
103
|
+
}
|
|
104
|
+
/* React-set [data-on] drives travel - no :has() twin to move the thumb out from under the spring and snap it */
|
|
105
|
+
.sw__track[data-on='true'] .sw__thumb {
|
|
106
|
+
--sw-tx: calc(var(--sw-w) - var(--sw-h));
|
|
107
|
+
}
|
|
108
|
+
.sw__track[data-pressed='true'] {
|
|
109
|
+
transform: scale(0.96);
|
|
110
|
+
}
|
|
111
|
+
.sw__track[data-pressed='true'] .sw__thumb {
|
|
112
|
+
--sw-sx: 1.16;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.sw__text {
|
|
116
|
+
display: grid;
|
|
117
|
+
gap: var(--space-1);
|
|
118
|
+
}
|
|
119
|
+
.sw__label {
|
|
120
|
+
font: var(--type-label);
|
|
131
121
|
color: var(--text-strong);
|
|
132
122
|
}
|
|
133
|
-
|
|
134
|
-
|
|
123
|
+
.sw__desc {
|
|
124
|
+
font: var(--type-caption);
|
|
125
|
+
color: var(--text-muted);
|
|
135
126
|
}
|
|
136
|
-
}
|
|
137
127
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
128
|
+
.sw--sm {
|
|
129
|
+
--sw-w: var(--control-height-sm);
|
|
130
|
+
--sw-h: var(--space-4);
|
|
131
|
+
& .sw__label {
|
|
132
|
+
font: var(--type-caption);
|
|
133
|
+
font-weight: var(--weight-medium);
|
|
134
|
+
color: var(--text-strong);
|
|
135
|
+
}
|
|
136
|
+
& .sw__track {
|
|
137
|
+
margin-top: calc((var(--leading-caption) - var(--sw-h)) / 2);
|
|
138
|
+
}
|
|
147
139
|
}
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
140
|
+
|
|
141
|
+
/* disabled leaves the flag untouched, so the thumb keeps its correct position */
|
|
142
|
+
.sw--disabled {
|
|
143
|
+
cursor: not-allowed;
|
|
144
|
+
--sw-on-fill: var(--accent-disabled);
|
|
145
|
+
--sw-off-fill: var(--bg-muted);
|
|
146
|
+
--sw-on-border: var(--accent-disabled);
|
|
147
|
+
--sw-off-border: var(--border-default);
|
|
148
|
+
& .sw__thumb {
|
|
149
|
+
box-shadow: var(--shadow-xs);
|
|
150
|
+
}
|
|
151
|
+
& .sw__label,
|
|
152
|
+
& .sw__desc {
|
|
153
|
+
color: var(--text-disabled);
|
|
154
|
+
}
|
|
151
155
|
}
|
|
152
156
|
}
|