@giddaa-housing/ui 2.1.0 → 3.0.1

package/dist/chat.js

@@ -0,0 +1,528 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Button } from "./button.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { FileText, Image, Plus, Send, Video } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/chat.tsx
+/**
+* The chat shell — a column of header, body and footer.
+*
+* **It sets no height on purpose.** The consumer decides: `h-[708px]`, `h-full`,
+* `h-dvh`. Note that `ChatBody` can only scroll inside a bounded height — give
+* this element one, or the body grows with its content and the page scrolls
+* instead.
+*
+* Header and footer sit outside the scrolling region, so they never move and
+* never need measuring. Anything that should pin *within* the scroll — tabs, a
+* filter row — belongs in `ChatBodyBar`.
+*/
+function Chat({ className, ...props }) {
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "chat",
+		className: cn("relative flex min-h-0 flex-col overflow-hidden rounded-[40px] border border-line-subtle bg-surface", className),
+		...props
+	});
+}
+/**
+* The fixed header. Composes anything — avatar, title, actions, a sentiment bar.
+*
+* Its own height is free: it can wrap, gain a row, or lose one, and nothing
+* downstream cares. Only the body scrolls.
+*/
+function ChatHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("header", {
+		"data-slot": "chat-header",
+		className: cn("flex min-h-20 shrink-0 items-center gap-3 border-b border-line-subtle bg-canvas px-3.5", className),
+		...props
+	});
+}
+/** The header's primary line — who the conversation is with. */
+function ChatHeaderTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("h2", {
+		"data-slot": "chat-header-title",
+		className: cn("truncate text-gdt-md leading-[22px] font-semibold text-fg-primary", className),
+		...props
+	});
+}
+/** The header's secondary line — timezone, status, last seen. */
+function ChatHeaderDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "chat-header-description",
+		className: cn("truncate text-gdt-xs leading-[18px] text-fg-secondary", className),
+		...props
+	});
+}
+/** Avatar and contact copy. Fills the space between navigation and actions. */
+function ChatHeaderIdentity({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chat-header-identity",
+		className: cn("flex min-w-0 flex-1 items-center gap-3", className),
+		...props
+	});
+}
+/** Stacks the contact name and presence line at the Figma one-pixel gap. */
+function ChatHeaderText({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chat-header-text",
+		className: cn("flex min-w-0 flex-col gap-px", className),
+		...props
+	});
+}
+/** Trailing icon actions such as video and voice calling. */
+function ChatHeaderActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chat-header-actions",
+		className: cn("flex shrink-0 items-center gap-3", className),
+		...props
+	});
+}
+/** A 24px header affordance. The caller supplies the icon and behaviour. */
+function ChatHeaderAction({ className, size = "icon-xs", variant = "ghost", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "chat-header-action",
+		className: cn("text-fg-primary [&_svg:not([class*='size-'])]:size-6", className),
+		size,
+		type: "button",
+		variant,
+		...props
+	});
+}
+/**
+* The fixed footer. Wraps `ChatInput`, and owns only the chrome around it —
+* the rule and the surface. The composer owns its internal bar padding.
+*/
+function ChatFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("footer", {
+		"data-slot": "chat-footer",
+		className: cn("shrink-0 border-t border-line-subtle bg-canvas", className),
+		...props
+	});
+}
+/**
+* Distance from the bottom, in px, that still counts as being at the bottom.
+*
+* Big enough to absorb sub-pixel layout rounding, small enough that it never
+* feels sticky.
+*/
+const SCROLL_EDGE_THRESHOLD = 8;
+/** Movement below this is layout jitter, not deliberate reader input. */
+const SUBPIXEL_EPSILON = .5;
+const ChatBodyContext = React.createContext(null);
+function assignRef(ref, value) {
+	if (typeof ref === "function") {
+		ref(value);
+		return;
+	}
+	if (ref) ref.current = value;
+}
+function getStableAnchor(element, content) {
+	const stable = element.closest("[data-scroll-anchor],[data-message-id]");
+	if (!stable || !content.contains(stable)) return { element };
+	const scrollAnchor = stable.getAttribute("data-scroll-anchor");
+	if (scrollAnchor !== null) return {
+		element: stable,
+		attribute: "data-scroll-anchor",
+		value: scrollAnchor
+	};
+	return {
+		element: stable,
+		attribute: "data-message-id",
+		value: stable.getAttribute("data-message-id") ?? void 0
+	};
+}
+function findAnchorByAttribute(content, attribute, value) {
+	for (const element of content.querySelectorAll(`[${attribute}]`)) if (element.getAttribute(attribute) === value) return element;
+	return null;
+}
+/**
+* Read the body's scroll state — for a "jump to bottom" or "N new messages"
+* affordance. Must be called inside `<ChatBody>`.
+*/
+function useChatBody() {
+	const context = React.useContext(ChatBodyContext);
+	if (!context) throw new Error("useChatBody must be called inside <ChatBody>.");
+	return context;
+}
+/**
+* The scrolling region of a chat. Composes anything — messages, a table, an
+* empty state. It owns scrolling and nothing else.
+*
+* Two behaviours, and they are the whole point:
+*
+* **Following.** New content keeps the bottom in view — but only while the
+* reader is already there. Any deliberate scroll upward hands control over
+* immediately; returning to the bottom hands it back. It never yanks.
+*
+* **Prepend.** When older messages load in above, the row you were reading
+* stays exactly where it was. This works by remembering an element and its
+* offset from the viewport, then putting it back after the layout changes —
+* which holds no matter where the content grew.
+*
+* Both are driven by one `ResizeObserver` on the content, so they also cover an
+* image finishing its load or a bubble reflowing — things a dependency on a
+* message array cannot see. It fires once on observe, which is what opens the
+* view at the latest message.
+*
+* Children may use `sticky top-0` (see `ChatBodyBar`) — this is their scroll
+* container.
+*/
+function ChatBody({ className, children, onScroll, ref, ...props }) {
+	const viewportRef = React.useRef(null);
+	const contentRef = React.useRef(null);
+	const [isPinned, setIsPinned] = React.useState(true);
+	const setViewportRef = React.useCallback((node) => {
+		viewportRef.current = node;
+		assignRef(ref, node);
+	}, [ref]);
+	const followingRef = React.useRef(true);
+	const lastScrollTopRef = React.useRef(0);
+	const anchorRef = React.useRef(null);
+	const scrollToBottom = React.useCallback((behavior = "smooth") => {
+		const viewport = viewportRef.current;
+		if (!viewport) return;
+		followingRef.current = true;
+		setIsPinned(true);
+		viewport.scrollTo({
+			top: viewport.scrollHeight - viewport.clientHeight,
+			behavior
+		});
+	}, []);
+	/**
+	* Remember the element under the middle of the viewport, and how far below
+	* the viewport's top edge it sits.
+	*
+	* The middle rather than the top on purpose: `ChatBodyBar` is sticky at the
+	* top, so probing there would anchor to a bar that never moves and defeat
+	* the whole mechanism.
+	*/
+	const captureAnchor = React.useCallback(() => {
+		const viewport = viewportRef.current;
+		const content = contentRef.current;
+		if (!viewport || !content || followingRef.current) {
+			anchorRef.current = null;
+			return;
+		}
+		const bounds = viewport.getBoundingClientRect();
+		const element = document.elementFromPoint(bounds.left + bounds.width / 2, bounds.top + bounds.height / 2);
+		if (!element || !viewport.contains(element)) {
+			anchorRef.current = null;
+			return;
+		}
+		const anchor = getStableAnchor(element, content);
+		anchorRef.current = {
+			...anchor,
+			top: anchor.element.getBoundingClientRect().top - bounds.top
+		};
+	}, []);
+	/** Put the remembered element back where it was. */
+	const restoreAnchor = React.useCallback(() => {
+		const viewport = viewportRef.current;
+		const content = contentRef.current;
+		const anchor = anchorRef.current;
+		if (!viewport || !content || !anchor) return;
+		let element = anchor.element;
+		if (!element.isConnected && anchor.attribute && anchor.value !== void 0) element = findAnchorByAttribute(content, anchor.attribute, anchor.value) ?? element;
+		if (!element.isConnected || !content.contains(element)) return;
+		const viewportTop = viewport.getBoundingClientRect().top;
+		const delta = element.getBoundingClientRect().top - viewportTop - anchor.top;
+		if (Math.abs(delta) <= SUBPIXEL_EPSILON) return;
+		viewport.scrollTop += delta;
+		anchor.element = element;
+		anchor.top = element.getBoundingClientRect().top - viewportTop;
+	}, []);
+	const handleScroll = React.useCallback((event) => {
+		onScroll?.(event);
+		if (event.defaultPrevented) return;
+		const viewport = event.currentTarget;
+		const previous = lastScrollTopRef.current;
+		const current = viewport.scrollTop;
+		lastScrollTopRef.current = current;
+		if (viewport.scrollHeight - current - viewport.clientHeight <= SCROLL_EDGE_THRESHOLD) followingRef.current = true;
+		else if (current < previous - SUBPIXEL_EPSILON) followingRef.current = false;
+		captureAnchor();
+		setIsPinned(followingRef.current);
+	}, [captureAnchor, onScroll]);
+	React.useLayoutEffect(() => {
+		scrollToBottom("instant");
+	}, [scrollToBottom]);
+	React.useEffect(() => {
+		const content = contentRef.current;
+		if (!content) return;
+		const observer = new ResizeObserver(() => {
+			if (followingRef.current) scrollToBottom("instant");
+			else restoreAnchor();
+		});
+		observer.observe(content);
+		return () => observer.disconnect();
+	}, [scrollToBottom, restoreAnchor]);
+	const context = React.useMemo(() => ({
+		isPinned,
+		scrollToBottom
+	}), [isPinned, scrollToBottom]);
+	return /* @__PURE__ */ jsx(ChatBodyContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			ref: setViewportRef,
+			"data-slot": "chat-body",
+			"data-pinned": isPinned || void 0,
+			className: cn("min-h-0 flex-1 overflow-y-auto overscroll-contain bg-surface px-3.5 py-3 [background-image:radial-gradient(circle,color-mix(in_srgb,var(--color-line)_55%,transparent)_0.75px,transparent_0.75px)] [background-position:0_0] [background-size:24px_24px] [overflow-anchor:none]", className),
+			onScroll: handleScroll,
+			children: /* @__PURE__ */ jsx("div", {
+				ref: contentRef,
+				"data-slot": "chat-body-content",
+				children
+			})
+		})
+	});
+}
+/**
+* A bar pinned to the top of the scrolling region — tabs, a filter row, a date
+* header. Content scrolls behind it.
+*
+* It needs an opaque background to hide what passes under it; `bg-canvas`
+* matches the panel surface and can be overridden.
+*/
+function ChatBodyBar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chat-body-bar",
+		className: cn("sticky top-0 z-10 bg-canvas", className),
+		...props
+	});
+}
+/**
+* Bounds one dated group so its sticky divider is pushed away by the next
+* section instead of stacking with it.
+*/
+function ChatDateSection({ className, ...props }) {
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "chat-date-section",
+		className: cn("relative flex min-w-0 flex-col gap-3 [&+&]:mt-5", className),
+		...props
+	});
+}
+/** Sticky date pill for the messages in its containing `ChatDateSection`. */
+function ChatDateDivider({ className, ...props }) {
+	return /* @__PURE__ */ jsx("time", {
+		"data-slot": "chat-date-divider",
+		className: cn("sticky top-3 z-10 self-center rounded-[14px] bg-canvas px-3 py-1.25 text-gdt-sm font-bold text-fg-secondary shadow-1", className),
+		...props
+	});
+}
+/**
+* The default menu — File, Video, Image. Spread it to *extend* rather than
+* replace: `items={[...defaultChatInputAttachItems, { kind: "document", … }]}`.
+*/
+const defaultChatInputAttachItems = [
+	{
+		kind: "file",
+		label: "File",
+		icon: /* @__PURE__ */ jsx(FileText, {}),
+		accept: "*/*"
+	},
+	{
+		kind: "video",
+		label: "Video",
+		icon: /* @__PURE__ */ jsx(Video, {}),
+		accept: "video/*"
+	},
+	{
+		kind: "image",
+		label: "Image",
+		icon: /* @__PURE__ */ jsx(Image, {}),
+		accept: "image/*"
+	}
+];
+const ChatInputContext = React.createContext(null);
+function useChatInputContext() {
+	const context = React.useContext(ChatInputContext);
+	if (!context) throw new Error("ChatInput parts must be rendered inside <ChatInput>.");
+	return context;
+}
+/**
+* The chat composer. A real `<form>`, so Enter and the send button are one
+* submit path rather than two.
+*
+* Compose the parts inside it — the layout is yours, the behaviour is ours.
+*/
+function ChatInput({ value, defaultValue, onValueChange, onSend, clearOnSend = true, disabled = false, className, children, ...props }) {
+	const [uncontrolled, setUncontrolled] = React.useState(defaultValue ?? "");
+	const isControlled = value !== void 0;
+	const text = isControlled ? value : uncontrolled;
+	const canSend = onSend !== void 0;
+	const setValue = React.useCallback((next) => {
+		if (!isControlled) setUncontrolled(next);
+		onValueChange?.(next);
+	}, [isControlled, onValueChange]);
+	const submit = React.useCallback(() => {
+		const trimmed = text.trim();
+		if (!trimmed || disabled || !onSend) return;
+		const accepted = onSend(trimmed);
+		if (clearOnSend && accepted !== false) setValue("");
+	}, [
+		text,
+		disabled,
+		onSend,
+		clearOnSend,
+		setValue
+	]);
+	const context = React.useMemo(() => ({
+		value: text,
+		setValue,
+		disabled,
+		canSend,
+		submit
+	}), [
+		text,
+		setValue,
+		disabled,
+		canSend,
+		submit
+	]);
+	return /* @__PURE__ */ jsx(ChatInputContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("form", {
+			"data-slot": "chat-input",
+			"data-disabled": disabled || void 0,
+			className: cn("flex min-h-19 w-full min-w-0 items-center gap-2.5 bg-canvas px-3.5", className),
+			...props,
+			onSubmit: (event) => {
+				event.preventDefault();
+				submit();
+			},
+			children
+		})
+	});
+}
+/** The `+` button. Opens a dropdown of file kinds, each opening a filtered picker. */
+function ChatInputAttach({ onAttach, items = defaultChatInputAttachItems, className, contentClassName, disabled: disabledProp = false, "aria-label": ariaLabel = "Add attachment", children, size = "icon-xs", variant = "ghost", ...props }) {
+	const { disabled } = useChatInputContext();
+	const fileRef = React.useRef(null);
+	const kindRef = React.useRef("");
+	const [open, setOpen] = React.useState(false);
+	const hasActionableItem = items.some((item) => item.onSelect !== void 0 || onAttach !== void 0);
+	const isDisabled = disabled || disabledProp || !hasActionableItem;
+	const handleSelect = (item) => {
+		setOpen(false);
+		if (item.onSelect) {
+			item.onSelect();
+			return;
+		}
+		const input = fileRef.current;
+		if (!input || onAttach === void 0) return;
+		kindRef.current = item.kind;
+		input.accept = item.accept ?? "*/*";
+		input.value = "";
+		input.click();
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+		ref: fileRef,
+		className: "hidden",
+		disabled: isDisabled,
+		multiple: true,
+		onChange: (event) => {
+			const files = Array.from(event.target.files ?? []);
+			if (files.length > 0) onAttach?.(files, kindRef.current);
+		},
+		tabIndex: -1,
+		type: "file"
+	}), /* @__PURE__ */ jsxs(DropdownMenu, {
+		onOpenChange: (nextOpen) => setOpen(isDisabled ? false : nextOpen),
+		open: isDisabled ? false : open,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			disabled: isDisabled,
+			render: /* @__PURE__ */ jsx(Button, {
+				...props,
+				"aria-label": ariaLabel,
+				"data-slot": "chat-input-attach",
+				className: cn("shrink-0 text-fg-secondary data-popup-open:bg-action-tertiary [&_svg:not([class*='size-'])]:size-6", className),
+				disabled: isDisabled,
+				size,
+				type: "button",
+				variant
+			}),
+			children: children ?? /* @__PURE__ */ jsx(Plus, {})
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align: "start",
+			className: cn("w-auto min-w-28 rounded-lg bg-surface-overlay shadow-2", contentClassName),
+			side: "top",
+			sideOffset: 8,
+			children: items.map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				className: "gap-2.5 px-2.5 py-2 text-gdt-sm [&_svg:not([class*='size-'])]:size-6",
+				onClick: () => handleSelect(item),
+				children: [item.icon, item.label]
+			}, item.kind))
+		})]
+	})] });
+}
+/**
+* The single-line message field.
+*
+* Enter sends. The `isComposing` guard stops Enter from sending while an IME
+* candidate is being confirmed.
+*/
+function ChatInputField({ className, children, disabled: disabledProp = false, onKeyDown, type = "text", ...props }) {
+	const { value, setValue, disabled, canSend, submit } = useChatInputContext();
+	const isDisabled = disabled || disabledProp || !canSend;
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		"data-slot": "chat-input-field",
+		className: "h-11 rounded-[22px] border-[1.5px] border-transparent bg-surface-raised focus-within:border-line-focus focus-within:shadow-[0_0_0_3px_var(--color-line-focus)] focus-within:inset-ring-0",
+		children: [/* @__PURE__ */ jsx(InputGroupInput, {
+			...props,
+			className: cn("px-4 text-gdt-sm", className),
+			disabled: isDisabled,
+			onChange: (event) => setValue(event.target.value),
+			onKeyDown: (event) => {
+				onKeyDown?.(event);
+				if (event.defaultPrevented) return;
+				if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
+				event.preventDefault();
+				submit();
+			},
+			type,
+			value
+		}), children]
+	});
+}
+/**
+* An accessible button inside the field — emoji, mic, whatever. The caller
+* owns the action, while the component owns the input-group placement.
+*/
+function ChatInputAction({ align = "inline-start", addonClassName, className, disabled: disabledProp = false, size = "icon-xs", ...props }) {
+	const { disabled, canSend } = useChatInputContext();
+	return /* @__PURE__ */ jsx(InputGroupAddon, {
+		"data-slot": "chat-input-action",
+		align,
+		className: cn("p-0 has-[>button]:m-0", align === "inline-start" ? "pl-4" : "pr-4", addonClassName),
+		children: /* @__PURE__ */ jsx(InputGroupButton, {
+			...props,
+			className: cn("text-fg-secondary [&_svg:not([class*='size-'])]:size-6", className),
+			disabled: disabled || disabledProp || !canSend,
+			size,
+			type: "button"
+		})
+	});
+}
+/** Submit button. Disabled while empty — there is nothing to send. */
+function ChatInputSend({ className, disabled: disabledProp = false, "aria-label": ariaLabel = "Send message", size = "icon", variant = "primary", ...props }) {
+	const { value, disabled, canSend } = useChatInputContext();
+	const unavailable = disabled || disabledProp || !canSend;
+	const empty = value.trim().length === 0;
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		"aria-label": ariaLabel,
+		"data-slot": "chat-input-send",
+		"data-empty": empty && !unavailable ? true : void 0,
+		className: cn("size-11 shrink-0 rounded-full disabled:bg-action-tertiary disabled:text-fg-caption-placeholder disabled:opacity-100 [&_svg:not([class*='size-'])]:size-5.5", className),
+		disabled: unavailable || empty,
+		size,
+		type: "submit",
+		variant,
+		children: /* @__PURE__ */ jsx(Send, {})
+	});
+}
+//#endregion
+export { Chat, ChatBody, ChatBodyBar, ChatDateDivider, ChatDateSection, ChatFooter, ChatHeader, ChatHeaderAction, ChatHeaderActions, ChatHeaderDescription, ChatHeaderIdentity, ChatHeaderText, ChatHeaderTitle, ChatInput, ChatInputAction, ChatInputAttach, ChatInputField, ChatInputSend, defaultChatInputAttachItems, useChatBody };

