@better-zap/react 0.2.1 → 0.2.2

package/dist/message-view.d.mts

@@ -0,0 +1,109 @@
+import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Conversation, UIMessage } from "better-zap";
+
+//#region src/message-view.d.ts
+interface MessageViewProps extends React.ComponentProps<"div"> {
+  children?: React.ReactNode;
+}
+declare function MessageView({
+  children,
+  className,
+  style,
+  ...props
+}: MessageViewProps): react_jsx_runtime0.JSX.Element | null;
+interface MessageViewHeaderLabels {
+  back: string;
+  info: string;
+}
+interface MessageViewHeaderProps extends React.ComponentProps<"div"> {
+  conversation?: Conversation;
+  onBack?: () => void;
+  onInfoClick?: () => void;
+  /** Force the back button outside dashboard context. Default: ctx?.isMobile ?? false */
+  showBackButton?: boolean;
+  /** Replaces the right-side default info button entirely. */
+  actions?: React.ReactNode;
+  labels?: Partial<MessageViewHeaderLabels>;
+  /** children replace the identity block (name + phone) when provided. */
+  children?: React.ReactNode;
+}
+declare function MessageViewHeader({
+  conversation,
+  onBack,
+  onInfoClick,
+  showBackButton,
+  actions,
+  labels: labelsProp,
+  children,
+  className,
+  ...props
+}: MessageViewHeaderProps): react_jsx_runtime0.JSX.Element;
+interface MessageViewContentProps extends React.ComponentProps<"div"> {
+  children?: React.ReactNode;
+  autoScroll?: boolean;
+  /** Called when the user scrolls to the top of the container. */
+  onScrollTop?: () => void;
+}
+declare function MessageViewContent({
+  children,
+  autoScroll,
+  onScrollTop,
+  className,
+  ...props
+}: MessageViewContentProps): react_jsx_runtime0.JSX.Element;
+type MessageGroupPosition = "single" | "first" | "middle" | "last";
+interface MessageRenderContext {
+  message: UIMessage;
+  /** Stable list identity — always message.id. */
+  id: string;
+  direction: "incoming" | "outgoing";
+  /** Presentation alignment: incoming → "start", outgoing → "end". */
+  align: "start" | "end";
+  groupPosition: MessageGroupPosition;
+  /** Result of renderMessageLabel, when provided. */
+  label?: string;
+}
+interface DateDividerRenderContext {
+  /** Formatted label (output of formatDate / getDisplayDate). */
+  label: string;
+  /** sentAt of the first message under this divider (raw ISO string). */
+  date: string;
+}
+interface MessageListProps {
+  messages: UIMessage[];
+  renderMessage?: (context: MessageRenderContext) => React.ReactNode;
+  renderDateDivider?: (context: DateDividerRenderContext) => React.ReactNode;
+  /** Formats divider labels. Default: getDisplayDate (pt-BR HOJE/ONTEM). */
+  formatDate?: (isoDate: string) => string;
+  /** Formats the in-bubble timestamp used by the DEFAULT renderer. Default: pt-BR HH:mm. */
+  formatTime?: (isoDate: string) => string;
+  renderMessageLabel?: (message: UIMessage) => string | undefined;
+  /** Direct props — context from MessageViewContent still works; these win over it. */
+  autoScroll?: boolean;
+  onScrollTop?: () => void;
+  className?: string;
+}
+declare function MessageList({
+  messages,
+  renderMessage,
+  renderDateDivider,
+  formatDate,
+  formatTime,
+  renderMessageLabel,
+  autoScroll: autoScrollProp,
+  onScrollTop: onScrollTopProp,
+  className
+}: MessageListProps): react_jsx_runtime0.JSX.Element;
+declare function DateDivider({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+declare function MessageViewEmpty({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DateDivider, DateDividerRenderContext, MessageGroupPosition, MessageList, MessageListProps, MessageRenderContext, MessageView, MessageViewContent, MessageViewContentProps, MessageViewEmpty, MessageViewHeader, MessageViewHeaderLabels, MessageViewHeaderProps, MessageViewProps };

package/dist/message-view.mjs

@@ -0,0 +1,266 @@
+"use client";
+import { cn, getDisplayDate } from "./utils.mjs";
+import { useOptionalWhatsappDashboard } from "./whatsapp-dashboard.mjs";
+import { MessageBubble } from "./message-bubble.mjs";
+import React, { useContext, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { ArrowLeft02Icon, InformationCircleIcon, Message01Icon, UserIcon } from "@hugeicons/core-free-icons";
+import { LegendList } from "@legendapp/list/react";
+//#region src/message-view.tsx
+function MessageView({ children, className, style, ...props }) {
+	const ctx = useOptionalWhatsappDashboard();
+	const isMobile = ctx?.isMobile ?? false;
+	const mobileView = ctx?.mobileView ?? "chat";
+	const hasContent = React.Children.count(children) > 0;
+	const isVisible = !isMobile || mobileView === "chat";
+	if (!hasContent) {
+		if (isMobile) return null;
+		return /* @__PURE__ */ jsx(MessageViewEmpty, {
+			className,
+			style,
+			...props
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex flex-1 flex-col bg-[#efeae2]", className),
+		style: {
+			...style,
+			...isVisible ? null : { display: "none" }
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx("div", { style: {
+			position: "absolute",
+			backgroundImage: `url(${new URL("./wpp-bg.webp", import.meta.url).href})`,
+			backgroundRepeat: "repeat",
+			opacity: .15,
+			inset: 0
+		} }), /* @__PURE__ */ jsx("div", {
+			className: "relative flex flex-1 flex-col min-h-0",
+			children
+		})]
+	});
+}
+const DEFAULT_HEADER_LABELS = {
+	back: "Voltar",
+	info: "Informações"
+};
+const iconButtonClassName = "inline-flex h-10 w-10 items-center justify-center rounded-full text-[#54656f] hover:bg-black/5 focus-visible:outline-2 focus-visible:outline-offset-2";
+function MessageViewHeader({ conversation, onBack, onInfoClick, showBackButton, actions, labels: labelsProp, children, className, ...props }) {
+	const ctx = useOptionalWhatsappDashboard();
+	const labels = {
+		...DEFAULT_HEADER_LABELS,
+		...labelsProp
+	};
+	const showBack = showBackButton ?? ctx?.isMobile ?? false;
+	const handleBack = () => {
+		ctx?.setMobileView("list");
+		onBack?.();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex h-[59px] shrink-0 items-center justify-between bg-[#f0f2f5] px-4 z-20", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3",
+			children: [showBack && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": labels.back,
+				className: iconButtonClassName,
+				onClick: handleBack,
+				children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+					icon: ArrowLeft02Icon,
+					size: 20
+				})
+			}), children ?? (conversation ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#dfe5e7]",
+				children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+					icon: UserIcon,
+					size: 24,
+					className: "text-white"
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-[16px] font-medium text-[#111b21] leading-tight",
+					children: conversation.contactName || conversation.phone
+				}), conversation.contactName && /* @__PURE__ */ jsx("span", {
+					className: "text-[13px] text-[#667781] leading-tight",
+					children: conversation.phone
+				})]
+			})] }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col" }))]
+		}), actions ?? (onInfoClick ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": labels.info,
+			className: iconButtonClassName,
+			onClick: onInfoClick,
+			children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+				icon: InformationCircleIcon,
+				size: 20
+			})
+		}) : null)]
+	});
+}
+const MessageViewScrollContext = React.createContext(null);
+function MessageViewContent({ children, autoScroll = true, onScrollTop, className, ...props }) {
+	return /* @__PURE__ */ jsx(MessageViewScrollContext.Provider, {
+		value: {
+			autoScroll,
+			onScrollTop
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex min-h-0 flex-1 flex-col p-4 pb-0", className),
+			...props,
+			children
+		})
+	});
+}
+const MemoizedMessageBubble = React.memo(MessageBubble);
+const MemoizedDateDivider = React.memo(DateDivider);
+function defaultFormatTime(isoDate) {
+	return new Date(isoDate).toLocaleTimeString("pt-BR", {
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}
+function sameGroup(a, b, resolveFormatDate) {
+	return resolveFormatDate(a.sentAt) === resolveFormatDate(b.sentAt) && a.direction === b.direction;
+}
+function getGroupPosition(messages, index, resolveFormatDate) {
+	const n = messages.length;
+	const prevSame = index > 0 && sameGroup(messages[index - 1], messages[index], resolveFormatDate);
+	const nextSame = index < n - 1 && sameGroup(messages[index], messages[index + 1], resolveFormatDate);
+	if (!prevSame && !nextSame) return "single";
+	if (!prevSame && nextSame) return "first";
+	if (prevSame && nextSame) return "middle";
+	return "last";
+}
+function MessageList({ messages, renderMessage, renderDateDivider, formatDate, formatTime, renderMessageLabel, autoScroll: autoScrollProp, onScrollTop: onScrollTopProp, className }) {
+	const scrollContext = useContext(MessageViewScrollContext);
+	const resolvedAutoScroll = autoScrollProp ?? scrollContext?.autoScroll ?? true;
+	const resolvedOnScrollTop = onScrollTopProp ?? scrollContext?.onScrollTop;
+	const resolveFormatDate = formatDate ?? getDisplayDate;
+	const resolveFormatTime = formatTime ?? defaultFormatTime;
+	const { items, stickyHeaderIndices } = useMemo(() => {
+		const itemsNew = [];
+		const stickyHeaderIndicesNew = [];
+		let currentLabel = null;
+		const labelCounts = /* @__PURE__ */ new Map();
+		messages.forEach((msg, index) => {
+			const label = resolveFormatDate(msg.sentAt);
+			if (currentLabel !== label) {
+				currentLabel = label;
+				stickyHeaderIndicesNew.push(itemsNew.length);
+				const seen = labelCounts.get(label) ?? 0;
+				labelCounts.set(label, seen + 1);
+				const id = seen === 0 ? `date:${label}` : `date:${label}:${seen}`;
+				itemsNew.push({
+					type: "date",
+					id,
+					label,
+					date: msg.sentAt
+				});
+			}
+			itemsNew.push({
+				type: "message",
+				id: msg.id,
+				message: msg,
+				groupPosition: getGroupPosition(messages, index, resolveFormatDate)
+			});
+		});
+		return {
+			items: itemsNew,
+			stickyHeaderIndices: stickyHeaderIndicesNew
+		};
+	}, [messages, resolveFormatDate]);
+	return /* @__PURE__ */ jsx(LegendList, {
+		alignItemsAtEnd: true,
+		className: cn("chat-scrollbar", className),
+		contentContainerStyle: { paddingBottom: 16 },
+		data: items,
+		estimatedItemSize: 72,
+		getItemType: (item) => item.type,
+		initialScrollAtEnd: resolvedAutoScroll,
+		keyExtractor: (item) => item.id,
+		maintainScrollAtEnd: resolvedAutoScroll,
+		maintainVisibleContentPosition: true,
+		onStartReached: resolvedOnScrollTop ? () => resolvedOnScrollTop() : void 0,
+		onStartReachedThreshold: .1,
+		recycleItems: true,
+		renderItem: ({ item }) => {
+			if (item.type === "date") return renderDateDivider?.({
+				label: item.label,
+				date: item.date
+			}) ?? /* @__PURE__ */ jsx(MemoizedDateDivider, { children: item.label });
+			const { message, groupPosition } = item;
+			const label = renderMessageLabel?.(message);
+			const direction = message.direction;
+			const align = direction === "incoming" ? "start" : "end";
+			const ctx = {
+				message,
+				id: message.id,
+				direction,
+				align,
+				groupPosition,
+				label
+			};
+			return renderMessage?.(ctx) ?? /* @__PURE__ */ jsx(MemoizedMessageBubble, {
+				content: message.content || "",
+				sender: direction === "incoming" ? "user" : "bot",
+				timestamp: resolveFormatTime(message.sentAt),
+				status: message.status,
+				templateName: message.templateName || void 0,
+				label,
+				groupPosition
+			});
+		},
+		stickyHeaderIndices,
+		style: {
+			height: "100%",
+			minHeight: 0
+		}
+	});
+}
+function DateDivider({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("sticky top-0 z-10 flex justify-center w-full py-2 pointer-events-none", className),
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "bg-white shadow-[0_1px_0.5px_rgba(11,20,26,0.13)] text-[#54656f] text-[12.5px] font-medium px-3 py-[5px] rounded-[7.5px] uppercase pointer-events-auto",
+			children
+		})
+	});
+}
+function MessageViewEmpty({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative flex flex-1 flex-col items-center justify-center bg-[#f0f2f5] text-[#667781] p-6 border-b-[6px] border-[#25d366]", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(HugeiconsIcon, {
+				icon: Message01Icon,
+				size: 96,
+				strokeWidth: 1,
+				className: "mb-6 text-[#c6cdd2]"
+			}),
+			/* @__PURE__ */ jsx("h1", {
+				className: "mb-4 text-[32px] font-light text-[#41525d]",
+				children: "Better Zap"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "max-w-md space-y-3 text-center",
+				children: [/* @__PURE__ */ jsxs("p", {
+					className: "text-sm leading-[20px]",
+					children: [
+						"Esta é uma interface dedicada para visualização e monitoramento de mensagens da ",
+						/* @__PURE__ */ jsx("strong", { children: "API Oficial do WhatsApp" }),
+						"."
+					]
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-sm leading-[20px] opacity-80",
+					children: "Acompanhe o histórico de conversas, verifique o status de entrega e gerencie as interações do Cloud API de forma profissional."
+				})]
+			})
+		] })
+	});
+}
+//#endregion
+export { DateDivider, MessageList, MessageView, MessageViewContent, MessageViewEmpty, MessageViewHeader };

