@lobehub/ui 1.1.0 → 1.3.0

package/lib/Markdown/style.js

@@ -0,0 +1,64 @@
+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/Markdown/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, isDarkMode }) => {
+  return {
+    container: css`
+      p {
+        margin: 20px auto;
+        line-height: 2;
+        word-wrap: break-word;
+        font-size: 14px;
+        color: ${token.colorText};
+      }
+
+      p:not(:last-child) {
+        margin-bottom: 1em;
+      }
+
+      blockquote p {
+        color: ${token.colorTextDescription};
+      }
+
+      ol,
+      ul {
+        li {
+          line-height: 2;
+          display: list-item;
+        }
+      }
+    `,
+    code: css`
+      padding: 2px 4px;
+      font-family: ${token.fontFamilyCode} !important;
+      color: ${isDarkMode ? token.cyan8 : token.pink7};
+      border-radius: 4px;
+    `
+  };
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStyles
+});

package/lib/MessageInput/index.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { ButtonProps } from 'antd';
+/**
+ * @title MessageInputProps
+ * @category Props
+ * @description MessageInput 组件的 Props
+ */
+export interface MessageInputProps {
+    /**
+     * @title 确认回调函数
+     * @description 用户点击确认按钮后的回调函数
+     * @param text - 用户输入的文本
+     */
+    onConfirm?: (text: string) => void;
+    /**
+     * @title 取消回调函数
+     * @description 用户点击取消按钮后的回调函数
+     */
+    onCancel?: () => void;
+    /**
+     * @title 默认值
+     * @description 输入框的默认值
+     */
+    defaultValue?: string;
+    /**
+     * @title 渲染按钮
+     * @description 自定义渲染底部按钮
+     * @param text - 用户输入的文本
+     */
+    renderButtons?: (text: string) => ButtonProps[];
+    height?: number;
+    className?: string;
+}
+declare const MessageInput: import("react").NamedExoticComponent<MessageInputProps>;
+export default MessageInput;

package/lib/MessageInput/index.js

@@ -0,0 +1,58 @@
+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/MessageInput/index.tsx
+var MessageInput_exports = {};
+__export(MessageInput_exports, {
+  default: () => MessageInput_default
+});
+module.exports = __toCommonJS(MessageInput_exports);
+var import_antd = require("antd");
+var import_antd_style = require("antd-style");
+var import_react = require("react");
+var import_react_layout_kit = require("react-layout-kit");
+var MessageInput = (0, import_react.memo)(
+  ({ onCancel, defaultValue, onConfirm, renderButtons, height, className }) => {
+    const [tempSystemRole, setRole] = (0, import_react.useState)(defaultValue || "");
+    return /* @__PURE__ */ React.createElement(import_react_layout_kit.Flexbox, { gap: 8 }, /* @__PURE__ */ React.createElement(
+      import_antd.Input.TextArea,
+      {
+        value: tempSystemRole,
+        allowClear: true,
+        placeholder: "例如：你是一名擅长翻译的翻译官，请将用户所输入的英文都翻译为中文。",
+        style: { height: height ?? 200 },
+        onChange: (e) => {
+          setRole(e.target.value);
+        },
+        className: (0, import_antd_style.cx)("nowheel", className)
+      }
+    ), /* @__PURE__ */ React.createElement(import_react_layout_kit.Flexbox, { direction: "horizontal-reverse", gap: 8 }, renderButtons ? renderButtons(tempSystemRole).map((buttonProps, index) => /* @__PURE__ */ React.createElement(import_antd.Button, { key: index, ...buttonProps })) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      import_antd.Button,
+      {
+        type: "primary",
+        onClick: () => {
+          onConfirm == null ? void 0 : onConfirm(tempSystemRole);
+        }
+      },
+      "设定"
+    ), /* @__PURE__ */ React.createElement(import_antd.Button, { type: "text", onClick: onCancel }, "取消"))));
+  }
+);
+var MessageInput_default = MessageInput;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/SearchBar/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { InputProps } from 'antd';
+export declare type SearchBarProps = InputProps;
+declare const SearchBar: import("react").MemoExoticComponent<({ value, onChange, style, placeholder, ...props }: SearchBarProps) => import("react/jsx-runtime").JSX.Element>;
+export default SearchBar;

package/lib/SearchBar/index.js