package/dist/checkbox.js

@@ -7,7 +7,7 @@ import { cva } from "class-variance-authority";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 import { CheckboxGroup } from "@base-ui/react/checkbox-group";
 //#region src/checkbox.tsx
-const checkboxVariants = cva("peer group/checkbox relative flex shrink-0 items-center justify-center rounded-sm border bg-canvas text-transparent outline-none transition-[background-color,border-color,box-shadow,color] 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)] border-line data-unchecked:hover:border-line-focus data-unchecked:hover:bg-surface-brand-subtle data-checked:border-action-primary data-checked:bg-action-primary data-checked:text-fg-on-brand data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder size-5 [--checkbox-icon-size:0.75rem] group-data-[size=sm]/field:size-4 group-data-[size=sm]/field:[--checkbox-icon-size:0.625rem] group-data-[size=md]/field:size-5 group-data-[size=md]/field:[--checkbox-icon-size:0.75rem] group-data-[size=lg]/field:size-6 group-data-[size=lg]/field:[--checkbox-icon-size:0.875rem]", { variants: { size: {
+const checkboxVariants = cva("peer group/checkbox relative flex shrink-0 items-center justify-center rounded-sm border bg-canvas text-transparent outline-none transition-[background-color,border-color,box-shadow,color,scale] duration-[var(--duration-motion-press)] ease-gdt-out active:scale-[0.97] motion-reduce:active:scale-100 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)] border-line data-unchecked:hover:border-line-focus data-unchecked:hover:bg-surface-brand-subtle data-checked:border-action-primary data-checked:bg-action-primary data-checked:text-fg-on-brand data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder data-disabled:active:scale-100 size-5 [--checkbox-icon-size:0.75rem] group-data-[size=sm]/field:size-4 group-data-[size=sm]/field:[--checkbox-icon-size:0.625rem] group-data-[size=md]/field:size-5 group-data-[size=md]/field:[--checkbox-icon-size:0.75rem] group-data-[size=lg]/field:size-6 group-data-[size=lg]/field:[--checkbox-icon-size:0.875rem]", { variants: { size: {
 	sm: "size-4 [--checkbox-icon-size:0.625rem]",
 	md: "size-5 [--checkbox-icon-size:0.75rem]",
 	lg: "size-6 [--checkbox-icon-size:0.875rem]"

package/dist/combobox.js

@@ -40,7 +40,7 @@ const comboboxInputVariants = cva("w-auto has-data-popup-open:rounded-2xl has-da
 	} },
 	defaultVariants: { size: "md" }
 });
-const comboboxContentVariants = cva("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width))] origin-(--transform-origin) overflow-hidden border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:mb-1 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", {
+const comboboxContentVariants = cva("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width))] origin-(--transform-origin) overflow-hidden border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) transition-[opacity,scale,translate] duration-[var(--duration-motion-popup)] ease-gdt-out data-[chips=true]:min-w-(--anchor-width) data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95 data-[side=bottom]:data-starting-style:translate-y-2 data-[side=bottom]:data-ending-style:translate-y-2 data-[side=top]:data-starting-style:-translate-y-2 data-[side=top]:data-ending-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=left]:data-ending-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=right]:data-ending-style:-translate-x-2 data-[side=inline-end]:data-starting-style:-translate-x-2 data-[side=inline-end]:data-ending-style:-translate-x-2 data-[side=inline-start]:data-starting-style:translate-x-2 data-[side=inline-start]:data-ending-style:translate-x-2 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100 motion-reduce:data-[side=bottom]:data-starting-style:translate-y-0 motion-reduce:data-[side=bottom]:data-ending-style:translate-y-0 motion-reduce:data-[side=top]:data-starting-style:translate-y-0 motion-reduce:data-[side=top]:data-ending-style:translate-y-0 motion-reduce:data-[side=left]:data-starting-style:translate-x-0 motion-reduce:data-[side=left]:data-ending-style:translate-x-0 motion-reduce:data-[side=right]:data-starting-style:translate-x-0 motion-reduce:data-[side=right]:data-ending-style:translate-x-0 motion-reduce:data-[side=inline-end]:data-starting-style:translate-x-0 motion-reduce:data-[side=inline-end]:data-ending-style:translate-x-0 motion-reduce:data-[side=inline-start]:data-starting-style:translate-x-0 motion-reduce:data-[side=inline-start]:data-ending-style:translate-x-0 *:data-[slot=input-group]:mb-1", {
 	variants: { size: {
 		sm: "rounded-lg p-1",
 		md: "rounded-xl p-1.5",

package/dist/cta.d.ts

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

package/dist/cta.js

@@ -1,3 +1,4 @@
+"use client";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { Button, ButtonLink } from "./button.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/data-table.d.ts

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

package/dist/details-card.js

@@ -1,3 +1,4 @@
+"use client";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { jsx } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";

package/dist/dialog.js

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

package/dist/dropdown-menu.js

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

package/dist/editorial-card.js

@@ -1,3 +1,4 @@
+"use client";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
 import { buttonVariants } from "./button.js";

package/dist/file-upload.js

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

package/dist/footer.js

@@ -1,3 +1,4 @@
+"use client";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { InputGroup, InputGroupButton, InputGroupInput } from "./input-group.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/infinite-scroll.js

@@ -74,7 +74,7 @@ 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 })]
+		children: [/* @__PURE__ */ jsx(Loader2, { className: "animate-spin motion-reduce:animate-none" }), /* @__PURE__ */ jsx("span", { children: label })]
 	});
 }
 function InfiniteScrollLoading({ children }) {