package/dist/message.cjs

@@ -0,0 +1,50 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_utils = require("./utils-Bp9IahGG.cjs");
+let react = require("react");
+react = require_utils.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/message.tsx
+function Message({ align = "start", className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-align": align,
+		className: require_utils.cn("group/message flex w-full gap-2", align === "start" ? "justify-start" : "justify-end", className),
+		...props
+	});
+}
+function MessageAvatar({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("flex size-8 shrink-0 self-end items-center justify-center overflow-hidden rounded-full bg-gray-200", className),
+		...props
+	});
+}
+function MessageContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("flex min-w-0 max-w-[65%] flex-col gap-0.5 items-start group-data-[align=end]/message:items-end", className),
+		...props
+	});
+}
+function MessageHeader({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("self-start flex items-center gap-2 px-1 text-xs text-gray-500", className),
+		...props
+	});
+}
+function MessageFooter({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("flex items-center gap-1 px-1 text-[11px] text-gray-500", className),
+		...props
+	});
+}
+function MessageGroup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("flex w-full flex-col gap-0.5", className),
+		...props
+	});
+}
+//#endregion
+exports.Message = Message;
+exports.MessageAvatar = MessageAvatar;
+exports.MessageContent = MessageContent;
+exports.MessageFooter = MessageFooter;
+exports.MessageGroup = MessageGroup;
+exports.MessageHeader = MessageHeader;

