@lobehub/ui 1.135.3 → 1.136.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,14 +1,16 @@
1
- import { MenuProps } from 'antd';
1
+ import { type DrawerProps, type MenuProps } from 'antd';
2
2
  import { CSSProperties } from 'react';
3
3
  import { type ActionIconProps } from "../ActionIcon";
4
4
  export interface BurgerProps {
5
5
  className?: string;
6
+ drawerProps?: Partial<Omit<DrawerProps, 'items' | 'opened' | 'setOpened'>>;
7
+ fullscreen?: boolean;
6
8
  /**
7
9
  * @description The height of the header component
8
10
  * @default 64
9
11
  */
10
12
  headerHeight?: number;
11
- icon?: ActionIconProps;
13
+ iconProps?: Partial<ActionIconProps>;
12
14
  /**
13
15
  * @description The items to be displayed in the menu
14
16
  */
@@ -22,6 +24,7 @@ export interface BurgerProps {
22
24
  * @description Whether the menu is currently open or not
23
25
  */
24
26
  opened: boolean;
27
+ rootClassName?: string;
25
28
  /**
26
29
  * @description The keys of the currently selected menu items
27
30
  */
@@ -2,7 +2,7 @@
2
2
 
3
3
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
5
- var _excluded = ["items", "openKeys", "selectedKeys", "opened", "setOpened", "className", "headerHeight", "onClick", "icon"];
5
+ var _excluded = ["items", "openKeys", "selectedKeys", "opened", "setOpened", "className", "headerHeight", "onClick", "iconProps", "rootClassName", "fullscreen", "drawerProps"];
6
6
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
7
7
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
8
8
  import { Drawer, Menu } from 'antd';
@@ -23,10 +23,15 @@ var Burger = /*#__PURE__*/memo(function (_ref) {
23
23
  _ref$headerHeight = _ref.headerHeight,
24
24
  headerHeight = _ref$headerHeight === void 0 ? 64 : _ref$headerHeight,
25
25
  onClick = _ref.onClick,
26
- _ref$icon = _ref.icon,
27
- icon = _ref$icon === void 0 ? {} : _ref$icon,
26
+ iconProps = _ref.iconProps,
27
+ rootClassName = _ref.rootClassName,
28
+ fullscreen = _ref.fullscreen,
29
+ drawerProps = _ref.drawerProps,
28
30
  rest = _objectWithoutProperties(_ref, _excluded);
29
- var _useStyles = useStyles(headerHeight),
31
+ var _useStyles = useStyles({
32
+ fullscreen: fullscreen,
33
+ headerHeight: headerHeight
34
+ }),
30
35
  cx = _useStyles.cx,
31
36
  styles = _useStyles.styles;
32
37
  return /*#__PURE__*/_jsxs(Center, _objectSpread(_objectSpread({
@@ -38,12 +43,14 @@ var Burger = /*#__PURE__*/memo(function (_ref) {
38
43
  children: [/*#__PURE__*/_jsx(ActionIcon, _objectSpread({
39
44
  icon: opened ? X : MenuIcon,
40
45
  size: "site"
41
- }, icon)), /*#__PURE__*/_jsxs(Drawer, {
42
- className: styles.drawer,
46
+ }, iconProps)), /*#__PURE__*/_jsxs(Drawer, _objectSpread(_objectSpread({
43
47
  closeIcon: undefined,
44
48
  open: opened,
45
49
  placement: 'left',
46
- rootClassName: styles.drawerRoot,
50
+ width: '100vw'
51
+ }, drawerProps), {}, {
52
+ className: styles.drawer,
53
+ rootClassName: cx(styles.drawerRoot, rootClassName),
47
54
  styles: {
48
55
  body: {
49
56
  padding: 0
@@ -52,7 +59,6 @@ var Burger = /*#__PURE__*/memo(function (_ref) {
52
59
  display: 'none'
53
60
  }
54
61
  },
55
- width: '100vw',
56
62
  children: [/*#__PURE__*/_jsx(Menu, {
57
63
  className: styles.menu,
58
64
  items: items,
@@ -63,7 +69,7 @@ var Burger = /*#__PURE__*/memo(function (_ref) {
63
69
  }), /*#__PURE__*/_jsx("div", {
64
70
  className: styles.fillRect
65
71
  })]
66
- })]
72
+ }))]
67
73
  }));
68
74
  });
69
75
  export default Burger;
@@ -1,4 +1,7 @@
1
- export declare const useStyles: (props?: number | undefined) => import("antd-style").ReturnStyles<{
1
+ export declare const useStyles: (props?: {
2
+ fullscreen?: boolean | undefined;
3
+ headerHeight: number;
4
+ } | undefined) => import("antd-style").ReturnStyles<{
2
5
  container: import("antd-style").SerializedStyles;
3
6
  drawer: import("antd-style").SerializedStyles;
4
7
  drawerRoot: import("antd-style").SerializedStyles;
@@ -2,16 +2,18 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
2
2
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
3
3
  import { createStyles } from 'antd-style';
4
4
  import { rgba } from 'polished';
5
- export var useStyles = createStyles(function (_ref, headerHeight) {
5
+ export var useStyles = createStyles(function (_ref, _ref2) {
6
6
  var token = _ref.token,
7
7
  css = _ref.css,
8
8
  stylish = _ref.stylish,
9
9
  prefixCls = _ref.prefixCls;
10
+ var fullscreen = _ref2.fullscreen,
11
+ headerHeight = _ref2.headerHeight;
10
12
  return {
11
13
  container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n cursor: pointer;\n width: ", "px;\n height: ", "px;\n border-radius: ", "px;\n "])), token.controlHeight, token.controlHeight, token.borderRadius),
12
14
  drawer: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &.", "-drawer-content {\n background: transparent;\n }\n\n .", "-drawer-body {\n display: flex;\n flex-direction: column;\n }\n "])), prefixCls, prefixCls),
13
- drawerRoot: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n inset-block-start: ", "px;\n\n :focus-visible {\n outline: none;\n }\n\n .", "-drawer {\n &-mask {\n ", ";\n background-color: ", ";\n }\n\n &-content-wrapper {\n box-shadow: none;\n }\n }\n "])), headerHeight + 1, prefixCls, stylish.blur, rgba(token.colorBgLayout, 0.5)),
15
+ drawerRoot: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n inset-block-start: ", "px;\n\n :focus-visible {\n outline: none;\n }\n\n .", "-drawer {\n &-mask {\n ", ";\n background-color: ", ";\n }\n\n &-content-wrapper {\n box-shadow: none;\n }\n }\n "])), fullscreen ? 0 : headerHeight + 1, prefixCls, stylish.blur, rgba(token.colorBgLayout, 0.5)),
14
16
  fillRect: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n flex: 1;\n width: 100%;\n border-block-start: none;\n "]))),
15
- menu: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n background: transparent;\n border-inline-end: transparent !important;\n\n > .", "-menu-item-only-child, .", "-menu-submenu-title {\n width: 100%;\n margin: 0 !important;\n border-block-start: none;\n border-radius: 0;\n\n &:active {\n color: ", ";\n background-color: ", ";\n }\n }\n\n .", "-menu-item-only-child:first-child {\n border-block-start: none;\n }\n\n .", "-menu-submenu-title[aria-expanded='true'] {\n a {\n font-weight: 600;\n color: ", " !important;\n }\n }\n\n .", "-menu-item-group-title {\n padding-block: 8px;\n\n font-size: 12px;\n font-weight: 500;\n line-height: 1;\n text-overflow: ellipsis;\n text-transform: uppercase;\n white-space: nowrap;\n\n background: ", ";\n }\n\n .", "-menu-item {\n width: calc(100% - 16px) !important;\n margin: 8px !important;\n border-radius: ", "px;\n\n &:hover,\n &:active {\n color: ", " !important;\n background: ", " !important;\n }\n }\n\n .", "-menu-item-active {\n width: calc(100% - 16px) !important;\n margin: 8px !important;\n background: ", ";\n border-radius: ", "px;\n }\n\n .", "-menu-item-selected {\n font-weight: 600;\n color: ", ";\n background: ", ";\n\n &:hover,\n &:active {\n color: ", " !important;\n background: ", " !important;\n }\n }\n "])), prefixCls, prefixCls, token.colorText, token.colorFill, prefixCls, prefixCls, token.colorText, prefixCls, token.colorFillSecondary, prefixCls, token.borderRadius, token.colorText, token.colorFillSecondary, prefixCls, token.colorFillSecondary, token.borderRadius, prefixCls, token.colorBgLayout, token.colorText, token.colorBgLayout, token.colorText)
17
+ menu: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding-block-start: ", "px;\n background: transparent;\n border-inline-end: transparent !important;\n\n > .", "-menu-item-only-child, .", "-menu-submenu-title {\n width: 100%;\n margin: 0 !important;\n border-block-start: none;\n border-radius: 0;\n\n &:active {\n color: ", ";\n background-color: ", ";\n }\n }\n\n .", "-menu-item-only-child:first-child {\n border-block-start: none;\n }\n\n .", "-menu-submenu-title[aria-expanded='true'] {\n a {\n font-weight: 600;\n color: ", " !important;\n }\n }\n\n .", "-menu-item-group-title {\n padding-block: 8px;\n\n font-size: 12px;\n font-weight: 500;\n line-height: 1;\n text-overflow: ellipsis;\n text-transform: uppercase;\n white-space: nowrap;\n\n background: ", ";\n }\n\n .", "-menu-item {\n width: calc(100% - 16px) !important;\n margin: 8px !important;\n border-radius: ", "px;\n\n &:hover,\n &:active {\n color: ", " !important;\n background: ", " !important;\n }\n }\n\n .", "-menu-item-active {\n width: calc(100% - 16px) !important;\n margin: 8px !important;\n background: ", ";\n border-radius: ", "px;\n }\n\n .", "-menu-item-selected {\n font-weight: 600;\n color: ", ";\n background: ", ";\n\n &:hover,\n &:active {\n color: ", " !important;\n background: ", " !important;\n }\n }\n "])), fullscreen ? headerHeight : 0, prefixCls, prefixCls, token.colorText, token.colorFill, prefixCls, prefixCls, token.colorText, prefixCls, token.colorFillSecondary, prefixCls, token.borderRadius, token.colorText, token.colorFillSecondary, prefixCls, token.colorFillSecondary, token.borderRadius, prefixCls, token.colorBgLayout, token.colorText, token.colorBgLayout, token.colorText)
16
18
  };
17
19
  });
@@ -83,11 +83,12 @@ export interface DraggablePanelProps extends DivProps {
83
83
  * @default true
84
84
  */
85
85
  resize?: RndProps['enableResizing'];
86
+ showHandlerWhenUnexpand?: boolean;
86
87
  /**
87
88
  * @description Whether the panel handler should be shown when unexpanded or not
88
89
  * @default true
89
90
  */
90
- showHandlerWhenUnexpand?: boolean;
91
+ showHandlerWideArea?: boolean;
91
92
  /**
92
93
  * @description The size of the panel
93
94
  */
@@ -31,6 +31,8 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
31
31
  placement = _ref$placement === void 0 ? 'right' : _ref$placement,
32
32
  resize = _ref.resize,
33
33
  style = _ref.style,
34
+ _ref$showHandlerWideA = _ref.showHandlerWideArea,
35
+ showHandlerWideArea = _ref$showHandlerWideA === void 0 ? true : _ref$showHandlerWideA,
34
36
  size = _ref.size,
35
37
  customizeDefaultSize = _ref.defaultSize,
36
38
  minWidth = _ref.minWidth,
@@ -64,7 +66,10 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
64
66
  if (direction === 'rtl' && ['left', 'right'].includes(placement)) {
65
67
  internalPlacement = internalPlacement === 'left' ? 'right' : 'left';
66
68
  }
67
- var _useStyles = useStyles(headerHeight),
69
+ var _useStyles = useStyles({
70
+ headerHeight: headerHeight,
71
+ showHandlerWideArea: showHandlerWideArea
72
+ }),
68
73
  styles = _useStyles.styles,
69
74
  cx = _useStyles.cx;
70
75
  var _useControlledState = useControlledState(defaultExpand, {
@@ -1,4 +1,7 @@
1
- export declare const useStyles: (props?: number | undefined) => import("antd-style").ReturnStyles<{
1
+ export declare const useStyles: (props?: {
2
+ headerHeight: number;
3
+ showHandlerWideArea: boolean;
4
+ } | undefined) => import("antd-style").ReturnStyles<{
2
5
  bottomFloat: string;
3
6
  bottomHandle: string;
4
7
  container: string;
@@ -5,28 +5,30 @@ var offset = 16;
5
5
  var toggleLength = 40;
6
6
  var toggleShort = 16;
7
7
  var prefix = 'draggable-panel';
8
- export var useStyles = createStyles(function (_ref, headerHeight) {
8
+ export var useStyles = createStyles(function (_ref, _ref2) {
9
9
  var token = _ref.token;
10
- var commonHandle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n\n &::before {\n content: '';\n position: absolute;\n z-index: 50;\n transition: all 0.2s ", ";\n }\n\n &:hover,\n &:active {\n &::before {\n background: ", " !important;\n }\n }\n "])), token.motionEaseOut, token.colorPrimary);
11
- var commonToggle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n pointer-events: none;\n\n position: absolute;\n z-index: 101;\n\n opacity: 0;\n\n transition: all 0.2s ", ";\n\n &:hover {\n opacity: 1 !important;\n }\n\n &:active {\n opacity: 1 !important;\n }\n\n > div {\n pointer-events: all;\n cursor: pointer;\n\n position: absolute;\n\n color: ", ";\n\n background: ", ";\n border-color: ", ";\n border-style: solid;\n border-width: 1px;\n border-radius: 4px;\n\n transition: all 0.2s ", ";\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n\n &:active {\n color: ", ";\n background: ", ";\n }\n }\n "])), token.motionEaseOut, token.colorTextTertiary, token.colorFillTertiary, token.colorBorderSecondary, token.motionEaseOut, token.colorTextSecondary, token.colorFillSecondary, token.colorText, token.colorFill);
12
- var float = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 200;\n "])));
10
+ var headerHeight = _ref2.headerHeight,
11
+ showHandlerWideArea = _ref2.showHandlerWideArea;
12
+ var commonHandle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n\n &::before {\n content: '';\n position: absolute;\n z-index: 50;\n transition: all 0.2s ", ";\n }\n\n &:hover,\n &:active {\n &::before {\n background: ", " !important;\n }\n }\n "])), token.motionEaseOut, token.colorPrimary);
13
+ var commonToggle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n pointer-events: ", ";\n\n position: absolute;\n z-index: 101;\n\n opacity: 0;\n\n transition: all 0.2s ", ";\n\n &:hover {\n opacity: 1 !important;\n }\n\n &:active {\n opacity: 1 !important;\n }\n\n > div {\n pointer-events: all;\n cursor: pointer;\n\n position: absolute;\n\n color: ", ";\n\n background: ", ";\n border-color: ", ";\n border-style: solid;\n border-width: 1px;\n border-radius: 4px;\n\n transition: all 0.2s ", ";\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n\n &:active {\n color: ", ";\n background: ", ";\n }\n }\n "])), showHandlerWideArea ? 'all' : 'none', token.motionEaseOut, token.colorTextTertiary, token.colorFillTertiary, token.colorBorderSecondary, token.motionEaseOut, token.colorTextSecondary, token.colorFillSecondary, token.colorText, token.colorFill);
14
+ var float = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 200;\n "])));
13
15
  return {
14
- bottomFloat: cx(float, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n inset-block-end: 0;\n inset-inline: 0 0;\n width: 100%;\n "])))),
15
- bottomHandle: cx("".concat(prefix, "-bottom-handle"), css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n ", ";\n\n &::before {\n inset-block-end: 50%;\n width: 100%;\n height: 2px;\n }\n "])), commonHandle)),
16
- container: cx(prefix, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n flex-shrink: 0;\n border: 0 solid ", ";\n\n &:hover {\n .", "-toggle {\n opacity: 1;\n }\n }\n "])), token.colorBorderSecondary, prefix)),
17
- fixed: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n position: relative;\n "]))),
18
- fullscreen: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n position: absolute;\n inset-block: ", "px 0;\n inset-inline: 0;\n\n width: 100%;\n height: calc(100% - ", "px);\n\n background: ", ";\n "])), headerHeight, headerHeight, token.colorBgLayout),
19
- handlerIcon: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ", ";\n "])), token.motionEaseOut),
20
- leftFloat: cx(float, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n inset-block: ", "px 0;\n inset-inline-start: 0;\n height: calc(100% - ", "px);\n "])), headerHeight, headerHeight)),
21
- leftHandle: cx(css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n ", ";\n\n &::before {\n inset-inline-start: 50%;\n width: 2px;\n height: 100%;\n }\n "])), commonHandle), "".concat(prefix, "-left-handle")),
22
- panel: cx("".concat(prefix, "-fixed"), css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n overflow: hidden;\n transition: all 0.2s ", ";\n "])), token.motionEaseOut)),
23
- rightFloat: cx(float, css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n inset-block: ", "px 0;\n inset-inline-end: 0;\n height: calc(100% - ", "px);\n "])), headerHeight, headerHeight)),
24
- rightHandle: cx(css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n ", ";\n &::before {\n inset-inline-end: 50%;\n width: 2px;\n height: 100%;\n }\n "])), commonHandle), "".concat(prefix, "-right-handle")),
25
- toggleBottom: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-bottom"), commonToggle, css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n inset-block-end: -", "px;\n width: 100%;\n height: ", "px;\n\n > div {\n inset-inline-start: 50%;\n\n width: ", "px;\n height: 16px;\n margin-inline-start: -20px;\n\n border-radius: 0 0 4px 4px;\n }\n "])), offset, toggleShort, toggleLength)),
26
- toggleLeft: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-left"), commonToggle, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n inset-inline-start: -", "px;\n width: ", "px;\n height: 100%;\n\n > div {\n inset-block-start: 50%;\n\n width: ", "px;\n height: ", "px;\n margin-block-start: -20px;\n\n border-radius: 4px 0 0 4px;\n }\n "])), offset, toggleShort, toggleShort, toggleLength)),
27
- toggleRight: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-right"), commonToggle, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n inset-inline-end: -", "px;\n width: ", "px;\n height: 100%;\n\n > div {\n inset-block-start: 50%;\n\n width: ", "px;\n height: ", "px;\n margin-block-start: -20px;\n\n border-radius: 0 4px 4px 0;\n }\n "])), offset, toggleShort, toggleShort, toggleLength)),
28
- toggleTop: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-top"), commonToggle, css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n inset-block-start: -", "px;\n width: 100%;\n height: ", "px;\n\n > div {\n inset-inline-start: 50%;\n\n width: ", "px;\n height: ", "px;\n margin-inline-start: -20px;\n\n border-radius: 4px 4px 0 0;\n }\n "])), offset, toggleShort, toggleLength, toggleShort)),
29
- topFloat: cx(float, css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n inset-block-start: ", "px;\n inset-inline: 0 0;\n width: 100%;\n "])), headerHeight)),
30
- topHandle: cx("".concat(prefix, "-top-handle"), css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n ", ";\n\n &::before {\n inset-block-start: 50%;\n width: 100%;\n height: 2px;\n }\n "])), commonHandle))
16
+ bottomFloat: cx(float, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n inset-block-end: 0;\n inset-inline: 0 0;\n width: 100%;\n "])))),
17
+ bottomHandle: cx("".concat(prefix, "-bottom-handle"), css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n ", ";\n\n &::before {\n inset-block-end: 50%;\n width: 100%;\n height: 2px;\n }\n "])), commonHandle)),
18
+ container: cx(prefix, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n flex-shrink: 0;\n border: 0 solid ", ";\n\n &:hover {\n .", "-toggle {\n opacity: 1;\n }\n }\n "])), token.colorBorderSecondary, prefix)),
19
+ fixed: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n position: relative;\n "]))),
20
+ fullscreen: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n position: absolute;\n inset-block: ", "px 0;\n inset-inline: 0;\n\n width: 100%;\n height: calc(100% - ", "px);\n\n background: ", ";\n "])), headerHeight, headerHeight, token.colorBgLayout),
21
+ handlerIcon: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ", ";\n "])), token.motionEaseOut),
22
+ leftFloat: cx(float, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n inset-block: ", "px 0;\n inset-inline-start: 0;\n height: calc(100% - ", "px);\n "])), headerHeight, headerHeight)),
23
+ leftHandle: cx(css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n ", ";\n\n &::before {\n inset-inline-start: 50%;\n width: 2px;\n height: 100%;\n }\n "])), commonHandle), "".concat(prefix, "-left-handle")),
24
+ panel: cx("".concat(prefix, "-fixed"), css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n overflow: hidden;\n transition: all 0.2s ", ";\n "])), token.motionEaseOut)),
25
+ rightFloat: cx(float, css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n inset-block: ", "px 0;\n inset-inline-end: 0;\n height: calc(100% - ", "px);\n "])), headerHeight, headerHeight)),
26
+ rightHandle: cx(css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n ", ";\n &::before {\n inset-inline-end: 50%;\n width: 2px;\n height: 100%;\n }\n "])), commonHandle), "".concat(prefix, "-right-handle")),
27
+ toggleBottom: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-bottom"), commonToggle, css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n inset-block-end: -", "px;\n width: 100%;\n height: ", "px;\n\n > div {\n inset-inline-start: 50%;\n\n width: ", "px;\n height: 16px;\n margin-inline-start: -20px;\n\n border-radius: 0 0 4px 4px;\n }\n "])), offset, toggleShort, toggleLength)),
28
+ toggleLeft: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-left"), commonToggle, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n inset-inline-start: -", "px;\n width: ", "px;\n height: 100%;\n\n > div {\n inset-block-start: 50%;\n\n width: ", "px;\n height: ", "px;\n margin-block-start: -20px;\n\n border-radius: 4px 0 0 4px;\n }\n "])), offset, toggleShort, toggleShort, toggleLength)),
29
+ toggleRight: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-right"), commonToggle, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n inset-inline-end: -", "px;\n width: ", "px;\n height: 100%;\n\n > div {\n inset-block-start: 50%;\n\n width: ", "px;\n height: ", "px;\n margin-block-start: -20px;\n\n border-radius: 0 4px 4px 0;\n }\n "])), offset, toggleShort, toggleShort, toggleLength)),
30
+ toggleTop: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-top"), commonToggle, css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n inset-block-start: -", "px;\n width: 100%;\n height: ", "px;\n\n > div {\n inset-inline-start: 50%;\n\n width: ", "px;\n height: ", "px;\n margin-inline-start: -20px;\n\n border-radius: 4px 4px 0 0;\n }\n "])), offset, toggleShort, toggleLength, toggleShort)),
31
+ topFloat: cx(float, css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n inset-block-start: ", "px;\n inset-inline: 0 0;\n width: 100%;\n "])), headerHeight)),
32
+ topHandle: cx("".concat(prefix, "-top-handle"), css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n ", ";\n\n &::before {\n inset-block-start: 50%;\n width: 100%;\n height: 2px;\n }\n "])), commonHandle))
31
33
  };
32
34
  });
