doui-react 1.0.0

package/lib/select/component/utils.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateOptions = generateOptions;
+exports.getComponentProps = getComponentProps;
+exports.getDependencies = getDependencies;
+exports.getOptionsValue = getOptionsValue;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _api = require("../../api");
+var _highlightText = require("../../highlight-text");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _constant = require("./constant");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["options", "sort"],
+  _excluded2 = ["option", "sort"],
+  _excluded3 = ["value", "label"];
+function generateOptions(_ref) {
+  var _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    sort = _ref.sort,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var mappedOptions = _lodash.default.map(options, function (option) {
+    var finalOption = _lodash.default.isObject(option) ? option : {
+      value: option,
+      label: option
+    };
+    return generateOption((0, _objectSpread2.default)({
+      option: finalOption,
+      sort: sort
+    }, rest));
+  });
+  var sorter = parseSort(sort);
+  if (!sorter) {
+    return mappedOptions;
+  }
+  if (_lodash.default.isString(sorter)) {
+    var sortedOptions = (0, _api.sortBy)(mappedOptions, 'originLabel');
+    return sorter === 'ascend' ? sortedOptions : sortedOptions.reverse();
+  }
+  return mappedOptions.sort(sorter);
+}
+function generateOption(_ref2) {
+  var _processedOption$sort;
+  var originalOption = _ref2.option,
+    sort = _ref2.sort,
+    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  var search = props.search,
+    renderLabel = props.renderLabel,
+    presetProcessOption = props.presetProcessOption,
+    finalProcessOption = props.finalProcessOption;
+  var option = presetProcessOption ? presetProcessOption(originalOption) : originalOption;
+  var _parseOptionProps = parseOptionProps(option),
+    selectOptionProps = _parseOptionProps.selectOptionProps,
+    highlightTextProps = _parseOptionProps.highlightTextProps;
+  var label = selectOptionProps.label,
+    disabled = selectOptionProps.disabled,
+    options = selectOptionProps.options;
+  var highlightText = (0, _jsxRuntime.jsx)(_highlightText.HighlightText, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    autoShowTooltip: !(disabled && highlightTextProps.tooltip)
+  }, highlightTextProps), {}, {
+    text: "".concat(label),
+    highlight: search
+  }));
+  var labelComponent = renderLabel ? renderLabel((0, _objectSpread2.default)((0, _objectSpread2.default)({}, option), {}, {
+    component: highlightText,
+    search: search
+  })) : highlightText;
+  var optionsItem = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, selectOptionProps), {}, {
+    label: labelComponent,
+    originLabel: label
+  });
+  var processedOption = finalProcessOption ? finalProcessOption(optionsItem) : optionsItem;
+  if (_lodash.default.isEmpty(options)) {
+    return processedOption;
+  }
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, processedOption), {}, {
+    options: generateOptions((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      options: options,
+      sort: (_processedOption$sort = processedOption.sort) !== null && _processedOption$sort !== void 0 ? _processedOption$sort : sort
+    }))
+  });
+}
+function parseOptionProps(props) {
+  var highlightTextProps = _lodash.default.pick(props, _constant.highlightTextPropKeys);
+  var _ref3 = _lodash.default.omit(props, _constant.highlightTextPropKeys),
+    value = _ref3.value,
+    label = _ref3.label,
+    restProps = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
+  return {
+    highlightTextProps: highlightTextProps,
+    selectOptionProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
+      label: label !== null && label !== void 0 ? label : value,
+      value: value !== null && value !== void 0 ? value : label
+    })
+  };
+}
+function parseSort() {
+  var sort = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'ascend';
+  if (_lodash.default.isBoolean(sort)) {
+    return sort ? 'ascend' : false;
+  }
+  return sort;
+}
+function getOptionsValue(options) {
+  return _lodash.default.flatMap(options, function (option) {
+    if (_lodash.default.isObject(option)) {
+      var value = option.value,
+        label = option.label,
+        _options = option.options;
+      var values = [value !== null && value !== void 0 ? value : label];
+      if (_options) {
+        values.push.apply(values, (0, _toConsumableArray2.default)(getOptionsValue(_options)));
+      }
+      return values;
+    }
+    return option;
+  });
+}
+function getDependencies(_ref4) {
+  var values = _ref4.values,
+    deps = _ref4.deps,
+    search = _ref4.search,
+    isFunctionOptions = _ref4.isFunctionOptions;
+  if (!isFunctionOptions) {
+    return [];
+  }
+  var depsFormValues = parseDepsFormValues({
+    values: values,
+    deps: deps
+  });
+  return [search, depsFormValues];
+}
+function parseDepsFormValues(_ref5) {
+  var values = _ref5.values,
+    deps = _ref5.deps;
+  if (_lodash.default.isNil(deps)) {
+    return values;
+  }
+  if (_lodash.default.isEmpty(deps)) {
+    return;
+  }
+  return _lodash.default.pick(values, deps);
+}
+function getComponentProps(props) {
+  var keys = ['optionDependencies'];
+  return _lodash.default.omit(props, keys);
+}

