@dotss/tictoccroc 0.0.23 → 0.0.24

package/dist/shared/components/Image/Image.mjs

@@ -1,116 +1,158 @@
-import { jsxs as L, jsx as c, Fragment as Y } from "react/jsx-runtime";
-import { forwardRef as Z, useRef as h, useImperativeHandle as w, useState as C, useEffect as R } from "react";
-import { Flexbox as M, Skeleton as U } from "@dotss/ui";
-import F from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
-import b from "../../utils/getImageUrl/getImageUrl.mjs";
-import V from "./Image.error.mjs";
-const k = 100, ot = Z(
+import { jsxs as T, jsx as s, Fragment as p } from "react/jsx-runtime";
+import { forwardRef as P, useRef as W, useImperativeHandle as tt, useState as I, useEffect as G } from "react";
+import { Flexbox as J, Skeleton as K } from "@dotss/ui";
+import et from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
+import N from "../../utils/getImageUrl/getImageUrl.mjs";
+import Q from "./Image.error.mjs";
+const nt = 100, ct = P(
   ({
-    src: _,
+    src: j,
     width: n,
-    height: o,
-    fit: q = "cover",
-    position: A = "center",
-    alt: E,
-    scale: D = 2,
-    onLoad: r,
-    onLazyLoad: g,
-    lazy: I = !1,
-    borderRadius: l,
-    disabledResizing: G = !1,
-    withIntrinsicRatio: x = !1,
-    enableFallback: T = !1,
-    enableErrorFallback: W = !0,
-    renderErrorFallback: f,
+    height: i,
+    fit: h = "cover",
+    position: E = "center",
+    alt: H,
+    scale: X = 2,
+    onLoad: $,
+    onLazyLoad: x,
+    lazy: O = !1,
+    borderRadius: f,
+    disabledResizing: z = !1,
+    withIntrinsicRatio: M = !1,
+    enableBlurPlaceholder: c = !1,
+    enableFallback: R = !1,
+    enableErrorFallback: U = !0,
+    renderErrorFallback: a,
     wrapperProps: e = {},
-    onError: H,
-    ...d
-  }, J) => {
-    const u = h(null), $ = h(!1), m = h(null);
-    w(J, () => m.current);
-    const [a, K] = C(!1), [O, y] = C(!1), [v, S] = C(!1), j = b({ src: _, width: n, height: o, fit: q, position: A, scale: D, disabledResizing: G }), z = (t) => {
-      y(!0), S(!1), typeof r == "function" && r(t);
+    onError: V,
+    ...u
+  }, Y) => {
+    const m = W(null), _ = W(!1), y = W(null);
+    tt(Y, () => y.current);
+    const [d, Z] = I(!1), [g, v] = I(!1), [S, r] = I(!1), [L, b] = I(!1), q = N({
+      mode: "original",
+      src: j,
+      width: n,
+      height: i,
+      fit: h,
+      position: E,
+      scale: X,
+      disabledResizing: z
+    }), C = c ? N({
+      mode: "blur",
+      src: j,
+      width: n,
+      fit: h,
+      position: E,
+      scale: 1 / 3,
+      disabledResizing: z
+    }) : null, A = (t) => {
+      v(!0), r(!1), typeof $ == "function" && $(t);
     }, B = (t) => {
-      S(!0), y(!1), typeof H == "function" && H(t.nativeEvent);
-    };
-    return R(() => {
-      if (I && u.current) {
-        const t = u.current, N = () => {
+      r(!0), v(!1), typeof V == "function" && V(t.nativeEvent);
+    }, D = () => b(!0);
+    return G(() => {
+      if (O && m.current) {
+        const t = m.current, F = () => {
           if (!t) return !1;
-          const i = t.getBoundingClientRect();
-          return i.bottom >= 0 && i.top <= (window.innerHeight || document.documentElement.clientHeight) + k;
-        }, s = () => {
-          N() && K(!0);
-        }, Q = () => {
-          var i;
-          (i = window.appScreenContent) == null || i.addEventListener("scroll", s), window.addEventListener("resize", s), window.addEventListener("orientationchange", s);
-        }, X = () => {
-          var i;
-          (i = window.appScreenContent) == null || i.removeEventListener("scroll", s), window.removeEventListener("resize", s), window.removeEventListener("orientationchange", s);
+          const o = t.getBoundingClientRect();
+          return o.bottom >= 0 && o.top <= (window.innerHeight || document.documentElement.clientHeight) + nt;
+        }, l = () => {
+          F() && Z(!0);
+        }, w = () => {
+          var o;
+          (o = window.appScreenContent) == null || o.addEventListener("scroll", l), window.addEventListener("resize", l), window.addEventListener("orientationchange", l);
+        }, k = () => {
+          var o;
+          (o = window.appScreenContent) == null || o.removeEventListener("scroll", l), window.removeEventListener("resize", l), window.removeEventListener("orientationchange", l);
         };
-        return s(), Q(), X;
+        return l(), w(), k;
       }
-    }), R(() => {
-      typeof g == "function" && a && !$.current && ($.current = !0, g());
-    }, [g, a]), F(() => {
-      const t = m.current;
-      return t != null && t.complete ? t.naturalWidth > 0 ? (t.style.transition = "none", t.style.opacity = "1", y(!0)) : (t.style.opacity = "0", S(!0)) : t && (t.style.transition = "opacity 0.3s", t.style.opacity = "0", t.onload = () => {
-        t.style.opacity = "1", y(!0), t.onload = null;
+    }), G(() => {
+      typeof x == "function" && d && !_.current && (_.current = !0, x());
+    }, [x, d]), et(() => {
+      const t = y.current;
+      return t != null && t.complete ? t.naturalWidth > 0 ? (t.style.transition = "none", t.style.opacity = "1", v(!0)) : (t.style.opacity = "0", r(!0)) : t && (t.style.transition = "opacity 0.3s", t.style.opacity = "0", t.onload = () => {
+        t.style.opacity = "1", v(!0), t.onload = null;
       }, t.onerror = () => {
-        S(!0), t.onerror = null;
+        r(!0), t.onerror = null;
       }), () => {
         t && (t.onload = null, t.onerror = null);
       };
-    }, [a]), I ? /* @__PURE__ */ L(
-      M,
+    }, [d]), O ? /* @__PURE__ */ T(
+      J,
       {
         ...e,
-        ref: u,
-        inlineCSS: x ? {
+        ref: m,
+        inlineCSS: M ? {
           position: "relative",
-          paddingTop: `calc(100% / ${n} * ${o})`,
+          paddingTop: `calc(100% / ${n} * ${i})`,
           minWidth: "100%",
-          borderRadius: l,
+          borderRadius: f,
           overflow: "hidden",
           ...e == null ? void 0 : e.inlineCSS
         } : {
           position: "relative",
           width: n,
           minWidth: n,
-          height: o,
-          borderRadius: l,
+          height: i,
+          borderRadius: f,
           overflow: "hidden",
           ...e == null ? void 0 : e.inlineCSS
         },
         children: [
-          T && /* @__PURE__ */ c(
-            U,
+          R && /* @__PURE__ */ s(
+            K,
             {
               width: "100%",
               height: "100%",
-              borderRadius: l || 0,
+              borderRadius: f || 0,
               inlineCSS: {
                 position: "absolute",
                 top: 0,
                 left: 0,
-                opacity: O ? 0 : 1,
+                opacity: g || c && L ? 0 : 1,
                 transition: "opacity 0.3s"
               }
             }
           ),
-          a && /* @__PURE__ */ L(Y, { children: [
-            /* @__PURE__ */ c(
+          c && C && d && /* @__PURE__ */ s(
+            "img",
+            {
+              src: C,
+              alt: "",
+              width: n,
+              height: i,
+              onLoad: D,
+              draggable: !1,
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                filter: "blur(5px)",
+                opacity: L && !g ? 1 : 0,
+                transition: "opacity 0.3s",
+                objectFit: h,
+                objectPosition: E
+              }
+            }
+          ),
+          d && /* @__PURE__ */ T(p, { children: [
+            /* @__PURE__ */ s(
               "img",
               {
-                ref: m,
-                src: j,
-                alt: E,
+                ref: y,
+                src: q,
+                alt: H,
                 width: n,
-                height: o,
-                onLoad: z,
+                height: i,
+                onLoad: A,
                 onError: B,
-                "aria-hidden": v,
-                ...d,
+                "aria-hidden": S,
+                draggable: !1,
+                ...u,
                 style: {
                   position: "absolute",
                   top: 0,
@@ -118,64 +160,86 @@ const k = 100, ot = Z(
                   width: "100%",
                   height: "100%",
                   transition: "opacity 0.3s",
-                  ...d.style
+                  ...u.style
                 }
               }
             ),
-            W && v && ((f == null ? void 0 : f()) || /* @__PURE__ */ c(V, {}))
+            U && S && ((a == null ? void 0 : a()) || /* @__PURE__ */ s(Q, {}))
           ] })
         ]
       }
-    ) : /* @__PURE__ */ L(
-      M,
+    ) : /* @__PURE__ */ T(
+      J,
       {
         ...e,
-        ref: u,
-        inlineCSS: x ? {
+        ref: m,
+        inlineCSS: M ? {
           position: "relative",
-          paddingTop: `calc(100% / ${n} * ${o})`,
+          paddingTop: `calc(100% / ${n} * ${i})`,
           minWidth: "100%",
           transition: "padding-top 0.2s",
-          borderRadius: l,
+          borderRadius: f,
           overflow: "hidden",
           ...e == null ? void 0 : e.inlineCSS
         } : {
           position: "relative",
           width: n,
           minWidth: n,
-          height: o,
-          borderRadius: l,
+          height: i,
+          borderRadius: f,
           overflow: "hidden",
           ...e == null ? void 0 : e.inlineCSS
         },
         children: [
-          T && /* @__PURE__ */ c(
-            U,
+          R && /* @__PURE__ */ s(
+            K,
             {
               width: "100%",
               height: "100%",
-              borderRadius: l || 0,
+              borderRadius: f || 0,
               inlineCSS: {
                 position: "absolute",
                 top: 0,
                 left: 0,
-                opacity: O ? 0 : 1,
+                opacity: g || c && L ? 0 : 1,
+                transition: "opacity 0.3s"
+              }
+            }
+          ),
+          c && C && /* @__PURE__ */ s(
+            "img",
+            {
+              src: C,
+              alt: "",
+              width: n,
+              height: i,
+              onLoad: D,
+              draggable: !1,
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                filter: "blur(5px)",
+                opacity: L && !g ? 1 : 0,
                 transition: "opacity 0.3s"
               }
             }
           ),
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ s(
             "img",
             {
-              ref: m,
-              src: j,
-              alt: E,
+              ref: y,
+              src: q,
+              alt: H,
               width: n,
-              height: o,
-              onLoad: z,
+              height: i,
+              onLoad: A,
               onError: B,
-              "aria-hidden": v,
-              ...d,
+              "aria-hidden": S,
+              draggable: !1,
+              ...u,
               style: {
                 position: "absolute",
                 top: 0,
@@ -183,16 +247,16 @@ const k = 100, ot = Z(
                 width: "100%",
                 height: "100%",
                 transition: "opacity 0.3s",
-                ...d.style
+                ...u.style
               }
             }
           ),
-          W && v && ((f == null ? void 0 : f()) || /* @__PURE__ */ c(V, {}))
+          U && S && ((a == null ? void 0 : a()) || /* @__PURE__ */ s(Q, {}))
         ]
       }
     );
   }
 );
 export {
-  ot as default
+  ct as default
 };

package/dist/shared/components/Masonry/MasonryBlock/MasonryBlock.mjs

@@ -1,40 +1,38 @@
-import { jsxs as C, jsx as b } from "react/jsx-runtime";
-import { forwardRef as W, useState as s, useRef as z, useImperativeHandle as L, useEffect as v, Children as D, isValidElement as V, cloneElement as $ } from "react";
-import { Flexbox as r, Skeleton as q } from "@dotss/ui";
-import G from "@dotss/ui/core/useTheme";
-import J from "../../Image/Image.mjs";
-import { findImageInChildren as K } from "../Masonry.utils.mjs";
-const Z = W(
+import { jsxs as w, jsx as u } from "react/jsx-runtime";
+import { forwardRef as H, useState as S, useRef as I, useImperativeHandle as A, useEffect as m, Children as B, isValidElement as F, cloneElement as W } from "react";
+import { Flexbox as s, Skeleton as z } from "@dotss/ui";
+import D from "@dotss/ui/core/useTheme";
+import L from "../../Image/Image.mjs";
+import { findImageInChildren as V } from "../Masonry.utils.mjs";
+const O = H(
   ({
-    children: y,
-    width: l = 0,
-    height: c = 0,
-    spacing: x = 2,
-    borderRadius: o = 0,
-    direction: a = "vertical",
-    setInnerRef: t,
-    sourceMetadata: d,
+    children: b,
+    width: c = 0,
+    height: d = 0,
+    spacing: C = 2,
+    borderRadius: t = 0,
+    direction: v = "vertical",
+    setInnerRef: o,
+    sourceMetadata: f,
     ...e
-  }, T) => {
-    var w;
-    const { spacing: E } = G(), f = K(y), p = (w = f == null ? void 0 : f.props) == null ? void 0 : w.src, n = d == null ? void 0 : d.find((i) => i.src === p), [g, j] = s((n == null ? void 0 : n.width) ?? l ?? 0), [h, I] = s((n == null ? void 0 : n.height) ?? c ?? 0), [u, k] = s(!p), [m, H] = s(!p), S = z(null), A = () => k(!0), B = (i) => (F) => {
-      H(!0), i == null || i(F);
-    };
-    return L(T, () => S.current), v(() => {
-      j((n == null ? void 0 : n.width) ?? l ?? 0), I((n == null ? void 0 : n.height) ?? c ?? 0);
-    }, [l, c, n == null ? void 0 : n.width, n == null ? void 0 : n.height]), v(() => {
-      const i = setTimeout(() => {
-        k(!0);
+  }, x) => {
+    var k;
+    const { spacing: a } = D(), h = V(b), y = (k = h == null ? void 0 : h.props) == null ? void 0 : k.src, i = f == null ? void 0 : f.find((n) => n.src === y), [l, j] = S((i == null ? void 0 : i.width) ?? c ?? 0), [r, T] = S((i == null ? void 0 : i.height) ?? d ?? 0), [g, E] = S(!1), p = I(null);
+    return A(x, () => p.current), m(() => {
+      j((i == null ? void 0 : i.width) ?? c ?? 0), T((i == null ? void 0 : i.height) ?? d ?? 0);
+    }, [c, d, i == null ? void 0 : i.width, i == null ? void 0 : i.height]), m(() => {
+      const n = setTimeout(() => {
+        E(!0);
       }, 500);
       return () => {
-        clearTimeout(i);
+        clearTimeout(n);
       };
-    }, []), v(() => {
-      t == null || t(S.current);
-    }, [t]), /* @__PURE__ */ C(
-      r,
+    }, [l, r]), m(() => {
+      o == null || o(p.current);
+    }, [o]), /* @__PURE__ */ w(
+      s,
       {
-        ref: S,
+        ref: p,
         flexDirection: "column",
         ...e,
         inlineCSS: {
@@ -42,18 +40,17 @@ const Z = W(
           ...e == null ? void 0 : e.inlineCSS
         },
         children: [
-          a === "vertical" && /* @__PURE__ */ b(
-            r,
+          v === "vertical" && /* @__PURE__ */ u(
+            s,
             {
               inlineCSS: {
-                minHeight: E.content(x)
+                minHeight: a.content(C)
               }
             }
           ),
-          /* @__PURE__ */ C(
-            r,
+          /* @__PURE__ */ u(
+            s,
             {
-              onTransitionEnd: A,
               inlineCSS: {
                 position: "relative",
                 overflow: "hidden",
@@ -64,64 +61,64 @@ const Z = W(
                 },
                 ...e == null ? void 0 : e.inlineCSS
               },
-              style: a === "vertical" ? {
-                borderRadius: o,
-                paddingTop: `calc(${h / g} * 100%)`,
-                transition: "transform 0.3s 0.1s, padding-top 0.3s 0.1s"
+              style: v === "vertical" ? {
+                borderRadius: t,
+                paddingTop: `calc(${r / l} * 100%)`,
+                transition: "padding-top 0.3s 0.1s"
               } : {
-                borderRadius: o,
-                paddingLeft: g,
-                paddingTop: h,
-                transition: "transform 0.3s 0.1s, padding-top 0.3s 0.1s, padding-left 0.3s 0.1s"
+                borderRadius: t,
+                paddingLeft: l,
+                paddingTop: r,
+                transition: "padding-top 0.3s 0.1s, padding-left 0.3s 0.1s"
               },
-              children: [
-                /* @__PURE__ */ b(
-                  r,
-                  {
-                    inlineCSS: {
-                      position: "absolute",
-                      top: 0,
-                      left: 0,
-                      width: "100%",
-                      height: "100%",
-                      overflow: "hidden",
-                      borderRadius: o + (m && u ? 0 : 2),
-                      transition: "border-radius 0.3s 0.1s",
-                      zIndex: 1
-                    },
-                    children: D.toArray(y).filter(V).map((i) => i.type === J || i.type === "img" ? $(i, {
-                      width: g,
-                      height: h,
+              children: /* @__PURE__ */ w(
+                s,
+                {
+                  inlineCSS: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: "100%",
+                    overflow: "hidden",
+                    transform: "translate3d(0, 0, 0)",
+                    borderRadius: t + (g ? 0 : 2),
+                    transition: "border-radius 0.3s 0.1s",
+                    zIndex: 1
+                  },
+                  children: [
+                    /* @__PURE__ */ u(
+                      z,
+                      {
+                        borderRadius: t,
+                        inlineCSS: {
+                          position: "absolute",
+                          top: 0,
+                          left: 0,
+                          width: "100%",
+                          height: "100%",
+                          opacity: !y || g ? 0 : 1,
+                          transition: "opacity 0.3s 0.1s",
+                          pointerEvents: g ? "none" : void 0,
+                          zIndex: 2
+                        }
+                      }
+                    ),
+                    B.toArray(b).filter(F).map((n) => n.type === L || n.type === "img" ? W(n, {
+                      width: l,
+                      height: r,
                       draggable: !1,
                       style: {
                         overflow: "hidden",
                         objectFit: "cover",
-                        ...i.props.style
+                        ...n.props.style
                       },
-                      ...i.props,
-                      onLoad: B(i.props.onLoad),
-                      enableFallback: !1
-                    }) : i)
-                  }
-                ),
-                /* @__PURE__ */ b(
-                  q,
-                  {
-                    borderRadius: o,
-                    inlineCSS: {
-                      position: "absolute",
-                      top: 0,
-                      left: 0,
-                      width: "100%",
-                      height: "100%",
-                      zIndex: 2,
-                      opacity: m && u ? 0 : 1,
-                      transition: "opacity 0.3s 0.1s",
-                      pointerEvents: m && u ? "none" : void 0
-                    }
-                  }
-                )
-              ]
+                      ...n.props,
+                      enableFallback: !0
+                    }) : n)
+                  ]
+                }
+              )
             }
           )
         ]
@@ -130,5 +127,5 @@ const Z = W(
   }
 );
 export {
-  Z as default
+  O as default
 };

package/dist/shared/components/Scheduler/Scheduler.d.ts

@@ -7,10 +7,13 @@ export interface SchedulerProps extends FlexboxProps {
         text: string;
         color?: string;
     }[];
+    minDate?: Dayjs;
+    maxDate?: Dayjs;
     minScheduleBlockHeight?: number;
     maxScheduleBlockHeight?: number;
     renderScheduleBlock?: (date: string, time: string) => ReactNode;
     onDateChange?: (date: Dayjs) => void;
+    onDateChangeCanceled?: (date: Dayjs, direction: 'prev' | 'next') => void;
 }
-declare function Scheduler({ children, date, legend, minScheduleBlockHeight, maxScheduleBlockHeight, renderScheduleBlock, onDateChange, ...props }: SchedulerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Scheduler({ children, date, legend, minDate, maxDate, minScheduleBlockHeight, maxScheduleBlockHeight, renderScheduleBlock, onDateChange, onDateChangeCanceled, ...props }: SchedulerProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default Scheduler;