@krosoft/react 0.0.380 → 0.0.382

package/dist/components/core/inputs/MultiSelect.js

@@ -0,0 +1,191 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { useKrosoftTranslation as t } from "../../../i18n/useKrosoftTranslation.js";
+import { Badge as ee } from "../../ui/badge.js";
+import { Checkbox as n } from "../../ui/checkbox.js";
+import { controlBaseClass as te, controlFilterWidthClass as r, controlTriggerClass as i } from "../../ui/control.js";
+import { Popover as a, PopoverContent as o, PopoverTrigger as s } from "../../ui/popover.js";
+import { renderOptionThumbnail as ne, useOptionWindow as re } from "./select.helper.js";
+import { useMemo as c, useState as l } from "react";
+import { Fragment as ie, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { ChevronDownIcon as f, SearchIcon as p, XIcon as m } from "lucide-react";
+import { Command as h } from "cmdk";
+//#region src/components/core/inputs/MultiSelect.tsx
+var g = ({ options: g, selected: _, onToggle: v, onClear: y, onSelectAll: b, variant: x = "input", placeholder: S, labelKey: C, searchable: w = !1, searchPlaceholder: T, disabled: E = !1, modal: D = !0, chips: O = !1, maxCount: k, className: A, ...j }) => {
+	let { t: M } = t(), [N, P] = l(""), [F, I] = l(!1), L = x === "pill", R = x === "input" ? void 0 : r, z = c(() => N === "" ? g : g.filter((e) => e.label.toLowerCase().includes(N.toLowerCase())), [g, N]), B = c(() => z.filter((e) => e.disabled !== !0).map((e) => e.value), [z]), V = c(() => _.filter((e) => g.find((t) => t.value === e)?.disabled === !0), [g, _]), H = c(() => B.length !== 0 && B.every((e) => _.includes(e)), [B, _]), U = c(() => _.map((e) => g.find((t) => t.value === e)?.label ?? e), [g, _]), W = k !== void 0 && k > 0 ? U.slice(0, k) : U, G = U.length - W.length, { listRef: K, virtualized: q, startIndex: J, endIndex: ae, padTop: Y, padBottom: X, onScroll: oe, resetScroll: Z } = re(F, z.length, g.some((e) => e.imageUrl !== void 0)), se = q ? z.slice(J, ae) : z, ce = (e) => {
+		I(e), e ? Z() : P("");
+	}, le = (e) => {
+		P(e), Z();
+	}, ue = () => {
+		V.length > 0 ? b === void 0 ? _.filter((e) => !V.includes(e)).forEach((e) => {
+			v(e);
+		}) : b(V) : y === void 0 ? b === void 0 ? _.forEach((e) => {
+			v(e);
+		}) : b([]) : y();
+	}, Q = () => {
+		if (H) b === void 0 ? y !== void 0 && _.every((e) => B.includes(e)) ? y() : B.forEach((e) => {
+			v(e);
+		}) : b(_.filter((e) => !B.includes(e)));
+		else if (b !== void 0) {
+			let e = [..._];
+			B.forEach((t) => {
+				e.includes(t) || e.push(t);
+			}), b(e);
+		} else B.forEach((e) => {
+			_.includes(e) || v(e);
+		});
+	}, $ = c(() => _.map((e) => ({
+		value: e,
+		option: g.find((t) => t.value === e)
+	})), [g, _]), de = L ? /* @__PURE__ */ d("button", {
+		...j,
+		type: "button",
+		disabled: E,
+		className: e(te, "inline-flex items-center justify-between gap-1.5 whitespace-nowrap transition-colors", _.length > 0 ? "border-primary bg-primary/10 text-primary font-medium" : "hover:bg-muted", R, A),
+		children: [/* @__PURE__ */ u("span", {
+			className: "truncate",
+			children: C === void 0 ? S ?? M("select.placeholder") : M(C)
+		}), /* @__PURE__ */ d("div", {
+			className: "flex shrink-0 items-center gap-1.5",
+			children: [_.length > 0 && /* @__PURE__ */ u("span", {
+				className: "flex h-4 min-w-[16px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-bold text-primary-foreground",
+				children: _.length
+			}), /* @__PURE__ */ u(f, { className: e("size-3.5 opacity-60 transition-transform", F && "rotate-180") })]
+		})]
+	}) : /* @__PURE__ */ d("button", {
+		...j,
+		type: "button",
+		disabled: E,
+		className: e(i, "w-full", R, F && "ring-2 ring-ring ring-offset-2", _.length === 0 && "text-muted-foreground", A),
+		children: [/* @__PURE__ */ u("span", {
+			className: "truncate",
+			children: _.length === 0 ? S ?? M("select.placeholder") : W.join(", ")
+		}), /* @__PURE__ */ d("div", {
+			className: "flex shrink-0 items-center gap-1",
+			children: [
+				G > 0 && /* @__PURE__ */ d("span", {
+					className: "rounded-control bg-muted px-1.5 py-0.5 text-xs font-medium text-foreground",
+					children: ["+", G]
+				}),
+				_.length > 0 && !E && /* @__PURE__ */ u("span", {
+					role: "button",
+					tabIndex: -1,
+					onClick: (e) => {
+						e.stopPropagation();
+					},
+					onPointerDown: (e) => {
+						e.preventDefault(), e.stopPropagation(), ue();
+					},
+					className: "text-muted-foreground hover:text-foreground",
+					children: /* @__PURE__ */ u(m, { className: "size-4" })
+				}),
+				/* @__PURE__ */ u(f, { className: e("size-4 opacity-50 shrink-0 transition-transform", F && "rotate-180") })
+			]
+		})]
+	}), fe = O && $.length > 0 ? /* @__PURE__ */ u("div", {
+		className: "mt-2 flex flex-wrap gap-1.5",
+		children: $.map(({ value: e, option: t }) => {
+			let n = t?.disabled === !0;
+			return /* @__PURE__ */ d(ee, {
+				variant: "secondary",
+				className: "flex items-center gap-1 border border-primary/20 bg-primary/10 py-0.5 pl-2 pr-1 text-primary",
+				children: [/* @__PURE__ */ u("span", {
+					className: "max-w-[16rem] truncate",
+					children: t?.label ?? e
+				}), !n && /* @__PURE__ */ u("button", {
+					type: "button",
+					onClick: () => {
+						v(e);
+					},
+					className: "rounded-full p-0.5 hover:bg-primary/20",
+					"aria-label": M("filters.remove"),
+					children: /* @__PURE__ */ u(m, { className: "size-3" })
+				})]
+			}, e);
+		})
+	}) : null;
+	return /* @__PURE__ */ d(ie, { children: [/* @__PURE__ */ d(a, {
+		open: F,
+		onOpenChange: ce,
+		modal: D,
+		children: [/* @__PURE__ */ u(s, {
+			asChild: !0,
+			children: de
+		}), /* @__PURE__ */ d(o, {
+			className: e("p-0", L ? "w-72 max-w-[var(--radix-popover-content-available-width)]" : "w-[var(--radix-popover-trigger-width)]"),
+			align: "start",
+			children: [/* @__PURE__ */ d(h, {
+				shouldFilter: !1,
+				className: "flex flex-col",
+				children: [w ? /* @__PURE__ */ u("div", {
+					className: "border-b border-border p-2",
+					children: /* @__PURE__ */ d("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ u(p, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ u(h.Input, {
+							value: N,
+							onValueChange: le,
+							placeholder: T ?? M("search.placeholder"),
+							className: "w-full rounded-control bg-muted/50 py-1.5 pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground outline-none focus:ring-1 focus:ring-ring",
+							autoFocus: !0
+						})]
+					})
+				}) : /* @__PURE__ */ u(h.Input, {
+					autoFocus: !0,
+					tabIndex: -1,
+					className: "sr-only"
+				}), /* @__PURE__ */ d(h.List, {
+					ref: K,
+					onScroll: oe,
+					className: e("flex flex-col max-h-56 overflow-y-auto overflow-x-hidden p-1.5 scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-track]:bg-transparent", !q && "gap-0.5"),
+					children: [
+						z.length === 0 && /* @__PURE__ */ u("p", {
+							className: "px-2 py-3 text-center text-xs text-muted-foreground",
+							children: M("states.noResult")
+						}),
+						Y > 0 && /* @__PURE__ */ u("div", {
+							"aria-hidden": !0,
+							style: { height: Y }
+						}),
+						se.map((e) => /* @__PURE__ */ d(h.Item, {
+							value: e.value,
+							disabled: e.disabled,
+							onSelect: () => {
+								v(e.value);
+							},
+							className: "flex min-w-0 items-center gap-2.5 rounded-md px-2 py-2 text-sm cursor-pointer transition-colors data-[selected=true]:bg-muted data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+							children: [
+								/* @__PURE__ */ u("span", {
+									className: "pointer-events-none shrink-0",
+									children: /* @__PURE__ */ u(n, { checked: _.includes(e.value) })
+								}),
+								ne(e.imageUrl),
+								e.color && /* @__PURE__ */ u("span", {
+									className: "size-2.5 shrink-0 rounded-full",
+									style: { backgroundColor: e.color }
+								}),
+								/* @__PURE__ */ u("span", {
+									className: "min-w-0 flex-1 truncate",
+									title: e.label,
+									children: e.label
+								})
+							]
+						}, e.value)),
+						X > 0 && /* @__PURE__ */ u("div", {
+							"aria-hidden": !0,
+							style: { height: X }
+						})
+					]
+				})]
+			}), B.length > 0 && /* @__PURE__ */ u("div", {
+				className: "border-t border-border p-1.5",
+				children: /* @__PURE__ */ u("button", {
+					type: "button",
+					onClick: Q,
+					className: "w-full rounded-md px-2 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted transition-colors text-center",
+					children: M(H ? "filters.deselectAll" : "filters.selectAll")
+				})
+			})]
+		})]
+	}), fe] });
+};
+//#endregion
+export { g as MultiSelect };

