@x-plat/design-system 0.2.4 → 0.3.2

package/dist/components/Swiper/index.css

@@ -1,229 +1,70 @@
-/* ../../node_modules/swiper/swiper.css */
-:root {
-  --swiper-theme-color: #007aff;
-}
-:host {
+/* src/components/Swiper/swiper.scss */
+.lib-xplat-swiper {
+  width: 100%;
   position: relative;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  z-index: 1;
 }
-.swiper {
-  margin-left: auto;
-  margin-right: auto;
-  position: relative;
+.lib-xplat-swiper__viewport {
   overflow: hidden;
-  list-style: none;
-  padding: 0;
-  z-index: 1;
-  display: block;
+  cursor: grab;
+  user-select: none;
 }
-.swiper-vertical > .swiper-wrapper {
-  flex-direction: column;
+.lib-xplat-swiper__viewport:active {
+  cursor: grabbing;
 }
-.swiper-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
+.lib-xplat-swiper__track {
   display: flex;
-  transition-property: transform;
-  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
-  box-sizing: content-box;
+  will-change: transform;
 }
-.swiper-android .swiper-slide,
-.swiper-ios .swiper-slide,
-.swiper-wrapper {
-  transform: translate3d(0px, 0, 0);
-}
-.swiper-horizontal {
-  touch-action: pan-y;
-}
-.swiper-vertical {
-  touch-action: pan-x;
-}
-.swiper-slide {
-  flex-shrink: 0;
-  width: 100%;
-  height: 100%;
-  position: relative;
+.lib-xplat-swiper__track.transitioning {
   transition-property: transform;
-  display: block;
-}
-.swiper-slide-invisible-blank {
-  visibility: hidden;
+  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
-.swiper-autoheight,
-.swiper-autoheight .swiper-slide {
-  height: auto;
-}
-.swiper-autoheight .swiper-wrapper {
-  align-items: flex-start;
-  transition-property: transform, height;
-}
-.swiper-backface-hidden .swiper-slide {
-  transform: translateZ(0);
-  backface-visibility: hidden;
-}
-.swiper-3d.swiper-css-mode .swiper-wrapper {
-  perspective: 1200px;
-}
-.swiper-3d .swiper-wrapper {
-  transform-style: preserve-3d;
-}
-.swiper-3d {
-  perspective: 1200px;
-  .swiper-slide,
-  .swiper-cube-shadow {
-    transform-style: preserve-3d;
-  }
+.lib-xplat-swiper__slide {
+  flex-shrink: 0;
+  overflow: hidden;
 }
-.swiper-css-mode {
-  > .swiper-wrapper {
-    overflow: auto;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-  > .swiper-wrapper > .swiper-slide {
-    scroll-snap-align: start start;
-  }
-  &.swiper-horizontal {
-    > .swiper-wrapper {
-      scroll-snap-type: x mandatory;
-    }
-  }
-  &.swiper-vertical {
-    > .swiper-wrapper {
-      scroll-snap-type: y mandatory;
-    }
-  }
-  &.swiper-free-mode {
-    > .swiper-wrapper {
-      scroll-snap-type: none;
-    }
-    > .swiper-wrapper > .swiper-slide {
-      scroll-snap-align: none;
-    }
-  }
-  &.swiper-centered {
-    > .swiper-wrapper::before {
-      content: "";
-      flex-shrink: 0;
-      order: 9999;
-    }
-    > .swiper-wrapper > .swiper-slide {
-      scroll-snap-align: center center;
-      scroll-snap-stop: always;
-    }
-  }
-  &.swiper-centered.swiper-horizontal {
-    > .swiper-wrapper > .swiper-slide:first-child {
-      margin-inline-start: var(--swiper-centered-offset-before);
-    }
-    > .swiper-wrapper::before {
-      height: 100%;
-      min-height: 1px;
-      width: var(--swiper-centered-offset-after);
-    }
-  }
-  &.swiper-centered.swiper-vertical {
-    > .swiper-wrapper > .swiper-slide:first-child {
-      margin-block-start: var(--swiper-centered-offset-before);
-    }
-    > .swiper-wrapper::before {
-      width: 100%;
-      min-width: 1px;
-      height: var(--swiper-centered-offset-after);
-    }
-  }
+.lib-xplat-swiper__progress {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: center;
 }
-.swiper-3d {
-  .swiper-slide-shadow,
-  .swiper-slide-shadow-left,
-  .swiper-slide-shadow-right,
-  .swiper-slide-shadow-top,
-  .swiper-slide-shadow-bottom,
-  .swiper-slide-shadow,
-  .swiper-slide-shadow-left,
-  .swiper-slide-shadow-right,
-  .swiper-slide-shadow-top,
-  .swiper-slide-shadow-bottom {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 10;
-  }
-  .swiper-slide-shadow {
-    background: rgba(0, 0, 0, 0.15);
-  }
-  .swiper-slide-shadow-left {
-    background-image:
-      linear-gradient(
-        to left,
-        rgba(0, 0, 0, 0.5),
-        rgba(0, 0, 0, 0));
-  }
-  .swiper-slide-shadow-right {
-    background-image:
-      linear-gradient(
-        to right,
-        rgba(0, 0, 0, 0.5),
-        rgba(0, 0, 0, 0));
-  }
-  .swiper-slide-shadow-top {
-    background-image:
-      linear-gradient(
-        to top,
-        rgba(0, 0, 0, 0.5),
-        rgba(0, 0, 0, 0));
-  }
-  .swiper-slide-shadow-bottom {
-    background-image:
-      linear-gradient(
-        to bottom,
-        rgba(0, 0, 0, 0.5),
-        rgba(0, 0, 0, 0));
-  }
+.lib-xplat-swiper__progress-track {
+  position: relative;
+  width: 100%;
+  max-width: 580px;
+  height: 2px;
+  background-color: var(--xplat-neutral-200);
+  border-radius: 1px;
 }
-.swiper-lazy-preloader {
-  width: 42px;
-  height: 42px;
+.lib-xplat-swiper__progress-fill {
   position: absolute;
-  left: 50%;
-  top: 50%;
-  margin-left: -21px;
-  margin-top: -21px;
-  z-index: 10;
-  transform-origin: 50%;
-  box-sizing: border-box;
-  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
-  border-radius: 50%;
-  border-top-color: transparent;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background-color: var(--xplat-neutral-500);
+  border-radius: 1px;
+  transition-property: width;
+  transition-timing-function: ease;
 }
-.swiper:not(.swiper-watch-progress),
-.swiper-watch-progress .swiper-slide-visible {
-  .swiper-lazy-preloader {
-    animation: swiper-preloader-spin 1s infinite linear;
-  }
+.lib-xplat-swiper__dots {
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+  margin-top: 1rem;
 }
-.swiper-lazy-preloader-white {
-  --swiper-preloader-color: #fff;
+.lib-xplat-swiper__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  background-color: var(--xplat-neutral-300);
+  transition: background-color 0.2s;
 }
-.swiper-lazy-preloader-black {
-  --swiper-preloader-color: #000;
+.lib-xplat-swiper__dot.active {
+  background-color: var(--xplat-neutral-700);
 }
-@keyframes swiper-preloader-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+.lib-xplat-swiper__dot:hover:not(.active) {
+  background-color: var(--xplat-neutral-400);
 }

package/dist/components/Swiper/index.d.cts

@@ -1,24 +1,43 @@
-import React, { MutableRefObject, ReactNode } from 'react';
-import { SwiperClass } from 'swiper/react';
-import { SwiperOptions } from 'swiper/types';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
 
-interface SwiperComponentProps {
+interface SwiperHandle {
+    slidePrev: () => void;
+    slideNext: () => void;
+    slideTo: (index: number) => void;
+}
+interface SwiperProps {
+    /** 자동 슬라이딩 */
     auto?: boolean;
-    swiperRef?: MutableRefObject<SwiperClass | null>;
-    renderItems?: Array<ReactNode>;
-    viewItemCount?: number | "auto";
+    /** 외부에서 제어할 ref */
+    swiperRef?: React.RefObject<SwiperHandle | null>;
+    /** 슬라이드 아이템 */
+    renderItems?: React.ReactNode[];
+    /** 한 번에 보이는 아이템 수 */
+    viewItemCount?: number;
+    /** 최대 아이템 수 */
     maxItems?: number;
-    freeMode?: boolean;
-    options?: SwiperOptions;
+    /** 루프 */
     loop?: boolean;
+    /** 슬라이드 간격 (px) */
     spaceBetween?: number;
-    centeredSlides?: boolean;
-    loopSlides?: number;
-    isProgress?: boolean;
-    totalItemCount?: number;
-    showAutoplayProgress?: boolean;
+    /** 진행바 표시 */
+    showProgress?: boolean;
+    /** 오토플레이 딜레이 (ms) */
     autoplayDelay?: number;
+    /** 슬라이드 전환 속도 (ms) */
+    speed?: number;
+    /** 한 번에 이동할 슬라이드 수 (기본: 1) */
+    slideBy?: number;
+    /** 현재 슬라이드 인덱스 (controlled) */
+    index?: number;
+    /** 슬라이드 변경 콜백 */
+    onChange?: (index: number) => void;
+    className?: string;
 }
-declare const SwiperContentComponent: React.FC<SwiperComponentProps>;
+declare const Swiper: {
+    (props: SwiperProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-export { SwiperContentComponent as default };
+export { Swiper, type SwiperHandle, type SwiperProps };

package/dist/components/Swiper/index.d.ts

@@ -1,24 +1,43 @@
-import React, { MutableRefObject, ReactNode } from 'react';
-import { SwiperClass } from 'swiper/react';
-import { SwiperOptions } from 'swiper/types';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
 
-interface SwiperComponentProps {
+interface SwiperHandle {
+    slidePrev: () => void;
+    slideNext: () => void;
+    slideTo: (index: number) => void;
+}
+interface SwiperProps {
+    /** 자동 슬라이딩 */
     auto?: boolean;
-    swiperRef?: MutableRefObject<SwiperClass | null>;
-    renderItems?: Array<ReactNode>;
-    viewItemCount?: number | "auto";
+    /** 외부에서 제어할 ref */
+    swiperRef?: React.RefObject<SwiperHandle | null>;
+    /** 슬라이드 아이템 */
+    renderItems?: React.ReactNode[];
+    /** 한 번에 보이는 아이템 수 */
+    viewItemCount?: number;
+    /** 최대 아이템 수 */
     maxItems?: number;
-    freeMode?: boolean;
-    options?: SwiperOptions;
+    /** 루프 */
     loop?: boolean;
+    /** 슬라이드 간격 (px) */
     spaceBetween?: number;
-    centeredSlides?: boolean;
-    loopSlides?: number;
-    isProgress?: boolean;
-    totalItemCount?: number;
-    showAutoplayProgress?: boolean;
+    /** 진행바 표시 */
+    showProgress?: boolean;
+    /** 오토플레이 딜레이 (ms) */
     autoplayDelay?: number;
+    /** 슬라이드 전환 속도 (ms) */
+    speed?: number;
+    /** 한 번에 이동할 슬라이드 수 (기본: 1) */
+    slideBy?: number;
+    /** 현재 슬라이드 인덱스 (controlled) */
+    index?: number;
+    /** 슬라이드 변경 콜백 */
+    onChange?: (index: number) => void;
+    className?: string;
 }
-declare const SwiperContentComponent: React.FC<SwiperComponentProps>;
+declare const Swiper: {
+    (props: SwiperProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-export { SwiperContentComponent as default };
+export { Swiper, type SwiperHandle, type SwiperProps };