@bifrostui/react 0.0.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Alibaba
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,13 @@
+# @bifrostui/react
+
+React components for building mobile application
+
+## Usage
+
+```sh
+// with npm
+npm install @bifrostui/react
+
+// with yarn
+yarn add @bifrostui/react
+```

package/dist/ActionSheet/ActionSheet.css

@@ -0,0 +1,27 @@
+.bui-action-sheet {
+  font-family: var(--bui-font-family);
+}
+.bui-action-sheet-content {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  border-top-left-radius: var(--bui-shape-radius-drawer);
+  border-top-right-radius: var(--bui-shape-radius-drawer);
+  overflow: hidden;
+}
+.bui-action-sheet .bui-action-sheet-cancel {
+  border-top: none;
+}
+.bui-action-sheet-gap {
+  height: var(--bui-spacing-md);
+  background-color: var(--bui-color-bg-default);
+}
+.bui-action-sheet-extra {
+  font-size: var(--bui-text-size-1);
+  line-height: 23px;
+  padding: var(--bui-spacing-xl);
+  color: var(--bui-color-fg-muted);
+  background: var(--bui-color-bg-view);
+  text-align: center;
+  border-bottom: 1px solid var(--bui-color-border-default);
+  margin: 0 var(--bui-spacing-xl);
+}

package/dist/ActionSheet/ActionSheet.d.ts

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

package/dist/ActionSheet/ActionSheet.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireDefault(require("react"));
+var _Drawer = _interopRequireDefault(require("../Drawer"));
+var _ActionSheetContext = _interopRequireDefault(require("./ActionSheetContext"));
+require("./ActionSheet.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-action-sheet';
+const ActionSheetCancel = ({
+  children,
+  onClick
+}) => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-item ${prefixCls}-cancel`,
+    onClick: onClick
+  }, children);
+};
+const ActionSheet = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    open,
+    onClose,
+    cancelText,
+    className,
+    extra,
+    children,
+    onSelect,
+    ...others
+  } = props;
+  const context = _react.default.useMemo(() => {
+    return {
+      onSelect
+    };
+  }, []);
+  const onCancelClick = event => {
+    onClose(event, {
+      from: 'cancelText'
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_ActionSheetContext.default.Provider, {
+    value: context
+  }, /*#__PURE__*/_react.default.createElement(_Drawer.default, _extends({
+    ref: ref,
+    open: open,
+    onClose: onClose,
+    className: (0, _clsx.default)(prefixCls, className),
+    contentProps: {
+      className: `${prefixCls}-content`
+    }
+  }, others), extra && /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-extra`
+  }, extra), /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-item-wrapper`
+  }, children), cancelText && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-gap`
+  }), /*#__PURE__*/_react.default.createElement(ActionSheetCancel, {
+    onClick: onCancelClick
+  }, cancelText))));
+});
+ActionSheet.displayName = 'BuiActionSheet';
+var _default = exports.default = ActionSheet;

package/dist/ActionSheet/ActionSheet.types.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { DrawerProps } from '../Drawer/Drawer.types';
+import { ModalProps } from '../Modal/Modal.types';
+export interface ActionSheetProps extends DrawerProps {
+    /**
+     *  取消按钮内容，如果设置为空则不显示取消按钮
+     */
+    cancelText?: React.ReactNode;
+    /**
+     *  顶部额外的内容展示
+     */
+    extra?: React.ReactNode;
+    /**
+     * 子项的点击选择回调
+     * @param event
+     * @param data
+     */
+    onSelect?: (event: React.MouseEvent<HTMLDivElement>, data?: {
+        index: string | number;
+    }) => void;
+    /**
+     * 关闭回调
+     */
+    onClose?: ModalProps['onClose'];
+}
+export interface ActionSheetContextValue {
+    onSelect?: ActionSheetProps['onSelect'];
+}

package/dist/ActionSheet/ActionSheet.types.js

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

package/dist/ActionSheet/ActionSheetContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ActionSheetContextValue } from './ActionSheet.types';
+declare const ActionSheetContext: React.Context<ActionSheetContextValue>;
+export default ActionSheetContext;

package/dist/ActionSheet/ActionSheetContext.js

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

package/dist/ActionSheet/ActionSheetItem.css

