@hanwenbo/x-taro-ui 0.0.1

package/lib/components/swiper/swiper.js

@@ -0,0 +1,336 @@
+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/swiper/swiper.tsx
+var swiper_exports = {};
+__export(swiper_exports, {
+  Swiper: () => Swiper,
+  SwiperItem: () => SwiperItem,
+  default: () => swiper_default
+});
+module.exports = __toCommonJS(swiper_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_utils = require("../../utils");
+var import_theme = require("../../theme");
+var import_configProvider = require("../configProvider");
+function normalizeLength(items, children) {
+  return items.length > 0 ? items.length : import_react.default.Children.count(children);
+}
+function clampIndex(index, total) {
+  if (total <= 0) return 0;
+  return Math.max(0, Math.min(index, total - 1));
+}
+function toLength(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+var Swiper = import_react.default.forwardRef((props, ref) => {
+  const {
+    width = "100%",
+    height = 200,
+    defaultIndex,
+    defaultCurrent = 0,
+    allowTouchMove = true,
+    autoplay = false,
+    autoplayInterval,
+    interval = 3e3,
+    loop,
+    circular,
+    direction,
+    vertical = false,
+    onIndexChange,
+    onChange,
+    indicator,
+    showIndicator,
+    showIndicators,
+    indicatorClassName,
+    indicatorPosition = "bottom",
+    children,
+    items = [],
+    current,
+    className,
+    style,
+    testID,
+    onTouchStart,
+    onTouchEnd,
+    onTouchCancel,
+    onAnimationFinish,
+    duration,
+    easingFunction,
+    ...nativeProps
+  } = props;
+  const config = (0, import_configProvider.useConfig)();
+  const { colors, spacing, motion } = (0, import_theme.useTokens)();
+  const resolvedDirection = direction ?? (vertical ? "vertical" : "horizontal");
+  const resolvedLoop = loop ?? circular ?? true;
+  const resolvedInterval = autoplayInterval ?? interval;
+  const resolvedDefaultIndex = defaultIndex ?? defaultCurrent;
+  const resolvedShowIndicator = showIndicator ?? showIndicators ?? true;
+  const resolvedDuration = duration ?? motion.durationsMs.overlayDefault;
+  const resolvedEasingFunction = easingFunction ?? "easeOutCubic";
+  const nativeEasingProps = process.env.TARO_ENV === "h5" ? {} : { easingFunction: resolvedEasingFunction };
+  const childrenArray = import_react.default.Children.toArray(children);
+  const total = normalizeLength(items, children);
+  const [innerCurrent, setInnerCurrent] = (0, import_react.useState)(() => clampIndex(resolvedDefaultIndex, total));
+  const [isDragging, setIsDragging] = (0, import_react.useState)(false);
+  const isControlled = current !== void 0;
+  const currentIndex = clampIndex(current ?? innerCurrent, total);
+  const lastNotifiedIndexRef = (0, import_react.useRef)();
+  (0, import_react.useEffect)(() => {
+    setInnerCurrent((previous) => clampIndex(previous, total));
+  }, [total]);
+  (0, import_react.useEffect)(() => {
+    if (lastNotifiedIndexRef.current === currentIndex) return;
+    lastNotifiedIndexRef.current = currentIndex;
+    onIndexChange == null ? void 0 : onIndexChange(currentIndex);
+  }, [currentIndex, onIndexChange]);
+  (0, import_react.useImperativeHandle)(
+    ref,
+    () => ({
+      swipeTo: (index) => {
+        if (index < 0 || index >= total || isControlled) return;
+        setInnerCurrent(index);
+      },
+      next: () => {
+        if (isControlled) return;
+        setInnerCurrent((previous) => {
+          if (total <= 0) return 0;
+          if (previous < total - 1) return previous + 1;
+          return resolvedLoop ? 0 : previous;
+        });
+      },
+      prev: () => {
+        if (isControlled) return;
+        setInnerCurrent((previous) => {
+          if (total <= 0) return 0;
+          if (previous > 0) return previous - 1;
+          return resolvedLoop ? total - 1 : previous;
+        });
+      }
+    }),
+    [isControlled, resolvedLoop, total]
+  );
+  const slides = (0, import_react.useMemo)(() => {
+    if (items.length > 0) {
+      return items.map((item) => /* @__PURE__ */ import_react.default.createElement(import_components.SwiperItem, { key: item.key, "data-slot": "swiper-slide" }, /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          style: {
+            boxSizing: "border-box",
+            display: "flex",
+            height: "100%",
+            flexDirection: "column",
+            justifyContent: "center",
+            gap: spacing["1"],
+            padding: spacing["4"],
+            color: colors["primary-foreground"],
+            backgroundColor: item.backgroundColor
+          }
+        },
+        item.title !== void 0 && item.title !== null ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.Text,
+          {
+            "data-slot": "swiper-item-title",
+            style: {
+              display: "block",
+              color: "inherit",
+              fontSize: 18,
+              fontWeight: "600"
+            }
+          },
+          item.title
+        ) : null,
+        item.description !== void 0 && item.description !== null ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.Text,
+          {
+            "data-slot": "swiper-item-description",
+            style: { display: "block", color: "inherit", fontSize: 14 }
+          },
+          item.description
+        ) : null,
+        item.content
+      )));
+    }
+    return childrenArray.map((child, index) => /* @__PURE__ */ import_react.default.createElement(import_components.SwiperItem, { key: child.key ?? index, "data-slot": "swiper-slide" }, child));
+  }, [childrenArray, colors, items, spacing]);
+  const handleChange = (event) => {
+    const nextIndex = clampIndex(event.detail.current, total);
+    if (!isControlled) {
+      setInnerCurrent(nextIndex);
+    } else if (lastNotifiedIndexRef.current !== nextIndex) {
+      lastNotifiedIndexRef.current = nextIndex;
+      onIndexChange == null ? void 0 : onIndexChange(nextIndex);
+    }
+    onChange == null ? void 0 : onChange(nextIndex);
+  };
+  const handleTouchStart = (event) => {
+    if (allowTouchMove) setIsDragging(true);
+    onTouchStart == null ? void 0 : onTouchStart(event);
+  };
+  const finishDragging = () => setIsDragging(false);
+  const handleTouchEnd = (event) => {
+    finishDragging();
+    onTouchEnd == null ? void 0 : onTouchEnd(event);
+  };
+  const handleTouchCancel = (event) => {
+    finishDragging();
+    onTouchCancel == null ? void 0 : onTouchCancel(event);
+  };
+  const handleAnimationFinish = (event) => {
+    finishDragging();
+    onAnimationFinish == null ? void 0 : onAnimationFinish(event);
+  };
+  const indicatorStyle = {
+    position: "absolute",
+    zIndex: 1,
+    display: "flex",
+    flexDirection: resolvedDirection === "horizontal" ? "row" : "column",
+    gap: spacing["2"],
+    pointerEvents: "none",
+    ...indicatorPosition === "top" && {
+      top: spacing["3"],
+      left: "50%",
+      transform: "translateX(-50%)"
+    },
+    ...indicatorPosition === "bottom" && {
+      bottom: spacing["3"],
+      left: "50%",
+      transform: "translateX(-50%)"
+    },
+    ...indicatorPosition === "left" && {
+      left: spacing["3"],
+      top: "50%",
+      transform: "translateY(-50%)"
+    },
+    ...indicatorPosition === "right" && {
+      right: spacing["3"],
+      top: "50%",
+      transform: "translateY(-50%)"
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      "data-slot": "swiper-root",
+      "data-current": currentIndex,
+      "data-total": total,
+      "data-direction": resolvedDirection,
+      "data-loop": resolvedLoop ? "true" : "false",
+      "data-dragging": isDragging ? "true" : "false",
+      "data-autoplay": autoplay ? "true" : "false",
+      "data-allow-touch-move": allowTouchMove ? "true" : "false",
+      "data-testid": testID,
+      className: (0, import_utils.classNames)(`${config.prefixCls}-swiper`, className),
+      style: {
+        boxSizing: "border-box",
+        width: toLength(width),
+        height: toLength(height),
+        position: "relative",
+        overflow: "hidden",
+        backgroundColor: colors.background,
+        ...style
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.Swiper,
+      {
+        ...nativeProps,
+        "data-slot": "swiper-native",
+        current: currentIndex,
+        autoplay: autoplay && !isDragging && total > 1,
+        interval: resolvedInterval,
+        duration: resolvedDuration,
+        ...nativeEasingProps,
+        circular: resolvedLoop,
+        vertical: resolvedDirection === "vertical",
+        disableTouch: !allowTouchMove,
+        indicatorDots: false,
+        onChange: handleChange,
+        onTouchStart: handleTouchStart,
+        onTouchEnd: handleTouchEnd,
+        onTouchCancel: handleTouchCancel,
+        onAnimationFinish: handleAnimationFinish,
+        style: { width: "100%", height: "100%" }
+      },
+      slides
+    ),
+    resolvedShowIndicator && total > 1 ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "swiper-indicator",
+        className: (0, import_utils.classNames)(`${config.prefixCls}-swiper__indicator`, indicatorClassName),
+        style: indicatorStyle
+      },
+      indicator ? indicator(total, currentIndex) : Array.from({ length: total }, (_, index) => {
+        const active = index === currentIndex;
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            key: index,
+            "data-slot": "swiper-indicator-dot",
+            "data-active": active ? "true" : "false",
+            className: (0, import_utils.classNames)(
+              `${config.prefixCls}-swiper__indicator-dot`,
+              active && `${config.prefixCls}-swiper__indicator-dot--active`
+            ),
+            style: {
+              boxSizing: "border-box",
+              width: resolvedDirection === "horizontal" && active ? 16 : 8,
+              height: resolvedDirection === "vertical" && active ? 16 : 8,
+              borderRadius: 9999,
+              border: active ? "none" : `1px solid ${colors.border}`,
+              backgroundColor: active ? colors.primary : colors["muted-foreground"],
+              transition: `width ${motion.durationsMs.standard}ms ${motion.easing.decelerate}, height ${motion.durationsMs.standard}ms ${motion.easing.decelerate}, background-color ${motion.durationsMs.standard}ms ${motion.easing.standard}`
+            }
+          }
+        );
+      })
+    ) : null
+  );
+});
+Swiper.displayName = "Swiper";
+var SwiperItem = ({ children, className, style, testID }) => {
+  const config = (0, import_configProvider.useConfig)();
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      "data-slot": "swiper-item-content",
+      "data-testid": testID,
+      className: (0, import_utils.classNames)(`${config.prefixCls}-swiper-item`, className),
+      style: { boxSizing: "border-box", width: "100%", height: "100%", ...style }
+    },
+    children
+  );
+};
+SwiperItem.displayName = "SwiperItem";
+var swiper_default = Swiper;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Swiper,
+  SwiperItem
+});

