@drivenets/design-system 0.5.0 → 0.6.0

package/dist/components/ds-loader/ds-loader.d.cts

@@ -1,5 +1,5 @@
 import { DsLoaderProps } from "./ds-loader.types.cjs";
-import * as react_jsx_runtime42 from "react/jsx-runtime";
+import * as react_jsx_runtime34 from "react/jsx-runtime";
 
 //#region src/components/ds-loader/ds-loader.d.ts
 /**
@@ -9,7 +9,7 @@ declare const DsLoader: ({
   variant,
   className,
   ...props
-}: DsLoaderProps) => react_jsx_runtime42.JSX.Element;
+}: DsLoaderProps) => react_jsx_runtime34.JSX.Element;
 //#endregion
 export { DsLoader };
 //# sourceMappingURL=ds-loader.d.cts.map

package/dist/components/ds-loader/ds-loader.d.ts

@@ -1,5 +1,5 @@
 import { DsLoaderProps } from "./ds-loader.types.js";
-import * as react_jsx_runtime22 from "react/jsx-runtime";
+import * as react_jsx_runtime23 from "react/jsx-runtime";
 
 //#region src/components/ds-loader/ds-loader.d.ts
 /**
@@ -9,7 +9,7 @@ declare const DsLoader: ({
   variant,
   className,
   ...props
-}: DsLoaderProps) => react_jsx_runtime22.JSX.Element;
+}: DsLoaderProps) => react_jsx_runtime23.JSX.Element;
 //#endregion
 export { DsLoader };
 //# sourceMappingURL=ds-loader.d.ts.map

package/dist/components/ds-modal/ds-modal.d.cts

@@ -1,5 +1,5 @@
 import { DsModalProps } from "./ds-modal.types.cjs";
-import * as react_jsx_runtime29 from "react/jsx-runtime";
+import * as react_jsx_runtime36 from "react/jsx-runtime";
 import { CSSProperties, ReactNode } from "react";
 
 //#region src/components/ds-modal/ds-modal.d.ts
@@ -21,7 +21,7 @@ declare const DsModal: {
     closeOnInteractOutside,
     children,
     onOpenChange
-  }: DsModalProps): react_jsx_runtime29.JSX.Element;
+  }: DsModalProps): react_jsx_runtime36.JSX.Element;
   Header: ({
     style,
     className,
@@ -30,7 +30,7 @@ declare const DsModal: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime29.JSX.Element;
+  }) => react_jsx_runtime36.JSX.Element;
   Title: ({
     style,
     className,
@@ -39,14 +39,14 @@ declare const DsModal: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime29.JSX.Element;
+  }) => react_jsx_runtime36.JSX.Element;
   CloseTrigger: ({
     style,
     className
   }: {
     style?: CSSProperties;
     className?: string;
-  }) => react_jsx_runtime29.JSX.Element;
+  }) => react_jsx_runtime36.JSX.Element;
   Body: ({
     style,
     className,
@@ -55,7 +55,7 @@ declare const DsModal: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime29.JSX.Element;
+  }) => react_jsx_runtime36.JSX.Element;
   Footer: ({
     style,
     className,
@@ -64,7 +64,7 @@ declare const DsModal: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime29.JSX.Element;
+  }) => react_jsx_runtime36.JSX.Element;
   Actions: ({
     style,
     className,
@@ -73,7 +73,7 @@ declare const DsModal: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime29.JSX.Element;
+  }) => react_jsx_runtime36.JSX.Element;
 };
 //#endregion
 export { DsModal };

package/dist/components/ds-modal/ds-modal.d.ts

@@ -1,5 +1,5 @@
 import { DsModalProps } from "./ds-modal.types.js";
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 import { CSSProperties, ReactNode } from "react";
 
 //#region src/components/ds-modal/ds-modal.d.ts
@@ -21,7 +21,7 @@ declare const DsModal: {
     closeOnInteractOutside,
     children,
     onOpenChange
-  }: DsModalProps): react_jsx_runtime15.JSX.Element;
+  }: DsModalProps): react_jsx_runtime16.JSX.Element;
   Header: ({
     style,
     className,
@@ -30,7 +30,7 @@ declare const DsModal: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime15.JSX.Element;
+  }) => react_jsx_runtime16.JSX.Element;
   Title: ({
     style,
     className,
@@ -39,14 +39,14 @@ declare const DsModal: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime15.JSX.Element;
+  }) => react_jsx_runtime16.JSX.Element;
   CloseTrigger: ({
     style,
     className
   }: {
     style?: CSSProperties;
     className?: string;
-  }) => react_jsx_runtime15.JSX.Element;
+  }) => react_jsx_runtime16.JSX.Element;
   Body: ({
     style,
     className,
@@ -55,7 +55,7 @@ declare const DsModal: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime15.JSX.Element;
+  }) => react_jsx_runtime16.JSX.Element;
   Footer: ({
     style,
     className,
@@ -64,7 +64,7 @@ declare const DsModal: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime15.JSX.Element;
+  }) => react_jsx_runtime16.JSX.Element;
   Actions: ({
     style,
     className,
@@ -73,7 +73,7 @@ declare const DsModal: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime15.JSX.Element;
+  }) => react_jsx_runtime16.JSX.Element;
 };
 //#endregion
 export { DsModal };

package/dist/components/ds-panel/ds-panel.cjs

@@ -6,12 +6,84 @@ let react_compiler_runtime = require("react/compiler-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 let _radix_ui_react_collapsible = require("@radix-ui/react-collapsible");
 _radix_ui_react_collapsible = require_rolldown_runtime.__toESM(_radix_ui_react_collapsible);
 
 //#region src/components/ds-panel/ds-panel.tsx
+function useDraggable(enabled) {
+	const $ = (0, react_compiler_runtime.c)(4);
+	const rootRef = (0, react.useRef)(null);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			x: 0,
+			y: 0
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const positionRef = (0, react.useRef)(t0);
+	const dragRef = (0, react.useRef)(null);
+	let t1;
+	let t2;
+	if ($[1] !== enabled) {
+		t1 = () => {
+			const root = rootRef.current;
+			if (!root) return;
+			if (!enabled) {
+				positionRef.current = {
+					x: 0,
+					y: 0
+				};
+				root.style.transform = "";
+				return;
+			}
+			const handleMouseDown = (e) => {
+				if (!e.target.closest("[data-drag-handle]")) return;
+				e.preventDefault();
+				dragRef.current = {
+					startX: e.clientX,
+					startY: e.clientY,
+					originX: positionRef.current.x,
+					originY: positionRef.current.y
+				};
+				root.classList.add(require_ds_panel_module.default.dragging);
+			};
+			const handleMouseMove = (e_0) => {
+				if (!dragRef.current) return;
+				positionRef.current = {
+					x: dragRef.current.originX + (e_0.clientX - dragRef.current.startX),
+					y: dragRef.current.originY + (e_0.clientY - dragRef.current.startY)
+				};
+				root.style.transform = `translate(${String(positionRef.current.x)}px, ${String(positionRef.current.y)}px)`;
+			};
+			const handleMouseUp = () => {
+				if (!dragRef.current) return;
+				dragRef.current = null;
+				root.classList.remove(require_ds_panel_module.default.dragging);
+			};
+			root.addEventListener("mousedown", handleMouseDown);
+			document.addEventListener("mousemove", handleMouseMove);
+			document.addEventListener("mouseup", handleMouseUp);
+			return () => {
+				root.removeEventListener("mousedown", handleMouseDown);
+				document.removeEventListener("mousemove", handleMouseMove);
+				document.removeEventListener("mouseup", handleMouseUp);
+			};
+		};
+		t2 = [enabled];
+		$[1] = enabled;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	(0, react.useEffect)(t1, t2);
+	return rootRef;
+}
 function DsPanel(t0) {
-	const $ = (0, react_compiler_runtime.c)(23);
+	const $ = (0, react_compiler_runtime.c)(25);
 	let children;
 	let className;
 	let onOpenChange;
@@ -20,8 +92,9 @@ function DsPanel(t0) {
 	let slotProps;
 	let t1;
 	let t2;
+	let t3;
 	if ($[0] !== t0) {
-		({open, onOpenChange, children, className, slotProps, variant: t1, disablePadding: t2, ...props} = t0);
+		({open, onOpenChange, children, className, slotProps, variant: t1, draggable: t2, disablePadding: t3, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
@@ -31,6 +104,7 @@ function DsPanel(t0) {
 		$[6] = slotProps;
 		$[7] = t1;
 		$[8] = t2;
+		$[9] = t3;
 	} else {
 		children = $[1];
 		className = $[2];
@@ -40,49 +114,54 @@ function DsPanel(t0) {
 		slotProps = $[6];
 		t1 = $[7];
 		t2 = $[8];
+		t3 = $[9];
 	}
 	const variant = t1 === void 0 ? "docked" : t1;
-	const disablePadding = t2 === void 0 ? false : t2;
-	const t3 = variant === "docked";
-	const t4 = variant === "floating";
-	let t5;
-	if ($[9] !== className || $[10] !== disablePadding || $[11] !== t3 || $[12] !== t4) {
-		t5 = (0, classnames.default)(require_ds_panel_module.default.root, className, {
-			[require_ds_panel_module.default.variantDocked]: t3,
-			[require_ds_panel_module.default.variantFloating]: t4,
+	const draggable = t2 === void 0 ? false : t2;
+	const disablePadding = t3 === void 0 ? false : t3;
+	const rootRef = useDraggable(variant === "floating" && draggable);
+	const t4 = variant === "docked";
+	const t5 = variant === "floating";
+	let t6;
+	if ($[10] !== className || $[11] !== disablePadding || $[12] !== t4 || $[13] !== t5) {
+		t6 = (0, classnames.default)(require_ds_panel_module.default.root, className, {
+			[require_ds_panel_module.default.variantDocked]: t4,
+			[require_ds_panel_module.default.variantFloating]: t5,
 			[require_ds_panel_module.default.disablePadding]: disablePadding
 		});
-		$[9] = className;
-		$[10] = disablePadding;
-		$[11] = t3;
+		$[10] = className;
+		$[11] = disablePadding;
 		$[12] = t4;
 		$[13] = t5;
-	} else t5 = $[13];
-	const t6 = slotProps?.collapseButton;
-	let t7;
-	if ($[14] !== t6) {
-		t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsPanelCollapseButton, { ...t6 });
 		$[14] = t6;
-		$[15] = t7;
-	} else t7 = $[15];
+	} else t6 = $[14];
+	const t7 = slotProps?.collapseButton;
 	let t8;
-	if ($[16] !== children || $[17] !== onOpenChange || $[18] !== open || $[19] !== props || $[20] !== t5 || $[21] !== t7) {
-		t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_collapsible.Root, {
+	if ($[15] !== t7) {
+		t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsPanelCollapseButton, { ...t7 });
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== children || $[18] !== onOpenChange || $[19] !== open || $[20] !== props || $[21] !== rootRef || $[22] !== t6 || $[23] !== t8) {
+		t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_collapsible.Root, {
+			ref: rootRef,
 			open,
 			onOpenChange,
-			className: t5,
+			className: t6,
 			...props,
-			children: [t7, children]
+			children: [t8, children]
 		});
-		$[16] = children;
-		$[17] = onOpenChange;
-		$[18] = open;
-		$[19] = props;
-		$[20] = t5;
-		$[21] = t7;
-		$[22] = t8;
-	} else t8 = $[22];
-	return t8;
+		$[17] = children;
+		$[18] = onOpenChange;
+		$[19] = open;
+		$[20] = props;
+		$[21] = rootRef;
+		$[22] = t6;
+		$[23] = t8;
+		$[24] = t9;
+	} else t9 = $[24];
+	return t9;
 }
 function DsPanelCollapseButton(t0) {
 	const $ = (0, react_compiler_runtime.c)(9);

package/dist/components/ds-panel/ds-panel.d.cts

@@ -1,5 +1,5 @@
 import { DsPanelProps } from "./ds-panel.types.cjs";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime35 from "react/jsx-runtime";
 
 //#region src/components/ds-panel/ds-panel.d.ts
 declare function DsPanel({
@@ -9,9 +9,10 @@ declare function DsPanel({
   className,
   slotProps,
   variant,
+  draggable,
   disablePadding,
   ...props
-}: DsPanelProps): react_jsx_runtime5.JSX.Element;
+}: DsPanelProps): react_jsx_runtime35.JSX.Element;
 //#endregion
 export { DsPanel };
 //# sourceMappingURL=ds-panel.d.cts.map

package/dist/components/ds-panel/ds-panel.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-panel.d.cts","names":[],"sources":["../../../src/components/ds-panel/ds-panel.tsx"],"sourcesContent":[],"mappings":";;;;iBAMgB,OAAA;;;;;;;;;GASb,eAAY,kBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"ds-panel.d.cts","names":[],"sources":["../../../src/components/ds-panel/ds-panel.tsx"],"sourcesContent":[],"mappings":";;;;iBAsFgB,OAAA;;;;;;;;;;GAUb,eAAY,mBAAA,CAAA,GAAA,CAAA"}

package/dist/components/ds-panel/ds-panel.d.ts

@@ -1,5 +1,5 @@
 import { DsPanelProps } from "./ds-panel.types.js";
-import * as react_jsx_runtime48 from "react/jsx-runtime";
+import * as react_jsx_runtime39 from "react/jsx-runtime";
 
 //#region src/components/ds-panel/ds-panel.d.ts
 declare function DsPanel({
@@ -9,9 +9,10 @@ declare function DsPanel({
   className,
   slotProps,
   variant,
+  draggable,
   disablePadding,
   ...props
-}: DsPanelProps): react_jsx_runtime48.JSX.Element;
+}: DsPanelProps): react_jsx_runtime39.JSX.Element;
 //#endregion
 export { DsPanel };
 //# sourceMappingURL=ds-panel.d.ts.map

package/dist/components/ds-panel/ds-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-panel.d.ts","names":[],"sources":["../../../src/components/ds-panel/ds-panel.tsx"],"sourcesContent":[],"mappings":";;;;iBAMgB,OAAA;;;;;;;;;GASb,eAAY,mBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"ds-panel.d.ts","names":[],"sources":["../../../src/components/ds-panel/ds-panel.tsx"],"sourcesContent":[],"mappings":";;;;iBAsFgB,OAAA;;;;;;;;;;GAUb,eAAY,mBAAA,CAAA,GAAA,CAAA"}

package/dist/components/ds-panel/ds-panel.js

@@ -4,11 +4,83 @@ import ds_panel_module_default from "./ds-panel.module.js";
 import { c } from "react/compiler-runtime";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 
 //#region src/components/ds-panel/ds-panel.tsx
+function useDraggable(enabled) {
+	const $ = c(4);
+	const rootRef = useRef(null);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			x: 0,
+			y: 0
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const positionRef = useRef(t0);
+	const dragRef = useRef(null);
+	let t1;
+	let t2;
+	if ($[1] !== enabled) {
+		t1 = () => {
+			const root = rootRef.current;
+			if (!root) return;
+			if (!enabled) {
+				positionRef.current = {
+					x: 0,
+					y: 0
+				};
+				root.style.transform = "";
+				return;
+			}
+			const handleMouseDown = (e) => {
+				if (!e.target.closest("[data-drag-handle]")) return;
+				e.preventDefault();
+				dragRef.current = {
+					startX: e.clientX,
+					startY: e.clientY,
+					originX: positionRef.current.x,
+					originY: positionRef.current.y
+				};
+				root.classList.add(ds_panel_module_default.dragging);
+			};
+			const handleMouseMove = (e_0) => {
+				if (!dragRef.current) return;
+				positionRef.current = {
+					x: dragRef.current.originX + (e_0.clientX - dragRef.current.startX),
+					y: dragRef.current.originY + (e_0.clientY - dragRef.current.startY)
+				};
+				root.style.transform = `translate(${String(positionRef.current.x)}px, ${String(positionRef.current.y)}px)`;
+			};
+			const handleMouseUp = () => {
+				if (!dragRef.current) return;
+				dragRef.current = null;
+				root.classList.remove(ds_panel_module_default.dragging);
+			};
+			root.addEventListener("mousedown", handleMouseDown);
+			document.addEventListener("mousemove", handleMouseMove);
+			document.addEventListener("mouseup", handleMouseUp);
+			return () => {
+				root.removeEventListener("mousedown", handleMouseDown);
+				document.removeEventListener("mousemove", handleMouseMove);
+				document.removeEventListener("mouseup", handleMouseUp);
+			};
+		};
+		t2 = [enabled];
+		$[1] = enabled;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	useEffect(t1, t2);
+	return rootRef;
+}
 function DsPanel(t0) {
-	const $ = c(23);
+	const $ = c(25);
 	let children;
 	let className;
 	let onOpenChange;
@@ -17,8 +89,9 @@ function DsPanel(t0) {
 	let slotProps;
 	let t1;
 	let t2;
+	let t3;
 	if ($[0] !== t0) {
-		({open, onOpenChange, children, className, slotProps, variant: t1, disablePadding: t2, ...props} = t0);
+		({open, onOpenChange, children, className, slotProps, variant: t1, draggable: t2, disablePadding: t3, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
@@ -28,6 +101,7 @@ function DsPanel(t0) {
 		$[6] = slotProps;
 		$[7] = t1;
 		$[8] = t2;
+		$[9] = t3;
 	} else {
 		children = $[1];
 		className = $[2];
@@ -37,49 +111,54 @@ function DsPanel(t0) {
 		slotProps = $[6];
 		t1 = $[7];
 		t2 = $[8];
+		t3 = $[9];
 	}
 	const variant = t1 === void 0 ? "docked" : t1;
-	const disablePadding = t2 === void 0 ? false : t2;
-	const t3 = variant === "docked";
-	const t4 = variant === "floating";
-	let t5;
-	if ($[9] !== className || $[10] !== disablePadding || $[11] !== t3 || $[12] !== t4) {
-		t5 = classNames(ds_panel_module_default.root, className, {
-			[ds_panel_module_default.variantDocked]: t3,
-			[ds_panel_module_default.variantFloating]: t4,
+	const draggable = t2 === void 0 ? false : t2;
+	const disablePadding = t3 === void 0 ? false : t3;
+	const rootRef = useDraggable(variant === "floating" && draggable);
+	const t4 = variant === "docked";
+	const t5 = variant === "floating";
+	let t6;
+	if ($[10] !== className || $[11] !== disablePadding || $[12] !== t4 || $[13] !== t5) {
+		t6 = classNames(ds_panel_module_default.root, className, {
+			[ds_panel_module_default.variantDocked]: t4,
+			[ds_panel_module_default.variantFloating]: t5,
 			[ds_panel_module_default.disablePadding]: disablePadding
 		});
-		$[9] = className;
-		$[10] = disablePadding;
-		$[11] = t3;
+		$[10] = className;
+		$[11] = disablePadding;
 		$[12] = t4;
 		$[13] = t5;
-	} else t5 = $[13];
-	const t6 = slotProps?.collapseButton;
-	let t7;
-	if ($[14] !== t6) {
-		t7 = /* @__PURE__ */ jsx(DsPanelCollapseButton, { ...t6 });
 		$[14] = t6;
