npm - @lumeweb/portal-framework-ui - Versions diffs - 0.0.1 → 0.1.0 - Mend

@lumeweb/portal-framework-ui 0.0.1 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1537) hide show

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

@@ -0,0 +1 @@

+ {"version":3,"file":"MainNavigation.js","names":["Icon","active","label"],"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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,81 @@
+import { __esmMin } from "../_virtual/rolldown_runtime.js";
+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();
+	}
+}
+var init_SkeletonLoader = __esmMin(() => {});
+//#endregion
+init_SkeletonLoader();
+export { SkeletonLoader, init_SkeletonLoader };
+//# sourceMappingURL=SkeletonLoader.js.map

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

@@ -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,iCAAK;;AAGd,SACE,qBAAC;GAAM,WAAW,GAAG,0BAA0B,UAAU;cACtD,cACC,oBAAC,yBACE,MAAM,iBAAiB,CAAC,KAAK,gBAC5B,oBAAC;IAAS,WAAW;cAClB,YAAY,QAAQ,KAAK,WACxB,oBAAC;KACC,WAAW;KAEX,OAAO,EAAE,OAAO,OAAO,SAAS,EAAE;eACjC,OAAO,gBACN,oBAAC,YAAS,WAAU,eAAe,GAEnC,WACE,OAAO,OAAO,UAAU,QACxB,OAAO,YAAY,CACpB;OARE,OAAO,GAUF,CACZ;MAfqC,YAAY,GAgB1C,CACX,GACU,EAEhB,oBAAC,uBACE,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,CAAC,KAAK,GAAG,aACpC,oBAAC;IAAS,WAAW;cAClB,MAAM,eAAe,CAAC,KAAK,WAC1B,oBAAC;KAAU,WAAW;eACpB,oBAAC,YAAS,WAAU,eAAe;OADK,OAAO,GAErC,CACZ;MALqC,SAM9B,CACX,GACQ;IACN;;CAIZ,MAAM,2BACJ,qBAAC;EAAI,WAAW,GAAG,aAAa,UAAU;;GACxC,oBAAC,YAAS,WAAU,gBAAgB;GACpC,oBAAC,YAAS,WAAU,cAAc;GAClC,oBAAC,YAAS,WAAU,cAAc;;GAC9B;CAGR,MAAM,2BACJ,qBAAC;EAAI,WAAW,GAAG,+BAA+B,UAAU;aAC1D,oBAAC,YAAS,WAAU,2BAA2B,EAC/C,qBAAC;GAAI,WAAU;cACb,oBAAC,YAAS,WAAU,kBAAkB,EACtC,oBAAC,YAAS,WAAU,kBAAkB;IAClC;GACF;CAGR,MAAM,8BACJ,qBAAC;EAAI,WAAW,GAAG,aAAa,UAAU;;GACxC,oBAAC,YAAS,WAAU,2BAA2B;GAC/C,oBAAC,YAAS,WAAU,kBAAkB;GACtC,oBAAC,YAAS,WAAU,kBAAkB;;GAClC;CAGR,MAAM,6BACJ,oBAAC;EAAI,WAAW,GAAG,kBAAkB,KAAK,SAAS,UAAU;YAC1D,MAAM,KAAK,EAAE,QAAQ,OAAO,MAAM,CAAC,CAAC,KAAK,GAAG,UAC3C,oBAAC,YAAS,WAAU,gBAAkB,MAAS,CAC/C;GACE;CAGR,MAAM,8BACJ,qBAAC;EAAI,WAAW,GAAG,aAAa,UAAU;;GACxC,oBAAC,YAAS,WAAU,eAAe;GACnC,oBAAC,YAAS,WAAU,cAAc;GAClC,oBAAC,YAAS,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/esm/components/TableActionsDropdown.d.ts ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,37 @@
+import { __esmMin } from "../_virtual/rolldown_runtime.js";
+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))
+	})] });
+}
+var init_TableActionsDropdown = __esmMin(() => {});
+//#endregion
+init_TableActionsDropdown();
+export { TableActionsDropdown, init_TableActionsDropdown };
+//# sourceMappingURL=TableActionsDropdown.js.map

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

