@adatechnology/conversations-ui 0.1.0-rc.37 → 0.1.0-rc.39

package/dist/index.js

@@ -772,7 +772,10 @@ function WhatsAppMessageEditor({
     ),
     /* @__PURE__ */ jsxs3("div", { className: "mt-2", children: [
       /* @__PURE__ */ jsx3("p", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1", children: previewLabel }),
-      /* @__PURE__ */ jsx3("div", { className: "rounded-xl bg-[#e5ded8] dark:bg-gray-900 p-3", children: /* @__PURE__ */ jsx3("div", { className: "inline-block max-w-full rounded-lg rounded-tl-none bg-white dark:bg-gray-800 shadow-sm px-3 py-2 text-sm text-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words", children: value.trim() ? renderWhatsApp(value) : /* @__PURE__ */ jsx3("span", { className: "text-gray-400 dark:text-gray-500", children: emptyPreviewText }) }) })
+      /* @__PURE__ */ jsx3("div", { className: "rounded-2xl bg-[#e5ddd5] dark:bg-[#1a1a2e] p-3", children: /* @__PURE__ */ jsx3("div", { className: "flex justify-end ml-auto", style: { maxWidth: "85%" }, children: /* @__PURE__ */ jsxs3("div", { className: "bg-[#dcf8c6] dark:bg-[#1b5e20] rounded-lg rounded-tr-none shadow-sm px-3 py-2 text-sm text-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words", children: [
+        value.trim() ? renderWhatsApp(value) : /* @__PURE__ */ jsx3("span", { className: "text-gray-400 dark:text-gray-500", children: emptyPreviewText }),
+        /* @__PURE__ */ jsx3("p", { className: "text-gray-400 dark:text-gray-400 mt-1 text-right text-[9px]", children: "12:00 \u2713\u2713" })
+      ] }) }) })
     ] })
   ] });
 }

package/dist/styles.css

@@ -987,14 +987,8 @@
 .dark {
   --cv-border-color: rgb(51 65 85);
 }
-@layer base {
-  *,
-  ::before,
-  ::after,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--cv-border-color);
-  }
+:where(*, ::before, ::after, ::backdrop, ::file-selector-button) {
+  border-color: var(--cv-border-color);
 }
 .cv-table-card {
   overflow-x: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.37",
+  "version": "0.1.0-rc.39",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"

package/src/WhatsAppMessageEditor.tsx

@@ -155,9 +155,12 @@ export function WhatsAppMessageEditor({
 
       <div className="mt-2">
         <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">{previewLabel}</p>
-        <div className="rounded-xl bg-[#e5ded8] dark:bg-gray-900 p-3">
-          <div className="inline-block max-w-full rounded-lg rounded-tl-none bg-white dark:bg-gray-800 shadow-sm px-3 py-2 text-sm text-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words">
-            {value.trim() ? renderWhatsApp(value) : <span className="text-gray-400 dark:text-gray-500">{emptyPreviewText}</span>}
+        <div className="rounded-2xl bg-[#e5ddd5] dark:bg-[#1a1a2e] p-3">
+          <div className="flex justify-end ml-auto" style={{ maxWidth: '85%' }}>
+            <div className="bg-[#dcf8c6] dark:bg-[#1b5e20] rounded-lg rounded-tr-none shadow-sm px-3 py-2 text-sm text-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words">
+              {value.trim() ? renderWhatsApp(value) : <span className="text-gray-400 dark:text-gray-500">{emptyPreviewText}</span>}
+              <p className="text-gray-400 dark:text-gray-400 mt-1 text-right text-[9px]">12:00 ✓✓</p>
+            </div>
           </div>
         </div>
       </div>

package/src/styles.css

@@ -894,20 +894,16 @@
  * O Tailwind v4 trocou o padrão de `gray-200` por `currentColor`, e os componentes daqui foram
  * escritos no v3. Em produto que traz a base do shadcn nada aparece — ela já redefine isto; em
  * produto sem shadcn, cada `border` sai na cor do texto, e a tabela de documentos vinha com régua
- * azul-quase-preta em vez de cinza. Fica na camada `base`, então qualquer `border-*` do host ou
- * daqui continua ganhando, e a variável deixa o produto escolher outra cor sem editar o pacote.
+ * azul-quase-preta em vez de cinza. `:where()` zera a especificidade do seletor, então qualquer
+ * `border-*` do host ou daqui continua ganhando por especificidade — sem depender da camada
+ * `base` do Tailwind, que quebra o build de host que importa este arquivo fora do pipeline do
+ * Tailwind (erro do postcss: "`@layer base` is used but no matching `@tailwind base` directive").
  */
 :root { --cv-border-color: rgb(229 231 235); }
 .dark { --cv-border-color: rgb(51 65 85); }
 
-@layer base {
-  *,
-  ::before,
-  ::after,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--cv-border-color);
-  }
+:where(*, ::before, ::after, ::backdrop, ::file-selector-button) {
+  border-color: var(--cv-border-color);
 }
 
 /* Tabela de listagem: a moldura, o cabeçalho e a zebra que `web.md` §7 exige, no stylesheet pelo