npm - @commercetools/nimbus - Versions diffs - 0.0.0-canary-20250807210749 → 0.0.0-canary-20250808141145 - Mend

@commercetools/nimbus 0.0.0-canary-20250807210749 → 0.0.0-canary-20250808141145

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 (107) hide show

package/dist/chunks/date-input-4hsVHJJo.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-input-4hsVHJJo.es.js","sources":["../../src/components/date-input/date-input.slots.tsx","../../src/components/date-input/date-input.tsx"],"sourcesContent":["import {\n type HTMLChakraProps,\n type RecipeProps,\n type UnstyledProp,\n createSlotRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { dateInputSlotRecipe } from \"./date-input.recipe\";\n\n/*\n Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the div element.\n /\ninterface DateInputRecipeProps extends RecipeProps<\"div\">, UnstyledProp {}\n\n/\n Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n /\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface DateInputRootProps\n extends HTMLChakraProps<\"div\", DateInputRecipeProps> {}\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n recipe: dateInputSlotRecipe,\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 DateInputRootProps\n>(\"div\", \"root\");\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 DateInputRootSlot,\n DateInputSegmentGroupSlot,\n DateInputSegmentSlot,\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\";\nimport { dateInputSlotRecipe } from \"./date-input.recipe\";\nimport type { DateInputProps } from \"./date-input.types\";\nimport { extractStyleProps } from \"@/utils/extractStyleProps\";\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 [recipeProps, recipeFreeProps] = recipe.splitVariantProps(props);\n const [styleProps, functionalProps] = extractStyleProps(recipeFreeProps);\n\n return (\n <DateInputRootSlot {...recipeProps} {...styleProps} asChild>\n <DateField {...functionalProps}>\n <DateInputSegmentGroupSlot asChild>\n <DateInputField>\n {(segment) => (\n <DateInputSegmentSlot asChild>\n <DateSegment segment={segment} />\n </DateInputSegmentSlot>\n )}\n </DateInputField>\n </DateInputSegmentGroupSlot>\n </DateField>\n </DateInputRootSlot>\n );\n};\n\nDateInput.displayName = \"DateInput\";\n"],"names":["withProvider","withContext","createSlotRecipeContext","dateInputSlotRecipe","DateInputRootSlot","DateInputSegmentGroupSlot","DateInputSegmentSlot","DateInput","props","recipe","useRecipe","recipeProps","recipeFreeProps","styleProps","functionalProps","extractStyleProps","jsx","DateField","DateInputField","segment","DateSegment"],"mappings":";;;;;AAyBA,MAAM,EAAE,cAAAA,GAAc,aAAAC,EAAA,IAAgB,gBAAAC,EAAwB;AAAA,EAC5D,QAAQC;AACV,CAAC,GAMYC,IAAoB,gBAAAJ,EAG/B,OAAO,MAAM,GAKFK,IAA4B,gBAAAJ,EAGvC,OAAO,cAAc,GAKVK,IAAuB,gBAAAL,EAGlC,OAAO,SAAS,GC7BLM,IAAY,CAACC,MAA0B;AAClD,QAAMC,IAASC,EAAU,EAAE,QAAQP,GAAqB,GAClD,CAACQ,GAAaC,CAAe,IAAIH,EAAO,kBAAkBD,CAAK,GAC/D,CAACK,GAAYC,CAAe,IAAIC,EAAkBH,CAAe;AAEvE,SACE,gBAAAI,EAACZ,GAAA,EAAmB,GAAGO,GAAc,GAAGE,GAAY,SAAO,IACzD,UAAA,gBAAAG,EAACC,GAAA,EAAW,GAAGH,GACb,4BAACT,GAAA,EAA0B,SAAO,IAChC,UAAA,gBAAAW,EAACE,GAAA,EACE,UAAA,CAACC,MACA,gBAAAH,EAACV,KAAqB,SAAO,IAC3B,UAAA,gBAAAU,EAACI,GAAA,EAAY,SAAAD,EAAA,CAAkB,EAAA,CACjC,GAEJ,EAAA,CACF,GACF,GACF;AAEJ;AAEAZ,EAAU,cAAc;"}
1	+ {"version":3,"file":"date-input-4hsVHJJo.es.js","sources":["../../src/components/date-input/date-input.slots.tsx","../../src/components/date-input/date-input.tsx"],"sourcesContent":["import {\n type HTMLChakraProps,\n type RecipeProps,\n type UnstyledProp,\n createSlotRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { dateInputSlotRecipe } from \"./date-input.recipe\";\n\n/*\n Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the div element.\n /\ninterface DateInputRecipeProps extends RecipeProps<\"div\">, UnstyledProp {}\n\n/\n Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n /\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface DateInputRootProps\n extends HTMLChakraProps<\"div\", DateInputRecipeProps> {}\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n recipe: dateInputSlotRecipe,\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 DateInputRootProps\n>(\"div\", \"root\");\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 DateInputRootSlot,\n DateInputSegmentGroupSlot,\n DateInputSegmentSlot,\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\";\nimport { dateInputSlotRecipe } from \"./date-input.recipe\";\nimport type { DateInputProps } from \"./date-input.types\";\nimport { extractStyleProps } from \"@/utils/extractStyleProps\";\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 [recipeProps, recipeFreeProps] = recipe.splitVariantProps(props);\n const [styleProps, functionalProps] = extractStyleProps(recipeFreeProps);\n\n return (\n <DateInputRootSlot {...recipeProps} {...styleProps} asChild>\n <DateField {...functionalProps}>\n <DateInputSegmentGroupSlot asChild>\n <DateInputField>\n {(segment) => (\n <DateInputSegmentSlot asChild>\n <DateSegment segment={segment} />\n </DateInputSegmentSlot>\n )}\n </DateInputField>\n </DateInputSegmentGroupSlot>\n </DateField>\n </DateInputRootSlot>\n );\n};\n\nDateInput.displayName = \"DateInput\";\n"],"names":["withProvider","withContext","createSlotRecipeContext","dateInputSlotRecipe","DateInputRootSlot","DateInputSegmentGroupSlot","DateInputSegmentSlot","DateInput","props","recipe","useRecipe","recipeProps","recipeFreeProps","styleProps","functionalProps","extractStyleProps","jsx","DateField","DateInputField","segment","DateSegment"],"mappings":";;;;;AAyBA,MAAM,EAAE,cAAAA,GAAc,aAAAC,EAAA,IAAgB,gBAAAC,EAAwB;AAAA,EAC5D,QAAQC;AACV,CAAC,GAMYC,IAAoB,gBAAAJ,EAG/B,OAAO,MAAM,GAKFK,IAA4B,gBAAAJ,EAGvC,OAAO,cAAc,GAKVK,IAAuB,gBAAAL,EAGlC,OAAO,SAAS,GC7BLM,IAAY,CAACC,MAA0B;AAClD,QAAMC,IAASC,EAAU,EAAE,QAAQP,GAAqB,GAClD,CAACQ,GAAaC,CAAe,IAAIH,EAAO,kBAAkBD,CAAK,GAC/D,CAACK,GAAYC,CAAe,IAAIC,EAAkBH,CAAe;AAEvE,SACE,gBAAAI,EAACZ,GAAA,EAAmB,GAAGO,GAAc,GAAGE,GAAY,SAAO,IACzD,UAAA,gBAAAG,EAACC,GAAA,EAAW,GAAGH,GACb,4BAACT,GAAA,EAA0B,SAAO,IAChC,UAAA,gBAAAW,EAACE,GAAA,EACE,UAAA,CAACC,MACA,gBAAAH,EAACV,KAAqB,SAAO,IAC3B,UAAA,gBAAAU,EAACI,GAAA,EAAY,SAAAD,EAAA,CAAkB,EAAA,CACjC,GAEJ,EAAA,CACF,GACF,GACF;AAEJ;AAEAZ,EAAU,cAAc;"}