@@ -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,2BACC,oBAAC;EAAoB;YAClB,YACC,qBAAC;GAAO,WAAU;GAAU,MAAK;GAAO,SAAQ;cAC9C,oBAAC,kBAAe,WAAU,YAAY,EACtC,oBAAC;IAAK,WAAU;cAAU;KAAgB;IACnC;GAES,EACtB,oBAAC;EAAoB,OAAM;YACxB,QAAQ,KAAK,QAAQ,UACpB,qBAAC;GACC,WAAW,GACT,qCACA,OAAO,cACH,6CACA,kBACL;GAED,SAAS,OAAO;cACf,OAAO,MACR,oBAAC;IAAK,WAAU;cAAU,OAAO;KAAa;KAHzC,MAIY,CACnB;GACkB,IACT"}

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

@@ -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 ADDED Viewed

@@ -0,0 +1,18 @@
+import { __esmMin } from "../_virtual/rolldown_runtime.js";
+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
+	});
+}
+var init_TableContainer = __esmMin(() => {});
+//#endregion
+init_TableContainer();
+export { TableContainer, init_TableContainer };
+//# sourceMappingURL=TableContainer.js.map

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

@@ -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;EAAI,WAAW,GAAG,mCAAmC,UAAU;EAC7D;GACG"}

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

@@ -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 ADDED Viewed

@@ -0,0 +1,45 @@
+import { __esmMin } from "../_virtual/rolldown_runtime.js";
+import { init_usePluginMeta, usePluginMeta } from "../hooks/usePluginMeta.js";
+import { init_useTheme, 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
+var ThemeSwitcher;
+var init_ThemeSwitcher = __esmMin(() => {
+	init_usePluginMeta();
+	init_useTheme();
+	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
+init_ThemeSwitcher();
+export { ThemeSwitcher, init_ThemeSwitcher };
+//# sourceMappingURL=ThemeSwitcher.js.map

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

@@ -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":";;;;;;;;;;qBASsD;gBAEC;CAK1C,sBAAgC;EAE3C,MAAM,EAAE,aAAa,qBAAqB;EAG1C,MAAM,SAAS,cAAuB,aAAa,SAAS;AAE5D,MAAI,CAAC,OACH,QAAO;AAGT,SACE,qBAAC,sBACC,oBAAC;GAAe;aACd,qBAAC;IAAO,MAAK;IAAO,SAAQ;eAC1B,oBAAC,aAAU,WAAU,4DAA4D,EACjF,oBAAC;KAAK,WAAU;eAAU;MAAmB;KACtC;IACM,EACjB,oBAAC;GAAe,WAAU;aACxB,oBAAC;IAAI,WAAU;cACZ,OAAO,KAAK,MACX,oBAAC;KACC,WAAU;KAEV,eAAe,SAAS,EAAE,GAAG;KAC7B,SAAQ;eACP,EAAE;OAHE,EAAE,GAIA,CACT;KACE;IACS,IACT"}

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

@@ -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 ADDED Viewed

@@ -0,0 +1,23 @@
+import { __esmMin } from "../_virtual/rolldown_runtime.js";
+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, " ")
+		})
+	});
+}
+var init_ThemedBadge = __esmMin(() => {});
+//#endregion
+init_ThemedBadge();
+export { ThemedBadge, init_ThemedBadge };
+//# sourceMappingURL=ThemedBadge.js.map

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

@@ -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;EAAK,WATiB,GACvB,8KACA,MACA,OACA,MACA,UACD;YAII,WACC,WAEA,oBAAC;GAAe;GAAS,GAAI;aAC1B,SAAS,MAAM,QAAQ,MAAM,IAAI;IAC5B;GAEL"}

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

@@ -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

package/dist/esm/components/actions/ActionListRenderer.js ADDED Viewed

