@lobehub/ui 1.2.0 → 1.4.0

package/es/Markdown/CodeBlock.js

@@ -0,0 +1,27 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import Highlighter from "../Highlighter";
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    :not(:last-child) {\n      margin-bottom: 14px;\n    }\n  "])));
+});
+var Code = /*#__PURE__*/memo(function (props) {
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    theme = _useStyles.theme;
+  if (!props.children[0]) return null;
+  var _props$children$0$pro = props.children[0].props,
+    children = _props$children$0$pro.children,
+    className = _props$children$0$pro.className;
+  if (!children) return null;
+  return /*#__PURE__*/_jsx(Highlighter, {
+    theme: theme.appearance,
+    language: (className === null || className === void 0 ? void 0 : className.replace('language-', '')) || 'markdown',
+    className: styles,
+    children: children instanceof Array ? children[0] : children
+  });
+});
+export default Code;

package/es/Markdown/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface MarkdownProps {
+    /**
+     * @description The markdown content to be rendered
+     */
+    children: string;
+    /**
+     * @description The class name for the Markdown component
+     */
+    className?: string;
+}
+declare const Markdown: import("react").NamedExoticComponent<MarkdownProps>;
+export default Markdown;

package/es/Markdown/index.js

@@ -0,0 +1,28 @@
+import { Divider, Typography } from 'antd';
+import { memo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { useStyles } from "./style";
+import Code from "./Code";
+import CodeBlock from "./CodeBlock";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Markdown = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
+    className = _ref.className;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var components = {
+    pre: CodeBlock,
+    code: Code,
+    hr: Divider,
+    a: Typography.Link
+  };
+  return /*#__PURE__*/_jsx(Typography, {
+    children: /*#__PURE__*/_jsx(ReactMarkdown, {
+      className: cx(styles.container, className),
+      components: components,
+      children: children
+    })
+  });
+});
+export default Markdown;

package/es/Markdown/style.d.ts

@@ -0,0 +1,4 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    container: import("antd-style").SerializedStyles;
+    code: import("antd-style").SerializedStyles;
+}>;

package/es/Markdown/style.js

@@ -0,0 +1,12 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token,
+    isDarkMode = _ref.isDarkMode;
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      p {\n        margin: 20px auto;\n        line-height: 2;\n        word-wrap: break-word;\n        font-size: 14px;\n        color: ", ";\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      blockquote p {\n        color: ", ";\n      }\n\n      ol,\n      ul {\n        li {\n          line-height: 2;\n          display: list-item;\n        }\n      }\n    "])), token.colorText, token.colorTextDescription),
+    code: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding: 2px 4px;\n      font-family: ", " !important;\n      color: ", ";\n      border-radius: 4px;\n    "])), token.fontFamilyCode, isDarkMode ? token.cyan8 : token.pink7)
+  };
+});

package/es/MessageInput/index.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { ButtonProps } from 'antd';
+/**
+ * @title MessageInputProps
+ * @category Props
+ * @description MessageInput 组件的 Props
+ */
+export interface MessageInputProps {
+    /**
+     * @title 确认回调函数
+     * @description 用户点击确认按钮后的回调函数
+     * @param text - 用户输入的文本
+     */
+    onConfirm?: (text: string) => void;
+    /**
+     * @title 取消回调函数
+     * @description 用户点击取消按钮后的回调函数
+     */
+    onCancel?: () => void;
+    /**
+     * @title 默认值
+     * @description 输入框的默认值
+     */
+    defaultValue?: string;
+    /**
+     * @title 渲染按钮
+     * @description 自定义渲染底部按钮
+     * @param text - 用户输入的文本
+     */
+    renderButtons?: (text: string) => ButtonProps[];
+    height?: number;
+    className?: string;
+}
+declare const MessageInput: import("react").NamedExoticComponent<MessageInputProps>;
+export default MessageInput;

package/es/MessageInput/index.js

