@x-plat/design-system 0.3.0 → 0.3.3

package/dist/index.cjs

@@ -317,6 +317,7 @@ __export(index_exports, {
   SunIcon: () => SunIcon_default,
   SunriseIcon: () => SunriseIcon_default,
   SunsetIcon: () => SunsetIcon_default,
+  Swiper: () => Swiper_default,
   Switch: () => Switch_default,
   Tab: () => Tab_default,
   Table: () => Table_default,
@@ -32874,9 +32875,270 @@ var Steps = (props) => {
 Steps.displayName = "Steps";
 var Steps_default = Steps;
 
-// src/components/Switch/Switch.tsx
+// src/components/Swiper/Swiper.tsx
 var import_react29 = __toESM(require("react"), 1);
 var import_jsx_runtime334 = require("react/jsx-runtime");
+var Swiper = (props) => {
+  const {
+    auto = false,
+    swiperRef,
+    renderItems = [],
+    viewItemCount = 1,
+    maxItems,
+    loop = false,
+    spaceBetween = 16,
+    showProgress = false,
+    autoplayDelay = 3e3,
+    speed = 300,
+    slideBy = 1,
+    index: indexProp,
+    onChange,
+    className
+  } = props;
+  const items = maxItems ? renderItems.slice(0, maxItems) : renderItems;
+  const totalSlides = items.length;
+  const canSlide = totalSlides > viewItemCount;
+  const maxIndex = Math.max(0, totalSlides - viewItemCount);
+  const useLoop = loop && canSlide;
+  const cloneCount = useLoop ? totalSlides : 0;
+  const extendedItems = import_react29.default.useMemo(() => {
+    if (!useLoop) return items;
+    return [...items, ...items, ...items];
+  }, [items, useLoop]);
+  const initialIdx = Math.max(0, Math.min(indexProp ?? 0, maxIndex));
+  const [innerIndex, setInnerIndex] = import_react29.default.useState(
+    useLoop ? cloneCount + initialIdx : initialIdx
+  );
+  const [isDragging, setIsDragging] = import_react29.default.useState(false);
+  const [dragOffset, setDragOffset] = import_react29.default.useState(0);
+  const [animated, setAnimated] = import_react29.default.useState(true);
+  const [containerWidth, setContainerWidth] = import_react29.default.useState(0);
+  const containerRef = import_react29.default.useRef(null);
+  const startXRef = import_react29.default.useRef(0);
+  const startTimeRef = import_react29.default.useRef(0);
+  const autoplayTimerRef = import_react29.default.useRef(null);
+  import_react29.default.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(entry.contentRect.width);
+      }
+    });
+    ro.observe(el);
+    setContainerWidth(el.offsetWidth);
+    return () => ro.disconnect();
+  }, []);
+  const slideStep = containerWidth > 0 ? (containerWidth - (viewItemCount - 1) * spaceBetween) / viewItemCount + spaceBetween : 0;
+  const transformPx = -(innerIndex * slideStep) + dragOffset;
+  const getRealIndex = (inner) => {
+    if (!useLoop) return inner;
+    return ((inner - cloneCount) % totalSlides + totalSlides) % totalSlides;
+  };
+  const realIndex = getRealIndex(innerIndex);
+  const moveToInner = import_react29.default.useCallback(
+    (idx, withAnim = true) => {
+      if (useLoop) {
+        setInnerIndex((prev) => {
+          const real = ((prev - cloneCount) % totalSlides + totalSlides) % totalSlides;
+          const canonical = cloneCount + real;
+          if (prev !== canonical) {
+            const delta = idx - prev;
+            setAnimated(withAnim);
+            return canonical + delta;
+          }
+          setAnimated(withAnim);
+          return idx;
+        });
+      } else {
+        setAnimated(withAnim);
+        setInnerIndex(idx);
+      }
+    },
+    [useLoop, cloneCount, totalSlides]
+  );
+  const handleTransitionEnd = import_react29.default.useCallback(() => {
+    if (!useLoop) return;
+    const real = getRealIndex(innerIndex);
+    const canonical = cloneCount + real;
+    if (innerIndex !== canonical) {
+      moveToInner(canonical, false);
+    }
+    onChange?.(Math.min(real, maxIndex));
+  }, [useLoop, innerIndex, cloneCount, totalSlides, maxIndex, onChange, moveToInner]);
+  const slideTo = import_react29.default.useCallback(
+    (logicalIndex) => {
+      if (!canSlide) return;
+      const clamped = useLoop ? logicalIndex : Math.max(0, Math.min(logicalIndex, maxIndex));
+      const target = useLoop ? cloneCount + clamped : clamped;
+      moveToInner(target, true);
+      if (!useLoop) onChange?.(clamped);
+    },
+    [canSlide, useLoop, cloneCount, maxIndex, onChange, moveToInner]
+  );
+  const slideNext = import_react29.default.useCallback(() => {
+    if (!canSlide) return;
+    const nextInner = innerIndex + slideBy;
+    if (useLoop) {
+      moveToInner(nextInner, true);
+    } else {
+      moveToInner(Math.min(nextInner, maxIndex), true);
+    }
+  }, [canSlide, useLoop, innerIndex, slideBy, maxIndex, moveToInner]);
+  const slidePrev = import_react29.default.useCallback(() => {
+    if (!canSlide) return;
+    const prevInner = innerIndex - slideBy;
+    if (useLoop) {
+      moveToInner(prevInner, true);
+    } else {
+      moveToInner(Math.max(prevInner, 0), true);
+    }
+  }, [canSlide, useLoop, innerIndex, slideBy, moveToInner]);
+  import_react29.default.useEffect(() => {
+    if (indexProp === void 0) return;
+    const clamped = Math.max(0, Math.min(indexProp, maxIndex));
+    const target = useLoop ? cloneCount + clamped : clamped;
+    if (target !== innerIndex) {
+      moveToInner(target, true);
+    }
+  }, [indexProp]);
+  import_react29.default.useImperativeHandle(swiperRef, () => ({
+    slidePrev,
+    slideNext,
+    slideTo
+  }));
+  import_react29.default.useEffect(() => {
+    if (!auto || !canSlide) return;
+    autoplayTimerRef.current = setInterval(slideNext, autoplayDelay);
+    return () => {
+      if (autoplayTimerRef.current) clearInterval(autoplayTimerRef.current);
+    };
+  }, [auto, autoplayDelay, slideNext, canSlide]);
+  const pauseAutoplay = () => {
+    if (autoplayTimerRef.current) clearInterval(autoplayTimerRef.current);
+  };
+  const getClientX = (e) => {
+    if ("touches" in e) return e.touches[0]?.clientX ?? 0;
+    return e.clientX;
+  };
+  const handleDragStart = (e) => {
+    if (!canSlide) return;
+    if ("button" in e && e.button !== 0) return;
+    pauseAutoplay();
+    setIsDragging(true);
+    setAnimated(false);
+    startXRef.current = getClientX(e);
+    startTimeRef.current = Date.now();
+  };
+  import_react29.default.useEffect(() => {
+    if (!isDragging) return;
+    const handleMove = (e) => {
+      setDragOffset(getClientX(e) - startXRef.current);
+    };
+    const handleEnd = () => {
+      setIsDragging(false);
+      const absDrag = Math.abs(dragOffset);
+      const elapsed = Date.now() - startTimeRef.current;
+      const velocity = absDrag / elapsed;
+      if ((absDrag > 30 || velocity > 0.3) && slideStep > 0) {
+        const rawCount = Math.max(1, Math.round(absDrag / slideStep));
+        const count2 = Math.max(slideBy, Math.round(rawCount / slideBy) * slideBy);
+        const direction = dragOffset < 0 ? 1 : -1;
+        const nextInner = innerIndex + direction * count2;
+        if (useLoop) {
+          moveToInner(nextInner, true);
+        } else {
+          moveToInner(Math.max(0, Math.min(nextInner, maxIndex)), true);
+        }
+      } else {
+        setAnimated(true);
+      }
+      setDragOffset(0);
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleEnd);
+    window.addEventListener("touchmove", handleMove, { passive: true });
+    window.addEventListener("touchend", handleEnd);
+    return () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleEnd);
+      window.removeEventListener("touchmove", handleMove);
+      window.removeEventListener("touchend", handleEnd);
+    };
+  }, [isDragging, dragOffset, innerIndex, useLoop, maxIndex, slideStep, moveToInner]);
+  const slideWidthPercent = 100 / viewItemCount;
+  const gapAdjust = spaceBetween * (viewItemCount - 1) / viewItemCount;
+  const totalSteps = Math.ceil((maxIndex + 1) / slideBy);
+  const currentStep = Math.min(
+    Math.floor(realIndex / slideBy),
+    totalSteps - 1
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime334.jsxs)("div", { className: clsx_default("lib-xplat-swiper", className), ref: containerRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+      "div",
+      {
+        className: "lib-xplat-swiper__viewport",
+        onMouseDown: handleDragStart,
+        onTouchStart: handleDragStart,
+        children: /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+          "div",
+          {
+            className: clsx_default(
+              "lib-xplat-swiper__track",
+              animated && !isDragging && "transitioning"
+            ),
+            style: {
+              transform: `translateX(${transformPx}px)`,
+              transitionDuration: isDragging || !animated ? "0ms" : `${speed}ms`,
+              gap: `${spaceBetween}px`
+            },
+            onTransitionEnd: handleTransitionEnd,
+            children: extendedItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+              "div",
+              {
+                className: "lib-xplat-swiper__slide",
+                style: {
+                  minWidth: `calc(${slideWidthPercent}% - ${gapAdjust}px)`,
+                  maxWidth: `calc(${slideWidthPercent}% - ${gapAdjust}px)`
+                },
+                children: item
+              },
+              idx
+            ))
+          }
+        )
+      }
+    ),
+    showProgress && canSlide && /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+      "span",
+      {
+        className: "lib-xplat-swiper__progress-fill",
+        style: {
+          width: `${(currentStep + 1) / totalSteps * 100}%`,
+          transitionDuration: `${speed}ms`
+        }
+      }
+    ) }) }),
+    canSlide && /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+      "button",
+      {
+        className: clsx_default(
+          "lib-xplat-swiper__dot",
+          i === currentStep && "active"
+        ),
+        onClick: () => slideTo(i * slideBy),
+        "aria-label": `\uC2AC\uB77C\uC774\uB4DC ${i + 1}`
+      },
+      i
+    )) })
+  ] });
+};
+Swiper.displayName = "Swiper";
+var Swiper_default = Swiper;
+
+// src/components/Switch/Switch.tsx
+var import_react30 = __toESM(require("react"), 1);
+var import_jsx_runtime335 = require("react/jsx-runtime");
 var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
