@996-design/996-components 1.0.0

package/lib/layout/Sider.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import type { GenerateSemantic } from '../_util/hooks/useMergeSemantic/semanticType';
+import type { Breakpoint } from '../_util/responsiveObserver';
+export interface SiderContextProps {
+    siderCollapsed?: boolean;
+}
+export declare const SiderContext: React.Context<SiderContextProps>;
+export type CollapseType = 'clickTrigger' | 'responsive';
+export type SiderTheme = 'light' | 'dark';
+export type SiderSemanticType = {
+    classNames?: {
+        root?: string;
+        body?: string;
+    };
+    styles?: {
+        root?: React.CSSProperties;
+        body?: React.CSSProperties;
+    };
+};
+export type SiderSemanticAllType = GenerateSemantic<SiderSemanticType, SiderProps>;
+export interface SiderProps extends React.HTMLAttributes<HTMLDivElement> {
+    prefixCls?: string;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    reverseArrow?: boolean;
+    onCollapse?: (collapsed: boolean, type: CollapseType) => void;
+    zeroWidthTriggerStyle?: React.CSSProperties;
+    trigger?: React.ReactNode;
+    width?: number | string;
+    collapsedWidth?: number | string;
+    breakpoint?: Breakpoint;
+    theme?: SiderTheme;
+    onBreakpoint?: (broken: boolean) => void;
+    classNames?: SiderSemanticAllType['classNamesAndFn'];
+    styles?: SiderSemanticAllType['stylesAndFn'];
+}
+export interface SiderState {
+    collapsed?: boolean;
+    below: boolean;
+}
+declare const Sider: React.ForwardRefExoticComponent<SiderProps & React.RefAttributes<HTMLDivElement>>;
+export default Sider;

package/lib/layout/Sider.js

