@giddaa-housing/ui 1.2.0 → 2.1.0

package/dist/combobox.d.ts

@@ -1,6 +1,7 @@
 import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
 import * as React from "react";
 import { Combobox as Combobox$1 } from "@base-ui/react";
+import { Virtualizer } from "@tanstack/react-virtual";
 //#region src/combobox.d.ts
 type ComboboxSize = ComponentSize;
 declare function Combobox<Value, Multiple extends boolean | undefined = false>({ multiple, children, size, ...props }: Combobox$1.Root.Props<Value, Multiple> & {
@@ -26,5 +27,51 @@ declare function ComboboxChip({ className, children, showRemove, ...props }: Com
 }): React.JSX.Element;
 declare function ComboboxChipsInput({ className, ...props }: Combobox$1.Input.Props): React.JSX.Element;
 declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
+type ComboboxVirtualizer = Virtualizer<HTMLDivElement, Element>;
+type ComboboxHighlightDetails = {
+  reason: "keyboard" | "pointer" | "none";
+  index: number;
+};
+/**
+ * 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.
+ */
+declare function useComboboxVirtualizer(): {
+  virtualizerRef: React.RefObject<ComboboxVirtualizer | null>;
+  onItemHighlighted: (item: unknown, { reason, index }: ComboboxHighlightDetails) => void;
+};
+type ComboboxVirtualItemProps = {
+  index: number;
+  "data-index": number;
+  "aria-setsize": number;
+  "aria-posinset": number;
+  style: React.CSSProperties;
+};
+declare function ComboboxVirtualizedList<Item>({ virtualizerRef, estimateSize, overscan, paddingStart, paddingEnd, maxHeight, className, children }: {
+  /** Ref returned by {@link useComboboxVirtualizer}. */
+  virtualizerRef: React.RefObject<ComboboxVirtualizer | null>;
+  /**
+   * Fixed row height in px (or a per-index function). Rows render at this
+   * exact height, so match it to the item size variant (roughly sm: 32,
+   * md: 40, lg: 44). Defaults to 40.
+   */
+  estimateSize?: number | ((index: number) => number);
+  overscan?: number;
+  paddingStart?: number;
+  paddingEnd?: number;
+  /**
+   * Fixed max height of the scroll viewport (px number or CSS length).
+   * Must be a stable value — do NOT wire this to `--available-height` or any
+   * value the popup positioner writes, or react-virtual's resize observer and
+   * the positioner will feed back into each other and freeze the page on open.
+   * Defaults to `"22rem"`.
+   */
+  maxHeight?: number | string;
+  className?: string;
+  /** Render a `ComboboxItem`, spreading the provided props onto it. */
+  children: (item: Item, props: ComboboxVirtualItemProps) => React.ReactNode;
+}): React.JSX.Element | null;
 //#endregion
-export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, type ComboboxSize, ComboboxTrigger, ComboboxValue, useComboboxAnchor };
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, type ComboboxSize, ComboboxTrigger, ComboboxValue, type ComboboxVirtualItemProps, ComboboxVirtualizedList, type ComboboxVirtualizer, useComboboxAnchor, useComboboxVirtualizer };

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 }) {
@@ -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/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-nesting.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+//#region src/dialog-nesting.d.ts
+declare function DialogNestingProvider({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** Depth of the current dialog (1 = top-level, 2+ = nested). */
+declare function useDialogNestingDepth(): number;
+//#endregion
+export { DialogNestingProvider, useDialogNestingDepth };

package/dist/dialog-nesting.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+//#region src/dialog-nesting.tsx
+/**
+* Tracks how deep a Dialog/Sheet is nested. Sheet and Dialog share the same
+* Base UI primitive, so they share this one context too — a Dialog opened
+* inside a Sheet (or vice-versa) counts as nested.
+*
+* Depth is 0 outside any dialog, 1 for a top-level dialog, 2+ for nested ones.
+* Overlays use `depth > 1` to render lighter (so the parent shows through),
+* while the base overlay keeps the full page-hiding dim.
+*/
+const DialogNestingContext = createContext(0);
+function DialogNestingProvider({ children }) {
+	const depth = useContext(DialogNestingContext);
+	return /* @__PURE__ */ jsx(DialogNestingContext.Provider, {
+		value: depth + 1,
+		children
+	});
+}
+/** Depth of the current dialog (1 = top-level, 2+ = nested). */
+function useDialogNestingDepth() {
+	return useContext(DialogNestingContext);
+}
+//#endregion
+export { DialogNestingProvider, useDialogNestingDepth };

package/dist/dialog.js

@@ -2,16 +2,17 @@
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
 import { Button } from "./button.js";
+import { DialogNestingProvider, useDialogNestingDepth } from "./dialog-nesting.js";
 import { XIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 //#region src/dialog.tsx
 function Dialog({ ...props }) {
-	return /* @__PURE__ */ jsx(Dialog$1.Root, {
+	return /* @__PURE__ */ jsx(DialogNestingProvider, { children: /* @__PURE__ */ jsx(Dialog$1.Root, {
 		"data-slot": "dialog",
 		...props
-	});
+	}) });
 }
 function DialogTrigger({ ...props }) {
 	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
@@ -32,13 +33,16 @@ function DialogClose({ ...props }) {
 	});
 }
 function DialogOverlay({ className, ...props }) {
+	const nested = useDialogNestingDepth() > 1;
 	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
+		forceRender: true,
 		"data-slot": "dialog-overlay",
-		className: cn("fixed inset-0 z-50 bg-black/55 transition-opacity duration-150 data-closed:opacity-0 data-open:opacity-100 supports-backdrop-filter:backdrop-blur-xl", className),
+		"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),
 		...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", {
+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]", {
 	variants: { size: {
 		sm: "sm:w-90 sm:[--dialog-padding:1.5rem]",
 		md: "sm:w-105 sm:[--dialog-padding:1.5rem]",
@@ -78,7 +82,7 @@ function DialogContent({ className, children, size, showCloseButton = true, ...p
 				"data-slot": "dialog-close",
 				render: /* @__PURE__ */ jsxs(Button, {
 					variant: "tertiary",
-					className: "absolute -top-10 right-0 z-10",
+					className: "absolute -top-10 right-0 z-10 group-data-[nested-dialog-open]/dialog-content:hidden",
 					size: "icon-sm",
 					children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
 						className: "sr-only",

package/dist/file-upload.d.ts

@@ -0,0 +1,43 @@
+import { CircularProgressProps, ProgressProps } from "./progress.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/file-upload.d.ts
+type FileUploadState = "pending" | "uploading" | "complete" | "error";
+type FileUploadContextValue = {
+  state: FileUploadState;
+  value: number;
+};
+declare function useFileUpload(): FileUploadContextValue;
+type FileUploadProps = ComponentProps<"div"> & {
+  state?: FileUploadState;
+  value: number;
+};
+declare function FileUpload({ className, state, value, "aria-busy": ariaBusy, ...props }: FileUploadProps): import("react").JSX.Element;
+declare function FileUploadPreview({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function FileUploadImage({ className, alt, ...props }: ComponentProps<"img">): import("react").JSX.Element;
+declare function FileUploadOverlay({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function FileUploadPreviewAction({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function FileUploadIcon({ className, children, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function FileUploadContent({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function FileUploadHeader({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function FileUploadName({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+declare function FileUploadMeta({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+type FileUploadStatusProps = Omit<ComponentProps<"output">, "children"> & {
+  children?: ReactNode | ((context: FileUploadContextValue) => ReactNode);
+  pendingLabel?: ReactNode;
+  uploadingLabel?: ReactNode;
+  completeLabel?: ReactNode;
+  errorLabel?: ReactNode;
+};
+declare function FileUploadStatus({ className, children, pendingLabel, uploadingLabel, completeLabel, errorLabel, ...props }: FileUploadStatusProps): import("react").JSX.Element;
+type FileUploadProgressProps = Omit<ProgressProps, "value"> & {
+  showValue?: boolean;
+};
+declare function FileUploadProgress({ className, children, showValue, "aria-label": ariaLabel, ...props }: FileUploadProgressProps): import("react").JSX.Element;
+type FileUploadCircularProgressProps = Omit<CircularProgressProps, "value">;
+declare function FileUploadCircularProgress({ className, labelOverlay, "aria-label": ariaLabel, ...props }: FileUploadCircularProgressProps): import("react").JSX.Element;
+type FileUploadCancelProps = ComponentProps<"button"> & {
+  variant?: "ghost" | "surface";
+};
+declare function FileUploadCancel({ className, type, children, variant, "aria-label": ariaLabel, ...props }: FileUploadCancelProps): import("react").JSX.Element;
+//#endregion
+export { FileUpload, FileUploadCancel, type FileUploadCancelProps, FileUploadCircularProgress, type FileUploadCircularProgressProps, FileUploadContent, type FileUploadContextValue, FileUploadHeader, FileUploadIcon, FileUploadImage, FileUploadMeta, FileUploadName, FileUploadOverlay, FileUploadPreview, FileUploadPreviewAction, FileUploadProgress, type FileUploadProgressProps, type FileUploadProps, type FileUploadState, FileUploadStatus, type FileUploadStatusProps, useFileUpload };

package/dist/file-upload.js

@@ -0,0 +1,154 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { CircularProgress, Progress, ProgressValue } from "./progress.js";
+import { File, X } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+//#region src/file-upload.tsx
+const FileUploadContext = createContext(null);
+function normalizeProgress(value) {
+	if (!Number.isFinite(value)) return 0;
+	return Math.min(100, Math.max(0, Math.round(value)));
+}
+function useFileUpload() {
+	const context = useContext(FileUploadContext);
+	if (!context) throw new Error("FileUpload compound components must be rendered inside <FileUpload>.");
+	return context;
+}
+function FileUpload({ className, state = "uploading", value, "aria-busy": ariaBusy, ...props }) {
+	const progress = normalizeProgress(value);
+	return /* @__PURE__ */ jsx(FileUploadContext.Provider, {
+		value: {
+			state,
+			value: progress
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "file-upload",
+			"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),
+			...props
+		})
+	});
+}
+function FileUploadPreview({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-preview",
+		className: cn("relative flex size-20 shrink-0 items-center justify-center rounded-lg bg-surface-raised", className),
+		...props
+	});
+}
+function FileUploadImage({ className, alt = "", ...props }) {
+	return /* @__PURE__ */ jsx("img", {
+		"data-slot": "file-upload-image",
+		className: cn("size-full rounded-[inherit] object-cover", className),
+		alt,
+		...props
+	});
+}
+function FileUploadOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-overlay",
+		className: cn("absolute inset-0 flex items-center justify-center rounded-[inherit] bg-black/45", className),
+		...props
+	});
+}
+function FileUploadPreviewAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-preview-action",
+		className: cn("absolute -top-2 -right-2 z-10", 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),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(File, {
+			"aria-hidden": "true",
+			className: "size-5"
+		})
+	});
+}
+function FileUploadContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-content",
+		className: cn("min-w-0 flex-1", className),
+		...props
+	});
+}
+function FileUploadHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-header",
+		className: cn("flex min-w-0 items-center gap-2", className),
+		...props
+	});
+}
+function FileUploadName({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "file-upload-name",
+		className: cn("min-w-0 flex-1 truncate text-gdt-sm font-semibold leading-snug text-fg-primary", className),
+		...props
+	});
+}
+function FileUploadMeta({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "file-upload-meta",
+		className: cn("mt-0.5 text-gdt-xs leading-snug text-fg-secondary", className),
+		...props
+	});
+}
+function FileUploadStatus({ className, children, pendingLabel = "Waiting to upload", uploadingLabel, completeLabel = "Upload complete", errorLabel = "Upload failed", ...props }) {
+	const context = useFileUpload();
+	const defaultLabels = {
+		pending: pendingLabel,
+		uploading: uploadingLabel ?? `${context.value}% uploaded`,
+		complete: completeLabel,
+		error: errorLabel
+	};
+	const content = typeof children === "function" ? children(context) : children ?? defaultLabels[context.state];
+	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),
+		...props,
+		children: content
+	});
+}
+function FileUploadProgress({ className, children, showValue = true, "aria-label": ariaLabel = "Upload progress", ...props }) {
+	const { state, value } = useFileUpload();
+	return /* @__PURE__ */ jsx(Progress, {
+		value,
+		"aria-label": ariaLabel,
+		className: cn("mt-2", state === "complete" && "[&_[data-slot=progress-indicator]]:bg-status-success", state === "error" && "[&_[data-slot=progress-indicator]]:bg-status-danger", className),
+		...props,
+		children: children ?? (showValue ? /* @__PURE__ */ jsx(ProgressValue, {}) : null)
+	});
+}
+function FileUploadCircularProgress({ className, labelOverlay = true, "aria-label": ariaLabel = "Upload progress", ...props }) {
+	const { state, value } = useFileUpload();
+	return /* @__PURE__ */ jsx(CircularProgress, {
+		value,
+		labelOverlay,
+		"aria-label": ariaLabel,
+		className: cn("text-white [&_circle:first-child]:text-white/35 [&_circle:last-child]:text-white", state === "complete" && "[&_circle:last-child]:text-status-success", state === "error" && "[&_circle:last-child]:text-status-danger", className),
+		...props
+	});
+}
+function FileUploadCancel({ className, type = "button", children, variant = "ghost", "aria-label": ariaLabel = "Cancel upload", ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		"data-slot": "file-upload-cancel",
+		type,
+		"aria-label": ariaLabel,
+		className: cn("inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-full border border-transparent bg-transparent p-0 text-fg-secondary", "transition-[background-color,border-color,color,box-shadow] hover:bg-surface-raised hover:text-fg-primary focus-visible:border-line-focus focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:opacity-50", variant === "surface" && "border-line bg-surface-overlay shadow-sm hover:bg-surface-raised", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(X, {
+			"aria-hidden": "true",
+			className: "size-4"
+		})
+	});
+}
+//#endregion
+export { FileUpload, FileUploadCancel, FileUploadCircularProgress, FileUploadContent, FileUploadHeader, FileUploadIcon, FileUploadImage, FileUploadMeta, FileUploadName, FileUploadOverlay, FileUploadPreview, FileUploadPreviewAction, FileUploadProgress, FileUploadStatus, useFileUpload };

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 };