@lobehub/ui 1.1.0 → 1.2.0

package/lib/Logo/LogoHighContrast.d.ts

@@ -1,4 +1,3 @@
-import { SvgProps } from "../types";
 import React from 'react';
-declare const _default: React.NamedExoticComponent<SvgProps>;
+declare const _default: React.NamedExoticComponent<any>;
 export default _default;

package/lib/Logo/LogoHighContrast.js

@@ -33,26 +33,13 @@ __export(LogoHighContrast_exports, {
 });
 module.exports = __toCommonJS(LogoHighContrast_exports);
 var import_react = __toESM(require("react"));
-var LogoHighContrast = (props) => /* @__PURE__ */ import_react.default.createElement(
-  "svg",
+var LogoHighContrast = (props) => /* @__PURE__ */ import_react.default.createElement("svg", { viewBox: "0 0 320 320", fill: "currentColor", fillRule: "evenodd", ...props }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M25.401 140.14c3.71-5.453 8.81-9.628 15.313-12.838A23.89 23.89 0 0055 132.015a23.91 23.91 0 0016.053-6.159 48.924 48.924 0 0010.603-.294 56.54 56.54 0 006.809 6.555c-8.655 1.087-18.202 2.821-29.05 5.494-11.996 2.956-17.707 7.005-20.785 11.53-3.227 4.743-4.63 11.518-4.63 22.374 0 70.838 55.45 121.5 126 121.5 70.564 0 125.889-49.642 126-120.286-.751-13.724-2.613-20.518-5.764-24.763-3.023-4.073-8.262-7.153-19.898-10.42-9.615-2.7-20.317-4.252-31.506-5.103a48.977 48.977 0 006.306-6.763c2.995-1.106 6.948-.684 12.998.332l.321.054c2.498.421 5.641.95 8.543.95 5.214 0 10.234-.927 14.879-2.626 8.925 3.124 16.138 7.213 21.205 14.041 6.227 8.389 8.147 19.524 8.905 33.656l.011.214v.214c0 80.552-63.518 136.5-142 136.5-78.567 0-142-57.028-142-137.5 0-11.644 1.368-22.506 7.401-31.375z" }), /* @__PURE__ */ import_react.default.createElement("path", { d: "M195.5 145.016a50.53 50.53 0 0018.014-3.295C238.551 143.519 255 146.556 255 150c0 4.335-26.066 8.026-62.517 9.413-.201-5.525-.323-10.211-.316-14.505 1.102.071 2.214.108 3.333.108zM125 145.016a58.278 58.278 0 01-19.063-3.182C81.773 143.646 66 146.628 66 150c0 4.295 25.591 7.958 61.52 9.374.238-5.823.186-10.311-.246-14.402a59.24 59.24 0 01-2.274.044zM122.87 228c9.79-4.353 16.63-14.277 16.63-25.823 0-15.562-12.424-28.177-27.75-28.177S84 186.615 84 202.177c0 10.646 5.815 19.913 14.396 24.705 2.902-.349 5.839-.554 8.729-.554 5.259 0 10.673.678 15.745 1.672zM236 202.177c0 10.646-5.815 19.913-14.396 24.705-2.902-.349-5.839-.554-8.729-.554-5.259 0-10.673.678-15.745 1.672-9.79-4.353-16.63-14.277-16.63-25.823 0-15.562 12.424-28.177 27.75-28.177S236 186.615 236 202.177zM127 248.787S133.923 245 160 245c26.077 0 33 3.787 33 3.787S189.769 278 160 278s-33-29.213-33-29.213z" }), /* @__PURE__ */ import_react.default.createElement(
+  "path",
   {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 320 320",
-    fill: "currentColor",
-    fillRule: "evenodd",
-    ...props
-  },
-  /* @__PURE__ */ import_react.default.createElement("path", { d: "M25.401 140.14c3.71-5.453 8.81-9.628 15.313-12.838A23.89 23.89 0 0055 132.015a23.91 23.91 0 0016.053-6.159 48.924 48.924 0 0010.603-.294 56.54 56.54 0 006.809 6.555c-8.655 1.087-18.202 2.821-29.05 5.494-11.996 2.956-17.707 7.005-20.785 11.53-3.227 4.743-4.63 11.518-4.63 22.374 0 70.838 55.45 121.5 126 121.5 70.564 0 125.889-49.642 126-120.286-.751-13.724-2.613-20.518-5.764-24.763-3.023-4.073-8.262-7.153-19.898-10.42-9.615-2.7-20.317-4.252-31.506-5.103a48.977 48.977 0 006.306-6.763c2.995-1.106 6.948-.684 12.998.332l.321.054c2.498.421 5.641.95 8.543.95 5.214 0 10.234-.927 14.879-2.626 8.925 3.124 16.138 7.213 21.205 14.041 6.227 8.389 8.147 19.524 8.905 33.656l.011.214v.214c0 80.552-63.518 136.5-142 136.5-78.567 0-142-57.028-142-137.5 0-11.644 1.368-22.506 7.401-31.375z" }),
-  /* @__PURE__ */ import_react.default.createElement("path", { d: "M195.5 145.016a50.53 50.53 0 0018.014-3.295C238.551 143.519 255 146.556 255 150c0 4.335-26.066 8.026-62.517 9.413-.201-5.525-.323-10.211-.316-14.505 1.102.071 2.214.108 3.333.108zM125 145.016a58.278 58.278 0 01-19.063-3.182C81.773 143.646 66 146.628 66 150c0 4.295 25.591 7.958 61.52 9.374.238-5.823.186-10.311-.246-14.402a59.24 59.24 0 01-2.274.044zM122.87 228c9.79-4.353 16.63-14.277 16.63-25.823 0-15.562-12.424-28.177-27.75-28.177S84 186.615 84 202.177c0 10.646 5.815 19.913 14.396 24.705 2.902-.349 5.839-.554 8.729-.554 5.259 0 10.673.678 15.745 1.672zM236 202.177c0 10.646-5.815 19.913-14.396 24.705-2.902-.349-5.839-.554-8.729-.554-5.259 0-10.673.678-15.745 1.672-9.79-4.353-16.63-14.277-16.63-25.823 0-15.562 12.424-28.177 27.75-28.177S236 186.615 236 202.177zM127 248.787S133.923 245 160 245c26.077 0 33 3.787 33 3.787S189.769 278 160 278s-33-29.213-33-29.213z" }),
-  /* @__PURE__ */ import_react.default.createElement(
-    "path",
-    {
-      d: "M173 19.016c-6.188 0-10.711-2.238-15.68-4.697-6.295-3.114-13.305-6.583-25.32-6.303-20.261 0-30.93 9.751-40.896 18.86-1.54 1.408-3.064 2.8-4.604 4.14-1.958 1.702-11.5 7-16 9-19.683 8.748-34.5 21.5-34.5 40.5 0 3.789.584 7.447 1.672 10.895A23.93 23.93 0 0155 84.016c13.255 0 24 10.745 24 24 0 3.552-.772 6.925-2.157 9.959a40.472 40.472 0 008.042-1.174c8.866 12.225 23.528 20.215 40.115 20.215 3.041 0 6.018-.269 8.906-.783 1.675 7.287 2.007 14.011 1.594 23.782h49c-.359-9.741-.486-17.161-.085-24.451a42.76 42.76 0 0011.085 1.452c14.294 0 26.9-7.006 34.364-17.668 6.059-3.498 13.291-2.284 19.597-1.225 2.746.461 5.317.893 7.539.893 18.778 0 34-14.551 34-32.5 0-8.333-3.281-15.934-8.675-21.686-4.31 5.012-10.697 8.186-17.825 8.186-12.979 0-23.5-10.522-23.5-23.5 0-12.98-30.137-31.5-45-31.5-5.31 0-10.313.325-14.617.604-3.249.21-6.099.396-8.383.396zM234.307 82.5c1.181 3.012-2.694 4.293-4.517 1.62l-.021-.03-.032-.047-.031-.043c-7.483-10.536-20.012-17.444-34.206-17.444a42.498 42.498 0 00-16.163 3.166c-6.41 2.63-14.55 1.24-19.499-3.61-8.882-8.704-21.21-14.096-34.838-14.096-17.152 0-32.245 8.542-41 21.478-1.966 2.365-5.65 1.323-4.535-1.543.06-.155.12-.305.182-.451C86.968 54.2 104.516 42.016 125 42.016c13.628 0 25.956 5.392 34.838 14.097 4.949 4.85 13.089 6.24 19.499 3.609a42.498 42.498 0 0116.163-3.166c17.73 0 32.863 10.778 38.807 25.944z",
-      clipRule: "evenodd"
-    }
-  ),
-  /* @__PURE__ */ import_react.default.createElement("path", { d: "M83 20.516a9.5 9.5 0 11-19 0 9.5 9.5 0 0119 0zM264.5 65.016c8.56 0 15.5-6.94 15.5-15.5 0-8.56-6.94-15.5-15.5-15.5-8.56 0-15.5 6.94-15.5 15.5 0 8.56 6.94 15.5 15.5 15.5zM55 124.016c8.837 0 16-7.164 16-16 0-8.837-7.163-16-16-16s-16 7.163-16 16c0 8.836 7.163 16 16 16z" })
-);
+    d: "M173 19.016c-6.188 0-10.711-2.238-15.68-4.697-6.295-3.114-13.305-6.583-25.32-6.303-20.261 0-30.93 9.751-40.896 18.86-1.54 1.408-3.064 2.8-4.604 4.14-1.958 1.702-11.5 7-16 9-19.683 8.748-34.5 21.5-34.5 40.5 0 3.789.584 7.447 1.672 10.895A23.93 23.93 0 0155 84.016c13.255 0 24 10.745 24 24 0 3.552-.772 6.925-2.157 9.959a40.472 40.472 0 008.042-1.174c8.866 12.225 23.528 20.215 40.115 20.215 3.041 0 6.018-.269 8.906-.783 1.675 7.287 2.007 14.011 1.594 23.782h49c-.359-9.741-.486-17.161-.085-24.451a42.76 42.76 0 0011.085 1.452c14.294 0 26.9-7.006 34.364-17.668 6.059-3.498 13.291-2.284 19.597-1.225 2.746.461 5.317.893 7.539.893 18.778 0 34-14.551 34-32.5 0-8.333-3.281-15.934-8.675-21.686-4.31 5.012-10.697 8.186-17.825 8.186-12.979 0-23.5-10.522-23.5-23.5 0-12.98-30.137-31.5-45-31.5-5.31 0-10.313.325-14.617.604-3.249.21-6.099.396-8.383.396zM234.307 82.5c1.181 3.012-2.694 4.293-4.517 1.62l-.021-.03-.032-.047-.031-.043c-7.483-10.536-20.012-17.444-34.206-17.444a42.498 42.498 0 00-16.163 3.166c-6.41 2.63-14.55 1.24-19.499-3.61-8.882-8.704-21.21-14.096-34.838-14.096-17.152 0-32.245 8.542-41 21.478-1.966 2.365-5.65 1.323-4.535-1.543.06-.155.12-.305.182-.451C86.968 54.2 104.516 42.016 125 42.016c13.628 0 25.956 5.392 34.838 14.097 4.949 4.85 13.089 6.24 19.499 3.609a42.498 42.498 0 0116.163-3.166c17.73 0 32.863 10.778 38.807 25.944z",
+    clipRule: "evenodd"
+  }
+), /* @__PURE__ */ import_react.default.createElement("path", { d: "M83 20.516a9.5 9.5 0 11-19 0 9.5 9.5 0 0119 0zM264.5 65.016c8.56 0 15.5-6.94 15.5-15.5 0-8.56-6.94-15.5-15.5-15.5-8.56 0-15.5 6.94-15.5 15.5 0 8.56 6.94 15.5 15.5 15.5zM55 124.016c8.837 0 16-7.164 16-16 0-8.837-7.163-16-16-16s-16 7.163-16 16c0 8.836 7.163 16 16 16z" }));
 var LogoHighContrast_default = import_react.default.memo(LogoHighContrast);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {});

