@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/dist/src/Toast/Toast.types.d.ts

@@ -0,0 +1,104 @@
+import React, { MutableRefObject } from 'react';
+import { FadeProps } from '../Fade/Fade.types';
+import { TransitionProps } from '../Transition';
+/**
+ * 提示类型
+ */
+export type ToastType = 'loading' | 'success' | 'fail' | 'warning';
+export interface ToastProps extends FadeProps {
+    /**
+     * 是否展示
+     */
+    open?: boolean;
+    /**
+     * 提示类型
+     */
+    type?: ToastType;
+    /**
+     * toast内容，支持使用`\n`换行
+     */
+    message?: string;
+    /**
+     * 展示时长(ms)，值为 0 时，toast 不会消失
+     * @default 2000
+     */
+    duration?: number;
+    /**
+     * 展示位置
+     * @default center
+     */
+    position?: 'top' | 'center' | 'bottom';
+    /**
+     * 是否允许同时存在多个Toast
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * 自定义图标
+     */
+    icon?: React.ReactNode;
+    /**
+     * 展示Toast时，页面内容是否可以点击
+     * @default false
+     */
+    disableClick?: boolean;
+    /**
+     * 渲染Toast的根容器
+     * @default document.body
+     */
+    container?: HTMLElement | (() => HTMLElement);
+    /**
+     * 关闭时的回调函数
+     */
+    onClose?: () => void;
+    /**
+     * Toast动画时长(ms)
+     */
+    transitionDuration?: TransitionProps['timeout'];
+    ref?: MutableRefObject<HTMLDivElement>;
+}
+/**
+ * 函数式调用配置参数
+ */
+export type ToastOptions = Omit<ToastProps, 'type' | 'open'> | string;
+/**
+ * 函数式调用返回值类型
+ */
+export type ToastReturnType = {
+    /**
+     * 关闭当前提示
+     */
+    close: () => void;
+};
+/**
+ * Toast Instance
+ */
+export interface ToastFunction {
+    (options: ToastOptions): ToastReturnType;
+    /**
+     * 警告提示
+     */
+    warning: (options: ToastOptions) => ToastReturnType;
+    /**
+     * 加载提示
+     */
+    loading: (options: ToastOptions) => ToastReturnType;
+    /**
+     * 成功提示
+     */
+    success: (options: ToastOptions) => ToastReturnType;
+    /**
+     * 失败提示
+     */
+    fail: (options: ToastOptions) => ToastReturnType;
+    /**
+     * 清空提示
+     */
+    clear: () => void;
+}
+export interface ToastInstance extends ToastFunction {
+    /**
+     * 获取toast静态方法 & contextHolder
+     */
+    useToast: () => [ToastFunction, React.JSX.Element];
+}

package/dist/src/Toast/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ToastDemo: () => React.JSX.Element;

package/dist/src/Tooltip/Tooltip.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TooltipProps } from './Tooltip.types';
+import './index.less';
+declare const Tooltip: React.ForwardRefExoticComponent<Omit<TooltipProps<"div", {}>, "ref"> & React.RefAttributes<HTMLElement>>;
+export default Tooltip;

package/dist/src/Tooltip/Tooltip.types.d.ts

