@cognite/aura 0.2.0 → 0.3.0

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>;

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

@@ -0,0 +1,52 @@
+import { jsx as l } from "react/jsx-runtime";
+import { useRef as f, useEffect as p } from "react";
+import { cn as E } from "../../../../../../lib/utils.js";
+import { generateHours as C, generateMinutes as d } from "../../utils/time-utils.js";
+import { MIDNIGHT_HOUR as h, HOURS_IN_12H as s } from "../constants.js";
+import { SCROLL_ITEM_SELECTED_CLASSES as u, SCROLL_ITEM_UNSELECTED_CLASSES as R, SCROLL_ITEM_BASE_CLASSES as T, SCROLL_CONTAINER_CLASSES as a } from "../scroll-cell-classes.js";
+const M = ({
+  value: r,
+  onChange: m,
+  type: c,
+  timeFormat: i = "24h",
+  className: L
+}) => {
+  const e = f(null), n = f(null), _ = c === "hour" ? C(i) : d(), S = r === null ? null : c === "hour" && i === "12h" ? r === h ? s : r > s ? r - s : r : r;
+  return p(() => {
+    if (r !== null && n.current && e.current) {
+      const o = e.current, t = n.current;
+      o.scrollTo({
+        top: t.offsetTop - o.offsetHeight / 2 + t.offsetHeight / 2,
+        behavior: "smooth"
+      });
+    }
+  }, [r]), /* @__PURE__ */ l(
+    "div",
+    {
+      "data-slot": "time-picker-scroll",
+      ref: e,
+      className: E(a, L),
+      children: _.map((o) => {
+        const t = S !== null && o === S;
+        return /* @__PURE__ */ l(
+          "div",
+          {
+            ref: t ? n : void 0,
+            className: E(
+              T,
+              t ? u : R
+            ),
+            onClick: () => m(o),
+            role: "option",
+            "aria-selected": t,
+            children: o.toString().padStart(2, "0")
+          },
+          o
+        );
+      })
+    }
+  );
+};
+export {
+  M as TimePickerScroll
+};

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

@@ -0,0 +1,48 @@
+import { Dayjs } from 'dayjs';
+/**
+ * Get all days to display in a calendar month grid (including padding days from prev/next months)
+ * @param month - The month to display
+ * @param locale - Optional locale for week start day (e.g., 'en', 'nb', 'de')
+ */
+export declare function getCalendarDays(month: Dayjs, locale?: string): Dayjs[];
+/**
+ * Check if a date is within a given range (inclusive)
+ * Uses dayjs isBetween plugin with '[]' for inclusive start and end
+ * @see https://day.js.org/docs/en/plugin/is-between
+ */
+export declare function isDateInRange(date: Dayjs, startDate: Dayjs | null, endDate: Dayjs | null): boolean;
+/**
+ * Check if a date is outside the current display month
+ */
+export declare function isOutsideMonth(date: Dayjs, displayMonth: Dayjs): boolean;
+/**
+ * Check if a date is today
+ * Note: Uses local timezone. Both the input date and current time are compared
+ * using the user's local timezone, which is the expected behavior for calendar UIs.
+ * @param date - The date to check
+ * @param now - Optional current date for testing (defaults to dayjs())
+ */
+export declare function isToday(date: Dayjs, now?: Dayjs): boolean;
+/**
+ * Get an array of weekday names (short form)
+ * @param locale - Optional locale for localized weekday names (e.g., 'en', 'nb', 'de')
+ * @param baseDate - Optional base date for testing (defaults to dayjs())
+ */
+export declare function getWeekdayNames(locale?: string, baseDate?: Dayjs): string[];
+/**
+ * Get the week number for a given date
+ */
+export declare function getWeekNumber(date: Dayjs): number;
+/**
+ * Get all week numbers for days in a calendar month grid
+ */
+export declare function getWeekNumbers(days: Dayjs[]): number[];
+/**
+ * Check if two dates are the same day
+ */
+export declare function isSameDay(date1: Dayjs | null, date2: Dayjs | null): boolean;
+/**
+ * Format a date range for display
+ * When one date is missing, shows the format placeholder for the missing date
+ */
+export declare function formatDateRange(startDate: Dayjs | null, endDate: Dayjs | null, format: string): string;

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

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

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

@@ -0,0 +1,26 @@
+import { Dayjs } from 'dayjs';
+/**
+ * Applies start of day (00:00:00.000) to a given date
+ * @param date - Dayjs object
+ * @returns Dayjs object with time set to 00:00:00.000
+ */
+export declare const applyStartOfDay: (date: Dayjs) => Dayjs;
+/**
+ * Applies end of day (23:59:59.999) to a given date
+ * @param date - Dayjs object
+ * @returns Dayjs object with time set to 23:59:59.999
+ */
+export declare const applyEndOfDay: (date: Dayjs) => Dayjs;
+/**
+ * Validates that a date range is valid (start is before or equal to end)
+ * @param start - Start date (Dayjs or null)
+ * @param end - End date (Dayjs or null)
+ * @returns True if the range is valid, false otherwise
+ */
+export declare const validateDateRange: (start: Dayjs | null, end: Dayjs | null) => boolean;
+/**
+ * Converts a timestamp (milliseconds) to a Dayjs object
+ * @param timestamp - Timestamp in milliseconds
+ * @returns Dayjs object or null if timestamp is null or undefined
+ */
+export declare const timestampToDayjs: (timestamp: number | undefined | null) => Dayjs | null;

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

