@espressif/dashboard-ui-components 1.10.0 → 1.11.1

package/dist/components/data-table/responsive-columns.js

@@ -0,0 +1,65 @@
+import { getColumnMeta } from "./sticky-columns.js";
+import { useLayoutEffect, useState } from "react";
+//#region src/components/data-table/responsive-columns.ts
+/** Tailwind's container sizes, in px at the default 16px rem. */
+var BREAKPOINTS = {
+	sm: 384,
+	md: 448,
+	lg: 512,
+	xl: 576,
+	"2xl": 672,
+	"3xl": 768,
+	"4xl": 896,
+	"5xl": 1024,
+	"6xl": 1152,
+	"7xl": 1280
+};
+function minWidth(hideBelow) {
+	return typeof hideBelow === "number" ? hideBelow : hideBelow && BREAKPOINTS[hideBelow];
+}
+/**
+* Width of `ref`'s element, tracked while `enabled`. `null` until measured, so
+* nothing is hidden before the real width is known.
+*/
+function useElementWidth(ref, enabled) {
+	const [width, setWidth] = useState(null);
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!enabled || !el) return;
+		const measure = () => setWidth(el.getBoundingClientRect().width);
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [ref, enabled]);
+	return enabled ? width : null;
+}
+/**
+* Applies `meta.hideBelow` to the table's column visibility. Visibility is only
+* written when the set of too-narrow columns changes (a breakpoint is crossed),
+* so a column the user shows or hides from the Columns menu stays that way
+* until the next crossing.
+*/
+function useResponsiveColumnVisibility(ref, columns, setColumnVisibility) {
+	const responsive = columns.filter((column) => minWidth(getColumnMeta(column)?.hideBelow) !== void 0);
+	const width = useElementWidth(ref, responsive.length > 0);
+	const hiddenKey = width === null ? null : responsive.filter((column) => width < minWidth(getColumnMeta(column)?.hideBelow)).map((column) => column.id).join("\0");
+	useLayoutEffect(() => {
+		if (hiddenKey === null) return;
+		const hidden = new Set(hiddenKey.split("\0"));
+		setColumnVisibility((prev) => {
+			let next = null;
+			for (const column of responsive) {
+				const visible = !hidden.has(column.id) && !getColumnMeta(column)?.defaultHidden;
+				if ((prev[column.id] ?? true) !== visible) {
+					next ?? (next = { ...prev });
+					next[column.id] = visible;
+				}
+			}
+			return next ?? prev;
+		});
+	}, [hiddenKey, setColumnVisibility]);
+}
+//#endregion
+export { useResponsiveColumnVisibility };

package/dist/components/data-table/row-actions.js

@@ -0,0 +1,27 @@
+import { cn } from "../../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/data-table/row-actions.tsx
+var revealClasses = {
+	always: "[@media(hover:hover)]:opacity-0",
+	md: "md:[@media(hover:hover)]:opacity-0"
+};
+/** Menus and dialogs are portalled, but React events still bubble to the row. */
+function stopRowInteraction(event) {
+	event.stopPropagation();
+}
+/**
+* Row action cell content for DataTable. Hidden until the row is hovered, but
+* only on devices that can hover, so touch screens always show it. Stays visible
+* for keyboard focus and while a menu or dialog it opened is open. Clicks and
+* key presses don't reach the row's own click handler.
+*/
+function DataTableRowActions({ children, alwaysVisible = false, alwaysVisibleBelow, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex min-h-9 items-center justify-end", !alwaysVisible && ["transition-opacity group-hover/data-table-row:opacity-100 group-focus-within/data-table-row:opacity-100 has-[[data-state=open]]:opacity-100", revealClasses[alwaysVisibleBelow ?? "always"]], className),
+		onClick: stopRowInteraction,
+		onKeyDown: stopRowInteraction,
+		children
+	});
+}
+//#endregion
+export { DataTableRowActions };

package/dist/components/data-table/sticky-columns.js

