@lumeweb/portal-framework-ui 0.0.1 → 0.1.1

package/dist/esm/components/MainNavigation.d.ts

@@ -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.ts.map

package/dist/esm/components/MainNavigation.js

@@ -0,0 +1,227 @@
+import { useSidebarContext } from "./layout/SidebarContext.js";
+import { useMenuItems } from "../hooks/useMenuItems.js";
+import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger, ScrollArea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn } from "@lumeweb/portal-framework-ui-core";
+import { Link } from "@refinedev/core";
+import React from "react";
+import { useLocation } from "react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, Dot } from "lucide-react";
+
+//#region src/components/MainNavigation.tsx
+const 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;
+};
+const isChildRouteActive = (child, parent, currentPathname) => {
+	if (child.index && child.path === "" && parent.path === currentPathname) return true;
+	return isRouteActive(child, currentPathname);
+};
+const NavItemContent = ({ IconComponent, isCollapsed, item }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex items-center",
+	children: [IconComponent && /* @__PURE__ */ jsx("span", {
+		className: "mr-2 h-5 w-5",
+		children: /* @__PURE__ */ jsx(IconComponent, {})
+	}), /* @__PURE__ */ jsx("span", {
+		className: cn({ hidden: isCollapsed }),
+		children: item.label
+	})]
+});
+const CollapseMenuButton = ({ active, icon: Icon, isOpen, item, label, onItemClick, resetKey, submenus }) => {
+	const pathname = useLocation().pathname;
+	const isSubmenuActive = submenus.some((submenu) => submenu.active === void 0 ? submenu.href === pathname : submenu.active);
+	const [isOpenState, setIsOpenState] = React.useState(active || isSubmenuActive);
+	const headerHref = item.path || submenus[0]?.href;
+	React.useEffect(() => {
+		setIsOpenState(active || isSubmenuActive);
+	}, [active, isSubmenuActive]);
+	React.useEffect(() => {
+		if (resetKey) setIsOpenState(false);
+	}, [resetKey]);
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		className: "w-full",
+		onOpenChange: setIsOpenState,
+		open: isOpenState,
+		children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+			asChild: true,
+			className: "mb-1 [&[data-state=open]>div>div>svg]:rotate-180",
+			children: /* @__PURE__ */ jsx(Button, {
+				className: "h-10 w-full justify-start",
+				variant: active || isSubmenuActive ? "secondary" : "ghost",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex w-full items-center justify-between",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center",
+						children: [Icon && /* @__PURE__ */ jsx("span", {
+							className: "mr-4",
+							children: /* @__PURE__ */ jsx(Icon, { size: 18 })
+						}), headerHref && item.linkable !== false ? /* @__PURE__ */ jsx(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__ */ jsx("p", {
+								className: cn({
+									"-translate-x-96 opacity-0": !isOpen,
+									"translate-x-0 opacity-100": isOpen
+								}),
+								children: label
+							})
+						}) : /* @__PURE__ */ jsx("p", {
+							"aria-disabled": "true",
+							className: cn({
+								"-translate-x-96 opacity-0": !isOpen,
+								"translate-x-0 opacity-100": isOpen
+							}),
+							children: label
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: cn("whitespace-nowrap", isOpen ? "translate-x-0 opacity-100" : "-translate-x-96 opacity-0"),
+						children: /* @__PURE__ */ jsx(ChevronDown, {
+							className: "transition-transform duration-200",
+							size: 18
+						})
+					})]
+				})
+			})
+		}), /* @__PURE__ */ jsx(CollapsibleContent, {
+			className: "data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden",
+			children: submenus.map(({ active, href, icon: Icon, label }, index) => /* @__PURE__ */ jsx(Button, {
+				asChild: true,
+				className: "mb-1 h-10 w-full justify-start",
+				variant: active === void 0 && pathname === href || active ? "secondary" : "ghost",
+				children: /* @__PURE__ */ jsxs(Link, {
+					onClick: () => {
+						if (onItemClick) onItemClick();
+					},
+					to: href,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "ml-2 mr-4",
+						children: Icon ? /* @__PURE__ */ jsx(Icon, { size: 18 }) : /* @__PURE__ */ jsx(Dot, { size: 18 })
+					}), /* @__PURE__ */ jsx("p", {
+						className: cn({
+							"-translate-x-96 opacity-0": !isOpen,
+							"translate-x-0 opacity-100": isOpen
+						}),
+						children: label
+					})]
+				})
+			}, index))
+		})]
+	});
+};
+const LinkableNavItem = ({ active, IconComponent, isCollapsed, item, onItemClick }) => /* @__PURE__ */ jsx(Button, {
+	asChild: true,
+	className: "mb-1 h-10 w-full justify-start",
+	variant: active ? "secondary" : "ghost",
+	children: /* @__PURE__ */ jsx(Link, {
+		onClick: onItemClick,
+		to: item.path || "",
+		children: /* @__PURE__ */ jsx(NavItemContent, {
+			active,
+			IconComponent,
+			isCollapsed,
+			item,
+			onItemClick
+		})
+	})
+});
+const NonLinkableNavItem = ({ active, IconComponent, isCollapsed, item, onItemClick }) => /* @__PURE__ */ jsx(Button, {
+	className: "mb-1 h-10 w-full justify-start",
+	onClick: onItemClick,
+	variant: active ? "secondary" : "ghost",
+	children: /* @__PURE__ */ jsx(NavItemContent, {
+		active,
+		IconComponent,
+		isCollapsed,
+		item,
+		onItemClick
+	})
+});
+const NavItem = React.forwardRef(({ active, item, onItemClick }, ref) => {
+	const { isCollapsed } = useSidebarContext();
+	let IconComponent = void 0;
+	if (item.icon) IconComponent = item.icon;
+	return /* @__PURE__ */ jsx("li", {
+		ref,
+		children: item.linkable !== false && Boolean(item.path) ? /* @__PURE__ */ jsx(LinkableNavItem, {
+			active,
+			IconComponent,
+			isCollapsed,
+			item,
+			onItemClick
+		}) : /* @__PURE__ */ jsx(NonLinkableNavItem, {
+			active,
+			IconComponent,
+			isCollapsed,
+			item,
+			onItemClick
+		})
+	});
+});
+NavItem.displayName = "NavItem";
+const MainNavigation = ({ isOpen, onItemClick }) => {
+	const menu = useMenuItems();
+	const pathname = 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__ */ jsx(CollapseMenuButton, {
+				active,
+				icon: CollapseMenuIcon,
+				isOpen,
+				item,
+				label: item.label,
+				onItemClick,
+				resetKey: typeof onItemClick === "function" ? pathname : void 0,
+				submenus
+			}, item.id);
+		} else return /* @__PURE__ */ jsx(TooltipProvider, {
+			disableHoverableContent: true,
+			children: /* @__PURE__ */ jsxs(Tooltip, {
+				delayDuration: 100,
+				children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(NavItem, {
+						active,
+						item,
+						onItemClick
+					})
+				}), isOpen === false && /* @__PURE__ */ jsx(TooltipContent, {
+					side: "right",
+					children: item.label
+				})]
+			})
+		}, item.id);
+	};
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		className: "[&>div>div[style]]:!block",
+		children: /* @__PURE__ */ jsx("nav", {
+			className: "mt-8 flex h-full w-full flex-col",
+			children: /* @__PURE__ */ 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
+export { MainNavigation };
+//# sourceMappingURL=MainNavigation.js.map

package/dist/esm/components/MainNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MainNavigation.js","names":[],"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/esm/components/SkeletonLoader.d.ts

@@ -0,0 +1,25 @@
+import { BaseRecord, HttpError } from "@refinedev/core";
+import { JSX } from "react";
+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.ts.map

package/dist/esm/components/SkeletonLoader.js

@@ -0,0 +1,78 @@
+import { Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, cn } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { flexRender } from "@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__ */ jsx(Fragment, {});
+		}
+		return /* @__PURE__ */ jsxs(Table, {
+			className: cn("w-full border-collapse", className),
+			children: [showHeader && /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, {
+				className: "border-none",
+				children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, {
+					className: "border-none",
+					style: { width: header.getSize() },
+					children: header.isPlaceholder ? /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) : flexRender(header.column.columnDef.header, header.getContext())
+				}, header.id))
+			}, headerGroup.id)) }), /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableRow, {
+				className: "border-none",
+				children: table.getAllColumns().map((column) => /* @__PURE__ */ jsx(TableCell, {
+					className: "border-none",
+					children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" })
+				}, column.id))
+			}, rowIndex)) })]
+		});
+	};
+	const renderCardSkeleton = () => /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-2", className),
+		children: [
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" })
+		]
+	});
+	const renderListSkeleton = () => /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center space-x-4", className),
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-12 rounded-full" }), /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-[200px]" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-[150px]" })]
+		})]
+	});
+	const renderProfileSkeleton = () => /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-4", className),
+		children: [
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-20 rounded-full" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-[150px]" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-[200px]" })
+		]
+	});
+	const renderCustomSkeleton = () => /* @__PURE__ */ jsx("div", {
+		className: cn(`grid grid-cols-${cols} gap-4`, className),
+		children: Array.from({ length: cols * rows }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }, index))
+	});
+	const renderDefaultSkeleton = () => /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-2", className),
+		children: [
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-5/6" }),
+			/* @__PURE__ */ jsx(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();
+	}
+}
+
+//#endregion
+export { SkeletonLoader };
+//# sourceMappingURL=SkeletonLoader.js.map

