uibee 3.3.0 → 3.3.2

package/dist/components/navbar/navbarDropdown.js

@@ -0,0 +1,63 @@
+"use client";
+import React, { useRef, useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/navbar/navbarDropdown.tsx
+function NavDropdown({ children, title, className }) {
+	const [isMobileDropdownOpen, setIsMobileDropdownOpen] = useState(false);
+	const [isDesktopOpen, setIsDesktopOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "relative hidden 800px:block",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "outline-none",
+			tabIndex: 0,
+			ref: useRef(null),
+			onMouseEnter: () => setIsDesktopOpen(true),
+			onMouseLeave: () => setIsDesktopOpen(false),
+			onFocus: () => setIsDesktopOpen(true),
+			onBlur: () => setIsDesktopOpen(false),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: `list-none no-underline text-base leading-4 p-3 font-bold cursor-pointer flex flex-row items-center 
+                        transition-colors`,
+				children: [title, /* @__PURE__ */ jsx(ChevronDown, { className: "w-6 h-6 stroke-login ml-1 text-2xl transition-transform duration-300 ease-in-out" })]
+			}), /* @__PURE__ */ jsx("div", {
+				className: `absolute pt-2 -ml-4 transition-all duration-200 ease-in-out z-10 ${isDesktopOpen ? "opacity-100 pointer-events-auto translate-y-0" : "opacity-0 pointer-events-none -translate-y-4"}`,
+				children: /* @__PURE__ */ jsx("ul", {
+					className: `p-3 px-6 pb-4 rounded-[0.4rem] shadow-[0_0.1rem_0.5rem_rgba(3,3,3,0.5)] bg-login-700/98 ${className || ""}`,
+					onClick: () => setIsDesktopOpen(false),
+					children: React.Children.map(children, (child, index) => /* @__PURE__ */ jsx("div", {
+						onClick: () => setIsDesktopOpen(false),
+						className: "group dropdown",
+						children: child
+					}, index))
+				})
+			})]
+		})
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "block 800px:hidden!",
+		children: [/* @__PURE__ */ jsx("button", {
+			className: "bg-none border-none cursor-pointer w-full text-left",
+			onClick: (e) => {
+				e.stopPropagation();
+				setIsMobileDropdownOpen(!isMobileDropdownOpen);
+			},
+			children: /* @__PURE__ */ jsxs("li", {
+				className: `list-none no-underline text-2xl leading-6 overflow-hidden
+                        w-full pl-4 pr-4 rounded-[0.3rem] transition-all duration-600
+                        flex items-center gap-2 opacity-100 min-h-16 py-5 `,
+				children: [/* @__PURE__ */ jsx("span", { children: title }), /* @__PURE__ */ jsx(ChevronDown, { className: `w-6 h-6 transition-transform duration-400 shrink-0 
+                            ${isMobileDropdownOpen ? "rotate-180" : ""}` })]
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: `list-none no-underline text-xl px-6 ${isMobileDropdownOpen ? "pb-4" : ""}`,
+			children: React.Children.map(children, (child, index) => /* @__PURE__ */ jsx("div", {
+				className: `leading-6 transition-all duration-500 group dropdown
+                            ${isMobileDropdownOpen ? "h-11 opacity-100" : "h-0 opacity-0"}
+                        `,
+				children: child
+			}, index))
+		})]
+	})] });
+}
+//#endregion
+export { NavDropdown as default };

package/dist/components/navbar/navbarItem.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+
+//#region src/components/navbar/navbarItem.d.ts
+type NavItemProps = {
+  href: string;
+  children: ReactNode;
+  external?: boolean;
+  target?: string;
+  rel?: string;
+  title?: string;
+  icon?: ReactNode;
+};
+declare function NavItem({
+  href,
+  children,
+  external,
+  target,
+  rel,
+  title,
+  icon
+}: NavItemProps): import("react").JSX.Element;
+//#endregion
+export { NavItemProps, NavItem as default };

