npm - @signalflare-ai/ui - Versions diffs - 1.2.0 → 1.3.0 - Mend

@signalflare-ai/ui 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (317) hide show

package/dist/{date-range-picker-DVa7QBqE.js → date-range-picker-YKYvum_r.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
+import { t as cn } from "./cn-CmAOpn49.js";
 import { useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CaretLeftIcon, CaretRightIcon, GlobeHemisphereWestIcon } from "@phosphor-icons/react";
@@ -56,15 +56,6 @@ function dateRangePickerVariants({ size = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.
 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",
@@ -190,7 +181,7 @@ function DateRangePicker({ onStartDateChange, onEndDateChange, size = SF_DATE_RA
 						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,
+							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) ? 5 : index < getMonthsStartingDay(viewingMonth, 0) ? 0 : index > getNumberOfDaysInMonth(viewingMonth, 0) + getMonthsStartingDay(viewingMonth, 0) - 1 ? 0 : isDateEqual(getDateFromIndex(viewingMonth, 0, index), startDate) ? 2 : isDateEqual(getDateFromIndex(viewingMonth, 0, index), endDate) ? 3 : startDate && getDateFromIndex(viewingMonth, 0, index) >= startDate && endDate && getDateFromIndex(viewingMonth, 0, index) <= endDate ? 4 : startDate && !endDate && hoveringDate && hoveringDate > startDate && getDateFromIndex(viewingMonth, 0, index) <= hoveringDate && getDateFromIndex(viewingMonth, 0, index) > startDate ? 4 : 1,
 							onClick: (date) => {
 								if (!startDate || date < startDate) {
 									handleStartDateChange(date);
@@ -228,7 +219,7 @@ function DateRangePicker({ onStartDateChange, onEndDateChange, size = SF_DATE_RA
 						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,
+							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) ? 5 : index < getMonthsStartingDay(viewingMonth, 1) ? 0 : index > getNumberOfDaysInMonth(viewingMonth, 1) + getMonthsStartingDay(viewingMonth, 1) - 1 ? 0 : isDateEqual(getDateFromIndex(viewingMonth, 1, index), startDate) ? 2 : isDateEqual(getDateFromIndex(viewingMonth, 1, index), endDate) ? 3 : startDate && getDateFromIndex(viewingMonth, 1, index) >= startDate && endDate && getDateFromIndex(viewingMonth, 1, index) <= endDate ? 4 : startDate && !endDate && hoveringDate && hoveringDate > startDate && getDateFromIndex(viewingMonth, 1, index) <= hoveringDate && getDateFromIndex(viewingMonth, 1, index) > startDate ? 4 : 1,
 							onClick: (date) => {
 								if (!startDate || date < startDate) {
 									handleStartDateChange(date);
@@ -259,42 +250,41 @@ function DateRangeDayCell({ date, mode, size = SF_DATE_RANGE_PICKER_DEFAULT_VARI
 	}, []);
 	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";
+			case 0: return "bg-transparent";
+			case 1: return "bg-transparent";
+			case 2: return "!bg-sf-contrast rounded-tl-[5px] rounded-bl-[5px]";
+			case 3: return "!bg-sf-contrast rounded-tr-[5px] rounded-br-[5px]";
+			case 4: return "bg-sf-interact";
+			case 5: 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";
+			case 0:
+			case 5: return "!text-sf-strong";
+			case 2:
+			case 3: 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(),
+		"aria-label": useCallback(() => {
+			const dateStr = date.toLocaleDateString("en-US", {
+				weekday: "long",
+				month: "long",
+				day: "numeric",
+				year: "numeric"
+			});
+			switch (mode) {
+				case 2: return `${dateStr}, selected as start date`;
+				case 3: return `${dateStr}, selected as end date`;
+				case 4: return `${dateStr}, within selected range`;
+				default: return dateStr;
+			}
+		}, [date, mode])(),
 		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()),
+		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 !== 0 && mode !== 5 ? "hover:bg-sf-interact" : "", getBackgroundColor(), getTextColor()),
 		onClick: () => onClick?.(date),
 		onMouseOver: () => isHoveringDate?.(date),
 		onFocus: () => isHoveringDate?.(date),
@@ -344,4 +334,4 @@ function DateRangeFooter({ timezone, size = SF_DATE_RANGE_PICKER_DEFAULT_VARIANT
 //#endregion
 export { DateRangePicker as t };
-//# sourceMappingURL=date-range-picker-DVa7QBqE.js.map
+//# sourceMappingURL=date-range-picker-YKYvum_r.js.map

package/dist/{date-range-picker-DVa7QBqE.js.map → date-range-picker-YKYvum_r.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-range-picker-DVa7QBqE.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":"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"}
1	+ {"version":3,"file":"date-range-picker-YKYvum_r.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":"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"}

package/dist/{dialog-Bv1oSFOd.js → dialog-DYqu4aDO.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
-import { t as Surface } from "./surface-DGwRlC0o.js";
+import { t as cn } from "./cn-CmAOpn49.js";
+import { t as Surface } from "./surface-CWdSFVUx.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/components/dialog/dialog.tsx
@@ -101,4 +101,4 @@ var Dialog$1 = Object.assign(DialogContent, {
 //#endregion
 export { DialogTitle as a, DialogRoot as i, DialogClose as n, DialogTrigger as o, DialogDescription as r, Dialog$1 as t };
-//# sourceMappingURL=dialog-Bv1oSFOd.js.map
+//# sourceMappingURL=dialog-DYqu4aDO.js.map

package/dist/{dialog-Bv1oSFOd.js.map → dialog-DYqu4aDO.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dialog-Bv1oSFOd.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"}
1	+ {"version":3,"file":"dialog-DYqu4aDO.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;CACf;CACA,IAAI;EACF,SAAS;EACT,aAAa;CACf;CACA,IAAI;EACF,SAAS;EACT,aAAa;CACf;CACA,IAAI;EACF,SAAS;EACT,aAAa;CACf;AACF,EACF;AAEA,IAAa,6BAA6B,EACxC,MAAM,OACR;AA4EA,SAAgB,eAAe,EAC7B,OAAO,2BAA2B,SACT,CAAC,GAAG;CAC7B,OAAO,GAEL,wUAEA,mBAAmB,KAAK,MAAM,OAChC;AACF;;;;;;;;;;;;;;;;;AA0CA,SAAS,cAAc,EACrB,WACA,UACA,OACA,OAAO,2BAA2B,QACpB;CACd,OACE,qBAAC,OAAW,QAAZ,EAAA,UAAA,CACE,oBAAC,OAAW,UAAZ,EAAqB,WAAU,+HAAgI,CAAA,GAC/J,oBAAC,SAAD;EACE,IAAI,OAAW;EACf,WAAW,GAAG,eAAe,EAAE,KAAK,CAAC,GAAG,SAAS;EACjD,OACE;GACE,oBAAoB;GACpB,0BACE;GACF,eACE;GACF,GAAG;EACL;EAGD;CACM,CAAA,CACQ,EAAA,CAAA;AAEvB;AAUA,SAAS,WAAW,EAAE,UAAU,GAAG,SAA0B;CAC3D,OAAO,oBAAC,OAAW,MAAZ;EAAiB,GAAI;EAAQ;CAA0B,CAAA;AAChE;AAEA,WAAW,cAAc;AAYzB,SAAS,cAAc,EAAE,UAAU,GAAG,SAA6B;CACjE,OAAO,oBAAC,OAAW,SAAZ;EAAoB,GAAI;EAAQ;CAA6B,CAAA;AACtE;AAEA,cAAc,cAAc;AAU5B,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;CAC9D,OACE,oBAAC,OAAW,OAAZ;EACE,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc;AAY1B,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAiC;CAC1E,OACE,oBAAC,OAAW,aAAZ;EACE,WAAW,GAAG,0BAA0B,SAAS;EACjD,GAAI;CACL,CAAA;AAEL;AAEA,kBAAkB,cAAc;AAUhC,SAAS,YAAY,EAAE,UAAU,GAAG,SAA2B;CAC7D,OAAO,oBAAC,OAAW,OAAZ;EAAkB,GAAI;EAAQ;CAA2B,CAAA;AAClE;AAEA,YAAY,cAAc;AAM1B,IAAM,WAAS,OAAO,OAAO,eAAe;CAC1C,MAAM;CACN,SAAS;CACT,OAAO;CACP,aAAa;CACb,OAAO;AACT,CAAC"}