@rebasepro/ui 0.13.1-canary.gef9608c → 0.14.0

package/README.md

@@ -112,7 +112,9 @@ Tailwind class-string constants for consistent styling:
 
 ### Icons
 
-Re-exports ~100 individual lucide-react icon components (e.g. `ArrowRightIcon`, `SearchIcon`, `PlusIcon`), the full `lucideIcons` map, the `Icon` component, `GitHubIcon`, `HandleIcon`, `iconKeys`, and `coolIconKeys`.
+Re-exports ~100 individual lucide-react icon components (e.g. `ArrowRightIcon`, `SearchIcon`, `PlusIcon`), the `Icon` component, `GitHubIcon`, `HandleIcon`, `iconKeys`, and `coolIconKeys`.
+
+To render an icon whose name is only known at runtime, use `<LucideIconByName name="ShoppingCart" />` (or `loadLucideIcons()` / `useLucideIcons()` for the map itself). The full `icons` map is still re-exported as `lucideIcons`, but reach for it last: it holds a reference to every icon in the library, so importing it pulls the whole 822 kB set into whatever chunk you import it from, and no tree-shaking helps. Nothing in this package imports it, so it costs nothing unless you ask for it.
 
 ## Quick Start
 

package/dist/components/DateTimeField.d.ts

@@ -20,5 +20,10 @@ export type DateTimeFieldProps = {
      * If not provided, uses the user's local timezone.
      */
     timezone?: string;
+    /**
+     * Names the control when there is no `label` — e.g. when the surrounding
+     * form draws the label itself and passes `label={undefined}`.
+     */
+    "aria-label"?: string;
 };
 export declare const DateTimeField: React.FC<DateTimeFieldProps>;

package/dist/components/VirtualTable/VirtualTableProps.d.ts

@@ -225,6 +225,16 @@ export type OnVirtualTableColumnResizeParams = {
     column: VirtualTableColumn;
 };
 /**
+ * The filter operators this table can express.
+ *
+ * A deliberate copy of `WhereFilterOp` in `@rebasepro/types`, not an import:
+ * `@rebasepro/ui` has no dependency on the core types and is meant to stay
+ * usable on its own. The cost is that two published packages export the same
+ * name, so the two must be kept identical by hand —
+ * `packages/types/test/filter-operators-duplication.test.ts` fails if they
+ * diverge, because a table that cannot express an operator the query layer
+ * supports is a silent gap: the filter simply is not offered.
+ *
  * @see Table
  * @group Components
  */
@@ -241,8 +251,13 @@ export type VirtualTableSort = "asc" | "desc" | undefined;
  */
 export type VirtualTableFilterValues<Key extends string> = FilterValues<Key>;
 /**
- * Filter conditions in a `Query.where()` clause are specified using the
- * strings `<`, `<=`, `==`, `>=`, `>`, `array-contains`, `in`, and `array-contains-any`.
+ * Filter conditions in a `Query.where()` clause, named by {@link WhereFilterOp}.
+ *
+ * The list is not repeated here: this comment used to name eight operators when
+ * the type had sixteen, having been written before the SQL pattern and null
+ * checks (`like`, `ilike`, `not-like`, `not-ilike`, `is-null`, `is-not-null`)
+ * were added. A prose copy of a union drifts from it silently.
+ *
  * @see Table
  * @group Models
  */

package/dist/icons/LucideIconByName.d.ts