package/lib/select/index.d.ts

@@ -0,0 +1,2 @@
+export * from './component';
+export * from './type';

package/lib/select/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _component = require("./component");
+Object.keys(_component).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _component[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _component[key];
+    }
+  });
+});
+var _type = require("./type");
+Object.keys(_type).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _type[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _type[key];
+    }
+  });
+});

package/lib/select/style/index.d.ts

@@ -0,0 +1,4 @@
+declare const style: {
+    loading: import("@emotion/react").SerializedStyles;
+};
+export default style;

package/lib/select/style/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _templateObject;
+var style = {
+  loading: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    margin: 20px 0;\n  "])))
+};
+var _default = exports.default = style;

package/lib/select/type/index.d.ts

@@ -0,0 +1,105 @@
+import { BaseComponentProps, FunctionReturn } from "../../api";
+import { UseFetchOptions } from "../../hooks";
+import { TextProps } from "../../text";
+import { SelectProps as AntdSelectProps } from 'antd/lib/select';
+import { BaseOptionType, DefaultOptionType } from 'rc-select/lib/Select';
+import { ReactNode } from 'react';
+/**
+ * @noExtends
+ */
+export interface SelectOption extends BaseOptionType, Omit<TextProps, 'children'> {
+    /**
+     * @description 内容文本
+     */
+    label?: string | number;
+    /**
+     * @description 选项的值
+     */
+    value?: string | number;
+    /**
+     * @description 分组的子选项
+     * @link SelectOptions: #select-option
+     */
+    options?: SelectOptions;
+    sort?: 'ascend' | 'descend' | boolean | ((a: DefaultOptionType, b: DefaultOptionType) => number);
+}
+export type SelectOptions = Array<SelectOption | string | number>;
+export interface BaseSelectProps {
+    value?: any;
+    loading?: boolean;
+    /**
+     * @description 选项
+     * @link SelectOptions: /components/select#select-option
+     */
+    options?: SelectOptions;
+    /**
+     * @description 搜索文本
+     */
+    search?: string;
+    /**
+     * @description 是否支持排序
+     * @default ascend
+     * @replaceAll 'ascend' | 'descend' | boolean
+     */
+    sort?: SelectOption['sort'];
+    /**
+     * @description 自定义 `label` 内容
+     */
+    renderLabel?(props: RenderLabelProps): ReactNode;
+    presetProcessOption?(option: SelectOption): SelectOption;
+    finalProcessOption?(option: DefaultOptionType): DefaultOptionType;
+    shouldRerenderOptions?: any;
+    /**
+     * 是否过滤选项中不存在的值
+     */
+    __filterNotExistValue__?: boolean;
+    __callback__?(props: SelectCallbackProps): void;
+}
+type UnionType = Omit<AntdSelectProps, 'options'> & Omit<BaseSelectProps, 'options'> & BaseComponentProps;
+export interface SelectProps extends UnionType {
+    /**
+     * @description 是否支持搜索
+     * @default true
+     */
+    showSearch?: boolean;
+    /**
+     * @description 下拉选项，具体项见下表
+     * @replaceAll SelectOptions | ((search: string) => FunctionReturn<SelectOptions>)
+     * @link SelectOptions: #select-option
+     */
+    options?: SelectOptions | ((search: string) => FunctionReturn<SelectOptions>);
+    /**
+     * @description 是否显示 `loading` 状态
+     * @default true
+     */
+    loading?: boolean;
+    /**
+     * @description 是否多选
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * @description 搜索防抖时间，单位毫秒，设置为 `0` 或 `false` 则关闭防抖
+     * @default 300
+     */
+    debounce?: UseFetchOptions['debounce'];
+    optionDependencies?: string[];
+    /**
+     * @description 自定义下拉框内容
+     */
+    renderDropdown?(props: RenderDropdownProps): ReactNode;
+}
+export interface RenderLabelProps extends SelectOption {
+    component: ReactNode;
+    search?: string;
+}
+export interface RenderDropdownProps {
+    component: ReactNode;
+    loading: boolean;
+}
+export interface SelectCallbackProps {
+    value?: any;
+    options: SelectOptions;
+    loading?: boolean;
+}
+export {};

