@jinmi/ui 0.0.0-stage → 6.0.1

package/es/DraggableSideNav/style.mjs

@@ -0,0 +1,264 @@
+import { createStaticStyles } from "antd-style";
+//#region src/DraggableSideNav/style.ts
+const LAYOUT = {
+	offset: 16,
+	toggleLength: 54,
+	toggleShort: 16
+};
+const prefixCls = "ant";
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	body: css`
+    /* 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: ${cssVar.colorBorderSecondary};
+
+      &:hover {
+        background: ${cssVar.colorBorder};
+      }
+    }
+  `,
+	container: css`
+    /* Width transition controlled by inline style */
+
+    /* Ensure smooth animations */
+    will-change: width;
+
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+  `,
+	contentContainer: css`
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+    border-inline-end: 1px solid ${cssVar.colorBorderSecondary};
+
+    background: var(--draggable-side-nav-bg, ${cssVar.colorBgLayout});
+  `,
+	contentContainerNoBorder: css`
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+    border-inline-end: 0 solid ${cssVar.colorBorderSecondary};
+
+    background: var(--draggable-side-nav-bg, ${cssVar.colorBgLayout});
+  `,
+	footer: css`
+    flex-shrink: 0;
+  `,
+	handlerIcon: css`
+    /* Icon transitions are now handled by motion */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `,
+	header: css`
+    flex-shrink: 0;
+  `,
+	menuOverride: css`
+    .${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`
+    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`
+    &:hover {
+      &::after {
+        width: 3px;
+        background: ${cssVar.colorPrimary};
+        box-shadow: 0 0 8px color-mix(in srgb, ${cssVar.colorPrimary} 25%, transparent);
+      }
+    }
+
+    &:active {
+      &::after {
+        background: ${cssVar.colorPrimaryActive};
+      }
+    }
+  `,
+	resizeHandleLeft: css`
+    inset-inline-end: -4px;
+  `,
+	resizeHandleRight: css`
+    inset-inline-start: -4px;
+  `,
+	toggleLeft: 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: -${LAYOUT.toggleLength / 2}px;
+      margin-inline-start: -1px;
+      border-inline-start-width: 0;
+      border-radius: 0 ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG} 0;
+    }
+  `,
+	toggleRight: 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: -${LAYOUT.toggleLength / 2}px;
+      margin-inline-end: -1px;
+      border-inline-end-width: 0;
+      border-radius: ${cssVar.borderRadiusLG} 0 0 ${cssVar.borderRadiusLG}; /* 右侧面板，handle 在左边，左侧圆角 */
+    }
+  `,
+	toggleRoot: css`
+    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 ${cssVar.colorBorder};
+
+      color: ${cssVar.colorTextTertiary};
+
+      background: var(--draggable-side-nav-bg, ${cssVar.colorBgLayout});
+      backdrop-filter: blur(8px);
+
+      /* Enhanced transitions with backdrop blur */
+      transition:
+        color 0.2s ${cssVar.motionEaseOut},
+        transform 0.2s ${cssVar.motionEaseOut},
+        box-shadow 0.2s ${cssVar.motionEaseOut};
+
+      &:hover {
+        color: ${cssVar.colorTextSecondary};
+      }
+
+      &:active {
+        transform: scale(0.95);
+        color: ${cssVar.colorText};
+      }
+    }
+  `
+}));
+//#endregion
+export { styles };
+
+//# 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 { createStaticStyles } from 'antd-style';\r\n\r\n// Layout constants (aligned with DraggablePanel)\r\nconst LAYOUT = {\r\n  offset: 16,\r\n  toggleLength: 54,\r\n  toggleShort: 16,\r\n};\r\n\r\nconst prefixCls = 'ant';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\r\n  body: css`\r\n    /* Smooth scroll behavior */\r\n    scroll-behavior: smooth;\r\n    overflow: hidden auto;\r\n    flex: 1;\r\n\r\n    /* Better scrollbar styling */\r\n    &::-webkit-scrollbar {\r\n      width: 6px;\r\n    }\r\n\r\n    &::-webkit-scrollbar-track {\r\n      background: transparent;\r\n    }\r\n\r\n    &::-webkit-scrollbar-thumb {\r\n      border-radius: 3px;\r\n      background: ${cssVar.colorBorderSecondary};\r\n\r\n      &:hover {\r\n        background: ${cssVar.colorBorder};\r\n      }\r\n    }\r\n  `,\r\n  container: css`\r\n    /* Width transition controlled by inline style */\r\n\r\n    /* Ensure smooth animations */\r\n    will-change: width;\r\n\r\n    position: relative;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    height: 100%;\r\n  `,\r\n  contentContainer: css`\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    height: 100%;\r\n    border-inline-end: 1px solid ${cssVar.colorBorderSecondary};\r\n\r\n    background: var(--draggable-side-nav-bg, ${cssVar.colorBgLayout});\r\n  `,\r\n  contentContainerNoBorder: css`\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    height: 100%;\r\n    border-inline-end: 0 solid ${cssVar.colorBorderSecondary};\r\n\r\n    background: var(--draggable-side-nav-bg, ${cssVar.colorBgLayout});\r\n  `,\r\n  footer: css`\r\n    flex-shrink: 0;\r\n  `,\r\n  handlerIcon: css`\r\n    /* Icon transitions are now handled by motion */\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  `,\r\n  header: css`\r\n    flex-shrink: 0;\r\n  `,\r\n  menuOverride: css`\r\n    .${prefixCls}-menu {\r\n      .${prefixCls}-menu-item {\r\n        display: flex;\r\n        gap: 8px;\r\n        align-items: center;\r\n        justify-content: center;\r\n\r\n        height: unset;\r\n        min-height: 36px;\r\n        padding-block: 4px;\r\n        padding-inline: 8px !important;\r\n      }\r\n\r\n      .${prefixCls}-menu-item-group-title {\r\n        overflow: hidden;\r\n        padding-inline: 8px;\r\n        text-overflow: ellipsis;\r\n        white-space: nowrap;\r\n      }\r\n\r\n      .${prefixCls}-menu-item-icon {\r\n        position: absolute;\r\n        inset-inline-start: 0;\r\n\r\n        display: flex !important;\r\n        flex: none;\r\n        align-items: center;\r\n        justify-content: center;\r\n\r\n        width: 36px;\r\n        height: 36px;\r\n      }\r\n\r\n      .${prefixCls}-menu-title-content {\r\n        overflow: hidden;\r\n        flex: 1;\r\n\r\n        margin: 0 !important;\r\n        padding-inline-start: 36px;\r\n\r\n        line-height: 1.5;\r\n      }\r\n\r\n      &.${prefixCls}-menu-inline-collapsed {\r\n        .ant-menu-title-content {\r\n          display: none;\r\n          width: 0;\r\n          opacity: 0;\r\n        }\r\n\r\n        .${prefixCls}-menu-item {\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n\r\n          width: 36px !important;\r\n          height: 36px !important;\r\n        }\r\n      }\r\n    }\r\n  `,\r\n  resizeHandle: css`\r\n    cursor: col-resize;\r\n\r\n    position: absolute;\r\n    inset-block: 0 0;\r\n\r\n    width: 8px;\r\n\r\n    transition: background-color 0.2s ease;\r\n\r\n    &::after {\r\n      content: '';\r\n\r\n      position: absolute;\r\n      inset-block: 0;\r\n      inset-inline-start: 50%;\r\n      transform: translateX(-50%);\r\n\r\n      width: 2px;\r\n\r\n      background: transparent;\r\n\r\n      transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);\r\n    }\r\n  `,\r\n  resizeHandleHighlight: css`\r\n    &:hover {\r\n      &::after {\r\n        width: 3px;\r\n        background: ${cssVar.colorPrimary};\r\n        box-shadow: 0 0 8px color-mix(in srgb, ${cssVar.colorPrimary} 25%, transparent);\r\n      }\r\n    }\r\n\r\n    &:active {\r\n      &::after {\r\n        background: ${cssVar.colorPrimaryActive};\r\n      }\r\n    }\r\n  `,\r\n  resizeHandleLeft: css`\r\n    inset-inline-end: -4px;\r\n  `,\r\n  resizeHandleRight: css`\r\n    inset-inline-start: -4px;\r\n  `,\r\n  toggleLeft: css`\r\n    inset-inline-end: -${LAYOUT.offset}px;\r\n    width: ${LAYOUT.toggleShort}px;\r\n    height: 100%;\r\n\r\n    > div {\r\n      inset-block-start: 50%;\r\n\r\n      width: ${LAYOUT.toggleShort}px;\r\n      height: ${LAYOUT.toggleLength}px;\r\n      margin-block-start: -${LAYOUT.toggleLength / 2}px;\r\n      margin-inline-start: -1px;\r\n      border-inline-start-width: 0;\r\n      border-radius: 0 ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG} 0;\r\n    }\r\n  `,\r\n  toggleRight: css`\r\n    inset-inline-start: -${LAYOUT.offset}px;\r\n    width: ${LAYOUT.toggleShort}px;\r\n    height: 100%;\r\n\r\n    > div {\r\n      inset-block-start: 50%;\r\n\r\n      width: ${LAYOUT.toggleShort}px;\r\n      height: ${LAYOUT.toggleLength}px;\r\n      margin-block-start: -${LAYOUT.toggleLength / 2}px;\r\n      margin-inline-end: -1px;\r\n      border-inline-end-width: 0;\r\n      border-radius: ${cssVar.borderRadiusLG} 0 0 ${cssVar.borderRadiusLG}; /* 右侧面板，handle 在左边，左侧圆角 */\r\n    }\r\n  `,\r\n  toggleRoot: css`\r\n    pointer-events: none;\r\n    position: absolute;\r\n    z-index: 50;\r\n\r\n    /* Smooth transitions for all states */\r\n    transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);\r\n\r\n    &:has(> div) {\r\n      pointer-events: all;\r\n    }\r\n\r\n    > div {\r\n      pointer-events: all;\r\n      cursor: pointer;\r\n\r\n      position: absolute;\r\n\r\n      border: 1px solid ${cssVar.colorBorder};\r\n\r\n      color: ${cssVar.colorTextTertiary};\r\n\r\n      background: var(--draggable-side-nav-bg, ${cssVar.colorBgLayout});\r\n      backdrop-filter: blur(8px);\r\n\r\n      /* Enhanced transitions with backdrop blur */\r\n      transition:\r\n        color 0.2s ${cssVar.motionEaseOut},\r\n        transform 0.2s ${cssVar.motionEaseOut},\r\n        box-shadow 0.2s ${cssVar.motionEaseOut};\r\n\r\n      &:hover {\r\n        color: ${cssVar.colorTextSecondary};\r\n      }\r\n\r\n      &:active {\r\n        transform: scale(0.95);\r\n        color: ${cssVar.colorText};\r\n      }\r\n    }\r\n  `,\r\n}));\r\n"],"mappings":";;AAGA,MAAM,SAAS;CACb,QAAQ;CACR,cAAc;CACd,aAAa;AACf;AAEA,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;;;;;;;oBAiBS,OAAO,qBAAqB;;;sBAG1B,OAAO,YAAY;;;;CAIvC,WAAW,GAAG;;;;;;;;;;;;;CAad,kBAAkB,GAAG;;;;;;mCAMY,OAAO,qBAAqB;;+CAEhB,OAAO,cAAc;;CAElE,0BAA0B,GAAG;;;;;;iCAME,OAAO,qBAAqB;;+CAEd,OAAO,cAAc;;CAElE,QAAQ,GAAG;;;CAGX,aAAa,GAAG;;;;;;CAMhB,QAAQ,GAAG;;;CAGX,cAAc,GAAG;OACZ,UAAU;SACR,UAAU;;;;;;;;;;;;SAYV,UAAU;;;;;;;SAOV,UAAU;;;;;;;;;;;;;SAaV,UAAU;;;;;;;;;;UAUT,UAAU;;;;;;;WAOT,UAAU;;;;;;;;;;;CAWnB,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;CAyBjB,uBAAuB,GAAG;;;;sBAIN,OAAO,aAAa;iDACO,OAAO,aAAa;;;;;;sBAM/C,OAAO,mBAAmB;;;;CAI9C,kBAAkB,GAAG;;;CAGrB,mBAAmB,GAAG;;;CAGtB,YAAY,GAAG;yBACQ,OAAO,OAAO;aAC1B,OAAO,YAAY;;;;;;eAMjB,OAAO,YAAY;gBAClB,OAAO,aAAa;6BACP,OAAO,eAAe,EAAE;;;yBAG5B,OAAO,eAAe,GAAG,OAAO,eAAe;;;CAGtE,aAAa,GAAG;2BACS,OAAO,OAAO;aAC5B,OAAO,YAAY;;;;;;eAMjB,OAAO,YAAY;gBAClB,OAAO,aAAa;6BACP,OAAO,eAAe,EAAE;;;uBAG9B,OAAO,eAAe,OAAO,OAAO,eAAe;;;CAGxE,YAAY,GAAG;;;;;;;;;;;;;;;;;;0BAkBS,OAAO,YAAY;;eAE9B,OAAO,kBAAkB;;iDAES,OAAO,cAAc;;;;;qBAKjD,OAAO,cAAc;yBACjB,OAAO,cAAc;0BACpB,OAAO,cAAc;;;iBAG9B,OAAO,mBAAmB;;;;;iBAK1B,OAAO,UAAU;;;;AAIlC,EAAE"}

