@jcdecor/ui 0.1.0

package/dist/chat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat.js","names":["classes","classes","classes","classes","classes","classes","DAY","toDate","value","startOfDay","date","dayLabel","diff","now","shortTimeLabel","buildThread","items","lastDay","messages","message","day","prev","index","next","joinsPrev","groupWindowMs","joinsNext","position","initialsName","name","formatBytes","bytes","Chat_module_default","statusLabel","StatusIcon","status","Loader","IconCheck","IconAlertCircle","IconChecks","ChatMessage","others","system","Box","isLast","isFirst","time","createdAt","own","showAvatar","author","Avatar","showAuthor","attachments","file","IconFile","children","Tooltip","typingLabel","names","TypingIndicator","label","ChatThread","viewport","useRef","content","nearBottom","mounted","userMap","useMemo","users","u","groupWindow","lastMessage","useEffect","el","autoScroll","currentUserId","typing","inner","observer","ScrollArea","y","empty","item","showAuthors","renderContent","ChatComposer","text","setText","useUncontrolled","files","setFiles","useState","canSend","disabled","send","onSend","Pill","f","i","leftSection","allowAttachments","FileButton","selected","ActionIcon","props","IconPaperclip","Textarea","event","placeholder","sendLabel","IconSend2","ConversationList","query","setQuery","filtered","q","conversations","c","searchable","TextInput","searchPlaceholder","IconSearch","activeId","onSelect","Indicator","Badge","ChatHeader","onBack","IconArrowLeft","avatar","avatarName","online","title","subtitle","actions","ChatLayout","toCss","v","height","sidebarWidth","style","sidebar","mobileView","header","composer"],"sources":["../src/chat/utils.ts","../src/chat/Chat.module.css","../src/chat/ChatMessage.tsx","../src/chat/TypingIndicator.tsx","../src/chat/ChatThread.tsx","../src/chat/ChatComposer.tsx","../src/chat/ConversationList.tsx","../src/chat/ChatLayout.tsx"],"sourcesContent":["import type { ChatMessageData } from './types';\n\nconst DAY = 24 * 60 * 60 * 1000;\n\nexport function toDate(value: Date | string | number) {\n  return value instanceof Date ? value : new Date(value);\n}\n\nfunction startOfDay(date: Date) {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();\n}\n\n/** \"Hoje\", \"Ontem\", \"segunda-feira\" (últimos 7 dias) ou \"12 de set. de 2026\". */\nexport function dayLabel(value: Date | string | number, now = new Date()) {\n  const date = toDate(value);\n  const diff = Math.round((startOfDay(now) - startOfDay(date)) / DAY);\n  if (diff === 0) return 'Hoje';\n  if (diff === 1) return 'Ontem';\n  if (diff > 1 && diff < 7) return new Intl.DateTimeFormat('pt-BR', { weekday: 'long' }).format(date);\n  return new Intl.DateTimeFormat('pt-BR', { day: 'numeric', month: 'short', year: 'numeric' }).format(date);\n}\n\n/** Horário curto para listas: \"14:32\" hoje, \"Ontem\", ou \"12/09\". */\nexport function shortTimeLabel(value: Date | string | number, now = new Date()) {\n  const date = toDate(value);\n  const diff = Math.round((startOfDay(now) - startOfDay(date)) / DAY);\n  if (diff === 0) return new Intl.DateTimeFormat('pt-BR', { hour: '2-digit', minute: '2-digit' }).format(date);\n  if (diff === 1) return 'Ontem';\n  return new Intl.DateTimeFormat('pt-BR', { day: '2-digit', month: '2-digit' }).format(date);\n}\n\nexport type GroupPosition = 'single' | 'first' | 'middle' | 'last';\n\nexport type ThreadItem =\n  | { type: 'separator'; key: string; label: string }\n  | { type: 'message'; key: string; message: ChatMessageData; position: GroupPosition };\n\n/**\n * Agrupa mensagens consecutivas do mesmo autor (janela de `groupWindowMs`)\n * e insere separadores de data.\n */\nexport function buildThread(messages: ChatMessageData[], groupWindowMs = 5 * 60 * 1000, now = new Date()): ThreadItem[] {\n  const items: ThreadItem[] = [];\n  let lastDay: number | null = null;\n\n  messages.forEach((message, index) => {\n    const date = toDate(message.createdAt);\n    const day = startOfDay(date);\n    if (day !== lastDay) {\n      items.push({ type: 'separator', key: `sep-${day}`, label: dayLabel(date, now) });\n      lastDay = day;\n    }\n\n    const prev = messages[index - 1];\n    const next = messages[index + 1];\n    const joinsPrev =\n      !!prev && !prev.system && !message.system && prev.authorId === message.authorId &&\n      startOfDay(toDate(prev.createdAt)) === day &&\n      date.getTime() - toDate(prev.createdAt).getTime() <= groupWindowMs;\n    const joinsNext =\n      !!next && !next.system && !message.system && next.authorId === message.authorId &&\n      startOfDay(toDate(next.createdAt)) === day &&\n      toDate(next.createdAt).getTime() - date.getTime() <= groupWindowMs;\n\n    const position: GroupPosition = joinsPrev && joinsNext ? 'middle' : joinsPrev ? 'last' : joinsNext ? 'first' : 'single';\n    items.push({ type: 'message', key: message.id, message, position });\n  });\n\n  return items;\n}\n\n/** Remove símbolos/separadores para as iniciais do Avatar: \"Bruno · Instalação\" → \"Bruno Instalação\" (BI). */\nexport function initialsName(name: string) {\n  return name.replace(/[^\\p{L}\\s]/gu, ' ').replace(/\\s+/g, ' ').trim() || name;\n}\n\nexport function formatBytes(bytes: number) {\n  if (bytes < 1024) return `${bytes} B`;\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toLocaleString('pt-BR', { maximumFractionDigits: 1 })} KB`;\n  return `${(bytes / 1024 / 1024).toLocaleString('pt-BR', { maximumFractionDigits: 1 })} MB`;\n}\n","/* ── ChatMessage ── */\n.message {\n  display: flex;\n  gap: var(--sp-8);\n  align-items: flex-end;\n  max-width: 100%;\n}\n.message[data-own] {\n  flex-direction: row-reverse;\n}\n.avatarSlot {\n  width: 32px;\n  flex-shrink: 0;\n}\n.bubbleColumn {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  max-width: min(75%, 560px);\n  min-width: 0;\n}\n.message[data-own] .bubbleColumn {\n  align-items: flex-end;\n}\n.author {\n  font-size: var(--type-disclaimer);\n  font-weight: 600;\n  color: var(--ds-text-3);\n  margin: 0 var(--sp-12) var(--sp-4);\n}\n.bubble {\n  --bubble-radius: 16px;\n  --bubble-tail: 4px;\n  position: relative;\n  padding: var(--sp-8) var(--sp-12);\n  border-radius: var(--bubble-radius);\n  background: var(--ds-surface);\n  color: var(--ds-text);\n  border: 1px solid var(--ds-border-soft);\n  font-size: var(--type-subheadline-sm);\n  line-height: 1.45;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  box-shadow: var(--ds-shadow-sm);\n}\n.message[data-own] .bubble {\n  /* azul fixo (#2663EB): branco 5,2:1 nos dois temas */\n  background: var(--dc-horizon);\n  color: #fff;\n  border-color: transparent;\n}\n/* cantos agrupados (estilo mensageiro) */\n.message:not([data-own])[data-position='first'] .bubble { border-bottom-left-radius: var(--bubble-tail); }\n.message:not([data-own])[data-position='middle'] .bubble { border-top-left-radius: var(--bubble-tail); border-bottom-left-radius: var(--bubble-tail); }\n.message:not([data-own])[data-position='last'] .bubble { border-top-left-radius: var(--bubble-tail); }\n.message[data-own][data-position='first'] .bubble { border-bottom-right-radius: var(--bubble-tail); }\n.message[data-own][data-position='middle'] .bubble { border-top-right-radius: var(--bubble-tail); border-bottom-right-radius: var(--bubble-tail); }\n.message[data-own][data-position='last'] .bubble { border-top-right-radius: var(--bubble-tail); }\n.message[data-status='error'] .bubble {\n  background: var(--ds-error-bg);\n  color: var(--ds-error);\n  border-color: var(--ds-error);\n}\n.meta {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  color: var(--ds-text-3);\n  margin: 2px var(--sp-8) 0;\n  font-variant-numeric: tabular-nums;\n}\n.meta[data-read] .status {\n  color: var(--ds-primary);\n}\n.attachments {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--sp-4);\n  margin-bottom: var(--sp-4);\n}\n.message[data-own] .attachments {\n  justify-content: flex-end;\n}\n.imageAttachment {\n  display: block;\n  max-width: 240px;\n  max-height: 180px;\n  border-radius: 12px;\n  object-fit: cover;\n  border: 1px solid var(--ds-border-soft);\n}\n.fileAttachment {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--sp-8);\n  padding: var(--sp-8) var(--sp-12);\n  border-radius: 12px;\n  background: var(--ds-surface-2);\n  border: 1px solid var(--ds-border-soft);\n  color: var(--ds-text);\n  text-decoration: none;\n  font-size: var(--type-disclaimer);\n  max-width: 260px;\n}\n.fileName {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.fileSize {\n  flex-shrink: 0;\n  white-space: nowrap;\n  color: var(--ds-text-3);\n}\n.fileAttachment:hover {\n  border-color: var(--ds-primary);\n}\n.system {\n  align-self: center;\n  font-size: var(--type-disclaimer);\n  color: var(--ds-text-3);\n  background: var(--ds-surface-2);\n  padding: 4px var(--sp-12);\n  border-radius: 99px;\n  text-align: center;\n}\n\n/* ── ChatThread ── */\n.thread {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: var(--sp-16);\n}\n.thread > [data-group-start] {\n  margin-top: var(--sp-12);\n}\n.separator {\n  display: flex;\n  align-items: center;\n  gap: var(--sp-12);\n  margin: var(--sp-16) 0 var(--sp-8);\n  font-size: var(--type-disclaimer);\n  font-weight: 600;\n  color: var(--ds-text-3);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n.separator::before,\n.separator::after {\n  content: '';\n  flex: 1;\n  height: 1px;\n  background: var(--ds-border-soft);\n}\n\n/* ── TypingIndicator ── */\n.typing {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--sp-8);\n  font-size: var(--type-disclaimer);\n  color: var(--ds-text-3);\n}\n.dots {\n  display: inline-flex;\n  gap: 3px;\n  padding: 10px 12px;\n  border-radius: 16px;\n  background: var(--ds-surface);\n  border: 1px solid var(--ds-border-soft);\n}\n.dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--ds-text-3);\n  animation: jc-typing 1.2s infinite ease-in-out;\n}\n.dot:nth-child(2) { animation-delay: 0.15s; }\n.dot:nth-child(3) { animation-delay: 0.3s; }\n@keyframes jc-typing {\n  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }\n  30% { transform: translateY(-4px); opacity: 1; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .dot { animation: none; opacity: 0.7; }\n}\n\n/* ── ChatComposer ── */\n.composer {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--sp-8);\n  padding: var(--sp-12);\n  border-top: 1px solid var(--ds-border-soft);\n  background: var(--ds-surface);\n}\n.composerInput {\n  flex: 1;\n}\n.composerFiles {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--sp-4);\n  padding: var(--sp-8) var(--sp-12) 0;\n  background: var(--ds-surface);\n  border-top: 1px solid var(--ds-border-soft);\n}\n\n/* ── ConversationList ── */\n.conversations {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  height: 100%;\n}\n.conversationSearch {\n  padding: var(--sp-12);\n  border-bottom: 1px solid var(--ds-border-soft);\n}\n.conversation {\n  all: unset;\n  box-sizing: border-box;\n  display: flex;\n  gap: var(--sp-12);\n  align-items: center;\n  width: 100%;\n  padding: var(--sp-12) var(--sp-16);\n  cursor: pointer;\n  border-bottom: 1px solid var(--ds-border-soft);\n  transition: background 0.15s;\n}\n.conversation:hover {\n  background: var(--ds-surface-2);\n}\n.conversation[data-active] {\n  background: var(--ds-primary-soft);\n  box-shadow: inset 3px 0 0 var(--ds-primary);\n}\n.conversation:focus-visible {\n  outline: 2px solid var(--ds-primary);\n  outline-offset: -2px;\n}\n.conversationBody {\n  flex: 1;\n  min-width: 0;\n}\n.conversationTop {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--sp-8);\n  align-items: baseline;\n}\n.conversationName {\n  font-weight: 600;\n  font-size: var(--type-subheadline-sm);\n  color: var(--ds-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.conversation[data-unread] .conversationName {\n  font-weight: 700;\n}\n.conversationTime {\n  font-size: 11px;\n  color: var(--ds-text-3);\n  flex-shrink: 0;\n}\n.conversationBottom {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--sp-8);\n  align-items: center;\n  margin-top: 2px;\n}\n.conversationPreview {\n  font-size: var(--type-disclaimer);\n  color: var(--ds-text-3);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.conversation[data-unread] .conversationPreview {\n  color: var(--ds-text-2);\n  font-weight: 500;\n}\n\n/* ── ChatHeader / ChatLayout ── */\n.header {\n  display: flex;\n  align-items: center;\n  gap: var(--sp-12);\n  padding: var(--sp-12) var(--sp-16);\n  border-bottom: 1px solid var(--ds-border-soft);\n  background: var(--ds-surface);\n  min-height: 64px;\n  box-sizing: border-box;\n}\n.headerBody {\n  flex: 1;\n  min-width: 0;\n}\n.headerTitle {\n  font-weight: 600;\n  color: var(--ds-text);\n}\n.headerSubtitle {\n  font-size: var(--type-disclaimer);\n  color: var(--ds-text-3);\n}\n.layoutContainer {\n  container-type: inline-size;\n  container-name: jc-chat;\n}\n.layout {\n  display: grid;\n  grid-template-columns: var(--chat-sidebar-width, 320px) 1fr;\n  height: var(--chat-height, 600px);\n  background: var(--ds-bg);\n  border: 1px solid var(--ds-border-soft);\n  border-radius: var(--ds-radius);\n  overflow: hidden;\n}\n.layout[data-single] {\n  grid-template-columns: 1fr;\n}\n.layoutSidebar {\n  background: var(--ds-surface);\n  border-right: 1px solid var(--ds-border-soft);\n  min-height: 0;\n  overflow: hidden;\n}\n.layoutMain {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  min-width: 0;\n}\n.layoutMessages {\n  flex: 1;\n  min-height: 0;\n}\n/* Abaixo de 640px de largura útil: uma coluna (lista OU conversa) */\n@container jc-chat (max-width: 640px) {\n  .layout {\n    grid-template-columns: 1fr;\n  }\n  .layout[data-mobile-view='thread'] .layoutSidebar,\n  .layout[data-mobile-view='list'] .layoutMain {\n    display: none;\n  }\n}\n@container jc-chat (min-width: 640.02px) {\n  .backButton {\n    display: none;\n  }\n}\n/* fora de um ChatLayout o botão voltar segue a tela */\n@media (min-width: 48em) {\n  :not(.layoutContainer *) > .backButton {\n    display: none;\n  }\n}\n","import { Avatar, Box, Loader, Tooltip, type BoxProps } from '@mantine/core';\nimport { IconAlertCircle, IconCheck, IconChecks, IconFile } from '@tabler/icons-react';\nimport { formatBytes, initialsName, toDate, type GroupPosition } from './utils';\nimport type { ChatAttachment, ChatMessageStatus, ChatUser } from './types';\nimport classes from './Chat.module.css';\n\nexport interface ChatMessageProps extends BoxProps, Omit<React.ComponentProps<'div'>, keyof BoxProps> {\n  /** Mensagem do usuário atual (alinhada à direita, bolha azul) */\n  own?: boolean;\n  author?: ChatUser;\n  /** Exibe o nome do autor acima da bolha (útil em grupos) */\n  showAuthor?: boolean;\n  /** Exibe avatar ao lado da bolha (só na última mensagem do grupo) @default true */\n  showAvatar?: boolean;\n  createdAt?: Date | string | number;\n  status?: ChatMessageStatus;\n  attachments?: ChatAttachment[];\n  /** Posição dentro de um grupo de mensagens consecutivas @default 'single' */\n  position?: GroupPosition;\n  /** Mensagem de sistema (centralizada) */\n  system?: boolean;\n  children?: React.ReactNode;\n}\n\nconst statusLabel: Record<ChatMessageStatus, string> = {\n  sending: 'Enviando…',\n  sent: 'Enviada',\n  delivered: 'Entregue',\n  read: 'Lida',\n  error: 'Falha no envio',\n};\n\nfunction StatusIcon({ status }: { status: ChatMessageStatus }) {\n  if (status === 'sending') return <Loader size={10} color=\"gray\" />;\n  if (status === 'sent') return <IconCheck size={14} />;\n  if (status === 'error') return <IconAlertCircle size={14} color=\"var(--ds-error)\" />;\n  return <IconChecks size={14} />;\n}\n\n/** Bolha de mensagem de chat. */\nexport function ChatMessage({\n  own,\n  author,\n  showAuthor,\n  showAvatar = true,\n  createdAt,\n  status,\n  attachments,\n  position = 'single',\n  system,\n  children,\n  ...others\n}: ChatMessageProps) {\n  if (system) {\n    return (\n      <Box className={classes.system} role=\"status\" {...others}>\n        {children}\n      </Box>\n    );\n  }\n\n  const isLast = position === 'single' || position === 'last';\n  const isFirst = position === 'single' || position === 'first';\n  const time = createdAt\n    ? new Intl.DateTimeFormat('pt-BR', { hour: '2-digit', minute: '2-digit' }).format(toDate(createdAt))\n    : null;\n\n  return (\n    <Box className={classes.message} mod={{ own, position, status }} {...others}>\n      {!own && (\n        <div className={classes.avatarSlot}>\n          {showAvatar && isLast && author && (\n            <Avatar src={author.avatar} name={initialsName(author.name)} color={author.color ?? 'initials'} size={32} alt={author.name} />\n          )}\n        </div>\n      )}\n      <div className={classes.bubbleColumn}>\n        {showAuthor && isFirst && author && !own && <div className={classes.author}>{author.name}</div>}\n        {attachments && attachments.length > 0 && (\n          <div className={classes.attachments}>\n            {attachments.map((file, index) =>\n              file.type === 'image' && file.url ? (\n                <a key={index} href={file.url} target=\"_blank\" rel=\"noreferrer\">\n                  <img className={classes.imageAttachment} src={file.url} alt={file.name} />\n                </a>\n              ) : (\n                <a key={index} className={classes.fileAttachment} href={file.url} target=\"_blank\" rel=\"noreferrer\" download={file.name}>\n                  <IconFile size={18} />\n                  <span className={classes.fileName}>{file.name}</span>\n                  {file.size !== undefined && <span className={classes.fileSize}>{formatBytes(file.size)}</span>}\n                </a>\n              ),\n            )}\n          </div>\n        )}\n        {children !== undefined && children !== null && children !== '' && <div className={classes.bubble}>{children}</div>}\n        {isLast && (time || (own && status)) && (\n          <div className={classes.meta} data-read={status === 'read' || undefined}>\n            {time && createdAt && <time dateTime={toDate(createdAt).toISOString()}>{time}</time>}\n            {own && status && (\n              <Tooltip label={statusLabel[status]} withArrow>\n                <span className={classes.status} aria-label={statusLabel[status]} style={{ display: 'inline-flex' }}>\n                  <StatusIcon status={status} />\n                </span>\n              </Tooltip>\n            )}\n          </div>\n        )}\n      </div>\n    </Box>\n  );\n}\nChatMessage.displayName = '@jcdecor/ui/ChatMessage';\n","import { Box, type BoxProps } from '@mantine/core';\nimport classes from './Chat.module.css';\n\nexport interface TypingIndicatorProps extends BoxProps {\n  /** Nomes de quem está digitando. Vazio = só os pontinhos. */\n  names?: string[];\n}\n\nfunction typingLabel(names: string[]) {\n  if (names.length === 0) return '';\n  if (names.length === 1) return `${names[0]} está digitando…`;\n  if (names.length === 2) return `${names[0]} e ${names[1]} estão digitando…`;\n  return `${names[0]} e mais ${names.length - 1} estão digitando…`;\n}\n\n/** Indicador animado de \"digitando…\". */\nexport function TypingIndicator({ names = [], ...others }: TypingIndicatorProps) {\n  const label = typingLabel(names);\n  return (\n    <Box className={classes.typing} role=\"status\" aria-live=\"polite\" aria-label={label || 'Digitando'} {...others}>\n      <span className={classes.dots} aria-hidden>\n        <span className={classes.dot} />\n        <span className={classes.dot} />\n        <span className={classes.dot} />\n      </span>\n      {label && <span>{label}</span>}\n    </Box>\n  );\n}\nTypingIndicator.displayName = '@jcdecor/ui/TypingIndicator';\n","import { useEffect, useMemo, useRef } from 'react';\nimport { Box, ScrollArea, type ScrollAreaProps } from '@mantine/core';\nimport { ChatMessage } from './ChatMessage';\nimport { TypingIndicator } from './TypingIndicator';\nimport { buildThread } from './utils';\nimport type { ChatMessageData, ChatUser } from './types';\nimport classes from './Chat.module.css';\n\nexport interface ChatThreadProps extends Omit<ScrollAreaProps, 'children'> {\n  messages: ChatMessageData[];\n  /** Id do usuário atual — suas mensagens ficam à direita */\n  currentUserId: string;\n  users?: ChatUser[] | Record<string, ChatUser>;\n  /** Nomes de quem está digitando agora */\n  typing?: string[];\n  /** Mostra nome do autor no início de cada grupo (conversas em grupo) */\n  showAuthors?: boolean;\n  /** Rola para a última mensagem quando chegam novas (se o usuário estiver perto do fim) @default true */\n  autoScroll?: boolean;\n  /** Janela (ms) para agrupar mensagens consecutivas do mesmo autor @default 300000 */\n  groupWindow?: number;\n  /** Conteúdo exibido quando não há mensagens */\n  empty?: React.ReactNode;\n  /** Renderização customizada do conteúdo da bolha */\n  renderContent?: (message: ChatMessageData) => React.ReactNode;\n}\n\n/** Lista rolável de mensagens com separadores de data, agrupamento e auto-scroll. */\nexport function ChatThread({\n  messages,\n  currentUserId,\n  users = [],\n  typing,\n  showAuthors,\n  autoScroll = true,\n  groupWindow,\n  empty,\n  renderContent,\n  h = '100%',\n  ...others\n}: ChatThreadProps) {\n  const viewport = useRef<HTMLDivElement>(null);\n  const content = useRef<HTMLDivElement>(null);\n  const nearBottom = useRef(true);\n  const mounted = useRef(false);\n\n  const userMap = useMemo<Record<string, ChatUser>>(\n    () => (Array.isArray(users) ? Object.fromEntries(users.map((u) => [u.id, u])) : users),\n    [users],\n  );\n  const items = useMemo(() => buildThread(messages, groupWindow), [messages, groupWindow]);\n\n  const lastMessage = messages[messages.length - 1];\n  useEffect(() => {\n    const el = viewport.current;\n    if (!el || !autoScroll) return;\n    if (nearBottom.current || lastMessage?.authorId === currentUserId) {\n      // Primeira renderização: pula direto para o fim; depois, rolagem suave.\n      el.scrollTo({ top: el.scrollHeight, behavior: mounted.current ? 'smooth' : 'auto' });\n    }\n    mounted.current = true;\n  }, [messages.length, lastMessage?.id, typing?.length, autoScroll, currentUserId]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Conteúdo que cresce depois (imagens, fontes) mantém o fim visível se o usuário já estava lá.\n  useEffect(() => {\n    const el = viewport.current;\n    const inner = content.current;\n    if (!el || !inner || !autoScroll || typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(() => {\n      if (nearBottom.current) el.scrollTo({ top: el.scrollHeight });\n    });\n    observer.observe(inner);\n    return () => observer.disconnect();\n  }, [autoScroll]);\n\n  return (\n    <ScrollArea\n      h={h}\n      viewportRef={viewport}\n      onScrollPositionChange={({ y }) => {\n        const el = viewport.current;\n        if (el) nearBottom.current = el.scrollHeight - el.clientHeight - y < 80;\n      }}\n      {...others}\n    >\n      <Box ref={content} className={classes.thread} role=\"log\" aria-live=\"polite\" aria-relevant=\"additions\">\n        {messages.length === 0 && empty}\n        {items.map((item) => {\n          if (item.type === 'separator') {\n            return (\n              <div key={item.key} className={classes.separator} role=\"separator\">\n                {item.label}\n              </div>\n            );\n          }\n          const { message, position } = item;\n          const own = message.authorId === currentUserId;\n          return (\n            <ChatMessage\n              key={item.key}\n              own={own}\n              system={message.system}\n              author={userMap[message.authorId]}\n              showAuthor={showAuthors}\n              createdAt={message.createdAt}\n              status={own ? message.status : undefined}\n              attachments={message.attachments}\n              position={position}\n              data-group-start={position === 'single' || position === 'first' ? true : undefined}\n            >\n              {renderContent ? renderContent(message) : message.text}\n            </ChatMessage>\n          );\n        })}\n        {typing && typing.length > 0 && <TypingIndicator names={typing} mt=\"sm\" ml={40} />}\n      </Box>\n    </ScrollArea>\n  );\n}\nChatThread.displayName = '@jcdecor/ui/ChatThread';\n","import { useState } from 'react';\nimport { ActionIcon, Box, FileButton, Pill, Textarea, Tooltip, type BoxProps } from '@mantine/core';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { IconPaperclip, IconSend2 } from '@tabler/icons-react';\nimport classes from './Chat.module.css';\n\nexport interface ChatComposerSendPayload {\n  text: string;\n  files: File[];\n}\n\nexport interface ChatComposerProps extends Omit<BoxProps, 'onSubmit'> {\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /** Chamado ao enviar (Enter ou botão). O campo é limpo em seguida. */\n  onSend: (payload: ChatComposerSendPayload) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Habilita anexos; `accept` segue o atributo HTML (ex.: \"image/*,.pdf\") */\n  allowAttachments?: boolean;\n  accept?: string;\n  /** Máximo de linhas antes de rolar @default 5 */\n  maxRows?: number;\n  /** Elementos extras à esquerda (ex.: emoji picker, respostas rápidas) */\n  leftSection?: React.ReactNode;\n  sendLabel?: string;\n}\n\n/** Campo de mensagem: Enter envia, Shift+Enter quebra linha, anexos opcionais. */\nexport function ChatComposer({\n  value,\n  defaultValue,\n  onChange,\n  onSend,\n  placeholder = 'Digite uma mensagem…',\n  disabled,\n  allowAttachments,\n  accept,\n  maxRows = 5,\n  leftSection,\n  sendLabel = 'Enviar',\n  ...others\n}: ChatComposerProps) {\n  const [text, setText] = useUncontrolled({ value, defaultValue, finalValue: '', onChange });\n  const [files, setFiles] = useState<File[]>([]);\n  const canSend = !disabled && (text.trim().length > 0 || files.length > 0);\n\n  const send = () => {\n    if (!canSend) return;\n    onSend({ text: text.trim(), files });\n    setText('');\n    setFiles([]);\n  };\n\n  return (\n    <Box {...others}>\n      {files.length > 0 && (\n        <div className={classes.composerFiles}>\n          {files.map((file, index) => (\n            <Pill key={`${file.name}-${index}`} withRemoveButton onRemove={() => setFiles((f) => f.filter((_, i) => i !== index))}>\n              {file.name}\n            </Pill>\n          ))}\n        </div>\n      )}\n      <div className={classes.composer}>\n        {leftSection}\n        {allowAttachments && (\n          <FileButton multiple accept={accept} onChange={(selected) => setFiles((f) => [...f, ...(selected ?? [])])} disabled={disabled}>\n            {(props) => (\n              <Tooltip label=\"Anexar arquivo\">\n                <ActionIcon {...props} size=\"lg\" variant=\"subtle\" aria-label=\"Anexar arquivo\">\n                  <IconPaperclip size={20} />\n                </ActionIcon>\n              </Tooltip>\n            )}\n          </FileButton>\n        )}\n        <Textarea\n          className={classes.composerInput}\n          value={text}\n          onChange={(event) => setText(event.currentTarget.value)}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {\n              event.preventDefault();\n              send();\n            }\n          }}\n          placeholder={placeholder}\n          disabled={disabled}\n          autosize\n          minRows={1}\n          maxRows={maxRows}\n          radius=\"lg\"\n          aria-label={placeholder}\n        />\n        <ActionIcon size={44} radius=\"xl\" variant=\"filled\" onClick={send} disabled={!canSend} aria-label={sendLabel}>\n          <IconSend2 size={20} />\n        </ActionIcon>\n      </div>\n    </Box>\n  );\n}\nChatComposer.displayName = '@jcdecor/ui/ChatComposer';\n","import { useMemo, useState } from 'react';\nimport { Avatar, Badge, Box, Indicator, ScrollArea, TextInput, type BoxProps } from '@mantine/core';\nimport { IconSearch } from '@tabler/icons-react';\nimport { initialsName, shortTimeLabel } from './utils';\nimport type { Conversation } from './types';\nimport classes from './Chat.module.css';\n\nexport interface ConversationListProps extends Omit<BoxProps, 'onSelect'> {\n  conversations: Conversation[];\n  activeId?: string | null;\n  onSelect?: (conversation: Conversation) => void;\n  /** Exibe campo de busca @default true */\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  empty?: React.ReactNode;\n}\n\n/** Lista de conversas com busca, não lidas, presença e última mensagem. */\nexport function ConversationList({\n  conversations,\n  activeId,\n  onSelect,\n  searchable = true,\n  searchPlaceholder = 'Buscar conversas',\n  empty,\n  ...others\n}: ConversationListProps) {\n  const [query, setQuery] = useState('');\n  const filtered = useMemo(() => {\n    const q = query.trim().toLocaleLowerCase('pt-BR');\n    if (!q) return conversations;\n    return conversations.filter(\n      (c) => c.name.toLocaleLowerCase('pt-BR').includes(q) || c.lastMessage?.toLocaleLowerCase('pt-BR').includes(q),\n    );\n  }, [conversations, query]);\n\n  return (\n    <Box className={classes.conversations} {...others}>\n      {searchable && (\n        <div className={classes.conversationSearch}>\n          <TextInput\n            size=\"sm\"\n            placeholder={searchPlaceholder}\n            leftSection={<IconSearch size={16} />}\n            value={query}\n            onChange={(e) => setQuery(e.currentTarget.value)}\n            aria-label={searchPlaceholder}\n          />\n        </div>\n      )}\n      <ScrollArea style={{ flex: 1 }} type=\"auto\">\n        <div role=\"list\">\n          {filtered.length === 0 && (\n            <Box p=\"lg\" ta=\"center\" c=\"var(--ds-text-3)\" fz=\"sm\">\n              {empty ?? 'Nenhuma conversa encontrada'}\n            </Box>\n          )}\n          {filtered.map((c) => (\n            <button\n              key={c.id}\n              type=\"button\"\n              role=\"listitem\"\n              className={classes.conversation}\n              data-active={c.id === activeId || undefined}\n              data-unread={(c.unread ?? 0) > 0 || undefined}\n              aria-current={c.id === activeId ? 'true' : undefined}\n              onClick={() => onSelect?.(c)}\n            >\n              <Indicator color=\"evergreen\" position=\"bottom-end\" offset={5} size={10} withBorder disabled={!c.online}>\n                <Avatar src={c.avatar} name={initialsName(c.name)} color={c.color ?? 'initials'} size={40} />\n              </Indicator>\n              <div className={classes.conversationBody}>\n                <div className={classes.conversationTop}>\n                  <span className={classes.conversationName}>{c.name}</span>\n                  {c.lastMessageAt !== undefined && <span className={classes.conversationTime}>{shortTimeLabel(c.lastMessageAt)}</span>}\n                </div>\n                <div className={classes.conversationBottom}>\n                  <span className={classes.conversationPreview}>{c.lastMessage}</span>\n                  {(c.unread ?? 0) > 0 && (\n                    <Badge size=\"sm\" variant=\"filled\" circle={(c.unread ?? 0) < 10} aria-label={`${c.unread} não lidas`}>\n                      {c.unread! > 99 ? '99+' : c.unread}\n                    </Badge>\n                  )}\n                </div>\n                {c.tag && (\n                  <Badge size=\"xs\" color=\"obsidian\" mt={6}>\n                    {c.tag}\n                  </Badge>\n                )}\n              </div>\n            </button>\n          ))}\n        </div>\n      </ScrollArea>\n    </Box>\n  );\n}\nConversationList.displayName = '@jcdecor/ui/ConversationList';\n","import { ActionIcon, Avatar, Box, Indicator, type BoxProps } from '@mantine/core';\nimport { IconArrowLeft } from '@tabler/icons-react';\nimport { initialsName } from './utils';\nimport classes from './Chat.module.css';\n\nexport interface ChatHeaderProps extends BoxProps {\n  title: React.ReactNode;\n  subtitle?: React.ReactNode;\n  avatar?: string;\n  /** Nome para iniciais do avatar */\n  avatarName?: string;\n  online?: boolean;\n  actions?: React.ReactNode;\n  /** Exibe botão voltar (mobile) */\n  onBack?: () => void;\n}\n\n/** Cabeçalho da conversa: avatar, nome, status e ações. */\nexport function ChatHeader({ title, subtitle, avatar, avatarName, online, actions, onBack, ...others }: ChatHeaderProps) {\n  return (\n    <Box className={classes.header} {...others}>\n      {onBack && (\n        <ActionIcon className={classes.backButton} variant=\"subtle\" onClick={onBack} aria-label=\"Voltar\">\n          <IconArrowLeft size={20} />\n        </ActionIcon>\n      )}\n      {(avatar || avatarName) && (\n        <Indicator color=\"evergreen\" position=\"bottom-end\" offset={5} size={10} withBorder disabled={!online}>\n          <Avatar src={avatar} name={avatarName ? initialsName(avatarName) : undefined} color=\"initials\" size={40} />\n        </Indicator>\n      )}\n      <div className={classes.headerBody}>\n        <div className={classes.headerTitle}>{title}</div>\n        {subtitle && <div className={classes.headerSubtitle}>{subtitle}</div>}\n      </div>\n      {actions}\n    </Box>\n  );\n}\nChatHeader.displayName = '@jcdecor/ui/ChatHeader';\n\nexport interface ChatLayoutProps extends BoxProps {\n  /** Lista de conversas (coluna esquerda) — omita para um chat único */\n  sidebar?: React.ReactNode;\n  header?: React.ReactNode;\n  /** Normalmente um <ChatThread /> */\n  children: React.ReactNode;\n  /** Normalmente um <ChatComposer /> */\n  composer?: React.ReactNode;\n  /** Altura total @default 600 */\n  height?: number | string;\n  sidebarWidth?: number | string;\n  /** Em telas pequenas mostra só a lista ou só a conversa @default 'thread' */\n  mobileView?: 'list' | 'thread';\n}\n\n/** Layout de chat: conversas + cabeçalho + mensagens + composer (responsivo). */\nexport function ChatLayout({\n  sidebar,\n  header,\n  children,\n  composer,\n  height = 600,\n  sidebarWidth = 320,\n  mobileView = 'thread',\n  style,\n  ...others\n}: ChatLayoutProps) {\n  const toCss = (v: number | string) => (typeof v === 'number' ? `${v}px` : v);\n  // O wrapper é o contêiner das container queries: o layout se adapta ao espaço disponível, não à tela.\n  return (\n    <Box\n      className={classes.layoutContainer}\n      style={[\n        {\n          ['--chat-height' as string]: toCss(height),\n          ['--chat-sidebar-width' as string]: toCss(sidebarWidth),\n        },\n        style,\n      ]}\n      {...others}\n    >\n      <div\n        className={classes.layout}\n        data-mobile-view={sidebar ? mobileView : undefined}\n        data-single={sidebar ? undefined : true}\n      >\n        {sidebar && <aside className={classes.layoutSidebar}>{sidebar}</aside>}\n        <section className={classes.layoutMain}>\n          {header}\n          <div className={classes.layoutMessages}>{children}</div>\n          {composer}\n        </section>\n      </div>\n    </Box>\n  );\n}\nChatLayout.displayName = '@jcdecor/ui/ChatLayout';\n"],"mappings":";;;;;;;AAEA,IAAMM,IAAM;AAEZ,SAAgBC,EAAO,GAA+B;CACpD,OAAOC,aAAiB,OAAOA,IAAQ,IAAI,KAAKA,CAAK;AACvD;AAEA,SAASC,EAAW,GAAY;CAC9B,OAAO,IAAI,KAAKC,EAAK,YAAY,GAAGA,EAAK,SAAS,GAAGA,EAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ;AAC/E;AAGA,SAAgBC,EAAS,GAA+B,oBAAM,IAAI,KAAK,GAAG;CACxE,IAAMD,IAAOH,EAAOC,CAAK,GACnBI,IAAO,KAAK,OAAOH,EAAWI,CAAG,IAAIJ,EAAWC,CAAI,KAAKJ,CAAG;CAIlE,OAHIM,MAAS,IAAU,SACnBA,MAAS,IAAU,UACnBA,IAAO,KAAKA,IAAO,IAAU,IAAI,KAAK,eAAe,SAAS,EAAE,SAAS,OAAO,CAAC,CAAC,CAAC,OAAOF,CAAI,IAC3F,IAAI,KAAK,eAAe,SAAS;EAAE,KAAK;EAAW,OAAO;EAAS,MAAM;CAAU,CAAC,CAAC,CAAC,OAAOA,CAAI;AAC1G;AAGA,SAAgBI,EAAe,GAA+B,oBAAM,IAAI,KAAK,GAAG;CAC9E,IAAMJ,IAAOH,EAAOC,CAAK,GACnBI,IAAO,KAAK,OAAOH,EAAWI,CAAG,IAAIJ,EAAWC,CAAI,KAAKJ,CAAG;CAGlE,OAFIM,MAAS,IAAU,IAAI,KAAK,eAAe,SAAS;EAAE,MAAM;EAAW,QAAQ;CAAU,CAAC,CAAC,CAAC,OAAOF,CAAI,IACvGE,MAAS,IAAU,UAChB,IAAI,KAAK,eAAe,SAAS;EAAE,KAAK;EAAW,OAAO;CAAU,CAAC,CAAC,CAAC,OAAOF,CAAI;AAC3F;AAYA,SAAgBK,EAAY,GAA6B,IAAgB,KAAe,oBAAM,IAAI,KAAK,GAAiB;CACtH,IAAMC,IAAsB,CAAC,GACzBC,IAAyB;CAyB7B,OAvBAC,EAAS,SAAS,GAAS,MAAU;EACnC,IAAMR,IAAOH,EAAOY,EAAQ,SAAS,GAC/BC,IAAMX,EAAWC,CAAI;EAC3B,AAAIU,MAAQH,MACVD,EAAM,KAAK;GAAE,MAAM;GAAa,KAAK,OAAOI;GAAO,OAAOT,EAASD,GAAMG,CAAG;EAAE,CAAC,GAC/E,IAAUO;EAGZ,IAAMC,IAAOH,EAASI,IAAQ,IACxBC,IAAOL,EAASI,IAAQ,IACxBE,IACJ,CAAC,CAACH,KAAQ,CAACA,EAAK,UAAU,CAACF,EAAQ,UAAUE,EAAK,aAAaF,EAAQ,YACvEV,EAAWF,EAAOc,EAAK,SAAS,CAAC,MAAMD,KACvCV,EAAK,QAAQ,IAAIH,EAAOc,EAAK,SAAS,CAAC,CAAC,QAAQ,KAAKI,GACjDC,IACJ,CAAC,CAACH,KAAQ,CAACA,EAAK,UAAU,CAACJ,EAAQ,UAAUI,EAAK,aAAaJ,EAAQ,YACvEV,EAAWF,EAAOgB,EAAK,SAAS,CAAC,MAAMH,KACvCb,EAAOgB,EAAK,SAAS,CAAC,CAAC,QAAQ,IAAIb,EAAK,QAAQ,KAAKe,GAEjDE,IAA0BH,KAAaE,IAAY,WAAWF,IAAY,SAASE,IAAY,UAAU;EAC/G,EAAM,KAAK;GAAE,MAAM;GAAW,KAAKP,EAAQ;GAAI;GAAS;EAAS,CAAC;CACpE,CAAC,GAEMH;AACT;AAGA,SAAgBY,EAAa,GAAc;CACzC,OAAOC,EAAK,QAAQ,gBAAgB,GAAG,CAAC,CAAC,QAAQ,QAAQ,GAAG,CAAC,CAAC,KAAK,KAAKA;AAC1E;AAEA,SAAgBC,EAAY,GAAe;CAGzC,OAFIC,IAAQ,OAAa,GAAGA,EAAM,MAC9BA,IAAQ,UAAoB,IAAIA,IAAQ,KAAA,CAAM,eAAe,SAAS,EAAE,uBAAuB,EAAE,CAAC,EAAE,OACjG,IAAIA,IAAQ,OAAO,KAAA,CAAM,eAAe,SAAS,EAAE,uBAAuB,EAAE,CAAC,EAAE;AACxF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GExDME,IAAiD;CACrD,SAAS;CACT,MAAM;CACN,WAAW;CACX,MAAM;CACN,OAAO;AACT;AAEA,SAASC,EAAW,EAAE,aAAyC;CAI7D,OAHIC,MAAW,YAAkB,kBAACC,GAAD;EAAQ,MAAM;EAAI,OAAM;CAAQ,CAAA,IAC7DD,MAAW,SAAe,kBAACE,GAAD,EAAW,MAAM,GAAK,CAAA,IAChDF,MAAW,UAAgB,kBAACG,GAAD;EAAiB,MAAM;EAAI,OAAM;CAAmB,CAAA,IAC5E,kBAACC,GAAD,EAAY,MAAM,GAAK,CAAA;AAChC;AAGA,SAAgBC,EAAY,EAC1B,QACA,WACA,eACA,gBAAa,IACb,cACA,WACA,gBACA,cAAW,UACX,WACA,aACA,GAAGC,KACgB;CACnB,IAAIC,GACF,OACE,kBAACC,GAAD;EAAK,WAAW3C,EAAQ;EAAQ,MAAK;EAAS,GAAIyC;EAC/C;CACE,CAAA;CAIT,IAAMG,IAASjB,MAAa,YAAYA,MAAa,QAC/CkB,IAAUlB,MAAa,YAAYA,MAAa,SAChDmB,IAAOC,IACT,IAAI,KAAK,eAAe,SAAS;EAAE,MAAM;EAAW,QAAQ;CAAU,CAAC,CAAC,CAAC,OAAOxC,EAAOwC,CAAS,CAAC,IACjG;CAEJ,OACE,kBAACJ,GAAD;EAAK,WAAW3C,EAAQ;EAAS,KAAK;GAAE;GAAK;GAAU;EAAO;EAAG,GAAIyC;EAArE,UAAA,CACG,CAACO,KACA,kBAAC,OAAD;GAAK,WAAWhD,EAAQ;GACrB,UAAAiD,KAAcL,KAAUM,KACvB,kBAACC,GAAD;IAAQ,KAAKD,EAAO;IAAQ,MAAMtB,EAAasB,EAAO,IAAI;IAAG,OAAOA,EAAO,SAAS;IAAY,MAAM;IAAI,KAAKA,EAAO;GAAO,CAAA;EAE5H,CAAA,GAEP,kBAAC,OAAD;GAAK,WAAWlD,EAAQ;GAAxB,UAAA;IACGoD,KAAcP,KAAWK,KAAU,CAACF,KAAO,kBAAC,OAAD;KAAK,WAAWhD,EAAQ;KAAS,UAAAkD,EAAO;IAAU,CAAA;IAC7FG,KAAeA,EAAY,SAAS,KACnC,kBAAC,OAAD;KAAK,WAAWrD,EAAQ;KACrB,UAAAqD,EAAY,KAAK,GAAM,MACtBC,EAAK,SAAS,WAAWA,EAAK,MAC5B,kBAAC,KAAD;MAAe,MAAMA,EAAK;MAAK,QAAO;MAAS,KAAI;MACjD,UAAA,kBAAC,OAAD;OAAK,WAAWtD,EAAQ;OAAiB,KAAKsD,EAAK;OAAK,KAAKA,EAAK;MAAO,CAAA;KACxE,GAFKhC,CAEL,IAEH,kBAAC,KAAD;MAAe,WAAWtB,EAAQ;MAAgB,MAAMsD,EAAK;MAAK,QAAO;MAAS,KAAI;MAAa,UAAUA,EAAK;MAAlH,UAAA;OACE,kBAACC,GAAD,EAAU,MAAM,GAAK,CAAA;OACrB,kBAAC,QAAD;QAAM,WAAWvD,EAAQ;QAAW,UAAAsD,EAAK;OAAW,CAAA;OACnDA,EAAK,SAAS,KAAA,KAAa,kBAAC,QAAD;QAAM,WAAWtD,EAAQ;QAAW,UAAA8B,EAAYwB,EAAK,IAAI;OAAQ,CAAA;MAC5F;KAJK,GAAAhC,CAIL,CAEP;IACG,CAAA;IAENkC,KAAuC,QAAQA,MAAa,MAAM,kBAAC,OAAD;KAAK,WAAWxD,EAAQ;KAAS;IAAc,CAAA;IACjH4C,MAAWE,KAASE,KAAOb,MAC1B,kBAAC,OAAD;KAAK,WAAWnC,EAAQ;KAAM,aAAWmC,MAAW,UAAU,KAAA;KAA9D,UAAA,CACGW,KAAQC,KAAa,kBAAC,QAAD;MAAM,UAAUxC,EAAOwC,CAAS,CAAC,CAAC,YAAY;MAAI,UAAAD;KAAW,CAAA,GAClFE,KAAOb,KACN,kBAACsB,GAAD;MAAS,OAAOxB,EAAYE;MAAS,WAAA;MACnC,UAAA,kBAAC,QAAD;OAAM,WAAWnC,EAAQ;OAAQ,cAAYiC,EAAYE;OAAS,OAAO,EAAE,SAAS,cAAc;OAChG,UAAA,kBAACD,GAAD,EAAoB,UAAS,CAAA;MACzB,CAAA;KACC,CAAA,CAER;;GAEJ;EACF,CAAA,CAAA;;AAET;AACA,EAAY,cAAc;;;ACxG1B,SAASwB,EAAY,GAAiB;CAIpC,OAHIC,EAAM,WAAW,IAAU,KAC3BA,EAAM,WAAW,IAAU,GAAGA,EAAM,GAAG,oBACvCA,EAAM,WAAW,IAAU,GAAGA,EAAM,GAAG,KAAKA,EAAM,GAAG,qBAClD,GAAGA,EAAM,GAAG,UAAUA,EAAM,SAAS,EAAE;AAChD;AAGA,SAAgBC,EAAgB,EAAE,WAAQ,CAAC,GAAG,GAAGnB,KAAgC;CAC/E,IAAMoB,IAAQH,EAAYC,CAAK;CAC/B,OACE,kBAAChB,GAAD;EAAK,WAAW1C,EAAQ;EAAQ,MAAK;EAAS,aAAU;EAAS,cAAY4D,KAAS;EAAa,GAAIpB;EAAvG,UAAA,CACE,kBAAC,QAAD;GAAM,WAAWxC,EAAQ;GAAM,eAAA;GAA/B,UAAA;IACE,kBAAC,QAAD,EAAM,WAAWA,EAAQ,IAAM,CAAA;IAC/B,kBAAC,QAAD,EAAM,WAAWA,EAAQ,IAAM,CAAA;IAC/B,kBAAC,QAAD,EAAM,WAAWA,EAAQ,IAAM,CAAA;GAC3B;EACL,CAAA,GAAA4D,KAAS,kBAAC,QAAD,EAAA,UAAOA,EAAY,CAAA,CAC1B;;AAET;AACA,EAAgB,cAAc;;;ACD9B,SAAgBC,EAAW,EACzB,aACA,kBACA,WAAQ,CAAC,GACT,WACA,gBACA,gBAAa,IACb,gBACA,UACA,kBACA,OAAI,QACJ,GAAGrB,KACe;CAClB,IAAMsB,IAAWC,EAAuB,IAAI,GACtCC,IAAUD,EAAuB,IAAI,GACrCE,IAAaF,EAAO,EAAI,GACxBG,IAAUH,EAAO,EAAK,GAEtBI,IAAUC,QACP,MAAM,QAAQC,CAAK,IAAI,OAAO,YAAYA,EAAM,KAAK,MAAM,CAACC,EAAE,IAAIA,CAAC,CAAC,CAAC,IAAID,GAChF,CAACA,CAAK,CACR,GACMtD,IAAQqD,QAActD,EAAYG,GAAUsD,CAAW,GAAG,CAACtD,GAAUsD,CAAW,CAAC,GAEjFC,IAAcvD,EAASA,EAAS,SAAS;CAuB/C,OAtBAwD,QAAgB;EACd,IAAMC,IAAKZ,EAAS;EACpB,AAAKY,KAAOC,OACRV,EAAW,WAAWO,GAAa,aAAaI,MAElDF,EAAG,SAAS;GAAE,KAAKA,EAAG;GAAc,UAAUR,EAAQ,UAAU,WAAW;EAAO,CAAC,GAErF,EAAQ,UAAU;CACpB,GAAG;EAACjD,EAAS;EAAQuD,GAAa;EAAIK,GAAQ;EAAQF;EAAYC;CAAa,CAAC,GAGhFH,QAAgB;EACd,IAAMC,IAAKZ,EAAS,SACdgB,IAAQd,EAAQ;EACtB,IAAI,CAACU,KAAM,CAACI,KAAS,CAACH,KAAc,OAAO,iBAAmB,KAAa;EAC3E,IAAMI,IAAW,IAAI,qBAAqB;GACxC,AAAId,EAAW,WAASS,EAAG,SAAS,EAAE,KAAKA,EAAG,aAAa,CAAC;EAC9D,CAAC;EAED,OADAK,EAAS,QAAQD,CAAK,SACTC,EAAS,WAAW;CACnC,GAAG,CAACJ,CAAU,CAAC,GAGb,kBAACK,GAAD;EACK;EACH,aAAalB;EACb,yBAAyB,EAAE,WAAQ;GACjC,IAAMY,IAAKZ,EAAS;GACpB,AAAIY,MAAI,EAAW,UAAUA,EAAG,eAAeA,EAAG,eAAeO,IAAI;EACvE;EACA,GAAIzC;EAEJ,UAAA,kBAACE,GAAD;GAAK,KAAKsB;GAAS,WAAW/D,EAAQ;GAAQ,MAAK;GAAM,aAAU;GAAS,iBAAc;GAA1F,UAAA;IACGgB,EAAS,WAAW,KAAKiE;IACzBnE,EAAM,KAAK,MAAS;KACnB,IAAIoE,EAAK,SAAS,aAChB,OACE,kBAAC,OAAD;MAAoB,WAAWlF,EAAQ;MAAW,MAAK;MACpD,UAAAkF,EAAK;KACH,GAFKA,EAAK,GAEV;KAGT,IAAM,EAAE,YAAS,gBAAaA,GACxBpC,IAAM7B,EAAQ,aAAa0D;KACjC,OACE,kBAACrC,GAAD;MAEO;MACL,QAAQrB,EAAQ;MAChB,QAAQiD,EAAQjD,EAAQ;MACxB,YAAYkE;MACZ,WAAWlE,EAAQ;MACnB,QAAQ6B,IAAM7B,EAAQ,SAAS,KAAA;MAC/B,aAAaA,EAAQ;MACX;MACV,oBAAkBQ,MAAa,YAAYA,MAAa,WAAiB,KAAA;MAExE,UAAA2D,IAAgBA,EAAcnE,CAAO,IAAIA,EAAQ;KACvC,GAZNiE,EAAK,GAYC;IAEjB,CAAC;IACAN,KAAUA,EAAO,SAAS,KAAK,kBAAClB,GAAD;KAAiB,OAAOkB;KAAQ,IAAG;KAAK,IAAI;IAAK,CAAA;GAC9E;;CACK,CAAA;AAEhB;AACA,EAAW,cAAc;;;ACzFzB,SAAgBS,EAAa,EAC3B,UACA,iBACA,aACA,WACA,iBAAc,wBACd,aACA,qBACA,WACA,aAAU,GACV,gBACA,eAAY,UACZ,GAAG9C,KACiB;CACpB,IAAM,CAAC+C,GAAMC,KAAWC,EAAgB;EAAE;EAAO;EAAc,YAAY;EAAI;CAAS,CAAC,GACnF,CAACC,GAAOC,KAAYC,EAAiB,CAAC,CAAC,GACvCC,IAAU,CAACC,MAAaP,EAAK,KAAK,CAAC,CAAC,SAAS,KAAKG,EAAM,SAAS,IAEjEK,UAAa;EACjB,AAAKF,MACLG,EAAO;GAAE,MAAMT,EAAK,KAAK;GAAG;EAAM,CAAC,GACnCC,EAAQ,EAAE,GACVG,EAAS,CAAC,CAAC;CACb;CAEA,OACE,kBAACjD,GAAD;EAAK,GAAIF;EAAT,UAAA,CACGkD,EAAM,SAAS,KACd,kBAAC,OAAD;GAAK,WAAWxF,EAAQ;GACrB,UAAAwF,EAAM,KAAK,GAAM,MAChB,kBAACO,GAAD;IAAoC,kBAAA;IAAiB,gBAAgBN,GAAU,MAAMO,EAAE,QAAQ,GAAG,MAAMC,MAAM9E,CAAK,CAAC;IACjH,UAAAgC,EAAK;GACF,GAFK,GAAGA,EAAK,KAAK,GAAGhC,GAErB,CACP;EACE,CAAA,GAEP,kBAAC,OAAD;GAAK,WAAWnB,EAAQ;GAAxB,UAAA;IACGkG;IACAC,KACC,kBAACC,GAAD;KAAY,UAAA;KAAiB;KAAQ,WAAW,MAAaX,GAAU,MAAM,CAAC,GAAGO,GAAG,GAAIK,KAAY,CAAC,CAAE,CAAC;KAAa;KACjH,WAAA,MACA,kBAAC/C,GAAD;MAAS,OAAM;MACb,UAAA,kBAACgD,GAAD;OAAY,GAAIC;OAAO,MAAK;OAAK,SAAQ;OAAS,cAAW;OAC3D,UAAA,kBAACC,GAAD,EAAe,MAAM,GAAK,CAAA;MAChB,CAAA;KACL,CAAA;IAED,CAAA;IAEd,kBAACC,GAAD;KACE,WAAWzG,EAAQ;KACnB,OAAOqF;KACP,WAAW,MAAUC,EAAQoB,EAAM,cAAc,KAAK;KACtD,YAAY,MAAU;MACpB,AAAIA,EAAM,QAAQ,WAAW,CAACA,EAAM,YAAY,CAACA,EAAM,YAAY,gBACjEA,EAAM,eAAe,GACrBb,EAAK;KAET;KACa;KACH;KACV,UAAA;KACA,SAAS;KACA;KACT,QAAO;KACP,cAAYc;IACb,CAAA;IACD,kBAACL,GAAD;KAAY,MAAM;KAAI,QAAO;KAAK,SAAQ;KAAS,SAAST;KAAM,UAAU,CAACF;KAAS,cAAYiB;KAChG,UAAA,kBAACC,GAAD,EAAW,MAAM,GAAK,CAAA;IACZ,CAAA;GACT;EACF,CAAA,CAAA;;AAET;AACA,EAAa,cAAc;;;ACtF3B,SAAgBC,EAAiB,EAC/B,kBACA,aACA,aACA,gBAAa,IACb,uBAAoB,oBACpB,UACA,GAAGxE,KACqB;CACxB,IAAM,CAACyE,GAAOC,KAAYtB,EAAS,EAAE,GAC/BuB,IAAW/C,QAAc;EAC7B,IAAMgD,IAAIH,EAAM,KAAK,CAAC,CAAC,kBAAkB,OAAO;EAEhD,OADKG,IACEC,EAAc,QAClB,MAAMC,EAAE,KAAK,kBAAkB,OAAO,CAAC,CAAC,SAASF,CAAC,KAAKE,EAAE,aAAa,kBAAkB,OAAO,CAAC,CAAC,SAASF,CAAC,CAC9G,IAHeC;CAIjB,GAAG,CAACA,GAAeJ,CAAK,CAAC;CAEzB,OACE,kBAACvE,GAAD;EAAK,WAAWvC,EAAQ;EAAe,GAAIqC;EAA3C,UAAA,CACG+E,KACC,kBAAC,OAAD;GAAK,WAAWpH,EAAQ;GACtB,UAAA,kBAACqH,GAAD;IACE,MAAK;IACL,aAAaC;IACb,aAAa,kBAACC,GAAD,EAAY,MAAM,GAAK,CAAA;IACpC,OAAOT;IACP,WAAW,MAAMC,EAAS,EAAE,cAAc,KAAK;IAC/C,cAAYO;GACb,CAAA;EACE,CAAA,GAEP,kBAACzC,GAAD;GAAY,OAAO,EAAE,MAAM,EAAE;GAAG,MAAK;GACnC,UAAA,kBAAC,OAAD;IAAK,MAAK;IAAV,UAAA,CACGmC,EAAS,WAAW,KACnB,kBAACzE,GAAD;KAAK,GAAE;KAAK,IAAG;KAAS,GAAE;KAAmB,IAAG;KAC7C,UAAAwC,KAAS;IACP,CAAA,GAENiC,EAAS,KAAK,MACb,kBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,WAAWhH,EAAQ;KACnB,eAAamH,EAAE,OAAOK,KAAY,KAAA;KAClC,gBAAcL,EAAE,UAAU,KAAK,KAAK,KAAA;KACpC,gBAAcA,EAAE,OAAOK,IAAW,SAAS,KAAA;KAC3C,eAAeC,IAAWN,CAAC;KAR7B,UAAA,CAUE,kBAACO,GAAD;MAAW,OAAM;MAAY,UAAS;MAAa,QAAQ;MAAG,MAAM;MAAI,YAAA;MAAW,UAAU,CAACP,EAAE;MAC9F,UAAA,kBAACpE,GAAD;OAAQ,KAAKoE,EAAE;OAAQ,MAAM3F,EAAa2F,EAAE,IAAI;OAAG,OAAOA,EAAE,SAAS;OAAY,MAAM;MAAK,CAAA;KACnF,CAAA,GACX,kBAAC,OAAD;MAAK,WAAWnH,EAAQ;MAAxB,UAAA;OACE,kBAAC,OAAD;QAAK,WAAWA,EAAQ;QAAxB,UAAA,CACE,kBAAC,QAAD;SAAM,WAAWA,EAAQ;SAAmB,UAAAmH,EAAE;QAAW,CAAA,GACxDA,EAAE,kBAAkB,KAAA,KAAa,kBAAC,QAAD;SAAM,WAAWnH,EAAQ;SAAmB,UAAAU,EAAeyG,EAAE,aAAa;QAAQ,CAAA,CACjH;;OACL,kBAAC,OAAD;QAAK,WAAWnH,EAAQ;QAAxB,UAAA,CACE,kBAAC,QAAD;SAAM,WAAWA,EAAQ;SAAsB,UAAAmH,EAAE;QAAkB,CAAA,IACjEA,EAAE,UAAU,KAAK,KACjB,kBAACQ,GAAD;SAAO,MAAK;SAAK,SAAQ;SAAS,SAASR,EAAE,UAAU,KAAK;SAAI,cAAY,GAAGA,EAAE,OAAO;SACrF,UAAAA,EAAE,SAAU,KAAK,QAAQA,EAAE;QACvB,CAAA,CAEN;;OACJA,EAAE,OACD,kBAACQ,GAAD;QAAO,MAAK;QAAK,OAAM;QAAW,IAAI;QACnC,UAAAR,EAAE;OACE,CAAA;MAEN;KACC,CAAA,CAAA;IA/BD,GAAAA,EAAE,EA+BD,CACT,CACE;;EACK,CAAA,CACT;;AAET;AACA,EAAiB,cAAc;;;AC/E/B,SAAgBS,EAAW,EAAE,UAAO,aAAU,WAAQ,eAAY,WAAQ,YAAS,WAAQ,GAAGvF,KAA2B;CACvH,OACE,kBAACE,GAAD;EAAK,WAAWtC,EAAQ;EAAQ,GAAIoC;EAApC,UAAA;GACGwF,KACC,kBAACxB,GAAD;IAAY,WAAWpG,EAAQ;IAAY,SAAQ;IAAS,SAAS4H;IAAQ,cAAW;IACtF,UAAA,kBAACC,GAAD,EAAe,MAAM,GAAK,CAAA;GAChB,CAAA;IAEZC,KAAUC,MACV,kBAACN,GAAD;IAAW,OAAM;IAAY,UAAS;IAAa,QAAQ;IAAG,MAAM;IAAI,YAAA;IAAW,UAAU,CAACO;IAC5F,UAAA,kBAAClF,GAAD;KAAQ,KAAKgF;KAAQ,MAAMC,IAAaxG,EAAawG,CAAU,IAAI,KAAA;KAAW,OAAM;KAAW,MAAM;IAAK,CAAA;GACjG,CAAA;GAEb,kBAAC,OAAD;IAAK,WAAW/H,EAAQ;IAAxB,UAAA,CACE,kBAAC,OAAD;KAAK,WAAWA,EAAQ;KAAc,UAAAiI;IAAW,CAAA,GAChDC,KAAY,kBAAC,OAAD;KAAK,WAAWlI,EAAQ;KAAiB,UAAAkI;IAAc,CAAA,CACjE;;GACJC;EACE;;AAET;AACA,EAAW,cAAc;AAkBzB,SAAgBC,EAAW,EACzB,YACA,WACA,aACA,aACA,YAAS,KACT,kBAAe,KACf,gBAAa,UACb,UACA,GAAGhG,KACe;CAClB,IAAMiG,KAAS,MAAwB,OAAOC,KAAM,WAAW,GAAGA,EAAE,MAAMA;CAE1E,OACE,kBAAChG,GAAD;EACE,WAAWtC,EAAQ;EACnB,OAAO,CACL;GACG,iBAA4BqI,EAAME,CAAM;GACxC,wBAAmCF,EAAMG,CAAY;EACxD,GACAC,CACF;EACA,GAAIrG;EAEJ,UAAA,kBAAC,OAAD;GACE,WAAWpC,EAAQ;GACnB,oBAAkB0I,IAAUC,IAAa,KAAA;GACzC,eAAa,MAAU,KAAA;GAHzB,UAAA,CAKGD,KAAW,kBAAC,SAAD;IAAO,WAAW1I,EAAQ;IAAgB,UAAA0I;GAAe,CAAA,GACrE,kBAAC,WAAD;IAAS,WAAW1I,EAAQ;IAA5B,UAAA;KACG4I;KACD,kBAAC,OAAD;MAAK,WAAW5I,EAAQ;MAAiB;KAAc,CAAA;KACtD6I;IACM;GACN,CAAA,CAAA;;CACF,CAAA;AAET;AACA,EAAW,cAAc"}

package/dist/colors-C_5SHERN.js

@@ -0,0 +1,33 @@
+"use client";
+import { i as e, l as t } from "./tokens-BBTJY6nq.js";
+//#region src/theme/colors.ts
+var n = [
+	50,
+	100,
+	200,
+	300,
+	400,
+	500,
+	600,
+	700,
+	800,
+	900
+], r = (e) => n.map((t) => e[t]), i = r(t.horizon), a = r(t.obsidian), o = r(t.electric), s = r(t.evergreen), c = r(t.danger), l = {
+	horizon: i,
+	obsidian: a,
+	electric: o,
+	evergreen: s,
+	danger: c,
+	gray: r(t.gray),
+	dark: [...e],
+	blue: i,
+	indigo: a,
+	green: s,
+	teal: s,
+	yellow: o,
+	red: c
+};
+//#endregion
+export { l as t };
+
+//# sourceMappingURL=colors-C_5SHERN.js.map

package/dist/colors-C_5SHERN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors-C_5SHERN.js","names":["darkNeutrals","ramps","STEPS","tuple","ramp","s","horizon","obsidian","electric","evergreen","danger","jcColors"],"sources":["../src/theme/colors.ts"],"sourcesContent":["import type { MantineColorsTuple } from '@mantine/core';\nimport { darkNeutrals, ramps, type RampStep } from './tokens';\n\n/**\n * Tuplas de 10 tons do Mantine geradas das rampas OKLCH em tokens.ts.\n * Índice → tom: 0=50 · 1=100 · … · 6=600 · … · 9=900.\n * `primaryShade` é 6 no claro e 4 no escuro, então `color=\"evergreen\"` etc.\n * preenche com o tom 600 (claro) / 400 (escuro) de qualquer cor.\n */\nconst STEPS: RampStep[] = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];\nconst tuple = (ramp: Record<RampStep, string>) => STEPS.map((s) => ramp[s]) as unknown as MantineColorsTuple;\n\nexport const horizon = tuple(ramps.horizon);\nexport const obsidian = tuple(ramps.obsidian);\nexport const electric = tuple(ramps.electric);\nexport const evergreen = tuple(ramps.evergreen);\nexport const danger = tuple(ramps.danger);\n/** Substitui o `gray` do Mantine: neutro frio da marca. */\nexport const gray = tuple(ramps.gray);\n/** Substitui o `dark` do Mantine com os neutros do tema escuro (0 = texto · 7 = fundo). */\nexport const dark = [...darkNeutrals] as unknown as MantineColorsTuple;\n\nexport const jcColors = {\n  horizon,\n  obsidian,\n  electric,\n  evergreen,\n  danger,\n  gray,\n  dark,\n  // Aliases: `color=\"blue\"` etc. continuam na paleta da marca.\n  blue: horizon,\n  indigo: obsidian,\n  green: evergreen,\n  teal: evergreen,\n  yellow: electric,\n  red: danger,\n} satisfies Record<string, MantineColorsTuple>;\n\nexport type JcColor = 'horizon' | 'obsidian' | 'electric' | 'evergreen' | 'danger' | 'gray';\n"],"mappings":";;;AASA,IAAME,IAAoB;CAAC;CAAI;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG,GACpEC,KAAS,MAAmCD,EAAM,KAAK,MAAME,EAAKC,EAAE,GAE7DC,IAAUH,EAAMF,EAAM,OAAO,GAC7BM,IAAWJ,EAAMF,EAAM,QAAQ,GAC/BO,IAAWL,EAAMF,EAAM,QAAQ,GAC/BQ,IAAYN,EAAMF,EAAM,SAAS,GACjCS,IAASP,EAAMF,EAAM,MAAM,GAM3BU,IAAW;CACtB;CACA;CACA;CACA;CACA;CACA,MAVkBR,EAAMF,EAAM,IAU9B;CACA,OATmB,GAAGD,CAStB;CAEA,MAAMM;CACN,QAAQC;CACR,OAAOE;CACP,MAAMA;CACN,QAAQD;CACR,KAAKE;AACP"}

