@rebasepro/ui 0.24.0 → 0.24.1-canary.gcb918fc

package/dist/components/DateTimeField.es.js

@@ -0,0 +1,253 @@
+"use client";
+import { fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin } from "../styles.es.js";
+import { cls } from "../util/cls.es.js";
+import { useInjectStyles } from "../hooks/useInjectStyles.es.js";
+import { iconSize } from "../icons/Icon.es.js";
+import { Typography } from "./Typography.es.js";
+import { IconButton } from "./IconButton.es.js";
+import { InputLabel } from "./InputLabel.es.js";
+import { useUiLabels } from "../hooks/UiLabelsContext.es.js";
+import React, { useCallback, useId, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircleIcon, CalendarIcon, ClockIcon, XIcon } from "lucide-react";
+//#region src/components/DateTimeField.tsx
+/** The parts `<input type="date">` / `"datetime-local"` values are built from. */
+var INPUT_PARTS = {
+	year: "numeric",
+	month: "2-digit",
+	day: "2-digit",
+	hour: "2-digit",
+	minute: "2-digit",
+	hour12: false
+};
+/**
+* Formatters for named time zones, keyed by the IANA name ("UTC" included).
+*
+* Building an `Intl.DateTimeFormat` costs about ten times what formatting
+* with one does, and this field needs one per render and three per keystroke
+* when it has a `timezone`. A named zone's rules cannot change during a
+* session, so its formatter is built once; the map holds one entry per zone
+* a field has used. The local zone (no `timezone`) is NOT cached: a formatter
+* fixes the zone it resolved when it was built, while the parse side reads the
+* machine's zone live through `Date`, and a laptop can change zones with the
+* tab open.
+*/
+var zoneFormatters = /* @__PURE__ */ new Map();
+function inputPartsFormatter(timeZone) {
+	if (timeZone === void 0) return new Intl.DateTimeFormat("en-CA", INPUT_PARTS);
+	let formatter = zoneFormatters.get(timeZone);
+	if (!formatter) {
+		formatter = new Intl.DateTimeFormat("en-CA", {
+			...INPUT_PARTS,
+			timeZone
+		});
+		zoneFormatters.set(timeZone, formatter);
+	}
+	return formatter;
+}
+/** A UTC `Date` as the input's value string, in `timezone` (undefined = local). */
+function valueAsInputValue(dateValue, mode, timezone) {
+	if (!dateValue || !(dateValue instanceof Date) || isNaN(dateValue.getTime())) return "";
+	const parts = inputPartsFormatter(timezone).formatToParts(dateValue);
+	const getPart = (type) => parts.find((p) => p.type === type)?.value ?? "";
+	const year = getPart("year");
+	const month = getPart("month");
+	const day = getPart("day");
+	if (mode === "time") return `${getPart("hour")}:${getPart("minute")}`;
+	if (mode === "date") return `${year}-${month}-${day}`;
+	else return `${year}-${month}-${day}T${getPart("hour")}:${getPart("minute")}`;
+}
+var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date", error, size = "large", className, style, inputClassName, invisible, pickerButton = true, inputRef: inputRefProp, timezone, locale, "aria-label": ariaLabel }) => {
+	const inputRef = useRef(null);
+	const labels = useUiLabels();
+	const setInputRef = useCallback((node) => {
+		inputRef.current = node;
+		if (typeof inputRefProp === "function") inputRefProp(node);
+		else if (inputRefProp) inputRefProp.current = node;
+	}, [inputRefProp]);
+	const [focused, setFocused] = useState(false);
+	const inputId = useId();
+	const labelId = `${inputId}-label`;
+	const [internalValue, setInternalValue] = useState("");
+	const [isTyping, setIsTyping] = useState(false);
+	const invalidValue = value !== void 0 && value !== null && (!(value instanceof Date) || isNaN(value.getTime()));
+	const adornmentSize = size === "large" ? "medium" : size === "medium" ? "small" : "smallest";
+	useInjectStyles("DateTimeField", inputStyles);
+	const handleClear = (e) => {
+		e.preventDefault();
+		if (disabled) return;
+		setInternalValue("");
+		setIsTyping(false);
+		onChange?.(null);
+	};
+	const getTimezoneOffsetMinutes = (date, tz) => {
+		if (!tz) return -date.getTimezoneOffset();
+		const utcFormatter = inputPartsFormatter("UTC");
+		const tzFormatter = inputPartsFormatter(tz);
+		const utcParts = utcFormatter.formatToParts(date);
+		const tzParts = tzFormatter.formatToParts(date);
+		const getPart = (parts, type) => parseInt(parts.find((p) => p.type === type)?.value ?? "0", 10);
+		const utcDate = new Date(Date.UTC(getPart(utcParts, "year"), getPart(utcParts, "month") - 1, getPart(utcParts, "day"), getPart(utcParts, "hour"), getPart(utcParts, "minute")));
+		return (new Date(Date.UTC(getPart(tzParts, "year"), getPart(tzParts, "month") - 1, getPart(tzParts, "day"), getPart(tzParts, "hour"), getPart(tzParts, "minute"))).getTime() - utcDate.getTime()) / 6e4;
+	};
+	const handleInputChange = (e) => {
+		const inputValue = e.target.value;
+		setInternalValue(inputValue);
+		setIsTyping(true);
+		if (!inputValue) {
+			onChange?.(null);
+			return;
+		}
+		try {
+			let year, month, day, hours = 0, minutes = 0;
+			if (mode === "time") {
+				[year, month, day] = [
+					1970,
+					1,
+					1
+				];
+				[hours, minutes] = inputValue.split(":").map(Number);
+			} else if (mode === "date") [year, month, day] = inputValue.split("-").map(Number);
+			else {
+				const [datePart, timePart] = inputValue.split("T");
+				[year, month, day] = datePart.split("-").map(Number);
+				[hours, minutes] = timePart.split(":").map(Number);
+			}
+			let resultDate;
+			if (!timezone) {
+				resultDate = /* @__PURE__ */ new Date(0);
+				resultDate.setFullYear(year, month - 1, day);
+				resultDate.setHours(hours, minutes, 0, 0);
+			} else {
+				const wallClock = /* @__PURE__ */ new Date(0);
+				wallClock.setUTCFullYear(year, month - 1, day);
+				wallClock.setUTCHours(hours, minutes, 0, 0);
+				const wallClockAsUtc = wallClock.getTime();
+				const firstGuess = getTimezoneOffsetMinutes(new Date(wallClockAsUtc), timezone);
+				const offsetMinutes = getTimezoneOffsetMinutes(/* @__PURE__ */ new Date(wallClockAsUtc - firstGuess * 6e4), timezone);
+				resultDate = /* @__PURE__ */ new Date(wallClockAsUtc - offsetMinutes * 6e4);
+				if (getTimezoneOffsetMinutes(resultDate, timezone) !== offsetMinutes) resultDate = /* @__PURE__ */ new Date(wallClockAsUtc - firstGuess * 6e4);
+			}
+			if (isNaN(resultDate.getTime())) throw new Error("Invalid date");
+			onChange?.(resultDate);
+		} catch (e) {
+			return;
+		}
+	};
+	const valueTime = value instanceof Date ? value.getTime() : void 0;
+	const displayValue = React.useMemo(() => valueAsInputValue(valueTime === void 0 ? null : new Date(valueTime), mode, timezone), [
+		valueTime,
+		mode,
+		timezone
+	]);
+	const handleFocus = () => {
+		setFocused(true);
+		setIsTyping(true);
+		setInternalValue(valueAsInputValue(value ?? null, mode, timezone));
+	};
+	const handleBlur = () => {
+		setFocused(false);
+		setIsTyping(false);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: cls("rounded-lg relative max-w-full", !invisible && "bg-surface-field border border-hairline", disabled ? fieldBackgroundDisabledMixin : invisible ? "" : fieldBackgroundHoverMixin, {
+			"min-h-[28px]": size === "smallest",
+			"min-h-[32px]": size === "small",
+			"min-h-[40px]": size === "medium",
+			"min-h-[48px]": size === "large"
+		}, className),
+		style,
+		onClick: () => {
+			if (!disabled) inputRef.current?.focus();
+		},
+		children: [
+			label && /* @__PURE__ */ jsx(InputLabel, {
+				id: labelId,
+				htmlFor: inputId,
+				className: cls("absolute top-1 pointer-events-none", !error ? focused ? "text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-600 dark:text-red-500", disabled ? "opacity-50" : ""),
+				shrink: true,
+				children: label
+			}),
+			/* @__PURE__ */ jsx("input", {
+				ref: setInputRef,
+				id: inputId,
+				"aria-labelledby": label ? labelId : void 0,
+				"aria-label": label ? void 0 : ariaLabel,
+				type: mode === "date_time" ? "datetime-local" : mode === "time" ? "time" : "date",
+				lang: locale,
+				"aria-invalid": error || void 0,
+				value: isTyping ? internalValue : displayValue,
+				onChange: handleInputChange,
+				onFocus: handleFocus,
+				onBlur: handleBlur,
+				disabled,
+				className: cls("w-full outline-hidden bg-transparent leading-normal text-sm px-3", pickerButton ? clearable ? "pr-14" : "pr-12" : clearable ? "pr-12" : "", "rounded-lg", {
+					"min-h-[28px]": size === "smallest",
+					"min-h-[32px]": size === "small",
+					"min-h-[40px]": size === "medium",
+					"min-h-[48px]": size === "large"
+				}, label ? "pt-8 pb-2" : {
+					smallest: "py-0.5",
+					small: "py-1",
+					medium: "py-2",
+					large: "py-3"
+				}[size], inputClassName, disabled && "border border-transparent outline-hidden opacity-50 dark:opacity-50 text-surface-accent-600 dark:text-surface-accent-500")
+			}),
+			pickerButton && /* @__PURE__ */ jsx(IconButton, {
+				size: adornmentSize,
+				"aria-label": mode === "time" ? labels.openTimePicker : "Open calendar",
+				disabled,
+				onClick: (e) => {
+					e.stopPropagation();
+					try {
+						inputRef.current?.showPicker();
+					} catch {}
+				},
+				className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-surface-accent-500!",
+				children: mode === "time" ? /* @__PURE__ */ jsx(ClockIcon, {}) : /* @__PURE__ */ jsx(CalendarIcon, {})
+			}),
+			clearable && value && /* @__PURE__ */ jsx(IconButton, {
+				size: adornmentSize,
+				"aria-label": "Clear date",
+				disabled,
+				onClick: handleClear,
+				className: "absolute right-14 top-1/2 transform -translate-y-1/2 text-surface-accent-400 ",
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			})
+		]
+	}), invalidValue && /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center m-2",
+		children: [/* @__PURE__ */ jsx(AlertCircleIcon, {
+			size: iconSize.small,
+			color: "error"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "pl-2",
+			children: [/* @__PURE__ */ jsx(Typography, {
+				variant: "body2",
+				children: "Invalid date value for this field"
+			}), /* @__PURE__ */ jsx(Typography, {
+				variant: "body2",
+				children: `The provided value is: ${JSON.stringify(value)}`
+			})]
+		})]
+	})] });
+};
+var inputStyles = `
+    /* Hide the default calendar icon in Chrome, Safari, Edge, Opera */
+    input[type="date"]::-webkit-calendar-picker-indicator,
+    input[type="datetime-local"]::-webkit-calendar-picker-indicator,
+    input[type="time"]::-webkit-calendar-picker-indicator {
+        display: none;
+        -webkit-appearance: none;
+    }
+    /* Hide default calendar icon in Firefox */
+    input[type="date"],
+    input[type="datetime-local"],
+    input[type="time"] {
+        -moz-appearance:textfield;
+    }
+  `;
+//#endregion
+export { DateTimeField };
+
+//# sourceMappingURL=DateTimeField.es.js.map

