@cognite/aura 0.3.0 → 0.3.1

package/dist/components/ui/core/alert/alert.js

@@ -1,11 +1,11 @@
 import { jsx as a, jsxs as N } from "react/jsx-runtime";
-import { forwardRef as l, useMemo as k, useContext as g, createContext as C } from "react";
+import { createContext as k, forwardRef as l, useMemo as C, useContext as g } from "react";
 import { IconX as S, IconInfoCircleFilled as I, IconAlertCircleFilled as V, IconAlertTriangleFilled as z } from "@tabler/icons-react";
 import { cva as v } from "class-variance-authority";
 import { useControllableState as _ } from "../../../../lib/use-controllable-state.js";
 import { cn as s } from "../../../../lib/utils.js";
 import { Button as b } from "../button/button.js";
-const i = C({
+const i = k({
   show: !0,
   setShow: () => {
   },
@@ -65,7 +65,7 @@ const j = l(
       defaultProp: n,
       prop: o,
       onChange: d
-    }), u = t === "secondary" ? "info" : t ?? "default", A = k(() => ({ show: p, setShow: x, variant: u, alertStyle: e }), [p, x, u, e]);
+    }), u = t === "secondary" ? "info" : t ?? "default", A = C(() => ({ show: p, setShow: x, variant: u, alertStyle: e }), [p, x, u, e]);
     if (!p)
       return null;
     const h = c !== void 0 ? c : T(u);

package/dist/components/ui/core/banner/banner.js

@@ -1,11 +1,11 @@
 import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as l, useMemo as k, useContext as b, useState as w, useRef as B, useEffect as N, useCallback as y, createContext as C } from "react";