@@ -0,0 +1,51 @@
+.bui-action-sheet-item {
+  --font-size: var(--bui-title-size-2);
+  --color: var(--bui-color-fg-default);
+  font-family: var(--bui-font-family);
+  position: relative;
+  padding: var(--bui-spacing-xl);
+  cursor: pointer;
+  background: var(--bui-color-bg-view);
+  font-size: var(--font-size);
+  text-align: center;
+  line-height: 24px;
+  color: var(--color);
+  border-top: 1px solid var(--bui-color-border-default);
+  margin: 0 var(--bui-spacing-xl);
+}
+.bui-action-sheet-item:first-child {
+  border-top: none;
+}
+.bui-action-sheet-item:active {
+  background-color: var(--bui-color-bg-default);
+}
+.bui-action-sheet-item-primary {
+  --color: var(--bui-color-primary);
+}
+.bui-action-sheet-item-info {
+  --color: var(--bui-color-info);
+}
+.bui-action-sheet-item-success {
+  --color: var(--bui-color-success);
+}
+.bui-action-sheet-item-warning {
+  --color: var(--bui-color-warning);
+}
+.bui-action-sheet-item-danger {
+  --color: var(--bui-color-danger);
+}
+.bui-action-sheet-item-disabled {
+  pointer-events: none;
+}
+.bui-action-sheet-item-disabled .bui-action-sheet-item-content,
+.bui-action-sheet-item-disabled .bui-action-sheet-item-description {
+  opacity: 0.5;
+}
+.bui-action-sheet-item-bold {
+  font-weight: bold;
+}
+.bui-action-sheet-item-description {
+  font-size: var(--bui-text-size-2);
+  line-height: 19px;
+  color: var(--bui-color-fg-subtle);
+}

package/dist/ActionSheet/ActionSheetItem.d.ts

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

package/dist/ActionSheet/ActionSheetItem.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireWildcard(require("react"));
+var _ActionSheetContext = _interopRequireDefault(require("./ActionSheetContext"));
+require("./ActionSheetItem.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-action-sheet-item';
+const ActionSheetItem = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    className,
+    children,
+    disabled,
+    bold,
+    color,
+    description,
+    onClick,
+    index,
+    ...others
+  } = props;
+  const context = (0, _react.useContext)(_ActionSheetContext.default);
+  const handleAction = ev => {
+    if (disabled) return;
+    onClick?.(ev, {
+      index
+    });
+    context.onSelect?.(ev, {
+      index
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref,
+    className: (0, _clsx.default)(prefixCls, {
+      [`${prefixCls}-${color}`]: color,
+      [`${prefixCls}-disabled`]: disabled,
+      [`${prefixCls}-bold`]: bold
+    }, className),
+    onClick: handleAction
+  }, others), /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-content`
+  }, children), description && /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-description`
+  }, description));
+});
+ActionSheetItem.displayName = 'BuiActionSheetItem';
+ActionSheetItem.defaultProps = {
+  color: 'default',
+  disabled: false,
+  bold: false
+};
+var _default = exports.default = ActionSheetItem;

package/dist/ActionSheet/ActionSheetItem.types.d.ts

@@ -0,0 +1,38 @@
+import { OverrideProps, ThemeColor } from '@bifrostui/types';
+import React from 'react';
+export type ActionSheetItemProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 是否禁用
+         * @default false
+         */
+        disabled?: boolean;
+        /**
+         * 颜色
+         * @default 'default'
+         */
+        color?: ThemeColor | 'default';
+        /**
+         * 是否加粗
+         * @default false
+         */
+        bold?: boolean;
+        /**
+         * 描述内容
+         */
+        description?: React.ReactNode;
+        /**
+         * 索引标记
+         */
+        index?: string | number;
+        /**
+         * 点击事件回调方法
+         * @param event
+         * @param data
+         */
+        onClick?: (event: React.MouseEvent<HTMLDivElement>, data?: {
+            index: string | number;
+        }) => void;
+    };
+    defaultComponent: D;
+}, D>;

package/dist/ActionSheet/ActionSheetItem.types.js

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

package/dist/ActionSheet/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ActionSheet, default } from './ActionSheet';
+export * from './ActionSheet.types';
+export { default as ActionSheetItem } from './ActionSheetItem';
+export * from './ActionSheetItem.types';

package/dist/ActionSheet/index.js

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

package/dist/Alert/Alert.d.ts

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

package/dist/Alert/Alert.js

