@lobehub/ui 4.3.2 → 4.3.3

package/es/DraggablePanel/style.mjs

@@ -1,4 +1,5 @@
-import { createStyles, css, cx } from "antd-style";
+import { createStaticStyles, cx } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/DraggablePanel/style.ts
 const LAYOUT = {
@@ -6,236 +7,251 @@ const LAYOUT = {
 	toggleLength: 54,
 	toggleShort: 16
 };
-const useStyles = createStyles(({ prefixCls, token }, { backgroundColor, headerHeight, showBorder, showHandleWideArea }) => {
-	const prefix = `${prefixCls}-draggable-panel`;
+const prefix = `ant-draggable-panel`;
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	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"};
-      `
+		borderBottom: css$1`
+      border-block-end: 1px solid ${cssVar$1.colorBorderSecondary};
+    `,
+		borderBottomNone: css$1`
+      border-block-end-width: 0;
+    `,
+		borderLeft: css$1`
+      border-inline-start: 1px solid ${cssVar$1.colorBorderSecondary};
+    `,
+		borderLeftNone: css$1`
+      border-inline-start-width: 0;
+    `,
+		borderRight: css$1`
+      border-inline-end: 1px solid ${cssVar$1.colorBorderSecondary};
+    `,
+		borderRightNone: css$1`
+      border-inline-end-width: 0;
+    `,
+		borderTop: css$1`
+      border-block-start: 1px solid ${cssVar$1.colorBorderSecondary};
+    `,
+		borderTopNone: css$1`
+      border-block-start-width: 0;
+    `
 	};
-	const float = css`
-      position: absolute;
-      z-index: 200;
-    `;
+	const float = css$1`
+    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%;
-        `)
+		bottomFloat: cx(float, css$1`
+        inset-block-end: 0;
+        inset-inline: 0 0;
+        width: 100%;
+      `),
+		leftFloat: cx(float, css$1`
+        inset-block: var(--draggable-panel-header-height, 0) 0;
+        inset-inline-start: 0;
+        height: calc(100% - var(--draggable-panel-header-height, 0px));
+      `),
+		rightFloat: cx(float, css$1`
+        inset-block: var(--draggable-panel-header-height, 0) 0;
+        inset-inline-end: 0;
+        height: calc(100% - var(--draggable-panel-header-height, 0px));
+      `),
+		topFloat: cx(float, css$1`
+        inset-block-start: var(--draggable-panel-header-height, 0);
+        inset-inline: 0 0;
+        width: 100%;
+      `)
 	};
-	const handleBaseStyle = css`
-      position: relative;
+	const handleBaseStyle = css$1`
+    position: relative;
 
+    &::before {
+      content: '';
+      position: absolute;
+      transition: all 0.2s ${cssVar$1.motionEaseOut};
+    }
+  `;
+	const handleHighlightStyle = css$1`
+    &:hover {
       &::before {
-        content: '';
-        position: absolute;
-        transition: all 0.2s ${token.motionEaseOut};
+        background: ${cssVar$1.colorPrimary};
+        box-shadow: 0 0 8px color-mix(in srgb, ${cssVar$1.colorPrimary} 25%, transparent);
       }
-    `;
-	const handleHighlightStyle = css`
-      &:hover {
+    }
+
+    &:active {
+      &::before {
+        background: ${cssVar$1.colorPrimary} !important;
+      }
+    }
+  `;
+	const handleStyles = {
+		handleBottom: cx(`${prefix}-bottom-handle`, css$1`
         &::before {
-          background: ${token.colorPrimary};
-          box-shadow: 0 0 8px ${token.colorPrimary}40;
+          inset-block-end: 50%;
+          width: 100%;
+          height: 2px;
         }
-      }
-
-      &:active {
+      `),
+		handleLeft: cx(`${prefix}-left-handle`, css$1`
         &::before {
-          background: ${token.colorPrimary} !important;
+          inset-inline-start: 50%;
+          width: 2px;
+          height: 100%;
         }
-      }
-    `;
-	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%;
-          }
-        `),
+      `),
+		handleRight: cx(`${prefix}-right-handle`, css$1`
+        &::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;
-          }
-        `)
+		handleTop: cx(`${prefix}-top-handle`, css$1`
+        &::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};
+	const toggleRoot = cx(`${prefix}-toggle`, css$1`
+      position: absolute;
+      z-index: 50;
+      opacity: 0;
+      transition: all 0.2s ${cssVar$1.motionEaseOut};
 
-        &:hover,
-        &:active {
-          opacity: 1 !important;
-        }
+      &:hover,
+      &:active {
+        opacity: 1 !important;
+      }
 
-        > div {
-          pointer-events: all;
-          cursor: pointer;
+      > div {
+        pointer-events: all;
+        cursor: pointer;
 
-          position: absolute;
+        position: absolute;
 
-          border: 1px solid ${token.colorBorder};
+        border: 1px solid ${cssVar$1.colorBorder};
 
-          color: ${token.colorTextTertiary};
+        color: ${cssVar$1.colorTextTertiary};
 
-          background: ${backgroundColor || token.colorBgLayout};
-          backdrop-filter: blur(8px);
+        background: var(--draggable-panel-bg, ${cssVar$1.colorBgLayout});
+        backdrop-filter: blur(8px);
 
-          transition: all 0.2s ${token.motionEaseOut};
+        transition: all 0.2s ${cssVar$1.motionEaseOut};
 
-          &:hover {
-            color: ${token.colorTextSecondary};
-          }
+        &:hover {
+          color: ${cssVar$1.colorTextSecondary};
+        }
 
-          &:active {
-            color: ${token.colorText};
-          }
+        &:active {
+          color: ${cssVar$1.colorText};
         }
-      `);
+      }
+    `);
+	const toggleRootWithWideArea = css$1`
+    pointer-events: all;
+  `;
+	const toggleRootWithoutWideArea = css$1`
+    pointer-events: none;
+  `;
 	const toggleStyles = {
-		toggleBottom: cx(`${prefix}-toggle-bottom`, css`
-          inset-block-end: -${LAYOUT.offset}px;
-          width: 100%;
+		toggleBottom: cx(`${prefix}-toggle-bottom`, css$1`
+        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 ${cssVar$1.borderRadiusLG} ${cssVar$1.borderRadiusLG};
+        }
+      `),
+		toggleLeft: cx(`${prefix}-toggle-left`, css$1`
+        inset-inline-start: -${LAYOUT.offset}px;
+        width: ${LAYOUT.toggleShort}px;
+        height: 100%;
 
-          > div {
-            inset-inline-start: 50%;
+        > div {
+          inset-block-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%;
+          height: ${LAYOUT.toggleLength}px;
+          margin-block-start: -27px;
+          border-inline-end-width: 0;
+          border-radius: ${cssVar$1.borderRadiusLG} 0 0 ${cssVar$1.borderRadiusLG};
+        }
+      `),
+		toggleRight: cx(`${prefix}-toggle-right`, css$1`
+        inset-inline-end: -${LAYOUT.offset}px;
+        width: ${LAYOUT.toggleShort}px;
+        height: 100%;
 
-          > div {
-            inset-block-start: 50%;
+        > 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%;
+          height: ${LAYOUT.toggleLength}px;
+          margin-block-start: -27px;
+          border-inline-start-width: 0;
+          border-radius: 0 ${cssVar$1.borderRadiusLG} ${cssVar$1.borderRadiusLG} 0;
+        }
+      `),
+		toggleRoot,
+		toggleRootWithWideArea,
+		toggleRootWithoutWideArea,
+		toggleTop: cx(`${prefix}-toggle-top`, css$1`
+        inset-block-start: -${LAYOUT.offset}px;
+        width: 100%;
+        height: ${LAYOUT.toggleShort}px;
 
-          > div {
-            inset-block-start: 50%;
+        > div {
+          inset-inline-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%;
+          width: ${LAYOUT.toggleLength}px;
           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;
-          }
-        `)
+          margin-inline-start: -27px;
+          border-block-end-width: 0;
+          border-radius: ${cssVar$1.borderRadiusLG} ${cssVar$1.borderRadiusLG} 0 0;
+        }
+      `)
 	};
 	const componentStyles = {
-		fixed: css`
-        position: relative;
-      `,
-		fullscreen: css`
-        position: absolute;
-        inset-block: ${headerHeight}px 0;
-        inset-inline: 0;
+		fixed: css$1`
+      position: relative;
+    `,
+		fullscreen: css$1`
+      position: absolute;
+      inset-block: var(--draggable-panel-header-height, 0) 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;
-            }
+      width: 100%;
+      height: calc(100% - var(--draggable-panel-header-height, 0px));
+
+      background: ${cssVar$1.colorBgContainer};
+    `,
+		handlerIcon: css$1`
+      transition: all 0.2s ${cssVar$1.motionEaseOut};
+    `,
+		panel: cx(`${prefix}-fixed`, css$1`
+        overflow: hidden;
+        background: var(--draggable-panel-bg, ${cssVar$1.colorBgLayout});
+        transition: all 0.2s ${cssVar$1.motionEaseOut};
+      `),
+		root: cx(prefix, css$1`
+        flex-shrink: 0;
+
+        &:hover {
+          > .${prefix}-toggle {
+            opacity: 1;
           }
-        `)
+        }
+      `)
 	};
 	return {
 		...borderStyles,
@@ -246,7 +262,133 @@ const useStyles = createStyles(({ prefixCls, token }, { backgroundColor, headerH
 		...componentStyles
 	};
 });
+const handleVariants = cva(styles.handleRoot, { variants: { placement: {
+	bottom: styles.handleBottom,
+	left: styles.handleLeft,
+	right: styles.handleRight,
+	top: styles.handleTop
+} } });
+const panelVariants = cva(styles.root, {
+	compoundVariants: [
+		{
+			class: styles.bottomFloat,
+			mode: "float",
+			placement: "bottom"
+		},
+		{
+			class: styles.topFloat,
+			mode: "float",
+			placement: "top"
+		},
+		{
+			class: styles.leftFloat,
+			mode: "float",
+			placement: "left"
+		},
+		{
+			class: styles.rightFloat,
+			mode: "float",
+			placement: "right"
+		},
+		{
+			class: styles.borderBottom,
+			isExpand: true,
+			placement: "top",
+			showBorder: true
+		},
+		{
+			class: styles.borderBottomNone,
+			isExpand: true,
+			placement: "top",
+			showBorder: false
+		},
+		{
+			class: styles.borderLeft,
+			isExpand: true,
+			placement: "right",
+			showBorder: true
+		},
+		{
+			class: styles.borderLeftNone,
+			isExpand: true,
+			placement: "right",
+			showBorder: false
+		},
+		{
+			class: styles.borderTop,
+			isExpand: true,
+			placement: "bottom",
+			showBorder: true
+		},
+		{
+			class: styles.borderTopNone,
+			isExpand: true,
+			placement: "bottom",
+			showBorder: false
+		},
+		{
+			class: styles.borderRight,
+			isExpand: true,
+			placement: "left",
+			showBorder: true
+		},
+		{
+			class: styles.borderRightNone,
+			isExpand: true,
+			placement: "left",
+			showBorder: false
+		}
+	],
+	defaultVariants: {
+		isExpand: false,
+		mode: "fixed",
+		placement: "right",
+		showBorder: true
+	},
+	variants: {
+		isExpand: {
+			false: null,
+			true: null
+		},
+		mode: {
+			fixed: styles.fixed,
+			float: null
+		},
+		placement: {
+			bottom: null,
+			left: null,
+			right: null,
+			top: null
+		},
+		showBorder: {
+			false: null,
+			true: null
+		}
+	}
+});
+const toggleVariants = cva(styles.toggleRoot, {
+	compoundVariants: [{
+		class: styles.toggleRootWithWideArea,
+		showHandleWideArea: true
+	}, {
+		class: styles.toggleRootWithoutWideArea,
+		showHandleWideArea: false
+	}],
+	defaultVariants: { showHandleWideArea: false },
+	variants: {
+		placement: {
+			bottom: styles.toggleTop,
+			left: styles.toggleRight,
+			right: styles.toggleLeft,
+			top: styles.toggleBottom
+		},
+		showHandleWideArea: {
+			false: null,
+			true: null
+		}
+	}
+});
 
 //#endregion
-export { useStyles };
+export { handleVariants, panelVariants, styles, toggleVariants };
 //# sourceMappingURL=style.mjs.map

package/es/DraggablePanel/style.mjs.map

@@ -1 +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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"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/DraggablePanel/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\n// Layout constants\nconst LAYOUT = {\n  offset: 16,\n  toggleLength: 54,\n  toggleShort: 16,\n};\n\nconst prefixCls = 'ant';\n\nconst prefix = `${prefixCls}-draggable-panel`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  // Base styles - border styles split by showBorder\n  const borderStyles = {\n    borderBottom: css`\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n    `,\n    borderBottomNone: css`\n      border-block-end-width: 0;\n    `,\n    borderLeft: css`\n      border-inline-start: 1px solid ${cssVar.colorBorderSecondary};\n    `,\n    borderLeftNone: css`\n      border-inline-start-width: 0;\n    `,\n    borderRight: css`\n      border-inline-end: 1px solid ${cssVar.colorBorderSecondary};\n    `,\n    borderRightNone: css`\n      border-inline-end-width: 0;\n    `,\n    borderTop: css`\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n    `,\n    borderTopNone: css`\n      border-block-start-width: 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: var(--draggable-panel-header-height, 0) 0;\n        inset-inline-start: 0;\n        height: calc(100% - var(--draggable-panel-header-height, 0px));\n      `,\n    ),\n    rightFloat: cx(\n      float,\n      css`\n        inset-block: var(--draggable-panel-header-height, 0) 0;\n        inset-inline-end: 0;\n        height: calc(100% - var(--draggable-panel-header-height, 0px));\n      `,\n    ),\n    topFloat: cx(\n      float,\n      css`\n        inset-block-start: var(--draggable-panel-header-height, 0);\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 ${cssVar.motionEaseOut};\n    }\n  `;\n\n  const handleHighlightStyle = css`\n    &:hover {\n      &::before {\n        background: ${cssVar.colorPrimary};\n        box-shadow: 0 0 8px color-mix(in srgb, ${cssVar.colorPrimary} 25%, transparent);\n      }\n    }\n\n    &:active {\n      &::before {\n        background: ${cssVar.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 - base class with variant for showHandleWideArea\n  const toggleRoot = cx(\n    `${prefix}-toggle`,\n    css`\n      position: absolute;\n      z-index: 50;\n      opacity: 0;\n      transition: all 0.2s ${cssVar.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 ${cssVar.colorBorder};\n\n        color: ${cssVar.colorTextTertiary};\n\n        background: var(--draggable-panel-bg, ${cssVar.colorBgLayout});\n        backdrop-filter: blur(8px);\n\n        transition: all 0.2s ${cssVar.motionEaseOut};\n\n        &:hover {\n          color: ${cssVar.colorTextSecondary};\n        }\n\n        &:active {\n          color: ${cssVar.colorText};\n        }\n      }\n    `,\n  );\n\n  const toggleRootWithWideArea = css`\n    pointer-events: all;\n  `;\n\n  const toggleRootWithoutWideArea = css`\n    pointer-events: none;\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 ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG};\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: ${cssVar.borderRadiusLG} 0 0 ${cssVar.borderRadiusLG};\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 ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG} 0;\n        }\n      `,\n    ),\n    toggleRoot,\n    toggleRootWithWideArea,\n    toggleRootWithoutWideArea,\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: ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG} 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: var(--draggable-panel-header-height, 0) 0;\n      inset-inline: 0;\n\n      width: 100%;\n      height: calc(100% - var(--draggable-panel-header-height, 0px));\n\n      background: ${cssVar.colorBgContainer};\n    `,\n    handlerIcon: css`\n      transition: all 0.2s ${cssVar.motionEaseOut};\n    `,\n    panel: cx(\n      `${prefix}-fixed`,\n      css`\n        overflow: hidden;\n        background: var(--draggable-panel-bg, ${cssVar.colorBgLayout});\n        transition: all 0.2s ${cssVar.motionEaseOut};\n      `,\n    ),\n    root: cx(\n      prefix,\n      css`\n        flex-shrink: 0;\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\nexport const handleVariants = cva(styles.handleRoot, {\n  variants: {\n    placement: {\n      bottom: styles.handleBottom,\n      left: styles.handleLeft,\n      right: styles.handleRight,\n      top: styles.handleTop,\n    },\n  },\n});\n\nexport const panelVariants = cva(styles.root, {\n  compoundVariants: [\n    {\n      class: styles.bottomFloat,\n      mode: 'float',\n      placement: 'bottom',\n    },\n    {\n      class: styles.topFloat,\n      mode: 'float',\n      placement: 'top',\n    },\n    {\n      class: styles.leftFloat,\n      mode: 'float',\n      placement: 'left',\n    },\n    {\n      class: styles.rightFloat,\n      mode: 'float',\n      placement: 'right',\n    },\n    // Border styles based on placement, isExpand, and showBorder\n    // Note: border is on the opposite side of placement\n    // placement 'top' -> borderBottom, placement 'right' -> borderLeft, etc.\n    {\n      class: styles.borderBottom,\n      isExpand: true,\n      placement: 'top',\n      showBorder: true,\n    },\n    {\n      class: styles.borderBottomNone,\n      isExpand: true,\n      placement: 'top',\n      showBorder: false,\n    },\n    {\n      class: styles.borderLeft,\n      isExpand: true,\n      placement: 'right',\n      showBorder: true,\n    },\n    {\n      class: styles.borderLeftNone,\n      isExpand: true,\n      placement: 'right',\n      showBorder: false,\n    },\n    {\n      class: styles.borderTop,\n      isExpand: true,\n      placement: 'bottom',\n      showBorder: true,\n    },\n    {\n      class: styles.borderTopNone,\n      isExpand: true,\n      placement: 'bottom',\n      showBorder: false,\n    },\n    {\n      class: styles.borderRight,\n      isExpand: true,\n      placement: 'left',\n      showBorder: true,\n    },\n    {\n      class: styles.borderRightNone,\n      isExpand: true,\n      placement: 'left',\n      showBorder: false,\n    },\n  ],\n  defaultVariants: {\n    isExpand: false,\n    mode: 'fixed',\n    placement: 'right',\n    showBorder: true,\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    isExpand: {\n      false: null,\n      true: null,\n    },\n    mode: {\n      fixed: styles.fixed,\n      float: null,\n    },\n    placement: {\n      bottom: null,\n      left: null,\n      right: null,\n      top: null,\n    },\n    showBorder: {\n      false: null,\n      true: null,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n\nexport const toggleVariants = cva(styles.toggleRoot, {\n  compoundVariants: [\n    {\n      class: styles.toggleRootWithWideArea,\n      showHandleWideArea: true,\n    },\n    {\n      class: styles.toggleRootWithoutWideArea,\n      showHandleWideArea: false,\n    },\n  ],\n  defaultVariants: {\n    showHandleWideArea: false,\n  },\n  variants: {\n    placement: {\n      bottom: styles.toggleTop,\n      left: styles.toggleRight,\n      right: styles.toggleLeft,\n      top: styles.toggleBottom,\n    },\n    showHandleWideArea: {\n      false: null,\n      true: null,\n    },\n  },\n});\n"],"mappings":"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W;GACZ;EACD;GACE,OAAO,OAAO;GACd,MAAM;GACN,WAAW;GACZ;EAID;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACF;CACD,iBAAiB;EACf,UAAU;EACV,MAAM;EACN,WAAW;EACX,YAAY;EACb;CAED,UAAU;EACR,UAAU;GACR,OAAO;GACP,MAAM;GACP;EACD,MAAM;GACJ,OAAO,OAAO;GACd,OAAO;GACR;EACD,WAAW;GACT,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;GACN;EACD,YAAY;GACV,OAAO;GACP,MAAM;GACP;EACF;CAEF,CAAC;AAEF,MAAa,iBAAiB,IAAI,OAAO,YAAY;CACnD,kBAAkB,CAChB;EACE,OAAO,OAAO;EACd,oBAAoB;EACrB,EACD;EACE,OAAO,OAAO;EACd,oBAAoB;EACrB,CACF;CACD,iBAAiB,EACf,oBAAoB,OACrB;CACD,UAAU;EACR,WAAW;GACT,QAAQ,OAAO;GACf,MAAM,OAAO;GACb,OAAO,OAAO;GACd,KAAK,OAAO;GACb;EACD,oBAAoB;GAClB,OAAO;GACP,MAAM;GACP;EACF;CACF,CAAC"}

package/es/DraggableSideNav/DraggableSideNav.d.mts

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