@townco/ui 0.1.6 → 0.1.7

package/dist/gui/components/ChatSecondaryPanel.js

@@ -1,121 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useEffect, useRef, useState } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs.js";
 import { TodoList } from "./TodoList.js";
-export const ChatSecondaryPanel = React.forwardRef(
-	({ client, todos, className, ...props }, ref) => {
-		// For now, just use prop-based todos
-		// Future: Add hook to get todos from store when available
-		const todosToDisplay = todos || [];
-		const [activeTab, setActiveTab] = useState("todo");
-		const containerRef = useRef(null);
-		const activeTabElementRef = useRef(null);
-		useEffect(() => {
-			const updateClipPath = () => {
-				const container = containerRef.current;
-				if (activeTab && container) {
-					const activeTabElement = activeTabElementRef.current;
-					if (activeTabElement) {
-						const containerRect = container.getBoundingClientRect();
-						const tabRect = activeTabElement.getBoundingClientRect();
-						const offsetLeft = tabRect.left - containerRect.left;
-						const offsetWidth = tabRect.width;
-						const clipLeftPercent = (offsetLeft / containerRect.width) * 100;
-						const clipRightPercent =
-							100 - ((offsetLeft + offsetWidth) / containerRect.width) * 100;
-						container.style.clipPath = `inset(0 ${clipRightPercent.toFixed(2)}% 0 ${clipLeftPercent.toFixed(2)}% round 999px)`;
-					}
-				}
-			};
-			// Small delay to ensure DOM is ready
-			const timeoutId = setTimeout(updateClipPath, 0);
-			return () => clearTimeout(timeoutId);
-		}, [activeTab]);
-		const tabs = [
-			{ id: "todo", label: "To-Do List" },
-			{ id: "files", label: "Files" },
-			{ id: "database", label: "Database" },
-		];
-		return _jsx("div", {
-			ref: ref,
-			className: cn("select-none", className),
-			...props,
-			children: _jsxs(Tabs, {
-				value: activeTab,
-				onValueChange: setActiveTab,
-				className: "w-full",
-				children: [
-					_jsxs("div", {
-						className: "relative mb-4 border-border",
-						children: [
-							_jsx(TabsList, {
-								className:
-									"bg-transparent p-0 h-auto rounded-none w-full border-none",
-								children: tabs.map((tab) =>
-									_jsx(
-										TabsTrigger,
-										{
-											value: tab.id,
-											className:
-												"px-3 py-1 text-sm font-[var(--font-family)] font-medium rounded-none text-foreground opacity-60 data-[state=active]:opacity-100 data-[state=active]:bg-transparent data-[state=active]:shadow-none",
-											children: tab.label,
-										},
-										tab.id,
-									),
-								),
-							}),
-							_jsx("div", {
-								ref: containerRef,
-								className:
-									"absolute top-0 left-0 w-full overflow-hidden z-10 pointer-events-none",
-								style: {
-									clipPath: "inset(0 100% 0 0% round 999px)",
-									transition: "clip-path 0.25s ease-out",
-								},
-								children: _jsx(TabsList, {
-									className:
-										"bg-secondary p-0 h-auto rounded-none w-full border-none",
-									children: tabs.map((tab) =>
-										_jsx(
-											TabsTrigger,
-											{
-												value: tab.id,
-												ref: activeTab === tab.id ? activeTabElementRef : null,
-												className:
-													"px-3 py-1 text-sm font-[var(--font-family)] font-medium rounded-none text-primary bg-transparent data-[state=active]:shadow-none shadow-none",
-												tabIndex: -1,
-												children: tab.label,
-											},
-											tab.id,
-										),
-									),
-								}),
-							}),
-						],
-					}),
-					_jsx(TabsContent, {
-						value: "todo",
-						children: _jsx(TodoList, { todos: todosToDisplay }),
-					}),
-					_jsx(TabsContent, {
-						value: "files",
-						children: _jsx("div", {
-							className: "text-sm text-foreground opacity-60 italic",
-							children: "Files tab coming soon...",
-						}),
-					}),
-					_jsx(TabsContent, {
-						value: "database",
-						children: _jsx("div", {
-							className: "text-sm text-foreground opacity-60 italic",
-							children: "Database tab coming soon...",
-						}),
-					}),
-				],
-			}),
-		});
-	},
-);
+export const ChatSecondaryPanel = React.forwardRef(({ client, todos, className, ...props }, ref) => {
+    // For now, just use prop-based todos
+    // Future: Add hook to get todos from store when available
+    const todosToDisplay = todos || [];
+    const [activeTab, setActiveTab] = useState("todo");
+    const containerRef = useRef(null);
+    const activeTabElementRef = useRef(null);
+    useEffect(() => {
+        const updateClipPath = () => {
+            const container = containerRef.current;
+            if (activeTab && container) {
+                const activeTabElement = activeTabElementRef.current;
+                if (activeTabElement) {
+                    const containerRect = container.getBoundingClientRect();
+                    const tabRect = activeTabElement.getBoundingClientRect();
+                    const offsetLeft = tabRect.left - containerRect.left;
+                    const offsetWidth = tabRect.width;
+                    const clipLeftPercent = (offsetLeft / containerRect.width) * 100;
+                    const clipRightPercent = 100 - ((offsetLeft + offsetWidth) / containerRect.width) * 100;
+                    container.style.clipPath = `inset(0 ${clipRightPercent.toFixed(2)}% 0 ${clipLeftPercent.toFixed(2)}% round 999px)`;
+                }
+            }
+        };
+        // Small delay to ensure DOM is ready
+        const timeoutId = setTimeout(updateClipPath, 0);
+        return () => clearTimeout(timeoutId);
+    }, [activeTab]);
+    const tabs = [
+        { id: "todo", label: "To-Do List" },
+        { id: "files", label: "Files" },
+        { id: "database", label: "Database" },
+    ];
+    return (_jsx("div", { ref: ref, className: cn("select-none", className), ...props, children: _jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, className: "w-full", children: [_jsxs("div", { className: "relative mb-4 border-border", children: [_jsx(TabsList, { className: "bg-transparent p-0 h-auto rounded-none w-full border-none", children: tabs.map((tab) => (_jsx(TabsTrigger, { value: tab.id, className: "px-3 py-1 text-sm font-[var(--font-family)] font-medium rounded-none text-foreground opacity-60 data-[state=active]:opacity-100 data-[state=active]:bg-transparent data-[state=active]:shadow-none", children: tab.label }, tab.id))) }), _jsx("div", { ref: containerRef, className: "absolute top-0 left-0 w-full overflow-hidden z-10 pointer-events-none", style: {
+                                clipPath: "inset(0 100% 0 0% round 999px)",
+                                transition: "clip-path 0.25s ease-out",
+                            }, children: _jsx(TabsList, { className: "bg-secondary p-0 h-auto rounded-none w-full border-none", children: tabs.map((tab) => (_jsx(TabsTrigger, { value: tab.id, ref: activeTab === tab.id ? activeTabElementRef : null, className: "px-3 py-1 text-sm font-[var(--font-family)] font-medium rounded-none text-primary bg-transparent data-[state=active]:shadow-none shadow-none", tabIndex: -1, children: tab.label }, tab.id))) }) })] }), _jsx(TabsContent, { value: "todo", children: _jsx(TodoList, { todos: todosToDisplay }) }), _jsx(TabsContent, { value: "files", children: _jsx("div", { className: "text-sm text-foreground opacity-60 italic", children: "Files tab coming soon..." }) }), _jsx(TabsContent, { value: "database", children: _jsx("div", { className: "text-sm text-foreground opacity-60 italic", children: "Database tab coming soon..." }) })] }) }));
+});
 ChatSecondaryPanel.displayName = "ChatSecondaryPanel";

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

