@cognite/aura 0.1.7 → 0.3.0

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

@@ -1,86 +1,19 @@
-import { ComponentProps, ReactNode } from 'react';
+import { ForwardRefExoticComponent, RefAttributes, ComponentProps, ReactNode } from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
 import { Dialog } from '../dialog/dialog';
-declare const Command: import('react').ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild"> & {
-    label?: string;
-    shouldFilter?: boolean;
-    filter?: (value: string, search: string, keywords?: string[]) => number;
-    defaultValue?: string;
-    value?: string;
-    onValueChange?: (value: string) => void;
-    loop?: boolean;
-    disablePointerSelection?: boolean;
-    vimBindings?: boolean;
-} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const Command: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive>, 'ref'> & RefAttributes<HTMLDivElement>>;
 declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: Omit<ComponentProps<typeof Dialog>, 'children'> & {
     children?: ReactNode;
     title?: string;
     description?: string;
     className?: string;
     showCloseButton?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace CommandDialog {
-    var displayName: string;
-}
-declare const CommandInput: import('react').ForwardRefExoticComponent<Omit<Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import('react').InputHTMLAttributes<HTMLInputElement>> & {
-    ref?: React.Ref<HTMLInputElement>;
-} & {
-    asChild?: boolean;
-}, "key" | keyof import('react').InputHTMLAttributes<HTMLInputElement> | "asChild">, "onChange" | "value" | "type"> & {
-    value?: string;
-    onValueChange?: (search: string) => void;
-} & import('react').RefAttributes<HTMLInputElement>, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
-declare const CommandList: import('react').ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild"> & {
-    label?: string;
-} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const CommandEmpty: import('react').ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const CommandGroup: import('react').ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
-    heading?: React.ReactNode;
-    value?: string;
-    forceMount?: boolean;
-} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const CommandSeparator: import('react').ForwardRefExoticComponent<Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild"> & {
-    alwaysRender?: boolean;
-} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const CommandItem: import('react').ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "value" | "disabled"> & {
-    disabled?: boolean;
-    onSelect?: (value: string) => void;
-    value?: string;
-    keywords?: string[];
-    forceMount?: boolean;
-} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const CommandShortcut: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+}): ReactNode;
+declare const CommandInput: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive.Input>, 'ref'> & RefAttributes<HTMLInputElement>>;
+declare const CommandList: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive.List>, 'ref'> & RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive.Empty>, 'ref'> & RefAttributes<HTMLDivElement>>;
+declare const CommandGroup: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive.Group>, 'ref'> & RefAttributes<HTMLDivElement>>;
+declare const CommandSeparator: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive.Separator>, 'ref'> & RefAttributes<HTMLDivElement>>;
+declare const CommandItem: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive.Item>, 'ref'> & RefAttributes<HTMLDivElement>>;
+declare const CommandShortcut: ForwardRefExoticComponent<ComponentProps<'span'> & RefAttributes<HTMLSpanElement>>;
 export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

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

@@ -4,23 +4,23 @@ import { IconSearch as p } from "@tabler/icons-react";
 import { Command as r } from "cmdk";
 import { cn as m } from "../../../../lib/utils.js";
 import { Dialog as u, DialogHeader as g, DialogTitle as h, DialogDescription as f, DialogContent as x } from "../dialog/dialog.js";
