sard 1.0.0-canary.0

package/dist/popup/index.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, forwardRef, useEffect } from 'react';
+import classNames from 'classnames';
+import { View } from '@tarojs/components';
+import { useBem, useEvent } from '../use';
+import { filterNullish, isRN } from '../utils';
+import { CSSTransition } from '../transition/CSSTransition';
+import Mask from '../mask';
+import Modal from '../modal';
+export const Popup = forwardRef((props, ref) => {
+    const { className, style, children, visible = false, zIndex, contentClass, contentStyle, timeout = 300, effect, mask = true, transparent, maskClass, maskStyle, onMaskClick, onEnter, onEntering, onEntered, onExit, onExiting, onExited, onlyPopup, onRequestClose, ...restProps } = props;
+    const [bem] = useBem('popup');
+    const [transitionVisible, setTransitionVisible] = useState(visible);
+    const [realVisible, setRealVisible] = useState(visible);
+    useEffect(() => {
+        setTransitionVisible(visible);
+    }, [visible]);
+    const handleMaskClick = useEvent((event) => {
+        onMaskClick?.(event);
+    });
+    const handleEnter = useEvent(() => {
+        setRealVisible(true);
+        onEnter?.();
+    });
+    const handleEntering = useEvent(() => {
+        onEntering?.();
+    });
+    const handleEntered = useEvent(() => {
+        onEntered?.();
+    });
+    const handleExit = useEvent(() => {
+        onExit?.();
+    });
+    const handleExiting = useEvent(() => {
+        onExiting?.();
+    });
+    const handleExited = useEvent(() => {
+        setRealVisible(false);
+        onExited?.();
+    });
+    const renderPopup = () => {
+        return (_jsxs(View, { className: classNames(bem.b(), bem.m(effect, effect), className), style: {
+                ...style,
+                display: visible || realVisible ? 'flex' : 'none',
+                ...(!isRN
+                    ? {
+                        visibility: transitionVisible || realVisible ? 'visible' : 'hidden',
+                    }
+                    : null),
+                ...filterNullish({
+                    zIndex,
+                }),
+            }, children: [mask && (_jsx(Mask, { visible: transitionVisible, zIndex: zIndex, timeout: timeout, transparent: transparent, onClick: handleMaskClick, className: maskClass, style: maskStyle })), _jsx(CSSTransition, { in: transitionVisible, appear: true, timeout: timeout, effect: effect, onEnter: handleEnter, onEntering: handleEntering, onEntered: handleEntered, onExit: handleExit, onExiting: handleExiting, onExited: handleExited, ...restProps, className: classNames(bem.e('content'), bem.em('content', effect, effect), contentClass), style: contentStyle, ref: ref, children: children })] }));
+    };
+    if (onlyPopup) {
+        return renderPopup();
+    }
+    return (_jsx(Modal, { visible: realVisible || visible, onRequestClose: onRequestClose, children: renderPopup() }));
+});
+export default Popup;

package/dist/popup/index.scss

