@evinvest/uikit 0.16.0 → 0.17.1

package/README.md

@@ -170,8 +170,8 @@ measuring needs host-only `web-sys`). Known gaps:
 - **Rust overlays** (dialog, popover, dropdown, select, menus, tooltip, …) render
   inline with `position:fixed` + a backdrop and CSS-only placement — no portal,
   no viewport-measured floating, native focus order (no trap). TS overlays use a
-  real `Portal`, single-flip `useFloating`, `useDismissableLayer`, and
-  `useFocusScope`.
+  real `Portal`, single-flip `useFloating` (absolute in the document, so it
+  scrolls with the page natively), `useDismissableLayer`, and `useFocusScope`.
 - **chart:** the recharts plotting engine is not bundled. `ChartContainer` is a
   themed SVG host (emits `--color-*` from its config); `ChartTooltipContent` /
   `ChartLegendContent` are presentational and take explicit items. Draw series
@@ -182,17 +182,23 @@ measuring needs host-only `web-sys`). Known gaps:
   submit's default — inputs, validation and the order itself are the
   consumer's. The open-orders pane reuses `Table` and `Tabs`.
 - **calendar:** single month, single-date selection (no range/multi-month, no
-  dropdown captions). `min`/`max` bound the grid at day granularity (days outside
-  render `disabled` + `data-disabled="true"`); `disabled` freezes the
-  whole grid and the nav the same way; the nav buttons take label overrides. TS-only `locale` renders the caption and weekday headers through
-  `Intl` (Monday-first); Rust has no `Intl`, so its captions stay English. Rust
-  does manual date math; TS uses the built-in `Date`.
+  dropdown captions). The grid is always six fixed weeks of 36px cells, so its
+  size never changes with the month or the locale's weekday labels, and it
+  paints no background of its own (the host does). `min`/`max` bound the grid
+  at day granularity (days outside render `disabled` + `data-disabled="true"`);
+  `disabled` freezes the whole grid and the nav the same way; the nav buttons
+  take label overrides. TS-only `locale` renders the caption and weekday headers through
+  `Intl` (Monday-first): `weekday: "short"`, falling back to `"narrow"` for a
+  locale whose short form contains whitespace (vi's "Thứ 2" → "T2", he's
+  "יום ב׳" → "ב׳") as long as narrow still yields seven distinct labels. Rust has no `Intl`, so its captions
+  stay English. Rust does manual date math; TS uses the built-in `Date`.
 - **date-time-picker:** the kit's own bricks only — an outline trigger, a
   `Popover` with the `Calendar` and two numeric 24-hour hours/minutes fields (no
   native `datetime-local` / `time` input, so the browser's locale popup never
   appears). Its ARIA and button strings are `labels` overrides with English
-  defaults — the nav buttons, the hours/minutes `aria-label`s, the clear button
-  and the popover's own accessible name (`labels.dialog`). TS formats the trigger label through `Intl` when `locale` is set,
+  defaults — the nav buttons, the hours/minutes `aria-label`s, the clear button,
+  the close button (`labels.close`, which keeps the value) and the popover's own
+  accessible name (`labels.dialog`). TS formats the trigger label through `Intl` when `locale` is set,
   else `YYYY-MM-DD HH:MM`; Rust has no `Intl`: the ISO-like label or the
   `format` callback, English month/weekday captions. The hidden form value is
   unix seconds in TS and `YYYY-MM-DDTHH:MM` in Rust (no zone there). The Rust

package/dist/index.d.ts

