sard 1.0.0-canary.0

package/dist/accordion/Item.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties, FC, ReactNode } from 'react';
+export interface AccordionItemProps {
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    title?: ReactNode;
+    disabled?: boolean;
+    duration?: number;
+    arrow?: (expanded: boolean) => ReactNode;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onChange?: (expanded: boolean) => void;
+    _innerKey?: string | number;
+    _multiple?: boolean;
+}
+export declare const AccordionItem: FC<AccordionItemProps>;
+export default AccordionItem;

package/dist/accordion/Item.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { View } from '@tarojs/components';
+import { useBem, useEvent, useSelect } from '../use';
+import Collapse from '../collapse';
+import List from '../list';
+import Halfline from '../halfline';
+export const AccordionItem = (props) => {
+    const { className, style, children, title, arrow, disabled, duration, expanded, defaultExpanded, onChange, _innerKey, _multiple, ...restProps } = props;
+    const [bem] = useBem('accordion');
+    const [selected, toggle] = useSelect(_multiple ? 'multiple' : 'single', {
+        value: expanded,
+        defaultValue: defaultExpanded,
+        trigger: onChange,
+        initialValue: false,
+        clearable: true,
+    }, _innerKey);
+    const handleClick = useEvent(() => {
+        if (!disabled) {
+            toggle();
+        }
+    });
+    return (_jsxs(View, { ...restProps, className: classNames(bem.e('item'), className), style: style, children: [_jsx(List.Item, { linkable: true, clickable: !disabled, title: title, arrowDirection: selected ? 'up' : 'down', onClick: handleClick, bodyClass: bem.m('disabled', disabled), footerClass: bem.m('disabled', disabled), className: classNames(bem.e('item-header'), bem.em('item-header', 'disabled', disabled)), arrow: arrow ? arrow(selected) : undefined }), _jsx(Collapse, { duration: duration, visible: selected, children: _jsxs(View, { className: bem.e('item-body'), children: [_jsx(Halfline, { direction: "top", className: bem.e('halfline') }), children] }) })] }));
+};
+export default AccordionItem;

package/dist/accordion/index.d.ts

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from 'react';
+import { BaseProps } from '../base';
+import { AccordionItem } from './Item';
+export * from './Item';
+interface AccordionBaseProps extends BaseProps {
+    duration?: number;
+    arrow?: (expanded: boolean) => ReactNode;
+}
+interface AccordionSingleProps<T = number | string> extends AccordionBaseProps {
+    multiple?: false;
+    defaultActiveKey?: T;
+    activeKey?: T;
+    onChange?: (activeKey: T) => void;
+}
+interface AccordionMultipleProps<T = (string | number)[]> extends AccordionBaseProps {
+    multiple: true;
+    defaultActiveKey?: T;
+    activeKey?: T;
+    onChange?: (activeKey: T) => void;
+}
+export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+export interface AccordionFC extends FC<AccordionProps> {
+    Item: typeof AccordionItem;
+}
+export declare const Accordion: AccordionFC;
+export default Accordion;

package/dist/accordion/index.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement } from 'react';
+import { CustomWrapper } from '@tarojs/components';
+import { useSelectGroup, SelectContext } from '../use';
+import { AccordionItem } from './Item';
+import List from '../list';
+export * from './Item';
+export const Accordion = (props) => {
+    const { className, style, children, defaultActiveKey, activeKey, multiple = false, duration = 300, arrow, onChange, ...restProps } = props;
+    const context = useSelectGroup({
+        value: activeKey,
+        defaultValue: defaultActiveKey,
+        trigger: onChange,
+        initialValue: () => (multiple ? [] : undefined),
+    });
+    return (_jsx(CustomWrapper, { children: _jsx(SelectContext.Provider, { value: context, children: _jsx(List, { ...restProps, className: className, style: style, children: Children.map(children, (element, index) => {
+                    const key = element.key ?? index;
+                    return cloneElement(element, {
+                        _innerKey: key,
+                        _multiple: multiple,
+                        duration: element.props.duration ?? duration,
+                        arrow: element.props.arrow ?? arrow,
+                    });
+                }) }) }) }));
+};
+Accordion.Item = AccordionItem;
+export default Accordion;