package/dist/esm/components/SkeletonLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonLoader.js","names":[],"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,gCAAK;;AAGd,SACE,qBAAC,OAAD;GAAO,WAAW,GAAG,0BAA0B,UAAU;aAAzD,CACG,cACC,oBAAC,aAAD,YACG,MAAM,iBAAiB,CAAC,KAAK,gBAC5B,oBAAC,UAAD;IAAU,WAAW;cAClB,YAAY,QAAQ,KAAK,WACxB,oBAAC,WAAD;KACE,WAAW;KAEX,OAAO,EAAE,OAAO,OAAO,SAAS,EAAE;eACjC,OAAO,gBACN,oBAAC,UAAD,EAAU,WAAU,cAAe,IAEnC,WACE,OAAO,OAAO,UAAU,QACxB,OAAO,YAAY,CACpB;KAEO,EAVL,OAAO,GAUF,CACZ;IACO,EAhB8B,YAAY,GAgB1C,CACX,EACU,GAEhB,oBAAC,WAAD,YACG,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,CAAC,KAAK,GAAG,aACpC,oBAAC,UAAD;IAAU,WAAW;cAClB,MAAM,eAAe,CAAC,KAAK,WAC1B,oBAAC,WAAD;KAAW,WAAW;eACpB,oBAAC,UAAD,EAAU,WAAU,cAAe;KACzB,EAF8B,OAAO,GAErC,CACZ;IACO,EAN8B,SAM9B,CACX,EACQ,EACN;;;CAIZ,MAAM,2BACJ,qBAAC,OAAD;EAAK,WAAW,GAAG,aAAa,UAAU;YAA1C;GACE,oBAAC,UAAD,EAAU,WAAU,eAAgB;GACpC,oBAAC,UAAD,EAAU,WAAU,aAAc;GAClC,oBAAC,UAAD,EAAU,WAAU,aAAc;GAC9B;;CAGR,MAAM,2BACJ,qBAAC,OAAD;EAAK,WAAW,GAAG,+BAA+B,UAAU;YAA5D,CACE,oBAAC,UAAD,EAAU,WAAU,0BAA2B,GAC/C,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,UAAD,EAAU,WAAU,iBAAkB,GACtC,oBAAC,UAAD,EAAU,WAAU,iBAAkB,EAClC;KACF;;CAGR,MAAM,8BACJ,qBAAC,OAAD;EAAK,WAAW,GAAG,aAAa,UAAU;YAA1C;GACE,oBAAC,UAAD,EAAU,WAAU,0BAA2B;GAC/C,oBAAC,UAAD,EAAU,WAAU,iBAAkB;GACtC,oBAAC,UAAD,EAAU,WAAU,iBAAkB;GAClC;;CAGR,MAAM,6BACJ,oBAAC,OAAD;EAAK,WAAW,GAAG,kBAAkB,KAAK,SAAS,UAAU;YAC1D,MAAM,KAAK,EAAE,QAAQ,OAAO,MAAM,CAAC,CAAC,KAAK,GAAG,UAC3C,oBAAC,UAAD,EAAU,WAAU,cAA2B,EAAT,MAAS,CAC/C;EACE;CAGR,MAAM,8BACJ,qBAAC,OAAD;EAAK,WAAW,GAAG,aAAa,UAAU;YAA1C;GACE,oBAAC,UAAD,EAAU,WAAU,cAAe;GACnC,oBAAC,UAAD,EAAU,WAAU,aAAc;GAClC,oBAAC,UAAD,EAAU,WAAU,aAAc;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/esm/components/TableActionsDropdown.d.ts

