sard 1.0.0-canary.0

package/dist/style/variables.scss

@@ -0,0 +1,422 @@
+// # 颜色
+// ## 灰度值
+$sar-white: #fff !default;
+$sar-gray-100: #f5f5f5 !default;
+$sar-gray-200: #ededed !default;
+$sar-gray-300: #e3e3e3 !default;
+$sar-gray-400: #d4d4d4 !default;
+$sar-gray-500: #b5b5b5 !default;
+$sar-gray-600: #757575 !default;
+$sar-gray-700: #4f4f4f !default;
+$sar-gray-800: #3b3b3b !default;
+$sar-gray-900: #262626 !default;
+$sar-black: #000 !default;
+
+$sar-grays: (
+  'gray-100': $sar-gray-100,
+  'gray-200': $sar-gray-200,
+  'gray-300': $sar-gray-300,
+  'gray-400': $sar-gray-400,
+  'gray-500': $sar-gray-500,
+  'gray-600': $sar-gray-600,
+  'gray-700': $sar-gray-700,
+  'gray-800': $sar-gray-800,
+  'gray-900': $sar-gray-900,
+) !default;
+
+// ## 基本色
+$sar-blue: #0d6efd !default;
+$sar-indigo: #6610f2 !default;
+$sar-purple: #6f42c1 !default;
+$sar-pink: #d63384 !default;
+$sar-red: #dc3545 !default;
+$sar-orange: #fd7e14 !default;
+$sar-yellow: #ffc107 !default;
+$sar-green: #198754 !default;
+$sar-teal: #20c997 !default;
+$sar-cyan: #0dcaf0 !default;
+
+$sar-colors: (
+  'blue': $sar-blue,
+  'indigo': $sar-indigo,
+  'purple': $sar-purple,
+  'pink': $sar-pink,
+  'red': $sar-red,
+  'orange': $sar-orange,
+  'yellow': $sar-yellow,
+  'green': $sar-green,
+  'teal': $sar-teal,
+  'cyan': $sar-cyan,
+  'black': $sar-black,
+  'white': $sar-white,
+) !default;
+
+$sar-blue-100: mix(white, $sar-blue, 80%) !default;
+$sar-blue-200: mix(white, $sar-blue, 60%) !default;
+$sar-blue-300: mix(white, $sar-blue, 40%) !default;
+$sar-blue-400: mix(white, $sar-blue, 20%) !default;
+$sar-blue-500: $sar-blue !default;
+$sar-blue-600: mix(black, $sar-blue, 20%) !default;
+$sar-blue-700: mix(black, $sar-blue, 40%) !default;
+$sar-blue-800: mix(black, $sar-blue, 60%) !default;
+$sar-blue-900: mix(black, $sar-blue, 80%) !default;
+
+$sar-blues: (
+  'blue-100': $sar-blue-100,
+  'blue-200': $sar-blue-200,
+  'blue-300': $sar-blue-300,
+  'blue-400': $sar-blue-400,
+  'blue-500': $sar-blue-500,
+  'blue-600': $sar-blue-600,
+  'blue-700': $sar-blue-700,
+  'blue-800': $sar-blue-800,
+  'blue-900': $sar-blue-900,
+) !default;
+
+$sar-indigo-100: mix(white, $sar-indigo, 80%) !default;
+$sar-indigo-200: mix(white, $sar-indigo, 60%) !default;
+$sar-indigo-300: mix(white, $sar-indigo, 40%) !default;
+$sar-indigo-400: mix(white, $sar-indigo, 20%) !default;
+$sar-indigo-500: $sar-indigo !default;
+$sar-indigo-600: mix(black, $sar-indigo, 20%) !default;
+$sar-indigo-700: mix(black, $sar-indigo, 40%) !default;
+$sar-indigo-800: mix(black, $sar-indigo, 60%) !default;
+$sar-indigo-900: mix(black, $sar-indigo, 80%) !default;
+
+$sar-indigos: (
+  'indigo-100': $sar-indigo-100,
+  'indigo-200': $sar-indigo-200,
+  'indigo-300': $sar-indigo-300,
+  'indigo-400': $sar-indigo-400,
+  'indigo-500': $sar-indigo-500,
+  'indigo-600': $sar-indigo-600,
+  'indigo-700': $sar-indigo-700,
+  'indigo-800': $sar-indigo-800,
+  'indigo-900': $sar-indigo-900,
+) !default;
+
+$sar-purple-100: mix(white, $sar-purple, 80%) !default;
+$sar-purple-200: mix(white, $sar-purple, 60%) !default;
+$sar-purple-300: mix(white, $sar-purple, 40%) !default;
+$sar-purple-400: mix(white, $sar-purple, 20%) !default;
+$sar-purple-500: $sar-purple !default;
+$sar-purple-600: mix(black, $sar-purple, 20%) !default;
+$sar-purple-700: mix(black, $sar-purple, 40%) !default;
+$sar-purple-800: mix(black, $sar-purple, 60%) !default;
+$sar-purple-900: mix(black, $sar-purple, 80%) !default;
+
+$sar-purples: (
+  'purple-100': $sar-purple-100,
+  'purple-200': $sar-purple-200,
+  'purple-300': $sar-purple-300,
+  'purple-400': $sar-purple-400,
+  'purple-500': $sar-purple-500,
+  'purple-600': $sar-purple-600,
+  'purple-700': $sar-purple-700,
+  'purple-800': $sar-purple-800,
+  'purple-900': $sar-purple-900,
+) !default;
+
+$sar-pink-100: mix(white, $sar-pink, 80%) !default;
+$sar-pink-200: mix(white, $sar-pink, 60%) !default;
+$sar-pink-300: mix(white, $sar-pink, 40%) !default;
+$sar-pink-400: mix(white, $sar-pink, 20%) !default;
+$sar-pink-500: $sar-pink !default;
+$sar-pink-600: mix(black, $sar-pink, 20%) !default;
+$sar-pink-700: mix(black, $sar-pink, 40%) !default;
+$sar-pink-800: mix(black, $sar-pink, 60%) !default;
+$sar-pink-900: mix(black, $sar-pink, 80%) !default;
+
+$sar-pinks: (
+  'pink-100': $sar-pink-100,
+  'pink-200': $sar-pink-200,
+  'pink-300': $sar-pink-300,
+  'pink-400': $sar-pink-400,
+  'pink-500': $sar-pink-500,
+  'pink-600': $sar-pink-600,
+  'pink-700': $sar-pink-700,
+  'pink-800': $sar-pink-800,
+  'pink-900': $sar-pink-900,
+) !default;
+
+$sar-red-100: mix(white, $sar-red, 80%) !default;
+$sar-red-200: mix(white, $sar-red, 60%) !default;
+$sar-red-300: mix(white, $sar-red, 40%) !default;
+$sar-red-400: mix(white, $sar-red, 20%) !default;
+$sar-red-500: $sar-red !default;
+$sar-red-600: mix(black, $sar-red, 20%) !default;
+$sar-red-700: mix(black, $sar-red, 40%) !default;
+$sar-red-800: mix(black, $sar-red, 60%) !default;
+$sar-red-900: mix(black, $sar-red, 80%) !default;
+
+$sar-reds: (
+  'red-100': $sar-red-100,
+  'red-200': $sar-red-200,
+  'red-300': $sar-red-300,
+  'red-400': $sar-red-400,
+  'red-500': $sar-red-500,
+  'red-600': $sar-red-600,
+  'red-700': $sar-red-700,
+  'red-800': $sar-red-800,
+  'red-900': $sar-red-900,
+) !default;
+
+$sar-orange-100: mix(white, $sar-orange, 80%) !default;
+$sar-orange-200: mix(white, $sar-orange, 60%) !default;
+$sar-orange-300: mix(white, $sar-orange, 40%) !default;
+$sar-orange-400: mix(white, $sar-orange, 20%) !default;
+$sar-orange-500: $sar-orange !default;
+$sar-orange-600: mix(black, $sar-orange, 20%) !default;
+$sar-orange-700: mix(black, $sar-orange, 40%) !default;
+$sar-orange-800: mix(black, $sar-orange, 60%) !default;
+$sar-orange-900: mix(black, $sar-orange, 80%) !default;
+
+$sar-oranges: (
+  'orange-100': $sar-orange-100,
+  'orange-200': $sar-orange-200,
+  'orange-300': $sar-orange-300,
+  'orange-400': $sar-orange-400,
+  'orange-500': $sar-orange-500,
+  'orange-600': $sar-orange-600,
+  'orange-700': $sar-orange-700,
+  'orange-800': $sar-orange-800,
+  'orange-900': $sar-orange-900,
+) !default;
+
+$sar-yellow-100: mix(white, $sar-yellow, 80%) !default;
+$sar-yellow-200: mix(white, $sar-yellow, 60%) !default;
+$sar-yellow-300: mix(white, $sar-yellow, 40%) !default;
+$sar-yellow-400: mix(white, $sar-yellow, 20%) !default;
+$sar-yellow-500: $sar-yellow !default;
+$sar-yellow-600: mix(black, $sar-yellow, 20%) !default;
+$sar-yellow-700: mix(black, $sar-yellow, 40%) !default;
+$sar-yellow-800: mix(black, $sar-yellow, 60%) !default;
+$sar-yellow-900: mix(black, $sar-yellow, 80%) !default;
+
+$sar-yellows: (
+  'yellow-100': $sar-yellow-100,
+  'yellow-200': $sar-yellow-200,
+  'yellow-300': $sar-yellow-300,
+  'yellow-400': $sar-yellow-400,
+  'yellow-500': $sar-yellow-500,
+  'yellow-600': $sar-yellow-600,
+  'yellow-700': $sar-yellow-700,
+  'yellow-800': $sar-yellow-800,
+  'yellow-900': $sar-yellow-900,
+) !default;
+
+$sar-green-100: mix(white, $sar-green, 80%) !default;
+$sar-green-200: mix(white, $sar-green, 60%) !default;
+$sar-green-300: mix(white, $sar-green, 40%) !default;
+$sar-green-400: mix(white, $sar-green, 20%) !default;
+$sar-green-500: $sar-green !default;
+$sar-green-600: mix(black, $sar-green, 20%) !default;
+$sar-green-700: mix(black, $sar-green, 40%) !default;
+$sar-green-800: mix(black, $sar-green, 60%) !default;
+$sar-green-900: mix(black, $sar-green, 80%) !default;
+
+$sar-greens: (
+  'green-100': $sar-green-100,
+  'green-200': $sar-green-200,
+  'green-300': $sar-green-300,
+  'green-400': $sar-green-400,
+  'green-500': $sar-green-500,
+  'green-600': $sar-green-600,
+  'green-700': $sar-green-700,
+  'green-800': $sar-green-800,
+  'green-900': $sar-green-900,
+) !default;
+
+$sar-teal-100: mix(white, $sar-teal, 80%) !default;
+$sar-teal-200: mix(white, $sar-teal, 60%) !default;
+$sar-teal-300: mix(white, $sar-teal, 40%) !default;
+$sar-teal-400: mix(white, $sar-teal, 20%) !default;
+$sar-teal-500: $sar-teal !default;
+$sar-teal-600: mix(black, $sar-teal, 20%) !default;
+$sar-teal-700: mix(black, $sar-teal, 40%) !default;
+$sar-teal-800: mix(black, $sar-teal, 60%) !default;
+$sar-teal-900: mix(black, $sar-teal, 80%) !default;
+
+$sar-teals: (
+  'teal-100': $sar-teal-100,
+  'teal-200': $sar-teal-200,
+  'teal-300': $sar-teal-300,
+  'teal-400': $sar-teal-400,
+  'teal-500': $sar-teal-500,
+  'teal-600': $sar-teal-600,
+  'teal-700': $sar-teal-700,
+  'teal-800': $sar-teal-800,
+  'teal-900': $sar-teal-900,
+) !default;
+
+$sar-cyan-100: mix(white, $sar-cyan, 80%) !default;
+$sar-cyan-200: mix(white, $sar-cyan, 60%) !default;
+$sar-cyan-300: mix(white, $sar-cyan, 40%) !default;
+$sar-cyan-400: mix(white, $sar-cyan, 20%) !default;
+$sar-cyan-500: $sar-cyan !default;
+$sar-cyan-600: mix(black, $sar-cyan, 20%) !default;
+$sar-cyan-700: mix(black, $sar-cyan, 40%) !default;
+$sar-cyan-800: mix(black, $sar-cyan, 60%) !default;
+$sar-cyan-900: mix(black, $sar-cyan, 80%) !default;
+
+$sar-cyans: (
+  'cyan-100': $sar-cyan-100,
+  'cyan-200': $sar-cyan-200,
+  'cyan-300': $sar-cyan-300,
+  'cyan-400': $sar-cyan-400,
+  'cyan-500': $sar-cyan-500,
+  'cyan-600': $sar-cyan-600,
+  'cyan-700': $sar-cyan-700,
+  'cyan-800': $sar-cyan-800,
+  'cyan-900': $sar-cyan-900,
+) !default;
+
+// ## 主题色
+$sar-primary: $sar-blue !default;
+$sar-secondary: $sar-gray-600 !default;
+$sar-success: $sar-green !default;
+$sar-info: $sar-cyan !default;
+$sar-warning: $sar-yellow !default;
+$sar-danger: $sar-red !default;
+
+$sar-theme-colors: (
+  primary: (
+    $sar-blue,
+    $sar-blue-200,
+    $sar-blue,
+  ),
+  secondary: (
+    $sar-gray-600,
+    $sar-gray-200,
+    $sar-gray-800,
+  ),
+  success: (
+    $sar-green,
+    $sar-green-200,
+    $sar-green,
+  ),
+  info: (
+    $sar-cyan,
+    $sar-cyan-200,
+    $sar-cyan,
+  ),
+  warning: (
+    $sar-yellow,
+    $sar-yellow-200,
+    $sar-yellow,
+  ),
+  danger: (
+    $sar-red,
+    $sar-red-200,
+    $sar-red,
+  ),
+) !default;
+
+// ## 灰度场景色 - light
+$sar-body-color: $sar-gray-900 !default;
+$sar-body-bg-color: $sar-gray-100 !default;
+$sar-secondary-color: $sar-gray-700 !default;
+$sar-secondary-bg-color: $sar-gray-200 !default;
+$sar-tertiary-color: $sar-gray-600 !default;
+$sar-tertiary-bg-color: $sar-gray-300 !default;
+$sar-quaternary-color: $sar-gray-500 !default;
+$sar-quaternary-bg-color: $sar-gray-100 !default;
+$sar-emphasis-color: $sar-black !default;
+$sar-emphasis-bg-color: $sar-white !default;
+$sar-deemphasis-color: $sar-gray-500 !default;
+$sar-deemphasis-bg-color: $sar-gray-500 !default;
+$sar-border-color: $sar-gray-400 !default;
+$sar-dark-border-color: $sar-gray-600 !default;
+$sar-active-bg-color: $sar-gray-200 !default;
+$sar-active-deep-bg-color: $sar-gray-300 !default;
+// ### 禁用状态
+$sar-disabled-opacity: 0.6 !default;
+$sar-disabled-color: $sar-gray-500 !default;
+$sar-disabled-deep-bg-color: $sar-gray-500 !default;
+$sar-disabled-bg-color: $sar-gray-400 !default;
+$sar-disabled-shallow-bg-color: $sar-gray-200 !default;
+
+// ## 灰度场景色 - dark
+$sar-dark-body-color: $sar-gray-200 !default;
+$sar-dark-body-bg-color: $sar-gray-900 !default;
+$sar-dark-secondary-color: $sar-gray-400 !default;
+$sar-dark-secondary-bg-color: $sar-gray-700 !default;
+$sar-dark-tertiary-color: $sar-gray-500 !default;
+$sar-dark-tertiary-bg-color: $sar-gray-600 !default;
+$sar-dark-quaternary-color: $sar-gray-500 !default;
+$sar-dark-quaternary-bg-color: $sar-gray-700 !default;
+$sar-dark-emphasis-color: $sar-white !default;
+$sar-dark-emphasis-bg-color: $sar-gray-800 !default;
+$sar-dark-deemphasis-color: $sar-gray-600 !default;
+$sar-dark-deemphasis-bg-color: $sar-gray-300 !default;
+$sar-dark-border-color: $sar-gray-700 !default;
+$sar-dark-active-bg-color: $sar-gray-700 !default;
+$sar-dark-active-deep-bg-color: $sar-gray-600 !default;
+// ### 禁用状态
+$sar-dark-disabled-opacity: 0.6 !default;
+$sar-dark-disabled-color: $sar-gray-600 !default;
+$sar-dark-disabled-deep-bg-color: $sar-gray-500 !default;
+$sar-dark-disabled-bg-color: $sar-gray-400 !default;
+$sar-dark-disabled-shallow-bg-color: $sar-gray-700 !default;
+
+// # 圆角
+$sar-rounded-xs: 2px !default;
+$sar-rounded-sm: 4px !default;
+$sar-rounded: 6px !default;
+$sar-rounded-lg: 8px !default;
+$sar-rounded-xl: 12px !default;
+$sar-rounded-2xl: 16px !default;
+$sar-rounded-3xl: 24px !default;
+$sar-rounded-full: 9999px !default;
+
+// # 字号
+$sar-text-xs: 10px !default;
+$sar-text-sm: 12px !default;
+$sar-text-base: 14px !default;
+$sar-text-lg: 16px !default;
+$sar-text-xl: 18px !default;
+$sar-text-2xl: 24px !default;
+$sar-text-3xl: 32px !default;
+
+// # 字重
+$sar-font-bold: 700 !default;
+$sar-font-normal: 400 !default;
+
+// # 行高
+$sar-leading-none: 1 !default;
+$sar-leading-tight: 1.25 !default;
+$sar-leading-snug: 1.375 !default;
+$sar-leading-normal: 1.5 !default;
+$sar-leading-relaxed: 1.625 !default;
+$sar-leading-loose: 2 !default;
+
+// # 阴影
+$sar-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5) !default;
+$sar-shadow: 0 4px 6px rgb(0 0 0 / 0.1) !default;
+$sar-shadow-lg: 0 2px 15px rgb(0 0 0 / 0.1) !default;
+
+// # 遮罩
+$sar-mask-legible: rgba(0, 0, 0, 0.1) !default;
+$sar-mask: rgba(0, 0, 0, 0.5) !default;
+$sar-mask-illegible: rgba(0, 0, 0, 0.7) !default;
+
+// # 按下状态
+$sar-active-opacity: 0.5 !default;
+
+// # 加载状态
+$sar-loading-pointer-events: none !default;
+$sar-loading-opacity: 0.6 !default;
+
+// # 过渡时间
+$sar-duration-slow: 500ms !default;
+$sar-duration: 300ms !default;
+$sar-duration-fast: 150ms !default;
+
+// # bem
+$sar-namespace: 'sar' !default;
+$sar-block-separator: '-' !default;
+$sar-element-separator: '__' !default;
+$sar-modifier-separator: '_' !default;
+
+// # 暗黑模式开关
+$sar-darkmode: false !default;

