@drivenets/design-system 0.4.0 → 0.6.0

package/dist/components/ds-icon/ds-icon.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ds-icon.types.js","names":["React","IconPrefix","materialIcons","iconSizes","const","IconSize","iconVariants","IconVariant","IconName","K","Name","IconType","FunctionComponent","SVGProps","SVGSVGElement","DsIconProps","icon","size","variant","filled","className","style","CSSProperties","onClick","event","MouseEvent","HTMLSpanElement"],"sources":["../../../src/components/ds-icon/ds-icon.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { IconPrefix, materialIcons } from './material-icons';\n\nexport const iconSizes = ['tiny', 'small', 'medium', 'large', 'extra-large'] as const;\nexport type IconSize = (typeof iconSizes)[number];\nexport const iconVariants = ['outlined', 'rounded'] as const;\nexport type IconVariant = (typeof iconVariants)[number];\n\nexport type IconName = {\n\t[K in keyof typeof materialIcons]: K extends `${IconPrefix}::${infer Name}` ? Name : never;\n}[keyof typeof materialIcons];\n\nexport type IconType = IconName | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;\n\nexport interface DsIconProps {\n\t/**\n\t * The icon to display. This can be a Material Icon name (e.g., 'home') or an SVG component.\n\t */\n\ticon: IconType;\n\n\t/**\n\t * The size of the icon\n\t * @default 'medium'\n\t */\n\tsize?: IconSize;\n\n\t/**\n\t * The variant of the Material Icon\n\t * @default 'outlined'\n\t */\n\tvariant?: IconVariant;\n\n\t/**\n\t * Whether the icon should be filled\n\t * @default false\n\t */\n\tfilled?: boolean;\n\n\t/**\n\t * Additional CSS class names\n\t */\n\tclassName?: string;\n\n\t/**\n\t * Additional styles to apply to the icon\n\t */\n\tstyle?: React.CSSProperties;\n\n\t/**\n\t * Optional click handler\n\t */\n\tonClick?: (event: React.MouseEvent<HTMLSpanElement | SVGSVGElement>) => void;\n}\n"],"mappings":";AAGA,MAAaG,YAAY;CAAC;CAAQ;CAAS;CAAU;CAAS;CAAc;AAE5E,MAAaG,eAAe,CAAC,YAAY,UAAU"}
+{"version":3,"file":"ds-icon.types.js","names":["MouseEvent","CSSProperties","FunctionComponent","SVGProps","IconPrefix","materialIcons","CustomIconName","iconSizes","const","IconSize","iconVariants","IconVariant","MaterialIconName","K","Name","IconName","IconType","SVGSVGElement","DsIconProps","icon","size","variant","filled","className","style","onClick","event","HTMLSpanElement"],"sources":["../../../src/components/ds-icon/ds-icon.types.ts"],"sourcesContent":["import type { MouseEvent, CSSProperties, FunctionComponent, SVGProps } from 'react';\nimport type { IconPrefix, materialIcons } from './material-icons';\nimport type { CustomIconName } from './custom-icons';\n\nexport const iconSizes = ['tiny', 'small', 'medium', 'large', 'extra-large'] as const;\nexport type IconSize = (typeof iconSizes)[number];\nexport const iconVariants = ['outlined', 'rounded'] as const;\nexport type IconVariant = (typeof iconVariants)[number];\n\nexport type MaterialIconName = {\n\t[K in keyof typeof materialIcons]: K extends `${IconPrefix}::${infer Name}` ? Name : never;\n}[keyof typeof materialIcons];\n\nexport type IconName = MaterialIconName | CustomIconName;\n\nexport type IconType = IconName | FunctionComponent<SVGProps<SVGSVGElement>>;\n\nexport interface DsIconProps {\n\t/**\n\t * The icon to display. This can be a Material Icon name (e.g., 'home') or an SVG component.\n\t */\n\ticon: IconType;\n\n\t/**\n\t * The size of the icon\n\t * @default 'medium'\n\t */\n\tsize?: IconSize;\n\n\t/**\n\t * The variant of the Material Icon\n\t * @default 'outlined'\n\t */\n\tvariant?: IconVariant;\n\n\t/**\n\t * Whether the icon should be filled\n\t * @default false\n\t */\n\tfilled?: boolean;\n\n\t/**\n\t * Additional CSS class names\n\t */\n\tclassName?: string;\n\n\t/**\n\t * Additional styles to apply to the icon\n\t */\n\tstyle?: CSSProperties;\n\n\t/**\n\t * Optional click handler\n\t */\n\tonClick?: (event: MouseEvent<HTMLSpanElement | SVGSVGElement>) => void;\n}\n"],"mappings":";AAIA,MAAaO,YAAY;CAAC;CAAQ;CAAS;CAAU;CAAS;CAAc;AAE5E,MAAaG,eAAe,CAAC,YAAY,UAAU"}

