@lobehub/ui 1.2.0 → 1.3.0

package/es/hooks/useCopied.js

@@ -0,0 +1,26 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+export var useCopied = function useCopied() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    copied = _useState2[0],
+    setCopy = _useState2[1];
+  useEffect(function () {
+    if (!copied) return;
+    var timer = setTimeout(function () {
+      setCopy(false);
+    }, 2000);
+    return function () {
+      clearTimeout(timer);
+    };
+  }, [copied]);
+  var setCopied = useCallback(function () {
+    return setCopy(true);
+  }, []);
+  return useMemo(function () {
+    return {
+      copied: copied,
+      setCopied: setCopied
+    };
+  }, [copied]);
+};

package/es/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/es/hooks/useHighlight.js

@@ -0,0 +1,63 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { getHighlighter } from 'shiki-es';
+import { create } from 'zustand';
+var THEME = {
+  dark: 'material-darker',
+  light: 'material-lighter'
+};
+export var languageMap = ['javascript', 'js', 'jsx', 'json', 'markdown', 'md', 'less', 'css', 'typescript', 'ts', 'tsx', 'diff', 'bash'];
+
+/**
+ * @title 代码高亮的存储对象
+ */
+
+export var useHighlight = create(function (set, get) {
+  return {
+    highlighter: undefined,
+    initHighlighter: function () {
+      var _initHighlighter = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var highlighter;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (get().highlighter) {
+                _context.next = 5;
+                break;
+              }
+              _context.next = 3;
+              return getHighlighter({
+                langs: languageMap,
+                themes: Object.values(THEME)
+              });
+            case 3:
+              highlighter = _context.sent;
+              set({
+                highlighter: highlighter
+              });
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function initHighlighter() {
+        return _initHighlighter.apply(this, arguments);
+      }
+      return initHighlighter;
+    }(),
+    codeToHtml: function codeToHtml(text, language, isDarkMode) {
+      var _get = get(),
+        highlighter = _get.highlighter;
+      if (!highlighter) return '';
+      try {
+        return highlighter === null || highlighter === void 0 ? void 0 : highlighter.codeToHtml(text, {
+          lang: language,
+          theme: isDarkMode ? THEME.dark : THEME.light
+        });
+      } catch (e) {
+        return text;
+      }
+    }
+  };
+});

package/es/index.d.ts

@@ -1,9 +1,18 @@
 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 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 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';

package/es/index.js

@@ -1,9 +1,18 @@
 export { default as ActionIcon } from "./ActionIcon";
+export { default as CopyButton } from "./CopyButton";
 export { default as DraggablePanel } from "./DraggablePanel";
+export { default as EditableText } from "./EditableText";
+export { default as Highlighter, SyntaxHighlighter } from "./Highlighter";
 export { default as Icon } from "./Icon";
 export { default as Logo } from "./Logo";
+export { default as Markdown } from "./Markdown";
+export { default as MessageInput } from "./MessageInput";
+export { default as SearchBar } from "./SearchBar";
 export { default as SideNav } from "./SideNav";
+export { default as Snippet } from "./Snippet";
 export { default as StroyBook, useControls, useCreateStore } from "./StroyBook";
+export { default as Swatches } from "./Swatches";
 export { default as TabsNav } from "./TabsNav";
 export { default as ThemeProvider } from "./ThemeProvider";
-export { default as ThemeSwitch } from "./ThemeSwitch";
+export { default as ThemeSwitch } from "./ThemeSwitch";
+export { default as Tooltip } from "./Tooltip";

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

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

package/es/styles/theme/base.js

@@ -0,0 +1,15 @@
+export var baseTheme = {
+  token: {
+    colorInfo: '#0070f3',
+    colorSuccess: '#50e3c2',
+    colorWarning: '#f5a623',
+    colorError: '#ee0000',
+    borderRadius: 5,
+    borderRadiusXS: 3,
+    borderRadiusSM: 3,
+    borderRadiusLG: 8,
+    controlHeight: 36,
+    fontFamily: "'Segoe UI', SegoeUI, AliPuHui, -apple-system ,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'",
+    fontFamilyCode: "'Hack Nerd Font Mono', 'Hack', 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace"
+  }
+};

package/es/styles/theme/dark.js

@@ -3,6 +3,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { theme } from 'antd';
 import { genMapTokenAlgorithm } from "../algorithms";