@@ -0,0 +1,99 @@
+import React from 'react';
+import { OverrideProps } from '@bifrostui/types';
+/**
+ * 触发 Tooltip 显示的事件类型
+ */
+export type TooltipTriggerType = 'click' | 'hover';
+/**
+ * Tooltip 的位置选项
+ */
+export type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+/**
+ * onOpenChange 回调函数的数据参数
+ */
+export interface TooltipOpenChangeData {
+    /** 浮层显隐状态 */
+    open: boolean;
+}
+/**
+ * Tooltip 组件的属性接口
+ */
+export interface TooltipBaseProps {
+    /**
+     * 气泡浮层显示内容
+     * 支持文本、React 节点等
+     */
+    title?: React.ReactNode;
+    /**
+     * 默认是否显隐
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * 用于手动控制气泡浮层显隐
+     * 当提供此属性时，组件变为受控模式
+     */
+    open?: boolean;
+    /**
+     * 浮层与目标元素的偏移距离（像素）
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * 气泡框相对于目标元素的位置
+     * @default 'top'
+     */
+    placement?: TooltipPlacement;
+    /**
+     * 触发 Tooltip 显示的事件类型
+     * - 'click': 点击触发
+     * - 'hover': 悬停触发
+     * - 可以传递数组来组合多种触发方式
+     * @default 'click'
+     */
+    trigger?: TooltipTriggerType | TooltipTriggerType[];
+    /**
+     * 显隐状态变化时的回调函数
+     * @param event - 触发事件
+     * @param data - 回调数据，包含当前的显隐状态
+     */
+    onOpenChange?: (event: React.SyntheticEvent, data: TooltipOpenChangeData) => void;
+    /**
+     * 子元素，必须是可以接收 ref 的 React 元素
+     */
+    children?: React.ReactElement;
+    /**
+     * 无障碍功能：Tooltip的角色
+     * @default 'tooltip'
+     */
+    role?: 'tooltip' | 'dialog' | 'status' | 'alert';
+    /**
+     * 无障碍功能：为Tooltip提供可访问的标签
+     */
+    'aria-label'?: string;
+    /**
+     * 无障碍功能：引用描述此Tooltip的元素ID
+     */
+    'aria-labelledby'?: string;
+    /**
+     * 无障碍功能：是否自动管理焦点
+     * 当为true时，Tooltip显示时会自动获取焦点，关闭时焦点返回到触发元素
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * 无障碍功能：是否支持Escape键关闭
+     * @default false
+     */
+    closeOnEscape?: boolean;
+    /**
+     * 无障碍功能：是否对屏幕阅读器隐藏Tooltip
+     * 当为true时，Tooltip将被屏幕阅读器忽略
+     * @default false
+     */
+    'aria-hidden'?: boolean;
+}
+export type TooltipProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & TooltipBaseProps;
+    defaultComponent: D;
+}, D>;

package/dist/src/Tooltip/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+/**
+ * 自定义 Tooltip 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 A11yDemos.tsx（固定约定）
+ */
+export declare const basicTooltipDemo: () => React.JSX.Element;
+export declare const placementTooltipDemo: () => React.JSX.Element;
+export declare const triggerTooltipDemo: () => React.JSX.Element;
+export declare const accessibilityTooltipDemo: () => React.JSX.Element;
+export declare const complexInteractionTooltipDemo: () => React.JSX.Element;
+export declare const complexContentTooltipDemo: () => React.JSX.Element;
+export declare const offsetTooltipDemo: () => React.JSX.Element;
+export declare const edgeCaseTooltipDemo: () => React.JSX.Element;
+declare const _default: {
+    basicTooltipDemo: () => React.JSX.Element;
+    placementTooltipDemo: () => React.JSX.Element;
+    triggerTooltipDemo: () => React.JSX.Element;
+    accessibilityTooltipDemo: () => React.JSX.Element;
+    complexInteractionTooltipDemo: () => React.JSX.Element;
+    complexContentTooltipDemo: () => React.JSX.Element;
+    offsetTooltipDemo: () => React.JSX.Element;
+    edgeCaseTooltipDemo: () => React.JSX.Element;
+};
+export default _default;

package/dist/src/Tooltip/useTooltip.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { TooltipProps } from './Tooltip.types';
+export interface UseTooltipParameters {
+    title?: React.ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    offset?: number;
+    placement?: TooltipProps['placement'];
+    trigger?: TooltipProps['trigger'];
+    onOpenChange?: TooltipProps['onOpenChange'];
+    autoFocus?: boolean;
+    closeOnEscape?: boolean;
+    children: React.ReactElement;
+    rootRef?: React.Ref<HTMLElement>;
+}
+export interface UseTooltipReturnValue {
+    getTooltipProps: (otherProps?: Record<string, unknown>) => Record<string, unknown>;
+    getChildProps: () => Record<string, unknown>;
+    getPortalProps: () => {
+        onMounted: () => void;
+    };
+    tooltipRef: React.RefCallback<HTMLElement>;
+    isOpen: boolean;
+    toolStyles: React.CSSProperties;
+    arrowDirection: string;
+    arrowLocation: string;
+    tooltipId: string;
+}
+export declare function useTooltip(parameters: UseTooltipParameters): UseTooltipReturnValue;

package/dist/src/TransitionGroup/TransitionGroup.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TransitionGroupProps } from './TransitionGroup.types';
+declare const TransitionGroup: {
+    (props: TransitionGroupProps): React.JSX.Element;
+    displayName: string;
+};
+export default TransitionGroup;