package/dist/components/ds-icon/index.cjs

@@ -1,2 +1,3 @@
+const require_index = require('./custom-icons/index.cjs');
 const require_ds_icon = require('./ds-icon.cjs');
 const require_ds_icon_types = require('./ds-icon.types.cjs');

package/dist/components/ds-icon/index.d.ts

@@ -1,2 +1,3 @@
-import { DsIconProps, IconName, IconSize, IconType, IconVariant, iconSizes, iconVariants } from "./ds-icon.types.js";
+import { CustomIconComponent, CustomIconName, customIcons, isCustomIcon } from "./custom-icons/index.js";
+import { DsIconProps, IconName, IconSize, IconType, IconVariant, MaterialIconName, iconSizes, iconVariants } from "./ds-icon.types.js";
 import { DsIcon } from "./ds-icon.js";

package/dist/components/ds-icon/index.js

@@ -1,2 +1,3 @@
+import { customIcons, isCustomIcon } from "./custom-icons/index.js";
 import ds_icon_default from "./ds-icon.js";
 import { iconSizes, iconVariants } from "./ds-icon.types.js";

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

@@ -1,5 +1,5 @@
 import { DsLoaderProps } from "./ds-loader.types.cjs";
-import * as react_jsx_runtime29 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_runtime29.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_runtime11 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_runtime11.JSX.Element;
+}: DsLoaderProps) => react_jsx_runtime23.JSX.Element;
 //#endregion
 export { DsLoader };
 //# sourceMappingURL=ds-loader.d.ts.map

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