-const s = d(({ className: e, ...a }, t) => /* @__PURE__ */ o(
+const s = d(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   r,
   {
-    ref: t,
+    ref: a,
     "data-slot": "command",
     className: m(
       "rounded-lg bg-background text-muted-foreground flex h-full w-full flex-col overflow-hidden",
       e
     ),
-    ...a
+    ...t
   }
 ));
 s.displayName = "Command";
-function y({
+function G({
   title: e = "Command Palette",
-  description: a = "Search for a command to run...",
-  children: t,
+  description: t = "Search for a command to run...",
+  children: a,
   className: l,
   showCloseButton: c = !0,
   ...i
@@ -28,7 +28,7 @@ function y({
   return /* @__PURE__ */ n(u, { ...i, children: [
     /* @__PURE__ */ n(g, { className: "sr-only rounded-lg", children: [
       /* @__PURE__ */ o(h, { children: e }),
-      /* @__PURE__ */ o(f, { children: a })
+      /* @__PURE__ */ o(f, { children: t })
     ] }),
     /* @__PURE__ */ o(
       x,
@@ -36,13 +36,12 @@ function y({
         "data-slot": "command-dialog",
         className: m("overflow-hidden p-0", l),
         showCloseButton: c,
-        children: /* @__PURE__ */ o(s, { className: "**:[[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: t })
+        children: /* @__PURE__ */ o(s, { className: "**:[[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: a })
       }
     )
   ] });
 }
-y.displayName = "CommandDialog";
-const k = d(({ className: e, ...a }, t) => /* @__PURE__ */ n(
+const k = d(({ className: e, ...t }, a) => /* @__PURE__ */ n(
   "div",
   {
     "data-slot": "command-input-wrapper",
@@ -52,99 +51,101 @@ const k = d(({ className: e, ...a }, t) => /* @__PURE__ */ n(
       /* @__PURE__ */ o(
         r.Input,
         {
-          ref: t,
+          ref: a,
           "data-slot": "command-input",
           className: m(
             "placeholder:text-muted-foreground flex h-10 w-full rounded-lg bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
             e
           ),
-          ...a
+          ...t
         }
       )
     ]
   }
 ));
 k.displayName = "CommandInput";
-const C = d(({ className: e, ...a }, t) => /* @__PURE__ */ o(
+const y = d(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   r.List,
   {
-    ref: t,
+    ref: a,
     "data-slot": "command-list",
     className: m(
       "max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto",
       e
     ),
-    ...a
+    ...t
   }
 ));
-C.displayName = "CommandList";
-const N = d(({ className: e, ...a }, t) => /* @__PURE__ */ o(
+y.displayName = "CommandList";
+const C = d(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   r.Empty,
   {
-    ref: t,
+    ref: a,
     "data-slot": "command-empty",
     className: m("py-6 text-center text-sm", e),
-    ...a
+    ...t
   }
 ));
-N.displayName = "CommandEmpty";
-const v = d(({ className: e, ...a }, t) => /* @__PURE__ */ o(
+C.displayName = "CommandEmpty";
+const N = d(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   r.Group,
   {
-    ref: t,
+    ref: a,
     "data-slot": "command-group",
     className: m(
       "text-foreground font-normal **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-sm **:[[cmdk-group-heading]]:font-medium",
       e
     ),
-    ...a
+    ...t
   }
 ));
-v.displayName = "CommandGroup";
-const w = d(({ className: e, ...a }, t) => /* @__PURE__ */ o(
+N.displayName = "CommandGroup";
+const v = d(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   r.Separator,
   {
-    ref: t,
+    ref: a,
     "data-slot": "command-separator",
     className: m("bg-border -mx-1 h-px", e),
-    ...a
+    ...t
   }
 ));
-w.displayName = "CommandSeparator";
-const _ = d(({ className: e, ...a }, t) => /* @__PURE__ */ o(
+v.displayName = "CommandSeparator";
+const w = d(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   r.Item,
   {
-    ref: t,
+    ref: a,
     "data-slot": "command-item",
     className: m(
       "data-[selected=true]:bg-accent-background data-[selected=true]:text-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
       e
     ),
-    ...a
+    ...t
   }
 ));
-_.displayName = "CommandItem";
-const b = d(({ className: e, ...a }, t) => /* @__PURE__ */ o(
-  "span",
-  {
-    ref: t,
-    "data-slot": "command-shortcut",
-    className: m(
-      "text-muted-foreground ml-auto text-xs tracking-widest",
-      e
-    ),
-    ...a
-  }
-));
-b.displayName = "CommandShortcut";
+w.displayName = "CommandItem";
+const _ = d(
+  ({ className: e, ...t }, a) => /* @__PURE__ */ o(
+    "span",
+    {
+      ref: a,
+      "data-slot": "command-shortcut",
+      className: m(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        e
+      ),
+      ...t
+    }
+  )
+);
+_.displayName = "CommandShortcut";
 export {
   s as Command,
-  y as CommandDialog,
-  N as CommandEmpty,
-  v as CommandGroup,
+  G as CommandDialog,
+  C as CommandEmpty,
+  N as CommandGroup,
   k as CommandInput,
-  _ as CommandItem,
-  C as CommandList,
-  w as CommandSeparator,
-  b as CommandShortcut
+  w as CommandItem,
+  y as CommandList,
+  v as CommandSeparator,
+  _ as CommandShortcut
 };

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

@@ -0,0 +1,9 @@
+import { ForwardRefExoticComponent, RefAttributes, ComponentProps } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { ClassProp } from 'class-variance-authority/types';
+interface CountVariantProps {
+    variant?: 'default' | 'warning' | 'critical' | null;
+}
+declare const countVariants: (props?: (CountVariantProps & ClassProp) | undefined) => string;
+declare const Count: ForwardRefExoticComponent<ComponentProps<'output'> & VariantProps<typeof countVariants> & RefAttributes<HTMLOutputElement>>;
+export { Count, countVariants };

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

@@ -0,0 +1,32 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+import { cva as i } from "class-variance-authority";
+import { cn as u } from "../../../../lib/utils.js";
+const c = i(
+  "flex min-h-9 min-w-9 flex-col items-center justify-center rounded-sm px-0.5 text-3xl font-medium leading-8 tracking-tightest",
+  {
+    variants: {
+      variant: {
+        default: "bg-neutral-background text-neutral-foreground-on-neutral",
+        warning: "bg-warning-background text-warning-foreground-on-warning",
+        critical: "bg-destructive-background text-destructive-foreground-on-critical"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+), d = o(({ className: t, variant: r, ...n }, a) => /* @__PURE__ */ e(
+  "output",
+  {
+    ref: a,
+    "data-slot": "count",
+    className: u(c({ variant: r }), t),
+    ...n
+  }
+));
+d.displayName = "Count";
+export {
+  d as Count,
+  c as countVariants
+};

package/dist/components/ui/core/date-time-pickers/date-range-picker/date-range-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 DateRangePickerProps {
+    value: [Dayjs | null, Dayjs | null];
+    onChange: (range: [Dayjs | null, Dayjs | null]) => void;
+    format?: string;
+    placeholder?: string;
+    displayWeekNumber?: boolean;
+    shortcuts?: ShortcutItem[];
+    defaultDate?: Dayjs;
+    className?: string;
+}
+export declare const DateRangePicker: FC<DateRangePickerProps>;

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

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

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

@@ -0,0 +1,3 @@
+export { DateRangePicker } from './date-range-picker';
+export type { DateRangePickerProps, ShortcutItem } from './date-range-picker';
+export type { UseDateRangePickerProps, UseDateRangePickerReturn, } from './types';

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

@@ -0,0 +1,25 @@
+import { Dayjs } from 'dayjs';
+import { RangeSelectionStep } from '../shared/hooks/use-range-step-manager';
+export type { RangeSelectionStep };
+export interface UseDateRangePickerProps {
+    value: [Dayjs | null, Dayjs | null];
+    onChange: (range: [Dayjs | null, Dayjs | null]) => void;
+    defaultDate?: Dayjs;
+}
+export interface UseDateRangePickerReturn {
+    isOpen: boolean;
+    step: RangeSelectionStep;
+    displayedMonth: Dayjs;
+    tempStart: Dayjs | null;
+    tempEnd: Dayjs | null;
+    hoverDate: Dayjs | null;
+    handleTogglePopover: () => void;
+    handleCancel: () => void;
+    handleDateClick: (date: Dayjs) => void;
+    handleMonthChange: (month: Dayjs) => void;
+    handleDateHover: (date: Dayjs | null) => void;
+    handleSetStep: (step: RangeSelectionStep) => void;
+    handleApplyShortcut: (range: 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-range-picker/use-date-range-picker.d.ts

@@ -0,0 +1,4 @@
+import { RangeSelectionStep } from '../shared/hooks/use-range-step-manager';
+import { UseDateRangePickerProps, UseDateRangePickerReturn } from './types';
+export type { RangeSelectionStep, UseDateRangePickerProps, UseDateRangePickerReturn, };
+export declare const useDateRangePicker: ({ value, onChange, defaultDate, }: UseDateRangePickerProps) => UseDateRangePickerReturn;

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

@@ -0,0 +1,82 @@
+import { useRef as k, useCallback as s, useEffect as g } from "react";
+import b from "dayjs";
+import { usePopoverState as j } from "../shared/hooks/use-popover-state.js";
+import { useRangeDateState as H } from "../shared/hooks/use-range-date-state.js";
+import { useRangeStepManager as I } from "../shared/hooks/use-range-step-manager.js";
+const U = ({
+  value: r,
+  onChange: t,
+  defaultDate: D = b()
+}) => {
+  const d = k(() => {
+  }), f = k(() => {
+  }), {
+    isOpen: i,
+    setIsOpen: a,
+    popoverRef: R,
+    inputRef: v,
+    handleTogglePopover: y
+  } = j({
+    onClose: s(() => d.current(), []),
+    onBackspace: s(() => f.current(), [])
+  }), A = I(), { step: o, handleBack: c, handleNext: h, resetStep: n } = A, C = H({
+    value: r,
+    defaultDate: D,
+    onEndDateSelected: s(
+      (e, p) => {
+        t([e, p]), a(!1), n();
+      },
+      [t, a, n]
+    )
+  }), {
+    tempStart: P,
+    tempEnd: B,
+    displayedMonth: M,
+    hoverDate: E,
+    handleDateClick: T,
+    handleDateHover: x,
+    handleMonthChange: O,
+    clearActiveSegment: u,
+    resetDates: S
+  } = C, l = s(() => {
+    S(r), n();
+  }, [S, n, r]), m = s(() => {
+    const e = u(o);
+    e === null ? c() : e[0] === null && e[1] === null && t(e);
+  }, [u, o, c, t]);
+  return g(() => {
+    d.current = l;
+  }, [l]), g(() => {
+    f.current = m;
+  }, [m]), {
+    isOpen: i,
+    step: o,
+    displayedMonth: M,
+    tempStart: P,
+    tempEnd: B,
+    hoverDate: E,
+    handleTogglePopover: () => {
+      i || l(), y();
+    },
+    handleCancel: () => {
+      l(), a(!1);
+    },
+    handleDateClick: (e) => {
+      T(e, o), o === "start" && h();
+    },
+    handleMonthChange: O,
+    handleDateHover: x,
+    handleSetStep: (e) => {
+      e === "start" ? c() : h();
+    },
+    handleApplyShortcut: (e) => {
+      const p = Array.isArray(e) ? e : [e, e];
+      t(p), a(!1), n();
+    },
+    inputRef: v,
+    popoverRef: R
+  };
+};
+export {
+  U as useDateRangePicker
+};

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

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