@dotss/tictoccroc 0.0.36 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,5 +7,5 @@ export interface CalendarProps extends Omit<FlexboxProps, 'onChange' | 'value'>,
7
7
  weekHeadInlineCSS?: FlexboxProps['inlineCSS'];
8
8
  datePickerProps?: Omit<DatePickerProps, 'onChange' | 'value' | 'date'>;
9
9
  }
10
- declare const Calendar: import('react').ForwardRefExoticComponent<Omit<CalendarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
10
+ declare const Calendar: any;
11
11
  export default Calendar;
@@ -20,5 +20,5 @@ export interface ImageProps extends Omit<HTMLProps<HTMLImageElement>, 'onError'>
20
20
  enableErrorFallback?: boolean;
21
21
  renderErrorFallback?: () => ReactNode;
22
22
  }
23
- declare const Image: import('react').ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import('react').RefAttributes<HTMLImageElement>>;
23
+ declare const Image: any;
24
24
  export default Image;
@@ -7,7 +7,7 @@ export declare function getHorizontalLayoutRows(images: {
7
7
  originalWidth?: number;
8
8
  width: number;
9
9
  height: number;
10
- }[], blocks: ReactElement<MasonryBlockProps>[], rowCount: number, fallbackWidth: number): ReactElement<MasonryBlockProps, string | import('react').JSXElementConstructor<any>>[][];
10
+ }[], blocks: ReactElement<MasonryBlockProps>[], rowCount: number, fallbackWidth: number): ReactElement<MasonryBlockProps>[][];
11
11
  export declare function findNextFocusableElement(currentElement: HTMLDivElement, keyDirection: 'left' | 'right' | 'up' | 'down', candidates: (HTMLDivElement | null)[]): HTMLDivElement | null;
12
12
  export declare function getNextIndexHorizontalFromRows(rows: HTMLDivElement[][], currentIndex: number, keyDirection: 'up' | 'down' | 'left' | 'right'): number | null;
13
13
  export declare function findImageInChildren(children: ReactNode): ReactElement<ImageProps> | null;
@@ -17,5 +17,5 @@ export interface MasonryBlockProps extends FlexboxProps {
17
17
  }>;
18
18
  setInnerRef?: (ref: HTMLDivElement | null) => void;
19
19
  }
20
- declare const MasonryBlock: import('react').ForwardRefExoticComponent<Omit<MasonryBlockProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
20
+ declare const MasonryBlock: any;
21
21
  export default MasonryBlock;
@@ -20,6 +20,9 @@ export interface SwiperProps extends FlexboxProps {
20
20
  loop?: boolean;
21
21
  disableSwipe?: boolean;
22
22
  renderPagination?: (props: SwiperPaginationProps) => ReactNode;
23
+ autoSwipe?: boolean;
24
+ autoSwipeInterval?: number;
25
+ autoSwipeDuration?: number;
23
26
  }
24
- declare function Swiper({ children, initialPage, onSwipe, onSwiping, loop, disableSwipe, renderPagination, inlineCSS, ...props }: SwiperProps): import("@emotion/react/jsx-runtime").JSX.Element;
27
+ declare function Swiper({ children, initialPage, onSwipe, onSwiping, loop, disableSwipe, renderPagination, inlineCSS, autoSwipe, autoSwipeInterval, autoSwipeDuration, ...props }: SwiperProps): import("@emotion/react/jsx-runtime").JSX.Element;
25
28
  export default Swiper;
