@townco/ui 0.1.16 → 0.1.18

package/dist/gui/components/Conversation.js

@@ -1,147 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-export const Conversation = React.forwardRef(
-	(
-		{
-			autoScroll = true,
-			isStreaming = false,
-			scrollBehavior = "smooth",
-			scrollThreshold = 100,
-			showScrollButton = true,
-			scrollButton,
-			className,
-			children,
-			...props
-		},
-		ref,
-	) => {
-		const containerRef = useRef(null);
-		const [isNearBottom, setIsNearBottom] = useState(true);
-		const [showButton, setShowButton] = useState(false);
-		const lastScrollTopRef = useRef(0);
-		// Combine refs
-		React.useImperativeHandle(ref, () => {
-			if (!containerRef.current) {
-				throw new Error("Container ref not initialized");
-			}
-			return containerRef.current;
-		});
-		// Check if user is near bottom of scroll area
-		const checkScrollPosition = useCallback(() => {
-			const container = containerRef.current;
-			if (!container) return;
-			const { scrollTop, scrollHeight, clientHeight } = container;
-			const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-			const nearBottom = distanceFromBottom < scrollThreshold;
-			setIsNearBottom(nearBottom);
-			setShowButton(!nearBottom && showScrollButton);
-			lastScrollTopRef.current = scrollTop;
-		}, [scrollThreshold, showScrollButton]);
-		// Scroll to bottom
-		const scrollToBottom = useCallback(
-			(behavior = scrollBehavior) => {
-				const container = containerRef.current;
-				if (!container) return;
-				container.scrollTo({
-					top: container.scrollHeight,
-					behavior,
-				});
-			},
-			[scrollBehavior],
-		);
-		// Auto-scroll when new content appears and user is near bottom
-		useEffect(() => {
-			if (!autoScroll) return;
-			const container = containerRef.current;
-			if (!container) return;
-			// Always scroll during streaming if user is near bottom
-			if (isStreaming && isNearBottom) {
-				scrollToBottom("auto");
-			}
-			// Scroll on new messages if near bottom
-			else if (!isStreaming && isNearBottom) {
-				scrollToBottom();
-			}
-		}, [autoScroll, isStreaming, isNearBottom, scrollToBottom]);
-		// Set up scroll listener
-		useEffect(() => {
-			const container = containerRef.current;
-			if (!container) return;
-			const handleScroll = () => {
-				checkScrollPosition();
-			};
-			container.addEventListener("scroll", handleScroll, { passive: true });
-			// Check initial position
-			checkScrollPosition();
-			return () => {
-				container.removeEventListener("scroll", handleScroll);
-			};
-		}, [checkScrollPosition]);
-		// Watch for resize events
-		useEffect(() => {
-			const container = containerRef.current;
-			if (!container) return;
-			const resizeObserver = new ResizeObserver(() => {
-				if (isNearBottom && autoScroll) {
-					scrollToBottom("auto");
-				}
-			});
-			resizeObserver.observe(container);
-			return () => {
-				resizeObserver.disconnect();
-			};
-		}, [isNearBottom, autoScroll, scrollToBottom]);
-		return _jsxs("div", {
-			className: "relative flex-1",
-			children: [
-				_jsx("div", {
-					ref: containerRef,
-					className: cn(
-						"h-full overflow-y-auto overflow-x-hidden",
-						"scrollbar-thin scrollbar-thumb-[border] scrollbar-track-transparent",
-						className,
-					),
-					...props,
-					children: _jsx("div", {
-						className: "flex flex-col gap-4 px-4 py-4",
-						children: children,
-					}),
-				}),
-				showButton &&
-					_jsx("div", {
-						className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10",
-						children:
-							scrollButton ||
-							_jsxs("button", {
-								type: "button",
-								onClick: () => scrollToBottom(),
-								className:
-									"px-4 py-2 rounded-full bg-card border border-border shadow-lg hover:shadow-xl hover:bg-card/90 transition-all text-sm font-medium text-foreground flex items-center gap-2",
-								"aria-label": "Scroll to bottom",
-								children: [
-									_jsx("svg", {
-										className: "w-4 h-4",
-										fill: "none",
-										stroke: "currentColor",
-										viewBox: "0 0 24 24",
-										xmlns: "http://www.w3.org/2000/svg",
-										role: "img",
-										"aria-label": "Down arrow",
-										children: _jsx("path", {
-											strokeLinecap: "round",
-											strokeLinejoin: "round",
-											strokeWidth: 2,
-											d: "M19 14l-7 7m0 0l-7-7m7 7V3",
-										}),
-									}),
-									"Scroll to bottom",
-								],
-							}),
-					}),
-			],
-		});
-	},
-);
+export const Conversation = React.forwardRef(({ autoScroll = true, isStreaming = false, scrollBehavior = "smooth", scrollThreshold = 100, showScrollButton = true, scrollButton, className, children, ...props }, ref) => {
+    const containerRef = useRef(null);
+    const [isNearBottom, setIsNearBottom] = useState(true);
+    const [showButton, setShowButton] = useState(false);
+    const lastScrollTopRef = useRef(0);
+    // Combine refs
+    React.useImperativeHandle(ref, () => {
+        if (!containerRef.current) {
+            throw new Error("Container ref not initialized");
+        }
+        return containerRef.current;
+    });
+    // Check if user is near bottom of scroll area
+    const checkScrollPosition = useCallback(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+        const nearBottom = distanceFromBottom < scrollThreshold;
+        setIsNearBottom(nearBottom);
+        setShowButton(!nearBottom && showScrollButton);
+        lastScrollTopRef.current = scrollTop;
+    }, [scrollThreshold, showScrollButton]);
+    // Scroll to bottom
+    const scrollToBottom = useCallback((behavior = scrollBehavior) => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        container.scrollTo({
+            top: container.scrollHeight,
+            behavior,
+        });
+    }, [scrollBehavior]);
+    // Auto-scroll when new content appears and user is near bottom
+    useEffect(() => {
+        if (!autoScroll)
+            return;
+        const container = containerRef.current;
+        if (!container)
+            return;
+        // Always scroll during streaming if user is near bottom
+        if (isStreaming && isNearBottom) {
+            scrollToBottom("auto");
+        }
+        // Scroll on new messages if near bottom
+        else if (!isStreaming && isNearBottom) {
+            scrollToBottom();
+        }
+    }, [autoScroll, isStreaming, isNearBottom, scrollToBottom]);
+    // Set up scroll listener
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const handleScroll = () => {
+            checkScrollPosition();
+        };
+        container.addEventListener("scroll", handleScroll, { passive: true });
+        // Check initial position
+        checkScrollPosition();
+        return () => {
+            container.removeEventListener("scroll", handleScroll);
+        };
+    }, [checkScrollPosition]);
+    // Watch for resize events
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            if (isNearBottom && autoScroll) {
+                scrollToBottom("auto");
+            }
+        });
+        resizeObserver.observe(container);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [isNearBottom, autoScroll, scrollToBottom]);
+    return (_jsxs("div", { className: "relative flex-1", children: [_jsx("div", { ref: containerRef, className: cn("h-full overflow-y-auto overflow-x-hidden", "scrollbar-thin scrollbar-thumb-[border] scrollbar-track-transparent", className), ...props, children: _jsx("div", { className: "flex flex-col gap-4 px-4 py-4", children: children }) }), showButton && (_jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10", children: scrollButton || (_jsxs("button", { type: "button", onClick: () => scrollToBottom(), className: "px-4 py-2 rounded-full bg-card border border-border shadow-lg hover:shadow-xl hover:bg-card/90 transition-all text-sm font-medium text-foreground flex items-center gap-2", "aria-label": "Scroll to bottom", children: [_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Down arrow", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }), "Scroll to bottom"] })) }))] }));
+});
 Conversation.displayName = "Conversation";

