@signalflare-ai/ui 0.5.0

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

@@ -0,0 +1,347 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CaretLeftIcon, CaretRightIcon, GlobeHemisphereWestIcon } from "@phosphor-icons/react";
+//#region src/components/date-range-picker/date-range-picker.tsx
+/** DateRangePicker size and variant definitions mapping names to their Tailwind classes. */
+var SF_DATE_RANGE_PICKER_VARIANTS = {
+	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-sf-overlay",
+			description: "Default calendar appearance"
+		},
+		subtle: {
+			classes: "bg-sf-base",
+			description: "Subtle calendar with minimal background"
+		}
+	}
+};
+var SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS = {
+	size: "base",
+	variant: "default"
+};
+function dateRangePickerVariants({ size = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size, variant = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.variant } = {}) {
+	return cn("flex w-fit flex-col rounded-xl select-none", SF_DATE_RANGE_PICKER_VARIANTS.variant[variant].classes, SF_DATE_RANGE_PICKER_VARIANTS.size[size].classes);
+}
+function getSizeConfig(size) {
+	return SF_DATE_RANGE_PICKER_VARIANTS.size[size];
+}
+var DateRangeCellMode = /* @__PURE__ */ function(DateRangeCellMode) {
+	DateRangeCellMode[DateRangeCellMode["OUT_OF_RANGE"] = 0] = "OUT_OF_RANGE";
+	DateRangeCellMode[DateRangeCellMode["ENABLED"] = 1] = "ENABLED";
+	DateRangeCellMode[DateRangeCellMode["SELECTED_START_NODE"] = 2] = "SELECTED_START_NODE";
+	DateRangeCellMode[DateRangeCellMode["SELECTED_END_NODE"] = 3] = "SELECTED_END_NODE";
+	DateRangeCellMode[DateRangeCellMode["SELECTED"] = 4] = "SELECTED";
+	DateRangeCellMode[DateRangeCellMode["SELECTED_OUT_OF_RANGE"] = 5] = "SELECTED_OUT_OF_RANGE";
+	return DateRangeCellMode;
+}(DateRangeCellMode || {});
+var DAYS_OF_WEEK = [
+	"Su",
+	"Mo",
+	"Tu",
+	"We",
+	"Th",
+	"Fr",
+	"Sa"
+];
+/**
+* DateRangePicker — dual-calendar date range selector.
+*
+* Renders two side-by-side month calendars with click-to-select start/end dates,
+* hover preview of the range, a timezone footer, and a reset button.
+*
+* @example
+* ```tsx
+* <DateRangePicker
+*   onStartDateChange={setStart}
+*   onEndDateChange={setEnd}
+* />
+* ```
+*
+* @deprecated Use {@link DatePicker} with `mode="range"` instead.
+*/
+function DateRangePicker({ onStartDateChange, onEndDateChange, size = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size, variant = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.variant, timezone = "New York, NY, USA (GMT-4)", className }) {
+	const [startDate, setStartDate] = useState(null);
+	const [endDate, setEndDate] = useState(null);
+	const [viewingMonth, setViewingMonth] = useState(/* @__PURE__ */ new Date());
+	const [hoveringDate, setHoveringDate] = useState(null);
+	const sizeConfig = getSizeConfig(size);
+	const handleStartDateChange = (date) => {
+		setStartDate(date);
+		onStartDateChange(date);
+	};
+	const handleEndDateChange = (date) => {
+		setEndDate(date);
+		onEndDateChange(date);
+	};
+	const getMonthName = useCallback((date, monthOffset) => {
+		const copyDate = new Date(date);
+		copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));
+		return copyDate.toLocaleString("default", { month: "long" });
+	}, []);
+	const getDateYear = useCallback((date, monthOffset) => {
+		const copyDate = new Date(date);
+		copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));
+		return copyDate.getFullYear();
+	}, []);
+	const getMonthsStartingDay = useCallback((date, monthOffset) => {
+		const copyDate = new Date(date);
+		copyDate.setDate(1);
+		copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));
+		return copyDate.getDay();
+	}, []);
+	const getNumberOfDaysInMonth = useCallback((date, monthOffset) => {
+		const copyDate = new Date(date);
+		copyDate.setDate(1);
+		copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));
+		copyDate.setMonth(copyDate.getMonth() + 1);
+		copyDate.setDate(0);
+		return copyDate.getDate();
+	}, []);
+	const adjustMonth = useCallback((monthOffset) => {
+		setViewingMonth((prev) => {
+			const newDate = new Date(prev);
+			newDate.setMonth(newDate.getMonth() + monthOffset);
+			return newDate;
+		});
+	}, []);
+	const getDateFromIndex = useCallback((date, monthOffset, index) => {
+		const startingDay = getMonthsStartingDay(date, monthOffset);
+		if (index < startingDay) {
+			const previousMonth = new Date(date);
+			previousMonth.setMonth(previousMonth.getMonth() + monthOffset);
+			previousMonth.setDate(1);
+			previousMonth.setDate(previousMonth.getDate() - (startingDay - index));
+			return previousMonth;
+		} else if (index > getNumberOfDaysInMonth(date, monthOffset) + startingDay - 1) {
+			const nextMonth = new Date(date);
+			nextMonth.setMonth(nextMonth.getMonth() + monthOffset);
+			nextMonth.setMonth(nextMonth.getMonth() + 1);
+			nextMonth.setDate(index - getNumberOfDaysInMonth(date, monthOffset) - startingDay + 1);
+			return nextMonth;
+		} else {
+			const newDate = new Date(date);
+			newDate.setMonth(newDate.getMonth() + monthOffset);
+			newDate.setDate(index - startingDay + 1);
+			return newDate;
+		}
+	}, [getMonthsStartingDay, getNumberOfDaysInMonth]);
+	const isDateEqual = useCallback((date1, date2) => {
+		if (!date1 || !date2) return false;
+		return date1.toDateString() === date2.toDateString();
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(dateRangePickerVariants({
+			size,
+			variant
+		}), className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex gap-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cn("relative", sizeConfig.calendarWidth),
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Previous month",
+						className: "absolute top-0 left-0 cursor-pointer rounded bg-sf-interact/85 p-1.5 hover:bg-sf-interact",
+						onClick: () => adjustMonth(-1),
+						children: /* @__PURE__ */ jsx(CaretLeftIcon, { size: sizeConfig.iconSize })
+					}),
+					/* @__PURE__ */ jsx(DateRangeMonthHeader, {
+						month: getMonthName(viewingMonth),
+						year: getDateYear(viewingMonth),
+						size,
+						updateCurrentMonth: (dateString) => {
+							setViewingMonth(new Date(dateString));
+						}
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "grid grid-cols-7 gap-0 gap-y-0.5",
+						children: Array.from({ length: 42 }).map((_, index) => /* @__PURE__ */ jsx(DateRangeDayCell, {
+							date: getDateFromIndex(viewingMonth, 0, index),
+							size,
+							mode: startDate && endDate && getDateFromIndex(viewingMonth, 0, index) >= startDate && getDateFromIndex(viewingMonth, 0, index) <= endDate && index > getNumberOfDaysInMonth(viewingMonth, 0) + getMonthsStartingDay(viewingMonth, 0) - 1 || startDate && endDate && getDateFromIndex(viewingMonth, 0, index) >= startDate && getDateFromIndex(viewingMonth, 0, index) <= endDate && index < getMonthsStartingDay(viewingMonth, 0) ? DateRangeCellMode.SELECTED_OUT_OF_RANGE : index < getMonthsStartingDay(viewingMonth, 0) ? DateRangeCellMode.OUT_OF_RANGE : index > getNumberOfDaysInMonth(viewingMonth, 0) + getMonthsStartingDay(viewingMonth, 0) - 1 ? DateRangeCellMode.OUT_OF_RANGE : isDateEqual(getDateFromIndex(viewingMonth, 0, index), startDate) ? DateRangeCellMode.SELECTED_START_NODE : isDateEqual(getDateFromIndex(viewingMonth, 0, index), endDate) ? DateRangeCellMode.SELECTED_END_NODE : startDate && getDateFromIndex(viewingMonth, 0, index) >= startDate && endDate && getDateFromIndex(viewingMonth, 0, index) <= endDate ? DateRangeCellMode.SELECTED : startDate && !endDate && hoveringDate && hoveringDate > startDate && getDateFromIndex(viewingMonth, 0, index) <= hoveringDate && getDateFromIndex(viewingMonth, 0, index) > startDate ? DateRangeCellMode.SELECTED : DateRangeCellMode.ENABLED,
+							onClick: (date) => {
+								if (!startDate || date < startDate) {
+									handleStartDateChange(date);
+									setHoveringDate(date);
+								} else handleEndDateChange(date);
+							},
+							isHoveringDate: (date) => {
+								if (startDate && !endDate && date > startDate) setHoveringDate(date);
+							}
+						}, index))
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: cn("relative", sizeConfig.calendarWidth),
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Next month",
+						className: "absolute top-0 right-0 cursor-pointer rounded bg-sf-interact/85 p-1.5 hover:bg-sf-interact",
+						onClick: () => adjustMonth(1),
+						children: /* @__PURE__ */ jsx(CaretRightIcon, { size: sizeConfig.iconSize })
+					}),
+					/* @__PURE__ */ jsx(DateRangeMonthHeader, {
+						month: getMonthName(viewingMonth, 1),
+						year: getDateYear(viewingMonth, 1),
+						size,
+						updateCurrentMonth: (dateString) => {
+							const date = new Date(dateString);
+							date.setMonth(date.getMonth() - 1);
+							setViewingMonth(date);
+						}
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "grid grid-cols-7 gap-0 gap-y-0.5",
+						children: Array.from({ length: 42 }).map((_, index) => /* @__PURE__ */ jsx(DateRangeDayCell, {
+							date: getDateFromIndex(viewingMonth, 1, index),
+							size,
+							mode: startDate && endDate && getDateFromIndex(viewingMonth, 1, index) >= startDate && getDateFromIndex(viewingMonth, 1, index) <= endDate && index > getNumberOfDaysInMonth(viewingMonth, 1) + getMonthsStartingDay(viewingMonth, 1) - 1 || startDate && endDate && getDateFromIndex(viewingMonth, 1, index) >= startDate && getDateFromIndex(viewingMonth, 1, index) <= endDate && index < getMonthsStartingDay(viewingMonth, 1) ? DateRangeCellMode.SELECTED_OUT_OF_RANGE : index < getMonthsStartingDay(viewingMonth, 1) ? DateRangeCellMode.OUT_OF_RANGE : index > getNumberOfDaysInMonth(viewingMonth, 1) + getMonthsStartingDay(viewingMonth, 1) - 1 ? DateRangeCellMode.OUT_OF_RANGE : isDateEqual(getDateFromIndex(viewingMonth, 1, index), startDate) ? DateRangeCellMode.SELECTED_START_NODE : isDateEqual(getDateFromIndex(viewingMonth, 1, index), endDate) ? DateRangeCellMode.SELECTED_END_NODE : startDate && getDateFromIndex(viewingMonth, 1, index) >= startDate && endDate && getDateFromIndex(viewingMonth, 1, index) <= endDate ? DateRangeCellMode.SELECTED : startDate && !endDate && hoveringDate && hoveringDate > startDate && getDateFromIndex(viewingMonth, 1, index) <= hoveringDate && getDateFromIndex(viewingMonth, 1, index) > startDate ? DateRangeCellMode.SELECTED : DateRangeCellMode.ENABLED,
+							onClick: (date) => {
+								if (!startDate || date < startDate) {
+									handleStartDateChange(date);
+									setHoveringDate(date);
+								} else handleEndDateChange(date);
+							},
+							isHoveringDate: (date) => {
+								if (startDate && !endDate && date > startDate) setHoveringDate(date);
+							}
+						}, index))
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsx(DateRangeFooter, {
+			timezone,
+			size,
+			reset: () => {
+				handleStartDateChange(null);
+				handleEndDateChange(null);
+			}
+		})]
+	});
+}
+function DateRangeDayCell({ date, mode, size = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size, onClick, isHoveringDate }) {
+	const sizeConfig = getSizeConfig(size);
+	const getDateNumberFromDate = useCallback((date) => {
+		return date.getDate();
+	}, []);
+	const getBackgroundColor = useCallback(() => {
+		switch (mode) {
+			case DateRangeCellMode.OUT_OF_RANGE: return "bg-transparent";
+			case DateRangeCellMode.ENABLED: return "bg-transparent";
+			case DateRangeCellMode.SELECTED_START_NODE: return "!bg-sf-contrast rounded-tl-[5px] rounded-bl-[5px]";
+			case DateRangeCellMode.SELECTED_END_NODE: return "!bg-sf-contrast rounded-tr-[5px] rounded-br-[5px]";
+			case DateRangeCellMode.SELECTED: return "bg-sf-interact";
+			case DateRangeCellMode.SELECTED_OUT_OF_RANGE: return "bg-sf-fill";
+		}
+	}, [mode]);
+	const getTextColor = useCallback(() => {
+		switch (mode) {
+			case DateRangeCellMode.OUT_OF_RANGE:
+			case DateRangeCellMode.SELECTED_OUT_OF_RANGE: return "!text-sf-strong";
+			case DateRangeCellMode.SELECTED_START_NODE:
+			case DateRangeCellMode.SELECTED_END_NODE: return "!text-sf-inverse";
+			default: return "text-sf-default";
+		}
+	}, [mode]);
+	const getAriaLabel = useCallback(() => {
+		const dateStr = date.toLocaleDateString("en-US", {
+			weekday: "long",
+			month: "long",
+			day: "numeric",
+			year: "numeric"
+		});
+		switch (mode) {
+			case DateRangeCellMode.SELECTED_START_NODE: return `${dateStr}, selected as start date`;
+			case DateRangeCellMode.SELECTED_END_NODE: return `${dateStr}, selected as end date`;
+			case DateRangeCellMode.SELECTED: return `${dateStr}, within selected range`;
+			default: return dateStr;
+		}
+	}, [date, mode]);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": getAriaLabel(),
+		id: date.toDateString(),
+		className: cn(sizeConfig.cellHeight, sizeConfig.cellWidth, sizeConfig.textSize, "cursor-pointer text-center text-sf-default transition-all duration-[50]", `leading-[${sizeConfig.cellHeight.replace("h-[", "").replace("]", "")}]`, mode !== DateRangeCellMode.OUT_OF_RANGE && mode !== DateRangeCellMode.SELECTED_OUT_OF_RANGE ? "hover:bg-sf-interact" : "", getBackgroundColor(), getTextColor()),
+		onClick: () => onClick?.(date),
+		onMouseOver: () => isHoveringDate?.(date),
+		onFocus: () => isHoveringDate?.(date),
+		children: getDateNumberFromDate(date)
+	});
+}
+function DateRangeMonthHeader({ month, year, size = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size, updateCurrentMonth }) {
+	const sizeConfig = getSizeConfig(size);
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+		className: "mb-3 text-center",
+		children: /* @__PURE__ */ jsx("input", {
+			"aria-label": "Edit month and year",
+			defaultValue: `${month} ${year}`,
+			className: cn("w-full rounded-md border-none bg-transparent py-1.5 text-center font-semibold text-sf-default transition-all duration-200 focus:outline-none", sizeConfig.textSize),
+			onBlur: (e) => {
+				if (e.currentTarget.value.length === 0) return;
+				updateCurrentMonth?.(e.currentTarget.value);
+			}
+		}, `${month}-${year}`)
+	}), /* @__PURE__ */ jsx("div", {
+		className: "mt-2 grid grid-cols-7 gap-1",
+		children: DAYS_OF_WEEK.map((day) => /* @__PURE__ */ jsx("div", {
+			className: cn("h-[22px] text-center text-sf-subtle", sizeConfig.cellWidth, sizeConfig.textSize),
+			children: day
+		}, day))
+	})] });
+}
+function DateRangeFooter({ timezone, size = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size, reset }) {
+	const sizeConfig = getSizeConfig(size);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2 text-sf-strong", sizeConfig.textSize),
+		children: [
+			/* @__PURE__ */ jsx(GlobeHemisphereWestIcon, { size: sizeConfig.iconSize }),
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex-1",
+				children: ["Timezone: ", timezone]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: reset,
+				className: "cursor-pointer font-semibold text-sf-default underline underline-offset-2",
+				children: "Reset Dates"
+			})
+		]
+	});
+}
+//#endregion
+export { DateRangePicker as t };
+
+//# sourceMappingURL=date-range-picker-D75LLINc.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker-D75LLINc.js","names":[],"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\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** DateRangePicker size and variant definitions mapping names to their Tailwind classes. */\nexport const SF_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-sf-overlay\",\n      description: \"Default calendar appearance\",\n    },\n    subtle: {\n      classes: \"bg-sf-base\",\n      description: \"Subtle calendar with minimal background\",\n    },\n  },\n} as const;\n\nexport const SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\n// Derived types from SF_DATE_RANGE_PICKER_VARIANTS\nexport type SFDateRangePickerSize =\n  keyof typeof SF_DATE_RANGE_PICKER_VARIANTS.size;\nexport type SFDateRangePickerVariant =\n  keyof typeof SF_DATE_RANGE_PICKER_VARIANTS.variant;\n\nexport interface SFDateRangePickerVariantsProps {\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?: SFDateRangePickerSize;\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard appearance with overlay background\n   * - `\"subtle\"` — Minimal background\n   * @default \"default\"\n   */\n  variant?: SFDateRangePickerVariant;\n}\n\nexport function dateRangePickerVariants({\n  size = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  variant = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.variant,\n}: SFDateRangePickerVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex w-fit flex-col rounded-xl select-none\",\n    // Apply variant and size styles\n    SF_DATE_RANGE_PICKER_VARIANTS.variant[variant].classes,\n    SF_DATE_RANGE_PICKER_VARIANTS.size[size].classes\n  );\n}\n\n// Helper to get size config\nfunction getSizeConfig(size: SFDateRangePickerSize) {\n  return SF_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 SFDateRangePickerVariantsProps {\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 = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  variant = SF_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-sf-interact/85 p-1.5 hover:bg-sf-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-sf-interact/85 p-1.5 hover:bg-sf-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 = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  onClick,\n  isHoveringDate,\n}: {\n  date: Date;\n  mode?: DateRangeCellMode;\n  size?: SFDateRangePickerSize;\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-sf-contrast rounded-tl-[5px] rounded-bl-[5px]\";\n      case DateRangeCellMode.SELECTED_END_NODE:\n        return \"!bg-sf-contrast rounded-tr-[5px] rounded-br-[5px]\";\n      case DateRangeCellMode.SELECTED:\n        return \"bg-sf-interact\";\n      case DateRangeCellMode.SELECTED_OUT_OF_RANGE:\n        return \"bg-sf-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-sf-strong\";\n      case DateRangeCellMode.SELECTED_START_NODE:\n      case DateRangeCellMode.SELECTED_END_NODE:\n        return \"!text-sf-inverse\";\n      default:\n        return \"text-sf-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-sf-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-sf-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 = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  updateCurrentMonth,\n}: {\n  month?: string;\n  year?: number;\n  size?: SFDateRangePickerSize;\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-sf-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-sf-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 = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  reset,\n}: {\n  timezone?: string;\n  size?: SFDateRangePickerSize;\n  reset?: () => void;\n}) {\n  const sizeConfig = getSizeConfig(size);\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-2 text-sf-strong\",\n        sizeConfig.textSize\n      )}\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-sf-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"],"mappings":";;;;;;;AAUA,IAAa,gCAAgC;CAC3C,MAAM;EACJ,IAAI;GACF,SAAS;GACT,YAAY;GACZ,WAAW;GACX,eAAe;GACf,UAAU;GACV,UAAU;GACV,aAAa;GACd;EACD,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,WAAW;GACX,eAAe;GACf,UAAU;GACV,UAAU;GACV,aAAa;GACd;EACD,IAAI;GACF,SAAS;GACT,YAAY;GACZ,WAAW;GACX,eAAe;GACf,UAAU;GACV,UAAU;GACV,aAAa;GACd;EACF;CACD,SAAS;EACP,SAAS;GACP,SAAS;GACT,aAAa;GACd;EACD,QAAQ;GACN,SAAS;GACT,aAAa;GACd;EACF;CACF;AAED,IAAa,wCAAwC;CACnD,MAAM;CACN,SAAS;CACV;AA0BD,SAAgB,wBAAwB,EACtC,OAAO,sCAAsC,MAC7C,UAAU,sCAAsC,YACd,EAAE,EAAE;AACtC,QAAO,GAEL,8CAEA,8BAA8B,QAAQ,SAAS,SAC/C,8BAA8B,KAAK,MAAM,QAC1C;;AAIH,SAAS,cAAc,MAA6B;AAClD,QAAO,8BAA8B,KAAK;;AAG5C,IAAK,oBAAL,yBAAA,mBAAA;AACE,mBAAA,kBAAA,kBAAA,KAAA;AACA,mBAAA,kBAAA,aAAA,KAAA;AACA,mBAAA,kBAAA,yBAAA,KAAA;AACA,mBAAA,kBAAA,uBAAA,KAAA;AACA,mBAAA,kBAAA,cAAA,KAAA;AACA,mBAAA,kBAAA,2BAAA,KAAA;;EANG,qBAAA,EAAA,CAOJ;AAED,IAAM,eAAe;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAK;;;;;;;;;;;;;;;;;AAwD/D,SAAgB,gBAAgB,EAC9B,mBACA,iBACA,OAAO,sCAAsC,MAC7C,UAAU,sCAAsC,SAChD,WAAW,6BACX,aACuB;CACvB,MAAM,CAAC,WAAW,gBAAgB,SAAsB,KAAK;CAC7D,MAAM,CAAC,SAAS,cAAc,SAAsB,KAAK;CACzD,MAAM,CAAC,cAAc,mBAAmB,yBAAe,IAAI,MAAM,CAAC;CAClE,MAAM,CAAC,cAAc,mBAAmB,SAAsB,KAAK;CAEnE,MAAM,aAAa,cAAc,KAAK;CAEtC,MAAM,yBAAyB,SAAsB;AACnD,eAAa,KAAK;AAClB,oBAAkB,KAAK;;CAGzB,MAAM,uBAAuB,SAAsB;AACjD,aAAW,KAAK;AAChB,kBAAgB,KAAK;;CAGvB,MAAM,eAAe,aAAa,MAAY,gBAAyB;EACrE,MAAM,WAAW,IAAI,KAAK,KAAK;AAC/B,WAAS,SAAS,SAAS,UAAU,IAAI,eAAe,GAAG;AAC3D,SAAO,SAAS,eAAe,WAAW,EAAE,OAAO,QAAQ,CAAC;IAC3D,EAAE,CAAC;CAEN,MAAM,cAAc,aAAa,MAAY,gBAAyB;EACpE,MAAM,WAAW,IAAI,KAAK,KAAK;AAC/B,WAAS,SAAS,SAAS,UAAU,IAAI,eAAe,GAAG;AAC3D,SAAO,SAAS,aAAa;IAC5B,EAAE,CAAC;CAEN,MAAM,uBAAuB,aAC1B,MAAY,gBAAyB;EACpC,MAAM,WAAW,IAAI,KAAK,KAAK;AAC/B,WAAS,QAAQ,EAAE;AACnB,WAAS,SAAS,SAAS,UAAU,IAAI,eAAe,GAAG;AAC3D,SAAO,SAAS,QAAQ;IAE1B,EAAE,CACH;CAED,MAAM,yBAAyB,aAC5B,MAAY,gBAAyB;EACpC,MAAM,WAAW,IAAI,KAAK,KAAK;AAC/B,WAAS,QAAQ,EAAE;AACnB,WAAS,SAAS,SAAS,UAAU,IAAI,eAAe,GAAG;AAC3D,WAAS,SAAS,SAAS,UAAU,GAAG,EAAE;AAC1C,WAAS,QAAQ,EAAE;AACnB,SAAO,SAAS,SAAS;IAE3B,EAAE,CACH;CAED,MAAM,cAAc,aAAa,gBAAwB;AACvD,mBAAiB,SAAS;GACxB,MAAM,UAAU,IAAI,KAAK,KAAK;AAC9B,WAAQ,SAAS,QAAQ,UAAU,GAAG,YAAY;AAClD,UAAO;IACP;IACD,EAAE,CAAC;CAEN,MAAM,mBAAmB,aACtB,MAAY,aAAqB,UAAkB;EAClD,MAAM,cAAc,qBAAqB,MAAM,YAAY;AAE3D,MAAI,QAAQ,aAAa;GAEvB,MAAM,gBAAgB,IAAI,KAAK,KAAK;AACpC,iBAAc,SAAS,cAAc,UAAU,GAAG,YAAY;AAC9D,iBAAc,QAAQ,EAAE;AACxB,iBAAc,QAAQ,cAAc,SAAS,IAAI,cAAc,OAAO;AACtE,UAAO;aAEP,QACA,uBAAuB,MAAM,YAAY,GAAG,cAAc,GAC1D;GAEA,MAAM,YAAY,IAAI,KAAK,KAAK;AAChC,aAAU,SAAS,UAAU,UAAU,GAAG,YAAY;AACtD,aAAU,SAAS,UAAU,UAAU,GAAG,EAAE;AAC5C,aAAU,QACR,QAAQ,uBAAuB,MAAM,YAAY,GAAG,cAAc,EACnE;AACD,UAAO;SACF;GAEL,MAAM,UAAU,IAAI,KAAK,KAAK;AAC9B,WAAQ,SAAS,QAAQ,UAAU,GAAG,YAAY;AAClD,WAAQ,QAAQ,QAAQ,cAAc,EAAE;AACxC,UAAO;;IAGX,CAAC,sBAAsB,uBAAuB,CAC/C;CAED,MAAM,cAAc,aAAa,OAAoB,UAAuB;AAC1E,MAAI,CAAC,SAAS,CAAC,MAAO,QAAO;AAC7B,SAAO,MAAM,cAAc,KAAK,MAAM,cAAc;IACnD,EAAE,CAAC;AAEN,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,wBAAwB;GAAE;GAAM;GAAS,CAAC,EAAE,UAAU;YAAzE,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAW,GAAG,YAAY,WAAW,cAAc;cAAxD;KACE,oBAAC,UAAD;MACE,MAAK;MACL,cAAW;MACX,WAAU;MACV,eAAe,YAAY,GAAG;gBAE9B,oBAAC,eAAD,EAAe,MAAM,WAAW,UAAY,CAAA;MACrC,CAAA;KAET,oBAAC,sBAAD;MACE,OAAO,aAAa,aAAa;MACjC,MAAM,YAAY,aAAa;MACzB;MACN,qBAAqB,eAAe;AAClC,uBAAgB,IAAI,KAAK,WAAW,CAAC;;MAEvC,CAAA;KAEF,oBAAC,OAAD;MAAK,WAAU;gBACZ,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAG,UAClC,oBAAC,kBAAD;OAEE,MAAM,iBAAiB,cAAc,GAAG,MAAM;OACxC;OACN,MAEG,aACC,WACA,iBAAiB,cAAc,GAAG,MAAM,IAAI,aAC5C,iBAAiB,cAAc,GAAG,MAAM,IAAI,WAC5C,QACE,uBAAuB,cAAc,EAAE,GACrC,qBAAqB,cAAc,EAAE,GACrC,KAEL,aACC,WACA,iBAAiB,cAAc,GAAG,MAAM,IAAI,aAC5C,iBAAiB,cAAc,GAAG,MAAM,IAAI,WAC5C,QAAQ,qBAAqB,cAAc,EAAE,GAC3C,kBAAkB,wBAElB,QAAQ,qBAAqB,cAAc,EAAE,GAC3C,kBAAkB,eAElB,QACE,uBAAuB,cAAc,EAAE,GACrC,qBAAqB,cAAc,EAAE,GACrC,IACF,kBAAkB,eAElB,YACI,iBAAiB,cAAc,GAAG,MAAM,EACxC,UACD,GACD,kBAAkB,sBAElB,YACI,iBAAiB,cAAc,GAAG,MAAM,EACxC,QACD,GACD,kBAAkB,oBAElB,aACE,iBAAiB,cAAc,GAAG,MAAM,IACtC,aACF,WACA,iBAAiB,cAAc,GAAG,MAAM,IACtC,UACF,kBAAkB,WAElB,aACE,CAAC,WACD,gBACA,eAAe,aACf,iBAAiB,cAAc,GAAG,MAAM,IACtC,gBACF,iBAAiB,cAAc,GAAG,MAAM,GACtC,YACF,kBAAkB,WAElB,kBAAkB;OAEpC,UAAU,SAAS;AACjB,YAAI,CAAC,aAAa,OAAO,WAAW;AAClC,+BAAsB,KAAK;AAC3B,yBAAgB,KAAK;cAErB,qBAAoB,KAAK;;OAG7B,iBAAiB,SAAS;AACxB,YAAI,aAAa,CAAC,WAAW,OAAO,UAClC,iBAAgB,KAAK;;OAGzB,EA3EK,MA2EL,CACF;MACE,CAAA;KACF;OACN,qBAAC,OAAD;IAAK,WAAW,GAAG,YAAY,WAAW,cAAc;cAAxD;KACE,oBAAC,UAAD;MACE,MAAK;MACL,cAAW;MACX,WAAU;MACV,eAAe,YAAY,EAAE;gBAE7B,oBAAC,gBAAD,EAAgB,MAAM,WAAW,UAAY,CAAA;MACtC,CAAA;KAET,oBAAC,sBAAD;MACE,OAAO,aAAa,cAAc,EAAE;MACpC,MAAM,YAAY,cAAc,EAAE;MAC5B;MACN,qBAAqB,eAAe;OAClC,MAAM,OAAO,IAAI,KAAK,WAAW;AACjC,YAAK,SAAS,KAAK,UAAU,GAAG,EAAE;AAClC,uBAAgB,KAAK;;MAEvB,CAAA;KAEF,oBAAC,OAAD;MAAK,WAAU;gBACZ,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAG,UAClC,oBAAC,kBAAD;OAEE,MAAM,iBAAiB,cAAc,GAAG,MAAM;OACxC;OACN,MAEG,aACC,WACA,iBAAiB,cAAc,GAAG,MAAM,IAAI,aAC5C,iBAAiB,cAAc,GAAG,MAAM,IAAI,WAC5C,QACE,uBAAuB,cAAc,EAAE,GACrC,qBAAqB,cAAc,EAAE,GACrC,KAEL,aACC,WACA,iBAAiB,cAAc,GAAG,MAAM,IAAI,aAC5C,iBAAiB,cAAc,GAAG,MAAM,IAAI,WAC5C,QAAQ,qBAAqB,cAAc,EAAE,GAC3C,kBAAkB,wBAElB,QAAQ,qBAAqB,cAAc,EAAE,GAC3C,kBAAkB,eAElB,QACE,uBAAuB,cAAc,EAAE,GACrC,qBAAqB,cAAc,EAAE,GACrC,IACF,kBAAkB,eAElB,YACI,iBAAiB,cAAc,GAAG,MAAM,EACxC,UACD,GACD,kBAAkB,sBAElB,YACI,iBAAiB,cAAc,GAAG,MAAM,EACxC,QACD,GACD,kBAAkB,oBAElB,aACE,iBAAiB,cAAc,GAAG,MAAM,IACtC,aACF,WACA,iBAAiB,cAAc,GAAG,MAAM,IACtC,UACF,kBAAkB,WAElB,aACE,CAAC,WACD,gBACA,eAAe,aACf,iBAAiB,cAAc,GAAG,MAAM,IACtC,gBACF,iBAAiB,cAAc,GAAG,MAAM,GACtC,YACF,kBAAkB,WAElB,kBAAkB;OAEpC,UAAU,SAAS;AACjB,YAAI,CAAC,aAAa,OAAO,WAAW;AAClC,+BAAsB,KAAK;AAC3B,yBAAgB,KAAK;cAErB,qBAAoB,KAAK;;OAG7B,iBAAiB,SAAS;AACxB,YAAI,aAAa,CAAC,WAAW,OAAO,UAClC,iBAAgB,KAAK;;OAGzB,EA3EK,MA2EL,CACF;MACE,CAAA;KACF;MACF;MAEN,oBAAC,iBAAD;GACY;GACJ;GACN,aAAa;AACX,0BAAsB,KAAK;AAC3B,wBAAoB,KAAK;;GAE3B,CAAA,CACE;;;AAIV,SAAS,iBAAiB,EACxB,MACA,MACA,OAAO,sCAAsC,MAC7C,SACA,kBAOC;CACD,MAAM,aAAa,cAAc,KAAK;CAEtC,MAAM,wBAAwB,aAAa,SAAe;AACxD,SAAO,KAAK,SAAS;IACpB,EAAE,CAAC;CAEN,MAAM,qBAAqB,kBAAkB;AAC3C,UAAQ,MAAR;GACE,KAAK,kBAAkB,aACrB,QAAO;GACT,KAAK,kBAAkB,QACrB,QAAO;GACT,KAAK,kBAAkB,oBACrB,QAAO;GACT,KAAK,kBAAkB,kBACrB,QAAO;GACT,KAAK,kBAAkB,SACrB,QAAO;GACT,KAAK,kBAAkB,sBACrB,QAAO;;IAEV,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,kBAAkB;AACrC,UAAQ,MAAR;GACE,KAAK,kBAAkB;GACvB,KAAK,kBAAkB,sBACrB,QAAO;GACT,KAAK,kBAAkB;GACvB,KAAK,kBAAkB,kBACrB,QAAO;GACT,QACE,QAAO;;IAEV,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,kBAAkB;EACrC,MAAM,UAAU,KAAK,mBAAmB,SAAS;GAC/C,SAAS;GACT,OAAO;GACP,KAAK;GACL,MAAM;GACP,CAAC;AACF,UAAQ,MAAR;GACE,KAAK,kBAAkB,oBACrB,QAAO,GAAG,QAAQ;GACpB,KAAK,kBAAkB,kBACrB,QAAO,GAAG,QAAQ;GACpB,KAAK,kBAAkB,SACrB,QAAO,GAAG,QAAQ;GACpB,QACE,QAAO;;IAEV,CAAC,MAAM,KAAK,CAAC;AAEhB,QACE,oBAAC,UAAD;EACE,MAAK;EACL,cAAY,cAAc;EAC1B,IAAI,KAAK,cAAc;EACvB,WAAW,GACT,WAAW,YACX,WAAW,WACX,WAAW,UACX,2EACA,YAAY,WAAW,WAAW,QAAQ,OAAO,GAAG,CAAC,QAAQ,KAAK,GAAG,CAAC,IACtE,SAAS,kBAAkB,gBACzB,SAAS,kBAAkB,wBACzB,yBACA,IACJ,oBAAoB,EACpB,cAAc,CACf;EACD,eAAe,UAAU,KAAK;EAC9B,mBAAmB,iBAAiB,KAAK;EACzC,eAAe,iBAAiB,KAAK;YAEpC,sBAAsB,KAAK;EACrB,CAAA;;AAIb,SAAS,qBAAqB,EAC5B,OACA,MACA,OAAO,sCAAsC,MAC7C,sBAMC;CACD,MAAM,aAAa,cAAc,KAAK;AAEtC,QACE,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,SAAD;GAEE,cAAW;GACX,cAAc,GAAG,MAAM,GAAG;GAC1B,WAAW,GACT,gJACA,WAAW,SACZ;GACD,SAAS,MAAM;AACb,QAAI,EAAE,cAAc,MAAM,WAAW,EAAG;AACxC,yBAAqB,EAAE,cAAc,MAAM;;GAE7C,EAXK,GAAG,MAAM,GAAG,OAWjB;EACE,CAAA,EAEN,oBAAC,OAAD;EAAK,WAAU;YACZ,aAAa,KAAK,QACjB,oBAAC,OAAD;GAEE,WAAW,GACT,uCACA,WAAW,WACX,WAAW,SACZ;aAEA;GACG,EARC,IAQD,CACN;EACE,CAAA,CACF,EAAA,CAAA;;AAIV,SAAS,gBAAgB,EACvB,UACA,OAAO,sCAAsC,MAC7C,SAKC;CACD,MAAM,aAAa,cAAc,KAAK;AAEtC,QACE,qBAAC,OAAD;EACE,WAAW,GACT,0CACA,WAAW,SACZ;YAJH;GAME,oBAAC,yBAAD,EAAyB,MAAM,WAAW,UAAY,CAAA;GACtD,qBAAC,QAAD;IAAM,WAAU;cAAhB,CAAyB,cAAW,SAAgB;;GACpD,oBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,WAAU;cACX;IAEQ,CAAA;GACL"}