package/dist/swiper/Item.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { SwiperItemProps as TaroSwiperItemProps } from '@tarojs/components';
+import { BaseProps } from '../base';
+export interface SwiperItemProps extends BaseProps, Omit<TaroSwiperItemProps, 'style'> {
+}
+export type SwiperItemFC = FC<SwiperItemProps>;
+export declare const SwiperItem: SwiperItemFC;
+export default SwiperItem;

package/dist/swiper/Item.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SwiperItem as TaroSwiperItem, } from '@tarojs/components';
+import classNames from 'classnames';
+import { useBem } from '../use';
+export const SwiperItem = (props) => {
+    const { className, style, children, ...restProps } = props;
+    const [bem] = useBem('swiper');
+    return (_jsx(TaroSwiperItem, { ...restProps, className: classNames(bem.e('item'), className), style: style, children: children }));
+};
+export default SwiperItem;

package/dist/swiper/index.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { SwiperProps as TaroSwiperProps } from '@tarojs/components';
+import { SwiperItem } from './Item';
+import { BaseProps } from '../base';
+export * from './Item';
+export interface SwiperProps extends BaseProps, Omit<TaroSwiperProps, 'style'> {
+}
+export interface SwiperFC extends FC<SwiperProps> {
+    Item: typeof SwiperItem;
+}
+export declare const Swiper: SwiperFC;
+export default Swiper;