package/dist/gui/components/Dialog.d.ts

@@ -1,65 +1,19 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as React from "react";
 declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
-declare const DialogTrigger: React.ForwardRefExoticComponent<
-	DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>
->;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
-declare const DialogClose: React.ForwardRefExoticComponent<
-	DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>
->;
-declare const DialogOverlay: React.ForwardRefExoticComponent<
-	Omit<
-		DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>,
-		"ref"
-	> &
-		React.RefAttributes<HTMLDivElement>
->;
-declare const DialogContent: React.ForwardRefExoticComponent<
-	Omit<
-		DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>,
-		"ref"
-	> &
-		React.RefAttributes<HTMLDivElement>
->;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: {
-	({
-		className,
-		...props
-	}: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-	displayName: string;
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
 };
 declare const DialogFooter: {
-	({
-		className,
-		...props
-	}: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-	displayName: string;
-};
-declare const DialogTitle: React.ForwardRefExoticComponent<
-	Omit<
-		DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>,
-		"ref"
-	> &
-		React.RefAttributes<HTMLHeadingElement>
->;
-declare const DialogDescription: React.ForwardRefExoticComponent<
-	Omit<
-		DialogPrimitive.DialogDescriptionProps &
-			React.RefAttributes<HTMLParagraphElement>,
-		"ref"
-	> &
-		React.RefAttributes<HTMLParagraphElement>
->;
-export {
-	Dialog,
-	DialogPortal,
-	DialogOverlay,
-	DialogClose,
-	DialogTrigger,
-	DialogContent,
-	DialogHeader,
-	DialogFooter,
-	DialogTitle,
-	DialogDescription,
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
 };
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/dist/gui/components/Dialog.js

@@ -1,98 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import * as React from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-
 const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) =>
-	_jsx(DialogPrimitive.Overlay, {
-		ref: ref,
-		className: cn(
-			"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-			className,
-		),
-		...props,
-	}),
-);
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(
-	({ className, children, ...props }, ref) =>
-		_jsxs(DialogPortal, {
-			children: [
-				_jsx(DialogOverlay, {}),
-				_jsxs(DialogPrimitive.Content, {
-					ref: ref,
-					className: cn(
-						"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-						className,
-					),
-					...props,
-					children: [
-						children,
-						_jsxs(DialogPrimitive.Close, {
-							className:
-								"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
-							children: [
-								_jsx(X, { className: "h-4 w-4" }),
-								_jsx("span", { className: "sr-only", children: "Close" }),
-							],
-						}),
-					],
-				}),
-			],
-		}),
-);
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-const DialogHeader = ({ className, ...props }) =>
-	_jsx("div", {
-		className: cn(
-			"flex flex-col space-y-1.5 text-center sm:text-left",
-			className,
-		),
-		...props,
-	});
+const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));
 DialogHeader.displayName = "DialogHeader";