package/dist/components/DateTimeField.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeField.es.js","names":[],"sources":["../../src/components/DateTimeField.tsx"],"sourcesContent":["\n\"use client\";\n\nimport React, { useCallback, useId, useRef, useState } from \"react\";\nimport { CalendarIcon, ClockIcon, XIcon, AlertCircleIcon } from \"lucide-react\";\nimport { iconSize } from \"../icons/Icon\";\nimport { IconButton } from \"./IconButton\";\nimport { fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin } from \"../styles\";\nimport { InputLabel } from \"./InputLabel\";\nimport { Typography } from \"./Typography\";\nimport { cls } from \"../util\";\nimport { useInjectStyles } from \"../hooks\";\nimport { useUiLabels } from \"../hooks/UiLabelsContext\";\n\n/**\n * What the field picks: a day, a day and a time, or a time of day alone. A\n * time of day is a `Date` on 1970-01-01 — how a `time` column travels — read\n * and written in `timezone`.\n */\nexport type DateTimeFieldMode = \"date\" | \"date_time\" | \"time\";\n\nexport type DateTimeFieldProps = {\n    value?: Date | null;\n    onChange?: (date: Date | null) => void;\n    mode?: DateTimeFieldMode;\n    disabled?: boolean;\n    clearable?: boolean;\n    error?: boolean;\n    size?: \"smallest\" | \"small\" | \"medium\" | \"large\";\n    label?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    inputClassName?: string;\n    invisible?: boolean;\n    /**\n     * Whether the field draws its own calendar button. A table cell turns it\n     * off: the cell draws one opener for every kind of editor, in the same\n     * place, and opens the picker through `inputRef`.\n     */\n    pickerButton?: boolean;\n    /** The native input, for a caller that opens the picker itself (`showPicker()`). */\n    inputRef?: React.Ref<HTMLInputElement>;\n    /**\n     * BCP 47 locale, set as the input's `lang`. The browser still draws a\n     * native date input in its own UI language; this is the hint it may use.\n     */\n    locale?: string;\n    /**\n     * IANA timezone string (e.g., \"America/New_York\", \"Europe/London\").\n     * Used to display and input dates in the specified timezone.\n     * The value passed to onChange will always be in UTC.\n     * If not provided, uses the user's local timezone.\n     */\n    timezone?: string;\n    /**\n     * Names the control when there is no `label` — e.g. when the surrounding\n     * form draws the label itself and passes `label={undefined}`.\n     */\n    \"aria-label\"?: string;\n};\n\n/** The parts `<input type=\"date\">` / `\"datetime-local\"` values are built from. */\nconst INPUT_PARTS: Intl.DateTimeFormatOptions = {\n    year: \"numeric\",\n    month: \"2-digit\",\n    day: \"2-digit\",\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n    hour12: false\n};\n\n/**\n * Formatters for named time zones, keyed by the IANA name (\"UTC\" included).\n *\n * Building an `Intl.DateTimeFormat` costs about ten times what formatting\n * with one does, and this field needs one per render and three per keystroke\n * when it has a `timezone`. A named zone's rules cannot change during a\n * session, so its formatter is built once; the map holds one entry per zone\n * a field has used. The local zone (no `timezone`) is NOT cached: a formatter\n * fixes the zone it resolved when it was built, while the parse side reads the\n * machine's zone live through `Date`, and a laptop can change zones with the\n * tab open.\n */\nconst zoneFormatters = new Map<string, Intl.DateTimeFormat>();\n\nfunction inputPartsFormatter(timeZone: string | undefined): Intl.DateTimeFormat {\n    if (timeZone === undefined) return new Intl.DateTimeFormat(\"en-CA\", INPUT_PARTS);\n    let formatter = zoneFormatters.get(timeZone);\n    if (!formatter) {\n        formatter = new Intl.DateTimeFormat(\"en-CA\", {\n            ...INPUT_PARTS,\n            timeZone\n        });\n        zoneFormatters.set(timeZone, formatter);\n    }\n    return formatter;\n}\n\n/** A UTC `Date` as the input's value string, in `timezone` (undefined = local). */\nfunction valueAsInputValue(\n    dateValue: Date | null,\n    mode: DateTimeFieldMode,\n    timezone: string | undefined\n): string {\n    if (!dateValue || !(dateValue instanceof Date) || isNaN(dateValue.getTime())) {\n        return \"\";\n    }\n    const pad = (n: number) => n.toString().padStart(2, \"0\");\n\n    // The date parts in the target timezone (undefined = local timezone)\n    const parts = inputPartsFormatter(timezone).formatToParts(dateValue);\n\n    const getPart = (type: string) => parts.find(p => p.type === type)?.value ?? \"\";\n\n    const year = getPart(\"year\");\n    const month = getPart(\"month\");\n    const day = getPart(\"day\");\n\n    if (mode === \"time\") {\n        return `${getPart(\"hour\")}:${getPart(\"minute\")}`;\n    }\n    if (mode === \"date\") {\n        return `${year}-${month}-${day}`;\n    } else {\n        const hours = getPart(\"hour\");\n        const minutes = getPart(\"minute\");\n        return `${year}-${month}-${day}T${hours}:${minutes}`;\n    }\n}\n\nexport const DateTimeField: React.FC<DateTimeFieldProps> = ({\n    value,\n    label,\n    onChange,\n    disabled,\n    clearable,\n    mode = \"date\",\n    error,\n    size = \"large\",\n    className,\n    style,\n    inputClassName,\n    invisible,\n    pickerButton = true,\n    inputRef: inputRefProp,\n    timezone,\n    locale,\n    \"aria-label\": ariaLabel\n}) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const labels = useUiLabels();\n    const setInputRef = useCallback((node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof inputRefProp === \"function\") inputRefProp(node);\n        else if (inputRefProp) inputRefProp.current = node;\n    }, [inputRefProp]);\n    const [focused, setFocused] = useState(false);\n    // The label was decorative: an InputLabel with no `htmlFor` beside an input\n    // with no `id`, so a date field announced itself by its value even when it\n    // visibly had a label. Wired the way TextField already does it.\n    const inputId = useId();\n    const labelId = `${inputId}-label`;\n    const [internalValue, setInternalValue] = useState<string>(\"\");\n    const [isTyping, setIsTyping] = useState(false);\n    const invalidValue = value !== undefined && value !== null && (!(value instanceof Date) || isNaN(value.getTime()));\n\n    // The calendar/clear adornments are IconButtons. Left at their default\n    // (`medium`, 40px) they floored the whole field at 40px, so smallest/small\n    // rendered identically to medium. Keep them a step below the field.\n    const adornmentSize = size === \"large\" ? \"medium\" : size === \"medium\" ? \"small\" : \"smallest\";\n\n    useInjectStyles(\"DateTimeField\", inputStyles);\n\n    const handleClear = (e: React.MouseEvent) => {\n        e.preventDefault();\n        // A disabled field is read-only, its adornments included.\n        if (disabled) return;\n        setInternalValue(\"\");\n        setIsTyping(false);\n        onChange?.(null);\n    };\n\n    // Get the UTC offset for a specific date in the target timezone (in minutes)\n    const getTimezoneOffsetMinutes = (date: Date, tz?: string): number => {\n        if (!tz) {\n            // Local timezone: use built-in getTimezoneOffset (returns offset in minutes, inverted sign)\n            return -date.getTimezoneOffset();\n        }\n        // For named timezones, calculate the offset by comparing formatted times\n        const utcFormatter = inputPartsFormatter(\"UTC\");\n        const tzFormatter = inputPartsFormatter(tz);\n\n        const utcParts = utcFormatter.formatToParts(date);\n        const tzParts = tzFormatter.formatToParts(date);\n\n        const getPart = (parts: Intl.DateTimeFormatPart[], type: string) =>\n            parseInt(parts.find(p => p.type === type)?.value ?? \"0\", 10);\n\n        const utcDate = new Date(Date.UTC(\n            getPart(utcParts, \"year\"),\n            getPart(utcParts, \"month\") - 1,\n            getPart(utcParts, \"day\"),\n            getPart(utcParts, \"hour\"),\n            getPart(utcParts, \"minute\")\n        ));\n\n        const tzDate = new Date(Date.UTC(\n            getPart(tzParts, \"year\"),\n            getPart(tzParts, \"month\") - 1,\n            getPart(tzParts, \"day\"),\n            getPart(tzParts, \"hour\"),\n            getPart(tzParts, \"minute\")\n        ));\n\n        return (tzDate.getTime() - utcDate.getTime()) / 60000;\n    };\n\n    // Handle input value change - convert from display timezone to UTC\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        setInternalValue(inputValue);\n        setIsTyping(true);\n\n        if (!inputValue) {\n            onChange?.(null);\n            return;\n        }\n\n        try {\n            let year: number, month: number, day: number, hours = 0, minutes = 0;\n\n            if (mode === \"time\") {\n                // Parse time-only input: \"HH:MM\" (or \"HH:MM:SS\"), on the\n                // day a time of day travels on.\n                [year, month, day] = [1970, 1, 1];\n                [hours, minutes] = inputValue.split(\":\").map(Number);\n            } else if (mode === \"date\") {\n                // Parse date-only input: \"YYYY-MM-DD\"\n                [year, month, day] = inputValue.split(\"-\").map(Number);\n            } else {\n                // Parse datetime-local input: \"YYYY-MM-DDTHH:MM\"\n                const [datePart, timePart] = inputValue.split(\"T\");\n                [year, month, day] = datePart.split(\"-\").map(Number);\n                [hours, minutes] = timePart.split(\":\").map(Number);\n            }\n\n            // Built field by field: `new Date(year, …)` and `Date.UTC(year, …)`\n            // read a year of 0–99 as 1900–1999, so a year typed digit by digit\n            // (0002, 0020) came out as 1902 and 1920.\n            let resultDate: Date;\n\n            if (!timezone) {\n                // No timezone specified: interpret input as local time (backward compatible)\n                resultDate = new Date(0);\n                resultDate.setFullYear(year, month - 1, day);\n                resultDate.setHours(hours, minutes, 0, 0);\n            } else {\n                // Timezone specified: interpret input as that timezone and convert to UTC.\n                // If the user entered 00:00 in Mexico (UTC-6, offset=-360), the\n                // wall-clock time read as UTC is 00:00Z, and subtracting -360\n                // minutes gives 06:00 UTC.\n                const wallClock = new Date(0);\n                wallClock.setUTCFullYear(year, month - 1, day);\n                wallClock.setUTCHours(hours, minutes, 0, 0);\n                const wallClockAsUtc = wallClock.getTime();\n\n                // The offset belongs to the instant being entered, not to the\n                // wall-clock time read as UTC: within hours of a DST switch those\n                // two sit on opposite sides of it. So the offset at the wall\n                // clock is only a first guess, and the offset at the instant it\n                // points to is the one that applies.\n                const firstGuess = getTimezoneOffsetMinutes(new Date(wallClockAsUtc), timezone);\n                const offsetMinutes = getTimezoneOffsetMinutes(new Date(wallClockAsUtc - firstGuess * 60000), timezone);\n                resultDate = new Date(wallClockAsUtc - offsetMinutes * 60000);\n\n                // A time the spring switch skips (02:30 in New York) has no\n                // instant of its own; it moves forward across the gap.\n                if (getTimezoneOffsetMinutes(resultDate, timezone) !== offsetMinutes) {\n                    resultDate = new Date(wallClockAsUtc - firstGuess * 60000);\n                }\n            }\n\n            if (isNaN(resultDate.getTime())) {\n                throw new Error(\"Invalid date\");\n            }\n\n            onChange?.(resultDate);\n        } catch (e) {\n            // Don't call onChange with null while typing\n            return;\n        }\n    };\n\n    // Formatted when the value, mode or zone changes, not on every render.\n    // Focusing formats afresh (below), so typing always starts from the\n    // current wall-clock text.\n    const valueTime = value instanceof Date ? value.getTime() : undefined;\n    const displayValue = React.useMemo(\n        () => valueAsInputValue(valueTime === undefined ? null : new Date(valueTime), mode, timezone),\n        [valueTime, mode, timezone]\n    );\n\n    const handleFocus = () => {\n        setFocused(true);\n        setIsTyping(true);\n        setInternalValue(valueAsInputValue(value ?? null, mode, timezone));\n    };\n\n    const handleBlur = () => {\n        setFocused(false);\n        setIsTyping(false);\n    };\n\n    return (\n        <>\n            <div\n                className={cls(\n                    \"rounded-lg relative max-w-full\",\n                    !invisible && fieldBackgroundMixin,\n                    // An invisible field has no hover fill of its own: whatever frames it (a table cell) carries the hover.\n                disabled ? fieldBackgroundDisabledMixin : (invisible ? \"\" : fieldBackgroundHoverMixin),\n                    {\n                        \"min-h-[28px]\": size === \"smallest\",\n                        \"min-h-[32px]\": size === \"small\",\n                        \"min-h-[40px]\": size === \"medium\",\n                        \"min-h-[48px]\": size === \"large\"\n                    },\n                    className\n                )}\n                style={style}\n                onClick={() => {\n                    if (!disabled) {\n                        inputRef.current?.focus();\n                    }\n                }}\n            >\n                {label && (\n                    <InputLabel\n                        id={labelId}\n                        htmlFor={inputId}\n                        className={cls(\n                            \"absolute top-1 pointer-events-none\",\n                            !error\n                                ? focused\n                                    ? \"text-primary\"\n                                    : \"text-text-secondary dark:text-text-secondary-dark\"\n                                : \"text-red-600 dark:text-red-500\",\n                            disabled ? \"opacity-50\" : \"\"\n                        )}\n                        shrink={true}\n                    // shrink={hasValue || focused}\n                    >\n                        {label}\n                    </InputLabel>\n                )}\n\n                <input\n                    ref={setInputRef}\n                    id={inputId}\n                    aria-labelledby={label ? labelId : undefined}\n                    aria-label={label ? undefined : ariaLabel}\n                    type={mode === \"date_time\" ? \"datetime-local\" : mode === \"time\" ? \"time\" : \"date\"}\n                    lang={locale}\n                    aria-invalid={error || undefined}\n                    value={isTyping ? internalValue : displayValue}\n                    onChange={handleInputChange}\n                    onFocus={handleFocus}\n                    onBlur={handleBlur}\n                    disabled={disabled}\n                    className={cls(\n                        \"w-full outline-hidden bg-transparent leading-normal text-sm px-3\",\n                        // Room for the adornments drawn over the input's right end.\n                        pickerButton ? (clearable ? \"pr-14\" : \"pr-12\") : (clearable ? \"pr-12\" : \"\"),\n                        \"rounded-lg\",\n                        {\n                            \"min-h-[28px]\": size === \"smallest\",\n                            \"min-h-[32px]\": size === \"small\",\n                            \"min-h-[40px]\": size === \"medium\",\n                            \"min-h-[48px]\": size === \"large\"\n                        },\n                        // A flat py-2 (16px) plus the line box floored\n                        // the field at 40px, so smallest/small/medium all\n                        // rendered the same height. Scale it with `size`.\n                        label\n                            ? \"pt-8 pb-2\"\n                            : { smallest: \"py-0.5\", small: \"py-1\", medium: \"py-2\", large: \"py-3\" }[size],\n                        inputClassName,\n                        disabled &&\n                        \"border border-transparent outline-hidden opacity-50 dark:opacity-50 text-surface-accent-600 dark:text-surface-accent-500\"\n                    )}\n                />\n                {pickerButton && <IconButton\n                    size={adornmentSize}\n                    aria-label={mode === \"time\" ? labels.openTimePicker : \"Open calendar\"}\n                    disabled={disabled}\n                    onClick={(e) => {\n                        e.stopPropagation();\n                        try {\n                            inputRef.current?.showPicker();\n                        } catch {\n                            // The browser refuses (a disabled or read-only input, or\n                            // no user activation): there is no picker to open, and\n                            // the field still takes typing.\n                        }\n                    }}\n                    className=\"absolute right-3 top-1/2 transform -translate-y-1/2 text-surface-accent-500!\"\n                >\n                    {mode === \"time\" ? <ClockIcon/> : <CalendarIcon/>}\n                </IconButton>}\n                {clearable && value && (\n                    <IconButton\n                        size={adornmentSize}\n                        aria-label=\"Clear date\"\n                        disabled={disabled}\n                        onClick={handleClear}\n                        className=\"absolute right-14 top-1/2 transform -translate-y-1/2 text-surface-accent-400 \"\n                    >\n                        <XIcon/>\n                    </IconButton>\n                )}\n            </div>\n            {invalidValue && (\n                <div className=\"flex items-center m-2\">\n                    <AlertCircleIcon size={iconSize.small} color={\"error\"}/>\n                    <div className=\"pl-2\">\n                        <Typography variant={\"body2\"}>\n                            Invalid date value for this field\n                        </Typography>\n                        <Typography variant={\"body2\"}>\n                            {`The provided value is: ${JSON.stringify(value)}`}\n                        </Typography>\n                    </div>\n                </div>\n            )}\n        </>\n    );\n};\n\nconst inputStyles = `\n    /* Hide the default calendar icon in Chrome, Safari, Edge, Opera */\n    input[type=\"date\"]::-webkit-calendar-picker-indicator,\n    input[type=\"datetime-local\"]::-webkit-calendar-picker-indicator,\n    input[type=\"time\"]::-webkit-calendar-picker-indicator {\n        display: none;\n        -webkit-appearance: none;\n    }\n    /* Hide default calendar icon in Firefox */\n    input[type=\"date\"],\n    input[type=\"datetime-local\"],\n    input[type=\"time\"] {\n        -moz-appearance:textfield;\n    }\n  `;\n"],"mappings":"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"}

