whatsapp-ui-react 0.0.3 → 0.0.5

package/dist/style.css

@@ -0,0 +1,688 @@
+/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+@layer properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    *, :before, :after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
+      --tw-border-style: solid;
+      --tw-leading: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-duration: initial;
+    }
+  }
+}
+
+.\@container {
+  container-type: inline-size;
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+.visible {
+  visibility: visible;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.static {
+  position: static;
+}
+
+.top-1\/2 {
+  top: 50%;
+}
+
+.isolate {
+  isolation: isolate;
+}
+
+.-z-10 {
+  z-index: calc(10 * -1);
+}
+
+.container {
+  width: 100%;
+}
+
+.mt-\[5px\] {
+  margin-top: 5px;
+}
+
+.contents {
+  display: contents;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.hidden {
+  display: none;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.table {
+  display: table;
+}
+
+.size-full {
+  width: 100%;
+  height: 100%;
+}
+
+.h-\[450px\] {
+  height: 450px;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.w-\[336px\] {
+  width: 336px;
+}
+
+.w-\[550px\] {
+  width: 550px;
+}
+
+.w-fit {
+  width: fit-content;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.max-w-\[65cqw\] {
+  max-width: 65cqw;
+}
+
+.min-w-\[336px\] {
+  min-width: 336px;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.-translate-x-1\/2 {
+  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+
+.-translate-y-1\/2 {
+  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+
+.scale-x-\[-1\] {
+  --tw-scale-x: -1;
+  scale: var(--tw-scale-x) var(--tw-scale-y);
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.resize-none {
+  resize: none;
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.self-end {
+  align-self: flex-end;
+}
+
+.truncate {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.rounded-\[0\.325rem\] {
+  border-radius: .325rem;
+}
+
+.rounded-\[0\.525rem\] {
+  border-radius: .525rem;
+}
+
+.rounded-full {
+  border-radius: 3.40282e38px;
+}
+
+.rounded-tl-none {
+  border-top-left-radius: 0;
+}
+
+.rounded-tr-none {
+  border-top-right-radius: 0;
+}
+
+.border-b {
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 1px;
+}
+
+.bg-\[\#0d1418\] {
+  background-color: #0d1418;
+}
+
+.bg-transparent {
+  background-color: #0000;
+}
+
+.bg-wa-avatar {
+  background-color: var(--color-wa-avatar);
+}
+
+.bg-wa-bg {
+  background-color: var(--color-wa-bg);
+}
+
+.bg-wa-bubble-in {
+  background-color: var(--color-wa-bubble-in);
+}
+
+.bg-wa-bubble-out {
+  background-color: var(--color-wa-bubble-out);
+}
+
+.bg-wa-divider {
+  background-color: var(--color-wa-divider);
+}
+
+.bg-wa-input {
+  background-color: var(--color-wa-input);
+}
+
+.bg-wa-send {
+  background-color: var(--color-wa-send);
+}
+
+.bg-wa-teal {
+  background-color: var(--color-wa-teal);
+}
+
+.bg-wa-teal\/40 {
+  background-color: #53bdeb66;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .bg-wa-teal\/40 {
+    background-color: color-mix(in oklab, var(--color-wa-teal) 40%, transparent);
+  }
+}
+
+.bg-wa-text-secondary {
+  background-color: var(--color-wa-text-secondary);
+}
+
+.bg-wa-text-secondary\/40 {
+  background-color: #8696a066;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .bg-wa-text-secondary\/40 {
+    background-color: color-mix(in oklab, var(--color-wa-text-secondary) 40%, transparent);
+  }
+}
+
+.bg-repeat {
+  background-repeat: repeat;
+}
+
+.object-contain {
+  object-fit: contain;
+}
+
+.object-cover {
+  object-fit: cover;
+}
+
+.pt-\[1px\] {
+  padding-top: 1px;
+}
+
+.pt-\[10px\] {
+  padding-top: 10px;
+}
+
+.text-\[10px\] {
+  font-size: 10px;
+}
+
+.text-\[13px\] {
+  font-size: 13px;
+}
+
+.text-\[15px\] {
+  font-size: 15px;
+}
+
+.leading-none {
+  --tw-leading: 1;
+  line-height: 1;
+}
+
+.break-words {
+  overflow-wrap: break-word;
+}
+
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
+.text-wa-bubble-in {
+  color: var(--color-wa-bubble-in);
+}
+
+.text-wa-bubble-out {
+  color: var(--color-wa-bubble-out);
+}
+
+.text-wa-icon {
+  color: var(--color-wa-icon);
+}
+
+.text-wa-teal {
+  color: var(--color-wa-teal);
+}
+
+.text-wa-text {
+  color: var(--color-wa-text);
+}
+
+.text-wa-text-body {
+  color: var(--color-wa-text-body);
+}
+
+.text-wa-text-secondary {
+  color: var(--color-wa-text-secondary);
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-100 {
+  opacity: 1;
+}
+
+.opacity-\[0\.06\] {
+  opacity: .06;
+}
+
+.shadow-\[0_1px_4px_rgba\(0\,0\,0\,0\.15\)\] {
+  --tw-shadow: 0 1px 4px var(--tw-shadow-color, #00000026);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+.ring-1 {
+  --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+.transition {
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+  transition-timing-function: var(--tw-ease, ease);
+  transition-duration: var(--tw-duration, 0s);
+}
+
+.transition-all {
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, ease);
+  transition-duration: var(--tw-duration, 0s);
+}
+
+.transition-colors {
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+  transition-timing-function: var(--tw-ease, ease);
+  transition-duration: var(--tw-duration, 0s);
+}
+
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: var(--tw-ease, ease);
+  transition-duration: var(--tw-duration, 0s);
+}
+
+.duration-300 {
+  --tw-duration: .3s;
+  transition-duration: .3s;
+}
+
+.outline-none {
+  --tw-outline-style: none;
+  outline-style: none;
+}
+
+.select-none {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.\[scrollbar-color\:rgba\(255\,255\,255\,0\.1\)_transparent\] {
+  scrollbar-color: #ffffff1a transparent;
+}
+
+.\[scrollbar-width\:thin\] {
+  scrollbar-width: thin;
+}
+
+.\[text-shadow\:0_1px_3px_rgba\(0\,0\,0\,0\.25\)\] {
+  text-shadow: 0 1px 3px #00000040;
+}
+
+@media (hover: hover) {
+  .group-hover\:block:is(:where(.group):hover *) {
+    display: block;
+  }
+
+  .group-hover\:hidden:is(:where(.group):hover *) {
+    display: none;
+  }
+}
+
+.placeholder\:text-wa-icon\/70::placeholder {
+  color: #aebac1b3;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .placeholder\:text-wa-icon\/70::placeholder {
+    color: color-mix(in oklab, var(--color-wa-icon) 70%, transparent);
+  }
+}
+
+@media (hover: hover) {
+  .hover\:bg-wa-hover:hover {
+    background-color: var(--color-wa-hover);
+  }
+
+  .hover\:text-wa-text:hover {
+    color: var(--color-wa-text);
+  }
+
+  .hover\:opacity-70:hover {
+    opacity: .7;
+  }
+
+  .hover\:opacity-90:hover {
+    opacity: .9;
+  }
+}
+
+.disabled\:cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}
+
+.disabled\:opacity-50:disabled {
+  opacity: .5;
+}
+
+.\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full::-webkit-scrollbar-thumb {
+  border-radius: 3.40282e38px;
+}
+
+.\[\&\:\:-webkit-scrollbar-thumb\]\:bg-\[rgba\(255\,255\,255\,0\.18\)\]::-webkit-scrollbar-thumb {
+  background-color: #ffffff2e;
+}
+
+.\[\&\:\:-webkit-scrollbar-thumb\:hover\]\:bg-\[rgba\(255\,255\,255\,0\.3\)\]::-webkit-scrollbar-thumb:hover {
+  background-color: #ffffff4d;
+}
+
+.\[\&\:\:-webkit-scrollbar-track\]\:bg-transparent::-webkit-scrollbar-track {
+  background-color: #0000;
+}
+
+:root, :host {
+  --color-wa-bg: #161717;
+  --color-wa-bubble-out: #144d37;
+  --color-wa-bubble-in: #202c33;
+  --color-wa-avatar: #2a3942;
+  --color-wa-input: #242626;
+  --color-wa-divider: #182229;
+  --color-wa-text: #e9edef;
+  --color-wa-text-secondary: #8696a0;
+  --color-wa-text-body: #d1d7db;
+  --color-wa-icon: #aebac1;
+  --color-wa-teal: #53bdeb;
+  --color-wa-send: #21c063;
+  --color-wa-hover: #00a884;
+}
+
+[data-wa-theme="light"] {
+  --color-wa-bg: #f0f2f5;
+  --color-wa-bubble-out: #d9fdd3;
+  --color-wa-bubble-in: #fff;
+  --color-wa-avatar: #dfe5e7;
+  --color-wa-input: #fff;
+  --color-wa-divider: #e9edef;
+  --color-wa-text: #111b21;
+  --color-wa-text-secondary: #667781;
+  --color-wa-text-body: #3b4a54;
+  --color-wa-icon: #54656f;
+  --color-wa-teal: #0a7040;
+  --color-wa-send: #00a884;
+  --color-wa-hover: #008f72;
+}
+
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --tw-leading {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-duration {
+  syntax: "*";
+  inherits: false
+}

package/dist/utils/groupMessages.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 /** A single message entry managed by {@link Chat}. */
 export interface GroupedMessage {
-    /** Unique React key — auto-generated by `<Chat>` when omitted. */
+    /** Unique React key - auto-generated by `<Chat>` when omitted. */
     id?: React.Key;
     /** Identifies the sender; `'me'` denotes the local user. */
     senderId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "whatsapp-ui-react",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "React component library with a WhatsApp Web-inspired UI.",
   "keywords": [
     "react",
@@ -20,7 +20,9 @@
   },
   "license": "Apache-2.0",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -30,10 +32,12 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./styles": "./dist/tailwind.css"
+    "./style.css": "./dist/style.css",
+    "./css/*": "./src/css/*"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/css"
   ],
   "engines": {
     "node": ">=18"
@@ -41,7 +45,6 @@
   "scripts": {
     "dev": "vite --config vite.dev.config.ts",
     "build": "tsc --noEmit && vite build",
-    "postbuild": "tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --minify",
     "build:preview": "vite build --config vite.dev.config.ts",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src",