@epilot/zenith-react 0.2.0-next.0 → 0.2.0-next.3

package/dist/components/date-time-picker/date-time-picker-panel.js

@@ -1,50 +1,56 @@
-import { jsx as t, jsxs as k, Fragment as W } from "react/jsx-runtime";
+import { jsx as t, jsxs as C, Fragment as j } from "react/jsx-runtime";
 import * as m from "react";
-import { SLOT_ATTR as r, mergeClasses as j, shorthands as f } from "@epilot/zenith-runtime/v1";
-import { Button as Y } from "../button/button.js";
-import { PopoverPortal as ie, PopoverContent as oe } from "../popover/popover.js";
-import { makeZenithStyles as ne } from "../../styles/make-styles.js";
-import { spacingElement2 as re, spacingGroup1 as G, spacingElement3 as ae, spacingGroup2 as se } from "../../tokens/index.js";
-import { Calendar as I } from "./calendar.js";
-import { TimePicker as M } from "./time-picker.js";
-import { useDateTimePickerContext as de } from "./date-time-picker-context.js";
-const ce = ne({
+import { SLOT_ATTR as r, mergeClasses as Y, shorthands as f } from "@epilot/zenith-runtime/v1";
+import { Button as G } from "../button/button.js";
+import { PopoverPortal as oe, PopoverContent as ne } from "../popover/popover.js";
+import { makeZenithStyles as re } from "../../styles/make-styles.js";
+import { boxModel as p } from "../../styles/host-reset.js";
+import { spacingElement2 as ae, spacingGroup1 as I, spacingElement3 as se, spacingGroup2 as de } from "../../tokens/index.js";
+import { Calendar as M } from "./calendar.js";
+import { TimePicker as X } from "./time-picker.js";
+import { useDateTimePickerContext as ce } from "./date-time-picker-context.js";
+const le = re({
   content: {
     overflowX: "hidden",
     overflowY: "hidden"
   },
   contentNarrow: {
+    ...p,
     width: "300px"
   },
   panelContent: {
+    ...p,
     display: "flex",
     flexDirection: "column",
-    ...f.gap(se),
-    ...f.padding(ae)
+    ...f.gap(de),
+    ...f.padding(se)
   },
   body: {
     display: "flex"
   },
   bodyBottom: {
     flexDirection: "column",
-    ...f.gap(G)
+    ...f.gap(I)
   },
   bodySide: {
     flexDirection: "row",
-    ...f.gap(G),
+    ...f.gap(I),
     position: "relative"
   },
   dateSection: {
+    ...p,
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: "0%",
     minWidth: "0"
   },
   timeSpacer: {
+    ...p,
     width: "9rem",
     flexShrink: 0
   },
   timeSection: {
+    ...p,
     position: "absolute",
     top: 0,
     bottom: 0,
@@ -58,160 +64,160 @@ const ce = ne({
   footer: {
     display: "flex",
     justifyContent: "flex-end",
-    ...f.gap(re)
+    ...f.gap(ae)
   }
-}), xe = m.forwardRef(function({
-  showTimePicker: C = !0,
-  timePickerPosition: S = "bottom",
-  okLabel: X = "Apply",
-  cancelLabel: V = "Cancel",
-  previousMonthLabel: z = "Previous month",
-  nextMonthLabel: A = "Next month",
-  hoursLabel: D,
-  minutesLabel: N,
-  showTodayButton: F = !1,
-  todayLabel: T = "Today",
-  showWeekNumbers: O = !1,
-  className: Z,
-  minuteStep: P = 1
-}, _) {
-  const i = ce(), {
-    tempValue: p,
-    isOpen: q,
-    locale: H,
-    disablePast: h,
-    currentTimeInTimezone: u,
-    handleDateChange: y,
-    confirm: J,
-    cancel: K
-  } = de(), [Q, U] = m.useState(!0);
+}), Ce = m.forwardRef(function({
+  showTimePicker: S = !0,
+  timePickerPosition: b = "bottom",
+  okLabel: V = "Apply",
+  cancelLabel: Z = "Cancel",
+  previousMonthLabel: A = "Previous month",
+  nextMonthLabel: D = "Next month",
+  hoursLabel: N,
+  minutesLabel: F,
+  showTodayButton: T = !1,
+  todayLabel: O = "Today",
+  showWeekNumbers: P = !1,
+  className: _,
+  minuteStep: q = 1
+}, J) {
+  const i = le(), {
+    tempValue: h,
+    isOpen: H,
+    locale: L,
+    disablePast: u,
+    currentTimeInTimezone: y,
+    handleDateChange: w,
+    confirm: K,
+    cancel: Q
+  } = ce(), [U, ee] = m.useState(!0);
   m.useEffect(() => {
-    if (S !== "side") return;
-    const a = () => U(window.innerWidth >= 480);
+    if (b !== "side") return;
+    const a = () => ee(window.innerWidth >= 480);
     return a(), window.addEventListener("resize", a), () => window.removeEventListener("resize", a);
-  }, [S]);
-  const w = m.useRef(null);
+  }, [b]);
+  const g = m.useRef(null);
   m.useLayoutEffect(() => {
-    if (!q) return;
+    if (!H) return;
     const a = () => {
-      const e = w.current;
+      const e = g.current;
       if (!e) return;
       e.dataset.widthLocked || (e.style.width = `${e.offsetWidth}px`, e.dataset.widthLocked = "true");
-      const x = e.closest(
+      const k = e.closest(
         "[data-radix-popper-content-wrapper]"
       );
-      if (!x) return;
+      if (!k) return;
       const s = e.querySelector(
         `[${r}="datetimepicker-body"]`
       );
       s && (s.style.maxHeight = "", s.style.overflowY = "");
-      const o = x.getBoundingClientRect(), R = window.innerHeight, $ = window.innerWidth, n = 8, B = R - 2 * n;
-      let E = { m41: 0, m42: 0 };
+      const o = k.getBoundingClientRect(), E = window.innerHeight, B = window.innerWidth, n = 8, W = E - 2 * n;
+      let z = { m41: 0, m42: 0 };
       try {
-        const c = getComputedStyle(x).transform;
-        typeof DOMMatrixReadOnly < "u" && c && c !== "none" && (E = new DOMMatrixReadOnly(c));
+        const c = getComputedStyle(k).transform;
+        typeof DOMMatrixReadOnly < "u" && c && c !== "none" && (z = new DOMMatrixReadOnly(c));
       } catch {
       }
       let d = 0, l = 0;
-      if (o.height > B) {
+      if (o.height > W) {
         if (s) {
           const c = e.querySelector(
             `[${r}="datetimepicker-footer"]`
-          ), te = c ? c.getBoundingClientRect().height : 0;
-          s.style.maxHeight = `${B - te}px`, s.style.overflowY = "auto";
+          ), ie = c ? c.getBoundingClientRect().height : 0;
+          s.style.maxHeight = `${W - ie}px`, s.style.overflowY = "auto";
         }
         d = n - o.top;
       } else
-        o.bottom > R - n && (d = R - n - o.bottom), o.top + d < n && (d = n - o.top);
-      o.right > $ - n && (l = $ - n - o.right), o.left + l < n && (l = n - o.left), (l !== 0 || d !== 0) && (x.style.transform = `translate(${E.m41 + l}px, ${E.m42 + d}px)`);
-    }, ee = requestAnimationFrame(() => {
+        o.bottom > E - n && (d = E - n - o.bottom), o.top + d < n && (d = n - o.top);
+      o.right > B - n && (l = B - n - o.right), o.left + l < n && (l = n - o.left), (l !== 0 || d !== 0) && (k.style.transform = `translate(${z.m41 + l}px, ${z.m42 + d}px)`);
+    }, te = requestAnimationFrame(() => {
       requestAnimationFrame(a);
     });
     let v = 0;
-    const L = () => {
-      const e = w.current;
+    const $ = () => {
+      const e = g.current;
       e && (e.style.width = "", delete e.dataset.widthLocked), cancelAnimationFrame(v), v = requestAnimationFrame(() => {
         v = requestAnimationFrame(a);
       });
     };
-    window.addEventListener("resize", L);
-    const b = w.current;
+    window.addEventListener("resize", $);
+    const R = g.current;
     return () => {
-      cancelAnimationFrame(ee), cancelAnimationFrame(v), window.removeEventListener("resize", L), b && (b.style.width = "", delete b.dataset.widthLocked);
+      cancelAnimationFrame(te), cancelAnimationFrame(v), window.removeEventListener("resize", $), R && (R.style.width = "", delete R.dataset.widthLocked);
     };
-  }, [q]);
-  const g = C && S === "side" && Q;
-  return /* @__PURE__ */ t(ie, { children: /* @__PURE__ */ t(
-    oe,
+  }, [H]);
+  const x = S && b === "side" && U;
+  return /* @__PURE__ */ t(oe, { children: /* @__PURE__ */ t(
+    ne,
     {
       align: "start",
-      className: j(
+      className: Y(
         i.content,
-        !g && i.contentNarrow,
-        Z
+        !x && i.contentNarrow,
+        _
       ),
       collisionPadding: 8,
       flush: !0,
-      ref: _,
+      ref: J,
       side: "bottom",
       sideOffset: 4,
       sticky: "always",
-      children: /* @__PURE__ */ k(
+      children: /* @__PURE__ */ C(
         "div",
         {
           className: i.panelContent,
           "data-slot": "datetimepicker-content",
           [r]: "datetimepicker-content",
-          ref: w,
+          ref: g,
           children: [
-            /* @__PURE__ */ k(
+            /* @__PURE__ */ C(
               "div",
               {
-                className: j(
+                className: Y(
                   i.body,
-                  g ? i.bodySide : i.bodyBottom
+                  x ? i.bodySide : i.bodyBottom
                 ),
                 "data-slot": "datetimepicker-body",
                 [r]: "datetimepicker-body",
                 children: [
-                  g && C ? /* @__PURE__ */ t(
+                  x && S ? /* @__PURE__ */ t(
                     "div",
                     {
                       className: i.dateSection,
                       "data-slot": "datetimepicker-date-section",
                       [r]: "datetimepicker-date-section",
                       children: /* @__PURE__ */ t(
-                        I,
+                        M,
                         {
-                          currentTimeInTimezone: u,
-                          disablePast: h,
-                          locale: H,
-                          nextMonthLabel: A,
-                          onChange: y,
-                          previousMonthLabel: z,
-                          showTodayButton: F,
-                          showWeekNumbers: O,
-                          todayLabel: T,
-                          value: p
+                          currentTimeInTimezone: y,
+                          disablePast: u,
+                          locale: L,
+                          nextMonthLabel: D,
+                          onChange: w,
+                          previousMonthLabel: A,
+                          showTodayButton: T,
+                          showWeekNumbers: P,
+                          todayLabel: O,
+                          value: h
                         }
                       )
                     }
                   ) : /* @__PURE__ */ t(
-                    I,
+                    M,
                     {
-                      currentTimeInTimezone: u,
-                      disablePast: h,
-                      locale: H,
-                      nextMonthLabel: A,
-                      onChange: y,
-                      previousMonthLabel: z,
-                      showTodayButton: F,
-                      showWeekNumbers: O,
-                      todayLabel: T,
-                      value: p
+                      currentTimeInTimezone: y,
+                      disablePast: u,
+                      locale: L,
+                      nextMonthLabel: D,
+                      onChange: w,
+                      previousMonthLabel: A,
+                      showTodayButton: T,
+                      showWeekNumbers: P,
+                      todayLabel: O,
+                      value: h
                     }
                   ),
-                  C && /* @__PURE__ */ t(W, { children: g ? /* @__PURE__ */ k(W, { children: [
+                  S && /* @__PURE__ */ t(j, { children: x ? /* @__PURE__ */ C(j, { children: [
                     /* @__PURE__ */ t(
                       "div",
                       {
@@ -227,44 +233,44 @@ const ce = ne({
                         "data-slot": "datetimepicker-time-section",
                         [r]: "datetimepicker-time-section",
                         children: /* @__PURE__ */ t(
-                          M,
+                          X,
                           {
-                            currentTimeInTimezone: u,
-                            disablePast: h,
+                            currentTimeInTimezone: y,
+                            disablePast: u,
                             fillHeight: !0,
-                            hoursLabel: D,
-                            minuteStep: P,
-                            minutesLabel: N,
-                            onChange: y,
-                            value: p
+                            hoursLabel: N,
+                            minuteStep: q,
+                            minutesLabel: F,
+                            onChange: w,
+                            value: h
                           }
                         )
                       }
                     )
                   ] }) : /* @__PURE__ */ t(
-                    M,
+                    X,
                     {
-                      currentTimeInTimezone: u,
-                      disablePast: h,
-                      hoursLabel: D,
-                      minuteStep: P,
-                      minutesLabel: N,
-                      onChange: y,
-                      value: p
+                      currentTimeInTimezone: y,
+                      disablePast: u,
+                      hoursLabel: N,
+                      minuteStep: q,
+                      minutesLabel: F,
+                      onChange: w,
+                      value: h
                     }
                   ) })
                 ]
               }
             ),
-            /* @__PURE__ */ k(
+            /* @__PURE__ */ C(
               "div",
               {
                 className: i.footer,
                 "data-slot": "datetimepicker-footer",
                 [r]: "datetimepicker-footer",
                 children: [
-                  /* @__PURE__ */ t(Y, { onClick: K, size: "sm", variant: "secondary", children: V }),
-                  /* @__PURE__ */ t(Y, { onClick: J, size: "sm", variant: "primary", children: X })
+                  /* @__PURE__ */ t(G, { onClick: Q, size: "sm", variant: "secondary", children: Z }),
+                  /* @__PURE__ */ t(G, { onClick: K, size: "sm", variant: "primary", children: V })
                 ]
               }
             )
@@ -275,6 +281,6 @@ const ce = ne({
   ) });
 });
 export {
-  xe as DateTimePickerPanel
+  Ce as DateTimePickerPanel
 };
 //# sourceMappingURL=date-time-picker-panel.js.map

package/dist/components/date-time-picker/date-time-picker-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-time-picker-panel.js","sources":["../../../src/components/date-time-picker/date-time-picker-panel.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { Button } from \"../button/button\"\nimport { PopoverContent, PopoverPortal } from \"../popover/popover\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nimport { Calendar } from \"./calendar\"\nimport { TimePicker } from \"./time-picker\"\nimport { useDateTimePickerContext } from \"./date-time-picker-context\"\n\nexport type DateTimePickerPanelProps = {\n  showTimePicker?: boolean\n  timePickerPosition?: \"bottom\" | \"side\"\n  okLabel?: string\n  cancelLabel?: string\n  previousMonthLabel?: string\n  nextMonthLabel?: string\n  hoursLabel?: string\n  minutesLabel?: string\n  showTodayButton?: boolean\n  todayLabel?: string\n  showWeekNumbers?: boolean\n  className?: string\n  minuteStep?: number\n}\n\nconst useStyles = makeZenithStyles({\n  content: {\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n  },\n  contentNarrow: {\n    width: \"300px\",\n  },\n  panelContent: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingGroup2),\n    ...shorthands.padding(tokens.spacingElement3),\n  },\n  body: {\n    display: \"flex\",\n  },\n  bodyBottom: {\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingGroup1),\n  },\n  bodySide: {\n    flexDirection: \"row\",\n    ...shorthands.gap(tokens.spacingGroup1),\n    position: \"relative\",\n  },\n  dateSection: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    minWidth: \"0\",\n  },\n  timeSpacer: {\n    width: \"9rem\",\n    flexShrink: 0,\n  },\n  timeSection: {\n    position: \"absolute\",\n    top: 0,\n    bottom: 0,\n    right: 0,\n    width: \"9rem\",\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    display: \"flex\",\n    alignItems: \"stretch\",\n  },\n  footer: {\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    ...shorthands.gap(tokens.spacingElement2),\n  },\n})\n\nexport const DateTimePickerPanel = React.forwardRef<\n  HTMLDivElement,\n  DateTimePickerPanelProps\n>(function DateTimePickerPanel(\n  {\n    showTimePicker = true,\n    timePickerPosition = \"bottom\",\n    okLabel = \"Apply\",\n    cancelLabel = \"Cancel\",\n    previousMonthLabel = \"Previous month\",\n    nextMonthLabel = \"Next month\",\n    hoursLabel,\n    minutesLabel,\n    showTodayButton = false,\n    todayLabel = \"Today\",\n    showWeekNumbers = false,\n    className,\n    minuteStep = 1,\n  },\n  ref\n) {\n  const styles = useStyles()\n  const {\n    tempValue,\n    isOpen,\n    locale,\n    disablePast,\n    currentTimeInTimezone,\n    handleDateChange,\n    confirm,\n    cancel,\n  } = useDateTimePickerContext()\n\n  // Responsive: fall back to bottom layout on narrow viewports.\n  const [isWideEnough, setIsWideEnough] = React.useState(true)\n\n  React.useEffect(() => {\n    if (timePickerPosition !== \"side\") return\n\n    const update = () => setIsWideEnough(window.innerWidth >= 480)\n\n    update()\n    window.addEventListener(\"resize\", update)\n\n    return () => window.removeEventListener(\"resize\", update)\n  }, [timePickerPosition])\n\n  // Fix viewport overflow: Floating UI's shift middleware may not work in all\n  // environments (e.g. microfrontend hosts). Manually detect overflow and\n  // adjust the popper wrapper's transform to keep the popover within viewport.\n  const contentRef = React.useRef<HTMLDivElement>(null)\n\n  React.useLayoutEffect(() => {\n    if (!isOpen) return\n\n    const adjustPosition = () => {\n      const el = contentRef.current\n      if (!el) return\n\n      // Lock popover width on first open to prevent resizing on calendar view changes\n      if (!el.dataset.widthLocked) {\n        el.style.width = `${el.offsetWidth}px`\n        el.dataset.widthLocked = \"true\"\n      }\n\n      const wrapper = el.closest(\n        \"[data-radix-popper-content-wrapper]\"\n      ) as HTMLElement | null\n      if (!wrapper) return\n\n      // Reset previous constraints so we measure natural size\n      const body = el.querySelector(\n        `[${SLOT_ATTR}=\"datetimepicker-body\"]`\n      ) as HTMLElement | null\n      if (body) {\n        body.style.maxHeight = \"\"\n        body.style.overflowY = \"\"\n      }\n\n      const rect = wrapper.getBoundingClientRect()\n      const vh = window.innerHeight\n      const vw = window.innerWidth\n      const pad = 8\n      const maxH = vh - 2 * pad\n\n      let matrix = { m41: 0, m42: 0 }\n      try {\n        const computedTransform = getComputedStyle(wrapper).transform\n        if (\n          typeof DOMMatrixReadOnly !== \"undefined\" &&\n          computedTransform &&\n          computedTransform !== \"none\"\n        ) {\n          matrix = new DOMMatrixReadOnly(computedTransform)\n        }\n      } catch {\n        // Fallback if transform cannot be parsed\n      }\n      let dy = 0\n      let dx = 0\n\n      if (rect.height > maxH) {\n        // Popover is taller than viewport — constrain the body area\n        // (keep footer visible) and pin to top padding\n        if (body) {\n          const footer = el.querySelector(\n            `[${SLOT_ATTR}=\"datetimepicker-footer\"]`\n          ) as HTMLElement | null\n          const footerH = footer ? footer.getBoundingClientRect().height : 0\n          body.style.maxHeight = `${maxH - footerH}px`\n          body.style.overflowY = \"auto\"\n        }\n        dy = pad - rect.top\n      } else {\n        // Fits in viewport — just shift to stay within bounds\n        if (rect.bottom > vh - pad) {\n          dy = vh - pad - rect.bottom\n        }\n        if (rect.top + dy < pad) {\n          dy = pad - rect.top\n        }\n      }\n\n      // Keep the popover on-screen horizontally\n      if (rect.right > vw - pad) {\n        dx = vw - pad - rect.right\n      }\n      if (rect.left + dx < pad) {\n        dx = pad - rect.left\n      }\n\n      if (dx !== 0 || dy !== 0) {\n        wrapper.style.transform = `translate(${matrix.m41 + dx}px, ${matrix.m42 + dy}px)`\n      }\n    }\n\n    // Wait for Floating UI to finish positioning\n    const raf = requestAnimationFrame(() => {\n      requestAnimationFrame(adjustPosition)\n    })\n\n    let resizeRaf = 0\n    const onResize = () => {\n      const el = contentRef.current\n      if (el) {\n        el.style.width = \"\"\n        delete el.dataset.widthLocked\n      }\n      cancelAnimationFrame(resizeRaf)\n      resizeRaf = requestAnimationFrame(() => {\n        resizeRaf = requestAnimationFrame(adjustPosition)\n      })\n    }\n    window.addEventListener(\"resize\", onResize)\n\n    const el = contentRef.current\n\n    return () => {\n      cancelAnimationFrame(raf)\n      cancelAnimationFrame(resizeRaf)\n      window.removeEventListener(\"resize\", onResize)\n      // Reset locked width on close so next open re-measures\n      if (el) {\n        el.style.width = \"\"\n        delete el.dataset.widthLocked\n      }\n    }\n  }, [isOpen])\n\n  const isSideLayout =\n    showTimePicker && timePickerPosition === \"side\" && isWideEnough\n\n  return (\n    <PopoverPortal>\n      <PopoverContent\n        align=\"start\"\n        className={mergeClasses(\n          styles.content,\n          !isSideLayout && styles.contentNarrow,\n          className\n        )}\n        collisionPadding={8}\n        flush\n        ref={ref}\n        side=\"bottom\"\n        sideOffset={4}\n        sticky=\"always\"\n      >\n        <div\n          className={styles.panelContent}\n          data-slot=\"datetimepicker-content\"\n          {...{ [SLOT_ATTR]: \"datetimepicker-content\" }}\n          ref={contentRef}\n        >\n          <div\n            className={mergeClasses(\n              styles.body,\n              isSideLayout ? styles.bodySide : styles.bodyBottom\n            )}\n            data-slot=\"datetimepicker-body\"\n            {...{ [SLOT_ATTR]: \"datetimepicker-body\" }}\n          >\n            {isSideLayout && showTimePicker ? (\n              <div\n                className={styles.dateSection}\n                data-slot=\"datetimepicker-date-section\"\n                {...{ [SLOT_ATTR]: \"datetimepicker-date-section\" }}\n              >\n                <Calendar\n                  currentTimeInTimezone={currentTimeInTimezone}\n                  disablePast={disablePast}\n                  locale={locale}\n                  nextMonthLabel={nextMonthLabel}\n                  onChange={handleDateChange}\n                  previousMonthLabel={previousMonthLabel}\n                  showTodayButton={showTodayButton}\n                  showWeekNumbers={showWeekNumbers}\n                  todayLabel={todayLabel}\n                  value={tempValue}\n                />\n              </div>\n            ) : (\n              <Calendar\n                currentTimeInTimezone={currentTimeInTimezone}\n                disablePast={disablePast}\n                locale={locale}\n                nextMonthLabel={nextMonthLabel}\n                onChange={handleDateChange}\n                previousMonthLabel={previousMonthLabel}\n                showTodayButton={showTodayButton}\n                showWeekNumbers={showWeekNumbers}\n                todayLabel={todayLabel}\n                value={tempValue}\n              />\n            )}\n            {showTimePicker && (\n              <>\n                {isSideLayout ? (\n                  <>\n                    <div\n                      className={styles.timeSpacer}\n                      data-slot=\"datetimepicker-time-spacer\"\n                      {...{ [SLOT_ATTR]: \"datetimepicker-time-spacer\" }}\n                    />\n                    <div\n                      className={styles.timeSection}\n                      data-slot=\"datetimepicker-time-section\"\n                      {...{ [SLOT_ATTR]: \"datetimepicker-time-section\" }}\n                    >\n                      <TimePicker\n                        currentTimeInTimezone={currentTimeInTimezone}\n                        disablePast={disablePast}\n                        fillHeight\n                        hoursLabel={hoursLabel}\n                        minuteStep={minuteStep}\n                        minutesLabel={minutesLabel}\n                        onChange={handleDateChange}\n                        value={tempValue}\n                      />\n                    </div>\n                  </>\n                ) : (\n                  <TimePicker\n                    currentTimeInTimezone={currentTimeInTimezone}\n                    disablePast={disablePast}\n                    hoursLabel={hoursLabel}\n                    minuteStep={minuteStep}\n                    minutesLabel={minutesLabel}\n                    onChange={handleDateChange}\n                    value={tempValue}\n                  />\n                )}\n              </>\n            )}\n          </div>\n          <div\n            className={styles.footer}\n            data-slot=\"datetimepicker-footer\"\n            {...{ [SLOT_ATTR]: \"datetimepicker-footer\" }}\n          >\n            <Button onClick={cancel} size=\"sm\" variant=\"secondary\">\n              {cancelLabel}\n            </Button>\n            <Button onClick={confirm} size=\"sm\" variant=\"primary\">\n              {okLabel}\n            </Button>\n          </div>\n        </div>\n      </PopoverContent>\n    </PopoverPortal>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","shorthands","tokens.spacingGroup2","tokens.spacingElement3","tokens.spacingGroup1","tokens.spacingElement2","DateTimePickerPanel","React","showTimePicker","timePickerPosition","okLabel","cancelLabel","previousMonthLabel","nextMonthLabel","hoursLabel","minutesLabel","showTodayButton","todayLabel","showWeekNumbers","className","minuteStep","ref","styles","tempValue","isOpen","locale","disablePast","currentTimeInTimezone","handleDateChange","confirm","cancel","useDateTimePickerContext","isWideEnough","setIsWideEnough","update","contentRef","adjustPosition","el","wrapper","body","SLOT_ATTR","rect","vh","vw","pad","maxH","matrix","computedTransform","dy","dx","footer","footerH","raf","resizeRaf","onResize","isSideLayout","PopoverPortal","jsx","PopoverContent","mergeClasses","jsxs","Calendar","Fragment","TimePicker","Button"],"mappings":"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"}
+{"version":3,"file":"date-time-picker-panel.js","sources":["../../../src/components/date-time-picker/date-time-picker-panel.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { Button } from \"../button/button\"\nimport { PopoverContent, PopoverPortal } from \"../popover/popover\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\nimport { Calendar } from \"./calendar\"\nimport { TimePicker } from \"./time-picker\"\nimport { useDateTimePickerContext } from \"./date-time-picker-context\"\n\nexport type DateTimePickerPanelProps = {\n  showTimePicker?: boolean\n  timePickerPosition?: \"bottom\" | \"side\"\n  okLabel?: string\n  cancelLabel?: string\n  previousMonthLabel?: string\n  nextMonthLabel?: string\n  hoursLabel?: string\n  minutesLabel?: string\n  showTodayButton?: boolean\n  todayLabel?: string\n  showWeekNumbers?: boolean\n  className?: string\n  minuteStep?: number\n}\n\nconst useStyles = makeZenithStyles({\n  content: {\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n  },\n  contentNarrow: {\n    ...boxModel,\n    width: \"300px\",\n  },\n  panelContent: {\n    ...boxModel,\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingGroup2),\n    ...shorthands.padding(tokens.spacingElement3),\n  },\n  body: {\n    display: \"flex\",\n  },\n  bodyBottom: {\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingGroup1),\n  },\n  bodySide: {\n    flexDirection: \"row\",\n    ...shorthands.gap(tokens.spacingGroup1),\n    position: \"relative\",\n  },\n  dateSection: {\n    ...boxModel,\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    minWidth: \"0\",\n  },\n  timeSpacer: {\n    ...boxModel,\n    width: \"9rem\",\n    flexShrink: 0,\n  },\n  timeSection: {\n    ...boxModel,\n    position: \"absolute\",\n    top: 0,\n    bottom: 0,\n    right: 0,\n    width: \"9rem\",\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    display: \"flex\",\n    alignItems: \"stretch\",\n  },\n  footer: {\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    ...shorthands.gap(tokens.spacingElement2),\n  },\n})\n\nexport const DateTimePickerPanel = React.forwardRef<\n  HTMLDivElement,\n  DateTimePickerPanelProps\n>(function DateTimePickerPanel(\n  {\n    showTimePicker = true,\n    timePickerPosition = \"bottom\",\n    okLabel = \"Apply\",\n    cancelLabel = \"Cancel\",\n    previousMonthLabel = \"Previous month\",\n    nextMonthLabel = \"Next month\",\n    hoursLabel,\n    minutesLabel,\n    showTodayButton = false,\n    todayLabel = \"Today\",\n    showWeekNumbers = false,\n    className,\n    minuteStep = 1,\n  },\n  ref\n) {\n  const styles = useStyles()\n  const {\n    tempValue,\n    isOpen,\n    locale,\n    disablePast,\n    currentTimeInTimezone,\n    handleDateChange,\n    confirm,\n    cancel,\n  } = useDateTimePickerContext()\n\n  // Responsive: fall back to bottom layout on narrow viewports.\n  const [isWideEnough, setIsWideEnough] = React.useState(true)\n\n  React.useEffect(() => {\n    if (timePickerPosition !== \"side\") return\n\n    const update = () => setIsWideEnough(window.innerWidth >= 480)\n\n    update()\n    window.addEventListener(\"resize\", update)\n\n    return () => window.removeEventListener(\"resize\", update)\n  }, [timePickerPosition])\n\n  // Fix viewport overflow: Floating UI's shift middleware may not work in all\n  // environments (e.g. microfrontend hosts). Manually detect overflow and\n  // adjust the popper wrapper's transform to keep the popover within viewport.\n  const contentRef = React.useRef<HTMLDivElement>(null)\n\n  React.useLayoutEffect(() => {\n    if (!isOpen) return\n\n    const adjustPosition = () => {\n      const el = contentRef.current\n      if (!el) return\n\n      // Lock popover width on first open to prevent resizing on calendar view changes\n      if (!el.dataset.widthLocked) {\n        el.style.width = `${el.offsetWidth}px`\n        el.dataset.widthLocked = \"true\"\n      }\n\n      const wrapper = el.closest(\n        \"[data-radix-popper-content-wrapper]\"\n      ) as HTMLElement | null\n      if (!wrapper) return\n\n      // Reset previous constraints so we measure natural size\n      const body = el.querySelector(\n        `[${SLOT_ATTR}=\"datetimepicker-body\"]`\n      ) as HTMLElement | null\n      if (body) {\n        body.style.maxHeight = \"\"\n        body.style.overflowY = \"\"\n      }\n\n      const rect = wrapper.getBoundingClientRect()\n      const vh = window.innerHeight\n      const vw = window.innerWidth\n      const pad = 8\n      const maxH = vh - 2 * pad\n\n      let matrix = { m41: 0, m42: 0 }\n      try {\n        const computedTransform = getComputedStyle(wrapper).transform\n        if (\n          typeof DOMMatrixReadOnly !== \"undefined\" &&\n          computedTransform &&\n          computedTransform !== \"none\"\n        ) {\n          matrix = new DOMMatrixReadOnly(computedTransform)\n        }\n      } catch {\n        // Fallback if transform cannot be parsed\n      }\n      let dy = 0\n      let dx = 0\n\n      if (rect.height > maxH) {\n        // Popover is taller than viewport — constrain the body area\n        // (keep footer visible) and pin to top padding\n        if (body) {\n          const footer = el.querySelector(\n            `[${SLOT_ATTR}=\"datetimepicker-footer\"]`\n          ) as HTMLElement | null\n          const footerH = footer ? footer.getBoundingClientRect().height : 0\n          body.style.maxHeight = `${maxH - footerH}px`\n          body.style.overflowY = \"auto\"\n        }\n        dy = pad - rect.top\n      } else {\n        // Fits in viewport — just shift to stay within bounds\n        if (rect.bottom > vh - pad) {\n          dy = vh - pad - rect.bottom\n        }\n        if (rect.top + dy < pad) {\n          dy = pad - rect.top\n        }\n      }\n\n      // Keep the popover on-screen horizontally\n      if (rect.right > vw - pad) {\n        dx = vw - pad - rect.right\n      }\n      if (rect.left + dx < pad) {\n        dx = pad - rect.left\n      }\n\n      if (dx !== 0 || dy !== 0) {\n        wrapper.style.transform = `translate(${matrix.m41 + dx}px, ${matrix.m42 + dy}px)`\n      }\n    }\n\n    // Wait for Floating UI to finish positioning\n    const raf = requestAnimationFrame(() => {\n      requestAnimationFrame(adjustPosition)\n    })\n\n    let resizeRaf = 0\n    const onResize = () => {\n      const el = contentRef.current\n      if (el) {\n        el.style.width = \"\"\n        delete el.dataset.widthLocked\n      }\n      cancelAnimationFrame(resizeRaf)\n      resizeRaf = requestAnimationFrame(() => {\n        resizeRaf = requestAnimationFrame(adjustPosition)\n      })\n    }\n    window.addEventListener(\"resize\", onResize)\n\n    const el = contentRef.current\n\n    return () => {\n      cancelAnimationFrame(raf)\n      cancelAnimationFrame(resizeRaf)\n      window.removeEventListener(\"resize\", onResize)\n      // Reset locked width on close so next open re-measures\n      if (el) {\n        el.style.width = \"\"\n        delete el.dataset.widthLocked\n      }\n    }\n  }, [isOpen])\n\n  const isSideLayout =\n    showTimePicker && timePickerPosition === \"side\" && isWideEnough\n\n  return (\n    <PopoverPortal>\n      <PopoverContent\n        align=\"start\"\n        className={mergeClasses(\n          styles.content,\n          !isSideLayout && styles.contentNarrow,\n          className\n        )}\n        collisionPadding={8}\n        flush\n        ref={ref}\n        side=\"bottom\"\n        sideOffset={4}\n        sticky=\"always\"\n      >\n        <div\n          className={styles.panelContent}\n          data-slot=\"datetimepicker-content\"\n          {...{ [SLOT_ATTR]: \"datetimepicker-content\" }}\n          ref={contentRef}\n        >\n          <div\n            className={mergeClasses(\n              styles.body,\n              isSideLayout ? styles.bodySide : styles.bodyBottom\n            )}\n            data-slot=\"datetimepicker-body\"\n            {...{ [SLOT_ATTR]: \"datetimepicker-body\" }}\n          >\n            {isSideLayout && showTimePicker ? (\n              <div\n                className={styles.dateSection}\n                data-slot=\"datetimepicker-date-section\"\n                {...{ [SLOT_ATTR]: \"datetimepicker-date-section\" }}\n              >\n                <Calendar\n                  currentTimeInTimezone={currentTimeInTimezone}\n                  disablePast={disablePast}\n                  locale={locale}\n                  nextMonthLabel={nextMonthLabel}\n                  onChange={handleDateChange}\n                  previousMonthLabel={previousMonthLabel}\n                  showTodayButton={showTodayButton}\n                  showWeekNumbers={showWeekNumbers}\n                  todayLabel={todayLabel}\n                  value={tempValue}\n                />\n              </div>\n            ) : (\n              <Calendar\n                currentTimeInTimezone={currentTimeInTimezone}\n                disablePast={disablePast}\n                locale={locale}\n                nextMonthLabel={nextMonthLabel}\n                onChange={handleDateChange}\n                previousMonthLabel={previousMonthLabel}\n                showTodayButton={showTodayButton}\n                showWeekNumbers={showWeekNumbers}\n                todayLabel={todayLabel}\n                value={tempValue}\n              />\n            )}\n            {showTimePicker && (\n              <>\n                {isSideLayout ? (\n                  <>\n                    <div\n                      className={styles.timeSpacer}\n                      data-slot=\"datetimepicker-time-spacer\"\n                      {...{ [SLOT_ATTR]: \"datetimepicker-time-spacer\" }}\n                    />\n                    <div\n                      className={styles.timeSection}\n                      data-slot=\"datetimepicker-time-section\"\n                      {...{ [SLOT_ATTR]: \"datetimepicker-time-section\" }}\n                    >\n                      <TimePicker\n                        currentTimeInTimezone={currentTimeInTimezone}\n                        disablePast={disablePast}\n                        fillHeight\n                        hoursLabel={hoursLabel}\n                        minuteStep={minuteStep}\n                        minutesLabel={minutesLabel}\n                        onChange={handleDateChange}\n                        value={tempValue}\n                      />\n                    </div>\n                  </>\n                ) : (\n                  <TimePicker\n                    currentTimeInTimezone={currentTimeInTimezone}\n                    disablePast={disablePast}\n                    hoursLabel={hoursLabel}\n                    minuteStep={minuteStep}\n                    minutesLabel={minutesLabel}\n                    onChange={handleDateChange}\n                    value={tempValue}\n                  />\n                )}\n              </>\n            )}\n          </div>\n          <div\n            className={styles.footer}\n            data-slot=\"datetimepicker-footer\"\n            {...{ [SLOT_ATTR]: \"datetimepicker-footer\" }}\n          >\n            <Button onClick={cancel} size=\"sm\" variant=\"secondary\">\n              {cancelLabel}\n            </Button>\n            <Button onClick={confirm} size=\"sm\" variant=\"primary\">\n              {okLabel}\n            </Button>\n          </div>\n        </div>\n      </PopoverContent>\n    </PopoverPortal>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","boxModel","shorthands","tokens.spacingGroup2","tokens.spacingElement3","tokens.spacingGroup1","tokens.spacingElement2","DateTimePickerPanel","React","showTimePicker","timePickerPosition","okLabel","cancelLabel","previousMonthLabel","nextMonthLabel","hoursLabel","minutesLabel","showTodayButton","todayLabel","showWeekNumbers","className","minuteStep","ref","styles","tempValue","isOpen","locale","disablePast","currentTimeInTimezone","handleDateChange","confirm","cancel","useDateTimePickerContext","isWideEnough","setIsWideEnough","update","contentRef","adjustPosition","el","wrapper","body","SLOT_ATTR","rect","vh","vw","pad","maxH","matrix","computedTransform","dy","dx","footer","footerH","raf","resizeRaf","onResize","isSideLayout","PopoverPortal","jsx","PopoverContent","mergeClasses","jsxs","Calendar","Fragment","TimePicker","Button"],"mappings":";;;;;;;;;;;AA8BA,MAAMA,KAAYC,GAAiB;AAAA,EACjC,SAAS;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,EAAA;AAAA,EAEb,eAAe;AAAA,IACb,GAAGC;AAAA,IACH,OAAO;AAAA,EAAA;AAAA,EAET,cAAc;AAAA,IACZ,GAAGA;AAAA,IACH,SAAS;AAAA,IACT,eAAe;AAAA,IACf,GAAGC,EAAW,IAAIC,EAAoB;AAAA,IACtC,GAAGD,EAAW,QAAQE,EAAsB;AAAA,EAAA;AAAA,EAE9C,MAAM;AAAA,IACJ,SAAS;AAAA,EAAA;AAAA,EAEX,YAAY;AAAA,IACV,eAAe;AAAA,IACf,GAAGF,EAAW,IAAIG,CAAoB;AAAA,EAAA;AAAA,EAExC,UAAU;AAAA,IACR,eAAe;AAAA,IACf,GAAGH,EAAW,IAAIG,CAAoB;AAAA,IACtC,UAAU;AAAA,EAAA;AAAA,EAEZ,aAAa;AAAA,IACX,GAAGJ;AAAA,IACH,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,UAAU;AAAA,EAAA;AAAA,EAEZ,YAAY;AAAA,IACV,GAAGA;AAAA,IACH,OAAO;AAAA,IACP,YAAY;AAAA,EAAA;AAAA,EAEd,aAAa;AAAA,IACX,GAAGA;AAAA,IACH,UAAU;AAAA,IACV,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,EAAA;AAAA,EAEd,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,GAAGC,EAAW,IAAII,EAAsB;AAAA,EAAA;AAE5C,CAAC,GAEYC,KAAsBC,EAAM,WAGvC,SACA;AAAA,EACE,gBAAAC,IAAiB;AAAA,EACjB,oBAAAC,IAAqB;AAAA,EACrB,SAAAC,IAAU;AAAA,EACV,aAAAC,IAAc;AAAA,EACd,oBAAAC,IAAqB;AAAA,EACrB,gBAAAC,IAAiB;AAAA,EACjB,YAAAC;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,YAAAC,IAAa;AAAA,EACb,iBAAAC,IAAkB;AAAA,EAClB,WAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GACAC,GACA;AACA,QAAMC,IAASxB,GAAA,GACT;AAAA,IACJ,WAAAyB;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,EAAA,IACEC,GAAA,GAGE,CAACC,GAAcC,EAAe,IAAI1B,EAAM,SAAS,EAAI;AAE3D,EAAAA,EAAM,UAAU,MAAM;AACpB,QAAIE,MAAuB,OAAQ;AAEnC,UAAMyB,IAAS,MAAMD,GAAgB,OAAO,cAAc,GAAG;AAE7D,WAAAC,EAAA,GACA,OAAO,iBAAiB,UAAUA,CAAM,GAEjC,MAAM,OAAO,oBAAoB,UAAUA,CAAM;AAAA,EAC1D,GAAG,CAACzB,CAAkB,CAAC;AAKvB,QAAM0B,IAAa5B,EAAM,OAAuB,IAAI;AAEpD,EAAAA,EAAM,gBAAgB,MAAM;AAC1B,QAAI,CAACiB,EAAQ;AAEb,UAAMY,IAAiB,MAAM;AAC3B,YAAMC,IAAKF,EAAW;AACtB,UAAI,CAACE,EAAI;AAGT,MAAKA,EAAG,QAAQ,gBACdA,EAAG,MAAM,QAAQ,GAAGA,EAAG,WAAW,MAClCA,EAAG,QAAQ,cAAc;AAG3B,YAAMC,IAAUD,EAAG;AAAA,QACjB;AAAA,MAAA;AAEF,UAAI,CAACC,EAAS;AAGd,YAAMC,IAAOF,EAAG;AAAA,QACd,IAAIG,CAAS;AAAA,MAAA;AAEf,MAAID,MACFA,EAAK,MAAM,YAAY,IACvBA,EAAK,MAAM,YAAY;AAGzB,YAAME,IAAOH,EAAQ,sBAAA,GACfI,IAAK,OAAO,aACZC,IAAK,OAAO,YACZC,IAAM,GACNC,IAAOH,IAAK,IAAIE;AAEtB,UAAIE,IAAS,EAAE,KAAK,GAAG,KAAK,EAAA;AAC5B,UAAI;AACF,cAAMC,IAAoB,iBAAiBT,CAAO,EAAE;AACpD,QACE,OAAO,oBAAsB,OAC7BS,KACAA,MAAsB,WAEtBD,IAAS,IAAI,kBAAkBC,CAAiB;AAAA,MAEpD,QAAQ;AAAA,MAER;AACA,UAAIC,IAAK,GACLC,IAAK;AAET,UAAIR,EAAK,SAASI,GAAM;AAGtB,YAAIN,GAAM;AACR,gBAAMW,IAASb,EAAG;AAAA,YAChB,IAAIG,CAAS;AAAA,UAAA,GAETW,KAAUD,IAASA,EAAO,sBAAA,EAAwB,SAAS;AACjE,UAAAX,EAAK,MAAM,YAAY,GAAGM,IAAOM,EAAO,MACxCZ,EAAK,MAAM,YAAY;AAAA,QACzB;AACA,QAAAS,IAAKJ,IAAMH,EAAK;AAAA,MAClB;AAEE,QAAIA,EAAK,SAASC,IAAKE,MACrBI,IAAKN,IAAKE,IAAMH,EAAK,SAEnBA,EAAK,MAAMO,IAAKJ,MAClBI,IAAKJ,IAAMH,EAAK;AAKpB,MAAIA,EAAK,QAAQE,IAAKC,MACpBK,IAAKN,IAAKC,IAAMH,EAAK,QAEnBA,EAAK,OAAOQ,IAAKL,MACnBK,IAAKL,IAAMH,EAAK,QAGdQ,MAAO,KAAKD,MAAO,OACrBV,EAAQ,MAAM,YAAY,aAAaQ,EAAO,MAAMG,CAAE,OAAOH,EAAO,MAAME,CAAE;AAAA,IAEhF,GAGMI,KAAM,sBAAsB,MAAM;AACtC,4BAAsBhB,CAAc;AAAA,IACtC,CAAC;AAED,QAAIiB,IAAY;AAChB,UAAMC,IAAW,MAAM;AACrB,YAAMjB,IAAKF,EAAW;AACtB,MAAIE,MACFA,EAAG,MAAM,QAAQ,IACjB,OAAOA,EAAG,QAAQ,cAEpB,qBAAqBgB,CAAS,GAC9BA,IAAY,sBAAsB,MAAM;AACtC,QAAAA,IAAY,sBAAsBjB,CAAc;AAAA,MAClD,CAAC;AAAA,IACH;AACA,WAAO,iBAAiB,UAAUkB,CAAQ;AAE1C,UAAMjB,IAAKF,EAAW;AAEtB,WAAO,MAAM;AACX,2BAAqBiB,EAAG,GACxB,qBAAqBC,CAAS,GAC9B,OAAO,oBAAoB,UAAUC,CAAQ,GAEzCjB,MACFA,EAAG,MAAM,QAAQ,IACjB,OAAOA,EAAG,QAAQ;AAAA,IAEtB;AAAA,EACF,GAAG,CAACb,CAAM,CAAC;AAEX,QAAM+B,IACJ/C,KAAkBC,MAAuB,UAAUuB;AAErD,2BACGwB,IAAA,EACC,UAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,WAAWC;AAAA,QACTrC,EAAO;AAAA,QACP,CAACiC,KAAgBjC,EAAO;AAAA,QACxBH;AAAA,MAAA;AAAA,MAEF,kBAAkB;AAAA,MAClB,OAAK;AAAA,MACL,KAAAE;AAAA,MACA,MAAK;AAAA,MACL,YAAY;AAAA,MACZ,QAAO;AAAA,MAEP,UAAA,gBAAAuC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWtC,EAAO;AAAA,UAClB,aAAU;AAAA,UACJ,CAACkB,CAAS,GAAG;AAAA,UACnB,KAAKL;AAAA,UAEL,UAAA;AAAA,YAAA,gBAAAyB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWD;AAAA,kBACTrC,EAAO;AAAA,kBACPiC,IAAejC,EAAO,WAAWA,EAAO;AAAA,gBAAA;AAAA,gBAE1C,aAAU;AAAA,gBACJ,CAACkB,CAAS,GAAG;AAAA,gBAElB,UAAA;AAAA,kBAAAe,KAAgB/C,IACf,gBAAAiD;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAWnC,EAAO;AAAA,sBAClB,aAAU;AAAA,sBACJ,CAACkB,CAAS,GAAG;AAAA,sBAEnB,UAAA,gBAAAiB;AAAA,wBAACI;AAAA,wBAAA;AAAA,0BACC,uBAAAlC;AAAA,0BACA,aAAAD;AAAA,0BACA,QAAAD;AAAA,0BACA,gBAAAZ;AAAA,0BACA,UAAUe;AAAA,0BACV,oBAAAhB;AAAA,0BACA,iBAAAI;AAAA,0BACA,iBAAAE;AAAA,0BACA,YAAAD;AAAA,0BACA,OAAOM;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACT;AAAA,kBAAA,IAGF,gBAAAkC;AAAA,oBAACI;AAAA,oBAAA;AAAA,sBACC,uBAAAlC;AAAA,sBACA,aAAAD;AAAA,sBACA,QAAAD;AAAA,sBACA,gBAAAZ;AAAA,sBACA,UAAUe;AAAA,sBACV,oBAAAhB;AAAA,sBACA,iBAAAI;AAAA,sBACA,iBAAAE;AAAA,sBACA,YAAAD;AAAA,sBACA,OAAOM;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAGVf,KACC,gBAAAiD,EAAAK,GAAA,EACG,UAAAP,IACC,gBAAAK,EAAAE,GAAA,EACE,UAAA;AAAA,oBAAA,gBAAAL;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAWnC,EAAO;AAAA,wBAClB,aAAU;AAAA,wBACJ,CAACkB,CAAS,GAAG;AAAA,sBAA6B;AAAA,oBAAA;AAAA,oBAElD,gBAAAiB;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAWnC,EAAO;AAAA,wBAClB,aAAU;AAAA,wBACJ,CAACkB,CAAS,GAAG;AAAA,wBAEnB,UAAA,gBAAAiB;AAAA,0BAACM;AAAA,0BAAA;AAAA,4BACC,uBAAApC;AAAA,4BACA,aAAAD;AAAA,4BACA,YAAU;AAAA,4BACV,YAAAZ;AAAA,4BACA,YAAAM;AAAA,4BACA,cAAAL;AAAA,4BACA,UAAUa;AAAA,4BACV,OAAOL;AAAA,0BAAA;AAAA,wBAAA;AAAA,sBACT;AAAA,oBAAA;AAAA,kBACF,EAAA,CACF,IAEA,gBAAAkC;AAAA,oBAACM;AAAA,oBAAA;AAAA,sBACC,uBAAApC;AAAA,sBACA,aAAAD;AAAA,sBACA,YAAAZ;AAAA,sBACA,YAAAM;AAAA,sBACA,cAAAL;AAAA,sBACA,UAAUa;AAAA,sBACV,OAAOL;AAAA,oBAAA;AAAA,kBAAA,EACT,CAEJ;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAGJ,gBAAAqC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWtC,EAAO;AAAA,gBAClB,aAAU;AAAA,gBACJ,CAACkB,CAAS,GAAG;AAAA,gBAEnB,UAAA;AAAA,kBAAA,gBAAAiB,EAACO,KAAO,SAASlC,GAAQ,MAAK,MAAK,SAAQ,aACxC,UAAAnB,EAAA,CACH;AAAA,kBACA,gBAAA8C,EAACO,KAAO,SAASnC,GAAS,MAAK,MAAK,SAAQ,WACzC,UAAAnB,EAAA,CACH;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}

package/dist/components/date-time-picker/date-time-picker.js

@@ -3,15 +3,17 @@ import * as o from "react";
 import { SLOT_ATTR as w, mergeClasses as z } from "@epilot/zenith-runtime/v1";
 import { Field as G, FieldLabel as H, FieldError as J } from "../field/field.js";
 import { makeZenithStyles as K } from "../../styles/make-styles.js";
-import { DateTimePickerRoot as Q } from "./date-time-picker-context.js";
-import { DateTimePickerLabelProvider as U, DateTimePickerInput as W } from "./date-time-picker-input.js";
-import { DateTimePickerPopover as X } from "./date-time-picker-popover.js";
-import { DateTimePickerPanel as Y } from "./date-time-picker-panel.js";
-const $ = K({
+import { boxModel as Q } from "../../styles/host-reset.js";
+import { DateTimePickerRoot as U } from "./date-time-picker-context.js";
+import { DateTimePickerLabelProvider as W, DateTimePickerInput as X } from "./date-time-picker-input.js";
+import { DateTimePickerPopover as Y } from "./date-time-picker-popover.js";
+import { DateTimePickerPanel as $ } from "./date-time-picker-panel.js";
+const A = K({
   root: {
+    ...Q,
     width: "100%"
   }
-}), se = o.forwardRef(
+}), ce = o.forwardRef(
   function({
     value: a,
     onChange: c,
@@ -29,32 +31,32 @@ const $ = K({
     cancelLabel: T,
     inputAriaLabel: i,
     openPickerAriaLabel: D,
-    previousMonthLabel: F,
-    nextMonthLabel: I,
-    hoursLabel: M,
+    previousMonthLabel: M,
+    nextMonthLabel: F,
+    hoursLabel: I,
     minutesLabel: g,
-    showTodayButton: R,
-    todayLabel: x,
+    showTodayButton: x,
+    todayLabel: R,
     showWeekNumbers: S,
     testId: j,
     currentTimeInTimezone: L,
-    timePickerPosition: B,
+    timePickerPosition: b,
     showTimePicker: d = !0,
-    editable: C,
-    iconPosition: E,
-    minuteStep: N
-  }, O) {
-    const V = $(), Z = r ? "destructive" : "highlight", m = o.useId(), l = o.useId(), _ = o.useMemo(
+    editable: B,
+    iconPosition: C,
+    minuteStep: E
+  }, N) {
+    const O = A(), V = r ? "destructive" : "highlight", m = o.useId(), l = o.useId(), Z = o.useMemo(
       () => t ? { inputId: m, labelId: l, namedByLabel: i === void 0 } : null,
       [t, m, l, i]
-    ), b = y ?? (d ? void 0 : "dd/MM/yyyy"), q = h ?? (d ? void 0 : "dd/MM/yyyy");
+    ), _ = y ?? (d ? void 0 : "dd/MM/yyyy"), q = h ?? (d ? void 0 : "dd/MM/yyyy");
     return /* @__PURE__ */ e(
-      Q,
+      U,
       {
         currentTimeInTimezone: L,
         disabled: f,
         disablePast: p,
-        format: b,
+        format: _,
         locale: u,
         onBlur: n,
         onChange: c,
@@ -62,19 +64,19 @@ const $ = K({
         children: /* @__PURE__ */ s(
           G,
           {
-            className: z(V.root, v),
+            className: z(O.root, v),
             "data-slot": "datetimepicker",
             [w]: "datetimepicker",
-            ref: O,
-            variant: Z,
+            ref: N,
+            variant: V,
             children: [
               t && /* @__PURE__ */ e(H, { id: l, htmlFor: m, children: t }),
-              /* @__PURE__ */ e(U, { value: _, children: /* @__PURE__ */ s(X, { children: [
+              /* @__PURE__ */ e(W, { value: Z, children: /* @__PURE__ */ s(Y, { children: [
                 /* @__PURE__ */ e(
-                  W,
+                  X,
                   {
-                    editable: C,
-                    iconPosition: E,
+                    editable: B,
+                    iconPosition: C,
                     inputAriaLabel: i,
                     keyboardIcon: P,
                     openPickerAriaLabel: D,
@@ -83,20 +85,20 @@ const $ = K({
                   }
                 ),
                 /* @__PURE__ */ e(
-                  Y,
+                  $,
                   {
                     cancelLabel: T,
-                    hoursLabel: M,
-                    minuteStep: N,
+                    hoursLabel: I,
+                    minuteStep: E,
                     minutesLabel: g,
-                    nextMonthLabel: I,
+                    nextMonthLabel: F,
                     okLabel: k,
-                    previousMonthLabel: F,
+                    previousMonthLabel: M,
                     showTimePicker: d,
-                    showTodayButton: R,
+                    showTodayButton: x,
                     showWeekNumbers: S,
-                    timePickerPosition: B,
-                    todayLabel: x
+                    timePickerPosition: b,
+                    todayLabel: R
                   }
                 )
               ] }) }),
@@ -109,10 +111,10 @@ const $ = K({
   }
 );
 export {
-  se as DateTimePicker,
-  W as DateTimePickerInput,
-  Y as DateTimePickerPanel,
-  X as DateTimePickerPopover,
-  Q as DateTimePickerRoot
+  ce as DateTimePicker,
+  X as DateTimePickerInput,
+  $ as DateTimePickerPanel,
+  Y as DateTimePickerPopover,
+  U as DateTimePickerRoot
 };
 //# sourceMappingURL=date-time-picker.js.map