package/dist/components/core/inputs/RatingInput.js

@@ -0,0 +1,36 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Heart as n, Star as r } from "lucide-react";
+//#region src/components/core/inputs/RatingInput.tsx
+var i = {
+	heart: {
+		Icon: n,
+		filledClassName: "fill-rose-500 text-rose-500",
+		unit: "cœur"
+	},
+	star: {
+		Icon: r,
+		filledClassName: "fill-amber-400 text-amber-400",
+		unit: "étoile"
+	}
+};
+function a({ value: n, onChange: r, max: a = 5, size: o = "md", icon: s = "star", colorClassName: c, className: l }) {
+	let { Icon: u, filledClassName: d, unit: f } = i[s], p = !r, m = o === "sm" ? "h-3.5 w-3.5" : "h-5 w-5", h = c ?? d;
+	return /* @__PURE__ */ t("div", {
+		className: e("flex items-center gap-0.5", l),
+		role: p ? "img" : void 0,
+		"aria-label": p ? `${n}/${a} ${f}${n > 1 ? "s" : ""}` : void 0,
+		children: Array.from({ length: a }, (i, a) => {
+			let o = a + 1, s = /* @__PURE__ */ t(u, { className: e(m, o <= n ? h : "text-muted-foreground/40") });
+			return p ? /* @__PURE__ */ t("span", { children: s }, o) : /* @__PURE__ */ t("button", {
+				type: "button",
+				onClick: () => r?.(n === o ? 0 : o),
+				"aria-label": `${o} ${f}${o > 1 ? "s" : ""}`,
+				className: "leading-none transition-transform hover:scale-110",
+				children: s
+			}, o);
+		})
+	});
+}
+//#endregion
+export { a as RatingInput };