package/dist/components/navbar/navbarItem.js

@@ -0,0 +1,38 @@
+"use client";
+import { ArrowUpRight } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link.js";
+//#region src/components/navbar/navbarItem.tsx
+const commonStyling = "list-none flex no-underline items-center gap-2 whitespace-nowrap cursor-pointer";
+function NavItem({ href, children, external = false, target, rel, title, icon }) {
+	const linkProps = {
+		href,
+		target,
+		rel,
+		title
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Link, {
+		...linkProps,
+		className: "hidden 800px:flex",
+		children: /* @__PURE__ */ jsxs("li", {
+			className: `${commonStyling} text-base leading-4 p-3 font-bold transition-colors link-corner-hover
+                    group-[.dropdown]:p-2.5 group-[.dropdown]:pr-3 group-[.dropdown]:pl-1`,
+			children: [
+				icon,
+				children,
+				external && /* @__PURE__ */ jsx(ArrowUpRight, { className: "w-6 h-6 stroke-login" })
+			]
+		})
+	}), /* @__PURE__ */ jsx(Link, {
+		...linkProps,
+		className: "800px:hidden",
+		children: /* @__PURE__ */ jsxs("li", {
+			className: `${commonStyling} text-2xl leading-6 overflow-hidden w-auto pl-4 rounded-[0.3rem] transition-all 
+                    duration-600 opacity-100 h-16 py-5 group-[.dropdown]:p-0 group-[.dropdown]:text-lg group-[.dropdown]:h-auto 
+                    group-[.dropdown]:py-2.5 group-[.dropdown]:pl-4`,
+			children: [children, external && /* @__PURE__ */ jsx(ArrowUpRight, { className: "w-6 h-6 stroke-login" })]
+		})
+	})] });
+}
+//#endregion
+export { NavItem as default };

package/dist/components/sidebar/sidebar.d.ts

@@ -0,0 +1,34 @@
+import { ElementType, ReactNode } from "react";
+
+//#region src/components/sidebar/sidebar.d.ts
+type SidebarSubItem = {
+  name: string;
+  path: string;
+};
+type SidebarItem = {
+  name: string;
+  path: string;
+  icon: ElementType;
+  status?: ReactNode;
+  items?: SidebarSubItem[];
+};
+type SidebarProps = {
+  items: SidebarItem[];
+  header?: ReactNode | ((expanded: boolean) => ReactNode);
+  bottomAction?: (expanded: boolean) => ReactNode;
+  mobile?: boolean;
+  initialExpanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  className?: string;
+};
+declare function Sidebar({
+  items,
+  header,
+  bottomAction,
+  mobile,
+  initialExpanded,
+  onExpandedChange,
+  className
+}: SidebarProps): import("react").JSX.Element;
+//#endregion
+export { SidebarItem, SidebarSubItem, Sidebar as default };

package/dist/components/sidebar/sidebar.js