@@ -1,8 +1,6 @@
 import * as React from "react";
 import { type ReactNode } from "react";
 export interface ChatStatusProps extends React.HTMLAttributes<HTMLSpanElement> {
-	children: ReactNode;
+    children: ReactNode;
 }
-export declare const ChatStatus: React.ForwardRefExoticComponent<
-	ChatStatusProps & React.RefAttributes<HTMLSpanElement>
->;
+export declare const ChatStatus: React.ForwardRefExoticComponent<ChatStatusProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/gui/components/ChatStatus.js

@@ -1,49 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useEffect, useRef, useState } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-export const ChatStatus = React.forwardRef(
-	({ children, className, ...props }, ref) => {
-		const [displayContent, setDisplayContent] = useState(children);
-		const [isTransitioning, setIsTransitioning] = useState(false);
-		const previousContentRef = useRef(children);
-		const isInitialMountRef = useRef(true);
-		useEffect(() => {
-			// Skip transition on initial mount
-			if (isInitialMountRef.current) {
-				isInitialMountRef.current = false;
-				previousContentRef.current = children;
-				return;
-			}
-			// Only transition if content actually changed
-			if (previousContentRef.current === children) {
-				return;
-			}
-			// Start transition out
-			setIsTransitioning(true);
-			// After fade out, update content and fade in
-			const timeoutId = setTimeout(() => {
-				setDisplayContent(children);
-				previousContentRef.current = children;
-				// Trigger fade in
-				requestAnimationFrame(() => {
-					setIsTransitioning(false);
-				});
-			}, 150); // Half of transition duration (300ms total)
-			return () => {
-				clearTimeout(timeoutId);
-			};
-		}, [children]);
-		return _jsx("span", {
-			ref: ref,
-			className: cn(
-				"text-sm text-foreground opacity-60 transition-opacity duration-300",
-				isTransitioning ? "opacity-0" : "opacity-60",
-				className,
-			),
-			...props,
-			children: displayContent,
-		});
-	},
-);
+export const ChatStatus = React.forwardRef(({ children, className, ...props }, ref) => {
+    const [displayContent, setDisplayContent] = useState(children);
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const previousContentRef = useRef(children);
+    const isInitialMountRef = useRef(true);
+    useEffect(() => {
+        // Skip transition on initial mount
+        if (isInitialMountRef.current) {
+            isInitialMountRef.current = false;
+            previousContentRef.current = children;
+            return;
+        }
+        // Only transition if content actually changed
+        if (previousContentRef.current === children) {
+            return;
+        }
+        // Start transition out
+        setIsTransitioning(true);
+        // After fade out, update content and fade in
+        const timeoutId = setTimeout(() => {
+            setDisplayContent(children);
+            previousContentRef.current = children;
+            // Trigger fade in
+            requestAnimationFrame(() => {
+                setIsTransitioning(false);
+            });
+        }, 150); // Half of transition duration (300ms total)
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [children]);
+    return (_jsx("span", { ref: ref, className: cn("text-sm text-foreground opacity-60 transition-opacity duration-300", isTransitioning ? "opacity-0" : "opacity-60", className), ...props, children: displayContent }));
+});
 ChatStatus.displayName = "ChatStatus";

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

@@ -3,21 +3,18 @@ import * as React from "react";
  * Conversation component inspired by shadcn.io/ai
  * Auto-scrolling chat container that maintains scroll position during streaming
  */
-export interface ConversationProps
-	extends React.HTMLAttributes<HTMLDivElement> {
-	/** Whether to auto-scroll to bottom on new messages */
-	autoScroll?: boolean;
-	/** Whether content is currently streaming */
-	isStreaming?: boolean;
-	/** Scroll behavior type */
-	scrollBehavior?: ScrollBehavior;
-	/** Threshold for considering user at bottom (px from bottom) */
-	scrollThreshold?: number;
-	/** Show scroll-to-bottom button when not at bottom */
-	showScrollButton?: boolean;
-	/** Custom scroll button */
-	scrollButton?: React.ReactNode;
+export interface ConversationProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Whether to auto-scroll to bottom on new messages */
+    autoScroll?: boolean;
+    /** Whether content is currently streaming */
+    isStreaming?: boolean;
+    /** Scroll behavior type */
+    scrollBehavior?: ScrollBehavior;
+    /** Threshold for considering user at bottom (px from bottom) */
+    scrollThreshold?: number;
+    /** Show scroll-to-bottom button when not at bottom */
+    showScrollButton?: boolean;
+    /** Custom scroll button */
+    scrollButton?: React.ReactNode;
 }
-export declare const Conversation: React.ForwardRefExoticComponent<
-	ConversationProps & React.RefAttributes<HTMLDivElement>
->;
+export declare const Conversation: React.ForwardRefExoticComponent<ConversationProps & React.RefAttributes<HTMLDivElement>>;

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