package/dist/dialog-CyHEQXEY.js

@@ -0,0 +1,104 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { t as Surface } from "./surface-BduI7Ehl.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/dialog/dialog.tsx
+/** Dialog size variant definitions mapping sizes to their minimum widths. */
+var SF_DIALOG_VARIANTS = { 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"
+	}
+} };
+var SF_DIALOG_DEFAULT_VARIANTS = { size: "base" };
+function dialogVariants({ size = SF_DIALOG_DEFAULT_VARIANTS.size } = {}) {
+	return cn("shadow-m fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-sf-elevated text-sf-default p-6 duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0", SF_DIALOG_VARIANTS.size[size].classes);
+}
+/**
+* Modal dialog overlay with backdrop. Compound component with `Dialog.Root`,
+* `Dialog.Trigger`, `Dialog.Title`, `Dialog.Description`, and `Dialog.Close`.
+*
+* @example
+* ```tsx
+* <Dialog.Root>
+*   <Dialog.Trigger render={(p) => <Button {...p}>Delete</Button>} />
+*   <Dialog>
+*     <Dialog.Title>Delete Item</Dialog.Title>
+*     <Dialog.Description>This action cannot be undone.</Dialog.Description>
+*     <Dialog.Close render={(p) => <Button variant="destructive" {...p}>Delete</Button>} />
+*   </Dialog>
+* </Dialog.Root>
+* ```
+*/
+function DialogContent({ className, children, style, size = SF_DIALOG_DEFAULT_VARIANTS.size }) {
+	return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: "fixed inset-0 bg-sf-overlay opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0" }), /* @__PURE__ */ jsx(Surface, {
+		as: Dialog.Popup,
+		className: cn(dialogVariants({ size }), className),
+		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)",
+			...style
+		},
+		children
+	})] });
+}
+function DialogRoot({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		...props,
+		children
+	});
+}
+DialogRoot.displayName = "Dialog.Root";
+function DialogTrigger({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		...props,
+		children
+	});
+}
+DialogTrigger.displayName = "Dialog.Trigger";
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		className: cn("text-xl font-semibold text-sf-default", className),
+		...props
+	});
+}
+DialogTitle.displayName = "Dialog.Title";
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		className: cn("text-sm text-sf-subtle", className),
+		...props
+	});
+}
+DialogDescription.displayName = "Dialog.Description";
+function DialogClose({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		...props,
+		children
+	});
+}
+DialogClose.displayName = "Dialog.Close";
+var Dialog$1 = Object.assign(DialogContent, {
+	Root: DialogRoot,
+	Trigger: DialogTrigger,
+	Title: DialogTitle,
+	Description: DialogDescription,
+	Close: DialogClose
+});
+//#endregion
+export { DialogTitle as a, DialogRoot as i, DialogClose as n, DialogTrigger as o, DialogDescription as r, Dialog$1 as t };
+
+//# sourceMappingURL=dialog-CyHEQXEY.js.map

