@cognite/aura 0.3.2 → 0.3.3

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.
Files changed (108) hide show
  1. package/DESIGN.md +134 -5
  2. package/README.md +24 -3
  3. package/dist/components/index.d.ts +2 -0
  4. package/dist/components/index.js +58 -327
  5. package/dist/components/ui/core/accordion/accordion.js +79 -114
  6. package/dist/components/ui/core/action-toolbar/action-toolbar.js +108 -176
  7. package/dist/components/ui/core/alert/alert.js +158 -206
  8. package/dist/components/ui/core/avatar/avatar.js +64 -90
  9. package/dist/components/ui/core/badge/badge.js +73 -108
  10. package/dist/components/ui/core/banner/banner.js +146 -215
  11. package/dist/components/ui/core/breadcrumb/breadcrumb.js +105 -200
  12. package/dist/components/ui/core/button/button.js +47 -52
  13. package/dist/components/ui/core/button-group/button-group.js +40 -79
  14. package/dist/components/ui/core/card/card.js +102 -185
  15. package/dist/components/ui/core/chart/chart.js +116 -206
  16. package/dist/components/ui/core/chart/index.js +2 -8
  17. package/dist/components/ui/core/checkbox/checkbox.js +67 -132
  18. package/dist/components/ui/core/checkbox/checkbox.metadata.js +7 -7
  19. package/dist/components/ui/core/code-block/code-block.d.ts +1 -1
  20. package/dist/components/ui/core/code-block/code-block.js +179 -267
  21. package/dist/components/ui/core/collapsible/collapsible.js +29 -49
  22. package/dist/components/ui/core/combobox/combobox.js +41 -0
  23. package/dist/components/ui/core/command/command.js +85 -150
  24. package/dist/components/ui/core/count/count.js +21 -32
  25. package/dist/components/ui/core/date-time-pickers/date-picker/date-picker.js +60 -72
  26. package/dist/components/ui/core/date-time-pickers/date-picker/use-date-picker.js +36 -51
  27. package/dist/components/ui/core/date-time-pickers/date-range-picker/date-range-picker.js +63 -87
  28. package/dist/components/ui/core/date-time-pickers/date-range-picker/use-date-range-picker.js +60 -68
  29. package/dist/components/ui/core/date-time-pickers/date-time-range-picker/date-time-range-picker.js +118 -174
  30. package/dist/components/ui/core/date-time-pickers/date-time-range-picker/use-date-time-range-picker.js +104 -145
  31. package/dist/components/ui/core/date-time-pickers/index.js +5 -10
  32. package/dist/components/ui/core/date-time-pickers/shared/am-pm-scroll/am-pm-scroll.js +42 -56
  33. package/dist/components/ui/core/date-time-pickers/shared/calendar/calendar.js +66 -117
  34. package/dist/components/ui/core/date-time-pickers/shared/calendar-header/calendar-header.js +63 -93
  35. package/dist/components/ui/core/date-time-pickers/shared/date-time-input/date-time-input.js +64 -98
  36. package/dist/components/ui/core/date-time-pickers/shared/date-time-input/range-input-display.js +38 -67
  37. package/dist/components/ui/core/date-time-pickers/shared/hooks/use-popover-state.js +23 -23
  38. package/dist/components/ui/core/date-time-pickers/shared/hooks/use-range-date-state.js +52 -62
  39. package/dist/components/ui/core/date-time-pickers/shared/hooks/use-range-step-manager.js +18 -18
  40. package/dist/components/ui/core/date-time-pickers/shared/hooks/use-single-date-state.js +24 -31
  41. package/dist/components/ui/core/date-time-pickers/shared/hooks/use-time-state.js +24 -33
  42. package/dist/components/ui/core/date-time-pickers/shared/scroll-cell-classes.js +4 -7
  43. package/dist/components/ui/core/date-time-pickers/shared/shortcuts-panel/shortcuts-panel.js +17 -31
  44. package/dist/components/ui/core/date-time-pickers/shared/time-picker-panel/time-picker-panel.js +40 -40
  45. package/dist/components/ui/core/date-time-pickers/shared/time-picker-scroll/time-picker-scroll.js +33 -50
  46. package/dist/components/ui/core/date-time-pickers/time-picker/time-picker.js +78 -99
  47. package/dist/components/ui/core/date-time-pickers/time-picker/use-time-picker.js +41 -63
  48. package/dist/components/ui/core/date-time-pickers/utils/calendar-utils.js +39 -52
  49. package/dist/components/ui/core/date-time-pickers/utils/time-utils.js +7 -15
  50. package/dist/components/ui/core/dialog/dialog.js +82 -155
  51. package/dist/components/ui/core/dropdown-menu/dropdown-menu.d.ts +2 -2
  52. package/dist/components/ui/core/dropdown-menu/dropdown-menu.js +150 -248
  53. package/dist/components/ui/core/empty-state/empty-state.context.js +5 -8
  54. package/dist/components/ui/core/empty-state/empty-state.js +86 -138
  55. package/dist/components/ui/core/helper-text/helper-text.js +37 -65
  56. package/dist/components/ui/core/hover-card/hover-card.js +54 -80
  57. package/dist/components/ui/core/inline-citation/inline-citation.js +98 -181
  58. package/dist/components/ui/core/input/input.js +12 -27
  59. package/dist/components/ui/core/input-group/input-group.js +76 -173
  60. package/dist/components/ui/core/kbd/kbd.js +20 -36
  61. package/dist/components/ui/core/label/label.js +26 -43
  62. package/dist/components/ui/core/loader/loader.js +80 -117
  63. package/dist/components/ui/core/message/message-response-default-streamdown-controls.js +12 -12
  64. package/dist/components/ui/core/message/message.d.ts +2 -2
  65. package/dist/components/ui/core/message/message.js +316 -542
  66. package/dist/components/ui/core/pagination/pagination-size-context.js +5 -6
  67. package/dist/components/ui/core/pagination/pagination-teleport.js +86 -106
  68. package/dist/components/ui/core/pagination/pagination-teleport.utils.js +6 -6
  69. package/dist/components/ui/core/pagination/pagination.js +231 -334
  70. package/dist/components/ui/core/popover/popover.js +90 -157
  71. package/dist/components/ui/core/progress/progress.js +36 -61
  72. package/dist/components/ui/core/prompt-input/prompt-input.js +274 -413
  73. package/dist/components/ui/core/radio-group/radio-group.js +58 -113
  74. package/dist/components/ui/core/reasoning/reasoning.js +55 -86
  75. package/dist/components/ui/core/scroll-area/scroll-area.js +41 -71
  76. package/dist/components/ui/core/search/search.js +77 -99
  77. package/dist/components/ui/core/segmented-control/segmented-control.js +110 -167
  78. package/dist/components/ui/core/select/select.js +168 -293
  79. package/dist/components/ui/core/separator/separator.js +13 -23
  80. package/dist/components/ui/core/shimmer/shimmer.d.ts +2 -4
  81. package/dist/components/ui/core/shimmer/shimmer.js +40 -107
  82. package/dist/components/ui/core/skeleton/skeleton.js +13 -18
  83. package/dist/components/ui/core/sonner-toast/sonner-toast.js +54 -47
  84. package/dist/components/ui/core/sources/sources.d.ts +5 -1
  85. package/dist/components/ui/core/sources/sources.js +58 -79
  86. package/dist/components/ui/core/switch/switch.js +62 -0
  87. package/dist/components/ui/core/tabs/tabs.js +149 -223
  88. package/dist/components/ui/core/tabs/tabs.utils.js +6 -8
  89. package/dist/components/ui/core/textarea/textarea.js +13 -27
  90. package/dist/components/ui/core/toggle/toggle.js +55 -74
  91. package/dist/components/ui/core/tool/tool.js +127 -163
  92. package/dist/components/ui/core/tooltip/tooltip.js +47 -86
  93. package/dist/components/ui/core/topbar/topbar.js +106 -190
  94. package/dist/eslint/index.js +5 -10
  95. package/dist/eslint/no-overriding-styles.js +178 -237
  96. package/dist/icons/index.d.ts +1 -0
  97. package/dist/icons/index.js +1 -0
  98. package/dist/lib/highlight-code.d.ts +9 -0
  99. package/dist/lib/highlight-code.js +42 -0
  100. package/dist/lib/portal-container-context.js +8 -9
  101. package/dist/lib/style-scope.js +6 -6
  102. package/dist/lib/use-controllable-state.js +21 -30
  103. package/dist/lib/utils.d.ts +0 -2
  104. package/dist/lib/utils.js +32 -112
  105. package/dist/styles.css +1 -1
  106. package/dist/styles.source.css +23 -0
  107. package/package.json +23 -7
  108. package/dist/components/ui/core/date-time-pickers/shared/constants.js +0 -14
