sard 1.0.0-canary.0

package/dist/animated/index.js

@@ -0,0 +1,101 @@
+import { Text, View } from '@tarojs/components';
+import { noop } from '../utils';
+class AnimatedInterpolation {
+    constructor(config) {
+        void config;
+    }
+}
+class AnimatedValue {
+    constructor(value, config) {
+        void value;
+        void config;
+    }
+    setValue(value) {
+        void value;
+    }
+    setOffset(offset) {
+        void offset;
+    }
+    flattenOffset() {
+        void null;
+    }
+    extractOffset() {
+        void null;
+    }
+    interpolate(config) {
+        return new AnimatedInterpolation(config);
+    }
+    stopAnimation() {
+        void null;
+    }
+    addListener(callback) {
+        void callback;
+        return '';
+    }
+    removeListener(id) {
+        void id;
+    }
+    removeAllListeners() {
+        void null;
+    }
+}
+class CompositeAnimation {
+    constructor(value, config) {
+        void value;
+        void config;
+    }
+    start(callback) {
+        void callback;
+    }
+    stop() {
+        void null;
+    }
+    reset() {
+        void null;
+    }
+}
+function timing(value, config) {
+    return new CompositeAnimation(value, config);
+}
+function loop(animation, config) {
+    return new CompositeAnimation(animation, config);
+}
+function parallel(animations, config) {
+    return new CompositeAnimation(animations, config);
+}
+function sequence(animations) {
+    return new CompositeAnimation(animations);
+}
+function delay(time) {
+    return new CompositeAnimation(time);
+}
+class Animated {
+    static View = View;
+    static Text = Text;
+    static Value = AnimatedValue;
+    static timing = timing;
+    static loop = loop;
+    static parallel = parallel;
+    static sequence = sequence;
+    static delay = delay;
+}
+class Easing {
+    static step0 = noop;
+    static step1 = noop;
+    static linear = noop;
+    static ease = noop;
+    static quad = noop;
+    static cubic = noop;
+    static poly = noop;
+    static sin = noop;
+    static circle = noop;
+    static exp = noop;
+    static elastic = noop;
+    static back = noop;
+    static bounce = noop;
+    static bezier = noop;
+    static in = noop;
+    static out = noop;
+    static inOut = noop;
+}
+export { Easing, Animated };

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

@@ -0,0 +1,4 @@
+import { Easing } from 'react-native';
+declare const _Animated: any;
+export { _Animated as Animated, Easing };
+export default _Animated;

package/dist/animated/index.rn.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo, useRef } from 'react';
+import { Animated, Easing, PanResponder } from 'react-native';
+const AnimatedView = Animated.View;
+const _Animated = { ...Animated };
+const maxDistance = 10;
+const maxDuration = 800;
+_Animated.View = forwardRef((props, ref) => {
+    const { onClick, ...restProps } = props;
+    const downTimestamp = useRef(0);
+    const panResponder = useMemo(() => {
+        return onClick
+            ? PanResponder.create({
+                onStartShouldSetPanResponder: () => true,
+                onPanResponderGrant: () => {
+                    downTimestamp.current = Date.now();
+                },
+                onPanResponderRelease: (evt, gestureState) => {
+                    const { dx, dy } = gestureState;
+                    const timestamp = Date.now();
+                    if (Math.abs(dx) < maxDistance &&
+                        Math.abs(dy) < maxDistance &&
+                        timestamp - downTimestamp.current < maxDuration) {
+                        onClick?.(evt);
+                    }
+                },
+            })
+            : {
+                panHandlers: null,
+            };
+    }, [onClick]);
+    return (_jsx(AnimatedView, { ...restProps, ...panResponder.panHandlers, ref: ref }));
+});
+export { _Animated as Animated, Easing };
+export default _Animated;

package/dist/avatar/Group.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { BaseProps } from '../base';
+export interface AvatarGroupProps extends BaseProps {
+    gap?: string | number;
+    direction?: 'left' | 'right';
+    maxCount?: number;
+}
+export declare const AvatarGroup: FC<AvatarGroupProps>;
+export default AvatarGroup;

