@lobehub/ui 1.31.0 → 1.31.2

package/es/Form/index.d.ts

@@ -1,5 +1,16 @@
-/// <reference types="react" />
 import { FormProps as AntFormProps } from 'antd';
-export declare type FormProps = AntFormProps;
+import { LucideIcon } from 'lucide-react';
+import { type ReactNode } from 'react';
+import { FormItemProps } from './components/FormItem';
+export interface ItemGroup {
+    children: FormItemProps[];
+    icon: LucideIcon;
+    title: string;
+}
+export interface FormProps extends AntFormProps {
+    children?: ReactNode;
+    footer?: ReactNode;
+    items?: ItemGroup[];
+}
 declare const Form: import("react").NamedExoticComponent<FormProps>;
 export default Form;

package/es/Form/index.js

@@ -1,26 +1,43 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className"];
+var _excluded = ["className", "footer", "items", "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 { Form as AntForm } from 'antd';
 import { memo } from 'react';
+import FormFooter from "./components/FormFooter";
+import FormGroup from "./components/FormGroup";
+import FormItem from "./components/FormItem";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var Form = /*#__PURE__*/memo(function (_ref) {
   var className = _ref.className,
+    footer = _ref.footer,
+    items = _ref.items,
+    children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  return (
-    /*#__PURE__*/
-    // @ts-ignore
-    _jsx(AntForm, _objectSpread({
-      className: cx(styles.form, className),
-      colon: false,
-      layout: "horizontal"
-    }, props))
-  );
+  return /*#__PURE__*/_jsxs(AntForm, _objectSpread(_objectSpread({
+    className: cx(styles.form, className),
+    colon: false,
+    layout: "horizontal"
+  }, props), {}, {
+    children: [items === null || items === void 0 ? void 0 : items.map(function (group, groupIndex) {
+      return /*#__PURE__*/_jsx(FormGroup, {
+        icon: group.icon,
+        title: group.title,
+        children: group.children.map(function (item, itemIndex) {
+          return /*#__PURE__*/_jsx(FormItem, _objectSpread({
+            divider: itemIndex !== 0
+          }, item), itemIndex);
+        })
+      }, groupIndex);
+    }), children, footer && /*#__PURE__*/_jsx(FormFooter, {
+      children: footer
+    })]
+  }));
 });
 export default Form;

package/es/Highlighter/SyntaxHighlighter/index.d.ts

@@ -1,5 +1,10 @@
 /// <reference types="react" />
-import type { HighlighterProps } from '../index';
-export declare type SyntaxHighlighterProps = Pick<HighlighterProps, 'language' | 'children' | 'theme'>;
+import { HighlighterOptions } from 'shiki-es';
+export interface SyntaxHighlighterProps {
+    children: string;
+    language: string;
+    options?: HighlighterOptions;
+    theme?: 'dark' | 'light';
+}
 declare const SyntaxHighlighter: import("react").NamedExoticComponent<SyntaxHighlighterProps>;
 export default SyntaxHighlighter;

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -12,7 +12,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
-    language = _ref.language;
+    language = _ref.language,
+    options = _ref.options;
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
   var _useThemeMode = useThemeMode(),
@@ -24,8 +25,8 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
     codeToHtml = _useHighlight2[0],
     isLoading = _useHighlight2[1];
   useEffect(function () {
-    useHighlight.getState().initHighlighter();
-  }, []);
+    useHighlight.getState().initHighlighter(options);
+  }, [options]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [isLoading ? /*#__PURE__*/_jsx("div", {
       className: styles.shiki,

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  html,body {\n    --font-settings: \"cv01\", \"tnum\", \"kern\";\n    --font-variations: \"opsz\" auto, tabular-nums;\n\n    overflow-x: hidden;\n    overflow-y: auto;\n\n    margin: 0;\n    padding: 0;\n\n    font-family: ", ";\n    font-size: ", "px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    line-height: 1;\n    color: ", ";\n    text-size-adjust: none;\n    text-rendering: optimizelegibility;\n    vertical-align: baseline;\n\n    color-scheme: dark;\n    background-color: ", ";\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-overflow-scrolling:touch;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  body {\n    overflow-x: hidden;\n    height: 100vh;\n  }\n\n  #root {\n    min-height: 100vh;\n  }\n\n  code {\n    font-family: ", " !important;\n\n    span {\n      font-family: ", " !important;\n    }\n  }\n\n  p {\n    text-align: justify;\n    word-wrap: break-word;\n  }\n\n  ::selection {\n    color: #000;\n    background: ", ";\n\n\t  -webkit-text-fill-color: unset !important;\n  }\n\n  * {\n\t  box-sizing: border-box;\n\t  vertical-align: baseline;\n  }\n\n  @media only screen and (min-width: 574px) {\n    * {\n      ::-webkit-scrollbar {\n        cursor: pointer;\n        width: 4px;\n        height: 4px;\n        background-color: transparent;\n      }\n\n      ::-webkit-scrollbar-thumb {\n        cursor: pointer;\n        background-color: transparent;\n        border-radius: 2px;\n        transition: background-color 500ms ", ";\n\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      ::-webkit-scrollbar-corner {\n        display: none;\n        width: 0;\n        height: 0;\n      }\n\n      &:hover {\n        ::-webkit-scrollbar-thumb {\n          background-color: ", ";\n        }\n      }\n    }\n  }\n"])), function (_ref) {
+var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  html,body {\n    --font-settings: \"cv01\", \"tnum\", \"kern\";\n    --font-variations: \"opsz\" auto, tabular-nums;\n\n    overflow-x: hidden;\n    overflow-y: auto;\n\n    margin: 0;\n    padding: 0;\n\n    font-family: ", ";\n    font-size: ", "px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    line-height: 1;\n    color: ", ";\n    text-size-adjust: none;\n    text-rendering: optimizelegibility;\n    vertical-align: baseline;\n\n    color-scheme: dark;\n    background-color: ", ";\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-overflow-scrolling:touch;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  body {\n    overflow-x: hidden;\n    height: 100vh;\n  }\n\n  #root {\n    min-height: 100vh;\n  }\n\n  code {\n    font-family: ", " !important;\n\n    span {\n      font-family: ", " !important;\n    }\n  }\n\n  p {\n    text-align: justify;\n    word-wrap: break-word;\n  }\n\n  ::selection {\n    color: #000;\n    background: ", ";\n\n\t  -webkit-text-fill-color: unset !important;\n  }\n\n  * {\n\t  box-sizing: border-box;\n\t  vertical-align: baseline;\n  }\n\n  @media only screen and (min-width: 574px) {\n    * {\n      ::-webkit-scrollbar {\n        cursor: pointer;\n        width: 4px;\n        height: 4px;\n        background-color: transparent;\n      }\n\n      ::-webkit-scrollbar-thumb {\n        cursor: pointer;\n        background-color: transparent;\n        border-radius: 2px;\n        transition: background-color 500ms ", ";\n\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      ::-webkit-scrollbar-corner {\n        display: none;\n        width: 0;\n        height: 0;\n      }\n\n      &:hover {\n        ::-webkit-scrollbar-thumb {\n          background-color: ", ";\n        }\n      }\n    }\n  }\n\n  .ant-tooltip-inner {\n\t  display: flex;\n\t  align-items: center;\n\t  justify-content: center;\n\n\t  min-height: unset;\n\t  padding: 4px 8px;\n\n\t  color: ", ";\n\n\t  background-color: ", ";\n\t  border-radius: ", "px;\n  }\n\n  .ant-tooltip-arrow {\n\t  &::before,\n\t  &::after {\n\t\t  background: ", ";\n\t  }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily;
 }, function (_ref2) {
@@ -31,5 +31,17 @@ var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _tagge
 }, function (_ref10) {
   var theme = _ref10.theme;
   return theme.colorFill;
+}, function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.colorBgLayout;
+}, function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.colorText;
+}, function (_ref13) {
+  var theme = _ref13.theme;
+  return theme.borderRadiusSM;
+}, function (_ref14) {
+  var theme = _ref14.theme;
+  return theme.colorText;
 });
 export default GlobalStyle;

