@dotss/tictoccroc 0.4.1 → 0.5.0

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

@@ -1,289 +1,247 @@
-import { jsxs as H, jsx as l, Fragment as nt } from "react/jsx-runtime";
-import { forwardRef as ot, useRef as U, useImperativeHandle as it, useState as S, useEffect as V } from "react";
-import { Flexbox as _, Skeleton as z } from "@dotss/ui";
-import st from "../../hooks/useInView/useInView.mjs";
-import lt from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
-import O from "../../utils/getImageUrl/getImageUrl.mjs";
-import B from "./Image.error.mjs";
-const rt = ot(
-  ({
-    src: s,
-    width: e,
-    height: o,
-    fit: y = "cover",
-    position: m = "center",
-    alt: q,
-    scale: T = 2,
-    onLoad: A,
-    onLazyLoad: $,
-    lazy: D = !1,
-    borderRadius: c,
-    disabledResizing: L = !1,
-    withIntrinsicRatio: G = !1,
-    enableBlurPlaceholder: r = !1,
-    enableFallback: J = !1,
-    enableErrorFallback: K = !0,
-    renderErrorFallback: u,
-    wrapperProps: n = {},
-    onError: M,
-    ...g
-  }, w) => {
-    const C = U(null), N = U(!1), I = U(null);
-    it(w, () => I.current);
-    const { isInView: p } = st(C, {
-      threshold: 0.4
-    }), [v, F] = S(!1), [h, d] = S(!1), [x, a] = S(!1), [W, k] = S(!1), [Q, R] = S(
-      O({
-        mode: "original",
-        src: s,
-        width: e,
-        height: o,
-        fit: y,
-        position: m,
-        scale: T,
-        disabledResizing: L
-      })
-    ), b = s == null ? void 0 : s.endsWith(".heic"), E = r ? O({
-      mode: "blur",
-      src: s,
-      width: e,
-      fit: y,
-      position: m,
-      scale: 1 / 3,
-      disabledResizing: L
-    }) : null, X = (t) => {
-      d(!0), a(!1), typeof A == "function" && A(t);
-    }, Y = (t) => {
-      typeof M == "function" && M(t.nativeEvent), a(!0), d(!1);
-    }, Z = () => k(!0);
-    return V(() => {
-      if (D && C.current) {
-        const t = () => {
-          p && F(!0);
-        }, j = () => {
-          var f;
-          (f = window.appScreenContent) == null || f.addEventListener("scroll", t), window.addEventListener("resize", t), window.addEventListener("orientationchange", t);
-        }, i = () => {
-          var f;
-          (f = window.appScreenContent) == null || f.removeEventListener("scroll", t), window.removeEventListener("resize", t), window.removeEventListener("orientationchange", t);
-        };
-        return t(), j(), i;
-      }
-    }), V(() => {
-      typeof $ == "function" && v && !N.current && (N.current = !0, $());
-    }, [$, v]), lt(() => {
-      const t = I.current, j = (i) => {
-        window.fetch(s).then(async (f) => {
-          const P = await f.blob(), tt = (await import("heic2any")).default, et = await tt({ blob: P, toType: "image/png" });
-          R(URL.createObjectURL(et)), i.onload = () => {
-            i.style.opacity = "1", d(!0), a(!1), i.onload = null, i.onerror = null;
-          }, i.onerror = () => {
-            a(!0), d(!1), i.onload = null, i.onerror = null;
-          };
-        });
-      };
-      return t != null && t.complete ? b ? t.src.startsWith("blob:") || (t.style.transition = "opacity 0.3s", t.style.opacity = "0", j(t)) : t.naturalWidth > 0 ? (t.style.transition = "none", t.style.opacity = "1", d(!0)) : (t.style.opacity = "0", a(!0)) : t && (t.style.transition = "opacity 0.3s", t.style.opacity = "0", t.onload = () => {
-        t.style.opacity = "1", d(!0), t.onload = null;
-      }, t.onerror = () => {
-        if (!b) {
-          a(!0), t.onerror = null;
-          return;
-        }
-        a(!1), t.style.transition = "opacity 0.3s", t.style.opacity = "0", j(t);
-      }), () => {
-        t && (t.onload = null, t.onerror = null);
-      };
-    }, [v, s, b]), V(() => {
-      R(
-        O({
-          mode: "original",
-          src: s,
-          width: e,
-          height: o,
-          fit: y,
-          position: m,
-          scale: T,
-          disabledResizing: L
-        })
-      );
-    }, [s, e, o, y, m, T, L]), D ? /* @__PURE__ */ H(
-      _,
-      {
-        ...n,
-        ref: C,
-        inlineCSS: G ? {
-          position: "relative",
-          paddingTop: `calc(100% / ${e} * ${o})`,
-          minWidth: "100%",
-          borderRadius: c,
-          overflow: "hidden",
-          ...n == null ? void 0 : n.inlineCSS
-        } : {
-          position: "relative",
-          width: e,
-          minWidth: e,
-          height: o,
-          borderRadius: c,
-          overflow: "hidden",
-          ...n == null ? void 0 : n.inlineCSS
-        },
-        children: [
-          J && /* @__PURE__ */ l(
-            z,
-            {
-              width: "100%",
-              height: "100%",
-              borderRadius: c || 0,
-              inlineCSS: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                opacity: h || r && W ? 0 : 1,
-                transition: "opacity 0.3s"
-              }
-            }
-          ),
-          r && E && v && /* @__PURE__ */ l(
-            "img",
-            {
-              src: E,
-              alt: "",
-              width: e,
-              height: o,
-              onLoad: Z,
-              draggable: !1,
-              style: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                height: "100%",
-                filter: "blur(5px)",
-                opacity: W && !h ? 1 : 0,
-                transition: "opacity 0.3s",
-                objectFit: y,
-                objectPosition: m
-              }
-            }
-          ),
-          v && /* @__PURE__ */ H(nt, { children: [
-            /* @__PURE__ */ l(
-              "img",
-              {
-                ref: I,
-                src: Q,
-                alt: q,
-                width: e,
-                height: o,
-                onLoad: X,
-                onError: Y,
-                "aria-hidden": x,
-                draggable: !1,
-                ...g,
-                style: {
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  width: "100%",
-                  height: "100%",
-                  transition: "opacity 0.3s",
-                  ...g.style
-                }
-              }
-            ),
-            K && x && ((u == null ? void 0 : u()) || /* @__PURE__ */ l(B, {}))
-          ] })
-        ]
-      }
-    ) : /* @__PURE__ */ H(
-      _,
-      {
-        ...n,
-        ref: C,
-        inlineCSS: G ? {
-          position: "relative",
-          paddingTop: `calc(100% / ${e} * ${o})`,
-          minWidth: "100%",
-          transition: "padding-top 0.2s",
-          borderRadius: c,
-          overflow: "hidden",
-          ...n == null ? void 0 : n.inlineCSS
-        } : {
-          position: "relative",
-          width: e,
-          minWidth: e,
-          height: o,
-          borderRadius: c,
-          overflow: "hidden",
-          ...n == null ? void 0 : n.inlineCSS
-        },
-        children: [
-          J && /* @__PURE__ */ l(
-            z,
-            {
-              width: "100%",
-              height: "100%",
-              borderRadius: c || 0,
-              inlineCSS: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                opacity: h || r && W ? 0 : 1,
-                transition: "opacity 0.3s"
-              }
-            }
-          ),
-          r && E && /* @__PURE__ */ l(
-            "img",
-            {
-              src: E,
-              alt: "",
-              width: e,
-              height: o,
-              onLoad: Z,
-              draggable: !1,
-              style: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                height: "100%",
-                filter: "blur(5px)",
-                opacity: W && !h ? 1 : 0,
-                transition: "opacity 0.3s"
-              }
-            }
-          ),
-          /* @__PURE__ */ l(
-            "img",
-            {
-              ref: I,
-              src: Q,
-              alt: q,
-              width: e,
-              height: o,
-              onLoad: X,
-              onError: Y,
-              "aria-hidden": x,
-              draggable: !1,
-              ...g,
-              style: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                height: "100%",
-                transition: "opacity 0.3s",
-                ...g.style
-              }
-            }
-          ),
-          K && x && ((u == null ? void 0 : u()) || /* @__PURE__ */ l(B, {}))
-        ]
-      }
-    );
-  }
-);
-export {
-  rt as default
-};
+import e from "../../hooks/useInView/index.mjs";
+import t from "../../hooks/useIsomorphicLayoutEffect/index.mjs";
+import n from "../../utils/getImageUrl/index.mjs";
+import r from "./Image.error.mjs";
+import { forwardRef as i, useEffect as a, useImperativeHandle as o, useRef as s, useState as c } from "react";
+import { Flexbox as l, Skeleton as u } from "@dotss/ui";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region shared/components/Image/Image.tsx
+var m = i(({ src: i, width: m, height: h, fit: g = "cover", position: _ = "center", alt: v, scale: y = 2, onLoad: b, onLazyLoad: x, lazy: S = !1, borderRadius: C, disabledResizing: w = !1, withIntrinsicRatio: T = !1, enableBlurPlaceholder: E = !1, enableFallback: D = !1, enableErrorFallback: O = !0, renderErrorFallback: k, wrapperProps: A = {}, inViewOptions: j = {}, onError: M, ...N }, P) => {
+	let F = s(null), I = s(!1), L = s(null);
+	o(P, () => L.current);
+	let { isInView: R } = e(F, {
+		threshold: .4,
+		...j
+	}), [z, B] = c(!1), [V, H] = c(!1), [U, W] = c(!1), [G, K] = c(!1), [q, J] = c(n({
+		mode: "original",
+		src: i,
+		width: m,
+		height: h,
+		fit: g,
+		position: _,
+		scale: y,
+		disabledResizing: w
+	})), Y = i?.endsWith(".heic"), X = E ? n({
+		mode: "blur",
+		src: i,
+		width: m,
+		fit: g,
+		position: _,
+		scale: 1 / 3,
+		disabledResizing: w
+	}) : null, Z = (e) => {
+		H(!0), W(!1), typeof b == "function" && b(e);
+	}, Q = (e) => {
+		typeof M == "function" && M(e.nativeEvent), W(!0), H(!1);
+	}, $ = () => K(!0);
+	return a(() => {
+		if (S && F.current) {
+			let e = () => {
+				R && B(!0);
+			};
+			return e(), window.appScreenContent?.addEventListener("scroll", e), window.addEventListener("resize", e), window.addEventListener("orientationchange", e), () => {
+				window.appScreenContent?.removeEventListener("scroll", e), window.removeEventListener("resize", e), window.removeEventListener("orientationchange", e);
+			};
+		}
+	}), a(() => {
+		typeof x == "function" && z && !I.current && (I.current = !0, x());
+	}, [x, z]), t(() => {
+		let e = L.current, t = (e) => {
+			window.fetch(i).then(async (t) => {
+				let n = await t.blob(), r = (await import("heic2any")).default, i = await r({
+					blob: n,
+					toType: "image/png"
+				});
+				J(URL.createObjectURL(i)), e.onload = () => {
+					e.style.opacity = "1", H(!0), W(!1), e.onload = null, e.onerror = null;
+				}, e.onerror = () => {
+					W(!0), H(!1), e.onload = null, e.onerror = null;
+				};
+			});
+		};
+		return e?.complete ? Y ? e.src.startsWith("blob:") || (e.style.transition = "opacity 0.3s", e.style.opacity = "0", t(e)) : e.naturalWidth > 0 ? (e.style.transition = "none", e.style.opacity = "1", H(!0)) : (e.style.opacity = "0", W(!0)) : e && (e.style.transition = "opacity 0.3s", e.style.opacity = "0", e.onload = () => {
+			e.style.opacity = "1", H(!0), e.onload = null;
+		}, e.onerror = () => {
+			if (!Y) {
+				W(!0), e.onerror = null;
+				return;
+			}
+			W(!1), e.style.transition = "opacity 0.3s", e.style.opacity = "0", t(e);
+		}), () => {
+			e && (e.onload = null, e.onerror = null);
+		};
+	}, [
+		z,
+		i,
+		Y
+	]), a(() => {
+		J(n({
+			mode: "original",
+			src: i,
+			width: m,
+			height: h,
+			fit: g,
+			position: _,
+			scale: y,
+			disabledResizing: w
+		}));
+	}, [
+		i,
+		m,
+		h,
+		g,
+		_,
+		y,
+		w
+	]), S ? /* @__PURE__ */ p(l, {
+		...A,
+		ref: F,
+		inlineCSS: T ? {
+			position: "relative",
+			paddingTop: `calc(100% / ${m} * ${h})`,
+			minWidth: "100%",
+			borderRadius: C,
+			overflow: "hidden",
+			...A?.inlineCSS
+		} : {
+			position: "relative",
+			width: m,
+			minWidth: m,
+			height: h,
+			borderRadius: C,
+			overflow: "hidden",
+			...A?.inlineCSS
+		},
+		children: [
+			D && /* @__PURE__ */ f(u, {
+				width: "100%",
+				height: "100%",
+				borderRadius: C || 0,
+				inlineCSS: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					opacity: V || E && G ? 0 : 1,
+					transition: "opacity 0.3s"
+				}
+			}),
+			E && X && z && /* @__PURE__ */ f("img", {
+				src: X,
+				alt: "",
+				width: m,
+				height: h,
+				onLoad: $,
+				draggable: !1,
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					height: "100%",
+					filter: "blur(5px)",
+					opacity: G && !V ? 1 : 0,
+					transition: "opacity 0.3s",
+					objectFit: g,
+					objectPosition: _
+				}
+			}),
+			z && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("img", {
+				ref: L,
+				src: q,
+				alt: v,
+				width: m,
+				height: h,
+				onLoad: Z,
+				onError: Q,
+				"aria-hidden": U,
+				draggable: !1,
+				...N,
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					height: "100%",
+					transition: "opacity 0.3s",
+					...N.style
+				}
+			}), O && U && (k?.() || /* @__PURE__ */ f(r, {}))] })
+		]
+	}) : /* @__PURE__ */ p(l, {
+		...A,
+		ref: F,
+		inlineCSS: T ? {
+			position: "relative",
+			paddingTop: `calc(100% / ${m} * ${h})`,
+			minWidth: "100%",
+			transition: "padding-top 0.2s",
+			borderRadius: C,
+			overflow: "hidden",
+			...A?.inlineCSS
+		} : {
+			position: "relative",
+			width: m,
+			minWidth: m,
+			height: h,
+			borderRadius: C,
+			overflow: "hidden",
+			...A?.inlineCSS
+		},
+		children: [
+			D && /* @__PURE__ */ f(u, {
+				width: "100%",
+				height: "100%",
+				borderRadius: C || 0,
+				inlineCSS: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					opacity: V || E && G ? 0 : 1,
+					transition: "opacity 0.3s"
+				}
+			}),
+			E && X && /* @__PURE__ */ f("img", {
+				src: X,
+				alt: "",
+				width: m,
+				height: h,
+				onLoad: $,
+				draggable: !1,
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					height: "100%",
+					filter: "blur(5px)",
+					opacity: G && !V ? 1 : 0,
+					transition: "opacity 0.3s"
+				}
+			}),
+			/* @__PURE__ */ f("img", {
+				ref: L,
+				src: q,
+				alt: v,
+				width: m,
+				height: h,
+				onLoad: Z,
+				onError: Q,
+				"aria-hidden": U,
+				draggable: !1,
+				...N,
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					height: "100%",
+					transition: "opacity 0.3s",
+					...N.style
+				}
+			}),
+			O && U && (k?.() || /* @__PURE__ */ f(r, {}))
+		]
+	});
+});
+//#endregion
+export { m as default };

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

