@krosoft/react 0.0.381 → 0.0.382

package/dist/components/core/charts/ChartCard.js

@@ -0,0 +1,44 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { Card as t, CardContent as n, CardDescription as r, CardHeader as i, CardTitle as a } from "../../ui/card.js";
+import { useKrosoftTranslation as o } from "../../../i18n/useKrosoftTranslation.js";
+import { Skeleton as s } from "../../ui/skeleton.js";
+import "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/core/charts/ChartCard.tsx
+var u = ({ title: u, description: d, icon: f, actions: p, footer: m, isLoading: h = !1, isEmpty: g = !1, emptyLabel: _, height: v = 300, className: y, contentClassName: b, children: x }) => {
+	let { t: S } = o(), C = f;
+	return /* @__PURE__ */ l(t, {
+		className: y,
+		children: [/* @__PURE__ */ c(i, { children: /* @__PURE__ */ l("div", {
+			className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between",
+			children: [/* @__PURE__ */ l("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ l(a, {
+					className: "flex items-center gap-2",
+					children: [C && /* @__PURE__ */ c(C, { className: "size-5 shrink-0" }), /* @__PURE__ */ c("span", {
+						className: "truncate",
+						children: u
+					})]
+				}), d !== void 0 && d !== "" ? /* @__PURE__ */ c(r, { children: d }) : null]
+			}), p == null ? null : /* @__PURE__ */ c("div", {
+				className: "shrink-0",
+				children: p
+			})]
+		}) }), /* @__PURE__ */ l(n, { children: [/* @__PURE__ */ c("div", {
+			className: e("w-full", b),
+			style: v === null ? void 0 : { height: v },
+			children: h ? /* @__PURE__ */ c(s, { className: "size-full rounded-surface" }) : g ? /* @__PURE__ */ c("div", {
+				className: "flex size-full items-center justify-center",
+				children: /* @__PURE__ */ c("p", {
+					className: "text-sm text-muted-foreground",
+					children: _ ?? S("states.noData")
+				})
+			}) : x
+		}), !h && !g && m != null ? /* @__PURE__ */ c("div", {
+			className: "mt-4",
+			children: m
+		}) : null] })]
+	});
+};
+//#endregion
+export { u as ChartCard };

package/dist/components/core/charts/CircularGauge.js

@@ -0,0 +1,58 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/core/charts/CircularGauge.tsx
+var r = {
+	warning: 50,
+	danger: 80
+}, i = (e, t) => e >= t.danger ? "hsl(var(--destructive))" : e >= t.warning ? "hsl(var(--k-warning))" : "hsl(var(--k-success))", a = ({ value: a, max: o = 100, size: s = 120, strokeWidth: c = 8, label: l, unit: u = "%", color: d, thresholds: f = r, valueFormatter: p = (e) => e.toFixed(1), className: m }) => {
+	let h = (s - c) / 2, g = h * 2 * Math.PI, _ = o > 0 ? Math.min(100, Math.max(0, a / o * 100)) : 0, v = d ?? i(_, f);
+	return /* @__PURE__ */ n("div", {
+		className: e("flex flex-col items-center gap-2", m),
+		children: [/* @__PURE__ */ n("div", {
+			className: "relative",
+			style: {
+				width: s,
+				height: s
+			},
+			children: [/* @__PURE__ */ n("svg", {
+				width: s,
+				height: s,
+				className: "-rotate-90",
+				children: [/* @__PURE__ */ t("circle", {
+					cx: s / 2,
+					cy: s / 2,
+					r: h,
+					className: "stroke-muted",
+					strokeWidth: c,
+					fill: "transparent"
+				}), /* @__PURE__ */ t("circle", {
+					cx: s / 2,
+					cy: s / 2,
+					r: h,
+					stroke: v,
+					strokeWidth: c,
+					fill: "transparent",
+					strokeDasharray: g,
+					strokeDashoffset: g - _ / 100 * g,
+					strokeLinecap: "round",
+					className: "transition-all duration-500 ease-out"
+				})]
+			}), /* @__PURE__ */ n("div", {
+				className: "absolute inset-0 flex flex-col items-center justify-center",
+				children: [/* @__PURE__ */ t("span", {
+					className: "text-2xl font-bold text-card-foreground",
+					children: p(a)
+				}), u !== "" && /* @__PURE__ */ t("span", {
+					className: "text-sm text-muted-foreground",
+					children: u
+				})]
+			})]
+		}), l !== void 0 && l !== "" ? /* @__PURE__ */ t("span", {
+			className: "text-sm font-medium text-muted-foreground",
+			children: l
+		}) : null]
+	});
+};
+//#endregion
+export { a as CircularGauge };

