uibee 3.2.0 → 3.3.1

package/dist/components/table/types.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from "react";
+
+//#region src/components/table/types.d.ts
+type TableColor = 'green' | 'yellow' | 'red' | 'blue' | 'gray' | 'orange' | 'purple';
+type Column<T extends Record<string, unknown> = Record<string, unknown>> = {
+  key: keyof T & string;
+  label?: string;
+  sortable?: boolean;
+  width?: string;
+  align?: 'left' | 'center' | 'right';
+  highlight?: Record<string, TableColor>;
+  render?: (value: unknown, row: T) => ReactNode;
+  truncate?: boolean;
+};
+type SortState = {
+  column: string;
+  order: 'asc' | 'desc';
+};
+type Density = 'compact' | 'comfortable' | 'spacious';
+type TableVariant = 'original' | 'modern';
+type TableProps<T extends Record<string, unknown> = Record<string, unknown>> = {
+  data: T[];
+  columns: Column<T>[];
+  idKey?: keyof T & string;
+  variant?: TableVariant;
+  density?: Density;
+  striped?: boolean;
+  className?: string;
+  loading?: boolean;
+  loadingRows?: number;
+  emptyState?: ReactNode;
+  redirectPath?: string | {
+    path: string;
+    key?: string;
+  };
+  onRowClick?: (row: T, id: string) => void;
+  renderExpandedRow?: (row: T) => ReactNode;
+  selectable?: boolean;
+  selectedIds?: string[];
+  onSelectionChange?: (ids: string[]) => void;
+  urlState?: boolean;
+  sort?: SortState;
+  onSort?: (sort: SortState) => void;
+  pageSize?: number;
+  totalRows?: number;
+  page?: number;
+  onPageChange?: (page: number) => void;
+  hidePagination?: boolean;
+  menuItems?: (row: T, id: string) => ReactNode;
+};
+//#endregion
+export { Column, Density, SortState, TableColor, TableProps, TableVariant };

package/dist/components/table/utils.js

@@ -0,0 +1,9 @@
+//#region src/components/table/utils.ts
+function resolveId(row, idKey, columns) {
+	if (idKey && row[idKey] !== void 0) return String(row[idKey]);
+	if (row["id"] !== void 0) return String(row["id"]);
+	const firstKey = columns[0]?.key ?? Object.keys(row)[0];
+	return String(row[firstKey] ?? "");
+}
+//#endregion
+export { resolveId };

package/dist/components/toast/toastItem.js

@@ -0,0 +1,61 @@
+"use client";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { AlertCircle, AlertTriangle, CheckCircle, Info, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/toast/toastItem.tsx
+function ToastItem({ toast, index, expanded, onRemove, onHeight, offset, frontHeight }) {
+	const [mounted, setMounted] = useState(false);
+	const ref = useRef(null);
+	useEffect(() => {
+		requestAnimationFrame(() => setMounted(true));
+	}, []);
+	useLayoutEffect(() => {
+		if (ref.current) onHeight(toast.id, ref.current.offsetHeight);
+	}, [
+		toast.message,
+		onHeight,
+		toast.id,
+		expanded
+	]);
+	const isVisible = mounted && !toast.exiting;
+	const isFront = index === 0;
+	const collapsedOffset = index * 10 + (index > 0 ? frontHeight - 60 : 0);
+	return /* @__PURE__ */ jsx("li", {
+		ref,
+		className: "absolute bottom-0 right-0 w-full transition-all duration-300 ease-out pointer-events-auto",
+		style: {
+			transform: isVisible ? `translateY(${expanded ? -offset : -collapsedOffset}px) scale(${expanded ? 1 : 1 - index * .05})` : "translateY(20px) scale(0.9)",
+			opacity: isVisible ? 1 : 0,
+			zIndex: toast.id
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center space-x-4 rounded-lg p-4 shadow-lg border-2 border-login-400 bg-login-700",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "shrink-0",
+					children: Icon(toast.type)
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: `flex-1 text-sm font-semibold text-login-800 dark:text-login-100 min-w-0
+                        ${!expanded && !isFront ? "truncate" : ""}`,
+					children: toast.message
+				}),
+				/* @__PURE__ */ jsx("button", {
+					onClick: onRemove,
+					className: "hover:text-login-200 text-login-400",
+					children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
+				})
+			]
+		})
+	});
+}
+function Icon(type) {
+	switch (type) {
+		case "info": return /* @__PURE__ */ jsx(Info, { className: "h-6 w-6 text-blue-500" });
+		case "success": return /* @__PURE__ */ jsx(CheckCircle, { className: "h-6 w-6 text-green-500" });
+		case "warning": return /* @__PURE__ */ jsx(AlertTriangle, { className: "h-6 w-6 text-yellow-500" });
+		case "error": return /* @__PURE__ */ jsx(AlertCircle, { className: "h-6 w-6 text-red-500" });
+	}
+}
+//#endregion
+export { ToastItem as default };

