@lobehub/ui 1.168.21 → 1.169.1

package/es/Draw/index.d.ts

@@ -0,0 +1,20 @@
+import { type DrawerProps as AntdDrawerProps } from 'antd';
+import { CSSProperties, ReactNode } from 'react';
+export interface DrawProps extends Omit<AntdDrawerProps, 'styles' | 'classNames'> {
+    classNames?: AntdDrawerProps['classNames'] & {
+        bodyContent?: string;
+        extra?: string;
+        title?: string;
+    };
+    containerMaxWidth?: number;
+    noHeader?: boolean;
+    sidebar?: ReactNode;
+    sidebarWidth?: number;
+    styles?: AntdDrawerProps['styles'] & {
+        bodyContent?: CSSProperties;
+        extra?: CSSProperties;
+        title?: CSSProperties;
+    };
+}
+declare const Draw: import("react").NamedExoticComponent<DrawProps>;
+export default Draw;

package/es/Draw/index.js

@@ -0,0 +1,166 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["onClose", "containerMaxWidth", "classNames", "title", "placement", "styles", "children", "height", "width", "extra", "noHeader", "sidebarWidth", "sidebar"];
+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; }
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { Drawer as AntdDraw } from 'antd';
+import { useTheme } from 'antd-style';
+import { XIcon } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import ActionIcon from "../ActionIcon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var Draw = /*#__PURE__*/memo(function (_ref) {
+  var onClose = _ref.onClose,
+    _ref$containerMaxWidt = _ref.containerMaxWidth,
+    containerMaxWidth = _ref$containerMaxWidt === void 0 ? 1024 : _ref$containerMaxWidt,
+    classNames = _ref.classNames,
+    title = _ref.title,
+    placement = _ref.placement,
+    styles = _ref.styles,
+    children = _ref.children,
+    height = _ref.height,
+    width = _ref.width,
+    extra = _ref.extra,
+    noHeader = _ref.noHeader,
+    _ref$sidebarWidth = _ref.sidebarWidth,
+    sidebarWidth = _ref$sidebarWidth === void 0 ? 280 : _ref$sidebarWidth,
+    sidebar = _ref.sidebar,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var headerBorder = useMemo(function () {
+    if (height === '100%' || width === '100%' || height === '100vh' || width === '100vw') return {};
+    switch (placement) {
+      case 'top':
+        {
+          return {
+            borderBottom: "1px solid ".concat(theme.colorBorder)
+          };
+        }
+      case 'bottom':
+        {
+          return {
+            borderTop: "1px solid ".concat(theme.colorBorder)
+          };
+        }
+      case 'left':
+        {
+          return {
+            borderRight: "1px solid ".concat(theme.colorBorder)
+          };
+        }
+      case 'right':
+        {
+          return {
+            borderLeft: "1px solid ".concat(theme.colorBorder)
+          };
+        }
+      default:
+        {
+          return {};
+        }
+    }
+  }, [placement, height, width, theme.colorBorder]);
+  var extraNode = /*#__PURE__*/_jsxs(Flexbox, {
+    align: 'center',
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.extra,
+    gap: 4,
+    horizontal: true,
+    justify: 'flex-end',
+    style: _objectSpread({
+      position: 'absolute',
+      right: 4,
+      top: 4
+    }, styles === null || styles === void 0 ? void 0 : styles.extra),
+    children: [extra, /*#__PURE__*/_jsx(ActionIcon, {
+      icon: XIcon,
+      onClick: onClose,
+      size: 'site'
+    })]
+  });
+  return /*#__PURE__*/_jsx(AntdDraw, _objectSpread(_objectSpread({
+    classNames: classNames,
+    closable: false,
+    extra: noHeader ? undefined : extraNode,
+    height: height,
+    keyboard: true,
+    onClose: onClose,
+    placement: placement,
+    styles: _objectSpread(_objectSpread({}, styles), {}, {
+      body: _objectSpread({
+        background: 'transparent',
+        padding: '0 4px'
+      }, styles === null || styles === void 0 ? void 0 : styles.body),
+      content: _objectSpread({
+        background: sidebar ? "linear-gradient(to right, ".concat(theme.colorBgContainer, " 49.9%, ").concat(theme.colorBgLayout, " 50%)") : theme.colorBgContainer
+      }, styles === null || styles === void 0 ? void 0 : styles.content),
+      header: _objectSpread({
+        background: 'transparent',
+        display: noHeader ? 'none' : undefined,
+        padding: 4
+      }, styles === null || styles === void 0 ? void 0 : styles.header),
+      wrapper: _objectSpread(_objectSpread({
+        background: theme.colorBgContainer
+      }, headerBorder), styles === null || styles === void 0 ? void 0 : styles.wrapper)
+    }),
+    title: /*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.title,
+      horizontal: true,
+      justify: 'flex-start',
+      paddingBlock: 8,
+      paddingInline: 16,
+      style: _objectSpread({
+        justifySelf: 'center',
+        maxWidth: containerMaxWidth,
+        width: '100%'
+      }, styles === null || styles === void 0 ? void 0 : styles.title),
+      children: title
+    }),
+    width: width
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsxs(Flexbox, {
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.bodyContent,
+      height: '100%',
+      horizontal: !!sidebar,
+      paddingBlock: sidebar ? undefined : 12,
+      paddingInline: sidebar ? undefined : 16,
+      style: _objectSpread({
+        justifySelf: 'center',
+        maxWidth: containerMaxWidth,
+        width: '100%'
+      }, styles === null || styles === void 0 ? void 0 : styles.bodyContent),
+      children: [noHeader && extraNode, sidebar ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Flexbox, {
+          paddingBlock: 12,
+          paddingInline: 16,
+          style: {
+            background: theme.colorBgContainer,
+            borderRight: "1px solid ".concat(theme.colorBorderSecondary),
+            height: '100%'
+          },
+          width: sidebarWidth,
+          children: sidebar
+        }), /*#__PURE__*/_jsx(Flexbox, {
+          flex: 1,
+          paddingBlock: 12,
+          paddingInline: 16,
+          style: {
+            background: theme.colorBgLayout,
+            height: '100%'
+          },
+          children: children
+        })]
+      }) : children]
+    })
+  }));
+});
+export default Draw;

