From 12105e532c826d6be5555a6c7acfe525afd43828 Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Sat, 9 Dec 2023 15:58:33 +0100
Subject: [PATCH] feat(Toast): rework stories, add missing examples

---
 src/plugins/components/toast/index.ts         |   4 +-
 .../components/toast/toast.component.ts       |   2 +-
 src/plugins/components/toast/toast.doc.mdx    | 180 ++++---
 src/plugins/components/toast/toast.stories.ts | 483 +++++++++++++++++-
 tailwind.config.ts                            |   3 +-
 5 files changed, 587 insertions(+), 85 deletions(-)

diff --git a/src/plugins/components/toast/index.ts b/src/plugins/components/toast/index.ts
index b8de201..dbcb03e 100644
--- a/src/plugins/components/toast/index.ts
+++ b/src/plugins/components/toast/index.ts
@@ -165,12 +165,12 @@ export default plugin.withOptions(
               {},
             //Icon:inner
             [`.${prefix}toast-icon`]: {
-              [`@apply text-${config.color.white.icon.inner.color.light} dark:text-${config.color.white.icon.inner.color.dark}`]:
+              [`@apply text-${config.color.danger.icon.inner.color.light} dark:text-${config.color.danger.icon.inner.color.dark}`]:
                 {},
             },
             //Icon:outer
             [`.${prefix}toast-icon-block`]: {
-              [`@apply bg-${config.color.white.icon.outer.background.light} dark:bg-${config.color.white.icon.outer.background.dark}`]:
+              [`@apply bg-${config.color.danger.icon.outer.background.light} dark:bg-${config.color.danger.icon.outer.background.dark}`]:
                 {},
             },
           },
