@commercetools/nimbus 2.0.1-rc4 → 2.1.0

package/dist/chunks/date-input-Cnlg-VXW.es.js

@@ -0,0 +1,21 @@
+import { jsx as e, jsxs as m, Fragment as u } from "react/jsx-runtime";
+import { createSlotRecipeContext as f } from "@chakra-ui/react";
+import { $ as h, a as g, b as S } from "./DateField-C5JgBb30.es.js";
+import { useRecipe as $ } from "@chakra-ui/react/styled-system";
+import { d as x } from "./index-BEgCT-l6.es.js";
+import { e as I } from "./extract-style-props-DChosa6I.es.js";
+const { withProvider: D, withContext: t } = /* @__PURE__ */ f({
+  key: "dateInput"
+}), b = /* @__PURE__ */ D("div", "root"), P = /* @__PURE__ */ t("div", "leadingElement"), v = /* @__PURE__ */ t("div", "trailingElement"), E = /* @__PURE__ */ t("div", "segmentGroup"), C = /* @__PURE__ */ t("div", "segment"), y = (o) => {
+  const i = $({ recipe: x }), { leadingElement: r, trailingElement: n, ...a } = o, [c, p] = i.splitVariantProps({ ...a }), [s, l] = I(p);
+  return /* @__PURE__ */ e(b, { ...c, ...s, asChild: !0, children: /* @__PURE__ */ e(h, { ...l, children: /* @__PURE__ */ m(u, { children: [
+    r && /* @__PURE__ */ e(P, { children: r }),
+    /* @__PURE__ */ e(E, { asChild: !0, children: /* @__PURE__ */ e(g, { children: (d) => /* @__PURE__ */ e(C, { asChild: !0, children: /* @__PURE__ */ e(S, { segment: d }) }) }) }),
+    n && /* @__PURE__ */ e(v, { children: n })
+  ] }) }) });
+};
+y.displayName = "DateInput";
+export {
+  y as D
+};
+//# sourceMappingURL=date-input-Cnlg-VXW.es.js.map

package/dist/chunks/date-input-Cnlg-VXW.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-input-Cnlg-VXW.es.js","sources":["../../src/components/date-input/date-input.slots.tsx","../../src/components/date-input/date-input.tsx"],"sourcesContent":["import {\n  type HTMLChakraProps,\n  createSlotRecipeContext,\n} from \"@chakra-ui/react\";\nimport type { DateInputRootSlotProps } from \"./date-input.types\";\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n  key: \"dateInput\",\n});\n\n/**\n * Root component that provides the styling context for the DateInput component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const DateInputRootSlot = withProvider<\n  HTMLDivElement,\n  DateInputRootSlotProps\n>(\"div\", \"root\");\n\nexport const DateInputLeadingElementSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"leadingElement\");\n\nexport const DateInputTrailingElementSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"trailingElement\");\n\n/**\n * Slot component for the DateField part of the DateInput.\n */\nexport const DateInputSegmentGroupSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"segmentGroup\");\n\n/**\n * Slot component for the DateField part of the DateInput.\n */\nexport const DateInputSegmentSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"segment\");\n","import {\n  DateInputLeadingElementSlot,\n  DateInputRootSlot,\n  DateInputSegmentGroupSlot,\n  DateInputSegmentSlot,\n  DateInputTrailingElementSlot,\n} from \"./date-input.slots\";\n\nimport {\n  DateField,\n  DateInput as DateInputField,\n  DateSegment,\n} from \"react-aria-components\";\nimport { useRecipe } from \"@chakra-ui/react/styled-system\";\nimport { dateInputSlotRecipe } from \"./date-input.recipe\";\nimport type { DateInputProps } from \"./date-input.types\";\nimport { extractStyleProps } from \"@/utils\";\n\n/**\n * # DateInput\n *\n * allows entering a date\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/dateinput}\n */\nexport const DateInput = (props: DateInputProps) => {\n  const recipe = useRecipe({ recipe: dateInputSlotRecipe });\n  const { leadingElement, trailingElement, ...rest } = props;\n  const [recipeProps, recipeFreeProps] = recipe.splitVariantProps({ ...rest });\n  const [styleProps, functionalProps] = extractStyleProps(recipeFreeProps);\n\n  return (\n    <DateInputRootSlot {...recipeProps} {...styleProps} asChild>\n      <DateField {...functionalProps}>\n        <>\n          {leadingElement && (\n            <DateInputLeadingElementSlot>\n              {leadingElement}\n            </DateInputLeadingElementSlot>\n          )}\n          <DateInputSegmentGroupSlot asChild>\n            <DateInputField>\n              {(segment) => (\n                <DateInputSegmentSlot asChild>\n                  <DateSegment segment={segment} />\n                </DateInputSegmentSlot>\n              )}\n            </DateInputField>\n          </DateInputSegmentGroupSlot>\n          {trailingElement && (\n            <DateInputTrailingElementSlot>\n              {trailingElement}\n            </DateInputTrailingElementSlot>\n          )}\n        </>\n      </DateField>\n    </DateInputRootSlot>\n  );\n};\n\nDateInput.displayName = \"DateInput\";\n"],"names":["withProvider","withContext","createSlotRecipeContext","DateInputRootSlot","DateInputLeadingElementSlot","DateInputTrailingElementSlot","DateInputSegmentGroupSlot","DateInputSegmentSlot","DateInput","props","recipe","useRecipe","dateInputSlotRecipe","leadingElement","trailingElement","rest","recipeProps","recipeFreeProps","styleProps","functionalProps","extractStyleProps","jsx","DateField","jsxs","Fragment","DateInputField","segment","DateSegment"],"mappings":";;;;;;AAOA,MAAM,EAAE,cAAAA,GAAc,aAAAC,EAAA,IAAgB,gBAAAC,EAAwB;AAAA,EAC5D,KAAK;AACP,CAAC,GAMYC,IAAoB,gBAAAH,EAG/B,OAAO,MAAM,GAEFI,IAA8B,gBAAAH,EAGzC,OAAO,gBAAgB,GAEZI,IAA+B,gBAAAJ,EAG1C,OAAO,iBAAiB,GAKbK,IAA4B,gBAAAL,EAGvC,OAAO,cAAc,GAKVM,IAAuB,gBAAAN,EAGlC,OAAO,SAAS,GCnBLO,IAAY,CAACC,MAA0B;AAClD,QAAMC,IAASC,EAAU,EAAE,QAAQC,GAAqB,GAClD,EAAE,gBAAAC,GAAgB,iBAAAC,GAAiB,GAAGC,MAASN,GAC/C,CAACO,GAAaC,CAAe,IAAIP,EAAO,kBAAkB,EAAE,GAAGK,GAAM,GACrE,CAACG,GAAYC,CAAe,IAAIC,EAAkBH,CAAe;AAEvE,SACE,gBAAAI,EAAClB,GAAA,EAAmB,GAAGa,GAAc,GAAGE,GAAY,SAAO,IACzD,UAAA,gBAAAG,EAACC,GAAA,EAAW,GAAGH,GACb,UAAA,gBAAAI,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAX,KACC,gBAAAQ,EAACjB,KACE,UAAAS,EAAA,CACH;AAAA,sBAEDP,GAAA,EAA0B,SAAO,IAChC,UAAA,gBAAAe,EAACI,KACE,UAAA,CAACC,MACA,gBAAAL,EAACd,GAAA,EAAqB,SAAO,IAC3B,UAAA,gBAAAc,EAACM,KAAY,SAAAD,EAAA,CAAkB,GACjC,GAEJ,EAAA,CACF;AAAA,IACCZ,KACC,gBAAAO,EAAChB,GAAA,EACE,UAAAS,EAAA,CACH;AAAA,EAAA,EAAA,CAEJ,GACF,GACF;AAEJ;AAEAN,EAAU,cAAc;"}

package/dist/chunks/date-input-DlQD1DQ3.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),m=require("@chakra-ui/react"),n=require("./DateField-B5u8QZFY.cjs.js"),h=require("@chakra-ui/react/styled-system"),S=require("./index-DzRjEtIu.cjs.js"),g=require("./extract-style-props-BilMyFTD.cjs.js"),{withProvider:j,withContext:t}=m.createSlotRecipeContext({key:"dateInput"}),I=j("div","root"),D=t("div","leadingElement"),$=t("div","trailingElement"),f=t("div","segmentGroup"),P=t("div","segment"),s=c=>{const o=h.useRecipe({recipe:S.dateInputSlotRecipe}),{leadingElement:r,trailingElement:i,...l}=c,[a,d]=o.splitVariantProps({...l}),[p,u]=g.extractStyleProps(d);return e.jsx(I,{...a,...p,asChild:!0,children:e.jsx(n.$40825cdb76e74f70$export$d9781c7894a82487,{...u,children:e.jsxs(e.Fragment,{children:[r&&e.jsx(D,{children:r}),e.jsx(f,{asChild:!0,children:e.jsx(n.$40825cdb76e74f70$export$7edc06cf1783b30f,{children:x=>e.jsx(P,{asChild:!0,children:e.jsx(n.$40825cdb76e74f70$export$336ab7fa954c4b5f,{segment:x})})})}),i&&e.jsx($,{children:i})]})})})};s.displayName="DateInput";exports.DateInput=s;
+//# sourceMappingURL=date-input-DlQD1DQ3.cjs.js.map

