@x-plat/design-system 0.1.1

package/dist/components/Swiper/index.cjs

@@ -0,0 +1,144 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Swiper/index.tsx
+var Swiper_exports = {};
+__export(Swiper_exports, {
+  default: () => Swiper_default
+});
+module.exports = __toCommonJS(Swiper_exports);
+var import_react = require("react");
+var import_modules = require("swiper/modules");
+var import_react2 = require("swiper/react");
+var import_css = require("swiper/css");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SwiperContentComponent = ({
+  auto = false,
+  swiperRef = null,
+  renderItems,
+  viewItemCount = 3,
+  maxItems,
+  freeMode = false,
+  options,
+  loop = false,
+  spaceBetween = 50,
+  centeredSlides = false,
+  loopSlides = 0,
+  isProgress = true,
+  totalItemCount = 3,
+  showAutoplayProgress = false,
+  autoplayDelay = 3e3
+}) => {
+  const progressRef = (0, import_react.useRef)(null);
+  const [isAnimating, setIsAnimating] = (0, import_react.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react.useState)(1);
+  const [_width, setWidth] = (0, import_react.useState)(0);
+  const setSwiperInstance = (0, import_react.useCallback)(
+    (swiper) => {
+      if (swiperRef) swiperRef.current = swiper;
+    },
+    [swiperRef]
+  );
+  const onChangeCurrentSlide = (swiper) => {
+    const activeIndex2 = swiper.realIndex;
+    if (activeIndex2 > 2) {
+      const setIdx = activeIndex2 % totalItemCount;
+      setActiveIndex(setIdx);
+    } else {
+      setActiveIndex(activeIndex2);
+    }
+    if (showAutoplayProgress) {
+      setIsAnimating(false);
+      requestAnimationFrame(() => {
+        setIsAnimating(true);
+      });
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    if (progressRef.current) {
+      const updateWidth = () => {
+        const width = progressRef.current?.getBoundingClientRect().width || 420;
+        setWidth(width);
+      };
+      updateWidth();
+      window.addEventListener("resize", updateWidth);
+      return () => {
+        window.removeEventListener("resize", updateWidth);
+      };
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react2.Swiper,
+      {
+        className: "w-full overflow-hidden text-[0px] !mr-0",
+        wrapperTag: "ul",
+        loop,
+        freeMode: { enabled: freeMode },
+        modules: auto ? [import_modules.Autoplay, import_modules.FreeMode, import_modules.Pagination] : [import_modules.FreeMode],
+        slidesPerView: viewItemCount,
+        spaceBetween,
+        onSlideChange: onChangeCurrentSlide,
+        onSwiper: setSwiperInstance,
+        autoplay: {
+          disableOnInteraction: false,
+          delay: autoplayDelay
+        },
+        speed: 500,
+        centeredSlides,
+        loopAdditionalSlides: loopSlides,
+        ...options,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative", children: renderItems && renderItems.map((item, idx) => {
+          if (maxItems && idx < maxItems) {
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_react2.SwiperSlide,
+              {
+                className: "w-auto h-auto flex items-center [transition-timing-function:linear]",
+                tag: "li",
+                children: item
+              },
+              idx
+            );
+          }
+          if (!maxItems) {
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_react2.SwiperSlide,
+              {
+                className: "w-auto h-auto flex items-center [transition-timing-function:linear]",
+                tag: "li",
+                children: item
+              },
+              idx
+            );
+          }
+        }) })
+      }
+    ),
+    (isProgress || showAutoplayProgress) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-6 md:mt-10 flex justify-center w-full px-9 md:px-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-[90%] md:w-[580px] h-[2px] bg-[#f5f5f5] relative", children: auto && showAutoplayProgress && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: `absolute inset-y-0 left-0 h-full bg-[#10b259] w-0 ${isAnimating ? "animate-fillBar" : ""}`,
+        style: { animationDuration: `${autoplayDelay}ms` }
+      },
+      activeIndex
+    ) }) })
+  ] });
+};
+SwiperContentComponent.displayName = "Swiper";
+var Swiper_default = SwiperContentComponent;

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

@@ -0,0 +1,24 @@
+import React, { MutableRefObject, ReactNode } from 'react';
+import { SwiperClass } from 'swiper/react';
+import { SwiperOptions } from 'swiper/types';
+
+interface SwiperComponentProps {
+    auto?: boolean;
+    swiperRef?: MutableRefObject<SwiperClass | null>;
+    renderItems?: Array<ReactNode>;
+    viewItemCount?: number | "auto";
+    maxItems?: number;
+    freeMode?: boolean;
+    options?: SwiperOptions;
+    loop?: boolean;
+    spaceBetween?: number;
+    centeredSlides?: boolean;
+    loopSlides?: number;
+    isProgress?: boolean;
+    totalItemCount?: number;
+    showAutoplayProgress?: boolean;
+    autoplayDelay?: number;
+}
+declare const SwiperContentComponent: React.FC<SwiperComponentProps>;
+
+export { SwiperContentComponent as default };

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