-const DialogFooter = ({ className, ...props }) =>
-	_jsx("div", {
-		className: cn(
-			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-			className,
-		),
-		...props,
-	});
+const DialogFooter = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props }));
 DialogFooter.displayName = "DialogFooter";
-const DialogTitle = React.forwardRef(({ className, ...props }, ref) =>
-	_jsx(DialogPrimitive.Title, {
-		ref: ref,
-		className: cn(
-			"text-lg font-semibold leading-none tracking-tight",
-			className,
-		),
-		...props,
-	}),
-);
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props })));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-const DialogDescription = React.forwardRef(({ className, ...props }, ref) =>
-	_jsx(DialogPrimitive.Description, {
-		ref: ref,
-		className: cn("text-sm text-muted-foreground", className),
-		...props,
-	}),
-);
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
-export {
-	Dialog,
-	DialogPortal,
-	DialogOverlay,
-	DialogClose,
-	DialogTrigger,
-	DialogContent,
-	DialogHeader,
-	DialogFooter,
-	DialogTitle,
-	DialogDescription,
-};
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/dist/gui/components/HeightTransition.d.ts

@@ -1,15 +1,10 @@
 import { type ReactNode } from "react";
 interface HeightTransitionProps {
-	children: ReactNode;
-	durationMs?: number;
-	easing?: string;
-	pinContentTo?: "top" | "bottom";
-	className?: string;
+    children: ReactNode;
+    durationMs?: number;
+    easing?: string;
+    pinContentTo?: "top" | "bottom";
+    className?: string;
 }
