@lumeweb/portal-framework-ui 0.0.1 → 0.1.0

package/dist/cjs/components/Loading.cjs

@@ -0,0 +1,47 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Loading.tsx
+function Loading({ children, className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...rest,
+		"aria-busy": "true",
+		className: `bg-background fixed inset-0 z-50 transition-opacity duration-300 ${className ?? ""}`,
+		role: "status",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-h-screen flex-col items-center justify-center p-8",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mb-8",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "bg-primary flex h-16 w-16 items-center justify-center rounded-2xl",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+						"aria-hidden": "true",
+						className: "text-primary-foreground h-8 w-8 motion-safe:animate-spin motion-reduce:animate-none",
+						fill: "currentColor",
+						focusable: "false",
+						viewBox: "0 0 24 24",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97 0-.33-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1 0 .33.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.66Z" })
+					})
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-center",
+				children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-muted-foreground",
+					children: "Loading page..."
+				})
+			})]
+		})
+	});
+}
+var init_Loading = require_rolldown_runtime.__esmMin((() => {}));
+
+//#endregion
+init_Loading();
+exports.Loading = Loading;
+Object.defineProperty(exports, 'init_Loading', {
+  enumerable: true,
+  get: function () {
+    return init_Loading;
+  }
+});
+//# sourceMappingURL=Loading.cjs.map

package/dist/cjs/components/Loading.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.cjs","names":[],"sources":["../../../src/components/Loading.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\n\nfunction Loading({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & { children?: ReactNode }): JSX.Element {\n  return (\n    <div\n      {...rest}\n      aria-busy=\"true\"\n      className={`bg-background fixed inset-0 z-50 transition-opacity duration-300 ${className ?? \"\"}`}\n      role=\"status\">\n      <div className=\"flex min-h-screen flex-col items-center justify-center p-8\">\n        {/* App Logo/Icon */}\n        <div className=\"mb-8\">\n          <div className=\"bg-primary flex h-16 w-16 items-center justify-center rounded-2xl\">\n            <svg\n              aria-hidden=\"true\"\n              className=\"text-primary-foreground h-8 w-8 motion-safe:animate-spin motion-reduce:animate-none\"\n              fill=\"currentColor\"\n              focusable=\"false\"\n              viewBox=\"0 0 24 24\">\n              <path d=\"M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97 0-.33-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1 0 .33.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.66Z\" />\n            </svg>\n          </div>\n        </div>\n\n        {/* Loading Message */}\n        <div className=\"text-center\">\n          {children ?? <p className=\"text-muted-foreground\">Loading page...</p>}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport { Loading };\n"],"mappings":";;;;AAEA,SAAS,QAAQ,EACf,UACA,WACA,GAAG,QACsE;AACzE,QACE,2CAAC;EACC,GAAI;EACJ,aAAU;EACV,WAAW,oEAAoE,aAAa;EAC5F,MAAK;YACL,4CAAC;GAAI,WAAU;cAEb,2CAAC;IAAI,WAAU;cACb,2CAAC;KAAI,WAAU;eACb,2CAAC;MACC,eAAY;MACZ,WAAU;MACV,MAAK;MACL,WAAU;MACV,SAAQ;gBACR,2CAAC,UAAK,GAAE,krBAAkrB;OACtrB;MACF;KACF,EAGN,2CAAC;IAAI,WAAU;cACZ,YAAY,2CAAC;KAAE,WAAU;eAAwB;MAAmB;KACjE;IACF;GACF"}

package/dist/cjs/components/Loading.d.cts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, ReactNode } from "react";
+
+//#region src/components/Loading.d.ts
+declare function Loading({
+  children,
+  className,
+  ...rest
+}: HTMLAttributes<HTMLDivElement> & {
+  children?: ReactNode;
+}): JSX.Element;
+//#endregion
+export { Loading };
+//# sourceMappingURL=Loading.d.cts.map

package/dist/cjs/components/LumeLogo.cjs

@@ -0,0 +1,34 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_images = require('../images.cjs');
+let _lumeweb_portal_framework_ui_core = require("@lumeweb/portal-framework-ui-core");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_router = require("react-router");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/LumeLogo.tsx
+function LumeLogo({ className, imageClassName }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router.Link, {
+		className: (0, _lumeweb_portal_framework_ui_core.cn)("flex items-center space-x-2", className),
+		to: "/",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			alt: "Lume logo",
+			className: (0, _lumeweb_portal_framework_ui_core.cn)("h-10", imageClassName),
+			src: require_images.logoPng
+		})
+	});
+}
+var init_LumeLogo = require_rolldown_runtime.__esmMin((() => {
+	require_images.init_images();
+}));
+
+//#endregion
+init_LumeLogo();
+exports.LumeLogo = LumeLogo;
+Object.defineProperty(exports, 'init_LumeLogo', {
+  enumerable: true,
+  get: function () {
+    return init_LumeLogo;
+  }
+});
+//# sourceMappingURL=LumeLogo.cjs.map

package/dist/cjs/components/LumeLogo.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LumeLogo.cjs","names":["Link","logoPng"],"sources":["../../../src/components/LumeLogo.tsx"],"sourcesContent":["import { cn } from \"@lumeweb/portal-framework-ui-core\";\nimport React from \"react\";\nimport { Link } from \"react-router\";\n\n// @ts-ignore\nimport { logoPng } from \"@/images\";\n\ninterface LumeLogoProps {\n  className?: string;\n  imageClassName?: string;\n}\n\nexport function LumeLogo({ className, imageClassName }: LumeLogoProps) {\n  return (\n    <Link className={cn(\"flex items-center space-x-2\", className)} to=\"/\">\n      <img\n        alt=\"Lume logo\"\n        className={cn(\"h-10\", imageClassName)}\n        src={logoPng}\n      />\n    </Link>\n  );\n}\n"],"mappings":";;;;;;;;;AAYA,SAAgB,SAAS,EAAE,WAAW,kBAAiC;AACrE,QACE,2CAACA;EAAK,qDAAc,+BAA+B,UAAU;EAAE,IAAG;YAChE,2CAAC;GACC,KAAI;GACJ,qDAAc,QAAQ,eAAe;GACrC,KAAKC;IACL;GACG;;;6BAfwB"}

