@plitzi/plitzi-ui 1.6.2

package/dist/components/Modal/Modal.js

@@ -0,0 +1,48 @@
+import e from "../../hooks/useTheme/index.js";
+import t from "../Card/index.js";
+import { useCallback as n, useEffect as r, useId as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import s from "clsx";
+import { createPortal as c } from "react-dom";
+//#region src/components/Modal/Modal.tsx
+var l = ({ ref: l, className: u, children: d, style: f, animation: p, duration: m = 300, id: h, container: g, open: _, isClosing: v = !1, size: y, onClose: b, ...x }) => {
+	let S = e("Modal", {
+		className: u,
+		componentKey: [
+			"root",
+			"background",
+			"card"
+		]
+	}), C = i(), w = n((e) => void b?.(e), [b]), T = n(() => p && v && void b?.(), [
+		p,
+		v,
+		b
+	]);
+	if (r(() => (_ && document.body.classList.add("modal-open"), () => {
+		_ && document.body.classList.remove("modal-open");
+	}), [_]), _) return c(/* @__PURE__ */ o("div", {
+		ref: l,
+		"data-id": h ?? C,
+		className: S.root,
+		...x,
+		children: [/* @__PURE__ */ a("div", {
+			className: S.background,
+			onClick: w
+		}), /* @__PURE__ */ a(t, {
+			className: s(S.card, { [`modal--${p}-${v ? "leave" : "enter"}`]: p }),
+			intent: "modal",
+			size: y,
+			closeable: !0,
+			onClose: w,
+			onAnimationEnd: T,
+			style: {
+				...f,
+				animationDuration: `${m}ms`
+			},
+			children: d
+		})]
+	}), g ?? document.body);
+};
+l.Header = t.Header, l.HeaderIcon = t.HeaderIcon, l.Body = t.Body, l.Footer = t.Footer;
+//#endregion
+export { l as default };

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

@@ -0,0 +1,10 @@
+export declare const variantKeys: {
+    readonly size: readonly ["md", "sm", "xs", "custom"];
+};
+export declare const STYLES_COMPONENT_NAME = "Modal";
+declare const _default: {
+    root: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    background: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    card: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+};
+export default _default;

package/dist/components/Modal/Modal.styles.js

@@ -0,0 +1,8 @@
+import e from "../../helpers/cvaWrapper.js";
+var t = {
+	root: e("fixed inset-0 flex items-center justify-center z-601 p-4"),
+	background: e("bg-black/60 dark:bg-black/70 w-full h-full absolute inset-0 z-602 backdrop-blur-sm"),
+	card: e("z-603 w-full max-w-lg")
+};
+//#endregion
+export { t as default };

package/dist/components/Modal/ModalContext.d.ts

@@ -0,0 +1,13 @@
+import { ModalProps } from './Modal';
+import { ReactNode } from 'react';
+export type ProviderModalSlot<TValue = unknown> = ({ onSubmit, onClose }: {
+    onSubmit: (e?: MouseEvent | React.MouseEvent, value?: TValue) => void;
+    onClose: (e?: MouseEvent | React.MouseEvent) => void;
+}) => ReactNode;
+export type ProviderModalProps = Omit<ModalProps, 'children' | 'onClose' | 'isClosing' | 'open' | 'id'>;
+export type ModalContextValue = {
+    showModal: <TValue = unknown>(header: ReactNode | ProviderModalSlot<TValue>, body: ReactNode | ProviderModalSlot<TValue>, footer?: ReactNode | ProviderModalSlot<TValue>, settings?: ProviderModalProps, stopPropagation?: boolean) => Promise<TValue | undefined>;
+    showDialog: <TValue = unknown>(header: ReactNode | ProviderModalSlot<TValue>, body: ReactNode | ProviderModalSlot<TValue>, footer?: ReactNode | ProviderModalSlot<TValue>, settings?: ProviderModalProps, successValue?: TValue) => Promise<TValue | undefined>;
+};
+declare const ModalContext: import('react').Context<ModalContextValue>;
+export default ModalContext;

package/dist/components/Modal/ModalContext.js

@@ -0,0 +1,8 @@
+import { createContext as e } from "react";
+var t = e({
+	showModal: () => {},
+	showDialog: () => {}
+});
+t.displayName = "ModalContext";
+//#endregion
+export { t as default };

package/dist/components/Modal/ModalProvider.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type ModalProviderProps = {
+    children?: ReactNode;
+};
+declare const ModalProvider: ({ children }: ModalProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default ModalProvider;

package/dist/components/Modal/ModalProvider.js

@@ -0,0 +1,70 @@
+import { omit as e } from "../../helpers/lodash/omit.js";
+import t from "../Button/index.js";
+import n from "./Modal.js";
+import r from "./ModalContext.js";
+import { useCallback as i, useMemo as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/Modal/ModalProvider.tsx
+var l = ({ children: l }) => {
+	let [u, d] = o({}), f = i((t, n, r, i = "cancel", a) => (o, s) => {
+		o && a && (o.stopPropagation(), o.preventDefault()), i === "cancel" && (s = void 0), n && n.animation && n.duration ? (d((e) => ({
+			...e,
+			[t]: {
+				...e[t],
+				isClosing: !0
+			}
+		})), setTimeout(() => {
+			d((n) => e(n, [t])), r?.(s);
+		}, n.duration)) : (d((n) => e(n, [t])), r?.(s));
+	}, []), p = i((e, t, n, r, i = !0) => {
+		let a = (/* @__PURE__ */ new Date()).getTime().toString();
+		return new Promise((o) => {
+			let s = f(a, r, o, "cancel", i), c = f(a, r, o, "submit", i);
+			typeof e == "function" && (e = e({
+				onSubmit: c,
+				onClose: s
+			})), typeof t == "function" && (t = t({
+				onSubmit: c,
+				onClose: s
+			})), typeof n == "function" && (n = n({
+				onSubmit: c,
+				onClose: s
+			})), d((i) => ({
+				...i,
+				[a]: {
+					...r,
+					id: a,
+					children: [
+						e,
+						t,
+						n
+					].filter(Boolean),
+					onClose: c,
+					open: !0,
+					isClosing: !1
+				}
+			}));
+		});
+	}, [f]), m = i((e, r, i, a, o = !0) => (i ||= ({ onSubmit: e, onClose: r }) => /* @__PURE__ */ c(n.Footer, {
+		gap: 3,
+		justify: "end",
+		children: [/* @__PURE__ */ s(t, {
+			onClick: (t) => e(t, o),
+			size: a?.size,
+			children: "Accept"
+		}), /* @__PURE__ */ s(t, {
+			onClick: r,
+			size: a?.size,
+			children: "Cancel"
+		})]
+	}), p(e, r, i, a)), [p]);
+	return /* @__PURE__ */ c(r, {
+		value: a(() => ({
+			showModal: p,
+			showDialog: m
+		}), [p, m]),
+		children: [l, Object.values(u).map((e, t) => /* @__PURE__ */ s(n, { ...e }, e?.id ?? t))]
+	});
+};
+//#endregion
+export { l as default };

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

@@ -0,0 +1,11 @@
+import { default as Modal } from './Modal';
+import { default as modalTheme } from './Modal.styles';
+import { default as ModalContext } from './ModalContext';
+import { default as ModalProvider } from './ModalProvider';
+import { default as useModal } from './useModal';
+export * from './Modal';
+export * from './useModal';
+export * from './ModalProvider';
+export * from './ModalContext';
+export { useModal, ModalProvider, ModalContext, modalTheme };
+export default Modal;

package/dist/components/Modal/index.js

@@ -0,0 +1,9 @@
+import e from "./Modal.js";
+import t from "./Modal.styles.js";
+import n from "./ModalContext.js";
+import r from "./ModalProvider.js";
+import i from "./useModal.js";
+//#region src/components/Modal/index.ts
+var a = e;
+//#endregion
+export { n as ModalContext, r as ModalProvider, a as default, t as modalTheme, i as useModal };

package/dist/components/Modal/useModal.d.ts

@@ -0,0 +1,3 @@
+import { ModalContextValue } from './ModalContext';
+declare const useModal: () => ModalContextValue;
+export default useModal;

package/dist/components/Modal/useModal.js

@@ -0,0 +1,10 @@
+import e from "./ModalContext.js";
+import { use as t } from "react";
+//#region src/components/Modal/useModal.ts
+var n = () => {
+	let n = t(e);
+	if (!n) throw Error("ModalContext value is undefined. Make sure you use the ModalProvider before using the hook.");
+	return n;
+};
+//#endregion
+export { n as default };

package/dist/components/Popup/Popup.d.ts

@@ -0,0 +1,30 @@
+import { default as PopupStyles, variantKeys } from './Popup.styles';
+import { ResizeHandle } from '../ContainerResizable';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+import { ReactNode, RefObject } from 'react';
+export type PopupPlacement = 'right' | 'left' | 'floating';
+export type PopupProps = {
+    children?: ReactNode;
+    parentRef?: RefObject<HTMLElement | null>;
+    id?: string;
+    width?: number;
+    height?: number;
+    icon?: ReactNode;
+    title?: ReactNode;
+    allowResize?: boolean;
+    allowLeftSide?: boolean;
+    allowRightSide?: boolean;
+    allowClose?: boolean;
+    allowExternal?: boolean;
+    resizeHandles?: ResizeHandle[];
+    limitMode?: 'window' | 'parent' | 'none';
+    placementPopup?: (popupId: string, placement: PopupPlacement) => void;
+    onFocus?: (popupId: string) => void;
+    removePopup?: (popupId: string) => void;
+} & useThemeSharedProps<typeof PopupStyles, typeof variantKeys>;
+export type PopupSettings = {
+    placement?: PopupPlacement;
+    allowFloatingSide?: boolean;
+} & Omit<PopupProps, 'id'>;
+declare const Popup: ({ className, id, children, width, height, icon, title, allowResize, allowLeftSide, allowRightSide, allowClose, allowExternal, resizeHandles, limitMode, parentRef, placementPopup, onFocus, removePopup }: PopupProps) => import("react/jsx-runtime").JSX.Element;
+export default Popup;

package/dist/components/Popup/Popup.js

@@ -0,0 +1,66 @@
+import e from "../../hooks/useTheme/index.js";
+import t from "../Icon/index.js";
+import n from "../Button/index.js";
+import r from "../ContainerDraggable/index.js";
+import { useCallback as i, useMemo as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/Popup/Popup.tsx
+var s = ["s"], c = ({ className: c, id: l = "", children: u, width: d = 300, height: f = 550, icon: p, title: m = "", allowResize: h = !0, allowLeftSide: g = !0, allowRightSide: _ = !0, allowClose: v = !0, allowExternal: y = !0, resizeHandles: b = s, limitMode: x = "window", parentRef: S, placementPopup: C, onFocus: w, removePopup: T }) => {
+	let E = e("Popup", {
+		className: c,
+		componentKey: ["root", "btn"]
+	}), D = a(() => typeof p == "string" ? /* @__PURE__ */ o(t, { className: p }) : p, [p]), { x: O, y: k } = a(() => ({
+		x: (window.innerWidth - d) / 2,
+		y: (window.innerHeight - f) / 2
+	}), [d, f]), A = i((e) => {
+		e.stopPropagation(), e.preventDefault(), C?.(l, "left");
+	}, [C, l]), j = i((e) => {
+		e.stopPropagation(), e.preventDefault(), C?.(l, "right");
+	}, [C, l]), M = i(() => w?.(l), [l, w]), N = i(() => T?.(l), [l, T]), P = a(() => {
+		let e = [];
+		return g && e.push(/* @__PURE__ */ o(n, {
+			intent: "custom",
+			size: "custom",
+			border: "none",
+			className: E.btn,
+			title: "Left Sidebar",
+			onClick: A,
+			children: /* @__PURE__ */ o(n.Icon, { icon: "fa-solid fa-angles-left" })
+		}, "0")), _ && e.push(/* @__PURE__ */ o(n, {
+			intent: "custom",
+			size: "custom",
+			border: "none",
+			className: E.btn,
+			title: "Right Sidebar",
+			onClick: j,
+			children: /* @__PURE__ */ o(n.Icon, { icon: "fa-solid fa-angles-right" })
+		}, "1")), e;
+	}, [
+		g,
+		_,
+		A,
+		j,
+		E.btn
+	]);
+	return /* @__PURE__ */ o(r, {
+		parentRef: S,
+		className: E.root,
+		icon: D,
+		title: m,
+		width: d,
+		height: f,
+		x: O,
+		y: k,
+		onClose: N,
+		onFocus: M,
+		allowResize: h,
+		allowExternal: y,
+		allowClose: v,
+		resizeHandles: b,
+		customActions: P,
+		limitMode: x,
+		children: u
+	}, l);
+};
+//#endregion
+export { c as default };

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

@@ -0,0 +1,25 @@
+export declare const variantKeys: {
+    readonly placement: readonly ["left", "right", "floating"];
+    readonly size: readonly ["xs", "md", "sm", "lg", "custom"];
+    readonly expanded: readonly [true, false];
+};
+export declare const STYLES_COMPONENT_NAME = "Popup";
+declare const _default: {
+    root: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    btn: (props?: ({
+        size?: "xs" | "md" | "sm" | "lg" | "custom" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    sidePanelRoot: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    sidePanel: (props?: ({
+        placement?: "left" | "right" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    sidePanelContainer: (props?: ({
+        placement?: "left" | "right" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    sidePanelItem: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    sidePanelItemHeader: (props?: ({
+        expanded?: boolean | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    sidebar: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+};
+export default _default;

package/dist/components/Popup/Popup.styles.js

@@ -0,0 +1,44 @@
+import e from "../../helpers/cvaWrapper.js";
+var t = {
+	root: e("pointer-events-auto"),
+	btn: e("", {
+		variants: { size: {
+			lg: "h-6 w-6",
+			md: "h-5 w-5",
+			sm: "h-4 w-4",
+			xs: "h-3 w-3",
+			custom: ""
+		} },
+		compoundVariants: [],
+		defaultVariants: { size: "md" }
+	}),
+	sidePanelRoot: e(""),
+	sidePanel: e("h-full flex grow bg-white dark:bg-zinc-900", {
+		variants: { placement: {
+			left: "",
+			right: "flex-row-reverse"
+		} },
+		compoundVariants: [],
+		defaultVariants: { placement: "right" }
+	}),
+	sidePanelContainer: e("flex flex-col grow", {
+		variants: { placement: {
+			left: "min-w-0 overflow-y-auto",
+			right: "min-w-0 overflow-y-auto"
+		} },
+		compoundVariants: [],
+		defaultVariants: { placement: "right" }
+	}),
+	sidePanelItem: e(""),
+	sidePanelItemHeader: e("border-gray-300 dark:border-zinc-700 border-solid mx-1.5 px-0", {
+		variants: { expanded: {
+			true: "border-b",
+			false: ""
+		} },
+		compoundVariants: [],
+		defaultVariants: { expanded: !1 }
+	}),
+	sidebar: e("")
+};
+//#endregion
+export { t as default };

package/dist/components/Popup/PopupContext.d.ts

@@ -0,0 +1,21 @@
+import { default as PopupManager } from './helpers/PopupManager';
+import { PopupSettings } from './Popup';
+import { PopupInstance } from './PopupProvider';
+import { ContainerDraggableProps } from '../ContainerDraggable';
+import { ReactNode } from 'react';
+export type PopupContextValue = {
+    popupManager: InstanceType<typeof PopupManager>;
+    popups: PopupInstance[];
+    popupIds: string[];
+    popupActiveIds: string[];
+    limitMode?: ContainerDraggableProps['limitMode'];
+    multi: boolean;
+    multiExpanded: boolean;
+    addPopup: (id: string, component: ReactNode, settings?: PopupSettings) => void;
+    existsPopup: (popupId: string) => boolean;
+    removePopup: (popupId: string) => void;
+};
+declare const PopupContextFloating: import('react').Context<PopupContextValue>;
+declare const PopupContextLeft: import('react').Context<PopupContextValue>;
+declare const PopupContextRight: import('react').Context<PopupContextValue>;
+export { PopupContextFloating, PopupContextLeft, PopupContextRight };

package/dist/components/Popup/PopupContext.js

@@ -0,0 +1,21 @@
+import { createContext as e } from "react";
+//#region src/components/Popup/PopupContext.ts
+var t = {
+	popupManager: void 0,
+	popups: [],
+	popupIds: [],
+	popupActiveIds: [],
+	limitMode: "window",
+	multi: !1,
+	multiExpanded: !1,
+	addPopup: () => {},
+	existsPopup: () => !1,
+	removePopup: () => {}
+}, n = e(t);
+n.displayName = "PopupContextFloating";
+var r = e(t);
+r.displayName = "PopupContextLeft";
+var i = e(t);
+i.displayName = "PopupContextRight";
+//#endregion
+export { n as PopupContextFloating, r as PopupContextLeft, i as PopupContextRight };

package/dist/components/Popup/PopupFloatingArea.d.ts

@@ -0,0 +1,5 @@
+export type PopupFloatingAreaProps = {
+    className?: string;
+};
+declare const _default: import('react').MemoExoticComponent<({ className }: PopupFloatingAreaProps) => import("react/jsx-runtime").JSX.Element | undefined>;
+export default _default;

package/dist/components/Popup/PopupFloatingArea.js

@@ -0,0 +1,27 @@
+import e from "../ContainerRoot/ContainerRootContext.js";
+import t from "./hooks/usePopup.js";
+import n from "./Popup.js";
+import { createElement as r, memo as i, use as a, useCallback as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+var c = i(({ className: i = "" }) => {
+	let { rootRef: c } = a(e), { popupManager: l, popups: u, removePopup: d, limitMode: f } = t("floating"), p = o((e, t) => l.move(e, void 0, t), [l]), m = o((e) => l.focusFloating(e), [l]);
+	if (u.length) return /* @__PURE__ */ s("div", {
+		className: i,
+		children: u.map((e) => {
+			let { title: t } = e.settings;
+			return /* @__PURE__ */ r(n, {
+				...e.settings,
+				key: e.id,
+				id: e.id,
+				title: t,
+				parentRef: c,
+				limitMode: f,
+				placementPopup: p,
+				onFocus: m,
+				removePopup: d
+			}, e.component);
+		})
+	});
+});
+//#endregion
+export { c as default };

package/dist/components/Popup/PopupProvider.d.ts

@@ -0,0 +1,41 @@
+import { PopupUpdateState } from './helpers/PopupManager';
+import { PopupPlacement, PopupSettings } from './Popup';
+import { default as PopupStyles, variantKeys } from './Popup.styles';
+import { AccordionProps } from '../Accordion';
+import { ContainerDraggableProps } from '../ContainerDraggable';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+import { ReactNode } from 'react';
+export type PopupInstance = {
+    id: string;
+    component: ReactNode;
+    active: boolean;
+    placementSettings?: Partial<Record<PopupPlacement, {
+        position?: number;
+        multi?: boolean;
+        minSize?: number;
+        maxSize?: number;
+    }>>;
+    size?: AccordionProps['size'];
+    settings: PopupSettings;
+};
+export type Popups = Record<PopupPlacement, PopupInstance[]>;
+export type PopupProviderProps = {
+    children?: ReactNode;
+    floatingClassName?: string;
+    floatingFixedArea?: boolean;
+    renderLeftPopup?: boolean;
+    renderRightPopup?: boolean;
+    renderFloatingPopup?: boolean;
+    multi?: boolean;
+    multiExpanded?: boolean;
+    canHide?: boolean;
+    popups?: Popups;
+    limitMode?: ContainerDraggableProps['limitMode'];
+    leftMinWidth?: number;
+    leftMaxWidth?: number;
+    rightMinWidth?: number;
+    rightMaxWidth?: number;
+    onChange?: (placement: PopupPlacement, value: PopupUpdateState, fullValue: Popups) => void;
+} & useThemeSharedProps<typeof PopupStyles, typeof variantKeys>;
+declare const PopupProvider: ({ children, floatingClassName, floatingFixedArea, renderLeftPopup, renderRightPopup, renderFloatingPopup, multi, multiExpanded, canHide, popups, limitMode, size, leftMinWidth, leftMaxWidth, rightMinWidth, rightMaxWidth, onChange }: PopupProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default PopupProvider;

package/dist/components/Popup/PopupProvider.js

@@ -0,0 +1,117 @@
+import e from "../../hooks/useDidUpdateEffect/index.js";
+import { PopupContextFloating as t, PopupContextLeft as n, PopupContextRight as r } from "./PopupContext.js";
+import i from "./components/PopupSidePanel/index.js";
+import a from "./helpers/PopupManager.js";
+import o from "./PopupFloatingArea.js";
+import { useCallback as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import m from "clsx";
+//#region src/components/Popup/PopupProvider.tsx
+var h = ({ children: h, floatingClassName: g = "h-screen w-screen", floatingFixedArea: _ = !0, renderLeftPopup: v = !0, renderRightPopup: y = !0, renderFloatingPopup: b = !0, multi: x = !1, multiExpanded: S = !1, canHide: C = !0, popups: w, limitMode: T = "window", size: E, leftMinWidth: D, leftMaxWidth: O, rightMinWidth: k, rightMaxWidth: A, onChange: j }) => {
+	let [M, N] = d(!1), [, P] = d(0), F = l(() => new a([
+		"left",
+		"right",
+		"floating"
+	], w, { multi: x }), [x]), I = u(j);
+	I.current = j, e(() => {
+		w && F.resync(w);
+	}, [w]), c(() => (N(!0), F.onUpdate((e, t, n) => {
+		P(t), I.current?.(e, n, F.getAll());
+	})), [F]);
+	let L = s((e, t, n = {}, r = !0) => {
+		n.placement && F.add(n.placement, {
+			id: e,
+			component: t,
+			active: r,
+			settings: n
+		});
+	}, [F]), R = s((e) => {
+		F.getPlacement(e) && F.remove(e);
+	}, [F]), z = s((e) => F.exists(e), [F]);
+	return /* @__PURE__ */ f(t, {
+		value: l(() => ({
+			popupManager: F,
+			multi: x,
+			multiExpanded: S,
+			popups: F.get("floating"),
+			popupIds: F.get("floating").map((e) => e.id),
+			popupActiveIds: F.get("floating").filter((e) => e.active).map((e) => e.id),
+			limitMode: T,
+			addPopup: L,
+			existsPopup: z,
+			removePopup: R
+		}), [
+			L,
+			z,
+			R,
+			T,
+			x,
+			S,
+			F.lastUpdate.floating
+		]),
+		children: /* @__PURE__ */ f(n, {
+			value: l(() => ({
+				popupManager: F,
+				multi: x,
+				multiExpanded: S,
+				popups: F.get("left"),
+				popupIds: F.get("left").map((e) => e.id),
+				popupActiveIds: F.get("left").filter((e) => e.active).map((e) => e.id),
+				limitMode: T,
+				addPopup: L,
+				existsPopup: z,
+				removePopup: R
+			}), [
+				L,
+				z,
+				R,
+				T,
+				x,
+				S,
+				F.lastUpdate.left
+			]),
+			children: /* @__PURE__ */ p(r, {
+				value: l(() => ({
+					popupManager: F,
+					multi: x,
+					multiExpanded: S,
+					popups: F.get("right"),
+					popupIds: F.get("right").map((e) => e.id),
+					popupActiveIds: F.get("right").filter((e) => e.active).map((e) => e.id),
+					limitMode: T,
+					addPopup: L,
+					existsPopup: z,
+					removePopup: R
+				}), [
+					L,
+					z,
+					R,
+					T,
+					x,
+					S,
+					F.lastUpdate.right
+				]),
+				children: [
+					v && !!F.getCount("left") && /* @__PURE__ */ f(i, {
+						placement: "left",
+						placementTabs: "left",
+						canHide: C,
+						size: E,
+						minWidth: D,
+						maxWidth: O
+					}),
+					M && h,
+					b && !!F.getCount("floating") && /* @__PURE__ */ f(o, { className: m("pr-20 z-50 flex justify-end items-end pointer-events-none overflow-visible", { "fixed top-0 left-0": _ }, g) }),
+					y && !!F.getCount("right") && /* @__PURE__ */ f(i, {
+						canHide: C,
+						size: E,
+						minWidth: k,
+						maxWidth: A
+					})
+				]
+			})
+		})
+	});
+};
+//#endregion
+export { h as default };

package/dist/components/Popup/PopupSidebar.d.ts

@@ -0,0 +1,14 @@
+import { default as PopupStyles, variantKeys } from './Popup.styles';
+import { SidebarProps } from '../Sidebar';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+export type PopupSidebarProps = {
+    placement?: 'left' | 'right';
+    canHide?: boolean;
+    exclude?: string[];
+    separatorsBefore?: string[];
+} & Omit<SidebarProps, 'placement' | 'multi'> & useThemeSharedProps<typeof PopupStyles, Omit<typeof variantKeys, 'placement'>>;
+declare const _default: import('react').MemoExoticComponent<{
+    ({ className, value, canEmpty, canHide, placement, exclude, separatorsBefore, border, padding, size, onChange }: PopupSidebarProps): import("react/jsx-runtime").JSX.Element | undefined;
+    Icon: ({ children, id, className, active, detatched, size, onClick, ...props }: import('../Sidebar/SidebarIcon').SidebarIconProps) => import("react/jsx-runtime").JSX.Element;
+}>;
+export default _default;