@@ -0,0 +1,218 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SiderContext = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _BarsOutlined = _interopRequireDefault(require("@996-design/996-icons/BarsOutlined"));
+var _LeftOutlined = _interopRequireDefault(require("@996-design/996-icons/LeftOutlined"));
+var _RightOutlined = _interopRequireDefault(require("@996-design/996-icons/RightOutlined"));
+var _util = require("@rc-component/util");
+var _clsx2 = require("clsx");
+var _useMergeSemantic3 = require("../_util/hooks/useMergeSemantic");
+var _is = require("../_util/is");
+var _configProvider = require("../config-provider");
+var _context = require("./context");
+var _sider = _interopRequireDefault(require("./style/sider"));
+var _excluded = ["prefixCls", "className", "trigger", "children", "defaultCollapsed", "theme", "style", "collapsible", "reverseArrow", "width", "collapsedWidth", "zeroWidthTriggerStyle", "breakpoint", "onCollapse", "onBreakpoint", "classNames", "styles"];
+var dimensionMaxMap = {
+  xs: '479.98px',
+  sm: '575.98px',
+  md: '767.98px',
+  lg: '991.98px',
+  xl: '1199.98px',
+  xxl: '1599.98px',
+  xxxl: "1839.98px"
+};
+var isNumeric = function isNumeric(val) {
+  return !Number.isNaN(Number.parseFloat(val)) && Number.isFinite(Number(val));
+};
+var SiderContext = exports.SiderContext = /*#__PURE__*/React.createContext({});
+var generateId = function () {
+  var i = 0;
+  return function () {
+    var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    i += 1;
+    return "".concat(prefix).concat(i);
+  };
+}();
+var Sider = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var customizePrefixCls = props.prefixCls,
+    className = props.className,
+    trigger = props.trigger,
+    children = props.children,
+    _props$defaultCollaps = props.defaultCollapsed,
+    defaultCollapsed = _props$defaultCollaps === void 0 ? false : _props$defaultCollaps,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? 'dark' : _props$theme,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    _props$collapsible = props.collapsible,
+    collapsible = _props$collapsible === void 0 ? false : _props$collapsible,
+    _props$reverseArrow = props.reverseArrow,
+    reverseArrow = _props$reverseArrow === void 0 ? false : _props$reverseArrow,
+    _props$width = props.width,
+    width = _props$width === void 0 ? 200 : _props$width,
+    _props$collapsedWidth = props.collapsedWidth,
+    collapsedWidth = _props$collapsedWidth === void 0 ? 80 : _props$collapsedWidth,
+    zeroWidthTriggerStyle = props.zeroWidthTriggerStyle,
+    breakpoint = props.breakpoint,
+    onCollapse = props.onCollapse,
+    onBreakpoint = props.onBreakpoint,
+    classNames = props.classNames,
+    styles = props.styles,
+    otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var _useContext = (0, _react.useContext)(_context.LayoutContext),
+    siderHook = _useContext.siderHook;
+  var _useState = (0, _react.useState)('collapsed' in props ? props.collapsed : defaultCollapsed),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    collapsed = _useState2[0],
+    setCollapsed = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    below = _useState4[0],
+    setBelow = _useState4[1];
+  (0, _react.useEffect)(function () {
+    if ('collapsed' in props) {
+      setCollapsed(props.collapsed);
+    }
+  }, [props.collapsed]);
+  var handleSetCollapsed = function handleSetCollapsed(value, type) {
+    if (!('collapsed' in props)) {
+      setCollapsed(value);
+    }
+    onCollapse === null || onCollapse === void 0 || onCollapse(value, type);
+  };
+  var semanticProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    collapsed: collapsed,
+    defaultCollapsed: defaultCollapsed,
+    theme: theme,
+    style: style,
+    collapsible: collapsible,
+    reverseArrow: reverseArrow,
+    width: width,
+    collapsedWidth: collapsedWidth,
+    zeroWidthTriggerStyle: zeroWidthTriggerStyle,
+    breakpoint: breakpoint,
+    onCollapse: onCollapse,
+    onBreakpoint: onBreakpoint
+  });
+  var _useMergeSemantic = (0, _useMergeSemantic3.useMergeSemantic)([classNames], [styles], {
+      props: semanticProps
+    }),
+    _useMergeSemantic2 = (0, _slicedToArray2.default)(_useMergeSemantic, 2),
+    mergedClassNames = _useMergeSemantic2[0],
+    mergedStyles = _useMergeSemantic2[1];
+  // =========================== Prefix ===========================
+  var _useContext2 = (0, _react.useContext)(_configProvider.ConfigContext),
+    getPrefixCls = _useContext2.getPrefixCls,
+    direction = _useContext2.direction;
+  var prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
+  var _useStyle = (0, _sider.default)(prefixCls),
+    _useStyle2 = (0, _slicedToArray2.default)(_useStyle, 2),
+    hashId = _useStyle2[0],
+    cssVarCls = _useStyle2[1];
+  // ========================= Responsive =========================
+  var responsiveHandlerRef = (0, _react.useRef)(null);
+  responsiveHandlerRef.current = function (mql) {
+    setBelow(mql.matches);
+    onBreakpoint === null || onBreakpoint === void 0 || onBreakpoint(mql.matches);
+    if (collapsed !== mql.matches) {
+      handleSetCollapsed(mql.matches, 'responsive');
+    }
+  };
+  (0, _react.useEffect)(function () {
+    var _window;
+    function responsiveHandler(mql) {
+      var _responsiveHandlerRef;
+      return (_responsiveHandlerRef = responsiveHandlerRef.current) === null || _responsiveHandlerRef === void 0 ? void 0 : _responsiveHandlerRef.call(responsiveHandlerRef, mql);
+    }
+    var mql;
+    if (typeof ((_window = window) === null || _window === void 0 ? void 0 : _window.matchMedia) !== 'undefined' && breakpoint && breakpoint in dimensionMaxMap) {
+      var _mql;
+      mql = window.matchMedia("screen and (max-width: ".concat(dimensionMaxMap[breakpoint], ")"));
+      if ((0, _is.isFunction)((_mql = mql) === null || _mql === void 0 ? void 0 : _mql.addEventListener)) {
+        mql.addEventListener('change', responsiveHandler);
+      }
+      responsiveHandler(mql);
+    }
+    return function () {
+      var _mql2;
+      if ((0, _is.isFunction)((_mql2 = mql) === null || _mql2 === void 0 ? void 0 : _mql2.removeEventListener)) {
+        mql.removeEventListener('change', responsiveHandler);
+      }
+    };
+  }, [breakpoint]); // in order to accept dynamic 'breakpoint' property, we need to add 'breakpoint' into dependency array.
+  (0, _react.useEffect)(function () {
+    var uniqueId = generateId('ant-sider-');
+    siderHook.addSider(uniqueId);
+    return function () {
+      return siderHook.removeSider(uniqueId);
+    };
+  }, []);
+  var toggle = function toggle() {
+    handleSetCollapsed(!collapsed, 'clickTrigger');
+  };
+  var divProps = (0, _util.omit)(otherProps, ['collapsed']);
+  var rawWidth = collapsed ? collapsedWidth : width;
+  // use "px" as fallback unit for width
+  var siderWidth = isNumeric(rawWidth) ? "".concat(rawWidth, "px") : String(rawWidth);
+  // special trigger when collapsedWidth == 0
+  var zeroWidthTrigger = Number.parseFloat(String(collapsedWidth || 0)) === 0 ? (/*#__PURE__*/React.createElement("span", {
+    onClick: toggle,
+    className: (0, _clsx2.clsx)("".concat(prefixCls, "-zero-width-trigger"), "".concat(prefixCls, "-zero-width-trigger-").concat(reverseArrow ? 'right' : 'left')),
+    style: zeroWidthTriggerStyle
+  }, trigger || /*#__PURE__*/React.createElement(_BarsOutlined.default, null))) : null;
+  var reverseIcon = direction === 'rtl' === !reverseArrow;
+  var iconObj = {
+    expanded: reverseIcon ? /*#__PURE__*/React.createElement(_RightOutlined.default, null) : /*#__PURE__*/React.createElement(_LeftOutlined.default, null),
+    collapsed: reverseIcon ? /*#__PURE__*/React.createElement(_LeftOutlined.default, null) : /*#__PURE__*/React.createElement(_RightOutlined.default, null)
+  };
+  var status = collapsed ? 'collapsed' : 'expanded';
+  var defaultTrigger = iconObj[status];
+  var triggerDom = trigger !== null ? zeroWidthTrigger || (/*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-trigger"),
+    onClick: toggle,
+    style: {
+      width: siderWidth
+    }
+  }, trigger || defaultTrigger)) : null;
+  var divStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), {}, {
+    flex: "0 0 ".concat(siderWidth),
+    maxWidth: siderWidth,
+    // Fix width transition bug in IE11
+    minWidth: siderWidth,
+    // https://github.com/ant-design/ant-design/issues/6349
+    width: siderWidth
+  });
+  var siderCls = (0, _clsx2.clsx)(prefixCls, "".concat(prefixCls, "-").concat(theme), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-collapsed"), !!collapsed), "".concat(prefixCls, "-has-trigger"), collapsible && trigger !== null && !zeroWidthTrigger), "".concat(prefixCls, "-below"), !!below), "".concat(prefixCls, "-zero-width"), Number.parseFloat(siderWidth) === 0), className, mergedClassNames.root, hashId, cssVarCls);
+  var contextValue = React.useMemo(function () {
+    return {
+      siderCollapsed: collapsed
+    };
+  }, [collapsed]);
+  return /*#__PURE__*/React.createElement(SiderContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("aside", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    className: siderCls
+  }, divProps), {}, {
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedStyles.root), divStyle),
+    ref: ref
+  }), /*#__PURE__*/React.createElement("div", {
+    className: (0, _clsx2.clsx)("".concat(prefixCls, "-children"), mergedClassNames.body),
+    style: mergedStyles.body
+  }, children), collapsible || below && zeroWidthTrigger ? triggerDom : null));
+});
+if (process.env.NODE_ENV !== 'production') {
+  Sider.displayName = 'Sider';
+}
+var _default = exports.default = Sider;

