@plitzi/plitzi-ui 1.6.2

package/dist/components/Accordion/helpers/AccordionManager.js

@@ -0,0 +1,156 @@
+//#region src/components/Accordion/helpers/AccordionManager.ts
+var e = class {
+	containerRef;
+	panels = [];
+	dragging = !1;
+	settings;
+	lastUpdate;
+	lastUpdateActive;
+	listeners = /* @__PURE__ */ new Set();
+	draggingData = null;
+	constructor(e, t) {
+		this.containerRef = e;
+		let { multi: n = !1, alwaysOpen: r = !0, defaultActive: i = [] } = t ?? {};
+		this.settings = {
+			multi: n,
+			alwaysOpen: r,
+			defaultActive: i
+		}, this.lastUpdate = Date.now(), this.lastUpdateActive = Date.now();
+	}
+	resyncLayout() {
+		let e = !1;
+		for (let t = this.panels.length - 1; t >= 0; t--) {
+			let n = this.panels[t];
+			if (n.hasManualSize && n.active) {
+				this.updateDOMStyles(n.ref.current, {
+					flexGrow: "",
+					flexBasis: ""
+				}), n.hasManualSize = !1;
+				break;
+			} else if (n.active) {
+				e = !0;
+				break;
+			}
+		}
+		!e && this.settings.alwaysOpen && this.panels.length && (this.panels[0].active = !0);
+	}
+	register(e, t, n) {
+		if (!t.current || this.get(e)) return;
+		let r = this.settings.defaultActive.includes(e), i = this.getActives().length;
+		!this.settings.multi && i ? r = !1 : !i && this.settings.alwaysOpen && (r = !0);
+		let a = !!t.current.style.flexBasis && t.current.style.flexBasis !== "auto", { minSize: o = 80, maxSize: s = Infinity } = n ?? {};
+		this.resyncLayout(), this.panels.push({
+			id: e,
+			ref: t,
+			active: r,
+			hasManualSize: a,
+			minSize: o,
+			maxSize: s
+		}), this.panels = this.sortPanels(this.panels), this.touch();
+	}
+	unregister(e) {
+		this.panels = this.panels.filter((t) => t.id !== e), this.resyncLayout(), this.touch();
+	}
+	get(e) {
+		return e === void 0 ? this.panels : this.panels.find((t) => t.id === e);
+	}
+	getActives() {
+		return this.panels.filter((e) => e.active);
+	}
+	getIndex(e) {
+		return this.panels.findIndex((t) => t.id === e);
+	}
+	isOpen(e) {
+		return this.get(e)?.active ?? !1;
+	}
+	toggle(e) {
+		let t = this.getIndex(e);
+		if (t === -1) return;
+		let n = this.panels[t], r = !n.active;
+		if (!r && this.settings.alwaysOpen && this.getActives().length === 1) return;
+		!r && n.hasManualSize && (this.updateDOMStyles(n.ref.current, {
+			flexGrow: "",
+			flexBasis: ""
+		}), n.hasManualSize = !1), n.active = r;
+		let i = this.getActives();
+		if (!this.settings.multi && i.length > 1 && (i.filter((t) => t.id !== e).forEach((e) => e.active = !1), i = this.getActives()), i.length === 1) {
+			let e = this.panels.filter((e) => e.hasManualSize);
+			e.length && e.forEach((e) => {
+				this.updateDOMStyles(e.ref.current, {
+					flexGrow: "",
+					flexBasis: ""
+				}), e.hasManualSize = !1;
+			});
+		}
+		this.touch(!0);
+	}
+	canResize(e) {
+		let t = this.getIndex(e);
+		if (t === -1 || !this.panels[t].active || t === this.panels.length - 1) return !1;
+		let n = this.panels[t + 1]?.active, r = this.getActives().map((e) => e.id);
+		return n || this.panels.find((n, i) => r.includes(n.id) && n.id !== e && i > t);
+	}
+	onResizeStart = (e) => (t) => {
+		t.preventDefault(), t.stopPropagation();
+		let n = this.panels.findIndex((t) => t.id === e);
+		if (n === -1 || n === this.panels.length - 1 || !this.containerRef.current || this.panels.filter((e) => e.active).length <= 1) return;
+		let r = this.panels[n], i = this.panels[n + 1], a = this.getActives();
+		if (i?.active || (i = this.panels.find((e, t) => e.active && e.id !== r.id && t > n)), !i) return;
+		let o = r.ref.current?.offsetHeight ?? 0, s = i.ref.current?.offsetHeight ?? 0, c = 0;
+		o < r.minSize && (c = Math.abs(o - r.minSize));
+		let l = a[a.length - 1].id !== i.id;
+		this.draggingData = {
+			startY: t.clientY + c / 2,
+			panelA: r,
+			startA: o + c,
+			panelB: i,
+			startB: s,
+			hasManualSizeB: l
+		}, this.updateDOMStyles(this.containerRef.current, {
+			userSelect: "none",
+			cursor: "row-resize"
+		}), this.updateDOMStyles(r.ref.current, {
+			flexBasis: `${o + c}px`,
+			flexGrow: "0"
+		}), l && this.updateDOMStyles(i.ref.current, {
+			flexBasis: `${s}px`,
+			flexGrow: "0"
+		}), this.startDragging();
+	};
+	onMouseMove = (e) => {
+		if (!this.draggingData || !this.containerRef.current) return;
+		let { startY: t, panelA: n, startA: r, panelB: i, startB: a, hasManualSizeB: o } = this.draggingData, s = e.clientY - t, c = r + s, l = a - s;
+		c < n.minSize || l < i.minSize || (n.hasManualSize = !0, this.updateDOMStyles(n.ref.current, { flexBasis: `${c}px` }), o && (i.hasManualSize = !0, this.updateDOMStyles(i.ref.current, { flexBasis: `${l}px` })));
+	};
+	onMouseUp = () => {
+		this.stopDragging();
+	};
+	startDragging() {
+		this.dragging || (this.dragging = !0, window.addEventListener("mousemove", this.onMouseMove), window.addEventListener("mouseup", this.onMouseUp));
+	}
+	stopDragging() {
+		this.dragging && (this.dragging = !1, window.removeEventListener("mousemove", this.onMouseMove), window.removeEventListener("mouseup", this.onMouseUp), this.updateDOMStyles(this.containerRef.current, {
+			userSelect: "",
+			cursor: ""
+		}), this.draggingData = null);
+	}
+	sortPanels(e) {
+		return e.slice().sort((e, t) => e.ref.current === t.ref.current || !e.ref.current || !t.ref.current ? 0 : e.ref.current.compareDocumentPosition(t.ref.current) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+	}
+	updateDOMStyles(e, t) {
+		if (e) for (let n in t) e.style[n] = t[n] === void 0 ? "" : t[n];
+	}
+	onUpdate(e) {
+		return this.listeners.add(e), () => {
+			this.listeners.delete(e);
+		};
+	}
+	touch(e = !1) {
+		let t = Date.now();
+		this.lastUpdate = t;
+		for (let e of this.listeners) e(t);
+		e && (this.lastUpdateActive = t);
+	}
+};
+//#endregion
+export { e as default };

package/dist/components/Accordion/helpers/AccordionManager.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Accordion/hooks/useAccordion.d.ts

@@ -0,0 +1,2 @@
+export declare const useAccordion: () => import('../AccordionContext').AccordionContextValue;
+export default useAccordion;

package/dist/components/Accordion/hooks/useAccordion.js

@@ -0,0 +1,10 @@
+import e from "../AccordionContext.js";
+import { use as t } from "react";
+//#region src/components/Accordion/hooks/useAccordion.ts
+var n = () => {
+	let n = t(e);
+	if (!n) throw Error("Accordion components must be used inside <Accordion>");
+	return n;
+};
+//#endregion
+export { n as default };

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

@@ -0,0 +1,6 @@
+import { default as Accordion } from './Accordion';
+import { default as accordionTheme } from './Accordion.styles';
+import { default as useAccordion } from './hooks/useAccordion';
+export * from './Accordion';
+export { useAccordion, accordionTheme };
+export default Accordion;

package/dist/components/Accordion/index.js

@@ -0,0 +1,7 @@
+import e from "./hooks/useAccordion.js";
+import t from "./Accordion.js";
+import n from "./Accordion.styles.js";
+//#region src/components/Accordion/index.ts
+var r = t;
+//#endregion
+export { n as accordionTheme, r as default, e as useAccordion };

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,10 @@
+import { default as AlertStyles, variantKeys } from './Alert.styles';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+import { ReactNode } from 'react';
+export type AlertProps = {
+    children?: ReactNode;
+    closeable?: boolean;
+    onClick?: () => void;
+} & useThemeSharedProps<typeof AlertStyles, typeof variantKeys>;
+declare const Alert: ({ children, className, intent, solid, size, closeable, onClick }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export default Alert;

package/dist/components/Alert/Alert.js

@@ -0,0 +1,48 @@
+import e from "../../hooks/useTheme/index.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "clsx";
+//#region src/components/Alert/Alert.tsx
+var i = ({ children: i, className: a = "", intent: o = "success", solid: s, size: c, closeable: l = !1, onClick: u }) => {
+	let d = e("Alert", {
+		className: a,
+		componentKey: [
+			"root",
+			"iconContainer",
+			"icon",
+			"content",
+			"closeIconContainer"
+		],
+		variants: {
+			intent: o,
+			size: c,
+			solid: s
+		}
+	});
+	return /* @__PURE__ */ n("div", {
+		className: d.root,
+		children: [
+			/* @__PURE__ */ n("div", {
+				className: d.iconContainer,
+				children: [
+					o === "success" && /* @__PURE__ */ t("i", { className: r("fas fa-check", d.icon) }),
+					o === "error" && /* @__PURE__ */ t("i", { className: r("fas fa-fire", d.icon) }),
+					o === "warning" && /* @__PURE__ */ t("i", { className: r("fas fa-exclamation-triangle", d.icon) }),
+					o === "info" && /* @__PURE__ */ t("i", { className: r("fas fa-info-circle", d.icon) })
+				]
+			}),
+			/* @__PURE__ */ t("div", {
+				className: d.content,
+				children: i
+			}),
+			l && /* @__PURE__ */ t("div", {
+				className: d.closeIconContainer,
+				children: /* @__PURE__ */ t("i", {
+					className: r("fa-solid fa-xmark", d.icon),
+					onClick: u
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { i as default };

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

@@ -0,0 +1,25 @@
+export declare const variantKeys: {
+    readonly intent: readonly ["default", "success", "error", "warning", "info", "other"];
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly solid: readonly [true, false];
+};
+export declare const STYLES_COMPONENT_NAME = "Alert";
+declare const _default: {
+    root: (props?: ({
+        intent?: "default" | "error" | "success" | "other" | "warning" | "info" | null | undefined;
+        size?: "xs" | "md" | "sm" | "lg" | "xl" | null | undefined;
+        solid?: boolean | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    iconContainer: (props?: ({
+        size?: "xs" | "md" | "sm" | "lg" | "xl" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    icon: (props?: ({
+        intent?: "default" | "error" | "success" | "warning" | "info" | null | undefined;
+        size?: "xs" | "md" | "sm" | "lg" | "xl" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    closeIconContainer: (props?: ({
+        size?: "xs" | "md" | "sm" | "lg" | "xl" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    content: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+};
+export default _default;

package/dist/components/Alert/Alert.styles.js

@@ -0,0 +1,141 @@
+import e from "../../helpers/cvaWrapper.js";
+var t = {
+	root: e("w-full flex relative rounded-sm", {
+		variants: {
+			intent: {
+				default: "",
+				success: "",
+				error: "",
+				warning: "",
+				info: "",
+				other: ""
+			},
+			size: {
+				xs: "p-1.5 text-xs gap-1.5",
+				sm: "p-2 text-sm gap-2",
+				md: "p-2.5 gap-2.5",
+				lg: "p-3 gap-3",
+				xl: "p-4 gap-4"
+			},
+			solid: {
+				true: "",
+				false: ""
+			}
+		},
+		compoundVariants: [
+			{
+				solid: !0,
+				intent: "default",
+				className: "bg-gray-400 dark:bg-zinc-600"
+			},
+			{
+				solid: !1,
+				intent: "default",
+				className: "bg-gray-500/10 border-gray-500 border text-gray-600 dark:bg-zinc-500/20 dark:border-zinc-500 dark:text-zinc-300"
+			},
+			{
+				solid: !0,
+				intent: "info",
+				className: "bg-blue-400 dark:bg-blue-600"
+			},
+			{
+				solid: !1,
+				intent: "info",
+				className: "bg-blue-500/10 border-blue-500 border text-blue-600 dark:bg-blue-500/20 dark:text-blue-400"
+			},
+			{
+				solid: !0,
+				intent: "success",
+				className: "bg-green-400 dark:bg-green-600"
+			},
+			{
+				solid: !1,
+				intent: "success",
+				className: "bg-green-500/10 border-green-500 border text-green-600 dark:bg-green-500/20 dark:text-green-400"
+			},
+			{
+				solid: !0,
+				intent: "warning",
+				className: "bg-orange-400 dark:bg-orange-600"
+			},
+			{
+				solid: !1,
+				intent: "warning",
+				className: "bg-orange-500/10 border-orange-500 border text-orange-600 dark:bg-orange-500/20 dark:text-orange-400"
+			},
+			{
+				solid: !0,
+				intent: "error",
+				className: "bg-red-400 dark:bg-red-600"
+			},
+			{
+				solid: !1,
+				intent: "error",
+				className: "bg-red-500/10 border-red-500 border text-red-600 dark:bg-red-500/20 dark:text-red-400"
+			},
+			{
+				solid: !0,
+				intent: "other",
+				className: "bg-gray-400 dark:bg-zinc-600"
+			},
+			{
+				solid: !1,
+				intent: "other",
+				className: "bg-gray-500/10 border-gray-500 border text-gray-600 dark:bg-zinc-500/20 dark:border-zinc-500 dark:text-zinc-300"
+			}
+		],
+		defaultVariants: {
+			intent: "success",
+			size: "md",
+			solid: !0
+		}
+	}),
+	iconContainer: e("flex items-center", {
+		variants: { size: {
+			xs: "",
+			sm: "",
+			md: "",
+			lg: "",
+			xl: ""
+		} },
+		compoundVariants: [],
+		defaultVariants: { size: "md" }
+	}),
+	icon: e("", {
+		variants: {
+			intent: {
+				default: "",
+				success: "",
+				error: "",
+				warning: "",
+				info: ""
+			},
+			size: {
+				xs: "",
+				sm: "",
+				md: "",
+				lg: "",
+				xl: ""
+			}
+		},
+		compoundVariants: [],
+		defaultVariants: {
+			intent: "default",
+			size: "md"
+		}
+	}),
+	closeIconContainer: e("flex items-start cursor-pointer", {
+		variants: { size: {
+			xs: "p-0.5",
+			sm: "p-0.5",
+			md: "p-0.5",
+			lg: "p-0.5",
+			xl: "p-0.5"
+		} },
+		compoundVariants: [],
+		defaultVariants: { size: "md" }
+	}),
+	content: e("grow basis-0 min-w-0")
+};
+//#endregion
+export { t as default };

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

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

package/dist/components/Alert/index.js

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

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,9 @@
+import { default as BadgeStyles, variantKeys } from './Badge.styles';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+import { ReactNode } from 'react';
+export type BadgeProps = {
+    children?: ReactNode;
+    icon?: string;
+} & useThemeSharedProps<typeof BadgeStyles, typeof variantKeys>;
+declare const Badge: ({ children, icon: iconProp, className, intent, solid, size }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export default Badge;

package/dist/components/Badge/Badge.js

@@ -0,0 +1,42 @@
+import e from "../../hooks/useTheme/index.js";
+import { useMemo as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "clsx";
+//#region src/components/Badge/Badge.tsx
+var a = ({ children: a, icon: o = "", className: s = "", intent: c = "success", solid: l, size: u }) => {
+	let d = e("Badge", {
+		className: s,
+		componentKey: [
+			"root",
+			"iconContainer",
+			"content",
+			"icon"
+		],
+		variants: {
+			intent: c,
+			size: u,
+			solid: l
+		}
+	}), f = t(() => {
+		if (o) return o;
+		switch (c) {
+			case "success": return "fas fa-check";
+			case "error": return "fas fa-fire";
+			case "warning": return "fas fa-exclamation-triangle";
+			case "info": return "fas fa-info-circle";
+			default: return "";
+		}
+	}, [c, o]);
+	return /* @__PURE__ */ r("div", {
+		className: d.root,
+		children: [f && /* @__PURE__ */ n("div", {
+			className: d.iconContainer,
+			children: /* @__PURE__ */ n("i", { className: i(f, d.icon) })
+		}), /* @__PURE__ */ n("div", {
+			className: d.content,
+			children: a
+		})]
+	});
+};
+//#endregion
+export { a as default };

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

@@ -0,0 +1,22 @@
+export declare const variantKeys: {
+    readonly intent: readonly ["default", "success", "error", "warning", "info", "custom"];
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly solid: readonly [true, false];
+};
+export declare const STYLES_COMPONENT_NAME = "Badge";
+declare const _default: {
+    root: (props?: ({
+        intent?: "default" | "custom" | "error" | "success" | "warning" | "info" | null | undefined;
+        size?: "xs" | "md" | "sm" | "lg" | "xl" | null | undefined;
+        solid?: boolean | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    iconContainer: (props?: ({
+        size?: "xs" | "md" | "sm" | "lg" | "xl" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    icon: (props?: ({
+        intent?: "default" | "error" | "success" | "warning" | "info" | null | undefined;
+        size?: "xs" | "md" | "sm" | "lg" | "xl" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    content: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+};
+export default _default;

package/dist/components/Badge/Badge.styles.js

@@ -0,0 +1,120 @@
+import e from "../../helpers/cvaWrapper.js";
+var t = {
+	root: e("flex relative rounded-sm", {
+		variants: {
+			intent: {
+				default: "",
+				success: "",
+				error: "",
+				warning: "",
+				info: "",
+				custom: ""
+			},
+			size: {
+				xs: "p-1.5 text-xs gap-1.5",
+				sm: "p-2 text-sm gap-2",
+				md: "p-2.5 gap-2.5",
+				lg: "p-3 gap-3",
+				xl: "p-4 gap-4"
+			},
+			solid: {
+				true: "",
+				false: ""
+			}
+		},
+		compoundVariants: [
+			{
+				solid: !0,
+				intent: "default",
+				className: "bg-gray-400 dark:bg-zinc-600"
+			},
+			{
+				solid: !1,
+				intent: "default",
+				className: "bg-gray-500/10 border-gray-500 border text-gray-600 dark:bg-zinc-500/20 dark:border-zinc-500 dark:text-zinc-300"
+			},
+			{
+				solid: !0,
+				intent: "info",
+				className: "bg-blue-400 dark:bg-blue-600"
+			},
+			{
+				solid: !1,
+				intent: "info",
+				className: "bg-blue-500/10 border-blue-500 border text-blue-600 dark:bg-blue-500/20 dark:text-blue-400"
+			},
+			{
+				solid: !0,
+				intent: "success",
+				className: "bg-green-400 dark:bg-green-600"
+			},
+			{
+				solid: !1,
+				intent: "success",
+				className: "bg-green-500/10 border-green-500 border text-green-600 dark:bg-green-500/20 dark:text-green-400"
+			},
+			{
+				solid: !0,
+				intent: "warning",
+				className: "bg-orange-400 dark:bg-orange-600"
+			},
+			{
+				solid: !1,
+				intent: "warning",
+				className: "bg-orange-500/10 border-orange-500 border text-orange-600 dark:bg-orange-500/20 dark:text-orange-400"
+			},
+			{
+				solid: !0,
+				intent: "error",
+				className: "bg-red-400 dark:bg-red-600"
+			},
+			{
+				solid: !1,
+				intent: "error",
+				className: "bg-red-500/10 border-red-500 border text-red-600 dark:bg-red-500/20 dark:text-red-400"
+			}
+		],
+		defaultVariants: {
+			intent: "success",
+			size: "md",
+			solid: !0
+		}
+	}),
+	iconContainer: e("flex items-center", {
+		variants: { size: {
+			xs: "",
+			sm: "",
+			md: "",
+			lg: "",
+			xl: ""
+		} },
+		compoundVariants: [],
+		defaultVariants: { size: "md" }
+	}),
+	icon: e("", {
+		variants: {
+			intent: {
+				default: "",
+				success: "",
+				error: "",
+				warning: "",
+				info: ""
+			},
+			size: {
+				xs: "",
+				sm: "",
+				md: "",
+				lg: "",
+				xl: ""
+			}
+		},
+		compoundVariants: [],
+		defaultVariants: {
+			intent: "default",
+			size: "md"
+		}
+	}),
+	content: e("grow basis-0 min-w-0")
+};
+//#endregion
+export { t as default };

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

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

package/dist/components/Badge/index.js

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

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,11 @@
+import { default as BreadcrumbStyles, variantKeys } from './Breadcrumb.styles';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+import { ReactNode } from 'react';
+export type BreadcrumbProps = {
+    children?: ReactNode;
+    classNameItem?: string;
+    separator?: '>' | '/' | '\\';
+    onItemClick?: (index: number) => void;
+} & useThemeSharedProps<typeof BreadcrumbStyles, typeof variantKeys>;
+declare const Breadcrumb: ({ children, className, separator, intent, size, onItemClick }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
+export default Breadcrumb;