@lobehub/ui 1.9.0 → 1.11.0

package/lib/components/ControlInput.js

@@ -22,7 +22,9 @@ __export(ControlInput_exports, {
   ControlInput: () => ControlInput
 });
 module.exports = __toCommonJS(ControlInput_exports);
+var import__ = require("../index");
 var import_antd = require("antd");
+var import_lucide_react = require("lucide-react");
 var import_react = require("react");
 var ControlInput = (0, import_react.memo)(
   ({ value, onChange, onValueChanging, onChangeEnd, ...props }) => {
@@ -38,7 +40,7 @@ var ControlInput = (0, import_react.memo)(
         setInput(value);
     }, [value]);
     return /* @__PURE__ */ React.createElement(
-      import_antd.Input,
+      import__.Input,
       {
         ref: inputRef,
         ...props,
@@ -68,29 +70,17 @@ var ControlInput = (0, import_react.memo)(
             onChangeEnd == null ? void 0 : onChangeEnd(input);
           }
         },
-        suffix: value === input ? /* @__PURE__ */ React.createElement("span", null) : /* @__PURE__ */ React.createElement(import_antd.ConfigProvider, { theme: { token: { fontSize: 14 } } }, /* @__PURE__ */ React.createElement(
-          import_antd.Button,
+        suffix: value === input ? /* @__PURE__ */ React.createElement("span", null) : /* @__PURE__ */ React.createElement(import_antd.ConfigProvider, { theme: { token: { fontSize: 14 } } }, /* @__PURE__ */ React.createElement(import_antd.Space, { size: 2 }, /* @__PURE__ */ React.createElement(
+          import__.ActionIcon,
           {
-            type: "link",
+            title: "Reset",
+            icon: import_lucide_react.RotateCcw,
             size: "small",
             onClick: () => {
               setInput(value);
-            },
-            style: { padding: 0 }
-          },
-          "重置"
-        ), /* @__PURE__ */ React.createElement(
-          import_antd.Button,
-          {
-            type: "link",
-            size: "small",
-            style: { padding: 0 },
-            onClick: () => {
-              updateValue();
             }
-          },
-          "保存 ↵"
-        ))
+          }
+        ), /* @__PURE__ */ React.createElement(import__.ActionIcon, { title: "✅ Save", icon: import_lucide_react.Save, size: "small", onClick: updateValue })))
       }
     );
   }

package/lib/index.d.ts

@@ -10,6 +10,7 @@ export { default as EditableMessageList, type EditableMessageListProps, } from '
 export { default as EditableText, type EditableTextProps } from './EditableText';
 export { default as Highlighter, SyntaxHighlighter, type HighlighterProps, type SyntaxHighlighterProps, } from './Highlighter';
 export { default as Icon, type IconProps, type IconSize } from './Icon';
+export { Input, TextArea, type InputProps, type TextAreaProps } from './Input';
 export { default as List } from './List';
 export { default as Logo, type LogoProps } from './Logo';
 export { default as Markdown, type MarkdownProps } from './Markdown';

package/lib/index.js

