@x-plat/design-system 0.5.2 → 0.5.3

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 (48) hide show
  1. package/dist/components/Accordion/index.cjs +38 -31
  2. package/dist/components/Accordion/index.css +1 -0
  3. package/dist/components/Accordion/index.js +38 -31
  4. package/dist/components/Alert/index.css +1 -0
  5. package/dist/components/Breadcrumb/index.css +3 -0
  6. package/dist/components/Button/index.css +1 -0
  7. package/dist/components/Calendar/index.cjs +103 -62
  8. package/dist/components/Calendar/index.css +1 -0
  9. package/dist/components/Calendar/index.js +103 -62
  10. package/dist/components/Card/index.css +2 -0
  11. package/dist/components/CardTab/index.css +1 -0
  12. package/dist/components/Chart/index.cjs +106 -83
  13. package/dist/components/Chart/index.css +1 -0
  14. package/dist/components/Chart/index.js +106 -83
  15. package/dist/components/DatePicker/index.cjs +36 -15
  16. package/dist/components/DatePicker/index.css +2 -0
  17. package/dist/components/DatePicker/index.js +36 -15
  18. package/dist/components/EmptyState/index.css +1 -0
  19. package/dist/components/FileUpload/index.css +2 -0
  20. package/dist/components/HtmlTypeWriter/index.css +1 -0
  21. package/dist/components/Pagination/index.css +8 -8
  22. package/dist/components/Spinner/index.css +7 -2
  23. package/dist/components/Steps/index.cjs +1 -4
  24. package/dist/components/Steps/index.css +15 -36
  25. package/dist/components/Steps/index.js +1 -4
  26. package/dist/components/Swiper/index.cjs +16 -12
  27. package/dist/components/Swiper/index.css +1 -0
  28. package/dist/components/Swiper/index.js +16 -12
  29. package/dist/components/Switch/index.css +20 -19
  30. package/dist/components/Tab/index.css +16 -2
  31. package/dist/components/Table/index.cjs +4 -4
  32. package/dist/components/Table/index.css +1 -0
  33. package/dist/components/Table/index.d.cts +2 -5
  34. package/dist/components/Table/index.d.ts +2 -5
  35. package/dist/components/Table/index.js +4 -4
  36. package/dist/components/Video/index.cjs +32 -43
  37. package/dist/components/Video/index.css +4 -4
  38. package/dist/components/Video/index.d.cts +1 -5
  39. package/dist/components/Video/index.d.ts +1 -5
  40. package/dist/components/Video/index.js +32 -43
  41. package/dist/components/index.cjs +339 -257
  42. package/dist/components/index.css +88 -71
  43. package/dist/components/index.js +339 -257
  44. package/dist/index.cjs +339 -257
  45. package/dist/index.css +88 -71
  46. package/dist/index.js +339 -257
  47. package/guidelines/Guidelines.md +11 -4
  48. package/package.json +1 -2
package/dist/components/Video/index.cjs CHANGED
@@ -176,7 +176,6 @@ var Video = import_react.default.forwardRef((props, ref) => {
176
176
  const {
177
177
  src,
178
178
  poster,
179
- controls = true,
180
179
  autoPlay,
181
180
  muted,
182
181
  loop,
@@ -215,49 +214,39 @@ var Video = import_react.default.forwardRef((props, ref) => {
215
214
  videoRef.current.play();
216
215
  }
217
216
  };
218
- const showCustomOverlay = !controls;
219
- return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
220
- "div",
221
- {
222
- className: clsx_default(
223
- "lib-xplat-video",
224
- showCustomOverlay && "custom-overlay"
225
- ),
226
- children: [
227
- /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
228
- "video",
229
- {
230
- ref: setRefs,
231
- src,
232
- poster,
233
- controls,
234
- autoPlay,
235
- muted,
236
- loop,
237
- playsInline: playsInline ?? true,
238
- onPlay: handlePlay,
239
- onPause: handlePause,
240
- onLoadedData: handleLoadedData,
241
- ...rest
242
- }
217
+ return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "lib-xplat-video custom-overlay", children: [
218
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
219
+ "video",
220
+ {
221
+ ref: setRefs,
222
+ src,
223
+ poster,
224
+ autoPlay,
225
+ muted,
226
+ loop,
227
+ playsInline: playsInline ?? true,
228
+ onPlay: handlePlay,
229
+ onPause: handlePause,
230
+ onLoadedData: handleLoadedData,
231
+ onClick: togglePlay,
232
+ ...rest
233
+ }
234
+ ),
235
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
236
+ "button",
237
+ {
238
+ type: "button",
239
+ className: clsx_default(
240
+ "play-overlay",
241
+ isPlaying && "is-playing",
242
+ !isLoaded && "is-loading"
243
243
  ),
244
- showCustomOverlay && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
245
- "button",
246
- {
247
- type: "button",
248
- className: clsx_default(
249
- "play-overlay",
250
- isPlaying && "is-playing",
251
- !isLoaded && "is-loading"
252
- ),
253
- onClick: togglePlay,
254
- "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
255
- children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PlayCircleIcon_default, {}) })
256
- }
257
- )
258
- ]
259
- }
260
- );
244
+ onClick: togglePlay,
245
+ "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
246
+ children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PlayCircleIcon_default, {}) })
247
+ }
248
+ )
249
+ ] });
261
250
  });
