@cognite/aura 0.3.2 → 0.3.4

package/dist/styles.source.css

@@ -8,6 +8,7 @@
 /* Streamdown ships Tailwind classes in pre-built dist JS; */
 @source 'streamdown/dist';
 @source '@streamdown/mermaid/dist';
+@import 'streamdown/styles.css';
 
 @custom-variant dark (&:is(.dark *));
 
@@ -81,6 +82,9 @@
   /* default focus ring: inner border (1px dark) + outer glow (3px light, 2px visible beyond inner) */
   --shadow-focus-ring-destructive:
     0 0 0 1px var(--ring-destructive), 0 0 0 3px var(--ring-destructive-muted);
+  --shadow-pinned-column:
+    4px 0 8px 0 var(--effect-shadow-md), 3px 0 2px 0 var(--effect-shadow-md);
+  /* horizontal edge shadow for the last pinned column in data grids */
 
   --radius-none: 0px;
   --radius-xs: 2px;
@@ -169,6 +173,18 @@
     var(--dusk-550) 50%,
     var(--dusk-300) 100%
   );
+  --gradient-active: linear-gradient(
+    90deg,
+    var(--color-muted-foreground) 0%,
+    var(--color-muted-foreground) 32%,
+    color-mix(in oklab, var(--fjord-550) 60%, var(--color-muted-foreground)) 42%,
+    color-mix(in oklab, var(--nordic-400) 60%, var(--color-muted-foreground))
+      48%,
+    color-mix(in oklab, var(--aurora-400) 60%, var(--color-muted-foreground))
+      54%,
+    var(--color-muted-foreground) 64%,
+    var(--color-muted-foreground) 100%
+  );
 }
 
 .dark {
@@ -231,6 +247,12 @@
   body {
     @apply bg-background text-foreground;
   }
+
+  :where(svg.tabler-icon) {
+    width: 1rem;
+    height: 1rem;
+    stroke-width: 1.5;
+  }
 }
 
 @layer utilities {
@@ -280,6 +302,10 @@
     [data-slot='loader-rect'] {
       animation: none;
     }
+
+    [data-sd-animate] {
+      animation: none;
+    }
   }
 
   [data-state='closed'] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/aura",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "type": "module",
   "sideEffects": [
     "**/*.scss",
@@ -47,6 +47,10 @@
       "import": "./dist/components/ui/core/button-group/button-group.js",
       "types": "./dist/components/ui/core/button-group/button-group.d.ts"
     },
+    "./components/calendar": {
+      "import": "./dist/components/ui/core/calendar/calendar.js",
+      "types": "./dist/components/ui/core/calendar/calendar.d.ts"
+    },
     "./components/card": {
       "import": "./dist/components/ui/core/card/card.js",
       "types": "./dist/components/ui/core/card/card.d.ts"
@@ -63,6 +67,10 @@
       "import": "./dist/components/ui/core/collapsible/collapsible.js",
       "types": "./dist/components/ui/core/collapsible/collapsible.d.ts"
     },
+    "./components/combobox": {
+      "import": "./dist/components/ui/core/combobox/combobox.js",
+      "types": "./dist/components/ui/core/combobox/combobox.d.ts"
+    },
     "./components/command": {
       "import": "./dist/components/ui/core/command/command.js",
       "types": "./dist/components/ui/core/command/command.d.ts"
@@ -175,6 +183,10 @@
       "import": "./dist/components/ui/core/skeleton/skeleton.js",
       "types": "./dist/components/ui/core/skeleton/skeleton.d.ts"
     },
+    "./components/slider": {
+      "import": "./dist/components/ui/core/slider/slider.js",
+      "types": "./dist/components/ui/core/slider/slider.d.ts"
+    },
     "./components/sonner-toast": {
       "import": "./dist/components/ui/core/sonner-toast/sonner-toast.js",
       "types": "./dist/components/ui/core/sonner-toast/sonner-toast.d.ts"
@@ -183,6 +195,10 @@
       "import": "./dist/components/ui/core/sources/sources.js",
       "types": "./dist/components/ui/core/sources/sources.d.ts"
     },
+    "./components/switch": {
+      "import": "./dist/components/ui/core/switch/switch.js",
+      "types": "./dist/components/ui/core/switch/switch.d.ts"
+    },
     "./components/tabs": {
       "import": "./dist/components/ui/core/tabs/tabs.js",
       "types": "./dist/components/ui/core/tabs/tabs.d.ts"
@@ -211,6 +227,14 @@
       "import": "./dist/components/ui/core/chart/index.js",
       "types": "./dist/components/ui/core/chart/index.d.ts"
     },