@@ -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.ts.map

package/dist/esm/components/TableActionsDropdown.js

@@ -0,0 +1,34 @@
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, cn } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MoreHorizontal } from "lucide-react";
+
+//#region src/components/TableActionsDropdown.tsx
+function TableActionsDropdown({ actions, children }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: children ?? /* @__PURE__ */ jsxs(Button, {
+			className: "h-8 w-8",
+			size: "icon",
+			variant: "ghost",
+			children: [/* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Open menu"
+			})]
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "end",
+		children: actions.map((action, index) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			className: cn("focus:bg-accent transition-colors", action.destructive ? "text-destructive hover:bg-destructive/10" : "hover:bg-accent"),
+			onClick: action.onClick,
+			children: [action.icon, /* @__PURE__ */ jsx("span", {
+				className: "ml-1.5",
+				children: action.label
+			})]
+		}, index))
+	})] });
+}
+
+//#endregion
+export { TableActionsDropdown };
+//# sourceMappingURL=TableActionsDropdown.js.map

package/dist/esm/components/TableActionsDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableActionsDropdown.js","names":[],"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,qBAAC,cAAD,aACE,oBAAC,qBAAD;EAAqB;YAClB,YACC,qBAAC,QAAD;GAAQ,WAAU;GAAU,MAAK;GAAO,SAAQ;aAAhD,CACE,oBAAC,gBAAD,EAAgB,WAAU,WAAY,GACtC,oBAAC,QAAD;IAAM,WAAU;cAAU;IAAgB,EACnC;;EAES,GACtB,oBAAC,qBAAD;EAAqB,OAAM;YACxB,QAAQ,KAAK,QAAQ,UACpB,qBAAC,kBAAD;GACE,WAAW,GACT,qCACA,OAAO,cACH,6CACA,kBACL;GAED,SAAS,OAAO;aARlB,CASG,OAAO,MACR,oBAAC,QAAD;IAAM,WAAU;cAAU,OAAO;IAAa,EAC7B;KAJZ,MAIY,CACnB;EACkB,EACT"}