262
251
  Video.displayName = "Video";
263
252
  var Video_default = Video;
package/dist/components/Video/index.css CHANGED
@@ -62,10 +62,10 @@
62
62
  opacity: 0;
63
63
  pointer-events: none;
64
64
  }
65
- .lib-xplat-video.custom-overlay > .play-overlay.is-playing:hover {
66
- opacity: 1;
67
- pointer-events: auto;
68
- }
69
65
  .lib-xplat-video.custom-overlay > .play-overlay.is-loading .play-icon {
70
66
  opacity: 0.6;
71
67
  }
68
+ .lib-xplat-video.custom-overlay:hover > .play-overlay.is-playing {
69
+ opacity: 1;
70
+ pointer-events: auto;
71
+ }
package/dist/components/Video/index.d.cts CHANGED
@@ -1,12 +1,8 @@
1
1
  import React from 'react';
2
2
 
3
- interface VideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children" | "className"> {
4
- /** 비디오 소스 URL */
3
+ interface VideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children" | "className" | "controls"> {
5
4
  src: string;
6
- /** 재생 전 썸네일 이미지 URL */
7
5
  poster?: string;
8
- /** 네이티브 컨트롤 표시 여부. false면 커스텀 재생/일시정지 오버레이만 표시 */
9
- controls?: boolean;
10
6
  }
11
7
  declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<HTMLVideoElement>>;
12
8
 
package/dist/components/Video/index.d.ts CHANGED
@@ -1,12 +1,8 @@
1
1
  import React from 'react';
2
2
 
3
- interface VideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children" | "className"> {
4
- /** 비디오 소스 URL */
3
+ interface VideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children" | "className" | "controls"> {
5
4
  src: string;
6
- /** 재생 전 썸네일 이미지 URL */
7
5
  poster?: string;
8
- /** 네이티브 컨트롤 표시 여부. false면 커스텀 재생/일시정지 오버레이만 표시 */
9
- controls?: boolean;
10
6
  }
11
7
  declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<HTMLVideoElement>>;
12
8
 
package/dist/components/Video/index.js CHANGED
@@ -140,7 +140,6 @@ var Video = React.forwardRef((props, ref) => {
140
140
  const {
141
141
  src,
142
142
  poster,
143
- controls = true,
144
143
  autoPlay,
145
144
  muted,
146
145
  loop,
@@ -179,49 +178,39 @@ var Video = React.forwardRef((props, ref) => {
179
178
  videoRef.current.play();
180
179
  }
181
180
  };
182
- const showCustomOverlay = !controls;
183
- return /* @__PURE__ */ jsxs24(
184
- "div",
185
- {
186
- className: clsx_default(
187
- "lib-xplat-video",
188
- showCustomOverlay && "custom-overlay"
189
- ),
190
- children: [
191
- /* @__PURE__ */ jsx29(
192
- "video",
193
- {
194
- ref: setRefs,
195
- src,
196
- poster,
197
- controls,
198
- autoPlay,
199
- muted,
200
- loop,
201
- playsInline: playsInline ?? true,
202
- onPlay: handlePlay,
203
- onPause: handlePause,
204
- onLoadedData: handleLoadedData,
205
- ...rest
206
- }
181
+ return /* @__PURE__ */ jsxs24("div", { className: "lib-xplat-video custom-overlay", children: [
182
+ /* @__PURE__ */ jsx29(
183
+ "video",
184
+ {
185
+ ref: setRefs,
186
+ src,
187
+ poster,
188
+ autoPlay,
189
+ muted,
190
+ loop,
191
+ playsInline: playsInline ?? true,
192
+ onPlay: handlePlay,
193
+ onPause: handlePause,
194
+ onLoadedData: handleLoadedData,
195
+ onClick: togglePlay,
196
+ ...rest
197
+ }
198
+ ),
199
+ /* @__PURE__ */ jsx29(
200
+ "button",
201
+ {
202
+ type: "button",
203
+ className: clsx_default(
204
+ "play-overlay",
205
+ isPlaying && "is-playing",
206
+ !isLoaded && "is-loading"
207
207
  ),
208
- showCustomOverlay && /* @__PURE__ */ jsx29(
209
- "button",
210
- {
211
- type: "button",
212
- className: clsx_default(
213
- "play-overlay",
214
- isPlaying && "is-playing",
215
- !isLoaded && "is-loading"
216
- ),
217
- onClick: togglePlay,
218
- "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
219
- children: isPlaying ? /* @__PURE__ */ jsx29(PauseIcon_default, {}) : /* @__PURE__ */ jsx29("span", { className: "play-icon", children: /* @__PURE__ */ jsx29(PlayCircleIcon_default, {}) })
220
- }
221
- )
222
- ]
223
- }
224
- );
208
+ onClick: togglePlay,
209
+ "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
210
+ children: isPlaying ? /* @__PURE__ */ jsx29(PauseIcon_default, {}) : /* @__PURE__ */ jsx29("span", { className: "play-icon", children: /* @__PURE__ */ jsx29(PlayCircleIcon_default, {}) })
211
+ }
212
+ )
213
+ ] });
225
214
  });
226
215
  Video.displayName = "Video";
227
216
  var Video_default = Video;