@manafishrov/ui 1.3.12 → 1.4.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package",
   "name": "@manafishrov/ui",
-  "version": "1.3.12",
+  "version": "1.4.1",
   "description": "Styled component library for Manafish interfaces ",
   "license": "AGPL-3.0-or-later",
   "repository": {

package/src/components/toaster/Toaster.tsx

@@ -8,11 +8,11 @@ import { type Component, type Accessor, Show } from 'solid-js';
 import { Portal } from 'solid-js/web';
 import { cn } from 'tailwind-variants';
 import CheckCircleIcon from '~icons/material-symbols/check-circle';
-import CloseIcon from '~icons/material-symbols/close';
 import ErrorIcon from '~icons/material-symbols/error';
 import InfoIcon from '~icons/material-symbols/info';
 import WarningIcon from '~icons/material-symbols/warning';
 
+import { buttonVariants } from '@/components/Button';
 import { Spinner } from '@/components/Spinner';
 
 export const toast = createToaster({
@@ -21,44 +21,51 @@ export const toast = createToaster({
   gap: 16,
 });
 
+const ToastIcon: Component<{ type: ToastOptions['type'] }> = (props) => (
+  <>
+    {props.type === 'success' && (
+      <CheckCircleIcon class={cn('size-4 shrink-0')} aria-hidden='true' />
+    )}
+    {props.type === 'info' && <InfoIcon class={cn('size-4 shrink-0')} aria-hidden='true' />}
+    {props.type === 'warning' && <WarningIcon class={cn('size-4 shrink-0')} aria-hidden='true' />}
+    {props.type === 'error' && <ErrorIcon class={cn('size-4 shrink-0')} aria-hidden='true' />}
+    {props.type === 'loading' && <Spinner class={cn('size-4 text-muted-foreground')} />}
+  </>
+);
+
 const ToastItem: Component<{ toast: Accessor<ToastOptions> }> = (props) => (
   <Toast.Root
     class={cn(
-      'group gap-3 p-4 pr-10 shadow-lg min-w-72 pointer-events-auto relative flex w-full items-center rounded-lg border bg-popover',
-      'data-[state=open]:sm:slide-in-from-bottom-full data-[state=open]:animate-in data-[state=open]:slide-in-from-top-full',
+      'group gap-2 px-4 py-3.5 shadow-lg min-w-80 ease-in-out pointer-events-auto relative flex w-full items-center rounded-xl border bg-popover',
       'border-border text-popover-foreground',
     )}
   >
-    <Show when={props.toast().type === 'success'}>
-      <CheckCircleIcon class={cn('size-5 text-green-500 shrink-0')} aria-hidden='true' />
-    </Show>
-    <Show when={props.toast().type === 'info'}>
-      <InfoIcon class={cn('size-5 text-blue-500 shrink-0')} aria-hidden='true' />
-    </Show>
-    <Show when={props.toast().type === 'warning'}>
-      <WarningIcon class={cn('size-5 text-amber-500 shrink-0')} aria-hidden='true' />
-    </Show>
-    <Show when={props.toast().type === 'error'}>
-      <ErrorIcon class={cn('size-5 text-red-500 shrink-0')} aria-hidden='true' />
-    </Show>
-    <Show when={props.toast().type === 'loading'}>
-      <Spinner class={cn('size-5 text-muted-foreground')} />
-    </Show>
-    <div class='gap-1 grid'>
+    <ToastIcon type={props.toast().type} />
+    <div class='min-w-0 gap-1 grid flex-1'>
       <Show when={props.toast().title}>
         <Toast.Title class='text-sm font-semibold tracking-tight leading-none'>
           {props.toast().title}
         </Toast.Title>
       </Show>
-      <Show when={props.toast().description} fallback={<div aria-hidden='true' class='h-5' />}>
-        <Toast.Description class='text-sm opacity-90'>
+      <Show when={props.toast().description}>
+        <Toast.Description class='text-sm text-muted-foreground'>
           {props.toast().description}
         </Toast.Description>
       </Show>
     </div>
-    <Toast.CloseTrigger class='top-2 right-2 p-1 absolute cursor-pointer rounded-md text-foreground/50 opacity-0 transition-opacity group-hover:opacity-100 hover:text-foreground focus:opacity-100 focus:outline-none'>
-      <CloseIcon class='size-4' />
-    </Toast.CloseTrigger>
+    <Show when={props.toast().action}>
+      {(action) => (
+        <Toast.ActionTrigger
+          class={buttonVariants({
+            class: 'shrink-0',
+            size: 'sm',
+            variant: 'secondary',
+          })}
+        >
+          {action().label}
+        </Toast.ActionTrigger>
+      )}
+    </Show>
   </Toast.Root>
 );
 

package/src/components/toaster/toaster.css

@@ -4,7 +4,7 @@
   z-index: var(--z-index);
   height: var(--height);
   opacity: var(--opacity);
-  will-change: translate, opacity, scale, height;
+  will-change: translate, opacity, scale;
   transition:
     translate 400ms,
     scale 400ms,
@@ -12,12 +12,12 @@
     height 400ms,
     box-shadow 200ms;
   transition-timing-function: cubic-bezier(0.21, 1.02, 0.73, 1);
-}
 
-[data-scope='toast'][data-part='root'][data-state='closed'] {
-  transition:
-    translate 400ms,
-    scale 400ms,
-    opacity 200ms;
-  transition-timing-function: cubic-bezier(0.06, 0.71, 0.55, 1);
+  &[data-state='closed'] {
+    transition:
+      translate 400ms,
+      scale 400ms,
+      opacity 200ms;
+    transition-timing-function: cubic-bezier(0.06, 0.71, 0.55, 1);
+  }
 }