@lobehub/ui 3.4.2 → 3.4.3

package/es/DraggableSideNav/style.mjs

@@ -0,0 +1,254 @@
+import { createStyles } from "antd-style";
+
+//#region src/DraggableSideNav/style.ts
+const LAYOUT = {
+	offset: 16,
+	toggleLength: 54,
+	toggleShort: 16
+};
+const useStyles = createStyles(({ css: css$1, token, prefixCls }, { showBorder, backgroundColor }) => ({
+	body: css$1`
+      /* Smooth scroll behavior */
+      scroll-behavior: smooth;
+      overflow: hidden auto;
+      flex: 1;
+
+      /* Better scrollbar styling */
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border-radius: 3px;
+        background: ${token.colorBorderSecondary};
+
+        &:hover {
+          background: ${token.colorBorder};
+        }
+      }
+    `,
+	container: css$1`
+      /* Width transition controlled by inline style */
+
+      /* Ensure smooth animations */
+      will-change: width;
+
+      position: relative;
+
+      display: flex;
+      flex-direction: column;
+
+      height: 100%;
+    `,
+	contentContainer: css$1`
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+
+      height: 100%;
+      border-inline-end: ${showBorder ? "1px" : "0"} solid ${token.colorBorderSecondary};
+
+      background: ${backgroundColor || token.colorBgLayout};
+    `,
+	footer: css$1`
+      flex-shrink: 0;
+    `,
+	handlerIcon: css$1`
+      /* Icon transitions are now handled by motion */
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `,
+	header: css$1`
+      flex-shrink: 0;
+    `,
+	menuOverride: css$1`
+      .${prefixCls}-menu {
+        .${prefixCls}-menu-item {
+          display: flex;
+          gap: 8px;
+          align-items: center;
+          justify-content: center;
+
+          height: unset;
+          min-height: 36px;
+          padding-block: 4px;
+          padding-inline: 8px !important;
+        }
+
+        .${prefixCls}-menu-item-group-title {
+          overflow: hidden;
+          padding-inline: 8px;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .${prefixCls}-menu-item-icon {
+          position: absolute;
+          inset-inline-start: 0;
+
+          display: flex !important;
+          flex: none;
+          align-items: center;
+          justify-content: center;
+
+          width: 36px;
+          height: 36px;
+        }
+
+        .${prefixCls}-menu-title-content {
+          overflow: hidden;
+          flex: 1;
+
+          margin: 0 !important;
+          padding-inline-start: 36px;
+
+          line-height: 1.5;
+        }
+
+        &.${prefixCls}-menu-inline-collapsed {
+          .ant-menu-title-content {
+            display: none;
+            width: 0;
+            opacity: 0;
+          }
+
+          .${prefixCls}-menu-item {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            width: 36px !important;
+            height: 36px !important;
+          }
+        }
+      }
+    `,
+	resizeHandle: css$1`
+      cursor: col-resize;
+
+      position: absolute;
+      inset-block: 0 0;
+
+      width: 8px;
+
+      transition: background-color 0.2s ease;
+
+      &::after {
+        content: '';
+
+        position: absolute;
+        inset-block: 0;
+        inset-inline-start: 50%;
+        transform: translateX(-50%);
+
+        width: 2px;
+
+        background: transparent;
+
+        transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+      }
+    `,
+	resizeHandleHighlight: css$1`
+      &:hover {
+        &::after {
+          width: 3px;
+          background: ${token.colorPrimary};
+          box-shadow: 0 0 8px ${token.colorPrimary}40;
+        }
+      }
+
+      &:active {
+        &::after {
+          background: ${token.colorPrimaryActive};
+        }
+      }
+    `,
+	resizeHandleLeft: css$1`
+      inset-inline-end: -4px;
+    `,
+	resizeHandleRight: css$1`
+      inset-inline-start: -4px;
+    `,
+	toggleLeft: css$1`
+      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: -${LAYOUT.toggleLength / 2}px;
+        margin-inline-start: -1px;
+        border-inline-start-width: 0;
+        border-radius: 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px 0;
+      }
+    `,
+	toggleRight: css$1`
+      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: -${LAYOUT.toggleLength / 2}px;
+        margin-inline-end: -1px;
+        border-inline-end-width: 0;
+        border-radius: ${token.borderRadiusLG}px 0 0 ${token.borderRadiusLG}px; /* 右侧面板，handle 在左边，左侧圆角 */
+      }
+    `,
+	toggleRoot: css$1`
+      pointer-events: none;
+      position: absolute;
+      z-index: 50;
+
+      /* Smooth transitions for all states */
+      transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+
+      &:has(> div) {
+        pointer-events: all;
+      }
+
+      > div {
+        pointer-events: all;
+        cursor: pointer;
+
+        position: absolute;
+
+        border: 1px solid ${token.colorBorder};
+
+        color: ${token.colorTextTertiary};
+
+        background: ${backgroundColor || token.colorBgLayout};
+        backdrop-filter: blur(8px);
+
+        /* Enhanced transitions with backdrop blur */
+        transition:
+          color 0.2s ${token.motionEaseOut},
+          transform 0.2s ${token.motionEaseOut},
+          box-shadow 0.2s ${token.motionEaseOut};
+
+        &:hover {
+          color: ${token.colorTextSecondary};
+        }
+
+        &:active {
+          transform: scale(0.95);
+          color: ${token.colorText};
+        }
+      }
+    `
+}));
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/DraggableSideNav/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/DraggableSideNav/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\n// Layout constants (aligned with DraggablePanel)\nconst LAYOUT = {\n  offset: 16,\n  toggleLength: 54,\n  toggleShort: 16,\n};\n\nexport const useStyles = createStyles(\n  (\n    { css, token, prefixCls },\n    { showBorder, backgroundColor }: { backgroundColor?: string; showBorder: boolean },\n  ) => ({\n    body: css`\n      /* Smooth scroll behavior */\n      scroll-behavior: smooth;\n      overflow: hidden auto;\n      flex: 1;\n\n      /* Better scrollbar styling */\n      &::-webkit-scrollbar {\n        width: 6px;\n      }\n\n      &::-webkit-scrollbar-track {\n        background: transparent;\n      }\n\n      &::-webkit-scrollbar-thumb {\n        border-radius: 3px;\n        background: ${token.colorBorderSecondary};\n\n        &:hover {\n          background: ${token.colorBorder};\n        }\n      }\n    `,\n    container: css`\n      /* Width transition controlled by inline style */\n\n      /* Ensure smooth animations */\n      will-change: width;\n\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n\n      height: 100%;\n    `,\n    contentContainer: css`\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n\n      height: 100%;\n      border-inline-end: ${showBorder ? '1px' : '0'} solid ${token.colorBorderSecondary};\n\n      background: ${backgroundColor || token.colorBgLayout};\n    `,\n    footer: css`\n      flex-shrink: 0;\n    `,\n    handlerIcon: css`\n      /* Icon transitions are now handled by motion */\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `,\n    header: css`\n      flex-shrink: 0;\n    `,\n    menuOverride: css`\n      .${prefixCls}-menu {\n        .${prefixCls}-menu-item {\n          display: flex;\n          gap: 8px;\n          align-items: center;\n          justify-content: center;\n\n          height: unset;\n          min-height: 36px;\n          padding-block: 4px;\n          padding-inline: 8px !important;\n        }\n\n        .${prefixCls}-menu-item-group-title {\n          overflow: hidden;\n          padding-inline: 8px;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n\n        .${prefixCls}-menu-item-icon {\n          position: absolute;\n          inset-inline-start: 0;\n\n          display: flex !important;\n          flex: none;\n          align-items: center;\n          justify-content: center;\n\n          width: 36px;\n          height: 36px;\n        }\n\n        .${prefixCls}-menu-title-content {\n          overflow: hidden;\n          flex: 1;\n\n          margin: 0 !important;\n          padding-inline-start: 36px;\n\n          line-height: 1.5;\n        }\n\n        &.${prefixCls}-menu-inline-collapsed {\n          .ant-menu-title-content {\n            display: none;\n            width: 0;\n            opacity: 0;\n          }\n\n          .${prefixCls}-menu-item {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n\n            width: 36px !important;\n            height: 36px !important;\n          }\n        }\n      }\n    `,\n    resizeHandle: css`\n      cursor: col-resize;\n\n      position: absolute;\n      inset-block: 0 0;\n\n      width: 8px;\n\n      transition: background-color 0.2s ease;\n\n      &::after {\n        content: '';\n\n        position: absolute;\n        inset-block: 0;\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n\n        width: 2px;\n\n        background: transparent;\n\n        transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n      }\n    `,\n    resizeHandleHighlight: css`\n      &:hover {\n        &::after {\n          width: 3px;\n          background: ${token.colorPrimary};\n          box-shadow: 0 0 8px ${token.colorPrimary}40;\n        }\n      }\n\n      &:active {\n        &::after {\n          background: ${token.colorPrimaryActive};\n        }\n      }\n    `,\n    resizeHandleLeft: css`\n      inset-inline-end: -4px;\n    `,\n    resizeHandleRight: css`\n      inset-inline-start: -4px;\n    `,\n    toggleLeft: 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: -${LAYOUT.toggleLength / 2}px;\n        margin-inline-start: -1px;\n        border-inline-start-width: 0;\n        border-radius: 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px 0;\n      }\n    `,\n    toggleRight: 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: -${LAYOUT.toggleLength / 2}px;\n        margin-inline-end: -1px;\n        border-inline-end-width: 0;\n        border-radius: ${token.borderRadiusLG}px 0 0 ${token.borderRadiusLG}px; /* 右侧面板，handle 在左边，左侧圆角 */\n      }\n    `,\n    toggleRoot: css`\n      pointer-events: none;\n      position: absolute;\n      z-index: 50;\n\n      /* Smooth transitions for all states */\n      transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n\n      &:has(> div) {\n        pointer-events: all;\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        /* Enhanced transitions with backdrop blur */\n        transition:\n          color 0.2s ${token.motionEaseOut},\n          transform 0.2s ${token.motionEaseOut},\n          box-shadow 0.2s ${token.motionEaseOut};\n\n        &:hover {\n          color: ${token.colorTextSecondary};\n        }\n\n        &:active {\n          transform: scale(0.95);\n          color: ${token.colorText};\n        }\n      }\n    `,\n  }),\n);\n"],"mappings":";;;AAGA,MAAM,SAAS;CACb,QAAQ;CACR,cAAc;CACd,aAAa;CACd;AAED,MAAa,YAAY,cAErB,EAAE,YAAK,OAAO,aACd,EAAE,YAAY,uBACV;CACJ,MAAM,KAAG;;;;;;;;;;;;;;;;;sBAiBS,MAAM,qBAAqB;;;wBAGzB,MAAM,YAAY;;;;CAItC,WAAW,KAAG;;;;;;;;;;;;;CAad,kBAAkB,KAAG;;;;;;2BAME,aAAa,QAAQ,IAAI,SAAS,MAAM,qBAAqB;;oBAEpE,mBAAmB,MAAM,cAAc;;CAEvD,QAAQ,KAAG;;;CAGX,aAAa,KAAG;;;;;;CAMhB,QAAQ,KAAG;;;CAGX,cAAc,KAAG;SACZ,UAAU;WACR,UAAU;;;;;;;;;;;;WAYV,UAAU;;;;;;;WAOV,UAAU;;;;;;;;;;;;;WAaV,UAAU;;;;;;;;;;YAUT,UAAU;;;;;;;aAOT,UAAU;;;;;;;;;;;CAWnB,cAAc,KAAG;;;;;;;;;;;;;;;;;;;;;;;;;CAyBjB,uBAAuB,KAAG;;;;wBAIN,MAAM,aAAa;gCACX,MAAM,aAAa;;;;;;wBAM3B,MAAM,mBAAmB;;;;CAI7C,kBAAkB,KAAG;;;CAGrB,mBAAmB,KAAG;;;CAGtB,YAAY,KAAG;2BACQ,OAAO,OAAO;eAC1B,OAAO,YAAY;;;;;;iBAMjB,OAAO,YAAY;kBAClB,OAAO,aAAa;+BACP,OAAO,eAAe,EAAE;;;2BAG5B,MAAM,eAAe,KAAK,MAAM,eAAe;;;CAGtE,aAAa,KAAG;6BACS,OAAO,OAAO;eAC5B,OAAO,YAAY;;;;;;iBAMjB,OAAO,YAAY;kBAClB,OAAO,aAAa;+BACP,OAAO,eAAe,EAAE;;;yBAG9B,MAAM,eAAe,SAAS,MAAM,eAAe;;;CAGxE,YAAY,KAAG;;;;;;;;;;;;;;;;;;4BAkBS,MAAM,YAAY;;iBAE7B,MAAM,kBAAkB;;sBAEnB,mBAAmB,MAAM,cAAc;;;;;uBAKtC,MAAM,cAAc;2BAChB,MAAM,cAAc;4BACnB,MAAM,cAAc;;;mBAG7B,MAAM,mBAAmB;;;;;mBAKzB,MAAM,UAAU;;;;CAIhC,EACF"}