package/es/ThemeProvider/index.d.ts

@@ -22,6 +22,7 @@ export interface ThemeProviderProps {
     customToken?: (theme: CustomTokenParams) => {
         [key: string]: any;
     };
+    enableWebfonts?: boolean;
     /**
      * @description Whether to inline the styles on server-side rendering or not
      */

package/es/ThemeProvider/index.js

@@ -22,13 +22,15 @@ var ThemeProvider = /*#__PURE__*/memo(function (_ref) {
     _customToken = _ref$customToken === void 0 ? function () {
       return {};
     } : _ref$customToken,
+    _ref$enableWebfonts = _ref.enableWebfonts,
+    enableWebfonts = _ref$enableWebfonts === void 0 ? true : _ref$enableWebfonts,
     _ref$webfonts = _ref.webfonts,
     webfonts = _ref$webfonts === void 0 ? ['https://npm.elemecdn.com/@lobehub/webfont-mono/css/index.css', 'https://npm.elemecdn.com/@lobehub/webfont-harmony-sans/css/index.css', 'https://npm.elemecdn.com/@lobehub/webfont-harmony-sans-sc/css/index.css'] : _ref$webfonts;
   setupStyled({
     ThemeContext: ThemeContext
   });
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [webfonts && webfonts.map(function (webfont, index) {
+    children: [enableWebfonts && (webfonts === null || webfonts === void 0 ? void 0 : webfonts.length) > 0 && webfonts.map(function (webfont, index) {
       return /*#__PURE__*/_jsx(FontLoader, {
         url: webfont
       }, index);

package/es/components/ControlInput.js

@@ -6,22 +6,21 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 { ConfigProvider, Space } from 'antd';
 import { RotateCcw, Save } from 'lucide-react';
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
 import ActionIcon from "../ActionIcon";
 import { Input } from "../Input";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var ControlInput = /*#__PURE__*/memo(function (_ref) {
+export var ControlInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, reference) {
   var value = _ref.value,
     onChange = _ref.onChange,
     onValueChanging = _ref.onValueChanging,
     onChangeEnd = _ref.onChangeEnd,
-    properties = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(value || ''),
     _useState2 = _slicedToArray(_useState, 2),
     input = _useState2[0],
     setInput = _useState2[1];
-  var inputReference = useRef();
   var isChineseInput = useRef(false);
   var isFocusing = useRef(false);
   var updateValue = useCallback(function () {
@@ -30,9 +29,7 @@ export var ControlInput = /*#__PURE__*/memo(function (_ref) {
   useEffect(function () {
     if (value !== undefined) setInput(value);
   }, [value]);
-  return /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
-    ref: inputReference
-  }, properties), {}, {
+  return /*#__PURE__*/_jsx(Input, _objectSpread({
     onBlur: function onBlur() {
       isFocusing.current = false;
       onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(input);
@@ -58,6 +55,7 @@ export var ControlInput = /*#__PURE__*/memo(function (_ref) {
         onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(input);
       }
     },
+    ref: reference,
     suffix: value === input ? /*#__PURE__*/_jsx("span", {}) : /*#__PURE__*/_jsx(ConfigProvider, {
       theme: {
         token: {
@@ -82,5 +80,5 @@ export var ControlInput = /*#__PURE__*/memo(function (_ref) {
       })
     }),
     value: input
-  }));
-});
+  }, props));
+}));

package/es/hooks/useHighlight.d.ts

@@ -1,4 +1,4 @@
-import { type Highlighter } from 'shiki-es';
+import { type Highlighter, type HighlighterOptions } from 'shiki-es';
 export declare const languageMap: readonly ["javascript", "js", "jsx", "json", "markdown", "md", "less", "css", "typescript", "ts", "tsx", "diff", "bash"];
 /**
  * @title 代码高亮的存储对象
@@ -20,7 +20,7 @@ interface Store {
      * @title Initialize the highlighter object
      * @returns Initialization promise object
      */
-    initHighlighter: () => Promise<void>;
+    initHighlighter: (options?: HighlighterOptions) => Promise<void>;
 }
 export declare const useHighlight: import("zustand").UseBoundStore<import("zustand").StoreApi<Store>>;
 export {};

package/es/hooks/useHighlight.js

@@ -26,7 +26,7 @@ export var useHighlight = create(function (set, get) {
     },
     highlighter: undefined,
     initHighlighter: function () {
-      var _initHighlighter = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _initHighlighter = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(options) {
         var highlighter;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -37,8 +37,8 @@ export var useHighlight = create(function (set, get) {
               }
               _context.next = 3;
               return getHighlighter({
-                langs: languageMap,
-                themes: [themeConfig(true), themeConfig(false)]
+                langs: (options === null || options === void 0 ? void 0 : options.langs) || languageMap,
+                themes: (options === null || options === void 0 ? void 0 : options.themes) || [themeConfig(true), themeConfig(false)]
               });
             case 3:
               highlighter = _context.sent;
@@ -51,7 +51,7 @@ export var useHighlight = create(function (set, get) {
           }
         }, _callee);
       }));
-      function initHighlighter() {
+      function initHighlighter(_x) {
         return _initHighlighter.apply(this, arguments);
       }
       return initHighlighter;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.31.0",
+  "version": "1.31.2",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -98,7 +98,7 @@
     "react-simple-code-editor": "^0",
     "remark-gfm": "^3",
     "shiki-es": "^0",
-    "styled-components": "latest",
+    "styled-components": "^6",
     "ts-md5": "^1",
     "use-merge-value": "^1",
     "zustand": "^4",