@bifrostui/react 0.0.5

package/es/Select/Select.js

@@ -0,0 +1,165 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["className", "children", "name", "inputRef", "inputProps", "BackdropProps", "value", "defaultValue", "disabled", "placeholder", "icon", "open", "onChange", "onClose", "onOpen", "onClick"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { CaretDownIcon, CaretUpIcon } from '@bifrostui/icons';
+import { useValue } from '@bifrostui/utils';
+import clsx from 'clsx';
+import React, { useEffect, useMemo, useState } from 'react';
+import Fade from "../Fade";
+import Slide from "../Slide";
+import BuiSelectContext from "./selectContext";
+import Backdrop from "../Backdrop";
+import "./Select.css";
+var prefixCls = 'bui-select';
+var Select = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    children = props.children,
+    name = props.name,
+    inputRef = props.inputRef,
+    inputProps = props.inputProps,
+    BackdropProps = props.BackdropProps,
+    value = props.value,
+    defaultValue = props.defaultValue,
+    disabled = props.disabled,
+    placeholder = props.placeholder,
+    icon = props.icon,
+    open = props.open,
+    onChange = props.onChange,
+    onClose = props.onClose,
+    onOpen = props.onOpen,
+    onClick = props.onClick,
+    others = _objectWithoutProperties(props, _excluded);
+  var _useValue = useValue({
+      value: value,
+      defaultValue: defaultValue,
+      onChange: onChange
+    }),
+    _useValue2 = _slicedToArray(_useValue, 2),
+    selectValue = _useValue2[0],
+    selectValueChange = _useValue2[1];
+
+  // 是否展开下拉框
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  // 根选择器展示的内容
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    renderValue = _useState4[0],
+    setRenderValue = _useState4[1];
+  var defaultIcon = isOpen ? /*#__PURE__*/React.createElement(CaretUpIcon, {
+    className: "".concat(prefixCls, "-selector-icon"),
+    htmlColor: "#9c9ca5"
+  }) : /*#__PURE__*/React.createElement(CaretDownIcon, {
+    className: "".concat(prefixCls, "-selector-icon"),
+    htmlColor: "#9c9ca5"
+  });
+
+  // 点击根选择器的回调
+  var handleSelectClick = function handleSelectClick(e) {
+    if (disabled) return;
+    setIsOpen(!isOpen);
+    if (typeof onClick === 'function') onClick(e);
+  };
+
+  // 点击某个选项的回调
+  var handleOptionClick = function handleOptionClick(e, optionValue, label) {
+    if (!value) {
+      setRenderValue(label);
+      selectValueChange(e, optionValue);
+    } else {
+      onChange === null || onChange === void 0 || onChange(e, {
+        value: optionValue
+      });
+    }
+    setIsOpen(false);
+  };
+  var handleBackdropTouchStart = function handleBackdropTouchStart() {
+    if (isOpen) {
+      setIsOpen(false);
+    }
+  };
+  var selectContext = useMemo(function () {
+    return {
+      selectValue: selectValue,
+      setRenderValue: setRenderValue,
+      handleOptionClick: handleOptionClick
+    };
+  }, [selectValue]);
+
+  // 监听外部open的改变
+  useEffect(function () {
+    if (open !== undefined) setIsOpen(open);
+  }, [open]);
+
+  // 折叠/展开时的处理
+  useEffect(function () {
+    // 非function情况，直接调用会报错
+    if (isOpen) {
+      onOpen === null || onOpen === void 0 || onOpen();
+    } else {
+      onClose === null || onClose === void 0 || onClose();
+    }
+  }, [isOpen]);
+  return /*#__PURE__*/React.createElement(BuiSelectContext.Provider, {
+    value: selectContext
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx(prefixCls, className, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-disabled"), disabled), "".concat(prefixCls, "-active"), isOpen)),
+    ref: ref
+  }, others, {
+    onClick: handleSelectClick
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-selector-container")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-selector")
+  }, renderValue || placeholder), /*#__PURE__*/React.createElement("input", _extends({
+    name: name,
+    readOnly: true,
+    ref: inputRef,
+    value: selectValue
+  }, inputProps, {
+    className: clsx("".concat(prefixCls, "-input"), _defineProperty({}, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className))
+  })), icon || defaultIcon), /*#__PURE__*/React.createElement(Fade, {
+    in: isOpen,
+    timeout: {
+      enter: 150,
+      exit: 150
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(prefixCls, "-option-container"))
+  }, /*#__PURE__*/React.createElement(Slide, {
+    in: isOpen,
+    timeout: {
+      enter: 150,
+      exit: 150
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(prefixCls, "-option-main"))
+  }, children))))), /*#__PURE__*/React.createElement(Backdrop, _extends({
+    open: isOpen,
+    invisible: true
+    // onTouchStart 解决需滑动两次透明蒙层才会消失
+    ,
+    onTouchStart: handleBackdropTouchStart,
+    onClick: handleBackdropTouchStart
+  }, BackdropProps, {
+    className: clsx("".concat(prefixCls, "-backdrop"), _defineProperty({}, BackdropProps === null || BackdropProps === void 0 ? void 0 : BackdropProps.className, BackdropProps === null || BackdropProps === void 0 ? void 0 : BackdropProps.className))
+  })));
+});
+Select.displayName = 'BuiSelect';
+Select.defaultProps = {
+  defaultValue: ''
+};
+export default Select;

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

