@xola/ui-kit 2.0.0-82 → 2.0.0-83

package/README.md

@@ -1,6 +1,6 @@
 ## Xola UI Kit
 
-React component library for the next generation of Xola apps. See a preview at https://ui.xola.io
+Xola's React component library with Tailwind CSS for the next generation of Xola apps. See a preview at https://ui.xola.io
 
 ### Requirements
 

package/build/ui-kit.mjs

@@ -7003,18 +7003,18 @@ rc.propTypes = {
 };
 const oc = {
   primary: "bg-primary",
-  secondary: "bg-secondary-dark",
-  success: "bg-success-dark",
+  secondary: "bg-secondary",
+  success: "bg-success",
   warning: "bg-warning",
   danger: "bg-danger",
-  caution: "bg-caution-dark"
+  caution: "bg-caution"
 }, ac = {
-  small: "px-3 py-2 text-sm leading-3.5 shadow max-w-[200px]",
-  medium: "px-4 py-3 text-base leading-4 shadow-md max-w-[400px]",
-  large: "px-4 py-4 text-lg leading-4.5 shadow-lg max-w-xl"
+  small: "px-3 py-2 text-sm leading-3.5 shadow max-w-50",
+  medium: "px-4 py-3.5 text-base leading-4 shadow max-w-100",
+  large: "px-4.5 py-4 text-md leading-4.5 shadow max-w-xl"
 }, ic = {
   duration: 3e3,
-  position: "top-right",
+  position: "top-center",
   reverseOrder: !1
 }, qr = {
   show({ text: e, size: t = "medium", color: o = "success", className: a, canClose: r = !0, onClose: i, children: s, ...c }) {
@@ -7023,13 +7023,26 @@ const oc = {
     const d = qr.getStyles(o, t, a, r);
     ar.custom(qr.container.bind(this, e, d, r ? i : null), u);
   },
+  primary(e, t) {
+    this.show({ color: "primary", text: e, ...t });
+  },
+  secondary(e, t) {
+    this.show({ color: "secondary", text: e, ...t });
+  },
+  success(e, t) {
+    this.show({ color: "success", text: e, ...t });
+  },
+  warning(e, t) {
+    this.show({ color: "warning", text: e, ...t });
+  },
+  caution(e, t) {
+    this.show({ color: "caution", text: e, ...t });
+  },
+  danger(e, t) {
+    this.show({ color: "danger", text: e, text: e, ...t });
+  },
   getStyles(e, t, o) {
-    return C(
-      "flex opacity-90 ring-1 ring-black ring-opacity-5 rounded text-white pointer-events-auto",
-      oc[e],
-      ac[t],
-      o
-    );
+    return C("flex text-white rounded pointer-events-auto", oc[e], ac[t], o);
   },
   container(e, t, o, a) {
     const r = (i) => o(i, a);
@@ -7039,19 +7052,19 @@ const oc = {
       show: a.visible,
       enter: "transition transform duration-500 ease-out",
       enterFrom: "-translate-y-full !opacity-0",
-      enterTo: "translate-y-0 !opacity-90",
+      enterTo: "translate-y-0 !opacity-100",
       leave: "transition transform duration-500 ease-in",
-      leaveFrom: "!opacity-90",
-      leaveTo: "!opacity-0"
+      leaveFrom: "!opacity-90 translate-y-0",
+      leaveTo: "!opacity-0 -translate-y-full"
     }, /* @__PURE__ */ n.createElement("div", {
       key: a.id,
       className: t
     }, /* @__PURE__ */ n.createElement("div", {
       className: "w-full"
-    }, e), o ? /* @__PURE__ */ n.createElement("div", {
-      className: "flex cursor-pointer items-center justify-center pl-3 text-white hover:text-black",
+    }, e), o && /* @__PURE__ */ n.createElement("div", {
+      className: "flex cursor-pointer items-center justify-center pl-3 opacity-60 hover:opacity-100",
       onClick: r
-    }, /* @__PURE__ */ n.createElement(Ye, null)) : null));
+    }, /* @__PURE__ */ n.createElement(Ye, null))));
   },
   dismiss(e) {
     ar.dismiss(e);