package/dist/{SearchInput-IT_Rvthr.js → components/core/inputs/SearchInput.js}

@@ -1,6 +1,6 @@
-import { t as e } from "./tailwind.helper-CJaRYBmL.js";
-import { t } from "./i18n-BhLphJa3.js";
-import { g as n } from "./sheet-cWJO_wkT.js";
+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 { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { SearchIcon as a, XIcon as o } from "lucide-react";
 //#region src/components/core/inputs/SearchInput.tsx
@@ -33,4 +33,4 @@ var s = ({ searchQuery: s, search: c, placeholder: l, onSearch: u, onSubmit: d,
 	});
 };
 //#endregion
-export { s as t };
+export { s as SearchInput };

package/dist/components/core/inputs/SingleSelect.js

@@ -0,0 +1,198 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { useKrosoftTranslation as t } from "../../../i18n/useKrosoftTranslation.js";
+import { controlFilterWidthClass as ee, controlTriggerClass as te } from "../../ui/control.js";
+import { Popover as n, PopoverContent as r, PopoverTrigger as i } from "../../ui/popover.js";
+import { Select as a, SelectContent as o, SelectItem as s, SelectTrigger as c, SelectValue as l } from "../../ui/select.js";
+import { renderOptionThumbnail as u, useOptionWindow as ne } from "./select.helper.js";
+import { useMemo as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { CheckIcon as h, ChevronDownIcon as g, PlusIcon as _, SearchIcon as v, XIcon as y } from "lucide-react";
+import { Command as b } from "cmdk";
+//#region src/components/core/inputs/SingleSelect.tsx
+var x = ({ options: x = [], value: S, onChange: C, onClear: w, searchable: T = !1, onCreate: E, placeholder: D, searchPlaceholder: re, emptyLabel: ie, createLabel: O, disabled: k = !1, modal: A = !0, variant: j = "input", className: M, ...N }) => {
+	let { t: P } = t(), [F, I] = f(!1), [L, R] = f(""), z = j === "filter" ? ee : void 0, B = S !== void 0 && S !== "", V = d(() => B ? x.find((e) => e.value === S) : void 0, [
+		B,
+		x,
+		S
+	]), H = B ? V?.label ?? S : void 0, U = L.trim(), W = d(() => {
+		if (U === "") return x;
+		let e = U.toLowerCase();
+		return x.filter((t) => `${t.label} ${t.description ?? ""}`.toLowerCase().includes(e));
+	}, [x, U]), { listRef: G, virtualized: K, startIndex: q, endIndex: J, padTop: Y, padBottom: X, onScroll: ae, resetScroll: Z } = ne(F, W.length, x.some((e) => e.imageUrl !== void 0)), oe = K ? W.slice(q, J) : W;
+	if (!T) return /* @__PURE__ */ m(a, {
+		value: S ?? "",
+		onValueChange: C,
+		disabled: k,
+		children: [/* @__PURE__ */ p(c, {
+			...N,
+			className: e(!B && "text-muted-foreground", z, M),
+			onClear: w !== void 0 && B && !k ? (e) => {
+				e.preventDefault(), e.stopPropagation(), w();
+			} : void 0,
+			children: /* @__PURE__ */ p(l, { placeholder: D ?? P("select.placeholder") })
+		}), /* @__PURE__ */ p(o, { children: x.map((e) => /* @__PURE__ */ p(s, {
+			value: e.value,
+			disabled: e.disabled,
+			children: /* @__PURE__ */ m("span", {
+				className: "flex items-center",
+				children: [
+					u(e.imageUrl, "mr-2"),
+					e.color !== void 0 && /* @__PURE__ */ p("span", {
+						className: "mr-2 size-2.5 shrink-0 rounded-full",
+						style: { backgroundColor: e.color }
+					}),
+					e.label,
+					e.description !== void 0 && /* @__PURE__ */ m("span", {
+						className: "ml-1 text-muted-foreground",
+						children: [
+							"(",
+							e.description,
+							")"
+						]
+					})
+				]
+			})
+		}, e.value)) })]
+	});
+	let Q = E !== void 0 && U !== "" && !x.some((e) => e.label.toLowerCase() === U.toLowerCase()), $ = (e) => {
+		I(e), e ? Z() : R("");
+	}, se = (e) => {
+		R(e), Z();
+	}, ce = (e) => {
+		C(e), $(!1);
+	}, le = () => {
+		E?.(U), $(!1);
+	};
+	return /* @__PURE__ */ m(n, {
+		open: F,
+		onOpenChange: $,
+		modal: A,
+		children: [/* @__PURE__ */ p(i, {
+			asChild: !0,
+			children: /* @__PURE__ */ m("button", {
+				...N,
+				type: "button",
+				role: "combobox",
+				"aria-expanded": F,
+				disabled: k,
+				className: e(te, "w-full", z, "data-[state=open]:ring-2 data-[state=open]:ring-ring data-[state=open]:ring-offset-2", !B && "text-muted-foreground", M),
+				children: [/* @__PURE__ */ m("div", {
+					className: "flex min-w-0 items-center truncate",
+					children: [
+						u(V?.imageUrl, "mr-2 h-6 w-8"),
+						V?.color && /* @__PURE__ */ p("span", {
+							className: "mr-2 size-2.5 shrink-0 rounded-full",
+							style: { backgroundColor: V.color }
+						}),
+						/* @__PURE__ */ p("span", {
+							className: "truncate",
+							children: H ?? D ?? P("select.placeholder")
+						}),
+						V?.description !== void 0 && /* @__PURE__ */ m("span", {
+							className: "ml-1 truncate text-muted-foreground",
+							children: [
+								"(",
+								V.description,
+								")"
+							]
+						})
+					]
+				}), /* @__PURE__ */ m("div", {
+					className: "flex items-center gap-1",
+					children: [w && B && !k && /* @__PURE__ */ p("span", {
+						role: "button",
+						tabIndex: -1,
+						onClick: (e) => {
+							e.stopPropagation();
+						},
+						onPointerDown: (e) => {
+							e.preventDefault(), e.stopPropagation(), w();
+						},
+						className: "text-muted-foreground hover:text-foreground",
+						children: /* @__PURE__ */ p(y, { className: "size-4" })
+					}), /* @__PURE__ */ p(g, { className: e("size-4 shrink-0 opacity-50 transition-transform", F && "rotate-180") })]
+				})]
+			})
+		}), /* @__PURE__ */ p(r, {
+			className: "w-[var(--radix-popover-trigger-width)] p-0",
+			align: "start",
+			children: /* @__PURE__ */ m(b, {
+				shouldFilter: !1,
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ p("div", {
+					className: "border-b border-border p-2",
+					children: /* @__PURE__ */ m("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ p(v, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ p(b.Input, {
+							value: L,
+							onValueChange: se,
+							placeholder: re ?? P("search.placeholder"),
+							className: "w-full rounded-control bg-muted/50 py-1.5 pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground outline-none focus:ring-1 focus:ring-ring",
+							autoFocus: !0
+						})]
+					})
+				}), /* @__PURE__ */ m(b.List, {
+					ref: G,
+					onScroll: ae,
+					className: e("flex flex-col max-h-56 overflow-y-auto overflow-x-hidden p-1.5 scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-track]:bg-transparent", !K && "gap-0.5"),
+					children: [
+						W.length === 0 && !Q && /* @__PURE__ */ p("div", {
+							className: "px-2 py-3 text-center text-xs text-muted-foreground",
+							children: ie ?? P("states.noResult")
+						}),
+						Y > 0 && /* @__PURE__ */ p("div", {
+							"aria-hidden": !0,
+							style: { height: Y }
+						}),
+						oe.map((t) => /* @__PURE__ */ m(b.Item, {
+							value: t.value,
+							keywords: [t.label, t.description ?? ""],
+							disabled: t.disabled,
+							onSelect: () => {
+								ce(t.value);
+							},
+							className: "flex min-w-0 items-center gap-2 rounded-md px-2 py-2 text-sm cursor-pointer transition-colors data-[selected=true]:bg-muted data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+							children: [
+								u(t.imageUrl),
+								t.color && /* @__PURE__ */ p("span", {
+									className: "size-2.5 shrink-0 rounded-full",
+									style: { backgroundColor: t.color }
+								}),
+								/* @__PURE__ */ p("span", {
+									className: "min-w-0 flex-1 truncate",
+									title: t.label,
+									children: t.label
+								}),
+								t.description !== void 0 && /* @__PURE__ */ m("span", {
+									className: "shrink-0 truncate text-muted-foreground",
+									children: [
+										"(",
+										t.description,
+										")"
+									]
+								}),
+								/* @__PURE__ */ p(h, { className: e("ml-auto size-4 shrink-0", S === t.value ? "opacity-100" : "opacity-0") })
+							]
+						}, t.value)),
+						X > 0 && /* @__PURE__ */ p("div", {
+							"aria-hidden": !0,
+							style: { height: X }
+						}),
+						Q && /* @__PURE__ */ m(b.Item, {
+							forceMount: !0,
+							value: "__create__",
+							onSelect: le,
+							className: "flex min-w-0 items-center gap-2.5 rounded-md px-2 py-2 text-sm cursor-pointer transition-colors data-[selected=true]:bg-muted",
+							children: [/* @__PURE__ */ p(_, { className: "size-4 shrink-0" }), /* @__PURE__ */ p("span", {
+								className: "truncate",
+								children: O ? O(U) : P("select.create", { search: U })
+							})]
+						})
+					]
+				})]
+			})
+		})]
+	});
+};
+//#endregion
+export { x as SingleSelect };

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

