@krosoft/react 0.0.380 → 0.0.382

package/dist/components/core/navbar/Sidebar.js

@@ -0,0 +1,99 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { useKrosoftTranslation as t } from "../../../i18n/useKrosoftTranslation.js";
+import { Input as n } from "../../ui/input.js";
+import { Sheet as r, SheetContent as i, SheetDescription as a, SheetTitle as o } from "../../ui/sheet.js";
+import { Skeleton as s } from "../../ui/skeleton.js";
+import { TooltipProvider as c } from "../../ui/tooltip.js";
+import { SidebarNavItem as l } from "./SidebarNavItem.js";
+import { useSidebar as u } from "../../../hooks/behavior/useSidebar.js";
+import * as d from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { SearchIcon as m } from "lucide-react";
+//#region src/components/core/navbar/Sidebar.tsx
+var h = ({ groups: h, currentPath: g, onItemClick: _, slots: v, search: y, dense: b = !1, loading: x = !1, showCloseButton: S = !0 }) => {
+	let { t: C } = t(), { enabled: w = !1, placeholder: T } = y ?? {}, { header: E, footer: D } = v ?? {}, { collapsed: O, isMobile: k, setCollapsed: A } = u(), [j, M] = d.useState(""), N = !k && O, P = !O, F = (e) => {
+		_(e), k && A(!0);
+	}, I = j.trim().toLowerCase(), L = I === "" ? h : h.map((e) => ({
+		...e,
+		items: e.items.filter((e) => e.label.toLowerCase().includes(I) || (e.subItems?.some((e) => e.label.toLowerCase().includes(I)) ?? !1))
+	})).filter((e) => e.items.length > 0), R = /* @__PURE__ */ p("div", {
+		className: "flex flex-col h-full bg-sidebar text-sidebar-foreground",
+		children: [
+			E,
+			w && !N && /* @__PURE__ */ f("div", {
+				className: e("px-4", b ? "pt-2" : "pt-4"),
+				children: /* @__PURE__ */ p("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ f(m, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-sidebar-muted" }), /* @__PURE__ */ f(n, {
+						type: "search",
+						value: j,
+						onChange: (e) => {
+							M(e.target.value);
+						},
+						placeholder: T ?? C("search.placeholder"),
+						className: e("bg-sidebar-accent/40 border-sidebar-border pl-9 text-sidebar-foreground placeholder:text-sidebar-muted", b ? "h-8 text-sm" : "h-9")
+					})]
+				})
+			}),
+			/* @__PURE__ */ f("div", {
+				className: e("flex-1 overflow-y-auto scrollbar-modern", N ? "px-0" : "px-2", b ? "py-2" : "py-4"),
+				children: x ? Array.from({ length: 5 }).map((t, n) => /* @__PURE__ */ p("div", {
+					className: e("flex items-center gap-3", b ? "mb-1 h-9" : "mb-2 h-12", N ? "justify-center px-3" : "px-4"),
+					children: [/* @__PURE__ */ f(s, { className: "size-5 flex-shrink-0 rounded-control" }), !N && /* @__PURE__ */ f(s, { className: "h-4 flex-1" })]
+				}, n)) : L.map((t, n) => /* @__PURE__ */ p("div", {
+					className: b ? "mb-7" : "mb-10",
+					children: [!N && t.title !== void 0 && t.title !== "" && /* @__PURE__ */ f("h3", {
+						className: e("px-4 text-xs uppercase tracking-wider font-semibold text-sidebar-muted", b ? "mb-3" : "mb-4"),
+						children: t.title
+					}), /* @__PURE__ */ f("nav", {
+						className: e("flex flex-col", b ? "gap-0.5" : "gap-1"),
+						children: t.items.map((e, t) => /* @__PURE__ */ f(l, {
+							...e,
+							currentPath: g,
+							collapsed: N,
+							dense: b,
+							onItemClick: F
+						}, t))
+					})]
+				}, n))
+			}),
+			D && /* @__PURE__ */ f("div", {
+				className: e("border-t border-sidebar-border", b ? "p-2" : "p-4", N ? "flex justify-center" : ""),
+				children: D
+			})
+		]
+	});
+	return k ? /* @__PURE__ */ f(r, {
+		open: P,
+		onOpenChange: (e) => {
+			A(!e);
+		},
+		children: /* @__PURE__ */ p(i, {
+			side: "left",
+			className: e("w-[16rem] p-0 bg-sidebar border-r border-sidebar-border overflow-hidden", S ? "[&>button]:text-sidebar-foreground" : "[&>button]:hidden"),
+			children: [
+				/* @__PURE__ */ f(o, {
+					className: "sr-only",
+					children: C("sidebar.menu")
+				}),
+				/* @__PURE__ */ f(a, {
+					className: "sr-only",
+					children: C("sidebar.description")
+				}),
+				R
+			]
+		})
+	}) : /* @__PURE__ */ f(c, {
+		delayDuration: 0,
+		children: /* @__PURE__ */ f("aside", {
+			className: e("flex flex-col bg-sidebar h-screen border-r border-sidebar-border transition-all duration-300", N ? "w-[--navbar-width-icon]" : "w-[--navbar-width]", "flex"),
+			style: {
+				"--navbar-width": "16rem",
+				"--navbar-width-icon": "4rem"
+			},
+			children: R
+		})
+	});
+};
+//#endregion
+export { h as Sidebar };

