@jcdecor/vue 0.1.0

package/dist/chat/ChatLayout.d.ts

@@ -0,0 +1,53 @@
+import { type DefineSetupFnComponent, type SlotsType, type VNodeChild } from 'vue';
+import { type BoxProps, type MantineNode } from '@mantine-vue/core';
+export interface ChatHeaderProps extends BoxProps {
+    /** Nome da conversa. O slot `#title` tem prioridade. */
+    title?: MantineNode;
+    /** Status/descrição abaixo do título. O slot `#subtitle` tem prioridade. */
+    subtitle?: MantineNode;
+    avatar?: string;
+    /** Nome para iniciais do avatar */
+    avatarName?: string;
+    online?: boolean;
+    /** Ações à direita (botões, menu). O slot `#actions` tem prioridade. */
+    actions?: MantineNode;
+}
+export type ChatHeaderEmits = {
+    /** Clique no botão voltar. O botão (mobile) só aparece quando há um listener `@back`. */
+    back: () => void;
+};
+export interface ChatHeaderSlots {
+    title?: () => VNodeChild;
+    subtitle?: () => VNodeChild;
+    actions?: () => VNodeChild;
+}
+/**
+ * Cabeçalho da conversa: avatar, nome, status e ações.
+ *
+ * O botão voltar aparece só com `@back` (equivalente à presença de `onBack` no @jcdecor/ui):
+ * `onBack` é declarado como prop — padrão do Vue para detectar se o pai escutou o evento.
+ */
+export declare const ChatHeader: DefineSetupFnComponent<ChatHeaderProps, ChatHeaderEmits, SlotsType<ChatHeaderSlots>>;
+export interface ChatLayoutProps extends BoxProps {
+    /** Lista de conversas (coluna esquerda) — omita para um chat único. O slot `#sidebar` tem prioridade. */
+    sidebar?: MantineNode;
+    /** Normalmente um <ChatHeader />. O slot `#header` tem prioridade. */
+    header?: MantineNode;
+    /** Normalmente um <ChatComposer />. O slot `#composer` tem prioridade. */
+    composer?: MantineNode;
+    /** Altura total @default 600 */
+    height?: number | string;
+    /** @default 320 */
+    sidebarWidth?: number | string;
+    /** Em telas pequenas mostra só a lista ou só a conversa @default 'thread' */
+    mobileView?: 'list' | 'thread';
+}
+export interface ChatLayoutSlots {
+    /** Normalmente um <ChatThread /> */
+    default?: () => VNodeChild;
+    sidebar?: () => VNodeChild;
+    header?: () => VNodeChild;
+    composer?: () => VNodeChild;
+}
+/** Layout de chat: conversas + cabeçalho + mensagens + composer (responsivo). */
+export declare const ChatLayout: DefineSetupFnComponent<ChatLayoutProps, {}, SlotsType<ChatLayoutSlots>>;

package/dist/chat/ChatMessage.d.ts

@@ -0,0 +1,26 @@
+import { type DefineSetupFnComponent, type SlotsType, type VNodeChild } from 'vue';
+import { type BoxProps } from '@mantine-vue/core';
+import { type GroupPosition } from './utils';
+import type { ChatAttachment, ChatMessageStatus, ChatUser } from './types';
+export interface ChatMessageProps extends BoxProps {
+    /** Mensagem do usuário atual (alinhada à direita, bolha azul) */
+    own?: boolean;
+    author?: ChatUser;
+    /** Exibe o nome do autor acima da bolha (útil em grupos) */
+    showAuthor?: boolean;
+    /** Exibe avatar ao lado da bolha (só na última mensagem do grupo) @default true */
+    showAvatar?: boolean;
+    createdAt?: Date | string | number;
+    status?: ChatMessageStatus;
+    attachments?: ChatAttachment[];
+    /** Posição dentro de um grupo de mensagens consecutivas @default 'single' */
+    position?: GroupPosition;
+    /** Mensagem de sistema (centralizada) */
+    system?: boolean;
+}
+export interface ChatMessageSlots {
+    /** Conteúdo da bolha (texto, links, cards…). Sem conteúdo, a bolha não é renderizada. */
+    default?: () => VNodeChild;
+}
+/** Bolha de mensagem de chat. O slot padrão é o conteúdo da bolha; atributos vão para o Box raiz. */
+export declare const ChatMessage: DefineSetupFnComponent<ChatMessageProps, {}, SlotsType<ChatMessageSlots>>;