package/es/DraggableSideNav/type.d.mts

@@ -0,0 +1,124 @@
+import { DivProps } from "../types/index.mjs";
+import { CSSProperties, ReactNode } from "react";
+import { NumberSize } from "re-resizable";
+
+//#region src/DraggableSideNav/type.d.ts
+interface DraggableSideNavProps extends Omit<DivProps, 'children' | 'onSelect'> {
+  backgroundColor?: string;
+  /**
+   * Body content (main content area)
+   * Function that receives expand state
+   */
+  body: (expand: boolean) => ReactNode;
+  /**
+   * Classnames for internal components
+   */
+  classNames?: {
+    body?: string;
+    container?: string;
+    content?: string;
+    footer?: string;
+    handle?: string;
+    header?: string;
+  };
+  /**
+   * Whether the panel is expanded by default
+   * @default true
+   */
+  defaultExpand?: boolean;
+  /**
+   * Default width (number format)
+   */
+  defaultWidth?: number;
+  /**
+   * Whether the panel is expanded (controlled)
+   */
+  expand?: boolean;
+  /**
+   * Whether the panel can be expanded/collapsed
+   * @default true
+   */
+  expandable?: boolean;
+  /**
+   * Footer content
+   * Can be a static element or a function that receives expand state
+   */
+  footer?: ReactNode | ((expand: boolean) => ReactNode);
+  /**
+   * Header content
+   * Can be a static element or a function that receives expand state
+   */
+  header?: ReactNode | ((expand: boolean) => ReactNode);
+  /**
+   * Maximum width
+   */
+  maxWidth?: number;
+  /**
+   * Minimum width when expanded (does not affect collapsed width which is always 64px)
+   * Only applies when the panel is in expanded state
+   * @default 64
+   */
+  minWidth?: number;
+  /**
+   * Callback when expand state changes
+   */
+  onExpandChange?: (expand: boolean) => void;
+  /**
+   * Callback when menu item is selected
+   */
+  onSelect?: (key: string) => void;
+  /**
+   * Callback when width changes
+   */
+  onWidthChange?: (delta: NumberSize, width: number) => void;
+  /**
+   * Callback when actively resizing width
+   */
+  onWidthDragging?: (delta: NumberSize, width: number) => void;
+  /**
+   * Placement of the side nav
+   * @default 'left'
+   */
+  placement?: 'left' | 'right';
+  /**
+   * Whether to enable resizing
+   * @default true
+   */
+  resizable?: boolean;
+  /**
+   * Whether to show border
+   * @default true
+   */
+  showBorder?: boolean;
+  /**
+   * Whether to show handle for toggling
+   * @default true
+   */
+  showHandle?: boolean;
+  showHandleHighlight?: boolean;
+  /**
+   * Whether to show handle when collapsed
+   * @default false
+   */
+  showHandleWhenCollapsed?: boolean;
+  /**
+   * Custom styles
+   */
+  styles?: {
+    body?: CSSProperties;
+    container?: CSSProperties;
+    content?: CSSProperties;
+    footer?: CSSProperties;
+    handle?: CSSProperties;
+    header?: CSSProperties;
+  };
+  /**
+   * Expanded width (controlled)
+   * This represents the width when expanded, not the current displayed width
+   * The actual displayed width will be `width` when expanded, or `minWidth` when collapsed
+   */
+  width?: number;
+}
+//#endregion
+export { DraggableSideNavProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Drawer/Drawer.d.mts

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

package/es/Drawer/Drawer.mjs

@@ -0,0 +1,146 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
+import { Drawer } from "antd";
+import { memo, useMemo } from "react";
+import { useTheme } from "antd-style";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+
+//#region src/Drawer/Drawer.tsx
+const Drawer$1 = memo(({ onClose, containerMaxWidth = 1024, classNames, title, placement, styles, children, height, width, extra, closeIconProps, noHeader, sidebarWidth = 280, sidebar, closeIcon, ref, ...rest }) => {
+	const theme = useTheme();
+	const headerBorder = useMemo(() => {
+		if (height === "100%" || width === "100%" || height === "100vh" || width === "100vw") return {};
+		switch (placement) {
+			case "top": return { borderBottom: `1px solid ${theme.colorBorder}` };
+			case "bottom": return { borderTop: `1px solid ${theme.colorBorder}` };
+			case "left": return { borderRight: `1px solid ${theme.colorBorder}` };
+			case "right": return { borderLeft: `1px solid ${theme.colorBorder}` };
+			default: return {};
+		}
+	}, [
+		placement,
+		height,
+		width,
+		theme.colorBorder
+	]);
+	const extraNode = /* @__PURE__ */ jsxs(FlexBasic_default, {
+		align: "center",
+		className: classNames?.extra,
+		gap: 4,
+		horizontal: true,
+		justify: "flex-end",
+		style: {
+			position: "absolute",
+			right: 4,
+			top: 4,
+			...styles?.extra
+		},
+		children: [extra, closeIcon || /* @__PURE__ */ jsx(ActionIcon_default, {
+			icon: XIcon,
+			onClick: onClose,
+			...closeIconProps
+		})]
+	});
+	const sidebarContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FlexBasic_default, {
+		className: classNames?.sidebar,
+		paddingBlock: 12,
+		paddingInline: 16,
+		style: {
+			background: theme.colorBgLayout,
+			borderRight: `1px solid ${theme.colorBorderSecondary}`,
+			height: "100vh",
+			overflowX: "hidden",
+			overflowY: "auto",
+			position: "sticky",
+			top: 0,
+			...styles?.sidebar
+		},
+		width: sidebarWidth,
+		children: sidebar
+	}), /* @__PURE__ */ jsx(FlexBasic_default, {
+		className: classNames?.sidebarContent,
+		flex: 1,
+		paddingBlock: 12,
+		paddingInline: 16,
+		style: {
+			background: theme.colorBgContainer,
+			overflowX: "hidden",
+			overflowY: "auto",
+			...styles?.sidebarContent
+		},
+		children
+	})] });
+	return /* @__PURE__ */ jsx(Drawer, {
+		classNames,
+		closable: false,
+		extra: noHeader ? void 0 : extraNode,
+		height,
+		keyboard: true,
+		onClose,
+		panelRef: ref,
+		placement,
+		styles: typeof styles === "function" ? styles : {
+			...styles,
+			body: {
+				background: "transparent",
+				paddingBlock: sidebar ? 0 : 12,
+				paddingInline: sidebar ? 0 : 16,
+				...styles?.body
+			},
+			header: {
+				background: "transparent",
+				display: noHeader ? "none" : void 0,
+				padding: 4,
+				...styles?.header
+			},
+			section: {
+				background: sidebar ? `linear-gradient(to right, ${theme.colorBgLayout} 49.9%, ${theme.colorBgContainer} 50%)` : theme.colorBgContainer,
+				...styles?.section
+			},
+			wrapper: {
+				background: theme.colorBgContainer,
+				...headerBorder,
+				...styles?.wrapper
+			}
+		},
+		title: /* @__PURE__ */ jsx(FlexBasic_default, {
+			align: "center",
+			className: classNames?.title,
+			horizontal: true,
+			justify: "flex-start",
+			paddingBlock: 8,
+			paddingInline: 16,
+			style: {
+				justifySelf: "center",
+				maxWidth: containerMaxWidth,
+				width: "100%",
+				...styles?.title
+			},
+			children: title
+		}),
+		width,
+		...rest,
+		children: /* @__PURE__ */ jsxs(FlexBasic_default, {
+			className: classNames?.bodyContent,
+			horizontal: !!sidebar,
+			style: {
+				justifySelf: "center",
+				maxWidth: containerMaxWidth,
+				minHeight: "100%",
+				overflow: sidebar ? "visible" : void 0,
+				width: "100%",
+				...styles?.bodyContent
+			},
+			children: [noHeader && extraNode, sidebar ? sidebarContent : children]
+		})
+	});
+});
+Drawer$1.displayName = "Drawer";
+var Drawer_default = Drawer$1;
+
+//#endregion
+export { Drawer_default as default };
+//# sourceMappingURL=Drawer.mjs.map

