sard 1.0.0-canary.0

package/dist/pagination/index.scss

@@ -0,0 +1,131 @@
+@import '../style/base.scss';
+// #variables
+$sar-pagination-border-radius: $sar-rounded !default;
+
+$sar-pagination-item-height: 40px !default;
+$sar-pagination-item-min-width: 40px !default;
+$sar-pagination-item-padding-x: 10px !default;
+$sar-pagination-item-font-size: $sar-text-base !default;
+$sar-pagination-item-color: $sar-primary !default;
+$sar-pagination-item-active-bg-color: $sar-active-bg-color !default;
+
+$sar-pagination-item-current-color: $sar-white !default;
+$sar-pagination-item-current-border-color: $sar-primary !default;
+$sar-pagination-item-current-bg-color: $sar-primary !default;
+
+$sar-pagination-ratio-height: 40px !default;
+$sar-pagination-ratio-font-size: $sar-text-base !default;
+
+// 暗黑模式
+$sar-pagination-item-active-dark-bg-color: $sar-dark-active-bg-color !default;
+// #endvariables
+
+@include bem(pagination) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  @include e(item) {
+    @include universal;
+    flex-direction: row;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    height: $sar-pagination-item-height;
+    min-width: $sar-pagination-item-min-width;
+    padding: 0 $sar-pagination-item-padding-x;
+
+    @include ifweb {
+      cursor: pointer;
+    }
+
+    @include m(first) {
+      border-top-left-radius: $sar-pagination-border-radius;
+      border-bottom-left-radius: $sar-pagination-border-radius;
+    }
+
+    @include m(last) {
+      border-top-right-radius: $sar-pagination-border-radius;
+      border-bottom-right-radius: $sar-pagination-border-radius;
+    }
+
+    @include m(current) {
+      z-index: 3;
+      background-color: $sar-pagination-item-current-bg-color;
+    }
+
+    @include m(disabled) {
+      @include disabled;
+    }
+
+    @include m(pressed) {
+      background-color: $sar-pagination-item-active-bg-color;
+    }
+  }
+
+  @include e(item-text) {
+    font-size: $sar-pagination-item-font-size;
+    color: $sar-pagination-item-color;
+
+    @include m(current) {
+      color: $sar-pagination-item-current-color;
+    }
+  }
+
+  @include e(halfline) {
+    @include m(current) {
+      border-color: $sar-pagination-item-current-border-color;
+    }
+  }
+
+  @include e(prev, next) {
+    @include universal;
+    flex-direction: row;
+    flex: 1 0 auto;
+
+    @include m(simple) {
+      flex: 1;
+      padding: 0;
+      border-radius: $sar-pagination-border-radius;
+    }
+  }
+
+  @include e(ratio) {
+    @include universal;
+    flex-direction: row;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    height: $sar-pagination-ratio-height;
+    font-size: $sar-pagination-ratio-font-size;
+  }
+
+  @include e(halfline) {
+    @include m(first) {
+      border-top-left-radius: $sar-pagination-border-radius;
+      border-bottom-left-radius: $sar-pagination-border-radius;
+    }
+
+    @include m(last) {
+      border-top-right-radius: $sar-pagination-border-radius;
+      border-bottom-right-radius: $sar-pagination-border-radius;
+    }
+
+    @include m(simple) {
+      border-radius: $sar-pagination-border-radius;
+    }
+  }
+}
+
+@include theme(dark) {
+  @include bem(pagination) {
+    @include e(item) {
+      @include m(pressed) {
+        background-color: $sar-pagination-item-active-dark-bg-color;
+      }
+    }
+  }
+}

package/dist/pan-gesture-detector/index.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactElement } from 'react';
+import { Handlers } from './usePan';
+export interface PanGestureDetectorProps {
+    children?: ReactElement;
+    handlers: Handlers;
+}
+export declare const PanGestureDetector: FC<PanGestureDetectorProps>;
+export default PanGestureDetector;

package/dist/pan-gesture-detector/index.js

@@ -0,0 +1,11 @@
+import { cloneElement, isValidElement } from 'react';
+export const PanGestureDetector = (props) => {
+    const { children, handlers } = props;
+    if (isValidElement(children)) {
+        return cloneElement(children, {
+            ...handlers,
+        });
+    }
+    return null;
+};
+export default PanGestureDetector;