@@ -1,6 +1,6 @@
-import a from "./Image.mjs";
-import { default as m } from "./Image.error.mjs";
-export {
-  m as ImageError,
-  a as default
-};
+import e from "./Image.error.mjs";
+import t from "./Image.mjs";
+//#region shared/components/Image/index.ts
+var n = t;
+//#endregion
+export { e as ImageError, n as default };

package/dist/shared/components/LoadingAnnouncer/LoadingAnnouncer.mjs

@@ -1,19 +1,20 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useState as i, useEffect as l } from "react";
-import { Typography as c } from "@dotss/ui";
-function d({
-  delay: e = 1e3,
-  message: t = "데이터를 불러오는 중입니다.",
-  ...o
-}) {
-  const [n, r] = i(!1);
-  return l(() => {
-    const u = setTimeout(() => {
-      r(!0);
-    }, e);
-    return () => clearTimeout(u);
-  }, [e]), n ? /* @__PURE__ */ s(c, { role: "status", ...o, visuallyHidden: !0, children: t }) : null;
+import { useEffect as e, useState as t } from "react";
+import { Typography as n } from "@dotss/ui";
+import { jsx as r } from "react/jsx-runtime";
+//#region shared/components/LoadingAnnouncer/LoadingAnnouncer.tsx
+function i({ delay: i = 1e3, message: a = "데이터를 불러오는 중입니다.", ...o }) {
+	let [s, c] = t(!1);
+	return e(() => {
+		let e = setTimeout(() => {
+			c(!0);
+		}, i);
+		return () => clearTimeout(e);
+	}, [i]), s ? /* @__PURE__ */ r(n, {
+		role: "status",
+		...o,
+		visuallyHidden: !0,
+		children: a
+	}) : null;
 }
-export {
-  d as default
-};
+//#endregion
+export { i as default };

package/dist/shared/components/LoadingAnnouncer/index.mjs

@@ -1,4 +1,5 @@
-import n from "./LoadingAnnouncer.mjs";
-export {
-  n as default
-};
+import e from "./LoadingAnnouncer.mjs";
+//#region shared/components/LoadingAnnouncer/index.ts
+var t = e;
+//#endregion
+export { t as default };