diff --git a/src/plugins/components/toast/toast.component.ts b/src/plugins/components/toast/toast.component.ts
index 84d2b81..359fa5e 100644
--- a/src/plugins/components/toast/toast.component.ts
+++ b/src/plugins/components/toast/toast.component.ts
@@ -45,7 +45,7 @@ export const Toast = ({
               ${icon}
             `
           : ''}
-        <div>
+        <div class=${[icon && !iconBlock && 'ms-2'].filter(Boolean).join(' ')}>
           <h4 class="nui-toast-title">${title}</h4>
           <p class="nui-toast-subtitle">${text}</p>
         </div>
diff --git a/src/plugins/components/toast/toast.doc.mdx b/src/plugins/components/toast/toast.doc.mdx
index a72ee86..b358e0a 100644
--- a/src/plugins/components/toast/toast.doc.mdx
+++ b/src/plugins/components/toast/toast.doc.mdx
@@ -18,92 +18,71 @@ Toasts allow you to display important information popups users should see.
 
 <br />
 
-### Rounded: none
+### Contrast
 
-Toasts can have different shapes. The following example shows the straight shape.
+Toasts can have different contrasts. The type of contrast defines the main background shade.
 
 <div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={ToastStories.Straight} />
-</div>
-
-<br />
-
-### Rounded: sm
-
-Toasts can have different shapes. The following example shows the rounded shape.
-
-<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={ToastStories.Rounded} />
-</div>
-
-<br />
-
-### Rounded: md
-
-Toasts can have different shapes. The following example shows the smooth shape.
-
-<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={ToastStories.Smooth} />
-</div>
-
-<br />
-
-### Rounded: lg
-
-Toasts can have different shapes. The following example shows the curved shape.
-
-<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={ToastStories.Curved} />
-</div>
-
-<br />
-
-### Color: primary
-
-Toasts can have different colors. The following example shows the primary color.
-
-<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={ToastStories.Primary} />
-</div>
-
-<br />
-
-### Color: info
-
-Toasts can have different colors. The following example shows the info color.
-
-<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={ToastStories.Info} />
-</div>
-
-<br />
-
-### Color: success
-
-Toasts can have different colors. The following example shows the success color.
-
-<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={ToastStories.Success} />
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
+    <div>
+      <Story of={ToastStories.White} />
+    </div>
+    <div>
+      <Story of={ToastStories.Contrast} />
+    </div>
+  </div>
 </div>
 
 <br />
 
-### Color: warning
+### Rounded
 
-Toasts can have different colors. The following example shows the warning color.
+Toasts can have different border radiuses. The following example shows the available variations.
 
 <div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={ToastStories.Warning} />
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
+    <div>
+      <Story of={ToastStories.Straight} />
+    </div>
+    <div>
+      <Story of={ToastStories.Rounded} />
+    </div>
+    <div>
+      <Story of={ToastStories.Smooth} />
+    </div>
+    <div>
+      <Story of={ToastStories.Curved} />
+    </div>
+  </div>
 </div>
 
 <br />
 
-### Color: danger
+### Colors
 
-Toasts can have different colors. The following example shows the danger color.
+Toasts can have different colors. The following example shows the available colors.
 
 <div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={ToastStories.Danger} />
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
+    <div>
+      <Story of={ToastStories.Smooth} />
+    </div>
+    <div>
+      <Story of={ToastStories.Primary} />
+    </div>
+    <div>
+      <Story of={ToastStories.Info} />
+    </div>
+    <div>
+      <Story of={ToastStories.Success} />
+    </div>
+    <div>
+      <Story of={ToastStories.Warning} />
+    </div>
+    <div>
+      <Story of={ToastStories.Danger} />
+    </div>
+  </div>
 </div>
 
 <br />
@@ -113,7 +92,26 @@ Toasts can have different colors. The following example shows the danger color.
 Toasts can be borderless and display a light shadow.
 
 <div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={ToastStories.SlotIconBlockBorderless} />
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
+    <div>
+      <Story of={ToastStories.SlotIconBlockBorderlessDefault} />
+    </div>
+    <div>
+      <Story of={ToastStories.SlotIconBlockBorderlessPrimary} />
+    </div>
+    <div>
+      <Story of={ToastStories.SlotIconBlockBorderlessInfo} />
+    </div>
+    <div>
+      <Story of={ToastStories.SlotIconBlockBorderlessSuccess} />
+    </div>
+    <div>
+      <Story of={ToastStories.SlotIconBlockBorderlessWarning} />
+    </div>
+    <div>
+      <Story of={ToastStories.SlotIconBlockBorderlessDanger} />
+    </div>
+  </div>
 </div>
 
 <br />
@@ -126,7 +124,26 @@ Toasts can be borderless and display a light shadow.
 Toasts have an icon slot that you can use to display an icon.
 
 <div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={ToastStories.SlotIcon} />
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
+    <div>
+      <Story of={ToastStories.SlotIconDefault} />
+    </div>
+    <div>
+      <Story of={ToastStories.SlotIconPrimary} />
+    </div>
+    <div>
+      <Story of={ToastStories.SlotIconInfo} />
+    </div>
+    <div>
+      <Story of={ToastStories.SlotIconSuccess} />
+    </div>
+    <div>
+      <Story of={ToastStories.SlotIconWarning} />
+    </div>
+    <div>
+      <Story of={ToastStories.SlotIconDanger} />
+    </div>
+  </div>
 </div>
 
 <br />
@@ -136,7 +153,26 @@ Toasts have an icon slot that you can use to display an icon.
 Toasts have an icon slot that you can use to display an icon block.
 
 <div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={ToastStories.SlotIconBlock} />
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
+    <div>
+      <Story of={ToastStories.SlotIconBlockDefault} />
+    </div>
+    <div>
+      <Story of={ToastStories.SlotIconBlockPrimary} />
+    </div>
+    <div>
+      <Story of={ToastStories.SlotIconBlockInfo} />
+    </div>
+    <div>
+      <Story of={ToastStories.SlotIconBlockSuccess} />
+    </div>
+    <div>
+      <Story of={ToastStories.SlotIconBlockWarning} />
+    </div>
+    <div>
+      <Story of={ToastStories.SlotIconBlockDanger} />
+    </div>
+  </div>
 </div>
 
 <br />
diff --git a/src/plugins/components/toast/toast.stories.ts b/src/plugins/components/toast/toast.stories.ts
index eaef97e..bf8e4e1 100644
--- a/src/plugins/components/toast/toast.stories.ts
+++ b/src/plugins/components/toast/toast.stories.ts
@@ -62,6 +62,28 @@ export const Solid: Story = {
 }
 // #endregion
 
+// #region Contrast
+export const White: Story = {
+  name: 'Contrast: white',
+  args: {
+    rounded: 'sm',
+    title: 'Toast title',
+    text: 'You need to take some action.',
+    contrast: 'white',
+  },
+}
+
+export const Contrast: Story = {
+  name: 'Contrast: contrast',
+  args: {
+    rounded: 'sm',
+    title: 'Toast title',
+    text: 'You need to take some action.',
+    contrast: 'contrast',
+  },
+}
+// #endregion
+
 // #region Rounded
 export const Straight: Story = {
   name: 'Rounded: none',
@@ -156,8 +178,95 @@ export const Danger: Story = {
 }
 // #endregion
 
-// #region Slot: icon
-export const SlotIcon: Story = {
+// #region Slot: icon (default)
+export const SlotIconDefault: Story = {
+  name: 'Slot: icon',
+  args: {
+    color: 'default',
+    title: 'Default',
+    text: 'You need to take some action.',
+    icon: html`
+      <svg
+        class="nui-toast-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 256 256"
+      >
+        <g fill="currentColor">
+          <path
+            d="M208 192H48a8 8 0 0 1-6.88-12C47.71 168.6 56 139.81 56 104a72 72 0 0 1 144 0c0 35.82 8.3 64.6 14.9 76a8 8 0 0 1-6.9 12Z"
+            opacity=".2"
+          />
+          <path
+            d="M168 224a8 8 0 0 1-8 8H96a8 8 0 1 1 0-16h64a8 8 0 0 1 8 8Zm53.85-32a15.8 15.8 0 0 1-13.85 8H48a16 16 0 0 1-13.8-24.06C39.75 166.38 48 139.34 48 104a80 80 0 1 1 160 0c0 35.33 8.26 62.38 13.81 71.94a15.89 15.89 0 0 1 .03 16.06ZM208 184c-7.73-13.27-16-43.95-16-80a64 64 0 1 0-128 0c0 36.06-8.28 66.74-16 80Z"
+          />
+        </g>
+      </svg>
+    `,
+  },
+}
+// #endregion
+
+// #region Slot: icon (primary)
+export const SlotIconPrimary: Story = {
+  name: 'Slot: icon',
+  args: {
+    color: 'primary',
+    title: 'Primary',
+    text: 'You need to take some action.',
+    icon: html`
+      <svg
+        class="nui-toast-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 256 256"
+      >
+        <g fill="currentColor">
+          <path
+            d="m58.89 154.89l42.22 42.22l-50.63 18.4a7.79 7.79 0 0 1-10-10Zm138.82-4.72l-91.88-91.88A7.79 7.79 0 0 0 93 61.14l-14.9 41l75.82 75.82l41-14.9a7.79 7.79 0 0 0 2.79-12.89Z"
+            opacity=".2"
+          />
+          <path
+            d="M111.49 52.63a15.8 15.8 0 0 0-26 5.77L33 202.78A15.83 15.83 0 0 0 47.76 224a16 16 0 0 0 5.46-1l144.37-52.5a15.8 15.8 0 0 0 5.78-26Zm-8.33 135.21l-35-35l13.16-36.21l58.05 58.05Zm-55 20l14-38.41l24.45 24.45ZM156 168.64L87.36 100l13-35.87l91.43 91.43ZM160 72a37.8 37.8 0 0 1 3.84-15.58C169.14 45.83 179.14 40 192 40c6.7 0 11-2.29 13.65-7.21a22 22 0 0 0 2.35-8.85a8 8 0 0 1 16 .06c0 12.86-8.52 32-32 32c-6.7 0-11 2.29-13.65 7.21a22 22 0 0 0-2.35 8.85a8 8 0 0 1-16-.06Zm-24-32V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0Zm101.66 82.34a8 8 0 1 1-11.32 11.31l-16-16a8 8 0 0 1 11.32-11.32Zm4.87-42.75l-24 8a8 8 0 0 1-5.06-15.18l24-8a8 8 0 0 1 5.06 15.18Z"
+          />
+        </g>
+      </svg>
+    `,
+  },
+}
+// #endregion
+
+// #region Slot: icon (info)
+export const SlotIconInfo: Story = {
+  name: 'Slot: icon',
+  args: {
+    color: 'info',
+    title: 'Info',
+    text: 'You need to take some action.',
+    icon: html`
+      <svg
+        class="nui-toast-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 256 256"
+      >
+        <g fill="currentColor">
+          <path d="M224 60a28 28 0 1 1-28-28a28 28 0 0 1 28 28Z" opacity=".2" />
+          <path
+            d="M216 128v80a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h80a8 8 0 0 1 0 16H48v152h152v-80a8 8 0 0 1 16 0Zm16-68a36 36 0 1 1-36-36a36 36 0 0 1 36 36Zm-16 0a20 20 0 1 0-20 20a20 20 0 0 0 20-20Z"
+          />
+        </g>
+      </svg>
+    `,
+  },
+}
+// #endregion
+
+// #region Slot: icon (success)
+export const SlotIconSuccess: Story = {
   name: 'Slot: icon',
   args: {
     color: 'success',
@@ -182,13 +291,159 @@ export const SlotIcon: Story = {
         </g>
       </svg>
     `,
-    style: 'max-width: 340px;',
   },
 }
 // #endregion
 