package/dist/chunks/date-input-CGy4NHpW.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-input-CGy4NHpW.cjs.js","sources":["../../src/components/date-input/date-input.slots.tsx","../../src/components/date-input/date-input.tsx"],"sourcesContent":["import {\n type HTMLChakraProps,\n type RecipeProps,\n type UnstyledProp,\n createSlotRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { dateInputSlotRecipe } from \"./date-input.recipe\";\n\n/*\n Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the div element.\n /\ninterface DateInputRecipeProps extends RecipeProps<\"div\">, UnstyledProp {}\n\n/\n Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n /\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface DateInputRootProps\n extends HTMLChakraProps<\"div\", DateInputRecipeProps> {}\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n recipe: dateInputSlotRecipe,\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 DateInputRootProps\n>(\"div\", \"root\");\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 DateInputRootSlot,\n DateInputSegmentGroupSlot,\n DateInputSegmentSlot,\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\";\nimport { dateInputSlotRecipe } from \"./date-input.recipe\";\nimport type { DateInputProps } from \"./date-input.types\";\nimport { extractStyleProps } from \"@/utils/extractStyleProps\";\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 [recipeProps, recipeFreeProps] = recipe.splitVariantProps(props);\n const [styleProps, functionalProps] = extractStyleProps(recipeFreeProps);\n\n return (\n <DateInputRootSlot {...recipeProps} {...styleProps} asChild>\n <DateField {...functionalProps}>\n <DateInputSegmentGroupSlot asChild>\n <DateInputField>\n {(segment) => (\n <DateInputSegmentSlot asChild>\n <DateSegment segment={segment} />\n </DateInputSegmentSlot>\n )}\n </DateInputField>\n </DateInputSegmentGroupSlot>\n </DateField>\n </DateInputRootSlot>\n );\n};\n\nDateInput.displayName = \"DateInput\";\n"],"names":["withProvider","withContext","createSlotRecipeContext","dateInputSlotRecipe","DateInputRootSlot","DateInputSegmentGroupSlot","DateInputSegmentSlot","DateInput","props","recipe","useRecipe","recipeProps","recipeFreeProps","styleProps","functionalProps","extractStyleProps","jsx","DateField","DateInputField","segment","DateSegment"],"mappings":"2NAyBM,CAAE,aAAAA,EAAc,YAAAC,CAAA,EAAgBC,0BAAwB,CAC5D,OAAQC,EAAAA,mBACV,CAAC,EAMYC,EAAoBJ,EAG/B,MAAO,MAAM,EAKFK,EAA4BJ,EAGvC,MAAO,cAAc,EAKVK,EAAuBL,EAGlC,MAAO,SAAS,EC7BLM,EAAaC,GAA0B,CAClD,MAAMC,EAASC,EAAAA,UAAU,CAAE,OAAQP,EAAAA,oBAAqB,EAClD,CAACQ,EAAaC,CAAe,EAAIH,EAAO,kBAAkBD,CAAK,EAC/D,CAACK,EAAYC,CAAe,EAAIC,EAAAA,kBAAkBH,CAAe,EAEvE,OACEI,EAAAA,IAACZ,EAAA,CAAmB,GAAGO,EAAc,GAAGE,EAAY,QAAO,GACzD,SAAAG,EAAAA,IAACC,4CAAA,CAAW,GAAGH,EACb,eAACT,EAAA,CAA0B,QAAO,GAChC,SAAAW,EAAAA,IAACE,EAAAA,0CAAA,CACE,SAACC,GACAH,EAAAA,IAACV,GAAqB,QAAO,GAC3B,SAAAU,MAACI,EAAAA,0CAAA,CAAY,QAAAD,CAAA,CAAkB,CAAA,CACjC,EAEJ,CAAA,CACF,EACF,EACF,CAEJ,EAEAZ,EAAU,YAAc"}
1	+ {"version":3,"file":"date-input-CGy4NHpW.cjs.js","sources":["../../src/components/date-input/date-input.slots.tsx","../../src/components/date-input/date-input.tsx"],"sourcesContent":["import {\n type HTMLChakraProps,\n type RecipeProps,\n type UnstyledProp,\n createSlotRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { dateInputSlotRecipe } from \"./date-input.recipe\";\n\n/*\n Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the div element.\n /\ninterface DateInputRecipeProps extends RecipeProps<\"div\">, UnstyledProp {}\n\n/\n Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n /\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface DateInputRootProps\n extends HTMLChakraProps<\"div\", DateInputRecipeProps> {}\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n recipe: dateInputSlotRecipe,\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 DateInputRootProps\n>(\"div\", \"root\");\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 DateInputRootSlot,\n DateInputSegmentGroupSlot,\n DateInputSegmentSlot,\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\";\nimport { dateInputSlotRecipe } from \"./date-input.recipe\";\nimport type { DateInputProps } from \"./date-input.types\";\nimport { extractStyleProps } from \"@/utils/extractStyleProps\";\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 [recipeProps, recipeFreeProps] = recipe.splitVariantProps(props);\n const [styleProps, functionalProps] = extractStyleProps(recipeFreeProps);\n\n return (\n <DateInputRootSlot {...recipeProps} {...styleProps} asChild>\n <DateField {...functionalProps}>\n <DateInputSegmentGroupSlot asChild>\n <DateInputField>\n {(segment) => (\n <DateInputSegmentSlot asChild>\n <DateSegment segment={segment} />\n </DateInputSegmentSlot>\n )}\n </DateInputField>\n </DateInputSegmentGroupSlot>\n </DateField>\n </DateInputRootSlot>\n );\n};\n\nDateInput.displayName = \"DateInput\";\n"],"names":["withProvider","withContext","createSlotRecipeContext","dateInputSlotRecipe","DateInputRootSlot","DateInputSegmentGroupSlot","DateInputSegmentSlot","DateInput","props","recipe","useRecipe","recipeProps","recipeFreeProps","styleProps","functionalProps","extractStyleProps","jsx","DateField","DateInputField","segment","DateSegment"],"mappings":"2NAyBM,CAAE,aAAAA,EAAc,YAAAC,CAAA,EAAgBC,0BAAwB,CAC5D,OAAQC,EAAAA,mBACV,CAAC,EAMYC,EAAoBJ,EAG/B,MAAO,MAAM,EAKFK,EAA4BJ,EAGvC,MAAO,cAAc,EAKVK,EAAuBL,EAGlC,MAAO,SAAS,EC7BLM,EAAaC,GAA0B,CAClD,MAAMC,EAASC,EAAAA,UAAU,CAAE,OAAQP,EAAAA,oBAAqB,EAClD,CAACQ,EAAaC,CAAe,EAAIH,EAAO,kBAAkBD,CAAK,EAC/D,CAACK,EAAYC,CAAe,EAAIC,EAAAA,kBAAkBH,CAAe,EAEvE,OACEI,EAAAA,IAACZ,EAAA,CAAmB,GAAGO,EAAc,GAAGE,EAAY,QAAO,GACzD,SAAAG,EAAAA,IAACC,4CAAA,CAAW,GAAGH,EACb,eAACT,EAAA,CAA0B,QAAO,GAChC,SAAAW,EAAAA,IAACE,EAAAA,0CAAA,CACE,SAACC,GACAH,EAAAA,IAACV,GAAqB,QAAO,GAC3B,SAAAU,MAACI,EAAAA,0CAAA,CAAY,QAAAD,CAAA,CAAkB,CAAA,CACjC,EAEJ,CAAA,CACF,EACF,EACF,CAEJ,EAEAZ,EAAU,YAAc"}