package/dist/accordion/index.scss

@@ -0,0 +1,49 @@
+@import '../style/base.scss';
+// #variables
+$sar-accordion-item-body-padding-x: 16px !default;
+$sar-accordion-item-body-padding-y: 16px !default;
+$sar-accordion-item-body-bg-color: $sar-emphasis-bg-color !default;
+
+// 暗黑模式
+$sar-accordion-item-body-dark-bg-color: $sar-dark-emphasis-bg-color !default;
+// #endvariables
+
+@include bem(accordion) {
+  @include e(item) {
+    @include universal;
+  }
+
+  @include e(item-header) {
+    @include universal;
+
+    @include m(disabled) {
+      @include ifweb {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  @include e(item-body) {
+    @include universal;
+    padding: $sar-accordion-item-body-padding-y
+      $sar-accordion-item-body-padding-x;
+    background-color: $sar-accordion-item-body-bg-color;
+  }
+
+  @include e(halfline) {
+    left: $sar-accordion-item-body-padding-x;
+    right: $sar-accordion-item-body-padding-x;
+  }
+
+  @include m(disabled) {
+    @include disabled;
+  }
+}
+
+@include theme(dark) {
+  @include bem(accordion) {
+    @include e(item-body) {
+      background-color: $sar-accordion-item-body-dark-bg-color;
+    }
+  }
+}

package/dist/action-sheet/ActionSheet.d.ts

@@ -0,0 +1,24 @@
+import { ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes } from 'react';
+import { PopupProps } from '../popup';
+import { ActionSheetItem, ActionSheetItemProps } from './Item';
+import { BaseProps } from '../base';
+export type { ActionSheetItemProps } from './Item';
+export interface ActionSheetProps extends BaseProps, PopupProps {
+    description?: ReactNode;
+    itemList?: (string | ActionSheetItemProps)[];
+    cancel?: ReactNode;
+    onSelect?: (index: number, item: string | ActionSheetItemProps) => void | Promise<any>;
+    onCancel?: () => void | Promise<any>;
+    onClose?: () => void | Promise<any>;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisible?: (visible: boolean) => void;
+    maskClosable?: boolean;
+}
+export interface ActionSheetRef {
+}
+export interface ActionSheetFC extends ForwardRefExoticComponent<PropsWithoutRef<ActionSheetProps> & RefAttributes<ActionSheetRef>> {
+    Item: typeof ActionSheetItem;
+}
+export declare const ActionSheet: ActionSheetFC;
+export default ActionSheet;

package/dist/action-sheet/ActionSheet.js

@@ -0,0 +1,79 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Children, cloneElement, forwardRef, useImperativeHandle, } from 'react';
+import classNames from 'classnames';
+import { View } from '@tarojs/components';
+import { useBem, useControllableValue, useEvent } from '../use';
+import { Popup } from '../popup';
+import { ActionSheetItem } from './Item';
+import { isFunction, isNullish, isString, noop } from '../utils';
+import Halfline from '../halfline';
+import Pressable from '../pressable';
+import SafeArea from '../safe-area';
+export const ActionSheet = forwardRef((props, ref) => {
+    const { className, style, contentClass, contentStyle, children, onMaskClick, description, itemList, cancel, onSelect, onCancel, onClose, visible, defaultVisible, onVisible, maskClosable = true, ...restProps } = props;
+    const [bem] = useBem('action-sheet');
+    const [innerVisible, setInnerVisible] = useControllableValue({
+        value: visible,
+        defaultValue: defaultVisible,
+        trigger: onVisible,
+        initialValue: false,
+    });
+    const perhapsClose = (callback) => {
+        if (isFunction(callback)) {
+            const result = callback();
+            if (result instanceof Promise) {
+                return result
+                    .then(() => {
+                    setInnerVisible?.(false);
+                })
+                    .catch(noop);
+            }
+        }
+        setInnerVisible?.(false);
+    };
+    const handleItemClick = useEvent((index, item) => {
+        perhapsClose(() => {
+            return onSelect?.(index, item);
+        });
+    });
+    const handleMaskClick = useEvent((event) => {
+        onMaskClick?.(event);
+        if (maskClosable) {
+            perhapsClose(onClose);
+        }
+    });
+    const handleRequestClose = useEvent(() => {
+        setInnerVisible(false);
+    });
+    const handleCancelClick = useEvent(() => {
+        perhapsClose(onCancel);
+    });
+    useImperativeHandle(ref, () => ({}), []);
+    return (_jsxs(Popup, { ...restProps, visible: innerVisible, effect: "slide-bottom", className: className, style: style, contentClass: classNames(bem.b(), bem.m('headless', isNullish(description)), contentClass), contentStyle: contentStyle, onMaskClick: handleMaskClick, catchMove: true, onRequestClose: handleRequestClose, children: [!isNullish(description) && (_jsxs(View, { className: bem.e('header'), children: [_jsx(View, { className: bem.e('description'), children: description }), _jsx(Halfline, { direction: "bottom" })] })), _jsx(View, { className: bem.e('body'), children: itemList
+                    ? itemList.map((item, index) => {
+                        const itemProps = isString(item)
+                            ? {
+                                name: item,
+                            }
+                            : item;
+                        return (_createElement(ActionSheetItem, { ...itemProps, key: index, _later: index > 0, className: classNames(bem.em('item', 'headless-first', isNullish(description) && index === 0)), onClick: (event) => {
+                                handleItemClick(index, item);
+                                if (!isString(item)) {
+                                    item.onClick?.(event);
+                                }
+                            } }));
+                    })
+                    : Children.map(children, (element, index) => {
+                        return cloneElement(element, {
+                            className: classNames(bem.em('item', 'headless-first', isNullish(description) && index === 0)),
+                            _later: index > 0,
+                            onClick: (event) => {
+                                handleItemClick(index, element.props);
+                                element.props.onClick?.(event);
+                            },
+                        });
+                    }) }), !isNullish(cancel) && (_jsxs(_Fragment, { children: [_jsx(View, { className: bem.e('gap') }), _jsx(Pressable, { children: ({ pressed }) => (_jsx(View, { className: classNames(bem.e('cancel'), bem.m('pressed', pressed)), onClick: handleCancelClick, children: cancel })) })] })), _jsx(SafeArea, { direction: "bottom" })] }));
+});
+ActionSheet.Item = ActionSheetItem;
+export default ActionSheet;

package/dist/action-sheet/Agent.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ActionSheetProps, ActionSheetRef } from './ActionSheet';
+import { AgentProps, MapIdAgent } from '../utils/imperative';
+export declare const mapIdAgent: MapIdAgent<ActionSheetProps, ActionSheetRef>;
+export declare const ActionSheetAgent: (agentProps: AgentProps<ActionSheetProps>) => import("react").CElement<any, import("react").Component<any, any, any>>;
+export default ActionSheetAgent;

package/dist/action-sheet/Agent.js

@@ -0,0 +1,7 @@
+import { ActionSheet } from './ActionSheet';
+import { useAgent } from '../utils/imperative';
+export const mapIdAgent = {};
+export const ActionSheetAgent = (agentProps) => {
+    return useAgent(ActionSheet, agentProps, mapIdAgent, 'actionSheet');
+};
+export default ActionSheetAgent;

package/dist/action-sheet/Item.d.ts

@@ -0,0 +1,16 @@
+import { FC, ReactNode } from 'react';
+import { ITouchEvent } from '@tarojs/components';
+import { LoadingProps } from '../loading';
+import { BaseProps } from '../base';
+export interface ActionSheetItemProps extends BaseProps {
+    name?: ReactNode;
+    description?: ReactNode;
+    color?: string;
+    loading?: boolean;
+    loadingProps?: LoadingProps;
+    disabled?: boolean;
+    onClick?: (event: ITouchEvent) => void;
+    _later?: boolean;
+}
+export declare const ActionSheetItem: FC<ActionSheetItemProps>;
+export default ActionSheetItem;

package/dist/action-sheet/Item.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { View } from '@tarojs/components';
+import Loading from '../loading';
+import { isNullish } from '../utils';
+import { useBem, useEvent } from '../use';
+import Halfline from '../halfline';
+import Pressable from '../pressable';
+export const ActionSheetItem = (props) => {
+    const { className, style, children, name, description, color, loading, loadingProps, disabled, onClick, _later, ...restProps } = props;
+    const [bem] = useBem('action-sheet');
+    const handleClick = useEvent((event) => {
+        if (!disabled && !loading) {
+            onClick?.(event);
+        }
+    });
+    return (_jsx(Pressable, { disabled: disabled || loading, children: ({ pressed }) => (_jsxs(View, { ...restProps, className: classNames(bem.e('item'), bem.em('item', 'disabled', disabled), bem.em('item', 'loading', loading), bem.m('pressed', pressed), className), style: {
+                ...style,
+                color,
+            }, onClick: handleClick, children: [loading ? (_jsx(Loading, { ...loadingProps })) : (_jsxs(_Fragment, { children: [(!isNullish(name) || !isNullish(children)) && (_jsx(View, { className: classNames(bem.e('item-name'), bem.m('disabled', disabled)), children: name ?? children })), !isNullish(description) && (_jsx(View, { className: classNames(bem.e('item-description'), bem.m('disabled', disabled)), children: description }))] })), _later && _jsx(Halfline, { direction: "top" })] })) }));
+};
+export default ActionSheetItem;

package/dist/action-sheet/imperative.d.ts

@@ -0,0 +1,10 @@
+import { ActionSheetItemProps, ActionSheetProps } from './ActionSheet';
+export interface ActionSheetOptions extends ActionSheetProps {
+    id?: string;
+}
+export declare const show: (options: ActionSheetOptions) => Promise<{
+    index: number;
+    item: string | ActionSheetItemProps;
+}>;
+export declare const hide: (id?: string) => void;
+export declare const hideAll: () => void;

package/dist/action-sheet/imperative.js

@@ -0,0 +1,22 @@
+import { mapIdAgent } from './Agent';
+export const show = (options) => {
+    const { id = 'actionSheet', onSelect } = options;
+    return new Promise((resolve) => {
+        const ref = mapIdAgent[id];
+        if (ref) {
+            ref.current?.show({
+                ...options,
+                onSelect(index, item) {
+                    resolve({ index, item });
+                    return onSelect?.(index, item);
+                },
+            });
+        }
+    });
+};
+export const hide = (id = 'actionSheet') => {
+    mapIdAgent[id]?.current?.hide();
+};
+export const hideAll = () => {
+    Object.keys(mapIdAgent).forEach((key) => mapIdAgent[key]?.current?.hide());
+};

package/dist/action-sheet/index.d.ts

@@ -0,0 +1,12 @@
+import type { ActionSheetFC as ActionSheetOriginFC, ActionSheetProps, ActionSheetRef } from './ActionSheet';
+import { ActionSheetAgent } from './Agent';
+import { hide, hideAll, show } from './imperative';
+interface ActionSheetFC extends ActionSheetOriginFC {
+    show: typeof show;
+    hide: typeof hide;
+    hideAll: typeof hideAll;
+    Agent: typeof ActionSheetAgent;
+}
+declare const ActionSheet: ActionSheetFC;
+export { ActionSheet, ActionSheetProps, ActionSheetRef, ActionSheetAgent };
+export default ActionSheet;

package/dist/action-sheet/index.js

@@ -0,0 +1,10 @@
+import { ActionSheet as ActionSheetOrigin } from './ActionSheet';
+import { ActionSheetAgent } from './Agent';
+import { hide, hideAll, show } from './imperative';
+const ActionSheet = ActionSheetOrigin;
+ActionSheet.show = show;
+ActionSheet.hide = hide;
+ActionSheet.hideAll = hideAll;
+ActionSheet.Agent = ActionSheetAgent;
+export { ActionSheet, ActionSheetAgent };
+export default ActionSheet;

package/dist/action-sheet/index.scss

@@ -0,0 +1,148 @@
+@import '../style/base.scss';
+// #variables
+$sar-action-sheet-border-radius: $sar-rounded-xl !default;
+$sar-action-sheet-bg-color: $sar-emphasis-bg-color !default;
+
+$sar-action-sheet-header-padding: 16px !default;
+
+$sar-action-sheet-description-font-size: $sar-text-base !default;
+$sar-action-sheet-description-color: $sar-tertiary-color !default;
+
+$sar-action-sheet-item-min-height: 48px !default;
+$sar-action-sheet-item-padding: 8px 16px !default;
+
+$sar-action-sheet-gap-bg-color: $sar-gray-100 !default;
+$sar-action-sheet-gap-height: 8px !default;
+
+$sar-action-sheet-item-name-font-size: $sar-text-lg !default;
+
+$sar-action-sheet-item-description-margin-top: 0 !default;
+$sar-action-sheet-item-description-font-size: $sar-text-sm !default;
+$sar-action-sheet-item-description-color: $sar-tertiary-color !default;
+
+$sar-action-sheet-cancel-min-height: 48px !default;
+$sar-action-sheet-cancel-padding: 8px 16px !default;
+$sar-action-sheet-cancel-font-size: $sar-text-lg !default;
+
+$sar-action-sheet-active-bg-color: $sar-active-bg-color !default;
+
+// 暗黑模式
+$sar-action-sheet-dark-bg-color: $sar-dark-emphasis-bg-color !default;
+$sar-action-sheet-description-dark-color: $sar-dark-tertiary-color !default;
+$sar-action-sheet-gap-dark-bg-color: $sar-gray-900 !default;
+$sar-action-sheet-item-description-dark-color: $sar-dark-tertiary-color !default;
+$sar-action-sheet-active-dark-bg-color: $sar-dark-active-bg-color !default;
+// #endvariables
+
+@include bem(action-sheet) {
+  @include b() {
+    border-top-left-radius: $sar-action-sheet-border-radius;
+    border-top-right-radius: $sar-action-sheet-border-radius;
+    background-color: $sar-action-sheet-bg-color;
+    @include ifweb {
+      touch-action: none;
+    }
+  }
+
+  @include e(header) {
+    @include universal;
+    padding: $sar-action-sheet-header-padding;
+  }
+
+  @include e(description) {
+    @include universal;
+    font-size: $sar-action-sheet-description-font-size;
+    text-align: center;
+    color: $sar-action-sheet-description-color;
+  }
+
+  @include e(gap) {
+    @include universal;
+    height: $sar-action-sheet-gap-height;
+    background-color: $sar-action-sheet-gap-bg-color;
+  }
+
+  @include e(item) {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    min-height: $sar-action-sheet-item-min-height;
+    padding: $sar-action-sheet-item-padding;
+
+    @include ifweb {
+      cursor: pointer;
+    }
+
+    @include m(disabled, loading) {
+      @include ifweb {
+        cursor: not-allowed;
+      }
+    }
+
+    @include m(headless-first) {
+      border-top-left-radius: $sar-action-sheet-border-radius;
+      border-top-right-radius: $sar-action-sheet-border-radius;
+    }
+  }
+
+  @include e(item-name) {
+    @include universal;
+    font-size: $sar-action-sheet-item-name-font-size;
+  }
+
+  @include e(item-description) {
+    @include universal;
+    margin-top: $sar-action-sheet-item-description-margin-top;
+    font-size: $sar-action-sheet-item-description-font-size;
+    color: $sar-action-sheet-item-description-color;
+  }
+
+  @include m(disabled) {
+    color: $sar-disabled-color;
+  }
+
+  @include e(cancel) {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    min-height: $sar-action-sheet-cancel-min-height;
+    padding: $sar-action-sheet-cancel-padding;
+    font-size: $sar-action-sheet-cancel-font-size;
+
+    @include ifweb {
+      cursor: pointer;
+    }
+  }
+
+  @include m(pressed) {
+    background-color: $sar-action-sheet-active-bg-color;
+  }
+}
+
+@include theme(dark) {
+  @include bem(action-sheet) {
+    @include b() {
+      background-color: $sar-action-sheet-dark-bg-color;
+    }
+
+    @include e(description) {
+      color: $sar-action-sheet-description-dark-color;
+    }
+
+    @include e(gap) {
+      background-color: $sar-action-sheet-gap-dark-bg-color;
+    }
+
+    @include e(item-description) {
+      color: $sar-action-sheet-item-description-dark-color;
+    }
+
+    @include m(disabled) {
+      color: $sar-dark-disabled-color;
+    }
+
+    @include m(pressed) {
+      background-color: $sar-action-sheet-active-dark-bg-color;
+    }
+  }
+}

package/dist/animated/index.d.ts

@@ -0,0 +1,62 @@
+/// <reference types="react" />
+import { AnyFunction } from '../base';
+declare class AnimatedInterpolation {
+    constructor(config: Record<string, any>);
+}
+declare class AnimatedValue {
+    constructor(value: number, config?: Record<string, any>);
+    setValue(value: number): void;
+    setOffset(offset: number): void;
+    flattenOffset(): void;
+    extractOffset(): void;
+    interpolate(config: Record<string, any>): AnimatedInterpolation;
+    stopAnimation(): void;
+    addListener(callback: (state: {
+        value: number;
+    }) => void): string;
+    removeListener(id: string): void;
+    removeAllListeners(): void;
+}
+declare class CompositeAnimation {
+    constructor(value: any, config?: Record<string, any>);
+    start(callback?: (result: {
+        finished: boolean;
+    }) => void): void;
+    stop(): void;
+    reset(): void;
+}
+declare function timing(value: AnimatedValue, config: Record<string, any>): CompositeAnimation;
+declare function loop(animation: CompositeAnimation, config?: Record<string, any>): CompositeAnimation;
+declare function parallel(animations: Array<CompositeAnimation>, config?: Record<string, any>): CompositeAnimation;
+declare function sequence(animations: any[]): CompositeAnimation;
+declare function delay(time: number): CompositeAnimation;
+declare class Animated {
+    static View: import("react").ComponentType<import("@tarojs/components/types/View").ViewProps>;
+    static Text: import("react").ComponentType<import("@tarojs/components/types/Text").TextProps>;
+    static Value: typeof AnimatedValue;
+    static timing: typeof timing;
+    static loop: typeof loop;
+    static parallel: typeof parallel;
+    static sequence: typeof sequence;
+    static delay: typeof delay;
+}
+declare class Easing {
+    static step0: AnyFunction;
+    static step1: AnyFunction;
+    static linear: AnyFunction;
+    static ease: AnyFunction;
+    static quad: AnyFunction;
+    static cubic: AnyFunction;
+    static poly: AnyFunction;
+    static sin: AnyFunction;
+    static circle: AnyFunction;
+    static exp: AnyFunction;
+    static elastic: AnyFunction;
+    static back: AnyFunction;
+    static bounce: AnyFunction;
+    static bezier: AnyFunction;
+    static in: AnyFunction;
+    static out: AnyFunction;
+    static inOut: AnyFunction;
+}
+export { Easing, Animated };