package/dist/components/ContentCard/ContentCard.d.ts

@@ -0,0 +1,25 @@
+import { type CardProps, type Factory, type StylesApiProps } from '@mantine/core';
+export type ContentCardStylesNames = 'root' | 'image' | 'kicker' | 'title' | 'body' | 'actions';
+export interface ContentCardProps extends Omit<CardProps, 'classNames' | 'styles' | 'vars' | 'attributes' | 'title'>, StylesApiProps<ContentCardFactory> {
+    /** Sobretítulo em caixa-alta */
+    kicker?: React.ReactNode;
+    title?: React.ReactNode;
+    /** Imagem de capa (URL) ou nó customizado */
+    image?: string | React.ReactNode;
+    imageAlt?: string;
+    imageHeight?: number;
+    /** Botões/links no rodapé do card */
+    actions?: React.ReactNode;
+    children?: React.ReactNode;
+}
+export type ContentCardFactory = Factory<{
+    props: ContentCardProps;
+    ref: HTMLDivElement;
+    stylesNames: ContentCardStylesNames;
+}>;
+/** Card de conteúdo: superfície branca sobre LightGray, borda suave e sombra pequena (ds-card). */
+export declare const ContentCard: import("@mantine/core").MantineComponent<{
+    props: ContentCardProps;
+    ref: HTMLDivElement;
+    stylesNames: ContentCardStylesNames;
+}>;