package/dist/chat/ChatThread.d.ts

@@ -0,0 +1,36 @@
+import { type DefineSetupFnComponent, type SlotsType, type VNodeChild } from 'vue';
+import { type MantineNode, type ScrollAreaProps } from '@mantine-vue/core';
+import type { ChatMessageData, ChatUser } from './types';
+export interface ChatThreadProps extends ScrollAreaProps {
+    messages: ChatMessageData[];
+    /** Id do usuário atual — suas mensagens ficam à direita */
+    currentUserId: string;
+    users?: ChatUser[] | Record<string, ChatUser>;
+    /** Nomes de quem está digitando agora */
+    typing?: string[];
+    /** Mostra nome do autor no início de cada grupo (conversas em grupo) */
+    showAuthors?: boolean;
+    /** Rola para a última mensagem quando chegam novas (se o usuário estiver perto do fim) @default true */
+    autoScroll?: boolean;
+    /** Janela (ms) para agrupar mensagens consecutivas do mesmo autor @default 300000 */
+    groupWindow?: number;
+    /** Conteúdo exibido quando não há mensagens. O slot `#empty` tem prioridade. */
+    empty?: MantineNode;
+    /** Renderização customizada do conteúdo da bolha. O slot `#content="{ message }"` tem prioridade. */
+    renderContent?: (message: ChatMessageData) => VNodeChild;
+    /** Altura da área rolável @default '100%' */
+    h?: ScrollAreaProps['h'];
+}
+export interface ChatThreadSlots {
+    /** Conteúdo exibido quando não há mensagens */
+    empty?: () => VNodeChild;
+    /** Conteúdo customizado da bolha de cada mensagem */
+    content?: (props: {
+        message: ChatMessageData;
+    }) => VNodeChild;
+}
+/**
+ * Lista rolável de mensagens com separadores de data, agrupamento e auto-scroll.
+ * Atributos e props do ScrollArea (`type`, `scrollbarSize`…) vão para o ScrollArea raiz.
+ */
+export declare const ChatThread: DefineSetupFnComponent<ChatThreadProps, {}, SlotsType<ChatThreadSlots>>;

package/dist/chat/ConversationList.d.ts

@@ -0,0 +1,22 @@
+import { type DefineSetupFnComponent, type SlotsType, type VNodeChild } from 'vue';
+import { type BoxProps, type MantineNode } from '@mantine-vue/core';
+import type { Conversation } from './types';
+export interface ConversationListProps extends BoxProps {
+    conversations: Conversation[];
+    activeId?: string | null;
+    /** Exibe campo de busca @default true */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** Conteúdo quando a lista (ou a busca) fica vazia. O slot `#empty` tem prioridade. */
+    empty?: MantineNode;
+}
+export type ConversationListEmits = {
+    /** Clique em uma conversa */
+    select: (conversation: Conversation) => void;
+};
+export interface ConversationListSlots {
+    /** Conteúdo quando a lista (ou a busca) fica vazia */
+    empty?: () => VNodeChild;
+}
+/** Lista de conversas com busca, não lidas, presença e última mensagem. */
+export declare const ConversationList: DefineSetupFnComponent<ConversationListProps, ConversationListEmits, SlotsType<ConversationListSlots>>;

package/dist/chat/TypingIndicator.d.ts

@@ -0,0 +1,8 @@
+import { type DefineSetupFnComponent } from 'vue';
+import { type BoxProps } from '@mantine-vue/core';
+export interface TypingIndicatorProps extends BoxProps {
+    /** Nomes de quem está digitando. Vazio = só os pontinhos. */
+    names?: string[];
+}
+/** Indicador animado de "digitando…". Atributos e style props (`mt`, `ml`…) vão para o Box raiz. */
+export declare const TypingIndicator: DefineSetupFnComponent<TypingIndicatorProps>;