package/dist/components/toast/toaster.d.ts

@@ -0,0 +1,13 @@
+import { ToastType } from "uibee/components";
+
+//#region src/components/toast/toaster.d.ts
+declare function toast(message: string, type: ToastType, duration?: number): void;
+declare namespace toast {
+  var info: (message: string, duration?: number) => void;
+  var success: (message: string, duration?: number) => void;
+  var warning: (message: string, duration?: number) => void;
+  var error: (message: string, duration?: number) => void;
+}
+declare function Toaster(): import("react").JSX.Element;
+//#endregion
+export { Toaster as default, toast };

package/dist/components/toast/toaster.js

@@ -0,0 +1,117 @@
+"use client";
+import ToastItem from "./toastItem.js";
+import { useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/toast/toaster.tsx
+const listeners = /* @__PURE__ */ new Set();
+let idCounter = 0;
+function toast(message, type, duration = 4e3) {
+	const id = ++idCounter;
+	listeners.forEach((listener) => listener({
+		id,
+		message,
+		type,
+		expiresAt: Date.now() + duration
+	}));
+}
+toast.info = (message, duration) => toast(message, "info", duration);
+toast.success = (message, duration) => toast(message, "success", duration);
+toast.warning = (message, duration) => toast(message, "warning", duration);
+toast.error = (message, duration) => toast(message, "error", duration);
+function Toaster() {
+	const [toasts, setToasts] = useState([]);
+	const [expanded, setExpanded] = useState(false);
+	const [heights, setHeights] = useState({});
+	useEffect(() => {
+		function addToast(toast) {
+			setToasts((prev) => [toast, ...prev]);
+		}
+		listeners.add(addToast);
+		return () => {
+			listeners.delete(addToast);
+		};
+	}, []);
+	useEffect(() => {
+		const now = Date.now();
+		setToasts((prev) => prev.map((toast) => {
+			if (expanded) return {
+				...toast,
+				pausedAt: toast.pausedAt || now
+			};
+			if (!toast.pausedAt) return toast;
+			return {
+				...toast,
+				expiresAt: toast.expiresAt + (now - toast.pausedAt),
+				pausedAt: void 0
+			};
+		}));
+	}, [expanded]);
+	function removeToast(id) {
+		setToasts((prev) => prev.map((toast) => toast.id === id ? {
+			...toast,
+			exiting: true
+		} : toast));
+		setTimeout(() => {
+			setToasts((prev) => prev.filter((toast) => toast.id !== id));
+		}, 300);
+	}
+	useEffect(() => {
+		const timer = setInterval(() => {
+			if (expanded) return;
+			const now = Date.now();
+			setToasts((prev) => {
+				const toastsToExit = prev.filter((toast) => !toast.exiting && !toast.pausedAt && toast.expiresAt <= now);
+				if (toastsToExit.length === 0) return prev;
+				toastsToExit.forEach((toast) => {
+					setTimeout(() => {
+						setToasts((current) => current.filter((item) => item.id !== toast.id));
+					}, 300);
+				});
+				return prev.map((toast) => toastsToExit.find((exitToast) => exitToast.id === toast.id) ? {
+					...toast,
+					exiting: true
+				} : toast);
+			});
+		}, 100);
+		return () => clearInterval(timer);
+	}, [expanded]);
+	function onHeight(id, height) {
+		setHeights((prev) => {
+			if (prev[id] === height) return prev;
+			return {
+				...prev,
+				[id]: height
+			};
+		});
+	}
+	const visibleToasts = toasts.slice(0, expanded ? 10 : 3);
+	const frontHeight = heights[visibleToasts[0]?.id] || 60;
+	const offsets = useMemo(() => {
+		let currentOffset = 0;
+		return visibleToasts.map((toast) => {
+			const height = heights[toast.id] || 60;
+			const offset = currentOffset;
+			currentOffset += height + 16;
+			return offset;
+		});
+	}, [visibleToasts, heights]);
+	const totalHeight = offsets.length > 0 ? offsets[offsets.length - 1] + (heights[visibleToasts[visibleToasts.length - 1]?.id] || 60) : 0;
+	return /* @__PURE__ */ jsx("ul", {
+		className: `fixed bottom-4 right-4 z-9999 w-full max-w-sm flex flex-col items-end transition-all duration-300 ease-out
+                ${expanded ? "pointer-events-auto" : "pointer-events-none"}`,
+		style: { height: expanded ? totalHeight + "px" : "auto" },
+		onMouseEnter: () => setExpanded(true),
+		onMouseLeave: () => setExpanded(false),
+		children: visibleToasts.map((toast, index) => /* @__PURE__ */ jsx(ToastItem, {
+			toast,
+			index,
+			expanded,
+			onRemove: () => removeToast(toast.id),
+			onHeight,
+			offset: offsets[index],
+			frontHeight
+		}, toast.id))
+	});
+}
+//#endregion
+export { Toaster as default, toast };

package/dist/components/toggle/language.d.ts

@@ -0,0 +1,10 @@
+import { Language } from "uibee/components";
+
+//#region src/components/toggle/language.d.ts
+declare function LanguageToggle({
+  language
+}: {
+  language?: Language;
+}): import("react").JSX.Element;
+//#endregion
+export { LanguageToggle as default };

package/dist/components/toggle/language.js

@@ -0,0 +1,34 @@
+"use client";
+import { useEffect, useState } from "react";
+import { Globe } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRouter } from "next/navigation.js";
+import { getCookie, setCookie } from "utilbee";
+//#region src/components/toggle/language.tsx
+function LanguageToggle({ language }) {
+	const [lang, setLang] = useState(language || "en");
+	const [jump, setJump] = useState(false);
+	const router = useRouter();
+	useEffect(() => {
+		const savedLang = getCookie("lang");
+		if (savedLang) setLang(savedLang);
+	}, []);
+	function handleClick() {
+		const newLang = lang === "no" ? "en" : "no";
+		setCookie("lang", newLang);
+		setLang(newLang);
+		language = newLang;
+		setJump(true);
+		setTimeout(() => setJump(false), 400);
+		router.refresh();
+	}
+	return /* @__PURE__ */ jsxs("button", {
+		value: lang,
+		onClick: handleClick,
+		className: `cursor-pointer p-2 leading-8 text-base w-[4.3rem] text-center rounded 
+        bg-transparent border-none hover:bg-gray-400/10 flex flex-row items-center justify-center gap-1`,
+		children: [/* @__PURE__ */ jsx(Globe, { className: `text-xl leading-8 -mt-0.5 ${jump ? "animate-jump" : ""}` }), " " + lang]
+	});
+}
+//#endregion
+export { LanguageToggle as default };