@@ -0,0 +1,135 @@
+"use client";
+import { useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { usePathname, useSearchParams } from "next/navigation.js";
+import Link from "next/link.js";
+//#region src/components/sidebar/sidebar.tsx
+const ITEM_HEIGHT = 48;
+const GAP = 4;
+const SUB_STRIDE = 40;
+function Sidebar({ items, header, bottomAction, mobile = false, initialExpanded = true, onExpandedChange, className = "" }) {
+	const [expanded, setExpanded] = useState(initialExpanded);
+	const pathname = usePathname();
+	const searchParams = useSearchParams();
+	const fullPath = pathname + (searchParams.toString() ? `?${searchParams.toString()}` : "");
+	function toggleExpanded() {
+		const next = !expanded;
+		setExpanded(next);
+		onExpandedChange?.(next);
+	}
+	function isSubActive(sub) {
+		return sub.path.includes("?") ? fullPath.startsWith(sub.path) : pathname === sub.path;
+	}
+	function isItemActive(item) {
+		return pathname === item.path || !!item.items?.some((sub) => sub.path.includes("?") ? fullPath.startsWith(sub.path) : pathname === sub.path || pathname.startsWith(sub.path + "/"));
+	}
+	const activeIndex = items.findIndex(isItemActive);
+	const activeOffset = items.slice(0, Math.max(activeIndex, 0)).reduce((acc, item) => acc + ITEM_HEIGHT + (item.items ? GAP : 0) + GAP, 0);
+	return /* @__PURE__ */ jsxs("aside", {
+		className: `
+            flex flex-col border-r border-login-100/10 bg-login-900
+            transition-all duration-300 ease-in-out
+            ${mobile ? "w-full" : `h-full ${expanded ? "w-64" : "w-20"}`}
+            ${className}
+        `,
+		children: [
+			!mobile && /* @__PURE__ */ jsxs("div", {
+				className: `relative mb-2 p-4 transition-all duration-300 ${expanded ? "h-16" : "h-20"}`,
+				children: [header && /* @__PURE__ */ jsx("div", {
+					className: `
+                            absolute top-4 flex items-center transition-all duration-300
+                            ${expanded ? "left-4 gap-3" : "left-1/2 -translate-x-1/2 gap-0"}
+                        `,
+					children: typeof header === "function" ? header(expanded) : header
+				}), /* @__PURE__ */ jsx("button", {
+					onClick: toggleExpanded,
+					className: `
+                            absolute cursor-pointer rounded-lg p-1.5
+                            text-login-200 transition-all duration-300 hover:bg-login-800
+                            ${expanded ? "right-4 top-4" : "left-1/2 top-12 -translate-x-1/2"}
+                        `,
+					children: expanded ? /* @__PURE__ */ jsx(ChevronLeft, { size: 20 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 20 })
+				})]
+			}),
+			mobile && /* @__PURE__ */ jsx("div", { className: "h-4" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative flex flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto px-3 [scrollbar-width:none]",
+				children: [activeIndex >= 0 && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "absolute left-3 right-3 top-0 h-12 rounded-lg bg-login-800 transition-transform duration-300 ease-in-out",
+					style: { transform: `translateY(${activeOffset}px)` }
+				}), items.map((item, index) => {
+					const isActive = isItemActive(item);
+					const Icon = item.icon;
+					const activeSubIndex = item.items ? item.items.findIndex(isSubActive) : -1;
+					return /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-1",
+						children: [/* @__PURE__ */ jsxs(Link, {
+							href: item.path,
+							title: !expanded ? item.name : void 0,
+							className: `
+                                    group relative z-10 flex items-center
+                                    overflow-hidden rounded-lg p-3 transition-all duration-200
+                                    ${isActive ? "text-login" : "text-login-200 hover:bg-login-800/50 hover:text-login-100"}
+                                `,
+							children: [
+								/* @__PURE__ */ jsx("div", {
+									className: `
+                                    flex min-w-6 w-6 items-center justify-center transition-all duration-300
+                                    ${expanded ? "" : "translate-x-1"}
+                                    ${isActive ? "[&>svg]:stroke-login" : "group-hover:[&>svg]:stroke-login-100"}
+                                `,
+									children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" })
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: `
+                                    whitespace-nowrap overflow-hidden transition-all duration-300
+                                    ${expanded ? "ml-3 max-w-48 opacity-100" : "ml-0 max-w-0 opacity-0"}
+                                `,
+									children: item.name
+								}),
+								item.status && /* @__PURE__ */ jsx("div", {
+									className: `
+                                        flex items-center justify-center
+                                        ${expanded ? "ml-auto" : "absolute right-1 top-1 scale-75"}
+                                    `,
+									children: item.status
+								})
+							]
+						}), item.items && /* @__PURE__ */ jsxs("div", {
+							className: `
+                                    relative ml-6 flex flex-col gap-1 overflow-hidden
+                                    border-l border-login-800 pl-2
+                                    transition-all duration-300 ease-in-out
+                                    ${expanded && isActive ? "max-h-96 opacity-100" : "max-h-0 opacity-0"}
+                                `,
+							children: [activeSubIndex >= 0 && /* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "\n                                                absolute left-2 right-0 top-0 h-9 rounded-lg\n                                                bg-login-800/50 transition-transform duration-300 ease-in-out\n                                            ",
+								style: { transform: `translateY(${activeSubIndex * SUB_STRIDE}px)` }
+							}), item.items.map((sub, subIndex) => {
+								const subActive = isSubActive(sub);
+								return /* @__PURE__ */ jsx(Link, {
+									href: sub.path,
+									className: `
+                                                    relative z-10 rounded-lg p-2 text-sm
+                                                    transition-all duration-200
+                                                    ${subActive ? "text-login" : "text-login-300 hover:bg-login-800/30 hover:text-login-100"}
+                                                `,
+									children: sub.name
+								}, `${index}-${subIndex}`);
+							})]
+						})]
+					}, index);
+				})]
+			}),
+			bottomAction && /* @__PURE__ */ jsx("div", {
+				className: "border-t border-login-100/10 p-3",
+				children: bottomAction(expanded)
+			})
+		]
+	});
+}
+//#endregion
+export { Sidebar as default };

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,11 @@
+//#region src/components/spinner/spinner.d.ts
+type SpinnerProps = {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+};
+declare function Spinner({
+  size,
+  className
+}: SpinnerProps): import("react").JSX.Element;
+//#endregion
+export { Spinner as default };

