@ebscn/ui 1.0.0 → 1.0.1-beta.0

package/es/components/date-range-picker/date-range-picker.css

@@ -0,0 +1,94 @@
+.ebscn-date-range-picker {
+  --header-button-font-size: var(--ebscn-font-size-7);
+  --title-font-size: var(--ebscn-font-size-7);
+  --item-font-size: var(--ebscn-font-size-8);
+  --item-height: 34px;
+  width: 100%;
+  height: 350px;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  ---item-font-size: var(--item-font-size);
+  ---item-height: var(--item-height);
+}
+.ebscn-date-range-picker .ebscn-picker-view.ebscn-picker-view {
+  --item-font-size: var(---item-font-size);
+  --item-height: var(---item-height);
+}
+.ebscn-date-range-picker-header {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 4px;
+}
+.ebscn-date-range-picker-header-button {
+  font-size: var(--header-button-font-size);
+  display: inline-block;
+  padding: 8px 8px;
+}
+.ebscn-date-range-picker-header-button-disabled,
+.ebscn-date-range-picker-header-button-disabled:active {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.ebscn-date-range-picker-header-title {
+  padding: 4px 4px;
+  font-size: var(--ebscn-font-size-10);
+  color: #333;
+  text-align: center;
+  flex: 1;
+  font-weight: Medium;
+}
+.ebscn-date-range-picker-buttons-wrap {
+  display: flex;
+  justify-content: space-evenly;
+  margin-top: 12px;
+}
+.ebscn-date-range-picker-buttons-wrap .ebscn-date-range-picker-button {
+  width: 100px;
+  height: 28px;
+  line-height: 28px;
+  text-align: center;
+  background-color: #f8f9fc;
+  color: #333;
+  border-radius: 10px;
+  font-size: var(--ebscn-font-size-6);
+}
+.ebscn-date-range-picker-values-wrap {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-top: 12px;
+}
+.ebscn-date-range-picker-values-wrap .ebscn-date-range-picker-value {
+  padding-top: 12.5px;
+  padding-bottom: 12.5px;
+  width: 120px;
+  border-bottom: 1px solid #ccc;
+  text-align: center;
+}
+.ebscn-date-range-picker-values-wrap .ebscn-date-range-picker-value-active {
+  border-bottom-color: var(--ebscn-color-primary);
+}
+.ebscn-date-range-picker-tip {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 12px;
+  color: var(--ebscn-color-primary);
+  font-size: var(--ebscn-font-size-6);
+}
+.ebscn-date-range-picker-body {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+.ebscn-date-range-picker-body > .ebscn-picker-view {
+  --height: 100%;
+}
+.ebscn-date-range-picker-popup .ebscn-popup-body {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}

package/es/components/date-range-picker/date-range-picker.d.ts

@@ -0,0 +1,78 @@
+import type { CSSProperties, ReactNode } from 'react';
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { RenderLabel } from '../date-picker-view/date-picker-view';
+import { DatePickerFilter, Precision } from '../date-picker/date-picker-utils';
+import { PopupProps } from '../popup';
+export type DateRangePickerActions = {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+export type DateRangePickerRef = DateRangePickerActions;
+type PickerDate = Date;
+export type DateRangePickerProps = {
+    value?: [PickerDate, PickerDate] | [];
+    defaultValue?: [PickerDate, PickerDate] | [];
+    loading?: boolean;
+    loadingContent?: ReactNode;
+    min?: PickerDate;
+    max?: PickerDate;
+    precision?: Precision;
+    onSelect?: (value: [PickerDate, PickerDate] | null) => void;
+    onConfirm?: (value: [PickerDate, PickerDate] | []) => void;
+    onCancel?: () => void;
+    onClose?: () => void;
+    closeOnMaskClick?: boolean;
+    visible?: boolean;
+    title?: ReactNode;
+    confirmText?: ReactNode;
+    cancelText?: ReactNode;
+    children?: (value: [PickerDate, PickerDate] | [], actions: DateRangePickerActions) => ReactNode;
+    renderLabel?: RenderLabel;
+    filter?: DatePickerFilter;
+    mouseWheel?: boolean;
+    popupClassName?: string;
+    popupStyle?: CSSProperties;
+    tip?: ReactNode;
+    quickButtons?: Array<{
+        label: string;
+        value: [PickerDate, PickerDate];
+    }>;
+} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation' | 'forceRender' | 'destroyOnClose'> & NativeProps<'--header-button-font-size' | '--title-font-size' | '--item-font-size' | '--item-height'>;
+export declare const DateRangePicker: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    value?: [] | [Date, Date] | undefined;
+    defaultValue?: [] | [Date, Date] | undefined;
+    loading?: boolean | undefined;
+    loadingContent?: ReactNode;
+    min?: Date | undefined;
+    max?: Date | undefined;
+    precision?: Precision | undefined;
+    onSelect?: ((value: [PickerDate, PickerDate] | null) => void) | undefined;
+    onConfirm?: ((value: [PickerDate, PickerDate] | []) => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    closeOnMaskClick?: boolean | undefined;
+    visible?: boolean | undefined;
+    title?: ReactNode;
+    confirmText?: ReactNode;
+    cancelText?: ReactNode;
+    children?: ((value: [PickerDate, PickerDate] | [], actions: DateRangePickerActions) => ReactNode) | undefined;
+    renderLabel?: RenderLabel | undefined;
+    filter?: Partial<Record<Precision, (val: number, extend: {
+        date: Date;
+    }) => boolean>> | undefined;
+    mouseWheel?: boolean | undefined;
+    popupClassName?: string | undefined;
+    popupStyle?: CSSProperties | undefined;
+    tip?: ReactNode;
+    quickButtons?: {
+        label: string;
+        value: [PickerDate, PickerDate];
+    }[] | undefined;
+} & Pick<PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+    className?: string | undefined;
+    style?: (CSSProperties & Partial<Record<"--header-button-font-size" | "--title-font-size" | "--item-font-size" | "--item-height", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<DateRangePickerActions>>>;
+export {};

package/es/components/date-range-picker/date-range-picker.js

@@ -0,0 +1,330 @@
+var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+var __generator = this && this.__generator || function (thisArg, body) {
+  var _ = {
+      label: 0,
+      sent: function () {
+        if (t[0] & 1) throw t[1];
+        return t[1];
+      },
+      trys: [],
+      ops: []
+    },
+    f,
+    y,
+    t,
+    g;
+  return g = {
+    next: verb(0),
+    "throw": verb(1),
+    "return": verb(2)
+  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
+    return this;
+  }), g;
+  function verb(n) {
+    return function (v) {
+      return step([n, v]);
+    };
+  }
+  function step(op) {
+    if (f) throw new TypeError("Generator is already executing.");
+    while (g && (g = 0, op[0] && (_ = 0)), _) try {
+      if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+      if (y = 0, t) op = [op[0] & 2, t.value];
+      switch (op[0]) {
+        case 0:
+        case 1:
+          t = op;
+          break;
+        case 4:
+          _.label++;
+          return {
+            value: op[1],
+            done: false
+          };
+        case 5:
+          _.label++;
+          y = op[1];
+          op = [0];
+          continue;
+        case 7:
+          op = _.ops.pop();
+          _.trys.pop();
+          continue;
+        default:
+          if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+            _ = 0;
+            continue;
+          }
+          if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+            _.label = op[1];
+            break;
+          }
+          if (op[0] === 6 && _.label < t[1]) {
+            _.label = t[1];
+            t = op;
+            break;
+          }
+          if (t && _.label < t[2]) {
+            _.label = t[2];
+            _.ops.push(op);
+            break;
+          }
+          if (t[2]) _.ops.pop();
+          _.trys.pop();
+          continue;
+      }
+      op = body.call(thisArg, _);
+    } catch (e) {
+      op = [6, e];
+      y = 0;
+    } finally {
+      f = t = 0;
+    }
+    if (op[0] & 5) throw op[1];
+    return {
+      value: op[0] ? op[1] : void 0,
+      done: true
+    };
+  }
+};
+import { useMemoizedFn } from 'ahooks';
+import { SafeArea } from 'antd-mobile';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import { bound } from '../../utils/bound';
+import { withNativeProps } from '../../utils/native-props';
+import { usePropsValue } from '../../utils/use-props-value';
+import { mergeProps } from '../../utils/with-default-props';
+import DatePickerView from '../date-picker-view';
+import { defaultRenderLabel } from '../picker/picker-utils';
+import Popup from '../popup';
+var classPrefix = "ebscn-date-range-picker";
+var thisYear = new Date().getFullYear();
+var defaultProps = {
+  defaultValue: [null, null],
+  closeOnMaskClick: true,
+  renderLabel: defaultRenderLabel,
+  destroyOnClose: false,
+  forceRender: false,
+  min: new Date(new Date().setFullYear(thisYear - 1)),
+  max: new Date(new Date().setFullYear(thisYear)),
+  precision: 'day',
+  quickButtons: []
+};
+export var DateRangePicker = memo(forwardRef(function (p, ref) {
+  var _a, _b;
+  var _c;
+  var props = mergeProps(defaultProps, {
+    confirmText: '',
+    cancelText: ''
+  }, p);
+  var _d = usePropsValue({
+      value: props.visible,
+      defaultValue: false,
+      onChange: function (v) {
+        var _a;
+        if (v === false) {
+          (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+        }
+      }
+    }),
+    visible = _d[0],
+    setVisible = _d[1];
+  var actions = {
+    toggle: function () {
+      setVisible(function (v) {
+        return !v;
+      });
+    },
+    open: function () {
+      setVisible(true);
+    },
+    close: function () {
+      setVisible(false);
+    }
+  };
+  useImperativeHandle(ref, function () {
+    return actions;
+  });
+  var _e = usePropsValue({
+      value: props.value,
+      defaultValue: props.defaultValue,
+      onChange: function (v) {
+        return __awaiter(void 0, void 0, void 0, function () {
+          var _a;
+          return __generator(this, function (_b) {
+            if (v === null) return [2 /*return*/, Promise.reject(false)];
+            return [2 /*return*/, (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, v)];
+          });
+        });
+      }
+    }),
+    value = _e[0],
+    setValue = _e[1];
+  var now = useMemo(function () {
+    return new Date();
+  }, []);
+  var pickerValue = useMemo(function () {
+    var _a, _b;
+    var date = [(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : now, (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : now];
+    return date.map(function (val) {
+      return new Date(bound(val.getTime(), props.min.getTime(), props.max.getTime()));
+    });
+  }, [value, props.precision, props.min, props.max]);
+  var _f = useState(pickerValue),
+    innerValue = _f[0],
+    setInnerValue = _f[1];
+  useEffect(function () {
+    //todo
+    setInnerValue(pickerValue);
+  }, [visible, pickerValue]);
+  var _g = useState(0),
+    activeIndex = _g[0],
+    setActiveIndex = _g[1];
+  var onChange = useMemoizedFn(function (val) {
+    var _a;
+    setInnerValue(val);
+    if (visible) {
+      (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, val);
+    }
+  });
+  var onQuickClick = function (value) {
+    setInnerValue(value);
+  };
+  var renderLabel = function (_, value) {
+    return value;
+  };
+  var pickerElement = withNativeProps(props, React.createElement("div", {
+    className: classPrefix
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-header")
+  }, React.createElement("div", {
+    role: "button",
+    className: "".concat(classPrefix, "-header-button"),
+    onClick: function () {
+      var _a;
+      (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
+      setVisible(false);
+    }
+  }, props.cancelText), React.createElement("div", {
+    className: "".concat(classPrefix, "-header-title")
+  }, props.title), React.createElement("a", {
+    role: "button",
+    className: classNames("".concat(classPrefix, "-header-button"), props.loading && "".concat(classPrefix, "-header-button-disabled")),
+    onClick: function () {
+      if (props.loading) return;
+      setValue(innerValue, true);
+      setVisible(false);
+    },
+    "aria-disabled": props.loading
+  }, props.confirmText)), props.quickButtons.length && React.createElement("div", {
+    className: "".concat(classPrefix, "-buttons-wrap")
+  }, props.quickButtons.map(function (_a) {
+    var label = _a.label,
+      value = _a.value;
+    return React.createElement("div", {
+      onClick: function () {
+        return onQuickClick(value);
+      },
+      className: "".concat(classPrefix, "-button")
+    }, label);
+  })), React.createElement("div", {
+    className: "".concat(classPrefix, "-values-wrap")
+  }, React.createElement("div", {
+    className: classNames("".concat(classPrefix, "-value"), (_a = {}, _a["".concat(classPrefix, "-value-active")] = activeIndex === 0, _a)),
+    onClick: function () {
+      return setActiveIndex(0);
+    }
+  }, dayjs(innerValue[0]).format('YYYY-MM-DD')), React.createElement("div", {
+    className: classNames("".concat(classPrefix, "-value"), (_b = {}, _b["".concat(classPrefix, "-value-active")] = activeIndex === 1, _b)),
+    onClick: function () {
+      return setActiveIndex(1);
+    }
+  }, dayjs(innerValue[1]).format('YYYY-MM-DD'))), props.tip && React.createElement("div", {
+    className: "".concat(classPrefix, "-tip")
+  }, props.tip), React.createElement("div", {
+    className: "".concat(classPrefix, "-body")
+  }, React.createElement(DatePickerView, {
+    key: "startDate",
+    style: {
+      display: activeIndex === 0 ? 'flex' : 'none'
+    },
+    loading: props.loading,
+    loadingContent: props.loadingContent,
+    renderLabel: props.renderLabel || renderLabel,
+    value: innerValue === null || innerValue === void 0 ? void 0 : innerValue[0],
+    mouseWheel: props.mouseWheel,
+    onChange: function (e) {
+      return onChange([e, innerValue[1]]);
+    },
+    precision: p.precision,
+    min: props.min,
+    max: props.max
+  }), React.createElement(DatePickerView, {
+    key: "endDate",
+    style: {
+      display: activeIndex === 1 ? 'flex' : 'none'
+    },
+    loading: props.loading,
+    loadingContent: props.loadingContent,
+    renderLabel: props.renderLabel || renderLabel,
+    value: innerValue === null || innerValue === void 0 ? void 0 : innerValue[1],
+    mouseWheel: props.mouseWheel,
+    onChange: function (e) {
+      return onChange([innerValue[0], e]);
+    },
+    precision: p.precision,
+    min: props.min,
+    max: props.max
+  }))));
+  var popupElement = React.createElement(Popup, {
+    style: props.popupStyle,
+    className: classNames("".concat(classPrefix, "-popup"), props.popupClassName),
+    visible: visible,
+    position: "bottom",
+    onMaskClick: function () {
+      var _a;
+      if (!props.closeOnMaskClick) return;
+      (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
+      setVisible(false);
+    },
+    getContainer: props.getContainer,
+    destroyOnClose: props.destroyOnClose,
+    afterShow: props.afterShow,
+    afterClose: props.afterClose,
+    onClick: props.onClick,
+    forceRender: props.forceRender,
+    stopPropagation: props.stopPropagation
+  }, pickerElement, React.createElement(SafeArea, {
+    position: "bottom"
+  }));
+  return React.createElement(React.Fragment, null, popupElement, (_c = props.children) === null || _c === void 0 ? void 0 : _c.call(props, value, actions));
+}));
+DateRangePicker.displayName = 'DateRangePicker';

package/es/components/date-range-picker/index.d.ts

@@ -0,0 +1,79 @@
+/// <reference types="react" />
+import './date-range-picker.less';
+import { prompt } from '../picker/prompt';
+export type { DateRangePickerProps, DateRangePickerRef, DateRangePickerActions } from './date-range-picker';
+export type { PickerValue, PickerColumnItem, PickerColumn, PickerValueExtend, } from '../picker-view';
+declare const _default: import("react").NamedExoticComponent<{
+    value?: [] | [Date, Date] | undefined;
+    defaultValue?: [] | [Date, Date] | undefined;
+    loading?: boolean | undefined;
+    loadingContent?: import("react").ReactNode;
+    min?: Date | undefined;
+    max?: Date | undefined;
+    precision?: import("../date-picker/date-picker-utils").Precision | undefined;
+    onSelect?: ((value: [Date, Date] | null) => void) | undefined;
+    onConfirm?: ((value: [] | [Date, Date]) => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    closeOnMaskClick?: boolean | undefined;
+    visible?: boolean | undefined;
+    title?: import("react").ReactNode;
+    confirmText?: import("react").ReactNode;
+    cancelText?: import("react").ReactNode;
+    children?: ((value: [] | [Date, Date], actions: import("./date-range-picker").DateRangePickerActions) => import("react").ReactNode) | undefined;
+    renderLabel?: import("../date-picker-view/date-picker-view").RenderLabel | undefined;
+    filter?: Partial<Record<import("../date-picker/date-picker-utils").Precision, (val: number, extend: {
+        date: Date;
+    }) => boolean>> | undefined;
+    mouseWheel?: boolean | undefined;
+    popupClassName?: string | undefined;
+    popupStyle?: import("react").CSSProperties | undefined;
+    tip?: import("react").ReactNode;
+    quickButtons?: {
+        label: string;
+        value: [Date, Date];
+    }[] | undefined;
+} & Pick<import("../popup").PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--header-button-font-size" | "--title-font-size" | "--item-font-size" | "--item-height", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./date-range-picker").DateRangePickerActions>> & {
+    readonly type: import("react").ForwardRefExoticComponent<{
+        value?: [] | [Date, Date] | undefined;
+        defaultValue?: [] | [Date, Date] | undefined;
+        loading?: boolean | undefined;
+        loadingContent?: import("react").ReactNode;
+        min?: Date | undefined;
+        max?: Date | undefined;
+        precision?: import("../date-picker/date-picker-utils").Precision | undefined;
+        onSelect?: ((value: [Date, Date] | null) => void) | undefined;
+        onConfirm?: ((value: [] | [Date, Date]) => void) | undefined;
+        onCancel?: (() => void) | undefined;
+        onClose?: (() => void) | undefined;
+        closeOnMaskClick?: boolean | undefined;
+        visible?: boolean | undefined;
+        title?: import("react").ReactNode;
+        confirmText?: import("react").ReactNode;
+        cancelText?: import("react").ReactNode;
+        children?: ((value: [] | [Date, Date], actions: import("./date-range-picker").DateRangePickerActions) => import("react").ReactNode) | undefined;
+        renderLabel?: import("../date-picker-view/date-picker-view").RenderLabel | undefined;
+        filter?: Partial<Record<import("../date-picker/date-picker-utils").Precision, (val: number, extend: {
+            date: Date;
+        }) => boolean>> | undefined;
+        mouseWheel?: boolean | undefined;
+        popupClassName?: string | undefined;
+        popupStyle?: import("react").CSSProperties | undefined;
+        tip?: import("react").ReactNode;
+        quickButtons?: {
+            label: string;
+            value: [Date, Date];
+        }[] | undefined;
+    } & Pick<import("../popup").PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+        className?: string | undefined;
+        style?: (import("react").CSSProperties & Partial<Record<"--header-button-font-size" | "--title-font-size" | "--item-font-size" | "--item-height", string>>) | undefined;
+        tabIndex?: number | undefined;
+    } & import("react").AriaAttributes & import("react").RefAttributes<import("./date-range-picker").DateRangePickerActions>>;
+} & {
+    prompt: typeof prompt;
+};
+export default _default;

package/es/components/date-range-picker/index.js

@@ -0,0 +1,7 @@
+import "./date-range-picker.css";
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { DateRangePicker } from './date-range-picker';
+import { prompt } from '../picker/prompt';
+export default attachPropertiesToComponent(DateRangePicker, {
+  prompt: prompt
+});

package/es/components/divider/divider.css

@@ -0,0 +1,39 @@
+.ebscn-divider-horizontal {
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  border-width: 0;
+  border-color: var(--color);
+  border-style: solid;
+  color: var(--ebscn-color-weak);
+  font-size: 14px;
+}
+.ebscn-divider-left.ebscn-divider-horizontal::before {
+  max-width: 10%;
+}
+.ebscn-divider-right.ebscn-divider-horizontal::after {
+  max-width: 10%;
+}
+.ebscn-divider-horizontal::after,
+.ebscn-divider-horizontal::before {
+  flex: auto;
+  display: block;
+  content: '';
+  border-style: inherit;
+  border-color: inherit;
+  border-width: 0.5px 0 0;
+}
+.ebscn-divider-horizontal .ebscn-divider-content {
+  flex: none;
+  padding: 0 16px;
+}
+.ebscn-divider-vertical {
+  position: relative;
+  top: -0.06em;
+  display: inline-block;
+  height: 0.9em;
+  margin: 0 16px;
+  vertical-align: middle;
+  border-top: 0;
+  border-left: 1px solid var(--color);
+}

package/es/components/divider/divider.d.ts

@@ -0,0 +1,9 @@
+import type { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type DividerProps = {
+    contentPosition?: 'left' | 'right' | 'center';
+    direction?: 'horizontal' | 'vertical';
+    color?: 'primary' | 'default' | 'typing' | string;
+    children?: ReactNode;
+} & NativeProps;
+export declare const Divider: FC<DividerProps>;

package/es/components/divider/divider.js

@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import React from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+var classPrefix = "ebscn-divider";
+var defaultProps = {
+  color: 'default',
+  contentPosition: 'center',
+  direction: 'horizontal'
+};
+export var Divider = function (p) {
+  var _a;
+  var props = mergeProps(defaultProps, p);
+  var colorRecord = {
+    primary: 'var(--ebscn-color-primary,#e84225)',
+    typing: 'var(--ebscn-color-blue, #4c7cf1)',
+    default: 'var(--ebscn-color-split-line #ebebeb)'
+  };
+  var style = {
+    '--color': (_a = colorRecord[props.color || 'default']) !== null && _a !== void 0 ? _a : props.color
+  };
+  return withNativeProps(props, React.createElement("div", {
+    style: style,
+    className: classNames(classPrefix, "".concat(classPrefix, "-").concat(props.direction), "".concat(classPrefix, "-").concat(props.contentPosition))
+  }, props.children && React.createElement("div", {
+    className: "".concat(classPrefix, "-content")
+  }, props.children)));
+};

package/es/components/divider/index.d.ts

@@ -0,0 +1,4 @@
+import './divider.less';
+import { Divider } from './divider';
+export type { DividerProps } from './divider';
+export default Divider;

package/es/components/divider/index.js

@@ -0,0 +1,3 @@
+import "./divider.css";
+import { Divider } from './divider';
+export default Divider;