@@ -80,11 +80,28 @@ interface FloatingResult {
     align: Align;
 }
 /**
- * Positions a floating element against an anchor with `position: fixed` and
- * `getBoundingClientRect` — the dep-light stand-in for `@radix-ui/react-popper`
- * / floating-ui. Supports a preferred `side`/`align`, an `offset`, and a single
- * collision flip onto the opposite side when the preferred side overflows the
- * viewport. Recomputes on scroll and resize while `open`.
+ * Positions a floating element against an anchor with `position: absolute` in
+ * the coordinate space of its containing block (the `Portal` puts it in
+ * `document.body`, so normally document coordinates) — the dep-light stand-in
+ * for `@radix-ui/react-popper` / floating-ui. Supports a preferred
+ * `side`/`align`, an `offset`, and a single collision flip onto the opposite
+ * side when the preferred side overflows the viewport.
+ *
+ * Two update modes:
+ * - `place()` — full pass (flip + clamp into the viewport) on open, on window
+ *   `resize`, and whenever the anchor or the floating element changes size.
+ * - `sync()` — re-derives the coordinates from the anchor with the side and
+ *   the clamp shift already chosen; runs on every `scroll` (captured on
+ *   `window`, so nested scroll containers count too).
+ *
+ * Because the element is absolutely positioned in the document, a document
+ * scroll moves it natively with the page — `sync()` then computes the same
+ * numbers and is a no-op — so the overlay never lags behind the compositor.
+ * Only a nested scroll container changes the coordinates, and there a frame
+ * of lag is acceptable. The side is never revisited on scroll: no jumping.
+ * A page that scrolls `body` instead of the document (`html { overflow:
+ * hidden } body { overflow: auto }`) is such a nested scroller: correct, but
+ * with the frame of lag the `fixed` strategy had.
  *
  * Rust's overlays use CSS-only placement (`data-side`) and do not measure; see
  * the README "Limitations".
@@ -109,11 +126,22 @@ declare function useFloating(opts: {
 declare function useFocusScope(enabled: boolean): React.RefObject<HTMLDivElement | null>;
 
 /**
- * Tracks whether an overlay should be mounted. Mount/unmount steps in lockstep
- * with `present`: enter animations (`data-[state=open]:animate-in`) still play
- * on mount, but the kit intentionally does **not** defer unmount for an exit
- * animation — deferring made portaled overlays flicker on close. Pass `ref`
- * through to the animated node (kept for API stability / future use).
+ * Keeps an overlay mounted through its exit animation. Enter animations
+ * (`data-[state=open]:animate-in`) play on mount; once `present` turns false
+ * the consumer flips the node to `data-state="closed"` in the same render and
+ * the node stays until its exit animation ends (or the fallback timer fires).
+ * Re-opening mid-exit just flips the state back; the node is never remounted.
+ *
+ * The exit was dropped once (5728b40) because closing flickered: tw-animate's
+ * `animate-out` runs with `animation-fill-mode: none`, so after `animationend`
+ * the node snaps back to full opacity/scale for the frame React needs to
+ * process an async unmount. Hence `flushSync` inside the native listener —
+ * the unmount commits before the browser paints that frame (Radix Presence
+ * does the same). With no animation on the node (jsdom, overlays without an
+ * exit class) unmount is immediate, as before. The Rust mirror still does not
+ * defer unmount.
+ *
+ * Pass `ref` to the animated node — the one carrying `data-state`.
  */
 declare function usePresence(present: boolean): {
     isPresent: boolean;
@@ -1444,6 +1472,8 @@ interface DateTimePickerLabels {
     clear?: string;
     /** `aria-label` of the popover dialog; "Choose date and time". */
     dialog?: string;
+    /** `aria-label` of the close button; "Close". */
+    close?: string;
 }
 interface DateTimePickerProps extends React.AriaAttributes, Pick<React.ComponentProps<"button">, "onFocus" | "onBlur"> {
     /** Controlled value; `null` = empty. Local-zone `Date` (seconds/ms are zeroed on every change). */
@@ -1489,10 +1519,11 @@ interface DateTimePickerProps extends React.AriaAttributes, Pick<React.Component
  * `datetime-local`, so the browser's locale popup never appears.
  *
  * Every edit reports through `onChange`; the popover stays open after a day
- * click (the operator still sets the time) and closes on clear. Opening moves
- * focus into the hours field; closing hands it back to the trigger unless the
- * operator already focused something else. Any other `aria-*` prop, `onFocus`
- * and `onBlur` land on the trigger.
+ * click (the operator still sets the time) and closes on clear or on the close
+ * button (which keeps the value). Opening moves focus into the hours field;
+ * closing hands it back to the trigger unless the operator already focused
+ * something else. Any other `aria-*` prop, `onFocus` and `onBlur` land on the
+ * trigger.
  */
 declare function DateTimePicker({ value: valueProp, defaultValue, onChange, min, max, locale, format, placeholder, labels, disabled, name, today, open, defaultOpen, onOpenChange, align, className, id, ...rest }: DateTimePickerProps): React.JSX.Element;
 

package/dist/index.js

@@ -109,37 +109,46 @@ function useDismissableLayer(opts) {
 
 // src/primitives/use-floating.ts
 import * as React5 from "react";
+var ABSOLUTE = Object.freeze({ position: "absolute", top: 0, left: 0 });
+var POSITIONED = /* @__PURE__ */ new Set(["relative", "absolute", "fixed", "sticky"]);
+function toContainingBlock(floating, x, y) {
+  const parent = floating.offsetParent;
+  const doc = floating.ownerDocument;
+  const root = parent === doc.body || parent === doc.documentElement || parent === null;
+  const positioned = parent instanceof HTMLElement && (!root || POSITIONED.has(doc.defaultView?.getComputedStyle(parent).position ?? ""));
+  if (!positioned) {
+    const win = doc.defaultView;
+    return { x: x + (win?.scrollX ?? 0), y: y + (win?.scrollY ?? 0), root: true };
+  }
+  const p = parent.getBoundingClientRect();
+  return {
+    x: x - p.left - parent.clientLeft + parent.scrollLeft,
+    y: y - p.top - parent.clientTop + parent.scrollTop,
+    root: false
+  };
+}
+function layoutSize(el) {
+  return { width: el.offsetWidth, height: el.offsetHeight };
+}
+function viewport() {
+  const el = document.documentElement;
+  return {
+    vw: el.clientWidth || window.innerWidth,
+    vh: el.clientHeight || window.innerHeight
+  };
+}
 function useFloating(opts) {
   const { anchorRef, open, side = "bottom", align = "center", offset = 4 } = opts;
   const floatingRef = React5.useRef(null);
-  const [style, setStyle] = React5.useState({
-    position: "fixed",
-    top: 0,
-    left: 0
-  });
-  const [resolved, setResolved] = React5.useState({
+  const [placedSide, setPlacedSide] = React5.useState(side);
+  const placement = React5.useRef({
     side,
-    align
+    shiftX: 0,
+    shiftY: 0
   });
   React5.useLayoutEffect(() => {
     if (!open) return;
-    function update() {
-      const anchor = anchorRef.current;
-      const floating = floatingRef.current;
-      if (!anchor || !floating) return;
-      const a = anchor.getBoundingClientRect();
-      const f = floating.getBoundingClientRect();
-      const vw = window.innerWidth;
-      const vh = window.innerHeight;
-      let placed = side;
-      if (side === "bottom" && a.bottom + offset + f.height > vh && a.top - offset - f.height > 0)
-        placed = "top";
-      else if (side === "top" && a.top - offset - f.height < 0 && a.bottom + offset + f.height < vh)
-        placed = "bottom";
-      else if (side === "right" && a.right + offset + f.width > vw && a.left - offset - f.width > 0)
-        placed = "left";
-      else if (side === "left" && a.left - offset - f.width < 0 && a.right + offset + f.width < vw)
-        placed = "right";
+    function ideal(a, f, placed) {
       let top = 0;
       let left = 0;
       const vertical = placed === "top" || placed === "bottom";
@@ -156,36 +165,88 @@ function useFloating(opts) {
         else if (align === "end") top = a.bottom - f.height;
         else top = a.top + a.height / 2 - f.height / 2;
       }
-      left = Math.max(offset, Math.min(left, vw - f.width - offset));
-      top = Math.max(offset, Math.min(top, vh - f.height - offset));
-      setStyle({ position: "fixed", top: Math.round(top), left: Math.round(left) });
-      setResolved({ side: placed, align });
-    }
-    let frame = 0;
-    function schedule() {
-      if (frame) return;
-      frame = requestAnimationFrame(() => {
-        frame = 0;
-        update();
-      });
-    }
-    update();
-    window.addEventListener("scroll", schedule, true);
-    window.addEventListener("resize", schedule);
+      return { top, left };
+    }
+    function write(floating, f, top, left, contain) {
+      const p = toContainingBlock(floating, left, top);
+      let { x, y } = p;
+      if (contain && p.root) {
+        const icbWidth = floating.ownerDocument.documentElement.clientWidth || window.innerWidth;
+        x = Math.max(0, Math.min(x, icbWidth - f.width));
+        y = Math.max(0, y);
+      }
+      floating.style.translate = `${Math.round(x)}px ${Math.round(y)}px`;
+    }
+    function place() {
+      const anchor = anchorRef.current;
+      const floating = floatingRef.current;
+      if (!anchor || !floating) return;
+      const a = anchor.getBoundingClientRect();
+      const f = layoutSize(floating);
+      const { vw, vh } = viewport();
+      let placed = side;
+      if (side === "bottom" && a.bottom + offset + f.height > vh && a.top - offset - f.height > 0)
+        placed = "top";
+      else if (side === "top" && a.top - offset - f.height < 0 && a.bottom + offset + f.height < vh)
+        placed = "bottom";
+      else if (side === "right" && a.right + offset + f.width > vw && a.left - offset - f.width > 0)
+        placed = "left";
+      else if (side === "left" && a.left - offset - f.width < 0 && a.right + offset + f.width < vw)
+        placed = "right";
+      const { top, left } = ideal(a, f, placed);
+      const clampedLeft = Math.max(offset, Math.min(left, vw - f.width - offset));
+      const clampedTop = Math.max(offset, Math.min(top, vh - f.height - offset));
+      placement.current = {
+        side: placed,
+        shiftX: clampedLeft - left,
+        shiftY: clampedTop - top
+      };
+      write(floating, f, clampedTop, clampedLeft, false);
+      setPlacedSide((prev) => prev === placed ? prev : placed);
+    }
+    function sync() {
+      const anchor = anchorRef.current;
+      const floating = floatingRef.current;
+      if (!anchor || !floating) return;
+      const a = anchor.getBoundingClientRect();
+      const f = layoutSize(floating);
+      const { side: placed, shiftX, shiftY } = placement.current;
+      const { top, left } = ideal(a, f, placed);
+      write(floating, f, top + shiftY, left + shiftX, true);
+    }
+    place();
+    window.addEventListener("scroll", sync, true);
+    window.addEventListener("resize", place);
+    let observer;
+    if (typeof ResizeObserver !== "undefined") {
+      observer = new ResizeObserver(place);
+      if (anchorRef.current) observer.observe(anchorRef.current);
+      if (floatingRef.current) observer.observe(floatingRef.current);
+    }
     return () => {
-      if (frame) cancelAnimationFrame(frame);
-      window.removeEventListener("scroll", schedule, true);
-      window.removeEventListener("resize", schedule);
+      window.removeEventListener("scroll", sync, true);
+      window.removeEventListener("resize", place);
+      observer?.disconnect();
     };
   }, [open, side, align, offset, anchorRef]);
-  return { floatingRef, style, side: resolved.side, align: resolved.align };
+  return { floatingRef, style: ABSOLUTE, side: placedSide, align };
 }
 
 // src/primitives/focus-scope.tsx
 import * as React6 from "react";
-var FOCUSABLE = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "[tabindex]"
+].map((sel) => `${sel}:not([tabindex="-1"])`).join(",");
+function focusCandidates(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE));
+}
 function focusable(root) {
-  return Array.from(root.querySelectorAll(FOCUSABLE)).filter(
+  return focusCandidates(root).filter(
     (el) => el.offsetWidth > 0 || el.offsetHeight > 0 || el === document.activeElement
   );
 }
@@ -227,9 +288,44 @@ function useFocusScope(enabled) {
 
 // src/primitives/presence.ts
 import * as React7 from "react";
+import { flushSync } from "react-dom";
+var EXIT_FALLBACK_MS = 1e3;
 function usePresence(present) {
   const ref = React7.useRef(null);
-  return { isPresent: present, ref };
+  const [mounted, setMounted] = React7.useState(present);
+  React7.useLayoutEffect(() => {
+    if (present) {
+      setMounted(true);
+      return;
+    }
+    const node = ref.current;
+    if (!node) {
+      setMounted(false);
+      return;
+    }
+    const name = getComputedStyle(node).animationName;
+    if (name === "" || name === "none") {
+      setMounted(false);
+      return;
+    }
+    const prevPointerEvents = node.style.pointerEvents;
+    node.style.pointerEvents = "none";
+    const onEnd = (e) => {
+      if (e.target !== node) return;
+      if (e.animationName && !name.includes(e.animationName)) return;
+      flushSync(() => setMounted(false));
+    };
+    node.addEventListener("animationend", onEnd);
+    node.addEventListener("animationcancel", onEnd);
+    const timer = setTimeout(() => setMounted(false), EXIT_FALLBACK_MS);
+    return () => {
+      clearTimeout(timer);
+      node.removeEventListener("animationend", onEnd);
+      node.removeEventListener("animationcancel", onEnd);
+      node.style.pointerEvents = prevPointerEvents;
+    };
+  }, [present]);
+  return { isPresent: present || mounted, ref };
 }
 
 // src/primitives/use-roving-focus.ts
@@ -5197,14 +5293,14 @@ function useItem() {
 function NavigationMenu({
   className,
   children,
-  viewport = true,
+  viewport: viewport2 = true,
   ...props
 }) {
   return /* @__PURE__ */ jsxs18(
     "nav",
     {
       "data-slot": "navigation-menu",
-      "data-viewport": viewport,
+      "data-viewport": viewport2,
       role: "navigation",
       className: cn(
         NAVIGATION_MENU,
@@ -5213,7 +5309,7 @@ function NavigationMenu({
       ...props,
       children: [
         children,
-        viewport && /* @__PURE__ */ jsx48(NavigationMenuViewport, {})
+        viewport2 && /* @__PURE__ */ jsx48(NavigationMenuViewport, {})
       ]
     }
   );
@@ -5911,7 +6007,7 @@ import { jsx as jsx52, jsxs as jsxs22 } from "react/jsx-runtime";
 var CLOSE_THRESHOLD = 0.25;
 var VELOCITY_THRESHOLD = 0.4;
 var DRAG_AFTER_OPEN_MS = 500;
-var EXIT_FALLBACK_MS = 600;
+var EXIT_FALLBACK_MS2 = 600;
 var DrawerContext = React62.createContext(null);
 function useDrawer() {
   const ctx = React62.useContext(DrawerContext);
@@ -6118,7 +6214,7 @@ function DrawerContent({ className, children, ...props }) {
   }, [open]);
   React62.useEffect(() => {
     if (!closing) return;
-    const id = setTimeout(() => setPresent(false), EXIT_FALLBACK_MS);
+    const id = setTimeout(() => setPresent(false), EXIT_FALLBACK_MS2);
     return () => clearTimeout(id);
   }, [closing]);
   const drag = useDrawerDrag({
@@ -6878,17 +6974,17 @@ function ChartLegendContent({
 import * as React66 from "react";
 
 // src/generated/calendar.ts
-var CALENDAR_ROOT = "bg-background p-3 w-fit";
+var CALENDAR_ROOT = "p-3 w-fit";
 var CALENDAR_NAV_BUTTON = "size-8 p-0 select-none";
 var CALENDAR_NAV = "flex items-center justify-between gap-1 w-full px-1";
 var CALENDAR_CAPTION = "text-sm font-medium select-none";
 var CALENDAR_GRID = "w-full border-collapse mt-4";
 var CALENDAR_WEEKDAY_ROW = "flex";
-var CALENDAR_WEEKDAY = "text-ink-soft rounded-md flex-1 font-normal text-[0.8rem] select-none";
+var CALENDAR_WEEKDAY = "text-ink-soft rounded-md w-9 shrink-0 font-normal text-[0.8rem] select-none whitespace-nowrap";
 var CALENDAR_WEEK = "flex w-full mt-2";
-var CALENDAR_DAY_EMPTY = "relative w-full h-full p-0 aspect-square select-none";
-var CALENDAR_DAY_CELL = "relative w-full h-full p-0 text-center aspect-square select-none";
-var CALENDAR_DAY = "size-auto w-full aspect-square font-normal leading-none";
+var CALENDAR_DAY_EMPTY = "relative size-9 shrink-0 p-0 select-none";
+var CALENDAR_DAY_CELL = "relative size-9 shrink-0 p-0 text-center select-none";
+var CALENDAR_DAY = "size-auto w-full aspect-square font-normal leading-none tabular-nums";
 var CALENDAR_DAY_SELECTED = "bg-primary text-on-primary";
 var CALENDAR_DAY_TODAY = "bg-hover text-ink rounded-md";
 
@@ -6947,13 +7043,19 @@ function outOfRange(day, min, max) {
   return !!min && t < startOfDay(min).getTime() || !!max && t > startOfDay(max).getTime();
 }
 var MONDAY = new Date(2024, 0, 1);
-function localisedWeekdays(locale) {
-  const fmt = new Intl.DateTimeFormat(locale, { weekday: "short" });
+function formatWeekdays(locale, weekday) {
+  const fmt = new Intl.DateTimeFormat(locale, { weekday });
   return Array.from(
     { length: 7 },
     (_, i) => fmt.format(new Date(MONDAY.getFullYear(), MONDAY.getMonth(), MONDAY.getDate() + i))
   );
 }
+function localisedWeekdays(locale) {
+  const short = formatWeekdays(locale, "short");
+  if (!short.some((label) => /\s/.test(label))) return short;
+  const narrow = formatWeekdays(locale, "narrow");
+  return new Set(narrow).size === narrow.length ? narrow : short;
+}
 function Calendar({
   selected,
   onSelect,
@@ -6987,7 +7089,7 @@ function Calendar({
   const cells = [];
   for (let i = 0; i < lead; i += 1) cells.push(null);
   for (let day = 1; day <= total; day += 1) cells.push(day);
-  while (cells.length % 7 !== 0) cells.push(null);
+  while (cells.length < 42) cells.push(null);
   const weeks = [];
   for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));
   const navClass = buttonVariants({
@@ -7129,6 +7231,25 @@ function CalendarIcon() {
     }
   );
 }
+function XIcon3() {
+  return /* @__PURE__ */ jsx57(
+    "svg",
+    {
+      className: "size-4",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx57("path", { d: "M18 6 6 18M6 6l12 12" })
+    }
+  );
+}
 var pad = (n) => String(n).padStart(2, "0");
 function atMinute(d) {
   return new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes());
@@ -7184,6 +7305,7 @@ function DateTimePicker({
   });
   const rootRef = React67.useRef(null);
   const hoursRef = React67.useRef(null);
+  const focusTrigger = () => rootRef.current?.querySelector("[data-slot=date-time-picker-trigger]")?.focus();
   React67.useEffect(() => {
     if (!isOpen) return;
     hoursRef.current?.focus();
@@ -7191,9 +7313,7 @@ function DateTimePicker({
       const active = document.activeElement;
       const content = hoursRef.current?.closest("[data-slot=date-time-picker-content]");
       const lost = !active || active === document.body || !!content?.contains(active);
-      if (lost) {
-        rootRef.current?.querySelector("[data-slot=date-time-picker-trigger]")?.focus();
-      }
+      if (lost) focusTrigger();
     };
   }, [isOpen]);
   const emit = (next) => setValue(clampMoment(atMinute(next), min, max));
@@ -7225,6 +7345,15 @@ function DateTimePicker({
     setValue(null);
     setOpen(false);
   };
+  const onContentKeyDown = (e) => {
+    if (e.key !== "Tab") return;
+    const items = focusCandidates(e.currentTarget);
+    const edge = e.shiftKey ? items[0] : items[items.length - 1];
+    if (!edge || e.target !== edge) return;
+    e.preventDefault();
+    setOpen(false);
+    focusTrigger();
+  };
   const onContentBlur = (e) => {
     const next = e.relatedTarget;
     if (!(next instanceof Node)) return;
@@ -7278,6 +7407,7 @@ function DateTimePicker({
         "aria-label": labels.dialog ?? "Choose date and time",
         align,
         onBlur: onContentBlur,
+        onKeyDown: onContentKeyDown,
         className: DATE_TIME_PICKER_CONTENT,
         children: [
           /* @__PURE__ */ jsx57(
@@ -7336,6 +7466,18 @@ function DateTimePicker({
                 onClick: onClear,
                 children: labels.clear ?? "Clear"
               }
+            ),
+            /* @__PURE__ */ jsx57(
+              "button",
+              {
+                type: "button",
+                className: buttonVariants({ variant: "ghost", size: "sm", icon: true }),
+                "data-slot": "date-time-picker-close",
+                "aria-label": labels.close ?? "Close",
+                disabled,
+                onClick: () => setOpen(false),
+                children: /* @__PURE__ */ jsx57(XIcon3, {})
+              }
             )
           ] })
         ]