@jinmi/ui 0.0.0-stage → 6.0.2

package/es/DraggablePanel/components/DraggablePanelHeader.mjs

@@ -0,0 +1,47 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import ActionIcon from "../../base-ui/ActionIcon/ActionIcon.mjs";
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import useMergeState from "use-merge-value";
+import { PanelLeft, Pin, PinOff } from "lucide-react";
+//#region src/DraggablePanel/components/DraggablePanelHeader.tsx
+const DraggablePanelHeader = memo((props) => {
+	const { pin, setPin, className, setExpand, title, position = "left", ...rest } = props;
+	const [isPinned, setIsPinned] = useMergeState(false, {
+		onChange: setPin,
+		value: pin
+	});
+	const panelIcon = /* @__PURE__ */ jsx(ActionIcon, {
+		icon: PanelLeft,
+		size: "small",
+		onClick: () => setExpand?.(false)
+	});
+	const pinIcon = /* @__PURE__ */ jsx(ActionIcon, {
+		active: pin,
+		icon: pin ? Pin : PinOff,
+		size: "small",
+		onClick: () => setIsPinned(!isPinned)
+	});
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		horizontal: true,
+		align: "center",
+		className: cx(styles.header, className),
+		flex: "none",
+		gap: 8,
+		justify: "space-between",
+		...rest,
+		children: [
+			position === "left" ? panelIcon : pinIcon,
+			title,
+			position === "left" ? pinIcon : panelIcon
+		]
+	});
+});
+DraggablePanelHeader.displayName = "DraggablePanelHeader";
+//#endregion
+export { DraggablePanelHeader as default };
+
+//# sourceMappingURL=DraggablePanelHeader.mjs.map

package/es/DraggablePanel/components/DraggablePanelHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggablePanelHeader.mjs","names":["useControlledState","Flexbox"],"sources":["../../../src/DraggablePanel/components/DraggablePanelHeader.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { PanelLeft, Pin, PinOff } from 'lucide-react';\r\nimport { memo } from 'react';\r\nimport useControlledState from 'use-merge-value';\r\n\r\nimport ActionIcon from '@/base-ui/ActionIcon';\r\nimport { Flexbox } from '@/Flex';\r\nimport { type DivProps } from '@/types';\r\n\r\nimport { styles } from './style';\r\n\r\nexport interface DraggablePanelHeaderProps extends Omit<DivProps, 'children'> {\r\n  pin?: boolean;\r\n  position?: 'left' | 'right';\r\n  setExpand?: (expand: boolean) => void;\r\n  setPin?: (pin: boolean) => void;\r\n  title?: string;\r\n}\r\n\r\nconst DraggablePanelHeader = memo<DraggablePanelHeaderProps>((props) => {\r\n  const { pin, setPin, className, setExpand, title, position = 'left', ...rest } = props;\r\n\r\n  const [isPinned, setIsPinned] = useControlledState(false, {\r\n    onChange: setPin,\r\n    value: pin,\r\n  });\r\n\r\n  const panelIcon = (\r\n    <ActionIcon icon={PanelLeft} size={'small'} onClick={() => setExpand?.(false)} />\r\n  );\r\n  const pinIcon = (\r\n    <ActionIcon\r\n      active={pin}\r\n      icon={pin ? Pin : PinOff}\r\n      size={'small'}\r\n      onClick={() => setIsPinned(!isPinned)}\r\n    />\r\n  );\r\n  return (\r\n    <Flexbox\r\n      horizontal\r\n      align={'center'}\r\n      className={cx(styles.header, className)}\r\n      flex={'none'}\r\n      gap={8}\r\n      justify={'space-between'}\r\n      {...rest}\r\n    >\r\n      {position === 'left' ? panelIcon : pinIcon}\r\n      {title}\r\n      {position === 'left' ? pinIcon : panelIcon}\r\n    </Flexbox>\r\n  );\r\n});\r\n\r\nDraggablePanelHeader.displayName = 'DraggablePanelHeader';\r\n\r\nexport default DraggablePanelHeader;\r\n"],"mappings":";;;;;;;;;;AAqBA,MAAM,uBAAuB,MAAiC,UAAU;CACtE,MAAM,EAAE,KAAK,QAAQ,WAAW,WAAW,OAAO,WAAW,QAAQ,GAAG,SAAS;CAEjF,MAAM,CAAC,UAAU,eAAeA,cAAmB,OAAO;EACxD,UAAU;EACV,OAAO;CACT,CAAC;CAED,MAAM,YACJ,oBAAC,YAAD;EAAY,MAAM;EAAW,MAAM;EAAS,eAAe,YAAY,KAAK;CAAI,CAAA;CAElF,MAAM,UACJ,oBAAC,YAAD;EACE,QAAQ;EACR,MAAM,MAAM,MAAM;EAClB,MAAM;EACN,eAAe,YAAY,CAAC,QAAQ;CACrC,CAAA;CAEH,OACE,qBAACC,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,GAAG,OAAO,QAAQ,SAAS;EACtC,MAAM;EACN,KAAK;EACL,SAAS;EACT,GAAI;EAPN,UAAA;GASG,aAAa,SAAS,YAAY;GAClC;GACA,aAAa,SAAS,UAAU;EAC1B;;AAEb,CAAC;AAED,qBAAqB,cAAc"}

