@flikk/ui 1.0.0-beta.31 → 1.0.0-beta.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +295 -22
- package/dist/components/ai/AgentRequest/AgentRequest.animations.d.ts +25 -0
- package/dist/components/ai/AgentRequest/AgentRequest.animations.js +81 -0
- package/dist/components/ai/AgentRequest/AgentRequest.d.ts +3 -0
- package/dist/components/ai/AgentRequest/AgentRequest.js +435 -0
- package/dist/components/ai/AgentRequest/AgentRequest.theme.d.ts +2 -0
- package/dist/components/ai/AgentRequest/AgentRequest.theme.js +106 -0
- package/dist/components/ai/AgentRequest/AgentRequest.types.d.ts +241 -0
- package/dist/components/ai/AgentRequest/index.d.ts +3 -0
- package/dist/components/ai/CodeBlock/CodeBlock.theme.js +1 -1
- package/dist/components/ai/PromptInput/PromptInput.js +2 -2
- package/dist/components/ai/PromptInput/PromptInput.theme.js +2 -2
- package/dist/components/ai/PromptSuggestion/PromptSuggestion.theme.js +2 -2
- package/dist/components/ai/Reasoning/Reasoning.js +27 -3
- package/dist/components/ai/Reasoning/Reasoning.theme.d.ts +6 -0
- package/dist/components/ai/Reasoning/Reasoning.theme.js +36 -0
- package/dist/components/ai/Reasoning/Reasoning.types.d.ts +58 -5
- package/dist/components/ai/Reasoning/ReasoningTrace.d.ts +11 -0
- package/dist/components/ai/Reasoning/ReasoningTrace.js +84 -0
- package/dist/components/ai/Reasoning/index.d.ts +2 -1
- package/dist/components/ai/StreamingResponse/AnimatedText.d.ts +7 -0
- package/dist/components/ai/StreamingResponse/AnimatedText.js +8 -7
- package/dist/components/ai/StreamingResponse/MarkdownRenderer.d.ts +5 -0
- package/dist/components/ai/StreamingResponse/MarkdownRenderer.js +4 -4
- package/dist/components/ai/StreamingResponse/StreamingCursor.d.ts +2 -2
- package/dist/components/ai/StreamingResponse/StreamingCursor.js +10 -7
- package/dist/components/ai/StreamingResponse/StreamingResponse.animations.d.ts +10 -0
- package/dist/components/ai/StreamingResponse/StreamingResponse.animations.js +59 -33
- package/dist/components/ai/StreamingResponse/StreamingResponse.js +13 -7
- package/dist/components/ai/StreamingResponse/StreamingResponse.types.d.ts +33 -2
- package/dist/components/ai/StreamingResponse/StreamingSurface.d.ts +13 -0
- package/dist/components/ai/StreamingResponse/StreamingSurface.js +38 -0
- package/dist/components/ai/StreamingResponse/WordAnimationContext.d.ts +5 -0
- package/dist/components/ai/StreamingResponse/WordAnimationContext.js +5 -4
- package/dist/components/ai/StreamingResponse/index.d.ts +4 -2
- package/dist/components/ai/TokenCounter/TokenCounter.theme.js +1 -1
- package/dist/components/ai/index.d.ts +3 -2
- package/dist/components/ai/index.js +4 -0
- package/dist/components/canvas/BaseNode.js +1 -1
- package/dist/components/canvas/CanvasToolbar.js +0 -1
- package/dist/components/canvas/Edge.js +2 -2
- package/dist/components/canvas/NodeControls.js +0 -1
- package/dist/components/canvas/NodeRenderer.js +2 -2
- package/dist/components/charts/ActivityRings/ActivityRings.js +2 -2
- package/dist/components/charts/ActivityRings/ActivityRings.theme.js +1 -1
- package/dist/components/charts/AreaChart/AreaChart.js +3 -3
- package/dist/components/charts/AreaChart/AreaChart.theme.js +3 -3
- package/dist/components/charts/BarChart/BarChart.js +4 -4
- package/dist/components/charts/ComboChart/BarRenderer.js +2 -2
- package/dist/components/charts/ComboChart/BarRenderer.types.d.ts +1 -1
- package/dist/components/charts/ComboChart/ComboChartCanvas.js +1 -1
- package/dist/components/charts/ComboChart/LineRenderer.js +1 -1
- package/dist/components/charts/ComboChart/LineRenderer.types.d.ts +1 -1
- package/dist/components/charts/DonutChart/DonutChart.theme.js +4 -4
- package/dist/components/charts/DonutChart/MultiSegmentDonutChart.theme.js +1 -1
- package/dist/components/charts/Heatmap/Heatmap.js +49 -42
- package/dist/components/charts/Heatmap/Heatmap.theme.d.ts +6 -2
- package/dist/components/charts/Heatmap/Heatmap.theme.js +20 -8
- package/dist/components/charts/Heatmap/Heatmap.types.d.ts +49 -82
- package/dist/components/charts/Heatmap/HeatmapCell.js +30 -81
- package/dist/components/charts/Heatmap/HeatmapLegend.d.ts +7 -6
- package/dist/components/charts/Heatmap/HeatmapLegend.js +6 -6
- package/dist/components/charts/Heatmap/index.d.ts +1 -1
- package/dist/components/charts/Heatmap/utils/heatmapUtils.d.ts +7 -12
- package/dist/components/charts/Heatmap/utils/heatmapUtils.js +16 -61
- package/dist/components/charts/Heatmap/utils/heatmapUtils.test.d.ts +1 -0
- package/dist/components/charts/HorizontalBarChart/HorizontalBarChart.js +1 -1
- package/dist/components/charts/LineChart/LineChart.js +2 -2
- package/dist/components/charts/LollipopChart/LollipopChart.js +1 -1
- package/dist/components/charts/RadarChart/RadarChart.js +1 -1
- package/dist/components/charts/StackedBarChart/StackedBarChart.js +3 -3
- package/dist/components/charts/hooks/useChartAccessibility.js +9 -6
- package/dist/components/charts/index.d.ts +4 -8
- package/dist/components/charts/index.js +2 -4
- package/dist/components/charts/shared/ChartText/ChartText.theme.js +1 -1
- package/dist/components/charts/shared/index.d.ts +1 -1
- package/dist/components/charts/theme/chart.theme.js +3 -3
- package/dist/components/charts/utils/animation-utils.d.ts +12 -7
- package/dist/components/charts/utils/animation-utils.js +19 -19
- package/dist/components/core/Accordion/Accordion.theme.js +1 -1
- package/dist/components/core/Alert/Alert.animations.d.ts +11 -4
- package/dist/components/core/Alert/Alert.animations.js +11 -4
- package/dist/components/core/Alert/Alert.js +16 -2
- package/dist/components/core/Alert/Alert.theme.js +1 -1
- package/dist/components/core/Alert/Alert.types.d.ts +4 -2
- package/dist/components/core/AlertDialog/AlertDialog.js +2 -2
- package/dist/components/core/Avatar/Avatar.theme.js +1 -1
- package/dist/components/core/Badge/Badge.animations.d.ts +0 -5
- package/dist/components/core/Badge/Badge.animations.js +5 -84
- package/dist/components/core/Badge/Badge.d.ts +7 -4
- package/dist/components/core/Badge/Badge.js +27 -64
- package/dist/components/core/Badge/Badge.theme.js +8 -12
- package/dist/components/core/Badge/Badge.types.d.ts +18 -34
- package/dist/components/core/Breadcrumbs/Breadcrumbs.theme.js +4 -4
- package/dist/components/core/Button/Button.js +7 -43
- package/dist/components/core/Button/Button.theme.js +2 -2
- package/dist/components/core/Button/Button.types.d.ts +8 -12
- package/dist/components/core/Button/index.d.ts +0 -2
- package/dist/components/core/Calendar/Calendar.theme.js +1 -1
- package/dist/components/core/Calendar/CalendarMini/CalendarMini.theme.js +2 -2
- package/dist/components/core/Card/Card.js +7 -2
- package/dist/components/core/Card/Card.theme.js +29 -1
- package/dist/components/core/Card/Card.types.d.ts +20 -0
- package/dist/components/core/Card/CardBody.js +9 -1
- package/dist/components/core/Card/CardContext.d.ts +13 -0
- package/dist/components/core/Card/CardContext.js +14 -0
- package/dist/components/core/Card/CardHeader.js +4 -1
- package/dist/components/core/ContextMenu/ContextMenu.theme.js +4 -3
- package/dist/components/core/ContextMenu/ContextMenu.types.d.ts +8 -1
- package/dist/components/core/ContextMenu/ContextMenuSub.d.ts +11 -1
- package/dist/components/core/ContextMenu/ContextMenuSub.js +35 -22
- package/dist/components/core/ContextMenu/ContextMenuSubBody.js +14 -3
- package/dist/components/core/ContextMenu/ContextMenuSubTrigger.js +21 -8
- package/dist/components/core/DragDrop/DragDrop.theme.js +2 -2
- package/dist/components/core/Drawer/Drawer.theme.js +1 -1
- package/dist/components/core/Drawer/DrawerHeader.js +0 -1
- package/dist/components/core/Dropdown/DropdownMenu.js +22 -7
- package/dist/components/core/Link/Link.js +1 -1
- package/dist/components/core/Masonry/Masonry.theme.js +1 -1
- package/dist/components/core/MenuItem/MenuItem.js +2 -1
- package/dist/components/core/MenuItem/MenuItem.theme.js +13 -1
- package/dist/components/core/Message/Message.js +2 -0
- package/dist/components/core/Message/Message.theme.js +3 -3
- package/dist/components/core/Modal/Modal.animations.d.ts +1 -1
- package/dist/components/core/Modal/Modal.animations.js +50 -11
- package/dist/components/core/Modal/Modal.js +5 -1
- package/dist/components/core/Modal/Modal.theme.js +1 -1
- package/dist/components/core/Modal/ModalHeader.js +0 -1
- package/dist/components/core/ModalStack/ModalStackModal.js +3 -1
- package/dist/components/core/NavItem/NavItem.js +3 -2
- package/dist/components/core/NavItem/NavItem.theme.js +1 -1
- package/dist/components/core/OfflineIndicator/OfflineIndicator.theme.js +4 -2
- package/dist/components/core/PageHeading/PageHeading.theme.js +1 -1
- package/dist/components/core/Pagination/Pagination.theme.js +2 -2
- package/dist/components/core/Pill/Pill.js +2 -1
- package/dist/components/core/Pill/Pill.theme.js +4 -2
- package/dist/components/core/Popover/PopoverBody.js +16 -5
- package/dist/components/core/Progress/Progress.d.ts +0 -25
- package/dist/components/core/Progress/Progress.js +79 -11
- package/dist/components/core/Progress/Progress.theme.js +17 -0
- package/dist/components/core/Progress/Progress.types.d.ts +47 -1
- package/dist/components/core/Rating/Rating.theme.js +1 -1
- package/dist/components/core/Rating/Rating.types.d.ts +3 -2
- package/dist/components/core/ScrollArea/ScrollArea.js +1 -1
- package/dist/components/core/ScrollArea/ScrollArea.theme.js +1 -1
- package/dist/components/core/Segmented/Segmented.theme.js +3 -3
- package/dist/components/core/Segmented/SegmentedContext.js +1 -0
- package/dist/components/core/Sidebar/Sidebar.js +5 -2
- package/dist/components/core/Sidebar/Sidebar.theme.js +2 -2
- package/dist/components/core/Sidebar/SidebarContent.js +1 -1
- package/dist/components/core/Sidebar/SidebarHeader.js +1 -1
- package/dist/components/core/Sidebar/SidebarSearch.js +2 -2
- package/dist/components/core/Sidebar/SidebarToggle.js +1 -1
- package/dist/components/core/Sidebar/SidebarUserProfile.js +1 -1
- package/dist/components/core/Sortable/Sortable.theme.js +1 -1
- package/dist/components/core/Tabs/Tabs.theme.js +1 -1
- package/dist/components/core/Tag/Tag.theme.js +1 -1
- package/dist/components/core/Toast/ToastProvider.js +1 -1
- package/dist/components/core/Tree/Tree.theme.js +1 -1
- package/dist/components/core/index.d.ts +0 -2
- package/dist/components/core/index.js +0 -4
- package/dist/components/core/shared/ChartTooltip/ChartTooltip.animations.d.ts +4 -0
- package/dist/components/core/shared/ChartTooltip/ChartTooltip.animations.js +20 -0
- package/dist/components/{charts → core}/shared/ChartTooltip/ChartTooltip.js +1 -1
- package/dist/components/core/shared/Ripple.d.ts +16 -0
- package/dist/components/core/shared/Ripple.js +141 -0
- package/dist/components/data-display/GanttChart/GanttChart.theme.js +6 -6
- package/dist/components/data-display/GanttChart/GanttTaskBar.js +1 -1
- package/dist/components/data-display/GanttChart/GanttTimelineHeader.js +1 -1
- package/dist/components/data-display/GanttChart/GanttToolbar.js +0 -1
- package/dist/components/data-display/KPI/KPI.js +11 -20
- package/dist/components/data-display/KPI/KPI.theme.js +8 -4
- package/dist/components/data-display/Metric/Metric.theme.js +4 -4
- package/dist/components/data-display/Table/Table.theme.js +2 -2
- package/dist/components/data-display/Table/TableColumnManager.js +1 -2
- package/dist/components/data-display/Table/TableContext.js +1 -0
- package/dist/components/data-display/Table/TableFilter.js +9 -2
- package/dist/components/data-display/Table/TableSelectionHeader.js +1 -1
- package/dist/components/data-display/Timeline/Timeline.theme.js +1 -1
- package/dist/components/effects/CustomCursor/CustomCursor.d.ts +1 -1
- package/dist/components/effects/CustomCursor/CustomCursor.js +1 -1
- package/dist/components/effects/CustomCursor/CustomCursor.theme.js +4 -4
- package/dist/components/effects/Neumorphic/InsetCircleButton.js +1 -1
- package/dist/components/effects/Overlay/Overlay.js +7 -3
- package/dist/components/effects/index.d.ts +0 -32
- package/dist/components/effects/index.js +0 -16
- package/dist/components/effects/shared/ShaderCanvas/ShaderCanvas.d.ts +0 -2
- package/dist/components/effects/shared/ShaderCanvas/ShaderCanvas.js +1 -93
- package/dist/components/effects/shared/ShaderCanvas/ShaderCanvas.types.d.ts +0 -10
- package/dist/components/effects/shared/ShaderCanvas/index.d.ts +1 -1
- package/dist/components/effects/shared/index.d.ts +1 -3
- package/dist/components/effects/shared/shaderNoise.glsl.d.ts +1 -1
- package/dist/components/effects/shared/shaderNoise.glsl.js +2 -11
- package/dist/components/forms/Checkbox/Checkbox.theme.js +1 -1
- package/dist/components/forms/ColorPicker/ColorPickerHeader.js +1 -1
- package/dist/components/forms/ColorPicker/ColorPickerImage.js +1 -1
- package/dist/components/forms/Combobox/Combobox.js +2 -0
- package/dist/components/forms/DateRangePicker/DateRangePicker.theme.js +1 -1
- package/dist/components/forms/DateRangePicker/DateRangePickerContext.js +1 -0
- package/dist/components/forms/FileUpload/FileUpload.theme.js +2 -2
- package/dist/components/forms/FileUpload/FileUploadProgress.theme.js +1 -1
- package/dist/components/forms/InputAddress/InputAddress.types.d.ts +2 -2
- package/dist/components/forms/Radio/Radio.theme.js +1 -1
- package/dist/components/forms/RichTextEditor/RichTextEditor.d.ts +12 -16
- package/dist/components/forms/RichTextEditor/RichTextEditor.js +165 -1680
- package/dist/components/forms/RichTextEditor/RichTextEditor.theme.d.ts +12 -56
- package/dist/components/forms/RichTextEditor/RichTextEditor.theme.js +60 -118
- package/dist/components/forms/RichTextEditor/RichTextEditor.types.d.ts +62 -126
- package/dist/components/forms/RichTextEditor/RichTextLinkField.d.ts +18 -0
- package/dist/components/forms/RichTextEditor/RichTextLinkField.js +46 -0
- package/dist/components/forms/RichTextEditor/RichTextToolbar.d.ts +15 -0
- package/dist/components/forms/RichTextEditor/RichTextToolbar.js +93 -0
- package/dist/components/forms/RichTextEditor/editorCommands.d.ts +50 -0
- package/dist/components/forms/RichTextEditor/editorCommands.js +58 -0
- package/dist/components/forms/RichTextEditor/editorState.d.ts +19 -0
- package/dist/components/forms/RichTextEditor/editorState.js +103 -0
- package/dist/components/forms/RichTextEditor/index.d.ts +5 -3
- package/dist/components/forms/RichTextEditor/sanitizeHtml.d.ts +38 -0
- package/dist/components/forms/RichTextEditor/sanitizeHtml.js +179 -0
- package/dist/components/forms/RichTextEditor/sanitizeHtml.test.d.ts +1 -0
- package/dist/components/forms/Select/Select.js +4 -4
- package/dist/components/forms/Select/Select.types.d.ts +70 -7
- package/dist/components/forms/Select/useSelectState.d.ts +9 -3
- package/dist/components/forms/Select/useSelectState.js +4 -1
- package/dist/components/forms/SelectableCard/SelectableCard.js +2 -1
- package/dist/components/forms/SelectableCard/SelectableCard.theme.js +1 -1
- package/dist/components/forms/Switch/Switch.theme.js +2 -2
- package/dist/components/forms/TimePicker/TimePicker.theme.js +1 -1
- package/dist/components/forms/TimePicker/TimePickerTrigger.js +1 -1
- package/dist/components/forms/forms.theme.js +19 -5
- package/dist/components/forms/index.js +1 -0
- package/dist/components/generative/FormShell.d.ts +22 -0
- package/dist/components/generative/FormShell.js +102 -0
- package/dist/components/generative/GenerativeView.d.ts +52 -1
- package/dist/components/generative/GenerativeView.js +203 -11
- package/dist/components/generative/actions.d.ts +5 -0
- package/dist/components/generative/ai-sdk/index.d.ts +1 -0
- package/dist/components/generative/ai-sdk/index.js +1 -0
- package/dist/components/generative/ai-sdk/useGenerativeChat.d.ts +52 -0
- package/dist/components/generative/ai-sdk/useGenerativeChat.js +73 -0
- package/dist/components/generative/ai-sdk/useGenerativeChat.test.d.ts +1 -0
- package/dist/components/generative/fieldBinding.d.ts +31 -0
- package/dist/components/generative/fieldBinding.js +33 -0
- package/dist/components/generative/fieldBinding.test.d.ts +1 -0
- package/dist/components/generative/formScope.d.ts +71 -0
- package/dist/components/generative/formScope.js +135 -0
- package/dist/components/generative/index.d.ts +4 -0
- package/dist/components/generative/index.js +4 -0
- package/dist/components/generative/registry.d.ts +2 -0
- package/dist/components/generative/registry.js +10 -10
- package/dist/components/generative/schema.generated.js +178 -292
- package/dist/components/generative/toToolResult.d.ts +21 -0
- package/dist/components/generative/toToolResult.js +15 -0
- package/dist/components/generative/toToolResult.test.d.ts +1 -0
- package/dist/components/generative/validate.d.ts +10 -1
- package/dist/components/generative/validate.js +126 -11
- package/dist/components/layout/Grid/Grid.js +1 -0
- package/dist/components/layout/Section/Section.theme.js +1 -1
- package/dist/components/layout/Stack/Stack.js +1 -0
- package/dist/generative.schema.json +178 -292
- package/dist/index.js +1 -4
- package/dist/registry.json +2599 -2375
- package/dist/shadcn-compat.css +5 -5
- package/dist/styles/theme.test.d.ts +1 -0
- package/dist/styles.css +1 -1
- package/dist/test/render.d.ts +17 -0
- package/dist/themes/precision.css +232 -0
- package/dist/tools.json +179 -294
- package/dist/utils/index.d.ts +0 -1
- package/package.json +31 -1
- package/src/global.scss +21 -28
- package/src/styles/theme.css +124 -41
- package/src/styles/theme.test.ts +119 -0
- package/tailwind.preset.cjs +30 -20
- package/dist/components/charts/FunnelChart/FunnelChart.animations.d.ts +0 -35
- package/dist/components/charts/FunnelChart/FunnelChart.animations.js +0 -59
- package/dist/components/charts/FunnelChart/FunnelChart.d.ts +0 -8
- package/dist/components/charts/FunnelChart/FunnelChart.js +0 -410
- package/dist/components/charts/FunnelChart/FunnelChart.theme.d.ts +0 -2
- package/dist/components/charts/FunnelChart/FunnelChart.theme.js +0 -12
- package/dist/components/charts/FunnelChart/FunnelChart.types.d.ts +0 -105
- package/dist/components/charts/FunnelChart/index.d.ts +0 -4
- package/dist/components/charts/ScatterPlot/ScatterPlot.d.ts +0 -9
- package/dist/components/charts/ScatterPlot/ScatterPlot.js +0 -208
- package/dist/components/charts/ScatterPlot/ScatterPlot.theme.d.ts +0 -18
- package/dist/components/charts/ScatterPlot/ScatterPlot.theme.js +0 -42
- package/dist/components/charts/ScatterPlot/ScatterPlot.types.d.ts +0 -60
- package/dist/components/charts/ScatterPlot/ScatterPlot.types.js +0 -19
- package/dist/components/charts/ScatterPlot/index.d.ts +0 -3
- package/dist/components/core/Button/Button.ripple.d.ts +0 -71
- package/dist/components/core/Button/Button.ripple.js +0 -236
- package/dist/components/core/Calendar/CalendarEvent/CalendarEvent.d.ts +0 -4
- package/dist/components/core/Calendar/CalendarEvent/CalendarEvent.theme.d.ts +0 -12
- package/dist/components/core/Calendar/CalendarEvent/CalendarEvent.types.d.ts +0 -23
- package/dist/components/core/Calendar/CalendarEvent/index.d.ts +0 -2
- package/dist/components/core/CardStack/CardStack.animations.d.ts +0 -47
- package/dist/components/core/CardStack/CardStack.d.ts +0 -3
- package/dist/components/core/CardStack/CardStack.js +0 -187
- package/dist/components/core/CardStack/CardStack.theme.d.ts +0 -6
- package/dist/components/core/CardStack/CardStack.theme.js +0 -33
- package/dist/components/core/CardStack/CardStack.types.d.ts +0 -139
- package/dist/components/core/CardStack/index.d.ts +0 -7
- package/dist/components/core/Carousel/Carousel.d.ts +0 -3
- package/dist/components/core/Carousel/Carousel.js +0 -83
- package/dist/components/core/Carousel/Carousel.theme.d.ts +0 -10
- package/dist/components/core/Carousel/Carousel.theme.js +0 -20
- package/dist/components/core/Carousel/Carousel.types.d.ts +0 -113
- package/dist/components/core/Carousel/CarouselBody.d.ts +0 -4
- package/dist/components/core/Carousel/CarouselBody.js +0 -59
- package/dist/components/core/Carousel/CarouselContext.d.ts +0 -3
- package/dist/components/core/Carousel/CarouselContext.js +0 -13
- package/dist/components/core/Carousel/CarouselItem.d.ts +0 -4
- package/dist/components/core/Carousel/CarouselItem.js +0 -11
- package/dist/components/core/Carousel/CarouselNext.d.ts +0 -4
- package/dist/components/core/Carousel/CarouselNext.js +0 -16
- package/dist/components/core/Carousel/CarouselPrevious.d.ts +0 -4
- package/dist/components/core/Carousel/CarouselPrevious.js +0 -16
- package/dist/components/core/Carousel/index.d.ts +0 -3
- package/dist/components/effects/ColorPanels/ColorPanels.d.ts +0 -8
- package/dist/components/effects/ColorPanels/ColorPanels.js +0 -66
- package/dist/components/effects/ColorPanels/ColorPanels.shaders.d.ts +0 -12
- package/dist/components/effects/ColorPanels/ColorPanels.shaders.js +0 -218
- package/dist/components/effects/ColorPanels/ColorPanels.types.d.ts +0 -29
- package/dist/components/effects/ColorPanels/ColorPanels.types.js +0 -3
- package/dist/components/effects/ColorPanels/index.d.ts +0 -2
- package/dist/components/effects/FlutedGlass/FlutedGlass.d.ts +0 -9
- package/dist/components/effects/FlutedGlass/FlutedGlass.js +0 -80
- package/dist/components/effects/FlutedGlass/FlutedGlass.shaders.d.ts +0 -12
- package/dist/components/effects/FlutedGlass/FlutedGlass.shaders.js +0 -335
- package/dist/components/effects/FlutedGlass/FlutedGlass.types.d.ts +0 -61
- package/dist/components/effects/FlutedGlass/FlutedGlass.types.js +0 -16
- package/dist/components/effects/FlutedGlass/index.d.ts +0 -3
- package/dist/components/effects/GlassEffect/GlassEffect.d.ts +0 -15
- package/dist/components/effects/GlassEffect/GlassEffect.js +0 -38
- package/dist/components/effects/GlassEffect/GlassEffect.types.d.ts +0 -19
- package/dist/components/effects/GlassEffect/index.d.ts +0 -2
- package/dist/components/effects/GlassSurface/GlassSurface.d.ts +0 -8
- package/dist/components/effects/GlassSurface/GlassSurface.js +0 -250
- package/dist/components/effects/GlassSurface/GlassSurface.types.d.ts +0 -66
- package/dist/components/effects/GlassSurface/index.d.ts +0 -2
- package/dist/components/effects/GodRays/GodRays.d.ts +0 -8
- package/dist/components/effects/GodRays/GodRays.js +0 -68
- package/dist/components/effects/GodRays/GodRays.shaders.d.ts +0 -10
- package/dist/components/effects/GodRays/GodRays.shaders.js +0 -128
- package/dist/components/effects/GodRays/GodRays.types.d.ts +0 -25
- package/dist/components/effects/GodRays/GodRays.types.js +0 -3
- package/dist/components/effects/GodRays/index.d.ts +0 -2
- package/dist/components/effects/GridPattern/GridPattern.d.ts +0 -18
- package/dist/components/effects/GridPattern/GridPattern.js +0 -65
- package/dist/components/effects/GridPattern/GridPattern.types.d.ts +0 -47
- package/dist/components/effects/GridPattern/index.d.ts +0 -2
- package/dist/components/effects/HalftoneCmyk/HalftoneCmyk.d.ts +0 -10
- package/dist/components/effects/HalftoneCmyk/HalftoneCmyk.js +0 -78
- package/dist/components/effects/HalftoneCmyk/HalftoneCmyk.shaders.d.ts +0 -22
- package/dist/components/effects/HalftoneCmyk/HalftoneCmyk.shaders.js +0 -239
- package/dist/components/effects/HalftoneCmyk/HalftoneCmyk.types.d.ts +0 -52
- package/dist/components/effects/HalftoneCmyk/index.d.ts +0 -2
- package/dist/components/effects/HalftoneDots/HalftoneDots.d.ts +0 -9
- package/dist/components/effects/HalftoneDots/HalftoneDots.js +0 -68
- package/dist/components/effects/HalftoneDots/HalftoneDots.shaders.d.ts +0 -13
- package/dist/components/effects/HalftoneDots/HalftoneDots.shaders.js +0 -296
- package/dist/components/effects/HalftoneDots/HalftoneDots.types.d.ts +0 -43
- package/dist/components/effects/HalftoneDots/HalftoneDots.types.js +0 -12
- package/dist/components/effects/HalftoneDots/index.d.ts +0 -3
- package/dist/components/effects/ImageDithering/ImageDithering.d.ts +0 -9
- package/dist/components/effects/ImageDithering/ImageDithering.js +0 -68
- package/dist/components/effects/ImageDithering/ImageDithering.shaders.d.ts +0 -12
- package/dist/components/effects/ImageDithering/ImageDithering.shaders.js +0 -117
- package/dist/components/effects/ImageDithering/ImageDithering.types.d.ts +0 -30
- package/dist/components/effects/ImageDithering/ImageDithering.types.js +0 -8
- package/dist/components/effects/ImageDithering/index.d.ts +0 -3
- package/dist/components/effects/MagneticElement/MagneticElement.d.ts +0 -30
- package/dist/components/effects/MagneticElement/MagneticElement.js +0 -111
- package/dist/components/effects/MagneticElement/MagneticElement.types.d.ts +0 -44
- package/dist/components/effects/MagneticElement/index.d.ts +0 -2
- package/dist/components/effects/Metaballs/Metaballs.d.ts +0 -8
- package/dist/components/effects/Metaballs/Metaballs.js +0 -59
- package/dist/components/effects/Metaballs/Metaballs.shaders.d.ts +0 -10
- package/dist/components/effects/Metaballs/Metaballs.shaders.js +0 -102
- package/dist/components/effects/Metaballs/Metaballs.types.d.ts +0 -16
- package/dist/components/effects/Metaballs/Metaballs.types.js +0 -3
- package/dist/components/effects/Metaballs/index.d.ts +0 -2
- package/dist/components/effects/PaperTexture/PaperTexture.d.ts +0 -9
- package/dist/components/effects/PaperTexture/PaperTexture.js +0 -61
- package/dist/components/effects/PaperTexture/PaperTexture.shaders.d.ts +0 -22
- package/dist/components/effects/PaperTexture/PaperTexture.shaders.js +0 -145
- package/dist/components/effects/PaperTexture/PaperTexture.types.d.ts +0 -19
- package/dist/components/effects/PaperTexture/index.d.ts +0 -2
- package/dist/components/effects/PulsingBorder/PulsingBorder.d.ts +0 -27
- package/dist/components/effects/PulsingBorder/PulsingBorder.js +0 -174
- package/dist/components/effects/PulsingBorder/PulsingBorder.shaders.d.ts +0 -14
- package/dist/components/effects/PulsingBorder/PulsingBorder.shaders.js +0 -258
- package/dist/components/effects/PulsingBorder/PulsingBorder.types.d.ts +0 -75
- package/dist/components/effects/PulsingBorder/PulsingBorder.types.js +0 -3
- package/dist/components/effects/PulsingBorder/index.d.ts +0 -2
- package/dist/components/effects/SmokeRing/SmokeRing.d.ts +0 -8
- package/dist/components/effects/SmokeRing/SmokeRing.js +0 -62
- package/dist/components/effects/SmokeRing/SmokeRing.shaders.d.ts +0 -14
- package/dist/components/effects/SmokeRing/SmokeRing.shaders.js +0 -130
- package/dist/components/effects/SmokeRing/SmokeRing.types.d.ts +0 -22
- package/dist/components/effects/SmokeRing/SmokeRing.types.js +0 -3
- package/dist/components/effects/SmokeRing/index.d.ts +0 -2
- package/dist/components/effects/StaticGradientMesh/StaticGradientMesh.d.ts +0 -9
- package/dist/components/effects/StaticGradientMesh/StaticGradientMesh.js +0 -59
- package/dist/components/effects/StaticGradientMesh/StaticGradientMesh.shaders.d.ts +0 -14
- package/dist/components/effects/StaticGradientMesh/StaticGradientMesh.shaders.js +0 -129
- package/dist/components/effects/StaticGradientMesh/StaticGradientMesh.types.d.ts +0 -23
- package/dist/components/effects/StaticGradientMesh/StaticGradientMesh.types.js +0 -3
- package/dist/components/effects/StaticGradientMesh/index.d.ts +0 -2
- package/dist/components/effects/Water/Water.d.ts +0 -9
- package/dist/components/effects/Water/Water.js +0 -65
- package/dist/components/effects/Water/Water.shaders.d.ts +0 -11
- package/dist/components/effects/Water/Water.shaders.js +0 -123
- package/dist/components/effects/Water/Water.types.d.ts +0 -25
- package/dist/components/effects/Water/index.d.ts +0 -2
- package/dist/components/effects/shared/bayerMatrices.glsl.d.ts +0 -10
- package/dist/components/effects/shared/bayerMatrices.glsl.js +0 -44
- package/dist/components/effects/shared/imageUV.glsl.d.ts +0 -12
- package/dist/components/effects/shared/imageUV.glsl.js +0 -26
- package/dist/components/forms/RichTextEditor/RichTextEditor.animations.d.ts +0 -7
- package/dist/components/forms/RichTextEditor/RichTextEditor.animations.js +0 -32
- package/dist/utils/calendarUtils.d.ts +0 -60
- /package/dist/components/{charts → core}/shared/ChartTooltip/ChartTooltip.d.ts +0 -0
- /package/dist/components/{charts → core}/shared/ChartTooltip/ChartTooltip.theme.d.ts +0 -0
- /package/dist/components/{charts → core}/shared/ChartTooltip/ChartTooltip.theme.js +0 -0
- /package/dist/components/{charts → core}/shared/ChartTooltip/ChartTooltip.types.d.ts +0 -0
- /package/dist/components/{charts → core}/shared/ChartTooltip/ChartTooltipContent.d.ts +0 -0
- /package/dist/components/{charts → core}/shared/ChartTooltip/index.d.ts +0 -0
|
@@ -1,208 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
|
-
import { useRef, useMemo, useCallback } from 'react';
|
|
4
|
-
import { motion } from 'motion/react';
|
|
5
|
-
import { cn } from '../../../utils/cn.js';
|
|
6
|
-
import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
|
|
7
|
-
import { useChartAccessibility } from '../hooks/useChartAccessibility.js';
|
|
8
|
-
import { useChartDimensions } from '../hooks/useChartDimensions.js';
|
|
9
|
-
import { XAxis } from '../shared/ChartAxis/XAxis.js';
|
|
10
|
-
import { YAxis } from '../shared/ChartAxis/YAxis.js';
|
|
11
|
-
import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
|
|
12
|
-
import { resolveLegendPosition, ChartLegend } from '../shared/ChartLegend/ChartLegend.js';
|
|
13
|
-
import { SCATTER_PLOT_DEFAULTS } from './ScatterPlot.types.js';
|
|
14
|
-
import { getCategoryColor, scatterPlotTheme } from './ScatterPlot.theme.js';
|
|
15
|
-
import { SCATTER_POINT_DURATION, SCATTER_POINT_STAGGER } from '../utils/animation-utils.js';
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* ScatterPlot Component
|
|
19
|
-
*
|
|
20
|
-
* Displays correlation between two variables with optional bubble sizing.
|
|
21
|
-
* Now uses shared axis components with tick marks and value labels like other charts.
|
|
22
|
-
*/
|
|
23
|
-
const ScatterPlot = ({ data, xLabel, yLabel, dotRadius: propDotRadius, pointSize, // @deprecated
|
|
24
|
-
showGrid = SCATTER_PLOT_DEFAULTS.showGrid, showXAxis = SCATTER_PLOT_DEFAULTS.showXAxis, showYAxis = SCATTER_PLOT_DEFAULTS.showYAxis, showTooltip = SCATTER_PLOT_DEFAULTS.showTooltip, legend, colors, minValue: propMinValue, maxValue: propMaxValue, theme: themeOverrides, className, svgClassName, dotClassName, gridClassName, axisClassName, title, description, enableKeyboardNavigation = SCATTER_PLOT_DEFAULTS.enableKeyboardNavigation, width, height, ...props }) => {
|
|
25
|
-
var _a;
|
|
26
|
-
const theme = { ...scatterPlotTheme, ...(themeOverrides || {}) };
|
|
27
|
-
const chartColors = colors || theme.colors || scatterPlotTheme.colors;
|
|
28
|
-
// Use dotRadius, fallback to pointSize for backward compatibility
|
|
29
|
-
const dotRadiusValue = (_a = propDotRadius !== null && propDotRadius !== void 0 ? propDotRadius : pointSize) !== null && _a !== void 0 ? _a : SCATTER_PLOT_DEFAULTS.dotRadius;
|
|
30
|
-
// Responsive container dimensions. `measured` gates dot mount so motion
|
|
31
|
-
// captures scale-in geometry at real cx/cy, not the 600×400 fallback (dots
|
|
32
|
-
// would otherwise fly in from the wrong positions on cold load).
|
|
33
|
-
const containerRef = useRef(null);
|
|
34
|
-
const { dimensions, measured } = useChartDimensions(containerRef);
|
|
35
|
-
// Calculate ranges and categories
|
|
36
|
-
const { xMin, xMax, yMin, yMax, categories, validData } = useMemo(() => {
|
|
37
|
-
// Filter out invalid data points
|
|
38
|
-
const valid = data.filter((d) => typeof d.x === 'number' &&
|
|
39
|
-
typeof d.y === 'number' &&
|
|
40
|
-
!isNaN(d.x) &&
|
|
41
|
-
!isNaN(d.y) &&
|
|
42
|
-
isFinite(d.x) &&
|
|
43
|
-
isFinite(d.y));
|
|
44
|
-
if (valid.length === 0) {
|
|
45
|
-
return {
|
|
46
|
-
xMin: propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0,
|
|
47
|
-
xMax: propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : 100,
|
|
48
|
-
yMin: propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0,
|
|
49
|
-
yMax: propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : 100,
|
|
50
|
-
categories: [],
|
|
51
|
-
validData: [],
|
|
52
|
-
};
|
|
53
|
-
}
|
|
54
|
-
const xValues = valid.map((d) => d.x);
|
|
55
|
-
const yValues = valid.map((d) => d.y);
|
|
56
|
-
const cats = Array.from(new Set(valid.map((d) => d.category).filter(Boolean)));
|
|
57
|
-
const minX = propMinValue !== null && propMinValue !== void 0 ? propMinValue : Math.min(...xValues);
|
|
58
|
-
const maxX = propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : Math.max(...xValues);
|
|
59
|
-
const minY = propMinValue !== null && propMinValue !== void 0 ? propMinValue : Math.min(...yValues);
|
|
60
|
-
const maxY = propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : Math.max(...yValues);
|
|
61
|
-
return {
|
|
62
|
-
xMin: minX,
|
|
63
|
-
xMax: maxX === minX ? minX + 1 : maxX, // Avoid same min/max
|
|
64
|
-
yMin: minY,
|
|
65
|
-
yMax: maxY === minY ? minY + 1 : maxY, // Avoid same min/max
|
|
66
|
-
categories: cats,
|
|
67
|
-
validData: valid,
|
|
68
|
-
};
|
|
69
|
-
}, [data, propMinValue, propMaxValue]);
|
|
70
|
-
// Chart dimensions with margins (pixel-based like other charts)
|
|
71
|
-
const margin = {
|
|
72
|
-
top: 20,
|
|
73
|
-
right: 20,
|
|
74
|
-
bottom: showXAxis ? 60 : 20,
|
|
75
|
-
left: showYAxis ? 60 : 20,
|
|
76
|
-
};
|
|
77
|
-
const innerWidth = dimensions.width - margin.left - margin.right;
|
|
78
|
-
const innerHeight = dimensions.height - margin.top - margin.bottom;
|
|
79
|
-
// Scale functions (pixel-based)
|
|
80
|
-
const scaleX = useCallback((value) => {
|
|
81
|
-
const ratio = (value - xMin) / (xMax - xMin);
|
|
82
|
-
return margin.left + ratio * innerWidth;
|
|
83
|
-
}, [xMin, xMax, margin.left, innerWidth]);
|
|
84
|
-
const scaleY = useCallback((value) => {
|
|
85
|
-
const ratio = (value - yMin) / (yMax - yMin);
|
|
86
|
-
return margin.top + innerHeight - ratio * innerHeight;
|
|
87
|
-
}, [yMin, yMax, margin.top, innerHeight]);
|
|
88
|
-
// Get color for category
|
|
89
|
-
const getColor = (category) => {
|
|
90
|
-
if (!category)
|
|
91
|
-
return chartColors[0];
|
|
92
|
-
const index = categories.indexOf(category);
|
|
93
|
-
return getCategoryColor(chartColors, index);
|
|
94
|
-
};
|
|
95
|
-
// Tooltip setup
|
|
96
|
-
const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
|
|
97
|
-
const { tooltipData, tooltipRef, handleMouseEnter, handleMouseMove, handleMouseLeave, } = useTooltipPosition({
|
|
98
|
-
containerRef,
|
|
99
|
-
isMobile,
|
|
100
|
-
});
|
|
101
|
-
// Accessibility setup (create config from data for accessibility)
|
|
102
|
-
const config = useMemo(() => {
|
|
103
|
-
const configObj = {};
|
|
104
|
-
categories.forEach((cat, idx) => {
|
|
105
|
-
configObj[cat] = {
|
|
106
|
-
label: cat,
|
|
107
|
-
color: getCategoryColor(chartColors, idx),
|
|
108
|
-
};
|
|
109
|
-
});
|
|
110
|
-
return configObj;
|
|
111
|
-
}, [categories, chartColors]);
|
|
112
|
-
const legendItems = useMemo(() => categories.map((cat, idx) => ({
|
|
113
|
-
key: cat,
|
|
114
|
-
label: cat,
|
|
115
|
-
color: getCategoryColor(chartColors, idx),
|
|
116
|
-
})), [categories, chartColors]);
|
|
117
|
-
const resolvedLegendPosition = resolveLegendPosition(legend, config);
|
|
118
|
-
const chartDataForAccessibility = useMemo(() => {
|
|
119
|
-
return validData.map((point) => ({
|
|
120
|
-
category: point.category || 'Point',
|
|
121
|
-
x: point.x,
|
|
122
|
-
y: point.y,
|
|
123
|
-
size: point.size,
|
|
124
|
-
label: point.label,
|
|
125
|
-
}));
|
|
126
|
-
}, [validData]);
|
|
127
|
-
const { chartAccessibilityProps, descriptionProps, handleMouseInteraction, } = useChartAccessibility({
|
|
128
|
-
chartType: 'scatter',
|
|
129
|
-
data: chartDataForAccessibility,
|
|
130
|
-
config,
|
|
131
|
-
title,
|
|
132
|
-
description,
|
|
133
|
-
enableKeyboardNavigation,
|
|
134
|
-
});
|
|
135
|
-
// Generate X-axis data for axis component
|
|
136
|
-
const xAxisData = useMemo(() => {
|
|
137
|
-
// Create tick marks for X axis
|
|
138
|
-
const tickCount = 5;
|
|
139
|
-
const range = xMax - xMin;
|
|
140
|
-
const step = range / (tickCount - 1);
|
|
141
|
-
return Array.from({ length: tickCount }, (_, i) => ({
|
|
142
|
-
name: (xMin + i * step).toFixed(0),
|
|
143
|
-
value: xMin + i * step,
|
|
144
|
-
}));
|
|
145
|
-
}, [xMin, xMax]);
|
|
146
|
-
// Return empty state if no data
|
|
147
|
-
if (validData.length === 0) {
|
|
148
|
-
const emptyMessage = data.length === 0 ? 'No data available' : 'No valid data points';
|
|
149
|
-
return (jsx("div", { ref: containerRef, className: cn(theme.containerStyle, className), style: {
|
|
150
|
-
minHeight: height === undefined ? '400px' : undefined,
|
|
151
|
-
width: width !== undefined ? (typeof width === "number" ? `${width}px` : width) : undefined,
|
|
152
|
-
height: height !== undefined ? (typeof height === "number" ? `${height}px` : height) : undefined,
|
|
153
|
-
}, role: "img", "aria-label": `Empty scatter plot: ${emptyMessage}`, ...props, children: jsx("div", { className: theme.emptyStateStyle, children: emptyMessage }) }));
|
|
154
|
-
}
|
|
155
|
-
return (jsxs("div", { ref: containerRef, className: cn(theme.containerStyle, className), style: {
|
|
156
|
-
minHeight: height === undefined ? '400px' : undefined,
|
|
157
|
-
width: width !== undefined ? (typeof width === "number" ? `${width}px` : width) : undefined,
|
|
158
|
-
height: height !== undefined ? (typeof height === "number" ? `${height}px` : height) : undefined,
|
|
159
|
-
}, ...chartAccessibilityProps, ...props, children: [resolvedLegendPosition === 'top' && (jsx(ChartLegend, { items: legendItems, className: "shrink-0 mb-4" })), jsxs("svg", { width: dimensions.width, height: dimensions.height, className: cn(theme.svgStyle, svgClassName), ...descriptionProps, children: [jsx(YAxis, { show: showYAxis, min: yMin, max: yMax, x: margin.left, y: margin.top, height: innerHeight, showGrid: showGrid, gridWidth: innerWidth, gridClassName: gridClassName, tickCount: 5, className: cn(axisClassName) }), measured &&
|
|
160
|
-
validData.map((point, index) => {
|
|
161
|
-
const cx = scaleX(point.x);
|
|
162
|
-
const cy = scaleY(point.y);
|
|
163
|
-
const size = point.size ? Math.sqrt(point.size) / 2 : dotRadiusValue;
|
|
164
|
-
const pointColor = getColor(point.category);
|
|
165
|
-
return (jsx(motion.circle, { cx: cx, cy: cy, r: size, fill: pointColor, className: cn(theme.dotStyle, dotClassName), strokeWidth: "0.5", initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { delay: index * SCATTER_POINT_STAGGER, duration: SCATTER_POINT_DURATION }, whileHover: { scale: 1.5, opacity: 1 }, onMouseEnter: (e) => {
|
|
166
|
-
if (showTooltip) {
|
|
167
|
-
const content = {
|
|
168
|
-
category: point.label || point.category || `Point ${index + 1}`,
|
|
169
|
-
series: [
|
|
170
|
-
{
|
|
171
|
-
key: 'x',
|
|
172
|
-
label: xLabel || 'X',
|
|
173
|
-
value: point.x.toFixed(2),
|
|
174
|
-
color: pointColor,
|
|
175
|
-
},
|
|
176
|
-
{
|
|
177
|
-
key: 'y',
|
|
178
|
-
label: yLabel || 'Y',
|
|
179
|
-
value: point.y.toFixed(2),
|
|
180
|
-
color: pointColor,
|
|
181
|
-
},
|
|
182
|
-
...(point.size
|
|
183
|
-
? [
|
|
184
|
-
{
|
|
185
|
-
key: 'size',
|
|
186
|
-
label: 'Size',
|
|
187
|
-
value: point.size.toFixed(2),
|
|
188
|
-
color: pointColor,
|
|
189
|
-
},
|
|
190
|
-
]
|
|
191
|
-
: []),
|
|
192
|
-
],
|
|
193
|
-
};
|
|
194
|
-
// Pass SVG coordinates for proper positioning (especially in mobile/constrained containers)
|
|
195
|
-
const svgCoordinates = isMobile ? {
|
|
196
|
-
x: cx,
|
|
197
|
-
y: cy,
|
|
198
|
-
dimensions
|
|
199
|
-
} : undefined;
|
|
200
|
-
handleMouseEnter(e, content, svgCoordinates);
|
|
201
|
-
}
|
|
202
|
-
handleMouseInteraction();
|
|
203
|
-
}, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave }, index));
|
|
204
|
-
}), jsx(XAxis, { show: showXAxis, data: xAxisData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / (xAxisData.length - 1), categoryGap: 0, alignWithEdge: true, className: cn(axisClassName) }), xLabel && showXAxis && (jsx("text", { x: margin.left + innerWidth / 2, y: dimensions.height - 5, textAnchor: "middle", className: "text-sm fill-[var(--color-text-secondary)]", children: xLabel })), yLabel && showYAxis && (jsx("text", { x: 15, y: margin.top + innerHeight / 2, textAnchor: "middle", className: "text-sm fill-[var(--color-text-secondary)]", transform: `rotate(-90 15 ${margin.top + innerHeight / 2})`, children: yLabel }))] }), resolvedLegendPosition === 'bottom' && (jsx(ChartLegend, { items: legendItems, className: "shrink-0 mt-4" })), showTooltip && (jsx(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "scatter" }))] }));
|
|
205
|
-
};
|
|
206
|
-
ScatterPlot.displayName = 'ScatterPlot';
|
|
207
|
-
|
|
208
|
-
export { ScatterPlot };
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* ScatterPlot Theme - Uses CSS variables for production-ready styling
|
|
3
|
-
*/
|
|
4
|
-
export declare const scatterPlotTheme: {
|
|
5
|
-
containerStyle: string;
|
|
6
|
-
svgStyle: string;
|
|
7
|
-
emptyStateStyle: string;
|
|
8
|
-
gridLineStyle: string;
|
|
9
|
-
axisLineStyle: string;
|
|
10
|
-
axisLabelStyle: string;
|
|
11
|
-
dotStyle: string;
|
|
12
|
-
dotHoverStyle: string;
|
|
13
|
-
colors: string[];
|
|
14
|
-
};
|
|
15
|
-
/**
|
|
16
|
-
* Get fill color for category (supports both CSS variables and direct colors)
|
|
17
|
-
*/
|
|
18
|
-
export declare function getCategoryColor(colors: string[], categoryIndex: number): string;
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* ScatterPlot Theme - Uses CSS variables for production-ready styling
|
|
3
|
-
*/
|
|
4
|
-
const scatterPlotTheme = {
|
|
5
|
-
containerStyle: 'relative inline-flex flex-col items-center w-full',
|
|
6
|
-
svgStyle: 'overflow-visible',
|
|
7
|
-
emptyStateStyle: 'flex items-center justify-center h-full text-[var(--color-text-muted)] text-sm',
|
|
8
|
-
// Grid styles
|
|
9
|
-
gridLineStyle: 'stroke-[var(--color-border)]',
|
|
10
|
-
// Axis styles
|
|
11
|
-
axisLineStyle: 'stroke-[var(--color-text-secondary)]',
|
|
12
|
-
axisLabelStyle: 'fill-[var(--color-text-secondary)]',
|
|
13
|
-
// Data point styles
|
|
14
|
-
dotStyle: 'fill-opacity-70 stroke-white',
|
|
15
|
-
dotHoverStyle: 'fill-opacity-100',
|
|
16
|
-
// Default category colors using CSS variables
|
|
17
|
-
colors: [
|
|
18
|
-
'var(--color-primary)',
|
|
19
|
-
'var(--color-success)',
|
|
20
|
-
'var(--color-warning)',
|
|
21
|
-
'var(--color-danger)',
|
|
22
|
-
'hsl(262, 83%, 58%)', // violet
|
|
23
|
-
'hsl(328, 86%, 70%)', // pink
|
|
24
|
-
],
|
|
25
|
-
};
|
|
26
|
-
/**
|
|
27
|
-
* Get fill color for category (supports both CSS variables and direct colors)
|
|
28
|
-
*/
|
|
29
|
-
function getCategoryColor(colors, categoryIndex) {
|
|
30
|
-
const color = colors[categoryIndex % colors.length];
|
|
31
|
-
if (color &&
|
|
32
|
-
!color.startsWith("var(") &&
|
|
33
|
-
!color.startsWith("#") &&
|
|
34
|
-
!color.startsWith("rgb") &&
|
|
35
|
-
!color.startsWith("hsl") &&
|
|
36
|
-
color.includes("-")) {
|
|
37
|
-
return `var(--color-${color})`;
|
|
38
|
-
}
|
|
39
|
-
return color;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
export { getCategoryColor, scatterPlotTheme };
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import { StandardChartDisplayProps, BaseChartProps } from '../types/chart.types';
|
|
2
|
-
/**
|
|
3
|
-
* Data point for ScatterPlot
|
|
4
|
-
*/
|
|
5
|
-
export interface ScatterPlotDataPoint {
|
|
6
|
-
/** X-axis value */
|
|
7
|
-
x: number;
|
|
8
|
-
/** Y-axis value */
|
|
9
|
-
y: number;
|
|
10
|
-
/** Optional size for bubble chart effect */
|
|
11
|
-
size?: number;
|
|
12
|
-
/** Optional label */
|
|
13
|
-
label?: string;
|
|
14
|
-
/** Optional category for coloring */
|
|
15
|
-
category?: string;
|
|
16
|
-
}
|
|
17
|
-
/**
|
|
18
|
-
* ScatterPlot props - extends standardized chart props
|
|
19
|
-
*
|
|
20
|
-
* 🔴 `variant` is Omitted, not inherited: scatter points are flat, single-colour marks —
|
|
21
|
-
* there is no gradient/minimal treatment to select. Leaving the inherited prop in place
|
|
22
|
-
* would publish a control that silently does nothing (and would reach the generative
|
|
23
|
-
* schema, where an LLM would emit it). Add it back only alongside an implementation.
|
|
24
|
-
*/
|
|
25
|
-
export interface ScatterPlotProps extends Omit<StandardChartDisplayProps, 'variant'>, Omit<BaseChartProps, 'data' | 'config'> {
|
|
26
|
-
/** Data points */
|
|
27
|
-
data: ScatterPlotDataPoint[];
|
|
28
|
-
/** X-axis label */
|
|
29
|
-
xLabel?: string;
|
|
30
|
-
/** Y-axis label */
|
|
31
|
-
yLabel?: string;
|
|
32
|
-
/** Point size (if not using data.size) */
|
|
33
|
-
dotRadius?: number;
|
|
34
|
-
pointSize?: number;
|
|
35
|
-
/** Custom colors for categories (using CSS variables) */
|
|
36
|
-
colors?: string[];
|
|
37
|
-
/** Enable tooltip on hover */
|
|
38
|
-
showTooltip?: boolean;
|
|
39
|
-
/** className overrides for chart elements (shadcn approach) */
|
|
40
|
-
svgClassName?: string;
|
|
41
|
-
dotClassName?: string;
|
|
42
|
-
gridClassName?: string;
|
|
43
|
-
axisClassName?: string;
|
|
44
|
-
}
|
|
45
|
-
/**
|
|
46
|
-
* Default values using centralized defaults.
|
|
47
|
-
*
|
|
48
|
-
* 🔴 Picks explicitly rather than spreading `...CHART_DEFAULTS` — the spread pulled in a
|
|
49
|
-
* default for every other chart's props, so this object advertised values ScatterPlot
|
|
50
|
-
* never reads. List only what the component actually consumes.
|
|
51
|
-
*/
|
|
52
|
-
export declare const SCATTER_PLOT_DEFAULTS: {
|
|
53
|
-
readonly showGrid: true;
|
|
54
|
-
readonly showXAxis: true;
|
|
55
|
-
readonly showYAxis: true;
|
|
56
|
-
readonly enableKeyboardNavigation: true;
|
|
57
|
-
readonly dotRadius: 4;
|
|
58
|
-
readonly pointSize: 4;
|
|
59
|
-
readonly showTooltip: true;
|
|
60
|
-
};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { CHART_DEFAULTS } from '../types/chart.types.js';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Default values using centralized defaults.
|
|
5
|
-
*
|
|
6
|
-
* 🔴 Picks explicitly rather than spreading `...CHART_DEFAULTS` — the spread pulled in a
|
|
7
|
-
* default for every other chart's props, so this object advertised values ScatterPlot
|
|
8
|
-
* never reads. List only what the component actually consumes.
|
|
9
|
-
*/
|
|
10
|
-
const SCATTER_PLOT_DEFAULTS = {
|
|
11
|
-
showGrid: CHART_DEFAULTS.showGrid,
|
|
12
|
-
showXAxis: CHART_DEFAULTS.showXAxis,
|
|
13
|
-
showYAxis: CHART_DEFAULTS.showYAxis,
|
|
14
|
-
enableKeyboardNavigation: CHART_DEFAULTS.enableKeyboardNavigation,
|
|
15
|
-
dotRadius: 4,
|
|
16
|
-
showTooltip: true,
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
export { SCATTER_PLOT_DEFAULTS };
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import type { Transition } from "motion/react";
|
|
3
|
-
/**
|
|
4
|
-
* Available ripple effect types
|
|
5
|
-
*/
|
|
6
|
-
export type RippleEffectType = 'default' | 'aurora' | 'particle' | 'glass' | 'neon' | 'echo';
|
|
7
|
-
/**
|
|
8
|
-
* Ripple effect configuration
|
|
9
|
-
*/
|
|
10
|
-
export interface Ripple {
|
|
11
|
-
id: number;
|
|
12
|
-
x: number;
|
|
13
|
-
y: number;
|
|
14
|
-
layer?: number;
|
|
15
|
-
/** Pre-computed random scale factor for particle effect (0-1 range) */
|
|
16
|
-
randomScale?: number;
|
|
17
|
-
/** Pre-computed random duration offset for particle effect (0-1 range) */
|
|
18
|
-
randomDuration?: number;
|
|
19
|
-
}
|
|
20
|
-
export interface RippleConfig {
|
|
21
|
-
/** Scale multiplier for ripple expansion (default: 10) */
|
|
22
|
-
scale?: number;
|
|
23
|
-
/** Duration of ripple animation in milliseconds (default: 600) */
|
|
24
|
-
duration?: number;
|
|
25
|
-
/** Effect type for multi-layered ripples (default: 'default') */
|
|
26
|
-
effect?: RippleEffectType;
|
|
27
|
-
}
|
|
28
|
-
/**
|
|
29
|
-
* Custom hook for managing ripple effects on button clicks
|
|
30
|
-
*
|
|
31
|
-
* @param config - Optional ripple configuration
|
|
32
|
-
* @returns Object containing ripples array and createRipple handler
|
|
33
|
-
*
|
|
34
|
-
* @example
|
|
35
|
-
* ```tsx
|
|
36
|
-
* const { ripples, createRipple } = useRipple({ scale: 12, duration: 700 });
|
|
37
|
-
*
|
|
38
|
-
* <button onClick={createRipple}>
|
|
39
|
-
* {ripples.map((ripple) => (
|
|
40
|
-
* <RippleSpan key={ripple.id} ripple={ripple} />
|
|
41
|
-
* ))}
|
|
42
|
-
* </button>
|
|
43
|
-
* ```
|
|
44
|
-
*/
|
|
45
|
-
export declare function useRipple(config?: RippleConfig): {
|
|
46
|
-
ripples: Ripple[];
|
|
47
|
-
createRipple: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
48
|
-
buttonRef: React.RefObject<HTMLButtonElement | null>;
|
|
49
|
-
scale: number;
|
|
50
|
-
duration: number;
|
|
51
|
-
effect: RippleEffectType;
|
|
52
|
-
};
|
|
53
|
-
/**
|
|
54
|
-
* Get ripple color classes based on button variant and color
|
|
55
|
-
*/
|
|
56
|
-
export declare function getRippleColorClass(variant?: string, color?: string): string;
|
|
57
|
-
/**
|
|
58
|
-
* Get animation properties for specific ripple effect and layer
|
|
59
|
-
*/
|
|
60
|
-
export declare function getRippleAnimation(effect: RippleEffectType, ripple: Ripple, baseScale: number): {
|
|
61
|
-
initial: {
|
|
62
|
-
scale: number;
|
|
63
|
-
opacity: number;
|
|
64
|
-
};
|
|
65
|
-
animate: {
|
|
66
|
-
scale: number;
|
|
67
|
-
opacity: number;
|
|
68
|
-
};
|
|
69
|
-
transition: Transition;
|
|
70
|
-
className?: string;
|
|
71
|
-
};
|
|
@@ -1,236 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { useState, useRef, useEffect, useCallback } from 'react';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Custom hook for managing ripple effects on button clicks
|
|
6
|
-
*
|
|
7
|
-
* @param config - Optional ripple configuration
|
|
8
|
-
* @returns Object containing ripples array and createRipple handler
|
|
9
|
-
*
|
|
10
|
-
* @example
|
|
11
|
-
* ```tsx
|
|
12
|
-
* const { ripples, createRipple } = useRipple({ scale: 12, duration: 700 });
|
|
13
|
-
*
|
|
14
|
-
* <button onClick={createRipple}>
|
|
15
|
-
* {ripples.map((ripple) => (
|
|
16
|
-
* <RippleSpan key={ripple.id} ripple={ripple} />
|
|
17
|
-
* ))}
|
|
18
|
-
* </button>
|
|
19
|
-
* ```
|
|
20
|
-
*/
|
|
21
|
-
function useRipple(config = {}) {
|
|
22
|
-
const { scale = 10, duration = 600, effect = 'default' } = config;
|
|
23
|
-
const [ripples, setRipples] = useState([]);
|
|
24
|
-
const buttonRef = useRef(null);
|
|
25
|
-
const timeoutsRef = useRef([]);
|
|
26
|
-
// Cleanup all pending timeouts on unmount
|
|
27
|
-
useEffect(() => {
|
|
28
|
-
return () => {
|
|
29
|
-
timeoutsRef.current.forEach(clearTimeout);
|
|
30
|
-
};
|
|
31
|
-
}, []);
|
|
32
|
-
const createRipple = useCallback((event) => {
|
|
33
|
-
const button = buttonRef.current;
|
|
34
|
-
if (!button)
|
|
35
|
-
return;
|
|
36
|
-
// Calculate click position relative to button
|
|
37
|
-
const rect = button.getBoundingClientRect();
|
|
38
|
-
const x = event.clientX - rect.left;
|
|
39
|
-
const y = event.clientY - rect.top;
|
|
40
|
-
const baseId = Date.now();
|
|
41
|
-
let newRipples = [];
|
|
42
|
-
let maxDuration = duration;
|
|
43
|
-
// Create ripples based on effect type
|
|
44
|
-
switch (effect) {
|
|
45
|
-
case 'aurora':
|
|
46
|
-
// Triple layer with staggered timing
|
|
47
|
-
newRipples = [
|
|
48
|
-
{ id: baseId, x, y, layer: 1 },
|
|
49
|
-
{ id: baseId + 1, x, y, layer: 2 },
|
|
50
|
-
{ id: baseId + 2, x, y, layer: 3 },
|
|
51
|
-
];
|
|
52
|
-
maxDuration = 800; // Longest layer duration
|
|
53
|
-
break;
|
|
54
|
-
case 'particle':
|
|
55
|
-
// Multiple small ripples at random offsets (random values stored for stable renders)
|
|
56
|
-
newRipples = Array.from({ length: 6 }, (_, i) => ({
|
|
57
|
-
id: baseId + i,
|
|
58
|
-
x: x + (Math.random() - 0.5) * 20,
|
|
59
|
-
y: y + (Math.random() - 0.5) * 20,
|
|
60
|
-
layer: i + 1,
|
|
61
|
-
randomScale: Math.random(),
|
|
62
|
-
randomDuration: Math.random(),
|
|
63
|
-
}));
|
|
64
|
-
maxDuration = 700;
|
|
65
|
-
break;
|
|
66
|
-
case 'glass':
|
|
67
|
-
// Expanding outer + shrinking inner
|
|
68
|
-
newRipples = [
|
|
69
|
-
{ id: baseId, x, y, layer: 1 }, // Outer expanding
|
|
70
|
-
{ id: baseId + 1, x, y, layer: 2 }, // Inner shrinking
|
|
71
|
-
];
|
|
72
|
-
maxDuration = 600;
|
|
73
|
-
break;
|
|
74
|
-
case 'neon':
|
|
75
|
-
// Glowing multi-color layers
|
|
76
|
-
newRipples = [
|
|
77
|
-
{ id: baseId, x, y, layer: 1 }, // Inner glow
|
|
78
|
-
{ id: baseId + 1, x, y, layer: 2 }, // Middle
|
|
79
|
-
{ id: baseId + 2, x, y, layer: 3 }, // Outer halo
|
|
80
|
-
];
|
|
81
|
-
maxDuration = 700;
|
|
82
|
-
break;
|
|
83
|
-
case 'echo':
|
|
84
|
-
// Primary + delayed echoes
|
|
85
|
-
newRipples = [{ id: baseId, x, y, layer: 1 }];
|
|
86
|
-
maxDuration = 800;
|
|
87
|
-
// Spawn echo ripples with delays
|
|
88
|
-
timeoutsRef.current.push(setTimeout(() => {
|
|
89
|
-
setRipples((prev) => [...prev, { id: baseId + 10, x, y, layer: 2 }]);
|
|
90
|
-
}, 100), setTimeout(() => {
|
|
91
|
-
setRipples((prev) => [...prev, { id: baseId + 20, x, y, layer: 3 }]);
|
|
92
|
-
}, 200));
|
|
93
|
-
break;
|
|
94
|
-
case 'default':
|
|
95
|
-
default:
|
|
96
|
-
// Single ripple (original behavior)
|
|
97
|
-
newRipples = [{ id: baseId, x, y, layer: 1 }];
|
|
98
|
-
maxDuration = duration;
|
|
99
|
-
break;
|
|
100
|
-
}
|
|
101
|
-
setRipples((prev) => [...prev, ...newRipples]);
|
|
102
|
-
// Auto-remove all ripples after longest animation completes
|
|
103
|
-
timeoutsRef.current.push(setTimeout(() => {
|
|
104
|
-
setRipples((prev) => prev.filter((r) => r.id < baseId || r.id > baseId + 30));
|
|
105
|
-
}, maxDuration));
|
|
106
|
-
}, [duration, effect]);
|
|
107
|
-
return {
|
|
108
|
-
ripples,
|
|
109
|
-
createRipple,
|
|
110
|
-
buttonRef,
|
|
111
|
-
scale,
|
|
112
|
-
duration,
|
|
113
|
-
effect,
|
|
114
|
-
};
|
|
115
|
-
}
|
|
116
|
-
/**
|
|
117
|
-
* Get ripple color classes based on button variant and color
|
|
118
|
-
*/
|
|
119
|
-
function getRippleColorClass(variant, color) {
|
|
120
|
-
// For filled buttons, use white ripple for contrast
|
|
121
|
-
if (variant === "filled") {
|
|
122
|
-
return "bg-white/30";
|
|
123
|
-
}
|
|
124
|
-
// For outline/soft buttons, use color-matched ripple
|
|
125
|
-
switch (color) {
|
|
126
|
-
case "primary":
|
|
127
|
-
return "bg-[var(--color-primary)]/20";
|
|
128
|
-
case "danger":
|
|
129
|
-
return "bg-[var(--color-danger)]/20";
|
|
130
|
-
case "mono":
|
|
131
|
-
return "bg-[var(--color-mono-500)]/20";
|
|
132
|
-
default:
|
|
133
|
-
return "bg-[var(--color-primary)]/20";
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
/**
|
|
137
|
-
* Get animation properties for specific ripple effect and layer
|
|
138
|
-
*/
|
|
139
|
-
function getRippleAnimation(effect, ripple, baseScale) {
|
|
140
|
-
var _a, _b, _c;
|
|
141
|
-
const layer = (_a = ripple.layer) !== null && _a !== void 0 ? _a : 1;
|
|
142
|
-
switch (effect) {
|
|
143
|
-
case 'aurora':
|
|
144
|
-
// Triple layer with different speeds and opacities
|
|
145
|
-
if (layer === 1) {
|
|
146
|
-
return {
|
|
147
|
-
initial: { scale: 0, opacity: 0.5 },
|
|
148
|
-
animate: { scale: baseScale * 0.9, opacity: 0 },
|
|
149
|
-
transition: { duration: 0.4, ease: "easeOut" },
|
|
150
|
-
};
|
|
151
|
-
}
|
|
152
|
-
else if (layer === 2) {
|
|
153
|
-
return {
|
|
154
|
-
initial: { scale: 0, opacity: 0.3 },
|
|
155
|
-
animate: { scale: baseScale, opacity: 0 },
|
|
156
|
-
transition: { duration: 0.6, ease: "easeOut" },
|
|
157
|
-
};
|
|
158
|
-
}
|
|
159
|
-
else {
|
|
160
|
-
return {
|
|
161
|
-
initial: { scale: 0, opacity: 0.2 },
|
|
162
|
-
animate: { scale: baseScale * 1.2, opacity: 0 },
|
|
163
|
-
transition: { duration: 0.8, ease: "easeOut" },
|
|
164
|
-
};
|
|
165
|
-
}
|
|
166
|
-
case 'particle': {
|
|
167
|
-
// Use pre-computed random values from ripple creation for stable renders
|
|
168
|
-
const particleScale = baseScale * (0.7 + ((_b = ripple.randomScale) !== null && _b !== void 0 ? _b : 0.5) * 0.6);
|
|
169
|
-
const particleDelay = layer * 0.025;
|
|
170
|
-
const particleDuration = 0.5 + ((_c = ripple.randomDuration) !== null && _c !== void 0 ? _c : 0.5) * 0.2;
|
|
171
|
-
return {
|
|
172
|
-
initial: { scale: 0, opacity: 0.6 },
|
|
173
|
-
animate: { scale: particleScale, opacity: 0 },
|
|
174
|
-
transition: { duration: particleDuration, ease: "easeOut", delay: particleDelay },
|
|
175
|
-
};
|
|
176
|
-
}
|
|
177
|
-
case 'glass':
|
|
178
|
-
if (layer === 1) {
|
|
179
|
-
// Outer expanding ring
|
|
180
|
-
return {
|
|
181
|
-
initial: { scale: 0, opacity: 0.4 },
|
|
182
|
-
animate: { scale: baseScale, opacity: 0 },
|
|
183
|
-
transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }, // Custom easing
|
|
184
|
-
};
|
|
185
|
-
}
|
|
186
|
-
else {
|
|
187
|
-
// Inner collapsing circle
|
|
188
|
-
return {
|
|
189
|
-
initial: { scale: 1, opacity: 0.3 },
|
|
190
|
-
animate: { scale: 0, opacity: 0 },
|
|
191
|
-
transition: { duration: 0.6, ease: "easeIn" },
|
|
192
|
-
};
|
|
193
|
-
}
|
|
194
|
-
case 'neon':
|
|
195
|
-
// Layered glow effect with blur
|
|
196
|
-
if (layer === 1) {
|
|
197
|
-
return {
|
|
198
|
-
initial: { scale: 0, opacity: 0.7 },
|
|
199
|
-
animate: { scale: baseScale * 0.7, opacity: 0 },
|
|
200
|
-
transition: { duration: 0.5, ease: "easeOut" },
|
|
201
|
-
className: "blur-sm",
|
|
202
|
-
};
|
|
203
|
-
}
|
|
204
|
-
else if (layer === 2) {
|
|
205
|
-
return {
|
|
206
|
-
initial: { scale: 0, opacity: 0.5 },
|
|
207
|
-
animate: { scale: baseScale * 0.9, opacity: 0 },
|
|
208
|
-
transition: { duration: 0.6, ease: "easeOut" },
|
|
209
|
-
};
|
|
210
|
-
}
|
|
211
|
-
else {
|
|
212
|
-
return {
|
|
213
|
-
initial: { scale: 0, opacity: 0.3 },
|
|
214
|
-
animate: { scale: baseScale * 1.1, opacity: 0 },
|
|
215
|
-
transition: { duration: 0.7, ease: "easeOut" },
|
|
216
|
-
className: "blur-[2px]",
|
|
217
|
-
};
|
|
218
|
-
}
|
|
219
|
-
case 'echo':
|
|
220
|
-
// Delayed waves with increasing size
|
|
221
|
-
return {
|
|
222
|
-
initial: { scale: 0, opacity: 0.4 - layer * 0.1 },
|
|
223
|
-
animate: { scale: baseScale + layer * 0.3, opacity: 0 },
|
|
224
|
-
transition: { duration: 0.6, ease: "easeOut" },
|
|
225
|
-
};
|
|
226
|
-
case 'default':
|
|
227
|
-
default:
|
|
228
|
-
return {
|
|
229
|
-
initial: { scale: 0, opacity: 0.5 },
|
|
230
|
-
animate: { scale: baseScale, opacity: 0 },
|
|
231
|
-
transition: { duration: 0.6, ease: "easeOut" },
|
|
232
|
-
};
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
export { getRippleAnimation, getRippleColorClass, useRipple };
|