package/lib/Logo/LogoText.d.ts

@@ -1,4 +1,3 @@
-import { SvgProps } from "../types";
 import React from 'react';
-declare const _default: React.NamedExoticComponent<SvgProps>;
+declare const _default: React.NamedExoticComponent<any>;
 export default _default;

package/lib/Logo/index.d.ts

@@ -1,8 +1,20 @@
 import { DivProps } from "../types";
 import React from 'react';
 export interface LogoProps extends DivProps {
-    type?: '3d' | 'flat' | 'high-contrast' | 'text';
+    /**
+     * @description Type of the logo to be rendered
+     * @default '3d'
+     */
+    type?: '3d' | 'flat' | 'high-contrast' | 'text' | 'combine';
+    /**
+     * @description Size of the logo in pixels
+     * @default 32
+     */
     size?: number;
+    /**
+     * @description Additional React Node to be rendered next to the logo
+     */
+    extra?: React.ReactNode;
 }
 declare const _default: React.NamedExoticComponent<LogoProps>;
 export default _default;

package/lib/Logo/index.js

@@ -32,12 +32,25 @@ __export(Logo_exports, {
   default: () => Logo_default
 });
 module.exports = __toCommonJS(Logo_exports);
+var import_antd_style = require("antd-style");
 var import_react = __toESM(require("react"));