@@ -1,6 +1,9 @@
-import { t as e } from "../../../SearchInput-IT_Rvthr.js";
-import { t } from "../../../ImageInput-BeIOm3GY.js";
-import { t as n } from "../../../MultiSelect-DPN046kI.js";
-import { n as r, r as i, t as a } from "../../../SingleSelect-DLY5WylQ.js";
-import { n as o, t as s } from "../../../inputs-CBojnClc.js";
-export { i as DatePicker, r as DateRangePicker, o as FileDropzone, t as ImageInput, n as MultiSelect, s as RatingInput, e as SearchInput, a as SingleSelect };
+import { SearchInput as e } from "./SearchInput.js";
+import { ImageInput as t } from "./ImageInput.js";
+import { MultiSelect as n } from "./MultiSelect.js";
+import { DatePicker as r } from "./DatePicker.js";
+import { DateRangePicker as i } from "./DateRangePicker.js";
+import { SingleSelect as a } from "./SingleSelect.js";
+import { FileDropzone as o } from "./FileDropzone.js";
+import { RatingInput as s } from "./RatingInput.js";
+export { r as DatePicker, i as DateRangePicker, o as FileDropzone, t as ImageInput, n as MultiSelect, s as RatingInput, e as SearchInput, a as SingleSelect };

