@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/dist/Badge/Badge.css

@@ -1,105 +0,0 @@
-.bui-badge {
-  --badge-position: var(--bui-badge-position, 14%);
-  --min-width: var(--bui-badge-min-width, 15px);
-  --height: var(--bui-badge-height, 15px);
-  --line-height: var(--bui-badge-line-height, 15px);
-  --padding: var(--bui-badge-padding, 0 3px);
-  --border-radius: var(--bui-badge-border-radius, 8px);
-  --outlined-padding: var(--bui-badge-outlined-padding, 0 2px);
-  --dot-size: var(--bui-badge-dot-size, 9px);
-  --bubble-padding: var(--bui-badge-bubble-padding, 0 5px);
-  --bubble-border-radius: var(--bui-badge-bubble-border-radius, 6px 6px 6px 0);
-  display: inline-block;
-  font-family: var(--bui-font-family);
-}
-.bui-badge-position {
-  position: relative;
-}
-.bui-badge-position .bui-badge-contained,
-.bui-badge-position .bui-badge-outlined {
-  position: absolute;
-  top: var(--badge-position);
-  right: var(--badge-position);
-  transform: scale(1) translate(50%, -50%);
-}
-.bui-badge-position .bui-badge-dot {
-  top: var(--badge-position);
-  right: var(--badge-position);
-  transform: scale(1) translate(50%, -50%);
-}
-.bui-badge-position .bui-badge-bubble {
-  top: var(--badge-position);
-  right: var(--badge-position);
-  transform: scale(1) translate(50%, -50%);
-}
-.bui-badge-contained,
-.bui-badge-outlined {
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--min-width);
-  height: var(--height);
-  line-height: var(--line-height);
-  padding: var(--padding);
-  font-size: var(--bui-text-size-4);
-  border-radius: var(--border-radius);
-  color: var(--bui-color-bg-view);
-  white-space: nowrap;
-  z-index: 1;
-}
-.bui-badge-outlined {
-  padding: var(--outlined-padding);
-}
-.bui-badge-primary {
-  background-color: var(--bui-color-primary);
-}
-.bui-badge-success {
-  background-color: var(--bui-color-success);
-}
-.bui-badge-info {
-  background-color: var(--bui-color-info);
-}
-.bui-badge-warning {
-  background-color: var(--bui-color-warning);
-}
-.bui-badge-danger {
-  background-color: var(--bui-color-danger);
-}
-.bui-badge-dot {
-  width: var(--dot-size);
-  min-width: 0;
-  height: var(--dot-size);
-  padding: 0;
-  border-radius: 100%;
-}
-.bui-badge-bubble {
-  border-radius: var(--bubble-border-radius);
-  padding: var(--bubble-padding);
-}
-.bui-badge-outlined {
-  background: var(--bui-color-bg-view);
-}
-.bui-badge-outlined.bui-badge-primary {
-  border: 1px solid var(--bui-color-primary);
-  color: var(--bui-color-primary);
-}
-.bui-badge-outlined.bui-badge-success {
-  border: 1px solid var(--bui-color-success);
-  color: var(--bui-color-success);
-}
-.bui-badge-outlined.bui-badge-info {
-  border: 1px solid var(--bui-color-info);
-  color: var(--bui-color-info);
-}
-.bui-badge-outlined.bui-badge-warning {
-  border: 1px solid var(--bui-color-warning);
-  color: var(--bui-color-warning);
-}
-.bui-badge-outlined.bui-badge-danger {
-  border: 1px solid var(--bui-color-danger);
-  color: var(--bui-color-danger);
-}
-.bui-badge-outlined.bui-badge-bubble {
-  border-radius: var(--bubble-border-radius);
-}

package/dist/Badge/Badge.d.ts

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

package/dist/Badge/Badge.types.d.ts