package/dist/avatar/Group.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement } from 'react';
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { Avatar } from './index';
+import { useBem } from '../use';
+import { filterNullish } from '../utils';
+export const AvatarGroup = (props) => {
+    const { className, style, children, gap, direction = 'right', maxCount = 5, ...restProps } = props;
+    const [bem] = useBem('avatar');
+    const count = Children.count(children);
+    return (_jsxs(View, { ...restProps, className: classNames(bem.e('group'), className), style: style, children: [Children.map(children, (item, index) => {
+                return index > maxCount - 1
+                    ? null
+                    : cloneElement(item, {
+                        className: classNames(bem.m('in-group'), bem.m('later', index > 0)),
+                        style: filterNullish({
+                            marginLeft: index === 0 ? 0 : gap,
+                            zIndex: direction === 'left' ? count - index : undefined,
+                        }),
+                    });
+            }), count > maxCount && (_jsx(Avatar, { className: bem.m('rest'), style: filterNullish({
+                    marginLeft: gap,
+                    zIndex: direction === 'left' ? 0 : undefined,
+                }), children: '+' + (count - maxCount) }))] }));
+};
+export default AvatarGroup;

package/dist/avatar/index.d.ts

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+import { IconProps } from '../icon';
+import { AvatarGroup } from './Group';
+import { BaseProps } from '../base';
+export * from './Group';
+export interface AvatarProps extends BaseProps {
+    shape?: 'circle' | 'square';
+    size?: number;
+    src?: string;
+    iconProps?: IconProps;
+    extra?: ReactNode;
+}
+export interface AvatarFC extends FC<AvatarProps> {
+    Group: typeof AvatarGroup;
+}
+export declare const Avatar: AvatarFC;
+export default Avatar;

package/dist/avatar/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Image, View } from '@tarojs/components';
+import classNames from 'classnames';
+import { Icon } from '../icon';
+import { AvatarGroup } from './Group';
+import { useBem } from '../use';
+import { filterNullish } from '../utils';
+export * from './Group';
+export const Avatar = (props) => {
+    const { className, style, children, shape = 'circle', size, src, iconProps, extra, ...restProps } = props;
+    const [bem] = useBem('avatar');
+    return (_jsxs(View, { ...restProps, className: classNames(bem.b(), bem.m(shape), className), style: {
+            ...style,
+            ...filterNullish({
+                width: size,
+                height: size,
+            }),
+        }, children: [children ??
+                (src ? (_jsx(Image, { src: src, mode: "aspectFill", className: classNames(bem.e('image'), bem.m(shape)) })) : (_jsx(Icon, { name: "person", className: bem.e('icon'), ...iconProps }))), extra] }));
+};
+Avatar.Group = AvatarGroup;
+export default Avatar;

package/dist/avatar/index.scss

@@ -0,0 +1,82 @@
+@import '../style/base.scss';
+// #variables
+$sar-avatar-width: 64px !default;
+$sar-avatar-height: 64px !default;
+$sar-avatar-font-size: 32px !default;
+$sar-avatar-color: $sar-secondary-color !default;
+$sar-avatar-bg-color: $sar-secondary-bg-color !default;
+
+$sar-avatar-square-border-radius: $sar-rounded !default;
+
+$sar-avatar-group-avatar-border-color: $sar-emphasis-bg-color !default;
+$sar-avatar-group-avatar-gap: -16px !default;
+
+// 暗黑模式
+$sar-avatar-dark-color: $sar-dark-secondary-color !default;
+$sar-avatar-dark-bg-color: $sar-dark-secondary-bg-color !default;
+$sar-avatar-group-avatar-border-dark-color: $sar-dark-emphasis-bg-color !default;
+// #endvariables
+
+@include bem(avatar) {
+  @include b() {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: $sar-avatar-width;
+    height: $sar-avatar-height;
+    font-size: $sar-avatar-font-size;
+    color: $sar-avatar-color;
+    background-color: $sar-avatar-bg-color;
+  }
+
+  @include e(group) {
+    @include universal;
+    flex-direction: row;
+  }
+
+  @include e(image) {
+    @include universal;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(icon) {
+    font-size: $sar-avatar-font-size;
+    color: $sar-avatar-color;
+  }
+
+  @include m(circle) {
+    border-radius: $sar-rounded-full;
+  }
+
+  @include m(square) {
+    border-radius: $sar-avatar-square-border-radius;
+  }
+
+  @include m(in-group, rest) {
+    border: 1px solid $sar-avatar-group-avatar-border-color;
+  }
+
+  @include m(later) {
+    margin-left: $sar-avatar-group-avatar-gap;
+  }
+}
+
+@include theme(dark) {
+  @include bem(avatar) {
+    @include b() {
+      color: $sar-avatar-dark-color;
+      background-color: $sar-avatar-dark-bg-color;
+    }
+
+    @include m(in-group, rest) {
+      border-color: $sar-avatar-group-avatar-border-dark-color;
+    }
+
+    @include e(icon) {
+      color: $sar-avatar-dark-color;
+    }
+  }
+}

package/dist/badge/index.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode, NamedExoticComponent } from 'react';
+import { BaseProps } from '../base';
+export interface BadgeProps extends BaseProps {
+    value?: ReactNode;
+    max?: number;
+    showZero?: boolean;
+    color?: string;
+    textColor?: string;
+    isDot?: boolean;
+    fixed?: boolean;
+}
+export declare const Badge: NamedExoticComponent<BadgeProps>;
+export default Badge;