package/dist/components/DebouncedTextField.es.js

@@ -0,0 +1,93 @@
+"use client";
+import { TextField } from "./TextField.es.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/DebouncedTextField.tsx
+function DebouncedTextField(props) {
+	const { value, onChange, name, onKeyDown, onBlur } = props;
+	const [internalValue, setInternalValue] = useState(value ?? "");
+	const lastSentValueRef = useRef(value ?? "");
+	const timerRef = useRef(void 0);
+	useEffect(() => {
+		const externalValue = value ?? "";
+		if (externalValue !== lastSentValueRef.current) {
+			setInternalValue(externalValue);
+			lastSentValueRef.current = externalValue;
+		}
+	}, [value]);
+	const pendingFlushRef = useRef(void 0);
+	useEffect(() => {
+		return () => {
+			if (timerRef.current) {
+				clearTimeout(timerRef.current);
+				timerRef.current = void 0;
+				pendingFlushRef.current?.();
+			}
+		};
+	}, []);
+	const flushChange = useCallback((next, event) => {
+		if (timerRef.current) {
+			clearTimeout(timerRef.current);
+			timerRef.current = void 0;
+		}
+		if (next !== value && onChange) {
+			lastSentValueRef.current = next;
+			const e = {
+				...event,
+				target: {
+					...event?.target,
+					value: next,
+					name
+				}
+			};
+			onChange(e);
+		}
+	}, [
+		value,
+		onChange,
+		name
+	]);
+	const internalOnChange = useCallback((event) => {
+		const newValue = event.target.value;
+		setInternalValue(newValue);
+		if (timerRef.current) clearTimeout(timerRef.current);
+		const eventCopy = {
+			...event,
+			target: {
+				...event?.target,
+				name: event?.target?.name
+			}
+		};
+		pendingFlushRef.current = () => flushChange(newValue, eventCopy);
+		timerRef.current = setTimeout(() => {
+			flushChange(newValue, eventCopy);
+		}, 150);
+	}, [flushChange]);
+	const internalOnKeyDown = useCallback((event) => {
+		if (event.key === "Enter" && timerRef.current) flushChange(internalValue);
+		onKeyDown?.(event);
+	}, [
+		internalValue,
+		flushChange,
+		onKeyDown
+	]);
+	const internalOnBlur = useCallback((event) => {
+		flushChange(internalValue, event);
+		onBlur?.(event);
+	}, [
+		internalValue,
+		flushChange,
+		onBlur
+	]);
+	return /* @__PURE__ */ jsx(TextField, {
+		...props,
+		onChange: internalOnChange,
+		onKeyDown: internalOnKeyDown,
+		onBlur: internalOnBlur,
+		value: internalValue
+	});
+}
+//#endregion
+export { DebouncedTextField };
+
+//# sourceMappingURL=DebouncedTextField.es.js.map