package/dist/chunks/date-picker-BfA4uYkg.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-picker-BfA4uYkg.cjs.js","sources":["../../src/components/date-picker/date-picker.slots.tsx","../../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 type RecipeProps,\n type UnstyledProp,\n createSlotRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { datePickerSlotRecipe } from \"./date-picker.recipe\";\n\n/*\n Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the div element.\n /\ninterface DatePickerRecipeProps extends RecipeProps<\"div\">, UnstyledProp {}\n\n/\n Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n /\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface DatePickerRootProps\n extends HTMLChakraProps<\"div\", DatePickerRecipeProps> {}\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n recipe: datePickerSlotRecipe,\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 DatePickerRootProps\n>(\"div\", \"root\");\n\n/\n Slot component for the input group containing the DateInput and trigger button.\n /\nexport const DatePickerGroupSlot = 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 DatePickerTriggerSlot = withContext<\n HTMLDivElement,\n HTMLChakraProps<\"div\">\n>(\"div\", \"trigger\");\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 { Flex, Text, TimeInput } from \"@/components\";\nimport { useContext, useRef, useEffect } from \"react\";\nimport { useLocale } from \"react-aria\";\nimport { DatePickerStateContext } from \"react-aria-components\";\nimport type { DatePickerTimeInputProps } from \"../date-picker.types\";\n\nexport const DatePickerTimeInput = ({\n hideTimeZone,\n hourCycle,\n}: DatePickerTimeInputProps) => {\n const { locale } = useLocale();\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 if (dateValue && previousDateRef.current?.compare(dateValue) !== 0) {\n // Small delay to ensure the DOM is ready\n setTimeout(() => {\n // Find the first focusable segment within the time input container\n const container = timeInputRef.current;\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 previousDateRef.current = dateValue;\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 {/ TODO: translate hardcoded string /}\n <Text textStyle=\"xs\" fontWeight=\"500\" color=\"neutral.12\">\n Start time\n </Text>\n <TimeInput\n slot=\"timeInput\"\n locale={locale}\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\";\n\nexport const DatePickerCustomContext = ({\n children,\n}: {\n children: React.ReactNode;\n}) => {\n const buttonContext = useSlottedContext(ButtonContext) \|\| {};\n const datePickerState = useContext(DatePickerStateContext);\n const noInputValue = datePickerState?.dateValue === null;\n\n // eslint-disable-next-line @typescript-eslint/unbound-method\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 \"Enter time (hour)\";\n case \"minute\":\n return \"Enter time (hour and minute)\";\n case \"second\":\n return \"Enter time (hour, minute, and second)\";\n default:\n return \"Enter 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 onPress: () => datePickerState?.setValue(null),\n \"aria-label\": \"Clear input value\",\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 DatePickerTriggerSlot,\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\";\nimport { datePickerSlotRecipe } from \"./date-picker.recipe\";\nimport type { DatePickerProps } from \"./date-picker.types\";\nimport { extractStyleProps } from \"@/utils/extractStyleProps\";\nimport { DateInput, Calendar, IconButton } 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 />\n <DatePickerTriggerSlot>\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 </DatePickerTriggerSlot>\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","datePickerSlotRecipe","DatePickerRootSlot","DatePickerGroupSlot","DatePickerTriggerSlot","DatePickerPopoverSlot","DatePickerCalendarSlot","DatePickerTimeInput","hideTimeZone","hourCycle","locale","useLocale","datePickerState","useContext","DatePickerStateContext","granularity","dateValue","timeInputRef","useRef","previousDateRef","useEffect","container","firstSegment","jsxs","Flex","jsx","Text","TimeInput","DatePickerCustomContext","children","buttonContext","useSlottedContext","ButtonContext","noInputValue","timeValue","setTimeValue","isDatePickerDisabled","getDefaultTimeInputAriaLabel","buttonSlots","event","activeElement","timeInputSlots","value","Provider","TimeFieldContext","DatePicker","props","size","variant","recipe","useSlotRecipe","recipeProps","remainingProps","styleProps","otherProps","extractStyleProps","overlayButtonSize","shouldCloseOnSelect","ReactAriaDatePicker","Group","DateInput","IconButton","Close","CalendarMonth","Popover","Dialog","Calendar"],"mappings":"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"}
1	+ {"version":3,"file":"date-picker-BfA4uYkg.cjs.js","sources":["../../src/components/date-picker/date-picker.slots.tsx","../../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 type RecipeProps,\n type UnstyledProp,\n createSlotRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { datePickerSlotRecipe } from \"./date-picker.recipe\";\n\n/*\n Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the div element.\n /\ninterface DatePickerRecipeProps extends RecipeProps<\"div\">, UnstyledProp {}\n\n/\n Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n /\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface DatePickerRootProps\n extends HTMLChakraProps<\"div\", DatePickerRecipeProps> {}\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n recipe: datePickerSlotRecipe,\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 DatePickerRootProps\n>(\"div\", \"root\");\n\n/\n Slot component for the input group containing the DateInput and trigger button.\n /\nexport const DatePickerGroupSlot = 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 DatePickerTriggerSlot = withContext<\n HTMLDivElement,\n HTMLChakraProps<\"div\">\n>(\"div\", \"trigger\");\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 { Flex, Text, TimeInput } from \"@/components\";\nimport { useContext, useRef, useEffect } from \"react\";\nimport { useLocale } from \"react-aria\";\nimport { DatePickerStateContext } from \"react-aria-components\";\nimport type { DatePickerTimeInputProps } from \"../date-picker.types\";\n\nexport const DatePickerTimeInput = ({\n hideTimeZone,\n hourCycle,\n}: DatePickerTimeInputProps) => {\n const { locale } = useLocale();\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 if (dateValue && previousDateRef.current?.compare(dateValue) !== 0) {\n // Small delay to ensure the DOM is ready\n setTimeout(() => {\n // Find the first focusable segment within the time input container\n const container = timeInputRef.current;\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 previousDateRef.current = dateValue;\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 {/ TODO: translate hardcoded string /}\n <Text textStyle=\"xs\" fontWeight=\"500\" color=\"neutral.12\">\n Start time\n </Text>\n <TimeInput\n slot=\"timeInput\"\n locale={locale}\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\";\n\nexport const DatePickerCustomContext = ({\n children,\n}: {\n children: React.ReactNode;\n}) => {\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 \"Enter time (hour)\";\n case \"minute\":\n return \"Enter time (hour and minute)\";\n case \"second\":\n return \"Enter time (hour, minute, and second)\";\n default:\n return \"Enter 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 onPress: () => datePickerState?.setValue(null),\n \"aria-label\": \"Clear input value\",\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 DatePickerTriggerSlot,\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\";\nimport { datePickerSlotRecipe } from \"./date-picker.recipe\";\nimport type { DatePickerProps } from \"./date-picker.types\";\nimport { extractStyleProps } from \"@/utils/extractStyleProps\";\nimport { DateInput, Calendar, IconButton } 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 />\n <DatePickerTriggerSlot>\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 </DatePickerTriggerSlot>\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","datePickerSlotRecipe","DatePickerRootSlot","DatePickerGroupSlot","DatePickerTriggerSlot","DatePickerPopoverSlot","DatePickerCalendarSlot","DatePickerTimeInput","hideTimeZone","hourCycle","locale","useLocale","datePickerState","useContext","DatePickerStateContext","granularity","dateValue","timeInputRef","useRef","previousDateRef","useEffect","container","firstSegment","jsxs","Flex","jsx","Text","TimeInput","DatePickerCustomContext","children","buttonContext","useSlottedContext","ButtonContext","noInputValue","timeValue","setTimeValue","isDatePickerDisabled","getDefaultTimeInputAriaLabel","buttonSlots","event","activeElement","timeInputSlots","value","Provider","TimeFieldContext","DatePicker","props","size","variant","recipe","useSlotRecipe","recipeProps","remainingProps","styleProps","otherProps","extractStyleProps","overlayButtonSize","shouldCloseOnSelect","ReactAriaDatePicker","Group","DateInput","IconButton","Close","CalendarMonth","Popover","Dialog","Calendar"],"mappings":"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"}

