@dotss/tictoccroc 0.4.2 → 0.6.0

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

@@ -1,211 +1,185 @@
-import { jsxs as le, jsx as A } from "react/jsx-runtime";
-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,
-  spacing: K = 2,
-  edgeSpacing: O = 4,
-  rowCount: a = 2,
-  step: W = 1,
-  renderPagination: $,
-  ...C
-}) {
-  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;
-    const e = (((o = u.current) == null ? void 0 : o.offsetWidth) || 0) * 0.01, t = -b.current >= e && l + 1 <= w, n = -b.current <= -e && l - 1 >= 1, f = Math.abs(b.current) >= ge;
-    S.current = !1, D.current = !f, b.current = 0;
-    let s = l;
-    t ? s = l + 1 : n && (s = l - 1), c.current.style.transition = "transform 0.2s", c.current.style.cursor = "grab", R(s);
-  }, R = fe(
-    (e, t = 0) => {
-      var h, g, y;
-      if (!c.current) return;
-      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) => 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 q, G, V, _, B, J;
-    t.stopPropagation();
-    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 = (U + 1) * a + y;
-        r < g && (m = r);
-        break;
-      }
-      case "ArrowLeft": {
-        t.preventDefault();
-        const r = (U - 1) * a + y;
-        r >= 0 && (m = r);
-        break;
-      }
-      case "ArrowDown": {
-        t.preventDefault();
-        const r = n + 1;
-        r < g && r % a > y && (m = r);
-        break;
-      }
-      case "ArrowUp": {
-        t.preventDefault();
-        const r = n - 1;
-        r >= 0 && r % a < y && (m = r);
-        break;
-      }
-      case "Enter":
-      case " ": {
-        t.preventDefault(), t.currentTarget.click();
-        return;
-      }
-      default:
-        return;
-    }
-    if (m >= d && m <= h) {
-      const r = (J = u.current) == null ? void 0 : J.children[m];
-      r == null || r.focus();
-      return;
-    }
-    m >= 0 && m < g && (k.current = requestAnimationFrame(() => {
-      var Q;
-      const r = (Q = u.current) == null ? void 0 : Q.children[m];
-      r == null || r.focus();
-    })), e == null || e(t);
-  }, ie = (e) => {
-    e.propertyName === "transform" && (D.current = !0);
-  }, ae = (e) => (t) => {
-    const n = Number(t.currentTarget.getAttribute("aria-posinset")) - 1;
-    ne(n), e == null || e(t);
-  };
-  return T(() => {
-    const e = () => R(l);
-    return e(), window.addEventListener("resize", e), () => {
-      window.removeEventListener("resize", e);
-    };
-  }, [R, l]), T(() => {
-    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);
-      X((g) => g > o ? o : g), ee(o);
-    };
-    return e(), window.addEventListener("resize", e), () => {
-      window.removeEventListener("resize", e);
-    };
-  }, [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 - 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);
-    };
-    return e && (e.addEventListener("mousemove", f), e.addEventListener("touchmove", n)), () => {
-      e && (e.removeEventListener("mousemove", f), e.removeEventListener("touchmove", n));
-    };
-  }, [R, l, w]), T(() => () => {
-    k.current && cancelAnimationFrame(k.current);
-  }, []), T(() => {
-    const e = u.current, t = (n) => {
-      D.current || (n.stopPropagation(), n.preventDefault());
-    };
-    return e == null || e.addEventListener("click", t), () => {
-      e == null || e.removeEventListener("click", t);
-    };
-  }, []), /* @__PURE__ */ le(
-    P,
-    {
-      flexDirection: "column",
-      role: "list",
-      "aria-roledescription": "carousel",
-      "aria-label": "슬라이더",
-      flexGrow: 1,
-      ...C,
-      inlineCSS: {
-        width: "100%",
-        ...C == null ? void 0 : C.inlineCSS
-      },
-      children: [
-        /* @__PURE__ */ A(
-          P,
-          {
-            ref: L,
-            inlineCSS: {
-              overflow: "hidden"
-            },
-            children: /* @__PURE__ */ A(
-              P,
-              {
-                ref: c,
-                onMouseDown: se,
-                onMouseUp: M,
-                onMouseLeave: M,
-                onTouchStart: re,
-                onTouchEnd: M,
-                onTouchCancel: M,
-                onTransitionEnd: ie,
-                inlineCSS: {
-                  gap: v,
-                  paddingLeft: E,
-                  paddingRight: E,
-                  transition: "transform 0.2s",
-                  transform: "translate3d(0, 0, 0)",
-                  cursor: "grab"
-                },
-                children: /* @__PURE__ */ A(
-                  P,
-                  {
-                    ref: u,
-                    inlineCSS: {
-                      gap: v,
-                      display: "grid",
-                      gridTemplateRows: "min-content",
-                      transform: "translate3d(0, 0, 0)"
-                    },
-                    children: Z.map(
-                      j,
-                      (e, t) => {
-                        var n;
-                        return de(e, {
-                          role: "listitem",
-                          tabIndex: t === te ? 0 : -1,
-                          "aria-roledescription": "slide",
-                          "aria-label": `${x}개 중 ${t + 1}번째 슬라이드`,
-                          "aria-posinset": t + 1,
-                          "aria-setsize": x,
-                          onKeyDown: ce(e.props.onKeyDown),
-                          onFocus: ae(e.props.onFocus),
-                          ...e.props,
-                          style: {
-                            ...(n = e.props) == null ? void 0 : n.style,
-                            gridRow: `${t % a + 1} / ${t % a + 1}`
-                          }
-                        });
-                      }
-                    )
-                  }
-                )
-              }
-            )
-          }
-        ),
-        typeof $ == "function" && $({ page: l, totalPages: w, onChange: oe })
-      ]
-    }
-  );
+import e from "./CarouselSlide/index.mjs";
+import { Children as t, cloneElement as n, isValidElement as r, useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
+import { Flexbox as c } from "@dotss/ui";
+import l from "@dotss/ui/core/useTheme";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region shared/components/Carousel/Carousel.tsx
+var f = 5;
+function p({ children: p, spacing: m = 2, edgeSpacing: h = 4, rowCount: g = 2, step: _ = 1, renderPagination: v, ...y }) {
+	let { spacing: b } = l(), [x, S] = s(1), [C, w] = s(1), [T, E] = s(0), D = o(null), O = o(null), k = o(null), A = o(0), j = o(0), M = o(0), N = o(!1), P = o(!0), F = o(0), I = b.content(m), L = b.content(h), R = t.toArray(p).filter(r).filter((t) => t.type === e), z = R.length, B = (e, t) => {
+		A.current = e, j.current = t;
+	}, V = () => {
+		if (!O.current || !N.current) return;
+		let e = (k.current?.offsetWidth || 0) * .01, t = -M.current >= e && x + 1 <= C, n = -M.current <= -e && x - 1 >= 1, r = Math.abs(M.current) >= f;
+		N.current = !1, P.current = !r, M.current = 0;
+		let i = x;
+		t ? i = x + 1 : n && (i = x - 1), O.current.style.transition = "transform 0.2s", O.current.style.cursor = "grab", H(i);
+	}, H = i((e, t = 0) => {
+		if (!O.current) return;
+		S(e);
+		let n = e === 1, r = e === C, i = (D.current?.offsetWidth || 0) - L, a = (k.current?.children[0]?.clientWidth || 0) + I, o = (i - a * Math.floor(i / a) - I) / 2, s = a * (e - 1) - o;
+		n ? O.current.style.transform = `translate3d(${t}px, 0, 0)` : r ? O.current.style.transform = `translate3d(${-(s - o) + t}px, 0, 0)` : O.current.style.transform = `translate3d(${-s + t}px, 0, 0)`;
+	}, [
+		L,
+		I,
+		C
+	]), U = (e) => B(e.touches[0].clientX, e.touches[0].clientY), W = (e) => {
+		N.current = !0, B(e.clientX, e.clientY);
+	}, G = (e) => {
+		O.current && (O.current.style.transition = "transform 0.2s", O.current.style.cursor = "grab", H(e));
+	}, K = (e) => (t) => {
+		t.stopPropagation();
+		let n = Array.from(k.current?.children || []).indexOf(t.currentTarget), r = (D.current?.offsetWidth || 0) - L * 2, i = (k.current?.children[0]?.clientWidth || 0) + I, a = Math.floor(r / (i / _)) * g, o = (x - 1) * a, s = o + a - 1, c = k.current?.children.length || 0, l = n % g, u = Math.floor(n / g), d = n;
+		switch (t.key) {
+			case "ArrowRight": {
+				t.preventDefault();
+				let e = (u + 1) * g + l;
+				e < c && (d = e);
+				break;
+			}
+			case "ArrowLeft": {
+				t.preventDefault();
+				let e = (u - 1) * g + l;
+				e >= 0 && (d = e);
+				break;
+			}
+			case "ArrowDown": {
+				t.preventDefault();
+				let e = n + 1;
+				e < c && e % g > l && (d = e);
+				break;
+			}
+			case "ArrowUp": {
+				t.preventDefault();
+				let e = n - 1;
+				e >= 0 && e % g < l && (d = e);
+				break;
+			}
+			case "Enter":
+			case " ":
+				t.preventDefault(), t.currentTarget.click();
+				return;
+			default: return;
+		}
+		if (d >= o && d <= s) {
+			(k.current?.children[d])?.focus();
+			return;
+		}
+		d >= 0 && d < c && (F.current = requestAnimationFrame(() => {
+			(k.current?.children[d])?.focus();
+		})), e?.(t);
+	}, q = (e) => {
+		e.propertyName === "transform" && (P.current = !0);
+	}, J = (e) => (t) => {
+		E(Number(t.currentTarget.getAttribute("aria-posinset")) - 1), e?.(t);
+	};
+	return a(() => {
+		let e = () => H(x);
+		return e(), window.addEventListener("resize", e), () => {
+			window.removeEventListener("resize", e);
+		};
+	}, [H, x]), a(() => {
+		let e = () => {
+			let e = (D.current?.offsetWidth || 0) - L * 2, t = (k.current?.children[0]?.clientWidth || 0) + I, n = Math.floor(e / (t / _)), r = Math.ceil(z / (g || 1)), i = Math.max(r - (n - 1), 1);
+			S((e) => e > i ? i : e), w(i);
+		};
+		return e(), window.addEventListener("resize", e), () => {
+			window.removeEventListener("resize", e);
+		};
+	}, [
+		L,
+		I,
+		z,
+		_,
+		g,
+		p
+	]), a(() => {
+		let e = O.current, t = (t, n, r) => {
+			if (!e || C <= 1) return;
+			e.style.transition = "none", e.style.cursor = "grabbing", M.current = t - A.current;
+			let i = n - j.current;
+			N.current = N.current || Math.abs(M.current) > 5 && Math.abs(i) < 10, N.current && (r.cancelable && (r.stopPropagation(), r.preventDefault()), e.style.transition = "none", e.style.cursor = "grabbing", H(x, M.current));
+		}, n = (e) => t(e.touches[0].clientX, e.touches[0].clientY, e), r = (e) => {
+			N.current && t(e.clientX, e.clientY, e);
+		};
+		return e && (e.addEventListener("mousemove", r), e.addEventListener("touchmove", n)), () => {
+			e && (e.removeEventListener("mousemove", r), e.removeEventListener("touchmove", n));
+		};
+	}, [
+		H,
+		x,
+		C
+	]), a(() => () => {
+		F.current && cancelAnimationFrame(F.current);
+	}, []), a(() => {
+		let e = k.current, t = (e) => {
+			P.current || (e.stopPropagation(), e.preventDefault());
+		};
+		return e?.addEventListener("click", t), () => {
+			e?.removeEventListener("click", t);
+		};
+	}, []), /* @__PURE__ */ d(c, {
+		flexDirection: "column",
+		role: "list",
+		"aria-roledescription": "carousel",
+		"aria-label": "슬라이더",
+		flexGrow: 1,
+		...y,
+		inlineCSS: {
+			width: "100%",
+			...y?.inlineCSS
+		},
+		children: [/* @__PURE__ */ u(c, {
+			ref: D,
+			inlineCSS: { overflow: "hidden" },
+			children: /* @__PURE__ */ u(c, {
+				ref: O,
+				onMouseDown: W,
+				onMouseUp: V,
+				onMouseLeave: V,
+				onTouchStart: U,
+				onTouchEnd: V,
+				onTouchCancel: V,
+				onTransitionEnd: q,
+				inlineCSS: {
+					gap: I,
+					paddingLeft: L,
+					paddingRight: L,
+					transition: "transform 0.2s",
+					transform: "translate3d(0, 0, 0)",
+					cursor: "grab"
+				},
+				children: /* @__PURE__ */ u(c, {
+					ref: k,
+					inlineCSS: {
+						gap: I,
+						display: "grid",
+						gridTemplateRows: "min-content",
+						transform: "translate3d(0, 0, 0)"
+					},
+					children: t.map(R, (e, t) => n(e, {
+						role: "listitem",
+						tabIndex: t === T ? 0 : -1,
+						"aria-roledescription": "slide",
+						"aria-label": `${z}개 중 ${t + 1}번째 슬라이드`,
+						"aria-posinset": t + 1,
+						"aria-setsize": z,
+						onKeyDown: K(e.props.onKeyDown),
+						onFocus: J(e.props.onFocus),
+						...e.props,
+						style: {
+							...e.props?.style,
+							gridRow: `${t % g + 1} / ${t % g + 1}`
+						}
+					}))
+				})
+			})
+		}), typeof v == "function" && v({
+			page: x,
+			totalPages: C,
+			onChange: G
+		})]
+	});
 }
-export {
-  ye as default
-};
+//#endregion
+export { p as default };

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

@@ -1,8 +1,11 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Flexbox as t } from "@dotss/ui";
-function l({ children: o, ...r }) {
-  return /* @__PURE__ */ e(t, { ...r, children: o });
+import { Flexbox as e } from "@dotss/ui";
+import { jsx as t } from "react/jsx-runtime";
+//#region shared/components/Carousel/CarouselSlide/CarouselSlide.tsx
+function n({ children: n, ...r }) {
+	return /* @__PURE__ */ t(e, {
+		...r,
+		children: n
+	});
 }
-export {
-  l as default
-};
+//#endregion
+export { n as default };

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

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

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

@@ -1,6 +1,6 @@
-import o from "./Carousel.mjs";
-import { default as l } from "./CarouselSlide/CarouselSlide.mjs";
-export {
-  l as CarouselSlide,
-  o as default
-};
+import e from "./CarouselSlide/index.mjs";
+import t from "./Carousel.mjs";
+//#region shared/components/Carousel/index.ts
+var n = t;
+//#endregion
+export { e as CarouselSlide, n as default };