package/dist/esm/components/TableContainer.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+
+//#region src/components/TableContainer.d.ts
+declare function TableContainer({
+  children,
+  className
+}: {
+  children: React.ReactNode;
+  className?: string;
+}): React.JSX.Element;
+//#endregion
+export { TableContainer };
+//# sourceMappingURL=TableContainer.d.ts.map

package/dist/esm/components/TableContainer.js

@@ -0,0 +1,15 @@
+import { cn } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/TableContainer.tsx
+function TableContainer({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("rounded-lg border p-6 shadow-sm", className),
+		children
+	});
+}
+
+//#endregion
+export { TableContainer };
+//# sourceMappingURL=TableContainer.js.map

package/dist/esm/components/TableContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableContainer.js","names":[],"sources":["../../../src/components/TableContainer.tsx"],"sourcesContent":["import { cn } from \"@lumeweb/portal-framework-ui-core\";\nimport React from \"react\";\n\nexport function TableContainer({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}): React.JSX.Element {\n  return (\n    <div className={cn(\"rounded-lg border p-6 shadow-sm\", className)}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAGA,SAAgB,eAAe,EAC7B,UACA,aAIoB;AACpB,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,mCAAmC,UAAU;EAC7D;EACG"}

package/dist/esm/components/ThemeSwitcher.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+
+//#region src/components/ThemeSwitcher.d.ts
+declare const ThemeSwitcher: React.FC;
+//#endregion
+export { ThemeSwitcher };
+//# sourceMappingURL=ThemeSwitcher.d.ts.map