package/dist/message.d.cts

@@ -0,0 +1,40 @@
+import React from "react";
+
+//#region src/message.d.ts
+type MessageAlign = "start" | "end";
+interface MessageProps extends React.ComponentProps<"div"> {
+  /** @default "start" */
+  align?: MessageAlign;
+}
+declare function Message({
+  align,
+  className,
+  ...props
+}: MessageProps): React.JSX.Element;
+type MessageAvatarProps = React.ComponentProps<"div">;
+declare function MessageAvatar({
+  className,
+  ...props
+}: MessageAvatarProps): React.JSX.Element;
+type MessageContentProps = React.ComponentProps<"div">;
+declare function MessageContent({
+  className,
+  ...props
+}: MessageContentProps): React.JSX.Element;
+type MessageHeaderProps = React.ComponentProps<"div">;
+declare function MessageHeader({
+  className,
+  ...props
+}: MessageHeaderProps): React.JSX.Element;
+type MessageFooterProps = React.ComponentProps<"div">;
+declare function MessageFooter({
+  className,
+  ...props
+}: MessageFooterProps): React.JSX.Element;
+type MessageGroupProps = React.ComponentProps<"div">;
+declare function MessageGroup({
+  className,
+  ...props
+}: MessageGroupProps): React.JSX.Element;
+//#endregion
+export { Message, MessageAlign, MessageAvatar, MessageAvatarProps, MessageContent, MessageContentProps, MessageFooter, MessageFooterProps, MessageGroup, MessageGroupProps, MessageHeader, MessageHeaderProps, MessageProps };

