@cognite/aura 0.2.0 → 0.3.0

package/dist/components/ui/core/date-time-pickers/shared/am-pm-scroll/am-pm-scroll.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export type AmPmScrollProps = {
+    value: 'AM' | 'PM' | null;
+    onChange: (value: 'AM' | 'PM') => void;
+    className?: string;
+};
+export declare const AmPmScroll: FC<AmPmScrollProps>;

package/dist/components/ui/core/date-time-pickers/shared/am-pm-scroll/am-pm-scroll.js

@@ -0,0 +1,57 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useRef as s, useEffect as L } from "react";
+import { cn as l } from "../../../../../../lib/utils.js";
+import { SCROLL_ITEM_SELECTED_CLASSES as _, SCROLL_ITEM_UNSELECTED_CLASSES as C, SCROLL_ITEM_BASE_CLASSES as a, SCROLL_CONTAINER_CLASSES as d } from "../scroll-cell-classes.js";
+const A = ["AM", "PM"], p = ({
+  value: e,
+  onChange: c,
+  className: S
+}) => {
+  const r = s(null), n = s(null);
+  L(() => {
+    if (e !== null && n.current && r.current) {
+      const o = r.current, t = n.current;
+      o.scrollTo({
+        top: t.offsetTop - o.offsetHeight / 2 + t.offsetHeight / 2,
+        behavior: "smooth"
+      });
+    }
+  }, [e]);
+  const f = (o, t) => {
+    (o.key === "Enter" || o.key === " ") && (o.preventDefault(), c(t));
+  };
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      "data-slot": "am-pm-scroll",
+      ref: r,
+      role: "listbox",
+      "aria-label": "AM/PM",
+      "aria-orientation": "vertical",
+      className: l(d, S),
+      children: A.map((o) => {
+        const t = e !== null && o === e;
+        return /* @__PURE__ */ i(
+          "div",
+          {
+            ref: t ? n : void 0,
+            tabIndex: 0,
+            className: l(
+              a,
+              t ? _ : C
+            ),
+            onClick: () => c(o),
+            onKeyDown: (E) => f(E, o),
+            role: "option",
+            "aria-selected": t,
+            children: o
+          },
+          o
+        );
+      })
+    }
+  );
+};
+export {
+  p as AmPmScroll
+};

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

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { Dayjs } from 'dayjs';
+export interface CalendarProps {
+    displayedMonth: Dayjs;
+    selectedRange: [Dayjs | null, Dayjs | null];
+    hoverDate: Dayjs | null;
+    displayWeekNumber?: boolean;
+    onDateClick: (date: Dayjs) => void;
+    onMonthChange: (month: Dayjs) => void;
+    onDateHover?: (date: Dayjs | null) => void;
+    className?: string;
+}
+export declare const Calendar: FC<CalendarProps>;

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