package/dist/cjs/components/LumeLogo.d.cts

@@ -0,0 +1,12 @@
+//#region src/components/LumeLogo.d.ts
+interface LumeLogoProps {
+  className?: string;
+  imageClassName?: string;
+}
+declare function LumeLogo({
+  className,
+  imageClassName
+}: LumeLogoProps): any;
+//#endregion
+export { LumeLogo };
+//# sourceMappingURL=LumeLogo.d.cts.map

package/dist/cjs/components/MainNavigation.cjs

@@ -0,0 +1,241 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_components_layout_SidebarContext = require('./layout/SidebarContext.cjs');
+const require_hooks_useMenuItems = require('../hooks/useMenuItems.cjs');
+let _lumeweb_portal_framework_ui_core = require("@lumeweb/portal-framework-ui-core");
+let _refinedev_core = require("@refinedev/core");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_router = require("react-router");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+
+//#region src/components/MainNavigation.tsx
+var isRouteActive, isChildRouteActive, NavItemContent, CollapseMenuButton, LinkableNavItem, NonLinkableNavItem, NavItem, MainNavigation;
+var init_MainNavigation = require_rolldown_runtime.__esmMin((() => {
+	require_hooks_useMenuItems.init_useMenuItems();
+	require_components_layout_SidebarContext.init_SidebarContext();
+	isRouteActive = (item, currentPathname) => {
+		const itemPath = item.path;
+		if (!itemPath) return false;
+		if (itemPath === currentPathname) return true;
+		if (itemPath !== "/" && currentPathname.startsWith(`${itemPath}/`)) return true;
+		return false;
+	};
+	isChildRouteActive = (child, parent, currentPathname) => {
+		if (child.index && child.path === "" && parent.path === currentPathname) return true;
+		return isRouteActive(child, currentPathname);
+	};
+	NavItemContent = ({ IconComponent, isCollapsed, item }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center",
+		children: [IconComponent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "mr-2 h-5 w-5",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconComponent, {})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: (0, _lumeweb_portal_framework_ui_core.cn)({ hidden: isCollapsed }),
+			children: item.label
+		})]
+	});
+	CollapseMenuButton = ({ active, icon: Icon, isOpen, item, label, onItemClick, resetKey, submenus }) => {
+		const pathname = (0, react_router.useLocation)().pathname;
+		const isSubmenuActive = submenus.some((submenu) => submenu.active === void 0 ? submenu.href === pathname : submenu.active);
+		const [isOpenState, setIsOpenState] = react.default.useState(active || isSubmenuActive);
+		const headerHref = item.path || submenus[0]?.href;
+		react.default.useEffect(() => {
+			setIsOpenState(active || isSubmenuActive);
+		}, [active, isSubmenuActive]);
+		react.default.useEffect(() => {
+			if (resetKey) setIsOpenState(false);
+		}, [resetKey]);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_lumeweb_portal_framework_ui_core.Collapsible, {
+			className: "w-full",
+			onOpenChange: setIsOpenState,
+			open: isOpenState,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.CollapsibleTrigger, {
+				asChild: true,
+				className: "mb-1 [&[data-state=open]>div>div>svg]:rotate-180",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.Button, {
+					className: "h-10 w-full justify-start",
+					variant: active || isSubmenuActive ? "secondary" : "ghost",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex w-full items-center justify-between",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center",
+							children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "mr-4",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { size: 18 })
+							}), headerHref && item.linkable !== false ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_refinedev_core.Link, {
+								"aria-label": label,
+								onClick: (e) => e.stopPropagation(),
+								onKeyDown: (e) => {
+									if (e.key === " ") {
+										e.preventDefault();
+										e.stopPropagation();
+									}
+									if (e.key === "Enter") e.stopPropagation();
+								},
+								to: headerHref,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: (0, _lumeweb_portal_framework_ui_core.cn)({
+										"-translate-x-96 opacity-0": !isOpen,
+										"translate-x-0 opacity-100": isOpen
+									}),
+									children: label
+								})
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								"aria-disabled": "true",
+								className: (0, _lumeweb_portal_framework_ui_core.cn)({
+									"-translate-x-96 opacity-0": !isOpen,
+									"translate-x-0 opacity-100": isOpen
+								}),
+								children: label
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: (0, _lumeweb_portal_framework_ui_core.cn)("whitespace-nowrap", isOpen ? "translate-x-0 opacity-100" : "-translate-x-96 opacity-0"),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
+								className: "transition-transform duration-200",
+								size: 18
+							})
+						})]
+					})
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.CollapsibleContent, {
+				className: "data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden",
+				children: submenus.map(({ active: active$1, href, icon: Icon$1, label: label$1 }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.Button, {
+					asChild: true,
+					className: "mb-1 h-10 w-full justify-start",
+					variant: active$1 === void 0 && pathname === href || active$1 ? "secondary" : "ghost",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_refinedev_core.Link, {
+						onClick: () => {
+							if (onItemClick) onItemClick();
+						},
+						to: href,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "ml-2 mr-4",
+							children: Icon$1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon$1, { size: 18 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Dot, { size: 18 })
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: (0, _lumeweb_portal_framework_ui_core.cn)({
+								"-translate-x-96 opacity-0": !isOpen,
+								"translate-x-0 opacity-100": isOpen
+							}),
+							children: label$1
+						})]
+					})
+				}, index))
+			})]
+		});
+	};
+	LinkableNavItem = ({ active, IconComponent, isCollapsed, item, onItemClick }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.Button, {
+		asChild: true,
+		className: "mb-1 h-10 w-full justify-start",
+		variant: active ? "secondary" : "ghost",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_refinedev_core.Link, {
+			onClick: onItemClick,
+			to: item.path || "",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavItemContent, {
+				active,
+				IconComponent,
+				isCollapsed,
+				item,
+				onItemClick
+			})
+		})
+	});
+	NonLinkableNavItem = ({ active, IconComponent, isCollapsed, item, onItemClick }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.Button, {
+		className: "mb-1 h-10 w-full justify-start",
+		onClick: onItemClick,
+		variant: active ? "secondary" : "ghost",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavItemContent, {
+			active,
+			IconComponent,
+			isCollapsed,
+			item,
+			onItemClick
+		})
+	});
+	NavItem = react.default.forwardRef(({ active, item, onItemClick }, ref) => {
+		const { isCollapsed } = require_components_layout_SidebarContext.useSidebarContext();
+		let IconComponent = void 0;
+		if (item.icon) IconComponent = item.icon;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+			ref,
+			children: item.linkable !== false && Boolean(item.path) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkableNavItem, {
+				active,
+				IconComponent,
+				isCollapsed,
+				item,
+				onItemClick
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NonLinkableNavItem, {
+				active,
+				IconComponent,
+				isCollapsed,
+				item,
+				onItemClick
+			})
+		});
+	});
+	NavItem.displayName = "NavItem";
+	MainNavigation = ({ isOpen, onItemClick }) => {
+		const menu = require_hooks_useMenuItems.useMenuItems();
+		const pathname = (0, react_router.useLocation)().pathname;
+		const renderMenuItem = (item) => {
+			const active = isRouteActive(item, pathname);
+			if (item.children && item.children.length > 0) {
+				const submenus = item.children.map((child) => ({
+					active: isChildRouteActive(child, item, pathname),
+					href: child.index ? item.path : child.path || "",
+					icon: child.icon,
+					label: child.label
+				}));
+				let CollapseMenuIcon = void 0;
+				if (item.icon) CollapseMenuIcon = item.icon;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapseMenuButton, {
+					active,
+					icon: CollapseMenuIcon,
+					isOpen,
+					item,
+					label: item.label,
+					onItemClick,
+					resetKey: typeof onItemClick === "function" ? pathname : void 0,
+					submenus
+				}, item.id);
+			} else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.TooltipProvider, {
+				disableHoverableContent: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_lumeweb_portal_framework_ui_core.Tooltip, {
+					delayDuration: 100,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.TooltipTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavItem, {
+							active,
+							item,
+							onItemClick
+						})
+					}), isOpen === false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.TooltipContent, {
+						side: "right",
+						children: item.label
+					})]
+				})
+			}, item.id);
+		};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.ScrollArea, {
+			className: "[&>div>div[style]]:!block",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+				className: "mt-8 flex h-full w-full flex-col",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+					className: "flex flex-1 flex-col items-start space-y-1 overflow-y-auto overflow-x-hidden px-2",
+					children: menu.getMenuItems().map(renderMenuItem)
+				})
+			})
+		});
+	};
+}));
+
+//#endregion
+init_MainNavigation();
+exports.MainNavigation = MainNavigation;
+Object.defineProperty(exports, 'init_MainNavigation', {
+  enumerable: true,
+  get: function () {
+    return init_MainNavigation;
+  }
+});
+//# sourceMappingURL=MainNavigation.cjs.map

