@giddaa-housing/ui 2.0.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/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" }), /* @__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/picker-xSTzeYhc.js

@@ -0,0 +1,50 @@
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Button } from "./button.js";
+import { useInputComponentSize } from "./input-size-context.js";
+import { PopoverTrigger } from "./popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/lib/picker.tsx
+const PICKER_COLLISION_AVOIDANCE = {
+	side: "flip",
+	align: "shift",
+	fallbackAxisSide: "none"
+};
+const pickerTriggerVariants = cva("flex w-full items-center justify-between rounded-full border transition-[border-color,box-shadow] outline-none", {
+	variants: { size: {
+		sm: "h-8 px-3 text-gdt-xs [&_svg]:size-3.5",
+		md: "h-10 px-3.5 text-gdt-sm [&_svg]:size-4",
+		lg: "h-12 px-4 text-gdt-md [&_svg]:size-4.5",
+		xl: "h-14 px-4.5 text-gdt-lg [&_svg]:size-5"
+	} },
+	defaultVariants: { size: "md" }
+});
+function PickerTrigger({ icon: Icon, displayValue, placeholder, disabled, open, size, className }) {
+	const resolvedSize = useInputComponentSize(size);
+	return /* @__PURE__ */ jsxs(PopoverTrigger, {
+		disabled,
+		"data-size": resolvedSize,
+		className: cn(pickerTriggerVariants({ size: resolvedSize }), disabled ? "cursor-not-allowed border-line-subtle bg-surface text-fg-caption-placeholder" : open ? "border-line-focus bg-canvas text-fg-primary inset-ring-1 inset-ring-line-focus" : "border-line bg-canvas text-fg-primary hover:border-line-strong", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("min-w-0 truncate", !displayValue && "text-fg-caption-placeholder"),
+			children: displayValue || placeholder
+		}), /* @__PURE__ */ jsx(Icon, { className: cn("ml-2 shrink-0", disabled ? "text-fg-caption-placeholder" : "text-fg-secondary") })]
+	});
+}
+function PickerFooter({ secondaryLabel, onSecondary, onApply }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center justify-between border-t border-line-subtle px-4 py-3",
+		children: [/* @__PURE__ */ jsx(Button, {
+			variant: "tertiary-outline",
+			size: "sm",
+			onClick: onSecondary,
+			children: secondaryLabel
+		}), /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			onClick: onApply,
+			children: "Apply"
+		})]
+	});
+}
+//#endregion
+export { PickerFooter as n, PickerTrigger as r, PICKER_COLLISION_AVOIDANCE as t };

package/dist/popover.d.ts

@@ -4,11 +4,11 @@ import { Popover as Popover$1 } from "@base-ui/react/popover";
 //#region src/popover.d.ts
 declare function Popover({ ...props }: Popover$1.Root.Props): React.JSX.Element;
 declare function PopoverTrigger({ ...props }: Popover$1.Trigger.Props): React.JSX.Element;
-type PopoverContentProps = Popover$1.Popup.Props & Pick<Popover$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & {
+type PopoverContentProps = Popover$1.Popup.Props & Pick<Popover$1.Positioner.Props, "align" | "alignOffset" | "collisionAvoidance" | "side" | "sideOffset"> & {
   showArrow?: boolean;
   size?: ComponentSize;
 };
-declare function PopoverContent({ className, align, alignOffset, side, sideOffset, showArrow, size, children, ...props }: PopoverContentProps): React.JSX.Element;
+declare function PopoverContent({ className, align, alignOffset, collisionAvoidance, side, sideOffset, showArrow, size, children, ...props }: PopoverContentProps): React.JSX.Element;
 declare function PopoverHeader({ className, border, ...props }: React.ComponentProps<"div"> & {
   border?: boolean;
 }): React.JSX.Element;

package/dist/popover.js

@@ -16,10 +16,11 @@ function PopoverTrigger({ ...props }) {
 		...props
 	});
 }
-function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 6, showArrow = true, size = "md", children, ...props }) {
+function PopoverContent({ className, align = "center", alignOffset = 0, collisionAvoidance, side = "bottom", sideOffset = 6, showArrow = true, size = "md", children, ...props }) {
 	return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
 		align,
 		alignOffset,
+		collisionAvoidance,
 		side,
 		sideOffset,
 		className: "isolate z-50",

package/dist/styles.css

@@ -1449,9 +1449,6 @@
   .scroll-py-1 {
     scroll-padding-block: var(--spacing);
   }
-  .\[scrollbar-width\:none\] {
-    scrollbar-width: none;
-  }
   .scrollbar-none {
     scrollbar-width: none;
   }
@@ -2165,6 +2162,9 @@
   .p-gdt-xl {
     padding: var(--spacing-gdt-xl);
   }
+  .px-\(--card-padding\) {
+    padding-inline: var(--card-padding);
+  }
   .px-\(--cell-width\) {
     padding-inline: var(--cell-width);
   }
@@ -2240,6 +2240,9 @@
   .px-gdt-xl {
     padding-inline: var(--spacing-gdt-xl);
   }
+  .py-\(--card-padding\) {
+    padding-block: var(--card-padding);
+  }
   .py-0 {
     padding-block: 0;
   }
@@ -2303,9 +2306,6 @@
   .py-gdt-sm {
     padding-block: var(--spacing-gdt-sm);
   }
-  .py-gdt-xl {
-    padding-block: var(--spacing-gdt-xl);
-  }
   .pt-\(--sheet-padding-top\) {
     padding-top: var(--sheet-padding-top);
   }
@@ -2593,6 +2593,9 @@
   .text-pretty {
     text-wrap: pretty;
   }
+  .break-words {
+    overflow-wrap: break-word;
+  }
   .wrap-break-word {
     overflow-wrap: break-word;
   }
@@ -3130,6 +3133,9 @@
   .\[--anchor-y\:0px\] {
     --anchor-y: 0px;
   }
+  .\[--card-padding\:1\.5rem\] {
+    --card-padding: 1.5rem;
+  }
   .\[--cell-height\:36px\] {
     --cell-height: 36px;
   }
@@ -6181,6 +6187,25 @@
       padding-right: 0;
     }
   }