@@ -0,0 +1,45 @@
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import { ActionItemType, init_types } from "./types.js";
+import { getActionItemComponent, init_registry } from "./registry.js";
+import { cn } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/actions/ActionListRenderer.tsx
+var ActionListRenderer;
+var init_ActionListRenderer = __esmMin(() => {
+	init_registry();
+	init_types();
+	ActionListRenderer = ({ actions = [], className, closeDialog, isSubmitting, layout = "horizontal" }) => {
+		if (!actions || actions.length === 0) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: cn("flex w-full", layout === "vertical" ? "flex-col space-y-3" : "flex-row flex-wrap items-center justify-end gap-4", className),
+			children: actions.map((action, index) => {
+				if (action.type === ActionItemType.CUSTOM_COMPONENT) {
+					const CustomComponent = action.component;
+					return /* @__PURE__ */ jsx(CustomComponent, {
+						...action.props,
+						closeDialog,
+						isSubmitting
+					}, action.key ?? index);
+				}
+				const ActionComponent = getActionItemComponent(action.type);
+				if (!ActionComponent) {
+					console.warn(`No component registered for action type: ${action.type}`);
+					return null;
+				}
+				const key = action.key ?? index;
+				return /* @__PURE__ */ jsx(ActionComponent, {
+					closeDialog,
+					config: action,
+					isSubmitting
+				}, key);
+			})
+		});
+	};
+});
+//#endregion
+init_ActionListRenderer();
+export { ActionListRenderer, init_ActionListRenderer };
+//# sourceMappingURL=ActionListRenderer.js.map

package/dist/esm/components/actions/ActionListRenderer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ActionListRenderer.js","names":[],"sources":["../../../../src/components/actions/ActionListRenderer.tsx"],"sourcesContent":["import { cn } from \"@lumeweb/portal-framework-ui-core\";\nimport React from \"react\";\n\nimport { getActionItemComponent } from \"./registry\";\nimport { ActionItemConfig, ActionItemType, ActionListLayout } from \"./types\";\n\ninterface ActionListRendererProps {\n actions: ActionItemConfig[];\n className?: string;\n closeDialog?: () => void;\n isSubmitting?: boolean;\n layout?: ActionListLayout;\n}\n\nexport const ActionListRenderer: React.FC<ActionListRendererProps> = ({\n actions = [],\n className,\n closeDialog,\n isSubmitting,\n layout = \"horizontal\",\n}) => {\n if (!actions || actions.length === 0) {\n return null;\n }\n\n return (\n <div\n className={cn(\n \"flex w-full\",\n layout === \"vertical\"\n ? \"flex-col space-y-3\"\n : \"flex-row flex-wrap items-center justify-end gap-4\",\n className,\n )}>\n {actions.map((action: ActionItemConfig, index) => {\n if (action.type === ActionItemType.CUSTOM_COMPONENT) {\n const CustomComponent = action.component;\n return (\n <CustomComponent\n key={action.key ?? index}\n {...action.props}\n closeDialog={closeDialog}\n isSubmitting={isSubmitting}\n />\n );\n }\n\n const ActionComponent = getActionItemComponent(action.type);\n if (!ActionComponent) {\n console.warn(\n `No component registered for action type: ${action.type}`,\n );\n return null;\n }\n\n const key = action.key ?? index;\n\n return (\n <ActionComponent\n closeDialog={closeDialog}\n config={action}\n isSubmitting={isSubmitting}\n key={key}\n />\n );\n })}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;gBAGoD;aACyB;CAUhE,sBAAyD,EACpE,UAAU,EAAE,EACZ,WACA,aACA,cACA,SAAS,mBACL;AACJ,MAAI,CAAC,WAAW,QAAQ,WAAW,EACjC,QAAO;AAGT,SACE,oBAAC;GACC,WAAW,GACT,eACA,WAAW,aACP,uBACA,qDACJ,UACD;aACA,QAAQ,KAAK,QAA0B,UAAU;AAChD,QAAI,OAAO,SAAS,eAAe,kBAAkB;KACnD,MAAM,kBAAkB,OAAO;AAC/B,YACE,oBAAC;MAEC,GAAI,OAAO;MACE;MACC;QAHT,OAAO,OAAO,MAInB;;IAIN,MAAM,kBAAkB,uBAAuB,OAAO,KAAK;AAC3D,QAAI,CAAC,iBAAiB;AACpB,aAAQ,KACN,4CAA4C,OAAO,OACpD;AACD,YAAO;;IAGT,MAAM,MAAM,OAAO,OAAO;AAE1B,WACE,oBAAC;KACc;KACb,QAAQ;KACM;OACT,IACL;KAEJ;IACE"}