-export declare function HeightTransition({
-	children,
-	durationMs,
-	easing,
-	pinContentTo,
-	className,
-}: HeightTransitionProps): import("react/jsx-runtime").JSX.Element;
+export declare function HeightTransition({ children, durationMs, easing, pinContentTo, className, }: HeightTransitionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/gui/components/HeightTransition.js

@@ -1,91 +1,80 @@
-import { useCallback, useEffect, useRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
 import { cn } from "../lib/utils.js";
-export function HeightTransition({
-	children,
-	durationMs = 320,
-	easing = "ease",
-	pinContentTo = "top",
-	className,
-}) {
-	const containerRef = useRef(null);
-	const contentRef = useRef(null);
-	const prevHeightRef = useRef(null);
-	const isAnimatingRef = useRef(false);
-	const durationRef = useRef(durationMs);
-	const easingRef = useRef(easing);
-	useEffect(() => {
-		durationRef.current = durationMs;
-		easingRef.current = easing;
-	}, [durationMs, easing]);
-	const transitionTo = useCallback(
-		(next) => {
-			const el = containerRef.current;
-			const contentEl = contentRef.current;
-			if (!el || !contentEl) return;
-			const prev = prevHeightRef.current ?? el.getBoundingClientRect().height;
-			if (Math.abs(prev - next) < 0.5) {
-				prevHeightRef.current = next;
-				el.style.height = `${next}px`;
-				return;
-			}
-			if (isAnimatingRef.current) return;
-			isAnimatingRef.current = true;
-			el.style.transition = "none";
-			el.style.height = `${prev}px`;
-			void el.getBoundingClientRect();
-			el.style.transition = `height ${durationRef.current}ms ${easingRef.current}`;
-			el.style.height = `${next}px`;
-			contentEl.style.position = "absolute";
-			if (pinContentTo === "top") {
-				contentEl.style.top = "0";
-			} else {
-				contentEl.style.bottom = "0";
-			}
-			prevHeightRef.current = next;
-		},
-		[pinContentTo],
-	);
-	const onEndTransition = useCallback((e) => {
-		const el = containerRef.current;
-		const contentEl = contentRef.current;
-		if (!el || !contentEl) return;
-		if (e.propertyName !== "height") return;
-		if (e.target !== el) return;
-		el.style.transition = "";
-		el.style.height = `auto`;
-		contentEl.style.removeProperty("position");
-		contentEl.style.removeProperty("top");
-		contentEl.style.removeProperty("bottom");
-		isAnimatingRef.current = false;
-	}, []);
-	// Observe intrinsic content height changes and animate container height accordingly
-	useEffect(() => {
-		const el = containerRef.current;
-		const contentEl = contentRef.current;
-		if (!el || !contentEl) return;
-		const initial = contentEl.scrollHeight;
-		prevHeightRef.current = initial;
-		const ro = new ResizeObserver(() => {
-			const next = contentEl.scrollHeight;
-			transitionTo(next);
-		});
-		ro.observe(contentEl);
-		el.addEventListener("transitionend", onEndTransition);
-		return () => {
-			ro.disconnect();
-			el.removeEventListener("transitionend", onEndTransition);
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [onEndTransition, transitionTo]);
-	return _jsx("div", {
-		ref: containerRef,
-		className: cn("overflow-hidden relative", className),
-		style: { willChange: "height" },
-		children: _jsx("div", {
-			ref: contentRef,
-			className: "w-full",
-			children: children,
-		}),
-	});
+export function HeightTransition({ children, durationMs = 320, easing = "ease", pinContentTo = "top", className, }) {
+    const containerRef = useRef(null);
+    const contentRef = useRef(null);
+    const prevHeightRef = useRef(null);
+    const isAnimatingRef = useRef(false);
+    const durationRef = useRef(durationMs);
+    const easingRef = useRef(easing);
+    useEffect(() => {
+        durationRef.current = durationMs;
+        easingRef.current = easing;
+    }, [durationMs, easing]);
+    const transitionTo = useCallback((next) => {
+        const el = containerRef.current;
+        const contentEl = contentRef.current;
+        if (!el || !contentEl)
+            return;
+        const prev = prevHeightRef.current ?? el.getBoundingClientRect().height;
+        if (Math.abs(prev - next) < 0.5) {
+            prevHeightRef.current = next;
+            el.style.height = `${next}px`;
+            return;
+        }
+        if (isAnimatingRef.current)
+            return;
+        isAnimatingRef.current = true;
+        el.style.transition = "none";
+        el.style.height = `${prev}px`;
+        void el.getBoundingClientRect();
+        el.style.transition = `height ${durationRef.current}ms ${easingRef.current}`;
+        el.style.height = `${next}px`;
+        contentEl.style.position = "absolute";
+        if (pinContentTo === "top") {
+            contentEl.style.top = "0";
+        }
+        else {
+            contentEl.style.bottom = "0";
+        }
+        prevHeightRef.current = next;
+    }, [pinContentTo]);
+    const onEndTransition = useCallback((e) => {
+        const el = containerRef.current;
+        const contentEl = contentRef.current;
+        if (!el || !contentEl)
+            return;
+        if (e.propertyName !== "height")
+            return;
+        if (e.target !== el)
+            return;
+        el.style.transition = "";
+        el.style.height = `auto`;
+        contentEl.style.removeProperty("position");
+        contentEl.style.removeProperty("top");
+        contentEl.style.removeProperty("bottom");
+        isAnimatingRef.current = false;
+    }, []);
+    // Observe intrinsic content height changes and animate container height accordingly
+    useEffect(() => {
+        const el = containerRef.current;
+        const contentEl = contentRef.current;
+        if (!el || !contentEl)
+            return;
+        const initial = contentEl.scrollHeight;
+        prevHeightRef.current = initial;
+        const ro = new ResizeObserver(() => {
+            const next = contentEl.scrollHeight;
+            transitionTo(next);
+        });
+        ro.observe(contentEl);
+        el.addEventListener("transitionend", onEndTransition);
+        return () => {
+            ro.disconnect();
+            el.removeEventListener("transitionend", onEndTransition);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [onEndTransition, transitionTo]);
+    return (_jsx("div", { ref: containerRef, className: cn("overflow-hidden relative", className), style: { willChange: "height" }, children: _jsx("div", { ref: contentRef, className: "w-full", children: children }) }));
 }

package/dist/gui/components/Input.d.ts

@@ -1,16 +1,9 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
-declare const inputVariants: (
-	props?:
-		| ({
-				variant?: "default" | "error" | "success" | null | undefined;
-		  } & import("class-variance-authority/types").ClassProp)
-		| undefined,
-) => string;
-export interface InputProps
-	extends React.InputHTMLAttributes<HTMLInputElement>,
-		VariantProps<typeof inputVariants> {}
-declare const Input: React.ForwardRefExoticComponent<
-	InputProps & React.RefAttributes<HTMLInputElement>
->;
+declare const inputVariants: (props?: ({
+    variant?: "success" | "default" | "error" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export { Input, inputVariants };