@@ -40,6 +40,7 @@ __export(src_exports, {
   EditableText: () => import_EditableText.default,
   Highlighter: () => import_Highlighter.default,
   Icon: () => import_Icon.default,
+  Input: () => import_Input.Input,
   List: () => import_List.default,
   Logo: () => import_Logo.default,
   Markdown: () => import_Markdown.default,
@@ -52,6 +53,7 @@ __export(src_exports, {
   Swatches: () => import_Swatches.default,
   SyntaxHighlighter: () => import_Highlighter.SyntaxHighlighter,
   TabsNav: () => import_TabsNav.default,
+  TextArea: () => import_Input.TextArea,
   ThemeProvider: () => import_ThemeProvider.default,
   ThemeSwitch: () => import_ThemeSwitch.default,
   Tooltip: () => import_Tooltip.default,
@@ -70,6 +72,7 @@ var import_EditableMessageList = __toESM(require("./EditableMessageList"));
 var import_EditableText = __toESM(require("./EditableText"));
 var import_Highlighter = __toESM(require("./Highlighter"));
 var import_Icon = __toESM(require("./Icon"));
+var import_Input = require("./Input");
 var import_List = __toESM(require("./List"));
 var import_Logo = __toESM(require("./Logo"));
 var import_Markdown = __toESM(require("./Markdown"));
@@ -97,6 +100,7 @@ var import_Tooltip = __toESM(require("./Tooltip"));
   EditableText,
   Highlighter,
   Icon,
+  Input,
   List,
   Logo,
   Markdown,
@@ -109,6 +113,7 @@ var import_Tooltip = __toESM(require("./Tooltip"));
   Swatches,
   SyntaxHighlighter,
   TabsNav,
+  TextArea,
   ThemeProvider,
   ThemeSwitch,
   Tooltip,

package/lib/styles/algorithms/generateColorPalette.d.ts

@@ -0,0 +1,11 @@
+import { ColorScaleItem } from "../colors";
+import { AliasToken } from 'antd/es/theme/interface';
+export declare const generateColorPalette: ({ type, scale, appearance, }: {
+    type: 'Primary' | 'Success' | 'Warning' | 'Error' | 'Info' | string;
+    scale: ColorScaleItem;
+    appearance: 'light' | 'dark';
+}) => Partial<AliasToken>;
+export declare const generateColorNeutralPalette: ({ scale, appearance, }: {
+    scale: ColorScaleItem;
+    appearance: 'light' | 'dark';
+}) => Partial<AliasToken>;

package/lib/styles/algorithms/generateColorPalette.js

@@ -0,0 +1,72 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/styles/algorithms/generateColorPalette.ts
+var generateColorPalette_exports = {};
+__export(generateColorPalette_exports, {
+  generateColorNeutralPalette: () => generateColorNeutralPalette,
+  generateColorPalette: () => generateColorPalette
+});
+module.exports = __toCommonJS(generateColorPalette_exports);
+var import_lodash = require("lodash");
+var generateColorPalette = ({
+  type,
+  scale,
+  appearance
+}) => {
+  const name = (0, import_lodash.capitalize)(type);
+  return {
+    [`color${name}Bg`]: scale[appearance][1],
+    [`color${name}BgHover`]: scale[appearance][2],
+    [`color${name}Border`]: scale[appearance][4],
+    [`color${name}BorderHover`]: scale[appearance][5],
+    [`color${name}Hover`]: scale[appearance][10],
+    [`color${name}`]: scale[appearance][9],
+    [`color${name}Active`]: scale[appearance][7],
+    [`color${name}TextHover`]: scale[appearance][10],
+    [`color${name}Text`]: scale[appearance][9],
+    [`color${name}Active`]: scale[appearance][7]
+  };
+};
+var generateColorNeutralPalette = ({
+  scale,
+  appearance
+}) => {
+  return {
+    colorText: scale[appearance][12],
+    colorTextSecondary: scale[appearance][10],
+    colorTextTertiary: scale[appearance][8],
+    colorTextQuaternary: scale[appearance][6],
+    colorBorder: scale[`${appearance}A`][4],
+    colorBorderSecondary: scale[`${appearance}A`][3],
+    colorFill: scale[`${appearance}A`][3],
+    colorFillSecondary: scale[`${appearance}A`][2],
+    colorFillTertiary: scale[`${appearance}A`][1],
+    colorFillQuaternary: scale[`${appearance}A`][0],
+    colorBgContainer: appearance === "dark" ? scale[appearance][1] : scale[appearance][0],
+    colorBgElevated: appearance === "dark" ? scale[appearance][2] : scale[appearance][0],
+    colorBgLayout: appearance === "dark" ? scale[appearance][0] : scale[appearance][1],
+    colorBgSpotlight: scale[appearance][5],
+    colorBgMask: scale.lightA[8]
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  generateColorNeutralPalette,
+  generateColorPalette
+});

package/lib/styles/{customStylish.d.ts → algorithms/generateCustomStylish.d.ts}

@@ -14,4 +14,4 @@ export interface SiteStylish {
     iconGradientDefault: string;
     blur: string;
 }
-export declare const getCustomStylish: GetCustomStylish<SiteStylish>;
+export declare const generateCustomStylish: GetCustomStylish<SiteStylish>;

package/lib/styles/{customStylish.js → algorithms/generateCustomStylish.js}

@@ -16,14 +16,18 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/styles/customStylish.ts
-var customStylish_exports = {};
-__export(customStylish_exports, {
-  getCustomStylish: () => getCustomStylish
+// src/styles/algorithms/generateCustomStylish.ts
+var generateCustomStylish_exports = {};
+__export(generateCustomStylish_exports, {
+  generateCustomStylish: () => generateCustomStylish
 });
-module.exports = __toCommonJS(customStylish_exports);
+module.exports = __toCommonJS(generateCustomStylish_exports);
 var import_polished = require("polished");
-var getCustomStylish = ({ css, token, isDarkMode }) => {
+var generateCustomStylish = ({
+  css,
+  token,
+  isDarkMode
+}) => {
   return {
     clickableText: css`
       cursor: pointer;
@@ -114,5 +118,5 @@ var getCustomStylish = ({ css, token, isDarkMode }) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  getCustomStylish
+  generateCustomStylish
 });

package/lib/styles/algorithms/generateCustomToken.d.ts

@@ -0,0 +1,3 @@
+import { LobeCustomToken } from "../../types/customToken";
+import { GetCustomToken } from 'antd-style';
+export declare const generateCustomToken: GetCustomToken<LobeCustomToken>;

package/lib/styles/{customToken.js → algorithms/generateCustomToken.js}

@@ -16,39 +16,64 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/styles/customToken.ts
-var customToken_exports = {};
-__export(customToken_exports, {
-  createCustomToken: () => createCustomToken
+// src/styles/algorithms/generateCustomToken.ts
+var generateCustomToken_exports = {};
+__export(generateCustomToken_exports, {
+  generateCustomToken: () => generateCustomToken
 });
-module.exports = __toCommonJS(customToken_exports);
-var import_polished = require("polished");
-var createCustomToken = ({ isDarkMode, token }) => {
+module.exports = __toCommonJS(generateCustomToken_exports);
+var import_colors = require("../colors");
+var import_lodash = require("lodash");
+var import_generateColorPalette = require("./generateColorPalette");
+var generateCustomColorPalette = ({
+  type,
+  scale,
+  appearance
+}) => {
+  const name = (0, import_lodash.capitalize)(type);
+  const colorStepPalette = {};
+  scale[appearance].forEach((color, index) => {
+    colorStepPalette[`color${name}${index + 1}`] = color;
+  });
+  scale[`${appearance}A`].forEach((color, index) => {
+    colorStepPalette[`color${name}${index + 1}A`] = color;
+  });
+  return {
+    ...colorStepPalette,
+    ...(0, import_generateColorPalette.generateColorPalette)({ type, scale, appearance })
+  };
+};
+var generateCustomToken = ({
+  appearance,
+  token,
+  isDarkMode
+}) => {
   const gradientColor1 = token.blue;
   const gradientColor2 = isDarkMode ? token.pink : token.cyan;
   const gradientColor3 = token.purple;
   const colorSolid = isDarkMode ? token.colorWhite : "#000";
-  return {
+  let colorCustomToken = {
     headerHeight: 64,
     footerHeight: 300,
     sidebarWidth: 240,
     tocWidth: 176,
     contentMaxWidth: 1152,
-    fontFamilyHighlighter: "'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace",
     colorSolid,
     gradientColor1,
     gradientColor2,
     gradientColor3,
-    gradientHeroBgG: `radial-gradient(at 80% 20%, ${gradientColor1} 0%, ${gradientColor2} 80%, ${gradientColor3} 130%)`,
-    gradientIconDefault: `radial-gradient(
-        100% 100% at 50% 0,
-        ${(0, import_polished.rgba)(colorSolid, isDarkMode ? 0.2 : 0.2)} 0,
-        ${(0, import_polished.rgba)(colorSolid, isDarkMode ? 0.1 : 0.4)} 100%
-      )`,
-    demoInheritSiteTheme: false
+    gradientHeroBgG: `radial-gradient(at 80% 20%, ${gradientColor1} 0%, ${gradientColor2} 80%, ${gradientColor3} 130%)`
   };
+  Object.entries(import_colors.colorScales).forEach(([type, scale]) => {
+    colorCustomToken = {
+      ...colorCustomToken,
+      // @ts-ignore
+      ...generateCustomColorPalette({ type, scale, appearance })
+    };
+  });
+  return colorCustomToken;
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  createCustomToken
+  generateCustomToken
 });

package/lib/styles/algorithms/generateTheme.d.ts

@@ -0,0 +1,5 @@
+import { ThemeConfig } from 'antd';
+import { GetAntdTheme } from 'antd-style';
+export declare const lightTheme: ThemeConfig;
+export declare const darkTheme: ThemeConfig;
+export declare const generateTheme: GetAntdTheme;

package/lib/styles/algorithms/generateTheme.js

@@ -0,0 +1,59 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/styles/algorithms/generateTheme.ts
+var generateTheme_exports = {};
+__export(generateTheme_exports, {
+  darkTheme: () => darkTheme,
+  generateTheme: () => generateTheme,
+  lightTheme: () => lightTheme
+});
+module.exports = __toCommonJS(generateTheme_exports);
+var import_dark = __toESM(require("../theme/dark"));
+var import_light = __toESM(require("../theme/light"));
+var lightTheme = {
+  token: import_light.default,
+  algorithm: (seedToken, mapToken) => ({
+    ...mapToken,
+    ...import_light.default
+  })
+};
+var darkTheme = {
+  token: import_dark.default,
+  algorithm: (seedToken, mapToken) => ({
+    ...mapToken,
+    ...import_dark.default
+  })
+};
+var generateTheme = (appearance) => appearance === "dark" ? darkTheme : lightTheme;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  darkTheme,
+  generateTheme,
+  lightTheme
+});

package/lib/styles/colors.d.ts

@@ -0,0 +1,38 @@
+export interface ColorScaleItem {
+    light: string[];
+    lightA: string[];
+    dark: string[];
+    darkA: string[];
+}
+export interface ColorScales {
+    tomato: ColorScaleItem;
+    red: ColorScaleItem;
+    crimson: ColorScaleItem;
+    pink: ColorScaleItem;
+    plum: ColorScaleItem;
+    purple: ColorScaleItem;
+    violet: ColorScaleItem;
+    indigo: ColorScaleItem;
+    blue: ColorScaleItem;
+    cyan: ColorScaleItem;
+    teal: ColorScaleItem;
+    green: ColorScaleItem;
+    grass: ColorScaleItem;
+    orange: ColorScaleItem;
+    brown: ColorScaleItem;
+    sky: ColorScaleItem;
+    mint: ColorScaleItem;
+    lime: ColorScaleItem;
+    yellow: ColorScaleItem;
+    amber: ColorScaleItem;
+    bronze: ColorScaleItem;
+    gold: ColorScaleItem;
+    gray: ColorScaleItem;
+    mauve: ColorScaleItem;
+    slate: ColorScaleItem;
+    sage: ColorScaleItem;
+    olive: ColorScaleItem;
+    sand: ColorScaleItem;
+    bnw: ColorScaleItem;
+}
+export declare const colorScales: ColorScales;