@better-zap/react 0.2.1 → 0.2.2

package/dist/conversation-list-C0EmReS-.mjs

@@ -0,0 +1,293 @@
+import { cn } from "./utils.mjs";
+import { useOptionalWhatsappDashboard } from "./whatsapp-dashboard.mjs";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Message01Icon, Search01Icon, UserIcon } from "@hugeicons/core-free-icons";
+import { LegendList } from "@legendapp/list/react";
+//#region src/conversation-search.tsx
+/**
+* Memoized: with a stable onChange, sibling state changes (filter chips,
+* selection) don't re-render the search box.
+*/
+const ConversationSearch = React.memo(function ConversationSearch({ value, onChange, className, placeholder, "aria-label": ariaLabel }) {
+	const effectivePlaceholder = placeholder ?? "Buscar conversa";
+	const effectiveAriaLabel = ariaLabel ?? effectivePlaceholder;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("shrink-0 px-3 py-2", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center bg-[#f0f2f5] rounded-full px-3 h-[35px] gap-3 border border-transparent transition-colors focus-within:bg-white focus-within:border-[#e9edef]",
+			children: [/* @__PURE__ */ jsx(HugeiconsIcon, {
+				icon: Search01Icon,
+				size: 18,
+				className: "text-[#54656f] shrink-0"
+			}), /* @__PURE__ */ jsx("input", {
+				type: "text",
+				placeholder: effectivePlaceholder,
+				"aria-label": effectiveAriaLabel,
+				value,
+				onChange: (e) => onChange(e.target.value),
+				className: "flex-1 border-none bg-transparent text-[15px] text-[#111b21] focus:outline-none h-full placeholder:text-[#667781]"
+			})]
+		})
+	});
+});
+//#endregion
+//#region src/conversation-filter-chips.tsx
+/**
+* Memoized: with stable onValueChange and labels, typing in the search box
+* doesn't re-render the chips.
+*/
+const ConversationFilterChips = React.memo(function ConversationFilterChips({ value, onValueChange, unreadCount = 0, className, labels }) {
+	const chips = [{
+		label: labels?.all ?? "Tudo",
+		value: "all"
+	}, {
+		label: labels?.unread ?? "Não lidas",
+		value: "unread"
+	}];
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-1.5 px-3 pb-2 pt-1", className),
+		children: chips.map((chip) => {
+			const isActive = chip.value === value;
+			const showCount = chip.value === "unread" && unreadCount > 0;
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => onValueChange(chip.value),
+				"aria-pressed": isActive,
+				className: cn("inline-flex h-8 items-center rounded-full px-3 text-[14px] transition-colors", isActive ? "bg-[#e7fce3] text-[#008069]" : "bg-[#f0f2f5] text-[#54656f] hover:bg-[#e9edef]"),
+				children: [/* @__PURE__ */ jsx("span", { children: chip.label }), showCount ? /* @__PURE__ */ jsx("span", {
+					className: "ml-1",
+					children: unreadCount
+				}) : null]
+			}, chip.value);
+		})
+	});
+});
+//#endregion
+//#region src/conversation-list.tsx
+const DEFAULT_LABELS = {
+	searchPlaceholder: "Buscar conversa",
+	searchLabel: "Buscar conversa",
+	filterAll: "Tudo",
+	filterUnread: "Não lidas",
+	loading: "Carregando...",
+	error: "Erro ao carregar conversas",
+	empty: "Nenhuma conversa encontrada",
+	outgoingPrefix: "Você: ",
+	noPreview: "Sem mensagem",
+	yesterday: "Ontem"
+};
+/**
+* Memoized default row. Every prop is a primitive or a stable reference, so
+* selecting a conversation re-renders exactly two rows (the newly selected
+* and the previously selected one), not the whole list.
+*/
+const ConversationListRow = React.memo(function ConversationListRow({ conversation, isSelected, onSelectConversation, avatar, outgoingPrefix, noPreviewLabel, formatTime }) {
+	return /* @__PURE__ */ jsx(ConversationItem, {
+		conversation,
+		isSelected,
+		onClick: useCallback(() => {
+			onSelectConversation(conversation.id);
+		}, [onSelectConversation, conversation.id]),
+		avatar,
+		outgoingPrefix,
+		noPreviewLabel,
+		formatTime
+	});
+});
+function ConversationList({ conversations, isLoading = false, isError, selectedConversationId, onSelect, search: searchProp, defaultSearch = "", onSearchChange, filter: filterProp, defaultFilter = "all", onFilterChange, renderItem, renderAvatar, formatTime: formatTimeProp, labels: labelsProp, className, ...props }) {
+	const dashboard = useOptionalWhatsappDashboard();
+	const isMobile = dashboard?.isMobile ?? false;
+	const mobileView = dashboard?.mobileView ?? "list";
+	const isSearchControlled = searchProp !== void 0;
+	const [internalSearch, setInternalSearch] = useState(defaultSearch);
+	const search = isSearchControlled ? searchProp : internalSearch;
+	const isFilterControlled = filterProp !== void 0;
+	const [internalFilter, setInternalFilter] = useState(defaultFilter);
+	const filter = isFilterControlled ? filterProp : internalFilter;
+	const labels = {
+		...DEFAULT_LABELS,
+		...labelsProp,
+		searchLabel: labelsProp?.searchLabel ?? labelsProp?.searchPlaceholder ?? DEFAULT_LABELS.searchLabel
+	};
+	const isSearchControlledRef = useRef(isSearchControlled);
+	isSearchControlledRef.current = isSearchControlled;
+	const isFilterControlledRef = useRef(isFilterControlled);
+	isFilterControlledRef.current = isFilterControlled;
+	const onSearchChangeRef = useRef(onSearchChange);
+	onSearchChangeRef.current = onSearchChange;
+	const onFilterChangeRef = useRef(onFilterChange);
+	onFilterChangeRef.current = onFilterChange;
+	const onSelectRef = useRef(onSelect);
+	onSelectRef.current = onSelect;
+	const dashboardRef = useRef(dashboard);
+	dashboardRef.current = dashboard;
+	const formatTimePropRef = useRef(formatTimeProp);
+	formatTimePropRef.current = formatTimeProp;
+	const yesterdayLabelRef = useRef(labels.yesterday);
+	yesterdayLabelRef.current = labels.yesterday;
+	const handleSearchChange = useCallback((value) => {
+		if (!isSearchControlledRef.current) setInternalSearch(value);
+		onSearchChangeRef.current?.(value);
+	}, []);
+	const handleFilterChange = useCallback((value) => {
+		if (!isFilterControlledRef.current) setInternalFilter(value);
+		onFilterChangeRef.current?.(value);
+	}, []);
+	const handleSelect = useCallback((id) => {
+		onSelectRef.current?.(id);
+		dashboardRef.current?.setMobileView("chat");
+	}, []);
+	const effectiveFormatTime = useCallback((isoDate) => formatTimePropRef.current ? formatTimePropRef.current(isoDate) : formatTimeDefault(isoDate, yesterdayLabelRef.current), []);
+	const chipLabels = useMemo(() => ({
+		all: labels.filterAll,
+		unread: labels.filterUnread
+	}), [labels.filterAll, labels.filterUnread]);
+	const normalizedSearch = search.trim().toLowerCase();
+	const effectiveFilter = filter;
+	const unreadConversationsCount = useMemo(() => conversations.filter((c) => c.unreadCount > 0).length, [conversations]);
+	const filtered = useMemo(() => {
+		return conversations.filter((conversation) => {
+			const matchesSearch = normalizedSearch.length === 0 || conversation.phone.toLowerCase().includes(normalizedSearch) || conversation.contactName?.toLowerCase().includes(normalizedSearch);
+			const matchesFilter = effectiveFilter === "all" || conversation.unreadCount > 0;
+			return matchesSearch && matchesFilter;
+		});
+	}, [
+		conversations,
+		normalizedSearch,
+		effectiveFilter
+	]);
+	const isVisible = !isMobile || mobileView === "list";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col h-full bg-white border-r border-[#e9edef]", isMobile ? "w-full" : "min-w-[320px] max-w-105", className),
+		...props,
+		style: isVisible ? props.style : { display: "none" },
+		children: [
+			/* @__PURE__ */ jsx(ConversationSearch, {
+				value: search,
+				onChange: handleSearchChange,
+				placeholder: labels.searchPlaceholder,
+				"aria-label": labels.searchLabel
+			}),
+			/* @__PURE__ */ jsx(ConversationFilterChips, {
+				value: filter,
+				onValueChange: handleFilterChange,
+				unreadCount: unreadConversationsCount,
+				labels: chipLabels
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "min-h-0 flex-1",
+				children: isLoading ? /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center h-full text-sm text-[#667781]",
+					children: labels.loading
+				}) : isError ? /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center h-full text-sm text-red-500",
+					children: labels.error
+				}) : filtered.length === 0 ? /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center justify-center h-full gap-2 text-[#667781]",
+					children: [/* @__PURE__ */ jsx(HugeiconsIcon, {
+						icon: Message01Icon,
+						size: 32
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-sm",
+						children: labels.empty
+					})]
+				}) : /* @__PURE__ */ jsx(LegendList, {
+					className: "chat-scrollbar",
+					data: filtered,
+					estimatedItemSize: 72,
+					extraData: selectedConversationId,
+					getFixedItemSize: () => 72,
+					keyExtractor: (conversation) => conversation.id,
+					recycleItems: true,
+					renderItem: ({ item: conversation }) => {
+						const isSelected = selectedConversationId === conversation.id;
+						if (renderItem) return renderItem(conversation, {
+							isSelected,
+							select: () => handleSelect(conversation.id)
+						});
+						return /* @__PURE__ */ jsx(ConversationListRow, {
+							conversation,
+							isSelected,
+							onSelectConversation: handleSelect,
+							avatar: renderAvatar?.(conversation),
+							outgoingPrefix: labels.outgoingPrefix,
+							noPreviewLabel: labels.noPreview,
+							formatTime: effectiveFormatTime
+						});
+					},
+					style: {
+						height: "100%",
+						overflowX: "hidden"
+					}
+				})
+			})
+		]
+	});
+}
+function ConversationItem({ conversation, isSelected = false, avatar, outgoingPrefix = "Você: ", noPreviewLabel = "Sem mensagem", formatTime: formatTimeProp, className, ...props }) {
+	const timeLabel = formatTimeProp ? formatTimeProp(conversation.lastMessageAt) : formatTimeDefault(conversation.lastMessageAt, "Ontem");
+	const hasUnread = conversation.unreadCount > 0;
+	return /* @__PURE__ */ jsxs("button", {
+		...props,
+		type: "button",
+		"data-selected": isSelected,
+		"aria-current": isSelected ? "true" : void 0,
+		className: cn("group flex items-center w-full h-[72px] px-3 gap-3 transition-colors cursor-pointer text-left relative overflow-hidden hover:bg-[#f5f6f6] data-[selected=true]:bg-[#f0f2f5]", className),
+		children: [avatar ?? /* @__PURE__ */ jsx("div", {
+			className: "w-[49px] h-[49px] rounded-full bg-[#dfe5e7] flex items-center justify-center shrink-0",
+			children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+				icon: UserIcon,
+				size: 28,
+				className: "text-white"
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 min-w-0 border-b border-[#e9edef]/70 h-full flex flex-col justify-center pr-1 group-last:border-none group-data-[selected=true]:border-transparent",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between items-baseline mb-0.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-[17px] font-normal text-[#111b21] truncate",
+					children: conversation.contactName || formatPhone(conversation.phone)
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn("text-xs shrink-0", hasUnread ? "text-[#1daa61]" : "text-[#667781]"),
+					children: timeLabel
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("p", {
+					className: "text-[14px] text-[#667781] truncate",
+					children: [conversation.lastDirection === "incoming" ? "" : outgoingPrefix, conversation.lastMessagePreview || noPreviewLabel]
+				}), hasUnread && /* @__PURE__ */ jsx("span", {
+					className: "bg-[#25d366] text-white text-[11px] font-semibold rounded-full min-w-[20px] h-[20px] flex items-center justify-center px-1.5 shrink-0",
+					children: conversation.unreadCount
+				})]
+			})]
+		})]
+	});
+}
+function formatPhone(phone) {
+	if (phone.length === 13 && phone.startsWith("55")) return `(${phone.slice(2, 4)}) ${phone.slice(4, 9)}-${phone.slice(9)}`;
+	return phone;
+}
+function formatTimeDefault(dateStr, yesterdayLabel) {
+	try {
+		const date = new Date(dateStr);
+		const now = /* @__PURE__ */ new Date();
+		if (date.toDateString() === now.toDateString()) return date.toLocaleTimeString("pt-BR", {
+			hour: "2-digit",
+			minute: "2-digit"
+		});
+		const yesterday = new Date(now);
+		yesterday.setDate(yesterday.getDate() - 1);
+		if (date.toDateString() === yesterday.toDateString()) return yesterdayLabel;
+		return date.toLocaleDateString("pt-BR", {
+			day: "2-digit",
+			month: "2-digit"
+		});
+	} catch {
+		return "";
+	}
+}
+//#endregion
+export { ConversationList as n, ConversationFilterChips as r, ConversationItem as t };

