npm - @commercetools/nimbus - Versions diffs - 2.0.1-rc3 → 2.0.1 - Mend

@commercetools/nimbus 2.0.1-rc3 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (325) hide show

package/dist/chunks/date-input-B84sXbjL.cjs.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";const e=require("react/jsx-runtime"),m=require("@chakra-ui/react"),n=require("./DateField-CDTSjqvQ.cjs.js"),h=require("@chakra-ui/react/styled-system"),S=require("./index-CRFg4Mhx.cjs.js"),g=require("./extract-style-props-Dk3fpLyQ.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;
2	+ //# sourceMappingURL=date-input-B84sXbjL.cjs.js.map

package/dist/chunks/date-input-B84sXbjL.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"date-input-B84sXbjL.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-input-Cap8-3zj.es.js → date-input-BiOdvpWz.es.js} RENAMED Viewed

@@ -3,7 +3,7 @@ import { createSlotRecipeContext as f } from "@chakra-ui/react";
 import { c as h, a as g, b as S } from "./DateField-DZwn3cIj.es.js";
 import { useRecipe as x } from "@chakra-ui/react/styled-system";
 import { d as I } from "./index-CtB71yr7.es.js";
-import { e as $ } from "./extractStyleProps-DYXEhLtq.es.js";
+import { e as $ } from "./extract-style-props-DYXEhLtq.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) => {
@@ -18,4 +18,4 @@ y.displayName = "DateInput";
 export {
   y as D
 };
-//# sourceMappingURL=date-input-Cap8-3zj.es.js.map
+//# sourceMappingURL=date-input-BiOdvpWz.es.js.map