package/es/Drawer/Drawer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.mjs","names":["Drawer","headerBorder: CSSProperties","Flexbox","ActionIcon","AntdDrawer"],"sources":["../../src/Drawer/Drawer.tsx"],"sourcesContent":["'use client';\n\nimport { Drawer as AntdDrawer } from 'antd';\nimport { useTheme } from 'antd-style';\nimport { XIcon } from 'lucide-react';\nimport { CSSProperties, memo, useMemo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport type { DrawerProps } from './type';\n\nconst Drawer = memo<DrawerProps>(\n  ({\n    onClose,\n    containerMaxWidth = 1024,\n    classNames,\n    title,\n    placement,\n    styles,\n    children,\n    height,\n    width,\n    extra,\n    closeIconProps,\n    noHeader,\n    sidebarWidth = 280,\n    sidebar,\n    closeIcon,\n    ref,\n    ...rest\n  }) => {\n    const theme = useTheme();\n\n    const headerBorder: CSSProperties = useMemo(() => {\n      if (height === '100%' || width === '100%' || height === '100vh' || width === '100vw')\n        return {};\n\n      switch (placement) {\n        case 'top': {\n          return {\n            borderBottom: `1px solid ${theme.colorBorder}`,\n          };\n        }\n        case 'bottom': {\n          return {\n            borderTop: `1px solid ${theme.colorBorder}`,\n          };\n        }\n        case 'left': {\n          return {\n            borderRight: `1px solid ${theme.colorBorder}`,\n          };\n        }\n        case 'right': {\n          return {\n            borderLeft: `1px solid ${theme.colorBorder}`,\n          };\n        }\n        default: {\n          return {};\n        }\n      }\n    }, [placement, height, width, theme.colorBorder]);\n\n    const extraNode = (\n      <Flexbox\n        align={'center'}\n        className={classNames?.extra}\n        gap={4}\n        horizontal\n        justify={'flex-end'}\n        style={{\n          position: 'absolute',\n          right: 4,\n          top: 4,\n          ...styles?.extra,\n        }}\n      >\n        {extra}\n        {closeIcon || <ActionIcon icon={XIcon} onClick={onClose} {...closeIconProps} />}\n      </Flexbox>\n    );\n\n    const sidebarContent = (\n      <>\n        <Flexbox\n          className={classNames?.sidebar}\n          paddingBlock={12}\n          paddingInline={16}\n          style={{\n            background: theme.colorBgLayout,\n            borderRight: `1px solid ${theme.colorBorderSecondary}`,\n            height: '100vh',\n            overflowX: 'hidden',\n            overflowY: 'auto',\n            position: 'sticky',\n            top: 0,\n            ...styles?.sidebar,\n          }}\n          width={sidebarWidth}\n        >\n          {sidebar}\n        </Flexbox>\n        <Flexbox\n          className={classNames?.sidebarContent}\n          flex={1}\n          paddingBlock={12}\n          paddingInline={16}\n          style={{\n            background: theme.colorBgContainer,\n            overflowX: 'hidden',\n            overflowY: 'auto',\n            ...styles?.sidebarContent,\n          }}\n        >\n          {children}\n        </Flexbox>\n      </>\n    );\n\n    return (\n      <AntdDrawer\n        classNames={classNames}\n        closable={false}\n        extra={noHeader ? undefined : extraNode}\n        height={height}\n        keyboard={true}\n        onClose={onClose}\n        panelRef={ref}\n        placement={placement}\n        styles={\n          typeof styles === 'function'\n            ? styles\n            : {\n                ...styles,\n                body: {\n                  background: 'transparent',\n                  paddingBlock: sidebar ? 0 : 12,\n                  paddingInline: sidebar ? 0 : 16,\n                  ...styles?.body,\n                },\n                header: {\n                  background: 'transparent',\n                  display: noHeader ? 'none' : undefined,\n                  padding: 4,\n                  ...styles?.header,\n                },\n                section: {\n                  background: sidebar\n                    ? `linear-gradient(to right, ${theme.colorBgLayout} 49.9%, ${theme.colorBgContainer} 50%)`\n                    : theme.colorBgContainer,\n                  ...styles?.section,\n                },\n                wrapper: {\n                  background: theme.colorBgContainer,\n                  ...headerBorder,\n                  ...styles?.wrapper,\n                },\n              }\n        }\n        title={\n          <Flexbox\n            align={'center'}\n            className={classNames?.title}\n            horizontal\n            justify={'flex-start'}\n            paddingBlock={8}\n            paddingInline={16}\n            style={{\n              justifySelf: 'center',\n              maxWidth: containerMaxWidth,\n              width: '100%',\n              ...styles?.title,\n            }}\n          >\n            {title}\n          </Flexbox>\n        }\n        width={width}\n        {...rest}\n      >\n        <Flexbox\n          className={classNames?.bodyContent}\n          horizontal={!!sidebar}\n          style={{\n            justifySelf: 'center',\n            maxWidth: containerMaxWidth,\n            minHeight: '100%',\n            overflow: sidebar ? 'visible' : undefined,\n            width: '100%',\n            ...styles?.bodyContent,\n          }}\n        >\n          {noHeader && extraNode}\n          {sidebar ? sidebarContent : children}\n        </Flexbox>\n      </AntdDrawer>\n    );\n  },\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,WAAS,MACZ,EACC,SACA,oBAAoB,MACpB,YACA,OACA,WACA,QACA,UACA,QACA,OACA,OACA,gBACA,UACA,eAAe,KACf,SACA,WACA,KACA,GAAG,WACC;CACJ,MAAM,QAAQ,UAAU;CAExB,MAAMC,eAA8B,cAAc;AAChD,MAAI,WAAW,UAAU,UAAU,UAAU,WAAW,WAAW,UAAU,QAC3E,QAAO,EAAE;AAEX,UAAQ,WAAR;GACE,KAAK,MACH,QAAO,EACL,cAAc,aAAa,MAAM,eAClC;GAEH,KAAK,SACH,QAAO,EACL,WAAW,aAAa,MAAM,eAC/B;GAEH,KAAK,OACH,QAAO,EACL,aAAa,aAAa,MAAM,eACjC;GAEH,KAAK,QACH,QAAO,EACL,YAAY,aAAa,MAAM,eAChC;GAEH,QACE,QAAO,EAAE;;IAGZ;EAAC;EAAW;EAAQ;EAAO,MAAM;EAAY,CAAC;CAEjD,MAAM,YACJ,qBAACC;EACC,OAAO;EACP,WAAW,YAAY;EACvB,KAAK;EACL;EACA,SAAS;EACT,OAAO;GACL,UAAU;GACV,OAAO;GACP,KAAK;GACL,GAAG,QAAQ;GACZ;aAEA,OACA,aAAa,oBAACC;GAAW,MAAM;GAAO,SAAS;GAAS,GAAI;IAAkB;GACvE;CAGZ,MAAM,iBACJ,8CACE,oBAACD;EACC,WAAW,YAAY;EACvB,cAAc;EACd,eAAe;EACf,OAAO;GACL,YAAY,MAAM;GAClB,aAAa,aAAa,MAAM;GAChC,QAAQ;GACR,WAAW;GACX,WAAW;GACX,UAAU;GACV,KAAK;GACL,GAAG,QAAQ;GACZ;EACD,OAAO;YAEN;GACO,EACV,oBAACA;EACC,WAAW,YAAY;EACvB,MAAM;EACN,cAAc;EACd,eAAe;EACf,OAAO;GACL,YAAY,MAAM;GAClB,WAAW;GACX,WAAW;GACX,GAAG,QAAQ;GACZ;EAEA;GACO,IACT;AAGL,QACE,oBAACE;EACa;EACZ,UAAU;EACV,OAAO,WAAW,SAAY;EACtB;EACR,UAAU;EACD;EACT,UAAU;EACC;EACX,QACE,OAAO,WAAW,aACd,SACA;GACE,GAAG;GACH,MAAM;IACJ,YAAY;IACZ,cAAc,UAAU,IAAI;IAC5B,eAAe,UAAU,IAAI;IAC7B,GAAG,QAAQ;IACZ;GACD,QAAQ;IACN,YAAY;IACZ,SAAS,WAAW,SAAS;IAC7B,SAAS;IACT,GAAG,QAAQ;IACZ;GACD,SAAS;IACP,YAAY,UACR,6BAA6B,MAAM,cAAc,UAAU,MAAM,iBAAiB,SAClF,MAAM;IACV,GAAG,QAAQ;IACZ;GACD,SAAS;IACP,YAAY,MAAM;IAClB,GAAG;IACH,GAAG,QAAQ;IACZ;GACF;EAEP,OACE,oBAACF;GACC,OAAO;GACP,WAAW,YAAY;GACvB;GACA,SAAS;GACT,cAAc;GACd,eAAe;GACf,OAAO;IACL,aAAa;IACb,UAAU;IACV,OAAO;IACP,GAAG,QAAQ;IACZ;aAEA;IACO;EAEL;EACP,GAAI;YAEJ,qBAACA;GACC,WAAW,YAAY;GACvB,YAAY,CAAC,CAAC;GACd,OAAO;IACL,aAAa;IACb,UAAU;IACV,WAAW;IACX,UAAU,UAAU,YAAY;IAChC,OAAO;IACP,GAAG,QAAQ;IACZ;cAEA,YAAY,WACZ,UAAU,iBAAiB;IACpB;GACC;EAGlB;AAED,SAAO,cAAc;AAErB,qBAAeF"}

package/es/Drawer/index.d.mts

@@ -0,0 +1,3 @@
+import { DrawerProps } from "./type.mjs";
+import { Drawer } from "./Drawer.mjs";
+export { DrawerProps, Drawer as default };

package/es/Drawer/index.mjs

@@ -0,0 +1,3 @@
+import Drawer_default from "./Drawer.mjs";
+
+export { Drawer_default as default };

package/es/Drawer/type.d.mts

@@ -0,0 +1,31 @@
+import { ActionIconProps } from "../ActionIcon/type.mjs";
+import "../ActionIcon/index.mjs";
+import { DrawerProps } from "antd";
+import { CSSProperties, ReactNode, Ref } from "react";
+
+//#region src/Drawer/type.d.ts
+interface DrawerProps$1 extends Omit<DrawerProps, 'styles' | 'classNames'> {
+  classNames?: DrawerProps['classNames'] & {
+    bodyContent?: string;
+    extra?: string;
+    sidebar?: string;
+    sidebarContent?: string;
+    title?: string;
+  };
+  closeIconProps?: ActionIconProps;
+  containerMaxWidth?: number | string;
+  noHeader?: boolean;
+  ref?: Ref<HTMLDivElement>;
+  sidebar?: ReactNode;
+  sidebarWidth?: number;
+  styles?: DrawerProps['styles'] & {
+    bodyContent?: CSSProperties;
+    extra?: CSSProperties;
+    sidebar?: CSSProperties;
+    sidebarContent?: CSSProperties;
+    title?: CSSProperties;
+  };
+}
+//#endregion
+export { DrawerProps$1 as DrawerProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Dropdown/Dropdown.d.mts

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

package/es/Dropdown/Dropdown.mjs

@@ -0,0 +1,33 @@
+'use client';
+
+import { IconProvider } from "../Icon/components/IconProvider.mjs";
+import { mapItems } from "../Menu/utils.mjs";
+import { Dropdown } from "antd";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Dropdown/Dropdown.tsx
+const Dropdown$1 = memo(({ children, iconProps, menu, ...rest }) => {
+	const { items, ...menuProps } = menu;
+	const antdItems = useMemo(() => items.map((item) => mapItems(item)), [items]);
+	return /* @__PURE__ */ jsx(IconProvider, {
+		config: {
+			size: "small",
+			...iconProps
+		},
+		children: /* @__PURE__ */ jsx(Dropdown, {
+			menu: {
+				...menuProps,
+				items: antdItems
+			},
+			...rest,
+			children
+		})
+	});
+});
+Dropdown$1.displayName = "Dropdown";
+var Dropdown_default = Dropdown$1;
+
+//#endregion
+export { Dropdown_default as default };
+//# sourceMappingURL=Dropdown.mjs.map

package/es/Dropdown/Dropdown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.mjs","names":["Dropdown","AntdDropdown"],"sources":["../../src/Dropdown/Dropdown.tsx"],"sourcesContent":["'use client';\n\nimport { Dropdown as AntdDropdown } from 'antd';\nimport { memo, useMemo } from 'react';\n\nimport { IconProvider } from '@/Icon';\nimport { mapItems } from '@/Menu';\n\nimport type { DropdownProps } from './type';\n\nconst Dropdown = memo<DropdownProps>(({ children, iconProps, menu, ...rest }) => {\n  const { items, ...menuProps } = menu;\n\n  const antdItems = useMemo(() => items.map((item) => mapItems(item)), [items]);\n\n  return (\n    <IconProvider\n      config={{\n        size: 'small',\n        ...iconProps,\n      }}\n    >\n      <AntdDropdown\n        menu={{\n          ...menuProps,\n          items: antdItems,\n        }}\n        {...rest}\n      >\n        {children}\n      </AntdDropdown>\n    </IconProvider>\n  );\n});\n\nDropdown.displayName = 'Dropdown';\n\nexport default Dropdown;\n"],"mappings":";;;;;;;;;AAUA,MAAMA,aAAW,MAAqB,EAAE,UAAU,WAAW,MAAM,GAAG,WAAW;CAC/E,MAAM,EAAE,OAAO,GAAG,cAAc;CAEhC,MAAM,YAAY,cAAc,MAAM,KAAK,SAAS,SAAS,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC;AAE7E,QACE,oBAAC;EACC,QAAQ;GACN,MAAM;GACN,GAAG;GACJ;YAED,oBAACC;GACC,MAAM;IACJ,GAAG;IACH,OAAO;IACR;GACD,GAAI;GAEH;IACY;GACF;EAEjB;AAEF,WAAS,cAAc;AAEvB,uBAAeD"}

package/es/Dropdown/index.d.mts

@@ -0,0 +1,4 @@
+import { MenuItemType } from "../Menu/type.mjs";
+import { DropdownProps } from "./type.mjs";
+import { Dropdown } from "./Dropdown.mjs";
+export { MenuItemType as DropdownMenuItemType, DropdownProps, Dropdown as default };

package/es/Dropdown/index.mjs

@@ -0,0 +1,3 @@
+import Dropdown_default from "./Dropdown.mjs";
+
+export { Dropdown_default as default };

package/es/Dropdown/type.d.mts

@@ -0,0 +1,14 @@
+import { IconContentConfig } from "../Icon/components/IconProvider.mjs";
+import "../Icon/index.mjs";
+import { MenuItemType, MenuProps } from "../Menu/type.mjs";
+import "../Menu/index.mjs";
+import { DropdownProps } from "antd/es";
+
+//#region src/Dropdown/type.d.ts
+interface DropdownProps$1 extends Omit<DropdownProps, 'menu'> {
+  iconProps?: IconContentConfig;
+  menu: MenuProps;
+}
+//#endregion
+export { DropdownProps$1 as DropdownProps };
+//# sourceMappingURL=type.d.mts.map