@code0-tech/pictor 0.0.0-mvp.12 → 0.0.0-mvp.14

package/dist/assets/components/toast/Toast.style.css

@@ -1 +1 @@
-.toast{padding:1rem}.toast{border-radius:1rem;font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px;line-height:1.5}.toast__header{align-items:center;justify-content:space-between}.toast__content{margin:.35rem 0;box-sizing:border-box}.toast__header-wrapper{align-items:center;gap:.35rem}.toast__header-wrapper>svg{min-width:1rem;min-height:1rem}.toast__dismissible{cursor:pointer;display:flex;align-items:center;justify-content:center}.toast__dismissible{border-radius:1rem}.toast__dismissible svg{min-width:1rem;min-height:1rem}.toast--primary{border:none;background:#030014;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.toast--secondary{border:none;background:#1c1a2c;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.toast--success{border:none;background:#071314;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.toast--warning{border:none;background:#1c1313;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.toast--error{border:none;background:#180016;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.toast--info{border:none;background:#0e1a24;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}
+.toast{padding:1rem;width:100%;overflow:hidden}.toast{border-radius:1rem;font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px;line-height:1.5}.toast__header{align-items:flex-start;justify-content:space-between;gap:.7rem}.toast__icon{display:flex;align-items:center;justify-content:center}.toast__content{box-sizing:border-box;margin-left:27px}.toast__header-wrapper{align-items:flex-start;gap:.7rem}.toast__header-wrapper>svg{min-width:1rem;min-height:1rem}.toast__dismissible{cursor:pointer;display:flex;align-items:center;justify-content:center}.toast__dismissible{border-radius:1rem}.toast__dismissible svg{min-width:1rem;min-height:1rem}@keyframes toast-duration{0%{width:0%}to{width:100%}}.toast:hover .toast__duration:after{animation-play-state:paused}.toast__duration{position:relative;margin:1rem -1rem -1rem;padding:.35rem 1rem .6rem}.toast__duration{border-top:1px solid rgba(255,255,255,.1)}.toast__duration:after{content:"";position:absolute;left:0;bottom:0;width:0%;height:4px;background:#ffffff1a;animation-name:toast-duration;animation-duration:var(--toast-duration, 4s);animation-timing-function:linear;animation-fill-mode:forwards}.toast--primary{border:none;background:#030014;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.toast--secondary{border:none;background:#1c1a2c;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.toast--success{border:none;background:#071314;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.toast--warning{border:none;background:#1c1313;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.toast--error{border:none;background:#180016;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.toast--info{border:none;background:#0e1a24;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}

package/dist/components/alert/Alert.js

@@ -17,12 +17,12 @@ const k = (n) => {
     r = d, i = f === void 0 ? "secondary" : f;
     let s;
     e[5] === Symbol.for("react.memo_cache_sentinel") ? (s = {
-      primary: /* @__PURE__ */ t(a, { size: 16 }),
-      secondary: /* @__PURE__ */ t(a, { size: 16 }),
-      info: /* @__PURE__ */ t(u, { size: 16 }),
-      success: /* @__PURE__ */ t(y, { size: 16 }),
-      warning: /* @__PURE__ */ t(x, { size: 16 }),
-      error: /* @__PURE__ */ t(h, { size: 16 })
+      primary: /* @__PURE__ */ t(a, { size: 18 }),
+      secondary: /* @__PURE__ */ t(a, { size: 18 }),
+      info: /* @__PURE__ */ t(u, { size: 18 }),
+      success: /* @__PURE__ */ t(y, { size: 18 }),
+      warning: /* @__PURE__ */ t(x, { size: 18 }),
+      error: /* @__PURE__ */ t(h, { size: 18 })
     }, e[5] = s) : s = e[5], c = s, o = I(`alert alert--${i}`, p), e[0] = n, e[1] = r, e[2] = i, e[3] = c, e[4] = o;
   } else
     r = e[1], i = e[2], c = e[3], o = e[4];

package/dist/components/toast/Toast.d.ts

@@ -7,6 +7,7 @@ export interface ToastProps extends Omit<Code0Component<HTMLDivElement>, "title"
     color?: Color;
     dismissible?: boolean;
     onClose?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+    duration?: number;
 }
 export declare function toast(toast: Omit<ToastProps, 'id'>): string | number;
 export declare function Toast(props: ToastProps): React.JSX.Element;

package/dist/components/toast/Toast.js

@@ -1,70 +1,62 @@
-import { jsx as i, jsxs as p } from "react/jsx-runtime";
-import { c as x } from "../../_virtual/compiler-runtime.js";
-import { toast as y } from "sonner";
+import { jsx as s, jsxs as r } from "react/jsx-runtime";
+import { c as p } from "../../_virtual/compiler-runtime.js";
+import { toast as d } from "sonner";
 import '../../assets/components/toast/Toast.style.css';/* empty css                 */
 import "../../utils/contextStore.js";
 import "react";
-import { mergeCode0Props as $ } from "../../utils/utils.js";
-import { IconX as g, IconCircleX as T, IconAlertCircle as j, IconCircleCheck as k, IconInfoCircle as w, IconCircleDot as z } from "@tabler/icons-react";
-import { Text as X } from "../text/Text.js";
-import { Flex as I } from "../flex/Flex.js";
-function L(s) {
-  return y.custom((e) => /* @__PURE__ */ i(A, { id: e, ...s, children: s.children }));
+import { mergeCode0Props as f } from "../../utils/utils.js";
+import { IconX as u, IconCircleX as N, IconAlertCircle as y, IconCircleCheck as C, IconInfoCircle as z, IconCircleDot as l } from "@tabler/icons-react";
+import { Text as c } from "../text/Text.js";
+import { Flex as m } from "../flex/Flex.js";
+function D(o) {
+  return d.custom((e) => /* @__PURE__ */ s(I, { id: e, ...o, children: o.children }), {
+    duration: o.duration ?? 4e3
+  });
 }
-function A(s) {
-  const e = x.c(25);
-  let o, t, r, l, c;
-  if (e[0] !== s) {
-    const {
-      dismissible: u,
-      color: C,
-      title: b,
-      onClose: E,
-      children: v,
-      ...N
-    } = s;
-    c = b, o = v, r = u === void 0 ? !1 : u, t = C === void 0 ? "secondary" : C, l = $(`toast toast--${t}`, N), e[0] = s, e[1] = o, e[2] = t, e[3] = r, e[4] = l, e[5] = c;
-  } else
-    o = e[1], t = e[2], r = e[3], l = e[4], c = e[5];
-  let n;
-  e[6] !== t ? (n = t && /* @__PURE__ */ i(D, { color: t }), e[6] = t, e[7] = n) : n = e[7];
-  let m;
-  e[8] !== c ? (m = /* @__PURE__ */ i(X, { size: "md", hierarchy: "primary", children: c }), e[8] = c, e[9] = m) : m = e[9];
-  let a;
-  e[10] !== n || e[11] !== m ? (a = /* @__PURE__ */ p(I, { align: "center", className: "toast__header-wrapper", children: [
-    n,
-    m
-  ] }), e[10] = n, e[11] = m, e[12] = a) : a = e[12];
-  let d;
-  e[13] !== r || e[14] !== s.id ? (d = r && /* @__PURE__ */ i("span", { className: "toast__dismissible", onClick: () => y.dismiss(s.id), children: /* @__PURE__ */ i(g, { size: 16 }) }), e[13] = r, e[14] = s.id, e[15] = d) : d = e[15];
-  let f;
-  e[16] !== a || e[17] !== d ? (f = /* @__PURE__ */ p(I, { className: "toast__header", children: [
-    a,
-    d
-  ] }), e[16] = a, e[17] = d, e[18] = f) : f = e[18];
-  let h;
-  e[19] !== o ? (h = o && /* @__PURE__ */ i("div", { className: "toast__content", children: o }), e[19] = o, e[20] = h) : h = e[20];
-  let _;
-  return e[21] !== l || e[22] !== f || e[23] !== h ? (_ = /* @__PURE__ */ p("div", { ...l, children: [
-    f,
-    h
-  ] }), e[21] = l, e[22] = f, e[23] = h, e[24] = _) : _ = e[24], _;
+function I(o) {
+  const {
+    dismissible: e = !1,
+    color: t = "secondary",
+    title: i,
+    onClose: _ = () => {
+    },
+    children: a,
+    duration: n = 4e3,
+    ...h
+  } = o;
+  return /* @__PURE__ */ r("div", { ...f(`toast toast--${t}`, h), children: [
+    /* @__PURE__ */ r(m, { className: "toast__header", children: [
+      /* @__PURE__ */ r(m, { className: "toast__header-wrapper", children: [
+        t && /* @__PURE__ */ s(x, { color: t }),
+        /* @__PURE__ */ s(c, { size: "md", children: i })
+      ] }),
+      e && /* @__PURE__ */ s("span", { className: "toast__dismissible", onClick: () => d.dismiss(o.id), children: /* @__PURE__ */ s(u, { size: 18 }) })
+    ] }),
+    a && /* @__PURE__ */ s("div", { className: "toast__content", children: a }),
+    /* @__PURE__ */ s("div", { className: "toast__duration", style: {
+      "--toast-duration": `${n}ms`
+    }, children: /* @__PURE__ */ r(c, { hierarchy: "tertiary", children: [
+      "This message will close in ",
+      /* @__PURE__ */ s(c, { hierarchy: "primary", children: n / 1e3 }),
+      " seconds"
+    ] }) })
+  ] });
 }
-const D = (s) => {
-  const e = x.c(1), {
-    color: o
-  } = s;
-  let t;
-  return e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = {
-    primary: /* @__PURE__ */ i(z, { size: 16 }),
-    secondary: /* @__PURE__ */ i(z, { size: 16 }),
-    info: /* @__PURE__ */ i(w, { size: 16 }),
-    success: /* @__PURE__ */ i(k, { size: 16 }),
-    warning: /* @__PURE__ */ i(j, { size: 16 }),
-    error: /* @__PURE__ */ i(T, { size: 16 })
-  }, e[0] = t) : t = e[0], t[o] ?? null;
+const x = (o) => {
+  const e = p.c(1), {
+    color: t
+  } = o;
+  let i;
+  return e[0] === Symbol.for("react.memo_cache_sentinel") ? (i = {
+    primary: /* @__PURE__ */ s(l, { className: "toast__icon", size: 18 }),
+    secondary: /* @__PURE__ */ s(l, { className: "toast__icon", size: 18 }),
+    info: /* @__PURE__ */ s(z, { className: "toast__icon", size: 18 }),
+    success: /* @__PURE__ */ s(C, { className: "toast__icon", size: 18 }),
+    warning: /* @__PURE__ */ s(y, { className: "toast__icon", size: 18 }),
+    error: /* @__PURE__ */ s(N, { className: "toast__icon", size: 18 })
+  }, e[0] = i) : i = e[0], i[t] ?? null;
 };
 export {
-  A as Toast,
-  L as toast
+  I as Toast,
+  D as toast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/pictor",
-  "version": "0.0.0-mvp.12",
+  "version": "0.0.0-mvp.14",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "scripts": {