package/dist/chunks/date-input-DlQD1DQ3.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-input-DlQD1DQ3.cjs.js","sources":["../../src/components/date-input/date-input.slots.tsx","../../src/components/date-input/date-input.tsx"],"sourcesContent":["import {\n  type HTMLChakraProps,\n  createSlotRecipeContext,\n} from \"@chakra-ui/react\";\nimport type { DateInputRootSlotProps } from \"./date-input.types\";\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n  key: \"dateInput\",\n});\n\n/**\n * Root component that provides the styling context for the DateInput component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const DateInputRootSlot = withProvider<\n  HTMLDivElement,\n  DateInputRootSlotProps\n>(\"div\", \"root\");\n\nexport const DateInputLeadingElementSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"leadingElement\");\n\nexport const DateInputTrailingElementSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"trailingElement\");\n\n/**\n * Slot component for the DateField part of the DateInput.\n */\nexport const DateInputSegmentGroupSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"segmentGroup\");\n\n/**\n * Slot component for the DateField part of the DateInput.\n */\nexport const DateInputSegmentSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"segment\");\n","import {\n  DateInputLeadingElementSlot,\n  DateInputRootSlot,\n  DateInputSegmentGroupSlot,\n  DateInputSegmentSlot,\n  DateInputTrailingElementSlot,\n} from \"./date-input.slots\";\n\nimport {\n  DateField,\n  DateInput as DateInputField,\n  DateSegment,\n} from \"react-aria-components\";\nimport { useRecipe } from \"@chakra-ui/react/styled-system\";\nimport { dateInputSlotRecipe } from \"./date-input.recipe\";\nimport type { DateInputProps } from \"./date-input.types\";\nimport { extractStyleProps } from \"@/utils\";\n\n/**\n * # DateInput\n *\n * allows entering a date\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/dateinput}\n */\nexport const DateInput = (props: DateInputProps) => {\n  const recipe = useRecipe({ recipe: dateInputSlotRecipe });\n  const { leadingElement, trailingElement, ...rest } = props;\n  const [recipeProps, recipeFreeProps] = recipe.splitVariantProps({ ...rest });\n  const [styleProps, functionalProps] = extractStyleProps(recipeFreeProps);\n\n  return (\n    <DateInputRootSlot {...recipeProps} {...styleProps} asChild>\n      <DateField {...functionalProps}>\n        <>\n          {leadingElement && (\n            <DateInputLeadingElementSlot>\n              {leadingElement}\n            </DateInputLeadingElementSlot>\n          )}\n          <DateInputSegmentGroupSlot asChild>\n            <DateInputField>\n              {(segment) => (\n                <DateInputSegmentSlot asChild>\n                  <DateSegment segment={segment} />\n                </DateInputSegmentSlot>\n              )}\n            </DateInputField>\n          </DateInputSegmentGroupSlot>\n          {trailingElement && (\n            <DateInputTrailingElementSlot>\n              {trailingElement}\n            </DateInputTrailingElementSlot>\n          )}\n        </>\n      </DateField>\n    </DateInputRootSlot>\n  );\n};\n\nDateInput.displayName = \"DateInput\";\n"],"names":["withProvider","withContext","createSlotRecipeContext","DateInputRootSlot","DateInputLeadingElementSlot","DateInputTrailingElementSlot","DateInputSegmentGroupSlot","DateInputSegmentSlot","DateInput","props","recipe","useRecipe","dateInputSlotRecipe","leadingElement","trailingElement","rest","recipeProps","recipeFreeProps","styleProps","functionalProps","extractStyleProps","jsx","DateField","jsxs","Fragment","DateInputField","segment","DateSegment"],"mappings":"6PAOM,CAAE,aAAAA,EAAc,YAAAC,CAAA,EAAgBC,0BAAwB,CAC5D,IAAK,WACP,CAAC,EAMYC,EAAoBH,EAG/B,MAAO,MAAM,EAEFI,EAA8BH,EAGzC,MAAO,gBAAgB,EAEZI,EAA+BJ,EAG1C,MAAO,iBAAiB,EAKbK,EAA4BL,EAGvC,MAAO,cAAc,EAKVM,EAAuBN,EAGlC,MAAO,SAAS,ECnBLO,EAAaC,GAA0B,CAClD,MAAMC,EAASC,EAAAA,UAAU,CAAE,OAAQC,EAAAA,oBAAqB,EAClD,CAAE,eAAAC,EAAgB,gBAAAC,EAAiB,GAAGC,GAASN,EAC/C,CAACO,EAAaC,CAAe,EAAIP,EAAO,kBAAkB,CAAE,GAAGK,EAAM,EACrE,CAACG,EAAYC,CAAe,EAAIC,EAAAA,kBAAkBH,CAAe,EAEvE,OACEI,EAAAA,IAAClB,EAAA,CAAmB,GAAGa,EAAc,GAAGE,EAAY,QAAO,GACzD,SAAAG,EAAAA,IAACC,EAAAA,0CAAA,CAAW,GAAGH,EACb,SAAAI,OAAAC,EAAAA,SAAA,CACG,SAAA,CAAAX,GACCQ,EAAAA,IAACjB,GACE,SAAAS,CAAA,CACH,QAEDP,EAAA,CAA0B,QAAO,GAChC,SAAAe,EAAAA,IAACI,6CACE,SAACC,GACAL,EAAAA,IAACd,EAAA,CAAqB,QAAO,GAC3B,SAAAc,EAAAA,IAACM,6CAAY,QAAAD,CAAA,CAAkB,EACjC,EAEJ,CAAA,CACF,EACCZ,GACCO,EAAAA,IAAChB,EAAA,CACE,SAAAS,CAAA,CACH,CAAA,CAAA,CAEJ,EACF,EACF,CAEJ,EAEAN,EAAU,YAAc"}

package/dist/chunks/date-picker-8kdn6Ih5.es.js

@@ -0,0 +1,218 @@
+import { jsx as e, jsxs as b } from "react/jsx-runtime";
+import { createSlotRecipeContext as S } from "@chakra-ui/react";
+import { Close as D, CalendarMonth as v } from "@commercetools/nimbus-icons";
+import { b as k, c as C } from "./DatePicker-DeknOPX6.es.js";
+import { $ as y, h as M } from "./Dialog-DUbUCf4o.es.js";
+import { $ as I } from "./Group-BQc9LuMT.es.js";
+import { useSlotRecipe as E } from "@chakra-ui/react/styled-system";
+import { h as H } from "./index-BEgCT-l6.es.js";
+import { e as N } from "./extract-style-props-DChosa6I.es.js";
+import { useContext as x, useRef as T, useEffect as R } from "react";
+import { $ as P } from "./Button-BjcDZ5eb.es.js";
+import { c as V, e as w } from "./utils-B6pV5ewr.es.js";
+import { d as z } from "./DateField-C5JgBb30.es.js";
+import { defineMessages as B, useIntl as F, FormattedMessage as j } from "react-intl";
+import { D as A } from "./date-input-Cnlg-VXW.es.js";
+import { C as G } from "./calendar-B--ZxTlQ.es.js";
+import { T as L } from "./time-input-KrO-X3uW.es.js";
+import { Flex as O } from "@chakra-ui/react/flex";
+import { T as q } from "./text-CIb_VDvO.es.js";
+import { B as W } from "./box-DuBoAZvq.es.js";
+import { I as $ } from "./icon-button-DgL7XNUZ.es.js";
+const { withProvider: Z, withContext: h } = /* @__PURE__ */ S({
+  key: "datePicker"
+}), J = /* @__PURE__ */ Z("div", "root"), K = /* @__PURE__ */ h("div", "group"), Q = /* @__PURE__ */ h("div", "popover"), U = /* @__PURE__ */ h("div", "calendar"), u = /* @__PURE__ */ B({
+  clearInput: {
+    id: "Nimbus.DatePicker.clearInput",
+    description: "aria-label for clear input button in date picker",
+    defaultMessage: "Clear input value"
+  },
+  enterTime: {
+    id: "Nimbus.DatePicker.Time.enterTime",
+    description: "aria-label for time input field in date picker",
+    defaultMessage: "Enter time"
+  },
+  enterTimeHour: {
+    id: "Nimbus.DatePicker.Time.enterTimeHour",
+    description: "aria-label for hour-only time input in date picker",
+    defaultMessage: "Enter time (hour)"
+  },
+  enterTimeHourMinute: {
+    id: "Nimbus.DatePicker.Time.enterTimeHourMinute",
+    description: "aria-label for hour and minute time input in date picker",
+    defaultMessage: "Enter time (hour and minute)"
+  },
+  enterTimeHourMinuteSecond: {
+    id: "Nimbus.DatePicker.Time.enterTimeHourMinuteSecond",
+    description: "aria-label for full time input with seconds in date picker",
+    defaultMessage: "Enter time (hour, minute, and second)"
+  },
+  startTime: {
+    id: "Nimbus.DatePicker.Time.startTime",
+    description: "Label for start time in date picker",
+    defaultMessage: "Start time"
+  }
+}), X = ({
+  children: o
+}) => {
+  const r = F(), a = V(P) || {}, n = x(k), t = n?.dateValue === null, { timeValue: s, setTimeValue: l, granularity: i } = n, c = a?.isDisabled, d = () => {
+    switch (i) {
+      case "hour":
+        return r.formatMessage(u.enterTimeHour);
+      case "minute":
+        return r.formatMessage(u.enterTimeHourMinute);
+      case "second":
+        return r.formatMessage(u.enterTimeHourMinuteSecond);
+      default:
+        return r.formatMessage(u.enterTime);
+    }
+  }, f = {
+    /** toggles the calendar popover */
+    calendarToggle: {
+      ...a,
+      onPress: (m) => {
+        const g = document?.activeElement;
+        g && g.blur(), a.onPress?.(m);
+      }
+    },
+    /** Clear button that displays when there's a value in each segment - hidden from both visual and screen readers when there's no value */
+    clear: {
+      onPress: () => n?.setValue(null),
+      "aria-label": r.formatMessage(u.clearInput),
+      isDisabled: c,
+      // Hide the button when there's no value
+      style: t ? { display: "none" } : void 0,
+      "aria-hidden": t ? !0 : void 0
+    }
+  }, p = {
+    timeInput: {
+      value: s,
+      onChange: (m) => {
+        m !== null && l(m);
+      },
+      granularity: i === "day" ? void 0 : i,
+      "aria-label": d()
+    }
+  };
+  return /* @__PURE__ */ e(
+    w,
+    {
+      values: [
+        [
+          P,
+          {
+            slots: f
+          }
+        ],
+        [z, { slots: p }]
+      ],
+      children: o
+    }
+  );
+}, Y = ({
+  hideTimeZone: o,
+  hourCycle: r
+}) => {
+  const a = x(k), { granularity: n, dateValue: t } = a, s = T(null), l = T(t);
+  return n === "day" ? null : (R(() => {
+    let i;
+    if (t && l.current?.compare(t) !== 0) {
+      const c = s.current, d = document.activeElement;
+      c?.contains(d) && d?.getAttribute("role") === "spinbutton" || (i = setTimeout(() => {
+        c && c.querySelector(
+          '[role="spinbutton"]'
+        )?.focus();
+      }, 50));
+    }
+    return l.current = t, () => {
+      i && clearTimeout(i);
+    };
+  }, [t]), /* @__PURE__ */ b(
+    O,
+    {
+      ref: s,
+      borderTop: "solid-25",
+      borderColor: "neutral.3",
+      py: "300",
+      px: "400",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "200",
+      children: [
+        /* @__PURE__ */ e(q, { textStyle: "xs", fontWeight: "500", color: "neutral.12", children: /* @__PURE__ */ e(j, { ...u.startTime }) }),
+        /* @__PURE__ */ e(
+          L,
+          {
+            slot: "timeInput",
+            variant: "ghost",
+            size: "sm",
+            hideTimeZone: o,
+            hourCycle: r
+          }
+        )
+      ]
+    }
+  ));
+}, _ = (o) => {
+  const {
+    size: r = "md",
+    variant: a,
+    granularity: n = "day",
+    hideTimeZone: t,
+    hourCycle: s
+  } = o, l = E({ recipe: H }), [i, c] = l.splitVariantProps(o), [d, f] = N(c), p = r === "md" ? "xs" : "2xs", m = n === "day" ? o.shouldCloseOnSelect : !1;
+  return /* @__PURE__ */ e(J, { ...i, ...d, asChild: !0, children: /* @__PURE__ */ e(
+    C,
+    {
+      ...f,
+      shouldCloseOnSelect: m,
+      children: /* @__PURE__ */ b(X, { children: [
+        /* @__PURE__ */ e(K, { asChild: !0, children: /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(
+          A,
+          {
+            size: r,
+            variant: a,
+            width: "full",
+            hideTimeZone: t,
+            hourCycle: s,
+            trailingElement: /* @__PURE__ */ b(W, { children: [
+              /* @__PURE__ */ e(
+                $,
+                {
+                  variant: "ghost",
+                  size: p,
+                  slot: "clear",
+                  children: /* @__PURE__ */ e(D, {})
+                }
+              ),
+              /* @__PURE__ */ e(
+                $,
+                {
+                  variant: "ghost",
+                  size: p,
+                  slot: "calendarToggle",
+                  children: /* @__PURE__ */ e(v, {})
+                }
+              )
+            ] })
+          }
+        ) }) }),
+        /* @__PURE__ */ e(Q, { asChild: !0, children: /* @__PURE__ */ e(y, { placement: "bottom end", children: /* @__PURE__ */ b(M, { children: [
+          /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(G, {}) }),
+          /* @__PURE__ */ e(
+            Y,
+            {
+              hideTimeZone: t,
+              hourCycle: s
+            }
+          )
+        ] }) }) })
+      ] })
+    }
+  ) });
+};
+_.displayName = "DatePicker";
+export {
+  _ as D
+};
+//# sourceMappingURL=date-picker-8kdn6Ih5.es.js.map

