@giddaa-housing/ui 2.0.0 → 3.0.0

package/dist/switch.js

@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 //#region src/switch.tsx
-const switchVariants = cva("peer group/switch relative inline-flex shrink-0 items-center rounded-full border bg-clip-padding p-0.5 transition-[background-color,border-color,box-shadow,opacity] outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-line-danger/20 aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-danger)] data-checked:border-action-primary data-checked:bg-action-primary data-unchecked:border-line data-unchecked:bg-transparent data-[loading=true]:border-action-primary data-[loading=true]:bg-action-primary data-disabled:border-line-subtle! data-disabled:bg-transparent! data-disabled:cursor-not-allowed data-disabled:opacity-60 h-6 w-10 [--switch-spinner-size:0.75rem] [--switch-thumb-size:18px] [--switch-track-width:2.5rem] group-data-[size=sm]/field:h-5 group-data-[size=sm]/field:w-8 group-data-[size=sm]/field:[--switch-spinner-size:0.625rem] group-data-[size=sm]/field:[--switch-thumb-size:14px] group-data-[size=sm]/field:[--switch-track-width:2rem] group-data-[size=md]/field:h-6 group-data-[size=md]/field:w-10 group-data-[size=md]/field:[--switch-spinner-size:0.75rem] group-data-[size=md]/field:[--switch-thumb-size:18px] group-data-[size=md]/field:[--switch-track-width:2.5rem] group-data-[size=lg]/field:h-7 group-data-[size=lg]/field:w-12 group-data-[size=lg]/field:[--switch-spinner-size:0.875rem] group-data-[size=lg]/field:[--switch-thumb-size:22px] group-data-[size=lg]/field:[--switch-track-width:3rem]", { variants: { size: {
+const switchVariants = cva("peer group/switch relative inline-flex shrink-0 items-center rounded-full border bg-clip-padding p-0.5 transition-[background-color,border-color,box-shadow,opacity,scale] duration-[var(--duration-motion-press)] ease-gdt-out active:scale-[0.97] motion-reduce:active:scale-100 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-line-danger/20 aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-danger)] data-checked:border-action-primary data-checked:bg-action-primary data-unchecked:border-line data-unchecked:bg-transparent data-[loading=true]:border-action-primary data-[loading=true]:bg-action-primary data-disabled:border-line-subtle! data-disabled:bg-transparent! data-disabled:cursor-not-allowed data-disabled:opacity-60 data-disabled:active:scale-100 h-6 w-10 [--switch-spinner-size:0.75rem] [--switch-thumb-size:18px] [--switch-track-width:2.5rem] group-data-[size=sm]/field:h-5 group-data-[size=sm]/field:w-8 group-data-[size=sm]/field:[--switch-spinner-size:0.625rem] group-data-[size=sm]/field:[--switch-thumb-size:14px] group-data-[size=sm]/field:[--switch-track-width:2rem] group-data-[size=md]/field:h-6 group-data-[size=md]/field:w-10 group-data-[size=md]/field:[--switch-spinner-size:0.75rem] group-data-[size=md]/field:[--switch-thumb-size:18px] group-data-[size=md]/field:[--switch-track-width:2.5rem] group-data-[size=lg]/field:h-7 group-data-[size=lg]/field:w-12 group-data-[size=lg]/field:[--switch-spinner-size:0.875rem] group-data-[size=lg]/field:[--switch-thumb-size:22px] group-data-[size=lg]/field:[--switch-track-width:3rem]", { variants: { size: {
 	sm: "h-5 w-8 [--switch-spinner-size:0.625rem] [--switch-thumb-size:14px] [--switch-track-width:2rem]",
 	md: "h-6 w-10 [--switch-spinner-size:0.75rem] [--switch-thumb-size:18px] [--switch-track-width:2.5rem]",
 	lg: "h-7 w-12 [--switch-spinner-size:0.875rem] [--switch-thumb-size:22px] [--switch-track-width:3rem]"
@@ -38,11 +38,11 @@ function Switch({ className, disabled = false, loading = false, readOnly = false
 		...props,
 		children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
 			"data-slot": "switch-thumb",
-			className: cn("pointer-events-none grid size-(--switch-thumb-size) translate-x-0 place-items-center rounded-full bg-fg-on-brand text-fg-brand ring-0 transition-transform duration-200 ease-out data-checked:translate-x-[calc(var(--switch-track-width)-var(--switch-thumb-size)-4px)]", loading && "translate-x-[calc(var(--switch-track-width)-var(--switch-thumb-size)-4px)]", isDisabled && "translate-x-0! bg-line text-fg-caption-placeholder"),
+			className: cn("pointer-events-none grid size-(--switch-thumb-size) translate-x-0 place-items-center rounded-full bg-fg-on-brand text-fg-brand ring-0 transition-[translate] duration-200 ease-out motion-reduce:transition-none data-checked:translate-x-[calc(var(--switch-track-width)-var(--switch-thumb-size)-4px)]", loading && "translate-x-[calc(var(--switch-track-width)-var(--switch-thumb-size)-4px)]", isDisabled && "translate-x-0! bg-line text-fg-caption-placeholder"),
 			children: loading && !isDisabled && /* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
 				"data-slot": "switch-spinner",
-				className: "size-(--switch-spinner-size) animate-spin rounded-full border-2 border-current border-r-transparent"
+				className: "size-(--switch-spinner-size) animate-spin rounded-full border-2 border-current border-r-transparent motion-reduce:animate-none"
 			})
 		})
 	});

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" }
@@ -40,7 +40,7 @@ function TabsList({ className, variant = "underline", size, children, ...props }
 		"data-size": resolvedSize,
 		className: cn(tabsListVariants({ variant: resolvedVariant }), className),
 		...props,
-		children: [children, /* @__PURE__ */ jsx(Tabs$1.Indicator, { className: cn("pointer-events-none absolute left-0 top-0 z-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) translate-y-(--active-tab-top) transition-[transform,width,height] duration-200 ease-in-out", "group-data-[variant=secondary]/tabs-list:hidden", "group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:bg-line-focus group-data-[variant=underline]/tabs-list:shadow-none", "group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:top-auto group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:bottom-[-1px] group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:h-0.5! group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:translate-y-0", "group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:left-auto group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:right-[-1px] group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:w-0.5! group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:translate-x-0") })]
+		children: [children, /* @__PURE__ */ jsx(Tabs$1.Indicator, { className: cn("pointer-events-none absolute left-0 top-0 z-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) translate-y-(--active-tab-top) transition-[translate,width,height] duration-200 ease-in-out motion-reduce:transition-none", "group-data-[variant=secondary]/tabs-list:hidden", "group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:bg-line-focus group-data-[variant=underline]/tabs-list:shadow-none", "group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:top-auto group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:bottom-[-1px] group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:h-0.5! group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:translate-y-0", "group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:left-auto group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:right-[-1px] group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:w-0.5! group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:translate-x-0") })]
 	});
 }
 /**
@@ -99,7 +99,7 @@ function TabsCount({ className, count, abbreviate, max, loading, children, ...pr
 		"data-slot": "tabs-count",
 		"data-loading": loading || void 0,
 		"aria-busy": loading || void 0,
-		className: cn("inline-flex items-center justify-center rounded-full font-semibold leading-none transition-[background-color,color]", "group-data-[size=sm]/tabs-list:h-4 group-data-[size=sm]/tabs-list:min-w-4 group-data-[size=sm]/tabs-list:px-1 group-data-[size=sm]/tabs-list:text-[10px]", "group-data-[size=md]/tabs-list:h-5 group-data-[size=md]/tabs-list:min-w-5 group-data-[size=md]/tabs-list:px-1 group-data-[size=md]/tabs-list:text-[11px]", "group-data-[size=lg]/tabs-list:h-5 group-data-[size=lg]/tabs-list:min-w-5 group-data-[size=lg]/tabs-list:px-1.5 group-data-[size=lg]/tabs-list:text-gdt-xs", "group-data-[variant=underline]/tabs-list:bg-surface-raised group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand", "group-data-[variant=secondary]/tabs-list:bg-surface-overlay group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand", "data-loading:animate-pulse", className),
+		className: cn("inline-flex items-center justify-center rounded-full font-semibold leading-none transition-[background-color,color]", "group-data-[size=sm]/tabs-list:h-4 group-data-[size=sm]/tabs-list:min-w-4 group-data-[size=sm]/tabs-list:px-1 group-data-[size=sm]/tabs-list:text-[10px]", "group-data-[size=md]/tabs-list:h-5 group-data-[size=md]/tabs-list:min-w-5 group-data-[size=md]/tabs-list:px-1 group-data-[size=md]/tabs-list:text-[11px]", "group-data-[size=lg]/tabs-list:h-5 group-data-[size=lg]/tabs-list:min-w-5 group-data-[size=lg]/tabs-list:px-1.5 group-data-[size=lg]/tabs-list:text-gdt-xs", "group-data-[variant=underline]/tabs-list:bg-surface-raised group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand", "group-data-[variant=secondary]/tabs-list:bg-surface-overlay group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand", "data-loading:animate-pulse motion-reduce:data-loading:animate-none", className),
 		...props,
 		children: content
 	});

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

package/dist/time-picker.js

@@ -1,10 +1,37 @@
 "use client";
 import { t as cn } from "./cn-BI_4DMBf.js";
+import { t as useReducedMotion } from "./use-reduced-motion-BDvOK14x.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 { ClockIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+//#region src/lib/time-picker-paint.ts
+function getPaintBounds(offset, itemCount, curveClamp) {
+	const bound = curveClamp + 1;
+	return {
+		low: Math.max(0, Math.floor(offset - bound)),
+		high: Math.min(itemCount - 1, Math.ceil(offset + bound))
+	};
+}
+function createRafScheduler(callback) {
+	let frame = null;
+	return {
+		schedule() {
+			if (frame !== null) return;
+			frame = requestAnimationFrame(() => {
+				frame = null;
+				callback();
+			});
+		},
+		cancel() {
+			if (frame === null) return;
+			cancelAnimationFrame(frame);
+			frame = null;
+		}
+	};
+}
+//#endregion
 //#region src/time-picker.tsx
 const ITEM_HEIGHT = 40;
 const VISIBLE_COUNT = 5;
@@ -56,18 +83,69 @@ function TimeColumn({ label, items, value, onChange }) {
 	const isProgrammatic = React.useRef(false);
 	const onChangeRef = React.useRef(onChange);
 	onChangeRef.current = onChange;
+	const reducedMotion = useReducedMotion();
+	const reducedMotionRef = React.useRef(reducedMotion);
+	reducedMotionRef.current = reducedMotion;
+	const paintedIndexesRef = React.useRef(/* @__PURE__ */ new Set());
 	const paintCurve = React.useCallback(() => {
 		const el = scrollRef.current;
 		if (!el) return;
 		const offset = el.scrollTop / ITEM_HEIGHT;
-		itemRefs.current.forEach((node, index) => {
-			if (!node) return;
+		if (reducedMotionRef.current) {
+			const center = Math.round(offset);
+			const radius = Math.floor(VISIBLE_COUNT / 2);
+			const low = Math.max(0, center - radius);
+			const high = Math.min(itemRefs.current.length - 1, center + radius);
+			const nextPainted = /* @__PURE__ */ new Set();
+			for (let index = low; index <= high; index++) {
+				const node = itemRefs.current[index];
+				if (!node) continue;
+				node.style.opacity = index === center ? "1" : "0.55";
+				node.style.transform = "";
+				node.style.willChange = "";
+				nextPainted.add(index);
+			}
+			for (const index of paintedIndexesRef.current) {
+				if (nextPainted.has(index)) continue;
+				const node = itemRefs.current[index];
+				if (!node) continue;
+				node.style.opacity = "";
+				node.style.transform = "";
+				node.style.willChange = "";
+			}
+			paintedIndexesRef.current = nextPainted;
+			return;
+		}
+		const { low, high } = getPaintBounds(offset, itemRefs.current.length, CURVE_CLAMP);
+		const nextPainted = /* @__PURE__ */ new Set();
+		for (let index = low; index <= high; index++) {
+			const node = itemRefs.current[index];
+			if (!node) continue;
 			const distance = index - offset;
 			const abs = Math.min(Math.abs(distance), CURVE_CLAMP);
 			const tilt = Math.max(Math.min(distance, CURVE_CLAMP), -3);
 			node.style.opacity = String(Math.max(1 - abs * .28, .2));
 			node.style.transform = `perspective(280px) rotateX(${tilt * -20}deg) scale(${1 - abs * .04})`;
-		});
+			node.style.willChange = "transform, opacity";
+			nextPainted.add(index);
+		}
+		for (const index of paintedIndexesRef.current) {
+			if (nextPainted.has(index)) continue;
+			const node = itemRefs.current[index];
+			if (!node) continue;
+			node.style.opacity = "";
+			node.style.transform = "";
+			node.style.willChange = "";
+		}
+		paintedIndexesRef.current = nextPainted;
+	}, []);
+	const paintSchedulerRef = React.useRef(null);
+	if (!paintSchedulerRef.current) paintSchedulerRef.current = createRafScheduler(paintCurve);
+	const schedulePaintCurve = React.useCallback(() => {
+		paintSchedulerRef.current?.schedule();
+	}, []);
+	React.useEffect(() => {
+		return () => paintSchedulerRef.current?.cancel();
 	}, []);
 	React.useEffect(() => {
 		const el = scrollRef.current;
@@ -88,7 +166,7 @@ function TimeColumn({ label, items, value, onChange }) {
 		isProgrammatic.current = true;
 		el.scrollTo({
 			top: idx * ITEM_HEIGHT,
-			behavior: "smooth"
+			behavior: reducedMotionRef.current ? "auto" : "smooth"
 		});
 		setTimeout(() => {
 			isProgrammatic.current = false;
@@ -103,14 +181,14 @@ function TimeColumn({ label, items, value, onChange }) {
 		onChangeRef.current(items[index]);
 		el.scrollTo({
 			top: index * ITEM_HEIGHT,
-			behavior: "smooth"
+			behavior: reducedMotionRef.current ? "auto" : "smooth"
 		});
 		setTimeout(() => {
 			isProgrammatic.current = false;
 		}, 350);
 	}
 	function handleScroll() {
-		paintCurve();
+		schedulePaintCurve();
 		if (isProgrammatic.current) return;
 		const el = scrollRef.current;
 		if (!el) return;
@@ -132,7 +210,7 @@ function TimeColumn({ label, items, value, onChange }) {
 			role: "listbox",
 			"aria-label": label,
 			style: { height: `${VISIBLE_COUNT * ITEM_HEIGHT}px` },
-			className: "relative snap-y snap-mandatory overflow-y-scroll overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+			className: "relative snap-y snap-mandatory overflow-y-scroll overscroll-contain scrollbar-none [&::-webkit-scrollbar]:hidden",
 			children: /* @__PURE__ */ jsx("div", {
 				style: {
 					paddingTop: `${SCROLL_PADDING}px`,
@@ -150,7 +228,7 @@ function TimeColumn({ label, items, value, onChange }) {
 						},
 						onClick: () => selectIndex(index),
 						style: { height: `${ITEM_HEIGHT}px` },
-						className: "flex w-full cursor-pointer snap-center items-center justify-center select-none will-change-transform",
+						className: "flex w-full cursor-pointer snap-center items-center justify-center select-none",
 						children: /* @__PURE__ */ jsx("span", {
 							className: cn("text-gdt-sm font-medium transition-colors", dist === 0 ? "text-fg-on-brand" : dist === 1 ? "text-fg-secondary" : "text-fg-caption-placeholder"),
 							children: item
@@ -161,7 +239,7 @@ function TimeColumn({ label, items, value, onChange }) {
 		})]
 	});
 }
-function TimePicker({ value, onChange, format = "12h", disabled = false, placeholder = "Select time", className }) {
+function TimePicker({ value, onChange, format = "12h", disabled = false, size, placeholder = "Select time", className }) {
 	const [open, setOpen] = React.useState(false);
 	const [pending, setPending] = React.useState(() => parseTimeString(value, format));
 	function handleOpenChange(next) {
@@ -191,11 +269,14 @@ function TimePicker({ value, onChange, format = "12h", disabled = false, placeho
 			placeholder,
 			disabled,
 			open,
+			size,
 			className
 		}), /* @__PURE__ */ jsxs(PopoverContent, {
 			showArrow: false,
-			align: "start",
-			className: "min-w-(--anchor-width) gap-0 overflow-hidden rounded-2xl p-0",
+			align: "center",
+			side: "bottom",
+			collisionAvoidance: PICKER_COLLISION_AVOIDANCE,
+			className: "min-w-(--anchor-width) gap-0 overflow-hidden rounded-2xl p-0 border border-line-subtle",
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					className: "flex w-full items-center justify-center gap-2 border-b border-line-subtle",

package/dist/toast.js

@@ -133,7 +133,7 @@ function ToastIcon({ type }) {
 		]
 	});
 }
-const toastRootBaseClassName = "[--gap:12px] [--peek:12px] [--anchor-x:0px] [--anchor-y:0px] [--scale:calc(max(0,1-(var(--toast-placement-index)*0.04)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-placement-frontmost-height,var(--toast-height))] absolute z-[calc(1000-var(--toast-placement-index))] h-[var(--height)] min-h-[var(--height)] w-[min(335px,calc(100vw-32px))] overflow-visible rounded-lg border border-line bg-surface-overlay text-fg-primary shadow-[var(--elevation-e2-shadow)] pointer-events-auto select-none [transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(var(--collapsed-y))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms] after:absolute after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:pointer-events-auto after:content-[''] data-[expanded]:h-[var(--toast-height)] data-[expanded]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(var(--expanded-y))_scale(1)] data-[starting-style]:opacity-0 data-[starting-style]:[transform:translateX(var(--exit-x))_translateY(var(--exit-y))_scale(var(--scale))] data-[ending-style]:opacity-0 data-[limited]:opacity-0 [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateX(var(--exit-x))_translateY(var(--exit-y))_scale(var(--scale))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(calc(var(--anchor-y)+var(--toast-swipe-movement-y)-150%))_scale(var(--scale))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(calc(var(--anchor-y)+var(--toast-swipe-movement-y)-150%))_scale(1)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(calc(var(--anchor-y)+var(--toast-swipe-movement-y)+150%))_scale(var(--scale))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(calc(var(--anchor-y)+var(--toast-swipe-movement-y)+150%))_scale(1)] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)-150%))_translateY(var(--expanded-y))_scale(var(--scale))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)-150%))_translateY(var(--expanded-y))_scale(1)] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)+150%))_translateY(var(--expanded-y))_scale(var(--scale))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)+150%))_translateY(var(--expanded-y))_scale(1)]";
+const toastRootBaseClassName = "[--gap:12px] [--peek:12px] [--anchor-x:0px] [--anchor-y:0px] [--scale:calc(max(0,1-(var(--toast-placement-index)*0.04)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-placement-frontmost-height,var(--toast-height))] absolute z-[calc(1000-var(--toast-placement-index))] h-[var(--height)] min-h-[var(--height)] w-[min(335px,calc(100vw-32px))] overflow-visible rounded-lg border border-line bg-surface-overlay text-fg-primary shadow-[var(--elevation-e2-shadow)] pointer-events-auto select-none [transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(var(--collapsed-y))_scale(var(--scale))] [transition:transform_var(--duration-motion-surface)_var(--ease-gdt-out),opacity_var(--duration-motion-surface)_var(--ease-gdt-out)] motion-reduce:[transition:opacity_var(--duration-motion-surface)_var(--ease-gdt-out)] data-swiping:transition-none after:absolute after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:pointer-events-auto after:content-[''] data-[expanded]:h-[var(--toast-height)] data-[expanded]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(var(--expanded-y))_scale(1)] data-[starting-style]:opacity-0 data-[starting-style]:[transform:translateX(var(--exit-x))_translateY(var(--exit-y))_scale(var(--scale))] data-[ending-style]:opacity-0 data-[limited]:opacity-0 [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateX(var(--exit-x))_translateY(var(--exit-y))_scale(var(--scale))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(calc(var(--anchor-y)+var(--toast-swipe-movement-y)-150%))_scale(var(--scale))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(calc(var(--anchor-y)+var(--toast-swipe-movement-y)-150%))_scale(1)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(calc(var(--anchor-y)+var(--toast-swipe-movement-y)+150%))_scale(var(--scale))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(calc(var(--anchor-y)+var(--toast-swipe-movement-y)+150%))_scale(1)] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)-150%))_translateY(var(--expanded-y))_scale(var(--scale))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)-150%))_translateY(var(--expanded-y))_scale(1)] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)+150%))_translateY(var(--expanded-y))_scale(var(--scale))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)+150%))_translateY(var(--expanded-y))_scale(1)]";
 function getToastPlacement(item, isRtl = false) {
 	const side = item.positionerProps?.side ?? DEFAULT_TOAST_SIDE;
 	const align = item.positionerProps?.align ?? DEFAULT_TOAST_ALIGN;

package/dist/tooltip.d.ts

@@ -1,5 +1,6 @@
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 //#region src/tooltip.d.ts
+declare function TooltipProvider({ delay, timeout, ...props }: Tooltip$1.Provider.Props): import("react").JSX.Element;
 declare function Tooltip({ ...props }: Tooltip$1.Root.Props): import("react").JSX.Element;
 declare function TooltipTrigger({ ...props }: Tooltip$1.Trigger.Props): import("react").JSX.Element;
 type TooltipContentProps = Tooltip$1.Popup.Props & Pick<Tooltip$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & Pick<Tooltip$1.Portal.Props, "container"> & {
@@ -7,4 +8,4 @@ type TooltipContentProps = Tooltip$1.Popup.Props & Pick<Tooltip$1.Positioner.Pro
 };
 declare function TooltipContent({ className, container, side, sideOffset, align, alignOffset, showArrow, children, ...props }: TooltipContentProps): import("react").JSX.Element;
 //#endregion
-export { Tooltip, TooltipContent, TooltipTrigger };
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/tooltip.js

@@ -3,6 +3,13 @@ import { t as cn } from "./cn-BI_4DMBf.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 //#region src/tooltip.tsx
+function TooltipProvider({ delay = 100, timeout = 400, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
+		delay,
+		timeout,
+		...props
+	});
+}
 function Tooltip({ ...props }) {
 	return /* @__PURE__ */ jsx(Tooltip$1.Root, {
 		"data-slot": "tooltip",
@@ -27,7 +34,7 @@ function TooltipContent({ className, container, side = "top", sideOffset = 6, al
 			className: "pointer-events-none isolate z-50",
 			children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, {
 				"data-slot": "tooltip-content",
-				className: cn("z-50 relative inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-[6px] border border-line bg-surface-overlay px-3 py-2 text-gdt-sm font-medium text-fg-primary shadow-2 duration-100 has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+				className: cn("z-50 relative inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-[6px] border border-line bg-surface-overlay px-3 py-2 text-gdt-sm font-medium text-fg-primary shadow-2 transition-[opacity,scale,translate] duration-[var(--duration-motion-tooltip)] ease-gdt-out has-data-[slot=kbd]:pr-1.5 data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95 data-[side=bottom]:data-starting-style:translate-y-2 data-[side=bottom]:data-ending-style:translate-y-2 data-[side=top]:data-starting-style:-translate-y-2 data-[side=top]:data-ending-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=left]:data-ending-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=right]:data-ending-style:-translate-x-2 data-[side=inline-end]:data-starting-style:-translate-x-2 data-[side=inline-end]:data-ending-style:-translate-x-2 data-[side=inline-start]:data-starting-style:translate-x-2 data-[side=inline-start]:data-ending-style:translate-x-2 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100 motion-reduce:data-[side=bottom]:data-starting-style:translate-y-0 motion-reduce:data-[side=bottom]:data-ending-style:translate-y-0 motion-reduce:data-[side=top]:data-starting-style:translate-y-0 motion-reduce:data-[side=top]:data-ending-style:translate-y-0 motion-reduce:data-[side=left]:data-starting-style:translate-x-0 motion-reduce:data-[side=left]:data-ending-style:translate-x-0 motion-reduce:data-[side=right]:data-starting-style:translate-x-0 motion-reduce:data-[side=right]:data-ending-style:translate-x-0 motion-reduce:data-[side=inline-end]:data-starting-style:translate-x-0 motion-reduce:data-[side=inline-end]:data-ending-style:translate-x-0 motion-reduce:data-[side=inline-start]:data-starting-style:translate-x-0 motion-reduce:data-[side=inline-start]:data-ending-style:translate-x-0 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm", className),
 				...props,
 				children: [children, showArrow ? /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-surface-overlay before:border before:border-line before:[transform:translate(-50%,50%)_rotate(45deg)]" }) : null]
 			})
@@ -35,4 +42,4 @@ function TooltipContent({ className, container, side = "top", sideOffset = 6, al
 	});
 }
 //#endregion
-export { Tooltip, TooltipContent, TooltipTrigger };
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/use-reduced-motion-BDvOK14x.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+//#region src/lib/use-reduced-motion.ts
+const QUERY = "(prefers-reduced-motion: reduce)";
+function subscribeToReducedMotion(onChange) {
+	const media = window.matchMedia(QUERY);
+	const update = () => onChange(media.matches);
+	update();
+	media.addEventListener("change", update);
+	return () => media.removeEventListener("change", update);
+}
+function useReducedMotion() {
+	const [reduced, setReduced] = React.useState(false);
+	React.useEffect(() => subscribeToReducedMotion(setReduced), []);
+	return reduced;
+}
+//#endregion
+export { useReducedMotion as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@giddaa-housing/ui",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Giddaa reusable UI component library.",
   "type": "module",
   "private": false,
@@ -65,6 +65,10 @@
       "types": "./dist/calendar.d.ts",
       "import": "./dist/calendar.js"
     },
+    "./call-card": {
+      "types": "./dist/call-card.d.ts",
+      "import": "./dist/call-card.js"
+    },
     "./card": {
       "types": "./dist/card.d.ts",
       "import": "./dist/card.js"
@@ -77,6 +81,10 @@
       "types": "./dist/chart.d.ts",
       "import": "./dist/chart.js"
     },
+    "./chat": {
+      "types": "./dist/chat.d.ts",
+      "import": "./dist/chat.js"
+    },
     "./checkbox": {
       "types": "./dist/checkbox.d.ts",
       "import": "./dist/checkbox.js"
@@ -161,6 +169,10 @@
       "types": "./dist/infotip.d.ts",
       "import": "./dist/infotip.js"
     },
+    "./infinite-scroll": {
+      "types": "./dist/infinite-scroll.d.ts",
+      "import": "./dist/infinite-scroll.js"
+    },
     "./input": {
       "types": "./dist/input.d.ts",
       "import": "./dist/input.js"
@@ -213,6 +225,10 @@
       "types": "./dist/media-player.d.ts",
       "import": "./dist/media-player.js"
     },
+    "./message": {
+      "types": "./dist/message.d.ts",
+      "import": "./dist/message.js"
+    },
     "./multi-step-form": {
       "types": "./dist/multi-step-form.d.ts",
       "import": "./dist/multi-step-form.js"
@@ -383,6 +399,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.5.0",
+    "@tanstack/react-virtual": "^3.14.7",
     "@tiptap/extension-color": "^3.22.5",
     "@tiptap/extension-image": "^3.22.5",
     "@tiptap/extension-placeholder": "^3.22.5",

package/dist/picker-lzgmsNfG.js

@@ -1,32 +0,0 @@
-import { t as cn } from "./cn-BI_4DMBf.js";
-import { Button } from "./button.js";
-import { PopoverTrigger } from "./popover.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/lib/picker.tsx
-function PickerTrigger({ icon: Icon, displayValue, placeholder, disabled, open, className }) {
-	return /* @__PURE__ */ jsxs(PopoverTrigger, {
-		disabled,
-		className: cn("flex h-10 w-full items-center justify-between rounded-full border px-3.5 text-gdt-sm transition-[border-color,box-shadow] outline-none", 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 size-4 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 { PickerTrigger as n, PickerFooter as t };