@@ -0,0 +1,98 @@
+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;
+        /**
+         * 自定义选中后展示的内容
+         */
+        /**
+         * 选中某一项时的回调，并将选中的值传递过去
+         */
+        onChange?: (e: SyntheticEvent, data: {
+            value: string;
+        }) => void;
+        /**
+         * 展开下拉框时的回调
+         */
+        onOpen?: () => void;
+        /**
+         * 折叠下拉框时的回调
+         */
+        onClose?: () => void;
+    };
+    defaultComponent: D;
+}, D>;

package/es/Select/Select.types.js

@@ -0,0 +1 @@
+export {};

package/es/Select/SelectOption.d.ts

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

package/es/Select/SelectOption.js

@@ -0,0 +1,43 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["value", "label", "disabled", "className", "children"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import clsx from 'clsx';
+import React, { useContext, useEffect } from 'react';
+import BuiSelectContext from "./selectContext";
+import "./Select.css";
+var prefixCls = 'bui-select-option';
+var SelectOption = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var value = props.value,
+    label = props.label,
+    disabled = props.disabled,
+    className = props.className,
+    children = props.children,
+    others = _objectWithoutProperties(props, _excluded);
+  var _useContext = useContext(BuiSelectContext),
+    selectValue = _useContext.selectValue,
+    setRenderValue = _useContext.setRenderValue,
+    handleOptionClick = _useContext.handleOptionClick;
+
+  // 自定义label值+defaultValue初始化时，传递自定义label值到select
+  useEffect(function () {
+    if (value === selectValue) {
+      setRenderValue(label);
+    }
+  }, [selectValue, label, value]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx(prefixCls, className, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-active"), !disabled && value === selectValue), "".concat(prefixCls, "-disabled"), disabled)),
+    ref: ref
+  }, others, {
+    onClick: function onClick(e) {
+      // 传递当前选中选项的value、label
+      if (!disabled) handleOptionClick(e, value, label);
+    }
+  }), children || label);
+});
+SelectOption.displayName = 'BuiSelectOption';
+export default SelectOption;

package/es/Select/index.d.ts

@@ -0,0 +1,4 @@
+import SelectOption from './SelectOption';
+export { default, default as Select } from './Select';
+export * from './Select.types';
+export { SelectOption };

package/es/Select/index.js

@@ -0,0 +1,4 @@
+import SelectOption from "./SelectOption";
+export { default, default as Select } from "./Select";
+export * from "./Select.types";
+export { SelectOption };

package/es/Select/selectContext.d.ts

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

package/es/Select/selectContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+var BuiSelectContext = /*#__PURE__*/createContext({
+  selectValue: null
+});
+export default BuiSelectContext;

package/es/Skeleton/Skeleton.css

@@ -0,0 +1,54 @@
+.bui-skeleton {
+  --border-radius: var(--bui-shape-radius-label);
+  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(--border-radius);
+}
+.bui-skeleton-text::before {
+  content: '\00a0';
+}
+.bui-skeleton-rectangular {
+  height: 1.2em;
+}
+.bui-skeleton-rounded {
+  height: 1.2em;
+  border-radius: var(--border-radius);
+}
+.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

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

package/es/Skeleton/Skeleton.js

@@ -0,0 +1,38 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["className", "style", "animation", "width", "height", "variant", "children"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import clsx from 'clsx';
+import React from 'react';
+import "./Skeleton.css";
+var prefixCls = 'bui-skeleton';
+var Skeleton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    style = props.style,
+    animation = props.animation,
+    width = props.width,
+    height = props.height,
+    variant = props.variant,
+    children = props.children,
+    others = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: clsx(prefixCls, "".concat(prefixCls, "-").concat(variant), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-animation-").concat(animation), animation), "".concat(prefixCls, "-with-children"), Boolean(children)), className),
+    ref: ref,
+    style: _objectSpread({
+      width: width,
+      height: height
+    }, style)
+  }, others), children);
+});
+Skeleton.displayName = 'BuiSkeleton';
+Skeleton.defaultProps = {
+  animation: 'wave',
+  variant: 'text'
+};
+export default Skeleton;

