@plitzi/plitzi-ui 1.6.2

package/dist/components/ContainerCollapsable/ContainerCollapsable.js

@@ -0,0 +1,52 @@
+import e from "../../hooks/useTheme/index.js";
+import t from "../Flex/index.js";
+import n from "../../hooks/useDidUpdateEffect/index.js";
+import r from "./ContainerCollapsableContent.js";
+import i from "./ContainerCollapsableHeader.js";
+import { Children as a, cloneElement as o, isValidElement as s, useCallback as c, useMemo as l, useState as u } from "react";
+import { jsxs as d } from "react/jsx-runtime";
+//#region src/components/ContainerCollapsable/ContainerCollapsable.tsx
+var f = ({ className: f = "", collapsed: p = !1, children: m, direction: h = "column", wrap: g, items: _, justify: v, gap: y, grow: b, shrink: x, basis: S, onChange: C, ...w }) => {
+	let [T, E] = u(p);
+	f = e("ContainerCollapsable", {
+		className: f,
+		componentKey: "root"
+	}), n(() => {
+		E(p);
+	}, [p]);
+	let D = c((e) => {
+		e.stopPropagation(), E(!T), C?.(!T);
+	}, [T, C]), { header: O, content: k } = l(() => {
+		let e = {
+			header: void 0,
+			content: void 0
+		};
+		return a.forEach(m, (t) => {
+			s(t) && (t.type === i ? e.header = o(t, {
+				...t.props,
+				collapsed: T,
+				onClick: D
+			}) : t.type === r && (e.content = o(t)));
+		}), e;
+	}, [
+		m,
+		T,
+		D
+	]);
+	return /* @__PURE__ */ d(t, {
+		className: f,
+		direction: h,
+		wrap: g,
+		items: _,
+		justify: v,
+		gap: y,
+		shrink: x,
+		basis: S,
+		grow: b ? !T : !1,
+		...w,
+		children: [O, !T && k]
+	});
+};
+f.Header = i, f.Content = r;
+//#endregion
+export { f as default };

package/dist/components/ContainerCollapsable/ContainerCollapsable.styles.d.ts

@@ -0,0 +1,13 @@
+export declare const variantKeys: {};
+export declare const STYLES_COMPONENT_NAME = "ContainerCollapsable";
+declare const _default: {
+    root: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    header: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    headerContainer: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    headerSlot: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    headerSlotContainer: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    headerTitle: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    headerIconContainer: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    content: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+};
+export default _default;

package/dist/components/ContainerCollapsable/ContainerCollapsable.styles.js

@@ -0,0 +1,13 @@
+import e from "../../helpers/cvaWrapper.js";
+var t = {
+	root: e(""),
+	header: e("flex justify-between items-center cursor-pointer select-none gap-2 px-2 py-1 transition-colors duration-150 hover:bg-gray-50 dark:hover:bg-zinc-800/60 text-zinc-800 dark:text-zinc-200"),
+	headerContainer: e("flex items-center gap-2 min-w-0"),
+	headerSlot: e(""),
+	headerSlotContainer: e("flex items-center gap-2 shrink-0"),
+	headerTitle: e("m-0 flex items-center grow cursor-pointer truncate text-sm font-medium text-zinc-700 dark:text-zinc-300"),
+	headerIconContainer: e("flex items-center justify-center w-4 shrink-0 text-zinc-400 dark:text-zinc-500"),
+	content: e("")
+};
+//#endregion
+export { t as default };

package/dist/components/ContainerCollapsable/ContainerCollapsableContent.d.ts

