@dotss/tictoccroc 0.0.25 → 0.0.27

package/dist/shared/components/Carousel/Carousel.mjs

@@ -1,20 +1,20 @@
 import { jsxs as le, jsx as A } from "react/jsx-runtime";
-import { useState as I, useRef as p, Children as Q, isValidElement as ue, useCallback as fe, useEffect as T, cloneElement as de } from "react";
+import { useState as I, useRef as p, Children as Z, isValidElement as ue, useCallback as fe, useEffect as T, cloneElement as de } from "react";
 import { Flexbox as P } from "@dotss/ui";
 import he from "@dotss/ui/core/useTheme";
 import me from "./CarouselSlide/CarouselSlide.mjs";
 const ge = 5;
 function ye({
-  children: Z,
+  children: z,
   spacing: K = 2,
   edgeSpacing: O = 4,
   rowCount: a = 2,
   step: W = 1,
-  renderPagination: z,
+  renderPagination: $,
   ...C
 }) {
-  const { spacing: $ } = he(), [l, Y] = I(1), [w, ee] = I(1), [te, ne] = I(0), L = p(null), c = p(null), u = p(null), X = p(0), F = p(0), b = p(0), S = p(!1), D = p(!0), k = p(0), v = $.content(K), E = $.content(O), N = Q.toArray(Z).filter(ue).filter((e) => e.type === me), x = N.length, j = (e, t) => {
-    X.current = e, F.current = t;
+  const { spacing: Y } = he(), [l, X] = I(1), [w, ee] = I(1), [te, ne] = I(0), L = p(null), c = p(null), u = p(null), F = p(0), N = p(0), b = p(0), S = p(!1), D = p(!0), k = p(0), v = Y.content(K), E = Y.content(O), j = Z.toArray(z).filter(ue).filter((e) => e.type === me), x = j.length, H = (e, t) => {
+    F.current = e, N.current = t;
   }, M = () => {
     var o;
     if (!c.current || !S.current) return;
@@ -26,30 +26,30 @@ function ye({
     (e, t = 0) => {
       var h, g, y;
       if (!c.current) return;
-      Y(e);
+      X(e);
       const n = e === 1, f = e === w, s = (((h = L.current) == null ? void 0 : h.offsetWidth) || 0) - E, o = (((y = (g = u.current) == null ? void 0 : g.children[0]) == null ? void 0 : y.clientWidth) || 0) + v, i = (s - o * Math.floor(s / o) - v) / 2, d = o * (e - 1) - i;
       n ? c.current.style.transform = `translate3d(${t}px, 0, 0)` : f ? c.current.style.transform = `translate3d(${-(d - i) + t}px, 0, 0)` : c.current.style.transform = `translate3d(${-d + t}px, 0, 0)`;
     },
     [E, v, w]
-  ), re = (e) => j(e.touches[0].clientX, e.touches[0].clientY), se = (e) => {
-    S.current = !0, j(e.clientX, e.clientY);
+  ), re = (e) => H(e.touches[0].clientX, e.touches[0].clientY), se = (e) => {
+    S.current = !0, H(e.clientX, e.clientY);
   }, oe = (e) => {
     c.current && (c.current.style.transition = "transform 0.2s", c.current.style.cursor = "grab", R(e));
   }, ce = (e) => (t) => {
-    var U, q, G, V, _, B;
+    var q, G, V, _, B, J;
     t.stopPropagation();
-    const n = Array.from(((U = u.current) == null ? void 0 : U.children) || []).indexOf(t.currentTarget), f = (((q = L.current) == null ? void 0 : q.offsetWidth) || 0) - E * 2, s = (((V = (G = u.current) == null ? void 0 : G.children[0]) == null ? void 0 : V.clientWidth) || 0) + v, i = Math.floor(f / (s / W)) * a, d = (l - 1) * i, h = d + i - 1, g = ((_ = u.current) == null ? void 0 : _.children.length) || 0, y = n % a, H = Math.floor(n / a);
+    const n = Array.from(((q = u.current) == null ? void 0 : q.children) || []).indexOf(t.currentTarget), f = (((G = L.current) == null ? void 0 : G.offsetWidth) || 0) - E * 2, s = (((_ = (V = u.current) == null ? void 0 : V.children[0]) == null ? void 0 : _.clientWidth) || 0) + v, i = Math.floor(f / (s / W)) * a, d = (l - 1) * i, h = d + i - 1, g = ((B = u.current) == null ? void 0 : B.children.length) || 0, y = n % a, U = Math.floor(n / a);
     let m = n;
     switch (t.key) {
       case "ArrowRight": {
         t.preventDefault();
-        const r = (H + 1) * a + y;
+        const r = (U + 1) * a + y;
         r < g && (m = r);
         break;
       }
       case "ArrowLeft": {
         t.preventDefault();
-        const r = (H - 1) * a + y;
+        const r = (U - 1) * a + y;
         r >= 0 && (m = r);
         break;
       }
@@ -74,13 +74,13 @@ function ye({
         return;
     }
     if (m >= d && m <= h) {
-      const r = (B = u.current) == null ? void 0 : B.children[m];
+      const r = (J = u.current) == null ? void 0 : J.children[m];
       r == null || r.focus();
       return;
     }
     m >= 0 && m < g && (k.current = requestAnimationFrame(() => {
-      var J;
-      const r = (J = u.current) == null ? void 0 : J.children[m];
+      var Q;
+      const r = (Q = u.current) == null ? void 0 : Q.children[m];
       r == null || r.focus();
     })), e == null || e(t);
   }, ie = (e) => {
@@ -98,16 +98,16 @@ function ye({
     const e = () => {
       var i, d, h;
       const t = (((i = L.current) == null ? void 0 : i.offsetWidth) || 0) - E * 2, n = (((h = (d = u.current) == null ? void 0 : d.children[0]) == null ? void 0 : h.clientWidth) || 0) + v, f = Math.floor(t / (n / W)), s = Math.ceil(x / (a || 1)), o = Math.max(s - (f - 1), 1);
-      Y((g) => g > o ? o : g), ee(o);
+      X((g) => g > o ? o : g), ee(o);
     };
     return e(), window.addEventListener("resize", e), () => {
       window.removeEventListener("resize", e);
     };
-  }, [E, v, x, W, a]), T(() => {
+  }, [E, v, x, W, a, z]), T(() => {
     const e = c.current, t = (s, o, i) => {
       if (!e || w <= 1) return;
-      e.style.transition = "none", e.style.cursor = "grabbing", b.current = s - X.current;
-      const d = o - F.current, h = 5;
+      e.style.transition = "none", e.style.cursor = "grabbing", b.current = s - F.current;
+      const d = o - N.current, h = 5;
       S.current = S.current || Math.abs(b.current) > h && Math.abs(d) < h * 2, S.current && (i.cancelable && (i.stopPropagation(), i.preventDefault()), e.style.transition = "none", e.style.cursor = "grabbing", R(l, b.current));
     }, n = (s) => t(s.touches[0].clientX, s.touches[0].clientY, s), f = (s) => {
       S.current && t(s.clientX, s.clientY, s);
@@ -174,8 +174,8 @@ function ye({
                       gridTemplateRows: "min-content",
                       transform: "translate3d(0, 0, 0)"
                     },
-                    children: Q.map(
-                      N,
+                    children: Z.map(
+                      j,
                       (e, t) => {
                         var n;
                         return de(e, {
@@ -201,7 +201,7 @@ function ye({
             )
           }
         ),
-        typeof z == "function" && z({ page: l, totalPages: w, onChange: oe })
+        typeof $ == "function" && $({ page: l, totalPages: w, onChange: oe })
       ]
     }
   );

package/dist/shared/components/ChatKit/BotMessage/BotMessage.d.ts

@@ -30,7 +30,7 @@ export interface BotMessageProps extends Omit<FlexboxProps, 'id' | 'title'> {
         botMessageType: BotMessageType;
         ctaType?: BotMessageCtaType | null;
         ctaTargetId?: number | null;
-        ctaTargetTable?: string | null;
+        ctaTargetTable?: BotMessageCtaTargetTable | null;
         subCtaTargetTable?: BotMessageSubCtaTargetTable | null;
         subCtaTargetId?: number | null;
     }) => void;

package/dist/shared/components/ChatKit/Message/Message.d.ts

@@ -11,6 +11,7 @@ export type BaseMessageProps = {
     showAvatar?: boolean;
     showTime?: boolean;
     openMenu?: never;
+    onClickAvatar?: () => void;
     onCloseMenu?: never;
     onClickMenu?: never;
     onView?: () => void;
@@ -28,6 +29,7 @@ export type BaseMessageProps = {
     showAvatar?: never;
     showTime?: never;
     openMenu?: boolean;
+    onClickAvatar?: () => void;
     onCloseMenu?: () => void;
     onClickMenu?: () => void;
     onView?: never;
@@ -36,5 +38,5 @@ export type BaseMessageProps = {
     onViewAll?: () => void;
 };
 export type MessageProps = Omit<FlexboxProps, 'id' | 'title'> & BaseMessageProps;
-declare function Message({ id, content, mine, avatarUrl, unreadUserCount, regDatetime, status, onView, openMenu, onCloseMenu, onClickMenu, onResend, onDelete, onViewAll, showAvatar, showTime, ref, inlineCSS, ...props }: MessageProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Message({ id, content, mine, avatarUrl, unreadUserCount, regDatetime, status, onView, openMenu, onClickAvatar, onCloseMenu, onClickMenu, onResend, onDelete, onViewAll, showAvatar, showTime, ref, inlineCSS, ...props }: MessageProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default Message;

package/dist/shared/components/ChatKit/Message/Message.mjs

@@ -1,120 +1,138 @@
-import { jsxs as t, jsx as r, Fragment as O } from "react/jsx-runtime";
-import { useRef as b, useImperativeHandle as q, useEffect as x } from "react";
-import { Flexbox as s, Typography as C, Button as J, Icon as I, Menu as K, MenuBlock as P, CircularProgressIndicator as Q } from "@dotss/ui";
-import W from "@dotss/ui/core/useTheme";
-import { useCheckHoverPossible as X } from "@dotss/ui/hooks";
-import { MenuButton as Y } from "@dotss/ui/Menu";
-import Z from "dayjs";
-import _ from "../../Image/Image.mjs";
-import V from "../../../hooks/useInView/useInView.mjs";
-function ar({
-  id: v,
-  content: p = "",
-  mine: e = !1,
-  avatarUrl: f = "",
-  unreadUserCount: h = 0,
-  regDatetime: $,
-  status: n,
-  onView: c,
+import { jsxs as n, jsx as e, Fragment as A } from "react/jsx-runtime";
+import { useRef as x, useImperativeHandle as J, useEffect as y } from "react";
+import { Flexbox as d, Typography as v, Button as Q, Icon as I, Menu as W, MenuBlock as P, CircularProgressIndicator as X } from "@dotss/ui";
+import Y from "@dotss/ui/core/useTheme";
+import { useCheckHoverPossible as Z } from "@dotss/ui/hooks";
+import { MenuButton as _ } from "@dotss/ui/Menu";
+import V from "dayjs";
+import U from "../../Image/Image.mjs";
+import M from "../../../hooks/useInView/useInView.mjs";
+function de({
+  id: C,
+  content: f = "",
+  mine: i = !1,
+  avatarUrl: h = "",
+  unreadUserCount: u = 0,
+  regDatetime: T,
+  status: l,
+  onView: m,
   openMenu: g,
-  onCloseMenu: i,
-  onClickMenu: z,
-  onResend: u,
-  onDelete: S,
-  onViewAll: B,
-  showAvatar: k,
-  showTime: D,
+  onClickAvatar: c,
+  onCloseMenu: t,
+  onClickMenu: $,
+  onResend: S,
+  onDelete: b,
+  onViewAll: z,
+  showAvatar: w,
+  showTime: B,
   ref: R,
-  inlineCSS: T,
-  ...j
+  inlineCSS: j,
+  ...G
 }) {
   const {
-    palette: { brand: y, grey: o, etc: A },
-    spacing: w
-  } = W(), { isHoverPossible: G } = X(), l = b(null), E = b(null), m = b(null);
-  q(R, () => l.current);
-  const F = V(l), L = 300, d = n === "FAILED", N = p.length > L, H = (a) => {
-    a === "resend" ? (i == null || i(), m.current = setTimeout(() => {
-      u == null || u();
-    }, 200)) : a === "delete" && (i == null || i(), m.current = setTimeout(() => {
+    palette: { brand: k, grey: a, etc: H },
+    spacing: E
+  } = Y(), { isHoverPossible: K } = Z(), o = x(null), D = x(null), p = x(null);
+  J(R, () => o.current);
+  const F = M(o), L = 300, s = l === "FAILED", N = f.length > L, O = (r) => {
+    r === "resend" ? (t == null || t(), p.current = setTimeout(() => {
       S == null || S();
+    }, 200)) : r === "delete" && (t == null || t(), p.current = setTimeout(() => {
+      b == null || b();
     }, 200));
+  }, q = (r) => {
+    (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.currentTarget.click());
   };
-  return x(() => {
-    F && (c == null || c());
-  }, [F, c]), x(() => {
-    var a;
-    d && ((a = l == null ? void 0 : l.current) == null || a.scrollIntoView());
-  }, [d]), x(() => () => {
-    m.current && clearTimeout(m.current);
-  }, []), /* @__PURE__ */ t(
-    s,
+  return y(() => {
+    F && (m == null || m());
+  }, [F, m]), y(() => {
+    var r;
+    s && ((r = o == null ? void 0 : o.current) == null || r.scrollIntoView());
+  }, [s]), y(() => () => {
+    p.current && clearTimeout(p.current);
+  }, []), /* @__PURE__ */ n(
+    d,
     {
-      ref: l,
+      ref: o,
       alignItems: "flex-end",
-      flexDirection: e ? "row-reverse" : "row",
+      flexDirection: i ? "row-reverse" : "row",
       pl: 4,
       pr: 4,
       gap: 1,
-      "aria-busy": n === "PENDING",
-      ...j,
+      "aria-busy": l === "PENDING",
+      ...G,
       inlineCSS: {
-        cursor: n === "PENDING" ? "wait" : "default",
+        cursor: l === "PENDING" ? "wait" : "default",
         overflowAnchor: "none",
-        ...T
+        ...j
       },
       children: [
-        /* @__PURE__ */ t(s, { alignItems: "flex-start", gap: 2.5, children: [
-          !e && k && f && /* @__PURE__ */ r(
-            _,
+        /* @__PURE__ */ n(d, { alignItems: "flex-start", gap: 2.5, children: [
+          !i && w && h && /* @__PURE__ */ e(
+            d,
             {
-              src: f,
-              width: 32,
-              height: 32,
-              borderRadius: "50%",
-              alt: "째깍악어 선생님 심볼",
-              role: "presentation",
-              enableFallback: !0,
-              style: {
-                objectFit: "cover"
-              }
+              role: typeof c == "function" ? "button" : void 0,
+              tabIndex: typeof c == "function" ? 0 : -1,
+              onClick: c,
+              onKeyDown: q,
+              "aria-label": typeof c == "function" ? "선생님 프로필 보기" : void 0,
+              inlineCSS: {
+                position: "relative",
+                overflow: "hidden",
+                cursor: typeof c == "function" ? "pointer" : void 0
+              },
+              children: /* @__PURE__ */ e(
+                U,
+                {
+                  src: h,
+                  width: 32,
+                  height: 32,
+                  borderRadius: "50%",
+                  alt: "선생님 프로필 사진",
+                  role: "presentation",
+                  enableFallback: !0,
+                  style: {
+                    objectFit: "cover"
+                  }
+                }
+              )
             }
           ),
-          /* @__PURE__ */ t(
-            s,
+          /* @__PURE__ */ n(
+            d,
             {
               pt: 2,
               pb: 2,
               pl: 3,
               pr: 3,
-              ml: !e && !k && f ? 10.5 : void 0,
+              ml: !i && !w && h ? 10.5 : void 0,
               flexDirection: "column",
               gap: 2.5,
               inlineCSS: {
                 borderRadius: 12,
-                backgroundColor: e ? y.primary.pageControl : o[10]
+                backgroundColor: i ? k.primary.pageControl : a[10]
               },
               children: [
-                /* @__PURE__ */ r(
-                  C,
+                /* @__PURE__ */ e(
+                  v,
                   {
                     tag: "p",
                     variant: "b3R",
-                    textAlign: e ? "right" : "left",
+                    textAlign: i ? "right" : "left",
                     inlineCSS: {
                       whiteSpace: "pre-wrap",
                       wordBreak: "break-all"
                     },
-                    children: N ? p.slice(0, L) + "..." : p
+                    children: N ? f.slice(0, L) + "..." : f
                   }
                 ),
-                N && /* @__PURE__ */ r(
-                  J,
+                N && /* @__PURE__ */ e(
+                  Q,
                   {
                     variant: "text",
                     size: "xSmall",
-                    endAdornment: /* @__PURE__ */ r(I, { name: "ChevronRightLine" }),
-                    onClick: B,
+                    endAdornment: /* @__PURE__ */ e(I, { name: "ChevronRightLine" }),
+                    onClick: z,
                     inlineCSS: {
                       marginLeft: "auto"
                     },
@@ -125,96 +143,96 @@ function ar({
             }
           )
         ] }),
-        d && /* @__PURE__ */ t(O, { children: [
-          /* @__PURE__ */ t(
-            Y,
+        s && /* @__PURE__ */ n(A, { children: [
+          /* @__PURE__ */ n(
+            _,
             {
-              ref: E,
+              ref: D,
               isMenuOpen: !!g,
-              menuId: `message-${v}-menu`,
-              onClick: z,
+              menuId: `message-${C}-menu`,
+              onClick: $,
               size: "xSmall",
               inlineCSS: {
-                padding: w.content(0.5),
-                gap: w.content(0.5),
+                padding: E.content(0.5),
+                gap: E.content(0.5),
                 borderRadius: 200,
-                backgroundColor: g ? o[10] : "transparent",
+                backgroundColor: g ? a[10] : "transparent",
                 cursor: "pointer",
-                ...G && {
+                ...K && {
                   "&:hover": {
-                    backgroundColor: `${o[10]} !important`
+                    backgroundColor: `${a[10]} !important`
                   }
                 },
                 "&:active": {
-                  backgroundColor: `${o[10]} !important`
+                  backgroundColor: `${a[10]} !important`
                 }
               },
               children: [
-                /* @__PURE__ */ r(
+                /* @__PURE__ */ e(
                   I,
                   {
                     name: "ResetLine",
                     size: "xSmall",
                     color: "grey.70",
                     inlineCSS: {
-                      color: `${o[70]} !important`
+                      color: `${a[70]} !important`
                     }
                   }
                 ),
-                /* @__PURE__ */ r(
+                /* @__PURE__ */ e(
                   I,
                   {
                     name: "CloseLine",
                     size: "xSmall",
                     color: "etc.red",
                     inlineCSS: {
-                      color: `${A.red} !important`
+                      color: `${H.red} !important`
                     }
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ t(
-            K,
+          /* @__PURE__ */ n(
+            W,
             {
-              id: `message-${v}-menu`,
-              anchorRef: E,
+              id: `message-${C}-menu`,
+              anchorRef: D,
               open: g,
-              onClose: i,
-              onChange: H,
+              onClose: t,
+              onChange: O,
               width: 160,
               placement: "bottom-left",
               children: [
-                /* @__PURE__ */ r(P, { value: "resend", children: "재전송" }),
-                /* @__PURE__ */ r(P, { value: "delete", children: "삭제" })
+                /* @__PURE__ */ e(P, { value: "resend", children: "재전송" }),
+                /* @__PURE__ */ e(P, { value: "delete", children: "삭제" })
               ]
             }
           )
         ] }),
-        !d && /* @__PURE__ */ t(
-          s,
+        !s && /* @__PURE__ */ n(
+          d,
           {
             flexDirection: "column",
-            alignItems: e ? "flex-end" : "flex-start",
+            alignItems: i ? "flex-end" : "flex-start",
             inlineCSS: {
               whiteSpace: "nowrap"
             },
             children: [
-              e && h > 0 && n === "SUCCEEDED" && /* @__PURE__ */ r(
-                C,
+              i && u > 0 && l === "SUCCEEDED" && /* @__PURE__ */ e(
+                v,
                 {
                   tag: "span",
                   variant: "c5B",
                   "aria-hidden": !0,
                   inlineCSS: {
-                    color: y.primary.text
+                    color: k.primary.text
                   },
-                  children: h
+                  children: u
                 }
               ),
-              e && h > 0 && n === "PENDING" && /* @__PURE__ */ r(
-                Q,
+              i && u > 0 && l === "PENDING" && /* @__PURE__ */ e(
+                X,
                 {
                   size: "small",
                   loop: !0,
@@ -224,16 +242,16 @@ function ar({
                   }
                 }
               ),
-              /* @__PURE__ */ r(
-                C,
+              /* @__PURE__ */ e(
+                v,
                 {
                   tag: "span",
                   variant: "c5R",
                   color: "etc.dimmed01",
                   inlineCSS: {
-                    display: D ? void 0 : "none"
+                    display: B ? void 0 : "none"
                   },
-                  children: Z($).format("A h:mm")
+                  children: V(T).format("A h:mm")
                 }
               )
             ]
@@ -244,5 +262,5 @@ function ar({
   );
 }
 export {
-  ar as default
+  de as default
 };

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

@@ -1,161 +1,184 @@
-import { jsx as z } from "react/jsx-runtime";
-import { useState as p, useRef as i, Children as S, isValidElement as j, useEffect as g, cloneElement as q } from "react";
-import { Box as V, Flexbox as ct } from "@dotss/ui";
+import { jsx as x } from "react/jsx-runtime";
+import { useState as m, useRef as p, Children as H, isValidElement as V, useEffect as d, cloneElement as $ } from "react";
+import { Box as J, Flexbox as ct } from "@dotss/ui";
 import lt from "@dotss/ui/core/useTheme";
-import { findImageInChildren as x, getHorizontalLayoutRows as ft, getNextIndexHorizontalFromRows as pt, findNextFocusableElement as y } from "./Masonry.utils.mjs";
-import $ from "./MasonryBlock/MasonryBlock.mjs";
-import J from "../../../teacher/profile/components/ActivityGallery/ActivityGalleryItem/ActivityGalleryItem.mjs";
+import { findImageInChildren as F, getHorizontalLayoutRows as ft, getNextIndexHorizontalFromRows as pt, findNextFocusableElement as A } from "./Masonry.utils.mjs";
+import Q from "./MasonryBlock/MasonryBlock.mjs";
+import Y from "../../../teacher/profile/components/ActivityGallery/ActivityGalleryItem/ActivityGalleryItem.mjs";
 function kt({
-  children: A,
-  columnCount: F = 2,
+  children: E,
+  columnCount: W = 2,
   rowCount: B = 2,
-  spacing: s = 2,
-  edgeSpacing: d = 0,
-  direction: b = "vertical",
-  defaultContainerWidth: Q = 360,
-  defaultContainerHeight: Y = 0,
-  ...a
+  spacing: c = 2,
+  edgeSpacing: b = 0,
+  direction: k = "vertical",
+  defaultContainerWidth: Z = 360,
+  defaultContainerHeight: _ = 0,
+  ...l
 }) {
-  const { spacing: E } = lt(), [Z, _] = p(Q), [K, O] = p(Y), [H, tt] = p(0), k = 4 / 3, l = (Z - s) / F, f = b === "horizontal" ? (K - s) / B : l * k, o = i(null), u = i([]), R = i([]), T = i(!1), M = i(!0), W = i(0), C = i(0), m = i(0), [h, et] = p(
-    S.toArray(A).filter(j).filter((e) => e.type === $ || e.type === J)
-  ), [N, rt] = p(
-    h.map((e) => {
-      var t;
-      return ((t = x(e.props.children)) == null ? void 0 : t.props.src) ?? "";
+  const { spacing: T } = lt(), [K, O] = m(Z), [tt, et] = m(_), [N, rt] = m(0), M = 4 / 3, h = (K - c) / W, f = k === "horizontal" ? (tt - c) / B : h * M, a = p(null), g = p([]), R = p([]), D = p(!1), L = p(!0), P = p(0), I = p(0), v = p(0), [w, nt] = m(
+    H.toArray(E).filter(V).filter((t) => t.type === Q || t.type === Y)
+  ), [y, ot] = m(
+    w.map((t) => {
+      var e;
+      return ((e = F(t.props.children)) == null ? void 0 : e.props.src) ?? "";
     })
-  ), [D, nt] = p(
-    h.map((e) => {
-      var t;
+  ), [z, U] = m(
+    w.map((t) => {
+      var e;
       return {
-        src: ((t = x(e.props.children)) == null ? void 0 : t.props.src) ?? "",
-        width: e.props.width ?? l,
-        height: e.props.height ?? f
+        src: ((e = F(t.props.children)) == null ? void 0 : e.props.src) ?? "",
+        width: t.props.width ?? h,
+        height: t.props.height ?? f
       };
     })
-  ), P = h.length, U = (e) => {
-    var t, r;
-    T.current = !0, W.current = e.clientX - (((t = o.current) == null ? void 0 : t.offsetLeft) || 0), C.current = ((r = o.current) == null ? void 0 : r.scrollLeft) || 0;
-  }, X = (e) => {
-    T.current && (e.currentTarget.style.cursor = "grabbing", o.current && (o.current.scrollLeft = C.current - (e.clientX - o.current.offsetLeft - W.current)));
-  }, L = (e) => {
+  ), X = w.length, G = (t) => {
+    var e, r;
+    D.current = !0, P.current = t.clientX - (((e = a.current) == null ? void 0 : e.offsetLeft) || 0), I.current = ((r = a.current) == null ? void 0 : r.scrollLeft) || 0;
+  }, j = (t) => {
+    D.current && (t.currentTarget.style.cursor = "grabbing", a.current && (a.current.scrollLeft = I.current - (t.clientX - a.current.offsetLeft - P.current)));
+  }, C = (t) => {
     var r;
-    T.current = !1, C.current !== ((r = o.current) == null ? void 0 : r.scrollLeft) ? (e.currentTarget.style.cursor = "grab", M.current = !1, m.current && cancelAnimationFrame(m.current), m.current = requestAnimationFrame(() => {
-      M.current = !0;
-    })) : M.current = !0;
-  }, ot = (e) => (t) => {
-    t.stopPropagation();
+    D.current = !1, I.current !== ((r = a.current) == null ? void 0 : r.scrollLeft) ? (t.currentTarget.style.cursor = "grab", L.current = !1, v.current && cancelAnimationFrame(v.current), v.current = requestAnimationFrame(() => {
+      L.current = !0;
+    })) : L.current = !0;
+  }, st = (t) => (e) => {
+    e.stopPropagation();
     let r = null;
-    switch (t.key) {
+    switch (e.key) {
       case "ArrowRight":
-        t.preventDefault(), r = y(t.currentTarget, "right", u.current);
+        e.preventDefault(), r = A(e.currentTarget, "right", g.current);
         break;
       case "ArrowLeft":
-        t.preventDefault(), r = y(t.currentTarget, "left", u.current);
+        e.preventDefault(), r = A(e.currentTarget, "left", g.current);
         break;
       case "ArrowDown":
-        t.preventDefault(), r = y(t.currentTarget, "down", u.current);
+        e.preventDefault(), r = A(e.currentTarget, "down", g.current);
         break;
       case "ArrowUp":
-        t.preventDefault(), r = y(t.currentTarget, "up", u.current);
+        e.preventDefault(), r = A(e.currentTarget, "up", g.current);
         break;
       case "Enter":
       case " ": {
-        t.preventDefault(), t.currentTarget.click();
+        e.preventDefault(), e.currentTarget.click();
         return;
       }
       default:
         return;
     }
-    r == null || r.focus(), e == null || e(t);
-  }, st = (e) => (t) => {
-    if (t.stopPropagation(), t.key === "Enter" || t.key === " ") {
-      t.preventDefault(), t.currentTarget.click();
+    r == null || r.focus(), t == null || t(e);
+  }, at = (t) => (e) => {
+    if (e.stopPropagation(), e.key === "Enter" || e.key === " ") {
+      e.preventDefault(), e.currentTarget.click();
       return;
     }
-    const r = Number(t.currentTarget.getAttribute("aria-posinset")) - 1, n = t.key.replace("Arrow", "").toLowerCase();
-    if (!["left", "right", "up", "down"].includes(n)) {
-      e == null || e(t);
+    const r = Number(e.currentTarget.getAttribute("aria-posinset")) - 1, o = e.key.replace("Arrow", "").toLowerCase();
+    if (!["left", "right", "up", "down"].includes(o)) {
+      t == null || t(e);
       return;
     }
-    t.preventDefault();
-    const v = pt(
+    e.preventDefault();
+    const s = pt(
       R.current,
       r,
-      n
-    ), w = u.current[v ?? -1];
-    w == null || w.focus(), e == null || e(t);
-  }, at = (e) => (t) => {
-    u.current[e] = t;
-  }, it = (e, t, r) => (n) => {
-    R.current[t] || (R.current[t] = []), u.current[e] = n, R.current[t][r] = n;
-  }, G = (e) => (t) => {
-    tt(Number(t.currentTarget.getAttribute("aria-posinset")) - 1), e == null || e(t);
+      o
+    ), i = g.current[s ?? -1];
+    i == null || i.focus(), t == null || t(e);
+  }, it = (t) => (e) => {
+    g.current[t] = e;
+  }, ut = (t, e, r) => (o) => {
+    R.current[e] || (R.current[e] = []), g.current[t] = o, R.current[e][r] = o;
+  }, q = (t) => (e) => {
+    rt(Number(e.currentTarget.getAttribute("aria-posinset")) - 1), t == null || t(e);
   };
-  if (g(() => {
-    const e = o.current, t = (r) => {
-      M.current || r.stopPropagation();
+  if (d(() => {
+    const t = a.current, e = (r) => {
+      L.current || r.stopPropagation();
     };
-    return e == null || e.addEventListener("click", t), () => {
-      e == null || e.removeEventListener("click", t);
+    return t == null || t.addEventListener("click", e), () => {
+      t == null || t.removeEventListener("click", e);
     };
-  }, []), g(() => {
-    const e = o.current, t = (r) => {
+  }, []), d(() => {
+    const t = a.current, e = (r) => {
       r.stopPropagation();
     };
-    return e == null || e.addEventListener("touchmove", t), () => {
-      e == null || e.removeEventListener("touchmove", t);
+    return t == null || t.addEventListener("touchmove", e), () => {
+      t == null || t.removeEventListener("touchmove", e);
     };
-  }, []), g(() => {
-    const e = S.toArray(A).filter(j).filter((r) => r.type === $ || r.type === J), t = e.map((r) => {
-      var n;
-      return ((n = x(r.props.children)) == null ? void 0 : n.props.src) ?? "";
+  }, []), d(() => {
+    const t = H.toArray(E).filter(V).filter((r) => r.type === Q || r.type === Y), e = t.map((r) => {
+      var o;
+      return ((o = F(r.props.children)) == null ? void 0 : o.props.src) ?? "";
     }).filter(Boolean);
-    et(e), rt(t);
-  }, [A]), g(() => {
-    f <= 0 || N.forEach((e) => {
-      const t = new window.Image();
-      t.src = e, t.onload = () => {
-        nt(
-          (r) => r.map((n) => (n.src === e && (n.width = t.width / t.height * (n.height ?? f), n.height = n.height ?? f), n))
-        ), t.onload = null;
-      }, t.onerror = () => {
-        t.onload = null;
+    nt(t), ot(e);
+  }, [E]), d(() => {
+    if (f <= 0 || y.length === 0) return;
+    const t = {};
+    let e = 0;
+    const r = y.length;
+    y.forEach((o) => {
+      const s = new window.Image();
+      s.src = o, s.onload = () => {
+        t[o] = {
+          imgWidth: s.width,
+          imgHeight: s.height
+        }, e++, e === r && U(
+          (i) => i.map((n) => {
+            const u = t[n.src];
+            return u ? {
+              ...n,
+              width: u.imgWidth / u.imgHeight * (n.height ?? f),
+              height: n.height ?? f
+            } : n;
+          })
+        ), s.onload = null;
+      }, s.onerror = () => {
+        e++, e === r && U(
+          (i) => i.map((n) => {
+            const u = t[n.src];
+            return u ? {
+              ...n,
+              width: u.imgWidth / u.imgHeight * (n.height ?? f),
+              height: n.height ?? f
+            } : n;
+          })
+        ), s.onload = null;
       };
     });
-  }, [N, f]), g(() => {
-    const e = () => {
-      var t, r, n;
-      _(((r = (t = o.current) == null ? void 0 : t.parentElement) == null ? void 0 : r.offsetWidth) ?? 0), O(((n = o.current) == null ? void 0 : n.offsetHeight) ?? 0);
+  }, [y, f]), d(() => {
+    const t = () => {
+      var e, r, o;
+      O(((r = (e = a.current) == null ? void 0 : e.parentElement) == null ? void 0 : r.offsetWidth) ?? 0), et(((o = a.current) == null ? void 0 : o.offsetHeight) ?? 0);
     };
-    return e(), window.addEventListener("resize", e), () => {
-      window.removeEventListener("resize", e);
+    return t(), window.addEventListener("resize", t), () => {
+      window.removeEventListener("resize", t);
     };
-  }, []), g(() => () => {
-    m.current && cancelAnimationFrame(m.current);
-  }, []), b === "horizontal") {
-    const e = ft(
-      D,
-      h,
+  }, []), d(() => () => {
+    v.current && cancelAnimationFrame(v.current);
+  }, []), k === "horizontal") {
+    const t = ft(
+      z,
+      w,
       B,
-      l * k / 2
+      h * M / 2
     );
-    let t = l * k / 2;
-    t = t <= 0 ? 120 : t;
+    let e = h * M / 2;
+    e = e <= 0 ? 120 : e;
     let r = 0;
-    return /* @__PURE__ */ z(
-      V,
+    return /* @__PURE__ */ x(
+      J,
       {
-        ref: o,
+        ref: a,
         role: "list",
         "aria-label": "콘텐츠",
         "aria-orientation": "horizontal",
-        onMouseDown: U,
-        onMouseMove: X,
-        onMouseUp: L,
-        onMouseLeave: L,
-        pl: d,
-        pr: d,
-        ...a,
+        onMouseDown: G,
+        onMouseMove: j,
+        onMouseUp: C,
+        onMouseLeave: C,
+        pl: b,
+        pr: b,
+        ...l,
         inlineCSS: {
           display: "grid",
           position: "relative",
@@ -168,74 +191,75 @@ function kt({
           "&::-webkit-scrollbar": {
             display: "none"
           },
-          ...a == null ? void 0 : a.inlineCSS
+          ...l == null ? void 0 : l.inlineCSS
         },
-        children: e.map((n, v) => {
-          const w = v === e.length - 1;
-          return /* @__PURE__ */ z(ct, { gap: s, children: n.map((c, ut) => {
-            const I = r++;
-            return q(c, {
-              setInnerRef: it(I, v, ut),
-              tabIndex: I === H ? 0 : -1,
+        children: t.map((o, s) => {
+          const i = s === t.length - 1;
+          return /* @__PURE__ */ x(ct, { gap: c, children: o.map((n, u) => {
+            const S = r++;
+            return $(n, {
+              setInnerRef: ut(S, s, u),
+              tabIndex: S === N ? 0 : -1,
               role: "listitem",
-              "aria-posinset": I + 1,
-              "aria-setsize": P,
-              width: c.props.width ?? t,
-              height: c.props.height ?? f,
-              direction: b,
-              spacing: s,
-              sourceMetadata: D,
-              onKeyDown: st(c.props.onKeyDown),
-              onFocus: G(c.props.onFocus),
+              "aria-posinset": S + 1,
+              "aria-setsize": X,
+              width: n.props.width ?? e,
+              height: n.props.height ?? f,
+              direction: k,
+              spacing: c,
+              sourceMetadata: z,
+              onKeyDown: at(n.props.onKeyDown),
+              onFocus: q(n.props.onFocus),
               style: {
-                marginBottom: w ? 0 : E.content(s),
-                ...c.props.style
+                marginBottom: i ? 0 : T.content(c),
+                ...n.props.style
               },
-              ...c.props
+              ...n.props
             });
-          }) }, `masonry-row-${v}`);
+          }) }, `masonry-row-${s}`);
         })
       }
     );
   }
-  return /* @__PURE__ */ z(
-    V,
+  return /* @__PURE__ */ x(
+    J,
     {
-      ref: o,
+      ref: a,
       role: "list",
       "aria-label": "콘텐츠",
       "aria-orientation": "vertical",
-      onMouseDown: U,
-      onMouseMove: X,
-      onMouseUp: L,
-      onMouseLeave: L,
-      pt: d,
-      pb: d,
-      ...a,
+      onMouseDown: G,
+      onMouseMove: j,
+      onMouseUp: C,
+      onMouseLeave: C,
+      pt: b,
+      pb: b,
+      ...l,
       inlineCSS: {
         width: "100%",
         position: "relative",
-        columnCount: F,
-        columnGap: E.content(s),
-        marginTop: -E.content(s),
-        ...a == null ? void 0 : a.inlineCSS
+        transform: "translate3d(0, 0, 0)",
+        columnCount: W,
+        columnGap: T.content(c),
+        marginTop: -T.content(c),
+        ...l == null ? void 0 : l.inlineCSS
       },
-      children: S.map(
-        h,
-        (e, t) => q(e, {
-          setInnerRef: at(t),
+      children: H.map(
+        w,
+        (t, e) => $(t, {
+          setInnerRef: it(e),
           role: "listitem",
-          tabIndex: t === H ? 0 : -1,
-          "aria-posinset": t + 1,
-          "aria-setsize": P,
-          width: e.props.width ?? l,
-          height: e.props.height ?? l * k / 2,
-          direction: b,
-          spacing: s,
-          sourceMetadata: D,
-          onKeyDown: ot(e.props.onKeyDown),
-          onFocus: G(e.props.onFocus),
-          ...e.props
+          tabIndex: e === N ? 0 : -1,
+          "aria-posinset": e + 1,
+          "aria-setsize": X,
+          width: t.props.width ?? h,
+          height: t.props.height ?? h * M / 2,
+          direction: k,
+          spacing: c,
+          sourceMetadata: z,
+          onKeyDown: st(t.props.onKeyDown),
+          onFocus: q(t.props.onFocus),
+          ...t.props
         })
       )
     }

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

@@ -1,84 +1,87 @@
-import { jsxs as w, jsx as g } from "react/jsx-runtime";
-import { forwardRef as I, useState as u, useRef as A, useImperativeHandle as B, useEffect as m, Children as F, isValidElement as W, cloneElement as z } from "react";
-import { Flexbox as s, Skeleton as N } 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 P = I(
+import { jsxs as C, jsx as S } from "react/jsx-runtime";
+import { forwardRef as B, useMemo as x, useState as v, useRef as F, useImperativeHandle as W, useEffect as y, Children as z, isValidElement as N, cloneElement as D } from "react";
+import { Flexbox as l, Skeleton as L } from "@dotss/ui";
+import V from "@dotss/ui/core/useTheme";
+import $ from "../../Image/Image.mjs";
+import { findImageInChildren as q } from "../Masonry.utils.mjs";
+const U = B(
   ({
-    children: S,
+    children: s,
     width: c = 0,
-    height: d = 0,
-    spacing: C = 2,
-    borderRadius: r = 0,
-    direction: v = "vertical",
-    setInnerRef: l,
-    sourceMetadata: f,
+    height: h = 0,
+    spacing: T = 2,
+    borderRadius: o = 0,
+    direction: b = "vertical",
+    setInnerRef: t,
+    sourceMetadata: r,
     ...e
-  }, x) => {
+  }, E) => {
     var k;
-    const { spacing: T } = D(), p = V(S), y = (k = p == null ? void 0 : p.props) == null ? void 0 : k.src, i = f == null ? void 0 : f.find((n) => n.src === y), [t, E] = u((i == null ? void 0 : i.width) ?? c ?? 0), [o, j] = u((i == null ? void 0 : i.height) ?? d ?? 0), [a, b] = u(!1), h = A(null);
-    B(x, () => h.current);
-    const H = (n) => {
-      n.propertyName !== "padding-top" && n.propertyName !== "padding-left" || b(!0);
+    const { spacing: j } = V(), f = x(() => q(s), [s]), p = (k = f == null ? void 0 : f.props) == null ? void 0 : k.src, i = x(
+      () => r == null ? void 0 : r.find((n) => n.src === p),
+      [r, p]
+    ), [g, H] = v((i == null ? void 0 : i.width) ?? c ?? 0), [d, I] = v((i == null ? void 0 : i.height) ?? h ?? 0), [w, m] = v(!1), u = F(null);
+    W(E, () => u.current);
+    const A = (n) => {
+      n.propertyName !== "padding-top" && n.propertyName !== "padding-left" || m(!0);
     };
-    return m(() => {
-      E((i == null ? void 0 : i.width) ?? c ?? 0), j((i == null ? void 0 : i.height) ?? d ?? 0);
-    }, [c, d, i == null ? void 0 : i.width, i == null ? void 0 : i.height]), m(() => {
-      if (!t || !o) return;
+    return y(() => {
+      H((i == null ? void 0 : i.width) ?? c ?? 0), I((i == null ? void 0 : i.height) ?? h ?? 0);
+    }, [c, h, i == null ? void 0 : i.width, i == null ? void 0 : i.height]), y(() => {
+      if (!(i != null && i.width) || !(i != null && i.height)) return;
       const n = setTimeout(() => {
-        b(!0);
+        m(!0);
       }, 500);
       return () => {
         clearTimeout(n);
       };
-    }, [t, o]), m(() => {
-      l == null || l(h.current);
-    }, [l]), /* @__PURE__ */ w(
-      s,
+    }, [i == null ? void 0 : i.width, i == null ? void 0 : i.height]), y(() => {
+      t == null || t(u.current);
+    }, [t]), /* @__PURE__ */ C(
+      l,
       {
-        ref: h,
+        ref: u,
         flexDirection: "column",
         ...e,
         inlineCSS: {
+          transform: "translate3d(0, 0, 0)",
           breakInside: "avoid",
           ...e == null ? void 0 : e.inlineCSS
         },
         children: [
-          v === "vertical" && /* @__PURE__ */ g(
-            s,
+          b === "vertical" && /* @__PURE__ */ S(
+            l,
             {
               inlineCSS: {
-                minHeight: T.content(C)
+                minHeight: j.content(T)
               }
             }
           ),
-          /* @__PURE__ */ g(
-            s,
+          /* @__PURE__ */ S(
+            l,
             {
-              onTransitionEnd: H,
+              onTransitionEnd: A,
               inlineCSS: {
                 position: "relative",
                 overflow: "hidden",
                 scrollbarWidth: "none",
-                transform: "translate3d(0, 0, 0)",
                 "&::-webkit-scrollbar": {
                   display: "none"
                 },
                 ...e == null ? void 0 : e.inlineCSS
               },
-              style: v === "vertical" ? {
-                borderRadius: r,
-                paddingTop: `calc(${o / t} * 100%)`,
+              style: b === "vertical" ? {
+                borderRadius: o,
+                paddingTop: `calc(${d / g} * 100%)`,
                 transition: "padding-top 0.3s 0.1s"
               } : {
-                borderRadius: r,
-                paddingLeft: t,
-                paddingTop: o,
+                borderRadius: o,
+                paddingLeft: g,
+                paddingTop: d,
                 transition: "padding-top 0.3s 0.1s, padding-left 0.3s 0.1s"
               },
-              children: /* @__PURE__ */ w(
-                s,
+              children: /* @__PURE__ */ C(
+                l,
                 {
                   inlineCSS: {
                     position: "absolute",
@@ -87,32 +90,31 @@ const P = I(
                     width: "100%",
                     height: "100%",
                     overflow: "hidden",
-                    transform: "translate3d(0, 0, 0)",
-                    borderRadius: r,
+                    borderRadius: o,
                     transition: "border-radius 0.3s 0.1s",
                     zIndex: 1
                   },
                   children: [
-                    /* @__PURE__ */ g(
-                      N,
+                    /* @__PURE__ */ S(
+                      L,
                       {
-                        borderRadius: r,
+                        borderRadius: o,
                         inlineCSS: {
                           position: "absolute",
                           top: 0,
                           left: 0,
                           width: "100%",
                           height: "100%",
-                          opacity: !y || a ? 0 : 1,
+                          opacity: !p || w ? 0 : 1,
                           transition: "opacity 0.3s 0.1s",
-                          pointerEvents: a ? "none" : void 0,
+                          pointerEvents: w ? "none" : void 0,
                           zIndex: 2
                         }
                       }
                     ),
-                    F.toArray(S).filter(W).map((n) => n.type === L || n.type === "img" ? z(n, {
-                      width: t,
-                      height: o,
+                    z.toArray(s).filter(N).map((n) => n.type === $ || n.type === "img" ? D(n, {
+                      width: g,
+                      height: d,
                       draggable: !1,
                       style: {
                         overflow: "hidden",
@@ -133,5 +135,5 @@ const P = I(
   }
 );
 export {
-  P as default
+  U as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dotss/tictoccroc",
   "type": "module",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -95,8 +95,8 @@
     "@vitejs/plugin-react-swc": "^3.10.0",
     "eslint-plugin-storybook": "^9.0.4",
     "glob": "^10.4.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "storybook": "^9.0.4",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^1.6.0"