npm - @postxl/ui-components - Versions diffs - 1.2.2 → 1.3.0 - Mend

@postxl/ui-components 1.2.2 → 1.3.0

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

Files changed (5) hide show

package/dist/index.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ArrowLeftIcon, ArrowRightIcon, CalendarIcon, CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, Cross1Icon, Cross2Icon, DotFilledIcon, DotsHorizontalIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, DragHandleDots2Icon, EnterFullScreenIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import * as React$47 from "react";
 import * as React$46 from "react";
 import * as React$45 from "react";
 import * as React$44 from "react";
@@ -93,13 +94,13 @@ function cn(...inputs) {
 //#endregion
 //#region src/accordion/accordion.tsx
 const Accordion = AccordionPrimitive.Root;
-const AccordionItem = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
+const AccordionItem = React$47.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
 	ref,
 	className: cn("border-b", className),
 	...props
 }));
 AccordionItem.displayName = "AccordionItem";
-const AccordionTrigger = React$46.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
+const AccordionTrigger = React$47.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
 	className: "flex",
 	children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
 		ref,
@@ -109,7 +110,7 @@ const AccordionTrigger = React$46.forwardRef(({ className, children,...props },
 	})
 }));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-const AccordionContent = React$46.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
+const AccordionContent = React$47.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
 	ref,
 	className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
 	...props,
@@ -129,21 +130,21 @@ const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm [
 	} },
 	defaultVariants: { variant: "default" }
 });
-const Alert = React$45.forwardRef(({ className, variant,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const Alert = React$46.forwardRef(({ className, variant,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	role: "alert",
 	className: cn(alertVariants({ variant }), className),
 	...props
 }));
 Alert.displayName = "Alert";
-const AlertTitle = React$45.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h5", {
+const AlertTitle = React$46.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h5", {
 	ref,
 	className: cn("mb-1 font-medium leading-none tracking-tight", className),
 	...props,
 	children
 }));
 AlertTitle.displayName = "AlertTitle";
-const AlertDescription = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const AlertDescription = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("text-sm [&_p]:leading-relaxed", className),
 	...props
@@ -202,13 +203,13 @@ function Button({ className, variant, size, asChild = false, __e2e_test_id__,...
 const AlertDialog = AlertDialogPrimitive.Root;
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
-const AlertDialogOverlay = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, {
+const AlertDialogOverlay = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, {
 	className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
 	...props,
 	ref
 }));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-const AlertDialogContent = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, {
+const AlertDialogContent = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, {
 	ref,
 	className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className),
 	...props
@@ -224,25 +225,25 @@ const AlertDialogFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div",
 	...props
 });
 AlertDialogFooter.displayName = "AlertDialogFooter";
-const AlertDialogTitle = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, {
+const AlertDialogTitle = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, {
 	ref,
 	className: cn("text-lg font-semibold", className),
 	...props
 }));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-const AlertDialogDescription = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
+const AlertDialogDescription = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
 	ref,
 	className: cn("text-sm text-muted-foreground", className),
 	...props
 }));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-const AlertDialogAction = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
+const AlertDialogAction = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
 	ref,
 	className: cn(buttonVariants(), className),
 	...props
 }));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-const AlertDialogCancel = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
+const AlertDialogCancel = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
 	ref,
 	className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className),
 	...props
@@ -251,19 +252,19 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 //#endregion
 //#region src/avatar/avatar.tsx
-const Avatar = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
+const Avatar = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
 	ref,
 	className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
 	...props
 }));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-const AvatarImage = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
+const AvatarImage = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
 	ref,
 	className: cn("aspect-square h-full w-full", className),
 	...props
 }));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-const AvatarFallback = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
+const AvatarFallback = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
 	ref,
 	className: cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className),
 	...props
@@ -309,25 +310,25 @@ function Badge({ className, variant, size, asChild = false,...props }) {
 //#endregion
 //#region src/breadcrumb/breadcrumb.tsx
-const Breadcrumb = React$42.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", {
+const Breadcrumb = React$43.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", {
 	ref,
 	"aria-label": "breadcrumb",
 	...props
 }));
 Breadcrumb.displayName = "Breadcrumb";
-const BreadcrumbList = React$42.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ol", {
+const BreadcrumbList = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ol", {
 	ref,
 	className: cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className),
 	...props
 }));
 BreadcrumbList.displayName = "BreadcrumbList";
-const BreadcrumbItem = React$42.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
+const BreadcrumbItem = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
 	ref,
 	className: cn("inline-flex items-center gap-1.5", className),
 	...props
 }));
 BreadcrumbItem.displayName = "BreadcrumbItem";
