Add message and toast

assets/styles/presets/aura/components.css

@@ -64,6 +64,10 @@
 @import './tabs';
 @import './toolbar';
 
+/* Message */
+@import './message';
+@import './toast';
+
 /* Misc */
 @import './avatar';
 @import './badge';

assets/styles/presets/aura/message.css

@@ -0,0 +1,119 @@
+.p-message {
+    @apply rounded-md outline outline-1
+}
+
+.p-message-content {
+    @apply flex items-center px-3 py-2 gap-2 h-full
+}
+
+.p-message-icon {
+    @apply flex-shrink-0
+}
+
+.p-message-close-button {
+    @apply flex items-center justify-center flex-shrink-0 ms-auto overflow-hidden relative cursor-pointer select-none
+        w-7 h-7 rounded-full bg-transparent transition-colors duration-200 text-inherit p-0 border-none 
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
+}
+
+.p-message-close-icon {
+    @apply text-base w-4 h-4 
+}
+
+.p-message-info {
+    @apply bg-blue-50/95 outline-blue-200 text-blue-600 
+        dark:bg-blue-500/15 dark:outline-blue-700/35 dark:text-blue-500 
+        shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]
+}
+
+.p-message-info .p-message-close-button {
+    @apply hover:bg-blue-100 focus-visible:outline-blue-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-blue-500
+}
+
+.p-message-success {
+    @apply bg-green-50/95 outline-green-200 text-green-600 
+        dark:bg-green-500/15 dark:outline-green-700/35 dark:text-green-500 
+        shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]
+}
+
+.p-message-success .p-message-close-button {
+    @apply hover:bg-green-100 focus-visible:outline-green-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-green-500
+}
+
+.p-message-warn {
+    @apply bg-yellow-50/95 outline-yellow-200 text-yellow-600 
+        dark:bg-yellow-500/15 dark:outline-yellow-700/35 dark:text-yellow-500 
+        shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]
+}
+
+.p-message-warn .p-message-close-button {
+    @apply hover:bg-yellow-100 focus-visible:outline-yellow-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500
+}
+
+.p-message-error {
+    @apply bg-red-50/95 outline-red-200 text-red-600 
+        dark:bg-red-500/15 dark:outline-red-700/35 dark:text-red-500 
+        shadow-[0px_4px_8px_0px_theme(colors.red.500/0.04)]
+}
+
+.p-message-error .p-message-close-button {
+    @apply hover:bg-red-100 focus-visible:outline-red-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-red-500
+}
+
+.p-message-secondary {
+    @apply bg-surface-100 outline-surface-200 text-surface-600 
+        dark:bg-surface-800 dark:outline-surface-700 dark:text-surface-300 
+        shadow-[0px_4px_8px_0px_theme(colors.surface.500/0.04)]
+}
+
+.p-message-secondary .p-message-close-button {
+    @apply hover:bg-surface-200 focus-visible:outline-surface-600
+        dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300
+}
+
+.p-message-contrast {
+    @apply bg-surface-900 outline-surface-950 text-surface-50 
+        dark:bg-surface-0 dark:outline-surface-100 dark:text-surface-950 
+        shadow-[0px_4px_8px_0px_theme(colors.surface.950/0.04)]
+}
+
+.p-message-contrast .p-message-close-button {
+    @apply hover:bg-surface-800 focus-visible:outline-surface-50
+        dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950
+}
+
+.p-message-text {
+    @apply text-base font-medium
+}
+
+.p-message-icon {
+    @apply text-lg w-[1.125rem] h-[1.125rem]
+}
+
+.p-message-enter-from {
+    @apply opacity-0
+}
+
+.p-message-enter-active {
+    @apply transition-opacity duration-300
+}
+
+.p-message.p-message-leave-from {
+    @apply max-h-[1000px]
+}
+
+.p-message.p-message-leave-to {
+    @apply max-h-0 opacity-0 m-0
+}
+
+.p-message-leave-active {
+    @apply overflow-hidden [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin0.3s]
+}
+
+.p-message-leave-active .p-message-close-button {
+    @apply opacity-0
+}

assets/styles/presets/aura/toast.css

