@bifrostui/react 1.2.9-beta.0 → 1.3.0

package/dist/Calendar/Calendar.js

@@ -67,6 +67,7 @@ var import_isoWeek = __toESM(require("dayjs/plugin/isoWeek"));
 var import_react = __toESM(require("react"));
 var import_Calendar = require("./Calendar.css");
 var import_utils2 = require("./utils");
+const Picker = (0, import_react.lazy)(() => import("../Picker"));
 import_dayjs.default.extend(import_isoWeek.default);
 const SUNDAY_WEEK_DATA = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
 const classes = {
@@ -87,10 +88,12 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       mode,
       hideDaysOutsideCurrentMonth,
       disabledDate,
+      enableSelectYear,
       highlightDate,
       dateRender,
       weekRender,
       onMonthChange,
+      onYearChange,
       onChange
     } = _a, others = __objRest(_a, [
       "className",
@@ -101,10 +104,12 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       "mode",
       "hideDaysOutsideCurrentMonth",
       "disabledDate",
+      "enableSelectYear",
       "highlightDate",
       "dateRender",
       "weekRender",
       "onMonthChange",
+      "onYearChange",
       "onChange"
     ]);
     const isRangeMode = mode === "range";
@@ -115,6 +120,7 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       minDate,
       maxDate
     );
+    const [openPicker, setOpenPicker] = (0, import_react.useState)(false);
     const [renderMonth, setRenderMonth] = (0, import_react.useState)(() => {
       const initMonth = formattedValue === void 0 ? formattedDefaultValue == null ? void 0 : formattedDefaultValue[0] : formattedValue == null ? void 0 : formattedValue[0];
       return (0, import_dayjs.default)(initMonth || minDate).toDate();
@@ -177,6 +183,19 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       });
       return list;
     };
+    const getYearsList = () => {
+      const result = [];
+      let startTime = new Date(minDate).getFullYear();
+      const endTime = new Date(maxDate).getFullYear();
+      while (endTime - startTime >= 0) {
+        result.push({
+          label: startTime,
+          value: startTime
+        });
+        startTime += 1;
+      }
+      return result;
+    };
     const getDayClassName = ({ day: itemDate, disabled }) => {
       let result = "";
       if (disabled)
@@ -269,6 +288,23 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
         });
       }
     };