@@ -0,0 +1,63 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { Button, Input } from 'antd';
+import { cx } from 'antd-style';
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+/**
+ * @title MessageInputProps
+ * @category Props
+ * @description MessageInput 组件的 Props
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var MessageInput = /*#__PURE__*/memo(function (_ref) {
+  var onCancel = _ref.onCancel,
+    defaultValue = _ref.defaultValue,
+    onConfirm = _ref.onConfirm,
+    renderButtons = _ref.renderButtons,
+    height = _ref.height,
+    className = _ref.className;
+  var _useState = useState(defaultValue || ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    tempSystemRole = _useState2[0],
+    setRole = _useState2[1];
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    gap: 8,
+    children: [/*#__PURE__*/_jsx(Input.TextArea, {
+      value: tempSystemRole,
+      allowClear: true,
+      placeholder: '例如：你是一名擅长翻译的翻译官，请将用户所输入的英文都翻译为中文。',
+      style: {
+        height: height !== null && height !== void 0 ? height : 200
+      },
+      onChange: function onChange(e) {
+        setRole(e.target.value);
+      },
+      className: cx('nowheel', className)
+    }), /*#__PURE__*/_jsx(Flexbox, {
+      direction: 'horizontal-reverse',
+      gap: 8,
+      children: renderButtons ? renderButtons(tempSystemRole).map(function (buttonProps, index) {
+        return /*#__PURE__*/_jsx(Button, _objectSpread({}, buttonProps), index);
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          type: 'primary',
+          onClick: function onClick() {
+            onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(tempSystemRole);
+          },
+          children: "\u8BBE\u5B9A"
+        }), /*#__PURE__*/_jsx(Button, {
+          type: 'text',
+          onClick: onCancel,
+          children: "\u53D6\u6D88"
+        })]
+      })
+    })]
+  });
+});
+export default MessageInput;

package/es/SearchBar/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { InputProps } from 'antd';
+export declare type SearchBarProps = InputProps;
+declare const SearchBar: import("react").MemoExoticComponent<({ value, onChange, style, placeholder, ...props }: SearchBarProps) => import("react/jsx-runtime").JSX.Element>;
+export default SearchBar;

package/es/SearchBar/index.js

@@ -0,0 +1,27 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["value", "onChange", "style", "placeholder"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { SearchOutlined } from '@ant-design/icons';
+import { Input } from 'antd';
+import { memo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var SearchBar = /*#__PURE__*/memo(function (_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    style = _ref.style,
+    placeholder = _ref.placeholder,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Input, _objectSpread({
+    prefix: /*#__PURE__*/_jsx(SearchOutlined, {}),
+    allowClear: true,
+    value: value,
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'Search',
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      borderColor: 'transparent'
+    }),
+    onChange: onChange
+  }, props));
+});
+export default SearchBar;

package/es/SideNav/index.d.ts

@@ -1,18 +1,18 @@
 import { DivProps } from "../types";
-import React from 'react';
+import { ReactNode } from 'react';
 export interface SideNavProps extends DivProps {
     /**
      * @description Avatar to be displayed at the top of the sidenav
      */
-    avatar?: React.ReactNode;
+    avatar?: ReactNode;
     /**
      * @description Actions to be displayed below the avatar
      */
-    topActions?: React.ReactNode;
+    topActions?: ReactNode;
     /**
      * @description Actions to be displayed at the bottom of the sidenav
      */
-    bottomActions: React.ReactNode;
+    bottomActions: ReactNode;
 }
-declare const _default: React.NamedExoticComponent<SideNavProps>;
-export default _default;
+declare const SideNav: import("react").NamedExoticComponent<SideNavProps>;
+export default SideNav;

package/es/SideNav/index.js