package/dist/conversation-list-CVWdddJh.cjs

@@ -0,0 +1,311 @@
+const require_utils = require("./utils-Bp9IahGG.cjs");
+const require_whatsapp_dashboard = require("./whatsapp-dashboard.cjs");
+let react = require("react");
+react = require_utils.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _hugeicons_react = require("@hugeicons/react");
+let _hugeicons_core_free_icons = require("@hugeicons/core-free-icons");
+let _legendapp_list_react = require("@legendapp/list/react");
+//#region src/conversation-search.tsx
+/**
+* Memoized: with a stable onChange, sibling state changes (filter chips,
+* selection) don't re-render the search box.
+*/
+const ConversationSearch = react.default.memo(function ConversationSearch({ value, onChange, className, placeholder, "aria-label": ariaLabel }) {
+	const effectivePlaceholder = placeholder ?? "Buscar conversa";
+	const effectiveAriaLabel = ariaLabel ?? effectivePlaceholder;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("shrink-0 px-3 py-2", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center bg-[#f0f2f5] rounded-full px-3 h-[35px] gap-3 border border-transparent transition-colors focus-within:bg-white focus-within:border-[#e9edef]",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+				icon: _hugeicons_core_free_icons.Search01Icon,
+				size: 18,
+				className: "text-[#54656f] shrink-0"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "text",
+				placeholder: effectivePlaceholder,
+				"aria-label": effectiveAriaLabel,
+				value,
+				onChange: (e) => onChange(e.target.value),
+				className: "flex-1 border-none bg-transparent text-[15px] text-[#111b21] focus:outline-none h-full placeholder:text-[#667781]"
+			})]
+		})
+	});
+});
+//#endregion
+//#region src/conversation-filter-chips.tsx
+/**
+* Memoized: with stable onValueChange and labels, typing in the search box
+* doesn't re-render the chips.
+*/
+const ConversationFilterChips = react.default.memo(function ConversationFilterChips({ value, onValueChange, unreadCount = 0, className, labels }) {
+	const chips = [{
+		label: labels?.all ?? "Tudo",
+		value: "all"
+	}, {
+		label: labels?.unread ?? "Não lidas",
+		value: "unread"
+	}];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("flex items-center gap-1.5 px-3 pb-2 pt-1", className),
+		children: chips.map((chip) => {
+			const isActive = chip.value === value;
+			const showCount = chip.value === "unread" && unreadCount > 0;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				onClick: () => onValueChange(chip.value),
+				"aria-pressed": isActive,
+				className: require_utils.cn("inline-flex h-8 items-center rounded-full px-3 text-[14px] transition-colors", isActive ? "bg-[#e7fce3] text-[#008069]" : "bg-[#f0f2f5] text-[#54656f] hover:bg-[#e9edef]"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: chip.label }), showCount ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "ml-1",
+					children: unreadCount
+				}) : null]
+			}, chip.value);
+		})
+	});
+});
+//#endregion
+//#region src/conversation-list.tsx
+const DEFAULT_LABELS = {
+	searchPlaceholder: "Buscar conversa",
+	searchLabel: "Buscar conversa",
+	filterAll: "Tudo",
+	filterUnread: "Não lidas",
+	loading: "Carregando...",
+	error: "Erro ao carregar conversas",
+	empty: "Nenhuma conversa encontrada",
+	outgoingPrefix: "Você: ",
+	noPreview: "Sem mensagem",
+	yesterday: "Ontem"
+};
+/**
+* Memoized default row. Every prop is a primitive or a stable reference, so
+* selecting a conversation re-renders exactly two rows (the newly selected
+* and the previously selected one), not the whole list.
+*/
+const ConversationListRow = react.default.memo(function ConversationListRow({ conversation, isSelected, onSelectConversation, avatar, outgoingPrefix, noPreviewLabel, formatTime }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConversationItem, {
+		conversation,
+		isSelected,
+		onClick: (0, react.useCallback)(() => {
+			onSelectConversation(conversation.id);
+		}, [onSelectConversation, conversation.id]),
+		avatar,
+		outgoingPrefix,
+		noPreviewLabel,
+		formatTime
+	});
+});
+function ConversationList({ conversations, isLoading = false, isError, selectedConversationId, onSelect, search: searchProp, defaultSearch = "", onSearchChange, filter: filterProp, defaultFilter = "all", onFilterChange, renderItem, renderAvatar, formatTime: formatTimeProp, labels: labelsProp, className, ...props }) {
+	const dashboard = require_whatsapp_dashboard.useOptionalWhatsappDashboard();
+	const isMobile = dashboard?.isMobile ?? false;
+	const mobileView = dashboard?.mobileView ?? "list";
+	const isSearchControlled = searchProp !== void 0;
+	const [internalSearch, setInternalSearch] = (0, react.useState)(defaultSearch);
+	const search = isSearchControlled ? searchProp : internalSearch;
+	const isFilterControlled = filterProp !== void 0;
+	const [internalFilter, setInternalFilter] = (0, react.useState)(defaultFilter);
+	const filter = isFilterControlled ? filterProp : internalFilter;
+	const labels = {
+		...DEFAULT_LABELS,
+		...labelsProp,
+		searchLabel: labelsProp?.searchLabel ?? labelsProp?.searchPlaceholder ?? DEFAULT_LABELS.searchLabel
+	};
+	const isSearchControlledRef = (0, react.useRef)(isSearchControlled);
+	isSearchControlledRef.current = isSearchControlled;
+	const isFilterControlledRef = (0, react.useRef)(isFilterControlled);
+	isFilterControlledRef.current = isFilterControlled;
+	const onSearchChangeRef = (0, react.useRef)(onSearchChange);
+	onSearchChangeRef.current = onSearchChange;
+	const onFilterChangeRef = (0, react.useRef)(onFilterChange);
+	onFilterChangeRef.current = onFilterChange;
+	const onSelectRef = (0, react.useRef)(onSelect);
+	onSelectRef.current = onSelect;
+	const dashboardRef = (0, react.useRef)(dashboard);
+	dashboardRef.current = dashboard;
+	const formatTimePropRef = (0, react.useRef)(formatTimeProp);
+	formatTimePropRef.current = formatTimeProp;
+	const yesterdayLabelRef = (0, react.useRef)(labels.yesterday);
+	yesterdayLabelRef.current = labels.yesterday;
+	const handleSearchChange = (0, react.useCallback)((value) => {
+		if (!isSearchControlledRef.current) setInternalSearch(value);
+		onSearchChangeRef.current?.(value);
+	}, []);
+	const handleFilterChange = (0, react.useCallback)((value) => {
+		if (!isFilterControlledRef.current) setInternalFilter(value);
+		onFilterChangeRef.current?.(value);
+	}, []);
+	const handleSelect = (0, react.useCallback)((id) => {
+		onSelectRef.current?.(id);
+		dashboardRef.current?.setMobileView("chat");
+	}, []);
+	const effectiveFormatTime = (0, react.useCallback)((isoDate) => formatTimePropRef.current ? formatTimePropRef.current(isoDate) : formatTimeDefault(isoDate, yesterdayLabelRef.current), []);
+	const chipLabels = (0, react.useMemo)(() => ({
+		all: labels.filterAll,
+		unread: labels.filterUnread
+	}), [labels.filterAll, labels.filterUnread]);
+	const normalizedSearch = search.trim().toLowerCase();
+	const effectiveFilter = filter;
+	const unreadConversationsCount = (0, react.useMemo)(() => conversations.filter((c) => c.unreadCount > 0).length, [conversations]);
+	const filtered = (0, react.useMemo)(() => {
+		return conversations.filter((conversation) => {
+			const matchesSearch = normalizedSearch.length === 0 || conversation.phone.toLowerCase().includes(normalizedSearch) || conversation.contactName?.toLowerCase().includes(normalizedSearch);
+			const matchesFilter = effectiveFilter === "all" || conversation.unreadCount > 0;
+			return matchesSearch && matchesFilter;
+		});
+	}, [
+		conversations,
+		normalizedSearch,
+		effectiveFilter
+	]);
+	const isVisible = !isMobile || mobileView === "list";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.cn("flex flex-col h-full bg-white border-r border-[#e9edef]", isMobile ? "w-full" : "min-w-[320px] max-w-105", className),
+		...props,
+		style: isVisible ? props.style : { display: "none" },
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConversationSearch, {
+				value: search,
+				onChange: handleSearchChange,
+				placeholder: labels.searchPlaceholder,
+				"aria-label": labels.searchLabel
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConversationFilterChips, {
+				value: filter,
+				onValueChange: handleFilterChange,
+				unreadCount: unreadConversationsCount,
+				labels: chipLabels
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "min-h-0 flex-1",
+				children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex items-center justify-center h-full text-sm text-[#667781]",
+					children: labels.loading
+				}) : isError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex items-center justify-center h-full text-sm text-red-500",
+					children: labels.error
+				}) : filtered.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col items-center justify-center h-full gap-2 text-[#667781]",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+						icon: _hugeicons_core_free_icons.Message01Icon,
+						size: 32
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-sm",
+						children: labels.empty
+					})]
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_legendapp_list_react.LegendList, {
+					className: "chat-scrollbar",
+					data: filtered,
+					estimatedItemSize: 72,
+					extraData: selectedConversationId,
+					getFixedItemSize: () => 72,
+					keyExtractor: (conversation) => conversation.id,
+					recycleItems: true,
+					renderItem: ({ item: conversation }) => {
+						const isSelected = selectedConversationId === conversation.id;
+						if (renderItem) return renderItem(conversation, {
+							isSelected,
+							select: () => handleSelect(conversation.id)
+						});
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConversationListRow, {
+							conversation,
+							isSelected,
+							onSelectConversation: handleSelect,
+							avatar: renderAvatar?.(conversation),
+							outgoingPrefix: labels.outgoingPrefix,
+							noPreviewLabel: labels.noPreview,
+							formatTime: effectiveFormatTime
+						});
+					},
+					style: {
+						height: "100%",
+						overflowX: "hidden"
+					}
+				})
+			})
+		]
+	});
+}
+function ConversationItem({ conversation, isSelected = false, avatar, outgoingPrefix = "Você: ", noPreviewLabel = "Sem mensagem", formatTime: formatTimeProp, className, ...props }) {
+	const timeLabel = formatTimeProp ? formatTimeProp(conversation.lastMessageAt) : formatTimeDefault(conversation.lastMessageAt, "Ontem");
+	const hasUnread = conversation.unreadCount > 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		...props,
+		type: "button",
+		"data-selected": isSelected,
+		"aria-current": isSelected ? "true" : void 0,
+		className: require_utils.cn("group flex items-center w-full h-[72px] px-3 gap-3 transition-colors cursor-pointer text-left relative overflow-hidden hover:bg-[#f5f6f6] data-[selected=true]:bg-[#f0f2f5]", className),
+		children: [avatar ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "w-[49px] h-[49px] rounded-full bg-[#dfe5e7] flex items-center justify-center shrink-0",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+				icon: _hugeicons_core_free_icons.UserIcon,
+				size: 28,
+				className: "text-white"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex-1 min-w-0 border-b border-[#e9edef]/70 h-full flex flex-col justify-center pr-1 group-last:border-none group-data-[selected=true]:border-transparent",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex justify-between items-baseline mb-0.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-[17px] font-normal text-[#111b21] truncate",
+					children: conversation.contactName || formatPhone(conversation.phone)
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: require_utils.cn("text-xs shrink-0", hasUnread ? "text-[#1daa61]" : "text-[#667781]"),
+					children: timeLabel
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex justify-between items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: "text-[14px] text-[#667781] truncate",
+					children: [conversation.lastDirection === "incoming" ? "" : outgoingPrefix, conversation.lastMessagePreview || noPreviewLabel]
+				}), hasUnread && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "bg-[#25d366] text-white text-[11px] font-semibold rounded-full min-w-[20px] h-[20px] flex items-center justify-center px-1.5 shrink-0",
+					children: conversation.unreadCount
+				})]
+			})]
+		})]
+	});
+}
+function formatPhone(phone) {
+	if (phone.length === 13 && phone.startsWith("55")) return `(${phone.slice(2, 4)}) ${phone.slice(4, 9)}-${phone.slice(9)}`;
+	return phone;
+}
+function formatTimeDefault(dateStr, yesterdayLabel) {
+	try {
+		const date = new Date(dateStr);
+		const now = /* @__PURE__ */ new Date();
+		if (date.toDateString() === now.toDateString()) return date.toLocaleTimeString("pt-BR", {
+			hour: "2-digit",
+			minute: "2-digit"
+		});
+		const yesterday = new Date(now);
+		yesterday.setDate(yesterday.getDate() - 1);
+		if (date.toDateString() === yesterday.toDateString()) return yesterdayLabel;
+		return date.toLocaleDateString("pt-BR", {
+			day: "2-digit",
+			month: "2-digit"
+		});
+	} catch {
+		return "";
+	}
+}
+//#endregion
+Object.defineProperty(exports, "ConversationFilterChips", {
+	enumerable: true,
+	get: function() {
+		return ConversationFilterChips;
+	}
+});
+Object.defineProperty(exports, "ConversationItem", {
+	enumerable: true,
+	get: function() {
+		return ConversationItem;
+	}
+});
+Object.defineProperty(exports, "ConversationList", {
+	enumerable: true,
+	get: function() {
+		return ConversationList;
+	}
+});