@@ -0,0 +1,71 @@
+import { cn } from "../../utils/cn.js";
+import { useLayoutEffect, useState } from "react";
+//#region src/components/data-table/sticky-columns.ts
+function getColumnMeta(column) {
+	return column.columnDef.meta;
+}
+var SELECT_COLUMN_ID = "__select";
+/** Number of leading visible columns that should be pinned. */
+function countStickyColumns(columns) {
+	let count = 0;
+	for (let i = 0; i < columns.length; i++) {
+		const column = columns[i];
+		if (!(column.id === SELECT_COLUMN_ID ? Boolean(columns[i + 1] && getColumnMeta(columns[i + 1])?.sticky) : Boolean(getColumnMeta(column)?.sticky))) break;
+		count++;
+	}
+	return count;
+}
+/**
+* Left offset of each of the first `count` columns, measured from the header
+* cells. Re-measured whenever the table resizes (data, visibility, viewport).
+*/
+function useStickyOffsets(tableRef, count) {
+	const [offsets, setOffsets] = useState([]);
+	useLayoutEffect(() => {
+		const table = tableRef.current;
+		if (!table || count === 0) {
+			setOffsets((prev) => prev.length === 0 ? prev : []);
+			return;
+		}
+		const measure = () => {
+			const cells = table.querySelectorAll("thead tr:last-child > th");
+			const next = [];
+			let left = 0;
+			for (let i = 0; i < count && i < cells.length; i++) {
+				next.push(left);
+				left += cells[i].getBoundingClientRect().width;
+			}
+			setOffsets((prev) => prev.length === next.length && prev.every((v, i) => v === next[i]) ? prev : next);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(table);
+		return () => observer.disconnect();
+	}, [tableRef, count]);
+	return offsets;
+}
+function buildStickyColumns(columns, offsets) {
+	const map = /* @__PURE__ */ new Map();
+	const count = Math.min(offsets.length, columns.length);
+	for (let i = 0; i < count; i++) map.set(columns[i].id, {
+		left: offsets[i],
+		isLast: i === count - 1
+	});
+	return map;
+}
+var stickyBase = "sticky";
+var stickyHeadBg = "z-[2] bg-[var(--data-table-sticky-bg,var(--color-background))]";
+var stickyHeadBorderedBg = "z-[2] bg-[color-mix(in_oklab,var(--color-muted)_50%,var(--data-table-sticky-bg,var(--color-background)))]";
+var stickyCellBg = "z-[1] bg-[var(--data-table-sticky-bg,var(--color-background))] [tr:hover>&]:bg-[color-mix(in_oklab,var(--color-muted)_50%,var(--data-table-sticky-bg,var(--color-background)))] [tr[data-state=selected]>&]:bg-muted";
+var stickyEdge = "after:pointer-events-none after:absolute after:inset-y-0 after:-right-4 after:w-4 after:bg-linear-to-r after:from-black/10 after:to-transparent after:opacity-0 after:transition-opacity group-data-[overflow-start]/data-table:after:opacity-100 dark:after:from-black/40";
+function stickyCellProps(stickyColumns, columnId, kind) {
+	const sticky = stickyColumns?.get(columnId);
+	if (!sticky) return {};
+	return {
+		className: cn(stickyBase, kind === "head" ? stickyHeadBg : kind === "headBordered" ? stickyHeadBorderedBg : stickyCellBg, sticky.isLast && stickyEdge),
+		style: { left: sticky.left }
+	};
+}
+//#endregion
+export { SELECT_COLUMN_ID, buildStickyColumns, countStickyColumns, getColumnMeta, stickyCellProps, useStickyOffsets };

package/dist/components/data-table/table-body.js

@@ -0,0 +1,57 @@
+import { cn } from "../../utils/cn.js";
+import NoDataCard from "../cards/no-data-card/no-data-card.js";
+import { TableBody, TableCell, TableRow } from "../../core/table.js";
+import { TableSkeleton } from "../skeletons/table-skeleton.js";
+import { getColumnMeta, stickyCellProps } from "./sticky-columns.js";
+import { jsx } from "react/jsx-runtime";
+import { flexRender } from "@tanstack/react-table";
+//#region src/components/data-table/table-body.tsx
+function DataTableBody({ rows, columnCount, isFetching, pageSize, noResultsHeading, noResultsDescription, noResultsAction, noResultsIllustration, hideNoResultsIllustration, onRowClick, showBorder = false, tableRowClassName, getRowClassName, stickyColumns }) {
+	if (isFetching) return /* @__PURE__ */ jsx(TableSkeleton, {
+		totalRows: pageSize,
+		totalColumns: columnCount,
+		showBorder,
+		padFirstColumn: showBorder
+	});
+	if (!rows.length) return /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsx(TableRow, {
+		className: "hover:bg-transparent",
+		children: /* @__PURE__ */ jsx(TableCell, {
+			colSpan: columnCount,
+			className: "p-0 transparent",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "mx-auto max-w-md",
+				children: /* @__PURE__ */ jsx(NoDataCard, {
+					heading: noResultsHeading,
+					description: noResultsDescription,
+					action: noResultsAction,
+					illustration: noResultsIllustration,
+					hideIllustration: hideNoResultsIllustration,
+					className: "border-0 shadow-none"
+				})
+			})
+		})
+	}) });
+	return /* @__PURE__ */ jsx(TableBody, { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx(TableRow, {
+		"data-state": row.getIsSelected() && "selected",
+		tabIndex: onRowClick ? 0 : void 0,
+		className: cn("group/data-table-row", onRowClick && "group cursor-pointer outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", showBorder ? "border-b border-border/50 last:border-b-0" : "border-0", getRowClassName?.(row.original, rowIndex), tableRowClassName),
+		onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+		onKeyDown: onRowClick ? (e) => {
+			if (e.repeat) return;
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				onRowClick(row.original);
+			}
+		} : void 0,
+		children: row.getVisibleCells().map((cell, cellIndex) => {
+			const sticky = stickyCellProps(stickyColumns, cell.column.id, "cell");
+			return /* @__PURE__ */ jsx(TableCell, {
+				className: cn("px-2 py-4", getColumnMeta(cell.column)?.wrap ? "min-w-64 whitespace-normal" : "whitespace-nowrap", getColumnMeta(cell.column)?.fill && "w-full max-w-0", showBorder && cellIndex === 0 && "pl-4", sticky.className),
+				style: sticky.style,
+				children: flexRender(cell.column.columnDef.cell, cell.getContext())
+			}, cell.id);
+		})
+	}, row.id)) });
+}
+//#endregion
+export { DataTableBody };