@@ -0,0 +1,115 @@
+"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"));
+var _utils = require("@bifrostui/utils");
+var _IconButton = require("../IconButton");
+require("./index.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-alert';
+
+// 处理左边icon的展示逻辑
+const iconMap = {
+  danger: /*#__PURE__*/_react.default.createElement(_icons.ErrorCircleFilledIcon, {
+    color: "danger",
+    className: `${prefixCls}-default-icon`
+  }),
+  success: /*#__PURE__*/_react.default.createElement(_icons.SuccessCircleFilledIcon, {
+    color: "success",
+    className: `${prefixCls}-default-icon`
+  }),
+  warning: /*#__PURE__*/_react.default.createElement(_icons.AlertCircleFilledIcon, {
+    color: "warning",
+    className: `${prefixCls}-default-icon`
+  }),
+  info: /*#__PURE__*/_react.default.createElement(_icons.AlertCircleFilledIcon, {
+    color: "info",
+    className: `${prefixCls}-default-icon`
+  }),
+  primary: /*#__PURE__*/_react.default.createElement(_icons.VolumeUpOutlinedIcon, {
+    color: "primary",
+    className: `${prefixCls}-default-icon`
+  })
+};
+
+// 警示框 icon
+const AlertIcon = props => {
+  const {
+    icon,
+    color
+  } = props;
+  if (!icon) return null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)(`${prefixCls}-icon`)
+  }, _utils.isMini && /*#__PURE__*/_react.default.isValidElement(icon) ? /*#__PURE__*/_react.default.cloneElement(icon, {
+    ...{
+      color: icon.props?.color || color
+    }
+  }) : icon);
+};
+
+// 警告框操作区
+const AlertAction = props => {
+  const {
+    color,
+    action,
+    onClose
+  } = props;
+  if (!action && !onClose) return null;
+  if (action) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: `${prefixCls}-action`,
+      onClick: onClose
+    }, action);
+  }
+  return /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    className: `${prefixCls}-action`,
+    color: color,
+    onClick: onClose
+  }, /*#__PURE__*/_react.default.createElement(_icons.CloseIcon, null));
+};
+const Alert = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    color,
+    className,
+    icon,
+    variant,
+    marquee,
+    children,
+    action,
+    onClose,
+    onClick,
+    ...others
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: (0, _clsx.default)(prefixCls, className, [`${prefixCls}-${variant}-${color}`]),
+    onClick: onClick,
+    ref: ref
+  }, others), /*#__PURE__*/_react.default.createElement(AlertIcon, {
+    icon: icon === true ? iconMap[color] : icon,
+    color: color
+  }), marquee ? /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-marquee`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)(`${prefixCls}-content`, [`${prefixCls}-marquee-content`])
+  }, children)) : /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-content`
+  }, children), /*#__PURE__*/_react.default.createElement(AlertAction, {
+    action: action,
+    onClose: onClose,
+    color: color
+  }));
+});
+Alert.displayName = 'BuiAlert';
+Alert.defaultProps = {
+  icon: true,
+  color: 'primary',
+  variant: 'standard'
+};
+var _default = exports.default = Alert;

package/dist/Alert/Alert.types.d.ts

@@ -0,0 +1,61 @@
+import { OverrideProps, ThemeColor } from '@bifrostui/types';
+import React, { SyntheticEvent } from 'react';
+export type AlertProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 指定警告提示的样式
+         */
+        color?: ThemeColor;
+        /**
+         * 自定义图标，icon为false时隐藏图标
+         */
+        icon?: React.ReactNode | boolean;
+        /**
+         *  警告提示操作区
+         */
+        action?: React.ReactNode;
+        /**
+         * 警告模式
+         */
+        variant?: 'standard' | 'outlined';
+        /**
+         * 内容是否滚动（内容只能单行）
+         */
+        marquee?: boolean;
+        /**
+         *  关闭回调
+         */
+        onClose?: (e?: SyntheticEvent) => void;
+    };
+    defaultComponent: D;
+}, D>;
+export type AlertIconProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 指定警告提示的样式
+         */
+        color?: ThemeColor;
+        /**
+         * 自定义图标，icon为false时隐藏图标
+         */
+        icon?: React.ReactNode | boolean;
+    };
+    defaultComponent: D;
+}, D>;
+export type AlertActionProps<D extends React.ElementType = React.ElementType, P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 指定警告提示的样式
+         */
+        color?: ThemeColor;
+        /**
+         *  警告提示操作区
+         */
+        action?: React.ReactNode;
+        /**
+         *  关闭回调,
+         */
+        onClose?: (e?: SyntheticEvent) => void;
+    };
+    defaultComponent: D;
+}, D>;

package/dist/Alert/Alert.types.js

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