@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.1

package/es/locales/zh-TW.js

@@ -1,7 +1,7 @@
 const zhTW = {
   dialog: {
     cancel: "\u53D6\u6D88",
-    confirm: "\u78BA\u8A8D",
+    ok: "\u78BA\u8A8D",
     placeholder: "\u8ACB\u8F38\u5165\u5167\u5BB9"
   },
   picker: {
@@ -24,6 +24,61 @@ const zhTW = {
     located: "\u5B9A\u4F4D",
     current: "\u76EE\u524D",
     hot: "\u71B1\u9580"
+  },
+  desktopDatePicker: {
+    month: {
+      1: "1\u6708",
+      2: "2\u6708",
+      3: "3\u6708",
+      4: "4\u6708",
+      5: "5\u6708",
+      6: "6\u6708",
+      7: "7\u6708",
+      8: "8\u6708",
+      9: "9\u6708",
+      10: "10\u6708",
+      11: "11\u6708",
+      12: "12\u6708"
+    }
+  },
+  datePicker: {
+    year: "\u5E74",
+    month: "\u6708",
+    day: "\u65E5",
+    hour: "\u6642",
+    minute: "\u5206",
+    second: "\u79D2"
+  },
+  countdown: {
+    remain: {
+      year: "\u5E74",
+      month: "\u500B\u6708",
+      day: "\u5929",
+      hour: "\u5C0F\u6642",
+      minute: "\u5206\u9418",
+      second: "\u79D2"
+    },
+    remainTime: "\u5269\u9918\u6642\u9593",
+    hasEnd: "\u5012\u6578\u8A08\u6642\u5DF2\u7D50\u675F",
+    willEnd: "\u5373\u5C07\u7D50\u675F",
+    timer: "\u5012\u6578\u8A08\u6642\u5668"
+  },
+  progress: {
+    labelName: "\u9032\u5EA6\u689D",
+    notStarted: "\u672A\u958B\u59CB",
+    justBegun: "\u525B\u525B\u958B\u59CB",
+    gettingStarted: "\u958B\u59CB\u9032\u884C",
+    inProgress: "\u9032\u884C\u4E2D",
+    moreThanHalfway: "\u904E\u534A\u5B8C\u6210",
+    nearingCompletion: "\u63A5\u8FD1\u5B8C\u6210",
+    almostComplete: "\u5373\u5C07\u5B8C\u6210",
+    complete: "\u5DF2\u5B8C\u6210"
+  },
+  textarea: {
+    labelName: "\u6587\u672C\u5340\u57DF",
+    placeholder: "\u8ACB\u8F38\u5165\u5167\u5BB9",
+    remaining: "\u5269\u9918",
+    characters: "\u500B\u5B57"
   }
 };
 var zh_TW_default = zhTW;

package/es/src/Alert/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+/**
+ * 自定义 Alert 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 customDemoComponent.tsx（固定约定）
+ */
+export declare const basicAlertDemo: () => React.JSX.Element;
+export declare const multipleTypeAlertDemo: () => React.JSX.Element;
+export declare const actionAlertDemo: () => React.JSX.Element;
+export declare const complexInteractionAlertDemo: () => React.JSX.Element;
+declare const _default: {
+    basicAlertDemo: () => React.JSX.Element;
+    multipleTypeAlertDemo: () => React.JSX.Element;
+    actionAlertDemo: () => React.JSX.Element;
+    complexInteractionAlertDemo: () => React.JSX.Element;
+};
+export default _default;

package/es/src/Backdrop/Backdrop.types.d.ts

@@ -0,0 +1,21 @@
+import { OverrideProps } from '@bifrostui/types';
+import React from 'react';
+import { FadeProps } from '../Fade/Fade.types';
+import { TransitionProps } from '../Transition';
+export interface BackdropTypeMap<D extends React.ElementType = 'div', P = {}> {
+    props: P & {
+        /**
+         * 是否展示
+         * - default:false
+         */
+        open?: boolean;
+        /**
+         * 是否透明不可见
+         * - default:false
+         */
+        invisible?: boolean;
+        transitionDuration?: TransitionProps['timeout'];
+    } & Omit<FadeProps, 'children'>;
+    defaultComponent: D;
+}
+export type BackdropProps<D extends React.ElementType = BackdropTypeMap['defaultComponent'], P = {}> = OverrideProps<BackdropTypeMap<D, P>, D>;

package/es/src/Backdrop/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const basicBackdropDemo: () => React.JSX.Element;
+export declare const invisibleBackdropDemo: () => React.JSX.Element;
+declare const _default: {
+    basicBackdropDemo: () => React.JSX.Element;
+    invisibleBackdropDemo: () => React.JSX.Element;
+};
+export default _default;

package/es/src/Badge/Badge.types.d.ts

@@ -0,0 +1,56 @@
+import { OverrideProps, ThemeColor } from '@bifrostui/types';
+import React, { ReactNode } from 'react';
+export type BadgeProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         *徽章内容
+         */
+        content?: ReactNode;
+        /**
+         * 颜色
+         */
+        color?: Exclude<ThemeColor, 'neutral'>;
+        /**
+         * 最大值
+         */
+        max?: number;
+        /**
+         * content为0时是否展示
+         */
+        showZero?: boolean;
+        /**
+         * 是否隐藏badge
+         * @default false
+         */
+        invisible?: boolean;
+        /**
+         *徽章类型
+         */
+        variant?: 'contained' | 'outlined';
+        /**
+         * 徽章形状
+         */
+        type?: 'dot' | 'standard' | 'bubble';
+        /**
+         * 无障碍功能：为Badge提供可访问的标签
+         * 如果不提供，将根据content和type自动生成
+         */
+        'aria-label'?: string;
+        /**
+         * 无障碍功能：引用描述此Badge的元素ID
+         */
+        'aria-describedby'?: string;
+        /**
+         * 无障碍功能：Badge的角色
+         * @default 'status'
+         */
+        role?: 'status' | 'img' | 'presentation';
+        /**
+         * 无障碍功能：是否对屏幕阅读器隐藏Badge
+         * 当为true时，Badge将被屏幕阅读器忽略
+         * @default false
+         */
+        'aria-hidden'?: boolean;
+    };
+    defaultComponent: D;
+}, D>;