package/dist/conversation-list.cjs

@@ -0,0 +1,6 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("./whatsapp-dashboard.cjs");
+const require_conversation_list = require("./conversation-list-CVWdddJh.cjs");
+exports.ConversationItem = require_conversation_list.ConversationItem;
+exports.ConversationList = require_conversation_list.ConversationList;

package/dist/conversation-list.d.cts

@@ -0,0 +1,2 @@
+import { a as ConversationListProps, i as ConversationListLabels, n as ConversationItemProps, r as ConversationList, t as ConversationItem } from "./conversation-list-BlhJhDsc.cjs";
+export { ConversationItem, ConversationItemProps, ConversationList, ConversationListLabels, ConversationListProps };

package/dist/conversation-list.d.mts

@@ -0,0 +1,2 @@
+import { a as ConversationListProps, i as ConversationListLabels, n as ConversationItemProps, r as ConversationList, t as ConversationItem } from "./conversation-list-BwQ4oK2J.mjs";
+export { ConversationItem, ConversationItemProps, ConversationList, ConversationListLabels, ConversationListProps };

package/dist/conversation-list.mjs

@@ -0,0 +1,5 @@
+"use client";
+import "./utils.mjs";
+import "./whatsapp-dashboard.mjs";
+import { n as ConversationList, t as ConversationItem } from "./conversation-list-C0EmReS-.mjs";
+export { ConversationItem, ConversationList };