package/dist/esm/components/ThemeSwitcher.js

@@ -0,0 +1,38 @@
+import { usePluginMeta } from "../hooks/usePluginMeta.js";
+import { useThemeIdAndSetter } from "../hooks/useTheme.js";
+import { Button, Popover, PopoverContent, PopoverTrigger, ThemeIcon } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ThemeSwitcher.tsx
+const ThemeSwitcher = () => {
+	const { setTheme } = useThemeIdAndSetter();
+	const themes = usePluginMeta("dashboard", "themes");
+	if (!themes) return null;
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Button, {
+			size: "icon",
+			variant: "ghost",
+			children: [/* @__PURE__ */ jsx(ThemeIcon, { className: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all" }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Toggle theme"
+			})]
+		})
+	}), /* @__PURE__ */ jsx(PopoverContent, {
+		className: "w-56",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col space-y-2",
+			children: themes.map((t) => /* @__PURE__ */ jsx(Button, {
+				className: "text-left",
+				onClick: () => setTheme(t.id),
+				variant: "ghost",
+				children: t.name
+			}, t.id))
+		})
+	})] });
+};
+
+//#endregion
+export { ThemeSwitcher };
+//# sourceMappingURL=ThemeSwitcher.js.map

package/dist/esm/components/ThemeSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitcher.js","names":[],"sources":["../../../src/components/ThemeSwitcher.tsx"],"sourcesContent":["import {\n  Button,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  ThemeIcon,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport React from \"react\";\n\nimport { usePluginMeta } from \"@/hooks/usePluginMeta\";\n// Import the hook that provides the setter\nimport { useThemeIdAndSetter } from \"@/hooks/useTheme\";\n\n// Import Theme from the types file\nimport type { Theme } from \"@/types/theme\";\n\nexport const ThemeSwitcher: React.FC = () => {\n  // Get setTheme from the correct hook\n  const { setTheme } = useThemeIdAndSetter();\n\n  // Get themes list using the Theme type\n  const themes = usePluginMeta<Theme[]>(\"dashboard\", \"themes\");\n\n  if (!themes) {\n    return null;\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button size=\"icon\" variant=\"ghost\">\n          <ThemeIcon className=\"h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all\" />\n          <span className=\"sr-only\">Toggle theme</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-56\">\n        <div className=\"flex flex-col space-y-2\">\n          {themes.map((t) => (\n            <Button\n              className=\"text-left\"\n              key={t.id}\n              onClick={() => setTheme(t.id)}\n              variant=\"ghost\">\n              {t.name}\n            </Button>\n          ))}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n};\n"],"mappings":";;;;;;;AAgBA,MAAa,sBAAgC;CAE3C,MAAM,EAAE,aAAa,qBAAqB;CAG1C,MAAM,SAAS,cAAuB,aAAa,SAAS;AAE5D,KAAI,CAAC,OACH,QAAO;AAGT,QACE,qBAAC,SAAD,aACE,oBAAC,gBAAD;EAAgB;YACd,qBAAC,QAAD;GAAQ,MAAK;GAAO,SAAQ;aAA5B,CACE,oBAAC,WAAD,EAAW,WAAU,2DAA4D,GACjF,oBAAC,QAAD;IAAM,WAAU;cAAU;IAAmB,EACtC;;EACM,GACjB,oBAAC,gBAAD;EAAgB,WAAU;YACxB,oBAAC,OAAD;GAAK,WAAU;aACZ,OAAO,KAAK,MACX,oBAAC,QAAD;IACE,WAAU;IAEV,eAAe,SAAS,EAAE,GAAG;IAC7B,SAAQ;cACP,EAAE;IACI,EAJF,EAAE,GAIA,CACT;GACE;EACS,EACT"}

