@devalok/shilp-sutra 0.36.0 → 0.37.0-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/MIGRATION.md +346 -0
- package/README.md +26 -29
- package/dist/_chunks/badge-group.js +42 -42
- package/dist/_chunks/badge-group.js.map +1 -1
- package/dist/_chunks/chat.js +324 -327
- package/dist/_chunks/chat.js.map +1 -1
- package/dist/_chunks/date-picker.js +245 -245
- package/dist/_chunks/date-picker.js.map +1 -1
- package/dist/_chunks/document-preview.js +33 -33
- package/dist/_chunks/document-preview.js.map +1 -1
- package/dist/_chunks/file-preview.js +264 -264
- package/dist/_chunks/file-preview.js.map +1 -1
- package/dist/_chunks/image-preview.js +45 -45
- package/dist/_chunks/image-preview.js.map +1 -1
- package/dist/_chunks/mention-suggestion.js +85 -85
- package/dist/_chunks/mention-suggestion.js.map +1 -1
- package/dist/_chunks/motion-provider.js +13 -13
- package/dist/_chunks/motion-provider.js.map +1 -1
- package/dist/_chunks/popover.js +36 -36
- package/dist/_chunks/popover.js.map +1 -1
- package/dist/_chunks/primitives.js +489 -489
- package/dist/_chunks/primitives.js.map +1 -1
- package/dist/_chunks/rich-chat-input.js +1066 -1066
- package/dist/_chunks/rich-chat-input.js.map +1 -1
- package/dist/_chunks/shared.js +43 -43
- package/dist/_chunks/shared.js.map +1 -1
- package/dist/_chunks/text.js +432 -0
- package/dist/_chunks/text.js.map +1 -0
- package/dist/_chunks/tiptap.js +6053 -6187
- package/dist/_chunks/tiptap.js.map +1 -1
- package/dist/_chunks/tree-view.js +97 -97
- package/dist/_chunks/tree-view.js.map +1 -1
- package/dist/_chunks/use-calendar.js.map +1 -1
- package/dist/ai/ai-command-provider.d.ts.map +1 -1
- package/dist/ai/ai-command-provider.js.map +1 -1
- package/dist/ai/block-renderer.d.ts.map +1 -1
- package/dist/ai/block-renderer.js +43 -43
- package/dist/ai/block-renderer.js.map +1 -1
- package/dist/ai/blocks/block-table.d.ts.map +1 -1
- package/dist/ai/blocks/confirm.d.ts.map +1 -1
- package/dist/ai/blocks/divider.d.ts.map +1 -1
- package/dist/ai/blocks/error.d.ts.map +1 -1
- package/dist/ai/blocks/index.d.ts +5 -5
- package/dist/ai/blocks/index.d.ts.map +1 -1
- package/dist/ai/blocks/index.js +2 -2
- package/dist/ai/blocks/info.d.ts.map +1 -1
- package/dist/ai/blocks/loading.d.ts.map +1 -1
- package/dist/ai/blocks/stat-row.d.ts.map +1 -1
- package/dist/ai/blocks/success.d.ts.map +1 -1
- package/dist/ai/blocks/text.d.ts.map +1 -1
- package/dist/ai/command-bar.d.ts +0 -11
- package/dist/ai/command-bar.d.ts.map +1 -1
- package/dist/ai/command-bar.js +128 -128
- package/dist/ai/command-bar.js.map +1 -1
- package/dist/ai/conversation.d.ts +1 -1
- package/dist/ai/conversation.d.ts.map +1 -1
- package/dist/ai/conversation.js +76 -76
- package/dist/ai/conversation.js.map +1 -1
- package/dist/ai/devadoot-icon.d.ts +0 -12
- package/dist/ai/devadoot-icon.d.ts.map +1 -1
- package/dist/ai/index.d.ts +11 -11
- package/dist/ai/index.d.ts.map +1 -1
- package/dist/ai/index.js +44 -44
- package/dist/ai/index.js.map +1 -1
- package/dist/composed/activity-feed.d.ts.map +1 -1
- package/dist/composed/activity-feed.js +93 -93
- package/dist/composed/activity-feed.js.map +1 -1
- package/dist/composed/avatar-group.d.ts.map +1 -1
- package/dist/composed/avatar-group.js +50 -50
- package/dist/composed/avatar-group.js.map +1 -1
- package/dist/composed/bulk-action-bar.d.ts.map +1 -1
- package/dist/composed/bulk-action-bar.js +40 -40
- package/dist/composed/bulk-action-bar.js.map +1 -1
- package/dist/composed/command-palette.d.ts +0 -6
- package/dist/composed/command-palette.d.ts.map +1 -1
- package/dist/composed/command-palette.js +131 -131
- package/dist/composed/command-palette.js.map +1 -1
- package/dist/composed/confirm-dialog.d.ts.map +1 -1
- package/dist/composed/confirm-dialog.js.map +1 -1
- package/dist/composed/content-card.d.ts.map +1 -1
- package/dist/composed/content-card.js.map +1 -1
- package/dist/composed/date-picker/calendar-grid.d.ts.map +1 -1
- package/dist/composed/date-picker/date-picker.d.ts.map +1 -1
- package/dist/composed/date-picker/date-range-picker.d.ts.map +1 -1
- package/dist/composed/date-picker/date-time-picker.d.ts.map +1 -1
- package/dist/composed/date-picker/index.d.ts +11 -11
- package/dist/composed/date-picker/index.d.ts.map +1 -1
- package/dist/composed/date-picker/index.js +1 -1
- package/dist/composed/date-picker/month-picker.d.ts.map +1 -1
- package/dist/composed/date-picker/presets.d.ts.map +1 -1
- package/dist/composed/date-picker/time-picker.d.ts.map +1 -1
- package/dist/composed/date-picker/year-picker.d.ts.map +1 -1
- package/dist/composed/deadline-indicator.d.ts.map +1 -1
- package/dist/composed/deadline-indicator.js +25 -25
- package/dist/composed/deadline-indicator.js.map +1 -1
- package/dist/composed/emoji-picker.d.ts.map +1 -1
- package/dist/composed/emoji-picker.js +37 -37
- package/dist/composed/emoji-picker.js.map +1 -1
- package/dist/composed/empty-state.d.ts.map +1 -1
- package/dist/composed/empty-state.js +21 -21
- package/dist/composed/empty-state.js.map +1 -1
- package/dist/composed/error-boundary.d.ts +1 -1
- package/dist/composed/error-boundary.d.ts.map +1 -1
- package/dist/composed/error-boundary.js.map +1 -1
- package/dist/composed/extensions/emoji-node.d.ts.map +1 -1
- package/dist/composed/extensions/emoji-suggestion.d.ts.map +1 -1
- package/dist/composed/extensions/file-attachment.d.ts.map +1 -1
- package/dist/composed/extensions/mention-suggestion.d.ts +1 -1
- package/dist/composed/extensions/mention-suggestion.d.ts.map +1 -1
- package/dist/composed/extensions/slash-command.d.ts +1 -1
- package/dist/composed/extensions/slash-command.d.ts.map +1 -1
- package/dist/composed/file-preview/audio-preview.d.ts.map +1 -1
- package/dist/composed/file-preview/document-preview.d.ts.map +1 -1
- package/dist/composed/file-preview/embed-preview.d.ts.map +1 -1
- package/dist/composed/file-preview/image-preview.d.ts.map +1 -1
- package/dist/composed/file-preview/shared.d.ts.map +1 -1
- package/dist/composed/file-preview/video-preview.d.ts.map +1 -1
- package/dist/composed/file-preview.d.ts.map +1 -1
- package/dist/composed/filter-bar.d.ts +1 -1
- package/dist/composed/filter-bar.d.ts.map +1 -1
- package/dist/composed/filter-bar.js +54 -54
- package/dist/composed/filter-bar.js.map +1 -1
- package/dist/composed/form-section.d.ts.map +1 -1
- package/dist/composed/form-section.js +26 -26
- package/dist/composed/form-section.js.map +1 -1
- package/dist/composed/global-loading.d.ts.map +1 -1
- package/dist/composed/global-loading.js.map +1 -1
- package/dist/composed/index.d.ts +55 -55
- package/dist/composed/index.d.ts.map +1 -1
- package/dist/composed/index.js +17 -17
- package/dist/composed/inline-edit.d.ts.map +1 -1
- package/dist/composed/inline-edit.js.map +1 -1
- package/dist/composed/loading-skeleton.d.ts +1 -1
- package/dist/composed/loading-skeleton.d.ts.map +1 -1
- package/dist/composed/loading-skeleton.js.map +1 -1
- package/dist/composed/markdown-viewer.d.ts.map +1 -1
- package/dist/composed/markdown-viewer.js +3 -3
- package/dist/composed/markdown-viewer.js.map +1 -1
- package/dist/composed/master-detail.d.ts.map +1 -1
- package/dist/composed/master-detail.js +42 -42
- package/dist/composed/master-detail.js.map +1 -1
- package/dist/composed/member-picker.d.ts.map +1 -1
- package/dist/composed/member-picker.js.map +1 -1
- package/dist/composed/multi-select-popover.d.ts.map +1 -1
- package/dist/composed/multi-select-popover.js +55 -55
- package/dist/composed/multi-select-popover.js.map +1 -1
- package/dist/composed/page-header.d.ts.map +1 -1
- package/dist/composed/page-header.js.map +1 -1
- package/dist/composed/page-skeletons.d.ts.map +1 -1
- package/dist/composed/page-skeletons.js.map +1 -1
- package/dist/composed/priority-indicator.d.ts.map +1 -1
- package/dist/composed/priority-indicator.js +34 -34
- package/dist/composed/priority-indicator.js.map +1 -1
- package/dist/composed/responsive-overlay.d.ts.map +1 -1
- package/dist/composed/responsive-overlay.js.map +1 -1
- package/dist/composed/rich-chat-input/attachment-strip.d.ts.map +1 -1
- package/dist/composed/rich-chat-input/audio-player.d.ts.map +1 -1
- package/dist/composed/rich-chat-input/audio-waveform.d.ts.map +1 -1
- package/dist/composed/rich-chat-input/chat-toolbar.d.ts.map +1 -1
- package/dist/composed/rich-chat-input/recording-overlay.d.ts.map +1 -1
- package/dist/composed/rich-chat-input/reply-banner.d.ts.map +1 -1
- package/dist/composed/rich-chat-input/schedule-send.d.ts.map +1 -1
- package/dist/composed/rich-chat-input.d.ts +6 -6
- package/dist/composed/rich-chat-input.d.ts.map +1 -1
- package/dist/composed/rich-chat-input.js +1 -1
- package/dist/composed/rich-text-editor.d.ts.map +1 -1
- package/dist/composed/rich-text-editor.js +25 -25
- package/dist/composed/rich-text-editor.js.map +1 -1
- package/dist/composed/schedule-view.d.ts.map +1 -1
- package/dist/composed/schedule-view.js +53 -53
- package/dist/composed/schedule-view.js.map +1 -1
- package/dist/composed/simple-tooltip.d.ts.map +1 -1
- package/dist/composed/simple-tooltip.js.map +1 -1
- package/dist/composed/status-badge.d.ts +1 -1
- package/dist/composed/status-badge.d.ts.map +1 -1
- package/dist/composed/status-badge.js +30 -30
- package/dist/composed/status-badge.js.map +1 -1
- package/dist/hooks/index.d.ts +3 -3
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -1
- package/dist/hooks/use-color-mode.js.map +1 -1
- package/dist/hooks/use-toast.d.ts +1 -1
- package/dist/hooks/use-toast.d.ts.map +1 -1
- package/dist/motion/index.d.ts +2 -2
- package/dist/motion/index.d.ts.map +1 -1
- package/dist/motion/index.js.map +1 -1
- package/dist/motion/motion-provider.d.ts +1 -1
- package/dist/motion/motion-provider.d.ts.map +1 -1
- package/dist/motion/primitives-index.d.ts +1 -1
- package/dist/motion/primitives-index.d.ts.map +1 -1
- package/dist/motion/primitives-index.js +40 -40
- package/dist/motion/primitives-index.js.map +1 -1
- package/dist/motion/primitives.d.ts +1 -1
- package/dist/motion/primitives.d.ts.map +1 -1
- package/dist/shell/app-command-palette.d.ts +0 -8
- package/dist/shell/app-command-palette.d.ts.map +1 -1
- package/dist/shell/app-command-palette.js.map +1 -1
- package/dist/shell/bottom-navbar.d.ts +0 -6
- package/dist/shell/bottom-navbar.d.ts.map +1 -1
- package/dist/shell/bottom-navbar.js +62 -62
- package/dist/shell/bottom-navbar.js.map +1 -1
- package/dist/shell/index.d.ts +8 -8
- package/dist/shell/index.d.ts.map +1 -1
- package/dist/shell/index.js +5 -5
- package/dist/shell/link-context.d.ts +1 -1
- package/dist/shell/link-context.d.ts.map +1 -1
- package/dist/shell/notification-center.d.ts +0 -6
- package/dist/shell/notification-center.d.ts.map +1 -1
- package/dist/shell/notification-center.js +54 -54
- package/dist/shell/notification-center.js.map +1 -1
- package/dist/shell/notification-preferences.d.ts +0 -6
- package/dist/shell/notification-preferences.d.ts.map +1 -1
- package/dist/shell/notification-preferences.js +22 -22
- package/dist/shell/notification-preferences.js.map +1 -1
- package/dist/shell/sidebar.d.ts.map +1 -1
- package/dist/shell/sidebar.js.map +1 -1
- package/dist/shell/top-bar.d.ts +0 -6
- package/dist/shell/top-bar.d.ts.map +1 -1
- package/dist/shell/top-bar.js.map +1 -1
- package/dist/tailwind/index.cjs +15 -499
- package/dist/tailwind/preset.d.ts +21 -0
- package/dist/tailwind/preset.d.ts.map +1 -1
- package/dist/tailwind/preset.js +14 -489
- package/dist/tailwind/preset.js.map +1 -1
- package/dist/tokens/animations.css +17 -0
- package/dist/tokens/base.css +26 -0
- package/dist/tokens/index.css +22 -0
- package/dist/tokens/semantic.css +436 -464
- package/dist/tokens/shilp-sutra.css +41 -0
- package/dist/tokens/typography-semantic.css +48 -41
- package/dist/tokens/utilities.css +276 -0
- package/dist/tokens/variants.css +14 -0
- package/dist/ui/accordion.d.ts +2 -2
- package/dist/ui/accordion.d.ts.map +1 -1
- package/dist/ui/accordion.js +23 -23
- package/dist/ui/accordion.js.map +1 -1
- package/dist/ui/alert-dialog.d.ts +2 -2
- package/dist/ui/alert-dialog.d.ts.map +1 -1
- package/dist/ui/alert-dialog.js +37 -37
- package/dist/ui/alert-dialog.js.map +1 -1
- package/dist/ui/alert.d.ts.map +1 -1
- package/dist/ui/alert.js +36 -36
- package/dist/ui/alert.js.map +1 -1
- package/dist/ui/aspect-ratio.d.ts +1 -1
- package/dist/ui/aspect-ratio.d.ts.map +1 -1
- package/dist/ui/aspect-ratio.js.map +1 -1
- package/dist/ui/autocomplete.d.ts +1 -1
- package/dist/ui/autocomplete.d.ts.map +1 -1
- package/dist/ui/autocomplete.js +27 -27
- package/dist/ui/autocomplete.js.map +1 -1
- package/dist/ui/avatar.d.ts +2 -2
- package/dist/ui/avatar.d.ts.map +1 -1
- package/dist/ui/avatar.js +41 -41
- package/dist/ui/avatar.js.map +1 -1
- package/dist/ui/badge-group.d.ts.map +1 -1
- package/dist/ui/badge-indicator.d.ts.map +1 -1
- package/dist/ui/badge-indicator.js +10 -10
- package/dist/ui/badge-indicator.js.map +1 -1
- package/dist/ui/badge.d.ts +2 -2
- package/dist/ui/badge.d.ts.map +1 -1
- package/dist/ui/banner.d.ts.map +1 -1
- package/dist/ui/banner.js +28 -28
- package/dist/ui/banner.js.map +1 -1
- package/dist/ui/breadcrumb.d.ts +1 -1
- package/dist/ui/breadcrumb.d.ts.map +1 -1
- package/dist/ui/breadcrumb.js.map +1 -1
- package/dist/ui/button-group.d.ts.map +1 -1
- package/dist/ui/button-group.js.map +1 -1
- package/dist/ui/button-processing.d.ts.map +1 -1
- package/dist/ui/button-processing.js +15 -15
- package/dist/ui/button-processing.js.map +1 -1
- package/dist/ui/button.d.ts.map +1 -1
- package/dist/ui/button.js +84 -84
- package/dist/ui/button.js.map +1 -1
- package/dist/ui/card.d.ts +1 -1
- package/dist/ui/card.d.ts.map +1 -1
- package/dist/ui/card.js +28 -28
- package/dist/ui/card.js.map +1 -1
- package/dist/ui/charts/_internal/axes.d.ts +1 -1
- package/dist/ui/charts/_internal/axes.d.ts.map +1 -1
- package/dist/ui/charts/_internal/grid-lines.d.ts.map +1 -1
- package/dist/ui/charts/_internal/legend.d.ts.map +1 -1
- package/dist/ui/charts/_internal/tooltip.d.ts +1 -1
- package/dist/ui/charts/_internal/tooltip.d.ts.map +1 -1
- package/dist/ui/charts/area-chart.d.ts.map +1 -1
- package/dist/ui/charts/bar-chart.d.ts +1 -1
- package/dist/ui/charts/bar-chart.d.ts.map +1 -1
- package/dist/ui/charts/chart-container.d.ts.map +1 -1
- package/dist/ui/charts/gauge-chart.d.ts.map +1 -1
- package/dist/ui/charts/index.d.ts +5 -5
- package/dist/ui/charts/index.d.ts.map +1 -1
- package/dist/ui/charts/index.js +618 -618
- package/dist/ui/charts/index.js.map +1 -1
- package/dist/ui/charts/line-chart.d.ts.map +1 -1
- package/dist/ui/charts/pie-chart.d.ts.map +1 -1
- package/dist/ui/charts/radar-chart.d.ts.map +1 -1
- package/dist/ui/charts/sparkline.d.ts.map +1 -1
- package/dist/ui/chat/date-separator.d.ts.map +1 -1
- package/dist/ui/chat/index.d.ts +4 -4
- package/dist/ui/chat/index.d.ts.map +1 -1
- package/dist/ui/chat/index.js +1 -1
- package/dist/ui/chat/message-input.d.ts.map +1 -1
- package/dist/ui/chat/message-list.d.ts.map +1 -1
- package/dist/ui/chat/message.d.ts +1 -1
- package/dist/ui/chat/message.d.ts.map +1 -1
- package/dist/ui/chat/system-message.d.ts.map +1 -1
- package/dist/ui/chat/typing-indicator.d.ts.map +1 -1
- package/dist/ui/chat/unread-separator.d.ts.map +1 -1
- package/dist/ui/checkbox.d.ts.map +1 -1
- package/dist/ui/checkbox.js +18 -18
- package/dist/ui/checkbox.js.map +1 -1
- package/dist/ui/code.d.ts.map +1 -1
- package/dist/ui/code.js.map +1 -1
- package/dist/ui/collapsible.d.ts +2 -2
- package/dist/ui/collapsible.d.ts.map +1 -1
- package/dist/ui/collapsible.js +10 -10
- package/dist/ui/collapsible.js.map +1 -1
- package/dist/ui/color-input.d.ts.map +1 -1
- package/dist/ui/color-input.js +85 -85
- package/dist/ui/color-input.js.map +1 -1
- package/dist/ui/color-swatch.d.ts.map +1 -1
- package/dist/ui/color-swatch.js.map +1 -1
- package/dist/ui/combobox.d.ts.map +1 -1
- package/dist/ui/combobox.js +58 -58
- package/dist/ui/combobox.js.map +1 -1
- package/dist/ui/container.d.ts.map +1 -1
- package/dist/ui/container.js.map +1 -1
- package/dist/ui/context-menu.d.ts +2 -2
- package/dist/ui/context-menu.d.ts.map +1 -1
- package/dist/ui/context-menu.js +47 -47
- package/dist/ui/context-menu.js.map +1 -1
- package/dist/ui/data-table-body.d.ts +1 -1
- package/dist/ui/data-table-body.d.ts.map +1 -1
- package/dist/ui/data-table-body.js +43 -43
- package/dist/ui/data-table-body.js.map +1 -1
- package/dist/ui/data-table-bulk-actions.js.map +1 -1
- package/dist/ui/data-table-card.d.ts.map +1 -1
- package/dist/ui/data-table-card.js +7 -7
- package/dist/ui/data-table-card.js.map +1 -1
- package/dist/ui/data-table-context.d.ts +1 -1
- package/dist/ui/data-table-context.d.ts.map +1 -1
- package/dist/ui/data-table-context.js.map +1 -1
- package/dist/ui/data-table-header.js +38 -38
- package/dist/ui/data-table-header.js.map +1 -1
- package/dist/ui/data-table-pagination.js.map +1 -1
- package/dist/ui/data-table-toolbar.d.ts.map +1 -1
- package/dist/ui/data-table-toolbar.js.map +1 -1
- package/dist/ui/data-table.d.ts +2 -2
- package/dist/ui/data-table.d.ts.map +1 -1
- package/dist/ui/data-table.js +5 -5
- package/dist/ui/data-table.js.map +1 -1
- package/dist/ui/devalok-grain.js +8 -8
- package/dist/ui/devalok-grain.js.map +1 -1
- package/dist/ui/dialog.d.ts +2 -2
- package/dist/ui/dialog.d.ts.map +1 -1
- package/dist/ui/dialog.js +41 -41
- package/dist/ui/dialog.js.map +1 -1
- package/dist/ui/dropdown-menu.d.ts +2 -2
- package/dist/ui/dropdown-menu.d.ts.map +1 -1
- package/dist/ui/dropdown-menu.js +46 -46
- package/dist/ui/dropdown-menu.js.map +1 -1
- package/dist/ui/file-upload.d.ts.map +1 -1
- package/dist/ui/file-upload.js +54 -54
- package/dist/ui/file-upload.js.map +1 -1
- package/dist/ui/form.d.ts.map +1 -1
- package/dist/ui/form.js +17 -17
- package/dist/ui/form.js.map +1 -1
- package/dist/ui/hover-card.d.ts +2 -2
- package/dist/ui/hover-card.d.ts.map +1 -1
- package/dist/ui/hover-card.js +19 -19
- package/dist/ui/hover-card.js.map +1 -1
- package/dist/ui/icon-button.d.ts.map +1 -1
- package/dist/ui/icon-button.js.map +1 -1
- package/dist/ui/icon-group.d.ts.map +1 -1
- package/dist/ui/icon-group.js +4 -4
- package/dist/ui/icon-group.js.map +1 -1
- package/dist/ui/icon.d.ts.map +1 -1
- package/dist/ui/icon.js +32 -32
- package/dist/ui/icon.js.map +1 -1
- package/dist/ui/index.d.ts +57 -57
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js +27 -27
- package/dist/ui/index.js.map +1 -1
- package/dist/ui/input-otp.d.ts +1 -1
- package/dist/ui/input-otp.d.ts.map +1 -1
- package/dist/ui/input-otp.js.map +1 -1
- package/dist/ui/input.d.ts.map +1 -1
- package/dist/ui/input.js +14 -14
- package/dist/ui/input.js.map +1 -1
- package/dist/ui/label.d.ts +1 -1
- package/dist/ui/label.d.ts.map +1 -1
- package/dist/ui/label.js.map +1 -1
- package/dist/ui/lib/bottom-sheet.d.ts.map +1 -1
- package/dist/ui/lib/index.d.ts +4 -4
- package/dist/ui/lib/index.d.ts.map +1 -1
- package/dist/ui/lib/slot.d.ts +1 -1
- package/dist/ui/lib/slot.d.ts.map +1 -1
- package/dist/ui/lib/utils.d.ts.map +1 -1
- package/dist/ui/lib/utils.js.map +1 -1
- package/dist/ui/link.d.ts.map +1 -1
- package/dist/ui/link.js.map +1 -1
- package/dist/ui/menubar.d.ts +2 -2
- package/dist/ui/menubar.d.ts.map +1 -1
- package/dist/ui/menubar.js +64 -64
- package/dist/ui/menubar.js.map +1 -1
- package/dist/ui/navigation-menu.d.ts +2 -2
- package/dist/ui/navigation-menu.d.ts.map +1 -1
- package/dist/ui/navigation-menu.js +72 -72
- package/dist/ui/navigation-menu.js.map +1 -1
- package/dist/ui/number-input.d.ts.map +1 -1
- package/dist/ui/number-input.js.map +1 -1
- package/dist/ui/pagination.d.ts +1 -1
- package/dist/ui/pagination.d.ts.map +1 -1
- package/dist/ui/pagination.js.map +1 -1
- package/dist/ui/popover.d.ts +2 -2
- package/dist/ui/popover.d.ts.map +1 -1
- package/dist/ui/progress-ring.d.ts +1 -1
- package/dist/ui/progress-ring.d.ts.map +1 -1
- package/dist/ui/progress-ring.js +33 -33
- package/dist/ui/progress-ring.js.map +1 -1
- package/dist/ui/progress.d.ts +2 -2
- package/dist/ui/progress.d.ts.map +1 -1
- package/dist/ui/progress.js +23 -23
- package/dist/ui/progress.js.map +1 -1
- package/dist/ui/radio.d.ts.map +1 -1
- package/dist/ui/radio.js +19 -19
- package/dist/ui/radio.js.map +1 -1
- package/dist/ui/search-input.d.ts.map +1 -1
- package/dist/ui/search-input.js +17 -17
- package/dist/ui/search-input.js.map +1 -1
- package/dist/ui/segmented-control.d.ts.map +1 -1
- package/dist/ui/segmented-control.js +19 -19
- package/dist/ui/segmented-control.js.map +1 -1
- package/dist/ui/select.d.ts +2 -2
- package/dist/ui/select.d.ts.map +1 -1
- package/dist/ui/select.js +68 -68
- package/dist/ui/select.js.map +1 -1
- package/dist/ui/separator.d.ts +1 -1
- package/dist/ui/separator.d.ts.map +1 -1
- package/dist/ui/separator.js.map +1 -1
- package/dist/ui/sheet.d.ts +2 -2
- package/dist/ui/sheet.d.ts.map +1 -1
- package/dist/ui/sheet.js +44 -44
- package/dist/ui/sheet.js.map +1 -1
- package/dist/ui/sidebar.d.ts +1 -1
- package/dist/ui/sidebar.d.ts.map +1 -1
- package/dist/ui/sidebar.js +156 -156
- package/dist/ui/sidebar.js.map +1 -1
- package/dist/ui/skeleton.d.ts +1 -1
- package/dist/ui/skeleton.d.ts.map +1 -1
- package/dist/ui/skeleton.js +2 -2
- package/dist/ui/skeleton.js.map +1 -1
- package/dist/ui/slider.d.ts +2 -2
- package/dist/ui/slider.d.ts.map +1 -1
- package/dist/ui/slider.js +5 -5
- package/dist/ui/slider.js.map +1 -1
- package/dist/ui/spinner.d.ts.map +1 -1
- package/dist/ui/spinner.js +21 -21
- package/dist/ui/spinner.js.map +1 -1
- package/dist/ui/split-button.d.ts +1 -1
- package/dist/ui/split-button.d.ts.map +1 -1
- package/dist/ui/split-button.js +28 -28
- package/dist/ui/split-button.js.map +1 -1
- package/dist/ui/stack.d.ts +1 -1
- package/dist/ui/stack.d.ts.map +1 -1
- package/dist/ui/stack.js.map +1 -1
- package/dist/ui/stat-card.d.ts.map +1 -1
- package/dist/ui/stat-card.js +73 -73
- package/dist/ui/stat-card.js.map +1 -1
- package/dist/ui/status-dot.d.ts.map +1 -1
- package/dist/ui/status-dot.js.map +1 -1
- package/dist/ui/stepper.d.ts +1 -1
- package/dist/ui/stepper.d.ts.map +1 -1
- package/dist/ui/stepper.js +48 -48
- package/dist/ui/stepper.js.map +1 -1
- package/dist/ui/switch.d.ts +1 -1
- package/dist/ui/switch.d.ts.map +1 -1
- package/dist/ui/switch.js +15 -15
- package/dist/ui/switch.js.map +1 -1
- package/dist/ui/table.d.ts +1 -1
- package/dist/ui/table.d.ts.map +1 -1
- package/dist/ui/table.js.map +1 -1
- package/dist/ui/tabs.d.ts +2 -2
- package/dist/ui/tabs.d.ts.map +1 -1
- package/dist/ui/tabs.js +52 -52
- package/dist/ui/tabs.js.map +1 -1
- package/dist/ui/text.d.ts +1 -1
- package/dist/ui/text.d.ts.map +1 -1
- package/dist/ui/text.js.map +1 -1
- package/dist/ui/textarea.d.ts.map +1 -1
- package/dist/ui/textarea.js +13 -13
- package/dist/ui/textarea.js.map +1 -1
- package/dist/ui/toast-registry.js.map +1 -1
- package/dist/ui/toast.d.ts +3 -3
- package/dist/ui/toast.d.ts.map +1 -1
- package/dist/ui/toast.js +164 -164
- package/dist/ui/toast.js.map +1 -1
- package/dist/ui/toaster.d.ts.map +1 -1
- package/dist/ui/toaster.js +6 -6
- package/dist/ui/toaster.js.map +1 -1
- package/dist/ui/toggle-group.d.ts +1 -1
- package/dist/ui/toggle-group.d.ts.map +1 -1
- package/dist/ui/toggle-group.js.map +1 -1
- package/dist/ui/toggle.d.ts +1 -1
- package/dist/ui/toggle.d.ts.map +1 -1
- package/dist/ui/toggle.js +14 -14
- package/dist/ui/toggle.js.map +1 -1
- package/dist/ui/tooltip.d.ts +2 -2
- package/dist/ui/tooltip.d.ts.map +1 -1
- package/dist/ui/tooltip.js +26 -26
- package/dist/ui/tooltip.js.map +1 -1
- package/dist/ui/tree-view/index.d.ts +2 -2
- package/dist/ui/tree-view/index.d.ts.map +1 -1
- package/dist/ui/tree-view/index.js +1 -1
- package/dist/ui/tree-view/tree-view.d.ts +1 -1
- package/dist/ui/tree-view/tree-view.d.ts.map +1 -1
- package/dist/ui/visually-hidden.d.ts.map +1 -1
- package/dist/ui/visually-hidden.js.map +1 -1
- package/docs/components/_header.md +96 -0
- package/docs/rollback.md +179 -0
- package/llms-full.txt +97 -1
- package/llms.txt +24 -2
- package/package.json +296 -277
- package/dist/_chunks/framer.js +0 -5604
- package/dist/_chunks/framer.js.map +0 -1
- package/dist/_chunks/rolldown-runtime.js +0 -21
- package/dist/_chunks/sonner.js +0 -616
- package/dist/_chunks/sonner.js.map +0 -1
- package/dist/_chunks/stat-row.js +0 -432
- package/dist/_chunks/stat-row.js.map +0 -1
package/dist/ui/button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","names":[],"sources":["../../src/ui/button.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { IconCheck, IconX } from '@tabler/icons-react'\nimport { motion, AnimatePresence, useReducedMotion } from 'framer-motion'\nimport { Slot, Slottable } from '@primitives/react-slot'\nimport * as React from 'react'\nimport { useButtonGroup, useButtonGroupItem, getGroupPositionStyle } from './button-group'\nimport { Icon } from './icon'\nimport { IconProvider } from './icon-context'\nimport type { IconSize } from './icon-context'\nimport { springs, tweens, motionProps } from './lib/motion'\nimport { ProcessingOverlay } from './button-processing'\nimport type { ProcessingSpeed } from './button-processing'\nimport { cn } from './lib/utils'\nimport { Spinner } from './spinner'\n\nexport const buttonVariants = cva(\n 'relative inline-flex items-center justify-center whitespace-nowrap font-sans select-none overflow-hidden isolate focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled disabled:cursor-not-allowed disabled:saturate-[0.3] [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]',\n {\n variants: {\n variant: {\n solid: '',\n soft: '',\n outline: 'border',\n ghost: '',\n link: 'underline-offset-4 hover:underline active:opacity-80',\n },\n color: {\n accent: '',\n error: '',\n success: '',\n warning: '',\n neutral: '',\n },\n weight: {\n semibold: 'font-semibold',\n normal: 'font-normal',\n },\n size: {\n xs: 'h-ds-xs-plus rounded-ds-md px-ds-03 text-ds-sm gap-ds-02',\n sm: 'h-ds-sm rounded-ds-md px-ds-04 text-ds-sm gap-ds-02b',\n md: 'h-ds-md rounded-ds-lg px-ds-05 text-ds-md gap-ds-03',\n lg: 'h-ds-lg rounded-ds-xl px-ds-06 text-ds-base gap-2.5', /* 10px — no exact DS token */\n 'compact-xs': 'rounded-ds-md px-ds-02 py-[3px] text-ds-sm gap-ds-02',\n 'compact-sm': 'rounded-ds-md px-ds-03 py-[5px] text-ds-sm gap-ds-02b',\n 'compact-md': 'rounded-ds-lg px-ds-04 py-ds-03 text-ds-md gap-ds-03',\n icon: 'h-ds-md w-ds-md rounded-ds-md',\n 'icon-xs': 'h-ds-xs-plus w-ds-xs-plus rounded-ds-sm',\n 'icon-sm': 'h-ds-sm w-ds-sm rounded-ds-md',\n 'icon-md': 'h-ds-md w-ds-md rounded-ds-md',\n 'icon-lg': 'h-ds-lg w-ds-lg rounded-ds-lg',\n },\n },\n compoundVariants: [\n // ============ SOLID ============ (colored hover shadows — shadow tints with the button's own hue)\n { variant: 'solid', color: 'accent', className: 'bg-accent-9 text-accent-fg hover:bg-accent-10 shadow-raised hover:shadow-brand' },\n { variant: 'solid', color: 'error', className: 'bg-error-9 text-error-fg hover:bg-error-10 shadow-raised hover:shadow-error' },\n { variant: 'solid', color: 'success', className: 'bg-success-9 text-success-fg hover:bg-success-10 shadow-raised hover:shadow-success' },\n { variant: 'solid', color: 'warning', className: 'bg-warning-9 text-warning-fg hover:bg-warning-10 shadow-raised hover:shadow-warning' },\n { variant: 'solid', color: 'neutral', className: 'bg-neutral-5 text-surface-fg hover:bg-neutral-7 shadow-raised' },\n\n // ============ SOFT ============\n { variant: 'soft', color: 'accent', className: 'bg-accent-3 text-accent-11 hover:bg-accent-4 active:bg-accent-5' },\n { variant: 'soft', color: 'error', className: 'bg-error-3 text-error-11 hover:bg-error-4 active:bg-error-5' },\n { variant: 'soft', color: 'success', className: 'bg-success-3 text-success-11 hover:bg-success-4 active:bg-success-5' },\n { variant: 'soft', color: 'warning', className: 'bg-warning-3 text-warning-11 hover:bg-warning-4 active:bg-warning-5' },\n { variant: 'soft', color: 'neutral', className: 'bg-surface-raised-hover text-surface-fg-muted hover:bg-surface-raised-active active:bg-neutral-5' },\n\n // ============ OUTLINE ============\n { variant: 'outline', color: 'accent', className: 'bg-transparent text-accent-11 border-accent-7 hover:bg-accent-3 active:bg-accent-4' },\n { variant: 'outline', color: 'error', className: 'bg-transparent text-error-11 border-error-7 hover:bg-error-3 active:bg-error-4' },\n { variant: 'outline', color: 'success', className: 'bg-transparent text-success-11 border-success-7 hover:bg-success-3 active:bg-success-4' },\n { variant: 'outline', color: 'warning', className: 'bg-transparent text-warning-11 border-warning-7 hover:bg-warning-3 active:bg-warning-4' },\n { variant: 'outline', color: 'neutral', className: 'bg-transparent text-surface-fg border-surface-border-strong hover:bg-surface-raised-hover active:bg-surface-raised-active' },\n\n // ============ GHOST ============\n // ghost+accent uses neutral look for backward compat (most common ghost is toolbar/icon ghost)\n { variant: 'ghost', color: 'accent', className: 'bg-transparent text-surface-fg-muted hover:bg-surface-raised-hover hover:text-surface-fg active:bg-surface-raised-active' },\n { variant: 'ghost', color: 'error', className: 'bg-transparent text-error-11 hover:bg-error-3 active:bg-error-4' },\n { variant: 'ghost', color: 'success', className: 'bg-transparent text-success-11 hover:bg-success-3 active:bg-success-4' },\n { variant: 'ghost', color: 'warning', className: 'bg-transparent text-warning-11 hover:bg-warning-3 active:bg-warning-4' },\n { variant: 'ghost', color: 'neutral', className: 'bg-transparent text-surface-fg-muted hover:bg-surface-raised-hover hover:text-surface-fg active:bg-surface-raised-active' },\n\n // ============ LINK ============\n { variant: 'link', color: 'accent', className: 'text-accent-11' },\n { variant: 'link', color: 'error', className: 'text-error-11' },\n { variant: 'link', color: 'success', className: 'text-success-11' },\n { variant: 'link', color: 'warning', className: 'text-warning-11' },\n { variant: 'link', color: 'neutral', className: 'text-surface-fg-muted' },\n ],\n defaultVariants: {\n variant: 'solid',\n color: 'accent',\n weight: 'semibold',\n size: 'md',\n },\n },\n)\n\n/** Extra horizontal padding for pill shape — rounded ends eat into visual space */\nconst pillPaddingClass: Record<string, string> = {\n xs: 'px-ds-04',\n sm: 'px-ds-05',\n md: 'px-ds-06',\n lg: 'px-ds-07',\n 'compact-xs': 'px-ds-03',\n 'compact-sm': 'px-ds-04',\n 'compact-md': 'px-ds-05',\n}\n\n/** Negative margin to tighten icon side padding — pulls icon closer to button edge */\nconst iconInsetClass: Record<string, { start: string; end: string }> = {\n xs: { start: '-ml-0.5', end: '-mr-0.5' },\n sm: { start: '-ml-1', end: '-mr-1' },\n md: { start: '-ml-1.5', end: '-mr-1.5' },\n lg: { start: '-ml-2', end: '-mr-2' },\n 'compact-xs': { start: '-ml-0.5', end: '-mr-0.5' },\n 'compact-sm': { start: '-ml-0.5', end: '-mr-0.5' },\n 'compact-md': { start: '-ml-1', end: '-mr-1' },\n icon: { start: '', end: '' },\n 'icon-xs': { start: '', end: '' },\n 'icon-sm': { start: '', end: '' },\n 'icon-md': { start: '', end: '' },\n 'icon-lg': { start: '', end: '' },\n}\n\n/** Map button size to spinner size */\nconst BUTTON_TO_SPINNER_SIZE: Record<string, 'sm' | 'md'> = {\n xs: 'sm',\n sm: 'sm',\n md: 'sm',\n lg: 'md',\n 'compact-xs': 'sm',\n 'compact-sm': 'sm',\n 'compact-md': 'sm',\n icon: 'sm',\n 'icon-xs': 'sm',\n 'icon-sm': 'sm',\n 'icon-md': 'sm',\n 'icon-lg': 'md',\n}\n\n/** Map button size to Icon context size */\nconst BUTTON_TO_ICON_SIZE: Record<string, IconSize> = {\n xs: 'xs', sm: 'sm', md: 'md', lg: 'lg',\n 'compact-xs': 'xs', 'compact-sm': 'sm', 'compact-md': 'md',\n icon: 'md', 'icon-xs': 'xs', 'icon-sm': 'sm', 'icon-md': 'md', 'icon-lg': 'lg',\n}\n\n/**\n * Props for Button — the primary action component with a two-axis variant system,\n * multiple size options, icon slots, and a built-in loading state.\n *\n * **Two axes:**\n * - `variant` controls **visual style**: `\"solid\"` (default, filled) | `\"soft\"` (tinted bg) |\n * `\"outline\"` (bordered) | `\"ghost\"` (transparent, for toolbars) | `\"link\"` (underline, inline)\n * - `color` controls **semantic intent**: `\"accent\"` (default, brand) | `\"error\"` (destructive) |\n * `\"success\"` | `\"warning\"` | `\"neutral\"` (subdued)\n *\n * **Sizes:** `xs` | `sm` | `md` (default) | `lg` for text buttons;\n * `compact-xs` | `compact-sm` | `compact-md` for height-less inline buttons;\n * `icon` | `icon-xs` | `icon-sm` | `icon-md` | `icon-lg` for square icon-only buttons.\n *\n * **Shape:** `\"default\"` uses per-size border-radius; `\"pill\"` applies `rounded-full`.\n *\n * **Weight:** `\"semibold\"` (default) | `\"normal\"` for lighter labels.\n *\n * **Note:** `ghost` + `accent` renders with neutral styling for backward compat —\n * most ghost buttons are toolbar/icon actions where neutral is expected.\n *\n * **Loading:** When `loading={true}` the button is disabled and aria-busy is set.\n * Use `loadingPosition` to control where the spinner appears.\n *\n * @example\n * // Primary save action (default variant + color):\n * <Button onClick={handleSave}>Save changes</Button>\n *\n * @example\n * // Soft success feedback:\n * <Button variant=\"soft\" color=\"success\" startIcon={<Icon icon={IconCheck} />}>\n * Approved\n * </Button>\n *\n * @example\n * // Destructive delete with loading state:\n * <Button variant=\"solid\" color=\"error\" startIcon={<Icon icon={IconTrash} />} loading={isDeleting}>\n * Delete project\n * </Button>\n *\n * @example\n * // Compact pill tag:\n * <Button variant=\"soft\" color=\"warning\" size=\"compact-sm\" shape=\"pill\">\n * Overdue\n * </Button>\n *\n * @example\n * // Ghost toolbar action:\n * <Button variant=\"ghost\" size=\"sm\" startIcon={<Icon icon={IconEdit} />}>\n * Edit\n * </Button>\n */\nexport interface ButtonProps\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean\n /** Button shape — 'pill' applies rounded-full for chip/tag-like buttons */\n shape?: 'default' | 'pill'\n /** Icon element rendered before children — use <Icon icon={...} /> */\n startIcon?: React.ReactElement | null\n /** Icon element rendered after children — use <Icon icon={...} /> */\n endIcon?: React.ReactElement | null\n /** Show loading spinner and disable button */\n loading?: boolean\n /** Where to render the spinner: replaces startIcon, endIcon, or centers over children */\n loadingPosition?: 'start' | 'end' | 'center'\n /** Stretch to full width of parent */\n fullWidth?: boolean\n /**\n * Async click handler — auto-manages loading → success/error states.\n * When provided, the button shows a spinner while the promise is pending,\n * then briefly flashes green (success) or red (error) before reverting.\n * Overrides `onClick` and `loading` when active.\n */\n onClickAsync?: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>\n /** How long (ms) to show the success/error state before reverting. Default: 1500 */\n asyncFeedbackDuration?: number\n\n /**\n * Show processing animation — animated border/glow while content stays visible.\n * `true` = \"working\" speed. Semantic speeds:\n * - `\"ambient\"` (3s) — background sync, file upload\n * - `\"working\"` (2s) — standard API call, generation\n * - `\"urgent\"` (1s) — retry, nearly done\n */\n processing?: boolean | 'ambient' | 'working' | 'urgent'\n\n /** Override processing animation color. Defaults to button's own color. */\n processingColor?: 'accent' | 'error' | 'success' | 'warning' | 'neutral'\n\n /** Disable button during processing. Default: true. Set false for cancel-by-click patterns. */\n processingDisabled?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant,\n color,\n weight,\n size,\n asChild = false,\n shape,\n startIcon,\n endIcon,\n loading: loadingProp = false,\n loadingPosition = 'start',\n fullWidth = false,\n disabled,\n onClick,\n onClickAsync,\n asyncFeedbackDuration = 1500,\n processing: processingProp,\n processingColor,\n processingDisabled = true,\n children,\n ...props\n },\n ref,\n ) => {\n const group = useButtonGroup()\n const groupItem = useButtonGroupItem()\n const resolvedVariant = variant ?? group.variant\n const resolvedColor = color ?? group.color\n const resolvedWeight = weight ?? group.weight ?? 'semibold'\n const resolvedShape = shape ?? group.shape ?? 'default'\n const resolvedSize = size ?? group.size ?? 'md'\n // ButtonGroup can propagate disabled to all children\n const resolvedDisabled = disabled ?? group.disabled\n\n // When inside an attached ButtonGroup, adjust border-radius based on position\n const groupRadiusStyle = groupItem && group.attached !== false\n ? getGroupPositionStyle(groupItem.position, group.orientation ?? 'horizontal')\n : undefined\n // Stretch to fill when inside a vertical or fullWidth ButtonGroup\n const groupStretch = group._stretch ?? false\n\n const prefersReduced = useReducedMotion()\n\n // Refs + effect for smooth width transitions (must be before any early returns)\n const wrapperRef = React.useRef<HTMLSpanElement>(null)\n const btnRef = React.useRef<HTMLButtonElement | null>(null)\n const rafRef = React.useRef<number | undefined>(undefined)\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n React.useEffect(() => {\n const btn = btnRef.current\n const wrapper = wrapperRef.current\n if (!btn || !wrapper || fullWidth || groupStretch || prefersReduced) return\n\n rafRef.current = requestAnimationFrame(() => {\n wrapper.style.width = 'auto'\n const w = btn.offsetWidth\n if (w > 0) {\n wrapper.getBoundingClientRect()\n wrapper.style.width = `${w}px`\n }\n })\n return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current) }\n }) // run on every render to catch content changes\n\n // Async state machine: idle → loading → success | error → idle\n type AsyncState = 'idle' | 'loading' | 'success' | 'error'\n const [asyncState, setAsyncState] = React.useState<AsyncState>('idle')\n const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n const isMountedRef = React.useRef(true)\n\n React.useEffect(() => () => {\n isMountedRef.current = false\n clearTimeout(timeoutRef.current)\n }, [])\n\n const handleAsyncClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!onClickAsync || asyncState !== 'idle') return\n setAsyncState('loading')\n onClickAsync(e)\n .then(() => { if (isMountedRef.current) setAsyncState('success') })\n .catch(() => { if (isMountedRef.current) setAsyncState('error') })\n .finally(() => {\n if (isMountedRef.current) {\n timeoutRef.current = setTimeout(() => {\n if (isMountedRef.current) setAsyncState('idle')\n }, asyncFeedbackDuration)\n }\n })\n }\n\n const isAsync = !!onClickAsync\n const loading = isAsync ? asyncState === 'loading' : loadingProp\n const isAsyncFeedback = asyncState === 'success' || asyncState === 'error'\n\n // Processing: explicit prop takes priority, otherwise auto-processing during onClickAsync.\n // Processing is always OFF during async feedback (success/error) so the feedback colors show.\n const autoProcessing = isAsync && asyncState === 'loading' && !processingProp\n const processingSpeed: ProcessingSpeed | undefined = isAsyncFeedback ? undefined\n : processingProp === true ? 'working'\n : processingProp === false || !processingProp\n ? (autoProcessing ? 'working' : undefined)\n : processingProp\n const isProcessing = !!processingSpeed\n const resolvedProcessingColor = processingColor ?? resolvedColor ?? 'accent'\n\n if (asChild) {\n // Slot merges all props into the child element via cloneElement at runtime.\n // We cast here because SlotProps only types React.HTMLAttributes<HTMLElement>,\n // which excludes button-specific attrs like `disabled`.\n const slotProps = {\n className: cn(\n buttonVariants({ variant: resolvedVariant, color: resolvedColor, weight: resolvedWeight, size: resolvedSize }),\n resolvedShape === 'pill' && 'rounded-full',\n resolvedShape === 'pill' && pillPaddingClass[resolvedSize],\n (fullWidth || groupStretch) && 'w-full',\n className,\n ),\n ref,\n disabled: resolvedDisabled || loading,\n 'aria-busy': loading || undefined,\n ...props,\n } as React.ComponentPropsWithRef<typeof Slot>\n return (\n <Slot {...slotProps}>\n <Slottable>{children}</Slottable>\n </Slot>\n )\n }\n\n const inset = iconInsetClass[resolvedSize] ?? { start: '', end: '' }\n // Dim icons on filled variants (Radix pattern — icon is decorative, text is primary)\n const dimIcon = resolvedVariant === 'solid' || resolvedVariant === 'soft' || resolvedVariant === 'outline'\n\n const renderStartSlot = () => {\n if (loading && loadingPosition === 'start') {\n return (\n <span className={cn('inline-flex shrink-0 items-center justify-center', startIcon && inset.start)}>\n <Spinner size={BUTTON_TO_SPINNER_SIZE[resolvedSize]} variant=\"bare\" />\n </span>\n )\n }\n if (startIcon) {\n return (\n <span className={cn('inline-flex shrink-0 items-center justify-center pointer-events-none', inset.start, dimIcon && 'opacity-90')}>\n {startIcon}\n </span>\n )\n }\n return null\n }\n\n const renderEndSlot = () => {\n if (loading && loadingPosition === 'end') {\n return (\n <span className={cn('inline-flex shrink-0 items-center justify-center', endIcon && inset.end)}>\n <Spinner size={BUTTON_TO_SPINNER_SIZE[resolvedSize]} variant=\"bare\" />\n </span>\n )\n }\n if (endIcon) {\n return (\n <span className={cn('inline-flex shrink-0 items-center justify-center pointer-events-none', inset.end, dimIcon && 'opacity-90')}>\n {endIcon}\n </span>\n )\n }\n return null\n }\n\n // Separate DevalokGrain elements (need to be direct button children for absolute positioning)\n // from text/other content (needs z-elevation above grain)\n const childArray = React.Children.toArray(children)\n const grainElements: React.ReactNode[] = []\n const contentElements: React.ReactNode[] = []\n childArray.forEach((child) => {\n if (React.isValidElement(child) && (child.type as { displayName?: string })?.displayName === 'DevalokGrain') {\n grainElements.push(child)\n } else {\n contentElements.push(child)\n }\n })\n\n const renderChildren = () => {\n if (loading && loadingPosition === 'center') {\n return (\n <span className=\"relative inline-flex items-center justify-center\">\n <span className=\"invisible\">{contentElements}</span>\n <span className=\"absolute inset-0 flex items-center justify-center\">\n <Spinner size={BUTTON_TO_SPINNER_SIZE[resolvedSize]} variant=\"bare\" />\n </span>\n </span>\n )\n }\n // Only wrap in z-elevated span when grain is present (to sit above grain layers).\n // Without grain, render children directly to preserve flex layout.\n if (grainElements.length > 0) {\n return <span>{contentElements}</span>\n }\n return <>{contentElements}</>\n }\n\n // Async feedback: override color to show green/red\n const feedbackColorClass = isAsyncFeedback\n ? asyncState === 'success'\n ? 'bg-success-9 text-success-fg border-transparent hover:bg-success-9'\n : 'bg-error-9 text-error-fg border-transparent hover:bg-error-9'\n : undefined\n\n // Async feedback icon — uses Icon's draw animation for pen-stroke effect\n const asyncFeedbackIcon = isAsyncFeedback ? (\n <span className={cn('inline-flex shrink-0 items-center justify-center pointer-events-none', startIcon && inset.start)}>\n <Icon icon={asyncState === 'success' ? IconCheck : IconX} animate=\"draw\" />\n </span>\n ) : null\n\n const iconSize = BUTTON_TO_ICON_SIZE[resolvedSize] ?? 'md'\n\n const buttonEl = (\n <motion.button\n {...motionProps(props)}\n style={{ ...props.style, ...groupRadiusStyle }}\n className={cn(\n buttonVariants({\n // When processing (and not showing async feedback), force soft variant so ants pop\n variant: isProcessing && !isAsyncFeedback && resolvedVariant !== 'ghost' && resolvedVariant !== 'outline' && resolvedVariant !== 'link' ? 'soft' : resolvedVariant,\n color: resolvedColor,\n weight: resolvedWeight,\n size: resolvedSize,\n }),\n resolvedShape === 'pill' && 'rounded-full',\n resolvedShape === 'pill' && pillPaddingClass[resolvedSize],\n (fullWidth || groupStretch) && 'w-full',\n // Asymmetric timing: hover-out is slow+relaxed, hover-in is fast+snappy (applied via hover: override)\n !loading && !isAsyncFeedback && 'transition-[color,background-color,border-color,box-shadow,transform,filter] duration-moderate-01 ease-productive-exit',\n !loading && !isAsyncFeedback && 'hover:duration-fast-02 hover:ease-productive-entrance',\n !loading && !isAsyncFeedback && 'active:scale-[0.95] active:brightness-[0.92] active:saturate-[1.1] active:duration-[0ms]',\n feedbackColorClass,\n isAsyncFeedback && 'transition-colors duration-moderate-01 ease-productive-standard',\n isProcessing && processingDisabled && 'pointer-events-none cursor-default',\n className,\n )}\n ref={(el: HTMLButtonElement | null) => {\n btnRef.current = el\n if (typeof ref === 'function') ref(el)\n else if (ref) (ref as React.MutableRefObject<HTMLButtonElement | null>).current = el\n }}\n disabled={resolvedDisabled || (loading && !isProcessing)}\n aria-busy={loading || isProcessing || undefined}\n aria-disabled={isProcessing && processingDisabled || undefined}\n onClick={isAsync ? handleAsyncClick : (isProcessing && processingDisabled ? undefined : onClick)}\n >\n {/* Grain layers render as direct children (need absolute positioning) */}\n {grainElements}\n {/* Content renders above grain via z-[2] span wrapper */}\n {isAsyncFeedback ? asyncFeedbackIcon : renderStartSlot()}\n {isAsyncFeedback ? contentElements : renderChildren()}\n {isAsyncFeedback ? null : renderEndSlot()}\n </motion.button>\n )\n\n // Always wrap in a positioned container so the overlay can render\n // as a sibling OUTSIDE the button (not affected by disabled opacity).\n // Keeping the wrapper always-on prevents React unmount/remount on\n // processing toggle, enabling smooth CSS transitions between states.\n return (\n <IconProvider size={iconSize}>\n <span\n ref={wrapperRef}\n className={cn('relative inline-flex', fullWidth && 'w-full')}\n style={{\n ...(fullWidth || groupStretch || prefersReduced ? undefined : { transition: 'width 0.2s cubic-bezier(0.25, 0.1, 0.25, 1)' }),\n ...groupRadiusStyle,\n }}\n >\n {buttonEl}\n <ProcessingOverlay\n active={isProcessing}\n speed={processingSpeed ?? 'working'}\n color={resolvedProcessingColor}\n />\n </span>\n </IconProvider>\n )\n },\n)\nButton.displayName = 'Button'\n\nexport { Button }\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"button.js","names":[],"sources":["../../src/ui/button.tsx"],"sourcesContent":["'use client'\n\nimport { Slot, Slottable } from '@primitives/react-slot'\nimport { IconCheck, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { getGroupPositionStyle,useButtonGroup, useButtonGroupItem } from './button-group'\nimport type { ProcessingSpeed } from './button-processing'\nimport { ProcessingOverlay } from './button-processing'\nimport { Icon } from './icon'\nimport type { IconSize } from './icon-context'\nimport { IconProvider } from './icon-context'\nimport { motionProps,springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Spinner } from './spinner'\n\nexport const buttonVariants = cva(\n 'relative inline-flex items-center justify-center whitespace-nowrap font-sans select-none overflow-hidden isolate focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled disabled:cursor-not-allowed disabled:saturate-[0.3] [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]',\n {\n variants: {\n variant: {\n solid: '',\n soft: '',\n outline: 'border',\n ghost: '',\n link: 'underline-offset-4 hover:underline active:opacity-80',\n },\n color: {\n accent: '',\n error: '',\n success: '',\n warning: '',\n neutral: '',\n },\n weight: {\n semibold: 'font-semibold',\n normal: 'font-normal',\n },\n size: {\n xs: 'h-ds-xs-plus rounded-ds-md px-ds-03 text-ds-sm gap-ds-02',\n sm: 'h-ds-sm rounded-ds-md px-ds-04 text-ds-sm gap-ds-02b',\n md: 'h-ds-md rounded-ds-lg px-ds-05 text-ds-md gap-ds-03',\n lg: 'h-ds-lg rounded-ds-xl px-ds-06 text-ds-base gap-2.5', /* 10px — no exact DS token */\n 'compact-xs': 'rounded-ds-md px-ds-02 py-[3px] text-ds-sm gap-ds-02',\n 'compact-sm': 'rounded-ds-md px-ds-03 py-[5px] text-ds-sm gap-ds-02b',\n 'compact-md': 'rounded-ds-lg px-ds-04 py-ds-03 text-ds-md gap-ds-03',\n icon: 'h-ds-md w-ds-md rounded-ds-md',\n 'icon-xs': 'h-ds-xs-plus w-ds-xs-plus rounded-ds-sm',\n 'icon-sm': 'h-ds-sm w-ds-sm rounded-ds-md',\n 'icon-md': 'h-ds-md w-ds-md rounded-ds-md',\n 'icon-lg': 'h-ds-lg w-ds-lg rounded-ds-lg',\n },\n },\n compoundVariants: [\n // ============ SOLID ============ (colored hover shadows — shadow tints with the button's own hue)\n { variant: 'solid', color: 'accent', className: 'bg-accent-9 text-accent-fg hover:bg-accent-10 shadow-raised hover:shadow-brand' },\n { variant: 'solid', color: 'error', className: 'bg-error-9 text-error-fg hover:bg-error-10 shadow-raised hover:shadow-error' },\n { variant: 'solid', color: 'success', className: 'bg-success-9 text-success-fg hover:bg-success-10 shadow-raised hover:shadow-success' },\n { variant: 'solid', color: 'warning', className: 'bg-warning-9 text-warning-fg hover:bg-warning-10 shadow-raised hover:shadow-warning' },\n { variant: 'solid', color: 'neutral', className: 'bg-neutral-5 text-surface-fg hover:bg-neutral-7 shadow-raised' },\n\n // ============ SOFT ============\n { variant: 'soft', color: 'accent', className: 'bg-accent-3 text-accent-11 hover:bg-accent-4 active:bg-accent-5' },\n { variant: 'soft', color: 'error', className: 'bg-error-3 text-error-11 hover:bg-error-4 active:bg-error-5' },\n { variant: 'soft', color: 'success', className: 'bg-success-3 text-success-11 hover:bg-success-4 active:bg-success-5' },\n { variant: 'soft', color: 'warning', className: 'bg-warning-3 text-warning-11 hover:bg-warning-4 active:bg-warning-5' },\n { variant: 'soft', color: 'neutral', className: 'bg-surface-raised-hover text-surface-fg-muted hover:bg-surface-raised-active active:bg-neutral-5' },\n\n // ============ OUTLINE ============\n { variant: 'outline', color: 'accent', className: 'bg-transparent text-accent-11 border-accent-7 hover:bg-accent-3 active:bg-accent-4' },\n { variant: 'outline', color: 'error', className: 'bg-transparent text-error-11 border-error-7 hover:bg-error-3 active:bg-error-4' },\n { variant: 'outline', color: 'success', className: 'bg-transparent text-success-11 border-success-7 hover:bg-success-3 active:bg-success-4' },\n { variant: 'outline', color: 'warning', className: 'bg-transparent text-warning-11 border-warning-7 hover:bg-warning-3 active:bg-warning-4' },\n { variant: 'outline', color: 'neutral', className: 'bg-transparent text-surface-fg border-surface-border-strong hover:bg-surface-raised-hover active:bg-surface-raised-active' },\n\n // ============ GHOST ============\n // ghost+accent uses neutral look for backward compat (most common ghost is toolbar/icon ghost)\n { variant: 'ghost', color: 'accent', className: 'bg-transparent text-surface-fg-muted hover:bg-surface-raised-hover hover:text-surface-fg active:bg-surface-raised-active' },\n { variant: 'ghost', color: 'error', className: 'bg-transparent text-error-11 hover:bg-error-3 active:bg-error-4' },\n { variant: 'ghost', color: 'success', className: 'bg-transparent text-success-11 hover:bg-success-3 active:bg-success-4' },\n { variant: 'ghost', color: 'warning', className: 'bg-transparent text-warning-11 hover:bg-warning-3 active:bg-warning-4' },\n { variant: 'ghost', color: 'neutral', className: 'bg-transparent text-surface-fg-muted hover:bg-surface-raised-hover hover:text-surface-fg active:bg-surface-raised-active' },\n\n // ============ LINK ============\n { variant: 'link', color: 'accent', className: 'text-accent-11' },\n { variant: 'link', color: 'error', className: 'text-error-11' },\n { variant: 'link', color: 'success', className: 'text-success-11' },\n { variant: 'link', color: 'warning', className: 'text-warning-11' },\n { variant: 'link', color: 'neutral', className: 'text-surface-fg-muted' },\n ],\n defaultVariants: {\n variant: 'solid',\n color: 'accent',\n weight: 'semibold',\n size: 'md',\n },\n },\n)\n\n/** Extra horizontal padding for pill shape — rounded ends eat into visual space */\nconst pillPaddingClass: Record<string, string> = {\n xs: 'px-ds-04',\n sm: 'px-ds-05',\n md: 'px-ds-06',\n lg: 'px-ds-07',\n 'compact-xs': 'px-ds-03',\n 'compact-sm': 'px-ds-04',\n 'compact-md': 'px-ds-05',\n}\n\n/** Negative margin to tighten icon side padding — pulls icon closer to button edge */\nconst iconInsetClass: Record<string, { start: string; end: string }> = {\n xs: { start: '-ml-0.5', end: '-mr-0.5' },\n sm: { start: '-ml-1', end: '-mr-1' },\n md: { start: '-ml-1.5', end: '-mr-1.5' },\n lg: { start: '-ml-2', end: '-mr-2' },\n 'compact-xs': { start: '-ml-0.5', end: '-mr-0.5' },\n 'compact-sm': { start: '-ml-0.5', end: '-mr-0.5' },\n 'compact-md': { start: '-ml-1', end: '-mr-1' },\n icon: { start: '', end: '' },\n 'icon-xs': { start: '', end: '' },\n 'icon-sm': { start: '', end: '' },\n 'icon-md': { start: '', end: '' },\n 'icon-lg': { start: '', end: '' },\n}\n\n/** Map button size to spinner size */\nconst BUTTON_TO_SPINNER_SIZE: Record<string, 'sm' | 'md'> = {\n xs: 'sm',\n sm: 'sm',\n md: 'sm',\n lg: 'md',\n 'compact-xs': 'sm',\n 'compact-sm': 'sm',\n 'compact-md': 'sm',\n icon: 'sm',\n 'icon-xs': 'sm',\n 'icon-sm': 'sm',\n 'icon-md': 'sm',\n 'icon-lg': 'md',\n}\n\n/** Map button size to Icon context size */\nconst BUTTON_TO_ICON_SIZE: Record<string, IconSize> = {\n xs: 'xs', sm: 'sm', md: 'md', lg: 'lg',\n 'compact-xs': 'xs', 'compact-sm': 'sm', 'compact-md': 'md',\n icon: 'md', 'icon-xs': 'xs', 'icon-sm': 'sm', 'icon-md': 'md', 'icon-lg': 'lg',\n}\n\n/**\n * Props for Button — the primary action component with a two-axis variant system,\n * multiple size options, icon slots, and a built-in loading state.\n *\n * **Two axes:**\n * - `variant` controls **visual style**: `\"solid\"` (default, filled) | `\"soft\"` (tinted bg) |\n * `\"outline\"` (bordered) | `\"ghost\"` (transparent, for toolbars) | `\"link\"` (underline, inline)\n * - `color` controls **semantic intent**: `\"accent\"` (default, brand) | `\"error\"` (destructive) |\n * `\"success\"` | `\"warning\"` | `\"neutral\"` (subdued)\n *\n * **Sizes:** `xs` | `sm` | `md` (default) | `lg` for text buttons;\n * `compact-xs` | `compact-sm` | `compact-md` for height-less inline buttons;\n * `icon` | `icon-xs` | `icon-sm` | `icon-md` | `icon-lg` for square icon-only buttons.\n *\n * **Shape:** `\"default\"` uses per-size border-radius; `\"pill\"` applies `rounded-full`.\n *\n * **Weight:** `\"semibold\"` (default) | `\"normal\"` for lighter labels.\n *\n * **Note:** `ghost` + `accent` renders with neutral styling for backward compat —\n * most ghost buttons are toolbar/icon actions where neutral is expected.\n *\n * **Loading:** When `loading={true}` the button is disabled and aria-busy is set.\n * Use `loadingPosition` to control where the spinner appears.\n *\n * @example\n * // Primary save action (default variant + color):\n * <Button onClick={handleSave}>Save changes</Button>\n *\n * @example\n * // Soft success feedback:\n * <Button variant=\"soft\" color=\"success\" startIcon={<Icon icon={IconCheck} />}>\n * Approved\n * </Button>\n *\n * @example\n * // Destructive delete with loading state:\n * <Button variant=\"solid\" color=\"error\" startIcon={<Icon icon={IconTrash} />} loading={isDeleting}>\n * Delete project\n * </Button>\n *\n * @example\n * // Compact pill tag:\n * <Button variant=\"soft\" color=\"warning\" size=\"compact-sm\" shape=\"pill\">\n * Overdue\n * </Button>\n *\n * @example\n * // Ghost toolbar action:\n * <Button variant=\"ghost\" size=\"sm\" startIcon={<Icon icon={IconEdit} />}>\n * Edit\n * </Button>\n */\nexport interface ButtonProps\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean\n /** Button shape — 'pill' applies rounded-full for chip/tag-like buttons */\n shape?: 'default' | 'pill'\n /** Icon element rendered before children — use <Icon icon={...} /> */\n startIcon?: React.ReactElement | null\n /** Icon element rendered after children — use <Icon icon={...} /> */\n endIcon?: React.ReactElement | null\n /** Show loading spinner and disable button */\n loading?: boolean\n /** Where to render the spinner: replaces startIcon, endIcon, or centers over children */\n loadingPosition?: 'start' | 'end' | 'center'\n /** Stretch to full width of parent */\n fullWidth?: boolean\n /**\n * Async click handler — auto-manages loading → success/error states.\n * When provided, the button shows a spinner while the promise is pending,\n * then briefly flashes green (success) or red (error) before reverting.\n * Overrides `onClick` and `loading` when active.\n */\n onClickAsync?: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>\n /** How long (ms) to show the success/error state before reverting. Default: 1500 */\n asyncFeedbackDuration?: number\n\n /**\n * Show processing animation — animated border/glow while content stays visible.\n * `true` = \"working\" speed. Semantic speeds:\n * - `\"ambient\"` (3s) — background sync, file upload\n * - `\"working\"` (2s) — standard API call, generation\n * - `\"urgent\"` (1s) — retry, nearly done\n */\n processing?: boolean | 'ambient' | 'working' | 'urgent'\n\n /** Override processing animation color. Defaults to button's own color. */\n processingColor?: 'accent' | 'error' | 'success' | 'warning' | 'neutral'\n\n /** Disable button during processing. Default: true. Set false for cancel-by-click patterns. */\n processingDisabled?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant,\n color,\n weight,\n size,\n asChild = false,\n shape,\n startIcon,\n endIcon,\n loading: loadingProp = false,\n loadingPosition = 'start',\n fullWidth = false,\n disabled,\n onClick,\n onClickAsync,\n asyncFeedbackDuration = 1500,\n processing: processingProp,\n processingColor,\n processingDisabled = true,\n children,\n ...props\n },\n ref,\n ) => {\n const group = useButtonGroup()\n const groupItem = useButtonGroupItem()\n const resolvedVariant = variant ?? group.variant\n const resolvedColor = color ?? group.color\n const resolvedWeight = weight ?? group.weight ?? 'semibold'\n const resolvedShape = shape ?? group.shape ?? 'default'\n const resolvedSize = size ?? group.size ?? 'md'\n // ButtonGroup can propagate disabled to all children\n const resolvedDisabled = disabled ?? group.disabled\n\n // When inside an attached ButtonGroup, adjust border-radius based on position\n const groupRadiusStyle = groupItem && group.attached !== false\n ? getGroupPositionStyle(groupItem.position, group.orientation ?? 'horizontal')\n : undefined\n // Stretch to fill when inside a vertical or fullWidth ButtonGroup\n const groupStretch = group._stretch ?? false\n\n const prefersReduced = useReducedMotion()\n\n // Refs + effect for smooth width transitions (must be before any early returns)\n const wrapperRef = React.useRef<HTMLSpanElement>(null)\n const btnRef = React.useRef<HTMLButtonElement | null>(null)\n const rafRef = React.useRef<number | undefined>(undefined)\n\n \n React.useEffect(() => {\n const btn = btnRef.current\n const wrapper = wrapperRef.current\n if (!btn || !wrapper || fullWidth || groupStretch || prefersReduced) return\n\n rafRef.current = requestAnimationFrame(() => {\n wrapper.style.width = 'auto'\n const w = btn.offsetWidth\n if (w > 0) {\n wrapper.getBoundingClientRect()\n wrapper.style.width = `${w}px`\n }\n })\n return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current) }\n }) // run on every render to catch content changes\n\n // Async state machine: idle → loading → success | error → idle\n type AsyncState = 'idle' | 'loading' | 'success' | 'error'\n const [asyncState, setAsyncState] = React.useState<AsyncState>('idle')\n const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n const isMountedRef = React.useRef(true)\n\n React.useEffect(() => () => {\n isMountedRef.current = false\n clearTimeout(timeoutRef.current)\n }, [])\n\n const handleAsyncClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!onClickAsync || asyncState !== 'idle') return\n setAsyncState('loading')\n onClickAsync(e)\n .then(() => { if (isMountedRef.current) setAsyncState('success') })\n .catch(() => { if (isMountedRef.current) setAsyncState('error') })\n .finally(() => {\n if (isMountedRef.current) {\n timeoutRef.current = setTimeout(() => {\n if (isMountedRef.current) setAsyncState('idle')\n }, asyncFeedbackDuration)\n }\n })\n }\n\n const isAsync = !!onClickAsync\n const loading = isAsync ? asyncState === 'loading' : loadingProp\n const isAsyncFeedback = asyncState === 'success' || asyncState === 'error'\n\n // Processing: explicit prop takes priority, otherwise auto-processing during onClickAsync.\n // Processing is always OFF during async feedback (success/error) so the feedback colors show.\n const autoProcessing = isAsync && asyncState === 'loading' && !processingProp\n const processingSpeed: ProcessingSpeed | undefined = isAsyncFeedback ? undefined\n : processingProp === true ? 'working'\n : processingProp === false || !processingProp\n ? (autoProcessing ? 'working' : undefined)\n : processingProp\n const isProcessing = !!processingSpeed\n const resolvedProcessingColor = processingColor ?? resolvedColor ?? 'accent'\n\n if (asChild) {\n // Slot merges all props into the child element via cloneElement at runtime.\n // We cast here because SlotProps only types React.HTMLAttributes<HTMLElement>,\n // which excludes button-specific attrs like `disabled`.\n const slotProps = {\n className: cn(\n buttonVariants({ variant: resolvedVariant, color: resolvedColor, weight: resolvedWeight, size: resolvedSize }),\n resolvedShape === 'pill' && 'rounded-full',\n resolvedShape === 'pill' && pillPaddingClass[resolvedSize],\n (fullWidth || groupStretch) && 'w-full',\n className,\n ),\n ref,\n disabled: resolvedDisabled || loading,\n 'aria-busy': loading || undefined,\n ...props,\n } as React.ComponentPropsWithRef<typeof Slot>\n return (\n <Slot {...slotProps}>\n <Slottable>{children}</Slottable>\n </Slot>\n )\n }\n\n const inset = iconInsetClass[resolvedSize] ?? { start: '', end: '' }\n // Dim icons on filled variants (Radix pattern — icon is decorative, text is primary)\n const dimIcon = resolvedVariant === 'solid' || resolvedVariant === 'soft' || resolvedVariant === 'outline'\n\n const renderStartSlot = () => {\n if (loading && loadingPosition === 'start') {\n return (\n <span className={cn('inline-flex shrink-0 items-center justify-center', startIcon && inset.start)}>\n <Spinner size={BUTTON_TO_SPINNER_SIZE[resolvedSize]} variant=\"bare\" />\n </span>\n )\n }\n if (startIcon) {\n return (\n <span className={cn('inline-flex shrink-0 items-center justify-center pointer-events-none', inset.start, dimIcon && 'opacity-90')}>\n {startIcon}\n </span>\n )\n }\n return null\n }\n\n const renderEndSlot = () => {\n if (loading && loadingPosition === 'end') {\n return (\n <span className={cn('inline-flex shrink-0 items-center justify-center', endIcon && inset.end)}>\n <Spinner size={BUTTON_TO_SPINNER_SIZE[resolvedSize]} variant=\"bare\" />\n </span>\n )\n }\n if (endIcon) {\n return (\n <span className={cn('inline-flex shrink-0 items-center justify-center pointer-events-none', inset.end, dimIcon && 'opacity-90')}>\n {endIcon}\n </span>\n )\n }\n return null\n }\n\n // Separate DevalokGrain elements (need to be direct button children for absolute positioning)\n // from text/other content (needs z-elevation above grain)\n const childArray = React.Children.toArray(children)\n const grainElements: React.ReactNode[] = []\n const contentElements: React.ReactNode[] = []\n childArray.forEach((child) => {\n if (React.isValidElement(child) && (child.type as { displayName?: string })?.displayName === 'DevalokGrain') {\n grainElements.push(child)\n } else {\n contentElements.push(child)\n }\n })\n\n const renderChildren = () => {\n if (loading && loadingPosition === 'center') {\n return (\n <span className=\"relative inline-flex items-center justify-center\">\n <span className=\"invisible\">{contentElements}</span>\n <span className=\"absolute inset-0 flex items-center justify-center\">\n <Spinner size={BUTTON_TO_SPINNER_SIZE[resolvedSize]} variant=\"bare\" />\n </span>\n </span>\n )\n }\n // Only wrap in z-elevated span when grain is present (to sit above grain layers).\n // Without grain, render children directly to preserve flex layout.\n if (grainElements.length > 0) {\n return <span>{contentElements}</span>\n }\n return <>{contentElements}</>\n }\n\n // Async feedback: override color to show green/red\n const feedbackColorClass = isAsyncFeedback\n ? asyncState === 'success'\n ? 'bg-success-9 text-success-fg border-transparent hover:bg-success-9'\n : 'bg-error-9 text-error-fg border-transparent hover:bg-error-9'\n : undefined\n\n // Async feedback icon — uses Icon's draw animation for pen-stroke effect\n const asyncFeedbackIcon = isAsyncFeedback ? (\n <span className={cn('inline-flex shrink-0 items-center justify-center pointer-events-none', startIcon && inset.start)}>\n <Icon icon={asyncState === 'success' ? IconCheck : IconX} animate=\"draw\" />\n </span>\n ) : null\n\n const iconSize = BUTTON_TO_ICON_SIZE[resolvedSize] ?? 'md'\n\n const buttonEl = (\n <motion.button\n {...motionProps(props)}\n style={{ ...props.style, ...groupRadiusStyle }}\n className={cn(\n buttonVariants({\n // When processing (and not showing async feedback), force soft variant so ants pop\n variant: isProcessing && !isAsyncFeedback && resolvedVariant !== 'ghost' && resolvedVariant !== 'outline' && resolvedVariant !== 'link' ? 'soft' : resolvedVariant,\n color: resolvedColor,\n weight: resolvedWeight,\n size: resolvedSize,\n }),\n resolvedShape === 'pill' && 'rounded-full',\n resolvedShape === 'pill' && pillPaddingClass[resolvedSize],\n (fullWidth || groupStretch) && 'w-full',\n // Asymmetric timing: hover-out is slow+relaxed, hover-in is fast+snappy (applied via hover: override)\n !loading && !isAsyncFeedback && 'transition-[color,background-color,border-color,box-shadow,transform,filter] duration-moderate-01 ease-productive-exit',\n !loading && !isAsyncFeedback && 'hover:duration-fast-02 hover:ease-productive-entrance',\n !loading && !isAsyncFeedback && 'active:scale-[0.95] active:brightness-[0.92] active:saturate-[1.1] active:duration-[0ms]',\n feedbackColorClass,\n isAsyncFeedback && 'transition-colors duration-moderate-01 ease-productive-standard',\n isProcessing && processingDisabled && 'pointer-events-none cursor-default',\n className,\n )}\n ref={(el: HTMLButtonElement | null) => {\n btnRef.current = el\n if (typeof ref === 'function') ref(el)\n else if (ref) (ref as React.MutableRefObject<HTMLButtonElement | null>).current = el\n }}\n disabled={resolvedDisabled || (loading && !isProcessing)}\n aria-busy={loading || isProcessing || undefined}\n aria-disabled={isProcessing && processingDisabled || undefined}\n onClick={isAsync ? handleAsyncClick : (isProcessing && processingDisabled ? undefined : onClick)}\n >\n {/* Grain layers render as direct children (need absolute positioning) */}\n {grainElements}\n {/* Content renders above grain via z-[2] span wrapper */}\n {isAsyncFeedback ? asyncFeedbackIcon : renderStartSlot()}\n {isAsyncFeedback ? contentElements : renderChildren()}\n {isAsyncFeedback ? null : renderEndSlot()}\n </motion.button>\n )\n\n // Always wrap in a positioned container so the overlay can render\n // as a sibling OUTSIDE the button (not affected by disabled opacity).\n // Keeping the wrapper always-on prevents React unmount/remount on\n // processing toggle, enabling smooth CSS transitions between states.\n return (\n <IconProvider size={iconSize}>\n <span\n ref={wrapperRef}\n className={cn('relative inline-flex', fullWidth && 'w-full')}\n style={{\n ...(fullWidth || groupStretch || prefersReduced ? undefined : { transition: 'width 0.2s cubic-bezier(0.25, 0.1, 0.25, 1)' }),\n ...groupRadiusStyle,\n }}\n >\n {buttonEl}\n <ProcessingOverlay\n active={isProcessing}\n speed={processingSpeed ?? 'working'}\n color={resolvedProcessingColor}\n />\n </span>\n </IconProvider>\n )\n },\n)\nButton.displayName = 'Button'\n\nexport { Button }\n"],"mappings":"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"}
|
package/dist/ui/card.d.ts
CHANGED
|
@@ -23,5 +23,5 @@ declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HT
|
|
|
23
23
|
declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
24
24
|
declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
25
25
|
declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
26
|
-
export { Card,
|
|
26
|
+
export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants };
|
|
27
27
|
//# sourceMappingURL=card.d.ts.map
|
package/dist/ui/card.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/ui/card.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/ui/card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAIlC,QAAA,MAAM,YAAY;;;;8EA2BjB,CAAA;AA2DD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAA;IAC5C,uHAAuH;IACvH,WAAW,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;IAChG,qDAAqD;IACrD,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;CAC5B;AAED,YAAY,EAAE,QAAQ,EAAE,CAAA;AAwBxB,QAAA,MAAM,IAAI,kFAiDT,CAAA;AASD,QAAA,MAAM,UAAU,6GAYd,CAAA;AAGF,QAAA,MAAM,SAAS,6GASb,CAAA;AAGF,QAAA,MAAM,eAAe,6GASnB,CAAA;AASF,QAAA,MAAM,WAAW,6GAQf,CAAA;AASF,QAAA,MAAM,UAAU,6GAYd,CAAA;AAGF,OAAO,EAAE,IAAI,EAAE,WAAW,EAAC,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
|
package/dist/ui/card.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
2
|
+
import { motionProps as e, springs as t, tweens as n } from "./lib/motion.js";
|
|
3
|
+
import { t as r } from "../_chunks/vendor-utils.js";
|
|
4
|
+
import { cn as i } from "./lib/utils.js";
|
|
5
|
+
import * as a from "react";
|
|
6
|
+
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
7
|
+
import { motion as c } from "framer-motion";
|
|
8
8
|
//#region src/ui/card.tsx
|
|
9
|
-
var l =
|
|
9
|
+
var l = a.createContext("md"), u = r("rounded-ds-lg text-surface-fg transition-shadow duration-fast-02 ease-productive-standard", {
|
|
10
10
|
variants: {
|
|
11
11
|
variant: {
|
|
12
12
|
default: "bg-surface-raised border border-surface-border shadow-raised",
|
|
@@ -78,31 +78,31 @@ function m(e, t) {
|
|
|
78
78
|
function h(e) {
|
|
79
79
|
return d[e] ?? e;
|
|
80
80
|
}
|
|
81
|
-
var g =
|
|
82
|
-
let S = f ?? "md", C =
|
|
83
|
-
variant:
|
|
81
|
+
var g = a.forwardRef(({ className: r, variant: a, color: d, size: f, interactive: p, accent: g, accentColor: _ = "default", accentWidth: v = 3, children: y, ...b }, x) => {
|
|
82
|
+
let S = f ?? "md", C = i(u({
|
|
83
|
+
variant: a,
|
|
84
84
|
color: d,
|
|
85
85
|
size: f
|
|
86
|
-
}), g && "relative overflow-hidden", p && "hover:shadow-raised-hover hover:border-surface-border-strong cursor-pointer transition-shadow duration-fast-02 ease-productive-standard",
|
|
86
|
+
}), g && "relative overflow-hidden", p && "hover:shadow-raised-hover hover:border-surface-border-strong cursor-pointer transition-shadow duration-fast-02 ease-productive-standard", r), w = g ? /* @__PURE__ */ o(c.span, {
|
|
87
87
|
"aria-hidden": "true",
|
|
88
88
|
initial: { opacity: 0 },
|
|
89
89
|
animate: { opacity: 1 },
|
|
90
|
-
transition:
|
|
91
|
-
className:
|
|
90
|
+
transition: n.fade,
|
|
91
|
+
className: i("absolute pointer-events-none bg-[var(--card-accent-bg)]", m(g, v)),
|
|
92
92
|
style: { "--card-accent-bg": h(_) }
|
|
93
|
-
}) : null, T = /* @__PURE__ */
|
|
93
|
+
}) : null, T = /* @__PURE__ */ s(l.Provider, {
|
|
94
94
|
value: S,
|
|
95
95
|
children: [w, y]
|
|
96
96
|
});
|
|
97
|
-
return p ? /* @__PURE__ */
|
|
97
|
+
return p ? /* @__PURE__ */ o(c.div, {
|
|
98
98
|
ref: x,
|
|
99
99
|
whileHover: { y: -3 },
|
|
100
100
|
whileTap: { scale: .98 },
|
|
101
|
-
transition:
|
|
101
|
+
transition: t.snappy,
|
|
102
102
|
className: C,
|
|
103
|
-
...
|
|
103
|
+
...e(b),
|
|
104
104
|
children: T
|
|
105
|
-
}) : /* @__PURE__ */
|
|
105
|
+
}) : /* @__PURE__ */ o("div", {
|
|
106
106
|
ref: x,
|
|
107
107
|
className: C,
|
|
108
108
|
...b,
|
|
@@ -114,21 +114,21 @@ var _ = {
|
|
|
114
114
|
sm: "p-ds-05",
|
|
115
115
|
md: "p-ds-06",
|
|
116
116
|
lg: "p-ds-07"
|
|
117
|
-
}, v =
|
|
117
|
+
}, v = a.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ o("div", {
|
|
118
118
|
ref: n,
|
|
119
|
-
className:
|
|
119
|
+
className: i("flex flex-col space-y-ds-02b", _[a.useContext(l)], e),
|
|
120
120
|
...t
|
|
121
121
|
}));
|
|
122
122
|
v.displayName = "CardHeader";
|
|
123
|
-
var y =
|
|
123
|
+
var y = a.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ o("div", {
|
|
124
124
|
ref: n,
|
|
125
|
-
className:
|
|
125
|
+
className: i("font-sans font-semibold leading-ds-none tracking-normal text-surface-fg", e),
|
|
126
126
|
...t
|
|
127
127
|
}));
|
|
128
128
|
y.displayName = "CardTitle";
|
|
129
|
-
var b =
|
|
129
|
+
var b = a.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ o("div", {
|
|
130
130
|
ref: n,
|
|
131
|
-
className:
|
|
131
|
+
className: i("text-ds-md text-surface-fg-muted", e),
|
|
132
132
|
...t
|
|
133
133
|
}));
|
|
134
134
|
b.displayName = "CardDescription";
|
|
@@ -136,9 +136,9 @@ var x = {
|
|
|
136
136
|
sm: "p-ds-05 pt-0",
|
|
137
137
|
md: "p-ds-06 pt-0",
|
|
138
138
|
lg: "p-ds-07 pt-0"
|
|
139
|
-
}, S =
|
|
139
|
+
}, S = a.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ o("div", {
|
|
140
140
|
ref: n,
|
|
141
|
-
className:
|
|
141
|
+
className: i(x[a.useContext(l)], e),
|
|
142
142
|
...t
|
|
143
143
|
}));
|
|
144
144
|
S.displayName = "CardContent";
|
|
@@ -146,9 +146,9 @@ var C = {
|
|
|
146
146
|
sm: "p-ds-05 pt-0",
|
|
147
147
|
md: "p-ds-06 pt-0",
|
|
148
148
|
lg: "p-ds-07 pt-0"
|
|
149
|
-
}, w =
|
|
149
|
+
}, w = a.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ o("div", {
|
|
150
150
|
ref: n,
|
|
151
|
-
className:
|
|
151
|
+
className: i("flex items-center", C[a.useContext(l)], e),
|
|
152
152
|
...t
|
|
153
153
|
}));
|
|
154
154
|
w.displayName = "CardFooter";
|
package/dist/ui/card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","names":[],"sources":["../../src/ui/card.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\n\nimport { springs, tweens, motionProps } from './lib/motion'\nimport { cn } from './lib/utils'\n\ntype CardSize = 'sm' | 'md' | 'lg'\n\nconst CardSizeContext = React.createContext<CardSize>('md')\n\nconst cardVariants = cva(\n 'rounded-ds-lg text-surface-fg transition-shadow duration-fast-02 ease-productive-standard',\n {\n variants: {\n variant: {\n default: 'bg-surface-raised border border-surface-border shadow-raised',\n elevated: 'bg-surface-raised border border-surface-border shadow-raised-hover',\n outline: 'bg-transparent border border-surface-border-strong shadow-none',\n flat: 'bg-surface-raised border-none shadow-none',\n },\n color: {\n default: '',\n accent: 'border-accent-7',\n error: 'border-error-7',\n success: 'border-success-7',\n warning: 'border-warning-7',\n info: 'border-info-7',\n neutral: '',\n },\n size: {\n sm: '',\n md: '',\n lg: '',\n },\n },\n defaultVariants: { variant: 'default', color: 'default', size: 'md' },\n },\n)\n\n/**\n * Props for Card — a general-purpose content container with 4 elevation/style variants and\n * an optional interactive hover state.\n *\n * **Variants:** `default` (subtle border + shadow-raised) | `elevated` (stronger shadow-raised-hover) |\n * `outline` (2px solid border, no shadow) | `flat` (filled background, no shadow)\n *\n * **Composition:** Use sub-components `<CardHeader>`, `<CardTitle>`, `<CardDescription>`,\n * `<CardContent>`, and `<CardFooter>` for consistent internal spacing.\n *\n * **Interactive:** Pass `interactive` to enable hover shadow lift and pointer cursor —\n * useful for clickable cards in grids.\n *\n * @example\n * // Standard content card with header and body:\n * <Card>\n * <CardHeader>\n * <CardTitle>Project Alpha</CardTitle>\n * <CardDescription>Last updated 2 hours ago</CardDescription>\n * </CardHeader>\n * <CardContent>\n * <p>Sprint 4 is in progress with 12 open tasks.</p>\n * </CardContent>\n * </Card>\n *\n * @example\n * // Elevated card for a dashboard stat widget:\n * <Card variant=\"elevated\">\n * <CardContent>\n * <StatCard label=\"Revenue\" value=\"$12,400\" delta={{ value: \"+8%\", direction: \"up\" }} />\n * </CardContent>\n * </Card>\n *\n * @example\n * // Clickable card in a project grid (interactive hover effect):\n * <Card interactive onClick={() => router.push(`/projects/${id}`)}>\n * <CardHeader>\n * <CardTitle>{project.name}</CardTitle>\n * </CardHeader>\n * </Card>\n *\n * @example\n * // Flat card for a sidebar panel section (no shadow):\n * <Card variant=\"flat\" className=\"p-ds-05\">\n * <p className=\"text-surface-fg-muted text-ds-sm\">No recent activity</p>\n * </Card>\n * // These are just a few ways — feel free to combine props creatively!\n */\nconst accentColorMap: Record<string, string> = {\n default: 'var(--color-accent-9)',\n secondary: 'var(--color-secondary-9)',\n error: 'var(--color-error-9)',\n success: 'var(--color-success-9)',\n warning: 'var(--color-warning-9)',\n info: 'var(--color-info-9)',\n}\n\nexport interface CardProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n VariantProps<typeof cardVariants> {\n interactive?: boolean\n /** Position of the accent border strip */\n accent?: 'left' | 'top' | 'right' | 'bottom'\n /** Semantic color key or any CSS color string for the accent strip. Requires `accent` to be set. @default 'default' */\n accentColor?: 'default' | 'secondary' | 'error' | 'success' | 'warning' | 'info' | (string & {})\n /** Width of the accent strip in pixels @default 3 */\n accentWidth?: 2 | 3 | 4 | 6\n}\n\nexport type { CardSize }\n\nconst accentSizeClasses: Record<string, Record<number, string>> = {\n left: { 2: 'w-[2px]', 3: 'w-[3px]', 4: 'w-[4px]', 6: 'w-[6px]' },\n top: { 2: 'h-[2px]', 3: 'h-[3px]', 4: 'h-[4px]', 6: 'h-[6px]' },\n right: { 2: 'w-[2px]', 3: 'w-[3px]', 4: 'w-[4px]', 6: 'w-[6px]' },\n bottom: { 2: 'h-[2px]', 3: 'h-[3px]', 4: 'h-[4px]', 6: 'h-[6px]' },\n}\n\nconst accentPositionClasses: Record<string, string> = {\n left: 'left-0 top-0 bottom-0 rounded-l-ds-lg',\n top: 'top-0 left-0 right-0 rounded-t-ds-lg',\n right: 'right-0 top-0 bottom-0 rounded-r-ds-lg',\n bottom: 'bottom-0 left-0 right-0 rounded-b-ds-lg',\n}\n\nfunction getAccentPositionClasses(position: string, width: number): string {\n return `${accentPositionClasses[position] ?? ''} ${accentSizeClasses[position]?.[width] ?? ''}`\n}\n\nfunction resolveAccentColor(color: string): string {\n return accentColorMap[color] ?? color\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n ({ className, variant, color, size, interactive, accent, accentColor = 'default', accentWidth = 3, children, ...props }, ref) => {\n const resolvedSize: CardSize = size ?? 'md'\n const classes = cn(\n cardVariants({ variant, color, size }),\n accent && 'relative overflow-hidden',\n interactive && 'hover:shadow-raised-hover hover:border-surface-border-strong cursor-pointer transition-shadow duration-fast-02 ease-productive-standard',\n className,\n )\n\n const accentEl = accent ? (\n <motion.span\n aria-hidden=\"true\"\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n transition={tweens.fade}\n className={cn('absolute pointer-events-none bg-[var(--card-accent-bg)]', getAccentPositionClasses(accent, accentWidth))}\n style={{ '--card-accent-bg': resolveAccentColor(accentColor) } as React.CSSProperties}\n />\n ) : null\n\n const content = (\n <CardSizeContext.Provider value={resolvedSize}>\n {accentEl}\n {children}\n </CardSizeContext.Provider>\n )\n\n if (interactive) {\n return (\n <motion.div\n ref={ref}\n whileHover={{ y: -3 }}\n whileTap={{ scale: 0.98 }}\n transition={springs.snappy}\n className={classes}\n {...motionProps(props)}\n >\n {content}\n </motion.div>\n )\n }\n\n return (\n <div ref={ref} className={classes} {...props}>\n {content}\n </div>\n )\n },\n)\nCard.displayName = 'Card'\n\nconst headerSizeClasses: Record<CardSize, string> = {\n sm: 'p-ds-05',\n md: 'p-ds-06',\n lg: 'p-ds-07',\n}\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const size = React.useContext(CardSizeContext)\n return (\n <div\n ref={ref}\n className={cn('flex flex-col space-y-ds-02b', headerSizeClasses[size], className)}\n {...props}\n />\n )\n})\nCardHeader.displayName = 'CardHeader'\n\nconst CardTitle = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('font-sans font-semibold leading-ds-none tracking-normal text-surface-fg', className)}\n {...props}\n />\n))\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('text-ds-md text-surface-fg-muted', className)}\n {...props}\n />\n))\nCardDescription.displayName = 'CardDescription'\n\nconst contentSizeClasses: Record<CardSize, string> = {\n sm: 'p-ds-05 pt-0',\n md: 'p-ds-06 pt-0',\n lg: 'p-ds-07 pt-0',\n}\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const size = React.useContext(CardSizeContext)\n return (\n <div ref={ref} className={cn(contentSizeClasses[size], className)} {...props} />\n )\n})\nCardContent.displayName = 'CardContent'\n\nconst footerSizeClasses: Record<CardSize, string> = {\n sm: 'p-ds-05 pt-0',\n md: 'p-ds-06 pt-0',\n lg: 'p-ds-07 pt-0',\n}\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const size = React.useContext(CardSizeContext)\n return (\n <div\n ref={ref}\n className={cn('flex items-center', footerSizeClasses[size], className)}\n {...props}\n />\n )\n})\nCardFooter.displayName = 'CardFooter'\n\nexport { Card, cardVariants, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"card.js","names":[],"sources":["../../src/ui/card.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { motionProps,springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\ntype CardSize = 'sm' | 'md' | 'lg'\n\nconst CardSizeContext = React.createContext<CardSize>('md')\n\nconst cardVariants = cva(\n 'rounded-ds-lg text-surface-fg transition-shadow duration-fast-02 ease-productive-standard',\n {\n variants: {\n variant: {\n default: 'bg-surface-raised border border-surface-border shadow-raised',\n elevated: 'bg-surface-raised border border-surface-border shadow-raised-hover',\n outline: 'bg-transparent border border-surface-border-strong shadow-none',\n flat: 'bg-surface-raised border-none shadow-none',\n },\n color: {\n default: '',\n accent: 'border-accent-7',\n error: 'border-error-7',\n success: 'border-success-7',\n warning: 'border-warning-7',\n info: 'border-info-7',\n neutral: '',\n },\n size: {\n sm: '',\n md: '',\n lg: '',\n },\n },\n defaultVariants: { variant: 'default', color: 'default', size: 'md' },\n },\n)\n\n/**\n * Props for Card — a general-purpose content container with 4 elevation/style variants and\n * an optional interactive hover state.\n *\n * **Variants:** `default` (subtle border + shadow-raised) | `elevated` (stronger shadow-raised-hover) |\n * `outline` (2px solid border, no shadow) | `flat` (filled background, no shadow)\n *\n * **Composition:** Use sub-components `<CardHeader>`, `<CardTitle>`, `<CardDescription>`,\n * `<CardContent>`, and `<CardFooter>` for consistent internal spacing.\n *\n * **Interactive:** Pass `interactive` to enable hover shadow lift and pointer cursor —\n * useful for clickable cards in grids.\n *\n * @example\n * // Standard content card with header and body:\n * <Card>\n * <CardHeader>\n * <CardTitle>Project Alpha</CardTitle>\n * <CardDescription>Last updated 2 hours ago</CardDescription>\n * </CardHeader>\n * <CardContent>\n * <p>Sprint 4 is in progress with 12 open tasks.</p>\n * </CardContent>\n * </Card>\n *\n * @example\n * // Elevated card for a dashboard stat widget:\n * <Card variant=\"elevated\">\n * <CardContent>\n * <StatCard label=\"Revenue\" value=\"$12,400\" delta={{ value: \"+8%\", direction: \"up\" }} />\n * </CardContent>\n * </Card>\n *\n * @example\n * // Clickable card in a project grid (interactive hover effect):\n * <Card interactive onClick={() => router.push(`/projects/${id}`)}>\n * <CardHeader>\n * <CardTitle>{project.name}</CardTitle>\n * </CardHeader>\n * </Card>\n *\n * @example\n * // Flat card for a sidebar panel section (no shadow):\n * <Card variant=\"flat\" className=\"p-ds-05\">\n * <p className=\"text-surface-fg-muted text-ds-sm\">No recent activity</p>\n * </Card>\n * // These are just a few ways — feel free to combine props creatively!\n */\nconst accentColorMap: Record<string, string> = {\n default: 'var(--color-accent-9)',\n secondary: 'var(--color-secondary-9)',\n error: 'var(--color-error-9)',\n success: 'var(--color-success-9)',\n warning: 'var(--color-warning-9)',\n info: 'var(--color-info-9)',\n}\n\nexport interface CardProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n VariantProps<typeof cardVariants> {\n interactive?: boolean\n /** Position of the accent border strip */\n accent?: 'left' | 'top' | 'right' | 'bottom'\n /** Semantic color key or any CSS color string for the accent strip. Requires `accent` to be set. @default 'default' */\n accentColor?: 'default' | 'secondary' | 'error' | 'success' | 'warning' | 'info' | (string & {})\n /** Width of the accent strip in pixels @default 3 */\n accentWidth?: 2 | 3 | 4 | 6\n}\n\nexport type { CardSize }\n\nconst accentSizeClasses: Record<string, Record<number, string>> = {\n left: { 2: 'w-[2px]', 3: 'w-[3px]', 4: 'w-[4px]', 6: 'w-[6px]' },\n top: { 2: 'h-[2px]', 3: 'h-[3px]', 4: 'h-[4px]', 6: 'h-[6px]' },\n right: { 2: 'w-[2px]', 3: 'w-[3px]', 4: 'w-[4px]', 6: 'w-[6px]' },\n bottom: { 2: 'h-[2px]', 3: 'h-[3px]', 4: 'h-[4px]', 6: 'h-[6px]' },\n}\n\nconst accentPositionClasses: Record<string, string> = {\n left: 'left-0 top-0 bottom-0 rounded-l-ds-lg',\n top: 'top-0 left-0 right-0 rounded-t-ds-lg',\n right: 'right-0 top-0 bottom-0 rounded-r-ds-lg',\n bottom: 'bottom-0 left-0 right-0 rounded-b-ds-lg',\n}\n\nfunction getAccentPositionClasses(position: string, width: number): string {\n return `${accentPositionClasses[position] ?? ''} ${accentSizeClasses[position]?.[width] ?? ''}`\n}\n\nfunction resolveAccentColor(color: string): string {\n return accentColorMap[color] ?? color\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n ({ className, variant, color, size, interactive, accent, accentColor = 'default', accentWidth = 3, children, ...props }, ref) => {\n const resolvedSize: CardSize = size ?? 'md'\n const classes = cn(\n cardVariants({ variant, color, size }),\n accent && 'relative overflow-hidden',\n interactive && 'hover:shadow-raised-hover hover:border-surface-border-strong cursor-pointer transition-shadow duration-fast-02 ease-productive-standard',\n className,\n )\n\n const accentEl = accent ? (\n <motion.span\n aria-hidden=\"true\"\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n transition={tweens.fade}\n className={cn('absolute pointer-events-none bg-[var(--card-accent-bg)]', getAccentPositionClasses(accent, accentWidth))}\n style={{ '--card-accent-bg': resolveAccentColor(accentColor) } as React.CSSProperties}\n />\n ) : null\n\n const content = (\n <CardSizeContext.Provider value={resolvedSize}>\n {accentEl}\n {children}\n </CardSizeContext.Provider>\n )\n\n if (interactive) {\n return (\n <motion.div\n ref={ref}\n whileHover={{ y: -3 }}\n whileTap={{ scale: 0.98 }}\n transition={springs.snappy}\n className={classes}\n {...motionProps(props)}\n >\n {content}\n </motion.div>\n )\n }\n\n return (\n <div ref={ref} className={classes} {...props}>\n {content}\n </div>\n )\n },\n)\nCard.displayName = 'Card'\n\nconst headerSizeClasses: Record<CardSize, string> = {\n sm: 'p-ds-05',\n md: 'p-ds-06',\n lg: 'p-ds-07',\n}\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const size = React.useContext(CardSizeContext)\n return (\n <div\n ref={ref}\n className={cn('flex flex-col space-y-ds-02b', headerSizeClasses[size], className)}\n {...props}\n />\n )\n})\nCardHeader.displayName = 'CardHeader'\n\nconst CardTitle = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('font-sans font-semibold leading-ds-none tracking-normal text-surface-fg', className)}\n {...props}\n />\n))\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('text-ds-md text-surface-fg-muted', className)}\n {...props}\n />\n))\nCardDescription.displayName = 'CardDescription'\n\nconst contentSizeClasses: Record<CardSize, string> = {\n sm: 'p-ds-05 pt-0',\n md: 'p-ds-06 pt-0',\n lg: 'p-ds-07 pt-0',\n}\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const size = React.useContext(CardSizeContext)\n return (\n <div ref={ref} className={cn(contentSizeClasses[size], className)} {...props} />\n )\n})\nCardContent.displayName = 'CardContent'\n\nconst footerSizeClasses: Record<CardSize, string> = {\n sm: 'p-ds-05 pt-0',\n md: 'p-ds-06 pt-0',\n lg: 'p-ds-07 pt-0',\n}\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const size = React.useContext(CardSizeContext)\n return (\n <div\n ref={ref}\n className={cn('flex items-center', footerSizeClasses[size], className)}\n {...props}\n />\n )\n})\nCardFooter.displayName = 'CardFooter'\n\nexport { Card, CardContent,CardDescription, CardFooter, CardHeader, CardTitle, cardVariants }\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { ScaleBand, ScaleLinear, ScalePoint, ScaleTime } from 'd3-scale';
|
|
3
3
|
export type AnyScale = ScaleLinear<number, number> | ScaleBand<string> | ScalePoint<string> | ScaleTime<number, number>;
|
|
4
4
|
interface AxisProps {
|
|
5
5
|
scale: AnyScale;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"axes.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/axes.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"axes.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/axes.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAK7E,MAAM,MAAM,QAAQ,GAChB,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GAC3B,SAAS,CAAC,MAAM,CAAC,GACjB,UAAU,CAAC,MAAM,CAAC,GAClB,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAE7B,UAAU,SAAS;IACjB,KAAK,EAAE,QAAQ,CAAA;IACf,WAAW,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAA;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,WAAW,EACX,SAAS,EACT,SAAS,EACT,UAAU,EACV,KAAK,EACL,SAAS,GACV,EAAE,SAAS,2CAoDX;yBA5De,IAAI"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid-lines.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/grid-lines.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"grid-lines.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/grid-lines.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAGtD,KAAK,aAAa,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAE5E,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAM,EACN,MAAM,EACN,MAAM,EACN,UAAiB,EACjB,QAAgB,GACjB,EAAE,cAAc,2CAiChB;yBAxCe,SAAS"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/legend.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/legend.tsx"],"names":[],"mappings":"AAIA,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,WAAW;IACnB,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,QAAmB,EAAE,SAAS,EAAE,EAAE,WAAW,2CAsB5E;yBAtBe,MAAM;;;AAyBtB,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -20,5 +20,5 @@ export declare function useChartTooltip(): {
|
|
|
20
20
|
show: (x: number, y: number, content: React.ReactNode) => void;
|
|
21
21
|
hide: () => void;
|
|
22
22
|
};
|
|
23
|
-
export type {
|
|
23
|
+
export type { ChartTooltipProps, TooltipState };
|
|
24
24
|
//# sourceMappingURL=tooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,UAAU,YAAY;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,YAAY,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,iBAAiB,kDAkBnE;yBAlBe,YAAY;;;AAqB5B,yCAAyC;AACzC,wBAAgB,eAAe;;cAQA,MAAM,KAAK,MAAM,WAAW,KAAK,CAAC,SAAS;;EASzE;AAED,YAAY,EAAE,iBAAiB,EAAC,YAAY,EAAE,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"area-chart.d.ts","sourceRoot":"","sources":["../../../src/ui/charts/area-chart.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"area-chart.d.ts","sourceRoot":"","sources":["../../../src/ui/charts/area-chart.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAG1D,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5F,iBAAiB;IACjB,IAAI,EAAE,SAAS,EAAE,CAAA;IACjB,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,gDAAgD;IAChD,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mBAAmB;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,kBAAkB;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uBAAuB;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mBAAmB;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,mBAAmB;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAOD,eAAO,MAAM,SAAS,uFAoWrB,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { ChartColor, DataPoint } from './_internal/types';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
export interface BarChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'color'> {
|
|
5
5
|
/** Data array */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bar-chart.d.ts","sourceRoot":"","sources":["../../../src/ui/charts/bar-chart.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"bar-chart.d.ts","sourceRoot":"","sources":["../../../src/ui/charts/bar-chart.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,OAAO,KAAK,EAAE,UAAU,EAAC,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAG7D,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACrG,iBAAiB;IACjB,IAAI,EAAE,SAAS,EAAE,CAAA;IACjB,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,iFAAiF;IACjF,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACvB,sBAAsB;IACtB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACvC,4BAA4B;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wBAAwB;IACxB,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,GAAG,MAAM,GAAG,MAAM,EAAE,CAAA;IACrD,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mBAAmB;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,mBAAmB;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,QAAQ,sFAgRpB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart-container.d.ts","sourceRoot":"","sources":["../../../src/ui/charts/chart-container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"chart-container.d.ts","sourceRoot":"","sources":["../../../src/ui/charts/chart-container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAGpD,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACjG,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oBAAoB;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4EAA4E;IAC5E,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,8EAA8E;IAC9E,QAAQ,EAAE,CAAC,UAAU,EAAE;QACrB,KAAK,EAAE,MAAM,CAAA;QACb,MAAM,EAAE,MAAM,CAAA;QACd,MAAM,EAAE,WAAW,CAAA;KACpB,KAAK,KAAK,CAAC,SAAS,CAAA;CACtB;AAED,eAAO,MAAM,cAAc,4FAoD1B,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gauge-chart.d.ts","sourceRoot":"","sources":["../../../src/ui/charts/gauge-chart.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"gauge-chart.d.ts","sourceRoot":"","sources":["../../../src/ui/charts/gauge-chart.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACvG,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,mCAAmC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAA;IACjD,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAID,eAAO,MAAM,UAAU,wFAsHtB,CAAA"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
export {
|
|
2
|
+
export { Legend, type LegendItem, type LegendProps } from './_internal/legend';
|
|
3
|
+
export { AreaChart, type AreaChartProps } from './area-chart';
|
|
3
4
|
export { BarChart, type BarChartProps } from './bar-chart';
|
|
5
|
+
export { ChartContainer, type ChartContainerProps } from './chart-container';
|
|
6
|
+
export { GaugeChart, type GaugeChartProps } from './gauge-chart';
|
|
4
7
|
export { LineChart, type LineChartProps } from './line-chart';
|
|
5
|
-
export { AreaChart, type AreaChartProps } from './area-chart';
|
|
6
8
|
export { PieChart, type PieChartProps } from './pie-chart';
|
|
7
|
-
export { Sparkline, type SparklineProps } from './sparkline';
|
|
8
|
-
export { GaugeChart, type GaugeChartProps } from './gauge-chart';
|
|
9
9
|
export { RadarChart, type RadarChartProps } from './radar-chart';
|
|
10
|
-
export {
|
|
10
|
+
export { Sparkline, type SparklineProps } from './sparkline';
|
|
11
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/charts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/charts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAC9E,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7D,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAC5E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7D,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAC1D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAA"}
|