@lobehub/ui 1.1.0 → 1.3.0

package/lib/Swatches/index.js

@@ -0,0 +1,68 @@
+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/Swatches/index.tsx
+var Swatches_exports = {};
+__export(Swatches_exports, {
+  default: () => Swatches_default
+});
+module.exports = __toCommonJS(Swatches_exports);
+var import_antd_style = require("antd-style");
+var import_react = require("react");
+var import_react_layout_kit = require("react-layout-kit");
+var Swatches = (0, import_react.memo)(({ colors, activeColor, onSelect }) => {
+  const theme = (0, import_antd_style.useTheme)();
+  return /* @__PURE__ */ React.createElement(import_react_layout_kit.Flexbox, { horizontal: true, gap: 8 }, /* @__PURE__ */ React.createElement(
+    import_react_layout_kit.Flexbox,
+    {
+      style: {
+        width: 24,
+        height: 24,
+        background: theme.colorBgContainer,
+        boxShadow: `inset 0 0 0px 2px ${!activeColor ? theme.colorPrimary : "rgba(0,0,0,0.1)"}`,
+        borderRadius: "50%",
+        cursor: "pointer"
+      },
+      onClick: () => {
+        onSelect == null ? void 0 : onSelect(null);
+      }
+    }
+  ), colors.map((c) => {
+    const borderColor = c === activeColor ? theme.colorPrimary : "rgba(0,0,0,0.1)";
+    return /* @__PURE__ */ React.createElement(
+      import_react_layout_kit.Flexbox,
+      {
+        key: c,
+        style: {
+          width: 24,
+          height: 24,
+          background: c,
+          boxShadow: `inset 0 0 0px 2px ${borderColor}`,
+          borderRadius: "50%",
+          cursor: "pointer"
+        },
+        onClick: () => {
+          onSelect == null ? void 0 : onSelect(c);
+        }
+      }
+    );
+  }));
+});
+var Swatches_default = Swatches;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/TabsNav/index.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { TabsProps } from 'antd';
+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 TabsNav: import("react").NamedExoticComponent<TabsNavProps>;
+export default TabsNav;

package/lib/TabsNav/index.js

@@ -0,0 +1,34 @@
+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/index.tsx
+var TabsNav_exports = {};
+__export(TabsNav_exports, {
+  default: () => TabsNav_default
+});
+module.exports = __toCommonJS(TabsNav_exports);
+var import_antd = require("antd");
+var import_react = require("react");
+var import_style = require("./style");
+var TabsNav = (0, import_react.memo)(({ className, ...props }) => {
+  const { styles, cx } = (0, import_style.useStyles)();
+  return /* @__PURE__ */ React.createElement(import_antd.Tabs, { className: cx(styles.tabs, className), ...props });
+});
+var TabsNav_default = 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,8 +26,8 @@ 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: ${({ theme }) => theme.fontFamily};
+    font-size: ${({ theme }) => theme.fontSize}px;
     line-height: 1;
     color: ${({ theme }) => theme.colorTextBase};
 
@@ -35,12 +35,18 @@ var GlobalStyle = import_antd_style.createGlobalStyle`
     padding: 0;
     background-color: ${(p) => p.theme.colorBgLayout};
 
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
   * {
     box-sizing: border-box;
   }
 
+  #root {
+	  min-height: 100vh;
+  }
+
   @font-face {
     font-family: AliPuHui;
     font-weight: normal;
@@ -60,8 +66,8 @@ var GlobalStyle = import_antd_style.createGlobalStyle`
 
   /* 定义滚动槽的样式 */
   ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
+    width: 0;
+    height: 4px;
     margin-right: 4px;
     background-color: transparent; // 定义滚动槽的背景色
 

package/lib/ThemeProvider/index.d.ts