package/dist/components/toggle/theme.d.ts

@@ -0,0 +1,8 @@
+//#region src/components/toggle/theme.d.ts
+declare function ThemeToggle({
+  className
+}: {
+  className?: string;
+}): import("react").JSX.Element;
+//#endregion
+export { ThemeToggle as default };

package/dist/components/toggle/theme.js

@@ -0,0 +1,135 @@
+"use client";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRouter } from "next/navigation.js";
+import { getCookie, setCookie } from "utilbee";
+//#region src/components/toggle/theme.tsx
+function ThemeToggle({ className }) {
+	const router = useRouter();
+	const [theme, setTheme] = useState("dark");
+	useEffect(() => {
+		const savedTheme = getCookie("theme");
+		if (savedTheme) setTheme(savedTheme);
+		document.documentElement.classList.remove("dark", "light");
+		document.documentElement.classList.add(theme);
+	}, [theme]);
+	function toggleTheme() {
+		const newTheme = theme === "dark" ? "light" : "dark";
+		setCookie("theme", newTheme);
+		setTheme(newTheme);
+		router.refresh();
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: `grid place-items-center justify-end rounded-md hover:bg-login-300/20 w-fit ${className}`,
+		children: /* @__PURE__ */ jsxs("label", {
+			className: "cursor-pointer",
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "checkbox",
+				checked: theme === "light",
+				onChange: toggleTheme,
+				className: "sr-only"
+			}), /* @__PURE__ */ jsx(ThemeIcon, { theme })]
+		})
+	});
+}
+function ThemeIcon({ theme }) {
+	const sunrayClass = `fill-white transition-opacity duration-400 ${theme === "light" ? "opacity-0" : "opacity-100"}`;
+	return /* @__PURE__ */ jsxs("svg", {
+		className: "h-12 p-3",
+		viewBox: "0 0 100 100",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", {
+				id: "theme-toggle_clip-path",
+				children: [/* @__PURE__ */ jsx("rect", {
+					x: "0",
+					y: "0",
+					width: "100",
+					height: "100",
+					fill: "white"
+				}), /* @__PURE__ */ jsx("circle", {
+					className: `transition-transform duration-400 ${theme === "dark" ? "translate-x-8 -translate-y-4" : ""}`,
+					cx: "68",
+					cy: "40",
+					r: "18"
+				})]
+			}) }),
+			/* @__PURE__ */ jsx("circle", {
+				className: `origin-center transition-all duration-400 ${theme === "light" ? "scale-[1.9] fill-black" : "scale-100 fill-white"}`,
+				mask: "url(#theme-toggle_clip-path)",
+				cx: "50",
+				cy: "50",
+				r: "23"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				className: sunrayClass,
+				x: "86",
+				y: "47",
+				width: "14",
+				height: "6",
+				rx: "3"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				className: sunrayClass,
+				y: "47",
+				width: "14",
+				height: "6",
+				rx: "3"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				className: sunrayClass,
+				x: "47",
+				y: "86",
+				width: "6",
+				height: "14",
+				rx: "3"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				className: sunrayClass,
+				x: "75",
+				y: "75",
+				width: "6",
+				height: "14",
+				rx: "3",
+				transform: "rotate(-45 78 78)"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				className: sunrayClass,
+				x: "84.8995",
+				y: "12",
+				width: "6",
+				height: "14",
+				rx: "3",
+				transform: "rotate(45 84.8995 12)"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				className: sunrayClass,
+				x: "22.8995",
+				y: "74",
+				width: "6",
+				height: "14",
+				rx: "3",
+				transform: "rotate(45 22.8995 74)"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				className: sunrayClass,
+				x: "13",
+				y: "16.2426",
+				width: "6",
+				height: "14",
+				rx: "3",
+				transform: "rotate(-45 13 16.2426)"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				className: sunrayClass,
+				x: "47",
+				y: "0",
+				width: "6",
+				height: "14",
+				rx: "3"
+			})
+		]
+	});
+}
+//#endregion
+export { ThemeToggle as default };

