@lobehub/ui 1.5.0 → 1.6.1

package/es/ActionIcon/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { LucideIcon } from 'lucide-react';
+import { TooltipProps } from "../index";
 import { DivProps } from "../types";
+import { LucideIcon } from 'lucide-react';
 export declare type ActionIconSize = 'large' | 'normal' | 'small' | 'site' | {
     blockSize?: number;
     fontSize?: number;
@@ -28,6 +29,21 @@ export interface ActionIconProps extends DivProps {
      * @default 'false'
      */
     glass?: boolean;
+    /**
+     * @description The text shown in the tooltip
+     */
+    title?: string;
+    /**
+     * @description The position of the tooltip relative to the target
+     * @enum ["top","left","right","bottom","topLeft","topRight","bottomLeft","bottomRight","leftTop","leftBottom","rightTop","rightBottom"]
+     * @default "top"
+     */
+    placement?: TooltipProps['placement'];
+    /**
+     * @description Change arrow's visible state and change whether the arrow is pointed at the center of target.
+     * @default false
+     */
+    arrow?: boolean;
 }
 declare const ActionIcon: import("react").NamedExoticComponent<ActionIconProps>;
 export default ActionIcon;

package/es/ActionIcon/index.js

@@ -1,9 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "active", "icon", "size", "style", "glass"];
+var _excluded = ["className", "active", "icon", "size", "style", "glass", "title", "placement", "arrow"];
 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 { Icon } from "./..";
+import { Icon, Tooltip } from "./..";
 import { memo } from 'react';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -15,6 +15,10 @@ var ActionIcon = /*#__PURE__*/memo(function (_ref) {
     size = _ref$size === void 0 ? 'normal' : _ref$size,
     style = _ref.style,
     glass = _ref.glass,
+    title = _ref.title,
+    placement = _ref.placement,
+    _ref$arrow = _ref.arrow,
+    arrow = _ref$arrow === void 0 ? false : _ref$arrow,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       active: Boolean(active),
@@ -46,7 +50,7 @@ var ActionIcon = /*#__PURE__*/memo(function (_ref) {
       borderRadius = (size === null || size === void 0 ? void 0 : size.borderRadius) || 5;
       break;
   }
-  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+  var actionIconBlock = /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
     className: cx(styles.block, className),
     style: _objectSpread({
       width: blockSize,
@@ -59,5 +63,12 @@ var ActionIcon = /*#__PURE__*/memo(function (_ref) {
       icon: icon
     })
   }));
+  if (!title) return actionIconBlock;
+  return /*#__PURE__*/_jsx(Tooltip, {
+    arrow: arrow,
+    title: title,
+    placement: placement,
+    children: actionIconBlock
+  });
 });
 export default ActionIcon;

package/es/CopyButton/index.d.ts

@@ -1,6 +1,5 @@
 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
@@ -22,13 +21,6 @@ export interface CopyButtonProps extends DivProps {
      * @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;
+declare const CopyButton: ({ content, className, placement, size, ...props }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default CopyButton;

package/es/CopyButton/index.js

@@ -1,14 +1,13 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["content", "className", "placement", "size", "render"];
+var _excluded = ["content", "className", "placement", "size"];
 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 { useCopied } from "../hooks/useCopied";
-import { ActionIcon, Tooltip } from "./..";
+import { ActionIcon } from "./..";
 import copy from 'copy-to-clipboard';
 import { Copy } from 'lucide-react';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 var CopyButton = function CopyButton(_ref) {
   var content = _ref.content,
     className = _ref.className,
@@ -16,18 +15,13 @@ var CopyButton = function CopyButton(_ref) {
     placement = _ref$placement === void 0 ? 'right' : _ref$placement,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'site' : _ref$size,
-    render = _ref.render,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useCopied = useCopied(),
     copied = _useCopied.copied,
     setCopied = _useCopied.setCopied;
-  var handleCopy = function handleCopy() {
-    copy(content);
-    setCopied();
-  };
-  var children = render ? render({
-    handleCopy: handleCopy
-  }) : /*#__PURE__*/_jsx(ActionIcon, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/_jsx(ActionIcon, _objectSpread(_objectSpread({}, props), {}, {
+    placement: placement,
+    title: copied ? '✅ Success' : 'Copy',
     icon: Copy,
     className: className,
     size: size,
@@ -37,13 +31,5 @@ var CopyButton = function CopyButton(_ref) {
       setCopied();
     }
   }));
-  return /*#__PURE__*/_jsx(Tooltip, {
-    arrow: false,
-    placement: placement,
-    title: copied ? /*#__PURE__*/_jsx(_Fragment, {
-      children: "\u2705 Success"
-    }) : 'Copy',
-    children: children
-  });
 };
 export default CopyButton;

package/es/Snippet/style.js

@@ -5,5 +5,5 @@ import { rgba } from 'polished';
 export var useStyles = createStyles(function (_ref, type) {
   var css = _ref.css,
     token = _ref.token;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      max-width: 100%;\n      position: relative;\n      align-items: center;\n      border-radius: ", "px;\n      gap: 8px;\n      padding: 0 8px;\n      height: 36px;\n      transition:  background-color 100ms ", ";\n\n      ", "\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      .ant-highlighter-shiki {\n        overflow: auto;\n        flex: 1;\n      }\n      .prism-code {\n        background: none !important;\n      }\n\n      pre {\n        background: none !important;\n        padding-top: 6px; !important;\n        margin: 0 !important;\n        line-height: 1;\n      }\n      code[class*='language-'] {\n        background: none !important;\n      }\n    "])), token.borderRadius, token.motionEaseOut, type === 'block' ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              background-color: ", ";\n            "])), rgba(token.colorBgElevated, 0.6)) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              border: 1px solid ", ";\n            "])), token.colorBorder), token.colorFillTertiary);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      max-width: 100%;\n      position: relative;\n      align-items: center;\n      border-radius: ", "px;\n      gap: 8px;\n      padding: 0 8px 0 12px;\n      height: 36px;\n      transition:  background-color 100ms ", ";\n\n      ", "\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      .ant-highlighter-shiki {\n        overflow: auto;\n        flex: 1;\n      }\n      .prism-code {\n        background: none !important;\n      }\n\n      pre {\n        background: none !important;\n        padding-top: 6px; !important;\n        margin: 0 !important;\n        line-height: 1;\n      }\n      code[class*='language-'] {\n        background: none !important;\n      }\n    "])), token.borderRadius, token.motionEaseOut, type === 'block' ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              background-color: ", ";\n            "])), rgba(token.colorBgElevated, 0.6)) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              border: 1px solid ", ";\n            "])), token.colorBorder), token.colorFillTertiary);
 });