+import { baseTheme } from "./base";
 var cyanColors = ['rgba(0, 225, 242, 0.12)', 'rgba(0, 232, 245, 0.22)', 'rgba(0, 237, 250, 0.32)', 'rgba(0, 243, 255, 0.42)', 'rgba(0, 247, 255, 0.53)', 'rgba(0, 246, 254, 0.65)', 'rgba(0, 247, 253, 0.77)', 'rgba(0, 245, 255, 0.75)', 'rgba(0, 244, 255, 0.73)', 'rgba(0, 239, 253, 0.72)', 'rgba(0, 237, 253, 0.7)'];
 var darkModeRelationship = function darkModeRelationship(type) {
   var _ref;
@@ -49,7 +50,7 @@ var darkAlgorithm = function darkAlgorithm(seedToken, mapToken) {
   });
 };
 export var darkTheme = {
-  token: {
+  token: _objectSpread(_objectSpread({}, baseTheme.token), {}, {
     colorTextLightSolid: '#000000',
     colorBgLayout: '#000000',
     colorBgContainer: '#111111',
@@ -62,21 +63,12 @@ export var darkTheme = {
     colorTextTertiary: '#888888',
     colorTextQuaternary: '#666666',
     colorPrimary: '#ffffff',
-    colorInfo: '#0070f3',
-    colorSuccess: '#50e3c2',
-    colorWarning: '#f5a623',
-    colorError: '#ee0000',
     colorFillQuaternary: 'rgba(0,0,0,0)',
-    borderRadius: 5,
-    borderRadiusXS: 3,
-    borderRadiusSM: 3,
-    borderRadiusLG: 8,
-    controlHeight: 36,
     boxShadow: '0 12px 20px 6px rgb(0 0 0 / 0.08)',
     boxShadowSecondary: '0 2px 8px 2px rgb(0 0 0 / 0.07), 0 2px 4px -1px rgb(0 0 0 / 0.04)',
-    colorLinkHover: darkColorPalettes.primary[7],
-    colorLink: darkColorPalettes.primary[6],
-    colorLinkActive: darkColorPalettes.primary[5]
-  },
+    colorLinkHover: '#3291ff',
+    colorLink: '#0070f3',
+    colorLinkActive: '#0761d1'
+  }),
   algorithm: darkAlgorithm
 };

package/es/styles/theme/light.js

@@ -2,13 +2,14 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { genMapTokenAlgorithm } from "../algorithms";
+import { baseTheme } from "./base";
 var lightMode = genMapTokenAlgorithm('light');
 export var lightColorPalettes = lightMode.palettes;
 export var lightTheme = {
-  token: {
+  token: _objectSpread(_objectSpread({}, baseTheme.token), {}, {
     colorTextLightSolid: '#ffffff',
-    colorBgLayout: '#ffffff',
-    colorBgContainer: '#fafafa',
+    colorBgLayout: '#fafafa',
+    colorBgContainer: '#ffffff',
     colorBgElevated: '#f2f2f2',
     colorBgSpotlight: '#999999',
     colorBorder: '#eaeaea',
@@ -18,18 +19,16 @@ export var lightTheme = {
     colorTextTertiary: '#666666',
     colorTextQuaternary: '#888888',
     colorPrimary: '#000000',
+    colorFill: 'rgba(0,0,0,0.1)',
+    colorFillSecondary: 'rgba(0,0,0,0.075)',
+    colorFillTertiary: 'rgba(0,0,0,0.05)',
     colorFillQuaternary: 'rgba(0,0,0,0)',
-    borderRadius: 5,
-    borderRadiusXS: 3,
-    borderRadiusSM: 3,
-    borderRadiusLG: 8,
-    controlHeight: 36,
     boxShadow: '0 12px 20px 6px rgb(104 112 118 / 0.08)',
     boxShadowSecondary: '0 2px 8px 2px rgb(104 112 118 / 0.07), 0 2px 4px -1px rgb(104 112 118 / 0.04)',
-    colorLinkHover: lightColorPalettes.primary[5],
-    colorLink: lightColorPalettes.primary[6],
-    colorLinkActive: lightColorPalettes.primary[7]
-  },
+    colorLinkHover: '#3291ff',
+    colorLink: '#0070f3',
+    colorLinkActive: '#0761d1'
+  }),
   algorithm: function algorithm(seedToken, mapToken) {
     return _objectSpread(_objectSpread({}, mapToken), lightMode.tokens);
   }

package/es/types/index.d.ts

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

package/lib/ActionIcon/index.d.ts

@@ -1,7 +1,7 @@
-import { DivProps } from "../types";
+/// <reference types="react" />
 import { LucideIcon } from 'lucide-react';
-import React from 'react';
-export declare type ActionIconSize = 'large' | 'normal' | 'small' | {
+import { DivProps } from "../types";
+export declare type ActionIconSize = 'large' | 'normal' | 'small' | 'site' | {
     blockSize?: number;
     fontSize?: number;
     strokeWidth?: number;
@@ -23,6 +23,11 @@ export interface ActionIconProps extends DivProps {
      * @type LucideIcon
      */
     icon: LucideIcon;
+    /**
+     * @description Glass blur style
+     * @default 'false'
+     */
+    glass?: boolean;
 }
-declare const _default: React.NamedExoticComponent<ActionIconProps>;
-export default _default;
+declare const ActionIcon: import("react").NamedExoticComponent<ActionIconProps>;
+export default ActionIcon;

package/lib/ActionIcon/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/ActionIcon/index.tsx
@@ -33,47 +23,46 @@ __export(ActionIcon_exports, {
 });
 module.exports = __toCommonJS(ActionIcon_exports);
 var import__ = require("../index");
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_style = require("./style");
-var ActionIcon = ({
-  className,
-  active,
-  icon,
-  size = "normal",
-  style,
-  ...props
-}) => {
-  const { styles, cx } = (0, import_style.useStyles)(active);
-  let blockSize;
-  let borderRadius;
-  switch (size) {
-    case "large":
-      blockSize = 44;
-      borderRadius = 8;
-      break;
-    case "normal":
-      blockSize = 36;
-      borderRadius = 5;
-      break;
-    case "small":
-      blockSize = 28;
-      borderRadius = 5;
-      break;
-    default:
-      blockSize = (size == null ? void 0 : size.blockSize) || 36;
-      borderRadius = (size == null ? void 0 : size.borderRadius) || 5;
-      break;
+var ActionIcon = (0, import_react.memo)(
+  ({ className, active, icon, size = "normal", style, glass, ...props }) => {
+    const { styles, cx } = (0, import_style.useStyles)({ active: Boolean(active), glass: Boolean(glass) });
+    let blockSize;
+    let borderRadius;
+    switch (size) {
+      case "large":
+        blockSize = 44;
+        borderRadius = 8;
+        break;
+      case "normal":
+        blockSize = 36;
+        borderRadius = 5;
+        break;
+      case "small":
+        blockSize = 28;
+        borderRadius = 5;
+        break;
+      case "site":
+        blockSize = 34;
+        borderRadius = 5;
+        break;
+      default:
+        blockSize = (size == null ? void 0 : size.blockSize) || 36;
+        borderRadius = (size == null ? void 0 : size.borderRadius) || 5;
+        break;
+    }
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cx(styles.block, className),
+        style: { width: blockSize, height: blockSize, borderRadius, ...style },
+        ...props
+      },
+      /* @__PURE__ */ React.createElement(import__.Icon, { size: size === "site" ? "small" : size, icon })
+    );
   }
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      className: cx(styles.block, className),
-      style: { width: blockSize, height: blockSize, borderRadius, ...style },
-      ...props
-    },
-    /* @__PURE__ */ import_react.default.createElement(import__.Icon, { size, icon })
-  );
-};
-var ActionIcon_default = import_react.default.memo(ActionIcon);
+);
+var ActionIcon_default = ActionIcon;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {});

package/lib/ActionIcon/style.d.ts

@@ -1,3 +1,6 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+export declare const useStyles: (props?: {
+    active: boolean;
+    glass: boolean;
+} | undefined) => import("antd-style").ReturnStyles<{
     block: import("antd-style").SerializedStyles;
 }>;

package/lib/ActionIcon/style.js

@@ -23,34 +23,41 @@ __export(style_exports, {
 });
 module.exports = __toCommonJS(style_exports);
 var import_antd_style = require("antd-style");
-var useStyles = (0, import_antd_style.createStyles)(({ css, token }, active) => {
-  return {
-    block: css`
-      cursor: pointer;
+var useStyles = (0, import_antd_style.createStyles)(
+  ({ css, token }, { active, glass }) => {
+    return {
+      block: css`
+        cursor: pointer;
 
-      display: flex;
-      flex: none;
-      align-items: center;
-      justify-content: center;
+        display: flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
 
-      color: ${active ? token.colorText : token.colorTextQuaternary};
+        color: ${active ? token.colorText : token.colorTextQuaternary};
 
-      background: ${active ? token.colorFill : "transparent"};
+        background: ${active ? token.colorFillTertiary : "transparent"};
 
-      transition: color 600ms ${token.motionEaseOut}, background-color 100ms ${token.motionEaseOut};
+        transition: color 600ms ${token.motionEaseOut},
+          background-color 100ms ${token.motionEaseOut};
 
-      &:hover {
-        color: ${token.colorText};
-        background-color: ${token.colorFillTertiary};
-      }
+        ${glass && css`
+          backdrop-filter: saturate(180%) blur(10px);
+        `}
 
-      &:active {
-        color: ${token.colorText};
-        background-color: ${token.colorFill};
-      }
-    `
-  };
-});
+        &:hover {
+          color: ${token.colorText};
+          background-color: ${active ? token.colorFillSecondary : token.colorFillTertiary};
+        }
+
+        &:active {
+          color: ${token.colorText};
+          background-color: ${token.colorFill};
+        }
+      `
+    };
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   useStyles

package/lib/CopyButton/index.d.ts

@@ -0,0 +1,34 @@
+import { ActionIconSize, TooltipProps } from "../index";
+import { DivProps } from "../types";
+import { ReactNode } from 'react';
+export interface CopyButtonProps extends DivProps {
+    /**
+     * @description The text content to be copied
+     */
+    content: string;
+    /**
+     * @description The size of the icon
+     * @enum ['large', 'normal', 'small', 'site']
+     * @default 'site'
+     */
+    size?: ActionIconSize;
+    /**
+     * @description Additional class name
+     */
+    className?: string;
+    /**
+     * @description The placement of the tooltip
+     * @enum ['top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom']
+     * @default 'right'
+     */
+    placement?: TooltipProps['placement'];
+    /**
+     * @description A function that returns the children to be rendered
+  
+     */
+    render?: (props: {
+        handleCopy: () => void;
+    }) => ReactNode;
+}
+declare const CopyButton: ({ content, className, placement, size, render, ...props }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default CopyButton;

package/lib/CopyButton/index.js

@@ -0,0 +1,70 @@
+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/CopyButton/index.tsx
+var CopyButton_exports = {};
+__export(CopyButton_exports, {
+  default: () => CopyButton_default
+});
+module.exports = __toCommonJS(CopyButton_exports);
+var import_useCopied = require("../hooks/useCopied");
+var import__ = require("../index");
+var import_copy_to_clipboard = __toESM(require("copy-to-clipboard"));
+var import_lucide_react = require("lucide-react");
+var CopyButton = ({
+  content,
+  className,
+  placement = "right",
+  size = "site",
+  render,
+  ...props
+}) => {
+  const { copied, setCopied } = (0, import_useCopied.useCopied)();
+  const handleCopy = () => {
+    (0, import_copy_to_clipboard.default)(content);
+    setCopied();
+  };
+  const children = render ? render({ handleCopy }) : /* @__PURE__ */ React.createElement(
+    import__.ActionIcon,
+    {
+      ...props,
+      icon: import_lucide_react.Copy,
+      className,
+      size,
+      glass: true,
+      onClick: () => {
+        (0, import_copy_to_clipboard.default)(content);
+        setCopied();
+      }
+    }
+  );
+  return /* @__PURE__ */ React.createElement(import__.Tooltip, { arrow: false, placement, title: copied ? /* @__PURE__ */ React.createElement(React.Fragment, null, "✅ Success") : "Copy" }, children);
+};
+var CopyButton_default = CopyButton;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/DraggablePanel/index.d.ts

@@ -1,7 +1,7 @@
-import type { DivProps } from "../types";
+/// <reference types="react" />
 import type { NumberSize, Size } from 're-resizable';
-import React from 'react';
 import type { Props as RndProps } from 'react-rnd';
+import { DivProps } from "../types";
 export declare type placementType = 'right' | 'left' | 'top' | 'bottom';
 export interface DraggablePanelProps extends DivProps {
     /**
@@ -82,5 +82,5 @@ export interface DraggablePanelProps extends DivProps {
      */
     hanlderStyle?: React.CSSProperties;
 }
-declare const _default: React.NamedExoticComponent<DraggablePanelProps>;
-export default _default;
+declare const DraggablePanel: import("react").NamedExoticComponent<DraggablePanelProps>;
+export default DraggablePanel;