@@ -1,27 +0,0 @@
-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?: ThemeColor;
-        /**
-         * 最大值
-         */
-        maxCount?: number;
-        /**
-         *徽章类型
-         */
-        variant?: 'contained' | 'outlined';
-        /**
-         * 徽章形状
-         */
-        type?: 'dot' | 'standard' | 'bubble';
-    };
-    defaultComponent: D;
-}, D>;

package/dist/Breadcrumb/Breadcrumb.css

@@ -1,34 +0,0 @@
-.bui-breadcrumb {
-  --margin: var(--bui-breadcrumb-margin, 0);
-  --padding: var(--bui-breadcrumb-padding, 0);
-  --color: var(--bui-breadcrumb-color, rgba(0, 0, 0, 0.45));
-  --item-separator-margin: var(--bui-breadcrumb-item-separator-margin, 0 8px);
-  --list-li-color: var(--bui-breadcrumb-list-li-color, rgba(0, 0, 0, 0.88));
-  margin: var(--margin);
-  padding: var(--padding);
-  color: var(--color);
-  list-style: none;
-  font-size: var(--bui-text-size-1);
-  line-height: var(--bui-line-height);
-}
-.bui-breadcrumb-list {
-  display: flex;
-  flex-wrap: wrap;
-  margin: var(--margin);
-  padding: var(--padding);
-  list-style: none;
-}
-.bui-breadcrumb-list a {
-  color: var(--color);
-  text-decoration: none;
-  cursor: pointer;
-}
-.bui-breadcrumb-list li:last-child {
-  color: var(--list-li-color);
-}
-.bui-breadcrumb-item {
-  cursor: pointer;
-}
-.bui-breadcrumb-item-separator {
-  margin: var(--item-separator-margin);
-}

package/dist/Breadcrumb/Breadcrumb.d.ts

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

package/dist/Button/Button.css