package/dist/esm/components/actions/ActionListRenderer.spec.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { };

package/dist/esm/components/actions/ActionListRenderer.spec.js ADDED Viewed

@@ -0,0 +1,168 @@
+import { ActionItemType, init_types } from "./types.js";
+import { init_registry, registerActionItemComponent, resetRegistryForTesting } from "./registry.js";
+import { ActionListRenderer, init_ActionListRenderer } from "./ActionListRenderer.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "/home/runner/work/web/web/node_modules/.pnpm/vitest@4.0.16_@types+node@25.0.6_@vitest+browser-playwright@4.0.16_happy-dom@20.1.0_jit_f9bfc6b661e56e62de1f809a028e46f4/node_modules/vitest/dist/index.js";
+//#region src/components/actions/ActionListRenderer.spec.tsx
+init_ActionListRenderer();
+init_registry();
+init_types();
+const MockCancelActionItem = vi.fn(({ closeDialog, config, isSubmitting }) => /* @__PURE__ */ jsx("button", {
+	"data-testid": "cancel-action",
+	disabled: isSubmitting || config.disabled,
+	onClick: () => {
+		if (config.onClick) config.onClick();
+		else if (closeDialog) closeDialog();
+	},
+	children: config.label || config.children || "Mock Cancel"
+}));
+const MockCustomActionItem = vi.fn(({ config, isSubmitting }) => /* @__PURE__ */ jsx("button", {
+	"data-testid": "custom-action",
+	disabled: isSubmitting || config.disabled,
+	onClick: config.onClick,
+	children: config.label || config.children || "Mock Custom"
+}));
+const MockLinkActionItem = vi.fn(({ config }) => /* @__PURE__ */ jsx("a", {
+	"data-testid": "link-action",
+	href: config.to,
+	target: config.target,
+	children: config.label || config.children || "Mock Link"
+}));
+const MockSubmitActionItem = vi.fn(({ config, isSubmitting }) => /* @__PURE__ */ jsxs("button", {
+	"data-testid": "submit-action",
+	disabled: isSubmitting || config.disabled,
+	type: "submit",
+	children: [isSubmitting && /* @__PURE__ */ jsx("span", {
+		"data-testid": "spinner",
+		children: "Loading..."
+	}), config.label || config.children || "Mock Submit"]
+}));
+describe("ActionListRenderer", () => {
+	beforeEach(() => {
+		resetRegistryForTesting();
+		registerActionItemComponent(ActionItemType.CANCEL, MockCancelActionItem);
+		registerActionItemComponent(ActionItemType.CUSTOM, MockCustomActionItem);
+		registerActionItemComponent(ActionItemType.LINK, MockLinkActionItem);
+		registerActionItemComponent(ActionItemType.SUBMIT, MockSubmitActionItem);
+		vi.clearAllMocks();
+	});
+	afterEach(() => {
+		cleanup();
+		vi.clearAllMocks();
+	});
+	it("renders null if no actions are provided", () => {
+		const { container } = render(/* @__PURE__ */ jsx(ActionListRenderer, { actions: [] }));
+		expect(container).toBeEmptyDOMElement();
+	});
+	it("renders null if actions is undefined", () => {
+		const { container } = render(/* @__PURE__ */ jsx(ActionListRenderer, { actions: void 0 }));
+		expect(container).toBeEmptyDOMElement();
+	});
+	it("renders action items based on the provided config", () => {
+		render(/* @__PURE__ */ jsx(ActionListRenderer, { actions: [{
+			label: "Close",
+			type: ActionItemType.CANCEL
+		}, {
+			label: "Save",
+			type: ActionItemType.SUBMIT
+		}] }));
+		expect(screen.getByTestId("cancel-action")).toHaveTextContent("Close");
+		expect(screen.getByTestId("submit-action")).toHaveTextContent("Save");
+	});
+	it("passes closeDialog and isSubmitting props to action items", () => {
+		const mockCloseDialog = vi.fn();
+		render(/* @__PURE__ */ jsx(ActionListRenderer, {
+			actions: [{
+				label: "Close",
+				type: ActionItemType.CANCEL
+			}],
+			closeDialog: mockCloseDialog,
+			isSubmitting: true
+		}));
+		expect(MockCancelActionItem).toHaveBeenCalledWith(expect.objectContaining({
+			closeDialog: mockCloseDialog,
+			isSubmitting: true
+		}), {});
+	});
+	it("applies horizontal layout by default", () => {
+		const { container } = render(/* @__PURE__ */ jsx(ActionListRenderer, { actions: [{
+			label: "Close",
+			type: ActionItemType.CANCEL
+		}, {
+			label: "Save",
+			type: ActionItemType.SUBMIT
+		}] }));
+		const div = container.firstChild;
+		expect(div).toHaveClass("flex-row");
+		expect(div).toHaveClass("justify-end");
+		expect(div).toHaveClass("space-x-3");
+	});
+	it("applies vertical layout when specified", () => {
+		const { container } = render(/* @__PURE__ */ jsx(ActionListRenderer, {
+			actions: [{
+				label: "Close",
+				type: ActionItemType.CANCEL
+			}, {
+				label: "Save",
+				type: ActionItemType.SUBMIT
+			}],
+			layout: "vertical"
+		}));
+		const div = container.firstChild;
+		expect(div).toHaveClass("flex-col");
+		expect(div).toHaveClass("space-y-3");
+	});
+	it("applies custom className", () => {
+		const { container } = render(/* @__PURE__ */ jsx(ActionListRenderer, {
+			actions: [{
+				label: "Close",
+				type: ActionItemType.CANCEL
+			}],
+			className: "custom-class"
+		}));
+		const div = container.firstChild;
+		expect(div).toHaveClass("custom-class");
+	});
+	it("handles action items with keys", () => {
+		render(/* @__PURE__ */ jsx(ActionListRenderer, { actions: [{
+			key: "cancel-key",
+			label: "Close",
+			type: ActionItemType.CANCEL
+		}, {
+			key: "submit-key",
+			label: "Save",
+			type: ActionItemType.SUBMIT
+		}] }));
+		expect(screen.getByTestId("cancel-action")).toBeInTheDocument();
+		expect(screen.getByTestId("submit-action")).toBeInTheDocument();
+	});
+	it("warns and skips rendering for unregistered action types", () => {
+		const consoleWarnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+		render(/* @__PURE__ */ jsx(ActionListRenderer, { actions: [{
+			label: "Unknown",
+			type: "unknown-type"
+		}] }));
+		expect(consoleWarnSpy).toHaveBeenCalledWith("No component registered for action type: unknown-type");
+		expect(screen.queryByText("Unknown")).not.toBeInTheDocument();
+		consoleWarnSpy.mockRestore();
+	});
+	it("renders custom components when type is CUSTOM_COMPONENT", () => {
+		const CustomComp = ({ text }) => /* @__PURE__ */ jsx("div", {
+			"data-testid": "custom-comp",
+			children: text
+		});
+		render(/* @__PURE__ */ jsx(ActionListRenderer, { actions: [{
+			component: CustomComp,
+			props: { text: "Hello World" },
+			type: ActionItemType.CUSTOM_COMPONENT
+		}] }));
+		expect(screen.getByTestId("custom-comp")).toBeInTheDocument();
+		expect(screen.getByTestId("custom-comp")).toHaveTextContent("Hello World");
+	});
+});
+//#endregion
+//# sourceMappingURL=ActionListRenderer.spec.js.map