@@ -0,0 +1,42 @@
+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/SearchBar/index.tsx
+var SearchBar_exports = {};
+__export(SearchBar_exports, {
+  default: () => SearchBar_default
+});
+module.exports = __toCommonJS(SearchBar_exports);
+var import_icons = require("@ant-design/icons");
+var import_antd = require("antd");
+var import_react = require("react");
+var SearchBar = (0, import_react.memo)(({ value, onChange, style, placeholder, ...props }) => /* @__PURE__ */ React.createElement(
+  import_antd.Input,
+  {
+    prefix: /* @__PURE__ */ React.createElement(import_icons.SearchOutlined, null),
+    allowClear: true,
+    value,
+    placeholder: placeholder ?? "Search",
+    style: { ...style, borderColor: "transparent" },
+    onChange,
+    ...props
+  }
+));
+var SearchBar_default = SearchBar;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/SideNav/index.d.ts

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

package/lib/SideNav/index.js

@@ -1,8 +1,6 @@
-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)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   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/SideNav/index.tsx
@@ -33,26 +23,12 @@ __export(SideNav_exports, {
 });
 module.exports = __toCommonJS(SideNav_exports);
 var import_antd = require("antd");
-var import_react = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var Layout = import_styled_components.default.div`
-  display: flex;
-  flex: none;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-
-  width: 64px;
-  height: 100%;
-  min-height: 640px;
-  padding: 16px 0;
-
-  background: ${({ theme }) => theme.colorBgContainer};
-  border-right: 1px solid ${({ theme }) => theme.colorBorder};
-`;
-var SideNav = ({ avatar, topActions, bottomActions, ...props }) => {
-  return /* @__PURE__ */ import_react.default.createElement(Layout, { ...props }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 16, direction: "vertical", align: "center" }, avatar, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 8, direction: "vertical", align: "center" }, topActions)), /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 4, direction: "vertical", align: "center" }, bottomActions));
-};
-var SideNav_default = import_react.default.memo(SideNav);
+var import_react = require("react");
+var import_style = require("./style");
+var SideNav = (0, import_react.memo)(({ className, avatar, topActions, bottomActions, ...props }) => {
+  const { styles, cx } = (0, import_style.useStyles)();
+  return /* @__PURE__ */ React.createElement("div", { className: cx(styles, className), ...props }, /* @__PURE__ */ React.createElement(import_antd.Space, { size: 16, direction: "vertical", align: "center" }, avatar, /* @__PURE__ */ React.createElement(import_antd.Space, { size: 8, direction: "vertical", align: "center" }, topActions)), /* @__PURE__ */ React.createElement(import_antd.Space, { size: 4, direction: "vertical", align: "center" }, bottomActions));
+});
+var SideNav_default = SideNav;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {});

package/lib/SideNav/style.d.ts

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

package/lib/SideNav/style.js

@@ -0,0 +1,46 @@
+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/SideNav/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 }) => css`
+      display: flex;
+      flex: none;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+
+      width: 64px;
+      height: 100%;
+      min-height: 640px;
+      padding: 16px 0;
+
+      background: ${token.colorBgContainer};
+      border-right: 1px solid ${token.colorBorder};
+    `
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStyles
+});

package/lib/Snippet/index.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { DivProps } from "../types";
+export interface SnippetProps extends DivProps {
+    /**
+     * @description The content to be displayed inside the Snippet component
+     */
+    children: string;
+    /**
+     * @description The symbol to be displayed before the content inside the Snippet component
+     */
+    symbol?: string;
+    /**
+     * @description The language of the content inside the Snippet component
+     * @default 'tsx'
+     */
+    language?: string;
+    /**
+     * @description Whether the Snippet component is copyable or not
+     * @default true
+     */
+    copyable?: boolean;
+    /**
+     * @description The type of the Snippet component
+     * @default 'ghost'
+     */
+    type?: 'ghost' | 'block';
+}
+declare const Snippet: import("react").NamedExoticComponent<SnippetProps>;
+export default Snippet;

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

@@ -26,16 +26,22 @@ 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/Snippet/index.tsx
+var Snippet_exports = {};
+__export(Snippet_exports, {
+  default: () => Snippet_default
 });