package/es/src/Badge/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+/**
+ * 自定义 Badge 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 A11yDemos.tsx（固定约定）
+ */
+export declare const basicBadgeDemo: () => React.JSX.Element;
+export declare const colorBadgeDemo: () => React.JSX.Element;
+export declare const typeBadgeDemo: () => React.JSX.Element;
+export declare const maxBadgeDemo: () => React.JSX.Element;
+export declare const accessibilityBadgeDemo: () => React.JSX.Element;
+export declare const invisibilityBadgeDemo: () => React.JSX.Element;
+export declare const complexInteractionBadgeDemo: () => React.JSX.Element;
+export declare const specialContentBadgeDemo: () => React.JSX.Element;
+declare const _default: {
+    basicBadgeDemo: () => React.JSX.Element;
+    colorBadgeDemo: () => React.JSX.Element;
+    typeBadgeDemo: () => React.JSX.Element;
+    maxBadgeDemo: () => React.JSX.Element;
+    accessibilityBadgeDemo: () => React.JSX.Element;
+    invisibilityBadgeDemo: () => React.JSX.Element;
+    complexInteractionBadgeDemo: () => React.JSX.Element;
+    specialContentBadgeDemo: () => React.JSX.Element;
+};
+export default _default;

package/es/src/Badge/hooks/useBadgeA11y.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface UseBadgeA11yProps {
+    displayValue: React.ReactNode;
+    type?: 'dot' | 'standard' | 'bubble';
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    role?: 'status' | 'img' | 'presentation';
+    'aria-hidden'?: boolean;
+}
+export interface UseBadgeA11yResult {
+    accessibilityLabel: string | undefined;
+    ariaAttributes: {
+        role?: string;
+        'aria-label'?: string;
+        'aria-describedby'?: string;
+        'aria-hidden'?: boolean;
+    };
+}
+/**
+ * Badge 无障碍功能的自定义 Hook
+ * 负责处理可访问性标签和ARIA属性
+ */
+export declare const useBadgeA11y: ({ displayValue, type, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, role, "aria-hidden": ariaHidden, }: UseBadgeA11yProps) => UseBadgeA11yResult;

package/es/src/Badge/hooks/useBadgeDisplay.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface UseBadgeDisplayProps {
+    content?: React.ReactNode;
+    max?: number;
+    showZero?: boolean;
+    type?: 'dot' | 'standard' | 'bubble';
+}
+export interface UseBadgeDisplayResult {
+    displayValue: React.ReactNode;
+    shouldShowBadge: boolean;
+}
+/**
+ * Badge 显示逻辑的自定义 Hook
+ * 负责计算显示值和判断是否应该显示徽章
+ */
+export declare const useBadgeDisplay: ({ content, max, showZero, type, }: UseBadgeDisplayProps) => UseBadgeDisplayResult;

