@bifrostui/react 0.0.5

package/dist/Portal/index.js

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

package/dist/Progress/Progress.css

@@ -0,0 +1,22 @@
+.bui-progress {
+  --fill-color: var(--bui-color-primary);
+  --trail-color: rgba(156, 156, 165, 0.2);
+  --stroke-width: 8px;
+  width: 100%;
+  font-family: var(--bui-font-family);
+}
+.bui-progress-inner {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  vertical-align: middle;
+  background-color: var(--trail-color);
+  border-radius: 100px;
+}
+.bui-progress-bg {
+  position: relative;
+  border-radius: 100px;
+  background-color: var(--fill-color);
+  height: var(--stroke-width);
+}

package/dist/Progress/Progress.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ProgressGradient, ProgressProps } from './Progress.types';
+import './Progress.less';
+export declare const handleGradient: (strokeColor: ProgressGradient) => {
+    backgroundImage: string;
+};
+declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Progress;

package/dist/Progress/Progress.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleGradient = exports.default = void 0;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireDefault(require("react"));
+require("./Progress.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-progress';
+function validProgress(progress) {
+  if (!progress || progress < 0) {
+    return 0;
+  }
+  if (progress > 100) {
+    return 100;
+  }
+  return progress;
+}
+const sortGradient = gradients => {
+  let tempArr = [];
+  Object.keys(gradients).forEach(key => {
+    const formattedKey = parseFloat(key.replace(/%/g, ''));
+    if (!Number.isNaN(formattedKey)) {
+      tempArr.push({
+        key: formattedKey,
+        value: gradients[key]
+      });
+    }
+  });
+  tempArr = tempArr.sort((a, b) => a.key - b.key);
+  return tempArr.map(({
+    key,
+    value
+  }) => `${value} ${key}%`).join(', ');
+};
+const handleGradient = strokeColor => {
+  const {
+    from,
+    to,
+    direction = 'to right',
+    ...rest
+  } = strokeColor;
+  if (Object.keys(rest).length !== 0) {
+    const sortedGradients = sortGradient(rest);
+    return {
+      backgroundImage: `linear-gradient(${direction}, ${sortedGradients})`
+    };
+  }
+  return {
+    backgroundImage: `linear-gradient(${direction}, ${from}, ${to})`
+  };
+};
+exports.handleGradient = handleGradient;
+const Progress = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    className,
+    percent,
+    strokeWidth,
+    strokeColor,
+    trailColor,
+    ...others
+  } = props;
+  const backgroundProps = strokeColor && typeof strokeColor !== 'string' ? handleGradient(strokeColor) : {
+    background: strokeColor
+  };
+  const percentStyle = {
+    width: `${validProgress(percent)}%`,
+    height: strokeWidth,
+    ...backgroundProps
+  };
+  const trailStyle = {
+    background: trailColor || undefined
+  };
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: (0, _clsx.default)(prefixCls, className),
+    ref: ref
+  }, others), /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-inner`,
+    style: trailStyle
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-bg`,
+    style: percentStyle
+  })));
+});
+Progress.displayName = 'BuiProgress';
+var _default = exports.default = Progress;

package/dist/Progress/Progress.types.d.ts

@@ -0,0 +1,28 @@
+import { OverrideProps } from '@bifrostui/types';
+import React from 'react';
+export type ProgressStringGradients = {
+    [percentage: string]: string;
+};
+type ProgressFromToGradients = {
+    from: string;
+    to: string;
+};
+export type ProgressGradient = {
+    direction?: string;
+} & (ProgressStringGradients | ProgressFromToGradients);
+export type ProgressProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /** 百分比 */
+        percent?: number;
+        /**
+         * - 进度条的色彩，传入 object 时为渐变
+         */
+        strokeColor?: string | ProgressGradient;
+        /** 未填充进度条的色彩 */
+        trailColor?: string;
+        /** 进度条线的宽度，单位 */
+        strokeWidth?: number | string;
+    };
+    defaultComponent: D;
+}, D>;
+export {};

package/dist/Progress/Progress.types.js

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

package/dist/Progress/index.d.ts

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

package/dist/Progress/index.js

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

package/dist/Radio/Radio.css