package/dist/components/DebouncedTextField.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebouncedTextField.es.js","names":[],"sources":["../../src/components/DebouncedTextField.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { TextField, TextFieldProps } from \"./TextField\";\n\ntype TextFieldChangeEvent = React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>;\n\nexport function DebouncedTextField<T extends string | number>(props: TextFieldProps<T>) {\n\n    const { value, onChange, name, onKeyDown, onBlur } = props;\n    const [internalValue, setInternalValue] = useState<T | string>(value ?? \"\");\n    const lastSentValueRef = useRef<T | string>(value ?? \"\");\n    const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n    // Sync state with props.value when it changes externally\n    useEffect(() => {\n        const externalValue = value ?? \"\";\n        if (externalValue !== lastSentValueRef.current) {\n            setInternalValue(externalValue);\n            lastSentValueRef.current = externalValue;\n        }\n    }, [value]);\n\n    // A value still waiting on the timer when the field unmounts is reported,\n    // not dropped: a dialog that closes on Enter unmounts the field it was\n    // typed into. Read through a ref — the cleanup runs once, at unmount.\n    const pendingFlushRef = useRef<(() => void) | undefined>(undefined);\n    useEffect(() => {\n        return () => {\n            if (timerRef.current) {\n                clearTimeout(timerRef.current);\n                timerRef.current = undefined;\n                pendingFlushRef.current?.();\n            }\n        };\n    }, []);\n\n    const flushChange = useCallback((next: T | string, event?: TextFieldChangeEvent) => {\n        if (timerRef.current) {\n            clearTimeout(timerRef.current);\n            timerRef.current = undefined;\n        }\n        if (next !== value && onChange) {\n            lastSentValueRef.current = next;\n            const e = {\n                ...event,\n                target: {\n                    ...event?.target,\n                    value: next,\n                    name\n                }\n            } as TextFieldChangeEvent;\n            onChange(e);\n        }\n    }, [value, onChange, name]);\n\n    const internalOnChange = useCallback((event: TextFieldChangeEvent) => {\n        const newValue = event.target.value;\n        setInternalValue(newValue);\n\n        if (timerRef.current) clearTimeout(timerRef.current);\n\n        const eventCopy = {\n            ...event,\n            target: {\n                ...event?.target,\n                name: event?.target?.name\n            }\n        };\n\n        pendingFlushRef.current = () => flushChange(newValue, eventCopy as TextFieldChangeEvent);\n        timerRef.current = setTimeout(() => {\n            flushChange(newValue, eventCopy as TextFieldChangeEvent);\n        }, 150);\n    }, [flushChange]);\n\n    // Enter submits the form around the field without blurring it, so the\n    // timer had not fired yet and the form submitted the value from before\n    // typing. Report it first: the keydown is handled before the browser's\n    // implicit submission, and React renders the change in between.\n    const internalOnKeyDown = useCallback((event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (event.key === \"Enter\" && timerRef.current) flushChange(internalValue);\n        onKeyDown?.(event as React.KeyboardEvent<HTMLInputElement>);\n    }, [internalValue, flushChange, onKeyDown]);\n\n    const internalOnBlur = useCallback((event: React.FocusEvent<HTMLInputElement>) => {\n        flushChange(internalValue, event as TextFieldChangeEvent);\n        onBlur?.(event);\n    }, [internalValue, flushChange, onBlur]);\n\n    return <TextField {...props}\n        onChange={internalOnChange}\n        onKeyDown={internalOnKeyDown}\n        onBlur={internalOnBlur}\n        value={internalValue as T}/>;\n}\n"],"mappings":";;;;;AAMA,SAAgB,mBAA8C,OAA0B;CAEpF,MAAM,EAAE,OAAO,UAAU,MAAM,WAAW,WAAW;CACrD,MAAM,CAAC,eAAe,oBAAoB,SAAqB,SAAS,EAAE;CAC1E,MAAM,mBAAmB,OAAmB,SAAS,EAAE;CACvD,MAAM,WAAW,OAAkD,KAAA,CAAS;CAG5E,gBAAgB;EACZ,MAAM,gBAAgB,SAAS;EAC/B,IAAI,kBAAkB,iBAAiB,SAAS;GAC5C,iBAAiB,aAAa;GAC9B,iBAAiB,UAAU;EAC/B;CACJ,GAAG,CAAC,KAAK,CAAC;CAKV,MAAM,kBAAkB,OAAiC,KAAA,CAAS;CAClE,gBAAgB;EACZ,aAAa;GACT,IAAI,SAAS,SAAS;IAClB,aAAa,SAAS,OAAO;IAC7B,SAAS,UAAU,KAAA;IACnB,gBAAgB,UAAU;GAC9B;EACJ;CACJ,GAAG,CAAC,CAAC;CAEL,MAAM,cAAc,aAAa,MAAkB,UAAiC;EAChF,IAAI,SAAS,SAAS;GAClB,aAAa,SAAS,OAAO;GAC7B,SAAS,UAAU,KAAA;EACvB;EACA,IAAI,SAAS,SAAS,UAAU;GAC5B,iBAAiB,UAAU;GAC3B,MAAM,IAAI;IACN,GAAG;IACH,QAAQ;KACJ,GAAG,OAAO;KACV,OAAO;KACP;IACJ;GACJ;GACA,SAAS,CAAC;EACd;CACJ,GAAG;EAAC;EAAO;EAAU;CAAI,CAAC;CAE1B,MAAM,mBAAmB,aAAa,UAAgC;EAClE,MAAM,WAAW,MAAM,OAAO;EAC9B,iBAAiB,QAAQ;EAEzB,IAAI,SAAS,SAAS,aAAa,SAAS,OAAO;EAEnD,MAAM,YAAY;GACd,GAAG;GACH,QAAQ;IACJ,GAAG,OAAO;IACV,MAAM,OAAO,QAAQ;GACzB;EACJ;EAEA,gBAAgB,gBAAgB,YAAY,UAAU,SAAiC;EACvF,SAAS,UAAU,iBAAiB;GAChC,YAAY,UAAU,SAAiC;EAC3D,GAAG,GAAG;CACV,GAAG,CAAC,WAAW,CAAC;CAMhB,MAAM,oBAAoB,aAAa,UAAuE;EAC1G,IAAI,MAAM,QAAQ,WAAW,SAAS,SAAS,YAAY,aAAa;EACxE,YAAY,KAA8C;CAC9D,GAAG;EAAC;EAAe;EAAa;CAAS,CAAC;CAE1C,MAAM,iBAAiB,aAAa,UAA8C;EAC9E,YAAY,eAAe,KAA6B;EACxD,SAAS,KAAK;CAClB,GAAG;EAAC;EAAe;EAAa;CAAM,CAAC;CAEvC,OAAO,oBAAC,WAAD;EAAW,GAAI;EAClB,UAAU;EACV,WAAW;EACX,QAAQ;EACR,OAAO;CAAoB,CAAA;AACnC"}