@@ -0,0 +1,37 @@
+import { Dayjs } from 'dayjs';
+export type TimeFormat = '12h' | '24h';
+/**
+ * Formats a date for display
+ * @param date - Dayjs date object
+ * @param format - Date format string (e.g., 'DD/MM/YYYY')
+ * @returns Formatted date string
+ */
+export declare const formatDateDisplay: (date: Dayjs, format: string) => string;
+/**
+ * Formats time for display using dayjs formatting
+ * @param time - Time object with hour and minute
+ * @param timeFormat - '12h' or '24h' format
+ * @returns Formatted time string (e.g., "9:05 AM" or "09:05")
+ */
+export declare const formatTimeDisplay: (time: {
+    hour: number;
+    minute: number;
+}, timeFormat?: TimeFormat) => string;
+/**
+ * Formats a date range for display
+ * @param start - Start date
+ * @param end - End date
+ * @param format - Date format string
+ * @returns Formatted date range string (e.g., "10/05/2024 – 20/05/2024")
+ */
+export declare const formatRangeDisplay: (start: Dayjs | null, end: Dayjs | null, format: string) => string;
+/**
+ * Formats a date-time range for display
+ * @param start - Start date
+ * @param end - End date
+ * @param dateFormat - Date format string
+ * @param includeTime - Whether to include time in the format
+ * @param timeFormat - '12h' or '24h' format
+ * @returns Formatted date-time range string
+ */
+export declare const formatDateTimeRangeDisplay: (start: Dayjs | null, end: Dayjs | null, dateFormat: string, includeTime?: boolean, timeFormat?: TimeFormat) => string;

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

@@ -0,0 +1,34 @@
+export type SegmentType = 'day' | 'month' | 'year' | 'hour' | 'minute' | 'second' | 'ampm' | 'separator';
+export type DateSegmentType = 'day' | 'month' | 'year';
+export type TimeSegmentType = 'hour' | 'minute' | 'second' | 'ampm';
+export interface Segment {
+    type: SegmentType;
+    token: string;
+    startIndex: number;
+    endIndex: number;
+    length: number;
+    editable: boolean;
+}
+/**
+ * Parse a date format string into an array of segments.
+ *
+ * @example
+ * parseFormatToSegments('DD/MM/YYYY')
+ * // Returns:
+ * // [
+ * //   { type: 'day', token: 'DD', startIndex: 0, endIndex: 2, length: 2, editable: true },
+ * //   { type: 'separator', token: '/', ... },
+ * //   { type: 'month', token: 'MM', ... },
+ * //   ...
+ * // ]
+ */
+export declare const parseFormatToSegments: (format: string) => Segment[];
+export declare const getEditableSegments: (format: string) => Segment[];
+export declare const getSegmentAtPosition: (segments: Segment[], position: number) => Segment | undefined;
+export declare const getEditableSegmentIndex: (segments: Segment[], segment: Segment) => number;
+export declare const getNextEditableSegment: (segments: Segment[], currentSegment: Segment) => Segment | undefined;
+export declare const getPreviousEditableSegment: (segments: Segment[], currentSegment: Segment) => Segment | undefined;
+export declare const getFirstEditableSegment: (segments: Segment[]) => Segment | undefined;
+export declare const getLastEditableSegment: (segments: Segment[]) => Segment | undefined;
+export declare const isDateSegment: (type: SegmentType) => type is DateSegmentType;
+export declare const isTimeSegment: (type: SegmentType) => type is TimeSegmentType;

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

@@ -0,0 +1,43 @@
+import { TimeFormat } from './format-utils';
+/**
+ * Generates an array of hours.
+ * If timeFormat is '12h', generates hours from 1 to 12.
+ * Otherwise, generates hours from 0 to 23.
+ * @returns Array of hours
+ */
+export declare const generateHours: (timeFormat?: TimeFormat) => number[];
+/**
+ * Generates an array of minutes in 5-minute increments
+ * @returns Array of minutes [0, 5, 10, ..., 55]
+ */
+export declare const generateMinutes: () => number[];
+/**
+ * Formats time components into HH:MM string format
+ * @param hour - Hour value (0-23)
+ * @param minute - Minute value (0-59)
+ * @returns Formatted time string (e.g., "09:05")
+ */
+export declare const formatTime: (hour: number, minute: number) => string;
+/**
+ * Parses a time string in HH:MM or H:MM format
+ * @param timeString - Time string in HH:MM format (e.g., "09:30", "9:30")
+ * @returns Object with hour and minute properties, or null if invalid
+ */
+export declare const parseTime: (timeString: string) => {
+    hour: number;
+    minute: number;
+} | null;
+/**
+ * Gets AM/PM period from a 24-hour format hour.
+ */
+export declare const getAmPmFromHour: (hour: number) => "AM" | "PM";
+/**
+ * Converts a 12-hour format hour and AM/PM period to a 24-hour format hour.
+ */
+export declare const convert12HourTo24Hour: (hour: number, ampm: "AM" | "PM") => number;
+/**
+ * Converts a 24-hour format hour to a 12-hour display value (1-12).
+ * Used when displaying time in 12-hour format.
+ * @param hour24 - Hour value (0-23)
+ */
+export declare const convert24HourTo12Hour: (hour24: number) => number;

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