@@ -1,123 +1,151 @@
1
- import { jsxs as Z } from "react/jsx-runtime";
2
- import { useState as _, useRef as f, Children as x, isValidElement as G, useEffect as k, cloneElement as ar } from "react";
3
- import { Flexbox as K } from "@dotss/ui";
4
- import I from "../MediaDialog/MediaBlock/MediaBlock.mjs";
5
- import { createSwipeEvent as b } from "./Swiper.utils.mjs";
6
- import U from "./SwiperBlock/SwiperBlock.mjs";
7
- function vr({
8
- children: j,
9
- initialPage: E = 0,
10
- onSwipe: u,
11
- onSwiping: T,
12
- loop: y = !1,
13
- disableSwipe: O = !1,
14
- renderPagination: B,
15
- inlineCSS: S,
16
- ...w
1
+ import { jsxs as S } from "react/jsx-runtime";
2
+ import { useState as w, useRef as m, Children as X, isValidElement as G, useCallback as dr, useEffect as M, cloneElement as vr } from "react";
3
+ import { Flexbox as rr } from "@dotss/ui";
4
+ import U from "../MediaDialog/MediaBlock/MediaBlock.mjs";
5
+ import { createSwipeEvent as C } from "./Swiper.utils.mjs";
6
+ import j from "./SwiperBlock/SwiperBlock.mjs";
7
+ function Pr({
8
+ children: B,
9
+ initialPage: T = 0,
10
+ onSwipe: s,
11
+ onSwiping: W,
12
+ loop: h = !1,
13
+ disableSwipe: tr = !1,
14
+ renderPagination: q,
15
+ inlineCSS: er,
16
+ autoSwipe: H = !1,
17
+ autoSwipeInterval: J = 3e3,
18
+ autoSwipeDuration: Q = 1e3,
19
+ ...nr
17
20
  }) {
18
- const [P, R] = _(E), [s, rr] = _(1), t = f(null), X = f(0), W = f(0), q = f(0), Y = f(0), o = f(!1), d = f(!0), N = f(""), n = f(E), H = f(!1), l = f(null), p = x.count(j), m = x.toArray(j).filter(G).filter((r) => r.type === U || r.type === I), D = p > 1 && !O, tr = x.toArray(m == null ? void 0 : m[0]).filter(G).filter((r) => r.type === U || r.type === I), er = x.toArray(m == null ? void 0 : m[(m == null ? void 0 : m.length) - 1]).filter(G).filter((r) => r.type === U || r.type === I), J = (r, e, i) => {
19
- !t.current || !D || (N.current = t.current.style.transform, W.current = r, X.current = r + t.current.offsetWidth * (i + 1), q.current = e);
20
- }, C = (r, e, i) => {
21
- if (!t.current || !D || !o.current || !d.current)
22
- return;
23
- d.current = !1, t.current.style.transition = "transform 0.2s", t.current.style.cursor = "grab", l.current && (t.current.removeEventListener("transitionend", l.current), l.current = null);
24
- const a = e || P, c = i || X.current - t.current.offsetWidth * (a + 1) - r, g = t.current.offsetWidth * 0.1;
25
- if (Math.abs(c) < g && !e) {
26
- t.current.style.transform = N.current, o.current = !1, d.current = !0, u == null || u(
27
- b({
21
+ const [k, $] = w(T), [c, cr] = w(1), t = m(null), A = m(0), Y = m(0), V = m(0), N = m(0), u = m(!1), f = m(!0), F = m(""), n = m(T), Z = m(!1), l = m(null), p = X.count(B), d = X.toArray(B).filter(G).filter((r) => r.type === j || r.type === U), D = p > 1 && !tr, sr = X.toArray(d == null ? void 0 : d[0]).filter(G).filter((r) => r.type === j || r.type === U), ur = X.toArray(d == null ? void 0 : d[(d == null ? void 0 : d.length) - 1]).filter(G).filter((r) => r.type === j || r.type === U), _ = (r, e, i) => {
22
+ !t.current || !D || (F.current = t.current.style.transform, Y.current = r, A.current = r + t.current.offsetWidth * (i + 1), V.current = e);
23
+ }, P = dr(
24
+ (r, e, i, {
25
+ isAutoSwiped: v = !1,
26
+ shouldFocus: a = !1
27
+ } = {}) => {
28
+ if (!t.current || !D || !u.current || !f.current)
29
+ return;
30
+ f.current = !1, t.current.style.transition = v ? `transform ${Q}ms` : "transform 0.2s", t.current.style.cursor = "grab", l.current && (t.current.removeEventListener("transitionend", l.current), l.current = null);
31
+ const o = e || k, y = i || A.current - t.current.offsetWidth * (o + 1) - r, g = t.current.offsetWidth * 0.1;
32
+ if (Math.abs(y) < g && !e) {
33
+ t.current.style.transform = F.current, u.current = !1, f.current = !0, s == null || s(
34
+ C({
35
+ realPage: n.current,
36
+ totalPages: c,
37
+ lastPage: n.current,
38
+ isLoop: !1
39
+ })
40
+ );
41
+ return;
42
+ }
43
+ const I = y <= -g && o - 1 < 0, z = y >= g && o + 1 === c, fr = y >= g && o + 1 < c, mr = y <= -g && o - 1 >= 0;
44
+ if (I) {
45
+ n.current = c - 1, s == null || s(
46
+ C({ realPage: n.current, totalPages: c, lastPage: 0, isLoop: !0 })
47
+ ), t.current.style.transform = "translate3d(0, 0, 0)", l.current = (x) => {
48
+ var b, E, L, R;
49
+ if (x.propertyName === "transform") {
50
+ if (!t.current) return;
51
+ if (t.current.style.transition = "none", t.current.style.transform = `translate3d(calc(-100% * ${c}), 0, 0)`, $(c - 1), u.current = !1, f.current = !0, a)
52
+ (L = (E = (b = t.current) == null ? void 0 : b.children) == null ? void 0 : E[c]) == null || L.focus();
53
+ else {
54
+ if (v) return;
55
+ (R = document.activeElement) == null || R.blur();
56
+ }
57
+ }
58
+ }, t.current.addEventListener("transitionend", l.current);
59
+ return;
60
+ } else if (z) {
61
+ n.current = 0, s == null || s(
62
+ C({
63
+ realPage: n.current,
64
+ totalPages: c,
65
+ lastPage: c - 1,
66
+ isLoop: !0
67
+ })
68
+ ), t.current.style.transform = `translate3d(calc(-100% * ${o + 2}), 0, 0)`, l.current = (x) => {
69
+ var b, E, L, R;
70
+ if (x.propertyName === "transform") {
71
+ if (!t.current) return;
72
+ if (t.current.style.transition = "none", t.current.style.transform = "translate3d(-100%, 0, 0)", $(0), u.current = !1, f.current = !0, a)
73
+ (L = (E = (b = t.current) == null ? void 0 : b.children) == null ? void 0 : E[1]) == null || L.focus();
74
+ else {
75
+ if (v) return;
76
+ (R = document.activeElement) == null || R.blur();
77
+ }
78
+ }
79
+ }, t.current.addEventListener("transitionend", l.current);
80
+ return;
81
+ }
82
+ fr ? (n.current = o + 1, s == null || s(
83
+ C({
28
84
  realPage: n.current,
29
- totalPages: s,
30
- lastPage: n.current,
85
+ totalPages: c,
86
+ lastPage: o,
87
+ isLoop: !0
88
+ })
89
+ ), $(n.current), t.current.style.transform = `translate3d(calc(-100% * ${o + 2}), 0, 0)`) : mr ? (n.current = o - 1, s == null || s(
90
+ C({
91
+ realPage: n.current,
92
+ totalPages: c,
93
+ lastPage: o,
31
94
  isLoop: !1
32
95
  })
33
- );
34
- return;
35
- }
36
- const $ = c <= -g && a - 1 < 0, A = c >= g && a + 1 === s, F = c >= g && a + 1 < s, z = c <= -g && a - 1 >= 0;
37
- if ($) {
38
- n.current = s - 1, u == null || u(
39
- b({ realPage: n.current, totalPages: s, lastPage: 0, isLoop: !0 })
40
- ), t.current.style.transform = "translate3d(0, 0, 0)", l.current = (M) => {
41
- var v, h, L;
42
- if (M.propertyName === "transform") {
43
- if (!t.current) return;
44
- t.current.style.transition = "none", t.current.style.transform = `translate3d(calc(-100% * ${s}), 0, 0)`, R(s - 1), o.current = !1, d.current = !0, (L = (h = (v = t.current) == null ? void 0 : v.children) == null ? void 0 : h[s]) == null || L.focus();
45
- }
46
- }, t.current.addEventListener("transitionend", l.current);
47
- return;
48
- } else if (A) {
49
- n.current = 0, u == null || u(
50
- b({
96
+ ), $(n.current), t.current.style.transform = `translate3d(calc(-100% * ${o}), 0, 0)`) : (s == null || s(
97
+ C({
51
98
  realPage: n.current,
52
- totalPages: s,
53
- lastPage: s - 1,
54
- isLoop: !0
99
+ totalPages: c,
100
+ lastPage: n.current,
101
+ isLoop: !1
55
102
  })
56
- ), t.current.style.transform = `translate3d(calc(-100% * ${a + 2}), 0, 0)`, l.current = (M) => {
57
- var v, h, L;
58
- if (M.propertyName === "transform") {
59
- if (!t.current) return;
60
- t.current.style.transition = "none", t.current.style.transform = "translate3d(-100%, 0, 0)", R(0), o.current = !1, d.current = !0, (L = (h = (v = t.current) == null ? void 0 : v.children) == null ? void 0 : h[1]) == null || L.focus();
103
+ ), t.current.style.transform = F.current), l.current = (x) => {
104
+ var b, E;
105
+ if (x.propertyName === "transform") {
106
+ u.current = !1, f.current = !0;
107
+ const L = Array.from(((b = t.current) == null ? void 0 : b.children) ?? []).find(
108
+ (R) => R.getAttribute("aria-current") === "page"
109
+ );
110
+ if (a && L)
111
+ L.focus();
112
+ else {
113
+ if (v) return;
114
+ (E = document.activeElement) == null || E.blur();
115
+ }
61
116
  }
62
117
  }, t.current.addEventListener("transitionend", l.current);
63
- return;
64
- }
65
- F ? (n.current = a + 1, u == null || u(
66
- b({
67
- realPage: n.current,
68
- totalPages: s,
69
- lastPage: a,
70
- isLoop: !0
71
- })
72
- ), R(n.current), t.current.style.transform = `translate3d(calc(-100% * ${a + 2}), 0, 0)`) : z ? (n.current = a - 1, u == null || u(
73
- b({
74
- realPage: n.current,
75
- totalPages: s,
76
- lastPage: a,
77
- isLoop: !1
78
- })
79
- ), R(n.current), t.current.style.transform = `translate3d(calc(-100% * ${a}), 0, 0)`) : (u == null || u(
80
- b({
81
- realPage: n.current,
82
- totalPages: s,
83
- lastPage: n.current,
84
- isLoop: !1
85
- })
86
- ), t.current.style.transform = N.current), l.current = (M) => {
87
- var v;
88
- if (M.propertyName === "transform") {
89
- o.current = !1, d.current = !0;
90
- const h = Array.from(((v = t.current) == null ? void 0 : v.children) ?? []).find(
91
- (L) => L.getAttribute("aria-current") === "page"
92
- );
93
- h && h.focus();
94
- }
95
- }, t.current.addEventListener("transitionend", l.current);
96
- }, nr = (r) => {
97
- o.current = !0, J(r.clientX, r.clientY, n.current);
98
- }, Q = (r) => C(r.clientX), cr = (r) => {
99
- J(r.touches[0].clientX, r.touches[0].clientY, n.current);
100
- }, V = (r) => C(r.changedTouches[0].clientX), sr = (r) => {
101
- o.current = !0;
118
+ },
119
+ [k, c, s, D, Q]
120
+ ), ar = (r) => {
121
+ u.current = !0, _(r.clientX, r.clientY, n.current);
122
+ }, K = (r) => P(r.clientX), or = (r) => {
123
+ _(r.touches[0].clientX, r.touches[0].clientY, n.current);
124
+ }, O = (r) => P(r.changedTouches[0].clientX), lr = (r) => {
125
+ u.current = !0;
102
126
  const e = r - 1;
103
- R(e <= 0 ? 0 : e), C(0, r);
104
- }, ur = (r) => (e) => {
105
- var i, a;
127
+ $(e <= 0 ? 0 : e), P(0, r);
128
+ }, ir = (r) => (e) => {
129
+ var i, v;
106
130
  switch (e.key) {
107
131
  case "ArrowRight": {
108
- if (e.preventDefault(), o.current || !d.current) return;
109
- const c = n.current === s - 1;
110
- if (!y && c)
132
+ if (e.preventDefault(), u.current || !f.current) return;
133
+ const a = n.current === c - 1;
134
+ if (!h && a)
111
135
  return;
112
- o.current = !0, C(0, n.current, (((i = t.current) == null ? void 0 : i.offsetWidth) ?? 0) * 0.1);
136
+ u.current = !0, P(0, n.current, (((i = t.current) == null ? void 0 : i.offsetWidth) ?? 0) * 0.1, {
137
+ shouldFocus: !0
138
+ });
113
139
  break;
114
140
  }
115
141
  case "ArrowLeft": {
116
- if (e.preventDefault(), o.current || !d.current) return;
117
- const c = n.current === 0;
118
- if (!y && c)
142
+ if (e.preventDefault(), u.current || !f.current) return;
143
+ const a = n.current === 0;
144
+ if (!h && a)
119
145
  return;
120
- o.current = !0, C(0, n.current, -((((a = t.current) == null ? void 0 : a.offsetWidth) ?? 0) * 0.1));
146
+ u.current = !0, P(0, n.current, -((((v = t.current) == null ? void 0 : v.offsetWidth) ?? 0) * 0.1), {
147
+ shouldFocus: !0
148
+ });
121
149
  break;
122
150
  }
123
151
  case "Enter": {
@@ -131,83 +159,94 @@ function vr({
131
159
  }
132
160
  r == null || r(e);
133
161
  };
134
- return k(() => {
135
- const r = t.current, e = (c, g, $) => {
136
- if (!t.current || !D || !d.current) return;
137
- Y.current = c - X.current;
138
- const A = 5;
139
- if (o.current = o.current || Math.abs(Y.current) > A && Math.abs(g - q.current) < A, o.current) {
140
- const F = W.current < c, z = W.current > c;
141
- if (!y && F && n.current === 0) {
142
- o.current = !1;
162
+ return M(() => {
163
+ const r = t.current, e = (a, o, y) => {
164
+ if (!t.current || !D || !f.current) return;
165
+ N.current = a - A.current;
166
+ const g = 5;
167
+ if (u.current = u.current || Math.abs(N.current) > g && Math.abs(o - V.current) < g, u.current) {
168
+ const I = Y.current < a, z = Y.current > a;
169
+ if (!h && I && n.current === 0) {
170
+ u.current = !1;
143
171
  return;
144
172
  }
145
- if (!y && z && n.current === s - 1) {
146
- o.current = !1;
173
+ if (!h && z && n.current === c - 1) {
174
+ u.current = !1;
147
175
  return;
148
176
  }
149
- $.cancelable && $.preventDefault(), T == null || T(
150
- b({
177
+ y.cancelable && y.preventDefault(), W == null || W(
178
+ C({
151
179
  realPage: n.current,
152
- totalPages: s,
180
+ totalPages: c,
153
181
  lastPage: n.current,
154
182
  isLoop: !1
155
183
  })
156
- ), t.current.style.transition = "none", t.current.style.cursor = "grabbing", t.current.style.transform = `translate3d(${Y.current}px, 0, 0)`;
184
+ ), t.current.style.transition = "none", t.current.style.cursor = "grabbing", t.current.style.transform = `translate3d(${N.current}px, 0, 0)`;
157
185
  }
158
- }, i = (c) => {
159
- o.current && e(c.clientX, c.clientY, c);
160
- }, a = (c) => e(c.touches[0].clientX, c.touches[0].clientY, c);
161
- return r && (r.addEventListener("mousemove", i), r.addEventListener("touchmove", a)), () => {
162
- r && (r.removeEventListener("mousemove", i), r.removeEventListener("touchmove", a));
186
+ }, i = (a) => {
187
+ u.current && e(a.clientX, a.clientY, a);
188
+ }, v = (a) => e(a.touches[0].clientX, a.touches[0].clientY, a);
189
+ return r && (r.addEventListener("mousemove", i), r.addEventListener("touchmove", v)), () => {
190
+ r && (r.removeEventListener("mousemove", i), r.removeEventListener("touchmove", v));
163
191
  };
164
- }, [D, T, y, s]), k(() => {
192
+ }, [D, W, h, c]), M(() => {
165
193
  const r = t.current, e = (i) => {
166
- d.current || (i.stopPropagation(), i.preventDefault());
194
+ f.current || (i.stopPropagation(), i.preventDefault());
167
195
  };
168
196
  return r == null || r.addEventListener("click", e), () => {
169
197
  r == null || r.removeEventListener("click", e);
170
198
  };
171
- }, []), k(() => {
199
+ }, []), M(() => {
172
200
  const r = t.current;
173
201
  return () => {
174
202
  l.current && r && (r.removeEventListener("transitionend", l.current), l.current = null);
175
203
  };
176
- }, []), k(() => {
177
- rr(p);
178
- }, [p]), k(() => {
179
- t.current && !H.current && (H.current = !0, t.current.style.transition = "none", t.current.style.transform = `translate3d(calc(-100% * ${p < E + 1 ? p : E + 1}), 0, 0)`);
180
- }, [E, p]), /* @__PURE__ */ Z(
181
- K,
204
+ }, []), M(() => {
205
+ cr(p);
206
+ }, [p]), M(() => {
207
+ t.current && !Z.current && (Z.current = !0, t.current.style.transition = "none", t.current.style.transform = `translate3d(calc(-100% * ${p < T + 1 ? p : T + 1}), 0, 0)`);
208
+ }, [T, p]), M(() => {
209
+ if (H) {
210
+ const r = setInterval(() => {
211
+ u.current || !f.current || t.current && (!h && n.current === c - 1 || document.activeElement && t.current && t.current.contains(document.activeElement) || (u.current = !0, P(0, n.current, (t.current.offsetWidth ?? 0) * 0.1, {
212
+ isAutoSwiped: !0
213
+ })));
214
+ }, J);
215
+ return () => {
216
+ clearInterval(r);
217
+ };
218
+ }
219
+ }, [H, J, h, c, P]), /* @__PURE__ */ S(
220
+ rr,
182
221
  {
183
222
  flexGrow: 1,
184
223
  role: "list",
185
224
  "aria-roledescription": "carousel",
186
225
  "aria-label": "슬라이더",
187
- ...w,
226
+ ...nr,
188
227
  inlineCSS: {
189
228
  width: "100%",
190
229
  position: "relative",
191
- ...S
230
+ ...er
192
231
  },
193
232
  children: [
194
- /* @__PURE__ */ Z(
195
- K,
233
+ /* @__PURE__ */ S(
234
+ rr,
196
235
  {
197
236
  ref: t,
198
237
  flexGrow: 1,
199
- onMouseDown: nr,
200
- onMouseUp: Q,
201
- onMouseLeave: Q,
202
- onTouchStart: cr,
203
- onTouchEnd: V,
204
- onTouchCancel: V,
238
+ onMouseDown: ar,
239
+ onMouseUp: K,
240
+ onMouseLeave: K,
241
+ onTouchStart: or,
242
+ onTouchEnd: O,
243
+ onTouchCancel: O,
205
244
  inlineCSS: {
206
245
  "& > div:first-of-type": {
207
- visibility: y ? "visible" : "hidden"
246
+ visibility: h ? "visible" : "hidden"
208
247
  },
209
248
  "& > div:last-of-type": {
210
- visibility: y ? "visible" : "hidden"
249
+ visibility: h ? "visible" : "hidden"
211
250
  }
212
251
  },
213
252
  style: {
@@ -216,30 +255,30 @@ function vr({
216
255
  cursor: "grab"
217
256
  },
218
257
  children: [
219
- er,
220
- m.map(
221
- (r, e) => ar(r, {
258
+ ur,
259
+ d.map(
260
+ (r, e) => vr(r, {
222
261
  role: "listitem",
223
- tabIndex: e === P ? 0 : -1,
224
- onKeyDown: ur(r.props.onKeyDown),
262
+ tabIndex: e === k ? 0 : -1,
263
+ onKeyDown: ir(r.props.onKeyDown),
225
264
  "aria-roledescription": "slide",
226
- "aria-hidden": e !== P,
227
- "aria-current": e === P ? "page" : void 0,
228
- "aria-label": `${s}개 중 ${e + 1}번째 슬라이드`,
265
+ "aria-hidden": e !== k,
266
+ "aria-current": e === k ? "page" : void 0,
267
+ "aria-label": `${c}개 중 ${e + 1}번째 슬라이드`,
229
268
  "aria-posinset": e + 1,
230
- "aria-setsize": s,
269
+ "aria-setsize": c,
231
270
  ...r.props
232
271
  })
233
272
  ),
234
- tr
273
+ sr
235
274
  ]
236
275
  }
237
276
  ),
238
- typeof B == "function" && B({ page: P, totalPages: s, onChange: sr })
277
+ typeof q == "function" && q({ page: k, totalPages: c, onChange: lr })
239
278
  ]
240
279
  }
241
280
  );
242
281
  }
243
282
  export {
244
- vr as default
283
+ Pr as default
245
284
  };
@@ -19,5 +19,5 @@ export interface TimePickerProps extends Omit<FlexboxProps, 'onChange'> {
19
19
  renderStartTimeLabel?: (item: TimePickerItem, isSelected: boolean) => ReactNode;
20
20
  renderEndTimeLabel?: (item: TimePickerItem, isSelected: boolean) => ReactNode;
21
21
  }
22
- declare const TimePicker: import('react').ForwardRefExoticComponent<Omit<TimePickerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
22
+ declare const TimePicker: any;
23
23
  export default TimePicker;
@@ -1,4 +1,4 @@
1
1
  import { RefObject } from 'react';
2
2
  export default function useInView(targetRef: RefObject<HTMLElement | null>, options?: IntersectionObserverInit): {
3
- isInView: boolean;
3
+ isInView: any;
4
4
  };
@@ -1,3 +1,2 @@
1
- import { useEffect } from 'react';
2
- declare const useIsomorphicLayoutEffect: typeof useEffect;
1
+ declare const useIsomorphicLayoutEffect: any;
3
2
  export default useIsomorphicLayoutEffect;
@@ -1,6 +1,7 @@
1
1
  import { SyntheticEvent } from 'react';
2
- import { ImageProps } from '../../../../shared/components/Image';
3
2
  import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
3
+ import { ImageProps } from '../../../../shared/components/Image';
4
+ import { SwiperProps } from '../../../../shared/components/Swiper';
4
5
  import { BannerProps } from '..';
5
6
  export interface BannerAccountProps extends Omit<FlexboxProps, 'title' | 'id'> {
6
7
  id: number;
@@ -9,6 +10,7 @@ export interface BannerAccountProps extends Omit<FlexboxProps, 'title' | 'id'> {
9
10
  }>;
10
11
  onClickBanner?: (url: string, bannerId: number, e: SyntheticEvent) => void;
11
12
  imageProps?: Partial<ImageProps>;
13
+ swiperProps?: Partial<SwiperProps>;
12
14
  }
13
- declare function BannerAccount({ id, banners, onClickBanner, imageProps, ...props }: BannerAccountProps): import("@emotion/react/jsx-runtime").JSX.Element;
15
+ declare function BannerAccount({ id, banners, onClickBanner, imageProps, swiperProps, ...props }: BannerAccountProps): import("@emotion/react/jsx-runtime").JSX.Element;
14
16
  export default BannerAccount;
@@ -1,16 +1,23 @@
1
1
  import { jsxs as c, jsx as i } from "react/jsx-runtime";
2
2
  import n from "@dotss/ui/Flexbox";
3
- import b from "@dotss/ui/Typography";
4
- import { useTheme as f } from "@emotion/react";
5
- import g from "../../../../shared/components/Image/Image.mjs";
3
+ import f from "@dotss/ui/Typography";
4
+ import { useTheme as g } from "@emotion/react";
5
+ import S from "../../../../shared/components/Image/Image.mjs";
6
6
  import "@dotss/ui";
7
7
  import "@dotss/ui/core/useTheme";
8
- import S from "../../../../shared/components/Swiper/Swiper.mjs";
9
- import w from "../../../../shared/components/Swiper/SwiperBlock/SwiperBlock.mjs";
10
- function I({ id: a, banners: l, onClickBanner: o, imageProps: d, ...p }) {
11
- const { palette: h } = f(), m = (e, r) => (t) => {
8
+ import w from "../../../../shared/components/Swiper/Swiper.mjs";
9
+ import y from "../../../../shared/components/Swiper/SwiperBlock/SwiperBlock.mjs";
10
+ function H({
11
+ id: a,
12
+ banners: l,
13
+ onClickBanner: o,
14
+ imageProps: d,
15
+ swiperProps: p,
16
+ ...h
17
+ }) {
18
+ const { palette: m } = g(), s = (e, r) => (t) => {
12
19
  o && typeof o == "function" && (t.stopPropagation(), t.preventDefault(), o(e, r, t));
13
- }, s = ({ page: e, totalPages: r }) => r <= 1 ? null : /* @__PURE__ */ i(
20
+ }, u = ({ page: e, totalPages: r }) => r <= 1 ? null : /* @__PURE__ */ i(
14
21
  n,
15
22
  {
16
23
  alignItems: "center",
@@ -26,10 +33,10 @@ function I({ id: a, banners: l, onClickBanner: o, imageProps: d, ...p }) {
26
33
  minWidth: 36,
27
34
  minHeight: 20,
28
35
  borderRadius: 24,
29
- backgroundColor: h.etc.dimmed02
36
+ backgroundColor: m.etc.dimmed02
30
37
  },
31
38
  children: /* @__PURE__ */ c(
32
- b,
39
+ f,
33
40
  {
34
41
  tag: "p",
35
42
  variant: "c5R",
@@ -49,28 +56,29 @@ function I({ id: a, banners: l, onClickBanner: o, imageProps: d, ...p }) {
49
56
  )
50
57
  }
51
58
  );
52
- return /* @__PURE__ */ c(n, { inlineCSS: { width: "100%" }, ...p, children: [
59
+ return /* @__PURE__ */ c(n, { inlineCSS: { width: "100%" }, ...h, children: [
53
60
  /* @__PURE__ */ i(n, { id: `tictoccroc-banner-${a}`, visuallyHidden: !0, children: "배너" }),
54
61
  /* @__PURE__ */ i(
55
- S,
62
+ w,
56
63
  {
57
- renderPagination: s,
64
+ renderPagination: u,
58
65
  loop: !0,
59
66
  inlineCSS: { borderRadius: 12, overflow: "hidden" },
60
67
  "aria-describedby": `tictoccroc-banner-${a}`,
61
- children: l.map(({ id: e, url: r, image: t }, u) => /* @__PURE__ */ i(w, { children: /* @__PURE__ */ i(
68
+ ...p,
69
+ children: l.map(({ id: e, url: r, image: t }, b) => /* @__PURE__ */ i(y, { children: /* @__PURE__ */ i(
62
70
  n,
63
71
  {
64
72
  tag: "a",
65
73
  href: r,
66
74
  draggable: !1,
67
- onClick: m(r, e),
75
+ onClick: s(r, e),
68
76
  inlineCSS: { width: "100%" },
69
77
  children: /* @__PURE__ */ i(
70
- g,
78
+ S,
71
79
  {
72
80
  src: t || "",
73
- alt: `배너 ${u + 1}`,
81
+ alt: `배너 ${b + 1}`,
74
82
  width: 328,
75
83
  height: 100,
76
84
  draggable: !1,
@@ -89,5 +97,5 @@ function I({ id: a, banners: l, onClickBanner: o, imageProps: d, ...p }) {
89
97
  ] });
90
98
  }
91
99
  export {
92
- I as default
100
+ H as default
93
101
  };
@@ -18,5 +18,5 @@ export interface AvailableScheduleSectionProps extends FlexboxProps {
18
18
  };
19
19
  };
20
20
  }
21
- declare const AvailableScheduleSection: import('react').ForwardRefExoticComponent<Omit<AvailableScheduleSectionProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
21
+ declare const AvailableScheduleSection: any;
22
22
  export default AvailableScheduleSection;
@@ -3,5 +3,5 @@ export interface CareNoteSectionProps extends FlexboxProps {
3
3
  totalCount: number;
4
4
  onClickViewAll?: () => void;
5
5
  }
6
- declare const CareNoteSection: import('react').ForwardRefExoticComponent<Omit<CareNoteSectionProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
6
+ declare const CareNoteSection: any;
7
7
  export default CareNoteSection;
@@ -3,5 +3,5 @@ export interface ParentReviewSectionProps extends FlexboxProps {
3
3
  totalCount: number;
4
4
  onClickViewAll?: () => void;
5
5
  }
6
- declare const ParentReviewSection: import('react').ForwardRefExoticComponent<Omit<ParentReviewSectionProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
6
+ declare const ParentReviewSection: any;
7
7
  export default ParentReviewSection;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dotss/tictoccroc",
3
3
  "type": "module",
4
- "version": "0.0.36",
4
+ "version": "0.1.1",
5
5
  "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
6
6
  "main": "./dist/index.mjs",
7
7
  "module": "./dist/index.mjs",
@@ -90,13 +90,9 @@
90
90
  "@storybook/addon-onboarding": "^9.0.4",
91
91
  "@storybook/react-vite": "^9.0.4",
92
92
  "@types/node": "^22.15.29",
93
- "@types/react": "^19.1.6",
94
- "@types/react-dom": "^19.1.5",
95
93
  "@vitejs/plugin-react-swc": "^3.10.0",
96
94
  "eslint-plugin-storybook": "^9.0.4",
97
95
  "glob": "^10.4.2",
98
- "react": "^19.0.0",
99
- "react-dom": "^19.0.0",
100
96
  "storybook": "^9.0.4",
101
97
  "vite-plugin-dts": "^4.5.4",
102
98
  "vitest": "^1.6.0"