@cloudflare/kumo 1.19.0 → 2.0.0

package/dist/chunks/{date-range-picker-j318zxjyqz4o3dak.js → date-range-picker-c9wnx9tbwohai7jy.js}

@@ -2,7 +2,7 @@
 import { jsxs as M, jsx as i } from "react/jsx-runtime";
 import { CaretLeftIcon as L, CaretRightIcon as K, GlobeHemisphereWestIcon as P } from "@phosphor-icons/react";
 import { useState as C, useCallback as p } from "react";
-import { c as b } from "./cn-ct4n7r74mh8y0f48.js";
+import { c as f } from "./cn-ct4n7r74mh8y0f48.js";
 const _ = {
   size: {
     sm: {
@@ -51,7 +51,7 @@ function U({
   size: c = k.size,
   variant: u = k.variant
 } = {}) {
-  return b(
+  return f(
     // Base styles
     "flex w-fit flex-col rounded-xl select-none",
     // Apply variant and size styles
@@ -71,10 +71,10 @@ function J({
   timezone: d = "New York, NY, USA (GMT-4)",
   className: h
 }) {
-  const [r, A] = C(null), [s, x] = C(null), [n, E] = C(/* @__PURE__ */ new Date()), [v, w] = C(null), z = y(g), R = (a) => {
-    A(a), c(a);
+  const [r, x] = C(null), [s, A] = C(null), [n, E] = C(/* @__PURE__ */ new Date()), [v, w] = C(null), z = y(g), R = (a) => {
+    x(a), c(a);
   }, W = (a) => {
-    x(a), u(a);
+    A(a), u(a);
   }, T = p((a, e) => {
     const t = new Date(a);
     return t.setMonth(t.getMonth() + (e || 0)), t.toLocaleString("default", { month: "long" });
@@ -87,7 +87,7 @@ function J({
       return t.setDate(1), t.setMonth(t.getMonth() + (e || 0)), t.getDay();
     },
     []
-  ), f = p(
+  ), b = p(
     (a, e) => {
       const t = new Date(a);
       return t.setDate(1), t.setMonth(t.getMonth() + (e || 0)), t.setMonth(t.getMonth() + 1), t.setDate(0), t.getDate();
@@ -104,21 +104,21 @@ function J({
       if (t < S) {
         const l = new Date(a);
         return l.setMonth(l.getMonth() + e), l.setDate(1), l.setDate(l.getDate() - (S - t)), l;
-      } else if (t > f(a, e) + S - 1) {
+      } else if (t > b(a, e) + S - 1) {
         const l = new Date(a);
         return l.setMonth(l.getMonth() + e), l.setMonth(l.getMonth() + 1), l.setDate(
-          t - f(a, e) - S + 1
+          t - b(a, e) - S + 1
         ), l;
       } else {
         const l = new Date(a);
         return l.setMonth(l.getMonth() + e), l.setDate(t - S + 1), l;
       }
     },
-    [m, f]
+    [m, b]
   ), N = p((a, e) => !a || !e ? !1 : a.toDateString() === e.toDateString(), []);
-  return /* @__PURE__ */ M("div", { className: b(U({ size: g, variant: D }), h), children: [
+  return /* @__PURE__ */ M("div", { className: f(U({ size: g, variant: D }), h), children: [
     /* @__PURE__ */ M("div", { className: "flex gap-4", children: [
-      /* @__PURE__ */ M("div", { className: b("relative", z.calendarWidth), children: [
+      /* @__PURE__ */ M("div", { className: f("relative", z.calendarWidth), children: [
         /* @__PURE__ */ i(
           "button",
           {
@@ -147,11 +147,11 @@ function J({
             size: g,
             mode: (
               // After current month range
-              r && s && o(n, 0, e) >= r && o(n, 0, e) <= s && e > f(n, 0) + m(n, 0) - 1 || // Before current month range
+              r && s && o(n, 0, e) >= r && o(n, 0, e) <= s && e > b(n, 0) + m(n, 0) - 1 || // Before current month range
               r && s && o(n, 0, e) >= r && o(n, 0, e) <= s && e < m(n, 0) ? 5 : (
                 // Before current month range
                 e < m(n, 0) || // After current month range
-                e > f(n, 0) + m(n, 0) - 1 ? 0 : (
+                e > b(n, 0) + m(n, 0) - 1 ? 0 : (
                   // Selected start date
                   N(
                     o(n, 0, e),
@@ -183,7 +183,7 @@ function J({
           e
         )) })
       ] }),
-      /* @__PURE__ */ M("div", { className: b("relative", z.calendarWidth), children: [
+      /* @__PURE__ */ M("div", { className: f("relative", z.calendarWidth), children: [
         /* @__PURE__ */ i(
           "button",
           {
@@ -213,11 +213,11 @@ function J({
             size: g,
             mode: (
               // After current month range
-              r && s && o(n, 1, e) >= r && o(n, 1, e) <= s && e > f(n, 1) + m(n, 1) - 1 || // Before current month range
+              r && s && o(n, 1, e) >= r && o(n, 1, e) <= s && e > b(n, 1) + m(n, 1) - 1 || // Before current month range
               r && s && o(n, 1, e) >= r && o(n, 1, e) <= s && e < m(n, 1) ? 5 : (
                 // Before current month range
                 e < m(n, 1) || // After current month range
-                e > f(n, 1) + m(n, 1) - 1 ? 0 : (
+                e > b(n, 1) + m(n, 1) - 1 ? 0 : (
                   // Selected start date
                   N(
                     o(n, 1, e),
@@ -269,7 +269,7 @@ function F({
   onClick: D,
   isHoveringDate: d
 }) {
-  const h = y(g), r = p((n) => n.getDate(), []), A = p(() => {
+  const h = y(g), r = p((n) => n.getDate(), []), x = p(() => {
     switch (u) {
       case 0:
         return "bg-transparent";
@@ -295,7 +295,7 @@ function F({
       default:
         return "text-kumo-default";
     }
-  }, [u]), x = p(() => {
+  }, [u]), A = p(() => {
     const n = c.toLocaleDateString("en-US", {
       weekday: "long",
       month: "long",
@@ -317,16 +317,16 @@ function F({
     "button",
     {
       type: "button",
-      "aria-label": x(),
+      "aria-label": A(),
       id: c.toDateString(),
-      className: b(
+      className: f(
         h.cellHeight,
         h.cellWidth,
         h.textSize,
         "cursor-pointer text-center text-kumo-default transition-all duration-[50]",
         `leading-[${h.cellHeight.replace("h-[", "").replace("]", "")}]`,
         u !== 0 && u !== 5 ? "hover:bg-kumo-interact" : "",
-        A(),
+        x(),
         s()
       ),
       onClick: () => D?.(c),
@@ -349,8 +349,8 @@ function $({
       {
         "aria-label": "Edit month and year",
         defaultValue: `${c} ${u}`,
-        className: b(
-          "w-full rounded-md border-none bg-transparent py-1.5 text-center font-semibold text-kumo-default transition-all duration-200 focus:outline-none",
+        className: f(
+          "w-full rounded-md border-none bg-transparent py-1.5 text-center font-semibold text-kumo-default transition-all duration-200 focus:outline-none focus:ring-kumo-focus/50 focus:ring-[1.5px]",
           d.textSize
         ),
         onBlur: (h) => {
@@ -362,7 +362,7 @@ function $({
     /* @__PURE__ */ i("div", { className: "mt-2 grid grid-cols-7 gap-1", children: V.map((h) => /* @__PURE__ */ i(
       "div",
       {
-        className: b(
+        className: f(
           "h-[22px] text-center text-kumo-subtle",
           d.cellWidth,
           d.textSize
@@ -382,7 +382,7 @@ function Y({
   return /* @__PURE__ */ M(
     "div",
     {
-      className: b("flex items-center gap-2 text-kumo-strong", D.textSize),
+      className: f("flex items-center gap-2 text-kumo-strong", D.textSize),
       children: [
         /* @__PURE__ */ i(P, { size: D.iconSize }),
         /* @__PURE__ */ M("span", { className: "flex-1", children: [
@@ -405,4 +405,4 @@ function Y({
 export {
   J as D
 };
-//# sourceMappingURL=date-range-picker-j318zxjyqz4o3dak.js.map
+//# sourceMappingURL=date-range-picker-c9wnx9tbwohai7jy.js.map

package/dist/chunks/{date-range-picker-j318zxjyqz4o3dak.js.map → date-range-picker-c9wnx9tbwohai7jy.js.map}

@@ -1 +1 @@
-{"version":3,"file":"date-range-picker-j318zxjyqz4o3dak.js","sources":["../../src/components/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import {\n  CaretLeftIcon,\n  CaretRightIcon,\n  GlobeHemisphereWestIcon,\n} from \"@phosphor-icons/react\";\nimport { useCallback, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** DateRangePicker size and variant definitions mapping names to their Tailwind classes. */\nexport const KUMO_DATE_RANGE_PICKER_VARIANTS = {\n  size: {\n    sm: {\n      classes: \"p-3 gap-2\",\n      cellHeight: \"h-[22px]\",\n      cellWidth: \"w-6\",\n      calendarWidth: \"w-[168px]\",\n      textSize: \"text-xs\",\n      iconSize: 14,\n      description: \"Compact calendar for tight spaces\",\n    },\n    base: {\n      classes: \"p-4 gap-2.5\",\n      cellHeight: \"h-[26px]\",\n      cellWidth: \"w-7\",\n      calendarWidth: \"w-[196px]\",\n      textSize: \"text-sm\",\n      iconSize: 16,\n      description: \"Default calendar size\",\n    },\n    lg: {\n      classes: \"p-5 gap-3\",\n      cellHeight: \"h-[32px]\",\n      cellWidth: \"w-9\",\n      calendarWidth: \"w-[252px]\",\n      textSize: \"text-base\",\n      iconSize: 18,\n      description: \"Large calendar for prominent date selection\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"bg-kumo-overlay\",\n      description: \"Default calendar appearance\",\n    },\n    subtle: {\n      classes: \"bg-kumo-base\",\n      description: \"Subtle calendar with minimal background\",\n    },\n  },\n} as const;\n\nexport const KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\n// Derived types from KUMO_DATE_RANGE_PICKER_VARIANTS\nexport type KumoDateRangePickerSize =\n  keyof typeof KUMO_DATE_RANGE_PICKER_VARIANTS.size;\nexport type KumoDateRangePickerVariant =\n  keyof typeof KUMO_DATE_RANGE_PICKER_VARIANTS.variant;\n\nexport interface KumoDateRangePickerVariantsProps {\n  /**\n   * Calendar size.\n   * - `\"sm\"` — Compact calendar for tight spaces\n   * - `\"base\"` — Default calendar size\n   * - `\"lg\"` — Large calendar for prominent date selection\n   * @default \"base\"\n   */\n  size?: KumoDateRangePickerSize;\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard appearance with overlay background\n   * - `\"subtle\"` — Minimal background\n   * @default \"default\"\n   */\n  variant?: KumoDateRangePickerVariant;\n}\n\nexport function dateRangePickerVariants({\n  size = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  variant = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.variant,\n}: KumoDateRangePickerVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex w-fit flex-col rounded-xl select-none\",\n    // Apply variant and size styles\n    KUMO_DATE_RANGE_PICKER_VARIANTS.variant[variant].classes,\n    KUMO_DATE_RANGE_PICKER_VARIANTS.size[size].classes,\n  );\n}\n\n// Helper to get size config\nfunction getSizeConfig(size: KumoDateRangePickerSize) {\n  return KUMO_DATE_RANGE_PICKER_VARIANTS.size[size];\n}\n\nenum DateRangeCellMode {\n  OUT_OF_RANGE,\n  ENABLED,\n  SELECTED_START_NODE,\n  SELECTED_END_NODE,\n  SELECTED,\n  SELECTED_OUT_OF_RANGE,\n}\n\nconst DAYS_OF_WEEK = [\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"] as const;\n\n/**\n * DateRangePicker component props.\n *\n * Dual-calendar date range selector with hover preview, timezone display, and reset support.\n *\n * @example\n * ```tsx\n * <DateRangePicker\n *   onStartDateChange={(d) => setStart(d)}\n *   onEndDateChange={(d) => setEnd(d)}\n *   timezone=\"New York, NY, USA (GMT-4)\"\n * />\n *\n * // Compact variant\n * <DateRangePicker\n *   size=\"sm\"\n *   variant=\"subtle\"\n *   onStartDateChange={setStart}\n *   onEndDateChange={setEnd}\n * />\n * ```\n *\n * @deprecated Use {@link DatePicker} with `mode=\"range\"` instead.\n */\nexport interface DateRangePickerProps extends KumoDateRangePickerVariantsProps {\n  /** Callback fired when start date changes. Receives `null` on reset. */\n  onStartDateChange: (date: Date | null) => void;\n  /** Callback fired when end date changes. Receives `null` on reset. */\n  onEndDateChange: (date: Date | null) => void;\n  /**\n   * Display timezone string shown in the footer.\n   * @default \"New York, NY, USA (GMT-4)\"\n   */\n  timezone?: string;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}\n\n/**\n * DateRangePicker — dual-calendar date range selector.\n *\n * Renders two side-by-side month calendars with click-to-select start/end dates,\n * hover preview of the range, a timezone footer, and a reset button.\n *\n * @example\n * ```tsx\n * <DateRangePicker\n *   onStartDateChange={setStart}\n *   onEndDateChange={setEnd}\n * />\n * ```\n *\n * @deprecated Use {@link DatePicker} with `mode=\"range\"` instead.\n */\nexport function DateRangePicker({\n  onStartDateChange,\n  onEndDateChange,\n  size = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  variant = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.variant,\n  timezone = \"New York, NY, USA (GMT-4)\",\n  className,\n}: DateRangePickerProps) {\n  const [startDate, setStartDate] = useState<Date | null>(null);\n  const [endDate, setEndDate] = useState<Date | null>(null);\n  const [viewingMonth, setViewingMonth] = useState<Date>(new Date());\n  const [hoveringDate, setHoveringDate] = useState<Date | null>(null);\n\n  const sizeConfig = getSizeConfig(size);\n\n  const handleStartDateChange = (date: Date | null) => {\n    setStartDate(date);\n    onStartDateChange(date); // Pass the updated startDate to the parent component\n  };\n\n  const handleEndDateChange = (date: Date | null) => {\n    setEndDate(date);\n    onEndDateChange(date); // Pass the updated endDate to the parent component\n  };\n\n  const getMonthName = useCallback((date: Date, monthOffset?: number) => {\n    const copyDate = new Date(date);\n    copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n    return copyDate.toLocaleString(\"default\", { month: \"long\" });\n  }, []);\n\n  const getDateYear = useCallback((date: Date, monthOffset?: number) => {\n    const copyDate = new Date(date);\n    copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n    return copyDate.getFullYear();\n  }, []);\n\n  const getMonthsStartingDay = useCallback(\n    (date: Date, monthOffset?: number) => {\n      const copyDate = new Date(date);\n      copyDate.setDate(1);\n      copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n      return copyDate.getDay();\n    },\n    [],\n  );\n\n  const getNumberOfDaysInMonth = useCallback(\n    (date: Date, monthOffset?: number) => {\n      const copyDate = new Date(date);\n      copyDate.setDate(1);\n      copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n      copyDate.setMonth(copyDate.getMonth() + 1);\n      copyDate.setDate(0);\n      return copyDate.getDate();\n    },\n    [],\n  );\n\n  const adjustMonth = useCallback((monthOffset: number) => {\n    setViewingMonth((prev) => {\n      const newDate = new Date(prev);\n      newDate.setMonth(newDate.getMonth() + monthOffset);\n      return newDate;\n    });\n  }, []);\n\n  const getDateFromIndex = useCallback(\n    (date: Date, monthOffset: number, index: number) => {\n      const startingDay = getMonthsStartingDay(date, monthOffset);\n\n      if (index < startingDay) {\n        // Get the last day of the previous month\n        const previousMonth = new Date(date);\n        previousMonth.setMonth(previousMonth.getMonth() + monthOffset);\n        previousMonth.setDate(1);\n        previousMonth.setDate(previousMonth.getDate() - (startingDay - index));\n        return previousMonth;\n      } else if (\n        index >\n        getNumberOfDaysInMonth(date, monthOffset) + startingDay - 1\n      ) {\n        // Get the first day of the next month\n        const nextMonth = new Date(date);\n        nextMonth.setMonth(nextMonth.getMonth() + monthOffset);\n        nextMonth.setMonth(nextMonth.getMonth() + 1);\n        nextMonth.setDate(\n          index - getNumberOfDaysInMonth(date, monthOffset) - startingDay + 1,\n        );\n        return nextMonth;\n      } else {\n        // Get the current month's date\n        const newDate = new Date(date);\n        newDate.setMonth(newDate.getMonth() + monthOffset);\n        newDate.setDate(index - startingDay + 1);\n        return newDate;\n      }\n    },\n    [getMonthsStartingDay, getNumberOfDaysInMonth],\n  );\n\n  const isDateEqual = useCallback((date1: Date | null, date2: Date | null) => {\n    if (!date1 || !date2) return false;\n    return date1.toDateString() === date2.toDateString();\n  }, []);\n\n  return (\n    <div className={cn(dateRangePickerVariants({ size, variant }), className)}>\n      <div className=\"flex gap-4\">\n        <div className={cn(\"relative\", sizeConfig.calendarWidth)}>\n          <button\n            type=\"button\"\n            aria-label=\"Previous month\"\n            className=\"absolute top-0 left-0 cursor-pointer rounded bg-kumo-interact/85 p-1.5 hover:bg-kumo-interact\"\n            onClick={() => adjustMonth(-1)}\n          >\n            <CaretLeftIcon size={sizeConfig.iconSize} />\n          </button>\n\n          <DateRangeMonthHeader\n            month={getMonthName(viewingMonth)}\n            year={getDateYear(viewingMonth)}\n            size={size}\n            updateCurrentMonth={(dateString) => {\n              setViewingMonth(new Date(dateString));\n            }}\n          />\n\n          <div className=\"grid grid-cols-7 gap-0 gap-y-0.5\">\n            {Array.from({ length: 42 }).map((_, index) => (\n              <DateRangeDayCell\n                key={index}\n                date={getDateFromIndex(viewingMonth, 0, index)}\n                size={size}\n                mode={\n                  // After current month range\n                  (startDate &&\n                    endDate &&\n                    getDateFromIndex(viewingMonth, 0, index) >= startDate &&\n                    getDateFromIndex(viewingMonth, 0, index) <= endDate &&\n                    index >\n                    getNumberOfDaysInMonth(viewingMonth, 0) +\n                    getMonthsStartingDay(viewingMonth, 0) -\n                    1) ||\n                    // Before current month range\n                    (startDate &&\n                      endDate &&\n                      getDateFromIndex(viewingMonth, 0, index) >= startDate &&\n                      getDateFromIndex(viewingMonth, 0, index) <= endDate &&\n                      index < getMonthsStartingDay(viewingMonth, 0))\n                    ? DateRangeCellMode.SELECTED_OUT_OF_RANGE\n                    : // Before current month range\n                    index < getMonthsStartingDay(viewingMonth, 0)\n                      ? DateRangeCellMode.OUT_OF_RANGE\n                      : // After current month range\n                      index >\n                        getNumberOfDaysInMonth(viewingMonth, 0) +\n                        getMonthsStartingDay(viewingMonth, 0) -\n                        1\n                        ? DateRangeCellMode.OUT_OF_RANGE\n                        : // Selected start date\n                        isDateEqual(\n                          getDateFromIndex(viewingMonth, 0, index),\n                          startDate,\n                        )\n                          ? DateRangeCellMode.SELECTED_START_NODE\n                          : // Selected end date\n                          isDateEqual(\n                            getDateFromIndex(viewingMonth, 0, index),\n                            endDate,\n                          )\n                            ? DateRangeCellMode.SELECTED_END_NODE\n                            : // Selected date range\n                            startDate &&\n                              getDateFromIndex(viewingMonth, 0, index) >=\n                              startDate &&\n                              endDate &&\n                              getDateFromIndex(viewingMonth, 0, index) <=\n                              endDate\n                              ? DateRangeCellMode.SELECTED\n                              : // Hovering past a starting date and no end date selected\n                              startDate &&\n                                !endDate &&\n                                hoveringDate &&\n                                hoveringDate > startDate &&\n                                getDateFromIndex(viewingMonth, 0, index) <=\n                                hoveringDate &&\n                                getDateFromIndex(viewingMonth, 0, index) >\n                                startDate\n                                ? DateRangeCellMode.SELECTED\n                                : // Default to enabled date\n                                DateRangeCellMode.ENABLED\n                }\n                onClick={(date) => {\n                  if (!startDate || date < startDate) {\n                    handleStartDateChange(date);\n                    setHoveringDate(date);\n                  } else {\n                    handleEndDateChange(date);\n                  }\n                }}\n                isHoveringDate={(date) => {\n                  if (startDate && !endDate && date > startDate) {\n                    setHoveringDate(date);\n                  }\n                }}\n              />\n            ))}\n          </div>\n        </div>\n        <div className={cn(\"relative\", sizeConfig.calendarWidth)}>\n          <button\n            type=\"button\"\n            aria-label=\"Next month\"\n            className=\"absolute top-0 right-0 cursor-pointer rounded bg-kumo-interact/85 p-1.5 hover:bg-kumo-interact\"\n            onClick={() => adjustMonth(1)}\n          >\n            <CaretRightIcon size={sizeConfig.iconSize} />\n          </button>\n\n          <DateRangeMonthHeader\n            month={getMonthName(viewingMonth, 1)}\n            year={getDateYear(viewingMonth, 1)}\n            size={size}\n            updateCurrentMonth={(dateString) => {\n              const date = new Date(dateString);\n              date.setMonth(date.getMonth() - 1);\n              setViewingMonth(date);\n            }}\n          />\n\n          <div className=\"grid grid-cols-7 gap-0 gap-y-0.5\">\n            {Array.from({ length: 42 }).map((_, index) => (\n              <DateRangeDayCell\n                key={index}\n                date={getDateFromIndex(viewingMonth, 1, index)}\n                size={size}\n                mode={\n                  // After current month range\n                  (startDate &&\n                    endDate &&\n                    getDateFromIndex(viewingMonth, 1, index) >= startDate &&\n                    getDateFromIndex(viewingMonth, 1, index) <= endDate &&\n                    index >\n                    getNumberOfDaysInMonth(viewingMonth, 1) +\n                    getMonthsStartingDay(viewingMonth, 1) -\n                    1) ||\n                    // Before current month range\n                    (startDate &&\n                      endDate &&\n                      getDateFromIndex(viewingMonth, 1, index) >= startDate &&\n                      getDateFromIndex(viewingMonth, 1, index) <= endDate &&\n                      index < getMonthsStartingDay(viewingMonth, 1))\n                    ? DateRangeCellMode.SELECTED_OUT_OF_RANGE\n                    : // Before current month range\n                    index < getMonthsStartingDay(viewingMonth, 1)\n                      ? DateRangeCellMode.OUT_OF_RANGE\n                      : // After current month range\n                      index >\n                        getNumberOfDaysInMonth(viewingMonth, 1) +\n                        getMonthsStartingDay(viewingMonth, 1) -\n                        1\n                        ? DateRangeCellMode.OUT_OF_RANGE\n                        : // Selected start date\n                        isDateEqual(\n                          getDateFromIndex(viewingMonth, 1, index),\n                          startDate,\n                        )\n                          ? DateRangeCellMode.SELECTED_START_NODE\n                          : // Selected end date\n                          isDateEqual(\n                            getDateFromIndex(viewingMonth, 1, index),\n                            endDate,\n                          )\n                            ? DateRangeCellMode.SELECTED_END_NODE\n                            : // Selected date range\n                            startDate &&\n                              getDateFromIndex(viewingMonth, 1, index) >=\n                              startDate &&\n                              endDate &&\n                              getDateFromIndex(viewingMonth, 1, index) <=\n                              endDate\n                              ? DateRangeCellMode.SELECTED\n                              : // Hovering past a starting date and no end date selected\n                              startDate &&\n                                !endDate &&\n                                hoveringDate &&\n                                hoveringDate > startDate &&\n                                getDateFromIndex(viewingMonth, 1, index) <=\n                                hoveringDate &&\n                                getDateFromIndex(viewingMonth, 1, index) >\n                                startDate\n                                ? DateRangeCellMode.SELECTED\n                                : // Default to enabled date\n                                DateRangeCellMode.ENABLED\n                }\n                onClick={(date) => {\n                  if (!startDate || date < startDate) {\n                    handleStartDateChange(date);\n                    setHoveringDate(date);\n                  } else {\n                    handleEndDateChange(date);\n                  }\n                }}\n                isHoveringDate={(date) => {\n                  if (startDate && !endDate && date > startDate) {\n                    setHoveringDate(date);\n                  }\n                }}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n\n      <DateRangeFooter\n        timezone={timezone}\n        size={size}\n        reset={() => {\n          handleStartDateChange(null);\n          handleEndDateChange(null);\n        }}\n      />\n    </div>\n  );\n}\n\nfunction DateRangeDayCell({\n  date,\n  mode,\n  size = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  onClick,\n  isHoveringDate,\n}: {\n  date: Date;\n  mode?: DateRangeCellMode;\n  size?: KumoDateRangePickerSize;\n  onClick?: (date: Date) => void;\n  isHoveringDate?: (date: Date) => void;\n}) {\n  const sizeConfig = getSizeConfig(size);\n\n  const getDateNumberFromDate = useCallback((date: Date) => {\n    return date.getDate();\n  }, []);\n\n  const getBackgroundColor = useCallback(() => {\n    switch (mode) {\n      case DateRangeCellMode.OUT_OF_RANGE:\n        return \"bg-transparent\";\n      case DateRangeCellMode.ENABLED:\n        return \"bg-transparent\";\n      case DateRangeCellMode.SELECTED_START_NODE:\n        return \"!bg-kumo-contrast rounded-tl-[5px] rounded-bl-[5px]\";\n      case DateRangeCellMode.SELECTED_END_NODE:\n        return \"!bg-kumo-contrast rounded-tr-[5px] rounded-br-[5px]\";\n      case DateRangeCellMode.SELECTED:\n        return \"bg-kumo-interact\";\n      case DateRangeCellMode.SELECTED_OUT_OF_RANGE:\n        return \"bg-kumo-fill\";\n    }\n  }, [mode]);\n\n  const getTextColor = useCallback(() => {\n    switch (mode) {\n      case DateRangeCellMode.OUT_OF_RANGE:\n      case DateRangeCellMode.SELECTED_OUT_OF_RANGE:\n        return \"!text-kumo-strong\";\n      case DateRangeCellMode.SELECTED_START_NODE:\n      case DateRangeCellMode.SELECTED_END_NODE:\n        return \"!text-kumo-inverse\";\n      default:\n        return \"text-kumo-default\";\n    }\n  }, [mode]);\n\n  const getAriaLabel = useCallback(() => {\n    const dateStr = date.toLocaleDateString(\"en-US\", {\n      weekday: \"long\",\n      month: \"long\",\n      day: \"numeric\",\n      year: \"numeric\",\n    });\n    switch (mode) {\n      case DateRangeCellMode.SELECTED_START_NODE:\n        return `${dateStr}, selected as start date`;\n      case DateRangeCellMode.SELECTED_END_NODE:\n        return `${dateStr}, selected as end date`;\n      case DateRangeCellMode.SELECTED:\n        return `${dateStr}, within selected range`;\n      default:\n        return dateStr;\n    }\n  }, [date, mode]);\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={getAriaLabel()}\n      id={date.toDateString()}\n      className={cn(\n        sizeConfig.cellHeight,\n        sizeConfig.cellWidth,\n        sizeConfig.textSize,\n        \"cursor-pointer text-center text-kumo-default transition-all duration-[50]\",\n        `leading-[${sizeConfig.cellHeight.replace(\"h-[\", \"\").replace(\"]\", \"\")}]`,\n        mode !== DateRangeCellMode.OUT_OF_RANGE &&\n          mode !== DateRangeCellMode.SELECTED_OUT_OF_RANGE\n          ? \"hover:bg-kumo-interact\"\n          : \"\",\n        getBackgroundColor(),\n        getTextColor(),\n      )}\n      onClick={() => onClick?.(date)}\n      onMouseOver={() => isHoveringDate?.(date)}\n      onFocus={() => isHoveringDate?.(date)}\n    >\n      {getDateNumberFromDate(date)}\n    </button>\n  );\n}\n\nfunction DateRangeMonthHeader({\n  month,\n  year,\n  size = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  updateCurrentMonth,\n}: {\n  month?: string;\n  year?: number;\n  size?: KumoDateRangePickerSize;\n  updateCurrentMonth?: (dateString: string) => void;\n}) {\n  const sizeConfig = getSizeConfig(size);\n\n  return (\n    <div>\n      <div className=\"mb-3 text-center\">\n        <input\n          key={`${month}-${year}`}\n          aria-label=\"Edit month and year\"\n          defaultValue={`${month} ${year}`}\n          className={cn(\n            \"w-full rounded-md border-none bg-transparent py-1.5 text-center font-semibold text-kumo-default transition-all duration-200 focus:outline-none\",\n            sizeConfig.textSize,\n          )}\n          onBlur={(e) => {\n            if (e.currentTarget.value.length === 0) return;\n            updateCurrentMonth?.(e.currentTarget.value);\n          }}\n        />\n      </div>\n\n      <div className=\"mt-2 grid grid-cols-7 gap-1\">\n        {DAYS_OF_WEEK.map((day) => (\n          <div\n            key={day}\n            className={cn(\n              \"h-[22px] text-center text-kumo-subtle\",\n              sizeConfig.cellWidth,\n              sizeConfig.textSize,\n            )}\n          >\n            {day}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction DateRangeFooter({\n  timezone,\n  size = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  reset,\n}: {\n  timezone?: string;\n  size?: KumoDateRangePickerSize;\n  reset?: () => void;\n}) {\n  const sizeConfig = getSizeConfig(size);\n\n  return (\n    <div\n      className={cn(\"flex items-center gap-2 text-kumo-strong\", sizeConfig.textSize)}\n    >\n      <GlobeHemisphereWestIcon size={sizeConfig.iconSize} />\n      <span className=\"flex-1\">Timezone: {timezone}</span>\n      <button\n        type=\"button\"\n        onClick={reset}\n        className=\"cursor-pointer font-semibold text-kumo-default underline underline-offset-2\"\n      >\n        Reset Dates\n      </button>\n    </div>\n  );\n}\n\n// Default export for backwards compatibility\n/**\n * @deprecated Use {@link DatePicker} with `mode=\"range\"` instead.\n */\nexport default DateRangePicker;\n"],"names":["KUMO_DATE_RANGE_PICKER_VARIANTS","KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS","dateRangePickerVariants","size","variant","cn","getSizeConfig","DAYS_OF_WEEK","DateRangePicker","onStartDateChange","onEndDateChange","timezone","className","startDate","setStartDate","useState","endDate","setEndDate","viewingMonth","setViewingMonth","hoveringDate","setHoveringDate","sizeConfig","handleStartDateChange","date","handleEndDateChange","getMonthName","useCallback","monthOffset","copyDate","getDateYear","getMonthsStartingDay","getNumberOfDaysInMonth","adjustMonth","prev","newDate","getDateFromIndex","index","startingDay","previousMonth","nextMonth","isDateEqual","date1","date2","jsxs","jsx","CaretLeftIcon","DateRangeMonthHeader","dateString","_","DateRangeDayCell","CaretRightIcon","DateRangeFooter","mode","onClick","isHoveringDate","getDateNumberFromDate","getBackgroundColor","getTextColor","getAriaLabel","dateStr","month","year","updateCurrentMonth","e","day","reset","GlobeHemisphereWestIcon"],"mappings":"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"}
+{"version":3,"file":"date-range-picker-c9wnx9tbwohai7jy.js","sources":["../../src/components/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import {\n  CaretLeftIcon,\n  CaretRightIcon,\n  GlobeHemisphereWestIcon,\n} from \"@phosphor-icons/react\";\nimport { useCallback, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** DateRangePicker size and variant definitions mapping names to their Tailwind classes. */\nexport const KUMO_DATE_RANGE_PICKER_VARIANTS = {\n  size: {\n    sm: {\n      classes: \"p-3 gap-2\",\n      cellHeight: \"h-[22px]\",\n      cellWidth: \"w-6\",\n      calendarWidth: \"w-[168px]\",\n      textSize: \"text-xs\",\n      iconSize: 14,\n      description: \"Compact calendar for tight spaces\",\n    },\n    base: {\n      classes: \"p-4 gap-2.5\",\n      cellHeight: \"h-[26px]\",\n      cellWidth: \"w-7\",\n      calendarWidth: \"w-[196px]\",\n      textSize: \"text-sm\",\n      iconSize: 16,\n      description: \"Default calendar size\",\n    },\n    lg: {\n      classes: \"p-5 gap-3\",\n      cellHeight: \"h-[32px]\",\n      cellWidth: \"w-9\",\n      calendarWidth: \"w-[252px]\",\n      textSize: \"text-base\",\n      iconSize: 18,\n      description: \"Large calendar for prominent date selection\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"bg-kumo-overlay\",\n      description: \"Default calendar appearance\",\n    },\n    subtle: {\n      classes: \"bg-kumo-base\",\n      description: \"Subtle calendar with minimal background\",\n    },\n  },\n} as const;\n\nexport const KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\n// Derived types from KUMO_DATE_RANGE_PICKER_VARIANTS\nexport type KumoDateRangePickerSize =\n  keyof typeof KUMO_DATE_RANGE_PICKER_VARIANTS.size;\nexport type KumoDateRangePickerVariant =\n  keyof typeof KUMO_DATE_RANGE_PICKER_VARIANTS.variant;\n\nexport interface KumoDateRangePickerVariantsProps {\n  /**\n   * Calendar size.\n   * - `\"sm\"` — Compact calendar for tight spaces\n   * - `\"base\"` — Default calendar size\n   * - `\"lg\"` — Large calendar for prominent date selection\n   * @default \"base\"\n   */\n  size?: KumoDateRangePickerSize;\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard appearance with overlay background\n   * - `\"subtle\"` — Minimal background\n   * @default \"default\"\n   */\n  variant?: KumoDateRangePickerVariant;\n}\n\nexport function dateRangePickerVariants({\n  size = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  variant = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.variant,\n}: KumoDateRangePickerVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex w-fit flex-col rounded-xl select-none\",\n    // Apply variant and size styles\n    KUMO_DATE_RANGE_PICKER_VARIANTS.variant[variant].classes,\n    KUMO_DATE_RANGE_PICKER_VARIANTS.size[size].classes,\n  );\n}\n\n// Helper to get size config\nfunction getSizeConfig(size: KumoDateRangePickerSize) {\n  return KUMO_DATE_RANGE_PICKER_VARIANTS.size[size];\n}\n\nenum DateRangeCellMode {\n  OUT_OF_RANGE,\n  ENABLED,\n  SELECTED_START_NODE,\n  SELECTED_END_NODE,\n  SELECTED,\n  SELECTED_OUT_OF_RANGE,\n}\n\nconst DAYS_OF_WEEK = [\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"] as const;\n\n/**\n * DateRangePicker component props.\n *\n * Dual-calendar date range selector with hover preview, timezone display, and reset support.\n *\n * @example\n * ```tsx\n * <DateRangePicker\n *   onStartDateChange={(d) => setStart(d)}\n *   onEndDateChange={(d) => setEnd(d)}\n *   timezone=\"New York, NY, USA (GMT-4)\"\n * />\n *\n * // Compact variant\n * <DateRangePicker\n *   size=\"sm\"\n *   variant=\"subtle\"\n *   onStartDateChange={setStart}\n *   onEndDateChange={setEnd}\n * />\n * ```\n *\n * @deprecated Use {@link DatePicker} with `mode=\"range\"` instead.\n */\nexport interface DateRangePickerProps extends KumoDateRangePickerVariantsProps {\n  /** Callback fired when start date changes. Receives `null` on reset. */\n  onStartDateChange: (date: Date | null) => void;\n  /** Callback fired when end date changes. Receives `null` on reset. */\n  onEndDateChange: (date: Date | null) => void;\n  /**\n   * Display timezone string shown in the footer.\n   * @default \"New York, NY, USA (GMT-4)\"\n   */\n  timezone?: string;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}\n\n/**\n * DateRangePicker — dual-calendar date range selector.\n *\n * Renders two side-by-side month calendars with click-to-select start/end dates,\n * hover preview of the range, a timezone footer, and a reset button.\n *\n * @example\n * ```tsx\n * <DateRangePicker\n *   onStartDateChange={setStart}\n *   onEndDateChange={setEnd}\n * />\n * ```\n *\n * @deprecated Use {@link DatePicker} with `mode=\"range\"` instead.\n */\nexport function DateRangePicker({\n  onStartDateChange,\n  onEndDateChange,\n  size = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  variant = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.variant,\n  timezone = \"New York, NY, USA (GMT-4)\",\n  className,\n}: DateRangePickerProps) {\n  const [startDate, setStartDate] = useState<Date | null>(null);\n  const [endDate, setEndDate] = useState<Date | null>(null);\n  const [viewingMonth, setViewingMonth] = useState<Date>(new Date());\n  const [hoveringDate, setHoveringDate] = useState<Date | null>(null);\n\n  const sizeConfig = getSizeConfig(size);\n\n  const handleStartDateChange = (date: Date | null) => {\n    setStartDate(date);\n    onStartDateChange(date); // Pass the updated startDate to the parent component\n  };\n\n  const handleEndDateChange = (date: Date | null) => {\n    setEndDate(date);\n    onEndDateChange(date); // Pass the updated endDate to the parent component\n  };\n\n  const getMonthName = useCallback((date: Date, monthOffset?: number) => {\n    const copyDate = new Date(date);\n    copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n    return copyDate.toLocaleString(\"default\", { month: \"long\" });\n  }, []);\n\n  const getDateYear = useCallback((date: Date, monthOffset?: number) => {\n    const copyDate = new Date(date);\n    copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n    return copyDate.getFullYear();\n  }, []);\n\n  const getMonthsStartingDay = useCallback(\n    (date: Date, monthOffset?: number) => {\n      const copyDate = new Date(date);\n      copyDate.setDate(1);\n      copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n      return copyDate.getDay();\n    },\n    [],\n  );\n\n  const getNumberOfDaysInMonth = useCallback(\n    (date: Date, monthOffset?: number) => {\n      const copyDate = new Date(date);\n      copyDate.setDate(1);\n      copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n      copyDate.setMonth(copyDate.getMonth() + 1);\n      copyDate.setDate(0);\n      return copyDate.getDate();\n    },\n    [],\n  );\n\n  const adjustMonth = useCallback((monthOffset: number) => {\n    setViewingMonth((prev) => {\n      const newDate = new Date(prev);\n      newDate.setMonth(newDate.getMonth() + monthOffset);\n      return newDate;\n    });\n  }, []);\n\n  const getDateFromIndex = useCallback(\n    (date: Date, monthOffset: number, index: number) => {\n      const startingDay = getMonthsStartingDay(date, monthOffset);\n\n      if (index < startingDay) {\n        // Get the last day of the previous month\n        const previousMonth = new Date(date);\n        previousMonth.setMonth(previousMonth.getMonth() + monthOffset);\n        previousMonth.setDate(1);\n        previousMonth.setDate(previousMonth.getDate() - (startingDay - index));\n        return previousMonth;\n      } else if (\n        index >\n        getNumberOfDaysInMonth(date, monthOffset) + startingDay - 1\n      ) {\n        // Get the first day of the next month\n        const nextMonth = new Date(date);\n        nextMonth.setMonth(nextMonth.getMonth() + monthOffset);\n        nextMonth.setMonth(nextMonth.getMonth() + 1);\n        nextMonth.setDate(\n          index - getNumberOfDaysInMonth(date, monthOffset) - startingDay + 1,\n        );\n        return nextMonth;\n      } else {\n        // Get the current month's date\n        const newDate = new Date(date);\n        newDate.setMonth(newDate.getMonth() + monthOffset);\n        newDate.setDate(index - startingDay + 1);\n        return newDate;\n      }\n    },\n    [getMonthsStartingDay, getNumberOfDaysInMonth],\n  );\n\n  const isDateEqual = useCallback((date1: Date | null, date2: Date | null) => {\n    if (!date1 || !date2) return false;\n    return date1.toDateString() === date2.toDateString();\n  }, []);\n\n  return (\n    <div className={cn(dateRangePickerVariants({ size, variant }), className)}>\n      <div className=\"flex gap-4\">\n        <div className={cn(\"relative\", sizeConfig.calendarWidth)}>\n          <button\n            type=\"button\"\n            aria-label=\"Previous month\"\n            className=\"absolute top-0 left-0 cursor-pointer rounded bg-kumo-interact/85 p-1.5 hover:bg-kumo-interact\"\n            onClick={() => adjustMonth(-1)}\n          >\n            <CaretLeftIcon size={sizeConfig.iconSize} />\n          </button>\n\n          <DateRangeMonthHeader\n            month={getMonthName(viewingMonth)}\n            year={getDateYear(viewingMonth)}\n            size={size}\n            updateCurrentMonth={(dateString) => {\n              setViewingMonth(new Date(dateString));\n            }}\n          />\n\n          <div className=\"grid grid-cols-7 gap-0 gap-y-0.5\">\n            {Array.from({ length: 42 }).map((_, index) => (\n              <DateRangeDayCell\n                key={index}\n                date={getDateFromIndex(viewingMonth, 0, index)}\n                size={size}\n                mode={\n                  // After current month range\n                  (startDate &&\n                    endDate &&\n                    getDateFromIndex(viewingMonth, 0, index) >= startDate &&\n                    getDateFromIndex(viewingMonth, 0, index) <= endDate &&\n                    index >\n                    getNumberOfDaysInMonth(viewingMonth, 0) +\n                    getMonthsStartingDay(viewingMonth, 0) -\n                    1) ||\n                    // Before current month range\n                    (startDate &&\n                      endDate &&\n                      getDateFromIndex(viewingMonth, 0, index) >= startDate &&\n                      getDateFromIndex(viewingMonth, 0, index) <= endDate &&\n                      index < getMonthsStartingDay(viewingMonth, 0))\n                    ? DateRangeCellMode.SELECTED_OUT_OF_RANGE\n                    : // Before current month range\n                    index < getMonthsStartingDay(viewingMonth, 0)\n                      ? DateRangeCellMode.OUT_OF_RANGE\n                      : // After current month range\n                      index >\n                        getNumberOfDaysInMonth(viewingMonth, 0) +\n                        getMonthsStartingDay(viewingMonth, 0) -\n                        1\n                        ? DateRangeCellMode.OUT_OF_RANGE\n                        : // Selected start date\n                        isDateEqual(\n                          getDateFromIndex(viewingMonth, 0, index),\n                          startDate,\n                        )\n                          ? DateRangeCellMode.SELECTED_START_NODE\n                          : // Selected end date\n                          isDateEqual(\n                            getDateFromIndex(viewingMonth, 0, index),\n                            endDate,\n                          )\n                            ? DateRangeCellMode.SELECTED_END_NODE\n                            : // Selected date range\n                            startDate &&\n                              getDateFromIndex(viewingMonth, 0, index) >=\n                              startDate &&\n                              endDate &&\n                              getDateFromIndex(viewingMonth, 0, index) <=\n                              endDate\n                              ? DateRangeCellMode.SELECTED\n                              : // Hovering past a starting date and no end date selected\n                              startDate &&\n                                !endDate &&\n                                hoveringDate &&\n                                hoveringDate > startDate &&\n                                getDateFromIndex(viewingMonth, 0, index) <=\n                                hoveringDate &&\n                                getDateFromIndex(viewingMonth, 0, index) >\n                                startDate\n                                ? DateRangeCellMode.SELECTED\n                                : // Default to enabled date\n                                DateRangeCellMode.ENABLED\n                }\n                onClick={(date) => {\n                  if (!startDate || date < startDate) {\n                    handleStartDateChange(date);\n                    setHoveringDate(date);\n                  } else {\n                    handleEndDateChange(date);\n                  }\n                }}\n                isHoveringDate={(date) => {\n                  if (startDate && !endDate && date > startDate) {\n                    setHoveringDate(date);\n                  }\n                }}\n              />\n            ))}\n          </div>\n        </div>\n        <div className={cn(\"relative\", sizeConfig.calendarWidth)}>\n          <button\n            type=\"button\"\n            aria-label=\"Next month\"\n            className=\"absolute top-0 right-0 cursor-pointer rounded bg-kumo-interact/85 p-1.5 hover:bg-kumo-interact\"\n            onClick={() => adjustMonth(1)}\n          >\n            <CaretRightIcon size={sizeConfig.iconSize} />\n          </button>\n\n          <DateRangeMonthHeader\n            month={getMonthName(viewingMonth, 1)}\n            year={getDateYear(viewingMonth, 1)}\n            size={size}\n            updateCurrentMonth={(dateString) => {\n              const date = new Date(dateString);\n              date.setMonth(date.getMonth() - 1);\n              setViewingMonth(date);\n            }}\n          />\n\n          <div className=\"grid grid-cols-7 gap-0 gap-y-0.5\">\n            {Array.from({ length: 42 }).map((_, index) => (\n              <DateRangeDayCell\n                key={index}\n                date={getDateFromIndex(viewingMonth, 1, index)}\n                size={size}\n                mode={\n                  // After current month range\n                  (startDate &&\n                    endDate &&\n                    getDateFromIndex(viewingMonth, 1, index) >= startDate &&\n                    getDateFromIndex(viewingMonth, 1, index) <= endDate &&\n                    index >\n                    getNumberOfDaysInMonth(viewingMonth, 1) +\n                    getMonthsStartingDay(viewingMonth, 1) -\n                    1) ||\n                    // Before current month range\n                    (startDate &&\n                      endDate &&\n                      getDateFromIndex(viewingMonth, 1, index) >= startDate &&\n                      getDateFromIndex(viewingMonth, 1, index) <= endDate &&\n                      index < getMonthsStartingDay(viewingMonth, 1))\n                    ? DateRangeCellMode.SELECTED_OUT_OF_RANGE\n                    : // Before current month range\n                    index < getMonthsStartingDay(viewingMonth, 1)\n                      ? DateRangeCellMode.OUT_OF_RANGE\n                      : // After current month range\n                      index >\n                        getNumberOfDaysInMonth(viewingMonth, 1) +\n                        getMonthsStartingDay(viewingMonth, 1) -\n                        1\n                        ? DateRangeCellMode.OUT_OF_RANGE\n                        : // Selected start date\n                        isDateEqual(\n                          getDateFromIndex(viewingMonth, 1, index),\n                          startDate,\n                        )\n                          ? DateRangeCellMode.SELECTED_START_NODE\n                          : // Selected end date\n                          isDateEqual(\n                            getDateFromIndex(viewingMonth, 1, index),\n                            endDate,\n                          )\n                            ? DateRangeCellMode.SELECTED_END_NODE\n                            : // Selected date range\n                            startDate &&\n                              getDateFromIndex(viewingMonth, 1, index) >=\n                              startDate &&\n                              endDate &&\n                              getDateFromIndex(viewingMonth, 1, index) <=\n                              endDate\n                              ? DateRangeCellMode.SELECTED\n                              : // Hovering past a starting date and no end date selected\n                              startDate &&\n                                !endDate &&\n                                hoveringDate &&\n                                hoveringDate > startDate &&\n                                getDateFromIndex(viewingMonth, 1, index) <=\n                                hoveringDate &&\n                                getDateFromIndex(viewingMonth, 1, index) >\n                                startDate\n                                ? DateRangeCellMode.SELECTED\n                                : // Default to enabled date\n                                DateRangeCellMode.ENABLED\n                }\n                onClick={(date) => {\n                  if (!startDate || date < startDate) {\n                    handleStartDateChange(date);\n                    setHoveringDate(date);\n                  } else {\n                    handleEndDateChange(date);\n                  }\n                }}\n                isHoveringDate={(date) => {\n                  if (startDate && !endDate && date > startDate) {\n                    setHoveringDate(date);\n                  }\n                }}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n\n      <DateRangeFooter\n        timezone={timezone}\n        size={size}\n        reset={() => {\n          handleStartDateChange(null);\n          handleEndDateChange(null);\n        }}\n      />\n    </div>\n  );\n}\n\nfunction DateRangeDayCell({\n  date,\n  mode,\n  size = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  onClick,\n  isHoveringDate,\n}: {\n  date: Date;\n  mode?: DateRangeCellMode;\n  size?: KumoDateRangePickerSize;\n  onClick?: (date: Date) => void;\n  isHoveringDate?: (date: Date) => void;\n}) {\n  const sizeConfig = getSizeConfig(size);\n\n  const getDateNumberFromDate = useCallback((date: Date) => {\n    return date.getDate();\n  }, []);\n\n  const getBackgroundColor = useCallback(() => {\n    switch (mode) {\n      case DateRangeCellMode.OUT_OF_RANGE:\n        return \"bg-transparent\";\n      case DateRangeCellMode.ENABLED:\n        return \"bg-transparent\";\n      case DateRangeCellMode.SELECTED_START_NODE:\n        return \"!bg-kumo-contrast rounded-tl-[5px] rounded-bl-[5px]\";\n      case DateRangeCellMode.SELECTED_END_NODE:\n        return \"!bg-kumo-contrast rounded-tr-[5px] rounded-br-[5px]\";\n      case DateRangeCellMode.SELECTED:\n        return \"bg-kumo-interact\";\n      case DateRangeCellMode.SELECTED_OUT_OF_RANGE:\n        return \"bg-kumo-fill\";\n    }\n  }, [mode]);\n\n  const getTextColor = useCallback(() => {\n    switch (mode) {\n      case DateRangeCellMode.OUT_OF_RANGE:\n      case DateRangeCellMode.SELECTED_OUT_OF_RANGE:\n        return \"!text-kumo-strong\";\n      case DateRangeCellMode.SELECTED_START_NODE:\n      case DateRangeCellMode.SELECTED_END_NODE:\n        return \"!text-kumo-inverse\";\n      default:\n        return \"text-kumo-default\";\n    }\n  }, [mode]);\n\n  const getAriaLabel = useCallback(() => {\n    const dateStr = date.toLocaleDateString(\"en-US\", {\n      weekday: \"long\",\n      month: \"long\",\n      day: \"numeric\",\n      year: \"numeric\",\n    });\n    switch (mode) {\n      case DateRangeCellMode.SELECTED_START_NODE:\n        return `${dateStr}, selected as start date`;\n      case DateRangeCellMode.SELECTED_END_NODE:\n        return `${dateStr}, selected as end date`;\n      case DateRangeCellMode.SELECTED:\n        return `${dateStr}, within selected range`;\n      default:\n        return dateStr;\n    }\n  }, [date, mode]);\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={getAriaLabel()}\n      id={date.toDateString()}\n      className={cn(\n        sizeConfig.cellHeight,\n        sizeConfig.cellWidth,\n        sizeConfig.textSize,\n        \"cursor-pointer text-center text-kumo-default transition-all duration-[50]\",\n        `leading-[${sizeConfig.cellHeight.replace(\"h-[\", \"\").replace(\"]\", \"\")}]`,\n        mode !== DateRangeCellMode.OUT_OF_RANGE &&\n          mode !== DateRangeCellMode.SELECTED_OUT_OF_RANGE\n          ? \"hover:bg-kumo-interact\"\n          : \"\",\n        getBackgroundColor(),\n        getTextColor(),\n      )}\n      onClick={() => onClick?.(date)}\n      onMouseOver={() => isHoveringDate?.(date)}\n      onFocus={() => isHoveringDate?.(date)}\n    >\n      {getDateNumberFromDate(date)}\n    </button>\n  );\n}\n\nfunction DateRangeMonthHeader({\n  month,\n  year,\n  size = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  updateCurrentMonth,\n}: {\n  month?: string;\n  year?: number;\n  size?: KumoDateRangePickerSize;\n  updateCurrentMonth?: (dateString: string) => void;\n}) {\n  const sizeConfig = getSizeConfig(size);\n\n  return (\n    <div>\n      <div className=\"mb-3 text-center\">\n        <input\n          key={`${month}-${year}`}\n          aria-label=\"Edit month and year\"\n          defaultValue={`${month} ${year}`}\n          className={cn(\n            \"w-full rounded-md border-none bg-transparent py-1.5 text-center font-semibold text-kumo-default transition-all duration-200 focus:outline-none focus:ring-kumo-focus/50 focus:ring-[1.5px]\",\n            sizeConfig.textSize,\n          )}\n          onBlur={(e) => {\n            if (e.currentTarget.value.length === 0) return;\n            updateCurrentMonth?.(e.currentTarget.value);\n          }}\n        />\n      </div>\n\n      <div className=\"mt-2 grid grid-cols-7 gap-1\">\n        {DAYS_OF_WEEK.map((day) => (\n          <div\n            key={day}\n            className={cn(\n              \"h-[22px] text-center text-kumo-subtle\",\n              sizeConfig.cellWidth,\n              sizeConfig.textSize,\n            )}\n          >\n            {day}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction DateRangeFooter({\n  timezone,\n  size = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  reset,\n}: {\n  timezone?: string;\n  size?: KumoDateRangePickerSize;\n  reset?: () => void;\n}) {\n  const sizeConfig = getSizeConfig(size);\n\n  return (\n    <div\n      className={cn(\"flex items-center gap-2 text-kumo-strong\", sizeConfig.textSize)}\n    >\n      <GlobeHemisphereWestIcon size={sizeConfig.iconSize} />\n      <span className=\"flex-1\">Timezone: {timezone}</span>\n      <button\n        type=\"button\"\n        onClick={reset}\n        className=\"cursor-pointer font-semibold text-kumo-default underline underline-offset-2\"\n      >\n        Reset Dates\n      </button>\n    </div>\n  );\n}\n\n// Default export for backwards compatibility\n/**\n * @deprecated Use {@link DatePicker} with `mode=\"range\"` instead.\n */\nexport default DateRangePicker;\n"],"names":["KUMO_DATE_RANGE_PICKER_VARIANTS","KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS","dateRangePickerVariants","size","variant","cn","getSizeConfig","DAYS_OF_WEEK","DateRangePicker","onStartDateChange","onEndDateChange","timezone","className","startDate","setStartDate","useState","endDate","setEndDate","viewingMonth","setViewingMonth","hoveringDate","setHoveringDate","sizeConfig","handleStartDateChange","date","handleEndDateChange","getMonthName","useCallback","monthOffset","copyDate","getDateYear","getMonthsStartingDay","getNumberOfDaysInMonth","adjustMonth","prev","newDate","getDateFromIndex","index","startingDay","previousMonth","nextMonth","isDateEqual","date1","date2","jsxs","jsx","CaretLeftIcon","DateRangeMonthHeader","dateString","_","DateRangeDayCell","CaretRightIcon","DateRangeFooter","mode","onClick","isHoveringDate","getDateNumberFromDate","getBackgroundColor","getTextColor","getAriaLabel","dateStr","month","year","updateCurrentMonth","e","day","reset","GlobeHemisphereWestIcon"],"mappings":"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"}

package/dist/chunks/{dialog-e3m5bhs7fds26p9y.js → dialog-94v7wiz7j3in6528.js}

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as t, jsxs as b } from "react/jsx-runtime";
 import { createContext as v, useContext as N } from "react";
-import { L as P } from "./layer-card-ljqth3yxgnk04v2o.js";
+import { L as P } from "./layer-card-hvivdirwwnyq88wa.js";
 import { c as D } from "./cn-ct4n7r74mh8y0f48.js";
 import { u as A } from "./portal-provider-hwmkdmkpvct0cb76.js";
-import { ao as k, ap as h, aq as n, ar as c, as as g, at as d, au as p, av as m, aw as u } from "./vendor-base-ui-m5pz3e8c4grg5qmj.js";
+import { ap as k, aq as h, ar as n, as as c, at as g, au as d, av as p, aw as m, ax as u } from "./vendor-base-ui-ie71jahf0czyf58j.js";
 const L = {
   size: {
     base: {
@@ -111,4 +111,4 @@ export {
   B as d,
   T as e
 };
-//# sourceMappingURL=dialog-e3m5bhs7fds26p9y.js.map
+//# sourceMappingURL=dialog-94v7wiz7j3in6528.js.map

package/dist/chunks/{dialog-e3m5bhs7fds26p9y.js.map → dialog-94v7wiz7j3in6528.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dialog-e3m5bhs7fds26p9y.js","sources":["../../src/components/dialog/dialog.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport { AlertDialog as AlertDialogBase } from \"@base-ui/react/alert-dialog\";\nimport { LayerCard } from \"../layer-card\";\nimport { cn } from \"../../utils/cn\";\nimport {\n  usePortalContainer,\n  type PortalContainer,\n} from \"../../utils/portal-provider\";\n\n/** Dialog size variant definitions mapping sizes to their minimum widths. */\nexport const KUMO_DIALOG_VARIANTS = {\n  size: {\n    base: {\n      classes: \"sm:min-w-96\",\n      description: \"Default dialog width\",\n    },\n    sm: {\n      classes: \"min-w-72\",\n      description: \"Small dialog for simple confirmations\",\n    },\n    lg: {\n      classes: \"min-w-[32rem]\",\n      description: \"Large dialog for complex content\",\n    },\n    xl: {\n      classes: \"min-w-[48rem]\",\n      description: \"Extra large dialog for detailed views\",\n    },\n  },\n  role: {\n    dialog: {\n      classes: \"\",\n      description: \"Standard dialog for general-purpose modals\",\n    },\n    alertdialog: {\n      classes: \"\",\n      description:\n        \"Alert dialog for confirmation flows requiring explicit user acknowledgment\",\n    },\n  },\n} as const;\n\nexport const KUMO_DIALOG_DEFAULT_VARIANTS = {\n  size: \"base\",\n  role: \"dialog\",\n} as const;\n\nexport const KUMO_DIALOG_STYLING = {\n  dimensions: {\n    sm: {\n      width: 350,\n      titleSize: 20,\n      descSize: 16,\n      padding: 16,\n      gap: 8,\n      buttonSize: \"sm\",\n    },\n    base: {\n      width: 384,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n    lg: {\n      width: 512,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n    xl: {\n      width: 768,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n  },\n  baseTokens: {\n    background: \"color-surface\",\n    text: \"text-color-surface\",\n    borderRadius: 12,\n    shadow: \"shadow-m\",\n  },\n  backdrop: {\n    background: \"color-surface-secondary\",\n    opacity: 0.8,\n  },\n  header: {\n    title: { fontWeight: 600, color: \"text-color-surface\" },\n    closeIcon: { name: \"ph-x\", size: 20, color: \"text-color-muted\" },\n  },\n  description: {\n    fontWeight: 400,\n    color: \"text-color-muted\",\n  },\n  buttons: {\n    primary: { background: \"color-primary\", text: \"white\" },\n    secondary: { ring: \"color-border\", text: \"text-color-surface\" },\n  },\n} as const;\n\n// Derived types from KUMO_DIALOG_VARIANTS\nexport type KumoDialogSize = keyof typeof KUMO_DIALOG_VARIANTS.size;\nexport type KumoDialogRole = keyof typeof KUMO_DIALOG_VARIANTS.role;\n\nexport interface KumoDialogVariantsProps {\n  /**\n   * Dialog width.\n   * - `\"sm\"` — Small (min 288px) for simple confirmations\n   * - `\"base\"` — Default (min 384px)\n   * - `\"lg\"` — Large (min 512px) for complex content\n   * - `\"xl\"` — Extra large (min 768px) for detailed views\n   * @default \"base\"\n   */\n  size?: KumoDialogSize;\n}\n\n// ============================================================================\n// Dialog Role Context\n// ============================================================================\n\nconst DialogRoleContext = createContext<KumoDialogRole>(\"dialog\");\n\nfunction useDialogRole() {\n  return useContext(DialogRoleContext);\n}\n\nexport function dialogVariants({\n  size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n}: KumoDialogVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"shadow-m ring ring-kumo-line fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0\",\n    // Apply size from KUMO_DIALOG_VARIANTS\n    KUMO_DIALOG_VARIANTS.size[size].classes,\n  );\n}\n\n/**\n * Dialog component props — the modal content panel.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger render={(p) => <Button {...p}>Open</Button>} />\n *   <Dialog className=\"p-8\">\n *     <Dialog.Title>Confirm Action</Dialog.Title>\n *     <Dialog.Description>Are you sure?</Dialog.Description>\n *     <Dialog.Close render={(p) => <Button {...p}>Cancel</Button>} />\n *   </Dialog>\n * </Dialog.Root>\n * ```\n */\nexport type DialogProps = KumoDialogVariantsProps & {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Dialog content (typically Title, Description, Close, and action buttons). */\n  children: ReactNode;\n  /** Inline styles. */\n  style?: CSSProperties;\n  /**\n   * Container element for the portal. Use this to render the dialog inside\n   * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.\n   * @default document.body (or KumoPortalProvider container if set)\n   */\n  container?: PortalContainer;\n};\n\n/**\n * Modal dialog overlay with backdrop. Compound component with `Dialog.Root`,\n * `Dialog.Trigger`, `Dialog.Title`, `Dialog.Description`, and `Dialog.Close`.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger render={(p) => <Button {...p}>Delete</Button>} />\n *   <Dialog className=\"p-8\">\n *     <Dialog.Title>Delete Item</Dialog.Title>\n *     <Dialog.Description>This action cannot be undone.</Dialog.Description>\n *     <Dialog.Close render={(p) => <Button variant=\"destructive\" {...p}>Delete</Button>} />\n *   </Dialog>\n * </Dialog.Root>\n * ```\n *\n * @example Alert Dialog for destructive actions\n * ```tsx\n * <Dialog.Root role=\"alertdialog\">\n *   <Dialog.Trigger render={(p) => <Button variant=\"destructive\" {...p}>Delete Project</Button>} />\n *   <Dialog className=\"p-8\">\n *     <Dialog.Title>Delete Project?</Dialog.Title>\n *     <Dialog.Description>This action cannot be undone.</Dialog.Description>\n *     <Dialog.Close render={(p) => <Button variant=\"secondary\" {...p}>Cancel</Button>} />\n *     <Dialog.Close render={(p) => <Button variant=\"destructive\" {...p}>Delete</Button>} />\n *   </Dialog>\n * </Dialog.Root>\n * ```\n */\nfunction DialogContent({\n  className,\n  children,\n  style,\n  size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n  container: containerProp,\n}: DialogProps) {\n  const role = useDialogRole();\n  const contextContainer = usePortalContainer();\n  const container = containerProp ?? contextContainer ?? undefined;\n\n  const BasePortal =\n    role === \"alertdialog\" ? AlertDialogBase.Portal : DialogBase.Portal;\n  const BaseBackdrop =\n    role === \"alertdialog\" ? AlertDialogBase.Backdrop : DialogBase.Backdrop;\n  const BasePopup =\n    role === \"alertdialog\" ? AlertDialogBase.Popup : DialogBase.Popup;\n\n  return (\n    <BasePortal container={container}>\n      <BaseBackdrop className=\"fixed inset-0 bg-kumo-recessed opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\" />\n      <LayerCard\n        render={<BasePopup />}\n        className={cn(dialogVariants({ size }), className)}\n        style={\n          {\n            transitionProperty: \"scale, opacity\",\n            transitionTimingFunction:\n              \"var(--default-transition-timing-function)\",\n            \"--tw-shadow\":\n              \"0 20px 25px -5px rgb(0 0 0 / 0.03), 0 8px 10px -6px rgb(0 0 0 / 0.03)\",\n            ...style,\n          } as CSSProperties\n        }\n      >\n        {children}\n      </LayerCard>\n    </BasePortal>\n  );\n}\n\n// ============================================================================\n// Dialog Root\n// ============================================================================\n\ntype BaseDialogRootProps = ComponentPropsWithoutRef<typeof DialogBase.Root>;\n\nexport type DialogRootProps = BaseDialogRootProps & {\n  /**\n   * The ARIA role for the dialog.\n   * - `\"dialog\"` — Standard dialog for general-purpose modals. Dismissible via outside click by default.\n   * - `\"alertdialog\"` — Alert dialog for destructive or confirmation flows. Not dismissible via outside click.\n   *\n   * Use `role=\"alertdialog\"` for:\n   * - Destructive actions (delete, discard, remove)\n   * - Confirmation dialogs requiring explicit user acknowledgment\n   * - Actions that cannot be undone\n   *\n   * @default \"dialog\"\n   */\n  role?: KumoDialogRole;\n};\n\nfunction DialogRoot({\n  children,\n  role = KUMO_DIALOG_DEFAULT_VARIANTS.role,\n  ...props\n}: DialogRootProps) {\n  const BaseRoot =\n    role === \"alertdialog\" ? AlertDialogBase.Root : DialogBase.Root;\n  return (\n    <DialogRoleContext.Provider value={role}>\n      <BaseRoot {...props}>{children}</BaseRoot>\n    </DialogRoleContext.Provider>\n  );\n}\n\nDialogRoot.displayName = \"Dialog.Root\";\n\n// ============================================================================\n// Dialog Trigger\n// ============================================================================\n\ntype BaseDialogTriggerProps = ComponentPropsWithoutRef<\n  typeof DialogBase.Trigger\n>;\n\nexport type DialogTriggerProps = BaseDialogTriggerProps;\n\nfunction DialogTrigger({ children, ...props }: DialogTriggerProps) {\n  const role = useDialogRole();\n  const BaseTrigger =\n    role === \"alertdialog\" ? AlertDialogBase.Trigger : DialogBase.Trigger;\n  return <BaseTrigger {...props}>{children}</BaseTrigger>;\n}\n\nDialogTrigger.displayName = \"Dialog.Trigger\";\n\n// ============================================================================\n// Dialog Title\n// ============================================================================\n\ntype BaseDialogTitleProps = ComponentPropsWithoutRef<typeof DialogBase.Title>;\n\nexport type DialogTitleProps = BaseDialogTitleProps;\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n  const role = useDialogRole();\n  const BaseTitle =\n    role === \"alertdialog\" ? AlertDialogBase.Title : DialogBase.Title;\n  return <BaseTitle className={className} {...props} />;\n}\n\nDialogTitle.displayName = \"Dialog.Title\";\n\n// ============================================================================\n// Dialog Description\n// ============================================================================\n\ntype BaseDialogDescriptionProps = ComponentPropsWithoutRef<\n  typeof DialogBase.Description\n>;\n\nexport type DialogDescriptionProps = BaseDialogDescriptionProps;\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n  const role = useDialogRole();\n  const BaseDescription =\n    role === \"alertdialog\"\n      ? AlertDialogBase.Description\n      : DialogBase.Description;\n  return <BaseDescription className={className} {...props} />;\n}\n\nDialogDescription.displayName = \"Dialog.Description\";\n\n// ============================================================================\n// Dialog Close\n// ============================================================================\n\ntype BaseDialogCloseProps = ComponentPropsWithoutRef<typeof DialogBase.Close>;\n\nexport type DialogCloseProps = BaseDialogCloseProps;\n\nfunction DialogClose({ children, ...props }: DialogCloseProps) {\n  const role = useDialogRole();\n  const BaseClose =\n    role === \"alertdialog\" ? AlertDialogBase.Close : DialogBase.Close;\n  return <BaseClose {...props}>{children}</BaseClose>;\n}\n\nDialogClose.displayName = \"Dialog.Close\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nconst Dialog = Object.assign(DialogContent, {\n  Root: DialogRoot,\n  Trigger: DialogTrigger,\n  Title: DialogTitle,\n  Description: DialogDescription,\n  Close: DialogClose,\n});\n\nexport {\n  Dialog,\n  DialogRoot,\n  DialogTrigger,\n  DialogTitle,\n  DialogDescription,\n  DialogClose,\n};\n"],"names":["KUMO_DIALOG_VARIANTS","KUMO_DIALOG_DEFAULT_VARIANTS","DialogRoleContext","createContext","useDialogRole","useContext","dialogVariants","size","cn","DialogContent","className","children","style","containerProp","role","contextContainer","usePortalContainer","jsxs","AlertDialogBase.Portal","DialogBase.Portal","jsx","AlertDialogBase.Backdrop","DialogBase.Backdrop","LayerCard","AlertDialogBase.Popup","DialogBase.Popup","DialogRoot","props","BaseRoot","AlertDialogBase.Root","DialogBase.Root","DialogTrigger","BaseTrigger","AlertDialogBase.Trigger","DialogBase.Trigger","DialogTitle","BaseTitle","AlertDialogBase.Title","DialogBase.Title","DialogDescription","BaseDescription","AlertDialogBase.Description","DialogBase.Description","DialogClose","BaseClose","AlertDialogBase.Close","DialogBase.Close","Dialog"],"mappings":"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"}
+{"version":3,"file":"dialog-94v7wiz7j3in6528.js","sources":["../../src/components/dialog/dialog.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport { AlertDialog as AlertDialogBase } from \"@base-ui/react/alert-dialog\";\nimport { LayerCard } from \"../layer-card\";\nimport { cn } from \"../../utils/cn\";\nimport {\n  usePortalContainer,\n  type PortalContainer,\n} from \"../../utils/portal-provider\";\n\n/** Dialog size variant definitions mapping sizes to their minimum widths. */\nexport const KUMO_DIALOG_VARIANTS = {\n  size: {\n    base: {\n      classes: \"sm:min-w-96\",\n      description: \"Default dialog width\",\n    },\n    sm: {\n      classes: \"min-w-72\",\n      description: \"Small dialog for simple confirmations\",\n    },\n    lg: {\n      classes: \"min-w-[32rem]\",\n      description: \"Large dialog for complex content\",\n    },\n    xl: {\n      classes: \"min-w-[48rem]\",\n      description: \"Extra large dialog for detailed views\",\n    },\n  },\n  role: {\n    dialog: {\n      classes: \"\",\n      description: \"Standard dialog for general-purpose modals\",\n    },\n    alertdialog: {\n      classes: \"\",\n      description:\n        \"Alert dialog for confirmation flows requiring explicit user acknowledgment\",\n    },\n  },\n} as const;\n\nexport const KUMO_DIALOG_DEFAULT_VARIANTS = {\n  size: \"base\",\n  role: \"dialog\",\n} as const;\n\nexport const KUMO_DIALOG_STYLING = {\n  dimensions: {\n    sm: {\n      width: 350,\n      titleSize: 20,\n      descSize: 16,\n      padding: 16,\n      gap: 8,\n      buttonSize: \"sm\",\n    },\n    base: {\n      width: 384,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n    lg: {\n      width: 512,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n    xl: {\n      width: 768,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n  },\n  baseTokens: {\n    background: \"color-surface\",\n    text: \"text-color-surface\",\n    borderRadius: 12,\n    shadow: \"shadow-m\",\n  },\n  backdrop: {\n    background: \"color-surface-secondary\",\n    opacity: 0.8,\n  },\n  header: {\n    title: { fontWeight: 600, color: \"text-color-surface\" },\n    closeIcon: { name: \"ph-x\", size: 20, color: \"text-color-muted\" },\n  },\n  description: {\n    fontWeight: 400,\n    color: \"text-color-muted\",\n  },\n  buttons: {\n    primary: { background: \"color-primary\", text: \"white\" },\n    secondary: { ring: \"color-border\", text: \"text-color-surface\" },\n  },\n} as const;\n\n// Derived types from KUMO_DIALOG_VARIANTS\nexport type KumoDialogSize = keyof typeof KUMO_DIALOG_VARIANTS.size;\nexport type KumoDialogRole = keyof typeof KUMO_DIALOG_VARIANTS.role;\n\nexport interface KumoDialogVariantsProps {\n  /**\n   * Dialog width.\n   * - `\"sm\"` — Small (min 288px) for simple confirmations\n   * - `\"base\"` — Default (min 384px)\n   * - `\"lg\"` — Large (min 512px) for complex content\n   * - `\"xl\"` — Extra large (min 768px) for detailed views\n   * @default \"base\"\n   */\n  size?: KumoDialogSize;\n}\n\n// ============================================================================\n// Dialog Role Context\n// ============================================================================\n\nconst DialogRoleContext = createContext<KumoDialogRole>(\"dialog\");\n\nfunction useDialogRole() {\n  return useContext(DialogRoleContext);\n}\n\nexport function dialogVariants({\n  size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n}: KumoDialogVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"shadow-m ring ring-kumo-line fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0\",\n    // Apply size from KUMO_DIALOG_VARIANTS\n    KUMO_DIALOG_VARIANTS.size[size].classes,\n  );\n}\n\n/**\n * Dialog component props — the modal content panel.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger render={(p) => <Button {...p}>Open</Button>} />\n *   <Dialog className=\"p-8\">\n *     <Dialog.Title>Confirm Action</Dialog.Title>\n *     <Dialog.Description>Are you sure?</Dialog.Description>\n *     <Dialog.Close render={(p) => <Button {...p}>Cancel</Button>} />\n *   </Dialog>\n * </Dialog.Root>\n * ```\n */\nexport type DialogProps = KumoDialogVariantsProps & {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Dialog content (typically Title, Description, Close, and action buttons). */\n  children: ReactNode;\n  /** Inline styles. */\n  style?: CSSProperties;\n  /**\n   * Container element for the portal. Use this to render the dialog inside\n   * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.\n   * @default document.body (or KumoPortalProvider container if set)\n   */\n  container?: PortalContainer;\n};\n\n/**\n * Modal dialog overlay with backdrop. Compound component with `Dialog.Root`,\n * `Dialog.Trigger`, `Dialog.Title`, `Dialog.Description`, and `Dialog.Close`.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger render={(p) => <Button {...p}>Delete</Button>} />\n *   <Dialog className=\"p-8\">\n *     <Dialog.Title>Delete Item</Dialog.Title>\n *     <Dialog.Description>This action cannot be undone.</Dialog.Description>\n *     <Dialog.Close render={(p) => <Button variant=\"destructive\" {...p}>Delete</Button>} />\n *   </Dialog>\n * </Dialog.Root>\n * ```\n *\n * @example Alert Dialog for destructive actions\n * ```tsx\n * <Dialog.Root role=\"alertdialog\">\n *   <Dialog.Trigger render={(p) => <Button variant=\"destructive\" {...p}>Delete Project</Button>} />\n *   <Dialog className=\"p-8\">\n *     <Dialog.Title>Delete Project?</Dialog.Title>\n *     <Dialog.Description>This action cannot be undone.</Dialog.Description>\n *     <Dialog.Close render={(p) => <Button variant=\"secondary\" {...p}>Cancel</Button>} />\n *     <Dialog.Close render={(p) => <Button variant=\"destructive\" {...p}>Delete</Button>} />\n *   </Dialog>\n * </Dialog.Root>\n * ```\n */\nfunction DialogContent({\n  className,\n  children,\n  style,\n  size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n  container: containerProp,\n}: DialogProps) {\n  const role = useDialogRole();\n  const contextContainer = usePortalContainer();\n  const container = containerProp ?? contextContainer ?? undefined;\n\n  const BasePortal =\n    role === \"alertdialog\" ? AlertDialogBase.Portal : DialogBase.Portal;\n  const BaseBackdrop =\n    role === \"alertdialog\" ? AlertDialogBase.Backdrop : DialogBase.Backdrop;\n  const BasePopup =\n    role === \"alertdialog\" ? AlertDialogBase.Popup : DialogBase.Popup;\n\n  return (\n    <BasePortal container={container}>\n      <BaseBackdrop className=\"fixed inset-0 bg-kumo-recessed opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\" />\n      <LayerCard\n        render={<BasePopup />}\n        className={cn(dialogVariants({ size }), className)}\n        style={\n          {\n            transitionProperty: \"scale, opacity\",\n            transitionTimingFunction:\n              \"var(--default-transition-timing-function)\",\n            \"--tw-shadow\":\n              \"0 20px 25px -5px rgb(0 0 0 / 0.03), 0 8px 10px -6px rgb(0 0 0 / 0.03)\",\n            ...style,\n          } as CSSProperties\n        }\n      >\n        {children}\n      </LayerCard>\n    </BasePortal>\n  );\n}\n\n// ============================================================================\n// Dialog Root\n// ============================================================================\n\ntype BaseDialogRootProps = ComponentPropsWithoutRef<typeof DialogBase.Root>;\n\nexport type DialogRootProps = BaseDialogRootProps & {\n  /**\n   * The ARIA role for the dialog.\n   * - `\"dialog\"` — Standard dialog for general-purpose modals. Dismissible via outside click by default.\n   * - `\"alertdialog\"` — Alert dialog for destructive or confirmation flows. Not dismissible via outside click.\n   *\n   * Use `role=\"alertdialog\"` for:\n   * - Destructive actions (delete, discard, remove)\n   * - Confirmation dialogs requiring explicit user acknowledgment\n   * - Actions that cannot be undone\n   *\n   * @default \"dialog\"\n   */\n  role?: KumoDialogRole;\n};\n\nfunction DialogRoot({\n  children,\n  role = KUMO_DIALOG_DEFAULT_VARIANTS.role,\n  ...props\n}: DialogRootProps) {\n  const BaseRoot =\n    role === \"alertdialog\" ? AlertDialogBase.Root : DialogBase.Root;\n  return (\n    <DialogRoleContext.Provider value={role}>\n      <BaseRoot {...props}>{children}</BaseRoot>\n    </DialogRoleContext.Provider>\n  );\n}\n\nDialogRoot.displayName = \"Dialog.Root\";\n\n// ============================================================================\n// Dialog Trigger\n// ============================================================================\n\ntype BaseDialogTriggerProps = ComponentPropsWithoutRef<\n  typeof DialogBase.Trigger\n>;\n\nexport type DialogTriggerProps = BaseDialogTriggerProps;\n\nfunction DialogTrigger({ children, ...props }: DialogTriggerProps) {\n  const role = useDialogRole();\n  const BaseTrigger =\n    role === \"alertdialog\" ? AlertDialogBase.Trigger : DialogBase.Trigger;\n  return <BaseTrigger {...props}>{children}</BaseTrigger>;\n}\n\nDialogTrigger.displayName = \"Dialog.Trigger\";\n\n// ============================================================================\n// Dialog Title\n// ============================================================================\n\ntype BaseDialogTitleProps = ComponentPropsWithoutRef<typeof DialogBase.Title>;\n\nexport type DialogTitleProps = BaseDialogTitleProps;\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n  const role = useDialogRole();\n  const BaseTitle =\n    role === \"alertdialog\" ? AlertDialogBase.Title : DialogBase.Title;\n  return <BaseTitle className={className} {...props} />;\n}\n\nDialogTitle.displayName = \"Dialog.Title\";\n\n// ============================================================================\n// Dialog Description\n// ============================================================================\n\ntype BaseDialogDescriptionProps = ComponentPropsWithoutRef<\n  typeof DialogBase.Description\n>;\n\nexport type DialogDescriptionProps = BaseDialogDescriptionProps;\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n  const role = useDialogRole();\n  const BaseDescription =\n    role === \"alertdialog\"\n      ? AlertDialogBase.Description\n      : DialogBase.Description;\n  return <BaseDescription className={className} {...props} />;\n}\n\nDialogDescription.displayName = \"Dialog.Description\";\n\n// ============================================================================\n// Dialog Close\n// ============================================================================\n\ntype BaseDialogCloseProps = ComponentPropsWithoutRef<typeof DialogBase.Close>;\n\nexport type DialogCloseProps = BaseDialogCloseProps;\n\nfunction DialogClose({ children, ...props }: DialogCloseProps) {\n  const role = useDialogRole();\n  const BaseClose =\n    role === \"alertdialog\" ? AlertDialogBase.Close : DialogBase.Close;\n  return <BaseClose {...props}>{children}</BaseClose>;\n}\n\nDialogClose.displayName = \"Dialog.Close\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nconst Dialog = Object.assign(DialogContent, {\n  Root: DialogRoot,\n  Trigger: DialogTrigger,\n  Title: DialogTitle,\n  Description: DialogDescription,\n  Close: DialogClose,\n});\n\nexport {\n  Dialog,\n  DialogRoot,\n  DialogTrigger,\n  DialogTitle,\n  DialogDescription,\n  DialogClose,\n};\n"],"names":["KUMO_DIALOG_VARIANTS","KUMO_DIALOG_DEFAULT_VARIANTS","DialogRoleContext","createContext","useDialogRole","useContext","dialogVariants","size","cn","DialogContent","className","children","style","containerProp","role","contextContainer","usePortalContainer","jsxs","AlertDialogBase.Portal","DialogBase.Portal","jsx","AlertDialogBase.Backdrop","DialogBase.Backdrop","LayerCard","AlertDialogBase.Popup","DialogBase.Popup","DialogRoot","props","BaseRoot","AlertDialogBase.Root","DialogBase.Root","DialogTrigger","BaseTrigger","AlertDialogBase.Trigger","DialogBase.Trigger","DialogTitle","BaseTitle","AlertDialogBase.Title","DialogBase.Title","DialogDescription","BaseDescription","AlertDialogBase.Description","DialogBase.Description","DialogClose","BaseClose","AlertDialogBase.Close","DialogBase.Close","Dialog"],"mappings":"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"}