-module.exports = __toCommonJS(Template_exports);
-var import_react = __toESM(require("react"));
-var Template = ({ children, ...props }) => {
-  return /* @__PURE__ */ import_react.default.createElement("div", { ...props }, children);
-};
-var Template_default = import_react.default.memo(Template);
+module.exports = __toCommonJS(Snippet_exports);
+var import_react = require("react");
+var import_CopyButton = __toESM(require("../CopyButton"));
+var import_Highlighter = require("../Highlighter");
+var import_style = require("./style");
+var Snippet = (0, import_react.memo)(
+  ({ symbol, language = "tsx", children, copyable = true, type = "ghost", ...props }) => {
+    const { styles } = (0, import_style.useStyles)(type);
+    return /* @__PURE__ */ React.createElement("div", { className: styles, ...props }, /* @__PURE__ */ React.createElement(import_Highlighter.SyntaxHighlighter, { language }, [symbol, children].filter(Boolean).join(" ")), copyable && /* @__PURE__ */ React.createElement(import_CopyButton.default, { size: { fontSize: 14, blockSize: 24 }, content: children }));
+  }
+);
+var Snippet_default = Snippet;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {});

package/lib/Snippet/style.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: "block" | "ghost" | undefined) => import("antd-style").ReturnStyles<import("antd-style").SerializedStyles>;

package/lib/Snippet/style.js

@@ -0,0 +1,71 @@
+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/Snippet/style.ts
+var style_exports = {};
+__export(style_exports, {
+  useStyles: () => useStyles
+});
+module.exports = __toCommonJS(style_exports);
+var import_antd_style = require("antd-style");
+var import_polished = require("polished");
+var useStyles = (0, import_antd_style.createStyles)(
+  ({ css, token }, type) => css`
+      display: flex;
+      max-width: 100%;
+      position: relative;
+      align-items: center;
+      border-radius: ${token.borderRadius}px;
+      gap: 8px;
+      padding: 0 8px;
+      height: 36px;
+      transition:  background-color 100ms ${token.motionEaseOut};
+
+      ${type === "block" ? css`
+              background-color: ${(0, import_polished.rgba)(token.colorBgElevated, 0.6)};
+            ` : css`
+              border: 1px solid ${token.colorBorder};
+            `}
+
+      &:hover {
+        background-color: ${token.colorFillTertiary};
+      }
+
+      .ant-highlighter-shiki {
+        overflow: auto;
+        flex: 1;
+      }
+      .prism-code {
+        background: none !important;
+      }
+
+      pre {
+        background: none !important;
+        padding-top: 6px; !important;
+        margin: 0 !important;
+        line-height: 1;
+      }
+      code[class*='language-'] {
+        background: none !important;
+      }
+    `
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStyles
+});

package/lib/StroyBook/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { DivProps } from "../types";
+import { useControls, useCreateStore } from 'leva';
+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: import("react").NamedExoticComponent<StroyBookProps>;
+export default StroyBook;

package/lib/StroyBook/index.js

@@ -0,0 +1,65 @@
+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_antd_style = require("antd-style");
+var import_leva = require("leva");
+var import_react = require("react");
+var import_DraggablePanel = __toESM(require("../DraggablePanel"));
+var import_style = require("./style");
+var StroyBook = (0, import_react.memo)(
+  ({ levaStore, noPadding, className, children, ...props }) => {
+    const { mobile } = (0, import_antd_style.useResponsive)();
+    const { styles, cx } = (0, import_style.useStyles)({ noPadding: Boolean(noPadding), mobile: Boolean(mobile) });
+    return /* @__PURE__ */ React.createElement("div", { className: cx(styles.editor, className), ...props }, /* @__PURE__ */ React.createElement("div", { className: styles.left }, children), /* @__PURE__ */ React.createElement(
+      import_DraggablePanel.default,
+      {
+        className: styles.right,
+        placement: mobile ? "bottom" : "right",
+        minWidth: 280
+      },
+      /* @__PURE__ */ React.createElement(import_leva.LevaPanel, { fill: true, store: levaStore, titleBar: false, flat: true }),
+      " "
+    ));
+  }
+);
+var StroyBook_default = 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,8 @@
+export declare const useStyles: (props?: {
+    noPadding: boolean;
+    mobile: boolean;
+} | undefined) => 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,81 @@
+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, mobile }) => {
+    return {
+      editor: css`
+        display: flex;
+        align-items: stretch;
+        justify-content: stretch;
+        width: inherit;
+        min-height: inherit;
+        ${mobile && css`
+          flex-direction: column;
+        `}
+      `,
+      left: css`
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: auto;
+        ${!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/Swatches/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface SwatchesProps {
+    colors: string[];
+    activeColor?: string;
+    onSelect?: (c: string | null) => void;
+}
+declare const Swatches: import("react").NamedExoticComponent<SwatchesProps>;
+export default Swatches;