package/dist/swiper/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Swiper as TaroSwiper, } from '@tarojs/components';
+import classNames from 'classnames';
+import { SwiperItem } from './Item';
+import { useBem } from '../use';
+export * from './Item';
+export const Swiper = (props) => {
+    const { className, style, children, ...restProps } = props;
+    const [bem] = useBem('swiper');
+    return (_jsx(TaroSwiper, { ...restProps, className: classNames(bem.b(), className), style: style, children: children }));
+};
+Swiper.Item = SwiperItem;
+export default Swiper;

package/dist/swiper/index.scss

@@ -0,0 +1,10 @@
+@import '../style/base.scss';
+// #variables
+$sar-swiper-height: 150px !default;
+// #endvariables
+
+@include bem(swiper) {
+  @include b() {
+    height: $sar-swiper-height;
+  }
+}

package/dist/switch/index.d.ts

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { ITouchEvent } from '@tarojs/components';
+import { BaseProps } from '../base';
+export interface SwitchProps extends BaseProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean, value: any) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    loading?: boolean;
+    size?: number;
+    checkedColor?: string;
+    uncheckedColor?: string;
+    checkedValue?: any;
+    uncheckedValue?: any;
+    onClick?: (event: ITouchEvent) => void;
+}
+export declare const Switch: FC<SwitchProps>;
+export default Switch;

