@townco/ui 0.1.0 → 0.1.6

package/dist/gui/components/Task.js

@@ -1,37 +1,170 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckCircle2, ChevronDown, Circle, Loader2 } from "lucide-react";
 import * as React from "react";
 import { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-export const Task = React.forwardRef(({ task, collapsible = true, defaultExpanded = false, onTaskClick, className, ...props }, ref) => {
-    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
-    const hasDetails = !!(task.details ||
-        (task.files && task.files.length > 0));
-    const StatusIcon = {
-        pending: Circle,
-        in_progress: Loader2,
-        completed: CheckCircle2,
-    }[task.status];
-    const getStatusColor = () => {
-        switch (task.status) {
-            case "completed":
-                return "text-green-500";
-            case "in_progress":
-                return "text-primary";
-            default:
-                return "text-foreground opacity-40";
-        }
-    };
-    const handleClick = () => {
-        if (hasDetails && collapsible) {
-            setIsExpanded(!isExpanded);
-        }
-        onTaskClick?.(task);
-    };
-    return (_jsxs("div", { ref: ref, className: cn("rounded-lg border border-border bg-card transition-all", "hover:shadow-sm hover:border-border/80", className), ...props, children: [_jsxs("button", { type: "button", onClick: handleClick, className: cn("w-full flex items-center gap-3 px-3 py-2.5 text-left", hasDetails && collapsible && "cursor-pointer"), disabled: !hasDetails && !collapsible, children: [_jsx(StatusIcon, { className: cn("w-4 h-4 shrink-0", getStatusColor(), task.status === "in_progress" && "animate-spin") }), _jsx("span", { className: cn("flex-1 text-sm font-[var(--font-family)]", task.status === "completed" && "line-through opacity-60", task.status === "in_progress" && "font-medium"), children: task.text }), hasDetails && collapsible && (_jsx(ChevronDown, { className: cn("w-4 h-4 text-foreground opacity-50 transition-transform duration-200 shrink-0", isExpanded && "rotate-180"), "aria-hidden": "true" }))] }), hasDetails && isExpanded && (_jsxs("div", { className: "px-3 pb-3 pt-1 border-t border-border/50 animate-fadeIn", children: [task.details && (_jsx("p", { className: "text-sm text-foreground opacity-80 leading-relaxed mb-2", children: task.details })), task.files && task.files.length > 0 && (_jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "text-xs font-medium text-foreground opacity-60 uppercase tracking-wide", children: "Files:" }), _jsx("div", { className: "space-y-1", children: task.files.map((file) => (_jsx("div", { className: "text-xs font-mono text-foreground opacity-70 bg-background px-2 py-1 rounded border border-border/50", children: file }, file))) })] }))] }))] }));
-});
+export const Task = React.forwardRef(
+	(
+		{
+			task,
+			collapsible = true,
+			defaultExpanded = false,
+			onTaskClick,
+			className,
+			...props
+		},
+		ref,
+	) => {
+		const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+		const hasDetails = !!(
+			task.details ||
+			(task.files && task.files.length > 0)
+		);
+		const StatusIcon = {
+			pending: Circle,
+			in_progress: Loader2,
+			completed: CheckCircle2,
+		}[task.status];
+		const getStatusColor = () => {
+			switch (task.status) {
+				case "completed":
+					return "text-green-500";
+				case "in_progress":
+					return "text-primary";
+				default:
+					return "text-foreground opacity-40";
+			}
+		};
+		const handleClick = () => {
+			if (hasDetails && collapsible) {
+				setIsExpanded(!isExpanded);
+			}
+			onTaskClick?.(task);
+		};
+		return _jsxs("div", {
+			ref: ref,
+			className: cn(
+				"rounded-lg border border-border bg-card transition-all",
+				"hover:shadow-sm hover:border-border/80",
+				className,
+			),
+			...props,
+			children: [
+				_jsxs("button", {
+					type: "button",
+					onClick: handleClick,
+					className: cn(
+						"w-full flex items-center gap-3 px-3 py-2.5 text-left",
+						hasDetails && collapsible && "cursor-pointer",
+					),
+					disabled: !hasDetails && !collapsible,
+					children: [
+						_jsx(StatusIcon, {
+							className: cn(
+								"w-4 h-4 shrink-0",
+								getStatusColor(),
+								task.status === "in_progress" && "animate-spin",
+							),
+						}),
+						_jsx("span", {
+							className: cn(
+								"flex-1 text-sm font-[var(--font-family)]",
+								task.status === "completed" && "line-through opacity-60",
+								task.status === "in_progress" && "font-medium",
+							),
+							children: task.text,
+						}),
+						hasDetails &&
+							collapsible &&
+							_jsx(ChevronDown, {
+								className: cn(
+									"w-4 h-4 text-foreground opacity-50 transition-transform duration-200 shrink-0",
+									isExpanded && "rotate-180",
+								),
+								"aria-hidden": "true",
+							}),
+					],
+				}),
+				hasDetails &&
+					isExpanded &&
+					_jsxs("div", {
+						className:
+							"px-3 pb-3 pt-1 border-t border-border/50 animate-fadeIn",
+						children: [
+							task.details &&
+								_jsx("p", {
+									className:
+										"text-sm text-foreground opacity-80 leading-relaxed mb-2",
+									children: task.details,
+								}),
+							task.files &&
+								task.files.length > 0 &&
+								_jsxs("div", {
+									className: "space-y-1",
+									children: [
+										_jsx("span", {
+											className:
+												"text-xs font-medium text-foreground opacity-60 uppercase tracking-wide",
+											children: "Files:",
+										}),
+										_jsx("div", {
+											className: "space-y-1",
+											children: task.files.map((file) =>
+												_jsx(
+													"div",
+													{
+														className:
+															"text-xs font-mono text-foreground opacity-70 bg-background px-2 py-1 rounded border border-border/50",
+														children: file,
+													},
+													file,
+												),
+											),
+										}),
+									],
+								}),
+						],
+					}),
+			],
+		});
+	},
+);
 Task.displayName = "Task";
