@cloudflare/kumo 1.0.0

package/dist/date-range-picker-CbKEQ9pi.js

@@ -0,0 +1,408 @@
+"use client";
+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-Bhsu1vx2.js";
+const _ = {
+  size: {
+    sm: {
+      classes: "p-3 gap-2",
+      cellHeight: "h-[22px]",
+      cellWidth: "w-6",
+      calendarWidth: "w-[168px]",
+      textSize: "text-xs",
+      iconSize: 14,
+      description: "Compact calendar for tight spaces"
+    },
+    base: {
+      classes: "p-4 gap-2.5",
+      cellHeight: "h-[26px]",
+      cellWidth: "w-7",
+      calendarWidth: "w-[196px]",
+      textSize: "text-sm",
+      iconSize: 16,
+      description: "Default calendar size"
+    },
+    lg: {
+      classes: "p-5 gap-3",
+      cellHeight: "h-[32px]",
+      cellWidth: "w-9",
+      calendarWidth: "w-[252px]",
+      textSize: "text-base",
+      iconSize: 18,
+      description: "Large calendar for prominent date selection"
+    }
+  },
+  variant: {
+    default: {
+      classes: "bg-kumo-overlay",
+      description: "Default calendar appearance"
+    },
+    subtle: {
+      classes: "bg-kumo-base",
+      description: "Subtle calendar with minimal background"
+    }
+  }
+}, k = {
+  size: "base",
+  variant: "default"
+};
+function U({
+  size: c = k.size,
+  variant: u = k.variant
+} = {}) {
+  return b(
+    // Base styles
+    "flex w-fit flex-col rounded-xl select-none",
+    // Apply variant and size styles
+    _.variant[u].classes,
+    _.size[c].classes
+  );
+}
+function y(c) {
+  return _.size[c];
+}
+const V = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function J({
+  onStartDateChange: c,
+  onEndDateChange: u,
+  size: g = k.size,
+  variant: D = k.variant,
+  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);
+  }, W = (a) => {
+    x(a), u(a);
+  }, T = p((a, e) => {
+    const t = new Date(a);
+    return t.setMonth(t.getMonth() + (e || 0)), t.toLocaleString("default", { month: "long" });
+  }, []), H = p((a, e) => {
+    const t = new Date(a);
+    return t.setMonth(t.getMonth() + (e || 0)), t.getFullYear();
+  }, []), m = p(
+    (a, e) => {
+      const t = new Date(a);
+      return t.setDate(1), t.setMonth(t.getMonth() + (e || 0)), t.getDay();
+    },
+    []
+  ), f = 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();
+    },
+    []
+  ), I = p((a) => {
+    E((e) => {
+      const t = new Date(e);
+      return t.setMonth(t.getMonth() + a), t;
+    });
+  }, []), o = p(
+    (a, e, t) => {
+      const S = m(a, e);
+      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) {
+        const l = new Date(a);
+        return l.setMonth(l.getMonth() + e), l.setMonth(l.getMonth() + 1), l.setDate(
+          t - f(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]
+  ), N = p((a, e) => !a || !e ? !1 : a.toDateString() === e.toDateString(), []);
+  return /* @__PURE__ */ M("div", { className: b(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__ */ i(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Previous month",
+            className: "absolute top-0 left-0 cursor-pointer rounded bg-kumo-interact/85 p-1.5 hover:bg-kumo-interact",
+            onClick: () => I(-1),
+            children: /* @__PURE__ */ i(L, { size: z.iconSize })
+          }
+        ),
+        /* @__PURE__ */ i(
+          $,
+          {
+            month: T(n),
+            year: H(n),
+            size: g,
+            updateCurrentMonth: (a) => {
+              E(new Date(a));
+            }
+          }
+        ),
+        /* @__PURE__ */ i("div", { className: "grid grid-cols-7 gap-0 gap-y-0.5", children: Array.from({ length: 42 }).map((a, e) => /* @__PURE__ */ i(
+          F,
+          {
+            date: o(n, 0, e),
+            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 < 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 : (
+                  // Selected start date
+                  N(
+                    o(n, 0, e),
+                    r
+                  ) ? 2 : (
+                    // Selected end date
+                    N(
+                      o(n, 0, e),
+                      s
+                    ) ? 3 : (
+                      // Selected date range
+                      r && o(n, 0, e) >= r && s && o(n, 0, e) <= s || // Hovering past a starting date and no end date selected
+                      r && !s && v && v > r && o(n, 0, e) <= v && o(n, 0, e) > r ? 4 : (
+                        // Default to enabled date
+                        1
+                      )
+                    )
+                  )
+                )
+              )
+            ),
+            onClick: (t) => {
+              !r || t < r ? (R(t), w(t)) : W(t);
+            },
+            isHoveringDate: (t) => {
+              r && !s && t > r && w(t);
+            }
+          },
+          e
+        )) })
+      ] }),
+      /* @__PURE__ */ M("div", { className: b("relative", z.calendarWidth), children: [
+        /* @__PURE__ */ i(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Next month",
+            className: "absolute top-0 right-0 cursor-pointer rounded bg-kumo-interact/85 p-1.5 hover:bg-kumo-interact",
+            onClick: () => I(1),
+            children: /* @__PURE__ */ i(K, { size: z.iconSize })
+          }
+        ),
+        /* @__PURE__ */ i(
+          $,
+          {
+            month: T(n, 1),
+            year: H(n, 1),
+            size: g,
+            updateCurrentMonth: (a) => {
+              const e = new Date(a);
+              e.setMonth(e.getMonth() - 1), E(e);
+            }
+          }
+        ),
+        /* @__PURE__ */ i("div", { className: "grid grid-cols-7 gap-0 gap-y-0.5", children: Array.from({ length: 42 }).map((a, e) => /* @__PURE__ */ i(
+          F,
+          {
+            date: o(n, 1, e),
+            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 < 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 : (
+                  // Selected start date
+                  N(
+                    o(n, 1, e),
+                    r
+                  ) ? 2 : (
+                    // Selected end date
+                    N(
+                      o(n, 1, e),
+                      s
+                    ) ? 3 : (
+                      // Selected date range
+                      r && o(n, 1, e) >= r && s && o(n, 1, e) <= s || // Hovering past a starting date and no end date selected
+                      r && !s && v && v > r && o(n, 1, e) <= v && o(n, 1, e) > r ? 4 : (
+                        // Default to enabled date
+                        1
+                      )
+                    )
+                  )
+                )
+              )
+            ),
+            onClick: (t) => {
+              !r || t < r ? (R(t), w(t)) : W(t);
+            },
+            isHoveringDate: (t) => {
+              r && !s && t > r && w(t);
+            }
+          },
+          e
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ i(
+      Y,
+      {
+        timezone: d,
+        size: g,
+        reset: () => {
+          R(null), W(null);
+        }
+      }
+    )
+  ] });
+}
+function F({
+  date: c,
+  mode: u,
+  size: g = k.size,
+  onClick: D,
+  isHoveringDate: d
+}) {
+  const h = y(g), r = p((n) => n.getDate(), []), A = p(() => {
+    switch (u) {
+      case 0:
+        return "bg-transparent";
+      case 1:
+        return "bg-transparent";
+      case 2:
+        return "!bg-kumo-contrast rounded-tl-[5px] rounded-bl-[5px]";
+      case 3:
+        return "!bg-kumo-contrast rounded-tr-[5px] rounded-br-[5px]";
+      case 4:
+        return "bg-kumo-interact";
+      case 5:
+        return "bg-kumo-fill";
+    }
+  }, [u]), s = p(() => {
+    switch (u) {
+      case 0:
+      case 5:
+        return "!text-kumo-strong";
+      case 2:
+      case 3:
+        return "!text-kumo-inverse";
+      default:
+        return "text-kumo-default";
+    }
+  }, [u]), x = p(() => {
+    const n = c.toLocaleDateString("en-US", {
+      weekday: "long",
+      month: "long",
+      day: "numeric",
+      year: "numeric"
+    });
+    switch (u) {
+      case 2:
+        return `${n}, selected as start date`;
+      case 3:
+        return `${n}, selected as end date`;
+      case 4:
+        return `${n}, within selected range`;
+      default:
+        return n;
+    }
+  }, [c, u]);
+  return /* @__PURE__ */ i(
+    "button",
+    {
+      type: "button",
+      "aria-label": x(),
+      id: c.toDateString(),
+      className: b(
+        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(),
+        s()
+      ),
+      onClick: () => D?.(c),
+      onMouseOver: () => d?.(c),
+      onFocus: () => d?.(c),
+      children: r(c)
+    }
+  );
+}
+function $({
+  month: c,
+  year: u,
+  size: g = k.size,
+  updateCurrentMonth: D
+}) {
+  const d = y(g);
+  return /* @__PURE__ */ M("div", { children: [
+    /* @__PURE__ */ i("div", { className: "mb-3 text-center", children: /* @__PURE__ */ i(
+      "input",
+      {
+        "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",
+          d.textSize
+        ),
+        onBlur: (h) => {
+          h.currentTarget.value.length !== 0 && D?.(h.currentTarget.value);
+        }
+      },
+      `${c}-${u}`
+    ) }),
+    /* @__PURE__ */ i("div", { className: "mt-2 grid grid-cols-7 gap-1", children: V.map((h) => /* @__PURE__ */ i(
+      "div",
+      {
+        className: b(
+          "h-[22px] text-center text-kumo-subtle",
+          d.cellWidth,
+          d.textSize
+        ),
+        children: h
+      },
+      h
+    )) })
+  ] });
+}
+function Y({
+  timezone: c,
+  size: u = k.size,
+  reset: g
+}) {
+  const D = y(u);
+  return /* @__PURE__ */ M(
+    "div",
+    {
+      className: b("flex items-center gap-2 text-kumo-strong", D.textSize),
+      children: [
+        /* @__PURE__ */ i(P, { size: D.iconSize }),
+        /* @__PURE__ */ M("span", { className: "flex-1", children: [
+          "Timezone: ",
+          c
+        ] }),
+        /* @__PURE__ */ i(
+          "button",
+          {
+            type: "button",
+            onClick: g,
+            className: "cursor-pointer font-semibold text-kumo-default underline underline-offset-2",
+            children: "Reset Dates"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  J as D
+};
+//# sourceMappingURL=date-range-picker-CbKEQ9pi.js.map

package/dist/date-range-picker-CbKEQ9pi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker-CbKEQ9pi.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\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  size?: KumoDateRangePickerSize;\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\nexport interface DateRangePickerProps extends KumoDateRangePickerVariantsProps {\n  /** Callback fired when start date changes */\n  onStartDateChange: (date: Date | null) => void;\n  /** Callback fired when end date changes */\n  onEndDateChange: (date: Date | null) => void;\n  /** Display timezone (display only) */\n  timezone?: string;\n  /** Additional CSS classes */\n  className?: string;\n}\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\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/dialog-B1TaN0oR.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { S as c } from "./surface-BIC6CXiz.js";
+import { c as s } from "./cn-Bhsu1vx2.js";
+import { a9 as g, aa as d, ab as p, ac as m, ad as D, ae as f, af as u, ag as x } from "./vendor-base-ui-DWIDNgE1.js";
+const y = {
+  size: {
+    base: {
+      classes: "min-w-96",
+      description: "Default dialog width"
+    },
+    sm: {
+      classes: "min-w-72",
+      description: "Small dialog for simple confirmations"
+    },
+    lg: {
+      classes: "min-w-[32rem]",
+      description: "Large dialog for complex content"
+    },
+    xl: {
+      classes: "min-w-[48rem]",
+      description: "Extra large dialog for detailed views"
+    }
+  }
+}, t = {
+  size: "base"
+};
+function w({
+  size: i = t.size
+} = {}) {
+  return s(
+    // Base styles
+    "shadow-m z-modal fixed top-1/2 left-1/2 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",
+    // Apply size from KUMO_DIALOG_VARIANTS
+    y.size[i].classes
+  );
+}
+function T({
+  className: i,
+  children: e,
+  style: l,
+  size: n = t.size
+}) {
+  return /* @__PURE__ */ r(f, { children: [
+    /* @__PURE__ */ o(u, { className: "z-modal fixed inset-0 bg-kumo-overlay opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0" }),
+    /* @__PURE__ */ o(
+      c,
+      {
+        as: x,
+        className: s(w({ size: n }), i),
+        style: {
+          transitionProperty: "scale, opacity",
+          transitionTimingFunction: "var(--default-transition-timing-function)",
+          "--tw-shadow": "0 20px 25px -5px rgb(0 0 0 / 0.03), 0 8px 10px -6px rgb(0 0 0 / 0.03)",
+          ...l
+        },
+        children: e
+      }
+    )
+  ] });
+}
+const a = Object.assign(T, {
+  Root: D,
+  Trigger: m,
+  Title: p,
+  Description: d,
+  Close: g
+}), h = a.Root, v = a.Trigger, C = a.Title, O = a.Description, S = a.Close;
+export {
+  a as D,
+  h as a,
+  v as b,
+  C as c,
+  O as d,
+  S as e
+};
+//# sourceMappingURL=dialog-B1TaN0oR.js.map

package/dist/dialog-B1TaN0oR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-B1TaN0oR.js","sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import type { CSSProperties, FC, ReactNode } from \"react\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport { Surface } from \"../surface\";\nimport { cn } from \"../../utils/cn\";\n\nexport const KUMO_DIALOG_VARIANTS = {\n  size: {\n    base: {\n      classes: \"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} as const;\n\nexport const KUMO_DIALOG_DEFAULT_VARIANTS = {\n  size: \"base\",\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;\n\nexport interface KumoDialogVariantsProps {\n  size?: KumoDialogSize;\n}\n\nexport function dialogVariants({\n  size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n}: KumoDialogVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"shadow-m z-modal fixed top-1/2 left-1/2 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\nexport type DialogProps = KumoDialogVariantsProps & {\n  className?: string;\n  children: ReactNode;\n  style?: CSSProperties;\n};\n\nfunction DialogContent({\n  className,\n  children,\n  style,\n  size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n}: DialogProps) {\n  return (\n    <DialogBase.Portal>\n      <DialogBase.Backdrop className=\"z-modal fixed inset-0 bg-kumo-overlay opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\" />\n      <Surface\n        as={DialogBase.Popup}\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      </Surface>\n    </DialogBase.Portal>\n  );\n}\n\ntype DialogComponent = FC<DialogProps> & {\n  Root: typeof DialogBase.Root;\n  Trigger: typeof DialogBase.Trigger;\n  Title: typeof DialogBase.Title;\n  Description: typeof DialogBase.Description;\n  Close: typeof DialogBase.Close;\n};\n\nconst Dialog = Object.assign(DialogContent, {\n  Root: DialogBase.Root,\n  Trigger: DialogBase.Trigger,\n  Title: DialogBase.Title,\n  Description: DialogBase.Description,\n  Close: DialogBase.Close,\n}) as DialogComponent;\n\nconst DialogRoot = Dialog.Root;\nconst DialogTrigger = Dialog.Trigger;\nconst DialogTitle = Dialog.Title;\nconst DialogDescription = Dialog.Description;\nconst DialogClose = Dialog.Close;\n\nexport {\n  Dialog,\n  DialogRoot,\n  DialogTrigger,\n  DialogTitle,\n  DialogDescription,\n  DialogClose,\n};\n"],"names":["KUMO_DIALOG_VARIANTS","KUMO_DIALOG_DEFAULT_VARIANTS","dialogVariants","size","cn","DialogContent","className","children","style","jsxs","DialogBase.Portal","jsx","DialogBase.Backdrop","Surface","DialogBase.Popup","Dialog","DialogBase.Root","DialogBase.Trigger","DialogBase.Title","DialogBase.Description","DialogBase.Close","DialogRoot","DialogTrigger","DialogTitle","DialogDescription","DialogClose"],"mappings":";;;;;AAKO,MAAMA,IAAuB;AAAA,EAClC,MAAM;AAAA,IACJ,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA+B;AAAA,EAC1C,MAAM;AACR;AAoEO,SAASC,EAAe;AAAA,EAC7B,MAAAC,IAAOF,EAA6B;AACtC,IAA6B,IAAI;AAC/B,SAAOG;AAAA;AAAA,IAEL;AAAA;AAAA,IAEAJ,EAAqB,KAAKG,CAAI,EAAE;AAAA,EAAA;AAEpC;AAQA,SAASE,EAAc;AAAA,EACrB,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAL,IAAOF,EAA6B;AACtC,GAAgB;AACd,SACE,gBAAAQ,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAoB,WAAU,yIAAA,CAAyI;AAAA,IACxK,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,IAAIC;AAAAA,QACJ,WAAWV,EAAGF,EAAe,EAAE,MAAAC,EAAA,CAAM,GAAGG,CAAS;AAAA,QACjD,OACE;AAAA,UACE,oBAAoB;AAAA,UACpB,0BACE;AAAA,UACF,eACE;AAAA,UACF,GAAGE;AAAA,QAAA;AAAA,QAIN,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;AAUA,MAAMQ,IAAS,OAAO,OAAOV,GAAe;AAAA,EAC1C,MAAMW;AAAAA,EACN,SAASC;AAAAA,EACT,OAAOC;AAAAA,EACP,aAAaC;AAAAA,EACb,OAAOC;AACT,CAAC,GAEKC,IAAaN,EAAO,MACpBO,IAAgBP,EAAO,SACvBQ,IAAcR,EAAO,OACrBS,IAAoBT,EAAO,aAC3BU,IAAcV,EAAO;"}