@dotss/tictoccroc 0.0.0

package/dist/shared/components/ImageZoomDialog/ImageBlock/ImageBlock.mjs

@@ -0,0 +1,50 @@
+import { jsxs as s, Fragment as n, jsx as a } from "react/jsx-runtime";
+import { useState as l } from "react";
+import d from "@thedotscorp/ui/Flexbox";
+import m from "../../Image/Image.mjs";
+function x({ fallback: t, containerHeight: e, ...o }) {
+  const [r, i] = l(!1);
+  return /* @__PURE__ */ s(n, { children: [
+    /* @__PURE__ */ a(
+      m,
+      {
+        ...o,
+        onLoad: () => i(!0),
+        disabledResizing: !0,
+        draggable: !1,
+        wrapperProps: {
+          inlineCSS: {
+            overflow: "visible",
+            margin: "0 auto"
+          }
+        },
+        style: {
+          position: "static",
+          maxWidth: "100%",
+          maxHeight: e,
+          objectFit: "contain",
+          transform: "translate3d(0, 0, 0) scale(1)",
+          marginTop: "calc(var(--status-bar-height, 0px) * -1)",
+          zIndex: 1
+        }
+      }
+    ),
+    !r && !!t && /* @__PURE__ */ a(
+      d,
+      {
+        "aria-busy": !0,
+        inlineCSS: {
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          cursor: "wait"
+        },
+        children: t
+      }
+    )
+  ] });
+}
+export {
+  x as default
+};

package/dist/shared/components/ImageZoomDialog/ImageBlock/index.d.ts

@@ -0,0 +1,2 @@
+import { default as ImageBlock } from './ImageBlock';
+export default ImageBlock;

package/dist/shared/components/ImageZoomDialog/ImageBlock/index.mjs

@@ -0,0 +1,4 @@
+import a from "./ImageBlock.mjs";
+export {
+  a as default
+};

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

@@ -0,0 +1,16 @@
+import { PropsWithChildren, ReactNode } from 'react';
+export interface ImageZoomDialogProps {
+    open?: boolean;
+    onClose?: () => void;
+    onSwipe?: (page: number) => void;
+    sources: {
+        url: string;
+        alt: string;
+    }[];
+    initialPage?: number;
+    title?: ReactNode;
+    fallback?: ReactNode;
+    loop?: boolean;
+}
+declare function ImageZoomDialog({ children, open, onClose, onSwipe, sources, initialPage, title, fallback, loop }: PropsWithChildren<ImageZoomDialogProps>): import("@emotion/react/jsx-runtime").JSX.Element;
+export default ImageZoomDialog;

package/dist/shared/components/ImageZoomDialog/ImageZoomDialog.mjs

