@lobehub/ui 1.1.0

package/lib/ActionIcon/index.d.ts

@@ -0,0 +1,15 @@
+import { DivProps } from "../types";
+import { LucideIcon } from 'lucide-react';
+import React from 'react';
+export interface ActionIconProps extends DivProps {
+    active?: boolean;
+    size?: 'large' | 'normal' | 'small' | {
+        blockSize: number;
+        fontSize: number;
+        strokeWidth: number;
+        borderRadius: number;
+    };
+    icon: LucideIcon;
+}
+declare const _default: React.NamedExoticComponent<ActionIconProps>;
+export default _default;

package/lib/ActionIcon/index.js

@@ -0,0 +1,110 @@
+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/ActionIcon/index.tsx
+var ActionIcon_exports = {};
+__export(ActionIcon_exports, {
+  default: () => ActionIcon_default
+});
+module.exports = __toCommonJS(ActionIcon_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var Block = import_styled_components.default.div`
+  cursor: pointer;
+
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+
+  color: ${({ active, theme }) => active ? theme.colorText : theme.colorTextQuaternary};
+
+  background: ${({ active, theme }) => active ? theme.colorFill : "transparent"};
+
+  transition: all 0.2s ${({ theme }) => theme.motionEaseOut};
+
+  &:hover {
+    background: ${({ theme }) => theme.colorFillTertiary};
+  }
+
+  &:active {
+    color: ${({ theme }) => theme.colorText};
+    background: ${({ theme }) => theme.colorFill};
+  }
+`;
+var ActionIcon = ({
+  active,
+  icon,
+  size = "normal",
+  style,
+  ...props
+}) => {
+  let blockSize;
+  let fontSize;
+  let strokeWidth;
+  let borderRadius;
+  const Icon = icon;
+  switch (size) {
+    case "large":
+      blockSize = 44;
+      fontSize = 24;
+      strokeWidth = 2;
+      borderRadius = 8;
+      break;
+    case "normal":
+      blockSize = 36;
+      fontSize = 24;
+      strokeWidth = 2;
+      borderRadius = 5;
+      break;
+    case "small":
+      blockSize = 28;
+      fontSize = 20;
+      strokeWidth = 1.5;
+      borderRadius = 5;
+      break;
+    default:
+      blockSize = (size == null ? void 0 : size.blockSize) || 36;
+      fontSize = (size == null ? void 0 : size.fontSize) || 24;
+      strokeWidth = (size == null ? void 0 : size.strokeWidth) || 2;
+      borderRadius = (size == null ? void 0 : size.borderRadius) || 5;
+      break;
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    Block,
+    {
+      active,
+      style: { width: blockSize, height: blockSize, borderRadius, ...style },
+      ...props
+    },
+    /* @__PURE__ */ import_react.default.createElement(Icon, { size: fontSize, strokeWidth })
+  );
+};
+var ActionIcon_default = import_react.default.memo(ActionIcon);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/DraggablePanel/index.d.ts

@@ -0,0 +1,26 @@
+import type { DivProps } from "../types";
+import type { NumberSize, Size } from 're-resizable';
+import React from 'react';
+import type { Props as RndProps } from 'react-rnd';
+export declare type placementType = 'right' | 'left' | 'top' | 'bottom';
+export interface DraggablePanelProps extends DivProps {
+    pin?: boolean;
+    mode?: 'fixed' | 'float';
+    placement: placementType;
+    minWidth?: number;
+    minHeight?: number;
+    resize?: RndProps['enableResizing'];
+    size?: Partial<Size>;
+    onSizeChange?: (delta: NumberSize, size?: Size) => void;
+    onSizeDragging?: (delta: NumberSize, size?: Size) => void;
+    expandable?: boolean;
+    expand?: boolean;
+    defaultExpand?: boolean;
+    onExpandChange?: (expand: boolean) => void;
+    defaultSize?: Partial<Size>;
+    destroyOnClose?: boolean;
+    showHandlerWhenUnexpand?: boolean;
+    hanlderStyle?: React.CSSProperties;
+}
+declare const _default: React.NamedExoticComponent<DraggablePanelProps>;
+export default _default;

package/lib/DraggablePanel/index.js

@@ -0,0 +1,217 @@
+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/DraggablePanel/index.tsx
+var DraggablePanel_exports = {};
+__export(DraggablePanel_exports, {
+  default: () => DraggablePanel_default
+});
+module.exports = __toCommonJS(DraggablePanel_exports);
+var import_ahooks = require("ahooks");
+var import_lucide_react = require("lucide-react");
+var import_re_resizable = require("re-resizable");
+var import_react = __toESM(require("react"));
+var import_react_layout_kit = require("react-layout-kit");
+var import_use_merge_value = __toESM(require("use-merge-value"));
+var import_style = require("./style");
+var import_utils = require("./utils");
+var DEFAULT_HEIGHT = 180;
+var DEFAULT_WIDTH = 280;
+var DraggablePanel = ({
+  pin = "true",
+  mode = "fixed",
+  children,
+  placement = "right",
+  resize,
+  style,
+  size,
+  defaultSize: customizeDefaultSize,
+  minWidth,
+  minHeight,
+  onSizeChange,
+  onSizeDragging,
+  expandable = true,
+  expand,
+  defaultExpand = true,
+  onExpandChange,
+  className,
+  showHandlerWhenUnexpand,
+  destroyOnClose,
+  hanlderStyle
+}) => {
+  const ref = (0, import_react.useRef)(null);
+  const isHovering = (0, import_ahooks.useHover)(ref);
+  const isVertical = placement === "top" || placement === "bottom";
+  const { styles, cx } = (0, import_style.useStyle)("draggable-panel");
+  const [isExpand, setIsExpand] = (0, import_use_merge_value.default)(defaultExpand, {
+    value: expand,
+    onChange: onExpandChange
+  });
+  (0, import_react.useEffect)(() => {
+    if (pin)
+      return;
+    if (isHovering && !isExpand) {
+      setIsExpand(true);
+    } else if (!isHovering && isExpand) {
+      setIsExpand(false);
+    }
+  }, [pin, isHovering, isExpand]);
+  const [showExpand, setShowExpand] = (0, import_react.useState)(true);
+  const canResizing = resize !== false && isExpand;
+  const resizeHandleClassNames = (0, import_react.useMemo)(() => {
+    if (!canResizing)
+      return {};
+    return {
+      [(0, import_utils.revesePlacement)(placement)]: styles[`${(0, import_utils.revesePlacement)(placement)}Handle`]
+    };
+  }, [canResizing, placement]);
+  const resizing = {
+    top: false,
+    bottom: false,
+    right: false,
+    left: false,
+    topRight: false,
+    bottomRight: false,
+    bottomLeft: false,
+    topLeft: false,
+    [(0, import_utils.revesePlacement)(placement)]: true,
+    ...resize
+  };
+  const defaultSize = (0, import_react.useMemo)(() => {
+    if (isVertical)
+      return {
+        width: "100%",
+        height: DEFAULT_HEIGHT,
+        ...customizeDefaultSize
+      };
+    return {
+      width: DEFAULT_WIDTH,
+      height: "100%",
+      ...customizeDefaultSize
+    };
+  }, [isVertical]);
+  const sizeProps = isExpand ? {
+    minWidth: typeof minWidth === "number" ? Math.max(minWidth, 0) : 280,
+    minHeight: typeof minHeight === "number" ? Math.max(minHeight, 0) : void 0,
+    defaultSize,
+    size
+  } : isVertical ? {
+    minHeight: 0,
+    size: { height: 0 }
+  } : {
+    minWidth: 0,
+    size: { width: 0 }
+  };
+  const { Arrow, className: arrowPlacement } = (0, import_react.useMemo)(() => {
+    switch (placement) {
+      case "top":
+        return { className: "Bottom", Arrow: import_lucide_react.ChevronDown };
+      case "bottom":
+        return { className: "Top", Arrow: import_lucide_react.ChevronUp };
+      case "right":
+        return { className: "Left", Arrow: import_lucide_react.ChevronLeft };
+      case "left":
+        return { className: "Right", Arrow: import_lucide_react.ChevronRight };
+    }
+  }, [styles, placement]);
+  const handler = (
+    // @ts-ignore
+    /* @__PURE__ */ import_react.default.createElement(
+      import_react_layout_kit.Center,
+      {
+        className: cx(styles[`toggle${arrowPlacement}`]),
+        style: { opacity: isExpand ? !pin ? 0 : void 0 : showHandlerWhenUnexpand ? 1 : 0 }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_react_layout_kit.Center,
+        {
+          style: hanlderStyle,
+          onClick: () => {
+            setIsExpand(!isExpand);
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: styles.handlerIcon,
+            style: { transform: `rotate(${isExpand ? 180 : 0}deg)` }
+          },
+          /* @__PURE__ */ import_react.default.createElement(Arrow, { size: 16, strokeWidth: 1.5 })
+        )
+      )
+    )
+  );
+  const inner = (
+    // @ts-ignore
+    /* @__PURE__ */ import_react.default.createElement(
+      import_re_resizable.Resizable,
+      {
+        ...sizeProps,
+        style,
+        className: styles.panel,
+        enable: canResizing ? resizing : void 0,
+        handleClasses: resizeHandleClassNames,
+        onResizeStop: (e, direction, ref2, delta) => {
+          setShowExpand(true);
+          onSizeChange == null ? void 0 : onSizeChange(delta, {
+            width: ref2.style.width,
+            height: ref2.style.height
+          });
+        },
+        onResizeStart: () => {
+          setShowExpand(false);
+        },
+        onResize: (_, direction, ref2, delta) => {
+          onSizeDragging == null ? void 0 : onSizeDragging(delta, {
+            width: ref2.style.width,
+            height: ref2.style.height
+          });
+        }
+      },
+      children
+    )
+  );
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref,
+      className: cx(
+        styles.container,
+        // @ts-ignore
+        styles[mode === "fixed" ? "fixed" : `${placement}Float`],
+        className
+      ),
+      style: { [`border${arrowPlacement}Width`]: 1 }
+    },
+    expandable && showExpand && handler,
+    destroyOnClose ? isExpand && inner : inner
+  );
+};
+var DraggablePanel_default = import_react.default.memo(DraggablePanel);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/DraggablePanel/style.d.ts