@@ -8,8 +8,8 @@ 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 __ark_ui_react_portal = require("@ark-ui/react/portal");
-let __ark_ui_react_dialog = require("@ark-ui/react/dialog");
+let _ark_ui_react_portal = require("@ark-ui/react/portal");
+let _ark_ui_react_dialog = require("@ark-ui/react/dialog");
 
 //#region src/components/ds-modal/ds-modal.tsx
 /**
@@ -35,7 +35,7 @@ const DsModal = (t0) => {
 	const handleOpenChange = t5;
 	let t6;
 	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Backdrop, { className: require_ds_modal_module.default.overlay });
+		t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.Dialog.Backdrop, { className: require_ds_modal_module.default.overlay });
 		$[2] = t6;
 	} else t6 = $[2];
 	const t7 = require_ds_modal_module.default[`cols-${columns}`];
@@ -60,7 +60,7 @@ const DsModal = (t0) => {
 	} else t10 = $[8];
 	let t11;
 	if ($[9] !== style || $[10] !== t10 || $[11] !== t8) {
-		t11 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_portal.Portal, { children: [t6, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Positioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Content, {
+		t11 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_portal.Portal, { children: [t6, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.Dialog.Positioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.Dialog.Content, {
 			style,
 			className: t8,
 			children: t10
@@ -72,7 +72,7 @@ const DsModal = (t0) => {
 	} else t11 = $[12];
 	let t12;
 	if ($[13] !== closeOnEscape || $[14] !== closeOnInteractOutside || $[15] !== handleOpenChange || $[16] !== modal || $[17] !== open || $[18] !== t11) {
-		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Root, {
+		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.Dialog.Root, {
 			open,
 			onOpenChange: handleOpenChange,
 			modal,
@@ -133,7 +133,7 @@ const Title = (t0) => {
 	} else t2 = $[3];
 	let t3;
 	if ($[4] !== style || $[5] !== t1 || $[6] !== t2) {
-		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.Title, {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.Dialog.Title, {
 			className: t1,
 			style,
 			asChild: true,
@@ -159,7 +159,7 @@ const CloseTrigger = (t0) => {
 	} else t1 = $[0];
 	let t2;
 	if ($[1] !== className || $[2] !== style) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_dialog.Dialog.CloseTrigger, {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.Dialog.CloseTrigger, {
 			style,
 			className,
 			children: t1

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

@@ -1,5 +1,5 @@
 import { DsModalProps } from "./ds-modal.types.cjs";
-import * as react_jsx_runtime30 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_runtime30.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_runtime30.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_runtime30.JSX.Element;
+  }) => react_jsx_runtime36.JSX.Element;
   CloseTrigger: ({
     style,
     className
   }: {
     style?: CSSProperties;
     className?: string;
-  }) => react_jsx_runtime30.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_runtime30.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_runtime30.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_runtime30.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_runtime14 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_runtime14.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_runtime14.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_runtime14.JSX.Element;
+  }) => react_jsx_runtime16.JSX.Element;
   CloseTrigger: ({
     style,
     className
   }: {
     style?: CSSProperties;
     className?: string;
-  }) => react_jsx_runtime14.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_runtime14.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_runtime14.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_runtime14.JSX.Element;
+  }) => react_jsx_runtime16.JSX.Element;
 };
 //#endregion
 export { DsModal };

package/dist/components/ds-number-input/ds-number-input.cjs

@@ -6,7 +6,7 @@ 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 __ark_ui_react = require("@ark-ui/react");
+let _ark_ui_react = require("@ark-ui/react");
 
 //#region src/components/ds-number-input/ds-number-input.tsx
 const DsNumberInput = (t0) => {
@@ -50,7 +50,7 @@ const DsNumberInput = (t0) => {
 	} else t11 = $[8];
 	let t12;
 	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.NumberInput.DecrementTrigger, {
+		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.NumberInput.DecrementTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
@@ -71,7 +71,7 @@ const DsNumberInput = (t0) => {
 	} else t13 = $[10];
 	let t14;
 	if ($[11] !== name || $[12] !== onBlur || $[13] !== onChange || $[14] !== placeholder || $[15] !== ref) {
-		t14 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.NumberInput.Input, {
+		t14 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.NumberInput.Input, {
 			ref,
 			name,
 			className: t13,
@@ -93,7 +93,7 @@ const DsNumberInput = (t0) => {
 	} else t15 = $[17];
 	let t16;
 	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-		t16 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.NumberInput.IncrementTrigger, {
+		t16 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.NumberInput.IncrementTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
@@ -109,7 +109,7 @@ const DsNumberInput = (t0) => {
 	} else t16 = $[18];
 	let t17;
 	if ($[19] !== containerClass || $[20] !== style || $[21] !== t14) {
-		t17 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.NumberInput.Control, {
+		t17 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.NumberInput.Control, {
 			asChild: true,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: containerClass,
@@ -128,7 +128,7 @@ const DsNumberInput = (t0) => {
 	} else t17 = $[22];
 	let t18;
 	if ($[23] !== disabled || $[24] !== id || $[25] !== max || $[26] !== min || $[27] !== step || $[28] !== t10 || $[29] !== t17 || $[30] !== t8 || $[31] !== t9) {
-		t18 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.NumberInput.Root, {
+		t18 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.NumberInput.Root, {
 			id,
 			min,
 			max,

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 __radix_ui_react_collapsible = require("@radix-ui/react-collapsible");
-__radix_ui_react_collapsible = require_rolldown_runtime.__toESM(__radix_ui_react_collapsible);
+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);
@@ -113,7 +192,7 @@ function DsPanelCollapseButton(t0) {
 	} else t2 = $[5];
 	let t3;
 	if ($[6] !== props || $[7] !== t1) {
-		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_collapsible.Trigger, {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_collapsible.Trigger, {
 			className: t1,
 			"aria-label": "Toggle panel",
 			...props,

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

@@ -1,5 +1,5 @@
 import { DsPanelProps } from "./ds-panel.types.cjs";
-import * as react_jsx_runtime37 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_runtime37.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,mBAAA,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_runtime44 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_runtime44.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"}