@@ -1,10 +1,25 @@
 import { extractStaticStyle, type ThemeMode } from 'antd-style';
 import React from 'react';
 export interface ThemeProviderProps {
+    /**
+     * @description Custom tokens to be used in the theme
+     */
     token?: any;
+    /**
+     * @description The children of the ThemeProvider component
+     */
     children: React.ReactNode;
+    /**
+     * @description The mode of the theme (light or dark)
+     */
     themeMode?: ThemeMode;
+    /**
+     * @description Whether to inline the styles on server-side rendering or not
+     */
     ssrInline?: boolean;
+    /**
+     * @description Cache for the extracted static styles
+     */
     cache?: typeof extractStaticStyle.cache;
 }
 declare const ThemeProvider: React.FC<ThemeProviderProps>;

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 @@
+/// <reference types="react" />
+import { type ActionIconSize } from "..";
+import { ThemeMode } from 'antd-style';
+import { DivProps } from "../types";
+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 ThemeSwitch: import("react").NamedExoticComponent<ThemeSwitchProps>;
+export default ThemeSwitch;

package/lib/ThemeSwitch/index.js

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

package/lib/Tooltip/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TooltipProps as AntdTooltipProps } from 'antd';
+export declare type TooltipProps = AntdTooltipProps;
+declare const Tooltip: import("react").NamedExoticComponent<AntdTooltipProps>;
+export default Tooltip;

package/lib/Tooltip/index.js

@@ -0,0 +1,34 @@
+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/Tooltip/index.tsx
+var Tooltip_exports = {};
+__export(Tooltip_exports, {
+  default: () => Tooltip_default
+});
+module.exports = __toCommonJS(Tooltip_exports);
+var import_antd = require("antd");
+var import_react = require("react");
+var import_style = require("./style");
+var Tooltip = (0, import_react.memo)(({ className, ...props }) => {
+  const { styles, cx } = (0, import_style.useStyles)();
+  return /* @__PURE__ */ React.createElement(import_antd.Tooltip, { overlayClassName: cx(styles.tooltip, className), ...props });
+});
+var Tooltip_default = Tooltip;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/Tooltip/style.d.ts

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

package/lib/Tooltip/style.js

@@ -0,0 +1,51 @@
+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/Tooltip/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 }) => {
+  return {
+    tooltip: css`
+      .ant-tooltip-inner {
+        background-color: ${token.colorText};
+        color: ${token.colorBgLayout};
+        padding: 4px 8px;
+        border-radius: ${token.borderRadiusSM}px;
+        min-height: unset;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .ant-tooltip-arrow {
+        &:before,
+        &:after {
+          background: ${token.colorText};
+        }
+      }
+    `
+  };
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStyles
+});

package/lib/hooks/useCopied.d.ts

@@ -0,0 +1,4 @@
+export declare const useCopied: () => {
+    copied: boolean;
+    setCopied: () => void;
+};

package/lib/hooks/useCopied.js

@@ -0,0 +1,44 @@
+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/hooks/useCopied.ts
+var useCopied_exports = {};
+__export(useCopied_exports, {
+  useCopied: () => useCopied
+});
+module.exports = __toCommonJS(useCopied_exports);
+var import_react = require("react");
+var useCopied = () => {
+  const [copied, setCopy] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (!copied)
+      return;
+    const timer = setTimeout(() => {
+      setCopy(false);
+    }, 2e3);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [copied]);
+  const setCopied = (0, import_react.useCallback)(() => setCopy(true), []);
+  return (0, import_react.useMemo)(() => ({ copied, setCopied }), [copied]);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useCopied
+});

package/lib/hooks/useHighlight.d.ts

