@commercetools/nimbus 0.0.9-rc8 → 0.0.11

package/dist/chunks/date-range-picker-DYAE8hY-.es.js

@@ -0,0 +1,273 @@
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { createSlotRecipeContext as k, Flex as v, useSlotRecipe as V } from "@chakra-ui/react";
+import { d as y } from "./date-range-picker.recipe-CuI7inaU.es.js";
+import { Close as w, CalendarMonth as z } from "@commercetools/nimbus-icons";
+import { b as T, c as E } from "./DatePicker-3TZ8oKaR.es.js";
+import { $ as W, a as j } from "./Dialog-CFERgD91.es.js";
+import { $ as B } from "./Group-Brffs0pl.es.js";
+import { e as G } from "./extractStyleProps-CxgBrz3O.es.js";
+import { I as P } from "./icon-button-CPBzhg2C.es.js";
+import { T as x } from "./text-CFsPSPPs.es.js";
+import { D as S } from "./date-input-TeYMF5Hb.es.js";
+import { R as O } from "./range-calendar-DEpcpGLw.es.js";
+import { T as C } from "./time-input-DeYvqDoa.es.js";
+import { useContext as I, useRef as D, useEffect as q } from "react";
+import { $ as A } from "./context-D3RF-nTI.es.js";
+import { $ as R } from "./Button-BsN1D5Hi.es.js";
+import { c as F, d as H } from "./utils-CEdpnSRC.es.js";
+import { d as L } from "./DateField-BozrMa9v.es.js";
+const { withProvider: M, withContext: b } = /* @__PURE__ */ k({
+  recipe: y
+}), N = /* @__PURE__ */ M("div", "root"), J = /* @__PURE__ */ b("div", "group"), K = /* @__PURE__ */ b("div", "trigger"), Q = /* @__PURE__ */ b("div", "popover"), U = /* @__PURE__ */ b("div", "calendar"), X = ({
+  hideTimeZone: s,
+  hourCycle: i
+}) => {
+  const { locale: e } = A(), c = I(T), { granularity: o, value: a } = c, m = D(null), d = D(a);
+  return o === "day" ? null : (q(() => {
+    (a?.start && d.current?.start?.compare(a.start) !== 0 || a?.end && d.current?.end?.compare(a.end) !== 0) && setTimeout(() => {
+      const l = m.current;
+      if (l) {
+        const f = l.querySelector(
+          '[role="spinbutton"]'
+        );
+        f && f.focus();
+      }
+    }, 50), d.current = a;
+  }, [a]), /* @__PURE__ */ u(
+    v,
+    {
+      ref: m,
+      borderTop: "solid-25",
+      borderColor: "neutral.3",
+      py: "300",
+      px: "400",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "200",
+      children: [
+        /* @__PURE__ */ u(v, { alignItems: "center", gap: "200", children: [
+          /* @__PURE__ */ t(
+            x,
+            {
+              textStyle: "xs",
+              fontWeight: "500",
+              color: "neutral.12",
+              minWidth: "fit-content",
+              children: "Start time"
+            }
+          ),
+          /* @__PURE__ */ t(
+            C,
+            {
+              slot: "startTimeInput",
+              locale: e,
+              variant: "ghost",
+              size: "sm",
+              hideTimeZone: s,
+              hourCycle: i
+            }
+          )
+        ] }),
+        /* @__PURE__ */ u(v, { alignItems: "center", gap: "200", children: [
+          /* @__PURE__ */ t(
+            x,
+            {
+              textStyle: "xs",
+              fontWeight: "500",
+              color: "neutral.12",
+              minWidth: "fit-content",
+              children: "End time"
+            }
+          ),
+          /* @__PURE__ */ t(
+            C,
+            {
+              slot: "endTimeInput",
+              locale: e,
+              variant: "ghost",
+              size: "sm",
+              hideTimeZone: s,
+              hourCycle: i
+            }
+          )
+        ] })
+      ]
+    }
+  ));
+}, Y = ({
+  children: s
+}) => {
+  const i = F(R) || {}, e = I(T), c = !e?.value || !e.value.start && !e.value.end, { granularity: o } = e, a = e?.value?.start && "hour" in e.value.start ? e.value.start : null, m = e?.value?.end && "hour" in e.value.end ? e.value.end : null, d = i?.isDisabled, p = (n) => {
+    const r = n === "start" ? "Start" : "End";
+    switch (o) {
+      case "hour":
+        return `${r} time (hour)`;
+      case "minute":
+        return `${r} time (hour and minute)`;
+      case "second":
+        return `${r} time (hour, minute, and second)`;
+      default:
+        return `${r} time`;
+    }
+  }, l = {
+    /** toggles the calendar popover */
+    calendarToggle: {
+      ...i,
+      onPress: (n) => {
+        const r = document?.activeElement;
+        r && r.blur(), i.onPress?.(n);
+      }
+    },
+    /** clears the input value */
+    clear: {
+      // DateRangePicker-specific: Clear both start and end values
+      onPress: () => e?.setValue(null),
+      "aria-label": "Clear input value",
+      isDisabled: c || d
+    }
+  }, f = {
+    startTimeInput: {
+      value: a,
+      onChange: (n) => {
+        if (n !== null && e?.value?.start) {
+          const r = e.value, h = r.start, g = r.end;
+          if (h && g) {
+            const $ = h.set({
+              hour: n.hour,
+              minute: n.minute || 0,
+              second: n.second || 0,
+              millisecond: n.millisecond || 0
+            });
+            e.setValue({
+              start: $,
+              end: g
+            });
+          }
+        }
+      },
+      granularity: o === "day" ? void 0 : o,
+      "aria-label": p("start")
+    },
+    endTimeInput: {
+      value: m,
+      onChange: (n) => {
+        if (n !== null && e?.value?.end) {
+          const r = e.value, h = r.start, g = r.end;
+          if (h && g) {
+            const $ = g.set({
+              hour: n.hour,
+              minute: n.minute || 0,
+              second: n.second || 0,
+              millisecond: n.millisecond || 0
+            });
+            e.setValue({
+              start: h,
+              end: $
+            });
+          }
+        }
+      },
+      granularity: o === "day" ? void 0 : o,
+      "aria-label": p("end")
+    }
+  };
+  return /* @__PURE__ */ t(
+    H,
+    {
+      values: [
+        [
+          R,
+          {
+            slots: l
+          }
+        ],
+        [L, { slots: f }]
+      ],
+      children: s
+    }
+  );
+}, Z = (s) => {
+  const { granularity: i = "day", hideTimeZone: e, hourCycle: c } = s, o = V({ recipe: y }), [a, m] = o.splitVariantProps(s), [d, p] = G(m), { size: l = "md", variant: f } = a, n = l === "md" ? "xs" : "2xs", r = i === "day" ? s.shouldCloseOnSelect : !1;
+  return /* @__PURE__ */ t(N, { ...a, ...d, asChild: !0, children: /* @__PURE__ */ t(
+    E,
+    {
+      ...p,
+      shouldCloseOnSelect: r,
+      children: /* @__PURE__ */ u(Y, { children: [
+        /* @__PURE__ */ t(J, { asChild: !0, children: /* @__PURE__ */ u(B, { children: [
+          /* @__PURE__ */ t(
+            S,
+            {
+              slot: "start",
+              size: l,
+              variant: "plain",
+              width: "auto",
+              hideTimeZone: e,
+              hourCycle: c
+            }
+          ),
+          /* @__PURE__ */ t(
+            x,
+            {
+              as: "span",
+              px: "150",
+              color: "neutral.11",
+              userSelect: "none",
+              "aria-hidden": "true",
+              slot: null,
+              children: "–"
+            }
+          ),
+          /* @__PURE__ */ t(
+            S,
+            {
+              slot: "end",
+              size: l,
+              variant: "plain",
+              width: "auto",
+              hideTimeZone: e,
+              hourCycle: c
+            }
+          ),
+          /* @__PURE__ */ u(K, { children: [
+            /* @__PURE__ */ t(
+              P,
+              {
+                tone: "primary",
+                variant: "ghost",
+                size: n,
+                slot: "clear",
+                children: /* @__PURE__ */ t(w, {})
+              }
+            ),
+            /* @__PURE__ */ t(
+              P,
+              {
+                tone: "primary",
+                variant: "ghost",
+                size: n,
+                slot: "calendarToggle",
+                children: /* @__PURE__ */ t(z, {})
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ t(Q, { asChild: !0, children: /* @__PURE__ */ t(W, { placement: "bottom end", children: /* @__PURE__ */ u(j, { children: [
+          /* @__PURE__ */ t(U, { children: /* @__PURE__ */ t(O, {}) }),
+          /* @__PURE__ */ t(
+            X,
+            {
+              hideTimeZone: e,
+              hourCycle: c
+            }
+          )
+        ] }) }) })
+      ] })
+    }
+  ) });
+};
+Z.displayName = "DateRangePicker";
+export {
+  Z as D
+};
+//# sourceMappingURL=date-range-picker-DYAE8hY-.es.js.map

package/dist/chunks/date-range-picker-DYAE8hY-.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker-DYAE8hY-.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 both start and end values are empty for clear button state\n  const noInputValue =\n    !dateRangePickerState?.value ||\n    (!dateRangePickerState.value.start && !dateRangePickerState.value.end);\n\n  // eslint-disable-next-line @typescript-eslint/unbound-method\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    /** clears the input 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: noInputValue || isDateRangePickerDisabled,\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\", variant } = 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","noInputValue","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","variant","overlayButtonSize","shouldCloseOnSelect","ReactAriaDateRangePicker","Group","DateInput","IconButton","Close","CalendarMonth","Popover","Dialog","RangeCalendar"],"mappings":"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"}

package/dist/chunks/date-range-picker.recipe-BARriKKl.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const r=require("@chakra-ui/react"),e=r.defineSlotRecipe({className:"nimbus-date-range-picker",slots:["root","group","trigger","popover","calendar","calendarHeader","calendarGrid","calendarCell"],base:{root:{display:"inline-block"},group:{"--border-width":"{sizes.25}","--border-color":"{colors.neutral.7}",display:"flex",alignItems:"center",justifyContent:"flex-start",boxShadow:"inset 0 0 0 var(--border-width) var(--border-color)",borderRadius:"200",bg:"neutral.1",px:"300",gap:0,position:"relative",_hover:{bg:"primary.2"},_focusWithin:{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",alignItems:"center"}},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:{height:"800",pr:"calc({spacing.1400} + {spacing.400})"},trigger:{top:"50"}},md:{group:{height:"1000",pr:"calc({spacing.1600} + {spacing.200} + {spacing.400})"},trigger:{top:"100"}}},variant:{solid:{},ghost:{group:{bg:"transparent",px:"300",_hover:{bg:"primary.2"}}}}},defaultVariants:{size:"md",variant:"solid"}});exports.dateRangePickerSlotRecipe=e;
+//# sourceMappingURL=date-range-picker.recipe-BARriKKl.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker.recipe-BARriKKl.cjs.js","sources":["../../src/components/date-range-picker/date-range-picker.recipe.tsx"],"sourcesContent":["import { defineSlotRecipe } from \"@chakra-ui/react\";\n\nexport const dateRangePickerSlotRecipe = defineSlotRecipe({\n  className: \"nimbus-date-range-picker\",\n  slots: [\n    \"root\",\n    \"group\",\n    \"trigger\",\n    \"popover\",\n    \"calendar\",\n    \"calendarHeader\",\n    \"calendarGrid\",\n    \"calendarCell\",\n  ],\n  base: {\n    root: {\n      display: \"inline-block\",\n    },\n\n    group: {\n      \"--border-width\": \"{sizes.25}\",\n      \"--border-color\": \"{colors.neutral.7}\",\n      // ========================================\n      // BASE LAYOUT & VISUAL PROPERTIES\n      // ========================================\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"flex-start\",\n      boxShadow: \"inset 0 0 0 var(--border-width) var(--border-color)\",\n      borderRadius: \"200\",\n      bg: \"neutral.1\",\n      px: \"300\",\n      gap: 0,\n      position: \"relative\", // Ensure stacking context for border\n\n      // ========================================\n      // INTERACTIVE STATES\n      // ========================================\n      _hover: {\n        bg: \"primary.2\",\n      },\n      // Focus ring with transparent gap\n      _focusWithin: {\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\n      // ========================================\n      // DATA STATES\n      // ========================================\n      // Invalid state styling\n      \"&[data-invalid='true']\": {\n        \"--border-width\": \"{sizes.50}\",\n        \"--border-color\": \"{colors.critical.7}\",\n        color: \"critical.11\",\n        alignItems: \"center\",\n      },\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: {\n      sm: {\n        group: {\n          height: \"800\", // Match DateInput sm height\n          pr: \"calc({spacing.1400} + {spacing.400})\", // Smaller right padding for sm size\n        },\n        trigger: {\n          top: \"50\",\n        },\n      },\n      md: {\n        group: {\n          height: \"1000\", // Match DateInput md height\n          pr: \"calc({spacing.1600} + {spacing.200} + {spacing.400})\", // Right padding for trigger buttons\n        },\n        trigger: {\n          top: \"100\",\n        },\n      },\n    },\n    variant: {\n      solid: {},\n      ghost: {\n        group: {\n          bg: \"transparent\",\n          px: \"300\",\n          _hover: {\n            bg: \"primary.2\",\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n    variant: \"solid\",\n  },\n});\n"],"names":["dateRangePickerSlotRecipe","defineSlotRecipe"],"mappings":"iDAEaA,EAA4BC,EAAAA,iBAAiB,CACxD,UAAW,2BACX,MAAO,CACL,OACA,QACA,UACA,UACA,WACA,iBACA,eACA,cAAA,EAEF,KAAM,CACJ,KAAM,CACJ,QAAS,cAAA,EAGX,MAAO,CACL,iBAAkB,aAClB,iBAAkB,qBAIlB,QAAS,OACT,WAAY,SACZ,eAAgB,aAChB,UAAW,sDACX,aAAc,MACd,GAAI,YACJ,GAAI,MACJ,IAAK,EACL,SAAU,WAKV,OAAQ,CACN,GAAI,WAAA,EAGN,aAAc,CACZ,aAAc,0BACd,aAAc,0BACd,aAAc,0BACd,cAAe,0BAAA,EAOjB,yBAA0B,CACxB,iBAAkB,aAClB,iBAAkB,sBAClB,MAAO,cACP,WAAY,QAAA,CACd,EAEF,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,CACR,KAAM,CACJ,GAAI,CACF,MAAO,CACL,OAAQ,MACR,GAAI,sCAAA,EAEN,QAAS,CACP,IAAK,IAAA,CACP,EAEF,GAAI,CACF,MAAO,CACL,OAAQ,OACR,GAAI,sDAAA,EAEN,QAAS,CACP,IAAK,KAAA,CACP,CACF,EAEF,QAAS,CACP,MAAO,CAAA,EACP,MAAO,CACL,MAAO,CACL,GAAI,cACJ,GAAI,MACJ,OAAQ,CACN,GAAI,WAAA,CACN,CACF,CACF,CACF,EAEF,gBAAiB,CACf,KAAM,KACN,QAAS,OAAA,CAEb,CAAC"}

package/dist/chunks/date-range-picker.recipe-CuI7inaU.es.js

@@ -0,0 +1,124 @@
+import { defineSlotRecipe as r } from "@chakra-ui/react";
+const o = /* @__PURE__ */ r({
+  className: "nimbus-date-range-picker",
+  slots: [
+    "root",
+    "group",
+    "trigger",
+    "popover",
+    "calendar",
+    "calendarHeader",
+    "calendarGrid",
+    "calendarCell"
+  ],
+  base: {
+    root: {
+      display: "inline-block"
+    },
+    group: {
+      "--border-width": "{sizes.25}",
+      "--border-color": "{colors.neutral.7}",
+      // ========================================
+      // BASE LAYOUT & VISUAL PROPERTIES
+      // ========================================
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
+      borderRadius: "200",
+      bg: "neutral.1",
+      px: "300",
+      gap: 0,
+      position: "relative",
+      // Ensure stacking context for border
+      // ========================================
+      // INTERACTIVE STATES
+      // ========================================
+      _hover: {
+        bg: "primary.2"
+      },
+      // Focus ring with transparent gap
+      _focusWithin: {
+        outlineWidth: "var(--focus-ring-width)",
+        outlineColor: "var(--focus-ring-color)",
+        outlineStyle: "var(--focus-ring-style)",
+        outlineOffset: "var(--focus-ring-offset)"
+      },
+      // ========================================
+      // DATA STATES
+      // ========================================
+      // Invalid state styling
+      "&[data-invalid='true']": {
+        "--border-width": "{sizes.50}",
+        "--border-color": "{colors.critical.7}",
+        color: "critical.11",
+        alignItems: "center"
+      }
+    },
+    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: {
+          height: "800",
+          // Match DateInput sm height
+          pr: "calc({spacing.1400} + {spacing.400})"
+          // Smaller right padding for sm size
+        },
+        trigger: {
+          top: "50"
+        }
+      },
+      md: {
+        group: {
+          height: "1000",
+          // Match DateInput md height
+          pr: "calc({spacing.1600} + {spacing.200} + {spacing.400})"
+          // Right padding for trigger buttons
+        },
+        trigger: {
+          top: "100"
+        }
+      }
+    },
+    variant: {
+      solid: {},
+      ghost: {
+        group: {
+          bg: "transparent",
+          px: "300",
+          _hover: {
+            bg: "primary.2"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "solid"
+  }
+});
+export {
+  o as d
+};
+//# sourceMappingURL=date-range-picker.recipe-CuI7inaU.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker.recipe-CuI7inaU.es.js","sources":["../../src/components/date-range-picker/date-range-picker.recipe.tsx"],"sourcesContent":["import { defineSlotRecipe } from \"@chakra-ui/react\";\n\nexport const dateRangePickerSlotRecipe = defineSlotRecipe({\n  className: \"nimbus-date-range-picker\",\n  slots: [\n    \"root\",\n    \"group\",\n    \"trigger\",\n    \"popover\",\n    \"calendar\",\n    \"calendarHeader\",\n    \"calendarGrid\",\n    \"calendarCell\",\n  ],\n  base: {\n    root: {\n      display: \"inline-block\",\n    },\n\n    group: {\n      \"--border-width\": \"{sizes.25}\",\n      \"--border-color\": \"{colors.neutral.7}\",\n      // ========================================\n      // BASE LAYOUT & VISUAL PROPERTIES\n      // ========================================\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"flex-start\",\n      boxShadow: \"inset 0 0 0 var(--border-width) var(--border-color)\",\n      borderRadius: \"200\",\n      bg: \"neutral.1\",\n      px: \"300\",\n      gap: 0,\n      position: \"relative\", // Ensure stacking context for border\n\n      // ========================================\n      // INTERACTIVE STATES\n      // ========================================\n      _hover: {\n        bg: \"primary.2\",\n      },\n      // Focus ring with transparent gap\n      _focusWithin: {\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\n      // ========================================\n      // DATA STATES\n      // ========================================\n      // Invalid state styling\n      \"&[data-invalid='true']\": {\n        \"--border-width\": \"{sizes.50}\",\n        \"--border-color\": \"{colors.critical.7}\",\n        color: \"critical.11\",\n        alignItems: \"center\",\n      },\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: {\n      sm: {\n        group: {\n          height: \"800\", // Match DateInput sm height\n          pr: \"calc({spacing.1400} + {spacing.400})\", // Smaller right padding for sm size\n        },\n        trigger: {\n          top: \"50\",\n        },\n      },\n      md: {\n        group: {\n          height: \"1000\", // Match DateInput md height\n          pr: \"calc({spacing.1600} + {spacing.200} + {spacing.400})\", // Right padding for trigger buttons\n        },\n        trigger: {\n          top: \"100\",\n        },\n      },\n    },\n    variant: {\n      solid: {},\n      ghost: {\n        group: {\n          bg: \"transparent\",\n          px: \"300\",\n          _hover: {\n            bg: \"primary.2\",\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n    variant: \"solid\",\n  },\n});\n"],"names":["dateRangePickerSlotRecipe","defineSlotRecipe"],"mappings":";AAEO,MAAMA,IAA4B,gBAAAC,EAAiB;AAAA,EACxD,WAAW;AAAA,EACX,OAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,MAAM;AAAA,IACJ,MAAM;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,IAGX,OAAO;AAAA,MACL,kBAAkB;AAAA,MAClB,kBAAkB;AAAA;AAAA;AAAA;AAAA,MAIlB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,cAAc;AAAA,MACd,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,MAKV,QAAQ;AAAA,QACN,IAAI;AAAA,MAAA;AAAA;AAAA,MAGN,cAAc;AAAA,QACZ,cAAc;AAAA,QACd,cAAc;AAAA,QACd,cAAc;AAAA,QACd,eAAe;AAAA,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOjB,0BAA0B;AAAA,QACxB,kBAAkB;AAAA,QAClB,kBAAkB;AAAA,QAClB,OAAO;AAAA,QACP,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,IAEF,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,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,QACF,OAAO;AAAA,UACL,QAAQ;AAAA;AAAA,UACR,IAAI;AAAA;AAAA,QAAA;AAAA,QAEN,SAAS;AAAA,UACP,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,MAEF,IAAI;AAAA,QACF,OAAO;AAAA,UACL,QAAQ;AAAA;AAAA,UACR,IAAI;AAAA;AAAA,QAAA;AAAA,QAEN,SAAS;AAAA,UACP,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,IACF;AAAA,IAEF,SAAS;AAAA,MACP,OAAO,CAAA;AAAA,MACP,OAAO;AAAA,QACL,OAAO;AAAA,UACL,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,QAAQ;AAAA,YACN,IAAI;AAAA,UAAA;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb,CAAC;"}

package/dist/chunks/dialog-C1HRMUcF.es.js

@@ -0,0 +1,33 @@
+import { jsxs as g, jsx as r } from "react/jsx-runtime";
+import { Dialog as o, Portal as c } from "@chakra-ui/react";
+const d = function(e) {
+  const {
+    children: t,
+    portalled: i = !0,
+    portalRef: n,
+    backdrop: a = !0,
+    ref: l,
+    ...s
+  } = e;
+  return /* @__PURE__ */ g(c, { disabled: !i, container: n, children: [
+    a && /* @__PURE__ */ r(o.Backdrop, {}),
+    /* @__PURE__ */ r(o.Positioner, { children: /* @__PURE__ */ r(o.Content, { ref: l, ...s, asChild: !1, children: t }) })
+  ] });
+}, C = {
+  Root: o.Root,
+  Trigger: o.Trigger,
+  Content: d,
+  Backdrop: o.Backdrop,
+  Positioner: o.Positioner,
+  Title: o.Title,
+  Description: o.Description,
+  Body: o.Body,
+  Footer: o.Footer,
+  Header: o.Header,
+  CloseTrigger: o.CloseTrigger,
+  ActionTrigger: o.ActionTrigger
+};
+export {
+  C as D
+};
+//# sourceMappingURL=dialog-C1HRMUcF.es.js.map

package/dist/chunks/dialog-C1HRMUcF.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-C1HRMUcF.es.js","sources":["../../src/components/dialog/dialog.tsx"],"sourcesContent":["import { Dialog as ChakraDialog, Portal } from \"@chakra-ui/react\";\n\ninterface DialogContentProps extends ChakraDialog.ContentProps {\n  portalled?: boolean;\n  portalRef?: React.RefObject<HTMLElement>;\n  backdrop?: boolean;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst DialogContent = function DialogContent(props: DialogContentProps) {\n  const {\n    children,\n    portalled = true,\n    portalRef,\n    backdrop = true,\n    ref,\n    ...rest\n  } = props;\n\n  return (\n    <Portal disabled={!portalled} container={portalRef}>\n      {backdrop && <ChakraDialog.Backdrop />}\n      <ChakraDialog.Positioner>\n        <ChakraDialog.Content ref={ref} {...rest} asChild={false}>\n          {children}\n        </ChakraDialog.Content>\n      </ChakraDialog.Positioner>\n    </Portal>\n  );\n};\n\n// Create a type-safe composite object with explicit component definitions\ninterface DialogComponents {\n  Root: typeof ChakraDialog.Root;\n  Trigger: typeof ChakraDialog.Trigger;\n  Content: typeof DialogContent;\n  Backdrop: typeof ChakraDialog.Backdrop;\n  Positioner: typeof ChakraDialog.Positioner;\n  Title: typeof ChakraDialog.Title;\n  Description: typeof ChakraDialog.Description;\n  Body: typeof ChakraDialog.Body;\n  Footer: typeof ChakraDialog.Footer;\n  Header: typeof ChakraDialog.Header;\n  CloseTrigger: typeof ChakraDialog.CloseTrigger;\n  ActionTrigger: typeof ChakraDialog.ActionTrigger;\n}\n\n/**\n * @experimental This component is experimental and may change or be removed in future versions.\n */\n// Export the Dialog composite with proper typing\nexport const Dialog: DialogComponents = {\n  Root: ChakraDialog.Root,\n  Trigger: ChakraDialog.Trigger,\n  Content: DialogContent,\n  Backdrop: ChakraDialog.Backdrop,\n  Positioner: ChakraDialog.Positioner,\n  Title: ChakraDialog.Title,\n  Description: ChakraDialog.Description,\n  Body: ChakraDialog.Body,\n  Footer: ChakraDialog.Footer,\n  Header: ChakraDialog.Header,\n  CloseTrigger: ChakraDialog.CloseTrigger,\n  ActionTrigger: ChakraDialog.ActionTrigger,\n};\n"],"names":["DialogContent","props","children","portalled","portalRef","backdrop","ref","rest","Portal","jsx","ChakraDialog","Dialog"],"mappings":";;AASA,MAAMA,IAAgB,SAAuBC,GAA2B;AACtE,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,WAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,KAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDN;AAEJ,2BACGO,GAAA,EAAO,UAAU,CAACL,GAAW,WAAWC,GACtC,UAAA;AAAA,IAAAC,KAAY,gBAAAI,EAACC,EAAa,UAAb,CAAA,CAAsB;AAAA,IACpC,gBAAAD,EAACC,EAAa,YAAb,EACC,4BAACA,EAAa,SAAb,EAAqB,KAAAJ,GAAW,GAAGC,GAAM,SAAS,IAChD,UAAAL,GACH,EAAA,CACF;AAAA,EAAA,GACF;AAEJ,GAsBaS,IAA2B;AAAA,EACtC,MAAMD,EAAa;AAAA,EACnB,SAASA,EAAa;AAAA,EACtB,SAASV;AAAA,EACT,UAAUU,EAAa;AAAA,EACvB,YAAYA,EAAa;AAAA,EACzB,OAAOA,EAAa;AAAA,EACpB,aAAaA,EAAa;AAAA,EAC1B,MAAMA,EAAa;AAAA,EACnB,QAAQA,EAAa;AAAA,EACrB,QAAQA,EAAa;AAAA,EACrB,cAAcA,EAAa;AAAA,EAC3B,eAAeA,EAAa;AAC9B;"}

package/dist/chunks/dialog-amEwvIoM.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const i=require("react/jsx-runtime"),o=require("@chakra-ui/react"),s=function(e){const{children:r,portalled:t=!0,portalRef:a,backdrop:l=!0,ref:g,...n}=e;return i.jsxs(o.Portal,{disabled:!t,container:a,children:[l&&i.jsx(o.Dialog.Backdrop,{}),i.jsx(o.Dialog.Positioner,{children:i.jsx(o.Dialog.Content,{ref:g,...n,asChild:!1,children:r})})]})},c={Root:o.Dialog.Root,Trigger:o.Dialog.Trigger,Content:s,Backdrop:o.Dialog.Backdrop,Positioner:o.Dialog.Positioner,Title:o.Dialog.Title,Description:o.Dialog.Description,Body:o.Dialog.Body,Footer:o.Dialog.Footer,Header:o.Dialog.Header,CloseTrigger:o.Dialog.CloseTrigger,ActionTrigger:o.Dialog.ActionTrigger};exports.Dialog=c;
+//# sourceMappingURL=dialog-amEwvIoM.cjs.js.map

package/dist/chunks/dialog-amEwvIoM.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-amEwvIoM.cjs.js","sources":["../../src/components/dialog/dialog.tsx"],"sourcesContent":["import { Dialog as ChakraDialog, Portal } from \"@chakra-ui/react\";\n\ninterface DialogContentProps extends ChakraDialog.ContentProps {\n  portalled?: boolean;\n  portalRef?: React.RefObject<HTMLElement>;\n  backdrop?: boolean;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst DialogContent = function DialogContent(props: DialogContentProps) {\n  const {\n    children,\n    portalled = true,\n    portalRef,\n    backdrop = true,\n    ref,\n    ...rest\n  } = props;\n\n  return (\n    <Portal disabled={!portalled} container={portalRef}>\n      {backdrop && <ChakraDialog.Backdrop />}\n      <ChakraDialog.Positioner>\n        <ChakraDialog.Content ref={ref} {...rest} asChild={false}>\n          {children}\n        </ChakraDialog.Content>\n      </ChakraDialog.Positioner>\n    </Portal>\n  );\n};\n\n// Create a type-safe composite object with explicit component definitions\ninterface DialogComponents {\n  Root: typeof ChakraDialog.Root;\n  Trigger: typeof ChakraDialog.Trigger;\n  Content: typeof DialogContent;\n  Backdrop: typeof ChakraDialog.Backdrop;\n  Positioner: typeof ChakraDialog.Positioner;\n  Title: typeof ChakraDialog.Title;\n  Description: typeof ChakraDialog.Description;\n  Body: typeof ChakraDialog.Body;\n  Footer: typeof ChakraDialog.Footer;\n  Header: typeof ChakraDialog.Header;\n  CloseTrigger: typeof ChakraDialog.CloseTrigger;\n  ActionTrigger: typeof ChakraDialog.ActionTrigger;\n}\n\n/**\n * @experimental This component is experimental and may change or be removed in future versions.\n */\n// Export the Dialog composite with proper typing\nexport const Dialog: DialogComponents = {\n  Root: ChakraDialog.Root,\n  Trigger: ChakraDialog.Trigger,\n  Content: DialogContent,\n  Backdrop: ChakraDialog.Backdrop,\n  Positioner: ChakraDialog.Positioner,\n  Title: ChakraDialog.Title,\n  Description: ChakraDialog.Description,\n  Body: ChakraDialog.Body,\n  Footer: ChakraDialog.Footer,\n  Header: ChakraDialog.Header,\n  CloseTrigger: ChakraDialog.CloseTrigger,\n  ActionTrigger: ChakraDialog.ActionTrigger,\n};\n"],"names":["DialogContent","props","children","portalled","portalRef","backdrop","ref","rest","Portal","jsx","ChakraDialog","Dialog"],"mappings":"gFASMA,EAAgB,SAAuBC,EAA2B,CACtE,KAAM,CACJ,SAAAC,EACA,UAAAC,EAAY,GACZ,UAAAC,EACA,SAAAC,EAAW,GACX,IAAAC,EACA,GAAGC,CAAA,EACDN,EAEJ,cACGO,EAAAA,OAAA,CAAO,SAAU,CAACL,EAAW,UAAWC,EACtC,SAAA,CAAAC,GAAYI,EAAAA,IAACC,SAAa,SAAb,CAAA,CAAsB,EACpCD,EAAAA,IAACC,EAAAA,OAAa,WAAb,CACC,eAACA,EAAAA,OAAa,QAAb,CAAqB,IAAAJ,EAAW,GAAGC,EAAM,QAAS,GAChD,SAAAL,EACH,CAAA,CACF,CAAA,EACF,CAEJ,EAsBaS,EAA2B,CACtC,KAAMD,EAAAA,OAAa,KACnB,QAASA,EAAAA,OAAa,QACtB,QAASV,EACT,SAAUU,EAAAA,OAAa,SACvB,WAAYA,EAAAA,OAAa,WACzB,MAAOA,EAAAA,OAAa,MACpB,YAAaA,EAAAA,OAAa,YAC1B,KAAMA,EAAAA,OAAa,KACnB,OAAQA,EAAAA,OAAa,OACrB,OAAQA,EAAAA,OAAa,OACrB,aAAcA,EAAAA,OAAa,aAC3B,cAAeA,EAAAA,OAAa,aAC9B"}

package/dist/chunks/divider-CifCuFCu.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const l=require("react/jsx-runtime"),p=require("react"),r=require("@chakra-ui/react"),b=require("./useObjectRef-4v2MxSjQ.cjs.js"),u=require("./mergeProps-VvQrkhSh.cjs.js"),h=require("./useSeparator-CZKjqF0N.cjs.js"),x=r.defineRecipe({className:"nimbus-divider",base:{border:"none",flexShrink:"0",color:"neutral",borderColor:"colorPalette.6"},variants:{orientation:{horizontal:{width:"100%",height:"1px",borderTopWidth:"1px",borderTopStyle:"solid",borderLeftWidth:"0"},vertical:{height:"100%",width:"1px",borderLeftWidth:"1px",borderLeftStyle:"solid",borderTopWidth:"0"}}},defaultVariants:{orientation:"horizontal"}}),{withContext:R}=r.createRecipeContext({recipe:x}),$=R("div"),o=i=>{const{ref:n,as:s,orientation:e="horizontal",...t}=i,a=p.useRef(null),d=b.$df56164dff5785e2$export$4338b53315abf666(r.mergeRefs(a,n)),c=s||"div",{separatorProps:f}=h.$f4b273590fab9f93$export$52210f68a14655d0({orientation:e,...t});return l.jsx($,{as:c,...u.$3ef42575df84b30b$export$9d1611c77c2fe928(t,{ref:d,orientation:e},f,{"aria-orientation":e})})};o.displayName="Divider";exports.Divider=o;
+//# sourceMappingURL=divider-CifCuFCu.cjs.js.map

package/dist/chunks/divider-CifCuFCu.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider-CifCuFCu.cjs.js","sources":["../../src/components/divider/divider.recipe.ts","../../src/components/divider/divider.slots.tsx","../../src/components/divider/divider.tsx"],"sourcesContent":["import { defineRecipe } from \"@chakra-ui/react\";\n\n/**\n * Recipe configuration for the Divider component.\n * Defines the styling variants and base styles using Chakra UI's recipe system.\n */\nexport const dividerRecipe = defineRecipe({\n  className: \"nimbus-divider\",\n\n  // Base styles applied to all instances of the component\n  base: {\n    border: \"none\",\n    flexShrink: \"0\",\n    color: \"neutral\",\n    borderColor: \"colorPalette.6\",\n  },\n\n  // Available variants for customizing the component's appearance\n  variants: {\n    orientation: {\n      horizontal: {\n        width: \"100%\",\n        height: \"1px\",\n        borderTopWidth: \"1px\",\n        borderTopStyle: \"solid\",\n        borderLeftWidth: \"0\",\n      },\n      vertical: {\n        height: \"100%\",\n        width: \"1px\",\n        borderLeftWidth: \"1px\",\n        borderLeftStyle: \"solid\",\n        borderTopWidth: \"0\",\n      },\n    },\n  },\n\n  // Default variant values when not explicitly specified\n  defaultVariants: {\n    orientation: \"horizontal\",\n  },\n});\n","import { createRecipeContext } from \"@chakra-ui/react\";\n\nimport { dividerRecipe } from \"./divider.recipe\";\nimport type { DividerRootProps } from \"./divider.types\";\n\nconst { withContext } = createRecipeContext({ recipe: dividerRecipe });\n\nexport const DividerRoot = withContext<HTMLDivElement, DividerRootProps>(\"div\");\n","import { useRef } from \"react\";\nimport { useSeparator, useObjectRef, mergeProps } from \"react-aria\";\nimport { mergeRefs } from \"@chakra-ui/react\";\nimport { DividerRoot } from \"./divider.slots\";\nimport type { DividerProps } from \"./divider.types\";\n\n/**\n * Divider\n * ============================================================\n * A visual separator that divides content sections\n *\n * Features:\n *\n * - allows forwarding refs to the underlying DOM element\n * - accepts all native html 'HTMLDivElement' attributes (including aria- & data-attributes)\n * - supports 'variants', 'orientation', etc. configured in the recipe\n * - allows overriding styles by using style-props\n * - supports 'asChild' and 'as' to modify the underlying html-element (polymorphic)\n * - built with React Aria for accessibility\n */\n\nexport const Divider = (props: DividerProps) => {\n  const { ref: forwardedRef, as, orientation = \"horizontal\", ...rest } = props;\n\n  const localRef = useRef<HTMLDivElement>(null);\n  const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n\n  const elementType = as || \"div\";\n\n  // Use React Aria's useSeparator hook for accessibility\n  const { separatorProps } = useSeparator({\n    orientation,\n    ...rest,\n  });\n\n  return (\n    <DividerRoot\n      as={elementType}\n      {...mergeProps(rest, { ref, orientation }, separatorProps, {\n        \"aria-orientation\": orientation,\n      })}\n    />\n  );\n};\n\nDivider.displayName = \"Divider\";\n"],"names":["dividerRecipe","defineRecipe","withContext","createRecipeContext","DividerRoot","Divider","props","forwardedRef","as","orientation","rest","localRef","useRef","ref","useObjectRef","mergeRefs","elementType","separatorProps","useSeparator","jsx","mergeProps"],"mappings":"qOAMaA,EAAgBC,EAAAA,aAAa,CACxC,UAAW,iBAGX,KAAM,CACJ,OAAQ,OACR,WAAY,IACZ,MAAO,UACP,YAAa,gBAAA,EAIf,SAAU,CACR,YAAa,CACX,WAAY,CACV,MAAO,OACP,OAAQ,MACR,eAAgB,MAChB,eAAgB,QAChB,gBAAiB,GAAA,EAEnB,SAAU,CACR,OAAQ,OACR,MAAO,MACP,gBAAiB,MACjB,gBAAiB,QACjB,eAAgB,GAAA,CAClB,CACF,EAIF,gBAAiB,CACf,YAAa,YAAA,CAEjB,CAAC,ECpCK,CAAE,YAAAC,CAAA,EAAgBC,EAAAA,oBAAoB,CAAE,OAAQH,EAAe,EAExDI,EAAcF,EAA8C,KAAK,ECcjEG,EAAWC,GAAwB,CAC9C,KAAM,CAAE,IAAKC,EAAc,GAAAC,EAAI,YAAAC,EAAc,aAAc,GAAGC,GAASJ,EAEjEK,EAAWC,EAAAA,OAAuB,IAAI,EACtCC,EAAMC,EAAAA,0CAAaC,EAAAA,UAAUJ,EAAUJ,CAAY,CAAC,EAEpDS,EAAcR,GAAM,MAGpB,CAAE,eAAAS,CAAA,EAAmBC,4CAAa,CACtC,YAAAT,EACA,GAAGC,CAAA,CACJ,EAED,OACES,EAAAA,IAACf,EAAA,CACC,GAAIY,EACH,GAAGI,EAAAA,0CAAWV,EAAM,CAAE,IAAAG,EAAK,YAAAJ,CAAA,EAAeQ,EAAgB,CACzD,mBAAoBR,CAAA,CACrB,CAAA,CAAA,CAGP,EAEAJ,EAAQ,YAAc"}

package/dist/chunks/divider-Js2LpOHh.es.js

@@ -0,0 +1,58 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useRef as p } from "react";
+import { defineRecipe as l, createRecipeContext as c, mergeRefs as m } from "@chakra-ui/react";
+import { $ as b } from "./useObjectRef-CaJ5pgjX.es.js";
+import { $ as h } from "./mergeProps-Bn6EInU5.es.js";
+import { $ as x } from "./useSeparator-g1ilWvTX.es.js";
+const $ = /* @__PURE__ */ l({
+  className: "nimbus-divider",
+  // Base styles applied to all instances of the component
+  base: {
+    border: "none",
+    flexShrink: "0",
+    color: "neutral",
+    borderColor: "colorPalette.6"
+  },
+  // Available variants for customizing the component's appearance
+  variants: {
+    orientation: {
+      horizontal: {
+        width: "100%",
+        height: "1px",
+        borderTopWidth: "1px",
+        borderTopStyle: "solid",
+        borderLeftWidth: "0"
+      },
+      vertical: {
+        height: "100%",
+        width: "1px",
+        borderLeftWidth: "1px",
+        borderLeftStyle: "solid",
+        borderTopWidth: "0"
+      }
+    }
+  },
+  // Default variant values when not explicitly specified
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+}), { withContext: v } = /* @__PURE__ */ c({ recipe: $ }), R = /* @__PURE__ */ v("div"), u = (r) => {
+  const { ref: t, as: i, orientation: e = "horizontal", ...o } = r, a = p(null), d = b(m(a, t)), n = i || "div", { separatorProps: f } = x({
+    orientation: e,
+    ...o
+  });
+  return /* @__PURE__ */ s(
+    R,
+    {
+      as: n,
+      ...h(o, { ref: d, orientation: e }, f, {
+        "aria-orientation": e
+      })
+    }
+  );
+};
+u.displayName = "Divider";
+export {
+  u as D
+};
+//# sourceMappingURL=divider-Js2LpOHh.es.js.map

package/dist/chunks/divider-Js2LpOHh.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider-Js2LpOHh.es.js","sources":["../../src/components/divider/divider.recipe.ts","../../src/components/divider/divider.slots.tsx","../../src/components/divider/divider.tsx"],"sourcesContent":["import { defineRecipe } from \"@chakra-ui/react\";\n\n/**\n * Recipe configuration for the Divider component.\n * Defines the styling variants and base styles using Chakra UI's recipe system.\n */\nexport const dividerRecipe = defineRecipe({\n  className: \"nimbus-divider\",\n\n  // Base styles applied to all instances of the component\n  base: {\n    border: \"none\",\n    flexShrink: \"0\",\n    color: \"neutral\",\n    borderColor: \"colorPalette.6\",\n  },\n\n  // Available variants for customizing the component's appearance\n  variants: {\n    orientation: {\n      horizontal: {\n        width: \"100%\",\n        height: \"1px\",\n        borderTopWidth: \"1px\",\n        borderTopStyle: \"solid\",\n        borderLeftWidth: \"0\",\n      },\n      vertical: {\n        height: \"100%\",\n        width: \"1px\",\n        borderLeftWidth: \"1px\",\n        borderLeftStyle: \"solid\",\n        borderTopWidth: \"0\",\n      },\n    },\n  },\n\n  // Default variant values when not explicitly specified\n  defaultVariants: {\n    orientation: \"horizontal\",\n  },\n});\n","import { createRecipeContext } from \"@chakra-ui/react\";\n\nimport { dividerRecipe } from \"./divider.recipe\";\nimport type { DividerRootProps } from \"./divider.types\";\n\nconst { withContext } = createRecipeContext({ recipe: dividerRecipe });\n\nexport const DividerRoot = withContext<HTMLDivElement, DividerRootProps>(\"div\");\n","import { useRef } from \"react\";\nimport { useSeparator, useObjectRef, mergeProps } from \"react-aria\";\nimport { mergeRefs } from \"@chakra-ui/react\";\nimport { DividerRoot } from \"./divider.slots\";\nimport type { DividerProps } from \"./divider.types\";\n\n/**\n * Divider\n * ============================================================\n * A visual separator that divides content sections\n *\n * Features:\n *\n * - allows forwarding refs to the underlying DOM element\n * - accepts all native html 'HTMLDivElement' attributes (including aria- & data-attributes)\n * - supports 'variants', 'orientation', etc. configured in the recipe\n * - allows overriding styles by using style-props\n * - supports 'asChild' and 'as' to modify the underlying html-element (polymorphic)\n * - built with React Aria for accessibility\n */\n\nexport const Divider = (props: DividerProps) => {\n  const { ref: forwardedRef, as, orientation = \"horizontal\", ...rest } = props;\n\n  const localRef = useRef<HTMLDivElement>(null);\n  const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n\n  const elementType = as || \"div\";\n\n  // Use React Aria's useSeparator hook for accessibility\n  const { separatorProps } = useSeparator({\n    orientation,\n    ...rest,\n  });\n\n  return (\n    <DividerRoot\n      as={elementType}\n      {...mergeProps(rest, { ref, orientation }, separatorProps, {\n        \"aria-orientation\": orientation,\n      })}\n    />\n  );\n};\n\nDivider.displayName = \"Divider\";\n"],"names":["dividerRecipe","defineRecipe","withContext","createRecipeContext","DividerRoot","Divider","props","forwardedRef","as","orientation","rest","localRef","useRef","ref","useObjectRef","mergeRefs","elementType","separatorProps","useSeparator","jsx","mergeProps"],"mappings":";;;;;;AAMO,MAAMA,IAAgB,gBAAAC,EAAa;AAAA,EACxC,WAAW;AAAA;AAAA,EAGX,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,aAAa;AAAA,EAAA;AAAA;AAAA,EAIf,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY;AAAA,QACV,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,QAChB,iBAAiB;AAAA,MAAA;AAAA,MAEnB,UAAU;AAAA,QACR,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,EACF;AAAA;AAAA,EAIF,iBAAiB;AAAA,IACf,aAAa;AAAA,EAAA;AAEjB,CAAC,GCpCK,EAAE,aAAAC,EAAA,IAAgB,gBAAAC,EAAoB,EAAE,QAAQH,GAAe,GAExDI,IAAc,gBAAAF,EAA8C,KAAK,GCcjEG,IAAU,CAACC,MAAwB;AAC9C,QAAM,EAAE,KAAKC,GAAc,IAAAC,GAAI,aAAAC,IAAc,cAAc,GAAGC,MAASJ,GAEjEK,IAAWC,EAAuB,IAAI,GACtCC,IAAMC,EAAaC,EAAUJ,GAAUJ,CAAY,CAAC,GAEpDS,IAAcR,KAAM,OAGpB,EAAE,gBAAAS,EAAA,IAAmBC,EAAa;AAAA,IACtC,aAAAT;AAAA,IACA,GAAGC;AAAA,EAAA,CACJ;AAED,SACE,gBAAAS;AAAA,IAACf;AAAA,IAAA;AAAA,MACC,IAAIY;AAAA,MACH,GAAGI,EAAWV,GAAM,EAAE,KAAAG,GAAK,aAAAJ,EAAA,GAAeQ,GAAgB;AAAA,QACzD,oBAAoBR;AAAA,MAAA,CACrB;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAJ,EAAQ,cAAc;"}