package/dist/cjs/components/MainNavigation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MainNavigation.cjs","names":["React","Collapsible","CollapsibleTrigger","Button","Link","ChevronDown","CollapsibleContent","Icon","active","Dot","label","useSidebarContext","useMenuItems","TooltipProvider","Tooltip","TooltipTrigger","TooltipContent","ScrollArea"],"sources":["../../../src/components/MainNavigation.tsx"],"sourcesContent":["import type {\n  NavigationItemIconProps,\n  NavigationItem as NavigationItemType,\n} from \"@lumeweb/portal-framework-core\";\n\nimport {\n  Button,\n  cn,\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n  ScrollArea,\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport { Link } from \"@refinedev/core\";\nimport { ChevronDown, Dot } from \"lucide-react\";\nimport React from \"react\";\nimport { useLocation } from \"react-router\";\n\nimport { useMenuItems } from \"@/hooks/useMenuItems\";\n\nimport { useSidebarContext } from \"./layout/SidebarContext\";\n\nconst isRouteActive = (\n  item: NavigationItemType,\n  currentPathname: string,\n): boolean => {\n  const itemPath = item.path;\n\n  if (!itemPath) return false;\n\n  // Exact match\n  if (itemPath === currentPathname) return true;\n\n  // Check if current path starts with item path + \"/\"\n  if (itemPath !== \"/\" && currentPathname.startsWith(`${itemPath}/`))\n    return true;\n\n  return false;\n};\n\nconst isChildRouteActive = (\n  child: NavigationItemType,\n  parent: NavigationItemType,\n  currentPathname: string,\n): boolean => {\n  // Special handling for index routes - they should be active when we're on the parent path\n  if (child.index && child.path === \"\" && parent.path === currentPathname) {\n    return true;\n  }\n\n  return isRouteActive(child, currentPathname);\n};\n\ninterface BaseNavItemProps {\n  active: boolean;\n  IconComponent: React.FC<NavigationItemIconProps> | undefined;\n  isCollapsed: boolean;\n  item: NavigationItemType;\n  onItemClick?: () => void;\n}\n\nconst NavItemContent: React.FC<BaseNavItemProps> = ({\n  IconComponent,\n  isCollapsed,\n  item,\n}) => (\n  <div className=\"flex items-center\">\n    {IconComponent && (\n      <span className=\"mr-2 h-5 w-5\">\n        <IconComponent />\n      </span>\n    )}\n    <span className={cn({ hidden: isCollapsed })}>{item.label}</span>\n  </div>\n);\n\ninterface CollapseMenuButtonProps {\n  active: boolean;\n  icon?: React.FC<NavigationItemIconProps>;\n  isOpen: boolean;\n  item: NavigationItemType;\n  label: string;\n  onItemClick?: () => void;\n  resetKey?: string;\n  submenus: Submenu[];\n}\n\ninterface Submenu {\n  active?: boolean;\n  href: string;\n  icon?: React.FC<NavigationItemIconProps>;\n  label: string;\n}\n\nconst CollapseMenuButton: React.FC<CollapseMenuButtonProps> = ({\n  active,\n  icon: Icon,\n  isOpen,\n  item,\n  label,\n  onItemClick,\n  resetKey,\n  submenus,\n}) => {\n  const location = useLocation();\n  const pathname = location.pathname; // Get current path\n  const isSubmenuActive = submenus.some((submenu) =>\n    submenu.active === undefined ? submenu.href === pathname : submenu.active,\n  );\n  const [isOpenState, setIsOpenState] = React.useState<boolean>(\n    active || isSubmenuActive,\n  );\n  const headerHref = item.path || submenus[0]?.href;\n\n  React.useEffect(() => {\n    setIsOpenState(active || isSubmenuActive);\n  }, [active, isSubmenuActive]);\n\n  // Reset state when resetKey changes (mobile navigation)\n  React.useEffect(() => {\n    if (resetKey) {\n      setIsOpenState(false);\n    }\n  }, [resetKey]);\n\n  return (\n    <Collapsible\n      className=\"w-full\"\n      onOpenChange={setIsOpenState}\n      open={isOpenState}>\n      <CollapsibleTrigger\n        asChild\n        className=\"mb-1 [&[data-state=open]>div>div>svg]:rotate-180\">\n        <Button\n          className=\"h-10 w-full justify-start\"\n          variant={active || isSubmenuActive ? \"secondary\" : \"ghost\"}>\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"flex items-center\">\n              {Icon && (\n                <span className=\"mr-4\">\n                  <Icon size={18} />\n                </span>\n              )}\n              {headerHref && item.linkable !== false ? (\n                <Link\n                  aria-label={label}\n                  onClick={(e) => e.stopPropagation()}\n                  onKeyDown={(e) => {\n                    if (e.key === \" \") {\n                      e.preventDefault(); // avoid page scroll\n                      e.stopPropagation();\n                    }\n                    if (e.key === \"Enter\") {\n                      e.stopPropagation();\n                    }\n                  }}\n                  to={headerHref}>\n                  <p\n                    className={cn({\n                      \"-translate-x-96 opacity-0\": !isOpen,\n                      \"translate-x-0 opacity-100\": isOpen,\n                    })}>\n                    {label}\n                  </p>\n                </Link>\n              ) : (\n                <p\n                  aria-disabled=\"true\"\n                  className={cn({\n                    \"-translate-x-96 opacity-0\": !isOpen,\n                    \"translate-x-0 opacity-100\": isOpen,\n                  })}>\n                  {label}\n                </p>\n              )}\n            </div>\n            <div\n              className={cn(\n                \"whitespace-nowrap\",\n                isOpen\n                  ? \"translate-x-0 opacity-100\"\n                  : \"-translate-x-96 opacity-0\",\n              )}>\n              <ChevronDown\n                className=\"transition-transform duration-200\"\n                size={18}\n              />\n            </div>\n          </div>\n        </Button>\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden\">\n        {submenus.map(({ active, href, icon: Icon, label }, index) => (\n          <Button\n            asChild\n            className=\"mb-1 h-10 w-full justify-start\"\n            key={index}\n            variant={\n              (active === undefined && pathname === href) || active\n                ? \"secondary\"\n                : \"ghost\"\n            }>\n            <Link\n              onClick={() => {\n                if (onItemClick) {\n                  onItemClick();\n                }\n              }}\n              to={href}>\n              <span className=\"ml-2 mr-4\">\n                {Icon ? <Icon size={18} /> : <Dot size={18} />}\n              </span>\n              <p\n                className={cn({\n                  \"-translate-x-96 opacity-0\": !isOpen,\n                  \"translate-x-0 opacity-100\": isOpen,\n                })}>\n                {label}\n              </p>\n            </Link>\n          </Button>\n        ))}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n};\n\nconst LinkableNavItem: React.FC<BaseNavItemProps> = ({\n  active,\n  IconComponent,\n  isCollapsed,\n  item,\n  onItemClick,\n}) => (\n  <Button\n    asChild\n    className=\"mb-1 h-10 w-full justify-start\"\n    variant={active ? \"secondary\" : \"ghost\"}>\n    <Link onClick={onItemClick} to={item.path || \"\"}>\n      <NavItemContent\n        active={active}\n        IconComponent={IconComponent}\n        isCollapsed={isCollapsed}\n        item={item}\n        onItemClick={onItemClick}\n      />\n    </Link>\n  </Button>\n);\n\nconst NonLinkableNavItem: React.FC<BaseNavItemProps> = ({\n  active,\n  IconComponent,\n  isCollapsed,\n  item,\n  onItemClick,\n}) => (\n  <Button\n    className=\"mb-1 h-10 w-full justify-start\"\n    onClick={onItemClick}\n    variant={active ? \"secondary\" : \"ghost\"}>\n    <NavItemContent\n      active={active}\n      IconComponent={IconComponent}\n      isCollapsed={isCollapsed}\n      item={item}\n      onItemClick={onItemClick}\n    />\n  </Button>\n);\n\ninterface MenuProps {\n  isOpen: boolean;\n  onItemClick?: () => void;\n}\n\nconst NavItem: React.FC<{\n  active: boolean;\n  item: NavigationItemType;\n  onItemClick?: () => void;\n}> = React.forwardRef<\n  HTMLLIElement,\n  { active: boolean; item: NavigationItemType; onItemClick?: () => void }\n>(({ active, item, onItemClick }, ref) => {\n  const { isCollapsed } = useSidebarContext();\n\n  let IconComponent: React.FC<NavigationItemIconProps> | undefined = undefined;\n\n  if (item.icon) {\n    IconComponent = item.icon;\n  }\n\n  return (\n    <li ref={ref}>\n      {item.linkable !== false && Boolean(item.path) ? (\n        <LinkableNavItem\n          active={active}\n          IconComponent={IconComponent}\n          isCollapsed={isCollapsed}\n          item={item}\n          onItemClick={onItemClick}\n        />\n      ) : (\n        <NonLinkableNavItem\n          active={active}\n          IconComponent={IconComponent}\n          isCollapsed={isCollapsed}\n          item={item}\n          onItemClick={onItemClick}\n        />\n      )}\n    </li>\n  );\n});\nNavItem.displayName = \"NavItem\";\n\nexport const MainNavigation: React.FC<MenuProps> = ({\n  isOpen,\n  onItemClick,\n}) => {\n  const menu = useMenuItems(); // Get menu data\n  const location = useLocation();\n  const pathname = location.pathname;\n\n  const renderMenuItem = (item: NavigationItemType) => {\n    const active = isRouteActive(item, pathname);\n\n    if (item.children && item.children.length > 0) {\n      const submenus: Submenu[] = item.children.map((child) => ({\n        active: isChildRouteActive(child, item, pathname),\n        href: child.index ? item.path : child.path || \"\",\n        icon: child.icon,\n        label: child.label,\n      }));\n\n      let CollapseMenuIcon: React.FC<NavigationItemIconProps> | undefined =\n        undefined;\n\n      if (item.icon) {\n        CollapseMenuIcon = item.icon;\n      }\n\n      return (\n        <CollapseMenuButton\n          active={active}\n          icon={CollapseMenuIcon}\n          isOpen={isOpen}\n          item={item}\n          key={item.id}\n          label={item.label}\n          onItemClick={onItemClick}\n          resetKey={typeof onItemClick === \"function\" ? pathname : undefined}\n          submenus={submenus}\n        />\n      );\n    } else {\n      return (\n        <TooltipProvider disableHoverableContent key={item.id}>\n          <Tooltip delayDuration={100}>\n            <TooltipTrigger asChild>\n              <NavItem active={active} item={item} onItemClick={onItemClick} />\n            </TooltipTrigger>\n            {isOpen === false && (\n              <TooltipContent side=\"right\">{item.label}</TooltipContent>\n            )}\n          </Tooltip>\n        </TooltipProvider>\n      );\n    }\n  };\n\n  return (\n    <ScrollArea className=\"[&>div>div[style]]:!block\">\n      <nav className=\"mt-8 flex h-full w-full flex-col\">\n        <ul className=\"flex flex-1 flex-col items-start space-y-1 overflow-y-auto overflow-x-hidden px-2\">\n          {menu.getMenuItems().map(renderMenuItem)}\n        </ul>\n      </nav>\n    </ScrollArea>\n  );\n};\n"],"mappings":"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"}