@@ -0,0 +1,62 @@
+import React from "react";
+import type { LucideIcon } from "lucide-react";
+/**
+ * Rendering a Lucide icon chosen at runtime, without shipping all 1,600 of them
+ * on the login screen.
+ *
+ * `@rebasepro/ui` used to re-export lucide's whole `icons` map:
+ *
+ *     export { icons as lucideIcons } from "lucide-react";
+ *
+ * That map is an object literal holding a reference to every icon component in
+ * the library, so a tree-shaker cannot drop a single one — reaching the map
+ * reaches all of them. Two callers reached it, both by name lookup: `getIcon`
+ * in `@rebasepro/app` (a collection's `icon: "ShoppingCart"`) and the admin's
+ * icon picker. That put 822 kB of SVG components into the entry chunk's static
+ * graph, `modulepreload`ed before authentication.
+ *
+ * The ~130 icons the product's own chrome uses are still plain named imports
+ * from `lucide-react`, which tree-shake to just those. Only the by-name lookup
+ * goes through here, and it pays for the map once, asynchronously, the first
+ * time a runtime-chosen icon is rendered.
+ */
+type IconsMap = Record<string, LucideIcon | undefined>;
+/**
+ * The full lucide icon map, fetched on first use and cached for the session.
+ *
+ * Prefer {@link LucideIconByName}. This is here for callers that need to know
+ * whether a name resolves, such as the icon picker's grid.
+ */
+export declare function loadLucideIcons(): Promise<IconsMap>;
+/** The map if it has already been fetched, otherwise `undefined`. Never fetches. */
+export declare function getLoadedLucideIcons(): IconsMap | undefined;
+/**
+ * Subscribe to the icon map.
+ *
+ * Returns it synchronously once loaded — including on the very first render of
+ * every icon after the first one anywhere, which is what stops a page full of
+ * icons from each flashing its placeholder.
+ */
+export declare function useLucideIcons(): IconsMap | undefined;
+/**
+ * The same resolution order the two call sites used against the eager map:
+ * exact name, then PascalCase, then `CircleAlert` as the visible "unknown icon".
+ */
+export declare function resolveLucideIcon(icons: IconsMap, name: string): LucideIcon | undefined;
+export type LucideIconByNameProps = {
+    /**
+     * A PascalCase lucide icon name, e.g. `"ShoppingCart"`. Whether a name
+     * exists can be answered ahead of the fetch with `iconKeys`, which is a
+     * plain string array and costs nothing.
+     */
+    name: string;
+    size?: number;
+    className?: string;
+    /** Rendered while the icon set is in flight. Defaults to a blank box of `size`. */
+    fallback?: React.ReactNode;
+};
+/**
+ * An icon named at runtime. Renders `fallback` until the icon set arrives.
+ */
+export declare const LucideIconByName: React.MemoExoticComponent<({ name, size, className, fallback }: LucideIconByNameProps) => React.JSX.Element>;
+export {};

package/dist/icons/index.d.ts

@@ -4,5 +4,32 @@ export * from "./Icon";
 export * from "./GitHubIcon";
 export * from "./HandleIcon";
 export type { LucideProps, LucideIcon } from "lucide-react";
+export * from "./LucideIconByName";
+/**
+ * lucide's full `icons` map, keyed by PascalCase name.
+ *
+ * Read the cost before reaching for it. The map holds a reference to every
+ * icon in the library, so importing it pulls all ~1,750 into whatever chunk
+ * you import it from — measured at **822 kB uncompressed**. There is no
+ * tree-shaking that helps: the object literal names them all.
+ *
+ * It used to be reached by this package's own navigation chrome, which put
+ * that 822 kB in the entry chunk, modulepreloaded on the login screen, for
+ * every visitor of every Rebase admin panel. Those call sites now use
+ * {@link LucideIconByName}, so the weight is no longer anybody's by default —
+ * it is yours only if you import this binding.
+ *
+ * Prefer, in order:
+ *
+ * - {@link LucideIconByName} — renders by name, fetches the set on first use;
+ * - {@link iconKeys} — a plain string array, if you only need to know whether
+ *   a name exists (costs nothing);
+ * - {@link loadLucideIcons} — the same map, `await`ed, so it lands in an async
+ *   chunk instead of your entry;
+ * - this, when you genuinely need the whole map synchronously at module scope.
+ *
+ * @see LucideIconByName
+ * @see loadLucideIcons
+ */
 export { icons as lucideIcons } from "lucide-react";
-export { AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownIcon, ArrowDownToLineIcon, ArrowLeftIcon, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpToLineIcon, BoldIcon, BookOpenIcon, CalendarIcon, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, CircleUserIcon, CodeIcon, ColumnsIcon, CopyIcon, DatabaseIcon, DollarSignIcon, DownloadIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FilterIcon, FilterXIcon, FlagIcon, FolderIcon, FolderKanbanIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GlobeIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, ImageIcon, ImageOffIcon, InfoIcon, ItalicIcon, KanbanIcon, KeyIcon, KeyRoundIcon, LanguagesIcon, LayoutGridIcon, LinkIcon, Link2Icon, Unlink2Icon, ListIcon, LockIcon, ListOrderedIcon, ListPlusIcon, ListTodoIcon, LoaderIcon, LogOutIcon, MailIcon, Maximize2Icon, MenuIcon, MessageCircleIcon, MinusCircleIcon, MinusIcon, MoonIcon, MoreVerticalIcon, Music2Icon, PanelLeftIcon, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, PlayIcon, PlusIcon, QuoteIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, Rows3Icon, SaveIcon, SearchIcon, SendIcon, SettingsIcon, ShieldIcon, ShoppingCartIcon, SlidersHorizontalIcon, SquareIcon, StarIcon, StickyNoteIcon, StrikethroughIcon, SunIcon, SunMoonIcon, TableIcon, TagIcon, TerminalIcon, TextIcon, Trash2Icon, TrendingUpIcon, TypeIcon, UnderlineIcon, UndoIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, UsersIcon, VideoIcon, VoteIcon, Wand2Icon, WrenchIcon, XCircleIcon, XIcon } from "lucide-react";
+export { AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownIcon, ArrowDownToLineIcon, ArrowLeftIcon, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpToLineIcon, BoldIcon, BookOpenIcon, CalendarIcon, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, CircleUserIcon, CodeIcon, ColumnsIcon, CopyIcon, DatabaseIcon, DollarSignIcon, DownloadIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FilterIcon, FilterXIcon, FlagIcon, FolderIcon, FolderKanbanIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GlobeIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, ImageIcon, ImageOffIcon, InfoIcon, ItalicIcon, KanbanIcon, KeyIcon, KeyRoundIcon, LanguagesIcon, LayoutGridIcon, LinkIcon, Link2Icon, Unlink2Icon, ListIcon, LockIcon, ListOrderedIcon, ListPlusIcon, ListTodoIcon, LoaderIcon, LogOutIcon, MailIcon, Maximize2Icon, MenuIcon, MessageCircleIcon, MinusCircleIcon, MinusIcon, MoonIcon, MoreVerticalIcon, Music2Icon, PanelLeftCloseIcon, PanelLeftIcon, PanelLeftOpenIcon, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, PlayIcon, PlusIcon, QuoteIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, Rows3Icon, SaveIcon, SearchIcon, SendIcon, SettingsIcon, ShieldIcon, ShoppingCartIcon, SlidersHorizontalIcon, SquareIcon, StarIcon, StickyNoteIcon, StrikethroughIcon, SunIcon, SunMoonIcon, TableIcon, TagIcon, TerminalIcon, TextIcon, Trash2Icon, TrendingUpIcon, TypeIcon, UnderlineIcon, UndoIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, UsersIcon, VideoIcon, VoteIcon, Wand2Icon, WrenchIcon, XCircleIcon, XIcon } from "lucide-react";

