@lobehub/ui 1.1.0 → 1.3.0

package/lib/index.js

@@ -30,25 +30,67 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   ActionIcon: () => import_ActionIcon.default,
+  CopyButton: () => import_CopyButton.default,
   DraggablePanel: () => import_DraggablePanel.default,
+  EditableText: () => import_EditableText.default,
+  Highlighter: () => import_Highlighter.default,
+  Icon: () => import_Icon.default,
   Logo: () => import_Logo.default,
+  Markdown: () => import_Markdown.default,
+  MessageInput: () => import_MessageInput.default,
+  SearchBar: () => import_SearchBar.default,
   SideNav: () => import_SideNav.default,
-  Template: () => import_Template.default,
-  ThemeProvider: () => import_ThemeProvider.default
+  Snippet: () => import_Snippet.default,
+  StroyBook: () => import_StroyBook.default,
+  Swatches: () => import_Swatches.default,
+  SyntaxHighlighter: () => import_Highlighter.SyntaxHighlighter,
+  TabsNav: () => import_TabsNav.default,
+  ThemeProvider: () => import_ThemeProvider.default,
+  ThemeSwitch: () => import_ThemeSwitch.default,
+  Tooltip: () => import_Tooltip.default,
+  useControls: () => import_StroyBook.useControls,
+  useCreateStore: () => import_StroyBook.useCreateStore
 });
 module.exports = __toCommonJS(src_exports);
 var import_ActionIcon = __toESM(require("./ActionIcon"));
+var import_CopyButton = __toESM(require("./CopyButton"));
 var import_DraggablePanel = __toESM(require("./DraggablePanel"));
+var import_EditableText = __toESM(require("./EditableText"));
+var import_Highlighter = __toESM(require("./Highlighter"));
+var import_Icon = __toESM(require("./Icon"));
 var import_Logo = __toESM(require("./Logo"));
+var import_Markdown = __toESM(require("./Markdown"));
+var import_MessageInput = __toESM(require("./MessageInput"));
+var import_SearchBar = __toESM(require("./SearchBar"));
 var import_SideNav = __toESM(require("./SideNav"));
-var import_Template = __toESM(require("./Template"));
+var import_Snippet = __toESM(require("./Snippet"));
+var import_StroyBook = __toESM(require("./StroyBook"));
+var import_Swatches = __toESM(require("./Swatches"));
+var import_TabsNav = __toESM(require("./TabsNav"));
 var import_ThemeProvider = __toESM(require("./ThemeProvider"));
+var import_ThemeSwitch = __toESM(require("./ThemeSwitch"));
+var import_Tooltip = __toESM(require("./Tooltip"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionIcon,
+  CopyButton,
   DraggablePanel,
+  EditableText,
+  Highlighter,
+  Icon,
   Logo,
+  Markdown,
+  MessageInput,
+  SearchBar,
   SideNav,
-  Template,
-  ThemeProvider
+  Snippet,
+  StroyBook,
+  Swatches,
+  SyntaxHighlighter,
+  TabsNav,
+  ThemeProvider,
+  ThemeSwitch,
+  Tooltip,
+  useControls,
+  useCreateStore
 });

package/lib/styles/theme/base.d.ts

@@ -0,0 +1,2 @@
+import { ThemeConfig } from 'antd';
+export declare const baseTheme: ThemeConfig;

package/lib/styles/theme/base.js

@@ -0,0 +1,43 @@
+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/theme/base.ts
+var base_exports = {};
+__export(base_exports, {
+  baseTheme: () => baseTheme
+});
+module.exports = __toCommonJS(base_exports);
+var baseTheme = {
+  token: {
+    colorInfo: "#0070f3",
+    colorSuccess: "#50e3c2",
+    colorWarning: "#f5a623",
+    colorError: "#ee0000",
+    borderRadius: 5,
+    borderRadiusXS: 3,
+    borderRadiusSM: 3,
+    borderRadiusLG: 8,
+    controlHeight: 36,
+    fontFamily: `'Segoe UI', SegoeUI, AliPuHui, -apple-system ,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'`,
+    fontFamilyCode: `'Hack Nerd Font Mono', 'Hack', 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace`
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  baseTheme
+});

package/lib/styles/theme/dark.js