@@ -0,0 +1,168 @@
+.p-toast {
+    @apply w-96 rounded-md whitespace-pre-line break-words
+}
+
+.p-toast-message {
+    @apply mb-4
+}
+
+.p-toast-message-icon {
+    @apply flex-shrink-0 text-lg w-[1.125rem] h-[1.125rem]
+}
+
+.p-toast-message-content {
+    @apply flex items-start p-3 gap-2
+}
+
+.p-toast-message-text {
+    @apply flex-auto flex flex-col gap-2
+}
+
+.p-toast-summary {
+    @apply font-medium text-base
+}
+
+.p-toast-detail {
+    @apply font-medium text-sm
+}
+
+.p-toast-close-button {
+    @apply flex items-center justify-center overflow-hidden relative cursor-pointer bg-transparent select-none
+        transition-colors duration-200 text-inherit w-7 h-7 rounded-full -mt-[25%] -right-1/4 p-0 border-none 
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
+}
+
+.p-toast-message-info,
+.p-toast-message-success,
+.p-toast-message-warn,
+.p-toast-message-error,
+.p-toast-message-secondary,
+.p-toast-message-contrast {
+    @apply border backdrop-blur-sm dark:backdrop-blur-md rounded-md
+}
+
+.p-toast-close-icon {
+    @apply text-base w-4 h-4
+}
+
+.p-toast-message-info {
+    @apply bg-blue-50/95 border-blue-200 text-blue-600
+        dark:bg-blue-500/15 dark:border-blue-700/35 dark:text-blue-500
+        shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]
+}
+
+.p-toast-message-info .p-toast-detail {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-toast-message-info .p-toast-close-button {
+    @apply hover:bg-blue-100 focus-visible:outline-blue-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-blue-500
+}
+
+.p-toast-message-success {
+    @apply bg-green-50/95 border-green-200 text-green-600
+        dark:bg-green-500/15 dark:border-green-700/35 dark:text-green-500
+        shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]
+}
+
+.p-toast-message-success .p-toast-detail {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-toast-message-success .p-toast-close-button {
+    @apply hover:bg-green-100 focus-visible:outline-green-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-green-500
+}
+
+.p-toast-message-warn {
+    @apply bg-yellow-50/95 border-yellow-200 text-yellow-600
+        dark:bg-yellow-500/15 dark:border-yellow-700/35 dark:text-yellow-500
+        shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]
+}
+
+.p-toast-message-warn .p-toast-detail {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-toast-message-warn .p-toast-close-button {
+    @apply hover:bg-yellow-100 focus-visible:outline-yellow-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500
+}
+
+.p-toast-message-error {
+    @apply bg-red-50/95 border-red-200 text-red-600
+        dark:bg-red-500/15 dark:border-red-700/35 dark:text-red-500
+        shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]
+}
+
+.p-toast-message-error .p-toast-detail {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-toast-message-error .p-toast-close-button {
+    @apply hover:bg-red-100 focus-visible:outline-red-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-red-500
+}
+
+.p-toast-message-secondary {
+    @apply bg-surface-100 border-surface-200 text-surface-600
+        dark:bg-surface-800 dark:border-surface-700 dark:text-surface-300
+        shadow-[0px_4px_8px_0px_theme(colors.surface.500/0.04)]
+}
+
+.p-toast-message-secondary .p-toast-detail {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-toast-message-secondary .p-toast-close-button {
+    @apply hover:bg-surface-200 focus-visible:outline-surface-600
+        dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300
+}
+
+.p-toast-message-contrast {
+    @apply bg-surface-900 border-surface-950 text-surface-50
+        dark:bg-surface-0 dark:border-surface-100 dark:text-surface-950
+        shadow-[0px_4px_8px_0px_theme(colors.surface.950/0.04)]
+}
+
+.p-toast-message-contrast .p-toast-detail {
+    @apply text-surface-0 dark:text-surface-950
+}
+
+.p-toast-message-contrast .p-toast-close-button {
+    @apply hover:bg-surface-800 focus-visible:outline-surface-50
+        dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950
+}
+
+.p-toast-top-center {
+    @apply -translate-x-1/2;
+}
+
+.p-toast-bottom-center {
+    @apply -translate-x-1/2;
+}
+
+.p-toast-center {
+    @apply min-w-[20vw] -translate-x-1/2 -translate-y-1/2
+}
+
+.p-toast-message-enter-from {
+    @apply opacity-0 translate-y-1/2
+}
+
+.p-toast-message-leave-from {
+    @apply max-h-[1000px]
+}
+
+.p-toast .p-toast-message.p-toast-message-leave-to {
+    @apply max-h-0 opacity-0 mb-0 overflow-hidden
+}
+
+.p-toast-message-enter-active {
+    @apply [transition:transform_0.3s,opacity_0.3s]
+}
+
+.p-toast-message-leave-active {
+    @apply [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin-bottom_0.3s]
+}