package/dist/badge/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from '@tarojs/components';
+import { memo } from 'react';
+import classNames from 'classnames';
+import { filterNullish, isNullish, isNumber } from '../utils';
+import { useBem } from '../use';
+export const Badge = memo((props) => {
+    const { className, style, children, value = 0, max = 99, showZero = false, color, textColor, isDot, fixed, ...restProps } = props;
+    const [bem] = useBem('badge');
+    const zeroHide = !isDot && value === 0 && !showZero;
+    return (_jsxs(View, { ...restProps, className: classNames(bem.b(), bem.m('fixed', fixed), className), style: style, children: [children, _jsx(View, { className: classNames(bem.e('content-wrapper'), bem.m('fixed', !fixed && !isNullish(children)), bem.m('zero-hide', zeroHide)), children: _jsx(View, { className: classNames(bem.e('content'), bem.em('content', 'fixed', fixed || !isNullish(children)), bem.m('is-dot', isDot)), style: filterNullish({
+                        backgroundColor: color,
+                        color: textColor,
+                    }), children: isDot ? '' : isNumber(value) && value > max ? `${max}+` : value }) })] }));
+});
+export default Badge;

package/dist/badge/index.scss

@@ -0,0 +1,81 @@
+@use 'sass:math';
+@import '../style/base.scss';
+// #variables
+$sar-badge-content-padding-x: 4px !default;
+$sar-badge-content-padding-y: 2px !default;
+$sar-badge-content-font-size: 12px !default;
+$sar-badge-content-height: $sar-badge-content-padding-y * 2 +
+  $sar-badge-content-font-size + 2px !default;
+$sar-badge-content-min-width: $sar-badge-content-padding-y * 2 +
+  $sar-badge-content-font-size + 2px !default;
+$sar-badge-content-bg-color: $sar-danger !default;
+$sar-badge-content-color: $sar-white !default;
+$sar-badge-content-border-color: $sar-white !default;
+$sar-badge-content-dot-size: 8px !default;
+
+// 暗黑模式
+$sar-badge-content-border-dark-color: $sar-gray-200 !default;
+// #endvariables
+
+@include bem(badge) {
+  @include b() {
+    @include universal;
+    justify-content: center;
+  }
+
+  @include e(content-wrapper) {
+    @include universal;
+  }
+
+  @include e(content) {
+    @include universal;
+    flex: none;
+    justify-content: center;
+    align-self: center;
+    min-width: $sar-badge-content-min-width;
+    height: $sar-badge-content-height;
+    padding-top: $sar-badge-content-padding-y;
+    padding-bottom: $sar-badge-content-padding-y;
+    padding-left: $sar-badge-content-padding-x;
+    padding-right: $sar-badge-content-padding-x;
+    font-size: $sar-badge-content-font-size;
+    line-height: $sar-badge-content-font-size * $sar-leading-none;
+    text-align: center;
+    border: 1px solid $sar-badge-content-border-color;
+    border-radius: $sar-rounded-full;
+    color: $sar-badge-content-color;
+    background-color: $sar-badge-content-bg-color;
+
+    @include m(fixed) {
+      top: math.div(-$sar-badge-content-height, 2);
+      left: 50%;
+    }
+  }
+
+  @include m(fixed) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 10;
+  }
+
+  @include m(zero-hide) {
+    display: none;
+  }
+
+  @include m(is-dot) {
+    width: $sar-badge-content-dot-size;
+    height: $sar-badge-content-dot-size;
+    min-width: $sar-badge-content-dot-size;
+    padding: 0;
+    border-radius: $sar-rounded-full;
+  }
+}
+
+@include theme(dark) {
+  @include bem(badge) {
+    @include e(content) {
+      border-color: $sar-badge-content-border-dark-color;
+    }
+  }
+}

package/dist/base.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface BaseProps {
+    className?: string;
+    style?: CSSProperties | {
+        [varName: string]: string | number | null | undefined;
+    };
+    children?: ReactNode;
+    id?: string;
+}
+export type PrimitiveType = number | string | boolean | null | undefined | symbol | bigint;
+export type AnyFunction = (...args: any[]) => any;

package/dist/base.js

@@ -0,0 +1 @@
+export {};

package/dist/button/CustomButton.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { BaseProps } from '../base';
+export interface CustomButtonProps extends BaseProps {
+    formType?: 'submit' | 'reset';
+    onClick?: (event: any) => void;
+    disabled?: boolean;
+}
+export declare const CustomButton: import("react").ForwardRefExoticComponent<CustomButtonProps & import("react").RefAttributes<any>>;
+export default CustomButton;

