diff --git a/README.md b/README.md
index f6ee1692fa..26c61a4179 100644
--- a/README.md
+++ b/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
diff --git a/src/components/styled/chat-bubble.css b/src/components/styled/chat-bubble.css
deleted file mode 100644
index b77dbd63d2..0000000000
--- a/src/components/styled/chat-bubble.css
+++ /dev/null
@@ -1,115 +0,0 @@
-.bubble {
- /* default */
- & {
- --bubble-bg: hsl(var(--n));
- @apply text-neutral-content;
- }
-
- /* brand colors */
- &-primary {
- --bubble-bg: hsl(var(--p));
- @apply text-primary-content;
- }
- &-secondary {
- --bubble-bg: hsl(var(--s));
- @apply text-secondary-content;
- }
- &-accent {
- --bubble-bg: hsl(var(--a));
- @apply text-accent-content;
- }
-
- /* state colors */
- &-info {
- --bubble-bg: hsl(var(--in));
- @apply text-info-content;
- }
- &-success {
- --bubble-bg: hsl(var(--su));
- @apply text-success-content;
- }
- &-warning {
- --bubble-bg: hsl(var(--wa));
- @apply text-warning-content;
- }
- &-error {
- --bubble-bg: hsl(var(--er));
- @apply text-error-content;
- }
-
- &-left {
- [dir="ltr"] & {
- @apply mr-auto rounded-r-xl;
- margin-left: var(--bubble-radius, 0.75rem);
-
- &:before {
- --circle-pos: top left;
- left: calc(var(--bubble-radius, 0.75rem) * -1);
- background-image: var(--tab-corner-bg);
- }
- }
- [dir="rtl"] & {
- @apply ml-auto rounded-l-xl;
- margin-right: var(--bubble-radius, 0.75rem);
-
- &:after {
- --circle-pos: top right;
- right: calc(var(--bubble-radius, 0.75rem) * -1);
- background-image: var(--tab-corner-bg);
- }
- }
- }
-
- &-right {
- [dir="ltr"] & {
- @apply ml-auto rounded-l-xl;
- margin-right: var(--bubble-radius, 0.75rem);
-
- &:after {
- right: calc(var(--bubble-radius, 0.75rem) * -1);
- --circle-pos: top right;
- background-image: var(--tab-corner-bg);
- }
- }
- [dir="rtl"] & {
- @apply mr-auto rounded-r-xl;
- margin-left: var(--bubble-radius, 0.75rem);
-
- &:before {
- left: calc(var(--bubble-radius, 0.75rem) * -1);
- --circle-pos: top left;
- background-image: var(--tab-corner-bg);
- }
- }
- }
-
- &-topbar {
- @apply flex items-center;
- @apply mb-1;
-
- &-author {
- @apply font-medium;
- }
- &-time {
- @apply text-xs italic;
- @apply mx-2;
- }
- &-action {
- [dir="ltr"] & {
- @apply ml-auto;
- }
- [dir="rtl"] & {
- @apply mr-auto;
- }
- }
- }
-
- &-action {
- [dir="ltr"] & {
- @apply ml-auto;
- }
- [dir="rtl"] & {
- @apply mr-auto;
- }
- }
-}
diff --git a/src/components/styled/chat.css b/src/components/styled/chat.css
new file mode 100644
index 0000000000..4e7ef7a2ed
--- /dev/null
+++ b/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%;
+ }
+ }
+}
diff --git a/src/components/unstyled/chat-bubble.css b/src/components/unstyled/chat-bubble.css
deleted file mode 100644
index f65f794a11..0000000000
--- a/src/components/unstyled/chat-bubble.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.bubble {
- --bubble-radius: 0.75rem;
-
- @apply inline-block;
- @apply px-4 py-2 my-2 rounded-t-xl relative;
- @apply font-light;
- background-color: var(--bubble-bg);
- max-width: 60%;
-
- &:before,
- &:after {
- content: "";
- position: absolute;
- width: var(--bubble-radius, 0.75rem);
- height: var(--bubble-radius, 0.75rem);
- bottom: 0;
- --tab-corner-bg: radial-gradient(circle at var(--circle-pos), transparent 68%, transparent 68%, transparent calc(68% + 1px), var(--bubble-bg) 68%);
- }
-}
diff --git a/src/components/unstyled/chat.css b/src/components/unstyled/chat.css
new file mode 100644
index 0000000000..856128a5bb
--- /dev/null
+++ b/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");
+ }
+ }
+ }
+}
diff --git a/src/docs/src/lib/data.js b/src/docs/src/lib/data.js
index e08a522e41..80270beeea 100644
--- a/src/docs/src/lib/data.js
+++ b/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",
diff --git a/src/docs/src/routes/components/chat-bubble.svelte.md b/src/docs/src/routes/components/chat-bubble.svelte.md
deleted file mode 100644
index 0adefef7cc..0000000000
--- a/src/docs/src/routes/components/chat-bubble.svelte.md
+++ /dev/null
@@ -1,270 +0,0 @@
----
-title: Chat bubble
-desc: It's a awesome chat bubble!
-published: true
----
-
-
-
-
{ -`--` -}Thank you 😊-
See you soon 👋Thank you 😊-
See you soon 👋
{ -`--` -}Thank you 😊-
See you soon 👋Thank you 😊-
See you soon 👋Thank you 😊-
See you soon 👋
{ -`--` -}Thank you 😊-
See you soon 👋Thank you 😊-
See you soon 👋Thank you 😊-
See you soon 👋Thank you 😊-
See you soon 👋
{ -`--` -}-- - Thank you 😊
See you soon 👋 --- - Thank you 😊
See you soon 👋 -
{ -`--` -}-- - Thank you 😊
See you soon 👋 --- - Thank you 😊
See you soon 👋 -
{ -`--` -}-- - Thank you 😊
See you soon 👋 --- - Thank you 😊
See you soon 👋 -
{ -`--` -}Thank you 😊-
See you soon 👋Thank you 😊-
See you soon 👋
{ +`+++It's over Anakin,+
I have the high ground.+` +}You underestimate my power!+
{ +`+++It's over Anakin,+
I have the high ground.+` +}You underestimate my power!+
{ +`++++++ ++It was said that you would, destroy the Sith, not join them.++++++ ++It was you who would bring balance to the Force++` +}+++ ++Not leave it in Darkness+
{ +`++++++ ++It was said that you would, destroy the Sith, not join them.++++++ ++It was you who would bring balance to the Force++` +}+++ ++Not leave it in Darkness+
{ +`++++++ +++ Obi-Wan Kenobi + ++You were the Chosen One!+ ++` +}+++ +++ Anakin + ++I hate you!+ +
{ +`++++++ +++ Obi-Wan Kenobi + ++You were the Chosen One!++ Delivered +++` +}+++ +++ Anakin + ++I hate you!++ Seen at 12:46 ++
{ +`++++ Obi-Wan Kenobi + ++You were the Chosen One!+ ++` +}+ Obi-Wan Kenobi + ++I loved you.+ +
{ +`++++++ +++ Obi-Wan Kenobi + ++You were the Chosen One!++ Seen +++` +}+++ +++ Obi-Wan Kenobi + ++I loved you.++ Delivered ++
{ +`+++What kind of nonsense is this+++Put me on the Council and not make me a Master!??+++That's never been done in the history of the Jedi. It's insulting!+++Calm down, Anakin.+++You have been given a great honor.+++To be on the Council at your age.++` +}It's never happened before.+
{ +`+++What kind of nonsense is this+++Put me on the Council and not make me a Master!??+++That's never been done in the history of the Jedi. It's insulting!+++Calm down, Anakin.+++You have been given a great honor.+++To be on the Council at your age.++` +}It's never happened before.+