@bifrostui/react 0.0.5

package/dist/Switch/Switch.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _utils = require("@bifrostui/utils");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireWildcard(require("react"));
+require("./Switch.css");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+const prefixCls = 'bui-switch';
+const Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    className,
+    checked,
+    defaultChecked,
+    inputProps,
+    inputRef,
+    name,
+    checkedChildren,
+    unCheckedChildren,
+    disabled,
+    size,
+    color,
+    onChange,
+    ...others
+  } = props;
+  const [switchChecked, triggerChange] = (0, _utils.useValue)({
+    value: checked,
+    defaultValue: !!defaultChecked
+  });
+  const changeAction = (e, isChecked) => {
+    // 同时支持defaultChecked和checked
+    triggerChange(e, isChecked);
+    onChange?.(e, {
+      checked: isChecked
+    });
+  };
+  const handleChange = e => {
+    const isChecked = !switchChecked;
+    changeAction(e, isChecked);
+    inputProps?.onChange?.(e);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref,
+    className: (0, _clsx.default)(`${prefixCls}`, `${prefixCls}-${size}`, `${prefixCls}-${color}`, {
+      [`${prefixCls}-checked`]: switchChecked,
+      [`${prefixCls}-disabled`]: disabled
+    }, className)
+  }, others), /*#__PURE__*/_react.default.createElement("input", _extends({
+    ref: inputRef,
+    type: "checkbox",
+    name: name,
+    checked: switchChecked,
+    disabled: disabled
+  }, inputProps, {
+    onChange: handleChange,
+    className: (0, _clsx.default)(`${prefixCls}-input`, inputProps?.className)
+  })), (checkedChildren || unCheckedChildren) && /*#__PURE__*/_react.default.createElement("span", {
+    className: `${prefixCls}-inner`
+  }, switchChecked ? checkedChildren : unCheckedChildren));
+});
+Switch.displayName = 'BuiSwitch';
+Switch.defaultProps = {
+  disabled: false,
+  size: 'medium',
+  color: 'primary'
+};
+var _default = exports.default = Switch;

package/dist/Switch/Switch.types.d.ts

@@ -0,0 +1,56 @@
+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/dist/Switch/Switch.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/Switch/index.d.ts

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

package/dist/Switch/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Switch: true
+};
+Object.defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function () {
+    return _Switch.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Switch.default;
+  }
+});
+var _Switch = _interopRequireDefault(require("./Switch"));
+var _Switch2 = require("./Switch.types");
+Object.keys(_Switch2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Switch2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Switch2[key];
+    }
+  });
+});
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/TabBar/TabBar.css

@@ -0,0 +1,8 @@
+.bui-tab-bar {
+  display: flex;
+  width: 100%;
+  height: 50px;
+  padding: 6px 0;
+  background: var(--bui-color-white);
+  font-family: var(--bui-font-family);
+}

package/dist/TabBar/TabBar.d.ts

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

package/dist/TabBar/TabBar.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _TabBarContext = _interopRequireDefault(require("./TabBarContext"));
+require("./TabBar.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+const prefixCls = 'bui-tab-bar';
+const TabBar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    current,
+    activeColor,
+    color,
+    children,
+    className,
+    onChange,
+    ...others
+  } = props || {};
+  return /*#__PURE__*/_react.default.createElement(_TabBarContext.default.Provider, {
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    value: {
+      currentIndex: current,
+      activeColor,
+      color,
+      onChange
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref,
+    className: (0, _clsx.default)(`${prefixCls}`, className)
+  }, others), _react.default.Children.toArray(children).map((item, index) => {
+    return /*#__PURE__*/_react.default.cloneElement(item, {
+      index
+    });
+  })));
+});
+TabBar.displayName = 'BuiTabBar';
+TabBar.defaultProps = {
+  activeColor: 'primary',
+  color: 'default',
+  current: 0
+};
+var _default = exports.default = TabBar;

package/dist/TabBar/TabBarContext.d.ts

@@ -0,0 +1,27 @@
+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;

package/dist/TabBar/TabBarContext.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const TabBarContext = /*#__PURE__*/(0, _react.createContext)({});
+var _default = exports.default = TabBarContext;

package/dist/TabBar/TabBarItem.css