package/dist/components/Dialog.es.js

@@ -0,0 +1,98 @@
+"use client";
+import { focusedDisabled, paperMixin } from "../styles.es.js";
+import { cls } from "../util/cls.es.js";
+import { PortalContainerProvider, usePortalContainer } from "../hooks/PortalContainerContext.es.js";
+import { useRestoreInterruptedFocus } from "../hooks/useRestoreInterruptedFocus.es.js";
+import { useModalFocus } from "../hooks/useModalFocus.es.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+//#region src/components/Dialog.tsx
+var widthClasses = {
+	xs: "max-w-xs w-xs",
+	sm: "max-w-sm w-sm",
+	md: "max-w-md w-md",
+	lg: "max-w-lg w-lg",
+	xl: "max-w-xl w-xl",
+	"2xl": "max-w-2xl w-2xl",
+	"3xl": "max-w-3xl w-3xl",
+	"4xl": "max-w-4xl w-4xl",
+	"5xl": "max-w-5xl w-5xl",
+	"6xl": "max-w-6xl w-6xl",
+	"7xl": "max-w-7xl w-7xl",
+	full: "max-w-full w-full"
+};
+var Dialog = ({ open, onOpenChange, children, className, containerClassName, fullWidth = true, fullHeight, fullScreen, scrollable = true, maxWidth = "lg", modal = true, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, dismissOnBackdrop = false, initialFocus, disableInitialFocus = true, portalContainer, "aria-describedby": ariaDescribedby }) => {
+	const [displayed, setDisplayed] = useState(false);
+	const [popupHost, setPopupHost] = useState(null);
+	const [contentEl, setContentEl] = useState(null);
+	useRestoreInterruptedFocus(contentEl);
+	const [overlayEl, setOverlayEl] = useState(null);
+	const [layerEl, setLayerEl] = useState(null);
+	const focus = useModalFocus({
+		open: Boolean(open),
+		initialFocus,
+		focusContainer: disableInitialFocus,
+		onOpenAutoFocus,
+		onCloseAutoFocus
+	});
+	const contextContainer = usePortalContainer();
+	const finalContainer = portalContainer ?? contextContainer ?? void 0;
+	useEffect(() => {
+		if (!open) {
+			const timeout = setTimeout(() => {
+				setDisplayed(false);
+			}, 100);
+			return () => clearTimeout(timeout);
+		} else {
+			setDisplayed(true);
+			return () => {};
+		}
+	}, [open]);
+	return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
+		open: displayed || open,
+		modal,
+		onOpenChange,
+		children: /* @__PURE__ */ jsx(DialogPrimitive.Portal, {
+			container: finalContainer,
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: setLayerEl,
+				className: cls("fixed inset-0 z-50 flex justify-center items-center", containerClassName),
+				children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
+					ref: setOverlayEl,
+					className: cls("fixed inset-0 transition-opacity ease-in-out duration-200 motion-reduce:transition-none bg-surface-scrim backdrop-blur-sm", displayed && open ? "opacity-100" : "opacity-0", "z-50 fixed top-0 left-0 w-full h-full"),
+					style: { pointerEvents: displayed ? "auto" : "none" }
+				}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
+					ref: setContentEl,
+					onEscapeKeyDown,
+					onOpenAutoFocus: focus.onOpenAutoFocus,
+					onCloseAutoFocus: focus.onCloseAutoFocus,
+					onPointerDownOutside: (e) => {
+						onPointerDownOutside?.(e);
+						if (e.defaultPrevented) return;
+						const target = e.target;
+						if (!dismissOnBackdrop || !(target === overlayEl || target === layerEl)) e.preventDefault();
+					},
+					onFocusOutside: (e) => e.preventDefault(),
+					onInteractOutside,
+					"aria-describedby": ariaDescribedby,
+					className: cls("relative z-60 outline-none", focusedDisabled, fullWidth && !fullScreen ? "w-11/12" : void 0, fullHeight && !fullScreen ? "h-[90vh]" : void 0, fullScreen ? "h-screen w-screen" : void 0, maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0),
+					children: [/* @__PURE__ */ jsx("div", {
+						className: cls(paperMixin, "rounded-2xl", "z-60", "relative", "w-full", "overflow-hidden", "outline-none focus:outline-none", fullHeight || fullScreen ? "h-full" : void 0, "text-text-primary dark:text-text-primary-dark", "justify-center items-center", fullScreen ? void 0 : "max-h-[90vh] shadow-lg", "ease-in-out duration-200 motion-reduce:transition-none", scrollable && "overflow-y-auto", displayed && open ? "opacity-100 scale-100" : "opacity-0 scale-[0.97]", className),
+						children: /* @__PURE__ */ jsx(PortalContainerProvider, {
+							container: popupHost,
+							children
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						ref: setPopupHost,
+						className: "relative z-70 w-0 h-0"
+					})]
+				})]
+			})
+		})
+	});
+};
+//#endregion
+export { Dialog };
+
+//# sourceMappingURL=Dialog.es.js.map