package/lib/layout/context.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface LayoutContextProps {
+    siderHook: {
+        addSider: (id: string) => void;
+        removeSider: (id: string) => void;
+    };
+}
+export declare const LayoutContext: React.Context<LayoutContextProps>;

package/lib/layout/context.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LayoutContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+var LayoutContext = exports.LayoutContext = /*#__PURE__*/React.createContext({
+  siderHook: {
+    addSider: function addSider() {
+      return null;
+    },
+    removeSider: function removeSider() {
+      return null;
+    }
+  }
+});

package/lib/layout/hooks/useHasSider.d.ts

@@ -0,0 +1,2 @@
+import type * as React from 'react';
+export default function useHasSider(siders: string[], children?: React.ReactNode, hasSider?: boolean): boolean;

package/lib/layout/hooks/useHasSider.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useHasSider;
+var _util = require("@rc-component/util");
+var _Sider = _interopRequireDefault(require("../Sider"));
+function useHasSider(siders, children, hasSider) {
+  if (typeof hasSider === 'boolean') {
+    return hasSider;
+  }
+  if (siders.length) {
+    return true;
+  }
+  var childNodes = (0, _util.toArray)(children);
+  return childNodes.some(function (node) {
+    return node.type === _Sider.default;
+  });
+}

package/lib/layout/index.d.ts