@@ -0,0 +1,119 @@
+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 _, getWeekdayNames as E, getWeekNumbers as O, isDateInRange as v, isSameDay as f, isToday as T, isOutsideMonth as B } from "../../utils/calendar-utils.js";
+import { CalendarHeader as K } from "../calendar-header/calendar-header.js";
+import { DAYS_IN_WEEK as p } from "../constants.js";
+function P({
+  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 = _(r), M = E(), k = o ? O(h) : [], Y = () => {
+    a(r.subtract(1, "month"));
+  }, D = () => {
+    a(r.add(1, "month"));
+  }, w = (e) => {
+    const d = {
+      isOutsideMonth: B(e, r),
+      isToday: T(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(
+      K,
+      {
+        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: P(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.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { Dayjs } from 'dayjs';
+export interface CalendarHeaderProps {
+    displayedMonth: Dayjs;
+    onPrevMonth: () => void;
+    onNextMonth: () => void;
+    onMonthChange: (month: Dayjs) => void;
+    className?: string;
+}
+export declare const CalendarHeader: FC<CalendarHeaderProps>;

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

@@ -0,0 +1,93 @@
+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.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Shared numeric constants for date/time picker components.
+ * Colors and typography are applied via Tailwind utility classes — no CSS
+ * variable strings are exported from here.
+ */
+export declare const HOURS_IN_DAY = 24;
+export declare const HOURS_IN_12H = 12;
+export declare const MINUTES_IN_HOUR = 60;
+export declare const MINUTE_INCREMENT = 1;
+export declare const DAYS_IN_WEEK = 7;
+export declare const DEFAULT_START_HOUR = 9;
+export declare const DEFAULT_END_HOUR = 17;
+export declare const DEFAULT_MINUTE = 0;
+export declare const START_OF_DAY_HOUR = 0;
+export declare const END_OF_DAY_HOUR = 23;
+export declare const END_OF_DAY_MINUTE = 59;
+export declare const DEFAULT_START_AMPM: 'AM' | 'PM';
+export declare const DEFAULT_END_AMPM: 'AM' | 'PM';
+export declare const NOON_HOUR = 12;
+export declare const MIDNIGHT_HOUR = 0;

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

@@ -0,0 +1,14 @@
+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/shared/date-time-input/date-time-input.d.ts

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { Dayjs } from 'dayjs';
+export declare const DEFAULT_ARIA_LABEL = "Date picker";
+export type DateTimeInputVariant = 'date' | 'time' | 'datetime';
+export type RangePart = 'start' | 'end';
+export interface DateTimeInputProps {
+    value: [Dayjs | null, Dayjs | null] | Dayjs | null;
+    format: string;
+    placeholder?: string;
+    onClick: () => void;
+    isOpen: boolean;
+    className?: string;
+    ariaLabel?: string;
+    variant?: DateTimeInputVariant;
+    activeRangePart?: RangePart;
+    onRangePartClick?: (part: RangePart) => void;
+    popoverId?: string;
+}
+export declare const DateTimeInput: FC<DateTimeInputProps>;

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

@@ -0,0 +1,99 @@
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
+import { IconCalendarClock as A, IconClock as I, IconCalendar as y } from "@tabler/icons-react";
+import { cn as a } from "../../../../../../lib/utils.js";
+import { Input as D } from "../../../input/input.js";
+import { RangeInputDisplay as R } from "./range-input-display.js";
+const v = "Date picker", C = () => {
+}, p = {
+  date: /* @__PURE__ */ r(y, { "aria-label": "date-icon", className: "size-4" }),
+  time: /* @__PURE__ */ r(I, { "aria-label": "time-icon", className: "size-4" }),
+  datetime: /* @__PURE__ */ r(A, { "aria-label": "datetime-icon", className: "size-4" })
+}, g = (e, o) => a(
+  "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none",
+  "flex items-center justify-center",
+  "transition-colors duration-150",
+  o || e ? "text-foreground" : "text-muted-foreground",
+  "group-hover:text-foreground"
+), _ = ({
+  value: e,
+  format: o,
+  placeholder: b,
+  onClick: n,
+  isOpen: t,
+  className: i,
+  ariaLabel: l = v,
+  variant: s = "date",
+  activeRangePart: f,
+  onRangePartClick: x,
+  popoverId: c
+}) => {
+  if (Array.isArray(e)) {
+    const N = e[0] !== null || e[1] !== null;
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        "data-slot": "date-time-input",
+        className: a(
+          "relative flex items-center cursor-pointer w-full group",
+          i
+        ),
+        onClick: n,
+        role: "combobox",
+        "aria-label": l,
+        "aria-expanded": t,
+        "aria-controls": c,
+        children: [
+          /* @__PURE__ */ r(
+            R,
+            {
+              startDate: e[0],
+              endDate: e[1],
+              format: o,
+              activeRangePart: f,
+              onRangePartClick: x,
+              isOpen: t
+            }
+          ),
+          /* @__PURE__ */ r("div", { className: g(t, N), children: p[s] })
+        ]
+      }
+    );
+  }
+  const d = e?.format(o) ?? "", m = d.length > 0, h = b ?? o;
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      "data-slot": "date-time-input",
+      className: a(
+        "relative flex items-center cursor-pointer w-full group",
+        i
+      ),
+      onClick: n,
+      children: [
+        /* @__PURE__ */ r(
+          D,
+          {
+            value: d,
+            placeholder: h,
+            onChange: C,
+            "aria-label": l,
+            "aria-expanded": t,
+            "aria-controls": c,
+            role: "combobox",
+            className: a(
+              "border-transparent bg-muted-background cursor-pointer caret-transparent pr-9",
+              m ? "text-foreground" : "text-muted-foreground",
+              "hover:border-border-emphasized",
+              t && "!bg-background !text-foreground !border-border"
+            )
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: g(t, m), children: p[s] })
+      ]
+    }
+  );
+};
+export {
+  v as DEFAULT_ARIA_LABEL,
+  _ as DateTimeInput
+};

package/dist/components/ui/core/date-time-pickers/shared/date-time-input/range-input-display.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { Dayjs } from 'dayjs';
+import { RangePart } from './date-time-input';
+export interface RangeInputDisplayProps {
+    startDate: Dayjs | null;
+    endDate: Dayjs | null;
+    format: string;
+    activeRangePart?: RangePart;
+    onRangePartClick?: (part: RangePart) => void;
+    isOpen?: boolean;
+}
+export declare const RangeInputDisplay: FC<RangeInputDisplayProps>;

package/dist/components/ui/core/date-time-pickers/shared/date-time-input/range-input-display.js

@@ -0,0 +1,68 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { cn as n } from "../../../../../../lib/utils.js";
+const a = "px-1 py-0.5 rounded-sm transition-colors duration-150", i = "text-muted-foreground group-hover:text-foreground transition-colors duration-150", x = ({
+  startDate: d,
+  endDate: t,
+  format: e,
+  activeRangePart: s,
+  onRangePartClick: r,
+  isOpen: l
+}) => {
+  const u = d !== null || t !== null, c = (b) => (g) => {
+    r && (g.stopPropagation(), r(b));
+  };
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: n(
+        "flex items-center w-full py-1 px-3 pr-9 border rounded-lg",
+        "text-sm leading-5 h-9 box-border whitespace-nowrap overflow-hidden",
+        "transition-[background,border-color,color,box-shadow] duration-150",
+        l ? "bg-background text-foreground border-border shadow-focus-ring" : [
+          "bg-muted-background border-transparent",
+          "hover:bg-accent-background hover:text-foreground hover:border-border-emphasized",
+          u ? "text-foreground" : "text-muted-foreground"
+        ]
+      ),
+      children: [
+        /* @__PURE__ */ o(
+          "span",
+          {
+            className: n(
+              a,
+              r ? "cursor-pointer" : "cursor-default",
+              s === "start" ? "bg-active-muted-background" : r && "hover:bg-active-muted-background-hover"
+            ),
+            onClick: c("start"),
+            children: d ? d.format(e) : /* @__PURE__ */ o("span", { className: i, children: e })
+          }
+        ),
+        /* @__PURE__ */ o(
+          "span",
+          {
+            className: n(
+              "select-none transition-colors duration-150",
+              u ? "text-foreground" : "text-muted-foreground group-hover:text-foreground"
+            ),
+            children: " – "
+          }
+        ),
+        /* @__PURE__ */ o(
+          "span",
+          {
+            className: n(
+              a,
+              r ? "cursor-pointer" : "cursor-default",
+              s === "end" ? "bg-active-muted-background" : r && "hover:bg-active-muted-background-hover"
+            ),
+            onClick: c("end"),
+            children: t ? t.format(e) : /* @__PURE__ */ o("span", { className: i, children: e })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  x as RangeInputDisplay
+};

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

@@ -0,0 +1,12 @@
+export interface UsePopoverStateOptions {
+    onClose?: () => void;
+    onBackspace?: () => void;
+}
+export interface UsePopoverStateReturn {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    popoverRef: React.RefObject<HTMLDivElement>;
+    inputRef: React.RefObject<HTMLDivElement>;
+    handleTogglePopover: () => void;
+}
+export declare const usePopoverState: (options?: UsePopoverStateOptions) => UsePopoverStateReturn;

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

@@ -0,0 +1,40 @@
+import { useState as I, useRef as f, useCallback as L, useEffect as T } from "react";
+const g = (p = {}) => {
+  const { onClose: s, onBackspace: c } = p, [a, n] = I(!1), i = f(null), r = f(null), m = L(() => {
+    n((o) => !o);
+  }, []);
+  return T(() => {
+    if (!a) return;
+    const o = (t) => {
+      const e = t.target;
+      if (!(e instanceof Node)) return;
+      const l = i.current?.contains(e) ?? !1, k = r.current?.contains(e) ?? !1, v = t.composedPath().some(
+        (d) => d instanceof HTMLElement && d.hasAttribute("data-picker-overlay")
+      );
+      !l && !k && !v && (n(!1), s?.());
+    }, u = (t) => {
+      if (t.key === "Escape") {
+        n(!1), s?.();
+        return;
+      }
+      if (t.key === "Backspace" && c) {
+        const { target: e } = t;
+        e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLElement && e.isContentEditable || (t.preventDefault(), c());
+      }
+    }, E = setTimeout(() => {
+      document.addEventListener("mousedown", o);
+    }, 0);
+    return document.addEventListener("keydown", u), () => {
+      clearTimeout(E), document.removeEventListener("mousedown", o), document.removeEventListener("keydown", u);
+    };
+  }, [a, s, c]), {
+    isOpen: a,
+    setIsOpen: n,
+    popoverRef: i,
+    inputRef: r,
+    handleTogglePopover: m
+  };
+};
+export {
+  g as usePopoverState
+};

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

@@ -0,0 +1,29 @@
+import { Dayjs } from 'dayjs';
+import { RangeSelectionStep } from './use-range-step-manager';
+export interface DateStateSnapshot {
+    tempStart: Dayjs | null;
+    tempEnd: Dayjs | null;
+}
+export interface UseRangeDateStateOptions {
+    value: [Dayjs | null, Dayjs | null];
+    defaultDate: Dayjs;
+    /** Transforms a clicked date before storing; pass time-of-day defaults for datetime variants. */
+    mapDate?: (date: Dayjs, role: 'start' | 'end') => Dayjs;
+    /** Called when the end date is selected; used for auto-apply in date-only variants. */
+    onEndDateSelected?: (start: Dayjs | null, end: Dayjs) => void;
+}
+export interface UseRangeDateStateReturn {
+    tempStart: Dayjs | null;
+    tempEnd: Dayjs | null;
+    displayedMonth: Dayjs;
+    hoverDate: Dayjs | null;
+    /** Synchronous ref — use inside callbacks to avoid stale closures. */
+    stateRef: React.MutableRefObject<DateStateSnapshot>;
+    handleDateClick: (date: Dayjs, step: RangeSelectionStep) => void;
+    handleDateHover: (date: Dayjs | null) => void;
+    handleMonthChange: (month: Dayjs) => void;
+    /** Returns the new [start, end] tuple, or null if the segment was already empty (signals caller to move focus to start). */
+    clearActiveSegment: (step: RangeSelectionStep) => [Dayjs | null, Dayjs | null] | null;
+    resetDates: (value: [Dayjs | null, Dayjs | null]) => void;
+}
+export declare const useRangeDateState: ({ value, defaultDate, mapDate, onEndDateSelected, }: UseRangeDateStateOptions) => UseRangeDateStateReturn;