package/lib/ActionIcon/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { LucideIcon } from 'lucide-react';
+import { TooltipProps } from "../index";
 import { DivProps } from "../types";
+import { LucideIcon } from 'lucide-react';
 export declare type ActionIconSize = 'large' | 'normal' | 'small' | 'site' | {
     blockSize?: number;
     fontSize?: number;
@@ -28,6 +29,21 @@ export interface ActionIconProps extends DivProps {
      * @default 'false'
      */
     glass?: boolean;
+    /**
+     * @description The text shown in the tooltip
+     */
+    title?: string;
+    /**
+     * @description The position of the tooltip relative to the target
+     * @enum ["top","left","right","bottom","topLeft","topRight","bottomLeft","bottomRight","leftTop","leftBottom","rightTop","rightBottom"]
+     * @default "top"
+     */
+    placement?: TooltipProps['placement'];
+    /**
+     * @description Change arrow's visible state and change whether the arrow is pointed at the center of target.
+     * @default false
+     */
+    arrow?: boolean;
 }
 declare const ActionIcon: import("react").NamedExoticComponent<ActionIconProps>;
 export default ActionIcon;

package/lib/ActionIcon/index.js

@@ -26,7 +26,18 @@ var import__ = require("../index");
 var import_react = require("react");
 var import_style = require("./style");
 var ActionIcon = (0, import_react.memo)(
-  ({ className, active, icon, size = "normal", style, glass, ...props }) => {
+  ({
+    className,
+    active,
+    icon,
+    size = "normal",
+    style,
+    glass,
+    title,
+    placement,
+    arrow = false,
+    ...props
+  }) => {
     const { styles, cx } = (0, import_style.useStyles)({ active: Boolean(active), glass: Boolean(glass) });
     let blockSize;
     let borderRadius;
@@ -52,7 +63,7 @@ var ActionIcon = (0, import_react.memo)(
         borderRadius = (size == null ? void 0 : size.borderRadius) || 5;
         break;
     }
-    return /* @__PURE__ */ React.createElement(
+    const actionIconBlock = /* @__PURE__ */ React.createElement(
       "div",
       {
         className: cx(styles.block, className),
@@ -61,6 +72,9 @@ var ActionIcon = (0, import_react.memo)(
       },
       /* @__PURE__ */ React.createElement(import__.Icon, { size: size === "site" ? "small" : size, icon })
     );
+    if (!title)
+      return actionIconBlock;
+    return /* @__PURE__ */ React.createElement(import__.Tooltip, { arrow, title, placement }, actionIconBlock);
   }
 );
 var ActionIcon_default = ActionIcon;

package/lib/CopyButton/index.d.ts

@@ -1,6 +1,5 @@
 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
@@ -22,13 +21,6 @@ export interface CopyButtonProps extends DivProps {
      * @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;
+declare const CopyButton: ({ content, className, placement, size, ...props }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default CopyButton;

package/lib/CopyButton/index.js

@@ -41,18 +41,15 @@ var CopyButton = ({
   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(
+  return /* @__PURE__ */ React.createElement(
     import__.ActionIcon,
     {
       ...props,
+      placement,
+      title: copied ? "✅ Success" : "Copy",
       icon: import_lucide_react.Copy,
       className,
       size,
@@ -63,7 +60,6 @@ var CopyButton = ({
       }
     }
   );
-  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:

package/lib/Snippet/style.js

@@ -32,7 +32,7 @@ var useStyles = (0, import_antd_style.createStyles)(
       align-items: center;
       border-radius: ${token.borderRadius}px;
       gap: 8px;
-      padding: 0 8px;
+      padding: 0 8px 0 12px;
       height: 36px;
       transition:  background-color 100ms ${token.motionEaseOut};
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",