@@ -0,0 +1,15 @@
+import InternalLayout, { Content, Footer, Header } from './layout';
+import Sider, { SiderContext } from './Sider';
+export type { BasicProps as LayoutProps } from './layout';
+export type { SiderProps } from './Sider';
+type InternalLayoutType = typeof InternalLayout;
+type CompoundedComponent = InternalLayoutType & {
+    Header: typeof Header;
+    Footer: typeof Footer;
+    Content: typeof Content;
+    Sider: typeof Sider;
+    /** @private Internal Context. Do not use in your production. */
+    _InternalSiderContext: typeof SiderContext;
+};
+declare const Layout: CompoundedComponent;
+export default Layout;

package/lib/layout/index.js

@@ -0,0 +1,17 @@
+"use strict";
+"use client";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _layout = _interopRequireWildcard(require("./layout"));
+var _Sider = _interopRequireWildcard(require("./Sider"));
+var Layout = _layout.default;
+Layout.Header = _layout.Header;
+Layout.Footer = _layout.Footer;
+Layout.Content = _layout.Content;
+Layout.Sider = _Sider.default;
+Layout._InternalSiderContext = _Sider.SiderContext;
+var _default = exports.default = Layout;

package/lib/layout/layout.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export interface GeneratorProps {
+    suffixCls?: string;
+    tagName: 'header' | 'footer' | 'main' | 'div';
+    displayName: string;
+}
+export interface BasicProps extends React.HTMLAttributes<HTMLDivElement> {
+    prefixCls?: string;
+    suffixCls?: string;
+    rootClassName?: string;
+    hasSider?: boolean;
+}
+declare const Layout: React.ForwardRefExoticComponent<BasicProps & React.RefAttributes<HTMLElement>>;
+declare const Header: React.ForwardRefExoticComponent<BasicProps & React.RefAttributes<HTMLElement>>;
+declare const Footer: React.ForwardRefExoticComponent<BasicProps & React.RefAttributes<HTMLElement>>;
+declare const Content: React.ForwardRefExoticComponent<BasicProps & React.RefAttributes<HTMLElement>>;
+export { Content, Footer, Header };
+export default Layout;

package/lib/layout/layout.js