package/dist/cjs/components/MainNavigation.d.cts

@@ -0,0 +1,11 @@
+import React from "react";
+
+//#region src/components/MainNavigation.d.ts
+interface MenuProps {
+  isOpen: boolean;
+  onItemClick?: () => void;
+}
+declare const MainNavigation: React.FC<MenuProps>;
+//#endregion
+export { MainNavigation };
+//# sourceMappingURL=MainNavigation.d.cts.map

package/dist/cjs/components/SkeletonLoader.cjs

@@ -0,0 +1,88 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let _lumeweb_portal_framework_ui_core = require("@lumeweb/portal-framework-ui-core");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _tanstack_react_table = require("@tanstack/react-table");
+
+//#region src/components/SkeletonLoader.tsx
+function SkeletonLoader({ className, cols = 3, layout = "default", rows = 3, showHeader = true, table }) {
+	const renderTableSkeleton = () => {
+		if (!table) {
+			console.warn("Table object is required for table layout");
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+		}
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_lumeweb_portal_framework_ui_core.Table, {
+			className: (0, _lumeweb_portal_framework_ui_core.cn)("w-full border-collapse", className),
+			children: [showHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.TableRow, {
+				className: "border-none",
+				children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.TableHead, {
+					className: "border-none",
+					style: { width: header.getSize() },
+					children: header.isPlaceholder ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.Skeleton, { className: "h-4 w-full" }) : (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
+				}, header.id))
+			}, headerGroup.id)) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.TableBody, { children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.TableRow, {
+				className: "border-none",
+				children: table.getAllColumns().map((column) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.TableCell, {
+					className: "border-none",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.Skeleton, { className: "h-4 w-full" })
+				}, column.id))
+			}, rowIndex)) })]
+		});
+	};
+	const renderCardSkeleton = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _lumeweb_portal_framework_ui_core.cn)("space-y-2", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.Skeleton, { className: "h-40 w-full" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.Skeleton, { className: "h-4 w-3/4" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.Skeleton, { className: "h-4 w-1/2" })
+		]
+	});
+	const renderListSkeleton = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _lumeweb_portal_framework_ui_core.cn)("flex items-center space-x-4", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.Skeleton, { className: "h-12 w-12 rounded-full" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.Skeleton, { className: "h-4 w-[200px]" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.Skeleton, { className: "h-4 w-[150px]" })]
+		})]
+	});
+	const renderProfileSkeleton = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _lumeweb_portal_framework_ui_core.cn)("space-y-4", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.Skeleton, { className: "h-20 w-20 rounded-full" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.Skeleton, { className: "h-4 w-[150px]" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.Skeleton, { className: "h-4 w-[200px]" })
+		]
+	});
+	const renderCustomSkeleton = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, _lumeweb_portal_framework_ui_core.cn)(`grid grid-cols-${cols} gap-4`, className),
+		children: Array.from({ length: cols * rows }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.Skeleton, { className: "h-4 w-full" }, index))
+	});
+	const renderDefaultSkeleton = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _lumeweb_portal_framework_ui_core.cn)("space-y-2", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.Skeleton, { className: "h-4 w-full" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.Skeleton, { className: "h-4 w-5/6" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.Skeleton, { className: "h-4 w-4/6" })
+		]
+	});
+	switch (layout) {
+		case "card": return renderCardSkeleton();
+		case "custom": return renderCustomSkeleton();
+		case "list": return renderListSkeleton();
+		case "profile": return renderProfileSkeleton();
+		case "table": return renderTableSkeleton();
+		default: return renderDefaultSkeleton();
+	}
+}
+var init_SkeletonLoader = require_rolldown_runtime.__esmMin((() => {}));
+
+//#endregion
+init_SkeletonLoader();
+exports.SkeletonLoader = SkeletonLoader;
+Object.defineProperty(exports, 'init_SkeletonLoader', {
+  enumerable: true,
+  get: function () {
+    return init_SkeletonLoader;
+  }
+});
+//# sourceMappingURL=SkeletonLoader.cjs.map