+    "./highlight-code": {
+      "import": "./dist/lib/highlight-code.js",
+      "types": "./dist/lib/highlight-code.d.ts"
+    },
+    "./icons": {
+      "import": "./dist/icons/index.js",
+      "types": "./dist/icons/index.d.ts"
+    },
     "./utils": {
       "import": "./dist/lib/utils.js",
       "types": "./dist/lib/utils.d.ts"
@@ -235,7 +259,7 @@
     "DESIGN.md"
   ],
   "dependencies": {
-    "@base-ui/react": "^1.1.0",
+    "@base-ui/react": "^1.6.0",
     "@streamdown/mermaid": "^1.0.2",
     "@tabler/icons-react": "^3.35.0",
     "class-variance-authority": "^0.7.1",
@@ -258,14 +282,16 @@
     "@storybook/react-vite": "10.3.5",
     "@swc-node/register": "1.11.1",
     "@tailwindcss/vite": "^4.3.1",
+    "@tanstack/react-table": "^8.7.4",
+    "@tanstack/react-virtual": "^3.10.8",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "18.3.14",
     "@types/react-dom": "18.3.2",
-    "@vitejs/plugin-react": "^5.1.4",
-    "@vitest/browser": "^4.1.6",
-    "@vitest/browser-playwright": "^4.1.6",
+    "@vitejs/plugin-react": "^5.2.0",
+    "@vitest/browser": "^4.1.10",
+    "@vitest/browser-playwright": "^4.1.10",
     "eslint": "9.39.4",
     "eslint-plugin-check-file": "^2.7.1",
     "react": "^18.3.1",
@@ -276,17 +302,25 @@
     "tailwindcss": "^4.3.1",
     "typescript": "5.8.3",
     "typescript-eslint": "^8.57.1",
-    "vite": "7.3.2",
+    "vite": "^8.1.4",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.1.6"
+    "vitest": "^4.1.10"
   },
   "peerDependencies": {
-    "eslint": "9.39.4",
+    "@tanstack/react-table": "^8.7.4",
+    "@tanstack/react-virtual": "^3.10.8",
+    "eslint": "^9.6.0 || ^10.0.0",
     "react": "^18.3.1",
     "recharts": "^3.7.0",
     "tailwindcss": "^4.1.17"
   },
   "peerDependenciesMeta": {
+    "@tanstack/react-table": {
+      "optional": true
+    },
+    "@tanstack/react-virtual": {
+      "optional": true
+    },
     "recharts": {
       "optional": true
     },

package/dist/components/ui/core/date-time-pickers/shared/calendar/calendar.js

@@ -1,119 +0,0 @@
-import { jsxs as x, jsx as l } from "react/jsx-runtime";
-import C from "react";
-import { cn as b } from "../../../../../../lib/utils.js";
-import { getCalendarDays as E, getWeekdayNames as O, getWeekNumbers as T, isDateInRange as v, isSameDay as f, isToday as B, isOutsideMonth as K } from "../../utils/calendar-utils.js";
-import { CalendarHeader as P } from "../calendar-header/calendar-header.js";
-import { DAYS_IN_WEEK as p } from "../constants.js";
-function _({
-  isOutsideMonth: r,
-  isSelected: t,
-  isToday: s,
-  isRangeStart: o,
-  isRangeEnd: c,
-  isInRange: a,
-  isInHoverRange: i
-}) {
-  return b(
-    "w-9 h-9 flex items-center justify-center text-sm font-medium cursor-pointer select-none relative transition-colors",
-    "focus-visible:ring-2 focus-visible:ring-border focus-visible:outline-none",
-    // border-radius for range endpoints
-    o && c && "rounded-lg",
-    o && !c && "rounded-l-lg",
-    c && !o && "rounded-r-lg",
-    // selected day
-    t && "bg-primary-background text-foreground-on-primary hover:bg-primary-background",
-    // unselected text
-    !t && r && "text-muted-foreground/50",
-    !t && !r && (a || i) ? "text-foreground" : !t && !r && "text-secondary-foreground",
-    // range highlight
-    !t && (a || i) && "bg-accent-background",
-    !t && "hover:bg-accent-background hover:rounded-lg hover:text-foreground",
-    // today outline
-    s && !t && "border border-border rounded-lg"
-  );
-}
-const W = ({
-  displayedMonth: r,
-  selectedRange: t,
-  hoverDate: s,
-  displayWeekNumber: o = !1,
-  onDateClick: c,
-  onMonthChange: a,
-  onDateHover: i,
-  className: N
-}) => {
-  const [n, m] = t, h = E(r), M = O(), k = o ? T(h) : [], Y = () => {
-    a(r.subtract(1, "month"));
-  }, D = () => {
-    a(r.add(1, "month"));
-  }, w = (e) => {
-    const d = {
-      isOutsideMonth: K(e, r),
-      isToday: B(e),
-      isSelected: f(e, n) || f(e, m),
-      isRangeStart: f(e, n),
-      isRangeEnd: f(e, m),
-      isInRange: v(e, n, m),
-      isInHoverRange: !1
-    };
-    if (s && n && !m) {
-      const u = n.isBefore(s) ? n : s, g = n.isBefore(s) ? s : n;
-      d.isInHoverRange = v(e, u, g);
-    }
-    return d;
-  };
-  return /* @__PURE__ */ x("div", { "data-slot": "calendar", className: b("flex flex-col gap-4", N), children: [
-    /* @__PURE__ */ l(
-      P,
-      {
-        displayedMonth: r,
-        onPrevMonth: Y,
-        onNextMonth: D,
-        onMonthChange: a
-      }
-    ),
-    /* @__PURE__ */ x(
-      "div",
-      {
-        className: b(
-          "grid gap-0",
-          o ? "grid-cols-calendar-weeks" : "grid-cols-calendar"
-        ),
-        children: [
-          o && /* @__PURE__ */ l("div", { className: "text-xs font-semibold text-muted-foreground text-center py-2 px-1", children: "#" }),
-          M.map((e) => /* @__PURE__ */ l(
-            "div",
-            {
-              className: "text-xs font-medium text-muted-foreground text-center py-2 px-1 tracking-tighter",
-              children: e
-            },
-            e
-          )),
-          h.map((e, d) => {
-            const u = w(e), g = Math.floor(d / p), I = o && d % p === 0, j = `day-${e.format("YYYY-MM-DD")}`;
-            return /* @__PURE__ */ x(C.Fragment, { children: [
-              I && /* @__PURE__ */ l("div", { className: "text-xs text-muted-foreground text-center flex items-center justify-center h-9", children: k[g] }),
-              /* @__PURE__ */ l(
-                "div",
-                {
-                  className: _(u),
-                  onClick: () => c(e),
-                  onMouseEnter: () => i?.(e),
-                  onMouseLeave: () => i?.(null),
-                  role: "gridcell",
-                  tabIndex: 0,
-                  "aria-label": e.format("DD MMMM YYYY"),
-                  "aria-selected": u.isSelected,
-                  children: e.date()
-                }
-              )
-            ] }, j);
-          })
-        ]
-      }
-    )
-  ] });
-};
-export {
-  W as Calendar
-};

package/dist/components/ui/core/date-time-pickers/shared/calendar-header/calendar-header.js

@@ -1,93 +0,0 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { IconChevronLeft as h, IconChevronRight as u, IconChevronDown as p } from "@tabler/icons-react";
-import i from "dayjs";
-import { cn as N } from "../../../../../../lib/utils.js";
-import { Button as l } from "../../../button/button.js";
-import { DropdownMenu as g, DropdownMenuTrigger as v, DropdownMenuContent as x, DropdownMenuItem as w } from "../../../dropdown-menu/dropdown-menu.js";
-const M = Array.from(
-  { length: 12 },
-  (r, a) => i().month(a).format("MMMM")
-), c = i().year() - 50, b = i().year() + 10, z = Array.from(
-  { length: b - c + 1 },
-  (r, a) => c + a
-), d = ({
-  label: r,
-  items: a,
-  onSelect: s
-}) => /* @__PURE__ */ t(g, { modal: !1, children: [
-  /* @__PURE__ */ e(
-    v,
-    {
-      render: /* @__PURE__ */ t(
-        l,
-        {
-          variant: "ghost",
-          size: "sm",
-          className: "h-7 px-2 gap-1 text-sm font-medium text-secondary-foreground",
-          children: [
-            r,
-            /* @__PURE__ */ e(p, { className: "size-4" })
-          ]
-        }
-      )
-    }
-  ),
-  /* @__PURE__ */ e(x, { className: "max-h-60 overflow-y-auto", children: a.map(({ value: n, label: m }) => /* @__PURE__ */ e(w, { onClick: () => s(n), children: m }, n)) })
-] }), E = ({
-  displayedMonth: r,
-  onPrevMonth: a,
-  onNextMonth: s,
-  onMonthChange: n,
-  className: m
-}) => /* @__PURE__ */ t(
-  "div",
-  {
-    "data-slot": "calendar-header",
-    className: N("flex items-center justify-between pt-1 w-full", m),
-    children: [
-      /* @__PURE__ */ e(
-        l,
-        {
-          variant: "ghost",
-          size: "icon-sm",
-          className: "size-7 rounded-md text-secondary-foreground",
-          onClick: a,
-          "aria-label": "Previous month",
-          children: /* @__PURE__ */ e(h, { className: "size-4" })
-        }
-      ),
-      /* @__PURE__ */ t("div", { className: "flex items-center gap-0.5", children: [
-        /* @__PURE__ */ e(
-          d,
-          {
-            label: r.format("MMMM"),
-            items: M.map((o, f) => ({ value: f, label: o })),
-            onSelect: (o) => n(r.date(1).month(o))
-          }
-        ),
-        /* @__PURE__ */ e(
-          d,
-          {
-            label: r.format("YYYY"),
-            items: z.map((o) => ({ value: o, label: String(o) })),
-            onSelect: (o) => n(r.date(1).year(o))
-          }
-        )
-      ] }),
-      /* @__PURE__ */ e(
-        l,
-        {
-          variant: "ghost",
-          size: "icon-sm",
-          className: "size-7 rounded-md text-secondary-foreground",
-          onClick: s,
-          "aria-label": "Next month",
-          children: /* @__PURE__ */ e(u, { className: "size-4" })
-        }
-      )
-    ]
-  }
-);
-export {
-  E as CalendarHeader
-};

package/dist/components/ui/core/date-time-pickers/shared/constants.js

@@ -1,14 +0,0 @@
-const _ = 24, N = 12, U = 60, o = 1, t = 7, E = 9, T = 0, c = 0, n = 23, s = 59, I = 0;
-export {
-  t as DAYS_IN_WEEK,
-  T as DEFAULT_MINUTE,
-  E as DEFAULT_START_HOUR,
-  n as END_OF_DAY_HOUR,
-  s as END_OF_DAY_MINUTE,
-  N as HOURS_IN_12H,
-  _ as HOURS_IN_DAY,
-  I as MIDNIGHT_HOUR,
-  U as MINUTES_IN_HOUR,
-  o as MINUTE_INCREMENT,
-  c as START_OF_DAY_HOUR
-};

package/dist/components/ui/core/date-time-pickers/utils/calendar-utils.js

@@ -1,52 +0,0 @@
-import r from "dayjs";
-import c from "dayjs/plugin/isBetween.js";
-import d from "dayjs/plugin/isSameOrBefore.js";
-import m from "dayjs/plugin/weekOfYear.js";
-import { DAYS_IN_WEEK as u } from "../shared/constants.js";
-r.extend(c);
-r.extend(d);
-r.extend(m);
-function p(e, t) {
-  const n = e, a = n.startOf("month").startOf("week"), i = n.endOf("month").endOf("week"), f = [];
-  let s = a;
-  for (; s.isSameOrBefore(i, "day"); )
-    f.push(s), s = s.add(1, "day");
-  return f;
-}
-function g(e, t, n) {
-  return !t || !n || !e.isValid() || !t.isValid() || !n.isValid() || t.isAfter(n, "day") ? !1 : e.isBetween(t, n, "day", "[]");
-}
-function b(e, t) {
-  return e.month() !== t.month();
-}
-function M(e, t) {
-  return e.isSame(r(), "day");
-}
-function S(e, t) {
-  const a = r().startOf("week");
-  return Array.from({ length: u }, (l, i) => a.add(i, "day").format("dd"));
-}
-function y(e) {
-  return e.week();
-}
-function W(e) {
-  const t = [];
-  for (let n = 0; n < e.length; n += u) {
-    const o = e[n];
-    o && t.push(y(o));
-  }
-  return t;
-}
-function N(e, t) {
-  return !e || !t ? !1 : e.isSame(t, "day");
-}
-export {
-  p as getCalendarDays,
-  y as getWeekNumber,
-  W as getWeekNumbers,
-  S as getWeekdayNames,
-  g as isDateInRange,
-  b as isOutsideMonth,
-  N as isSameDay,
-  M as isToday
-};