package/es/Skeleton/Skeleton.types.d.ts

@@ -0,0 +1,33 @@
+import { OverrideProps } from '@bifrostui/types';
+import React from 'react';
+export type VariantEnum = 'text' | 'circular' | 'rectangular' | 'rounded';
+export type animationEnum = 'wave' | 'pulse' | false;
+export type SkeletonProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 动效 'wave' | 'pulse' | false
+         * 对应动效 波纹 | 脉搏 | 无动效
+         * @default 'wave'
+         */
+        animation?: animationEnum;
+        /**
+         * 展现形式
+         * - text 文本，可以根据`font-size`自动调整高度
+         * - circular 圆形
+         * - rectangular 方块
+         * - rounded 圆角方块
+         * @default 'text'
+         */
+        variant?: VariantEnum;
+        /**
+         * 占位宽度
+         * @default 100%
+         */
+        width?: string | number;
+        /**
+         * 占位高度
+         */
+        height?: string | number;
+    };
+    defaultComponent: D;
+}, D>;

package/es/Skeleton/Skeleton.types.js

@@ -0,0 +1 @@
+export {};

package/es/Skeleton/index.d.ts

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

package/es/Skeleton/index.js

@@ -0,0 +1,3 @@
+export { default } from "./Skeleton";
+export { default as Skeleton } from "./Skeleton";
+export * from "./Skeleton.types";

package/es/Slide/Slide.d.ts

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

package/es/Slide/Slide.js

@@ -0,0 +1,85 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["appear", "in", "children", "style", "easing", "timeout", "direction", "delay"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { createTransitions, duration, easing, getTransitionProps, useForkRef } from '@bifrostui/utils';
+import React from 'react';
+import Transition from "../Transition";
+var defaultEasing = {
+  enter: easing.easeOut,
+  exit: easing.sharp
+};
+var defaultTimeout = {
+  enter: duration.enteringScreen,
+  exit: duration.leavingScreen
+};
+var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var appear = props.appear,
+    inProp = props.in,
+    children = props.children,
+    style = props.style,
+    easingProp = props.easing,
+    timeout = props.timeout,
+    direction = props.direction,
+    delay = props.delay,
+    others = _objectWithoutProperties(props, _excluded);
+  var transitions = createTransitions();
+  // @ts-expect-error will upstream fix
+  var nodeRef = useForkRef(ref, children === null || children === void 0 ? void 0 : children.ref);
+  var getTranslateValue = function getTranslateValue(_direction) {
+    if (_direction === 'left') {
+      return 'translateX(100%)';
+    }
+    if (_direction === 'right') {
+      return 'translateX(-100%)';
+    }
+    if (_direction === 'up') {
+      return 'translateY(100%)';
+    }
+
+    // direction === 'down'
+    return 'translateY(-100%)';
+  };
+  if (!children) return null;
+  return /*#__PURE__*/React.createElement(Transition, _extends({}, others, {
+    appear: appear,
+    in: inProp,
+    timeout: timeout,
+    delay: delay,
+    ref: nodeRef
+  }), function (state, childProps) {
+    var transition = transitions.create('transform', getTransitionProps({
+      timeout: timeout,
+      style: style,
+      easing: easingProp,
+      delay: delay
+    }, {
+      mode: state
+    }));
+    var transform = state === 'entering' || state === 'entered' ? 'none' : getTranslateValue(direction);
+    return /*#__PURE__*/React.cloneElement(children, _objectSpread({
+      style: _objectSpread(_objectSpread({
+        visibility: state === 'exited' ? 'hidden' : 'visible',
+        transition: transition,
+        WebkitTransition: transition,
+        transform: transform,
+        WebkitTransform: transform
+      }, style), children.props.style)
+    }, childProps));
+  });
+});
+Slide.displayName = 'BuiSlide';
+Slide.defaultProps = {
+  appear: true,
+  easing: defaultEasing,
+  timeout: defaultTimeout,
+  direction: 'down',
+  delay: 0
+};
+export default Slide;

package/es/Slide/Slide.types.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { TransitionProps } from '../Transition';
+export interface SlideProps extends Omit<TransitionProps, 'children'> {
+    children?: React.ReactElement;
+    /**
+     * 动画的方向: 'left' | 'right' | 'up' | 'down' 默认是从上往下
+     * @default 'down'
+     */
+    direction?: 'left' | 'right' | 'up' | 'down';
+    easing?: string | {
+        enter?: string;
+        exit?: string;
+    };
+}

package/es/Slide/Slide.types.js

@@ -0,0 +1 @@
+export {};

package/es/Slide/index.d.ts

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

package/es/Slide/index.js

@@ -0,0 +1,3 @@
+export { default } from "./Slide";
+export { default as Slide } from "./Slide";
+export * from "./Slide.types";