+var import_Divider = __toESM(require("./Divider"));
 var import_Logo3D = __toESM(require("./Logo3D"));
 var import_LogoFlat = __toESM(require("./LogoFlat"));
 var import_LogoHighContrast = __toESM(require("./LogoHighContrast"));
 var import_LogoText = __toESM(require("./LogoText"));
-var Logo = ({ type = "3d", size = 32, style, ...props }) => {
+var import_style = require("./style");
+var Logo = ({
+  type = "3d",
+  size = 32,
+  style,
+  extra,
+  className,
+  ...props
+}) => {
+  const theme = (0, import_antd_style.useTheme)();
+  const { styles, cx } = (0, import_style.useStyles)();
+  let logoComponent;
   switch (type) {
     case "3d":
       return /* @__PURE__ */ import_react.default.createElement(import_Logo3D.default, { style: { height: size, width: size, ...style }, ...props });
@@ -47,7 +60,11 @@ var Logo = ({ type = "3d", size = 32, style, ...props }) => {
       return /* @__PURE__ */ import_react.default.createElement(import_LogoHighContrast.default, { style: { height: size, width: size, ...style }, ...props });
     case "text":
       return /* @__PURE__ */ import_react.default.createElement(import_LogoText.default, { style: { height: size, width: "auto", ...style }, ...props });
+    case "combine":
+      logoComponent = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Logo3D.default, { style: { height: size, width: size } }), /* @__PURE__ */ import_react.default.createElement(import_LogoText.default, { style: { marginLeft: Math.round(size / 4), height: size, width: "auto" } }));
   }
+  const extraSize = Math.round(size / 3 * 2);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: cx(styles.flexCenter, className), style, ...props }, logoComponent, extra && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Divider.default, { style: { height: extraSize, width: extraSize, color: theme.colorBorder } }), /* @__PURE__ */ import_react.default.createElement("div", { className: styles.extraTitle, style: { fontSize: extraSize } }, extra)));
 };
 var Logo_default = import_react.default.memo(Logo);
 // Annotate the CommonJS export names for ESM import in node:

package/lib/Logo/style.d.ts

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

package/lib/Logo/style.js

@@ -0,0 +1,41 @@
+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/Logo/style.ts
+var style_exports = {};
+__export(style_exports, {
+  useStyles: () => useStyles
+});
+module.exports = __toCommonJS(style_exports);
+var import_antd_style = require("antd-style");
+var useStyles = (0, import_antd_style.createStyles)(({ css }) => {
+  return {
+    flexCenter: css`
+      display: flex;
+      align-items: center;
+    `,
+    extraTitle: css`
+      white-space: nowrap;
+      font-weight: 200;
+    `
+  };
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStyles
+});

package/lib/SideNav/index.d.ts

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

package/lib/StroyBook/index.d.ts

@@ -0,0 +1,18 @@
+import { DivProps } from "../types";
+import { useControls, useCreateStore } from 'leva';
+import React from 'react';
+export { useCreateStore, useControls };
+export interface StroyBookProps extends DivProps {
+    /**
+     * @description The Leva store instance to be used by the component
+     * @type levaStore
+     */
+    levaStore: any;
+    /**
+     * @description If use padding around component
+     */
+    noPadding?: boolean;
+}
+export declare const StroyBook: React.FC<StroyBookProps>;
+declare const _default: React.NamedExoticComponent<StroyBookProps>;
+export default _default;