package/dist/components/ContentCard/index.d.ts

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

package/dist/components/CouponCode/CouponCode.d.ts

@@ -0,0 +1,14 @@
+import { type BoxProps } from '@mantine/core';
+export interface CouponCodeProps extends BoxProps {
+    code: string;
+    /** Texto do benefício (ex.: "5% OFF na 1ª compra") */
+    description?: React.ReactNode;
+    copyLabel?: string;
+    copiedLabel?: string;
+    onCopy?: (code: string) => void;
+}
+/** Cupom com borda tracejada e botão de copiar. */
+export declare function CouponCode({ code, description, copyLabel, copiedLabel, onCopy, ...others }: CouponCodeProps): import("react").JSX.Element;
+export declare namespace CouponCode {
+    var displayName: string;
+}

package/dist/components/CouponCode/index.d.ts

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

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,52 @@
+import { type BoxProps, type TableProps } from '@mantine/core';
+export interface DataTableColumn<T> {
+    /** Chave do campo em `T` (também usada para ordenar). Omita em colunas calculadas/de ações e use `id` + `render`. */
+    key?: keyof T & string;
+    /** Identificador da coluna quando não há `key` (ex.: 'acoes') */
+    id?: string;
+    header: React.ReactNode;
+    /** Renderização customizada da célula */
+    render?: (row: T, index: number) => React.ReactNode;
+    /** Coluna numérica: alinhada à direita, tabular-nums e formatada em pt-BR */
+    numeric?: boolean;
+    /** Opções de Intl.NumberFormat para colunas numéricas */
+    format?: Intl.NumberFormatOptions;
+    sortable?: boolean;
+    /** Valor usado na ordenação quando diferente do campo */
+    sortValue?: (row: T) => string | number;
+    width?: number | string;
+}
+export type SortDirection = 'asc' | 'desc';
+export interface DataTableSort<T> {
+    /** `key` ou `id` da coluna ordenada */
+    key: (keyof T & string) | (string & {});
+    direction: SortDirection;
+}
+export interface DataTableProps<T> extends BoxProps {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    /** Chave única de cada linha @default índice */
+    rowKey?: (row: T, index: number) => React.Key;
+    initialSort?: DataTableSort<T>;
+    /** Controle externo da ordenação */
+    sort?: DataTableSort<T> | null;
+    onSortChange?: (sort: DataTableSort<T> | null) => void;
+    /** Ativa paginação local com N linhas por página */
+    pageSize?: number;
+    loading?: boolean;
+    /** Linhas de skeleton durante loading @default 5 */
+    loadingRows?: number;
+    empty?: React.ReactNode;
+    onRowClick?: (row: T, index: number) => void;
+    /** Remove a moldura (card) em volta da tabela */
+    plain?: boolean;
+    striped?: boolean;
+    stickyHeader?: boolean;
+    /** Props repassadas para o Table do Mantine */
+    tableProps?: Omit<TableProps, 'data'>;
+}
+/** Tabela de dados com ordenação, colunas numéricas pt-BR, paginação e estados vazio/carregando. */
+export declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, initialSort, sort: controlledSort, onSortChange, pageSize, loading, loadingRows, empty, onRowClick, plain, striped, stickyHeader, tableProps, ...others }: DataTableProps<T>): import("react").JSX.Element;
+export declare namespace DataTable {
+    var displayName: string;
+}