package/dist/esm/components/ThemedBadge.d.ts

@@ -0,0 +1,23 @@
+import { BadgeConfig } from "../types/badge.js";
+import { BadgeVariant } from "@lumeweb/portal-framework-ui-core";
+import { ReactNode } from "react";
+
+//#region src/components/ThemedBadge.d.ts
+interface ThemedBadgeProps<T extends string> {
+  children?: ReactNode;
+  className?: string;
+  config: BadgeConfig<T>;
+  value: T;
+  variant?: BadgeVariant;
+}
+declare function ThemedBadge<T extends string>({
+  children,
+  className,
+  config,
+  value,
+  variant,
+  ...restCoreProps
+}: ThemedBadgeProps<T>): any;
+//#endregion
+export { ThemedBadge };
+//# sourceMappingURL=ThemedBadge.d.ts.map

package/dist/esm/components/ThemedBadge.js

@@ -0,0 +1,20 @@
+import { Badge, cn } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ThemedBadge.tsx
+function ThemedBadge({ children, className, config, value, variant, ...restCoreProps }) {
+	const { base = "", dark = "", hover = "", label } = config[value] || {};
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", base, hover, dark, className),
+		children: children ? children : /* @__PURE__ */ jsx(Badge, {
+			variant,
+			...restCoreProps,
+			children: label || value.replace(/_/g, " ")
+		})
+	});
+}
+
+//#endregion
+export { ThemedBadge };
+//# sourceMappingURL=ThemedBadge.js.map

package/dist/esm/components/ThemedBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedBadge.js","names":[],"sources":["../../../src/components/ThemedBadge.tsx"],"sourcesContent":["import {\n  Badge,\n  type BadgeVariant,\n  cn,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport React, { type ReactNode } from \"react\";\n\nimport { BadgeConfig } from \"@/types\";\n\ninterface ThemedBadgeProps<T extends string> {\n  children?: ReactNode;\n  className?: string;\n  config: BadgeConfig<T>;\n  value: T;\n  variant?: BadgeVariant;\n}\n\nexport function ThemedBadge<T extends string>({\n  children,\n  className,\n  config,\n  value,\n  variant,\n  ...restCoreProps\n}: ThemedBadgeProps<T>) {\n  const { base = \"\", dark = \"\", hover = \"\", label } = config[value] || {};\n\n  const wrapperClassName = cn(\n    \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n    base,\n    hover,\n    dark,\n    className,\n  );\n\n  return (\n    <span className={wrapperClassName}>\n      {children ? (\n        children\n      ) : (\n        <Badge variant={variant} {...restCoreProps}>\n          {label || value.replace(/_/g, \" \")}\n        </Badge>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;AAiBA,SAAgB,YAA8B,EAC5C,UACA,WACA,QACA,OACA,SACA,GAAG,iBACmB;CACtB,MAAM,EAAE,OAAO,IAAI,OAAO,IAAI,QAAQ,IAAI,UAAU,OAAO,UAAU,EAAE;AAUvE,QACE,oBAAC,QAAD;EAAM,WATiB,GACvB,8KACA,MACA,OACA,MACA,UAIiC;YAC9B,WACC,WAEA,oBAAC,OAAD;GAAgB;GAAS,GAAI;aAC1B,SAAS,MAAM,QAAQ,MAAM,IAAI;GAC5B;EAEL"}

package/dist/esm/components/actions/ActionListRenderer.d.ts

@@ -0,0 +1,15 @@
+import { ActionItemConfig, ActionListLayout } from "./types.js";
+import React from "react";
+
+//#region src/components/actions/ActionListRenderer.d.ts
+interface ActionListRendererProps {
+  actions: ActionItemConfig[];
+  className?: string;
+  closeDialog?: () => void;
+  isSubmitting?: boolean;
+  layout?: ActionListLayout;
+}
+declare const ActionListRenderer: React.FC<ActionListRendererProps>;
+//#endregion
+export { ActionListRenderer };
+//# sourceMappingURL=ActionListRenderer.d.ts.map