@poodle64/ui 2026.8.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +624 -0
- package/dist/components/ui/alert/alert-description.svelte +23 -0
- package/dist/components/ui/alert/alert-description.svelte.d.ts +9 -0
- package/dist/components/ui/alert/alert-title.svelte +23 -0
- package/dist/components/ui/alert/alert-title.svelte.d.ts +9 -0
- package/dist/components/ui/alert/alert.svelte +46 -0
- package/dist/components/ui/alert/alert.svelte.d.ts +28 -0
- package/dist/components/ui/alert/index.d.ts +4 -0
- package/dist/components/ui/alert/index.js +4 -0
- package/dist/components/ui/alert-dialog/alert-dialog-action.svelte +27 -0
- package/dist/components/ui/alert-dialog/alert-dialog-action.svelte.d.ts +9 -0
- package/dist/components/ui/alert-dialog/alert-dialog-cancel.svelte +27 -0
- package/dist/components/ui/alert-dialog/alert-dialog-cancel.svelte.d.ts +9 -0
- package/dist/components/ui/alert-dialog/alert-dialog-content.svelte +39 -0
- package/dist/components/ui/alert-dialog/alert-dialog-content.svelte.d.ts +11 -0
- package/dist/components/ui/alert-dialog/alert-dialog-description.svelte +20 -0
- package/dist/components/ui/alert-dialog/alert-dialog-description.svelte.d.ts +4 -0
- package/dist/components/ui/alert-dialog/alert-dialog-footer.svelte +23 -0
- package/dist/components/ui/alert-dialog/alert-dialog-footer.svelte.d.ts +5 -0
- package/dist/components/ui/alert-dialog/alert-dialog-header.svelte +23 -0
- package/dist/components/ui/alert-dialog/alert-dialog-header.svelte.d.ts +5 -0
- package/dist/components/ui/alert-dialog/alert-dialog-media.svelte +23 -0
- package/dist/components/ui/alert-dialog/alert-dialog-media.svelte.d.ts +5 -0
- package/dist/components/ui/alert-dialog/alert-dialog-overlay.svelte +20 -0
- package/dist/components/ui/alert-dialog/alert-dialog-overlay.svelte.d.ts +4 -0
- package/dist/components/ui/alert-dialog/alert-dialog-portal.svelte +7 -0
- package/dist/components/ui/alert-dialog/alert-dialog-portal.svelte.d.ts +3 -0
- package/dist/components/ui/alert-dialog/alert-dialog-title.svelte +20 -0
- package/dist/components/ui/alert-dialog/alert-dialog-title.svelte.d.ts +4 -0
- package/dist/components/ui/alert-dialog/alert-dialog-trigger.svelte +7 -0
- package/dist/components/ui/alert-dialog/alert-dialog-trigger.svelte.d.ts +4 -0
- package/dist/components/ui/alert-dialog/alert-dialog.svelte +7 -0
- package/dist/components/ui/alert-dialog/alert-dialog.svelte.d.ts +3 -0
- package/dist/components/ui/alert-dialog/index.d.ts +13 -0
- package/dist/components/ui/alert-dialog/index.js +15 -0
- package/dist/components/ui/app-dialog/app-dialog.svelte +111 -0
- package/dist/components/ui/app-dialog/app-dialog.svelte.d.ts +41 -0
- package/dist/components/ui/app-dialog/index.d.ts +2 -0
- package/dist/components/ui/app-dialog/index.js +2 -0
- package/dist/components/ui/app-shell/app-nav.svelte +299 -0
- package/dist/components/ui/app-shell/app-nav.svelte.d.ts +22 -0
- package/dist/components/ui/app-shell/app-shell.svelte +675 -0
- package/dist/components/ui/app-shell/app-shell.svelte.d.ts +157 -0
- package/dist/components/ui/app-shell/index.d.ts +6 -0
- package/dist/components/ui/app-shell/index.js +6 -0
- package/dist/components/ui/app-shell/measure.d.ts +28 -0
- package/dist/components/ui/app-shell/measure.js +21 -0
- package/dist/components/ui/app-shell/texture.d.ts +32 -0
- package/dist/components/ui/app-shell/texture.js +27 -0
- package/dist/components/ui/app-shell/types.d.ts +134 -0
- package/dist/components/ui/app-shell/types.js +88 -0
- package/dist/components/ui/arc-gauge/arc-gauge.svelte +112 -0
- package/dist/components/ui/arc-gauge/arc-gauge.svelte.d.ts +15 -0
- package/dist/components/ui/arc-gauge/index.d.ts +3 -0
- package/dist/components/ui/arc-gauge/index.js +2 -0
- package/dist/components/ui/avatar/avatar-fallback.svelte +26 -0
- package/dist/components/ui/avatar/avatar-fallback.svelte.d.ts +4 -0
- package/dist/components/ui/avatar/avatar-image.svelte +17 -0
- package/dist/components/ui/avatar/avatar-image.svelte.d.ts +4 -0
- package/dist/components/ui/avatar/avatar.svelte +31 -0
- package/dist/components/ui/avatar/avatar.svelte.d.ts +4 -0
- package/dist/components/ui/avatar/index.d.ts +4 -0
- package/dist/components/ui/avatar/index.js +6 -0
- package/dist/components/ui/badge/badge.svelte +50 -0
- package/dist/components/ui/badge/badge.svelte.d.ts +38 -0
- package/dist/components/ui/badge/index.d.ts +2 -0
- package/dist/components/ui/badge/index.js +2 -0
- package/dist/components/ui/bar-row/bar-row.svelte +42 -0
- package/dist/components/ui/bar-row/bar-row.svelte.d.ts +12 -0
- package/dist/components/ui/bar-row/index.d.ts +2 -0
- package/dist/components/ui/bar-row/index.js +2 -0
- package/dist/components/ui/button/button.svelte +89 -0
- package/dist/components/ui/button/button.svelte.d.ts +70 -0
- package/dist/components/ui/button/index.d.ts +2 -0
- package/dist/components/ui/button/index.js +4 -0
- package/dist/components/ui/card/card-action.svelte +23 -0
- package/dist/components/ui/card/card-action.svelte.d.ts +5 -0
- package/dist/components/ui/card/card-content.svelte +20 -0
- package/dist/components/ui/card/card-content.svelte.d.ts +5 -0
- package/dist/components/ui/card/card-description.svelte +20 -0
- package/dist/components/ui/card/card-description.svelte.d.ts +5 -0
- package/dist/components/ui/card/card-footer.svelte +23 -0
- package/dist/components/ui/card/card-footer.svelte.d.ts +5 -0
- package/dist/components/ui/card/card-header.svelte +23 -0
- package/dist/components/ui/card/card-header.svelte.d.ts +5 -0
- package/dist/components/ui/card/card-title.svelte +52 -0
- package/dist/components/ui/card/card-title.svelte.d.ts +8 -0
- package/dist/components/ui/card/card.svelte +25 -0
- package/dist/components/ui/card/card.svelte.d.ts +8 -0
- package/dist/components/ui/card/index.d.ts +8 -0
- package/dist/components/ui/card/index.js +10 -0
- package/dist/components/ui/checkbox/checkbox.svelte +36 -0
- package/dist/components/ui/checkbox/checkbox.svelte.d.ts +8 -0
- package/dist/components/ui/checkbox/index.d.ts +2 -0
- package/dist/components/ui/checkbox/index.js +2 -0
- package/dist/components/ui/command/command-dialog.svelte +42 -0
- package/dist/components/ui/command/command-dialog.svelte.d.ts +14 -0
- package/dist/components/ui/command/command-empty.svelte +17 -0
- package/dist/components/ui/command/command-empty.svelte.d.ts +4 -0
- package/dist/components/ui/command/command-group.svelte +33 -0
- package/dist/components/ui/command/command-group.svelte.d.ts +7 -0
- package/dist/components/ui/command/command-input.svelte +36 -0
- package/dist/components/ui/command/command-input.svelte.d.ts +4 -0
- package/dist/components/ui/command/command-item.svelte +27 -0
- package/dist/components/ui/command/command-item.svelte.d.ts +4 -0
- package/dist/components/ui/command/command-link-item.svelte +20 -0
- package/dist/components/ui/command/command-link-item.svelte.d.ts +4 -0
- package/dist/components/ui/command/command-list.svelte +20 -0
- package/dist/components/ui/command/command-list.svelte.d.ts +4 -0
- package/dist/components/ui/command/command-loading.svelte +7 -0
- package/dist/components/ui/command/command-loading.svelte.d.ts +4 -0
- package/dist/components/ui/command/command-separator.svelte +17 -0
- package/dist/components/ui/command/command-separator.svelte.d.ts +4 -0
- package/dist/components/ui/command/command-shortcut.svelte +23 -0
- package/dist/components/ui/command/command-shortcut.svelte.d.ts +5 -0
- package/dist/components/ui/command/command.svelte +28 -0
- package/dist/components/ui/command/command.svelte.d.ts +8 -0
- package/dist/components/ui/command/index.d.ts +12 -0
- package/dist/components/ui/command/index.js +14 -0
- package/dist/components/ui/command-palette/command-palette.svelte +94 -0
- package/dist/components/ui/command-palette/command-palette.svelte.d.ts +40 -0
- package/dist/components/ui/command-palette/index.d.ts +3 -0
- package/dist/components/ui/command-palette/index.js +2 -0
- package/dist/components/ui/context-column/context-column.svelte +56 -0
- package/dist/components/ui/context-column/context-column.svelte.d.ts +14 -0
- package/dist/components/ui/context-column/index.d.ts +2 -0
- package/dist/components/ui/context-column/index.js +2 -0
- package/dist/components/ui/data-table/data-table.svelte.d.ts +40 -0
- package/dist/components/ui/data-table/data-table.svelte.js +110 -0
- package/dist/components/ui/data-table/flex-render.svelte +40 -0
- package/dist/components/ui/data-table/flex-render.svelte.d.ts +33 -0
- package/dist/components/ui/data-table/index.d.ts +3 -0
- package/dist/components/ui/data-table/index.js +3 -0
- package/dist/components/ui/data-table/render-helpers.d.ts +90 -0
- package/dist/components/ui/data-table/render-helpers.js +99 -0
- package/dist/components/ui/data-table-tanstack/data-table-tanstack.svelte +247 -0
- package/dist/components/ui/data-table-tanstack/data-table-tanstack.svelte.d.ts +79 -0
- package/dist/components/ui/data-table-tanstack/index.d.ts +3 -0
- package/dist/components/ui/data-table-tanstack/index.js +2 -0
- package/dist/components/ui/data-table-toolbar/data-table-toolbar.svelte +102 -0
- package/dist/components/ui/data-table-toolbar/data-table-toolbar.svelte.d.ts +32 -0
- package/dist/components/ui/data-table-toolbar/index.d.ts +3 -0
- package/dist/components/ui/data-table-toolbar/index.js +2 -0
- package/dist/components/ui/detail-panel/detail-panel.svelte +95 -0
- package/dist/components/ui/detail-panel/detail-panel.svelte.d.ts +26 -0
- package/dist/components/ui/detail-panel/index.d.ts +2 -0
- package/dist/components/ui/detail-panel/index.js +2 -0
- package/dist/components/ui/dialog/dialog-close.svelte +11 -0
- package/dist/components/ui/dialog/dialog-close.svelte.d.ts +4 -0
- package/dist/components/ui/dialog/dialog-content.svelte +48 -0
- package/dist/components/ui/dialog/dialog-content.svelte.d.ts +13 -0
- package/dist/components/ui/dialog/dialog-description.svelte +20 -0
- package/dist/components/ui/dialog/dialog-description.svelte.d.ts +4 -0
- package/dist/components/ui/dialog/dialog-footer.svelte +35 -0
- package/dist/components/ui/dialog/dialog-footer.svelte.d.ts +8 -0
- package/dist/components/ui/dialog/dialog-header.svelte +20 -0
- package/dist/components/ui/dialog/dialog-header.svelte.d.ts +5 -0
- package/dist/components/ui/dialog/dialog-overlay.svelte +20 -0
- package/dist/components/ui/dialog/dialog-overlay.svelte.d.ts +4 -0
- package/dist/components/ui/dialog/dialog-portal.svelte +7 -0
- package/dist/components/ui/dialog/dialog-portal.svelte.d.ts +3 -0
- package/dist/components/ui/dialog/dialog-title.svelte +17 -0
- package/dist/components/ui/dialog/dialog-title.svelte.d.ts +4 -0
- package/dist/components/ui/dialog/dialog-trigger.svelte +11 -0
- package/dist/components/ui/dialog/dialog-trigger.svelte.d.ts +4 -0
- package/dist/components/ui/dialog/dialog.svelte +7 -0
- package/dist/components/ui/dialog/dialog.svelte.d.ts +3 -0
- package/dist/components/ui/dialog/index.d.ts +11 -0
- package/dist/components/ui/dialog/index.js +13 -0
- package/dist/components/ui/dialog-section/dialog-section.svelte +20 -0
- package/dist/components/ui/dialog-section/dialog-section.svelte.d.ts +8 -0
- package/dist/components/ui/dialog-section/index.d.ts +2 -0
- package/dist/components/ui/dialog-section/index.js +2 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte +16 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte.d.ts +4 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte +44 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte.d.ts +9 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte +31 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte.d.ts +10 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte +22 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte.d.ts +8 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-group.svelte +7 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-group.svelte.d.ts +4 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte +27 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte.d.ts +8 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-label.svelte +27 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-label.svelte.d.ts +8 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-portal.svelte +7 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-portal.svelte.d.ts +3 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte +16 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte.d.ts +4 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte +34 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte.d.ts +4 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-separator.svelte +17 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-separator.svelte.d.ts +4 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte +23 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte.d.ts +5 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte +20 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte.d.ts +4 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte +29 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte.d.ts +7 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-sub.svelte +7 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-sub.svelte.d.ts +3 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-trigger.svelte +7 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu-trigger.svelte.d.ts +4 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu.svelte +7 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu.svelte.d.ts +3 -0
- package/dist/components/ui/dropdown-menu/index.d.ts +18 -0
- package/dist/components/ui/dropdown-menu/index.js +18 -0
- package/dist/components/ui/empty-state/empty-state.svelte +44 -0
- package/dist/components/ui/empty-state/empty-state.svelte.d.ts +14 -0
- package/dist/components/ui/empty-state/index.d.ts +2 -0
- package/dist/components/ui/empty-state/index.js +2 -0
- package/dist/components/ui/error-state/error-state.svelte +52 -0
- package/dist/components/ui/error-state/error-state.svelte.d.ts +10 -0
- package/dist/components/ui/error-state/index.d.ts +2 -0
- package/dist/components/ui/error-state/index.js +2 -0
- package/dist/components/ui/info-tip/index.d.ts +2 -0
- package/dist/components/ui/info-tip/index.js +2 -0
- package/dist/components/ui/info-tip/info-tip.svelte +37 -0
- package/dist/components/ui/info-tip/info-tip.svelte.d.ts +10 -0
- package/dist/components/ui/input/index.d.ts +2 -0
- package/dist/components/ui/input/index.js +4 -0
- package/dist/components/ui/input/input.svelte +48 -0
- package/dist/components/ui/input/input.svelte.d.ts +13 -0
- package/dist/components/ui/input-group/index.d.ts +7 -0
- package/dist/components/ui/input-group/index.js +9 -0
- package/dist/components/ui/input-group/input-group-addon.svelte +53 -0
- package/dist/components/ui/input-group/input-group-addon.svelte.d.ts +32 -0
- package/dist/components/ui/input-group/input-group-button.svelte +49 -0
- package/dist/components/ui/input-group/input-group-button.svelte.d.ts +32 -0
- package/dist/components/ui/input-group/input-group-input.svelte +23 -0
- package/dist/components/ui/input-group/input-group-input.svelte.d.ts +11 -0
- package/dist/components/ui/input-group/input-group-text.svelte +22 -0
- package/dist/components/ui/input-group/input-group-text.svelte.d.ts +5 -0
- package/dist/components/ui/input-group/input-group-textarea.svelte +23 -0
- package/dist/components/ui/input-group/input-group-textarea.svelte.d.ts +3 -0
- package/dist/components/ui/input-group/input-group.svelte +24 -0
- package/dist/components/ui/input-group/input-group.svelte.d.ts +5 -0
- package/dist/components/ui/label/index.d.ts +2 -0
- package/dist/components/ui/label/index.js +4 -0
- package/dist/components/ui/label/label.svelte +20 -0
- package/dist/components/ui/label/label.svelte.d.ts +4 -0
- package/dist/components/ui/loading-state/index.d.ts +2 -0
- package/dist/components/ui/loading-state/index.js +2 -0
- package/dist/components/ui/loading-state/loading-state.svelte +28 -0
- package/dist/components/ui/loading-state/loading-state.svelte.d.ts +8 -0
- package/dist/components/ui/page-header/index.d.ts +2 -0
- package/dist/components/ui/page-header/index.js +2 -0
- package/dist/components/ui/page-header/page-header.svelte +100 -0
- package/dist/components/ui/page-header/page-header.svelte.d.ts +17 -0
- package/dist/components/ui/panel/index.d.ts +2 -0
- package/dist/components/ui/panel/index.js +2 -0
- package/dist/components/ui/panel/panel.svelte +54 -0
- package/dist/components/ui/panel/panel.svelte.d.ts +16 -0
- package/dist/components/ui/password-input/index.d.ts +2 -0
- package/dist/components/ui/password-input/index.js +4 -0
- package/dist/components/ui/password-input/password-input.svelte +48 -0
- package/dist/components/ui/password-input/password-input.svelte.d.ts +8 -0
- package/dist/components/ui/popover/index.d.ts +4 -0
- package/dist/components/ui/popover/index.js +6 -0
- package/dist/components/ui/popover/popover-content.svelte +45 -0
- package/dist/components/ui/popover/popover-content.svelte.d.ts +7 -0
- package/dist/components/ui/popover/popover-trigger.svelte +7 -0
- package/dist/components/ui/popover/popover-trigger.svelte.d.ts +4 -0
- package/dist/components/ui/popover/popover.svelte +7 -0
- package/dist/components/ui/popover/popover.svelte.d.ts +3 -0
- package/dist/components/ui/progress/index.d.ts +2 -0
- package/dist/components/ui/progress/index.js +4 -0
- package/dist/components/ui/progress/progress.svelte +30 -0
- package/dist/components/ui/progress/progress.svelte.d.ts +4 -0
- package/dist/components/ui/scorecard/index.d.ts +2 -0
- package/dist/components/ui/scorecard/index.js +2 -0
- package/dist/components/ui/scorecard/scorecard.svelte +35 -0
- package/dist/components/ui/scorecard/scorecard.svelte.d.ts +8 -0
- package/dist/components/ui/select/index.d.ts +12 -0
- package/dist/components/ui/select/index.js +14 -0
- package/dist/components/ui/select/select-content.svelte +45 -0
- package/dist/components/ui/select/select-content.svelte.d.ts +11 -0
- package/dist/components/ui/select/select-group-heading.svelte +21 -0
- package/dist/components/ui/select/select-group-heading.svelte.d.ts +10 -0
- package/dist/components/ui/select/select-group.svelte +17 -0
- package/dist/components/ui/select/select-group.svelte.d.ts +4 -0
- package/dist/components/ui/select/select-item.svelte +38 -0
- package/dist/components/ui/select/select-item.svelte.d.ts +4 -0
- package/dist/components/ui/select/select-label.svelte +20 -0
- package/dist/components/ui/select/select-label.svelte.d.ts +6 -0
- package/dist/components/ui/select/select-portal.svelte +7 -0
- package/dist/components/ui/select/select-portal.svelte.d.ts +3 -0
- package/dist/components/ui/select/select-scroll-down-button.svelte +23 -0
- package/dist/components/ui/select/select-scroll-down-button.svelte.d.ts +4 -0
- package/dist/components/ui/select/select-scroll-up-button.svelte +23 -0
- package/dist/components/ui/select/select-scroll-up-button.svelte.d.ts +4 -0
- package/dist/components/ui/select/select-separator.svelte +18 -0
- package/dist/components/ui/select/select-separator.svelte.d.ts +4 -0
- package/dist/components/ui/select/select-trigger.svelte +29 -0
- package/dist/components/ui/select/select-trigger.svelte.d.ts +8 -0
- package/dist/components/ui/select/select.svelte +11 -0
- package/dist/components/ui/select/select.svelte.d.ts +3 -0
- package/dist/components/ui/separator/index.d.ts +2 -0
- package/dist/components/ui/separator/index.js +4 -0
- package/dist/components/ui/separator/separator.svelte +23 -0
- package/dist/components/ui/separator/separator.svelte.d.ts +4 -0
- package/dist/components/ui/skeleton/index.d.ts +2 -0
- package/dist/components/ui/skeleton/index.js +4 -0
- package/dist/components/ui/skeleton/skeleton.svelte +17 -0
- package/dist/components/ui/skeleton/skeleton.svelte.d.ts +5 -0
- package/dist/components/ui/sonner/index.d.ts +1 -0
- package/dist/components/ui/sonner/index.js +1 -0
- package/dist/components/ui/sonner/sonner.svelte +34 -0
- package/dist/components/ui/sonner/sonner.svelte.d.ts +4 -0
- package/dist/components/ui/sparkline/index.d.ts +3 -0
- package/dist/components/ui/sparkline/index.js +2 -0
- package/dist/components/ui/sparkline/sparkline.svelte +90 -0
- package/dist/components/ui/sparkline/sparkline.svelte.d.ts +16 -0
- package/dist/components/ui/stat-card/index.d.ts +2 -0
- package/dist/components/ui/stat-card/index.js +2 -0
- package/dist/components/ui/stat-card/stat-card.svelte +77 -0
- package/dist/components/ui/stat-card/stat-card.svelte.d.ts +34 -0
- package/dist/components/ui/stat-list/index.d.ts +3 -0
- package/dist/components/ui/stat-list/index.js +2 -0
- package/dist/components/ui/stat-list/stat-list.svelte +80 -0
- package/dist/components/ui/stat-list/stat-list.svelte.d.ts +23 -0
- package/dist/components/ui/status/index.d.ts +1 -0
- package/dist/components/ui/status/index.js +1 -0
- package/dist/components/ui/status-badge/index.d.ts +3 -0
- package/dist/components/ui/status-badge/index.js +2 -0
- package/dist/components/ui/status-badge/status-badge.svelte +53 -0
- package/dist/components/ui/status-badge/status-badge.svelte.d.ts +39 -0
- package/dist/components/ui/switch/index.d.ts +2 -0
- package/dist/components/ui/switch/index.js +4 -0
- package/dist/components/ui/switch/switch.svelte +39 -0
- package/dist/components/ui/switch/switch.svelte.d.ts +4 -0
- package/dist/components/ui/table/index.d.ts +10 -0
- package/dist/components/ui/table/index.js +12 -0
- package/dist/components/ui/table/table-body.svelte +20 -0
- package/dist/components/ui/table/table-body.svelte.d.ts +5 -0
- package/dist/components/ui/table/table-caption.svelte +20 -0
- package/dist/components/ui/table/table-caption.svelte.d.ts +5 -0
- package/dist/components/ui/table/table-cell.svelte +20 -0
- package/dist/components/ui/table/table-cell.svelte.d.ts +5 -0
- package/dist/components/ui/table/table-classes.d.ts +15 -0
- package/dist/components/ui/table/table-classes.js +15 -0
- package/dist/components/ui/table/table-footer.svelte +20 -0
- package/dist/components/ui/table/table-footer.svelte.d.ts +5 -0
- package/dist/components/ui/table/table-head.svelte +23 -0
- package/dist/components/ui/table/table-head.svelte.d.ts +5 -0
- package/dist/components/ui/table/table-header.svelte +20 -0
- package/dist/components/ui/table/table-header.svelte.d.ts +5 -0
- package/dist/components/ui/table/table-row.svelte +23 -0
- package/dist/components/ui/table/table-row.svelte.d.ts +5 -0
- package/dist/components/ui/table/table.svelte +37 -0
- package/dist/components/ui/table/table.svelte.d.ts +20 -0
- package/dist/components/ui/tabs/index.d.ts +5 -0
- package/dist/components/ui/tabs/index.js +7 -0
- package/dist/components/ui/tabs/tabs-content.svelte +13 -0
- package/dist/components/ui/tabs/tabs-content.svelte.d.ts +4 -0
- package/dist/components/ui/tabs/tabs-list.svelte +16 -0
- package/dist/components/ui/tabs/tabs-list.svelte.d.ts +4 -0
- package/dist/components/ui/tabs/tabs-trigger.svelte +16 -0
- package/dist/components/ui/tabs/tabs-trigger.svelte.d.ts +4 -0
- package/dist/components/ui/tabs/tabs.svelte +19 -0
- package/dist/components/ui/tabs/tabs.svelte.d.ts +4 -0
- package/dist/components/ui/textarea/index.d.ts +2 -0
- package/dist/components/ui/textarea/index.js +4 -0
- package/dist/components/ui/textarea/textarea.svelte +22 -0
- package/dist/components/ui/textarea/textarea.svelte.d.ts +5 -0
- package/dist/components/ui/tile-grid/index.d.ts +2 -0
- package/dist/components/ui/tile-grid/index.js +2 -0
- package/dist/components/ui/tile-grid/tile-grid.svelte +66 -0
- package/dist/components/ui/tile-grid/tile-grid.svelte.d.ts +43 -0
- package/dist/components/ui/tooltip/index.d.ts +6 -0
- package/dist/components/ui/tooltip/index.js +8 -0
- package/dist/components/ui/tooltip/tooltip-content.svelte +52 -0
- package/dist/components/ui/tooltip/tooltip-content.svelte.d.ts +11 -0
- package/dist/components/ui/tooltip/tooltip-portal.svelte +7 -0
- package/dist/components/ui/tooltip/tooltip-portal.svelte.d.ts +4 -0
- package/dist/components/ui/tooltip/tooltip-provider.svelte +7 -0
- package/dist/components/ui/tooltip/tooltip-provider.svelte.d.ts +4 -0
- package/dist/components/ui/tooltip/tooltip-trigger.svelte +7 -0
- package/dist/components/ui/tooltip/tooltip-trigger.svelte.d.ts +4 -0
- package/dist/components/ui/tooltip/tooltip.svelte +7 -0
- package/dist/components/ui/tooltip/tooltip.svelte.d.ts +4 -0
- package/dist/styles.css +961 -0
- package/dist/utils.d.ts +12 -0
- package/dist/utils.js +5 -0
- package/package.json +81 -0
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, type WithElementRef } from '../../../utils.js';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<tfoot
|
|
14
|
+
bind:this={ref}
|
|
15
|
+
data-slot="table-footer"
|
|
16
|
+
class={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
|
|
17
|
+
{...restProps}
|
|
18
|
+
>
|
|
19
|
+
{@render children?.()}
|
|
20
|
+
</tfoot>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type WithElementRef } from '../../../utils.js';
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
declare const TableFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLTableSectionElement>>, {}, "ref">;
|
|
4
|
+
type TableFooter = ReturnType<typeof TableFooter>;
|
|
5
|
+
export default TableFooter;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, type WithElementRef } from '../../../utils.js';
|
|
3
|
+
import type { HTMLThAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithElementRef<HTMLThAttributes> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<th
|
|
14
|
+
bind:this={ref}
|
|
15
|
+
data-slot="table-head"
|
|
16
|
+
class={cn(
|
|
17
|
+
'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0',
|
|
18
|
+
className
|
|
19
|
+
)}
|
|
20
|
+
{...restProps}
|
|
21
|
+
>
|
|
22
|
+
{@render children?.()}
|
|
23
|
+
</th>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type WithElementRef } from '../../../utils.js';
|
|
2
|
+
import type { HTMLThAttributes } from 'svelte/elements';
|
|
3
|
+
declare const TableHead: import("svelte").Component<WithElementRef<HTMLThAttributes>, {}, "ref">;
|
|
4
|
+
type TableHead = ReturnType<typeof TableHead>;
|
|
5
|
+
export default TableHead;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, type WithElementRef } from '../../../utils.js';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<thead
|
|
14
|
+
bind:this={ref}
|
|
15
|
+
data-slot="table-header"
|
|
16
|
+
class={cn('[&_tr]:border-b', className)}
|
|
17
|
+
{...restProps}
|
|
18
|
+
>
|
|
19
|
+
{@render children?.()}
|
|
20
|
+
</thead>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type WithElementRef } from '../../../utils.js';
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
declare const TableHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLTableSectionElement>>, {}, "ref">;
|
|
4
|
+
type TableHeader = ReturnType<typeof TableHeader>;
|
|
5
|
+
export default TableHeader;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, type WithElementRef } from '../../../utils.js';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<tr
|
|
14
|
+
bind:this={ref}
|
|
15
|
+
data-slot="table-row"
|
|
16
|
+
class={cn(
|
|
17
|
+
'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
|
|
18
|
+
className
|
|
19
|
+
)}
|
|
20
|
+
{...restProps}
|
|
21
|
+
>
|
|
22
|
+
{@render children?.()}
|
|
23
|
+
</tr>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type WithElementRef } from '../../../utils.js';
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
declare const TableRow: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLTableRowElement>>, {}, "ref">;
|
|
4
|
+
type TableRow = ReturnType<typeof TableRow>;
|
|
5
|
+
export default TableRow;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { HTMLTableAttributes } from 'svelte/elements';
|
|
3
|
+
import { cn, type WithElementRef } from '../../../utils.js';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
containerClass,
|
|
9
|
+
children,
|
|
10
|
+
...restProps
|
|
11
|
+
}: WithElementRef<HTMLTableAttributes> & {
|
|
12
|
+
/**
|
|
13
|
+
* Classes on the scroll container, not on the `<table>`.
|
|
14
|
+
*
|
|
15
|
+
* The two are different boxes and only one of them can be told to be
|
|
16
|
+
* shorter. A sticky header needs a bounded, scrolling ancestor — `class`
|
|
17
|
+
* lands on the table, which is the wrong element — so an app wanting one
|
|
18
|
+
* had to reach into this component's internals from the outside with
|
|
19
|
+
* `[&>[data-slot=table-container]]:max-h-…`, an arbitrary-variant selector
|
|
20
|
+
* on a structure this package is free to change. That is a private detail
|
|
21
|
+
* being used as public API; naming the seam makes it public and keeps the
|
|
22
|
+
* structure ours.
|
|
23
|
+
*/
|
|
24
|
+
containerClass?: string;
|
|
25
|
+
} = $props();
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
<div data-slot="table-container" class={cn('relative w-full overflow-x-auto', containerClass)}>
|
|
29
|
+
<table
|
|
30
|
+
bind:this={ref}
|
|
31
|
+
data-slot="table"
|
|
32
|
+
class={cn('w-full caption-bottom text-sm', className)}
|
|
33
|
+
{...restProps}
|
|
34
|
+
>
|
|
35
|
+
{@render children?.()}
|
|
36
|
+
</table>
|
|
37
|
+
</div>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { HTMLTableAttributes } from 'svelte/elements';
|
|
2
|
+
import { type WithElementRef } from '../../../utils.js';
|
|
3
|
+
type $$ComponentProps = WithElementRef<HTMLTableAttributes> & {
|
|
4
|
+
/**
|
|
5
|
+
* Classes on the scroll container, not on the `<table>`.
|
|
6
|
+
*
|
|
7
|
+
* The two are different boxes and only one of them can be told to be
|
|
8
|
+
* shorter. A sticky header needs a bounded, scrolling ancestor — `class`
|
|
9
|
+
* lands on the table, which is the wrong element — so an app wanting one
|
|
10
|
+
* had to reach into this component's internals from the outside with
|
|
11
|
+
* `[&>[data-slot=table-container]]:max-h-…`, an arbitrary-variant selector
|
|
12
|
+
* on a structure this package is free to change. That is a private detail
|
|
13
|
+
* being used as public API; naming the seam makes it public and keeps the
|
|
14
|
+
* structure ours.
|
|
15
|
+
*/
|
|
16
|
+
containerClass?: string;
|
|
17
|
+
};
|
|
18
|
+
declare const Table: import("svelte").Component<$$ComponentProps, {}, "ref">;
|
|
19
|
+
type Table = ReturnType<typeof Table>;
|
|
20
|
+
export default Table;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import Root from './tabs.svelte';
|
|
2
|
+
import List from './tabs-list.svelte';
|
|
3
|
+
import Trigger from './tabs-trigger.svelte';
|
|
4
|
+
import Content from './tabs-content.svelte';
|
|
5
|
+
export { Root, List, Trigger, Content, Root as Tabs, List as TabsList, Trigger as TabsTrigger, Content as TabsContent };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import Root from './tabs.svelte';
|
|
2
|
+
import List from './tabs-list.svelte';
|
|
3
|
+
import Trigger from './tabs-trigger.svelte';
|
|
4
|
+
import Content from './tabs-content.svelte';
|
|
5
|
+
export { Root, List, Trigger, Content,
|
|
6
|
+
//
|
|
7
|
+
Root as Tabs, List as TabsList, Trigger as TabsTrigger, Content as TabsContent };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Tabs as TabsPrimitive } from 'bits-ui';
|
|
3
|
+
import { cn } from '../../../utils.js';
|
|
4
|
+
|
|
5
|
+
let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ContentProps = $props();
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<TabsPrimitive.Content
|
|
9
|
+
bind:ref
|
|
10
|
+
data-slot="tabs-content"
|
|
11
|
+
class={cn('flex-1 outline-none', className)}
|
|
12
|
+
{...restProps}
|
|
13
|
+
/>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Tabs as TabsPrimitive } from 'bits-ui';
|
|
3
|
+
import { cn } from '../../../utils.js';
|
|
4
|
+
|
|
5
|
+
let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<TabsPrimitive.List
|
|
9
|
+
bind:ref
|
|
10
|
+
data-slot="tabs-list"
|
|
11
|
+
class={cn(
|
|
12
|
+
'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
|
|
13
|
+
className
|
|
14
|
+
)}
|
|
15
|
+
{...restProps}
|
|
16
|
+
/>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Tabs as TabsPrimitive } from 'bits-ui';
|
|
3
|
+
import { cn } from '../../../utils.js';
|
|
4
|
+
|
|
5
|
+
let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.TriggerProps = $props();
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<TabsPrimitive.Trigger
|
|
9
|
+
bind:ref
|
|
10
|
+
data-slot="tabs-trigger"
|
|
11
|
+
class={cn(
|
|
12
|
+
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
13
|
+
className
|
|
14
|
+
)}
|
|
15
|
+
{...restProps}
|
|
16
|
+
/>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Tabs as TabsPrimitive } from 'bits-ui';
|
|
3
|
+
import { cn } from '../../../utils.js';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
value = $bindable(''),
|
|
8
|
+
class: className,
|
|
9
|
+
...restProps
|
|
10
|
+
}: TabsPrimitive.RootProps = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<TabsPrimitive.Root
|
|
14
|
+
bind:ref
|
|
15
|
+
bind:value
|
|
16
|
+
data-slot="tabs"
|
|
17
|
+
class={cn('flex flex-col gap-2', className)}
|
|
18
|
+
{...restProps}
|
|
19
|
+
/>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, type WithElementRef, type WithoutChildren } from '../../../utils.js';
|
|
3
|
+
import type { HTMLTextareaAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
value = $bindable(),
|
|
8
|
+
class: className,
|
|
9
|
+
'data-slot': dataSlot = 'textarea',
|
|
10
|
+
...restProps
|
|
11
|
+
}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<textarea
|
|
15
|
+
bind:this={ref}
|
|
16
|
+
data-slot={dataSlot}
|
|
17
|
+
class={cn(
|
|
18
|
+
'border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
|
|
19
|
+
className
|
|
20
|
+
)}
|
|
21
|
+
bind:value
|
|
22
|
+
{...restProps}></textarea>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type WithElementRef } from '../../../utils.js';
|
|
2
|
+
import type { HTMLTextareaAttributes } from 'svelte/elements';
|
|
3
|
+
declare const Textarea: import("svelte").Component<Omit<WithElementRef<HTMLTextareaAttributes>, "children">, {}, "ref" | "value">;
|
|
4
|
+
type Textarea = ReturnType<typeof Textarea>;
|
|
5
|
+
export default Textarea;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
/**
|
|
3
|
+
* A tile grid that gains columns as its container grows.
|
|
4
|
+
*
|
|
5
|
+
* A fixed column count (`sm:grid-cols-2`) cannot use width — it can only
|
|
6
|
+
* stretch, so widening the container makes an index worse rather than better:
|
|
7
|
+
* two columns of very wide rows, each with its chevron marooned at the far
|
|
8
|
+
* edge.
|
|
9
|
+
*
|
|
10
|
+
* `auto-fill` + `minmax(min, 1fr)` is the media-library answer (Jellyfin,
|
|
11
|
+
* Plex): the browser fits as many whole tiles as the width allows and
|
|
12
|
+
* distributes the remainder, so one declaration covers a phone (one column)
|
|
13
|
+
* and a 4K panel (seven or eight) with nothing in between to maintain and no
|
|
14
|
+
* breakpoint list to keep in sync across pages.
|
|
15
|
+
*
|
|
16
|
+
* `min` is the narrowest a tile may get before a column is dropped, and it is
|
|
17
|
+
* the only sizing knob: a denser index passes a smaller one. Tiles stay the
|
|
18
|
+
* caller's business — this owns the track sizing and nothing else, which is
|
|
19
|
+
* what lets one grid serve topics, collections, documents and modules.
|
|
20
|
+
*
|
|
21
|
+
* `min`/`gap` are raw CSS lengths rather than named tokens on purpose: track
|
|
22
|
+
* density is a per-index layout decision that varies by call site, not a
|
|
23
|
+
* single themeable value the palette should carry.
|
|
24
|
+
*/
|
|
25
|
+
import type { Snippet } from 'svelte';
|
|
26
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
27
|
+
import { cn, type WithElementRef } from '../../../utils.js';
|
|
28
|
+
|
|
29
|
+
let {
|
|
30
|
+
min = '16rem',
|
|
31
|
+
gap = '0.75rem',
|
|
32
|
+
tag = 'div',
|
|
33
|
+
class: className,
|
|
34
|
+
ref = $bindable(null),
|
|
35
|
+
children,
|
|
36
|
+
...restProps
|
|
37
|
+
}: WithElementRef<HTMLAttributes<HTMLElement>> & {
|
|
38
|
+
/** Narrowest a tile may be before a column is dropped. A raw CSS length. */
|
|
39
|
+
min?: string;
|
|
40
|
+
/** Gap between tiles. A raw CSS length. */
|
|
41
|
+
gap?: string;
|
|
42
|
+
/**
|
|
43
|
+
* The element to render. Pass `ul` where the tiles are a list of links
|
|
44
|
+
* (with `li` children), so making an index responsive does not quietly
|
|
45
|
+
* cost it its list semantics — the count a screen reader announces on
|
|
46
|
+
* entry.
|
|
47
|
+
*/
|
|
48
|
+
tag?: 'div' | 'ul';
|
|
49
|
+
children: Snippet;
|
|
50
|
+
} = $props();
|
|
51
|
+
</script>
|
|
52
|
+
|
|
53
|
+
<!-- `min()` guards the narrow end: a bare `minmax(16rem, 1fr)` track cannot go
|
|
54
|
+
below its minimum, so at 360px the row would overflow the viewport rather
|
|
55
|
+
than fall to one column. This is the property that silently regresses if the
|
|
56
|
+
wrapper is dropped, so the test asserts it explicitly. -->
|
|
57
|
+
<svelte:element
|
|
58
|
+
this={tag}
|
|
59
|
+
bind:this={ref}
|
|
60
|
+
data-slot="tile-grid"
|
|
61
|
+
{...restProps}
|
|
62
|
+
class={cn('grid', className)}
|
|
63
|
+
style="grid-template-columns: repeat(auto-fill, minmax(min({min}, 100%), 1fr)); gap: {gap};"
|
|
64
|
+
>
|
|
65
|
+
{@render children()}
|
|
66
|
+
</svelte:element>
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A tile grid that gains columns as its container grows.
|
|
3
|
+
*
|
|
4
|
+
* A fixed column count (`sm:grid-cols-2`) cannot use width — it can only
|
|
5
|
+
* stretch, so widening the container makes an index worse rather than better:
|
|
6
|
+
* two columns of very wide rows, each with its chevron marooned at the far
|
|
7
|
+
* edge.
|
|
8
|
+
*
|
|
9
|
+
* `auto-fill` + `minmax(min, 1fr)` is the media-library answer (Jellyfin,
|
|
10
|
+
* Plex): the browser fits as many whole tiles as the width allows and
|
|
11
|
+
* distributes the remainder, so one declaration covers a phone (one column)
|
|
12
|
+
* and a 4K panel (seven or eight) with nothing in between to maintain and no
|
|
13
|
+
* breakpoint list to keep in sync across pages.
|
|
14
|
+
*
|
|
15
|
+
* `min` is the narrowest a tile may get before a column is dropped, and it is
|
|
16
|
+
* the only sizing knob: a denser index passes a smaller one. Tiles stay the
|
|
17
|
+
* caller's business — this owns the track sizing and nothing else, which is
|
|
18
|
+
* what lets one grid serve topics, collections, documents and modules.
|
|
19
|
+
*
|
|
20
|
+
* `min`/`gap` are raw CSS lengths rather than named tokens on purpose: track
|
|
21
|
+
* density is a per-index layout decision that varies by call site, not a
|
|
22
|
+
* single themeable value the palette should carry.
|
|
23
|
+
*/
|
|
24
|
+
import type { Snippet } from 'svelte';
|
|
25
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
26
|
+
import { type WithElementRef } from '../../../utils.js';
|
|
27
|
+
type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
|
|
28
|
+
/** Narrowest a tile may be before a column is dropped. A raw CSS length. */
|
|
29
|
+
min?: string;
|
|
30
|
+
/** Gap between tiles. A raw CSS length. */
|
|
31
|
+
gap?: string;
|
|
32
|
+
/**
|
|
33
|
+
* The element to render. Pass `ul` where the tiles are a list of links
|
|
34
|
+
* (with `li` children), so making an index responsive does not quietly
|
|
35
|
+
* cost it its list semantics — the count a screen reader announces on
|
|
36
|
+
* entry.
|
|
37
|
+
*/
|
|
38
|
+
tag?: 'div' | 'ul';
|
|
39
|
+
children: Snippet;
|
|
40
|
+
};
|
|
41
|
+
declare const TileGrid: import("svelte").Component<$$ComponentProps, {}, "ref">;
|
|
42
|
+
type TileGrid = ReturnType<typeof TileGrid>;
|
|
43
|
+
export default TileGrid;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import Root from './tooltip.svelte';
|
|
2
|
+
import Trigger from './tooltip-trigger.svelte';
|
|
3
|
+
import Content from './tooltip-content.svelte';
|
|
4
|
+
import Provider from './tooltip-provider.svelte';
|
|
5
|
+
import Portal from './tooltip-portal.svelte';
|
|
6
|
+
export { Root, Trigger, Content, Provider, Portal, Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, Portal as TooltipPortal };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import Root from './tooltip.svelte';
|
|
2
|
+
import Trigger from './tooltip-trigger.svelte';
|
|
3
|
+
import Content from './tooltip-content.svelte';
|
|
4
|
+
import Provider from './tooltip-provider.svelte';
|
|
5
|
+
import Portal from './tooltip-portal.svelte';
|
|
6
|
+
export { Root, Trigger, Content, Provider, Portal,
|
|
7
|
+
//
|
|
8
|
+
Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, Portal as TooltipPortal };
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Tooltip as TooltipPrimitive } from 'bits-ui';
|
|
3
|
+
import { cn } from '../../../utils.js';
|
|
4
|
+
import TooltipPortal from './tooltip-portal.svelte';
|
|
5
|
+
import type { ComponentProps } from 'svelte';
|
|
6
|
+
import type { WithoutChildrenOrChild } from '../../../utils.js';
|
|
7
|
+
|
|
8
|
+
let {
|
|
9
|
+
ref = $bindable(null),
|
|
10
|
+
class: className,
|
|
11
|
+
sideOffset = 0,
|
|
12
|
+
side = 'top',
|
|
13
|
+
children,
|
|
14
|
+
arrowClasses,
|
|
15
|
+
portalProps,
|
|
16
|
+
...restProps
|
|
17
|
+
}: TooltipPrimitive.ContentProps & {
|
|
18
|
+
arrowClasses?: string;
|
|
19
|
+
portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
|
|
20
|
+
} = $props();
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<TooltipPortal {...portalProps}>
|
|
24
|
+
<TooltipPrimitive.Content
|
|
25
|
+
bind:ref
|
|
26
|
+
data-slot="tooltip-content"
|
|
27
|
+
{sideOffset}
|
|
28
|
+
{side}
|
|
29
|
+
class={cn(
|
|
30
|
+
'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-foreground text-background z-50 inline-flex w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin) items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm',
|
|
31
|
+
className
|
|
32
|
+
)}
|
|
33
|
+
{...restProps}
|
|
34
|
+
>
|
|
35
|
+
{@render children?.()}
|
|
36
|
+
<TooltipPrimitive.Arrow>
|
|
37
|
+
{#snippet child({ props })}
|
|
38
|
+
<div
|
|
39
|
+
class={cn(
|
|
40
|
+
'bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]',
|
|
41
|
+
'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%+2px)]',
|
|
42
|
+
'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%+1px)]',
|
|
43
|
+
'data-[side=right]:translate-x-[calc(50%+2px)] data-[side=right]:translate-y-1/2',
|
|
44
|
+
'data-[side=left]:-translate-y-[calc(50%-3px)]',
|
|
45
|
+
arrowClasses
|
|
46
|
+
)}
|
|
47
|
+
{...props}
|
|
48
|
+
></div>
|
|
49
|
+
{/snippet}
|
|
50
|
+
</TooltipPrimitive.Arrow>
|
|
51
|
+
</TooltipPrimitive.Content>
|
|
52
|
+
</TooltipPortal>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Tooltip as TooltipPrimitive } from 'bits-ui';
|
|
2
|
+
import TooltipPortal from './tooltip-portal.svelte';
|
|
3
|
+
import type { ComponentProps } from 'svelte';
|
|
4
|
+
import type { WithoutChildrenOrChild } from '../../../utils.js';
|
|
5
|
+
type $$ComponentProps = TooltipPrimitive.ContentProps & {
|
|
6
|
+
arrowClasses?: string;
|
|
7
|
+
portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
|
|
8
|
+
};
|
|
9
|
+
declare const TooltipContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
|
|
10
|
+
type TooltipContent = ReturnType<typeof TooltipContent>;
|
|
11
|
+
export default TooltipContent;
|