-// #region Slot: icon block
-export const SlotIconBlock: Story = {
+// #region Slot: icon (warning)
+export const SlotIconWarning: Story = {
+  name: 'Slot: icon',
+  args: {
+    color: 'warning',
+    title: 'Warning',
+    text: 'You need to take some action.',
+    icon: html`
+      <svg
+        class="nui-toast-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 256 256"
+      >
+        <g fill="currentColor">
+          <path
+            d="M224 91.55v72.9a8 8 0 0 1-2.34 5.66l-51.55 51.55a8 8 0 0 1-5.66 2.34h-72.9a8 8 0 0 1-5.66-2.34l-51.55-51.55a8 8 0 0 1-2.34-5.66v-72.9a8 8 0 0 1 2.34-5.66l51.55-51.55A8 8 0 0 1 91.55 32h72.9a8 8 0 0 1 5.66 2.34l51.55 51.55a8 8 0 0 1 2.34 5.66Z"
+            opacity=".2"
+          />
+          <path
+            d="M120 136V80a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0Zm112-44.45v72.9a15.86 15.86 0 0 1-4.69 11.31l-51.55 51.55a15.86 15.86 0 0 1-11.31 4.69h-72.9a15.86 15.86 0 0 1-11.31-4.69l-51.55-51.55A15.86 15.86 0 0 1 24 164.45v-72.9a15.86 15.86 0 0 1 4.69-11.31l51.55-51.55A15.86 15.86 0 0 1 91.55 24h72.9a15.86 15.86 0 0 1 11.31 4.69l51.55 51.55A15.86 15.86 0 0 1 232 91.55Zm-16 0L164.45 40h-72.9L40 91.55v72.9L91.55 216h72.9L216 164.45ZM128 160a12 12 0 1 0 12 12a12 12 0 0 0-12-12Z"
+          />
+        </g>
+      </svg>
+    `,
+  },
+}
+// #endregion
+
+// #region Slot: icon (danger)
+export const SlotIconDanger: Story = {
+  name: 'Slot: icon',
+  args: {
+    color: 'danger',
+    title: 'Danger',
+    text: 'You need to take some action.',
+    icon: html`
+      <svg
+        class="nui-toast-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 256 256"
+      >
+        <g fill="currentColor">
+          <path
+            d="M224 91.55v72.9a8 8 0 0 1-2.34 5.66l-51.55 51.55a8 8 0 0 1-5.66 2.34h-72.9a8 8 0 0 1-5.66-2.34l-51.55-51.55a8 8 0 0 1-2.34-5.66v-72.9a8 8 0 0 1 2.34-5.66l51.55-51.55A8 8 0 0 1 91.55 32h72.9a8 8 0 0 1 5.66 2.34l51.55 51.55a8 8 0 0 1 2.34 5.66Z"
+            opacity=".2"
+          />
+          <path
+            d="M120 136V80a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0Zm112-44.45v72.9a15.86 15.86 0 0 1-4.69 11.31l-51.55 51.55a15.86 15.86 0 0 1-11.31 4.69h-72.9a15.86 15.86 0 0 1-11.31-4.69l-51.55-51.55A15.86 15.86 0 0 1 24 164.45v-72.9a15.86 15.86 0 0 1 4.69-11.31l51.55-51.55A15.86 15.86 0 0 1 91.55 24h72.9a15.86 15.86 0 0 1 11.31 4.69l51.55 51.55A15.86 15.86 0 0 1 232 91.55Zm-16 0L164.45 40h-72.9L40 91.55v72.9L91.55 216h72.9L216 164.45ZM128 160a12 12 0 1 0 12 12a12 12 0 0 0-12-12Z"
+          />
+        </g>
+      </svg>
+    `,
+  },
+}
+// #endregion
+
+// #region Slot: icon block (default)
+export const SlotIconBlockDefault: Story = {
+  name: 'Slot: icon',
+  args: {
+    color: 'default',
+    title: 'Default',
+    text: 'You need to take some action.',
+    iconBlock: html`
+      <svg
+        class="nui-toast-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 256 256"
+      >
+        <g fill="currentColor">
+          <path
+            d="M208 192H48a8 8 0 0 1-6.88-12C47.71 168.6 56 139.81 56 104a72 72 0 0 1 144 0c0 35.82 8.3 64.6 14.9 76a8 8 0 0 1-6.9 12Z"
+            opacity=".2"
+          />
+          <path
+            d="M168 224a8 8 0 0 1-8 8H96a8 8 0 1 1 0-16h64a8 8 0 0 1 8 8Zm53.85-32a15.8 15.8 0 0 1-13.85 8H48a16 16 0 0 1-13.8-24.06C39.75 166.38 48 139.34 48 104a80 80 0 1 1 160 0c0 35.33 8.26 62.38 13.81 71.94a15.89 15.89 0 0 1 .03 16.06ZM208 184c-7.73-13.27-16-43.95-16-80a64 64 0 1 0-128 0c0 36.06-8.28 66.74-16 80Z"
+          />
+        </g>
+      </svg>
+    `,
+  },
+}
+// #endregion
+
+// #region Slot: icon block (primary)
+export const SlotIconBlockPrimary: Story = {
+  name: 'Slot: icon',
+  args: {
+    color: 'primary',
+    title: 'Primary',
+    text: 'You need to take some action.',
+    iconBlock: html`
+      <svg
+        class="nui-toast-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 256 256"
+      >
+        <g fill="currentColor">
+          <path
+            d="m58.89 154.89l42.22 42.22l-50.63 18.4a7.79 7.79 0 0 1-10-10Zm138.82-4.72l-91.88-91.88A7.79 7.79 0 0 0 93 61.14l-14.9 41l75.82 75.82l41-14.9a7.79 7.79 0 0 0 2.79-12.89Z"
+            opacity=".2"
+          />
+          <path
+            d="M111.49 52.63a15.8 15.8 0 0 0-26 5.77L33 202.78A15.83 15.83 0 0 0 47.76 224a16 16 0 0 0 5.46-1l144.37-52.5a15.8 15.8 0 0 0 5.78-26Zm-8.33 135.21l-35-35l13.16-36.21l58.05 58.05Zm-55 20l14-38.41l24.45 24.45ZM156 168.64L87.36 100l13-35.87l91.43 91.43ZM160 72a37.8 37.8 0 0 1 3.84-15.58C169.14 45.83 179.14 40 192 40c6.7 0 11-2.29 13.65-7.21a22 22 0 0 0 2.35-8.85a8 8 0 0 1 16 .06c0 12.86-8.52 32-32 32c-6.7 0-11 2.29-13.65 7.21a22 22 0 0 0-2.35 8.85a8 8 0 0 1-16-.06Zm-24-32V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0Zm101.66 82.34a8 8 0 1 1-11.32 11.31l-16-16a8 8 0 0 1 11.32-11.32Zm4.87-42.75l-24 8a8 8 0 0 1-5.06-15.18l24-8a8 8 0 0 1 5.06 15.18Z"
+          />
+        </g>
+      </svg>
+    `,
+  },
+}
+// #endregion
+
+// #region Slot: icon block (info)
+export const SlotIconBlockInfo: Story = {
+  name: 'Slot: icon',
+  args: {
+    color: 'info',
+    title: 'Info',
+    text: 'You need to take some action.',
+    iconBlock: html`
+      <svg
+        class="nui-toast-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 256 256"
+      >
+        <g fill="currentColor">
+          <path d="M224 60a28 28 0 1 1-28-28a28 28 0 0 1 28 28Z" opacity=".2" />
+          <path
+            d="M216 128v80a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h80a8 8 0 0 1 0 16H48v152h152v-80a8 8 0 0 1 16 0Zm16-68a36 36 0 1 1-36-36a36 36 0 0 1 36 36Zm-16 0a20 20 0 1 0-20 20a20 20 0 0 0 20-20Z"
+          />
+        </g>
+      </svg>
+    `,
+  },
+}
+// #endregion
+
+// #region Slot: icon block (success)
+export const SlotIconBlockSuccess: Story = {
   name: 'Slot: icon',
   args: {
     color: 'success',
@@ -213,13 +468,162 @@ export const SlotIconBlock: Story = {
         </g>
       </svg>
     `,
-    style: 'max-width: 340px;',
   },
 }
 // #endregion
 
-// #region Slot: icon block borderless
-export const SlotIconBlockBorderless: Story = {
+// #region Slot: icon block (warning)
+export const SlotIconBlockWarning: Story = {
+  name: 'Slot: icon',
+  args: {
+    color: 'warning',
+    title: 'Warning',
+    text: 'You need to take some action.',
+    iconBlock: html`
+      <svg
+        class="nui-toast-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 256 256"
+      >
+        <g fill="currentColor">
+          <path
+            d="M224 91.55v72.9a8 8 0 0 1-2.34 5.66l-51.55 51.55a8 8 0 0 1-5.66 2.34h-72.9a8 8 0 0 1-5.66-2.34l-51.55-51.55a8 8 0 0 1-2.34-5.66v-72.9a8 8 0 0 1 2.34-5.66l51.55-51.55A8 8 0 0 1 91.55 32h72.9a8 8 0 0 1 5.66 2.34l51.55 51.55a8 8 0 0 1 2.34 5.66Z"
+            opacity=".2"
+          />
+          <path
+            d="M120 136V80a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0Zm112-44.45v72.9a15.86 15.86 0 0 1-4.69 11.31l-51.55 51.55a15.86 15.86 0 0 1-11.31 4.69h-72.9a15.86 15.86 0 0 1-11.31-4.69l-51.55-51.55A15.86 15.86 0 0 1 24 164.45v-72.9a15.86 15.86 0 0 1 4.69-11.31l51.55-51.55A15.86 15.86 0 0 1 91.55 24h72.9a15.86 15.86 0 0 1 11.31 4.69l51.55 51.55A15.86 15.86 0 0 1 232 91.55Zm-16 0L164.45 40h-72.9L40 91.55v72.9L91.55 216h72.9L216 164.45ZM128 160a12 12 0 1 0 12 12a12 12 0 0 0-12-12Z"
+          />
+        </g>
+      </svg>
+    `,
+  },
+}
+// #endregion
+
+// #region Slot: icon block (danger)
+export const SlotIconBlockDanger: Story = {
+  name: 'Slot: icon',
+  args: {
+    color: 'danger',
+    title: 'Danger',
+    text: 'You need to take some action.',
+    iconBlock: html`
+      <svg
+        class="nui-toast-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 256 256"
+      >
+        <g fill="currentColor">
+          <path
+            d="M224 91.55v72.9a8 8 0 0 1-2.34 5.66l-51.55 51.55a8 8 0 0 1-5.66 2.34h-72.9a8 8 0 0 1-5.66-2.34l-51.55-51.55a8 8 0 0 1-2.34-5.66v-72.9a8 8 0 0 1 2.34-5.66l51.55-51.55A8 8 0 0 1 91.55 32h72.9a8 8 0 0 1 5.66 2.34l51.55 51.55a8 8 0 0 1 2.34 5.66Z"
+            opacity=".2"
+          />
+          <path
+            d="M120 136V80a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0Zm112-44.45v72.9a15.86 15.86 0 0 1-4.69 11.31l-51.55 51.55a15.86 15.86 0 0 1-11.31 4.69h-72.9a15.86 15.86 0 0 1-11.31-4.69l-51.55-51.55A15.86 15.86 0 0 1 24 164.45v-72.9a15.86 15.86 0 0 1 4.69-11.31l51.55-51.55A15.86 15.86 0 0 1 91.55 24h72.9a15.86 15.86 0 0 1 11.31 4.69l51.55 51.55A15.86 15.86 0 0 1 232 91.55Zm-16 0L164.45 40h-72.9L40 91.55v72.9L91.55 216h72.9L216 164.45ZM128 160a12 12 0 1 0 12 12a12 12 0 0 0-12-12Z"
+          />
+        </g>
+      </svg>
+    `,
+  },
+}
+// #endregion
+
+// #region Slot: icon block borderless (default)
+export const SlotIconBlockBorderlessDefault: Story = {
+  name: 'Slot: icon',
+  args: {
+    color: 'default',
+    title: 'Default',
+    text: 'You need to take some action.',
+    borderless: true,
+    iconBlock: html`
+      <svg
+        class="nui-toast-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 256 256"
+      >
+        <g fill="currentColor">
+          <path
+            d="M208 192H48a8 8 0 0 1-6.88-12C47.71 168.6 56 139.81 56 104a72 72 0 0 1 144 0c0 35.82 8.3 64.6 14.9 76a8 8 0 0 1-6.9 12Z"
+            opacity=".2"
+          />
+          <path
+            d="M168 224a8 8 0 0 1-8 8H96a8 8 0 1 1 0-16h64a8 8 0 0 1 8 8Zm53.85-32a15.8 15.8 0 0 1-13.85 8H48a16 16 0 0 1-13.8-24.06C39.75 166.38 48 139.34 48 104a80 80 0 1 1 160 0c0 35.33 8.26 62.38 13.81 71.94a15.89 15.89 0 0 1 .03 16.06ZM208 184c-7.73-13.27-16-43.95-16-80a64 64 0 1 0-128 0c0 36.06-8.28 66.74-16 80Z"
+          />
+        </g>
+      </svg>
+    `,
+  },
+}
+// #endregion
+
+// #region Slot: icon block borderless (primary)
+export const SlotIconBlockBorderlessPrimary: Story = {
+  name: 'Slot: icon',
+  args: {
+    color: 'primary',
+    title: 'Primary',
+    text: 'You need to take some action.',
+    borderless: true,
+    iconBlock: html`
+      <svg
+        class="nui-toast-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 256 256"
+      >
+        <g fill="currentColor">
+          <path
+            d="m58.89 154.89l42.22 42.22l-50.63 18.4a7.79 7.79 0 0 1-10-10Zm138.82-4.72l-91.88-91.88A7.79 7.79 0 0 0 93 61.14l-14.9 41l75.82 75.82l41-14.9a7.79 7.79 0 0 0 2.79-12.89Z"
+            opacity=".2"
+          />
+          <path
+            d="M111.49 52.63a15.8 15.8 0 0 0-26 5.77L33 202.78A15.83 15.83 0 0 0 47.76 224a16 16 0 0 0 5.46-1l144.37-52.5a15.8 15.8 0 0 0 5.78-26Zm-8.33 135.21l-35-35l13.16-36.21l58.05 58.05Zm-55 20l14-38.41l24.45 24.45ZM156 168.64L87.36 100l13-35.87l91.43 91.43ZM160 72a37.8 37.8 0 0 1 3.84-15.58C169.14 45.83 179.14 40 192 40c6.7 0 11-2.29 13.65-7.21a22 22 0 0 0 2.35-8.85a8 8 0 0 1 16 .06c0 12.86-8.52 32-32 32c-6.7 0-11 2.29-13.65 7.21a22 22 0 0 0-2.35 8.85a8 8 0 0 1-16-.06Zm-24-32V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0Zm101.66 82.34a8 8 0 1 1-11.32 11.31l-16-16a8 8 0 0 1 11.32-11.32Zm4.87-42.75l-24 8a8 8 0 0 1-5.06-15.18l24-8a8 8 0 0 1 5.06 15.18Z"
+          />
+        </g>
+      </svg>
+    `,
+  },
+}
+// #endregion
+
+// #region Slot: icon block borderless (info)
+export const SlotIconBlockBorderlessInfo: Story = {
+  name: 'Slot: icon',
+  args: {
+    color: 'info',
+    title: 'Info',
+    text: 'You need to take some action.',
+    borderless: true,
+    iconBlock: html`
+      <svg
+        class="nui-toast-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 256 256"
+      >
+        <g fill="currentColor">
+          <path d="M224 60a28 28 0 1 1-28-28a28 28 0 0 1 28 28Z" opacity=".2" />
+          <path
+            d="M216 128v80a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h80a8 8 0 0 1 0 16H48v152h152v-80a8 8 0 0 1 16 0Zm16-68a36 36 0 1 1-36-36a36 36 0 0 1 36 36Zm-16 0a20 20 0 1 0-20 20a20 20 0 0 0 20-20Z"
+          />
+        </g>
+      </svg>
+    `,
+  },
+}
+// #endregion
+
+// #region Slot: icon block borderless (success)
+export const SlotIconBlockBorderlessSuccess: Story = {
   name: 'Slot: icon',
   args: {
     color: 'success',
@@ -245,7 +649,68 @@ export const SlotIconBlockBorderless: Story = {
         </g>
       </svg>
     `,
-    style: 'max-width: 340px;',
+  },
+}
+// #endregion
+
+// #region Slot: icon block borderless (warning)
+export const SlotIconBlockBorderlessWarning: Story = {
+  name: 'Slot: icon',
+  args: {
+    color: 'warning',
+    title: 'Warning',
+    text: 'You need to take some action.',
+    borderless: true,
+    iconBlock: html`
+      <svg
+        class="nui-toast-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 256 256"
+      >
+        <g fill="currentColor">
+          <path
+            d="M224 91.55v72.9a8 8 0 0 1-2.34 5.66l-51.55 51.55a8 8 0 0 1-5.66 2.34h-72.9a8 8 0 0 1-5.66-2.34l-51.55-51.55a8 8 0 0 1-2.34-5.66v-72.9a8 8 0 0 1 2.34-5.66l51.55-51.55A8 8 0 0 1 91.55 32h72.9a8 8 0 0 1 5.66 2.34l51.55 51.55a8 8 0 0 1 2.34 5.66Z"
+            opacity=".2"
+          />
+          <path
+            d="M120 136V80a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0Zm112-44.45v72.9a15.86 15.86 0 0 1-4.69 11.31l-51.55 51.55a15.86 15.86 0 0 1-11.31 4.69h-72.9a15.86 15.86 0 0 1-11.31-4.69l-51.55-51.55A15.86 15.86 0 0 1 24 164.45v-72.9a15.86 15.86 0 0 1 4.69-11.31l51.55-51.55A15.86 15.86 0 0 1 91.55 24h72.9a15.86 15.86 0 0 1 11.31 4.69l51.55 51.55A15.86 15.86 0 0 1 232 91.55Zm-16 0L164.45 40h-72.9L40 91.55v72.9L91.55 216h72.9L216 164.45ZM128 160a12 12 0 1 0 12 12a12 12 0 0 0-12-12Z"
+          />
+        </g>
+      </svg>
+    `,
+  },
+}
+// #endregion
+
+// #region Slot: icon block borderless (danger)
+export const SlotIconBlockBorderlessDanger: Story = {
+  name: 'Slot: icon',
+  args: {
+    color: 'danger',
+    title: 'Danger',
+    text: 'You need to take some action.',
+    borderless: true,
+    iconBlock: html`
+      <svg
+        class="nui-toast-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 256 256"
+      >
+        <g fill="currentColor">
+          <path
+            d="M224 91.55v72.9a8 8 0 0 1-2.34 5.66l-51.55 51.55a8 8 0 0 1-5.66 2.34h-72.9a8 8 0 0 1-5.66-2.34l-51.55-51.55a8 8 0 0 1-2.34-5.66v-72.9a8 8 0 0 1 2.34-5.66l51.55-51.55A8 8 0 0 1 91.55 32h72.9a8 8 0 0 1 5.66 2.34l51.55 51.55a8 8 0 0 1 2.34 5.66Z"
+            opacity=".2"
+          />
+          <path
+            d="M120 136V80a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0Zm112-44.45v72.9a15.86 15.86 0 0 1-4.69 11.31l-51.55 51.55a15.86 15.86 0 0 1-11.31 4.69h-72.9a15.86 15.86 0 0 1-11.31-4.69l-51.55-51.55A15.86 15.86 0 0 1 24 164.45v-72.9a15.86 15.86 0 0 1 4.69-11.31l51.55-51.55A15.86 15.86 0 0 1 91.55 24h72.9a15.86 15.86 0 0 1 11.31 4.69l51.55 51.55A15.86 15.86 0 0 1 232 91.55Zm-16 0L164.45 40h-72.9L40 91.55v72.9L91.55 216h72.9L216 164.45ZM128 160a12 12 0 1 0 12 12a12 12 0 0 0-12-12Z"
+          />
+        </g>
+      </svg>
+    `,
   },
 }
 // #endregion
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 068e798..2486f56 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -3,10 +3,11 @@ import { withShurikenUI } from './src'
 export default withShurikenUI({
   content: [
     // './.storybook/*.ts',
+    './src/**/*.index.ts',
     './src/**/*.component.ts',
     './src/**/*.variants.ts',
     './src/**/*.stories.ts',
-    './src/**/*.docs.mdx',
+    './src/**/*.doc.mdx',
   ],
   theme: {
     fontFamily: {