@@ -1,28 +1,25 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _excluded = ["avatar", "topActions", "bottomActions"];
-var _templateObject;
+var _excluded = ["className", "avatar", "topActions", "bottomActions"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { Space } from 'antd';
-import React from 'react';
-import styled from 'styled-components';
+import { memo } from 'react';
+import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Layout = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: none;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n\n  width: 64px;\n  height: 100%;\n  min-height: 640px;\n  padding: 16px 0;\n\n  background: ", ";\n  border-right: 1px solid ", ";\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.colorBgContainer;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.colorBorder;
-});
-var SideNav = function SideNav(_ref3) {
-  var avatar = _ref3.avatar,
-    topActions = _ref3.topActions,
-    bottomActions = _ref3.bottomActions,
-    props = _objectWithoutProperties(_ref3, _excluded);
-  return /*#__PURE__*/_jsxs(Layout, _objectSpread(_objectSpread({}, props), {}, {
+var SideNav = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    avatar = _ref.avatar,
+    topActions = _ref.topActions,
+    bottomActions = _ref.bottomActions,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: cx(styles, className)
+  }, props), {}, {
     children: [/*#__PURE__*/_jsxs(Space, {
       size: 16,
       direction: "vertical",
@@ -40,5 +37,5 @@ var SideNav = function SideNav(_ref3) {
       children: bottomActions
     })]
   }));
-};
-export default /*#__PURE__*/React.memo(SideNav);
+});
+export default SideNav;

package/es/SideNav/style.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<import("antd-style").SerializedStyles>;

package/es/SideNav/style.js

@@ -0,0 +1,8 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      flex: none;\n      flex-direction: column;\n      align-items: center;\n      justify-content: space-between;\n\n      width: 64px;\n      height: 100%;\n      min-height: 640px;\n      padding: 16px 0;\n\n      background: ", ";\n      border-right: 1px solid ", ";\n    "])), token.colorBgContainer, token.colorBorder);
+});

package/es/Snippet/index.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { DivProps } from "../types";
+export interface SnippetProps extends DivProps {
+    /**
+     * @description The content to be displayed inside the Snippet component
+     */
+    children: string;
+    /**
+     * @description The symbol to be displayed before the content inside the Snippet component
+     */
+    symbol?: string;
+    /**
+     * @description The language of the content inside the Snippet component
+     * @default 'tsx'
+     */
+    language?: string;
+    /**
+     * @description Whether the Snippet component is copyable or not
+     * @default true
+     */
+    copyable?: boolean;
+    /**
+     * @description The type of the Snippet component
+     * @default 'ghost'
+     */
+    type?: 'ghost' | 'block';
+}
+declare const Snippet: import("react").NamedExoticComponent<SnippetProps>;
+export default Snippet;

package/es/Snippet/index.js

@@ -0,0 +1,39 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["symbol", "language", "children", "copyable", "type"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { memo } from 'react';
+import CopyButton from "../CopyButton";
+import { SyntaxHighlighter } from "../Highlighter";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Snippet = /*#__PURE__*/memo(function (_ref) {
+  var symbol = _ref.symbol,
+    _ref$language = _ref.language,
+    language = _ref$language === void 0 ? 'tsx' : _ref$language,
+    children = _ref.children,
+    _ref$copyable = _ref.copyable,
+    copyable = _ref$copyable === void 0 ? true : _ref$copyable,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'ghost' : _ref$type,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(type),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: styles
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(SyntaxHighlighter, {
+      language: language,
+      children: [symbol, children].filter(Boolean).join(' ')
+    }), copyable && /*#__PURE__*/_jsx(CopyButton, {
+      size: {
+        fontSize: 14,
+        blockSize: 24
+      },
+      content: children
+    })]
+  }));
+});
+export default Snippet;

package/es/Snippet/style.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: "block" | "ghost" | undefined) => import("antd-style").ReturnStyles<import("antd-style").SerializedStyles>;

package/es/Snippet/style.js

@@ -0,0 +1,9 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+export var useStyles = createStyles(function (_ref, type) {
+  var css = _ref.css,
+    token = _ref.token;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      max-width: 100%;\n      position: relative;\n      align-items: center;\n      border-radius: ", "px;\n      gap: 8px;\n      padding: 0 8px;\n      height: 36px;\n      transition:  background-color 100ms ", ";\n\n      ", "\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      .ant-highlighter-shiki {\n        overflow: auto;\n        flex: 1;\n      }\n      .prism-code {\n        background: none !important;\n      }\n\n      pre {\n        background: none !important;\n        padding-top: 6px; !important;\n        margin: 0 !important;\n        line-height: 1;\n      }\n      code[class*='language-'] {\n        background: none !important;\n      }\n    "])), token.borderRadius, token.motionEaseOut, type === 'block' ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              background-color: ", ";\n            "])), rgba(token.colorBgElevated, 0.6)) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              border: 1px solid ", ";\n            "])), token.colorBorder), token.colorFillTertiary);
+});

