@manafishrov/ui 1.3.11 → 1.4.0

package/README.md

@@ -38,4 +38,4 @@ function App() {
 
 ## License
 
-AGPL-3.0-or-later
+This project is licensed under the GNU Affero General Public License v3.0 or later - see the [LICENSE](LICENSE) file for details.

package/dist/components/Tooltip.js

@@ -15,7 +15,7 @@ const m = t.Root, f = t.Trigger, g = t.Context, u = (o) => {
   return a(t.Content, s({
     "data-slot": "tooltip-content",
     get class() {
-      return i("px-3 py-1.5 text-xs shadow-md relative isolate transform-gpu overflow-visible rounded-md bg-foreground text-background will-change-transform [--arrow-background:var(--foreground)]", "origin-(--transform-origin)", "data-[state=open]:animate-in data-[state=open]:fade-in-0", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0", "data-[placement^=bottom]:slide-in-from-top-2", "data-[placement^=left]:slide-in-from-right-2", "data-[placement^=right]:slide-in-from-left-2", "data-[placement^=top]:slide-in-from-bottom-2", r.class);
+      return i("px-3 py-1.5 text-xs shadow-md relative isolate z-50 transform-gpu overflow-visible rounded-md bg-foreground text-background will-change-transform [--arrow-background:var(--foreground)]", "origin-(--transform-origin)", "data-[state=open]:animate-in data-[state=open]:fade-in-0", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0", "data-[placement^=bottom]:slide-in-from-top-2", "data-[placement^=left]:slide-in-from-right-2", "data-[placement^=right]:slide-in-from-left-2", "data-[placement^=top]:slide-in-from-bottom-2", r.class);
     }
   }, e));
 }, w = (o) => {

package/dist/components/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../src/components/Tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@ark-ui/solid/tooltip';\nimport { splitProps, type Component } from 'solid-js';\nimport { cn } from 'tailwind-variants';\n\nexport const Tooltip = TooltipPrimitive.Root;\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\nexport const TooltipContext = TooltipPrimitive.Context;\n\nexport const TooltipPositioner: Component<TooltipPrimitive.PositionerProps> = (props) => {\n  const [local, others] = splitProps(props, ['class']);\n  return (\n    <TooltipPrimitive.Positioner\n      data-slot='tooltip-positioner'\n      class={cn('isolate z-50', local.class)}\n      {...others}\n    />\n  );\n};\n\nexport const TooltipContent: Component<TooltipPrimitive.ContentProps> = (props) => {\n  const [local, others] = splitProps(props, ['class']);\n\n  return (\n    <TooltipPrimitive.Content\n      data-slot='tooltip-content'\n      class={cn(\n        'px-3 py-1.5 text-xs shadow-md relative isolate transform-gpu overflow-visible rounded-md bg-foreground text-background will-change-transform [--arrow-background:var(--foreground)]',\n        'origin-(--transform-origin)',\n        'data-[state=open]:animate-in data-[state=open]:fade-in-0',\n        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',\n        'data-[placement^=bottom]:slide-in-from-top-2',\n        'data-[placement^=left]:slide-in-from-right-2',\n        'data-[placement^=right]:slide-in-from-left-2',\n        'data-[placement^=top]:slide-in-from-bottom-2',\n        local.class,\n      )}\n      {...others}\n    />\n  );\n};\n\nexport const TooltipArrow: Component<TooltipPrimitive.ArrowProps> = (props) => {\n  const [local, others] = splitProps(props, ['class']);\n\n  return (\n    <TooltipPrimitive.Arrow\n      data-slot='tooltip-arrow'\n      class={cn('z-50 [--arrow-offset:-6px]! [--arrow-size:10px]', local.class)}\n      {...others}\n    >\n      <TooltipPrimitive.ArrowTip class='rounded-[2px]' />\n    </TooltipPrimitive.Arrow>\n  );\n};\n"],"names":["Tooltip","TooltipPrimitive","Root","TooltipTrigger","Trigger","TooltipContext","Context","TooltipPositioner","props","local","others","splitProps","_$createComponent","Positioner","_$mergeProps","cn","class","TooltipContent","Content","TooltipArrow","Arrow","children","ArrowTip"],"mappings":";;;;AAIO,MAAMA,IAAUC,EAAiBC,MAC3BC,IAAiBF,EAAiBG,SAClCC,IAAiBJ,EAAiBK,SAElCC,IAAkEC,CAAAA,MAAU;AACvF,QAAM,CAACC,GAAOC,CAAM,IAAIC,EAAWH,GAAO,CAAC,OAAO,CAAC;AACnD,SAAAI,EACGX,EAAiBY,YAAUC,EAAA;AAAA,IAAA,aAAA;AAAA,IAAA,IAAA,QAAA;AAAA,aAEnBC,EAAG,gBAAgBN,EAAMO,KAAK;AAAA,IAAC;AAAA,EAAA,GAClCN,CAAM,CAAA;AAGhB,GAEaO,IAA4DT,CAAAA,MAAU;AACjF,QAAM,CAACC,GAAOC,CAAM,IAAIC,EAAWH,GAAO,CAAC,OAAO,CAAC;AAEnD,SAAAI,EACGX,EAAiBiB,SAAOJ,EAAA;AAAA,IAAA,aAAA;AAAA,IAAA,IAAA,QAAA;AAAA,aAEhBC,EACL,uLACA,+BACA,4DACA,kEACA,gDACA,gDACA,gDACA,gDACAN,EAAMO,KACR;AAAA,IAAC;AAAA,EAAA,GACGN,CAAM,CAAA;AAGhB,GAEaS,IAAwDX,CAAAA,MAAU;AAC7E,QAAM,CAACC,GAAOC,CAAM,IAAIC,EAAWH,GAAO,CAAC,OAAO,CAAC;AAEnD,SAAAI,EACGX,EAAiBmB,OAAKN,EAAA;AAAA,IAAA,aAAA;AAAA,IAAA,IAAA,QAAA;AAAA,aAEdC,EAAG,mDAAmDN,EAAMO,KAAK;AAAA,IAAC;AAAA,EAAA,GACrEN,GAAM;AAAA,IAAA,IAAAW,WAAA;AAAA,aAAAT,EAETX,EAAiBqB,UAAQ;AAAA,QAAA,OAAA;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAGhC;"}
+{"version":3,"file":"Tooltip.js","sources":["../../src/components/Tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@ark-ui/solid/tooltip';\nimport { splitProps, type Component } from 'solid-js';\nimport { cn } from 'tailwind-variants';\n\nexport const Tooltip = TooltipPrimitive.Root;\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\nexport const TooltipContext = TooltipPrimitive.Context;\n\nexport const TooltipPositioner: Component<TooltipPrimitive.PositionerProps> = (props) => {\n  const [local, others] = splitProps(props, ['class']);\n  return (\n    <TooltipPrimitive.Positioner\n      data-slot='tooltip-positioner'\n      class={cn('isolate z-50', local.class)}\n      {...others}\n    />\n  );\n};\n\nexport const TooltipContent: Component<TooltipPrimitive.ContentProps> = (props) => {\n  const [local, others] = splitProps(props, ['class']);\n\n  return (\n    <TooltipPrimitive.Content\n      data-slot='tooltip-content'\n      class={cn(\n        'px-3 py-1.5 text-xs shadow-md relative isolate z-50 transform-gpu overflow-visible rounded-md bg-foreground text-background will-change-transform [--arrow-background:var(--foreground)]',\n        'origin-(--transform-origin)',\n        'data-[state=open]:animate-in data-[state=open]:fade-in-0',\n        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',\n        'data-[placement^=bottom]:slide-in-from-top-2',\n        'data-[placement^=left]:slide-in-from-right-2',\n        'data-[placement^=right]:slide-in-from-left-2',\n        'data-[placement^=top]:slide-in-from-bottom-2',\n        local.class,\n      )}\n      {...others}\n    />\n  );\n};\n\nexport const TooltipArrow: Component<TooltipPrimitive.ArrowProps> = (props) => {\n  const [local, others] = splitProps(props, ['class']);\n\n  return (\n    <TooltipPrimitive.Arrow\n      data-slot='tooltip-arrow'\n      class={cn('z-50 [--arrow-offset:-6px]! [--arrow-size:10px]', local.class)}\n      {...others}\n    >\n      <TooltipPrimitive.ArrowTip class='rounded-[2px]' />\n    </TooltipPrimitive.Arrow>\n  );\n};\n"],"names":["Tooltip","TooltipPrimitive","Root","TooltipTrigger","Trigger","TooltipContext","Context","TooltipPositioner","props","local","others","splitProps","_$createComponent","Positioner","_$mergeProps","cn","class","TooltipContent","Content","TooltipArrow","Arrow","children","ArrowTip"],"mappings":";;;;AAIO,MAAMA,IAAUC,EAAiBC,MAC3BC,IAAiBF,EAAiBG,SAClCC,IAAiBJ,EAAiBK,SAElCC,IAAkEC,CAAAA,MAAU;AACvF,QAAM,CAACC,GAAOC,CAAM,IAAIC,EAAWH,GAAO,CAAC,OAAO,CAAC;AACnD,SAAAI,EACGX,EAAiBY,YAAUC,EAAA;AAAA,IAAA,aAAA;AAAA,IAAA,IAAA,QAAA;AAAA,aAEnBC,EAAG,gBAAgBN,EAAMO,KAAK;AAAA,IAAC;AAAA,EAAA,GAClCN,CAAM,CAAA;AAGhB,GAEaO,IAA4DT,CAAAA,MAAU;AACjF,QAAM,CAACC,GAAOC,CAAM,IAAIC,EAAWH,GAAO,CAAC,OAAO,CAAC;AAEnD,SAAAI,EACGX,EAAiBiB,SAAOJ,EAAA;AAAA,IAAA,aAAA;AAAA,IAAA,IAAA,QAAA;AAAA,aAEhBC,EACL,4LACA,+BACA,4DACA,kEACA,gDACA,gDACA,gDACA,gDACAN,EAAMO,KACR;AAAA,IAAC;AAAA,EAAA,GACGN,CAAM,CAAA;AAGhB,GAEaS,IAAwDX,CAAAA,MAAU;AAC7E,QAAM,CAACC,GAAOC,CAAM,IAAIC,EAAWH,GAAO,CAAC,OAAO,CAAC;AAEnD,SAAAI,EACGX,EAAiBmB,OAAKN,EAAA;AAAA,IAAA,aAAA;AAAA,IAAA,IAAA,QAAA;AAAA,aAEdC,EAAG,mDAAmDN,EAAMO,KAAK;AAAA,IAAC;AAAA,EAAA,GACrEN,GAAM;AAAA,IAAA,IAAAW,WAAA;AAAA,aAAAT,EAETX,EAAiBqB,UAAQ;AAAA,QAAA,OAAA;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAGhC;"}