package/dist/index.es.js

@@ -5,7 +5,7 @@ import * as Collapsible from "@radix-ui/react-collapsible";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AlertCircleIcon, AlertCircleIcon as AlertCircleIcon$1, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownIcon, ArrowDownToLineIcon, ArrowLeftIcon, ArrowLeftIcon as ArrowLeftIcon$1, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpIcon as ArrowUpIcon$1, ArrowUpToLineIcon, BoldIcon, BookOpenIcon, CalendarIcon, CalendarIcon as CalendarIcon$1, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckIcon as CheckIcon$1, CheckSquareIcon, ChevronDownIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronLeftIcon, ChevronLeftIcon as ChevronLeftIcon$1, ChevronRightIcon, ChevronRightIcon as ChevronRightIcon$1, ChevronUpIcon, ChevronUpIcon as ChevronUpIcon$1, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, CircleUserIcon, CodeIcon, ColumnsIcon, CopyIcon, DatabaseIcon, DollarSignIcon, DownloadIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FilterIcon, FilterIcon as FilterIcon$1, FilterXIcon, FlagIcon, FolderIcon, FolderKanbanIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GlobeIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, ImageIcon, ImageIcon as ImageIcon$1, ImageOffIcon, InfoIcon, ItalicIcon, Kanban, KanbanIcon, KeyIcon, KeyRoundIcon, LanguagesIcon, LayoutGrid, LayoutGridIcon, LayoutList, Link2Icon, LinkIcon, ListIcon, ListOrderedIcon, ListPlusIcon, ListTodoIcon, LoaderIcon, LockIcon, LogOutIcon, MailIcon, Maximize2Icon, MenuIcon, MessageCircleIcon, MinusCircleIcon, MinusIcon, MinusIcon as MinusIcon$1, MoonIcon, MoreVerticalIcon, Music2Icon, PanelLeftIcon, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, PlayIcon, PlusIcon, QuoteIcon, RefreshCcwIcon, RefreshCwIcon, RefreshCwIcon as RefreshCwIcon$1, RepeatIcon, Rows3Icon, SaveIcon, SearchIcon, SearchIcon as SearchIcon$1, SendIcon, Settings2, SettingsIcon, ShieldAlertIcon, ShieldIcon, ShoppingCartIcon, SlidersHorizontalIcon, SquareIcon, StarIcon, StickyNoteIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Table2, TableIcon, TagIcon, TerminalIcon, TextIcon, Trash2Icon, TrendingUpIcon, TypeIcon, UnderlineIcon, UndoIcon, Unlink2Icon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, UsersIcon, VideoIcon, VoteIcon, Wand2Icon, WrenchIcon, XCircleIcon, XIcon, XIcon as XIcon$1, icons as lucideIcons } from "lucide-react";
+import { AlertCircleIcon, AlertCircleIcon as AlertCircleIcon$1, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownIcon, ArrowDownToLineIcon, ArrowLeftIcon, ArrowLeftIcon as ArrowLeftIcon$1, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpIcon as ArrowUpIcon$1, ArrowUpToLineIcon, BoldIcon, BookOpenIcon, CalendarIcon, CalendarIcon as CalendarIcon$1, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckIcon as CheckIcon$1, CheckSquareIcon, ChevronDownIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronLeftIcon, ChevronLeftIcon as ChevronLeftIcon$1, ChevronRightIcon, ChevronRightIcon as ChevronRightIcon$1, ChevronUpIcon, ChevronUpIcon as ChevronUpIcon$1, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, CircleUserIcon, CodeIcon, ColumnsIcon, CopyIcon, DatabaseIcon, DollarSignIcon, DownloadIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FilterIcon, FilterIcon as FilterIcon$1, FilterXIcon, FlagIcon, FolderIcon, FolderKanbanIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GlobeIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, ImageIcon, ImageIcon as ImageIcon$1, ImageOffIcon, InfoIcon, ItalicIcon, Kanban, KanbanIcon, KeyIcon, KeyRoundIcon, LanguagesIcon, LayoutGrid, LayoutGridIcon, LayoutList, Link2Icon, LinkIcon, ListIcon, ListOrderedIcon, ListPlusIcon, ListTodoIcon, LoaderIcon, LockIcon, LogOutIcon, MailIcon, Maximize2Icon, MenuIcon, MessageCircleIcon, MinusCircleIcon, MinusIcon, MinusIcon as MinusIcon$1, MoonIcon, MoreVerticalIcon, Music2Icon, PanelLeftCloseIcon, PanelLeftIcon, PanelLeftOpenIcon, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, PlayIcon, PlusIcon, QuoteIcon, RefreshCcwIcon, RefreshCwIcon, RefreshCwIcon as RefreshCwIcon$1, RepeatIcon, Rows3Icon, SaveIcon, SearchIcon, SearchIcon as SearchIcon$1, SendIcon, Settings2, SettingsIcon, ShieldAlertIcon, ShieldIcon, ShoppingCartIcon, SlidersHorizontalIcon, SquareIcon, StarIcon, StickyNoteIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Table2, TableIcon, TagIcon, TerminalIcon, TextIcon, Trash2Icon, TrendingUpIcon, TypeIcon, UnderlineIcon, UndoIcon, Unlink2Icon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, UsersIcon, VideoIcon, VoteIcon, Wand2Icon, WrenchIcon, XCircleIcon, XIcon, XIcon as XIcon$1, icons as lucideIcons } from "lucide-react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -2617,6 +2617,81 @@ function HandleIcon({ size = 24, color, className, onClick, style }) {
 	});
 }
 //#endregion
