@code0-tech/pictor 0.0.0-mvp.13 → 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:flex-start;justify-content:space-between;gap:.35rem}.toast__icon{display:flex;align-items:center;justify-content:center}.toast__content{margin-top:.35rem;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/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 s, jsxs as N } from "react/jsx-runtime";
-import { c as I } from "../../_virtual/compiler-runtime.js";
-import { toast as x } 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 T, IconCircleX as g, IconAlertCircle as j, IconCircleCheck as k, IconInfoCircle as w, IconCircleDot as C } from "@tabler/icons-react";
-import { Text as X } from "../text/Text.js";
-import { Flex as z } from "../flex/Flex.js";
-function L(i) {
-  return x.custom((e) => /* @__PURE__ */ s(A, { id: e, ...i, children: i.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(i) {
-  const e = I.c(25);
-  let o, t, c, l, r;
-  if (e[0] !== i) {
-    const {
-      dismissible: p,
-      color: u,
-      title: y,
-      onClose: E,
-      children: b,
-      ...v
-    } = i;
-    r = y, o = b, c = p === void 0 ? !1 : p, t = u === void 0 ? "secondary" : u, l = $(`toast toast--${t}`, v), e[0] = i, e[1] = o, e[2] = t, e[3] = c, e[4] = l, e[5] = r;
-  } else
-    o = e[1], t = e[2], c = e[3], l = e[4], r = e[5];
-  let n;
-  e[6] !== t ? (n = t && /* @__PURE__ */ s(D, { color: t }), e[6] = t, e[7] = n) : n = e[7];
-  let a;
-  e[8] !== r ? (a = /* @__PURE__ */ s(X, { size: "md", hierarchy: "primary", children: r }), e[8] = r, e[9] = a) : a = e[9];
-  let m;
-  e[10] !== n || e[11] !== a ? (m = /* @__PURE__ */ N(z, { className: "toast__header-wrapper", children: [
-    n,
-    a
-  ] }), e[10] = n, e[11] = a, e[12] = m) : m = e[12];
-  let d;
-  e[13] !== c || e[14] !== i.id ? (d = c && /* @__PURE__ */ s("span", { className: "toast__dismissible", onClick: () => x.dismiss(i.id), children: /* @__PURE__ */ s(T, { size: 18 }) }), e[13] = c, e[14] = i.id, e[15] = d) : d = e[15];
-  let f;
-  e[16] !== m || e[17] !== d ? (f = /* @__PURE__ */ N(z, { className: "toast__header", children: [
-    m,
-    d
-  ] }), e[16] = m, e[17] = d, e[18] = f) : f = e[18];
-  let _;
-  e[19] !== o ? (_ = o && /* @__PURE__ */ s("div", { className: "toast__content", children: o }), e[19] = o, e[20] = _) : _ = e[20];
-  let h;
-  return e[21] !== l || e[22] !== f || e[23] !== _ ? (h = /* @__PURE__ */ N("div", { ...l, children: [
-    f,
-    _
-  ] }), e[21] = l, e[22] = f, e[23] = _, e[24] = h) : h = e[24], h;
+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 = (i) => {
-  const e = I.c(1), {
-    color: o
-  } = i;
-  let t;
-  return e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = {
-    primary: /* @__PURE__ */ s(C, { className: "toast__icon", size: 18 }),
-    secondary: /* @__PURE__ */ s(C, { className: "toast__icon", size: 18 }),
-    info: /* @__PURE__ */ s(w, { className: "toast__icon", size: 18 }),
-    success: /* @__PURE__ */ s(k, { className: "toast__icon", size: 18 }),
-    warning: /* @__PURE__ */ s(j, { className: "toast__icon", size: 18 }),
-    error: /* @__PURE__ */ s(g, { className: "toast__icon", size: 18 })
-  }, 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.13",
+  "version": "0.0.0-mvp.14",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "scripts": {