package/es/Hotkey/index.js

@@ -91,7 +91,7 @@ var mappingKey = function mappingKey(isAppleDevice) {
     icon: ArrowRightToLineIcon
   }) : 'Tab'), KeyMapEnum.Up, /*#__PURE__*/_jsx(Icon, {
     icon: ArrowUpIcon
-  })), KeyMapEnum.Comma, ','), KeyMapEnum.Period, '.'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, KeyMapEnum.Slash, '/'), KeyMapEnum.Semicolon, ';'), KeyMapEnum.Quote, "'"), KeyMapEnum.Backquote, '`'), KeyMapEnum.Backslash, '\\'), KeyMapEnum.BracketLeft, '['), KeyMapEnum.BracketRight, ']'), KeyMapEnum.Minus, '-'), KeyMapEnum.Equal, '=');
+  })), KeyMapEnum.Comma, ','), KeyMapEnum.Period, '.'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, KeyMapEnum.Slash, '?'), KeyMapEnum.Semicolon, ';'), KeyMapEnum.Quote, "'"), KeyMapEnum.Backquote, '`'), KeyMapEnum.Backslash, '\\'), KeyMapEnum.BracketLeft, '['), KeyMapEnum.BracketRight, ']'), KeyMapEnum.Minus, '-'), KeyMapEnum.Equal, '+');
 };
 var Hotkey = /*#__PURE__*/memo(function (_ref2) {
   var _ref2$variant = _ref2.variant,
@@ -127,7 +127,7 @@ var Hotkey = /*#__PURE__*/memo(function (_ref2) {
   return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
     align: 'center',
     className: cx(s, className),
-    gap: 2,
+    gap: isPure ? 6 : 2,
     horizontal: true,
     style: _objectSpread({
       visibility: visibility

package/es/Hotkey/type.d.ts

@@ -19,6 +19,8 @@ export declare const KeyMapEnum: {
     readonly Minus: "minus";
     readonly Mod: "mod";
     readonly Period: "period";
+    readonly Plus: "equal";
+    readonly QuestionMark: "slash";
     readonly Quote: "quote";
     readonly Right: "right";
     readonly RightClick: "right-click";

package/es/Hotkey/type.js

@@ -29,6 +29,10 @@ export var KeyMapEnum = {
   // Command on Mac, Ctrl on Win
   Period: 'period',
   // .
+  Plus: 'equal',
+  // +
+  QuestionMark: 'slash',
+  // ?
   Quote: 'quote',
   // '
   Right: 'right',

package/es/HotkeyInput/index.js

@@ -263,7 +263,7 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
         style: {
           pointerEvents: 'none'
         }
-      }), allowReset && hotkeyValue && hotkeyValue !== resetValue && !disabled && /*#__PURE__*/_jsx(ActionIcon, {
+      }), !isFocused && allowReset && hotkeyValue && hotkeyValue !== resetValue && !disabled && /*#__PURE__*/_jsx(ActionIcon, {
         active: true,
         icon: Undo2Icon,
         onClick: handleReset,

package/es/components.d.ts

@@ -13,6 +13,7 @@ export { default as DraggablePanelBody, type DraggablePanelBodyProps, } from './
 export { default as DraggablePanelContainer, type DraggablePanelContainerProps, } from './DraggablePanel/components/DraggablePanelContainer';
 export { default as DraggablePanelFooter, type DraggablePanelFooterProps, } from './DraggablePanel/components/DraggablePanelFooter';
 export { default as DraggablePanelHeader, type DraggablePanelHeaderProps, } from './DraggablePanel/components/DraggablePanelHeader';
+export { default as Draw, type DrawProps } from './Draw';
 export { default as EditableText, type EditableTextProps } from './EditableText';
 export { default as EmojiPicker, type EmojiPickerProps } from './EmojiPicker';
 export { default as EmptyCard, type EmptyCardProps } from './EmptyCard';

package/es/components.js

@@ -13,6 +13,7 @@ export { default as DraggablePanelBody } from "./DraggablePanel/components/Dragg
 export { default as DraggablePanelContainer } from "./DraggablePanel/components/DraggablePanelContainer";
 export { default as DraggablePanelFooter } from "./DraggablePanel/components/DraggablePanelFooter";
 export { default as DraggablePanelHeader } from "./DraggablePanel/components/DraggablePanelHeader";
+export { default as Draw } from "./Draw";
 export { default as EditableText } from "./EditableText";
 export { default as EmojiPicker } from "./EmojiPicker";
 export { default as EmptyCard } from "./EmptyCard";

package/es/storybook/StoryBook/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { DivProps } from "../../types";
-export interface StoryBookProps extends DivProps {
+import { FlexboxProps } from 'react-layout-kit';
+export interface StoryBookProps extends FlexboxProps {
     /**
      * @description The Leva store instance to be used by the component
      * @type levaStore
@@ -11,6 +11,6 @@ export interface StoryBookProps extends DivProps {
      */
     noPadding?: boolean;
 }
-export declare const StoryBook: import("react").NamedExoticComponent<StoryBookProps>;
+export declare const StoryBook: import("react").ForwardRefExoticComponent<StoryBookProps & import("react").RefAttributes<HTMLDivElement>>;
 export default StoryBook;
 export { useControls, useCreateStore } from 'leva';

package/es/storybook/StoryBook/index.js

@@ -11,13 +11,13 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { useResponsive } from 'antd-style';
 import { LevaPanel } from 'leva';
-import { memo } from 'react';
+import { forwardRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import DraggablePanel from "../../DraggablePanel";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var StoryBook = /*#__PURE__*/memo(function (_ref) {
+export var StoryBook = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var levaStore = _ref.levaStore,
     noPadding = _ref.noPadding,
     className = _ref.className,
@@ -32,7 +32,8 @@ export var StoryBook = /*#__PURE__*/memo(function (_ref) {
     align: 'stretch',
     className: cx(styles.editor, className),
     horizontal: !mobile,
-    justify: 'stretch'
+    justify: 'stretch',
+    ref: ref
   }, rest), {}, {
     children: [/*#__PURE__*/_jsx(Flexbox, {
       align: 'center',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.168.21",
+  "version": "1.169.1",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",