package/lib/StroyBook/index.js

@@ -0,0 +1,58 @@
+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/StroyBook/index.tsx
+var StroyBook_exports = {};
+__export(StroyBook_exports, {
+  StroyBook: () => StroyBook,
+  default: () => StroyBook_default,
+  useControls: () => import_leva.useControls,
+  useCreateStore: () => import_leva.useCreateStore
+});
+module.exports = __toCommonJS(StroyBook_exports);
+var import__ = require("../index");
+var import_leva = require("leva");
+var import_react = __toESM(require("react"));
+var import_style = require("./style");
+var StroyBook = ({
+  levaStore,
+  noPadding,
+  className,
+  children,
+  ...props
+}) => {
+  const { styles, cx } = (0, import_style.useStyles)(noPadding);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: cx(styles.editor, className), ...props }, /* @__PURE__ */ import_react.default.createElement("div", { className: styles.left }, children), /* @__PURE__ */ import_react.default.createElement(import__.DraggablePanel, { className: styles.right, placement: "right" }, /* @__PURE__ */ import_react.default.createElement(import_leva.LevaPanel, { fill: true, store: levaStore, titleBar: false, flat: true }), " "));
+};
+var StroyBook_default = import_react.default.memo(StroyBook);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StroyBook,
+  useControls,
+  useCreateStore
+});

package/lib/StroyBook/style.d.ts

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

package/lib/StroyBook/style.js

@@ -0,0 +1,75 @@
+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/StroyBook/style.ts
+var style_exports = {};
+__export(style_exports, {
+  useStyles: () => useStyles
+});
+module.exports = __toCommonJS(style_exports);
+var import_antd_style = require("antd-style");
+var useStyles = (0, import_antd_style.createStyles)(({ css, token }, noPadding) => {
+  return {
+    editor: css`
+      display: flex;
+      align-items: stretch;
+      justify-content: stretch;
+      width: inherit;
+      min-height: inherit;
+    `,
+    left: css`
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      ${!noPadding && css`
+        padding: 40px 24px;
+      `}
+    `,
+    right: css`
+      --leva-sizes-controlWidth: 66%;
+      --leva-colors-elevation1: ${token.colorFillSecondary};
+      --leva-colors-elevation2: transparent;
+      --leva-colors-elevation3: ${token.colorFillSecondary};
+      --leva-colors-accent1: ${token.colorPrimary};
+      --leva-colors-accent2: ${token.colorPrimaryHover};
+      --leva-colors-accent3: ${token.colorPrimaryActive};
+      --leva-colors-highlight1: ${token.colorTextTertiary};
+      --leva-colors-highlight2: ${token.colorTextSecondary};
+      --leva-colors-highlight3: ${token.colorText};
+      --leva-colors-vivid1: ${token.colorWarning};
+      --leva-shadows-level1: unset;
+      --leva-shadows-level2: unset;
+      padding: 6px 0;
+      background: ${token.colorBgLayout};
+      > div {
+        background: transparent;
+        > div {
+          background: transparent;
+        }
+      }
+      input:checked + label > svg {
+        stroke: ${token.colorBorder};
+      }
+    `
+  };
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStyles
+});

package/lib/TabsNav/index.d.ts