package/dist/chat/index.d.ts

@@ -0,0 +1,9 @@
+export * from './types';
+export * from './ChatMessage';
+export * from './ChatThread';
+export * from './ChatComposer';
+export * from './TypingIndicator';
+export * from './ConversationList';
+export * from './ChatLayout';
+export { buildThread, dayLabel, shortTimeLabel, formatBytes, initialsName } from './utils';
+export type { GroupPosition, ThreadItem } from './utils';

package/dist/chat/node.d.ts

@@ -0,0 +1,12 @@
+import { type PropType, type VNodeChild } from 'vue';
+import type { MantineNode } from '@mantine-vue/core';
+/**
+ * Prop que espelha um `React.ReactNode` do @jcdecor/ui: aceita VNode, texto ou função de render.
+ * Sem validação de tipo em runtime (VNodeChild inclui string, número, array, objeto, função…).
+ */
+export declare const nodeProp: {
+    type: PropType<MantineNode>;
+    default: undefined;
+};
+/** `true` se o conteúdo renderiza algo visível (ignora null, false, '', comentários e fragments vazios). */
+export declare function hasContent(node: VNodeChild): boolean;

package/dist/chat/types.d.ts

@@ -0,0 +1,38 @@
+export type ChatMessageStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'error';
+export interface ChatUser {
+    id: string;
+    name: string;
+    avatar?: string;
+    /** Cor do avatar com iniciais (cor do tema) */
+    color?: string;
+}
+export interface ChatAttachment {
+    name: string;
+    url?: string;
+    /** `image` exibe miniatura; `file` exibe chip com nome/tamanho */
+    type?: 'image' | 'file';
+    /** Tamanho em bytes */
+    size?: number;
+}
+export interface ChatMessageData {
+    id: string;
+    authorId: string;
+    text?: string;
+    createdAt: Date | string | number;
+    status?: ChatMessageStatus;
+    attachments?: ChatAttachment[];
+    /** Mensagem de sistema (centralizada, sem bolha) */
+    system?: boolean;
+}
+export interface Conversation {
+    id: string;
+    name: string;
+    avatar?: string;
+    color?: string;
+    lastMessage?: string;
+    lastMessageAt?: Date | string | number;
+    unread?: number;
+    online?: boolean;
+    /** Selo/etiqueta (ex.: "Pedido #1234") */
+    tag?: string;
+}

package/dist/chat/utils.d.ts

@@ -0,0 +1,25 @@
+import type { ChatMessageData } from './types';
+export declare function toDate(value: Date | string | number): Date;
+/** "Hoje", "Ontem", "segunda-feira" (últimos 7 dias) ou "12 de set. de 2026". */
+export declare function dayLabel(value: Date | string | number, now?: Date): string;
+/** Horário curto para listas: "14:32" hoje, "Ontem", ou "12/09". */
+export declare function shortTimeLabel(value: Date | string | number, now?: Date): string;
+export type GroupPosition = 'single' | 'first' | 'middle' | 'last';
+export type ThreadItem = {
+    type: 'separator';
+    key: string;
+    label: string;
+} | {
+    type: 'message';
+    key: string;
+    message: ChatMessageData;
+    position: GroupPosition;
+};
+/**
+ * Agrupa mensagens consecutivas do mesmo autor (janela de `groupWindowMs`)
+ * e insere separadores de data.
+ */
+export declare function buildThread(messages: ChatMessageData[], groupWindowMs?: number, now?: Date): ThreadItem[];
+/** Remove símbolos/separadores para as iniciais do Avatar: "Bruno · Instalação" → "Bruno Instalação" (BI). */
+export declare function initialsName(name: string): string;
+export declare function formatBytes(bytes: number): string;

package/dist/chat.d.ts

@@ -0,0 +1 @@
+export * from './chat/index';