package/dist/index.cjs

@@ -0,0 +1,49 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_utils = require("./utils-Bp9IahGG.cjs");
+const require_whatsapp_dashboard = require("./whatsapp-dashboard.cjs");
+const require_bubble = require("./bubble.cjs");
+const require_message = require("./message.cjs");
+const require_message_bubble = require("./message-bubble.cjs");
+const require_message_view = require("./message-view.cjs");
+const require_conversation_list = require("./conversation-list-CVWdddJh.cjs");
+const require_composer = require("./composer.cjs");
+const require_message_input = require("./message-input-DcEzHQ9t.cjs");
+exports.Bubble = require_bubble.Bubble;
+exports.BubbleContent = require_bubble.BubbleContent;
+exports.BubbleGroup = require_bubble.BubbleGroup;
+exports.BubbleReactions = require_bubble.BubbleReactions;
+exports.Composer = require_composer.Composer;
+exports.ComposerButton = require_composer.ComposerButton;
+exports.ComposerError = require_composer.ComposerError;
+exports.ComposerSend = require_composer.ComposerSend;
+exports.ComposerTextarea = require_composer.ComposerTextarea;
+exports.ConversationFilterChips = require_conversation_list.ConversationFilterChips;
+exports.ConversationItem = require_conversation_list.ConversationItem;
+exports.ConversationList = require_conversation_list.ConversationList;
+exports.DateDivider = require_message_view.DateDivider;
+exports.FormattedMessage = require_message_bubble.FormattedMessage;
+exports.FreeformWindowClosedError = require_message_input.FreeformWindowClosedError;
+exports.Message = require_message.Message;
+exports.MessageAvatar = require_message.MessageAvatar;
+exports.MessageBubble = require_message_bubble.MessageBubble;
+exports.MessageContent = require_message.MessageContent;
+exports.MessageFooter = require_message.MessageFooter;
+exports.MessageGroup = require_message.MessageGroup;
+exports.MessageHeader = require_message.MessageHeader;
+exports.MessageInput = require_message_input.MessageInput;
+exports.MessageList = require_message_view.MessageList;
+exports.MessageView = require_message_view.MessageView;
+exports.MessageViewContent = require_message_view.MessageViewContent;
+exports.MessageViewEmpty = require_message_view.MessageViewEmpty;
+exports.MessageViewHeader = require_message_view.MessageViewHeader;
+exports.WhatsappDashboard = require_whatsapp_dashboard.WhatsappDashboard;
+exports.cn = require_utils.cn;
+exports.getDisplayDate = require_utils.getDisplayDate;
+exports.renderSlot = require_utils.renderSlot;
+exports.useComposer = require_composer.useComposer;
+exports.useComposerState = require_composer.useComposerState;
+exports.useComposerValue = require_composer.useComposerValue;
+exports.useFreeformMessageWindow = require_message_input.useFreeformMessageWindow;
+exports.useOptionalWhatsappDashboard = require_whatsapp_dashboard.useOptionalWhatsappDashboard;
+exports.useWhatsappDashboard = require_whatsapp_dashboard.useWhatsappDashboard;