package/dist/src/TransitionGroup/TransitionGroup.types.d.ts

@@ -0,0 +1,47 @@
+import { OverrideProps } from '@bifrostui/types';
+import React, { ReactElement, ReactNode } from 'react';
+export interface TransitionGroupBaseProps {
+    /**
+     * 一组 `<Transition>` 组件，它们在离开时会切换为 `in` 和 `out`。`<TransitionGroup>` 会注入特定的过渡属性，因此，
+     * 如果您像我们的 `<Fade>` 示例一样包装 `<Transition>`，请记住将它们分散开来。
+     * 虽然此组件适用于多个 `Transition` 或 `CSSTransition`子组件，但有时您可能希望只有一个过渡子组件，
+     * 其中包含您希望在更改其内容时过渡出和入的内容（例如，路由、图像等）。在这种情况下，您可以在更改过渡子组件的内容时更改其 `key` 属性，
+     * 这将导致`TransitionGroup` 将该子组件过渡出和入。
+     */
+    children?: ReactNode;
+    /**
+     * 启用或禁用所有子元素的出现动画
+     * 请注意，指定此项将覆盖单个子组件 Transitions 上设置的任何默认设置
+     */
+    appear?: boolean;
+    /**
+     * 用于启用或禁用所有子级的进入动画
+     * 请注意，指定此项将覆盖单个子组件 Transitions 上设置的任何默认设置
+     */
+    enter?: boolean;
+    /**
+     * 用于启用或禁用所有子组件的退出动画。
+     * 请注意，指定此项将覆盖单个子组件 Transitions 上设置的任何默认设置
+     */
+    exit?: boolean;
+    /**
+     * 您可能需要在子组件退出时对其进行响应式更新。
+     * 这通常通过使用 `cloneElement` 来实现，但是，如果子组件退出，该元素已被移除，消费者无法访问。
+     * 如果您确实需要在子组件退出时对其进行更新，则可以提供一个 `childFactory`
+     * 来包装每个子组件，即使是即将退出的子组件。
+     * @default (child) => child
+     */
+    childFactory?: (child: ReactElement) => ReactElement;
+}
+export type TransitionGroupProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & TransitionGroupBaseProps & {
+        /**
+         * `<TransitionGroup>` 默认渲染一个 `<div>`。您可以通过提供 `component` 属性来更改此行为。
+         * 如果您使用的是 React v16+，并且希望避免使用包裹的 `<div>` 元素，
+         * 您可以传入 `component={null}`。如果包裹的 div 破坏了您的 CSS 样式，这将非常有用。
+         * @default div
+         */
+        component?: D | null;
+    };
+    defaultComponent: D;
+}, D>;

package/dist/src/TransitionGroup/demo/TransitionGroupDemo.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const TransitionGroupDemo: () => React.JSX.Element;
+export default TransitionGroupDemo;

package/dist/src/TransitionGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as TransitionGroup } from './TransitionGroup';
+export * from './TransitionGroup.types';

package/dist/src/TransitionGroup/utils/childMapping.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Given `this.props.children`, return an object mapping key to child.
+ *
+ * @param {*} children `this.props.children`
+ * @return {object} Mapping of key to child
+ */
+export declare const getChildMapping: (children: any, mapFn?: any) => any;
+/**
+ * When you're adding or removing children some may be added or removed in the
+ * same render pass. We want to show *both* since we want to simultaneously
+ * animate elements in and out. This function takes a previous set of keys
+ * and a new set of keys and merges them with its best guess of the correct
+ * ordering. In the future we may expose some of the utilities in
+ * ReactMultiChild to make this easy, but for now React itself does not
+ * directly have this concept of the union of prevChildren and nextChildren
+ * so we implement it here.
+ *
+ * @param {object} prev prev children as returned from
+ * `ReactTransitionChildMapping.getChildMapping()`.
+ * @param {object} next next children as returned from
+ * `ReactTransitionChildMapping.getChildMapping()`.
+ * @return {object} a key set that contains all keys in `prev` and all keys
+ * in `next` in a reasonable order.
+ */
+export declare const mergeChildMappings: (prev: any, next: any) => {};
+export declare const getInitialChildMapping: (props: any, onExited: any) => any;
+export declare const getNextChildMapping: (nextProps: any, prevChildMapping: any, onExited: any) => {};

package/dist/src/index.d.ts