package/dist/chunks/date-input-BiOdvpWz.es.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"date-input-BiOdvpWz.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-picker-2SDD5gY9.cjs.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";const e=require("react/jsx-runtime"),j=require("@chakra-ui/react"),P=require("@commercetools/nimbus-icons"),x=require("./DatePicker-DCjrqg4Q.cjs.js"),T=require("./Dialog-XGXh4NXU.cjs.js"),q=require("./Group-BX1EpD9E.cjs.js"),v=require("@chakra-ui/react/styled-system"),C=require("./index-CRFg4Mhx.cjs.js"),I=require("./extract-style-props-Dk3fpLyQ.cjs.js"),f=require("react"),h=require("react-intl"),M=require("./time-input-CweVZv1Q.cjs.js"),E=require("@chakra-ui/react/flex"),H=require("./text-CCW9kDT_.cjs.js"),k=require("./Button-CFZnLKVR.cjs.js"),S=require("./utils-BHdR5Nww.cjs.js"),R=require("./DateField-CDTSjqvQ.cjs.js"),N=require("./date-input-B84sXbjL.cjs.js"),V=require("./calendar-0Tr21POc.cjs.js"),B=require("./box-CWni3A32.cjs.js"),y=require("./icon-button-vWPrT-bR.cjs.js"),{withProvider:w,withContext:g}=j.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=({hideTimeZone:n,hourCycle:r})=>{const s=f.useContext(x.$06d5b8ec9ee5d538$export$50a10c048fdcdee9),{granularity:o,dateValue:t}=s,a=f.useRef(null),u=f.useRef(t);return o==="day"?null:(f.useEffect(()=>{let i;if(t&&u.current?.compare(t)!==0){const c=a.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(E.Flex,{ref:a,borderTop:"solid-25",borderColor:"neutral.3",py:"300",px:"400",alignItems:"center",justifyContent:"center",gap:"200",children:[e.jsx(H.Text,{textStyle:"xs",fontWeight:"500",color:"neutral.12",children:e.jsx(h.FormattedMessage,{...m.startTime})}),e.jsx(M.TimeInput,{slot:"timeInput",variant:"ghost",size:"sm",hideTimeZone:n,hourCycle:r})]}))},O=({children:n})=>{const r=h.useIntl(),s=S.$64fa3d84918910a7$export$fabf2dc03a41866e(k.$d2b4bc8c273e7be6$export$24d547caef80ccd1)\|\|{},o=f.useContext(x.$06d5b8ec9ee5d538$export$50a10c048fdcdee9),t=o?.dateValue===null,{timeValue:a,setTimeValue:u,granularity:i}=o,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:()=>o?.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:a,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}],[R.$40825cdb76e74f70$export$8e17ddc448e87c1e,{slots:p}]],children:n})},D=n=>{const{size:r="md",variant:s,granularity:o="day",hideTimeZone:t,hourCycle:a}=n,u=v.useSlotRecipe({recipe:C.datePickerSlotRecipe}),[i,c]=u.splitVariantProps(n),[l,b]=I.extractStyleProps(c),p=r==="md"?"xs":"2xs",d=o==="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(O,{children:[e.jsx(F,{asChild:!0,children:e.jsx(q.$a049562f99e7db0e$export$eb2fcfdbd7ba97d4,{children:e.jsx(N.DateInput,{size:r,variant:s,width:"full",hideTimeZone:t,hourCycle:a,trailingElement:e.jsxs(B.Box,{children:[e.jsx(y.IconButton,{tone:"primary",variant:"ghost",size:p,slot:"clear",children:e.jsx(P.Close,{})}),e.jsx(y.IconButton,{tone:"primary",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(V.Calendar,{})}),e.jsx(L,{hideTimeZone:t,hourCycle:a})]})})})]})})})};D.displayName="DatePicker";exports.DatePicker=D;
2	+ //# sourceMappingURL=date-picker-2SDD5gY9.cjs.js.map

package/dist/chunks/{date-picker-CZAoPNsT.cjs.js.map → date-picker-2SDD5gY9.cjs.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-picker-CZAoPNsT.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.time-input.tsx","../../src/components/date-picker/components/date-picker.custom-context.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 default 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 { 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\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 { 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\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 {\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/extractStyleProps\";\nimport { DateInput, Calendar, IconButton, Box } from \"@/components\";\nimport { DatePickerTimeInput } from \"./components/date-picker.time-input\";\nimport { DatePickerCustomContext } from \"./components/date-picker.custom-context\";\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 tone=\"primary\"\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 tone=\"primary\"\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","DatePickerTimeInput","hideTimeZone","hourCycle","datePickerState","useContext","DatePickerStateContext","granularity","dateValue","timeInputRef","useRef","previousDateRef","useEffect","timeoutId","container","activeElement","jsxs","Flex","jsx","Text","FormattedMessage","TimeInput","DatePickerCustomContext","children","intl","useIntl","buttonContext","useSlottedContext","ButtonContext","noInputValue","timeValue","setTimeValue","isDatePickerDisabled","getDefaultTimeInputAriaLabel","buttonSlots","event","timeInputSlots","value","Provider","TimeFieldContext","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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"}
1	+ {"version":3,"file":"date-picker-2SDD5gY9.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.time-input.tsx","../../src/components/date-picker/components/date-picker.custom-context.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 default 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 { 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\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 { 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\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 {\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 } from \"./components/date-picker.time-input\";\nimport { DatePickerCustomContext } from \"./components/date-picker.custom-context\";\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 tone=\"primary\"\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 tone=\"primary\"\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","DatePickerTimeInput","hideTimeZone","hourCycle","datePickerState","useContext","DatePickerStateContext","granularity","dateValue","timeInputRef","useRef","previousDateRef","useEffect","timeoutId","container","activeElement","jsxs","Flex","jsx","Text","FormattedMessage","TimeInput","DatePickerCustomContext","children","intl","useIntl","buttonContext","useSlottedContext","ButtonContext","noInputValue","timeValue","setTimeValue","isDatePickerDisabled","getDefaultTimeInputAriaLabel","buttonSlots","event","timeInputSlots","value","Provider","TimeFieldContext","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-ChZ8H-MT.es.js → date-picker-EuMU6RtR.es.js} RENAMED Viewed

@@ -6,17 +6,17 @@ import { $ as C, h as M } from "./Dialog-Qpq4hk89.es.js";
 import { $ as I } from "./Group-BBaUrRF9.es.js";
 import { useSlotRecipe as E } from "@chakra-ui/react/styled-system";
 import { h as H } from "./index-CtB71yr7.es.js";
-import { e as N } from "./extractStyleProps-DYXEhLtq.es.js";
+import { e as N } from "./extract-style-props-DYXEhLtq.es.js";
 import { useContext as x, useRef as T, useEffect as R } from "react";
 import { defineMessages as V, FormattedMessage as w, useIntl as z } from "react-intl";
-import { T as B } from "./time-input--a_qv-Jk.es.js";
+import { T as B } from "./time-input-B6we5H7C.es.js";
 import { Flex as F } from "@chakra-ui/react/flex";
 import { T as j } from "./text-BgiP8ZB6.es.js";
 import { $ as P } from "./Button-Dx3xzN8n.es.js";
 import { e as A, d as G } from "./utils-Cyja2WdR.es.js";
 import { d as L } from "./DateField-DZwn3cIj.es.js";
-import { D as O } from "./date-input-Cap8-3zj.es.js";
-import { C as q } from "./calendar-lD6G93R9.es.js";
+import { D as O } from "./date-input-BiOdvpWz.es.js";
+import { C as q } from "./calendar-okvAi9qK.es.js";
 import { B as W } from "./box-DuBoAZvq.es.js";
 import { I as $ } from "./icon-button-DQS2apw-.es.js";
 const { withProvider: Z, withContext: h } = /* @__PURE__ */ S({
@@ -217,4 +217,4 @@ _.displayName = "DatePicker";
 export {
   _ as D
 };
-//# sourceMappingURL=date-picker-ChZ8H-MT.es.js.map
+//# sourceMappingURL=date-picker-EuMU6RtR.es.js.map

package/dist/chunks/{date-picker-ChZ8H-MT.es.js.map → date-picker-EuMU6RtR.es.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-picker-ChZ8H-MT.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.time-input.tsx","../../src/components/date-picker/components/date-picker.custom-context.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 default 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 { 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\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 { 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\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 {\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/extractStyleProps\";\nimport { DateInput, Calendar, IconButton, Box } from \"@/components\";\nimport { DatePickerTimeInput } from \"./components/date-picker.time-input\";\nimport { DatePickerCustomContext } from \"./components/date-picker.custom-context\";\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 tone=\"primary\"\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 tone=\"primary\"\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","DatePickerTimeInput","hideTimeZone","hourCycle","datePickerState","useContext","DatePickerStateContext","granularity","dateValue","timeInputRef","useRef","previousDateRef","useEffect","timeoutId","container","activeElement","jsxs","Flex","jsx","Text","FormattedMessage","TimeInput","DatePickerCustomContext","children","intl","useIntl","buttonContext","useSlottedContext","ButtonContext","noInputValue","timeValue","setTimeValue","isDatePickerDisabled","getDefaultTimeInputAriaLabel","buttonSlots","event","timeInputSlots","value","Provider","TimeFieldContext","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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"}
1	+ {"version":3,"file":"date-picker-EuMU6RtR.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.time-input.tsx","../../src/components/date-picker/components/date-picker.custom-context.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 default 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 { 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\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 { 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\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 {\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 } from \"./components/date-picker.time-input\";\nimport { DatePickerCustomContext } from \"./components/date-picker.custom-context\";\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 tone=\"primary\"\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 tone=\"primary\"\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","DatePickerTimeInput","hideTimeZone","hourCycle","datePickerState","useContext","DatePickerStateContext","granularity","dateValue","timeInputRef","useRef","previousDateRef","useEffect","timeoutId","container","activeElement","jsxs","Flex","jsx","Text","FormattedMessage","TimeInput","DatePickerCustomContext","children","intl","useIntl","buttonContext","useSlottedContext","ButtonContext","noInputValue","timeValue","setTimeValue","isDatePickerDisabled","getDefaultTimeInputAriaLabel","buttonSlots","event","timeInputSlots","value","Provider","TimeFieldContext","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-DGWMdcAN.es.js → date-range-picker-CL-QH8BW.es.js} RENAMED Viewed

@@ -6,16 +6,16 @@ import { $ as w, h as W } from "./Dialog-Qpq4hk89.es.js";
 import { $ as j } from "./Group-BBaUrRF9.es.js";
 import { useSlotRecipe as F } from "@chakra-ui/react/styled-system";
 import { g as A } from "./index-CtB71yr7.es.js";
-import { e as B } from "./extractStyleProps-DYXEhLtq.es.js";
+import { e as B } from "./extract-style-props-DYXEhLtq.es.js";
 import { useContext as I, useRef as S, useEffect as G } from "react";
 import { Flex as x } from "@chakra-ui/react/flex";
 import { T as y } from "./text-BgiP8ZB6.es.js";
-import { T as P } from "./time-input--a_qv-Jk.es.js";
+import { T as P } from "./time-input-B6we5H7C.es.js";
 import { $ as C } from "./Button-Dx3xzN8n.es.js";
 import { e as O, d as q } from "./utils-Cyja2WdR.es.js";
 import { d as H } from "./DateField-DZwn3cIj.es.js";
-import { R as L } from "./range-calendar-DBpl6y5i.es.js";
-import { D } from "./date-input-Cap8-3zj.es.js";
+import { R as L } from "./range-calendar-PUt59Hda.es.js";
+import { D } from "./date-input-BiOdvpWz.es.js";
 import { I as R } from "./icon-button-DQS2apw-.es.js";
 const { withProvider: M, withContext: $ } = /* @__PURE__ */ k({
   key: "dateRangePicker"
@@ -278,4 +278,4 @@ Z.displayName = "DateRangePicker";
 export {
   Z as D
 };
-//# sourceMappingURL=date-range-picker-DGWMdcAN.es.js.map
+//# sourceMappingURL=date-range-picker-CL-QH8BW.es.js.map

package/dist/chunks/{date-range-picker-DGWMdcAN.es.js.map → date-range-picker-CL-QH8BW.es.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-range-picker-DGWMdcAN.es.js","sources":["../../src/components/date-range-picker/date-range-picker.slots.tsx","../../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 { Flex, Text, TimeInput } from \"@/components\";\nimport { useContext, useRef, useEffect } from \"react\";\nimport { DateRangePickerStateContext } from \"react-aria-components\";\nimport type { DateRangePickerTimeInputProps } from \"../date-range-picker.types\";\n\nexport const DateRangePickerTimeInput = ({\n hideTimeZone,\n hourCycle,\n}: DateRangePickerTimeInputProps) => {\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 {/ TODO: translate hardcoded string /}\n <Text\n textStyle=\"xs\"\n fontWeight=\"500\"\n color=\"neutral.12\"\n minWidth=\"fit-content\"\n >\n Start time\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 {/ TODO: translate hardcoded string /}\n <Text\n textStyle=\"xs\"\n fontWeight=\"500\"\n color=\"neutral.12\"\n minWidth=\"fit-content\"\n >\n End time\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\";\n\nexport const DateRangePickerCustomContext = ({\n children,\n}: {\n children: ReactNode;\n}) => {\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 prefix = type === \"start\" ? \"Start\" : \"End\";\n switch (granularity) {\n case \"hour\":\n return `${prefix} time (hour)`;\n case \"minute\":\n return `${prefix} time (hour and minute)`;\n case \"second\":\n return `${prefix} time (hour, minute, and second)`;\n default:\n return `${prefix} time`;\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\": \"Clear input value\",\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/extractStyleProps\";\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\";\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 /\nexport const DateRangePicker = (props: DateRangePickerProps) => {\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 {/ @ts-expect-error react aria is adding the aria-label prop /}\n <IconButton\n tone=\"primary\"\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 tone=\"primary\"\n variant=\"ghost\"\n size={overlayButtonSize}\n slot=\"calendarToggle\"\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","DateRangePickerTimeInput","hideTimeZone","hourCycle","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","prefix","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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"}
1	+ {"version":3,"file":"date-range-picker-CL-QH8BW.es.js","sources":["../../src/components/date-range-picker/date-range-picker.slots.tsx","../../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 { Flex, Text, TimeInput } from \"@/components\";\nimport { useContext, useRef, useEffect } from \"react\";\nimport { DateRangePickerStateContext } from \"react-aria-components\";\nimport type { DateRangePickerTimeInputProps } from \"../date-range-picker.types\";\n\nexport const DateRangePickerTimeInput = ({\n hideTimeZone,\n hourCycle,\n}: DateRangePickerTimeInputProps) => {\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 {/ TODO: translate hardcoded string /}\n <Text\n textStyle=\"xs\"\n fontWeight=\"500\"\n color=\"neutral.12\"\n minWidth=\"fit-content\"\n >\n Start time\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 {/ TODO: translate hardcoded string /}\n <Text\n textStyle=\"xs\"\n fontWeight=\"500\"\n color=\"neutral.12\"\n minWidth=\"fit-content\"\n >\n End time\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\";\n\nexport const DateRangePickerCustomContext = ({\n children,\n}: {\n children: ReactNode;\n}) => {\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 prefix = type === \"start\" ? \"Start\" : \"End\";\n switch (granularity) {\n case \"hour\":\n return `${prefix} time (hour)`;\n case \"minute\":\n return `${prefix} time (hour and minute)`;\n case \"second\":\n return `${prefix} time (hour, minute, and second)`;\n default:\n return `${prefix} time`;\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\": \"Clear input value\",\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\";\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 /\nexport const DateRangePicker = (props: DateRangePickerProps) => {\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 {/ @ts-expect-error react aria is adding the aria-label prop /}\n <IconButton\n tone=\"primary\"\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 tone=\"primary\"\n variant=\"ghost\"\n size={overlayButtonSize}\n slot=\"calendarToggle\"\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","DateRangePickerTimeInput","hideTimeZone","hourCycle","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","prefix","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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"}

package/dist/chunks/date-range-picker-DmHmhMvU.cjs.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";const e=require("react/jsx-runtime"),k=require("@chakra-ui/react"),P=require("@commercetools/nimbus-icons"),y=require("./DatePicker-DCjrqg4Q.cjs.js"),S=require("./Dialog-XGXh4NXU.cjs.js"),V=require("./Group-BX1EpD9E.cjs.js"),z=require("@chakra-ui/react/styled-system"),E=require("./index-CRFg4Mhx.cjs.js"),w=require("./extract-style-props-Dk3fpLyQ.cjs.js"),p=require("react"),v=require("@chakra-ui/react/flex"),j=require("./text-CCW9kDT_.cjs.js"),D=require("./time-input-CweVZv1Q.cjs.js"),R=require("./Button-CFZnLKVR.cjs.js"),C=require("./utils-BHdR5Nww.cjs.js"),F=require("./DateField-CDTSjqvQ.cjs.js"),B=require("./range-calendar-lhmomEF_.cjs.js"),I=require("./date-input-B84sXbjL.cjs.js"),T=require("./icon-button-vWPrT-bR.cjs.js"),{withProvider:W,withContext:b}=k.createSlotRecipeContext({key:"dateRangePicker"}),G=W("div","root"),A=b("div","group"),O=b("div","trigger"),H=b("div","popover"),L=b("div","calendar"),M=({hideTimeZone:o,hourCycle:i})=>{const t=p.useContext(y.$06d5b8ec9ee5d538$export$80d7ae1f804790be),{granularity:c,value:a}=t,s=p.useRef(null),u=p.useRef(a);return c==="day"?null:(p.useEffect(()=>{let d;if(a?.start&&u.current?.start?.compare(a.start)!==0\|\|a?.end&&u.current?.end?.compare(a.end)!==0){const l=s.current,m=document.activeElement;l?.contains(m)&&m?.getAttribute("role")==="spinbutton"\|\|(d=setTimeout(()=>{if(l){const n=l.querySelector('[role="spinbutton"]');n&&n.focus()}},50))}return u.current=a,()=>{d&&clearTimeout(d)}},[a]),e.jsxs(v.Flex,{ref:s,borderTop:"solid-25",borderColor:"neutral.3",py:"300",px:"400",alignItems:"center",justifyContent:"center",gap:"200",children:[e.jsxs(v.Flex,{alignItems:"center",gap:"200",children:[e.jsx(j.Text,{textStyle:"xs",fontWeight:"500",color:"neutral.12",minWidth:"fit-content",children:"Start time"}),e.jsx(D.TimeInput,{slot:"startTimeInput",variant:"ghost",size:"sm",hideTimeZone:o,hourCycle:i})]}),e.jsxs(v.Flex,{alignItems:"center",gap:"200",children:[e.jsx(j.Text,{textStyle:"xs",fontWeight:"500",color:"neutral.12",minWidth:"fit-content",children:"End time"}),e.jsx(D.TimeInput,{slot:"endTimeInput",variant:"ghost",size:"sm",hideTimeZone:o,hourCycle:i})]})]}))},N=({children:o})=>{const i=C.$64fa3d84918910a7$export$fabf2dc03a41866e(R.$d2b4bc8c273e7be6$export$24d547caef80ccd1)\|\|{},t=p.useContext(y.$06d5b8ec9ee5d538$export$80d7ae1f804790be),c=n=>n?.day&&n?.month&&n?.year,a=!t?.value\|\|!c(t.value.start)\|\|!c(t.value.end),{granularity:s}=t,u=t?.value?.start&&"hour"in t.value.start?t.value.start:null,d=t?.value?.end&&"hour"in t.value.end?t.value.end:null,g=i?.isDisabled,l=n=>{const r=n==="start"?"Start":"End";switch(s){case"hour":return`${r} time (hour)`;case"minute":return`${r} time (hour and minute)`;case"second":return`${r} time (hour, minute, and second)`;default:return`${r} time`}},m={calendarToggle:{...i,onPress:n=>{const r=document?.activeElement;r&&r.blur(),i.onPress?.(n)}},clear:{onPress:()=>t?.setValue(null),"aria-label":"Clear input value",isDisabled:g,style:a?{display:"none"}:void 0,"aria-hidden":a?!0:void 0}},f={startTimeInput:{value:u,onChange:n=>{if(n!==null&&t?.value?.start){const r=t.value,x=r.start,h=r.end;if(x&&h){const $=x.set({hour:n.hour,minute:n.minute\|\|0,second:n.second\|\|0,millisecond:n.millisecond\|\|0});t.setValue({start:$,end:h})}}},granularity:s==="day"?void 0:s,"aria-label":l("start")},endTimeInput:{value:d,onChange:n=>{if(n!==null&&t?.value?.end){const r=t.value,x=r.start,h=r.end;if(x&&h){const $=h.set({hour:n.hour,minute:n.minute\|\|0,second:n.second\|\|0,millisecond:n.millisecond\|\|0});t.setValue({start:x,end:$})}}},granularity:s==="day"?void 0:s,"aria-label":l("end")}};return e.jsx(C.$64fa3d84918910a7$export$2881499e37b75b9a,{values:[[R.$d2b4bc8c273e7be6$export$24d547caef80ccd1,{slots:m}],[F.$40825cdb76e74f70$export$8e17ddc448e87c1e,{slots:f}]],children:o})},q=o=>{const{granularity:i="day",hideTimeZone:t,hourCycle:c}=o,a=z.useSlotRecipe({recipe:E.dateRangePickerSlotRecipe}),[s,u]=a.splitVariantProps(o),[d,g]=w.extractStyleProps(u),{size:l="md"}=s,m=l==="md"?"xs":"2xs",f=i==="day"?o.shouldCloseOnSelect:!1;return e.jsx(G,{...s,...d,asChild:!0,children:e.jsx(y.$06d5b8ec9ee5d538$export$17334619f3ac2224,{...g,shouldCloseOnSelect:f,children:e.jsxs(N,{children:[e.jsx(A,{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:c}),e.jsx(j.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:c}),e.jsxs(O,{children:[e.jsx(T.IconButton,{tone:"primary",variant:"ghost",size:m,slot:"clear",children:e.jsx(P.Close,{})}),e.jsx(T.IconButton,{tone:"primary",variant:"ghost",size:m,slot:"calendarToggle",children:e.jsx(P.CalendarMonth,{})})]})]})}),e.jsx(H,{asChild:!0,children:e.jsx(S.$07b14b47974efb58$export$5b6b19405a83ff9d,{placement:"bottom end",children:e.jsxs(S.$de32f1b87079253c$export$3ddf2d174ce01153,{children:[e.jsx(L,{children:e.jsx(B.RangeCalendar,{})}),e.jsx(M,{hideTimeZone:t,hourCycle:c})]})})})]})})})};q.displayName="DateRangePicker";exports.DateRangePicker=q;
2	+ //# sourceMappingURL=date-range-picker-DmHmhMvU.cjs.js.map