package/dist/chunks/date-picker-8kdn6Ih5.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-8kdn6Ih5.es.js","sources":["../../src/components/date-picker/date-picker.slots.tsx","../../src/components/date-picker/date-picker.i18n.ts","../../src/components/date-picker/components/date-picker.custom-context.tsx","../../src/components/date-picker/components/date-picker.time-input.tsx","../../src/components/date-picker/date-picker.tsx"],"sourcesContent":["import {\n  type HTMLChakraProps,\n  createSlotRecipeContext,\n} from \"@chakra-ui/react\";\nimport type { DatePickerRootSlotProps } from \"./date-picker.types\";\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n  key: \"datePicker\",\n});\n\n/**\n * Root component that provides the styling context for the DatePicker component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const DatePickerRootSlot = withProvider<\n  HTMLDivElement,\n  DatePickerRootSlotProps\n>(\"div\", \"root\");\n\n/**\n * Slot component for the input group containing the DateInput.\n */\nexport const DatePickerGroupSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"group\");\n\n/**\n * Slot component for the popover container.\n */\nexport const DatePickerPopoverSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"popover\");\n\n/**\n * Slot component for the calendar container within the popover.\n */\nexport const DatePickerCalendarSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"calendar\");\n\n/**\n * Slot component for the calendar header.\n */\nexport const DatePickerCalendarHeaderSlot = withContext<\n  HTMLElement,\n  HTMLChakraProps<\"header\">\n>(\"header\", \"calendarHeader\");\n\n/**\n * Slot component for the calendar grid.\n */\nexport const DatePickerCalendarGridSlot = withContext<\n  HTMLTableElement,\n  HTMLChakraProps<\"table\">\n>(\"table\", \"calendarGrid\");\n\n/**\n * Slot component for individual calendar cells.\n */\nexport const DatePickerCalendarCellSlot = withContext<\n  HTMLTableCellElement,\n  HTMLChakraProps<\"td\">\n>(\"td\", \"calendarCell\");\n","import { defineMessages } from \"react-intl\";\n\nexport const messages = defineMessages({\n  clearInput: {\n    id: \"Nimbus.DatePicker.clearInput\",\n    description: \"aria-label for clear input button in date picker\",\n    defaultMessage: \"Clear input value\",\n  },\n  enterTime: {\n    id: \"Nimbus.DatePicker.Time.enterTime\",\n    description: \"aria-label for time input field in date picker\",\n    defaultMessage: \"Enter time\",\n  },\n  enterTimeHour: {\n    id: \"Nimbus.DatePicker.Time.enterTimeHour\",\n    description: \"aria-label for hour-only time input in date picker\",\n    defaultMessage: \"Enter time (hour)\",\n  },\n  enterTimeHourMinute: {\n    id: \"Nimbus.DatePicker.Time.enterTimeHourMinute\",\n    description: \"aria-label for hour and minute time input in date picker\",\n    defaultMessage: \"Enter time (hour and minute)\",\n  },\n  enterTimeHourMinuteSecond: {\n    id: \"Nimbus.DatePicker.Time.enterTimeHourMinuteSecond\",\n    description: \"aria-label for full time input with seconds in date picker\",\n    defaultMessage: \"Enter time (hour, minute, and second)\",\n  },\n  startTime: {\n    id: \"Nimbus.DatePicker.Time.startTime\",\n    description: \"Label for start time in date picker\",\n    defaultMessage: \"Start time\",\n  },\n});\n","import { useContext } from \"react\";\nimport {\n  Provider,\n  ButtonContext,\n  DatePickerStateContext,\n  TimeFieldContext,\n  useSlottedContext,\n} from \"react-aria-components\";\nimport type { PressEvent, TimeValue } from \"react-aria\";\nimport { useIntl } from \"react-intl\";\nimport { messages } from \"../date-picker.i18n\";\n\n/**\n * DatePickerCustomContext - Custom context provider for DatePicker\n *\n * Provides React Aria context overrides for button and time input slots,\n * enabling coordinated behavior between DatePicker parts.\n */\nexport const DatePickerCustomContext = ({\n  children,\n}: {\n  children: React.ReactNode;\n}) => {\n  const intl = useIntl();\n  const buttonContext = useSlottedContext(ButtonContext) || {};\n  const datePickerState = useContext(DatePickerStateContext);\n  const noInputValue = datePickerState?.dateValue === null;\n\n  const { timeValue, setTimeValue, granularity } = datePickerState!;\n\n  // Try to get disabled state from the button context\n  const isDatePickerDisabled = buttonContext?.isDisabled;\n\n  // Generate default aria-label based on granularity if not provided\n  const getDefaultTimeInputAriaLabel = () => {\n    switch (granularity) {\n      case \"hour\":\n        return intl.formatMessage(messages.enterTimeHour);\n      case \"minute\":\n        return intl.formatMessage(messages.enterTimeHourMinute);\n      case \"second\":\n        return intl.formatMessage(messages.enterTimeHourMinuteSecond);\n      default:\n        return intl.formatMessage(messages.enterTime);\n    }\n  };\n\n  /**\n   * Button slots\n   * ================================\n   */\n  const buttonSlots = {\n    /** toggles the calendar popover */\n    calendarToggle: {\n      ...buttonContext,\n      onPress: (event: PressEvent) => {\n        // Ensure any active input (e.g., date picker segment) loses focus\n        // because blurring the input will close the popover if it's open (or was just opened)\n        const activeElement = document?.activeElement as HTMLElement | null;\n\n        if (activeElement) {\n          activeElement.blur();\n        }\n\n        buttonContext.onPress?.(event);\n      },\n    },\n    /** Clear button that displays when there's a value in each segment - hidden from both visual and screen readers when there's no value */\n    clear: {\n      onPress: () => datePickerState?.setValue(null),\n      \"aria-label\": intl.formatMessage(messages.clearInput),\n      isDisabled: isDatePickerDisabled,\n      // Hide the button when there's no value\n      style: noInputValue ? { display: \"none\" } : undefined,\n      \"aria-hidden\": noInputValue ? true : undefined,\n    },\n  };\n\n  /**\n   * TimeInput slots\n   * ================================\n   */\n\n  const timeInputSlots = {\n    timeInput: {\n      value: timeValue,\n      onChange: (value: TimeValue | null) => {\n        if (value !== null) {\n          setTimeValue(value);\n        }\n      },\n      granularity: granularity === \"day\" ? undefined : granularity,\n      \"aria-label\": getDefaultTimeInputAriaLabel(),\n    },\n  };\n\n  return (\n    <Provider\n      values={[\n        [\n          ButtonContext,\n          {\n            slots: buttonSlots,\n          },\n        ],\n        [TimeFieldContext, { slots: timeInputSlots }],\n      ]}\n    >\n      {children}\n    </Provider>\n  );\n};\n","import { Flex, Text, TimeInput } from \"@/components\";\nimport { useContext, useRef, useEffect } from \"react\";\nimport { DatePickerStateContext } from \"react-aria-components\";\nimport type { DatePickerTimeInputProps } from \"../date-picker.types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { messages } from \"../date-picker.i18n\";\n\n/**\n * DatePickerTimeInput - Time input component displayed in DatePicker popover footer\n *\n * Only renders when granularity requires time selection (hour, minute, second).\n * Automatically focuses when user selects a date from the calendar.\n *\n * @supportsStyleProps\n */\nexport const DatePickerTimeInput = ({\n  hideTimeZone,\n  hourCycle,\n}: DatePickerTimeInputProps) => {\n  const datePickerState = useContext(DatePickerStateContext);\n  const { granularity, dateValue } = datePickerState!;\n  const timeInputRef = useRef<HTMLDivElement>(null);\n  const previousDateRef = useRef(dateValue);\n\n  // do not show up to the party if you're not invited\n  if (granularity === \"day\") {\n    return null;\n  }\n\n  // Focus the time input when date changes (user selects a date from calendar)\n  useEffect(() => {\n    // Check if date changed\n    let timeoutId: ReturnType<typeof setTimeout> | undefined;\n\n    if (dateValue && previousDateRef.current?.compare(dateValue) !== 0) {\n      // Only auto-focus if no time input segment currently has focus\n      // This prevents stealing focus during user interaction with time segments\n      const container = timeInputRef.current;\n      const activeElement = document.activeElement;\n      const hasTimeSegmentFocus =\n        container?.contains(activeElement) &&\n        activeElement?.getAttribute(\"role\") === \"spinbutton\";\n\n      if (!hasTimeSegmentFocus) {\n        // Small delay to ensure the DOM is ready\n        timeoutId = setTimeout(() => {\n          // Find the first focusable segment within the time input container\n          if (container) {\n            const firstSegment = container.querySelector(\n              '[role=\"spinbutton\"]'\n            ) as HTMLElement;\n            firstSegment?.focus();\n          }\n        }, 50);\n      }\n    }\n\n    previousDateRef.current = dateValue;\n\n    // Cleanup timeout on effect re-run or unmount to prevent memory leaks\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [dateValue]);\n\n  return (\n    <Flex\n      ref={timeInputRef}\n      borderTop=\"solid-25\"\n      borderColor=\"neutral.3\"\n      py=\"300\"\n      px=\"400\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      gap=\"200\"\n    >\n      <Text textStyle=\"xs\" fontWeight=\"500\" color=\"neutral.12\">\n        <FormattedMessage {...messages.startTime} />\n      </Text>\n      <TimeInput\n        slot=\"timeInput\"\n        variant=\"ghost\"\n        size=\"sm\"\n        hideTimeZone={hideTimeZone}\n        hourCycle={hourCycle}\n      />\n    </Flex>\n  );\n};\n","import {\n  DatePickerRootSlot,\n  DatePickerGroupSlot,\n  DatePickerPopoverSlot,\n  DatePickerCalendarSlot,\n} from \"./date-picker.slots\";\n\nimport { CalendarMonth, Close } from \"@commercetools/nimbus-icons\";\n\nimport {\n  DatePicker as ReactAriaDatePicker,\n  Group,\n  Popover,\n  Dialog,\n} from \"react-aria-components\";\nimport { useSlotRecipe } from \"@chakra-ui/react/styled-system\";\nimport { datePickerSlotRecipe } from \"./date-picker.recipe\";\nimport type { DatePickerProps } from \"./date-picker.types\";\nimport { extractStyleProps } from \"@/utils\";\nimport { DateInput, Calendar, IconButton, Box } from \"@/components\";\nimport { DatePickerTimeInput, DatePickerCustomContext } from \"./components\";\n\n/**\n * # DatePicker\n *\n * a UI component for users to enter or select a specific calendar date.\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/datepicker}\n */\nexport const DatePicker = (props: DatePickerProps) => {\n  const {\n    size = \"md\",\n    variant,\n    granularity = \"day\",\n    hideTimeZone,\n    hourCycle,\n  } = props;\n  const recipe = useSlotRecipe({ recipe: datePickerSlotRecipe });\n  const [recipeProps, remainingProps] = recipe.splitVariantProps(props);\n  const [styleProps, otherProps] = extractStyleProps(remainingProps);\n\n  // the size of the buttons overlaying the input\n  const overlayButtonSize = size === \"md\" ? \"xs\" : \"2xs\";\n\n  // When granularity is \"day\", use the prop value (defaults to true if not provided)\n  // For other granularities (time-based), force to false so users can set both date and time\n  const shouldCloseOnSelect =\n    granularity === \"day\" ? props.shouldCloseOnSelect : false;\n\n  return (\n    <DatePickerRootSlot {...recipeProps} {...styleProps} asChild>\n      <ReactAriaDatePicker\n        {...otherProps}\n        shouldCloseOnSelect={shouldCloseOnSelect}\n      >\n        <DatePickerCustomContext>\n          <DatePickerGroupSlot asChild>\n            <Group>\n              <DateInput\n                size={size}\n                variant={variant}\n                width=\"full\"\n                hideTimeZone={hideTimeZone}\n                hourCycle={hourCycle}\n                trailingElement={\n                  <Box>\n                    {/* @ts-expect-error react aria is adding the aria-label prop */}\n                    <IconButton\n                      variant=\"ghost\"\n                      size={overlayButtonSize}\n                      slot=\"clear\"\n                    >\n                      <Close />\n                    </IconButton>\n                    {/* @ts-expect-error react aria is adding the aria-label prop */}\n                    <IconButton\n                      variant=\"ghost\"\n                      size={overlayButtonSize}\n                      slot=\"calendarToggle\"\n                    >\n                      <CalendarMonth />\n                    </IconButton>\n                  </Box>\n                }\n              />\n            </Group>\n          </DatePickerGroupSlot>\n          <DatePickerPopoverSlot asChild>\n            <Popover placement=\"bottom end\">\n              <Dialog>\n                <DatePickerCalendarSlot>\n                  <Calendar />\n                </DatePickerCalendarSlot>\n                <DatePickerTimeInput\n                  hideTimeZone={hideTimeZone}\n                  hourCycle={hourCycle}\n                />\n              </Dialog>\n            </Popover>\n          </DatePickerPopoverSlot>\n        </DatePickerCustomContext>\n      </ReactAriaDatePicker>\n    </DatePickerRootSlot>\n  );\n};\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["withProvider","withContext","createSlotRecipeContext","DatePickerRootSlot","DatePickerGroupSlot","DatePickerPopoverSlot","DatePickerCalendarSlot","messages","defineMessages","DatePickerCustomContext","children","intl","useIntl","buttonContext","useSlottedContext","ButtonContext","datePickerState","useContext","DatePickerStateContext","noInputValue","timeValue","setTimeValue","granularity","isDatePickerDisabled","getDefaultTimeInputAriaLabel","buttonSlots","event","activeElement","timeInputSlots","value","jsx","Provider","TimeFieldContext","DatePickerTimeInput","hideTimeZone","hourCycle","dateValue","timeInputRef","useRef","previousDateRef","useEffect","timeoutId","container","jsxs","Flex","Text","FormattedMessage","TimeInput","DatePicker","props","size","variant","recipe","useSlotRecipe","datePickerSlotRecipe","recipeProps","remainingProps","styleProps","otherProps","extractStyleProps","overlayButtonSize","shouldCloseOnSelect","ReactAriaDatePicker","Group","DateInput","Box","IconButton","Close","CalendarMonth","Popover","Dialog","Calendar"],"mappings":"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"}