-export const TaskList = React.forwardRef(({ tasks, collapsible = true, onTaskClick, emptyMessage = "No tasks yet.", className, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("space-y-2 max-h-96 overflow-y-auto", className), ...props, children: tasks.length === 0 ? (_jsx("p", { className: "text-sm text-foreground opacity-60 italic py-4 text-center", children: emptyMessage })) : (tasks.map((task) => (_jsx(Task, { task: task, collapsible: collapsible, ...(onTaskClick ? { onTaskClick } : {}) }, task.id)))) }));
-});
+export const TaskList = React.forwardRef(
+	(
+		{
+			tasks,
+			collapsible = true,
+			onTaskClick,
+			emptyMessage = "No tasks yet.",
+			className,
+			...props
+		},
+		ref,
+	) => {
+		return _jsx("div", {
+			ref: ref,
+			className: cn("space-y-2 max-h-96 overflow-y-auto", className),
+			...props,
+			children:
+				tasks.length === 0
+					? _jsx("p", {
+							className:
+								"text-sm text-foreground opacity-60 italic py-4 text-center",
+							children: emptyMessage,
+						})
+					: tasks.map((task) =>
+							_jsx(
+								Task,
+								{
+									task: task,
+									collapsible: collapsible,
+									...(onTaskClick ? { onTaskClick } : {}),
+								},
+								task.id,
+							),
+						),
+		});
+	},
+);
 TaskList.displayName = "TaskList";

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

