@cognite/aura 0.1.7 → 0.3.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/DESIGN.md +34 -92
- package/README.md +33 -0
- package/dist/colors.css +471 -214
- package/dist/components/index.d.ts +17 -33
- package/dist/components/index.js +315 -281
- package/dist/components/ui/core/accordion/accordion.d.ts +7 -7
- package/dist/components/ui/core/accordion/accordion.js +64 -62
- package/dist/components/ui/core/action-toolbar/action-toolbar.d.ts +41 -0
- package/dist/components/ui/core/action-toolbar/action-toolbar.js +176 -0
- package/dist/components/ui/core/alert/alert.d.ts +23 -12
- package/dist/components/ui/core/alert/alert.js +123 -120
- package/dist/components/ui/core/avatar/avatar.d.ts +12 -8
- package/dist/components/ui/core/avatar/avatar.js +10 -10
- package/dist/components/ui/core/badge/badge.d.ts +11 -8
- package/dist/components/ui/core/badge/badge.js +13 -13
- package/dist/components/ui/core/banner/banner.d.ts +18 -28
- package/dist/components/ui/core/banner/banner.js +6 -6
- package/dist/components/ui/core/breadcrumb/breadcrumb.d.ts +12 -0
- package/dist/components/ui/core/breadcrumb/breadcrumb.js +200 -0
- package/dist/components/ui/core/button/button.d.ts +8 -5
- package/dist/components/ui/core/button/button.js +22 -19
- package/dist/components/ui/core/button-group/button-group.d.ts +7 -6
- package/dist/components/ui/core/card/card.d.ts +18 -14
- package/dist/components/ui/core/card/card.js +131 -87
- package/dist/components/ui/core/chart/chart.d.ts +69 -0
- package/dist/components/ui/core/chart/chart.js +215 -0
- package/dist/components/ui/core/chart/index.d.ts +2 -0
- package/dist/components/ui/core/chart/index.js +8 -0
- package/dist/components/ui/core/checkbox/checkbox.d.ts +17 -0
- package/dist/components/ui/core/checkbox/checkbox.js +133 -0
- package/dist/components/ui/core/{badge/badge.metadata.d.ts → checkbox/checkbox.metadata.d.ts} +1 -1
- package/dist/components/ui/core/checkbox/checkbox.metadata.js +8 -0
- package/dist/components/ui/core/code-block/code-block.d.ts +6 -9
- package/dist/components/ui/core/code-block/code-block.js +52 -48
- package/dist/components/ui/core/collapsible/collapsible.d.ts +5 -3
- package/dist/components/ui/core/combobox/combobox.d.ts +2 -2
- package/dist/components/ui/core/command/command.d.ts +11 -78
- package/dist/components/ui/core/command/command.js +53 -52
- package/dist/components/ui/core/count/count.d.ts +9 -0
- package/dist/components/ui/core/count/count.js +32 -0
- package/dist/components/ui/core/date-time-pickers/date-range-picker/date-range-picker.d.ts +15 -0
- package/dist/components/ui/core/date-time-pickers/date-range-picker/date-range-picker.js +99 -0
- package/dist/components/ui/core/date-time-pickers/date-range-picker/index.d.ts +3 -0
- package/dist/components/ui/core/date-time-pickers/date-range-picker/types.d.ts +25 -0
- package/dist/components/ui/core/date-time-pickers/date-range-picker/use-date-range-picker.d.ts +4 -0
- package/dist/components/ui/core/date-time-pickers/date-range-picker/use-date-range-picker.js +82 -0
- package/dist/components/ui/core/date-time-pickers/date-time-range-picker/date-time-range-picker.d.ts +17 -0
- package/dist/components/ui/core/date-time-pickers/date-time-range-picker/date-time-range-picker.js +190 -0
- package/dist/components/ui/core/date-time-pickers/date-time-range-picker/index.d.ts +3 -0
- package/dist/components/ui/core/date-time-pickers/date-time-range-picker/types.d.ts +42 -0
- package/dist/components/ui/core/date-time-pickers/date-time-range-picker/use-date-time-range-picker.d.ts +3 -0
- package/dist/components/ui/core/date-time-pickers/date-time-range-picker/use-date-time-range-picker.js +161 -0
- package/dist/components/ui/core/date-time-pickers/index.d.ts +6 -0
- package/dist/components/ui/core/date-time-pickers/shared/am-pm-scroll/am-pm-scroll.d.ts +7 -0
- package/dist/components/ui/core/date-time-pickers/shared/am-pm-scroll/am-pm-scroll.js +57 -0
- package/dist/components/ui/core/date-time-pickers/shared/calendar/calendar.d.ts +13 -0
- package/dist/components/ui/core/date-time-pickers/shared/calendar/calendar.js +119 -0
- package/dist/components/ui/core/date-time-pickers/shared/calendar-header/calendar-header.d.ts +10 -0
- package/dist/components/ui/core/date-time-pickers/shared/calendar-header/calendar-header.js +93 -0
- package/dist/components/ui/core/date-time-pickers/shared/constants.d.ts +20 -0
- package/dist/components/ui/core/date-time-pickers/shared/constants.js +14 -0
- package/dist/components/ui/core/date-time-pickers/shared/date-time-input/date-time-input.d.ts +19 -0
- package/dist/components/ui/core/date-time-pickers/shared/date-time-input/date-time-input.js +99 -0
- package/dist/components/ui/core/date-time-pickers/shared/date-time-input/range-input-display.d.ts +12 -0
- package/dist/components/ui/core/date-time-pickers/shared/date-time-input/range-input-display.js +68 -0
- package/dist/components/ui/core/date-time-pickers/shared/hooks/use-popover-state.d.ts +12 -0
- package/dist/components/ui/core/date-time-pickers/shared/hooks/use-popover-state.js +40 -0
- package/dist/components/ui/core/date-time-pickers/shared/hooks/use-range-date-state.d.ts +29 -0
- package/dist/components/ui/core/date-time-pickers/shared/hooks/use-range-date-state.js +63 -0
- package/dist/components/ui/core/date-time-pickers/shared/hooks/use-range-step-manager.d.ts +8 -0
- package/dist/components/ui/core/date-time-pickers/shared/hooks/use-range-step-manager.js +19 -0
- package/dist/components/ui/core/date-time-pickers/shared/hooks/use-time-state.d.ts +17 -0
- package/dist/components/ui/core/date-time-pickers/shared/hooks/use-time-state.js +34 -0
- package/dist/components/ui/core/date-time-pickers/shared/scroll-cell-classes.d.ts +8 -0
- package/dist/components/ui/core/date-time-pickers/shared/scroll-cell-classes.js +7 -0
- package/dist/components/ui/core/date-time-pickers/shared/shortcuts-panel/shortcuts-panel.d.ts +13 -0
- package/dist/components/ui/core/date-time-pickers/shared/shortcuts-panel/shortcuts-panel.js +31 -0
- package/dist/components/ui/core/date-time-pickers/shared/time-picker-scroll/time-picker-scroll.d.ts +10 -0
- package/dist/components/ui/core/date-time-pickers/shared/time-picker-scroll/time-picker-scroll.js +52 -0
- package/dist/components/ui/core/date-time-pickers/utils/calendar-utils.d.ts +48 -0
- package/dist/components/ui/core/date-time-pickers/utils/calendar-utils.js +52 -0
- package/dist/components/ui/core/date-time-pickers/utils/date-range-utils.d.ts +26 -0
- package/dist/components/ui/core/date-time-pickers/utils/format-utils.d.ts +37 -0
- package/dist/components/ui/core/date-time-pickers/utils/segment-utils.d.ts +34 -0
- package/dist/components/ui/core/date-time-pickers/utils/time-utils.d.ts +43 -0
- package/dist/components/ui/core/date-time-pickers/utils/time-utils.js +15 -0
- package/dist/components/ui/core/date-time-pickers/utils/time-validation.d.ts +23 -0
- package/dist/components/ui/core/dialog/dialog.d.ts +10 -10
- package/dist/components/ui/core/dialog/dialog.js +12 -3
- package/dist/components/ui/core/dropdown-menu/dropdown-menu.d.ts +24 -47
- package/dist/components/ui/core/dropdown-menu/dropdown-menu.js +125 -123
- package/dist/components/ui/core/empty-state/empty-state.context.d.ts +10 -0
- package/dist/components/ui/core/empty-state/empty-state.context.js +8 -0
- package/dist/components/ui/core/empty-state/empty-state.d.ts +18 -0
- package/dist/components/ui/core/empty-state/empty-state.js +139 -0
- package/dist/components/ui/core/helper-text/helper-text.d.ts +7 -5
- package/dist/components/ui/core/hover-card/hover-card.d.ts +5 -7
- package/dist/components/ui/core/hover-card/hover-card.js +26 -25
- package/dist/components/ui/core/inline-citation/inline-citation.d.ts +10 -10
- package/dist/components/ui/core/inline-citation/inline-citation.js +65 -57
- package/dist/components/ui/core/input/input.d.ts +2 -1
- package/dist/components/ui/core/input-group/input-group.d.ts +17 -13
- package/dist/components/ui/core/input-group/input-group.js +35 -36
- package/dist/components/ui/core/kbd/kbd.d.ts +4 -0
- package/dist/components/ui/core/kbd/kbd.js +36 -0
- package/dist/components/ui/core/label/label.d.ts +3 -2
- package/dist/components/ui/core/loader/loader.d.ts +11 -3
- package/dist/components/ui/core/loader/loader.js +106 -107
- package/dist/components/ui/core/message/message.d.ts +18 -17
- package/dist/components/ui/core/message/message.js +15 -13
- package/dist/components/ui/core/pagination/pagination-size-context.d.ts +5 -0
- package/dist/components/ui/core/pagination/pagination-size-context.js +6 -0
- package/dist/components/ui/core/pagination/pagination-teleport.d.ts +11 -0
- package/dist/components/ui/core/pagination/pagination-teleport.js +108 -0
- package/dist/components/ui/core/pagination/pagination-teleport.utils.d.ts +1 -0
- package/dist/components/ui/core/pagination/pagination-teleport.utils.js +7 -0
- package/dist/components/ui/core/pagination/pagination.d.ts +41 -0
- package/dist/components/ui/core/pagination/pagination.js +335 -0
- package/dist/components/ui/core/popover/popover.d.ts +12 -16
- package/dist/components/ui/core/popover/popover.js +52 -51
- package/dist/components/ui/core/progress/progress.d.ts +7 -4
- package/dist/components/ui/core/prompt-input/prompt-input.d.ts +36 -103
- package/dist/components/ui/core/prompt-input/prompt-input.js +193 -180
- package/dist/components/ui/core/radio-group/radio-group.d.ts +20 -0
- package/dist/components/ui/core/radio-group/radio-group.js +113 -0
- package/dist/components/ui/core/reasoning/reasoning.d.ts +5 -5
- package/dist/components/ui/core/reasoning/reasoning.js +1 -1
- package/dist/components/ui/core/scroll-area/scroll-area.d.ts +4 -2
- package/dist/components/ui/core/search/search.d.ts +10 -0
- package/dist/components/ui/core/search/search.js +99 -0
- package/dist/components/ui/core/segmented-control/segmented-control.d.ts +20 -0
- package/dist/components/ui/core/segmented-control/segmented-control.js +172 -0
- package/dist/components/ui/core/select/select.d.ts +13 -13
- package/dist/components/ui/core/select/select.js +13 -10
- package/dist/components/ui/core/separator/separator.d.ts +2 -4
- package/dist/components/ui/core/separator/separator.js +4 -5
- package/dist/components/ui/core/shimmer/shimmer.d.ts +3 -5
- package/dist/components/ui/core/shimmer/shimmer.js +25 -26
- package/dist/components/ui/core/skeleton/skeleton.d.ts +2 -1
- package/dist/components/ui/core/sonner-toast/sonner-toast.d.ts +4 -0
- package/dist/components/ui/core/sonner-toast/sonner-toast.js +48 -0
- package/dist/components/ui/core/sources/sources.d.ts +3 -3
- package/dist/components/ui/core/sources/sources.js +6 -1
- package/dist/components/ui/core/switch/switch.d.ts +11 -0
- package/dist/components/ui/core/{button/button.metadata.d.ts → switch/switch.metadata.d.ts} +1 -1
- package/dist/components/ui/core/tabs/tabs.d.ts +27 -0
- package/dist/components/ui/core/tabs/tabs.js +224 -0
- package/dist/components/ui/core/tabs/tabs.utils.d.ts +2 -0
- package/dist/components/ui/core/tabs/tabs.utils.js +9 -0
- package/dist/components/ui/core/textarea/textarea.d.ts +2 -1
- package/dist/components/ui/core/textarea/textarea.js +20 -18
- package/dist/components/ui/core/tool/tool.d.ts +7 -6
- package/dist/components/ui/core/tool/tool.js +48 -44
- package/dist/components/ui/core/tooltip/tooltip.d.ts +6 -5
- package/dist/components/ui/core/tooltip/tooltip.js +10 -8
- package/dist/components/ui/core/topbar/topbar.d.ts +28 -0
- package/dist/components/ui/core/topbar/topbar.js +190 -0
- package/dist/eslint/index.d.ts +2 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +298 -273
- package/dist/lib/portal-container-context.d.ts +2 -1
- package/dist/lib/portal-container-context.js +1 -3
- package/dist/lib/utils.d.ts +11 -0
- package/dist/lib/utils.js +40 -29
- package/dist/styles.css +1 -1
- package/dist/styles.source.css +75 -8
- package/package.json +26 -5
- package/dist/components/ui/core/accordion/accordion.metadata.d.ts +0 -2
- package/dist/components/ui/core/accordion/accordion.metadata.js +0 -9
- package/dist/components/ui/core/alert/alert.metadata.d.ts +0 -2
- package/dist/components/ui/core/alert/alert.metadata.js +0 -9
- package/dist/components/ui/core/avatar/avatar.metadata.d.ts +0 -8
- package/dist/components/ui/core/avatar/avatar.metadata.js +0 -9
- package/dist/components/ui/core/badge/badge.metadata.js +0 -8
- package/dist/components/ui/core/banner/banner.metadata.d.ts +0 -2
- package/dist/components/ui/core/banner/banner.metadata.js +0 -9
- package/dist/components/ui/core/button/button.metadata.js +0 -9
- package/dist/components/ui/core/button-group/button-group.metadata.d.ts +0 -2
- package/dist/components/ui/core/button-group/button-group.metadata.js +0 -8
- package/dist/components/ui/core/card/card.metadata.d.ts +0 -8
- package/dist/components/ui/core/card/card.metadata.js +0 -9
- package/dist/components/ui/core/code-block/code-block.metadata.d.ts +0 -2
- package/dist/components/ui/core/code-block/code-block.metadata.js +0 -8
- package/dist/components/ui/core/collapsible/collapsible.metadata.d.ts +0 -2
- package/dist/components/ui/core/collapsible/collapsible.metadata.js +0 -9
- package/dist/components/ui/core/combobox/combobox.metadata.d.ts +0 -2
- package/dist/components/ui/core/command/command.metadata.d.ts +0 -2
- package/dist/components/ui/core/command/command.metadata.js +0 -9
- package/dist/components/ui/core/dialog/dialog.metadata.d.ts +0 -2
- package/dist/components/ui/core/dialog/dialog.metadata.js +0 -9
- package/dist/components/ui/core/dropdown-menu/dropdown-menu.metadata.d.ts +0 -2
- package/dist/components/ui/core/dropdown-menu/dropdown-menu.metadata.js +0 -9
- package/dist/components/ui/core/helper-text/helper-text.metadata.d.ts +0 -2
- package/dist/components/ui/core/helper-text/helper-text.metadata.js +0 -9
- package/dist/components/ui/core/hover-card/hover-card.metadata.d.ts +0 -2
- package/dist/components/ui/core/hover-card/hover-card.metadata.js +0 -8
- package/dist/components/ui/core/inline-citation/inline-citation.metadata.d.ts +0 -2
- package/dist/components/ui/core/inline-citation/inline-citation.metadata.js +0 -8
- package/dist/components/ui/core/input/input.metadata.d.ts +0 -2
- package/dist/components/ui/core/input/input.metadata.js +0 -9
- package/dist/components/ui/core/input-group/input-group.metadata.d.ts +0 -2
- package/dist/components/ui/core/input-group/input-group.metadata.js +0 -9
- package/dist/components/ui/core/label/label.metadata.d.ts +0 -2
- package/dist/components/ui/core/label/label.metadata.js +0 -9
- package/dist/components/ui/core/loader/loader.metadata.d.ts +0 -2
- package/dist/components/ui/core/loader/loader.metadata.js +0 -9
- package/dist/components/ui/core/message/message.metadata.d.ts +0 -2
- package/dist/components/ui/core/popover/popover.metadata.d.ts +0 -2
- package/dist/components/ui/core/popover/popover.metadata.js +0 -9
- package/dist/components/ui/core/progress/progress.metadata.d.ts +0 -2
- package/dist/components/ui/core/progress/progress.metadata.js +0 -9
- package/dist/components/ui/core/prompt-input/prompt-input.metadata.d.ts +0 -2
- package/dist/components/ui/core/prompt-input/prompt-input.metadata.js +0 -9
- package/dist/components/ui/core/reasoning/reasoning.metadata.d.ts +0 -2
- package/dist/components/ui/core/reasoning/reasoning.metadata.js +0 -8
- package/dist/components/ui/core/scroll-area/scroll-area.metadata.d.ts +0 -2
- package/dist/components/ui/core/scroll-area/scroll-area.metadata.js +0 -9
- package/dist/components/ui/core/select/select.metadata.d.ts +0 -2
- package/dist/components/ui/core/select/select.metadata.js +0 -9
- package/dist/components/ui/core/separator/separator.metadata.d.ts +0 -2
- package/dist/components/ui/core/separator/separator.metadata.js +0 -8
- package/dist/components/ui/core/shimmer/shimmer.metadata.d.ts +0 -2
- package/dist/components/ui/core/shimmer/shimmer.metadata.js +0 -9
- package/dist/components/ui/core/skeleton/skeleton.metadata.d.ts +0 -2
- package/dist/components/ui/core/skeleton/skeleton.metadata.js +0 -9
- package/dist/components/ui/core/sources/sources.metadata.d.ts +0 -2
- package/dist/components/ui/core/textarea/textarea.metadata.d.ts +0 -2
- package/dist/components/ui/core/textarea/textarea.metadata.js +0 -9
- package/dist/components/ui/core/tool/tool.metadata.d.ts +0 -2
- package/dist/components/ui/core/tool/tool.metadata.js +0 -8
- package/dist/components/ui/core/tooltip/tooltip.metadata.d.ts +0 -8
- package/dist/components/ui/core/tooltip/tooltip.metadata.js +0 -9
package/dist/styles.source.css
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Space+Grotesk:wght@300..700&family=Source+Code+Pro:wght@200..900&display=swap');
|
|
2
2
|
@import 'tailwindcss';
|
|
3
3
|
@import 'tw-animate-css';
|
|
4
|
-
@import
|
|
4
|
+
@import './colors.css';
|
|
5
|
+
|
|
6
|
+
@source './components/';
|
|
7
|
+
@source './lib/';
|
|
5
8
|
|
|
6
9
|
@custom-variant dark (&:is(.dark *));
|
|
7
10
|
|
|
@@ -60,21 +63,21 @@
|
|
|
60
63
|
0 1px 3px 0 var(--effect-shadow-md), 0 1px 2px 0 var(--effect-shadow-sm);
|
|
61
64
|
/* menus; popovers; hover cards */
|
|
62
65
|
--shadow-md:
|
|
63
|
-
0 4px 6px -1px var(--effect-shadow-
|
|
64
|
-
0 2px 4px -1px var(--effect-shadow-
|
|
66
|
+
0 4px 6px -1px var(--effect-shadow-lg),
|
|
67
|
+
0 2px 4px -1px var(--effect-shadow-md);
|
|
65
68
|
/* sonner; temporary elements */
|
|
66
69
|
--shadow-lg:
|
|
67
|
-
0 10px 15px -3px var(--effect-shadow-
|
|
68
|
-
0 4px 6px -2px var(--effect-shadow-
|
|
70
|
+
0 10px 15px -3px var(--effect-shadow-xl),
|
|
71
|
+
0 4px 6px -2px var(--effect-shadow-lg);
|
|
69
72
|
/* modals; dialogs without backdrop overlay */
|
|
70
73
|
--shadow-xl:
|
|
71
74
|
0 20px 25px -5px var(--effect-shadow-xl),
|
|
72
75
|
0 10px 10px -5px var(--effect-shadow-lg);
|
|
73
76
|
/* modals; dialogs with backdrop overlay */
|
|
74
|
-
--shadow-focus-ring: 0 0 0
|
|
75
|
-
/* default focus ring: inner border (
|
|
77
|
+
--shadow-focus-ring: 0 0 0 1px var(--ring), 0 0 0 3px var(--ring-muted);
|
|
78
|
+
/* default focus ring: inner border (1px dark) + outer glow (3px light, 2px visible beyond inner) */
|
|
76
79
|
--shadow-focus-ring-destructive:
|
|
77
|
-
0 0 0
|
|
80
|
+
0 0 0 1px var(--ring-destructive), 0 0 0 3px var(--ring-destructive-muted);
|
|
78
81
|
|
|
79
82
|
--radius-none: 0px;
|
|
80
83
|
--radius-xs: 2px;
|
|
@@ -90,6 +93,11 @@
|
|
|
90
93
|
--avatar-icon-xs: 0.875rem;
|
|
91
94
|
--avatar-icon-xxs: 0.65625rem;
|
|
92
95
|
--avatar-image-backdrop: rgba(2, 6, 23, 0.2);
|
|
96
|
+
|
|
97
|
+
/* Date picker calendar — fixed columns aligned with w-9 day cells */
|
|
98
|
+
--grid-template-columns-calendar: repeat(7, calc(var(--spacing) * 9));
|
|
99
|
+
--grid-template-columns-calendar-weeks: calc(var(--spacing) * 8)
|
|
100
|
+
repeat(7, calc(var(--spacing) * 9));
|
|
93
101
|
}
|
|
94
102
|
|
|
95
103
|
:root {
|
|
@@ -108,6 +116,12 @@
|
|
|
108
116
|
--drawer-max-height: 80vh;
|
|
109
117
|
/* Maximum height for top/bottom drawers */
|
|
110
118
|
|
|
119
|
+
/* Effect tokens are not generated from the Figma colour sync. */
|
|
120
|
+
--effect-shadow-sm: rgba(0, 0, 0, 0.04);
|
|
121
|
+
--effect-shadow-md: rgba(0, 0, 0, 0.05);
|
|
122
|
+
--effect-shadow-lg: rgba(0, 0, 0, 0.06);
|
|
123
|
+
--effect-shadow-xl: rgba(0, 0, 0, 0.1);
|
|
124
|
+
|
|
111
125
|
/* Gradient tokens */
|
|
112
126
|
--gradient-nordic: linear-gradient(
|
|
113
127
|
-100deg,
|
|
@@ -155,6 +169,11 @@
|
|
|
155
169
|
}
|
|
156
170
|
|
|
157
171
|
.dark {
|
|
172
|
+
--effect-shadow-sm: rgba(0, 0, 0, 0.2);
|
|
173
|
+
--effect-shadow-md: rgba(0, 0, 0, 0.302);
|
|
174
|
+
--effect-shadow-lg: rgba(0, 0, 0, 0.4);
|
|
175
|
+
--effect-shadow-xl: rgba(0, 0, 0, 0.6);
|
|
176
|
+
|
|
158
177
|
/* Gradient tokens */
|
|
159
178
|
--gradient-nordic: linear-gradient(
|
|
160
179
|
-100deg,
|
|
@@ -212,6 +231,54 @@
|
|
|
212
231
|
}
|
|
213
232
|
|
|
214
233
|
@layer utilities {
|
|
234
|
+
@keyframes aura-loader-rect-1-animation {
|
|
235
|
+
0% {
|
|
236
|
+
stroke-dashoffset: 172;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
50% {
|
|
240
|
+
stroke-dashoffset: 422;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
100% {
|
|
244
|
+
stroke-dashoffset: 422;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
@keyframes aura-loader-rect-2-animation {
|
|
249
|
+
0% {
|
|
250
|
+
stroke-dashoffset: 422;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
50% {
|
|
254
|
+
stroke-dashoffset: 172;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
100% {
|
|
258
|
+
stroke-dashoffset: 172;
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.aura-loader-rect {
|
|
263
|
+
stroke-dasharray: 97.95 152;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.aura-loader-rect-1 {
|
|
267
|
+
animation: aura-loader-rect-1-animation 2s ease-in-out infinite;
|
|
268
|
+
stroke-dashoffset: 172;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.aura-loader-rect-2 {
|
|
272
|
+
animation: aura-loader-rect-2-animation 2s 0.5s ease-in-out infinite;
|
|
273
|
+
stroke-dashoffset: 422;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
@media (prefers-reduced-motion: reduce) {
|
|
277
|
+
[data-slot='loader-rect'] {
|
|
278
|
+
animation: none;
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
|
|
215
282
|
[data-state='closed'] {
|
|
216
283
|
--tw-animation-fill-mode: forwards;
|
|
217
284
|
}
|
package/package.json
CHANGED
|
@@ -1,13 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cognite/aura",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"type": "module",
|
|
5
|
+
"sideEffects": [
|
|
6
|
+
"**/*.scss",
|
|
7
|
+
"**/*.css"
|
|
8
|
+
],
|
|
5
9
|
"exports": {
|
|
6
10
|
"./components": {
|
|
7
11
|
"@fusion/source": "./src/components/index.ts",
|
|
8
12
|
"import": "./dist/components/index.js",
|
|
9
13
|
"types": "./dist/components/index.d.ts"
|
|
10
14
|
},
|
|
15
|
+
"./chart": {
|
|
16
|
+
"@fusion/source": "./src/components/ui/core/chart/index.ts",
|
|
17
|
+
"import": "./dist/components/ui/core/chart/index.js",
|
|
18
|
+
"types": "./dist/components/ui/core/chart/index.d.ts"
|
|
19
|
+
},
|
|
11
20
|
"./utils": {
|
|
12
21
|
"@fusion/source": "./src/lib/utils.ts",
|
|
13
22
|
"import": "./dist/lib/utils.js",
|
|
@@ -20,14 +29,17 @@
|
|
|
20
29
|
},
|
|
21
30
|
"./styles.css": {
|
|
22
31
|
"@fusion/source": "./src/styles.css",
|
|
32
|
+
"style": "./src/styles.css",
|
|
23
33
|
"default": "./dist/styles.css"
|
|
24
34
|
},
|
|
25
35
|
"./styles.source.css": {
|
|
26
36
|
"@fusion/source": "./src/styles.source.css",
|
|
37
|
+
"style": "./src/styles.source.css",
|
|
27
38
|
"default": "./dist/styles.source.css"
|
|
28
39
|
},
|
|
29
40
|
"./colors.css": {
|
|
30
41
|
"@fusion/source": "./src/colors.css",
|
|
42
|
+
"style": "./src/colors.css",
|
|
31
43
|
"default": "./dist/colors.css"
|
|
32
44
|
},
|
|
33
45
|
"./DESIGN.md": "./DESIGN.md"
|
|
@@ -43,30 +55,35 @@
|
|
|
43
55
|
"class-variance-authority": "^0.7.1",
|
|
44
56
|
"clsx": "^2.1.1",
|
|
45
57
|
"cmdk": "^1.1.1",
|
|
58
|
+
"dayjs": "^1.11.13",
|
|
46
59
|
"framer-motion": "^11.0.3",
|
|
47
60
|
"shiki": "^3.19.0",
|
|
61
|
+
"sonner": "^2.0.7",
|
|
48
62
|
"streamdown": "^2.4.0",
|
|
49
63
|
"tailwind-merge": "^3.4.0",
|
|
50
64
|
"tw-animate-css": "^1.4.0"
|
|
51
65
|
},
|
|
52
66
|
"devDependencies": {
|
|
53
67
|
"@chromatic-com/storybook": "^5.1.2",
|
|
54
|
-
"@google/design.md": "0.1.1",
|
|
55
68
|
"@storybook/addon-coverage": "^3.0.1",
|
|
56
69
|
"@storybook/addon-docs": "10.3.5",
|
|
57
70
|
"@storybook/addon-vitest": "10.3.5",
|
|
58
71
|
"@storybook/react-vite": "10.3.5",
|
|
59
72
|
"@swc-node/register": "1.11.1",
|
|
60
73
|
"@tailwindcss/vite": "^4.1.17",
|
|
74
|
+
"@testing-library/jest-dom": "^6.4.6",
|
|
61
75
|
"@testing-library/react": "16.0.1",
|
|
62
76
|
"@testing-library/user-event": "^14.6.1",
|
|
63
77
|
"@types/react": "18.3.14",
|
|
64
78
|
"@types/react-dom": "18.3.2",
|
|
65
79
|
"@vitejs/plugin-react": "^5.1.4",
|
|
66
|
-
"@vitest/browser": "^4.
|
|
67
|
-
"@vitest/browser-playwright": "^4.
|
|
80
|
+
"@vitest/browser": "^4.1.6",
|
|
81
|
+
"@vitest/browser-playwright": "^4.1.6",
|
|
82
|
+
"eslint": "9.39.4",
|
|
68
83
|
"eslint-plugin-check-file": "^2.7.1",
|
|
84
|
+
"react": "^18.3.1",
|
|
69
85
|
"react-dom": "^18.3.1",
|
|
86
|
+
"recharts": "^3.7.0",
|
|
70
87
|
"rollup": "^4.59.0",
|
|
71
88
|
"storybook": "10.3.5",
|
|
72
89
|
"tailwindcss": "^4.1.17",
|
|
@@ -74,14 +91,18 @@
|
|
|
74
91
|
"typescript-eslint": "^8.57.1",
|
|
75
92
|
"vite": "7.3.2",
|
|
76
93
|
"vite-plugin-dts": "^4.5.4",
|
|
77
|
-
"vitest": "^4.
|
|
94
|
+
"vitest": "^4.1.6"
|
|
78
95
|
},
|
|
79
96
|
"peerDependencies": {
|
|
80
97
|
"eslint": "9.39.4",
|
|
81
98
|
"react": "^18.3.1",
|
|
99
|
+
"recharts": "^3.7.0",
|
|
82
100
|
"tailwindcss": "^4.1.17"
|
|
83
101
|
},
|
|
84
102
|
"peerDependenciesMeta": {
|
|
103
|
+
"recharts": {
|
|
104
|
+
"optional": true
|
|
105
|
+
},
|
|
85
106
|
"tailwindcss": {
|
|
86
107
|
"optional": true
|
|
87
108
|
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
const o = {
|
|
2
|
-
name: "Accordion",
|
|
3
|
-
status: "experimental",
|
|
4
|
-
description: "An accessible accordion with smooth expand/collapse built on Base UI primitives.",
|
|
5
|
-
llmUsage: "Use `<Accordion>` with `<AccordionItem>`, `<AccordionTrigger>`, and `<AccordionContent>` for collapsible sections."
|
|
6
|
-
};
|
|
7
|
-
export {
|
|
8
|
-
o as AccordionMetadata
|
|
9
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
const e = {
|
|
2
|
-
name: "Alert",
|
|
3
|
-
status: "in-progress-code-review",
|
|
4
|
-
description: "A dismissible alert component with multiple variants for displaying messages.",
|
|
5
|
-
llmUsage: "Use `<Alert>` with optional `icon` prop (defaults to a variant-appropriate icon), plus `<AlertTitle>` and `<AlertDescription>`, for informational messages. Pass `icon={null}` to suppress the icon."
|
|
6
|
-
};
|
|
7
|
-
export {
|
|
8
|
-
e as AlertMetadata
|
|
9
|
-
};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { ComponentMeta } from '../../../../lib/types';
|
|
2
|
-
/**
|
|
3
|
-
* Avatar Component Metadata
|
|
4
|
-
*
|
|
5
|
-
* This metadata is used by the documentation system to generate
|
|
6
|
-
* component documentation pages and provide context for LLMs.
|
|
7
|
-
*/
|
|
8
|
-
export declare const AvatarMetadata: ComponentMeta;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
const a = {
|
|
2
|
-
name: "Avatar",
|
|
3
|
-
status: "draft",
|
|
4
|
-
description: "An image element with a fallback for representing users. Supports multiple color variants, sizes, and composable sub-components.",
|
|
5
|
-
llmUsage: "When displaying user avatars, use `<Avatar>` with `<AvatarImage>` and `<AvatarFallback>` for graceful degradation. Use `<AvatarIcon>` for icon-only avatars."
|
|
6
|
-
};
|
|
7
|
-
export {
|
|
8
|
-
a as AvatarMetadata
|
|
9
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
const n = {
|
|
2
|
-
name: "Banner",
|
|
3
|
-
status: "in-progress-code-review",
|
|
4
|
-
description: "A configurable banner for important inline messages with variant styling, optional status badge, and action controls.",
|
|
5
|
-
llmUsage: "Use `<Banner>` with `<BannerIcon>`, `<BannerTitle>`, optional `<BannerStatus>`, and `<BannerActions>` containing `<BannerAction>` or `<BannerClose>`."
|
|
6
|
-
};
|
|
7
|
-
export {
|
|
8
|
-
n as BannerMetadata
|
|
9
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
const t = {
|
|
2
|
-
name: "Button",
|
|
3
|
-
status: "in-progress-code-review",
|
|
4
|
-
description: "A versatile button component with multiple variants and sizes, built with Base UI render props and class-variance-authority.",
|
|
5
|
-
llmUsage: "When asked for a button, use `<Button variant='default'>Click me</Button>` instead of `<button>`. For different styles, use variants like 'destructive', 'outline', 'secondary', 'ghost', or 'link'."
|
|
6
|
-
};
|
|
7
|
-
export {
|
|
8
|
-
t as ButtonMetadata
|
|
9
|
-
};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { ComponentMeta } from '../../../../lib/types';
|
|
2
|
-
/**
|
|
3
|
-
* Card Component Metadata
|
|
4
|
-
*
|
|
5
|
-
* This metadata is used by the documentation system to generate
|
|
6
|
-
* component documentation pages and provide context for LLMs.
|
|
7
|
-
*/
|
|
8
|
-
export declare const CardMetadata: ComponentMeta;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
const e = {
|
|
2
|
-
name: "Card",
|
|
3
|
-
status: "in-progress-code-review",
|
|
4
|
-
description: "A flexible card layout with header, content, action, and footer slots.",
|
|
5
|
-
llmUsage: "Use `<Card>` with `<CardHeader>`, `<CardTitle>`, `<CardDescription>`, `<CardContent>`, and `<CardFooter>` for structured content containers."
|
|
6
|
-
};
|
|
7
|
-
export {
|
|
8
|
-
e as CardMetadata
|
|
9
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
const e = {
|
|
2
|
-
name: "Collapsible",
|
|
3
|
-
status: "in-progress-code-review",
|
|
4
|
-
description: "An interactive component that expands/collapses content, built on Base UI Collapsible primitives.",
|
|
5
|
-
llmUsage: "Use `<Collapsible>` with `<CollapsibleTrigger>` and `<CollapsibleContent>` for expandable sections."
|
|
6
|
-
};
|
|
7
|
-
export {
|
|
8
|
-
e as CollapsibleMetadata
|
|
9
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
const m = {
|
|
2
|
-
name: "Command",
|
|
3
|
-
status: "in-progress-code-review",
|
|
4
|
-
description: "A command menu component for searchable command palettes, built with cmdk.",
|
|
5
|
-
llmUsage: "Use `<Command>` with `<CommandInput>`, `<CommandList>`, and `<CommandItem>` for command palettes."
|
|
6
|
-
};
|
|
7
|
-
export {
|
|
8
|
-
m as CommandMetadata
|
|
9
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
const a = {
|
|
2
|
-
name: "Dialog",
|
|
3
|
-
status: "in-progress-code-review",
|
|
4
|
-
description: "A modal dialog with overlay, content, and close affordances built on Base UI Dialog.",
|
|
5
|
-
llmUsage: "Use `<Dialog>` with `<DialogTrigger>`, `<DialogContent>`, and `<DialogTitle>` for modals."
|
|
6
|
-
};
|
|
7
|
-
export {
|
|
8
|
-
a as DialogMetadata
|
|
9
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
const e = {
|
|
2
|
-
name: "DropdownMenu",
|
|
3
|
-
status: "in-progress-code-review",
|
|
4
|
-
description: "A dropdown menu with submenus, separators, and selection states, built on Base UI Dropdown Menu primitives.",
|
|
5
|
-
llmUsage: "Use `<DropdownMenu>` with `<DropdownMenuTrigger>`, `<DropdownMenuContent>`, and `<DropdownMenuItem>` for context actions."
|
|
6
|
-
};
|
|
7
|
-
export {
|
|
8
|
-
e as DropdownMenuMetadata
|
|
9
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
const e = {
|
|
2
|
-
name: "HelperText",
|
|
3
|
-
status: "in-progress-code-review",
|
|
4
|
-
description: "A helper text component for form fields with validation states.",
|
|
5
|
-
llmUsage: "Use `<HelperText>` below form inputs to provide guidance or error messages."
|
|
6
|
-
};
|
|
7
|
-
export {
|
|
8
|
-
e as HelperTextMetadata
|
|
9
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
const t = {
|
|
2
|
-
name: "InputGroup",
|
|
3
|
-
status: "in-progress-code-review",
|
|
4
|
-
description: "A container that combines an input or textarea with inline addons such as icons, labels, or action buttons.",
|
|
5
|
-
llmUsage: "Use `<InputGroup>` with `<InputGroupInput>` and `<InputGroupAddon>` to build inputs with prefix/suffix decorations. Use `<InputGroupTextarea>` instead of `<InputGroupInput>` for multi-line inputs."
|
|
6
|
-
};
|
|
7
|
-
export {
|
|
8
|
-
t as InputGroupMetadata
|
|
9
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
const e = {
|
|
2
|
-
name: "Label",
|
|
3
|
-
status: "in-progress-code-review",
|
|
4
|
-
description: "An accessible text label for form controls, built on top of Base UI Label. Supports association via `htmlFor`, integrates with disabled states, and can render Aura's visual required indicator.",
|
|
5
|
-
llmUsage: 'Use `<Label htmlFor="field-id">Text</Label>` together with a form control that has `id="field-id"` so clicking the label focuses the field. Use `Label.required` for the visual asterisk only, and set `required` on the form control itself when the field must be required for validation and assistive technology.'
|
|
6
|
-
};
|
|
7
|
-
export {
|
|
8
|
-
e as LabelMetadata
|
|
9
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
const e = {
|
|
2
|
-
name: "Loader",
|
|
3
|
-
status: "in-progress-code-review",
|
|
4
|
-
description: "A spinning loader indicator for loading states.",
|
|
5
|
-
llmUsage: "Use `<Loader>` to indicate loading. Adjust `size` prop for different contexts. Inherits text color from parent."
|
|
6
|
-
};
|
|
7
|
-
export {
|
|
8
|
-
e as LoaderMetadata
|
|
9
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
const o = {
|
|
2
|
-
name: "Popover",
|
|
3
|
-
status: "in-progress-code-review",
|
|
4
|
-
description: "A floating panel anchored to a trigger, with composable header, title, description, close, and slot subcomponents built on Base UI Popover primitives.",
|
|
5
|
-
llmUsage: "Use `<Popover>` with `<PopoverTrigger>` and `<PopoverContent>`, then compose content with `<PopoverHeader>`, `<PopoverHeaderContent>`, `<PopoverTitle>`, `<PopoverDescription>`, optional `<PopoverClose>`, and `<PopoverSlot>`."
|
|
6
|
-
};
|
|
7
|
-
export {
|
|
8
|
-
o as PopoverMetadata
|
|
9
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
const s = {
|
|
2
|
-
name: "Progress",
|
|
3
|
-
status: "in-progress-code-review",
|
|
4
|
-
description: "A progress bar component for showing completion status.",
|
|
5
|
-
llmUsage: 'Use `<Progress value={66} size="sm" />` to show progress percentage with optional compact sizing.'
|
|
6
|
-
};
|
|
7
|
-
export {
|
|
8
|
-
s as ProgressMetadata
|
|
9
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
const t = {
|
|
2
|
-
name: "PromptInput",
|
|
3
|
-
status: "in-progress-code-review",
|
|
4
|
-
description: "A comprehensive AI chat input component with support for model selection, command palettes, and rich formatting.",
|
|
5
|
-
llmUsage: "Use `<PromptInputProvider>` to wrap the input, then compose with `<PromptInput>`, `<PromptInputTextarea>`, `<PromptInputSubmit>`, and other sub-components."
|
|
6
|
-
};
|
|
7
|
-
export {
|
|
8
|
-
t as PromptInputMetadata
|
|
9
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
const a = {
|
|
2
|
-
name: "ScrollArea",
|
|
3
|
-
status: "in-progress-code-review",
|
|
4
|
-
description: "A custom scrollable area built on Base UI Scroll Area, with styled scrollbars and an automatic corner for bidirectional scrolling.",
|
|
5
|
-
llmUsage: "Use `<ScrollArea>` as the container and place scrollable content directly as children. Both vertical and horizontal scrollbars are rendered automatically and only appear on the axes that actually overflow. Use the `dir` prop for RTL layouts (and a Base UI `DirectionProvider` when required by your app setup)."
|
|
6
|
-
};
|
|
7
|
-
export {
|
|
8
|
-
a as ScrollAreaMetadata
|
|
9
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
const e = {
|
|
2
|
-
name: "Select",
|
|
3
|
-
status: "in-progress-code-review",
|
|
4
|
-
description: "A select dropdown component built on Base UI Select primitives.",
|
|
5
|
-
llmUsage: "Use `<Select>` with `<SelectTrigger>`, `<SelectContent>`, and `<SelectItem>` for dropdowns."
|
|
6
|
-
};
|
|
7
|
-
export {
|
|
8
|
-
e as SelectMetadata
|
|
9
|
-
};
|