@postxl/ui-components 1.3.4 → 1.3.6

package/dist/index.js

@@ -59,7 +59,7 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 import useEmblaCarousel from "embla-carousel-react";
-import { BaselineIcon, CalendarIcon as CalendarIcon$1, CheckIcon as CheckIcon$1, CheckSquareIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronUpIcon as ChevronUpIcon$1, CopyIcon, CrossIcon, EraserIcon, EyeOffIcon, FilterX, GripHorizontalIcon, HashIcon, ListChecksIcon, ListIcon, PanelLeftIcon, PinIcon, PinOffIcon, PlusIcon, Settings2Icon, SquareIcon, TextInitialIcon, TrashIcon, XIcon } from "lucide-react";
+import { BaselineIcon, CalendarIcon as CalendarIcon$1, CheckIcon as CheckIcon$1, CheckSquareIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronUpIcon as ChevronUpIcon$1, CopyIcon, EraserIcon, EyeOffIcon, FilterX, GripHorizontalIcon, HashIcon, ListChecksIcon, ListIcon, PanelLeftIcon, PinIcon, PinOffIcon, PlusIcon, Settings2Icon, SquareIcon, TextInitialIcon, TrashIcon, XIcon } from "lucide-react";
 import * as CollapsePrimitive from "@radix-ui/react-collapsible";
 import { Command as Command$1 } from "cmdk";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -91,6 +91,21 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
+/**
+* Generates a test ID by combining a base ID with a suffix.
+* Returns undefined if no base ID is provided.
+*
+* For the root element, use `data-test-id={__e2e_test_id__}` directly.
+* Use this function only for sub-elements that need a suffix.
+*
+* @example
+* <div data-test-id={__e2e_test_id__}>                      // root element - use directly
+* <input data-test-id={testId(__e2e_test_id__, 'search')}>  // sub-element - returns `${baseId}-search` or undefined
+*/
+function testId(baseId, suffix) {
+	if (!baseId) return void 0;
+	return `${baseId}-${suffix}`;
+}
 
 //#endregion
 //#region src/accordion/accordion.tsx
@@ -366,7 +381,7 @@ BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
 
 //#endregion
 //#region src/calendar/calendar.tsx
-function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", showYearNavigation = false, formatters, components,...props }) {
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", showYearNavigation = false, formatters, components, __e2e_test_id__,...props }) {
 	const defaultClassNames = getDefaultClassNames();
 	const [rangeSelectionStep, setRangeSelectionStep] = React$43.useState("from");
 	const handleDayClick = React$43.useCallback((day, modifiers, e) => {
@@ -467,6 +482,7 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 							disabled: fromMonth && currentMonth <= fromMonth,
 							className: btnClassNames,
 							onClick: () => setCurrentMonth((m) => addMonths(m ?? new Date(), -12)),
+							__e2e_test_id__: testId(__e2e_test_id__, "prev-year"),
 							children: /* @__PURE__ */ jsx(DoubleArrowLeftIcon, { className: "" })
 						}), /* @__PURE__ */ jsx(Button, {
 							"aria-label": "previous month",
@@ -475,6 +491,7 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 							disabled: fromMonth && currentMonth <= fromMonth,
 							className: btnClassNames,
 							onClick: () => setCurrentMonth((m) => addMonths(m ?? new Date(), -1)),
+							__e2e_test_id__: testId(__e2e_test_id__, "prev-month"),
 							children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
 						})]
 					}), /* @__PURE__ */ jsxs("div", {
@@ -486,6 +503,7 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 							disabled: toMonth && currentMonth >= toMonth,
 							className: btnClassNames,
 							onClick: () => setCurrentMonth((m) => addMonths(m ?? new Date(), 1)),
+							__e2e_test_id__: testId(__e2e_test_id__, "next-month"),
 							children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
 						}), showYearNavigation && /* @__PURE__ */ jsx(Button, {
 							"aria-label": "next year",
@@ -494,6 +512,7 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 							disabled: toMonth && currentMonth >= toMonth,
 							className: btnClassNames,
 							onClick: () => setCurrentMonth((m) => addMonths(m ?? new Date(), 12)),
+							__e2e_test_id__: testId(__e2e_test_id__, "next-year"),
 							children: /* @__PURE__ */ jsx(DoubleArrowRightIcon, {})
 						})]
 					})]