-const BreadcrumbLink = React$42.forwardRef(({ asChild, className,...props }, ref) => {
+const BreadcrumbLink = React$43.forwardRef(({ asChild, className,...props }, ref) => {
 	const Comp = asChild ? Slot : "a";
 	return /* @__PURE__ */ jsx(Comp, {
 		ref,
@@ -336,7 +337,7 @@ const BreadcrumbLink = React$42.forwardRef(({ asChild, className,...props }, ref
 	});
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
-const BreadcrumbPage = React$42.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("span", {
+const BreadcrumbPage = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("span", {
 	ref,
 	"aria-disabled": "true",
 	"aria-current": "page",
@@ -366,8 +367,8 @@ BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
 //#region src/calendar/calendar.tsx
 function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", showYearNavigation = false, formatters, components,...props }) {
 	const defaultClassNames = getDefaultClassNames();
-	const [rangeSelectionStep, setRangeSelectionStep] = React$41.useState("from");
-	const handleDayClick = React$41.useCallback((day, modifiers, e) => {
+	const [rangeSelectionStep, setRangeSelectionStep] = React$42.useState("from");
+	const handleDayClick = React$42.useCallback((day, modifiers, e) => {
 		if (props.mode === "range") {
 			const range = props.selected;
 			if (rangeSelectionStep === "from") {
@@ -397,8 +398,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 		fromMonth = props.startMonth ?? new Date(nowYear - 100, 0);
 		toMonth = props.endMonth ?? new Date(nowYear + 100, 11);
 	}
-	const [currentMonth, setCurrentMonth] = React$41.useState(props.defaultMonth ?? props.month ?? new Date());
-	React$41.useEffect(() => {
+	const [currentMonth, setCurrentMonth] = React$42.useState(props.defaultMonth ?? props.month ?? new Date());
+	React$42.useEffect(() => {
 		if (props.month) setCurrentMonth(props.month);
 	}, [props.month]);
 	const addMonths = (date, months) => {
@@ -537,8 +538,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 }
 function CalendarDayButton({ className, day, modifiers,...props }) {
 	const defaultClassNames = getDefaultClassNames();
-	const ref = React$41.useRef(null);
-	React$41.useEffect(() => {
+	const ref = React$42.useRef(null);
+	React$42.useEffect(() => {
 		if (modifiers.focused) ref.current?.focus();
 	}, [modifiers.focused]);
 	return /* @__PURE__ */ jsx(Button, {
@@ -557,38 +558,38 @@ function CalendarDayButton({ className, day, modifiers,...props }) {
 //#endregion
 //#region src/card/card.tsx
-const Card = React$40.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const Card = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("rounded-xl border bg-card text-card-foreground shadow", className),
 	...props
 }));
 Card.displayName = "Card";
-const CardHeader = React$40.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const CardHeader = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("flex flex-col space-y-1.5 p-6", className),
 	...props
 }));
 CardHeader.displayName = "CardHeader";
-const CardTitle = React$40.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h3", {
+const CardTitle = React$41.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h3", {
 	ref,
 	className: cn("font-semibold leading-none tracking-tight", className),
 	...props,
 	children
 }));
 CardTitle.displayName = "CardTitle";
-const CardDescription = React$40.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("p", {
+const CardDescription = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("p", {
 	ref,
 	className: cn("text-sm text-muted-foreground", className),
 	...props
 }));
 CardDescription.displayName = "CardDescription";
-const CardContent = React$40.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const CardContent = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("p-6 pt-0", className),
 	...props
 }));
 CardContent.displayName = "CardContent";
-const CardFooter = React$40.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const CardFooter = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("flex items-center p-6 pt-0", className),
 	...props
@@ -599,7 +600,7 @@ CardFooter.displayName = "CardFooter";
 //#region src/card-hover/card-hover.tsx
 const HoverCard = HoverCardPrimitive.Root;
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
-const HoverCardContent = React$39.forwardRef(({ className, align = "center", sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
+const HoverCardContent = React$40.forwardRef(({ className, align = "center", sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
 	ref,
 	align,
 	sideOffset,
@@ -610,31 +611,31 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 //#endregion
 //#region src/carousel/carousel.tsx
-const CarouselContext = React$38.createContext(null);
+const CarouselContext = React$39.createContext(null);
 function useCarousel() {
-	const context = React$38.useContext(CarouselContext);
+	const context = React$39.useContext(CarouselContext);
 	if (!context) throw new Error("useCarousel must be used within a <Carousel />");
 	return context;
 }
-const Carousel = React$38.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children,...props }, ref) => {
+const Carousel = React$39.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children,...props }, ref) => {
 	const [carouselRef, api] = useEmblaCarousel({
 		...opts,
 		axis: orientation === "horizontal" ? "x" : "y"
 	}, plugins);
-	const [canScrollPrev, setCanScrollPrev] = React$38.useState(false);
-	const [canScrollNext, setCanScrollNext] = React$38.useState(false);
-	const onSelect = React$38.useCallback(() => {
+	const [canScrollPrev, setCanScrollPrev] = React$39.useState(false);
+	const [canScrollNext, setCanScrollNext] = React$39.useState(false);
+	const onSelect = React$39.useCallback(() => {
 		if (!api) return;
 		setCanScrollPrev(api.canScrollPrev());
 		setCanScrollNext(api.canScrollNext());
 	}, [api]);
-	const scrollPrev = React$38.useCallback(() => {
+	const scrollPrev = React$39.useCallback(() => {
 		api?.scrollPrev();
 	}, [api]);
-	const scrollNext = React$38.useCallback(() => {
+	const scrollNext = React$39.useCallback(() => {
 		api?.scrollNext();
 	}, [api]);
-	const handleKeyDown = React$38.useCallback((event) => {
+	const handleKeyDown = React$39.useCallback((event) => {
 		if (event.key === "ArrowLeft") {
 			event.preventDefault();
 			scrollPrev();
@@ -643,11 +644,11 @@ const Carousel = React$38.forwardRef(({ orientation = "horizontal", opts, setApi
 			scrollNext();
 		}
 	}, [scrollPrev, scrollNext]);
-	React$38.useEffect(() => {
+	React$39.useEffect(() => {
 		if (!api || !setApi) return;
 		setApi(api);
 	}, [api, setApi]);
-	React$38.useEffect(() => {
+	React$39.useEffect(() => {
 		if (!api) return;
 		onSelect();
 		api.on("reInit", onSelect);
@@ -688,7 +689,7 @@ const Carousel = React$38.forwardRef(({ orientation = "horizontal", opts, setApi
 	});
 });
 Carousel.displayName = "Carousel";
-const CarouselContent = React$38.forwardRef(({ className,...props }, ref) => {
+const CarouselContent = React$39.forwardRef(({ className,...props }, ref) => {
 	const { carouselRef, orientation } = useCarousel();
 	return /* @__PURE__ */ jsx("div", {
 		ref: carouselRef,
@@ -701,7 +702,7 @@ const CarouselContent = React$38.forwardRef(({ className,...props }, ref) => {
 	});
 });
 CarouselContent.displayName = "CarouselContent";
-const CarouselItem = React$38.forwardRef(({ className,...props }, ref) => {
+const CarouselItem = React$39.forwardRef(({ className,...props }, ref) => {
 	const { orientation } = useCarousel();
 	return /* @__PURE__ */ jsx("div", {
 		ref,
@@ -711,7 +712,7 @@ const CarouselItem = React$38.forwardRef(({ className,...props }, ref) => {
 	});
 });
 CarouselItem.displayName = "CarouselItem";
-const CarouselPrevious = React$38.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
+const CarouselPrevious = React$39.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
 	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 	return /* @__PURE__ */ jsxs(Button, {
 		ref,
@@ -728,7 +729,7 @@ const CarouselPrevious = React$38.forwardRef(({ className, variant = "outline",
 	});
 });
 CarouselPrevious.displayName = "CarouselPrevious";
-const CarouselNext = React$38.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
+const CarouselNext = React$39.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
 	const { orientation, scrollNext, canScrollNext } = useCarousel();
 	return /* @__PURE__ */ jsxs(Button, {
 		ref,
@@ -912,7 +913,7 @@ function DialogDescription({ className,...props }) {
 //#endregion
 //#region src/command-palette/command-palette.tsx
-const CommandPalette = React$37.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1, {
+const CommandPalette = React$38.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1, {
 	ref,
 	className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className),
 	...props
@@ -930,7 +931,7 @@ const CommandPaletteDialog = ({ children,...props }) => {
 		})
 	});
 };
-const CommandPaletteInput = React$37.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs("div", {
+const CommandPaletteInput = React$38.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs("div", {
 	className: "flex items-center border-b px-3",
 	"data-cmdk-input-wrapper": "",
 	children: [/* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command$1.Input, {
@@ -940,31 +941,31 @@ const CommandPaletteInput = React$37.forwardRef(({ className,...props }, ref) =>
 	})]
 }));
 CommandPaletteInput.displayName = Command$1.Input.displayName;
-const CommandPaletteList = React$37.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.List, {
+const CommandPaletteList = React$38.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.List, {
 	ref,
 	className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
 	...props
 }));
 CommandPaletteList.displayName = Command$1.List.displayName;
-const CommandPaletteEmpty = React$37.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, {
+const CommandPaletteEmpty = React$38.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, {
 	ref,
 	className: "py-6 text-center text-sm",
 	...props
 }));
 CommandPaletteEmpty.displayName = Command$1.Empty.displayName;
-const CommandPaletteGroup = React$37.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Group, {
+const CommandPaletteGroup = React$38.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Group, {
 	ref,
 	className: cn("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", className),
 	...props
 }));
 CommandPaletteGroup.displayName = Command$1.Group.displayName;
-const CommandPaletteSeparator = React$37.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Separator, {
+const CommandPaletteSeparator = React$38.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Separator, {
 	ref,
 	className: cn("-mx-1 h-px bg-border", className),
 	...props
 }));
 CommandPaletteSeparator.displayName = Command$1.Separator.displayName;
-const CommandPaletteItem = React$37.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Item, {
+const CommandPaletteItem = React$38.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Item, {
 	ref,
 	className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50", className),
 	...props
@@ -1040,8 +1041,8 @@ const frameworks = [
 	}
 ];
 function ComboboxDemo() {
-	const [open, setOpen] = React$36.useState(false);
-	const [value, setValue] = React$36.useState("");
+	const [open, setOpen] = React$37.useState(false);
+	const [value, setValue] = React$37.useState("");
 	return /* @__PURE__ */ jsxs(Popover, {
 		open,
 		onOpenChange: setOpen,
@@ -1281,32 +1282,32 @@ const ContextMenuGroup = ContextMenuPrimitive.Group;
 const ContextMenuPortal = ContextMenuPrimitive.Portal;
 const ContextMenuSub = ContextMenuPrimitive.Sub;
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-const ContextMenuSubTrigger = React$35.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.SubTrigger, {
+const ContextMenuSubTrigger = React$36.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.SubTrigger, {
 	ref,
 	className: cn("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", inset && "pl-8", className),
 	...props,
 	children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })]
 }));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-const ContextMenuSubContent = React$35.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.SubContent, {
+const ContextMenuSubContent = React$36.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.SubContent, {
 	ref,
 	className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
 	...props
 }));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-const ContextMenuContent = React$35.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Content, {
+const ContextMenuContent = React$36.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Content, {
 	ref,
 	className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
 	...props
 }) }));
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-const ContextMenuItem = React$35.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Item, {
+const ContextMenuItem = React$36.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Item, {
 	ref,
 	className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className),
 	...props
 }));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-const ContextMenuCheckboxItem = React$35.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.CheckboxItem, {
+const ContextMenuCheckboxItem = React$36.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.CheckboxItem, {
 	ref,
 	className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
 	checked,
@@ -1317,7 +1318,7 @@ const ContextMenuCheckboxItem = React$35.forwardRef(({ className, children, chec
 	}), children]
 }));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-const ContextMenuRadioItem = React$35.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.RadioItem, {
+const ContextMenuRadioItem = React$36.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.RadioItem, {
 	ref,
 	className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
 	...props,
@@ -1327,13 +1328,13 @@ const ContextMenuRadioItem = React$35.forwardRef(({ className, children,...props
 	}), children]
 }));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-const ContextMenuLabel = React$35.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Label, {
+const ContextMenuLabel = React$36.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Label, {
 	ref,
 	className: cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className),
 	...props
 }));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-const ContextMenuSeparator = React$35.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
+const ContextMenuSeparator = React$36.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
 	ref,
 	className: cn("-mx-1 my-1 h-px bg-border", className),
 	...props
@@ -1478,7 +1479,7 @@ function DropdownMenuSubContent({ className,...props }) {
 const TooltipProvider = TooltipPrimitive.Provider;
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React$34.forwardRef(({ className, sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
+const TooltipContent = React$35.forwardRef(({ className, sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
 	ref,
 	sideOffset,
 	className: cn("z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
@@ -1985,7 +1986,7 @@ function getColumnVariant(variant) {
 	}
 }
 function DataGridColumnHeader({ header, table, className, onPointerDown,...props }) {
-	const [open, setOpen] = React$33.useState(false);
+	const [open, setOpen] = React$34.useState(false);
 	const column = header.column;
 	const label = column.columnDef.meta?.label ? column.columnDef.meta.label : typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
 	const isAnyColumnResizing = table.getState().columnSizingInfo.isResizingColumn;
@@ -1994,7 +1995,7 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
 	const pinnedPosition = column.getIsPinned();
 	const isPinnedLeft = pinnedPosition === "left";
 	const isPinnedRight = pinnedPosition === "right";
-	const onSortingChange = React$33.useCallback((direction) => {
+	const onSortingChange = React$34.useCallback((direction) => {
 		table.setSorting((prev) => {
 			const existingSortIndex = prev.findIndex((sort) => sort.id === column.id);
 			const newSort = {
@@ -2008,19 +2009,19 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
 			} else return [...prev, newSort];
 		});
 	}, [column.id, table]);
-	const onSortRemove = React$33.useCallback(() => {
+	const onSortRemove = React$34.useCallback(() => {
 		table.setSorting((prev) => prev.filter((sort) => sort.id !== column.id));
 	}, [column.id, table]);
-	const onLeftPin = React$33.useCallback(() => {
+	const onLeftPin = React$34.useCallback(() => {
 		column.pin("left");
 	}, [column]);
-	const onRightPin = React$33.useCallback(() => {
+	const onRightPin = React$34.useCallback(() => {
 		column.pin("right");
 	}, [column]);
-	const onUnpin = React$33.useCallback(() => {
+	const onUnpin = React$34.useCallback(() => {
 		column.pin(false);
 	}, [column]);
-	const onTriggerPointerDown = React$33.useCallback((event) => {
+	const onTriggerPointerDown = React$34.useCallback((event) => {
 		onPointerDown?.(event);
 		if (event.defaultPrevented) return;
 		if (event.button !== 0) return;
@@ -2132,7 +2133,7 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
 		})
 	] });
 }
-const DataGridColumnResizer = React$33.memo(DataGridColumnResizerImpl, (prev, next) => {
+const DataGridColumnResizer = React$34.memo(DataGridColumnResizerImpl, (prev, next) => {
 	const prevColumn = prev.header.column;
 	const nextColumn = next.header.column;
 	if (prevColumn.getIsResizing() !== nextColumn.getIsResizing() || prevColumn.getSize() !== nextColumn.getSize()) return false;
@@ -2141,7 +2142,7 @@ const DataGridColumnResizer = React$33.memo(DataGridColumnResizerImpl, (prev, ne
 });
 function DataGridColumnResizerImpl({ header, table, label }) {
 	const defaultColumnDef = table._getDefaultColumnDef();
-	const onDoubleClick = React$33.useCallback(() => {
+	const onDoubleClick = React$34.useCallback(() => {
 		header.column.resetSize();
 	}, [header.column]);
 	return /* @__PURE__ */ jsx("div", {
@@ -2250,7 +2251,7 @@ function DataGridContextMenu({ table }) {
 		onRowsDelete
 	});
 }
-const ContextMenu$1 = React$32.memo(ContextMenuImpl, (prev, next) => {
+const ContextMenu$1 = React$33.memo(ContextMenuImpl, (prev, next) => {
 	if (prev.contextMenu.open !== next.contextMenu.open) return false;
 	if (!next.contextMenu.open) return true;
 	if (prev.contextMenu.x !== next.contextMenu.x) return false;
@@ -2261,7 +2262,7 @@ const ContextMenu$1 = React$32.memo(ContextMenuImpl, (prev, next) => {
 	return true;
 });
 function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenChange, selectionState, onDataUpdate, onRowsDelete }) {
-	const triggerStyle = React$32.useMemo(() => ({
+	const triggerStyle = React$33.useMemo(() => ({
 		position: "fixed",
 		left: `${contextMenu.x}px`,
 		top: `${contextMenu.y}px`,
@@ -2274,11 +2275,11 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		pointerEvents: "none",
 		opacity: 0
 	}), [contextMenu.x, contextMenu.y]);
-	const onCloseAutoFocus = React$32.useCallback((event) => {
+	const onCloseAutoFocus = React$33.useCallback((event) => {
 		event.preventDefault();
 		dataGridRef?.current?.focus();
 	}, [dataGridRef]);
-	const onCopy = React$32.useCallback(async () => {
+	const onCopy = React$33.useCallback(async () => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
 		const rows = table.getRowModel().rows;
 		const columnIds = [];
@@ -2317,7 +2318,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		await navigator.clipboard.writeText(tsvData);
 		toast$1.success(`${selectionState.selectedCells.size} cell${selectionState.selectedCells.size !== 1 ? "s" : ""} copied`);
 	}, [table, selectionState]);
-	const canClear = React$32.useMemo(() => {
+	const canClear = React$33.useMemo(() => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return false;
 		const visibleCols = table.getVisibleLeafColumns();
 		const rows = table.getRowModel().rows;
@@ -2334,7 +2335,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		}
 		return true;
 	}, [selectionState, table]);
-	const onClear = React$32.useCallback(() => {
+	const onClear = React$33.useCallback(() => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
 		if (!canClear) return;
 		const updates = [];
@@ -2353,7 +2354,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		selectionState,
 		canClear
 	]);
-	const onDelete = React$32.useCallback(async () => {
+	const onDelete = React$33.useCallback(async () => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
 		const rowIndices = new Set();
 		for (const cellKey of selectionState.selectedCells) {
@@ -2430,12 +2431,12 @@ function composeRefs(...refs) {
 * Accepts callback refs and RefObject(s)
 */
 function useComposedRefs(...refs) {
-	return React$31.useCallback(composeRefs(...refs), refs);
+	return React$32.useCallback(composeRefs(...refs), refs);
 }
 //#endregion
 //#region src/data-grid/data-grid-row.tsx
-const DataGridRow = React$30.memo(DataGridRowImpl, (prev, next) => {
+const DataGridRow = React$31.memo(DataGridRowImpl, (prev, next) => {
 	if (prev.row.id !== next.row.id) return false;
 	if (prev.row.original !== next.row.original) return false;
 	const prevRowIndex = prev.virtualRowIndex;
@@ -2454,9 +2455,10 @@ const DataGridRow = React$30.memo(DataGridRowImpl, (prev, next) => {
 	}
 	if (prev.selectionSize !== next.selectionSize) return false;
 	if (prev.visibleColumnIds !== next.visibleColumnIds) return false;
+	if (prev.isHighlighted !== next.isHighlighted) return false;
 	return true;
 });
-function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, rowMapRef, rowHeight, focusedCell, editingCell: _editingCell, selectionSize: _selectionSize, visibleColumnIds: _visibleColumnIds, ref, className,...props }) {
+function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, rowMapRef, rowHeight, focusedCell, editingCell: _editingCell, selectionSize: _selectionSize, visibleColumnIds: _visibleColumnIds, isHighlighted = false, onRowClick, ref, className,...props }) {
 	const rowRef = useComposedRefs(ref, (node) => {
 		if (node && typeof virtualRowIndex !== "undefined") {
 			rowVirtualizer.measureElement(node);
@@ -2464,19 +2466,26 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
 		}
 	});
 	const isRowSelected = row.getIsSelected();
+	const handleRowClick = React$31.useCallback((event) => {
+		const target = event.target;
+		if (target.closest("input, button, [role=\"checkbox\"]")) return;
+		if (event.detail === 1) onRowClick?.(virtualRowIndex);
+	}, [onRowClick, virtualRowIndex]);
 	return /* @__PURE__ */ jsx("div", {
 		role: "row",
 		"aria-rowindex": virtualRowIndex + 2,
 		"aria-selected": isRowSelected,
 		"data-index": virtualRowIndex,
 		"data-slot": "grid-row",
+		"data-highlighted": isHighlighted || void 0,
 		ref: rowRef,
 		tabIndex: -1,
-		className: cn("absolute flex w-full border-b h-[calc(var(--data-grid-line-height)*(var(--line-count))+12px)]", className),
+		className: cn("absolute flex w-full border-b h-[calc(var(--data-grid-line-height)*(var(--line-count))+12px)]", onRowClick && !isHighlighted && "cursor-pointer hover:bg-accent/30", isHighlighted && "cursor-pointer bg-primary/10 border-t border-primary/40", className),
 		style: {
 			"--line-count": `${getLineCount(rowHeight)}`,
 			transform: `translateY(${virtualStart}px)`
 		},
+		onClick: onRowClick ? handleRowClick : void 0,
 		...props,
 		children: row.getVisibleCells().map((cell, colIndex) => {
 			const isCellFocused = focusedCell?.rowIndex === virtualRowIndex && focusedCell?.columnId === cell.column.id;
@@ -2491,10 +2500,7 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
 					...getCommonPinningStyles({ column: cell.column }),
 					width: `calc(var(--col-${cell.column.id}-size) * 1px)`
 				},
-				children: typeof cell.column.columnDef.header === "function" ? /* @__PURE__ */ jsx("div", {
-					className: cn("size-full px-3 py-1.5", { "bg-accent-foreground/10": isRowSelected }),
-					children: flexRender(cell.column.columnDef.cell, cell.getContext())
-				}) : flexRender(cell.column.columnDef.cell, cell.getContext())
+				children: flexRender(cell.column.columnDef.cell, cell.getContext())
 			}, cell.id);
 		})
 	}, row.id);
@@ -2510,20 +2516,20 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
 * prop or avoid re-executing effects when passed as a dependency
 */
 function useCallbackRef(callback) {
-	const callbackRef = React$29.useRef(callback);
-	React$29.useEffect(() => {
+	const callbackRef = React$30.useRef(callback);
+	React$30.useEffect(() => {
 		callbackRef.current = callback;
 	});
-	return React$29.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+	return React$30.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 //#endregion
 //#region src/hooks/use-debounced-callback.ts
 function useDebouncedCallback(callback, delay) {
 	const handleCallback = useCallbackRef(callback);
-	const debounceTimerRef = React$28.useRef(0);
-	React$28.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
-	const setValue = React$28.useCallback((...args) => {
+	const debounceTimerRef = React$29.useRef(0);
+	React$29.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
+	const setValue = React$29.useCallback((...args) => {
 		window.clearTimeout(debounceTimerRef.current);
 		debounceTimerRef.current = window.setTimeout(() => handleCallback(...args), delay);
 	}, [handleCallback, delay]);
@@ -2532,10 +2538,14 @@ function useDebouncedCallback(callback, delay) {
 //#endregion
 //#region src/input/input.tsx
+/**
+* Input variants for styling the input element.
+* NOTE: When modifying variants, also update numberInputWrapperVariants in number-input.tsx
+*/
 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: "h-9 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-		simple: "h-8"
+		default: "min-h-9 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+		simple: "min-h-8"
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -2558,7 +2568,7 @@ function Input({ className, type, variant, __e2e_test_id__, onEnter,...props })
 //#endregion
 //#region src/data-grid/data-grid-search.tsx
-const DataGridSearch = React$27.memo(DataGridSearchImpl, (prev, next) => {
+const DataGridSearch = React$28.memo(DataGridSearchImpl, (prev, next) => {
 	if (prev.searchOpen !== next.searchOpen) return false;
 	if (!next.searchOpen) return true;
 	if (prev.searchQuery !== next.searchQuery || prev.matchIndex !== next.matchIndex) return false;
@@ -2572,13 +2582,13 @@ const DataGridSearch = React$27.memo(DataGridSearchImpl, (prev, next) => {
 	return true;
 });
 function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpenChange, searchQuery, onSearchQueryChange, onSearch, onNavigateToNextMatch, onNavigateToPrevMatch }) {
-	const inputRef = React$27.useRef(null);
-	React$27.useEffect(() => {
+	const inputRef = React$28.useRef(null);
+	React$28.useEffect(() => {
 		if (searchOpen) requestAnimationFrame(() => {
 			inputRef.current?.focus();
 		});
 	}, [searchOpen]);
-	React$27.useEffect(() => {
+	React$28.useEffect(() => {
 		if (!searchOpen) return;
 		function onEscape(event) {
 			if (event.key === "Escape") {
@@ -2589,7 +2599,7 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
 		document.addEventListener("keydown", onEscape);
 		return () => document.removeEventListener("keydown", onEscape);
 	}, [searchOpen, onSearchOpenChange]);
-	const onKeyDown = React$27.useCallback((event) => {
+	const onKeyDown = React$28.useCallback((event) => {
 		event.stopPropagation();
 		if (event.key === "Enter") {
 			event.preventDefault();
@@ -2600,20 +2610,20 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
 	const debouncedSearch = useDebouncedCallback((query) => {
 		onSearch(query);
 	}, 150);
-	const onChange = React$27.useCallback((event) => {
+	const onChange = React$28.useCallback((event) => {
 		const value = event.target.value;
 		onSearchQueryChange(value);
 		debouncedSearch(value);
 	}, [onSearchQueryChange, debouncedSearch]);
-	const onTriggerPointerDown = React$27.useCallback((event) => {
+	const onTriggerPointerDown = React$28.useCallback((event) => {
 		const target = event.target;
 		if (!(target instanceof HTMLElement)) return;
 		if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
 		if (event.button === 0 && event.ctrlKey === false && event.pointerType === "mouse" && !(event.target instanceof HTMLInputElement)) event.preventDefault();
 	}, []);
-	const onPrevMatchPointerDown = React$27.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
-	const onNextMatchPointerDown = React$27.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
-	const onClose = React$27.useCallback(() => {
+	const onPrevMatchPointerDown = React$28.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
+	const onNextMatchPointerDown = React$28.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
+	const onClose = React$28.useCallback(() => {
 		onSearchOpenChange(false);
 	}, [onSearchOpenChange]);
 	if (!searchOpen) return null;
@@ -2688,16 +2698,18 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
 	const focusedCell = meta?.focusedCell ?? null;
 	const editingCell = meta?.editingCell ?? null;
 	const selectionSize = meta?.selectionState?.selectedCells?.size ?? 0;
+	const highlightedRowIndex = meta?.highlightedRowIndex ?? -1;
+	const onRowClick = meta?.onRowClick;
 	const visibleColumnIds = table.getVisibleLeafColumns().map((c) => c.id).join(",");
-	const prevVisibleColumnIdsRef = React$26.useRef(visibleColumnIds);
+	const prevVisibleColumnIdsRef = React$27.useRef(visibleColumnIds);
 	if (prevVisibleColumnIdsRef.current !== visibleColumnIds) {
 		rowMapRef.current.clear();
 		prevVisibleColumnIdsRef.current = visibleColumnIds;
 	}
-	const onGridContextMenu = React$26.useCallback((event) => {
+	const onGridContextMenu = React$27.useCallback((event) => {
 		event.preventDefault();
 	}, []);
-	const onAddRowKeyDown = React$26.useCallback(async (event) => {
+	const onAddRowKeyDown = React$27.useCallback(async (event) => {
 		if (!onRowAdd) return;
 		if (event.key === "Enter" || event.key === "") {
 			event.preventDefault();
@@ -2799,7 +2811,9 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
 								focusedCell,
 								editingCell,
 								selectionSize,
-								visibleColumnIds
+								visibleColumnIds,
+								isHighlighted: highlightedRowIndex === virtualItem.index,
+								onRowClick
 							}, row.id);
 						})
 					}),
@@ -2847,37 +2861,33 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 	const rowOriginal = cell?.row?.original ?? {};
 	const colCellMeta = cell?.column?.columnDef?.meta;
 	const align = colCellMeta?.align ?? "left";
-	const editableResolver = React$25.useMemo(() => {
+	const editableResolver = React$26.useMemo(() => {
 		const v = colCellMeta?.editable;
 		if (v === void 0) return () => true;
 		return typeof v === "function" ? v : () => Boolean(v);
 	}, [colCellMeta?.editable]);
 	const isEditable = editableResolver(rowOriginal);
-	const classNameResolver = React$25.useMemo(() => {
+	const classNameResolver = React$26.useMemo(() => {
 		const v = colCellMeta?.className;
 		return typeof v === "function" ? v : () => v;
 	}, [colCellMeta?.className]);
 	const colCellClassName = classNameResolver(rowOriginal);
 	const isSearchMatch = meta?.getIsSearchMatch?.(rowIndex, columnId) ?? false;
 	const isActiveSearchMatch = meta?.getIsActiveSearchMatch?.(rowIndex, columnId) ?? false;
-	const onClick = React$25.useCallback((event) => {
+	const onClick = React$26.useCallback((event) => {
 		if (!isEditing) {
 			event.preventDefault();
 			onClickProp?.(event);
-			if (isFocused) {
-				if (isEditable) meta?.onCellEditingStart?.(rowIndex, columnId);
-			} else meta?.onCellClick?.(rowIndex, columnId, event);
+			meta?.onCellClick?.(rowIndex, columnId, event);
 		}
 	}, [
 		meta,
 		rowIndex,
 		columnId,
 		isEditing,
-		isFocused,
-		onClickProp,
-		isEditable
+		onClickProp
 	]);
-	const onContextMenu = React$25.useCallback((event) => {
+	const onContextMenu = React$26.useCallback((event) => {
 		if (!isEditing) meta?.onCellContextMenu?.(rowIndex, columnId, event);
 	}, [
 		meta,
@@ -2885,7 +2895,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		columnId,
 		isEditing
 	]);
-	const onMouseDown = React$25.useCallback((event) => {
+	const onMouseDown = React$26.useCallback((event) => {
 		if (!isEditing) meta?.onCellMouseDown?.(rowIndex, columnId, event);
 	}, [
 		meta,
@@ -2893,7 +2903,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		columnId,
 		isEditing
 	]);
-	const onMouseEnter = React$25.useCallback((event) => {
+	const onMouseEnter = React$26.useCallback((event) => {
 		if (!isEditing) meta?.onCellMouseEnter?.(rowIndex, columnId, event);
 	}, [
 		meta,
@@ -2901,10 +2911,10 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		columnId,
 		isEditing
 	]);
-	const onMouseUp = React$25.useCallback(() => {
+	const onMouseUp = React$26.useCallback(() => {
 		if (!isEditing) meta?.onCellMouseUp?.();
 	}, [meta, isEditing]);
-	const onDoubleClick = React$25.useCallback((event) => {
+	const onDoubleClick = React$26.useCallback((event) => {
 		if (!isEditing) {
 			event.preventDefault();
 			if (isEditable) meta?.onCellDoubleClick?.(rowIndex, columnId);
@@ -2916,12 +2926,12 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		isEditing,
 		isEditable
 	]);
-	const onKeyDown = React$25.useCallback((event) => {
+	const onKeyDown = React$26.useCallback((event) => {
 		onKeyDownProp?.(event);
 		if (event.defaultPrevented) return;
-		if (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End" || event.key === "PageUp" || event.key === "PageDown" || event.key === "Tab") return;
+		if (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End" || event.key === "PageUp" || event.key === "PageDown" || event.key === "Enter" || event.key === "Tab") return;
 		if (isFocused && !isEditing) {
-			if (event.key === "F2" || event.key === "Enter") {
+			if (event.key === "F2") {
 				event.preventDefault();
 				event.stopPropagation();
 				if (isEditable) meta?.onCellEditingStart?.(rowIndex, columnId);
@@ -2990,17 +3000,17 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 //#region src/data-grid/cell-variants/checkbox-cell.tsx
 function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }) {
 	const initialValue = cell.getValue();
-	const [value, setValue] = React$24.useState(Boolean(initialValue));
-	const containerRef = React$24.useRef(null);
+	const [value, setValue] = React$25.useState(Boolean(initialValue));
+	const containerRef = React$25.useRef(null);
 	const meta = table.options.meta;
 	const colMeta = cell.column.columnDef.meta;
-	const editableResolver = React$24.useMemo(() => {
+	const editableResolver = React$25.useMemo(() => {
 		const v = colMeta?.editable;
 		if (v === void 0) return () => true;
 		return typeof v === "function" ? v : () => Boolean(v);
 	}, [colMeta?.editable]);
 	const isEditable = editableResolver(cell.row.original);
-	const onCheckedChange = React$24.useCallback((checked) => {
+	const onCheckedChange = React$25.useCallback((checked) => {
 		setValue(checked);
 		meta?.onDataUpdate?.({
 			rowIndex,
@@ -3012,7 +3022,7 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
 		rowIndex,
 		columnId
 	]);
-	const onWrapperKeyDown = React$24.useCallback((event) => {
+	const onWrapperKeyDown = React$25.useCallback((event) => {
 		if (!isEditable) return;
 		if (isFocused && (event.key === "" || event.key === "Enter")) {
 			event.preventDefault();
@@ -3025,17 +3035,17 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
 		onCheckedChange,
 		isEditable
 	]);
-	React$24.useEffect(() => {
+	React$25.useEffect(() => {
 		setValue(Boolean(initialValue));
 	}, [initialValue]);
-	React$24.useEffect(() => {
+	React$25.useEffect(() => {
 		if (isFocused && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
 		isFocused,
 		meta?.searchOpen,
 		meta?.isScrolling
 	]);
-	const onWrapperClick = React$24.useCallback((event) => {
+	const onWrapperClick = React$25.useCallback((event) => {
 		if (!isEditable) return;
 		if (isFocused) {
 			event.preventDefault();
@@ -3048,13 +3058,13 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
 		onCheckedChange,
 		isEditable
 	]);
-	const onCheckboxClick = React$24.useCallback((event) => {
+	const onCheckboxClick = React$25.useCallback((event) => {
 		event.stopPropagation();
 	}, []);
-	const onCheckboxMouseDown = React$24.useCallback((event) => {
+	const onCheckboxMouseDown = React$25.useCallback((event) => {
 		event.stopPropagation();
 	}, []);
-	const onCheckboxDoubleClick = React$24.useCallback((event) => {
+	const onCheckboxDoubleClick = React$25.useCallback((event) => {
 		event.stopPropagation();
 	}, []);
 	return /* @__PURE__ */ jsx(DataGridCellWrapper, {
@@ -3109,20 +3119,20 @@ function formatDateToISOString(date) {
 }
 function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
 	const initialValue = cell.getValue();
-	const [value, setValue] = React$23.useState(parseToLocalDate(initialValue));
-	const [open, setOpen] = React$23.useState(false);
-	const containerRef = React$23.useRef(null);
-	const hasStoppedRef = React$23.useRef(false);
+	const [value, setValue] = React$24.useState(parseToLocalDate(initialValue));
+	const [open, setOpen] = React$24.useState(false);
+	const containerRef = React$24.useRef(null);
+	const hasStoppedRef = React$24.useRef(false);
 	const meta = table.options.meta;
-	const prevInitialValueRef = React$23.useRef(initialValue);
+	const prevInitialValueRef = React$24.useRef(initialValue);
 	if (initialValue !== prevInitialValueRef.current) {
 		prevInitialValueRef.current = initialValue;
 		setValue(parseToLocalDate(initialValue));
 	}
-	React$23.useEffect(() => {
+	React$24.useEffect(() => {
 		if (isEditing) hasStoppedRef.current = false;
 	}, [isEditing]);
-	const onDateSelect = React$23.useCallback((date) => {
+	const onDateSelect = React$24.useCallback((date) => {
 		if (!date) return;
 		setValue(date);
 		meta?.onDataUpdate?.({
@@ -3138,14 +3148,14 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
 		rowIndex,
 		columnId
 	]);
-	const onOpenChange = React$23.useCallback((isOpen) => {
+	const onOpenChange = React$24.useCallback((isOpen) => {
 		setOpen(isOpen);
 		if (!isOpen && isEditing && !hasStoppedRef.current) {
 			hasStoppedRef.current = true;
 			meta?.onCellEditingStop?.();
 		}
 	}, [isEditing, meta]);
-	const onWrapperKeyDown = React$23.useCallback((event) => {
+	const onWrapperKeyDown = React$24.useCallback((event) => {
 		if (isEditing) {
 			if (event.key === "Escape") {
 				event.preventDefault();
@@ -3165,10 +3175,10 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
 		initialValue,
 		meta
 	]);
-	React$23.useEffect(() => {
+	React$24.useEffect(() => {
 		setOpen(isEditing);
 	}, [isEditing]);
-	React$23.useEffect(() => {
+	React$24.useEffect(() => {
 		if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
 		isFocused,
@@ -3220,7 +3230,7 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
 //#region src/data-grid/cell-variants/gantt-cell.tsx
 function GanttCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
 	const initialValue = cell.getValue();
-	const containerRef = React$22.useRef(null);
+	const containerRef = React$23.useRef(null);
 	const cellOpts = cell.column.columnDef.meta?.cell;
 	const ts = cellOpts?.dateRangeFrom ?? cellOpts?.timelineStart;
 	const te = cellOpts?.dateRangeTo ?? cellOpts?.timelineEnd;
@@ -3279,19 +3289,19 @@ function Textarea({ className, variant, __e2e_test_id__,...props }) {
 //#region src/data-grid/cell-variants/long-text-cell.tsx
 function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
 	const initialValue = cell.getValue();
-	const [value, setValue] = React$21.useState(initialValue ?? "");
-	const [open, setOpen] = React$21.useState(false);
-	const textareaRef = React$21.useRef(null);
-	const containerRef = React$21.useRef(null);
-	const hasSubmittedRef = React$21.useRef(false);
+	const [value, setValue] = React$22.useState(initialValue ?? "");
+	const [open, setOpen] = React$22.useState(false);
+	const textareaRef = React$22.useRef(null);
+	const containerRef = React$22.useRef(null);
+	const hasSubmittedRef = React$22.useRef(false);
 	const meta = table.options.meta;
 	const sideOffset = -(containerRef.current?.clientHeight ?? 0);
-	const prevInitialValueRef = React$21.useRef(initialValue);
+	const prevInitialValueRef = React$22.useRef(initialValue);
 	if (initialValue !== prevInitialValueRef.current) {
 		prevInitialValueRef.current = initialValue;
 		setValue(initialValue ?? "");
 	}
-	React$21.useEffect(() => {
+	React$22.useEffect(() => {
 		if (isEditing) hasSubmittedRef.current = false;
 	}, [isEditing]);
 	const debouncedSave = useDebouncedCallback((newValue) => {
@@ -3301,7 +3311,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 			value: newValue
 		});
 	}, 300);
-	const onSave = React$21.useCallback(() => {
+	const onSave = React$22.useCallback(() => {
 		if (hasSubmittedRef.current) return;
 		hasSubmittedRef.current = true;
 		if (value !== initialValue) meta?.onDataUpdate?.({
@@ -3318,7 +3328,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 		rowIndex,
 		columnId
 	]);
-	const onCancel = React$21.useCallback(() => {
+	const onCancel = React$22.useCallback(() => {
 		if (hasSubmittedRef.current) return;
 		hasSubmittedRef.current = true;
 		setValue(initialValue ?? "");
@@ -3335,12 +3345,12 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 		rowIndex,
 		columnId
 	]);
-	const onChange = React$21.useCallback((event) => {
+	const onChange = React$22.useCallback((event) => {
 		const newValue = event.target.value;
 		setValue(newValue);
 		debouncedSave(newValue);
 	}, [debouncedSave]);
-	const onOpenChange = React$21.useCallback((isOpen) => {
+	const onOpenChange = React$22.useCallback((isOpen) => {
 		setOpen(isOpen);
 		if (!isOpen && !hasSubmittedRef.current) {
 			hasSubmittedRef.current = true;
@@ -3358,7 +3368,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 		rowIndex,
 		columnId
 	]);
-	const onOpenAutoFocus = React$21.useCallback((event) => {
+	const onOpenAutoFocus = React$22.useCallback((event) => {
 		event.preventDefault();
 		if (textareaRef.current) {
 			textareaRef.current.focus();
@@ -3366,7 +3376,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 			textareaRef.current.setSelectionRange(length, length);
 		}
 	}, []);
-	const onWrapperKeyDown = React$21.useCallback((event) => {
+	const onWrapperKeyDown = React$22.useCallback((event) => {
 		if (isEditing && !open) {
 			if (event.key === "Escape") {
 				event.preventDefault();
@@ -3392,7 +3402,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 		rowIndex,
 		columnId
 	]);
-	const onTextareaKeyDown = React$21.useCallback((event) => {
+	const onTextareaKeyDown = React$22.useCallback((event) => {
 		if (event.key === "Escape") {
 			event.preventDefault();
 			onCancel();
@@ -3402,7 +3412,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 		}
 		event.stopPropagation();
 	}, [onCancel, onSave]);
-	const onTextareaBlur = React$21.useCallback(() => {
+	const onTextareaBlur = React$22.useCallback(() => {
 		if (hasSubmittedRef.current) return;
 		hasSubmittedRef.current = true;
 		if (value !== initialValue) meta?.onDataUpdate?.({
@@ -3419,7 +3429,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 		rowIndex,
 		columnId
 	]);
-	React$21.useEffect(() => {
+	React$22.useEffect(() => {
 		if (isEditing && !open) setOpen(true);
 		if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
@@ -3472,26 +3482,26 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
 //#endregion
 //#region src/data-grid/cell-variants/multi-select-cell.tsx
 function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
-	const cellValue = React$20.useMemo(() => cell.getValue() ?? [], [cell]);
+	const cellValue = React$21.useMemo(() => cell.getValue() ?? [], [cell]);
 	const cellId = `${rowIndex}-${columnId}`;
-	const prevCellIdRef = React$20.useRef(cellId);
-	const [selectedValues, setSelectedValues] = React$20.useState(cellValue);
-	const [open, setOpen] = React$20.useState(false);
-	const [searchValue, setSearchValue] = React$20.useState("");
-	const containerRef = React$20.useRef(null);
-	const inputRef = React$20.useRef(null);
+	const prevCellIdRef = React$21.useRef(cellId);
+	const [selectedValues, setSelectedValues] = React$21.useState(cellValue);
+	const [open, setOpen] = React$21.useState(false);
+	const [searchValue, setSearchValue] = React$21.useState("");
+	const containerRef = React$21.useRef(null);
+	const inputRef = React$21.useRef(null);
 	const meta = table.options.meta;
 	const cellOpts = cell.column.columnDef.meta?.cell;
 	const sideOffset = -(containerRef.current?.clientHeight ?? 0);
 	const arrayOptions = cellOpts?.variant === "multi-select" ? cellOpts.options : void 0;
 	const optionsMap = cellOpts?.variant === "multi-select" ? cellOpts.optionsMap : void 0;
-	const arrayOptionsLabelMap = React$20.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
-	const getLabel = React$20.useCallback((val) => {
+	const arrayOptionsLabelMap = React$21.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
+	const getLabel = React$21.useCallback((val) => {
 		if (optionsMap) return optionsMap.get(val) ?? val;
 		if (arrayOptionsLabelMap) return arrayOptionsLabelMap.get(val) ?? val;
 		return val;
 	}, [optionsMap, arrayOptionsLabelMap]);
-	const options = React$20.useMemo(() => {
+	const options = React$21.useMemo(() => {
 		if (!isEditing) return [];
 		if (arrayOptions) return arrayOptions;
 		if (optionsMap) return Array.from(optionsMap.entries()).map(([id, label]) => ({
@@ -3510,7 +3520,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		setOpen(false);
 		setSearchValue("");
 	}
-	const onValueChange = React$20.useCallback((value) => {
+	const onValueChange = React$21.useCallback((value) => {
 		const newValues = selectedValues.includes(value) ? selectedValues.filter((v) => v !== value) : [...selectedValues, value];
 		setSelectedValues(newValues);
 		meta?.onDataUpdate?.({
@@ -3526,7 +3536,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		rowIndex,
 		columnId
 	]);
-	const removeValue = React$20.useCallback((valueToRemove, event) => {
+	const removeValue = React$21.useCallback((valueToRemove, event) => {
 		event?.stopPropagation();
 		event?.preventDefault();
 		const newValues = selectedValues.filter((v) => v !== valueToRemove);
@@ -3543,7 +3553,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		rowIndex,
 		columnId
 	]);
-	const clearAll = React$20.useCallback(() => {
+	const clearAll = React$21.useCallback(() => {
 		setSelectedValues([]);
 		meta?.onDataUpdate?.({
 			rowIndex,
@@ -3556,18 +3566,18 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		rowIndex,
 		columnId
 	]);
-	const onOpenChange = React$20.useCallback((isOpen) => {
+	const onOpenChange = React$21.useCallback((isOpen) => {
 		setOpen(isOpen);
 		if (!isOpen) {
 			setSearchValue("");
 			meta?.onCellEditingStop?.();
 		}
 	}, [meta]);
-	const onOpenAutoFocus = React$20.useCallback((event) => {
+	const onOpenAutoFocus = React$21.useCallback((event) => {
 		event.preventDefault();
 		inputRef.current?.focus();
 	}, []);
-	const onWrapperKeyDown = React$20.useCallback((event) => {
+	const onWrapperKeyDown = React$21.useCallback((event) => {
 		if (isEditing) {
 			if (event.key === "Escape") {
 				event.preventDefault();
@@ -3587,7 +3597,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		cellValue,
 		meta
 	]);
-	const onInputKeyDown = React$20.useCallback((event) => {
+	const onInputKeyDown = React$21.useCallback((event) => {
 		if (event.key === "Backspace" && searchValue === "" && selectedValues.length > 0) {
 			event.preventDefault();
 			const lastValue = selectedValues.at(-1);
@@ -3599,7 +3609,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		selectedValues,
 		removeValue
 	]);
-	React$20.useEffect(() => {
+	React$21.useEffect(() => {
 		if (isEditing && !open) setOpen(true);
 		if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
@@ -3609,7 +3619,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 		meta?.searchOpen,
 		meta?.isScrolling
 	]);
-	React$20.useEffect(() => {
+	React$21.useEffect(() => {
 		if (open && inputRef.current) setTimeout(() => inputRef.current?.focus(), 0);
 	}, [open]);
 	const displayLabels = selectedValues.map(getLabel).filter(Boolean);
@@ -3710,19 +3720,19 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 //#region src/data-grid/cell-variants/number-cell.tsx
 function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
 	const initialValue = cell.getValue();
-	const inputRef = React$19.useRef(null);
-	const containerRef = React$19.useRef(null);
+	const inputRef = React$20.useRef(null);
+	const containerRef = React$20.useRef(null);
 	const meta = table.options.meta;
 	const colMeta = cell.column.columnDef.meta;
 	const cellOptions = colMeta?.cell;
-	const editableResolver = React$19.useMemo(() => {
+	const editableResolver = React$20.useMemo(() => {
 		const v = colMeta?.editable;
 		if (v === void 0) return () => true;
 		return typeof v === "function" ? v : () => Boolean(v);
 	}, [colMeta?.editable]);
 	const isEditable = editableResolver(cell.row.original);
 	const { min, max, step, prefix, suffix, fallbackValue = "" } = cellOptions?.variant === "number" ? cellOptions : {};
-	const resolvedPrefix = React$19.useMemo(() => {
+	const resolvedPrefix = React$20.useMemo(() => {
 		if (typeof prefix === "function") return prefix(cell.row.original, initialValue);
 		return prefix ?? null;
 	}, [
@@ -3730,7 +3740,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		cell.row.original,
 		initialValue
 	]);
-	const resolvedSuffix = React$19.useMemo(() => {
+	const resolvedSuffix = React$20.useMemo(() => {
 		if (typeof suffix === "function") return suffix(cell.row.original, initialValue);
 		return suffix ?? null;
 	}, [
@@ -3738,12 +3748,12 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		cell.row.original,
 		initialValue
 	]);
-	const [editValue, setEditValue] = React$19.useState(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
-	const hasSubmittedRef = React$19.useRef(false);
-	React$19.useEffect(() => {
+	const [editValue, setEditValue] = React$20.useState(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
+	const hasSubmittedRef = React$20.useRef(false);
+	React$20.useEffect(() => {
 		if (isEditing) hasSubmittedRef.current = false;
 	}, [isEditing]);
-	const onBlur = React$19.useCallback(() => {
+	const onBlur = React$20.useCallback(() => {
 		if (hasSubmittedRef.current) return;
 		const numValue = editValue === "" ? null : Number(editValue);
 		if (numValue !== initialValue) meta?.onDataUpdate?.({
@@ -3759,13 +3769,13 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		initialValue,
 		editValue
 	]);
-	const onChange = React$19.useCallback((event) => {
+	const onChange = React$20.useCallback((event) => {
 		setEditValue(event.target.value);
 	}, []);
-	const parseNumValue = React$19.useCallback(() => {
+	const parseNumValue = React$20.useCallback(() => {
 		return editValue === "" ? null : Number(editValue);
 	}, [editValue]);
-	const saveAndStop = React$19.useCallback((options) => {
+	const saveAndStop = React$20.useCallback((options) => {
 		hasSubmittedRef.current = true;
 		const numValue = parseNumValue();
 		meta?.onDataUpdate?.({
@@ -3780,7 +3790,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		rowIndex,
 		columnId
 	]);
-	const handleEditingKeyDown = React$19.useCallback((event) => {
+	const handleEditingKeyDown = React$20.useCallback((event) => {
 		if (event.key === "Enter") {
 			event.preventDefault();
 			saveAndStop({ moveToNextRow: true });
@@ -3799,12 +3809,12 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		initialValue,
 		meta
 	]);
-	const handleFocusedKeyDown = React$19.useCallback((event) => {
+	const handleFocusedKeyDown = React$20.useCallback((event) => {
 		if (!isEditable) return;
 		if (event.key === "Backspace") setEditValue("");
 		else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) setEditValue(event.key);
 	}, [isEditable]);
-	const onWrapperKeyDown = React$19.useCallback((event) => {
+	const onWrapperKeyDown = React$20.useCallback((event) => {
 		if (isEditing) handleEditingKeyDown(event);
 		else if (isFocused) handleFocusedKeyDown(event);
 	}, [
@@ -3813,10 +3823,10 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		handleEditingKeyDown,
 		handleFocusedKeyDown
 	]);
-	React$19.useEffect(() => {
+	React$20.useEffect(() => {
 		setEditValue(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
 	}, [initialValue]);
-	React$19.useEffect(() => {
+	React$20.useEffect(() => {
 		if (isEditing && inputRef.current) {
 			inputRef.current.focus();
 			inputRef.current.select();
@@ -3862,16 +3872,26 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 //#endregion
 //#region src/data-grid/cell-variants/react-node-cell.tsx
-function ReactNodeCell({ cell, table, rowIndex, columnId, isFocused, isSelected }) {
-	const children = cell.getValue();
-	const containerRef = React$18.useRef(null);
+function ReactNodeCell({ cell, table, rowIndex, columnId, isFocused, isSelected, isEditing }) {
+	const containerRef = React$19.useRef(null);
+	const cellOpts = cell.column.columnDef.meta?.cell;
+	const renderFn = cellOpts?.variant === "react-node" ? cellOpts.render : void 0;
+	const children = renderFn ? renderFn({
+		cell,
+		table,
+		rowIndex,
+		columnId,
+		isFocused,
+		isSelected,
+		isEditing
+	}) : cell.getValue();
 	return /* @__PURE__ */ jsx(DataGridCellWrapper, {
 		ref: containerRef,
 		cell,
 		table,
 		rowIndex,
 		columnId,
-		isEditing: false,
+		isEditing,
 		isFocused,
 		isSelected,
 		className: "flex size-full justify-center p-0",
@@ -3883,18 +3903,18 @@ function ReactNodeCell({ cell, table, rowIndex, columnId, isFocused, isSelected
 //#region src/data-grid/cell-variants/select-cell.tsx
 function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
 	const initialValue = cell.getValue();
-	const [value, setValue] = React$17.useState(initialValue);
-	const [open, setOpen] = React$17.useState(false);
-	const containerRef = React$17.useRef(null);
-	const inputRef = React$17.useRef(null);
+	const [value, setValue] = React$18.useState(initialValue);
+	const [open, setOpen] = React$18.useState(false);
+	const containerRef = React$18.useRef(null);
+	const inputRef = React$18.useRef(null);
 	const meta = table.options.meta;
 	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 arrayOptionsLabelMap = React$17.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
-	const displayLabel = React$17.useMemo(() => {
+	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;
@@ -3904,7 +3924,7 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		optionsMap,
 		arrayOptionsLabelMap
 	]);
-	const options = React$17.useMemo(() => {
+	const options = React$18.useMemo(() => {
 		if (!isEditing) return [];
 		if (arrayOptions) return arrayOptions;
 		if (optionsMap) return Array.from(optionsMap.entries()).map(([id, label]) => ({
@@ -3917,7 +3937,7 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		arrayOptions,
 		optionsMap
 	]);
-	const onValueChange = React$17.useCallback((newValue) => {
+	const onValueChange = React$18.useCallback((newValue) => {
 		setValue(newValue);
 		meta?.onDataUpdate?.({
 			rowIndex,
@@ -3930,15 +3950,15 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		rowIndex,
 		columnId
 	]);
-	const onOpenChange = React$17.useCallback((isOpen) => {
+	const onOpenChange = React$18.useCallback((isOpen) => {
 		setOpen(isOpen);
 		if (!isOpen) meta?.onCellEditingStop?.();
 	}, [meta]);
-	const onOpenAutoFocus = React$17.useCallback((event) => {
+	const onOpenAutoFocus = React$18.useCallback((event) => {
 		event.preventDefault();
 		inputRef.current?.focus();
 	}, []);
-	const onWrapperKeyDown = React$17.useCallback((event) => {
+	const onWrapperKeyDown = React$18.useCallback((event) => {
 		if (isEditing) {
 			if (event.key === "Escape") {
 				event.preventDefault();
@@ -3956,10 +3976,10 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		initialValue,
 		meta
 	]);
-	React$17.useEffect(() => {
+	React$18.useEffect(() => {
 		setValue(initialValue);
 	}, [initialValue]);
-	React$17.useEffect(() => {
+	React$18.useEffect(() => {
 		if (isEditing && !open) setOpen(true);
 		if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
@@ -4043,22 +4063,22 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 //#region src/data-grid/cell-variants/short-text-cell.tsx
 function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused, isSelected }) {
 	const initialValue = cell.getValue();
-	const [value, setValue] = React$16.useState(initialValue);
-	const inputRef = React$16.useRef(null);
-	const containerRef = React$16.useRef(null);
-	const hasSubmittedRef = React$16.useRef(false);
+	const [value, setValue] = React$17.useState(initialValue);
+	const inputRef = React$17.useRef(null);
+	const containerRef = React$17.useRef(null);
+	const hasSubmittedRef = React$17.useRef(false);
 	const meta = table.options.meta;
 	const colMeta = cell.column.columnDef.meta;
-	const editableResolver = React$16.useMemo(() => {
+	const editableResolver = React$17.useMemo(() => {
 		const v = colMeta?.editable;
 		if (v === void 0) return () => true;
 		return typeof v === "function" ? v : () => Boolean(v);
 	}, [colMeta?.editable]);
 	const isEditable = editableResolver(cell.row.original);
-	React$16.useEffect(() => {
+	React$17.useEffect(() => {
 		if (isEditing) hasSubmittedRef.current = false;
 	}, [isEditing]);
-	const onBlur = React$16.useCallback(() => {
+	const onBlur = React$17.useCallback(() => {
 		if (hasSubmittedRef.current) return;
 		const currentValue = inputRef.current?.value ?? "";
 		const normalizedInitial = initialValue ?? "";
@@ -4074,10 +4094,10 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
 		columnId,
 		initialValue
 	]);
-	const onChange = React$16.useCallback((event) => {
+	const onChange = React$17.useCallback((event) => {
 		setValue(event.target.value);
 	}, []);
-	const handleEditingKeyDown = React$16.useCallback((event) => {
+	const handleEditingKeyDown = React$17.useCallback((event) => {
 		if (event.key === "Enter") {
 			event.preventDefault();
 			hasSubmittedRef.current = true;
@@ -4111,13 +4131,13 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
 		rowIndex,
 		columnId
 	]);
-	const handleFocusedKeyDown = React$16.useCallback((event) => {
+	const handleFocusedKeyDown = React$17.useCallback((event) => {
 		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
 			if (!isEditable) return;
 			setValue(event.key);
 		}
 	}, [isEditable]);
-	const onWrapperKeyDown = React$16.useCallback((event) => {
+	const onWrapperKeyDown = React$17.useCallback((event) => {
 		if (isEditing) handleEditingKeyDown(event);
 		else if (isFocused) handleFocusedKeyDown(event);
 	}, [
@@ -4126,10 +4146,10 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
 		handleEditingKeyDown,
 		handleFocusedKeyDown
 	]);
-	React$16.useEffect(() => {
+	React$17.useEffect(() => {
 		setValue(initialValue);
 	}, [initialValue]);
-	React$16.useEffect(() => {
+	React$17.useEffect(() => {
 		if (isEditing && inputRef.current) {
 			inputRef.current.focus();
 			inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
@@ -4277,16 +4297,16 @@ function DataGridCell({ cell, table }) {
 //#endregion
 //#region src/data-grid/data-grid-view-menu.tsx
 function DataGridViewMenu({ table,...props }) {
-	const viewableColumns = React$15.useMemo(() => table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined"), [table]);
-	const [order, setOrder] = React$15.useState(() => {
+	const viewableColumns = React$16.useMemo(() => table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined"), [table]);
+	const [order, setOrder] = React$16.useState(() => {
 		const stateOrder = table.getState().columnOrder ?? [];
 		if (stateOrder && stateOrder.length > 0) return stateOrder;
 		return table.getAllColumns().map((c) => c.id);
 	});
-	const [searchQuery, setSearchQuery] = React$15.useState("");
-	const [isDragging, setIsDragging] = React$15.useState(false);
-	const [insertionIndex, setInsertionIndex] = React$15.useState(null);
-	React$15.useEffect(() => {
+	const [searchQuery, setSearchQuery] = React$16.useState("");
+	const [isDragging, setIsDragging] = React$16.useState(false);
+	const [insertionIndex, setInsertionIndex] = React$16.useState(null);
+	React$16.useEffect(() => {
 		const stateOrder = table.getState().columnOrder ?? [];
 		if (stateOrder && stateOrder.length > 0) {
 			setOrder(stateOrder);
@@ -4294,8 +4314,8 @@ function DataGridViewMenu({ table,...props }) {
 		}
 		setOrder(table.getAllColumns().map((c) => c.id));
 	}, [table]);
-	const visibleSet = React$15.useMemo(() => new Set(viewableColumns.map((c) => c.id)), [viewableColumns]);
-	const orderedColumns = React$15.useMemo(() => {
+	const visibleSet = React$16.useMemo(() => new Set(viewableColumns.map((c) => c.id)), [viewableColumns]);
+	const orderedColumns = React$16.useMemo(() => {
 		const ordered = [];
 		for (const id of order) {
 			const col = viewableColumns.find((c) => c.id === id);
@@ -4308,12 +4328,12 @@ function DataGridViewMenu({ table,...props }) {
 		viewableColumns,
 		table
 	]);
-	const draggingRef = React$15.useRef(null);
-	const groupRef = React$15.useRef(null);
-	const getBaseOrder = React$15.useCallback(() => {
+	const draggingRef = React$16.useRef(null);
+	const groupRef = React$16.useRef(null);
+	const getBaseOrder = React$16.useCallback(() => {
 		return table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
 	}, [table]);
-	const computeInsertionIndex = React$15.useCallback((clientY) => {
+	const computeInsertionIndex = React$16.useCallback((clientY) => {
 		const baseOrder = getBaseOrder();
 		const el = groupRef.current;
 		if (!el) return baseOrder.length;
@@ -4335,7 +4355,7 @@ function DataGridViewMenu({ table,...props }) {
 		setIsDragging(false);
 		setInsertionIndex(null);
 	}
-	const doDrop = React$15.useCallback((dragId, toIndex) => {
+	const doDrop = React$16.useCallback((dragId, toIndex) => {
 		const baseOrder = table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
 		const fromIndex = baseOrder.indexOf(dragId);
 		if (fromIndex === -1) {
@@ -4352,7 +4372,7 @@ function DataGridViewMenu({ table,...props }) {
 		setOrder(copy.filter((id) => visibleSet.has(id)));
 		onDragEnd();
 	}, [table, visibleSet]);
-	const startPointerDrag = React$15.useCallback((e, id) => {
+	const startPointerDrag = React$16.useCallback((e, id) => {
 		e.preventDefault();
 		draggingRef.current = id;
 		setIsDragging(true);
@@ -4385,7 +4405,7 @@ function DataGridViewMenu({ table,...props }) {
 		if (fromIndex < targetIndex) insertAt = targetIndex - 1;
 		return insertAt === fromIndex;
 	}
-	const dragFromHandle = React$15.useRef(false);
+	const dragFromHandle = React$16.useRef(false);
 	function resetTableView() {
 		const defaultOrder = table.getAllColumns().map((c) => c.id);
 		try {
@@ -4432,7 +4452,7 @@ function DataGridViewMenu({ table,...props }) {
 					const currentBase = table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
 					const pos = currentBase.indexOf(column.id);
 					const isHideable = column.getCanHide();
-					return /* @__PURE__ */ jsxs(React$15.Fragment, { children: [/* @__PURE__ */ jsxs(CommandItem, {
+					return /* @__PURE__ */ jsxs(React$16.Fragment, { children: [/* @__PURE__ */ jsxs(CommandItem, {
 						value: column.id,
 						"data-col-id": column.id,
 						className: cn("flex items-center gap-2 px-2 py-1 rounded", !isDragging ? "data-[selected=true]:bg-accent" : "data-[selected=true]:bg-transparent cursor-grabbing", draggingRef.current === column.id && isDragging && "bg-accent data-[selected=true]:bg-accent"),
@@ -4492,30 +4512,30 @@ const MIN_COLUMN_SIZE = 60;
 const MAX_COLUMN_SIZE = 800;
 const SEARCH_SHORTCUT_KEY = "f";
 const NON_NAVIGABLE_COLUMN_IDS = ["select", "actions"];
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React$14.useLayoutEffect : React$14.useEffect;
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React$15.useLayoutEffect : React$15.useEffect;
 function useLazyRef(fn) {
-	const ref = React$14.useRef(null);
+	const ref = React$15.useRef(null);
 	if (ref.current === null) ref.current = fn();
 	return ref;
 }
 function useAsRef(data) {
-	const ref = React$14.useRef(data);
+	const ref = React$15.useRef(data);
 	useIsomorphicLayoutEffect(() => {
 		ref.current = data;
 	});
 	return ref;
 }
 function useStore(store, selector) {
-	const getSnapshot = React$14.useCallback(() => selector(store.getState()), [store, selector]);
-	return React$14.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
-}
-function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRowsDelete: onRowsDeleteProp, onCellFocus: onCellFocusProp, rowHeight: rowHeightProp = DEFAULT_ROW_HEIGHT, overscan = OVERSCAN, initialState, autoFocus = false, enableColumnSelection = false, enableSearch = false, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, onLoadMore, loadMoreThreshold = 25, totalRowCount,...dataGridProps }) {
-	const dataGridRef = React$14.useRef(null);
-	const tableRef = React$14.useRef(null);
-	const rowVirtualizerRef = React$14.useRef(null);
-	const headerRef = React$14.useRef(null);
-	const rowMapRef = React$14.useRef(new Map());
-	const footerRef = React$14.useRef(null);
+	const getSnapshot = React$15.useCallback(() => selector(store.getState()), [store, selector]);
+	return React$15.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRowsDelete: onRowsDeleteProp, onCellFocus: onCellFocusProp, onRowClick: onRowClickProp, highlightedRowIndex, rowHeight: rowHeightProp = DEFAULT_ROW_HEIGHT, overscan = OVERSCAN, initialState, autoFocus = false, enableColumnSelection = false, enableSearch = false, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, onLoadMore, loadMoreThreshold = 25, totalRowCount,...dataGridProps }) {
+	const dataGridRef = React$15.useRef(null);
+	const tableRef = React$15.useRef(null);
+	const rowVirtualizerRef = React$15.useRef(null);
+	const headerRef = React$15.useRef(null);
+	const rowMapRef = React$15.useRef(new Map());
+	const footerRef = React$15.useRef(null);
 	const dataGridPropsRef = useAsRef(dataGridProps);
 	const listenersRef = useLazyRef(() => new Set());
 	const stateRef = useLazyRef(() => {
@@ -4543,7 +4563,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			isScrolling: false
 		};
 	});
-	const store = React$14.useMemo(() => {
+	const store = React$15.useMemo(() => {
 		let isBatching = false;
 		let pendingNotification = false;
 		return {
@@ -4587,7 +4607,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			}
 		};
 	}, [listenersRef, stateRef]);
-	React$14.useEffect(() => {
+	React$15.useEffect(() => {
 		store.setState("rowHeight", rowHeightProp);
 	}, [rowHeightProp, store]);
 	const focusedCell = useStore(store, (state) => state.focusedCell);
@@ -4603,20 +4623,20 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 	const rowHeight = useStore(store, (state) => state.rowHeight);
 	const isScrolling = useStore(store, (state) => state.isScrolling);
 	const rowHeightValue = getRowHeightValue(rowHeight);
-	const columnIds = React$14.useMemo(() => {
+	const columnIds = React$15.useMemo(() => {
 		return columns.map((c) => {
 			if (c.id) return c.id;
 			if ("accessorKey" in c) return c.accessorKey;
 			return void 0;
 		}).filter((id) => Boolean(id));
 	}, [columns]);
-	const storageKey = React$14.useMemo(() => {
+	const storageKey = React$15.useMemo(() => {
 		if (typeof window === "undefined") return void 0;
 		const path = globalThis.location?.pathname ?? "unknown";
 		const cols = columnIds.join("|");
 		return `pxl.dataGrid:${path}:${cols}`;
 	}, [columnIds]);
-	const persistedState = React$14.useMemo(() => {
+	const persistedState = React$15.useMemo(() => {
 		if (!storageKey) return void 0;
 		try {
 			const raw = localStorage.getItem(storageKey);
@@ -4627,7 +4647,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			return void 0;
 		}
 	}, [storageKey]);
-	const mergedInitialState = React$14.useMemo(() => {
+	const mergedInitialState = React$15.useMemo(() => {
 		const base = { ...initialState ?? {} };
 		if (persistedState) try {
 			if (persistedState.columnOrder) base.columnOrder = persistedState.columnOrder;
@@ -4636,12 +4656,12 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		} catch (_) {}
 		return base;
 	}, [initialState, persistedState]);
-	const getNavigableColumnIds = React$14.useCallback(() => {
+	const getNavigableColumnIds = React$15.useCallback(() => {
 		const t = tableRef.current;
 		if (t) return t.getVisibleLeafColumns().map((c) => c.id).filter((c) => !NON_NAVIGABLE_COLUMN_IDS.includes(c));
 		return columnIds.filter((c) => !NON_NAVIGABLE_COLUMN_IDS.includes(c));
 	}, [columnIds]);
-	const onDataUpdate = React$14.useCallback((updates) => {
+	const onDataUpdate = React$15.useCallback((updates) => {
 		const updateArray = Array.isArray(updates) ? updates : [updates];
 		if (updateArray.length === 0) return;
 		const currentTable = tableRef.current;
@@ -4680,10 +4700,10 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		});
 		onDataChange?.(newData);
 	}, [data, onDataChange]);
-	const getIsCellSelected = React$14.useCallback((rowIndex, columnId) => {
+	const getIsCellSelected = React$15.useCallback((rowIndex, columnId) => {
 		return selectionState.selectedCells.has(getCellKey(rowIndex, columnId));
 	}, [selectionState.selectedCells]);
-	const clearSelection = React$14.useCallback(() => {
+	const clearSelection = React$15.useCallback(() => {
 		store.batch(() => {
 			store.setState("selectionState", {
 				selectedCells: new Set(),
@@ -4693,7 +4713,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			store.setState("rowSelection", {});
 		});
 	}, [store]);
-	const selectAll = React$14.useCallback(() => {
+	const selectAll = React$15.useCallback(() => {
 		const allCells = new Set();
 		const currentTable = tableRef.current;
 		const rows = currentTable?.getRowModel().rows ?? [];
@@ -4720,7 +4740,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		data.length,
 		store
 	]);
-	const selectColumn = React$14.useCallback((columnId) => {
+	const selectColumn = React$15.useCallback((columnId) => {
 		const currentTable = tableRef.current;
 		const rows = currentTable?.getRowModel().rows ?? [];
 		const rowCount = rows.length ?? data.length;
@@ -4742,7 +4762,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			isSelecting: false
 		});
 	}, [data.length, store]);
-	const selectRange = React$14.useCallback((start, end, isSelecting = false) => {
+	const selectRange = React$15.useCallback((start, end, isSelecting = false) => {
 		const visibleCols = getNavigableColumnIds();
 		const startColIndex = visibleCols.indexOf(start.columnId);
 		const endColIndex = visibleCols.indexOf(end.columnId);
@@ -4764,7 +4784,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			isSelecting
 		});
 	}, [getNavigableColumnIds, store]);
-	const focusCell = React$14.useCallback((rowIndex, columnId) => {
+	const focusCell = React$15.useCallback((rowIndex, columnId) => {
 		store.batch(() => {
 			store.setState("focusedCell", {
 				rowIndex,
@@ -4780,7 +4800,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		if (currentState.searchOpen) return;
 		if (dataGridRef.current && document.activeElement !== dataGridRef.current) dataGridRef.current.focus();
 	}, [store, onCellFocusProp]);
-	const onRowsDelete = React$14.useCallback(async (rowIndices) => {
+	const onRowsDelete = React$15.useCallback(async (rowIndices) => {
 		if (!onRowsDeleteProp || rowIndices.length === 0) return;
 		const currentTable = tableRef.current;
 		const rows = currentTable?.getRowModel().rows;
@@ -4819,7 +4839,20 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		getNavigableColumnIds,
 		focusCell
 	]);
-	const navigateCell = React$14.useCallback((direction) => {
+	/**
+	* Debounced row click handler - KEYBOARD NAVIGATION ONLY
+	*
+	* This debounced version (300ms delay) is used exclusively for keyboard navigation
+	* (arrow keys, Page Up/Down, etc.) to prevent browser history pollution from rapid
+	* key presses when using keyField-based URL routing.
+	*
+	* Mouse clicks use the immediate `onRowClickProp` handler directly (passed via table.meta.onRowClick)
+	* since clicks are deliberate user actions that don't require debouncing.
+	*/
+	const debouncedRowClick = useDebouncedCallback((rowIndex) => {
+		onRowClickProp?.(rowIndex);
+	}, 300);
+	const navigateCell = React$15.useCallback((direction) => {
 		const currentState = store.getState();
 		if (!currentState.focusedCell) return;
 		const { rowIndex, columnId } = currentState.focusedCell;
@@ -4889,6 +4922,8 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		}
 		if (newRowIndex !== rowIndex || newColumnId !== columnId) {
 			const rowDiff = newRowIndex - rowIndex;
+			const rowChanged = newRowIndex !== rowIndex;
+			if (rowChanged && onRowClickProp) debouncedRowClick(newRowIndex);
 			if (Math.abs(rowDiff) === 1 && (direction === "up" || direction === "down")) {
 				const container = dataGridRef.current;
 				const currentRow = rowMapRef.current.get(rowIndex);
@@ -4943,9 +4978,11 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		getNavigableColumnIds,
 		focusCell,
 		data.length,
-		rowHeightValue
+		rowHeightValue,
+		onRowClickProp,
+		debouncedRowClick
 	]);
-	const onCellEditingStart = React$14.useCallback((rowIndex, columnId) => {
+	const onCellEditingStart = React$15.useCallback((rowIndex, columnId) => {
 		store.batch(() => {
 			store.setState("focusedCell", {
 				rowIndex,
@@ -4957,7 +4994,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			});
 		});
 	}, [store]);
-	const onCellEditingStop = React$14.useCallback((opts) => {
+	const onCellEditingStop = React$15.useCallback((opts) => {
 		const currentState = store.getState();
 		const currentEditing = currentState.editingCell;
 		store.setState("editingCell", null);
@@ -4983,7 +5020,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		focusCell,
 		navigateCell
 	]);
-	const onSearchOpenChange = React$14.useCallback((open) => {
+	const onSearchOpenChange = React$15.useCallback((open) => {
 		if (open) {
 			store.setState("searchOpen", true);
 			return;
@@ -5002,7 +5039,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		});
 		if (dataGridRef.current && document.activeElement !== dataGridRef.current) dataGridRef.current.focus();
 	}, [store]);
-	const onSearch = React$14.useCallback((query) => {
+	const onSearch = React$15.useCallback((query) => {
 		if (!query.trim()) {
 			store.batch(() => {
 				store.setState("searchMatches", []);
@@ -5037,8 +5074,8 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			rowVirtualizerRef.current?.scrollToIndex(firstMatch.rowIndex, { align: "center" });
 		}
 	}, [columnIds, store]);
-	const onSearchQueryChange = React$14.useCallback((query) => store.setState("searchQuery", query), [store]);
-	const onNavigateToPrevMatch = React$14.useCallback(() => {
+	const onSearchQueryChange = React$15.useCallback((query) => store.setState("searchQuery", query), [store]);
+	const onNavigateToPrevMatch = React$15.useCallback(() => {
 		const currentState = store.getState();
 		if (currentState.searchMatches.length === 0) return;
 		const prevIndex = currentState.matchIndex - 1 < 0 ? currentState.searchMatches.length - 1 : currentState.matchIndex - 1;
@@ -5053,7 +5090,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			});
 		}
 	}, [store, focusCell]);
-	const onNavigateToNextMatch = React$14.useCallback(() => {
+	const onNavigateToNextMatch = React$15.useCallback(() => {
 		const currentState = store.getState();
 		if (currentState.searchMatches.length === 0) return;
 		const nextIndex = (currentState.matchIndex + 1) % currentState.searchMatches.length;
@@ -5068,15 +5105,15 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			});
 		}
 	}, [store, focusCell]);
-	const getIsSearchMatch = React$14.useCallback((rowIndex, columnId) => {
+	const getIsSearchMatch = React$15.useCallback((rowIndex, columnId) => {
 		return searchMatches.some((match) => match.rowIndex === rowIndex && match.columnId === columnId);
 	}, [searchMatches]);
-	const getIsActiveSearchMatch = React$14.useCallback((rowIndex, columnId) => {
+	const getIsActiveSearchMatch = React$15.useCallback((rowIndex, columnId) => {
 		if (matchIndex < 0) return false;
 		const currentMatch = searchMatches[matchIndex];
 		return currentMatch?.rowIndex === rowIndex && currentMatch?.columnId === columnId;
 	}, [searchMatches, matchIndex]);
-	const blurCell = React$14.useCallback(() => {
+	const blurCell = React$15.useCallback(() => {
 		const currentState = store.getState();
 		if (currentState.editingCell && document.activeElement instanceof HTMLElement) document.activeElement.blur();
 		store.batch(() => {
@@ -5084,7 +5121,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			store.setState("editingCell", null);
 		});
 	}, [store]);
-	const onCellClick = React$14.useCallback((rowIndex, columnId, event) => {
+	const onCellClick = React$15.useCallback((rowIndex, columnId, event) => {
 		if (event?.button === 2) return;
 		const currentState = store.getState();
 		const currentFocused = currentState.focusedCell;
@@ -5132,11 +5169,11 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		selectRange,
 		clearSelection
 	]);
-	const onCellDoubleClick = React$14.useCallback((rowIndex, columnId, event) => {
+	const onCellDoubleClick = React$15.useCallback((rowIndex, columnId, event) => {
 		if (event?.defaultPrevented) return;
 		onCellEditingStart(rowIndex, columnId);
 	}, [onCellEditingStart]);
-	const onCellMouseDown = React$14.useCallback((rowIndex, columnId, event) => {
+	const onCellMouseDown = React$15.useCallback((rowIndex, columnId, event) => {
 		if (event.button === 2) return;
 		event.preventDefault();
 		if (!event.ctrlKey && !event.metaKey && !event.shiftKey) store.batch(() => {
@@ -5157,7 +5194,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			store.setState("rowSelection", {});
 		});
 	}, [store]);
-	const onCellMouseEnter = React$14.useCallback((rowIndex, columnId, _event) => {
+	const onCellMouseEnter = React$15.useCallback((rowIndex, columnId, _event) => {
 		const currentState = store.getState();
 		if (currentState.selectionState.isSelecting && currentState.selectionState.selectionRange) {
 			const start = currentState.selectionState.selectionRange.start;
@@ -5173,14 +5210,14 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		selectRange,
 		focusCell
 	]);
-	const onCellMouseUp = React$14.useCallback(() => {
+	const onCellMouseUp = React$15.useCallback(() => {
 		const currentState = store.getState();
 		store.setState("selectionState", {
 			...currentState.selectionState,
 			isSelecting: false
 		});
 	}, [store]);
-	const onCellContextMenu = React$14.useCallback((rowIndex, columnId, event) => {
+	const onCellContextMenu = React$15.useCallback((rowIndex, columnId, event) => {
 		event.preventDefault();
 		event.stopPropagation();
 		const currentState = store.getState();
@@ -5212,7 +5249,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			y: event.clientY
 		});
 	}, [store]);
-	const onContextMenuOpenChange = React$14.useCallback((open) => {
+	const onContextMenuOpenChange = React$15.useCallback((open) => {
 		if (!open) {
 			const currentMenu = store.getState().contextMenu;
 			store.setState("contextMenu", {
@@ -5222,7 +5259,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			});
 		}
 	}, [store]);
-	const onDataGridKeyDown = React$14.useCallback((event) => {
+	const onDataGridKeyDown = React$15.useCallback((event) => {
 		const currentState = store.getState();
 		const { key, ctrlKey, metaKey, shiftKey } = event;
 		const isCtrlPressed = ctrlKey || metaKey;
@@ -5311,6 +5348,16 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 				if (currentState.selectionState.selectedCells.size > 0 || Object.keys(currentState.rowSelection).length > 0) clearSelection();
 				else blurCell();
 				return;
+			case "F2":
+				if (currentState.focusedCell) {
+					event.preventDefault();
+					onCellEditingStart(currentState.focusedCell.rowIndex, currentState.focusedCell.columnId);
+				}
+				return;
+			case "Enter":
+				event.preventDefault();
+				direction = shiftKey ? "up" : "down";
+				break;
 			case "Tab":
 				event.preventDefault();
 				direction = event.shiftKey ? "left" : "right";
@@ -5368,9 +5415,10 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		onSearchOpenChange,
 		onNavigateToNextMatch,
 		onNavigateToPrevMatch,
-		enableSearch
+		enableSearch,
+		onCellEditingStart
 	]);
-	const onSortingChange = React$14.useCallback((updater) => {
+	const onSortingChange = React$15.useCallback((updater) => {
 		if (manualSorting && externalOnSortingChange) externalOnSortingChange(updater);
 		else {
 			const currentState = store.getState();
@@ -5382,7 +5430,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		manualSorting,
 		externalOnSortingChange
 	]);
-	const onRowSelectionChange = React$14.useCallback((updater) => {
+	const onRowSelectionChange = React$15.useCallback((updater) => {
 		const currentState = store.getState();
 		const newRowSelection = typeof updater === "function" ? updater(currentState.rowSelection) : updater;
 		const selectedRows = Object.keys(newRowSelection).filter((key) => newRowSelection[key]);
@@ -5404,7 +5452,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			store.setState("editingCell", null);
 		});
 	}, [store, columnIds]);
-	const onRowSelect = React$14.useCallback((rowIndex, selected, shiftKey) => {
+	const onRowSelect = React$15.useCallback((rowIndex, selected, shiftKey) => {
 		const currentState = store.getState();
 		const rows = tableRef.current?.getRowModel().rows ?? [];
 		const currentRow = rows[rowIndex];
@@ -5424,12 +5472,12 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		});
 		store.setState("lastClickedRowIndex", rowIndex);
 	}, [store, onRowSelectionChange]);
-	const onRowHeightChange = React$14.useCallback((updater) => {
+	const onRowHeightChange = React$15.useCallback((updater) => {
 		const currentState = store.getState();
 		const newRowHeight = typeof updater === "function" ? updater(currentState.rowHeight) : updater;
 		store.setState("rowHeight", newRowHeight);
 	}, [store]);
-	const onColumnClick = React$14.useCallback((columnId) => {
+	const onColumnClick = React$15.useCallback((columnId) => {
 		if (!enableColumnSelection) {
 			clearSelection();
 			return;
@@ -5440,13 +5488,13 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		selectColumn,
 		clearSelection
 	]);
-	const defaultColumn = React$14.useMemo(() => ({
+	const defaultColumn = React$15.useMemo(() => ({
 		cell: DataGridCell,
 		minSize: MIN_COLUMN_SIZE,
 		maxSize: MAX_COLUMN_SIZE
 	}), []);
 	const effectiveSorting = manualSorting && externalSorting ? externalSorting : sorting;
-	const tableOptions = React$14.useMemo(() => ({
+	const tableOptions = React$15.useMemo(() => ({
 		...dataGridPropsRef.current,
 		data,
 		columns,
@@ -5472,6 +5520,8 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			searchOpen,
 			rowHeight,
 			isScrolling,
+			highlightedRowIndex,
+			onRowClick: onRowClickProp,
 			getIsCellSelected,
 			getIsSearchMatch,
 			getIsActiveSearchMatch,
@@ -5507,6 +5557,8 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		selectionState,
 		searchOpen,
 		isScrolling,
+		highlightedRowIndex,
+		onRowClickProp,
 		getIsCellSelected,
 		getIsSearchMatch,
 		getIsActiveSearchMatch,
@@ -5532,7 +5584,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 	if (!tableRef.current) tableRef.current = table;
 	const columnSizing = table.getState().columnSizing;
 	const columnVisibility = table.getState().columnVisibility;
-	const columnSizeVars = React$14.useMemo(() => {
+	const columnSizeVars = React$15.useMemo(() => {
 		const headers = table.getFlatHeaders();
 		const colSizes = {};
 		for (const header of headers) {
@@ -5574,7 +5626,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		}
 	});
 	if (!rowVirtualizerRef.current) rowVirtualizerRef.current = rowVirtualizer;
-	const onScrollToRow = React$14.useCallback((opts) => {
+	const onScrollToRow = React$15.useCallback((opts) => {
 		const rowIndex = opts?.rowIndex ?? 0;
 		const columnId = opts?.columnId;
 		rowVirtualizer.scrollToIndex(rowIndex, { align: "center" });
@@ -5598,7 +5650,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		getNavigableColumnIds,
 		store
 	]);
-	const onRowAdd = React$14.useCallback(async (event) => {
+	const onRowAdd = React$15.useCallback(async (event) => {
 		if (!onRowAddProp) return;
 		const result = await onRowAddProp(event);
 		if (event?.defaultPrevented || result === null) return;
@@ -5631,7 +5683,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		table.getState().columnVisibility,
 		table.getState().columnPinning
 	]);
-	const searchState = React$14.useMemo(() => {
+	const searchState = React$15.useMemo(() => {
 		if (!enableSearch) return void 0;
 		return {
 			searchMatches,
@@ -5656,7 +5708,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		onNavigateToNextMatch,
 		onNavigateToPrevMatch
 	]);
-	React$14.useEffect(() => {
+	React$15.useEffect(() => {
 		const dataGridElement = dataGridRef.current;
 		if (!dataGridElement) return;
 		dataGridElement.addEventListener("keydown", onDataGridKeyDown);
@@ -5664,7 +5716,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			dataGridElement.removeEventListener("keydown", onDataGridKeyDown);
 		};
 	}, [onDataGridKeyDown]);
-	React$14.useEffect(() => {
+	React$15.useEffect(() => {
 		function onGlobalKeyDown(event) {
 			const dataGridElement = dataGridRef.current;
 			if (!dataGridElement) return;
@@ -5708,7 +5760,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		store,
 		clearSelection
 	]);
-	React$14.useEffect(() => {
+	React$15.useEffect(() => {
 		const currentState = store.getState();
 		if (autoFocus && data.length > 0 && columns.length > 0 && !currentState.focusedCell) {
 			const _nav = getNavigableColumnIds();
@@ -5734,7 +5786,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		getNavigableColumnIds,
 		focusCell
 	]);
-	React$14.useEffect(() => {
+	React$15.useEffect(() => {
 		function onOutsideClick(event) {
 			if (event.button === 2) return;
 			if (dataGridRef.current && !dataGridRef.current.contains(event.target)) {
@@ -5756,7 +5808,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		blurCell,
 		clearSelection
 	]);
-	React$14.useEffect(() => {
+	React$15.useEffect(() => {
 		function onCleanup() {
 			document.removeEventListener("selectstart", preventSelection);
 			document.removeEventListener("contextmenu", preventContextMenu);
@@ -5816,7 +5868,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 //#endregion
 //#region src/date-picker/date-picker.tsx
 function DatePickerDemo() {
-	const [date, setDate] = React$13.useState();
+	const [date, setDate] = React$14.useState();
 	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ jsxs(Button, {
@@ -5846,13 +5898,13 @@ Drawer.displayName = "Drawer";
 const DrawerTrigger = Drawer$1.Trigger;
 const DrawerPortal = Drawer$1.Portal;
 const DrawerClose = Drawer$1.Close;
-const DrawerOverlay = React$12.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Overlay, {
+const DrawerOverlay = React$13.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Overlay, {
 	ref,
 	className: cn("fixed inset-0 z-50 bg-black/80", className),
 	...props
 }));
 DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
-const DrawerContent = React$12.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
+const DrawerContent = React$13.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
 	ref,
 	className: cn("fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background", className),
 	...props,
@@ -5869,13 +5921,13 @@ const DrawerFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
 	...props
 });
 DrawerFooter.displayName = "DrawerFooter";
-const DrawerTitle = React$12.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Title, {
+const DrawerTitle = React$13.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Title, {
 	ref,
 	className: cn("text-lg font-semibold leading-none tracking-tight", className),
 	...props
 }));
 DrawerTitle.displayName = Drawer$1.Title.displayName;
-const DrawerDescription = React$12.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Description, {
+const DrawerDescription = React$13.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Description, {
 	ref,
 	className: cn("text-sm text-muted-foreground", className),
 	...props
@@ -5894,7 +5946,7 @@ function Label({ className,...props }) {
 //#endregion
 //#region src/separator/separator.tsx
-const Separator = React$11.forwardRef(({ className, orientation = "horizontal", decorative = true,...props }, ref) => /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
+const Separator = React$12.forwardRef(({ className, orientation = "horizontal", decorative = true,...props }, ref) => /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
 	ref,
 	decorative,
 	orientation,
@@ -6016,8 +6068,8 @@ function FieldError({ className, children, errors,...props }) {
 //#endregion
 //#region src/hooks/use-is-mobile.ts
 function useIsMobile(mobileBreakpoint = 768) {
-	const [isMobile, setIsMobile] = React$10.useState(false);
-	React$10.useEffect(() => {
+	const [isMobile, setIsMobile] = React$11.useState(false);
+	React$11.useEffect(() => {
 		const mql = globalThis.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`);
 		const onChange = () => {
 			setIsMobile(globalThis.innerWidth < mobileBreakpoint);
@@ -6029,6 +6081,89 @@ function useIsMobile(mobileBreakpoint = 768) {
 	return isMobile;
 }
+//#endregion
+//#region src/input/number-input.tsx
+/**
+* Wrapper variants that mirror inputVariants but use focus-within (for wrapper)
+* instead of focus-visible (for input element).
+* NOTE: When modifying variants, also update inputVariants in input.tsx
+*/
+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"
+	} },
+	defaultVariants: { variant: "default" }
+});
+const NumberInput = React$10.forwardRef(({ className, wrapperClassName, prefix, suffix, variant, showSpinButtons = false, __e2e_test_id__, onEnter,...props }, ref) => {
+	const focusInputAtPosition = (element, cursor) => {
+		const parent = element.parentElement;
+		if (!parent) return;
+		const input = parent.querySelector("input");
+		if (!input) return;
+		input.type = "text";
+		if (cursor === "start") input.setSelectionRange(0, 0);
+		else {
+			const length = input.value.length;
+			input.setSelectionRange(length, length);
+		}
+		input.type = "number";
+		input.click();
+		input.focus();
+	};
+	const handleLabelClick = (e, cursor) => {
+		e.preventDefault();
+		focusInputAtPosition(e.target, cursor);
+	};
+	const handleLabelKeyDown = (e, cursor) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			focusInputAtPosition(e.target, cursor);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(numberInputWrapperVariants({ variant }), wrapperClassName),
+		children: [
+			prefix && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground flex h-full cursor-text items-center pl-2 pr-1",
+				onClick: (e) => handleLabelClick(e, "start"),
+				onKeyDown: (e) => handleLabelKeyDown(e, "start"),
+				children: prefix
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "number",
+				"data-slot": "input",
+				className: cn(
+					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",
+					!prefix && !suffix ? "col-span-3" : !prefix || !suffix ? "col-span-2" : "col-span-1",
+					"text-right",
+					!prefix && "pl-2",
+					!suffix && (showSpinButtons ? "pr-1" : "pr-2"),
+					!showSpinButtons && "appearance-none",
+					className
+),
+				"data-test-id": __e2e_test_id__,
+				ref,
+				onKeyDown: (e) => {
+					props.onKeyDown?.(e);
+					if (e.key === "Enter") onEnter?.();
+				},
+				...props
+			}),
+			suffix && /* @__PURE__ */ jsx("span", {
+				className: cn("text-muted-foreground flex h-full cursor-text items-center pr-2", showSpinButtons ? "pl-0" : "pl-1"),
+				onClick: (e) => handleLabelClick(e, "end"),
+				onKeyDown: (e) => handleLabelKeyDown(e, "end"),
+				children: suffix
+			})
+		]
+	});
+});
+NumberInput.displayName = "NumberInput";
 //#endregion
 //#region src/mark-value-renderer/mark-value-renderer.tsx
 /**
@@ -7190,5 +7325,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, 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, 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, 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 };
 //# sourceMappingURL=index.js.map