@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/es/Select/Select.css

@@ -1,104 +0,0 @@
-.bui-select {
-  --height: var(--bui-select-height, 27px);
-  --mini-width: var(--bui-select-min-width, 100px);
-  --font-size: var(--bui-select-font-size, var(--bui-title-size-3));
-  --padding: var(--bui-select-selector-container, 0 14px);
-  position: relative;
-  cursor: pointer;
-  height: var(--height);
-  min-width: var(--mini-width);
-  font-size: var(--font-size);
-  border-radius: 5px;
-  background-color: var(--bui-color-bg-view);
-  font-family: var(--bui-font-family);
-  -webkit-tap-highlight-color: transparent;
-}
-.bui-select-active {
-  box-shadow: 0 0 0 2px var(--bui-color-bg-default);
-}
-.bui-select-selector-container {
-  display: flex;
-  align-items: center;
-  padding: var(--padding);
-  height: 100%;
-}
-.bui-select-input {
-  width: 0;
-  height: 0;
-  border: 0;
-  opacity: 0;
-  pointer-events: none;
-}
-.bui-select-placeholder {
-  color: var(--bui-color-fg-disabled);
-}
-.bui-select-selector {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex: 1;
-  height: var(--height);
-  background-color: transparent;
-  outline: none;
-  border: 0;
-}
-.bui-select-selector-icon {
-  font-size: var(--bui-title-size-3);
-}
-.bui-select-option-container {
-  position: absolute;
-  box-sizing: border-box;
-  font-size: var(--bui-select-font-size, var(--bui-title-size-3));
-  z-index: var(--bui-z-index-tooltip);
-  border-radius: 3px;
-  padding: 2px;
-  overflow: hidden;
-}
-.bui-select-option-container-top {
-  margin-top: -6px;
-}
-.bui-select-option-container-bottom {
-  margin-top: 6px;
-}
-.bui-select-option-container-hide {
-  pointer-events: none;
-}
-.bui-select-option-main {
-  border-radius: 3px;
-  padding: var(--bui-select-option-container-padding, 3px 0);
-  box-shadow: 0 0 0 2px var(--bui-color-bg-default);
-  background-color: var(--bui-color-bg-view);
-  overflow: hidden;
-}
-.bui-select-option {
-  --option-padding: var(--bui-select-option-padding, 0 14px);
-  --option-margin: var(--bui-select-option-margin, 0 3px);
-  --option-height: var(--bui-select-option-height, 27px);
-  display: flex;
-  align-items: center;
-  height: var(--option-height);
-  padding: var(--option-padding);
-  border-radius: 5px;
-  margin: var(--option-margin);
-}
-.bui-select-option:hover {
-  background-color: var(---bui-select-options-active-bg, #fff2f0);
-  color: var(--bui-color-primary);
-}
-.bui-select-option-active {
-  font-weight: var(--bui-font-weight-medium);
-  color: var(--bui-color-primary);
-  background-color: var(---bui-select-options-active-bg, #fff2f0);
-}
-.bui-select-option-hide {
-  opacity: 0;
-  transform: translateY(-5px);
-}
-.bui-select.bui-select-disabled,
-.bui-select-option-disabled {
-  pointer-events: none;
-  box-shadow: none;
-  background-color: var(--bui-color-bg-view);
-  color: var(--bui-color-fg-subtle);
-  border: none;
-}

package/es/Select/Select.d.ts

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

package/es/Select/Select.types.d.ts

@@ -1,104 +0,0 @@
-import { OverrideProps } from '@bifrostui/types';
-import React, { Ref, SyntheticEvent } from 'react';
-import { BackdropProps } from '../Backdrop';
-export type BuiSelectValue = string | number;
-export interface BuiSelectContextProps {
-    /**
-     * 当前选中值
-     */
-    selectValue?: BuiSelectValue;
-    /**
-     * 设置根选择器展示内容
-     */
-    setRenderValue?: React.Dispatch<React.SetStateAction<string>>;
-    /**
-     * 选项点击的回调
-     */
-    handleOptionClick?: (event?: React.MouseEvent<HTMLDivElement>, value?: BuiSelectValue, label?: React.ReactNode) => void;
-}
-export type SelectOptionProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
-    props: P & {
-        /**
-         * 选项的值
-         */
-        value?: BuiSelectValue;
-        /**
-         * 回填内容
-         * 没传children时也作为选项内容
-         */
-        label?: React.ReactNode;
-        /**
-         * 禁用
-         */
-        disabled?: boolean;
-    };
-    defaultComponent: D;
-}, D>;
-export type SelectProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
-    props: P & {
-        /**
-         * inputRef
-         */
-        inputRef?: Ref<HTMLInputElement>;
-        /**
-         * inputProp
-         */
-        inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-        /**
-         * BackdropProp
-         */
-        BackdropProps?: BackdropProps;
-        /**
-         * input 名称标识
-         */
-        name?: string;
-        /**
-         * 当前值
-         */
-        value?: BuiSelectValue;
-        /**
-         * 默认值
-         */
-        defaultValue?: BuiSelectValue;
-        /**
-         * 没有选中时显示的内容
-         */
-        placeholder?: React.ReactNode;
-        /**
-         * 自定义图标
-         */
-        icon?: React.ReactNode;
-        /**
-         * 禁用
-         */
-        disabled?: boolean;
-        /**
-         * 是否展开下拉框
-         */
-        open?: boolean;
-        /**
-         * 滚动容器
-         * 下拉框元素和children将会被append到scrollContainer中
-         * 默认是页面的根节点
-         */
-        scrollContainer?: () => Element | null;
-        /**
-         * 自定义选中后展示的内容
-         */
-        /**
-         * 选中某一项时的回调，并将选中的值传递过去
-         */
-        onChange?: (e: SyntheticEvent, data: {
-            value: string;
-        }) => void;
-        /**
-         * 展开下拉框时的回调
-         */
-        onOpen?: () => void;
-        /**
-         * 折叠下拉框时的回调
-         */
-        onClose?: () => void;
-    };
-    defaultComponent: D;
-}, D>;

