@lobehub/ui 3.4.2 → 3.4.3

package/es/DraggablePanel/style.mjs

@@ -0,0 +1,252 @@
+import { createStyles, css, cx } from "antd-style";
+
+//#region src/DraggablePanel/style.ts
+const LAYOUT = {
+	offset: 16,
+	toggleLength: 54,
+	toggleShort: 16
+};
+const useStyles = createStyles(({ prefixCls, token }, { backgroundColor, headerHeight, showBorder, showHandleWideArea }) => {
+	const prefix = `${prefixCls}-draggable-panel`;
+	const borderStyles = {
+		borderBottom: css`
+        border-block-end-width: ${showBorder ? "1px" : "0"};
+      `,
+		borderLeft: css`
+        border-inline-start-width: ${showBorder ? "1px" : "0"};
+      `,
+		borderRight: css`
+        border-inline-end-width: ${showBorder ? "1px" : "0"};
+      `,
+		borderTop: css`
+        border-block-start-width: ${showBorder ? "1px" : "0"};
+      `
+	};
+	const float = css`
+      position: absolute;
+      z-index: 200;
+    `;
+	const floatPositions = {
+		bottomFloat: cx(float, css`
+          inset-block-end: 0;
+          inset-inline: 0 0;
+          width: 100%;
+        `),
+		leftFloat: cx(float, css`
+          inset-block: ${headerHeight}px 0;
+          inset-inline-start: 0;
+          height: calc(100% - ${headerHeight}px);
+        `),
+		rightFloat: cx(float, css`
+          inset-block: ${headerHeight}px 0;
+          inset-inline-end: 0;
+          height: calc(100% - ${headerHeight}px);
+        `),
+		topFloat: cx(float, css`
+          inset-block-start: ${headerHeight}px;
+          inset-inline: 0 0;
+          width: 100%;
+        `)
+	};
+	const handleBaseStyle = css`
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        transition: all 0.2s ${token.motionEaseOut};
+      }
+    `;
+	const handleHighlightStyle = css`
+      &:hover {
+        &::before {
+          background: ${token.colorPrimary};
+          box-shadow: 0 0 8px ${token.colorPrimary}40;
+        }
+      }
+
+      &:active {
+        &::before {
+          background: ${token.colorPrimary} !important;
+        }
+      }
+    `;
+	const handleStyles = {
+		handleBottom: cx(`${prefix}-bottom-handle`, css`
+          &::before {
+            inset-block-end: 50%;
+            width: 100%;
+            height: 2px;
+          }
+        `),
+		handleLeft: cx(`${prefix}-left-handle`, css`
+          &::before {
+            inset-inline-start: 50%;
+            width: 2px;
+            height: 100%;
+          }
+        `),
+		handleRight: cx(`${prefix}-right-handle`, css`
+          &::before {
+            inset-inline-end: 50%;
+            width: 2px;
+            height: 100%;
+          }
+        `),
+		handleRoot: handleBaseStyle,
+		handleTop: cx(`${prefix}-top-handle`, css`
+          &::before {
+            inset-block-start: 50%;
+            width: 100%;
+            height: 2px;
+          }
+        `)
+	};
+	const toggleBaseStyle = cx(`${prefix}-toggle`, css`
+        pointer-events: ${showHandleWideArea ? "all" : "none"};
+
+        position: absolute;
+        z-index: 50;
+
+        opacity: 0;
+
+        transition: all 0.2s ${token.motionEaseOut};
+
+        &:hover,
+        &:active {
+          opacity: 1 !important;
+        }
+
+        > div {
+          pointer-events: all;
+          cursor: pointer;
+
+          position: absolute;
+
+          border: 1px solid ${token.colorBorder};
+
+          color: ${token.colorTextTertiary};
+
+          background: ${backgroundColor || token.colorBgLayout};
+          backdrop-filter: blur(8px);
+
+          transition: all 0.2s ${token.motionEaseOut};
+
+          &:hover {
+            color: ${token.colorTextSecondary};
+          }
+
+          &:active {
+            color: ${token.colorText};
+          }
+        }
+      `);
+	const toggleStyles = {
+		toggleBottom: cx(`${prefix}-toggle-bottom`, css`
+          inset-block-end: -${LAYOUT.offset}px;
+          width: 100%;
+          height: ${LAYOUT.toggleShort}px;
+
+          > div {
+            inset-inline-start: 50%;
+
+            width: ${LAYOUT.toggleLength}px;
+            height: ${LAYOUT.toggleShort}px;
+            margin-inline-start: -27px;
+            border-block-start-width: 0;
+            border-radius: 0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px;
+          }
+        `),
+		toggleLeft: cx(`${prefix}-toggle-left`, css`
+          inset-inline-start: -${LAYOUT.offset}px;
+          width: ${LAYOUT.toggleShort}px;
+          height: 100%;
+
+          > div {
+            inset-block-start: 50%;
+
+            width: ${LAYOUT.toggleShort}px;
+            height: ${LAYOUT.toggleLength}px;
+            margin-block-start: -27px;
+            border-inline-end-width: 0;
+            border-radius: ${token.borderRadiusLG}px 0 0 ${token.borderRadiusLG}px;
+          }
+        `),
+		toggleRight: cx(`${prefix}-toggle-right`, css`
+          inset-inline-end: -${LAYOUT.offset}px;
+          width: ${LAYOUT.toggleShort}px;
+          height: 100%;
+
+          > div {
+            inset-block-start: 50%;
+
+            width: ${LAYOUT.toggleShort}px;
+            height: ${LAYOUT.toggleLength}px;
+            margin-block-start: -27px;
+            border-inline-start-width: 0;
+            border-radius: 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px 0;
+          }
+        `),
+		toggleRoot: toggleBaseStyle,
+		toggleTop: cx(`${prefix}-toggle-top`, css`
+          inset-block-start: -${LAYOUT.offset}px;
+          width: 100%;
+          height: ${LAYOUT.toggleShort}px;
+
+          > div {
+            inset-inline-start: 50%;
+
+            width: ${LAYOUT.toggleLength}px;
+            height: ${LAYOUT.toggleShort}px;
+            margin-inline-start: -27px;
+            border-block-end-width: 0;
+            border-radius: ${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0;
+          }
+        `)
+	};
+	const componentStyles = {
+		fixed: css`
+        position: relative;
+      `,
+		fullscreen: css`
+        position: absolute;
+        inset-block: ${headerHeight}px 0;
+        inset-inline: 0;
+
+        width: 100%;
+        height: calc(100% - ${headerHeight}px);
+
+        background: ${token.colorBgContainerSecondary};
+      `,
+		handlerIcon: css`
+        transition: all 0.2s ${token.motionEaseOut};
+      `,
+		panel: cx(`${prefix}-fixed`, css`
+          overflow: hidden;
+          background: ${backgroundColor || token.colorBgLayout};
+          transition: all 0.2s ${token.motionEaseOut};
+        `),
+		root: cx(prefix, css`
+          flex-shrink: 0;
+          border: 0 solid ${token.colorBorderSecondary};
+
+          &:hover {
+            > .${prefix}-toggle {
+              opacity: 1;
+            }
+          }
+        `)
+	};
+	return {
+		...borderStyles,
+		...floatPositions,
+		...handleStyles,
+		handleHighlight: handleHighlightStyle,
+		...toggleStyles,
+		...componentStyles
+	};
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/DraggablePanel/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/DraggablePanel/style.ts"],"sourcesContent":["import { createStyles, css, cx } from 'antd-style';\n\n// Layout constants\nconst LAYOUT = {\n  offset: 16,\n  toggleLength: 54,\n  toggleShort: 16,\n};\n\nexport const useStyles = createStyles(\n  (\n    { prefixCls, token },\n    {\n      backgroundColor,\n      headerHeight,\n      showBorder,\n      showHandleWideArea,\n    }: {\n      backgroundColor?: string;\n      headerHeight: number;\n      showBorder: boolean;\n      showHandleWideArea: boolean;\n    },\n  ) => {\n    const prefix = `${prefixCls}-draggable-panel`;\n\n    // Base styles\n    const borderStyles = {\n      borderBottom: css`\n        border-block-end-width: ${showBorder ? '1px' : '0'};\n      `,\n      borderLeft: css`\n        border-inline-start-width: ${showBorder ? '1px' : '0'};\n      `,\n      borderRight: css`\n        border-inline-end-width: ${showBorder ? '1px' : '0'};\n      `,\n      borderTop: css`\n        border-block-start-width: ${showBorder ? '1px' : '0'};\n      `,\n    };\n\n    // Position styles\n    const float = css`\n      position: absolute;\n      z-index: 200;\n    `;\n\n    const floatPositions = {\n      bottomFloat: cx(\n        float,\n        css`\n          inset-block-end: 0;\n          inset-inline: 0 0;\n          width: 100%;\n        `,\n      ),\n      leftFloat: cx(\n        float,\n        css`\n          inset-block: ${headerHeight}px 0;\n          inset-inline-start: 0;\n          height: calc(100% - ${headerHeight}px);\n        `,\n      ),\n      rightFloat: cx(\n        float,\n        css`\n          inset-block: ${headerHeight}px 0;\n          inset-inline-end: 0;\n          height: calc(100% - ${headerHeight}px);\n        `,\n      ),\n      topFloat: cx(\n        float,\n        css`\n          inset-block-start: ${headerHeight}px;\n          inset-inline: 0 0;\n          width: 100%;\n        `,\n      ),\n    };\n\n    // Handle styles\n    const handleBaseStyle = css`\n      position: relative;\n\n      &::before {\n        content: '';\n        position: absolute;\n        transition: all 0.2s ${token.motionEaseOut};\n      }\n    `;\n\n    const handleHighlightStyle = css`\n      &:hover {\n        &::before {\n          background: ${token.colorPrimary};\n          box-shadow: 0 0 8px ${token.colorPrimary}40;\n        }\n      }\n\n      &:active {\n        &::before {\n          background: ${token.colorPrimary} !important;\n        }\n      }\n    `;\n\n    const handleStyles = {\n      handleBottom: cx(\n        `${prefix}-bottom-handle`,\n        css`\n          &::before {\n            inset-block-end: 50%;\n            width: 100%;\n            height: 2px;\n          }\n        `,\n      ),\n      handleLeft: cx(\n        `${prefix}-left-handle`,\n        css`\n          &::before {\n            inset-inline-start: 50%;\n            width: 2px;\n            height: 100%;\n          }\n        `,\n      ),\n      handleRight: cx(\n        `${prefix}-right-handle`,\n        css`\n          &::before {\n            inset-inline-end: 50%;\n            width: 2px;\n            height: 100%;\n          }\n        `,\n      ),\n      handleRoot: handleBaseStyle,\n      handleTop: cx(\n        `${prefix}-top-handle`,\n        css`\n          &::before {\n            inset-block-start: 50%;\n            width: 100%;\n            height: 2px;\n          }\n        `,\n      ),\n    };\n\n    // Toggle styles\n    const toggleBaseStyle = cx(\n      `${prefix}-toggle`,\n      css`\n        pointer-events: ${showHandleWideArea ? 'all' : 'none'};\n\n        position: absolute;\n        z-index: 50;\n\n        opacity: 0;\n\n        transition: all 0.2s ${token.motionEaseOut};\n\n        &:hover,\n        &:active {\n          opacity: 1 !important;\n        }\n\n        > div {\n          pointer-events: all;\n          cursor: pointer;\n\n          position: absolute;\n\n          border: 1px solid ${token.colorBorder};\n\n          color: ${token.colorTextTertiary};\n\n          background: ${backgroundColor || token.colorBgLayout};\n          backdrop-filter: blur(8px);\n\n          transition: all 0.2s ${token.motionEaseOut};\n\n          &:hover {\n            color: ${token.colorTextSecondary};\n          }\n\n          &:active {\n            color: ${token.colorText};\n          }\n        }\n      `,\n    );\n\n    const toggleStyles = {\n      toggleBottom: cx(\n        `${prefix}-toggle-bottom`,\n        css`\n          inset-block-end: -${LAYOUT.offset}px;\n          width: 100%;\n          height: ${LAYOUT.toggleShort}px;\n\n          > div {\n            inset-inline-start: 50%;\n\n            width: ${LAYOUT.toggleLength}px;\n            height: ${LAYOUT.toggleShort}px;\n            margin-inline-start: -27px;\n            border-block-start-width: 0;\n            border-radius: 0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px;\n          }\n        `,\n      ),\n      toggleLeft: cx(\n        `${prefix}-toggle-left`,\n        css`\n          inset-inline-start: -${LAYOUT.offset}px;\n          width: ${LAYOUT.toggleShort}px;\n          height: 100%;\n\n          > div {\n            inset-block-start: 50%;\n\n            width: ${LAYOUT.toggleShort}px;\n            height: ${LAYOUT.toggleLength}px;\n            margin-block-start: -27px;\n            border-inline-end-width: 0;\n            border-radius: ${token.borderRadiusLG}px 0 0 ${token.borderRadiusLG}px;\n          }\n        `,\n      ),\n      toggleRight: cx(\n        `${prefix}-toggle-right`,\n        css`\n          inset-inline-end: -${LAYOUT.offset}px;\n          width: ${LAYOUT.toggleShort}px;\n          height: 100%;\n\n          > div {\n            inset-block-start: 50%;\n\n            width: ${LAYOUT.toggleShort}px;\n            height: ${LAYOUT.toggleLength}px;\n            margin-block-start: -27px;\n            border-inline-start-width: 0;\n            border-radius: 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px 0;\n          }\n        `,\n      ),\n      toggleRoot: toggleBaseStyle,\n      toggleTop: cx(\n        `${prefix}-toggle-top`,\n        css`\n          inset-block-start: -${LAYOUT.offset}px;\n          width: 100%;\n          height: ${LAYOUT.toggleShort}px;\n\n          > div {\n            inset-inline-start: 50%;\n\n            width: ${LAYOUT.toggleLength}px;\n            height: ${LAYOUT.toggleShort}px;\n            margin-inline-start: -27px;\n            border-block-end-width: 0;\n            border-radius: ${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0;\n          }\n        `,\n      ),\n    };\n\n    // Additional component styles\n    const componentStyles = {\n      fixed: css`\n        position: relative;\n      `,\n      fullscreen: css`\n        position: absolute;\n        inset-block: ${headerHeight}px 0;\n        inset-inline: 0;\n\n        width: 100%;\n        height: calc(100% - ${headerHeight}px);\n\n        background: ${token.colorBgContainerSecondary};\n      `,\n      handlerIcon: css`\n        transition: all 0.2s ${token.motionEaseOut};\n      `,\n      panel: cx(\n        `${prefix}-fixed`,\n        css`\n          overflow: hidden;\n          background: ${backgroundColor || token.colorBgLayout};\n          transition: all 0.2s ${token.motionEaseOut};\n        `,\n      ),\n      root: cx(\n        prefix,\n        css`\n          flex-shrink: 0;\n          border: 0 solid ${token.colorBorderSecondary};\n\n          &:hover {\n            > .${prefix}-toggle {\n              opacity: 1;\n            }\n          }\n        `,\n      ),\n    };\n\n    return {\n      ...borderStyles,\n      ...floatPositions,\n      ...handleStyles,\n      handleHighlight: handleHighlightStyle,\n      ...toggleStyles,\n      ...componentStyles,\n    };\n  },\n);\n"],"mappings":"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"}

package/es/DraggablePanel/type.d.mts

@@ -0,0 +1,48 @@
+import { DivProps } from "../types/index.mjs";
+import { CSSProperties } from "react";
+import { NumberSize, Size } from "re-resizable";
+import { Props } from "react-rnd";
+
+//#region src/DraggablePanel/type.d.ts
+type PlacementType = 'right' | 'left' | 'top' | 'bottom';
+interface DraggablePanelProps extends DivProps {
+  backgroundColor?: string;
+  classNames?: {
+    content?: string;
+    handle?: string;
+  };
+  defaultExpand?: boolean;
+  defaultSize?: Partial<Size>;
+  destroyOnClose?: boolean;
+  expand?: boolean;
+  expandable?: boolean;
+  fullscreen?: boolean;
+  headerHeight?: number;
+  maxHeight?: number;
+  maxWidth?: number;
+  minHeight?: number;
+  minWidth?: number;
+  mode?: 'fixed' | 'float';
+  onExpandChange?: (expand: boolean) => void;
+  onSizeChange?: (delta: NumberSize, size?: Size) => void;
+  onSizeDragging?: (delta: NumberSize, size?: Size) => void;
+  pin?: boolean;
+  placement: PlacementType;
+  resize?: Props['enableResizing'];
+  /**
+   * Whether to show border
+   * @default true
+   */
+  showBorder?: boolean;
+  showHandleHighlight?: boolean;
+  showHandleWhenCollapsed?: boolean;
+  showHandleWideArea?: boolean;
+  size?: Partial<Size>;
+  styles?: {
+    content?: CSSProperties;
+    handle?: CSSProperties;
+  };
+}
+//#endregion
+export { DraggablePanelProps };
+//# sourceMappingURL=type.d.mts.map

package/es/DraggablePanel/utils.mjs

@@ -0,0 +1,13 @@
+//#region src/DraggablePanel/utils.ts
+const reversePlacement = (placement) => {
+	switch (placement) {
+		case "bottom": return "top";
+		case "top": return "bottom";
+		case "right": return "left";
+		case "left": return "right";
+	}
+};
+
+//#endregion
+export { reversePlacement };
+//# sourceMappingURL=utils.mjs.map

package/es/DraggablePanel/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../src/DraggablePanel/utils.ts"],"sourcesContent":["import type { DraggablePanelProps } from './type';\n\nexport const reversePlacement = (placement: DraggablePanelProps['placement']) => {\n  switch (placement) {\n    case 'bottom': {\n      return 'top';\n    }\n    case 'top': {\n      return 'bottom';\n    }\n    case 'right': {\n      return 'left';\n    }\n    case 'left': {\n      return 'right';\n    }\n  }\n};\n"],"mappings":";AAEA,MAAa,oBAAoB,cAAgD;AAC/E,SAAQ,WAAR;EACE,KAAK,SACH,QAAO;EAET,KAAK,MACH,QAAO;EAET,KAAK,QACH,QAAO;EAET,KAAK,OACH,QAAO"}

package/es/DraggableSideNav/DraggableSideNav.d.mts

@@ -0,0 +1,8 @@
+import { DraggableSideNavProps } from "./type.mjs";
+import * as react38 from "react";
+
+//#region src/DraggableSideNav/DraggableSideNav.d.ts
+declare const DraggableSideNav: react38.NamedExoticComponent<DraggableSideNavProps>;
+//#endregion
+export { DraggableSideNav };
+//# sourceMappingURL=DraggableSideNav.d.mts.map