@@ -1,159 +1,92 @@
1
- import { jsx as r } from "react/jsx-runtime";
2
- import { forwardRef as a } from "react";
3
- import { Popover as n } from "@base-ui/react/popover";
4
- import { IconX as m } from "@tabler/icons-react";
5
- import { usePortalContainer as f } from "../../../../lib/portal-container-context.js";
6
- import { cn as s } from "../../../../lib/utils.js";
7
- import { Button as v } from "../button/button.js";
8
- function j(e) {
9
- return /* @__PURE__ */ r(n.Root, { "data-slot": "popover", ...e });
1
+ import { cn as e } from "../../../../lib/utils.js";
2
+ import { Button as t } from "../button/button.js";
3
+ import { usePortalContainer as n } from "../../../../lib/portal-container-context.js";
4
+ import { forwardRef as r } from "react";
5
+ import { IconX as i } from "@tabler/icons-react";
6
+ import { jsx as a } from "react/jsx-runtime";
7
+ import { Popover as o } from "@base-ui/react/popover";
8
+ //#region libs/aura/src/components/ui/core/popover/popover.tsx
9
+ function s(e) {
10
+ return /* @__PURE__ */ a(o.Root, {
11
+ "data-slot": "popover",
12
+ ...e
13
+ });
10
14
  }
11
- function D({
12
- children: e,
13
- ...o
14
- }) {
15
- return /* @__PURE__ */ r(n.Trigger, { "data-slot": "popover-trigger", ...o, children: e });
15
+ function c({ children: e, ...t }) {
16
+ return /* @__PURE__ */ a(o.Trigger, {
17
+ "data-slot": "popover-trigger",
18
+ ...t,
19
+ children: e
20
+ });
16
21
  }
17
- const u = a(
18
- ({ className: e, ...o }, t) => /* @__PURE__ */ r(
19
- "div",
20
- {
21
- ref: t,
22
- "data-slot": "popover-header",
23
- className: s(
24
- "flex flex-col items-start gap-2 self-stretch",
25
- e
26
- ),
27
- ...o
28
- }
29
- )
30
- );
31
- u.displayName = "PopoverHeader";
32
- const g = a(
33
- ({ className: e, ...o }, t) => /* @__PURE__ */ r(
34
- "div",
35
- {
36
- ref: t,
37
- "data-slot": "popover-header-content",
38
- className: s(
39
- "flex items-start justify-between self-stretch",
40
- e
41
- ),
42
- ...o
43
- }
44
- )
45
- );
46
- g.displayName = "PopoverHeaderContent";
47
- const h = a(
48
- ({ className: e, children: o, ...t }, i) => /* @__PURE__ */ r(
49
- "h3",
50
- {
51
- ref: i,
52
- "data-slot": "popover-title",
53
- className: s(
54
- "flex h-7 flex-1 flex-col justify-center self-stretch overflow-hidden text-ellipsis whitespace-nowrap text-base font-medium text-foreground leading-5 tracking-tighter",
55
- e
56
- ),
57
- ...t,
58
- children: o
59
- }
60
- )
61
- );
62
- h.displayName = "PopoverTitle";
63
- const P = a(
64
- ({ className: e, ...o }, t) => /* @__PURE__ */ r(
65
- "p",
66
- {
67
- ref: t,
68
- "data-slot": "popover-description",
69
- className: s(
70
- "self-stretch text-sm font-normal text-secondary-foreground leading-[18px] tracking-tight",
71
- e
72
- ),
73
- ...o
74
- }
75
- )
76
- );
77
- P.displayName = "PopoverDescription";
78
- const x = a(
79
- ({ className: e, ...o }, t) => /* @__PURE__ */ r(
80
- "div",
81
- {
82
- ref: t,
83
- "data-slot": "popover-slot",
84
- className: s(
85
- "flex flex-col items-start gap-3 self-stretch",
86
- e
87
- ),
88
- ...o
89
- }
90
- )
91
- );
92
- x.displayName = "PopoverSlot";
93
- const N = a(
94
- ({ className: e, children: o, "aria-label": t = "Close", ...i }, l) => /* @__PURE__ */ r(
95
- n.Close,
96
- {
97
- "data-slot": "popover-close",
98
- render: /* @__PURE__ */ r(
99
- v,
100
- {
101
- ref: l,
102
- variant: "ghost",
103
- size: "icon-sm",
104
- className: s("h-7 w-7 shrink-0", e),
105
- "aria-label": t,
106
- ...i,
107
- children: o ?? /* @__PURE__ */ r(m, { className: "h-4 w-4" })
108
- }
109
- )
110
- }
111
- )
112
- );
113
- N.displayName = "PopoverClose";
114
- const b = a(
115
- ({
116
- className: e,
117
- align: o = "center",
118
- alignOffset: t = 0,
119
- side: i = "bottom",
120
- sideOffset: l = 4,
121
- ...p
122
- }, d) => {
123
- const c = f();
124
- return /* @__PURE__ */ r(n.Portal, { container: c, children: /* @__PURE__ */ r(
125
- n.Positioner,
126
- {
127
- align: o,
128
- alignOffset: t,
129
- side: i,
130
- sideOffset: l,
131
- className: "isolate z-50",
132
- children: /* @__PURE__ */ r(
133
- n.Popup,
134
- {
135
- ref: d,
136
- "data-slot": "popover-content",
137
- className: s(
138
- "bg-popover-background text-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 flex w-72 flex-col items-start origin-[var(--transform-origin)] rounded-xl border border-border p-4 gap-2 shadow-default outline-none",
139
- e
140
- ),
141
- ...p
142
- }
143
- )
144
- }
145
- ) });
146
- }
147
- );
148
- b.displayName = "PopoverContent";
149
- export {
150
- j as Popover,
151
- N as PopoverClose,
152
- b as PopoverContent,
153
- P as PopoverDescription,
154
- u as PopoverHeader,
155
- g as PopoverHeaderContent,
156
- x as PopoverSlot,
157
- h as PopoverTitle,
158
- D as PopoverTrigger
159
- };
22
+ var l = r(({ className: t, ...n }, r) => /* @__PURE__ */ a("div", {
23
+ ref: r,
24
+ "data-slot": "popover-header",
25
+ className: e("flex flex-col items-start gap-2 self-stretch", t),
26
+ ...n
27
+ }));
28
+ l.displayName = "PopoverHeader";
29
+ var u = r(({ className: t, ...n }, r) => /* @__PURE__ */ a("div", {
30
+ ref: r,
31
+ "data-slot": "popover-header-content",
32
+ className: e("flex items-start justify-between self-stretch", t),
33
+ ...n
34
+ }));
35
+ u.displayName = "PopoverHeaderContent";
36
+ var d = r(({ className: t, children: n, ...r }, i) => /* @__PURE__ */ a("h3", {
37
+ ref: i,
38
+ "data-slot": "popover-title",
39
+ className: e("flex h-7 flex-1 flex-col justify-center self-stretch overflow-hidden text-ellipsis whitespace-nowrap text-base font-medium text-foreground leading-5 tracking-tighter", t),
40
+ ...r,
41
+ children: n
42
+ }));
43
+ d.displayName = "PopoverTitle";
44
+ var f = r(({ className: t, ...n }, r) => /* @__PURE__ */ a("p", {
45
+ ref: r,
46
+ "data-slot": "popover-description",
47
+ className: e("self-stretch text-sm font-normal text-secondary-foreground leading-[18px] tracking-tight", t),
48
+ ...n
49
+ }));
50
+ f.displayName = "PopoverDescription";
51
+ var p = r(({ className: t, ...n }, r) => /* @__PURE__ */ a("div", {
52
+ ref: r,
53
+ "data-slot": "popover-slot",
54
+ className: e("flex flex-col items-start gap-3 self-stretch", t),
55
+ ...n
56
+ }));
57
+ p.displayName = "PopoverSlot";
58
+ var m = r(({ className: n, children: r, "aria-label": s = "Close", ...c }, l) => /* @__PURE__ */ a(o.Close, {
59
+ "data-slot": "popover-close",
60
+ render: /* @__PURE__ */ a(t, {
61
+ ref: l,
62
+ variant: "ghost",
63
+ size: "icon-sm",
64
+ className: e("h-7 w-7 shrink-0", n),
65
+ "aria-label": s,
66
+ ...c,
67
+ children: r ?? /* @__PURE__ */ a(i, { className: "h-4 w-4" })
68
+ })
69
+ }));
70
+ m.displayName = "PopoverClose";
71
+ var h = r(({ className: t, align: r = "center", alignOffset: i = 0, side: s = "bottom", sideOffset: c = 4, ...l }, u) => {
72
+ let d = n();
73
+ return /* @__PURE__ */ a(o.Portal, {
74
+ container: d,
75
+ children: /* @__PURE__ */ a(o.Positioner, {
76
+ align: r,
77
+ alignOffset: i,
78
+ side: s,
79
+ sideOffset: c,
80
+ className: "isolate z-50",
81
+ children: /* @__PURE__ */ a(o.Popup, {
82
+ ref: u,
83
+ "data-slot": "popover-content",
84
+ className: e("bg-popover-background text-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 flex w-72 flex-col items-start origin-[var(--transform-origin)] rounded-xl border border-border p-4 gap-2 shadow-default outline-none", t),
85
+ ...l
86
+ })
87
+ })
88
+ });
89
+ });
90
+ h.displayName = "PopoverContent";
91
+ //#endregion
92
+ export { s as Popover, m as PopoverClose, h as PopoverContent, f as PopoverDescription, l as PopoverHeader, u as PopoverHeaderContent, p as PopoverSlot, d as PopoverTitle, c as PopoverTrigger };
@@ -1,61 +1,36 @@
1
- import { jsx as r } from "react/jsx-runtime";
2
- import { forwardRef as h } from "react";
3
- import { Progress as s } from "@base-ui/react/progress";
4
- import { cva as b } from "class-variance-authority";
5
- import { cn as l } from "../../../../lib/utils.js";
6
- const k = b(
7
- "relative w-full overflow-hidden rounded-full bg-muted-background",
8
- {
9
- variants: {
10
- size: {
11
- default: "h-2",
12
- sm: "h-1"
13
- }
14
- },
15
- defaultVariants: {
16
- size: "default"
17
- }
18
- }
19
- ), v = h(
20
- ({
21
- className: i,
22
- value: c = 0,
23
- max: t = 100,
24
- size: n,
25
- "aria-label": d,
26
- ...m
27
- }, f) => {
28
- const u = c ?? 0, a = t > 0 ? t : 100, e = Math.max(0, Math.min(u, a)), o = e * 100 / a, g = { width: `${o}%` }, p = `Progress: ${Math.round(o)}%`;
29
- return /* @__PURE__ */ r(
30
- s.Root,
31
- {
32
- ref: f,
33
- "data-slot": "progress",
34
- className: l("block w-full", i),
35
- value: e,
36
- max: a,
37
- "aria-label": d ?? p,
38
- ...m,
39
- children: /* @__PURE__ */ r(
40
- s.Track,
41
- {
42
- "data-slot": "progress-track",
43
- className: l(k({ size: n })),
44
- children: /* @__PURE__ */ r(
45
- s.Indicator,
46
- {
47
- "data-slot": "progress-indicator",
48
- className: "bg-active-background h-full transition-[width]",
49
- style: g
50
- }
51
- )
52
- }
53
- )
54
- }
55
- );
56
- }
57
- );
58
- v.displayName = "Progress";
59
- export {
60
- v as Progress
61
- };
1
+ import { cn as e } from "../../../../lib/utils.js";
2
+ import { forwardRef as t } from "react";
3
+ import { jsx as n } from "react/jsx-runtime";
4
+ import { cva as r } from "class-variance-authority";
5
+ import { Progress as i } from "@base-ui/react/progress";
6
+ //#region libs/aura/src/components/ui/core/progress/progress.tsx
7
+ var a = r("relative w-full overflow-hidden rounded-full bg-muted-background", {
8
+ variants: { size: {
9
+ default: "h-2",
10
+ sm: "h-1"
11
+ } },
12
+ defaultVariants: { size: "default" }
13
+ }), o = t(({ className: t, value: r = 0, max: o = 100, size: s, "aria-label": c, ...l }, u) => {
14
+ let d = r ?? 0, f = o > 0 ? o : 100, p = Math.max(0, Math.min(d, f)), m = p * 100 / f, h = { width: `${m}%` }, g = `Progress: ${Math.round(m)}%`;
15
+ return /* @__PURE__ */ n(i.Root, {
16
+ ref: u,
17
+ "data-slot": "progress",
18
+ className: e("block w-full", t),
19
+ value: p,
20
+ max: f,
21
+ "aria-label": c ?? g,
22
+ ...l,
23
+ children: /* @__PURE__ */ n(i.Track, {
24
+ "data-slot": "progress-track",
25
+ className: e(a({ size: s })),
26
+ children: /* @__PURE__ */ n(i.Indicator, {
27
+ "data-slot": "progress-indicator",
28
+ className: "bg-active-background h-full transition-[width]",
29
+ style: h
30
+ })
31
+ })
32
+ });
33
+ });
34
+ o.displayName = "Progress";
35
+ //#endregion
36
+ export { o as Progress };