@lobehub/ui 1.2.0 → 1.3.0

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,18 +1,18 @@
 import { DivProps } from "../types";
-import React from 'react';
+import { ReactNode } from 'react';
 export interface SideNavProps extends DivProps {
     /**
      * @description Avatar to be displayed at the top of the sidenav
      */
-    avatar?: React.ReactNode;
+    avatar?: ReactNode;
     /**
      * @description Actions to be displayed below the avatar
      */
-    topActions?: React.ReactNode;
+    topActions?: ReactNode;
     /**
      * @description Actions to be displayed at the bottom of the sidenav
      */
-    bottomActions: React.ReactNode;
+    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/Snippet/index.js

@@ -0,0 +1,47 @@
+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/Snippet/index.tsx
+var Snippet_exports = {};
+__export(Snippet_exports, {
+  default: () => Snippet_default
+});
+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

@@ -1,6 +1,6 @@
+/// <reference types="react" />
 import { DivProps } from "../types";
 import { useControls, useCreateStore } from 'leva';
-import React from 'react';
 export { useCreateStore, useControls };
 export interface StroyBookProps extends DivProps {
     /**
@@ -13,6 +13,5 @@ export interface StroyBookProps extends DivProps {
      */
     noPadding?: boolean;
 }
-export declare const StroyBook: React.FC<StroyBookProps>;
-declare const _default: React.NamedExoticComponent<StroyBookProps>;
-export default _default;
+export declare const StroyBook: import("react").NamedExoticComponent<StroyBookProps>;
+export default StroyBook;

package/lib/StroyBook/index.js

@@ -35,21 +35,28 @@ __export(StroyBook_exports, {
   useCreateStore: () => import_leva.useCreateStore
 });
 module.exports = __toCommonJS(StroyBook_exports);
-var import__ = require("../index");
+var import_antd_style = require("antd-style");
 var import_leva = require("leva");
-var import_react = __toESM(require("react"));
+var import_react = require("react");
+var import_DraggablePanel = __toESM(require("../DraggablePanel"));
 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);
+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,

package/lib/StroyBook/style.d.ts

@@ -1,4 +1,7 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+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

@@ -23,52 +23,58 @@ __export(style_exports, {
 });
 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;
+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};
-      }
-    `
-  };
-});
+        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;

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 = {});