@giddaa-housing/ui 2.0.0 → 3.0.0

package/dist/combobox.js

@@ -8,6 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import { Combobox as Combobox$1 } from "@base-ui/react";
+import { useVirtualizer } from "@tanstack/react-virtual";
 //#region src/combobox.tsx
 const ComboboxSelectionContext = React.createContext({ multiple: false });
 function Combobox({ multiple, children, size, ...props }) {
@@ -39,7 +40,7 @@ const comboboxInputVariants = cva("w-auto has-data-popup-open:rounded-2xl has-da
 	} },
 	defaultVariants: { size: "md" }
 });
-const comboboxContentVariants = cva("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width))] origin-(--transform-origin) overflow-hidden border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 *:data-[slot=input-group]:mb-1 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", {
+const comboboxContentVariants = cva("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width))] origin-(--transform-origin) overflow-hidden border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) transition-[opacity,scale,translate] duration-[var(--duration-motion-popup)] ease-gdt-out data-[chips=true]:min-w-(--anchor-width) data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95 data-[side=bottom]:data-starting-style:translate-y-2 data-[side=bottom]:data-ending-style:translate-y-2 data-[side=top]:data-starting-style:-translate-y-2 data-[side=top]:data-ending-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=left]:data-ending-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=right]:data-ending-style:-translate-x-2 data-[side=inline-end]:data-starting-style:-translate-x-2 data-[side=inline-end]:data-ending-style:-translate-x-2 data-[side=inline-start]:data-starting-style:translate-x-2 data-[side=inline-start]:data-ending-style:translate-x-2 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100 motion-reduce:data-[side=bottom]:data-starting-style:translate-y-0 motion-reduce:data-[side=bottom]:data-ending-style:translate-y-0 motion-reduce:data-[side=top]:data-starting-style:translate-y-0 motion-reduce:data-[side=top]:data-ending-style:translate-y-0 motion-reduce:data-[side=left]:data-starting-style:translate-x-0 motion-reduce:data-[side=left]:data-ending-style:translate-x-0 motion-reduce:data-[side=right]:data-starting-style:translate-x-0 motion-reduce:data-[side=right]:data-ending-style:translate-x-0 motion-reduce:data-[side=inline-end]:data-starting-style:translate-x-0 motion-reduce:data-[side=inline-end]:data-ending-style:translate-x-0 motion-reduce:data-[side=inline-start]:data-starting-style:translate-x-0 motion-reduce:data-[side=inline-start]:data-ending-style:translate-x-0 *:data-[slot=input-group]:mb-1", {
 	variants: { size: {
 		sm: "rounded-lg p-1",
 		md: "rounded-xl p-1.5",
@@ -115,7 +116,7 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
 					variant: "ghost",
 					render: /* @__PURE__ */ jsx(ComboboxTrigger, {}),
 					"data-slot": "input-group-button",
-					className: "h-6 border-0 bg-transparent p-0 shadow-none inset-ring-0 group-has-data-[slot=combobox-clear]/input-group:hidden hover:border-transparent focus-visible:border-transparent focus-visible:inset-ring-0 data-popup-open:border-transparent data-popup-open:bg-transparent data-popup-open:inset-ring-0 data-pressed:bg-transparent",
+					className: "border-0 bg-transparent p-0 shadow-none inset-ring-0 group-has-data-[slot=combobox-clear]/input-group:hidden hover:border-transparent focus-visible:border-transparent focus-visible:inset-ring-0 data-popup-open:border-transparent data-popup-open:bg-transparent data-popup-open:inset-ring-0 data-pressed:bg-transparent",
 					disabled
 				}), showClear && /* @__PURE__ */ jsx(ComboboxClear, { disabled })]
 			}),
@@ -135,7 +136,7 @@ function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "
 		children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
 			"data-slot": "combobox-content",
 			"data-chips": !!anchor,
-			className: cn("group/combobox-content", comboboxContentVariants({ size: resolvedSize }), className),
+			className: cn("group/combobox-content", comboboxContentVariants({ size: resolvedSize }), "has-data-[slot=combobox-virtualized]:max-h-none", className),
 			...props
 		})
 	}) });