+  .has-data-\[slot\=combobox-virtualized\]\:max-h-none {
+    &:has(*[data-slot="combobox-virtualized"]) {
+      max-height: none;
+    }
+  }
+  .has-data-\[slot\=combobox-virtualized\]\:space-y-0 {
+    &:has(*[data-slot="combobox-virtualized"]) {
+      :where(& > :not(:last-child)) {
+        --tw-space-y-reverse: 0;
+        margin-block-start: 0;
+        margin-block-end: 0;
+      }
+    }
+  }
+  .has-data-\[slot\=combobox-virtualized\]\:overflow-hidden {
+    &:has(*[data-slot="combobox-virtualized"]) {
+      overflow: hidden;
+    }
+  }
   .has-data-\[slot\=kbd\]\:pr-1\.5 {
     &:has(*[data-slot="kbd"]) {
       padding-right: calc(var(--spacing) * 1.5);

package/dist/table.js

@@ -79,7 +79,7 @@ function TableRow({ className, ...props }) {
 function TableHead({ className, pinnedSide, ...props }) {
 	return /* @__PURE__ */ jsx("th", {
 		"data-slot": "table-head",
-		className: cn("relative h-14 px-6 py-4 text-left align-middle bg-surface-raised", "text-gdt-sm font-semibold text-fg-secondary", "whitespace-nowrap has-[[role=checkbox]]:pr-0", getPinnedDividerClassName(pinnedSide), className),
+		className: cn("relative h-14 px-6 py-4 text-left align-middle bg-surface-raised", "text-gdt-sm font-semibold text-fg-secondary", "break-words has-[[role=checkbox]]:pr-0", getPinnedDividerClassName(pinnedSide), className),
 		...props
 	});
 }
@@ -95,7 +95,7 @@ function TableHead({ className, pinnedSide, ...props }) {
 function TableCell({ className, pinned = false, pinnedSide, ...props }) {
 	return /* @__PURE__ */ jsx("td", {
 		"data-slot": "table-cell",
-		className: cn("relative h-14 px-6 py-4 align-middle text-gdt-sm text-fg-primary", "whitespace-nowrap", pinned && "bg-canvas transition-[background-color,filter] group-hover:bg-surface group-active:bg-surface-raised group-data-[state=selected]:bg-surface-brand-subtle group-data-[state=selected]:group-hover:bg-surface-brand-subtle group-data-[state=selected]:group-hover:brightness-95 group-data-[state=selected]:group-active:brightness-90", getPinnedDividerClassName(pinnedSide), className),
+		className: cn("relative h-14 px-6 py-4 align-middle text-gdt-sm text-fg-primary", "break-words", pinned && "bg-canvas transition-[background-color,filter] group-hover:bg-surface group-active:bg-surface-raised group-data-[state=selected]:bg-surface-brand-subtle group-data-[state=selected]:group-hover:bg-surface-brand-subtle group-data-[state=selected]:group-hover:brightness-95 group-data-[state=selected]:group-active:brightness-90", getPinnedDividerClassName(pinnedSide), className),
 		...props
 	});
 }

package/dist/tabs.js

@@ -24,9 +24,9 @@ function Tabs({ className, orientation = "horizontal", size, ...props }) {
 		children: root
 	}) : root;
 }
-const tabsListVariants = cva(cn("group/tabs-list relative inline-flex w-fit shrink-0 items-center gap-1 text-fg-secondary", "group-data-[orientation=horizontal]/tabs:border-b group-data-[orientation=horizontal]/tabs:border-line-subtle", "group-data-[orientation=vertical]/tabs:flex-col group-data-[orientation=vertical]/tabs:border-l group-data-[orientation=vertical]/tabs:border-line-subtle"), {
+const tabsListVariants = cva(cn("group/tabs-list relative inline-flex w-fit shrink-0 items-center gap-1 text-fg-secondary", "group-data-[orientation=vertical]/tabs:flex-col"), {
 	variants: { variant: {
-		underline: "rounded-none bg-transparent p-0",
+		underline: cn("rounded-none bg-transparent p-0", "group-data-[orientation=horizontal]/tabs:border-b group-data-[orientation=horizontal]/tabs:border-line-subtle", "group-data-[orientation=vertical]/tabs:border-l group-data-[orientation=vertical]/tabs:border-line-subtle"),
 		secondary: "rounded-4xl bg-transparent p-0"
 	} },
 	defaultVariants: { variant: "underline" }

package/dist/time-picker.d.ts

@@ -1,3 +1,4 @@
+import { n as InputSize } from "./input-CfoEJ8A6.js";
 import * as React from "react";
 //#region src/time-picker.d.ts
 interface TimePickerProps {
@@ -5,9 +6,11 @@ interface TimePickerProps {
   onChange?: (time: string | undefined) => void;
   format?: "12h" | "24h";
   disabled?: boolean;
+  /** Controls the trigger size. The time selection panel is not resized. */
+  size?: InputSize;
   placeholder?: string;
   className?: string;
 }
-declare function TimePicker({ value, onChange, format, disabled, placeholder, className }: TimePickerProps): React.JSX.Element;
+declare function TimePicker({ value, onChange, format, disabled, size, placeholder, className }: TimePickerProps): React.JSX.Element;
 //#endregion
 export { TimePicker, type TimePickerProps };