package/es/Select/SelectOption.d.ts

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

package/es/Select/selectContext.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { BuiSelectContextProps } from './Select.types';
-declare const BuiSelectContext: import("react").Context<BuiSelectContextProps>;
-export default BuiSelectContext;

package/es/Skeleton/Skeleton.css

@@ -1,59 +0,0 @@
-.bui-skeleton {
-  --height: var(--bui-skeleton-height, 1.2em);
-  display: block;
-}
-.bui-skeleton-animation-wave {
-  background:
-    linear-gradient(
-      90deg,
-      rgba(190, 190, 190, 0.2) 25%,
-      rgba(129, 129, 129, 0.24) 37%,
-      rgba(190, 190, 190, 0.2) 63%);
-  background-size: 400% 100%;
-  animation: bui-skeleton-wave 1.4s ease infinite;
-}
-.bui-skeleton-animation-pulse {
-  background: rgba(190, 190, 190, 0.35);
-  animation: bui-skeleton-pulse 1.4s ease infinite;
-}
-.bui-skeleton-text {
-  height: auto;
-  transform-origin: 0 55%;
-  transform: scale(1, 0.6);
-  border-radius: var(--bui-shape-radius-label);
-}
-.bui-skeleton-text::before {
-  content: "\a0";
-}
-.bui-skeleton-rectangular {
-  height: var(--height);
-}
-.bui-skeleton-rounded {
-  height: var(--height);
-  border-radius: var(--bui-shape-radius-label);
-}
-.bui-skeleton-circular {
-  border-radius: 50%;
-}
-.bui-skeleton-with-children {
-  max-width: fit-content;
-}
-@keyframes bui-skeleton-wave {
-  0% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0 50%;
-  }
-}
-@keyframes bui-skeleton-pulse {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.58;
-  }
-  100% {
-    opacity: 1;
-  }
-}

package/es/Skeleton/Skeleton.d.ts

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

package/es/Slider/Slider.css

