@kkcompany/app-ui 0.1.24 → 0.1.26

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.
Files changed (5) hide show
  1. package/dist/index.cjs +348 -7
  2. package/dist/index.d.cts +17 -6
  3. package/dist/index.d.mts +18 -7
  4. package/dist/index.mjs +376 -36
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1,7 +1,340 @@
1
- let __emotion_react = require("@emotion/react");
2
1
  let react = require("react");
2
+ let react_jsx_runtime = require("react/jsx-runtime");
3
3
  let __emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
4
+ let __emotion_react = require("@emotion/react");
5
+
6
+ //#region src/Banner/helpers.tsx
7
+ const getStyle = (position, offset, length) => {
8
+ return { transform: `translate3d(${(length > 2 ? -200 : 0) - position * 100}%, 0, 0) translate3d(${offset || 0}px, 0, 0)` };
9
+ };
10
+ const getIndex = (position, length) => {
11
+ if (length === 0) return 0;
12
+ return (position % length + length) % length;
13
+ };
14
+ const getItems = (children) => {
15
+ const arr = react.Children.toArray(children);
16
+ const len = arr.length;
17
+ return (len > 2 ? [
18
+ arr[len - 2],
19
+ arr[len - 1],
20
+ ...arr,
21
+ arr[0],
22
+ arr[1]
23
+ ] : arr).map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
24
+ className: "banner-item",
25
+ children: item
26
+ }, `kks-banner_${index}`));
27
+ };
28
+
29
+ //#endregion
30
+ //#region src/Banner/reducer.ts
31
+ const initialState = {
32
+ position: 0,
33
+ animating: false,
34
+ dragOffset: 0
35
+ };
36
+ const reducer = (state, action) => {
37
+ switch (action.type) {
38
+ case "JUMP_TO":
39
+ if (state.animating) return state;
40
+ return {
41
+ position: action.payload.position,
42
+ animating: true,
43
+ dragOffset: 0
44
+ };
45
+ case "SETTLE": {
46
+ const { itemsLength } = action.payload;
47
+ return {
48
+ position: getIndex(state.position, itemsLength),
49
+ animating: false,
50
+ dragOffset: 0
51
+ };
52
+ }
53
+ case "DRAG": return {
54
+ ...state,
55
+ dragOffset: action.payload.dragOffset
56
+ };
57
+ default: return state;
58
+ }
59
+ };
60
+
61
+ //#endregion
62
+ //#region src/Banner/styles.ts
63
+ const iconSizeMd = "50px";
64
+ const iconSizeXl = "60px";
65
+ const iconOffset = "20%";
66
+ const dotSize = "8px";
67
+ const arrowLeftIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIG9wYWNpdHk9Ii41Ii8+ICAgICAgICA8cGF0aCBmaWxsPSIjNjY2IiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xNS40MDkgMy44NThhMS4yNSAxLjI1IDAgMCAwLTEuODE4LTEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAwIDAgMCAxLjcxNmw4LjUgOWExLjI1IDEuMjUgMCAxIDAgMS44MTgtMS43MTZMNy43MTkgMTJsNy42OS04LjE0MnoiLz4gICAgPC9nPjwvc3ZnPg==";
68
+ const arrowRightIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0yNCAwSDB2MjRoMjR6IiBvcGFjaXR5PSIuNSIvPiAgICAgICAgPHBhdGggZmlsbD0iIzY2NiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOC41OTEgMy44NThhMS4yNSAxLjI1IDAgMCAxIDEuODE4LTEuNzE2bDguNSA5YTEuMjUgMS4yNSAwIDAgMSAwIDEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAxIDEtMS44MTgtMS43MTZMMTYuMjgxIDEyIDguNTkgMy44NTh6Ii8+ICAgIDwvZz48L3N2Zz4=";
69
+ const arrowLeftIconActive = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIG9wYWNpdHk9Ii41Ii8+ICAgICAgICA8cGF0aCBmaWxsPSIjMDBBMUIzIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xNS40MDkgMy44NThhMS4yNSAxLjI1IDAgMCAwLTEuODE4LTEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAwIDAgMCAxLjcxNmw4LjUgOWExLjI1IDEuMjUgMCAxIDAgMS44MTgtMS43MTZMNy43MTkgMTJsNy42OS04LjE0MnoiLz4gICAgPC9nPjwvc3ZnPg==";
70
+ const arrowRightIconActive = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0yNCAwSDB2MjRoMjR6IiBvcGFjaXR5PSIuNSIvPiAgICAgICAgPHBhdGggZmlsbD0iIzAwQTFCMyIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOC41OTEgMy44NThhMS4yNSAxLjI1IDAgMCAxIDEuODE4LTEuNzE2bDguNSA5YTEuMjUgMS4yNSAwIDAgMSAwIDEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAxIDEtMS44MTgtMS43MTZMMTYuMjgxIDEyIDguNTkgMy44NTh6Ii8+ICAgIDwvZz48L3N2Zz4=";
71
+ const bannerStyle = {
72
+ position: "relative",
73
+ width: "100%",
74
+ whiteSpace: "nowrap",
75
+ overflow: "hidden",
76
+ userSelect: "none",
77
+ ".slider-anim": { transition: "transform 0.35s ease-out" },
78
+ ".icon-overlay": { display: "none" },
79
+ ".banner-item": {
80
+ display: "inline-block",
81
+ width: "100%"
82
+ },
83
+ ".indicator": {
84
+ position: "absolute",
85
+ left: "50%",
86
+ bottom: "5%",
87
+ transform: "translateX(-50%)",
88
+ textAlign: "center",
89
+ button: {
90
+ display: "inline-block",
91
+ margin: "0 5px",
92
+ height: dotSize,
93
+ width: dotSize,
94
+ border: 0,
95
+ padding: 0,
96
+ borderRadius: "4px",
97
+ backgroundColor: "#fff",
98
+ opacity: .5,
99
+ appearance: "none",
100
+ outline: "none",
101
+ cursor: "pointer"
102
+ },
103
+ "button.selected": {
104
+ width: "20px",
105
+ opacity: 1
106
+ }
107
+ },
108
+ "@media (min-width: 768px)": {
109
+ ".slider-mask": { padding: "0 18%" },
110
+ ".icon-overlay": {
111
+ position: "absolute",
112
+ top: 0,
113
+ bottom: 0,
114
+ display: "flex",
115
+ alignItems: "center",
116
+ width: "17%",
117
+ zIndex: 30,
118
+ "&.left": {
119
+ left: 0,
120
+ justifyContent: "flex-start",
121
+ backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5))"
122
+ },
123
+ "&.right": {
124
+ right: 0,
125
+ justifyContent: "flex-end",
126
+ backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5))"
127
+ },
128
+ "&.left .icon": {
129
+ marginLeft: iconOffset,
130
+ background: `url('${arrowLeftIcon}') no-repeat center`
131
+ },
132
+ "&.right .icon": {
133
+ marginRight: iconOffset,
134
+ background: `url('${arrowRightIcon}') no-repeat center`
135
+ },
136
+ "&.left .icon, &.right .icon": {
137
+ width: iconSizeMd,
138
+ height: iconSizeMd,
139
+ border: 0,
140
+ padding: 0,
141
+ borderRadius: "50%",
142
+ backgroundColor: "#fff",
143
+ appearance: "none",
144
+ outline: "none",
145
+ cursor: "pointer"
146
+ },
147
+ "&.left .icon:hover, &.left .icon:focus": { backgroundImage: `url('${arrowLeftIconActive}')` },
148
+ "&.right .icon:hover, &.right .icon:focus": { backgroundImage: `url('${arrowRightIconActive}')` }
149
+ },
150
+ ".banner-item": {
151
+ padding: "0 4px",
152
+ boxSizing: "border-box"
153
+ },
154
+ ".indicator button": { "&:hover, &:focus": { opacity: 1 } }
155
+ },
156
+ "@media (min-width: 1600px)": { ".icon-overlay": { "&.left .icon, &.right .icon": {
157
+ width: iconSizeXl,
158
+ height: iconSizeXl
159
+ } } }
160
+ };
161
+
162
+ //#endregion
163
+ //#region src/Banner/useAutoplay.ts
164
+ const useAutoplay = ({ enabled, interval, onTick }) => {
165
+ const onTickRef = (0, react.useRef)(onTick);
166
+ const [paused, setPaused] = (0, react.useState)(false);
167
+ const [resetCounter, setResetCounter] = (0, react.useState)(0);
168
+ (0, react.useEffect)(() => {
169
+ onTickRef.current = onTick;
170
+ }, [onTick]);
171
+ (0, react.useEffect)(() => {
172
+ if (!enabled || paused) return void 0;
173
+ const id = setInterval(() => onTickRef.current(), interval);
174
+ return () => clearInterval(id);
175
+ }, [
176
+ enabled,
177
+ interval,
178
+ paused,
179
+ resetCounter
180
+ ]);
181
+ return {
182
+ pause: (0, react.useCallback)(() => setPaused(true), []),
183
+ resume: (0, react.useCallback)(() => setPaused(false), []),
184
+ reset: (0, react.useCallback)(() => {
185
+ setPaused(false);
186
+ setResetCounter((n) => n + 1);
187
+ }, [])
188
+ };
189
+ };
190
+
191
+ //#endregion
192
+ //#region src/Banner/index.tsx
193
+ /** @jsxImportSource @emotion/react */
194
+ const getEventPageX = (evt) => {
195
+ const { pageX, targetTouches } = evt;
196
+ return pageX !== void 0 ? pageX : targetTouches[0].pageX;
197
+ };
198
+ const BannerRender = ({ children, className = "", autoplay = false, autoplayInterval = 5e3, pauseOnHover = false }, ref) => {
199
+ const items = (0, react.useMemo)(() => getItems(children), [children]);
200
+ const itemsLength = (0, react.useMemo)(() => react.Children.count(children), [children]);
201
+ const [state, dispatch] = (0, react.useReducer)(reducer, initialState);
202
+ const rootRef = (0, react.useRef)(null);
203
+ const dragRef = (0, react.useRef)({
204
+ dragging: false,
205
+ dragXFrom: -1,
206
+ dragXTo: -1
207
+ });
208
+ (0, react.useImperativeHandle)(ref, () => rootRef.current, []);
209
+ const indicator = getIndex(state.position, itemsLength);
210
+ const currentPosition = state.animating ? state.position : indicator;
211
+ const animStyle = getStyle(currentPosition, state.dragOffset, itemsLength);
212
+ const enabled = autoplay && itemsLength >= 2;
213
+ const hasPrev = itemsLength > 2 || currentPosition - 1 >= 0;
214
+ const hasNext = itemsLength > 2 || currentPosition + 1 < itemsLength;
215
+ const jumpTo = (0, react.useCallback)((position) => dispatch({
216
+ type: "JUMP_TO",
217
+ payload: {
218
+ position,
219
+ itemsLength
220
+ }
221
+ }), [itemsLength]);
222
+ const { pause, resume, reset } = useAutoplay({
223
+ enabled,
224
+ interval: autoplayInterval,
225
+ onTick: (0, react.useCallback)(() => {
226
+ jumpTo(hasNext ? currentPosition + 1 : currentPosition - 1);
227
+ }, [
228
+ hasNext,
229
+ currentPosition,
230
+ jumpTo
231
+ ])
232
+ });
233
+ const handleArrowBtnClick = (nextPos) => {
234
+ pause();
235
+ jumpTo(nextPos);
236
+ };
237
+ const handleIndicatorClick = (targetPos) => () => {
238
+ if (targetPos !== currentPosition) {
239
+ pause();
240
+ jumpTo(targetPos);
241
+ return;
242
+ }
243
+ reset();
244
+ };
245
+ const handleTouchStart = (evt) => {
246
+ pause();
247
+ const pageX = getEventPageX(evt);
248
+ dragRef.current = {
249
+ dragging: true,
250
+ dragXFrom: pageX,
251
+ dragXTo: pageX
252
+ };
253
+ };
254
+ const handleTouchMove = (evt) => {
255
+ if (!dragRef.current.dragging) return;
256
+ const pageX = getEventPageX(evt);
257
+ dragRef.current.dragXTo = pageX;
258
+ dispatch({
259
+ type: "DRAG",
260
+ payload: { dragOffset: pageX - dragRef.current.dragXFrom }
261
+ });
262
+ };
263
+ const handleTouchEnd = (evt) => {
264
+ const { dragXFrom, dragXTo } = dragRef.current;
265
+ const triggerWidth = evt.currentTarget.clientWidth / 4;
266
+ const movingVector = dragXTo - dragXFrom;
267
+ const movingWidth = Math.abs(movingVector);
268
+ if (movingVector > 0 && movingWidth > triggerWidth && hasPrev) jumpTo(currentPosition - 1);
269
+ else if (movingVector < 0 && movingWidth > triggerWidth && hasNext) jumpTo(currentPosition + 1);
270
+ else if (movingVector !== 0) jumpTo(currentPosition);
271
+ else resume();
272
+ dragRef.current = {
273
+ dragging: false,
274
+ dragXFrom: -1,
275
+ dragXTo: -1
276
+ };
277
+ };
278
+ const handleTransitionEnd = (evt) => {
279
+ if (evt.target !== evt.currentTarget || evt.propertyName !== "transform") return;
280
+ dispatch({
281
+ type: "SETTLE",
282
+ payload: { itemsLength }
283
+ });
284
+ resume();
285
+ };
286
+ if (itemsLength === 0) return null;
287
+ return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
288
+ ref: rootRef,
289
+ css: bannerStyle,
290
+ className: `kks-banner ${className}`,
291
+ onMouseEnter: enabled && pauseOnHover ? pause : void 0,
292
+ onMouseLeave: enabled && pauseOnHover ? resume : void 0,
293
+ onTouchStart: handleTouchStart,
294
+ onTouchMove: handleTouchMove,
295
+ onTouchEnd: handleTouchEnd,
296
+ children: [
297
+ hasPrev && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
298
+ className: "left icon-overlay",
299
+ children: /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("button", {
300
+ type: "button",
301
+ className: "icon",
302
+ onClick: () => handleArrowBtnClick(currentPosition - 1)
303
+ })
304
+ }),
305
+ /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
306
+ className: "slider-mask",
307
+ children: /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
308
+ className: state.animating ? "slider-anim" : "",
309
+ style: animStyle,
310
+ onTransitionEnd: handleTransitionEnd,
311
+ children: items
312
+ })
313
+ }),
314
+ hasNext && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
315
+ className: "right icon-overlay",
316
+ children: /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("button", {
317
+ type: "button",
318
+ className: "icon",
319
+ onClick: () => handleArrowBtnClick(currentPosition + 1)
320
+ })
321
+ }),
322
+ /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
323
+ className: "indicator",
324
+ children: Array.from({ length: itemsLength }, (_, i) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("button", {
325
+ type: "button",
326
+ className: i === indicator ? "selected" : "",
327
+ onClick: handleIndicatorClick(i)
328
+ }, `kks-banner_indicator_${i}`))
329
+ })
330
+ ]
331
+ });
332
+ };
333
+ const Banner = (0, react.forwardRef)(BannerRender);
334
+ Banner.displayName = "Banner";
335
+ var Banner_default = Banner;
4
336
 