package/dist/components/core/navbar/SidebarHeader.js

@@ -0,0 +1,26 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { useSidebar as t } from "../../../hooks/behavior/useSidebar.js";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/core/navbar/SidebarHeader.tsx
+var i = ({ name: i = "appname", subName: a = "appsubname", icon: o, dense: s = !1 }) => {
+	let { collapsed: c, isMobile: l } = t(), u = !l && c;
+	return /* @__PURE__ */ r("div", {
+		className: e("flex items-center flex-shrink-0 gap-3 px-4", s ? "h-14" : "h-16 md:h-20", u ? "justify-center" : ""),
+		children: [o !== void 0 && /* @__PURE__ */ n("div", {
+			className: "flex-shrink-0 text-sidebar-foreground",
+			children: /* @__PURE__ */ n(o, { className: s ? "size-5" : "size-6" })
+		}), !u && /* @__PURE__ */ r("div", {
+			className: "flex flex-col",
+			children: [/* @__PURE__ */ n("h1", {
+				className: e("font-bold text-sidebar-foreground leading-tight", s ? "text-base" : "text-lg"),
+				children: i
+			}), /* @__PURE__ */ n("span", {
+				className: e("text-sidebar-muted font-medium", s ? "text-[11px]" : "text-xs"),
+				children: a
+			})]
+		})]
+	});
+};
+//#endregion
+export { i as SidebarHeader };

package/dist/components/core/navbar/SidebarNavItem.js