package/dist/button/CustomButton.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useContext } from 'react';
+import { View } from '@tarojs/components';
+import { CustomFormContext } from '../form/CustomForm';
+import { useEvent } from '../use';
+import { isRN } from '../utils';
+export const CustomButton = forwardRef((props, ref) => {
+    const { className, style, children, formType, onClick, disabled, ...restProps } = props;
+    const formContext = useContext(CustomFormContext);
+    const handleClick = useEvent((event) => {
+        if (!disabled) {
+            if (formType === 'submit') {
+                formContext.submit();
+            }
+            else if (formType === 'reset') {
+                formContext.reset();
+            }
+        }
+        onClick?.(event);
+    });
+    return (_jsx(View, { ...restProps, ref: ref, className: className, style: style, onClick: handleClick, ...(!isRN ? { disabled: disabled } : null), children: children }));
+});
+export default CustomButton;

package/dist/button/index.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { LoadingProps } from '../loading';
+import { ITouchEvent } from '@tarojs/components';
+import { BaseProps } from '../base';
+import { IconProps } from '../icon';
+export interface ButtonProps extends BaseProps {
+    type?: 'default' | 'pale' | 'mild' | 'outline' | 'text' | 'pale-text';
+    theme?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger';
+    size?: 'mini' | 'small' | 'medium' | 'large';
+    round?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    loadingProps?: LoadingProps;
+    iconProps?: IconProps;
+    before?: ReactNode;
+    color?: string;
+    onClick?: (event: ITouchEvent) => void;
+    [key: PropertyKey]: any;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<any>>;
+export default Button;

package/dist/button/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+import { Loading } from '../loading';
+import { Button as TaroButton, Text, View, } from '@tarojs/components';
+import { filterNullish, isNullish, isPC, isRN, isVisibleEmpty } from '../utils';
+import { useBem, useEvent } from '../use';
+import CustomButton from './CustomButton';
+import Pressable from '../pressable';
+import Halfline from '../halfline';
+import Icon from '../icon';
+const ButtonElement = isRN || isPC ? CustomButton : TaroButton;
+const mapIconSize = {
+    mini: 14,
+    small: 16,
+    medium: 18,
+    large: 20,
+};
+export const Button = forwardRef((props, ref) => {
+    const { className, style, children, type = 'default', theme = 'primary', size = 'medium', round = false, disabled, loading, loadingProps, iconProps, before, color, onClick, ...restProps } = props;
+    const [bem] = useBem('button');
+    const handleClick = useEvent((event) => {
+        if (disabled || loading) {
+            return;
+        }
+        onClick?.(event);
+    });
+    return (_jsx(Pressable, { disabled: disabled || loading, children: ({ pressed }) => (_jsxs(ButtonElement, { ...restProps, ref: ref, className: classNames(bem.b(), bem.m(type), bem.m(`${type}-${theme}`), bem.m(size), bem.m('round', round), bem.m('disabled', disabled), bem.m('loading', loading), bem.m('pressed', pressed && type === 'pale-text'), bem.m('is-icon', !isNullish(iconProps)), bem.m(`${type}-disabled`, disabled), className), style: style, disabled: disabled || loading || undefined, hoverClass: "", onClick: handleClick, children: [before, _jsx(View, { className: bem.e('loading-wrapper'), children: loading && (_jsx(Loading, { ...loadingProps, className: classNames(bem.e('loading'), bem.em('loading', `${type}-${theme}`), bem.em('loading', `${type}-disabled`, disabled)), size: mapIconSize[size], color: color })) }), _jsx(Text, { className: classNames(bem.e('content'), bem.em('content', `${type}-${theme}`), bem.em('content', size), bem.em('content', `${type}-disabled`, disabled), bem.em('content', `gap-${size}`, loading && !isVisibleEmpty(children))), style: filterNullish({
+                        color,
+                    }), children: isNullish(iconProps) ? children : _jsx(Icon, { ...iconProps }) }), type === 'outline' && (_jsx(View, { className: bem.e('halfline-wrapper'), children: _jsx(Halfline, { className: classNames(bem.e('halfline'), bem.em('halfline', theme), bem.em('halfline', size), bem.em('halfline', 'round', round), bem.em('halfline', 'disabled', disabled)), style: filterNullish({
+                            borderColor: color,
+                        }) }) })), type !== 'pale-text' && (_jsx(View, { className: classNames(bem.e('shade'), bem.em('shade', 'pressed', pressed), bem.em('shade', type)) }))] })) }));
+});
+export default Button;