package/es/DraggablePanel/components/style.mjs

@@ -0,0 +1,35 @@
+import { createStaticStyles } from "antd-style";
+//#region src/DraggablePanel/components/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => {
+	return {
+		body: css`
+      overflow: hidden auto;
+      padding: 16px;
+    `,
+		container: css`
+      position: relative;
+      overflow: hidden;
+    `,
+		footer: css`
+      padding-block: 8px;
+      padding-inline: 16px;
+      border-block-start: 1px solid ${cssVar.colorBorderSecondary};
+    `,
+		handlerIcon: css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s ${cssVar.motionEaseOut};
+    `,
+		header: css`
+      padding-block: 8px;
+      padding-inline: 16px;
+      border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+      font-weight: 500;
+    `
+	};
+});
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/DraggablePanel/components/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/DraggablePanel/components/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => {\r\n  return {\r\n    body: css`\r\n      overflow: hidden auto;\r\n      padding: 16px;\r\n    `,\r\n    container: css`\r\n      position: relative;\r\n      overflow: hidden;\r\n    `,\r\n    footer: css`\r\n      padding-block: 8px;\r\n      padding-inline: 16px;\r\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\r\n    `,\r\n    handlerIcon: css`\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      transition: all 0.2s ${cssVar.motionEaseOut};\r\n    `,\r\n    header: css`\r\n      padding-block: 8px;\r\n      padding-inline: 16px;\r\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\r\n      font-weight: 500;\r\n    `,\r\n  };\r\n});\r\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,MAAM,GAAG;;;;EAIT,WAAW,GAAG;;;;EAId,QAAQ,GAAG;;;sCAGuB,OAAO,qBAAqB;;EAE9D,aAAa,GAAG;;;;6BAIS,OAAO,cAAc;;EAE9C,QAAQ,GAAG;;;oCAGqB,OAAO,qBAAqB;;;CAG9D;AACF,CAAC"}

package/es/DraggablePanel/index.d.mts

@@ -0,0 +1,18 @@
+import DraggablePanelBody, { DraggablePanelBodyProps } from "./components/DraggablePanelBody.mjs";
+import DraggablePanelContainer, { DraggablePanelContainerProps } from "./components/DraggablePanelContainer.mjs";
+import DraggablePanelFooter, { DraggablePanelFooterProps } from "./components/DraggablePanelFooter.mjs";
+import DraggablePanelHeader, { DraggablePanelHeaderProps } from "./components/DraggablePanelHeader.mjs";
+import { DraggablePanelProps } from "./type.mjs";
+import { ReactNode, RefAttributes } from "react";
+//#region src/DraggablePanel/index.d.ts
+interface IDraggablePanel {
+  (props: DraggablePanelProps & RefAttributes<HTMLDivElement>): ReactNode;
+  Body: typeof DraggablePanelBody;
+  Container: typeof DraggablePanelContainer;
+  Footer: typeof DraggablePanelFooter;
+  Header: typeof DraggablePanelHeader;
+}
+declare const DraggablePanel: IDraggablePanel;
+//#endregion
+export { DraggablePanelBody, type DraggablePanelBodyProps, DraggablePanelContainer, type DraggablePanelContainerProps, DraggablePanelFooter, type DraggablePanelFooterProps, DraggablePanelHeader, type DraggablePanelHeaderProps, type DraggablePanelProps, DraggablePanel as default };
+//# sourceMappingURL=index.d.mts.map

package/es/DraggablePanel/index.d.ts

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

package/es/DraggablePanel/index.js

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

package/es/DraggablePanel/index.mjs

@@ -0,0 +1,16 @@
+"use client";
+import DraggablePanelBody from "./components/DraggablePanelBody.mjs";
+import DraggablePanelContainer from "./components/DraggablePanelContainer.mjs";
+import DraggablePanelFooter from "./components/DraggablePanelFooter.mjs";
+import DraggablePanelHeader from "./components/DraggablePanelHeader.mjs";
+import DraggablePanel$1 from "./DraggablePanel.mjs";
+//#region src/DraggablePanel/index.ts
+const DraggablePanel = DraggablePanel$1;
+DraggablePanel.Body = DraggablePanelBody;
+DraggablePanel.Container = DraggablePanelContainer;
+DraggablePanel.Footer = DraggablePanelFooter;
+DraggablePanel.Header = DraggablePanelHeader;
+//#endregion
+export { DraggablePanelBody, DraggablePanelContainer, DraggablePanelFooter, DraggablePanelHeader, DraggablePanel as default };
+
+//# sourceMappingURL=index.mjs.map

package/es/DraggablePanel/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["DraggablePanelParent"],"sources":["../../src/DraggablePanel/index.ts"],"sourcesContent":["'use client';\r\n\r\nimport { type ReactNode, type RefAttributes } from 'react';\r\n\r\nimport DraggablePanelBody from './components/DraggablePanelBody';\r\nimport DraggablePanelContainer from './components/DraggablePanelContainer';\r\nimport DraggablePanelFooter from './components/DraggablePanelFooter';\r\nimport DraggablePanelHeader from './components/DraggablePanelHeader';\r\nimport DraggablePanelParent from './DraggablePanel';\r\nimport { type DraggablePanelProps } from './type';\r\n\r\ninterface IDraggablePanel {\r\n  (props: DraggablePanelProps & RefAttributes<HTMLDivElement>): ReactNode;\r\n  Body: typeof DraggablePanelBody;\r\n  Container: typeof DraggablePanelContainer;\r\n  Footer: typeof DraggablePanelFooter;\r\n  Header: typeof DraggablePanelHeader;\r\n}\r\n\r\nconst DraggablePanel = DraggablePanelParent as unknown as IDraggablePanel;\r\n\r\nDraggablePanel.Body = DraggablePanelBody;\r\nDraggablePanel.Container = DraggablePanelContainer;\r\nDraggablePanel.Footer = DraggablePanelFooter;\r\nDraggablePanel.Header = DraggablePanelHeader;\r\n\r\nexport default DraggablePanel;\r\nexport {\r\n  default as DraggablePanelBody,\r\n  type DraggablePanelBodyProps,\r\n} from './components/DraggablePanelBody';\r\nexport {\r\n  default as DraggablePanelContainer,\r\n  type DraggablePanelContainerProps,\r\n} from './components/DraggablePanelContainer';\r\nexport {\r\n  default as DraggablePanelFooter,\r\n  type DraggablePanelFooterProps,\r\n} from './components/DraggablePanelFooter';\r\nexport {\r\n  default as DraggablePanelHeader,\r\n  type DraggablePanelHeaderProps,\r\n} from './components/DraggablePanelHeader';\r\nexport type * from './type';\r\n"],"mappings":";;;;;;;AAmBA,MAAM,iBAAiBA;AAEvB,eAAe,OAAO;AACtB,eAAe,YAAY;AAC3B,eAAe,SAAS;AACxB,eAAe,SAAS"}

package/es/DraggablePanel/style.mjs

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

package/es/DraggablePanel/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/DraggablePanel/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\r\nimport { cva } from 'class-variance-authority';\r\n\r\n// Layout constants\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\nconst prefix = `${prefixCls}-draggable-panel`;\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => {\r\n  // Base styles - border styles split by showBorder\r\n  const borderStyles = {\r\n    borderBottom: css`\r\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\r\n    `,\r\n    borderBottomNone: css`\r\n      border-block-end-width: 0;\r\n    `,\r\n    borderLeft: css`\r\n      border-inline-start: 1px solid ${cssVar.colorBorderSecondary};\r\n    `,\r\n    borderLeftNone: css`\r\n      border-inline-start-width: 0;\r\n    `,\r\n    borderRight: css`\r\n      border-inline-end: 1px solid ${cssVar.colorBorderSecondary};\r\n    `,\r\n    borderRightNone: css`\r\n      border-inline-end-width: 0;\r\n    `,\r\n    borderTop: css`\r\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\r\n    `,\r\n    borderTopNone: css`\r\n      border-block-start-width: 0;\r\n    `,\r\n  };\r\n\r\n  // Position styles\r\n  const float = css`\r\n    position: absolute;\r\n    z-index: 200;\r\n  `;\r\n\r\n  const floatPositions = {\r\n    bottomFloat: cx(\r\n      float,\r\n      css`\r\n        inset-block-end: 0;\r\n        inset-inline: 0 0;\r\n        width: 100%;\r\n      `,\r\n    ),\r\n    leftFloat: cx(\r\n      float,\r\n      css`\r\n        inset-block: var(--draggable-panel-header-height, 0) 0;\r\n        inset-inline-start: 0;\r\n        height: calc(100% - var(--draggable-panel-header-height, 0px));\r\n      `,\r\n    ),\r\n    rightFloat: cx(\r\n      float,\r\n      css`\r\n        inset-block: var(--draggable-panel-header-height, 0) 0;\r\n        inset-inline-end: 0;\r\n        height: calc(100% - var(--draggable-panel-header-height, 0px));\r\n      `,\r\n    ),\r\n    topFloat: cx(\r\n      float,\r\n      css`\r\n        inset-block-start: var(--draggable-panel-header-height, 0);\r\n        inset-inline: 0 0;\r\n        width: 100%;\r\n      `,\r\n    ),\r\n  };\r\n\r\n  // Handle styles\r\n  const handleBaseStyle = css`\r\n    position: relative;\r\n\r\n    &::before {\r\n      content: '';\r\n      position: absolute;\r\n      transition: all 0.2s ${cssVar.motionEaseOut};\r\n    }\r\n  `;\r\n\r\n  const handleHighlightStyle = css`\r\n    &:hover {\r\n      &::before {\r\n        background: ${cssVar.colorPrimaryBorder};\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      &::before {\r\n        background: ${cssVar.colorPrimary} !important;\r\n      }\r\n    }\r\n  `;\r\n\r\n  const handleStyles = {\r\n    handleBottom: cx(\r\n      `${prefix}-bottom-handle`,\r\n      css`\r\n        &::before {\r\n          inset-block-end: 50%;\r\n          width: 100%;\r\n          height: 2px;\r\n        }\r\n      `,\r\n    ),\r\n    handleLeft: cx(\r\n      `${prefix}-left-handle`,\r\n      css`\r\n        &::before {\r\n          inset-inline-start: 50%;\r\n          width: 2px;\r\n          height: 100%;\r\n        }\r\n      `,\r\n    ),\r\n    handleRight: cx(\r\n      `${prefix}-right-handle`,\r\n      css`\r\n        &::before {\r\n          inset-inline-end: 50%;\r\n          width: 2px;\r\n          height: 100%;\r\n        }\r\n      `,\r\n    ),\r\n    handleRoot: handleBaseStyle,\r\n    handleTop: cx(\r\n      `${prefix}-top-handle`,\r\n      css`\r\n        &::before {\r\n          inset-block-start: 50%;\r\n          width: 100%;\r\n          height: 2px;\r\n        }\r\n      `,\r\n    ),\r\n  };\r\n\r\n  // Toggle styles - base class with variant for showHandleWideArea\r\n  const toggleRoot = cx(\r\n    `${prefix}-toggle`,\r\n    css`\r\n      position: absolute;\r\n      z-index: 50;\r\n      opacity: 0;\r\n      transition: all 0.2s ${cssVar.motionEaseOut};\r\n\r\n      &:hover,\r\n      &:active {\r\n        opacity: 1 !important;\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-panel-bg, ${cssVar.colorBgLayout});\r\n        backdrop-filter: blur(8px);\r\n\r\n        transition: all 0.2s ${cssVar.motionEaseOut};\r\n\r\n        &:hover {\r\n          color: ${cssVar.colorTextSecondary};\r\n        }\r\n\r\n        &:active {\r\n          color: ${cssVar.colorText};\r\n        }\r\n      }\r\n    `,\r\n  );\r\n\r\n  const toggleRootWithWideArea = css`\r\n    pointer-events: all;\r\n  `;\r\n\r\n  const toggleRootWithoutWideArea = css`\r\n    pointer-events: none;\r\n  `;\r\n\r\n  const toggleStyles = {\r\n    toggleBottom: cx(\r\n      `${prefix}-toggle-bottom`,\r\n      css`\r\n        inset-block-end: -${LAYOUT.offset}px;\r\n        width: 100%;\r\n        height: ${LAYOUT.toggleShort}px;\r\n\r\n        > div {\r\n          inset-inline-start: 50%;\r\n\r\n          width: ${LAYOUT.toggleLength}px;\r\n          height: ${LAYOUT.toggleShort}px;\r\n          margin-inline-start: -27px;\r\n          border-block-start-width: 0;\r\n          border-radius: 0 0 ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG};\r\n        }\r\n      `,\r\n    ),\r\n    toggleLeft: cx(\r\n      `${prefix}-toggle-left`,\r\n      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: -27px;\r\n          border-inline-end-width: 0;\r\n          border-radius: ${cssVar.borderRadiusLG} 0 0 ${cssVar.borderRadiusLG};\r\n        }\r\n      `,\r\n    ),\r\n    toggleRight: cx(\r\n      `${prefix}-toggle-right`,\r\n      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: -27px;\r\n          border-inline-start-width: 0;\r\n          border-radius: 0 ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG} 0;\r\n        }\r\n      `,\r\n    ),\r\n    toggleRoot,\r\n    toggleRootWithWideArea,\r\n    toggleRootWithoutWideArea,\r\n    toggleTop: cx(\r\n      `${prefix}-toggle-top`,\r\n      css`\r\n        inset-block-start: -${LAYOUT.offset}px;\r\n        width: 100%;\r\n        height: ${LAYOUT.toggleShort}px;\r\n\r\n        > div {\r\n          inset-inline-start: 50%;\r\n\r\n          width: ${LAYOUT.toggleLength}px;\r\n          height: ${LAYOUT.toggleShort}px;\r\n          margin-inline-start: -27px;\r\n          border-block-end-width: 0;\r\n          border-radius: ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG} 0 0;\r\n        }\r\n      `,\r\n    ),\r\n  };\r\n\r\n  // Additional component styles\r\n  const componentStyles = {\r\n    fixed: css`\r\n      position: relative;\r\n    `,\r\n    fullscreen: css`\r\n      position: absolute;\r\n      inset-block: var(--draggable-panel-header-height, 0) 0;\r\n      inset-inline: 0;\r\n\r\n      width: 100%;\r\n      height: calc(100% - var(--draggable-panel-header-height, 0px));\r\n\r\n      background: ${cssVar.colorBgContainer};\r\n    `,\r\n    handlerIcon: css`\r\n      transition: all 0.2s ${cssVar.motionEaseOut};\r\n    `,\r\n    panel: cx(\r\n      `${prefix}-fixed`,\r\n      css`\r\n        overflow: hidden;\r\n        background: var(--draggable-panel-bg, ${cssVar.colorBgLayout});\r\n        transition: all 0.2s ${cssVar.motionEaseOut};\r\n      `,\r\n    ),\r\n    root: cx(\r\n      prefix,\r\n      css`\r\n        flex-shrink: 0;\r\n\r\n        &:hover {\r\n          > .${prefix}-toggle {\r\n            opacity: 1;\r\n          }\r\n        }\r\n      `,\r\n    ),\r\n  };\r\n\r\n  return {\r\n    ...borderStyles,\r\n    ...floatPositions,\r\n    ...handleStyles,\r\n    handleHighlight: handleHighlightStyle,\r\n    ...toggleStyles,\r\n    ...componentStyles,\r\n  };\r\n});\r\n\r\nexport const handleVariants = cva(styles.handleRoot, {\r\n  variants: {\r\n    placement: {\r\n      bottom: styles.handleBottom,\r\n      left: styles.handleLeft,\r\n      right: styles.handleRight,\r\n      top: styles.handleTop,\r\n    },\r\n  },\r\n});\r\n\r\nexport const panelVariants = cva(styles.root, {\r\n  compoundVariants: [\r\n    {\r\n      class: styles.bottomFloat,\r\n      mode: 'float',\r\n      placement: 'bottom',\r\n    },\r\n    {\r\n      class: styles.topFloat,\r\n      mode: 'float',\r\n      placement: 'top',\r\n    },\r\n    {\r\n      class: styles.leftFloat,\r\n      mode: 'float',\r\n      placement: 'left',\r\n    },\r\n    {\r\n      class: styles.rightFloat,\r\n      mode: 'float',\r\n      placement: 'right',\r\n    },\r\n    // Border styles based on placement, isExpand, and showBorder\r\n    // Note: border is on the opposite side of placement\r\n    // placement 'top' -> borderBottom, placement 'right' -> borderLeft, etc.\r\n    {\r\n      class: styles.borderBottom,\r\n      isExpand: true,\r\n      placement: 'top',\r\n      showBorder: true,\r\n    },\r\n    {\r\n      class: styles.borderBottomNone,\r\n      isExpand: true,\r\n      placement: 'top',\r\n      showBorder: false,\r\n    },\r\n    {\r\n      class: styles.borderLeft,\r\n      isExpand: true,\r\n      placement: 'right',\r\n      showBorder: true,\r\n    },\r\n    {\r\n      class: styles.borderLeftNone,\r\n      isExpand: true,\r\n      placement: 'right',\r\n      showBorder: false,\r\n    },\r\n    {\r\n      class: styles.borderTop,\r\n      isExpand: true,\r\n      placement: 'bottom',\r\n      showBorder: true,\r\n    },\r\n    {\r\n      class: styles.borderTopNone,\r\n      isExpand: true,\r\n      placement: 'bottom',\r\n      showBorder: false,\r\n    },\r\n    {\r\n      class: styles.borderRight,\r\n      isExpand: true,\r\n      placement: 'left',\r\n      showBorder: true,\r\n    },\r\n    {\r\n      class: styles.borderRightNone,\r\n      isExpand: true,\r\n      placement: 'left',\r\n      showBorder: false,\r\n    },\r\n  ],\r\n  defaultVariants: {\r\n    isExpand: false,\r\n    mode: 'fixed',\r\n    placement: 'right',\r\n    showBorder: true,\r\n  },\r\n\r\n  variants: {\r\n    isExpand: {\r\n      false: null,\r\n      true: null,\r\n    },\r\n    mode: {\r\n      fixed: styles.fixed,\r\n      float: null,\r\n    },\r\n    placement: {\r\n      bottom: null,\r\n      left: null,\r\n      right: null,\r\n      top: null,\r\n    },\r\n    showBorder: {\r\n      false: null,\r\n      true: null,\r\n    },\r\n  },\r\n});\r\n\r\nexport const toggleVariants = cva(styles.toggleRoot, {\r\n  compoundVariants: [\r\n    {\r\n      class: styles.toggleRootWithWideArea,\r\n      showHandleWideArea: true,\r\n    },\r\n    {\r\n      class: styles.toggleRootWithoutWideArea,\r\n      showHandleWideArea: false,\r\n    },\r\n  ],\r\n  defaultVariants: {\r\n    showHandleWideArea: false,\r\n  },\r\n  variants: {\r\n    placement: {\r\n      bottom: styles.toggleTop,\r\n      left: styles.toggleRight,\r\n      right: styles.toggleLeft,\r\n      top: styles.toggleBottom,\r\n    },\r\n    showHandleWideArea: {\r\n      false: null,\r\n      true: null,\r\n    },\r\n  },\r\n});\r\n"],"mappings":"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OAAO;GACd,MAAM;GACN,WAAW;EACb;EAIA;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;EACd;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;EACd;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;EACd;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;EACd;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;EACd;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;EACd;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;EACd;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;EACd;CACF;CACA,iBAAiB;EACf,UAAU;EACV,MAAM;EACN,WAAW;EACX,YAAY;CACd;CAEA,UAAU;EACR,UAAU;GACR,OAAO;GACP,MAAM;EACR;EACA,MAAM;GACJ,OAAO,OAAO;GACd,OAAO;EACT;EACA,WAAW;GACT,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;EACP;EACA,YAAY;GACV,OAAO;GACP,MAAM;EACR;CACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,YAAY;CACnD,kBAAkB,CAChB;EACE,OAAO,OAAO;EACd,oBAAoB;CACtB,GACA;EACE,OAAO,OAAO;EACd,oBAAoB;CACtB,CACF;CACA,iBAAiB,EACf,oBAAoB,MACtB;CACA,UAAU;EACR,WAAW;GACT,QAAQ,OAAO;GACf,MAAM,OAAO;GACb,OAAO,OAAO;GACd,KAAK,OAAO;EACd;EACA,oBAAoB;GAClB,OAAO;GACP,MAAM;EACR;CACF;AACF,CAAC"}

package/es/DraggablePanel/type.d.mts

@@ -0,0 +1,60 @@
+import { DivProps } from "../types/index.mjs";
+import { CSSProperties } from "react";
+import { NumberSize, Size } from "re-resizable";
+import { Props } from "react-rnd";
+//#region src/DraggablePanel/type.d.ts
+type PlacementType = 'right' | 'left' | 'top' | 'bottom';
+interface DraggablePanelProps extends DivProps {
+  backgroundColor?: string;
+  classNames?: {
+    content?: string;
+    handle?: string;
+  };
+  /**
+   * Preview a collapsed panel while resizing at or below this size, then commit
+   * the collapsed state on pointer release. Dragging back above the threshold
+   * before release restores the panel.
+   * Applies to width for left/right placement and height for top/bottom placement.
+   * Omit to disable drag-to-collapse behavior.
+   */
+  collapseThreshold?: number;
+  defaultExpand?: boolean;
+  defaultSize?: Partial<Size>;
+  destroyOnClose?: boolean;
+  expand?: boolean;
+  expandable?: boolean;
+  fullscreen?: boolean;
+  headerHeight?: number;
+  maxHeight?: number;
+  maxWidth?: number;
+  minHeight?: number;
+  minWidth?: number;
+  mode?: 'fixed' | 'float';
+  onExpandChange?: (expand: boolean) => void;
+  onSizeChange?: (delta: NumberSize, size?: Size) => void;
+  onSizeDragging?: (delta: NumberSize, size?: Size) => void;
+  pin?: boolean;
+  placement: PlacementType;
+  resize?: Props['enableResizing'];
+  /**
+   * Whether to show border
+   * @default true
+   */
+  showBorder?: boolean;
+  showHandleHighlight?: boolean;
+  showHandleWhenCollapsed?: boolean;
+  showHandleWideArea?: boolean;
+  size?: Partial<Size>;
+  /**
+   * Use two-layer container layout to keep content layout stable when collapsed/expanded.
+   * @default true
+   */
+  stableLayout?: boolean;
+  styles?: {
+    content?: CSSProperties;
+    handle?: CSSProperties;
+  };
+}
+//#endregion
+export { DraggablePanelProps };
+//# sourceMappingURL=type.d.mts.map

package/es/DraggablePanel/utils.mjs

@@ -0,0 +1,20 @@
+//#region src/DraggablePanel/utils.ts
+const isBelowCollapseThreshold = ({ axis, collapseThreshold, size }) => {
+	if (collapseThreshold === void 0) return false;
+	const currentSize = size[axis];
+	if (currentSize === void 0) return false;
+	const numericSize = typeof currentSize === "number" ? currentSize : Number.parseFloat(currentSize);
+	return Number.isFinite(numericSize) && numericSize <= Math.max(collapseThreshold, 0);
+};
+const reversePlacement = (placement) => {
+	switch (placement) {
+		case "bottom": return "top";
+		case "top": return "bottom";
+		case "right": return "left";
+		case "left": return "right";
+	}
+};
+//#endregion
+export { isBelowCollapseThreshold, reversePlacement };
+
+//# sourceMappingURL=utils.mjs.map

package/es/DraggablePanel/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../src/DraggablePanel/utils.ts"],"sourcesContent":["import type { Size } from 're-resizable';\r\n\r\nimport type { DraggablePanelProps } from './type';\r\n\r\ninterface IsBelowCollapseThresholdOptions {\r\n  axis: 'height' | 'width';\r\n  collapseThreshold?: number;\r\n  size: Size;\r\n}\r\n\r\nexport const isBelowCollapseThreshold = ({\r\n  axis,\r\n  collapseThreshold,\r\n  size,\r\n}: IsBelowCollapseThresholdOptions): boolean => {\r\n  if (collapseThreshold === undefined) return false;\r\n\r\n  const currentSize = size[axis];\r\n  if (currentSize === undefined) return false;\r\n\r\n  const numericSize =\r\n    typeof currentSize === 'number' ? currentSize : Number.parseFloat(currentSize);\r\n\r\n  return Number.isFinite(numericSize) && numericSize <= Math.max(collapseThreshold, 0);\r\n};\r\n\r\nexport const reversePlacement = (placement: DraggablePanelProps['placement']) => {\r\n  switch (placement) {\r\n    case 'bottom': {\r\n      return 'top';\r\n    }\r\n    case 'top': {\r\n      return 'bottom';\r\n    }\r\n    case 'right': {\r\n      return 'left';\r\n    }\r\n    case 'left': {\r\n      return 'right';\r\n    }\r\n  }\r\n};\r\n"],"mappings":";AAUA,MAAa,4BAA4B,EACvC,MACA,mBACA,WAC8C;CAC9C,IAAI,sBAAsB,KAAA,GAAW,OAAO;CAE5C,MAAM,cAAc,KAAK;CACzB,IAAI,gBAAgB,KAAA,GAAW,OAAO;CAEtC,MAAM,cACJ,OAAO,gBAAgB,WAAW,cAAc,OAAO,WAAW,WAAW;CAE/E,OAAO,OAAO,SAAS,WAAW,KAAK,eAAe,KAAK,IAAI,mBAAmB,CAAC;AACrF;AAEA,MAAa,oBAAoB,cAAgD;CAC/E,QAAQ,WAAR;EACE,KAAK,UACH,OAAO;EAET,KAAK,OACH,OAAO;EAET,KAAK,SACH,OAAO;EAET,KAAK,QACH,OAAO;CAEX;AACF"}

package/es/DraggableSideNav/DraggableSideNav.d.mts

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