@tree-ia/design-system 1.5.5 → 1.5.6

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { AlertCircle, AlertOctagon, AlertTriangle, ArrowDown, ArrowUp, ArrowUpDown, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, File, GripVertical, Image, Inbox, Info, LogOut, Monitor, Moon, Search, Sun, Upload, User, X, XCircle } from "lucide-react";
@@ -394,19 +394,23 @@ function Modal({ isOpen, onClose, onSave, title = "", children, showFooter = fal
 		}, 150);
 	}, [onClose]);
 	useEffect(() => {
-		if (!closeOnOverlayClick) return;
+		if (!shouldRender || isClosing) return;
+		const previous = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = previous;
+		};
+	}, [shouldRender, isClosing]);
+	useEffect(() => {
+		if (!closeOnOverlayClick || !shouldRender || isClosing) return;
 		const handleClickOutside = (event) => {
 			const target = event.target;
-			if (modalRef.current && !modalRef.current.contains(event.target) && !target.closest("[data-modal-ignore]")) handleClose();
-		};
-		if (shouldRender && !isClosing) {
-			document.addEventListener("mousedown", handleClickOutside);
-			document.body.style.overflow = "hidden";
-		}
-		return () => {
-			document.removeEventListener("mousedown", handleClickOutside);
-			if (!shouldRender) document.body.style.overflow = "auto";
+			if (target.closest("[data-modal-ignore]")) return;
+			for (const selector of [".dashboard-dropdown-portal", ".dc-combobox-portal"]) if (document.querySelector(selector)?.contains(target)) return;
+			if (modalRef.current && !modalRef.current.contains(target)) handleClose();
 		};
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
 	}, [
 		shouldRender,
 		isClosing,
@@ -1166,9 +1170,9 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 		return groups;
 	}
 	function renderSectionHeader(section, collapsed) {
-		if (collapsed) return /* @__PURE__ */ jsx("div", { className: "my-2 mx-2 border-t border-[var(--dashboard-sidebar-border,#2A6510)]" });
+		if (collapsed) return /* @__PURE__ */ jsx("div", { className: "my-2 mx-2 border-t border-[var(--dashboard-sidebar-border,#e0dfe3)]" });
 		return /* @__PURE__ */ jsx("div", {
-			className: "mb-1 mt-5 px-4 text-[11px] font-bold uppercase tracking-wider text-[var(--dashboard-sidebar-text,#FFFFFF)]/80",
+			className: "mb-1 mt-5 px-4 text-[11px] font-bold uppercase tracking-wider text-[var(--dashboard-sidebar-text,#403f52)]/80",
 			children: section
 		});
 	}
@@ -1180,7 +1184,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 		const isChildActive = item.children?.some((c) => currentPath === c.href);
 		if (hasChildren) return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("button", {
 			onClick: () => toggleExpand(item.id),
-			className: cn$23("w-full flex items-center px-4 py-3 rounded-lg text-sm font-medium cursor-pointer", collapsed && !mobile ? "justify-center" : "justify-start", isChildActive ? "text-[var(--dashboard-sidebar-active-text,#5DD611)]" : "text-[var(--dashboard-sidebar-text,#FFFFFF)] hover:bg-[var(--dashboard-primary,#37a501)]/10"),
+			className: cn$23("w-full flex items-center px-4 py-3 rounded-lg text-sm font-medium cursor-pointer", collapsed && !mobile ? "justify-center" : "justify-start", isChildActive ? "text-[var(--dashboard-sidebar-active-text,#ff521d)]" : "text-[var(--dashboard-sidebar-text,#403f52)] hover:bg-[var(--dashboard-primary,#ff521d)]/10"),
 			style: { transition: "background-color 200ms, color 200ms" },
 			title: collapsed && !mobile ? item.label : void 0,
 			children: [/* @__PURE__ */ jsx(Icon, {
@@ -1198,7 +1202,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 				className: cn$23("ml-auto flex-shrink-0 transition-transform duration-200", isExpanded ? "rotate-90" : "")
 			})] })]
 		}), (!collapsed || mobile) && /* @__PURE__ */ jsx("div", {
-			className: "overflow-hidden transition-all duration-200 ml-7 border-l-2 border-[var(--dashboard-sidebar-border,#2A6510)]",
+			className: "overflow-hidden transition-all duration-200 ml-7 border-l-2 border-[var(--dashboard-sidebar-border,#e0dfe3)]",
 			style: { maxHeight: isExpanded ? `${item.children.length * 40}px` : "0" },
 			children: item.children.map((child) => {
 				const ChildIcon = child.icon;
@@ -1207,7 +1211,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 					href: child.href,
 					className: "block",
 					children: /* @__PURE__ */ jsxs("div", {
-						className: cn$23("w-full flex items-center pl-4 pr-4 py-2 rounded-r-lg text-[13px] cursor-pointer", childActive ? "text-[var(--dashboard-sidebar-active-text,#5DD611)] font-semibold border-l-2 border-[var(--dashboard-primary,#37a501)] -ml-[2px]" : "text-[var(--dashboard-sidebar-text,#FFFFFF)] hover:text-[var(--dashboard-sidebar-active-text,#5DD611)]"),
+						className: cn$23("w-full flex items-center pl-4 pr-4 py-2 rounded-r-lg text-[13px] cursor-pointer", childActive ? "text-[var(--dashboard-sidebar-active-text,#ff521d)] font-semibold border-l-2 border-[var(--dashboard-primary,#ff521d)] -ml-[2px]" : "text-[var(--dashboard-sidebar-text,#403f52)] hover:text-[var(--dashboard-sidebar-active-text,#ff521d)]"),
 						style: { transition: "background-color 200ms, color 200ms" },
 						children: [/* @__PURE__ */ jsx(ChildIcon, {
 							size: 15,
@@ -1224,7 +1228,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 			href: item.href,
 			className: "block",
 			children: /* @__PURE__ */ jsxs("div", {
-				className: cn$23("w-full flex items-center px-4 py-3 rounded-lg text-sm font-medium cursor-pointer", collapsed && !mobile ? "justify-center" : "justify-start", isActive ? "bg-[var(--dashboard-primary,#37a501)]/25 text-[var(--dashboard-sidebar-active-text,#5DD611)]" : "text-[var(--dashboard-sidebar-text,#FFFFFF)] hover:bg-[var(--dashboard-primary,#37a501)]/10"),
+				className: cn$23("w-full flex items-center px-4 py-3 rounded-lg text-sm font-medium cursor-pointer", collapsed && !mobile ? "justify-center" : "justify-start", isActive ? "bg-[var(--dashboard-primary,#ff521d)]/25 text-[var(--dashboard-sidebar-active-text,#ff521d)]" : "text-[var(--dashboard-sidebar-text,#403f52)] hover:bg-[var(--dashboard-primary,#ff521d)]/10"),
 				style: { transition: "background-color 200ms, color 200ms" },
 				title: collapsed && !mobile ? item.label : void 0,
 				children: [/* @__PURE__ */ jsx(Icon, {
@@ -1253,7 +1257,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 		}, group.section || `group-${i}`));
 	}
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("header", {
-		className: "xl:hidden fixed top-0 left-0 right-0 z-40 bg-[var(--dashboard-sidebar-bg,#1B4D08)] border-b border-[var(--dashboard-sidebar-border,#2A6510)]",
+		className: "xl:hidden fixed top-0 left-0 right-0 z-40 bg-[var(--dashboard-sidebar-bg,#f0f0f0)] border-b border-[var(--dashboard-sidebar-border,#e0dfe3)]",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-center px-4 h-16 relative",
 			children: [/* @__PURE__ */ jsx("div", {
@@ -1261,7 +1265,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 				children: logo
 			}), /* @__PURE__ */ jsx("button", {
 				onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen),
-				className: "absolute right-4 inline-flex items-center justify-center rounded-lg text-sm font-medium transition-colors cursor-pointer bg-white/10 text-[var(--dashboard-sidebar-text,#FFFFFF)] hover:bg-white/20 h-10 w-10",
+				className: "absolute right-4 inline-flex items-center justify-center rounded-lg text-sm font-medium transition-colors cursor-pointer bg-black/5 text-[var(--dashboard-sidebar-text,#403f52)] hover:bg-black/10 h-10 w-10",
 				"aria-label": "Menu",
 				"aria-expanded": isMobileMenuOpen,
 				children: /* @__PURE__ */ jsx(ChevronDown, {
@@ -1270,31 +1274,31 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 				})
 			})]
 		}), /* @__PURE__ */ jsx("nav", {
-			className: `absolute top-16 left-0 right-0 bg-[var(--dashboard-sidebar-bg,#1B4D08)] border-b border-[var(--dashboard-sidebar-border,#2A6510)] shadow-lg transition-all duration-200 ${isMobileMenuOpen ? "max-h-[calc(100vh-4rem)] overflow-y-auto" : "max-h-0 overflow-hidden"}`,
+			className: `absolute top-16 left-0 right-0 bg-[var(--dashboard-sidebar-bg,#f0f0f0)] border-b border-[var(--dashboard-sidebar-border,#e0dfe3)] shadow-lg transition-all duration-200 ${isMobileMenuOpen ? "max-h-[calc(100vh-4rem)] overflow-y-auto" : "max-h-0 overflow-hidden"}`,
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "px-4 py-2",
 				children: [renderMenuGroups(false, true), /* @__PURE__ */ jsxs("div", {
-					className: "mt-2 pt-2 border-t border-[var(--dashboard-sidebar-border,#2A6510)] space-y-2",
+					className: "mt-2 pt-2 border-t border-[var(--dashboard-sidebar-border,#e0dfe3)] space-y-2",
 					children: [
 						user && /* @__PURE__ */ jsxs("button", {
 							onClick: onUserClick,
-							className: "w-full flex items-center px-4 py-3 rounded-lg bg-[var(--dashboard-primary,#37a501)]/5 hover:bg-[var(--dashboard-primary,#37a501)]/10 transition-colors cursor-pointer",
+							className: "w-full flex items-center px-4 py-3 rounded-lg bg-[var(--dashboard-primary,#ff521d)]/5 hover:bg-[var(--dashboard-primary,#ff521d)]/10 transition-colors cursor-pointer",
 							children: [/* @__PURE__ */ jsx("div", {
-								className: "flex items-center justify-center w-8 h-8 rounded-full bg-[var(--dashboard-primary,#37a501)]/30 text-[var(--dashboard-sidebar-text,#FFFFFF)] flex-shrink-0",
+								className: "flex items-center justify-center w-8 h-8 rounded-full bg-[var(--dashboard-primary,#ff521d)]/30 text-[var(--dashboard-sidebar-text,#403f52)] flex-shrink-0",
 								children: /* @__PURE__ */ jsx(User, { size: 16 })
 							}), /* @__PURE__ */ jsxs("div", {
 								className: "ml-3 text-left",
 								children: [
 									user.subtitle && /* @__PURE__ */ jsx("p", {
-										className: "text-xs text-[var(--dashboard-sidebar-text,#FFFFFF)]/60 whitespace-nowrap truncate",
+										className: "text-xs text-[var(--dashboard-sidebar-text,#403f52)]/60 whitespace-nowrap truncate",
 										children: user.subtitle
 									}),
 									/* @__PURE__ */ jsx("p", {
-										className: "text-sm font-medium text-[var(--dashboard-sidebar-text,#FFFFFF)] whitespace-nowrap truncate",
+										className: "text-sm font-medium text-[var(--dashboard-sidebar-text,#403f52)] whitespace-nowrap truncate",
 										children: user.name
 									}),
 									/* @__PURE__ */ jsx("p", {
-										className: "text-xs text-[var(--dashboard-sidebar-text,#FFFFFF)]/60 whitespace-nowrap truncate",
+										className: "text-xs text-[var(--dashboard-sidebar-text,#403f52)]/60 whitespace-nowrap truncate",
 										children: user.email
 									})
 								]
@@ -1304,7 +1308,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 						footerItems?.map((item) => renderMenuItem(item, false, true)),
 						onLogout && /* @__PURE__ */ jsxs("button", {
 							onClick: onLogout,
-							className: "w-full flex items-center justify-start px-4 py-3 rounded-lg text-sm font-medium transition-colors cursor-pointer text-[var(--dashboard-sidebar-text,#FFFFFF)] hover:bg-[var(--dashboard-primary,#37a501)]/10",
+							className: "w-full flex items-center justify-start px-4 py-3 rounded-lg text-sm font-medium transition-colors cursor-pointer text-[var(--dashboard-sidebar-text,#403f52)] hover:bg-[var(--dashboard-primary,#ff521d)]/10",
 							children: [/* @__PURE__ */ jsx(LogOut, {
 								size: 20,
 								className: "mr-3 flex-shrink-0"
@@ -1318,7 +1322,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 			})
 		})]
 	}), /* @__PURE__ */ jsxs("aside", {
-		className: cn$23("hidden xl:flex xl:flex-col xl:fixed xl:left-0 xl:top-0 xl:h-screen bg-[var(--dashboard-sidebar-bg,#1B4D08)] border-r border-[var(--dashboard-sidebar-border,#2A6510)] overflow-visible", isCollapsed ? "xl:w-[109px]" : "xl:w-[280px]", className),
+		className: cn$23("hidden xl:flex xl:flex-col xl:fixed xl:left-0 xl:top-0 xl:h-screen bg-[var(--dashboard-sidebar-bg,#f0f0f0)] border-r border-[var(--dashboard-sidebar-border,#e0dfe3)] overflow-visible", isCollapsed ? "xl:w-[109px]" : "xl:w-[280px]", className),
 		style: { transition: `width 400ms ${cubicBezier}` },
 		children: [onToggleCollapse && /* @__PURE__ */ jsxs("button", {
 			onClick: onToggleCollapse,
@@ -1328,17 +1332,22 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 				width: "20px",
 				height: "193px"
 			},
-			children: [/* @__PURE__ */ jsx("svg", {
+			children: [/* @__PURE__ */ jsxs("svg", {
 				xmlns: "http://www.w3.org/2000/svg",
 				width: "20",
 				height: "193",
 				viewBox: "0 0 20 193",
 				fill: "none",
 				className: "absolute inset-0",
-				children: /* @__PURE__ */ jsx("path", {
-					d: "M10.2036 118.86C14.8518 115.918 19.5 107.801 19.5 95.9116C19.5 84.0223 15.672 76.4939 10.2036 72.9634C4.73505 69.4329 2.54765 63.5488 1.72738 55.8994L1.72738 136.512C2.82108 125.921 5.55533 121.802 10.2036 118.86Z",
-					fill: "var(--dashboard-sidebar-bg,#1B4D08)"
-				})
+				children: [/* @__PURE__ */ jsx("path", {
+					d: "M10.2036 118.86C14.8518 115.918 19.5 107.801 19.5 95.9116C19.5 84.0223 15.672 76.4939 10.2036 72.9634C4.73505 69.4329 2.54765 63.5488 1.72738 55.8994L0 55.8994L0 136.512L1.72738 136.512C2.82108 125.921 5.55533 121.802 10.2036 118.86Z",
+					fill: "var(--dashboard-sidebar-bg,#f0f0f0)"
+				}), /* @__PURE__ */ jsx("path", {
+					d: "M1.72738 55.8994C2.54765 63.5488 4.73505 69.4329 10.2036 72.9634C15.672 76.4939 19.5 84.0223 19.5 95.9116C19.5 107.801 14.8518 115.918 10.2036 118.86C5.55533 121.802 2.82108 125.921 1.72738 136.512",
+					stroke: "var(--dashboard-sidebar-border,#e0dfe3)",
+					strokeWidth: "1",
+					fill: "none"
+				})]
 			}), /* @__PURE__ */ jsx("svg", {
 				xmlns: "http://www.w3.org/2000/svg",
 				width: "12",
@@ -1349,7 +1358,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 				style: { transition: `transform 400ms ${cubicBezier}` },
 				children: /* @__PURE__ */ jsx("path", {
 					d: "M4.5 2L8.5 6L4.5 10",
-					stroke: "var(--dashboard-sidebar-text,#FFFFFF)",
+					stroke: "var(--dashboard-sidebar-text,#403f52)",
 					strokeWidth: "2",
 					strokeLinecap: "round",
 					strokeLinejoin: "round"
@@ -1359,7 +1368,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 			className: "flex flex-col h-full overflow-y-auto",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					className: "flex justify-center items-center py-6 px-4 border-b border-[var(--dashboard-sidebar-border,#2A6510)] overflow-hidden relative h-[88px]",
+					className: "flex justify-center items-center py-6 px-4 border-b border-[var(--dashboard-sidebar-border,#e0dfe3)] overflow-hidden relative h-[88px]",
 					children: [collapsedLogo && /* @__PURE__ */ jsx("div", {
 						className: "absolute inset-0 flex items-center justify-center",
 						style: {
@@ -1383,14 +1392,14 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 					children: renderMenuGroups(isCollapsed, false)
 				}),
 				/* @__PURE__ */ jsxs("footer", {
-					className: "p-4 border-t border-[var(--dashboard-sidebar-border,#2A6510)] space-y-2",
+					className: "p-4 border-t border-[var(--dashboard-sidebar-border,#e0dfe3)] space-y-2",
 					children: [
 						user && /* @__PURE__ */ jsxs("button", {
 							onClick: onUserClick,
-							className: cn$23("w-full flex items-center px-4 py-3 rounded-lg bg-[var(--dashboard-primary,#37a501)]/5 hover:bg-[var(--dashboard-primary,#37a501)]/10 transition-colors cursor-pointer", isCollapsed ? "justify-center" : "justify-start"),
+							className: cn$23("w-full flex items-center px-4 py-3 rounded-lg bg-[var(--dashboard-primary,#ff521d)]/5 hover:bg-[var(--dashboard-primary,#ff521d)]/10 transition-colors cursor-pointer", isCollapsed ? "justify-center" : "justify-start"),
 							title: isCollapsed ? `${user.subtitle ? user.subtitle + " - " : ""}${user.name}` : void 0,
 							children: [/* @__PURE__ */ jsx("div", {
-								className: "flex items-center justify-center w-8 h-8 rounded-full bg-[var(--dashboard-primary,#37a501)]/30 text-[var(--dashboard-sidebar-text,#FFFFFF)] flex-shrink-0",
+								className: "flex items-center justify-center w-8 h-8 rounded-full bg-[var(--dashboard-primary,#ff521d)]/30 text-[var(--dashboard-sidebar-text,#403f52)] flex-shrink-0",
 								children: /* @__PURE__ */ jsx(User, { size: 16 })
 							}), /* @__PURE__ */ jsxs("div", {
 								className: "overflow-hidden text-left",
@@ -1402,15 +1411,15 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 								},
 								children: [
 									user.subtitle && /* @__PURE__ */ jsx("p", {
-										className: "text-xs text-[var(--dashboard-sidebar-text,#FFFFFF)]/60 whitespace-nowrap truncate",
+										className: "text-xs text-[var(--dashboard-sidebar-text,#403f52)]/60 whitespace-nowrap truncate",
 										children: user.subtitle
 									}),
 									/* @__PURE__ */ jsx("p", {
-										className: "text-sm font-medium text-[var(--dashboard-sidebar-text,#FFFFFF)] whitespace-nowrap truncate",
+										className: "text-sm font-medium text-[var(--dashboard-sidebar-text,#403f52)] whitespace-nowrap truncate",
 										children: user.name
 									}),
 									/* @__PURE__ */ jsx("p", {
-										className: "text-xs text-[var(--dashboard-sidebar-text,#FFFFFF)]/60 whitespace-nowrap truncate",
+										className: "text-xs text-[var(--dashboard-sidebar-text,#403f52)]/60 whitespace-nowrap truncate",
 										children: user.email
 									})
 								]
@@ -1420,7 +1429,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 						footerItems?.map((item) => renderMenuItem(item, isCollapsed, false)),
 						onLogout && /* @__PURE__ */ jsxs("button", {
 							onClick: onLogout,
-							className: cn$23("w-full flex items-center px-4 py-3 rounded-lg text-sm font-medium cursor-pointer text-[var(--dashboard-sidebar-text,#FFFFFF)] hover:bg-[var(--dashboard-primary,#37a501)]/10", isCollapsed ? "justify-center" : "justify-start"),
+							className: cn$23("w-full flex items-center px-4 py-3 rounded-lg text-sm font-medium cursor-pointer text-[var(--dashboard-sidebar-text,#403f52)] hover:bg-[var(--dashboard-primary,#ff521d)]/10", isCollapsed ? "justify-center" : "justify-start"),
 							style: { transition: "background-color 200ms" },
 							title: isCollapsed ? logoutLabel : void 0,
 							children: [/* @__PURE__ */ jsx(LogOut, {
@@ -4196,10 +4205,10 @@ const defaultConfig = {
 		surface: "#FFFFFF",
 		textPrimary: "#0F172A",
 		textSecondary: "#64748B",
-		sidebarBg: "#0F172A",
-		sidebarBorder: "#1E293B",
-		sidebarText: "#CBD5E1",
-		sidebarActiveText: "#FFFFFF",
+		sidebarBg: "#f0f0f0",
+		sidebarBorder: "#e0dfe3",
+		sidebarText: "#403f52",
+		sidebarActiveText: "#ff521d",
 		statusSuccess: "#059669",
 		statusDanger: "#DC2626",
 		statusWarning: "#D97706",
@@ -4400,7 +4409,7 @@ function NotificationsProvider({ children }) {
 //#endregion
 //#region src/providers/DashboardProvider.tsx
 function CSSVarsInjector({ config }) {
-	useEffect(() => {
+	useLayoutEffect(() => {
 		const root = document.documentElement;
 		const { colors } = config;
 		root.style.setProperty("--dashboard-primary", colors.primary);