package/lib/select/type/index.js

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

package/lib/stack/component/center-stack.d.ts

@@ -0,0 +1,2 @@
+import { CenterStackProps } from '../type';
+export declare function CenterStack(props: CenterStackProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/stack/component/center-stack.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CenterStack = CenterStack;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _api = require("../../api");
+var _style = _interopRequireDefault(require("../style"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["refs", "wrap", "gap", "flex", "vertical"];
+function useCenterStack(_ref) {
+  var refs = _ref.refs,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? false : _ref$wrap,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 0 : _ref$gap,
+    _ref$flex = _ref.flex,
+    flex = _ref$flex === void 0 ? 1 : _ref$flex,
+    vertical = _ref.vertical,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var css = _style.default.centerStack({
+    wrap: wrap,
+    gap: gap,
+    flex: flex,
+    vertical: vertical
+  });
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
+    ref: refs,
+    css: css,
+    className: (0, _api.combineClassName)('center-stack', restProps)
+  });
+}
+function CenterStack(props) {
+  var params = useCenterStack(props);
+  return (0, _jsxRuntime.jsx)("div", (0, _objectSpread2.default)({}, params));
+}

package/lib/stack/component/h-stack.d.ts

@@ -0,0 +1,2 @@
+import { HStackProps } from '../type';
+export declare function HStack(props: HStackProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/stack/component/h-stack.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HStack = HStack;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _api = require("../../api");
+var _style = _interopRequireDefault(require("../style"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["refs", "wrap", "gap", "flex", "width", "justify", "align"];
+function useHStack(_ref) {
+  var refs = _ref.refs,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? false : _ref$wrap,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 0 : _ref$gap,
+    _ref$flex = _ref.flex,
+    flex = _ref$flex === void 0 ? 1 : _ref$flex,
+    width = _ref.width,
+    _ref$justify = _ref.justify,
+    justify = _ref$justify === void 0 ? 'left' : _ref$justify,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'center' : _ref$align,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var css = _style.default.hStack({
+    wrap: wrap,
+    gap: gap,
+    flex: flex,
+    justify: justify,
+    align: align,
+    width: width,
+    style: restProps.style
+  });
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
+    ref: refs,
+    css: css,
+    className: (0, _api.combineClassName)('h-stack', restProps)
+  });
+}
+function HStack(props) {
+  var params = useHStack(props);
+  return (0, _jsxRuntime.jsx)("div", (0, _objectSpread2.default)({}, params));
+}

package/lib/stack/component/index.d.ts

@@ -0,0 +1,3 @@
+export * from './center-stack';
+export * from './h-stack';
+export * from './v-stack';

package/lib/stack/component/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _centerStack = require("./center-stack");
+Object.keys(_centerStack).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _centerStack[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _centerStack[key];
+    }
+  });
+});
+var _hStack = require("./h-stack");
+Object.keys(_hStack).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _hStack[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _hStack[key];
+    }
+  });
+});
+var _vStack = require("./v-stack");
+Object.keys(_vStack).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _vStack[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _vStack[key];
+    }
+  });
+});

package/lib/stack/component/v-stack.d.ts

@@ -0,0 +1,2 @@
+import { VStackProps } from '../type';
+export declare function VStack(props: VStackProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/stack/component/v-stack.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VStack = VStack;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _api = require("../../api");
+var _style = _interopRequireDefault(require("../style"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["refs", "gap", "flex", "justify", "align", "width"];
+function useVStack(_ref) {
+  var refs = _ref.refs,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 0 : _ref$gap,
+    _ref$flex = _ref.flex,
+    flex = _ref$flex === void 0 ? 1 : _ref$flex,
+    _ref$justify = _ref.justify,
+    justify = _ref$justify === void 0 ? 'between' : _ref$justify,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'top' : _ref$align,
+    width = _ref.width,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var css = _style.default.vStack({
+    gap: gap,
+    flex: flex,
+    justify: justify,
+    align: align,
+    width: width,
+    style: restProps.style
+  });
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
+    ref: refs,
+    css: css,
+    className: (0, _api.combineClassName)('v-stack', restProps)
+  });
+}
+function VStack(props) {
+  var params = useVStack(props);
+  return (0, _jsxRuntime.jsx)("div", (0, _objectSpread2.default)({}, params));
+}

package/lib/stack/index.d.ts

@@ -0,0 +1,2 @@
+export * from './component';
+export * from './type';

package/lib/stack/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _component = require("./component");
+Object.keys(_component).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _component[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _component[key];
+    }
+  });
+});
+var _type = require("./type");
+Object.keys(_type).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _type[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _type[key];
+    }
+  });
+});