package/es/StroyBook/index.d.ts

@@ -1,6 +1,6 @@
+/// <reference types="react" />
 import { DivProps } from "../types";
 import { useControls, useCreateStore } from 'leva';
-import React from 'react';
 export { useCreateStore, useControls };
 export interface StroyBookProps extends DivProps {
     /**
@@ -13,6 +13,5 @@ export interface StroyBookProps extends DivProps {
      */
     noPadding?: boolean;
 }
-export declare const StroyBook: React.FC<StroyBookProps>;
-declare const _default: React.NamedExoticComponent<StroyBookProps>;
-export default _default;
+export declare const StroyBook: import("react").NamedExoticComponent<StroyBookProps>;
+export default StroyBook;

package/es/StroyBook/index.js

@@ -3,20 +3,26 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["levaStore", "noPadding", "className", "children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import { DraggablePanel } from "./..";
+import { useResponsive } from 'antd-style';
 import { LevaPanel, useControls, useCreateStore } from 'leva';
-import React from 'react';
+import { memo } from 'react';
+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 { useCreateStore, useControls };
-export var StroyBook = function StroyBook(_ref) {
+export var StroyBook = /*#__PURE__*/memo(function (_ref) {
   var levaStore = _ref.levaStore,
     noPadding = _ref.noPadding,
     className = _ref.className,
     children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(noPadding),
+  var _useResponsive = useResponsive(),
+    mobile = _useResponsive.mobile;
+  var _useStyles = useStyles({
+      noPadding: Boolean(noPadding),
+      mobile: Boolean(mobile)
+    }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
@@ -27,7 +33,8 @@ export var StroyBook = function StroyBook(_ref) {
       children: children
     }), /*#__PURE__*/_jsxs(DraggablePanel, {
       className: styles.right,
-      placement: "right",
+      placement: mobile ? 'bottom' : 'right',
+      minWidth: 280,
       children: [/*#__PURE__*/_jsx(LevaPanel, {
         fill: true,
         store: levaStore,
@@ -36,5 +43,5 @@ export var StroyBook = function StroyBook(_ref) {
       }), ' ']
     })]
   }));
-};
-export default /*#__PURE__*/React.memo(StroyBook);
+});
+export default StroyBook;

package/es/StroyBook/style.d.ts