package/dist/cjs/components/SkeletonLoader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonLoader.cjs","names":["Table","TableHeader","TableRow","TableHead","Skeleton","TableBody","TableCell"],"sources":["../../../src/components/SkeletonLoader.tsx"],"sourcesContent":["import {\n  cn,\n  Skeleton,\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport { BaseRecord, HttpError } from \"@refinedev/core\";\nimport { UseTableReturnType } from \"@refinedev/react-table\";\nimport { flexRender } from \"@tanstack/react-table\";\nimport React, { type JSX } from \"react\";\n\ntype LayoutType = \"card\" | \"custom\" | \"default\" | \"list\" | \"profile\" | \"table\";\n\ninterface SkeletonLoaderProps<TData extends BaseRecord> {\n  className?: string;\n  cols?: number;\n  layout?: LayoutType;\n  rows?: number;\n  showHeader?: boolean;\n  table?: UseTableReturnType<TData, HttpError>;\n}\n\nexport function SkeletonLoader<TData extends BaseRecord>({\n  className,\n  cols = 3,\n  layout = \"default\",\n  rows = 3,\n  showHeader = true,\n  table,\n}: SkeletonLoaderProps<TData>): JSX.Element {\n  const renderTableSkeleton = (): JSX.Element => {\n    if (!table) {\n      console.warn(\"Table object is required for table layout\");\n      return <></>;\n    }\n\n    return (\n      <Table className={cn(\"w-full border-collapse\", className)}>\n        {showHeader && (\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className={\"border-none\"} key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead\n                    className={\"border-none\"}\n                    key={header.id}\n                    style={{ width: header.getSize() }}>\n                    {header.isPlaceholder ? (\n                      <Skeleton className=\"h-4 w-full\" />\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n        )}\n        <TableBody>\n          {Array.from({ length: rows }).map((_, rowIndex) => (\n            <TableRow className={\"border-none\"} key={rowIndex}>\n              {table.getAllColumns().map((column) => (\n                <TableCell className={\"border-none\"} key={column.id}>\n                  <Skeleton className=\"h-4 w-full\" />\n                </TableCell>\n              ))}\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    );\n  };\n\n  const renderCardSkeleton = (): JSX.Element => (\n    <div className={cn(\"space-y-2\", className)}>\n      <Skeleton className=\"h-40 w-full\" />\n      <Skeleton className=\"h-4 w-3/4\" />\n      <Skeleton className=\"h-4 w-1/2\" />\n    </div>\n  );\n\n  const renderListSkeleton = (): JSX.Element => (\n    <div className={cn(\"flex items-center space-x-4\", className)}>\n      <Skeleton className=\"h-12 w-12 rounded-full\" />\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-[200px]\" />\n        <Skeleton className=\"h-4 w-[150px]\" />\n      </div>\n    </div>\n  );\n\n  const renderProfileSkeleton = (): JSX.Element => (\n    <div className={cn(\"space-y-4\", className)}>\n      <Skeleton className=\"h-20 w-20 rounded-full\" />\n      <Skeleton className=\"h-4 w-[150px]\" />\n      <Skeleton className=\"h-4 w-[200px]\" />\n    </div>\n  );\n\n  const renderCustomSkeleton = (): JSX.Element => (\n    <div className={cn(`grid grid-cols-${cols} gap-4`, className)}>\n      {Array.from({ length: cols * rows }).map((_, index) => (\n        <Skeleton className=\"h-4 w-full\" key={index} />\n      ))}\n    </div>\n  );\n\n  const renderDefaultSkeleton = (): JSX.Element => (\n    <div className={cn(\"space-y-2\", className)}>\n      <Skeleton className=\"h-4 w-full\" />\n      <Skeleton className=\"h-4 w-5/6\" />\n      <Skeleton className=\"h-4 w-4/6\" />\n    </div>\n  );\n\n  switch (layout) {\n    case \"card\":\n      return renderCardSkeleton();\n    case \"custom\":\n      return renderCustomSkeleton();\n    case \"list\":\n      return renderListSkeleton();\n    case \"profile\":\n      return renderProfileSkeleton();\n    case \"table\":\n      return renderTableSkeleton();\n    default:\n      return renderDefaultSkeleton();\n  }\n}\n"],"mappings":";;;;;;;;AA0BA,SAAgB,eAAyC,EACvD,WACA,OAAO,GACP,SAAS,WACT,OAAO,GACP,aAAa,MACb,SAC0C;CAC1C,MAAM,4BAAyC;AAC7C,MAAI,CAAC,OAAO;AACV,WAAQ,KAAK,4CAA4C;AACzD,UAAO,0EAAK;;AAGd,SACE,4CAACA;GAAM,qDAAc,0BAA0B,UAAU;cACtD,cACC,2CAACC,2DACE,MAAM,iBAAiB,CAAC,KAAK,gBAC5B,2CAACC;IAAS,WAAW;cAClB,YAAY,QAAQ,KAAK,WACxB,2CAACC;KACC,WAAW;KAEX,OAAO,EAAE,OAAO,OAAO,SAAS,EAAE;eACjC,OAAO,gBACN,2CAACC,8CAAS,WAAU,eAAe,yCAGjC,OAAO,OAAO,UAAU,QACxB,OAAO,YAAY,CACpB;OARE,OAAO,GAUF,CACZ;MAfqC,YAAY,GAgB1C,CACX,GACU,EAEhB,2CAACC,yDACE,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,CAAC,KAAK,GAAG,aACpC,2CAACH;IAAS,WAAW;cAClB,MAAM,eAAe,CAAC,KAAK,WAC1B,2CAACI;KAAU,WAAW;eACpB,2CAACF,8CAAS,WAAU,eAAe;OADK,OAAO,GAErC,CACZ;MALqC,SAM9B,CACX,GACQ;IACN;;CAIZ,MAAM,2BACJ,4CAAC;EAAI,qDAAc,aAAa,UAAU;;GACxC,2CAACA,8CAAS,WAAU,gBAAgB;GACpC,2CAACA,8CAAS,WAAU,cAAc;GAClC,2CAACA,8CAAS,WAAU,cAAc;;GAC9B;CAGR,MAAM,2BACJ,4CAAC;EAAI,qDAAc,+BAA+B,UAAU;aAC1D,2CAACA,8CAAS,WAAU,2BAA2B,EAC/C,4CAAC;GAAI,WAAU;cACb,2CAACA,8CAAS,WAAU,kBAAkB,EACtC,2CAACA,8CAAS,WAAU,kBAAkB;IAClC;GACF;CAGR,MAAM,8BACJ,4CAAC;EAAI,qDAAc,aAAa,UAAU;;GACxC,2CAACA,8CAAS,WAAU,2BAA2B;GAC/C,2CAACA,8CAAS,WAAU,kBAAkB;GACtC,2CAACA,8CAAS,WAAU,kBAAkB;;GAClC;CAGR,MAAM,6BACJ,2CAAC;EAAI,qDAAc,kBAAkB,KAAK,SAAS,UAAU;YAC1D,MAAM,KAAK,EAAE,QAAQ,OAAO,MAAM,CAAC,CAAC,KAAK,GAAG,UAC3C,2CAACA,8CAAS,WAAU,gBAAkB,MAAS,CAC/C;GACE;CAGR,MAAM,8BACJ,4CAAC;EAAI,qDAAc,aAAa,UAAU;;GACxC,2CAACA,8CAAS,WAAU,eAAe;GACnC,2CAACA,8CAAS,WAAU,cAAc;GAClC,2CAACA,8CAAS,WAAU,cAAc;;GAC9B;AAGR,SAAQ,QAAR;EACE,KAAK,OACH,QAAO,oBAAoB;EAC7B,KAAK,SACH,QAAO,sBAAsB;EAC/B,KAAK,OACH,QAAO,oBAAoB;EAC7B,KAAK,UACH,QAAO,uBAAuB;EAChC,KAAK,QACH,QAAO,qBAAqB;EAC9B,QACE,QAAO,uBAAuB"}

