@postxl/ui-components 1.3.0 → 1.3.2

package/dist/index.js

@@ -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$48 from "react";
 import * as React$47 from "react";
 import * as React$46 from "react";
 import * as React$45 from "react";
@@ -94,13 +95,13 @@ function cn(...inputs) {
 //#endregion
 //#region src/accordion/accordion.tsx
 const Accordion = AccordionPrimitive.Root;
-const AccordionItem = React$47.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
+const AccordionItem = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
 	ref,
 	className: cn("border-b", className),
 	...props
 }));
 AccordionItem.displayName = "AccordionItem";
-const AccordionTrigger = React$47.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
+const AccordionTrigger = React$48.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
 	className: "flex",
 	children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
 		ref,
@@ -110,7 +111,7 @@ const AccordionTrigger = React$47.forwardRef(({ className, children,...props },
 	})
 }));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-const AccordionContent = React$47.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
+const AccordionContent = React$48.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,
@@ -130,21 +131,21 @@ const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm [
 	} },
 	defaultVariants: { variant: "default" }
 });
-const Alert = React$46.forwardRef(({ className, variant,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const Alert = React$47.forwardRef(({ className, variant,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	role: "alert",
 	className: cn(alertVariants({ variant }), className),
 	...props
 }));
 Alert.displayName = "Alert";
-const AlertTitle = React$46.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h5", {
+const AlertTitle = React$47.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$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const AlertDescription = React$47.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("text-sm [&_p]:leading-relaxed", className),
 	...props
@@ -203,13 +204,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$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, {
+const AlertDialogOverlay = React$46.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$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, {
+const AlertDialogContent = React$46.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
@@ -225,25 +226,25 @@ const AlertDialogFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div",
 	...props
 });
 AlertDialogFooter.displayName = "AlertDialogFooter";
-const AlertDialogTitle = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, {
+const AlertDialogTitle = React$46.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$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
+const AlertDialogDescription = React$46.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$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
+const AlertDialogAction = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
 	ref,
 	className: cn(buttonVariants(), className),
 	...props
 }));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-const AlertDialogCancel = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
+const AlertDialogCancel = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
 	ref,
 	className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className),
 	...props
@@ -252,19 +253,19 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 //#endregion
 //#region src/avatar/avatar.tsx
-const Avatar = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
+const Avatar = React$45.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$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
+const AvatarImage = React$45.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$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
+const AvatarFallback = React$45.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
@@ -310,25 +311,25 @@ function Badge({ className, variant, size, asChild = false,...props }) {
 
 //#endregion
 //#region src/breadcrumb/breadcrumb.tsx
-const Breadcrumb = React$43.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", {
+const Breadcrumb = React$44.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", {
 	ref,
 	"aria-label": "breadcrumb",
 	...props
 }));
 Breadcrumb.displayName = "Breadcrumb";