@@ -0,0 +1,18 @@
+export declare const useStyle: (props?: string | undefined) => import("antd-style").ReturnStyles<{
+    container: string;
+    fixed: import("antd-style").SerializedStyles;
+    leftFloat: string;
+    rightFloat: string;
+    topFloat: string;
+    bottomFloat: string;
+    toggleLeft: string;
+    toggleRight: string;
+    toggleTop: string;
+    toggleBottom: string;
+    panel: string;
+    handlerIcon: import("antd-style").SerializedStyles;
+    leftHandle: string;
+    rightHandle: string;
+    topHandle: string;
+    bottomHandle: string;
+}>;

package/lib/DraggablePanel/style.js

@@ -0,0 +1,287 @@
+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/DraggablePanel/style.ts
+var style_exports = {};
+__export(style_exports, {
+  useStyle: () => useStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_antd_style = require("antd-style");
+var offset = 16;
+var toggleLength = 40;
+var toggleShort = 16;
+var useStyle = (0, import_antd_style.createStyles)(({ token }, prefix) => {
+  const commonHandle = import_antd_style.css`
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: 50;
+      transition: all 0.2s ${token.motionEaseOut};
+    }
+
+    &:hover,
+    &:active {
+      &::before {
+        background: ${token.colorPrimary};
+      }
+    }
+  `;
+  const commonToggle = import_antd_style.css`
+    position: absolute;
+    z-index: 1001;
+    opacity: 0;
+    transition: all 0.2s ${token.motionEaseOut};
+
+    &:hover {
+      opacity: 1 !important;
+    }
+
+    &:active {
+      opacity: 1 !important;
+    }
+
+    > div {
+      cursor: pointer;
+
+      position: absolute;
+
+      color: ${token.colorTextTertiary};
+
+      background: ${token.colorFillTertiary};
+      border-color: ${token.colorBorderSecondary};
+      border-style: solid;
+      border-width: 1px;
+      border-radius: 4px;
+
+      transition: all 0.2s ${token.motionEaseOut};
+
+      &:hover {
+        color: ${token.colorTextSecondary};
+        background: ${token.colorFillSecondary};
+      }
+
+      &:active {
+        color: ${token.colorText};
+        background: ${token.colorFill};
+      }
+    }
+  `;
+  const float = import_antd_style.css`
+    position: absolute;
+    z-index: 2000;
+  `;
+  return {
+    container: (0, import_antd_style.cx)(
+      prefix,
+      import_antd_style.css`
+        flex-shrink: 0;
+        border: 0 solid ${token.colorBorderSecondary};
+
+        &:hover {
+          .${prefix}-toggle {
+            opacity: 1;
+          }
+        }
+      `
+    ),
+    fixed: import_antd_style.css`
+      position: relative;
+    `,
+    leftFloat: (0, import_antd_style.cx)(
+      float,
+      import_antd_style.css`
+        top: 0;
+        bottom: 0;
+        left: 0;
+        height: 100%;
+      `
+    ),
+    rightFloat: (0, import_antd_style.cx)(
+      float,
+      import_antd_style.css`
+        top: 0;
+        right: 0;
+        bottom: 0;
+        height: 100%;
+      `
+    ),
+    topFloat: (0, import_antd_style.cx)(
+      float,
+      import_antd_style.css`
+        top: 0;
+        right: 0;
+        left: 0;
+        width: 100%;
+      `
+    ),
+    bottomFloat: (0, import_antd_style.cx)(
+      float,
+      import_antd_style.css`
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+      `
+    ),
+    toggleLeft: (0, import_antd_style.cx)(
+      `${prefix}-toggle`,
+      `${prefix}-toggle-left`,
+      commonToggle,
+      import_antd_style.css`
+        left: -${offset}px;
+        width: ${toggleShort}px;
+        height: 100%;
+        > div {
+          top: 50%;
+
+          width: ${toggleShort}px;
+          height: ${toggleLength}px;
+          margin-top: -20px;
+
+          border-radius: 4px 0 0 4px;
+        }
+      `
+    ),
+    toggleRight: (0, import_antd_style.cx)(
+      `${prefix}-toggle`,
+      `${prefix}-toggle-right`,
+      commonToggle,
+      import_antd_style.css`
+        right: -${offset}px;
+        width: ${toggleShort}px;
+        height: 100%;
+        > div {
+          top: 50%;
+
+          width: ${toggleShort}px;
+          height: ${toggleLength}px;
+          margin-top: -20px;
+
+          border-radius: 0 4px 4px 0;
+        }
+      `
+    ),
+    toggleTop: (0, import_antd_style.cx)(
+      `${prefix}-toggle`,
+      `${prefix}-toggle-top`,
+      commonToggle,
+      import_antd_style.css`
+        top: -${offset}px;
+        width: 100%;
+        height: ${toggleShort}px;
+
+        > div {
+          left: 50%;
+
+          width: ${toggleLength}px;
+          height: ${toggleShort}px;
+          margin-left: -20px;
+
+          border-radius: 4px 4px 0 0;
+        }
+      `
+    ),
+    toggleBottom: (0, import_antd_style.cx)(
+      `${prefix}-toggle`,
+      `${prefix}-toggle-bottom`,
+      commonToggle,
+      import_antd_style.css`
+        bottom: -${offset}px;
+        width: 100%;
+        height: ${toggleShort}px;
+
+        > div {
+          left: 50%;
+
+          width: ${toggleLength}px;
+          height: 16px;
+          margin-left: -20px;
+
+          border-radius: 0 0 4px 4px;
+        }
+      `
+    ),
+    panel: (0, import_antd_style.cx)(
+      `${prefix}-fixed`,
+      import_antd_style.css`
+        overflow: hidden;
+        background: ${token.colorBgContainer};
+        transition: all 0.2s ${token.motionEaseOut};
+      `
+    ),
+    handlerIcon: import_antd_style.css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s ${token.motionEaseOut};
+    `,
+    leftHandle: (0, import_antd_style.cx)(
+      import_antd_style.css`
+        ${commonHandle};
+
+        &::before {
+          left: 50%;
+          width: 2px;
+          height: 100%;
+        }
+      `,
+      `${prefix}-left-handle`
+    ),
+    rightHandle: (0, import_antd_style.cx)(
+      import_antd_style.css`
+        ${commonHandle};
+        &::before {
+          right: 50%;
+          width: 2px;
+          height: 100%;
+        }
+      `,
+      `${prefix}-right-handle`
+    ),
+    topHandle: (0, import_antd_style.cx)(
+      `${prefix}-top-handle`,
+      import_antd_style.css`
+        ${commonHandle};
+
+        &::before {
+          top: 50%;
+          width: 100%;
+          height: 2px;
+        }
+      `
+    ),
+    bottomHandle: (0, import_antd_style.cx)(
+      `${prefix}-bottom-handle`,
+      import_antd_style.css`
+        ${commonHandle};
+
+        &::before {
+          bottom: 50%;
+          width: 100%;
+          height: 2px;
+        }
+      `
+    )
+  };
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStyle
+});

package/lib/DraggablePanel/utils.d.ts

@@ -0,0 +1,2 @@
+import { placementType } from './index';
+export declare const revesePlacement: (placement: placementType) => "left" | "right" | "bottom" | "top";