package/es/DraggableSideNav/type.d.mts

@@ -0,0 +1,123 @@
+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,6 @@
+import { DrawerProps } from "./type.mjs";
+//#region src/Drawer/Drawer.d.ts
+declare const Drawer: import("react").NamedExoticComponent<DrawerProps>;
+//#endregion
+export { Drawer as default };
+//# sourceMappingURL=Drawer.d.mts.map

package/es/Drawer/Drawer.mjs

@@ -0,0 +1,141 @@
+"use client";
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
+import { memo, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cssVar } from "antd-style";
+import { XIcon } from "lucide-react";
+import { Drawer } from "antd";
+//#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 headerBorder = useMemo(() => {
+		if (height === "100%" || width === "100%" || height === "100vh" || width === "100vw") return {};
+		switch (placement) {
+			case "top": return { borderBottom: `1px solid ${cssVar.colorBorder}` };
+			case "bottom": return { borderTop: `1px solid ${cssVar.colorBorder}` };
+			case "left": return { borderRight: `1px solid ${cssVar.colorBorder}` };
+			case "right": return { borderLeft: `1px solid ${cssVar.colorBorder}` };
+			default: return {};
+		}
+	}, [
+		placement,
+		height,
+		width
+	]);
+	const extraNode = /* @__PURE__ */ jsxs(FlexBasic_default, {
+		horizontal: true,
+		align: "center",
+		className: classNames?.extra,
+		gap: 4,
+		justify: "flex-end",
+		style: {
+			position: "absolute",
+			right: 4,
+			top: 4,
+			...styles?.extra
+		},
+		children: [extra, closeIcon || /* @__PURE__ */ jsx(ActionIcon, {
+			icon: XIcon,
+			onClick: onClose,
+			...closeIconProps
+		})]
+	});
+	const sidebarContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FlexBasic_default, {
+		className: classNames?.sidebar,
+		paddingBlock: 12,
+		paddingInline: 16,
+		width: sidebarWidth,
+		style: {
+			background: cssVar.colorBgLayout,
+			borderRight: `1px solid ${cssVar.colorBorderSecondary}`,
+			height: "100vh",
+			overflowX: "hidden",
+			overflowY: "auto",
+			position: "sticky",
+			top: 0,
+			...styles?.sidebar
+		},
+		children: sidebar
+	}), /* @__PURE__ */ jsx(FlexBasic_default, {
+		className: classNames?.sidebarContent,
+		flex: 1,
+		paddingBlock: 12,
+		paddingInline: 16,
+		style: {
+			background: cssVar.colorBgContainer,
+			overflowX: "hidden",
+			overflowY: "auto",
+			...styles?.sidebarContent
+		},
+		children
+	})] });
+	return /* @__PURE__ */ jsx(Drawer, {
+		classNames,
+		closable: false,
+		extra: noHeader ? void 0 : extraNode,
+		height,
+		keyboard: true,
+		panelRef: ref,
+		placement,
+		width,
+		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, ${cssVar.colorBgLayout} 49.9%, ${cssVar.colorBgContainer} 50%)` : cssVar.colorBgContainer,
+				...styles?.section
+			},
+			wrapper: {
+				background: cssVar.colorBgContainer,
+				...headerBorder,
+				...styles?.wrapper
+			}
+		},
+		title: /* @__PURE__ */ jsx(FlexBasic_default, {
+			horizontal: true,
+			align: "center",
+			className: classNames?.title,
+			justify: "flex-start",
+			paddingBlock: 8,
+			paddingInline: 16,
+			style: {
+				justifySelf: "center",
+				maxWidth: containerMaxWidth,
+				width: "100%",
+				...styles?.title
+			},
+			children: title
+		}),
+		onClose,
+		...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";
+//#endregion
+export { Drawer$1 as default };
+
+//# sourceMappingURL=Drawer.mjs.map

package/es/Drawer/Drawer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.mjs","names":["Drawer","Flexbox","AntdDrawer"],"sources":["../../src/Drawer/Drawer.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Drawer as AntdDrawer } from 'antd';\r\nimport { cssVar } from 'antd-style';\r\nimport { XIcon } from 'lucide-react';\r\nimport { type CSSProperties, memo, useMemo } from 'react';\r\n\r\nimport ActionIcon from '@/base-ui/ActionIcon';\r\nimport { Flexbox } from '@/Flex';\r\n\r\nimport type { DrawerProps } from './type';\r\n\r\nconst Drawer = memo<DrawerProps>(\r\n  ({\r\n    onClose,\r\n    containerMaxWidth = 1024,\r\n    classNames,\r\n    title,\r\n    placement,\r\n    styles,\r\n    children,\r\n    height,\r\n    width,\r\n    extra,\r\n    closeIconProps,\r\n    noHeader,\r\n    sidebarWidth = 280,\r\n    sidebar,\r\n    closeIcon,\r\n    ref,\r\n    ...rest\r\n  }) => {\r\n    const headerBorder: CSSProperties = useMemo(() => {\r\n      if (height === '100%' || width === '100%' || height === '100vh' || width === '100vw')\r\n        return {};\r\n\r\n      switch (placement) {\r\n        case 'top': {\r\n          return {\r\n            borderBottom: `1px solid ${cssVar.colorBorder}`,\r\n          };\r\n        }\r\n        case 'bottom': {\r\n          return {\r\n            borderTop: `1px solid ${cssVar.colorBorder}`,\r\n          };\r\n        }\r\n        case 'left': {\r\n          return {\r\n            borderRight: `1px solid ${cssVar.colorBorder}`,\r\n          };\r\n        }\r\n        case 'right': {\r\n          return {\r\n            borderLeft: `1px solid ${cssVar.colorBorder}`,\r\n          };\r\n        }\r\n        default: {\r\n          return {};\r\n        }\r\n      }\r\n    }, [placement, height, width]);\r\n\r\n    const extraNode = (\r\n      <Flexbox\r\n        horizontal\r\n        align={'center'}\r\n        className={classNames?.extra}\r\n        gap={4}\r\n        justify={'flex-end'}\r\n        style={{\r\n          position: 'absolute',\r\n          right: 4,\r\n          top: 4,\r\n          ...styles?.extra,\r\n        }}\r\n      >\r\n        {extra}\r\n        {closeIcon || <ActionIcon icon={XIcon} onClick={onClose} {...closeIconProps} />}\r\n      </Flexbox>\r\n    );\r\n\r\n    const sidebarContent = (\r\n      <>\r\n        <Flexbox\r\n          className={classNames?.sidebar}\r\n          paddingBlock={12}\r\n          paddingInline={16}\r\n          width={sidebarWidth}\r\n          style={{\r\n            background: cssVar.colorBgLayout,\r\n            borderRight: `1px solid ${cssVar.colorBorderSecondary}`,\r\n            height: '100vh',\r\n            overflowX: 'hidden',\r\n            overflowY: 'auto',\r\n            position: 'sticky',\r\n            top: 0,\r\n            ...styles?.sidebar,\r\n          }}\r\n        >\r\n          {sidebar}\r\n        </Flexbox>\r\n        <Flexbox\r\n          className={classNames?.sidebarContent}\r\n          flex={1}\r\n          paddingBlock={12}\r\n          paddingInline={16}\r\n          style={{\r\n            background: cssVar.colorBgContainer,\r\n            overflowX: 'hidden',\r\n            overflowY: 'auto',\r\n            ...styles?.sidebarContent,\r\n          }}\r\n        >\r\n          {children}\r\n        </Flexbox>\r\n      </>\r\n    );\r\n\r\n    return (\r\n      <AntdDrawer\r\n        classNames={classNames}\r\n        closable={false}\r\n        extra={noHeader ? undefined : extraNode}\r\n        height={height}\r\n        keyboard={true}\r\n        panelRef={ref}\r\n        placement={placement}\r\n        width={width}\r\n        styles={\r\n          typeof styles === 'function'\r\n            ? styles\r\n            : {\r\n                ...styles,\r\n                body: {\r\n                  background: 'transparent',\r\n                  paddingBlock: sidebar ? 0 : 12,\r\n                  paddingInline: sidebar ? 0 : 16,\r\n                  ...styles?.body,\r\n                },\r\n                header: {\r\n                  background: 'transparent',\r\n                  display: noHeader ? 'none' : undefined,\r\n                  padding: 4,\r\n                  ...styles?.header,\r\n                },\r\n                section: {\r\n                  background: sidebar\r\n                    ? `linear-gradient(to right, ${cssVar.colorBgLayout} 49.9%, ${cssVar.colorBgContainer} 50%)`\r\n                    : cssVar.colorBgContainer,\r\n                  ...styles?.section,\r\n                },\r\n                wrapper: {\r\n                  background: cssVar.colorBgContainer,\r\n                  ...headerBorder,\r\n                  ...styles?.wrapper,\r\n                },\r\n              }\r\n        }\r\n        title={\r\n          <Flexbox\r\n            horizontal\r\n            align={'center'}\r\n            className={classNames?.title}\r\n            justify={'flex-start'}\r\n            paddingBlock={8}\r\n            paddingInline={16}\r\n            style={{\r\n              justifySelf: 'center',\r\n              maxWidth: containerMaxWidth,\r\n              width: '100%',\r\n              ...styles?.title,\r\n            }}\r\n          >\r\n            {title}\r\n          </Flexbox>\r\n        }\r\n        onClose={onClose}\r\n        {...rest}\r\n      >\r\n        <Flexbox\r\n          className={classNames?.bodyContent}\r\n          horizontal={!!sidebar}\r\n          style={{\r\n            justifySelf: 'center',\r\n            maxWidth: containerMaxWidth,\r\n            minHeight: '100%',\r\n            overflow: sidebar ? 'visible' : undefined,\r\n            width: '100%',\r\n            ...styles?.bodyContent,\r\n          }}\r\n        >\r\n          {noHeader && extraNode}\r\n          {sidebar ? sidebarContent : children}\r\n        </Flexbox>\r\n      </AntdDrawer>\r\n    );\r\n  },\r\n);\r\n\r\nDrawer.displayName = 'Drawer';\r\n\r\nexport default Drawer;\r\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,eAA8B,cAAc;EAChD,IAAI,WAAW,UAAU,UAAU,UAAU,WAAW,WAAW,UAAU,SAC3E,OAAO,CAAC;EAEV,QAAQ,WAAR;GACE,KAAK,OACH,OAAO,EACL,cAAc,aAAa,OAAO,cACpC;GAEF,KAAK,UACH,OAAO,EACL,WAAW,aAAa,OAAO,cACjC;GAEF,KAAK,QACH,OAAO,EACL,aAAa,aAAa,OAAO,cACnC;GAEF,KAAK,SACH,OAAO,EACL,YAAY,aAAa,OAAO,cAClC;GAEF,SACE,OAAO,CAAC;EAEZ;CACF,GAAG;EAAC;EAAW;EAAQ;CAAK,CAAC;CAE7B,MAAM,YACJ,qBAACC,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,YAAY;EACvB,KAAK;EACL,SAAS;EACT,OAAO;GACL,UAAU;GACV,OAAO;GACP,KAAK;GACL,GAAG,QAAQ;EACb;EAXF,UAAA,CAaG,OACA,aAAa,oBAAC,YAAD;GAAY,MAAM;GAAO,SAAS;GAAS,GAAI;EAAiB,CAAA,CACvE;;CAGX,MAAM,iBACJ,qBAAA,YAAA,EAAA,UAAA,CACE,oBAACA,mBAAD;EACE,WAAW,YAAY;EACvB,cAAc;EACd,eAAe;EACf,OAAO;EACP,OAAO;GACL,YAAY,OAAO;GACnB,aAAa,aAAa,OAAO;GACjC,QAAQ;GACR,WAAW;GACX,WAAW;GACX,UAAU;GACV,KAAK;GACL,GAAG,QAAQ;EACb;EAEC,UAAA;CACM,CAAA,GACT,oBAACA,mBAAD;EACE,WAAW,YAAY;EACvB,MAAM;EACN,cAAc;EACd,eAAe;EACf,OAAO;GACL,YAAY,OAAO;GACnB,WAAW;GACX,WAAW;GACX,GAAG,QAAQ;EACb;EAEC;CACM,CAAA,CACT,EAAA,CAAA;CAGJ,OACE,oBAACC,QAAD;EACc;EACZ,UAAU;EACV,OAAO,WAAW,KAAA,IAAY;EACtB;EACR,UAAU;EACV,UAAU;EACC;EACJ;EACP,QACE,OAAO,WAAW,aACd,SACA;GACE,GAAG;GACH,MAAM;IACJ,YAAY;IACZ,cAAc,UAAU,IAAI;IAC5B,eAAe,UAAU,IAAI;IAC7B,GAAG,QAAQ;GACb;GACA,QAAQ;IACN,YAAY;IACZ,SAAS,WAAW,SAAS,KAAA;IAC7B,SAAS;IACT,GAAG,QAAQ;GACb;GACA,SAAS;IACP,YAAY,UACR,6BAA6B,OAAO,cAAc,UAAU,OAAO,iBAAiB,SACpF,OAAO;IACX,GAAG,QAAQ;GACb;GACA,SAAS;IACP,YAAY,OAAO;IACnB,GAAG;IACH,GAAG,QAAQ;GACb;EACF;EAEN,OACE,oBAACD,mBAAD;GACE,YAAA;GACA,OAAO;GACP,WAAW,YAAY;GACvB,SAAS;GACT,cAAc;GACd,eAAe;GACf,OAAO;IACL,aAAa;IACb,UAAU;IACV,OAAO;IACP,GAAG,QAAQ;GACb;GAEC,UAAA;EACM,CAAA;EAEF;EACT,GAAI;EAEJ,UAAA,qBAACA,mBAAD;GACE,WAAW,YAAY;GACvB,YAAY,CAAC,CAAC;GACd,OAAO;IACL,aAAa;IACb,UAAU;IACV,WAAW;IACX,UAAU,UAAU,YAAY,KAAA;IAChC,OAAO;IACP,GAAG,QAAQ;GACb;GAVF,UAAA,CAYG,YAAY,WACZ,UAAU,iBAAiB,QACrB;;CACC,CAAA;AAEhB,CACF;AAEA,SAAO,cAAc"}

package/es/Drawer/index.d.mts

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

package/es/Drawer/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/Drawer/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/Drawer/index.mjs

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

package/es/Drawer/type.d.mts

@@ -0,0 +1,30 @@
+import { ActionIconProps } from "../base-ui/ActionIcon/type.mjs";
+import "../base-ui/ActionIcon/index.mjs";
+import { CSSProperties, ReactNode, Ref } from "react";
+import { DrawerProps } from "antd";
+//#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,12 @@
+import { DropdownProps } from "./type.mjs";
+//#region src/Dropdown/Dropdown.d.ts
+/**
+ * @deprecated
+ * Use `DropdownMenu` or `ContextMenu` instead
+ * @see https://ui.lobehub.com/components/context-menu
+ * @see https://ui.lobehub.com/components/dropdown-menu
+ */
+declare const Dropdown: import("react").NamedExoticComponent<DropdownProps>;
+//#endregion
+export { Dropdown as default };
+//# sourceMappingURL=Dropdown.d.mts.map

package/es/Dropdown/Dropdown.mjs

@@ -0,0 +1,36 @@
+"use client";
+import { IconProvider } from "../Icon/components/IconProvider.mjs";
+import { mapItems } from "../Menu/utils.mjs";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Dropdown } from "antd";
+//#region src/Dropdown/Dropdown.tsx
+/**
+* @deprecated
+* Use `DropdownMenu` or `ContextMenu` instead
+* @see https://ui.lobehub.com/components/context-menu
+* @see https://ui.lobehub.com/components/dropdown-menu
+*/
+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";
+//#endregion
+export { Dropdown$1 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';\r\n\r\nimport { Dropdown as AntdDropdown } from 'antd';\r\nimport { memo, useMemo } from 'react';\r\n\r\nimport { IconProvider } from '@/Icon';\r\nimport { mapItems } from '@/Menu';\r\n\r\nimport type { DropdownProps } from './type';\r\n\r\n/**\r\n * @deprecated\r\n * Use `DropdownMenu` or `ContextMenu` instead\r\n * @see https://ui.lobehub.com/components/context-menu\r\n * @see https://ui.lobehub.com/components/dropdown-menu\r\n */\r\nconst Dropdown = memo<DropdownProps>(({ children, iconProps, menu, ...rest }) => {\r\n  const { items, ...menuProps } = menu;\r\n\r\n  const antdItems = useMemo(() => items.map((item) => mapItems(item)), [items]);\r\n\r\n  return (\r\n    <IconProvider\r\n      config={{\r\n        size: 'small',\r\n        ...iconProps,\r\n      }}\r\n    >\r\n      <AntdDropdown\r\n        menu={{\r\n          ...menuProps,\r\n          items: antdItems,\r\n        }}\r\n        {...rest}\r\n      >\r\n        {children}\r\n      </AntdDropdown>\r\n    </IconProvider>\r\n  );\r\n});\r\n\r\nDropdown.displayName = 'Dropdown';\r\n\r\nexport default Dropdown;\r\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAMA,aAAW,MAAqB,EAAE,UAAU,WAAW,MAAM,GAAG,WAAW;CAC/E,MAAM,EAAE,OAAO,GAAG,cAAc;CAEhC,MAAM,YAAY,cAAc,MAAM,KAAK,SAAS,SAAS,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;CAE5E,OACE,oBAAC,cAAD;EACE,QAAQ;GACN,MAAM;GACN,GAAG;EACL;EAEA,UAAA,oBAACC,UAAD;GACE,MAAM;IACJ,GAAG;IACH,OAAO;GACT;GACA,GAAI;GAEH;EACW,CAAA;CACF,CAAA;AAElB,CAAC;AAED,WAAS,cAAc"}

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 { type MenuItemType as DropdownMenuItemType, type DropdownProps, Dropdown as default };

package/es/Dropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/Dropdown/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';