package/dist/switch/index.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import { CustomWrapper } from '@tarojs/components';
+import classNames from 'classnames';
+import { useBem, useControllableValue, useEvent } from '../use';
+import Loading from '../loading';
+import { filterNullish, isRN } from '../utils';
+import { Animated } from '../animated';
+const aspectRatio = 5 / 3;
+const thumbGap = 2;
+export const Switch = (props) => {
+    const { className, style, checked, defaultChecked, onChange, disabled = false, readOnly = false, loading = false, size = 30, checkedColor = isRN ? '#0d6efd' : undefined, uncheckedColor = isRN ? '#ededed' : undefined, checkedValue = true, uncheckedValue = false, onClick, ...restProps } = props;
+    const [bem] = useBem('switch');
+    const [innerChecked, setInnerChecked] = useControllableValue({
+        value: checked,
+        defaultValue: defaultChecked,
+        trigger: onChange,
+        initialValue: false,
+    });
+    const onSwitchClick = useEvent((event) => {
+        if (disabled || readOnly || loading) {
+            return;
+        }
+        setInnerChecked(!innerChecked, !innerChecked ? checkedValue : uncheckedValue);
+        onClick?.(event);
+    });
+    const thumbSize = size - thumbGap * 2;
+    const offsetX = size * aspectRatio - size;
+    // Animated >>>
+    const anim = useMemo(() => new Animated.Value(0), []);
+    const bgAnim = useMemo(() => new Animated.Value(0), []);
+    const interAnim = useMemo(() => {
+        return bgAnim.interpolate({
+            inputRange: [0, 1],
+            outputRange: [uncheckedColor, checkedColor],
+        });
+    }, []);
+    const animateToggle = () => {
+        anim.setValue(innerChecked ? 0 : offsetX);
+        Animated.timing(anim, {
+            toValue: innerChecked ? offsetX : 0,
+            duration: 300,
+            useNativeDriver: true,
+        }).start();
+        bgAnim.setValue(innerChecked ? 0 : 1);
+        Animated.timing(bgAnim, {
+            toValue: innerChecked ? 1 : 0,
+            duration: 300,
+            useNativeDriver: false,
+        }).start();
+    };
+    useEffect(() => {
+        isRN && animateToggle();
+    }, [innerChecked]);
+    // <<< Animated
+    return (_jsx(CustomWrapper, { children: _jsx(Animated.View, { ...restProps, className: classNames(bem.b(), bem.m('checked', innerChecked), bem.m('disabled-checked', disabled && innerChecked), bem.m('readonly', readOnly), bem.m('loading', loading), className), style: {
+                ...style,
+                ...filterNullish({
+                    backgroundColor: disabled
+                        ? undefined
+                        : isRN
+                            ? interAnim
+                            : innerChecked
+                                ? checkedColor
+                                : uncheckedColor,
+                    ...(size ? { width: size * aspectRatio, height: size } : null),
+                }),
+            }, onClick: onSwitchClick, children: _jsx(Animated.View, { className: classNames(bem.e('thumb')), style: {
+                    width: thumbSize,
+                    height: thumbSize,
+                    ...(isRN
+                        ? { transform: [{ translateX: anim }] }
+                        : {
+                            transform: `translateX(${innerChecked ? offsetX : 0}px)`,
+                        }),
+                }, children: loading && (_jsx(Loading, { className: bem.e('loading'), size: thumbSize * 0.7 })) }) }) }));
+};
+export default Switch;