@@ -1,4 +1,7 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+export declare const useStyles: (props?: {
+    noPadding: boolean;
+    mobile: boolean;
+} | undefined) => import("antd-style").ReturnStyles<{
     editor: import("antd-style").SerializedStyles;
     left: import("antd-style").SerializedStyles;
     right: import("antd-style").SerializedStyles;

package/es/StroyBook/style.js

@@ -1,12 +1,14 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref, noPadding) {
+export var useStyles = createStyles(function (_ref, _ref2) {
   var css = _ref.css,
     token = _ref.token;
+  var noPadding = _ref2.noPadding,
+    mobile = _ref2.mobile;
   return {
-    editor: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: stretch;\n      justify-content: stretch;\n      width: inherit;\n      min-height: inherit;\n    "]))),
-    left: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      ", "\n    "])), !noPadding && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        padding: 40px 24px;\n      "])))),
-    right: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      --leva-sizes-controlWidth: 66%;\n      --leva-colors-elevation1: ", ";\n      --leva-colors-elevation2: transparent;\n      --leva-colors-elevation3: ", ";\n      --leva-colors-accent1: ", ";\n      --leva-colors-accent2: ", ";\n      --leva-colors-accent3: ", ";\n      --leva-colors-highlight1: ", ";\n      --leva-colors-highlight2: ", ";\n      --leva-colors-highlight3: ", ";\n      --leva-colors-vivid1: ", ";\n      --leva-shadows-level1: unset;\n      --leva-shadows-level2: unset;\n      padding: 6px 0;\n      background: ", ";\n      > div {\n        background: transparent;\n        > div {\n          background: transparent;\n        }\n      }\n      input:checked + label > svg {\n        stroke: ", ";\n      }\n    "])), token.colorFillSecondary, token.colorFillSecondary, token.colorPrimary, token.colorPrimaryHover, token.colorPrimaryActive, token.colorTextTertiary, token.colorTextSecondary, token.colorText, token.colorWarning, token.colorBgLayout, token.colorBorder)
+    editor: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: stretch;\n        justify-content: stretch;\n        width: inherit;\n        min-height: inherit;\n        ", "\n      "])), mobile && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          flex-direction: column;\n        "])))),
+    left: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        flex: 1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: auto;\n        ", "\n      "])), !noPadding && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          padding: 40px 24px;\n        "])))),
+    right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        --leva-sizes-controlWidth: 66%;\n        --leva-colors-elevation1: ", ";\n        --leva-colors-elevation2: transparent;\n        --leva-colors-elevation3: ", ";\n        --leva-colors-accent1: ", ";\n        --leva-colors-accent2: ", ";\n        --leva-colors-accent3: ", ";\n        --leva-colors-highlight1: ", ";\n        --leva-colors-highlight2: ", ";\n        --leva-colors-highlight3: ", ";\n        --leva-colors-vivid1: ", ";\n        --leva-shadows-level1: unset;\n        --leva-shadows-level2: unset;\n        padding: 6px 0;\n        background: ", ";\n        > div {\n          background: transparent;\n          > div {\n            background: transparent;\n          }\n        }\n        input:checked + label > svg {\n          stroke: ", ";\n        }\n      "])), token.colorFillSecondary, token.colorFillSecondary, token.colorPrimary, token.colorPrimaryHover, token.colorPrimaryActive, token.colorTextTertiary, token.colorTextSecondary, token.colorText, token.colorWarning, token.colorBgLayout, token.colorBorder)
   };
 });

package/es/Swatches/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface SwatchesProps {
+    colors: string[];
+    activeColor?: string;
+    onSelect?: (c: string | null) => void;
+}
+declare const Swatches: import("react").NamedExoticComponent<SwatchesProps>;
+export default Swatches;

package/es/Swatches/index.js

@@ -0,0 +1,44 @@
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Swatches = /*#__PURE__*/memo(function (_ref) {
+  var colors = _ref.colors,
+    activeColor = _ref.activeColor,
+    onSelect = _ref.onSelect;
+  var theme = useTheme();
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    horizontal: true,
+    gap: 8,
+    children: [/*#__PURE__*/_jsx(Flexbox, {
+      style: {
+        width: 24,
+        height: 24,
+        background: theme.colorBgContainer,
+        boxShadow: "inset 0 0 0px 2px ".concat(!activeColor ? theme.colorPrimary : 'rgba(0,0,0,0.1)'),
+        borderRadius: '50%',
+        cursor: 'pointer'
+      },
+      onClick: function onClick() {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(null);
+      }
+    }), colors.map(function (c) {
+      var borderColor = c === activeColor ? theme.colorPrimary : 'rgba(0,0,0,0.1)';
+      return /*#__PURE__*/_jsx(Flexbox, {
+        style: {
+          width: 24,
+          height: 24,
+          background: c,
+          boxShadow: "inset 0 0 0px 2px ".concat(borderColor),
+          borderRadius: '50%',
+          cursor: 'pointer'
+        },
+        onClick: function onClick() {
+          onSelect === null || onSelect === void 0 ? void 0 : onSelect(c);
+        }
+      }, c);
+    })]
+  });
+});
+export default Swatches;

package/es/TabsNav/index.d.ts

@@ -1,5 +1,5 @@
+/// <reference types="react" />
 import { TabsProps } from 'antd';
-import React from 'react';
 export interface TabsNavProps {
     /**
      * @description Additional className to apply to the component
@@ -18,5 +18,5 @@ export interface TabsNavProps {
      */
     activeKey?: TabsProps['activeKey'];
 }
-declare const _default: React.NamedExoticComponent<TabsNavProps>;
-export default _default;
+declare const TabsNav: import("react").NamedExoticComponent<TabsNavProps>;
+export default TabsNav;

package/es/TabsNav/index.js