package/es/src/Button/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+/**
+ * 自定义 Button 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 customDemoComponent.tsx（固定约定）
+ */
+export declare const basicButtonDemo: () => React.JSX.Element;
+export declare const variantButtonDemo: () => React.JSX.Element;
+export declare const colorButtonDemo: () => React.JSX.Element;
+export declare const sizeButtonDemo: () => React.JSX.Element;
+export declare const disabledButtonDemo: () => React.JSX.Element;
+export declare const iconButtonDemo: () => React.JSX.Element;
+export declare const ariaLabelButtonDemo: () => React.JSX.Element;
+declare const _default: {
+    basicButtonDemo: () => React.JSX.Element;
+    variantButtonDemo: () => React.JSX.Element;
+    colorButtonDemo: () => React.JSX.Element;
+    sizeButtonDemo: () => React.JSX.Element;
+    disabledButtonDemo: () => React.JSX.Element;
+    iconButtonDemo: () => React.JSX.Element;
+    ariaLabelButtonDemo: () => React.JSX.Element;
+};
+export default _default;

package/es/src/CSSTransition/CSSTransition.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CSSTransitionProps } from './CSSTransition.types';
+declare const CSSTransition: React.ForwardRefExoticComponent<CSSTransitionProps & React.RefAttributes<HTMLElement>>;
+export default CSSTransition;

package/es/src/CSSTransition/CSSTransition.types.d.ts

@@ -0,0 +1,13 @@
+import { TransitionProps } from '../Transition';
+type IClassNames = string | {
+    enter?: string;
+    enterActive?: string;
+    enterDone?: string;
+    exit?: string;
+    exitActive?: string;
+    exitDone?: string;
+};
+export interface CSSTransitionProps extends TransitionProps {
+    classNames?: IClassNames;
+}
+export {};

package/es/src/CSSTransition/demo/CSSTransitionDemo.d.ts

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

package/es/src/CSSTransition/index.d.ts

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

package/es/src/Calendar/Calendar.types.d.ts

@@ -0,0 +1,112 @@
+import React from 'react';
+import { OverrideProps } from '@bifrostui/types';
+import { CSSTransitionProps } from '../CSSTransition/CSSTransition.types';
+export interface ICalendarInstance {
+    /** 日期对象 */
+    day: Date;
+    /** 是否禁用 */
+    disabled: boolean;
+}
+export interface ICalendarMonthChangeData {
+    /** 切换后的月份 */
+    month: string;
+    /** 操作类型，prev: 点击上个月 next: 点击下个月 */
+    type: 'prev' | 'next';
+}
+export interface ICustomIconProps {
+    /** 是否为可选范围内的最小月份 */
+    isMinMonth?: boolean;
+    /** 是否为可选范围内的最大月份 */
+    isMaxMonth?: boolean;
+}
+export type ICalendarMode = 'single' | 'range';
+export type ICalendarValue = Date | Date[] | null;
+export type CalendarProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 默认选中的值，当组件非受控时使用
+         */
+        defaultValue?: ICalendarValue;
+        /**
+         * 选中的值，当组件受控时使用
+         */
+        value?: ICalendarValue;
+        /**
+         * 可选择的最小日期，默认为当前日期
+         * 渲染指定月时：value=null并指定minDate
+         */
+        minDate?: Date;
+        /**
+         * 可选择的最大日期，默认为当前日期的一年后
+         */
+        maxDate?: Date;
+        /**
+         * 选择类型，默认为single
+         * single 表示选择单个日期
+         * range 表示选择日期区间
+         */
+        mode?: ICalendarMode;
+        /**
+         * 是否隐藏当前月之外的日期，默认为false
+         */
+        hideDaysOutsideCurrentMonth?: boolean;
+        /**
+         * 头部操作栏日期显示格式
+         * @default YYYY/MM
+         */
+        headerBarFormat?: string;
+        /**
+         * 头部操作栏左边图标
+         * @defaultReturn <CaretLeftIcon />
+         */
+        headerBarLeftIcon?: (options: ICustomIconProps) => React.ReactNode;
+        /**
+         * 头部操作栏右边图标
+         * @defaultReturn <CaretRightIcon />
+         */
+        headerBarRightIcon?: (options: ICustomIconProps) => React.ReactNode;
+        /**
+         * 不可选择的日期
+         */
+        disabledDate?: (currentDate: Date) => boolean;
+        /**
+         * 高亮的日期，默认为today
+         * today 若选中的非当天，则当天高亮显示，若选中的是当天，则当天展示选中态
+         * weekend 可选的周末高亮显示
+         */
+        highlightDate?: 'today' | 'weekend';
+        /**
+         * 是否隐藏头部
+         * default: false
+         */
+        headerVisible?: boolean;
+        /**
+         * 是否开启切换动效
+         * default: false
+         */
+        enableTransition?: boolean;
+        /**
+         * CSSTransition组件属性，仅enableTransition=true时生效
+         */
+        CSSTransitionProps?: CSSTransitionProps;
+        /**
+         * 自定义日期单元格的内容
+         */
+        dateRender?: (currentDate: ICalendarInstance) => React.ReactNode;
+        /**
+         * 自定义周单元格的内容
+         */
+        weekRender?: (week: string) => React.ReactNode;
+        /**
+         * 月份发生变化的回调
+         */
+        onMonthChange?: (e: React.SyntheticEvent, data: ICalendarMonthChangeData) => void;
+        /**
+         * 日期发生变化的回调
+         */
+        onChange?: (e: React.SyntheticEvent, data: {
+            value: ICalendarValue;
+        }) => void;
+    };
+    defaultComponent: D;
+}, D>;