package/dist/message.d.mts

@@ -0,0 +1,40 @@
+import React from "react";
+
+//#region src/message.d.ts
+type MessageAlign = "start" | "end";
+interface MessageProps extends React.ComponentProps<"div"> {
+  /** @default "start" */
+  align?: MessageAlign;
+}
+declare function Message({
+  align,
+  className,
+  ...props
+}: MessageProps): React.JSX.Element;
+type MessageAvatarProps = React.ComponentProps<"div">;
+declare function MessageAvatar({
+  className,
+  ...props
+}: MessageAvatarProps): React.JSX.Element;
+type MessageContentProps = React.ComponentProps<"div">;
+declare function MessageContent({
+  className,
+  ...props
+}: MessageContentProps): React.JSX.Element;
+type MessageHeaderProps = React.ComponentProps<"div">;
+declare function MessageHeader({
+  className,
+  ...props
+}: MessageHeaderProps): React.JSX.Element;
+type MessageFooterProps = React.ComponentProps<"div">;
+declare function MessageFooter({
+  className,
+  ...props
+}: MessageFooterProps): React.JSX.Element;
+type MessageGroupProps = React.ComponentProps<"div">;
+declare function MessageGroup({
+  className,
+  ...props
+}: MessageGroupProps): React.JSX.Element;
+//#endregion
+export { Message, MessageAlign, MessageAvatar, MessageAvatarProps, MessageContent, MessageContentProps, MessageFooter, MessageFooterProps, MessageGroup, MessageGroupProps, MessageHeader, MessageHeaderProps, MessageProps };