@@ -0,0 +1,344 @@
+import { jsxs as N, jsx as d } from "react/jsx-runtime";
+import { useState as W, useRef as u, useEffect as A } from "react";
+import pt from "@thedotscorp/ui/core/useTheme";
+import Mt from "@thedotscorp/ui/Dialog";
+import C from "@thedotscorp/ui/Flexbox";
+import yt from "/Users/dong-yeon/Desktop/codes/dots/node_modules/.pnpm/@thedotscorp+ui@1.1.0_@emotion+react@11.14.0_@types+react@19.1.6_react@18.3.1__@emotion_5e74bcb90e85c612e05d311f1928ebed/node_modules/@thedotscorp/ui/IconButton/index.es.js";
+import Ct from "@thedotscorp/ui/Typography";
+import bt from "./ImageBlock/ImageBlock.mjs";
+import St from "../Swiper/Swiper.mjs";
+import wt from "../Swiper/SwiperBlock/SwiperBlock.mjs";
+function Bt({
+  children: et,
+  open: $ = !1,
+  onClose: b,
+  onSwipe: P,
+  sources: L,
+  initialPage: G = 0,
+  title: U,
+  fallback: nt,
+  loop: ct = !1
+}) {
+  const {
+    palette: { grey: Z, etc: O }
+  } = pt(), [at, J] = W(!1), [it, st] = W(G), [ut, S] = W(!1), [ot, lt] = W("100vh"), [K, w] = W(1), l = u(null), r = u(1), Q = u(1), V = u(3), g = u(0), x = u(0), B = u(0), D = u(0), e = u(0), n = u(0), o = u(!1), f = u(!1), k = u(null), Y = u(0), p = u(0), ht = (t) => {
+    o.current && t.stopPropagation(), B.current = t.clientX - e.current, D.current = t.clientY - n.current, f.current = r.current > 1;
+  }, ft = (t) => {
+    if (!f.current) return;
+    e.current = t.clientX - B.current, n.current = t.clientY - D.current;
+    const i = t.currentTarget, { width: s, height: a } = i.getBoundingClientRect(), c = s / r.current, M = a / r.current, h = Math.max(
+      0,
+      (c * r.current - l.current.offsetWidth) / 2
+    ), m = Math.max(
+      0,
+      (M * r.current - l.current.offsetHeight) / 2
+    );
+    e.current = Math.min(
+      Math.max(e.current, -h),
+      h
+    ), n.current = Math.min(
+      Math.max(n.current, -m),
+      m
+    ), Math.abs(e.current) >= h && (o.current = !1, S(!1)), t.currentTarget.style.cursor = "grabbing", t.currentTarget.style.transition = "none", t.currentTarget.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`;
+  }, _ = (t) => {
+    f.current && (t.currentTarget.style.cursor = "grab"), f.current = !1;
+  }, mt = (t) => {
+    if (B.current = t.touches[0].clientX - e.current, D.current = t.touches[0].clientY - n.current, o.current = t.touches.length === 2, f.current = t.touches.length === 1 && r.current > 1, o.current) {
+      S(!0);
+      const i = t.touches[1].clientX - t.touches[0].clientX, s = t.touches[1].clientY - t.touches[0].clientY;
+      g.current = Math.sqrt(i ** 2 + s ** 2);
+    }
+  }, dt = (t) => {
+    const i = t.touches.length === 2, s = t.touches.length === 1;
+    if (o.current && i) {
+      const a = t.touches[1].clientX - t.touches[0].clientX, c = t.touches[1].clientY - t.touches[0].clientY;
+      x.current = Math.sqrt(a ** 2 + c ** 2);
+      const M = x.current / g.current, h = Math.min(
+        Math.max(Q.current, r.current * M),
+        V.current
+      ), m = (t.touches[0].clientX + t.touches[1].clientX) / 2, y = (t.touches[0].clientY + t.touches[1].clientY) / 2, { left: T, top: I, width: X, height: v } = t.currentTarget.getBoundingClientRect(), j = X / r.current, q = v / r.current, F = m - T - X / 2, z = y - I - v / 2, R = h / r.current;
+      e.current -= F * (R - 1), n.current -= z * (R - 1), r.current = h, w(h);
+      const E = Math.max(
+        0,
+        (j * r.current - l.current.offsetWidth) / 2
+      ), H = Math.max(
+        0,
+        (q * r.current - l.current.offsetHeight) / 2
+      );
+      e.current = Math.min(
+        Math.max(e.current, -E),
+        E
+      ), n.current = Math.min(
+        Math.max(n.current, -H),
+        H
+      ), g.current = x.current, t.currentTarget.style.transition = "none", t.currentTarget.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`;
+    } else if (f.current && s) {
+      e.current = t.touches[0].clientX - B.current, n.current = t.touches[0].clientY - D.current;
+      const { width: a, height: c } = t.currentTarget.getBoundingClientRect(), M = a / r.current, h = c / r.current, m = Math.max(
+        0,
+        (M * r.current - l.current.offsetWidth) / 2
+      ), y = Math.max(
+        0,
+        (h * r.current - l.current.offsetHeight) / 2
+      );
+      e.current = Math.min(
+        Math.max(e.current, -m),
+        m
+      ), n.current = Math.min(
+        Math.max(n.current, -y),
+        y
+      );
+      const T = Math.abs(e.current) >= m;
+      S(!T), t.currentTarget.style.transition = "none", t.currentTarget.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`;
+    }
+  }, tt = (t) => {
+    const i = r.current;
+    if (o.current && i > 1.2) {
+      const s = Math.abs(
+        (t.currentTarget.offsetWidth * r.current - l.current.offsetWidth) / 2
+      ), a = Math.abs(
+        (t.currentTarget.offsetHeight * r.current - l.current.offsetHeight) / 2
+      );
+      e.current = Math.min(
+        Math.max(e.current, -s),
+        s
+      ), n.current = Math.min(
+        Math.max(n.current, -a),
+        a
+      ), t.currentTarget.style.transition = "transform 0.3s", t.currentTarget.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`;
+    } else o.current && i <= 1.2 && (e.current = 0, n.current = 0, g.current = 0, x.current = 0, r.current = 1, w(1), o.current = !1, f.current = !1, t.currentTarget.style.transition = "transform 0.3s", t.currentTarget.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`, S(!1));
+    f.current = !1;
+  }, gt = ({ currentPage: t }) => {
+    var s;
+    t !== it ? (e.current = 0, n.current = 0, g.current = 0, r.current = 1, w(1), x.current = 0, o.current = !1, f.current = !1, Array.from(((s = k.current) == null ? void 0 : s.getElementsByTagName("img")) || []).forEach((c) => {
+      c.style.cursor = "default", c.style.transition = "transform 0.1s 0.1s", c.style.transform = "translate3d(0, 0, 0) scale(1)";
+    })) : r.current > 1.2 && (o.current = !0), P == null || P(t), st(t);
+  }, xt = () => {
+    f.current = !1;
+  };
+  return A(() => {
+    var s;
+    const t = Array.from(((s = k.current) == null ? void 0 : s.getElementsByTagName("img")) || []), i = (a) => {
+      a.preventDefault(), o.current = !0, S(!0);
+      const c = a.currentTarget, M = a.deltaY > 0 ? -0.1 : 0.1, h = Math.min(
+        Math.max(Q.current, r.current + M),
+        V.current
+      ), { left: m, top: y, width: T, height: I } = c.getBoundingClientRect(), X = T / r.current, v = I / r.current, j = a.clientX - m - T / 2, q = a.clientY - y - I / 2, F = h / r.current;
+      e.current -= j * (F - 1), n.current -= q * (F - 1), r.current = h, w(h);
+      const z = Math.max(
+        0,
+        (X * r.current - l.current.offsetWidth) / 2
+      ), R = Math.max(
+        0,
+        (v * r.current - l.current.offsetHeight) / 2
+      );
+      e.current = Math.min(
+        Math.max(e.current, -z),
+        z
+      ), n.current = Math.min(
+        Math.max(n.current, -R),
+        R
+      ), o.current = !0, c.style.cursor = "grab", c.style.transition = "none", c.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`, p.current && cancelAnimationFrame(p.current), p.current = requestAnimationFrame(() => {
+        const E = r.current;
+        if (E > 1) {
+          const H = Math.max(
+            0,
+            (X * r.current - l.current.offsetWidth) / 2
+          ), rt = Math.max(
+            0,
+            (v * r.current - l.current.offsetHeight) / 2
+          );
+          e.current = Math.min(
+            Math.max(e.current, -H),
+            H
+          ), n.current = Math.min(
+            Math.max(n.current, -rt),
+            rt
+          ), c.style.cursor = "default", c.style.transition = "transform 0.3s", c.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`;
+        } else E <= 1.2 && (S(!1), e.current = 0, n.current = 0, g.current = 0, x.current = 0, r.current = 1, w(1), o.current = !1, f.current = !1, c.style.cursor = "default", c.style.transition = "transform 0.3s", c.style.transform = `translate3d(${e.current}px, ${n.current}px, 0) scale(${r.current})`);
+      });
+    };
+    return t.forEach((a) => {
+      a.addEventListener("wheel", i);
+    }), () => {
+      p.current && cancelAnimationFrame(p.current), t.forEach((a) => {
+        a.removeEventListener("wheel", i);
+      });
+    };
+  }, [at]), A(() => {
+    const t = () => {
+      var s;
+      const i = (s = k.current) == null ? void 0 : s.offsetHeight;
+      i && lt(`${i}px`);
+    };
+    return t(), window.addEventListener("resize", t), () => {
+      window.removeEventListener("resize", t);
+    };
+  }, []), A(() => ($ ? Y.current = requestAnimationFrame(() => {
+    J(!0);
+  }) : J(!1), () => {
+    Y.current && cancelAnimationFrame(Y.current);
+  }), [$]), A(() => ($ && (r.current = 1, w(1), e.current = 0, n.current = 0, g.current = 0, x.current = 0, o.current = !1, f.current = !1), () => {
+    p.current && cancelAnimationFrame(p.current), Y.current && cancelAnimationFrame(Y.current);
+  }), [$]), A(() => {
+    L.length || b == null || b();
+  }, [L, b]), /* @__PURE__ */ N(
+    Mt,
+    {
+      ref: l,
+      open: $,
+      onClose: b,
+      fullScreen: !0,
+      statusBarColor: Z.black,
+      hideSystemNavigationBar: !0,
+      "aria-modal": !0,
+      "aria-labelledby": U ? "image-zoom-dialog-title" : void 0,
+      inlineCSS: {
+        backgroundColor: Z.black,
+        scrollbarWidth: "none",
+        "&::-webkit-scrollbar": {
+          display: "none"
+        },
+        "& > div": {
+          scrollbarWidth: "none",
+          "&::-webkit-scrollbar": {
+            display: "none"
+          }
+        }
+      },
+      children: [
+        /* @__PURE__ */ d(
+          C,
+          {
+            "aria-hidden": !0,
+            inlineCSS: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              minHeight: "var(--status-bar-height, 0px)",
+              backgroundColor: O.dimmed01,
+              zIndex: 2
+            }
+          }
+        ),
+        /* @__PURE__ */ d(
+          C,
+          {
+            tag: "header",
+            inlineCSS: {
+              position: "absolute",
+              top: "var(--status-bar-height, 0px)",
+              left: 0,
+              width: "100%",
+              backgroundColor: O.dimmed01,
+              zIndex: 2
+            },
+            children: /* @__PURE__ */ N(
+              C,
+              {
+                alignItems: "center",
+                p: 2,
+                inlineCSS: {
+                  position: "relative",
+                  display: "grid",
+                  gridTemplateColumns: "1fr auto 1fr",
+                  width: "100%",
+                  minHeight: 56,
+                  maxHeight: 56
+                },
+                children: [
+                  /* @__PURE__ */ d(C, { "aria-hidden": !0 }),
+                  /* @__PURE__ */ d(
+                    Ct,
+                    {
+                      id: "image-zoom-dialog-title",
+                      tag: "div",
+                      variant: "h4B",
+                      noWrap: !0,
+                      color: "grey.white",
+                      "aria-label": "이미지 확대창",
+                      inlineCSS: {
+                        flexGrow: 1
+                      },
+                      children: U
+                    }
+                  ),
+                  /* @__PURE__ */ d(C, { justifyContent: "flex-end", children: /* @__PURE__ */ d(yt, { name: "CloseLine", color: "tertiary", onClick: b, "aria-label": "창 닫기" }) })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ d(
+          C,
+          {
+            ref: k,
+            alignItems: "center",
+            justifyContent: "center",
+            inlineCSS: {
+              position: "relative",
+              width: "100%",
+              height: "100%",
+              touchAction: "none"
+            },
+            children: /* @__PURE__ */ d(
+              St,
+              {
+                onSwipe: gt,
+                onSwiping: xt,
+                initialPage: G,
+                disableSwipe: ut,
+                loop: ct,
+                children: L.map(({ url: t, alt: i }) => /* @__PURE__ */ d(wt, { children: /* @__PURE__ */ d(
+                  bt,
+                  {
+                    src: t,
+                    alt: i,
+                    containerHeight: ot,
+                    fallback: nt,
+                    onMouseDown: ht,
+                    onMouseMove: ft,
+                    onMouseUp: _,
+                    onMouseOut: _,
+                    onTouchStart: mt,
+                    onTouchMove: dt,
+                    onTouchEnd: tt,
+                    onTouchCancel: tt
+                  }
+                ) }, `image-${t}`))
+              }
+            )
+          }
+        ),
+        et,
+        /* @__PURE__ */ N(
+          C,
+          {
+            role: "status",
+            inlineCSS: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "1px",
+              height: "1px",
+              padding: 0,
+              margin: "-1px",
+              overflow: "hidden",
+              clip: "rect(0, 0, 0, 0)",
+              whiteSpace: "nowrap",
+              border: 0
+            },
+            children: [
+              K > 1 && "이미지가 확대되었어요.",
+              K <= 1 && "이미지가 원래 크기로 복원되었어요."
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Bt as default
+};

package/dist/shared/components/ImageZoomDialog/ImageZoomDialogContent/ImageZoomDialogContent.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+declare function ImageZoomDialogContent({ children }: PropsWithChildren): import("@emotion/react/jsx-runtime").JSX.Element;
+export default ImageZoomDialogContent;

package/dist/shared/components/ImageZoomDialog/ImageZoomDialogContent/ImageZoomDialogContent.mjs

@@ -0,0 +1,23 @@
+import { jsx as t } from "react/jsx-runtime";
+import e from "@thedotscorp/ui/core/useTheme";
+import i from "@thedotscorp/ui/Typography";
+function p({ children: n }) {
+  const { spacing: o } = e();
+  return /* @__PURE__ */ t(
+    i,
+    {
+      variant: "b2R",
+      color: "grey.white",
+      inlineCSS: {
+        display: "flex",
+        flexDirection: "column",
+        gap: o.content(2),
+        padding: o.content(4)
+      },
+      children: n
+    }
+  );
+}
+export {
+  p as default
+};

package/dist/shared/components/ImageZoomDialog/ImageZoomDialogContent/index.d.ts

@@ -0,0 +1,2 @@
+import { default as ImageZoomDialogContent } from './ImageZoomDialogContent';
+export default ImageZoomDialogContent;

package/dist/shared/components/ImageZoomDialog/ImageZoomDialogContent/index.mjs

@@ -0,0 +1,4 @@
+import t from "./ImageZoomDialogContent.mjs";
+export {
+  t as default
+};

package/dist/shared/components/ImageZoomDialog/ImageZoomDialogFooter/ImageZoomDialogFooter.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+declare function ImageZoomDialogFooter({ children }: PropsWithChildren): import("@emotion/react/jsx-runtime").JSX.Element;
+export default ImageZoomDialogFooter;

package/dist/shared/components/ImageZoomDialog/ImageZoomDialogFooter/ImageZoomDialogFooter.mjs

@@ -0,0 +1,28 @@
+import { jsx as e } from "react/jsx-runtime";
+import i from "@thedotscorp/ui/core/useTheme";
+import r from "@thedotscorp/ui/Flexbox";
+function l({ children: o }) {
+  const {
+    palette: { etc: t }
+  } = i();
+  return /* @__PURE__ */ e(
+    r,
+    {
+      tag: "footer",
+      flexDirection: "column",
+      inlineCSS: {
+        position: "absolute",
+        left: 0,
+        bottom: 0,
+        paddingBottom: "var(--system-navigation-bar-height, 0px)",
+        width: "100%",
+        backgroundColor: t.dimmed01,
+        zIndex: 2
+      },
+      children: o
+    }
+  );
+}
+export {
+  l as default
+};

package/dist/shared/components/ImageZoomDialog/ImageZoomDialogFooter/index.d.ts

@@ -0,0 +1,2 @@
+import { default as ImageZoomDialogFooter } from './ImageZoomDialogFooter';
+export default ImageZoomDialogFooter;

package/dist/shared/components/ImageZoomDialog/ImageZoomDialogFooter/index.mjs

@@ -0,0 +1,4 @@
+import a from "./ImageZoomDialogFooter.mjs";
+export {
+  a as default
+};

package/dist/shared/components/ImageZoomDialog/ImageZoomDialogToolbar/ImageZoomDialogToolbar.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+declare function ImageZoomDialogToolbar({ children }: PropsWithChildren): import("@emotion/react/jsx-runtime").JSX.Element;
+export default ImageZoomDialogToolbar;

package/dist/shared/components/ImageZoomDialog/ImageZoomDialogToolbar/ImageZoomDialogToolbar.mjs

@@ -0,0 +1,22 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Children as n } from "react";
+import r from "@thedotscorp/ui/Flexbox";
+function l({ children: o }) {
+  const t = n.count(o);
+  return /* @__PURE__ */ e(
+    r,
+    {
+      pl: 2,
+      pr: 2,
+      alignItems: "center",
+      justifyContent: t > 1 ? "space-between" : "center",
+      inlineCSS: {
+        minHeight: 48
+      },
+      children: o
+    }
+  );
+}
+export {
+  l as default
+};

package/dist/shared/components/ImageZoomDialog/ImageZoomDialogToolbar/index.d.ts

@@ -0,0 +1,2 @@
+import { default as ImageZoomDialogToolbar } from './ImageZoomDialogToolbar';
+export default ImageZoomDialogToolbar;

package/dist/shared/components/ImageZoomDialog/ImageZoomDialogToolbar/index.mjs

@@ -0,0 +1,4 @@
+import a from "./ImageZoomDialogToolbar.mjs";
+export {
+  a as default
+};

package/dist/shared/components/ImageZoomDialog/index.d.ts

@@ -0,0 +1,6 @@
+import { default as ImageZoomDialog, ImageZoomDialogProps } from './ImageZoomDialog';
+export { default as ImageZoomDialogContent } from './ImageZoomDialogContent';
+export { default as ImageZoomDialogFooter } from './ImageZoomDialogFooter';
+export { default as ImageZoomDialogToolbar } from './ImageZoomDialogToolbar';
+export type { ImageZoomDialogProps };
+export default ImageZoomDialog;

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

@@ -0,0 +1,10 @@
+import a from "./ImageZoomDialog.mjs";
+import { default as t } from "./ImageZoomDialogContent/ImageZoomDialogContent.mjs";
+import { default as l } from "./ImageZoomDialogFooter/ImageZoomDialogFooter.mjs";
+import { default as g } from "./ImageZoomDialogToolbar/ImageZoomDialogToolbar.mjs";
+export {
+  t as ImageZoomDialogContent,
+  l as ImageZoomDialogFooter,
+  g as ImageZoomDialogToolbar,
+  a as default
+};

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

@@ -0,0 +1,9 @@
+import { FlexboxProps } from 'node_modules/@thedotscorp/ui/Flexbox/Flexbox';
+export interface RollerProps extends FlexboxProps {
+    spacing?: number;
+    edgeSpacing?: number;
+    rowCount?: number;
+    maxWidth?: number;
+}
+declare function Roller({ children, spacing, edgeSpacing, rowCount, inlineCSS }: RollerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default Roller;