@@ -0,0 +1,72 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { Tooltip as t, TooltipContent as n, TooltipTrigger as r } from "../../ui/tooltip.js";
+import * as i from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { ChevronDownIcon as c } from "lucide-react";
+//#region src/components/core/navbar/SidebarNavItem.tsx
+var l = (e, t, n) => t === e ? !0 : e === "/" || !t.startsWith(`${e}/`) ? !1 : !n.some((n) => n !== e && n.startsWith(`${e}/`) && (t === n || t.startsWith(`${n}/`))), u = ({ path: u, icon: d, label: f, badge: p, subItems: m, currentPath: h, collapsed: g, dense: _ = !1, onItemClick: v }) => {
+	let y = m?.map((e) => e.path) ?? [], [b, x] = i.useState(m?.some((e) => l(e.path, h, y)) ?? !1), S = u ? h === u || u !== "/" && h.startsWith(`${u}/`) : !1, C = m?.some((e) => l(e.path, h, y)), w = S || !g && C, T = /* @__PURE__ */ s("a", {
+		href: u ?? "#",
+		onClick: (e) => {
+			e.ctrlKey || e.metaKey || e.button === 1 || (e.preventDefault(), m && m.length > 0 ? g || x(!b) : u && v(u));
+		},
+		className: e("flex items-center cursor-pointer transition-all duration-200 group rounded-control", _ ? "gap-2.5  mb-0.5" : "gap-3  mb-1", g ? _ ? "justify-center p-2 h-9 w-9 mx-auto" : "justify-center p-3 h-12 w-12 mx-auto" : _ ? "px-3 py-1.5 h-9" : "px-4 py-3 h-12", w ? "bg-sidebar-primary/10 text-sidebar-primary font-semibold border border-sidebar-primary/40 [&_svg]:text-sidebar-primary" : "border border-transparent hover:bg-sidebar-accent text-sidebar-foreground hover:text-sidebar-accent-foreground"),
+		children: [/* @__PURE__ */ o("div", {
+			className: e("flex-shrink-0 transition-transform group-hover:scale-110", g ? "flex items-center justify-center" : ""),
+			children: /* @__PURE__ */ o(d, { className: e("size-4", w && "text-sidebar-primary") })
+		}), !g && /* @__PURE__ */ s(a, { children: [
+			/* @__PURE__ */ o("span", {
+				className: e("flex-grow transition-opacity duration-150", w ? "font-semibold" : "font-medium", _ ? "text-sm" : ""),
+				children: f
+			}),
+			p !== void 0 && /* @__PURE__ */ o("span", {
+				className: "bg-red-500 text-white text-xs rounded-full py-1 min-w-[20px] text-center px-2 font-semibold",
+				children: p
+			}),
+			m && m.length > 0 && /* @__PURE__ */ o(c, { className: e("size-4 transition-transform duration-200", b ? "rotate-180" : "") })
+		] })]
+	});
+	return /* @__PURE__ */ s(a, { children: [g ? /* @__PURE__ */ s(t, { children: [/* @__PURE__ */ o(r, {
+		asChild: !0,
+		children: T
+	}), /* @__PURE__ */ o(n, {
+		side: "right",
+		sideOffset: 6,
+		className: "rounded-surface z-[99999] flex gap-2 bg-sidebar text-sidebar-foreground border border-sidebar-border py-2 text-sm shadow-lg",
+		children: /* @__PURE__ */ o("div", {
+			className: "flex flex-col gap-2",
+			children: /* @__PURE__ */ s("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ o("p", {
+					className: "font-semibold",
+					children: f
+				}), p !== void 0 && /* @__PURE__ */ s("span", {
+					className: "ml-1 text-xs",
+					children: [
+						"(",
+						p,
+						")"
+					]
+				})]
+			})
+		})
+	})] }) : T, !g && m && m.length > 0 && b && /* @__PURE__ */ o("div", {
+		className: e("flex flex-col ml-4 pl-4 border-l-2 border-sidebar-border/50 animate-in slide-in-from-top-2 fade-in duration-200", _ ? "gap-0.5 mb-0.5" : "gap-1 mb-2"),
+		children: m.map((t, n) => {
+			let r = l(t.path, h, y);
+			return /* @__PURE__ */ s("a", {
+				href: t.path,
+				onClick: (e) => {
+					e.ctrlKey || e.metaKey || e.button === 1 || (e.preventDefault(), v(t.path));
+				},
+				className: e("flex items-center justify-between rounded-control text-sm transition-all duration-200", _ ? "px-3 py-1" : "px-4 py-2", r ? "bg-sidebar-accent/50 text-sidebar-primary font-semibold" : "text-sidebar-muted hover:bg-sidebar-accent hover:text-sidebar-foreground"),
+				children: [/* @__PURE__ */ o("span", { children: t.label }), t.badge !== void 0 && /* @__PURE__ */ o("span", {
+					className: "bg-sidebar-primary/20 text-sidebar-primary text-[10px] rounded-full py-0.5 px-2 font-semibold",
+					children: t.badge
+				})]
+			}, n);
+		})
+	})] });
+};
+//#endregion
+export { u as SidebarNavItem };