package/dist/cjs/components/SkeletonLoader.d.cts

@@ -0,0 +1,25 @@
+import { JSX } from "react";
+import { BaseRecord, HttpError } from "@refinedev/core";
+import { UseTableReturnType } from "@refinedev/react-table";
+
+//#region src/components/SkeletonLoader.d.ts
+type LayoutType = "card" | "custom" | "default" | "list" | "profile" | "table";
+interface SkeletonLoaderProps<TData extends BaseRecord> {
+  className?: string;
+  cols?: number;
+  layout?: LayoutType;
+  rows?: number;
+  showHeader?: boolean;
+  table?: UseTableReturnType<TData, HttpError>;
+}
+declare function SkeletonLoader<TData extends BaseRecord>({
+  className,
+  cols,
+  layout,
+  rows,
+  showHeader,
+  table
+}: SkeletonLoaderProps<TData>): JSX.Element;
+//#endregion
+export { SkeletonLoader };
+//# sourceMappingURL=SkeletonLoader.d.cts.map

package/dist/cjs/components/TableActionsDropdown.cjs

@@ -0,0 +1,44 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let _lumeweb_portal_framework_ui_core = require("@lumeweb/portal-framework-ui-core");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+
+//#region src/components/TableActionsDropdown.tsx
+function TableActionsDropdown({ actions, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_lumeweb_portal_framework_ui_core.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.DropdownMenuTrigger, {
+		asChild: true,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_lumeweb_portal_framework_ui_core.Button, {
+			className: "h-8 w-8",
+			size: "icon",
+			variant: "ghost",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MoreHorizontal, { className: "h-4 w-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "sr-only",
+				children: "Open menu"
+			})]
+		})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_lumeweb_portal_framework_ui_core.DropdownMenuContent, {
+		align: "end",
+		children: actions.map((action, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_lumeweb_portal_framework_ui_core.DropdownMenuItem, {
+			className: (0, _lumeweb_portal_framework_ui_core.cn)("focus:bg-accent transition-colors", action.destructive ? "text-destructive hover:bg-destructive/10" : "hover:bg-accent"),
+			onClick: action.onClick,
+			children: [action.icon, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "ml-1.5",
+				children: action.label
+			})]
+		}, index))
+	})] });
+}
+var init_TableActionsDropdown = require_rolldown_runtime.__esmMin((() => {}));
+
+//#endregion
+init_TableActionsDropdown();
+exports.TableActionsDropdown = TableActionsDropdown;
+Object.defineProperty(exports, 'init_TableActionsDropdown', {
+  enumerable: true,
+  get: function () {
+    return init_TableActionsDropdown;
+  }
+});
+//# sourceMappingURL=TableActionsDropdown.cjs.map