@@ -1,11 +1,19 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
-declare const textareaVariants: (props?: ({
-    variant?: "default" | "error" | "success" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textareaVariants> {
-    autoResize?: boolean;
-    maxHeight?: number;
+declare const textareaVariants: (
+	props?:
+		| ({
+				variant?: "default" | "error" | "success" | null | undefined;
+		  } & import("class-variance-authority/types").ClassProp)
+		| undefined,
+) => string;
+export interface TextareaProps
+	extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+		VariantProps<typeof textareaVariants> {
+	autoResize?: boolean;
+	maxHeight?: number;
 }
-declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+declare const Textarea: React.ForwardRefExoticComponent<
+	TextareaProps & React.RefAttributes<HTMLTextAreaElement>
+>;
 export { Textarea, textareaVariants };

package/dist/gui/components/Textarea.js

@@ -1,51 +1,68 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-const textareaVariants = cva("flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none", {
-    variants: {
-        variant: {
-            default: "border-input focus-visible:ring-ring",
-            error: "border-destructive focus-visible:ring-destructive",
-            success: "border-green-500 focus-visible:ring-green-500",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-    },
-});
-const Textarea = React.forwardRef(({ className, autoResize = false, maxHeight = 200, variant, ...props }, ref) => {
-    const textareaRef = React.useRef(null);
-    const handleRef = React.useCallback((node) => {
-        textareaRef.current = node;
-        if (typeof ref === "function") {
-            ref(node);
-        }
-        else if (ref) {
-            ref.current = node;
-        }
-    }, [ref]);
-    const adjustHeight = React.useCallback(() => {
-        const textarea = textareaRef.current;
-        if (!textarea || !autoResize)
-            return;
-        // Reset height to auto to get the correct scrollHeight
-        textarea.style.height = "auto";
-        // Set new height based on content, respecting maxHeight
-        const newHeight = Math.min(textarea.scrollHeight, maxHeight);
-        textarea.style.height = `${newHeight}px`;
-        // Enable scrollbar if content exceeds maxHeight
-        if (textarea.scrollHeight > maxHeight) {
-            textarea.style.overflowY = "auto";
-        }
-        else {
-            textarea.style.overflowY = "hidden";
-        }
-    }, [autoResize, maxHeight]);
-    React.useEffect(() => {
-        adjustHeight();
-    }, [adjustHeight]);
-    return (_jsx("textarea", { className: cn(textareaVariants({ variant }), autoResize && "overflow-y-hidden", className), ref: handleRef, ...props }));
-});
+
+const textareaVariants = cva(
+	"flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none",
+	{
+		variants: {
+			variant: {
+				default: "border-input focus-visible:ring-ring",
+				error: "border-destructive focus-visible:ring-destructive",
+				success: "border-green-500 focus-visible:ring-green-500",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+const Textarea = React.forwardRef(
+	(
+		{ className, autoResize = false, maxHeight = 200, variant, ...props },
+		ref,
+	) => {
+		const textareaRef = React.useRef(null);
+		const handleRef = React.useCallback(
+			(node) => {
+				textareaRef.current = node;
+				if (typeof ref === "function") {
+					ref(node);
+				} else if (ref) {
+					ref.current = node;
+				}
+			},
+			[ref],
+		);
+		const adjustHeight = React.useCallback(() => {
+			const textarea = textareaRef.current;
+			if (!textarea || !autoResize) return;
+			// Reset height to auto to get the correct scrollHeight
+			textarea.style.height = "auto";
+			// Set new height based on content, respecting maxHeight
+			const newHeight = Math.min(textarea.scrollHeight, maxHeight);
+			textarea.style.height = `${newHeight}px`;
+			// Enable scrollbar if content exceeds maxHeight
+			if (textarea.scrollHeight > maxHeight) {
+				textarea.style.overflowY = "auto";
+			} else {
+				textarea.style.overflowY = "hidden";
+			}
+		}, [autoResize, maxHeight]);
+		React.useEffect(() => {
+			adjustHeight();
+		}, [adjustHeight]);
+		return _jsx("textarea", {
+			className: cn(
+				textareaVariants({ variant }),
+				autoResize && "overflow-y-hidden",
+				className,
+			),
+			ref: handleRef,
+			...props,
+		});
+	},
+);
 Textarea.displayName = "Textarea";
 export { Textarea, textareaVariants };

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

@@ -1,12 +1,22 @@
 import { type VariantProps } from "class-variance-authority";
-declare const thinkingBlockVariants: (props?: ({
-    variant?: "default" | "subtle" | "prominent" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface ThinkingBlockProps extends VariantProps<typeof thinkingBlockVariants> {
-    thinking?: string;
-    isStreaming?: boolean;
-    displayMode?: "collapsible" | "inline";
-    className?: string;
+declare const thinkingBlockVariants: (
+	props?:
+		| ({
+				variant?: "default" | "subtle" | "prominent" | null | undefined;
+		  } & import("class-variance-authority/types").ClassProp)
+		| undefined,
+) => string;
+export interface ThinkingBlockProps
+	extends VariantProps<typeof thinkingBlockVariants> {
+	thinking?: string;
+	isStreaming?: boolean;
+	displayMode?: "collapsible" | "inline";
+	className?: string;
 }
-export declare function ThinkingBlock({ thinking, isStreaming, displayMode, variant, className, }: ThinkingBlockProps): import("react/jsx-runtime").JSX.Element | null;
-export {};
+export declare function ThinkingBlock({
+	thinking,
+	isStreaming,
+	displayMode,
+	variant,
+	className,
+}: ThinkingBlockProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/gui/components/ThinkingBlock.js

@@ -1,40 +1,139 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { ChevronDown } from "lucide-react";
 import { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-const thinkingBlockVariants = cva("mb-3 p-3 rounded-lg bg-card border border-border", {
-    variants: {
-        variant: {
-            default: "opacity-70",
-            subtle: "opacity-50",
-            prominent: "opacity-90",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-    },
-});
-const thinkingIconVariants = cva("w-4 h-4 text-foreground opacity-60 transition-transform", {
-    variants: {
-        expanded: {
-            true: "rotate-180",
-            false: "",
-        },
-    },
-    defaultVariants: {
-        expanded: false,
-    },
-});
-export function ThinkingBlock({ thinking, isStreaming, displayMode = "collapsible", variant, className, }) {
-    const [isExpanded, setIsExpanded] = useState(false);
-    if (!thinking && !isStreaming) {
-        return null;
-    }
-    // Inline mode - always visible
-    if (displayMode === "inline") {
-        return (_jsxs("div", { className: cn(thinkingBlockVariants({ variant }), className), children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-xs font-medium text-foreground opacity-60 uppercase tracking-wide", children: "Thinking" }), isStreaming && (_jsx("span", { className: "inline-block w-2 h-2 bg-primary rounded-full animate-pulse" }))] }), _jsxs("div", { className: "mt-2 text-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap", children: [thinking, isStreaming && thinking && (_jsx("span", { className: "inline-block animate-typing", children: "..." }))] })] }));
-    }
-    // Collapsible mode
-    return (_jsxs("div", { className: cn("mb-3", className), children: [_jsxs("button", { type: "button", onClick: () => setIsExpanded(!isExpanded), className: "w-full flex items-center justify-between p-2 rounded-lg bg-card border border-border hover:bg-card transition-colors text-left", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-medium text-foreground opacity-60 uppercase tracking-wide", children: "Thinking" }), isStreaming && (_jsx("span", { className: "inline-block w-2 h-2 bg-primary rounded-full animate-pulse" })), !isExpanded && thinking && (_jsxs("span", { className: "text-xs text-foreground opacity-50 truncate max-w-[200px]", children: [thinking.substring(0, 50), "..."] }))] }), _jsx(ChevronDown, { className: thinkingIconVariants({ expanded: isExpanded }) })] }), isExpanded && (_jsx("div", { className: cn(thinkingBlockVariants({ variant }), "mt-2"), children: _jsxs("div", { className: "text-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap", children: [thinking, isStreaming && thinking && (_jsx("span", { className: "inline-block animate-typing", children: "..." }))] }) }))] }));
+
+const thinkingBlockVariants = cva(
+	"mb-3 p-3 rounded-lg bg-card border border-border",
+	{
+		variants: {
+			variant: {
+				default: "opacity-70",
+				subtle: "opacity-50",
+				prominent: "opacity-90",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+const thinkingIconVariants = cva(
+	"w-4 h-4 text-foreground opacity-60 transition-transform",
+	{
+		variants: {
+			expanded: {
+				true: "rotate-180",
+				false: "",
+			},
+		},
+		defaultVariants: {
+			expanded: false,
+		},
+	},
+);
+export function ThinkingBlock({
+	thinking,
+	isStreaming,
+	displayMode = "collapsible",
+	variant,
+	className,
+}) {
+	const [isExpanded, setIsExpanded] = useState(false);
+	if (!thinking && !isStreaming) {
+		return null;
+	}
+	// Inline mode - always visible
+	if (displayMode === "inline") {
+		return _jsxs("div", {
+			className: cn(thinkingBlockVariants({ variant }), className),
+			children: [
+				_jsxs("div", {
+					className: "flex items-start gap-2",
+					children: [
+						_jsx("span", {
+							className:
+								"text-xs font-medium text-foreground opacity-60 uppercase tracking-wide",
+							children: "Thinking",
+						}),
+						isStreaming &&
+							_jsx("span", {
+								className:
+									"inline-block w-2 h-2 bg-primary rounded-full animate-pulse",
+							}),
+					],
+				}),
+				_jsxs("div", {
+					className:
+						"mt-2 text-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap",
+					children: [
+						thinking,
+						isStreaming &&
+							thinking &&
+							_jsx("span", {
+								className: "inline-block animate-typing",
+								children: "...",
+							}),
+					],
+				}),
+			],
+		});
+	}
+	// Collapsible mode
+	return _jsxs("div", {
+		className: cn("mb-3", className),
+		children: [
+			_jsxs("button", {
+				type: "button",
+				onClick: () => setIsExpanded(!isExpanded),
+				className:
+					"w-full flex items-center justify-between p-2 rounded-lg bg-card border border-border hover:bg-card transition-colors text-left",
+				children: [
+					_jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							_jsx("span", {
+								className:
+									"text-xs font-medium text-foreground opacity-60 uppercase tracking-wide",
+								children: "Thinking",
+							}),
+							isStreaming &&
+								_jsx("span", {
+									className:
+										"inline-block w-2 h-2 bg-primary rounded-full animate-pulse",
+								}),
+							!isExpanded &&
+								thinking &&
+								_jsxs("span", {
+									className:
+										"text-xs text-foreground opacity-50 truncate max-w-[200px]",
+									children: [thinking.substring(0, 50), "..."],
+								}),
+						],
+					}),
+					_jsx(ChevronDown, {
+						className: thinkingIconVariants({ expanded: isExpanded }),
+					}),
+				],
+			}),
+			isExpanded &&
+				_jsx("div", {
+					className: cn(thinkingBlockVariants({ variant }), "mt-2"),
+					children: _jsxs("div", {
+						className:
+							"text-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap",
+						children: [
+							thinking,
+							isStreaming &&
+								thinking &&
+								_jsx("span", {
+									className: "inline-block animate-typing",
+									children: "...",
+								}),
+						],
+					}),
+				}),
+		],
+	});
 }

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

@@ -7,14 +7,16 @@ import { type TodoItem } from "./TodoListItem.js";
  * 2. Prop-based: Pass `todos` prop directly
  */
 export interface TodoListProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * ACP Client for hook-based todo fetching (future support)
-     */
-    client?: AcpClient | null;
-    /**
-     * Todos to display (prop-based pattern)
-     * Either client or todos should be provided
-     */
-    todos?: TodoItem[];
+	/**
+	 * ACP Client for hook-based todo fetching (future support)
+	 */
+	client?: AcpClient | null;
+	/**
+	 * Todos to display (prop-based pattern)
+	 * Either client or todos should be provided
+	 */
+	todos?: TodoItem[];
 }
-export declare const TodoList: React.ForwardRefExoticComponent<TodoListProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TodoList: React.ForwardRefExoticComponent<
+	TodoListProps & React.RefAttributes<HTMLDivElement>
+>;

package/dist/gui/components/TodoList.js

@@ -1,11 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 import { TodoListItem } from "./TodoListItem.js";
-export const TodoList = 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 || [];
-    return (_jsx("div", { ref: ref, className: cn("space-y-2 max-h-64 overflow-y-auto", className), ...props, children: todosToDisplay.length === 0 ? (_jsx("p", { className: "text-sm text-foreground opacity-60 italic", children: "No tasks yet." })) : (todosToDisplay.map((todo) => (_jsx(TodoListItem, { todo: todo }, todo.id)))) }));
-});
+export const TodoList = 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 || [];
+		return _jsx("div", {
+			ref: ref,
+			className: cn("space-y-2 max-h-64 overflow-y-auto", className),
+			...props,
+			children:
+				todosToDisplay.length === 0
+					? _jsx("p", {
+							className: "text-sm text-foreground opacity-60 italic",
+							children: "No tasks yet.",
+						})
+					: todosToDisplay.map((todo) =>
+							_jsx(TodoListItem, { todo: todo }, todo.id),
+						),
+		});
+	},
+);
 TodoList.displayName = "TodoList";

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

@@ -1,10 +1,13 @@
 import * as React from "react";
 export interface TodoItem {
-    id: string;
-    text: string;
-    status: "pending" | "in_progress" | "completed";
+	id: string;
+	text: string;
+	status: "pending" | "in_progress" | "completed";
 }
-export interface TodoListItemProps extends React.HTMLAttributes<HTMLDivElement> {
-    todo: TodoItem;
+export interface TodoListItemProps
+	extends React.HTMLAttributes<HTMLDivElement> {
+	todo: TodoItem;
 }
-export declare const TodoListItem: React.ForwardRefExoticComponent<TodoListItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TodoListItem: React.ForwardRefExoticComponent<
+	TodoListItemProps & React.RefAttributes<HTMLDivElement>
+>;