@@ -1,237 +0,0 @@
-.bui-btn {
-  --border-radius: var(--bui-button-border-radius, 100px);
-  --text-color: var(--bui-button-text-color, var(--bui-color-fg-muted));
-  --bg-color: var(--bui-button-default-bg-color, var(--bui-color-neutral-5));
-  --border-color: var(--bui-button-border-color, var(--bui-color-neutral-4));
-  --height: var(--bui-button-height, 27px);
-  --icon-start-margin-right: var(--bui-button-icon-start-margin-right, var(--bui-spacing-xs));
-  --icon-start-margin-left: var(--bui-button-icon-start-margin-left, var(--bui-spacing-xs));
-  --default-border: var(--bui-button-default-border, 1px solid transparent);
-  --light-border: var(--bui-button-light-border, 1px solid transparent);
-  --outlined-default-border: var(--bui-button-outlined-default-border, 1px solid var(--bui-color-neutral-4));
-  --disabled-opacity: var(--bui-button-disabled-opacity, 0.5);
-  --small-padding: var(--bui-button-small-padding, 0 11px);
-  --small-height: var(--bui-button-small-height, 24px);
-  --medium-padding: var(--bui-button-medium-padding, 0 14px);
-  --large-padding: var(--bui-button-large-padding, 0 14px);
-  --large-height: var(--bui-button-large-height, 33px);
-  --full-font-size: var(--bui-button-full-font-size, var(--bui-title-size-4));
-  --full-height: var(--bui-button-full-height, 42px);
-  border: var(--default-border);
-  outline: 0;
-  background-color: transparent;
-  cursor: pointer;
-  color: var(--text-color);
-  box-sizing: border-box;
-  position: relative;
-  display: inline-flex;
-  margin: 0;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  font-size: var(--bui-text-size-3);
-  font-weight: var(--bui-font-weight-medium);
-  border-radius: var(--border-radius);
-  height: var(--height);
-  line-height: var(--bui-line-height);
-  font-family: var(--bui-font-family);
-}
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-.bui-btn::after {
-  border: 0;
-}
-.bui-btn::before {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  background-color: var(--bui-color-black);
-  border: inherit;
-  border-color: var(--bui-color-black);
-  border-radius: inherit;
-  transform: translate(-50%, -50%);
-  opacity: 0;
-  content: " ";
-}
-.bui-btn:active::before {
-  opacity: 0.04;
-}
-.bui-btn-icon-start {
-  display: inline-flex;
-  align-self: center;
-  flex-shrink: 0;
-  margin-right: var(--icon-start-margin-right);
-}
-.bui-btn-icon-end {
-  display: inline-flex;
-  align-self: center;
-  flex-shrink: 0;
-  margin-left: var(--icon-start-margin-left);
-}
-.bui-btn-disabled {
-  pointer-events: none;
-  opacity: var(--disabled-opacity);
-}
-.bui-btn-small {
-  font-size: var(--bui-text-size-4);
-  padding: var(--small-padding);
-  height: var(--small-height);
-}
-.bui-btn-medium {
-  padding: var(--medium-padding);
-  height: var(--height);
-}
-.bui-btn-large {
-  font-size: var(--bui-text-size-2);
-  padding: var(--large-padding);
-  height: var(--large-height);
-}
-.bui-btn-full {
-  font-size: var(--full-font-size);
-  width: 100%;
-  height: var(--full-height);
-}
-.bui-btn-text.bui-btn-primary {
-  color: var(--bui-color-primary);
-}
-.bui-btn-text.bui-btn-success {
-  color: var(--bui-color-success);
-}
-.bui-btn-text.bui-btn-info {
-  color: var(--bui-color-info);
-}
-.bui-btn-text.bui-btn-warning {
-  color: var(--bui-color-warning);
-}
-.bui-btn-text.bui-btn-danger {
-  color: var(--bui-color-danger);
-}
-.bui-btn-text.bui-btn-vip {
-  color: var(--bui-color-vip);
-}
-.bui-btn-contained {
-  background-color: var(--bg-color);
-}
-.bui-btn-contained.bui-btn-primary {
-  color: var(--bui-color-white);
-  background-image:
-    linear-gradient(
-      90deg,
-      var(--bui-color-primary-start) 0%,
-      var(--bui-color-primary-end) 100%);
-}
-.bui-btn-contained.bui-btn-success {
-  color: var(--bui-color-white);
-  background-image:
-    linear-gradient(
-      90deg,
-      var(--bui-color-success-start) 0%,
-      var(--bui-color-success-end) 100%);
-}
-.bui-btn-contained.bui-btn-info {
-  color: var(--bui-color-white);
-  background-image:
-    linear-gradient(
-      90deg,
-      var(--bui-color-info-start) 0%,
-      var(--bui-color-info-end) 100%);
-}
-.bui-btn-contained.bui-btn-warning {
-  color: var(--bui-color-white);
-  background-image:
-    linear-gradient(
-      90deg,
-      var(--bui-color-warning-start) 0%,
-      var(--bui-color-warning-end) 100%);
-}
-.bui-btn-contained.bui-btn-danger {
-  color: var(--bui-color-white);
-  background-image:
-    linear-gradient(
-      90deg,
-      var(--bui-color-danger-start) 0%,
-      var(--bui-color-danger-end) 100%);
-}
-.bui-btn-contained.bui-btn-vip {
-  color: #582331;
-  background-image:
-    linear-gradient(
-      90deg,
-      var(--bui-color-vip-start) 3%,
-      var(--bui-color-vip-end) 100%);
-}
-.bui-btn-outlined {
-  border: var(--outlined-default-border);
-}
-.bui-btn-outlined.bui-btn-primary {
-  color: var(--bui-color-primary);
-  border-color: var(--bui-color-primary);
-}
-.bui-btn-outlined.bui-btn-success {
-  color: var(--bui-color-success);
-  border-color: var(--bui-color-success);
-}
-.bui-btn-outlined.bui-btn-info {
-  color: var(--bui-color-info);
-  border-color: var(--bui-color-info);
-}
-.bui-btn-outlined.bui-btn-warning {
-  color: var(--bui-color-warning);
-  border-color: var(--bui-color-warning);
-}
-.bui-btn-outlined.bui-btn-danger {
-  color: var(--bui-color-danger);
-  border-color: var(--bui-color-danger);
-}
-.bui-btn-outlined.bui-btn-vip {
-  color: var(--bui-color-vip);
-  border-color: var(--bui-color-vip);
-}
-.bui-btn-light {
-  background-image: none;
-  background-color: var(--bui-color-gray-light);
-  border: var(--light-border);
-}
-.bui-btn-light.bui-btn-warning {
-  background-image: none;
-  border: var(--light-border);
-  color: var(--bui-color-warning);
-  background-color: var(--bui-color-warning-light);
-}
-.bui-btn-light.bui-btn-primary {
-  background-image: none;
-  border: var(--light-border);
-  color: var(--bui-color-primary);
-  background-color: var(--bui-color-primary-light);
-}
-.bui-btn-light.bui-btn-info {
-  background-image: none;
-  border: var(--light-border);
-  color: var(--bui-color-info);
-  background-color: var(--bui-color-info-light);
-}
-.bui-btn-light.bui-btn-success {
-  background-image: none;
-  border: var(--light-border);
-  color: var(--bui-color-success);
-  background-color: var(--bui-color-success-light);
-}
-.bui-btn-light.bui-btn-danger {
-  background-image: none;
-  border: var(--light-border);
-  color: var(--bui-color-danger);
-  background-color: var(--bui-color-danger-light);
-}
-.bui-btn-light.bui-btn-vip {
-  color: var(--bui-color-vip);
-  position: relative;
-  background-color: rgba(255, 134, 110, 0.3);
-}