+//#region src/icons/LucideIconByName.tsx
+var loaded;
+var pending;
+/**
+* The full lucide icon map, fetched on first use and cached for the session.
+*
+* Prefer {@link LucideIconByName}. This is here for callers that need to know
+* whether a name resolves, such as the icon picker's grid.
+*/
+function loadLucideIcons() {
+	if (loaded) return Promise.resolve(loaded);
+	pending ??= import("lucide-react").then(({ icons }) => {
+		loaded = icons;
+		return loaded;
+	});
+	return pending;
+}
+/** The map if it has already been fetched, otherwise `undefined`. Never fetches. */
+function getLoadedLucideIcons() {
+	return loaded;
+}
+/**
+* Subscribe to the icon map.
+*
+* Returns it synchronously once loaded — including on the very first render of
+* every icon after the first one anywhere, which is what stops a page full of
+* icons from each flashing its placeholder.
+*/
+function useLucideIcons() {
+	const [map, setMap] = React.useState(loaded);
+	React.useEffect(() => {
+		if (map) return;
+		let cancelled = false;
+		loadLucideIcons().then((resolved) => {
+			if (!cancelled) setMap(resolved);
+		}).catch((error) => console.error("[rebase] could not load the icon set", error));
+		return () => {
+			cancelled = true;
+		};
+	}, [map]);
+	return map;
+}
+function toPascalCase(str) {
+	return str.split(/[-_]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+}
+/**
+* The same resolution order the two call sites used against the eager map:
+* exact name, then PascalCase, then `CircleAlert` as the visible "unknown icon".
+*/
+function resolveLucideIcon(icons, name) {
+	return icons[name] ?? icons[toPascalCase(name)] ?? icons.CircleAlert;
+}
+/**
+* An icon named at runtime. Renders `fallback` until the icon set arrives.
+*/
+var LucideIconByName = React.memo(function LucideIconByName({ name, size, className, fallback }) {
+	const icons = useLucideIcons();
+	const Icon = icons ? resolveLucideIcon(icons, name) : void 0;
+	if (!Icon) {
+		if (fallback !== void 0) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+		return /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "inline-block shrink-0",
+			style: {
+				width: size,
+				height: size
+			}
+		});
+	}
+	return /* @__PURE__ */ jsx(Icon, {
+		size,
+		className
+	});
+});
+//#endregion
 //#region src/components/Alert.tsx
 var getSizeClasses = (size) => {
 	switch (size) {
@@ -3210,7 +3285,7 @@ var Checkbox = React.memo(({ id, checked, indeterminate = false, padding = true,
 		className: "rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
 		onCheckedChange: disabled ? void 0 : onCheckedChange,
 		children: /* @__PURE__ */ jsx("div", {
-			className: cls(padding ? paddingClasses[size] : "", outerSizeClasses[size], "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150", onCheckedChange ? "rounded-full hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-700 dark:hover:bg-opacity-75 dark:hover:bg-surface-accent-700/75" : "", onCheckedChange ? "cursor-pointer" : "cursor-default"),
+			className: cls(padding ? paddingClasses[size] : "", padding || onCheckedChange ? outerSizeClasses[size] : "", "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150", onCheckedChange ? "rounded-full hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-700 dark:hover:bg-opacity-75 dark:hover:bg-surface-accent-700/75" : "", onCheckedChange ? "cursor-pointer" : "cursor-default"),
 			children: /* @__PURE__ */ jsx("div", {
 				className: cls("border-2 shrink-0 relative transition-colors ease-in-out duration-150", sizeClasses$2[size], disabled ? indeterminate || isChecked ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600" : indeterminate || isChecked ? colorClasses$2[color] : "bg-white dark:bg-surface-900", indeterminate || isChecked ? "text-surface-accent-100 dark:text-surface-accent-900" : "", disabled ? "border-transparent" : indeterminate || isChecked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-500"),
 				children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
@@ -3537,9 +3612,11 @@ var InputLabel = React$1.forwardRef(function InputLabel(inProps, ref) {
 });
 //#endregion
 //#region src/components/DateTimeField.tsx
-var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date", error, size = "large", className, style, inputClassName, invisible, timezone }) => {
+var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date", error, size = "large", className, style, inputClassName, invisible, timezone, "aria-label": ariaLabel }) => {
 	const inputRef = useRef(null);
 	const [focused, setFocused] = useState(false);
+	const inputId = useId();
+	const labelId = `${inputId}-label`;
 	const [internalValue, setInternalValue] = useState("");
 	const [isTyping, setIsTyping] = useState(false);
 	const invalidValue = value !== void 0 && value !== null && (!(value instanceof Date) || isNaN(value.getTime()));
@@ -3649,12 +3726,17 @@ var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date
 			},
 			children: [
 				label && /* @__PURE__ */ jsx(InputLabel, {
+					id: labelId,
+					htmlFor: inputId,
 					className: cls("absolute top-1 pointer-events-none", !error ? focused ? "text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-600 dark:text-red-500", disabled ? "opacity-50" : ""),
 					shrink: true,
 					children: label
 				}),
 				/* @__PURE__ */ jsx("input", {
 					ref: inputRef,
+					id: inputId,
+					"aria-labelledby": label ? labelId : void 0,
+					"aria-label": label ? void 0 : ariaLabel,
 					type: mode === "date_time" ? "datetime-local" : "date",
 					value: isTyping ? internalValue : valueAsInputValue(value ?? null, mode),
 					onChange: handleInputChange,
@@ -3739,6 +3821,7 @@ var widthClasses = {
 };
 var Dialog = ({ open, onOpenChange, children, className, containerClassName, fullWidth = true, fullHeight, fullScreen, scrollable = true, maxWidth = "lg", modal = true, onOpenAutoFocus, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, disableInitialFocus = true, portalContainer, "aria-describedby": ariaDescribedby }) => {
 	const [displayed, setDisplayed] = useState(false);
+	const [popupHost, setPopupHost] = useState(null);
 	const contextContainer = usePortalContainer();
 	const finalContainer = portalContainer ?? contextContainer ?? void 0;
 	useEffect(() => {
@@ -3763,7 +3846,7 @@ var Dialog = ({ open, onOpenChange, children, className, containerClassName, ful
 				children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
 					className: cls("fixed inset-0 transition-opacity ease-in-out duration-200 bg-black/50 dark:bg-black/60 backdrop-blur-sm", displayed && open ? "opacity-100" : "opacity-0", "z-50 fixed top-0 left-0 w-full h-full flex justify-center items-center"),
 					style: { pointerEvents: displayed ? "auto" : "none" }
-				}), /* @__PURE__ */ jsx(DialogPrimitive.Content, {
+				}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
 					onEscapeKeyDown,
 					onOpenAutoFocus: (e) => {
 						if (disableInitialFocus) e.preventDefault();
@@ -3773,10 +3856,16 @@ var Dialog = ({ open, onOpenChange, children, className, containerClassName, ful
 					onInteractOutside,
 					"aria-describedby": ariaDescribedby,
 					className: cls("relative h-full outline-none flex justify-center items-center z-60 opacity-100 transition-all duration-200 ease-in-out"),
-					children: /* @__PURE__ */ jsx("div", {
+					children: [/* @__PURE__ */ jsx("div", {
 						className: cls(paperMixin, "rounded-2xl", "z-60", "relative", "overflow-hidden", "outline-none focus:outline-none", fullWidth && !fullScreen ? "w-11/12" : void 0, fullHeight && !fullScreen ? "h-full" : void 0, "text-text-primary dark:text-text-primary-dark", "justify-center items-center", fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-lg", "ease-in-out duration-200", scrollable && "overflow-y-auto", displayed && open ? "opacity-100 scale-100" : "opacity-0 scale-[0.97]", maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0, className),
-						children
-					})
+						children: /* @__PURE__ */ jsx(PortalContainerProvider, {
+							container: popupHost,
+							children
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						ref: setPopupHost,
+						className: "relative z-70 w-0 h-0"
+					})]
 				})]
 			})
 		})
@@ -3955,7 +4044,7 @@ var FilterChip = React.forwardRef(function FilterChip({ children, active = false
 		type: "button",
 		onClick,
 		disabled,
-		className: cls("inline-flex items-center gap-1 rounded-full", "font-medium whitespace-nowrap select-none shrink-0", "transition-colors duration-150", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", sizeClasses[size], active ? "bg-primary/12 text-primary dark:bg-primary/20 dark:text-primary shadow-[inset_0_0_0_1.5px_var(--color-primary)]" : cls("bg-surface-accent-100 text-text-secondary dark:bg-surface-accent-800 dark:text-text-secondary-dark", !disabled && "cursor-pointer hover:bg-primary/5 dark:hover:bg-primary/5"), disabled && "opacity-50 cursor-not-allowed", className),
+		className: cls("inline-flex items-center gap-1 rounded-full", "font-medium whitespace-nowrap select-none shrink-0", "transition-colors duration-150", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", sizeClasses[size], !disabled && "cursor-pointer", active ? cls("bg-primary/12 text-primary dark:bg-primary/20 dark:text-primary shadow-[inset_0_0_0_1.5px_var(--color-primary)]", !disabled && "hover:bg-primary/20 dark:hover:bg-primary/30") : cls("bg-surface-accent-100 text-text-secondary dark:bg-surface-accent-800 dark:text-text-secondary-dark", !disabled && "hover:bg-surface-accent-200 dark:hover:bg-surface-accent-700"), disabled && "opacity-50 cursor-not-allowed", className),
 		...rest,
 		children: [icon, children]
 	});
@@ -4289,10 +4378,9 @@ var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onV
 		onPopoverOpenChange(false);
 	};
 	useInjectStyles("MultiSelect", `
-[cmdk-group] {
+[data-multi-select-content] [cmdk-group] {
   max-height: 45vh;
   overflow-y: auto;
-  // width: 400px;
 } `);
 	const contextValue = React$1.useMemo(() => ({
 		fieldValue: selectedValues,
@@ -4378,6 +4466,7 @@ var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onV
 			}), /* @__PURE__ */ jsx(PopoverPrimitive.Portal, {
 				container: finalContainer,
 				children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
+					"data-multi-select-content": true,
 					className: cls("z-50 overflow-hidden border bg-white dark:bg-surface-800 rounded-lg w-[400px]", defaultBorderMixin),
 					align: "start",
 					sideOffset: 8,
@@ -5093,7 +5182,7 @@ var TextField = forwardRef(({ value, onChange, label, type = "text", multiline =
 		...inputProps,
 		ref: inputRef,
 		id: inputId,
-		"aria-labelledby": label ? labelId : void 0,
+		"aria-labelledby": label ? labelId : inputProps["aria-labelledby"],
 		"aria-invalid": error || void 0,
 		"aria-disabled": disabled || void 0,
 		placeholder: focused || hasValue || !label ? placeholder : void 0,
@@ -5109,7 +5198,7 @@ var TextField = forwardRef(({ value, onChange, label, type = "text", multiline =
 		...inputProps,
 		ref: inputRef,
 		id: inputId,
-		"aria-labelledby": label ? labelId : void 0,
+		"aria-labelledby": label ? labelId : inputProps["aria-labelledby"],
 		"aria-invalid": error || void 0,
 		"aria-disabled": disabled || void 0,
 		disabled,
@@ -6620,8 +6709,9 @@ function getScrollParent$1(element) {
 	}
 	return document.documentElement;
 }
-function ListView({ data, dataLoading = false, noMoreToLoad = false, dataLoadingError, itemCount, setItemCount, pageSize = 50, paginationEnabled = true, onItemClick, selectedIds, highlightedIds, selectionEnabled = true, onSelectionChange, emptyComponent, size = "m", selectedEntityId, renderRow }) {
+function ListView({ data, dataLoading = false, noMoreToLoad = false, dataLoadingError, itemCount, setItemCount, pageSize = 50, paginationEnabled = true, onItemClick, selectedIds, highlightedIds, selectionEnabled = true, onSelectionChange, emptyComponent, size = "m", selectedEntityId, header, renderRow }) {
 	const containerRef = useRef(null);
+	const rowsRef = useRef(null);
 	const isLoadingMore = useRef(false);
 	useEffect(() => {
 		if (!dataLoading) isLoadingMore.current = false;
@@ -6657,7 +6747,7 @@ function ListView({ data, dataLoading = false, noMoreToLoad = false, dataLoading
 		const update = () => {
 			rafId = null;
 			const scrollRect = scrollEl.getBoundingClientRect();
-			const listTopRelative = el.getBoundingClientRect().top - scrollRect.top;
+			const listTopRelative = (rowsRef.current ?? el).getBoundingClientRect().top - scrollRect.top;
 			setEffectiveScrollTop(Math.max(0, -listTopRelative));
 			setViewportHeight(scrollRect.height);
 			const { paginationEnabled: pe, noMoreToLoad: nm, itemCount: ic, pageSize: ps } = paginationStateRef.current;
@@ -6714,7 +6804,8 @@ function ListView({ data, dataLoading = false, noMoreToLoad = false, dataLoading
 				color: "secondary",
 				children: "No entries found"
 			})
-		}) : /* @__PURE__ */ jsxs("div", {
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [header, /* @__PURE__ */ jsxs("div", {
+			ref: rowsRef,
 			style: {
 				height: totalHeight + footerHeight,
 				position: "relative"
@@ -6789,7 +6880,7 @@ function ListView({ data, dataLoading = false, noMoreToLoad = false, dataLoading
 					})
 				})
 			]
-		})
+		})] })
 	});
 }
 //#endregion
@@ -8651,6 +8742,6 @@ function CollectionView({ dataController, properties, propertiesOrder, displayed
 	});
 }
 //#endregion
-export { Alert, AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownIcon, ArrowDownToLineIcon, ArrowLeftIcon, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpToLineIcon, Autocomplete, AutocompleteItem, Avatar, Badge, BoldIcon, BookOpenIcon, BooleanSwitch, BooleanSwitchWithLabel, Button, CHIP_COLORS, CHIP_HUES, CHIP_SEED_KEYS, CONTROL_HEIGHT, CalendarIcon, Card, CardView, CenteredView, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, Chip, CircleDotIcon, CircleIcon, CircleUserIcon, CircularProgress, CircularProgressCenter, CodeIcon, Collapse, CollectionView, ColorPicker, ColumnsIcon, Container, CopyIcon, DatabaseIcon, DateTimeField, DebouncedTextField, Dialog, DialogActions, DialogContent, DialogTitle, DollarSignIcon, DownloadIcon, ErrorBoundary, ExpandablePanel, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FilterXIcon, FlagIcon, FolderIcon, FolderKanbanIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GitHubIcon, GlobeIcon, HandleIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, ImageIcon, ImageOffIcon, InfoIcon, InfoLabel, InputLabel, ItalicIcon, KanbanIcon, KanbanView, KeyIcon, KeyRoundIcon, Label, LanguagesIcon, LayoutGridIcon, Link2Icon, LinkIcon, ListIcon, ListOrderedIcon, ListPlusIcon, ListTodoIcon, ListView, LoaderIcon, LoadingButton, LockIcon, LogOutIcon, MailIcon, Markdown, Maximize2Icon, Menu, MenuIcon, MenuItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarItemIndicator, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarSubTriggerIndicator, MenubarTrigger, MessageCircleIcon, MinusCircleIcon, MinusIcon, MoonIcon, MoreVerticalIcon, MultiSelect, MultiSelectContext, MultiSelectItem, Music2Icon, PanelLeftIcon, Paper, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, PlayIcon, PlusIcon, Popover, PopoverPrimitive, Portal, PortalContainerProvider, QuoteIcon, RadioGroup, RadioGroupItem, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, ResizablePanels, Rows3Icon, SaveIcon, SearchBar, SearchIcon, Select, SelectGroup, SelectItem, SendIcon, Separator, SettingsIcon, Sheet, ShieldIcon, ShoppingCartIcon, Skeleton, Slider, SlidersHorizontalIcon, Slot, SquareIcon, StarIcon, StickyNoteIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Tab, Table, TableBody, TableCell, TableHeader, TableIcon, TableRow, Tabs, TagIcon, TerminalIcon, TextField, TextIcon, TextareaAutosize, ToggleButtonGroup, Tooltip, Trash2Icon, TrendingUpIcon, TypeIcon, Typography, UnderlineIcon, UndoIcon, Unlink2Icon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, UsersIcon, VideoIcon, VirtualTable, VirtualTableDateField, VirtualTableInput, VirtualTableNumberInput, VirtualTableSelect, VirtualTableSelectionProvider, VirtualTableSwitch, VoteIcon, Wand2Icon, WrenchIcon, XCircleIcon, XIcon, cardClickableMixin, cardMixin, cardSelectedMixin, cls, colorClassesMapping, controlHeightMixin, controlPaddingMixin, coolIconKeys, createVirtualTableSelectionStore, debounce, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedClasses, focusedDisabled, focusedInvisibleMixin, getColorSchemeForKey, getColorSchemeForSeed, iconKeys, iconSize, lucideIcons, paperMixin, useAutoComplete, useDebounceCallback, useDebounceValue, useDebouncedCallback, useInjectStyles, useOutsideAlerter, usePortalContainer, useVirtualTableCellSelected, useVirtualTableSelection };
+export { Alert, AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownIcon, ArrowDownToLineIcon, ArrowLeftIcon, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpToLineIcon, Autocomplete, AutocompleteItem, Avatar, Badge, BoldIcon, BookOpenIcon, BooleanSwitch, BooleanSwitchWithLabel, Button, CHIP_COLORS, CHIP_HUES, CHIP_SEED_KEYS, CONTROL_HEIGHT, CalendarIcon, Card, CardView, CenteredView, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, Chip, CircleDotIcon, CircleIcon, CircleUserIcon, CircularProgress, CircularProgressCenter, CodeIcon, Collapse, CollectionView, ColorPicker, ColumnsIcon, Container, CopyIcon, DatabaseIcon, DateTimeField, DebouncedTextField, Dialog, DialogActions, DialogContent, DialogTitle, DollarSignIcon, DownloadIcon, ErrorBoundary, ExpandablePanel, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FilterXIcon, FlagIcon, FolderIcon, FolderKanbanIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GitHubIcon, GlobeIcon, HandleIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, ImageIcon, ImageOffIcon, InfoIcon, InfoLabel, InputLabel, ItalicIcon, KanbanIcon, KanbanView, KeyIcon, KeyRoundIcon, Label, LanguagesIcon, LayoutGridIcon, Link2Icon, LinkIcon, ListIcon, ListOrderedIcon, ListPlusIcon, ListTodoIcon, ListView, LoaderIcon, LoadingButton, LockIcon, LogOutIcon, LucideIconByName, MailIcon, Markdown, Maximize2Icon, Menu, MenuIcon, MenuItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarItemIndicator, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarSubTriggerIndicator, MenubarTrigger, MessageCircleIcon, MinusCircleIcon, MinusIcon, MoonIcon, MoreVerticalIcon, MultiSelect, MultiSelectContext, MultiSelectItem, Music2Icon, PanelLeftCloseIcon, PanelLeftIcon, PanelLeftOpenIcon, Paper, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, PlayIcon, PlusIcon, Popover, PopoverPrimitive, Portal, PortalContainerProvider, QuoteIcon, RadioGroup, RadioGroupItem, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, ResizablePanels, Rows3Icon, SaveIcon, SearchBar, SearchIcon, Select, SelectGroup, SelectItem, SendIcon, Separator, SettingsIcon, Sheet, ShieldIcon, ShoppingCartIcon, Skeleton, Slider, SlidersHorizontalIcon, Slot, SquareIcon, StarIcon, StickyNoteIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Tab, Table, TableBody, TableCell, TableHeader, TableIcon, TableRow, Tabs, TagIcon, TerminalIcon, TextField, TextIcon, TextareaAutosize, ToggleButtonGroup, Tooltip, Trash2Icon, TrendingUpIcon, TypeIcon, Typography, UnderlineIcon, UndoIcon, Unlink2Icon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, UsersIcon, VideoIcon, VirtualTable, VirtualTableDateField, VirtualTableInput, VirtualTableNumberInput, VirtualTableSelect, VirtualTableSelectionProvider, VirtualTableSwitch, VoteIcon, Wand2Icon, WrenchIcon, XCircleIcon, XIcon, cardClickableMixin, cardMixin, cardSelectedMixin, cls, colorClassesMapping, controlHeightMixin, controlPaddingMixin, coolIconKeys, createVirtualTableSelectionStore, debounce, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedClasses, focusedDisabled, focusedInvisibleMixin, getColorSchemeForKey, getColorSchemeForSeed, getLoadedLucideIcons, iconKeys, iconSize, loadLucideIcons, lucideIcons, paperMixin, resolveLucideIcon, useAutoComplete, useDebounceCallback, useDebounceValue, useDebouncedCallback, useInjectStyles, useLucideIcons, useOutsideAlerter, usePortalContainer, useVirtualTableCellSelected, useVirtualTableSelection };
 
 //# sourceMappingURL=index.es.js.map