package/dist/switch/index.scss

@@ -0,0 +1,106 @@
+@import '../style/base.scss';
+// #variables
+$sar-switch-width: 50px !default;
+$sar-switch-height: 30px !default;
+$sar-switch-transition-duration: $sar-duration !default;
+$sar-switch-bg-color: $sar-secondary-bg-color !default;
+$sar-switch-checked-bg-color: $sar-primary !default;
+
+$sar-switch-is-loading-opacity: $sar-loading-opacity !default;
+
+$sar-switch-thumb-border-width: 2px !default;
+$sar-switch-thumb-width: $sar-switch-height - $sar-switch-thumb-border-width * 2 !default;
+$sar-switch-thumb-height: $sar-switch-thumb-width !default;
+$sar-switch-thumb-border-radius: $sar-rounded-full !default;
+$sar-switch-thumb-bg-color: $sar-white !default;
+$sar-switch-thumb-transition-duration: $sar-duration !default;
+
+$sar-switch-loading-color: $sar-secondary-color !default;
+
+// 暗黑模式
+$sar-switch-dark-bg-color: $sar-dark-secondary-bg-color !default;
+$sar-switch-checked-dark-bg-color: $sar-primary !default;
+$sar-switch-thumb-dark-bg-color: $sar-white !default;
+$sar-switch-loading-dark-color: $sar-secondary-color !default;
+// #endvariables
+
+@include bem(switch) {
+  @include b() {
+    @include universal;
+    width: $sar-switch-width;
+    height: $sar-switch-height;
+    border-radius: $sar-switch-height;
+    background-color: $sar-switch-bg-color;
+
+    @include ifweb {
+      cursor: pointer;
+      transition: background-color $sar-switch-transition-duration,
+        opacity $sar-switch-transition-duration;
+    }
+
+    @include m(checked) {
+      background-color: $sar-switch-checked-bg-color;
+    }
+
+    @include m(disabled-checked) {
+      background-color: $sar-disabled-deep-bg-color;
+    }
+
+    @include m(readonly) {
+      @include ifweb {
+        cursor: default;
+      }
+    }
+
+    @include m(loading) {
+      opacity: $sar-switch-is-loading-opacity;
+      @include ifweb {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  @include e(thumb) {
+    @include universal;
+    position: absolute;
+    left: $sar-switch-thumb-border-width;
+    top: $sar-switch-thumb-border-width;
+    width: $sar-switch-thumb-width;
+    height: $sar-switch-thumb-height;
+    justify-content: center;
+    align-items: center;
+    border-radius: $sar-rounded-full;
+    background-color: $sar-switch-thumb-bg-color;
+    @include ifweb {
+      transition: transform $sar-switch-thumb-transition-duration;
+    }
+  }
+
+  @include e(loading) {
+    color: $sar-switch-loading-color;
+  }
+}
+
+@include theme(dark) {
+  @include bem(switch) {
+    @include b() {
+      background-color: $sar-switch-dark-bg-color;
+
+      @include m(checked) {
+        background-color: $sar-switch-checked-dark-bg-color;
+      }
+
+      @include m(disabled-checked) {
+        background-color: $sar-dark-disabled-deep-bg-color;
+      }
+    }
+
+    @include e(thumb) {
+      background-color: $sar-switch-thumb-dark-bg-color;
+    }
+
+    @include e(loading) {
+      color: $sar-switch-loading-dark-color;
+    }
+  }
+}