@@ -1,106 +0,0 @@
-.bui-slider {
-  --line-color: var(--bui-slider-line-color, var(--bui-color-primary));
-  --line-bg-color: var(--bui-slider-line-bg-color, var(--bui-color-border-default));
-  --width: var(--bui-slider-width, 100%);
-  --height: var(--bui-slider-height, 2px);
-  --padding: var(--bui-slider-padding, 19px 0);
-  --button-width: var(--bui-slider-button-width, 26px);
-  --button-height: var(--bui-slider-button-height, 26px);
-  --button-font-size: var(--bui-slider-button-font-size, var(--bui-title-size-3));
-  --button-border-radius: var(--bui-slider-button-border-radius, 50%);
-  --tooltip-width: var(--bui-slider-tooltip-width, 46px);
-  --tooltip-height: var(--bui-slider-tooltip-height, 24px);
-  --tooltip-line-height: var(--bui-slider-tooltip-line-height, 24px);
-  --tooltip-border-radius: var(--bui-slider-tooltip-border-radius, 24px);
-  --tooltip-font-size: var(--bui-tooltip-font-size, var(--bui-text-size-3));
-  --tooltip-color: var(--bui-tooltip-color, var(--bui-color-white));
-  --tooltip-bg-color: var(--bui-tooltip-bg-color, var(--line-color));
-  position: relative;
-  width: var(--width);
-  height: var(--height);
-  padding: var(--padding);
-  box-sizing: border-box;
-  font-family: var(--bui-font-family);
-}
-.bui-slider-disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}
-.bui-slider-line {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  height: var(--height);
-  transform: translateY(-50%);
-  background-color: var(--line-color);
-}
-.bui-slider-rail {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 100%;
-  height: var(--height);
-  transform: translateY(-50%);
-  background-color: var(--line-bg-color);
-}
-.bui-slider-button {
-  display: flex;
-  position: absolute;
-  justify-content: center;
-  align-items: center;
-  width: var(--button-width);
-  height: var(--button-height);
-  background-color: var(--bui-color-white);
-  box-shadow: #ddd 0 0 10px;
-  border-radius: var(--button-border-radius);
-  transform: translate(-50%, -50%);
-  font-size: var(--bui-title-size-3);
-  cursor: grab;
-}
-.bui-slider-button::after {
-  position: absolute;
-  content: "";
-  top: -10px;
-  bottom: -10px;
-  left: -10px;
-  right: -10px;
-}
-.bui-slider-button-0 {
-  left: 0%;
-  top: 50%;
-  z-index: var(--bui-z-index-affix);
-}
-.bui-slider-button-1 {
-  left: 0%;
-  top: 50%;
-  z-index: var(--bui-z-index-affix);
-}
-.bui-slider-tooltip {
-  position: absolute;
-  top: -14px;
-  width: var(--tooltip-width);
-  height: var(--tooltip-height);
-  line-height: var(--tooltip-line-height);
-  font-size: var(--tooltip-font-size);
-  border-radius: var(--tooltip-border-radius);
-  color: var(--tooltip-color);
-  text-align: center;
-  background-color: var(--tooltip-bg-color);
-  transform: translate(-50%, -50%);
-  z-index: var(--bui-z-index-popover);
-}
-.bui-slider-tooltip::after {
-  position: absolute;
-  bottom: -10px;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-  content: "";
-  width: 0;
-  height: 0;
-  border: 6px solid transparent;
-  border-top: 6px solid var(--tooltip-bg-color);
-}
-.bui-slider-tooltip-hidden {
-  display: none;
-}

package/es/Slider/Slider.d.ts

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

package/es/Stack/Stack.d.ts

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

package/es/Steps/Steps.d.ts

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

package/es/SwipeAction/SwipeActionContext.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { BuiSwipeActionContextProps } from './SwipeAction.types';
-declare const BuiSwipeActionContext: import("react").Context<BuiSwipeActionContextProps>;
-export default BuiSwipeActionContext;

package/es/Swiper/Swiper.css