337
+ //#endregion
5
338
  //#region src/Dropdown.tsx
6
339
  /** @jsxImportSource @emotion/react */
7
340
  const dropdownStyle = __emotion_react.css`
@@ -236,12 +569,19 @@ const Menu = ({ menuTitle, items, activeIndex = -1, onClickItem, onClickClose })
236
569
  children: items.map((item, index) => {
237
570
  const { id, label, route, value } = item;
238
571
  const isActive = activeIndex === index;
239
- return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("a", {
240
- href: route || "#",
241
- onClick: onClickItem(item, index),
242
- "data-value": value,
243
- children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("span", { children: label || value }), isActive && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("span", {})]
244
- }) }, `item_${id || value || index}`);
572
+ return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("li", {
573
+ className: isActive ? "kks-dropdown__menu-item--active" : "",
574
+ children: /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("a", {
575
+ className: "item-row kks-dropdown__menu-link",
576
+ href: route || "#",
577
+ onClick: onClickItem(item, index),
578
+ "data-value": value,
579
+ children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("span", {
580
+ className: "font text-truncate",
581
+ children: label || value
582
+ }), isActive && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("span", { className: "icon kks-dropdown__check-icon" })]
583
+ })
584
+ }, `item_${id || value || index}`);
245
585
  })
246
586
  })]
247
587
  })
@@ -719,6 +1059,7 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
719
1059
  var VideoItem_default = VideoItem;
720
1060
 
721
1061
  //#endregion
1062
+ exports.Banner = Banner_default;
722
1063
  exports.Dropdown = Dropdown_default;
723
1064
  exports.HiddenToggle = HiddenToggle_default;
724
1065
  exports.Icon = Icon_default;
package/dist/index.d.cts CHANGED
@@ -1,8 +1,19 @@
1
+ import * as react0 from "react";
1
2
  import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
2
- import * as _emotion_react_jsx_runtime1 from "@emotion/react/jsx-runtime";
3
+ import * as _emotion_react_jsx_runtime0 from "@emotion/react/jsx-runtime";
3
4
  import { CSSObject } from "@emotion/react";
4
5
  import Link from "next/link";
5
6
 
7
+ //#region src/Banner/index.d.ts
8
+ type BannerProps = {
9
+ children: ReactNode;
10
+ className?: string;
11
+ autoplay?: boolean;
12
+ autoplayInterval?: number;
13
+ pauseOnHover?: boolean;
14
+ };
15
+ declare const Banner: react0.ForwardRefExoticComponent<BannerProps & react0.RefAttributes<HTMLDivElement>>;
16
+ //#endregion
6
17
  //#region src/Dropdown.d.ts
7
18
  type DropdownOption = {
8
19
  id?: string | number;
@@ -54,7 +65,7 @@ declare const HiddenToggle: ({
54
65
  defaultEnabled?: boolean;
55
66
  children: any;
56
67
  onChange: any;
57
- }) => _emotion_react_jsx_runtime1.JSX.Element;
68
+ }) => _emotion_react_jsx_runtime0.JSX.Element;
58
69
  //#endregion
59
70
  //#region src/Icon.d.ts
60
71
  declare const Icon: ({
@@ -63,7 +74,7 @@ declare const Icon: ({
63
74
  }: {
64
75
  style?: {};
65
76
  src: any;
66
- }) => _emotion_react_jsx_runtime1.JSX.Element;
77
+ }) => _emotion_react_jsx_runtime0.JSX.Element;
67
78
  //#endregion
68
79
  //#region src/SeeMore.d.ts
69
80
  declare const defaultMessages: {
@@ -79,7 +90,7 @@ declare const SeeMore: ({
79
90
  style?: CSSObject;
80
91
  messages?: typeof defaultMessages;
81
92
  children?: ReactNode;
82
- }) => _emotion_react_jsx_runtime1.JSX.Element;
93
+ }) => _emotion_react_jsx_runtime0.JSX.Element;
83
94
  //#endregion
84
95
  //#region src/VideoItem.d.ts
85
96
  type VideoDetail = {
@@ -143,6 +154,6 @@ declare const VideoThumbnail: ({
143
154
  Image?: ElementType;
144
155
  };
145
156
  onClick?: MouseEventHandler<HTMLAnchorElement>;
146
- }) => _emotion_react_jsx_runtime1.JSX.Element;
157
+ }) => _emotion_react_jsx_runtime0.JSX.Element;
147
158
  //#endregion
148
- export { Dropdown, HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };
159
+ export { Banner, Dropdown, HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };
package/dist/index.d.mts CHANGED
@@ -1,8 +1,19 @@
1
- import { CSSObject } from "@emotion/react";
1
+ import * as react0 from "react";
2
2
  import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
3
- import * as _emotion_react_jsx_runtime0 from "@emotion/react/jsx-runtime";
3
+ import * as _emotion_react_jsx_runtime2 from "@emotion/react/jsx-runtime";
4
+ import { CSSObject } from "@emotion/react";
4
5
  import Link from "next/link";
5
6
 
7
+ //#region src/Banner/index.d.ts
8
+ type BannerProps = {
9
+ children: ReactNode;
10
+ className?: string;
11
+ autoplay?: boolean;
12
+ autoplayInterval?: number;
13
+ pauseOnHover?: boolean;
14
+ };
15
+ declare const Banner: react0.ForwardRefExoticComponent<BannerProps & react0.RefAttributes<HTMLDivElement>>;
16
+ //#endregion
6
17
  //#region src/Dropdown.d.ts
7
18
  type DropdownOption = {
8
19
  id?: string | number;
@@ -54,7 +65,7 @@ declare const HiddenToggle: ({
54
65
  defaultEnabled?: boolean;
55
66
  children: any;
56
67
  onChange: any;
57
- }) => _emotion_react_jsx_runtime0.JSX.Element;
68
+ }) => _emotion_react_jsx_runtime2.JSX.Element;
58
69
  //#endregion
59
70
  //#region src/Icon.d.ts
60
71
  declare const Icon: ({
@@ -63,7 +74,7 @@ declare const Icon: ({
63
74
  }: {
64
75
  style?: {};
65
76
  src: any;
66
- }) => _emotion_react_jsx_runtime0.JSX.Element;
77
+ }) => _emotion_react_jsx_runtime2.JSX.Element;
67
78
  //#endregion
68
79
  //#region src/SeeMore.d.ts
69
80
  declare const defaultMessages: {
@@ -79,7 +90,7 @@ declare const SeeMore: ({
79
90
  style?: CSSObject;
80
91
  messages?: typeof defaultMessages;
81
92
  children?: ReactNode;
82
- }) => _emotion_react_jsx_runtime0.JSX.Element;
93
+ }) => _emotion_react_jsx_runtime2.JSX.Element;
83
94
  //#endregion
84
95
  //#region src/VideoItem.d.ts
85
96
  type VideoDetail = {
@@ -143,6 +154,6 @@ declare const VideoThumbnail: ({
143
154
  Image?: ElementType;
144
155
  };
145
156
  onClick?: MouseEventHandler<HTMLAnchorElement>;
146
- }) => _emotion_react_jsx_runtime0.JSX.Element;
157
+ }) => _emotion_react_jsx_runtime2.JSX.Element;
147
158
  //#endregion
148
- export { Dropdown, HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };
159
+ export { Banner, Dropdown, HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };
package/dist/index.mjs CHANGED
@@ -1,7 +1,340 @@
1
+ import { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState } from "react";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import { jsx as jsx$1, jsxs } from "@emotion/react/jsx-runtime";
1
4
  import { css } from "@emotion/react";
2
- import { useEffect, useRef, useState } from "react";
3
- import { jsx, jsxs } from "@emotion/react/jsx-runtime";
4
5
 
6
+ //#region src/Banner/helpers.tsx
7
+ const getStyle = (position, offset, length) => {
8
+ return { transform: `translate3d(${(length > 2 ? -200 : 0) - position * 100}%, 0, 0) translate3d(${offset || 0}px, 0, 0)` };
9
+ };
10
+ const getIndex = (position, length) => {
11
+ if (length === 0) return 0;
12
+ return (position % length + length) % length;
13
+ };
14
+ const getItems = (children) => {
15
+ const arr = Children.toArray(children);
16
+ const len = arr.length;
17
+ return (len > 2 ? [
18
+ arr[len - 2],
19
+ arr[len - 1],
20
+ ...arr,
21
+ arr[0],
22
+ arr[1]
23
+ ] : arr).map((item, index) => /* @__PURE__ */ jsx("div", {
24
+ className: "banner-item",
25
+ children: item
26
+ }, `kks-banner_${index}`));
27
+ };
28
+
29
+ //#endregion
30
+ //#region src/Banner/reducer.ts
31
+ const initialState = {
32
+ position: 0,
33
+ animating: false,
34
+ dragOffset: 0
35
+ };
36
+ const reducer = (state, action) => {
37
+ switch (action.type) {
38
+ case "JUMP_TO":
39
+ if (state.animating) return state;
40
+ return {
41
+ position: action.payload.position,
42
+ animating: true,
43
+ dragOffset: 0
44
+ };
45
+ case "SETTLE": {
46
+ const { itemsLength } = action.payload;
47
+ return {
48
+ position: getIndex(state.position, itemsLength),
49
+ animating: false,
50
+ dragOffset: 0
51
+ };
52
+ }
53
+ case "DRAG": return {
54
+ ...state,
55
+ dragOffset: action.payload.dragOffset
56
+ };
57
+ default: return state;
58
+ }
59
+ };
60
+
61
+ //#endregion
62
+ //#region src/Banner/styles.ts
63
+ const iconSizeMd = "50px";
64
+ const iconSizeXl = "60px";
65
+ const iconOffset = "20%";
66
+ const dotSize = "8px";
67
+ const arrowLeftIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIG9wYWNpdHk9Ii41Ii8+ICAgICAgICA8cGF0aCBmaWxsPSIjNjY2IiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xNS40MDkgMy44NThhMS4yNSAxLjI1IDAgMCAwLTEuODE4LTEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAwIDAgMCAxLjcxNmw4LjUgOWExLjI1IDEuMjUgMCAxIDAgMS44MTgtMS43MTZMNy43MTkgMTJsNy42OS04LjE0MnoiLz4gICAgPC9nPjwvc3ZnPg==";
68
+ const arrowRightIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0yNCAwSDB2MjRoMjR6IiBvcGFjaXR5PSIuNSIvPiAgICAgICAgPHBhdGggZmlsbD0iIzY2NiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOC41OTEgMy44NThhMS4yNSAxLjI1IDAgMCAxIDEuODE4LTEuNzE2bDguNSA5YTEuMjUgMS4yNSAwIDAgMSAwIDEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAxIDEtMS44MTgtMS43MTZMMTYuMjgxIDEyIDguNTkgMy44NTh6Ii8+ICAgIDwvZz48L3N2Zz4=";
69
+ const arrowLeftIconActive = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIG9wYWNpdHk9Ii41Ii8+ICAgICAgICA8cGF0aCBmaWxsPSIjMDBBMUIzIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xNS40MDkgMy44NThhMS4yNSAxLjI1IDAgMCAwLTEuODE4LTEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAwIDAgMCAxLjcxNmw4LjUgOWExLjI1IDEuMjUgMCAxIDAgMS44MTgtMS43MTZMNy43MTkgMTJsNy42OS04LjE0MnoiLz4gICAgPC9nPjwvc3ZnPg==";
70
+ const arrowRightIconActive = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0yNCAwSDB2MjRoMjR6IiBvcGFjaXR5PSIuNSIvPiAgICAgICAgPHBhdGggZmlsbD0iIzAwQTFCMyIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOC41OTEgMy44NThhMS4yNSAxLjI1IDAgMCAxIDEuODE4LTEuNzE2bDguNSA5YTEuMjUgMS4yNSAwIDAgMSAwIDEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAxIDEtMS44MTgtMS43MTZMMTYuMjgxIDEyIDguNTkgMy44NTh6Ii8+ICAgIDwvZz48L3N2Zz4=";
71
+ const bannerStyle = {
72
+ position: "relative",
73
+ width: "100%",
74
+ whiteSpace: "nowrap",
75
+ overflow: "hidden",
76
+ userSelect: "none",
77
+ ".slider-anim": { transition: "transform 0.35s ease-out" },
78
+ ".icon-overlay": { display: "none" },
79
+ ".banner-item": {
80
+ display: "inline-block",
81
+ width: "100%"
82
+ },
83
+ ".indicator": {
84
+ position: "absolute",
85
+ left: "50%",
86
+ bottom: "5%",
87
+ transform: "translateX(-50%)",
88
+ textAlign: "center",
89
+ button: {
90
+ display: "inline-block",
91
+ margin: "0 5px",
92
+ height: dotSize,
93
+ width: dotSize,
94
+ border: 0,
95
+ padding: 0,
96
+ borderRadius: "4px",
97
+ backgroundColor: "#fff",
98
+ opacity: .5,
99
+ appearance: "none",
100
+ outline: "none",
101
+ cursor: "pointer"
102
+ },
103
+ "button.selected": {
104
+ width: "20px",
105
+ opacity: 1
106
+ }
107
+ },
108
+ "@media (min-width: 768px)": {
109
+ ".slider-mask": { padding: "0 18%" },
110
+ ".icon-overlay": {
111
+ position: "absolute",
112
+ top: 0,
113
+ bottom: 0,
114
+ display: "flex",
115
+ alignItems: "center",
116
+ width: "17%",
117
+ zIndex: 30,
118
+ "&.left": {
119
+ left: 0,
120
+ justifyContent: "flex-start",
121
+ backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5))"
122
+ },
123
+ "&.right": {
124
+ right: 0,
125
+ justifyContent: "flex-end",
126
+ backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5))"
127
+ },
128
+ "&.left .icon": {
129
+ marginLeft: iconOffset,
130
+ background: `url('${arrowLeftIcon}') no-repeat center`
131
+ },
132
+ "&.right .icon": {
133
+ marginRight: iconOffset,
134
+ background: `url('${arrowRightIcon}') no-repeat center`
135
+ },
136
+ "&.left .icon, &.right .icon": {
137
+ width: iconSizeMd,
138
+ height: iconSizeMd,
139
+ border: 0,
140
+ padding: 0,
141
+ borderRadius: "50%",
142
+ backgroundColor: "#fff",
143
+ appearance: "none",
144
+ outline: "none",
145
+ cursor: "pointer"
146
+ },
147
+ "&.left .icon:hover, &.left .icon:focus": { backgroundImage: `url('${arrowLeftIconActive}')` },
148
+ "&.right .icon:hover, &.right .icon:focus": { backgroundImage: `url('${arrowRightIconActive}')` }
149
+ },
150
+ ".banner-item": {
151
+ padding: "0 4px",
152
+ boxSizing: "border-box"
153
+ },
154
+ ".indicator button": { "&:hover, &:focus": { opacity: 1 } }
155
+ },
156
+ "@media (min-width: 1600px)": { ".icon-overlay": { "&.left .icon, &.right .icon": {
157
+ width: iconSizeXl,
158
+ height: iconSizeXl
159
+ } } }
160
+ };
161
+
162
+ //#endregion
163
+ //#region src/Banner/useAutoplay.ts
164
+ const useAutoplay = ({ enabled, interval, onTick }) => {
165
+ const onTickRef = useRef(onTick);
166
+ const [paused, setPaused] = useState(false);
167
+ const [resetCounter, setResetCounter] = useState(0);
168
+ useEffect(() => {
169
+ onTickRef.current = onTick;
170
+ }, [onTick]);
171
+ useEffect(() => {
172
+ if (!enabled || paused) return void 0;
173
+ const id = setInterval(() => onTickRef.current(), interval);
174
+ return () => clearInterval(id);
175
+ }, [
176
+ enabled,
177
+ interval,
178
+ paused,
179
+ resetCounter
180
+ ]);
181
+ return {
182
+ pause: useCallback(() => setPaused(true), []),
183
+ resume: useCallback(() => setPaused(false), []),
184
+ reset: useCallback(() => {
185
+ setPaused(false);
186
+ setResetCounter((n) => n + 1);
187
+ }, [])
188
+ };
189
+ };
190
+
191
+ //#endregion
192
+ //#region src/Banner/index.tsx
193
+ /** @jsxImportSource @emotion/react */
194
+ const getEventPageX = (evt) => {
195
+ const { pageX, targetTouches } = evt;
196
+ return pageX !== void 0 ? pageX : targetTouches[0].pageX;
197
+ };
198
+ const BannerRender = ({ children, className = "", autoplay = false, autoplayInterval = 5e3, pauseOnHover = false }, ref) => {
199
+ const items = useMemo(() => getItems(children), [children]);
200
+ const itemsLength = useMemo(() => Children.count(children), [children]);
201
+ const [state, dispatch] = useReducer(reducer, initialState);
202
+ const rootRef = useRef(null);
203
+ const dragRef = useRef({
204
+ dragging: false,
205
+ dragXFrom: -1,
206
+ dragXTo: -1
207
+ });
208
+ useImperativeHandle(ref, () => rootRef.current, []);
209
+ const indicator = getIndex(state.position, itemsLength);
210
+ const currentPosition = state.animating ? state.position : indicator;
211
+ const animStyle = getStyle(currentPosition, state.dragOffset, itemsLength);
212
+ const enabled = autoplay && itemsLength >= 2;
213
+ const hasPrev = itemsLength > 2 || currentPosition - 1 >= 0;
214
+ const hasNext = itemsLength > 2 || currentPosition + 1 < itemsLength;
215
+ const jumpTo = useCallback((position) => dispatch({
216
+ type: "JUMP_TO",
217
+ payload: {
218
+ position,
219
+ itemsLength
220
+ }
221
+ }), [itemsLength]);
222
+ const { pause, resume, reset } = useAutoplay({
223
+ enabled,
224
+ interval: autoplayInterval,
225
+ onTick: useCallback(() => {
226
+ jumpTo(hasNext ? currentPosition + 1 : currentPosition - 1);
227
+ }, [
228
+ hasNext,
229
+ currentPosition,
230
+ jumpTo
231
+ ])
232
+ });
233
+ const handleArrowBtnClick = (nextPos) => {
234
+ pause();
235
+ jumpTo(nextPos);
236
+ };
237
+ const handleIndicatorClick = (targetPos) => () => {
238
+ if (targetPos !== currentPosition) {
239
+ pause();
240
+ jumpTo(targetPos);
241
+ return;
242
+ }
243
+ reset();
244
+ };
245
+ const handleTouchStart = (evt) => {
246
+ pause();
247
+ const pageX = getEventPageX(evt);
248
+ dragRef.current = {
249
+ dragging: true,
250
+ dragXFrom: pageX,
251
+ dragXTo: pageX
252
+ };
253
+ };
254
+ const handleTouchMove = (evt) => {
255
+ if (!dragRef.current.dragging) return;
256
+ const pageX = getEventPageX(evt);
257
+ dragRef.current.dragXTo = pageX;
258
+ dispatch({
259
+ type: "DRAG",
260
+ payload: { dragOffset: pageX - dragRef.current.dragXFrom }
261
+ });
262
+ };
263
+ const handleTouchEnd = (evt) => {
264
+ const { dragXFrom, dragXTo } = dragRef.current;
265
+ const triggerWidth = evt.currentTarget.clientWidth / 4;
266
+ const movingVector = dragXTo - dragXFrom;
267
+ const movingWidth = Math.abs(movingVector);
268
+ if (movingVector > 0 && movingWidth > triggerWidth && hasPrev) jumpTo(currentPosition - 1);
269
+ else if (movingVector < 0 && movingWidth > triggerWidth && hasNext) jumpTo(currentPosition + 1);
270
+ else if (movingVector !== 0) jumpTo(currentPosition);
271
+ else resume();
272
+ dragRef.current = {
273
+ dragging: false,
274
+ dragXFrom: -1,
275
+ dragXTo: -1
276
+ };
277
+ };
278
+ const handleTransitionEnd = (evt) => {
279
+ if (evt.target !== evt.currentTarget || evt.propertyName !== "transform") return;
280
+ dispatch({
281
+ type: "SETTLE",
282
+ payload: { itemsLength }
283
+ });
284
+ resume();
285
+ };
286
+ if (itemsLength === 0) return null;
287
+ return /* @__PURE__ */ jsxs("div", {
288
+ ref: rootRef,
289
+ css: bannerStyle,
290
+ className: `kks-banner ${className}`,
291
+ onMouseEnter: enabled && pauseOnHover ? pause : void 0,
292
+ onMouseLeave: enabled && pauseOnHover ? resume : void 0,
293
+ onTouchStart: handleTouchStart,
294
+ onTouchMove: handleTouchMove,
295
+ onTouchEnd: handleTouchEnd,
296
+ children: [
297
+ hasPrev && /* @__PURE__ */ jsx$1("div", {
298
+ className: "left icon-overlay",
299
+ children: /* @__PURE__ */ jsx$1("button", {
300
+ type: "button",
301
+ className: "icon",
302
+ onClick: () => handleArrowBtnClick(currentPosition - 1)
303
+ })
304
+ }),
305
+ /* @__PURE__ */ jsx$1("div", {
306
+ className: "slider-mask",
307
+ children: /* @__PURE__ */ jsx$1("div", {
308
+ className: state.animating ? "slider-anim" : "",
309
+ style: animStyle,
310
+ onTransitionEnd: handleTransitionEnd,
311
+ children: items
312
+ })
313
+ }),
314
+ hasNext && /* @__PURE__ */ jsx$1("div", {
315
+ className: "right icon-overlay",
316
+ children: /* @__PURE__ */ jsx$1("button", {
317
+ type: "button",
318
+ className: "icon",
319
+ onClick: () => handleArrowBtnClick(currentPosition + 1)
320
+ })
321
+ }),
322
+ /* @__PURE__ */ jsx$1("div", {
323
+ className: "indicator",
324
+ children: Array.from({ length: itemsLength }, (_, i) => /* @__PURE__ */ jsx$1("button", {
325
+ type: "button",
326
+ className: i === indicator ? "selected" : "",
327
+ onClick: handleIndicatorClick(i)
328
+ }, `kks-banner_indicator_${i}`))
329
+ })
330
+ ]
331
+ });
332
+ };
333
+ const Banner = forwardRef(BannerRender);
334
+ Banner.displayName = "Banner";
335
+ var Banner_default = Banner;
336
+
337
+ //#endregion
5
338
  //#region src/Dropdown.tsx
6
339
  /** @jsxImportSource @emotion/react */
7
340
  const dropdownStyle = css`
