@espressif/dashboard-ui-components 1.10.0 → 1.11.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/CHANGELOG.md +75 -0
- package/dist/_vendor/@radix-ui/primitive/dist/index.js +9 -0
- package/dist/_vendor/@radix-ui/react-checkbox/dist/index.js +185 -0
- package/dist/_vendor/@radix-ui/react-compose-refs/dist/index.js +28 -0
- package/dist/_vendor/@radix-ui/react-context/dist/index.js +68 -0
- package/dist/_vendor/@radix-ui/react-presence/dist/index.js +127 -0
- package/dist/_vendor/@radix-ui/react-primitive/dist/index.js +42 -0
- package/dist/_vendor/@radix-ui/react-use-controllable-state/dist/index.js +55 -0
- package/dist/_vendor/@radix-ui/react-use-layout-effect/dist/index.js +5 -0
- package/dist/_vendor/@radix-ui/react-use-previous/dist/index.js +17 -0
- package/dist/_vendor/@radix-ui/react-use-size/dist/index.js +39 -0
- package/dist/_vendor/lottie-react/build/index.es.js +537 -0
- package/dist/_vendor/lottie-web/build/player/lottie.js +14149 -0
- package/dist/_virtual/_rolldown/runtime.js +24 -0
- package/dist/assets/illustrations/bulb-cloud-drawing.js +4 -0
- package/dist/assets/illustrations/rm-dashboard-update.js +4 -0
- package/dist/assets/illustrations/rm-data-download.js +4 -0
- package/dist/assets/logos/espressif/espressif-no-text.js +4 -0
- package/dist/assets/logos/espressif/espressif-with-text-dm.js +4 -0
- package/dist/assets/logos/espressif/espressif-with-text.js +4 -0
- package/dist/assets/logos/insights/insights-no-text.js +4 -0
- package/dist/assets/logos/insights/insights-with-text-dm.js +4 -0
- package/dist/assets/logos/insights/insights-with-text.js +4 -0
- package/dist/assets/logos/launchpad/launchpad-no-text-dm.js +4 -0
- package/dist/assets/logos/launchpad/launchpad-no-text.js +4 -0
- package/dist/assets/logos/launchpad/launchpad-with-text-dm.js +4 -0
- package/dist/assets/logos/launchpad/launchpad-with-text.js +4 -0
- package/dist/assets/logos/private-agents/private-agents-no-text.js +4 -0
- package/dist/assets/logos/private-agents/private-agents-with-text-dm.js +4 -0
- package/dist/assets/logos/private-agents/private-agents-with-text.js +4 -0
- package/dist/assets/logos/rainmaker/rainmaker-no-text.js +4 -0
- package/dist/assets/logos/rainmaker/rainmaker-with-text-dm.js +4 -0
- package/dist/assets/logos/rainmaker/rainmaker-with-text.js +4 -0
- package/dist/assets/logos/rainmaker-classic/rainmaker-classic-no-text-dm.js +4 -0
- package/dist/assets/logos/rainmaker-classic/rainmaker-classic-no-text.js +4 -0
- package/dist/assets/logos/rainmaker-classic/rainmaker-classic-with-text-dm.js +4 -0
- package/dist/assets/logos/rainmaker-classic/rainmaker-classic-with-text.js +4 -0
- package/dist/assets/logos/rainmaker-neo/rainmaker-neo-no-text.js +4 -0
- package/dist/assets/logos/rainmaker-neo/rainmaker-neo-with-text-dm.js +4 -0
- package/dist/assets/logos/rainmaker-neo/rainmaker-neo-with-text.js +4 -0
- package/dist/assets/logos/ui-components/ui-components-no-text.js +4 -0
- package/dist/assets/logos/ui-components/ui-components-with-text-dm.js +4 -0
- package/dist/assets/logos/ui-components/ui-components-with-text.js +4 -0
- package/dist/assets/logos/zerocode/zerocode-no-text.js +4 -0
- package/dist/assets/logos/zerocode/zerocode-with-text-dm.js +4 -0
- package/dist/assets/logos/zerocode/zerocode-with-text.js +4 -0
- package/dist/assets/logos/zerocode-ai/zerocode-ai-no-text.js +4 -0
- package/dist/assets/logos/zerocode-ai/zerocode-ai-with-text-dm.js +4 -0
- package/dist/assets/logos/zerocode-ai/zerocode-ai-with-text.js +4 -0
- package/dist/common/animated-rainmaker-logo/animated-rainmaker-logo.constants.js +18 -0
- package/dist/common/animated-rainmaker-logo/animated-rainmaker-logo.js +24 -0
- package/dist/common/animated-rainmaker-logo/rainmaker-c-logo.js +50 -0
- package/dist/common/animated-rainmaker-logo/use-animated-rainmaker-logo-animation.js +85 -0
- package/dist/common/app-logo/app-logo.js +59 -0
- package/dist/common/app-logo/logo-config.js +297 -0
- package/dist/common/copyright-card/copyright-card.js +39 -0
- package/dist/common/footer-card/footer-card.js +22 -0
- package/dist/common/index.js +8 -8
- package/dist/common/my-account-menu/my-account-menu.js +32 -0
- package/dist/common/page-loader/page-loader.js +21 -0
- package/dist/common/profile-card/profile-card.js +26 -0
- package/dist/components/accordion/accordion.js +52 -0
- package/dist/components/advanced-search-box/advanced-search-box.js +106 -0
- package/dist/components/alert/alert.js +85 -0
- package/dist/components/animated-containers/pop-collection-item.js +28 -0
- package/dist/components/async-multi-select/async-multi-select.js +199 -0
- package/dist/components/avatar/avatar.js +41 -0
- package/dist/components/button/button.js +191 -0
- package/dist/components/button/flash-button.js +110 -0
- package/dist/components/button/invert-button.js +13 -0
- package/dist/components/calendar/calendar.js +105 -0
- package/dist/components/cards/animated-card/animated-card-animations.js +57 -0
- package/dist/components/cards/animated-card/animated-card.js +42 -0
- package/dist/components/cards/basic-details-card.js +46 -0
- package/dist/components/cards/collapsible-card.js +48 -0
- package/dist/components/cards/no-data-card/no-data-card.js +30 -0
- package/dist/components/cards/section-card.js +265 -0
- package/dist/components/cards/simple-card.js +24 -0
- package/dist/components/carousel/carousel.js +158 -0
- package/dist/components/chart/area-chart.js +135 -0
- package/dist/components/chart/bar-chart.js +151 -0
- package/dist/components/chart/chart-colors.js +85 -0
- package/dist/components/chart/chart-series-data.js +53 -0
- package/dist/components/chart/chart.js +147 -0
- package/dist/components/chart/chart.types.js +7 -0
- package/dist/components/chart/composed-chart.js +182 -0
- package/dist/components/chart/donut-chart.js +177 -0
- package/dist/components/chart/line-chart.js +137 -0
- package/dist/components/chart/treemap-chart.js +294 -0
- package/dist/components/circular-progress/circular-progress.js +125 -0
- package/dist/components/code-editor/code-editor.js +235 -0
- package/dist/components/code-editor/code-editor.utils.js +122 -0
- package/dist/components/code-editor/use-code-editor-keys.js +79 -0
- package/dist/components/code-editor/use-highlighted-html.js +102 -0
- package/dist/components/confirmation-dialog/confirmation-dialog.js +72 -0
- package/dist/components/content-container/content-container.js +20 -0
- package/dist/components/copiable-text/copiable-text.js +46 -0
- package/dist/components/data-table/data-table.js +186 -0
- package/dist/components/data-table/responsive-columns.js +65 -0
- package/dist/components/data-table/row-actions.js +27 -0
- package/dist/components/data-table/sticky-columns.js +71 -0
- package/dist/components/data-table/table-body.js +57 -0
- package/dist/components/data-table/table-header.js +21 -0
- package/dist/components/date-picker/date-picker.js +95 -0
- package/dist/components/date-range-picker/date-range-picker.js +301 -0
- package/dist/components/date-range-picker/presets.js +174 -0
- package/dist/components/date-time-picker/date-time-picker.js +144 -0
- package/dist/components/date-time-picker/date-time-picker.utils.js +32 -0
- package/dist/components/device-icon/device-icon.config.js +194 -0
- package/dist/components/device-icon/device-icon.js +17 -0
- package/dist/components/device-icon/icons/air-conditioner.js +22 -0
- package/dist/components/device-icon/icons/blind.js +24 -0
- package/dist/components/device-icon/icons/dimmer.js +14 -0
- package/dist/components/device-icon/icons/extension-board.js +42 -0
- package/dist/components/device-icon/icons/fan.js +14 -0
- package/dist/components/device-icon/icons/knob.js +14 -0
- package/dist/components/device-icon/icons/led-strip.js +22 -0
- package/dist/components/device-icon/icons/light.js +14 -0
- package/dist/components/device-icon/icons/refrigerator.js +18 -0
- package/dist/components/device-icon/icons/retro-switch.js +18 -0
- package/dist/components/device-icon/icons/router.js +20 -0
- package/dist/components/device-icon/icons/sensor.js +20 -0
- package/dist/components/device-icon/icons/socket.js +19 -0
- package/dist/components/device-icon/icons/switch.js +19 -0
- package/dist/components/device-icon/icons/thermostat.js +21 -0
- package/dist/components/device-icon/icons/washing-machine.js +22 -0
- package/dist/components/device-icon/match-device.js +61 -0
- package/dist/components/dynamic-list/dynamic-list.js +445 -0
- package/dist/components/error-display/full-size-error/full-size-error.js +20 -0
- package/dist/components/error-display/inline-error/inline-error.js +12 -0
- package/dist/components/file-input/file-input.js +318 -0
- package/dist/components/file-upload/file-upload.js +317 -0
- package/dist/components/filters-bar/filters-bar.js +36 -0
- package/dist/components/fullscreen-dialog/fullscreen-dialog.js +68 -0
- package/dist/components/icon-avatar/icon-avatar.js +130 -0
- package/dist/components/icon-text-action-card/icon-text-action-card.js +190 -0
- package/dist/components/illustration/illustration-registry.js +37 -0
- package/dist/components/illustration/illustration-variants.js +21 -0
- package/dist/components/illustration/illustration.js +68 -0
- package/dist/components/index.d.ts +0 -20
- package/dist/components/index.js +134 -6
- package/dist/components/key-value-manager/key-value-manager-add-popover.js +126 -0
- package/dist/components/key-value-manager/key-value-manager-field.js +47 -0
- package/dist/components/key-value-manager/key-value-manager-table.js +188 -0
- package/dist/components/key-value-manager/key-value-manager.js +111 -0
- package/dist/components/key-value-manager/key-value-manager.props.js +28 -0
- package/dist/components/key-value-manager/key-value-manager.utils.js +21 -0
- package/dist/components/link/link.js +67 -0
- package/dist/components/list/dropdown-list-item.js +60 -0
- package/dist/components/list/list-item.utils.js +76 -0
- package/dist/components/list/list.js +49 -0
- package/dist/components/list/list.props.js +27 -0
- package/dist/components/list/standard-list-item.js +66 -0
- package/dist/components/list-details/list-details-item-button.js +46 -0
- package/dist/components/list-details/list-details-item-dropdown.js +112 -0
- package/dist/components/list-details/list-details-item-strip.js +125 -0
- package/dist/components/list-details/list-details.js +148 -0
- package/dist/components/lottie-animation-container/lottie-animation-container.js +31 -0
- package/dist/components/lottie-animations/animation-data/access-denied.js +3980 -0
- package/dist/components/lottie-animations/animation-data/active.js +825 -0
- package/dist/components/lottie-animations/animation-data/bar-chart.js +610 -0
- package/dist/components/lottie-animations/animation-data/chart-loading.js +5368 -0
- package/dist/components/lottie-animations/animation-data/cloud-download.js +1660 -0
- package/dist/components/lottie-animations/animation-data/cloud-sync.js +932 -0
- package/dist/components/lottie-animations/animation-data/coud-upload.js +7060 -0
- package/dist/components/lottie-animations/animation-data/cross-throb.js +1506 -0
- package/dist/components/lottie-animations/animation-data/dashboard-loading.js +14330 -0
- package/dist/components/lottie-animations/animation-data/error-spread-out.js +5567 -0
- package/dist/components/lottie-animations/animation-data/error.js +1211 -0
- package/dist/components/lottie-animations/animation-data/green-success.js +14826 -0
- package/dist/components/lottie-animations/animation-data/inactive.js +723 -0
- package/dist/components/lottie-animations/animation-data/light.js +2678 -0
- package/dist/components/lottie-animations/animation-data/lock.js +900 -0
- package/dist/components/lottie-animations/animation-data/lock2.js +1686 -0
- package/dist/components/lottie-animations/animation-data/locked.js +641 -0
- package/dist/components/lottie-animations/animation-data/search-error.js +954 -0
- package/dist/components/lottie-animations/animation-data/security.js +4121 -0
- package/dist/components/lottie-animations/animation-data/success.js +404 -0
- package/dist/components/lottie-animations/animation-data/verification-in-progress.js +10138 -0
- package/dist/components/lottie-animations/animation-data/warning.js +843 -0
- package/dist/components/lottie-animations/verification-in-progress/verification-in-progress.js +19 -0
- package/dist/components/markdown-content/markdown-content.components.js +114 -0
- package/dist/components/markdown-content/markdown-content.js +39 -0
- package/dist/components/menu/menu.js +19 -0
- package/dist/components/monospace-content/monospace-content.js +80 -0
- package/dist/components/nav-bar/nav-bar-details-panel.js +51 -0
- package/dist/components/nav-bar/nav-bar-mobile-menu.js +105 -0
- package/dist/components/nav-bar/nav-bar.js +449 -0
- package/dist/components/nav-bar/use-nav-bar-overflow.js +74 -0
- package/dist/components/nav-bar/use-nav-bar-scroll.js +42 -0
- package/dist/components/overflow-badge-list/overflow-badge-list.js +58 -0
- package/dist/components/page-container/page-container-skeleton.js +72 -0
- package/dist/components/page-container/page-container.js +93 -0
- package/dist/components/pagination/pagination.js +96 -0
- package/dist/components/pagination/pagination.props.js +16 -0
- package/dist/components/progress-bar/progress-bar.js +106 -0
- package/dist/components/radio-group/radio-group.js +41 -0
- package/dist/components/requirement-list/requirement-list.js +83 -0
- package/dist/components/scrollable-sections/scrollable-sections.js +270 -0
- package/dist/components/search-box/search-box.js +54 -0
- package/dist/components/search-field-shell.js +24 -0
- package/dist/components/selectable-card-list/checkbox-card-list.js +85 -0
- package/dist/components/selectable-card-list/radio-card-list.js +99 -0
- package/dist/components/selectable-card-list/selectable-card-list-shared.js +135 -0
- package/dist/components/selectable-card-list/selectable-card-list.js +34 -0
- package/dist/components/sidebar/sidebar.js +344 -0
- package/dist/components/sidebar/types.js +6 -0
- package/dist/components/simple-clickable-card/simple-clickable-card-shared.js +309 -0
- package/dist/components/simple-clickable-card/simple-clickable-card.js +106 -0
- package/dist/components/simple-info-card/simple-info-card.js +154 -0
- package/dist/components/simple-list/simple-list.js +146 -0
- package/dist/components/simple-paginated-list/simple-paginated-list.js +178 -0
- package/dist/components/simplified-date/simplified-date.js +56 -0
- package/dist/components/skeletons/table-skeleton.js +16 -0
- package/dist/components/spinner/spinner.js +25 -0
- package/dist/components/stat-card/stat-card.js +206 -0
- package/dist/components/status-badge/status-badge.js +108 -0
- package/dist/components/status-card-list/status-card-list.js +282 -0
- package/dist/components/tag/tag.js +144 -0
- package/dist/components/tag-input/tag-input.js +161 -0
- package/dist/components/text-effects/glitch-effect/glitch-text.js +115 -0
- package/dist/components/text-effects/gradient-text/gradient-text.js +32 -0
- package/dist/components/text-effects/highlight-text/highlight-text.js +35 -0
- package/dist/components/text-effects/parse-text-markup.js +53 -0
- package/dist/components/text-effects/shimmer-text/shimmer-text.js +67 -0
- package/dist/components/time-picker/time-picker.js +23 -0
- package/dist/components/toast/toast.js +126 -0
- package/dist/components/togglable-items-list/togglable-items-list.js +28 -0
- package/dist/components/tooltip/tooltip.js +21 -0
- package/dist/components/transfer-list/transfer-list.js +413 -0
- package/dist/components/truncated-line-with-tooltip/truncated-line-with-tooltip.js +61 -0
- package/dist/components/typography/typography-variants.js +41 -0
- package/dist/components/typography/typography.js +15 -0
- package/dist/components/user-type-badge/user-type-badge.js +40 -0
- package/dist/components/user-type-badge/user-type-badge.registry.js +17 -0
- package/dist/components/vertical-stepper/vertical-stepper.js +171 -0
- package/dist/core/alert.js +33 -0
- package/dist/core/animate-ui/components/animate/code-header.js +30 -0
- package/dist/core/animate-ui/components/animate/code.js +35 -0
- package/dist/core/animate-ui/components/animate/tabs.js +188 -0
- package/dist/core/animate-ui/components/animate/tooltip.js +39 -0
- package/dist/core/animate-ui/components/base/preview-card.js +29 -0
- package/dist/core/animate-ui/components/base/progress.js +32 -0
- package/dist/core/animate-ui/components/base/radio.js +24 -0
- package/dist/core/animate-ui/components/buttons/copy.js +95 -0
- package/dist/core/animate-ui/components/radix/accordion.js +36 -0
- package/dist/core/animate-ui/components/radix/dialog.js +60 -0
- package/dist/core/animate-ui/components/radix/dropdown-menu.js +129 -0
- package/dist/core/animate-ui/components/radix/sheet.js +110 -0
- package/dist/core/animate-ui/components/radix/sidebar.js +416 -0
- package/dist/core/animate-ui/components/radix/switch.js +34 -0
- package/dist/core/animate-ui/components/radix/toggle-group.js +115 -0
- package/dist/core/animate-ui/components/radix/toggle.js +24 -0
- package/dist/core/animate-ui/primitives/animate/code-block.js +131 -0
- package/dist/core/animate-ui/primitives/animate/escape-html.js +7 -0
- package/dist/core/animate-ui/primitives/animate/shiki-highlighter.js +64 -0
- package/dist/core/animate-ui/primitives/animate/slot.js +39 -0
- package/dist/core/animate-ui/primitives/animate/tabs.js +202 -0
- package/dist/core/animate-ui/primitives/animate/tooltip.js +351 -0
- package/dist/core/animate-ui/primitives/base/preview-card.js +107 -0
- package/dist/core/animate-ui/primitives/base/progress.js +60 -0
- package/dist/core/animate-ui/primitives/base/radio.js +83 -0
- package/dist/core/animate-ui/primitives/buttons/button.js +16 -0
- package/dist/core/animate-ui/primitives/effects/highlight.js +407 -0
- package/dist/core/animate-ui/primitives/radix/accordion.js +76 -0
- package/dist/core/animate-ui/primitives/radix/dialog.js +136 -0
- package/dist/core/animate-ui/primitives/radix/dropdown-menu.js +305 -0
- package/dist/core/animate-ui/primitives/radix/sheet.js +165 -0
- package/dist/core/animate-ui/primitives/radix/switch.js +86 -0
- package/dist/core/animate-ui/primitives/radix/toggle-group.js +100 -0
- package/dist/core/animate-ui/primitives/texts/counting-number.js +75 -0
- package/dist/core/avatar.js +32 -0
- package/dist/core/badge.js +27 -0
- package/dist/core/breadcrumb.js +62 -0
- package/dist/core/button/button.js +43 -0
- package/dist/core/button/craft-button.js +78 -0
- package/dist/core/button-group.js +38 -0
- package/dist/core/button.js +40 -0
- package/dist/core/card.js +42 -0
- package/dist/core/carousel/carousel.js +149 -0
- package/dist/core/checkbox/motion-checkbox.js +103 -0
- package/dist/core/collapsible.js +54 -0
- package/dist/core/combobox/combobox.js +85 -0
- package/dist/core/command.js +61 -0
- package/dist/core/field-end-icons.js +36 -0
- package/dist/core/field-label-row.js +33 -0
- package/dist/core/form.js +92 -0
- package/dist/core/hooks/use-controlled-state.js +27 -0
- package/dist/core/hooks/use-data-state.js +39 -0
- package/dist/core/hooks/use-is-in-view.js +18 -0
- package/dist/core/hooks/use-mobile.js +19 -0
- package/dist/core/hooks/use-reveal-on-scroll-up.js +141 -0
- package/dist/core/hooks/use-scroll-overflow.js +50 -0
- package/dist/core/index.js +18 -52
- package/dist/core/input/input-password.js +30 -0
- package/dist/core/input/input.js +147 -0
- package/dist/core/input-otp/input-otp.js +183 -0
- package/dist/core/label.js +15 -0
- package/dist/core/popover.js +31 -0
- package/dist/core/scroll-area.js +42 -0
- package/dist/core/select.js +121 -0
- package/dist/core/separator.js +40 -0
- package/dist/core/skeleton.js +11 -0
- package/dist/core/table.js +59 -0
- package/dist/core/textarea/textarea.js +97 -0
- package/dist/core/utils/get-strict-context.js +18 -0
- package/dist/index.js +148 -9
- package/dist/layouts/entry-layout/entry-layout-bg.js +4 -0
- package/dist/layouts/entry-layout/entry-layout.js +52 -0
- package/dist/layouts/index.js +7 -6
- package/dist/layouts/workspace-layout/account-menu/account-menu.js +108 -0
- package/dist/layouts/workspace-layout/breadcrumbs/derive-breadcrumbs.js +37 -0
- package/dist/layouts/workspace-layout/breadcrumbs/workspace-breadcrumbs.js +22 -0
- package/dist/layouts/workspace-layout/footer/footer.js +15 -0
- package/dist/layouts/workspace-layout/header/header.js +54 -0
- package/dist/layouts/workspace-layout/workspace-layout.js +157 -0
- package/dist/tailwind-preset.js +3 -4
- package/dist/utils/cn.js +8 -0
- package/dist/utils/color.js +72 -0
- package/dist/utils/index.js +3 -2
- package/dist/utils/path-match.js +17 -0
- package/dist/utils/silver-shine.js +63 -0
- package/dist/utils/variant-gradient-underlay.js +45 -0
- package/dist/utils/variant.js +426 -0
- package/package.json +7 -4
- package/dist/chunk-2GDYZAKR.js +0 -505
- package/dist/chunk-ALCWXFUC.js +0 -733
- package/dist/chunk-CDHBLANU.js +0 -59
- package/dist/chunk-LUESSJAF.js +0 -70068
- package/dist/chunk-TMORRNEB.js +0 -323
- package/dist/chunk-TRTQSARU.js +0 -31
- package/dist/chunk-VU4CZ76T.js +0 -43
- package/dist/chunk-XNLCVHBC.js +0 -364
- package/dist/chunk-Z4776NRY.js +0 -4347
- package/src/assets/illustrations/add-to-group.svg +0 -32
- package/src/assets/illustrations/chip.svg +0 -51
- package/src/assets/illustrations/create-new-group.svg +0 -27
- package/src/assets/illustrations/new-ota.svg +0 -61
- package/src/assets/illustrations/secured-key.svg +0 -48
- /package/dist/assets/{entry-layout-bg-JPI7GJ42.webp → entry-layout-bg-DUM0UhT3.webp} +0 -0
package/dist/chunk-Z4776NRY.js
DELETED
|
@@ -1,4347 +0,0 @@
|
|
|
1
|
-
import { getStrictContext, Button, Avatar, AvatarImage, AvatarFallback, AvatarBadge, useControlledState, useIsMobile, Separator, Skeleton, useDataState, Collapsible, CollapsibleTrigger, CollapsibleContent } from './chunk-XNLCVHBC.js';
|
|
2
|
-
import { cn, resolveColor, isPresetColor } from './chunk-VU4CZ76T.js';
|
|
3
|
-
import { LoaderCircle, EyeOffIcon, EyeIcon, User, CheckIcon, CircleIcon, ChevronRightIcon, ArrowUpRightIcon, ZapIcon, CopyIcon, XIcon, PanelLeftIcon, X, ChevronDown, CircleDot, Circle, ChevronRight } from 'lucide-react';
|
|
4
|
-
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
5
|
-
import * as React from 'react';
|
|
6
|
-
import React__default, { useState, useMemo, useEffect, useRef } from 'react';
|
|
7
|
-
import { Slot as Slot$2, DropdownMenu as DropdownMenu$1, Dialog } from 'radix-ui';
|
|
8
|
-
import { motion, LayoutGroup, AnimatePresence, isMotionComponent, useAnimate, useInView } from 'motion/react';
|
|
9
|
-
import * as motion5 from 'motion/react-client';
|
|
10
|
-
import { FloatingArrow, useFloating, autoUpdate, offset, flip, shift, arrow, FloatingPortal } from '@floating-ui/react';
|
|
11
|
-
import { motion as motion$1 } from 'framer-motion';
|
|
12
|
-
import { Slot as Slot$1 } from '@radix-ui/react-slot';
|
|
13
|
-
import { cva } from 'class-variance-authority';
|
|
14
|
-
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
15
|
-
|
|
16
|
-
var sizeClasses = {
|
|
17
|
-
sm: "h-5 w-5 text-[10px]",
|
|
18
|
-
default: "h-7 w-7 text-xs",
|
|
19
|
-
lg: "h-10 w-10 text-sm"
|
|
20
|
-
};
|
|
21
|
-
function Avatar2({
|
|
22
|
-
name,
|
|
23
|
-
imageUrl,
|
|
24
|
-
size = "default",
|
|
25
|
-
className,
|
|
26
|
-
badgeColor,
|
|
27
|
-
badgeIcon
|
|
28
|
-
}) {
|
|
29
|
-
const displayInitial = name ? name.charAt(0).toUpperCase() : null;
|
|
30
|
-
const showIconBadge = badgeIcon != null && badgeIcon !== false;
|
|
31
|
-
const colorResolved = !showIconBadge && badgeColor != null ? resolveColor(badgeColor, "bg") : void 0;
|
|
32
|
-
const hasBadge = showIconBadge || Boolean(colorResolved);
|
|
33
|
-
const avatar = /* @__PURE__ */ jsxs(Avatar, { className: cn(sizeClasses[size], className), children: [
|
|
34
|
-
imageUrl && /* @__PURE__ */ jsx(AvatarImage, { src: imageUrl, alt: name ?? "User avatar" }),
|
|
35
|
-
/* @__PURE__ */ jsx(
|
|
36
|
-
AvatarFallback,
|
|
37
|
-
{
|
|
38
|
-
className: cn(
|
|
39
|
-
"bg-primary text-primary-foreground font-medium",
|
|
40
|
-
sizeClasses[size],
|
|
41
|
-
className
|
|
42
|
-
),
|
|
43
|
-
children: displayInitial ?? /* @__PURE__ */ jsx(User, { className: "h-3/5 w-3/5" })
|
|
44
|
-
}
|
|
45
|
-
)
|
|
46
|
-
] });
|
|
47
|
-
if (!hasBadge) {
|
|
48
|
-
return avatar;
|
|
49
|
-
}
|
|
50
|
-
return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex shrink-0", children: [
|
|
51
|
-
avatar,
|
|
52
|
-
showIconBadge ? /* @__PURE__ */ jsx(AvatarBadge, { variant: "icon", children: badgeIcon }) : colorResolved ? /* @__PURE__ */ jsx(
|
|
53
|
-
AvatarBadge,
|
|
54
|
-
{
|
|
55
|
-
variant: "dot",
|
|
56
|
-
className: cn(colorResolved.className),
|
|
57
|
-
style: colorResolved.style
|
|
58
|
-
}
|
|
59
|
-
) : null
|
|
60
|
-
] });
|
|
61
|
-
}
|
|
62
|
-
var DEFAULT_BOUNDS_OFFSET = {
|
|
63
|
-
top: 0,
|
|
64
|
-
left: 0,
|
|
65
|
-
width: 0,
|
|
66
|
-
height: 0
|
|
67
|
-
};
|
|
68
|
-
var HighlightContext = React.createContext(void 0);
|
|
69
|
-
function useHighlight() {
|
|
70
|
-
const context = React.useContext(HighlightContext);
|
|
71
|
-
if (!context) {
|
|
72
|
-
throw new Error("useHighlight must be used within a HighlightProvider");
|
|
73
|
-
}
|
|
74
|
-
return context;
|
|
75
|
-
}
|
|
76
|
-
function Highlight({
|
|
77
|
-
ref,
|
|
78
|
-
...props
|
|
79
|
-
}) {
|
|
80
|
-
const {
|
|
81
|
-
as: Component = "div",
|
|
82
|
-
children,
|
|
83
|
-
value,
|
|
84
|
-
defaultValue,
|
|
85
|
-
onValueChange,
|
|
86
|
-
className,
|
|
87
|
-
style,
|
|
88
|
-
transition = { type: "spring", stiffness: 350, damping: 35 },
|
|
89
|
-
hover = false,
|
|
90
|
-
click = true,
|
|
91
|
-
enabled = true,
|
|
92
|
-
controlledItems,
|
|
93
|
-
disabled = false,
|
|
94
|
-
exitDelay = 200,
|
|
95
|
-
mode = "children"
|
|
96
|
-
} = props;
|
|
97
|
-
const localRef = React.useRef(null);
|
|
98
|
-
React.useImperativeHandle(ref, () => localRef.current);
|
|
99
|
-
const parentProps = props;
|
|
100
|
-
const propsBoundsOffset = parentProps?.boundsOffset;
|
|
101
|
-
const boundsOffset = propsBoundsOffset ?? DEFAULT_BOUNDS_OFFSET;
|
|
102
|
-
const boundsOffsetTop = boundsOffset.top ?? 0;
|
|
103
|
-
const boundsOffsetLeft = boundsOffset.left ?? 0;
|
|
104
|
-
const boundsOffsetWidth = boundsOffset.width ?? 0;
|
|
105
|
-
const boundsOffsetHeight = boundsOffset.height ?? 0;
|
|
106
|
-
const variant = parentProps?.variant;
|
|
107
|
-
const lineHeight = parentProps?.lineHeight ?? 2;
|
|
108
|
-
const boundsOffsetRef = React.useRef({
|
|
109
|
-
top: boundsOffsetTop,
|
|
110
|
-
left: boundsOffsetLeft,
|
|
111
|
-
width: boundsOffsetWidth,
|
|
112
|
-
height: boundsOffsetHeight,
|
|
113
|
-
variant,
|
|
114
|
-
lineHeight
|
|
115
|
-
});
|
|
116
|
-
React.useEffect(() => {
|
|
117
|
-
boundsOffsetRef.current = {
|
|
118
|
-
top: boundsOffsetTop,
|
|
119
|
-
left: boundsOffsetLeft,
|
|
120
|
-
width: boundsOffsetWidth,
|
|
121
|
-
height: boundsOffsetHeight,
|
|
122
|
-
variant,
|
|
123
|
-
lineHeight
|
|
124
|
-
};
|
|
125
|
-
}, [
|
|
126
|
-
boundsOffsetTop,
|
|
127
|
-
boundsOffsetLeft,
|
|
128
|
-
boundsOffsetWidth,
|
|
129
|
-
boundsOffsetHeight,
|
|
130
|
-
variant,
|
|
131
|
-
lineHeight
|
|
132
|
-
]);
|
|
133
|
-
const [activeValue, setActiveValue] = React.useState(
|
|
134
|
-
value ?? defaultValue ?? null
|
|
135
|
-
);
|
|
136
|
-
const [boundsState, setBoundsState] = React.useState(
|
|
137
|
-
null
|
|
138
|
-
);
|
|
139
|
-
const [activeClassNameState, setActiveClassNameState] = React.useState("");
|
|
140
|
-
const safeSetActiveValue = (id2) => {
|
|
141
|
-
setActiveValue((prev) => {
|
|
142
|
-
if (prev !== id2) {
|
|
143
|
-
onValueChange?.(id2);
|
|
144
|
-
return id2;
|
|
145
|
-
}
|
|
146
|
-
return prev;
|
|
147
|
-
});
|
|
148
|
-
};
|
|
149
|
-
const safeSetBoundsRef = React.useRef(void 0);
|
|
150
|
-
React.useEffect(() => {
|
|
151
|
-
safeSetBoundsRef.current = (bounds, opts) => {
|
|
152
|
-
if (!localRef.current) return;
|
|
153
|
-
const container = localRef.current;
|
|
154
|
-
const containerRect = container.getBoundingClientRect();
|
|
155
|
-
const offset = boundsOffsetRef.current;
|
|
156
|
-
const relativeTop = bounds.top - containerRect.top + container.scrollTop;
|
|
157
|
-
const relativeLeft = bounds.left - containerRect.left + container.scrollLeft;
|
|
158
|
-
const isLineVariant = offset.variant === "line" && offset.lineHeight != null;
|
|
159
|
-
const newBounds = isLineVariant ? {
|
|
160
|
-
top: relativeTop + bounds.height - offset.lineHeight + (offset.top ?? 0),
|
|
161
|
-
left: relativeLeft + (offset.left ?? 0),
|
|
162
|
-
width: bounds.width + (offset.width ?? 0),
|
|
163
|
-
height: offset.lineHeight
|
|
164
|
-
} : {
|
|
165
|
-
top: relativeTop + offset.top,
|
|
166
|
-
left: relativeLeft + offset.left,
|
|
167
|
-
width: bounds.width + offset.width,
|
|
168
|
-
height: bounds.height + offset.height
|
|
169
|
-
};
|
|
170
|
-
setBoundsState((prev) => {
|
|
171
|
-
if (prev && prev.top === newBounds.top && prev.left === newBounds.left && prev.width === newBounds.width && prev.height === newBounds.height) {
|
|
172
|
-
return prev;
|
|
173
|
-
}
|
|
174
|
-
return {
|
|
175
|
-
...newBounds,
|
|
176
|
-
instant: prev ? opts?.instant ?? false : false
|
|
177
|
-
};
|
|
178
|
-
});
|
|
179
|
-
};
|
|
180
|
-
});
|
|
181
|
-
const safeSetBounds = (bounds, opts) => {
|
|
182
|
-
safeSetBoundsRef.current?.(bounds, opts);
|
|
183
|
-
};
|
|
184
|
-
const clearBounds = React.useCallback(() => {
|
|
185
|
-
setBoundsState((prev) => prev === null ? prev : null);
|
|
186
|
-
}, []);
|
|
187
|
-
React.useEffect(() => {
|
|
188
|
-
if (value !== void 0) setActiveValue(value);
|
|
189
|
-
else if (defaultValue !== void 0) setActiveValue(defaultValue);
|
|
190
|
-
}, [value, defaultValue]);
|
|
191
|
-
const id = React.useId();
|
|
192
|
-
const getActiveElement = React.useCallback(() => {
|
|
193
|
-
const container = localRef.current;
|
|
194
|
-
if (mode !== "parent" || !activeValue || !container) return null;
|
|
195
|
-
return container.querySelector(
|
|
196
|
-
`[data-value="${activeValue}"][data-highlight="true"]`
|
|
197
|
-
);
|
|
198
|
-
}, [mode, activeValue]);
|
|
199
|
-
const measureActiveRef = React.useRef(void 0);
|
|
200
|
-
React.useEffect(() => {
|
|
201
|
-
measureActiveRef.current = (opts) => {
|
|
202
|
-
const activeEl = getActiveElement();
|
|
203
|
-
if (activeEl)
|
|
204
|
-
safeSetBoundsRef.current?.(activeEl.getBoundingClientRect(), opts);
|
|
205
|
-
};
|
|
206
|
-
});
|
|
207
|
-
React.useEffect(() => {
|
|
208
|
-
if (mode !== "parent") return;
|
|
209
|
-
const container = localRef.current;
|
|
210
|
-
if (!container) return;
|
|
211
|
-
const onScroll = () => measureActiveRef.current?.();
|
|
212
|
-
container.addEventListener("scroll", onScroll, { passive: true });
|
|
213
|
-
return () => container.removeEventListener("scroll", onScroll);
|
|
214
|
-
}, [mode]);
|
|
215
|
-
React.useEffect(() => {
|
|
216
|
-
if (mode !== "parent") return;
|
|
217
|
-
const container = localRef.current;
|
|
218
|
-
if (!container || typeof ResizeObserver === "undefined") return;
|
|
219
|
-
const observer = new ResizeObserver(
|
|
220
|
-
() => measureActiveRef.current?.({ instant: true })
|
|
221
|
-
);
|
|
222
|
-
observer.observe(container);
|
|
223
|
-
const activeEl = getActiveElement();
|
|
224
|
-
if (activeEl) observer.observe(activeEl);
|
|
225
|
-
return () => observer.disconnect();
|
|
226
|
-
}, [mode, getActiveElement]);
|
|
227
|
-
React.useLayoutEffect(() => {
|
|
228
|
-
if (mode !== "parent" || !activeValue) return;
|
|
229
|
-
const raf = requestAnimationFrame(() => measureActiveRef.current?.());
|
|
230
|
-
return () => cancelAnimationFrame(raf);
|
|
231
|
-
}, [mode, activeValue]);
|
|
232
|
-
const render = (children2) => {
|
|
233
|
-
if (mode === "parent") {
|
|
234
|
-
return /* @__PURE__ */ jsxs(
|
|
235
|
-
Component,
|
|
236
|
-
{
|
|
237
|
-
ref: localRef,
|
|
238
|
-
"data-slot": "motion-highlight-container",
|
|
239
|
-
style: { position: "relative", zIndex: 1 },
|
|
240
|
-
className: props?.containerClassName,
|
|
241
|
-
children: [
|
|
242
|
-
/* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: boundsState && /* @__PURE__ */ jsx(
|
|
243
|
-
motion.div,
|
|
244
|
-
{
|
|
245
|
-
"data-slot": "motion-highlight",
|
|
246
|
-
animate: {
|
|
247
|
-
top: boundsState.top,
|
|
248
|
-
left: boundsState.left,
|
|
249
|
-
width: boundsState.width,
|
|
250
|
-
height: boundsState.height,
|
|
251
|
-
opacity: 1
|
|
252
|
-
},
|
|
253
|
-
initial: {
|
|
254
|
-
top: boundsState.top,
|
|
255
|
-
left: boundsState.left,
|
|
256
|
-
width: boundsState.width,
|
|
257
|
-
height: boundsState.height,
|
|
258
|
-
opacity: 0
|
|
259
|
-
},
|
|
260
|
-
exit: {
|
|
261
|
-
opacity: 0,
|
|
262
|
-
transition: {
|
|
263
|
-
...transition,
|
|
264
|
-
delay: (transition?.delay ?? 0) + (exitDelay ?? 0) / 1e3
|
|
265
|
-
}
|
|
266
|
-
},
|
|
267
|
-
transition: boundsState.instant ? { duration: 0 } : transition,
|
|
268
|
-
style: { position: "absolute", zIndex: 0, ...style },
|
|
269
|
-
className: cn(className, activeClassNameState)
|
|
270
|
-
}
|
|
271
|
-
) }),
|
|
272
|
-
children2
|
|
273
|
-
]
|
|
274
|
-
}
|
|
275
|
-
);
|
|
276
|
-
}
|
|
277
|
-
return children2;
|
|
278
|
-
};
|
|
279
|
-
return /* @__PURE__ */ jsx(
|
|
280
|
-
HighlightContext.Provider,
|
|
281
|
-
{
|
|
282
|
-
value: {
|
|
283
|
-
mode,
|
|
284
|
-
activeValue,
|
|
285
|
-
setActiveValue: safeSetActiveValue,
|
|
286
|
-
id,
|
|
287
|
-
hover,
|
|
288
|
-
click,
|
|
289
|
-
className,
|
|
290
|
-
style,
|
|
291
|
-
transition,
|
|
292
|
-
disabled,
|
|
293
|
-
enabled,
|
|
294
|
-
exitDelay,
|
|
295
|
-
setBounds: safeSetBounds,
|
|
296
|
-
clearBounds,
|
|
297
|
-
activeClassName: activeClassNameState,
|
|
298
|
-
setActiveClassName: setActiveClassNameState,
|
|
299
|
-
forceUpdateBounds: props?.forceUpdateBounds
|
|
300
|
-
},
|
|
301
|
-
children: enabled ? controlledItems ? render(children) : render(
|
|
302
|
-
React.Children.map(children, (child, index) => /* @__PURE__ */ jsx(HighlightItem, { className: props?.itemsClassName, children: child }, index))
|
|
303
|
-
) : children
|
|
304
|
-
}
|
|
305
|
-
);
|
|
306
|
-
}
|
|
307
|
-
function getNonOverridingDataAttributes(element, dataAttributes) {
|
|
308
|
-
return Object.keys(dataAttributes).reduce(
|
|
309
|
-
(acc, key) => {
|
|
310
|
-
if (element.props[key] === void 0) {
|
|
311
|
-
acc[key] = dataAttributes[key];
|
|
312
|
-
}
|
|
313
|
-
return acc;
|
|
314
|
-
},
|
|
315
|
-
{}
|
|
316
|
-
);
|
|
317
|
-
}
|
|
318
|
-
function HighlightItem({
|
|
319
|
-
ref,
|
|
320
|
-
as,
|
|
321
|
-
children,
|
|
322
|
-
id,
|
|
323
|
-
value,
|
|
324
|
-
className,
|
|
325
|
-
style,
|
|
326
|
-
transition,
|
|
327
|
-
disabled = false,
|
|
328
|
-
activeClassName,
|
|
329
|
-
exitDelay,
|
|
330
|
-
asChild = false,
|
|
331
|
-
forceUpdateBounds,
|
|
332
|
-
...props
|
|
333
|
-
}) {
|
|
334
|
-
const itemId = React.useId();
|
|
335
|
-
const {
|
|
336
|
-
activeValue,
|
|
337
|
-
setActiveValue,
|
|
338
|
-
mode,
|
|
339
|
-
setBounds,
|
|
340
|
-
clearBounds,
|
|
341
|
-
hover,
|
|
342
|
-
click,
|
|
343
|
-
enabled,
|
|
344
|
-
className: contextClassName,
|
|
345
|
-
style: contextStyle,
|
|
346
|
-
transition: contextTransition,
|
|
347
|
-
id: contextId,
|
|
348
|
-
disabled: contextDisabled,
|
|
349
|
-
exitDelay: contextExitDelay,
|
|
350
|
-
forceUpdateBounds: contextForceUpdateBounds,
|
|
351
|
-
setActiveClassName
|
|
352
|
-
} = useHighlight();
|
|
353
|
-
const Component = as ?? "div";
|
|
354
|
-
const element = children;
|
|
355
|
-
const childValue = id ?? value ?? element.props?.["data-value"] ?? element.props?.id ?? itemId;
|
|
356
|
-
const isActive = activeValue === childValue;
|
|
357
|
-
const isDisabled = disabled === void 0 ? contextDisabled : disabled;
|
|
358
|
-
const itemTransition = transition ?? contextTransition;
|
|
359
|
-
const localRef = React.useRef(null);
|
|
360
|
-
React.useImperativeHandle(ref, () => localRef.current);
|
|
361
|
-
const refCallback = React.useCallback((node) => {
|
|
362
|
-
localRef.current = node;
|
|
363
|
-
}, []);
|
|
364
|
-
React.useEffect(() => {
|
|
365
|
-
if (mode !== "parent") return;
|
|
366
|
-
let rafId;
|
|
367
|
-
let previousBounds = null;
|
|
368
|
-
const shouldUpdateBounds = forceUpdateBounds === true || contextForceUpdateBounds && forceUpdateBounds !== false;
|
|
369
|
-
const updateBounds = () => {
|
|
370
|
-
if (!localRef.current) return;
|
|
371
|
-
const bounds = localRef.current.getBoundingClientRect();
|
|
372
|
-
if (shouldUpdateBounds) {
|
|
373
|
-
if (previousBounds && previousBounds.top === bounds.top && previousBounds.left === bounds.left && previousBounds.width === bounds.width && previousBounds.height === bounds.height) {
|
|
374
|
-
rafId = requestAnimationFrame(updateBounds);
|
|
375
|
-
return;
|
|
376
|
-
}
|
|
377
|
-
previousBounds = bounds;
|
|
378
|
-
rafId = requestAnimationFrame(updateBounds);
|
|
379
|
-
}
|
|
380
|
-
setBounds(bounds);
|
|
381
|
-
};
|
|
382
|
-
if (isActive) {
|
|
383
|
-
updateBounds();
|
|
384
|
-
setActiveClassName(activeClassName ?? "");
|
|
385
|
-
} else if (!activeValue) clearBounds();
|
|
386
|
-
if (shouldUpdateBounds) return () => cancelAnimationFrame(rafId);
|
|
387
|
-
}, [
|
|
388
|
-
mode,
|
|
389
|
-
isActive,
|
|
390
|
-
activeValue,
|
|
391
|
-
setBounds,
|
|
392
|
-
clearBounds,
|
|
393
|
-
activeClassName,
|
|
394
|
-
setActiveClassName,
|
|
395
|
-
forceUpdateBounds,
|
|
396
|
-
contextForceUpdateBounds
|
|
397
|
-
]);
|
|
398
|
-
if (!React.isValidElement(children)) return children;
|
|
399
|
-
const dataAttributes = {
|
|
400
|
-
"data-active": isActive ? "true" : "false",
|
|
401
|
-
"aria-selected": isActive,
|
|
402
|
-
"data-disabled": isDisabled,
|
|
403
|
-
"data-value": childValue,
|
|
404
|
-
"data-highlight": true
|
|
405
|
-
};
|
|
406
|
-
const incomingHandlers = props;
|
|
407
|
-
const commonHandlers = hover ? {
|
|
408
|
-
onMouseEnter: (e) => {
|
|
409
|
-
setActiveValue(childValue);
|
|
410
|
-
element.props.onMouseEnter?.(e);
|
|
411
|
-
incomingHandlers.onMouseEnter?.(e);
|
|
412
|
-
},
|
|
413
|
-
onMouseLeave: (e) => {
|
|
414
|
-
setActiveValue(null);
|
|
415
|
-
element.props.onMouseLeave?.(e);
|
|
416
|
-
incomingHandlers.onMouseLeave?.(e);
|
|
417
|
-
}
|
|
418
|
-
} : click ? {
|
|
419
|
-
onClick: (e) => {
|
|
420
|
-
setActiveValue(childValue);
|
|
421
|
-
element.props.onClick?.(e);
|
|
422
|
-
incomingHandlers.onClick?.(e);
|
|
423
|
-
}
|
|
424
|
-
} : {};
|
|
425
|
-
if (asChild) {
|
|
426
|
-
if (mode === "children") {
|
|
427
|
-
return React.cloneElement(
|
|
428
|
-
element,
|
|
429
|
-
{
|
|
430
|
-
key: childValue,
|
|
431
|
-
ref: refCallback,
|
|
432
|
-
className: cn("relative", element.props.className),
|
|
433
|
-
...getNonOverridingDataAttributes(element, {
|
|
434
|
-
...dataAttributes,
|
|
435
|
-
"data-slot": "motion-highlight-item-container"
|
|
436
|
-
}),
|
|
437
|
-
...commonHandlers,
|
|
438
|
-
...props
|
|
439
|
-
},
|
|
440
|
-
/* @__PURE__ */ jsxs(Fragment, { children: [
|
|
441
|
-
/* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: isActive && !isDisabled && /* @__PURE__ */ jsx(
|
|
442
|
-
motion.div,
|
|
443
|
-
{
|
|
444
|
-
layoutId: `transition-background-${contextId}`,
|
|
445
|
-
"data-slot": "motion-highlight",
|
|
446
|
-
style: {
|
|
447
|
-
position: "absolute",
|
|
448
|
-
zIndex: 0,
|
|
449
|
-
...contextStyle,
|
|
450
|
-
...style
|
|
451
|
-
},
|
|
452
|
-
className: cn(contextClassName, activeClassName),
|
|
453
|
-
transition: itemTransition,
|
|
454
|
-
initial: { opacity: 0 },
|
|
455
|
-
animate: { opacity: 1 },
|
|
456
|
-
exit: {
|
|
457
|
-
opacity: 0,
|
|
458
|
-
transition: {
|
|
459
|
-
...itemTransition,
|
|
460
|
-
delay: (itemTransition?.delay ?? 0) + (exitDelay ?? contextExitDelay ?? 0) / 1e3
|
|
461
|
-
}
|
|
462
|
-
},
|
|
463
|
-
...dataAttributes
|
|
464
|
-
}
|
|
465
|
-
) }),
|
|
466
|
-
/* @__PURE__ */ jsx(
|
|
467
|
-
Component,
|
|
468
|
-
{
|
|
469
|
-
"data-slot": "motion-highlight-item",
|
|
470
|
-
style: { position: "relative", zIndex: 1 },
|
|
471
|
-
className,
|
|
472
|
-
...dataAttributes,
|
|
473
|
-
children
|
|
474
|
-
}
|
|
475
|
-
)
|
|
476
|
-
] })
|
|
477
|
-
);
|
|
478
|
-
}
|
|
479
|
-
return React.cloneElement(element, {
|
|
480
|
-
ref: refCallback,
|
|
481
|
-
...getNonOverridingDataAttributes(element, {
|
|
482
|
-
...dataAttributes,
|
|
483
|
-
"data-slot": "motion-highlight-item"
|
|
484
|
-
}),
|
|
485
|
-
...commonHandlers
|
|
486
|
-
});
|
|
487
|
-
}
|
|
488
|
-
return enabled ? /* @__PURE__ */ jsxs(
|
|
489
|
-
Component,
|
|
490
|
-
{
|
|
491
|
-
ref: localRef,
|
|
492
|
-
"data-slot": "motion-highlight-item-container",
|
|
493
|
-
className: cn(mode === "children" && "relative", className),
|
|
494
|
-
...dataAttributes,
|
|
495
|
-
...props,
|
|
496
|
-
...commonHandlers,
|
|
497
|
-
children: [
|
|
498
|
-
mode === "children" && /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: isActive && !isDisabled && /* @__PURE__ */ jsx(
|
|
499
|
-
motion.div,
|
|
500
|
-
{
|
|
501
|
-
layoutId: `transition-background-${contextId}`,
|
|
502
|
-
"data-slot": "motion-highlight",
|
|
503
|
-
style: {
|
|
504
|
-
position: "absolute",
|
|
505
|
-
zIndex: 0,
|
|
506
|
-
...contextStyle,
|
|
507
|
-
...style
|
|
508
|
-
},
|
|
509
|
-
className: cn(contextClassName, activeClassName),
|
|
510
|
-
transition: itemTransition,
|
|
511
|
-
initial: { opacity: 0 },
|
|
512
|
-
animate: { opacity: 1 },
|
|
513
|
-
exit: {
|
|
514
|
-
opacity: 0,
|
|
515
|
-
transition: {
|
|
516
|
-
...itemTransition,
|
|
517
|
-
delay: (itemTransition?.delay ?? 0) + (exitDelay ?? contextExitDelay ?? 0) / 1e3
|
|
518
|
-
}
|
|
519
|
-
},
|
|
520
|
-
...dataAttributes
|
|
521
|
-
}
|
|
522
|
-
) }),
|
|
523
|
-
React.cloneElement(element, {
|
|
524
|
-
style: { position: "relative", zIndex: 1 },
|
|
525
|
-
className: element.props.className,
|
|
526
|
-
...getNonOverridingDataAttributes(element, {
|
|
527
|
-
...dataAttributes,
|
|
528
|
-
"data-slot": "motion-highlight-item"
|
|
529
|
-
})
|
|
530
|
-
})
|
|
531
|
-
]
|
|
532
|
-
},
|
|
533
|
-
childValue
|
|
534
|
-
) : children;
|
|
535
|
-
}
|
|
536
|
-
var [DropdownMenuProvider, useDropdownMenu] = getStrictContext("DropdownMenuContext");
|
|
537
|
-
var [DropdownMenuSubProvider, useDropdownMenuSub] = getStrictContext("DropdownMenuSubContext");
|
|
538
|
-
function DropdownMenu(props) {
|
|
539
|
-
const [isOpen, setIsOpen] = useControlledState({
|
|
540
|
-
value: props?.open,
|
|
541
|
-
defaultValue: props?.defaultOpen,
|
|
542
|
-
onChange: props?.onOpenChange
|
|
543
|
-
});
|
|
544
|
-
const [highlightedValue, setHighlightedValue] = React.useState(
|
|
545
|
-
null
|
|
546
|
-
);
|
|
547
|
-
return /* @__PURE__ */ jsx(
|
|
548
|
-
DropdownMenuProvider,
|
|
549
|
-
{
|
|
550
|
-
value: { isOpen, setIsOpen, highlightedValue, setHighlightedValue },
|
|
551
|
-
children: /* @__PURE__ */ jsx(
|
|
552
|
-
DropdownMenu$1.Root,
|
|
553
|
-
{
|
|
554
|
-
"data-slot": "dropdown-menu",
|
|
555
|
-
...props,
|
|
556
|
-
onOpenChange: setIsOpen
|
|
557
|
-
}
|
|
558
|
-
)
|
|
559
|
-
}
|
|
560
|
-
);
|
|
561
|
-
}
|
|
562
|
-
function DropdownMenuTrigger(props) {
|
|
563
|
-
return /* @__PURE__ */ jsx(
|
|
564
|
-
DropdownMenu$1.Trigger,
|
|
565
|
-
{
|
|
566
|
-
"data-slot": "dropdown-menu-trigger",
|
|
567
|
-
...props
|
|
568
|
-
}
|
|
569
|
-
);
|
|
570
|
-
}
|
|
571
|
-
function DropdownMenuPortal(props) {
|
|
572
|
-
return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { "data-slot": "dropdown-menu-portal", ...props });
|
|
573
|
-
}
|
|
574
|
-
function DropdownMenuGroup(props) {
|
|
575
|
-
return /* @__PURE__ */ jsx(DropdownMenu$1.Group, { "data-slot": "dropdown-menu-group", ...props });
|
|
576
|
-
}
|
|
577
|
-
function DropdownMenuSub(props) {
|
|
578
|
-
const [isOpen, setIsOpen] = useControlledState({
|
|
579
|
-
value: props?.open,
|
|
580
|
-
defaultValue: props?.defaultOpen,
|
|
581
|
-
onChange: props?.onOpenChange
|
|
582
|
-
});
|
|
583
|
-
return /* @__PURE__ */ jsx(DropdownMenuSubProvider, { value: { isOpen, setIsOpen }, children: /* @__PURE__ */ jsx(
|
|
584
|
-
DropdownMenu$1.Sub,
|
|
585
|
-
{
|
|
586
|
-
"data-slot": "dropdown-menu-sub",
|
|
587
|
-
...props,
|
|
588
|
-
onOpenChange: setIsOpen
|
|
589
|
-
}
|
|
590
|
-
) });
|
|
591
|
-
}
|
|
592
|
-
function DropdownMenuRadioGroup(props) {
|
|
593
|
-
return /* @__PURE__ */ jsx(
|
|
594
|
-
DropdownMenu$1.RadioGroup,
|
|
595
|
-
{
|
|
596
|
-
"data-slot": "dropdown-menu-radio-group",
|
|
597
|
-
...props
|
|
598
|
-
}
|
|
599
|
-
);
|
|
600
|
-
}
|
|
601
|
-
function DropdownMenuSubTrigger({
|
|
602
|
-
disabled,
|
|
603
|
-
textValue,
|
|
604
|
-
...props
|
|
605
|
-
}) {
|
|
606
|
-
const { setHighlightedValue } = useDropdownMenu();
|
|
607
|
-
const [, highlightedRef] = useDataState(
|
|
608
|
-
"highlighted",
|
|
609
|
-
void 0,
|
|
610
|
-
(value) => {
|
|
611
|
-
if (value === true) {
|
|
612
|
-
const el = highlightedRef.current;
|
|
613
|
-
const v = el?.dataset.value || el?.id || null;
|
|
614
|
-
if (v) setHighlightedValue(v);
|
|
615
|
-
}
|
|
616
|
-
}
|
|
617
|
-
);
|
|
618
|
-
return /* @__PURE__ */ jsx(
|
|
619
|
-
DropdownMenu$1.SubTrigger,
|
|
620
|
-
{
|
|
621
|
-
ref: highlightedRef,
|
|
622
|
-
disabled,
|
|
623
|
-
textValue,
|
|
624
|
-
asChild: true,
|
|
625
|
-
children: /* @__PURE__ */ jsx(
|
|
626
|
-
motion.div,
|
|
627
|
-
{
|
|
628
|
-
"data-slot": "dropdown-menu-sub-trigger",
|
|
629
|
-
"data-disabled": disabled,
|
|
630
|
-
...props
|
|
631
|
-
}
|
|
632
|
-
)
|
|
633
|
-
}
|
|
634
|
-
);
|
|
635
|
-
}
|
|
636
|
-
function DropdownMenuSubContent({
|
|
637
|
-
loop,
|
|
638
|
-
onEscapeKeyDown,
|
|
639
|
-
onPointerDownOutside,
|
|
640
|
-
onFocusOutside,
|
|
641
|
-
onInteractOutside,
|
|
642
|
-
sideOffset,
|
|
643
|
-
alignOffset,
|
|
644
|
-
avoidCollisions,
|
|
645
|
-
collisionBoundary,
|
|
646
|
-
collisionPadding,
|
|
647
|
-
arrowPadding,
|
|
648
|
-
sticky,
|
|
649
|
-
hideWhenDetached,
|
|
650
|
-
transition = { duration: 0.2 },
|
|
651
|
-
style,
|
|
652
|
-
container,
|
|
653
|
-
...props
|
|
654
|
-
}) {
|
|
655
|
-
const { isOpen } = useDropdownMenuSub();
|
|
656
|
-
return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(DropdownMenuPortal, { forceMount: true, container, children: /* @__PURE__ */ jsx(
|
|
657
|
-
DropdownMenu$1.SubContent,
|
|
658
|
-
{
|
|
659
|
-
asChild: true,
|
|
660
|
-
forceMount: true,
|
|
661
|
-
loop,
|
|
662
|
-
onEscapeKeyDown,
|
|
663
|
-
onPointerDownOutside,
|
|
664
|
-
onFocusOutside,
|
|
665
|
-
onInteractOutside,
|
|
666
|
-
sideOffset,
|
|
667
|
-
alignOffset,
|
|
668
|
-
avoidCollisions,
|
|
669
|
-
collisionBoundary,
|
|
670
|
-
collisionPadding,
|
|
671
|
-
arrowPadding,
|
|
672
|
-
sticky,
|
|
673
|
-
hideWhenDetached,
|
|
674
|
-
children: /* @__PURE__ */ jsx(
|
|
675
|
-
motion.div,
|
|
676
|
-
{
|
|
677
|
-
"data-slot": "dropdown-menu-sub-content",
|
|
678
|
-
initial: { opacity: 0, scale: 0.95 },
|
|
679
|
-
animate: { opacity: 1, scale: 1 },
|
|
680
|
-
exit: { opacity: 0, scale: 0.95 },
|
|
681
|
-
transition,
|
|
682
|
-
style: { willChange: "opacity, transform", ...style },
|
|
683
|
-
...props
|
|
684
|
-
},
|
|
685
|
-
"dropdown-menu-sub-content"
|
|
686
|
-
)
|
|
687
|
-
}
|
|
688
|
-
) }) });
|
|
689
|
-
}
|
|
690
|
-
function DropdownMenuHighlight({
|
|
691
|
-
transition = { type: "spring", stiffness: 350, damping: 35 },
|
|
692
|
-
...props
|
|
693
|
-
}) {
|
|
694
|
-
const { highlightedValue } = useDropdownMenu();
|
|
695
|
-
return /* @__PURE__ */ jsx(
|
|
696
|
-
Highlight,
|
|
697
|
-
{
|
|
698
|
-
"data-slot": "dropdown-menu-highlight",
|
|
699
|
-
click: false,
|
|
700
|
-
controlledItems: true,
|
|
701
|
-
transition,
|
|
702
|
-
value: highlightedValue,
|
|
703
|
-
...props
|
|
704
|
-
}
|
|
705
|
-
);
|
|
706
|
-
}
|
|
707
|
-
function DropdownMenuContent({
|
|
708
|
-
loop,
|
|
709
|
-
onCloseAutoFocus,
|
|
710
|
-
onEscapeKeyDown,
|
|
711
|
-
onPointerDownOutside,
|
|
712
|
-
onFocusOutside,
|
|
713
|
-
onInteractOutside,
|
|
714
|
-
side,
|
|
715
|
-
sideOffset,
|
|
716
|
-
align,
|
|
717
|
-
alignOffset,
|
|
718
|
-
avoidCollisions,
|
|
719
|
-
collisionBoundary,
|
|
720
|
-
collisionPadding,
|
|
721
|
-
arrowPadding,
|
|
722
|
-
sticky,
|
|
723
|
-
hideWhenDetached,
|
|
724
|
-
transition = { duration: 0.2 },
|
|
725
|
-
style,
|
|
726
|
-
container,
|
|
727
|
-
...props
|
|
728
|
-
}) {
|
|
729
|
-
const { isOpen } = useDropdownMenu();
|
|
730
|
-
return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(DropdownMenuPortal, { forceMount: true, container, children: /* @__PURE__ */ jsx(
|
|
731
|
-
DropdownMenu$1.Content,
|
|
732
|
-
{
|
|
733
|
-
asChild: true,
|
|
734
|
-
loop,
|
|
735
|
-
onCloseAutoFocus,
|
|
736
|
-
onEscapeKeyDown,
|
|
737
|
-
onPointerDownOutside,
|
|
738
|
-
onFocusOutside,
|
|
739
|
-
onInteractOutside,
|
|
740
|
-
side,
|
|
741
|
-
sideOffset,
|
|
742
|
-
align,
|
|
743
|
-
alignOffset,
|
|
744
|
-
avoidCollisions,
|
|
745
|
-
collisionBoundary,
|
|
746
|
-
collisionPadding,
|
|
747
|
-
arrowPadding,
|
|
748
|
-
sticky,
|
|
749
|
-
hideWhenDetached,
|
|
750
|
-
children: /* @__PURE__ */ jsx(
|
|
751
|
-
motion.div,
|
|
752
|
-
{
|
|
753
|
-
"data-slot": "dropdown-menu-content",
|
|
754
|
-
initial: { opacity: 0, scale: 0.95 },
|
|
755
|
-
animate: { opacity: 1, scale: 1 },
|
|
756
|
-
exit: { opacity: 0, scale: 0.95 },
|
|
757
|
-
transition,
|
|
758
|
-
style: { willChange: "opacity, transform", ...style },
|
|
759
|
-
...props
|
|
760
|
-
},
|
|
761
|
-
"dropdown-menu-content"
|
|
762
|
-
)
|
|
763
|
-
}
|
|
764
|
-
) }) });
|
|
765
|
-
}
|
|
766
|
-
function DropdownMenuHighlightItem(props) {
|
|
767
|
-
return /* @__PURE__ */ jsx(HighlightItem, { "data-slot": "dropdown-menu-highlight-item", ...props });
|
|
768
|
-
}
|
|
769
|
-
function DropdownMenuItem({
|
|
770
|
-
disabled,
|
|
771
|
-
onSelect,
|
|
772
|
-
textValue,
|
|
773
|
-
...props
|
|
774
|
-
}) {
|
|
775
|
-
const { setHighlightedValue } = useDropdownMenu();
|
|
776
|
-
const [, highlightedRef] = useDataState(
|
|
777
|
-
"highlighted",
|
|
778
|
-
void 0,
|
|
779
|
-
(value) => {
|
|
780
|
-
if (value === true) {
|
|
781
|
-
const el = highlightedRef.current;
|
|
782
|
-
const v = el?.dataset.value || el?.id || null;
|
|
783
|
-
if (v) setHighlightedValue(v);
|
|
784
|
-
}
|
|
785
|
-
}
|
|
786
|
-
);
|
|
787
|
-
return /* @__PURE__ */ jsx(
|
|
788
|
-
DropdownMenu$1.Item,
|
|
789
|
-
{
|
|
790
|
-
ref: highlightedRef,
|
|
791
|
-
disabled,
|
|
792
|
-
onSelect,
|
|
793
|
-
textValue,
|
|
794
|
-
asChild: true,
|
|
795
|
-
children: /* @__PURE__ */ jsx(
|
|
796
|
-
motion.div,
|
|
797
|
-
{
|
|
798
|
-
"data-slot": "dropdown-menu-item",
|
|
799
|
-
"data-disabled": disabled,
|
|
800
|
-
...props
|
|
801
|
-
}
|
|
802
|
-
)
|
|
803
|
-
}
|
|
804
|
-
);
|
|
805
|
-
}
|
|
806
|
-
function DropdownMenuCheckboxItem({
|
|
807
|
-
checked,
|
|
808
|
-
onCheckedChange,
|
|
809
|
-
disabled,
|
|
810
|
-
onSelect,
|
|
811
|
-
textValue,
|
|
812
|
-
...props
|
|
813
|
-
}) {
|
|
814
|
-
const { setHighlightedValue } = useDropdownMenu();
|
|
815
|
-
const [, highlightedRef] = useDataState(
|
|
816
|
-
"highlighted",
|
|
817
|
-
void 0,
|
|
818
|
-
(value) => {
|
|
819
|
-
if (value === true) {
|
|
820
|
-
const el = highlightedRef.current;
|
|
821
|
-
const v = el?.dataset.value || el?.id || null;
|
|
822
|
-
if (v) setHighlightedValue(v);
|
|
823
|
-
}
|
|
824
|
-
}
|
|
825
|
-
);
|
|
826
|
-
return /* @__PURE__ */ jsx(
|
|
827
|
-
DropdownMenu$1.CheckboxItem,
|
|
828
|
-
{
|
|
829
|
-
ref: highlightedRef,
|
|
830
|
-
checked,
|
|
831
|
-
onCheckedChange,
|
|
832
|
-
disabled,
|
|
833
|
-
onSelect,
|
|
834
|
-
textValue,
|
|
835
|
-
asChild: true,
|
|
836
|
-
children: /* @__PURE__ */ jsx(
|
|
837
|
-
motion.div,
|
|
838
|
-
{
|
|
839
|
-
"data-slot": "dropdown-menu-checkbox-item",
|
|
840
|
-
"data-disabled": disabled,
|
|
841
|
-
...props
|
|
842
|
-
}
|
|
843
|
-
)
|
|
844
|
-
}
|
|
845
|
-
);
|
|
846
|
-
}
|
|
847
|
-
function DropdownMenuRadioItem({
|
|
848
|
-
value,
|
|
849
|
-
disabled,
|
|
850
|
-
onSelect,
|
|
851
|
-
textValue,
|
|
852
|
-
...props
|
|
853
|
-
}) {
|
|
854
|
-
const { setHighlightedValue } = useDropdownMenu();
|
|
855
|
-
const [, highlightedRef] = useDataState(
|
|
856
|
-
"highlighted",
|
|
857
|
-
void 0,
|
|
858
|
-
(value2) => {
|
|
859
|
-
if (value2 === true) {
|
|
860
|
-
const el = highlightedRef.current;
|
|
861
|
-
const v = el?.dataset.value || el?.id || null;
|
|
862
|
-
if (v) setHighlightedValue(v);
|
|
863
|
-
}
|
|
864
|
-
}
|
|
865
|
-
);
|
|
866
|
-
return /* @__PURE__ */ jsx(
|
|
867
|
-
DropdownMenu$1.RadioItem,
|
|
868
|
-
{
|
|
869
|
-
ref: highlightedRef,
|
|
870
|
-
value,
|
|
871
|
-
disabled,
|
|
872
|
-
onSelect,
|
|
873
|
-
textValue,
|
|
874
|
-
asChild: true,
|
|
875
|
-
children: /* @__PURE__ */ jsx(
|
|
876
|
-
motion.div,
|
|
877
|
-
{
|
|
878
|
-
"data-slot": "dropdown-menu-radio-item",
|
|
879
|
-
"data-disabled": disabled,
|
|
880
|
-
...props
|
|
881
|
-
}
|
|
882
|
-
)
|
|
883
|
-
}
|
|
884
|
-
);
|
|
885
|
-
}
|
|
886
|
-
function DropdownMenuLabel(props) {
|
|
887
|
-
return /* @__PURE__ */ jsx(DropdownMenu$1.Label, { "data-slot": "dropdown-menu-label", ...props });
|
|
888
|
-
}
|
|
889
|
-
function DropdownMenuSeparator(props) {
|
|
890
|
-
return /* @__PURE__ */ jsx(
|
|
891
|
-
DropdownMenu$1.Separator,
|
|
892
|
-
{
|
|
893
|
-
"data-slot": "dropdown-menu-separator",
|
|
894
|
-
...props
|
|
895
|
-
}
|
|
896
|
-
);
|
|
897
|
-
}
|
|
898
|
-
function DropdownMenuShortcut(props) {
|
|
899
|
-
return /* @__PURE__ */ jsx("span", { "data-slot": "dropdown-menu-shortcut", ...props });
|
|
900
|
-
}
|
|
901
|
-
function DropdownMenuItemIndicator(props) {
|
|
902
|
-
return /* @__PURE__ */ jsx(
|
|
903
|
-
DropdownMenu$1.ItemIndicator,
|
|
904
|
-
{
|
|
905
|
-
"data-slot": "dropdown-menu-item-indicator",
|
|
906
|
-
asChild: true,
|
|
907
|
-
children: /* @__PURE__ */ jsx(motion.div, { ...props })
|
|
908
|
-
}
|
|
909
|
-
);
|
|
910
|
-
}
|
|
911
|
-
function DropdownMenu2(props) {
|
|
912
|
-
return /* @__PURE__ */ jsx(DropdownMenu, { ...props });
|
|
913
|
-
}
|
|
914
|
-
function DropdownMenuTrigger2(props) {
|
|
915
|
-
return /* @__PURE__ */ jsx(DropdownMenuTrigger, { ...props });
|
|
916
|
-
}
|
|
917
|
-
function DropdownMenuContent2({
|
|
918
|
-
sideOffset = 4,
|
|
919
|
-
className,
|
|
920
|
-
children,
|
|
921
|
-
...props
|
|
922
|
-
}) {
|
|
923
|
-
return /* @__PURE__ */ jsx(
|
|
924
|
-
DropdownMenuContent,
|
|
925
|
-
{
|
|
926
|
-
sideOffset,
|
|
927
|
-
className: cn(
|
|
928
|
-
"bg-popover text-popover-foreground z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] max-w-xs origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl border px-1 py-1.5 shadow-lg outline-none will-change-[opacity,transform] select-none",
|
|
929
|
-
className
|
|
930
|
-
),
|
|
931
|
-
...props,
|
|
932
|
-
children: /* @__PURE__ */ jsx(DropdownMenuHighlight, { className: "absolute inset-0 bg-accent z-0 rounded-sm", children })
|
|
933
|
-
}
|
|
934
|
-
);
|
|
935
|
-
}
|
|
936
|
-
function DropdownMenuGroup2({ ...props }) {
|
|
937
|
-
return /* @__PURE__ */ jsx(DropdownMenuGroup, { ...props });
|
|
938
|
-
}
|
|
939
|
-
function DropdownMenuItem2({
|
|
940
|
-
className,
|
|
941
|
-
inset,
|
|
942
|
-
variant = "default",
|
|
943
|
-
disabled,
|
|
944
|
-
...props
|
|
945
|
-
}) {
|
|
946
|
-
return /* @__PURE__ */ jsx(
|
|
947
|
-
DropdownMenuHighlightItem,
|
|
948
|
-
{
|
|
949
|
-
activeClassName: variant === "destructive" ? "bg-destructive/10 dark:bg-destructive/20" : "",
|
|
950
|
-
disabled,
|
|
951
|
-
children: /* @__PURE__ */ jsx(
|
|
952
|
-
DropdownMenuItem,
|
|
953
|
-
{
|
|
954
|
-
disabled,
|
|
955
|
-
"data-inset": inset,
|
|
956
|
-
"data-variant": variant,
|
|
957
|
-
className: cn(
|
|
958
|
-
"focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
959
|
-
className
|
|
960
|
-
),
|
|
961
|
-
...props
|
|
962
|
-
}
|
|
963
|
-
)
|
|
964
|
-
}
|
|
965
|
-
);
|
|
966
|
-
}
|
|
967
|
-
function DropdownMenuCheckboxItem2({
|
|
968
|
-
className,
|
|
969
|
-
children,
|
|
970
|
-
checked,
|
|
971
|
-
disabled,
|
|
972
|
-
...props
|
|
973
|
-
}) {
|
|
974
|
-
return /* @__PURE__ */ jsx(DropdownMenuHighlightItem, { disabled, children: /* @__PURE__ */ jsxs(
|
|
975
|
-
DropdownMenuCheckboxItem,
|
|
976
|
-
{
|
|
977
|
-
disabled,
|
|
978
|
-
className: cn(
|
|
979
|
-
"focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
980
|
-
className
|
|
981
|
-
),
|
|
982
|
-
checked,
|
|
983
|
-
...props,
|
|
984
|
-
children: [
|
|
985
|
-
/* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(
|
|
986
|
-
DropdownMenuItemIndicator,
|
|
987
|
-
{
|
|
988
|
-
initial: { opacity: 0, scale: 0.5 },
|
|
989
|
-
animate: { opacity: 1, scale: 1 },
|
|
990
|
-
children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" })
|
|
991
|
-
}
|
|
992
|
-
) }),
|
|
993
|
-
children
|
|
994
|
-
]
|
|
995
|
-
}
|
|
996
|
-
) });
|
|
997
|
-
}
|
|
998
|
-
function DropdownMenuRadioGroup2(props) {
|
|
999
|
-
return /* @__PURE__ */ jsx(DropdownMenuRadioGroup, { ...props });
|
|
1000
|
-
}
|
|
1001
|
-
function DropdownMenuRadioItem2({
|
|
1002
|
-
className,
|
|
1003
|
-
children,
|
|
1004
|
-
disabled,
|
|
1005
|
-
...props
|
|
1006
|
-
}) {
|
|
1007
|
-
return /* @__PURE__ */ jsx(DropdownMenuHighlightItem, { disabled, children: /* @__PURE__ */ jsxs(
|
|
1008
|
-
DropdownMenuRadioItem,
|
|
1009
|
-
{
|
|
1010
|
-
disabled,
|
|
1011
|
-
className: cn(
|
|
1012
|
-
"focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
1013
|
-
className
|
|
1014
|
-
),
|
|
1015
|
-
...props,
|
|
1016
|
-
children: [
|
|
1017
|
-
/* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuItemIndicator, { layoutId: "dropdown-menu-item-indicator-radio", children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) }) }),
|
|
1018
|
-
children
|
|
1019
|
-
]
|
|
1020
|
-
}
|
|
1021
|
-
) });
|
|
1022
|
-
}
|
|
1023
|
-
function DropdownMenuLabel2({
|
|
1024
|
-
className,
|
|
1025
|
-
inset,
|
|
1026
|
-
...props
|
|
1027
|
-
}) {
|
|
1028
|
-
return /* @__PURE__ */ jsx(
|
|
1029
|
-
DropdownMenuLabel,
|
|
1030
|
-
{
|
|
1031
|
-
"data-inset": inset,
|
|
1032
|
-
className: cn(
|
|
1033
|
-
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
|
1034
|
-
className
|
|
1035
|
-
),
|
|
1036
|
-
...props
|
|
1037
|
-
}
|
|
1038
|
-
);
|
|
1039
|
-
}
|
|
1040
|
-
function DropdownMenuSeparator2({
|
|
1041
|
-
className,
|
|
1042
|
-
...props
|
|
1043
|
-
}) {
|
|
1044
|
-
return /* @__PURE__ */ jsx(
|
|
1045
|
-
DropdownMenuSeparator,
|
|
1046
|
-
{
|
|
1047
|
-
className: cn("bg-border -mx-1 my-1 h-px", className),
|
|
1048
|
-
...props
|
|
1049
|
-
}
|
|
1050
|
-
);
|
|
1051
|
-
}
|
|
1052
|
-
function DropdownMenuShortcut2({
|
|
1053
|
-
className,
|
|
1054
|
-
...props
|
|
1055
|
-
}) {
|
|
1056
|
-
return /* @__PURE__ */ jsx(
|
|
1057
|
-
DropdownMenuShortcut,
|
|
1058
|
-
{
|
|
1059
|
-
className: cn(
|
|
1060
|
-
"text-muted-foreground ml-auto text-xs tracking-widest",
|
|
1061
|
-
className
|
|
1062
|
-
),
|
|
1063
|
-
...props
|
|
1064
|
-
}
|
|
1065
|
-
);
|
|
1066
|
-
}
|
|
1067
|
-
function DropdownMenuSub2(props) {
|
|
1068
|
-
return /* @__PURE__ */ jsx(DropdownMenuSub, { ...props });
|
|
1069
|
-
}
|
|
1070
|
-
function DropdownMenuSubTrigger2({
|
|
1071
|
-
disabled,
|
|
1072
|
-
className,
|
|
1073
|
-
inset,
|
|
1074
|
-
children,
|
|
1075
|
-
...props
|
|
1076
|
-
}) {
|
|
1077
|
-
return /* @__PURE__ */ jsx(DropdownMenuHighlightItem, { disabled, children: /* @__PURE__ */ jsxs(
|
|
1078
|
-
DropdownMenuSubTrigger,
|
|
1079
|
-
{
|
|
1080
|
-
disabled,
|
|
1081
|
-
"data-inset": inset,
|
|
1082
|
-
className: cn(
|
|
1083
|
-
"focus:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
|
|
1084
|
-
"data-[state=open]:[&_[data-slot=chevron]]:rotate-90 [&_[data-slot=chevron]]:transition-transform [&_[data-slot=chevron]]:duration-300 [&_[data-slot=chevron]]:ease-in-out",
|
|
1085
|
-
className
|
|
1086
|
-
),
|
|
1087
|
-
...props,
|
|
1088
|
-
children: [
|
|
1089
|
-
children,
|
|
1090
|
-
/* @__PURE__ */ jsx(ChevronRightIcon, { "data-slot": "chevron", className: "ml-auto size-4" })
|
|
1091
|
-
]
|
|
1092
|
-
}
|
|
1093
|
-
) });
|
|
1094
|
-
}
|
|
1095
|
-
function DropdownMenuSubContent2({
|
|
1096
|
-
className,
|
|
1097
|
-
...props
|
|
1098
|
-
}) {
|
|
1099
|
-
return /* @__PURE__ */ jsx(
|
|
1100
|
-
DropdownMenuSubContent,
|
|
1101
|
-
{
|
|
1102
|
-
className: cn(
|
|
1103
|
-
"bg-popover text-popover-foreground z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg outline-none",
|
|
1104
|
-
className
|
|
1105
|
-
),
|
|
1106
|
-
...props
|
|
1107
|
-
}
|
|
1108
|
-
);
|
|
1109
|
-
}
|
|
1110
|
-
|
|
1111
|
-
// src/components/list/list.props.ts
|
|
1112
|
-
var LIST_CLASS_NAMES = {
|
|
1113
|
-
/** Flex column wrapping every group. Standard (`role="list"`) rendering only. */
|
|
1114
|
-
container: "espd-list",
|
|
1115
|
-
/** Heading rendered for a {@link ListGroup.label}. */
|
|
1116
|
-
groupLabel: "espd-list-group-label",
|
|
1117
|
-
/** Every row rendered from a {@link ListItem}, in both roles and at any nesting depth. */
|
|
1118
|
-
item: "espd-list-item",
|
|
1119
|
-
/** Wrapper around a raw `ReactNode` passed in {@link ListGroup.items}. */
|
|
1120
|
-
customItem: "espd-list-custom-item",
|
|
1121
|
-
/** Divider drawn between groups. */
|
|
1122
|
-
separator: "espd-list-separator"
|
|
1123
|
-
};
|
|
1124
|
-
var listItemBase = "min-h-[var(--menu-item-height)] w-full scroll-mt-[calc(var(--spacing)*1.5)] px-[calc(var(--spacing)*2.5)] py-[calc(var(--spacing)*1.5)] my-[calc(var(--spacing)*0.5)] text-sm leading-[var(--tw-leading,var(--text-sm--line-height))] select-none rounded-[10px] items-center flex relative no-underline";
|
|
1125
|
-
var listItemInteractive = "w-full text-left cursor-pointer hover:bg-accent focus:bg-accent focus:outline-none";
|
|
1126
|
-
var presetColorStyles = {
|
|
1127
|
-
primary: "text-primary",
|
|
1128
|
-
secondary: "text-secondary-foreground",
|
|
1129
|
-
error: "text-error",
|
|
1130
|
-
info: "text-info",
|
|
1131
|
-
success: "text-success",
|
|
1132
|
-
warning: "text-warning",
|
|
1133
|
-
disabled: "text-disabled",
|
|
1134
|
-
gray: "text-gray",
|
|
1135
|
-
mist: "text-mist-foreground"
|
|
1136
|
-
};
|
|
1137
|
-
var sizeStyles = {
|
|
1138
|
-
sm: "text-xs py-1 px-2",
|
|
1139
|
-
default: "text-sm py-1.5 px-2",
|
|
1140
|
-
lg: "text-base py-2 px-3"
|
|
1141
|
-
};
|
|
1142
|
-
function isListItem(item) {
|
|
1143
|
-
return typeof item === "object" && item !== null && !React__default.isValidElement(item) && "id" in item && "label" in item && typeof item.id === "string" && typeof item.label === "string";
|
|
1144
|
-
}
|
|
1145
|
-
function getItemStyles(item) {
|
|
1146
|
-
const color = item.color || "default";
|
|
1147
|
-
const size = item.size || "default";
|
|
1148
|
-
const isSelected = item.isSelected || false;
|
|
1149
|
-
if (color === "default" || isPresetColor(color) && presetColorStyles[color]) {
|
|
1150
|
-
return {
|
|
1151
|
-
className: cn(
|
|
1152
|
-
LIST_CLASS_NAMES.item,
|
|
1153
|
-
listItemBase,
|
|
1154
|
-
color === "default" ? "" : presetColorStyles[color],
|
|
1155
|
-
sizeStyles[size],
|
|
1156
|
-
isSelected && "bg-accent font-medium"
|
|
1157
|
-
)
|
|
1158
|
-
};
|
|
1159
|
-
}
|
|
1160
|
-
const resolved = resolveColor(color, "text");
|
|
1161
|
-
return {
|
|
1162
|
-
className: cn(
|
|
1163
|
-
LIST_CLASS_NAMES.item,
|
|
1164
|
-
listItemBase,
|
|
1165
|
-
sizeStyles[size],
|
|
1166
|
-
isSelected && "bg-accent font-medium"
|
|
1167
|
-
),
|
|
1168
|
-
style: resolved.style
|
|
1169
|
-
};
|
|
1170
|
-
}
|
|
1171
|
-
function getItemClassName(item, itemClassName) {
|
|
1172
|
-
return cn(getItemStyles(item).className, itemClassName, item.className);
|
|
1173
|
-
}
|
|
1174
|
-
function getInteractiveItemClassName(item, itemClassName) {
|
|
1175
|
-
return cn(
|
|
1176
|
-
getItemStyles(item).className,
|
|
1177
|
-
listItemInteractive,
|
|
1178
|
-
itemClassName,
|
|
1179
|
-
item.className
|
|
1180
|
-
);
|
|
1181
|
-
}
|
|
1182
|
-
function renderItemContent(item) {
|
|
1183
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1184
|
-
item.startIcon && /* @__PURE__ */ jsx("span", { className: "mr-2 flex-shrink-0", children: item.startIcon }),
|
|
1185
|
-
/* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
|
|
1186
|
-
item.endIcon && /* @__PURE__ */ jsx("span", { className: "ml-2 flex-shrink-0", children: item.endIcon })
|
|
1187
|
-
] });
|
|
1188
|
-
}
|
|
1189
|
-
function StandardLeafItem({
|
|
1190
|
-
item,
|
|
1191
|
-
itemClassName,
|
|
1192
|
-
linkComponent: LinkComponent
|
|
1193
|
-
}) {
|
|
1194
|
-
const itemStyles = getItemStyles(item);
|
|
1195
|
-
const className = getInteractiveItemClassName(item, itemClassName);
|
|
1196
|
-
if (item.href && LinkComponent) {
|
|
1197
|
-
return /* @__PURE__ */ jsx(
|
|
1198
|
-
LinkComponent,
|
|
1199
|
-
{
|
|
1200
|
-
to: item.href,
|
|
1201
|
-
className,
|
|
1202
|
-
style: itemStyles.style,
|
|
1203
|
-
"aria-current": item.isSelected ? "page" : void 0,
|
|
1204
|
-
children: renderItemContent(item)
|
|
1205
|
-
}
|
|
1206
|
-
);
|
|
1207
|
-
}
|
|
1208
|
-
return /* @__PURE__ */ jsx(
|
|
1209
|
-
"button",
|
|
1210
|
-
{
|
|
1211
|
-
type: "button",
|
|
1212
|
-
className,
|
|
1213
|
-
style: itemStyles.style,
|
|
1214
|
-
onClick: item.onClick,
|
|
1215
|
-
children: renderItemContent(item)
|
|
1216
|
-
}
|
|
1217
|
-
);
|
|
1218
|
-
}
|
|
1219
|
-
function StandardListItem({
|
|
1220
|
-
item,
|
|
1221
|
-
itemClassName,
|
|
1222
|
-
linkComponent
|
|
1223
|
-
}) {
|
|
1224
|
-
const hasNestedItems = item.items && item.items.length > 0;
|
|
1225
|
-
if (hasNestedItems) {
|
|
1226
|
-
const itemStyles = getItemStyles(item);
|
|
1227
|
-
return /* @__PURE__ */ jsxs(Collapsible, { className: "w-full", children: [
|
|
1228
|
-
/* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
|
|
1229
|
-
"button",
|
|
1230
|
-
{
|
|
1231
|
-
type: "button",
|
|
1232
|
-
className: cn("group", getInteractiveItemClassName(item, itemClassName)),
|
|
1233
|
-
style: itemStyles.style,
|
|
1234
|
-
children: [
|
|
1235
|
-
/* @__PURE__ */ jsx("span", { className: "flex flex-1 items-center", children: renderItemContent(item) }),
|
|
1236
|
-
/* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180" })
|
|
1237
|
-
]
|
|
1238
|
-
}
|
|
1239
|
-
) }),
|
|
1240
|
-
/* @__PURE__ */ jsx(CollapsibleContent, { className: "w-full", children: /* @__PURE__ */ jsx("div", { className: "pl-4 w-full", children: item.items?.map((subItem) => /* @__PURE__ */ jsx(
|
|
1241
|
-
StandardLeafItem,
|
|
1242
|
-
{
|
|
1243
|
-
item: subItem,
|
|
1244
|
-
itemClassName,
|
|
1245
|
-
linkComponent
|
|
1246
|
-
},
|
|
1247
|
-
subItem.id
|
|
1248
|
-
)) }) })
|
|
1249
|
-
] });
|
|
1250
|
-
}
|
|
1251
|
-
return /* @__PURE__ */ jsx(
|
|
1252
|
-
StandardLeafItem,
|
|
1253
|
-
{
|
|
1254
|
-
item,
|
|
1255
|
-
itemClassName,
|
|
1256
|
-
linkComponent
|
|
1257
|
-
}
|
|
1258
|
-
);
|
|
1259
|
-
}
|
|
1260
|
-
function DropdownLeafItem({
|
|
1261
|
-
item,
|
|
1262
|
-
itemClassName,
|
|
1263
|
-
linkComponent: LinkComponent
|
|
1264
|
-
}) {
|
|
1265
|
-
const itemStyles = getItemStyles(item);
|
|
1266
|
-
if (item.href && LinkComponent) {
|
|
1267
|
-
return (
|
|
1268
|
-
// The row's padding lives on the link so the whole row is the click/context target;
|
|
1269
|
-
// the menu item itself is only the focus/keyboard wrapper.
|
|
1270
|
-
/* @__PURE__ */ jsx(DropdownMenuItem2, { className: "p-0", onClick: item.onClick, children: /* @__PURE__ */ jsx(
|
|
1271
|
-
LinkComponent,
|
|
1272
|
-
{
|
|
1273
|
-
to: item.href,
|
|
1274
|
-
className: cn(
|
|
1275
|
-
"gap-1.5 cursor-pointer",
|
|
1276
|
-
getItemClassName(item, itemClassName)
|
|
1277
|
-
),
|
|
1278
|
-
style: itemStyles.style,
|
|
1279
|
-
"aria-current": item.isSelected ? "page" : void 0,
|
|
1280
|
-
children: renderItemContent(item)
|
|
1281
|
-
}
|
|
1282
|
-
) })
|
|
1283
|
-
);
|
|
1284
|
-
}
|
|
1285
|
-
return /* @__PURE__ */ jsx(
|
|
1286
|
-
DropdownMenuItem2,
|
|
1287
|
-
{
|
|
1288
|
-
className: cn("gap-1.5", getItemClassName(item, itemClassName)),
|
|
1289
|
-
style: itemStyles.style,
|
|
1290
|
-
onClick: item.onClick,
|
|
1291
|
-
children: renderItemContent(item)
|
|
1292
|
-
}
|
|
1293
|
-
);
|
|
1294
|
-
}
|
|
1295
|
-
function DropdownListItem({
|
|
1296
|
-
item,
|
|
1297
|
-
itemClassName,
|
|
1298
|
-
linkComponent
|
|
1299
|
-
}) {
|
|
1300
|
-
const hasNestedItems = item.items && item.items.length > 0;
|
|
1301
|
-
if (hasNestedItems) {
|
|
1302
|
-
const itemStyles = getItemStyles(item);
|
|
1303
|
-
return /* @__PURE__ */ jsxs(DropdownMenuSub2, { children: [
|
|
1304
|
-
/* @__PURE__ */ jsx(
|
|
1305
|
-
DropdownMenuSubTrigger2,
|
|
1306
|
-
{
|
|
1307
|
-
className: cn("gap-1.5", getItemClassName(item, itemClassName)),
|
|
1308
|
-
style: itemStyles.style,
|
|
1309
|
-
children: renderItemContent(item)
|
|
1310
|
-
}
|
|
1311
|
-
),
|
|
1312
|
-
/* @__PURE__ */ jsx(DropdownMenuSubContent2, { sideOffset: 4, className: "z-[60] min-w-[8rem]", children: item.items?.map((subItem) => /* @__PURE__ */ jsx(
|
|
1313
|
-
DropdownLeafItem,
|
|
1314
|
-
{
|
|
1315
|
-
item: subItem,
|
|
1316
|
-
itemClassName,
|
|
1317
|
-
linkComponent
|
|
1318
|
-
},
|
|
1319
|
-
subItem.id
|
|
1320
|
-
)) })
|
|
1321
|
-
] });
|
|
1322
|
-
}
|
|
1323
|
-
return /* @__PURE__ */ jsx(
|
|
1324
|
-
DropdownLeafItem,
|
|
1325
|
-
{
|
|
1326
|
-
item,
|
|
1327
|
-
itemClassName,
|
|
1328
|
-
linkComponent
|
|
1329
|
-
}
|
|
1330
|
-
);
|
|
1331
|
-
}
|
|
1332
|
-
var groupLabelBase = "text-sm font-normal truncate overflow-ellipsis font-inter text-gray-400 flex items-center gap-2";
|
|
1333
|
-
function List({
|
|
1334
|
-
items,
|
|
1335
|
-
role = "list",
|
|
1336
|
-
showSeparators = true,
|
|
1337
|
-
className,
|
|
1338
|
-
itemClassName,
|
|
1339
|
-
separatorClassName,
|
|
1340
|
-
linkComponent
|
|
1341
|
-
}) {
|
|
1342
|
-
const shouldShowSeparators = showSeparators && items.length > 1;
|
|
1343
|
-
const isDropdown = role === "dropdown-list";
|
|
1344
|
-
const ItemComponent = isDropdown ? DropdownListItem : StandardListItem;
|
|
1345
|
-
const Wrapper = isDropdown ? React__default.Fragment : ({ children }) => /* @__PURE__ */ jsx(
|
|
1346
|
-
"div",
|
|
1347
|
-
{
|
|
1348
|
-
className: cn(LIST_CLASS_NAMES.container, "flex flex-col", className),
|
|
1349
|
-
children
|
|
1350
|
-
}
|
|
1351
|
-
);
|
|
1352
|
-
return /* @__PURE__ */ jsx(Wrapper, { children: items.map((group, groupIndex) => {
|
|
1353
|
-
const isLastGroup = groupIndex === items.length - 1;
|
|
1354
|
-
const labelContent = group.label && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1355
|
-
group.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: group.icon }),
|
|
1356
|
-
/* @__PURE__ */ jsx("span", { children: group.label })
|
|
1357
|
-
] });
|
|
1358
|
-
const labelClassName = cn(
|
|
1359
|
-
LIST_CLASS_NAMES.groupLabel,
|
|
1360
|
-
groupLabelBase,
|
|
1361
|
-
!isDropdown && "px-2.5 py-1.5",
|
|
1362
|
-
group.labelClassName
|
|
1363
|
-
);
|
|
1364
|
-
return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
|
|
1365
|
-
group.label && (isDropdown ? /* @__PURE__ */ jsx(DropdownMenuLabel2, { className: labelClassName, children: labelContent }) : /* @__PURE__ */ jsx("div", { className: labelClassName, children: labelContent })),
|
|
1366
|
-
group.items.map((item, index) => {
|
|
1367
|
-
if (isListItem(item)) {
|
|
1368
|
-
return /* @__PURE__ */ jsx(
|
|
1369
|
-
ItemComponent,
|
|
1370
|
-
{
|
|
1371
|
-
item,
|
|
1372
|
-
itemClassName,
|
|
1373
|
-
linkComponent
|
|
1374
|
-
},
|
|
1375
|
-
item.id
|
|
1376
|
-
);
|
|
1377
|
-
} else {
|
|
1378
|
-
return /* @__PURE__ */ jsx(
|
|
1379
|
-
"div",
|
|
1380
|
-
{
|
|
1381
|
-
className: cn(
|
|
1382
|
-
LIST_CLASS_NAMES.customItem,
|
|
1383
|
-
"px-2.5 py-1.5",
|
|
1384
|
-
itemClassName
|
|
1385
|
-
),
|
|
1386
|
-
children: item
|
|
1387
|
-
},
|
|
1388
|
-
index
|
|
1389
|
-
);
|
|
1390
|
-
}
|
|
1391
|
-
}),
|
|
1392
|
-
shouldShowSeparators && !isLastGroup && (isDropdown ? /* @__PURE__ */ jsx(
|
|
1393
|
-
DropdownMenuSeparator2,
|
|
1394
|
-
{
|
|
1395
|
-
className: cn(LIST_CLASS_NAMES.separator, separatorClassName)
|
|
1396
|
-
}
|
|
1397
|
-
) : /* @__PURE__ */ jsx(
|
|
1398
|
-
"hr",
|
|
1399
|
-
{
|
|
1400
|
-
className: cn(
|
|
1401
|
-
LIST_CLASS_NAMES.separator,
|
|
1402
|
-
"my-1 border-border",
|
|
1403
|
-
separatorClassName
|
|
1404
|
-
)
|
|
1405
|
-
}
|
|
1406
|
-
))
|
|
1407
|
-
] }, group.id);
|
|
1408
|
-
}) });
|
|
1409
|
-
}
|
|
1410
|
-
function mergeRefs(...refs) {
|
|
1411
|
-
return (node) => {
|
|
1412
|
-
refs.forEach((ref) => {
|
|
1413
|
-
if (!ref) return;
|
|
1414
|
-
if (typeof ref === "function") {
|
|
1415
|
-
ref(node);
|
|
1416
|
-
} else {
|
|
1417
|
-
ref.current = node;
|
|
1418
|
-
}
|
|
1419
|
-
});
|
|
1420
|
-
};
|
|
1421
|
-
}
|
|
1422
|
-
function mergeProps(childProps, slotProps) {
|
|
1423
|
-
const merged = { ...childProps, ...slotProps };
|
|
1424
|
-
if (childProps.className || slotProps.className) {
|
|
1425
|
-
merged.className = cn(
|
|
1426
|
-
childProps.className,
|
|
1427
|
-
slotProps.className
|
|
1428
|
-
);
|
|
1429
|
-
}
|
|
1430
|
-
if (childProps.style || slotProps.style) {
|
|
1431
|
-
merged.style = {
|
|
1432
|
-
...childProps.style,
|
|
1433
|
-
...slotProps.style
|
|
1434
|
-
};
|
|
1435
|
-
}
|
|
1436
|
-
return merged;
|
|
1437
|
-
}
|
|
1438
|
-
function Slot({
|
|
1439
|
-
children,
|
|
1440
|
-
ref,
|
|
1441
|
-
...props
|
|
1442
|
-
}) {
|
|
1443
|
-
const isAlreadyMotion = typeof children.type === "object" && children.type !== null && isMotionComponent(children.type);
|
|
1444
|
-
const Base = React.useMemo(
|
|
1445
|
-
() => isAlreadyMotion ? children.type : motion.create(children.type),
|
|
1446
|
-
[isAlreadyMotion, children.type]
|
|
1447
|
-
);
|
|
1448
|
-
if (!React.isValidElement(children)) return null;
|
|
1449
|
-
const { ref: childRef, ...childProps } = children.props;
|
|
1450
|
-
const mergedProps = mergeProps(childProps, props);
|
|
1451
|
-
return /* @__PURE__ */ jsx(Base, { ...mergedProps, ref: mergeRefs(childRef, ref) });
|
|
1452
|
-
}
|
|
1453
|
-
var [GlobalTooltipProvider, useGlobalTooltip] = getStrictContext("GlobalTooltipProvider");
|
|
1454
|
-
var [LocalTooltipProvider, useTooltip] = getStrictContext(
|
|
1455
|
-
"LocalTooltipProvider"
|
|
1456
|
-
);
|
|
1457
|
-
function getResolvedSide(placement) {
|
|
1458
|
-
if (placement.includes("-")) {
|
|
1459
|
-
return placement.split("-")[0];
|
|
1460
|
-
}
|
|
1461
|
-
return placement;
|
|
1462
|
-
}
|
|
1463
|
-
function initialFromSide(side) {
|
|
1464
|
-
if (side === "top") return { y: 15 };
|
|
1465
|
-
if (side === "bottom") return { y: -15 };
|
|
1466
|
-
if (side === "left") return { x: 15 };
|
|
1467
|
-
return { x: -15 };
|
|
1468
|
-
}
|
|
1469
|
-
function TooltipProvider({
|
|
1470
|
-
children,
|
|
1471
|
-
id,
|
|
1472
|
-
openDelay = 700,
|
|
1473
|
-
closeDelay = 300,
|
|
1474
|
-
transition = { type: "spring", stiffness: 300, damping: 35 }
|
|
1475
|
-
}) {
|
|
1476
|
-
const globalId = React.useId();
|
|
1477
|
-
const [currentTooltip, setCurrentTooltip] = React.useState(null);
|
|
1478
|
-
const timeoutRef = React.useRef(null);
|
|
1479
|
-
const lastCloseTimeRef = React.useRef(0);
|
|
1480
|
-
const referenceElRef = React.useRef(null);
|
|
1481
|
-
const showTooltip = React.useCallback(
|
|
1482
|
-
(data) => {
|
|
1483
|
-
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
1484
|
-
if (currentTooltip !== null) {
|
|
1485
|
-
setCurrentTooltip(data);
|
|
1486
|
-
return;
|
|
1487
|
-
}
|
|
1488
|
-
const now = Date.now();
|
|
1489
|
-
const delay = now - lastCloseTimeRef.current < closeDelay ? 0 : openDelay;
|
|
1490
|
-
timeoutRef.current = window.setTimeout(
|
|
1491
|
-
() => setCurrentTooltip(data),
|
|
1492
|
-
delay
|
|
1493
|
-
);
|
|
1494
|
-
},
|
|
1495
|
-
[openDelay, closeDelay, currentTooltip]
|
|
1496
|
-
);
|
|
1497
|
-
const hideTooltip = React.useCallback(() => {
|
|
1498
|
-
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
1499
|
-
timeoutRef.current = window.setTimeout(() => {
|
|
1500
|
-
setCurrentTooltip(null);
|
|
1501
|
-
lastCloseTimeRef.current = Date.now();
|
|
1502
|
-
}, closeDelay);
|
|
1503
|
-
}, [closeDelay]);
|
|
1504
|
-
const hideImmediate = React.useCallback(() => {
|
|
1505
|
-
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
1506
|
-
setCurrentTooltip(null);
|
|
1507
|
-
lastCloseTimeRef.current = Date.now();
|
|
1508
|
-
}, []);
|
|
1509
|
-
const setReferenceEl = React.useCallback((el) => {
|
|
1510
|
-
referenceElRef.current = el;
|
|
1511
|
-
}, []);
|
|
1512
|
-
React.useEffect(() => {
|
|
1513
|
-
const onKeyDown = (e) => {
|
|
1514
|
-
if (e.key === "Escape") hideImmediate();
|
|
1515
|
-
};
|
|
1516
|
-
window.addEventListener("keydown", onKeyDown, true);
|
|
1517
|
-
window.addEventListener("scroll", hideImmediate, true);
|
|
1518
|
-
window.addEventListener("resize", hideImmediate, true);
|
|
1519
|
-
return () => {
|
|
1520
|
-
window.removeEventListener("keydown", onKeyDown, true);
|
|
1521
|
-
window.removeEventListener("scroll", hideImmediate, true);
|
|
1522
|
-
window.removeEventListener("resize", hideImmediate, true);
|
|
1523
|
-
};
|
|
1524
|
-
}, [hideImmediate]);
|
|
1525
|
-
return /* @__PURE__ */ jsxs(
|
|
1526
|
-
GlobalTooltipProvider,
|
|
1527
|
-
{
|
|
1528
|
-
value: {
|
|
1529
|
-
showTooltip,
|
|
1530
|
-
hideTooltip,
|
|
1531
|
-
hideImmediate,
|
|
1532
|
-
currentTooltip,
|
|
1533
|
-
transition,
|
|
1534
|
-
globalId: id ?? globalId,
|
|
1535
|
-
setReferenceEl,
|
|
1536
|
-
referenceElRef
|
|
1537
|
-
},
|
|
1538
|
-
children: [
|
|
1539
|
-
/* @__PURE__ */ jsx(LayoutGroup, { children }),
|
|
1540
|
-
/* @__PURE__ */ jsx(TooltipOverlay, {})
|
|
1541
|
-
]
|
|
1542
|
-
}
|
|
1543
|
-
);
|
|
1544
|
-
}
|
|
1545
|
-
var [RenderedTooltipProvider, useRenderedTooltip] = getStrictContext("RenderedTooltipContext");
|
|
1546
|
-
var [FloatingProvider, useFloatingContext] = getStrictContext("FloatingContext");
|
|
1547
|
-
var MotionTooltipArrow = motion.create(FloatingArrow);
|
|
1548
|
-
function TooltipArrow({
|
|
1549
|
-
ref,
|
|
1550
|
-
withTransition = true,
|
|
1551
|
-
...props
|
|
1552
|
-
}) {
|
|
1553
|
-
const { side, align, open } = useRenderedTooltip();
|
|
1554
|
-
const { context, arrowRef } = useFloatingContext();
|
|
1555
|
-
const { transition, globalId } = useGlobalTooltip();
|
|
1556
|
-
React.useImperativeHandle(ref, () => arrowRef.current);
|
|
1557
|
-
const deg = { top: 0, right: 90, bottom: 180, left: -90 }[side];
|
|
1558
|
-
return /* @__PURE__ */ jsx(
|
|
1559
|
-
MotionTooltipArrow,
|
|
1560
|
-
{
|
|
1561
|
-
ref: arrowRef,
|
|
1562
|
-
context,
|
|
1563
|
-
"data-state": open ? "open" : "closed",
|
|
1564
|
-
"data-side": side,
|
|
1565
|
-
"data-align": align,
|
|
1566
|
-
"data-slot": "tooltip-arrow",
|
|
1567
|
-
style: { rotate: deg },
|
|
1568
|
-
layoutId: withTransition ? `tooltip-arrow-${globalId}` : void 0,
|
|
1569
|
-
transition: withTransition ? transition : void 0,
|
|
1570
|
-
...props
|
|
1571
|
-
}
|
|
1572
|
-
);
|
|
1573
|
-
}
|
|
1574
|
-
function TooltipPortal(props) {
|
|
1575
|
-
return /* @__PURE__ */ jsx(FloatingPortal, { ...props });
|
|
1576
|
-
}
|
|
1577
|
-
function TooltipOverlay() {
|
|
1578
|
-
const { currentTooltip, transition, globalId, referenceElRef } = useGlobalTooltip();
|
|
1579
|
-
const [rendered, setRendered] = React.useState({ data: null, open: false });
|
|
1580
|
-
const arrowRef = React.useRef(null);
|
|
1581
|
-
const side = rendered.data?.side ?? "top";
|
|
1582
|
-
const align = rendered.data?.align ?? "center";
|
|
1583
|
-
const { refs, x, y, strategy, context, update } = useFloating({
|
|
1584
|
-
placement: align === "center" ? side : `${side}-${align}`,
|
|
1585
|
-
whileElementsMounted: autoUpdate,
|
|
1586
|
-
middleware: [
|
|
1587
|
-
offset({
|
|
1588
|
-
mainAxis: rendered.data?.sideOffset ?? 0,
|
|
1589
|
-
crossAxis: rendered.data?.alignOffset ?? 0
|
|
1590
|
-
}),
|
|
1591
|
-
flip(),
|
|
1592
|
-
shift({ padding: 8 }),
|
|
1593
|
-
arrow({ element: arrowRef })
|
|
1594
|
-
]
|
|
1595
|
-
});
|
|
1596
|
-
React.useEffect(() => {
|
|
1597
|
-
if (currentTooltip) {
|
|
1598
|
-
setRendered({ data: currentTooltip, open: true });
|
|
1599
|
-
} else {
|
|
1600
|
-
setRendered((p) => p.data ? { ...p, open: false } : p);
|
|
1601
|
-
}
|
|
1602
|
-
}, [currentTooltip]);
|
|
1603
|
-
React.useLayoutEffect(() => {
|
|
1604
|
-
if (referenceElRef.current) {
|
|
1605
|
-
refs.setReference(referenceElRef.current);
|
|
1606
|
-
update();
|
|
1607
|
-
}
|
|
1608
|
-
}, [referenceElRef, refs, update, rendered.data]);
|
|
1609
|
-
const ready = x != null && y != null;
|
|
1610
|
-
const Component = rendered.data?.contentAsChild ? Slot : motion.div;
|
|
1611
|
-
const resolvedSide = getResolvedSide(context.placement);
|
|
1612
|
-
return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: rendered.data && ready && /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(
|
|
1613
|
-
"div",
|
|
1614
|
-
{
|
|
1615
|
-
ref: refs.setFloating,
|
|
1616
|
-
"data-slot": "tooltip-overlay",
|
|
1617
|
-
"data-side": resolvedSide,
|
|
1618
|
-
"data-align": rendered.data.align,
|
|
1619
|
-
"data-state": rendered.open ? "open" : "closed",
|
|
1620
|
-
style: {
|
|
1621
|
-
position: strategy,
|
|
1622
|
-
top: 0,
|
|
1623
|
-
left: 0,
|
|
1624
|
-
zIndex: 50,
|
|
1625
|
-
transform: `translate3d(${x}px, ${y}px, 0)`
|
|
1626
|
-
},
|
|
1627
|
-
children: /* @__PURE__ */ jsx(FloatingProvider, { value: { context, arrowRef }, children: /* @__PURE__ */ jsx(
|
|
1628
|
-
RenderedTooltipProvider,
|
|
1629
|
-
{
|
|
1630
|
-
value: {
|
|
1631
|
-
side: resolvedSide,
|
|
1632
|
-
align: rendered.data.align,
|
|
1633
|
-
open: rendered.open
|
|
1634
|
-
},
|
|
1635
|
-
children: /* @__PURE__ */ jsx(
|
|
1636
|
-
Component,
|
|
1637
|
-
{
|
|
1638
|
-
"data-slot": "tooltip-content",
|
|
1639
|
-
"data-side": resolvedSide,
|
|
1640
|
-
"data-align": rendered.data.align,
|
|
1641
|
-
"data-state": rendered.open ? "open" : "closed",
|
|
1642
|
-
layoutId: `tooltip-content-${globalId}`,
|
|
1643
|
-
initial: {
|
|
1644
|
-
opacity: 0,
|
|
1645
|
-
scale: 0,
|
|
1646
|
-
...initialFromSide(rendered.data.side)
|
|
1647
|
-
},
|
|
1648
|
-
animate: rendered.open ? { opacity: 1, scale: 1, x: 0, y: 0 } : {
|
|
1649
|
-
opacity: 0,
|
|
1650
|
-
scale: 0,
|
|
1651
|
-
...initialFromSide(rendered.data.side)
|
|
1652
|
-
},
|
|
1653
|
-
exit: {
|
|
1654
|
-
opacity: 0,
|
|
1655
|
-
scale: 0,
|
|
1656
|
-
...initialFromSide(rendered.data.side)
|
|
1657
|
-
},
|
|
1658
|
-
onAnimationComplete: () => {
|
|
1659
|
-
if (!rendered.open)
|
|
1660
|
-
setRendered({ data: null, open: false });
|
|
1661
|
-
},
|
|
1662
|
-
transition,
|
|
1663
|
-
...rendered.data.contentProps,
|
|
1664
|
-
style: {
|
|
1665
|
-
position: "relative",
|
|
1666
|
-
...rendered.data.contentProps?.style || {}
|
|
1667
|
-
}
|
|
1668
|
-
}
|
|
1669
|
-
)
|
|
1670
|
-
}
|
|
1671
|
-
) })
|
|
1672
|
-
}
|
|
1673
|
-
) }) });
|
|
1674
|
-
}
|
|
1675
|
-
function Tooltip({
|
|
1676
|
-
children,
|
|
1677
|
-
side = "top",
|
|
1678
|
-
sideOffset = 0,
|
|
1679
|
-
align = "center",
|
|
1680
|
-
alignOffset = 0
|
|
1681
|
-
}) {
|
|
1682
|
-
const id = React.useId();
|
|
1683
|
-
const [props, setProps] = React.useState({});
|
|
1684
|
-
const [asChild, setAsChild] = React.useState(false);
|
|
1685
|
-
return /* @__PURE__ */ jsx(
|
|
1686
|
-
LocalTooltipProvider,
|
|
1687
|
-
{
|
|
1688
|
-
value: {
|
|
1689
|
-
props,
|
|
1690
|
-
setProps,
|
|
1691
|
-
asChild,
|
|
1692
|
-
setAsChild,
|
|
1693
|
-
side,
|
|
1694
|
-
sideOffset,
|
|
1695
|
-
align,
|
|
1696
|
-
alignOffset,
|
|
1697
|
-
id
|
|
1698
|
-
},
|
|
1699
|
-
children
|
|
1700
|
-
}
|
|
1701
|
-
);
|
|
1702
|
-
}
|
|
1703
|
-
function shallowEqualWithoutChildren(a, b) {
|
|
1704
|
-
if (a === b) return true;
|
|
1705
|
-
if (!a || !b) return false;
|
|
1706
|
-
const keysA = Object.keys(a).filter((k) => k !== "children");
|
|
1707
|
-
const keysB = Object.keys(b).filter((k) => k !== "children");
|
|
1708
|
-
if (keysA.length !== keysB.length) return false;
|
|
1709
|
-
for (const k of keysA) {
|
|
1710
|
-
if (a[k] !== b[k]) return false;
|
|
1711
|
-
}
|
|
1712
|
-
return true;
|
|
1713
|
-
}
|
|
1714
|
-
function TooltipContent({ asChild = false, ...props }) {
|
|
1715
|
-
const { setProps, setAsChild } = useTooltip();
|
|
1716
|
-
const lastPropsRef = React.useRef(
|
|
1717
|
-
void 0
|
|
1718
|
-
);
|
|
1719
|
-
React.useEffect(() => {
|
|
1720
|
-
if (!shallowEqualWithoutChildren(lastPropsRef.current, props)) {
|
|
1721
|
-
lastPropsRef.current = props;
|
|
1722
|
-
setProps(props);
|
|
1723
|
-
}
|
|
1724
|
-
}, [props, setProps]);
|
|
1725
|
-
React.useEffect(() => {
|
|
1726
|
-
setAsChild(asChild);
|
|
1727
|
-
}, [asChild, setAsChild]);
|
|
1728
|
-
return null;
|
|
1729
|
-
}
|
|
1730
|
-
function TooltipTrigger({
|
|
1731
|
-
ref,
|
|
1732
|
-
onMouseEnter,
|
|
1733
|
-
onMouseLeave,
|
|
1734
|
-
onFocus,
|
|
1735
|
-
onBlur,
|
|
1736
|
-
onPointerDown,
|
|
1737
|
-
asChild = false,
|
|
1738
|
-
...props
|
|
1739
|
-
}) {
|
|
1740
|
-
const {
|
|
1741
|
-
props: contentProps,
|
|
1742
|
-
asChild: contentAsChild,
|
|
1743
|
-
side,
|
|
1744
|
-
sideOffset,
|
|
1745
|
-
align,
|
|
1746
|
-
alignOffset,
|
|
1747
|
-
id
|
|
1748
|
-
} = useTooltip();
|
|
1749
|
-
const {
|
|
1750
|
-
showTooltip,
|
|
1751
|
-
hideTooltip,
|
|
1752
|
-
hideImmediate,
|
|
1753
|
-
currentTooltip,
|
|
1754
|
-
setReferenceEl
|
|
1755
|
-
} = useGlobalTooltip();
|
|
1756
|
-
const triggerRef = React.useRef(null);
|
|
1757
|
-
React.useImperativeHandle(ref, () => triggerRef.current);
|
|
1758
|
-
const suppressNextFocusRef = React.useRef(false);
|
|
1759
|
-
const handleOpen = React.useCallback(() => {
|
|
1760
|
-
if (!triggerRef.current) return;
|
|
1761
|
-
setReferenceEl(triggerRef.current);
|
|
1762
|
-
const rect = triggerRef.current.getBoundingClientRect();
|
|
1763
|
-
showTooltip({
|
|
1764
|
-
contentProps,
|
|
1765
|
-
contentAsChild,
|
|
1766
|
-
rect,
|
|
1767
|
-
side,
|
|
1768
|
-
sideOffset,
|
|
1769
|
-
align,
|
|
1770
|
-
alignOffset,
|
|
1771
|
-
id
|
|
1772
|
-
});
|
|
1773
|
-
}, [
|
|
1774
|
-
showTooltip,
|
|
1775
|
-
setReferenceEl,
|
|
1776
|
-
contentProps,
|
|
1777
|
-
contentAsChild,
|
|
1778
|
-
side,
|
|
1779
|
-
sideOffset,
|
|
1780
|
-
align,
|
|
1781
|
-
alignOffset,
|
|
1782
|
-
id
|
|
1783
|
-
]);
|
|
1784
|
-
const handlePointerDown = React.useCallback(
|
|
1785
|
-
(e) => {
|
|
1786
|
-
onPointerDown?.(e);
|
|
1787
|
-
if (currentTooltip?.id === id) {
|
|
1788
|
-
suppressNextFocusRef.current = true;
|
|
1789
|
-
hideImmediate();
|
|
1790
|
-
Promise.resolve().then(() => {
|
|
1791
|
-
suppressNextFocusRef.current = false;
|
|
1792
|
-
});
|
|
1793
|
-
}
|
|
1794
|
-
},
|
|
1795
|
-
[onPointerDown, currentTooltip?.id, id, hideImmediate]
|
|
1796
|
-
);
|
|
1797
|
-
const handleMouseEnter = React.useCallback(
|
|
1798
|
-
(e) => {
|
|
1799
|
-
onMouseEnter?.(e);
|
|
1800
|
-
handleOpen();
|
|
1801
|
-
},
|
|
1802
|
-
[handleOpen, onMouseEnter]
|
|
1803
|
-
);
|
|
1804
|
-
const handleMouseLeave = React.useCallback(
|
|
1805
|
-
(e) => {
|
|
1806
|
-
onMouseLeave?.(e);
|
|
1807
|
-
hideTooltip();
|
|
1808
|
-
},
|
|
1809
|
-
[hideTooltip, onMouseLeave]
|
|
1810
|
-
);
|
|
1811
|
-
const handleFocus = React.useCallback(
|
|
1812
|
-
(e) => {
|
|
1813
|
-
onFocus?.(e);
|
|
1814
|
-
if (suppressNextFocusRef.current) return;
|
|
1815
|
-
handleOpen();
|
|
1816
|
-
},
|
|
1817
|
-
[handleOpen, onFocus]
|
|
1818
|
-
);
|
|
1819
|
-
const handleBlur = React.useCallback(
|
|
1820
|
-
(e) => {
|
|
1821
|
-
onBlur?.(e);
|
|
1822
|
-
hideTooltip();
|
|
1823
|
-
},
|
|
1824
|
-
[hideTooltip, onBlur]
|
|
1825
|
-
);
|
|
1826
|
-
const Component = asChild ? Slot : motion.div;
|
|
1827
|
-
return /* @__PURE__ */ jsx(
|
|
1828
|
-
Component,
|
|
1829
|
-
{
|
|
1830
|
-
ref: triggerRef,
|
|
1831
|
-
onPointerDown: handlePointerDown,
|
|
1832
|
-
onMouseEnter: handleMouseEnter,
|
|
1833
|
-
onMouseLeave: handleMouseLeave,
|
|
1834
|
-
onFocus: handleFocus,
|
|
1835
|
-
onBlur: handleBlur,
|
|
1836
|
-
"data-slot": "tooltip-trigger",
|
|
1837
|
-
"data-side": side,
|
|
1838
|
-
"data-align": align,
|
|
1839
|
-
"data-state": currentTooltip?.id === id ? "open" : "closed",
|
|
1840
|
-
...props
|
|
1841
|
-
}
|
|
1842
|
-
);
|
|
1843
|
-
}
|
|
1844
|
-
function TooltipProvider2({ openDelay = 0, ...props }) {
|
|
1845
|
-
return /* @__PURE__ */ jsx(TooltipProvider, { openDelay, ...props });
|
|
1846
|
-
}
|
|
1847
|
-
function Tooltip2({ sideOffset = 10, ...props }) {
|
|
1848
|
-
return /* @__PURE__ */ jsx(Tooltip, { sideOffset, ...props });
|
|
1849
|
-
}
|
|
1850
|
-
function TooltipTrigger2({ ...props }) {
|
|
1851
|
-
return /* @__PURE__ */ jsx(TooltipTrigger, { ...props });
|
|
1852
|
-
}
|
|
1853
|
-
function TooltipContent2({
|
|
1854
|
-
className,
|
|
1855
|
-
children,
|
|
1856
|
-
layout = "preserve-aspect",
|
|
1857
|
-
...props
|
|
1858
|
-
}) {
|
|
1859
|
-
return /* @__PURE__ */ jsxs(
|
|
1860
|
-
TooltipContent,
|
|
1861
|
-
{
|
|
1862
|
-
className: cn(
|
|
1863
|
-
"z-50 w-fit bg-tooltip text-tooltip-foreground rounded-md",
|
|
1864
|
-
className
|
|
1865
|
-
),
|
|
1866
|
-
...props,
|
|
1867
|
-
children: [
|
|
1868
|
-
/* @__PURE__ */ jsx(motion5.div, { className: "overflow-hidden px-3 py-1.5 text-xs text-balance", children: /* @__PURE__ */ jsx(motion5.div, { layout, children }) }),
|
|
1869
|
-
/* @__PURE__ */ jsx(
|
|
1870
|
-
TooltipArrow,
|
|
1871
|
-
{
|
|
1872
|
-
className: "fill-tooltip size-3 data-[side='bottom']:translate-y-[1px] data-[side='right']:translate-x-[1px] data-[side='left']:translate-x-[-1px] data-[side='top']:translate-y-[-1px]",
|
|
1873
|
-
tipRadius: 2
|
|
1874
|
-
}
|
|
1875
|
-
)
|
|
1876
|
-
]
|
|
1877
|
-
}
|
|
1878
|
-
);
|
|
1879
|
-
}
|
|
1880
|
-
function Tooltip3({
|
|
1881
|
-
content,
|
|
1882
|
-
children,
|
|
1883
|
-
side,
|
|
1884
|
-
sideOffset,
|
|
1885
|
-
align,
|
|
1886
|
-
alignOffset,
|
|
1887
|
-
openDelay,
|
|
1888
|
-
closeDelay
|
|
1889
|
-
}) {
|
|
1890
|
-
return /* @__PURE__ */ jsx(TooltipProvider2, { openDelay, closeDelay, children: /* @__PURE__ */ jsxs(
|
|
1891
|
-
Tooltip2,
|
|
1892
|
-
{
|
|
1893
|
-
side,
|
|
1894
|
-
sideOffset,
|
|
1895
|
-
align,
|
|
1896
|
-
alignOffset,
|
|
1897
|
-
children: [
|
|
1898
|
-
/* @__PURE__ */ jsx(TooltipTrigger2, { asChild: true, children }),
|
|
1899
|
-
/* @__PURE__ */ jsx(TooltipContent2, { children: content })
|
|
1900
|
-
]
|
|
1901
|
-
}
|
|
1902
|
-
) });
|
|
1903
|
-
}
|
|
1904
|
-
var presetButtonColors = {
|
|
1905
|
-
primary: {
|
|
1906
|
-
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
1907
|
-
outline: "border-primary/30 text-primary hover:bg-primary/5 hover:border-primary",
|
|
1908
|
-
ghost: "text-primary hover:bg-primary/10",
|
|
1909
|
-
link: "text-primary"
|
|
1910
|
-
},
|
|
1911
|
-
secondary: {
|
|
1912
|
-
default: "bg-secondary text-secondary-foreground hover:bg-secondary/90",
|
|
1913
|
-
outline: "border-secondary/30 text-secondary hover:bg-secondary/5 hover:border-secondary",
|
|
1914
|
-
ghost: "text-secondary hover:bg-secondary/10",
|
|
1915
|
-
link: "text-secondary"
|
|
1916
|
-
},
|
|
1917
|
-
error: {
|
|
1918
|
-
default: "bg-error text-error-foreground hover:bg-error/90",
|
|
1919
|
-
outline: "border-error/30 text-error hover:bg-error/5 hover:border-error",
|
|
1920
|
-
ghost: "text-error hover:bg-error/10",
|
|
1921
|
-
link: "text-error"
|
|
1922
|
-
},
|
|
1923
|
-
info: {
|
|
1924
|
-
default: "bg-info text-info-foreground hover:bg-info/90",
|
|
1925
|
-
outline: "border-info/30 text-info hover:bg-info/5 hover:border-info",
|
|
1926
|
-
ghost: "text-info hover:bg-info/10",
|
|
1927
|
-
link: "text-info"
|
|
1928
|
-
},
|
|
1929
|
-
success: {
|
|
1930
|
-
default: "bg-success text-success-foreground hover:bg-success/90",
|
|
1931
|
-
outline: "border-success/30 text-success hover:bg-success/5 hover:border-success",
|
|
1932
|
-
ghost: "text-success hover:bg-success/10",
|
|
1933
|
-
link: "text-success"
|
|
1934
|
-
},
|
|
1935
|
-
warning: {
|
|
1936
|
-
default: "bg-warning text-warning-foreground hover:bg-warning/90",
|
|
1937
|
-
outline: "border-warning/30 text-warning hover:bg-warning/5 hover:border-warning",
|
|
1938
|
-
ghost: "text-warning hover:bg-warning/10",
|
|
1939
|
-
link: "text-warning"
|
|
1940
|
-
},
|
|
1941
|
-
disabled: {
|
|
1942
|
-
default: "bg-disabled text-disabled-foreground",
|
|
1943
|
-
outline: "border-disabled/30 text-disabled",
|
|
1944
|
-
ghost: "text-disabled",
|
|
1945
|
-
link: "text-disabled"
|
|
1946
|
-
},
|
|
1947
|
-
gray: {
|
|
1948
|
-
default: "bg-gray text-gray-foreground hover:bg-gray/90",
|
|
1949
|
-
outline: "border-input text-gray hover:bg-gray/5 hover:border-gray",
|
|
1950
|
-
ghost: "text-gray hover:bg-gray/10",
|
|
1951
|
-
link: "text-gray"
|
|
1952
|
-
},
|
|
1953
|
-
mist: {
|
|
1954
|
-
default: "bg-mist text-mist-foreground hover:bg-mist/90",
|
|
1955
|
-
outline: "border-mist-border text-mist-foreground hover:bg-mist hover:border-mist-border",
|
|
1956
|
-
ghost: "text-mist-foreground hover:bg-mist",
|
|
1957
|
-
link: "text-mist-foreground"
|
|
1958
|
-
}
|
|
1959
|
-
};
|
|
1960
|
-
var primaryHoverRingClasses = "hover:ring-primary/90 focus-visible:ring-primary/90";
|
|
1961
|
-
var presetRingColors = {
|
|
1962
|
-
primary: "hover:ring-primary/90 focus-visible:ring-primary/90",
|
|
1963
|
-
secondary: "hover:ring-secondary/90 focus-visible:ring-secondary/90",
|
|
1964
|
-
error: "hover:ring-error/90 focus-visible:ring-error/90",
|
|
1965
|
-
info: "hover:ring-info/90 focus-visible:ring-info/90",
|
|
1966
|
-
success: "hover:ring-success/90 focus-visible:ring-success/90",
|
|
1967
|
-
warning: "hover:ring-warning/90 focus-visible:ring-warning/90",
|
|
1968
|
-
disabled: "hover:ring-disabled/90 focus-visible:ring-disabled/90",
|
|
1969
|
-
gray: "hover:ring-gray/90 focus-visible:ring-gray/90",
|
|
1970
|
-
mist: "hover:ring-mist-border focus-visible:ring-mist-border"
|
|
1971
|
-
};
|
|
1972
|
-
var presetFocusVisibleRingColors = {
|
|
1973
|
-
primary: "focus-visible:ring-primary/90",
|
|
1974
|
-
secondary: "focus-visible:ring-secondary/90",
|
|
1975
|
-
error: "focus-visible:ring-error/90",
|
|
1976
|
-
info: "focus-visible:ring-info/90",
|
|
1977
|
-
success: "focus-visible:ring-success/90",
|
|
1978
|
-
warning: "focus-visible:ring-warning/90",
|
|
1979
|
-
disabled: "focus-visible:ring-disabled/90",
|
|
1980
|
-
gray: "focus-visible:ring-gray/90",
|
|
1981
|
-
mist: "focus-visible:ring-mist-border"
|
|
1982
|
-
};
|
|
1983
|
-
var iconOnlyLabelClasses = {
|
|
1984
|
-
sm: "max-sm:sr-only",
|
|
1985
|
-
md: "max-md:sr-only"
|
|
1986
|
-
};
|
|
1987
|
-
var iconOnlyButtonClasses = {
|
|
1988
|
-
sm: {
|
|
1989
|
-
square: "max-sm:w-9 max-sm:gap-0 max-sm:px-0",
|
|
1990
|
-
squareLarge: "max-sm:w-10 max-sm:gap-0 max-sm:px-0",
|
|
1991
|
-
withEndIcon: "max-sm:px-2"
|
|
1992
|
-
},
|
|
1993
|
-
md: {
|
|
1994
|
-
square: "max-md:w-9 max-md:gap-0 max-md:px-0",
|
|
1995
|
-
squareLarge: "max-md:w-10 max-md:gap-0 max-md:px-0",
|
|
1996
|
-
withEndIcon: "max-md:px-2"
|
|
1997
|
-
}
|
|
1998
|
-
};
|
|
1999
|
-
function getIconOnlyButtonClasses(breakpoint, size, hasEndIcon) {
|
|
2000
|
-
if (!breakpoint || size === "icon") return void 0;
|
|
2001
|
-
const classes = iconOnlyButtonClasses[breakpoint];
|
|
2002
|
-
if (hasEndIcon) return classes.withEndIcon;
|
|
2003
|
-
if (size === "lg") return classes.squareLarge;
|
|
2004
|
-
return classes.square;
|
|
2005
|
-
}
|
|
2006
|
-
function ProgressBarOverlay() {
|
|
2007
|
-
const [progress, setProgress] = React.useState(10);
|
|
2008
|
-
React.useEffect(() => {
|
|
2009
|
-
if (progress >= 90) return;
|
|
2010
|
-
const timeout = setTimeout(() => {
|
|
2011
|
-
const increment = Math.random() * 15 + 5;
|
|
2012
|
-
setProgress((prev) => Math.min(prev + increment, 90));
|
|
2013
|
-
}, Math.random() * 800 + 200);
|
|
2014
|
-
return () => clearTimeout(timeout);
|
|
2015
|
-
}, [progress]);
|
|
2016
|
-
return /* @__PURE__ */ jsx(
|
|
2017
|
-
motion$1.div,
|
|
2018
|
-
{
|
|
2019
|
-
className: "absolute inset-y-0 left-0 bg-black/20 pointer-events-none rounded-[inherit]",
|
|
2020
|
-
initial: { width: "10%" },
|
|
2021
|
-
animate: { width: `${progress}%` },
|
|
2022
|
-
transition: { duration: 0.4, ease: "easeOut" }
|
|
2023
|
-
}
|
|
2024
|
-
);
|
|
2025
|
-
}
|
|
2026
|
-
var iconAnimateClasses = "transition-transform duration-200";
|
|
2027
|
-
var Button2 = React.forwardRef(
|
|
2028
|
-
({
|
|
2029
|
-
children,
|
|
2030
|
-
color = "primary",
|
|
2031
|
-
startIcon,
|
|
2032
|
-
endIcon,
|
|
2033
|
-
fullWidth = true,
|
|
2034
|
-
loading = false,
|
|
2035
|
-
loadingIndicator = "spinner",
|
|
2036
|
-
animateStartIconOnHover = false,
|
|
2037
|
-
animateEndIconOnHover = false,
|
|
2038
|
-
hideRingOnHover = false,
|
|
2039
|
-
usePrimaryColorOnHover = false,
|
|
2040
|
-
tooltip,
|
|
2041
|
-
iconOnlyBelow,
|
|
2042
|
-
disabled,
|
|
2043
|
-
className,
|
|
2044
|
-
variant = "default",
|
|
2045
|
-
size,
|
|
2046
|
-
...props
|
|
2047
|
-
}, ref) => {
|
|
2048
|
-
const needsGroup = animateStartIconOnHover || animateEndIconOnHover;
|
|
2049
|
-
const isProgressBar = loading && loadingIndicator === "progress-bar";
|
|
2050
|
-
const isSpinner = loading && loadingIndicator === "spinner";
|
|
2051
|
-
const resolvedVariant = variant ?? "default";
|
|
2052
|
-
const colorClasses2 = presetButtonColors[color]?.[resolvedVariant] ?? "";
|
|
2053
|
-
const ringClasses = presetRingColors[color] ?? "";
|
|
2054
|
-
const primaryHoverSurface = usePrimaryColorOnHover && (resolvedVariant === "outline" || resolvedVariant === "ghost");
|
|
2055
|
-
const primaryHoverLink = usePrimaryColorOnHover && resolvedVariant === "link";
|
|
2056
|
-
const label = iconOnlyBelow && children != null ? /* @__PURE__ */ jsx("span", { className: iconOnlyLabelClasses[iconOnlyBelow], children }) : children;
|
|
2057
|
-
const wrapIcon = (icon, direction) => {
|
|
2058
|
-
if (!icon) return null;
|
|
2059
|
-
const animate = direction === "start" ? animateStartIconOnHover : animateEndIconOnHover;
|
|
2060
|
-
if (!animate) return icon;
|
|
2061
|
-
const translateClass = direction === "start" ? "group-hover:-translate-x-0.5" : "group-hover:translate-x-0.5";
|
|
2062
|
-
return /* @__PURE__ */ jsx("span", { className: cn(iconAnimateClasses, translateClass), children: icon });
|
|
2063
|
-
};
|
|
2064
|
-
const button = /* @__PURE__ */ jsxs(
|
|
2065
|
-
Button,
|
|
2066
|
-
{
|
|
2067
|
-
ref,
|
|
2068
|
-
variant,
|
|
2069
|
-
size,
|
|
2070
|
-
disabled: disabled || loading,
|
|
2071
|
-
className: cn(
|
|
2072
|
-
colorClasses2,
|
|
2073
|
-
primaryHoverSurface && "hover:bg-primary/10",
|
|
2074
|
-
primaryHoverLink && "hover:text-primary",
|
|
2075
|
-
fullWidth && size !== "icon" && "w-full",
|
|
2076
|
-
needsGroup && "group",
|
|
2077
|
-
isProgressBar && "relative overflow-hidden",
|
|
2078
|
-
!hideRingOnHover && variant !== "link" && [
|
|
2079
|
-
"ring-offset-background transition-all duration-300",
|
|
2080
|
-
"hover:ring-2 hover:ring-offset-2 focus-visible:ring-2 focus-visible:ring-offset-2",
|
|
2081
|
-
primaryHoverSurface ? primaryHoverRingClasses : ringClasses
|
|
2082
|
-
],
|
|
2083
|
-
hideRingOnHover && variant !== "link" && [
|
|
2084
|
-
"ring-offset-background transition-all duration-300",
|
|
2085
|
-
"hover:ring-0 focus-visible:ring-2 focus-visible:ring-offset-2",
|
|
2086
|
-
primaryHoverSurface ? "focus-visible:ring-primary/90" : presetFocusVisibleRingColors[color]
|
|
2087
|
-
],
|
|
2088
|
-
variant === "link" && "hover:ring-0 focus-visible:underline",
|
|
2089
|
-
"shadow-none",
|
|
2090
|
-
getIconOnlyButtonClasses(iconOnlyBelow, size, Boolean(endIcon)),
|
|
2091
|
-
className
|
|
2092
|
-
),
|
|
2093
|
-
...props,
|
|
2094
|
-
children: [
|
|
2095
|
-
isProgressBar && /* @__PURE__ */ jsx(ProgressBarOverlay, {}),
|
|
2096
|
-
isProgressBar ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("span", { className: "relative z-10 inline-flex items-center gap-2", children: [
|
|
2097
|
-
wrapIcon(startIcon, "start"),
|
|
2098
|
-
label,
|
|
2099
|
-
wrapIcon(endIcon, "end")
|
|
2100
|
-
] }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2101
|
-
isSpinner ? /* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin" }) : wrapIcon(startIcon, "start"),
|
|
2102
|
-
label,
|
|
2103
|
-
!isSpinner && wrapIcon(endIcon, "end")
|
|
2104
|
-
] })
|
|
2105
|
-
]
|
|
2106
|
-
}
|
|
2107
|
-
);
|
|
2108
|
-
if (!tooltip) return button;
|
|
2109
|
-
return /* @__PURE__ */ jsx(Tooltip3, { content: tooltip, children: button });
|
|
2110
|
-
}
|
|
2111
|
-
);
|
|
2112
|
-
Button2.displayName = "Button";
|
|
2113
|
-
var buttonVariants2 = cva(
|
|
2114
|
-
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
|
2115
|
-
{
|
|
2116
|
-
variants: {
|
|
2117
|
-
variant: {
|
|
2118
|
-
default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
|
2119
|
-
destructive: "text-destructive [background:color-mix(in_oklab,var(--color-destructive)_15%,transparent)] hover:[background:color-mix(in_oklab,var(--color-destructive)_20%,transparent)]",
|
|
2120
|
-
outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
|
2121
|
-
secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
|
2122
|
-
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
2123
|
-
link: "text-primary underline-offset-4 hover:underline"
|
|
2124
|
-
},
|
|
2125
|
-
size: {
|
|
2126
|
-
default: "h-9 px-4 py-2",
|
|
2127
|
-
sm: "h-8 rounded-md px-3 text-xs",
|
|
2128
|
-
lg: "h-10 rounded-md px-8",
|
|
2129
|
-
icon: "h-9 w-9"
|
|
2130
|
-
}
|
|
2131
|
-
},
|
|
2132
|
-
defaultVariants: {
|
|
2133
|
-
variant: "default",
|
|
2134
|
-
size: "default"
|
|
2135
|
-
}
|
|
2136
|
-
}
|
|
2137
|
-
);
|
|
2138
|
-
var Button3 = React.forwardRef(
|
|
2139
|
-
({ className, variant, size, asChild = false, type, ...props }, ref) => {
|
|
2140
|
-
const Comp = asChild ? Slot$1 : "button";
|
|
2141
|
-
return /* @__PURE__ */ jsx(
|
|
2142
|
-
Comp,
|
|
2143
|
-
{
|
|
2144
|
-
className: cn(buttonVariants2({ variant, size, className })),
|
|
2145
|
-
ref,
|
|
2146
|
-
type: asChild ? type : type ?? "button",
|
|
2147
|
-
...props
|
|
2148
|
-
}
|
|
2149
|
-
);
|
|
2150
|
-
}
|
|
2151
|
-
);
|
|
2152
|
-
Button3.displayName = "Button";
|
|
2153
|
-
var craftButtonBgClasses = {
|
|
2154
|
-
primary: "bg-primary text-primary-foreground",
|
|
2155
|
-
secondary: "bg-secondary text-secondary-foreground",
|
|
2156
|
-
error: "bg-error text-error-foreground",
|
|
2157
|
-
info: "bg-info text-info-foreground",
|
|
2158
|
-
success: "bg-success text-success-foreground",
|
|
2159
|
-
warning: "bg-warning text-warning-foreground",
|
|
2160
|
-
disabled: "bg-disabled text-disabled-foreground",
|
|
2161
|
-
gray: "bg-gray text-gray-foreground",
|
|
2162
|
-
mist: "bg-mist text-mist-foreground"
|
|
2163
|
-
};
|
|
2164
|
-
var craftButtonDarkBorderClasses = {
|
|
2165
|
-
primary: "dark:hover:border-primary/30",
|
|
2166
|
-
secondary: "dark:hover:border-secondary/30",
|
|
2167
|
-
error: "dark:hover:border-error/30",
|
|
2168
|
-
info: "dark:hover:border-info/30",
|
|
2169
|
-
success: "dark:hover:border-success/30",
|
|
2170
|
-
warning: "dark:hover:border-warning/30",
|
|
2171
|
-
disabled: "dark:hover:border-disabled/30",
|
|
2172
|
-
gray: "dark:hover:border-gray/30",
|
|
2173
|
-
mist: "dark:hover:border-mist-border/30"
|
|
2174
|
-
};
|
|
2175
|
-
var craftIconColorClasses = {
|
|
2176
|
-
primary: "text-primary group-hover:bg-primary group-hover:text-primary-foreground",
|
|
2177
|
-
secondary: "text-secondary group-hover:bg-secondary group-hover:text-secondary-foreground",
|
|
2178
|
-
error: "text-error group-hover:bg-error group-hover:text-error-foreground",
|
|
2179
|
-
info: "text-info group-hover:bg-info group-hover:text-info-foreground",
|
|
2180
|
-
success: "text-success group-hover:bg-success group-hover:text-success-foreground",
|
|
2181
|
-
warning: "text-warning group-hover:bg-warning group-hover:text-warning-foreground",
|
|
2182
|
-
disabled: "text-disabled group-hover:bg-disabled group-hover:text-disabled-foreground",
|
|
2183
|
-
gray: "text-gray group-hover:bg-gray group-hover:text-gray-foreground",
|
|
2184
|
-
mist: "text-mist-foreground group-hover:bg-mist group-hover:text-mist-foreground"
|
|
2185
|
-
};
|
|
2186
|
-
var CraftButtonContext = React.createContext({});
|
|
2187
|
-
function CraftButtonLabel({ children, className }) {
|
|
2188
|
-
return /* @__PURE__ */ jsx(
|
|
2189
|
-
"span",
|
|
2190
|
-
{
|
|
2191
|
-
className: cn(
|
|
2192
|
-
"group-hover:text-foreground relative z-2 transition-colors duration-500",
|
|
2193
|
-
className
|
|
2194
|
-
),
|
|
2195
|
-
children
|
|
2196
|
-
}
|
|
2197
|
-
);
|
|
2198
|
-
}
|
|
2199
|
-
function CraftButtonIcon({ children, className }) {
|
|
2200
|
-
const { size, color = "primary" } = React.useContext(CraftButtonContext);
|
|
2201
|
-
const iconSize = size === "lg" ? "size-6" : size === "sm" ? "size-4" : "size-5";
|
|
2202
|
-
return /* @__PURE__ */ jsxs("span", { className: cn("relative z-1", iconSize, className), children: [
|
|
2203
|
-
/* @__PURE__ */ jsx(
|
|
2204
|
-
"span",
|
|
2205
|
-
{
|
|
2206
|
-
className: cn(
|
|
2207
|
-
"bg-background absolute inset-0 -z-1 rounded-full transition-transform duration-500 group-hover:scale-[15]",
|
|
2208
|
-
iconSize
|
|
2209
|
-
)
|
|
2210
|
-
}
|
|
2211
|
-
),
|
|
2212
|
-
/* @__PURE__ */ jsx(
|
|
2213
|
-
"span",
|
|
2214
|
-
{
|
|
2215
|
-
className: cn(
|
|
2216
|
-
"bg-background relative z-2 flex items-center justify-center rounded-full transition-all duration-500",
|
|
2217
|
-
craftIconColorClasses[color],
|
|
2218
|
-
iconSize
|
|
2219
|
-
),
|
|
2220
|
-
children
|
|
2221
|
-
}
|
|
2222
|
-
)
|
|
2223
|
-
] });
|
|
2224
|
-
}
|
|
2225
|
-
function CraftButton(props) {
|
|
2226
|
-
const {
|
|
2227
|
-
children,
|
|
2228
|
-
size,
|
|
2229
|
-
color = "primary",
|
|
2230
|
-
asChild = false,
|
|
2231
|
-
className,
|
|
2232
|
-
...rest
|
|
2233
|
-
} = props;
|
|
2234
|
-
return /* @__PURE__ */ jsx(CraftButtonContext.Provider, { value: { size, color }, children: /* @__PURE__ */ jsx(
|
|
2235
|
-
Button3,
|
|
2236
|
-
{
|
|
2237
|
-
size,
|
|
2238
|
-
asChild,
|
|
2239
|
-
className: cn(
|
|
2240
|
-
craftButtonBgClasses[color],
|
|
2241
|
-
"group hover:bg-background relative cursor-pointer overflow-hidden rounded-full duration-500 hover:shadow-md dark:border dark:border-transparent",
|
|
2242
|
-
craftButtonDarkBorderClasses[color],
|
|
2243
|
-
className
|
|
2244
|
-
),
|
|
2245
|
-
...rest,
|
|
2246
|
-
children
|
|
2247
|
-
}
|
|
2248
|
-
) });
|
|
2249
|
-
}
|
|
2250
|
-
function InvertButton({ label, icon, ...props }) {
|
|
2251
|
-
return /* @__PURE__ */ jsxs(CraftButton, { ...props, children: [
|
|
2252
|
-
/* @__PURE__ */ jsx(CraftButtonLabel, { children: label }),
|
|
2253
|
-
/* @__PURE__ */ jsx(CraftButtonIcon, { children: icon ?? /* @__PURE__ */ jsx(ArrowUpRightIcon, { className: "size-3 stroke-2 transition-transform duration-500 group-hover:rotate-45" }) })
|
|
2254
|
-
] });
|
|
2255
|
-
}
|
|
2256
|
-
var flashButtonBgClasses = {
|
|
2257
|
-
primary: "bg-primary hover:bg-background text-primary-foreground",
|
|
2258
|
-
secondary: "bg-secondary hover:bg-background text-secondary-foreground",
|
|
2259
|
-
error: "bg-error hover:bg-background text-error-foreground",
|
|
2260
|
-
info: "bg-info hover:bg-background text-info-foreground",
|
|
2261
|
-
success: "bg-success hover:bg-background text-success-foreground",
|
|
2262
|
-
warning: "bg-warning hover:bg-background text-warning-foreground",
|
|
2263
|
-
disabled: "bg-disabled hover:bg-background text-disabled-foreground",
|
|
2264
|
-
gray: "bg-gray hover:bg-background text-gray-foreground",
|
|
2265
|
-
mist: "bg-mist hover:bg-background text-mist-foreground"
|
|
2266
|
-
};
|
|
2267
|
-
var flashOverlayClasses = {
|
|
2268
|
-
primary: "bg-primary",
|
|
2269
|
-
secondary: "bg-secondary",
|
|
2270
|
-
error: "bg-error",
|
|
2271
|
-
info: "bg-info",
|
|
2272
|
-
success: "bg-success",
|
|
2273
|
-
warning: "bg-warning",
|
|
2274
|
-
disabled: "bg-disabled",
|
|
2275
|
-
gray: "bg-gray",
|
|
2276
|
-
mist: "bg-mist"
|
|
2277
|
-
};
|
|
2278
|
-
var flashButtonDarkBorderClasses = {
|
|
2279
|
-
primary: "dark:hover:border-primary/30",
|
|
2280
|
-
secondary: "dark:hover:border-secondary/30",
|
|
2281
|
-
error: "dark:hover:border-error/30",
|
|
2282
|
-
info: "dark:hover:border-info/30",
|
|
2283
|
-
success: "dark:hover:border-success/30",
|
|
2284
|
-
warning: "dark:hover:border-warning/30",
|
|
2285
|
-
disabled: "dark:hover:border-disabled/30",
|
|
2286
|
-
gray: "dark:hover:border-gray/30",
|
|
2287
|
-
mist: "dark:hover:border-mist-border/30"
|
|
2288
|
-
};
|
|
2289
|
-
function FlashButton({
|
|
2290
|
-
label,
|
|
2291
|
-
icon,
|
|
2292
|
-
iconPosition = "end",
|
|
2293
|
-
hideIcon = false,
|
|
2294
|
-
size,
|
|
2295
|
-
color = "primary",
|
|
2296
|
-
className,
|
|
2297
|
-
onMouseEnter,
|
|
2298
|
-
onMouseLeave,
|
|
2299
|
-
...props
|
|
2300
|
-
}) {
|
|
2301
|
-
const [scope, animate] = useAnimate();
|
|
2302
|
-
const isHovering = React.useRef(false);
|
|
2303
|
-
const flashLoop = React.useCallback(async () => {
|
|
2304
|
-
while (isHovering.current && scope.current) {
|
|
2305
|
-
const peakOpacity = 0.5 + Math.random() * 0.5;
|
|
2306
|
-
try {
|
|
2307
|
-
await animate(
|
|
2308
|
-
scope.current,
|
|
2309
|
-
{ opacity: [0, peakOpacity, 0] },
|
|
2310
|
-
{ duration: 0.08 + Math.random() * 0.14, ease: "easeOut" }
|
|
2311
|
-
);
|
|
2312
|
-
} catch {
|
|
2313
|
-
break;
|
|
2314
|
-
}
|
|
2315
|
-
if (!isHovering.current) break;
|
|
2316
|
-
const pause = 60 + Math.random() * 250;
|
|
2317
|
-
await new Promise((r) => setTimeout(r, pause));
|
|
2318
|
-
}
|
|
2319
|
-
}, [animate, scope]);
|
|
2320
|
-
const handleMouseEnter = React.useCallback(
|
|
2321
|
-
(e) => {
|
|
2322
|
-
isHovering.current = true;
|
|
2323
|
-
flashLoop();
|
|
2324
|
-
onMouseEnter?.(e);
|
|
2325
|
-
},
|
|
2326
|
-
[flashLoop, onMouseEnter]
|
|
2327
|
-
);
|
|
2328
|
-
const handleMouseLeave = React.useCallback(
|
|
2329
|
-
(e) => {
|
|
2330
|
-
isHovering.current = false;
|
|
2331
|
-
if (scope.current) {
|
|
2332
|
-
animate(scope.current, { opacity: 0 }, { duration: 0.05 });
|
|
2333
|
-
}
|
|
2334
|
-
onMouseLeave?.(e);
|
|
2335
|
-
},
|
|
2336
|
-
[animate, scope, onMouseLeave]
|
|
2337
|
-
);
|
|
2338
|
-
const iconSize = size === "lg" ? "size-4" : size === "sm" ? "size-2.5" : "size-3";
|
|
2339
|
-
return /* @__PURE__ */ jsxs(
|
|
2340
|
-
Button3,
|
|
2341
|
-
{
|
|
2342
|
-
size,
|
|
2343
|
-
className: cn(
|
|
2344
|
-
flashButtonBgClasses[color],
|
|
2345
|
-
"group relative cursor-pointer gap-1.5 overflow-hidden rounded-full transition-all duration-500 hover:shadow-md dark:border dark:border-transparent",
|
|
2346
|
-
flashButtonDarkBorderClasses[color],
|
|
2347
|
-
className
|
|
2348
|
-
),
|
|
2349
|
-
onMouseEnter: handleMouseEnter,
|
|
2350
|
-
onMouseLeave: handleMouseLeave,
|
|
2351
|
-
...props,
|
|
2352
|
-
children: [
|
|
2353
|
-
/* @__PURE__ */ jsx(
|
|
2354
|
-
"span",
|
|
2355
|
-
{
|
|
2356
|
-
ref: scope,
|
|
2357
|
-
className: cn(
|
|
2358
|
-
"pointer-events-none absolute inset-0 z-0 rounded-[inherit] opacity-0",
|
|
2359
|
-
flashOverlayClasses[color]
|
|
2360
|
-
)
|
|
2361
|
-
}
|
|
2362
|
-
),
|
|
2363
|
-
!hideIcon && iconPosition === "start" && /* @__PURE__ */ jsx("span", { className: "relative z-[1]", children: icon ?? /* @__PURE__ */ jsx(
|
|
2364
|
-
ZapIcon,
|
|
2365
|
-
{
|
|
2366
|
-
className: cn(
|
|
2367
|
-
iconSize,
|
|
2368
|
-
"stroke-2 transition-all duration-500 group-hover:scale-110 group-hover:text-foreground"
|
|
2369
|
-
)
|
|
2370
|
-
}
|
|
2371
|
-
) }),
|
|
2372
|
-
/* @__PURE__ */ jsx("span", { className: "relative z-[1] transition-colors duration-500 group-hover:text-foreground", children: label }),
|
|
2373
|
-
!hideIcon && iconPosition === "end" && /* @__PURE__ */ jsx("span", { className: "relative z-[1]", children: icon ?? /* @__PURE__ */ jsx(
|
|
2374
|
-
ZapIcon,
|
|
2375
|
-
{
|
|
2376
|
-
className: cn(
|
|
2377
|
-
iconSize,
|
|
2378
|
-
"stroke-2 transition-all duration-500 group-hover:scale-110 group-hover:text-foreground"
|
|
2379
|
-
)
|
|
2380
|
-
}
|
|
2381
|
-
) })
|
|
2382
|
-
]
|
|
2383
|
-
}
|
|
2384
|
-
);
|
|
2385
|
-
}
|
|
2386
|
-
function Button4({
|
|
2387
|
-
hoverScale = 1.05,
|
|
2388
|
-
tapScale = 0.95,
|
|
2389
|
-
asChild = false,
|
|
2390
|
-
...props
|
|
2391
|
-
}) {
|
|
2392
|
-
const Component = asChild ? Slot : motion.button;
|
|
2393
|
-
return /* @__PURE__ */ jsx(
|
|
2394
|
-
Component,
|
|
2395
|
-
{
|
|
2396
|
-
whileTap: { scale: tapScale },
|
|
2397
|
-
whileHover: { scale: hoverScale },
|
|
2398
|
-
...props
|
|
2399
|
-
}
|
|
2400
|
-
);
|
|
2401
|
-
}
|
|
2402
|
-
var buttonVariants3 = cva(
|
|
2403
|
-
"flex items-center justify-center rounded-md transition-[box-shadow,_color,_background-color,_border-color,_outline-color,_text-decoration-color,_fill,_stroke] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
2404
|
-
{
|
|
2405
|
-
variants: {
|
|
2406
|
-
variant: {
|
|
2407
|
-
default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
|
2408
|
-
accent: "bg-accent text-accent-foreground shadow-xs hover:bg-accent/90",
|
|
2409
|
-
destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
2410
|
-
outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
2411
|
-
secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
|
2412
|
-
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
2413
|
-
link: "text-primary underline-offset-4 hover:underline"
|
|
2414
|
-
},
|
|
2415
|
-
size: {
|
|
2416
|
-
default: "size-9",
|
|
2417
|
-
sm: "size-8 rounded-md",
|
|
2418
|
-
lg: "size-10 rounded-md"
|
|
2419
|
-
}
|
|
2420
|
-
},
|
|
2421
|
-
defaultVariants: {
|
|
2422
|
-
variant: "default",
|
|
2423
|
-
size: "default"
|
|
2424
|
-
}
|
|
2425
|
-
}
|
|
2426
|
-
);
|
|
2427
|
-
function CopyButton({
|
|
2428
|
-
className,
|
|
2429
|
-
content,
|
|
2430
|
-
copied,
|
|
2431
|
-
onCopiedChange,
|
|
2432
|
-
onClick,
|
|
2433
|
-
variant,
|
|
2434
|
-
size,
|
|
2435
|
-
delay = 3e3,
|
|
2436
|
-
...props
|
|
2437
|
-
}) {
|
|
2438
|
-
const [isCopied, setIsCopied] = useControlledState({
|
|
2439
|
-
value: copied,
|
|
2440
|
-
onChange: onCopiedChange
|
|
2441
|
-
});
|
|
2442
|
-
const handleCopy = React.useCallback(
|
|
2443
|
-
(e) => {
|
|
2444
|
-
onClick?.(e);
|
|
2445
|
-
if (copied) return;
|
|
2446
|
-
if (content) {
|
|
2447
|
-
navigator.clipboard.writeText(content).then(() => {
|
|
2448
|
-
setIsCopied(true);
|
|
2449
|
-
onCopiedChange?.(true, content);
|
|
2450
|
-
setTimeout(() => {
|
|
2451
|
-
setIsCopied(false);
|
|
2452
|
-
onCopiedChange?.(false);
|
|
2453
|
-
}, delay);
|
|
2454
|
-
}).catch((error) => {
|
|
2455
|
-
console.error("Error copying command", error);
|
|
2456
|
-
});
|
|
2457
|
-
}
|
|
2458
|
-
},
|
|
2459
|
-
[onClick, copied, content, setIsCopied, onCopiedChange, delay]
|
|
2460
|
-
);
|
|
2461
|
-
const Icon = isCopied ? CheckIcon : CopyIcon;
|
|
2462
|
-
return /* @__PURE__ */ jsx(
|
|
2463
|
-
Button4,
|
|
2464
|
-
{
|
|
2465
|
-
"data-slot": "copy-button",
|
|
2466
|
-
className: cn(buttonVariants3({ variant, size, className })),
|
|
2467
|
-
onClick: handleCopy,
|
|
2468
|
-
...props,
|
|
2469
|
-
children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsx(
|
|
2470
|
-
motion.span,
|
|
2471
|
-
{
|
|
2472
|
-
"data-slot": "copy-button-icon",
|
|
2473
|
-
initial: { scale: 0, opacity: 0.4, filter: "blur(4px)" },
|
|
2474
|
-
animate: { scale: 1, opacity: 1, filter: "blur(0px)" },
|
|
2475
|
-
exit: { scale: 0, opacity: 0.4, filter: "blur(4px)" },
|
|
2476
|
-
transition: { duration: 0.25 },
|
|
2477
|
-
children: /* @__PURE__ */ jsx(Icon, {})
|
|
2478
|
-
},
|
|
2479
|
-
isCopied ? "check" : "copy"
|
|
2480
|
-
) })
|
|
2481
|
-
}
|
|
2482
|
-
);
|
|
2483
|
-
}
|
|
2484
|
-
function hasHorizontalScrollBarChild(children) {
|
|
2485
|
-
return React.Children.toArray(children).some(
|
|
2486
|
-
(child) => React.isValidElement(child) && child.type === ScrollBar && child.props.orientation === "horizontal"
|
|
2487
|
-
);
|
|
2488
|
-
}
|
|
2489
|
-
var ScrollArea = React.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => {
|
|
2490
|
-
const scrollsX = orientation !== "vertical" || hasHorizontalScrollBarChild(children);
|
|
2491
|
-
const scrollsY = orientation !== "horizontal";
|
|
2492
|
-
return /* @__PURE__ */ jsxs(
|
|
2493
|
-
ScrollAreaPrimitive.Root,
|
|
2494
|
-
{
|
|
2495
|
-
ref,
|
|
2496
|
-
className: cn("relative overflow-hidden", className),
|
|
2497
|
-
...props,
|
|
2498
|
-
children: [
|
|
2499
|
-
/* @__PURE__ */ jsx(
|
|
2500
|
-
ScrollAreaPrimitive.Viewport,
|
|
2501
|
-
{
|
|
2502
|
-
className: cn(
|
|
2503
|
-
"h-full w-full rounded-[inherit]",
|
|
2504
|
-
// Radix wraps children in an inline-styled `display: table` div that
|
|
2505
|
-
// grows to fit its widest child. Without horizontal scrolling that
|
|
2506
|
-
// only clips content, so make it a block at the viewport's width.
|
|
2507
|
-
!scrollsX && "[&>div]:block!"
|
|
2508
|
-
),
|
|
2509
|
-
children
|
|
2510
|
-
}
|
|
2511
|
-
),
|
|
2512
|
-
scrollsY && /* @__PURE__ */ jsx(ScrollBar, {}),
|
|
2513
|
-
orientation !== "vertical" && /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }),
|
|
2514
|
-
/* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
|
|
2515
|
-
]
|
|
2516
|
-
}
|
|
2517
|
-
);
|
|
2518
|
-
});
|
|
2519
|
-
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
|
|
2520
|
-
var ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2521
|
-
ScrollAreaPrimitive.ScrollAreaScrollbar,
|
|
2522
|
-
{
|
|
2523
|
-
ref,
|
|
2524
|
-
orientation,
|
|
2525
|
-
className: cn(
|
|
2526
|
-
"flex touch-none select-none transition-colors",
|
|
2527
|
-
orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
|
|
2528
|
-
orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
|
|
2529
|
-
className
|
|
2530
|
-
),
|
|
2531
|
-
...props,
|
|
2532
|
-
children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
|
|
2533
|
-
}
|
|
2534
|
-
));
|
|
2535
|
-
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
|
|
2536
|
-
function Menu({
|
|
2537
|
-
children,
|
|
2538
|
-
trigger,
|
|
2539
|
-
align = "end",
|
|
2540
|
-
side = "bottom",
|
|
2541
|
-
sideOffset = 4,
|
|
2542
|
-
minWidth
|
|
2543
|
-
}) {
|
|
2544
|
-
return /* @__PURE__ */ jsxs(DropdownMenu2, { children: [
|
|
2545
|
-
/* @__PURE__ */ jsx(DropdownMenuTrigger2, { asChild: true, children: trigger }),
|
|
2546
|
-
/* @__PURE__ */ jsx(
|
|
2547
|
-
DropdownMenuContent2,
|
|
2548
|
-
{
|
|
2549
|
-
align,
|
|
2550
|
-
side,
|
|
2551
|
-
sideOffset,
|
|
2552
|
-
className: "",
|
|
2553
|
-
style: minWidth ? {
|
|
2554
|
-
minWidth: typeof minWidth === "number" ? `${minWidth}px` : minWidth
|
|
2555
|
-
} : void 0,
|
|
2556
|
-
children
|
|
2557
|
-
}
|
|
2558
|
-
)
|
|
2559
|
-
] });
|
|
2560
|
-
}
|
|
2561
|
-
var [SheetProvider, useSheet] = getStrictContext("SheetContext");
|
|
2562
|
-
function Sheet(props) {
|
|
2563
|
-
const [isOpen, setIsOpen] = useControlledState({
|
|
2564
|
-
value: props.open,
|
|
2565
|
-
defaultValue: props.defaultOpen,
|
|
2566
|
-
onChange: props.onOpenChange
|
|
2567
|
-
});
|
|
2568
|
-
return /* @__PURE__ */ jsx(SheetProvider, { value: { isOpen, setIsOpen }, children: /* @__PURE__ */ jsx(
|
|
2569
|
-
Dialog.Root,
|
|
2570
|
-
{
|
|
2571
|
-
"data-slot": "sheet",
|
|
2572
|
-
...props,
|
|
2573
|
-
onOpenChange: setIsOpen
|
|
2574
|
-
}
|
|
2575
|
-
) });
|
|
2576
|
-
}
|
|
2577
|
-
function SheetTrigger(props) {
|
|
2578
|
-
return /* @__PURE__ */ jsx(Dialog.Trigger, { "data-slot": "sheet-trigger", ...props });
|
|
2579
|
-
}
|
|
2580
|
-
function SheetClose(props) {
|
|
2581
|
-
return /* @__PURE__ */ jsx(Dialog.Close, { "data-slot": "sheet-close", ...props });
|
|
2582
|
-
}
|
|
2583
|
-
function SheetPortal(props) {
|
|
2584
|
-
return /* @__PURE__ */ jsx(Dialog.Portal, { forceMount: true, "data-slot": "sheet-portal", ...props });
|
|
2585
|
-
}
|
|
2586
|
-
function SheetOverlay({
|
|
2587
|
-
transition = { duration: 0.2, ease: "easeInOut" },
|
|
2588
|
-
...props
|
|
2589
|
-
}) {
|
|
2590
|
-
const { isOpen } = useSheet();
|
|
2591
|
-
return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(Dialog.Overlay, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx(
|
|
2592
|
-
motion.div,
|
|
2593
|
-
{
|
|
2594
|
-
"data-slot": "sheet-overlay",
|
|
2595
|
-
initial: { opacity: 0, filter: "blur(4px)" },
|
|
2596
|
-
animate: { opacity: 1, filter: "blur(0px)" },
|
|
2597
|
-
exit: { opacity: 0, filter: "blur(4px)" },
|
|
2598
|
-
transition,
|
|
2599
|
-
...props
|
|
2600
|
-
},
|
|
2601
|
-
"sheet-overlay"
|
|
2602
|
-
) }) });
|
|
2603
|
-
}
|
|
2604
|
-
function SheetContent({
|
|
2605
|
-
side = "right",
|
|
2606
|
-
transition = { type: "spring", stiffness: 150, damping: 22 },
|
|
2607
|
-
style,
|
|
2608
|
-
children,
|
|
2609
|
-
...props
|
|
2610
|
-
}) {
|
|
2611
|
-
const { isOpen } = useSheet();
|
|
2612
|
-
const axis = side === "left" || side === "right" ? "x" : "y";
|
|
2613
|
-
const offscreen = {
|
|
2614
|
-
right: { x: "100%", opacity: 0 },
|
|
2615
|
-
left: { x: "-100%", opacity: 0 },
|
|
2616
|
-
top: { y: "-100%", opacity: 0 },
|
|
2617
|
-
bottom: { y: "100%", opacity: 0 }
|
|
2618
|
-
};
|
|
2619
|
-
const positionStyle = {
|
|
2620
|
-
right: { insetBlock: 0, right: 0 },
|
|
2621
|
-
left: { insetBlock: 0, left: 0 },
|
|
2622
|
-
top: { insetInline: 0, top: 0 },
|
|
2623
|
-
bottom: { insetInline: 0, bottom: 0 }
|
|
2624
|
-
};
|
|
2625
|
-
return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(Dialog.Content, { asChild: true, forceMount: true, ...props, children: /* @__PURE__ */ jsx(
|
|
2626
|
-
motion.div,
|
|
2627
|
-
{
|
|
2628
|
-
"data-slot": "sheet-content",
|
|
2629
|
-
"data-side": side,
|
|
2630
|
-
initial: offscreen[side],
|
|
2631
|
-
animate: { [axis]: 0, opacity: 1 },
|
|
2632
|
-
exit: offscreen[side],
|
|
2633
|
-
style: {
|
|
2634
|
-
position: "fixed",
|
|
2635
|
-
...positionStyle[side],
|
|
2636
|
-
...style
|
|
2637
|
-
},
|
|
2638
|
-
transition,
|
|
2639
|
-
children
|
|
2640
|
-
},
|
|
2641
|
-
"sheet-content"
|
|
2642
|
-
) }) });
|
|
2643
|
-
}
|
|
2644
|
-
function SheetHeader(props) {
|
|
2645
|
-
return /* @__PURE__ */ jsx("div", { "data-slot": "sheet-header", ...props });
|
|
2646
|
-
}
|
|
2647
|
-
function SheetFooter(props) {
|
|
2648
|
-
return /* @__PURE__ */ jsx("div", { "data-slot": "sheet-footer", ...props });
|
|
2649
|
-
}
|
|
2650
|
-
function SheetTitle(props) {
|
|
2651
|
-
return /* @__PURE__ */ jsx(Dialog.Title, { "data-slot": "sheet-title", ...props });
|
|
2652
|
-
}
|
|
2653
|
-
function SheetDescription(props) {
|
|
2654
|
-
return /* @__PURE__ */ jsx(Dialog.Description, { "data-slot": "sheet-description", ...props });
|
|
2655
|
-
}
|
|
2656
|
-
var SheetFloatingContext = React.createContext(false);
|
|
2657
|
-
var SheetDismissContext = React.createContext({
|
|
2658
|
-
closeOnEscape: true,
|
|
2659
|
-
closeOnOutsideClick: true
|
|
2660
|
-
});
|
|
2661
|
-
function Sheet2({
|
|
2662
|
-
floating = false,
|
|
2663
|
-
closeOnEscape = true,
|
|
2664
|
-
closeOnOutsideClick = true,
|
|
2665
|
-
...props
|
|
2666
|
-
}) {
|
|
2667
|
-
const dismissBehavior = React.useMemo(
|
|
2668
|
-
() => ({ closeOnEscape, closeOnOutsideClick }),
|
|
2669
|
-
[closeOnEscape, closeOnOutsideClick]
|
|
2670
|
-
);
|
|
2671
|
-
return /* @__PURE__ */ jsx(SheetFloatingContext.Provider, { value: floating, children: /* @__PURE__ */ jsx(SheetDismissContext.Provider, { value: dismissBehavior, children: /* @__PURE__ */ jsx(Sheet, { ...props }) }) });
|
|
2672
|
-
}
|
|
2673
|
-
function SheetTrigger2(props) {
|
|
2674
|
-
return /* @__PURE__ */ jsx(SheetTrigger, { ...props });
|
|
2675
|
-
}
|
|
2676
|
-
function SheetOverlay2({ className, ...props }) {
|
|
2677
|
-
return /* @__PURE__ */ jsx(
|
|
2678
|
-
SheetOverlay,
|
|
2679
|
-
{
|
|
2680
|
-
className: cn("fixed inset-0 z-50 bg-black/50", className),
|
|
2681
|
-
...props
|
|
2682
|
-
}
|
|
2683
|
-
);
|
|
2684
|
-
}
|
|
2685
|
-
function SheetClose2(props) {
|
|
2686
|
-
return /* @__PURE__ */ jsx(SheetClose, { ...props });
|
|
2687
|
-
}
|
|
2688
|
-
function SheetContent2({
|
|
2689
|
-
className,
|
|
2690
|
-
children,
|
|
2691
|
-
side = "right",
|
|
2692
|
-
showCloseButton = true,
|
|
2693
|
-
onEscapeKeyDown,
|
|
2694
|
-
onPointerDownOutside,
|
|
2695
|
-
...props
|
|
2696
|
-
}) {
|
|
2697
|
-
const floating = React.useContext(SheetFloatingContext);
|
|
2698
|
-
const { closeOnEscape, closeOnOutsideClick } = React.useContext(SheetDismissContext);
|
|
2699
|
-
const closeClassName = "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none";
|
|
2700
|
-
if (floating) {
|
|
2701
|
-
return /* @__PURE__ */ jsxs(SheetPortal, { children: [
|
|
2702
|
-
/* @__PURE__ */ jsx(SheetOverlay2, {}),
|
|
2703
|
-
/* @__PURE__ */ jsx(
|
|
2704
|
-
SheetContent,
|
|
2705
|
-
{
|
|
2706
|
-
className: cn(
|
|
2707
|
-
"fixed z-50 !p-3",
|
|
2708
|
-
side === "right" && "h-full w-[350px] max-w-full",
|
|
2709
|
-
side === "left" && "h-full w-[350px] max-w-full",
|
|
2710
|
-
side === "top" && "h-[350px] w-full",
|
|
2711
|
-
side === "bottom" && "h-[350px] w-full",
|
|
2712
|
-
className
|
|
2713
|
-
),
|
|
2714
|
-
side,
|
|
2715
|
-
onEscapeKeyDown: (event) => {
|
|
2716
|
-
onEscapeKeyDown?.(event);
|
|
2717
|
-
if (!closeOnEscape) event.preventDefault();
|
|
2718
|
-
},
|
|
2719
|
-
onPointerDownOutside: (event) => {
|
|
2720
|
-
onPointerDownOutside?.(event);
|
|
2721
|
-
if (!closeOnOutsideClick) event.preventDefault();
|
|
2722
|
-
},
|
|
2723
|
-
...props,
|
|
2724
|
-
children: /* @__PURE__ */ jsxs("div", { className: "bg-background relative flex h-full flex-col gap-0 rounded-lg shadow-lg overflow-auto", children: [
|
|
2725
|
-
children,
|
|
2726
|
-
showCloseButton && /* @__PURE__ */ jsxs(SheetClose2, { className: closeClassName, children: [
|
|
2727
|
-
/* @__PURE__ */ jsx(XIcon, { className: "size-4" }),
|
|
2728
|
-
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
|
|
2729
|
-
] })
|
|
2730
|
-
] })
|
|
2731
|
-
}
|
|
2732
|
-
)
|
|
2733
|
-
] });
|
|
2734
|
-
}
|
|
2735
|
-
return /* @__PURE__ */ jsxs(SheetPortal, { children: [
|
|
2736
|
-
/* @__PURE__ */ jsx(SheetOverlay2, {}),
|
|
2737
|
-
/* @__PURE__ */ jsxs(
|
|
2738
|
-
SheetContent,
|
|
2739
|
-
{
|
|
2740
|
-
className: cn(
|
|
2741
|
-
"bg-background fixed z-50 flex flex-col gap-0 shadow-lg",
|
|
2742
|
-
side === "right" && "h-full w-[350px] max-w-full border-l",
|
|
2743
|
-
side === "left" && "h-full w-[350px] max-w-full border-r",
|
|
2744
|
-
side === "top" && "h-[350px] w-full border-b",
|
|
2745
|
-
side === "bottom" && "h-[350px] w-full border-t",
|
|
2746
|
-
className
|
|
2747
|
-
),
|
|
2748
|
-
side,
|
|
2749
|
-
onEscapeKeyDown: (event) => {
|
|
2750
|
-
onEscapeKeyDown?.(event);
|
|
2751
|
-
if (!closeOnEscape) event.preventDefault();
|
|
2752
|
-
},
|
|
2753
|
-
onPointerDownOutside: (event) => {
|
|
2754
|
-
onPointerDownOutside?.(event);
|
|
2755
|
-
if (!closeOnOutsideClick) event.preventDefault();
|
|
2756
|
-
},
|
|
2757
|
-
...props,
|
|
2758
|
-
children: [
|
|
2759
|
-
children,
|
|
2760
|
-
showCloseButton && /* @__PURE__ */ jsxs(SheetClose2, { className: closeClassName, children: [
|
|
2761
|
-
/* @__PURE__ */ jsx(XIcon, { className: "size-4" }),
|
|
2762
|
-
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
|
|
2763
|
-
] })
|
|
2764
|
-
]
|
|
2765
|
-
}
|
|
2766
|
-
)
|
|
2767
|
-
] });
|
|
2768
|
-
}
|
|
2769
|
-
function SheetHeader2({ className, ...props }) {
|
|
2770
|
-
return /* @__PURE__ */ jsx(
|
|
2771
|
-
SheetHeader,
|
|
2772
|
-
{
|
|
2773
|
-
className: cn("flex flex-col gap-1.5 p-4", className),
|
|
2774
|
-
...props
|
|
2775
|
-
}
|
|
2776
|
-
);
|
|
2777
|
-
}
|
|
2778
|
-
function SheetFooter2({ className, ...props }) {
|
|
2779
|
-
return /* @__PURE__ */ jsx(
|
|
2780
|
-
SheetFooter,
|
|
2781
|
-
{
|
|
2782
|
-
className: cn("mt-auto flex flex-col gap-2 p-4", className),
|
|
2783
|
-
...props
|
|
2784
|
-
}
|
|
2785
|
-
);
|
|
2786
|
-
}
|
|
2787
|
-
function SheetTitle2({ className, ...props }) {
|
|
2788
|
-
return /* @__PURE__ */ jsx(
|
|
2789
|
-
SheetTitle,
|
|
2790
|
-
{
|
|
2791
|
-
className: cn("text-foreground font-semibold", className),
|
|
2792
|
-
...props
|
|
2793
|
-
}
|
|
2794
|
-
);
|
|
2795
|
-
}
|
|
2796
|
-
function SheetDescription2({ className, ...props }) {
|
|
2797
|
-
return /* @__PURE__ */ jsx(
|
|
2798
|
-
SheetDescription,
|
|
2799
|
-
{
|
|
2800
|
-
className: cn("text-muted-foreground text-sm", className),
|
|
2801
|
-
...props
|
|
2802
|
-
}
|
|
2803
|
-
);
|
|
2804
|
-
}
|
|
2805
|
-
var inputLabelClassName = "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50";
|
|
2806
|
-
var fieldHintClassName = "text-sm leading-none text-muted-foreground";
|
|
2807
|
-
function FieldLabelRow({
|
|
2808
|
-
htmlFor,
|
|
2809
|
-
label,
|
|
2810
|
-
required = false,
|
|
2811
|
-
hintContent,
|
|
2812
|
-
className
|
|
2813
|
-
}) {
|
|
2814
|
-
return (
|
|
2815
|
-
// `items-end`: when a long hint wraps, the label stays bottom-aligned so
|
|
2816
|
-
// its text is still exactly one stack gap above the control.
|
|
2817
|
-
/* @__PURE__ */ jsxs("div", { className: cn("flex items-end justify-between gap-2", className), children: [
|
|
2818
|
-
/* @__PURE__ */ jsxs("label", { htmlFor, className: cn(inputLabelClassName, "shrink-0 whitespace-nowrap"), children: [
|
|
2819
|
-
label,
|
|
2820
|
-
required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
|
|
2821
|
-
] }),
|
|
2822
|
-
hintContent && /* @__PURE__ */ jsx("span", { className: cn(fieldHintClassName, "min-w-0 text-end"), children: hintContent })
|
|
2823
|
-
] })
|
|
2824
|
-
);
|
|
2825
|
-
}
|
|
2826
|
-
var sizeClasses2 = {
|
|
2827
|
-
sm: "h-8 px-2 text-xs",
|
|
2828
|
-
default: "h-10 px-3 py-2 text-base md:text-sm",
|
|
2829
|
-
lg: "h-12 px-4 text-lg"
|
|
2830
|
-
};
|
|
2831
|
-
var Input = React.forwardRef(
|
|
2832
|
-
({
|
|
2833
|
-
className,
|
|
2834
|
-
type,
|
|
2835
|
-
label,
|
|
2836
|
-
size,
|
|
2837
|
-
rounded,
|
|
2838
|
-
startHelperContent,
|
|
2839
|
-
endHelperContent,
|
|
2840
|
-
hintContent,
|
|
2841
|
-
error,
|
|
2842
|
-
errorContent,
|
|
2843
|
-
startIcon,
|
|
2844
|
-
endIcon,
|
|
2845
|
-
startAddOnContent,
|
|
2846
|
-
endAddOnContent,
|
|
2847
|
-
startAddOn,
|
|
2848
|
-
endAddOn,
|
|
2849
|
-
floatingLabel,
|
|
2850
|
-
charLimit,
|
|
2851
|
-
onChange,
|
|
2852
|
-
value,
|
|
2853
|
-
defaultValue,
|
|
2854
|
-
id,
|
|
2855
|
-
required,
|
|
2856
|
-
placeholder,
|
|
2857
|
-
...restProps
|
|
2858
|
-
}, ref) => {
|
|
2859
|
-
const autoId = React.useId();
|
|
2860
|
-
const inputId = id || autoId;
|
|
2861
|
-
const [charCount, setCharCount] = React.useState(() => {
|
|
2862
|
-
if (charLimit === void 0) return 0;
|
|
2863
|
-
if (typeof value === "string") return value.length;
|
|
2864
|
-
if (typeof defaultValue === "string") return defaultValue.length;
|
|
2865
|
-
return 0;
|
|
2866
|
-
});
|
|
2867
|
-
React.useEffect(() => {
|
|
2868
|
-
if (charLimit !== void 0 && typeof value === "string") {
|
|
2869
|
-
setCharCount(value.length);
|
|
2870
|
-
}
|
|
2871
|
-
}, [value, charLimit]);
|
|
2872
|
-
const hasEnhancedProps = label !== void 0 || size !== void 0 || rounded !== void 0 || startHelperContent !== void 0 || endHelperContent !== void 0 || hintContent !== void 0 || error !== void 0 || errorContent !== void 0 || startIcon !== void 0 || endIcon !== void 0 || startAddOnContent !== void 0 || endAddOnContent !== void 0 || startAddOn !== void 0 || endAddOn !== void 0 || floatingLabel !== void 0 || charLimit !== void 0;
|
|
2873
|
-
if (!hasEnhancedProps) {
|
|
2874
|
-
return /* @__PURE__ */ jsx(
|
|
2875
|
-
"input",
|
|
2876
|
-
{
|
|
2877
|
-
type,
|
|
2878
|
-
id,
|
|
2879
|
-
className: cn(
|
|
2880
|
-
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 read-only:bg-muted md:text-sm",
|
|
2881
|
-
className
|
|
2882
|
-
),
|
|
2883
|
-
ref,
|
|
2884
|
-
onChange,
|
|
2885
|
-
value,
|
|
2886
|
-
defaultValue,
|
|
2887
|
-
required,
|
|
2888
|
-
placeholder,
|
|
2889
|
-
...restProps
|
|
2890
|
-
}
|
|
2891
|
-
);
|
|
2892
|
-
}
|
|
2893
|
-
const effectiveSize = size || "default";
|
|
2894
|
-
const hasError = error || !!errorContent;
|
|
2895
|
-
const handleChange = (e) => {
|
|
2896
|
-
if (charLimit !== void 0) {
|
|
2897
|
-
setCharCount(e.target.value.length);
|
|
2898
|
-
}
|
|
2899
|
-
onChange?.(e);
|
|
2900
|
-
};
|
|
2901
|
-
const effectivePlaceholder = floatingLabel ? " " : placeholder;
|
|
2902
|
-
const resolveAddOn = (content, text) => content != null && content !== false && content !== "" ? content : text || void 0;
|
|
2903
|
-
const startAddOnNode = resolveAddOn(startAddOnContent, startAddOn);
|
|
2904
|
-
const endAddOnNode = resolveAddOn(endAddOnContent, endAddOn);
|
|
2905
|
-
const hasAddOn = startAddOnNode != null || endAddOnNode != null;
|
|
2906
|
-
const hasOverlay = !!startIcon || !!endIcon || charLimit !== void 0 || !!floatingLabel;
|
|
2907
|
-
const helperStartId = `${inputId}-helper-start`;
|
|
2908
|
-
const helperEndId = `${inputId}-helper-end`;
|
|
2909
|
-
const describedBy = [
|
|
2910
|
-
errorContent && `${inputId}-error`,
|
|
2911
|
-
startHelperContent && !errorContent && helperStartId,
|
|
2912
|
-
endHelperContent && !errorContent && helperEndId
|
|
2913
|
-
].filter(Boolean).join(" ") || void 0;
|
|
2914
|
-
const inputClasses = cn(
|
|
2915
|
-
"flex w-full border border-input bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 read-only:bg-muted z-10",
|
|
2916
|
-
floatingLabel ? "h-12 px-3 pt-4 pb-1 text-base md:text-sm" : sizeClasses2[effectiveSize],
|
|
2917
|
-
rounded ? "rounded-full" : "rounded-md",
|
|
2918
|
-
hasError && "border-destructive focus-visible:ring-destructive",
|
|
2919
|
-
startIcon && "ps-9",
|
|
2920
|
-
endIcon && "pe-9",
|
|
2921
|
-
charLimit !== void 0 && !endIcon && "pe-14",
|
|
2922
|
-
charLimit !== void 0 && endIcon && "pe-20",
|
|
2923
|
-
startAddOnNode != null && "rounded-s-none shadow-none",
|
|
2924
|
-
endAddOnNode != null && "rounded-e-none shadow-none",
|
|
2925
|
-
// `peer` is a marker only; the overlay decorators are later siblings and
|
|
2926
|
-
// rely on it for `peer-disabled:` / `peer-placeholder-shown:` variants.
|
|
2927
|
-
"peer",
|
|
2928
|
-
floatingLabel && "placeholder:text-transparent",
|
|
2929
|
-
className
|
|
2930
|
-
);
|
|
2931
|
-
const inputElement = /* @__PURE__ */ jsx(
|
|
2932
|
-
"input",
|
|
2933
|
-
{
|
|
2934
|
-
type,
|
|
2935
|
-
id: inputId,
|
|
2936
|
-
ref,
|
|
2937
|
-
className: inputClasses,
|
|
2938
|
-
required,
|
|
2939
|
-
"aria-invalid": hasError || void 0,
|
|
2940
|
-
"aria-describedby": describedBy,
|
|
2941
|
-
onChange: handleChange,
|
|
2942
|
-
value,
|
|
2943
|
-
defaultValue,
|
|
2944
|
-
maxLength: charLimit,
|
|
2945
|
-
placeholder: effectivePlaceholder,
|
|
2946
|
-
...restProps
|
|
2947
|
-
}
|
|
2948
|
-
);
|
|
2949
|
-
let inputContainer = inputElement;
|
|
2950
|
-
if (hasOverlay) {
|
|
2951
|
-
inputContainer = /* @__PURE__ */ jsxs("div", { className: "group relative min-w-0 flex-1", children: [
|
|
2952
|
-
inputElement,
|
|
2953
|
-
startIcon && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50", children: startIcon }),
|
|
2954
|
-
(endIcon || charLimit !== void 0) && /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center gap-2 pe-3 text-muted-foreground/80 peer-disabled:opacity-50", children: [
|
|
2955
|
-
charLimit !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs tabular-nums text-muted-foreground", children: [
|
|
2956
|
-
charCount,
|
|
2957
|
-
"/",
|
|
2958
|
-
charLimit
|
|
2959
|
-
] }),
|
|
2960
|
-
endIcon
|
|
2961
|
-
] }),
|
|
2962
|
-
floatingLabel && label && /* @__PURE__ */ jsxs(
|
|
2963
|
-
"label",
|
|
2964
|
-
{
|
|
2965
|
-
htmlFor: inputId,
|
|
2966
|
-
className: "absolute start-2 top-0 z-10 block -translate-y-1/2 bg-background px-2 text-xs font-medium text-foreground/70 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-placeholder-shown:font-normal peer-focus:top-0 peer-focus:text-xs peer-focus:font-medium",
|
|
2967
|
-
children: [
|
|
2968
|
-
label,
|
|
2969
|
-
required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
|
|
2970
|
-
]
|
|
2971
|
-
}
|
|
2972
|
-
)
|
|
2973
|
-
] });
|
|
2974
|
-
}
|
|
2975
|
-
if (hasAddOn) {
|
|
2976
|
-
inputContainer = /* @__PURE__ */ jsxs("div", { className: "flex rounded-lg", children: [
|
|
2977
|
-
startAddOnNode != null && /* @__PURE__ */ jsx("span", { className: "-me-px inline-flex items-center rounded-s-lg border border-input bg-background px-3 text-sm text-muted-foreground", children: startAddOnNode }),
|
|
2978
|
-
inputContainer,
|
|
2979
|
-
endAddOnNode != null && /* @__PURE__ */ jsx("span", { className: "-ms-px inline-flex items-center rounded-e-lg border border-input bg-background px-3 text-sm text-muted-foreground", children: endAddOnNode })
|
|
2980
|
-
] });
|
|
2981
|
-
}
|
|
2982
|
-
return /* @__PURE__ */ jsxs("div", { className: "space-y-2 flex-1", children: [
|
|
2983
|
-
label && !floatingLabel && /* @__PURE__ */ jsx(
|
|
2984
|
-
FieldLabelRow,
|
|
2985
|
-
{
|
|
2986
|
-
htmlFor: inputId,
|
|
2987
|
-
label,
|
|
2988
|
-
required,
|
|
2989
|
-
hintContent
|
|
2990
|
-
}
|
|
2991
|
-
),
|
|
2992
|
-
!label && hintContent && /* @__PURE__ */ jsx("span", { className: fieldHintClassName, children: hintContent }),
|
|
2993
|
-
inputContainer,
|
|
2994
|
-
errorContent && /* @__PURE__ */ jsx("div", { id: `${inputId}-error`, className: "text-sm text-destructive", children: errorContent }),
|
|
2995
|
-
startHelperContent && !errorContent && /* @__PURE__ */ jsx("div", { id: helperStartId, className: "text-sm text-muted-foreground", children: startHelperContent }),
|
|
2996
|
-
endHelperContent && !errorContent && /* @__PURE__ */ jsx(
|
|
2997
|
-
"div",
|
|
2998
|
-
{
|
|
2999
|
-
id: helperEndId,
|
|
3000
|
-
className: "text-sm text-end text-muted-foreground",
|
|
3001
|
-
children: endHelperContent
|
|
3002
|
-
}
|
|
3003
|
-
)
|
|
3004
|
-
] });
|
|
3005
|
-
}
|
|
3006
|
-
);
|
|
3007
|
-
Input.displayName = "Input";
|
|
3008
|
-
var InputPassword = React.forwardRef(
|
|
3009
|
-
({ className, ...props }, ref) => {
|
|
3010
|
-
const [isVisible, setIsVisible] = useState(false);
|
|
3011
|
-
return /* @__PURE__ */ jsx(
|
|
3012
|
-
Input,
|
|
3013
|
-
{
|
|
3014
|
-
ref,
|
|
3015
|
-
type: isVisible ? "text" : "password",
|
|
3016
|
-
className: cn("pr-9", className),
|
|
3017
|
-
endIcon: /* @__PURE__ */ jsxs(
|
|
3018
|
-
"button",
|
|
3019
|
-
{
|
|
3020
|
-
type: "button",
|
|
3021
|
-
onClick: () => setIsVisible((prev) => !prev),
|
|
3022
|
-
className: "pointer-events-auto cursor-pointer text-muted-foreground hover:text-foreground",
|
|
3023
|
-
tabIndex: -1,
|
|
3024
|
-
children: [
|
|
3025
|
-
isVisible ? /* @__PURE__ */ jsx(EyeOffIcon, { size: 16 }) : /* @__PURE__ */ jsx(EyeIcon, { size: 16 }),
|
|
3026
|
-
/* @__PURE__ */ jsx("span", { className: "sr-only", children: isVisible ? "Hide password" : "Show password" })
|
|
3027
|
-
]
|
|
3028
|
-
}
|
|
3029
|
-
),
|
|
3030
|
-
...props
|
|
3031
|
-
}
|
|
3032
|
-
);
|
|
3033
|
-
}
|
|
3034
|
-
);
|
|
3035
|
-
InputPassword.displayName = "InputPassword";
|
|
3036
|
-
var SIDEBAR_COOKIE_NAME = "sidebar_state";
|
|
3037
|
-
var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
3038
|
-
var SIDEBAR_WIDTH = "var(--espd-sidebar-width)";
|
|
3039
|
-
var SIDEBAR_WIDTH_MOBILE = "18rem";
|
|
3040
|
-
var SIDEBAR_WIDTH_COLLAPSED = "var(--espd-sidebar-width-collapsed)";
|
|
3041
|
-
var SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
|
3042
|
-
var [LocalSidebarProvider, useSidebar] = getStrictContext("SidebarContext");
|
|
3043
|
-
function SidebarProvider({
|
|
3044
|
-
defaultOpen = true,
|
|
3045
|
-
open: openProp,
|
|
3046
|
-
onOpenChange: setOpenProp,
|
|
3047
|
-
className,
|
|
3048
|
-
style,
|
|
3049
|
-
children,
|
|
3050
|
-
...props
|
|
3051
|
-
}) {
|
|
3052
|
-
const isMobile = useIsMobile();
|
|
3053
|
-
const [openMobile, setOpenMobile] = React.useState(false);
|
|
3054
|
-
const [_open, _setOpen] = React.useState(defaultOpen);
|
|
3055
|
-
const open = openProp ?? _open;
|
|
3056
|
-
const setOpen = React.useCallback(
|
|
3057
|
-
(value) => {
|
|
3058
|
-
const openState = typeof value === "function" ? value(open) : value;
|
|
3059
|
-
if (setOpenProp) {
|
|
3060
|
-
setOpenProp(openState);
|
|
3061
|
-
} else {
|
|
3062
|
-
_setOpen(openState);
|
|
3063
|
-
}
|
|
3064
|
-
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
|
|
3065
|
-
},
|
|
3066
|
-
[setOpenProp, open]
|
|
3067
|
-
);
|
|
3068
|
-
const toggleSidebar = React.useCallback(() => {
|
|
3069
|
-
return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
|
|
3070
|
-
}, [isMobile, setOpen, setOpenMobile]);
|
|
3071
|
-
React.useEffect(() => {
|
|
3072
|
-
const handleKeyDown = (event) => {
|
|
3073
|
-
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
|
|
3074
|
-
event.preventDefault();
|
|
3075
|
-
toggleSidebar();
|
|
3076
|
-
}
|
|
3077
|
-
};
|
|
3078
|
-
window.addEventListener("keydown", handleKeyDown);
|
|
3079
|
-
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
3080
|
-
}, [toggleSidebar]);
|
|
3081
|
-
const state = open ? "expanded" : "collapsed";
|
|
3082
|
-
const contextValue = React.useMemo(
|
|
3083
|
-
() => ({
|
|
3084
|
-
state,
|
|
3085
|
-
open,
|
|
3086
|
-
setOpen,
|
|
3087
|
-
isMobile,
|
|
3088
|
-
openMobile,
|
|
3089
|
-
setOpenMobile,
|
|
3090
|
-
toggleSidebar
|
|
3091
|
-
}),
|
|
3092
|
-
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
|
|
3093
|
-
);
|
|
3094
|
-
return /* @__PURE__ */ jsx(LocalSidebarProvider, { value: contextValue, children: /* @__PURE__ */ jsx(TooltipProvider2, { children: /* @__PURE__ */ jsx(
|
|
3095
|
-
"div",
|
|
3096
|
-
{
|
|
3097
|
-
"data-slot": "sidebar-wrapper",
|
|
3098
|
-
style: {
|
|
3099
|
-
"--sidebar-width": SIDEBAR_WIDTH,
|
|
3100
|
-
"--sidebar-width-collapsed": SIDEBAR_WIDTH_COLLAPSED,
|
|
3101
|
-
...style
|
|
3102
|
-
},
|
|
3103
|
-
className: cn(
|
|
3104
|
-
"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
|
|
3105
|
-
className
|
|
3106
|
-
),
|
|
3107
|
-
...props,
|
|
3108
|
-
children
|
|
3109
|
-
}
|
|
3110
|
-
) }) });
|
|
3111
|
-
}
|
|
3112
|
-
function Sidebar({
|
|
3113
|
-
side = "left",
|
|
3114
|
-
variant = "sidebar",
|
|
3115
|
-
collapsible = "offcanvas",
|
|
3116
|
-
className,
|
|
3117
|
-
children,
|
|
3118
|
-
animateOnHover = true,
|
|
3119
|
-
containerClassName,
|
|
3120
|
-
transition = { type: "spring", stiffness: 350, damping: 35 },
|
|
3121
|
-
...props
|
|
3122
|
-
}) {
|
|
3123
|
-
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
|
3124
|
-
if (collapsible === "none") {
|
|
3125
|
-
return /* @__PURE__ */ jsx(
|
|
3126
|
-
Highlight,
|
|
3127
|
-
{
|
|
3128
|
-
enabled: animateOnHover,
|
|
3129
|
-
hover: true,
|
|
3130
|
-
controlledItems: true,
|
|
3131
|
-
mode: "parent",
|
|
3132
|
-
containerClassName,
|
|
3133
|
-
transition,
|
|
3134
|
-
children: /* @__PURE__ */ jsx(
|
|
3135
|
-
"div",
|
|
3136
|
-
{
|
|
3137
|
-
"data-slot": "sidebar",
|
|
3138
|
-
className: cn(
|
|
3139
|
-
"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
|
|
3140
|
-
className
|
|
3141
|
-
),
|
|
3142
|
-
...props,
|
|
3143
|
-
children
|
|
3144
|
-
}
|
|
3145
|
-
)
|
|
3146
|
-
}
|
|
3147
|
-
);
|
|
3148
|
-
}
|
|
3149
|
-
if (isMobile) {
|
|
3150
|
-
return /* @__PURE__ */ jsx(Sheet2, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs(
|
|
3151
|
-
SheetContent2,
|
|
3152
|
-
{
|
|
3153
|
-
"data-sidebar": "sidebar",
|
|
3154
|
-
"data-slot": "sidebar",
|
|
3155
|
-
"data-mobile": "true",
|
|
3156
|
-
className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
|
|
3157
|
-
style: {
|
|
3158
|
-
"--sidebar-width": SIDEBAR_WIDTH_MOBILE
|
|
3159
|
-
},
|
|
3160
|
-
side,
|
|
3161
|
-
children: [
|
|
3162
|
-
/* @__PURE__ */ jsxs(SheetHeader2, { className: "sr-only", children: [
|
|
3163
|
-
/* @__PURE__ */ jsx(SheetTitle2, { children: "Sidebar" }),
|
|
3164
|
-
/* @__PURE__ */ jsx(SheetDescription2, { children: "Displays the mobile sidebar." })
|
|
3165
|
-
] }),
|
|
3166
|
-
/* @__PURE__ */ jsx(
|
|
3167
|
-
Highlight,
|
|
3168
|
-
{
|
|
3169
|
-
enabled: animateOnHover,
|
|
3170
|
-
hover: true,
|
|
3171
|
-
controlledItems: true,
|
|
3172
|
-
mode: "parent",
|
|
3173
|
-
containerClassName: cn("h-full", containerClassName),
|
|
3174
|
-
transition,
|
|
3175
|
-
children: /* @__PURE__ */ jsx("div", { className: "flex h-full w-full flex-col", children })
|
|
3176
|
-
}
|
|
3177
|
-
)
|
|
3178
|
-
]
|
|
3179
|
-
}
|
|
3180
|
-
) });
|
|
3181
|
-
}
|
|
3182
|
-
return /* @__PURE__ */ jsxs(
|
|
3183
|
-
"div",
|
|
3184
|
-
{
|
|
3185
|
-
className: "group peer text-sidebar-foreground hidden md:block",
|
|
3186
|
-
"data-state": state,
|
|
3187
|
-
"data-collapsible": state === "collapsed" ? collapsible : "",
|
|
3188
|
-
"data-variant": variant,
|
|
3189
|
-
"data-side": side,
|
|
3190
|
-
"data-slot": "sidebar",
|
|
3191
|
-
children: [
|
|
3192
|
-
/* @__PURE__ */ jsx(
|
|
3193
|
-
"div",
|
|
3194
|
-
{
|
|
3195
|
-
"data-slot": "sidebar-gap",
|
|
3196
|
-
className: cn(
|
|
3197
|
-
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-[cubic-bezier(0.7,-0.15,0.25,1.15)]",
|
|
3198
|
-
"group-data-[collapsible=offcanvas]:w-0",
|
|
3199
|
-
"group-data-[side=right]:rotate-180",
|
|
3200
|
-
variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-collapsed)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-collapsed)"
|
|
3201
|
-
)
|
|
3202
|
-
}
|
|
3203
|
-
),
|
|
3204
|
-
/* @__PURE__ */ jsx(
|
|
3205
|
-
"div",
|
|
3206
|
-
{
|
|
3207
|
-
"data-slot": "sidebar-container",
|
|
3208
|
-
className: cn(
|
|
3209
|
-
"fixed inset-y-0 z-10 hidden h-svh w-[calc(var(--sidebar-width)+1px)] transition-[left,right,width] duration-200 ease-[cubic-bezier(0.75,0,0.25,1)] md:flex",
|
|
3210
|
-
side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
|
3211
|
-
// Adjust the padding for floating and inset variants.
|
|
3212
|
-
variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-collapsed)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-collapsed)+1px)] group-data-[side=left]:border-r group-data-[side=right]:border-l border-sidebar-border",
|
|
3213
|
-
className
|
|
3214
|
-
),
|
|
3215
|
-
...props,
|
|
3216
|
-
children: /* @__PURE__ */ jsx(
|
|
3217
|
-
Highlight,
|
|
3218
|
-
{
|
|
3219
|
-
containerClassName: cn("size-full", containerClassName),
|
|
3220
|
-
enabled: animateOnHover,
|
|
3221
|
-
hover: true,
|
|
3222
|
-
controlledItems: true,
|
|
3223
|
-
mode: "parent",
|
|
3224
|
-
forceUpdateBounds: true,
|
|
3225
|
-
transition,
|
|
3226
|
-
children: /* @__PURE__ */ jsx(
|
|
3227
|
-
"div",
|
|
3228
|
-
{
|
|
3229
|
-
"data-sidebar": "sidebar",
|
|
3230
|
-
"data-slot": "sidebar-inner",
|
|
3231
|
-
className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
|
|
3232
|
-
children
|
|
3233
|
-
}
|
|
3234
|
-
)
|
|
3235
|
-
}
|
|
3236
|
-
)
|
|
3237
|
-
}
|
|
3238
|
-
)
|
|
3239
|
-
]
|
|
3240
|
-
}
|
|
3241
|
-
);
|
|
3242
|
-
}
|
|
3243
|
-
function SidebarTrigger({ className, onClick, ...props }) {
|
|
3244
|
-
const { toggleSidebar } = useSidebar();
|
|
3245
|
-
return /* @__PURE__ */ jsxs(
|
|
3246
|
-
Button,
|
|
3247
|
-
{
|
|
3248
|
-
"data-sidebar": "trigger",
|
|
3249
|
-
"data-slot": "sidebar-trigger",
|
|
3250
|
-
variant: "ghost",
|
|
3251
|
-
size: "icon",
|
|
3252
|
-
className: cn("size-7", className),
|
|
3253
|
-
onClick: (event) => {
|
|
3254
|
-
onClick?.(event);
|
|
3255
|
-
toggleSidebar();
|
|
3256
|
-
},
|
|
3257
|
-
...props,
|
|
3258
|
-
children: [
|
|
3259
|
-
/* @__PURE__ */ jsx(PanelLeftIcon, {}),
|
|
3260
|
-
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
|
|
3261
|
-
]
|
|
3262
|
-
}
|
|
3263
|
-
);
|
|
3264
|
-
}
|
|
3265
|
-
function SidebarRail({ className, ...props }) {
|
|
3266
|
-
const { toggleSidebar } = useSidebar();
|
|
3267
|
-
return /* @__PURE__ */ jsx(
|
|
3268
|
-
"button",
|
|
3269
|
-
{
|
|
3270
|
-
"data-sidebar": "rail",
|
|
3271
|
-
"data-slot": "sidebar-rail",
|
|
3272
|
-
"aria-label": "Toggle Sidebar",
|
|
3273
|
-
tabIndex: -1,
|
|
3274
|
-
onClick: toggleSidebar,
|
|
3275
|
-
title: "Toggle Sidebar",
|
|
3276
|
-
className: cn(
|
|
3277
|
-
"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
|
|
3278
|
-
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
|
|
3279
|
-
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
|
3280
|
-
"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
|
|
3281
|
-
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
|
3282
|
-
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
|
3283
|
-
className
|
|
3284
|
-
),
|
|
3285
|
-
...props
|
|
3286
|
-
}
|
|
3287
|
-
);
|
|
3288
|
-
}
|
|
3289
|
-
function SidebarInset({ className, ...props }) {
|
|
3290
|
-
return /* @__PURE__ */ jsx(
|
|
3291
|
-
"main",
|
|
3292
|
-
{
|
|
3293
|
-
"data-slot": "sidebar-inset",
|
|
3294
|
-
className: cn(
|
|
3295
|
-
"bg-background relative flex w-full flex-1 flex-col",
|
|
3296
|
-
"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",
|
|
3297
|
-
className
|
|
3298
|
-
),
|
|
3299
|
-
...props
|
|
3300
|
-
}
|
|
3301
|
-
);
|
|
3302
|
-
}
|
|
3303
|
-
function SidebarInput({ className, ...props }) {
|
|
3304
|
-
return /* @__PURE__ */ jsx(
|
|
3305
|
-
Input,
|
|
3306
|
-
{
|
|
3307
|
-
"data-slot": "sidebar-input",
|
|
3308
|
-
"data-sidebar": "input",
|
|
3309
|
-
className: cn("bg-background h-8 w-full shadow-none", className),
|
|
3310
|
-
...props
|
|
3311
|
-
}
|
|
3312
|
-
);
|
|
3313
|
-
}
|
|
3314
|
-
function SidebarHeader({ className, ...props }) {
|
|
3315
|
-
return /* @__PURE__ */ jsx(
|
|
3316
|
-
"div",
|
|
3317
|
-
{
|
|
3318
|
-
"data-slot": "sidebar-header",
|
|
3319
|
-
"data-sidebar": "header",
|
|
3320
|
-
className: cn("flex flex-col gap-2 p-2", className),
|
|
3321
|
-
...props
|
|
3322
|
-
}
|
|
3323
|
-
);
|
|
3324
|
-
}
|
|
3325
|
-
function SidebarFooter({ className, ...props }) {
|
|
3326
|
-
return /* @__PURE__ */ jsx(
|
|
3327
|
-
"div",
|
|
3328
|
-
{
|
|
3329
|
-
"data-slot": "sidebar-footer",
|
|
3330
|
-
"data-sidebar": "footer",
|
|
3331
|
-
className: cn("flex flex-col gap-2 p-2", className),
|
|
3332
|
-
...props
|
|
3333
|
-
}
|
|
3334
|
-
);
|
|
3335
|
-
}
|
|
3336
|
-
function SidebarSeparator({ className, ...props }) {
|
|
3337
|
-
return /* @__PURE__ */ jsx(
|
|
3338
|
-
Separator,
|
|
3339
|
-
{
|
|
3340
|
-
"data-slot": "sidebar-separator",
|
|
3341
|
-
"data-sidebar": "separator",
|
|
3342
|
-
className: cn("bg-sidebar-border mx-2 w-auto", className),
|
|
3343
|
-
...props
|
|
3344
|
-
}
|
|
3345
|
-
);
|
|
3346
|
-
}
|
|
3347
|
-
function SidebarContent({ className, children, ...props }) {
|
|
3348
|
-
return /* @__PURE__ */ jsx(
|
|
3349
|
-
"div",
|
|
3350
|
-
{
|
|
3351
|
-
"data-slot": "sidebar-content",
|
|
3352
|
-
"data-sidebar": "content",
|
|
3353
|
-
className: cn(
|
|
3354
|
-
"flex min-h-0 flex-1 flex-col group-data-[collapsible=icon]:overflow-hidden",
|
|
3355
|
-
className
|
|
3356
|
-
),
|
|
3357
|
-
...props,
|
|
3358
|
-
children: /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children }) })
|
|
3359
|
-
}
|
|
3360
|
-
);
|
|
3361
|
-
}
|
|
3362
|
-
function SidebarGroup({ className, ...props }) {
|
|
3363
|
-
return /* @__PURE__ */ jsx(
|
|
3364
|
-
"div",
|
|
3365
|
-
{
|
|
3366
|
-
"data-slot": "sidebar-group",
|
|
3367
|
-
"data-sidebar": "group",
|
|
3368
|
-
className: cn("relative flex w-full min-w-0 flex-col p-2", className),
|
|
3369
|
-
...props
|
|
3370
|
-
}
|
|
3371
|
-
);
|
|
3372
|
-
}
|
|
3373
|
-
function SidebarGroupLabel({
|
|
3374
|
-
className,
|
|
3375
|
-
asChild = false,
|
|
3376
|
-
...props
|
|
3377
|
-
}) {
|
|
3378
|
-
const Comp = asChild ? Slot$2.Root : "div";
|
|
3379
|
-
return /* @__PURE__ */ jsx(
|
|
3380
|
-
Comp,
|
|
3381
|
-
{
|
|
3382
|
-
"data-slot": "sidebar-group-label",
|
|
3383
|
-
"data-sidebar": "group-label",
|
|
3384
|
-
className: cn(
|
|
3385
|
-
"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-300 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
3386
|
-
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
|
3387
|
-
className
|
|
3388
|
-
),
|
|
3389
|
-
...props
|
|
3390
|
-
}
|
|
3391
|
-
);
|
|
3392
|
-
}
|
|
3393
|
-
function SidebarGroupAction({
|
|
3394
|
-
className,
|
|
3395
|
-
asChild = false,
|
|
3396
|
-
...props
|
|
3397
|
-
}) {
|
|
3398
|
-
const Comp = asChild ? Slot$2.Root : "button";
|
|
3399
|
-
return /* @__PURE__ */ jsx(
|
|
3400
|
-
Comp,
|
|
3401
|
-
{
|
|
3402
|
-
"data-slot": "sidebar-group-action",
|
|
3403
|
-
"data-sidebar": "group-action",
|
|
3404
|
-
className: cn(
|
|
3405
|
-
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
3406
|
-
// Increases the hit area of the button on mobile.
|
|
3407
|
-
"after:absolute after:-inset-2 md:after:hidden",
|
|
3408
|
-
"group-data-[collapsible=icon]:hidden",
|
|
3409
|
-
className
|
|
3410
|
-
),
|
|
3411
|
-
...props
|
|
3412
|
-
}
|
|
3413
|
-
);
|
|
3414
|
-
}
|
|
3415
|
-
function SidebarGroupContent({
|
|
3416
|
-
className,
|
|
3417
|
-
...props
|
|
3418
|
-
}) {
|
|
3419
|
-
return /* @__PURE__ */ jsx(
|
|
3420
|
-
"div",
|
|
3421
|
-
{
|
|
3422
|
-
"data-slot": "sidebar-group-content",
|
|
3423
|
-
"data-sidebar": "group-content",
|
|
3424
|
-
className: cn("w-full text-sm flex", className),
|
|
3425
|
-
...props
|
|
3426
|
-
}
|
|
3427
|
-
);
|
|
3428
|
-
}
|
|
3429
|
-
function SidebarMenu({ className, ...props }) {
|
|
3430
|
-
return /* @__PURE__ */ jsx(
|
|
3431
|
-
"ul",
|
|
3432
|
-
{
|
|
3433
|
-
"data-slot": "sidebar-menu",
|
|
3434
|
-
"data-sidebar": "menu",
|
|
3435
|
-
className: cn("flex w-full min-w-0 flex-col gap-1", className),
|
|
3436
|
-
...props
|
|
3437
|
-
}
|
|
3438
|
-
);
|
|
3439
|
-
}
|
|
3440
|
-
function SidebarMenuItem({ className, ...props }) {
|
|
3441
|
-
return /* @__PURE__ */ jsx(
|
|
3442
|
-
"li",
|
|
3443
|
-
{
|
|
3444
|
-
"data-slot": "sidebar-menu-item",
|
|
3445
|
-
"data-sidebar": "menu-item",
|
|
3446
|
-
className: cn("group/menu-item relative group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center", className),
|
|
3447
|
-
...props
|
|
3448
|
-
}
|
|
3449
|
-
);
|
|
3450
|
-
}
|
|
3451
|
-
var sidebarMenuButtonActiveVariants = cva(
|
|
3452
|
-
"bg-sidebar-accent text-sidebar-accent-foreground rounded-md",
|
|
3453
|
-
{
|
|
3454
|
-
variants: {
|
|
3455
|
-
variant: {
|
|
3456
|
-
default: "bg-sidebar-accent text-sidebar-accent-foreground",
|
|
3457
|
-
outline: "bg-sidebar-accent text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
|
|
3458
|
-
}
|
|
3459
|
-
},
|
|
3460
|
-
defaultVariants: {
|
|
3461
|
-
variant: "default"
|
|
3462
|
-
}
|
|
3463
|
-
}
|
|
3464
|
-
);
|
|
3465
|
-
var sidebarMenuButtonVariants = cva(
|
|
3466
|
-
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] [&:not([data-highlight])]:hover:bg-sidebar-accent [&:not([data-highlight])]: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 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground [&:not([data-highlight])]:data-[state=open]:hover:bg-sidebar-accent [&:not([data-highlight])]:data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
|
3467
|
-
{
|
|
3468
|
-
variants: {
|
|
3469
|
-
variant: {
|
|
3470
|
-
default: "[&:not([data-highlight])]:hover:bg-sidebar-accent [&:not([data-highlight])]:hover:text-sidebar-accent-foreground",
|
|
3471
|
-
outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] [&:not([data-highlight])]:hover:bg-sidebar-accent [&:not([data-highlight])]:hover:text-sidebar-accent-foreground [&:not([data-highlight])]:hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
|
|
3472
|
-
},
|
|
3473
|
-
size: {
|
|
3474
|
-
default: "h-8 text-sm",
|
|
3475
|
-
sm: "h-7 text-xs",
|
|
3476
|
-
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
|
|
3477
|
-
}
|
|
3478
|
-
},
|
|
3479
|
-
defaultVariants: {
|
|
3480
|
-
variant: "default",
|
|
3481
|
-
size: "default"
|
|
3482
|
-
}
|
|
3483
|
-
}
|
|
3484
|
-
);
|
|
3485
|
-
function SidebarMenuButton({
|
|
3486
|
-
asChild = false,
|
|
3487
|
-
isActive = false,
|
|
3488
|
-
variant = "default",
|
|
3489
|
-
size = "default",
|
|
3490
|
-
tooltip,
|
|
3491
|
-
className,
|
|
3492
|
-
...props
|
|
3493
|
-
}) {
|
|
3494
|
-
const Comp = asChild ? Slot$2.Root : "button";
|
|
3495
|
-
const { isMobile, state } = useSidebar();
|
|
3496
|
-
const button = /* @__PURE__ */ jsx(
|
|
3497
|
-
HighlightItem,
|
|
3498
|
-
{
|
|
3499
|
-
activeClassName: sidebarMenuButtonActiveVariants({ variant }),
|
|
3500
|
-
children: /* @__PURE__ */ jsx(
|
|
3501
|
-
Comp,
|
|
3502
|
-
{
|
|
3503
|
-
"data-slot": "sidebar-menu-button",
|
|
3504
|
-
"data-sidebar": "menu-button",
|
|
3505
|
-
"data-size": size,
|
|
3506
|
-
"data-active": isActive,
|
|
3507
|
-
className: cn(sidebarMenuButtonVariants({ variant, size }), className),
|
|
3508
|
-
...props
|
|
3509
|
-
}
|
|
3510
|
-
)
|
|
3511
|
-
}
|
|
3512
|
-
);
|
|
3513
|
-
if (!tooltip) {
|
|
3514
|
-
return button;
|
|
3515
|
-
}
|
|
3516
|
-
if (typeof tooltip === "string") {
|
|
3517
|
-
tooltip = {
|
|
3518
|
-
children: tooltip
|
|
3519
|
-
};
|
|
3520
|
-
}
|
|
3521
|
-
return /* @__PURE__ */ jsxs(Tooltip2, { children: [
|
|
3522
|
-
/* @__PURE__ */ jsx(TooltipTrigger2, { asChild: true, children: button }),
|
|
3523
|
-
/* @__PURE__ */ jsx(TooltipContent2, { hidden: state !== "collapsed" || isMobile, ...tooltip })
|
|
3524
|
-
] });
|
|
3525
|
-
}
|
|
3526
|
-
function SidebarMenuAction({
|
|
3527
|
-
className,
|
|
3528
|
-
asChild = false,
|
|
3529
|
-
showOnHover = false,
|
|
3530
|
-
...props
|
|
3531
|
-
}) {
|
|
3532
|
-
const Comp = asChild ? Slot$2.Root : "button";
|
|
3533
|
-
return /* @__PURE__ */ jsx(
|
|
3534
|
-
Comp,
|
|
3535
|
-
{
|
|
3536
|
-
"data-slot": "sidebar-menu-action",
|
|
3537
|
-
"data-sidebar": "menu-action",
|
|
3538
|
-
className: cn(
|
|
3539
|
-
// Increases the hit area of the button on mobile.
|
|
3540
|
-
"z-[1] text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1/2 right-1 flex aspect-square w-5 -translate-y-1/2 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
3541
|
-
"after:absolute after:-inset-2 md:after:hidden",
|
|
3542
|
-
"group-data-[collapsible=icon]:hidden",
|
|
3543
|
-
showOnHover && "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
|
|
3544
|
-
className
|
|
3545
|
-
),
|
|
3546
|
-
...props
|
|
3547
|
-
}
|
|
3548
|
-
);
|
|
3549
|
-
}
|
|
3550
|
-
function SidebarMenuBadge({ className, ...props }) {
|
|
3551
|
-
return /* @__PURE__ */ jsx(
|
|
3552
|
-
"div",
|
|
3553
|
-
{
|
|
3554
|
-
"data-slot": "sidebar-menu-badge",
|
|
3555
|
-
"data-sidebar": "menu-badge",
|
|
3556
|
-
className: cn(
|
|
3557
|
-
"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
|
|
3558
|
-
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
|
|
3559
|
-
"peer-data-[size=sm]/menu-button:top-1",
|
|
3560
|
-
"peer-data-[size=default]/menu-button:top-1.5",
|
|
3561
|
-
"peer-data-[size=lg]/menu-button:top-2.5",
|
|
3562
|
-
"group-data-[collapsible=icon]:hidden",
|
|
3563
|
-
className
|
|
3564
|
-
),
|
|
3565
|
-
...props
|
|
3566
|
-
}
|
|
3567
|
-
);
|
|
3568
|
-
}
|
|
3569
|
-
function SidebarMenuSkeleton({
|
|
3570
|
-
className,
|
|
3571
|
-
showIcon = false,
|
|
3572
|
-
...props
|
|
3573
|
-
}) {
|
|
3574
|
-
const width = React.useMemo(() => {
|
|
3575
|
-
return `${Math.floor(Math.random() * 40) + 50}%`;
|
|
3576
|
-
}, []);
|
|
3577
|
-
return /* @__PURE__ */ jsxs(
|
|
3578
|
-
"div",
|
|
3579
|
-
{
|
|
3580
|
-
"data-slot": "sidebar-menu-skeleton",
|
|
3581
|
-
"data-sidebar": "menu-skeleton",
|
|
3582
|
-
className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
|
|
3583
|
-
...props,
|
|
3584
|
-
children: [
|
|
3585
|
-
showIcon && /* @__PURE__ */ jsx(
|
|
3586
|
-
Skeleton,
|
|
3587
|
-
{
|
|
3588
|
-
className: "size-4 rounded-md",
|
|
3589
|
-
"data-sidebar": "menu-skeleton-icon"
|
|
3590
|
-
}
|
|
3591
|
-
),
|
|
3592
|
-
/* @__PURE__ */ jsx(
|
|
3593
|
-
Skeleton,
|
|
3594
|
-
{
|
|
3595
|
-
className: "h-4 max-w-(--skeleton-width) flex-1",
|
|
3596
|
-
"data-sidebar": "menu-skeleton-text",
|
|
3597
|
-
style: {
|
|
3598
|
-
"--skeleton-width": width
|
|
3599
|
-
}
|
|
3600
|
-
}
|
|
3601
|
-
)
|
|
3602
|
-
]
|
|
3603
|
-
}
|
|
3604
|
-
);
|
|
3605
|
-
}
|
|
3606
|
-
function SidebarMenuSub({ className, ...props }) {
|
|
3607
|
-
return /* @__PURE__ */ jsx(
|
|
3608
|
-
"ul",
|
|
3609
|
-
{
|
|
3610
|
-
"data-slot": "sidebar-menu-sub",
|
|
3611
|
-
"data-sidebar": "menu-sub",
|
|
3612
|
-
className: cn(
|
|
3613
|
-
"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
|
|
3614
|
-
"group-data-[collapsible=icon]:hidden",
|
|
3615
|
-
className
|
|
3616
|
-
),
|
|
3617
|
-
...props
|
|
3618
|
-
}
|
|
3619
|
-
);
|
|
3620
|
-
}
|
|
3621
|
-
function SidebarMenuSubItem({ className, ...props }) {
|
|
3622
|
-
return /* @__PURE__ */ jsx(
|
|
3623
|
-
"li",
|
|
3624
|
-
{
|
|
3625
|
-
"data-slot": "sidebar-menu-sub-item",
|
|
3626
|
-
"data-sidebar": "menu-sub-item",
|
|
3627
|
-
className: cn("group/menu-sub-item relative", className),
|
|
3628
|
-
...props
|
|
3629
|
-
}
|
|
3630
|
-
);
|
|
3631
|
-
}
|
|
3632
|
-
function SidebarMenuSubButton({
|
|
3633
|
-
asChild = false,
|
|
3634
|
-
size = "md",
|
|
3635
|
-
isActive = false,
|
|
3636
|
-
className,
|
|
3637
|
-
...props
|
|
3638
|
-
}) {
|
|
3639
|
-
const Comp = asChild ? Slot$2.Root : "a";
|
|
3640
|
-
return /* @__PURE__ */ jsx(HighlightItem, { activeClassName: "bg-sidebar-accent text-sidebar-accent-foreground rounded-md", children: /* @__PURE__ */ jsx(
|
|
3641
|
-
Comp,
|
|
3642
|
-
{
|
|
3643
|
-
"data-slot": "sidebar-menu-sub-button",
|
|
3644
|
-
"data-sidebar": "menu-sub-button",
|
|
3645
|
-
"data-size": size,
|
|
3646
|
-
"data-active": isActive,
|
|
3647
|
-
className: cn(
|
|
3648
|
-
"text-sidebar-foreground ring-sidebar-ring [&:not([data-highlight])]:hover:bg-sidebar-accent [&:not([data-highlight])]:hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
|
3649
|
-
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
|
|
3650
|
-
size === "sm" && "text-xs",
|
|
3651
|
-
size === "md" && "text-sm",
|
|
3652
|
-
"group-data-[collapsible=icon]:hidden",
|
|
3653
|
-
className
|
|
3654
|
-
),
|
|
3655
|
-
...props
|
|
3656
|
-
}
|
|
3657
|
-
) });
|
|
3658
|
-
}
|
|
3659
|
-
|
|
3660
|
-
// src/components/sidebar/types.ts
|
|
3661
|
-
function isSidebarGroup(entry) {
|
|
3662
|
-
return "items" in entry;
|
|
3663
|
-
}
|
|
3664
|
-
|
|
3665
|
-
// src/utils/path-match.ts
|
|
3666
|
-
function isPathPrefixOf(prefix, fullPath) {
|
|
3667
|
-
if (prefix === fullPath) return true;
|
|
3668
|
-
return fullPath.startsWith(prefix) && (prefix.endsWith("/") || fullPath[prefix.length] === "/");
|
|
3669
|
-
}
|
|
3670
|
-
var sidebarGroupClassName = "py-0 px-2";
|
|
3671
|
-
var rowIconClass = "[&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0";
|
|
3672
|
-
var rowFontStyle = {
|
|
3673
|
-
fontSize: "var(--espd-sidebar-item-font-size, 0.875rem)",
|
|
3674
|
-
lineHeight: "1.25rem"
|
|
3675
|
-
};
|
|
3676
|
-
var flyoutGroupLabelStyle = {
|
|
3677
|
-
fontSize: "var(--espd-sidebar-flyout-group-label-font-size, 0.875rem)",
|
|
3678
|
-
lineHeight: "1.25rem"
|
|
3679
|
-
};
|
|
3680
|
-
function ItemIcon({
|
|
3681
|
-
icon: Icon,
|
|
3682
|
-
active,
|
|
3683
|
-
className
|
|
3684
|
-
}) {
|
|
3685
|
-
if (Icon) return /* @__PURE__ */ jsx(Icon, { className });
|
|
3686
|
-
if (active) return /* @__PURE__ */ jsx(CircleDot, { className });
|
|
3687
|
-
return /* @__PURE__ */ jsx(Circle, { className: cn("opacity-50", className) });
|
|
3688
|
-
}
|
|
3689
|
-
function forwardRowClickToLink(e) {
|
|
3690
|
-
if (e.target !== e.currentTarget) return;
|
|
3691
|
-
e.currentTarget.firstElementChild?.click();
|
|
3692
|
-
}
|
|
3693
|
-
function GroupMenuItems({
|
|
3694
|
-
group,
|
|
3695
|
-
isSelected,
|
|
3696
|
-
linkComponent: LinkComponent,
|
|
3697
|
-
onItemClick,
|
|
3698
|
-
onItemPointerDown
|
|
3699
|
-
}) {
|
|
3700
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
3701
|
-
/* @__PURE__ */ jsxs(
|
|
3702
|
-
DropdownMenuLabel2,
|
|
3703
|
-
{
|
|
3704
|
-
className: cn(
|
|
3705
|
-
"flex items-center gap-2 px-3 py-2 font-normal text-muted-foreground",
|
|
3706
|
-
// DropdownMenuLabel, unlike DropdownMenuItem, ships no svg sizing of its own.
|
|
3707
|
-
rowIconClass
|
|
3708
|
-
),
|
|
3709
|
-
style: flyoutGroupLabelStyle,
|
|
3710
|
-
children: [
|
|
3711
|
-
group.icon ? /* @__PURE__ */ jsx(ItemIcon, { icon: group.icon, className: "text-foreground" }) : null,
|
|
3712
|
-
/* @__PURE__ */ jsx("span", { className: "truncate", children: group.label })
|
|
3713
|
-
]
|
|
3714
|
-
}
|
|
3715
|
-
),
|
|
3716
|
-
/* @__PURE__ */ jsx(DropdownMenuSeparator2, {}),
|
|
3717
|
-
group.items.map((item) => {
|
|
3718
|
-
const active = isSelected(item.path);
|
|
3719
|
-
return /* @__PURE__ */ jsx(
|
|
3720
|
-
DropdownMenuItem2,
|
|
3721
|
-
{
|
|
3722
|
-
className: active ? "bg-accent" : "",
|
|
3723
|
-
style: rowFontStyle,
|
|
3724
|
-
onPointerDown: onItemPointerDown,
|
|
3725
|
-
onClickCapture: onItemClick,
|
|
3726
|
-
onClick: forwardRowClickToLink,
|
|
3727
|
-
children: /* @__PURE__ */ jsxs(LinkComponent, { to: item.path, className: "flex items-center gap-2 cursor-pointer w-full", children: [
|
|
3728
|
-
/* @__PURE__ */ jsx(ItemIcon, { icon: item.icon, active }),
|
|
3729
|
-
/* @__PURE__ */ jsx("span", { className: active ? "font-semibold" : "font-medium", children: item.label })
|
|
3730
|
-
] })
|
|
3731
|
-
},
|
|
3732
|
-
item.id
|
|
3733
|
-
);
|
|
3734
|
-
})
|
|
3735
|
-
] });
|
|
3736
|
-
}
|
|
3737
|
-
function CollapsedSidebarGroup({
|
|
3738
|
-
group,
|
|
3739
|
-
isSelected,
|
|
3740
|
-
linkComponent: LinkComponent
|
|
3741
|
-
}) {
|
|
3742
|
-
const [open, setOpen] = useState(false);
|
|
3743
|
-
const pickedWithPointer = useRef(false);
|
|
3744
|
-
return /* @__PURE__ */ jsx(SidebarGroup, { className: sidebarGroupClassName, children: /* @__PURE__ */ jsx(SidebarMenu, { className: "w-auto", children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
|
|
3745
|
-
DropdownMenu2,
|
|
3746
|
-
{
|
|
3747
|
-
open,
|
|
3748
|
-
onOpenChange: (next) => {
|
|
3749
|
-
if (next) pickedWithPointer.current = false;
|
|
3750
|
-
setOpen(next);
|
|
3751
|
-
},
|
|
3752
|
-
children: [
|
|
3753
|
-
/* @__PURE__ */ jsx(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx(SidebarMenuButton, { size: "sm", tooltip: group.label, className: rowIconClass, children: /* @__PURE__ */ jsx(ItemIcon, { icon: group.icon }) }) }),
|
|
3754
|
-
/* @__PURE__ */ jsx(
|
|
3755
|
-
DropdownMenuContent2,
|
|
3756
|
-
{
|
|
3757
|
-
side: "right",
|
|
3758
|
-
align: "start",
|
|
3759
|
-
sideOffset: 8,
|
|
3760
|
-
className: "z-50 max-w-xs rounded-2xl shadow-lg will-change-[opacity,transform] py-1.5 overflow-visible select-none",
|
|
3761
|
-
style: { minWidth: 180 },
|
|
3762
|
-
onCloseAutoFocus: (e) => {
|
|
3763
|
-
if (pickedWithPointer.current) e.preventDefault();
|
|
3764
|
-
},
|
|
3765
|
-
children: /* @__PURE__ */ jsx(
|
|
3766
|
-
GroupMenuItems,
|
|
3767
|
-
{
|
|
3768
|
-
group,
|
|
3769
|
-
isSelected,
|
|
3770
|
-
linkComponent: LinkComponent,
|
|
3771
|
-
onItemClick: () => setOpen(false),
|
|
3772
|
-
onItemPointerDown: () => {
|
|
3773
|
-
pickedWithPointer.current = true;
|
|
3774
|
-
}
|
|
3775
|
-
}
|
|
3776
|
-
)
|
|
3777
|
-
}
|
|
3778
|
-
)
|
|
3779
|
-
]
|
|
3780
|
-
}
|
|
3781
|
-
) }) }) });
|
|
3782
|
-
}
|
|
3783
|
-
var groupHeaderClass = cn(
|
|
3784
|
-
// No `flex-1`: this button is a column flex item, so growing made it take its
|
|
3785
|
-
// content height (36px) and render taller than the `h-7` item rows below it.
|
|
3786
|
-
// `w-full` keeps the full-width hit area, `overflow-hidden` makes the label truncate.
|
|
3787
|
-
"flex w-full items-center gap-2 rounded-md p-2 h-7 overflow-hidden font-medium text-sidebar-foreground hover:bg-sidebar-accent/50 transition-colors cursor-pointer",
|
|
3788
|
-
// Sizes both the group icon and the expand/collapse chevron.
|
|
3789
|
-
rowIconClass
|
|
3790
|
-
);
|
|
3791
|
-
function ExpandedSidebarGroup({
|
|
3792
|
-
group,
|
|
3793
|
-
isGroupOpen,
|
|
3794
|
-
onToggle,
|
|
3795
|
-
renderMenuItem
|
|
3796
|
-
}) {
|
|
3797
|
-
return /* @__PURE__ */ jsx(Collapsible, { open: isGroupOpen, onOpenChange: onToggle, children: /* @__PURE__ */ jsxs(SidebarGroup, { className: sidebarGroupClassName, children: [
|
|
3798
|
-
/* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { type: "button", className: groupHeaderClass, style: rowFontStyle, children: [
|
|
3799
|
-
/* @__PURE__ */ jsx(ItemIcon, { icon: group.icon }),
|
|
3800
|
-
/* @__PURE__ */ jsx("span", { className: "truncate", children: group.label }),
|
|
3801
|
-
isGroupOpen ? /* @__PURE__ */ jsx(ChevronDown, { className: "ml-auto transition-transform" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto transition-transform" })
|
|
3802
|
-
] }) }),
|
|
3803
|
-
/* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { className: "pl-6 pt-1", children: group.items.map((item) => renderMenuItem(item)) }) }) })
|
|
3804
|
-
] }) });
|
|
3805
|
-
}
|
|
3806
|
-
function TopLevelLinkRow({
|
|
3807
|
-
item,
|
|
3808
|
-
isCollapsed,
|
|
3809
|
-
isMobile,
|
|
3810
|
-
renderMenuItem
|
|
3811
|
-
}) {
|
|
3812
|
-
return /* @__PURE__ */ jsx(SidebarGroup, { className: sidebarGroupClassName, children: /* @__PURE__ */ jsx(SidebarMenu, { className: isCollapsed && !isMobile ? "w-auto" : void 0, children: renderMenuItem(item) }) });
|
|
3813
|
-
}
|
|
3814
|
-
function Sidebar2({
|
|
3815
|
-
items,
|
|
3816
|
-
currentPath,
|
|
3817
|
-
header,
|
|
3818
|
-
headerHeight,
|
|
3819
|
-
footer,
|
|
3820
|
-
linkComponent: LinkComponent,
|
|
3821
|
-
collapsible = "icon",
|
|
3822
|
-
variant = "sidebar",
|
|
3823
|
-
focusActiveGroup = false
|
|
3824
|
-
}) {
|
|
3825
|
-
const { state, isMobile, setOpenMobile } = useSidebar();
|
|
3826
|
-
const isCollapsed = state === "collapsed";
|
|
3827
|
-
const closeMobileSidebar = () => {
|
|
3828
|
-
if (isMobile) setOpenMobile(false);
|
|
3829
|
-
};
|
|
3830
|
-
const activeGroupId = useMemo(() => {
|
|
3831
|
-
for (const entry of items) {
|
|
3832
|
-
if (!isSidebarGroup(entry)) continue;
|
|
3833
|
-
if (entry.items.some((item) => isPathPrefixOf(item.path, currentPath))) {
|
|
3834
|
-
return entry.id;
|
|
3835
|
-
}
|
|
3836
|
-
}
|
|
3837
|
-
return null;
|
|
3838
|
-
}, [items, currentPath]);
|
|
3839
|
-
const [expandedGroups, setExpandedGroups] = useState(() => {
|
|
3840
|
-
if (focusActiveGroup && activeGroupId) return /* @__PURE__ */ new Set([activeGroupId]);
|
|
3841
|
-
const set = /* @__PURE__ */ new Set();
|
|
3842
|
-
for (const entry of items) {
|
|
3843
|
-
if (isSidebarGroup(entry) && entry.defaultExpanded !== false) set.add(entry.id);
|
|
3844
|
-
}
|
|
3845
|
-
return set;
|
|
3846
|
-
});
|
|
3847
|
-
useEffect(() => {
|
|
3848
|
-
if (!focusActiveGroup || !activeGroupId) return;
|
|
3849
|
-
setExpandedGroups(/* @__PURE__ */ new Set([activeGroupId]));
|
|
3850
|
-
}, [focusActiveGroup, activeGroupId]);
|
|
3851
|
-
const toggleGroup = (id, open) => {
|
|
3852
|
-
setExpandedGroups((prev) => {
|
|
3853
|
-
const next = new Set(prev);
|
|
3854
|
-
if (open) next.add(id);
|
|
3855
|
-
else next.delete(id);
|
|
3856
|
-
return next;
|
|
3857
|
-
});
|
|
3858
|
-
};
|
|
3859
|
-
const isSelected = (path) => {
|
|
3860
|
-
return isPathPrefixOf(path, currentPath);
|
|
3861
|
-
};
|
|
3862
|
-
const renderMenuItem = (item) => {
|
|
3863
|
-
const EndActionIcon = item.endAction?.icon;
|
|
3864
|
-
const active = isSelected(item.path);
|
|
3865
|
-
return /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [
|
|
3866
|
-
/* @__PURE__ */ jsx(
|
|
3867
|
-
SidebarMenuButton,
|
|
3868
|
-
{
|
|
3869
|
-
asChild: true,
|
|
3870
|
-
isActive: active,
|
|
3871
|
-
size: "sm",
|
|
3872
|
-
tooltip: item.label,
|
|
3873
|
-
className: cn(
|
|
3874
|
-
rowIconClass,
|
|
3875
|
-
// Selected-row fill spelled out here rather than left to the primitive's
|
|
3876
|
-
// `data-[active=true]:bg-sidebar-accent`: that rule needs `data-active` on the
|
|
3877
|
-
// rendered element, and `asChild` hands the data attributes to the app's
|
|
3878
|
-
// `linkComponent`, which need not forward them. `className` is the one prop every
|
|
3879
|
-
// `linkComponent` takes, so it is the only reliable channel. `isActive` above
|
|
3880
|
-
// still sets `data-active` for apps that do forward it, and for test selectors.
|
|
3881
|
-
active && "bg-sidebar-accent text-sidebar-accent-foreground",
|
|
3882
|
-
// Reserve room for the endAction. The primitive does this with
|
|
3883
|
-
// `:has([data-sidebar=menu-action])`, which cannot fire here: `asChild` hands
|
|
3884
|
-
// its data attributes to the app's LinkComponent, which need not forward them.
|
|
3885
|
-
item.endAction && "pr-8"
|
|
3886
|
-
),
|
|
3887
|
-
children: /* @__PURE__ */ jsx(LinkComponent, { to: item.path, children: /* @__PURE__ */ jsxs("span", { className: "contents", onClick: closeMobileSidebar, children: [
|
|
3888
|
-
/* @__PURE__ */ jsx(ItemIcon, { icon: item.icon, active }),
|
|
3889
|
-
/* @__PURE__ */ jsx(
|
|
3890
|
-
"span",
|
|
3891
|
-
{
|
|
3892
|
-
className: cn(
|
|
3893
|
-
"whitespace-nowrap max-w-[168px] truncate",
|
|
3894
|
-
// Set on the label, so it has to restate the row's colour: a plain
|
|
3895
|
-
// `text-sidebar-foreground` here would beat the parent's accent colour.
|
|
3896
|
-
active ? "font-semibold text-sidebar-accent-foreground" : "font-medium text-sidebar-foreground"
|
|
3897
|
-
),
|
|
3898
|
-
style: rowFontStyle,
|
|
3899
|
-
children: item.label
|
|
3900
|
-
}
|
|
3901
|
-
)
|
|
3902
|
-
] }) })
|
|
3903
|
-
}
|
|
3904
|
-
),
|
|
3905
|
-
item.endAction && EndActionIcon && /* @__PURE__ */ jsx(Tooltip3, { content: item.endAction.tooltip, side: "right", sideOffset: 8, children: /* @__PURE__ */ jsx(SidebarMenuAction, { asChild: true, className: cn(rowIconClass, "right-1.5"), children: /* @__PURE__ */ jsx(LinkComponent, { to: item.endAction.path, children: /* @__PURE__ */ jsx("span", { className: "contents", onClick: closeMobileSidebar, children: /* @__PURE__ */ jsx(EndActionIcon, {}) }) }) }) })
|
|
3906
|
-
] }, item.id);
|
|
3907
|
-
};
|
|
3908
|
-
const renderGroup = (group) => {
|
|
3909
|
-
if (isCollapsed && !isMobile) {
|
|
3910
|
-
return /* @__PURE__ */ jsx(
|
|
3911
|
-
CollapsedSidebarGroup,
|
|
3912
|
-
{
|
|
3913
|
-
group,
|
|
3914
|
-
isSelected,
|
|
3915
|
-
linkComponent: LinkComponent
|
|
3916
|
-
},
|
|
3917
|
-
group.id
|
|
3918
|
-
);
|
|
3919
|
-
}
|
|
3920
|
-
return /* @__PURE__ */ jsx(
|
|
3921
|
-
ExpandedSidebarGroup,
|
|
3922
|
-
{
|
|
3923
|
-
group,
|
|
3924
|
-
isGroupOpen: expandedGroups.has(group.id),
|
|
3925
|
-
onToggle: (open) => toggleGroup(group.id, open),
|
|
3926
|
-
renderMenuItem
|
|
3927
|
-
},
|
|
3928
|
-
group.id
|
|
3929
|
-
);
|
|
3930
|
-
};
|
|
3931
|
-
const renderEntry = (entry) => {
|
|
3932
|
-
if (!isSidebarGroup(entry)) {
|
|
3933
|
-
return /* @__PURE__ */ jsx(
|
|
3934
|
-
TopLevelLinkRow,
|
|
3935
|
-
{
|
|
3936
|
-
item: entry,
|
|
3937
|
-
isCollapsed,
|
|
3938
|
-
isMobile,
|
|
3939
|
-
renderMenuItem
|
|
3940
|
-
},
|
|
3941
|
-
entry.id
|
|
3942
|
-
);
|
|
3943
|
-
}
|
|
3944
|
-
return renderGroup(entry);
|
|
3945
|
-
};
|
|
3946
|
-
return /* @__PURE__ */ jsxs(Sidebar, { collapsible, variant, children: [
|
|
3947
|
-
(header || isMobile) && /* @__PURE__ */ jsxs(
|
|
3948
|
-
SidebarHeader,
|
|
3949
|
-
{
|
|
3950
|
-
className: cn(
|
|
3951
|
-
headerHeight ? "flex flex-row items-center gap-0 px-2 py-0 box-border shrink-0" : "flex items-start",
|
|
3952
|
-
// Mobile sheet: logo flush left (matching the nav below), close button flush right.
|
|
3953
|
-
isMobile ? "justify-between" : "justify-center"
|
|
3954
|
-
),
|
|
3955
|
-
style: headerHeight ? { height: headerHeight, minHeight: headerHeight } : void 0,
|
|
3956
|
-
children: [
|
|
3957
|
-
header,
|
|
3958
|
-
isMobile && /* @__PURE__ */ jsxs(
|
|
3959
|
-
Button2,
|
|
3960
|
-
{
|
|
3961
|
-
variant: "ghost",
|
|
3962
|
-
size: "icon",
|
|
3963
|
-
className: "size-8 shrink-0 ml-auto text-sidebar-foreground",
|
|
3964
|
-
onClick: () => setOpenMobile(false),
|
|
3965
|
-
children: [
|
|
3966
|
-
/* @__PURE__ */ jsx(X, { className: "size-5" }),
|
|
3967
|
-
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close sidebar" })
|
|
3968
|
-
]
|
|
3969
|
-
}
|
|
3970
|
-
)
|
|
3971
|
-
]
|
|
3972
|
-
}
|
|
3973
|
-
),
|
|
3974
|
-
/* @__PURE__ */ jsx(SidebarContent, { className: "overflow-hidden", children: items.map((entry) => renderEntry(entry)) }),
|
|
3975
|
-
footer && /* @__PURE__ */ jsx(SidebarFooter, { children: footer })
|
|
3976
|
-
] });
|
|
3977
|
-
}
|
|
3978
|
-
var EXTERNAL_PROTOCOL = /^(https?:|mailto:|tel:|sms:|ftp:)/i;
|
|
3979
|
-
var PROTOCOL_RELATIVE = /^\/\//;
|
|
3980
|
-
function isExternalHref(to) {
|
|
3981
|
-
return EXTERNAL_PROTOCOL.test(to) || PROTOCOL_RELATIVE.test(to);
|
|
3982
|
-
}
|
|
3983
|
-
var baseClasses = "inline-flex items-center gap-1.5 rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
|
|
3984
|
-
var colorClasses = {
|
|
3985
|
-
primary: "px-2 h-8 text-sm font-medium text-primary hover:bg-primary/10",
|
|
3986
|
-
secondary: "px-2 h-8 text-sm font-medium text-secondary hover:bg-secondary/10",
|
|
3987
|
-
error: "px-2 h-8 text-sm font-medium text-error hover:bg-error/10",
|
|
3988
|
-
info: "px-2 h-8 text-sm font-medium text-info hover:bg-info/10",
|
|
3989
|
-
success: "px-2 h-8 text-sm font-medium text-success hover:bg-success/10",
|
|
3990
|
-
warning: "px-2 h-8 text-sm font-medium text-warning hover:bg-warning/10",
|
|
3991
|
-
gray: "px-2 h-8 text-sm font-medium text-gray hover:bg-gray/10"
|
|
3992
|
-
};
|
|
3993
|
-
var variantClasses = {
|
|
3994
|
-
default: "",
|
|
3995
|
-
ghost: "h-auto hover:bg-transparent p-0"
|
|
3996
|
-
};
|
|
3997
|
-
var underlineClasses = "relative no-underline after:absolute after:-bottom-0.5 after:left-0 after:h-px after:w-full after:bg-current hover:after:animate-underline-slide";
|
|
3998
|
-
function renderIconSlot(icon) {
|
|
3999
|
-
if (icon == null) return null;
|
|
4000
|
-
return /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", children: icon });
|
|
4001
|
-
}
|
|
4002
|
-
var Link = React.forwardRef(
|
|
4003
|
-
function Link2({
|
|
4004
|
-
to,
|
|
4005
|
-
params,
|
|
4006
|
-
search,
|
|
4007
|
-
linkComponent,
|
|
4008
|
-
color = "primary",
|
|
4009
|
-
variant = "default",
|
|
4010
|
-
underline = false,
|
|
4011
|
-
startIcon,
|
|
4012
|
-
endIcon,
|
|
4013
|
-
className,
|
|
4014
|
-
children,
|
|
4015
|
-
...rest
|
|
4016
|
-
}, ref) {
|
|
4017
|
-
const merged = cn(
|
|
4018
|
-
baseClasses,
|
|
4019
|
-
color != null && colorClasses[color],
|
|
4020
|
-
variantClasses[variant],
|
|
4021
|
-
underline && underlineClasses,
|
|
4022
|
-
className
|
|
4023
|
-
);
|
|
4024
|
-
const content = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
4025
|
-
renderIconSlot(startIcon),
|
|
4026
|
-
children,
|
|
4027
|
-
renderIconSlot(endIcon)
|
|
4028
|
-
] });
|
|
4029
|
-
const external = isExternalHref(to);
|
|
4030
|
-
if (external) {
|
|
4031
|
-
return /* @__PURE__ */ jsx(
|
|
4032
|
-
"a",
|
|
4033
|
-
{
|
|
4034
|
-
...rest,
|
|
4035
|
-
ref,
|
|
4036
|
-
href: to,
|
|
4037
|
-
target: "_blank",
|
|
4038
|
-
rel: "noopener noreferrer",
|
|
4039
|
-
className: merged,
|
|
4040
|
-
children: content
|
|
4041
|
-
}
|
|
4042
|
-
);
|
|
4043
|
-
}
|
|
4044
|
-
if (linkComponent) {
|
|
4045
|
-
const LinkComp = linkComponent;
|
|
4046
|
-
return /* @__PURE__ */ jsx(
|
|
4047
|
-
LinkComp,
|
|
4048
|
-
{
|
|
4049
|
-
...rest,
|
|
4050
|
-
ref,
|
|
4051
|
-
to,
|
|
4052
|
-
params,
|
|
4053
|
-
search,
|
|
4054
|
-
className: merged,
|
|
4055
|
-
children: content
|
|
4056
|
-
}
|
|
4057
|
-
);
|
|
4058
|
-
}
|
|
4059
|
-
return /* @__PURE__ */ jsx("a", { ...rest, ref, href: to, className: merged, children: content });
|
|
4060
|
-
}
|
|
4061
|
-
);
|
|
4062
|
-
Link.displayName = "Link";
|
|
4063
|
-
var GlitchText = ({
|
|
4064
|
-
text,
|
|
4065
|
-
children,
|
|
4066
|
-
speed = 15,
|
|
4067
|
-
enableShadows = true,
|
|
4068
|
-
enableOnHover = false,
|
|
4069
|
-
className = ""
|
|
4070
|
-
}) => {
|
|
4071
|
-
const containerRef = useRef(null);
|
|
4072
|
-
const [isHovered, setIsHovered] = useState(false);
|
|
4073
|
-
const [frame, setFrame] = useState(0);
|
|
4074
|
-
const content = text ?? (typeof children === "string" ? children : "");
|
|
4075
|
-
const clipPaths = [
|
|
4076
|
-
"inset(10% 0 85% 0)",
|
|
4077
|
-
"inset(45% 0 40% 0)",
|
|
4078
|
-
"inset(80% 0 5% 0)",
|
|
4079
|
-
"inset(10% 0 60% 0)",
|
|
4080
|
-
"inset(70% 0 20% 0)",
|
|
4081
|
-
"inset(25% 0 50% 0)",
|
|
4082
|
-
"inset(55% 0 35% 0)",
|
|
4083
|
-
"inset(5% 0 75% 0)",
|
|
4084
|
-
"inset(90% 0 2% 0)",
|
|
4085
|
-
"inset(30% 0 55% 0)",
|
|
4086
|
-
"inset(15% 0 70% 0)",
|
|
4087
|
-
"inset(65% 0 25% 0)",
|
|
4088
|
-
"inset(40% 0 45% 0)",
|
|
4089
|
-
"inset(85% 0 10% 0)",
|
|
4090
|
-
"inset(20% 0 65% 0)",
|
|
4091
|
-
"inset(50% 0 30% 0)",
|
|
4092
|
-
"inset(75% 0 15% 0)",
|
|
4093
|
-
"inset(35% 0 52% 0)",
|
|
4094
|
-
"inset(60% 0 28% 0)",
|
|
4095
|
-
"inset(8% 0 82% 0)"
|
|
4096
|
-
];
|
|
4097
|
-
const shouldAnimate = enableOnHover ? isHovered : true;
|
|
4098
|
-
useEffect(() => {
|
|
4099
|
-
if (!shouldAnimate) {
|
|
4100
|
-
return;
|
|
4101
|
-
}
|
|
4102
|
-
const intervalMs = speed * 1e3 / clipPaths.length;
|
|
4103
|
-
const interval = setInterval(() => {
|
|
4104
|
-
setFrame((f) => (f + 1) % clipPaths.length);
|
|
4105
|
-
}, intervalMs);
|
|
4106
|
-
return () => clearInterval(interval);
|
|
4107
|
-
}, [shouldAnimate, speed, clipPaths.length]);
|
|
4108
|
-
const containerStyle = {
|
|
4109
|
-
position: "relative",
|
|
4110
|
-
display: "inline-block",
|
|
4111
|
-
cursor: "pointer",
|
|
4112
|
-
userSelect: "none"
|
|
4113
|
-
};
|
|
4114
|
-
const textStyle = {
|
|
4115
|
-
position: "relative",
|
|
4116
|
-
fontSize: "clamp(2rem, 10vw, 4rem)",
|
|
4117
|
-
fontWeight: 900,
|
|
4118
|
-
color: "white"
|
|
4119
|
-
};
|
|
4120
|
-
const layerBaseStyle = {
|
|
4121
|
-
position: "absolute",
|
|
4122
|
-
top: 0,
|
|
4123
|
-
left: 0,
|
|
4124
|
-
width: "100%",
|
|
4125
|
-
height: "100%",
|
|
4126
|
-
fontSize: "clamp(2rem, 10vw, 4rem)",
|
|
4127
|
-
fontWeight: 900,
|
|
4128
|
-
color: "white",
|
|
4129
|
-
background: "black",
|
|
4130
|
-
overflow: "hidden"
|
|
4131
|
-
};
|
|
4132
|
-
const afterIndex = frame;
|
|
4133
|
-
const beforeIndex = (frame + 10) % clipPaths.length;
|
|
4134
|
-
const showLayers = enableOnHover ? isHovered : true;
|
|
4135
|
-
const afterStyle = {
|
|
4136
|
-
...layerBaseStyle,
|
|
4137
|
-
left: "10px",
|
|
4138
|
-
textShadow: enableShadows ? "-5px 0 red" : "none",
|
|
4139
|
-
clipPath: showLayers ? clipPaths[afterIndex] : "inset(0 0 100% 0)",
|
|
4140
|
-
opacity: showLayers ? 1 : 0,
|
|
4141
|
-
transition: "opacity 0.1s"
|
|
4142
|
-
};
|
|
4143
|
-
const beforeStyle = {
|
|
4144
|
-
...layerBaseStyle,
|
|
4145
|
-
left: "-10px",
|
|
4146
|
-
textShadow: enableShadows ? "5px 0 cyan" : "none",
|
|
4147
|
-
clipPath: showLayers ? clipPaths[beforeIndex] : "inset(0 0 100% 0)",
|
|
4148
|
-
opacity: showLayers ? 1 : 0,
|
|
4149
|
-
transition: "opacity 0.1s"
|
|
4150
|
-
};
|
|
4151
|
-
return /* @__PURE__ */ jsxs(
|
|
4152
|
-
"div",
|
|
4153
|
-
{
|
|
4154
|
-
className,
|
|
4155
|
-
onMouseEnter: () => setIsHovered(true),
|
|
4156
|
-
onMouseLeave: () => setIsHovered(false),
|
|
4157
|
-
ref: containerRef,
|
|
4158
|
-
role: "button",
|
|
4159
|
-
tabIndex: 0,
|
|
4160
|
-
style: containerStyle,
|
|
4161
|
-
children: [
|
|
4162
|
-
/* @__PURE__ */ jsx("span", { style: textStyle, children: content }),
|
|
4163
|
-
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: beforeStyle, children: content }),
|
|
4164
|
-
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: afterStyle, children: content })
|
|
4165
|
-
]
|
|
4166
|
-
}
|
|
4167
|
-
);
|
|
4168
|
-
};
|
|
4169
|
-
function GradientText({
|
|
4170
|
-
text,
|
|
4171
|
-
className,
|
|
4172
|
-
gradient = "linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)",
|
|
4173
|
-
neon = false,
|
|
4174
|
-
transition = { duration: 3, repeat: Number.POSITIVE_INFINITY, ease: "linear" },
|
|
4175
|
-
...props
|
|
4176
|
-
}) {
|
|
4177
|
-
const baseStyle = {
|
|
4178
|
-
backgroundImage: gradient
|
|
4179
|
-
};
|
|
4180
|
-
return /* @__PURE__ */ jsxs(
|
|
4181
|
-
"span",
|
|
4182
|
-
{
|
|
4183
|
-
className: cn("relative inline-block", className),
|
|
4184
|
-
"data-slot": "gradient-text",
|
|
4185
|
-
...props,
|
|
4186
|
-
children: [
|
|
4187
|
-
/* @__PURE__ */ jsx(
|
|
4188
|
-
motion.span,
|
|
4189
|
-
{
|
|
4190
|
-
animate: { backgroundPositionX: ["0%", "200%"] },
|
|
4191
|
-
className: "m-0 text-transparent bg-clip-text bg-[length:200%_100%]",
|
|
4192
|
-
style: baseStyle,
|
|
4193
|
-
transition,
|
|
4194
|
-
children: text
|
|
4195
|
-
}
|
|
4196
|
-
),
|
|
4197
|
-
neon && /* @__PURE__ */ jsx(
|
|
4198
|
-
motion.span,
|
|
4199
|
-
{
|
|
4200
|
-
animate: { backgroundPositionX: ["0%", "200%"] },
|
|
4201
|
-
className: "m-0 absolute top-0 left-0 text-transparent bg-clip-text blur-[8px] mix-blend-plus-lighter bg-[length:200%_100%]",
|
|
4202
|
-
style: baseStyle,
|
|
4203
|
-
transition,
|
|
4204
|
-
children: text
|
|
4205
|
-
}
|
|
4206
|
-
)
|
|
4207
|
-
]
|
|
4208
|
-
}
|
|
4209
|
-
);
|
|
4210
|
-
}
|
|
4211
|
-
function HighlightText({
|
|
4212
|
-
ref,
|
|
4213
|
-
text,
|
|
4214
|
-
className,
|
|
4215
|
-
inView = false,
|
|
4216
|
-
inViewMargin = "0px",
|
|
4217
|
-
inViewOnce = true,
|
|
4218
|
-
transition = { duration: 2, ease: "easeInOut" },
|
|
4219
|
-
...props
|
|
4220
|
-
}) {
|
|
4221
|
-
const localRef = React.useRef(null);
|
|
4222
|
-
React.useImperativeHandle(ref, () => localRef.current);
|
|
4223
|
-
const inViewResult = useInView(localRef, {
|
|
4224
|
-
once: inViewOnce,
|
|
4225
|
-
margin: inViewMargin
|
|
4226
|
-
});
|
|
4227
|
-
const isInView = !inView || inViewResult;
|
|
4228
|
-
return /* @__PURE__ */ jsx(
|
|
4229
|
-
motion.span,
|
|
4230
|
-
{
|
|
4231
|
-
animate: isInView ? { backgroundSize: "100% 100%" } : void 0,
|
|
4232
|
-
className: cn(
|
|
4233
|
-
"relative inline-block px-2 py-1 rounded-lg bg-gradient-to-r from-blue-100 to-purple-100 dark:from-blue-500 dark:to-purple-500",
|
|
4234
|
-
className
|
|
4235
|
-
),
|
|
4236
|
-
"data-slot": "highlight-text",
|
|
4237
|
-
initial: {
|
|
4238
|
-
backgroundSize: "0% 100%"
|
|
4239
|
-
},
|
|
4240
|
-
ref: localRef,
|
|
4241
|
-
style: {
|
|
4242
|
-
backgroundRepeat: "no-repeat",
|
|
4243
|
-
backgroundPosition: "left center",
|
|
4244
|
-
display: "inline"
|
|
4245
|
-
},
|
|
4246
|
-
transition,
|
|
4247
|
-
...props,
|
|
4248
|
-
children: text
|
|
4249
|
-
}
|
|
4250
|
-
);
|
|
4251
|
-
}
|
|
4252
|
-
function ShimmeringText({
|
|
4253
|
-
text,
|
|
4254
|
-
duration = 2.5,
|
|
4255
|
-
transition,
|
|
4256
|
-
wave = false,
|
|
4257
|
-
className,
|
|
4258
|
-
color = "var(--color-neutral-500)",
|
|
4259
|
-
shimmeringColor = "var(--color-neutral-300)",
|
|
4260
|
-
...props
|
|
4261
|
-
}) {
|
|
4262
|
-
return /* @__PURE__ */ jsx(
|
|
4263
|
-
motion.span,
|
|
4264
|
-
{
|
|
4265
|
-
className: cn("relative inline-block [perspective:500px]", className),
|
|
4266
|
-
style: {
|
|
4267
|
-
"--shimmering-color": shimmeringColor,
|
|
4268
|
-
"--color": color,
|
|
4269
|
-
color: "var(--color)"
|
|
4270
|
-
},
|
|
4271
|
-
...props,
|
|
4272
|
-
children: text?.split("")?.map((char, i) => /* @__PURE__ */ jsx(
|
|
4273
|
-
motion.span,
|
|
4274
|
-
{
|
|
4275
|
-
animate: {
|
|
4276
|
-
...wave ? {
|
|
4277
|
-
x: [0, 5, 0],
|
|
4278
|
-
y: [0, -5, 0],
|
|
4279
|
-
scale: [1, 1.1, 1],
|
|
4280
|
-
rotateY: [0, 15, 0]
|
|
4281
|
-
} : {},
|
|
4282
|
-
color: ["var(--color)", "var(--shimmering-color)", "var(--color)"]
|
|
4283
|
-
},
|
|
4284
|
-
className: "inline-block whitespace-pre [transform-style:preserve-3d]",
|
|
4285
|
-
initial: {
|
|
4286
|
-
...wave ? {
|
|
4287
|
-
scale: 1,
|
|
4288
|
-
rotateY: 0
|
|
4289
|
-
} : {},
|
|
4290
|
-
color: "var(--color)"
|
|
4291
|
-
},
|
|
4292
|
-
transition: {
|
|
4293
|
-
duration,
|
|
4294
|
-
repeat: Number.POSITIVE_INFINITY,
|
|
4295
|
-
repeatType: "loop",
|
|
4296
|
-
repeatDelay: text.length * 0.05,
|
|
4297
|
-
delay: i * duration / text.length,
|
|
4298
|
-
ease: "easeInOut",
|
|
4299
|
-
...transition
|
|
4300
|
-
},
|
|
4301
|
-
children: char
|
|
4302
|
-
},
|
|
4303
|
-
i
|
|
4304
|
-
))
|
|
4305
|
-
}
|
|
4306
|
-
);
|
|
4307
|
-
}
|
|
4308
|
-
var TEXT_EFFECT_REGISTRY = {
|
|
4309
|
-
"glitch-text": GlitchText,
|
|
4310
|
-
"gradient-text": GradientText,
|
|
4311
|
-
"highlight-text": HighlightText,
|
|
4312
|
-
"shimmer-text": ShimmeringText
|
|
4313
|
-
};
|
|
4314
|
-
function buildTagRegex(tags) {
|
|
4315
|
-
const patterns = tags.map(
|
|
4316
|
-
(tag) => `<${tag}>(.*?)<\\/${tag}>`
|
|
4317
|
-
);
|
|
4318
|
-
return new RegExp(patterns.join("|"), "g");
|
|
4319
|
-
}
|
|
4320
|
-
var tagNames = Object.keys(TEXT_EFFECT_REGISTRY);
|
|
4321
|
-
var TAG_REGEX = buildTagRegex(tagNames);
|
|
4322
|
-
function parseTextMarkup(text) {
|
|
4323
|
-
const parts = [];
|
|
4324
|
-
let lastIndex = 0;
|
|
4325
|
-
let match;
|
|
4326
|
-
TAG_REGEX.lastIndex = 0;
|
|
4327
|
-
while ((match = TAG_REGEX.exec(text)) !== null) {
|
|
4328
|
-
if (match.index > lastIndex) {
|
|
4329
|
-
parts.push(text.slice(lastIndex, match.index));
|
|
4330
|
-
}
|
|
4331
|
-
for (let i = 0; i < tagNames.length; i++) {
|
|
4332
|
-
const captured = match[i + 1];
|
|
4333
|
-
if (captured !== void 0) {
|
|
4334
|
-
const Component = TEXT_EFFECT_REGISTRY[tagNames[i]];
|
|
4335
|
-
parts.push(/* @__PURE__ */ jsx(Component, { text: captured }, match.index));
|
|
4336
|
-
break;
|
|
4337
|
-
}
|
|
4338
|
-
}
|
|
4339
|
-
lastIndex = TAG_REGEX.lastIndex;
|
|
4340
|
-
}
|
|
4341
|
-
if (lastIndex < text.length) {
|
|
4342
|
-
parts.push(text.slice(lastIndex));
|
|
4343
|
-
}
|
|
4344
|
-
return parts;
|
|
4345
|
-
}
|
|
4346
|
-
|
|
4347
|
-
export { Avatar2 as Avatar, Button2 as Button, CopyButton, DropdownMenu2 as DropdownMenu, DropdownMenuCheckboxItem2 as DropdownMenuCheckboxItem, DropdownMenuContent2 as DropdownMenuContent, DropdownMenuGroup2 as DropdownMenuGroup, DropdownMenuItem2 as DropdownMenuItem, DropdownMenuLabel2 as DropdownMenuLabel, DropdownMenuRadioGroup2 as DropdownMenuRadioGroup, DropdownMenuRadioItem2 as DropdownMenuRadioItem, DropdownMenuSeparator2 as DropdownMenuSeparator, DropdownMenuShortcut2 as DropdownMenuShortcut, DropdownMenuSub2 as DropdownMenuSub, DropdownMenuSubContent2 as DropdownMenuSubContent, DropdownMenuSubTrigger2 as DropdownMenuSubTrigger, DropdownMenuTrigger2 as DropdownMenuTrigger, FieldLabelRow, FlashButton, GlitchText, GradientText, Highlight, HighlightItem, HighlightText, Input, InputPassword, InvertButton, LIST_CLASS_NAMES, Link, List, Menu, ScrollArea, ScrollBar, Sheet2 as Sheet, SheetClose2 as SheetClose, SheetContent2 as SheetContent, SheetDescription2 as SheetDescription, SheetFooter2 as SheetFooter, SheetHeader2 as SheetHeader, SheetTitle2 as SheetTitle, SheetTrigger2 as SheetTrigger, ShimmeringText, Sidebar, Sidebar2, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Slot, Tooltip2 as Tooltip, Tooltip3 as Tooltip2, TooltipContent2 as TooltipContent, TooltipProvider2 as TooltipProvider, TooltipTrigger2 as TooltipTrigger, buttonVariants3 as buttonVariants, fieldHintClassName, inputLabelClassName, isPathPrefixOf, isSidebarGroup, parseTextMarkup, useSidebar };
|