package/dist/components/core/inputs/select.helper.js

@@ -0,0 +1,46 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { useCallback as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/core/inputs/select.helper.tsx
+var o = 40, s = 224, c = 6;
+function l(e, a, l) {
+	let u = r(null), [d, f] = i(0), [p, m] = i(0), h = p || (l ? 52 : 40), g = a > o, _ = g ? Math.max(0, Math.floor(d / h) - c) : 0, v = g ? Math.min(a, Math.ceil((d + s) / h) + c) : a, y = g ? _ * h : 0, b = g ? (a - v) * h : 0;
+	n(() => {
+		if (!e) return;
+		let t = u.current?.querySelector("[cmdk-item]");
+		if (t) {
+			let e = t.getBoundingClientRect().height;
+			e > 0 && Math.abs(e - p) > .5 && m(e);
+		}
+	}, [
+		e,
+		a,
+		p
+	]);
+	let x = t(() => {
+		f(0), u.current && (u.current.scrollTop = 0);
+	}, []);
+	return {
+		listRef: u,
+		virtualized: g,
+		startIndex: _,
+		endIndex: v,
+		padTop: y,
+		padBottom: b,
+		onScroll: g ? (e) => {
+			f(e.currentTarget.scrollTop);
+		} : void 0,
+		resetScroll: x
+	};
+}
+var u = (t, n) => t === void 0 ? null : t ? /* @__PURE__ */ a("img", {
+	src: t,
+	alt: "",
+	loading: "lazy",
+	className: e("h-9 w-12 shrink-0 rounded object-cover", n)
+}) : /* @__PURE__ */ a("span", {
+	className: e("flex h-9 w-12 shrink-0 items-center justify-center rounded bg-muted text-[9px] text-muted-foreground", n),
+	children: "—"
+});
+//#endregion
+export { u as renderOptionThumbnail, l as useOptionWindow };

package/dist/{language-DY0EYabh.js → components/core/language/LanguageSelector.js}

@@ -1,7 +1,8 @@
-import { t as e } from "./i18n-BhLphJa3.js";
-import { c as t, i as n, n as r, r as i, t as a } from "./tooltip-_geGvbS7.js";
-import { i as o, l as s, n as c, t as l, u } from "./select-KWMg2_7Z.js";
-import { t as d } from "./useLanguage-DRnSb5H1.js";
+import { useKrosoftTranslation as e } from "../../../i18n/useKrosoftTranslation.js";
+import { Button as t } from "../../ui/button.js";
+import { Select as n, SelectContent as r, SelectItem as i, SelectTrigger as a, SelectValue as o } from "../../ui/select.js";
+import { Tooltip as s, TooltipContent as c, TooltipProvider as l, TooltipTrigger as u } from "../../ui/tooltip.js";
+import { useLanguage as d } from "../../../hooks/ui/useLanguage.js";
 import "react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 import { LanguagesIcon as m } from "lucide-react";
@@ -10,7 +11,7 @@ function h({ languageOptions: h, variant: g = "select", id: _, className: v }) {
 	let { t: y } = e(), { currentLanguageOption: b, nextLanguageOption: x, changeLanguage: S, cycleLanguage: C } = d(h);
 	if (g === "mini") {
 		let e = b?.icon ?? m;
-		return /* @__PURE__ */ f(i, { children: /* @__PURE__ */ p(a, { children: [/* @__PURE__ */ f(n, {
+		return /* @__PURE__ */ f(l, { children: /* @__PURE__ */ p(s, { children: [/* @__PURE__ */ f(u, {
 			asChild: !0,
 			children: /* @__PURE__ */ p(t, {
 				id: _,
@@ -23,7 +24,7 @@ function h({ languageOptions: h, variant: g = "select", id: _, className: v }) {
 					children: y("language.current", { language: b?.label ?? "" })
 				})]
 			})
-		}), /* @__PURE__ */ f(r, {
+		}), /* @__PURE__ */ f(c, {
 			side: "bottom",
 			align: "center",
 			children: y("language.switchTo", { language: x?.label ?? "" })
@@ -31,16 +32,16 @@ function h({ languageOptions: h, variant: g = "select", id: _, className: v }) {
 	}
 	return /* @__PURE__ */ p("div", {
 		className: "space-y-2",
-		children: [/* @__PURE__ */ p(l, {
+		children: [/* @__PURE__ */ p(n, {
 			value: b?.value,
 			onValueChange: S,
-			children: [/* @__PURE__ */ f(s, {
+			children: [/* @__PURE__ */ f(a, {
 				id: _,
 				className: "w-full",
-				children: /* @__PURE__ */ f(u, { placeholder: y("select.language") })
-			}), /* @__PURE__ */ f(c, { children: h.map((e) => {
+				children: /* @__PURE__ */ f(o, { placeholder: y("select.language") })
+			}), /* @__PURE__ */ f(r, { children: h.map((e) => {
 				let t = e.icon ?? m;
-				return /* @__PURE__ */ f(o, {
+				return /* @__PURE__ */ f(i, {
 					value: e.value,
 					children: /* @__PURE__ */ p("div", {
 						className: "flex items-center gap-2",
@@ -55,4 +56,4 @@ function h({ languageOptions: h, variant: g = "select", id: _, className: v }) {
 	});
 }
 //#endregion
-export { h as t };
+export { h as LanguageSelector };

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

@@ -1 +1 @@
-export { t as LanguageSelector } from "../../../language-DY0EYabh.js";
+export { LanguageSelector } from "./LanguageSelector.js";

package/dist/{AppActions-8HjAaTQK.js → components/core/layouts/AppActions.js}

@@ -1,8 +1,8 @@
-import { t as e } from "./tailwind.helper-CJaRYBmL.js";
-import { t } from "./i18n-BhLphJa3.js";
-import { Nt as n, Rt as r, Ut as i, jt as a, kt as o } from "./ui-Fxy95kSJ.js";
-import { c as s } from "./tooltip-_geGvbS7.js";
-import { t as c } from "./useMobile-pTQ8lWvt.js";
+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 { DropdownMenu as r, DropdownMenuContent as i, DropdownMenuItem as a, DropdownMenuSeparator as o, DropdownMenuTrigger as s } from "../../ui/dropdown-menu.js";
+import { useMobile as c } from "../../../hooks/ui/useMobile.js";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { MoreVerticalIcon as d } from "lucide-react";
 //#region src/components/core/layouts/AppActions.tsx
@@ -12,52 +12,52 @@ var f = (e) => {
 };
 function p({ actions: p, className: m }) {
 	let { t: h } = t(), g = c();
-	return !p || p.length === 0 ? null : g ? /* @__PURE__ */ u(o, { children: [/* @__PURE__ */ l(i, {
+	return !p || p.length === 0 ? null : g ? /* @__PURE__ */ u(r, { children: [/* @__PURE__ */ l(s, {
 		asChild: !0,
-		children: /* @__PURE__ */ l(s, {
+		children: /* @__PURE__ */ l(n, {
 			variant: "outline",
 			size: "icon",
 			children: /* @__PURE__ */ l(d, { className: "size-4" })
 		})
-	}), /* @__PURE__ */ l(a, {
+	}), /* @__PURE__ */ l(i, {
 		align: "end",
 		className: "min-w-48",
-		children: p.map((t, i) => t ? t.children && t.children.length > 0 ? /* @__PURE__ */ u("div", { children: [i > 0 && /* @__PURE__ */ l(r, {}), t.children.map((t, r) => t ? /* @__PURE__ */ u(n, {
+		children: p.map((t, n) => t ? t.children && t.children.length > 0 ? /* @__PURE__ */ u("div", { children: [n > 0 && /* @__PURE__ */ l(o, {}), t.children.map((t, n) => t ? /* @__PURE__ */ u(a, {
 			onClick: () => {
 				t.type === "submit" ? f(t.form) : t.onClick?.();
 			},
 			disabled: t.disabled,
 			className: e("gap-2", t.className),
 			children: [t.icon && /* @__PURE__ */ l(t.icon, { className: "size-4" }), t.labelKey && h(t.labelKey)]
-		}, r) : null)] }, i) : /* @__PURE__ */ u(n, {
+		}, n) : null)] }, n) : /* @__PURE__ */ u(a, {
 			onClick: () => {
 				t.type === "submit" ? f(t.form) : t.onClick?.();
 			},
 			disabled: t.disabled,
 			className: e("gap-2", t.className),
 			children: [t.icon && /* @__PURE__ */ l(t.icon, { className: "size-4" }), t.labelKey && h(t.labelKey)]
-		}, i) : null)
+		}, n) : null)
 	})] }) : ((t) => /* @__PURE__ */ l("div", {
 		className: e("flex gap-2", m),
-		children: t.map((t, r) => t ? t.children && t.children.length > 0 ? /* @__PURE__ */ u(o, { children: [/* @__PURE__ */ l(i, {
+		children: t.map((t, o) => t ? t.children && t.children.length > 0 ? /* @__PURE__ */ u(r, { children: [/* @__PURE__ */ l(s, {
 			asChild: !0,
-			children: /* @__PURE__ */ u(s, {
+			children: /* @__PURE__ */ u(n, {
 				variant: t.variant,
 				disabled: t.disabled,
 				className: e("gap-2", t.className),
 				children: [t.icon && /* @__PURE__ */ l(t.icon, { className: "size-4" }), t.labelKey && h(t.labelKey)]
 			})
-		}), /* @__PURE__ */ l(a, {
+		}), /* @__PURE__ */ l(i, {
 			align: "end",
-			children: t.children.map((t, r) => t ? /* @__PURE__ */ u(n, {
+			children: t.children.map((t, n) => t ? /* @__PURE__ */ u(a, {
 				onClick: () => {
 					t.type === "submit" ? f(t.form) : t.onClick?.();
 				},
 				disabled: t.disabled,
 				className: e("gap-2", t.className),
 				children: [t.icon && /* @__PURE__ */ l(t.icon, { className: "size-4" }), t.labelKey && h(t.labelKey)]
-			}, r) : null)
-		})] }, r) : /* @__PURE__ */ u(s, {
+			}, n) : null)
+		})] }, o) : /* @__PURE__ */ u(n, {
 			variant: t.variant,
 			type: t.type,
 			form: t.form,
@@ -65,8 +65,8 @@ function p({ actions: p, className: m }) {
 			disabled: t.disabled,
 			className: e("gap-2", t.className),
 			children: [t.icon && /* @__PURE__ */ l(t.icon, { className: "size-4" }), t.labelKey && h(t.labelKey)]
-		}, r) : null)
+		}, o) : null)
 	}))(p);
 }
 //#endregion
-export { p as t };
+export { p as AppActions };