-const BreadcrumbList = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ol", {
+const BreadcrumbList = React$44.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$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
+const BreadcrumbItem = React$44.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$43.forwardRef(({ asChild, className,...props }, ref) => {
+const BreadcrumbLink = React$44.forwardRef(({ asChild, className,...props }, ref) => {
 	const Comp = asChild ? Slot : "a";
 	return /* @__PURE__ */ jsx(Comp, {
 		ref,
@@ -337,7 +338,7 @@ const BreadcrumbLink = React$43.forwardRef(({ asChild, className,...props }, ref
 	});
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
-const BreadcrumbPage = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("span", {
+const BreadcrumbPage = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("span", {
 	ref,
 	"aria-disabled": "true",
 	"aria-current": "page",
@@ -367,8 +368,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$42.useState("from");
-	const handleDayClick = React$42.useCallback((day, modifiers, e) => {
+	const [rangeSelectionStep, setRangeSelectionStep] = React$43.useState("from");
+	const handleDayClick = React$43.useCallback((day, modifiers, e) => {
 		if (props.mode === "range") {
 			const range = props.selected;
 			if (rangeSelectionStep === "from") {
@@ -398,8 +399,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$42.useState(props.defaultMonth ?? props.month ?? new Date());
-	React$42.useEffect(() => {
+	const [currentMonth, setCurrentMonth] = React$43.useState(props.defaultMonth ?? props.month ?? new Date());
+	React$43.useEffect(() => {
 		if (props.month) setCurrentMonth(props.month);
 	}, [props.month]);
 	const addMonths = (date, months) => {
@@ -538,8 +539,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 }
 function CalendarDayButton({ className, day, modifiers,...props }) {
 	const defaultClassNames = getDefaultClassNames();
-	const ref = React$42.useRef(null);
-	React$42.useEffect(() => {
+	const ref = React$43.useRef(null);
+	React$43.useEffect(() => {
 		if (modifiers.focused) ref.current?.focus();
 	}, [modifiers.focused]);
 	return /* @__PURE__ */ jsx(Button, {
@@ -558,38 +559,38 @@ function CalendarDayButton({ className, day, modifiers,...props }) {
 
 //#endregion
 //#region src/card/card.tsx
-const Card = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const Card = React$42.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$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const CardHeader = React$42.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$41.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h3", {
+const CardTitle = React$42.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$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("p", {
+const CardDescription = React$42.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("p", {
 	ref,
 	className: cn("text-sm text-muted-foreground", className),
 	...props
 }));
 CardDescription.displayName = "CardDescription";
-const CardContent = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const CardContent = React$42.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("p-6 pt-0", className),
 	...props
 }));
 CardContent.displayName = "CardContent";
-const CardFooter = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const CardFooter = React$42.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("flex items-center p-6 pt-0", className),
 	...props
@@ -600,7 +601,7 @@ CardFooter.displayName = "CardFooter";
 //#region src/card-hover/card-hover.tsx
 const HoverCard = HoverCardPrimitive.Root;
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
-const HoverCardContent = React$40.forwardRef(({ className, align = "center", sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
+const HoverCardContent = React$41.forwardRef(({ className, align = "center", sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
 	ref,
 	align,
 	sideOffset,
@@ -611,31 +612,31 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
 //#endregion
 //#region src/carousel/carousel.tsx
-const CarouselContext = React$39.createContext(null);
+const CarouselContext = React$40.createContext(null);
 function useCarousel() {
-	const context = React$39.useContext(CarouselContext);
+	const context = React$40.useContext(CarouselContext);
 	if (!context) throw new Error("useCarousel must be used within a <Carousel />");
 	return context;
 }
-const Carousel = React$39.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children,...props }, ref) => {
+const Carousel = React$40.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$39.useState(false);
-	const [canScrollNext, setCanScrollNext] = React$39.useState(false);
-	const onSelect = React$39.useCallback(() => {
+	const [canScrollPrev, setCanScrollPrev] = React$40.useState(false);
+	const [canScrollNext, setCanScrollNext] = React$40.useState(false);
+	const onSelect = React$40.useCallback(() => {
 		if (!api) return;
 		setCanScrollPrev(api.canScrollPrev());
 		setCanScrollNext(api.canScrollNext());
 	}, [api]);
-	const scrollPrev = React$39.useCallback(() => {
+	const scrollPrev = React$40.useCallback(() => {
 		api?.scrollPrev();
 	}, [api]);
-	const scrollNext = React$39.useCallback(() => {
+	const scrollNext = React$40.useCallback(() => {
 		api?.scrollNext();
 	}, [api]);
-	const handleKeyDown = React$39.useCallback((event) => {
+	const handleKeyDown = React$40.useCallback((event) => {
 		if (event.key === "ArrowLeft") {
 			event.preventDefault();
 			scrollPrev();
@@ -644,11 +645,11 @@ const Carousel = React$39.forwardRef(({ orientation = "horizontal", opts, setApi
 			scrollNext();
 		}
 	}, [scrollPrev, scrollNext]);
-	React$39.useEffect(() => {
+	React$40.useEffect(() => {
 		if (!api || !setApi) return;
 		setApi(api);
 	}, [api, setApi]);
-	React$39.useEffect(() => {
+	React$40.useEffect(() => {
 		if (!api) return;
 		onSelect();
 		api.on("reInit", onSelect);
@@ -689,7 +690,7 @@ const Carousel = React$39.forwardRef(({ orientation = "horizontal", opts, setApi
 	});
 });
 Carousel.displayName = "Carousel";
-const CarouselContent = React$39.forwardRef(({ className,...props }, ref) => {
+const CarouselContent = React$40.forwardRef(({ className,...props }, ref) => {
 	const { carouselRef, orientation } = useCarousel();
 	return /* @__PURE__ */ jsx("div", {
 		ref: carouselRef,
@@ -702,7 +703,7 @@ const CarouselContent = React$39.forwardRef(({ className,...props }, ref) => {
 	});
 });
 CarouselContent.displayName = "CarouselContent";
-const CarouselItem = React$39.forwardRef(({ className,...props }, ref) => {
+const CarouselItem = React$40.forwardRef(({ className,...props }, ref) => {
 	const { orientation } = useCarousel();
 	return /* @__PURE__ */ jsx("div", {
 		ref,
@@ -712,7 +713,7 @@ const CarouselItem = React$39.forwardRef(({ className,...props }, ref) => {
 	});
 });
 CarouselItem.displayName = "CarouselItem";
-const CarouselPrevious = React$39.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
+const CarouselPrevious = React$40.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
 	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 	return /* @__PURE__ */ jsxs(Button, {
 		ref,
@@ -729,7 +730,7 @@ const CarouselPrevious = React$39.forwardRef(({ className, variant = "outline",
 	});
 });
 CarouselPrevious.displayName = "CarouselPrevious";
-const CarouselNext = React$39.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
+const CarouselNext = React$40.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
 	const { orientation, scrollNext, canScrollNext } = useCarousel();
 	return /* @__PURE__ */ jsxs(Button, {
 		ref,
@@ -913,7 +914,7 @@ function DialogDescription({ className,...props }) {
 
 //#endregion
 //#region src/command-palette/command-palette.tsx
-const CommandPalette = React$38.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1, {
+const CommandPalette = React$39.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
@@ -931,7 +932,7 @@ const CommandPaletteDialog = ({ children,...props }) => {
 		})
 	});
 };
-const CommandPaletteInput = React$38.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs("div", {
+const CommandPaletteInput = React$39.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, {
@@ -941,31 +942,31 @@ const CommandPaletteInput = React$38.forwardRef(({ className,...props }, ref) =>
 	})]
 }));
 CommandPaletteInput.displayName = Command$1.Input.displayName;
-const CommandPaletteList = React$38.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.List, {
+const CommandPaletteList = React$39.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$38.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, {
+const CommandPaletteEmpty = React$39.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$38.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Group, {
+const CommandPaletteGroup = React$39.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$38.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Separator, {
+const CommandPaletteSeparator = React$39.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$38.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Item, {
+const CommandPaletteItem = React$39.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
@@ -1041,8 +1042,8 @@ const frameworks = [
 	}
 ];
 function ComboboxDemo() {
-	const [open, setOpen] = React$37.useState(false);
-	const [value, setValue] = React$37.useState("");
+	const [open, setOpen] = React$38.useState(false);
+	const [value, setValue] = React$38.useState("");
 	return /* @__PURE__ */ jsxs(Popover, {
 		open,
 		onOpenChange: setOpen,
@@ -1282,32 +1283,32 @@ const ContextMenuGroup = ContextMenuPrimitive.Group;
 const ContextMenuPortal = ContextMenuPrimitive.Portal;
 const ContextMenuSub = ContextMenuPrimitive.Sub;
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-const ContextMenuSubTrigger = React$36.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.SubTrigger, {
+const ContextMenuSubTrigger = React$37.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$36.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.SubContent, {
+const ContextMenuSubContent = React$37.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$36.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Content, {
+const ContextMenuContent = React$37.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$36.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Item, {
+const ContextMenuItem = React$37.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$36.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.CheckboxItem, {
+const ContextMenuCheckboxItem = React$37.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,
@@ -1318,7 +1319,7 @@ const ContextMenuCheckboxItem = React$36.forwardRef(({ className, children, chec
 	}), children]
 }));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-const ContextMenuRadioItem = React$36.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.RadioItem, {
+const ContextMenuRadioItem = React$37.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,
@@ -1328,13 +1329,13 @@ const ContextMenuRadioItem = React$36.forwardRef(({ className, children,...props
 	}), children]
 }));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-const ContextMenuLabel = React$36.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Label, {
+const ContextMenuLabel = React$37.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$36.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
+const ContextMenuSeparator = React$37.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
 	ref,
 	className: cn("-mx-1 my-1 h-px bg-border", className),
 	...props
@@ -1479,7 +1480,7 @@ function DropdownMenuSubContent({ className,...props }) {
 const TooltipProvider = TooltipPrimitive.Provider;
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React$35.forwardRef(({ className, sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
+const TooltipContent = React$36.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),
@@ -1986,7 +1987,7 @@ function getColumnVariant(variant) {
 	}
 }
 function DataGridColumnHeader({ header, table, className, onPointerDown,...props }) {
-	const [open, setOpen] = React$34.useState(false);
+	const [open, setOpen] = React$35.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;
@@ -1995,7 +1996,7 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
 	const pinnedPosition = column.getIsPinned();
 	const isPinnedLeft = pinnedPosition === "left";
 	const isPinnedRight = pinnedPosition === "right";
-	const onSortingChange = React$34.useCallback((direction) => {
+	const onSortingChange = React$35.useCallback((direction) => {
 		table.setSorting((prev) => {
 			const existingSortIndex = prev.findIndex((sort) => sort.id === column.id);
 			const newSort = {
@@ -2009,19 +2010,19 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
 			} else return [...prev, newSort];
 		});
 	}, [column.id, table]);
-	const onSortRemove = React$34.useCallback(() => {
+	const onSortRemove = React$35.useCallback(() => {
 		table.setSorting((prev) => prev.filter((sort) => sort.id !== column.id));
 	}, [column.id, table]);
-	const onLeftPin = React$34.useCallback(() => {
+	const onLeftPin = React$35.useCallback(() => {
 		column.pin("left");
 	}, [column]);
-	const onRightPin = React$34.useCallback(() => {
+	const onRightPin = React$35.useCallback(() => {
 		column.pin("right");
 	}, [column]);
-	const onUnpin = React$34.useCallback(() => {
+	const onUnpin = React$35.useCallback(() => {
 		column.pin(false);
 	}, [column]);
-	const onTriggerPointerDown = React$34.useCallback((event) => {
+	const onTriggerPointerDown = React$35.useCallback((event) => {
 		onPointerDown?.(event);
 		if (event.defaultPrevented) return;
 		if (event.button !== 0) return;
@@ -2133,7 +2134,7 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
 		})
 	] });
 }
-const DataGridColumnResizer = React$34.memo(DataGridColumnResizerImpl, (prev, next) => {
+const DataGridColumnResizer = React$35.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;
@@ -2142,7 +2143,7 @@ const DataGridColumnResizer = React$34.memo(DataGridColumnResizerImpl, (prev, ne
 });
 function DataGridColumnResizerImpl({ header, table, label }) {
 	const defaultColumnDef = table._getDefaultColumnDef();
-	const onDoubleClick = React$34.useCallback(() => {
+	const onDoubleClick = React$35.useCallback(() => {
 		header.column.resetSize();
 	}, [header.column]);
 	return /* @__PURE__ */ jsx("div", {
@@ -2251,7 +2252,7 @@ function DataGridContextMenu({ table }) {
 		onRowsDelete
 	});
 }
-const ContextMenu$1 = React$33.memo(ContextMenuImpl, (prev, next) => {
+const ContextMenu$1 = React$34.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;
@@ -2262,7 +2263,7 @@ const ContextMenu$1 = React$33.memo(ContextMenuImpl, (prev, next) => {
 	return true;
 });
 function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenChange, selectionState, onDataUpdate, onRowsDelete }) {
-	const triggerStyle = React$33.useMemo(() => ({
+	const triggerStyle = React$34.useMemo(() => ({
 		position: "fixed",
 		left: `${contextMenu.x}px`,
 		top: `${contextMenu.y}px`,
@@ -2275,11 +2276,11 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		pointerEvents: "none",
 		opacity: 0
 	}), [contextMenu.x, contextMenu.y]);
-	const onCloseAutoFocus = React$33.useCallback((event) => {
+	const onCloseAutoFocus = React$34.useCallback((event) => {
 		event.preventDefault();
 		dataGridRef?.current?.focus();
 	}, [dataGridRef]);
-	const onCopy = React$33.useCallback(async () => {
+	const onCopy = React$34.useCallback(async () => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
 		const rows = table.getRowModel().rows;
 		const columnIds = [];
@@ -2318,7 +2319,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$33.useMemo(() => {
+	const canClear = React$34.useMemo(() => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return false;
 		const visibleCols = table.getVisibleLeafColumns();
 		const rows = table.getRowModel().rows;
@@ -2335,7 +2336,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		}
 		return true;
 	}, [selectionState, table]);
-	const onClear = React$33.useCallback(() => {
+	const onClear = React$34.useCallback(() => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
 		if (!canClear) return;
 		const updates = [];
@@ -2354,7 +2355,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		selectionState,
 		canClear
 	]);
-	const onDelete = React$33.useCallback(async () => {
+	const onDelete = React$34.useCallback(async () => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
 		const rowIndices = new Set();
 		for (const cellKey of selectionState.selectedCells) {
@@ -2431,12 +2432,12 @@ function composeRefs(...refs) {
 * Accepts callback refs and RefObject(s)
 */
 function useComposedRefs(...refs) {
-	return React$32.useCallback(composeRefs(...refs), refs);
+	return React$33.useCallback(composeRefs(...refs), refs);
 }
 
 //#endregion
 //#region src/data-grid/data-grid-row.tsx
-const DataGridRow = React$31.memo(DataGridRowImpl, (prev, next) => {
+const DataGridRow = React$32.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;
@@ -2466,7 +2467,7 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
 		}
 	});
 	const isRowSelected = row.getIsSelected();
-	const handleRowClick = React$31.useCallback((event) => {
+	const handleRowClick = React$32.useCallback((event) => {
 		const target = event.target;
 		if (target.closest("input, button, [role=\"checkbox\"]")) return;
 		if (event.detail === 1) onRowClick?.(virtualRowIndex);
@@ -2516,20 +2517,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$30.useRef(callback);
-	React$30.useEffect(() => {
+	const callbackRef = React$31.useRef(callback);
+	React$31.useEffect(() => {
 		callbackRef.current = callback;
 	});
-	return React$30.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+	return React$31.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 
 //#endregion
 //#region src/hooks/use-debounced-callback.ts
 function useDebouncedCallback(callback, delay) {
 	const handleCallback = useCallbackRef(callback);
-	const debounceTimerRef = React$29.useRef(0);
-	React$29.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
-	const setValue = React$29.useCallback((...args) => {
+	const debounceTimerRef = React$30.useRef(0);
+	React$30.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
+	const setValue = React$30.useCallback((...args) => {
 		window.clearTimeout(debounceTimerRef.current);
 		debounceTimerRef.current = window.setTimeout(() => handleCallback(...args), delay);
 	}, [handleCallback, delay]);
@@ -2549,8 +2550,8 @@ const inputVariants = cva("file:text-foreground placeholder:text-muted-foregroun
 	} },
 	defaultVariants: { variant: "default" }
 });
-function Input({ className, type, variant, __e2e_test_id__, onEnter,...props }) {
-	return /* @__PURE__ */ jsx("input", {
+const Input = React$29.forwardRef(({ className, type, variant, __e2e_test_id__, onEnter, wrapperClassName,...props }, ref) => {
+	const input = /* @__PURE__ */ jsx("input", {
 		type,
 		"data-slot": "input",
 		className: cn(inputVariants({
@@ -2562,9 +2563,16 @@ function Input({ className, type, variant, __e2e_test_id__, onEnter,...props })
 			props.onKeyDown?.(e);
 			if (e.key === "Enter") onEnter?.();
 		},
+		ref,
 		...props
 	});
-}
+	if (wrapperClassName) return /* @__PURE__ */ jsx("div", {
+		className: wrapperClassName,
+		children: input
+	});
+	return input;
+});
+Input.displayName = "Input";
 
 //#endregion
 //#region src/data-grid/data-grid-search.tsx
@@ -6084,9 +6092,52 @@ function useIsMobile(mobileBreakpoint = 768) {
 //#endregion
 //#region src/input/number-input.tsx
 /**
+* Formats a number according to the provided formatter
+*/
+function formatNumber(value, formatter, intlFormatter) {
+	if (typeof formatter === "function") return formatter(value);
+	if (intlFormatter) return intlFormatter.format(value);
+	const { locale, options } = formatter;
+	return new Intl.NumberFormat(locale, options).format(value);
+}
+/**
+* Parses a formatted string back to a number using the format configuration
+* This is more robust than heuristics as it uses the actual locale/format settings
+*/
+function parseFormattedNumber(formatted, formatter, intlFormatter) {
+	if (formatted === "") return void 0;
+	if (typeof formatter === "function") return parseFormattedNumberHeuristic(formatted);
+	const formatterToUse = intlFormatter ?? new Intl.NumberFormat(formatter.locale, formatter.options);
+	const parts = formatterToUse.formatToParts(12345.6);
+	const groupSeparator = parts.find((p) => p.type === "group")?.value ?? "";
+	const decimalSeparator = parts.find((p) => p.type === "decimal")?.value ?? ".";
+	const normalized = formatted.replaceAll(groupSeparator, "").replaceAll(decimalSeparator, ".").replaceAll(/[^\d.-]/g, "");
+	let parsed = Number(normalized);
+	if (Number.isNaN(parsed)) return void 0;
+	if (formatter.options?.style === "percent") parsed = parsed / 100;
+	return parsed;
+}
+/**
+* Fallback parser for custom format functions where we don't know the format rules
+* Uses heuristics to guess the decimal separator
+*/
+function parseFormattedNumberHeuristic(formatted) {
+	let cleaned = formatted.trim();
+	const lastComma = cleaned.lastIndexOf(",");
+	const lastPeriod = cleaned.lastIndexOf(".");
+	if (lastComma > lastPeriod) {
+		cleaned = cleaned.replaceAll(/[.\s']/g, "");
+		cleaned = cleaned.replace(",", ".");
+	} else if (lastPeriod > lastComma) cleaned = cleaned.replaceAll(/[,\s']/g, "");
+	else cleaned = cleaned.replaceAll(/[,.\s']/g, "");
+	cleaned = cleaned.replaceAll(/[^0-9.-]/g, "");
+	const parsed = Number(cleaned);
+	return Number.isNaN(parsed) ? void 0 : parsed;
+}
+/**
 * 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
+* 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: {
@@ -6095,19 +6146,26 @@ const numberInputWrapperVariants = cva("border-input bg-background grid grid-col
 	} },
 	defaultVariants: { variant: "default" }
 });
-const NumberInput = React$10.forwardRef(({ className, wrapperClassName, prefix, suffix, variant, showSpinButtons = false, __e2e_test_id__, onEnter,...props }, ref) => {
+const NumberInput = React$10.forwardRef(({ className, wrapperClassName, prefix, suffix, variant, showSpinButtons = false, __e2e_test_id__, onEnter, onChange, format: format$1, value: controlledValue,...props }, ref) => {
+	const [isFocused, setIsFocused] = React$10.useState(false);
+	const [inputString, setInputString] = React$10.useState("");
+	const intlFormatter = React$10.useMemo(() => {
+		if (!format$1 || typeof format$1 === "function") return void 0;
+		return new Intl.NumberFormat(format$1.locale, format$1.options);
+	}, [format$1]);
 	const focusInputAtPosition = (element, cursor) => {
 		const parent = element.parentElement;
 		if (!parent) return;
 		const input = parent.querySelector("input");
 		if (!input) return;
-		input.type = "text";
+		const originalType = input.type;
+		if (originalType === "number") input.type = "text";
 		if (cursor === "start") input.setSelectionRange(0, 0);
 		else {
 			const length = input.value.length;
 			input.setSelectionRange(length, length);
 		}
-		input.type = "number";
+		input.type = originalType;
 		input.click();
 		input.focus();
 	};
@@ -6121,6 +6179,46 @@ const NumberInput = React$10.forwardRef(({ className, wrapperClassName, prefix,
 			focusInputAtPosition(e.target, cursor);
 		}
 	};
+	const handleChange = (e) => {
+		const value = e.target.value;
+		if (format$1) setInputString(value);
+		let parsedValue;
+		if (format$1) parsedValue = parseFormattedNumber(value, format$1, intlFormatter);
+		else parsedValue = value === "" ? void 0 : Number(value);
+		onChange?.(parsedValue);
+	};
+	const handleFocus = (e) => {
+		setIsFocused(true);
+		props.onFocus?.(e);
+	};
+	const handleBlur = (e) => {
+		setIsFocused(false);
+		setInputString("");
+		props.onBlur?.(e);
+	};
+	const displayValue = React$10.useMemo(() => {
+		if (isFocused && format$1) {
+			if (inputString !== "") return inputString;
+			if (controlledValue !== void 0) {
+				const formatted = formatNumber(controlledValue, format$1, intlFormatter);
+				if (typeof format$1 !== "function" && intlFormatter) {
+					const parts = intlFormatter.formatToParts(controlledValue);
+					const groupSeparator = parts.find((p) => p.type === "group")?.value ?? "";
+					return formatted.replaceAll(groupSeparator, "");
+				}
+				return controlledValue.toString();
+			}
+			return "";
+		}
+		if (!isFocused && format$1 && controlledValue !== void 0) return formatNumber(controlledValue, format$1, intlFormatter);
+		return controlledValue?.toString() ?? "";
+	}, [
+		isFocused,
+		format$1,
+		inputString,
+		controlledValue,
+		intlFormatter
+	]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn(numberInputWrapperVariants({ variant }), wrapperClassName),
 		children: [
@@ -6131,7 +6229,7 @@ const NumberInput = React$10.forwardRef(({ className, wrapperClassName, prefix,
 				children: prefix
 			}),
 			/* @__PURE__ */ jsx("input", {
-				type: "number",
+				type: format$1 ? "text" : "number",
 				"data-slot": "input",
 				className: cn(
 					inputVariants({ variant }),
@@ -6142,11 +6240,15 @@ const NumberInput = React$10.forwardRef(({ className, wrapperClassName, prefix,
 					"text-right",
 					!prefix && "pl-2",
 					!suffix && (showSpinButtons ? "pr-1" : "pr-2"),
-					!showSpinButtons && "appearance-none",
+					!showSpinButtons && !format$1 && "appearance-none",
 					className
 ),
 				"data-test-id": __e2e_test_id__,
 				ref,
+				value: displayValue,
+				onChange: handleChange,
+				onFocus: handleFocus,
+				onBlur: handleBlur,
 				onKeyDown: (e) => {
 					props.onKeyDown?.(e);
 					if (e.key === "Enter") onEnter?.();