@commercetools/nimbus 0.0.0-canary-20250801132810

package/dist/chunks/date-input.recipe-DENfjb1Z.es.js

@@ -0,0 +1,127 @@
+import { defineSlotRecipe as e } from "@chakra-ui/react";
+const r = /* @__PURE__ */ e({
+  // Unique class name prefix for the component
+  className: "nimbus-date-input",
+  slots: ["root", "segmentGroup", "segment"],
+  // Base styles applied to all instances of the component
+  base: {
+    root: {
+      display: "inline-block"
+    },
+    segmentGroup: {
+      display: "flex",
+      borderRadius: "200",
+      bg: "transparent",
+      boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
+      width: "full",
+      alignItems: "center",
+      userSelect: "none",
+      "&[data-focus-within='true']": {
+        // TODO: can't use focusRing prop, find other solution (helper, util, etc.)
+        outlineWidth: "var(--focus-ring-width)",
+        outlineColor: "var(--focus-ring-color)",
+        outlineStyle: "var(--focus-ring-style)",
+        outlineOffset: "var(--focus-ring-offset)"
+      },
+      "&[data-invalid='true']": {
+        "--border-width": "sizes.50",
+        "--border-color": "colors.critical.7",
+        color: "critical.11"
+      },
+      "&[data-disabled='true']": {
+        layerStyle: "disabled",
+        bg: "neutral.3"
+      }
+    },
+    segment: {
+      fontVariantNumeric: "tabular-nums",
+      outline: "0",
+      px: "50",
+      borderRadius: "50",
+      "&:empty": {
+        border: "solid-25"
+      },
+      "&[data-focused='true']": {
+        bg: "primary.10",
+        color: "primary.contrast"
+      },
+      "&[data-placeholder='true']:not([data-focused='true']), &[data-type='literal']": {
+        opacity: 0.5
+      },
+      /**
+       * The first and last segment contains a hidden character for screen readers
+       * that indicates the reading direction. Since this character is
+       * inside a segment element, it creates unwanted padding. This CSS
+       * removes the extra padding and aligns the text to match a regular
+       * TextInput's text position.
+       */
+      "&[data-type='literal']&:first-of-type, &[data-type='literal']&:last-of-type": {
+        px: "0",
+        ml: "-50"
+      },
+      "&[data-type='day']": {
+        // for reference
+      },
+      "&[data-type='month']": {
+        // for reference
+      },
+      "&[data-type='year']": {
+        // for reference
+      }
+    }
+  },
+  // Available variants for customizing the component's appearance
+  variants: {
+    // Size variants from smallest to largest
+    size: {
+      sm: {
+        segmentGroup: {
+          h: 800,
+          textStyle: "sm",
+          px: 300
+        }
+      },
+      md: {
+        segmentGroup: {
+          h: 1e3,
+          textStyle: "md",
+          px: 400
+        }
+      }
+    },
+    variant: {
+      solid: {
+        segmentGroup: {
+          "--border-width": "sizes.25",
+          "--border-color": "colors.neutral.7",
+          backgroundColor: "neutral.1",
+          _hover: {
+            backgroundColor: "primary.2"
+          }
+        }
+      },
+      ghost: {
+        segmentGroup: {
+          _hover: {
+            backgroundColor: "primary.2"
+          }
+        }
+      },
+      plain: {
+        segmentGroup: {
+          px: "0",
+          outline: "none!",
+          boxShadow: "none!"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "solid"
+  }
+});
+export {
+  r as d
+};
+//# sourceMappingURL=date-input.recipe-DENfjb1Z.es.js.map

package/dist/chunks/date-input.recipe-DENfjb1Z.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-input.recipe-DENfjb1Z.es.js","sources":["../../src/components/date-input/date-input.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from \"@chakra-ui/react\";\n\n/**\n * Recipe configuration for the DateInput component.\n * Defines the styling variants and base styles using Chakra UI's recipe system.\n */\nexport const dateInputSlotRecipe = defineSlotRecipe({\n  // Unique class name prefix for the component\n  className: \"nimbus-date-input\",\n  slots: [\"root\", \"segmentGroup\", \"segment\"],\n\n  // Base styles applied to all instances of the component\n  base: {\n    root: {\n      display: \"inline-block\",\n    },\n    segmentGroup: {\n      display: \"flex\",\n      borderRadius: \"200\",\n      bg: \"transparent\",\n      boxShadow: \"inset 0 0 0 var(--border-width) var(--border-color)\",\n      width: \"full\",\n      alignItems: \"center\",\n      userSelect: \"none\",\n      \"&[data-focus-within='true']\": {\n        // TODO: can't use focusRing prop, find other solution (helper, util, etc.)\n        outlineWidth: \"var(--focus-ring-width)\",\n        outlineColor: \"var(--focus-ring-color)\",\n        outlineStyle: \"var(--focus-ring-style)\",\n        outlineOffset: \"var(--focus-ring-offset)\",\n      },\n      \"&[data-invalid='true']\": {\n        \"--border-width\": \"sizes.50\",\n        \"--border-color\": \"colors.critical.7\",\n        color: \"critical.11\",\n      },\n      \"&[data-disabled='true']\": {\n        layerStyle: \"disabled\",\n        bg: \"neutral.3\",\n      },\n    },\n    segment: {\n      fontVariantNumeric: \"tabular-nums\",\n      outline: \"0\",\n      px: \"50\",\n      borderRadius: \"50\",\n\n      \"&:empty\": {\n        border: \"solid-25\",\n      },\n\n      \"&[data-focused='true']\": {\n        bg: \"primary.10\",\n        color: \"primary.contrast\",\n      },\n\n      \"&[data-placeholder='true']:not([data-focused='true']), &[data-type='literal']\":\n        {\n          opacity: 0.5,\n        },\n\n      /**\n       * The first and last segment contains a hidden character for screen readers\n       * that indicates the reading direction. Since this character is\n       * inside a segment element, it creates unwanted padding. This CSS\n       * removes the extra padding and aligns the text to match a regular\n       * TextInput's text position.\n       */\n      \"&[data-type='literal']&:first-of-type, &[data-type='literal']&:last-of-type\":\n        {\n          px: \"0\",\n          ml: \"-50\",\n        },\n\n      \"&[data-type='day']\": {\n        // for reference\n      },\n      \"&[data-type='month']\": {\n        // for reference\n      },\n      \"&[data-type='year']\": {\n        // for reference\n      },\n    },\n  },\n\n  // Available variants for customizing the component's appearance\n  variants: {\n    // Size variants from smallest to largest\n    size: {\n      sm: {\n        segmentGroup: {\n          h: 800,\n          textStyle: \"sm\",\n          px: 300,\n        },\n      },\n      md: {\n        segmentGroup: {\n          h: 1000,\n          textStyle: \"md\",\n          px: 400,\n        },\n      },\n    },\n    variant: {\n      solid: {\n        segmentGroup: {\n          \"--border-width\": \"sizes.25\",\n          \"--border-color\": \"colors.neutral.7\",\n          backgroundColor: \"neutral.1\",\n          _hover: {\n            backgroundColor: \"primary.2\",\n          },\n        },\n      },\n      ghost: {\n        segmentGroup: {\n          _hover: {\n            backgroundColor: \"primary.2\",\n          },\n        },\n      },\n      plain: {\n        segmentGroup: {\n          px: \"0\",\n          outline: \"none!\",\n          boxShadow: \"none!\",\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n    variant: \"solid\",\n  },\n});\n"],"names":["dateInputSlotRecipe","defineSlotRecipe"],"mappings":";AAMO,MAAMA,IAAsB,gBAAAC,EAAiB;AAAA;AAAA,EAElD,WAAW;AAAA,EACX,OAAO,CAAC,QAAQ,gBAAgB,SAAS;AAAA;AAAA,EAGzC,MAAM;AAAA,IACJ,MAAM;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,IAEX,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,cAAc;AAAA,MACd,IAAI;AAAA,MACJ,WAAW;AAAA,MACX,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,+BAA+B;AAAA;AAAA,QAE7B,cAAc;AAAA,QACd,cAAc;AAAA,QACd,cAAc;AAAA,QACd,eAAe;AAAA,MAAA;AAAA,MAEjB,0BAA0B;AAAA,QACxB,kBAAkB;AAAA,QAClB,kBAAkB;AAAA,QAClB,OAAO;AAAA,MAAA;AAAA,MAET,2BAA2B;AAAA,QACzB,YAAY;AAAA,QACZ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,SAAS;AAAA,MACP,oBAAoB;AAAA,MACpB,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,cAAc;AAAA,MAEd,WAAW;AAAA,QACT,QAAQ;AAAA,MAAA;AAAA,MAGV,0BAA0B;AAAA,QACxB,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,MAGT,iFACE;AAAA,QACE,SAAS;AAAA,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUb,+EACE;AAAA,QACE,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAGR,sBAAsB;AAAA;AAAA,MAAA;AAAA,MAGtB,wBAAwB;AAAA;AAAA,MAAA;AAAA,MAGxB,uBAAuB;AAAA;AAAA,MAAA;AAAA,IAEvB;AAAA,EACF;AAAA;AAAA,EAIF,UAAU;AAAA;AAAA,IAER,MAAM;AAAA,MACJ,IAAI;AAAA,QACF,cAAc;AAAA,UACZ,GAAG;AAAA,UACH,WAAW;AAAA,UACX,IAAI;AAAA,QAAA;AAAA,MACN;AAAA,MAEF,IAAI;AAAA,QACF,cAAc;AAAA,UACZ,GAAG;AAAA,UACH,WAAW;AAAA,UACX,IAAI;AAAA,QAAA;AAAA,MACN;AAAA,IACF;AAAA,IAEF,SAAS;AAAA,MACP,OAAO;AAAA,QACL,cAAc;AAAA,UACZ,kBAAkB;AAAA,UAClB,kBAAkB;AAAA,UAClB,iBAAiB;AAAA,UACjB,QAAQ;AAAA,YACN,iBAAiB;AAAA,UAAA;AAAA,QACnB;AAAA,MACF;AAAA,MAEF,OAAO;AAAA,QACL,cAAc;AAAA,UACZ,QAAQ;AAAA,YACN,iBAAiB;AAAA,UAAA;AAAA,QACnB;AAAA,MACF;AAAA,MAEF,OAAO;AAAA,QACL,cAAc;AAAA,UACZ,IAAI;AAAA,UACJ,SAAS;AAAA,UACT,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb,CAAC;"}

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

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),$=require("@chakra-ui/react"),y=require("./date-picker.recipe-5Avb06qp.cjs.js"),m=require("@commercetools/nimbus-icons"),h=require("./DatePicker-BD8RjPSL.cjs.js"),P=require("./Dialog-Btds5x4W.cjs.js"),v=require("./Group-apcpZquv.cjs.js"),D=require("./extractStyleProps-lyk7D-zN.cjs.js"),g=require("./icon-button-DMiKj7W8.cjs.js"),q=require("./date-input-BIs4HIV8.cjs.js"),k=require("./calendar-BS2skiOC.cjs.js"),I=require("./text--fhvW47o.cjs.js"),R=require("./time-input-DU8A9s-4.cjs.js"),p=require("react"),T=require("./context-DURpz5en.cjs.js"),j=require("./Button-BjOgrRmH.cjs.js"),S=require("./utils-sWqo2nmW.cjs.js"),E=require("./DateField-G0i9Cflc.cjs.js"),{withProvider:V,withContext:f}=$.createSlotRecipeContext({recipe:y.datePickerSlotRecipe}),z=V("div","root"),B=f("div","group"),w=f("div","trigger"),G=f("div","popover"),F=f("div","calendar"),O=({hideTimeZone:o,hourCycle:r})=>{const{locale:c}=T.$18f2051aff69b9bf$export$43bb16f9c6d9e3f7(),i=p.useContext(h.$06d5b8ec9ee5d538$export$50a10c048fdcdee9),{granularity:a,dateValue:t}=i,n=p.useRef(null),l=p.useRef(t);return a==="day"?null:(p.useEffect(()=>{t&&l.current?.compare(t)!==0&&setTimeout(()=>{const d=n.current;if(d){const u=d.querySelector('[role="spinbutton"]');u&&u.focus()}},50),l.current=t},[t]),e.jsxs($.Flex,{ref:n,borderTop:"solid-25",borderColor:"neutral.3",py:"300",px:"400",alignItems:"center",justifyContent:"center",gap:"200",children:[e.jsx(I.Text,{textStyle:"xs",fontWeight:"500",color:"neutral.12",children:"Start time"}),e.jsx(R.TimeInput,{slot:"timeInput",locale:c,variant:"ghost",size:"sm",hideTimeZone:o,hourCycle:r})]}))},A=({children:o})=>{const r=S.$64fa3d84918910a7$export$fabf2dc03a41866e(j.$d2b4bc8c273e7be6$export$24d547caef80ccd1)||{},c=p.useContext(h.$06d5b8ec9ee5d538$export$50a10c048fdcdee9),i=c?.dateValue===null,{timeValue:a,setTimeValue:t,granularity:n}=c,l=r?.isDisabled,d=()=>{switch(n){case"hour":return"Enter time (hour)";case"minute":return"Enter time (hour and minute)";case"second":return"Enter time (hour, minute, and second)";default:return"Enter time"}},u={calendarToggle:{...r,onPress:s=>{const x=document?.activeElement;x&&x.blur(),r.onPress?.(s)}},clear:{onPress:()=>c?.setValue(null),"aria-label":"Clear input value",isDisabled:l,style:i?{display:"none"}:void 0,"aria-hidden":i?!0:void 0}},b={timeInput:{value:a,onChange:s=>{s!==null&&t(s)},granularity:n==="day"?void 0:n,"aria-label":d()}};return e.jsx(S.$64fa3d84918910a7$export$2881499e37b75b9a,{values:[[j.$d2b4bc8c273e7be6$export$24d547caef80ccd1,{slots:u}],[E.$40825cdb76e74f70$export$8e17ddc448e87c1e,{slots:b}]],children:o})},C=o=>{const{size:r="md",variant:c,granularity:i="day",hideTimeZone:a,hourCycle:t}=o,n=$.useSlotRecipe({recipe:y.datePickerSlotRecipe}),[l,d]=n.splitVariantProps(o),[u,b]=D.extractStyleProps(d),s=r==="md"?"xs":"2xs",x=i==="day"?o.shouldCloseOnSelect:!1;return e.jsx(z,{...l,...u,asChild:!0,children:e.jsx(h.$06d5b8ec9ee5d538$export$5109c6dd95d8fb00,{...b,shouldCloseOnSelect:x,children:e.jsxs(A,{children:[e.jsx(B,{asChild:!0,children:e.jsxs(v.$a049562f99e7db0e$export$eb2fcfdbd7ba97d4,{children:[e.jsx(q.DateInput,{size:r,variant:c,width:"full",hideTimeZone:a,hourCycle:t}),e.jsxs(w,{children:[e.jsx(g.IconButton,{tone:"primary",variant:"ghost",size:s,slot:"clear",children:e.jsx(m.Close,{})}),e.jsx(g.IconButton,{tone:"primary",variant:"ghost",size:s,slot:"calendarToggle",children:e.jsx(m.CalendarMonth,{})})]})]})}),e.jsx(G,{asChild:!0,children:e.jsx(P.$07b14b47974efb58$export$5b6b19405a83ff9d,{placement:"bottom end",children:e.jsxs(P.$de32f1b87079253c$export$3ddf2d174ce01153,{children:[e.jsx(F,{children:e.jsx(k.Calendar,{})}),e.jsx(O,{hideTimeZone:a,hourCycle:t})]})})})]})})})};C.displayName="DatePicker";exports.DatePicker=C;
+//# sourceMappingURL=date-picker-C1ljMy9j.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-C1ljMy9j.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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"}