@@ -0,0 +1,36 @@
+import { Highlighter, Theme } from 'shiki-es';
+export interface ShikiSyntaxTheme {
+    /**
+     * @title 暗色模式主题
+     */
+    dark: Theme;
+    /**
+     * @title 亮色模式主题
+     */
+    light: Theme;
+}
+export declare const languageMap: readonly ["javascript", "js", "jsx", "json", "markdown", "md", "less", "css", "typescript", "ts", "tsx", "diff", "bash"];
+/**
+ * @title 代码高亮的存储对象
+ */
+interface Store {
+    /**
+     * @title 高亮器对象
+     */
+    highlighter?: Highlighter;
+    /**
+     * @title 初始化高亮器对象
+     * @returns 初始化 Promise 对象
+     */
+    initHighlighter: () => Promise<void>;
+    /**
+     * @title 将代码转化为 HTML 字符串
+     * @param text - 代码文本
+     * @param language - 代码语言
+     * @param isDarkMode - 是否为暗黑模式
+     * @returns HTML 字符串
+     */
+    codeToHtml: (text: string, language: string, isDarkMode: boolean) => string;
+}
+export declare const useHighlight: import("zustand").UseBoundStore<import("zustand").StoreApi<Store>>;
+export {};

package/lib/hooks/useHighlight.js

@@ -0,0 +1,76 @@
+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/hooks/useHighlight.ts
+var useHighlight_exports = {};
+__export(useHighlight_exports, {
+  languageMap: () => languageMap,
+  useHighlight: () => useHighlight
+});
+module.exports = __toCommonJS(useHighlight_exports);
+var import_shiki_es = require("shiki-es");
+var import_zustand = require("zustand");
+var THEME = {
+  dark: "material-darker",
+  light: "material-lighter"
+};
+var languageMap = [
+  "javascript",
+  "js",
+  "jsx",
+  "json",
+  "markdown",
+  "md",
+  "less",
+  "css",
+  "typescript",
+  "ts",
+  "tsx",
+  "diff",
+  "bash"
+];
+var useHighlight = (0, import_zustand.create)((set, get) => ({
+  highlighter: void 0,
+  initHighlighter: async () => {
+    if (!get().highlighter) {
+      const highlighter = await (0, import_shiki_es.getHighlighter)({
+        langs: languageMap,
+        themes: Object.values(THEME)
+      });
+      set({ highlighter });
+    }
+  },
+  codeToHtml: (text, language, isDarkMode) => {
+    const { highlighter } = get();
+    if (!highlighter)
+      return "";
+    try {
+      return highlighter == null ? void 0 : highlighter.codeToHtml(text, {
+        lang: language,
+        theme: isDarkMode ? THEME.dark : THEME.light
+      });
+    } catch (e) {
+      return text;
+    }
+  }
+}));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  languageMap,
+  useHighlight
+});

package/lib/index.d.ts

@@ -1,6 +1,18 @@
-export { default as ActionIcon, type ActionIconProps } from './ActionIcon';
+export { default as ActionIcon, type ActionIconProps, type ActionIconSize } from './ActionIcon';
+export { default as CopyButton, type CopyButtonProps } from './CopyButton';
 export { default as DraggablePanel, type DraggablePanelProps } from './DraggablePanel';
-export { default as Logo } from './Logo';
+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 { default as Logo, type LogoProps } from './Logo';
+export { default as Markdown, type MarkdownProps } from './Markdown';
+export { default as MessageInput, type MessageInputProps } from './MessageInput';
+export { default as SearchBar, type SearchBarProps } from './SearchBar';
 export { default as SideNav, type SideNavProps } from './SideNav';
-export { default as Template, type TemplateProps } from './Template';
+export { default as Snippet, type SnippetProps } from './Snippet';
+export { default as StroyBook, useControls, useCreateStore, type StroyBookProps, } from './StroyBook';
+export { default as Swatches, type SwatchesProps } from './Swatches';
+export { default as TabsNav, type TabsNavProps } from './TabsNav';
 export { default as ThemeProvider } from './ThemeProvider';
+export { default as ThemeSwitch, type ThemeSwitchProps } from './ThemeSwitch';
+export { default as Tooltip, type TooltipProps } from './Tooltip';