@@ -0,0 +1,134 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Header = exports.Footer = exports.Content = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var React = _interopRequireWildcard(require("react"));
+var _util = require("@rc-component/util");
+var _clsx2 = require("clsx");
+var _configProvider = require("../config-provider");
+var _context = require("../config-provider/context");
+var _context2 = require("./context");
+var _useHasSider = _interopRequireDefault(require("./hooks/useHasSider"));
+var _style = _interopRequireDefault(require("./style"));
+var _excluded = ["prefixCls", "suffixCls", "className", "tagName"],
+  _excluded2 = ["prefixCls", "className", "rootClassName", "children", "hasSider", "tagName", "style"];
+var generator = function generator(_ref) {
+  var suffixCls = _ref.suffixCls,
+    tagName = _ref.tagName,
+    displayName = _ref.displayName;
+  return function (Component) {
+    var Adapter = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      return /*#__PURE__*/React.createElement(Component, (0, _objectSpread2.default)({
+        ref: ref,
+        suffixCls: suffixCls,
+        tagName: tagName
+      }, props));
+    });
+    if (process.env.NODE_ENV !== 'production') {
+      Adapter.displayName = displayName;
+    }
+    return Adapter;
+  };
+};
+var Basic = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var customizePrefixCls = props.prefixCls,
+    suffixCls = props.suffixCls,
+    className = props.className,
+    TagName = props.tagName,
+    others = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+    getPrefixCls = _React$useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('layout', customizePrefixCls);
+  var _useStyle = (0, _style.default)(prefixCls),
+    _useStyle2 = (0, _slicedToArray2.default)(_useStyle, 2),
+    hashId = _useStyle2[0],
+    cssVarCls = _useStyle2[1];
+  var prefixWithSuffixCls = suffixCls ? "".concat(prefixCls, "-").concat(suffixCls) : prefixCls;
+  return /*#__PURE__*/React.createElement(TagName, (0, _objectSpread2.default)({
+    className: (0, _clsx2.clsx)(customizePrefixCls || prefixWithSuffixCls, className, hashId, cssVarCls),
+    ref: ref
+  }, others));
+});
+var BasicLayout = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _React$useContext2 = React.useContext(_configProvider.ConfigContext),
+    direction = _React$useContext2.direction;
+  var _React$useState = React.useState([]),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    siders = _React$useState2[0],
+    setSiders = _React$useState2[1];
+  var customizePrefixCls = props.prefixCls,
+    className = props.className,
+    rootClassName = props.rootClassName,
+    children = props.children,
+    hasSider = props.hasSider,
+    Tag = props.tagName,
+    style = props.style,
+    others = (0, _objectWithoutProperties2.default)(props, _excluded2);
+  var passedProps = (0, _util.omit)(others, ['suffixCls']);
+  var _useComponentConfig = (0, _context.useComponentConfig)('layout'),
+    getPrefixCls = _useComponentConfig.getPrefixCls,
+    contextClassName = _useComponentConfig.className,
+    contextStyle = _useComponentConfig.style;
+  var prefixCls = getPrefixCls('layout', customizePrefixCls);
+  var mergedHasSider = (0, _useHasSider.default)(siders, children, hasSider);
+  var _useStyle3 = (0, _style.default)(prefixCls),
+    _useStyle4 = (0, _slicedToArray2.default)(_useStyle3, 2),
+    hashId = _useStyle4[0],
+    cssVarCls = _useStyle4[1];
+  var classString = (0, _clsx2.clsx)(prefixCls, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-has-sider"), mergedHasSider), "".concat(prefixCls, "-rtl"), direction === 'rtl'), contextClassName, className, rootClassName, hashId, cssVarCls);
+  var contextValue = React.useMemo(function () {
+    return {
+      siderHook: {
+        addSider: function addSider(id) {
+          setSiders(function (prev) {
+            return [].concat((0, _toConsumableArray2.default)(prev), [id]);
+          });
+        },
+        removeSider: function removeSider(id) {
+          setSiders(function (prev) {
+            return prev.filter(function (currentId) {
+              return currentId !== id;
+            });
+          });
+        }
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(_context2.LayoutContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(Tag, (0, _objectSpread2.default)({
+    ref: ref,
+    className: classString,
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, contextStyle), style)
+  }, passedProps), children));
+});
+var Layout = generator({
+  tagName: 'div',
+  displayName: 'Layout'
+})(BasicLayout);
+var Header = exports.Header = generator({
+  suffixCls: 'header',
+  tagName: 'header',
+  displayName: 'Header'
+})(Basic);
+var Footer = exports.Footer = generator({
+  suffixCls: 'footer',
+  tagName: 'footer',
+  displayName: 'Footer'
+})(Basic);
+var Content = exports.Content = generator({
+  suffixCls: 'content',
+  tagName: 'main',
+  displayName: 'Content'
+})(Basic);
+var _default = exports.default = Layout;

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

@@ -0,0 +1,96 @@
+import type { CSSProperties } from 'react';
+import type { FullToken, GetDefaultToken } from '../../theme/internal';
+export interface ComponentToken {
+    /** @deprecated Use headerBg instead */
+    colorBgHeader: string;
+    /** @deprecated Use bodyBg instead */
+    colorBgBody: string;
+    /** @deprecated Use triggerBg instead */
+    colorBgTrigger: string;
+    /**
+     * @desc 主体部分背景色
+     * @descEN Background Color of body
+     */
+    bodyBg: string;
+    /**
+     * @desc 顶部背景色
+     * @descEN Background Color of header
+     */
+    headerBg: string;
+    /**
+     * @desc 顶部高度
+     * @descEN Height of header
+     */
+    headerHeight: number | string;
+    /**
+     * @desc 顶部内边距
+     * @descEN Padding of header
+     */
+    headerPadding: CSSProperties['padding'];
+    /**
+     * @desc 顶部文字颜色
+     * @descEN Text color of header
+     */
+    headerColor: string;
+    /**
+     * @desc 页脚内边距
+     * @descEN Padding of footer
+     */
+    footerPadding: CSSProperties['padding'];
+    /**
+     * @desc 页脚背景色
+     * @descEN Background Color of footer
+     */
+    footerBg: string;
+    /**
+     * @desc 侧边栏背景色
+     * @descEN Background Color of sider
+     */
+    siderBg: string;
+    /**
+     * @desc 侧边栏开关高度
+     * @descEN Height of sider trigger
+     */
+    triggerHeight: number | string;
+    /**
+     * @desc 侧边栏开关背景色
+     * @descEN Background Color of sider trigger
+     */
+    triggerBg: string;
+    /**
+     * @desc 侧边栏开关颜色
+     * @descEN Color of sider trigger
+     */
+    triggerColor: string;
+    /**
+     * @desc collapse 为 0 时侧边栏开关宽度
+     * @descEN Width of sider trigger when collapse is 0
+     */
+    zeroTriggerWidth: number;
+    /**
+     * @desc collapse 为 0 时侧边栏开关高度
+     * @descEN Height of sider trigger when collapse is 0
+     */
+    zeroTriggerHeight: number;
+    /**
+     * @desc 亮色主题侧边栏背景色
+     * @descEN Background Color of light theme sider
+     */
+    lightSiderBg: string;
+    /**
+     * @desc 亮色主题侧边栏开关背景色
+     * @descEN Background Color of light theme sider trigger
+     */
+    lightTriggerBg: string;
+    /**
+     * @desc 亮色主题侧边栏开关颜色
+     * @descEN Color of light theme sider trigger
+     */
+    lightTriggerColor: string;
+}
+export interface LayoutToken extends FullToken<'Layout'> {
+}
+export declare const prepareComponentToken: GetDefaultToken<'Layout'>;
+export declare const DEPRECATED_TOKENS: [keyof ComponentToken, keyof ComponentToken][];
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [string, string];
+export default _default;