@@ -0,0 +1,38 @@
+.bui-tab-bar-item {
+  --bui-tab-bar-color: var(--bui-tab-bar-default-color, var(--bui-color-fg-default));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  flex: 1;
+  color: var(--bui-tab-bar-color);
+  font-family: var(--bui-font-family);
+}
+.bui-tab-bar-item-primary {
+  color: var(--bui-color-primary);
+}
+.bui-tab-bar-item-success {
+  color: var(--bui-color-success);
+}
+.bui-tab-bar-item-info {
+  color: var(--bui-color-info);
+}
+.bui-tab-bar-item-warning {
+  color: var(--bui-color-warning);
+}
+.bui-tab-bar-item-danger {
+  color: var(--bui-color-danger);
+}
+.bui-tab-bar-item-vip {
+  color: var(--bui-color-vip);
+}
+.bui-tab-bar-item .bui-badge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.bui-tab-bar-item .bui-badge-position .bui-badge-contained,
+.bui-tab-bar-item .bui-badge-position .bui-badge-outlined {
+  top: 0;
+}

package/dist/TabBar/TabBarItem.d.ts

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

package/dist/TabBar/TabBarItem.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ = require("./..");
+var _clsx = _interopRequireDefault(require("clsx"));
+require("./TabBarItem.css");
+var _TabBarContext = _interopRequireDefault(require("./TabBarContext"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); } // eslint-disable-next-line import/no-extraneous-dependencies
+const prefixCls = 'bui-tab-bar-item';
+const TabBarItem = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    currentIndex,
+    activeColor,
+    color,
+    onChange
+  } = (0, _react.useContext)(_TabBarContext.default);
+  const {
+    title,
+    icon,
+    activeIcon,
+    index,
+    BadgeProps,
+    className,
+    children,
+    onClick,
+    ...others
+  } = props || {};
+  const handleClick = e => {
+    if (onClick) {
+      onClick(e);
+    }
+    if (onChange) {
+      onChange(e, {
+        value: index
+      });
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: (0, _clsx.default)(prefixCls, className, {
+      [`${prefixCls}-active`]: currentIndex === index
+    }),
+    ref: ref,
+    onClick: handleClick
+  }, others), children || Object.values(BadgeProps || {})?.length > 0 ? /*#__PURE__*/_react.default.createElement(_.Badge, BadgeProps, currentIndex === index && activeIcon ? activeIcon : icon, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)(`${prefixCls}-title`, {
+      [`${prefixCls}-${currentIndex === index ? activeColor : color}`]: currentIndex === index ? activeColor : color
+    })
+  }, title)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentIndex === index && activeIcon ? activeIcon : icon, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)(`${prefixCls}-title`, {
+      [`${prefixCls}-${currentIndex === index ? activeColor : color}`]: currentIndex === index ? activeColor : color
+    })
+  }, title)));
+});
+TabBarItem.displayName = 'BuiTabBarItem';
+var _default = exports.default = TabBarItem;

package/dist/TabBar/index.d.ts

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

package/dist/TabBar/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  TabBarItem: true,
+  TabBar: true
+};
+Object.defineProperty(exports, "TabBar", {
+  enumerable: true,
+  get: function () {
+    return _TabBar.default;
+  }
+});
+Object.defineProperty(exports, "TabBarItem", {
+  enumerable: true,
+  get: function () {
+    return _TabBarItem.default;
+  }
+});
+var _TabBarItem = _interopRequireDefault(require("./TabBarItem"));
+var _TabBar = _interopRequireDefault(require("./TabBar"));
+var _index = require("./index.types");
+Object.keys(_index).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _index[key];
+    }
+  });
+});
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/TabBar/index.types.d.ts

