@krosoft/react 0.0.381 → 0.0.382

package/dist/components/ui/carousel.js

@@ -0,0 +1,115 @@
+import { cn as e } from "../../helpers/tailwind.helper.js";
+import { Button as t } from "./button.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { ArrowLeft as a, ArrowRight as o } from "lucide-react";
+import s from "embla-carousel-react";
+//#region src/components/ui/carousel.tsx
+var c = n.createContext(null);
+function l() {
+	let e = n.useContext(c);
+	if (!e) throw Error("useCarousel must be used within a <Carousel />");
+	return e;
+}
+var u = n.forwardRef(({ orientation: t = "horizontal", opts: i, setApi: a, plugins: o, className: l, children: u, ...d }, f) => {
+	let [p, m] = s({
+		...i,
+		axis: t === "horizontal" ? "x" : "y"
+	}, o), [h, g] = n.useState(!1), [_, v] = n.useState(!1), y = n.useCallback((e) => {
+		e && (g(e.canScrollPrev()), v(e.canScrollNext()));
+	}, []), b = n.useCallback(() => {
+		m?.scrollPrev();
+	}, [m]), x = n.useCallback(() => {
+		m?.scrollNext();
+	}, [m]), S = n.useCallback((e) => {
+		e.key === "ArrowLeft" ? (e.preventDefault(), b()) : e.key === "ArrowRight" && (e.preventDefault(), x());
+	}, [b, x]);
+	return n.useEffect(() => {
+		m && a && a(m);
+	}, [m, a]), n.useEffect(() => {
+		if (m) return y(m), m.on("reInit", y), m.on("select", y), () => {
+			m?.off("select", y);
+		};
+	}, [m, y]), /* @__PURE__ */ r(c.Provider, {
+		value: {
+			carouselRef: p,
+			api: m,
+			opts: i,
+			orientation: t || (i?.axis === "y" ? "vertical" : "horizontal"),
+			scrollPrev: b,
+			scrollNext: x,
+			canScrollPrev: h,
+			canScrollNext: _
+		},
+		children: /* @__PURE__ */ r("div", {
+			ref: f,
+			onKeyDownCapture: S,
+			className: e("relative", l),
+			role: "region",
+			"aria-roledescription": "carousel",
+			...d,
+			children: u
+		})
+	});
+});
+u.displayName = "Carousel";
+var d = n.forwardRef(({ className: t, ...n }, i) => {
+	let { carouselRef: a, orientation: o } = l();
+	return /* @__PURE__ */ r("div", {
+		ref: a,
+		className: "overflow-hidden",
+		children: /* @__PURE__ */ r("div", {
+			ref: i,
+			className: e("flex", o === "horizontal" ? "-ml-4" : "-mt-4 flex-col", t),
+			...n
+		})
+	});
+});
+d.displayName = "CarouselContent";
+var f = n.forwardRef(({ className: t, ...n }, i) => {
+	let { orientation: a } = l();
+	return /* @__PURE__ */ r("div", {
+		ref: i,
+		role: "group",
+		"aria-roledescription": "slide",
+		className: e("min-w-0 shrink-0 grow-0 basis-full", a === "horizontal" ? "pl-4" : "pt-4", t),
+		...n
+	});
+});
+f.displayName = "CarouselItem";
+var p = n.forwardRef(({ className: n, variant: o = "outline", size: s = "icon", ...c }, u) => {
+	let { orientation: d, scrollPrev: f, canScrollPrev: p } = l();
+	return /* @__PURE__ */ i(t, {
+		ref: u,
+		variant: o,
+		size: s,
+		className: e("absolute  h-8 w-8 rounded-control", d === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", n),
+		disabled: !p,
+		onClick: f,
+		...c,
+		children: [/* @__PURE__ */ r(a, { className: "size-4" }), /* @__PURE__ */ r("span", {
+			className: "sr-only",
+			children: "Previous slide"
+		})]
+	});
+});
+p.displayName = "CarouselPrevious";
+var m = n.forwardRef(({ className: n, variant: a = "outline", size: s = "icon", ...c }, u) => {
+	let { orientation: d, scrollNext: f, canScrollNext: p } = l();
+	return /* @__PURE__ */ i(t, {
+		ref: u,
+		variant: a,
+		size: s,
+		className: e("absolute h-8 w-8 rounded-control", d === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", n),
+		disabled: !p,
+		onClick: f,
+		...c,
+		children: [/* @__PURE__ */ r(o, { className: "size-4" }), /* @__PURE__ */ r("span", {
+			className: "sr-only",
+			children: "Next slide"
+		})]
+	});
+});
+m.displayName = "CarouselNext";
+//#endregion
+export { u as Carousel, d as CarouselContent, f as CarouselItem, m as CarouselNext, p as CarouselPrevious };

package/dist/{chart-wW-fwL3s.js → components/ui/chart.js}

@@ -1,75 +1,37 @@
-import { t as e } from "./tailwind.helper-CJaRYBmL.js";
+import { cn as e } from "../../helpers/tailwind.helper.js";
 import * as t from "react";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 import * as a from "recharts";
-//#region src/components/ui/card.tsx
-var o = t.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("div", {
-	ref: i,
-	className: e("rounded-surface border bg-card text-card-foreground shadow-sm", t),
-	...n
-}));
-o.displayName = "Card";
-var s = t.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("div", {
-	ref: i,
-	className: e("flex flex-col space-y-1.5 p-6", t),
-	...n
-}));
-s.displayName = "CardHeader";
-var c = t.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("h3", {
-	ref: i,
-	className: e("text-2xl font-semibold leading-none tracking-tight", t),
-	...n
-}));
-c.displayName = "CardTitle";
-var l = t.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("p", {
-	ref: i,
-	className: e("text-sm text-muted-foreground", t),
-	...n
-}));
-l.displayName = "CardDescription";
-var u = t.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("div", {
-	ref: i,
-	className: e("p-6 pt-0", t),
-	...n
-}));
-u.displayName = "CardContent";
-var d = t.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("div", {
-	ref: i,
-	className: e("flex items-center p-6 pt-0", t),
-	...n
-}));
-d.displayName = "CardFooter";
-//#endregion
 //#region src/components/ui/chart.tsx