package/dist/components/core/navbar/Topbar.js

@@ -0,0 +1,25 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { Button as t } from "../../ui/button.js";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { MenuIcon as i } from "lucide-react";
+//#region src/components/core/navbar/Topbar.tsx
+var a = ({ collapsed: a, isMobile: o, onToggleSidebar: s, actionsNode: c, userMenuNode: l }) => /* @__PURE__ */ r("header", {
+	className: e("fixed top-0 right-0 z-[60] h-16 md:h-20 bg-topbar text-topbar-foreground flex items-center justify-between px-4 transition-all duration-300", o && "left-0", !o && a && "left-[5rem]", !o && !a && "left-[16rem]"),
+	tabIndex: -1,
+	children: [/* @__PURE__ */ n("div", {
+		className: "flex items-center min-w-0 flex-1",
+		children: /* @__PURE__ */ n(t, {
+			variant: "ghost",
+			size: "icon",
+			onClick: s,
+			className: "text-topbar-foreground hover:bg-topbar-accent hover:text-topbar-accent-foreground",
+			children: /* @__PURE__ */ n(i, { className: "size-4" })
+		})
+	}), /* @__PURE__ */ r("div", {
+		className: "flex items-center gap-2 md:gap-4 flex-shrink-0",
+		children: [c, l]
+	})]
+});
+//#endregion
+export { a as Topbar };

package/dist/components/core/navbar/index.js

@@ -1 +1,7 @@
-export { o as GlobalSearch, a as NotificationsBell, r as Sidebar, n as SidebarHeader, i as SidebarNavItem, t as Topbar } from "../../../navbar-DD0V0pNE.js";
+import { GlobalSearch as e } from "./GlobalSearch.js";
+import { NotificationsBell as t } from "./NotificationsBell.js";
+import { SidebarNavItem as n } from "./SidebarNavItem.js";
+import { Sidebar as r } from "./Sidebar.js";
+import { SidebarHeader as i } from "./SidebarHeader.js";
+import { Topbar as a } from "./Topbar.js";
+export { e as GlobalSearch, t as NotificationsBell, r as Sidebar, i as SidebarHeader, n as SidebarNavItem, a as Topbar };