package/dist/components/spinner/spinner.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/spinner/spinner.tsx
+const sizes = {
+	sm: "w-4 h-4 border-2",
+	md: "w-6 h-6 border-2",
+	lg: "w-9 h-9 border-[3px]"
+};
+function Spinner({ size = "md", className = "" }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "status",
+		"aria-label": "Loading",
+		className: `rounded-full border-login-500 border-t-login animate-spin ${sizes[size]} ${className}`
+	});
+}
+//#endregion
+export { Spinner as default };

package/dist/components/table/body.js

@@ -0,0 +1,253 @@
+"use client";
+import { DENSITY_TD, HIGHLIGHT, VARIANT_ROW_BORDER, VARIANT_ROW_HOVER, VARIANT_ROW_STRIPED, VARIANT_TBODY } from "./constants.js";
+import { formatValue } from "./format.js";
+import { resolveId } from "./utils.js";
+import Menu from "./menu.js";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ChevronDown, EllipsisVertical } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRouter } from "next/navigation.js";
+//#region src/components/table/body.tsx
+function useClickOutside(ref, cb, enabled) {
+	useEffect(() => {
+		if (!enabled) return;
+		function handler(e) {
+			if (ref.current && !ref.current.contains(e.target)) cb();
+		}
+		document.addEventListener("mousedown", handler);
+		return () => document.removeEventListener("mousedown", handler);
+	}, [
+		ref,
+		cb,
+		enabled
+	]);
+}
+function resolveRedirectUrl(redirectPath, row, id) {
+	if (!redirectPath) return null;
+	const cfg = typeof redirectPath === "string" ? {
+		path: redirectPath,
+		key: void 0
+	} : redirectPath;
+	if (!cfg.path) return null;
+	const rid = cfg.key ? String(row[cfg.key] ?? id) : id;
+	return cfg.path.includes("?") ? `${cfg.path}${rid}` : `${cfg.path}/${rid}`;
+}
+function Cell({ col, row, density, variant }) {
+	const value = row[col.key];
+	const shouldTruncate = col.truncate === true;
+	const align = col.align ?? "left";
+	const wrapperAlign = align === "right" ? "text-right" : align === "center" ? "text-center" : "";
+	let content;
+	if (col.render) content = col.render(value, row);
+	else if (col.highlight) {
+		const colorName = col.highlight[String(value)] ?? col.highlight["default"];
+		const formatted = String(formatValue(col.key, value));
+		if (colorName) content = /* @__PURE__ */ jsx("span", {
+			className: `inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${HIGHLIGHT[colorName]}`,
+			children: formatted
+		});
+		else content = /* @__PURE__ */ jsx("span", {
+			className: shouldTruncate ? "block truncate" : "whitespace-nowrap",
+			children: formatted
+		});
+	} else {
+		const formatted = formatValue(col.key, value);
+		content = /* @__PURE__ */ jsx("span", {
+			className: shouldTruncate ? "block truncate" : "whitespace-nowrap",
+			children: formatted === null || formatted === void 0 ? "-" : String(formatted)
+		});
+	}
+	return /* @__PURE__ */ jsx("td", {
+		style: col.width ? {
+			width: col.width,
+			maxWidth: col.width
+		} : void 0,
+		className: `
+                align-middle text-sm text-login-75 ${wrapperAlign}
+                ${DENSITY_TD[density]} ${VARIANT_ROW_BORDER[variant]}
+            `,
+		children: content
+	});
+}
+function Body({ data, columns, idKey, variant, density, striped, redirectPath, onRowClick, renderExpandedRow, selectable, selectedIds, onSelectionChange, menuItems }) {
+	const router = useRouter();
+	const [openMenuId, setOpenMenuId] = useState(null);
+	const [anchor, setAnchor] = useState(null);
+	const [expandedId, setExpandedId] = useState(null);
+	const menuRef = useRef(null);
+	const menuWasOpenOnMouseDown = useRef(false);
+	const closeMenu = useCallback(() => setOpenMenuId(null), []);
+	useClickOutside(menuRef, closeMenu, openMenuId !== null);
+	useEffect(() => {
+		if (openMenuId === null) return;
+		document.addEventListener("scroll", closeMenu, true);
+		return () => document.removeEventListener("scroll", closeMenu, true);
+	}, [closeMenu, openMenuId]);
+	function openMenu(id, coords) {
+		setAnchor(coords);
+		setOpenMenuId(id);
+	}
+	const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+	function toggleSelect(id) {
+		onSelectionChange(selectedSet.has(id) ? selectedIds.filter((s) => s !== id) : [...selectedIds, id]);
+	}
+	const hasMenu = Boolean(menuItems);
+	const hasExpand = Boolean(renderExpandedRow);
+	return /* @__PURE__ */ jsx("tbody", {
+		className: VARIANT_TBODY[variant],
+		children: data.map((row, rowIdx) => {
+			const id = resolveId(row, idKey, columns);
+			const url = resolveRedirectUrl(redirectPath, row, id);
+			const isClickable = Boolean(url || onRowClick || hasExpand);
+			const isMenuOpen = openMenuId === id;
+			const isExpanded = expandedId === id;
+			const isSelected = selectable && selectedSet.has(id);
+			const expandedContent = renderExpandedRow?.(row);
+			const rowClass = [
+				"transition-colors duration-100",
+				isClickable ? "cursor-pointer" : "",
+				VARIANT_ROW_HOVER[variant],
+				striped ? VARIANT_ROW_STRIPED[variant] : "",
+				isSelected ? "bg-login/5" : ""
+			].filter(Boolean).join(" ");
+			return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsxs("tr", {
+				className: rowClass,
+				onMouseEnter: () => {
+					if (url) router.prefetch(url);
+				},
+				onMouseDown: () => {
+					menuWasOpenOnMouseDown.current = openMenuId !== null;
+				},
+				onClick: () => {
+					if (menuWasOpenOnMouseDown.current) {
+						menuWasOpenOnMouseDown.current = false;
+						return;
+					}
+					if (hasExpand) {
+						setExpandedId(isExpanded ? null : id);
+						return;
+					}
+					if (onRowClick) {
+						onRowClick(row, id);
+						return;
+					}
+					if (url) router.push(url);
+				},
+				onContextMenu: (e) => {
+					if (!hasMenu) return;
+					e.preventDefault();
+					openMenu(id, {
+						top: e.clientY,
+						right: window.innerWidth - e.clientX
+					});
+				},
+				children: [
+					selectable && /* @__PURE__ */ jsx("td", {
+						className: `align-middle ${VARIANT_ROW_BORDER[variant]}`,
+						style: {
+							width: "3rem",
+							minWidth: "3rem"
+						},
+						children: /* @__PURE__ */ jsx("div", {
+							className: "flex items-center justify-center",
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": isSelected ? "Deselect row" : "Select row",
+								"aria-checked": isSelected,
+								role: "checkbox",
+								onClick: (e) => {
+									e.stopPropagation();
+									toggleSelect(id);
+								},
+								className: `
+                                            h-4 w-4 rounded border flex items-center justify-center transition-colors cursor-pointer
+                                            ${isSelected ? "bg-login border-login text-white" : "border-login-400 bg-transparent hover:border-login-100"}
+                                        `,
+								children: isSelected && /* @__PURE__ */ jsx("svg", {
+									className: "h-3 w-3",
+									viewBox: "0 0 12 12",
+									fill: "none",
+									children: /* @__PURE__ */ jsx("path", {
+										d: "M2 6l3 3 5-5",
+										stroke: "currentColor",
+										strokeWidth: "1.5",
+										strokeLinecap: "round",
+										strokeLinejoin: "round"
+									})
+								})
+							})
+						})
+					}),
+					columns.map((col) => /* @__PURE__ */ jsx(Cell, {
+						col,
+						row,
+						density,
+						variant
+					}, col.key)),
+					hasExpand && /* @__PURE__ */ jsx("td", {
+						className: `align-middle ${VARIANT_ROW_BORDER[variant]}`,
+						style: {
+							width: "2.5rem",
+							minWidth: "2.5rem"
+						},
+						children: /* @__PURE__ */ jsx("div", {
+							className: "flex items-center justify-center",
+							children: /* @__PURE__ */ jsx(ChevronDown, { className: `
+                                        h-4 w-4 transition-transform duration-200
+                                        ${isExpanded ? "rotate-180 text-login" : "text-login-400"}
+                                    ` })
+						})
+					}),
+					hasMenu && /* @__PURE__ */ jsx("td", {
+						className: `align-middle pr-3 ${VARIANT_ROW_BORDER[variant]}`,
+						style: {
+							width: "3.5rem",
+							minWidth: "3.5rem"
+						},
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "relative flex items-center justify-end",
+							children: [/* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": "Row actions",
+								"aria-expanded": isMenuOpen,
+								"aria-haspopup": "menu",
+								onMouseDown: (e) => e.nativeEvent.stopImmediatePropagation(),
+								onClick: (e) => {
+									e.stopPropagation();
+									if (isMenuOpen) setOpenMenuId(null);
+									else {
+										const rect = e.currentTarget.getBoundingClientRect();
+										openMenu(id, {
+											top: rect.bottom + 4,
+											right: window.innerWidth - rect.right
+										});
+									}
+								},
+								className: `
+                                                p-1.5 rounded flex items-center justify-center transition-colors
+                                                ${isMenuOpen ? "bg-login-500 text-login-75" : "text-login-300 hover:bg-login-500/60 hover:text-login-75"}
+                                            `,
+								children: /* @__PURE__ */ jsx(EllipsisVertical, { className: "h-4 w-4" })
+							}), isMenuOpen && anchor && /* @__PURE__ */ jsx(Menu, {
+								ref: menuRef,
+								anchor,
+								onClose: closeMenu,
+								children: menuItems(row, id)
+							})]
+						})
+					})
+				]
+			}), hasExpand && isExpanded && /* @__PURE__ */ jsx("tr", {
+				className: "bg-login-700/25",
+				children: /* @__PURE__ */ jsx("td", {
+					colSpan: 999,
+					className: "px-6 py-4 border-b border-login-600/20",
+					onClick: (e) => e.stopPropagation(),
+					children: expandedContent
+				})
+			})] }, id + rowIdx);
+		})
+	});
+}
+//#endregion
+export { Body as default };