package/es/src/Calendar/__tests__/fixtures/A11yDemos.d.ts

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

package/es/src/Calendar/utils.d.ts

@@ -0,0 +1,29 @@
+import { ICalendarMode, ICalendarValue } from './Calendar.types';
+/**
+ * 判断日期是否相同
+ */
+export declare const isSame: (start: Date, end: Date) => boolean;
+/**
+ * 判断value、defaultValue是否相同
+ */
+export declare const isEqualVal: (a: ICalendarValue, b: ICalendarValue) => boolean;
+/**
+ * 计算日期差
+ */
+export declare const getDateDiff: (a: Date, b: Date) => number;
+/**
+ * 判断是否在日期区间内
+ */
+export declare const isDateInRange: (current: Date, start: Date, end: Date) => boolean;
+/**
+ * 取数组第一个日期为开始日期，最后一个日期为结束日期
+ */
+export declare const generateDateRange: (value: Date[]) => {
+    start: Date;
+    end: Date;
+};
+/**
+ * 格式化初始日期
+ * @return undefined | Array<Date|null>
+ */
+export declare const formatDate: (mode: ICalendarMode, value: ICalendarValue, minDate: Date, maxDate: Date) => any[] | Date;

package/es/src/Checkbox/__tests__/fixtures/A11yDemos.d.ts

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

package/es/src/CitySelector/CitySelector.types.d.ts

@@ -0,0 +1,46 @@
+import { OverrideProps } from '@bifrostui/types';
+export type cityType = {
+    /** 城市名 */
+    name: string;
+    /** 城市名id */
+    code: string;
+};
+export type allCityItemType = {
+    /** 城市列表 */
+    cities: cityType[];
+    /** 索引字母 */
+    groupName: string;
+};
+export type CitySelectorProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /** 当前城市信息 */
+        selectedCity?: cityType;
+        /** 当前城市栏的title */
+        selectedCityGroupName?: string;
+        /** 定位城市信息 */
+        currentCity?: cityType;
+        /** 定位城市栏的title */
+        currentCityGroupName?: string;
+        /** 热门城市信息 */
+        hotCities?: cityType[];
+        /** 热门城市栏的title */
+        hotCitiesGroupName?: string;
+        /** 城市列表 */
+        cities: allCityItemType[];
+        /** 禁用展示索引 默认false 即展示索引 */
+        disableIndex?: boolean;
+        /** 头部标题 */
+        title?: string;
+        /** 选择城市回调 */
+        onSelect: (e: React.SyntheticEvent, data: {
+            city: cityType;
+        }) => void;
+        /** 和title配合使用，头部右侧的关闭回调 */
+        onClose?: (e: React.SyntheticEvent) => void;
+    };
+    defaultComponent: D;
+}, D>;
+export type CitySelectorCoreProps = CitySelectorProps & {
+    touchHandler: any;
+    height?: string;
+};

package/es/src/Collapse/Collapse.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CollapseProps } from './Collapse.types';
+import './index.less';
+declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLElement>>;
+export default Collapse;