@@ -1,22 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { TabsProps } from 'antd';
3
- export interface TabsNavProps {
4
- /**
5
- * @description The key of the active tab
6
- */
7
- activeKey?: TabsProps['activeKey'];
8
- /**
9
- * @description Additional className to apply to the component
10
- */
11
- className?: string;
12
- /**
13
- * @description An array of objects representing the tabs to be rendered
14
- */
15
- items?: TabsProps['items'];
16
- /**
17
- * @description Callback function that is triggered when a tab is changed
18
- */
19
- onChange?: (activeKey: string) => void;
3
+ export interface TabsNavProps extends TabsProps {
20
4
  variant?: 'default' | 'compact';
21
5
  }
22
6
  declare const TabsNav: import("react").NamedExoticComponent<TabsNavProps>;
@@ -1,5 +1,5 @@
1
1
  export declare const FALLBACK_LANG = "txt";
2
- export declare const useHighlight: (text: string, lang: string, isDarkMode: boolean) => import("swr").SWRResponse<string, any, {
2
+ export declare const useHighlight: (text: string, lang: string, isDarkMode: boolean) => import("swr/dist/_internal").SWRResponse<string, any, {
3
3
  revalidateOnFocus: false;
4
4
  }>;
5
5
  export { default as languageMap } from './languageMap';
package/es/mdx/Callout.js CHANGED
@@ -65,7 +65,7 @@ var Callout = function Callout(_ref2) {
65
65
  fontSize: '1.2em'
66
66
  },
67
67
  style: {
68
- marginBlock: '0.2em'
68
+ marginBlock: '0.25em'
69
69
  }
70
70
  }), /*#__PURE__*/_jsx("div", {
71
71
  className: cx(styles.content, type === 'info' && styles.underlineAnchor),
package/es/mdx/Steps.js CHANGED
@@ -8,7 +8,7 @@ var useStyles = createStyles(function (_ref) {
8
8
  var css = _ref.css,
9
9
  token = _ref.token;
10
10
  return {
11
- container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n --lobe-markdown-header-multiple: 0.5;\n --lobe-markdown-margin-multiple: 1;\n\n position: relative;\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n padding-inline-start: 2.5em;\n\n &::before {\n content: '';\n\n position: absolute;\n inset-block-start: 0.25em;\n inset-inline-start: 0.9em;\n\n display: block;\n\n width: 1px;\n height: calc(100% - 0.5em);\n\n background: ", ";\n }\n\n h3 {\n counter-increment: step;\n\n &::before {\n content: counter(step);\n\n position: absolute;\n z-index: 1;\n inset-inline-start: 0;\n\n display: inline-block;\n\n width: 1.8em;\n height: 1.8em;\n margin-block-start: 0.3em;\n\n font-size: 0.8em;\n font-weight: 500;\n line-height: 1.8em;\n color: ", ";\n text-align: center;\n\n background: ", ";\n border-radius: 9999px;\n box-shadow: 0 0 0 2px ", ";\n }\n\n &:not(:first-child) {\n margin-block-start: 2em;\n }\n }\n "])), token.colorBorderSecondary, token.colorTextSecondary, token.colorBgElevated, token.colorBgLayout)
11
+ container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n --lobe-markdown-header-multiple: 0.5;\n --lobe-markdown-margin-multiple: 1;\n\n position: relative;\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n padding-inline-start: 2.5em;\n\n &::before {\n content: '';\n\n position: absolute;\n inset-block-start: 0.25em;\n inset-inline-start: 0.9em;\n\n display: block;\n\n width: 1px;\n height: calc(100% - 0.5em);\n\n background: ", ";\n }\n\n h3 {\n counter-increment: step;\n\n &::before {\n content: counter(step);\n\n position: absolute;\n z-index: 1;\n inset-inline-start: 0;\n\n display: inline-block;\n\n width: 1.8em;\n height: 1.8em;\n margin-block-start: -0.05em;\n\n font-size: 0.8em;\n font-weight: 500;\n line-height: 1.8em;\n color: ", ";\n text-align: center;\n\n background: ", ";\n border-radius: 9999px;\n box-shadow: 0 0 0 2px ", ";\n }\n\n &:not(:first-child) {\n margin-block-start: 2em;\n }\n }\n "])), token.colorBorderSecondary, token.colorTextSecondary, token.colorBgElevated, token.colorBgLayout)
12
12
  };
13
13
  });
14
14
  var Steps = function Steps(_ref2) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobehub/ui",
3
- "version": "1.135.3",
3
+ "version": "1.136.0",
4
4
  "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
5
5
  "keywords": [
6
6
  "lobehub",