@@ -4,10 +4,10 @@ var _excluded = ["className"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { Tabs } from 'antd';
-import React from 'react';
+import { memo } from 'react';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var TabsNav = function TabsNav(_ref) {
+var TabsNav = /*#__PURE__*/memo(function (_ref) {
   var className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
@@ -16,5 +16,5 @@ var TabsNav = function TabsNav(_ref) {
   return /*#__PURE__*/_jsx(Tabs, _objectSpread({
     className: cx(styles.tabs, className)
   }, props));
-};
-export default /*#__PURE__*/React.memo(TabsNav);
+});
+export default TabsNav;

package/es/ThemeProvider/GlobalStyle.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject;
 import { createGlobalStyle } from 'antd-style';
-var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  body {\n    font-family: 'Segoe UI', SegoeUI, AliPuHui, ", ";\n    font-size: ", "px;\n    line-height: 1;\n    color: ", ";\n\n    margin: 0;\n    padding: 0;\n    background-color: ", ";\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n  \n  #root {\n\t  min-height: 100vh;\n\t  width: 100vw;\n  }\n\n  @font-face {\n    font-family: AliPuHui;\n    font-weight: normal;\n    src: url('//at.alicdn.com/t/webfont_exesdog9toj.woff2') format('woff2'),\n    url('//at.alicdn.com/t/webfont_exesdog9toj.woff') format('woff'),\n    url('//at.alicdn.com/t/webfont_exesdog9toj.ttf') format('truetype');\n    font-display: swap;\n  }\n\n  @font-face {\n    font-family: AliPuHui;\n    font-weight: bold;\n    src: url('https://at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2') format('woff2'),\n    url('https://at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff') format('woff');\n    font-display: swap;\n  }\n\n  /* \u5B9A\u4E49\u6EDA\u52A8\u69FD\u7684\u6837\u5F0F */\n  ::-webkit-scrollbar {\n    width: 6px;\n    height: 6px;\n    margin-right: 4px;\n    background-color: transparent; // \u5B9A\u4E49\u6EDA\u52A8\u69FD\u7684\u80CC\u666F\u8272\n\n    &-thumb {\n      background-color: ", "; // \u5B9A\u4E49\u6EDA\u52A8\u5757\u7684\u80CC\u666F\u8272\n      border-radius: 4px; // \u5B9A\u4E49\u6EDA\u52A8\u5757\u7684\u5706\u89D2\u534A\u5F84\n    }\n\n    &-corner {\n      display: none;\n    }\n  }\n"])), function (_ref) {
+var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  body {\n    font-family: ", ";\n    font-size: ", "px;\n    line-height: 1;\n    color: ", ";\n\n    margin: 0;\n    padding: 0;\n    background-color: ", ";\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  #root {\n\t  min-height: 100vh;\n  }\n\n  @font-face {\n    font-family: AliPuHui;\n    font-weight: normal;\n    src: url('//at.alicdn.com/t/webfont_exesdog9toj.woff2') format('woff2'),\n    url('//at.alicdn.com/t/webfont_exesdog9toj.woff') format('woff'),\n    url('//at.alicdn.com/t/webfont_exesdog9toj.ttf') format('truetype');\n    font-display: swap;\n  }\n\n  @font-face {\n    font-family: AliPuHui;\n    font-weight: bold;\n    src: url('https://at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2') format('woff2'),\n    url('https://at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff') format('woff');\n    font-display: swap;\n  }\n\n  /* \u5B9A\u4E49\u6EDA\u52A8\u69FD\u7684\u6837\u5F0F */\n  ::-webkit-scrollbar {\n    width: 0;\n    height: 4px;\n    margin-right: 4px;\n    background-color: transparent; // \u5B9A\u4E49\u6EDA\u52A8\u69FD\u7684\u80CC\u666F\u8272\n\n    &-thumb {\n      background-color: ", "; // \u5B9A\u4E49\u6EDA\u52A8\u5757\u7684\u80CC\u666F\u8272\n      border-radius: 4px; // \u5B9A\u4E49\u6EDA\u52A8\u5757\u7684\u5706\u89D2\u534A\u5F84\n    }\n\n    &-corner {\n      display: none;\n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily;
 }, function (_ref2) {