package/dist/pan-gesture-detector/index.rn.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactElement } from 'react';
+import { createHandlers } from './usePan';
+export interface PanGestureDetectorProps {
+    children?: ReactElement;
+    handlers: ReturnType<typeof createHandlers>;
+}
+export declare const PanGestureDetector: FC<PanGestureDetectorProps>;
+export default PanGestureDetector;

package/dist/pan-gesture-detector/index.rn.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+export const PanGestureDetector = (props) => {
+    const { children, handlers } = props;
+    const gesture = useMemo(() => {
+        return Gesture.Pan()
+            .onTouchesDown((event) => {
+            handlers.onTouchStart(event);
+        })
+            .onTouchesMove((event) => {
+            handlers.onTouchMove(event);
+        })
+            .onTouchesUp((event) => {
+            handlers.onTouchEnd(event);
+        })
+            .onTouchesCancelled((event) => {
+            handlers.onTouchCancel(event);
+        });
+    }, []);
+    return _jsx(GestureDetector, { gesture: gesture, children: children });
+};
+export default PanGestureDetector;

package/dist/pan-gesture-detector/usePan.d.ts

@@ -0,0 +1,47 @@
+export interface PanHandler {
+    (event: any): void;
+}
+export interface PanEvent {
+    x0: number;
+    y0: number;
+    moveX: number;
+    moveY: number;
+    dx: number;
+    dy: number;
+    vx: number;
+    vy: number;
+    offsetX: number;
+    offsetY: number;
+    axis: '' | 'horizontal' | 'vertical';
+    timestamp: number;
+}
+export interface PanCallback {
+    (event: PanEvent): void;
+}
+export interface UsePanOptions {
+    start?: PanCallback;
+    move?: PanCallback;
+    end?: PanCallback;
+}
+export type Axis = '' | 'horizontal' | 'vertical';
+export interface Handlers {
+    onMouseDown?: ((event: any) => void) | undefined;
+    onTouchStart: PanHandler;
+    onTouchMove: PanHandler;
+    onTouchEnd: PanHandler;
+    onTouchCancel: PanHandler;
+}
+export declare function createHandlers(onStart: PanHandler, onMove: PanHandler, onEnd: PanHandler, onCancel: PanHandler): {
+    onMouseDown: (event: any) => void;
+    onTouchStart: PanHandler;
+    onTouchMove: PanHandler;
+    onTouchEnd: PanHandler;
+    onTouchCancel: PanHandler;
+};
+export declare function usePan({ start, move, end }: UsePanOptions): {
+    onMouseDown: (event: any) => void;
+    onTouchStart: PanHandler;
+    onTouchMove: PanHandler;
+    onTouchEnd: PanHandler;
+    onTouchCancel: PanHandler;
+};

package/dist/pan-gesture-detector/usePan.js