package/dist/chunks/date-picker-UO9jg5oK.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-picker-UO9jg5oK.es.js","sources":["../../src/components/date-picker/date-picker.slots.tsx","../../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 type RecipeProps,\n type UnstyledProp,\n createSlotRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { datePickerSlotRecipe } from \"./date-picker.recipe\";\n\n/*\n Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the div element.\n /\ninterface DatePickerRecipeProps extends RecipeProps<\"div\">, UnstyledProp {}\n\n/\n Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n /\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface DatePickerRootProps\n extends HTMLChakraProps<\"div\", DatePickerRecipeProps> {}\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n recipe: datePickerSlotRecipe,\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 DatePickerRootProps\n>(\"div\", \"root\");\n\n/\n Slot component for the input group containing the DateInput and trigger button.\n /\nexport const DatePickerGroupSlot = 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 DatePickerTriggerSlot = withContext<\n HTMLDivElement,\n HTMLChakraProps<\"div\">\n>(\"div\", \"trigger\");\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 { Flex, Text, TimeInput } from \"@/components\";\nimport { useContext, useRef, useEffect } from \"react\";\nimport { useLocale } from \"react-aria\";\nimport { DatePickerStateContext } from \"react-aria-components\";\nimport type { DatePickerTimeInputProps } from \"../date-picker.types\";\n\nexport const DatePickerTimeInput = ({\n hideTimeZone,\n hourCycle,\n}: DatePickerTimeInputProps) => {\n const { locale } = useLocale();\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 if (dateValue && previousDateRef.current?.compare(dateValue) !== 0) {\n // Small delay to ensure the DOM is ready\n setTimeout(() => {\n // Find the first focusable segment within the time input container\n const container = timeInputRef.current;\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 previousDateRef.current = dateValue;\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 {/ TODO: translate hardcoded string /}\n <Text textStyle=\"xs\" fontWeight=\"500\" color=\"neutral.12\">\n Start time\n </Text>\n <TimeInput\n slot=\"timeInput\"\n locale={locale}\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\";\n\nexport const DatePickerCustomContext = ({\n children,\n}: {\n children: React.ReactNode;\n}) => {\n const buttonContext = useSlottedContext(ButtonContext) \|\| {};\n const datePickerState = useContext(DatePickerStateContext);\n const noInputValue = datePickerState?.dateValue === null;\n\n // eslint-disable-next-line @typescript-eslint/unbound-method\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 \"Enter time (hour)\";\n case \"minute\":\n return \"Enter time (hour and minute)\";\n case \"second\":\n return \"Enter time (hour, minute, and second)\";\n default:\n return \"Enter 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 onPress: () => datePickerState?.setValue(null),\n \"aria-label\": \"Clear input value\",\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 DatePickerTriggerSlot,\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\";\nimport { datePickerSlotRecipe } from \"./date-picker.recipe\";\nimport type { DatePickerProps } from \"./date-picker.types\";\nimport { extractStyleProps } from \"@/utils/extractStyleProps\";\nimport { DateInput, Calendar, IconButton } 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 />\n <DatePickerTriggerSlot>\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 </DatePickerTriggerSlot>\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","datePickerSlotRecipe","DatePickerRootSlot","DatePickerGroupSlot","DatePickerTriggerSlot","DatePickerPopoverSlot","DatePickerCalendarSlot","DatePickerTimeInput","hideTimeZone","hourCycle","locale","useLocale","datePickerState","useContext","DatePickerStateContext","granularity","dateValue","timeInputRef","useRef","previousDateRef","useEffect","container","firstSegment","jsxs","Flex","jsx","Text","TimeInput","DatePickerCustomContext","children","buttonContext","useSlottedContext","ButtonContext","noInputValue","timeValue","setTimeValue","isDatePickerDisabled","getDefaultTimeInputAriaLabel","buttonSlots","event","activeElement","timeInputSlots","value","Provider","TimeFieldContext","DatePicker","props","size","variant","recipe","useSlotRecipe","recipeProps","remainingProps","styleProps","otherProps","extractStyleProps","overlayButtonSize","shouldCloseOnSelect","ReactAriaDatePicker","Group","DateInput","IconButton","Close","CalendarMonth","Popover","Dialog","Calendar"],"mappings":"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"}
1	+ {"version":3,"file":"date-picker-UO9jg5oK.es.js","sources":["../../src/components/date-picker/date-picker.slots.tsx","../../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 type RecipeProps,\n type UnstyledProp,\n createSlotRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { datePickerSlotRecipe } from \"./date-picker.recipe\";\n\n/*\n Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the div element.\n /\ninterface DatePickerRecipeProps extends RecipeProps<\"div\">, UnstyledProp {}\n\n/\n Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n /\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface DatePickerRootProps\n extends HTMLChakraProps<\"div\", DatePickerRecipeProps> {}\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n recipe: datePickerSlotRecipe,\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 DatePickerRootProps\n>(\"div\", \"root\");\n\n/\n Slot component for the input group containing the DateInput and trigger button.\n /\nexport const DatePickerGroupSlot = 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 DatePickerTriggerSlot = withContext<\n HTMLDivElement,\n HTMLChakraProps<\"div\">\n>(\"div\", \"trigger\");\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 { Flex, Text, TimeInput } from \"@/components\";\nimport { useContext, useRef, useEffect } from \"react\";\nimport { useLocale } from \"react-aria\";\nimport { DatePickerStateContext } from \"react-aria-components\";\nimport type { DatePickerTimeInputProps } from \"../date-picker.types\";\n\nexport const DatePickerTimeInput = ({\n hideTimeZone,\n hourCycle,\n}: DatePickerTimeInputProps) => {\n const { locale } = useLocale();\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 if (dateValue && previousDateRef.current?.compare(dateValue) !== 0) {\n // Small delay to ensure the DOM is ready\n setTimeout(() => {\n // Find the first focusable segment within the time input container\n const container = timeInputRef.current;\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 previousDateRef.current = dateValue;\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 {/ TODO: translate hardcoded string /}\n <Text textStyle=\"xs\" fontWeight=\"500\" color=\"neutral.12\">\n Start time\n </Text>\n <TimeInput\n slot=\"timeInput\"\n locale={locale}\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\";\n\nexport const DatePickerCustomContext = ({\n children,\n}: {\n children: React.ReactNode;\n}) => {\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 \"Enter time (hour)\";\n case \"minute\":\n return \"Enter time (hour and minute)\";\n case \"second\":\n return \"Enter time (hour, minute, and second)\";\n default:\n return \"Enter 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 onPress: () => datePickerState?.setValue(null),\n \"aria-label\": \"Clear input value\",\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 DatePickerTriggerSlot,\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\";\nimport { datePickerSlotRecipe } from \"./date-picker.recipe\";\nimport type { DatePickerProps } from \"./date-picker.types\";\nimport { extractStyleProps } from \"@/utils/extractStyleProps\";\nimport { DateInput, Calendar, IconButton } 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 />\n <DatePickerTriggerSlot>\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 </DatePickerTriggerSlot>\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","datePickerSlotRecipe","DatePickerRootSlot","DatePickerGroupSlot","DatePickerTriggerSlot","DatePickerPopoverSlot","DatePickerCalendarSlot","DatePickerTimeInput","hideTimeZone","hourCycle","locale","useLocale","datePickerState","useContext","DatePickerStateContext","granularity","dateValue","timeInputRef","useRef","previousDateRef","useEffect","container","firstSegment","jsxs","Flex","jsx","Text","TimeInput","DatePickerCustomContext","children","buttonContext","useSlottedContext","ButtonContext","noInputValue","timeValue","setTimeValue","isDatePickerDisabled","getDefaultTimeInputAriaLabel","buttonSlots","event","activeElement","timeInputSlots","value","Provider","TimeFieldContext","DatePicker","props","size","variant","recipe","useSlotRecipe","recipeProps","remainingProps","styleProps","otherProps","extractStyleProps","overlayButtonSize","shouldCloseOnSelect","ReactAriaDatePicker","Group","DateInput","IconButton","Close","CalendarMonth","Popover","Dialog","Calendar"],"mappings":"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"}