@@ -196,10 +529,10 @@ const Button = ({ showMenu, label, placeholder, disabled, onClick }) => /* @__PU
196
529
  "aria-haspopup": "true",
197
530
  "aria-expanded": showMenu,
198
531
  disabled,
199
- children: [/* @__PURE__ */ jsx("span", {
532
+ children: [/* @__PURE__ */ jsx$1("span", {
200
533
  className: `font text-truncate${!label ? " kks-dropdown__label--grey-off" : ""}`,
201
534
  children: !label ? placeholder : label
202
- }), /* @__PURE__ */ jsx("span", { className: "icon kks-dropdown__arrow-icon" })]
535
+ }), /* @__PURE__ */ jsx$1("span", { className: "icon kks-dropdown__arrow-icon" })]
203
536
  });
204
537
  const Menu = ({ menuTitle, items, activeIndex = -1, onClickItem, onClickClose }) => {
205
538
  const menuRef = useRef(null);
@@ -209,7 +542,7 @@ const Menu = ({ menuTitle, items, activeIndex = -1, onClickItem, onClickClose })
209
542
  const handleOverlayClick = (e) => {
210
543
  if (e.target.id === "kks-menu-overlay") onClickClose();
211
544
  };
212
- return /* @__PURE__ */ jsx("div", {
545
+ return /* @__PURE__ */ jsx$1("div", {
213
546
  id: "kks-menu-overlay",
214
547
  className: "kks-dropdown__menu-overlay",
215
548
  onClick: handleOverlayClick,
@@ -220,28 +553,35 @@ const Menu = ({ menuTitle, items, activeIndex = -1, onClickItem, onClickClose })
220
553
  className: "kks-dropdown__menu",
221
554
  children: [/* @__PURE__ */ jsxs("div", {
222
555
  className: "item-row kks-dropdown__menu-header",
223
- children: [menuTitle !== "" && /* @__PURE__ */ jsx("div", {
556
+ children: [menuTitle !== "" && /* @__PURE__ */ jsx$1("div", {
224
557
  className: "font text-truncate kks-dropdown__menu-title",
225
558
  children: menuTitle
226
- }), /* @__PURE__ */ jsx("div", {
559
+ }), /* @__PURE__ */ jsx$1("div", {
227
560
  className: "kks-dropdown__close-btn",
228
561
  onClick: onClickClose,
229
562
  onKeyPress: onClickClose,
230
563
  role: "button",
231
564
  tabIndex: 0,
232
- children: /* @__PURE__ */ jsx("span", { className: "icon kks-dropdown__close-icon" })
565
+ children: /* @__PURE__ */ jsx$1("span", { className: "icon kks-dropdown__close-icon" })
233
566
  })]
234
- }), /* @__PURE__ */ jsx("ul", {
567
+ }), /* @__PURE__ */ jsx$1("ul", {
235
568
  className: "kks-dropdown__menu-body",
236
569
  children: items.map((item, index) => {
237
570
  const { id, label, route, value } = item;
238
571
  const isActive = activeIndex === index;
239
- return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
240
- href: route || "#",
241
- onClick: onClickItem(item, index),
242
- "data-value": value,
243
- children: [/* @__PURE__ */ jsx("span", { children: label || value }), isActive && /* @__PURE__ */ jsx("span", {})]
244
- }) }, `item_${id || value || index}`);
572
+ return /* @__PURE__ */ jsx$1("li", {
573
+ className: isActive ? "kks-dropdown__menu-item--active" : "",
574
+ children: /* @__PURE__ */ jsxs("a", {
575
+ className: "item-row kks-dropdown__menu-link",
576
+ href: route || "#",
577
+ onClick: onClickItem(item, index),
578
+ "data-value": value,
579
+ children: [/* @__PURE__ */ jsx$1("span", {
580
+ className: "font text-truncate",
581
+ children: label || value
582
+ }), isActive && /* @__PURE__ */ jsx$1("span", { className: "icon kks-dropdown__check-icon" })]
583
+ })
584
+ }, `item_${id || value || index}`);
245
585
  })
246
586
  })]
247
587
  })
@@ -280,13 +620,13 @@ const Dropdown = ({ className, options = [], value = null, activeIndex = -1, pla
280
620
  css: dropdownStyle,
281
621
  className: `kks-dropdown ${className || ""}`,
282
622
  ref: dropdownRef,
283
- children: [/* @__PURE__ */ jsx(Button, {
623
+ children: [/* @__PURE__ */ jsx$1(Button, {
284
624
  showMenu,
285
625
  label: selectedLabel,
286
626
  placeholder,
287
627
  disabled,
288
628
  onClick: toggleMenu
289
- }), showMenu && /* @__PURE__ */ jsx(Menu, {
629
+ }), showMenu && /* @__PURE__ */ jsx$1(Menu, {
290
630
  menuTitle,
291
631
  items: options,
292
632
  activeIndex: selectedIndex,
@@ -332,11 +672,11 @@ const HiddenToggle = ({ defaultEnabled = false, children, onChange, ...rest }) =
332
672
  style: { opacity: tapCount / 7 },
333
673
  children: [7 - tapCount, " more tap(s) for feature toggle"]
334
674
  }),
335
- tapCount >= 7 && /* @__PURE__ */ jsx("span", {
675
+ tapCount >= 7 && /* @__PURE__ */ jsx$1("span", {
336
676
  css: statusStyle,
337
677
  children: "feature toggle"
338
678
  }),
339
- tapCount >= 7 && /* @__PURE__ */ jsx("button", {
679
+ tapCount >= 7 && /* @__PURE__ */ jsx$1("button", {
340
680
  type: "button",
341
681
  onClick: onOptOut,
342
682
  children: "exit"
@@ -360,7 +700,7 @@ const iconStyle = {
360
700
  pointerEvents: "none",
361
701
  touchAction: "none"
362
702
  };
363
- const Icon = ({ style = {}, src }) => /* @__PURE__ */ jsx("span", { css: [
703
+ const Icon = ({ style = {}, src }) => /* @__PURE__ */ jsx$1("span", { css: [
364
704
  iconStyle,
365
705
  { maskImage: `url(data:image/svg+xml;base64,${src})` },
366
706
  style
@@ -471,12 +811,12 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
471
811
  css: [expandedHeight && { "--see-more-max-height": `${expandedHeight}px` }, style],
472
812
  ref: containeRef,
473
813
  onTransitionEnd: () => setStatus((current) => current === "collapsing" ? "collapsed" : current),
474
- children: [children, /* @__PURE__ */ jsx("div", { css: maskStyle })]
814
+ children: [children, /* @__PURE__ */ jsx$1("div", { css: maskStyle })]
475
815
  }), /* @__PURE__ */ jsxs("button", {
476
816
  type: "button",
477
817
  disabled: status === "no-expand",
478
818
  onClick: toggle,
479
- children: [status === "collapsed" ? messages.seeMore : messages.seeLess, /* @__PURE__ */ jsx(Icon_default, { src: see_more_default })]
819
+ children: [status === "collapsed" ? messages.seeMore : messages.seeLess, /* @__PURE__ */ jsx$1(Icon_default, { src: see_more_default })]
480
820
  })]
481
821
  });
482
822
  };
@@ -565,7 +905,7 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
565
905
  Image: "img",
566
906
  ...slots
567
907
  };
568
- return /* @__PURE__ */ jsx("div", {
908
+ return /* @__PURE__ */ jsx$1("div", {
569
909
  css: { position: "relative" },
570
910
  children: /* @__PURE__ */ jsxs(components.Link, {
571
911
  css: videoThumbnailStyles,
@@ -573,7 +913,7 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
573
913
  onClick,
574
914
  onContextMenu: (event) => event.preventDefault(),
575
915
  children: [
576
- /* @__PURE__ */ jsx(components.Image, {
916
+ /* @__PURE__ */ jsx$1(components.Image, {
577
917
  css: thumbnailImageStyles,
578
918
  src: imageUrl,
579
919
  alt: title,
@@ -581,15 +921,15 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
581
921
  loading: "lazy"
582
922
  }),
583
923
  children,
584
- progress >= 0 && /* @__PURE__ */ jsx("div", {
924
+ progress >= 0 && /* @__PURE__ */ jsx$1("div", {
585
925
  css: progressStyles,
586
- children: /* @__PURE__ */ jsx("span", { style: { width: `${progress * 100}%` } })
926
+ children: /* @__PURE__ */ jsx$1("span", { style: { width: `${progress * 100}%` } })
587
927
  }),
588
928
  /* @__PURE__ */ jsxs("div", {
589
929
  css: tagBaseStyles,
590
- children: [/* @__PURE__ */ jsx("div", { children: topTags?.map((tag) => /* @__PURE__ */ jsx("div", { children: tag }, tag)) }), bottomTags.length > 0 && /* @__PURE__ */ jsx("div", {
930
+ children: [/* @__PURE__ */ jsx$1("div", { children: topTags?.map((tag) => /* @__PURE__ */ jsx$1("div", { children: tag }, tag)) }), bottomTags.length > 0 && /* @__PURE__ */ jsx$1("div", {
591
931
  css: [tagBottomStyles, progress >= 0 && { marginBottom: "8px" }],
592
- children: bottomTags?.map((tag) => /* @__PURE__ */ jsx("div", { children: tag }, tag))
932
+ children: bottomTags?.map((tag) => /* @__PURE__ */ jsx$1("div", { children: tag }, tag))
593
933
  })]
594
934
  })
595
935
  ]
@@ -672,11 +1012,11 @@ const desktopDescriptionStyle = {
672
1012
  margin: "0.75rem 0",
673
1013
  WebkitLineClamp: LINES_OF_DESCRIPTION
674
1014
  };
675
- const OptionalLink = ({ slots, href, children, ...rest }) => href ? /* @__PURE__ */ jsx(slots.Link, {
1015
+ const OptionalLink = ({ slots, href, children, ...rest }) => href ? /* @__PURE__ */ jsx$1(slots.Link, {
676
1016
  href,
677
1017
  ...rest,
678
1018
  children
679
- }) : /* @__PURE__ */ jsx("a", {
1019
+ }) : /* @__PURE__ */ jsx$1("a", {
680
1020
  ...rest,
681
1021
  children
682
1022
  });
@@ -685,7 +1025,7 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
685
1025
  css: [videoItemStyle, style],
686
1026
  children: [/* @__PURE__ */ jsxs("div", {
687
1027
  css: infoStyle,
688
- children: [/* @__PURE__ */ jsx(VideoThumbnail_default, {
1028
+ children: [/* @__PURE__ */ jsx$1(VideoThumbnail_default, {
689
1029
  href: thumbnailHref,
690
1030
  imageUrl,
691
1031
  topTags,
@@ -698,18 +1038,18 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
698
1038
  slots,
699
1039
  href,
700
1040
  children: [
701
- /* @__PURE__ */ jsx("div", {
1041
+ /* @__PURE__ */ jsx$1("div", {
702
1042
  css: titleStyle,
703
1043
  children: data.title || data.display_text
704
1044
  }),
705
- /* @__PURE__ */ jsx("div", {
1045
+ /* @__PURE__ */ jsx$1("div", {
706
1046
  css: [descriptionStyle, desktopDescriptionStyle],
707
1047
  children: data.synopsis
708
1048
  }),
709
- secondaryText ? /* @__PURE__ */ jsx("div", { children: secondaryText }) : null
1049
+ secondaryText ? /* @__PURE__ */ jsx$1("div", { children: secondaryText }) : null
710
1050
  ]
711
1051
  })]
712
- }), /* @__PURE__ */ jsx(OptionalLink, {
1052
+ }), /* @__PURE__ */ jsx$1(OptionalLink, {
713
1053
  slots,
714
1054
  href,
715
1055
  css: descriptionStyle,
@@ -719,4 +1059,4 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
719
1059
  var VideoItem_default = VideoItem;
720
1060
 
721
1061
  //#endregion
722
- export { Dropdown_default as Dropdown, HiddenToggle_default as HiddenToggle, Icon_default as Icon, SeeMore_default as SeeMore, VideoItem_default as VideoItem, VideoThumbnail_default as VideoThumbnail };
1062
+ export { Banner_default as Banner, Dropdown_default as Dropdown, HiddenToggle_default as HiddenToggle, Icon_default as Icon, SeeMore_default as SeeMore, VideoItem_default as VideoItem, VideoThumbnail_default as VideoThumbnail };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kkcompany/app-ui",
3
- "version": "0.1.24",
3
+ "version": "0.1.26",
4
4
  "module": "dist/index.mjs",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.mts",