@exsto/ds 0.0.1-rc.2 → 0.0.1-rc.21
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 +163 -28
- package/dist/date-picker.js +2 -0
- package/dist/ds/src/date-picker.d.ts +9 -0
- package/dist/ds/src/file-input.d.ts +9 -0
- package/dist/ds/src/index.d.ts +2 -3
- package/dist/ds/src/rich-text-editor.d.ts +8 -0
- package/dist/ds/src/time-field.d.ts +9 -0
- package/dist/file-input.js +2 -0
- package/dist/index.js +79 -2
- package/dist/rich-text-editor.js +4 -0
- package/dist/source-hash.txt +1 -0
- package/dist/styles.css +1185 -403
- package/dist/theme.css +122 -7
- package/dist/time-field.js +2 -0
- package/dist/ui/src/components/edyn/animated-number/animated-number.d.ts +30 -0
- package/dist/ui/src/components/edyn/animated-number/animated-number.js +108 -0
- package/dist/ui/src/components/edyn/animated-number/animated-number.js.map +1 -0
- package/dist/ui/src/components/edyn/animated-number/animated-number.test.d.ts +9 -0
- package/dist/ui/src/components/edyn/animated-number/index.d.ts +1 -0
- package/dist/ui/src/components/edyn/audio-player/audio-player.d.ts +3 -2
- package/dist/ui/src/components/edyn/audio-player/audio-player.js +86 -0
- package/dist/ui/src/components/edyn/audio-player/audio-player.js.map +1 -0
- package/dist/ui/src/components/edyn/date-picker/date-picker.d.ts +86 -0
- package/dist/ui/src/components/edyn/date-picker/date-picker.js +302 -0
- package/dist/ui/src/components/edyn/date-picker/date-picker.js.map +1 -0
- package/dist/ui/src/components/edyn/date-picker/date-picker.state.test.d.ts +9 -0
- package/dist/ui/src/components/edyn/date-picker/date-text.d.ts +40 -0
- package/dist/ui/src/components/edyn/date-picker/date-text.js +105 -0
- package/dist/ui/src/components/edyn/date-picker/date-text.js.map +1 -0
- package/dist/ui/src/components/edyn/date-picker/index.d.ts +2 -0
- package/dist/ui/src/components/edyn/date-range-picker/date-range-picker.d.ts +28 -0
- package/dist/ui/src/components/edyn/date-range-picker/date-range-picker.js +70 -0
- package/dist/ui/src/components/edyn/date-range-picker/date-range-picker.js.map +1 -0
- package/dist/ui/src/components/edyn/date-range-picker/date-range-picker.test.d.ts +9 -0
- package/dist/ui/src/components/edyn/date-range-picker/index.d.ts +1 -0
- package/dist/ui/src/components/edyn/file-input/file-input.d.ts +90 -0
- package/dist/ui/src/components/edyn/file-input/file-input.js +261 -0
- package/dist/ui/src/components/edyn/file-input/file-input.js.map +1 -0
- package/dist/ui/src/components/edyn/file-input/file-input.test.d.ts +8 -0
- package/dist/ui/src/components/edyn/file-input/index.d.ts +1 -0
- package/dist/ui/src/components/edyn/initials-avatar/index.d.ts +1 -0
- package/dist/ui/src/components/edyn/initials-avatar/initials-avatar.d.ts +54 -0
- package/dist/ui/src/components/edyn/initials-avatar/initials-avatar.js +86 -0
- package/dist/ui/src/components/edyn/initials-avatar/initials-avatar.js.map +1 -0
- package/dist/ui/src/components/edyn/initials-avatar/initials-avatar.test.d.ts +10 -0
- package/dist/ui/src/components/edyn/multi-select/index.d.ts +1 -0
- package/dist/ui/src/components/edyn/multi-select/multi-select.d.ts +117 -0
- package/dist/ui/src/components/edyn/multi-select/multi-select.js +342 -0
- package/dist/ui/src/components/edyn/multi-select/multi-select.js.map +1 -0
- package/dist/ui/src/components/edyn/multi-select/multi-select.test.d.ts +9 -0
- package/dist/ui/src/components/edyn/presence/index.d.ts +1 -0
- package/dist/ui/src/components/edyn/presence/presence.d.ts +15 -0
- package/dist/ui/src/components/edyn/presence/presence.js +58 -0
- package/dist/ui/src/components/edyn/presence/presence.js.map +1 -0
- package/dist/ui/src/components/edyn/presence/presence.test.d.ts +8 -0
- package/dist/ui/src/components/edyn/progress-line/index.d.ts +1 -0
- package/dist/ui/src/components/edyn/progress-line/progress-line.d.ts +23 -0
- package/dist/ui/src/components/edyn/progress-line/progress-line.js +100 -0
- package/dist/ui/src/components/edyn/progress-line/progress-line.js.map +1 -0
- package/dist/ui/src/components/edyn/progress-line/progress-line.test.d.ts +9 -0
- package/dist/ui/src/components/edyn/rich-text-content/allow-list.d.ts +11 -0
- package/dist/ui/src/components/edyn/rich-text-content/allow-list.js +37 -0
- package/dist/ui/src/components/edyn/rich-text-content/allow-list.js.map +1 -0
- package/dist/ui/src/components/edyn/rich-text-content/index.d.ts +2 -0
- package/dist/ui/src/components/edyn/rich-text-content/rich-text-content.d.ts +22 -0
- package/dist/ui/src/components/edyn/rich-text-content/rich-text-content.js +124 -0
- package/dist/ui/src/components/edyn/rich-text-content/rich-text-content.js.map +1 -0
- package/dist/ui/src/components/edyn/rich-text-content/rich-text-content.test.d.ts +8 -0
- package/dist/ui/src/components/edyn/rich-text-editor/extensions.d.ts +18 -0
- package/dist/ui/src/components/edyn/rich-text-editor/extensions.js +124 -0
- package/dist/ui/src/components/edyn/rich-text-editor/extensions.js.map +1 -0
- package/dist/ui/src/components/edyn/rich-text-editor/index.d.ts +3 -0
- package/dist/ui/src/components/edyn/rich-text-editor/mention-list.d.ts +17 -0
- package/dist/ui/src/components/edyn/rich-text-editor/mention-list.js +232 -0
- package/dist/ui/src/components/edyn/rich-text-editor/mention-list.js.map +1 -0
- package/dist/ui/src/components/edyn/rich-text-editor/rich-text-editor.d.ts +53 -0
- package/dist/ui/src/components/edyn/rich-text-editor/rich-text-editor.js +244 -0
- package/dist/ui/src/components/edyn/rich-text-editor/rich-text-editor.js.map +1 -0
- package/dist/ui/src/components/edyn/rich-text-editor/rich-text-editor.test.d.ts +6 -0
- package/dist/ui/src/components/edyn/rich-text-editor/serialize.d.ts +13 -0
- package/dist/ui/src/components/edyn/rich-text-editor/serialize.js +55 -0
- package/dist/ui/src/components/edyn/rich-text-editor/serialize.js.map +1 -0
- package/dist/ui/src/components/edyn/rich-text-editor/sync.d.ts +19 -0
- package/dist/ui/src/components/edyn/rich-text-editor/sync.js +34 -0
- package/dist/ui/src/components/edyn/rich-text-editor/sync.js.map +1 -0
- package/dist/ui/src/components/edyn/rich-text-editor/sync.test.d.ts +11 -0
- package/dist/ui/src/components/edyn/rich-text-editor/toolbar.d.ts +20 -0
- package/dist/ui/src/components/edyn/rich-text-editor/toolbar.js +235 -0
- package/dist/ui/src/components/edyn/rich-text-editor/toolbar.js.map +1 -0
- package/dist/ui/src/components/edyn/rich-text-editor/types.d.ts +68 -0
- package/dist/ui/src/components/edyn/rich-text-editor/types.js +26 -0
- package/dist/ui/src/components/edyn/rich-text-editor/types.js.map +1 -0
- package/dist/ui/src/components/edyn/time-field/index.d.ts +1 -0
- package/dist/ui/src/components/edyn/time-field/time-field.d.ts +85 -0
- package/dist/ui/src/components/edyn/time-field/time-field.js +337 -0
- package/dist/ui/src/components/edyn/time-field/time-field.js.map +1 -0
- package/dist/ui/src/components/edyn/time-field/time-field.test.d.ts +8 -0
- package/dist/ui/src/components/edyn/video-player/video-player.d.ts +2 -2
- package/dist/ui/src/components/edyn/video-player/video-player.js +132 -0
- package/dist/ui/src/components/edyn/video-player/video-player.js.map +1 -0
- package/dist/ui/src/components/forwarded-props.test.d.ts +8 -0
- package/dist/ui/src/components/ui/accordion/accordion.d.ts +9 -8
- package/dist/ui/src/components/ui/accordion/accordion.js +83 -0
- package/dist/ui/src/components/ui/accordion/accordion.js.map +1 -0
- package/dist/ui/src/components/ui/alert/alert.js +47 -0
- package/dist/ui/src/components/ui/alert/alert.js.map +1 -0
- package/dist/ui/src/components/ui/alert-dialog/alert-dialog.js +97 -0
- package/dist/ui/src/components/ui/alert-dialog/alert-dialog.js.map +1 -0
- package/dist/ui/src/components/ui/aspect-ratio/aspect-ratio.js +15 -0
- package/dist/ui/src/components/ui/aspect-ratio/aspect-ratio.js.map +1 -0
- package/dist/ui/src/components/ui/attachment/attachment.d.ts +1 -1
- package/dist/ui/src/components/ui/attachment/attachment.js +105 -0
- package/dist/ui/src/components/ui/attachment/attachment.js.map +1 -0
- package/dist/ui/src/components/ui/avatar/avatar.js +51 -0
- package/dist/ui/src/components/ui/avatar/avatar.js.map +1 -0
- package/dist/ui/src/components/ui/badge/badge.d.ts +1 -1
- package/dist/ui/src/components/ui/badge/badge.js +47 -0
- package/dist/ui/src/components/ui/badge/badge.js.map +1 -0
- package/dist/ui/src/components/ui/breadcrumb/breadcrumb.js +73 -0
- package/dist/ui/src/components/ui/breadcrumb/breadcrumb.js.map +1 -0
- package/dist/ui/src/components/ui/bubble/bubble.js +74 -0
- package/dist/ui/src/components/ui/bubble/bubble.js.map +1 -0
- package/dist/ui/src/components/ui/button/button.behavior.test.d.ts +8 -0
- package/dist/ui/src/components/ui/button/button.d.ts +1 -1
- package/dist/ui/src/components/ui/button/button.js +93 -0
- package/dist/ui/src/components/ui/button/button.js.map +1 -0
- package/dist/ui/src/components/ui/button-group/button-group.js +37 -0
- package/dist/ui/src/components/ui/button-group/button-group.js.map +1 -0
- package/dist/ui/src/components/ui/calendar/calendar.behavior.test.d.ts +9 -0
- package/dist/ui/src/components/ui/calendar/calendar.d.ts +1 -1
- package/dist/ui/src/components/ui/calendar/calendar.js +141 -0
- package/dist/ui/src/components/ui/calendar/calendar.js.map +1 -0
- package/dist/ui/src/components/ui/card/card.js +57 -0
- package/dist/ui/src/components/ui/card/card.js.map +1 -0
- package/dist/ui/src/components/ui/carousel/carousel.js +136 -0
- package/dist/ui/src/components/ui/carousel/carousel.js.map +1 -0
- package/dist/ui/src/components/ui/chart/chart.js +168 -0
- package/dist/ui/src/components/ui/chart/chart.js.map +1 -0
- package/dist/ui/src/components/ui/checkbox/checkbox.js +21 -0
- package/dist/ui/src/components/ui/checkbox/checkbox.js.map +1 -0
- package/dist/ui/src/components/ui/collapsible/collapsible.js +26 -0
- package/dist/ui/src/components/ui/collapsible/collapsible.js.map +1 -0
- package/dist/ui/src/components/ui/combobox/combobox.d.ts +15 -1
- package/dist/ui/src/components/ui/combobox/combobox.js +111 -0
- package/dist/ui/src/components/ui/combobox/combobox.js.map +1 -0
- package/dist/ui/src/components/ui/command/command.d.ts +17 -1
- package/dist/ui/src/components/ui/command/command.js +118 -0
- package/dist/ui/src/components/ui/command/command.js.map +1 -0
- package/dist/ui/src/components/ui/context-menu/context-menu.d.ts +1 -1
- package/dist/ui/src/components/ui/context-menu/context-menu.js +145 -0
- package/dist/ui/src/components/ui/context-menu/context-menu.js.map +1 -0
- package/dist/ui/src/components/ui/dialog/dialog.js +94 -0
- package/dist/ui/src/components/ui/dialog/dialog.js.map +1 -0
- package/dist/ui/src/components/ui/direction/direction.js +2 -0
- package/dist/ui/src/components/ui/drawer/drawer.js +88 -0
- package/dist/ui/src/components/ui/drawer/drawer.js.map +1 -0
- package/dist/ui/src/components/ui/dropdown-menu/dropdown-menu.d.ts +12 -1
- package/dist/ui/src/components/ui/dropdown-menu/dropdown-menu.js +159 -0
- package/dist/ui/src/components/ui/dropdown-menu/dropdown-menu.js.map +1 -0
- package/dist/ui/src/components/ui/empty/empty.js +61 -0
- package/dist/ui/src/components/ui/empty/empty.js.map +1 -0
- package/dist/ui/src/components/ui/field/field.js +36 -0
- package/dist/ui/src/components/ui/field/field.js.map +1 -0
- package/dist/ui/src/components/ui/hover-card/hover-card.js +39 -0
- package/dist/ui/src/components/ui/hover-card/hover-card.js.map +1 -0
- package/dist/ui/src/components/ui/indicator/indicator.js +79 -0
- package/dist/ui/src/components/ui/indicator/indicator.js.map +1 -0
- package/dist/ui/src/components/ui/input/input.js +16 -0
- package/dist/ui/src/components/ui/input/input.js.map +1 -0
- package/dist/ui/src/components/ui/input-group/input-group.d.ts +1 -1
- package/dist/ui/src/components/ui/input-group/input-group.js +77 -0
- package/dist/ui/src/components/ui/input-group/input-group.js.map +1 -0
- package/dist/ui/src/components/ui/input-otp/input-otp.js +48 -0
- package/dist/ui/src/components/ui/input-otp/input-otp.js.map +1 -0
- package/dist/ui/src/components/ui/item/item.d.ts +1 -1
- package/dist/ui/src/components/ui/item/item.js +122 -0
- package/dist/ui/src/components/ui/item/item.js.map +1 -0
- package/dist/ui/src/components/ui/kbd/kbd.js +21 -0
- package/dist/ui/src/components/ui/kbd/kbd.js.map +1 -0
- package/dist/ui/src/components/ui/label/label.js +14 -0
- package/dist/ui/src/components/ui/label/label.js.map +1 -0
- package/dist/ui/src/components/ui/marker/marker.js +44 -0
- package/dist/ui/src/components/ui/marker/marker.js.map +1 -0
- package/dist/ui/src/components/ui/menubar/menubar.js +140 -0
- package/dist/ui/src/components/ui/menubar/menubar.js.map +1 -0
- package/dist/ui/src/components/ui/message/message.js +50 -0
- package/dist/ui/src/components/ui/message/message.js.map +1 -0
- package/dist/ui/src/components/ui/message-scroller/message-scroller.js +61 -0
- package/dist/ui/src/components/ui/message-scroller/message-scroller.js.map +1 -0
- package/dist/ui/src/components/ui/native-select/native-select.js +39 -0
- package/dist/ui/src/components/ui/native-select/native-select.js.map +1 -0
- package/dist/ui/src/components/ui/navigation-menu/navigation-menu.js +87 -0
- package/dist/ui/src/components/ui/navigation-menu/navigation-menu.js.map +1 -0
- package/dist/ui/src/components/ui/pagination/pagination.d.ts +3 -2
- package/dist/ui/src/components/ui/pagination/pagination.js +104 -0
- package/dist/ui/src/components/ui/pagination/pagination.js.map +1 -0
- package/dist/ui/src/components/ui/popover/popover.d.ts +1 -1
- package/dist/ui/src/components/ui/popover/popover.js +59 -0
- package/dist/ui/src/components/ui/popover/popover.js.map +1 -0
- package/dist/ui/src/components/ui/progress/progress.behavior.test.d.ts +8 -0
- package/dist/ui/src/components/ui/progress/progress.d.ts +43 -1
- package/dist/ui/src/components/ui/progress/progress.js +70 -0
- package/dist/ui/src/components/ui/progress/progress.js.map +1 -0
- package/dist/ui/src/components/ui/questionnaire/questionnaire.js +171 -0
- package/dist/ui/src/components/ui/questionnaire/questionnaire.js.map +1 -0
- package/dist/ui/src/components/ui/radio-group/radio-group.js +29 -0
- package/dist/ui/src/components/ui/radio-group/radio-group.js.map +1 -0
- package/dist/ui/src/components/ui/resizable/resizable.js +29 -0
- package/dist/ui/src/components/ui/resizable/resizable.js.map +1 -0
- package/dist/ui/src/components/ui/scroll-area/index.d.ts +1 -0
- package/dist/ui/src/components/ui/scroll-area/popup-list-scroll.d.ts +13 -0
- package/dist/ui/src/components/ui/scroll-area/popup-list-scroll.js +69 -0
- package/dist/ui/src/components/ui/scroll-area/popup-list-scroll.js.map +1 -0
- package/dist/ui/src/components/ui/scroll-area/scroll-area.behavior.test.d.ts +12 -0
- package/dist/ui/src/components/ui/scroll-area/scroll-area.d.ts +57 -6
- package/dist/ui/src/components/ui/scroll-area/scroll-area.js +155 -0
- package/dist/ui/src/components/ui/scroll-area/scroll-area.js.map +1 -0
- package/dist/ui/src/components/ui/select/select.js +97 -0
- package/dist/ui/src/components/ui/select/select.js.map +1 -0
- package/dist/ui/src/components/ui/separator/separator.behavior.test.d.ts +14 -0
- package/dist/ui/src/components/ui/separator/separator.d.ts +14 -0
- package/dist/ui/src/components/ui/separator/separator.js +30 -0
- package/dist/ui/src/components/ui/separator/separator.js.map +1 -0
- package/dist/ui/src/components/ui/sheet/sheet.d.ts +8 -0
- package/dist/ui/src/components/ui/sheet/sheet.js +99 -0
- package/dist/ui/src/components/ui/sheet/sheet.js.map +1 -0
- package/dist/ui/src/components/ui/sidebar/sidebar.js +383 -0
- package/dist/ui/src/components/ui/sidebar/sidebar.js.map +1 -0
- package/dist/ui/src/components/ui/skeleton/skeleton.js +14 -0
- package/dist/ui/src/components/ui/skeleton/skeleton.js.map +1 -0
- package/dist/ui/src/components/ui/slider/slider.js +49 -0
- package/dist/ui/src/components/ui/slider/slider.js.map +1 -0
- package/dist/ui/src/components/ui/spinner/spinner.js +28 -0
- package/dist/ui/src/components/ui/spinner/spinner.js.map +1 -0
- package/dist/ui/src/components/ui/switch/switch.js +20 -0
- package/dist/ui/src/components/ui/switch/switch.js.map +1 -0
- package/dist/ui/src/components/ui/table/table.behavior.test.d.ts +4 -5
- package/dist/ui/src/components/ui/table/table.d.ts +15 -1
- package/dist/ui/src/components/ui/table/table.js +81 -0
- package/dist/ui/src/components/ui/table/table.js.map +1 -0
- package/dist/ui/src/components/ui/tabs/tabs.d.ts +9 -8
- package/dist/ui/src/components/ui/tabs/tabs.js +50 -0
- package/dist/ui/src/components/ui/tabs/tabs.js.map +1 -0
- package/dist/ui/src/components/ui/textarea/textarea.js +14 -0
- package/dist/ui/src/components/ui/textarea/textarea.js.map +1 -0
- package/dist/ui/src/components/ui/toast/toast.js +124 -0
- package/dist/ui/src/components/ui/toast/toast.js.map +1 -0
- package/dist/ui/src/components/ui/toggle/toggle.js +37 -0
- package/dist/ui/src/components/ui/toggle/toggle.js.map +1 -0
- package/dist/ui/src/components/ui/toggle-group/toggle-group.js +56 -0
- package/dist/ui/src/components/ui/toggle-group/toggle-group.js.map +1 -0
- package/dist/ui/src/components/ui/tooltip/tooltip.js +43 -0
- package/dist/ui/src/components/ui/tooltip/tooltip.js.map +1 -0
- package/dist/ui/src/hooks/use-media-player.js +140 -0
- package/dist/ui/src/hooks/use-media-player.js.map +1 -0
- package/dist/ui/src/hooks/use-merged-refs.js +18 -0
- package/dist/ui/src/hooks/use-merged-refs.js.map +1 -0
- package/dist/ui/src/hooks/use-mobile.js +20 -0
- package/dist/ui/src/hooks/use-mobile.js.map +1 -0
- package/dist/ui/src/index.d.ts +8 -0
- package/dist/ui/src/lib/first-weekday.d.ts +6 -0
- package/dist/ui/src/lib/first-weekday.js +34 -0
- package/dist/ui/src/lib/first-weekday.js.map +1 -0
- package/dist/ui/src/lib/focus-guards.d.ts +2 -0
- package/dist/ui/src/lib/focus-guards.js +52 -0
- package/dist/ui/src/lib/focus-guards.js.map +1 -0
- package/dist/ui/src/lib/focus-ring.test.d.ts +8 -0
- package/dist/ui/src/lib/popup-list.d.ts +75 -0
- package/dist/ui/src/lib/popup-list.js +48 -0
- package/dist/ui/src/lib/popup-list.js.map +1 -0
- package/dist/ui/src/lib/popup-list.test.d.ts +10 -0
- package/dist/ui/src/lib/utils.js +21 -0
- package/dist/ui/src/lib/utils.js.map +1 -0
- package/package.json +36 -8
- package/dist/chunks/toggle-group-ByNq8g7H.js +0 -4263
- package/dist/chunks/toggle-group-ByNq8g7H.js.map +0 -1
- package/dist/dom/src/context.d.ts +0 -34
- package/dist/dom/src/define-element.d.ts +0 -11
- package/dist/dom/src/field-control.d.ts +0 -5
- package/dist/dom/src/index.d.ts +0 -6
- package/dist/dom/src/mode.d.ts +0 -8
- package/dist/dom/src/styles.d.ts +0 -6
- package/dist/dom/src/theme-state.d.ts +0 -1
- package/dist/dom/src/types.d.ts +0 -65
- package/dist/ds/src/elements.d.ts +0 -12
- package/dist/elements/src/edx-accordion.d.ts +0 -14
- package/dist/elements/src/edx-accordion.test.d.ts +0 -1
- package/dist/elements/src/edx-alert.d.ts +0 -14
- package/dist/elements/src/edx-audio-player.d.ts +0 -11
- package/dist/elements/src/edx-avatar.d.ts +0 -10
- package/dist/elements/src/edx-badge.d.ts +0 -12
- package/dist/elements/src/edx-breadcrumb.d.ts +0 -11
- package/dist/elements/src/edx-button-group.d.ts +0 -7
- package/dist/elements/src/edx-button.d.ts +0 -20
- package/dist/elements/src/edx-calendar.d.ts +0 -21
- package/dist/elements/src/edx-card.d.ts +0 -8
- package/dist/elements/src/edx-checkbox.d.ts +0 -18
- package/dist/elements/src/edx-combobox.d.ts +0 -28
- package/dist/elements/src/edx-content-components.d.ts +0 -2
- package/dist/elements/src/edx-dialog.d.ts +0 -20
- package/dist/elements/src/edx-drawer.d.ts +0 -21
- package/dist/elements/src/edx-dropdown-menu.d.ts +0 -29
- package/dist/elements/src/edx-field.d.ts +0 -9
- package/dist/elements/src/edx-field.test.d.ts +0 -1
- package/dist/elements/src/edx-indicator.d.ts +0 -14
- package/dist/elements/src/edx-input-group.d.ts +0 -32
- package/dist/elements/src/edx-input-otp.d.ts +0 -19
- package/dist/elements/src/edx-input.d.ts +0 -31
- package/dist/elements/src/edx-interactive-components.d.ts +0 -2
- package/dist/elements/src/edx-label.d.ts +0 -6
- package/dist/elements/src/edx-pagination.d.ts +0 -8
- package/dist/elements/src/edx-popover.d.ts +0 -24
- package/dist/elements/src/edx-progress.d.ts +0 -10
- package/dist/elements/src/edx-radio-group.d.ts +0 -22
- package/dist/elements/src/edx-radio-group.test.d.ts +0 -1
- package/dist/elements/src/edx-scroll-area.d.ts +0 -15
- package/dist/elements/src/edx-scroll-area.test.d.ts +0 -1
- package/dist/elements/src/edx-select.d.ts +0 -34
- package/dist/elements/src/edx-separator.d.ts +0 -10
- package/dist/elements/src/edx-skeleton.d.ts +0 -8
- package/dist/elements/src/edx-slider.d.ts +0 -17
- package/dist/elements/src/edx-slider.test.d.ts +0 -1
- package/dist/elements/src/edx-switch.d.ts +0 -18
- package/dist/elements/src/edx-table.d.ts +0 -13
- package/dist/elements/src/edx-table.test.d.ts +0 -1
- package/dist/elements/src/edx-tabs.d.ts +0 -15
- package/dist/elements/src/edx-tabs.test.d.ts +0 -1
- package/dist/elements/src/edx-textarea.d.ts +0 -25
- package/dist/elements/src/edx-toggle-group.d.ts +0 -27
- package/dist/elements/src/edx-toggle-group.test.d.ts +0 -1
- package/dist/elements/src/edx-toggle.d.ts +0 -18
- package/dist/elements/src/edx-tooltip.d.ts +0 -28
- package/dist/elements/src/edx-video-player.d.ts +0 -16
- package/dist/elements/src/field-control-bridge.d.ts +0 -7
- package/dist/elements/src/index.d.ts +0 -14
- package/dist/elements/src/projected-content.test.d.ts +0 -1
- package/dist/elements/src/registry.d.ts +0 -39
- package/dist/elements/src/registry.test.d.ts +0 -1
- package/dist/elements.js +0 -4020
- package/dist/elements.js.map +0 -1
- /package/dist/{dom/src/define-element.test.d.ts → ui/src/components/edyn/date-picker/date-text.test.d.ts} +0 -0
- /package/dist/{dom/src/native-slot.test.d.ts → ui/src/lib/first-weekday.test.d.ts} +0 -0
|
@@ -0,0 +1,383 @@
|
|
|
1
|
+
import { cn } from "../../../lib/utils.js";
|
|
2
|
+
import { Button } from "../button/button.js";
|
|
3
|
+
import { useIsMobile } from "../../../hooks/use-mobile.js";
|
|
4
|
+
import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
|
|
5
|
+
import { Input } from "../input/input.js";
|
|
6
|
+
import { Separator } from "../separator/separator.js";
|
|
7
|
+
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "../sheet/sheet.js";
|
|
8
|
+
import { Skeleton } from "../skeleton/skeleton.js";
|
|
9
|
+
import * as React from "react";
|
|
10
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
import { cva } from "class-variance-authority";
|
|
12
|
+
import { IconLayoutSidebar } from "@tabler/icons-react";
|
|
13
|
+
import { mergeProps } from "@base-ui/react/merge-props";
|
|
14
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
15
|
+
//#region ../ui/src/components/ui/sidebar/sidebar.tsx
|
|
16
|
+
var SIDEBAR_COOKIE_NAME = "sidebar_state";
|
|
17
|
+
var SIDEBAR_COOKIE_MAX_AGE = 604800;
|
|
18
|
+
var SIDEBAR_WIDTH = "16rem";
|
|
19
|
+
var SIDEBAR_WIDTH_MOBILE = "18rem";
|
|
20
|
+
var SIDEBAR_WIDTH_ICON = "3rem";
|
|
21
|
+
var SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
|
22
|
+
var SidebarContext = React.createContext(null);
|
|
23
|
+
var useSidebar = () => {
|
|
24
|
+
const context = React.useContext(SidebarContext);
|
|
25
|
+
if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
|
|
26
|
+
return context;
|
|
27
|
+
};
|
|
28
|
+
var SidebarProvider = ({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) => {
|
|
29
|
+
const isMobile = useIsMobile();
|
|
30
|
+
const [openMobile, setOpenMobile] = React.useState(false);
|
|
31
|
+
const [_open, _setOpen] = React.useState(defaultOpen);
|
|
32
|
+
const open = openProp ?? _open;
|
|
33
|
+
const setOpen = React.useCallback((value) => {
|
|
34
|
+
const openState = typeof value === "function" ? value(open) : value;
|
|
35
|
+
if (setOpenProp) setOpenProp(openState);
|
|
36
|
+
else _setOpen(openState);
|
|
37
|
+
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
|
|
38
|
+
}, [setOpenProp, open]);
|
|
39
|
+
const toggleSidebar = React.useCallback(() => {
|
|
40
|
+
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
|
|
41
|
+
}, [isMobile, setOpen]);
|
|
42
|
+
React.useEffect(() => {
|
|
43
|
+
const handleKeyDown = (event) => {
|
|
44
|
+
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
|
|
45
|
+
event.preventDefault();
|
|
46
|
+
toggleSidebar();
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
window.addEventListener("keydown", handleKeyDown);
|
|
50
|
+
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
51
|
+
}, [toggleSidebar]);
|
|
52
|
+
const state = open ? "expanded" : "collapsed";
|
|
53
|
+
const contextValue = React.useMemo(() => ({
|
|
54
|
+
state,
|
|
55
|
+
open,
|
|
56
|
+
setOpen,
|
|
57
|
+
isMobile,
|
|
58
|
+
openMobile,
|
|
59
|
+
setOpenMobile,
|
|
60
|
+
toggleSidebar
|
|
61
|
+
}), [
|
|
62
|
+
state,
|
|
63
|
+
open,
|
|
64
|
+
setOpen,
|
|
65
|
+
isMobile,
|
|
66
|
+
openMobile,
|
|
67
|
+
toggleSidebar
|
|
68
|
+
]);
|
|
69
|
+
return /* @__PURE__ */ jsx(SidebarContext.Provider, {
|
|
70
|
+
value: contextValue,
|
|
71
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
72
|
+
"data-slot": "sidebar-wrapper",
|
|
73
|
+
style: {
|
|
74
|
+
"--sidebar-width": SIDEBAR_WIDTH,
|
|
75
|
+
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
|
76
|
+
...style
|
|
77
|
+
},
|
|
78
|
+
className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className),
|
|
79
|
+
...props,
|
|
80
|
+
children
|
|
81
|
+
})
|
|
82
|
+
});
|
|
83
|
+
};
|
|
84
|
+
var Sidebar = ({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, dir, ...props }) => {
|
|
85
|
+
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
|
86
|
+
if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
|
|
87
|
+
"data-slot": "sidebar",
|
|
88
|
+
className: cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className),
|
|
89
|
+
...props,
|
|
90
|
+
children
|
|
91
|
+
});
|
|
92
|
+
if (isMobile) return /* @__PURE__ */ jsx(Sheet, {
|
|
93
|
+
open: openMobile,
|
|
94
|
+
onOpenChange: setOpenMobile,
|
|
95
|
+
...props,
|
|
96
|
+
children: /* @__PURE__ */ jsxs(SheetContent, {
|
|
97
|
+
dir,
|
|
98
|
+
"data-sidebar": "sidebar",
|
|
99
|
+
"data-slot": "sidebar",
|
|
100
|
+
"data-mobile": "true",
|
|
101
|
+
className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
|
|
102
|
+
style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
|
|
103
|
+
side,
|
|
104
|
+
children: [/* @__PURE__ */ jsxs(SheetHeader, {
|
|
105
|
+
className: "sr-only",
|
|
106
|
+
children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })]
|
|
107
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
108
|
+
className: "flex h-full w-full flex-col",
|
|
109
|
+
children
|
|
110
|
+
})]
|
|
111
|
+
})
|
|
112
|
+
});
|
|
113
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
114
|
+
className: "group peer hidden text-sidebar-foreground md:block",
|
|
115
|
+
"data-state": state,
|
|
116
|
+
"data-collapsible": state === "collapsed" ? collapsible : "",
|
|
117
|
+
"data-variant": variant,
|
|
118
|
+
"data-side": side,
|
|
119
|
+
"data-slot": "sidebar",
|
|
120
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
121
|
+
"data-slot": "sidebar-gap",
|
|
122
|
+
className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 motion-reduce:transition-none ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)")
|
|
123
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
124
|
+
"data-slot": "sidebar-container",
|
|
125
|
+
"data-side": side,
|
|
126
|
+
className: cn("fixed inset-y-0 top-(--sidebar-top) z-10 hidden h-[calc(100svh-var(--sidebar-top))] w-(--sidebar-width) transition-[left,right,width] duration-200 motion-reduce:transition-none ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className),
|
|
127
|
+
...props,
|
|
128
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
129
|
+
"data-sidebar": "sidebar",
|
|
130
|
+
"data-slot": "sidebar-inner",
|
|
131
|
+
className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border",
|
|
132
|
+
children
|
|
133
|
+
})
|
|
134
|
+
})]
|
|
135
|
+
});
|
|
136
|
+
};
|
|
137
|
+
var SidebarTrigger = ({ className, onClick, ...props }) => {
|
|
138
|
+
const { toggleSidebar } = useSidebar();
|
|
139
|
+
return /* @__PURE__ */ jsxs(Button, {
|
|
140
|
+
"data-sidebar": "trigger",
|
|
141
|
+
"data-slot": "sidebar-trigger",
|
|
142
|
+
variant: "ghost",
|
|
143
|
+
size: "icon-sm",
|
|
144
|
+
className: cn(className),
|
|
145
|
+
onClick: (event) => {
|
|
146
|
+
onClick?.(event);
|
|
147
|
+
toggleSidebar();
|
|
148
|
+
},
|
|
149
|
+
...props,
|
|
150
|
+
children: [/* @__PURE__ */ jsx(IconLayoutSidebar, {}), /* @__PURE__ */ jsx("span", {
|
|
151
|
+
className: "sr-only",
|
|
152
|
+
children: "Toggle Sidebar"
|
|
153
|
+
})]
|
|
154
|
+
});
|
|
155
|
+
};
|
|
156
|
+
var SidebarRail = ({ className, ...props }) => {
|
|
157
|
+
const { toggleSidebar } = useSidebar();
|
|
158
|
+
return /* @__PURE__ */ jsx("button", {
|
|
159
|
+
"data-sidebar": "rail",
|
|
160
|
+
"data-slot": "sidebar-rail",
|
|
161
|
+
"aria-label": "Toggle Sidebar",
|
|
162
|
+
tabIndex: -1,
|
|
163
|
+
onClick: toggleSidebar,
|
|
164
|
+
title: "Toggle Sidebar",
|
|
165
|
+
className: cn("absolute inset-y-0 z-20 hidden w-4 transition-all motion-reduce:transition-none ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
|
|
166
|
+
...props
|
|
167
|
+
});
|
|
168
|
+
};
|
|
169
|
+
var SidebarInset = ({ className, ...props }) => {
|
|
170
|
+
return /* @__PURE__ */ jsx("main", {
|
|
171
|
+
"data-slot": "sidebar-inset",
|
|
172
|
+
className: cn("relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className),
|
|
173
|
+
...props
|
|
174
|
+
});
|
|
175
|
+
};
|
|
176
|
+
var SidebarInput = ({ className, ...props }) => {
|
|
177
|
+
return /* @__PURE__ */ jsx(Input, {
|
|
178
|
+
"data-slot": "sidebar-input",
|
|
179
|
+
"data-sidebar": "input",
|
|
180
|
+
className: cn("h-8 w-full bg-background shadow-none", className),
|
|
181
|
+
...props
|
|
182
|
+
});
|
|
183
|
+
};
|
|
184
|
+
var SidebarHeader = ({ className, ...props }) => {
|
|
185
|
+
return /* @__PURE__ */ jsx("div", {
|
|
186
|
+
"data-slot": "sidebar-header",
|
|
187
|
+
"data-sidebar": "header",
|
|
188
|
+
className: cn("flex flex-col gap-2 p-2", className),
|
|
189
|
+
...props
|
|
190
|
+
});
|
|
191
|
+
};
|
|
192
|
+
var SidebarFooter = ({ className, ...props }) => {
|
|
193
|
+
return /* @__PURE__ */ jsx("div", {
|
|
194
|
+
"data-slot": "sidebar-footer",
|
|
195
|
+
"data-sidebar": "footer",
|
|
196
|
+
className: cn("flex flex-col gap-2 p-2", className),
|
|
197
|
+
...props
|
|
198
|
+
});
|
|
199
|
+
};
|
|
200
|
+
var SidebarSeparator = ({ className, ...props }) => {
|
|
201
|
+
return /* @__PURE__ */ jsx(Separator, {
|
|
202
|
+
"data-slot": "sidebar-separator",
|
|
203
|
+
"data-sidebar": "separator",
|
|
204
|
+
className: cn("mx-2 w-auto bg-sidebar-border", className),
|
|
205
|
+
...props
|
|
206
|
+
});
|
|
207
|
+
};
|
|
208
|
+
var SidebarContent = ({ className, ...props }) => {
|
|
209
|
+
return /* @__PURE__ */ jsx("div", {
|
|
210
|
+
"data-slot": "sidebar-content",
|
|
211
|
+
"data-sidebar": "content",
|
|
212
|
+
"data-focus": "inset",
|
|
213
|
+
className: cn("no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className),
|
|
214
|
+
...props
|
|
215
|
+
});
|
|
216
|
+
};
|
|
217
|
+
var SidebarGroup = ({ className, ...props }) => {
|
|
218
|
+
return /* @__PURE__ */ jsx("div", {
|
|
219
|
+
"data-slot": "sidebar-group",
|
|
220
|
+
"data-sidebar": "group",
|
|
221
|
+
className: cn("relative flex w-full min-w-0 flex-col p-2", className),
|
|
222
|
+
...props
|
|
223
|
+
});
|
|
224
|
+
};
|
|
225
|
+
var SidebarGroupLabel = ({ className, render, ...props }) => {
|
|
226
|
+
return useRender({
|
|
227
|
+
defaultTagName: "div",
|
|
228
|
+
props: mergeProps({ className: cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 motion-reduce:transition-none ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", className) }, props),
|
|
229
|
+
render,
|
|
230
|
+
state: {
|
|
231
|
+
slot: "sidebar-group-label",
|
|
232
|
+
sidebar: "group-label"
|
|
233
|
+
}
|
|
234
|
+
});
|
|
235
|
+
};
|
|
236
|
+
var SidebarGroupAction = ({ className, render, ...props }) => {
|
|
237
|
+
return useRender({
|
|
238
|
+
defaultTagName: "button",
|
|
239
|
+
props: mergeProps({ className: cn("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform motion-reduce:transition-none group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className) }, props),
|
|
240
|
+
render,
|
|
241
|
+
state: {
|
|
242
|
+
slot: "sidebar-group-action",
|
|
243
|
+
sidebar: "group-action"
|
|
244
|
+
}
|
|
245
|
+
});
|
|
246
|
+
};
|
|
247
|
+
var SidebarGroupContent = ({ className, ...props }) => {
|
|
248
|
+
return /* @__PURE__ */ jsx("div", {
|
|
249
|
+
"data-slot": "sidebar-group-content",
|
|
250
|
+
"data-sidebar": "group-content",
|
|
251
|
+
className: cn("w-full text-sm", className),
|
|
252
|
+
...props
|
|
253
|
+
});
|
|
254
|
+
};
|
|
255
|
+
var SidebarMenu = ({ className, ...props }) => {
|
|
256
|
+
return /* @__PURE__ */ jsx("ul", {
|
|
257
|
+
"data-slot": "sidebar-menu",
|
|
258
|
+
"data-sidebar": "menu",
|
|
259
|
+
className: cn("flex w-full min-w-0 flex-col gap-0", className),
|
|
260
|
+
...props
|
|
261
|
+
});
|
|
262
|
+
};
|
|
263
|
+
var SidebarMenuItem = ({ className, ...props }) => {
|
|
264
|
+
return /* @__PURE__ */ jsx("li", {
|
|
265
|
+
"data-slot": "sidebar-menu-item",
|
|
266
|
+
"data-sidebar": "menu-item",
|
|
267
|
+
className: cn("group/menu-item relative", className),
|
|
268
|
+
...props
|
|
269
|
+
});
|
|
270
|
+
};
|
|
271
|
+
var sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] motion-reduce:transition-none group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate", {
|
|
272
|
+
variants: {
|
|
273
|
+
variant: {
|
|
274
|
+
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
275
|
+
outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
|
|
276
|
+
},
|
|
277
|
+
size: {
|
|
278
|
+
default: "h-8 text-sm",
|
|
279
|
+
sm: "h-7 text-xs",
|
|
280
|
+
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
|
|
281
|
+
}
|
|
282
|
+
},
|
|
283
|
+
defaultVariants: {
|
|
284
|
+
variant: "default",
|
|
285
|
+
size: "default"
|
|
286
|
+
}
|
|
287
|
+
});
|
|
288
|
+
var SidebarMenuButton = ({ render, isActive = false, variant = "default", size = "default", tooltip, className, ...props }) => {
|
|
289
|
+
const { isMobile, state } = useSidebar();
|
|
290
|
+
const comp = useRender({
|
|
291
|
+
defaultTagName: "button",
|
|
292
|
+
props: mergeProps({ className: cn(sidebarMenuButtonVariants({
|
|
293
|
+
variant,
|
|
294
|
+
size
|
|
295
|
+
}), className) }, props),
|
|
296
|
+
render: !tooltip ? render : /* @__PURE__ */ jsx(TooltipTrigger, { render }),
|
|
297
|
+
state: {
|
|
298
|
+
slot: "sidebar-menu-button",
|
|
299
|
+
sidebar: "menu-button",
|
|
300
|
+
size,
|
|
301
|
+
active: isActive
|
|
302
|
+
}
|
|
303
|
+
});
|
|
304
|
+
if (!tooltip) return comp;
|
|
305
|
+
if (typeof tooltip === "string") tooltip = { children: tooltip };
|
|
306
|
+
return /* @__PURE__ */ jsxs(Tooltip, { children: [comp, /* @__PURE__ */ jsx(TooltipContent, {
|
|
307
|
+
side: "right",
|
|
308
|
+
align: "center",
|
|
309
|
+
hidden: state !== "collapsed" || isMobile,
|
|
310
|
+
...tooltip
|
|
311
|
+
})] });
|
|
312
|
+
};
|
|
313
|
+
var SidebarMenuAction = ({ className, render, showOnHover = false, ...props }) => {
|
|
314
|
+
return useRender({
|
|
315
|
+
defaultTagName: "button",
|
|
316
|
+
props: mergeProps({ className: cn("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform motion-reduce:transition-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0", className) }, props),
|
|
317
|
+
render,
|
|
318
|
+
state: {
|
|
319
|
+
slot: "sidebar-menu-action",
|
|
320
|
+
sidebar: "menu-action"
|
|
321
|
+
}
|
|
322
|
+
});
|
|
323
|
+
};
|
|
324
|
+
var SidebarMenuBadge = ({ className, ...props }) => {
|
|
325
|
+
return /* @__PURE__ */ jsx("div", {
|
|
326
|
+
"data-slot": "sidebar-menu-badge",
|
|
327
|
+
"data-sidebar": "menu-badge",
|
|
328
|
+
className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground", className),
|
|
329
|
+
...props
|
|
330
|
+
});
|
|
331
|
+
};
|
|
332
|
+
var SidebarMenuSkeleton = ({ className, showIcon = false, ...props }) => {
|
|
333
|
+
const [width] = React.useState(() => {
|
|
334
|
+
return `${Math.floor(Math.random() * 40) + 50}%`;
|
|
335
|
+
});
|
|
336
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
337
|
+
"data-slot": "sidebar-menu-skeleton",
|
|
338
|
+
"data-sidebar": "menu-skeleton",
|
|
339
|
+
className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
|
|
340
|
+
...props,
|
|
341
|
+
children: [showIcon && /* @__PURE__ */ jsx(Skeleton, {
|
|
342
|
+
className: "size-4 rounded-md",
|
|
343
|
+
"data-sidebar": "menu-skeleton-icon"
|
|
344
|
+
}), /* @__PURE__ */ jsx(Skeleton, {
|
|
345
|
+
className: "h-4 max-w-(--skeleton-width) flex-1",
|
|
346
|
+
"data-sidebar": "menu-skeleton-text",
|
|
347
|
+
style: { "--skeleton-width": width }
|
|
348
|
+
})]
|
|
349
|
+
});
|
|
350
|
+
};
|
|
351
|
+
var SidebarMenuSub = ({ className, ...props }) => {
|
|
352
|
+
return /* @__PURE__ */ jsx("ul", {
|
|
353
|
+
"data-slot": "sidebar-menu-sub",
|
|
354
|
+
"data-sidebar": "menu-sub",
|
|
355
|
+
className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden", className),
|
|
356
|
+
...props
|
|
357
|
+
});
|
|
358
|
+
};
|
|
359
|
+
var SidebarMenuSubItem = ({ className, ...props }) => {
|
|
360
|
+
return /* @__PURE__ */ jsx("li", {
|
|
361
|
+
"data-slot": "sidebar-menu-sub-item",
|
|
362
|
+
"data-sidebar": "menu-sub-item",
|
|
363
|
+
className: cn("group/menu-sub-item relative", className),
|
|
364
|
+
...props
|
|
365
|
+
});
|
|
366
|
+
};
|
|
367
|
+
var SidebarMenuSubButton = ({ render, size = "md", isActive = false, className, ...props }) => {
|
|
368
|
+
return useRender({
|
|
369
|
+
defaultTagName: "a",
|
|
370
|
+
props: mergeProps({ className: cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", className) }, props),
|
|
371
|
+
render,
|
|
372
|
+
state: {
|
|
373
|
+
slot: "sidebar-menu-sub-button",
|
|
374
|
+
sidebar: "menu-sub-button",
|
|
375
|
+
size,
|
|
376
|
+
active: isActive
|
|
377
|
+
}
|
|
378
|
+
});
|
|
379
|
+
};
|
|
380
|
+
//#endregion
|
|
381
|
+
export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };
|
|
382
|
+
|
|
383
|
+
//# sourceMappingURL=sidebar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sidebar.js","names":[],"sources":["../../../../../../../ui/src/components/ui/sidebar/sidebar.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { useIsMobile } from '@edyn/ui/hooks/use-mobile';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconLayoutSidebar } from '@tabler/icons-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\nimport { Button } from '../button';\nimport { Input } from '../input';\nimport { Separator } from '../separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../sheet';\nimport { Skeleton } from '../skeleton';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype TSidebarContextProps = {\n state: 'expanded' | 'collapsed';\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n};\n\nconst SidebarContext = React.createContext<TSidebarContextProps | null>(null);\n\nexport const useSidebar = () => {\n const context = React.useContext(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n\n return context;\n};\n\nexport const SidebarProvider = ({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}) => {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = React.useState(false);\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = React.useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n\n // This sets the cookie to keep the sidebar state.\n // biome-ignore lint/suspicious/noDocumentCookie: match shadcn's synchronous, broadly supported persistence contract.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open],\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(() => {\n return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n }, [isMobile, setOpen]);\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [toggleSidebar]);\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? 'expanded' : 'collapsed';\n\n const contextValue = React.useMemo<TSidebarContextProps>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, toggleSidebar],\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <div\n data-slot=\"sidebar-wrapper\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH,\n '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n ...style,\n } as React.CSSProperties\n }\n className={cn('group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar', className)}\n {...props}\n >\n {children}\n </div>\n </SidebarContext.Provider>\n );\n};\n\nexport const Sidebar = ({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n dir,\n ...props\n}: React.ComponentProps<'div'> & {\n side?: 'left' | 'right';\n variant?: 'sidebar' | 'floating' | 'inset';\n collapsible?: 'offcanvas' | 'icon' | 'none';\n}) => {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n if (collapsible === 'none') {\n return (\n <div data-slot=\"sidebar\" className={cn('flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className)} {...props}>\n {children}\n </div>\n );\n }\n\n if (isMobile) {\n return (\n <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n dir={dir}\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n side={side}\n >\n <SheetHeader className=\"sr-only\">\n <SheetTitle>Sidebar</SheetTitle>\n <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n </SheetHeader>\n <div className=\"flex h-full w-full flex-col\">{children}</div>\n </SheetContent>\n </Sheet>\n );\n }\n\n return (\n <div\n className=\"group peer hidden text-sidebar-foreground md:block\"\n data-state={state}\n data-collapsible={state === 'collapsed' ? collapsible : ''}\n data-variant={variant}\n data-side={side}\n data-slot=\"sidebar\"\n >\n {/* This is what handles the sidebar gap on desktop */}\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n 'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 motion-reduce:transition-none ease-linear',\n 'group-data-[collapsible=offcanvas]:w-0',\n 'group-data-[side=right]:rotate-180',\n variant === 'floating' || variant === 'inset'\n ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n data-side={side}\n className={cn(\n 'fixed inset-y-0 top-(--sidebar-top) z-10 hidden h-[calc(100svh-var(--sidebar-top))] w-(--sidebar-width) transition-[left,right,width] duration-200 motion-reduce:transition-none ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex',\n // Adjust the padding for floating and inset variants.\n variant === 'floating' || variant === 'inset'\n ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n className,\n )}\n {...props}\n >\n <div\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar-inner\"\n className=\"flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border\"\n >\n {children}\n </div>\n </div>\n </div>\n );\n};\n\nexport const SidebarTrigger = ({ className, onClick, ...props }: React.ComponentProps<typeof Button>) => {\n const { toggleSidebar } = useSidebar();\n\n return (\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n size=\"icon-sm\"\n className={cn(className)}\n onClick={(event) => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n <IconLayoutSidebar />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n );\n};\n\nexport const SidebarRail = ({ className, ...props }: React.ComponentProps<'button'>) => {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n data-sidebar=\"rail\"\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n 'absolute inset-y-0 z-20 hidden w-4 transition-all motion-reduce:transition-none ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',\n 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',\n '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n className,\n )}\n {...props}\n />\n );\n};\n\nexport const SidebarInset = ({ className, ...props }: React.ComponentProps<'main'>) => {\n return (\n <main\n data-slot=\"sidebar-inset\"\n className={cn(\n 'relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',\n className,\n )}\n {...props}\n />\n );\n};\n\nexport const SidebarInput = ({ className, ...props }: React.ComponentProps<typeof Input>) => {\n return <Input data-slot=\"sidebar-input\" data-sidebar=\"input\" className={cn('h-8 w-full bg-background shadow-none', className)} {...props} />;\n};\n\nexport const SidebarHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-header\" data-sidebar=\"header\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />;\n};\n\nexport const SidebarFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-footer\" data-sidebar=\"footer\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />;\n};\n\nexport const SidebarSeparator = ({ className, ...props }: React.ComponentProps<typeof Separator>) => {\n return <Separator data-slot=\"sidebar-separator\" data-sidebar=\"separator\" className={cn('mx-2 w-auto bg-sidebar-border', className)} {...props} />;\n};\n\nexport const SidebarContent = ({ className, ...props }: React.ComponentProps<'div'>) => {\n return (\n <div\n data-slot=\"sidebar-content\"\n data-sidebar=\"content\"\n data-focus=\"inset\"\n className={cn('no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className)}\n {...props}\n />\n );\n};\n\nexport const SidebarGroup = ({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-group\" data-sidebar=\"group\" className={cn('relative flex w-full min-w-0 flex-col p-2', className)} {...props} />;\n};\n\nexport const SidebarGroupLabel = ({ className, render, ...props }: useRender.ComponentProps<'div'> & React.ComponentProps<'div'>) => {\n return useRender({\n defaultTagName: 'div',\n props: mergeProps<'div'>(\n {\n className: cn(\n 'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 motion-reduce:transition-none ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-group-label',\n sidebar: 'group-label',\n },\n });\n};\n\nexport const SidebarGroupAction = ({ className, render, ...props }: useRender.ComponentProps<'button'> & React.ComponentProps<'button'>) => {\n return useRender({\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(\n 'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform motion-reduce:transition-none group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-group-action',\n sidebar: 'group-action',\n },\n });\n};\n\nexport const SidebarGroupContent = ({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-group-content\" data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />;\n};\n\nexport const SidebarMenu = ({ className, ...props }: React.ComponentProps<'ul'>) => {\n return <ul data-slot=\"sidebar-menu\" data-sidebar=\"menu\" className={cn('flex w-full min-w-0 flex-col gap-0', className)} {...props} />;\n};\n\nexport const SidebarMenuItem = ({ className, ...props }: React.ComponentProps<'li'>) => {\n return <li data-slot=\"sidebar-menu-item\" data-sidebar=\"menu-item\" className={cn('group/menu-item relative', className)} {...props} />;\n};\n\nconst sidebarMenuButtonVariants = cva(\n 'peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] motion-reduce:transition-none group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',\n {\n variants: {\n variant: {\n default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n outline:\n 'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',\n },\n size: {\n default: 'h-8 text-sm',\n sm: 'h-7 text-xs',\n lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\nexport const SidebarMenuButton = ({\n render,\n isActive = false,\n variant = 'default',\n size = 'default',\n tooltip,\n className,\n ...props\n}: useRender.ComponentProps<'button'> &\n React.ComponentProps<'button'> & {\n isActive?: boolean;\n tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n } & VariantProps<typeof sidebarMenuButtonVariants>) => {\n const { isMobile, state } = useSidebar();\n const comp = useRender({\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n },\n props,\n ),\n render: !tooltip ? render : <TooltipTrigger render={render} />,\n state: {\n slot: 'sidebar-menu-button',\n sidebar: 'menu-button',\n size,\n active: isActive,\n },\n });\n\n if (!tooltip) {\n return comp;\n }\n\n if (typeof tooltip === 'string') {\n tooltip = {\n children: tooltip,\n };\n }\n\n return (\n <Tooltip>\n {comp}\n <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n </Tooltip>\n );\n};\n\nexport const SidebarMenuAction = ({\n className,\n render,\n showOnHover = false,\n ...props\n}: useRender.ComponentProps<'button'> &\n React.ComponentProps<'button'> & {\n showOnHover?: boolean;\n }) => {\n return useRender({\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(\n 'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform motion-reduce:transition-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',\n showOnHover &&\n 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-menu-action',\n sidebar: 'menu-action',\n },\n });\n};\n\nexport const SidebarMenuBadge = ({ className, ...props }: React.ComponentProps<'div'>) => {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n data-sidebar=\"menu-badge\"\n className={cn(\n 'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground',\n className,\n )}\n {...props}\n />\n );\n};\n\nexport const SidebarMenuSkeleton = ({\n className,\n showIcon = false,\n ...props\n}: React.ComponentProps<'div'> & {\n showIcon?: boolean;\n}) => {\n // Random width between 50 to 90%.\n const [width] = React.useState(() => {\n return `${Math.floor(Math.random() * 40) + 50}%`;\n });\n\n return (\n <div\n data-slot=\"sidebar-menu-skeleton\"\n data-sidebar=\"menu-skeleton\"\n className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n {...props}\n >\n {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={\n {\n '--skeleton-width': width,\n } as React.CSSProperties\n }\n />\n </div>\n );\n};\n\nexport const SidebarMenuSub = ({ className, ...props }: React.ComponentProps<'ul'>) => {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n data-sidebar=\"menu-sub\"\n className={cn(\n 'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n );\n};\n\nexport const SidebarMenuSubItem = ({ className, ...props }: React.ComponentProps<'li'>) => {\n return <li data-slot=\"sidebar-menu-sub-item\" data-sidebar=\"menu-sub-item\" className={cn('group/menu-sub-item relative', className)} {...props} />;\n};\n\nexport const SidebarMenuSubButton = ({\n render,\n size = 'md',\n isActive = false,\n className,\n ...props\n}: useRender.ComponentProps<'a'> &\n React.ComponentProps<'a'> & {\n size?: 'sm' | 'md';\n isActive?: boolean;\n }) => {\n return useRender({\n defaultTagName: 'a',\n props: mergeProps<'a'>(\n {\n className: cn(\n 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-menu-sub-button',\n sidebar: 'menu-sub-button',\n size,\n active: isActive,\n },\n });\n};\n"],"mappings":"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"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { cn } from "../../../lib/utils.js";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
//#region ../ui/src/components/ui/skeleton/skeleton.tsx
|
|
4
|
+
var Skeleton = ({ className, ...props }) => {
|
|
5
|
+
return /* @__PURE__ */ jsx("div", {
|
|
6
|
+
"data-slot": "skeleton",
|
|
7
|
+
className: cn("animate-pulse rounded-md bg-muted motion-reduce:animate-none", className),
|
|
8
|
+
...props
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
//#endregion
|
|
12
|
+
export { Skeleton };
|
|
13
|
+
|
|
14
|
+
//# sourceMappingURL=skeleton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"skeleton.js","names":[],"sources":["../../../../../../../ui/src/components/ui/skeleton/skeleton.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\n\nexport const Skeleton = ({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"skeleton\" className={cn('animate-pulse rounded-md bg-muted motion-reduce:animate-none', className)} {...props} />;\n};\n"],"mappings":";;;AAEA,IAAa,YAAY,EAAE,WAAW,GAAG,YAAyC;CAChF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAW,WAAW,GAAG,gEAAgE,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzI"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { cn } from "../../../lib/utils.js";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Slider } from "@base-ui/react/slider";
|
|
4
|
+
//#region ../ui/src/components/ui/slider/slider.tsx
|
|
5
|
+
var Slider$1 = ({ className, value, defaultValue, min, max, step, disabled, onValueChange, onValueCommitted, name, minStepsBetweenValues, "aria-label": ariaLabel, ...props }) => {
|
|
6
|
+
const thumbValues = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [value ?? defaultValue ?? min ?? 0];
|
|
7
|
+
const thumbs = Array.from({ length: thumbValues.length }, (_, index) => ({
|
|
8
|
+
id: `thumb-${index}`,
|
|
9
|
+
index
|
|
10
|
+
}));
|
|
11
|
+
return /* @__PURE__ */ jsx(Slider.Root, {
|
|
12
|
+
"data-slot": "slider",
|
|
13
|
+
className: cn("relative flex w-full touch-none items-center", className),
|
|
14
|
+
value,
|
|
15
|
+
defaultValue,
|
|
16
|
+
min,
|
|
17
|
+
max,
|
|
18
|
+
step,
|
|
19
|
+
disabled,
|
|
20
|
+
onValueChange,
|
|
21
|
+
onValueCommitted,
|
|
22
|
+
name,
|
|
23
|
+
minStepsBetweenValues,
|
|
24
|
+
thumbAlignment: "edge",
|
|
25
|
+
"aria-label": ariaLabel,
|
|
26
|
+
...props,
|
|
27
|
+
children: /* @__PURE__ */ jsxs(Slider.Control, {
|
|
28
|
+
"data-slot": "slider-control",
|
|
29
|
+
className: "relative flex w-full cursor-pointer touch-none items-center py-3 data-disabled:cursor-not-allowed data-disabled:opacity-50",
|
|
30
|
+
children: [/* @__PURE__ */ jsx(Slider.Track, {
|
|
31
|
+
"data-slot": "slider-track",
|
|
32
|
+
className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted",
|
|
33
|
+
children: /* @__PURE__ */ jsx(Slider.Indicator, {
|
|
34
|
+
"data-slot": "slider-indicator",
|
|
35
|
+
className: "absolute h-full bg-primary"
|
|
36
|
+
})
|
|
37
|
+
}), thumbs.map((thumb) => /* @__PURE__ */ jsx(Slider.Thumb, {
|
|
38
|
+
index: thumb.index,
|
|
39
|
+
getAriaLabel: ariaLabel ? () => thumbValues.length > 1 ? `${ariaLabel} ${thumb.index + 1}` : ariaLabel : void 0,
|
|
40
|
+
"data-slot": "slider-thumb",
|
|
41
|
+
className: "relative block size-4 shrink-0 rounded-full border border-primary/50 bg-background shadow-sm outline-none transition-colors after:absolute after:-inset-2 data-disabled:pointer-events-none data-disabled:opacity-50"
|
|
42
|
+
}, thumb.id))]
|
|
43
|
+
})
|
|
44
|
+
});
|
|
45
|
+
};
|
|
46
|
+
//#endregion
|
|
47
|
+
export { Slider$1 as Slider };
|
|
48
|
+
|
|
49
|
+
//# sourceMappingURL=slider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"slider.js","names":[],"sources":["../../../../../../../ui/src/components/ui/slider/slider.tsx"],"sourcesContent":["import { Slider as SliderPrimitive } from '@base-ui/react/slider';\n\nimport { cn } from '@edyn/ui/lib/utils';\n\nexport type TSliderValue = number | readonly number[];\n\nexport interface ISliderProps<TValue extends TSliderValue = number> {\n value?: TValue;\n defaultValue?: TValue;\n min?: number;\n max?: number;\n step?: number;\n disabled?: boolean;\n onValueChange?: (value: TValue extends number ? number : TValue, eventDetails: SliderPrimitive.Root.ChangeEventDetails) => void;\n onValueCommitted?: (value: TValue extends number ? number : TValue, eventDetails: SliderPrimitive.Root.CommitEventDetails) => void;\n className?: string;\n name?: string;\n minStepsBetweenValues?: number;\n 'aria-label'?: string;\n}\n\nexport const Slider = <TValue extends TSliderValue = number>({\n className,\n value,\n defaultValue,\n min,\n max,\n step,\n disabled,\n onValueChange,\n onValueCommitted,\n name,\n minStepsBetweenValues,\n 'aria-label': ariaLabel,\n ...props\n}: ISliderProps<TValue>) => {\n const thumbValues = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [value ?? defaultValue ?? min ?? 0];\n const thumbs = Array.from({ length: thumbValues.length }, (_, index) => ({ id: `thumb-${index}`, index }));\n\n return (\n <SliderPrimitive.Root\n data-slot=\"slider\"\n className={cn('relative flex w-full touch-none items-center', className)}\n value={value as never}\n defaultValue={defaultValue as never}\n min={min}\n max={max}\n step={step}\n disabled={disabled}\n onValueChange={onValueChange as never}\n onValueCommitted={onValueCommitted as never}\n name={name}\n minStepsBetweenValues={minStepsBetweenValues}\n thumbAlignment=\"edge\"\n aria-label={ariaLabel}\n {...(props as object)}\n >\n <SliderPrimitive.Control\n data-slot=\"slider-control\"\n className=\"relative flex w-full cursor-pointer touch-none items-center py-3 data-disabled:cursor-not-allowed data-disabled:opacity-50\"\n >\n <SliderPrimitive.Track data-slot=\"slider-track\" className=\"relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted\">\n <SliderPrimitive.Indicator data-slot=\"slider-indicator\" className=\"absolute h-full bg-primary\" />\n </SliderPrimitive.Track>\n {thumbs.map((thumb) => (\n <SliderPrimitive.Thumb\n key={thumb.id}\n index={thumb.index}\n getAriaLabel={ariaLabel ? () => (thumbValues.length > 1 ? `${ariaLabel} ${thumb.index + 1}` : ariaLabel) : undefined}\n data-slot=\"slider-thumb\"\n className=\"relative block size-4 shrink-0 rounded-full border border-primary/50 bg-background shadow-sm outline-none transition-colors after:absolute after:-inset-2 data-disabled:pointer-events-none data-disabled:opacity-50\"\n />\n ))}\n </SliderPrimitive.Control>\n </SliderPrimitive.Root>\n );\n};\n"],"mappings":";;;;AAqBA,IAAa,YAAgD,EAC3D,WACA,OACA,cACA,KACA,KACA,MACA,UACA,eACA,kBACA,MACA,uBACA,cAAc,WACd,GAAG,YACuB;CAC1B,MAAM,cAAc,MAAM,QAAQ,KAAK,IAAI,QAAQ,MAAM,QAAQ,YAAY,IAAI,eAAe,CAAC,SAAS,gBAAgB,OAAO,CAAC;CAClI,MAAM,SAAS,MAAM,KAAK,EAAE,QAAQ,YAAY,OAAO,IAAI,GAAG,WAAW;EAAE,IAAI,SAAS;EAAS;CAAM,EAAE;CAEzG,OACE,oBAAC,OAAgB,MAAjB;EACE,aAAU;EACV,WAAW,GAAG,gDAAgD,SAAS;EAChE;EACO;EACT;EACA;EACC;EACI;EACK;EACG;EACZ;EACiB;EACvB,gBAAe;EACf,cAAY;EACZ,GAAK;EAEL,UAAA,qBAAC,OAAgB,SAAjB;GACE,aAAU;GACV,WAAU;GAFZ,UAAA,CAIE,oBAAC,OAAgB,OAAjB;IAAuB,aAAU;IAAe,WAAU;IACxD,UAAA,oBAAC,OAAgB,WAAjB;KAA2B,aAAU;KAAmB,WAAU;IAA8B,CAAA;GAC3E,CAAA,GACtB,OAAO,KAAK,UACX,oBAAC,OAAgB,OAAjB;IAEE,OAAO,MAAM;IACb,cAAc,kBAAmB,YAAY,SAAS,IAAI,GAAG,UAAU,GAAG,MAAM,QAAQ,MAAM,YAAa,KAAA;IAC3G,aAAU;IACV,WAAU;GACX,GALM,MAAM,EAKZ,CACF,CACsB;;CACL,CAAA;AAE1B"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { cn } from "../../../lib/utils.js";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { IconLoader } from "@tabler/icons-react";
|
|
5
|
+
//#region ../ui/src/components/ui/spinner/spinner.tsx
|
|
6
|
+
var spinnerVariants = cva("animate-spin motion-reduce:animate-none", {
|
|
7
|
+
variants: { size: {
|
|
8
|
+
xs: "size-3",
|
|
9
|
+
sm: "size-4",
|
|
10
|
+
default: "size-5",
|
|
11
|
+
lg: "size-6",
|
|
12
|
+
xl: "size-8"
|
|
13
|
+
} },
|
|
14
|
+
defaultVariants: { size: "default" }
|
|
15
|
+
});
|
|
16
|
+
var Spinner = ({ className, size = "default", ...props }) => {
|
|
17
|
+
return /* @__PURE__ */ jsx(IconLoader, {
|
|
18
|
+
"data-slot": "spinner",
|
|
19
|
+
role: "status",
|
|
20
|
+
"aria-label": "Loading",
|
|
21
|
+
className: cn(spinnerVariants({ size }), className),
|
|
22
|
+
...props
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
//#endregion
|
|
26
|
+
export { Spinner, spinnerVariants };
|
|
27
|
+
|
|
28
|
+
//# sourceMappingURL=spinner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"spinner.js","names":[],"sources":["../../../../../../../ui/src/components/ui/spinner/spinner.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport { IconLoader } from '@tabler/icons-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nexport const spinnerVariants = cva('animate-spin motion-reduce:animate-none', {\n variants: {\n size: {\n xs: 'size-3',\n sm: 'size-4',\n default: 'size-5',\n lg: 'size-6',\n xl: 'size-8',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n});\n\nexport const Spinner = ({ className, size = 'default', ...props }: React.ComponentProps<'svg'> & VariantProps<typeof spinnerVariants>) => {\n return <IconLoader data-slot=\"spinner\" role=\"status\" aria-label=\"Loading\" className={cn(spinnerVariants({ size }), className)} {...props} />;\n};\n"],"mappings":";;;;;AAIA,IAAa,kBAAkB,IAAI,2CAA2C;CAC5E,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CAAC;AAED,IAAa,WAAW,EAAE,WAAW,OAAO,WAAW,GAAG,YAAgF;CACxI,OAAO,oBAAC,YAAD;EAAY,aAAU;EAAU,MAAK;EAAS,cAAW;EAAU,WAAW,GAAG,gBAAgB,EAAE,KAAK,CAAC,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7I"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { cn } from "../../../lib/utils.js";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Switch } from "@base-ui/react/switch";
|
|
4
|
+
//#region ../ui/src/components/ui/switch/switch.tsx
|
|
5
|
+
var Switch$1 = ({ className, size = "default", ...props }) => {
|
|
6
|
+
return /* @__PURE__ */ jsx(Switch.Root, {
|
|
7
|
+
"data-slot": "switch",
|
|
8
|
+
"data-size": size,
|
|
9
|
+
className: cn("peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all motion-reduce:transition-none outline-none after:absolute after:-inset-x-3 after:-inset-y-2 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-4.5 data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
|
|
10
|
+
...props,
|
|
11
|
+
children: /* @__PURE__ */ jsx(Switch.Thumb, {
|
|
12
|
+
"data-slot": "switch-thumb",
|
|
13
|
+
className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform motion-reduce:transition-none group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
|
|
14
|
+
})
|
|
15
|
+
});
|
|
16
|
+
};
|
|
17
|
+
//#endregion
|
|
18
|
+
export { Switch$1 as Switch };
|
|
19
|
+
|
|
20
|
+
//# sourceMappingURL=switch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"switch.js","names":[],"sources":["../../../../../../../ui/src/components/ui/switch/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch';\n\nimport { cn } from '@edyn/ui/lib/utils';\n\nexport const Switch = ({\n className,\n size = 'default',\n ...props\n}: SwitchPrimitive.Root.Props & {\n size?: 'sm' | 'default';\n}) => {\n return (\n <SwitchPrimitive.Root\n data-slot=\"switch\"\n data-size={size}\n className={cn(\n 'peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all motion-reduce:transition-none outline-none after:absolute after:-inset-x-3 after:-inset-y-2 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-4.5 data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50',\n className,\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n className=\"pointer-events-none block rounded-full bg-background ring-0 transition-transform motion-reduce:transition-none group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground\"\n />\n </SwitchPrimitive.Root>\n );\n};\n"],"mappings":";;;;AAIA,IAAa,YAAU,EACrB,WACA,OAAO,WACP,GAAG,YAGC;CACJ,OACE,oBAAC,OAAgB,MAAjB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,ylBACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,OAAgB,OAAjB;GACE,aAAU;GACV,WAAU;EACX,CAAA;CACmB,CAAA;AAE1B"}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Structure test for the Table primitives.
|
|
3
3
|
*
|
|
4
|
-
* Uses happy-dom (registered by test-setup.ts) and the
|
|
5
|
-
* pattern
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* (and the Angular demos that consume it) get a real, accessible table.
|
|
4
|
+
* Uses happy-dom (registered by test-setup.ts) and the React-in-bun-test
|
|
5
|
+
* pattern: render with createRoot + flushSync, then query the real DOM. Guards
|
|
6
|
+
* that the primitives produce a semantic <table> (thead/tbody/th/td/caption) and
|
|
7
|
+
* the shadcn overflow wrapper, so consumers get a real, accessible table.
|
|
9
8
|
*/
|
|
10
9
|
export {};
|
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
import type * as React from 'react';
|
|
2
|
-
export
|
|
2
|
+
export interface ITableProps extends React.ComponentProps<'table'> {
|
|
3
|
+
/**
|
|
4
|
+
* The box around the table. A table wider than it scrolls sideways inside it, in a design system ScrollArea: the bar is the
|
|
5
|
+
* kit's, not the browser's, and the room it takes at the foot is kept clear of the last row. `overflow-visible` turns that
|
|
6
|
+
* scroll off, for a table whose page or parent scrolls it, or whose sticky header would otherwise stick to this box instead
|
|
7
|
+
* of that one.
|
|
8
|
+
*/
|
|
9
|
+
containerClassName?: string;
|
|
10
|
+
}
|
|
11
|
+
export declare const Table: ({ className, containerClassName, ...props }: ITableProps) => React.JSX.Element;
|
|
12
|
+
/**
|
|
13
|
+
* The header row names the columns, it is not a row to point at: TableRow's hover fill would make it light up like the data
|
|
14
|
+
* under it, and read as clickable. The rule sits here, one level above the row, so it holds for any row put in a header and
|
|
15
|
+
* outranks the row's own hover fill.
|
|
16
|
+
*/
|
|
3
17
|
export declare const TableHeader: ({ className, ...props }: React.ComponentProps<"thead">) => React.JSX.Element;
|
|
4
18
|
export declare const TableBody: ({ className, ...props }: React.ComponentProps<"tbody">) => React.JSX.Element;
|
|
5
19
|
export declare const TableFooter: ({ className, ...props }: React.ComponentProps<"tfoot">) => React.JSX.Element;
|