@@ -0,0 +1,58 @@
+export * from './ActionSheet';
+export * from './Alert';
+export * from './Avatar';
+export * from './Backdrop';
+export * from './Badge';
+export * from './Button';
+export * from './Calendar';
+export * from './Card';
+export * from './Checkbox';
+export * from './Collapse';
+export * from './DatePicker';
+export * from './DesktopDatePicker';
+export * from './DesktopTimePicker';
+export * from './DesktopDateTimePicker';
+export * from './DesktopPicker';
+export * from './Divider';
+export * from './Drawer';
+export * from './Fade';
+export * from './IconButton';
+export * from './Image';
+export * from './Input';
+export * from './List';
+export * from './Modal';
+export * from './Popover';
+export * from './Portal';
+export * from './Progress';
+export * from './Radio';
+export * from './Rating';
+export * from './ScrollView';
+export * from './Select';
+export * from './Skeleton';
+export * from './Slide';
+export * from './Slider';
+export * from './Stack';
+export * from './Steps';
+export * from './Swiper';
+export * from './Switch';
+export * from './Tabs';
+export * from './Tag';
+export * from './TextArea';
+export * from './Transition';
+export * from './Tooltip';
+export * from './NavBar';
+export * from './Loading';
+export * from './TabBar';
+export * from './Countdown';
+export * from './CitySelector';
+export * from './ItemSelector';
+export * from './Picker';
+export * from './CollapsePanel';
+export * from './Breadcrumb';
+export * from './Toast';
+export * from './Dialog';
+export * from './ThemeProvider';
+export * from './locales';
+export * from './SwipeAction';
+export * from './CSSTransition';
+export * from './TransitionGroup';

package/dist/src/locales/base.d.ts

@@ -0,0 +1,79 @@
+export interface BaseLang {
+    dialog?: {
+        cancel?: string;
+        ok?: string;
+        placeholder?: string;
+    };
+    picker?: {
+        cancel?: string;
+        confirm?: string;
+    };
+    calendar?: {
+        Monday?: string;
+        Tuesday?: string;
+        Wednesday?: string;
+        Thursday?: string;
+        Friday?: string;
+        Saturday?: string;
+        Sunday?: string;
+    };
+    input?: {
+        placeholder?: string;
+    };
+    textarea?: {
+        labelName?: string;
+        placeholder?: string;
+        remaining?: string;
+        characters?: string;
+    };
+    selector?: {
+        select?: string;
+    };
+    citySelector?: {
+        selectedCityGroupName?: string;
+        currentCityGroupName?: string;
+        hotCitiesGroupName?: string;
+        located?: string;
+        current?: string;
+        hot?: string;
+        gpsType?: Record<string, string>;
+        currentType?: Record<string, string>;
+        hotCityType?: Record<string, string>;
+    };
+    desktopDatePicker?: {
+        month?: Record<number, string>;
+    };
+    datePicker?: {
+        year: string;
+        month: string;
+        day: string;
+        hour: string;
+        minute: string;
+        second: string;
+    };
+    countdown?: {
+        remain?: {
+            year?: string;
+            month?: string;
+            day?: string;
+            hour?: string;
+            minute?: string;
+            second?: string;
+        };
+        remainTime?: string;
+        hasEnd?: string;
+        willEnd?: string;
+        timer?: string;
+    };
+    progress?: {
+        labelName?: string;
+        notStarted?: string;
+        justBegun?: string;
+        gettingStarted?: string;
+        inProgress?: string;
+        moreThanHalfway?: string;
+        almostComplete?: string;
+        complete?: string;
+        nearingCompletion?: string;
+    };
+}

package/es/ActionSheet/ActionSheet.css

