@plitzi/plitzi-ui 1.6.2

package/dist/components/TextArea/TextArea.styles.js

@@ -0,0 +1,61 @@
+import e from "../../helpers/cvaWrapper.js";
+var t = {
+	input: e("p-0 border-0 outline-none focus:ring-0 w-full bg-transparent text-zinc-900 placeholder:text-zinc-400 dark:text-zinc-200 dark:placeholder:text-zinc-500", {
+		variants: {
+			intent: {
+				primary: "",
+				custom: ""
+			},
+			disabled: {
+				true: "cursor-not-allowed",
+				false: ""
+			},
+			error: {
+				true: "",
+				false: ""
+			},
+			size: {
+				md: "",
+				sm: "text-sm",
+				xs: "text-xs",
+				custom: ""
+			}
+		},
+		compoundVariants: [],
+		defaultVariants: {
+			intent: "primary",
+			size: "md",
+			disabled: !1,
+			error: !1
+		}
+	}),
+	iconFloatingContainer: e("", {
+		variants: {
+			error: {
+				true: "items-start!",
+				false: ""
+			},
+			size: {
+				md: "py-1.5",
+				sm: "py-1",
+				xs: "py-0.5",
+				custom: ""
+			}
+		},
+		compoundVariants: [],
+		defaultVariants: {
+			size: "md",
+			error: !1
+		}
+	}),
+	inputContainer: e("", {
+		variants: { error: {
+			true: "items-start!",
+			false: ""
+		} },
+		compoundVariants: [],
+		defaultVariants: { error: !1 }
+	})
+};
+//#endregion
+export { t as default };

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

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

package/dist/components/TextArea/index.js

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

package/dist/components/Toast/Assets/index.scss

@@ -0,0 +1,7 @@
+@mixin styles {
+  @import 'react-toastify/dist/ReactToastify.css';
+
+  .Toastify__toast-container.toast-container--absolute {
+    position: absolute;
+  }
+}

package/dist/components/Toast/ToastContext.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { Theme, ToastIcon, ToastPosition, TypeOptions } from 'react-toastify';
+export type ToastContextValue = {
+    addToast: (content: ReactNode, settings?: {
+        appeareance?: TypeOptions;
+        placement?: ToastPosition;
+        autoDismiss?: boolean;
+        autoDismissTimeout?: number;
+        theme?: Theme;
+        icon?: ToastIcon;
+    }) => void;
+};
+declare const ToastContext: import('react').Context<ToastContextValue>;
+export default ToastContext;

package/dist/components/Toast/ToastContext.js

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