@@ -0,0 +1,24 @@
+import React, { MutableRefObject, ReactNode } from 'react';
+import { SwiperClass } from 'swiper/react';
+import { SwiperOptions } from 'swiper/types';
+
+interface SwiperComponentProps {
+    auto?: boolean;
+    swiperRef?: MutableRefObject<SwiperClass | null>;
+    renderItems?: Array<ReactNode>;
+    viewItemCount?: number | "auto";
+    maxItems?: number;
+    freeMode?: boolean;
+    options?: SwiperOptions;
+    loop?: boolean;
+    spaceBetween?: number;
+    centeredSlides?: boolean;
+    loopSlides?: number;
+    isProgress?: boolean;
+    totalItemCount?: number;
+    showAutoplayProgress?: boolean;
+    autoplayDelay?: number;
+}
+declare const SwiperContentComponent: React.FC<SwiperComponentProps>;
+
+export { SwiperContentComponent as default };

package/dist/components/Swiper/index.js

@@ -0,0 +1,128 @@
+// src/components/Swiper/index.tsx
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { Autoplay, FreeMode, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SwiperContentComponent = ({
+  auto = false,
+  swiperRef = null,
+  renderItems,
+  viewItemCount = 3,
+  maxItems,
+  freeMode = false,
+  options,
+  loop = false,
+  spaceBetween = 50,
+  centeredSlides = false,
+  loopSlides = 0,
+  isProgress = true,
+  totalItemCount = 3,
+  showAutoplayProgress = false,
+  autoplayDelay = 3e3
+}) => {
+  const progressRef = useRef(null);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(1);
+  const [_width, setWidth] = useState(0);
+  const setSwiperInstance = useCallback(
+    (swiper) => {
+      if (swiperRef) swiperRef.current = swiper;
+    },
+    [swiperRef]
+  );
+  const onChangeCurrentSlide = (swiper) => {
+    const activeIndex2 = swiper.realIndex;
+    if (activeIndex2 > 2) {
+      const setIdx = activeIndex2 % totalItemCount;
+      setActiveIndex(setIdx);
+    } else {
+      setActiveIndex(activeIndex2);
+    }
+    if (showAutoplayProgress) {
+      setIsAnimating(false);
+      requestAnimationFrame(() => {
+        setIsAnimating(true);
+      });
+    }
+  };
+  useEffect(() => {
+    if (progressRef.current) {
+      const updateWidth = () => {
+        const width = progressRef.current?.getBoundingClientRect().width || 420;
+        setWidth(width);
+      };
+      updateWidth();
+      window.addEventListener("resize", updateWidth);
+      return () => {
+        window.removeEventListener("resize", updateWidth);
+      };
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsx(
+      Swiper,
+      {
+        className: "w-full overflow-hidden text-[0px] !mr-0",
+        wrapperTag: "ul",
+        loop,
+        freeMode: { enabled: freeMode },
+        modules: auto ? [Autoplay, FreeMode, Pagination] : [FreeMode],
+        slidesPerView: viewItemCount,
+        spaceBetween,
+        onSlideChange: onChangeCurrentSlide,
+        onSwiper: setSwiperInstance,
+        autoplay: {
+          disableOnInteraction: false,
+          delay: autoplayDelay
+        },
+        speed: 500,
+        centeredSlides,
+        loopAdditionalSlides: loopSlides,
+        ...options,
+        children: /* @__PURE__ */ jsx("div", { className: "relative", children: renderItems && renderItems.map((item, idx) => {
+          if (maxItems && idx < maxItems) {
+            return /* @__PURE__ */ jsx(
+              SwiperSlide,
+              {
+                className: "w-auto h-auto flex items-center [transition-timing-function:linear]",
+                tag: "li",
+                children: item
+              },
+              idx
+            );
+          }
+          if (!maxItems) {
+            return /* @__PURE__ */ jsx(
+              SwiperSlide,
+              {
+                className: "w-auto h-auto flex items-center [transition-timing-function:linear]",
+                tag: "li",
+                children: item
+              },
+              idx
+            );
+          }
+        }) })
+      }
+    ),
+    (isProgress || showAutoplayProgress) && /* @__PURE__ */ jsx("div", { className: "mt-6 md:mt-10 flex justify-center w-full px-9 md:px-0", children: /* @__PURE__ */ jsx("div", { className: "w-[90%] md:w-[580px] h-[2px] bg-[#f5f5f5] relative", children: auto && showAutoplayProgress && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `absolute inset-y-0 left-0 h-full bg-[#10b259] w-0 ${isAnimating ? "animate-fillBar" : ""}`,
+        style: { animationDuration: `${autoplayDelay}ms` }
+      },
+      activeIndex
+    ) }) })
+  ] });
+};
+SwiperContentComponent.displayName = "Swiper";
+var Swiper_default = SwiperContentComponent;
+export {
+  Swiper_default as default
+};

package/dist/components/Switch/index.cjs