@@ -143,7 +144,7 @@ function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "
 function ComboboxList({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox$1.List, {
 		"data-slot": "combobox-list",
-		className: cn("no-scrollbar max-h-(--available-height) space-y-0.5 scroll-py-1 overflow-y-auto overscroll-contain data-empty:p-0", className),
+		className: cn("no-scrollbar max-h-(--available-height) space-y-0.5 scroll-py-1 overflow-y-auto overscroll-contain data-empty:p-0 has-data-[slot=combobox-virtualized]:max-h-none has-data-[slot=combobox-virtualized]:space-y-0 has-data-[slot=combobox-virtualized]:overflow-hidden", className),
 		...props
 	});
 }
@@ -233,5 +234,77 @@ function ComboboxChipsInput({ className, ...props }) {
 function useComboboxAnchor() {
 	return React.useRef(null);
 }
+/**
+* Wires up an external virtualizer for a large `Combobox`. Spread the returned
+* `onItemHighlighted` onto `<Combobox virtualized items={...}>` and pass
+* `virtualizerRef` to `<ComboboxVirtualizedList>`. Keeps keyboard navigation in
+* sync by scrolling the highlighted (off-screen) item into view.
+*/
+function useComboboxVirtualizer() {
+	const virtualizerRef = React.useRef(null);
+	return {
+		virtualizerRef,
+		onItemHighlighted: React.useCallback((item, { reason, index }) => {
+			const virtualizer = virtualizerRef.current;
+			if (item == null || !virtualizer || index < 0) return;
+			const isStart = index === 0;
+			const isEnd = index === virtualizer.options.count - 1;
+			if (reason === "none" || reason === "keyboard" && (isStart || isEnd)) queueMicrotask(() => {
+				virtualizer.scrollToIndex(index, { align: isEnd ? "start" : "end" });
+			});
+		}, [])
+	};
+}
+function ComboboxVirtualizedList({ virtualizerRef, estimateSize = 40, overscan = 20, paddingStart = 4, paddingEnd = 4, maxHeight = "22rem", className, children }) {
+	const filteredItems = Combobox$1.useFilteredItems();
+	const scrollElementRef = React.useRef(null);
+	const virtualizer = useVirtualizer({
+		count: filteredItems.length,
+		getScrollElement: () => scrollElementRef.current,
+		estimateSize: typeof estimateSize === "function" ? estimateSize : () => estimateSize,
+		overscan,
+		paddingStart,
+		paddingEnd,
+		scrollPaddingStart: paddingStart,
+		scrollPaddingEnd: paddingEnd
+	});
+	React.useImperativeHandle(virtualizerRef, () => virtualizer, [virtualizer]);
+	const handleScrollElementRef = React.useCallback((element) => {
+		scrollElementRef.current = element;
+		if (element) virtualizer.measure();
+	}, [virtualizer]);
+	const totalSize = virtualizer.getTotalSize();
+	if (!filteredItems.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		role: "presentation",
+		ref: handleScrollElementRef,
+		"data-slot": "combobox-virtualized",
+		style: { maxHeight },
+		className: cn("no-scrollbar overflow-y-auto overscroll-contain", className),
+		children: /* @__PURE__ */ jsx("div", {
+			role: "presentation",
+			className: "relative w-full",
+			style: { height: totalSize },
+			children: virtualizer.getVirtualItems().map((virtualItem) => {
+				const item = filteredItems[virtualItem.index];
+				if (item == null) return null;
+				return /* @__PURE__ */ jsx(React.Fragment, { children: children(item, {
+					index: virtualItem.index,
+					"data-index": virtualItem.index,
+					"aria-setsize": filteredItems.length,
+					"aria-posinset": virtualItem.index + 1,
+					style: {
+						position: "absolute",
+						top: 0,
+						left: 0,
+						width: "100%",
+						height: virtualItem.size,
+						transform: `translateY(${virtualItem.start}px)`
+					}
+				}) }, virtualItem.key);
+			})
+		})
+	});
+}
 //#endregion
-export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, ComboboxVirtualizedList, useComboboxAnchor, useComboboxVirtualizer };

package/dist/cta.d.ts

@@ -1,4 +1,4 @@
-import { n as ButtonLink, t as Button } from "./button-BZIeyUw6.js";
+import { n as ButtonLink, t as Button } from "./button-DW5OijoR.js";
 import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";

package/dist/data-table.d.ts

@@ -1,4 +1,4 @@
-import { t as Button } from "./button-BZIeyUw6.js";
+import { t as Button } from "./button-DW5OijoR.js";
 import { Empty } from "./empty-state.js";
 import { FilterApplyButtonProps, FilterContentProps, FilterProps, FilterResetButtonProps } from "./filter.js";
 import { Pagination } from "./pagination.js";