package/dist/chunks/date-picker-CxJ6zMkz.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),y=require("@chakra-ui/react"),P=require("@commercetools/nimbus-icons"),x=require("./DatePicker-DGLrUdLu.cjs.js"),T=require("./Dialog-Ye_7tQZU.cjs.js"),q=require("./Group-1nWkximy.cjs.js"),v=require("@chakra-ui/react/styled-system"),C=require("./index-DzRjEtIu.cjs.js"),I=require("./extract-style-props-BilMyFTD.cjs.js"),f=require("react"),k=require("./Button-DLCecw8f.cjs.js"),S=require("./utils-DVb3jcp5.cjs.js"),M=require("./DateField-B5u8QZFY.cjs.js"),h=require("react-intl"),E=require("./date-input-DlQD1DQ3.cjs.js"),H=require("./calendar-DLSOwy_e.cjs.js"),R=require("./time-input-BYGEbCd6.cjs.js"),N=require("@chakra-ui/react/flex"),V=require("./text-BtRhIklG.cjs.js"),B=require("./box-CWni3A32.cjs.js"),D=require("./icon-button-BUmqYcIF.cjs.js"),{withProvider:w,withContext:g}=y.createSlotRecipeContext({key:"datePicker"}),z=w("div","root"),F=g("div","group"),G=g("div","popover"),A=g("div","calendar"),m=h.defineMessages({clearInput:{id:"Nimbus.DatePicker.clearInput",description:"aria-label for clear input button in date picker",defaultMessage:"Clear input value"},enterTime:{id:"Nimbus.DatePicker.Time.enterTime",description:"aria-label for time input field in date picker",defaultMessage:"Enter time"},enterTimeHour:{id:"Nimbus.DatePicker.Time.enterTimeHour",description:"aria-label for hour-only time input in date picker",defaultMessage:"Enter time (hour)"},enterTimeHourMinute:{id:"Nimbus.DatePicker.Time.enterTimeHourMinute",description:"aria-label for hour and minute time input in date picker",defaultMessage:"Enter time (hour and minute)"},enterTimeHourMinuteSecond:{id:"Nimbus.DatePicker.Time.enterTimeHourMinuteSecond",description:"aria-label for full time input with seconds in date picker",defaultMessage:"Enter time (hour, minute, and second)"},startTime:{id:"Nimbus.DatePicker.Time.startTime",description:"Label for start time in date picker",defaultMessage:"Start time"}}),L=({children:n})=>{const r=h.useIntl(),s=S.$64fa3d84918910a7$export$fabf2dc03a41866e(k.$d2b4bc8c273e7be6$export$24d547caef80ccd1)||{},a=f.useContext(x.$06d5b8ec9ee5d538$export$50a10c048fdcdee9),t=a?.dateValue===null,{timeValue:o,setTimeValue:u,granularity:i}=a,c=s?.isDisabled,l=()=>{switch(i){case"hour":return r.formatMessage(m.enterTimeHour);case"minute":return r.formatMessage(m.enterTimeHourMinute);case"second":return r.formatMessage(m.enterTimeHourMinuteSecond);default:return r.formatMessage(m.enterTime)}},b={calendarToggle:{...s,onPress:d=>{const $=document?.activeElement;$&&$.blur(),s.onPress?.(d)}},clear:{onPress:()=>a?.setValue(null),"aria-label":r.formatMessage(m.clearInput),isDisabled:c,style:t?{display:"none"}:void 0,"aria-hidden":t?!0:void 0}},p={timeInput:{value:o,onChange:d=>{d!==null&&u(d)},granularity:i==="day"?void 0:i,"aria-label":l()}};return e.jsx(S.$64fa3d84918910a7$export$2881499e37b75b9a,{values:[[k.$d2b4bc8c273e7be6$export$24d547caef80ccd1,{slots:b}],[M.$40825cdb76e74f70$export$8e17ddc448e87c1e,{slots:p}]],children:n})},O=({hideTimeZone:n,hourCycle:r})=>{const s=f.useContext(x.$06d5b8ec9ee5d538$export$50a10c048fdcdee9),{granularity:a,dateValue:t}=s,o=f.useRef(null),u=f.useRef(t);return a==="day"?null:(f.useEffect(()=>{let i;if(t&&u.current?.compare(t)!==0){const c=o.current,l=document.activeElement;c?.contains(l)&&l?.getAttribute("role")==="spinbutton"||(i=setTimeout(()=>{c&&c.querySelector('[role="spinbutton"]')?.focus()},50))}return u.current=t,()=>{i&&clearTimeout(i)}},[t]),e.jsxs(N.Flex,{ref:o,borderTop:"solid-25",borderColor:"neutral.3",py:"300",px:"400",alignItems:"center",justifyContent:"center",gap:"200",children:[e.jsx(V.Text,{textStyle:"xs",fontWeight:"500",color:"neutral.12",children:e.jsx(h.FormattedMessage,{...m.startTime})}),e.jsx(R.TimeInput,{slot:"timeInput",variant:"ghost",size:"sm",hideTimeZone:n,hourCycle:r})]}))},j=n=>{const{size:r="md",variant:s,granularity:a="day",hideTimeZone:t,hourCycle:o}=n,u=v.useSlotRecipe({recipe:C.datePickerSlotRecipe}),[i,c]=u.splitVariantProps(n),[l,b]=I.extractStyleProps(c),p=r==="md"?"xs":"2xs",d=a==="day"?n.shouldCloseOnSelect:!1;return e.jsx(z,{...i,...l,asChild:!0,children:e.jsx(x.$06d5b8ec9ee5d538$export$5109c6dd95d8fb00,{...b,shouldCloseOnSelect:d,children:e.jsxs(L,{children:[e.jsx(F,{asChild:!0,children:e.jsx(q.$a049562f99e7db0e$export$eb2fcfdbd7ba97d4,{children:e.jsx(E.DateInput,{size:r,variant:s,width:"full",hideTimeZone:t,hourCycle:o,trailingElement:e.jsxs(B.Box,{children:[e.jsx(D.IconButton,{variant:"ghost",size:p,slot:"clear",children:e.jsx(P.Close,{})}),e.jsx(D.IconButton,{variant:"ghost",size:p,slot:"calendarToggle",children:e.jsx(P.CalendarMonth,{})})]})})})}),e.jsx(G,{asChild:!0,children:e.jsx(T.$07b14b47974efb58$export$5b6b19405a83ff9d,{placement:"bottom end",children:e.jsxs(T.$de32f1b87079253c$export$3ddf2d174ce01153,{children:[e.jsx(A,{children:e.jsx(H.Calendar,{})}),e.jsx(O,{hideTimeZone:t,hourCycle:o})]})})})]})})})};j.displayName="DatePicker";exports.DatePicker=j;
+//# sourceMappingURL=date-picker-CxJ6zMkz.cjs.js.map