@@ -0,0 +1,65 @@
+.bui-radio {
+  --label-color: var(--bui-color-fg-default);
+  --label-font-size: var(--bui-text-size-1);
+  --icon-font-size: var(--bui-title-size-2);
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  font-family: var(--bui-font-family);
+}
+.bui-radio-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.bui-radio-label-left {
+  flex-direction: row-reverse;
+}
+.bui-radio-label-top {
+  flex-direction: column-reverse;
+}
+.bui-radio-label-bottom {
+  flex-direction: column;
+}
+.bui-radio-input {
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.bui-radio-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 5px;
+  box-sizing: border-box;
+}
+.bui-radio-label {
+  font-size: var(--label-font-size);
+  color: var(--label-color);
+}
+.bui-radio-btn-icon {
+  position: relative;
+  display: flex;
+}
+.bui-radio-btn-icon .bui-svg-icon {
+  font-size: var(--icon-font-size);
+}
+.bui-radio-btn-icon-outline {
+  transform: scale(1);
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+.bui-radio-btn-icon-contained {
+  position: absolute;
+  left: 0;
+  transform: scale(0);
+  transition: transform 150ms cubic-bezier(0.4, 0, 1, 1) 0ms;
+}
+.bui-radio-btn-icon-checked .bui-radio-btn-icon-contained {
+  transform: scale(1);
+  transition: transform 150ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+}

package/dist/Radio/Radio.d.ts

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

package/dist/Radio/Radio.js

@@ -0,0 +1,120 @@
+"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"));
+var _RadioButtonIcon = _interopRequireDefault(require("./RadioButtonIcon"));
+var _RadioContext = _interopRequireDefault(require("./RadioContext"));
+require("./Radio.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-radio';
+const Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    className,
+    defaultChecked,
+    checked,
+    inputProps,
+    inputRef,
+    name,
+    value,
+    disabled,
+    icon,
+    checkedIcon,
+    labelPlacement,
+    onChange,
+    children,
+    ...others
+  } = props;
+  const groupContext = (0, _react.useContext)(_RadioContext.default);
+  let validDefaultChecked = defaultChecked;
+  let validChecked = checked;
+  // 使用RadioGroup
+  if (groupContext) {
+    const groupControlled = groupContext?.value !== undefined;
+    if (groupControlled) {
+      validChecked = groupContext?.value === value;
+    } else {
+      validDefaultChecked = groupContext?.defaultValue === value;
+    }
+  }
+  const [radioChecked, triggerChange] = (0, _utils.useValue)({
+    defaultValue: validDefaultChecked,
+    value: validChecked
+  });
+  if (groupContext && !value) {
+    console.error('RadioGroup模式下Radio须传入value属性');
+  }
+  const radioCheckIcon = checkedIcon || /*#__PURE__*/_react.default.createElement(_RadioButtonIcon.default, {
+    checked: true
+  });
+  const radioUncheckIcon = icon || /*#__PURE__*/_react.default.createElement(_RadioButtonIcon.default, null);
+  const radioDisabled = disabled !== undefined ? disabled : groupContext?.disabled;
+  const changeAction = (e, isChecked) => {
+    // Radio
+    if (!groupContext) {
+      triggerChange(e, isChecked);
+      onChange?.(e, {
+        checked: isChecked
+      });
+      return;
+    }
+
+    // RadioGroup
+    if (isChecked) {
+      groupContext?.select?.(e, value);
+    }
+  };
+
+  /**
+   * 支付宝小程序label标签与radio配合使用时，无法响应onChange、onClick事件
+   * 支付宝小程序改为div标签，并通过div标签上的onClick事件触发onChange
+   * 微信小程序/H5使用input onChange
+   */
+  const handleChange = e => {
+    if (radioChecked) return;
+    changeAction(e, true);
+    inputProps?.onChange?.(e);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref,
+    className: (0, _clsx.default)(prefixCls, className, `${prefixCls}-label-${labelPlacement}`, {
+      [`${prefixCls}-disabled`]: radioDisabled
+    })
+  }, others, {
+    onClick: e => {
+      // radio disabled 会触发onClick事件
+      others?.onClick?.(e);
+      if (radioDisabled) return;
+      if (_utils.isAlipay) {
+        handleChange(e);
+      }
+    }
+  }), /*#__PURE__*/_react.default.createElement("input", _extends({
+    ref: inputRef,
+    type: "radio",
+    value: value,
+    name: name,
+    checked: radioChecked,
+    disabled: radioDisabled
+  }, inputProps, {
+    onChange: handleChange,
+    className: (0, _clsx.default)(`${prefixCls}-input`, inputProps?.className)
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-icon`
+  }, radioChecked ? radioCheckIcon : radioUncheckIcon), children && /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-label`
+  }, children));
+});
+Radio.displayName = 'BuiRadio';
+Radio.defaultProps = {
+  defaultChecked: false,
+  labelPlacement: 'right'
+};
+var _default = exports.default = Radio;

package/dist/Radio/Radio.types.d.ts