package/dist/components/DataTable/index.d.ts

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

package/dist/components/KpiCard/KpiCard.d.ts

@@ -0,0 +1,48 @@
+import { type BoxProps, type ElementProps, type Factory, type SimpleGridProps, type StylesApiProps } from '@mantine/core';
+export type KpiCardStylesNames = 'root' | 'header' | 'label' | 'icon' | 'value' | 'footer' | 'delta' | 'chart';
+export type KpiCardCssVariables = {
+    root: '--kpi-delta-color' | '--kpi-value-color';
+};
+export interface KpiCardProps extends BoxProps, StylesApiProps<KpiCardFactory>, Omit<ElementProps<'div'>, 'title'> {
+    /** Rótulo em caixa-alta (ex.: "Acessos (60d)") */
+    label: React.ReactNode;
+    /** Valor principal. Números são formatados em pt-BR. */
+    value: React.ReactNode;
+    /** Variação em pontos percentuais (ex.: -5.6). Cor e seta automáticas. */
+    delta?: number;
+    /** Texto ao lado da variação (ex.: "vs. mês anterior") */
+    deltaLabel?: React.ReactNode;
+    /** Quando queda é algo bom (ex.: taxa de rejeição), inverte as cores. */
+    invertDelta?: boolean;
+    /** Pinta o próprio valor com a cor da variação (como o KPI "-5,6%" do DS) */
+    colorValue?: boolean;
+    icon?: React.ReactNode;
+    /** Slot para um Sparkline ou mini-gráfico */
+    chart?: React.ReactNode;
+    loading?: boolean;
+}
+export type KpiCardFactory = Factory<{
+    props: KpiCardProps;
+    ref: HTMLDivElement;
+    stylesNames: KpiCardStylesNames;
+    vars: KpiCardCssVariables;
+}>;
+export declare function getDeltaTone(delta: number | undefined, invert?: boolean): 'up' | 'down' | 'flat';
+/** Tile de KPI dos dashboards (ds-kpi). */
+export declare const KpiCard: import("@mantine/core").MantineComponent<{
+    props: KpiCardProps;
+    ref: HTMLDivElement;
+    stylesNames: KpiCardStylesNames;
+    vars: KpiCardCssVariables;
+}>;
+export interface KpiGroupProps extends SimpleGridProps {
+    children?: React.ReactNode;
+}
+/**
+ * Grade responsiva de KPIs baseada na largura do CONTÊINER (container queries), não da tela:
+ * 1 coluna até 440px · 2 até 880px · 4 acima. Funciona igual em página cheia, ao lado de sidebar ou dentro de card.
+ */
+export declare function KpiGroup({ cols, spacing, type, ...others }: KpiGroupProps): import("react").JSX.Element;
+export declare namespace KpiGroup {
+    var displayName: string;
+}