package/dist/chunks/date-picker-CxJ6zMkz.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-CxJ6zMkz.cjs.js","sources":["../../src/components/date-picker/date-picker.slots.tsx","../../src/components/date-picker/date-picker.i18n.ts","../../src/components/date-picker/components/date-picker.custom-context.tsx","../../src/components/date-picker/components/date-picker.time-input.tsx","../../src/components/date-picker/date-picker.tsx"],"sourcesContent":["import {\n  type HTMLChakraProps,\n  createSlotRecipeContext,\n} from \"@chakra-ui/react\";\nimport type { DatePickerRootSlotProps } from \"./date-picker.types\";\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n  key: \"datePicker\",\n});\n\n/**\n * Root component that provides the styling context for the DatePicker component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const DatePickerRootSlot = withProvider<\n  HTMLDivElement,\n  DatePickerRootSlotProps\n>(\"div\", \"root\");\n\n/**\n * Slot component for the input group containing the DateInput.\n */\nexport const DatePickerGroupSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"group\");\n\n/**\n * Slot component for the popover container.\n */\nexport const DatePickerPopoverSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"popover\");\n\n/**\n * Slot component for the calendar container within the popover.\n */\nexport const DatePickerCalendarSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"calendar\");\n\n/**\n * Slot component for the calendar header.\n */\nexport const DatePickerCalendarHeaderSlot = withContext<\n  HTMLElement,\n  HTMLChakraProps<\"header\">\n>(\"header\", \"calendarHeader\");\n\n/**\n * Slot component for the calendar grid.\n */\nexport const DatePickerCalendarGridSlot = withContext<\n  HTMLTableElement,\n  HTMLChakraProps<\"table\">\n>(\"table\", \"calendarGrid\");\n\n/**\n * Slot component for individual calendar cells.\n */\nexport const DatePickerCalendarCellSlot = withContext<\n  HTMLTableCellElement,\n  HTMLChakraProps<\"td\">\n>(\"td\", \"calendarCell\");\n","import { defineMessages } from \"react-intl\";\n\nexport const messages = defineMessages({\n  clearInput: {\n    id: \"Nimbus.DatePicker.clearInput\",\n    description: \"aria-label for clear input button in date picker\",\n    defaultMessage: \"Clear input value\",\n  },\n  enterTime: {\n    id: \"Nimbus.DatePicker.Time.enterTime\",\n    description: \"aria-label for time input field in date picker\",\n    defaultMessage: \"Enter time\",\n  },\n  enterTimeHour: {\n    id: \"Nimbus.DatePicker.Time.enterTimeHour\",\n    description: \"aria-label for hour-only time input in date picker\",\n    defaultMessage: \"Enter time (hour)\",\n  },\n  enterTimeHourMinute: {\n    id: \"Nimbus.DatePicker.Time.enterTimeHourMinute\",\n    description: \"aria-label for hour and minute time input in date picker\",\n    defaultMessage: \"Enter time (hour and minute)\",\n  },\n  enterTimeHourMinuteSecond: {\n    id: \"Nimbus.DatePicker.Time.enterTimeHourMinuteSecond\",\n    description: \"aria-label for full time input with seconds in date picker\",\n    defaultMessage: \"Enter time (hour, minute, and second)\",\n  },\n  startTime: {\n    id: \"Nimbus.DatePicker.Time.startTime\",\n    description: \"Label for start time in date picker\",\n    defaultMessage: \"Start time\",\n  },\n});\n","import { useContext } from \"react\";\nimport {\n  Provider,\n  ButtonContext,\n  DatePickerStateContext,\n  TimeFieldContext,\n  useSlottedContext,\n} from \"react-aria-components\";\nimport type { PressEvent, TimeValue } from \"react-aria\";\nimport { useIntl } from \"react-intl\";\nimport { messages } from \"../date-picker.i18n\";\n\n/**\n * DatePickerCustomContext - Custom context provider for DatePicker\n *\n * Provides React Aria context overrides for button and time input slots,\n * enabling coordinated behavior between DatePicker parts.\n */\nexport const DatePickerCustomContext = ({\n  children,\n}: {\n  children: React.ReactNode;\n}) => {\n  const intl = useIntl();\n  const buttonContext = useSlottedContext(ButtonContext) || {};\n  const datePickerState = useContext(DatePickerStateContext);\n  const noInputValue = datePickerState?.dateValue === null;\n\n  const { timeValue, setTimeValue, granularity } = datePickerState!;\n\n  // Try to get disabled state from the button context\n  const isDatePickerDisabled = buttonContext?.isDisabled;\n\n  // Generate default aria-label based on granularity if not provided\n  const getDefaultTimeInputAriaLabel = () => {\n    switch (granularity) {\n      case \"hour\":\n        return intl.formatMessage(messages.enterTimeHour);\n      case \"minute\":\n        return intl.formatMessage(messages.enterTimeHourMinute);\n      case \"second\":\n        return intl.formatMessage(messages.enterTimeHourMinuteSecond);\n      default:\n        return intl.formatMessage(messages.enterTime);\n    }\n  };\n\n  /**\n   * Button slots\n   * ================================\n   */\n  const buttonSlots = {\n    /** toggles the calendar popover */\n    calendarToggle: {\n      ...buttonContext,\n      onPress: (event: PressEvent) => {\n        // Ensure any active input (e.g., date picker segment) loses focus\n        // because blurring the input will close the popover if it's open (or was just opened)\n        const activeElement = document?.activeElement as HTMLElement | null;\n\n        if (activeElement) {\n          activeElement.blur();\n        }\n\n        buttonContext.onPress?.(event);\n      },\n    },\n    /** Clear button that displays when there's a value in each segment - hidden from both visual and screen readers when there's no value */\n    clear: {\n      onPress: () => datePickerState?.setValue(null),\n      \"aria-label\": intl.formatMessage(messages.clearInput),\n      isDisabled: isDatePickerDisabled,\n      // Hide the button when there's no value\n      style: noInputValue ? { display: \"none\" } : undefined,\n      \"aria-hidden\": noInputValue ? true : undefined,\n    },\n  };\n\n  /**\n   * TimeInput slots\n   * ================================\n   */\n\n  const timeInputSlots = {\n    timeInput: {\n      value: timeValue,\n      onChange: (value: TimeValue | null) => {\n        if (value !== null) {\n          setTimeValue(value);\n        }\n      },\n      granularity: granularity === \"day\" ? undefined : granularity,\n      \"aria-label\": getDefaultTimeInputAriaLabel(),\n    },\n  };\n\n  return (\n    <Provider\n      values={[\n        [\n          ButtonContext,\n          {\n            slots: buttonSlots,\n          },\n        ],\n        [TimeFieldContext, { slots: timeInputSlots }],\n      ]}\n    >\n      {children}\n    </Provider>\n  );\n};\n","import { Flex, Text, TimeInput } from \"@/components\";\nimport { useContext, useRef, useEffect } from \"react\";\nimport { DatePickerStateContext } from \"react-aria-components\";\nimport type { DatePickerTimeInputProps } from \"../date-picker.types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { messages } from \"../date-picker.i18n\";\n\n/**\n * DatePickerTimeInput - Time input component displayed in DatePicker popover footer\n *\n * Only renders when granularity requires time selection (hour, minute, second).\n * Automatically focuses when user selects a date from the calendar.\n *\n * @supportsStyleProps\n */\nexport const DatePickerTimeInput = ({\n  hideTimeZone,\n  hourCycle,\n}: DatePickerTimeInputProps) => {\n  const datePickerState = useContext(DatePickerStateContext);\n  const { granularity, dateValue } = datePickerState!;\n  const timeInputRef = useRef<HTMLDivElement>(null);\n  const previousDateRef = useRef(dateValue);\n\n  // do not show up to the party if you're not invited\n  if (granularity === \"day\") {\n    return null;\n  }\n\n  // Focus the time input when date changes (user selects a date from calendar)\n  useEffect(() => {\n    // Check if date changed\n    let timeoutId: ReturnType<typeof setTimeout> | undefined;\n\n    if (dateValue && previousDateRef.current?.compare(dateValue) !== 0) {\n      // Only auto-focus if no time input segment currently has focus\n      // This prevents stealing focus during user interaction with time segments\n      const container = timeInputRef.current;\n      const activeElement = document.activeElement;\n      const hasTimeSegmentFocus =\n        container?.contains(activeElement) &&\n        activeElement?.getAttribute(\"role\") === \"spinbutton\";\n\n      if (!hasTimeSegmentFocus) {\n        // Small delay to ensure the DOM is ready\n        timeoutId = setTimeout(() => {\n          // Find the first focusable segment within the time input container\n          if (container) {\n            const firstSegment = container.querySelector(\n              '[role=\"spinbutton\"]'\n            ) as HTMLElement;\n            firstSegment?.focus();\n          }\n        }, 50);\n      }\n    }\n\n    previousDateRef.current = dateValue;\n\n    // Cleanup timeout on effect re-run or unmount to prevent memory leaks\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [dateValue]);\n\n  return (\n    <Flex\n      ref={timeInputRef}\n      borderTop=\"solid-25\"\n      borderColor=\"neutral.3\"\n      py=\"300\"\n      px=\"400\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      gap=\"200\"\n    >\n      <Text textStyle=\"xs\" fontWeight=\"500\" color=\"neutral.12\">\n        <FormattedMessage {...messages.startTime} />\n      </Text>\n      <TimeInput\n        slot=\"timeInput\"\n        variant=\"ghost\"\n        size=\"sm\"\n        hideTimeZone={hideTimeZone}\n        hourCycle={hourCycle}\n      />\n    </Flex>\n  );\n};\n","import {\n  DatePickerRootSlot,\n  DatePickerGroupSlot,\n  DatePickerPopoverSlot,\n  DatePickerCalendarSlot,\n} from \"./date-picker.slots\";\n\nimport { CalendarMonth, Close } from \"@commercetools/nimbus-icons\";\n\nimport {\n  DatePicker as ReactAriaDatePicker,\n  Group,\n  Popover,\n  Dialog,\n} from \"react-aria-components\";\nimport { useSlotRecipe } from \"@chakra-ui/react/styled-system\";\nimport { datePickerSlotRecipe } from \"./date-picker.recipe\";\nimport type { DatePickerProps } from \"./date-picker.types\";\nimport { extractStyleProps } from \"@/utils\";\nimport { DateInput, Calendar, IconButton, Box } from \"@/components\";\nimport { DatePickerTimeInput, DatePickerCustomContext } from \"./components\";\n\n/**\n * # DatePicker\n *\n * a UI component for users to enter or select a specific calendar date.\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/datepicker}\n */\nexport const DatePicker = (props: DatePickerProps) => {\n  const {\n    size = \"md\",\n    variant,\n    granularity = \"day\",\n    hideTimeZone,\n    hourCycle,\n  } = props;\n  const recipe = useSlotRecipe({ recipe: datePickerSlotRecipe });\n  const [recipeProps, remainingProps] = recipe.splitVariantProps(props);\n  const [styleProps, otherProps] = extractStyleProps(remainingProps);\n\n  // the size of the buttons overlaying the input\n  const overlayButtonSize = size === \"md\" ? \"xs\" : \"2xs\";\n\n  // When granularity is \"day\", use the prop value (defaults to true if not provided)\n  // For other granularities (time-based), force to false so users can set both date and time\n  const shouldCloseOnSelect =\n    granularity === \"day\" ? props.shouldCloseOnSelect : false;\n\n  return (\n    <DatePickerRootSlot {...recipeProps} {...styleProps} asChild>\n      <ReactAriaDatePicker\n        {...otherProps}\n        shouldCloseOnSelect={shouldCloseOnSelect}\n      >\n        <DatePickerCustomContext>\n          <DatePickerGroupSlot asChild>\n            <Group>\n              <DateInput\n                size={size}\n                variant={variant}\n                width=\"full\"\n                hideTimeZone={hideTimeZone}\n                hourCycle={hourCycle}\n                trailingElement={\n                  <Box>\n                    {/* @ts-expect-error react aria is adding the aria-label prop */}\n                    <IconButton\n                      variant=\"ghost\"\n                      size={overlayButtonSize}\n                      slot=\"clear\"\n                    >\n                      <Close />\n                    </IconButton>\n                    {/* @ts-expect-error react aria is adding the aria-label prop */}\n                    <IconButton\n                      variant=\"ghost\"\n                      size={overlayButtonSize}\n                      slot=\"calendarToggle\"\n                    >\n                      <CalendarMonth />\n                    </IconButton>\n                  </Box>\n                }\n              />\n            </Group>\n          </DatePickerGroupSlot>\n          <DatePickerPopoverSlot asChild>\n            <Popover placement=\"bottom end\">\n              <Dialog>\n                <DatePickerCalendarSlot>\n                  <Calendar />\n                </DatePickerCalendarSlot>\n                <DatePickerTimeInput\n                  hideTimeZone={hideTimeZone}\n                  hourCycle={hourCycle}\n                />\n              </Dialog>\n            </Popover>\n          </DatePickerPopoverSlot>\n        </DatePickerCustomContext>\n      </ReactAriaDatePicker>\n    </DatePickerRootSlot>\n  );\n};\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["withProvider","withContext","createSlotRecipeContext","DatePickerRootSlot","DatePickerGroupSlot","DatePickerPopoverSlot","DatePickerCalendarSlot","messages","defineMessages","DatePickerCustomContext","children","intl","useIntl","buttonContext","useSlottedContext","ButtonContext","datePickerState","useContext","DatePickerStateContext","noInputValue","timeValue","setTimeValue","granularity","isDatePickerDisabled","getDefaultTimeInputAriaLabel","buttonSlots","event","activeElement","timeInputSlots","value","jsx","Provider","TimeFieldContext","DatePickerTimeInput","hideTimeZone","hourCycle","dateValue","timeInputRef","useRef","previousDateRef","useEffect","timeoutId","container","jsxs","Flex","Text","FormattedMessage","TimeInput","DatePicker","props","size","variant","recipe","useSlotRecipe","datePickerSlotRecipe","recipeProps","remainingProps","styleProps","otherProps","extractStyleProps","overlayButtonSize","shouldCloseOnSelect","ReactAriaDatePicker","Group","DateInput","Box","IconButton","Close","CalendarMonth","Popover","Dialog","Calendar"],"mappings":"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"}