package/dist/components/Dialog.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.es.js","names":[],"sources":["../../src/components/Dialog.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useState } from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { focusedDisabled, paperMixin } from \"../styles\";\nimport { cls } from \"../util\";\nimport { PortalContainerProvider, usePortalContainer } from \"../hooks/PortalContainerContext\";\nimport { useRestoreInterruptedFocus } from \"../hooks/useRestoreInterruptedFocus\";\nimport { useModalFocus } from \"../hooks/useModalFocus\";\n\nexport type DialogProps = {\n    open?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    children: React.ReactNode;\n    className?: string;\n    containerClassName?: string;\n    fullWidth?: boolean;\n    fullHeight?: boolean;\n    fullScreen?: boolean;\n    scrollable?: boolean;\n    maxWidth?: keyof typeof widthClasses;\n    modal?: boolean;\n    onOpenAutoFocus?: (e: Event) => void;\n    /**\n     * Called when focus is about to return after the dialog closes. By default\n     * it goes back to the element that had it when the dialog opened; call\n     * `preventDefault()` to put it somewhere else.\n     */\n    onCloseAutoFocus?: (e: Event) => void;\n    onEscapeKeyDown?: (e: KeyboardEvent) => void;\n    onPointerDownOutside?: (e: Event) => void;\n    onInteractOutside?: (e: Event) => void;\n    /**\n     * Whether a click on the dimmed backdrop closes the dialog. Off by default:\n     * a record or a form dialog holds work that one stray click must not throw\n     * away. Turn it on for a picker, where closing loses nothing. Escape closes\n     * either kind.\n     */\n    dismissOnBackdrop?: boolean;\n    /**\n     * The element to focus when the dialog opens, for a dialog whose purpose is\n     * one field. Without it the dialog focuses itself, so a screen reader\n     * announces it by its title and a phone does not raise its keyboard.\n     */\n    initialFocus?: React.RefObject<HTMLElement | null>;\n    /**\n     * If `true` (the default), the dialog will not focus the first focusable\n     * element when opened: it focuses its own container instead. `false` lets\n     * the first focusable element take focus.\n     */\n    disableInitialFocus?: boolean;\n    portalContainer?: HTMLElement | null;\n    \"aria-describedby\"?: string;\n};\n\nconst widthClasses = {\n    xs: \"max-w-xs w-xs\",\n    sm: \"max-w-sm w-sm\",\n    md: \"max-w-md w-md\",\n    lg: \"max-w-lg w-lg\",\n    xl: \"max-w-xl w-xl\",\n    \"2xl\": \"max-w-2xl w-2xl\",\n    \"3xl\": \"max-w-3xl w-3xl\",\n    \"4xl\": \"max-w-4xl w-4xl\",\n    \"5xl\": \"max-w-5xl w-5xl\",\n    \"6xl\": \"max-w-6xl w-6xl\",\n    \"7xl\": \"max-w-7xl w-7xl\",\n    full: \"max-w-full w-full\"\n};\n\nexport const Dialog = ({\n                           open,\n                           onOpenChange,\n                           children,\n                           className,\n                           containerClassName,\n                           fullWidth = true,\n                           fullHeight,\n                           fullScreen,\n                           scrollable = true,\n                           maxWidth = \"lg\",\n                           modal = true,\n                           onOpenAutoFocus,\n                           onCloseAutoFocus,\n                           onEscapeKeyDown,\n                           onPointerDownOutside,\n                           onInteractOutside,\n                           dismissOnBackdrop = false,\n                           initialFocus,\n                           disableInitialFocus = true,\n                           portalContainer,\n                           \"aria-describedby\": ariaDescribedby\n                       }: DialogProps) => {\n    const [displayed, setDisplayed] = useState(false);\n    // Where popups rendered *inside* this dialog get portaled to. A modal\n    // dialog locks scrolling everywhere but its own content, so a popup\n    // portaled to `document.body` renders fine and then refuses to scroll:\n    // `react-remove-scroll` cancels every wheel event outside the lock.\n    // Handing descendants this host keeps them inside it.\n    const [popupHost, setPopupHost] = useState<HTMLDivElement | null>(null);\n\n    // The focus trap's container. Tab between two fields used to land here\n    // whenever the first field's tooltip closed on the way out.\n    const [contentEl, setContentEl] = useState<HTMLDivElement | null>(null);\n    useRestoreInterruptedFocus(contentEl);\n\n    // The two surfaces outside the paper: a pointer-down on either is a\n    // click on the backdrop. Anything else outside the paper — a toast, a\n    // popup some other layer portaled to the body — is not.\n    const [overlayEl, setOverlayEl] = useState<HTMLDivElement | null>(null);\n    const [layerEl, setLayerEl] = useState<HTMLDivElement | null>(null);\n\n    const focus = useModalFocus({\n        open: Boolean(open),\n        initialFocus,\n        focusContainer: disableInitialFocus,\n        onOpenAutoFocus,\n        onCloseAutoFocus\n    });\n\n    // Get the portal container from context\n    const contextContainer = usePortalContainer();\n\n    // Prioritize manual prop, fallback to context container\n    const finalContainer = (portalContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;\n\n    useEffect(() => {\n        if (!open) {\n            const timeout = setTimeout(() => {\n                setDisplayed(false);\n            }, 100);\n            return () => clearTimeout(timeout);\n        } else {\n            setDisplayed(true);\n            return () => {\n            };\n        }\n    }, [open]);\n\n    return (\n        <DialogPrimitive.Root open={displayed || open}\n                              modal={modal}\n                              onOpenChange={onOpenChange}>\n            <DialogPrimitive.Portal container={finalContainer}>\n\n                <div ref={setLayerEl}\n                     className={cls(\"fixed inset-0 z-50 flex justify-center items-center\", containerClassName)}>\n\n                    <DialogPrimitive.Overlay\n                        ref={setOverlayEl}\n                        className={cls(\"fixed inset-0 transition-opacity ease-in-out duration-200 motion-reduce:transition-none bg-surface-scrim backdrop-blur-sm\",\n                            displayed && open ? \"opacity-100\" : \"opacity-0\",\n                            \"z-50 fixed top-0 left-0 w-full h-full\"\n                        )}\n                        style={{\n                            pointerEvents: displayed ? \"auto\" : \"none\"\n                        }}\n                    />\n\n                    {/* The content IS the paper's box: what is outside it is the\n                        backdrop, and what assistive technology and a test runner\n                        measure as the dialog is what the user sees. It used to fill\n                        the viewport, so the dimmed area was part of the dialog and\n                        the outside-click handlers could never fire. The paper itself\n                        is a child because its open animation scales it, and a\n                        transform would make it the containing block of every popup\n                        portaled into the host beside it. */}\n                    <DialogPrimitive.Content\n                        ref={setContentEl}\n                        onEscapeKeyDown={onEscapeKeyDown}\n                        onOpenAutoFocus={focus.onOpenAutoFocus}\n                        onCloseAutoFocus={focus.onCloseAutoFocus}\n                        onPointerDownOutside={(e) => {\n                            onPointerDownOutside?.(e);\n                            if (e.defaultPrevented) return;\n                            const target = e.target;\n                            const onBackdrop = target === overlayEl || target === layerEl;\n                            if (!dismissOnBackdrop || !onBackdrop) e.preventDefault();\n                        }}\n                        // Focus leaving the paper is not a request to close it. A modal\n                        // dialog already ignores it; a non-modal one would dismiss.\n                        onFocusOutside={(e) => e.preventDefault()}\n                        onInteractOutside={onInteractOutside}\n                        aria-describedby={ariaDescribedby}\n                        className={cls(\n                            \"relative z-60 outline-none\",\n                            // Focused on open so a screen reader announces it; it is\n                            // a container, not a control, so it draws no ring.\n                            focusedDisabled,\n                            fullWidth && !fullScreen ? \"w-11/12\" : undefined,\n                            fullHeight && !fullScreen ? \"h-[90vh]\" : undefined,\n                            fullScreen ? \"h-screen w-screen\" : undefined,\n                            maxWidth && !fullScreen ? widthClasses[maxWidth] : undefined\n                        )}\n                    >\n                        <div\n                            className={cls(paperMixin,\n                                \"rounded-2xl\",\n                                \"z-60\",\n                                \"relative\",\n                                \"w-full\",\n                                \"overflow-hidden\",\n                                \"outline-none focus:outline-none\",\n                                fullHeight || fullScreen ? \"h-full\" : undefined,\n                                \"text-text-primary dark:text-text-primary-dark\",\n                                \"justify-center items-center\",\n                                fullScreen ? undefined : \"max-h-[90vh] shadow-lg\",\n                                \"ease-in-out duration-200 motion-reduce:transition-none\",\n                                scrollable && \"overflow-y-auto\",\n                                displayed && open ? \"opacity-100 scale-100\" : \"opacity-0 scale-[0.97]\",\n                                className\n                            )}>\n                            <PortalContainerProvider container={popupHost}>\n                                {children}\n                            </PortalContainerProvider>\n                        </div>\n\n                        {/* Sized to nothing so it changes no layout, but positioned and\n                            stacked above the paper so popups portaled here are not\n                            painted behind it. */}\n                        <div ref={setPopupHost} className={\"relative z-70 w-0 h-0\"}/>\n\n                    </DialogPrimitive.Content>\n                </div>\n\n            </DialogPrimitive.Portal>\n        </DialogPrimitive.Root>\n    );\n};\n"],"mappings":";;;;;;;;;;AAsDA,IAAM,eAAe;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;CACP,MAAM;AACV;AAEA,IAAa,UAAU,EACI,MACA,cACA,UACA,WACA,oBACA,YAAY,MACZ,YACA,YACA,aAAa,MACb,WAAW,MACX,QAAQ,MACR,iBACA,kBACA,iBACA,sBACA,mBACA,oBAAoB,OACpB,cACA,sBAAsB,MACtB,iBACA,oBAAoB,sBACL;CACtC,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAMhD,MAAM,CAAC,WAAW,gBAAgB,SAAgC,IAAI;CAItE,MAAM,CAAC,WAAW,gBAAgB,SAAgC,IAAI;CACtE,2BAA2B,SAAS;CAKpC,MAAM,CAAC,WAAW,gBAAgB,SAAgC,IAAI;CACtE,MAAM,CAAC,SAAS,cAAc,SAAgC,IAAI;CAElE,MAAM,QAAQ,cAAc;EACxB,MAAM,QAAQ,IAAI;EAClB;EACA,gBAAgB;EAChB;EACA;CACJ,CAAC;CAGD,MAAM,mBAAmB,mBAAmB;CAG5C,MAAM,iBAAkB,mBAAmB,oBAAoB,KAAA;CAE/D,gBAAgB;EACZ,IAAI,CAAC,MAAM;GACP,MAAM,UAAU,iBAAiB;IAC7B,aAAa,KAAK;GACtB,GAAG,GAAG;GACN,aAAa,aAAa,OAAO;EACrC,OAAO;GACH,aAAa,IAAI;GACjB,aAAa,CACb;EACJ;CACJ,GAAG,CAAC,IAAI,CAAC;CAET,OACI,oBAAC,gBAAgB,MAAjB;EAAsB,MAAM,aAAa;EACZ;EACO;YAChC,oBAAC,gBAAgB,QAAjB;GAAwB,WAAW;aAE/B,qBAAC,OAAD;IAAK,KAAK;IACL,WAAW,IAAI,uDAAuD,kBAAkB;cAD7F,CAGI,oBAAC,gBAAgB,SAAjB;KACI,KAAK;KACL,WAAW,IAAI,6HACX,aAAa,OAAO,gBAAgB,aACpC,uCACJ;KACA,OAAO,EACH,eAAe,YAAY,SAAS,OACxC;IACH,CAAA,GAUD,qBAAC,gBAAgB,SAAjB;KACI,KAAK;KACY;KACjB,iBAAiB,MAAM;KACvB,kBAAkB,MAAM;KACxB,uBAAuB,MAAM;MACzB,uBAAuB,CAAC;MACxB,IAAI,EAAE,kBAAkB;MACxB,MAAM,SAAS,EAAE;MAEjB,IAAI,CAAC,qBAAqB,EADP,WAAW,aAAa,WAAW,UACf,EAAE,eAAe;KAC5D;KAGA,iBAAiB,MAAM,EAAE,eAAe;KACrB;KACnB,oBAAkB;KAClB,WAAW,IACP,8BAGA,iBACA,aAAa,CAAC,aAAa,YAAY,KAAA,GACvC,cAAc,CAAC,aAAa,aAAa,KAAA,GACzC,aAAa,sBAAsB,KAAA,GACnC,YAAY,CAAC,aAAa,aAAa,YAAY,KAAA,CACvD;eA1BJ,CA4BI,oBAAC,OAAD;MACI,WAAW,IAAI,YACX,eACA,QACA,YACA,UACA,mBACA,mCACA,cAAc,aAAa,WAAW,KAAA,GACtC,iDACA,+BACA,aAAa,KAAA,IAAY,0BACzB,0DACA,cAAc,mBACd,aAAa,OAAO,0BAA0B,0BAC9C,SACJ;gBACA,oBAAC,yBAAD;OAAyB,WAAW;OAC/B;MACoB,CAAA;KACxB,CAAA,GAKL,oBAAC,OAAD;MAAK,KAAK;MAAc,WAAW;KAAyB,CAAA,CAEvC;MACxB;;EAEe,CAAA;CACN,CAAA;AAE9B"}