package/dist/message.mjs

@@ -0,0 +1,43 @@
+import { cn } from "./utils.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/message.tsx
+function Message({ align = "start", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-align": align,
+		className: cn("group/message flex w-full gap-2", align === "start" ? "justify-start" : "justify-end", className),
+		...props
+	});
+}
+function MessageAvatar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex size-8 shrink-0 self-end items-center justify-center overflow-hidden rounded-full bg-gray-200", className),
+		...props
+	});
+}
+function MessageContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex min-w-0 max-w-[65%] flex-col gap-0.5 items-start group-data-[align=end]/message:items-end", className),
+		...props
+	});
+}
+function MessageHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("self-start flex items-center gap-2 px-1 text-xs text-gray-500", className),
+		...props
+	});
+}
+function MessageFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-1 px-1 text-[11px] text-gray-500", className),
+		...props
+	});
+}
+function MessageGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex w-full flex-col gap-0.5", className),
+		...props
+	});
+}
+//#endregion
+export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };

package/dist/tailwind.css

@@ -0,0 +1,33 @@
+/*
+ * Tailwind CSS source manifest for @better-zap/react components.
+ *
+ * Consuming apps should import this file (e.g. `@import "@better-zap/react/tailwind.css"`)
+ * so that Tailwind's JIT scanner picks up every utility class used by the components.
+ *
+ * The `@source "."` directive tells Tailwind to scan all recognised file types
+ * in this directory, and the path resolves relative to THIS file — so it works
+ * regardless of where the consuming app lives in the monorepo.
+ */
+@source ".";
+
+/*
+ * WhatsApp-style thin scrollbar used by ConversationList and MessageList.
+ * Plain CSS (not utilities) so it ships even without Tailwind plugins.
+ */
+.chat-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(11, 20, 26, 0.2) transparent;
+}
+
+.chat-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chat-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(11, 20, 26, 0.2);
+  border-radius: 3px;
+}

package/dist/utils-Bp9IahGG.cjs

@@ -0,0 +1,91 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+let react = require("react");
+react = __toESM(react);
+let clsx = require("clsx");
+let tailwind_merge = require("tailwind-merge");
+//#region src/utils.ts
+function cn(...inputs) {
+	return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
+}
+/**
+* Base UI-style element polymorphism: merge part props onto a render element.
+* - className: cn(computed, render.props.className)
+* - style: { ...computed.style, ...render.props.style }
+* - other props: render element's own props win
+* - children: part children win unless render element already has children
+*/
+function renderSlot(render, computed) {
+	const renderProps = render.props;
+	const merged = {
+		...computed,
+		...renderProps,
+		className: cn(computed.className, renderProps.className),
+		style: {
+			...computed.style ?? {},
+			...renderProps.style ?? {}
+		},
+		children: renderProps.children !== void 0 && renderProps.children !== null ? renderProps.children : computed.children
+	};
+	return react.default.cloneElement(render, merged);
+}
+function getDisplayDate(dateStr) {
+	const dateObj = new Date(dateStr);
+	const now = /* @__PURE__ */ new Date();
+	const isToday = dateObj.toDateString() === now.toDateString();
+	const yesterday = new Date(now);
+	yesterday.setDate(yesterday.getDate() - 1);
+	const isYesterday = dateObj.toDateString() === yesterday.toDateString();
+	if (isToday) return "HOJE";
+	else if (isYesterday) return "ONTEM";
+	else return dateObj.toLocaleDateString("pt-BR", {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric"
+	});
+}
+//#endregion
+Object.defineProperty(exports, "__toESM", {
+	enumerable: true,
+	get: function() {
+		return __toESM;
+	}
+});
+Object.defineProperty(exports, "cn", {
+	enumerable: true,
+	get: function() {
+		return cn;
+	}
+});
+Object.defineProperty(exports, "getDisplayDate", {
+	enumerable: true,
+	get: function() {
+		return getDisplayDate;
+	}
+});
+Object.defineProperty(exports, "renderSlot", {
+	enumerable: true,
+	get: function() {
+		return renderSlot;
+	}
+});

package/dist/utils.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_utils = require("./utils-Bp9IahGG.cjs");
+exports.cn = require_utils.cn;
+exports.getDisplayDate = require_utils.getDisplayDate;
+exports.renderSlot = require_utils.renderSlot;