@@ -1,21 +0,0 @@
-.bui-swiper {
-  --height: var(--bui-swiper-height, 150px);
-  font-family: var(--bui-font-family);
-}
-.bui-swiper .swiper-container-wrapper {
-  height: var(--height);
-}
-.bui-swiper .swiper-container {
-  height: 100%;
-}
-.bui-swiper .swiper-pagination {
-  font-size: 0;
-}
-.bui-swiper .swiper-pagination-bullet {
-  opacity: 1;
-  background: var(--indicator-color);
-}
-.bui-swiper .swiper-pagination-bullet-active {
-  opacity: 1;
-  background: var(--indicator-color-active);
-}

package/es/Swiper/Swiper.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import 'swiper/css';
-import 'swiper/css/autoplay';
-import 'swiper/css/pagination';
-import 'swiper/css/effect-fade';
-import { SwiperRef } from 'swiper/react';
-import './Swiper.less';
-import { SwiperProps } from './Swiper.types';
-declare const Swiper: React.ForwardRefExoticComponent<Omit<SwiperProps<"div", {}>, "ref"> & React.RefAttributes<SwiperRef>>;
-export default Swiper;

package/es/Switch/Switch.css

@@ -1,142 +0,0 @@
-.bui-switch {
-  --bg-color: var(--bui-switch-bg-color, #ccc);
-  --padding: var(--bui-switch-padding, 0);
-  --border-radius: var(--bui-switch-border-radius, 15px);
-  --small-width: var(--bui-switch-small-width, 24px);
-  --small-height: var(--bui-switch-small-height, 16px);
-  --small-font-size: var(--bui-switch-small-font-size, 9px);
-  --controller-small-width: var(--bui-switch-controller-small-width, 12px);
-  --controller-small-height: var(--bui-switch-controller-small-height, 12px);
-  --medium-width: var(--bui-switch-medium-width, 44px);
-  --medium-height: var(--bui-switch-medium-height, 22px);
-  --controller-medium-width: var(--bui-switch-controller-medium-width, 18px);
-  --controller-medium-height: var(--bui-switch-controller-medium-height, 18px);
-  --large-width: var(--bui-switch-large-width, 51px);
-  --large-height: var(--bui-switch-large-height, 30px);
-  --controller-large-width: var(--bui-switch-controller-large-width, 24px);
-  --controller-large-height: var(--bui-switch-controller-large-height, 24px);
-  position: relative;
-  display: inline-block;
-  box-sizing: border-box;
-  padding: var(--padding);
-  vertical-align: middle;
-  border-radius: var(--border-radius);
-  background-color: var(--bg-color);
-  transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
-  font-family: var(--bui-font-family);
-}
-.bui-switch::after {
-  position: absolute;
-  left: 2px;
-  top: 2px;
-  border-radius: 50%;
-  background-color: #fff;
-  content: " ";
-  cursor: pointer;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
-  transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
-  animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
-  animation-duration: 0.3s;
-}
-.bui-switch:focus {
-  outline: none;
-}
-.bui-switch-small {
-  width: var(--small-width);
-  height: var(--small-height);
-}
-.bui-switch-small .bui-switch-inner {
-  left: calc(100% - 10px);
-  font-size: var(--font-size-smal);
-}
-.bui-switch-small::after {
-  width: var(--controller-small-width);
-  height: var(--controller-small-height);
-  left: 2px;
-  top: 2px;
-}
-.bui-switch-small.bui-switch-checked::after {
-  left: calc(100% - 14px);
-}
-.bui-switch-small.bui-switch-checked .bui-switch-inner {
-  left: 2px;
-}
-.bui-switch-medium {
-  width: var(--medium-width);
-  height: var(--medium-height);
-}
-.bui-switch-medium::after {
-  width: var(--controller-medium-width);
-  height: var(--controller-medium-height);
-}
-.bui-switch-medium.bui-switch-checked::after {
-  left: calc(100% - 20px);
-}
-.bui-switch-medium.bui-switch-checked .bui-switch-inner {
-  left: var(--bui-spacing-sm);
-}
-.bui-switch-large {
-  width: var(--large-width);
-  height: var(--large-height);
-}
-.bui-switch-large .bui-switch-inner {
-  left: calc(100% - 22px);
-}
-.bui-switch-large::after {
-  width: var(--controller-large-width);
-  height: var(--controller-large-height);
-  left: 3px;
-  top: 3px;
-}
-.bui-switch-large.bui-switch-checked::after {
-  left: calc(100% - 27px);
-}
-.bui-switch-large.bui-switch-checked .bui-switch-inner {
-  left: var(--bui-spacing-sm);
-}
-.bui-switch-primary.bui-switch-checked {
-  background-color: var(--bui-color-primary);
-}
-.bui-switch-info.bui-switch-checked {
-  background-color: var(--bui-color-info);
-}
-.bui-switch-success.bui-switch-checked {
-  background-color: var(--bui-color-success);
-}
-.bui-switch-warning.bui-switch-checked {
-  background-color: var(--bui-color-warning);
-}
-.bui-switch-danger.bui-switch-checked {
-  background-color: var(--bui-color-danger);
-}
-.bui-switch-inner {
-  position: absolute;
-  left: calc(100% - 20px);
-  color: var(--bui-color-white);
-  font-size: var(--bui-text-size-3);
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-.bui-switch-inner .bui-svg-icon {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.bui-switch-disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}
-.bui-switch-disabled::after {
-  animation-name: none;
-  cursor: not-allowed;
-}
-.bui-switch-input {
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  position: absolute;
-  z-index: 1;
-  cursor: pointer;
-}

package/es/Switch/Switch.d.ts

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

package/es/Switch/Switch.types.d.ts

@@ -1,56 +0,0 @@
-import { OverrideProps, ThemeColor } from '@bifrostui/types';
-import React, { ReactNode } from 'react';
-export type SwitchProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
-    props: P & {
-        /**
-         * 是否选中
-         */
-        checked?: boolean;
-        /**
-         * 默认是否选中，当组件非受控时使用
-         */
-        defaultChecked?: boolean;
-        /**
-         * 内部<input>标签的ref
-         */
-        inputRef?: React.Ref<HTMLInputElement>;
-        /**
-         * <input>名称标识
-         */
-        name?: string;
-        /**
-         * 内部<input>标签的标准属性
-         */
-        inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-        /**
-         * 选中时的内容
-         */
-        checkedChildren?: ReactNode;
-        /**
-         * 未选中时的内容
-         */
-        unCheckedChildren?: ReactNode;
-        /**
-         * 是否禁用
-         * @default false
-         */
-        disabled?: boolean;
-        /**
-         * 大小 'small' | 'medium' | 'large'
-         * @default 'medium'
-         */
-        size?: 'small' | 'medium' | 'large';
-        /**
-         * 颜色 'primary' | 'info' | 'success' | 'warning' | 'danger';
-         * @default 'primary'
-         */
-        color?: ThemeColor;
-        /**
-         * 变化时的回调函数
-         */
-        onChange?: (e: React.SyntheticEvent, data: {
-            checked: boolean;
-        }) => void;
-    };
-    defaultComponent: D;
-}, D>;

package/es/TabBar/TabBarContext.d.ts

@@ -1,27 +0,0 @@
-import { ThemeColor } from '@bifrostui/types';
-import { Context, SyntheticEvent } from 'react';
-export interface TabBarState {
-    /**
-     * 当前选中的标签索引值
-     * @default 0
-     */
-    currentIndex?: number;
-    /**
-     * 选中文案颜色
-     * @default 'primary'
-     */
-    activeColor?: ThemeColor | 'default' | 'vip';
-    /**
-     * 默认文案颜色
-     * @default 'default'
-     */
-    color?: ThemeColor | 'default' | 'vip';
-    /**
-     * 变化时回调函数
-     */
-    onChange?: (e: SyntheticEvent, data: {
-        value: number;
-    }) => void;
-}
-declare const TabBarContext: Context<TabBarState>;
-export default TabBarContext;