package/dist/components/DialogActions.es.js

@@ -0,0 +1,15 @@
+import { defaultBorderMixin } from "../styles.es.js";
+import { cls } from "../util/cls.es.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/DialogActions.tsx
+function DialogActions({ children, position = "sticky", translucent = true, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cls(defaultBorderMixin, "pt-2 pb-4 px-4 border-t flex flex-row items-center justify-end shrink-0 bottom-0 right-0 left-0 text-right z-2 gap-2", position, "bg-surface-card/60", translucent ? "backdrop-blur-sm" : "", className),
+		children
+	});
+}
+//#endregion
+export { DialogActions };
+
+//# sourceMappingURL=DialogActions.es.js.map

package/dist/components/DialogActions.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogActions.es.js","names":[],"sources":["../../src/components/DialogActions.tsx"],"sourcesContent":["import React from \"react\";\nimport { defaultBorderMixin } from \"../styles\";\nimport { cls } from \"../util\";\n\nexport function DialogActions({\n                                  children,\n                                  position = \"sticky\",\n                                  translucent = true,\n                                  className\n                              }: {\n    children: React.ReactNode,\n    position?: \"sticky\" | \"absolute\",\n    translucent?: boolean,\n    className?: string\n}) {\n\n    return <div\n        className={cls(\n            defaultBorderMixin,\n            // `shrink-0`: as a flex child at the foot of a column this bar must\n            // keep its height instead of being squeezed by the content above it.\n            \"pt-2 pb-4 px-4 border-t flex flex-row items-center justify-end shrink-0 bottom-0 right-0 left-0 text-right z-2 gap-2\",\n            position,\n            \"bg-surface-card/60\",\n            translucent ? \"backdrop-blur-sm\" : \"\",\n            className)}>\n        {children}\n    </div>;\n}\n"],"mappings":";;;;;AAIA,SAAgB,cAAc,EACI,UACA,WAAW,UACX,cAAc,MACd,aAM/B;CAEC,OAAO,oBAAC,OAAD;EACH,WAAW,IACP,oBAGA,wHACA,UACA,sBACA,cAAc,qBAAqB,IACnC,SAAS;EACZ;CACA,CAAA;AACT"}

