@cognite/aura 0.1.7 → 0.3.0

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;

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

@@ -0,0 +1,63 @@
+import { useCallback as e, useState as u, useRef as b } from "react";
+const A = ({
+  value: c,
+  defaultDate: p,
+  mapDate: a,
+  onEndDateSelected: S
+}) => {
+  const o = e(
+    (t, m) => a ? a(t, m) : t,
+    [a]
+  ), [E, f] = u(c[0]), [y, M] = u(c[1]), [g, i] = u(
+    () => c[0] ?? p
+  ), [C, l] = u(null), n = b({
+    tempStart: c[0],
+    tempEnd: c[1]
+  }), s = e((t) => {
+    n.current.tempStart = t, f(t);
+  }, []), r = e((t) => {
+    n.current.tempEnd = t, M(t);
+  }, []), R = e(
+    (t, m) => {
+      if (m === "start") {
+        s(o(t, "start")), r(null), l(null);
+        return;
+      }
+      const d = n.current.tempStart;
+      if (d && t.isBefore(d, "day")) {
+        s(o(t, "start")), r(null), l(null);
+        return;
+      }
+      const h = o(t, "end");
+      r(h), l(null), S?.(n.current.tempStart, h);
+    },
+    [o, s, r, S]
+  ), k = e((t) => {
+    l(t);
+  }, []), D = e((t) => {
+    i(t);
+  }, []), H = e(
+    (t) => t === "start" ? (s(null), [null, n.current.tempEnd]) : n.current.tempEnd === null ? null : (r(null), [n.current.tempStart, null]),
+    [s, r]
+  ), T = e(
+    (t) => {
+      s(t[0]), r(t[1]), l(null), i(t[0] ?? p);
+    },
+    [s, r, p]
+  );
+  return {
+    tempStart: E,
+    tempEnd: y,
+    displayedMonth: g,
+    hoverDate: C,
+    stateRef: n,
+    handleDateClick: R,
+    handleDateHover: k,
+    handleMonthChange: D,
+    clearActiveSegment: H,
+    resetDates: T
+  };
+};
+export {
+  A as useRangeDateState
+};

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

@@ -0,0 +1,8 @@
+export type RangeSelectionStep = 'start' | 'end';
+export interface UseRangeStepManagerReturn {
+    step: RangeSelectionStep;
+    handleNext: () => void;
+    handleBack: () => void;
+    resetStep: () => void;
+}
+export declare const useRangeStepManager: () => UseRangeStepManagerReturn;

package/dist/components/ui/core/date-time-pickers/shared/hooks/use-range-step-manager.js

@@ -0,0 +1,19 @@
+import { useState as o, useCallback as e } from "react";
+const p = () => {
+  const [s, t] = o("start"), a = e(() => {
+    t("end");
+  }, []), n = e(() => {
+    t("start");
+  }, []), r = e(() => {
+    t("start");
+  }, []);
+  return {
+    step: s,
+    handleNext: a,
+    handleBack: n,
+    resetStep: r
+  };
+};
+export {
+  p as useRangeStepManager
+};

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

@@ -0,0 +1,17 @@
+import { TimeFormat } from '../../utils/format-utils';
+export interface UseTimeStateOptions {
+    initialHour?: number;
+    initialMinute?: number;
+    timeFormat?: TimeFormat;
+}
+export interface UseTimeStateReturn {
+    hour: number;
+    minute: number;
+    amPm: 'AM' | 'PM';
+    hour24: number;
+    handleHourChange: (hour: number) => void;
+    handleMinuteChange: (minute: number) => void;
+    handleAmPmChange: (amPm: 'AM' | 'PM') => void;
+    resetTime: (hour: number, minute: number) => void;
+}
+export declare const useTimeState: ({ initialHour, initialMinute, timeFormat, }?: UseTimeStateOptions) => UseTimeStateReturn;

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