@@ -25,6 +25,7 @@ __export(dark_exports, {
 module.exports = __toCommonJS(dark_exports);
 var import_antd = require("antd");
 var import_algorithms = require("../algorithms");
+var import_base = require("./base");
 var cyanColors = [
   "rgba(0, 225, 242, 0.12)",
   "rgba(0, 232, 245, 0.22)",
@@ -94,6 +95,7 @@ var darkAlgorithm = (seedToken, mapToken) => ({
 });
 var darkTheme = {
   token: {
+    ...import_base.baseTheme.token,
     colorTextLightSolid: "#000000",
     colorBgLayout: "#000000",
     colorBgContainer: "#111111",
@@ -106,21 +108,12 @@ var darkTheme = {
     colorTextTertiary: "#888888",
     colorTextQuaternary: "#666666",
     colorPrimary: "#ffffff",
-    colorInfo: "#0070f3",
-    colorSuccess: "#50e3c2",
-    colorWarning: "#f5a623",
-    colorError: "#ee0000",
     colorFillQuaternary: "rgba(0,0,0,0)",
-    borderRadius: 5,
-    borderRadiusXS: 3,
-    borderRadiusSM: 3,
-    borderRadiusLG: 8,
-    controlHeight: 36,
     boxShadow: "0 12px 20px 6px rgb(0 0 0 / 0.08)",
     boxShadowSecondary: "0 2px 8px 2px rgb(0 0 0 / 0.07), 0 2px 4px -1px rgb(0 0 0 / 0.04)",
-    colorLinkHover: darkColorPalettes.primary[7],
-    colorLink: darkColorPalettes.primary[6],
-    colorLinkActive: darkColorPalettes.primary[5]
+    colorLinkHover: "#3291ff",
+    colorLink: "#0070f3",
+    colorLinkActive: "#0761d1"
   },
   algorithm: darkAlgorithm
 };

package/lib/styles/theme/light.js

@@ -24,13 +24,15 @@ __export(light_exports, {
 });
 module.exports = __toCommonJS(light_exports);
 var import_algorithms = require("../algorithms");
+var import_base = require("./base");
 var lightMode = (0, import_algorithms.genMapTokenAlgorithm)("light");
 var lightColorPalettes = lightMode.palettes;
 var lightTheme = {
   token: {
+    ...import_base.baseTheme.token,
     colorTextLightSolid: "#ffffff",
-    colorBgLayout: "#ffffff",
-    colorBgContainer: "#fafafa",
+    colorBgLayout: "#fafafa",
+    colorBgContainer: "#ffffff",
     colorBgElevated: "#f2f2f2",
     colorBgSpotlight: "#999999",
     colorBorder: "#eaeaea",
@@ -40,17 +42,15 @@ var lightTheme = {
     colorTextTertiary: "#666666",
     colorTextQuaternary: "#888888",
     colorPrimary: "#000000",
+    colorFill: "rgba(0,0,0,0.1)",
+    colorFillSecondary: "rgba(0,0,0,0.075)",
+    colorFillTertiary: "rgba(0,0,0,0.05)",
     colorFillQuaternary: "rgba(0,0,0,0)",
-    borderRadius: 5,
-    borderRadiusXS: 3,
-    borderRadiusSM: 3,
-    borderRadiusLG: 8,
-    controlHeight: 36,
     boxShadow: "0 12px 20px 6px rgb(104 112 118 / 0.08)",
     boxShadowSecondary: "0 2px 8px 2px rgb(104 112 118 / 0.07), 0 2px 4px -1px rgb(104 112 118 / 0.04)",
-    colorLinkHover: lightColorPalettes.primary[5],
-    colorLink: lightColorPalettes.primary[6],
-    colorLinkActive: lightColorPalettes.primary[7]
+    colorLinkHover: "#3291ff",
+    colorLink: "#0070f3",
+    colorLinkActive: "#0761d1"
   },
   algorithm: (seedToken, mapToken) => ({
     ...mapToken,

package/lib/types/index.d.ts

@@ -1,9 +1,18 @@
 import { Theme as AntdStyleTheme } from 'antd-style';
 import React from 'react';
+
 declare module 'styled-components' {
-    interface DefaultTheme extends AntdStyleTheme {
-    }
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends AntdStyleTheme {}
+}
+
+export type DivProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HTMLDivElement
+>;
+
+declare global {
+  type SvgProps = React.DetailedHTMLProps<React.HTMLAttributes<SVGSVGElement>, SVGSVGElement>;
+
+  type ImgProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLImageElement>, HTMLImageElement>;
 }
-export declare type DivProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-export declare type SvgProps = React.DetailedHTMLProps<React.HTMLAttributes<SVGSVGElement>, SVGSVGElement>;
-export declare type ImgProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLImageElement>, HTMLImageElement>;

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.1.0",
-  "description": "ui kit for lobehub",
+  "version": "1.3.0",
+  "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
-    "npm",
-    "template"
+    "lobehub",
+    "components",
+    "chatbot components",
+    "react components",
+    "react ui"
   ],
   "homepage": "https://github.com/lobehub/lobe-ui",
   "bugs": {
@@ -60,24 +63,30 @@
     ]
   },
   "dependencies": {
+    "@ant-design/icons": "^5",
     "@babel/runtime": "^7",
     "ahooks": "^3",
     "antd-style": "^3",
     "chroma-js": "^2",
     "copy-to-clipboard": "^3",
+    "leva": "^0.9.34",
     "lodash": "^4",
     "lucide-react": "latest",
     "polished": "^4",
+    "prism-react-renderer": "^2",
     "re-resizable": "^6",
     "react-layout-kit": "^1",
+    "react-markdown": "^8",
     "react-rnd": "^10",
+    "shiki-es": "^0.2",
     "styled-components": "^6.0.0-rc.1",
     "use-merge-value": "^1",
     "zustand": "^4"
   },
   "devDependencies": {
+    "@ant-design/colors": "^7",
     "@commitlint/cli": "^17",
-    "@testing-library/react": "^13",
+    "@testing-library/react": "^14",
     "@types/chroma-js": "^2",
     "@types/lodash": "^4",
     "@types/react": "^18",
@@ -87,14 +96,14 @@
     "antd": "^5",
     "commitlint": "^17",
     "commitlint-config-gitmoji": "^2",
-    "concurrently": "^7",
+    "concurrently": "^8",
     "cross-env": "^7",
     "dumi": "^2",
     "dumi-assets-types": "^1",
     "dumi-theme-lobehub": "latest",
     "eslint": "^8",
     "eslint-import-resolver-alias": "^1",
-    "eslint-import-resolver-typescript": "^2",
+    "eslint-import-resolver-typescript": "^3",
     "father": "^4",
     "husky": "^8",
     "jsdom": "^22",
@@ -104,9 +113,9 @@
     "prettier-plugin-packagejson": "^2",
     "react": "^18",
     "react-dom": "^18",
-    "semantic-release": "^20",
+    "semantic-release": "^21",
     "semantic-release-config-gitmoji": "^1",
-    "stylelint": "^14",
+    "stylelint": "^15",
     "typescript": "^5",
     "vitest": "latest"
   },

package/es/Template/index.d.ts

@@ -1,7 +0,0 @@
-import { DivProps } from "../types";
-import React from 'react';
-export interface TemplateProps extends DivProps {
-    children?: React.ReactNode;
-}
-declare const _default: React.NamedExoticComponent<TemplateProps>;
-export default _default;

package/es/ThemeProvider/token.d.ts

@@ -1,3 +0,0 @@
-import { AliasToken } from 'antd/es/theme/interface';
-export declare const darkToken: Partial<AliasToken>;
-export declare const lightToken: Partial<AliasToken>;

package/es/ThemeProvider/token.js

@@ -1,45 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-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; }
-export var darkToken = {
-  colorTextLightSolid: '#000000',
-  colorBgLayout: '#000000',
-  colorBgContainer: '#111111',
-  colorBgElevated: '#222222',
-  colorBgSpotlight: '#444444',
-  colorBorder: '#333333',
-  colorBorderSecondary: '#333333',
-  colorText: '#ffffff',
-  colorTextSecondary: '#999999',
-  colorTextTertiary: '#888888',
-  colorTextQuaternary: '#666666',
-  colorPrimary: '#ffffff',
-  colorInfo: '#0070f3',
-  colorSuccess: '#50e3c2',
-  colorWarning: '#f5a623',
-  colorError: '#ee0000',
-  colorFillQuaternary: 'rgba(0,0,0,0)',
-  borderRadius: 5,
-  borderRadiusXS: 3,
-  borderRadiusSM: 3,
-  borderRadiusLG: 8,
-  controlHeight: 36,
-  boxShadow: '0 12px 20px 6px rgb(0 0 0 / 0.08)',
-  boxShadowSecondary: '0 2px 8px 2px rgb(0 0 0 / 0.07), 0 2px 4px -1px rgb(0 0 0 / 0.04)'
-};
-export var lightToken = _objectSpread(_objectSpread({}, darkToken), {}, {
-  colorTextLightSolid: '#ffffff',
-  colorBgLayout: '#ffffff',
-  colorBgContainer: '#fafafa',
-  colorBgElevated: '#f2f2f2',
-  colorBgSpotlight: '#999999',
-  colorBorder: '#eaeaea',
-  colorBorderSecondary: '#eaeaea',
-  colorText: '#000000',
-  colorTextSecondary: '#444444',
-  colorTextTertiary: '#666666',
-  colorTextQuaternary: '#888888',
-  colorPrimary: '#000000',
-  boxShadow: '0 12px 20px 6px rgb(104 112 118 / 0.08)',
-  boxShadowSecondary: '0 2px 8px 2px rgb(104 112 118 / 0.07), 0 2px 4px -1px rgb(104 112 118 / 0.04)'
-});

package/es/types/index.js

@@ -1 +0,0 @@
-export {};

package/lib/Template/index.d.ts

@@ -1,7 +0,0 @@
-import { DivProps } from "../types";
-import React from 'react';
-export interface TemplateProps extends DivProps {
-    children?: React.ReactNode;
-}
-declare const _default: React.NamedExoticComponent<TemplateProps>;
-export default _default;

package/lib/ThemeProvider/token.d.ts

@@ -1,3 +0,0 @@
-import { AliasToken } from 'antd/es/theme/interface';
-export declare const darkToken: Partial<AliasToken>;
-export declare const lightToken: Partial<AliasToken>;

package/lib/ThemeProvider/token.js

@@ -1,73 +0,0 @@
-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/ThemeProvider/token.ts
-var token_exports = {};
-__export(token_exports, {
-  darkToken: () => darkToken,
-  lightToken: () => lightToken
-});
-module.exports = __toCommonJS(token_exports);
-var darkToken = {
-  colorTextLightSolid: "#000000",
-  colorBgLayout: "#000000",
-  colorBgContainer: "#111111",
-  colorBgElevated: "#222222",
-  colorBgSpotlight: "#444444",
-  colorBorder: "#333333",
-  colorBorderSecondary: "#333333",
-  colorText: "#ffffff",
-  colorTextSecondary: "#999999",
-  colorTextTertiary: "#888888",
-  colorTextQuaternary: "#666666",
-  colorPrimary: "#ffffff",
-  colorInfo: "#0070f3",
-  colorSuccess: "#50e3c2",
-  colorWarning: "#f5a623",
-  colorError: "#ee0000",
-  colorFillQuaternary: "rgba(0,0,0,0)",
-  borderRadius: 5,
-  borderRadiusXS: 3,
-  borderRadiusSM: 3,
-  borderRadiusLG: 8,
-  controlHeight: 36,
-  boxShadow: "0 12px 20px 6px rgb(0 0 0 / 0.08)",
-  boxShadowSecondary: "0 2px 8px 2px rgb(0 0 0 / 0.07), 0 2px 4px -1px rgb(0 0 0 / 0.04)"
-};
-var lightToken = {
-  ...darkToken,
-  colorTextLightSolid: "#ffffff",
-  colorBgLayout: "#ffffff",
-  colorBgContainer: "#fafafa",
-  colorBgElevated: "#f2f2f2",
-  colorBgSpotlight: "#999999",
-  colorBorder: "#eaeaea",
-  colorBorderSecondary: "#eaeaea",
-  colorText: "#000000",
-  colorTextSecondary: "#444444",
-  colorTextTertiary: "#666666",
-  colorTextQuaternary: "#888888",
-  colorPrimary: "#000000",
-  boxShadow: "0 12px 20px 6px rgb(104 112 118 / 0.08)",
-  boxShadowSecondary: "0 2px 8px 2px rgb(104 112 118 / 0.07), 0 2px 4px -1px rgb(104 112 118 / 0.04)"
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  darkToken,
-  lightToken
-});

package/lib/types/index.js

@@ -1,17 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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/types/index.ts
-var types_exports = {};
-module.exports = __toCommonJS(types_exports);