whatsapp-ui-react 0.0.5 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "whatsapp-ui-react",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "React component library with a WhatsApp Web-inspired UI.",
   "keywords": [
     "react",
@@ -32,19 +32,18 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./style.css": "./dist/style.css",
-    "./css/*": "./src/css/*"
+    "./css/*": "./css/*"
   },
   "files": [
     "dist",
-    "src/css"
+    "css"
   ],
   "engines": {
     "node": ">=18"
   },
   "scripts": {
     "dev": "vite --config vite.dev.config.ts",
-    "build": "tsc --noEmit && vite build",
+    "build": "tsc --noEmit && vite build && node scripts/copy-css.js",
     "build:preview": "vite build --config vite.dev.config.ts",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src",

package/dist/style.css

@@ -1,688 +0,0 @@
-/*! 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
-}