package/dist/Button/Button.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import './Button.less';
-import { ButtonProps } from './Button.types';
-declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps<"button", {}>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export default Button;

package/dist/Button/Button.types.d.ts

@@ -1,52 +0,0 @@
-import { OverrideProps, ThemeColor, ButtonOpenType } from '@bifrostui/types';
-import React from 'react';
-export type ButtonProps<D extends React.ElementType = 'button', P = {}> = OverrideProps<{
-    props: P & {
-        /**
-         * 是否禁用
-         * @default false
-         */
-        disabled?: boolean;
-        /**
-         * 按钮尺寸
-         * - small: 小按钮
-         * - medium: 中号按钮，默认按钮
-         * - large: 大按钮/半屏按钮
-         * - full: 通栏按钮
-         * @default 'medium'
-         */
-        size?: 'small' | 'medium' | 'large' | 'full';
-        /** 按钮颜色
-         * @default 'default'
-         */
-        color?: ThemeColor | 'default' | 'vip';
-        /**
-         * 按钮类型
-         * - text: 文字按钮
-         * - outlined: 描边按钮
-         * - contained: 实心填充按钮
-         * - light: 浅亮填充按钮
-         * @default 'outlined'
-         */
-        variant?: 'outlined' | 'text' | 'contained' | 'light';
-        /**
-         * 在子元素前放在的内容
-         */
-        startIcon?: React.ReactNode;
-        /**
-         * 在子元素后放在的内容
-         */
-        endIcon?: React.ReactNode;
-        /**
-         * 点击事件回调方法
-         * @param event
-         * @returns
-         */
-        onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-        /**
-         * 仅微信小程序支持的button开放能力
-         */
-        openType?: ButtonOpenType;
-    };
-    defaultComponent: D;
-}, D>;

package/dist/Calendar/Calendar.css