package/dist/components/Toast/ToastProvider.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { Theme, ToastIcon, ToastPosition, TypeOptions } from 'react-toastify';
+export type { ToastPosition, ToastIcon, Theme as ToastTheme, TypeOptions as ToastTypeOptions };
+export type ToastProviderProps = {
+    children?: ReactNode;
+    classNameToast?: string;
+    classNameContainer?: string;
+    isFixed?: boolean;
+    containerId?: string;
+};
+declare const ToastProvider: ({ children, classNameToast, classNameContainer, isFixed, containerId }: ToastProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default ToastProvider;

package/dist/components/Toast/ToastProvider.js

@@ -0,0 +1,34 @@
+import e from "./ToastContext.js";
+import { useCallback as t, useMemo as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import a from "clsx";
+import { ToastContainer as o, toast as s } from "react-toastify";
+//#region src/components/Toast/ToastProvider.tsx
+var c = ({ children: c, classNameToast: l = "", classNameContainer: u = "", isFixed: d = !0, containerId: f }) => {
+	let p = n(() => f ?? crypto.randomUUID(), [f]), m = t(async (e, t = {}) => {
+		let { appeareance: n = "default", placement: r = "top-right", autoDismiss: i = !0, autoDismissTimeout: a = 5e3, theme: o = "light", icon: c } = t, u = s;
+		n && n !== "default" && s[n] && (u = s[n]), u(e, {
+			className: l,
+			position: r,
+			autoClose: i ? a : !1,
+			hideProgressBar: !i,
+			closeOnClick: !0,
+			pauseOnHover: !0,
+			draggable: !0,
+			progress: void 0,
+			theme: o,
+			icon: c,
+			containerId: p
+		});
+	}, [l, p]);
+	return /* @__PURE__ */ i(e, {
+		value: n(() => ({ addToast: m }), [m]),
+		children: [/* @__PURE__ */ r(o, {
+			containerId: p,
+			pauseOnFocusLoss: !1,
+			className: a(u, { "toast-container--absolute": !d })
+		}), c]
+	});
+};
+//#endregion
+export { c as default };

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

@@ -0,0 +1,7 @@
+import { default as ToastContext } from './ToastContext';
+import { default as ToastProvider } from './ToastProvider';
+import { default as useToast } from './useToast';
+export * from './ToastContext';
+export * from './ToastProvider';
+export * from './useToast';
+export { useToast, ToastProvider, ToastContext };

package/dist/components/Toast/index.js

@@ -0,0 +1,4 @@
+import e from "./ToastContext.js";
+import t from "./ToastProvider.js";
+import n from "./useToast.js";
+export { e as ToastContext, t as ToastProvider, n as useToast };

package/dist/components/Toast/useToast.d.ts

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

package/dist/components/Toast/useToast.js

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

package/dist/components/Toast/utils.d.ts

@@ -0,0 +1 @@
+export declare const generateUEID: () => string;

package/dist/components/Tree/Tree.d.ts

@@ -0,0 +1,60 @@
+import { default as TreeStyles, variantKeys } from './Tree.styles';
+import { ItemControlsProps } from './TreeNode';
+import { DropPosition, TreeItem } from './utils';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+import { DragEvent, HTMLAttributes, ReactNode } from 'react';
+export type { TreeItem, ItemControlsProps, DropPosition };
+export type TreeChangeState = {
+    action: 'itemsChange';
+    data: TreeItem[];
+} | {
+    action: 'itemsOpened';
+    data: {
+        [key: string]: boolean;
+    };
+} | {
+    action: 'itemChanged';
+    data: {
+        items: TreeItem[];
+        item: TreeItem;
+    };
+} | {
+    action: 'itemHovered';
+    data: string | undefined;
+} | {
+    action: 'itemDragged';
+    data: {
+        id: string;
+        toId: string;
+        dropPosition: DropPosition;
+        items: TreeItem[];
+        event: DragEvent;
+    };
+} | {
+    action: 'externalItemDragged';
+    data: {
+        toId: string;
+        dropPosition: DropPosition;
+        event: DragEvent;
+    };
+} | {
+    action: 'itemSelected';
+    data: string | undefined;
+} | {
+    action: 'isDragging';
+    data: boolean;
+};
+export type TreeProps = {
+    itemControls?: ReactNode;
+    testId?: string;
+    itemsOpened?: {
+        [key: string]: boolean;
+    };
+    itemHovered?: string;
+    itemSelected?: string;
+    items: TreeItem[];
+    onChange?: (state: TreeChangeState) => void;
+    isDragAllowed?: (id: string, dropPosition: DropPosition, parentId?: string) => boolean;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & useThemeSharedProps<typeof TreeStyles, typeof variantKeys>;
+declare const Tree: ({ itemControls, testId, className, items, itemsOpened, itemHovered, itemSelected, intent, size, onChange, isDragAllowed, ...divProps }: TreeProps) => import("react/jsx-runtime").JSX.Element;
+export default Tree;

package/dist/components/Tree/Tree.js

@@ -0,0 +1,161 @@
+import { get as e } from "../../helpers/lodash/get.js";
+import { set as t } from "../../helpers/lodash/set.js";
+import n from "../../hooks/useTheme/index.js";
+import { defaultDragMetadata as r, getFlatItems as i, hasParentSelected as a, moveNode as o, setClosedMultiple as s, setOpenedMultiple as c } from "./utils.js";
+import l from "./TreeNode.js";
+import { useCallback as u, useEffect as d, useMemo as f, useRef as p } from "react";
+import { jsx as m } from "react/jsx-runtime";
+import h from "clsx";
+import { produce as g } from "immer";
+//#region src/components/Tree/Tree.tsx
+var _ = ({ itemControls: _, testId: v, className: y, items: b = [], itemsOpened: x, itemHovered: S, itemSelected: C, intent: w, size: T, onChange: E, isDragAllowed: D, ...O }) => {
+	y = n("Tree", {
+		className: y,
+		componentKey: "root",
+		variants: {
+			intent: w,
+			size: T
+		}
+	});
+	let k = p(r), A = f(() => i(b), [b]), j = f(() => Object.values(A).filter((e) => !!e && (!e.parentId || !!x?.[e.parentId])), [A, x]), M = u((n, r) => {
+		let i = A[n];
+		if (!i) return;
+		let a = g(b, (e) => {
+			t(e, `${i.path}.label`, r);
+		});
+		E?.({
+			action: "itemChanged",
+			data: {
+				items: a,
+				item: e(a, i.path)
+			}
+		});
+	}, [
+		A,
+		b,
+		E
+	]), N = u((e) => E?.({
+		action: "itemHovered",
+		data: e
+	}), [E]), P = u((e) => E?.({
+		action: "itemSelected",
+		data: e
+	}), [E]), F = u((e, t) => {
+		let n;
+		if (n = t ? {
+			...x,
+			[e]: t
+		} : {
+			...x,
+			...s(e, A)
+		}, E?.({
+			action: "itemsOpened",
+			data: n
+		}), !t && C) {
+			let e = A[C];
+			e && e.parentId && !n[e.parentId] && E?.({
+				action: "itemSelected",
+				data: void 0
+			});
+		}
+	}, [
+		A,
+		E,
+		x,
+		C
+	]);
+	d(() => {
+		if (!C) return;
+		let e = A[C];
+		e && (e.items && !x?.[e.id] || e.parentId && !x?.[e.parentId]) && E?.({
+			action: "itemsOpened",
+			data: {
+				...x,
+				...c(C, A)
+			}
+		});
+	}, [C]);
+	let I = u((e, t = !0) => {
+		if (t) {
+			k.current = {
+				...k.current,
+				...e
+			};
+			return;
+		}
+		k.current = e;
+	}, []), L = u(() => {
+		k.current = r;
+	}, []), R = u(() => k.current, []), z = u((e) => {
+		e.stopPropagation(), E?.({
+			action: "isDragging",
+			data: !0
+		});
+	}, [E]), B = u((e) => {
+		e.stopPropagation(), E?.({
+			action: "isDragging",
+			data: !1
+		});
+	}, [E]), V = u((e, t, n, r) => {
+		let i = o(t, n, r, b, A);
+		i && t ? E?.({
+			action: "itemDragged",
+			data: {
+				id: t,
+				toId: n,
+				dropPosition: r,
+				items: i,
+				event: e
+			}
+		}) : E?.({
+			action: "externalItemDragged",
+			data: {
+				toId: n,
+				dropPosition: r,
+				event: e
+			}
+		});
+	}, [
+		A,
+		b,
+		E
+	]);
+	return /* @__PURE__ */ m("div", {
+		className: h("tree", y),
+		tabIndex: -1,
+		"data-testid": v,
+		onDragStart: z,
+		onDragEnd: B,
+		...O,
+		children: j.map((e, t) => {
+			let { id: n, label: r, level: i, parentId: o, icon: s = "fa-solid fa-shapes" } = e;
+			return /* @__PURE__ */ m(l, {
+				id: n,
+				parentNodeId: o,
+				label: r,
+				level: i,
+				isOpen: x?.[n],
+				isParent: !!e.items,
+				canDragDrop: !!o,
+				setOpened: F,
+				hovered: S === n,
+				parentSelected: !!C && a(n, C, A),
+				selected: C === n,
+				intent: w,
+				size: T,
+				controls: _,
+				icon: s,
+				setDragMetadata: I,
+				resetDragMetadata: L,
+				getDragMetadata: R,
+				onHover: N,
+				onSelect: P,
+				onDrop: V,
+				onChange: M,
+				isDragAllowed: D
+			}, `${t}-${n}`);
+		})
+	});
+};
+//#endregion
+export { _ as default };

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

@@ -0,0 +1,39 @@
+export declare const variantKeys: {
+    readonly intent: readonly ["primary", "secondary"];
+    readonly size: readonly ["md", "sm", "xs", "custom"];
+    readonly hovered: readonly [true, false];
+    readonly selected: readonly [true, false];
+    readonly parentSelected: readonly [true, false];
+    readonly dragAllowed: readonly [true, false];
+    readonly isOpen: readonly [true, false];
+    readonly dropPosition: readonly ["top", "bottom", "inside"];
+};
+export declare const STYLES_COMPONENT_NAME = "Tree";
+declare const _default: {
+    root: (props?: ({
+        intent?: "primary" | null | undefined;
+        size?: "xs" | "md" | "sm" | "custom" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    item: (props?: ({
+        intent?: "primary" | "secondary" | null | undefined;
+        selected?: boolean | null | undefined;
+        hovered?: boolean | null | undefined;
+        parentSelected?: boolean | null | undefined;
+        size?: "xs" | "md" | "sm" | "custom" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    containerEditable: (props?: ({
+        size?: "xs" | "md" | "sm" | "custom" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    dropIndicator: (props?: ({
+        intent?: "primary" | "secondary" | null | undefined;
+        dragAllowed?: boolean | null | undefined;
+        dropPosition?: "bottom" | "top" | "inside" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    collapsableIcon: (props?: ({
+        isOpen?: boolean | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    icon: (props?: ({
+        size?: "xs" | "md" | "sm" | "custom" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+};
+export default _default;

package/dist/components/Tree/Tree.styles.js

@@ -0,0 +1,226 @@
+import e from "../../helpers/cvaWrapper.js";
+var t = {
+	root: e("h-full relative grow basis-0 user-select-none overflow-auto group", {
+		variants: {
+			intent: { primary: "" },
+			size: {
+				md: "text-sm",
+				sm: "text-xs",
+				xs: "text-xs",
+				custom: ""
+			}
+		},
+		compoundVariants: [],
+		defaultVariants: {
+			intent: "primary",
+			size: "md"
+		}
+	}),
+	item: e("cursor-pointer flex items-center transition-colors duration-100", {
+		variants: {
+			intent: {
+				primary: "",
+				secondary: ""
+			},
+			selected: {
+				true: "",
+				false: ""
+			},
+			hovered: {
+				true: "",
+				false: ""
+			},
+			parentSelected: {
+				true: "",
+				false: ""
+			},
+			size: {
+				md: "px-3 py-0.5 gap-1.5 min-h-7",
+				sm: "px-2.5 py-0.5 gap-1 min-h-6",
+				xs: "px-2 py-0.5 gap-1 min-h-5",
+				custom: ""
+			}
+		},
+		compoundVariants: [
+			{
+				hovered: !0,
+				selected: !1,
+				intent: "primary",
+				className: "bg-gray-100 dark:bg-zinc-700/60 text-zinc-900 dark:text-zinc-200"
+			},
+			{
+				hovered: !0,
+				selected: !1,
+				intent: "secondary",
+				className: "bg-gray-100 dark:bg-zinc-700/60 text-zinc-900 dark:text-zinc-200"
+			},
+			{
+				parentSelected: !0,
+				selected: !1,
+				intent: "primary",
+				className: "bg-primary-100 hover:bg-primary-200 dark:hover:bg-primary-900/40 dark:bg-primary-900/20 text-zinc-900 dark:text-zinc-200"
+			},
+			{
+				parentSelected: !0,
+				selected: !1,
+				intent: "secondary",
+				className: "bg-secondary-100 hover:bg-secondary-200 dark:hover:bg-secondary-900/40 dark:bg-secondary-900/20 text-zinc-900 dark:text-zinc-200"
+			},
+			{
+				parentSelected: !0,
+				selected: !1,
+				hovered: !0,
+				intent: "primary",
+				className: "bg-primary-200/70 hover:bg-primary-200 dark:hover:bg-primary-900/40 dark:bg-primary-900/30 text-zinc-900 dark:text-zinc-200"
+			},
+			{
+				parentSelected: !0,
+				selected: !1,
+				hovered: !0,
+				intent: "secondary",
+				className: "bg-secondary-200/70 hover:bg-secondary-200 dark:hover:bg-secondary-900/40 dark:bg-secondary-900/30 text-zinc-900 dark:text-zinc-200"
+			},
+			{
+				selected: !0,
+				intent: "primary",
+				className: "bg-primary-200 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300"
+			},
+			{
+				selected: !0,
+				intent: "secondary",
+				className: "bg-secondary-200 dark:bg-secondary-900/40 text-secondary-700 dark:text-secondary-300"
+			}
+		],
+		defaultVariants: {
+			intent: "primary",
+			size: "md",
+			selected: !1,
+			hovered: !1
+		}
+	}),
+	containerEditable: e("focus-visible:outline-dashed focus-visible:outline-1 focus-visible:-outline-offset-1 truncate focus-visible:text-clip focus-visible:overflow-auto focus-visible:outline-primary-500", {
+		variants: { size: {
+			md: "focus-visible:px-1",
+			sm: "focus-visible:px-0.5",
+			xs: "",
+			custom: ""
+		} },
+		compoundVariants: [],
+		defaultVariants: {}
+	}),
+	dropIndicator: e("h-0.5 w-full p-0 absolute pointer-events-none after:h-2 after:w-2 after:-translate-y-[calc(50%-1px)] after:absolute after:border-2 after:border-solid after:content-[\"\"] after:rounded-full", {
+		variants: {
+			intent: {
+				primary: "",
+				secondary: ""
+			},
+			dragAllowed: {
+				true: "",
+				false: ""
+			},
+			dropPosition: {
+				inside: "top-0 left-0 w-full h-full border-2 border-solid after:content-none",
+				top: "top-1 left-2 after:-left-2",
+				bottom: "bottom-1 left-2 after:-left-2 after:-bottom-1.5"
+			}
+		},
+		compoundVariants: [
+			{
+				dragAllowed: !0,
+				intent: "primary",
+				dropPosition: "top",
+				className: "bg-primary-500 after:border-primary-500"
+			},
+			{
+				dragAllowed: !0,
+				intent: "secondary",
+				dropPosition: "top",
+				className: "bg-secondary-500 after:border-secondary-500"
+			},
+			{
+				dragAllowed: !1,
+				intent: "primary",
+				dropPosition: "top",
+				className: "bg-red-500 after:border-red-500"
+			},
+			{
+				dragAllowed: !1,
+				intent: "secondary",
+				dropPosition: "top",
+				className: "bg-red-500 after:border-red-500"
+			},
+			{
+				dragAllowed: !0,
+				intent: "primary",
+				dropPosition: "bottom",
+				className: "bg-primary-500 after:border-primary-500"
+			},
+			{
+				dragAllowed: !0,
+				intent: "secondary",
+				dropPosition: "bottom",
+				className: "bg-secondary-500 after:border-secondary-500"
+			},
+			{
+				dragAllowed: !1,
+				intent: "primary",
+				dropPosition: "bottom",
+				className: "bg-red-500 after:border-red-500"
+			},
+			{
+				dragAllowed: !1,
+				intent: "secondary",
+				dropPosition: "bottom",
+				className: "bg-red-500 after:border-red-500"
+			},
+			{
+				dragAllowed: !0,
+				intent: "primary",
+				dropPosition: "inside",
+				className: "bg-primary-500/20 border-primary-500"
+			},
+			{
+				dragAllowed: !0,
+				intent: "secondary",
+				dropPosition: "inside",
+				className: "bg-secondary-500/20 border-secondary-500"
+			},
+			{
+				dragAllowed: !1,
+				intent: "primary",
+				dropPosition: "inside",
+				className: "bg-red-500/20 border-red-500"
+			},
+			{
+				dragAllowed: !1,
+				intent: "secondary",
+				dropPosition: "inside",
+				className: "bg-red-500/20 border-red-500"
+			}
+		],
+		defaultVariants: {
+			intent: "primary",
+			dragAllowed: !0
+		}
+	}),
+	collapsableIcon: e("w-4 items-center justify-center cursor-pointer text-zinc-400 dark:text-zinc-500 shrink-0", {
+		variants: { isOpen: {
+			true: "flex",
+			false: "group-hover:flex hidden"
+		} },
+		compoundVariants: [],
+		defaultVariants: { isOpen: !1 }
+	}),
+	icon: e("shrink-0 text-zinc-500 dark:text-zinc-400", {
+		variants: { size: {
+			md: "w-4 h-4",
+			sm: "w-3.5 h-3.5",
+			xs: "w-3 h-3",
+			custom: ""
+		} },
+		compoundVariants: [],
+		defaultVariants: { size: "md" }
+	})
+};
+//#endregion
+export { t as default };