package/dist/components/KpiCard/index.d.ts

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

package/dist/components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,22 @@
+import { type BoxProps } from '@mantine/core';
+export interface PageHeaderBreadcrumb {
+    label: React.ReactNode;
+    href?: string;
+}
+export interface PageHeaderProps extends BoxProps, Omit<React.ComponentProps<'div'>, keyof BoxProps | 'title'> {
+    kicker?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Botões à direita do título */
+    actions?: React.ReactNode;
+    breadcrumbs?: PageHeaderBreadcrumb[];
+    /** Componente dos links do breadcrumb (ex.: Link do react-router) @default 'a' */
+    linkComponent?: React.ElementType;
+    /** `display` usa display-small (página principal); `headline` usa headline-large @default 'headline' */
+    size?: 'display' | 'headline';
+}
+/** Cabeçalho de página: breadcrumbs, kicker, título, descrição e ações. */
+export declare function PageHeader({ kicker, title, description, actions, breadcrumbs, linkComponent, size, ...others }: PageHeaderProps): import("react").JSX.Element;
+export declare namespace PageHeader {
+    var displayName: string;
+}

package/dist/components/PageHeader/index.d.ts

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

package/dist/components/PriceTag/PriceTag.d.ts

@@ -0,0 +1,22 @@
+import { type BoxProps } from '@mantine/core';
+export interface PriceTagProps extends BoxProps {
+    /** Preço atual em reais */
+    value: number;
+    /** Preço "de" (riscado) */
+    oldValue?: number;
+    /** Parcelamento: `{ count: 10 }` → "ou 10x de R$ 12,99 sem juros" */
+    installments?: {
+        count: number;
+        interestFree?: boolean;
+    };
+    /** Desconto no Pix em % (ex.: 5) → "R$ 94,05 no Pix" */
+    pixDiscount?: number;
+    /** Unidade (ex.: "/m²", "/rolo") */
+    unit?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+/** Preço em BRL com preço antigo, parcelamento e desconto Pix. */
+export declare function PriceTag({ value, oldValue, installments, pixDiscount, unit, size, ...others }: PriceTagProps): import("react").JSX.Element;
+export declare namespace PriceTag {
+    var displayName: string;
+}

package/dist/components/PriceTag/index.d.ts

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

package/dist/components/ProductCard/ProductCard.d.ts

@@ -0,0 +1,39 @@
+import { type CardProps, type Factory, type StylesApiProps } from '@mantine/core';
+import { type PriceTagProps } from '../PriceTag';
+export type ProductCardStylesNames = 'root' | 'media' | 'badges' | 'favorite' | 'category' | 'name' | 'price' | 'action';
+export interface ProductCardProps extends Omit<CardProps, 'classNames' | 'styles' | 'vars' | 'attributes'>, StylesApiProps<ProductCardFactory> {
+    name: string;
+    image: string;
+    href?: string;
+    category?: string;
+    price: number;
+    oldPrice?: number;
+    installments?: PriceTagProps['installments'];
+    pixDiscount?: number;
+    unit?: string;
+    /** Selos extras (ex.: "Novo", "Frete grátis") */
+    badges?: React.ReactNode[];
+    /** Mostra selo "-X%" calculado a partir de oldPrice @default true */
+    showDiscount?: boolean;
+    rating?: number;
+    reviews?: number;
+    favorite?: boolean;
+    onFavoriteChange?: (favorite: boolean) => void;
+    actionLabel?: string;
+    onAction?: () => void;
+    /** Proporção da imagem (largura/altura) @default 1 */
+    imageRatio?: number;
+    /** Componente do link (ex.: Link do react-router) @default 'a' */
+    linkComponent?: React.ElementType;
+}
+export type ProductCardFactory = Factory<{
+    props: ProductCardProps;
+    ref: HTMLDivElement;
+    stylesNames: ProductCardStylesNames;
+}>;
+/** Card de produto do e-commerce: imagem, selos, nome, avaliação, preço e CTA. */
+export declare const ProductCard: import("@mantine/core").MantineComponent<{
+    props: ProductCardProps;
+    ref: HTMLDivElement;
+    stylesNames: ProductCardStylesNames;
+}>;

package/dist/components/ProductCard/index.d.ts

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

package/dist/components/PromoBanner/PromoBanner.d.ts

@@ -0,0 +1,35 @@
+import { type BoxProps, type ElementProps, type Factory, type MantineRadius, type StylesApiProps } from '@mantine/core';
+export type PromoBannerStylesNames = 'root' | 'content' | 'highlight' | 'close';
+export type PromoBannerCssVariables = {
+    root: '--banner-bg' | '--banner-color' | '--banner-highlight' | '--banner-radius';
+};
+export interface PromoBannerProps extends BoxProps, StylesApiProps<PromoBannerFactory>, ElementProps<'div'> {
+    /** `horizon` = azul com destaque Electric · `electric` = amarelo com destaque Horizon · `obsidian` @default 'horizon' */
+    variant?: 'horizon' | 'electric' | 'obsidian';
+    /** Trecho destacado ao final (ex.: cupom). Também é possível usar `<strong>` dentro de children. */
+    highlight?: React.ReactNode;
+    /** Ícone/elemento à esquerda do texto */
+    icon?: React.ReactNode;
+    /** Exibe botão de fechar; o banner some e chama `onClose` */
+    withCloseButton?: boolean;
+    /** Controle externo da visibilidade (opcional) */
+    opened?: boolean;
+    onClose?: () => void;
+    /** Arredonda os cantos (por padrão o banner é full-bleed, sem raio) */
+    radius?: MantineRadius;
+}
+export type PromoBannerFactory = Factory<{
+    props: PromoBannerProps;
+    ref: HTMLDivElement;
+    stylesNames: PromoBannerStylesNames;
+    vars: PromoBannerCssVariables;
+    variant: 'horizon' | 'electric' | 'obsidian';
+}>;
+/** Banner promocional (topo do site / campanhas). */
+export declare const PromoBanner: import("@mantine/core").MantineComponent<{
+    props: PromoBannerProps;
+    ref: HTMLDivElement;
+    stylesNames: PromoBannerStylesNames;
+    vars: PromoBannerCssVariables;
+    variant: "horizon" | "electric" | "obsidian";
+}>;

package/dist/components/PromoBanner/index.d.ts

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

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,16 @@
+import { type BadgeProps } from '@mantine/core';
+export type TagTone = 'primary' | 'success' | 'warn' | 'error' | 'neutral';
+export interface TagProps extends Omit<BadgeProps, 'color' | 'variant'> {
+    /** Tom semântico (ds-tag-*) @default 'primary' */
+    tone?: TagTone;
+    /** Mostra o ícone padrão do tom (✓ ⚠ ✕ ⓘ). Passe um nó em `leftSection` para usar outro. */
+    withIcon?: boolean;
+    /** `light` = selo suave (padrão) · `filled` = cor sólida · `outline` · `dot` */
+    variant?: 'light' | 'filled' | 'outline' | 'dot';
+    children?: React.ReactNode;
+}
+/** Selo / tag de status — preset de Badge com os tons do ds.css. */
+export declare function Tag({ tone, withIcon, variant, leftSection, ...others }: TagProps): import("react").JSX.Element;
+export declare namespace Tag {
+    var displayName: string;
+}

package/dist/components/Tag/index.d.ts

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

package/dist/components/ThemeToggle/ThemeToggle.d.ts

@@ -0,0 +1,11 @@
+import { type ActionIconProps } from '@mantine/core';
+export interface ThemeToggleProps extends Omit<ActionIconProps, 'children'> {
+    /** `icon` = ActionIcon · `button` = botão "Alternar tema" (como no DS) @default 'icon' */
+    as?: 'icon' | 'button';
+    label?: string;
+}
+/** Alterna entre tema claro e escuro (persistido pelo colorSchemeManager do Mantine). */
+export declare function ThemeToggle({ as, label, variant, color, size, ...others }: ThemeToggleProps): import("react").JSX.Element;
+export declare namespace ThemeToggle {
+    var displayName: string;
+}

package/dist/components/ThemeToggle/index.d.ts

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

package/dist/components/TokenSwatch/TokenSwatch.d.ts

@@ -0,0 +1,26 @@
+export interface TokenSwatchProps extends Omit<React.ComponentProps<'button'>, 'value' | 'name'> {
+    name: string;
+    /** Cor (hex) exibida e copiada */
+    value: string;
+    /** Variável CSS correspondente (ex.: --dc-horizon) */
+    cssVar?: string;
+    /** O que copiar ao clicar @default 'value' */
+    copy?: 'value' | 'cssVar';
+}
+/** Amostra de cor clicável (copia hex ou var CSS). */
+export declare function TokenSwatch({ name, value, cssVar, copy, className, ...others }: TokenSwatchProps): import("react").JSX.Element;
+export declare namespace TokenSwatch {
+    var displayName: string;
+}
+export interface ColorRampProps extends React.ComponentProps<'div'> {
+    steps: {
+        label: string;
+        value: string;
+        derived?: boolean;
+    }[];
+}
+/** Rampa de cor horizontal (base → 50). Clique copia o hex. */
+export declare function ColorRamp({ steps, className, ...others }: ColorRampProps): import("react").JSX.Element;
+export declare namespace ColorRamp {
+    var displayName: string;
+}

package/dist/components/TokenSwatch/index.d.ts

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

package/dist/components/TopNav/TopNav.d.ts

@@ -0,0 +1,32 @@
+import { type BoxProps, type ElementProps, type Factory, type StylesApiProps } from '@mantine/core';
+export type TopNavStylesNames = 'root' | 'brand' | 'links' | 'link' | 'right' | 'burger' | 'mobileLinks';
+export interface TopNavLink {
+    label: React.ReactNode;
+    href?: string;
+    active?: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+}
+export interface TopNavProps extends BoxProps, StylesApiProps<TopNavFactory>, ElementProps<'div'> {
+    /** Marca à esquerda @default <JcLogo variant="dark" /> (a barra é navy em ambos os temas) */
+    brand?: React.ReactNode;
+    /** Link da marca; `null` renderiza a marca como texto @default '/' */
+    brandHref?: string | null;
+    links?: TopNavLink[];
+    /** Componente usado nos links (ex.: `Link` do react-router, recebe `to`/`href`) @default 'a' */
+    linkComponent?: React.ElementType;
+    /** Conteúdo à direita (ex.: ThemeToggle, avatar) */
+    rightSection?: React.ReactNode;
+    /** Esconde os links em telas pequenas e mostra um hambúrguer @default true */
+    collapseOnMobile?: boolean;
+}
+export type TopNavFactory = Factory<{
+    props: TopNavProps;
+    ref: HTMLDivElement;
+    stylesNames: TopNavStylesNames;
+}>;
+/** Barra de navegação Obsidian dos painéis (ds-nav). */
+export declare const TopNav: import("@mantine/core").MantineComponent<{
+    props: TopNavProps;
+    ref: HTMLDivElement;
+    stylesNames: TopNavStylesNames;
+}>;

package/dist/components/TopNav/index.d.ts

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