@@ -0,0 +1,146 @@
+import { useMemo } from 'react';
+import { isPC, createMouseBinder } from '../utils';
+const minAxisDistance = 5;
+function getDirection(offsetX, offsetY) {
+    if (!isPC || offsetX >= minAxisDistance || offsetY >= minAxisDistance) {
+        return offsetX > offsetY ? 'horizontal' : 'vertical';
+    }
+    return '';
+}
+function getTouch(event) {
+    let clientX = 0;
+    let clientY = 0;
+    // rn
+    if (event.allTouches) {
+        const touch = event.allTouches[0];
+        clientX = touch.absoluteX;
+        clientY = touch.absoluteY;
+    }
+    // web mobile
+    else if (event.touches) {
+        const touch = event.touches[0];
+        clientX = touch.clientX;
+        clientY = touch.clientY;
+    }
+    // web pc
+    else {
+        clientX = event.clientX;
+        clientY = event.clientY;
+    }
+    return {
+        clientX: clientX,
+        clientY: clientY,
+        timestamp: Date.now(),
+    };
+}
+export function createHandlers(onStart, onMove, onEnd, onCancel) {
+    return {
+        onTouchStart: onStart,
+        onTouchMove: onMove,
+        onTouchEnd: onEnd,
+        onTouchCancel: onCancel,
+        ...(isPC
+            ? createMouseBinder({
+                onStart,
+                onMove,
+                onEnd,
+            })
+            : null),
+    };
+}
+function createPan() {
+    let x0 = 0;
+    let y0 = 0;
+    let moveX = 0;
+    let moveY = 0;
+    let dx = 0;
+    let dy = 0;
+    let vx = 0;
+    let vy = 0;
+    let timestamp = 0;
+    let axis = '';
+    let offsetX = 0;
+    let offsetY = 0;
+    let onStart;
+    let onMove;
+    let onEnd;
+    let onCancel;
+    function startHandler(event) {
+        const touch = getTouch(event);
+        x0 = touch.clientX;
+        y0 = touch.clientY;
+        moveX = x0;
+        moveY = y0;
+        timestamp = touch.timestamp;
+        axis = '';
+        return onStart?.(createPanGesture());
+    }
+    function moveHandler(event) {
+        const touch = getTouch(event);
+        const currentX = touch.clientX;
+        const currentY = touch.clientY;
+        dx = currentX - x0;
+        dy = currentY - y0;
+        const duration = touch.timestamp - timestamp;
+        vx = (currentX - moveX) / duration;
+        vy = (currentY - moveY) / duration;
+        moveX = currentX;
+        moveY = currentY;
+        timestamp = touch.timestamp;
+        offsetX = Math.abs(dx);
+        offsetY = Math.abs(dy);
+        if (axis === '') {
+            axis = getDirection(offsetX, offsetY);
+        }
+        return onMove?.(createPanGesture());
+    }
+    function endHandler() {
+        return onEnd?.(createPanGesture());
+    }
+    function cancelHandler() {
+        return onCancel?.(createPanGesture());
+    }
+    function setOnStart(callback) {
+        onStart = callback;
+    }
+    function setOnMove(callback) {
+        onMove = callback;
+    }
+    function setOnEnd(callback) {
+        onEnd = callback;
+    }
+    function setOnCancel(callback) {
+        onCancel = callback;
+    }
+    function createPanGesture() {
+        return {
+            x0,
+            y0,
+            moveX,
+            moveY,
+            dx,
+            dy,
+            vx,
+            vy,
+            offsetX,
+            offsetY,
+            axis,
+            timestamp,
+        };
+    }
+    const handlers = createHandlers(startHandler, moveHandler, endHandler, cancelHandler);
+    return {
+        setOnStart,
+        setOnMove,
+        setOnEnd,
+        setOnCancel,
+        handlers,
+    };
+}
+export function usePan({ start, move, end }) {
+    const pan = useMemo(() => createPan(), []);
+    start && pan.setOnStart(start);
+    move && pan.setOnMove(move);
+    end && (pan.setOnEnd(end), pan.setOnCancel(end));
+    return pan.handlers;
+}