package/dist/cjs/components/TableActionsDropdown.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableActionsDropdown.cjs","names":["DropdownMenu","DropdownMenuTrigger","Button","MoreHorizontal","DropdownMenuContent","DropdownMenuItem"],"sources":["../../../src/components/TableActionsDropdown.tsx"],"sourcesContent":["import {\n  Button,\n  cn,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport { MoreHorizontal } from \"lucide-react\";\nimport React from \"react\";\n\nexport function TableActionsDropdown({\n  actions,\n  children,\n}: {\n  actions: {\n    destructive?: boolean;\n    icon: React.ReactNode;\n    label: string;\n    onClick: () => void;\n  }[];\n  children?: React.ReactNode;\n}): React.JSX.Element {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        {children ?? (\n          <Button className=\"h-8 w-8\" size=\"icon\" variant=\"ghost\">\n            <MoreHorizontal className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Open menu</span>\n          </Button>\n        )}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        {actions.map((action, index) => (\n          <DropdownMenuItem\n            className={cn(\n              \"focus:bg-accent transition-colors\",\n              action.destructive\n                ? \"text-destructive hover:bg-destructive/10\"\n                : \"hover:bg-accent\",\n            )}\n            key={index}\n            onClick={action.onClick}>\n            {action.icon}\n            <span className=\"ml-1.5\">{action.label}</span>\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":";;;;;;;;AAWA,SAAgB,qBAAqB,EACnC,SACA,YASoB;AACpB,QACE,4CAACA,6DACC,2CAACC;EAAoB;YAClB,YACC,4CAACC;GAAO,WAAU;GAAU,MAAK;GAAO,SAAQ;cAC9C,2CAACC,+BAAe,WAAU,YAAY,EACtC,2CAAC;IAAK,WAAU;cAAU;KAAgB;IACnC;GAES,EACtB,2CAACC;EAAoB,OAAM;YACxB,QAAQ,KAAK,QAAQ,UACpB,4CAACC;GACC,qDACE,qCACA,OAAO,cACH,6CACA,kBACL;GAED,SAAS,OAAO;cACf,OAAO,MACR,2CAAC;IAAK,WAAU;cAAU,OAAO;KAAa;KAHzC,MAIY,CACnB;GACkB,IACT"}