package/dist/components/data-table/table-header.js

@@ -0,0 +1,21 @@
+import { cn } from "../../utils/cn.js";
+import { TableHead, TableHeader, TableRow } from "../../core/table.js";
+import { stickyCellProps } from "./sticky-columns.js";
+import { jsx } from "react/jsx-runtime";
+import { flexRender } from "@tanstack/react-table";
+//#region src/components/data-table/table-header.tsx
+function DataTableHeader({ headerGroups, showBorder = false, stickyColumns }) {
+	return /* @__PURE__ */ jsx(TableHeader, {
+		className: cn(showBorder && "bg-muted/50 [&_tr]:border-border/50"),
+		children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header, headerIndex) => {
+			const sticky = stickyCellProps(stickyColumns, header.column.id, showBorder ? "headBordered" : "head");
+			return /* @__PURE__ */ jsx(TableHead, {
+				className: cn("text-sm text-gray-500 font-medium whitespace-nowrap", showBorder && headerIndex === 0 && "pl-4", sticky.className),
+				style: sticky.style,
+				children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+			}, header.id);
+		}) }, headerGroup.id))
+	});
+}
+//#endregion
+export { DataTableHeader };

package/dist/components/date-picker/date-picker.js

@@ -0,0 +1,95 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../core/popover.js";
+import { Input } from "../../core/input/input.js";
+import { Calendar } from "../calendar/calendar.js";
+import { FIELD_ICON_SIZE, FieldEndIcons, fieldEndPaddingClassName } from "../../core/field-end-icons.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalendarIcon } from "lucide-react";
+import { format } from "date-fns";
+//#region src/components/date-picker/date-picker.tsx
+function DatePicker(props) {
+	const { value, onChange, defaultValue, formatDate, name, trigger, placeholder = "Pick a date", label, size, hideIcon = false, disabled = false, required = false, rounded = false, error, errorContent, startHelperContent, endHelperContent, hintContent, clearable = false, clearLabel = "Clear", calendarProps, open: controlledOpen, onOpenChange, className } = props;
+	const [uncontrolledDate, setUncontrolledDate] = useState(defaultValue);
+	const [internalOpen, setInternalOpen] = useState(false);
+	const isControlled = "value" in props;
+	const selectedDate = isControlled ? value : uncontrolledDate;
+	const isOpenControlled = controlledOpen !== void 0;
+	const isOpen = isOpenControlled ? controlledOpen : internalOpen;
+	const setOpen = (nextOpen) => {
+		if (!isOpenControlled) setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	};
+	const handleSelect = (date) => {
+		if (!isControlled) setUncontrolledDate(date);
+		onChange?.(date);
+		setOpen(false);
+	};
+	const handleClear = (event) => {
+		event.stopPropagation();
+		if (!isControlled) setUncontrolledDate(void 0);
+		onChange?.(void 0);
+	};
+	const showClear = clearable && !disabled && selectedDate !== void 0;
+	const displayValue = selectedDate ? (formatDate ?? ((d) => format(d, "PPP")))(selectedDate) : "";
+	const inputTrigger = /* @__PURE__ */ jsx(Input, {
+		readOnly: true,
+		value: displayValue,
+		placeholder,
+		label,
+		size,
+		disabled,
+		required,
+		rounded,
+		error,
+		errorContent,
+		startHelperContent,
+		endHelperContent,
+		hintContent,
+		className: cn("cursor-pointer read-only:bg-background", fieldEndPaddingClassName(showClear, !hideIcon), !displayValue && "text-muted-foreground"),
+		endIcon: showClear || !hideIcon ? /* @__PURE__ */ jsx(FieldEndIcons, {
+			onClear: showClear ? handleClear : void 0,
+			clearLabel,
+			icon: hideIcon ? void 0 : /* @__PURE__ */ jsx(CalendarIcon, {
+				size: FIELD_ICON_SIZE,
+				className: "text-muted-foreground"
+			})
+		}) : void 0
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex-1", className),
+		children: [/* @__PURE__ */ jsxs(Popover, {
+			open: isOpen,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				disabled,
+				children: trigger ? trigger : /* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled,
+					className: "w-full text-start",
+					children: inputTrigger
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				align: "start",
+				className: "w-auto overflow-hidden rounded-2xl p-1 shadow-lg",
+				children: /* @__PURE__ */ jsx(Calendar, {
+					mode: "single",
+					selected: selectedDate,
+					onSelect: handleSelect,
+					showOutsideDays: true,
+					captionLayout: "dropdown",
+					...calendarProps
+				})
+			})]
+		}), name && /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name,
+			value: selectedDate?.toISOString() ?? ""
+		})]
+	});
+}
+DatePicker.displayName = "DatePicker";
+//#endregion
+export { DatePicker };

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