@@ -0,0 +1,22 @@
+import { TabsProps } from 'antd';
+import React from 'react';
+export interface TabsNavProps {
+    /**
+     * @description Additional className to apply to the component
+     */
+    className?: string;
+    /**
+     * @description Callback function that is triggered when a tab is changed
+     */
+    onChange?: (activeKey: string) => void;
+    /**
+     * @description An array of objects representing the tabs to be rendered
+     */
+    items?: TabsProps['items'];
+    /**
+     * @description The key of the active tab
+     */
+    activeKey?: TabsProps['activeKey'];
+}
+declare const _default: React.NamedExoticComponent<TabsNavProps>;
+export default _default;

package/lib/{Template → TabsNav}/index.js

@@ -26,16 +26,19 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/Template/index.tsx
-var Template_exports = {};
-__export(Template_exports, {
-  default: () => Template_default
+// src/TabsNav/index.tsx
+var TabsNav_exports = {};
+__export(TabsNav_exports, {
+  default: () => TabsNav_default
 });
-module.exports = __toCommonJS(Template_exports);
+module.exports = __toCommonJS(TabsNav_exports);
+var import_antd = require("antd");
 var import_react = __toESM(require("react"));
-var Template = ({ children, ...props }) => {
-  return /* @__PURE__ */ import_react.default.createElement("div", { ...props }, children);
+var import_style = require("./style");
+var TabsNav = ({ className, ...props }) => {
+  const { styles, cx } = (0, import_style.useStyles)();
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.Tabs, { className: cx(styles.tabs, className), ...props });
 };
-var Template_default = import_react.default.memo(Template);
+var TabsNav_default = import_react.default.memo(TabsNav);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {});

package/lib/TabsNav/style.d.ts

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

package/lib/TabsNav/style.js

@@ -0,0 +1,65 @@
+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/TabsNav/style.ts
+var style_exports = {};
+__export(style_exports, {
+  useStyles: () => useStyles
+});
+module.exports = __toCommonJS(style_exports);
+var import_antd_style = require("antd-style");
+var useStyles = (0, import_antd_style.createStyles)(({ css, token, prefixCls }) => {
+  const prefix = `.${prefixCls}-tabs`;
+  const marginHoriz = 16;
+  const paddingVertical = 6;
+  return {
+    tabs: css`
+      ${prefix}-tab + ${prefix}-tab {
+        margin: ${marginHoriz}px 4px !important;
+        padding: 0 12px !important;
+      }
+
+      ${prefix}-tab {
+        color: ${token.colorTextSecondary};
+        transition: background-color 100ms ease-out;
+
+        &:first-child {
+          margin: ${marginHoriz}px 4px ${marginHoriz}px 0;
+          padding: ${paddingVertical}px 12px !important;
+        }
+
+        &:hover {
+          color: ${token.colorText} !important;
+          background: ${token.colorFillTertiary};
+          border-radius: ${token.borderRadius}px;
+        }
+      }
+
+      ${prefix}-nav {
+        margin-bottom: 0;
+        &::before {
+          display: none;
+        }
+      }
+    `
+  };
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStyles
+});

package/lib/ThemeProvider/GlobalStyle.js

@@ -26,20 +26,24 @@ var import_antd_style = require("antd-style");
 var GlobalStyle = import_antd_style.createGlobalStyle`
 
   body {
-    font-family: "AliPuHui", ${({ theme }) => theme.fontFamily};
-    font-size: ${({ theme }) => theme.fontSize};
+    font-family: 'Segoe UI', SegoeUI, AliPuHui, ${({ theme }) => theme.fontFamily};
+    font-size: ${({ theme }) => theme.fontSize}px;
     line-height: 1;
     color: ${({ theme }) => theme.colorTextBase};
 
     margin: 0;
     padding: 0;
     background-color: ${(p) => p.theme.colorBgLayout};
-
   }
 
   * {
     box-sizing: border-box;
   }
+  
+  #root {
+	  min-height: 100vh;
+	  width: 100vw;
+  }
 
   @font-face {
     font-family: AliPuHui;

package/lib/ThemeProvider/index.js

@@ -60,7 +60,7 @@ var ThemeProvider = ({ token, children, themeMode }) => {
       customToken: getCustomToken
     },
     /* @__PURE__ */ import_react.default.createElement(import_GlobalStyle.default, null),
-    /* @__PURE__ */ import_react.default.createElement(import_antd.App, null, children)
+    /* @__PURE__ */ import_react.default.createElement(import_antd.App, { style: { minHeight: "inherit", width: "inherit" } }, children)
   ));
 };
 var ThemeProvider_default = ThemeProvider;

package/lib/ThemeSwitch/index.d.ts

@@ -0,0 +1,27 @@
+import { type ActionIconSize } from "../index";
+import { DivProps } from "../types";
+import { ThemeMode } from 'antd-style';
+import React from 'react';
+export interface ThemeSwitchProps extends DivProps {
+    /**
+     * @description Size of the action icon
+     * @default {
+     *   blockSize: 34,
+     *   fontSize: 20,
+     *   strokeWidth: 1.5,
+     * }
+     */
+    size?: ActionIconSize;
+    /**
+     * @description The theme mode of the component
+     * @type ThemeMode
+     */
+    themeMode: ThemeMode;
+    /**
+     * @description Callback function when the theme mode is switched
+     * @type {(themeMode: ThemeMode) => void}
+     */
+    onThemeSwitch: (themeMode: ThemeMode) => void;
+}
+declare const _default: React.NamedExoticComponent<ThemeSwitchProps>;
+export default _default;

package/lib/ThemeSwitch/index.js

@@ -0,0 +1,67 @@
+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/ThemeSwitch/index.tsx
+var ThemeSwitch_exports = {};
+__export(ThemeSwitch_exports, {
+  default: () => ThemeSwitch_default
+});
+module.exports = __toCommonJS(ThemeSwitch_exports);
+var import__ = require("../index");
+var import_antd = require("antd");
+var import_lucide_react = require("lucide-react");
+var import_react = __toESM(require("react"));
+var icons = {
+  auto: import_lucide_react.Monitor,
+  light: import_lucide_react.Sun,
+  dark: import_lucide_react.Moon
+};
+var items = [
+  { label: "System", icon: /* @__PURE__ */ import_react.default.createElement(import__.Icon, { size: "small", icon: icons.auto }), key: "auto" },
+  { label: "Light", icon: /* @__PURE__ */ import_react.default.createElement(import__.Icon, { size: "small", icon: icons.light }), key: "light" },
+  { label: "Dark", icon: /* @__PURE__ */ import_react.default.createElement(import__.Icon, { size: "small", icon: icons.dark }), key: "dark" }
+];
+var ThemeSwitch = ({
+  size = {
+    blockSize: 34,
+    fontSize: 20,
+    strokeWidth: 1.5
+  },
+  themeMode,
+  onThemeSwitch,
+  ...props
+}) => {
+  const menuProps = {
+    items,
+    onClick: (e) => onThemeSwitch(e.key)
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.Dropdown, { menu: menuProps, trigger: ["click"], ...props }, /* @__PURE__ */ import_react.default.createElement(import__.ActionIcon, { size, icon: icons[themeMode] }));
+};
+var ThemeSwitch_default = import_react.default.memo(ThemeSwitch);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/index.d.ts

@@ -1,6 +1,9 @@
-export { default as ActionIcon, type ActionIconProps } from './ActionIcon';
+export { default as ActionIcon, type ActionIconProps, type ActionIconSize } from './ActionIcon';
 export { default as DraggablePanel, type DraggablePanelProps } from './DraggablePanel';
-export { default as Logo } from './Logo';
+export { default as Icon, type IconProps, type IconSize } from './Icon';
+export { default as Logo, type LogoProps } from './Logo';
 export { default as SideNav, type SideNavProps } from './SideNav';
-export { default as Template, type TemplateProps } from './Template';
+export { default as StroyBook, useControls, useCreateStore, type StroyBookProps, } from './StroyBook';
+export { default as TabsNav, type TabsNavProps } from './TabsNav';
 export { default as ThemeProvider } from './ThemeProvider';
+export { default as ThemeSwitch, type ThemeSwitchProps } from './ThemeSwitch';