package/dist/{ErrorAlert-cJnfBL8H.js → components/core/states/ErrorAlert.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./i18n-BhLphJa3.js";
-import { n as t, t as n } from "./alert-REQGK9bR.js";
+import { useKrosoftTranslation as e } from "../../../i18n/useKrosoftTranslation.js";
+import { Alert as t, AlertDescription as n } from "../../ui/alert.js";
 import "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { AlertTriangle as a } from "lucide-react";
@@ -11,10 +11,10 @@ var o = (e) => e instanceof Error ? {} : {
 	let { t: l } = e();
 	if (!s) return null;
 	let { code: u, errors: d } = o(s);
-	return /* @__PURE__ */ i(n, {
+	return /* @__PURE__ */ i(t, {
 		variant: "destructive",
 		className: c,
-		children: [/* @__PURE__ */ r(a, { className: "size-4" }), /* @__PURE__ */ i(t, { children: [/* @__PURE__ */ i("div", {
+		children: [/* @__PURE__ */ r(a, { className: "size-4" }), /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ i("div", {
 			className: "flex items-center space-x-2",
 			children: [
 				/* @__PURE__ */ r("span", {
@@ -34,4 +34,4 @@ var o = (e) => e instanceof Error ? {} : {
 	});
 };
 //#endregion
-export { s as t };
+export { s as ErrorAlert };

package/dist/{states-CJ8xE_Nm.js → components/core/states/ErrorState.js}

@@ -1,8 +1,7 @@
-import { t as e } from "./i18n-BhLphJa3.js";
+import { useKrosoftTranslation as e } from "../../../i18n/useKrosoftTranslation.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Loader2Icon as r } from "lucide-react";
 //#region src/components/core/states/ErrorState.tsx
-var i = ({ message: r }) => {
+var r = ({ message: r }) => {
 	let { t: i } = e();
 	return /* @__PURE__ */ n("div", {
 		className: "p-6 border border-destructive bg-destructive/10 text-destructive rounded-surface animate-fade-in",
@@ -14,12 +13,6 @@ var i = ({ message: r }) => {
 			children: r
 		}) : null]
 	});
-}, a = ({ message: e }) => /* @__PURE__ */ n("div", {
-	className: "flex flex-col items-center justify-center p-12 text-muted-foreground animate-fade-in",
-	children: [/* @__PURE__ */ t(r, { className: "size-8 animate-spin mb-4 text-primary" }), e !== void 0 && e !== "" ? /* @__PURE__ */ t("p", {
-		className: "font-semibold text-sm",
-		children: e
-	}) : null]
-});
+};
 //#endregion
-export { i as n, a as t };
+export { r as ErrorState };

package/dist/components/core/states/LoadingState.js

@@ -0,0 +1,12 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Loader2Icon as n } from "lucide-react";
+//#region src/components/core/states/LoadingState.tsx
+var r = ({ message: r }) => /* @__PURE__ */ t("div", {
+	className: "flex flex-col items-center justify-center p-12 text-muted-foreground animate-fade-in",
+	children: [/* @__PURE__ */ e(n, { className: "size-8 animate-spin mb-4 text-primary" }), r !== void 0 && r !== "" ? /* @__PURE__ */ e("p", {
+		className: "font-semibold text-sm",
+		children: r
+	}) : null]
+});
+//#endregion
+export { r as LoadingState };

package/dist/components/core/states/index.js

@@ -1,3 +1,4 @@
-import { t as e } from "../../../ErrorAlert-cJnfBL8H.js";
-import { n as t, t as n } from "../../../states-CJ8xE_Nm.js";
+import { ErrorAlert as e } from "./ErrorAlert.js";
+import { ErrorState as t } from "./ErrorState.js";
+import { LoadingState as n } from "./LoadingState.js";
 export { e as ErrorAlert, t as ErrorState, n as LoadingState };

package/dist/components/core/table/DataTable.js

@@ -0,0 +1,108 @@
+import { useDataTable as e } from "../../../hooks/ui/useDataTable.js";
+import { useFixedColumns as t } from "../../../hooks/ui/useFixedColumns.js";
+import { pageSizeDefault as n, pagesSizes as r } from "../../../constants/datatable.js";
+import { TableBody as i } from "./TableBody.js";
+import { TableBulkActions as ee } from "./TableBulkActions.js";
+import { TableHeader as a } from "./TableHeader.js";
+import { TablePagination as o } from "./TablePagination.js";
+import { TableSettings as s } from "./TableSettings.js";
+import { useMemo as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/core/table/DataTable.tsx
+function d({ data: d, isLoading: te = !1, error: f = null, config: p, server: m }) {
+	let { columns: h, rowKey: g, rowSelectable: _, onRowClick: v, onRowNavigate: y, rowNavigable: b, actions: x, bulkActions: S } = p, ne = p.pageSizeDefault ?? n, re = p.pageSizeOptions ?? r, C = p.dense ?? !1, w = p.bordered ?? !1, T = p.draggableColumns ?? !1, E = p.resizableColumns ?? !1, D = p.columnVisibility ?? !1, O = p.fixedActions ?? !1, { sortColumn: k, sortDirection: A, selectedRows: j, setSelectedRows: M, visibleColumns: N, columnWidths: P, safeCurrentPage: F, totalPages: I, startIndex: L, endIndex: R, tableRef: z, hasActions: B, hasBulkActions: V, visibleColumnsArray: H, colSpanCount: ie, paginatedData: U, handleSort: W, handleMouseDown: G, handleDragStart: K, handleDragOver: q, handleDrop: J, toggleColumnVisibility: Y, setColumnsVisibility: ae, toggleRowSelection: oe, toggleSelectAll: se, pageSize: ce, setPageSize: le, setCurrentPage: ue } = e({
+		data: d,
+		columns: h,
+		rowKey: g,
+		rowSelectable: _,
+		pageSizeDefault: ne,
+		actions: x,
+		bulkActions: S,
+		columnVisibility: D,
+		columnVisibilityState: p.columnVisibilityState,
+		onColumnVisibilityChange: p.onColumnVisibilityChange,
+		columnVisibilityStorage: p.columnVisibilityStorage,
+		server: m
+	}), de = V && H.some((e) => e.fixed === "left"), X = t(z), Z = c(() => new Set(j.map(g)), [j, g]), Q = c(() => _ === void 0 ? d : d.filter(_), [d, _]), $ = Q.length > 0 && Q.every((e) => Z.has(g(e))), fe = !$ && Q.some((e) => Z.has(g(e)));
+	return /* @__PURE__ */ u("div", {
+		className: "space-y-4 [--k-radius-control:var(--k-radius-control-dense,0.5rem)] [--k-radius-surface:var(--k-radius-surface-dense,0.75rem)]",
+		children: [j.length > 0 && S !== void 0 && S.length > 0 && /* @__PURE__ */ l(ee, {
+			selectedRows: j,
+			setSelectedRows: M,
+			bulkActions: S
+		}), /* @__PURE__ */ u("div", {
+			className: "w-full bg-card rounded-surface border border-border overflow-hidden",
+			children: [/* @__PURE__ */ l("div", {
+				className: "overflow-x-auto",
+				children: /* @__PURE__ */ u("table", {
+					ref: z,
+					className: "w-full",
+					children: [/* @__PURE__ */ l(a, {
+						hasBulkActions: V,
+						allSelected: $,
+						someSelected: fe,
+						toggleSelectAll: se,
+						visibleColumnsArray: H,
+						draggableColumns: T,
+						resizableColumns: E,
+						columnWidths: P,
+						sortColumn: k,
+						sortDirection: A,
+						handleSort: W,
+						handleDragStart: K,
+						handleDragOver: q,
+						handleDrop: J,
+						handleMouseDown: G,
+						hasActions: B,
+						bordered: w,
+						dense: C,
+						fixedColumns: X,
+						fixedSelection: de,
+						fixedActions: O,
+						settingsNode: D ? /* @__PURE__ */ l(s, {
+							columns: h,
+							visibleColumns: N,
+							toggleColumnVisibility: Y,
+							setColumnsVisibility: ae
+						}) : void 0
+					}), /* @__PURE__ */ l(i, {
+						bordered: w,
+						dense: C,
+						isLoading: te,
+						error: f,
+						colSpanCount: ie,
+						messages: p.messages,
+						paginatedData: U,
+						rowKey: g,
+						onRowClick: v,
+						onRowNavigate: y,
+						rowNavigable: b,
+						hasBulkActions: V,
+						rowSelectable: _,
+						selectedKeys: Z,
+						toggleRowSelection: oe,
+						visibleColumnsArray: H,
+						columnWidths: P,
+						hasActions: B || D,
+						actions: x,
+						columns: h,
+						resizableColumns: E,
+						fixedColumns: X
+					})]
+				})
+			}), /* @__PURE__ */ l(o, {
+				totalItems: m?.totalRows ?? d.length,
+				startIndex: L,
+				endIndex: R,
+				pageSize: ce,
+				setPageSize: le,
+				currentPage: F,
+				setCurrentPage: ue,
+				pageSizeOptions: re,
+				totalPages: I
+			})]
+		})]
+	});
+}
+//#endregion
+export { d as DataTable };

package/dist/components/core/table/JsonTableOutput.js

@@ -0,0 +1,75 @@
+import { useKrosoftTranslation as e } from "../../../i18n/useKrosoftTranslation.js";
+import { Label as t } from "../../ui/label.js";
+import { SimpleTable as n, SimpleTableBody as r, SimpleTableCell as i, SimpleTableHead as a, SimpleTableHeader as o, SimpleTableRow as s } from "../../ui/simple-table.js";
+import { Switch as c } from "../../ui/switch.js";
+import { useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { formatJsonValue as f, isRecord as p, tryParseJson as m } from "@krosoft/core/helpers";
+//#region src/components/core/table/JsonTableOutput.tsx
+var h = ({ header: h, output: g }) => {
+	let { t: _ } = e(), [v, y] = l(!0), b = m(g), x = b !== null, S = () => /* @__PURE__ */ d("div", {
+		className: "flex items-center justify-between mb-2",
+		children: [/* @__PURE__ */ u("span", {
+			className: "font-medium text-sm",
+			children: h
+		}), /* @__PURE__ */ d("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ u(c, {
+				id: "table-mode",
+				checked: v,
+				onCheckedChange: y
+			}), /* @__PURE__ */ u(t, {
+				htmlFor: "table-mode",
+				className: "text-xs",
+				children: _("table.tableMode")
+			})]
+		})]
+	}), C = ({ children: e }) => /* @__PURE__ */ u("div", {
+		className: "border rounded min-w-0 w-full",
+		children: /* @__PURE__ */ u(n, { children: e })
+	}), w = () => /* @__PURE__ */ u("pre", {
+		className: "text-xs bg-muted p-4 rounded overflow-x-auto whitespace-pre-wrap",
+		children: x && !v ? JSON.stringify(b, null, 2) : g
+	});
+	return g ? /* @__PURE__ */ d("div", {
+		className: "min-w-0 w-full",
+		children: [S(), (() => {
+			if (!x || !v) return /* @__PURE__ */ u(w, {});
+			if (Array.isArray(b) && b.length > 0 && p(b[0])) {
+				let e = b, t = Object.keys(e[0]);
+				return /* @__PURE__ */ d(C, { children: [/* @__PURE__ */ u(o, {
+					className: "bg-muted/50",
+					children: /* @__PURE__ */ u(s, { children: t.map((e) => /* @__PURE__ */ u(a, {
+						className: "font-medium",
+						children: e
+					}, e)) })
+				}), /* @__PURE__ */ u(r, { children: e.map((e, n) => /* @__PURE__ */ u(s, { children: t.map((t) => /* @__PURE__ */ u(i, {
+					className: "text-sm whitespace-pre-wrap",
+					children: f(e[t])
+				}, t)) }, n)) })] });
+			}
+			if (p(b)) {
+				let e = Object.entries(b);
+				return /* @__PURE__ */ d(C, { children: [/* @__PURE__ */ u(o, {
+					className: "bg-muted/50",
+					children: /* @__PURE__ */ d(s, { children: [/* @__PURE__ */ u(a, {
+						className: "font-medium",
+						children: _("table.property")
+					}), /* @__PURE__ */ u(a, {
+						className: "font-medium",
+						children: _("table.value")
+					})] })
+				}), /* @__PURE__ */ u(r, { children: e.map(([e, t]) => /* @__PURE__ */ d(s, { children: [/* @__PURE__ */ u(i, {
+					className: "font-medium text-sm",
+					children: e
+				}), /* @__PURE__ */ u(i, {
+					className: "text-sm whitespace-pre-wrap",
+					children: f(t)
+				})] }, e)) })] });
+			}
+			return /* @__PURE__ */ u(w, {});
+		})()]
+	}) : null;
+};
+//#endregion
+export { h as JsonTableOutput };

package/dist/components/core/table/TableActions.js

@@ -0,0 +1,75 @@
+import { useKrosoftTranslation as e } from "../../../i18n/useKrosoftTranslation.js";
+import { Button as t } from "../../ui/button.js";
+import { DropdownMenu as n, DropdownMenuContent as r, DropdownMenuItem as i, DropdownMenuTrigger as a } from "../../ui/dropdown-menu.js";
+import { Tooltip as o, TooltipContent as s, TooltipProvider as c, TooltipTrigger as l } from "../../ui/tooltip.js";
+import "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { MoreVerticalIcon as f } from "lucide-react";
+//#region src/components/core/table/TableActions.tsx
+function p({ actions: p, row: m }) {
+	let { t: h } = e(), g = p.filter((e) => e.visible === void 0 || e.visible(m));
+	if (g.length === 0) return null;
+	let _ = g.filter((e) => e.overflow !== !0), v = g.filter((e) => e.overflow === !0);
+	return /* @__PURE__ */ u(c, { children: /* @__PURE__ */ d("div", {
+		className: "flex items-center justify-end gap-1",
+		children: [_.map((e, n) => {
+			let r = e.icon, i = h(e.labelKey), a = e.disabled?.(m) ?? !1;
+			return e.iconOnly === !0 && r !== void 0 ? /* @__PURE__ */ d(o, { children: [/* @__PURE__ */ u(l, {
+				asChild: !0,
+				children: /* @__PURE__ */ u("span", {
+					className: "inline-flex",
+					tabIndex: a ? 0 : void 0,
+					children: /* @__PURE__ */ u(t, {
+						variant: e.variant ?? "ghost",
+						size: "icon",
+						disabled: a,
+						"aria-label": i,
+						className: `h-7 w-7 text-muted-foreground hover:text-foreground ${e.className ?? ""}`,
+						onClick: (t) => {
+							t.stopPropagation(), e.onClick(m);
+						},
+						children: /* @__PURE__ */ u(r, { className: "size-3.5" })
+					})
+				})
+			}), /* @__PURE__ */ u(s, { children: i })] }, n) : /* @__PURE__ */ d(t, {
+				variant: e.variant ?? "ghost",
+				size: "sm",
+				disabled: a,
+				className: `h-7 px-2 text-muted-foreground hover:text-foreground ${e.className ?? ""}`,
+				onClick: (t) => {
+					t.stopPropagation(), e.onClick(m);
+				},
+				children: [r !== void 0 && /* @__PURE__ */ u(r, { className: "size-3.5" }), i]
+			}, n);
+		}), v.length > 0 && /* @__PURE__ */ d(n, { children: [/* @__PURE__ */ u(a, {
+			asChild: !0,
+			children: /* @__PURE__ */ u(t, {
+				variant: "ghost",
+				size: "icon",
+				className: "h-7 w-7 text-muted-foreground hover:text-foreground",
+				children: /* @__PURE__ */ u(f, { className: "size-3.5" })
+			})
+		}), /* @__PURE__ */ u(r, {
+			align: "end",
+			onClick: (e) => {
+				e.stopPropagation();
+			},
+			children: v.map((e, t) => {
+				let n = e.icon;
+				return /* @__PURE__ */ d(i, {
+					disabled: e.disabled?.(m) ?? !1,
+					onClick: () => {
+						e.onClick(m);
+					},
+					className: e.className,
+					children: [n !== void 0 && /* @__PURE__ */ u("span", {
+						className: "mr-2 size-4 flex items-center justify-center",
+						children: /* @__PURE__ */ u(n, { className: "size-4" })
+					}), h(e.labelKey)]
+				}, t);
+			})
+		})] })]
+	}) });
+}
+//#endregion
+export { p as TableActions };