package/lib/components/swiper/types.d.ts

@@ -0,0 +1,51 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { SwiperProps as TaroSwiperProps } from '@tarojs/components/types/Swiper';
+declare type NativeSwiperProps = Omit<TaroSwiperProps, 'children' | 'className' | 'style' | 'current' | 'autoplay' | 'interval' | 'circular' | 'vertical' | 'disableTouch' | 'indicatorDots' | 'onChange'>;
+export interface SwiperItemData {
+    key: string;
+    content?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    backgroundColor?: string;
+}
+export interface SwiperRef {
+    swipeTo: (index: number) => void;
+    next: () => void;
+    prev: () => void;
+}
+export interface SwiperItemProps {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    testID?: string;
+}
+export interface SwiperProps extends NativeSwiperProps {
+    width?: number | string;
+    height?: number | string;
+    defaultIndex?: number;
+    allowTouchMove?: boolean;
+    autoplay?: boolean;
+    autoplayInterval?: number;
+    loop?: boolean;
+    direction?: 'horizontal' | 'vertical';
+    onIndexChange?: (index: number) => void;
+    indicator?: (total: number, current: number) => ReactNode;
+    showIndicator?: boolean;
+    indicatorClassName?: string;
+    indicatorPosition?: 'top' | 'bottom' | 'left' | 'right';
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    testID?: string;
+    /** Backward-compatible aliases used by the first Taro demo. */
+    items?: SwiperItemData[];
+    current?: number;
+    defaultCurrent?: number;
+    interval?: number;
+    circular?: boolean;
+    vertical?: boolean;
+    showIndicators?: boolean;
+    onChange?: (current: number) => void;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/lib/components/swiper/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/components/switch/index.d.ts

@@ -0,0 +1,5 @@
+export { Switch } from './switch';
+export type { SwitchProps, SwitchRef, SwitchVariant } from './types';
+export { useSwitchTokens, useSwitchColors } from './tokens';
+export { default } from './switch';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/switch/index.js

@@ -0,0 +1,46 @@
+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 index_exports = {};
+__export(index_exports, {
+  Switch: () => import_switch.Switch,
+  default: () => import_switch2.default,
+  useSwitchColors: () => import_tokens.useSwitchColors,
+  useSwitchTokens: () => import_tokens.useSwitchTokens
+});
+module.exports = __toCommonJS(index_exports);
+var import_switch = require("./switch");
+var import_tokens = require("./tokens");
+var import_switch2 = __toESM(require("./switch"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Switch,
+  useSwitchColors,
+  useSwitchTokens
+});

package/lib/components/switch/style.css

@@ -0,0 +1,10 @@
+@keyframes x-switch-thumb-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}

package/lib/components/switch/switch.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Switch Component
+ * With variant/size support
+ */
+import React from 'react';
+import type { SwitchProps, SwitchRef } from './types';
+import './style.css';
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<SwitchRef>>;
+export default Switch;
+//# sourceMappingURL=switch.d.ts.map