@@ -1,120 +0,0 @@
-.bui-calendar {
-  --padding: var(--bui-calendar-padding, 6px 12px 7px);
-  --week-height: var(--bui-calendar-week-height, 30px);
-  --handler-height: var(--bui-calendar-handler-height, 28px);
-  --handler-margin-bottom: var(--bui-calendar-handler-margin-bottom, 7px);
-  --handler-text-width: var(--bui-calendar-handler-text-width, 80px);
-  --handler-btn-width: var(--bui-calendar-handler-btn-width, 46px);
-  --handler-btn-height: var(--bui-calendar-handler-btn-height, 100%);
-  --handler-btn-icon-font-size: var(--bui-calendar-handler-btn-icon-font-size, 28px);
-  --day-box-height: var(--bui-calendar-day-box-height, 30px);
-  --day-box-margin-bottom: var(--bui-calendar-day-box-margin-bottom, 7px);
-  --day-disabled-color: var(--bui-calendar-day-disabled-color, #9c9ca5);
-  --middle-color: var(--bui-calendar-middle-color, #000);
-  --middle-background-color: var(--bui-calendar-middle-background-color, #ffeaf1);
-  --range-both-ends-color: var(--bui-calendar-range-both-ends-color, #000);
-  --range-both-ends-background-color: var(--bui-calendar-range-both-ends-background-color, #ffc7da);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--bui-color-bg-view);
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
-  padding: var(--padding);
-  font-family: var(--bui-font-family);
-}
-.bui-calendar-week {
-  height: var(--week-height);
-  font-size: var(--bui-text-size-2);
-  font-weight: var(--bui-font-weight-medium);
-  color: var(--bui-color-fg-default);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.bui-calendar-week-item {
-  width: 14.28%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.bui-calendar-week-item:nth-child(1),
-.bui-calendar-week-item:nth-child(7) {
-  color: var(--bui-color-primary);
-}
-.bui-calendar-handler {
-  height: var(--handler-height);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: var(--handler-margin-bottom);
-}
-.bui-calendar-handler-text {
-  width: var(--handler-text-width);
-  font-size: var(--bui-title-size-3);
-  font-weight: var(--bui-font-weight-medium);
-  text-align: center;
-}
-.bui-calendar-handler-btn {
-  font-size: 16px;
-  height: var(--handler-btn-height);
-  width: var(--handler-btn-width);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.bui-calendar-handler-btn-icon {
-  font-size: var(--handler-btn-icon-font-size);
-}
-.bui-calendar-month {
-  display: flex;
-  flex-wrap: wrap;
-  margin-bottom: var(--bui-spacing-sm);
-}
-.bui-calendar-day-box {
-  width: 14.28%;
-  height: var(--day-box-height);
-  margin-bottom: var(--day-box-margin-bottom);
-}
-.bui-calendar-highlight-day .bui-calendar-day {
-  color: var(--bui-color-primary);
-}
-.bui-calendar-day {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--bui-shape-radius-default);
-  font-size: var(--bui-title-size-4);
-  font-weight: var(--bui-font-weight-medium);
-  color: var(--bui-color-fg-default);
-  cursor: pointer;
-}
-.bui-calendar-day.bui-calendar-disabled {
-  color: var(--day-disabled-color);
-}
-.bui-calendar-today {
-  color: var(--bui-color-primary);
-}
-.bui-calendar-middle {
-  color: var(--middle-color);
-  border-radius: 0;
-  background-color: var(--middle-background-color);
-}
-.bui-calendar-start {
-  color: var(--range-both-ends-color);
-  background-color: var(--range-both-ends-background-color);
-}
-.bui-calendar-range {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.bui-calendar-end {
-  color: var(--range-both-ends-color);
-  background-color: var(--range-both-ends-background-color);
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}

package/dist/Calendar/Calendar.d.ts

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

package/dist/Calendar/Calendar.types.d.ts

@@ -1,102 +0,0 @@
-import { OverrideProps } from '@bifrostui/types';
-import React from 'react';
-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;
-        /**
-         * 自定义日期单元格的内容
-         */
-        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>;