package/es/src/Collapse/Collapse.miniapp.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Collapse Animation Component
+ * @description A component that implements collapse in/out animation effects for elements using CSS animations
+ * @component Collapse
+ */
+import React from 'react';
+import { CollapseProps } from './Collapse.types';
+import './index.less';
+declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLElement>>;
+export default Collapse;

package/es/src/Countdown/Countdown.types.d.ts

@@ -0,0 +1,127 @@
+import { OverrideProps } from '@bifrostui/types';
+import React from 'react';
+/**
+ * 当前时间
+ */
+export type CurrentTime = {
+    /**
+     * 剩余总时间，单位毫秒
+     */
+    total: number;
+    /**
+     * 剩余年数
+     */
+    years: string;
+    /**
+     * 剩余月数
+     */
+    months: string;
+    /**
+     * 剩余天数
+     */
+    days: string;
+    /**
+     * 剩余小时
+     */
+    hours: string;
+    /**
+     * 剩余分钟
+     */
+    minutes: string;
+    /**
+     * 剩余秒数
+     */
+    seconds: string;
+    /**
+     * 剩余整数天余下的小时
+     */
+    hoursWithDays: string;
+};
+export type CountdownProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 倒计时剩余时间，是一个时间段（单位毫秒），与endTimestamp互斥
+         * @default 0
+         */
+        remainingTime?: number;
+        /**
+         * 倒计时结束时间戳，是一个时间点，与remainingTime互斥，优先级比remainingTime高
+         */
+        endTimestamp?: number;
+        /**
+         * 服务器时间戳，是一个时间点，可与endTimestamp配合使用
+         */
+        serverTimestamp?: number;
+        /**
+         * 格式化倒计时展示，参考 dayjs
+         * @default HH:mm:ss
+         */
+        format?: string;
+        /**
+         * 倒计时完成时触发
+         */
+        onFinish?: () => void;
+        /**
+         * 倒计时时间变化时触发
+         */
+        onChange?: (data: {
+            value: number;
+        }) => void;
+        /**
+         * 自定义render内容
+         */
+        renderContent?: (data: CurrentTime) => React.ReactNode;
+        /**
+         * 无障碍标签，为屏幕阅读器提供组件描述
+         */
+        'aria-label'?: string;
+        /**
+         * 引用其他元素ID作为标签
+         */
+        'aria-labelledby'?: string;
+        /**
+         * 引用其他元素ID作为描述
+         */
+        'aria-describedby'?: string;
+        /**
+         * 组件的语义角色
+         * @default 'timer'
+         */
+        role?: string;
+    };
+    defaultComponent: D;
+}, D>;
+/**
+ * 倒计时格式化后分割项
+ */
+export interface CountdownItem {
+    /**
+     * 倒计时切片字符串
+     */
+    valStr: string;
+    /**
+     * 倒计时切片数值
+     */
+    value: number;
+    /**
+     * 倒计时切片是否为零
+     */
+    isZero: boolean;
+    /**
+     * 倒计时切片单位
+     */
+    unitText: string;
+}
+/**
+ * 格式化倒计时
+ */
+export type FormatedCountdown = {
+    /**
+     * 剩余总时间
+     */
+    timeStr: string;
+    /**
+     * 倒计时切片数组
+     */
+    timeList: CountdownItem[];
+};

package/es/src/Countdown/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+/**
+ * 自定义 Countdown 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 customDemoComponent.tsx（固定约定）
+ */
+export declare const basicCountdownDemo: () => React.JSX.Element;
+export declare const ariaLabelCountdownDemo: () => React.JSX.Element;
+export declare const ariaLabelledbyCountdownDemo: () => React.JSX.Element;
+export declare const ariaDescribedbyCountdownDemo: () => React.JSX.Element;
+export declare const customRenderCountdownDemo: () => React.JSX.Element;
+export declare const endTimestampCountdownDemo: () => React.JSX.Element;
+export declare const serverTimestampCountdownDemo: () => React.JSX.Element;
+declare const _default: {
+    basicCountdownDemo: () => React.JSX.Element;
+    ariaLabelCountdownDemo: () => React.JSX.Element;
+    ariaLabelledbyCountdownDemo: () => React.JSX.Element;
+    ariaDescribedbyCountdownDemo: () => React.JSX.Element;
+    customRenderCountdownDemo: () => React.JSX.Element;
+    endTimestampCountdownDemo: () => React.JSX.Element;
+    serverTimestampCountdownDemo: () => React.JSX.Element;
+};
+export default _default;