@@ -0,0 +1,83 @@
+import { OverrideProps } from '@bifrostui/types';
+import React, { ReactNode } from 'react';
+export type RadioLabelPlacement = 'left' | 'top' | 'right' | 'bottom';
+export interface RadioGroupContextProps {
+    defaultValue?: string;
+    value?: string;
+    select: (e: React.ChangeEvent<HTMLInputElement>, val: string) => void;
+    disabled?: boolean;
+}
+export type RadioGroupProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 默认选中的选项，当组件非受控时使用
+         */
+        defaultValue?: string;
+        /**
+         * 指定选中的选项，当组件受控时使用
+         */
+        value?: string;
+        /**
+         * 整组是否禁用，默认false
+         */
+        disabled?: boolean;
+        /**
+         * 变化时的回调函数
+         */
+        onChange?: (e: React.SyntheticEvent, data: {
+            value: string;
+        }) => void;
+    };
+    defaultComponent: D;
+}, D>;
+export type RadioProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 默认是否选中，当组件非受控时使用
+         */
+        defaultChecked?: boolean;
+        /**
+         * 是否选中，当组件受控时使用
+         */
+        checked?: boolean;
+        /**
+         * 内部<input>标签的标准属性
+         */
+        inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+        /**
+         * 内部<input>标签的ref
+         */
+        inputRef?: React.Ref<HTMLInputElement>;
+        /**
+         * <input>名称标识
+         */
+        name?: string;
+        /**
+         * 组件的值，若使用RadioGroup应传入该属性
+         */
+        value?: string;
+        /**
+         * 是否禁用
+         */
+        disabled?: boolean;
+        /**
+         * 未选中状态图标
+         */
+        icon?: ReactNode;
+        /**
+         * 选中状态图标
+         */
+        checkedIcon?: ReactNode;
+        /**
+         * 文案位置，默认为right
+         */
+        labelPlacement?: RadioLabelPlacement;
+        /**
+         * 变化时的回调函数
+         */
+        onChange?: (e: React.SyntheticEvent, data: {
+            checked: boolean;
+        }) => void;
+    };
+    defaultComponent: D;
+}, D>;

package/dist/Radio/Radio.types.js

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

package/dist/Radio/RadioButtonIcon.d.ts

@@ -0,0 +1,12 @@
+import { ISvgIconProps } from '@bifrostui/icons';
+import React from 'react';
+export interface IRadioButtonIconProps extends ISvgIconProps {
+    checked?: boolean;
+}
+declare function RadioButtonIcon(props: IRadioButtonIconProps): React.JSX.Element;
+declare namespace RadioButtonIcon {
+    var defaultProps: {
+        checked: boolean;
+    };
+}
+export default RadioButtonIcon;

package/dist/Radio/RadioButtonIcon.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _icons = require("@bifrostui/icons");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const prefixCls = 'bui-radio-btn-icon';
+function RadioButtonIcon(props) {
+  const {
+    checked,
+    size = 'medium',
+    color,
+    htmlColor = '#959aa5'
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _clsx.default)(prefixCls, {
+      [`${prefixCls}-checked`]: checked
+    })
+  }, /*#__PURE__*/_react.default.createElement(_icons.CircleOutlinedIcon, {
+    size: size,
+    color: checked ? 'primary' : color,
+    htmlColor: htmlColor,
+    className: `${prefixCls}-outline`
+  }), /*#__PURE__*/_react.default.createElement(_icons.RadioCheckedFilledIcon, {
+    size: size,
+    color: checked ? 'primary' : color,
+    htmlColor: htmlColor,
+    className: `${prefixCls}-contained`
+  }));
+}
+RadioButtonIcon.defaultProps = {
+  checked: false
+};
+var _default = exports.default = RadioButtonIcon;

package/dist/Radio/RadioContext.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { RadioGroupContextProps } from './Radio.types';
+declare const RadioGroupContext: React.Context<RadioGroupContextProps>;
+export declare const RadioContextProvider: React.Provider<RadioGroupContextProps>;
+export default RadioGroupContext;

package/dist/Radio/RadioContext.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RadioContextProvider = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const RadioGroupContext = /*#__PURE__*/_react.default.createContext(undefined);
+const RadioContextProvider = exports.RadioContextProvider = RadioGroupContext.Provider;
+var _default = exports.default = RadioGroupContext;

package/dist/Radio/RadioGroup.d.ts

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

package/dist/Radio/RadioGroup.js

@@ -0,0 +1,51 @@
+"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("./Radio.css");
+var _RadioContext = require("./RadioContext");
+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-radio-group';
+const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    className,
+    defaultValue,
+    value,
+    onChange,
+    disabled,
+    children,
+    ...others
+  } = props;
+  const [groupValue, triggerChange] = (0, _utils.useValue)({
+    defaultValue,
+    value,
+    onChange
+  });
+  const select = (e, v) => {
+    triggerChange(e, v);
+  };
+  return /*#__PURE__*/_react.default.createElement(_RadioContext.RadioContextProvider, {
+    value: {
+      defaultValue,
+      value: groupValue,
+      select,
+      disabled
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref,
+    className: (0, _clsx.default)(prefixCls, className)
+  }, others), children));
+});
+RadioGroup.displayName = 'BuiRadioGroup';
+RadioGroup.defaultProps = {
+  disabled: false
+};
+var _default = exports.default = RadioGroup;

package/dist/Radio/index.d.ts

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