@@ -0,0 +1,15 @@
+import m from "dayjs";
+import u from "dayjs/plugin/customParseFormat";
+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(
+  { length: s / o },
+  (r, e) => e * o
+), a = (r) => r >= t ? "PM" : "AM", A = (r, e) => e === "PM" && r < t ? r + t : e === "AM" && r === t ? 0 : r, N = (r) => r === 0 ? t : r > t ? r - t : r;
+export {
+  A as convert12HourTo24Hour,
+  N as convert24HourTo12Hour,
+  c as generateHours,
+  M as generateMinutes,
+  a as getAmPmFromHour
+};

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

@@ -0,0 +1,23 @@
+import { Dayjs } from 'dayjs';
+/**
+ * Validates and orders a time range, swapping if end is before start
+ * @param startHour - Start hour (0-23)
+ * @param startMinute - Start minute (0-59)
+ * @param endHour - End hour (0-23)
+ * @param endMinute - End minute (0-59)
+ * @returns Ordered time range [start, end]
+ */
+export declare const orderTimeRange: (startHour: number, startMinute: number, endHour: number, endMinute: number) => [{
+    hour: number;
+    minute: number;
+}, {
+    hour: number;
+    minute: number;
+}];
+/**
+ * Validates and orders a date range, swapping if end is before start
+ * @param start - Start date
+ * @param end - End date
+ * @returns Ordered date range [start, end]
+ */
+export declare const orderDateRange: (start: Dayjs, end: Dayjs) => [Dayjs, Dayjs];

package/dist/components/ui/core/dialog/dialog.d.ts

@@ -1,18 +1,18 @@
 import { ComponentProps, ReactNode } from 'react';
 import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
-declare function Dialog({ ...props }: DialogPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
-declare function DialogTrigger({ children, ...props }: DialogPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
-declare function DialogPortal({ ...props }: DialogPrimitive.Portal.Props): import("react/jsx-runtime").JSX.Element;
+declare function Dialog({ ...props }: DialogPrimitive.Root.Props): ReactNode;
+declare function DialogTrigger({ children, ...props }: DialogPrimitive.Trigger.Props): ReactNode;
+declare function DialogPortal({ ...props }: DialogPrimitive.Portal.Props): ReactNode;
 declare function DialogClose({ children, ...props }: DialogPrimitive.Close.Props & {
     children?: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-declare function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props): import("react/jsx-runtime").JSX.Element;
+}): ReactNode;
+declare function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props): ReactNode;
 declare function DialogContent({ className, children, showCloseButton, closeButtonLabel, ...props }: DialogPrimitive.Popup.Props & {
     showCloseButton?: boolean;
     closeButtonLabel?: string;
-}): import("react/jsx-runtime").JSX.Element;
-declare function DialogHeader({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function DialogTitle({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
-declare function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props): import("react/jsx-runtime").JSX.Element;
+}): ReactNode;
+declare function DialogHeader({ className, ...props }: ComponentProps<'div'>): ReactNode;
+declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): ReactNode;
+declare function DialogTitle({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>): ReactNode;
+declare function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props): ReactNode;
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

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

@@ -7,7 +7,10 @@ import { Button as g } from "../button/button.js";
 function b({ ...t }) {
   return /* @__PURE__ */ a(e.Root, { "data-slot": "dialog", ...t });
 }
-function v({ children: t, ...o }) {
+function v({
+  children: t,
+  ...o
+}) {
   return /* @__PURE__ */ a(e.Trigger, { "data-slot": "dialog-trigger", ...o, children: t });
 }
 function p({ ...t }) {
@@ -84,7 +87,10 @@ function C({
     )
   ] });
 }
-function k({ className: t, ...o }) {
+function k({
+  className: t,
+  ...o
+}) {
   return /* @__PURE__ */ a(
     "div",
     {
@@ -97,7 +103,10 @@ function k({ className: t, ...o }) {
     }
   );
 }
-function w({ className: t, ...o }) {
+function w({
+  className: t,
+  ...o
+}) {
   return /* @__PURE__ */ a(
     "div",
     {