@@ -0,0 +1,240 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Switch/index.ts
+var Switch_exports = {};
+__export(Switch_exports, {
+  Switch: () => Switch_default
+});
+module.exports = __toCommonJS(Switch_exports);
+
+// src/components/Switch/Switch.tsx
+var import_react = __toESM(require("react"), 1);
+
+// src/tokens/colors.ts
+var colors = {
+  xplat: {
+    red: {
+      50: "#FFF0F0",
+      100: "#FFDDDE",
+      200: "#FFC1C2",
+      300: "#FF9698",
+      400: "#FF5A5D",
+      500: "#FF272B",
+      600: "#F80409",
+      700: "#D40105",
+      800: "#AE0609",
+      900: "#900C0F"
+    },
+    green: {
+      50: "#E5F6EA",
+      100: "#C1E7CC",
+      200: "#98D8AC",
+      300: "#6CCA8B",
+      400: "#47BE72",
+      500: "#10B259",
+      600: "#00A34F",
+      700: "#009143",
+      800: "#007F38",
+      900: "#006024"
+    },
+    orange: {
+      50: "#FFF8EC",
+      100: "#FFF0D3",
+      200: "#FFDDA5",
+      300: "#FFC46D",
+      400: "#FF9F32",
+      500: "#FF820A",
+      600: "#FF6900",
+      700: "#CC4B02",
+      800: "#A13A0B",
+      900: "#82320C"
+    },
+    yellow: {
+      50: "#FFFDE7",
+      100: "#FFFAC1",
+      200: "#FFF186",
+      300: "#FFE041",
+      400: "#FFCC0D",
+      500: "#F0B100",
+      600: "#D18800",
+      700: "#A66002",
+      800: "#894B0A",
+      900: "#743D0F"
+    },
+    blue: {
+      50: "#F1F4FD",
+      100: "#DFE7FA",
+      200: "#C5D4F8",
+      300: "#9EB8F2",
+      400: "#7093EA",
+      500: "#4D6DE3",
+      600: "#3950D7",
+      700: "#303EC5",
+      800: "#2D35A0",
+      900: "#29317F"
+    },
+    lightblue: {
+      50: "#EEFAFF",
+      100: "#D9F4FF",
+      200: "#BBEDFF",
+      300: "#8DE3FF",
+      400: "#57D0FF",
+      500: "#30B6FF",
+      600: "#1999F7",
+      700: "#1280E3",
+      800: "#1566B8",
+      900: "#175791"
+    },
+    purple: {
+      50: "#FBF6FE",
+      100: "#F5EAFD",
+      200: "#EDD8FC",
+      300: "#E0BAF8",
+      400: "#CD8DF3",
+      500: "#B961EB",
+      600: "#A541DC",
+      700: "#9230C5",
+      800: "#782B9E",
+      900: "#62247F"
+    },
+    pink: {
+      50: "#FFF4FE",
+      100: "#FFE7FD",
+      200: "#FFCFFA",
+      300: "#FEA9F1",
+      400: "#FD75E7",
+      500: "#F553DA",
+      600: "#D821B6",
+      700: "#B31892",
+      800: "#921676",
+      900: "#781761"
+    },
+    neutral: {
+      50: "#FAFAFA",
+      100: "#F5F5F5",
+      200: "#E5E5E5",
+      300: "#D4D4D4",
+      400: "#A1A1A1",
+      500: "#737373",
+      600: "#525252",
+      700: "#404040",
+      800: "#262626",
+      900: "#171717"
+    },
+    black: "#000000",
+    white: "#FFFFFF"
+  },
+  test: {
+    default: "#ffffff"
+  }
+};
+
+// src/util/getColor.ts
+var getColorClass = (namespace, palette, shade) => {
+  const namespaceMap = colors[namespace];
+  const paletteMap = namespaceMap[palette];
+  const hasShade = paletteMap && typeof paletteMap === "object" && shade !== void 0 && shade in paletteMap;
+  return `${String(namespace)}-${String(palette)}${hasShade ? `-${String(shade)}` : ""}`;
+};
+
+// node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/components/Switch/Switch.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var KNOB_TRANSITION_MS = 250;
+var Switch = (props) => {
+  const {
+    value,
+    disabled,
+    onChange,
+    colorNamespace = "xplat",
+    color = "blue",
+    colorDepth,
+    className
+  } = props;
+  const [isAnimating, setIsAnimating] = import_react.default.useState(false);
+  const timeoutRef = import_react.default.useRef(null);
+  import_react.default.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  const handleClick = () => {
+    if (disabled || isAnimating) return;
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setIsAnimating(true);
+    onChange?.(!value);
+    timeoutRef.current = setTimeout(() => {
+      setIsAnimating(false);
+      timeoutRef.current = null;
+    }, KNOB_TRANSITION_MS);
+  };
+  const colorClass = getColorClass(
+    colorNamespace,
+    color,
+    colorDepth ?? 500
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: clsx_default(
+        "lib-xplat-switch",
+        value ? "checked" : void 0,
+        disabled && "disabled",
+        isAnimating && "animating",
+        colorClass,
+        className
+      ),
+      onClick: handleClick,
+      "aria-disabled": disabled || isAnimating,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("knob", value ? "checked" : void 0) })
+    }
+  );
+};
+Switch.displayName = "Switch";
+var Switch_default = Switch;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Switch
+});