package/dist/dialog-CyHEQXEY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-CyHEQXEY.js","names":[],"sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Surface } from \"../surface\";\n\n/** Dialog size variant definitions mapping sizes to their minimum widths. */\nexport const SF_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} as const;\n\nexport const SF_DIALOG_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\nexport const SF_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 SF_DIALOG_VARIANTS\nexport type SFDialogSize = keyof typeof SF_DIALOG_VARIANTS.size;\n\nexport interface SFDialogVariantsProps {\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?: SFDialogSize;\n}\n\nexport function dialogVariants({\n  size = SF_DIALOG_DEFAULT_VARIANTS.size,\n}: SFDialogVariantsProps = {}) {\n  return cn(\n    // Base styles (includes default padding)\n    \"shadow-m fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-sf-elevated text-sf-default p-6 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 SF_DIALOG_VARIANTS\n    SF_DIALOG_VARIANTS.size[size].classes\n  );\n}\n\n/**\n * Dialog component props — the modal content panel.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger render={(p) => <Button {...p}>Open</Button>} />\n *   <Dialog>\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 = SFDialogVariantsProps & {\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\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>\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 */\nfunction DialogContent({\n  className,\n  children,\n  style,\n  size = SF_DIALOG_DEFAULT_VARIANTS.size,\n}: DialogProps) {\n  return (\n    <DialogBase.Portal>\n      <DialogBase.Backdrop className=\"fixed inset-0 bg-sf-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\n// ============================================================================\n// Dialog Root\n// ============================================================================\n\ntype BaseDialogRootProps = ComponentPropsWithoutRef<typeof DialogBase.Root>;\n\nexport type DialogRootProps = BaseDialogRootProps;\n\nfunction DialogRoot({ children, ...props }: DialogRootProps) {\n  return <DialogBase.Root {...props}>{children}</DialogBase.Root>;\n}\n\nDialogRoot.displayName = \"Dialog.Root\";\n\n// ============================================================================\n// Dialog Trigger\n// ============================================================================\n\ntype BaseDialogTriggerProps = ComponentPropsWithoutRef<\n  typeof DialogBase.Trigger\n>;\n\nexport type DialogTriggerProps = BaseDialogTriggerProps;\n\nfunction DialogTrigger({ children, ...props }: DialogTriggerProps) {\n  return <DialogBase.Trigger {...props}>{children}</DialogBase.Trigger>;\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  return (\n    <DialogBase.Title\n      className={cn(\"text-xl font-semibold text-sf-default\", className)}\n      {...props}\n    />\n  );\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  return (\n    <DialogBase.Description\n      className={cn(\"text-sm text-sf-subtle\", className)}\n      {...props}\n    />\n  );\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  return <DialogBase.Close {...props}>{children}</DialogBase.Close>;\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"],"mappings":";;;;;;;AAOA,IAAa,qBAAqB,EAChC,MAAM;CACJ,MAAM;EACJ,SAAS;EACT,aAAa;EACd;CACD,IAAI;EACF,SAAS;EACT,aAAa;EACd;CACD,IAAI;EACF,SAAS;EACT,aAAa;EACd;CACD,IAAI;EACF,SAAS;EACT,aAAa;EACd;CACF,EACF;AAED,IAAa,6BAA6B,EACxC,MAAM,QACP;AA4ED,SAAgB,eAAe,EAC7B,OAAO,2BAA2B,SACT,EAAE,EAAE;AAC7B,QAAO,GAEL,wUAEA,mBAAmB,KAAK,MAAM,QAC/B;;;;;;;;;;;;;;;;;;AA2CH,SAAS,cAAc,EACrB,WACA,UACA,OACA,OAAO,2BAA2B,QACpB;AACd,QACE,qBAAC,OAAW,QAAZ,EAAA,UAAA,CACE,oBAAC,OAAW,UAAZ,EAAqB,WAAU,gIAAiI,CAAA,EAChK,oBAAC,SAAD;EACE,IAAI,OAAW;EACf,WAAW,GAAG,eAAe,EAAE,MAAM,CAAC,EAAE,UAAU;EAClD,OACE;GACE,oBAAoB;GACpB,0BACE;GACF,eACE;GACF,GAAG;GACJ;EAGF;EACO,CAAA,CACQ,EAAA,CAAA;;AAYxB,SAAS,WAAW,EAAE,UAAU,GAAG,SAA0B;AAC3D,QAAO,oBAAC,OAAW,MAAZ;EAAiB,GAAI;EAAQ;EAA2B,CAAA;;AAGjE,WAAW,cAAc;AAYzB,SAAS,cAAc,EAAE,UAAU,GAAG,SAA6B;AACjE,QAAO,oBAAC,OAAW,SAAZ;EAAoB,GAAI;EAAQ;EAA8B,CAAA;;AAGvE,cAAc,cAAc;AAU5B,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAW,OAAZ;EACE,WAAW,GAAG,yCAAyC,UAAU;EACjE,GAAI;EACJ,CAAA;;AAIN,YAAY,cAAc;AAY1B,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAiC;AAC1E,QACE,oBAAC,OAAW,aAAZ;EACE,WAAW,GAAG,0BAA0B,UAAU;EAClD,GAAI;EACJ,CAAA;;AAIN,kBAAkB,cAAc;AAUhC,SAAS,YAAY,EAAE,UAAU,GAAG,SAA2B;AAC7D,QAAO,oBAAC,OAAW,OAAZ;EAAkB,GAAI;EAAQ;EAA4B,CAAA;;AAGnE,YAAY,cAAc;AAM1B,IAAM,WAAS,OAAO,OAAO,eAAe;CAC1C,MAAM;CACN,SAAS;CACT,OAAO;CACP,aAAa;CACb,OAAO;CACR,CAAC"}