package/dist/components/core/charts/LineChart.js

@@ -0,0 +1,69 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { ChartContainer as t, ChartTooltip as n, ChartTooltipContent as r } from "../../ui/chart.js";
+import { buildTooltipValueFormatter as i } from "./chartTooltip.helper.js";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { CartesianGrid as c, Line as l, LineChart as u, XAxis as d, YAxis as f } from "recharts";
+//#region src/components/core/charts/LineChart.tsx
+var p = ({ data: p, label: m = "Valeur", color: h = "hsl(var(--primary))", yAxisDomain: g, valueFormatter: _, labelFormatter: v, showDots: y = !0, className: b }) => {
+	let x = a.useMemo(() => ({ value: {
+		label: m,
+		color: h
+	} }), [m, h]), S = a.useMemo(() => i(_, m), [_, m]);
+	return /* @__PURE__ */ o(t, {
+		config: x,
+		className: e("aspect-auto size-full", b),
+		children: /* @__PURE__ */ s(u, {
+			data: p,
+			margin: {
+				top: 10,
+				right: 20,
+				left: 0,
+				bottom: 10
+			},
+			children: [
+				/* @__PURE__ */ o(c, {
+					strokeDasharray: "3 3",
+					vertical: !1
+				}),
+				/* @__PURE__ */ o(d, {
+					dataKey: "name",
+					tickLine: !1,
+					axisLine: !1,
+					tickMargin: 8,
+					interval: "preserveStartEnd",
+					tickFormatter: v ? (e) => v(String(e)) : void 0
+				}),
+				/* @__PURE__ */ o(f, {
+					domain: g,
+					tickLine: !1,
+					axisLine: !1,
+					width: _ ? 48 : 32,
+					tickFormatter: _ ? (e) => _(Number(e)) : void 0
+				}),
+				/* @__PURE__ */ o(n, { content: /* @__PURE__ */ o(r, {
+					formatter: S,
+					labelFormatter: v ? (e) => v(String(e)) : void 0
+				}) }),
+				/* @__PURE__ */ o(l, {
+					type: "monotone",
+					dataKey: "value",
+					stroke: "var(--color-value)",
+					strokeWidth: 2,
+					dot: y ? {
+						fill: "var(--color-value)",
+						strokeWidth: 0,
+						r: 3
+					} : !1,
+					activeDot: {
+						r: 5,
+						strokeWidth: 2,
+						className: "stroke-background"
+					}
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { p as LineChart };

package/dist/components/core/charts/PieChart.js

@@ -0,0 +1,55 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { ChartContainer as t, ChartLegend as n, ChartLegendContent as r, ChartTooltip as i, ChartTooltipContent as a } from "../../ui/chart.js";
+import { buildTooltipValueFormatter as o } from "./chartTooltip.helper.js";
+import { getChartColor as s } from "./chartColors.js";
+import { useMobile as c } from "../../../hooks/ui/useMobile.js";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Pie as f, PieChart as p, Sector as m } from "recharts";
+//#region src/components/core/charts/PieChart.tsx
+var h = 6, g = ({ data: g, innerRadius: _, outerRadius: v, showLegend: y = !0, showLabels: b = !1, valueFormatter: x, onSelect: S, className: C }) => {
+	let w = c(), T = l.useMemo(() => g.map((e, t) => ({
+		...e,
+		fill: e.color ?? s(t)
+	})), [g]), E = l.useMemo(() => Object.fromEntries(g.map((e, t) => [e.name, {
+		label: e.name,
+		color: e.color ?? s(t)
+	}])), [g]), D = l.useMemo(() => o(x), [x]), O = _ ?? (w ? 45 : 60), k = v ?? (w ? 80 : 100);
+	return /* @__PURE__ */ u(t, {
+		config: E,
+		className: e("aspect-auto size-full", C),
+		children: /* @__PURE__ */ d(p, { children: [
+			/* @__PURE__ */ u(i, { content: /* @__PURE__ */ u(a, {
+				nameKey: "name",
+				hideLabel: !0,
+				formatter: D
+			}) }),
+			/* @__PURE__ */ u(f, {
+				data: T,
+				dataKey: "value",
+				nameKey: "name",
+				cx: "50%",
+				cy: y ? "45%" : "50%",
+				innerRadius: O,
+				outerRadius: k,
+				paddingAngle: O > 0 ? 2 : 0,
+				label: b ? ({ name: e, value: t }) => `${String(e)} (${String(t)})` : void 0,
+				isAnimationActive: !1,
+				className: e("stroke-background", S && "cursor-pointer"),
+				shape: (e) => /* @__PURE__ */ u(m, {
+					...e,
+					outerRadius: S && e.isActive ? e.outerRadius + h : e.outerRadius
+				}),
+				onClick: S ? (e, t) => {
+					S(g[t], t);
+				} : void 0
+			}),
+			y && /* @__PURE__ */ u(n, { content: /* @__PURE__ */ u(r, {
+				nameKey: "name",
+				className: "flex-wrap text-muted-foreground"
+			}) })
+		] })
+	});
+};
+//#endregion
+export { g as PieChart };

package/dist/components/core/charts/chartColors.js

@@ -0,0 +1,10 @@
+//#region src/components/core/charts/chartColors.ts
+var e = [
+	"hsl(var(--k-chart-1))",
+	"hsl(var(--k-chart-2))",
+	"hsl(var(--k-chart-3))",
+	"hsl(var(--k-chart-4))",
+	"hsl(var(--k-chart-5))"
+], t = (t) => e[t % e.length];
+//#endregion
+export { e as CHART_COLORS, t as getChartColor };

package/dist/components/core/charts/chartTooltip.helper.js

@@ -0,0 +1,15 @@
+import "react";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/core/charts/chartTooltip.helper.tsx
+var n = (n, r) => n ? (i, a) => /* @__PURE__ */ t("div", {
+	className: "flex flex-1 justify-between gap-4",
+	children: [/* @__PURE__ */ e("span", {
+		className: "text-muted-foreground",
+		children: r ?? String(a)
+	}), /* @__PURE__ */ e("span", {
+		className: "font-mono font-medium tabular-nums text-foreground",
+		children: n(Number(i))
+	})]
+}) : void 0;
+//#endregion
+export { n as buildTooltipValueFormatter };

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

@@ -1 +1,8 @@
-export { c as BarChartHorizontal, s as BarChartVertical, a as CHART_COLORS, i as ChartCard, r as CircularGauge, n as LineChart, t as PieChart, o as getChartColor } from "../../../charts-C7rKxkli.js";
+import { BarChartHorizontal as e } from "./BarChartHorizontal.js";
+import { BarChartVertical as t } from "./BarChartVertical.js";
+import { CHART_COLORS as n, getChartColor as r } from "./chartColors.js";
+import { ChartCard as i } from "./ChartCard.js";
+import { CircularGauge as a } from "./CircularGauge.js";
+import { LineChart as o } from "./LineChart.js";
+import { PieChart as s } from "./PieChart.js";
+export { e as BarChartHorizontal, t as BarChartVertical, n as CHART_COLORS, i as ChartCard, a as CircularGauge, o as LineChart, s as PieChart, r as getChartColor };

package/dist/components/core/dialogs/AboutDialog.js

@@ -0,0 +1,59 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { useDateFnsLocale as t } from "../../../i18n/useDateFnsLocale.js";
+import { useKrosoftTranslation as n } from "../../../i18n/useKrosoftTranslation.js";
+import { Dialog as r, DialogContent as i, DialogHeader as a, DialogTitle as o } from "../../ui/dialog.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { format as l, isValid as u } from "date-fns";
+//#region src/components/core/dialogs/AboutDialog.tsx
+var d = (e, t) => {
+	let n = e instanceof Date ? e : new Date(e);
+	return u(n) ? l(n, "Pp", { locale: t }) : String(e);
+}, f = ({ open: l, onOpenChange: u, info: f, logo: p, title: m = "about.title", className: h }) => {
+	let { t: g } = n(), _ = t(), v = [
+		{
+			label: g("about.version"),
+			value: f.version
+		},
+		{
+			label: g("about.environment"),
+			value: f.environment
+		},
+		{
+			label: g("about.buildDate"),
+			value: f.buildDate ? d(f.buildDate, _) : void 0
+		}
+	].filter((e) => e.value);
+	return /* @__PURE__ */ s(r, {
+		open: l,
+		onOpenChange: u,
+		children: /* @__PURE__ */ c(i, {
+			className: e("sm:max-w-sm", h),
+			"aria-describedby": void 0,
+			children: [
+				/* @__PURE__ */ s(a, {
+					className: "mb-6",
+					children: /* @__PURE__ */ s(o, { children: g(m) })
+				}),
+				p && /* @__PURE__ */ s("div", {
+					className: "flex justify-center",
+					children: p
+				}),
+				/* @__PURE__ */ s("dl", {
+					className: "grid grid-cols-[auto_1fr] gap-x-6 gap-y-2 text-sm",
+					children: v.map(({ label: e, value: t }) => /* @__PURE__ */ c("div", {
+						className: "contents",
+						children: [/* @__PURE__ */ s("dt", {
+							className: "text-muted-foreground",
+							children: e
+						}), /* @__PURE__ */ s("dd", {
+							className: "font-mono",
+							children: t
+						})]
+					}, e))
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { f as AboutDialog };

package/dist/components/core/dialogs/AppDialog.js

@@ -0,0 +1,81 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { useKrosoftTranslation as t } from "../../../i18n/useKrosoftTranslation.js";
+import { Button as n } from "../../ui/button.js";
+import { Dialog as r, DialogContent as i, DialogDescription as a, DialogHeader as o, DialogTitle as s } from "../../ui/dialog.js";
+import { Progress as c } from "../../ui/progress.js";
+import { ErrorAlert as l } from "../states/ErrorAlert.js";
+import "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/core/dialogs/AppDialog.tsx
+var f = {
+	sm: "sm:max-w-sm",
+	md: "sm:max-w-md",
+	lg: "sm:max-w-lg",
+	xl: "sm:max-w-xl",
+	"2xl": "sm:max-w-2xl",
+	"3xl": "sm:max-w-3xl",
+	"4xl": "sm:max-w-4xl",
+	full: "sm:max-w-[95vw]"
+};
+function p({ open: p, onOpenChange: m, config: h, isLoading: g, error: _, footer: v, className: y, children: b }) {
+	let { t: x } = t(), { title: S, description: C, icon: w, size: T = "xl", maxWidth: E, actions: D, headerClassName: O, footerClassName: k } = h, A = g === !0, j = (e) => typeof e == "string" ? x(e) : e, M = (e) => {
+		(e || !A) && m(e);
+	}, N = v !== void 0 || D !== void 0 && D.length > 0;
+	return /* @__PURE__ */ u(r, {
+		open: p,
+		onOpenChange: M,
+		children: /* @__PURE__ */ d(i, {
+			className: e("max-h-[100dvh] sm:max-h-[90vh] border-0 shadow-2xl p-0 flex flex-col overflow-hidden", "[&>button]:text-dialog-header-foreground [&>button]:focus:ring-dialog-header-foreground", A && "[&>button]:pointer-events-none [&>button]:opacity-40", E ?? f[T], y),
+			children: [
+				A ? /* @__PURE__ */ u("div", {
+					className: "absolute top-0 left-0 right-0 z-10",
+					children: /* @__PURE__ */ u(c, {
+						indeterminate: !0,
+						className: "h-1 rounded-none"
+					})
+				}) : null,
+				/* @__PURE__ */ d(o, {
+					className: e("bg-gradient-to-r from-dialog-header-from to-dialog-header-to p-4 sm:p-6 pr-12 sm:pr-12 sm:rounded-t-surface shrink-0", O),
+					children: [/* @__PURE__ */ d(s, {
+						className: "text-xl sm:text-2xl font-bold flex items-center gap-2 text-dialog-header-foreground",
+						children: [w === void 0 ? null : /* @__PURE__ */ u("div", {
+							className: "p-2 bg-dialog-header-foreground/20 rounded-control",
+							children: /* @__PURE__ */ u(w, { className: "size-4 text-dialog-header-foreground" })
+						}), j(S)]
+					}), C !== void 0 && C !== "" ? /* @__PURE__ */ u(a, {
+						className: "text-dialog-header-foreground/80 text-base",
+						children: j(C)
+					}) : null]
+				}),
+				_ ? /* @__PURE__ */ u("div", {
+					className: "px-4 sm:px-6 pt-4",
+					children: /* @__PURE__ */ u(l, {
+						error: _,
+						className: "max-w-full"
+					})
+				}) : null,
+				/* @__PURE__ */ u("div", {
+					className: "flex-1 overflow-y-auto px-4 sm:px-6 py-4",
+					children: b
+				}),
+				N ? /* @__PURE__ */ u("div", {
+					className: e("sm:rounded-b-surface border-t border-border bg-muted/40 shrink-0 p-4 sm:p-6", k),
+					children: v ?? /* @__PURE__ */ u("div", {
+						className: "flex justify-end gap-3",
+						children: D?.map((e) => /* @__PURE__ */ d(n, {
+							type: e.type ?? "button",
+							form: e.form,
+							variant: e.variant ?? "default",
+							onClick: e.onClick,
+							disabled: e.disabled === !0 || A && e.disableOnLoading !== !1,
+							className: e.className,
+							children: [e.icon === void 0 ? null : /* @__PURE__ */ u(e.icon, { className: "size-4" }), x(e.label)]
+						}, e.id ?? e.label))
+					})
+				}) : null
+			]
+		})
+	});
+}
+//#endregion
+export { p as AppDialog };

package/dist/components/core/dialogs/ConfirmationDialog.js

@@ -0,0 +1,42 @@
+import { useKrosoftTranslation as e } from "../../../i18n/useKrosoftTranslation.js";
+import { Button as t } from "../../ui/button.js";
+import { AlertDialog as n, AlertDialogCancel as r, AlertDialogContent as i, AlertDialogDescription as a, AlertDialogFooter as o, AlertDialogHeader as s, AlertDialogTitle as c } from "../../ui/alert-dialog.js";
+import { ErrorAlert as l } from "../states/ErrorAlert.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/core/dialogs/ConfirmationDialog.tsx
+function f({ isLoading: f, error: p, config: m, destructive: h = !1 }) {
+	let { t: g } = e();
+	return m ? /* @__PURE__ */ u(n, {
+		open: m.isOpen,
+		onOpenChange: (e) => {
+			!e && !f && m.onClose();
+		},
+		children: /* @__PURE__ */ d(i, { children: [
+			/* @__PURE__ */ d(s, { children: [
+				/* @__PURE__ */ d(c, {
+					className: m.titleClassName,
+					children: [m.icon && /* @__PURE__ */ u(m.icon, { className: "size-4" }), g(m.title)]
+				}),
+				/* @__PURE__ */ u(a, { children: g(m.description) }),
+				m.itemName && /* @__PURE__ */ u(a, { children: /* @__PURE__ */ u("span", {
+					className: "font-semibold block my-2",
+					children: m.itemName
+				}) })
+			] }),
+			/* @__PURE__ */ u(l, { error: p }),
+			/* @__PURE__ */ d(o, { children: [/* @__PURE__ */ u(r, {
+				disabled: f,
+				children: g("actions.cancel")
+			}), /* @__PURE__ */ u(t, {
+				onClick: (e) => {
+					e.preventDefault(), m.onConfirm();
+				},
+				disabled: f,
+				className: h ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : "",
+				children: g(f ? m.loadingKey ?? "states.loading" : m.confirmKey)
+			})] })
+		] })
+	}) : null;
+}
+//#endregion
+export { f as ConfirmationDialog };

package/dist/components/core/dialogs/FormDialog.js

@@ -0,0 +1,105 @@
+import { useKrosoftTranslation as e } from "../../../i18n/useKrosoftTranslation.js";
+import { Button as t } from "../../ui/button.js";
+import { AppDialog as n } from "./AppDialog.js";
+import { GenericForm as r } from "../forms/GenericForm.js";
+import { useEffect as i, useId as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Pen as u, Save as d, X as f } from "lucide-react";
+//#region src/components/core/dialogs/FormDialog.tsx
+function p({ open: p, onOpenChange: m, data: h, title: g, headerBadge: _, schema: v, onSave: y, customFooter: b, defaultEditing: x = !1, footerActions: S = !0, saveLabel: C, cancelLabel: w, hideSaveIcon: T = !1, size: E = "4xl", maxWidth: D, isLoading: O = !1 }) {
+	let { t: k } = e(), A = C ?? k("actions.save"), [j, M] = o(x), [N, P] = o(!1), F = a();
+	if (i(() => {
+		p && M(x);
+	}, [p, x]), h == null) return null;
+	let I = () => {
+		M(!0);
+	}, L = () => {
+		M(!1);
+	}, R = async (e) => {
+		if (y) {
+			P(!0);
+			try {
+				await y(e), M(!1);
+			} catch (e) {
+				console.error(e);
+			} finally {
+				P(!1);
+			}
+		}
+	}, z = [];
+	y !== void 0 && (j ? (w !== "" && z.push({
+		label: w ?? k("actions.cancel"),
+		onClick: L,
+		variant: "outline",
+		disabled: N || O,
+		icon: f
+	}), z.push({
+		label: N ? k("actions.saving") : A,
+		type: "submit",
+		form: F,
+		variant: "default",
+		disabled: N || O,
+		icon: T ? void 0 : d
+	})) : z.push({
+		label: k("actions.edit"),
+		onClick: I,
+		variant: "outline",
+		icon: u
+	}));
+	let B = {
+		title: g(h),
+		size: E,
+		maxWidth: D,
+		actions: S ? z : []
+	};
+	return /* @__PURE__ */ c(n, {
+		open: p,
+		onOpenChange: (e) => {
+			m(e), e || L();
+		},
+		config: B,
+		isLoading: N || O,
+		children: /* @__PURE__ */ l("div", { children: [
+			_ === void 0 ? null : /* @__PURE__ */ c("div", {
+				className: "mb-4",
+				children: _(h)
+			}),
+			/* @__PURE__ */ c(r, {
+				id: F,
+				schema: v,
+				initialData: h,
+				disabled: !j,
+				onSubmit: (e) => {
+					R(e);
+				},
+				renderActions: !1,
+				isLoading: N || O
+			}),
+			b === void 0 ? null : b(h),
+			y !== void 0 && !S ? /* @__PURE__ */ c("div", {
+				className: "flex justify-end gap-2 border-t pt-4 mt-6",
+				children: j ? /* @__PURE__ */ l(s, { children: [w === "" ? null : /* @__PURE__ */ l(t, {
+					onClick: L,
+					variant: "outline",
+					size: "sm",
+					disabled: N || O,
+					children: [/* @__PURE__ */ c(f, { className: "size-4 mr-2" }), w ?? k("actions.cancel")]
+				}), /* @__PURE__ */ l(t, {
+					type: "submit",
+					form: F,
+					size: "sm",
+					disabled: N || O,
+					className: "text-white",
+					children: [T ? null : /* @__PURE__ */ c(d, { className: "size-4 mr-2" }), N ? k("actions.saving") : A]
+				})] }) : /* @__PURE__ */ l(t, {
+					onClick: I,
+					variant: "outline",
+					size: "sm",
+					children: [/* @__PURE__ */ c(u, { className: "size-4 mr-2" }), k("actions.edit")]
+				})
+			}) : null
+		] })
+	});
+}
+//#endregion
+export { p as default };

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

@@ -1,4 +1,7 @@
-import { F as e } from "../../../ui-Fxy95kSJ.js";
-import { A as t, D as n, E as r, F as i, M as a, N as o, O as s, P as c, j as l, k as u } from "../../../sheet-cWJO_wkT.js";
-import { i as d, n as f, r as p, t as m } from "../../../dialogs-CG9Q7pqY.js";
-export { m as AboutDialog, d as AppDialog, f as ConfirmationDialog, r as Dialog, n as DialogClose, s as DialogContent, u as DialogDescription, t as DialogFooter, l as DialogHeader, a as DialogOverlay, o as DialogPortal, c as DialogTitle, i as DialogTrigger, p as FormDialog, e as Progress };
+import { Dialog as e, DialogClose as t, DialogContent as n, DialogDescription as r, DialogFooter as i, DialogHeader as a, DialogOverlay as o, DialogPortal as s, DialogTitle as c, DialogTrigger as l } from "../../ui/dialog.js";
+import { Progress as u } from "../../ui/progress.js";
+import { AppDialog as d } from "./AppDialog.js";
+import f from "./FormDialog.js";
+import { ConfirmationDialog as p } from "./ConfirmationDialog.js";
+import { AboutDialog as m } from "./AboutDialog.js";
+export { m as AboutDialog, d as AppDialog, p as ConfirmationDialog, e as Dialog, t as DialogClose, n as DialogContent, r as DialogDescription, i as DialogFooter, a as DialogHeader, o as DialogOverlay, s as DialogPortal, c as DialogTitle, l as DialogTrigger, f as FormDialog, u as Progress };

package/dist/components/core/filters/ActiveFilters.js

@@ -0,0 +1,69 @@
+import { useKrosoftTranslation as e } from "../../../i18n/useKrosoftTranslation.js";
+import { Badge as t } from "../../ui/badge.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { getLocale as i } from "@krosoft/core/helpers";
+import { XIcon as a } from "lucide-react";
+//#region src/components/core/filters/ActiveFilters.tsx
+var o = (e, t, n, r = {}) => {
+	if (t instanceof Date) return t.toLocaleDateString(i());
+	let a = String(t), o = r[`${e}_${a}`];
+	return o === void 0 ? e.includes("ok") || t === "true" || t === "false" ? n(t === "true" ? "filters.yes" : "filters.no") : a : o;
+};
+function s({ filters: i, onRemoveFilter: s, onClearAll: c, filterLabelKeys: l = {}, optionLabels: u = {} }) {
+	let { t: d } = e(), f = Object.entries(i).filter(([e, t]) => !(t == null || t === "" || Array.isArray(t) && t.length === 0));
+	return f.length === 0 ? null : /* @__PURE__ */ r("div", {
+		className: "flex flex-wrap items-center gap-2 mb-4",
+		children: [
+			/* @__PURE__ */ n("span", {
+				className: "text-sm text-muted-foreground font-medium",
+				children: d("filters.active")
+			}),
+			f.flatMap(([e, i]) => {
+				let c = l[e], f = c === void 0 ? e : d(c);
+				if (Array.isArray(i)) return i.map((i) => {
+					let c = o(e, i, d, u);
+					return /* @__PURE__ */ r(t, {
+						variant: "secondary",
+						className: "flex items-center gap-1 px-3 py-1 bg-primary/10 text-primary border border-primary/20 hover:bg-primary/20",
+						children: [
+							f,
+							": ",
+							c,
+							/* @__PURE__ */ n("button", {
+								onClick: () => {
+									s(e, i);
+								},
+								className: "ml-1 hover:bg-primary/20 rounded-full p-0.5",
+								children: /* @__PURE__ */ n(a, { className: "size-4" })
+							})
+						]
+					}, `${e}_${String(i)}`);
+				});
+				let p = o(e, i, d, u);
+				return /* @__PURE__ */ r(t, {
+					variant: "secondary",
+					className: "flex items-center gap-1 px-3 py-1 bg-primary/10 text-primary border border-primary/20 hover:bg-primary/20",
+					children: [
+						f,
+						": ",
+						p,
+						/* @__PURE__ */ n("button", {
+							onClick: () => {
+								s(e);
+							},
+							className: "ml-1 hover:bg-primary/20 rounded-full p-0.5",
+							children: /* @__PURE__ */ n(a, { className: "size-4" })
+						})
+					]
+				}, e);
+			}),
+			f.length > 0 && /* @__PURE__ */ n("button", {
+				onClick: c,
+				className: "text-xs text-destructive hover:text-destructive/80 transition-colors font-medium ml-auto",
+				children: d("filters.clearAll")
+			})
+		]
+	});
+}
+//#endregion
+export { s as ActiveFilters };