@@ -0,0 +1,9 @@
+import { default as ContainerCollapsableStyles, variantKeys } from './ContainerCollapsable.styles';
+import { variantKeys as variantKeysFlex } from '../Flex/Flex.styles';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+import { HTMLAttributes, ReactNode } from 'react';
+export type ContainerCollapsableContentProps = {
+    children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className'> & useThemeSharedProps<typeof ContainerCollapsableStyles, typeof variantKeys & typeof variantKeysFlex>;
+declare const ContainerCollapsableContent: ({ className, children, direction, wrap, items, justify, gap, grow, shrink, basis, ...otherProps }: ContainerCollapsableContentProps) => import("react/jsx-runtime").JSX.Element;
+export default ContainerCollapsableContent;

package/dist/components/ContainerCollapsable/ContainerCollapsableContent.js

@@ -0,0 +1,22 @@
+import e from "../../hooks/useTheme/index.js";
+import t from "../Flex/index.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/ContainerCollapsable/ContainerCollapsableContent.tsx
+var r = ({ className: r, children: i, direction: a = "column", wrap: o, items: s, justify: c, gap: l, grow: u, shrink: d, basis: f, ...p }) => (r = e("ContainerCollapsable", {
+	className: r,
+	componentKey: "content"
+}), /* @__PURE__ */ n(t, {
+	className: r,
+	direction: a,
+	wrap: o,
+	items: s,
+	justify: c,
+	gap: l,
+	shrink: d,
+	basis: f,
+	grow: u,
+	...p,
+	children: i
+}));
+//#endregion
+export { r as default };

package/dist/components/ContainerCollapsable/ContainerCollapsableHeader.d.ts

@@ -0,0 +1,14 @@
+import { default as ContainerCollapsableStyles, variantKeys } from './ContainerCollapsable.styles';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+export type ContainerCollapsableHeaderProps = {
+    children?: ReactNode;
+    title?: ReactNode;
+    placement?: 'left' | 'right';
+    collapsed?: boolean;
+    iconCollapsed?: ReactNode;
+    iconExpanded?: ReactNode;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'title'> & useThemeSharedProps<typeof ContainerCollapsableStyles, typeof variantKeys>;
+declare const ContainerCollapsableHeader: ({ children, className, title, collapsed, iconCollapsed, iconExpanded, placement, onClick, ...otherProps }: ContainerCollapsableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default ContainerCollapsableHeader;

package/dist/components/ContainerCollapsable/ContainerCollapsableHeader.js

@@ -0,0 +1,42 @@
+import e from "../../hooks/useTheme/index.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/ContainerCollapsable/ContainerCollapsableHeader.tsx
+var r = /* @__PURE__ */ t("i", { className: "fas fa-plus" }), i = /* @__PURE__ */ t("i", { className: "fas fa-minus" }), a = ({ children: a, className: o, title: s = "Title", collapsed: c = !1, iconCollapsed: l = r, iconExpanded: u = i, placement: d = "left", onClick: f, ...p }) => {
+	let m = e("ContainerCollapsable", {
+		className: o,
+		componentKey: [
+			"header",
+			"headerContainer",
+			"headerTitle",
+			"headerIconContainer",
+			"headerSlot",
+			"headerSlotContainer"
+		]
+	});
+	return /* @__PURE__ */ n("div", {
+		className: m.header,
+		onClick: f,
+		...p,
+		children: [/* @__PURE__ */ n("div", {
+			className: m.headerContainer,
+			children: [d === "left" && /* @__PURE__ */ n("div", {
+				className: m.headerIconContainer,
+				children: [c && l, !c && u]
+			}), /* @__PURE__ */ t("div", {
+				className: m.headerTitle,
+				children: s
+			})]
+		}), /* @__PURE__ */ n("div", {
+			className: m.headerSlotContainer,
+			children: [/* @__PURE__ */ t("div", {
+				className: m.headerSlot,
+				children: a
+			}), d === "right" && /* @__PURE__ */ n("div", {
+				className: m.headerIconContainer,
+				children: [c && l, !c && u]
+			})]
+		})]
+	});
+};
+//#endregion
+export { a as default };

package/dist/components/ContainerCollapsable/index.d.ts

@@ -0,0 +1,5 @@
+import { default as ContainerCollapsable } from './ContainerCollapsable';
+import { default as containerCollapsableTheme } from './ContainerCollapsable.styles';
+export * from './ContainerCollapsable';
+export { containerCollapsableTheme };
+export default ContainerCollapsable;

package/dist/components/ContainerCollapsable/index.js

@@ -0,0 +1,6 @@
+import e from "./ContainerCollapsable.js";
+import t from "./ContainerCollapsable.styles.js";
+//#region src/components/ContainerCollapsable/index.ts
+var n = e;
+//#endregion
+export { t as containerCollapsableTheme, n as default };

package/dist/components/ContainerDraggable/ContainerDraggable.d.ts

@@ -0,0 +1,27 @@
+import { default as ContainerDraggableStyles, variantKeys } from './ContainerDraggable.styles';
+import { ResizeHandle } from '../ContainerResizable';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+import { ReactNode, RefObject } from 'react';
+export type ContainerDraggableProps = {
+    parentRef?: RefObject<HTMLElement | null>;
+    icon: ReactNode;
+    title?: ReactNode;
+    className: string;
+    children: ReactNode;
+    limitMode: 'parent' | 'window' | 'none';
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    allowResize: boolean;
+    allowExternal: boolean;
+    allowClose?: boolean;
+    resizeHandles: ResizeHandle[];
+    customActions: ReactNode[];
+    titleHeight?: number;
+    onClose?: (e: MouseEvent | React.MouseEvent) => void;
+    onFocus?: (e: MouseEvent | React.MouseEvent | TouchEvent | React.TouchEvent) => void;
+    onCollapse?: (collapsed: boolean) => void;
+} & useThemeSharedProps<typeof ContainerDraggableStyles, typeof variantKeys>;
+declare const ContainerDraggable: ({ icon, title, className, children, limitMode, x, y, width, height, titleHeight, allowResize, allowClose, allowExternal, resizeHandles, customActions, parentRef, intent, size, onClose, onFocus, onCollapse }: ContainerDraggableProps) => import("react/jsx-runtime").JSX.Element;
+export default ContainerDraggable;

package/dist/components/ContainerDraggable/ContainerDraggable.js

@@ -0,0 +1,140 @@
+import { debounce as e } from "../../helpers/lodash/debounce.js";
+import t from "../../hooks/useTheme/index.js";
+import n from "../Card/index.js";
+import r from "../ContainerWindow/index.js";
+import i from "./ContainerDraggableContent.js";
+import a from "./ContainerDraggableHeader.js";
+import { useCallback as o, useEffect as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as ee } from "react/jsx-runtime";
+import te from "clsx";
+//#region src/components/ContainerDraggable/ContainerDraggable.tsx
+var ne = ["se"], re = [], d = ({ icon: d, title: ie = "Title", className: ae = "", children: f, limitMode: p = "window", x: m = 0, y: h = 0, width: g = 150, height: _ = 150, titleHeight: v = 34, allowResize: y = !1, allowClose: b = !0, allowExternal: x = !0, resizeHandles: oe = ne, customActions: S = re, parentRef: C, intent: w, size: T, onClose: E, onFocus: D, onCollapse: O }) => {
+	let [k, A] = l(!1), j = t("ContainerDraggable", {
+		className: ae,
+		componentKey: ["root", "cardBody"],
+		variants: {
+			intent: w,
+			size: T,
+			collapsed: k
+		}
+	}), se = c(void 0), M = c(void 0), N = c(!1), P = c(m), F = c(h), [I, L] = l(!1), [R, z] = l(m), [B, V] = l(h), [H, U] = l(0), [W, G] = l(0), [ce, K] = l(!1), [le] = l(g), [ue] = l(_ - v), [q, de] = l({
+		width: 0,
+		height: 0
+	}), J = o(() => !C?.current && typeof document < "u" ? document.body : C?.current, [C]), fe = c(e(o(() => {
+		if (!N.current) {
+			let e = M.current.getBoundingClientRect(), t = P.current, n = F.current;
+			e.x + e.width > window.innerWidth ? t = window.innerWidth - e.width : e.x < 0 && (t = 0), e.y + e.height > window.innerHeight ? n = window.innerHeight - e.height : e.y < 0 && (n = 0), (P.current !== t || F.current !== n) && (P.current = t, F.current = n, z(t), V(n));
+		}
+	}, []), 250));
+	s(() => {
+		let e = fe.current;
+		return window.addEventListener("resize", e), () => {
+			N.current = !0, window.removeEventListener("resize", e);
+		};
+	}, []);
+	let Y = o((e) => {
+		if (e.stopPropagation(), e.preventDefault(), I) {
+			let t = M.current.getBoundingClientRect(), n = R + e.clientX - H, r = B + e.clientY - W;
+			n + t.width > q.width && p !== "none" ? n = q.width - t.width : n < 0 && (n = 0), r + t.height > q.height && p !== "none" ? r = q.height - t.height : r < 0 && (r = 0), P.current = n, F.current = r, M.current.style.left = `${n}px`, M.current.style.top = `${r}px`;
+		}
+	}, [
+		H,
+		W,
+		q.height,
+		q.width,
+		I,
+		p,
+		R,
+		B
+	]), X = o((e) => {
+		e.stopPropagation(), e.preventDefault(), L(!1), z(P.current), V(F.current), J()?.classList.remove("moving");
+	}, [J]);
+	s(() => (I && (window.addEventListener("mousemove", Y, !1), window.addEventListener("mouseup", X, !1), window.addEventListener("touchmove", Z, !1), window.addEventListener("touchend", Q, !1)), () => {
+		I && (window.removeEventListener("mousemove", Y, !1), window.removeEventListener("mouseup", X, !1), window.removeEventListener("touchmove", Z, !1), window.removeEventListener("touchend", Q, !1));
+	}), [I, q]);
+	let pe = (e) => {
+		let t;
+		p === "parent" ? (M.current.parentNode || (t = {
+			height: window.innerHeight,
+			width: window.innerWidth
+		}), t = M.current.parentNode.getBoundingClientRect()) : t = {
+			height: window.innerHeight,
+			width: window.innerWidth
+		}, e.button === 0 ? (J()?.classList.add("moving"), L(!0), de(t), U(e.clientX), G(e.clientY), D?.(e)) : (L(!1), z(P.current), V(F.current));
+	}, me = () => K((e) => !e), Z = o((e) => {
+		if (e.stopPropagation(), e.changedTouches.length > 1 && e.preventDefault(), I) {
+			let t = M.current.getBoundingClientRect(), { clientX: n, clientY: r } = e.touches[0], i = R + n - H, a = B + r - W;
+			i + t.width > window.innerWidth ? i = window.innerWidth - t.width : i < 0 && (i = 0), a + t.height > window.innerHeight ? a = window.innerHeight - t.height : a < 0 && (a = 0), P.current = i, F.current = a, M.current.style.left = `${i}px`, M.current.style.top = `${a}px`;
+		}
+	}, [
+		H,
+		W,
+		I,
+		R,
+		B
+	]), Q = o(() => {
+		L(!1), z(P.current), V(F.current);
+	}, []), he = o((e) => {
+		e.stopPropagation(), L(!0), U(e.touches[0].clientX), G(e.touches[0].clientY), D?.(e);
+	}, [D]);
+	if (ce) return /* @__PURE__ */ u(r, {
+		onClose: me,
+		width: g,
+		height: _ - v,
+		top: F.current,
+		left: P.current,
+		children: f
+	});
+	let $ = {
+		top: F.current,
+		left: P.current,
+		width: void 0,
+		height: void 0
+	};
+	return y || ($ = {
+		...$,
+		width: `${g}px`,
+		height: `${_}px`
+	}), /* @__PURE__ */ u(n, {
+		className: te("component__container-draggable", j.root),
+		intent: "white",
+		rounded: "none",
+		shadow: "dark",
+		ref: M,
+		style: $,
+		children: /* @__PURE__ */ ee(n.Body, {
+			className: j.cardBody,
+			size: "custom",
+			children: [/* @__PURE__ */ u(a, {
+				intent: w,
+				size: T,
+				collapsed: k,
+				icon: d,
+				title: ie,
+				allowExternal: x,
+				allowClose: b,
+				customActions: S,
+				setCollapsed: A,
+				setExternalWindow: K,
+				onClose: E,
+				onCollapse: O,
+				onMouseDown: pe,
+				onTouchStart: he
+			}), /* @__PURE__ */ u(i, {
+				ref: se,
+				parentRef: C,
+				collapsed: k,
+				onFocus: D,
+				allowResize: y,
+				resizeHandles: oe,
+				minConstraintsX: le,
+				minConstraintsY: ue,
+				width: g,
+				height: _ - v,
+				children: f
+			})]
+		})
+	});
+};
+//#endregion
+export { d as default };

package/dist/components/ContainerDraggable/ContainerDraggable.styles.d.ts

@@ -0,0 +1,35 @@
+export declare const variantKeys: {
+    readonly intent: readonly [];
+    readonly size: readonly [];
+    readonly collapsed: readonly [true, false];
+};
+export declare const STYLES_COMPONENT_NAME = "ContainerDraggable";
+declare const _default: {
+    root: (props?: ({
+        intent?: null | undefined;
+        size?: null | undefined;
+        collapsed?: boolean | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    cardBody: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    header: (props?: ({
+        intent?: null | undefined;
+        collapsed?: boolean | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    headerLabel: (props?: ({
+        intent?: null | undefined;
+        collapsed?: boolean | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    content: (props?: ({
+        intent?: null | undefined;
+        collapsed?: boolean | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    btn: (props?: ({
+        intent?: null | undefined;
+        collapsed?: null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    btnClose: (props?: ({
+        intent?: null | undefined;
+        collapsed?: null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+};
+export default _default;

package/dist/components/ContainerDraggable/ContainerDraggable.styles.js

@@ -0,0 +1,67 @@
+import e from "../../helpers/cvaWrapper.js";
+var t = {
+	root: e("flex flex-col overflow-hidden absolute z-50 rounded-lg bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 shadow-xl shadow-black/10 dark:shadow-black/40", {
+		variants: {
+			intent: {},
+			size: {},
+			collapsed: {
+				false: "",
+				true: ""
+			}
+		},
+		compoundVariants: [],
+		defaultVariants: {}
+	}),
+	cardBody: e("px-2 pb-2"),
+	header: e("px-2 gap-3 flex justify-between items-center select-none", {
+		variants: {
+			intent: {},
+			collapsed: {
+				true: "h-10",
+				false: "h-10 border-b border-gray-200 dark:border-zinc-700"
+			}
+		},
+		compoundVariants: [],
+		defaultVariants: { collapsed: !1 }
+	}),
+	headerLabel: e("flex items-center gap-1.5 truncate grow cursor-move text-sm font-semibold text-zinc-800 dark:text-zinc-200", {
+		variants: {
+			intent: {},
+			collapsed: {
+				true: "",
+				false: ""
+			}
+		},
+		compoundVariants: [],
+		defaultVariants: {}
+	}),
+	content: e("grow", {
+		variants: {
+			intent: {},
+			collapsed: {
+				true: "hidden",
+				false: ""
+			}
+		},
+		compoundVariants: [],
+		defaultVariants: { collapsed: !1 }
+	}),
+	btn: e("h-6 w-6 flex items-center justify-center rounded text-zinc-400 dark:text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-200 hover:bg-gray-100 dark:hover:bg-zinc-700 transition-colors duration-100 cursor-pointer", {
+		variants: {
+			intent: {},
+			collapsed: {}
+		},
+		compoundVariants: [],
+		defaultVariants: {}
+	}),
+	btnClose: e("h-6 w-6 flex items-center justify-center rounded text-red-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950/30 transition-colors duration-100 cursor-pointer", {
+		variants: {
+			intent: {},
+			collapsed: {}
+		},
+		compoundVariants: [],
+		defaultVariants: {}
+	})
+};
+//#endregion
+export { t as default };

package/dist/components/ContainerDraggable/ContainerDraggableContent.d.ts

@@ -0,0 +1,18 @@
+import { default as ContainerDraggableStyles, variantKeys } from './ContainerDraggable.styles';
+import { ResizeHandle } from '../ContainerResizable';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+import { ReactNode, RefObject } from 'react';
+export type ContainerDraggableContentProps = {
+    ref: RefObject<HTMLDivElement>;
+    parentRef?: RefObject<HTMLElement | null>;
+    children: ReactNode;
+    allowResize: boolean;
+    resizeHandles: ResizeHandle[];
+    minConstraintsX: number;
+    minConstraintsY: number;
+    width: number;
+    height: number;
+    onFocus?: (e: MouseEvent | React.MouseEvent | TouchEvent | React.TouchEvent) => void;
+} & useThemeSharedProps<typeof ContainerDraggableStyles, typeof variantKeys>;
+declare const ContainerDraggableContent: ({ ref, className, children, allowResize, intent, size, collapsed, resizeHandles, minConstraintsX, minConstraintsY, width, height, parentRef, onFocus }: ContainerDraggableContentProps) => import("react/jsx-runtime").JSX.Element;
+export default ContainerDraggableContent;

package/dist/components/ContainerDraggable/ContainerDraggableContent.js

@@ -0,0 +1,35 @@
+import e from "../../hooks/useTheme/index.js";
+import t from "../ContainerResizable/index.js";
+import { useCallback as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/ContainerDraggable/ContainerDraggableContent.tsx
+var a = ({ ref: a, className: o, children: s, allowResize: c, intent: l, size: u, collapsed: d, resizeHandles: f, minConstraintsX: p, minConstraintsY: m, width: h, height: g, parentRef: _, onFocus: v }) => {
+	o = e("ContainerDraggable", {
+		className: o,
+		componentKey: "content",
+		variants: {
+			intent: l,
+			size: u,
+			collapsed: d
+		}
+	});
+	let y = n((e) => {
+		d || v?.(e);
+	}, [v, d]);
+	return /* @__PURE__ */ i("div", {
+		ref: a,
+		className: o,
+		onClick: y,
+		children: [!c && s, c && /* @__PURE__ */ r(t, {
+			resizeHandles: f,
+			minConstraintsX: p,
+			minConstraintsY: m,
+			width: h,
+			height: g,
+			parentRef: _,
+			children: s
+		})]
+	});
+};
+//#endregion
+export { a as default };

package/dist/components/ContainerDraggable/ContainerDraggableHeader.d.ts

@@ -0,0 +1,18 @@
+import { default as ContainerDraggableStyles, variantKeys } from './ContainerDraggable.styles';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+export type ContainerDraggableHeaderProps = {
+    icon: ReactNode;
+    title?: ReactNode;
+    customActions: ReactNode[];
+    allowExternal?: boolean;
+    allowClose?: boolean;
+    setCollapsed: Dispatch<SetStateAction<boolean>>;
+    setExternalWindow: Dispatch<SetStateAction<boolean>>;
+    onClose?: (e: MouseEvent | React.MouseEvent) => void;
+    onCollapse?: (collapsed: boolean) => void;
+    onMouseDown: (e: MouseEvent | React.MouseEvent) => void;
+    onTouchStart: (e: TouchEvent | React.TouchEvent) => void;
+} & useThemeSharedProps<typeof ContainerDraggableStyles, typeof variantKeys>;
+declare const ContainerDraggableHeader: ({ className, intent, size, collapsed, icon, title, allowExternal, allowClose, customActions, setCollapsed, setExternalWindow, onClose, onCollapse, onMouseDown, onTouchStart }: ContainerDraggableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default ContainerDraggableHeader;

package/dist/components/ContainerDraggable/ContainerDraggableHeader.js

@@ -0,0 +1,71 @@
+import e from "../../hooks/useTheme/index.js";
+import t from "../Flex/index.js";
+import n from "../Button/index.js";
+import { useCallback as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "clsx";
+//#region src/components/ContainerDraggable/ContainerDraggableHeader.tsx
+var s = ({ className: s, intent: c, size: l, collapsed: u, icon: d, title: f, allowExternal: p = !0, allowClose: m = !0, customActions: h, setCollapsed: g, setExternalWindow: _, onClose: v, onCollapse: y, onMouseDown: b, onTouchStart: x }) => {
+	let S = e("ContainerDraggable", {
+		className: s,
+		componentKey: [
+			"header",
+			"headerLabel",
+			"btn",
+			"btnClose"
+		],
+		variants: {
+			intent: c,
+			size: l,
+			collapsed: u
+		}
+	}), C = r((e) => {
+		e.stopPropagation(), v?.(e);
+	}, [v]), w = r((e) => {
+		e.stopPropagation(), g((e) => (y?.(!e), !e));
+	}, [y, g]), T = r(() => _((e) => !e), [_]);
+	return /* @__PURE__ */ a("div", {
+		className: S.header,
+		children: [/* @__PURE__ */ a("label", {
+			className: S.headerLabel,
+			onMouseDown: b,
+			onTouchStart: x,
+			children: [d, f]
+		}), /* @__PURE__ */ a(t, {
+			items: "center",
+			gap: 2,
+			children: [h, /* @__PURE__ */ a(t, { children: [
+				/* @__PURE__ */ i(n, {
+					intent: "custom",
+					size: "custom",
+					border: "none",
+					items: u ? "center" : "end",
+					className: o("", S.btn),
+					title: "Collapse / Expand",
+					onClick: w,
+					children: /* @__PURE__ */ i(n.Icon, { icon: u ? "far fa-window-maximize" : "fas fa-minus" })
+				}),
+				p && /* @__PURE__ */ i(n, {
+					intent: "custom",
+					size: "custom",
+					border: "none",
+					className: S.btn,
+					title: "External Window",
+					onClick: T,
+					children: /* @__PURE__ */ i(n.Icon, { icon: "fas fa-window-restore" })
+				}),
+				m && /* @__PURE__ */ i(n, {
+					intent: "custom",
+					size: "custom",
+					border: "none",
+					className: S.btnClose,
+					title: "Close",
+					onClick: C,
+					children: /* @__PURE__ */ i(n.Icon, { icon: "fas fa-times" })
+				})
+			] })]
+		})]
+	});
+};
+//#endregion
+export { s as default };

package/dist/components/ContainerDraggable/index.d.ts

@@ -0,0 +1,5 @@
+import { default as ContainerDraggable } from './ContainerDraggable';
+import { default as containerDraggableTheme } from './ContainerDraggable.styles';
+export * from './ContainerDraggable';
+export { containerDraggableTheme };
+export default ContainerDraggable;

package/dist/components/ContainerDraggable/index.js

@@ -0,0 +1,6 @@
+import e from "./ContainerDraggable.js";
+import t from "./ContainerDraggable.styles.js";
+//#region src/components/ContainerDraggable/index.ts
+var n = e;
+//#endregion
+export { t as containerDraggableTheme, n as default };

package/dist/components/ContainerFloating/ContainerFloating.d.ts

@@ -0,0 +1,23 @@
+import { default as ContainerFloatingStyles, variantKeys } from './ContainerFloating.styles';
+import { ContainerFloatingContentProps } from './ContainerFloatingContent';
+import { ContainerFloatingTriggerProps } from './ContainerFloatingTrigger';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+import { ReactNode, RefObject } from 'react';
+export type ContainerFloatingProps = {
+    ref?: RefObject<HTMLDivElement | null>;
+    children?: ReactNode;
+    containerTopOffset?: number;
+    containerLeftOffset?: number;
+    closeOnClick?: boolean;
+    open?: boolean;
+    testId?: string;
+    loading?: boolean;
+    container?: Element | DocumentFragment;
+    onOpenChange?: (open: boolean) => void;
+} & useThemeSharedProps<typeof ContainerFloatingStyles, typeof variantKeys>;
+declare const ContainerFloating: {
+    ({ ref, children, containerTopOffset, containerLeftOffset, open: openProp, disabled, loading, closeOnClick, testId, placement, container, onOpenChange }: ContainerFloatingProps): import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, className, testId, ref, onClick }: ContainerFloatingTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ ref, children, className, placement, testId, ...props }: ContainerFloatingContentProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default ContainerFloating;