@seekalfred/primitives 0.5.1 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +682 -19
- package/dist/accordion/accordion.js +10 -4
- package/dist/accordion/accordion.js.map +1 -1
- package/dist/action-button/action-button.d.ts +50 -0
- package/dist/action-button/action-button.js +159 -0
- package/dist/action-button/action-button.js.map +1 -0
- package/dist/action-button/index.d.ts +2 -0
- package/dist/action-button/index.js +2 -0
- package/dist/activity-heatmap/activity-heatmap.d.ts +92 -0
- package/dist/activity-heatmap/activity-heatmap.js +699 -0
- package/dist/activity-heatmap/activity-heatmap.js.map +1 -0
- package/dist/activity-heatmap/index.d.ts +2 -0
- package/dist/activity-heatmap/index.js +2 -0
- package/dist/alert/alert.d.ts +19 -1
- package/dist/alert/alert.js +180 -23
- package/dist/alert/alert.js.map +1 -1
- package/dist/alert-dialog/alert-dialog.d.ts +45 -18
- package/dist/alert-dialog/alert-dialog.js +128 -9
- package/dist/alert-dialog/alert-dialog.js.map +1 -1
- package/dist/alert-dialog/index.d.ts +2 -2
- package/dist/alert-dialog/index.js +2 -2
- package/dist/animated-counter/animated-counter.d.ts +38 -0
- package/dist/animated-counter/animated-counter.js +230 -0
- package/dist/animated-counter/animated-counter.js.map +1 -0
- package/dist/animated-counter/index.d.ts +2 -0
- package/dist/animated-counter/index.js +2 -0
- package/dist/announcement-bar/announcement-bar.d.ts +67 -0
- package/dist/announcement-bar/announcement-bar.js +364 -0
- package/dist/announcement-bar/announcement-bar.js.map +1 -0
- package/dist/announcement-bar/index.d.ts +2 -0
- package/dist/announcement-bar/index.js +2 -0
- package/dist/avatar/avatar.d.ts +6 -0
- package/dist/avatar/avatar.js +47 -16
- package/dist/avatar/avatar.js.map +1 -1
- package/dist/badge/badge.d.ts +10 -3
- package/dist/badge/badge.js +35 -5
- package/dist/badge/badge.js.map +1 -1
- package/dist/bar-chart/bar-chart.d.ts +51 -0
- package/dist/bar-chart/bar-chart.js +565 -0
- package/dist/bar-chart/bar-chart.js.map +1 -0
- package/dist/bar-chart/index.d.ts +2 -0
- package/dist/bar-chart/index.js +2 -0
- package/dist/breadcrumb/breadcrumb.d.ts +2 -29
- package/dist/breadcrumb/breadcrumb.js +32 -9
- package/dist/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/brush-chart/brush-chart.d.ts +64 -0
- package/dist/brush-chart/brush-chart.js +1056 -0
- package/dist/brush-chart/brush-chart.js.map +1 -0
- package/dist/brush-chart/index.d.ts +2 -0
- package/dist/brush-chart/index.js +2 -0
- package/dist/button/button.d.ts +36 -23
- package/dist/button/button.js +198 -45
- package/dist/button/button.js.map +1 -1
- package/dist/button-group/button-group.d.ts +76 -0
- package/dist/button-group/button-group.js +402 -0
- package/dist/button-group/button-group.js.map +1 -0
- package/dist/button-group/index.d.ts +2 -0
- package/dist/button-group/index.js +2 -0
- package/dist/calendar/calendar.d.ts +1 -1
- package/dist/calendar/calendar.js +257 -30
- package/dist/calendar/calendar.js.map +1 -1
- package/dist/card/card.d.ts +9 -2
- package/dist/card/card.js +16 -5
- package/dist/card/card.js.map +1 -1
- package/dist/card-stack/card-stack.d.ts +54 -0
- package/dist/card-stack/card-stack.js +492 -0
- package/dist/card-stack/card-stack.js.map +1 -0
- package/dist/card-stack/index.d.ts +2 -0
- package/dist/card-stack/index.js +2 -0
- package/dist/carousel/carousel.d.ts +56 -0
- package/dist/carousel/carousel.js +389 -0
- package/dist/carousel/carousel.js.map +1 -0
- package/dist/carousel/index.d.ts +2 -0
- package/dist/carousel/index.js +2 -0
- package/dist/checkbox/checkbox.d.ts +0 -7
- package/dist/checkbox/checkbox.js +26 -29
- package/dist/checkbox/checkbox.js.map +1 -1
- package/dist/chip-group/chip-group.d.ts +37 -0
- package/dist/chip-group/chip-group.js +148 -0
- package/dist/chip-group/chip-group.js.map +1 -0
- package/dist/chip-group/index.d.ts +2 -0
- package/dist/chip-group/index.js +2 -0
- package/dist/confirm-morph/confirm-morph.d.ts +85 -0
- package/dist/confirm-morph/confirm-morph.js +652 -0
- package/dist/confirm-morph/confirm-morph.js.map +1 -0
- package/dist/confirm-morph/index.d.ts +2 -0
- package/dist/confirm-morph/index.js +2 -0
- package/dist/copy-button/copy-button.d.ts +32 -0
- package/dist/copy-button/copy-button.js +134 -0
- package/dist/copy-button/copy-button.js.map +1 -0
- package/dist/copy-button/index.d.ts +2 -0
- package/dist/copy-button/index.js +2 -0
- package/dist/countdown/countdown.d.ts +45 -0
- package/dist/countdown/countdown.js +298 -0
- package/dist/countdown/countdown.js.map +1 -0
- package/dist/countdown/index.d.ts +2 -0
- package/dist/countdown/index.js +2 -0
- package/dist/date-picker/date-picker.d.ts +51 -0
- package/dist/date-picker/date-picker.js +241 -0
- package/dist/date-picker/date-picker.js.map +1 -0
- package/dist/date-picker/date-range-picker.d.ts +78 -0
- package/dist/date-picker/date-range-picker.js +1015 -0
- package/dist/date-picker/date-range-picker.js.map +1 -0
- package/dist/date-picker/index.d.ts +4 -0
- package/dist/date-picker/index.js +4 -0
- package/dist/date-picker/picker-parts.d.ts +46 -0
- package/dist/date-picker/picker-parts.js +135 -0
- package/dist/date-picker/picker-parts.js.map +1 -0
- package/dist/dialog/dialog.d.ts +10 -14
- package/dist/dialog/dialog.js +40 -12
- package/dist/dialog/dialog.js.map +1 -1
- package/dist/donut-chart/donut-chart.d.ts +64 -0
- package/dist/donut-chart/donut-chart.js +576 -0
- package/dist/donut-chart/donut-chart.js.map +1 -0
- package/dist/donut-chart/index.d.ts +2 -0
- package/dist/donut-chart/index.js +2 -0
- package/dist/empty-state/empty-state.d.ts +55 -0
- package/dist/empty-state/empty-state.js +89 -0
- package/dist/empty-state/empty-state.js.map +1 -0
- package/dist/empty-state/index.d.ts +2 -0
- package/dist/empty-state/index.js +2 -0
- package/dist/expanding-button-group/expanding-button-group.d.ts +54 -0
- package/dist/expanding-button-group/expanding-button-group.js +350 -0
- package/dist/expanding-button-group/expanding-button-group.js.map +1 -0
- package/dist/expanding-button-group/index.d.ts +2 -0
- package/dist/expanding-button-group/index.js +2 -0
- package/dist/file-drop-zone/file-drop-zone.d.ts +71 -0
- package/dist/file-drop-zone/file-drop-zone.js +116 -0
- package/dist/file-drop-zone/file-drop-zone.js.map +1 -0
- package/dist/file-drop-zone/index.d.ts +2 -0
- package/dist/file-drop-zone/index.js +2 -0
- package/dist/filter-bar/filter-bar.d.ts +142 -0
- package/dist/filter-bar/filter-bar.js +416 -0
- package/dist/filter-bar/filter-bar.js.map +1 -0
- package/dist/filter-bar/index.d.ts +2 -0
- package/dist/filter-bar/index.js +2 -0
- package/dist/floating-button-group/floating-button-group.d.ts +61 -0
- package/dist/floating-button-group/floating-button-group.js +340 -0
- package/dist/floating-button-group/floating-button-group.js.map +1 -0
- package/dist/floating-button-group/index.d.ts +2 -0
- package/dist/floating-button-group/index.js +2 -0
- package/dist/gauge/gauge.d.ts +45 -0
- package/dist/gauge/gauge.js +219 -0
- package/dist/gauge/gauge.js.map +1 -0
- package/dist/gauge/index.d.ts +2 -0
- package/dist/gauge/index.js +2 -0
- package/dist/icon-morph/icon-morph.d.ts +55 -0
- package/dist/icon-morph/icon-morph.js +331 -0
- package/dist/icon-morph/icon-morph.js.map +1 -0
- package/dist/icon-morph/index.d.ts +2 -0
- package/dist/icon-morph/index.js +2 -0
- package/dist/in-view-title/in-view-title.d.ts +33 -0
- package/dist/in-view-title/in-view-title.js +119 -0
- package/dist/in-view-title/in-view-title.js.map +1 -0
- package/dist/in-view-title/index.d.ts +2 -0
- package/dist/in-view-title/index.js +2 -0
- package/dist/index.d.ts +71 -6
- package/dist/index.js +73 -11
- package/dist/input/input.d.ts +22 -0
- package/dist/input/input.js +36 -12
- package/dist/input/input.js.map +1 -1
- package/dist/lib/cn.js +11 -1
- package/dist/lib/cn.js.map +1 -1
- package/dist/lib/count-to.js +113 -0
- package/dist/lib/count-to.js.map +1 -0
- package/dist/lib/eye-morph.js +62 -0
- package/dist/lib/eye-morph.js.map +1 -0
- package/dist/lib/field-message.js +354 -0
- package/dist/lib/field-message.js.map +1 -0
- package/dist/lib/field-shell.js +81 -0
- package/dist/lib/field-shell.js.map +1 -0
- package/dist/lib/field-surface.js +11 -8
- package/dist/lib/field-surface.js.map +1 -1
- package/dist/lib/flag-emoji.js +50 -0
- package/dist/lib/flag-emoji.js.map +1 -0
- package/dist/lib/flip.js +88 -0
- package/dist/lib/flip.js.map +1 -0
- package/dist/lib/height-follow.js +59 -0
- package/dist/lib/height-follow.js.map +1 -0
- package/dist/lib/icon-swap.js +47 -0
- package/dist/lib/icon-swap.js.map +1 -0
- package/dist/lib/leaving-list.js +57 -0
- package/dist/lib/leaving-list.js.map +1 -0
- package/dist/lib/menu-highlight.js +64 -0
- package/dist/lib/menu-highlight.js.map +1 -0
- package/dist/lib/merge-refs.js +3 -3
- package/dist/lib/merge-refs.js.map +1 -1
- package/dist/lib/morph-text.js +128 -0
- package/dist/lib/morph-text.js.map +1 -0
- package/dist/lib/motion.js +169 -0
- package/dist/lib/motion.js.map +1 -0
- package/dist/lib/pausable-timeout.js +67 -0
- package/dist/lib/pausable-timeout.js.map +1 -0
- package/dist/lib/rolling-value.js +31 -0
- package/dist/lib/rolling-value.js.map +1 -0
- package/dist/lib/spring-progress.js +114 -0
- package/dist/lib/spring-progress.js.map +1 -0
- package/dist/lib/spring-tween.js +500 -0
- package/dist/lib/spring-tween.js.map +1 -0
- package/dist/lib/svg-id.js +10 -0
- package/dist/lib/svg-id.js.map +1 -0
- package/dist/lib/swap-text.js +79 -0
- package/dist/lib/swap-text.js.map +1 -0
- package/dist/lib/use-copy-feedback.js +36 -0
- package/dist/lib/use-copy-feedback.js.map +1 -0
- package/dist/line-chart/index.d.ts +2 -0
- package/dist/line-chart/index.js +2 -0
- package/dist/line-chart/line-chart.d.ts +76 -0
- package/dist/line-chart/line-chart.js +611 -0
- package/dist/line-chart/line-chart.js.map +1 -0
- package/dist/mention-input/index.d.ts +2 -0
- package/dist/mention-input/index.js +2 -0
- package/dist/mention-input/mention-input.d.ts +98 -0
- package/dist/mention-input/mention-input.js +576 -0
- package/dist/mention-input/mention-input.js.map +1 -0
- package/dist/menu/menu.d.ts +2 -0
- package/dist/menu/menu.js +23 -12
- package/dist/menu/menu.js.map +1 -1
- package/dist/money-input/index.d.ts +2 -0
- package/dist/money-input/index.js +2 -0
- package/dist/money-input/money-input.d.ts +65 -0
- package/dist/money-input/money-input.js +607 -0
- package/dist/money-input/money-input.js.map +1 -0
- package/dist/morph-select/index.d.ts +2 -0
- package/dist/morph-select/index.js +2 -0
- package/dist/morph-select/morph-select.d.ts +71 -0
- package/dist/morph-select/morph-select.js +693 -0
- package/dist/morph-select/morph-select.js.map +1 -0
- package/dist/multi-select/index.d.ts +2 -0
- package/dist/multi-select/index.js +2 -0
- package/dist/multi-select/multi-select.d.ts +36 -0
- package/dist/multi-select/multi-select.js +152 -0
- package/dist/multi-select/multi-select.js.map +1 -0
- package/dist/number-field/index.d.ts +2 -0
- package/dist/number-field/index.js +2 -0
- package/dist/number-field/number-field.d.ts +42 -0
- package/dist/number-field/number-field.js +199 -0
- package/dist/number-field/number-field.js.map +1 -0
- package/dist/onboarding-checklist/index.d.ts +2 -0
- package/dist/onboarding-checklist/index.js +2 -0
- package/dist/onboarding-checklist/onboarding-checklist.d.ts +55 -0
- package/dist/onboarding-checklist/onboarding-checklist.js +577 -0
- package/dist/onboarding-checklist/onboarding-checklist.js.map +1 -0
- package/dist/page-header/index.d.ts +2 -0
- package/dist/page-header/index.js +2 -0
- package/dist/page-header/page-header.d.ts +75 -0
- package/dist/page-header/page-header.js +83 -0
- package/dist/page-header/page-header.js.map +1 -0
- package/dist/password-field/index.d.ts +2 -0
- package/dist/password-field/index.js +2 -0
- package/dist/password-field/password-field.d.ts +37 -0
- package/dist/password-field/password-field.js +101 -0
- package/dist/password-field/password-field.js.map +1 -0
- package/dist/password-strength/index.d.ts +2 -0
- package/dist/password-strength/index.js +2 -0
- package/dist/password-strength/password-strength.d.ts +127 -0
- package/dist/password-strength/password-strength.js +455 -0
- package/dist/password-strength/password-strength.js.map +1 -0
- package/dist/phone-input/index.d.ts +3 -0
- package/dist/phone-input/index.js +3 -0
- package/dist/phone-input/phone-countries.d.ts +29 -0
- package/dist/phone-input/phone-countries.js +170 -0
- package/dist/phone-input/phone-countries.js.map +1 -0
- package/dist/phone-input/phone-input.d.ts +66 -0
- package/dist/phone-input/phone-input.js +440 -0
- package/dist/phone-input/phone-input.js.map +1 -0
- package/dist/popover/popover.d.ts +20 -0
- package/dist/popover/popover.js +33 -9
- package/dist/popover/popover.js.map +1 -1
- package/dist/progress/progress.js +46 -5
- package/dist/progress/progress.js.map +1 -1
- package/dist/radio-group/radio-group.js +8 -7
- package/dist/radio-group/radio-group.js.map +1 -1
- package/dist/reactions/index.d.ts +2 -0
- package/dist/reactions/index.js +2 -0
- package/dist/reactions/reactions.d.ts +50 -0
- package/dist/reactions/reactions.js +315 -0
- package/dist/reactions/reactions.js.map +1 -0
- package/dist/rich-text-editor/index.d.ts +3 -0
- package/dist/rich-text-editor/index.js +2 -0
- package/dist/rich-text-editor/rich-text-editor.d.ts +70 -0
- package/dist/rich-text-editor/rich-text-editor.js +909 -0
- package/dist/rich-text-editor/rich-text-editor.js.map +1 -0
- package/dist/rich-text-editor/rich-text-engine.d.ts +16 -0
- package/dist/rich-text-editor/rich-text-engine.js +366 -0
- package/dist/rich-text-editor/rich-text-engine.js.map +1 -0
- package/dist/rich-text-editor/rich-text-html.js +174 -0
- package/dist/rich-text-editor/rich-text-html.js.map +1 -0
- package/dist/rich-text-editor/rich-text-icons.js +43 -0
- package/dist/rich-text-editor/rich-text-icons.js.map +1 -0
- package/dist/ridgeline/index.d.ts +2 -0
- package/dist/ridgeline/index.js +2 -0
- package/dist/ridgeline/ridgeline.d.ts +55 -0
- package/dist/ridgeline/ridgeline.js +701 -0
- package/dist/ridgeline/ridgeline.js.map +1 -0
- package/dist/scroll-area/index.d.ts +2 -2
- package/dist/scroll-area/index.js +2 -2
- package/dist/scroll-area/scroll-area.d.ts +75 -28
- package/dist/scroll-area/scroll-area.js +212 -41
- package/dist/scroll-area/scroll-area.js.map +1 -1
- package/dist/scrub-input/evaluate.d.ts +14 -0
- package/dist/scrub-input/evaluate.js +72 -0
- package/dist/scrub-input/evaluate.js.map +1 -0
- package/dist/scrub-input/index.d.ts +3 -0
- package/dist/scrub-input/index.js +3 -0
- package/dist/scrub-input/scrub-input.d.ts +74 -0
- package/dist/scrub-input/scrub-input.js +486 -0
- package/dist/scrub-input/scrub-input.js.map +1 -0
- package/dist/search-field/index.d.ts +2 -0
- package/dist/search-field/index.js +2 -0
- package/dist/search-field/search-field.d.ts +27 -0
- package/dist/search-field/search-field.js +155 -0
- package/dist/search-field/search-field.js.map +1 -0
- package/dist/select/select.d.ts +3 -1
- package/dist/select/select.js +95 -25
- package/dist/select/select.js.map +1 -1
- package/dist/separator/separator.d.ts +1 -1
- package/dist/sheet/sheet.js +4 -2
- package/dist/sheet/sheet.js.map +1 -1
- package/dist/shortcut-recorder/index.d.ts +3 -0
- package/dist/shortcut-recorder/index.js +3 -0
- package/dist/shortcut-recorder/shortcut-model.d.ts +27 -0
- package/dist/shortcut-recorder/shortcut-model.js +206 -0
- package/dist/shortcut-recorder/shortcut-model.js.map +1 -0
- package/dist/shortcut-recorder/shortcut-recorder.d.ts +93 -0
- package/dist/shortcut-recorder/shortcut-recorder.js +489 -0
- package/dist/shortcut-recorder/shortcut-recorder.js.map +1 -0
- package/dist/side-nav/index.d.ts +2 -0
- package/dist/side-nav/index.js +2 -0
- package/dist/side-nav/side-nav.d.ts +72 -0
- package/dist/side-nav/side-nav.js +142 -0
- package/dist/side-nav/side-nav.js.map +1 -0
- package/dist/skeleton/skeleton.d.ts +8 -2
- package/dist/skeleton/skeleton.js +6 -2
- package/dist/skeleton/skeleton.js.map +1 -1
- package/dist/slider/index.d.ts +2 -2
- package/dist/slider/slider.d.ts +46 -14
- package/dist/slider/slider.js +188 -50
- package/dist/slider/slider.js.map +1 -1
- package/dist/slope-chart/index.d.ts +2 -0
- package/dist/slope-chart/index.js +2 -0
- package/dist/slope-chart/slope-chart.d.ts +54 -0
- package/dist/slope-chart/slope-chart.js +568 -0
- package/dist/slope-chart/slope-chart.js.map +1 -0
- package/dist/sparkline/index.d.ts +2 -0
- package/dist/sparkline/index.js +2 -0
- package/dist/sparkline/sparkline.d.ts +46 -0
- package/dist/sparkline/sparkline.js +390 -0
- package/dist/sparkline/sparkline.js.map +1 -0
- package/dist/split-bar/index.d.ts +2 -0
- package/dist/split-bar/index.js +2 -0
- package/dist/split-bar/split-bar.d.ts +62 -0
- package/dist/split-bar/split-bar.js +513 -0
- package/dist/split-bar/split-bar.js.map +1 -0
- package/dist/split-button/index.d.ts +2 -0
- package/dist/split-button/index.js +2 -0
- package/dist/split-button/split-button.d.ts +46 -0
- package/dist/split-button/split-button.js +123 -0
- package/dist/split-button/split-button.js.map +1 -0
- package/dist/stat-card/index.d.ts +2 -0
- package/dist/stat-card/index.js +2 -0
- package/dist/stat-card/stat-card.d.ts +101 -0
- package/dist/stat-card/stat-card.js +249 -0
- package/dist/stat-card/stat-card.js.map +1 -0
- package/dist/stepper/index.d.ts +2 -0
- package/dist/stepper/index.js +2 -0
- package/dist/stepper/stepper.d.ts +51 -0
- package/dist/stepper/stepper.js +215 -0
- package/dist/stepper/stepper.js.map +1 -0
- package/dist/streamgraph/index.d.ts +2 -0
- package/dist/streamgraph/index.js +2 -0
- package/dist/streamgraph/streamgraph.d.ts +70 -0
- package/dist/streamgraph/streamgraph.js +613 -0
- package/dist/streamgraph/streamgraph.js.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/swipe-actions/index.d.ts +2 -0
- package/dist/swipe-actions/index.js +2 -0
- package/dist/swipe-actions/swipe-actions.d.ts +67 -0
- package/dist/swipe-actions/swipe-actions.js +552 -0
- package/dist/swipe-actions/swipe-actions.js.map +1 -0
- package/dist/switch/switch.js +10 -9
- package/dist/switch/switch.js.map +1 -1
- package/dist/table/index.d.ts +2 -2
- package/dist/table/index.js +2 -2
- package/dist/table/table.d.ts +87 -4
- package/dist/table/table.js +441 -165
- package/dist/table/table.js.map +1 -1
- package/dist/tabs/tabs.js +143 -7
- package/dist/tabs/tabs.js.map +1 -1
- package/dist/tag-input/index.d.ts +2 -0
- package/dist/tag-input/index.js +2 -0
- package/dist/tag-input/tag-input.d.ts +40 -0
- package/dist/tag-input/tag-input.js +269 -0
- package/dist/tag-input/tag-input.js.map +1 -0
- package/dist/text-morph/index.d.ts +2 -0
- package/dist/text-morph/index.js +2 -0
- package/dist/text-morph/text-morph.d.ts +23 -0
- package/dist/text-morph/text-morph.js +21 -0
- package/dist/text-morph/text-morph.js.map +1 -0
- package/dist/text-reveal/index.d.ts +2 -0
- package/dist/text-reveal/index.js +2 -0
- package/dist/text-reveal/text-reveal.d.ts +27 -0
- package/dist/text-reveal/text-reveal.js +51 -0
- package/dist/text-reveal/text-reveal.js.map +1 -0
- package/dist/text-shimmer/index.d.ts +2 -0
- package/dist/text-shimmer/index.js +2 -0
- package/dist/text-shimmer/text-shimmer.d.ts +29 -0
- package/dist/text-shimmer/text-shimmer.js +29 -0
- package/dist/text-shimmer/text-shimmer.js.map +1 -0
- package/dist/textarea/textarea.d.ts +23 -0
- package/dist/textarea/textarea.js +24 -2
- package/dist/textarea/textarea.js.map +1 -1
- package/dist/theme-switch/index.d.ts +2 -0
- package/dist/theme-switch/index.js +2 -0
- package/dist/theme-switch/theme-switch.d.ts +37 -0
- package/dist/theme-switch/theme-switch.js +123 -0
- package/dist/theme-switch/theme-switch.js.map +1 -0
- package/dist/time-picker/index.d.ts +2 -0
- package/dist/time-picker/index.js +2 -0
- package/dist/time-picker/time-picker.d.ts +54 -0
- package/dist/time-picker/time-picker.js +201 -0
- package/dist/time-picker/time-picker.js.map +1 -0
- package/dist/toast/index.d.ts +2 -2
- package/dist/toast/index.js +2 -2
- package/dist/toast/toast.d.ts +6 -0
- package/dist/toast/toast.js +98 -36
- package/dist/toast/toast.js.map +1 -1
- package/dist/tooltip/tooltip.d.ts +10 -3
- package/dist/tooltip/tooltip.js +67 -18
- package/dist/tooltip/tooltip.js.map +1 -1
- package/dist/treemap/index.d.ts +2 -0
- package/dist/treemap/index.js +2 -0
- package/dist/treemap/treemap.d.ts +53 -0
- package/dist/treemap/treemap.js +699 -0
- package/dist/treemap/treemap.js.map +1 -0
- package/dist/usage-meter/index.d.ts +2 -0
- package/dist/usage-meter/index.js +2 -0
- package/dist/usage-meter/usage-meter.d.ts +50 -0
- package/dist/usage-meter/usage-meter.js +440 -0
- package/dist/usage-meter/usage-meter.js.map +1 -0
- package/dist/waffle-chart/index.d.ts +2 -0
- package/dist/waffle-chart/index.js +2 -0
- package/dist/waffle-chart/waffle-chart.d.ts +57 -0
- package/dist/waffle-chart/waffle-chart.js +426 -0
- package/dist/waffle-chart/waffle-chart.js.map +1 -0
- package/package.json +245 -3
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icon-morph.js","names":[],"sources":["../../src/icon-morph/icon-morph.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef, useState, type CSSProperties, type ReactNode, type SVGProps } from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { lerpPath, useSpringProgress } from \"../lib/spring-progress.js\";\nimport { useSvgId } from \"../lib/svg-id.js\";\n\nexport type IconMorphName =\n \"menu\" | \"play\" | \"plus\" | \"copy\" | \"theme\" | \"chevron\" | \"bell\" | \"heart\";\n\nexport interface IconMorphIconProps extends Omit<SVGProps<SVGSVGElement>, \"ref\" | \"children\"> {\n /**\n * The second state of the icon. menu: close, play: pause, plus: check, copy: check,\n * theme: moon, chevron: turned, bell: notifications on, heart: liked.\n */\n state?: boolean;\n /** Rendered size in px. Defaults to 24. */\n size?: number;\n /** Stroke width in the 24 unit grid. Defaults to 1.75. */\n strokeWidth?: number;\n}\n\n/**\n * A family of icons that morph between two states instead of swapping. Lines\n * rotate and slide into place, shapes interpolate their outlines, and a few\n * carry a small moment of their own: the bell rings when it turns on and the\n * heart bursts when liked. Every morph rides an interruptible spring, so\n * toggling quickly reverses from wherever the icon is. The icons are\n * decorative; put them inside a button that carries the accessible name and\n * `aria-pressed`.\n */\nexport interface IconMorphProps extends IconMorphIconProps {\n name: IconMorphName;\n}\n\n/** Counts how many times `state` turned true after mount, so one-shot moments (a ring, a burst) replay on each turn on. */\nfunction useTurnOns(state: boolean) {\n const [previous, setPrevious] = useState(state);\n const [count, setCount] = useState(0);\n if (previous !== state) {\n setPrevious(state);\n if (state) setCount((value) => value + 1);\n }\n return count;\n}\n\nfunction Frame({\n size = 24,\n strokeWidth = 1.75,\n state,\n className,\n children,\n ...rest\n}: IconMorphIconProps & { children: ReactNode }) {\n return (\n <svg\n viewBox=\"0 0 24 24\"\n width={size}\n height={size}\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n data-on={state ? \"\" : undefined}\n className={cn(\"block flex-none overflow-visible\", className)}\n {...rest}\n >\n {children}\n </svg>\n );\n}\n\n/** Menu to close: the outer lines slide to the middle as they rotate into an X, and the middle line folds away. */\nexport function MenuIcon({ state = false, ...props }: IconMorphIconProps) {\n return (\n <Frame state={state} {...props}>\n <path d=\"M4 6h16\" className=\"icon-morph-menu-top\" />\n <path d=\"M4 12h16\" className=\"icon-morph-menu-middle\" />\n <path d=\"M4 18h16\" className=\"icon-morph-menu-bottom\" />\n </Frame>\n );\n}\n\n// Play is split down the middle into two quads, so each half can become one pause bar.\nconst PLAY = [\"M7 4.5 L12 7.42 L12 16.58 L7 19.5 Z\", \"M12 7.42 L19.5 11.8 L19.5 12.2 L12 16.58 Z\"];\nconst PAUSE = [\"M6.5 5 L10 5 L10 19 L6.5 19 Z\", \"M14 5 L17.5 5 L17.5 19 L14 19 Z\"];\n\n/**\n * A pair of paths that morph between two outlines on the morph spring. The path\n * is driven from script (see useSpringProgress): CSS cannot interpolate `d` in\n * every browser.\n */\nfunction MorphPaths({\n from,\n to,\n state,\n props,\n}: {\n from: string[];\n to: string[];\n state: boolean;\n props?: SVGProps<SVGPathElement>;\n}) {\n const refs = useRef<(SVGPathElement | null)[]>([]);\n // React sets `d` once, at the state it mounts in, and never again; the spring owns it after that.\n const [initial] = useState(() => from.map((d, i) => lerpPath(d, to[i]!, state ? 1 : 0)));\n useSpringProgress(state ? 1 : 0, (progress) => {\n refs.current.forEach((path, i) =>\n path?.setAttribute(\"d\", lerpPath(from[i]!, to[i]!, progress)),\n );\n });\n return (\n <>\n {from.map((_, i) => (\n <path\n key={i}\n ref={(node) => {\n refs.current[i] = node;\n }}\n d={initial[i]}\n {...props}\n />\n ))}\n </>\n );\n}\n\n/** Play to pause: the triangle splits into two halves that straighten into bars. */\nexport function PlayPauseIcon({ state = false, ...props }: IconMorphIconProps) {\n return (\n <Frame state={state} {...props}>\n <MorphPaths\n from={PLAY}\n to={PAUSE}\n state={state}\n props={{ fill: \"currentColor\", strokeWidth: 1.5 }}\n />\n </Frame>\n );\n}\n\n/** Plus to check: each bar swings its ends to become one leg of the check. */\nexport function PlusCheckIcon({ state = false, ...props }: IconMorphIconProps) {\n return (\n <Frame state={state} {...props}>\n <MorphPaths\n from={[\"M12 5 L12 19\", \"M5 12 L19 12\"]}\n to={[\"M20 6.5 L9.5 17\", \"M4.5 12 L9.5 17\"]}\n state={state}\n />\n </Frame>\n );\n}\n\n/** Copy to check: the back sheet tucks under the front one, the front one settles away, and the check draws in. */\nexport function CopyCheckIcon({ state = false, ...props }: IconMorphIconProps) {\n return (\n <Frame state={state} {...props}>\n <path\n d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\n className=\"icon-morph-copy-back\"\n />\n <rect x=\"8\" y=\"8\" width=\"14\" height=\"14\" rx=\"2\" className=\"icon-morph-copy-front\" />\n <path d=\"M5 12.5 L9.5 17 L19 7.5\" pathLength={1} className=\"icon-morph-copy-check\" />\n </Frame>\n );\n}\n\nconst RAYS = Array.from({ length: 8 }, (_, index) => {\n const angle = (index * Math.PI) / 4;\n const c = Math.cos(angle);\n const s = Math.sin(angle);\n const r = (value: number) => Math.round(value * 100) / 100;\n return (\n \"M\" + r(12 + c * 7.5) + \" \" + r(12 + s * 7.5) + \" L\" + r(12 + c * 10) + \" \" + r(12 + s * 10)\n );\n});\n\n/**\n * Sun to moon: the disc grows while a shadow slides across it from the corner, carving the crescent, and the rays turn and fold in.\n * The crescent is drawn as an outline: the disc's edge outside the shadow, and the shadow's edge inside the disc.\n */\nexport function SunMoonIcon({ state = false, ...props }: IconMorphIconProps) {\n const id = useSvgId();\n return (\n <Frame state={state} {...props}>\n <defs>\n <mask id={id + \"-bite\"} maskUnits=\"userSpaceOnUse\" x=\"-8\" y=\"-8\" width=\"40\" height=\"40\">\n <rect x=\"-8\" y=\"-8\" width=\"40\" height=\"40\" fill=\"white\" stroke=\"none\" />\n <circle\n cx={30}\n cy={-6}\n r={6.5}\n fill=\"black\"\n stroke=\"none\"\n className=\"icon-morph-sun-shadow\"\n />\n </mask>\n <clipPath id={id + \"-disc\"}>\n <circle cx={12} cy={12} r={4.5} className=\"icon-morph-sun-disc\" />\n </clipPath>\n </defs>\n <circle\n cx={12}\n cy={12}\n r={4.5}\n mask={\"url(#\" + id + \"-bite)\"}\n className=\"icon-morph-sun-disc\"\n />\n <circle\n cx={30}\n cy={-6}\n r={6.5}\n clipPath={\"url(#\" + id + \"-disc)\"}\n className=\"icon-morph-sun-shadow\"\n />\n <g className=\"icon-morph-sun-rays\">\n {RAYS.map((d) => (\n <path key={d} d={d} />\n ))}\n </g>\n </Frame>\n );\n}\n\nexport interface ChevronIconProps extends IconMorphIconProps {\n /** Degrees the chevron turns when `state` is true. 180 flips down to up; 90 turns right to down. */\n turn?: number;\n /** Where the chevron points at rest. */\n pointing?: \"down\" | \"right\";\n}\n\n/** A chevron that turns on a spring, for disclosure and sort controls. */\nexport function ChevronIcon({\n state = false,\n turn = 180,\n pointing = \"down\",\n style,\n ...props\n}: ChevronIconProps) {\n return (\n <Frame state={state} style={{ \"--turn\": turn + \"deg\", ...style } as CSSProperties} {...props}>\n <path\n d={pointing === \"down\" ? \"M6 9 L12 15 L18 9\" : \"M9 6 L15 12 L9 18\"}\n className=\"icon-morph-chevron\"\n />\n </Frame>\n );\n}\n\nconst BELL = \"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\";\nconst CLAPPER = \"M10.3 21a1.94 1.94 0 0 0 3.4 0\";\n\n/** Notifications on and off: turning on rings the bell from its top, with the clapper lagging behind; turning off strikes it through. */\nexport function BellIcon({ state = false, ...props }: IconMorphIconProps) {\n const id = useSvgId();\n const rings = useTurnOns(state);\n return (\n <Frame state={state} {...props}>\n <defs>\n <mask id={id + \"-cut\"} maskUnits=\"userSpaceOnUse\" x=\"-4\" y=\"-4\" width=\"32\" height=\"32\">\n <rect x=\"-4\" y=\"-4\" width=\"32\" height=\"32\" fill=\"white\" stroke=\"none\" />\n <path\n d=\"M3 3 L21 21\"\n stroke=\"black\"\n strokeWidth={5}\n pathLength={1}\n className=\"icon-morph-slash\"\n />\n </mask>\n </defs>\n <g mask={\"url(#\" + id + \"-cut)\"}>\n <g\n key={\"bell-\" + rings}\n className={cn(\n \"[transform-box:fill-box] [transform-origin:50%_0%]\",\n rings > 0 && \"motion-safe:animate-bell-ring\",\n )}\n >\n <path d={BELL} />\n </g>\n <path\n key={\"clapper-\" + rings}\n d={CLAPPER}\n className={cn(rings > 0 && \"motion-safe:animate-clapper-ring\")}\n />\n </g>\n <path d=\"M3 3 L21 21\" pathLength={1} className=\"icon-morph-slash\" />\n </Frame>\n );\n}\n\nconst HEART =\n \"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\";\nconst SPARKS = Array.from({ length: 7 }, (_, index) => {\n const angle = -Math.PI / 2 + (index * 2 * Math.PI) / 7;\n return { x: Math.cos(angle), y: Math.sin(angle), r: index % 2 ? 1 : 1.4 };\n});\n\n/** Like: the heart fills with a pop, and a ring and a few sparks burst out once. Unliking simply empties it. */\nexport function HeartIcon({ state = false, className, ...props }: IconMorphIconProps) {\n const likes = useTurnOns(state);\n const burst = likes > 0 && state;\n return (\n <Frame state={state} className={cn(\"icon-morph-heart\", className)} {...props}>\n {burst ? (\n <g key={\"burst-\" + likes} stroke=\"none\">\n <circle\n cx={12}\n cy={12}\n r={13}\n fill=\"none\"\n stroke=\"currentColor\"\n className=\"motion-safe:animate-heart-ring\"\n />\n {SPARKS.map((spark, index) => (\n <circle\n key={index}\n cx={12}\n cy={12}\n r={spark.r}\n fill=\"currentColor\"\n style={{ \"--sx\": spark.x, \"--sy\": spark.y } as CSSProperties}\n className=\"icon-morph-part motion-safe:animate-heart-spark\"\n />\n ))}\n </g>\n ) : null}\n <g\n key={\"heart-\" + likes}\n className={cn(\"icon-morph-part\", burst && \"motion-safe:animate-heart-pop\")}\n >\n <path d={HEART} fill=\"currentColor\" className=\"icon-morph-heart-fill\" />\n </g>\n </Frame>\n );\n}\n\nconst ICONS: Record<IconMorphName, (props: IconMorphIconProps) => ReactNode> = {\n menu: MenuIcon,\n play: PlayPauseIcon,\n plus: PlusCheckIcon,\n copy: CopyCheckIcon,\n theme: SunMoonIcon,\n chevron: ChevronIcon,\n bell: BellIcon,\n heart: HeartIcon,\n};\n\n/** One entry point for every morphing icon: pick it by `name` and drive it with `state`. */\nexport function IconMorph({ name, ...props }: IconMorphProps) {\n const Icon = ICONS[name];\n return <Icon {...props} />;\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { BellIcon, ChevronIcon, ChevronIconProps, CopyCheckIcon, HeartIcon, IconMorph, IconMorphIconProps, IconMorphName, IconMorphProps, MenuIcon, PlayPauseIcon, PlusCheckIcon, SunMoonIcon } from "./icon-morph.js";
|
|
2
|
+
export { BellIcon, ChevronIcon, type ChevronIconProps, CopyCheckIcon, HeartIcon, IconMorph, type IconMorphIconProps, type IconMorphName, type IconMorphProps, MenuIcon, PlayPauseIcon, PlusCheckIcon, SunMoonIcon };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
//#region src/in-view-title/in-view-title.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* How the title reveals. `blur` sharpens word by word and suits most headings.
|
|
4
|
+
* `word` and `line` rise out of a clip, for editorial pages. `tracking` opens
|
|
5
|
+
* tight letter spacing. `wipe` uncovers the title from left to right through a
|
|
6
|
+
* soft edge.
|
|
7
|
+
*/
|
|
8
|
+
export type InViewTitleVariant = "word" | "line" | "blur" | "tracking" | "wipe";
|
|
9
|
+
/**
|
|
10
|
+
* InViewTitle: a section title that reveals itself when it scrolls into view,
|
|
11
|
+
* once. A title already above the viewport shows at once, and a title rendered
|
|
12
|
+
* on a server appears on its own if scripts are slow, so text is never left
|
|
13
|
+
* hidden. The title is spoken as one heading (the pieces are a picture); reduced
|
|
14
|
+
* motion shows it at once.
|
|
15
|
+
*/
|
|
16
|
+
export interface InViewTitleProps {
|
|
17
|
+
/** The title. */
|
|
18
|
+
text: string;
|
|
19
|
+
/** How it reveals. @default "blur" */
|
|
20
|
+
variant?: InViewTitleVariant;
|
|
21
|
+
/** The element to render. @default "h2" */
|
|
22
|
+
as?: "h1" | "h2" | "h3";
|
|
23
|
+
/** The breaks for the `line` variant. Without them the whole title is one line. */
|
|
24
|
+
lines?: string[];
|
|
25
|
+
/** Reveal only the first time it enters. With false it hides again when it leaves below and replays. @default true */
|
|
26
|
+
once?: boolean;
|
|
27
|
+
id?: string;
|
|
28
|
+
/** Extra classes for the wrapper. Merged last. */
|
|
29
|
+
className?: string;
|
|
30
|
+
}
|
|
31
|
+
export declare const InViewTitle: import("react").ForwardRefExoticComponent<InViewTitleProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
32
|
+
//#endregion
|
|
33
|
+
//# sourceMappingURL=in-view-title.d.ts.map
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.js";
|
|
3
|
+
import { mergeRefs } from "../lib/merge-refs.js";
|
|
4
|
+
import { Fragment, forwardRef, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
//#region src/in-view-title/in-view-title.tsx
|
|
7
|
+
const TYPE = {
|
|
8
|
+
h1: "font-display text-h1 leading-(--leading-snug) m-0 font-semibold",
|
|
9
|
+
h2: "font-display text-h2 leading-(--leading-snug) m-0 font-semibold",
|
|
10
|
+
h3: "font-display text-h3 leading-(--leading-snug) m-0 font-semibold"
|
|
11
|
+
};
|
|
12
|
+
/** A title is revealed when this much of it is on screen. */
|
|
13
|
+
const THRESHOLD = .45;
|
|
14
|
+
const lateBoot = typeof window !== "undefined" && performance.now() > 2400;
|
|
15
|
+
/** Stagger between words (ms): 60 at most, and 400 in all. Lines stagger 80. Letters of the tracking variant move with their word. */
|
|
16
|
+
const WORD_STEP_MS = 60;
|
|
17
|
+
const WORD_MAX_MS = 400;
|
|
18
|
+
const LINE_STEP_MS = 80;
|
|
19
|
+
const TRACKING_STEP_MS = 32;
|
|
20
|
+
/** How far each letter travels per step from its word's centre in the tracking variant. */
|
|
21
|
+
const TRACK_EM = .06;
|
|
22
|
+
const subscribeNothing = () => () => {};
|
|
23
|
+
const delayOf = (ms) => ({ "--part-delay": `${ms}ms` });
|
|
24
|
+
const InViewTitle = forwardRef(function InViewTitle({ text, variant = "blur", as = "h2", lines, once = true, id, className }, ref) {
|
|
25
|
+
const root = useRef(null);
|
|
26
|
+
const refs = useMemo(() => mergeRefs(ref, root), [ref]);
|
|
27
|
+
const hydrated = useSyncExternalStore(subscribeNothing, () => true, () => false);
|
|
28
|
+
const [serverRendered] = useState(!hydrated);
|
|
29
|
+
const late = serverRendered && lateBoot;
|
|
30
|
+
const [seen, setSeen] = useState(false);
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
const node = root.current;
|
|
33
|
+
if (!node) return;
|
|
34
|
+
if (typeof IntersectionObserver === "undefined") {
|
|
35
|
+
setSeen(true);
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
const observer = new IntersectionObserver(([entry]) => {
|
|
39
|
+
if (!entry) return;
|
|
40
|
+
const passed = !entry.isIntersecting && entry.boundingClientRect.top < 0;
|
|
41
|
+
if (entry.isIntersecting || passed) {
|
|
42
|
+
setSeen(true);
|
|
43
|
+
if (once) observer.disconnect();
|
|
44
|
+
} else if (!once) setSeen(false);
|
|
45
|
+
}, { threshold: THRESHOLD });
|
|
46
|
+
observer.observe(node);
|
|
47
|
+
return () => observer.disconnect();
|
|
48
|
+
}, [once]);
|
|
49
|
+
const Tag = as;
|
|
50
|
+
const words = text.split(" ").filter(Boolean);
|
|
51
|
+
const step = Math.min(WORD_STEP_MS, WORD_MAX_MS / Math.max(words.length, 1));
|
|
52
|
+
const space = (index, total) => index < total - 1 ? " " : null;
|
|
53
|
+
let body = null;
|
|
54
|
+
if (variant === "word") body = words.map((word, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
|
|
55
|
+
className: "in-view-title-clip",
|
|
56
|
+
"aria-hidden": "true",
|
|
57
|
+
children: /* @__PURE__ */ jsx("span", {
|
|
58
|
+
"data-part": "",
|
|
59
|
+
style: delayOf(index * step),
|
|
60
|
+
children: word
|
|
61
|
+
})
|
|
62
|
+
}), space(index, words.length)] }, `${word}-${index}`));
|
|
63
|
+
else if (variant === "line") body = (lines?.length ? lines : [text]).map((line, index) => /* @__PURE__ */ jsx("span", {
|
|
64
|
+
className: "in-view-title-line-clip",
|
|
65
|
+
"aria-hidden": "true",
|
|
66
|
+
children: /* @__PURE__ */ jsx("span", {
|
|
67
|
+
"data-part": "",
|
|
68
|
+
style: delayOf(index * LINE_STEP_MS),
|
|
69
|
+
children: line
|
|
70
|
+
})
|
|
71
|
+
}, `${line}-${index}`));
|
|
72
|
+
else if (variant === "blur") body = words.map((word, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
|
|
73
|
+
"data-part": "",
|
|
74
|
+
"aria-hidden": "true",
|
|
75
|
+
style: delayOf(index * step),
|
|
76
|
+
children: word
|
|
77
|
+
}), space(index, words.length)] }, `${word}-${index}`));
|
|
78
|
+
else if (variant === "tracking") body = words.map((word, index) => {
|
|
79
|
+
const letters = Array.from(word);
|
|
80
|
+
const centre = (letters.length - 1) / 2;
|
|
81
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
|
|
82
|
+
className: "whitespace-nowrap",
|
|
83
|
+
"data-part": "",
|
|
84
|
+
"aria-hidden": "true",
|
|
85
|
+
style: delayOf(index * TRACKING_STEP_MS),
|
|
86
|
+
children: letters.map((letter, letterIndex) => /* @__PURE__ */ jsx("span", {
|
|
87
|
+
"data-letter": "",
|
|
88
|
+
style: { "--track-x": `${(centre - letterIndex) * TRACK_EM}em` },
|
|
89
|
+
children: letter
|
|
90
|
+
}, letterIndex))
|
|
91
|
+
}), space(index, words.length)] }, `${word}-${index}`);
|
|
92
|
+
});
|
|
93
|
+
return /* @__PURE__ */ jsx("div", {
|
|
94
|
+
ref: refs,
|
|
95
|
+
"data-slot": "in-view-title",
|
|
96
|
+
"data-variant": variant,
|
|
97
|
+
"data-visible": seen || late ? "" : void 0,
|
|
98
|
+
"data-instant": late ? "" : void 0,
|
|
99
|
+
"data-pending": hydrated ? void 0 : "",
|
|
100
|
+
className: cn("in-view-title", className),
|
|
101
|
+
children: variant === "wipe" ? /* @__PURE__ */ jsx("div", {
|
|
102
|
+
"data-part": "",
|
|
103
|
+
children: /* @__PURE__ */ jsx(Tag, {
|
|
104
|
+
id,
|
|
105
|
+
className: TYPE[as],
|
|
106
|
+
children: text
|
|
107
|
+
})
|
|
108
|
+
}) : /* @__PURE__ */ jsx(Tag, {
|
|
109
|
+
id,
|
|
110
|
+
"aria-label": text,
|
|
111
|
+
className: TYPE[as],
|
|
112
|
+
children: body
|
|
113
|
+
})
|
|
114
|
+
});
|
|
115
|
+
});
|
|
116
|
+
//#endregion
|
|
117
|
+
export { InViewTitle };
|
|
118
|
+
|
|
119
|
+
//# sourceMappingURL=in-view-title.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"in-view-title.js","names":[],"sources":["../../src/in-view-title/in-view-title.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n Fragment,\n forwardRef,\n useEffect,\n useMemo,\n useRef,\n useState,\n useSyncExternalStore,\n type CSSProperties,\n type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\n\n/**\n * How the title reveals. `blur` sharpens word by word and suits most headings.\n * `word` and `line` rise out of a clip, for editorial pages. `tracking` opens\n * tight letter spacing. `wipe` uncovers the title from left to right through a\n * soft edge.\n */\nexport type InViewTitleVariant = \"word\" | \"line\" | \"blur\" | \"tracking\" | \"wipe\";\n\n/**\n * InViewTitle: a section title that reveals itself when it scrolls into view,\n * once. A title already above the viewport shows at once, and a title rendered\n * on a server appears on its own if scripts are slow, so text is never left\n * hidden. The title is spoken as one heading (the pieces are a picture); reduced\n * motion shows it at once.\n */\nexport interface InViewTitleProps {\n /** The title. */\n text: string;\n /** How it reveals. @default \"blur\" */\n variant?: InViewTitleVariant;\n /** The element to render. @default \"h2\" */\n as?: \"h1\" | \"h2\" | \"h3\";\n /** The breaks for the `line` variant. Without them the whole title is one line. */\n lines?: string[];\n /** Reveal only the first time it enters. With false it hides again when it leaves below and replays. @default true */\n once?: boolean;\n id?: string;\n /** Extra classes for the wrapper. Merged last. */\n className?: string;\n}\n\n// Static strings: Tailwind scans source text, so a class built at runtime would never be emitted.\nconst TYPE = {\n h1: \"font-display text-h1 leading-(--leading-snug) m-0 font-semibold\",\n h2: \"font-display text-h2 leading-(--leading-snug) m-0 font-semibold\",\n h3: \"font-display text-h3 leading-(--leading-snug) m-0 font-semibold\",\n} as const;\n\n/** A title is revealed when this much of it is on screen. */\nconst THRESHOLD = 0.45;\n/** Matches the stylesheet fallback: a server-rendered title that scripts reach later than this is already showing, so it stays put. */\nconst FALLBACK_MS = 2400;\nconst lateBoot = typeof window !== \"undefined\" && performance.now() > FALLBACK_MS;\n/** Stagger between words (ms): 60 at most, and 400 in all. Lines stagger 80. Letters of the tracking variant move with their word. */\nconst WORD_STEP_MS = 60;\nconst WORD_MAX_MS = 400;\nconst LINE_STEP_MS = 80;\nconst TRACKING_STEP_MS = 32;\n/** How far each letter travels per step from its word's centre in the tracking variant. */\nconst TRACK_EM = 0.06;\n\nconst subscribeNothing = () => () => {};\nconst delayOf = (ms: number) => ({ \"--part-delay\": `${ms}ms` }) as CSSProperties;\n\nexport const InViewTitle = forwardRef<HTMLDivElement, InViewTitleProps>(function InViewTitle(\n { text, variant = \"blur\", as = \"h2\", lines, once = true, id, className },\n ref,\n) {\n const root = useRef<HTMLDivElement | null>(null);\n const refs = useMemo(() => mergeRefs(ref, root), [ref]);\n const hydrated = useSyncExternalStore(\n subscribeNothing,\n () => true,\n () => false,\n );\n // Rendered on a server, and scripts arrived after the stylesheet fallback had already shown it: nothing to reveal.\n const [serverRendered] = useState(!hydrated);\n const late = serverRendered && lateBoot;\n const [seen, setSeen] = useState(false);\n\n useEffect(() => {\n const node = root.current;\n if (!node) return;\n if (typeof IntersectionObserver === \"undefined\") {\n setSeen(true);\n return;\n }\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (!entry) return;\n // Above the viewport (scrolled past, or restored mid-page) counts as seen: there is nothing to scroll to.\n const passed = !entry.isIntersecting && entry.boundingClientRect.top < 0;\n if (entry.isIntersecting || passed) {\n setSeen(true);\n if (once) observer.disconnect();\n } else if (!once) setSeen(false);\n },\n { threshold: THRESHOLD },\n );\n observer.observe(node);\n return () => observer.disconnect();\n }, [once]);\n\n const Tag = as;\n const words = text.split(\" \").filter(Boolean);\n const step = Math.min(WORD_STEP_MS, WORD_MAX_MS / Math.max(words.length, 1));\n const space = (index: number, total: number) => (index < total - 1 ? \" \" : null);\n\n let body: ReactNode = null;\n if (variant === \"word\") {\n body = words.map((word, index) => (\n <Fragment key={`${word}-${index}`}>\n <span className=\"in-view-title-clip\" aria-hidden=\"true\">\n <span data-part=\"\" style={delayOf(index * step)}>\n {word}\n </span>\n </span>\n {space(index, words.length)}\n </Fragment>\n ));\n } else if (variant === \"line\") {\n body = (lines?.length ? lines : [text]).map((line, index) => (\n <span className=\"in-view-title-line-clip\" aria-hidden=\"true\" key={`${line}-${index}`}>\n <span data-part=\"\" style={delayOf(index * LINE_STEP_MS)}>\n {line}\n </span>\n </span>\n ));\n } else if (variant === \"blur\") {\n body = words.map((word, index) => (\n <Fragment key={`${word}-${index}`}>\n <span data-part=\"\" aria-hidden=\"true\" style={delayOf(index * step)}>\n {word}\n </span>\n {space(index, words.length)}\n </Fragment>\n ));\n } else if (variant === \"tracking\") {\n body = words.map((word, index) => {\n const letters = Array.from(word);\n const centre = (letters.length - 1) / 2;\n return (\n <Fragment key={`${word}-${index}`}>\n <span\n className=\"whitespace-nowrap\"\n data-part=\"\"\n aria-hidden=\"true\"\n style={delayOf(index * TRACKING_STEP_MS)}\n >\n {letters.map((letter, letterIndex) => (\n <span\n key={letterIndex}\n data-letter=\"\"\n style={{ \"--track-x\": `${(centre - letterIndex) * TRACK_EM}em` } as CSSProperties}\n >\n {letter}\n </span>\n ))}\n </span>\n {space(index, words.length)}\n </Fragment>\n );\n });\n }\n\n return (\n <div\n ref={refs}\n data-slot=\"in-view-title\"\n data-variant={variant}\n data-visible={seen || late ? \"\" : undefined}\n data-instant={late ? \"\" : undefined}\n data-pending={hydrated ? undefined : \"\"}\n className={cn(\"in-view-title\", className)}\n >\n {variant === \"wipe\" ? (\n <div data-part=\"\">\n <Tag id={id} className={TYPE[as]}>\n {text}\n </Tag>\n </div>\n ) : (\n <Tag id={id} aria-label={text} className={TYPE[as]}>\n {body}\n </Tag>\n )}\n </div>\n );\n});\n"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,32 +1,97 @@
|
|
|
1
1
|
import { Accordion, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, AccordionTrigger, AccordionTriggerProps } from "./accordion/accordion.js";
|
|
2
|
+
import { Button, ButtonProps, buttonVariants } from "./button/button.js";
|
|
3
|
+
import { ActionButton, ActionButtonProps } from "./action-button/action-button.js";
|
|
4
|
+
import { ActivityDay, ActivityDayDetail, ActivityHeatmap, ActivityHeatmapProps } from "./activity-heatmap/activity-heatmap.js";
|
|
2
5
|
import { Dialog, DialogFooter, DialogFooterProps, DialogProps, DialogTrigger, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants } from "./dialog/dialog.js";
|
|
3
|
-
import { AlertDialog, AlertDialogProps } from "./alert-dialog/alert-dialog.js";
|
|
6
|
+
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogProps } from "./alert-dialog/alert-dialog.js";
|
|
4
7
|
import { Alert, AlertProps, alertVariants } from "./alert/alert.js";
|
|
8
|
+
import { AnimatedCounter, AnimatedCounterProps } from "./animated-counter/animated-counter.js";
|
|
9
|
+
import { Announcement, AnnouncementAction, AnnouncementBar, AnnouncementBarProps, clearAnnouncementDismissal } from "./announcement-bar/announcement-bar.js";
|
|
5
10
|
import { Avatar, AvatarProps, avatarVariants } from "./avatar/avatar.js";
|
|
6
11
|
import { Badge, BadgeProps, badgeVariants } from "./badge/badge.js";
|
|
12
|
+
import { BarChart, BarChartDatum, BarChartProps } from "./bar-chart/bar-chart.js";
|
|
7
13
|
import { BreadcrumbItem, BreadcrumbItemProps, Breadcrumbs, BreadcrumbsProps, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants } from "./breadcrumb/breadcrumb.js";
|
|
8
|
-
import {
|
|
14
|
+
import { BrushChart, BrushChartAnnotation, BrushChartDatum, BrushChartProps } from "./brush-chart/brush-chart.js";
|
|
15
|
+
import { ButtonGroup, ButtonGroupItem, ButtonGroupMenu, ButtonGroupMenuItem, ButtonGroupOrientation, ButtonGroupProps, ButtonGroupSize, ButtonGroupVariant } from "./button-group/button-group.js";
|
|
9
16
|
import { Calendar, CalendarProps, CalendarRange, CalendarRangeProps, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants } from "./calendar/calendar.js";
|
|
17
|
+
import { CardDecision, CardStack, CardStackProps } from "./card-stack/card-stack.js";
|
|
10
18
|
import { Card, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants } from "./card/card.js";
|
|
19
|
+
import { Carousel, CarouselProps } from "./carousel/carousel.js";
|
|
11
20
|
import { Checkbox, CheckboxProps, checkboxBoxVariants, checkboxVariants } from "./checkbox/checkbox.js";
|
|
21
|
+
import { ChipGroup, ChipGroupProps, ChipOption } from "./chip-group/chip-group.js";
|
|
22
|
+
import { ConfirmMorph, ConfirmMorphMode, ConfirmMorphProps, ConfirmMorphState } from "./confirm-morph/confirm-morph.js";
|
|
23
|
+
import { CopyButton, CopyButtonProps } from "./copy-button/copy-button.js";
|
|
24
|
+
import { Countdown, CountdownProps, CountdownUnit } from "./countdown/countdown.js";
|
|
25
|
+
import { datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants } from "./date-picker/picker-parts.js";
|
|
26
|
+
import { DateRangePicker, DateRangePickerMessages, DateRangePickerProps, DateRangePickerValue, DateRangePreset, defaultDateRangePresets } from "./date-picker/date-range-picker.js";
|
|
27
|
+
import { DatePicker, DatePickerProps } from "./date-picker/date-picker.js";
|
|
28
|
+
import { DonutChart, DonutChartDatum, DonutChartProps } from "./donut-chart/donut-chart.js";
|
|
29
|
+
import { EmptyState, EmptyStateProps, emptyStateActionVariants, emptyStateTextVariants, emptyStateVariants } from "./empty-state/empty-state.js";
|
|
30
|
+
import { ExpandingButtonGroup, ExpandingButtonGroupItem, ExpandingButtonGroupProps, ExpandingButtonGroupSize, ExpandingButtonGroupTone } from "./expanding-button-group/expanding-button-group.js";
|
|
31
|
+
import { FileDropZone, FileDropZoneProps, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants } from "./file-drop-zone/file-drop-zone.js";
|
|
32
|
+
import { FilterBar, FilterBarCustomField, FilterBarField, FilterBarOption, FilterBarProps, FilterBarSelectField, filterBarChipVariants, filterBarRowVariants, filterBarVariants } from "./filter-bar/filter-bar.js";
|
|
33
|
+
import { FloatingButtonGroup, FloatingButtonGroupAction, FloatingButtonGroupItem, FloatingButtonGroupOrientation, FloatingButtonGroupProps, FloatingButtonGroupSeparator, FloatingButtonGroupSize, FloatingButtonGroupVariant } from "./floating-button-group/floating-button-group.js";
|
|
34
|
+
import { Gauge, GaugeProps, GaugeThreshold, GaugeTone } from "./gauge/gauge.js";
|
|
35
|
+
import { BellIcon, ChevronIcon, ChevronIconProps, CopyCheckIcon, HeartIcon, IconMorph, IconMorphIconProps, IconMorphName, IconMorphProps, MenuIcon, PlayPauseIcon, PlusCheckIcon, SunMoonIcon } from "./icon-morph/icon-morph.js";
|
|
36
|
+
import { InViewTitle, InViewTitleProps, InViewTitleVariant } from "./in-view-title/in-view-title.js";
|
|
12
37
|
import { Input, InputProps, inputVariants } from "./input/input.js";
|
|
13
38
|
import { Label, LabelProps, labelVariants } from "./label/label.js";
|
|
14
39
|
import { cn, cnAll } from "./lib/cn.js";
|
|
40
|
+
import { LINE_CHART_DRAW_MS, LineChart, LineChartDatum, LineChartProps, LineChartSeries } from "./line-chart/line-chart.js";
|
|
41
|
+
import { Mention, MentionChannel, MentionInput, MentionInputHandle, MentionInputProps, MentionKind, MentionPerson, MentionValue, mentionText, serializeMentions } from "./mention-input/mention-input.js";
|
|
15
42
|
import { Menu, MenuItem, MenuItemProps, MenuProps, MenuSeparator, MenuTrigger, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants } from "./menu/menu.js";
|
|
43
|
+
import { MoneyInput, MoneyInputDetails, MoneyInputProps } from "./money-input/money-input.js";
|
|
44
|
+
import { MorphSelect, MorphSelectGroup, MorphSelectItem, MorphSelectOption, MorphSelectProps } from "./morph-select/morph-select.js";
|
|
45
|
+
import { MultiSelect, MultiSelectProps } from "./multi-select/multi-select.js";
|
|
46
|
+
import { NumberField, NumberFieldProps } from "./number-field/number-field.js";
|
|
47
|
+
import { OnboardingChecklist, OnboardingChecklistProps, OnboardingStep } from "./onboarding-checklist/onboarding-checklist.js";
|
|
48
|
+
import { PageHeader, PageHeaderProps, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants } from "./page-header/page-header.js";
|
|
49
|
+
import { PasswordField, PasswordFieldMessages, PasswordFieldProps, defaultPasswordFieldMessages } from "./password-field/password-field.js";
|
|
50
|
+
import { EstimateStrengthOptions, PasswordRule, PasswordRuleLabels, PasswordRuleOptions, PasswordStrength, PasswordStrengthLevels, PasswordStrengthMessages, PasswordStrengthMessagesInput, PasswordStrengthProps, PasswordStrengthResult, countCodePoints, createPasswordRules, defaultPasswordRules, defaultPasswordStrengthMessages, estimateStrength } from "./password-strength/password-strength.js";
|
|
51
|
+
import { PHONE_COUNTRIES, PhoneCountry, PhoneStatus, formatNational, formatPhoneNumber, parsePhoneNumber } from "./phone-input/phone-countries.js";
|
|
52
|
+
import { PhoneInput, PhoneInputDetails, PhoneInputProps } from "./phone-input/phone-input.js";
|
|
16
53
|
import { Popover, PopoverProps, PopoverTrigger, popoverVariants } from "./popover/popover.js";
|
|
17
54
|
import { Progress, ProgressProps, progressFillVariants, progressTrackVariants, progressVariants } from "./progress/progress.js";
|
|
18
55
|
import { Radio, RadioGroup, RadioGroupProps, RadioProps, radioGroupVariants, radioVariants } from "./radio-group/radio-group.js";
|
|
19
|
-
import {
|
|
56
|
+
import { Reaction, ReactionOption, Reactions, ReactionsProps } from "./reactions/reactions.js";
|
|
57
|
+
import { Ridgeline, RidgelineProps, RidgelineSeries } from "./ridgeline/ridgeline.js";
|
|
58
|
+
import { ScrollArea, ScrollAreaProps, scrollAreaRootVariants, scrollAreaVariants } from "./scroll-area/scroll-area.js";
|
|
59
|
+
import { ScrubInput, ScrubInputChangeDetails, ScrubInputProps, ScrubInputSource } from "./scrub-input/scrub-input.js";
|
|
60
|
+
import { evaluateScrubExpression } from "./scrub-input/evaluate.js";
|
|
61
|
+
import "./scrub-input/index.js";
|
|
62
|
+
import { SearchField, SearchFieldProps } from "./search-field/search-field.js";
|
|
20
63
|
import { Select, SelectItem, SelectItemProps, SelectProps, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants } from "./select/select.js";
|
|
21
64
|
import { Separator, SeparatorProps, separatorVariants } from "./separator/separator.js";
|
|
22
65
|
import { Sheet, SheetProps, sheetOverlayVariants, sheetPanelVariants } from "./sheet/sheet.js";
|
|
66
|
+
import { Platform, ShortcutToken, formatShortcut, matchesShortcut, normalizeShortcut, shortcutFromEvent, shortcutTokens } from "./shortcut-recorder/shortcut-model.js";
|
|
67
|
+
import { ShortcutBinding, ShortcutKbd, ShortcutKbdProps, ShortcutKeys, ShortcutKeysProps, ShortcutRecorder, ShortcutRecorderProps, usePlatform, usePressedKeys } from "./shortcut-recorder/shortcut-recorder.js";
|
|
68
|
+
import "./shortcut-recorder/index.js";
|
|
69
|
+
import { SideNav, SideNavGroup, SideNavProps, SideNavSection, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants } from "./side-nav/side-nav.js";
|
|
23
70
|
import { Skeleton, SkeletonProps, skeletonVariants } from "./skeleton/skeleton.js";
|
|
24
|
-
import { Slider, SliderProps, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants } from "./slider/slider.js";
|
|
71
|
+
import { Slider, SliderMark, SliderProps, SliderValue, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants } from "./slider/slider.js";
|
|
72
|
+
import { SlopeChart, SlopeChartProps, SlopeItem } from "./slope-chart/slope-chart.js";
|
|
25
73
|
import { Spinner, SpinnerProps, spinnerVariants } from "./spinner/spinner.js";
|
|
74
|
+
import { SplitBar, SplitBarProps, SplitSegment } from "./split-bar/split-bar.js";
|
|
75
|
+
import { SplitButton, SplitButtonAction, SplitButtonProps } from "./split-button/split-button.js";
|
|
76
|
+
import { SPARKLINE_DRAW_MS, Sparkline, SparklineProps, SparklineTone, sparklineVariants } from "./sparkline/sparkline.js";
|
|
77
|
+
import { StatCard, StatCardProps, StatCardTone, statCardHeaderVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants } from "./stat-card/stat-card.js";
|
|
78
|
+
import { Stepper, StepperOrientation, StepperProps, StepperStatus, StepperStep } from "./stepper/stepper.js";
|
|
79
|
+
import { Streamgraph, StreamgraphDatum, StreamgraphProps, StreamgraphSeries } from "./streamgraph/streamgraph.js";
|
|
80
|
+
import { SwipeAction, SwipeActions, SwipeActionsProps, SwipeActionsRow, SwipeActionsRowProps } from "./swipe-actions/swipe-actions.js";
|
|
81
|
+
import "./swipe-actions/index.js";
|
|
26
82
|
import { Switch, SwitchProps, switchThumbVariants, switchTrackVariants } from "./switch/switch.js";
|
|
27
|
-
import { Column, RowKey, Table, TableProps, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants } from "./table/table.js";
|
|
83
|
+
import { Column, RowKey, Table, TableProps, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableVariants } from "./table/table.js";
|
|
28
84
|
import { Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, Tabs, TabsProps, tabListVariants, tabPanelVariants, tabVariants, tabsVariants } from "./tabs/tabs.js";
|
|
85
|
+
import { TextShimmer, TextShimmerProps } from "./text-shimmer/text-shimmer.js";
|
|
86
|
+
import { TagInput, TagInputProps } from "./tag-input/tag-input.js";
|
|
87
|
+
import { TextMorph, TextMorphProps } from "./text-morph/text-morph.js";
|
|
88
|
+
import { TextReveal, TextRevealProps } from "./text-reveal/text-reveal.js";
|
|
29
89
|
import { Textarea, TextareaProps, textareaVariants } from "./textarea/textarea.js";
|
|
90
|
+
import { Theme, ThemeSwitch, ThemeSwitchProps, ThemeSwitchVariant } from "./theme-switch/theme-switch.js";
|
|
91
|
+
import { TimePicker, TimePickerProps, timePickerItemVariants, timePickerListVariants } from "./time-picker/time-picker.js";
|
|
30
92
|
import { ToastContent, ToastRegion, ToastRegionProps, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants } from "./toast/toast.js";
|
|
31
93
|
import { Tooltip, TooltipProps, TooltipTrigger, TooltipTriggerProps, tooltipVariants } from "./tooltip/tooltip.js";
|
|
32
|
-
|
|
94
|
+
import { Treemap, TreemapNode, TreemapProps } from "./treemap/treemap.js";
|
|
95
|
+
import { UsageMeter, UsageMeterProps, UsageMeterSegment } from "./usage-meter/usage-meter.js";
|
|
96
|
+
import { WaffleCategory, WaffleChart, WaffleChartProps } from "./waffle-chart/waffle-chart.js";
|
|
97
|
+
export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, ActionButton, type ActionButtonProps, type ActivityDay, type ActivityDayDetail, ActivityHeatmap, type ActivityHeatmapProps, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, type AlertDialogProps, type AlertProps, AnimatedCounter, type AnimatedCounterProps, type Announcement, type AnnouncementAction, AnnouncementBar, type AnnouncementBarProps, Avatar, type AvatarProps, Badge, type BadgeProps, BarChart, type BarChartDatum, type BarChartProps, BellIcon, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, BrushChart, type BrushChartAnnotation, type BrushChartDatum, type BrushChartProps, Button, ButtonGroup, type ButtonGroupItem, type ButtonGroupMenu, type ButtonGroupMenuItem, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonGroupSize, type ButtonGroupVariant, type ButtonProps, Calendar, type CalendarProps, CalendarRange, type CalendarRangeProps, Card, CardContent, type CardContentProps, type CardDecision, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardStack, type CardStackProps, CardTitle, type CardTitleProps, Carousel, type CarouselProps, Checkbox, type CheckboxProps, ChevronIcon, type ChevronIconProps, ChipGroup, type ChipGroupProps, type ChipOption, type Column, ConfirmMorph, type ConfirmMorphMode, type ConfirmMorphProps, type ConfirmMorphState, CopyButton, type CopyButtonProps, CopyCheckIcon, Countdown, type CountdownProps, type CountdownUnit, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerMessages, type DateRangePickerProps, type DateRangePickerValue, type DateRangePreset, Dialog, DialogFooter, type DialogFooterProps, type DialogProps, DialogTrigger, DonutChart, type DonutChartDatum, type DonutChartProps, EmptyState, type EmptyStateProps, type EstimateStrengthOptions, ExpandingButtonGroup, type ExpandingButtonGroupItem, type ExpandingButtonGroupProps, type ExpandingButtonGroupSize, type ExpandingButtonGroupTone, FileDropZone, type FileDropZoneProps, FilterBar, type FilterBarCustomField, type FilterBarField, type FilterBarOption, type FilterBarProps, type FilterBarSelectField, FloatingButtonGroup, type FloatingButtonGroupAction, type FloatingButtonGroupItem, type FloatingButtonGroupOrientation, type FloatingButtonGroupProps, type FloatingButtonGroupSeparator, type FloatingButtonGroupSize, type FloatingButtonGroupVariant, Gauge, type GaugeProps, type GaugeThreshold, type GaugeTone, HeartIcon, IconMorph, type IconMorphIconProps, type IconMorphName, type IconMorphProps, InViewTitle, type InViewTitleProps, type InViewTitleVariant, Input, type InputProps, LINE_CHART_DRAW_MS, Label, type LabelProps, LineChart, type LineChartDatum, type LineChartProps, type LineChartSeries, type Mention, type MentionChannel, MentionInput, type MentionInputHandle, type MentionInputProps, type MentionKind, type MentionPerson, type MentionValue, Menu, MenuIcon, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator, MenuTrigger, MoneyInput, type MoneyInputDetails, type MoneyInputProps, MorphSelect, type MorphSelectGroup, type MorphSelectItem, type MorphSelectOption, type MorphSelectProps, MultiSelect, type MultiSelectProps, NumberField, type NumberFieldProps, OnboardingChecklist, type OnboardingChecklistProps, type OnboardingStep, PHONE_COUNTRIES, PageHeader, type PageHeaderProps, PasswordField, type PasswordFieldMessages, type PasswordFieldProps, type PasswordRule, type PasswordRuleLabels, type PasswordRuleOptions, PasswordStrength, type PasswordStrengthLevels, type PasswordStrengthMessages, type PasswordStrengthMessagesInput, type PasswordStrengthProps, type PasswordStrengthResult, type PhoneCountry, PhoneInput, type PhoneInputDetails, type PhoneInputProps, type PhoneStatus, type Platform, PlayPauseIcon, PlusCheckIcon, Popover, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Reaction, type ReactionOption, Reactions, type ReactionsProps, Ridgeline, type RidgelineProps, type RidgelineSeries, type RowKey, SPARKLINE_DRAW_MS, ScrollArea, type ScrollAreaProps, ScrubInput, type ScrubInputChangeDetails, type ScrubInputProps, type ScrubInputSource, SearchField, type SearchFieldProps, Select, SelectItem, type SelectItemProps, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, type ShortcutBinding, ShortcutKbd, type ShortcutKbdProps, ShortcutKeys, type ShortcutKeysProps, ShortcutRecorder, type ShortcutRecorderProps, type ShortcutToken, SideNav, type SideNavGroup, type SideNavProps, type SideNavSection, Skeleton, type SkeletonProps, Slider, type SliderMark, type SliderProps, type SliderValue, SlopeChart, type SlopeChartProps, type SlopeItem, Sparkline, type SparklineProps, type SparklineTone, Spinner, type SpinnerProps, SplitBar, type SplitBarProps, SplitButton, type SplitButtonAction, type SplitButtonProps, type SplitSegment, StatCard, type StatCardProps, type StatCardTone, Stepper, type StepperOrientation, type StepperProps, type StepperStatus, type StepperStep, Streamgraph, type StreamgraphDatum, type StreamgraphProps, type StreamgraphSeries, SunMoonIcon, type SwipeAction, SwipeActions, type SwipeActionsProps, SwipeActionsRow, type SwipeActionsRowProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableProps, Tabs, type TabsProps, TagInput, type TagInputProps, TextMorph, type TextMorphProps, TextReveal, type TextRevealProps, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, type Theme, ThemeSwitch, type ThemeSwitchProps, type ThemeSwitchVariant, TimePicker, type TimePickerProps, type ToastContent, ToastRegion, type ToastRegionProps, Tooltip, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, Treemap, type TreemapNode, type TreemapProps, UsageMeter, type UsageMeterProps, type UsageMeterSegment, type WaffleCategory, WaffleChart, type WaffleChartProps, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxVariants, clearAnnouncementDismissal, cn, cnAll, countCodePoints, createColumns, createPasswordRules, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, defaultDateRangePresets, defaultPasswordFieldMessages, defaultPasswordRules, defaultPasswordStrengthMessages, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, emptyStateActionVariants, emptyStateTextVariants, emptyStateVariants, estimateStrength, evaluateScrubExpression, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants, filterBarChipVariants, filterBarRowVariants, filterBarVariants, formatNational, formatPhoneNumber, formatShortcut, inputVariants, labelVariants, matchesShortcut, mentionText, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, normalizeShortcut, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants, parsePhoneNumber, popoverVariants, progressFillVariants, progressTrackVariants, progressVariants, radioGroupVariants, radioVariants, scrollAreaRootVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, serializeMentions, sheetOverlayVariants, sheetPanelVariants, shortcutFromEvent, shortcutTokens, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, sparklineVariants, spinnerVariants, statCardHeaderVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableVariants, tabsVariants, textareaVariants, timePickerItemVariants, timePickerListVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, tooltipVariants, usePlatform, usePressedKeys };
|
package/dist/index.js
CHANGED
|
@@ -1,32 +1,94 @@
|
|
|
1
1
|
import { cn, cnAll } from "./lib/cn.js";
|
|
2
2
|
import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "./accordion/accordion.js";
|
|
3
|
+
import { Button, buttonVariants } from "./button/button.js";
|
|
4
|
+
import { ActionButton } from "./action-button/action-button.js";
|
|
5
|
+
import { Tab, TabList, TabPanel, Tabs, tabListVariants, tabPanelVariants, tabVariants, tabsVariants } from "./tabs/tabs.js";
|
|
6
|
+
import { ActivityHeatmap } from "./activity-heatmap/activity-heatmap.js";
|
|
3
7
|
import { Dialog, DialogFooter, DialogTrigger, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants } from "./dialog/dialog.js";
|
|
4
|
-
import { AlertDialog } from "./alert-dialog/alert-dialog.js";
|
|
8
|
+
import { AlertDialog, AlertDialogAction, AlertDialogCancel } from "./alert-dialog/alert-dialog.js";
|
|
9
|
+
import { AnimatedCounter } from "./animated-counter/animated-counter.js";
|
|
5
10
|
import { Alert, alertVariants } from "./alert/alert.js";
|
|
11
|
+
import { AnnouncementBar, clearAnnouncementDismissal } from "./announcement-bar/announcement-bar.js";
|
|
6
12
|
import { Avatar, avatarVariants } from "./avatar/avatar.js";
|
|
7
13
|
import { Badge, badgeVariants } from "./badge/badge.js";
|
|
14
|
+
import { BarChart } from "./bar-chart/bar-chart.js";
|
|
8
15
|
import { BreadcrumbItem, Breadcrumbs, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants } from "./breadcrumb/breadcrumb.js";
|
|
9
|
-
import {
|
|
16
|
+
import { BrushChart } from "./brush-chart/brush-chart.js";
|
|
17
|
+
import { Menu, MenuItem, MenuSeparator, MenuTrigger, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants } from "./menu/menu.js";
|
|
18
|
+
import { ButtonGroup } from "./button-group/button-group.js";
|
|
10
19
|
import { Calendar, CalendarRange, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants } from "./calendar/calendar.js";
|
|
11
20
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants } from "./card/card.js";
|
|
21
|
+
import { CardStack } from "./card-stack/card-stack.js";
|
|
22
|
+
import { Carousel } from "./carousel/carousel.js";
|
|
12
23
|
import { Checkbox, checkboxBoxVariants, checkboxVariants } from "./checkbox/checkbox.js";
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
24
|
+
import { ChipGroup } from "./chip-group/chip-group.js";
|
|
25
|
+
import { ConfirmMorph } from "./confirm-morph/confirm-morph.js";
|
|
26
|
+
import { CopyButton } from "./copy-button/copy-button.js";
|
|
27
|
+
import { Countdown } from "./countdown/countdown.js";
|
|
16
28
|
import { Popover, PopoverTrigger, popoverVariants } from "./popover/popover.js";
|
|
29
|
+
import { datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants } from "./date-picker/picker-parts.js";
|
|
30
|
+
import { DateRangePicker, defaultDateRangePresets } from "./date-picker/date-range-picker.js";
|
|
31
|
+
import { DatePicker } from "./date-picker/date-picker.js";
|
|
32
|
+
import { DonutChart } from "./donut-chart/donut-chart.js";
|
|
33
|
+
import { EmptyState, emptyStateActionVariants, emptyStateTextVariants, emptyStateVariants } from "./empty-state/empty-state.js";
|
|
34
|
+
import { ExpandingButtonGroup } from "./expanding-button-group/expanding-button-group.js";
|
|
35
|
+
import { FileDropZone, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants } from "./file-drop-zone/file-drop-zone.js";
|
|
36
|
+
import { FilterBar, filterBarChipVariants, filterBarRowVariants, filterBarVariants } from "./filter-bar/filter-bar.js";
|
|
37
|
+
import { Tooltip, TooltipTrigger, tooltipVariants } from "./tooltip/tooltip.js";
|
|
38
|
+
import { FloatingButtonGroup } from "./floating-button-group/floating-button-group.js";
|
|
39
|
+
import { Gauge } from "./gauge/gauge.js";
|
|
40
|
+
import { BellIcon, ChevronIcon, CopyCheckIcon, HeartIcon, IconMorph, MenuIcon, PlayPauseIcon, PlusCheckIcon, SunMoonIcon } from "./icon-morph/icon-morph.js";
|
|
41
|
+
import { InViewTitle } from "./in-view-title/in-view-title.js";
|
|
42
|
+
import { Label, labelVariants } from "./label/label.js";
|
|
43
|
+
import { Input, inputVariants } from "./input/input.js";
|
|
44
|
+
import { LINE_CHART_DRAW_MS, LineChart } from "./line-chart/line-chart.js";
|
|
45
|
+
import { MentionInput, mentionText, serializeMentions } from "./mention-input/mention-input.js";
|
|
46
|
+
import { Select, SelectItem, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants } from "./select/select.js";
|
|
47
|
+
import { MoneyInput } from "./money-input/money-input.js";
|
|
48
|
+
import { MorphSelect } from "./morph-select/morph-select.js";
|
|
49
|
+
import { MultiSelect } from "./multi-select/multi-select.js";
|
|
50
|
+
import { NumberField } from "./number-field/number-field.js";
|
|
51
|
+
import { OnboardingChecklist } from "./onboarding-checklist/onboarding-checklist.js";
|
|
52
|
+
import { PageHeader, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants } from "./page-header/page-header.js";
|
|
53
|
+
import { PasswordField, defaultPasswordFieldMessages } from "./password-field/password-field.js";
|
|
54
|
+
import { PasswordStrength, countCodePoints, createPasswordRules, defaultPasswordRules, defaultPasswordStrengthMessages, estimateStrength } from "./password-strength/password-strength.js";
|
|
55
|
+
import { ScrollArea, scrollAreaRootVariants, scrollAreaVariants } from "./scroll-area/scroll-area.js";
|
|
56
|
+
import { PHONE_COUNTRIES, formatNational, formatPhoneNumber, parsePhoneNumber } from "./phone-input/phone-countries.js";
|
|
57
|
+
import { PhoneInput } from "./phone-input/phone-input.js";
|
|
17
58
|
import { Progress, progressFillVariants, progressTrackVariants, progressVariants } from "./progress/progress.js";
|
|
18
59
|
import { Radio, RadioGroup, radioGroupVariants, radioVariants } from "./radio-group/radio-group.js";
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
60
|
+
import { Reactions } from "./reactions/reactions.js";
|
|
61
|
+
import { Ridgeline } from "./ridgeline/ridgeline.js";
|
|
62
|
+
import { evaluateScrubExpression } from "./scrub-input/evaluate.js";
|
|
63
|
+
import { ScrubInput } from "./scrub-input/scrub-input.js";
|
|
64
|
+
import { SearchField } from "./search-field/search-field.js";
|
|
21
65
|
import { Separator, separatorVariants } from "./separator/separator.js";
|
|
22
66
|
import { Sheet, sheetOverlayVariants, sheetPanelVariants } from "./sheet/sheet.js";
|
|
67
|
+
import { formatShortcut, matchesShortcut, normalizeShortcut, shortcutFromEvent, shortcutTokens } from "./shortcut-recorder/shortcut-model.js";
|
|
68
|
+
import { ShortcutKbd, ShortcutKeys, ShortcutRecorder, usePlatform, usePressedKeys } from "./shortcut-recorder/shortcut-recorder.js";
|
|
69
|
+
import { SideNav, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants } from "./side-nav/side-nav.js";
|
|
23
70
|
import { Skeleton, skeletonVariants } from "./skeleton/skeleton.js";
|
|
24
71
|
import { Slider, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants } from "./slider/slider.js";
|
|
72
|
+
import { SlopeChart } from "./slope-chart/slope-chart.js";
|
|
25
73
|
import { Spinner, spinnerVariants } from "./spinner/spinner.js";
|
|
74
|
+
import { SplitBar } from "./split-bar/split-bar.js";
|
|
75
|
+
import { SplitButton } from "./split-button/split-button.js";
|
|
76
|
+
import { SPARKLINE_DRAW_MS, Sparkline, sparklineVariants } from "./sparkline/sparkline.js";
|
|
77
|
+
import { StatCard, statCardHeaderVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants } from "./stat-card/stat-card.js";
|
|
78
|
+
import { Stepper } from "./stepper/stepper.js";
|
|
79
|
+
import { Streamgraph } from "./streamgraph/streamgraph.js";
|
|
80
|
+
import { SwipeActions, SwipeActionsRow } from "./swipe-actions/swipe-actions.js";
|
|
26
81
|
import { Switch, switchThumbVariants, switchTrackVariants } from "./switch/switch.js";
|
|
27
|
-
import { Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants } from "./table/table.js";
|
|
28
|
-
import {
|
|
82
|
+
import { Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableVariants } from "./table/table.js";
|
|
83
|
+
import { TextShimmer } from "./text-shimmer/text-shimmer.js";
|
|
84
|
+
import { TagInput } from "./tag-input/tag-input.js";
|
|
85
|
+
import { TextMorph } from "./text-morph/text-morph.js";
|
|
86
|
+
import { TextReveal } from "./text-reveal/text-reveal.js";
|
|
29
87
|
import { Textarea, textareaVariants } from "./textarea/textarea.js";
|
|
88
|
+
import { ThemeSwitch } from "./theme-switch/theme-switch.js";
|
|
89
|
+
import { TimePicker, timePickerItemVariants, timePickerListVariants } from "./time-picker/time-picker.js";
|
|
30
90
|
import { ToastRegion, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants } from "./toast/toast.js";
|
|
31
|
-
import {
|
|
32
|
-
|
|
91
|
+
import { Treemap } from "./treemap/treemap.js";
|
|
92
|
+
import { UsageMeter } from "./usage-meter/usage-meter.js";
|
|
93
|
+
import { WaffleChart } from "./waffle-chart/waffle-chart.js";
|
|
94
|
+
export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, ActionButton, ActivityHeatmap, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AnimatedCounter, AnnouncementBar, Avatar, Badge, BarChart, BellIcon, BreadcrumbItem, Breadcrumbs, BrushChart, Button, ButtonGroup, Calendar, CalendarRange, Card, CardContent, CardDescription, CardFooter, CardHeader, CardStack, CardTitle, Carousel, Checkbox, ChevronIcon, ChipGroup, ConfirmMorph, CopyButton, CopyCheckIcon, Countdown, DatePicker, DateRangePicker, Dialog, DialogFooter, DialogTrigger, DonutChart, EmptyState, ExpandingButtonGroup, FileDropZone, FilterBar, FloatingButtonGroup, Gauge, HeartIcon, IconMorph, InViewTitle, Input, LINE_CHART_DRAW_MS, Label, LineChart, MentionInput, Menu, MenuIcon, MenuItem, MenuSeparator, MenuTrigger, MoneyInput, MorphSelect, MultiSelect, NumberField, OnboardingChecklist, PHONE_COUNTRIES, PageHeader, PasswordField, PasswordStrength, PhoneInput, PlayPauseIcon, PlusCheckIcon, Popover, PopoverTrigger, Progress, Radio, RadioGroup, Reactions, Ridgeline, SPARKLINE_DRAW_MS, ScrollArea, ScrubInput, SearchField, Select, SelectItem, Separator, Sheet, ShortcutKbd, ShortcutKeys, ShortcutRecorder, SideNav, Skeleton, Slider, SlopeChart, Sparkline, Spinner, SplitBar, SplitButton, StatCard, Stepper, Streamgraph, SunMoonIcon, SwipeActions, SwipeActionsRow, Switch, Tab, TabList, TabPanel, Table, Tabs, TagInput, TextMorph, TextReveal, TextShimmer, Textarea, ThemeSwitch, TimePicker, ToastRegion, Tooltip, TooltipTrigger, Treemap, UsageMeter, WaffleChart, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxVariants, clearAnnouncementDismissal, cn, cnAll, countCodePoints, createColumns, createPasswordRules, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, defaultDateRangePresets, defaultPasswordFieldMessages, defaultPasswordRules, defaultPasswordStrengthMessages, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, emptyStateActionVariants, emptyStateTextVariants, emptyStateVariants, estimateStrength, evaluateScrubExpression, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants, filterBarChipVariants, filterBarRowVariants, filterBarVariants, formatNational, formatPhoneNumber, formatShortcut, inputVariants, labelVariants, matchesShortcut, mentionText, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, normalizeShortcut, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants, parsePhoneNumber, popoverVariants, progressFillVariants, progressTrackVariants, progressVariants, radioGroupVariants, radioVariants, scrollAreaRootVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, serializeMentions, sheetOverlayVariants, sheetPanelVariants, shortcutFromEvent, shortcutTokens, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, sparklineVariants, spinnerVariants, statCardHeaderVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableVariants, tabsVariants, textareaVariants, timePickerItemVariants, timePickerListVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, tooltipVariants, usePlatform, usePressedKeys };
|
package/dist/input/input.d.ts
CHANGED
|
@@ -73,6 +73,28 @@ interface InputProps$1 extends Omit<InputProps, "className" | "style" | "size">
|
|
|
73
73
|
startIcon?: ReactNode;
|
|
74
74
|
/** Decorative glyph at the trailing edge. Same rules as {@link InputProps.startIcon}. */
|
|
75
75
|
endIcon?: ReactNode;
|
|
76
|
+
/**
|
|
77
|
+
* A visible label above the field, tied to it with `htmlFor`. Passing any of
|
|
78
|
+
* `label`, `description` or `error` (even as `undefined`) wraps the field;
|
|
79
|
+
* with none of them the DOM is exactly the bare input. Do not also pass
|
|
80
|
+
* `aria-label`: it wins over the label, so the visible name is not the
|
|
81
|
+
* accessible one (WCAG 2.5.3). Ignored inside a React Aria `TextField`,
|
|
82
|
+
* which supplies its own label and messages.
|
|
83
|
+
*/
|
|
84
|
+
label?: ReactNode;
|
|
85
|
+
/**
|
|
86
|
+
* Helper text under the field, named by `aria-describedby`. It opens on a
|
|
87
|
+
* spring when it appears after mount, changed words rise in and numbers roll
|
|
88
|
+
* digit by digit; nothing animates on first render, and reduced motion swaps
|
|
89
|
+
* it instantly. A string, because the copy is animated word by word.
|
|
90
|
+
*/
|
|
91
|
+
description?: string;
|
|
92
|
+
/**
|
|
93
|
+
* Error text under the field. Sets `aria-invalid`, so the field takes its
|
|
94
|
+
* invalid border, and is announced as an alert when it appears. Opens and
|
|
95
|
+
* closes like `description`. An empty or `undefined` value closes the row.
|
|
96
|
+
*/
|
|
97
|
+
error?: string;
|
|
76
98
|
}
|
|
77
99
|
declare const Input$1: import("react").ForwardRefExoticComponent<InputProps$1 & import("react").RefAttributes<HTMLInputElement>>;
|
|
78
100
|
//#endregion
|