package/dist/components/DialogContent.es.js

@@ -0,0 +1,18 @@
+import { cls } from "../util/cls.es.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/DialogContent.tsx
+function DialogContent({ children, className, fullHeight, includeMargin = true }) {
+	if (fullHeight) return /* @__PURE__ */ jsx("div", {
+		className: "flex-grow flex flex-col h-full relative",
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cls("flex-grow", { "my-8 mx-8": includeMargin }, className),
+		children
+	});
+}
+//#endregion
+export { DialogContent };
+
+//# sourceMappingURL=DialogContent.es.js.map

package/dist/components/DialogContent.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContent.es.js","names":[],"sources":["../../src/components/DialogContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { cls } from \"../util\";\n\nexport function DialogContent({\n                                  children,\n                                  className,\n                                  fullHeight,\n                                  includeMargin = true\n                              }: {\n    children: React.ReactNode,\n    includeMargin?: boolean,\n    fullHeight?: boolean,\n    className?: string\n}) {\n\n    if (fullHeight)\n        return <div className={\"flex-grow flex flex-col h-full relative\"}>\n            {children}\n        </div>;\n\n    return <div\n        className={cls(\"flex-grow\",\n            { \"my-8 mx-8\": includeMargin },\n            className)}>\n        {children}\n    </div>;\n}\n"],"mappings":";;;;AAGA,SAAgB,cAAc,EACI,UACA,WACA,YACA,gBAAgB,QAM/C;CAEC,IAAI,YACA,OAAO,oBAAC,OAAD;EAAK,WAAW;EAClB;CACA,CAAA;CAET,OAAO,oBAAC,OAAD;EACH,WAAW,IAAI,aACX,EAAE,aAAa,cAAc,GAC7B,SAAS;EACZ;CACA,CAAA;AACT"}

package/dist/components/DialogTitle.es.js

@@ -0,0 +1,26 @@
+"use client";
+import { cls } from "../util/cls.es.js";
+import { Typography } from "./Typography.es.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+//#region src/components/DialogTitle.tsx
+function DialogTitle({ children, hidden, className, variant = "subtitle2", gutterBottom = true, includeMargin = true, ...props }) {
+	const title = /* @__PURE__ */ jsx(DialogPrimitive.Title, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Typography, {
+			variant,
+			className: cls({ "mt-8 mx-8": includeMargin }, className),
+			gutterBottom,
+			...props,
+			children
+		})
+	});
+	if (hidden) return /* @__PURE__ */ jsx(VisuallyHidden.Root, { children: title });
+	return title;
+}
+//#endregion
+export { DialogTitle };
+
+//# sourceMappingURL=DialogTitle.es.js.map

package/dist/components/DialogTitle.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogTitle.es.js","names":[],"sources":["../../src/components/DialogTitle.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { Typography, TypographyProps, TypographyVariant } from \"./Typography\";\nimport { cls } from \"../util\";\n\nexport type DialogContentProps = TypographyProps & {\n    children: React.ReactNode,\n    hidden?: boolean,\n    className?: string,\n    includeMargin?: boolean,\n    variant?: TypographyVariant\n};\n\nexport function DialogTitle({\n                                children,\n                                hidden,\n                                className,\n                                variant = \"subtitle2\",\n                                gutterBottom = true,\n                                includeMargin = true,\n                                ...props\n                            }: DialogContentProps) {\n\n    const title = <DialogPrimitive.Title asChild>\n        <Typography variant={variant}\n                    className={cls({ \"mt-8 mx-8\": includeMargin }, className)}\n                    gutterBottom={gutterBottom}\n                    {...props}>\n            {children}\n        </Typography>\n    </DialogPrimitive.Title>;\n\n    if (hidden) {\n        return <VisuallyHidden.Root>{title}</VisuallyHidden.Root>\n    }\n\n    return title;\n}\n"],"mappings":";;;;;;;;AAgBA,SAAgB,YAAY,EACI,UACA,QACA,WACA,UAAU,aACV,eAAe,MACf,gBAAgB,MAChB,GAAG,SACgB;CAE/C,MAAM,QAAQ,oBAAC,gBAAgB,OAAjB;EAAuB,SAAA;YACjC,oBAAC,YAAD;GAAqB;GACT,WAAW,IAAI,EAAE,aAAa,cAAc,GAAG,SAAS;GAC1C;GACd,GAAI;GACX;EACO,CAAA;CACO,CAAA;CAEvB,IAAI,QACA,OAAO,oBAAC,eAAe,MAAhB,EAAA,UAAsB,MAA2B,CAAA;CAG5D,OAAO;AACX"}