package/dist/components/table/constants.js

@@ -0,0 +1,58 @@
+//#region src/components/table/constants.ts
+const HIGHLIGHT = {
+	green: "bg-green-500/15  text-green-400  ring-1 ring-green-500/25",
+	yellow: "bg-yellow-500/15 text-yellow-400 ring-1 ring-yellow-500/25",
+	red: "bg-red-500/15    text-red-400    ring-1 ring-red-500/25",
+	blue: "bg-blue-500/15   text-blue-400   ring-1 ring-blue-500/25",
+	gray: "bg-gray-500/15   text-gray-400   ring-1 ring-gray-500/25",
+	orange: "bg-orange-500/15 text-orange-400 ring-1 ring-orange-500/25",
+	purple: "bg-purple-500/15 text-purple-400 ring-1 ring-purple-500/25"
+};
+const DENSITY_TH = {
+	compact: "px-4 py-2",
+	comfortable: "px-6 py-3",
+	spacious: "px-8 py-4"
+};
+const DENSITY_TD = {
+	compact: "px-4 py-1.5",
+	comfortable: "px-6 py-3.5",
+	spacious: "px-8 py-5"
+};
+const VARIANT_CONTAINER = {
+	original: "bg-login-500/50 rounded-lg border border-login-600 shadow",
+	modern: "bg-transparent"
+};
+const VARIANT_THEAD = {
+	original: "bg-login-700",
+	modern: "bg-transparent"
+};
+const VARIANT_HEAD_BG = {
+	original: "bg-login-700",
+	modern: ""
+};
+const VARIANT_HEAD_BORDER = {
+	original: "border-b border-login-600",
+	modern: "border-b border-login-500/40"
+};
+const VARIANT_ROW_BORDER = {
+	original: "border-b border-login-600",
+	modern: "border-b border-login-600/15"
+};
+const VARIANT_THEAD_TH = {
+	original: "text-login-200",
+	modern: "text-login-300"
+};
+const VARIANT_TBODY = {
+	original: "bg-login-500/50 divide-login-600",
+	modern: "divide-login-600/15"
+};
+const VARIANT_ROW_HOVER = {
+	original: "hover:bg-login-600/30",
+	modern: "hover:bg-login-700/50"
+};
+const VARIANT_ROW_STRIPED = {
+	original: "even:bg-login-600/40",
+	modern: "even:bg-login-800/40"
+};
+//#endregion
+export { DENSITY_TD, DENSITY_TH, HIGHLIGHT, VARIANT_CONTAINER, VARIANT_HEAD_BG, VARIANT_HEAD_BORDER, VARIANT_ROW_BORDER, VARIANT_ROW_HOVER, VARIANT_ROW_STRIPED, VARIANT_TBODY, VARIANT_THEAD, VARIANT_THEAD_TH };

package/dist/components/table/empty.js

@@ -0,0 +1,24 @@
+import { TableIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/table/empty.tsx
+function Empty({ emptyState }) {
+	if (emptyState) return /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+		colSpan: 999,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center min-h-[160px] py-8 px-6",
+			children: emptyState
+		})
+	}) }) });
+	return /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+		colSpan: 999,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center justify-center gap-3 min-h-[160px] py-8 text-login-300",
+			children: [/* @__PURE__ */ jsx(TableIcon, { className: "h-10 w-10 opacity-30" }), /* @__PURE__ */ jsx("span", {
+				className: "text-sm",
+				children: "No data found"
+			})]
+		})
+	}) }) });
+}
+//#endregion
+export { Empty as default };