-		$[15] = t7;
-	} else t7 = $[15];
+	} else t6 = $[14];
+	const t7 = slotProps?.collapseButton;
 	let t8;
-	if ($[16] !== children || $[17] !== onOpenChange || $[18] !== open || $[19] !== props || $[20] !== t5 || $[21] !== t7) {
-		t8 = /* @__PURE__ */ jsxs(Collapsible.Root, {
+	if ($[15] !== t7) {
+		t8 = /* @__PURE__ */ jsx(DsPanelCollapseButton, { ...t7 });
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== children || $[18] !== onOpenChange || $[19] !== open || $[20] !== props || $[21] !== rootRef || $[22] !== t6 || $[23] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Collapsible.Root, {
+			ref: rootRef,
 			open,
 			onOpenChange,
-			className: t5,
+			className: t6,
 			...props,
-			children: [t7, children]
+			children: [t8, children]
 		});
-		$[16] = children;
-		$[17] = onOpenChange;
-		$[18] = open;
-		$[19] = props;
-		$[20] = t5;
-		$[21] = t7;
-		$[22] = t8;
-	} else t8 = $[22];
-	return t8;
+		$[17] = children;
+		$[18] = onOpenChange;
+		$[19] = open;
+		$[20] = props;
+		$[21] = rootRef;
+		$[22] = t6;
+		$[23] = t8;
+		$[24] = t9;
+	} else t9 = $[24];
+	return t9;
 }
 function DsPanelCollapseButton(t0) {
 	const $ = c(9);

package/dist/components/ds-panel/ds-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ds-panel.js","names":["Collapsible","classnames","styles","DsIcon","DsPanelCollapseButtonProps","DsPanelProps","DsPanel","t0","$","_c","children","className","onOpenChange","open","props","slotProps","t1","t2","variant","disablePadding","undefined","t3","t4","t5","root","variantDocked","variantFloating","t6","collapseButton","t7","t8","DsPanelCollapseButton","collapsed","trigger","triggerCollapsed","Symbol","for"],"sources":["../../../src/components/ds-panel/ds-panel.tsx"],"sourcesContent":["import * as Collapsible from '@radix-ui/react-collapsible';\nimport classnames from 'classnames';\nimport styles from './ds-panel.module.scss';\nimport { DsIcon } from '../ds-icon';\nimport type { DsPanelCollapseButtonProps, DsPanelProps } from './ds-panel.types';\n\nexport function DsPanel({\n\topen,\n\tonOpenChange,\n\tchildren,\n\tclassName,\n\tslotProps,\n\tvariant = 'docked',\n\tdisablePadding = false,\n\t...props\n}: DsPanelProps) {\n\treturn (\n\t\t<Collapsible.Root\n\t\t\topen={open}\n\t\t\tonOpenChange={onOpenChange}\n\t\t\tclassName={classnames(styles.root, className, {\n\t\t\t\t[styles.variantDocked]: variant === 'docked',\n\t\t\t\t[styles.variantFloating]: variant === 'floating',\n\t\t\t\t[styles.disablePadding]: disablePadding,\n\t\t\t})}\n\t\t\t{...props}\n\t\t>\n\t\t\t<DsPanelCollapseButton {...slotProps?.collapseButton} />\n\t\t\t{children}\n\t\t</Collapsible.Root>\n\t);\n}\n\nfunction DsPanelCollapseButton({ collapsed, ...props }: DsPanelCollapseButtonProps) {\n\treturn (\n\t\t<Collapsible.Trigger\n\t\t\tclassName={classnames(styles.trigger, {\n\t\t\t\t[styles.triggerCollapsed]: collapsed,\n\t\t\t})}\n\t\t\taria-label=\"Toggle panel\"\n\t\t\t{...props}\n\t\t>\n\t\t\t<DsIcon icon=\"arrow_circle_left\" variant=\"outlined\" />\n\t\t</Collapsible.Trigger>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"file":"ds-panel.js","names":["useEffect","useRef","Collapsible","classnames","styles","DsIcon","DsPanelCollapseButtonProps","DsPanelProps","useDraggable","enabled","$","_c","rootRef","t0","Symbol","for","x","y","positionRef","dragRef","t1","t2","root","current","style","transform","handleMouseDown","e","target","HTMLElement","closest","preventDefault","startX","clientX","startY","clientY","originX","originY","classList","add","dragging","handleMouseMove","e_0","String","handleMouseUp","remove","addEventListener","document","removeEventListener","DsPanel","children","className","onOpenChange","open","props","slotProps","t3","variant","draggable","disablePadding","undefined","isDraggable","t4","t5","t6","variantDocked","variantFloating","t7","collapseButton","t8","t9","DsPanelCollapseButton","collapsed","trigger","triggerCollapsed"],"sources":["../../../src/components/ds-panel/ds-panel.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport * as Collapsible from '@radix-ui/react-collapsible';\nimport classnames from 'classnames';\nimport styles from './ds-panel.module.scss';\nimport { DsIcon } from '../ds-icon';\nimport type { DsPanelCollapseButtonProps, DsPanelProps } from './ds-panel.types';\n\nfunction useDraggable(enabled: boolean) {\n\tconst rootRef = useRef<HTMLDivElement>(null);\n\tconst positionRef = useRef({ x: 0, y: 0 });\n\tconst dragRef = useRef<{\n\t\tstartX: number;\n\t\tstartY: number;\n\t\toriginX: number;\n\t\toriginY: number;\n\t} | null>(null);\n\n\tuseEffect(() => {\n\t\tconst root = rootRef.current;\n\n\t\tif (!root) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!enabled) {\n\t\t\tpositionRef.current = { x: 0, y: 0 };\n\t\t\troot.style.transform = '';\n\n\t\t\treturn;\n\t\t}\n\n\t\tconst handleMouseDown = (e: MouseEvent) => {\n\t\t\tconst target = e.target as HTMLElement;\n\n\t\t\tif (!target.closest('[data-drag-handle]')) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\te.preventDefault();\n\n\t\t\tdragRef.current = {\n\t\t\t\tstartX: e.clientX,\n\t\t\t\tstartY: e.clientY,\n\t\t\t\toriginX: positionRef.current.x,\n\t\t\t\toriginY: positionRef.current.y,\n\t\t\t};\n\n\t\t\troot.classList.add(styles.dragging);\n\t\t};\n\n\t\tconst handleMouseMove = (e: MouseEvent) => {\n\t\t\tif (!dragRef.current) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tpositionRef.current = {\n\t\t\t\tx: dragRef.current.originX + (e.clientX - dragRef.current.startX),\n\t\t\t\ty: dragRef.current.originY + (e.clientY - dragRef.current.startY),\n\t\t\t};\n\n\t\t\troot.style.transform = `translate(${String(positionRef.current.x)}px, ${String(positionRef.current.y)}px)`;\n\t\t};\n\n\t\tconst handleMouseUp = () => {\n\t\t\tif (!dragRef.current) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tdragRef.current = null;\n\t\t\troot.classList.remove(styles.dragging);\n\t\t};\n\n\t\troot.addEventListener('mousedown', handleMouseDown);\n\t\tdocument.addEventListener('mousemove', handleMouseMove);\n\t\tdocument.addEventListener('mouseup', handleMouseUp);\n\n\t\treturn () => {\n\t\t\troot.removeEventListener('mousedown', handleMouseDown);\n\t\t\tdocument.removeEventListener('mousemove', handleMouseMove);\n\t\t\tdocument.removeEventListener('mouseup', handleMouseUp);\n\t\t};\n\t}, [enabled]);\n\n\treturn rootRef;\n}\n\nexport function DsPanel({\n\topen,\n\tonOpenChange,\n\tchildren,\n\tclassName,\n\tslotProps,\n\tvariant = 'docked',\n\tdraggable = false,\n\tdisablePadding = false,\n\t...props\n}: DsPanelProps) {\n\tconst isDraggable = variant === 'floating' && draggable;\n\tconst rootRef = useDraggable(isDraggable);\n\n\treturn (\n\t\t<Collapsible.Root\n\t\t\tref={rootRef}\n\t\t\topen={open}\n\t\t\tonOpenChange={onOpenChange}\n\t\t\tclassName={classnames(styles.root, className, {\n\t\t\t\t[styles.variantDocked]: variant === 'docked',\n\t\t\t\t[styles.variantFloating]: variant === 'floating',\n\t\t\t\t[styles.disablePadding]: disablePadding,\n\t\t\t})}\n\t\t\t{...props}\n\t\t>\n\t\t\t<DsPanelCollapseButton {...slotProps?.collapseButton} />\n\t\t\t{children}\n\t\t</Collapsible.Root>\n\t);\n}\n\nfunction DsPanelCollapseButton({ collapsed, ...props }: DsPanelCollapseButtonProps) {\n\treturn (\n\t\t<Collapsible.Trigger\n\t\t\tclassName={classnames(styles.trigger, {\n\t\t\t\t[styles.triggerCollapsed]: collapsed,\n\t\t\t})}\n\t\t\taria-label=\"Toggle panel\"\n\t\t\t{...props}\n\t\t>\n\t\t\t<DsIcon icon=\"arrow_circle_left\" variant=\"outlined\" />\n\t\t</Collapsible.Trigger>\n\t);\n}\n"],"mappings":"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"}

package/dist/components/ds-panel/ds-panel.module.cjs

@@ -1,12 +1,13 @@
 
 //#region src/components/ds-panel/ds-panel.module.scss
 var ds_panel_module_default = {
-	"root": "_root_17q29_1",
-	"variantFloating": "_variantFloating_17q29_1",
-	"disablePadding": "_disablePadding_17q29_1",
-	"trigger": "_trigger_17q29_1",
-	"triggerCollapsed": "_triggerCollapsed_17q29_1",
-	"variantDocked": "_variantDocked_17q29_1"
+	"root": "_root_1g6rb_1",
+	"variantFloating": "_variantFloating_1g6rb_1",
+	"dragging": "_dragging_1g6rb_1",
+	"disablePadding": "_disablePadding_1g6rb_1",
+	"trigger": "_trigger_1g6rb_1",
+	"triggerCollapsed": "_triggerCollapsed_1g6rb_1",
+	"variantDocked": "_variantDocked_1g6rb_1"
 };
 
 //#endregion