@@ -502,6 +521,7 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 			Root: ({ className: className$1, rootRef,...props$1 }) => {
 				return /* @__PURE__ */ jsx("div", {
 					"data-slot": "calendar",
+					"data-test-id": __e2e_test_id__,
 					ref: rootRef,
 					className: cn(className$1),
 					...props$1
@@ -750,7 +770,7 @@ CarouselNext.displayName = "CarouselNext";
 
 //#endregion
 //#region src/checkbox/checkbox.tsx
-const checkboxVariants = cva("cursor-pointer peer appearance-none rounded border focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shrink-0 shadow-xs transition-shadow", {
+const checkboxVariants = cva("cursor-pointer peer appearance-none rounded-sm border focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shrink-0 shadow-xs transition-shadow", {
 	variants: {
 		variant: {
 			default: "",
@@ -863,6 +883,7 @@ function DialogContent({ className, children, showCloseButton = true, __e2e_test
 		children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
 			"data-slot": "dialog-content",
 			className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", className),
+			"data-test-id": __e2e_test_id__,
 			...props,
 			children: [children, showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
 				title: "Close",
@@ -873,7 +894,7 @@ function DialogContent({ className, children, showCloseButton = true, __e2e_test
 					variant: "outline",
 					size: "icon",
 					className: "size-6 rounded",
-					__e2e_test_id__: __e2e_test_id__ ? `${__e2e_test_id__}-close` : void 0,
+					__e2e_test_id__: testId(__e2e_test_id__, "close"),
 					children: /* @__PURE__ */ jsx(Cross2Icon, {})
 				}), /* @__PURE__ */ jsx("span", {
 					className: "sr-only",
@@ -1247,7 +1268,7 @@ const ContentFrame = ({ title = "", controls = [], indicators = [], children, on
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-grow gap-2 overflow-hidden",
 					children: [/* @__PURE__ */ jsx("h2", {
-						className: "text-xl overflow-hidden text-ellipsis whitespace-nowrap",
+						className: "text-xl overflow-hidden text-ellipsis whitespace-nowrap w-full",
 						children: titleLink ?? title
 					}), indicators.length > 0 && /* @__PURE__ */ jsx("div", {
 						className: "flex gap-2 whitespace-nowrap",
@@ -1803,7 +1824,7 @@ const GanttTimerangePicker = ({ initialDateFrom, initialDateTo, onRangeChange, t
 						onClick: () => {
 							setIsOpen(false);
 						},
-						children: /* @__PURE__ */ jsx(CrossIcon, { className: "size-5" })
+						children: /* @__PURE__ */ jsx(XIcon, { className: "size-5" })
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
@@ -1915,12 +1936,12 @@ const GanttTimeline = ({ header }) => {
 	const lastYearPartialMs = timelineEndMs - new Date(te.getFullYear(), 0, 1).getTime();
 	const firstMonthPartialMs = new Date(ts.getFullYear(), ts.getMonth() + 1, 1).getTime() - timelineStartMs;
 	const lastMonthPartialMs = timelineEndMs - new Date(te.getFullYear(), te.getMonth(), 1).getTime();
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: "absolute right-8 top-1/2 z-10 -translate-y-1/2",
+	return /* @__PURE__ */ jsxs(Fragment, { children: [cellOpts.onRangeChange && /* @__PURE__ */ jsx("div", {
+		className: "absolute right-8 top-1/2 -translate-y-1/2",
 		children: /* @__PURE__ */ jsx(GanttTimerangePicker, {
 			initialDateFrom: cellOpts.dateRangeFrom ?? void 0,
 			initialDateTo: cellOpts.dateRangeTo ?? void 0,
-			onRangeChange: cellOpts.onRangeChange ?? void 0,
+			onRangeChange: cellOpts.onRangeChange,
 			timelineStart: cellOpts.timelineStart,
 			timelineEnd: cellOpts.timelineEnd
 		})
@@ -2546,7 +2567,8 @@ function useDebouncedCallback(callback, delay) {
 const inputVariants = cva("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
 	variants: { variant: {
 		default: "min-h-9 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-		simple: "min-h-8"
+		simple: "min-h-8",
+		discreet: "py-0 min-h-7 border-transparent shadow-none hover:border-input hover:shadow-sm focus:border-input focus:shadow-sm bg-transparent hover:bg-accent/30"
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -2681,7 +2703,7 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
 						size: "icon",
 						className: "size-7",
 						onClick: onClose,
-						children: /* @__PURE__ */ jsx(CrossIcon, {})
+						children: /* @__PURE__ */ jsx(XIcon, {})
 					})
 				]
 			})]
@@ -3277,7 +3299,8 @@ function GanttCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSe
 const textareaVariants = cva("border-input placeholder:text-muted-foreground aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50", {
 	variants: { variant: {
 		default: "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-		simple: ""
+		simple: "",
+		discreet: "border-transparent shadow-none hover:border-input hover:shadow-sm focus:border-input focus:shadow-sm bg-transparent hover:bg-accent/30"
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -3672,7 +3695,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 									event.preventDefault();
 									event.stopPropagation();
 								},
-								children: /* @__PURE__ */ jsx(CrossIcon, { className: "size-3" })
+								children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
 							})]
 						}, value)), /* @__PURE__ */ jsx(CommandInput, {
 							ref: inputRef,
@@ -3919,25 +3942,31 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 	const cellOpts = cell.column.columnDef.meta?.cell;
 	const hasSearch = (cellOpts?.variant === "select" && cellOpts?.hasSearch) ?? false;
 	const sideOffset = -(inputRef.current?.clientHeight ?? 0);
-	const arrayOptions = cellOpts?.variant === "select" ? cellOpts.options : void 0;
-	const optionsMap = cellOpts?.variant === "select" ? cellOpts.optionsMap : void 0;
+	const { options: arrayOptions, optionsMap, optionsRenderer } = cellOpts?.variant === "select" ? cellOpts : {};
 	const arrayOptionsLabelMap = React$18.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
 	const displayLabel = React$18.useMemo(() => {
-		if (!value) return value;
-		if (optionsMap) return optionsMap.get(value) ?? value;
-		if (arrayOptionsLabelMap) return arrayOptionsLabelMap.get(value) ?? value;
+		if (optionsMap) {
+			const data = optionsMap.get(value ?? "");
+			if (optionsRenderer) return optionsRenderer(data, "cell");
+			return data ?? value;
+		}
+		if (arrayOptionsLabelMap) return arrayOptionsLabelMap.get(value ?? "") ?? value;
 		return value;
 	}, [
 		value,
 		optionsMap,
-		arrayOptionsLabelMap
+		arrayOptionsLabelMap,
+		optionsRenderer
 	]);
 	const options = React$18.useMemo(() => {
 		if (!isEditing) return [];
-		if (arrayOptions) return arrayOptions;
-		if (optionsMap) return Array.from(optionsMap.entries()).map(([id, label]) => ({
+		if (arrayOptions) return arrayOptions.map((opt) => ({
+			value: opt.value,
+			data: opt.label
+		}));
+		if (optionsMap) return Array.from(optionsMap.entries()).map(([id, data]) => ({
 			value: id,
-			label
+			data
 		}));
 		return [];
 	}, [
@@ -3998,13 +4027,13 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		meta?.isScrolling
 	]);
 	let editingContent;
-	if (hasSearch) editingContent = /* @__PURE__ */ jsxs(Popover, {
+	if (hasSearch || optionsRenderer) editingContent = /* @__PURE__ */ jsxs(Popover, {
 		open,
 		onOpenChange,
 		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsx("div", {
-				className: "size-full items-start text-start border-none p-0 shadow-none focus-visible:ring-0 dark:bg-transparent [&_svg]:hidden line-clamp-1",
+				className: cn("size-full", !optionsRenderer && "items-start text-start border-none p-0 shadow-none focus-visible:ring-0 dark:bg-transparent [&_svg]:hidden line-clamp-1"),
 				children: displayLabel
 			})
 		}), /* @__PURE__ */ jsx(PopoverContent, {
@@ -4014,17 +4043,18 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 			className: "max-w-[500px] w-full rounded-none p-0",
 			onOpenAutoFocus,
 			children: /* @__PURE__ */ jsx(Command, { children: /* @__PURE__ */ jsxs(CommandList, { children: [
-				/* @__PURE__ */ jsx(CommandInput, {
+				hasSearch && /* @__PURE__ */ jsx(CommandInput, {
 					ref: inputRef,
 					placeholder: "Search...",
 					className: "h-auto flex-1 p-0"
 				}),
 				/* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }),
 				/* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(CommandItem, {
+					className: optionsRenderer ? "py-1" : void 0,
 					onSelect: () => {
 						onValueChange(option.value);
 					},
-					children: [/* @__PURE__ */ jsx("span", { children: option.label }), value === option.value ? /* @__PURE__ */ jsx(CheckIcon$1, { className: "ml-auto h-4 w-4" }) : null]
+					children: [optionsRenderer ? optionsRenderer(option.data, "option") : /* @__PURE__ */ jsx("span", { children: option.data }), value === option.value ? /* @__PURE__ */ jsx(CheckIcon$1, { className: "ml-auto h-4 w-4" }) : null]
 				}, option.value)) })
 			] }) })
 		})]
@@ -4046,7 +4076,7 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 			children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
 				value: option.value,
 				spacing: "sm",
-				children: option.label
+				children: option.data
 			}, option.value))
 		})]
 	});
@@ -4060,7 +4090,7 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		isFocused,
 		isSelected,
 		onKeyDown: onWrapperKeyDown,
-		children: isEditing ? editingContent : /* @__PURE__ */ jsx("span", {
+		children: isEditing ? editingContent : optionsRenderer ? displayLabel : /* @__PURE__ */ jsx("span", {
 			"data-slot": "grid-cell-content",
 			children: displayLabel
 		})
@@ -4511,6 +4541,63 @@ function DataGridViewMenu({ table,...props }) {
 	})] });
 }
 
+//#endregion
+//#region src/data-grid/column-presets/select-column.tsx
+/**
+* Creates a selection column with checkboxes for row selection.
+* Includes a header checkbox for selecting all rows and an optional delete button.
+*
+* @example
+* ```tsx
+* const columns = [
+*   createSelectColumn<MyDataType>({
+*     onRemoveRows: (ids) => handleDelete(ids),
+*   }),
+*   // ... other columns
+* ]
+* ```
+*/
+function createSelectColumn(options = {}) {
+	const { onRemoveRows, id = "select", size = 70 } = options;
+	return {
+		id,
+		header: ({ table }) => /* @__PURE__ */ jsxs("div", {
+			className: "size-full p-0 m-0 flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(Checkbox, {
+				variant: table.getIsSomePageRowsSelected() ? "default" : "simple",
+				iconStyle: table.getIsSomePageRowsSelected() ? "default" : "simple",
+				checkIcon: "check",
+				checked: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected(),
+				onChange: (e) => table.toggleAllPageRowsSelected(!!e.target.checked)
+			}), onRemoveRows && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				className: "size-5 hover:[&_svg]:text-background hover:bg-destructive/90",
+				onClick: () => {
+					const toRemove = table.getSelectedRowModel().rows.map((row) => row.original.id);
+					if (toRemove.length === 0) return;
+					onRemoveRows(toRemove);
+					table.toggleAllRowsSelected(false);
+				},
+				children: /* @__PURE__ */ jsx(TrashIcon, {})
+			})]
+		}),
+		cell: ({ row }) => /* @__PURE__ */ jsx("div", {
+			className: "size-full flex items-center px-3",
+			children: /* @__PURE__ */ jsx(Checkbox, {
+				variant: "simple",
+				iconStyle: "simple",
+				checkIcon: "check",
+				checked: row.getIsSelected(),
+				disabled: !row.getCanSelect(),
+				onChange: (e) => row.toggleSelected(!!e.target.checked)
+			})
+		}),
+		size,
+		enableSorting: false,
+		enableHiding: false
+	};
+}
+
 //#endregion
 //#region src/data-grid/hooks/use-data-grid.tsx
 const DEFAULT_ROW_HEIGHT = "short";
@@ -6089,6 +6176,109 @@ function useIsMobile(mobileBreakpoint = 768) {
 	return isMobile;
 }
 
+//#endregion
+//#region src/info-card/info-card.tsx
+const variantStyles = {
+	loading: {
+		titleClass: "text-foreground",
+		messageContainerClass: "p-4 bg-muted border border-border rounded-md"
+	},
+	error: {
+		titleClass: "text-destructive",
+		messageContainerClass: "p-4 bg-destructive/10 border border-destructive/20 rounded-md"
+	},
+	info: {
+		titleClass: "text-foreground",
+		messageContainerClass: "p-4 bg-muted border border-border rounded-md"
+	},
+	"not-found": {
+		titleClass: "text-foreground",
+		messageContainerClass: "p-4 bg-muted border border-border rounded-md"
+	}
+};
+const InfoCard = ({ variant, title, message, showHomeButton = false, children }) => {
+	const styles = variantStyles[variant];
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex w-full pt-4 px-4 h-(--content-without-header) items-center justify-center",
+		children: /* @__PURE__ */ jsxs(Card, {
+			className: "max-w-xl w-full",
+			children: [
+				/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, {
+					className: styles.titleClass,
+					children: /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-2",
+						children: [variant === "loading" && /* @__PURE__ */ jsx("div", {
+							style: {
+								width: 20,
+								height: 20
+							},
+							children: /* @__PURE__ */ jsx(Spinner, {})
+						}), title]
+					})
+				}) }),
+				/* @__PURE__ */ jsxs(CardContent, {
+					className: "space-y-4",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: styles.messageContainerClass,
+						children: /* @__PURE__ */ jsx("p", {
+							className: "text-sm wrap-break-word",
+							children: message
+						})
+					}), children]
+				}),
+				showHomeButton && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(Button, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx("a", {
+						href: "/",
+						children: "Back to Home"
+					})
+				}) })
+			]
+		})
+	});
+};
+
+//#endregion
+//#region src/input/deferred-input.tsx
+/**
+* An Input that buffers changes locally and only commits to the parent
+* on blur or Enter key press. Useful for forms where you don't want to
+* trigger expensive operations (like API calls) on every keystroke.
+*/
+function DeferredInput({ value, onCommit, onValueChange, commitOnEnter = true, onBlur, onKeyDown,...props }) {
+	const [localValue, setLocalValue] = useState(value);
+	useEffect(() => {
+		setLocalValue(value);
+	}, [value]);
+	const commitValue = useCallback(() => {
+		if (localValue !== value) onCommit(localValue);
+	}, [
+		localValue,
+		value,
+		onCommit
+	]);
+	const handleChange = useCallback((e) => {
+		const newValue = e.target.value;
+		setLocalValue(newValue);
+		onValueChange?.(newValue);
+	}, [onValueChange]);
+	const handleBlur = useCallback((e) => {
+		commitValue();
+		onBlur?.(e);
+	}, [commitValue, onBlur]);
+	const handleKeyDown = useCallback((e) => {
+		if (commitOnEnter && e.key === "Enter") e.currentTarget.blur();
+		onKeyDown?.(e);
+	}, [commitOnEnter, onKeyDown]);
+	return /* @__PURE__ */ jsx(Input, {
+		...props,
+		value: localValue,
+		onChange: handleChange,
+		onBlur: handleBlur,
+		onKeyDown: handleKeyDown
+	});
+}
+
 //#endregion
 //#region src/input/number-input.tsx
 /**
@@ -6142,7 +6332,8 @@ function parseFormattedNumberHeuristic(formatted) {
 const numberInputWrapperVariants = cva("border-input bg-background grid grid-cols-[auto_1fr_auto] items-center overflow-hidden rounded-md border shadow-xs transition-[color,box-shadow] has-[input:disabled]:pointer-events-none has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50", {
 	variants: { variant: {
 		default: "min-h-9 focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
-		simple: "min-h-8"
+		simple: "min-h-8",
+		discreet: "py-0 min-h-7 border-transparent shadow-none hover:border-input hover:shadow-sm focus-within:border-input focus-within:shadow-sm bg-transparent hover:bg-accent/30"
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -6235,7 +6426,7 @@ const NumberInput = React$10.forwardRef(({ className, wrapperClassName, prefix,
 					inputVariants({ variant }),
 					// Remove border/shadow/ring from input since wrapper handles it
 					// Use min-h-full to override min-h-9/min-h-8 from inputVariants - wrapper controls height - never use explicit h-* in input since it breaks the spinner buttons for some browsers
-					"min-h-full border-0 shadow-none focus-visible:ring-0 p-0 tabular-nums",
+					"min-h-full bg-transparent hover:bg-transparent border-0 shadow-none focus-visible:ring-0 p-0 tabular-nums",
 					!prefix && !suffix ? "col-span-3" : !prefix || !suffix ? "col-span-2" : "col-span-1",
 					"text-right",
 					!prefix && "pl-2",
@@ -6266,6 +6457,51 @@ const NumberInput = React$10.forwardRef(({ className, wrapperClassName, prefix,
 });
 NumberInput.displayName = "NumberInput";
 
+//#endregion
+//#region src/input/deferred-number-input.tsx
+/**
+* A NumberInput that buffers changes locally and only commits to the parent
+* on blur or Enter key press. Useful for forms where you don't want to
+* trigger expensive operations (like API calls) on every keystroke.
+*/
+function DeferredNumberInput({ value, onCommit, onValueChange, commitOnEnter = true, onBlur, onEnter,...props }) {
+	const [localValue, setLocalValue] = useState(value);
+	useEffect(() => {
+		setLocalValue(value);
+	}, [value]);
+	const commitValue = useCallback(() => {
+		if (localValue !== value) onCommit(localValue);
+	}, [
+		localValue,
+		value,
+		onCommit
+	]);
+	const handleChange = useCallback((newValue) => {
+		const normalizedValue = newValue ?? null;
+		setLocalValue(normalizedValue);
+		onValueChange?.(normalizedValue);
+	}, [onValueChange]);
+	const handleBlur = useCallback((e) => {
+		commitValue();
+		onBlur?.(e);
+	}, [commitValue, onBlur]);
+	const handleEnter = useCallback(() => {
+		if (commitOnEnter) commitValue();
+		onEnter?.();
+	}, [
+		commitOnEnter,
+		commitValue,
+		onEnter
+	]);
+	return /* @__PURE__ */ jsx(NumberInput, {
+		...props,
+		value: localValue ?? void 0,
+		onChange: handleChange,
+		onBlur: handleBlur,
+		onEnter: handleEnter
+	});
+}
+
 //#endregion
 //#region src/mark-value-renderer/mark-value-renderer.tsx
 /**
@@ -6673,12 +6909,14 @@ const sheetVariants = cva("fixed z-50 gap-4 bg-background p-6 shadow-lg transiti
 	} },
 	defaultVariants: { side: "right" }
 });
-const SheetContent = React$6.forwardRef(({ side = "right", className, children,...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(SheetPrimitive.Content, {
+const SheetContent = React$6.forwardRef(({ side = "right", className, children, __e2e_test_id__,...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(SheetPrimitive.Content, {
 	ref,
 	className: cn(sheetVariants({ side }), className),
+	"data-test-id": __e2e_test_id__,
 	...props,
 	children: [/* @__PURE__ */ jsxs(SheetPrimitive.Close, {
 		className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary",
+		"data-test-id": testId(__e2e_test_id__, "close"),
 		children: [/* @__PURE__ */ jsx(Cross2Icon, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "Close"
@@ -7112,7 +7350,7 @@ function usePersistedState(storageKey, defaultValue) {
 	}, [storageKey]);
 	return [state, setPersistedState];
 }
-function Slicer({ filterValues, selectedValues, onChange, title, isLoading = false, optionsHeight = 200, className, defaultCollapsed = false, storageKey }) {
+function Slicer({ filterValues, selectedValues, onChange, title, isLoading = false, optionsHeight = 200, className, defaultCollapsed = false, storageKey, __e2e_test_id__ }) {
 	const effectiveStorageKey = storageKey === null ? void 0 : storageKey ?? `slicer-collapsed-${title}`;
 	const [isCollapsed, setIsCollapsed] = usePersistedState(effectiveStorageKey, defaultCollapsed);
 	const [searchQuery, setSearchQuery] = useState("");
@@ -7146,6 +7384,7 @@ function Slicer({ filterValues, selectedValues, onChange, title, isLoading = fal
 	};
 	return /* @__PURE__ */ jsxs(Card, {
 		className: cn("flex flex-col overflow-hidden w-56 rounded shadow-sm shrink-0", className),
+		"data-test-id": __e2e_test_id__,
 		children: [/* @__PURE__ */ jsxs(CardHeader, {
 			className: "px-2 py-0 pt-2 flex space-y-0 border-b border-border bg-muted/50 relative min-h-9",
 			children: [
@@ -7158,7 +7397,8 @@ function Slicer({ filterValues, selectedValues, onChange, title, isLoading = fal
 					variant: "simple",
 					placeholder: "Search...",
 					value: searchQuery,
-					onChange: (e) => setSearchQuery(e.target.value)
+					onChange: (e) => setSearchQuery(e.target.value),
+					"data-test-id": testId(__e2e_test_id__, "search")
 				}),
 				/* @__PURE__ */ jsx(Button, {
 					variant: "ghost",
@@ -7169,6 +7409,7 @@ function Slicer({ filterValues, selectedValues, onChange, title, isLoading = fal
 					},
 					title: isCollapsed ? "Expand slicer" : "Collapse slicer",
 					className: "size-7 absolute top-1 right-9 text-muted-foreground",
+					"data-test-id": testId(__e2e_test_id__, "collapse"),
 					children: /* @__PURE__ */ jsx(ChevronUpIcon$1, { className: cn(isCollapsed && "rotate-180") })
 				}),
 				/* @__PURE__ */ jsx(Button, {
@@ -7178,6 +7419,7 @@ function Slicer({ filterValues, selectedValues, onChange, title, isLoading = fal
 					onClick: handleClear,
 					title: "Clear filter",
 					className: "size-7 absolute top-1 right-1 text-muted-foreground",
+					"data-test-id": testId(__e2e_test_id__, "clear"),
 					children: /* @__PURE__ */ jsx(FilterX, {})
 				})
 			]
@@ -7188,6 +7430,7 @@ function Slicer({ filterValues, selectedValues, onChange, title, isLoading = fal
 				size: "xs",
 				className: "w-full justify-start px-2 py-1 rounded-sm text-sm font-normal",
 				onClick: handleSelectAll,
+				"data-test-id": testId(__e2e_test_id__, "select-all"),
 				children: searchQuery.length > 0 ? /* @__PURE__ */ jsx(Checkbox, {
 					readOnly: true,
 					checked: isAnyFilteredSelected,
@@ -7360,6 +7603,42 @@ function TabsContent({ className,...props }) {
 	});
 }
 
+//#endregion
+//#region src/textarea/deferred-textarea.tsx
+/**
+* A Textarea that buffers changes locally and only commits to the parent
+* on blur. Useful for forms where you don't want to trigger expensive
+* operations (like API calls) on every keystroke.
+*/
+function DeferredTextarea({ value, onCommit, onValueChange, onBlur,...props }) {
+	const [localValue, setLocalValue] = useState(value);
+	useEffect(() => {
+		setLocalValue(value);
+	}, [value]);
+	const commitValue = useCallback(() => {
+		if (localValue !== value) onCommit(localValue);
+	}, [
+		localValue,
+		value,
+		onCommit
+	]);
+	const handleChange = useCallback((e) => {
+		const newValue = e.target.value;
+		setLocalValue(newValue);
+		onValueChange?.(newValue);
+	}, [onValueChange]);
+	const handleBlur = useCallback((e) => {
+		commitValue();
+		onBlur?.(e);
+	}, [commitValue, onBlur]);
+	return /* @__PURE__ */ jsx(Textarea, {
+		...props,
+		value: localValue,
+		onChange: handleChange,
+		onBlur: handleBlur
+	});
+}
+
 //#endregion
 //#region src/toggle/toggle.tsx
 const toggleVariants = cva("inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground cursor-pointer", {
@@ -7427,5 +7706,5 @@ const ToggleGroupItem = React$1.forwardRef(({ className, children, variant, size
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 //#endregion
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, CheckboxCell, Collapse, CollapseContent, CollapseTrigger, ComboboxDemo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteDialog, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSeparator, CommandPaletteShortcut, CommandSeparator, CommandShortcut, ContentFrame, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, DataGridCell, DataGridCellWrapper, DataGridColumnHeader, DataGridContextMenu, DataGridRow, DataGridSearch, DataGridViewMenu, DateCell, DatePickerDemo, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GanttCell, GanttTimeline, GanttTimerangePicker, HeaderComponents, HoverCard, HoverCardContent, HoverCardTrigger, Input, Label, Loader, LongTextCell, MarkValueRenderer, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, MultiSelectCell, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberCell, NumberInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ReactNodeCell, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectCell, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShortTextCell, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slicer, Slider, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, checkboxVariants, cn, commandInputVariants, getCellKey, getCommonPinningStyles, getLineCount, getRowHeightValue, inputVariants, isoToLocalDate, knobVariants, navigationMenuTriggerStyle, parseCellKey, sliderVariants, toast, toggleVariants, useCallbackRef, useDataGrid, useDebouncedCallback, useIsMobile, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, CheckboxCell, Collapse, CollapseContent, CollapseTrigger, ComboboxDemo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteDialog, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSeparator, CommandPaletteShortcut, CommandSeparator, CommandShortcut, ContentFrame, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, DataGridCell, DataGridCellWrapper, DataGridColumnHeader, DataGridContextMenu, DataGridRow, DataGridSearch, DataGridViewMenu, DateCell, DatePickerDemo, DeferredInput, DeferredNumberInput, DeferredTextarea, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GanttCell, GanttTimeline, GanttTimerangePicker, HeaderComponents, HoverCard, HoverCardContent, HoverCardTrigger, InfoCard, Input, Label, Loader, LongTextCell, MarkValueRenderer, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, MultiSelectCell, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberCell, NumberInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ReactNodeCell, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectCell, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShortTextCell, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slicer, Slider, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, checkboxVariants, cn, commandInputVariants, createSelectColumn, getCellKey, getCommonPinningStyles, getLineCount, getRowHeightValue, inputVariants, isoToLocalDate, knobVariants, navigationMenuTriggerStyle, parseCellKey, sliderVariants, testId, toast, toggleVariants, useCallbackRef, useDataGrid, useDebouncedCallback, useIsMobile, useSidebar };
 //# sourceMappingURL=index.js.map