@@ -0,0 +1,301 @@
+import { cn } from "../../utils/cn.js";
+import { Button } from "../button/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../core/popover.js";
+import { Input } from "../../core/input/input.js";
+import { Calendar } from "../calendar/calendar.js";
+import { PRESET_IDS, PRESET_LABELS, computeDateRange } from "./presets.js";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CalendarRangeIcon, CheckIcon, ChevronRightIcon, XIcon } from "lucide-react";
+import { endOfDay, format, isValid, parse } from "date-fns";
+//#region src/components/date-range-picker/date-range-picker.tsx
+var DEFAULT_DATE_FORMAT = "dd MMM yyyy";
+var EMPTY_DRAFT_RANGE = {
+	startDate: null,
+	endDate: null
+};
+var toDraftRange = (range) => ({
+	startDate: range?.from ?? null,
+	endDate: range?.to ?? null
+});
+var toCalendarRange = (range) => {
+	if (!range.startDate && !range.endDate) return void 0;
+	return {
+		from: range.startDate ?? void 0,
+		to: range.endDate ?? void 0
+	};
+};
+var parseDateOrNull = (value, dateFormat) => {
+	const parsed = parse(value, dateFormat, /* @__PURE__ */ new Date());
+	return isValid(parsed) ? parsed : null;
+};
+function DateRangePicker({ presets, presetLabels, allowCustom = false, lockEndToToday = false, disableFutureDates = false, dateFormat = DEFAULT_DATE_FORMAT, onChange, onPresetChange, onDraftChange, selectedPresetId, selectedStartDate, selectedEndDate, clearable = false, clearLabel = "Clear", onClear, trigger, placeholder = "Select date range", label, size, hideIcon = false, disabled = false, required = false, rounded = false, error, errorContent, startHelperContent, endHelperContent, hintContent, align = "start", side = "bottom", className }) {
+	const [open, setOpen] = React$1.useState(false);
+	const [showCalendar, setShowCalendar] = React$1.useState(false);
+	const [draftRange, setDraftRange] = React$1.useState(EMPTY_DRAFT_RANGE);
+	const [calendarMonth, setCalendarMonth] = React$1.useState(/* @__PURE__ */ new Date());
+	const [calendarLayout, setCalendarLayout] = React$1.useState("right");
+	const calendarRef = React$1.useRef(null);
+	const [startInputValue, setStartInputValue] = React$1.useState("");
+	const [endInputValue, setEndInputValue] = React$1.useState("");
+	React$1.useLayoutEffect(() => {
+		if (!showCalendar || !calendarRef.current || calendarLayout === "inline") return;
+		const rect = calendarRef.current.getBoundingClientRect();
+		if (rect.bottom > window.innerHeight) setCalendarLayout("inline");
+		else if (calendarLayout === "right" && rect.right > window.innerWidth) setCalendarLayout("left");
+		else if (calendarLayout === "left" && rect.left < 0) setCalendarLayout("inline");
+	}, [showCalendar, calendarLayout]);
+	const activePresets = presets ?? [...PRESET_IDS];
+	const resolveLabel = (id) => presetLabels?.[id] ?? (id === "custom" ? "Custom" : PRESET_LABELS[id]);
+	const updateDraftRange = React$1.useCallback((nextRange) => {
+		setDraftRange(nextRange);
+		onDraftChange?.(nextRange);
+	}, [onDraftChange]);
+	const syncInputsFromDraft = React$1.useCallback((range) => {
+		setStartInputValue(range.startDate ? format(range.startDate, dateFormat) : "");
+		if (lockEndToToday) setEndInputValue(format(/* @__PURE__ */ new Date(), dateFormat));
+		else setEndInputValue(range.endDate ? format(range.endDate, dateFormat) : "");
+	}, [dateFormat, lockEndToToday]);
+	const handleOpenChange = (nextOpen) => {
+		setOpen(nextOpen);
+		if (!nextOpen) {
+			setShowCalendar(false);
+			setCalendarLayout("right");
+			updateDraftRange(EMPTY_DRAFT_RANGE);
+			setStartInputValue("");
+			setEndInputValue("");
+		}
+	};
+	const handlePresetClick = (id) => {
+		const range = computeDateRange(id);
+		onPresetChange?.(id, range);
+		onChange?.({
+			presetId: id,
+			...range
+		});
+		setOpen(false);
+	};
+	const handleRangeChange = React$1.useCallback((range) => {
+		const nextDraft = toDraftRange(range);
+		if (lockEndToToday && nextDraft.startDate) {
+			const locked = {
+				startDate: nextDraft.startDate,
+				endDate: endOfDay(/* @__PURE__ */ new Date())
+			};
+			updateDraftRange(locked);
+			syncInputsFromDraft(locked);
+		} else {
+			updateDraftRange(nextDraft);
+			syncInputsFromDraft(nextDraft);
+		}
+	}, [
+		lockEndToToday,
+		syncInputsFromDraft,
+		updateDraftRange
+	]);
+	const handleApply = () => {
+		if (draftRange.startDate && draftRange.endDate) {
+			onChange?.({
+				startDate: draftRange.startDate,
+				endDate: draftRange.endDate
+			});
+			handleOpenChange(false);
+		}
+	};
+	const openCalendarPanel = () => {
+		if (!showCalendar) {
+			setShowCalendar(true);
+			const initial = {
+				startDate: selectedStartDate ?? null,
+				endDate: selectedStartDate ? lockEndToToday ? endOfDay(/* @__PURE__ */ new Date()) : selectedEndDate ?? null : null
+			};
+			updateDraftRange(initial);
+			syncInputsFromDraft(initial);
+			setCalendarMonth(initial.startDate ?? /* @__PURE__ */ new Date());
+		}
+	};
+	const handleStartInputChange = (e) => {
+		const val = e.target.value;
+		setStartInputValue(val);
+		const parsed = parseDateOrNull(val, dateFormat);
+		updateDraftRange({
+			startDate: parsed,
+			endDate: lockEndToToday ? endOfDay(/* @__PURE__ */ new Date()) : draftRange.endDate
+		});
+		if (parsed) setCalendarMonth(parsed);
+	};
+	const handleStartInputBlur = () => {
+		setStartInputValue(draftRange.startDate ? format(draftRange.startDate, dateFormat) : "");
+	};
+	const handleEndInputChange = (e) => {
+		if (lockEndToToday) return;
+		const val = e.target.value;
+		setEndInputValue(val);
+		const parsed = parseDateOrNull(val, dateFormat);
+		updateDraftRange({
+			startDate: draftRange.startDate,
+			endDate: parsed
+		});
+		if (parsed) setCalendarMonth(parsed);
+	};
+	const handleEndInputBlur = () => {
+		if (lockEndToToday) return;
+		setEndInputValue(draftRange.endDate ? format(draftRange.endDate, dateFormat) : "");
+	};
+	const handleClear = () => {
+		onClear?.();
+		handleOpenChange(false);
+	};
+	const displayValue = selectedPresetId ? resolveLabel(selectedPresetId) : "";
+	const hasSelection = !!(selectedPresetId || selectedStartDate);
+	const inputTrigger = /* @__PURE__ */ jsx(Input, {
+		readOnly: true,
+		value: displayValue,
+		placeholder,
+		label,
+		size,
+		disabled,
+		required,
+		rounded,
+		error,
+		errorContent,
+		startHelperContent,
+		endHelperContent,
+		hintContent,
+		className: cn("cursor-pointer read-only:bg-background", !displayValue && "text-muted-foreground"),
+		endIcon: hideIcon ? void 0 : /* @__PURE__ */ jsx(CalendarRangeIcon, {
+			size: 16,
+			className: "text-muted-foreground"
+		})
+	});
+	const isRangeComplete = !!(draftRange.startDate && draftRange.endDate);
+	const isInline = calendarLayout === "inline";
+	const showPresetRows = !(allowCustom && showCalendar && isInline);
+	const cancelButton = /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		color: "error",
+		size: isInline ? void 0 : "sm",
+		onClick: () => handleOpenChange(false),
+		children: "Cancel"
+	});
+	const applyButton = /* @__PURE__ */ jsx(Button, {
+		variant: "outline",
+		color: "primary",
+		size: isInline ? void 0 : "sm",
+		disabled: !isRangeComplete,
+		onClick: handleApply,
+		children: "Apply"
+	});
+	const calendarBody = /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col h-full justify-between",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("p-1", isInline && "flex justify-center"),
+			children: /* @__PURE__ */ jsx(Calendar, {
+				mode: "range",
+				selected: toCalendarRange(draftRange),
+				onSelect: handleRangeChange,
+				month: calendarMonth,
+				onMonthChange: setCalendarMonth,
+				numberOfMonths: isInline ? 1 : 2,
+				showOutsideDays: true,
+				captionLayout: "dropdown",
+				disabled: lockEndToToday || disableFutureDates ? { after: /* @__PURE__ */ new Date() } : void 0
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cn("p-3 flex items-end gap-4", isInline ? "flex-wrap justify-end gap-3" : "justify-between"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cn(isInline ? "grid w-full grid-cols-2 gap-3" : "flex items-center gap-3"),
+				children: [/* @__PURE__ */ jsx(Input, {
+					size: "sm",
+					label: "Start date",
+					value: startInputValue,
+					placeholder: dateFormat.toLowerCase(),
+					onChange: handleStartInputChange,
+					onBlur: handleStartInputBlur,
+					className: isInline ? "w-full min-w-0" : "w-32"
+				}), /* @__PURE__ */ jsx(Input, {
+					size: "sm",
+					label: "End date",
+					value: endInputValue,
+					placeholder: dateFormat.toLowerCase(),
+					onChange: handleEndInputChange,
+					onBlur: handleEndInputBlur,
+					disabled: lockEndToToday,
+					className: isInline ? "w-full min-w-0" : "w-32"
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: cn("flex gap-2", isInline ? "w-full flex-col" : "h-full items-end"),
+				children: isInline ? /* @__PURE__ */ jsxs(Fragment$1, { children: [applyButton, cancelButton] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [cancelButton, applyButton] })
+			})]
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex-1", className),
+		children: /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: handleOpenChange,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				disabled,
+				children: trigger ?? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled,
+					className: "w-full text-start",
+					children: inputTrigger
+				})
+			}), /* @__PURE__ */ jsxs(PopoverContent, {
+				align,
+				side,
+				collisionPadding: 16,
+				className: cn("w-auto min-w-[10rem] gap-0 p-0 relative", isInline ? "max-h-(--radix-popover-content-available-height) max-w-(--radix-popover-content-available-width) overflow-y-auto" : "overflow-visible", allowCustom && showCalendar && calendarLayout === "right" && "rounded-r-none", allowCustom && showCalendar && calendarLayout === "left" && "rounded-l-none"),
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex max-h-[min(24rem,calc(100vh-6rem))] min-w-[10rem] flex-col overflow-y-auto py-1.5",
+						children: [
+							showPresetRows && activePresets.map((id) => /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: () => handlePresetClick(id),
+								onMouseEnter: () => setShowCalendar(false),
+								className: cn("flex w-full items-center justify-between gap-6 px-3 py-1.5 text-left text-sm hover:bg-accent", selectedPresetId === id && "font-medium"),
+								children: [resolveLabel(id), selectedPresetId === id && /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 shrink-0 text-primary" })]
+							}, id)),
+							allowCustom && /* @__PURE__ */ jsxs(Fragment$1, { children: [showPresetRows && /* @__PURE__ */ jsx("div", { className: "mx-1 my-1 h-px bg-border" }), /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: () => {
+									if (showCalendar) {
+										setShowCalendar(false);
+										updateDraftRange(EMPTY_DRAFT_RANGE);
+									} else openCalendarPanel();
+								},
+								onPointerEnter: (event) => {
+									if (event.pointerType === "mouse") openCalendarPanel();
+								},
+								className: cn("flex w-full items-center justify-between gap-6 px-3 py-1.5 text-left text-sm hover:bg-accent", showCalendar && "bg-accent font-medium"),
+								children: [resolveLabel("custom"), /* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("size-4 shrink-0 text-muted-foreground transition-transform duration-200", showCalendar && "rotate-90") })]
+							})] }),
+							showPresetRows && clearable && hasSelection && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", { className: "mx-1 my-1 h-px bg-border" }), /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: handleClear,
+								onMouseEnter: () => setShowCalendar(false),
+								className: "flex w-full items-center justify-between gap-6 px-3 py-1.5 text-left text-sm text-muted-foreground hover:bg-accent",
+								children: [clearLabel, /* @__PURE__ */ jsx(XIcon, { className: "size-4 shrink-0" })]
+							})] })
+						]
+					}),
+					allowCustom && showCalendar && isInline && /* @__PURE__ */ jsx("div", {
+						className: "border-t",
+						children: calendarBody
+					}),
+					allowCustom && showCalendar && !isInline && /* @__PURE__ */ jsx("div", {
+						ref: calendarRef,
+						className: cn("absolute top-0 border bg-popover text-popover-foreground shadow-lg", calendarLayout === "right" ? "left-full -ml-px rounded-r-2xl border-l" : "right-full -mr-px rounded-l-2xl border-r"),
+						children: calendarBody
+					})
+				]
+			})]
+		})
+	});
+}
+DateRangePicker.displayName = "DateRangePicker";
+//#endregion
+export { DateRangePicker };