package/dist/chunks/{date-range-picker-DGKM05wQ.es.js → date-range-picker-BU5JdXpV.es.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
 import { createSlotRecipeContext as V, Flex as x, useSlotRecipe as w } from "@chakra-ui/react";
 import { d as T } from "./date-range-picker.recipe-CuI7inaU.es.js";
 import { Close as z, CalendarMonth as E } from "@commercetools/nimbus-icons";
@@ -16,27 +16,27 @@ import { $ as F } from "./context-D3RF-nTI.es.js";
 import { $ as R } from "./Button-D19EX1Wq.es.js";
 import { c as H, d as L } from "./utils-CEdpnSRC.es.js";
 import { d as M } from "./DateField-D-4susha.es.js";
-const { withProvider: N, withContext: $ } = /* @__PURE__ */ V({
+const { withProvider: N, withContext: b } = /* @__PURE__ */ V({
   recipe: T
-}), J = /* @__PURE__ */ N("div", "root"), K = /* @__PURE__ */ $("div", "group"), Q = /* @__PURE__ */ $("div", "trigger"), U = /* @__PURE__ */ $("div", "popover"), X = /* @__PURE__ */ $("div", "calendar"), Y = ({
-  hideTimeZone: i,
-  hourCycle: s
+}), J = /* @__PURE__ */ N("div", "root"), K = /* @__PURE__ */ b("div", "group"), Q = /* @__PURE__ */ b("div", "trigger"), U = /* @__PURE__ */ b("div", "popover"), X = /* @__PURE__ */ b("div", "calendar"), Y = ({
+  hideTimeZone: s,
+  hourCycle: i
 }) => {
-  const { locale: e } = F(), l = k(I), { granularity: u, value: r } = l, m = S(null), c = S(r);
-  return u === "day" ? null : (A(() => {
+  const { locale: e } = F(), l = k(I), { granularity: m, value: r } = l, p = S(null), c = S(r);
+  return m === "day" ? null : (A(() => {
     (r?.start && c.current?.start?.compare(r.start) !== 0 || r?.end && c.current?.end?.compare(r.end) !== 0) && setTimeout(() => {
-      const o = m.current;
+      const o = p.current;
       if (o) {
-        const p = o.querySelector(
+        const d = o.querySelector(
           '[role="spinbutton"]'
         );
-        p && p.focus();
+        d && d.focus();
       }
     }, 50), c.current = r;
-  }, [r]), /* @__PURE__ */ d(
+  }, [r]), /* @__PURE__ */ u(
     x,
     {
-      ref: m,
+      ref: p,
       borderTop: "solid-25",
       borderColor: "neutral.3",
       py: "300",
@@ -45,8 +45,8 @@ const { withProvider: N, withContext: $ } = /* @__PURE__ */ V({
       justifyContent: "center",
       gap: "200",
       children: [
-        /* @__PURE__ */ d(x, { alignItems: "center", gap: "200", children: [
-          /* @__PURE__ */ n(
+        /* @__PURE__ */ u(x, { alignItems: "center", gap: "200", children: [
+          /* @__PURE__ */ t(
             y,
             {
               textStyle: "xs",
@@ -56,20 +56,20 @@ const { withProvider: N, withContext: $ } = /* @__PURE__ */ V({
               children: "Start time"
             }
           ),
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ t(
             P,
             {
               slot: "startTimeInput",
               locale: e,
               variant: "ghost",
               size: "sm",
-              hideTimeZone: i,
-              hourCycle: s
+              hideTimeZone: s,
+              hourCycle: i
             }
           )
         ] }),
-        /* @__PURE__ */ d(x, { alignItems: "center", gap: "200", children: [
-          /* @__PURE__ */ n(
+        /* @__PURE__ */ u(x, { alignItems: "center", gap: "200", children: [
+          /* @__PURE__ */ t(
             y,
             {
               textStyle: "xs",
@@ -79,15 +79,15 @@ const { withProvider: N, withContext: $ } = /* @__PURE__ */ V({
               children: "End time"
             }
           ),
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ t(
             P,
             {
               slot: "endTimeInput",
               locale: e,
               variant: "ghost",
               size: "sm",
-              hideTimeZone: i,
-              hourCycle: s
+              hideTimeZone: s,
+              hourCycle: i
             }
           )
         ] })
@@ -95,10 +95,10 @@ const { withProvider: N, withContext: $ } = /* @__PURE__ */ V({
     }
   ));
 }, Z = ({
-  children: i
+  children: s
 }) => {
-  const s = H(R) || {}, e = k(I), l = (t) => t?.day && t?.month && t?.year, u = !e?.value || !l(e.value.start) || !l(e.value.end), { granularity: r } = e, m = e?.value?.start && "hour" in e.value.start ? e.value.start : null, c = e?.value?.end && "hour" in e.value.end ? e.value.end : null, g = s?.isDisabled, o = (t) => {
-    const a = t === "start" ? "Start" : "End";
+  const i = H(R) || {}, e = k(I), l = (n) => n?.day && n?.month && n?.year, m = !e?.value || !l(e.value.start) || !l(e.value.end), { granularity: r } = e, p = e?.value?.start && "hour" in e.value.start ? e.value.start : null, c = e?.value?.end && "hour" in e.value.end ? e.value.end : null, g = i?.isDisabled, o = (n) => {
+    const a = n === "start" ? "Start" : "End";
     switch (r) {
       case "hour":
         return `${a} time (hour)`;
@@ -109,13 +109,13 @@ const { withProvider: N, withContext: $ } = /* @__PURE__ */ V({
       default:
         return `${a} time`;
     }
-  }, p = {
+  }, d = {
     /** toggles the calendar popover */
     calendarToggle: {
-      ...s,
-      onPress: (t) => {
+      ...i,
+      onPress: (n) => {
         const a = document?.activeElement;
-        a && a.blur(), s.onPress?.(t);
+        a && a.blur(), i.onPress?.(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 */
@@ -125,21 +125,21 @@ const { withProvider: N, withContext: $ } = /* @__PURE__ */ V({
       "aria-label": "Clear input value",
       isDisabled: g,
       // Hide the button when there's no value
-      style: u ? { display: "none" } : void 0,
-      "aria-hidden": u ? !0 : void 0
+      style: m ? { display: "none" } : void 0,
+      "aria-hidden": m ? !0 : void 0
     }
-  }, b = {
+  }, $ = {
     startTimeInput: {
-      value: m,
-      onChange: (t) => {
-        if (t !== null && e?.value?.start) {
+      value: p,
+      onChange: (n) => {
+        if (n !== null && e?.value?.start) {
           const a = e.value, f = a.start, h = a.end;
           if (f && h) {
             const v = f.set({
-              hour: t.hour,
-              minute: t.minute || 0,
-              second: t.second || 0,
-              millisecond: t.millisecond || 0
+              hour: n.hour,
+              minute: n.minute || 0,
+              second: n.second || 0,
+              millisecond: n.millisecond || 0
             });
             e.setValue({
               start: v,
@@ -153,15 +153,15 @@ const { withProvider: N, withContext: $ } = /* @__PURE__ */ V({
     },
     endTimeInput: {
       value: c,
-      onChange: (t) => {
-        if (t !== null && e?.value?.end) {
+      onChange: (n) => {
+        if (n !== null && e?.value?.end) {
           const a = e.value, f = a.start, h = a.end;
           if (f && h) {
             const v = h.set({
-              hour: t.hour,
-              minute: t.minute || 0,
-              second: t.second || 0,
-              millisecond: t.millisecond || 0
+              hour: n.hour,
+              minute: n.minute || 0,
+              second: n.second || 0,
+              millisecond: n.millisecond || 0
             });
             e.setValue({
               start: f,
@@ -174,31 +174,31 @@ const { withProvider: N, withContext: $ } = /* @__PURE__ */ V({
       "aria-label": o("end")
     }
   };
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ t(
     L,
     {
       values: [
         [
           R,
           {
-            slots: p
+            slots: d
           }
         ],
-        [M, { slots: b }]
+        [M, { slots: $ }]
       ],
-      children: i
+      children: s
     }
   );
-}, _ = (i) => {
-  const { granularity: s = "day", hideTimeZone: e, hourCycle: l } = i, u = w({ recipe: T }), [r, m] = u.splitVariantProps(i), [c, g] = O(m), { size: o = "md", variant: p } = r, b = o === "md" ? "xs" : "2xs", t = s === "day" ? i.shouldCloseOnSelect : !1;
-  return /* @__PURE__ */ n(J, { ...r, ...c, asChild: !0, children: /* @__PURE__ */ n(
+}, _ = (s) => {
+  const { granularity: i = "day", hideTimeZone: e, hourCycle: l } = s, m = w({ recipe: T }), [r, p] = m.splitVariantProps(s), [c, g] = O(p), { size: o = "md" } = r, d = o === "md" ? "xs" : "2xs", $ = i === "day" ? s.shouldCloseOnSelect : !1;
+  return /* @__PURE__ */ t(J, { ...r, ...c, asChild: !0, children: /* @__PURE__ */ t(
     W,
     {
       ...g,
-      shouldCloseOnSelect: t,
-      children: /* @__PURE__ */ d(Z, { children: [
-        /* @__PURE__ */ n(K, { asChild: !0, children: /* @__PURE__ */ d(G, { children: [
-          /* @__PURE__ */ n(
+      shouldCloseOnSelect: $,
+      children: /* @__PURE__ */ u(Z, { children: [
+        /* @__PURE__ */ t(K, { asChild: !0, children: /* @__PURE__ */ u(G, { children: [
+          /* @__PURE__ */ t(
             D,
             {
               slot: "start",
@@ -209,7 +209,7 @@ const { withProvider: N, withContext: $ } = /* @__PURE__ */ V({
               hourCycle: l
             }
           ),
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ t(
             y,
             {
               as: "span",
@@ -221,7 +221,7 @@ const { withProvider: N, withContext: $ } = /* @__PURE__ */ V({
               children: "–"
             }
           ),
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ t(
             D,
             {
               slot: "end",
@@ -232,32 +232,32 @@ const { withProvider: N, withContext: $ } = /* @__PURE__ */ V({
               hourCycle: l
             }
           ),
-          /* @__PURE__ */ d(Q, { children: [
-            /* @__PURE__ */ n(
+          /* @__PURE__ */ u(Q, { children: [
+            /* @__PURE__ */ t(
               C,
               {
                 tone: "primary",
                 variant: "ghost",
-                size: b,
+                size: d,
                 slot: "clear",
-                children: /* @__PURE__ */ n(z, {})
+                children: /* @__PURE__ */ t(z, {})
               }
             ),
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ t(
               C,
               {
                 tone: "primary",
                 variant: "ghost",
-                size: b,
+                size: d,
                 slot: "calendarToggle",
-                children: /* @__PURE__ */ n(E, {})
+                children: /* @__PURE__ */ t(E, {})
               }
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ n(U, { asChild: !0, children: /* @__PURE__ */ n(j, { placement: "bottom end", children: /* @__PURE__ */ d(B, { children: [
-          /* @__PURE__ */ n(X, { children: /* @__PURE__ */ n(q, {}) }),
-          /* @__PURE__ */ n(
+        /* @__PURE__ */ t(U, { asChild: !0, children: /* @__PURE__ */ t(j, { placement: "bottom end", children: /* @__PURE__ */ u(B, { children: [
+          /* @__PURE__ */ t(X, { children: /* @__PURE__ */ t(q, {}) }),
+          /* @__PURE__ */ t(
             Y,
             {
               hideTimeZone: e,
@@ -273,4 +273,4 @@ _.displayName = "DateRangePicker";
 export {
   _ as D
 };
-//# sourceMappingURL=date-range-picker-DGKM05wQ.es.js.map
+//# sourceMappingURL=date-range-picker-BU5JdXpV.es.js.map

package/dist/chunks/date-range-picker-BU5JdXpV.es.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"date-range-picker-BU5JdXpV.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 type RecipeProps,\n type UnstyledProp,\n createSlotRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { dateRangePickerSlotRecipe } from \"./date-range-picker.recipe\";\n\n/**\n * Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the div element.\n */\ninterface DateRangePickerRecipeProps extends RecipeProps<\"div\">, UnstyledProp {}\n\n/**\n * Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface DateRangePickerRootProps\n extends HTMLChakraProps<\"div\", DateRangePickerRecipeProps> {}\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n recipe: dateRangePickerSlotRecipe,\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 DateRangePickerRootProps\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 { useLocale } from \"react-aria\";\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 { locale } = useLocale();\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 // DateRangePicker-specific: Focus the time input when date range changes (user selects dates from calendar)\n useEffect(() => {\n // DateRangePicker-specific: 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 // Small delay to ensure the DOM is ready\n setTimeout(() => {\n // Find the first focusable segment within the time input container\n const container = timeInputRef.current;\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 // DateRangePicker-specific: Update previous value reference for range comparison\n previousValueRef.current = value;\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 {/* DateRangePicker-specific: 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 locale={locale}\n variant=\"ghost\"\n size=\"sm\"\n hideTimeZone={hideTimeZone}\n hourCycle={hourCycle}\n />\n </Flex>\n\n {/* DateRangePicker-specific: 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 locale={locale}\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 // DateRangePicker-specific: 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 // DateRangePicker-specific: 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 // DateRangePicker-specific: 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 // DateRangePicker-specific: 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 // DateRangePicker-specific: 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 // DateRangePicker-specific: 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\";\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={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={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","dateRangePickerSlotRecipe","DateRangePickerRootSlot","DateRangePickerGroupSlot","DateRangePickerTriggerSlot","DateRangePickerPopoverSlot","DateRangePickerCalendarSlot","DateRangePickerTimeInput","hideTimeZone","hourCycle","locale","useLocale","dateRangePickerState","useContext","DateRangePickerStateContext","granularity","value","timeInputRef","useRef","previousValueRef","useEffect","container","firstSegment","jsxs","Flex","jsx","Text","TimeInput","DateRangePickerCustomContext","children","buttonContext","useSlottedContext","ButtonContext","hasCompleteRangeDate","date","incompleteValue","startTimeValue","endTimeValue","isDateRangePickerDisabled","getDefaultTimeInputAriaLabel","type","prefix","buttonSlots","event","activeElement","timeInputSlots","currentValue","startDate","endDate","newStartDate","newEndDate","Provider","TimeFieldContext","DateRangePicker","props","recipe","useSlotRecipe","recipeProps","remainingProps","styleProps","otherProps","extractStyleProps","size","overlayButtonSize","shouldCloseOnSelect","ReactAriaDateRangePicker","Group","DateInput","IconButton","Close","CalendarMonth","Popover","Dialog","RangeCalendar"],"mappings":"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"}