package/dist/components/version/version.d.ts

@@ -0,0 +1,13 @@
+//#region src/components/version/version.d.ts
+type VersionTagProps = {
+  version?: string;
+  url?: string;
+  className?: string;
+};
+declare function VersionTag({
+  version,
+  url,
+  className
+}: VersionTagProps): import("react").JSX.Element | undefined;
+//#endregion
+export { VersionTag as default };

package/dist/components/version/version.js

@@ -0,0 +1,19 @@
+import { jsxs } from "react/jsx-runtime";
+import Link from "next/link.js";
+//#region src/components/version/version.tsx
+function VersionTag({ version, url, className }) {
+	if (!version) return;
+	const style = `w-fit bg-login-700 text-login-100 border border-login-500/40 text-xs font-mono px-2 py-0.5 rounded ${className || ""}`;
+	if (url) return /* @__PURE__ */ jsxs(Link, {
+		className: style,
+		target: "_blank",
+		href: url,
+		children: ["v", version]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: style,
+		children: ["v", version]
+	});
+}
+//#endregion
+export { VersionTag as default };

package/dist/components/vulnerability/constants.d.ts

@@ -0,0 +1,4 @@
+//#region src/components/vulnerability/constants.d.ts
+type SeverityLevel = 'critical' | 'high' | 'medium' | 'low' | 'unknown';
+//#endregion
+export { SeverityLevel };

package/dist/components/vulnerability/constants.js

@@ -0,0 +1,17 @@
+//#region src/components/vulnerability/constants.ts
+const severityLabel = {
+	critical: "Critical",
+	high: "High",
+	medium: "Medium",
+	low: "Low",
+	unknown: "Unknown"
+};
+const severityClasses = {
+	critical: "border-l-red-500",
+	high: "border-l-orange-500",
+	medium: "border-l-amber-500",
+	low: "border-l-green-500",
+	unknown: "border-l-login-400"
+};
+//#endregion
+export { severityClasses, severityLabel };

package/dist/components/vulnerability/severityPill.d.ts

@@ -0,0 +1,15 @@
+import { SeverityLevel } from "./constants.js";
+
+//#region src/components/vulnerability/severityPill.d.ts
+type SeverityPillProps = {
+  severity: SeverityLevel;
+  count: number;
+  compact?: boolean;
+};
+declare function SeverityPill({
+  severity,
+  count,
+  compact
+}: SeverityPillProps): import("react").JSX.Element | null;
+//#endregion
+export { SeverityPill as default };

package/dist/components/vulnerability/severityPill.js

@@ -0,0 +1,20 @@
+import LeftBarPanel from "../container/leftBarPanel.js";
+import { severityClasses, severityLabel } from "./constants.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/vulnerability/severityPill.tsx
+function SeverityPill({ severity, count, compact = false }) {
+	if (count === 0) return null;
+	return /* @__PURE__ */ jsxs(LeftBarPanel, {
+		color: severityClasses[severity],
+		className: `flex items-center gap-2.5 ${compact ? "px-2.5 py-1.5" : "px-3 py-2"}`,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: `${compact ? "text-sm" : "text-base"} font-bold text-login-50`,
+			children: count
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-[10px] font-semibold uppercase tracking-[0.15em] text-login-300",
+			children: severityLabel[severity]
+		})]
+	});
+}
+//#endregion
+export { SeverityPill as default };