package/lib/stack/style/index.d.ts

@@ -0,0 +1,21 @@
+import { CenterStackProps, HStackProps, VStackProps } from '../type';
+export declare const justifyMap: {
+    left: string;
+    right: string;
+    center: string;
+    between: string;
+};
+export declare const alignMap: {
+    top: string;
+    bottom: string;
+    center: string;
+    between: string;
+};
+export declare function getAlign(align: HStackProps['align']): string;
+export declare function getWidthAndFlex({ width, style, flex }: Partial<HStackProps>): import("@emotion/react").SerializedStyles;
+declare const style: {
+    hStack: (props: Partial<HStackProps>) => import("@emotion/react").SerializedStyles;
+    vStack: (props: Partial<VStackProps>) => import("@emotion/react").SerializedStyles;
+    centerStack: (props: Partial<CenterStackProps>) => import("@emotion/react").SerializedStyles;
+};
+export default style;

package/lib/stack/style/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.alignMap = void 0;
+exports.getAlign = getAlign;
+exports.getWidthAndFlex = getWidthAndFlex;
+exports.justifyMap = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _api = require("../../api");
+var _react = require("@emotion/react");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var justifyMap = exports.justifyMap = {
+  left: 'flex-start',
+  right: 'flex-end',
+  center: 'center',
+  between: 'space-between'
+};
+var alignMap = exports.alignMap = {
+  top: 'flex-start',
+  bottom: 'flex-end',
+  center: 'center',
+  between: 'space-between'
+};
+function getJustify(justify) {
+  return _lodash.default.get(justifyMap, justify);
+}
+function getAlign(align) {
+  return _lodash.default.get(alignMap, align);
+}
+function getWidthAndFlex(_ref) {
+  var width = _ref.width,
+    style = _ref.style,
+    flex = _ref.flex;
+  var finalWidth = width !== null && width !== void 0 ? width : style === null || style === void 0 ? void 0 : style.width;
+  if (finalWidth) {
+    return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      width: ", ";\n    "])), (0, _api.transformValueWithStyleUnit)(finalWidth));
+  }
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    flex: ", ";\n    width: 100%;\n  "])), (0, _api.transformValueToFlex)(flex, 1));
+}
+var style = {
+  hStack: function hStack(props) {
+    return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    justify-content: ", ";\n    align-items: ", ";\n    align-content: ", ";\n    ", "\n  "])), (0, _api.flexStyle)(props), getJustify(props.justify), getAlign(props.align), getAlign(props.align), getWidthAndFlex(props));
+  },
+  vStack: function vStack(props) {
+    return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    justify-content: ", ";\n    align-items: ", ";\n    ", "\n  "])), (0, _api.flexStyle)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      vertical: true,
+      wrap: false
+    })), getAlign(props.align), getJustify(props.justify), getWidthAndFlex(props));
+  },
+  centerStack: function centerStack(props) {
+    return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    justify-content: center;\n    align-items: center;\n    align-content: center;\n    flex: ", ";\n  "])), (0, _api.flexStyle)(props), (0, _api.transformValueToFlex)(props.flex));
+  }
+};
+var _default = exports.default = style;

package/lib/stack/type/index.d.ts

@@ -0,0 +1,54 @@
+import { BaseComponentProps } from "../../api";
+import { ReactNode } from 'react';
+import { alignMap, justifyMap } from '../style';
+interface StackProps extends BaseComponentProps {
+    children: ReactNode;
+    /**
+     * @description flex 布局属性
+     * @default 1
+     */
+    flex?: number | string;
+    /**
+     * @description 间距，如果是数组，第一个为水平间距，第二个为垂直间距
+     * @default 0
+     */
+    gap?: number | [number, number];
+    /**
+     * @description 是否自动换行
+     * @default false
+     */
+    wrap?: boolean;
+    width?: string | number;
+}
+export interface HStackProps extends StackProps {
+    /**
+     * @description 水平排列方式
+     * @default left
+     */
+    justify?: keyof typeof justifyMap;
+    /**
+     * @description 垂直排列方式
+     * @default center
+     */
+    align?: keyof typeof alignMap;
+}
+export interface VStackProps extends Omit<StackProps, 'wrap'> {
+    /**
+     * @description 水平排列方式
+     * @default between
+     */
+    justify?: keyof typeof justifyMap;
+    /**
+     * @description 垂直排列方式
+     * @default top
+     */
+    align?: keyof typeof alignMap;
+}
+export interface CenterStackProps extends StackProps {
+    /**
+     * @description 是否垂直排列
+     * @default false
+     */
+    vertical?: boolean;
+}
+export {};