-var f = {
+var o = {
 	light: "",
 	dark: ".dark"
-}, p = t.createContext(null);
-function m() {
-	let e = t.useContext(p);
+}, s = t.createContext(null);
+function c() {
+	let e = t.useContext(s);
 	if (!e) throw Error("useChart must be used within a <ChartContainer />");
 	return e;
 }
-var h = t.forwardRef(({ id: n, className: o, children: s, config: c, ...l }, u) => {
-	let d = t.useId(), f = `chart-${n || d.replace(/:/g, "")}`;
-	return /* @__PURE__ */ r(p.Provider, {
-		value: { config: c },
+var l = t.forwardRef(({ id: n, className: o, children: c, config: l, ...d }, f) => {
+	let p = t.useId(), m = `chart-${n || p.replace(/:/g, "")}`;
+	return /* @__PURE__ */ r(s.Provider, {
+		value: { config: l },
 		children: /* @__PURE__ */ i("div", {
-			"data-chart": f,
-			ref: u,
+			"data-chart": m,
+			ref: f,
 			className: e("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", o),
-			...l,
-			children: [/* @__PURE__ */ r(g, {
-				id: f,
-				config: c
-			}), /* @__PURE__ */ r(a.ResponsiveContainer, { children: s })]
+			...d,
+			children: [/* @__PURE__ */ r(u, {
+				id: m,
+				config: l
+			}), /* @__PURE__ */ r(a.ResponsiveContainer, { children: c })]
 		})
 	});
 });
-h.displayName = "Chart";
-var g = ({ id: e, config: t }) => {
+l.displayName = "Chart";
+var u = ({ id: e, config: t }) => {
 	let n = Object.entries(t).filter(([e, t]) => t.theme || t.color);
-	return n.length ? /* @__PURE__ */ r("style", { dangerouslySetInnerHTML: { __html: Object.entries(f).map(([t, r]) => `
+	return n.length ? /* @__PURE__ */ r("style", { dangerouslySetInnerHTML: { __html: Object.entries(o).map(([t, r]) => `
 ${r} [data-chart=${e}] {
 ${n.map(([e, n]) => {
 		let r = n.theme?.[t] || n.color;
@@ -77,47 +39,47 @@ ${n.map(([e, n]) => {
 	}).join("\n")}
 }
 `).join("\n") } }) : null;
-}, _ = a.Tooltip, v = t.forwardRef(({ active: a, payload: o = [], className: s, indicator: c = "dot", hideLabel: l = !1, hideIndicator: u = !1, label: d = "", labelFormatter: f, labelClassName: p, formatter: h, color: g, nameKey: _, labelKey: v }, y) => {
-	let { config: b } = m(), S = t.useMemo(() => {
-		if (l || !o?.length) return null;
-		let [t] = o, n = `${v || t.dataKey || t.name || "value"}`, i = x(b, t, n), a = !v && typeof d == "string" ? b[d]?.label || d : i?.label;
-		return f ? /* @__PURE__ */ r("div", {
-			className: e("font-medium", p),
-			children: f(a, o)
+}, d = a.Tooltip, f = t.forwardRef(({ active: a, payload: o = [], className: s, indicator: l = "dot", hideLabel: u = !1, hideIndicator: d = !1, label: f = "", labelFormatter: p, labelClassName: m, formatter: g, color: _, nameKey: v, labelKey: y }, b) => {
+	let { config: x } = c(), S = t.useMemo(() => {
+		if (u || !o?.length) return null;
+		let [t] = o, n = `${y || t.dataKey || t.name || "value"}`, i = h(x, t, n), a = !y && typeof f == "string" ? x[f]?.label || f : i?.label;
+		return p ? /* @__PURE__ */ r("div", {
+			className: e("font-medium", m),
+			children: p(a, o)
 		}) : a ? /* @__PURE__ */ r("div", {
-			className: e("font-medium", p),
+			className: e("font-medium", m),
 			children: a
 		}) : null;
 	}, [
-		d,
 		f,
-		o,
-		l,
 		p,
-		b,
-		v
+		o,
+		u,
+		m,
+		x,
+		y
 	]);
 	if (!a || !o?.length) return null;
-	let C = o.length === 1 && c !== "dot";
+	let C = o.length === 1 && l !== "dot";
 	return /* @__PURE__ */ i("div", {
-		ref: y,
+		ref: b,
 		className: e("grid min-w-[8rem] items-start gap-1.5 rounded-surface border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", s),
 		children: [C ? null : S, /* @__PURE__ */ r("div", {
 			className: "grid gap-1.5",
 			children: o.map((t, a) => {
-				let o = `${_ || t.name || t.dataKey || "value"}`, s = x(b, t, o), l = g || t.payload.fill || t.color;
+				let o = `${v || t.name || t.dataKey || "value"}`, s = h(x, t, o), c = _ || t.payload.fill || t.color;
 				return /* @__PURE__ */ r("div", {
-					className: e("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", c === "dot" && "items-center"),
-					children: h && t?.value !== void 0 && t.name ? h(t.value, t.name, t, a, t.payload) : /* @__PURE__ */ i(n, { children: [s?.icon ? /* @__PURE__ */ r(s.icon, {}) : !u && /* @__PURE__ */ r("div", {
+					className: e("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", l === "dot" && "items-center"),
+					children: g && t?.value !== void 0 && t.name ? g(t.value, t.name, t, a, t.payload) : /* @__PURE__ */ i(n, { children: [s?.icon ? /* @__PURE__ */ r(s.icon, {}) : !d && /* @__PURE__ */ r("div", {
 						className: e("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
-							"h-2.5 w-2.5": c === "dot",
-							"w-1": c === "line",
-							"w-0 border-[1.5px] border-dashed bg-transparent": c === "dashed",
-							"my-0.5": C && c === "dashed"
+							"h-2.5 w-2.5": l === "dot",
+							"w-1": l === "line",
+							"w-0 border-[1.5px] border-dashed bg-transparent": l === "dashed",
+							"my-0.5": C && l === "dashed"
 						}),
 						style: {
-							"--color-bg": l,
-							"--color-border": l
+							"--color-bg": c,
+							"--color-border": c
 						}
 					}), /* @__PURE__ */ i("div", {
 						className: e("flex flex-1 justify-between leading-none", C ? "items-end" : "items-center"),
@@ -137,14 +99,14 @@ ${n.map(([e, n]) => {
 		})]
 	});
 });
-v.displayName = "ChartTooltip";
-var y = a.Legend, b = t.forwardRef(({ className: t, hideIcon: n = !1, payload: a, verticalAlign: o = "bottom", nameKey: s }, c) => {
-	let { config: l } = m();
+f.displayName = "ChartTooltip";
+var p = a.Legend, m = t.forwardRef(({ className: t, hideIcon: n = !1, payload: a, verticalAlign: o = "bottom", nameKey: s }, l) => {
+	let { config: u } = c();
 	return !a || !Array.isArray(a) || !a.length ? null : /* @__PURE__ */ r("div", {
-		ref: c,
+		ref: l,
 		className: e("flex items-center justify-center gap-4", o === "top" ? "pb-3" : "pt-3", t),
 		children: Array.isArray(a) && a.map((t) => {
-			let a = `${s || t.dataKey || "value"}`, o = x(l, t, a);
+			let a = `${s || t.dataKey || "value"}`, o = h(u, t, a);
 			return /* @__PURE__ */ i("div", {
 				className: e("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"),
 				children: [o?.icon && !n ? /* @__PURE__ */ r(o.icon, {}) : /* @__PURE__ */ r("div", {
@@ -155,11 +117,11 @@ var y = a.Legend, b = t.forwardRef(({ className: t, hideIcon: n = !1, payload: a
 		})
 	});
 });
-b.displayName = "ChartLegend";
-function x(e, t, n) {
+m.displayName = "ChartLegend";
+function h(e, t, n) {
 	if (typeof t != "object" || !t) return;
 	let r = "payload" in t && typeof t.payload == "object" && t.payload !== null ? t.payload : void 0, i = n;
 	return n in t && typeof t[n] == "string" ? i = t[n] : r && n in r && typeof r[n] == "string" && (i = r[n]), i in e ? e[i] : e[n];
 }
 //#endregion
-export { _ as a, u as c, s as d, c as f, g as i, l, y as n, v as o, b as r, o as s, h as t, d as u };
+export { l as ChartContainer, p as ChartLegend, m as ChartLegendContent, u as ChartStyle, d as ChartTooltip, f as ChartTooltipContent };

package/dist/components/ui/checkbox.js

@@ -0,0 +1,31 @@
+import { cn as e } from "../../helpers/tailwind.helper.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { CheckIcon as r } from "lucide-react";
+import * as i from "@radix-ui/react-checkbox";
+//#region src/components/ui/checkbox.tsx
+var a = t.forwardRef(({ className: t, ...a }, o) => /* @__PURE__ */ n(i.Root, {
+	ref: o,
+	className: e("peer size-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground", t),
+	...a,
+	children: /* @__PURE__ */ n(i.Indicator, {
+		className: e("flex items-center justify-center text-current"),
+		children: a.checked === "indeterminate" ? /* @__PURE__ */ n("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 3,
+			className: "size-3",
+			children: /* @__PURE__ */ n("line", {
+				x1: "5",
+				y1: "12",
+				x2: "19",
+				y2: "12"
+			})
+		}) : /* @__PURE__ */ n(r, { className: "size-3" })
+	})
+}));
+a.displayName = i.Root.displayName;
+//#endregion
+export { a as Checkbox };

package/dist/components/ui/collapsible.js

@@ -0,0 +1,5 @@
+import * as e from "@radix-ui/react-collapsible";
+//#region src/components/ui/collapsible.tsx
+var t = e.Root, n = e.CollapsibleTrigger, r = e.CollapsibleContent;
+//#endregion
+export { t as Collapsible, r as CollapsibleContent, n as CollapsibleTrigger };

package/dist/components/ui/command.js

@@ -0,0 +1,84 @@
+import { cn as e } from "../../helpers/tailwind.helper.js";
+import { useKrosoftTranslation as t } from "../../i18n/useKrosoftTranslation.js";
+import { Dialog as n, DialogContent as r, DialogDescription as i, DialogTitle as a } from "./dialog.js";
+import * as o from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { SearchIcon as l } from "lucide-react";
+import { Command as u } from "cmdk";
+//#region src/components/ui/command.tsx
+var d = o.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ s(u, {
+	ref: r,
+	className: e("flex h-full w-full flex-col overflow-hidden rounded-surface bg-popover text-popover-foreground", t),
+	...n
+}));
+d.displayName = u.displayName;
+var f = ({ title: o, description: l, shouldFilter: u, className: f, children: p, ...m }) => {
+	let { t: h } = t();
+	return /* @__PURE__ */ s(n, {
+		...m,
+		children: /* @__PURE__ */ c(r, {
+			className: "flex flex-col overflow-hidden p-0 shadow-lg",
+			children: [
+				/* @__PURE__ */ s(a, {
+					className: "sr-only",
+					children: o ?? h("search.commandTitle")
+				}),
+				/* @__PURE__ */ s(i, {
+					className: "sr-only",
+					children: l ?? h("search.commandDescription")
+				}),
+				/* @__PURE__ */ s(d, {
+					shouldFilter: u,
+					className: e("[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3", "[&_[cmdk-list]]:max-h-none [&_[cmdk-list]]:min-h-0 [&_[cmdk-list]]:flex-1 sm:[&_[cmdk-list]]:max-h-[300px] sm:[&_[cmdk-list]]:flex-none", f),
+					children: p
+				})
+			]
+		})
+	});
+}, p = o.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ c("div", {
+	className: "flex items-center border-b px-3",
+	"cmdk-input-wrapper": "",
+	children: [/* @__PURE__ */ s(l, { className: "mr-2 size-4 shrink-0 opacity-50" }), /* @__PURE__ */ s(u.Input, {
+		ref: r,
+		className: e("flex h-11 w-full rounded-control bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", t),
+		...n
+	})]
+}));
+p.displayName = u.Input.displayName;
+var m = o.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ s(u.List, {
+	ref: r,
+	className: e("max-h-[300px] overflow-y-auto overflow-x-hidden", t),
+	...n
+}));
+m.displayName = u.List.displayName;
+var h = o.forwardRef((e, t) => /* @__PURE__ */ s(u.Empty, {
+	ref: t,
+	className: "py-6 text-center text-sm",
+	...e
+}));
+h.displayName = u.Empty.displayName;
+var g = o.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ s(u.Group, {
+	ref: r,
+	className: e("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", t),
+	...n
+}));
+g.displayName = u.Group.displayName;
+var _ = o.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ s(u.Separator, {
+	ref: r,
+	className: e("-mx-1 h-px bg-border", t),
+	...n
+}));
+_.displayName = u.Separator.displayName;
+var v = o.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ s(u.Item, {
+	ref: r,
+	className: e("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50", t),
+	...n
+}));
+v.displayName = u.Item.displayName;
+var y = ({ className: t, ...n }) => /* @__PURE__ */ s("span", {
+	className: e("ml-auto text-xs tracking-widest text-muted-foreground", t),
+	...n
+});
+y.displayName = "CommandShortcut";
+//#endregion
+export { d as Command, f as CommandDialog, h as CommandEmpty, g as CommandGroup, p as CommandInput, v as CommandItem, m as CommandList, _ as CommandSeparator, y as CommandShortcut };

package/dist/components/ui/context-menu.js

@@ -0,0 +1,71 @@
+import { cn as e } from "../../helpers/tailwind.helper.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Check as i, ChevronRight as a, Circle as o } from "lucide-react";
+import * as s from "@radix-ui/react-context-menu";
+//#region src/components/ui/context-menu.tsx
+var c = s.Root, l = s.Trigger, u = s.Group, d = s.Portal, f = s.Sub, p = s.RadioGroup, m = t.forwardRef(({ className: t, inset: i, children: o, ...c }, l) => /* @__PURE__ */ r(s.SubTrigger, {
+	ref: l,
+	className: e("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", i && "pl-8", t),
+	...c,
+	children: [o, /* @__PURE__ */ n(a, { className: "ml-auto size-4" })]
+}));
+m.displayName = s.SubTrigger.displayName;
+var h = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(s.SubContent, {
+	ref: i,
+	className: e("z-50 min-w-[8rem] overflow-hidden rounded-surface border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", t),
+	...r
+}));
+h.displayName = s.SubContent.displayName;
+var g = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(s.Portal, { children: /* @__PURE__ */ n(s.Content, {
+	ref: i,
+	className: e("z-50 min-w-[8rem] overflow-hidden rounded-surface border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", t),
+	...r
+}) }));
+g.displayName = s.Content.displayName;
+var _ = t.forwardRef(({ className: t, inset: r, ...i }, a) => /* @__PURE__ */ n(s.Item, {
+	ref: a,
+	className: e("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", r && "pl-8", t),
+	...i
+}));
+_.displayName = s.Item.displayName;
+var v = t.forwardRef(({ className: t, children: a, checked: o, ...c }, l) => /* @__PURE__ */ r(s.CheckboxItem, {
+	ref: l,
+	className: e("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", t),
+	checked: o,
+	...c,
+	children: [/* @__PURE__ */ n("span", {
+		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+		children: /* @__PURE__ */ n(s.ItemIndicator, { children: /* @__PURE__ */ n(i, { className: "size-4" }) })
+	}), a]
+}));
+v.displayName = s.CheckboxItem.displayName;
+var y = t.forwardRef(({ className: t, children: i, ...a }, c) => /* @__PURE__ */ r(s.RadioItem, {
+	ref: c,
+	className: e("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", t),
+	...a,
+	children: [/* @__PURE__ */ n("span", {
+		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+		children: /* @__PURE__ */ n(s.ItemIndicator, { children: /* @__PURE__ */ n(o, { className: "h-2 w-2 fill-current" }) })
+	}), i]
+}));
+y.displayName = s.RadioItem.displayName;
+var b = t.forwardRef(({ className: t, inset: r, ...i }, a) => /* @__PURE__ */ n(s.Label, {
+	ref: a,
+	className: e("px-2 py-1.5 text-sm font-semibold text-foreground", r && "pl-8", t),
+	...i
+}));
+b.displayName = s.Label.displayName;
+var x = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(s.Separator, {
+	ref: i,
+	className: e("-mx-1 my-1 h-px bg-border", t),
+	...r
+}));
+x.displayName = s.Separator.displayName;
+var S = ({ className: t, ...r }) => /* @__PURE__ */ n("span", {
+	className: e("ml-auto text-xs tracking-widest text-muted-foreground", t),
+	...r
+});
+S.displayName = "ContextMenuShortcut";
+//#endregion
+export { c as ContextMenu, v as ContextMenuCheckboxItem, g as ContextMenuContent, u as ContextMenuGroup, _ as ContextMenuItem, b as ContextMenuLabel, d as ContextMenuPortal, p as ContextMenuRadioGroup, y as ContextMenuRadioItem, x as ContextMenuSeparator, S as ContextMenuShortcut, f as ContextMenuSub, h as ContextMenuSubContent, m as ContextMenuSubTrigger, l as ContextMenuTrigger };

package/dist/components/ui/control.js

@@ -0,0 +1,5 @@
+import { cn as e } from "../../helpers/tailwind.helper.js";
+//#region src/components/ui/control.ts
+var t = "h-10 rounded-control border border-input bg-background px-3 py-2 text-sm ring-offset-background disabled:cursor-not-allowed disabled:opacity-50", n = e(t, "flex items-center justify-between outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&>span]:line-clamp-1"), r = "w-full md:w-[200px]";
+//#endregion
+export { t as controlBaseClass, r as controlFilterWidthClass, n as controlTriggerClass };

package/dist/components/ui/dialog.js

@@ -0,0 +1,49 @@
+import { cn as e } from "../../helpers/tailwind.helper.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { X as i } from "lucide-react";
+import * as a from "@radix-ui/react-dialog";
+//#region src/components/ui/dialog.tsx
+var o = a.Root, s = a.Trigger, c = a.Portal, l = a.Close, u = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a.Overlay, {
+	ref: i,
+	className: e("fixed inset-0 z-[70] bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", t),
+	...r
+}));
+u.displayName = a.Overlay.displayName;
+var d = "w-full max-w-none h-[100dvh] max-h-[100dvh] content-start rounded-none sm:h-auto sm:max-h-[95vh] sm:max-w-lg sm:rounded-surface", f = t.forwardRef(({ className: t, children: o, ...s }, l) => /* @__PURE__ */ r(c, { children: [/* @__PURE__ */ n(u, {}), /* @__PURE__ */ r(a.Content, {
+	ref: l,
+	className: e("fixed left-[50%] top-[50%] z-[70] grid overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", d, t),
+	...s,
+	children: [o, /* @__PURE__ */ r(a.Close, {
+		className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+		children: [/* @__PURE__ */ n(i, { className: "size-4" }), /* @__PURE__ */ n("span", {
+			className: "sr-only",
+			children: "Close"
+		})]
+	})]
+})] }));
+f.displayName = a.Content.displayName;
+var p = ({ className: t, ...r }) => /* @__PURE__ */ n("div", {
+	className: e("flex flex-col space-y-1.5 text-center sm:text-left", t),
+	...r
+});
+p.displayName = "DialogHeader";
+var m = ({ className: t, ...r }) => /* @__PURE__ */ n("div", {
+	className: e("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", t),
+	...r
+});
+m.displayName = "DialogFooter";
+var h = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a.Title, {
+	ref: i,
+	className: e("text-lg font-semibold leading-none tracking-tight", t),
+	...r
+}));
+h.displayName = a.Title.displayName;
+var g = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a.Description, {
+	ref: i,
+	className: e("text-sm text-muted-foreground", t),
+	...r
+}));
+g.displayName = a.Description.displayName;
+//#endregion
+export { o as Dialog, l as DialogClose, f as DialogContent, g as DialogDescription, m as DialogFooter, p as DialogHeader, u as DialogOverlay, c as DialogPortal, h as DialogTitle, s as DialogTrigger };

package/dist/components/ui/drawer.js

@@ -0,0 +1,47 @@
+import { cn as e } from "../../helpers/tailwind.helper.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Drawer as i } from "vaul";
+//#region src/components/ui/drawer.tsx
+var a = ({ shouldScaleBackground: e = !0, ...t }) => /* @__PURE__ */ n(i.Root, {
+	shouldScaleBackground: e,
+	...t
+});
+a.displayName = "Drawer";
+var o = i.Trigger, s = i.Portal, c = i.Close, l = t.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ n(i.Overlay, {
+	ref: a,
+	className: e("fixed inset-0 z-50 bg-black/80", t),
+	...r
+}));
+l.displayName = i.Overlay.displayName;
+var u = t.forwardRef(({ className: t, children: a, ...o }, c) => /* @__PURE__ */ r(s, { children: [/* @__PURE__ */ n(l, {}), /* @__PURE__ */ r(i.Content, {
+	ref: c,
+	className: e("fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-surface border bg-background", t),
+	...o,
+	children: [/* @__PURE__ */ n("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }), a]
+})] }));
+u.displayName = "DrawerContent";
+var d = ({ className: t, ...r }) => /* @__PURE__ */ n("div", {
+	className: e("grid gap-1.5 p-4 text-center sm:text-left", t),
+	...r
+});
+d.displayName = "DrawerHeader";
+var f = ({ className: t, ...r }) => /* @__PURE__ */ n("div", {
+	className: e("mt-auto flex flex-col gap-2 p-4", t),
+	...r
+});
+f.displayName = "DrawerFooter";
+var p = t.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ n(i.Title, {
+	ref: a,
+	className: e("text-lg font-semibold leading-none tracking-tight", t),
+	...r
+}));
+p.displayName = i.Title.displayName;
+var m = t.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ n(i.Description, {
+	ref: a,
+	className: e("text-sm text-muted-foreground", t),
+	...r
+}));
+m.displayName = i.Description.displayName;
+//#endregion
+export { a as Drawer, c as DrawerClose, u as DrawerContent, m as DrawerDescription, f as DrawerFooter, d as DrawerHeader, l as DrawerOverlay, s as DrawerPortal, p as DrawerTitle, o as DrawerTrigger };