@@ -0,0 +1,54 @@
+import React, { ReactNode } from 'react';
+import { OverrideProps, ThemeColor } from '@bifrostui/types';
+import { BadgeProps } from '../Badge';
+export type TabBarProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 当前选中的标签索引值
+         * @default 0
+         */
+        current?: number;
+        /**
+         * 默认文案颜色
+         * @default 'default'
+         */
+        color?: ThemeColor | 'default' | 'vip';
+        /**
+         * 选中文案颜色
+         * @default 'primary'
+         */
+        activeColor?: ThemeColor | 'default' | 'vip';
+        /**
+         * 变化时回调函数
+         */
+        onChange?: (e: React.SyntheticEvent, data: {
+            value: number;
+        }) => void;
+    };
+    defaultComponent: D;
+}, D>;
+export type TabBarItemProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 标题
+         */
+        title?: ReactNode;
+        /**
+         * 图标
+         */
+        icon?: ReactNode;
+        /**
+         * 选中图标
+         */
+        activeIcon?: ReactNode;
+        /**
+         * 徽章
+         */
+        BadgeProps?: BadgeProps;
+        /**
+         * TabBar index （不对外暴露）
+         */
+        index?: number;
+    };
+    defaultComponent: D;
+}, D>;

package/dist/TabBar/index.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/Tabs/Tab.css

@@ -0,0 +1,52 @@
+.bui-tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  width: min-content;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+  font-size: var(--font-size);
+  line-height: var(--bui-line-height);
+  color: var(--color);
+  padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
+  font-family: var(--bui-font-family);
+}
+.bui-tab-center {
+  flex: 1 0 auto;
+  margin: 0 auto;
+}
+.bui-tab-active {
+  font-size: var(--font-size);
+  line-height: var(--bui-line-height);
+  font-weight: var(--bui-font-weight-medium);
+  color: var(--active-color);
+}
+.bui-tab-miniapp-active {
+  font-size: var(--font-size);
+  line-height: 1.5;
+  font-weight: var(--bui-font-weight-medium);
+  color: var(--active-color);
+  position: relative;
+}
+.bui-tab-miniapp-active-line {
+  position: absolute;
+  bottom: 0;
+  left: -12px;
+  right: -12px;
+  margin: 0 auto !important;
+  width: 18px;
+  height: 2px;
+  transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  background-color: var(--line-color);
+}
+.bui-tab-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.bui-tabline-invisible {
+  visibility: hidden;
+  background-color: transparent;
+}

package/dist/Tabs/Tab.d.ts

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

package/dist/Tabs/Tab.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _utils = require("@bifrostui/utils");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireDefault(require("react"));
+var _TabsContext = _interopRequireDefault(require("./TabsContext"));
+require("./Tab.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+const prefixCls = 'bui-tab';
+const Tab = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    className,
+    children,
+    index,
+    disabled,
+    onClick,
+    ...others
+  } = props;
+  const tabsContext = _react.default.useContext(_TabsContext.default);
+  const {
+    value,
+    align,
+    triggerChange
+  } = tabsContext;
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref,
+    className: (0, _clsx.default)(prefixCls, `${prefixCls}-${align}`, {
+      [`${prefixCls}-active`]: !_utils.isMini && index === value,
+      [`${prefixCls}-miniapp-active`]: _utils.isMini && index === value,
+      [`${prefixCls}-disabled`]: disabled
+    }, className)
+  }, others, {
+    onClick: e => {
+      if (disabled) return;
+      e.preventDefault();
+      triggerChange(e, {
+        index
+      });
+      onClick?.(e, {
+        index
+      });
+    }
+  }), children, _utils.isMini && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)(`${prefixCls}-miniapp-active-line`, {
+      'bui-tabline-invisible': index !== value
+    })
+  }));
+});
+Tab.displayName = 'BuiTab';
+Tab.defaultProps = {
+  disabled: false
+};
+var _default = exports.default = Tab;

package/dist/Tabs/Tab.types.d.ts

@@ -0,0 +1,12 @@
+import { OverrideProps } from '@bifrostui/types';
+import React from 'react';
+import { ITabItem, TabChangeEvent } from './Tabs.types';
+export type TabProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & Partial<Omit<ITabItem, 'title'>> & {
+        /**
+         * 点击Tab的回调
+         */
+        onClick?: TabChangeEvent;
+    };
+    defaultComponent: D;
+}, D>;

package/dist/Tabs/Tab.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/Tabs/TabPanel.css

@@ -0,0 +1,9 @@
+.bui-tabpanel {
+  font-family: var(--bui-font-family);
+}
+.bui-tabpanel-active {
+  display: block;
+}
+.bui-tabpanel-inactive {
+  display: none;
+}

package/dist/Tabs/TabPanel.d.ts

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