feat: Add new component chat

README.md

@@ -242,7 +242,7 @@ Tweet about daisyUI: [![][tweet]][tweet-url]
 [jsdeliver-url]: https://www.jsdelivr.com/package/npm/daisyui
 [build-url]: https://github.com/saadeghi/daisyui/actions
 [tweet-url]: https://twitter.com/intent/tweet?text=daisyUI%20%0D%0AComponents%20for%20Tailwind%20CSS%20%0D%0Ahttps://github.com/saadeghi/daisyui
-[number-of-components]: https://badgen.net/badge/total%20components/47/green
+[number-of-components]: https://badgen.net/badge/total%20components/49/green
 [docs-url-install]: https://daisyui.com/docs/install
 [docs-url]: https://daisyui.com/
 [logo-url]: https://raw.githubusercontent.com/saadeghi/files/main/daisyui/logo-4.svg

src/components/styled/chat.css

@@ -0,0 +1,51 @@
+.chat {
+  &-bubble {
+    @apply rounded-box;
+    min-height: 2.75rem;
+    min-width: 2.75rem;
+
+    /* default */
+    & {
+      @apply bg-neutral text-neutral-content;
+    }
+
+    /* brand colors */
+    &-primary {
+      @apply bg-primary text-primary-content;
+    }
+    &-secondary {
+      @apply bg-secondary text-secondary-content;
+    }
+    &-accent {
+      @apply bg-accent text-accent-content;
+    }
+
+    /* state colors */
+    &-info {
+      @apply bg-info text-info-content;
+    }
+    &-success {
+      @apply bg-success text-success-content;
+    }
+    &-warning {
+      @apply bg-warning text-warning-content;
+    }
+    &-error {
+      @apply bg-error text-error-content;
+    }
+  }
+
+  &-start .chat-bubble {
+    @apply rounded-bl-none;
+    &:before {
+      left: -0.75rem;
+    }
+  }
+
+  &-end .chat-bubble {
+    @apply rounded-br-none;
+    &:before {
+      left: 100%;
+    }
+  }
+}

src/components/unstyled/chat.css

@@ -0,0 +1,62 @@
+.chat {
+  @apply grid grid-cols-2 gap-x-3 py-1;
+  &-image {
+    @apply self-end row-span-2;
+  }
+  &-header {
+    @apply text-sm row-start-1;
+  }
+  &-footer {
+    @apply text-sm row-start-3;
+  }
+  &-bubble {
+    @apply block w-fit px-4 py-2 relative;
+    max-width: 90%;
+    &:before {
+      @apply w-3 h-3 absolute bottom-0;
+      background-color: inherit;
+      content: "";
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      mask-position: center;
+    }
+  }
+  &-start {
+    @apply place-items-start;
+    grid-template-columns: auto 1fr;
+    .chat-header {
+      @apply col-start-2;
+    }
+    .chat-footer {
+      @apply col-start-2;
+    }
+    .chat-image {
+      @apply col-start-1;
+    }
+    .chat-bubble {
+      @apply col-start-2;
+      &:before {
+        mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
+      }
+    }
+  }
+  &-end {
+    @apply place-items-end;
+    grid-template-columns: 1fr auto;
+    .chat-header {
+      @apply col-start-1;
+    }
+    .chat-footer {
+      @apply col-start-1;
+    }
+    .chat-image {
+      @apply col-start-2;
+    }
+    .chat-bubble {
+      @apply col-start-1;
+      &:before {
+        mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
+      }
+    }
+  }
+}

src/docs/src/lib/data.js

@@ -1,8 +1,8 @@
 export let siteStats = {
-  components: "48",
+  components: "49",
   themes: "29",
-  githubStars: "+12,000",
-  npmInstalls: "+1,000,000",
+  githubStars: "+15,000",
+  npmInstalls: "+2,000,000",
 }
 
 export let siteData = {
@@ -391,6 +391,13 @@ export let pages = [
         icon: "",
         badge: "",
       },
+      {
+        name: "Chat bubble",
+        tags: "chat bubble dialog message messenger",
+        href: "/components/chat",
+        icon: "",
+        badge: "New",
+      },
       {
         name: "Collapse",
         tags: "collapse accordion",