@cloudraker/reki 2.6.1

package/dist/chunks/date-range-picker-c8ttrfaos9mb1w5n.js

@@ -0,0 +1,408 @@
+"use client";
+import { jsxs as M, jsx as l } 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 f } from "./cn-ct4n7r74mh8y0f48.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-reki-overlay",
+      description: "Default calendar appearance"
+    },
+    subtle: {
+      classes: "bg-reki-base",
+      description: "Subtle calendar with minimal background"
+    }
+  }
+}, k = {
+  size: "base",
+  variant: "default"
+};
+function V({
+  size: c = k.size,
+  variant: u = k.variant
+} = {}) {
+  return f(
+    // 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 Y = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function J({
+  onStartDateChange: c,
+  onEndDateChange: u,
+  size: g = k.size,
+  variant: d = k.variant,
+  timezone: b = "New York, NY, USA (GMT-4)",
+  className: h
+}) {
+  const [a, E] = C(null), [o, R] = C(null), [n, x] = C(/* @__PURE__ */ new Date()), [v, w] = C(null), z = y(g), A = (r) => {
+    E(r), c(r);
+  }, W = (r) => {
+    R(r), u(r);
+  }, T = p((r, e) => {
+    const t = new Date(r);
+    return t.setMonth(t.getMonth() + (e || 0)), t.toLocaleString("default", { month: "long" });
+  }, []), I = p((r, e) => {
+    const t = new Date(r);
+    return t.setMonth(t.getMonth() + (e || 0)), t.getFullYear();
+  }, []), D = p(
+    (r, e) => {
+      const t = new Date(r);
+      return t.setDate(1), t.setMonth(t.getMonth() + (e || 0)), t.getDay();
+    },
+    []
+  ), m = p(
+    (r, e) => {
+      const t = new Date(r);
+      return t.setDate(1), t.setMonth(t.getMonth() + (e || 0)), t.setMonth(t.getMonth() + 1), t.setDate(0), t.getDate();
+    },
+    []
+  ), H = p((r) => {
+    x((e) => {
+      const t = new Date(e);
+      return t.setMonth(t.getMonth() + r), t;
+    });
+  }, []), s = p(
+    (r, e, t) => {
+      const S = D(r, e);
+      if (t < S) {
+        const i = new Date(r);
+        return i.setMonth(i.getMonth() + e), i.setDate(1), i.setDate(i.getDate() - (S - t)), i;
+      } else if (t > m(r, e) + S - 1) {
+        const i = new Date(r);
+        return i.setMonth(i.getMonth() + e), i.setMonth(i.getMonth() + 1), i.setDate(
+          t - m(r, e) - S + 1
+        ), i;
+      } else {
+        const i = new Date(r);
+        return i.setMonth(i.getMonth() + e), i.setDate(t - S + 1), i;
+      }
+    },
+    [D, m]
+  ), N = p((r, e) => !r || !e ? !1 : r.toDateString() === e.toDateString(), []);
+  return /* @__PURE__ */ M("div", { className: f(V({ size: g, variant: d }), h), children: [
+    /* @__PURE__ */ M("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ M("div", { className: f("relative", z.calendarWidth), children: [
+        /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Previous month",
+            className: "absolute top-0 left-0 cursor-pointer rounded bg-reki-interact/85 p-1.5 hover:bg-reki-interact",
+            onClick: () => H(-1),
+            children: /* @__PURE__ */ l(L, { size: z.iconSize })
+          }
+        ),
+        /* @__PURE__ */ l(
+          $,
+          {
+            month: T(n),
+            year: I(n),
+            size: g,
+            updateCurrentMonth: (r) => {
+              x(new Date(r));
+            }
+          }
+        ),
+        /* @__PURE__ */ l("div", { className: "grid grid-cols-7 gap-0 gap-y-0.5", children: Array.from({ length: 42 }).map((r, e) => /* @__PURE__ */ l(
+          F,
+          {
+            date: s(n, 0, e),
+            size: g,
+            mode: (
+              // After current month range
+              a && o && s(n, 0, e) >= a && s(n, 0, e) <= o && e > m(n, 0) + D(n, 0) - 1 || // Before current month range
+              a && o && s(n, 0, e) >= a && s(n, 0, e) <= o && e < D(n, 0) ? 5 : (
+                // Before current month range
+                e < D(n, 0) || // After current month range
+                e > m(n, 0) + D(n, 0) - 1 ? 0 : (
+                  // Selected start date
+                  N(
+                    s(n, 0, e),
+                    a
+                  ) ? 2 : (
+                    // Selected end date
+                    N(
+                      s(n, 0, e),
+                      o
+                    ) ? 3 : (
+                      // Selected date range
+                      a && s(n, 0, e) >= a && o && s(n, 0, e) <= o || // Hovering past a starting date and no end date selected
+                      a && !o && v && v > a && s(n, 0, e) <= v && s(n, 0, e) > a ? 4 : (
+                        // Default to enabled date
+                        1
+                      )
+                    )
+                  )
+                )
+              )
+            ),
+            onClick: (t) => {
+              !a || t < a ? (A(t), w(t)) : W(t);
+            },
+            isHoveringDate: (t) => {
+              a && !o && t > a && w(t);
+            }
+          },
+          e
+        )) })
+      ] }),
+      /* @__PURE__ */ M("div", { className: f("relative", z.calendarWidth), children: [
+        /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Next month",
+            className: "absolute top-0 right-0 cursor-pointer rounded bg-reki-interact/85 p-1.5 hover:bg-reki-interact",
+            onClick: () => H(1),
+            children: /* @__PURE__ */ l(K, { size: z.iconSize })
+          }
+        ),
+        /* @__PURE__ */ l(
+          $,
+          {
+            month: T(n, 1),
+            year: I(n, 1),
+            size: g,
+            updateCurrentMonth: (r) => {
+              const e = new Date(r);
+              e.setMonth(e.getMonth() - 1), x(e);
+            }
+          }
+        ),
+        /* @__PURE__ */ l("div", { className: "grid grid-cols-7 gap-0 gap-y-0.5", children: Array.from({ length: 42 }).map((r, e) => /* @__PURE__ */ l(
+          F,
+          {
+            date: s(n, 1, e),
+            size: g,
+            mode: (
+              // After current month range
+              a && o && s(n, 1, e) >= a && s(n, 1, e) <= o && e > m(n, 1) + D(n, 1) - 1 || // Before current month range
+              a && o && s(n, 1, e) >= a && s(n, 1, e) <= o && e < D(n, 1) ? 5 : (
+                // Before current month range
+                e < D(n, 1) || // After current month range
+                e > m(n, 1) + D(n, 1) - 1 ? 0 : (
+                  // Selected start date
+                  N(
+                    s(n, 1, e),
+                    a
+                  ) ? 2 : (
+                    // Selected end date
+                    N(
+                      s(n, 1, e),
+                      o
+                    ) ? 3 : (
+                      // Selected date range
+                      a && s(n, 1, e) >= a && o && s(n, 1, e) <= o || // Hovering past a starting date and no end date selected
+                      a && !o && v && v > a && s(n, 1, e) <= v && s(n, 1, e) > a ? 4 : (
+                        // Default to enabled date
+                        1
+                      )
+                    )
+                  )
+                )
+              )
+            ),
+            onClick: (t) => {
+              !a || t < a ? (A(t), w(t)) : W(t);
+            },
+            isHoveringDate: (t) => {
+              a && !o && t > a && w(t);
+            }
+          },
+          e
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ l(
+      G,
+      {
+        timezone: b,
+        size: g,
+        reset: () => {
+          A(null), W(null);
+        }
+      }
+    )
+  ] });
+}
+function F({
+  date: c,
+  mode: u,
+  size: g = k.size,
+  onClick: d,
+  isHoveringDate: b
+}) {
+  const h = y(g), a = p((n) => n.getDate(), []), E = p(() => {
+    switch (u) {
+      case 0:
+        return "bg-transparent";
+      case 1:
+        return "bg-transparent";
+      case 2:
+        return "!bg-reki-contrast rounded-tl-[5px] rounded-bl-[5px]";
+      case 3:
+        return "!bg-reki-contrast rounded-tr-[5px] rounded-br-[5px]";
+      case 4:
+        return "bg-reki-interact";
+      case 5:
+        return "bg-reki-fill";
+    }
+  }, [u]), o = p(() => {
+    switch (u) {
+      case 0:
+      case 5:
+        return "!text-reki-subtle";
+      case 2:
+      case 3:
+        return "!text-reki-inverse";
+      default:
+        return "text-reki-default";
+    }
+  }, [u]), R = 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__ */ l(
+    "button",
+    {
+      type: "button",
+      "aria-label": R(),
+      id: c.toDateString(),
+      className: f(
+        h.cellHeight,
+        h.cellWidth,
+        h.textSize,
+        "cursor-pointer text-center text-reki-default transition-all duration-[50]",
+        `leading-[${h.cellHeight.replace("h-[", "").replace("]", "")}]`,
+        u !== 0 && u !== 5 ? "hover:bg-reki-interact" : "",
+        E(),
+        o()
+      ),
+      onClick: () => d?.(c),
+      onMouseOver: () => b?.(c),
+      onFocus: () => b?.(c),
+      children: a(c)
+    }
+  );
+}
+function $({
+  month: c,
+  year: u,
+  size: g = k.size,
+  updateCurrentMonth: d
+}) {
+  const b = y(g);
+  return /* @__PURE__ */ M("div", { children: [
+    /* @__PURE__ */ l("div", { className: "mb-3 text-center", children: /* @__PURE__ */ l(
+      "input",
+      {
+        "aria-label": "Edit month and year",
+        defaultValue: `${c} ${u}`,
+        className: f(
+          "w-full rounded-md border-none bg-transparent py-1.5 text-center font-semibold text-reki-default transition-all duration-200 focus:outline-none focus:ring-reki-focus/50 focus:ring-[1.5px]",
+          b.textSize
+        ),
+        onBlur: (h) => {
+          h.currentTarget.value.length !== 0 && d?.(h.currentTarget.value);
+        }
+      },
+      `${c}-${u}`
+    ) }),
+    /* @__PURE__ */ l("div", { className: "mt-2 grid grid-cols-7 gap-1", children: Y.map((h) => /* @__PURE__ */ l(
+      "div",
+      {
+        className: f(
+          "h-[22px] text-center text-reki-subtle",
+          b.cellWidth,
+          b.textSize
+        ),
+        children: h
+      },
+      h
+    )) })
+  ] });
+}
+function G({
+  timezone: c,
+  size: u = k.size,
+  reset: g
+}) {
+  const d = y(u);
+  return /* @__PURE__ */ M(
+    "div",
+    {
+      className: f("flex items-center gap-2 text-reki-subtle", d.textSize),
+      children: [
+        /* @__PURE__ */ l(P, { size: d.iconSize }),
+        /* @__PURE__ */ M("span", { className: "flex-1", children: [
+          "Timezone: ",
+          c
+        ] }),
+        /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            onClick: g,
+            className: "cursor-pointer font-semibold text-reki-default underline underline-offset-2",
+            children: "Reset Dates"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  J as D
+};
+//# sourceMappingURL=date-range-picker-c8ttrfaos9mb1w5n.js.map

package/dist/chunks/date-range-picker-c8ttrfaos9mb1w5n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker-c8ttrfaos9mb1w5n.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 REKI_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-reki-overlay\",\n      description: \"Default calendar appearance\",\n    },\n    subtle: {\n      classes: \"bg-reki-base\",\n      description: \"Subtle calendar with minimal background\",\n    },\n  },\n} as const;\n\nexport const REKI_DATE_RANGE_PICKER_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\n// Derived types from REKI_DATE_RANGE_PICKER_VARIANTS\nexport type RekiDateRangePickerSize =\n  keyof typeof REKI_DATE_RANGE_PICKER_VARIANTS.size;\nexport type RekiDateRangePickerVariant =\n  keyof typeof REKI_DATE_RANGE_PICKER_VARIANTS.variant;\n\nexport interface RekiDateRangePickerVariantsProps {\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?: RekiDateRangePickerSize;\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard appearance with overlay background\n   * - `\"subtle\"` — Minimal background\n   * @default \"default\"\n   */\n  variant?: RekiDateRangePickerVariant;\n}\n\nexport function dateRangePickerVariants({\n  size = REKI_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  variant = REKI_DATE_RANGE_PICKER_DEFAULT_VARIANTS.variant,\n}: RekiDateRangePickerVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex w-fit flex-col rounded-xl select-none\",\n    // Apply variant and size styles\n    REKI_DATE_RANGE_PICKER_VARIANTS.variant[variant].classes,\n    REKI_DATE_RANGE_PICKER_VARIANTS.size[size].classes,\n  );\n}\n\n// Helper to get size config\nfunction getSizeConfig(size: RekiDateRangePickerSize) {\n  return REKI_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 RekiDateRangePickerVariantsProps {\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 = REKI_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  variant = REKI_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-reki-interact/85 p-1.5 hover:bg-reki-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-reki-interact/85 p-1.5 hover:bg-reki-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 = REKI_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  onClick,\n  isHoveringDate,\n}: {\n  date: Date;\n  mode?: DateRangeCellMode;\n  size?: RekiDateRangePickerSize;\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-reki-contrast rounded-tl-[5px] rounded-bl-[5px]\";\n      case DateRangeCellMode.SELECTED_END_NODE:\n        return \"!bg-reki-contrast rounded-tr-[5px] rounded-br-[5px]\";\n      case DateRangeCellMode.SELECTED:\n        return \"bg-reki-interact\";\n      case DateRangeCellMode.SELECTED_OUT_OF_RANGE:\n        return \"bg-reki-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-reki-subtle\";\n      case DateRangeCellMode.SELECTED_START_NODE:\n      case DateRangeCellMode.SELECTED_END_NODE:\n        return \"!text-reki-inverse\";\n      default:\n        return \"text-reki-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-reki-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-reki-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 = REKI_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  updateCurrentMonth,\n}: {\n  month?: string;\n  year?: number;\n  size?: RekiDateRangePickerSize;\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-reki-default transition-all duration-200 focus:outline-none focus:ring-reki-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-reki-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 = REKI_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  reset,\n}: {\n  timezone?: string;\n  size?: RekiDateRangePickerSize;\n  reset?: () => void;\n}) {\n  const sizeConfig = getSizeConfig(size);\n\n  return (\n    <div\n      className={cn(\"flex items-center gap-2 text-reki-subtle\", 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-reki-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":["REKI_DATE_RANGE_PICKER_VARIANTS","REKI_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-m4go8xof25fospqo.js

@@ -0,0 +1,134 @@
+"use client";
+import { jsx as e, jsxs as C } from "react/jsx-runtime";
+import { useContext as P, createContext as v } from "react";
+import { L as R } from "./layer-card-kzu48dhzxm3e9p4u.js";
+import { c as x } from "./cn-ct4n7r74mh8y0f48.js";
+import { r as h } from "./resolve-variant-t8jcltsizeg29ege.js";
+import { u as b } from "./portal-provider-off76og7tjyz96ys.js";
+import { aq as d, ar as p, as as A, at as N, au as m, av as z, aw as I, ax as u, ay as D, az as f } from "./vendor-base-ui-bgl9g5nkvqy3tn36.js";
+const L = {
+  size: {
+    base: {
+      classes: "sm: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"
+    }
+  }
+}, s = {
+  size: "base",
+  role: "dialog"
+}, g = v("dialog");
+function l() {
+  return P(g);
+}
+function _({
+  size: a = s.size
+} = {}) {
+  return x(
+    // Base styles
+    "shadow-m ring ring-reki-line fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-reki-base text-reki-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 REKI_DIALOG_VARIANTS
+    h(L.size, a, s.size).classes
+  );
+}
+function $({
+  className: a,
+  children: o,
+  style: i,
+  size: t = s.size,
+  container: n
+}) {
+  const r = l(), c = b();
+  return /* @__PURE__ */ C(r === "alertdialog" ? u : u, { container: n ?? c ?? void 0, children: [
+    /* @__PURE__ */ e(r === "alertdialog" ? D : D, { className: "fixed inset-0 bg-reki-recessed opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0" }),
+    /* @__PURE__ */ e(
+      R,
+      {
+        render: /* @__PURE__ */ e(r === "alertdialog" ? f : f, {}),
+        className: x(_({ size: t }), a),
+        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)",
+          ...i
+        },
+        children: o
+      }
+    )
+  ] });
+}
+function y(a) {
+  if (a.role === "alertdialog") {
+    const { children: n, role: r, ...c } = a;
+    return /* @__PURE__ */ e(g.Provider, { value: r, children: /* @__PURE__ */ e(A, { ...c, children: n }) });
+  }
+  const {
+    children: o,
+    role: i = s.role,
+    ...t
+  } = a;
+  return /* @__PURE__ */ e(g.Provider, { value: i, children: /* @__PURE__ */ e(N, { ...t, children: o }) });
+}
+y.displayName = "Dialog.Root";
+function w({ children: a, ...o }) {
+  return l() === "alertdialog" ? /* @__PURE__ */ e(
+    z,
+    {
+      "data-reki-component": "Dialog",
+      "data-reki-part": "trigger",
+      ...o,
+      children: a
+    }
+  ) : /* @__PURE__ */ e(
+    I,
+    {
+      "data-reki-component": "Dialog",
+      "data-reki-part": "trigger",
+      ...o,
+      children: a
+    }
+  );
+}
+w.displayName = "Dialog.Trigger";
+function T({ className: a, ...o }) {
+  const t = l() === "alertdialog" ? m : m;
+  return /* @__PURE__ */ e(t, { className: a, ...o });
+}
+T.displayName = "Dialog.Title";
+function k({ className: a, ...o }) {
+  const t = l() === "alertdialog" ? p : p;
+  return /* @__PURE__ */ e(t, { className: a, ...o });
+}
+k.displayName = "Dialog.Description";
+function B({ children: a, ...o }) {
+  const t = l() === "alertdialog" ? d : d;
+  return /* @__PURE__ */ e(t, { "data-reki-component": "Dialog", "data-reki-part": "close", ...o, children: a });
+}
+B.displayName = "Dialog.Close";
+const J = Object.assign($, {
+  Root: y,
+  Trigger: w,
+  Title: T,
+  Description: k,
+  Close: B
+});
+export {
+  J as D,
+  B as a,
+  k as b,
+  y as c,
+  T as d,
+  w as e
+};
+//# sourceMappingURL=dialog-m4go8xof25fospqo.js.map

package/dist/chunks/dialog-m4go8xof25fospqo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-m4go8xof25fospqo.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 { resolveVariant } from \"../../utils/resolve-variant\";\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 REKI_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 REKI_DIALOG_DEFAULT_VARIANTS = {\n  size: \"base\",\n  role: \"dialog\",\n} as const;\n\nexport const REKI_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 REKI_DIALOG_VARIANTS\nexport type RekiDialogSize = keyof typeof REKI_DIALOG_VARIANTS.size;\nexport type RekiDialogRole = keyof typeof REKI_DIALOG_VARIANTS.role;\n\nexport interface RekiDialogVariantsProps {\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?: RekiDialogSize;\n}\n\n// ============================================================================\n// Dialog Role Context\n// ============================================================================\n\nconst DialogRoleContext = createContext<RekiDialogRole>(\"dialog\");\n\nfunction useDialogRole() {\n  return useContext(DialogRoleContext);\n}\n\nexport function dialogVariants({\n  size = REKI_DIALOG_DEFAULT_VARIANTS.size,\n}: RekiDialogVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"shadow-m ring ring-reki-line fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-reki-base text-reki-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 REKI_DIALOG_VARIANTS\n    resolveVariant(REKI_DIALOG_VARIANTS.size, size, REKI_DIALOG_DEFAULT_VARIANTS.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 = RekiDialogVariantsProps & {\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 `RekiPortalProvider` context.\n   * @default document.body (or RekiPortalProvider 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 = REKI_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-reki-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>;\ntype BaseAlertDialogRootProps = ComponentPropsWithoutRef<\n  typeof AlertDialogBase.Root\n>;\n\ntype StandardDialogRootProps = 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?: \"dialog\";\n};\n\ntype AlertDialogRootProps = BaseAlertDialogRootProps & {\n  role: \"alertdialog\";\n};\n\nexport type DialogRootProps = StandardDialogRootProps | AlertDialogRootProps;\n\nfunction DialogRoot(props: DialogRootProps) {\n  if (props.role === \"alertdialog\") {\n    const { children, role, ...rootProps } = props;\n\n    return (\n      <DialogRoleContext.Provider value={role}>\n        <AlertDialogBase.Root {...rootProps}>{children}</AlertDialogBase.Root>\n      </DialogRoleContext.Provider>\n    );\n  }\n\n  const {\n    children,\n    role = REKI_DIALOG_DEFAULT_VARIANTS.role,\n    ...rootProps\n  } = props;\n\n  return (\n    <DialogRoleContext.Provider value={role}>\n      <DialogBase.Root {...rootProps}>{children}</DialogBase.Root>\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>;\ntype BaseAlertDialogTriggerProps = ComponentPropsWithoutRef<\n  typeof AlertDialogBase.Trigger\n>;\n\nexport type DialogTriggerProps =\n  | BaseDialogTriggerProps\n  | BaseAlertDialogTriggerProps;\n\nfunction DialogTrigger({ children, ...props }: DialogTriggerProps) {\n  const role = useDialogRole();\n\n  if (role === \"alertdialog\") {\n    return (\n      <AlertDialogBase.Trigger\n        data-reki-component=\"Dialog\"\n        data-reki-part=\"trigger\"\n        {...(props as BaseAlertDialogTriggerProps)}\n      >\n        {children}\n      </AlertDialogBase.Trigger>\n    );\n  }\n\n  return (\n    <DialogBase.Trigger\n      data-reki-component=\"Dialog\"\n      data-reki-part=\"trigger\"\n      {...props}\n    >\n      {children}\n    </DialogBase.Trigger>\n  );\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 (\n    <BaseClose data-reki-component=\"Dialog\" data-reki-part=\"close\" {...props}>\n      {children}\n    </BaseClose>\n  );\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":["REKI_DIALOG_VARIANTS","REKI_DIALOG_DEFAULT_VARIANTS","DialogRoleContext","createContext","useDialogRole","useContext","dialogVariants","size","cn","resolveVariant","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","rootProps","AlertDialogBase.Root","DialogBase.Root","DialogTrigger","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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"}