@@ -0,0 +1,34 @@
+import { useState as r, useMemo as C, useCallback as M } from "react";
+import { getAmPmFromHour as m, convert12HourTo24Hour as P, convert24HourTo12Hour as T } from "../../utils/time-utils.js";
+import { DEFAULT_START_HOUR as U, DEFAULT_MINUTE as f } from "../constants.js";
+const S = ({
+  initialHour: s = U,
+  initialMinute: a = f,
+  timeFormat: o = "24h"
+} = {}) => {
+  const l = o === "12h" ? T(s) : s, [e, u] = r(l), [p, h] = r(a), [t, c] = r(
+    () => m(s)
+  ), A = C(
+    () => o === "12h" ? P(e, t) : e,
+    [e, t, o]
+  ), H = M(
+    (n, d) => {
+      const g = o === "12h" ? T(n) : n;
+      u(g), h(d), c(m(n));
+    },
+    [o]
+  );
+  return {
+    hour: e,
+    minute: p,
+    amPm: t,
+    hour24: A,
+    handleHourChange: u,
+    handleMinuteChange: h,
+    handleAmPmChange: c,
+    resetTime: H
+  };
+};
+export {
+  S as useTimeState
+};

package/dist/components/ui/core/date-time-pickers/shared/scroll-cell-classes.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Shared Tailwind class strings for TimePickerScroll and AmPmScroll.
+ * Both components render the same scroll container and cell styles.
+ */
+export declare const SCROLL_CONTAINER_CLASSES = "overflow-y-auto flex flex-col items-center py-2 w-9 h-72 shrink-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden";
+export declare const SCROLL_ITEM_BASE_CLASSES = "w-9 h-9 flex items-center justify-center rounded-lg cursor-pointer text-sm font-medium leading-[18px] tracking-normal select-none transition-colors duration-150 shrink-0";
+export declare const SCROLL_ITEM_SELECTED_CLASSES = "bg-primary-background text-foreground-on-primary hover:bg-primary-background";
+export declare const SCROLL_ITEM_UNSELECTED_CLASSES = "text-secondary-foreground hover:bg-accent-background";

package/dist/components/ui/core/date-time-pickers/shared/scroll-cell-classes.js

@@ -0,0 +1,7 @@
+const r = "overflow-y-auto flex flex-col items-center py-2 w-9 h-72 shrink-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", o = "w-9 h-9 flex items-center justify-center rounded-lg cursor-pointer text-sm font-medium leading-[18px] tracking-normal select-none transition-colors duration-150 shrink-0", e = "bg-primary-background text-foreground-on-primary hover:bg-primary-background", n = "text-secondary-foreground hover:bg-accent-background";
+export {
+  r as SCROLL_CONTAINER_CLASSES,
+  o as SCROLL_ITEM_BASE_CLASSES,
+  e as SCROLL_ITEM_SELECTED_CLASSES,
+  n as SCROLL_ITEM_UNSELECTED_CLASSES
+};

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

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { Dayjs } from 'dayjs';
+export interface ShortcutItem {
+    id?: string;
+    label: string;
+    getValue: () => [Dayjs, Dayjs] | Dayjs | [Dayjs | null, Dayjs | null];
+}
+export interface ShortcutsPanelProps {
+    shortcuts?: ShortcutItem[];
+    onShortcutClick: (value: [Dayjs, Dayjs] | Dayjs | [Dayjs | null, Dayjs | null]) => void;
+    className?: string;
+}
+export declare const ShortcutsPanel: FC<ShortcutsPanelProps>;

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

@@ -0,0 +1,31 @@
+import { jsx as l } from "react/jsx-runtime";
+import { cn as t } from "../../../../../../lib/utils.js";
+import { Button as n } from "../../../button/button.js";
+const i = [], m = ({
+  shortcuts: r = i,
+  onShortcutClick: a,
+  className: o
+}) => r.length === 0 ? null : /* @__PURE__ */ l(
+  "div",
+  {
+    "data-slot": "shortcuts-panel",
+    className: t(
+      "flex flex-col gap-1 p-3 border-r border-border min-w-[150px]",
+      o
+    ),
+    children: r.map((e) => /* @__PURE__ */ l(
+      n,
+      {
+        variant: "ghost",
+        size: "default",
+        className: "w-full justify-start text-secondary-foreground",
+        onClick: () => a(e.getValue()),
+        children: e.label
+      },
+      e.id ?? e.label
+    ))
+  }
+);
+export {
+  m as ShortcutsPanel
+};

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { TimeFormat } from '../../utils/format-utils';
+export type TimePickerScrollProps = {
+    value: number | null;
+    onChange: (value: number) => void;
+    type: 'hour' | 'minute';
+    timeFormat?: TimeFormat;
+    className?: string;
+};
+export declare const TimePickerScroll: FC<TimePickerScrollProps>;