package/dist/cjs/components/TableActionsDropdown.d.cts

@@ -0,0 +1,18 @@
+import React from "react";
+
+//#region src/components/TableActionsDropdown.d.ts
+declare function TableActionsDropdown({
+  actions,
+  children
+}: {
+  actions: {
+    destructive?: boolean;
+    icon: React.ReactNode;
+    label: string;
+    onClick: () => void;
+  }[];
+  children?: React.ReactNode;
+}): React.JSX.Element;
+//#endregion
+export { TableActionsDropdown };
+//# sourceMappingURL=TableActionsDropdown.d.cts.map

package/dist/cjs/components/TableContainer.cjs

@@ -0,0 +1,25 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let _lumeweb_portal_framework_ui_core = require("@lumeweb/portal-framework-ui-core");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/TableContainer.tsx
+function TableContainer({ children, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, _lumeweb_portal_framework_ui_core.cn)("rounded-lg border p-6 shadow-sm", className),
+		children
+	});
+}
+var init_TableContainer = require_rolldown_runtime.__esmMin((() => {}));
+
+//#endregion
+init_TableContainer();
+exports.TableContainer = TableContainer;
+Object.defineProperty(exports, 'init_TableContainer', {
+  enumerable: true,
+  get: function () {
+    return init_TableContainer;
+  }
+});
+//# sourceMappingURL=TableContainer.cjs.map