@@ -32887,9 +33149,9 @@ var Switch = (props) => {
     color: color2 = "xplat-blue-500",
     className
   } = props;
-  const [isAnimating, setIsAnimating] = import_react29.default.useState(false);
-  const timeoutRef = import_react29.default.useRef(null);
-  import_react29.default.useEffect(() => {
+  const [isAnimating, setIsAnimating] = import_react30.default.useState(false);
+  const timeoutRef = import_react30.default.useRef(null);
+  import_react30.default.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -32905,7 +33167,7 @@ var Switch = (props) => {
     }, KNOB_TRANSITION_MS);
   };
   const colorClass = color2;
-  return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
     "div",
     {
       className: clsx_default(
@@ -32919,7 +33181,7 @@ var Switch = (props) => {
       ),
       onClick: handleClick,
       "aria-disabled": disabled || isAnimating,
-      children: /* @__PURE__ */ (0, import_jsx_runtime334.jsx)("div", { className: clsx_default("knob", value ? "checked" : void 0) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime335.jsx)("div", { className: clsx_default("knob", value ? "checked" : void 0) })
     }
   );
 };
@@ -32927,14 +33189,14 @@ Switch.displayName = "Switch";
 var Switch_default = Switch;
 
 // src/components/Tab/Tab.tsx