package/dist/chunks/date-range-picker-B2VUcKjG.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),N=require("@chakra-ui/react"),y=require("@commercetools/nimbus-icons"),v=require("./DatePicker-DGLrUdLu.cjs.js"),M=require("./Dialog-Ye_7tQZU.cjs.js"),V=require("./Group-1nWkximy.cjs.js"),E=require("@chakra-ui/react/styled-system"),z=require("./index-DzRjEtIu.cjs.js"),w=require("./extract-style-props-BilMyFTD.cjs.js"),h=require("react"),P=require("react-intl"),S=require("@chakra-ui/react/flex"),$=require("./text-BtRhIklG.cjs.js"),k=require("./time-input-BYGEbCd6.cjs.js"),C=require("./Button-DLCecw8f.cjs.js"),j=require("./utils-DVb3jcp5.cjs.js"),L=require("./DateField-B5u8QZFY.cjs.js"),F=require("./range-calendar-sHWelH3C.cjs.js"),I=require("./date-input-DlQD1DQ3.cjs.js"),q=require("./icon-button-BUmqYcIF.cjs.js"),{withProvider:B,withContext:D}=N.createSlotRecipeContext({key:"dateRangePicker"}),W=B("div","root"),G=D("div","group"),O=D("div","trigger"),A=D("div","popover"),K=D("div","calendar"),l=P.defineMessages({clearSelection:{id:"Nimbus.DateRangePicker.clearSelection",description:"aria-label for clear button in date range picker",defaultMessage:"Clear date range"},openCalendar:{id:"Nimbus.DateRangePicker.openCalendar",description:"aria-label for calendar toggle button in date range picker",defaultMessage:"Open calendar"},clearInput:{id:"Nimbus.DateRangePicker.clearInput",description:"aria-label for clear input button in date range picker",defaultMessage:"Clear input value"},startTime:{id:"Nimbus.DateRangePicker.startTime",description:"aria-label for start time input (default)",defaultMessage:"Start time"},startTimeHour:{id:"Nimbus.DateRangePicker.startTimeHour",description:"aria-label for start time input (hour granularity)",defaultMessage:"Start time (hour)"},startTimeHourMinute:{id:"Nimbus.DateRangePicker.startTimeHourMinute",description:"aria-label for start time input (minute granularity)",defaultMessage:"Start time (hour and minute)"},startTimeHourMinuteSecond:{id:"Nimbus.DateRangePicker.startTimeHourMinuteSecond",description:"aria-label for start time input (second granularity)",defaultMessage:"Start time (hour, minute, and second)"},endTime:{id:"Nimbus.DateRangePicker.endTime",description:"aria-label for end time input (default)",defaultMessage:"End time"},endTimeHour:{id:"Nimbus.DateRangePicker.endTimeHour",description:"aria-label for end time input (hour granularity)",defaultMessage:"End time (hour)"},endTimeHourMinute:{id:"Nimbus.DateRangePicker.endTimeHourMinute",description:"aria-label for end time input (minute granularity)",defaultMessage:"End time (hour and minute)"},endTimeHourMinuteSecond:{id:"Nimbus.DateRangePicker.endTimeHourMinuteSecond",description:"aria-label for end time input (second granularity)",defaultMessage:"End time (hour, minute, and second)"},startTimeLabel:{id:"Nimbus.DateRangePicker.startTimeLabel",description:"visible label for start time input field",defaultMessage:"Start time"},endTimeLabel:{id:"Nimbus.DateRangePicker.endTimeLabel",description:"visible label for end time input field",defaultMessage:"End time"}}),J=({hideTimeZone:o,hourCycle:i})=>{const c=P.useIntl(),t=h.useContext(v.$06d5b8ec9ee5d538$export$80d7ae1f804790be),{granularity:u,value:r}=t,s=h.useRef(null),m=h.useRef(r);return u==="day"?null:(h.useEffect(()=>{let g;if(r?.start&&m.current?.start?.compare(r.start)!==0||r?.end&&m.current?.end?.compare(r.end)!==0){const d=s.current,p=document.activeElement;d?.contains(p)&&p?.getAttribute("role")==="spinbutton"||(g=setTimeout(()=>{if(d){const a=d.querySelector('[role="spinbutton"]');a&&a.focus()}},50))}return m.current=r,()=>{g&&clearTimeout(g)}},[r]),e.jsxs(S.Flex,{ref:s,borderTop:"solid-25",borderColor:"neutral.3",py:"300",px:"400",alignItems:"center",justifyContent:"center",gap:"200",children:[e.jsxs(S.Flex,{alignItems:"center",gap:"200",children:[e.jsx($.Text,{textStyle:"xs",fontWeight:"500",color:"neutral.12",minWidth:"fit-content",children:c.formatMessage(l.startTimeLabel)}),e.jsx(k.TimeInput,{slot:"startTimeInput",variant:"ghost",size:"sm",hideTimeZone:o,hourCycle:i})]}),e.jsxs(S.Flex,{alignItems:"center",gap:"200",children:[e.jsx($.Text,{textStyle:"xs",fontWeight:"500",color:"neutral.12",minWidth:"fit-content",children:c.formatMessage(l.endTimeLabel)}),e.jsx(k.TimeInput,{slot:"endTimeInput",variant:"ghost",size:"sm",hideTimeZone:o,hourCycle:i})]})]}))},Q=({children:o})=>{const i=P.useIntl(),c=j.$64fa3d84918910a7$export$fabf2dc03a41866e(C.$d2b4bc8c273e7be6$export$24d547caef80ccd1)||{},t=h.useContext(v.$06d5b8ec9ee5d538$export$80d7ae1f804790be),u=a=>a?.day&&a?.month&&a?.year,r=!t?.value||!u(t.value.start)||!u(t.value.end),{granularity:s}=t,m=t?.value?.start&&"hour"in t.value.start?t.value.start:null,g=t?.value?.end&&"hour"in t.value.end?t.value.end:null,x=c?.isDisabled,d=a=>{const n=a==="start"?"start":"end";switch(s){case"hour":return i.formatMessage(l[`${n}TimeHour`]);case"minute":return i.formatMessage(l[`${n}TimeHourMinute`]);case"second":return i.formatMessage(l[`${n}TimeHourMinuteSecond`]);default:return i.formatMessage(l[`${n}Time`])}},p={calendarToggle:{...c,onPress:a=>{const n=document?.activeElement;n&&n.blur(),c.onPress?.(a)}},clear:{onPress:()=>t?.setValue(null),"aria-label":i.formatMessage(l.clearInput),isDisabled:x,style:r?{display:"none"}:void 0,"aria-hidden":r?!0:void 0}},T={startTimeInput:{value:m,onChange:a=>{if(a!==null&&t?.value?.start){const n=t.value,f=n.start,b=n.end;if(f&&b){const R=f.set({hour:a.hour,minute:a.minute||0,second:a.second||0,millisecond:a.millisecond||0});t.setValue({start:R,end:b})}}},granularity:s==="day"?void 0:s,"aria-label":d("start")},endTimeInput:{value:g,onChange:a=>{if(a!==null&&t?.value?.end){const n=t.value,f=n.start,b=n.end;if(f&&b){const R=b.set({hour:a.hour,minute:a.minute||0,second:a.second||0,millisecond:a.millisecond||0});t.setValue({start:f,end:R})}}},granularity:s==="day"?void 0:s,"aria-label":d("end")}};return e.jsx(j.$64fa3d84918910a7$export$2881499e37b75b9a,{values:[[C.$d2b4bc8c273e7be6$export$24d547caef80ccd1,{slots:p}],[L.$40825cdb76e74f70$export$8e17ddc448e87c1e,{slots:T}]],children:o})},H=o=>{const i=P.useIntl(),{granularity:c="day",hideTimeZone:t,hourCycle:u}=o,r=E.useSlotRecipe({recipe:z.dateRangePickerSlotRecipe}),[s,m]=r.splitVariantProps(o),[g,x]=w.extractStyleProps(m),{size:d="md"}=s,p=d==="md"?"xs":"2xs",T=c==="day"?o.shouldCloseOnSelect:!1;return e.jsx(W,{...s,...g,asChild:!0,children:e.jsx(v.$06d5b8ec9ee5d538$export$17334619f3ac2224,{...x,shouldCloseOnSelect:T,children:e.jsxs(Q,{children:[e.jsx(G,{asChild:!0,children:e.jsxs(V.$a049562f99e7db0e$export$eb2fcfdbd7ba97d4,{children:[e.jsx(I.DateInput,{slot:"start",size:o.size,variant:"plain",width:"auto",hideTimeZone:t,hourCycle:u}),e.jsx($.Text,{as:"span",px:"150",color:"neutral.11",userSelect:"none","aria-hidden":"true",slot:null,children:"–"}),e.jsx(I.DateInput,{slot:"end",size:o.size,variant:"plain",width:"auto",hideTimeZone:t,hourCycle:u}),e.jsxs(O,{children:[e.jsx(q.IconButton,{variant:"ghost",size:p,slot:"clear","aria-label":i.formatMessage(l.clearSelection),children:e.jsx(y.Close,{})}),e.jsx(q.IconButton,{variant:"ghost",size:p,slot:"calendarToggle","aria-label":i.formatMessage(l.openCalendar),children:e.jsx(y.CalendarMonth,{})})]})]})}),e.jsx(A,{asChild:!0,children:e.jsx(M.$07b14b47974efb58$export$5b6b19405a83ff9d,{placement:"bottom end",children:e.jsxs(M.$de32f1b87079253c$export$3ddf2d174ce01153,{children:[e.jsx(K,{children:e.jsx(F.RangeCalendar,{})}),e.jsx(J,{hideTimeZone:t,hourCycle:u})]})})})]})})})};H.displayName="DateRangePicker";exports.DateRangePicker=H;
+//# sourceMappingURL=date-range-picker-B2VUcKjG.cjs.js.map