+import { createContext as k, forwardRef as l, useMemo as w, useContext as b, useState as B, useRef as N, useEffect as y, useCallback as C } from "react";
 import { cva as V } from "class-variance-authority";
 import { cn as u } from "../../../../lib/utils.js";
 import { Badge as S } from "../badge/badge.js";
 import { Button as A } from "../button/button.js";
 const R = (e) => {
-}, m = C({
+}, m = k({
   show: !0,
   setShow: R,
   variant: "default"
@@ -18,11 +18,11 @@ function j({
   defaultVisible: t,
   onClose: n
 }) {
-  const [r, a] = w(t), i = e !== void 0, g = i ? e : r, d = B(n);
-  N(() => {
+  const [r, a] = B(t), i = e !== void 0, g = i ? e : r, d = N(n);
+  y(() => {
     d.current = n;
   }, [n]);
-  const x = y(
+  const x = C(
     (o) => {
       if (i) {
         (p(o) ? o(e) : o) || d.current?.();
@@ -72,7 +72,7 @@ const I = V(
       defaultVisible: n,
       visible: t,
       onClose: r
-    }), h = k(
+    }), h = w(
       () => ({ show: c ?? !0, setShow: f, variant: o }),
       [c, f, o]
     );

package/dist/components/ui/core/button/button.js

@@ -2,9 +2,9 @@ import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as g } from "react";
 import { Button as b } from "@base-ui/react/button";
 import { cva as c } from "class-variance-authority";
-import { cn as u, focusRing as f, focusRingDestructive as l } from "../../../../lib/utils.js";
+import { focusRing as u, focusRingDestructive as f, cn as l } from "../../../../lib/utils.js";
 const v = c(
-  `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm leading-4.5 tracking-normal font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 ${f} aria-invalid:focus-visible:shadow-focus-ring-destructive`,
+  `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm leading-4.5 tracking-normal font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 ${u} aria-invalid:focus-visible:shadow-focus-ring-destructive`,
   {
     variants: {
       variant: {
@@ -15,7 +15,7 @@ const v = c(
         outline: "border border-border-emphasized bg-background text-foreground hover:bg-accent-background disabled:border-transparent disabled:bg-disabled-background",
         ghost: "hover:bg-accent-background",
         ghostOnDark: "text-foreground-fixed-light hover:bg-secondary-background-fixed-dark disabled:opacity-100 disabled:text-disabled-foreground-fixed-dark",
-        destructive: `bg-destructive-background text-destructive-foreground-on-critical hover:bg-destructive-background-hover ${l}`
+        destructive: `bg-destructive-background text-destructive-foreground-on-critical hover:bg-destructive-background-hover ${f}`
       },
       size: {
         default: "h-9 px-3 has-[>svg]:px-3",
@@ -39,7 +39,7 @@ const v = c(
       "data-slot": "button",
       render: e,
       nativeButton: t ?? (e ? !1 : void 0),
-      className: u(v({ variant: d, size: a, className: r })),
+      className: l(v({ variant: d, size: a, className: r })),
       ...i,
       children: o
     }

package/dist/components/ui/core/checkbox/checkbox.js

@@ -3,7 +3,7 @@ import { forwardRef as r } from "react";
 import { Checkbox as i } from "@base-ui/react/checkbox";
 import { IconCheck as l, IconMinus as b } from "@tabler/icons-react";
 import { cva as m } from "class-variance-authority";
-import { cn as d, invalidState as h, focusState as k, selectionItemDescription as u, selectionItemLabel as x, selectionItemBase as p, selectionItemCard as g, selectionItemDefault as f } from "../../../../lib/utils.js";
+import { cn as d, selectionItemBase as h, selectionItemCard as k, selectionItemDefault as u, invalidState as x, focusState as p, selectionItemLabel as g, selectionItemDescription as f } from "../../../../lib/utils.js";
 const I = r(
   ({ className: a, orientation: e = "vertical", role: t = "group", ...c }, n) => /* @__PURE__ */ o(
     "div",
@@ -21,11 +21,11 @@ const I = r(
   )
 );
 I.displayName = "CheckboxGroup";
-const C = m(d("group/checkbox-item", p), {
+const C = m(d("group/checkbox-item", h), {
   variants: {
     variant: {
-      default: f,
-      card: g
+      default: u,
+      card: k
     }
   },
   defaultVariants: {
@@ -55,8 +55,8 @@ const N = r(({ className: a, ...e }, t) => /* @__PURE__ */ o(
       "data-unchecked:not-data-disabled:hover:border-secondary-foreground group-hover/checkbox-item:data-unchecked:not-data-disabled:border-secondary-foreground",
       "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:border-transparent data-disabled:bg-disabled-background data-disabled:text-disabled-foreground data-disabled:data-unchecked:border-border",
       "[&[data-checked]_[data-slot=checkbox-check]]:block [&[data-indeterminate]_[data-slot=checkbox-dash]]:block",
-      k,
-      h,
+      p,
+      x,
       a
     ),
     ...e,
@@ -97,7 +97,7 @@ const y = r(
       ref: t,
       "data-slot": "checkbox-item-label",
       className: d(
-        x,
+        g,
         "group-has-[[data-checked]]/checkbox-item:text-foreground",
         "group-has-[[data-indeterminate]]/checkbox-item:text-foreground",
         "group-has-[[data-disabled]]/checkbox-item:text-disabled-foreground",
@@ -115,7 +115,7 @@ const z = r(
       ref: t,
       "data-slot": "checkbox-item-description",
       className: d(
-        u,
+        f,
         "group-has-[[data-disabled]]/checkbox-item:text-disabled-foreground",
         a
       ),

package/dist/components/ui/core/code-block/code-block.js

@@ -1,9 +1,9 @@
 import { jsxs as L, jsx as r } from "react/jsx-runtime";
-import { forwardRef as w, useState as x, useMemo as D, useEffect as F, useContext as H, createContext as O } from "react";
-import { IconSelector as K, IconCheck as V, IconCopy as $, IconDownload as q } from "@tabler/icons-react";
+import { createContext as F, forwardRef as w, useState as x, useMemo as D, useEffect as O, useContext as H } from "react";
+import { IconCheck as K, IconCopy as V, IconSelector as $, IconDownload as q } from "@tabler/icons-react";
 import { isStorybookTestEnv as v, highlightCode as M, cn as f } from "../../../../lib/utils.js";
 import { Button as S } from "../button/button.js";
-const I = O({
+const I = F({
   code: "",
   copyText: "",
   isCollapsed: !1,
@@ -48,7 +48,7 @@ const ee = "min(60vh, 32rem)", oe = "dark:hidden [&>pre]:m-0 [&>pre]:min-h-10 [&
       () => v ? `<pre><code>${P(s)}</code></pre>` : "",
       [s]
     );
-    F(() => {
+    O(() => {
       if (v) return;
       let g = !1;
       const B = (u) => {
@@ -183,7 +183,7 @@ const re = w(
           c instanceof Error ? c : new Error("Clipboard write failed")
         );
       }
-    }, p = C ? V : $;
+    }, p = C ? K : V;
     return /* @__PURE__ */ r(
       S,
       {
@@ -213,7 +213,7 @@ const le = w(
         size: "icon-sm",
         variant: "secondary",
         ...n,
-        children: e ?? /* @__PURE__ */ r(K, { size: 14 })
+        children: e ?? /* @__PURE__ */ r($, { size: 14 })
       }
     );
   }

package/dist/components/ui/core/date-time-pickers/date-picker/date-picker.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { Dayjs } from 'dayjs';
+import { ShortcutItem } from '../shared/shortcuts-panel/shortcuts-panel';
+export type { ShortcutItem };
+export interface DatePickerProps {
+    value: Dayjs | null;
+    onChange: (date: Dayjs | null) => void;
+    format?: string;
+    placeholder?: string;
+    displayWeekNumber?: boolean;
+    shortcuts?: ShortcutItem[];
+    defaultDate?: Dayjs;
+    className?: string;
+}
+export declare const DatePicker: FC<DatePickerProps>;

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

@@ -0,0 +1,84 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { cn as x } from "../../../../../lib/utils.js";
+import { Popover as M, PopoverTrigger as N, PopoverContent as w } from "../../popover/popover.js";
+import { Calendar as R } from "../shared/calendar/calendar.js";
+import { DateTimeInput as S } from "../shared/date-time-input/date-time-input.js";
+import { ShortcutsPanel as Y } from "../shared/shortcuts-panel/shortcuts-panel.js";
+import { useDatePicker as y } from "./use-date-picker.js";
+const T = (o) => o ? [o, o] : [null, null], z = ({
+  value: o,
+  onChange: r,
+  format: i = "DD/MM/YYYY",
+  placeholder: c,
+  displayWeekNumber: d = !1,
+  shortcuts: n,
+  defaultDate: p,
+  className: s
+}) => {
+  const {
+    isOpen: l,
+    displayedMonth: m,
+    tempDate: t,
+    handleTogglePopover: h,
+    handleCancel: f,
+    handleDateClick: u,
+    handleMonthChange: v,
+    handleApplyShortcut: g,
+    inputRef: C,
+    popoverRef: D
+  } = y({ value: o, onChange: r, defaultDate: p }), k = l ? t : o;
+  return /* @__PURE__ */ e("div", { "data-slot": "date-picker", className: x("relative w-full", s), children: /* @__PURE__ */ a(
+    M,
+    {
+      open: l,
+      onOpenChange: (P) => {
+        P || f();
+      },
+      children: [
+        /* @__PURE__ */ e(N, { render: /* @__PURE__ */ e("div", { ref: C, className: "w-full" }), children: /* @__PURE__ */ e(
+          S,
+          {
+            value: k,
+            format: i,
+            placeholder: c,
+            onClick: h,
+            isOpen: l,
+            variant: "date"
+          }
+        ) }),
+        /* @__PURE__ */ e(
+          w,
+          {
+            ref: D,
+            className: "rounded-xl w-auto p-0",
+            side: "bottom",
+            align: "start",
+            children: /* @__PURE__ */ a("div", { "data-slot": "date-picker-content", className: "flex flex-row", children: [
+              n && n.length > 0 && /* @__PURE__ */ e(
+                Y,
+                {
+                  shortcuts: n,
+                  onShortcutClick: g
+                }
+              ),
+              /* @__PURE__ */ e("div", { className: "p-3", children: /* @__PURE__ */ e(
+                R,
+                {
+                  displayedMonth: m,
+                  selectedRange: T(t),
+                  hoverDate: null,
+                  displayWeekNumber: d,
+                  onDateClick: u,
+                  onMonthChange: v
+                }
+              ) })
+            ] })
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  z as DatePicker
+};

package/dist/components/ui/core/date-time-pickers/date-picker/index.d.ts

@@ -0,0 +1,3 @@
+export { DatePicker } from './date-picker';
+export type { DatePickerProps, ShortcutItem } from './date-picker';
+export type { UseDatePickerProps, UseDatePickerReturn } from './types';

package/dist/components/ui/core/date-time-pickers/date-picker/types.d.ts

@@ -0,0 +1,18 @@
+import { Dayjs } from 'dayjs';
+export interface UseDatePickerProps {
+    value: Dayjs | null;
+    onChange: (date: Dayjs | null) => void;
+    defaultDate?: Dayjs;
+}
+export interface UseDatePickerReturn {
+    isOpen: boolean;
+    displayedMonth: Dayjs;
+    tempDate: Dayjs | null;
+    handleTogglePopover: () => void;
+    handleCancel: () => void;
+    handleDateClick: (date: Dayjs) => void;
+    handleMonthChange: (month: Dayjs) => void;
+    handleApplyShortcut: (shortcutValue: Dayjs | [Dayjs, Dayjs] | [Dayjs | null, Dayjs | null]) => void;
+    inputRef: React.RefObject<HTMLDivElement>;
+    popoverRef: React.RefObject<HTMLDivElement>;
+}

package/dist/components/ui/core/date-time-pickers/date-picker/use-date-picker.d.ts

@@ -0,0 +1,3 @@
+import { UseDatePickerProps, UseDatePickerReturn } from './types';
+export type { UseDatePickerProps, UseDatePickerReturn };
+export declare const useDatePicker: ({ value, onChange, defaultDate, }: UseDatePickerProps) => UseDatePickerReturn;

package/dist/components/ui/core/date-time-pickers/date-picker/use-date-picker.js

@@ -0,0 +1,63 @@
+import { useRef as c, useCallback as p, useEffect as A } from "react";
+import C from "dayjs";
+import { usePopoverState as R } from "../shared/hooks/use-popover-state.js";
+import { useSingleDateState as B } from "../shared/hooks/use-single-date-state.js";
+const I = ({
+  value: a,
+  onChange: t,
+  defaultDate: d = C()
+}) => {
+  const r = c(() => {
+  }), s = c(() => {
+  }), {
+    isOpen: l,
+    setIsOpen: o,
+    popoverRef: f,
+    inputRef: i,
+    handleTogglePopover: h
+  } = R({
+    onClose: p(() => r.current(), []),
+    onBackspace: p(() => s.current(), [])
+  }), u = B({
+    value: a,
+    defaultDate: d,
+    onDateSelected: (e) => {
+      t(e), o(!1);
+    }
+  }), {
+    tempDate: m,
+    displayedMonth: g,
+    handleDateClick: D,
+    handleMonthChange: S,
+    clearDate: k,
+    resetDate: y
+  } = u, n = () => {
+    y(a);
+  }, P = () => {
+    k() && t(null);
+  };
+  return A(() => {
+    r.current = n, s.current = P;
+  }), {
+    isOpen: l,
+    displayedMonth: g,
+    tempDate: m,
+    handleTogglePopover: () => {
+      l || n(), h();
+    },
+    handleCancel: () => {
+      n(), o(!1);
+    },
+    handleDateClick: D,
+    handleMonthChange: S,
+    handleApplyShortcut: (e) => {
+      const v = Array.isArray(e) ? e[0] : e;
+      t(v), o(!1);
+    },
+    inputRef: i,
+    popoverRef: f
+  };
+};
+export {
+  I as useDatePicker
+};

package/dist/components/ui/core/date-time-pickers/index.d.ts

@@ -1,3 +1,5 @@
+export { DatePicker } from './date-picker';
+export type { DatePickerProps } from './date-picker';
 export { DateRangePicker } from './date-range-picker';
 export type { DateRangePickerProps } from './date-range-picker';
 export { DateTimeRangePicker } from './date-time-range-picker';

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

@@ -0,0 +1,8 @@
+import { DatePicker as o } from "./date-picker/date-picker.js";
+import { DateRangePicker as a } from "./date-range-picker/date-range-picker.js";
+import { DateTimeRangePicker as m } from "./date-time-range-picker/date-time-range-picker.js";
+export {
+  o as DatePicker,
+  a as DateRangePicker,
+  m as DateTimeRangePicker
+};

package/dist/components/ui/core/date-time-pickers/shared/hooks/use-single-date-state.d.ts

@@ -0,0 +1,23 @@
+import { Dayjs } from 'dayjs';
+export interface UseSingleDateStateOptions {
+    value: Dayjs | null;
+    defaultDate: Dayjs;
+    /** Transforms a clicked date before storing; pass time-of-day defaults for datetime variants. */
+    mapDate?: (date: Dayjs) => Dayjs;
+    /** Called when a date is selected; used for auto-apply in date-only variants. */
+    onDateSelected?: (date: Dayjs) => void;
+}
+export interface UseSingleDateStateReturn {
+    tempDate: Dayjs | null;
+    displayedMonth: Dayjs;
+    /** Synchronous ref — use inside callbacks to avoid stale closures. */
+    stateRef: React.MutableRefObject<{
+        tempDate: Dayjs | null;
+    }>;
+    handleDateClick: (date: Dayjs) => void;
+    handleMonthChange: (month: Dayjs) => void;
+    /** Returns true when a date was cleared, false when already empty. */
+    clearDate: () => boolean;
+    resetDate: (value: Dayjs | null) => void;
+}
+export declare const useSingleDateState: ({ value, defaultDate, mapDate, onDateSelected, }: UseSingleDateStateOptions) => UseSingleDateStateReturn;

package/dist/components/ui/core/date-time-pickers/shared/hooks/use-single-date-state.js

@@ -0,0 +1,32 @@
+import { useState as l, useRef as i } from "react";
+const g = ({
+  value: e,
+  defaultDate: a,
+  mapDate: r,
+  onDateSelected: D
+}) => {
+  const [p, h] = l(e), [u, o] = l(
+    () => e ?? a
+  ), n = i({ tempDate: e }), s = (t) => {
+    n.current.tempDate = t, h(t);
+  };
+  return {
+    tempDate: p,
+    displayedMonth: u,
+    stateRef: n,
+    handleDateClick: (t) => {
+      const c = r ? r(t) : t;
+      s(c), D?.(c);
+    },
+    handleMonthChange: (t) => {
+      o(t);
+    },
+    clearDate: () => n.current.tempDate === null ? !1 : (s(null), !0),
+    resetDate: (t) => {
+      s(t), o(t ?? a);
+    }
+  };
+};
+export {
+  g as useSingleDateState
+};

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

@@ -1,7 +1,7 @@
 import r from "dayjs";
-import c from "dayjs/plugin/isBetween";
-import d from "dayjs/plugin/isSameOrBefore";
-import m from "dayjs/plugin/weekOfYear";
+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);

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

@@ -1,5 +1,5 @@
 import m from "dayjs";
-import u from "dayjs/plugin/customParseFormat";
+import u from "dayjs/plugin/customParseFormat.js";
 import { HOURS_IN_12H as t, HOURS_IN_DAY as f, MINUTES_IN_HOUR as s, MINUTE_INCREMENT as o } from "../shared/constants.js";
 m.extend(u);
 const c = (r = "24h") => r === "12h" ? Array.from({ length: t }, (e, n) => n + 1) : Array.from({ length: f }, (e, n) => n), M = () => Array.from(

package/dist/components/ui/core/hover-card/hover-card.js

@@ -1,15 +1,15 @@
 import { jsx as t } from "react/jsx-runtime";
-import { useMemo as p, forwardRef as l, useContext as f, createContext as u } from "react";
+import { createContext as p, forwardRef as l, useContext as f, useMemo as u } from "react";
 import { PreviewCard as d } from "@base-ui/react/preview-card";
 import { usePortalContainer as g } from "../../../../lib/portal-container-context.js";
 import { cn as v } from "../../../../lib/utils.js";
-const m = u(null);
+const m = p(null);
 function w({
   openDelay: o,
   closeDelay: e,
   ...a
 }) {
-  const r = p(
+  const r = u(
     () => ({ openDelay: o, closeDelay: e }),
     [o, e]
   );

package/dist/components/ui/core/input/input.js

@@ -8,7 +8,7 @@ const u = o(
       ref: a,
       "data-slot": "input",
       className: l(
-        "w-full",
+        "w-full h-9",
         d,
         s,
         p,