package/dist/components/toaster/Toaster.js

@@ -1,126 +1,101 @@
-import { createComponent as t, Portal as l, insert as a, template as s } from "solid-js/web";
-import { Toaster as c, createToaster as u, toast_exports as o } from "../../node_modules/.bun/@ark-ui_solid@5.34.1_2e1854f049906f04/node_modules/@ark-ui/solid/dist/chunk/4OJLSY6B.js";
-import { Show as r } from "solid-js";
+import { createComponent as t, Portal as l, insert as s, memo as r, template as d } from "solid-js/web";
+import { Toaster as c, createToaster as m, toast_exports as a } from "../../node_modules/.bun/@ark-ui_solid@5.34.1_2e1854f049906f04/node_modules/@ark-ui/solid/dist/chunk/4OJLSY6B.js";
+import { Show as i } from "solid-js";
 import { cn as n } from "../../node_modules/.bun/tailwind-variants@3.2.2_7ac958b541464b98/node_modules/tailwind-variants/dist/index.js";
-import d from "../../_virtual/check-circle.js";
-import g from "../../_virtual/close.js";
-import m from "../../_virtual/error.js";
+import u from "../../_virtual/check-circle.js";
+import g from "../../_virtual/error.js";
 import h from "../../_virtual/info.js";
-import p from "../../_virtual/warning.js";
-import { Spinner as f } from "../Spinner.js";
-var x = /* @__PURE__ */ s('<div class="gap-1 grid">'), w = /* @__PURE__ */ s("<div aria-hidden=true class=h-5>");
-const b = u({
+import f from "../../_virtual/warning.js";
+import { buttonVariants as p } from "../Button.js";
+import { Spinner as x } from "../Spinner.js";
+var b = /* @__PURE__ */ d('<div class="min-w-0 gap-1 grid flex-1">');
+const v = m({
   placement: "bottom-end",
   overlap: !0,
   gap: 16
-}), v = (e) => t(o.Root, {
+}), w = (e) => [r(() => r(() => e.type === "success")() && t(u, {
   get class() {
-    return n("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", "border-border text-popover-foreground");
+    return n("size-4 shrink-0");
+  },
+  "aria-hidden": "true"
+})), r(() => r(() => e.type === "info")() && t(h, {
+  get class() {
+    return n("size-4 shrink-0");
+  },
+  "aria-hidden": "true"
+})), r(() => r(() => e.type === "warning")() && t(f, {
+  get class() {
+    return n("size-4 shrink-0");
+  },
+  "aria-hidden": "true"
+})), r(() => r(() => e.type === "error")() && t(g, {
+  get class() {
+    return n("size-4 shrink-0");
+  },
+  "aria-hidden": "true"
+})), r(() => r(() => e.type === "loading")() && t(x, {
+  get class() {
+    return n("size-4 text-muted-foreground");
+  }
+}))], y = (e) => t(a.Root, {
+  get class() {
+    return n("group gap-2 px-4 py-3.5 shadow-lg min-w-80 pointer-events-auto relative flex w-full items-center rounded-xl 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", "data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full", "border-border text-popover-foreground");
   },
   get children() {
-    return [t(r, {
-      get when() {
-        return e.toast().type === "success";
-      },
-      get children() {
-        return t(d, {
-          get class() {
-            return n("size-5 text-green-500 shrink-0");
-          },
-          "aria-hidden": "true"
-        });
-      }
-    }), t(r, {
-      get when() {
-        return e.toast().type === "info";
-      },
-      get children() {
-        return t(h, {
-          get class() {
-            return n("size-5 text-blue-500 shrink-0");
-          },
-          "aria-hidden": "true"
-        });
-      }
-    }), t(r, {
-      get when() {
-        return e.toast().type === "warning";
-      },
-      get children() {
-        return t(p, {
-          get class() {
-            return n("size-5 text-amber-500 shrink-0");
-          },
-          "aria-hidden": "true"
-        });
-      }
-    }), t(r, {
-      get when() {
-        return e.toast().type === "error";
-      },
-      get children() {
-        return t(m, {
-          get class() {
-            return n("size-5 text-red-500 shrink-0");
-          },
-          "aria-hidden": "true"
-        });
-      }
-    }), t(r, {
-      get when() {
-        return e.toast().type === "loading";
-      },
-      get children() {
-        return t(f, {
-          get class() {
-            return n("size-5 text-muted-foreground");
-          }
-        });
+    return [t(w, {
+      get type() {
+        return e.toast().type;
       }
     }), (() => {
-      var i = x();
-      return a(i, t(r, {
+      var o = b();
+      return s(o, t(i, {
         get when() {
           return e.toast().title;
         },
         get children() {
-          return t(o.Title, {
+          return t(a.Title, {
             class: "text-sm font-semibold tracking-tight leading-none",
             get children() {
               return e.toast().title;
             }
           });
         }
-      }), null), a(i, t(r, {
+      }), null), s(o, t(i, {
         get when() {
           return e.toast().description;
         },
-        get fallback() {
-          return w();
-        },
         get children() {
-          return t(o.Description, {
-            class: "text-sm opacity-90",
+          return t(a.Description, {
+            class: "text-sm text-muted-foreground",
             get children() {
               return e.toast().description;
             }
           });
         }
-      }), null), i;
-    })(), t(o.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",
-      get children() {
-        return t(g, {
-          class: "size-4"
-        });
-      }
+      }), null), o;
+    })(), t(i, {
+      get when() {
+        return e.toast().action;
+      },
+      children: (o) => t(a.ActionTrigger, {
+        get class() {
+          return p({
+            class: "shrink-0",
+            size: "sm",
+            variant: "secondary"
+          });
+        },
+        get children() {
+          return o().label;
+        }
+      })
     })];
   }
 }), E = () => t(l, {
   get children() {
     return t(c, {
-      toaster: b,
-      children: (e) => t(v, {
+      toaster: v,
+      children: (e) => t(y, {
         toast: e
       })
     });
@@ -128,6 +103,6 @@ const b = u({
 });
 export {
   E as Toaster,
-  b as toast
+  v as toast
 };
 //# sourceMappingURL=Toaster.js.map

package/dist/components/toaster/Toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.js","sources":["../../../src/components/toaster/Toaster.tsx"],"sourcesContent":["import {\n  Toast,\n  Toaster as ToasterPrimitive,\n  createToaster,\n  type ToastOptions,\n} from '@ark-ui/solid/toast';\nimport { type Component, type Accessor, Show } from 'solid-js';\nimport { Portal } from 'solid-js/web';\nimport { cn } from 'tailwind-variants';\nimport CheckCircleIcon from '~icons/material-symbols/check-circle';\nimport CloseIcon from '~icons/material-symbols/close';\nimport ErrorIcon from '~icons/material-symbols/error';\nimport InfoIcon from '~icons/material-symbols/info';\nimport WarningIcon from '~icons/material-symbols/warning';\n\nimport { Spinner } from '@/components/Spinner';\n\nexport const toast = createToaster({\n  placement: 'bottom-end',\n  overlap: true,\n  gap: 16,\n});\n\nconst ToastItem: Component<{ toast: Accessor<ToastOptions> }> = (props) => (\n  <Toast.Root\n    class={cn(\n      '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',\n      'data-[state=open]:sm:slide-in-from-bottom-full data-[state=open]:animate-in data-[state=open]:slide-in-from-top-full',\n      'border-border text-popover-foreground',\n    )}\n  >\n    <Show when={props.toast().type === 'success'}>\n      <CheckCircleIcon class={cn('size-5 text-green-500 shrink-0')} aria-hidden='true' />\n    </Show>\n    <Show when={props.toast().type === 'info'}>\n      <InfoIcon class={cn('size-5 text-blue-500 shrink-0')} aria-hidden='true' />\n    </Show>\n    <Show when={props.toast().type === 'warning'}>\n      <WarningIcon class={cn('size-5 text-amber-500 shrink-0')} aria-hidden='true' />\n    </Show>\n    <Show when={props.toast().type === 'error'}>\n      <ErrorIcon class={cn('size-5 text-red-500 shrink-0')} aria-hidden='true' />\n    </Show>\n    <Show when={props.toast().type === 'loading'}>\n      <Spinner class={cn('size-5 text-muted-foreground')} />\n    </Show>\n    <div class='gap-1 grid'>\n      <Show when={props.toast().title}>\n        <Toast.Title class='text-sm font-semibold tracking-tight leading-none'>\n          {props.toast().title}\n        </Toast.Title>\n      </Show>\n      <Show when={props.toast().description} fallback={<div aria-hidden='true' class='h-5' />}>\n        <Toast.Description class='text-sm opacity-90'>\n          {props.toast().description}\n        </Toast.Description>\n      </Show>\n    </div>\n    <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'>\n      <CloseIcon class='size-4' />\n    </Toast.CloseTrigger>\n  </Toast.Root>\n);\n\nexport const Toaster: Component = () => (\n  <Portal>\n    <ToasterPrimitive toaster={toast}>{(item) => <ToastItem toast={item} />}</ToasterPrimitive>\n  </Portal>\n);\n"],"names":["toast","createToaster","placement","overlap","gap","ToastItem","props","_$createComponent","Toast","Root","cn","children","Show","when","type","CheckCircleIcon","InfoIcon","WarningIcon","ErrorIcon","Spinner","_el$","_tmpl$","_$insert","title","Title","description","fallback","_tmpl$2","Description","CloseTrigger","CloseIcon","Toaster","Portal","ToasterPrimitive","toaster","item"],"mappings":"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"}
+{"version":3,"file":"Toaster.js","sources":["../../../src/components/toaster/Toaster.tsx"],"sourcesContent":["import {\n  Toast,\n  Toaster as ToasterPrimitive,\n  createToaster,\n  type ToastOptions,\n} from '@ark-ui/solid/toast';\nimport { type Component, type Accessor, Show } from 'solid-js';\nimport { Portal } from 'solid-js/web';\nimport { cn } from 'tailwind-variants';\nimport CheckCircleIcon from '~icons/material-symbols/check-circle';\nimport ErrorIcon from '~icons/material-symbols/error';\nimport InfoIcon from '~icons/material-symbols/info';\nimport WarningIcon from '~icons/material-symbols/warning';\n\nimport { buttonVariants } from '@/components/Button';\nimport { Spinner } from '@/components/Spinner';\n\nexport const toast = createToaster({\n  placement: 'bottom-end',\n  overlap: true,\n  gap: 16,\n});\n\nconst ToastIcon: Component<{ type: ToastOptions['type'] }> = (props) => (\n  <>\n    {props.type === 'success' && (\n      <CheckCircleIcon class={cn('size-4 shrink-0')} aria-hidden='true' />\n    )}\n    {props.type === 'info' && <InfoIcon class={cn('size-4 shrink-0')} aria-hidden='true' />}\n    {props.type === 'warning' && <WarningIcon class={cn('size-4 shrink-0')} aria-hidden='true' />}\n    {props.type === 'error' && <ErrorIcon class={cn('size-4 shrink-0')} aria-hidden='true' />}\n    {props.type === 'loading' && <Spinner class={cn('size-4 text-muted-foreground')} />}\n  </>\n);\n\nconst ToastItem: Component<{ toast: Accessor<ToastOptions> }> = (props) => (\n  <Toast.Root\n    class={cn(\n      'group gap-2 px-4 py-3.5 shadow-lg min-w-80 pointer-events-auto relative flex w-full items-center rounded-xl border bg-popover',\n      'data-[state=open]:sm:slide-in-from-bottom-full data-[state=open]:animate-in data-[state=open]:slide-in-from-top-full',\n      'data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full',\n      'border-border text-popover-foreground',\n    )}\n  >\n    <ToastIcon type={props.toast().type} />\n    <div class='min-w-0 gap-1 grid flex-1'>\n      <Show when={props.toast().title}>\n        <Toast.Title class='text-sm font-semibold tracking-tight leading-none'>\n          {props.toast().title}\n        </Toast.Title>\n      </Show>\n      <Show when={props.toast().description}>\n        <Toast.Description class='text-sm text-muted-foreground'>\n          {props.toast().description}\n        </Toast.Description>\n      </Show>\n    </div>\n    <Show when={props.toast().action}>\n      {(action) => (\n        <Toast.ActionTrigger\n          class={buttonVariants({\n            class: 'shrink-0',\n            size: 'sm',\n            variant: 'secondary',\n          })}\n        >\n          {action().label}\n        </Toast.ActionTrigger>\n      )}\n    </Show>\n  </Toast.Root>\n);\n\nexport const Toaster: Component = () => (\n  <Portal>\n    <ToasterPrimitive toaster={toast}>{(item) => <ToastItem toast={item} />}</ToasterPrimitive>\n  </Portal>\n);\n"],"names":["toast","createToaster","placement","overlap","gap","ToastIcon","props","_$memo","type","_$createComponent","CheckCircleIcon","cn","InfoIcon","WarningIcon","ErrorIcon","Spinner","ToastItem","Toast","Root","children","_el$","_tmpl$","_$insert","Show","when","title","Title","description","Description","action","ActionTrigger","buttonVariants","class","size","variant","label","Toaster","Portal","ToasterPrimitive","toaster","item"],"mappings":";;;;;;;;;;;AAiBO,MAAMA,IAAQC,EAAc;AAAA,EACjCC,WAAW;AAAA,EACXC,SAAS;AAAA,EACTC,KAAK;AACP,CAAC,GAEKC,IAAwDC,CAAAA,MAAK,CAAAC,QAE9DA,EAAA,MAAAD,EAAME,SAAS,SAAS,OAAAC,EACtBC,GAAe;AAAA,EAAA,IAAA,QAAA;AAAA,WAAQC,EAAG,iBAAiB;AAAA,EAAC;AAAA,EAAA,eAAA;AAAA,CAAA,CAC9C,GAAAJ,EAAA,MACAA,EAAA,MAAAD,EAAME,SAAS,MAAM,EAAA,KAAAC,EAAKG,GAAQ;AAAA,EAAA,IAAA,QAAA;AAAA,WAAQD,EAAG,iBAAiB;AAAA,EAAC;AAAA,EAAA,eAAA;AAAA,CAAA,CAAuB,GAAAJ,EAAA,MACtFA,EAAA,MAAAD,EAAME,SAAS,SAAS,EAAA,KAAAC,EAAKI,GAAW;AAAA,EAAA,IAAA,QAAA;AAAA,WAAQF,EAAG,iBAAiB;AAAA,EAAC;AAAA,EAAA,eAAA;AAAA,CAAA,CAAuB,GAAAJ,EAAA,MAC5FA,EAAA,MAAAD,EAAME,SAAS,OAAO,EAAA,KAAAC,EAAKK,GAAS;AAAA,EAAA,IAAA,QAAA;AAAA,WAAQH,EAAG,iBAAiB;AAAA,EAAC;AAAA,EAAA,eAAA;AAAA,CAAA,CAAuB,GAAAJ,EAAA,MACxFA,EAAA,MAAAD,EAAME,SAAS,SAAS,EAAA,KAAAC,EAAKM,GAAO;AAAA,EAAA,IAAA,QAAA;AAAA,WAAQJ,EAAG,8BAA8B;AAAA,EAAC;AAAA,CAAA,CAAI,CAAA,GAIjFK,IAA2DV,CAAAA,MAAKG,EACnEQ,EAAMC,MAAI;AAAA,EAAA,IAAA,QAAA;AAAA,WACFP,EACL,iIACA,wHACA,+GACA,uCACF;AAAA,EAAC;AAAA,EAAA,IAAAQ,WAAA;AAAA,WAAA,CAAAV,EAEAJ,GAAS;AAAA,MAAA,IAACG,OAAI;AAAA,eAAEF,EAAMN,QAAQQ;AAAAA,MAAI;AAAA,IAAA,CAAA,IAAA,MAAA;AAAA,UAAAY,IAAAC,EAAAA;AAAAC,aAAAA,EAAAF,GAAAX,EAEhCc,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAElB,EAAMN,QAAQyB;AAAAA,QAAK;AAAA,QAAA,IAAAN,WAAA;AAAA,iBAAAV,EAC5BQ,EAAMS,OAAK;AAAA,YAAA,OAAA;AAAA,YAAA,IAAAP,WAAA;AAAA,qBACTb,EAAMN,QAAQyB;AAAAA,YAAK;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA,GAAA,IAAA,GAAAH,EAAAF,GAAAX,EAGvBc,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAElB,EAAMN,QAAQ2B;AAAAA,QAAW;AAAA,QAAA,IAAAR,WAAA;AAAA,iBAAAV,EAClCQ,EAAMW,aAAW;AAAA,YAAA,OAAA;AAAA,YAAA,IAAAT,WAAA;AAAA,qBACfb,EAAMN,QAAQ2B;AAAAA,YAAW;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA,GAAA,IAAA,GAAAP;AAAAA,IAAA,GAAA,GAAAX,EAI/Bc,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAElB,EAAMN,QAAQ6B;AAAAA,MAAM;AAAA,MAAAV,UAC5BU,CAAAA,MAAMpB,EACLQ,EAAMa,eAAa;AAAA,QAAA,IAAA,QAAA;AAAA,iBACXC,EAAe;AAAA,YACpBC,OAAO;AAAA,YACPC,MAAM;AAAA,YACNC,SAAS;AAAA,UAAA,CACV;AAAA,QAAC;AAAA,QAAA,IAAAf,WAAA;AAAA,iBAEDU,IAASM;AAAAA,QAAK;AAAA,MAAA,CAAA;AAAA,IAAA,CAElB,CAAA;AAAA,EAAA;AAAA,CAAA,GAKMC,IAAqBA,MAAA3B,EAC/B4B,GAAM;AAAA,EAAA,IAAAlB,WAAA;AAAA,WAAAV,EACJ6B,GAAgB;AAAA,MAACC,SAASvC;AAAAA,MAAKmB,UAAIqB,CAAAA,MAAI/B,EAAMO,GAAS;AAAA,QAAChB,OAAOwC;AAAAA,MAAAA,CAAI;AAAA,IAAA,CAAI;AAAA,EAAA;AAAA,CAAA;"}

package/package.json

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

package/src/components/Tooltip.tsx

@@ -24,7 +24,7 @@ export const TooltipContent: Component<TooltipPrimitive.ContentProps> = (props)
     <TooltipPrimitive.Content
       data-slot='tooltip-content'
       class={cn(
-        'px-3 py-1.5 text-xs shadow-md relative isolate transform-gpu overflow-visible rounded-md bg-foreground text-background will-change-transform [--arrow-background:var(--foreground)]',
+        'px-3 py-1.5 text-xs shadow-md relative isolate z-50 transform-gpu overflow-visible rounded-md bg-foreground text-background will-change-transform [--arrow-background:var(--foreground)]',
         'origin-(--transform-origin)',
         'data-[state=open]:animate-in data-[state=open]:fade-in-0',
         'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',

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,53 @@ 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',
+      'group gap-2 px-4 py-3.5 shadow-lg min-w-80 pointer-events-auto relative flex w-full items-center rounded-xl 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',
+      'data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full',
       '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>
 );