-var import_react31 = __toESM(require("react"), 1);
+var import_react32 = __toESM(require("react"), 1);
 
 // src/components/Tab/TabItem.tsx
-var import_react30 = __toESM(require("react"), 1);
-var import_jsx_runtime335 = require("react/jsx-runtime");
-var TabItem = import_react30.default.forwardRef((props, ref) => {
+var import_react31 = __toESM(require("react"), 1);
+var import_jsx_runtime336 = require("react/jsx-runtime");
+var TabItem = import_react31.default.forwardRef((props, ref) => {
   const { isActive, title, onClick } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
     "div",
     {
       ref,
@@ -32948,25 +33210,25 @@ TabItem.displayName = "TabItem";
 var TabItem_default = TabItem;
 
 // src/components/Tab/Tab.tsx
-var import_jsx_runtime336 = require("react/jsx-runtime");
+var import_jsx_runtime337 = require("react/jsx-runtime");
 var Tab = (props) => {
   const { activeIndex, onChange, tabs, type, size: size4 = "md" } = props;
-  const [underlineStyle, setUnderlineStyle] = import_react31.default.useState({
+  const [underlineStyle, setUnderlineStyle] = import_react32.default.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = import_react31.default.useRef([]);
+  const itemRefs = import_react32.default.useRef([]);
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
-  import_react31.default.useEffect(() => {
+  import_react32.default.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime336.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size4), children: [
-    tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime337.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size4), children: [
+    tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
       TabItem_default,
       {
         onClick: () => handleChangeActiveTab(tab, idx),
@@ -32978,7 +33240,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
+    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
       "div",
       {
         className: "tab-toggle-underline",
@@ -32994,17 +33256,17 @@ Tab.displayName = "Tab";
 var Tab_default = Tab;
 
 // src/components/Table/TableContext.tsx
-var import_react32 = __toESM(require("react"), 1);
-var TableContext = import_react32.default.createContext(null);
+var import_react33 = __toESM(require("react"), 1);
+var TableContext = import_react33.default.createContext(null);
 var useTableContext = () => {
-  const ctx = import_react32.default.useContext(TableContext);
+  const ctx = import_react33.default.useContext(TableContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
 var TableContext_default = TableContext;
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime337 = require("react/jsx-runtime");
+var import_jsx_runtime338 = require("react/jsx-runtime");
 var Table = (props) => {
   const {
     className,
@@ -33014,7 +33276,7 @@ var Table = (props) => {
     headerSticky = false,
     stickyShadow = true
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("div", { className: clsx_default("lib-xplat-table-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("div", { className: clsx_default("lib-xplat-table-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
     TableContext_default.Provider,
     {
       value: {
@@ -33023,7 +33285,7 @@ var Table = (props) => {
         headerSticky,
         stickyShadow
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime337.jsx)("table", { className: "lib-xplat-table", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("table", { className: "lib-xplat-table", children })
     }
   ) });
 };
@@ -33031,40 +33293,40 @@ Table.displayName = "Table";
 var Table_default = Table;
 
 // src/components/Table/TableBody.tsx
-var import_jsx_runtime338 = require("react/jsx-runtime");
+var import_jsx_runtime339 = require("react/jsx-runtime");
 var TableBody = (props) => {
   const { children, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime338.jsx)("tbody", { className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime339.jsx)("tbody", { className, children });
 };
 TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
 
 // src/components/Table/TableCell.tsx
-var import_react35 = __toESM(require("react"), 1);
+var import_react36 = __toESM(require("react"), 1);
 
 // src/components/Table/TableHeadContext.tsx
-var import_react33 = __toESM(require("react"), 1);
-var TableHeadContext = import_react33.default.createContext(
+var import_react34 = __toESM(require("react"), 1);
+var TableHeadContext = import_react34.default.createContext(
   null
 );
 var useTableHeadContext = () => {
-  const ctx = import_react33.default.useContext(TableHeadContext);
+  const ctx = import_react34.default.useContext(TableHeadContext);
   return ctx;
 };
 var TableHeadContext_default = TableHeadContext;
 
 // src/components/Table/TableRowContext.tsx
-var import_react34 = __toESM(require("react"), 1);
-var TableRowContext = import_react34.default.createContext(null);
+var import_react35 = __toESM(require("react"), 1);
+var TableRowContext = import_react35.default.createContext(null);
 var useTableRowContext = () => {
-  const ctx = import_react34.default.useContext(TableRowContext);
+  const ctx = import_react35.default.useContext(TableRowContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
 var TableRowContext_default = TableRowContext;
 
 // src/components/Table/TableCell.tsx
-var import_jsx_runtime339 = require("react/jsx-runtime");
+var import_jsx_runtime340 = require("react/jsx-runtime");
 var TableCell = (props) => {
   const {
     children,
@@ -33076,9 +33338,9 @@ var TableCell = (props) => {
   const { registerStickyCell, stickyCells } = useTableRowContext();
   const { stickyShadow } = useTableContext();
   const headContext = useTableHeadContext();
-  const [left, setLeft] = import_react35.default.useState(0);
-  const cellRef = import_react35.default.useRef(null);
-  const calculateLeft = import_react35.default.useCallback(() => {
+  const [left, setLeft] = import_react36.default.useState(0);
+  const cellRef = import_react36.default.useRef(null);
+  const calculateLeft = import_react36.default.useCallback(() => {
     if (!cellRef.current) return 0;
     let totalLeft = 0;
     for (const ref of stickyCells) {
@@ -33087,7 +33349,7 @@ var TableCell = (props) => {
     }
     return totalLeft;
   }, [stickyCells]);
-  import_react35.default.useEffect(() => {
+  import_react36.default.useEffect(() => {
     if (!isSticky || !cellRef.current) return;
     registerStickyCell(cellRef);
     setLeft(calculateLeft());
@@ -33105,7 +33367,7 @@ var TableCell = (props) => {
   const CellTag = cellRef.current?.tagName === "TH" ? "th" : "td";
   const isLastSticky = isSticky && stickyCells[stickyCells.length - 1] === cellRef;
   const enableHover = headContext && headContext.cellHover;
-  return /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(
     CellTag,
     {
       ref: cellRef,
@@ -33127,32 +33389,32 @@ TableCell.displayName = "TableCell";
 var TableCell_default = TableCell;
 
 // src/components/Table/TableHead.tsx
-var import_jsx_runtime340 = require("react/jsx-runtime");
+var import_jsx_runtime341 = require("react/jsx-runtime");
 var TableHead = ({
   children,
   className = "",
   cellHover = false
 }) => {
   const { headerSticky } = useTableContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("thead", { className: clsx_default(headerSticky ? "table-sticky" : null, className), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)("thead", { className: clsx_default(headerSticky ? "table-sticky" : null, className), children }) });
 };
 TableHead.displayName = "TableHead";
 var TableHead_default = TableHead;
 
 // src/components/Table/TableRow.tsx
-var import_react36 = __toESM(require("react"), 1);
-var import_jsx_runtime341 = require("react/jsx-runtime");
+var import_react37 = __toESM(require("react"), 1);
+var import_jsx_runtime342 = require("react/jsx-runtime");
 var TableRow = (props) => {
   const {
     children,
     className,
-    color: color2 = "xplat-blue-500",
+    color: color2 = "xplat-neutral-900",
     type = "secondary",
     isHover,
     onClick
   } = props;
   const { rowBorderUse } = useTableContext();
-  const [stickyCells, setStickyCells] = import_react36.default.useState([]);
+  const [stickyCells, setStickyCells] = import_react37.default.useState([]);
   const registerStickyCell = (ref) => {
     setStickyCells((prev) => {
       if (prev.includes(ref)) return prev;
@@ -33160,7 +33422,7 @@ var TableRow = (props) => {
     });
   };
   const colorClass = color2;
-  return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
     "tr",
     {
       className: clsx_default(
@@ -33180,7 +33442,7 @@ TableRow.displayName = "TableRow";
 var TableRow_default = TableRow;
 
 // src/components/Tag/Tag.tsx
-var import_jsx_runtime342 = require("react/jsx-runtime");
+var import_jsx_runtime343 = require("react/jsx-runtime");
 var Tag = (props) => {
   const {
     children,
@@ -33190,21 +33452,21 @@ var Tag = (props) => {
     className
   } = props;
   const colorClass = color2;
-  return /* @__PURE__ */ (0, import_jsx_runtime342.jsxs)("span", { className: clsx_default("lib-xplat-tag", size4, colorClass, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("span", { className: "tag-label", children }),
-    onClose && /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(XIcon_default, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime343.jsxs)("span", { className: clsx_default("lib-xplat-tag", size4, colorClass, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime343.jsx)("span", { className: "tag-label", children }),
+    onClose && /* @__PURE__ */ (0, import_jsx_runtime343.jsx)("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(XIcon_default, {}) })
   ] });
 };
 Tag.displayName = "Tag";
 var Tag_default = Tag;
 
 // src/components/TextArea/TextArea.tsx
-var import_react37 = __toESM(require("react"), 1);
-var import_jsx_runtime343 = require("react/jsx-runtime");
-var TextArea = import_react37.default.forwardRef(
+var import_react38 = __toESM(require("react"), 1);
+var import_jsx_runtime344 = require("react/jsx-runtime");
+var TextArea = import_react38.default.forwardRef(
   (props, ref) => {
     const { value, onChange, className, disabled, ...textareaProps } = props;
-    const localRef = import_react37.default.useRef(null);
+    const localRef = import_react38.default.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
       if (!ref) return;
@@ -33224,21 +33486,21 @@ var TextArea = import_react37.default.forwardRef(
         onChange(event);
       }
     };
-    import_react37.default.useEffect(() => {
+    import_react38.default.useEffect(() => {
       const el = localRef.current;
       if (!el) return;
       el.style.height = "0px";
       const nextHeight = Math.min(el.scrollHeight, 400);
       el.style.height = `${nextHeight}px`;
     }, [value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
       "div",
       {
         className: clsx_default(
           "lib-xplat-textarea",
           disabled ? "disabled" : void 0
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
           "textarea",
           {
             ...textareaProps,
@@ -33256,25 +33518,25 @@ TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
 
 // src/components/Toast/Toast.tsx
-var import_react38 = __toESM(require("react"), 1);
+var import_react39 = __toESM(require("react"), 1);
 var import_react_dom6 = require("react-dom");
-var import_jsx_runtime344 = require("react/jsx-runtime");
-var ToastContext = import_react38.default.createContext(null);
+var import_jsx_runtime345 = require("react/jsx-runtime");
+var ToastContext = import_react39.default.createContext(null);
 var useToast = () => {
-  const ctx = import_react38.default.useContext(ToastContext);
+  const ctx = import_react39.default.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used within ToastProvider");
   return ctx;
 };
 var EXIT_DURATION = 300;
 var ToastItemComponent = ({ item, isExiting, onClose }) => {
-  const ref = import_react38.default.useRef(null);
-  const [height, setHeight] = import_react38.default.useState(void 0);
-  import_react38.default.useEffect(() => {
+  const ref = import_react39.default.useRef(null);
+  const [height, setHeight] = import_react39.default.useState(void 0);
+  import_react39.default.useEffect(() => {
     if (ref.current && !isExiting) {
       setHeight(ref.current.offsetHeight);
     }
   }, [isExiting]);
-  return /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
     "div",
     {
       className: clsx_default("lib-xplat-toast-wrapper", { exit: isExiting }),
@@ -33282,15 +33544,15 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
         maxHeight: isExiting ? 0 : height ?? "none",
         marginBottom: isExiting ? 0 : void 0
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime344.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime345.jsxs)(
         "div",
         {
           ref,
           className: clsx_default("lib-xplat-toast", item.type, { exit: isExiting }),
           role: "alert",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("span", { className: "message", children: item.message }),
-            /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+            /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("span", { className: "message", children: item.message }),
+            /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
           ]
         }
       )
@@ -33301,13 +33563,13 @@ var ToastProvider = ({
   children,
   position = "top-right"
 }) => {
-  const [toasts, setToasts] = import_react38.default.useState([]);
-  const [removing, setRemoving] = import_react38.default.useState(/* @__PURE__ */ new Set());
-  const [mounted, setMounted] = import_react38.default.useState(false);
-  import_react38.default.useEffect(() => {
+  const [toasts, setToasts] = import_react39.default.useState([]);
+  const [removing, setRemoving] = import_react39.default.useState(/* @__PURE__ */ new Set());
+  const [mounted, setMounted] = import_react39.default.useState(false);
+  import_react39.default.useEffect(() => {
     setMounted(true);
   }, []);
-  const remove = import_react38.default.useCallback((id) => {
+  const remove = import_react39.default.useCallback((id) => {
     setRemoving((prev) => new Set(prev).add(id));
     setTimeout(() => {
       setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -33318,7 +33580,7 @@ var ToastProvider = ({
       });
     }, EXIT_DURATION);
   }, []);
-  const toast = import_react38.default.useCallback(
+  const toast = import_react39.default.useCallback(
     (type, message2, duration = 3e3) => {
       const id = `${Date.now()}-${Math.random()}`;
       setToasts((prev) => [...prev, { id, type, message: message2 }]);
@@ -33328,10 +33590,10 @@ var ToastProvider = ({
     },
     [remove]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime344.jsxs)(ToastContext.Provider, { value: { toast }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime345.jsxs)(ToastContext.Provider, { value: { toast }, children: [
     children,
     mounted && (0, import_react_dom6.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime344.jsx)("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
         ToastItemComponent,
         {
           item: t,
@@ -33347,8 +33609,8 @@ var ToastProvider = ({
 ToastProvider.displayName = "ToastProvider";
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react39 = __toESM(require("react"), 1);
-var import_jsx_runtime345 = require("react/jsx-runtime");
+var import_react40 = __toESM(require("react"), 1);
+var import_jsx_runtime346 = require("react/jsx-runtime");
 var Tooltip2 = (props) => {
   const {
     type = "primary",
@@ -33356,20 +33618,20 @@ var Tooltip2 = (props) => {
     description,
     children
   } = props;
-  const iconRef = import_react39.default.useRef(null);
+  const iconRef = import_react40.default.useRef(null);
   const colorClass = color2;
-  return /* @__PURE__ */ (0, import_jsx_runtime345.jsxs)("div", { className: "lib-xplat-tooltip", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
-    /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("div", { className: clsx_default("tooltip-wrapper", colorClass, type), children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)("div", { className: "lib-xplat-tooltip", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
+    /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("div", { className: clsx_default("tooltip-wrapper", colorClass, type), children: description })
   ] });
 };
 Tooltip2.displayName = "Tooltip";
 var Tooltip_default = Tooltip2;
 
 // src/components/Video/Video.tsx
-var import_react40 = __toESM(require("react"), 1);
-var import_jsx_runtime346 = require("react/jsx-runtime");
-var Video = import_react40.default.forwardRef((props, ref) => {
+var import_react41 = __toESM(require("react"), 1);
+var import_jsx_runtime347 = require("react/jsx-runtime");
+var Video = import_react41.default.forwardRef((props, ref) => {
   const {
     src,
     poster,
@@ -33383,10 +33645,10 @@ var Video = import_react40.default.forwardRef((props, ref) => {
     onPause,
     ...rest
   } = props;
-  const videoRef = import_react40.default.useRef(null);
-  const [isPlaying, setIsPlaying] = import_react40.default.useState(Boolean(autoPlay));
-  const [isLoaded, setIsLoaded] = import_react40.default.useState(false);
-  const setRefs = import_react40.default.useCallback(
+  const videoRef = import_react41.default.useRef(null);
+  const [isPlaying, setIsPlaying] = import_react41.default.useState(Boolean(autoPlay));
+  const [isLoaded, setIsLoaded] = import_react41.default.useState(false);
+  const setRefs = import_react41.default.useCallback(
     (el) => {
       videoRef.current = el;
       if (typeof ref === "function") ref(el);
@@ -33414,7 +33676,7 @@ var Video = import_react40.default.forwardRef((props, ref) => {
     }
   };
   const showCustomOverlay = !controls;
-  return /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(
     "div",
     {
       className: clsx_default(
@@ -33423,7 +33685,7 @@ var Video = import_react40.default.forwardRef((props, ref) => {
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
           "video",
           {
             ref: setRefs,
@@ -33440,7 +33702,7 @@ var Video = import_react40.default.forwardRef((props, ref) => {
             ...rest
           }
         ),
-        showCustomOverlay && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+        showCustomOverlay && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
           "button",
           {
             type: "button",
@@ -33451,7 +33713,7 @@ var Video = import_react40.default.forwardRef((props, ref) => {
             ),
             onClick: togglePlay,
             "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-            children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("span", { className: "play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(PlayCircleIcon_default, {}) })
+            children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("span", { className: "play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(PlayCircleIcon_default, {}) })
           }
         )
       ]
@@ -33462,25 +33724,25 @@ Video.displayName = "Video";
 var Video_default = Video;
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
-var import_jsx_runtime347 = require("react/jsx-runtime");
+var import_jsx_runtime348 = require("react/jsx-runtime");
 var FullGrid = (props) => {
   const { children, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("div", { className: clsx_default("lib-xplat-full-grid", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("div", { className: clsx_default("lib-xplat-full-grid", className), children });
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
-var import_jsx_runtime348 = require("react/jsx-runtime");
+var import_jsx_runtime349 = require("react/jsx-runtime");
 var FullScreen = (props) => {
   const { children, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("div", { className: clsx_default("lib-xplat-full-screen", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime349.jsx)("div", { className: clsx_default("lib-xplat-full-screen", className), children });
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;
 
 // src/layout/Grid/Item/Item.tsx
-var import_jsx_runtime349 = require("react/jsx-runtime");
+var import_jsx_runtime350 = require("react/jsx-runtime");
 var calculateSpans = (column) => {
   const spans = {};
   let inherited = column.default;
@@ -33497,35 +33759,35 @@ var GridItem = ({ column, children, className }) => {
   Object.entries(spans).forEach(([key, value]) => {
     style[`--column-${key}`] = value;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime349.jsx)("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime350.jsx)("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
 };
 GridItem.displayName = "GridItem";
 var Item_default = GridItem;
 
 // src/layout/Header/Header.tsx
-var import_jsx_runtime350 = require("react/jsx-runtime");
+var import_jsx_runtime351 = require("react/jsx-runtime");
 var Header = ({
   logo,
   centerContent,
   rightContent
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime350.jsxs)("div", { className: "lib-xplat-layout-header", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime350.jsx)("div", { children: logo }),
-    /* @__PURE__ */ (0, import_jsx_runtime350.jsx)("div", { children: centerContent }),
-    /* @__PURE__ */ (0, import_jsx_runtime350.jsx)("div", { children: rightContent })
+  return /* @__PURE__ */ (0, import_jsx_runtime351.jsxs)("div", { className: "lib-xplat-layout-header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("div", { children: logo }),
+    /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("div", { children: centerContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("div", { children: rightContent })
   ] });
 };
 Header.displayName = "Header";
 var Header_default = Header;
 
 // src/layout/Layout/Layout.tsx
-var import_jsx_runtime351 = require("react/jsx-runtime");
+var import_jsx_runtime352 = require("react/jsx-runtime");
 var Layout = (props) => {
   const { header, sideBar, children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ (0, import_jsx_runtime351.jsxs)("div", { className: "lib-xplat-layout-content-wrapper", children: [
-    sideBar && /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(import_jsx_runtime351.Fragment, { children: sideBar }),
-    /* @__PURE__ */ (0, import_jsx_runtime351.jsxs)("div", { className: "lib-xplat-layout-content", children: [
-      header && /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("div", { className: "lib-xplat-layout-conent-header", children: header }),
+  return /* @__PURE__ */ (0, import_jsx_runtime352.jsx)("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ (0, import_jsx_runtime352.jsxs)("div", { className: "lib-xplat-layout-content-wrapper", children: [
+    sideBar && /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(import_jsx_runtime352.Fragment, { children: sideBar }),
+    /* @__PURE__ */ (0, import_jsx_runtime352.jsxs)("div", { className: "lib-xplat-layout-content", children: [
+      header && /* @__PURE__ */ (0, import_jsx_runtime352.jsx)("div", { className: "lib-xplat-layout-conent-header", children: header }),
       children
     ] })
   ] }) });
@@ -33534,31 +33796,31 @@ Layout.displayName = "Layout";
 var Layout_default = Layout;
 
 // src/layout/SideBar/SideBar.tsx
-var import_react42 = __toESM(require("react"), 1);
+var import_react43 = __toESM(require("react"), 1);
 
 // src/layout/SideBar/SideBarContext.tsx
-var import_react41 = __toESM(require("react"), 1);
-var SideBarContext = import_react41.default.createContext(null);
+var import_react42 = __toESM(require("react"), 1);
+var SideBarContext = import_react42.default.createContext(null);
 var useSideBarContext = () => {
-  const ctx = import_react41.default.useContext(SideBarContext);
+  const ctx = import_react42.default.useContext(SideBarContext);
   if (!ctx) throw new Error("Error");
   return ctx;
 };
 var SideBarContext_default = SideBarContext;
 
 // src/layout/SideBar/SideBar.tsx
-var import_jsx_runtime352 = require("react/jsx-runtime");
+var import_jsx_runtime353 = require("react/jsx-runtime");
 var SideBar = (props) => {
   const { children, className } = props;
-  const [isOpen, setIsOpen] = import_react42.default.useState(true);
+  const [isOpen, setIsOpen] = import_react43.default.useState(true);
   const handleSwitchSideBar = () => {
     setIsOpen((prev) => !prev);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime353.jsx)(
     SideBarContext_default.Provider,
     {
       value: { isSidebarOpen: isOpen, handleSwitchSideBar },
-      children: /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime353.jsx)(
         "div",
         {
           className: clsx_default(
@@ -33861,6 +34123,7 @@ var SideBar_default = SideBar;
   SunIcon,
   SunriseIcon,
   SunsetIcon,
+  Swiper,
   Switch,
   Tab,
   Table,