package/dist/chunks/date-range-picker-B2VUcKjG.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker-B2VUcKjG.cjs.js","sources":["../../src/components/date-range-picker/date-range-picker.slots.tsx","../../src/components/date-range-picker/date-range-picker.i18n.ts","../../src/components/date-range-picker/components/date-range-picker.time-input.tsx","../../src/components/date-range-picker/components/date-range-picker.custom-context.tsx","../../src/components/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import {\n  type HTMLChakraProps,\n  createSlotRecipeContext,\n} from \"@chakra-ui/react\";\nimport type { DateRangePickerRootSlotProps } from \"./date-range-picker.types\";\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n  key: \"dateRangePicker\",\n});\n\n/**\n * Root component that provides the styling context for the DateRangePicker component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const DateRangePickerRootSlot = withProvider<\n  HTMLDivElement,\n  DateRangePickerRootSlotProps\n>(\"div\", \"root\");\n\n/**\n * Slot component for the input group containing the DateInput and trigger button.\n */\nexport const DateRangePickerGroupSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"group\");\n\n/**\n * Slot component for the trigger button that opens the calendar popover.\n */\nexport const DateRangePickerTriggerSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"trigger\");\n\n/**\n * Slot component for the popover container.\n */\nexport const DateRangePickerPopoverSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"popover\");\n\n/**\n * Slot component for the calendar container within the popover.\n */\nexport const DateRangePickerCalendarSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"calendar\");\n\n/**\n * Slot component for the calendar header.\n */\nexport const DateRangePickerCalendarHeaderSlot = withContext<\n  HTMLElement,\n  HTMLChakraProps<\"header\">\n>(\"header\", \"calendarHeader\");\n\n/**\n * Slot component for the calendar grid.\n */\nexport const DateRangePickerCalendarGridSlot = withContext<\n  HTMLTableElement,\n  HTMLChakraProps<\"table\">\n>(\"table\", \"calendarGrid\");\n\n/**\n * Slot component for individual calendar cells.\n */\nexport const DateRangePickerCalendarCellSlot = withContext<\n  HTMLTableCellElement,\n  HTMLChakraProps<\"td\">\n>(\"td\", \"calendarCell\");\n","import { defineMessages } from \"react-intl\";\n\nexport const messages = defineMessages({\n  clearSelection: {\n    id: \"Nimbus.DateRangePicker.clearSelection\",\n    description: \"aria-label for clear button in date range picker\",\n    defaultMessage: \"Clear date range\",\n  },\n  openCalendar: {\n    id: \"Nimbus.DateRangePicker.openCalendar\",\n    description: \"aria-label for calendar toggle button in date range picker\",\n    defaultMessage: \"Open calendar\",\n  },\n  clearInput: {\n    id: \"Nimbus.DateRangePicker.clearInput\",\n    description: \"aria-label for clear input button in date range picker\",\n    defaultMessage: \"Clear input value\",\n  },\n  startTime: {\n    id: \"Nimbus.DateRangePicker.startTime\",\n    description: \"aria-label for start time input (default)\",\n    defaultMessage: \"Start time\",\n  },\n  startTimeHour: {\n    id: \"Nimbus.DateRangePicker.startTimeHour\",\n    description: \"aria-label for start time input (hour granularity)\",\n    defaultMessage: \"Start time (hour)\",\n  },\n  startTimeHourMinute: {\n    id: \"Nimbus.DateRangePicker.startTimeHourMinute\",\n    description: \"aria-label for start time input (minute granularity)\",\n    defaultMessage: \"Start time (hour and minute)\",\n  },\n  startTimeHourMinuteSecond: {\n    id: \"Nimbus.DateRangePicker.startTimeHourMinuteSecond\",\n    description: \"aria-label for start time input (second granularity)\",\n    defaultMessage: \"Start time (hour, minute, and second)\",\n  },\n  endTime: {\n    id: \"Nimbus.DateRangePicker.endTime\",\n    description: \"aria-label for end time input (default)\",\n    defaultMessage: \"End time\",\n  },\n  endTimeHour: {\n    id: \"Nimbus.DateRangePicker.endTimeHour\",\n    description: \"aria-label for end time input (hour granularity)\",\n    defaultMessage: \"End time (hour)\",\n  },\n  endTimeHourMinute: {\n    id: \"Nimbus.DateRangePicker.endTimeHourMinute\",\n    description: \"aria-label for end time input (minute granularity)\",\n    defaultMessage: \"End time (hour and minute)\",\n  },\n  endTimeHourMinuteSecond: {\n    id: \"Nimbus.DateRangePicker.endTimeHourMinuteSecond\",\n    description: \"aria-label for end time input (second granularity)\",\n    defaultMessage: \"End time (hour, minute, and second)\",\n  },\n  startTimeLabel: {\n    id: \"Nimbus.DateRangePicker.startTimeLabel\",\n    description: \"visible label for start time input field\",\n    defaultMessage: \"Start time\",\n  },\n  endTimeLabel: {\n    id: \"Nimbus.DateRangePicker.endTimeLabel\",\n    description: \"visible label for end time input field\",\n    defaultMessage: \"End time\",\n  },\n});\n","import { Flex, Text, TimeInput } from \"@/components\";\nimport { useContext, useRef, useEffect } from \"react\";\nimport { DateRangePickerStateContext } from \"react-aria-components\";\nimport { useIntl } from \"react-intl\";\nimport { messages } from \"../date-range-picker.i18n\";\nimport type { DateRangePickerTimeInputProps } from \"../date-range-picker.types\";\n\nexport const DateRangePickerTimeInput = ({\n  hideTimeZone,\n  hourCycle,\n}: DateRangePickerTimeInputProps) => {\n  const intl = useIntl();\n  const dateRangePickerState = useContext(DateRangePickerStateContext);\n  const { granularity, value } = dateRangePickerState!;\n  const timeInputRef = useRef<HTMLDivElement>(null);\n  const previousValueRef = useRef(value);\n\n  // do not show up to the party if you're not invited\n  if (granularity === \"day\") {\n    return null;\n  }\n\n  // Focus the time input when date range changes (user selects dates from calendar)\n  useEffect(() => {\n    let timeoutId: ReturnType<typeof setTimeout> | undefined;\n\n    // Check if date range changed by comparing start and end dates\n    const hasValueChanged =\n      (value?.start &&\n        previousValueRef.current?.start?.compare(value.start) !== 0) ||\n      (value?.end && previousValueRef.current?.end?.compare(value.end) !== 0);\n\n    if (hasValueChanged) {\n      // Only auto-focus if no time input segment currently has focus\n      // This prevents stealing focus during user interaction with time segments\n      const container = timeInputRef.current;\n      const activeElement = document.activeElement;\n      const hasTimeSegmentFocus =\n        container?.contains(activeElement) &&\n        activeElement?.getAttribute(\"role\") === \"spinbutton\";\n\n      if (!hasTimeSegmentFocus) {\n        // Small delay to ensure the DOM is ready\n        timeoutId = setTimeout(() => {\n          // Find the first focusable segment within the time input container\n          if (container) {\n            const firstSegment = container.querySelector(\n              '[role=\"spinbutton\"]'\n            ) as HTMLElement;\n\n            if (firstSegment) {\n              firstSegment.focus();\n            }\n          }\n        }, 50);\n      }\n    }\n\n    previousValueRef.current = value;\n\n    // Cleanup timeout on effect re-run or unmount to prevent memory leaks\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [value]);\n\n  return (\n    <Flex\n      ref={timeInputRef}\n      borderTop=\"solid-25\"\n      borderColor=\"neutral.3\"\n      py=\"300\"\n      px=\"400\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      gap=\"200\"\n    >\n      {/* Start DateInput with separate label */}\n      <Flex alignItems=\"center\" gap=\"200\">\n        <Text\n          textStyle=\"xs\"\n          fontWeight=\"500\"\n          color=\"neutral.12\"\n          minWidth=\"fit-content\"\n        >\n          {intl.formatMessage(messages.startTimeLabel)}\n        </Text>\n        <TimeInput\n          slot=\"startTimeInput\"\n          variant=\"ghost\"\n          size=\"sm\"\n          hideTimeZone={hideTimeZone}\n          hourCycle={hourCycle}\n        />\n      </Flex>\n\n      {/* End DateInput with separate label */}\n      <Flex alignItems=\"center\" gap=\"200\">\n        <Text\n          textStyle=\"xs\"\n          fontWeight=\"500\"\n          color=\"neutral.12\"\n          minWidth=\"fit-content\"\n        >\n          {intl.formatMessage(messages.endTimeLabel)}\n        </Text>\n        <TimeInput\n          slot=\"endTimeInput\"\n          variant=\"ghost\"\n          size=\"sm\"\n          hideTimeZone={hideTimeZone}\n          hourCycle={hourCycle}\n        />\n      </Flex>\n    </Flex>\n  );\n};\n","import { useContext, type ReactNode } from \"react\";\nimport {\n  Provider,\n  ButtonContext,\n  DateRangePickerStateContext,\n  TimeFieldContext,\n  useSlottedContext,\n} from \"react-aria-components\";\nimport type { PressEvent, TimeValue } from \"react-aria\";\nimport { useIntl } from \"react-intl\";\nimport { messages } from \"../date-range-picker.i18n\";\n\nexport const DateRangePickerCustomContext = ({\n  children,\n}: {\n  children: ReactNode;\n}) => {\n  const intl = useIntl();\n  const buttonContext = useSlottedContext(ButtonContext) || {};\n  const dateRangePickerState = useContext(DateRangePickerStateContext);\n\n  // Check if all 6 segments (start: day, month, year; end: day, month, year) have values\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const hasCompleteRangeDate = (date: any) =>\n    date?.day && date?.month && date?.year;\n\n  const incompleteValue =\n    !dateRangePickerState?.value ||\n    !hasCompleteRangeDate(dateRangePickerState.value.start) ||\n    !hasCompleteRangeDate(dateRangePickerState.value.end);\n\n  const { granularity } = dateRangePickerState!;\n\n  // Extract time values from start and end dates separately\n  const startTimeValue =\n    dateRangePickerState?.value?.start &&\n    \"hour\" in dateRangePickerState.value.start\n      ? dateRangePickerState.value.start\n      : null;\n  const endTimeValue =\n    dateRangePickerState?.value?.end && \"hour\" in dateRangePickerState.value.end\n      ? dateRangePickerState.value.end\n      : null;\n\n  // Try to get disabled state from the button context\n  const isDateRangePickerDisabled = buttonContext?.isDisabled;\n\n  // Generate default aria-label based on granularity if not provided\n  const getDefaultTimeInputAriaLabel = (type: \"start\" | \"end\") => {\n    const messageKey = type === \"start\" ? \"start\" : \"end\";\n    switch (granularity) {\n      case \"hour\":\n        return intl.formatMessage(\n          messages[`${messageKey}TimeHour` as keyof typeof messages]\n        );\n      case \"minute\":\n        return intl.formatMessage(\n          messages[`${messageKey}TimeHourMinute` as keyof typeof messages]\n        );\n      case \"second\":\n        return intl.formatMessage(\n          messages[`${messageKey}TimeHourMinuteSecond` as keyof typeof messages]\n        );\n      default:\n        return intl.formatMessage(\n          messages[`${messageKey}Time` as keyof typeof messages]\n        );\n    }\n  };\n\n  /**\n   * Button slots\n   * ================================\n   */\n  const buttonSlots = {\n    /** toggles the calendar popover */\n    calendarToggle: {\n      ...buttonContext,\n      onPress: (event: PressEvent) => {\n        // Ensure any active input (e.g., date picker segment) loses focus\n        // because blurring the input will close the popover if it's open (or was just opened)\n        const activeElement = document?.activeElement as HTMLElement | null;\n\n        if (activeElement) {\n          activeElement.blur();\n        }\n\n        buttonContext.onPress?.(event);\n      },\n    },\n    /** Clear button that displays when there's a value in each segment - hidden from both visual and screen readers when there's no value */\n    clear: {\n      // Clear both start and end values\n      onPress: () => dateRangePickerState?.setValue(null),\n      \"aria-label\": intl.formatMessage(messages.clearInput),\n      isDisabled: isDateRangePickerDisabled,\n      // Hide the button when there's no value\n      style: incompleteValue ? { display: \"none\" } : undefined,\n      \"aria-hidden\": incompleteValue ? true : undefined,\n    },\n  };\n\n  /**\n   * TimeInput slots\n   * ================================\n   */\n\n  // Separate time input slots for start and end times\n  const timeInputSlots = {\n    startTimeInput: {\n      value: startTimeValue,\n      onChange: (value: TimeValue | null) => {\n        if (value !== null && dateRangePickerState?.value?.start) {\n          // Update the start date with the new time\n          const currentValue = dateRangePickerState.value;\n          const startDate = currentValue.start;\n          const endDate = currentValue.end;\n          if (startDate && endDate) {\n            const newStartDate = startDate.set({\n              hour: value.hour,\n              minute: value.minute || 0,\n              second: value.second || 0,\n              millisecond: value.millisecond || 0,\n            });\n\n            dateRangePickerState.setValue({\n              start: newStartDate,\n              end: endDate,\n            });\n          }\n        }\n      },\n      granularity: granularity === \"day\" ? undefined : granularity,\n      \"aria-label\": getDefaultTimeInputAriaLabel(\"start\"),\n    },\n    endTimeInput: {\n      value: endTimeValue,\n      onChange: (value: TimeValue | null) => {\n        if (value !== null && dateRangePickerState?.value?.end) {\n          // Update the end date with the new time\n          const currentValue = dateRangePickerState.value;\n          const startDate = currentValue.start;\n          const endDate = currentValue.end;\n          if (startDate && endDate) {\n            const newEndDate = endDate.set({\n              hour: value.hour,\n              minute: value.minute || 0,\n              second: value.second || 0,\n              millisecond: value.millisecond || 0,\n            });\n\n            dateRangePickerState.setValue({\n              start: startDate,\n              end: newEndDate,\n            });\n          }\n        }\n      },\n      granularity: granularity === \"day\" ? undefined : granularity,\n      \"aria-label\": getDefaultTimeInputAriaLabel(\"end\"),\n    },\n  };\n\n  return (\n    <Provider\n      values={[\n        [\n          ButtonContext,\n          {\n            slots: buttonSlots,\n          },\n        ],\n        [TimeFieldContext, { slots: timeInputSlots }],\n      ]}\n    >\n      {children}\n    </Provider>\n  );\n};\n","import {\n  DateRangePickerRootSlot,\n  DateRangePickerGroupSlot,\n  DateRangePickerTriggerSlot,\n  DateRangePickerPopoverSlot,\n  DateRangePickerCalendarSlot,\n} from \"./date-range-picker.slots\";\n\nimport { CalendarMonth, Close } from \"@commercetools/nimbus-icons\";\n\nimport {\n  DateRangePicker as ReactAriaDateRangePicker,\n  Group,\n  Popover,\n  Dialog,\n} from \"react-aria-components\";\nimport { useSlotRecipe } from \"@chakra-ui/react/styled-system\";\nimport { dateRangePickerSlotRecipe } from \"./date-range-picker.recipe\";\nimport type { DateRangePickerProps } from \"./date-range-picker.types\";\nimport { extractStyleProps } from \"@/utils\";\nimport { DateInput, RangeCalendar, IconButton, Text } from \"@/components\";\nimport { DateRangePickerTimeInput } from \"./components/date-range-picker.time-input\";\nimport { DateRangePickerCustomContext } from \"./components/date-range-picker.custom-context\";\nimport { useIntl } from \"react-intl\";\nimport { messages } from \"./date-range-picker.i18n\";\n\n/**\n * DateRangePicker\n * ============================================================\n * Combines a DateInput with a RangeCalendar popover for date range selection.\n * Users can either type a date range directly or select from the calendar.\n *\n * @supportsStyleProps\n */\nexport const DateRangePicker = (props: DateRangePickerProps) => {\n  const intl = useIntl();\n\n  // Forward hideTimeZone and hourCycle to child components (footer time inputs)\n  const { granularity = \"day\", hideTimeZone, hourCycle } = props;\n  const recipe = useSlotRecipe({ recipe: dateRangePickerSlotRecipe });\n  const [recipeProps, remainingProps] = recipe.splitVariantProps(props);\n\n  const [styleProps, otherProps] = extractStyleProps(remainingProps);\n\n  // Extract size and variant from recipe props to pass to DateInputs\n  const { size = \"md\" } = recipeProps;\n\n  // the size of the buttons overlaying the input\n  const overlayButtonSize = size === \"md\" ? \"xs\" : \"2xs\";\n\n  // When granularity is \"day\", use the prop value (defaults to true if not provided)\n  // For other granularities (time-based), force to false so users can set both date and time\n  const shouldCloseOnSelect =\n    granularity === \"day\" ? props.shouldCloseOnSelect : false;\n\n  return (\n    <DateRangePickerRootSlot {...recipeProps} {...styleProps} asChild>\n      <ReactAriaDateRangePicker\n        {...otherProps}\n        shouldCloseOnSelect={shouldCloseOnSelect}\n      >\n        <DateRangePickerCustomContext>\n          <DateRangePickerGroupSlot asChild>\n            <Group>\n              <DateInput\n                slot=\"start\"\n                size={props.size}\n                variant=\"plain\"\n                width=\"auto\"\n                hideTimeZone={hideTimeZone}\n                hourCycle={hourCycle}\n              />\n              <Text\n                as=\"span\"\n                px=\"150\"\n                color=\"neutral.11\"\n                userSelect=\"none\"\n                aria-hidden=\"true\"\n                slot={null}\n              >\n                –\n              </Text>\n              <DateInput\n                slot=\"end\"\n                size={props.size}\n                variant=\"plain\"\n                width=\"auto\"\n                hideTimeZone={hideTimeZone}\n                hourCycle={hourCycle}\n              />\n              <DateRangePickerTriggerSlot>\n                <IconButton\n                  variant=\"ghost\"\n                  size={overlayButtonSize}\n                  slot=\"clear\"\n                  aria-label={intl.formatMessage(messages.clearSelection)}\n                >\n                  <Close />\n                </IconButton>\n                <IconButton\n                  variant=\"ghost\"\n                  size={overlayButtonSize}\n                  slot=\"calendarToggle\"\n                  aria-label={intl.formatMessage(messages.openCalendar)}\n                >\n                  <CalendarMonth />\n                </IconButton>\n              </DateRangePickerTriggerSlot>\n            </Group>\n          </DateRangePickerGroupSlot>\n          <DateRangePickerPopoverSlot asChild>\n            <Popover placement=\"bottom end\">\n              <Dialog>\n                <DateRangePickerCalendarSlot>\n                  <RangeCalendar />\n                </DateRangePickerCalendarSlot>\n                <DateRangePickerTimeInput\n                  hideTimeZone={hideTimeZone}\n                  hourCycle={hourCycle}\n                />\n              </Dialog>\n            </Popover>\n          </DateRangePickerPopoverSlot>\n        </DateRangePickerCustomContext>\n      </ReactAriaDateRangePicker>\n    </DateRangePickerRootSlot>\n  );\n};\n\nDateRangePicker.displayName = \"DateRangePicker\";\n"],"names":["withProvider","withContext","createSlotRecipeContext","DateRangePickerRootSlot","DateRangePickerGroupSlot","DateRangePickerTriggerSlot","DateRangePickerPopoverSlot","DateRangePickerCalendarSlot","messages","defineMessages","DateRangePickerTimeInput","hideTimeZone","hourCycle","intl","useIntl","dateRangePickerState","useContext","DateRangePickerStateContext","granularity","value","timeInputRef","useRef","previousValueRef","useEffect","timeoutId","container","activeElement","firstSegment","jsxs","Flex","jsx","Text","TimeInput","DateRangePickerCustomContext","children","buttonContext","useSlottedContext","ButtonContext","hasCompleteRangeDate","date","incompleteValue","startTimeValue","endTimeValue","isDateRangePickerDisabled","getDefaultTimeInputAriaLabel","type","messageKey","buttonSlots","event","timeInputSlots","currentValue","startDate","endDate","newStartDate","newEndDate","Provider","TimeFieldContext","DateRangePicker","props","recipe","useSlotRecipe","dateRangePickerSlotRecipe","recipeProps","remainingProps","styleProps","otherProps","extractStyleProps","size","overlayButtonSize","shouldCloseOnSelect","ReactAriaDateRangePicker","Group","DateInput","IconButton","Close","CalendarMonth","Popover","Dialog","RangeCalendar"],"mappings":"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"}