package/dist/chunks/date-picker-CDG1Jua9.es.js

@@ -0,0 +1,186 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { createSlotRecipeContext as v, Flex as y, useSlotRecipe as S } from "@chakra-ui/react";
+import { d as P } from "./date-picker.recipe-Dy6NmKHA.es.js";
+import { Close as D, CalendarMonth as k } from "@commercetools/nimbus-icons";
+import { $ as g, a as T } from "./DatePicker-BnQyHiTi.es.js";
+import { $ as I, a as E } from "./Dialog-CTf0VB6B.es.js";
+import { $ as R } from "./Group-nelci54o.es.js";
+import { e as V } from "./extractStyleProps-CxgBrz3O.es.js";
+import { I as h } from "./icon-button-CHC4OMiL.es.js";
+import { D as z } from "./date-input-cnLjNiQ-.es.js";
+import { C as w } from "./calendar-CcaDWo9H.es.js";
+import { T as j } from "./text-BqS2cN-N.es.js";
+import { T as B } from "./time-input-CBC12PIo.es.js";
+import { useContext as C, useRef as $, useEffect as G } from "react";
+import { $ as O } from "./context-D3RF-nTI.es.js";
+import { $ as x } from "./Button-BLHXvl6m.es.js";
+import { c as q, d as A } from "./utils-C4ruQppN.es.js";
+import { d as F } from "./DateField-Aj6J_Ms0.es.js";
+const { withProvider: H, withContext: f } = /* @__PURE__ */ v({
+  recipe: P
+}), L = /* @__PURE__ */ H("div", "root"), M = /* @__PURE__ */ f("div", "group"), N = /* @__PURE__ */ f("div", "trigger"), W = /* @__PURE__ */ f("div", "popover"), Z = /* @__PURE__ */ f("div", "calendar"), J = ({
+  hideTimeZone: a,
+  hourCycle: r
+}) => {
+  const { locale: n } = O(), s = C(g), { granularity: c, dateValue: t } = s, o = $(null), l = $(t);
+  return c === "day" ? null : (G(() => {
+    t && l.current?.compare(t) !== 0 && setTimeout(() => {
+      const d = o.current;
+      if (d) {
+        const u = d.querySelector(
+          '[role="spinbutton"]'
+        );
+        u && u.focus();
+      }
+    }, 50), l.current = t;
+  }, [t]), /* @__PURE__ */ m(
+    y,
+    {
+      ref: o,
+      borderTop: "solid-25",
+      borderColor: "neutral.3",
+      py: "300",
+      px: "400",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "200",
+      children: [
+        /* @__PURE__ */ e(j, { textStyle: "xs", fontWeight: "500", color: "neutral.12", children: "Start time" }),
+        /* @__PURE__ */ e(
+          B,
+          {
+            slot: "timeInput",
+            locale: n,
+            variant: "ghost",
+            size: "sm",
+            hideTimeZone: a,
+            hourCycle: r
+          }
+        )
+      ]
+    }
+  ));
+}, K = ({
+  children: a
+}) => {
+  const r = q(x) || {}, n = C(g), s = n?.dateValue === null, { timeValue: c, setTimeValue: t, granularity: o } = n, l = r?.isDisabled, d = () => {
+    switch (o) {
+      case "hour":
+        return "Enter time (hour)";
+      case "minute":
+        return "Enter time (hour and minute)";
+      case "second":
+        return "Enter time (hour, minute, and second)";
+      default:
+        return "Enter time";
+    }
+  }, u = {
+    /** toggles the calendar popover */
+    calendarToggle: {
+      ...r,
+      onPress: (i) => {
+        const p = document?.activeElement;
+        p && p.blur(), r.onPress?.(i);
+      }
+    },
+    /** Clear button that displays when there's a value in each segment - hidden from both visual and screen readers when there's no value */
+    clear: {
+      onPress: () => n?.setValue(null),
+      "aria-label": "Clear input value",
+      isDisabled: l,
+      // Hide the button when there's no value
+      style: s ? { display: "none" } : void 0,
+      "aria-hidden": s ? !0 : void 0
+    }
+  }, b = {
+    timeInput: {
+      value: c,
+      onChange: (i) => {
+        i !== null && t(i);
+      },
+      granularity: o === "day" ? void 0 : o,
+      "aria-label": d()
+    }
+  };
+  return /* @__PURE__ */ e(
+    A,
+    {
+      values: [
+        [
+          x,
+          {
+            slots: u
+          }
+        ],
+        [F, { slots: b }]
+      ],
+      children: a
+    }
+  );
+}, Q = (a) => {
+  const {
+    size: r = "md",
+    variant: n,
+    granularity: s = "day",
+    hideTimeZone: c,
+    hourCycle: t
+  } = a, o = S({ recipe: P }), [l, d] = o.splitVariantProps(a), [u, b] = V(d), i = r === "md" ? "xs" : "2xs", p = s === "day" ? a.shouldCloseOnSelect : !1;
+  return /* @__PURE__ */ e(L, { ...l, ...u, asChild: !0, children: /* @__PURE__ */ e(
+    T,
+    {
+      ...b,
+      shouldCloseOnSelect: p,
+      children: /* @__PURE__ */ m(K, { children: [
+        /* @__PURE__ */ e(M, { asChild: !0, children: /* @__PURE__ */ m(R, { children: [
+          /* @__PURE__ */ e(
+            z,
+            {
+              size: r,
+              variant: n,
+              width: "full",
+              hideTimeZone: c,
+              hourCycle: t
+            }
+          ),
+          /* @__PURE__ */ m(N, { children: [
+            /* @__PURE__ */ e(
+              h,
+              {
+                tone: "primary",
+                variant: "ghost",
+                size: i,
+                slot: "clear",
+                children: /* @__PURE__ */ e(D, {})
+              }
+            ),
+            /* @__PURE__ */ e(
+              h,
+              {
+                tone: "primary",
+                variant: "ghost",
+                size: i,
+                slot: "calendarToggle",
+                children: /* @__PURE__ */ e(k, {})
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ e(W, { asChild: !0, children: /* @__PURE__ */ e(I, { placement: "bottom end", children: /* @__PURE__ */ m(E, { children: [
+          /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(w, {}) }),
+          /* @__PURE__ */ e(
+            J,
+            {
+              hideTimeZone: c,
+              hourCycle: t
+            }
+          )
+        ] }) }) })
+      ] })
+    }
+  ) });
+};
+Q.displayName = "DatePicker";
+export {
+  Q as D
+};
+//# sourceMappingURL=date-picker-CDG1Jua9.es.js.map

package/dist/chunks/date-picker-CDG1Jua9.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-CDG1Jua9.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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"}

package/dist/chunks/date-picker.recipe-5Avb06qp.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const a=require("@chakra-ui/react"),e=a.defineSlotRecipe({className:"nimbus-date-picker",slots:["root","group","trigger","popover","calendar","calendarHeader","calendarGrid","calendarCell"],base:{root:{display:"inline-block",overflow:"hidden"},group:{position:"relative"},trigger:{position:"absolute",right:"400",top:"100"},popover:{bg:"neutral.1",boxShadow:"4",borderRadius:"300",overflow:"auto","&[data-entering]":{animationName:"fade-in, scale-in",animationDuration:"fast"},"&[data-exiting]":{animationName:"fade-out, scale-out",animationDuration:"faster"}}},variants:{size:{sm:{group:{"& .nimbus-date-input__root":{mr:"1400"}},trigger:{top:"50"}},md:{group:{"& .nimbus-date-input__root":{mr:"calc({spacing.1600} + {spacing.200})"}},trigger:{top:"100"}}},variant:{solid:{},ghost:{}}},defaultVariants:{size:"md"}});exports.datePickerSlotRecipe=e;
+//# sourceMappingURL=date-picker.recipe-5Avb06qp.cjs.js.map

package/dist/chunks/date-picker.recipe-5Avb06qp.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.recipe-5Avb06qp.cjs.js","sources":["../../src/components/date-picker/date-picker.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from \"@chakra-ui/react\";\n\n/**\n * Recipe configuration for the DatePicker component.\n * Defines the styling variants and base styles using Chakra UI's recipe system.\n */\nexport const datePickerSlotRecipe = defineSlotRecipe({\n  // Unique class name prefix for the component\n  className: \"nimbus-date-picker\",\n  slots: [\n    \"root\",\n    \"group\",\n    \"trigger\",\n    \"popover\",\n    \"calendar\",\n    \"calendarHeader\",\n    \"calendarGrid\",\n    \"calendarCell\",\n  ],\n\n  // Base styles applied to all instances of the component\n  base: {\n    root: {\n      display: \"inline-block\",\n      overflow: \"hidden\",\n    },\n    group: {\n      position: \"relative\",\n    },\n    trigger: {\n      position: \"absolute\",\n      right: \"400\",\n      top: \"100\",\n    },\n    popover: {\n      bg: \"neutral.1\",\n      boxShadow: \"4\",\n      borderRadius: \"300\",\n      overflow: \"auto\",\n\n      \"&[data-entering]\": {\n        animationName: \"fade-in, scale-in\",\n        animationDuration: \"fast\",\n      },\n\n      \"&[data-exiting]\": {\n        animationName: \"fade-out, scale-out\",\n        animationDuration: \"faster\",\n      },\n    },\n  },\n  variants: {\n    // Size variants from smallest to largest\n    size: {\n      sm: {\n        group: {\n          \"& .nimbus-date-input__root\": {\n            mr: \"1400\",\n          },\n        },\n        trigger: {\n          top: \"50\",\n        },\n      },\n      md: {\n        group: {\n          \"& .nimbus-date-input__root\": {\n            // combine 2 tokens cause there is no token for this crooked value\n            mr: \"calc({spacing.1600} + {spacing.200})\",\n          },\n        },\n        trigger: {\n          top: \"100\",\n        },\n      },\n    },\n    variant: {\n      // those need to exist, as the date-input has and needs those variants\n      solid: {},\n      ghost: {},\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n"],"names":["datePickerSlotRecipe","defineSlotRecipe"],"mappings":"iDAMaA,EAAuBC,EAAAA,iBAAiB,CAEnD,UAAW,qBACX,MAAO,CACL,OACA,QACA,UACA,UACA,WACA,iBACA,eACA,cAAA,EAIF,KAAM,CACJ,KAAM,CACJ,QAAS,eACT,SAAU,QAAA,EAEZ,MAAO,CACL,SAAU,UAAA,EAEZ,QAAS,CACP,SAAU,WACV,MAAO,MACP,IAAK,KAAA,EAEP,QAAS,CACP,GAAI,YACJ,UAAW,IACX,aAAc,MACd,SAAU,OAEV,mBAAoB,CAClB,cAAe,oBACf,kBAAmB,MAAA,EAGrB,kBAAmB,CACjB,cAAe,sBACf,kBAAmB,QAAA,CACrB,CACF,EAEF,SAAU,CAER,KAAM,CACJ,GAAI,CACF,MAAO,CACL,6BAA8B,CAC5B,GAAI,MAAA,CACN,EAEF,QAAS,CACP,IAAK,IAAA,CACP,EAEF,GAAI,CACF,MAAO,CACL,6BAA8B,CAE5B,GAAI,sCAAA,CACN,EAEF,QAAS,CACP,IAAK,KAAA,CACP,CACF,EAEF,QAAS,CAEP,MAAO,CAAA,EACP,MAAO,CAAA,CAAC,CACV,EAEF,gBAAiB,CACf,KAAM,IAAA,CAEV,CAAC"}

package/dist/chunks/date-picker.recipe-Dy6NmKHA.es.js

@@ -0,0 +1,82 @@
+import { defineSlotRecipe as a } from "@chakra-ui/react";
+const i = /* @__PURE__ */ a({
+  // Unique class name prefix for the component
+  className: "nimbus-date-picker",
+  slots: [
+    "root",
+    "group",
+    "trigger",
+    "popover",
+    "calendar",
+    "calendarHeader",
+    "calendarGrid",
+    "calendarCell"
+  ],
+  // Base styles applied to all instances of the component
+  base: {
+    root: {
+      display: "inline-block",
+      overflow: "hidden"
+    },
+    group: {
+      position: "relative"
+    },
+    trigger: {
+      position: "absolute",
+      right: "400",
+      top: "100"
+    },
+    popover: {
+      bg: "neutral.1",
+      boxShadow: "4",
+      borderRadius: "300",
+      overflow: "auto",
+      "&[data-entering]": {
+        animationName: "fade-in, scale-in",
+        animationDuration: "fast"
+      },
+      "&[data-exiting]": {
+        animationName: "fade-out, scale-out",
+        animationDuration: "faster"
+      }
+    }
+  },
+  variants: {
+    // Size variants from smallest to largest
+    size: {
+      sm: {
+        group: {
+          "& .nimbus-date-input__root": {
+            mr: "1400"
+          }
+        },
+        trigger: {
+          top: "50"
+        }
+      },
+      md: {
+        group: {
+          "& .nimbus-date-input__root": {
+            // combine 2 tokens cause there is no token for this crooked value
+            mr: "calc({spacing.1600} + {spacing.200})"
+          }
+        },
+        trigger: {
+          top: "100"
+        }
+      }
+    },
+    variant: {
+      // those need to exist, as the date-input has and needs those variants
+      solid: {},
+      ghost: {}
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+export {
+  i as d
+};
+//# sourceMappingURL=date-picker.recipe-Dy6NmKHA.es.js.map

package/dist/chunks/date-picker.recipe-Dy6NmKHA.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.recipe-Dy6NmKHA.es.js","sources":["../../src/components/date-picker/date-picker.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from \"@chakra-ui/react\";\n\n/**\n * Recipe configuration for the DatePicker component.\n * Defines the styling variants and base styles using Chakra UI's recipe system.\n */\nexport const datePickerSlotRecipe = defineSlotRecipe({\n  // Unique class name prefix for the component\n  className: \"nimbus-date-picker\",\n  slots: [\n    \"root\",\n    \"group\",\n    \"trigger\",\n    \"popover\",\n    \"calendar\",\n    \"calendarHeader\",\n    \"calendarGrid\",\n    \"calendarCell\",\n  ],\n\n  // Base styles applied to all instances of the component\n  base: {\n    root: {\n      display: \"inline-block\",\n      overflow: \"hidden\",\n    },\n    group: {\n      position: \"relative\",\n    },\n    trigger: {\n      position: \"absolute\",\n      right: \"400\",\n      top: \"100\",\n    },\n    popover: {\n      bg: \"neutral.1\",\n      boxShadow: \"4\",\n      borderRadius: \"300\",\n      overflow: \"auto\",\n\n      \"&[data-entering]\": {\n        animationName: \"fade-in, scale-in\",\n        animationDuration: \"fast\",\n      },\n\n      \"&[data-exiting]\": {\n        animationName: \"fade-out, scale-out\",\n        animationDuration: \"faster\",\n      },\n    },\n  },\n  variants: {\n    // Size variants from smallest to largest\n    size: {\n      sm: {\n        group: {\n          \"& .nimbus-date-input__root\": {\n            mr: \"1400\",\n          },\n        },\n        trigger: {\n          top: \"50\",\n        },\n      },\n      md: {\n        group: {\n          \"& .nimbus-date-input__root\": {\n            // combine 2 tokens cause there is no token for this crooked value\n            mr: \"calc({spacing.1600} + {spacing.200})\",\n          },\n        },\n        trigger: {\n          top: \"100\",\n        },\n      },\n    },\n    variant: {\n      // those need to exist, as the date-input has and needs those variants\n      solid: {},\n      ghost: {},\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n"],"names":["datePickerSlotRecipe","defineSlotRecipe"],"mappings":";AAMO,MAAMA,IAAuB,gBAAAC,EAAiB;AAAA;AAAA,EAEnD,WAAW;AAAA,EACX,OAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA;AAAA,EAIF,MAAM;AAAA,IACJ,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,UAAU;AAAA,IAAA;AAAA,IAEZ,OAAO;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,IAEZ,SAAS;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,MACP,KAAK;AAAA,IAAA;AAAA,IAEP,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,WAAW;AAAA,MACX,cAAc;AAAA,MACd,UAAU;AAAA,MAEV,oBAAoB;AAAA,QAClB,eAAe;AAAA,QACf,mBAAmB;AAAA,MAAA;AAAA,MAGrB,mBAAmB;AAAA,QACjB,eAAe;AAAA,QACf,mBAAmB;AAAA,MAAA;AAAA,IACrB;AAAA,EACF;AAAA,EAEF,UAAU;AAAA;AAAA,IAER,MAAM;AAAA,MACJ,IAAI;AAAA,QACF,OAAO;AAAA,UACL,8BAA8B;AAAA,YAC5B,IAAI;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,SAAS;AAAA,UACP,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,MAEF,IAAI;AAAA,QACF,OAAO;AAAA,UACL,8BAA8B;AAAA;AAAA,YAE5B,IAAI;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,SAAS;AAAA,UACP,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,IACF;AAAA,IAEF,SAAS;AAAA;AAAA,MAEP,OAAO,CAAA;AAAA,MACP,OAAO,CAAA;AAAA,IAAC;AAAA,EACV;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC;"}