package/dist/password-input/index.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { ITouchEvent, InputProps } from '@tarojs/components';
+import { BaseProps } from '../base';
+export interface PasswordInputProps extends Omit<BaseProps, 'children'> {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    length?: number;
+    type?: 'border' | 'underline';
+    gap?: number | string;
+    plainText?: boolean;
+    focused?: boolean;
+    defaultFocused?: boolean;
+    onFocused?: (focused: boolean) => void;
+    onClick?: (event: ITouchEvent) => void;
+    custom?: boolean;
+    inputType?: InputProps['type'];
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+export declare const PasswordInput: FC<PasswordInputProps>;
+export default PasswordInput;

package/dist/password-input/index.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import { CustomWrapper, Input, View, } from '@tarojs/components';
+import { useBem, useControllableValue } from '../use';
+import { filterNullish, isRN } from '../utils';
+import { Animated } from '../animated';
+import Halfline from '../halfline';
+const Cursor = (props) => {
+    function renderCursor(anim) {
+        return (_jsx(Animated.View, { className: props.className, style: {
+                ...props.style,
+                ...(isRN
+                    ? {
+                        opacity: anim,
+                    }
+                    : null),
+            } }));
+    }
+    if (!isRN) {
+        return renderCursor();
+    }
+    const anim = useMemo(() => new Animated.Value(0), []);
+    useEffect(() => {
+        Animated.loop(Animated.sequence([
+            Animated.timing(anim, {
+                toValue: 1,
+                duration: 500,
+                useNativeDriver: true,
+            }),
+            Animated.timing(anim, {
+                toValue: 0,
+                duration: 500,
+                useNativeDriver: true,
+            }),
+        ])).start();
+    }, []);
+    return renderCursor(anim);
+};
+export const PasswordInput = (props) => {
+    const { className, style, value, defaultValue, onChange, length = 6, type = 'border', gap, plainText, focused, defaultFocused, onFocused, onClick, custom, inputType = 'number', disabled, readOnly, ...restProps } = props;
+    const [bem] = useBem('password-input');
+    const [innerValue, setInnerValue] = useControllableValue({
+        value,
+        defaultValue,
+        trigger: onChange,
+        initialValue: '',
+        postValue(value) {
+            return String(value).slice(0, length);
+        },
+    });
+    const [innerFocused, setInnerFocused] = useControllableValue({
+        value: focused,
+        defaultValue: defaultFocused,
+        trigger: onFocused,
+        initialValue: false,
+    });
+    const handleClick = (event) => {
+        onClick?.(event);
+    };
+    const handleChange = (event) => {
+        setInnerValue(event.target.value ??
+            event.detail.value);
+    };
+    const handleFocus = () => {
+        setInnerFocused(true);
+    };
+    const handleBlur = () => {
+        setInnerFocused(false);
+    };
+    const itemsElement = useMemo(() => {
+        return Array(length)
+            .fill(0)
+            .map((_, i) => {
+            const active = innerFocused &&
+                (i === innerValue.length ||
+                    (i === innerValue.length - 1 && i === length - 1));
+            return (_jsxs(View, { className: classNames(bem.e('item'), bem.em('item', 'active', active), bem.em('item', 'disabled', disabled)), children: [_jsx(Halfline, { direction: "around", className: classNames(bem.e('halfline'), bem.e('halfline'), bem.em('halfline', type), bem.em('halfline', `${type}-active`, active)), style: filterNullish({
+                            borderLeftColor: gap === 0 && i !== 0 && !active ? 'transparent' : null,
+                        }) }), i < innerValue.length &&
+                        (plainText ? (_jsx(View, { className: classNames(bem.e('plaintext'), bem.em('plaintext', 'disabled', disabled)), children: innerValue[i] })) : (_jsx(View, { className: classNames(bem.e('ciphertext'), bem.em('ciphertext', 'disabled', disabled)) }))), innerFocused && i === innerValue.length && (_jsx(Cursor, { className: bem.e('cursor') }))] }, i));
+        });
+    }, [length, innerFocused, innerValue, type, plainText, gap, disabled]);
+    return (_jsx(CustomWrapper, { children: _jsxs(View, { ...restProps, className: classNames(bem.b(), bem.m('readonly', readOnly), bem.m('disabled', disabled), className), onClick: handleClick, style: {
+                ...style,
+                ...filterNullish({
+                    gap,
+                }),
+            }, children: [itemsElement, !custom && (_jsx(Input, { className: bem.e('input'), disabled: disabled || readOnly, value: innerValue, type: inputType, maxlength: length, onInput: handleChange, onFocus: handleFocus, onBlur: handleBlur }))] }) }));
+};
+export default PasswordInput;

package/dist/password-input/index.scss

@@ -0,0 +1,189 @@
+@import '../style/base.scss';
+// #variables
+$sar-password-input-gap: 10px !default;
+$sar-password-input-border-color: $sar-border-color !default;
+$sar-password-input-active-border-color: $sar-primary !default;
+
+$sar-password-input-height: 48px !default;
+$sar-password-input-ciphertext-size: 10px !default;
+$sar-password-input-ciphertext-bg-color: $sar-body-color !default;
+
+$sar-password-input-plaintext-font-size: 20px !default;
+
+$sar-password-input-cursor-width: 1px !default;
+$sar-password-input-cursor-height: 20px !default;
+$sar-password-input-cursor-color: $sar-body-color !default;
+$sar-password-input-cursor-animation-duration: 1s !default;
+
+// 暗黑模式
+$sar-password-input-border-dark-color: $sar-dark-border-color !default;
+$sar-password-input-active-border-dark-color: $sar-primary !default;
+$sar-password-input-ciphertext-dark-bg-color: $sar-dark-body-color !default;
+$sar-password-input-cursor-dark-color: $sar-dark-body-color !default;
+// #endvariables
+
+@include bem(password-input) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    height: $sar-password-input-height;
+    gap: $sar-password-input-gap;
+    overflow: hidden;
+  }
+
+  @include e(item) {
+    @include universal;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    height: 100%;
+
+    @include m(active) {
+      z-index: 2;
+    }
+
+    @include m(disabled) {
+      background-color: $sar-disabled-shallow-bg-color;
+    }
+  }
+
+  @include e(halfline) {
+    border-color: transparent;
+
+    @include m(border) {
+      border-color: $sar-password-input-border-color;
+    }
+
+    @include m(border-active) {
+      border-color: $sar-password-input-active-border-color;
+    }
+
+    @include m(underline) {
+      border-bottom-color: $sar-password-input-border-color;
+    }
+
+    @include m(underline-active) {
+      border-bottom-color: $sar-password-input-active-border-color;
+    }
+  }
+
+  @include e(plaintext) {
+    @include universal;
+    font-size: $sar-password-input-plaintext-font-size;
+
+    @include m(disabled) {
+      color: $sar-disabled-color;
+    }
+  }
+
+  @include e(ciphertext) {
+    @include universal;
+    width: $sar-password-input-ciphertext-size;
+    height: $sar-password-input-ciphertext-size;
+    border-radius: $sar-rounded-full;
+    background-color: $sar-password-input-ciphertext-bg-color;
+
+    @include m(disabled) {
+      color: $sar-disabled-color;
+    }
+  }
+
+  @include e(cursor) {
+    @include universal;
+    width: $sar-password-input-cursor-width;
+    height: $sar-password-input-cursor-height;
+    background-color: $sar-password-input-cursor-color;
+    @include ifweb {
+      animation: $sar-password-input-cursor-animation-duration #{bem-ns(
+          password-input-cursor-flicker
+        )} infinite;
+    }
+  }
+
+  @include e(input) {
+    @include universal;
+    position: absolute;
+    top: 0;
+    z-index: 3;
+    left: -100%;
+    width: 200%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    opacity: 0;
+
+    @include ifweb {
+      .weui-input {
+        width: 100%;
+        height: 100%;
+      }
+
+      input:disabled {
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+@include ifweb {
+  @keyframes #{bem-ns(password-input-cursor-flicker)} {
+    0% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+}
+
+@include theme(dark) {
+  @include bem(password-input) {
+    @include e(item) {
+      @include m(disabled) {
+        background-color: $sar-dark-disabled-shallow-bg-color;
+      }
+    }
+
+    @include e(halfline) {
+      @include m(border) {
+        border-color: $sar-password-input-border-dark-color;
+      }
+
+      @include m(border-active) {
+        border-color: $sar-password-input-active-border-dark-color;
+      }
+
+      @include m(underline) {
+        border-bottom-color: $sar-password-input-border-dark-color;
+      }
+
+      @include m(underline-active) {
+        border-bottom-color: $sar-password-input-active-border-dark-color;
+      }
+    }
+
+    @include e(plaintext) {
+      @include m(disabled) {
+        color: $sar-dark-disabled-color;
+      }
+    }
+
+    @include e(ciphertext) {
+      background-color: $sar-password-input-ciphertext-dark-bg-color;
+
+      @include m(disabled) {
+        color: $sar-dark-disabled-color;
+      }
+    }
+
+    @include e(cursor) {
+      background-color: $sar-password-input-cursor-dark-color;
+    }
+  }
+}

package/dist/picker/InertialMotion.d.ts

@@ -0,0 +1,20 @@
+export interface InertialMotionOptions {
+    scrollHeight: number;
+    contentHeight: number;
+    onReset: (offsetY: number, duration: number, bezier: string) => void;
+    onStop: () => void;
+    onMove: (offsetY: number) => void;
+    onOutsideEnd: (offsetY: number) => void;
+    onInsideEnd: (offsetY: number) => void;
+    beforeMonmentum: (offsetY: number) => number;
+    onMomentum: (offsetY: number, duration: number, bezier: string) => void;
+    maxOverflowY?: number;
+}
+export declare function createInertialMotion(options: InertialMotionOptions): {
+    onStart: (clientY: number) => void;
+    onMove: (clientY: number) => void;
+    onEnd: () => void;
+    setCurrentOffsetY: (offsetY: number) => void;
+    setSize: (scrollH: number, contentH: number) => void;
+    destroy: () => void;
+};