package/dist/data-table.js

@@ -243,7 +243,7 @@ function DataTable({ className, containerClassName, emptyState, interactiveColum
 					pinnedSide,
 					style: getCommonPinningStyles(header.column),
 					children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2",
+						className: "flex min-w-0 items-center gap-2",
 						children: [
 							flexRender(header.column.columnDef.header, header.getContext()),
 							header.column.getCanSort() ? /* @__PURE__ */ jsx("button", {

package/dist/date-picker.d.ts

@@ -1,9 +1,12 @@
+import { n as InputSize } from "./input-CfoEJ8A6.js";
 import * as React from "react";
 import { DateRange, Matcher } from "react-day-picker";
 //#region src/date-picker.d.ts
 type CaptionLayout = "label" | "dropdown" | "dropdown-months" | "dropdown-years";
 interface DatePickerBaseProps {
   disabled?: boolean;
+  /** Controls the trigger size. The calendar panel is not resized. */
+  size?: InputSize;
   placeholder?: string;
   className?: string;
   /** Caption style. Defaults to month + year dropdowns for quick navigation. */
@@ -19,11 +22,11 @@ interface DatePickerProps extends DatePickerBaseProps {
   value?: Date;
   onChange?: (date: Date | undefined) => void;
 }
-declare function DatePicker({ value, onChange, disabled, placeholder, className, captionLayout, startMonth, endMonth, disabledDates }: DatePickerProps): React.JSX.Element;
+declare function DatePicker({ value, onChange, disabled, size, placeholder, className, captionLayout, startMonth, endMonth, disabledDates }: DatePickerProps): React.JSX.Element;
 interface DateRangePickerProps extends DatePickerBaseProps {
   value?: DateRange;
   onChange?: (range: DateRange | undefined) => void;
 }
-declare function DateRangePicker({ value, onChange, disabled, placeholder, className, captionLayout, startMonth, endMonth, disabledDates }: DateRangePickerProps): React.JSX.Element;
+declare function DateRangePicker({ value, onChange, disabled, size, placeholder, className, captionLayout, startMonth, endMonth, disabledDates }: DateRangePickerProps): React.JSX.Element;
 //#endregion
 export { DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps };

package/dist/date-picker.js

@@ -2,7 +2,7 @@
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { Calendar } from "./calendar.js";
 import { Popover, PopoverContent } from "./popover.js";
-import { n as PickerTrigger, t as PickerFooter } from "./picker-lzgmsNfG.js";
+import { n as PickerFooter, r as PickerTrigger, t as PICKER_COLLISION_AVOIDANCE } from "./picker-xSTzeYhc.js";
 import { CalendarIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
@@ -14,14 +14,14 @@ function formatDate(date) {
 		year: "numeric"
 	});
 }
-const PANEL_CLASSES = "flex min-w-(--anchor-width) flex-col items-center gap-0 overflow-hidden rounded-2xl p-0";
+const PANEL_CLASSES = "flex min-w-(--anchor-width) flex-col items-center gap-0 overflow-hidden rounded-2xl p-0 border border-line-subtle";
 function defaultStartMonth() {
 	return new Date((/* @__PURE__ */ new Date()).getFullYear() - 100, 0);
 }
 function defaultEndMonth() {
 	return new Date((/* @__PURE__ */ new Date()).getFullYear() + 10, 11);
 }
-function DatePicker({ value, onChange, disabled = false, placeholder = "Select date", className, captionLayout = "dropdown", startMonth, endMonth, disabledDates }) {
+function DatePicker({ value, onChange, disabled = false, size, placeholder = "Select date", className, captionLayout = "dropdown", startMonth, endMonth, disabledDates }) {
 	const [open, setOpen] = React.useState(false);
 	const [pending, setPending] = React.useState(value);
 	const [month, setMonth] = React.useState(() => value ?? /* @__PURE__ */ new Date());
@@ -41,11 +41,13 @@ function DatePicker({ value, onChange, disabled = false, placeholder = "Select d
 			placeholder,
 			disabled,
 			open,
+			size,
 			className
 		}), /* @__PURE__ */ jsxs(PopoverContent, {
 			showArrow: false,
-			align: "start",
+			align: "center",
 			side: "bottom",
+			collisionAvoidance: PICKER_COLLISION_AVOIDANCE,
 			className: PANEL_CLASSES,
 			children: [/* @__PURE__ */ jsx(Calendar, {
 				mode: "single",
@@ -72,7 +74,7 @@ function DatePicker({ value, onChange, disabled = false, placeholder = "Select d
 		})]
 	});
 }
-function DateRangePicker({ value, onChange, disabled = false, placeholder = "Select date range", className, captionLayout = "dropdown", startMonth, endMonth, disabledDates }) {
+function DateRangePicker({ value, onChange, disabled = false, size, placeholder = "Select date range", className, captionLayout = "dropdown", startMonth, endMonth, disabledDates }) {
 	const [open, setOpen] = React.useState(false);
 	const [pending, setPending] = React.useState(value);
 	const [month, setMonth] = React.useState(() => value?.from ?? /* @__PURE__ */ new Date());
@@ -96,10 +98,13 @@ function DateRangePicker({ value, onChange, disabled = false, placeholder = "Sel
 			placeholder,
 			disabled,
 			open,
+			size,
 			className
 		}), /* @__PURE__ */ jsxs(PopoverContent, {
 			showArrow: false,
-			align: "start",
+			align: "center",
+			side: "bottom",
+			collisionAvoidance: PICKER_COLLISION_AVOIDANCE,
 			className: cn(PANEL_CLASSES, "w-auto"),
 			children: [/* @__PURE__ */ jsx(Calendar, {
 				mode: "range",

package/dist/dialog.js

@@ -38,11 +38,11 @@ function DialogOverlay({ className, ...props }) {
 		forceRender: true,
 		"data-slot": "dialog-overlay",
 		"data-nested": nested || void 0,
-		className: cn("fixed inset-0 z-50 transition-opacity duration-150 data-closed:opacity-0 data-open:opacity-100", nested ? "bg-black/25" : "bg-black/55 supports-backdrop-filter:backdrop-blur-xl", className),
+		className: cn("fixed inset-0 z-50 transition-opacity duration-150 ease-gdt-out data-closed:opacity-0 data-open:opacity-100", nested ? "bg-black/25" : "bg-black/55 supports-backdrop-filter:backdrop-blur-xl", className),
 		...props
 	});
 }
-const dialogContentVariants = cva("group/dialog-content fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-5rem)] w-full max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding p-(--dialog-padding) text-fg-primary shadow-(--elevation-e2-shadow) outline-none [--dialog-padding:1.25rem] transition-[opacity,transform] duration-200 ease-in-out data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 origin-center data-[nested-dialog-open]:scale-[0.96]", {
+const dialogContentVariants = cva("group/dialog-content fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-5rem)] w-full max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding p-(--dialog-padding) text-fg-primary shadow-(--elevation-e2-shadow) outline-none [--dialog-padding:1.25rem] origin-center transition-[opacity,scale] duration-[var(--duration-motion-popup)] ease-gdt-out data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100 data-[nested-dialog-open]:scale-[0.96]", {
 	variants: { size: {
 		sm: "sm:w-90 sm:[--dialog-padding:1.5rem]",
 		md: "sm:w-105 sm:[--dialog-padding:1.5rem]",

package/dist/dropdown-menu.js

@@ -28,7 +28,7 @@ function DropdownMenuTrigger({ ...props }) {
 		...props
 	});
 }
-const dropdownMenuContentVariants = cva("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", {
+const dropdownMenuContentVariants = cva("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) transition-[opacity,scale,translate] duration-[var(--duration-motion-popup)] ease-gdt-out outline-none data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95 data-closed:overflow-hidden data-[side=bottom]:data-starting-style:translate-y-2 data-[side=bottom]:data-ending-style:translate-y-2 data-[side=top]:data-starting-style:-translate-y-2 data-[side=top]:data-ending-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=left]:data-ending-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=right]:data-ending-style:-translate-x-2 data-[side=inline-end]:data-starting-style:-translate-x-2 data-[side=inline-end]:data-ending-style:-translate-x-2 data-[side=inline-start]:data-starting-style:translate-x-2 data-[side=inline-start]:data-ending-style:translate-x-2 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100 motion-reduce:data-[side=bottom]:data-starting-style:translate-y-0 motion-reduce:data-[side=bottom]:data-ending-style:translate-y-0 motion-reduce:data-[side=top]:data-starting-style:translate-y-0 motion-reduce:data-[side=top]:data-ending-style:translate-y-0 motion-reduce:data-[side=left]:data-starting-style:translate-x-0 motion-reduce:data-[side=left]:data-ending-style:translate-x-0 motion-reduce:data-[side=right]:data-starting-style:translate-x-0 motion-reduce:data-[side=right]:data-ending-style:translate-x-0 motion-reduce:data-[side=inline-end]:data-starting-style:translate-x-0 motion-reduce:data-[side=inline-end]:data-ending-style:translate-x-0 motion-reduce:data-[side=inline-start]:data-starting-style:translate-x-0 motion-reduce:data-[side=inline-start]:data-ending-style:translate-x-0", {
 	variants: { size: {
 		sm: "rounded-lg p-1",
 		md: "rounded-xl p-1.5",

package/dist/file-upload.js

@@ -27,7 +27,7 @@ function FileUpload({ className, state = "uploading", value, "aria-busy": ariaBu
 			"data-state": state,
 			"data-value": progress,
 			"aria-busy": ariaBusy ?? (state === "uploading" || void 0),
-			className: cn("group/file-upload relative flex min-w-0 items-start gap-3 rounded-xl border border-line bg-surface p-3", "data-[state=error]:border-line-danger data-[state=error]:bg-surface-danger-subtle", className),
+			className: cn("group/file-upload relative flex min-w-0 items-start gap-3 rounded-xl border border-line bg-surface p-3 transition-[background-color,border-color,color] duration-[var(--duration-motion-press)] ease-gdt-out", "data-[state=error]:border-line-danger data-[state=error]:bg-surface-danger-subtle", className),
 			...props
 		})
 	});
@@ -64,7 +64,7 @@ function FileUploadPreviewAction({ className, ...props }) {
 function FileUploadIcon({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "file-upload-icon",
-		className: cn("flex size-11 shrink-0 items-center justify-center rounded-lg bg-surface-brand-subtle text-fg-brand", "group-data-[state=error]/file-upload:bg-surface-danger-subtle group-data-[state=error]/file-upload:text-status-danger", className),
+		className: cn("flex size-11 shrink-0 items-center justify-center rounded-lg bg-surface-brand-subtle text-fg-brand transition-[background-color,border-color,color] duration-[var(--duration-motion-press)] ease-gdt-out", "group-data-[state=error]/file-upload:bg-surface-danger-subtle group-data-[state=error]/file-upload:text-status-danger", className),
 		...props,
 		children: children ?? /* @__PURE__ */ jsx(File, {
 			"aria-hidden": "true",
@@ -112,7 +112,7 @@ function FileUploadStatus({ className, children, pendingLabel = "Waiting to uplo
 	return /* @__PURE__ */ jsx("output", {
 		"data-slot": "file-upload-status",
 		"aria-live": "polite",
-		className: cn("text-gdt-xs leading-snug text-fg-secondary", "group-data-[state=complete]/file-upload:text-status-success group-data-[state=error]/file-upload:text-status-danger", className),
+		className: cn("text-gdt-xs leading-snug text-fg-secondary transition-[background-color,border-color,color] duration-[var(--duration-motion-press)] ease-gdt-out", "group-data-[state=complete]/file-upload:text-status-success group-data-[state=error]/file-upload:text-status-danger", className),
 		...props,
 		children: content
 	});

package/dist/infinite-scroll.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+//#region src/infinite-scroll.d.ts
+interface InfiniteScrollState {
+  /** Initial page load state, usually from useInfiniteQuery. */
+  isLoading: boolean;
+  /** Whether the flattened list has no items. */
+  isEmpty: boolean;
+  error?: Error | null;
+  hasNextPage: boolean | undefined;
+  isFetchingNextPage: boolean;
+  fetchNextPage: () => unknown;
+}
+declare function useInfiniteScrollSentinel({ hasNextPage, isFetchingNextPage, fetchNextPage, rootMargin }: Pick<InfiniteScrollState, "hasNextPage" | "isFetchingNextPage" | "fetchNextPage"> & {
+  rootMargin?: string;
+}): import("react").RefCallback<HTMLDivElement | null>;
+declare function InfiniteScroll({ children, isLoading, isEmpty, error, hasNextPage, isFetchingNextPage, fetchNextPage }: InfiniteScrollState & {
+  children: ReactNode;
+}): import("react").JSX.Element;
+declare function InfiniteScrollLoading({ children }: {
+  children?: ReactNode;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
+declare function InfiniteScrollContent({ children }: {
+  children: ReactNode;
+}): ReactNode;
+declare function InfiniteScrollEmpty({ children }: {
+  children: ReactNode;
+}): ReactNode;
+declare function InfiniteScrollError({ children }: {
+  children?: ReactNode;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
+declare function InfiniteScrollEnd({ children }: {
+  children: ReactNode;
+}): ReactNode;
+declare function InfiniteScrollSentinel({ rootMargin, className }: {
+  /** Distance from the viewport at which the next fetch triggers. */
+  rootMargin?: string;
+  className?: string;
+}): import("react").JSX.Element | null;
+//#endregion
+export { InfiniteScroll, InfiniteScrollContent, InfiniteScrollEmpty, InfiniteScrollEnd, InfiniteScrollError, InfiniteScrollLoading, InfiniteScrollSentinel, type InfiniteScrollState, useInfiniteScrollSentinel };

package/dist/infinite-scroll.js

@@ -0,0 +1,125 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Loader2 } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+//#region src/lib/use-intersection.ts
+function useIntersection(options) {
+	const [entry, setEntry] = useState(null);
+	const observer = useRef(null);
+	return {
+		ref: useCallback((element) => {
+			if (observer.current) {
+				observer.current.disconnect();
+				observer.current = null;
+			}
+			if (element === null) {
+				setEntry(null);
+				return;
+			}
+			if (typeof IntersectionObserver === "undefined") {
+				setEntry(null);
+				return;
+			}
+			observer.current = new IntersectionObserver(([_entry]) => {
+				setEntry(_entry ?? null);
+			}, options);
+			observer.current.observe(element);
+		}, [options]),
+		entry
+	};
+}
+//#endregion
+//#region src/infinite-scroll.tsx
+const InfiniteScrollContext = createContext(null);
+function useInfiniteScrollContext(consumer) {
+	const context = useContext(InfiniteScrollContext);
+	if (!context) throw new Error(`${consumer} must be used within <InfiniteScroll>`);
+	return context;
+}
+function useInfiniteScrollSentinel({ hasNextPage, isFetchingNextPage, fetchNextPage, rootMargin = "200px" }) {
+	const { ref, entry } = useIntersection(useMemo(() => ({ rootMargin }), [rootMargin]));
+	useEffect(() => {
+		if (entry?.isIntersecting && hasNextPage && !isFetchingNextPage) fetchNextPage();
+	}, [
+		entry?.isIntersecting,
+		hasNextPage,
+		isFetchingNextPage,
+		fetchNextPage
+	]);
+	return ref;
+}
+function InfiniteScroll({ children, isLoading, isEmpty, error, hasNextPage, isFetchingNextPage, fetchNextPage }) {
+	const value = useMemo(() => ({
+		isLoading,
+		isEmpty,
+		error,
+		hasNextPage,
+		isFetchingNextPage,
+		fetchNextPage
+	}), [
+		isLoading,
+		isEmpty,
+		error,
+		hasNextPage,
+		isFetchingNextPage,
+		fetchNextPage
+	]);
+	return /* @__PURE__ */ jsx(InfiniteScrollContext.Provider, {
+		value,
+		children
+	});
+}
+function DefaultLoader({ label }) {
+	return /* @__PURE__ */ jsxs("output", {
+		"aria-live": "polite",
+		className: "flex items-center justify-center gap-2 px-4 py-6 text-fg-secondary text-gdt-sm",
+		children: [/* @__PURE__ */ jsx(Loader2, { className: "animate-spin motion-reduce:animate-none" }), /* @__PURE__ */ jsx("span", { children: label })]
+	});
+}
+function InfiniteScrollLoading({ children }) {
+	const { isLoading, isFetchingNextPage } = useInfiniteScrollContext("InfiniteScrollLoading");
+	if (!isLoading && !isFetchingNextPage) return null;
+	return children ?? /* @__PURE__ */ jsx(DefaultLoader, { label: isFetchingNextPage ? "Loading more..." : "Loading..." });
+}
+function InfiniteScrollContent({ children }) {
+	const { isLoading, isEmpty } = useInfiniteScrollContext("InfiniteScrollContent");
+	if (isLoading || isEmpty) return null;
+	return children;
+}
+function InfiniteScrollEmpty({ children }) {
+	const { isLoading, isEmpty, error } = useInfiniteScrollContext("InfiniteScrollEmpty");
+	if (isLoading || error || !isEmpty) return null;
+	return children;
+}
+function InfiniteScrollError({ children }) {
+	const { error } = useInfiniteScrollContext("InfiniteScrollError");
+	if (!error) return null;
+	return children ?? /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		className: "px-4 py-4 text-center text-fg-danger text-gdt-sm",
+		children: error.message || "Something went wrong while loading more items."
+	});
+}
+function InfiniteScrollEnd({ children }) {
+	const { isLoading, isEmpty, hasNextPage, error } = useInfiniteScrollContext("InfiniteScrollEnd");
+	if (isLoading || isEmpty || hasNextPage || error) return null;
+	return children;
+}
+function InfiniteScrollSentinel({ rootMargin, className }) {
+	const { hasNextPage, isFetchingNextPage, fetchNextPage } = useInfiniteScrollContext("InfiniteScrollSentinel");
+	const ref = useInfiniteScrollSentinel({
+		hasNextPage,
+		isFetchingNextPage,
+		fetchNextPage,
+		rootMargin
+	});
+	if (!hasNextPage) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"aria-hidden": "true",
+		className: cn("h-px", className)
+	});
+}
+//#endregion
+export { InfiniteScroll, InfiniteScrollContent, InfiniteScrollEmpty, InfiniteScrollEnd, InfiniteScrollError, InfiniteScrollLoading, InfiniteScrollSentinel, useInfiniteScrollSentinel };

package/dist/infotip.js

@@ -29,7 +29,7 @@ function InfotipContent({ className, container, side = "top", sideOffset = 6, al
 			className: "isolate z-50",
 			children: /* @__PURE__ */ jsxs(Popover.Popup, {
 				"data-slot": "infotip-content",
-				className: cn("z-50 relative inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-[6px] border border-line bg-surface-overlay px-3 py-2 text-gdt-sm font-medium text-fg-primary shadow-2 duration-100 has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+				className: cn("z-50 relative inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-[6px] border border-line bg-surface-overlay px-3 py-2 text-gdt-sm font-medium text-fg-primary shadow-2 transition-[opacity,scale,translate] duration-[var(--duration-motion-tooltip)] ease-gdt-out has-data-[slot=kbd]:pr-1.5 data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95 data-[side=bottom]:data-starting-style:translate-y-2 data-[side=bottom]:data-ending-style:translate-y-2 data-[side=top]:data-starting-style:-translate-y-2 data-[side=top]:data-ending-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=left]:data-ending-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=right]:data-ending-style:-translate-x-2 data-[side=inline-end]:data-starting-style:-translate-x-2 data-[side=inline-end]:data-ending-style:-translate-x-2 data-[side=inline-start]:data-starting-style:translate-x-2 data-[side=inline-start]:data-ending-style:translate-x-2 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100 motion-reduce:data-[side=bottom]:data-starting-style:translate-y-0 motion-reduce:data-[side=bottom]:data-ending-style:translate-y-0 motion-reduce:data-[side=top]:data-starting-style:translate-y-0 motion-reduce:data-[side=top]:data-ending-style:translate-y-0 motion-reduce:data-[side=left]:data-starting-style:translate-x-0 motion-reduce:data-[side=left]:data-ending-style:translate-x-0 motion-reduce:data-[side=right]:data-starting-style:translate-x-0 motion-reduce:data-[side=right]:data-ending-style:translate-x-0 motion-reduce:data-[side=inline-end]:data-starting-style:translate-x-0 motion-reduce:data-[side=inline-end]:data-ending-style:translate-x-0 motion-reduce:data-[side=inline-start]:data-starting-style:translate-x-0 motion-reduce:data-[side=inline-start]:data-ending-style:translate-x-0 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm", className),
 				...props,
 				children: [children, showArrow ? /* @__PURE__ */ jsx(Popover.Arrow, { className: "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-surface-overlay before:border before:border-line before:[transform:translate(-50%,50%)_rotate(45deg)]" }) : null]
 			})

package/dist/input-group.d.ts

@@ -1,4 +1,4 @@
-import { t as Button } from "./button-BZIeyUw6.js";
+import { t as Button } from "./button-DW5OijoR.js";
 import { n as InputSize } from "./input-CfoEJ8A6.js";
 import { n as TextareaSize } from "./textarea-IS_D8pXf.js";
 import { VariantProps } from "class-variance-authority";

package/dist/media-player.js

@@ -1,7 +1,7 @@
 "use client";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./dropdown-menu.js";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
 import { Captions, CaptionsOff, Maximize, Minimize, Pause, PictureInPicture2, Play, RefreshCcw, Repeat2, RotateCcw, RotateCw, Settings, TriangleAlert, Volume1, Volume2, VolumeX } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
@@ -83,9 +83,13 @@ function MediaPlayer({ mediaStore, ...props }) {
 	const audio = props.audio ?? (hasAudioChild(props.children) ? true : void 0);
 	return /* @__PURE__ */ jsx(MediaProvider, {
 		mediaStore,
-		children: /* @__PURE__ */ jsx(MediaPlayerRoot, {
-			...props,
-			audio
+		children: /* @__PURE__ */ jsx(TooltipProvider, {
+			delay: 300,
+			timeout: 400,
+			children: /* @__PURE__ */ jsx(MediaPlayerRoot, {
+				...props,
+				audio
+			})
 		})
 	});
 }
@@ -311,7 +315,7 @@ function MediaControlButton({ className, shortcut, tooltip, ...props }) {
 	});
 	if (!tooltip) return button;
 	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-		delay: 300,
+		delay: void 0,
 		render: button
 	}), /* @__PURE__ */ jsxs(TooltipContent, {
 		className: "border-line-subtle px-2.5 py-1.5 text-gdt-xs font-bold",
@@ -411,6 +415,7 @@ function MediaPlayerVolume({ className, disabled, expandable = false, onClick, r
 			...props,
 			children: /* @__PURE__ */ jsx(Icon, {})
 		}), /* @__PURE__ */ jsx(Slider.Root, {
+			thumbAlignment: "edge",
 			"data-slot": "media-player-volume-slider",
 			className: cn("flex h-8 w-20 min-w-20 touch-none items-center", resolvedDisabled && "pointer-events-none opacity-45", expandable && "pointer-events-none opacity-0 transition-opacity group-hover/volume:pointer-events-auto group-hover/volume:opacity-100 group-focus-within/volume:pointer-events-auto group-focus-within/volume:opacity-100", rangeClassName),
 			disabled: resolvedDisabled,
@@ -660,6 +665,7 @@ function MediaPlayerSeek({ className, disabled, onValueChange, "aria-label": ari
 		end: segmentBounds[index + 1] ?? start
 	}));
 	return /* @__PURE__ */ jsxs(Slider.Root, {
+		thumbAlignment: "edge",
 		"data-slot": "media-player-seek",
 		className: cn("relative flex h-8 w-full min-w-0 touch-none items-center", resolvedDisabled && "pointer-events-none opacity-45", className),
 		disabled: resolvedDisabled,
@@ -758,15 +764,16 @@ function MediaPlayerSeek({ className, disabled, onValueChange, "aria-label": ari
 							}
 						}, `${bufferStart}-${bufferEnd}`) : null), /* @__PURE__ */ jsx("span", {
 							"data-slot": "media-player-seek-progress",
-							className: cn("absolute inset-y-0 left-0 bg-surface-brand", dragValue === null && "transition-[width] duration-200 ease-linear"),
-							style: { width: `${playedWidth}%` }
+							"data-dragging": dragValue !== null || void 0,
+							className: "absolute inset-y-0 left-0 w-full origin-left bg-surface-brand transition-transform duration-200 ease-linear data-[dragging=true]:transition-none",
+							style: { transform: `scaleX(${playedWidth / 100})` }
 						})]
 					}, start);
 				})
 			}), /* @__PURE__ */ jsx(Slider.Thumb, {
 				getAriaLabel: () => ariaLabel ?? "Media timeline",
 				getAriaValueText: (_formatted, value) => `${formatTime(value)} of ${formatTime(max)}`,
-				className: cn("size-3.5 -translate-x-1/2 rounded-full bg-surface-overlay shadow-2 ring-2 ring-surface-brand outline-none", "transition-[inset-inline-start,transform] duration-200 ease-linear data-[dragging]:scale-125 data-[dragging]:transition-transform", "focus-visible:[filter:drop-shadow(0_0_0.25rem_var(--color-line-focus))]")
+				className: cn("size-3.5 -translate-x-1/2 rounded-full bg-surface-overlay shadow-2 ring-2 ring-surface-brand outline-none", "transition-[scale] duration-[var(--duration-motion-press)] ease-gdt-out data-[dragging]:scale-125 motion-reduce:data-[dragging]:scale-100 data-[dragging]:transition-none", "focus-visible:[filter:drop-shadow(0_0_0.25rem_var(--color-line-focus))]")
 			})]
 		})]
 	});