+    const onClickDate = (e) => {
+      if (!enableSelectYear) {
+        return;
+      }
+      e.stopPropagation();
+      setOpenPicker(true);
+      getYearsList();
+    };
+    const onClosePicker = (e, data2) => {
+      const selectYear = data2.value[0];
+      e.stopPropagation();
+      setRenderMonth((0, import_dayjs.default)(renderMonth).set("year", selectYear).toDate());
+      onYearChange == null ? void 0 : onYearChange(e, {
+        year: selectYear
+      });
+      setOpenPicker(false);
+    };
     let data = {};
     if (isRangeMode) {
       data = {
@@ -296,7 +332,7 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
           className: `${classes.handler}-btn-icon`,
           htmlColor: isMinMonth && "#cccccc"
         }
-      )), /* @__PURE__ */ import_react.default.createElement("div", { className: `${classes.handler}-text` }, (0, import_dayjs.default)(renderMonth).format("YYYY/MM")), /* @__PURE__ */ import_react.default.createElement("div", { onClick: onClickNext, className: `${classes.handler}-btn` }, /* @__PURE__ */ import_react.default.createElement(
+      )), /* @__PURE__ */ import_react.default.createElement("div", { className: `${classes.handler}-text`, onClick: onClickDate }, (0, import_dayjs.default)(renderMonth).format("YYYY/MM")), /* @__PURE__ */ import_react.default.createElement("div", { onClick: onClickNext, className: `${classes.handler}-btn` }, /* @__PURE__ */ import_react.default.createElement(
         import_icons.CaretRightIcon,
         {
           className: `${classes.handler}-btn-icon`,
@@ -306,13 +342,23 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       /* @__PURE__ */ import_react.default.createElement("div", { className: classes.week }, SUNDAY_WEEK_DATA == null ? void 0 : SUNDAY_WEEK_DATA.map((w) => {
         return weekRender ? weekRender(w) : /* @__PURE__ */ import_react.default.createElement("div", { key: w, className: `${classes.week}-item` }, w);
       })),
-      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(`${classes.root}-month`) }, renderDayList())
+      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(`${classes.root}-month`) }, renderDayList()),
+      enableSelectYear && /* @__PURE__ */ import_react.default.createElement(import_react.Suspense, { fallback: null }, /* @__PURE__ */ import_react.default.createElement(
+        Picker,
+        {
+          options: [getYearsList()],
+          open: openPicker,
+          value: [(0, import_dayjs.default)(renderMonth).year()],
+          onClose: onClosePicker
+        }
+      ))
     );
   }
 );
 Calendar.displayName = "BuiCalendar";
 Calendar.defaultProps = {
   hideDaysOutsideCurrentMonth: false,
+  enableSelectYear: false,
   mode: "single",
   minDate: (0, import_dayjs.default)((0, import_dayjs.default)().format("YYYYMMDD")).add(0, "month").toDate(),
   maxDate: (0, import_dayjs.default)((0, import_dayjs.default)().format("YYYYMMDD")).add(11, "month").toDate(),

package/dist/Calendar/Calendar.types.d.ts

@@ -12,6 +12,10 @@ export interface ICalendarMonthChangeData {
     /** 操作类型，prev: 点击上个月 next: 点击下个月 */
     type: 'prev' | 'next';
 }
+export interface ICalendarYearChangeData {
+    /** 切换后的年份 */
+    year: number;
+}
 export type ICalendarMode = 'single' | 'range';
 export type ICalendarValue = Date | Date[] | null;
 export type CalendarProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
@@ -61,6 +65,14 @@ export type CalendarProps<D extends React.ElementType = 'div', P = {}> = Overrid
          * 自定义周单元格的内容
          */
         weekRender?: (week: string) => React.ReactNode;
+        /**
+         * 是否开启选择年
+         */
+        enableSelectYear?: boolean;
+        /**
+         * 年份发生变化的回调
+         */
+        onYearChange?: (e: React.SyntheticEvent, data: ICalendarYearChangeData) => void;
         /**
          * 月份发生变化的回调
          */

package/dist/Countdown/Countdown.js

@@ -112,6 +112,9 @@ const Countdown = (0, import_react.forwardRef)((props, ref) => {
     if (serverTimestamp && endTimestamp) {
       setStartTime(serverTimestamp);
       setEndTime(endTimestamp);
+    } else if (endTimestamp) {
+      setStartTime(Date.now());
+      setEndTime(endTimestamp);
     }
   }, [serverTimestamp, endTimestamp]);
   const defaultRender = (timeIns) => {

package/dist/Dialog/Dialog.d.ts

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

package/dist/Dialog/Dialog.js

@@ -0,0 +1,140 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Dialog_exports = {};
+__export(Dialog_exports, {
+  default: () => Dialog_default
+});
+module.exports = __toCommonJS(Dialog_exports);
+var import_react = __toESM(require("react"));
+var import_clsx = __toESM(require("clsx"));
+var import_Input = require("../Input");
+var import_Button = require("../Button");
+var import_Modal = __toESM(require("../Modal"));
+var import_index = require("./index.css");
+const prefixCls = "bui-dialog";
+const Dialog = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
+  const _a = props, {
+    open,
+    onOk,
+    onClose,
+    header,
+    message,
+    type,
+    confirmText,
+    cancelText,
+    placeholder,
+    InputProps,
+    className
+  } = _a, others = __objRest(_a, [
+    "open",
+    "onOk",
+    "onClose",
+    "header",
+    "message",
+    "type",
+    "confirmText",
+    "cancelText",
+    "placeholder",
+    "InputProps",
+    "className"
+  ]);
+  const InputRef = (0, import_react.useRef)(null);
+  const footerNode = /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-body-footer` }, /* @__PURE__ */ import_react.default.createElement(
+    import_Button.Button,
+    {
+      variant: "text",
+      onClick: onClose,
+      className: `${prefixCls}-body-button`
+    },
+    cancelText || "\u53D6\u6D88"
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_Button.Button,
+    {
+      variant: "text",
+      color: "primary",
+      onClick: () => {
+        var _a2;
+        onOk((_a2 = InputRef == null ? void 0 : InputRef.current) == null ? void 0 : _a2.value);
+      },
+      className: `${prefixCls}-body-button`
+    },
+    confirmText || "\u786E\u5B9A"
+  ));
+  const inputNode = type === "prompt" && /* @__PURE__ */ import_react.default.createElement(
+    import_Input.Input,
+    __spreadProps(__spreadValues({}, InputProps), {
+      inputRef: InputRef,
+      className: `${prefixCls}-body-input`,
+      placeholder: `${placeholder || "\u8BF7\u5728\u6B64\u5904\u8F93\u5165"}`
+    })
+  );
+  if (!open)
+    return null;
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_Modal.default,
+    __spreadProps(__spreadValues({}, others), {
+      open: true,
+      className: (0, import_clsx.default)(prefixCls, className),
+      disablePortal: true,
+      onClose,
+      ref
+    }),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-body` }, header && /* @__PURE__ */ import_react.default.createElement("h1", { className: `${prefixCls}-body-title` }, header), message && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-body-desc` }, message), inputNode, footerNode)
+  );
+});
+Dialog.displayName = "BuiDialog";
+var Dialog_default = Dialog;

package/dist/Dialog/Dialog.types.d.ts

@@ -0,0 +1,98 @@
+import React, { ReactNode } from 'react';
+import { ModalProps } from '../Modal/Modal.types';
+import { InputProps } from '../Input/Input.types';
+/**
+ * 对话框类型
+ */
+export type DialogType = 'confirm' | 'prompt';
+export type Dispatch = (action: boolean, val?: string) => void;
+export interface DialogProps extends ModalProps {
+    /**
+     * 对话框类型
+     * @default confirm
+     */
+    type?: DialogType;
+    /**
+     * 自定义标题
+     */
+    header?: ReactNode;
+    /**
+     * 自定义内容
+     */
+    message?: ReactNode;
+    /**
+     * 输入框占位文本
+     */
+    placeholder?: string;
+    /**
+     * 透传给内部Input组件的属性
+     */
+    InputProps?: Partial<InputProps>;
+    /**
+     * 确认文本内容
+     */
+    confirmText?: ReactNode;
+    /**
+     * 取消文本内容
+     */
+    cancelText?: ReactNode;
+    /**
+     * 确认回调
+     */
+    onOk?: (val?: string) => void;
+    /**
+     * 取消回调
+     */
+    onClose?: () => void;
+}
+/**
+ * 函数式调用配置参数
+ */
+export type DialogOptions = Omit<DialogProps, 'placeholder' | 'inputProps' | 'onOk' | 'onClose'> & {
+    /**
+     * 确认回调
+     */
+    onConfirm?: (val?: string) => void | Promise<void>;
+    /**
+     * 取消回调
+     */
+    onCancel?: () => void | Promise<void>;
+};
+/**
+ * prompt函数式调用配置参数
+ */
+export type PromptOptions = (DialogOptions & {
+    /**
+     * 输入框占位文本
+     */
+    placeholder?: string;
+    /**
+     * 内部<input>标签的标准属性
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+}) | string;
+/**
+ * confirm函数式调用配置参数
+ */
+export type ConfirmOptions = DialogOptions | string;
+/**
+ * Dialog函数式调用返回值类型
+ */
+export type DialogPromise = Promise<boolean | string>;
+/**
+ * Dialog Instance
+ */
+export interface DialogInstance {
+    /**
+     * 直接调用显示确认框 Dialog
+     */
+    (options: ConfirmOptions): DialogPromise;
+    /**
+     * 显示确认框 Dialog.confirm
+     */
+    confirm?: (options: ConfirmOptions) => DialogPromise;
+    /**
+     * 显示提示对话框 Dialog.prompt
+     */
+    prompt?: (options: PromptOptions, val?: string) => DialogPromise;
+}

package/dist/Dialog/Dialog.types.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Dialog_types_exports = {};
+module.exports = __toCommonJS(Dialog_types_exports);

package/dist/Dialog/FunctionalDialog.d.ts

@@ -0,0 +1,3 @@
+import { DialogInstance } from './Dialog.types';
+declare const Dialog: DialogInstance;
+export default Dialog;

package/dist/Dialog/FunctionalDialog.js

@@ -0,0 +1,168 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+var FunctionalDialog_exports = {};
+__export(FunctionalDialog_exports, {
+  default: () => FunctionalDialog_default
+});
+module.exports = __toCommonJS(FunctionalDialog_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@bifrostui/utils");
+var import_Dialog = __toESM(require("./Dialog"));
+const { isValidElement, Component } = import_react.default;
+const formatProps = (props) => {
+  if (typeof props === "string" || isValidElement(props)) {
+    return { message: props };
+  }
+  return props;
+};
+const DialogGenerator = (options) => {
+  const rootWrapper = document.createElement("div");
+  const rootElement = (0, import_utils.getRootElement)();
+  rootElement.appendChild(rootWrapper);
+  const DialogComponent = () => {
+    const _a = options, { onConfirm, onCancel } = _a, others = __objRest(_a, ["onConfirm", "onCancel"]);
+    const [visible, setVisible] = (0, import_react.useState)(false);
+    const close = (0, import_react.useCallback)(() => {
+      setVisible(false);
+      setTimeout(() => {
+        const unmountRes = (0, import_utils.unmount)(rootWrapper);
+        if (unmountRes && rootWrapper.parentNode) {
+          rootWrapper.parentNode.removeChild(rootWrapper);
+        }
+      }, 150);
+    }, [rootWrapper]);
+    (0, import_react.useEffect)(() => {
+      setVisible(true);
+    }, []);
+    const dispatch = (action, val) => __async(void 0, null, function* () {
+      if (action === true) {
+        try {
+          yield onConfirm == null ? void 0 : onConfirm(val);
+        } catch (error) {
+        }
+      } else if (action === false) {
+        try {
+          yield onCancel == null ? void 0 : onCancel();
+        } catch (error) {
+        }
+      }
+      close();
+    });
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_Dialog.default,
+      __spreadProps(__spreadValues({}, others), {
+        open: visible,
+        onOk: (val) => dispatch(true, val),
+        onClose: () => dispatch(false)
+      })
+    );
+  };
+  return (0, import_utils.render)(/* @__PURE__ */ import_react.default.createElement(DialogComponent, null), rootWrapper);
+};
+const Dialog = (props) => {
+  const options = formatProps(props);
+  const _a = options, { onConfirm, onCancel } = _a, rest = __objRest(_a, ["onConfirm", "onCancel"]);
+  return new Promise((resolve) => {
+    DialogGenerator(__spreadProps(__spreadValues({}, rest), {
+      onConfirm: (val) => __async(void 0, null, function* () {
+        yield onConfirm == null ? void 0 : onConfirm(val);
+        if (rest.type === "prompt")
+          resolve(val);
+        else
+          resolve(true);
+      }),
+      onCancel: () => __async(void 0, null, function* () {
+        yield onCancel == null ? void 0 : onCancel();
+        resolve(false);
+      })
+    }));
+  });
+};
+Dialog.prototype = Component.prototype;
+const confirm = (options) => {
+  return Dialog(__spreadValues({
+    type: "confirm"
+  }, formatProps(options)));
+};
+const prompt = (options) => {
+  return Dialog(__spreadValues({
+    type: "prompt"
+  }, formatProps(options)));
+};
+Dialog.confirm = confirm;
+Dialog.prompt = prompt;
+var FunctionalDialog_default = Dialog;

package/dist/Dialog/index.css

@@ -0,0 +1,66 @@
+.bui-dialog {
+  --max-width: 300px;
+  --border-radius: var(--bui-shape-radius-drawer);
+  --header-font-size: var(--bui-title-size-2);
+  --message-font-size: var(--bui-title-size-4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bui-dialog-body {
+  padding-top: 21px;
+  min-width: var(--max-width);
+  margin: 0 auto;
+  border-radius: var(--border-radius);
+  background-clip: padding-box;
+  background-color: var(--bui-color-bg-view);
+  line-height: 21px;
+}
+.bui-dialog-body-title {
+  padding: 0 40px 9px;
+  font-size: var(--header-font-size);
+  text-align: center;
+  color: var(--bui-color-fg-default);
+  font-weight: 500;
+}
+.bui-dialog-body-title + .bui-dialog-body-footer {
+  margin-top: 6px;
+}
+.bui-dialog-body-desc {
+  padding: 0 24px;
+  color: var(--bui-color-fg-muted);
+  font-size: var(--message-font-size);
+  text-align: center;
+}
+.bui-dialog-body-desc:first-child {
+  padding-top: 0;
+}
+.bui-dialog-body-footer {
+  margin-top: 15px;
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  display: -webkit-box;
+  display: flex;
+}
+.bui-dialog-body-input {
+  width: calc(100% - 48px);
+  margin: 14px 24px 0;
+}
+.bui-dialog-body-button {
+  flex: 1;
+  display: block;
+  width: 100%;
+  height: 53px;
+  line-height: 25px;
+  padding: 12px 0 13px;
+  font-size: 17px;
+  background: 0 0;
+  border: 0;
+  outline: 0;
+  border-left: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 0;
+  text-align: center;
+  box-sizing: border-box;
+}
+.bui-dialog-body-button:active {
+  background-color: rgba(54, 57, 64, 0.05);
+}

package/dist/Dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as Dialog } from './FunctionalDialog';
+export * from './Dialog.types';