@@ -0,0 +1,60 @@
+@import '../style/base.scss';
+// #variables
+$sar-popup-z-index: 1100 !default;
+// #endvariables
+
+@include bem(popup) {
+  @include b() {
+    @include universal;
+    @include fixed();
+    top: 0;
+    left: 0;
+    z-index: $sar-popup-z-index;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    pointer-events: box-none;
+    @include ifweb {
+      pointer-events: none;
+    }
+
+    @include m(slide-top) {
+      justify-content: flex-start;
+    }
+
+    @include m(slide-right) {
+      align-items: flex-end;
+    }
+
+    @include m(slide-bottom) {
+      justify-content: flex-end;
+    }
+
+    @include m(slide-left) {
+      align-items: flex-start;
+    }
+
+    @include m(fade, zoom) {
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  @include e(content) {
+    @include universal;
+    z-index: 1;
+
+    @include ifweb {
+      pointer-events: auto;
+    }
+
+    @include m(slide-right) {
+      flex: 1;
+    }
+
+    @include m(slide-left) {
+      flex: 1;
+    }
+  }
+}

package/dist/pressable/index.d.ts

@@ -0,0 +1,13 @@
+import { FC, ReactElement } from 'react';
+export interface PressableProps {
+    disabled?: boolean;
+    children?: (state: {
+        pressed: boolean;
+    }) => ReactElement;
+    onTouchStart?: (event: any) => void;
+    onTouchMove?: (event: any) => void;
+    onTouchEnd?: (event: any) => void;
+    onTouchCancel?: (event: any) => void;
+}
+export declare const Pressable: FC<PressableProps>;
+export default Pressable;

package/dist/pressable/index.js

@@ -0,0 +1,58 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, useMemo, useRef, useState, } from 'react';
+import { useEvent } from '../use';
+import { isFunction, isPC, createMouseBinder } from '../utils';
+export const Pressable = (props) => {
+    const { disabled, children, onTouchStart, onTouchMove, onTouchEnd, onTouchCancel, } = props;
+    const [pressed, setPressed] = useState(false);
+    const handleTouchStart = useEvent(() => {
+        if (!disabled) {
+            setPressed(true);
+        }
+    });
+    const handleTouchEnd = useEvent(() => {
+        setPressed(false);
+    });
+    const elementRef = useRef();
+    const mouseBinder = useMemo(() => {
+        return isPC
+            ? createMouseBinder({
+                onStart(event) {
+                    handleTouchStart();
+                    onTouchStart?.(event);
+                    elementRef.current?.props.onMouseDown?.(event);
+                },
+                onMove(event) {
+                    onTouchMove?.(event);
+                },
+                onEnd(event) {
+                    handleTouchEnd();
+                    onTouchEnd?.(event);
+                },
+            })
+            : null;
+    }, []);
+    if (!isFunction(children)) {
+        return _jsx(_Fragment, { children: children });
+    }
+    elementRef.current = children({ pressed });
+    return cloneElement(elementRef.current, {
+        onTouchStart(event) {
+            handleTouchStart();
+            onTouchStart?.(event);
+        },
+        onTouchMove(event) {
+            onTouchMove?.(event);
+        },
+        onTouchEnd(event) {
+            handleTouchEnd();
+            onTouchEnd?.(event);
+        },
+        onTouchCancel(event) {
+            handleTouchEnd();
+            onTouchCancel?.(event);
+        },
+        ...mouseBinder,
+    });
+};
+export default Pressable;

package/dist/pressable/index.rn.d.ts

@@ -0,0 +1,13 @@
+import { FC, ReactElement } from 'react';
+export interface PressableProps {
+    disabled?: boolean;
+    children?: (state: {
+        pressed: boolean;
+    }) => ReactElement;
+    onTouchStart?: (event: any) => void;
+    onTouchMove?: (event: any) => void;
+    onTouchEnd?: (event: any) => void;
+    onTouchCancel?: (event: any) => void;
+}
+export declare const Pressable: FC<PressableProps>;
+export default Pressable;

package/dist/pressable/index.rn.js

@@ -0,0 +1,50 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { isValidElement, useMemo, useState } from 'react';
+import { isFunction } from '../utils';
+import { useEvent } from '../use';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+export const Pressable = (props) => {
+    const { disabled, children, onTouchStart, onTouchMove, onTouchEnd, onTouchCancel, } = props;
+    const [pressed, setPressed] = useState(false);
+    const handleTouchStart = useEvent((event) => {
+        if (!disabled) {
+            setPressed(true);
+        }
+        onTouchStart?.(event);
+    });
+    const handleTouchMove = useEvent((event) => {
+        onTouchMove?.(event);
+    });
+    const handleTouchEnd = useEvent((event) => {
+        setPressed(false);
+        onTouchEnd?.(event);
+    });
+    const handleTouchCancel = useEvent((event) => {
+        setPressed(false);
+        onTouchCancel?.(event);
+    });
+    const gesture = useMemo(() => {
+        return Gesture.Manual()
+            .onTouchesDown((event) => {
+            handleTouchStart(event);
+        })
+            .onTouchesMove((event) => {
+            handleTouchMove(event);
+        })
+            .onTouchesUp((event) => {
+            handleTouchEnd(event);
+        })
+            .onTouchesCancelled((event) => {
+            handleTouchCancel(event);
+        });
+    }, []);
+    if (!isFunction(children)) {
+        return _jsx(_Fragment, { children: children });
+    }
+    const element = children({ pressed });
+    if (!isValidElement(element)) {
+        return _jsx(_Fragment, { children: element });
+    }
+    return _jsx(GestureDetector, { gesture: gesture, children: element });
+};
+export default Pressable;

package/dist/progress-bar/index.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { BaseProps } from '../base';
+export interface ProgressBarProps extends BaseProps {
+    percent?: number;
+    color?: string;
+    trackColor?: string;
+    thickness?: number;
+}
+export declare const ProgressBar: FC<ProgressBarProps>;
+export default ProgressBar;

package/dist/progress-bar/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { useBem } from '../use';
+import { filterNullish } from '../utils';
+export const ProgressBar = (props) => {
+    const { className, style, children, percent = 0, color, trackColor, thickness, ...restProps } = props;
+    const [bem] = useBem('progress-bar');
+    return (_jsx(View, { ...restProps, className: classNames(bem.b(), className), style: {
+            ...style,
+            ...filterNullish({
+                backgroundColor: trackColor,
+                height: thickness,
+            }),
+        }, children: _jsx(View, { className: bem.e('trail'), style: {
+                width: `${percent}%`,
+                ...filterNullish({
+                    backgroundColor: color,
+                }),
+            }, children: children }) }));
+};
+export default ProgressBar;

package/dist/progress-bar/index.scss

@@ -0,0 +1,45 @@
+@import '../style/base.scss';
+// #variables
+$sar-progress-bar-height: 4px !default;
+$sar-progress-bar-border-radius: $sar-rounded-sm !default;
+$sar-progress-bar-bg-color: $sar-secondary-bg-color !default;
+
+$sar-progress-bar-trail-color: $sar-white !default;
+$sar-progress-bar-trail-bg-color: $sar-primary !default;
+$sar-progress-bar-trail-font-size: 12px !default;
+$sar-progress-bar-trail-transition-duration: $sar-duration-slow !default;
+
+// 暗黑模式
+$sar-progress-bar-dark-bg-color: $sar-dark-secondary-bg-color !default;
+// #endvariables
+
+@include bem(progress-bar) {
+  @include b() {
+    @include universal;
+    height: $sar-progress-bar-height;
+    border-radius: $sar-progress-bar-border-radius;
+    background-color: $sar-progress-bar-bg-color;
+    overflow: hidden;
+  }
+
+  @include e(trail) {
+    @include universal;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    font-size: $sar-progress-bar-trail-font-size;
+    color: $sar-progress-bar-trail-color;
+    background-color: $sar-progress-bar-trail-bg-color;
+    @include ifweb {
+      transition: width $sar-progress-bar-trail-transition-duration ease;
+    }
+  }
+}
+
+@include theme(dark) {
+  @include bem(progress-bar) {
+    @include b() {
+      background-color: $sar-progress-bar-dark-bg-color;
+    }
+  }
+}

package/dist/progress-circle/index.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { BaseProps } from '../base';
+export interface ProgressCircleProps extends BaseProps {
+    percent?: number;
+    color?: string;
+    trackColor?: string;
+    size?: number;
+    thickness?: number;
+}
+export declare const ProgressCircle: FC<ProgressCircleProps>;
+export default ProgressCircle;

package/dist/progress-circle/index.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { useBem } from '../use';
+import { filterNullish, minmax } from '../utils';
+export const ProgressCircle = (props) => {
+    const { className, style, children, percent = 0, color, trackColor, size = 100, thickness = 4, ...restProps } = props;
+    const [bem] = useBem('progress-circle');
+    const finalPercent = minmax(percent, 0, 100);
+    const radius = size / 2 - thickness / 2;
+    const angle = (percent / 100) * 360;
+    const radian = (angle / 180) * Math.PI;
+    const shrink = 0;
+    const renderHalf = (side, style) => {
+        return (_jsxs(View, { className: bem.e(side), children: [_jsx(View, { className: classNames(bem.e('trail'), bem.em('trail', side)), style: {
+                        width: size - shrink * 2,
+                        height: size - shrink * 2,
+                        margin: shrink,
+                        borderWidth: thickness - shrink * 2,
+                        ...filterNullish({
+                            borderColor: color,
+                        }),
+                    } }), _jsx(View, { className: classNames(bem.e('track-container'), bem.em('track-container', side)), style: style, children: _jsx(View, { className: classNames(bem.e('track-wrapper'), bem.em('track-wrapper', side)), children: _jsx(View, { className: classNames(bem.e('track'), bem.em('track', side)), style: filterNullish({
+                                borderWidth: thickness,
+                                ...filterNullish({
+                                    borderColor: trackColor,
+                                }),
+                            }) }) }) })] }));
+    };
+    const renderCap = (side, style) => {
+        return (_jsx(View, { className: classNames(bem.e('cap'), bem.em('cap', side)), style: {
+                width: thickness - shrink * 2,
+                height: thickness - shrink * 2,
+                backgroundColor: color,
+                ...style,
+            } }));
+    };
+    return (_jsxs(View, { ...restProps, className: classNames(bem.b(), className), style: {
+            ...style,
+            width: size,
+            height: size,
+        }, children: [renderHalf('left', {
+                transform: `rotate(${-180 + (finalPercent > 50 ? (180 / 50) * (finalPercent - 50) : 0)}deg)`,
+            }), renderHalf('right', {
+                transform: `rotate(${-180 + (360 / 100) * (finalPercent <= 50 ? finalPercent : 50)}deg)`,
+            }), renderCap('start', {
+                transform: `translate(${-thickness / 2}px, ${shrink}px)`,
+            }), renderCap('end', {
+                left: radius + thickness / 2 + Math.sin(radian) * radius,
+                top: radius + thickness / 2 - Math.cos(radian) * radius,
+                transform: `translate(${-thickness / 2 + shrink}px, ${-thickness / 2 + shrink}px)`,
+            }), children] }));
+};
+export default ProgressCircle;

package/dist/progress-circle/index.scss

@@ -0,0 +1,141 @@
+@use 'sass:math';
+@import '../style/base.scss';
+// #variables
+$sar-progress-circle-size: 100px !default;
+$sar-progress-circle-track-width: 4px !default;
+$sar-progress-circle-track-color: $sar-secondary-bg-color !default;
+
+$sar-progress-circle-trail-width: 4px !default;
+$sar-progress-circle-trail-color: $sar-primary !default;
+
+$sar-progress-circle-cap-width: $sar-progress-circle-trail-width !default;
+$sar-progress-circle-cap-half: math.div(
+  $sar-progress-circle-cap-width,
+  2
+) !default;
+
+// 暗黑模式
+$sar-progress-circle-track-dark-color: $sar-dark-secondary-bg-color !default;
+// #endvariables
+
+@include bem(progress-circle) {
+  @include b() {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    width: $sar-progress-circle-size;
+    height: $sar-progress-circle-size;
+  }
+
+  @include e(left, right) {
+    @include universal;
+    position: absolute;
+    top: 0;
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  @include e(left) {
+    left: 0;
+  }
+
+  @include e(right) {
+    right: 0;
+  }
+
+  @include e(trail) {
+    @include universal;
+    position: absolute;
+    top: 0;
+    width: 200%;
+    height: 100%;
+    border: $sar-progress-circle-trail-width solid
+      $sar-progress-circle-trail-color;
+    border-radius: $sar-rounded-full;
+
+    @include m(left) {
+      left: 0;
+    }
+    @include m(right) {
+      right: 0;
+    }
+  }
+
+  @include e(track-container) {
+    @include universal;
+    position: absolute;
+    top: 0;
+    width: 200%;
+    height: 100%;
+
+    @include m(left) {
+      left: 0;
+    }
+    @include m(right) {
+      right: 0;
+    }
+  }
+
+  @include e(track-wrapper) {
+    @include universal;
+    position: absolute;
+    top: 0;
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
+
+    @include m(left) {
+      right: 0;
+    }
+    @include m(right) {
+      left: 0;
+    }
+  }
+
+  @include e(track) {
+    @include universal;
+    position: absolute;
+    top: 0;
+    width: 200%;
+    height: 100%;
+    border: $sar-progress-circle-track-width solid
+      $sar-progress-circle-track-color;
+    border-radius: $sar-rounded-full;
+
+    @include m(left) {
+      right: 0;
+    }
+    @include m(right) {
+      left: 0;
+    }
+  }
+
+  @include e(cap) {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: $sar-progress-circle-trail-width;
+    height: $sar-progress-circle-trail-width;
+    background-color: $sar-progress-circle-trail-color;
+    border-radius: $sar-rounded-full;
+
+    @include m(start) {
+      transform: translate(-$sar-progress-circle-cap-half, 0);
+    }
+    @include m(end) {
+      transform: translate(
+        -$sar-progress-circle-cap-half,
+        -$sar-progress-circle-cap-half
+      );
+    }
+  }
+}
+
+@include theme(dark) {
+  @include bem(progress-circle) {
+    @include e(track) {
+      border-color: $sar-progress-circle-track-dark-color;
+    }
+  }
+}

package/dist/radio/Group.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { InternalCheckGroupProps } from '../use/useInternalSelect';
+export type RadioGroupProps = InternalCheckGroupProps<'single'>;
+export declare const RadioGroup: FC<RadioGroupProps>;
+export default RadioGroup;

package/dist/radio/Group.js

@@ -0,0 +1,5 @@
+import { useInternalCheckGroup, } from '../use/useInternalSelect';
+export const RadioGroup = (props) => {
+    return useInternalCheckGroup('single', props);
+};
+export default RadioGroup;

package/dist/radio/index.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { RadioGroup } from './Group';
+import { InternalCheckProps } from '../use/useInternalSelect';
+export * from './Group';
+export type RadioProps = InternalCheckProps;
+export interface RadioFC extends FC<RadioProps> {
+    Group: typeof RadioGroup;
+}
+export declare const Radio: RadioFC;
+export default Radio;

package/dist/radio/index.js

@@ -0,0 +1,8 @@
+import { RadioGroup } from './Group';
+import { useInternalSelect } from '../use/useInternalSelect';
+export * from './Group';
+export const Radio = ((props) => {
+    return useInternalSelect('single', 'radio', props);
+});
+Radio.Group = RadioGroup;
+export default Radio;

package/dist/radio/index.scss

@@ -0,0 +1,77 @@
+@import '../style/base.scss';
+// #variables
+$sar-radio-icon-font-size: 20px !default;
+$sar-radio-icon-color: $sar-quaternary-color !default;
+$sar-radio-icon-checked-color: $sar-primary !default;
+$sar-radio-icon-transition-duration: $sar-duration !default;
+
+$sar-radio-label-margin-left: 8px !default;
+
+$sar-radio-margin-left: 20px !default;
+$sar-radio-margin-top: 10px !default;
+
+// 暗黑模式
+$sar-radio-icon-dark-color: $sar-dark-quaternary-color !default;
+$sar-radio-icon-checked-dark-color: $sar-primary !default;
+// #endvariables
+
+@include bem(radio) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    align-items: center;
+
+    @include ifweb {
+      cursor: pointer;
+    }
+  }
+
+  @include e(icon) {
+    @include universal;
+    font-size: $sar-radio-icon-font-size;
+    color: $sar-radio-icon-color;
+    @include ifweb {
+      transition: color $sar-radio-icon-transition-duration;
+    }
+
+    @include m(checked) {
+      color: $sar-radio-icon-checked-color;
+    }
+
+    @include m(disabled) {
+      color: $sar-disabled-deep-bg-color;
+    }
+  }
+
+  @include e(label) {
+    @include universal;
+    flex-direction: row;
+    margin-left: $sar-radio-label-margin-left;
+
+    @include m(disabled) {
+      color: $sar-disabled-color;
+    }
+  }
+}
+
+@include theme(dark) {
+  @include bem(radio) {
+    @include e(icon) {
+      color: $sar-radio-icon-dark-color;
+
+      @include m(checked) {
+        color: $sar-radio-icon-checked-dark-color;
+      }
+
+      @include m(disabled) {
+        color: $sar-disabled-deep-bg-color;
+      }
+    }
+
+    @include e(label) {
+      @include m(disabled) {
+        color: $sar-dark-disabled-color;
+      }
+    }
+  }
+}

package/dist/rate/index.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode, FC } from 'react';
+import { IconProps } from '../icon';
+import { BaseProps } from '../base';
+export interface RateProps extends Omit<BaseProps, 'children'> {
+    value?: number;
+    defaultValue?: number;
+    allowHalf?: boolean;
+    clearable?: boolean;
+    count?: number;
+    size?: number;
+    gap?: number;
+    icon?: ReactNode;
+    iconProps?: IconProps;
+    voidIcon?: ReactNode;
+    voidIconProps?: IconProps;
+    color?: string;
+    voidColor?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    onChange?: (value: number) => void;
+}
+export declare const Rate: FC<RateProps>;
+export default Rate;