@@ -1,7 +1,17 @@
+:root,
+page,
+xhs-page {
+  --bui-action-sheet-extra-line-height: 23px;
+  --bui-action-sheet-extra-padding: var(--bui-spacing-xl);
+  --bui-action-sheet-extra-margin: 0 var(--bui-spacing-xl);
+  --bui-action-sheet-item-padding: var(--bui-spacing-xl);
+  --bui-action-sheet-item-font-size: var(--bui-title-size-2);
+  --bui-action-sheet-item-line-height: 24px;
+  --bui-action-sheet-item-color: var(--bui-color-fg-default);
+  --bui-action-sheet-item-margin: 0 var(--bui-spacing-xl);
+  --bui-action-sheet-item-description-line-height: 19px;
+}
 .bui-action-sheet {
-  --extra-line-height: var(--bui-action-sheet-extra-line-height, 23px);
-  --extra-padding: var(--bui-action-sheet-extra-padding, var(--bui-spacing-xl));
-  --extra-magin: var(--bui-action-sheet-extra-magin, 0 var(--bui-spacing-xl));
   font-family: var(--bui-font-family);
 }
 .bui-action-sheet-content {
@@ -20,11 +30,11 @@
 }
 .bui-action-sheet-extra {
   font-size: var(--bui-text-size-1);
-  line-height: var(--extra-line-height);
-  padding: var(--extra-padding);
+  line-height: var(--bui-action-sheet-extra-line-height);
+  padding: var(--bui-action-sheet-extra-padding);
   color: var(--bui-color-fg-muted);
   background: var(--bui-color-bg-view);
   text-align: center;
   border-bottom: 1px solid var(--bui-color-border-default);
-  margin: var(--extra-magin);
+  margin: var(--bui-action-sheet-extra-margin);
 }

package/es/ActionSheet/ActionSheetItem.css

@@ -1,21 +1,15 @@
 .bui-action-sheet-item {
-  --padding: var(--bui-action-sheet-item-padding, var(--bui-spacing-xl));
-  --font-size: var(--bui-action-sheet-item-font-size, var(--bui-title-size-2));
-  --line-height: var(--bui-action-sheet-item-line-height, 24px);
-  --color: var(--bui-action-sheet-item-color, var(--bui-color-fg-default));
-  --margin: var(--bui-action-sheet-item-margin, 0 var(--bui-spacing-xl));
-  --description-line-height: var(--bui-action-sheet-item-description-line-height, 19px);
   font-family: var(--bui-font-family);
   position: relative;
-  padding: var(--padding);
+  padding: var(--bui-action-sheet-item-padding);
   cursor: pointer;
   background: var(--bui-color-bg-view);
-  font-size: var(--font-size);
+  font-size: var(--bui-action-sheet-item-font-size);
   text-align: center;
-  line-height: var(--line-height);
-  color: var(--color);
+  line-height: var(--bui-action-sheet-item-line-height);
+  color: var(--bui-action-sheet-item-color);
   border-top: 1px solid var(--bui-color-border-default);
-  margin: var(--margin);
+  margin: var(--bui-action-sheet-item-margin);
 }
 .bui-action-sheet-item:first-child {
   border-top: none;
@@ -24,19 +18,19 @@
   background-color: var(--bui-color-bg-default);
 }
 .bui-action-sheet-item-primary {
-  --color: var(--bui-color-primary);
+  color: var(--bui-color-primary);
 }
 .bui-action-sheet-item-info {
-  --color: var(--bui-color-info);
+  color: var(--bui-color-info);
 }
 .bui-action-sheet-item-success {
-  --color: var(--bui-color-success);
+  color: var(--bui-color-success);
 }
 .bui-action-sheet-item-warning {
-  --color: var(--bui-color-warning);
+  color: var(--bui-color-warning);
 }
 .bui-action-sheet-item-danger {
-  --color: var(--bui-color-danger);
+  color: var(--bui-color-danger);
 }
 .bui-action-sheet-item-disabled {
   pointer-events: none;
@@ -50,6 +44,6 @@
 }
 .bui-action-sheet-item-description {
   font-size: var(--bui-text-size-2);
-  line-height: var(--description-line-height);
+  line-height: var(--bui-action-sheet-item-description-line-height);
   color: var(--bui-color-fg-subtle);
 }

package/es/ActionSheet/ActionSheetItem.js

@@ -36,9 +36,9 @@ const ActionSheetItem = /* @__PURE__ */ React.forwardRef(
     const _a = props, {
       className,
       children,
-      disabled,
-      bold,
-      color,
+      disabled = false,
+      bold = false,
+      color = "neutral",
       description,
       onClick,
       index
@@ -81,11 +81,6 @@ const ActionSheetItem = /* @__PURE__ */ React.forwardRef(
   }
 );
 ActionSheetItem.displayName = "BuiActionSheetItem";
-ActionSheetItem.defaultProps = {
-  color: "default",
-  disabled: false,
-  bold: false
-};
 var ActionSheetItem_default = ActionSheetItem;
 export {
   ActionSheetItem_default as default