@viglet/viglet-design-system 2026.3.9 → 2026.3.11

package/dist/user.context-D1PxP4D4.js

@@ -1,512 +0,0 @@
-import { D as e, F as t, H as n, M as r, U as i, k as a, l as o, u as s } from "./badge-locale-CoEEv7s5.js";
-import c, { createContext as l, useCallback as u, useContext as d, useEffect as f, useRef as p, useState as m } from "react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import * as _ from "@radix-ui/react-avatar";
-import { Slot as v } from "@radix-ui/react-slot";
-import { cva as y } from "class-variance-authority";
-import { useTranslation as b } from "react-i18next";
-import { IconChevronDown as x, IconLoader2 as S, IconSearch as C, IconSparkles as w, IconTrash as T } from "@tabler/icons-react";
-import { Icon as E } from "@iconify/react";
-import { useTheme as D } from "next-themes";
-import { Toaster as O, toast as k } from "sonner";
-var A = n("circle-check", [["circle", {
-	cx: "12",
-	cy: "12",
-	r: "10",
-	key: "1mglay"
-}], ["path", {
-	d: "m9 12 2 2 4-4",
-	key: "dzmm74"
-}]]), j = n("info", [
-	["circle", {
-		cx: "12",
-		cy: "12",
-		r: "10",
-		key: "1mglay"
-	}],
-	["path", {
-		d: "M12 16v-4",
-		key: "1dtifu"
-	}],
-	["path", {
-		d: "M12 8h.01",
-		key: "e9boi3"
-	}]
-]), M = n("loader-circle", [["path", {
-	d: "M21 12a9 9 0 1 1-6.219-8.56",
-	key: "13zald"
-}]]), N = n("octagon-x", [
-	["path", {
-		d: "m15 9-6 6",
-		key: "1uzhvr"
-	}],
-	["path", {
-		d: "M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z",
-		key: "2d38gg"
-	}],
-	["path", {
-		d: "m9 9 6 6",
-		key: "z0biqf"
-	}]
-]), P = n("triangle-alert", [
-	["path", {
-		d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
-		key: "wmoenq"
-	}],
-	["path", {
-		d: "M12 9v4",
-		key: "juzpu7"
-	}],
-	["path", {
-		d: "M12 17h.01",
-		key: "p32p05"
-	}]
-]), F = y("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
-	variants: {
-		variant: {
-			default: "bg-primary text-primary-foreground hover:bg-primary/90",
-			destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-			outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-			ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-			link: "text-primary underline-offset-4 hover:underline"
-		},
-		size: {
-			default: "h-9 px-4 py-2 has-[>svg]:px-3",
-			sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-			lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-			icon: "size-9",
-			"icon-sm": "size-8",
-			"icon-lg": "size-10"
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default"
-	}
-});
-function I({ className: e, variant: t, size: n, asChild: r = !1, ...a }) {
-	return /* @__PURE__ */ h(r ? v : "button", {
-		"data-slot": "button",
-		className: i(F({
-			variant: t,
-			size: n,
-			className: e
-		})),
-		...a
-	});
-}
-//#endregion
-//#region src/components/ui/icon-picker-dialog.tsx
-var L = [
-	"lucide",
-	"tabler",
-	"mdi",
-	"ph",
-	"solar",
-	"heroicons"
-], R = L.join(",");
-async function z(e, t) {
-	try {
-		let n = await fetch(`https://api.iconify.design/search?query=${encodeURIComponent(e)}&limit=${t}&prefixes=${R}`);
-		if (n.ok) return (await n.json()).icons ?? [];
-	} catch {}
-	return [];
-}
-function B({ open: n, onOpenChange: i, value: c, onSelect: l, onClear: d, title: _, description: v, suggestKeywords: y }) {
-	let { t: x } = b(), [D, O] = m(""), [k, A] = m([]), [j, M] = m(!1), N = p(null), [P, F] = m(!1), [I, R] = m([]), B = p(0), [V, H] = m(null), U = u(async (e) => {
-		let t = ++B.current, n = () => t === B.current;
-		if (!e.trim()) {
-			A([]);
-			return;
-		}
-		M(!0);
-		try {
-			let t = await z(e, 60);
-			n() && A(t);
-		} catch {
-			n() && A([]);
-		} finally {
-			n() && M(!1);
-		}
-	}, []);
-	f(() => (N.current && clearTimeout(N.current), N.current = setTimeout(() => U(D), 350), () => {
-		N.current && clearTimeout(N.current);
-	}), [D, U]);
-	function W(e) {
-		l(e), i(!1), O(""), A([]), R([]), H(null);
-	}
-	async function G() {
-		if (!(!y || P)) {
-			F(!0), R([]), H(null);
-			try {
-				let e = (await y({
-					title: _,
-					description: v
-				})).filter((e) => typeof e == "string" && e.trim()).slice(0, 5), t = [];
-				for (let n of e) t.push({
-					keyword: n.trim(),
-					icons: await z(n.trim(), 30)
-				});
-				R(t);
-			} catch {
-				R([]);
-			} finally {
-				F(!1);
-			}
-		}
-	}
-	let K = V ? I.find((e) => e.keyword === V)?.icons ?? [] : I.flatMap((e) => e.icons.slice(0, 3)), q = !!y && !!(_?.trim() ?? v?.trim());
-	return /* @__PURE__ */ h(e, {
-		open: n,
-		onOpenChange: i,
-		children: /* @__PURE__ */ g(a, {
-			className: "flex max-h-[80vh] flex-col sm:max-w-lg",
-			children: [
-				/* @__PURE__ */ h(r, { children: /* @__PURE__ */ h(t, { children: x("forms.iconPicker.chooseAnIcon", { defaultValue: "Choose an icon" }) }) }),
-				/* @__PURE__ */ g("div", {
-					className: "flex gap-2",
-					children: [/* @__PURE__ */ g("div", {
-						className: "relative flex-1",
-						children: [/* @__PURE__ */ h(C, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ h(o, {
-							value: D,
-							onChange: (e) => O(e.target.value),
-							placeholder: x("forms.iconPicker.searchIcons", { defaultValue: "Search icons" }),
-							className: "pl-9",
-							autoFocus: !0
-						})]
-					}), q && /* @__PURE__ */ g(s, {
-						type: "button",
-						size: "sm",
-						variant: "outline",
-						onClick: G,
-						disabled: P,
-						className: "shrink-0 gap-1.5",
-						children: [P ? /* @__PURE__ */ h(S, { className: "size-4 animate-spin" }) : /* @__PURE__ */ h(w, { className: "size-4" }), x("forms.iconPicker.aiSuggest", { defaultValue: "Suggest" })]
-					})]
-				}),
-				I.length > 0 && /* @__PURE__ */ g("div", {
-					className: "rounded-lg border border-[var(--vg-accent-line)] bg-[var(--vg-accent-surface)] p-3",
-					children: [
-						/* @__PURE__ */ g("div", {
-							className: "mb-2 flex items-center gap-1.5 text-xs font-medium vg-accent-text",
-							children: [/* @__PURE__ */ h(w, { className: "size-3.5" }), x("forms.iconPicker.aiSuggestions", { defaultValue: "Suggestions" })]
-						}),
-						/* @__PURE__ */ h("div", {
-							className: "mb-3 flex flex-wrap gap-1.5",
-							children: I.map((e) => /* @__PURE__ */ g("button", {
-								type: "button",
-								onClick: () => H(V === e.keyword ? null : e.keyword),
-								className: `cursor-pointer rounded-full px-3 py-1 text-xs font-medium transition-all ${V === e.keyword ? "vg-accent-solid text-white" : "bg-[var(--vg-accent-surface)] text-[var(--vg-accent-fg)] hover:bg-[var(--vg-accent-surface-strong)]"}`,
-								children: [e.keyword, /* @__PURE__ */ h("span", {
-									className: "ml-1 opacity-60",
-									children: e.icons.length
-								})]
-							}, e.keyword))
-						}),
-						/* @__PURE__ */ h("div", {
-							className: "flex max-h-60 flex-wrap gap-2 overflow-y-auto",
-							children: K.map((e) => /* @__PURE__ */ g("button", {
-								type: "button",
-								onClick: () => W(e),
-								className: `flex cursor-pointer flex-col items-center gap-1 rounded-lg p-2 transition-all hover:bg-[var(--vg-accent-surface)] ${c === e ? "border border-[var(--vg-accent-line)] bg-[var(--vg-accent-surface-strong)] vg-accent-text" : "border border-[var(--vg-accent-line)]"}`,
-								title: e,
-								children: [/* @__PURE__ */ h(E, {
-									icon: e,
-									className: "size-7"
-								}), /* @__PURE__ */ h("span", {
-									className: "max-w-[80px] truncate text-center text-[9px] leading-tight text-muted-foreground",
-									children: e.split(":")[1] ?? e
-								})]
-							}, e))
-						})
-					]
-				}),
-				/* @__PURE__ */ g("div", {
-					className: "max-h-[400px] min-h-[200px] flex-1 overflow-y-auto",
-					children: [
-						j && /* @__PURE__ */ h("div", {
-							className: "flex h-32 items-center justify-center text-sm text-muted-foreground",
-							children: x("forms.iconPicker.searching", { defaultValue: "Searching…" })
-						}),
-						!j && D && k.length === 0 && /* @__PURE__ */ h("div", {
-							className: "flex h-32 items-center justify-center text-sm text-muted-foreground",
-							children: x("forms.iconPicker.noIconsFound", {
-								query: D,
-								defaultValue: "No icons found for “{{query}}”"
-							})
-						}),
-						!j && !D && k.length === 0 && I.length === 0 && /* @__PURE__ */ g("div", {
-							className: "flex h-32 flex-col items-center justify-center gap-2 px-4 text-center text-sm text-muted-foreground",
-							children: [/* @__PURE__ */ h("span", { children: x("forms.iconPicker.typeToSearch", {
-								count: L.length,
-								defaultValue: "Type to search {{count}} icon collections"
-							}) }), q && /* @__PURE__ */ h("span", {
-								className: "text-xs leading-relaxed",
-								children: x("forms.iconPicker.orClickAi", { defaultValue: "…or let the title and description suggest some" })
-							})]
-						}),
-						k.length > 0 && /* @__PURE__ */ h("div", {
-							className: "grid grid-cols-6 gap-1.5 p-1",
-							children: k.map((e) => /* @__PURE__ */ g("button", {
-								type: "button",
-								onClick: () => W(e),
-								className: `flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg p-2 transition-all hover:bg-muted ${c === e ? "border border-[var(--vg-accent-line)] bg-[var(--vg-accent-surface)] vg-accent-text" : "border border-transparent hover:border-border"}`,
-								title: e,
-								children: [/* @__PURE__ */ h(E, {
-									icon: e,
-									className: "size-6"
-								}), /* @__PURE__ */ h("span", {
-									className: "w-full truncate text-center text-[9px] leading-tight text-muted-foreground",
-									children: e.split(":")[1] ?? e
-								})]
-							}, e))
-						})
-					]
-				}),
-				c && /* @__PURE__ */ g("div", {
-					className: "flex items-center justify-between border-t pt-2",
-					children: [/* @__PURE__ */ g("div", {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ h(E, {
-							icon: c,
-							className: "size-5"
-						}), /* @__PURE__ */ h("span", {
-							className: "font-mono text-xs text-muted-foreground",
-							children: c
-						})]
-					}), /* @__PURE__ */ g("div", {
-						className: "flex gap-2",
-						children: [d && /* @__PURE__ */ g(s, {
-							size: "sm",
-							type: "button",
-							variant: "outline",
-							onClick: () => {
-								d(), i(!1);
-							},
-							children: [/* @__PURE__ */ h(T, { className: "size-4" }), x("forms.common.remove", { defaultValue: "Remove" })]
-						}), /* @__PURE__ */ h(s, {
-							size: "sm",
-							type: "button",
-							onClick: () => i(!1),
-							children: x("forms.iconPicker.done", { defaultValue: "Done" })
-						})]
-					})]
-				})
-			]
-		})
-	});
-}
-//#endregion
-//#region src/components/ui/section-card.tsx
-var V = {
-	blue: {
-		color: "text-blue-600 dark:text-blue-400",
-		bg: "from-blue-500/10 to-indigo-500/10 dark:from-blue-500/20 dark:to-indigo-500/20",
-		ring: "ring-blue-500/10 dark:ring-blue-400/10"
-	},
-	violet: {
-		color: "text-violet-600 dark:text-violet-400",
-		bg: "from-violet-500/10 to-purple-500/10 dark:from-violet-500/20 dark:to-purple-500/20",
-		ring: "ring-violet-500/10 dark:ring-violet-400/10"
-	},
-	emerald: {
-		color: "text-emerald-600 dark:text-emerald-400",
-		bg: "from-emerald-500/10 to-teal-500/10 dark:from-emerald-500/20 dark:to-teal-500/20",
-		ring: "ring-emerald-500/10 dark:ring-emerald-400/10"
-	},
-	amber: {
-		color: "text-amber-600 dark:text-amber-400",
-		bg: "from-amber-500/10 to-orange-500/10 dark:from-amber-500/20 dark:to-orange-500/20",
-		ring: "ring-amber-500/10 dark:ring-amber-400/10"
-	},
-	rose: {
-		color: "text-rose-600 dark:text-rose-400",
-		bg: "from-rose-500/10 to-pink-500/10 dark:from-rose-500/20 dark:to-pink-500/20",
-		ring: "ring-rose-500/10 dark:ring-rose-400/10"
-	},
-	cyan: {
-		color: "text-cyan-600 dark:text-cyan-400",
-		bg: "from-cyan-500/10 to-sky-500/10 dark:from-cyan-500/20 dark:to-sky-500/20",
-		ring: "ring-cyan-500/10 dark:ring-cyan-400/10"
-	},
-	orange: {
-		color: "text-orange-600 dark:text-orange-400",
-		bg: "from-orange-500/10 to-amber-500/10 dark:from-orange-500/20 dark:to-amber-500/20",
-		ring: "ring-orange-500/10 dark:ring-orange-400/10"
-	},
-	slate: {
-		color: "text-slate-600 dark:text-slate-400",
-		bg: "from-slate-500/10 to-gray-500/10 dark:from-slate-500/20 dark:to-gray-500/20",
-		ring: "ring-slate-500/10 dark:ring-slate-400/10"
-	}
-}, H = l({
-	open: !0,
-	toggle: () => {},
-	variant: "blue"
-});
-function U({ variant: e = "blue", defaultOpen: t = !0, children: n, className: r }) {
-	let [a, o] = m(t);
-	return /* @__PURE__ */ h(H.Provider, {
-		value: {
-			open: a,
-			toggle: () => o((e) => !e),
-			variant: e
-		},
-		children: /* @__PURE__ */ h("div", {
-			className: i("rounded-xl border overflow-hidden", r),
-			children: n
-		})
-	});
-}
-function W({ icon: e, title: t, description: n, className: r }) {
-	let { open: a, toggle: o, variant: s } = d(H), c = V[s];
-	return /* @__PURE__ */ g("button", {
-		type: "button",
-		onClick: o,
-		className: i("flex w-full items-center gap-3 px-5 py-4 bg-muted/40 border-b cursor-pointer hover:bg-muted/60 transition-colors", r),
-		children: [
-			/* @__PURE__ */ h("div", {
-				className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-linear-to-br ${c.bg} ring-1 ${c.ring}`,
-				children: /* @__PURE__ */ h(e, { className: `size-4 ${c.color}` })
-			}),
-			/* @__PURE__ */ g("div", {
-				className: "min-w-0 text-left",
-				children: [/* @__PURE__ */ h("h3", {
-					className: "text-sm font-semibold text-foreground",
-					children: t
-				}), n && /* @__PURE__ */ h("p", {
-					className: "text-xs text-muted-foreground",
-					children: n
-				})]
-			}),
-			/* @__PURE__ */ h(x, { className: i("ml-auto size-4 text-muted-foreground shrink-0 transition-transform duration-200", a && "rotate-180") })
-		]
-	});
-}
-function G({ icon: e, title: t, description: n, className: r }) {
-	let { variant: a } = d(H), o = V[a];
-	return /* @__PURE__ */ g("div", {
-		className: i("flex items-center gap-3 px-5 py-4 bg-muted/40 border-b", r),
-		children: [/* @__PURE__ */ h("div", {
-			className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-linear-to-br ${o.bg} ring-1 ${o.ring}`,
-			children: /* @__PURE__ */ h(e, { className: `size-4 ${o.color}` })
-		}), /* @__PURE__ */ g("div", {
-			className: "min-w-0",
-			children: [/* @__PURE__ */ h("h3", {
-				className: "text-sm font-semibold text-foreground",
-				children: t
-			}), n && /* @__PURE__ */ h("p", {
-				className: "text-xs text-muted-foreground",
-				children: n
-			})]
-		})]
-	});
-}
-function K({ children: e, className: t }) {
-	let { open: n } = d(H);
-	return n ? /* @__PURE__ */ h("div", {
-		className: i("p-5 space-y-6", t),
-		children: e
-	}) : null;
-}
-U.Header = W, U.StaticHeader = G, U.Content = K;
-//#endregion
-//#region src/components/ui/sonner.tsx
-var q = ({ ...e }) => {
-	let { theme: t = "system" } = D();
-	return /* @__PURE__ */ h(O, {
-		theme: t,
-		className: "toaster group",
-		icons: {
-			success: /* @__PURE__ */ h(A, { className: "size-4" }),
-			info: /* @__PURE__ */ h(j, { className: "size-4" }),
-			warning: /* @__PURE__ */ h(P, { className: "size-4" }),
-			error: /* @__PURE__ */ h(N, { className: "size-4" }),
-			loading: /* @__PURE__ */ h(M, { className: "size-4 animate-spin" })
-		},
-		style: {
-			"--normal-bg": "var(--vg-popover)",
-			"--normal-text": "var(--vg-popover-foreground)",
-			"--normal-border": "var(--vg-border)",
-			"--border-radius": "var(--vg-radius)"
-		},
-		...e
-	});
-};
-//#endregion
-//#region src/components/ui/user-avatar.tsx
-function J({ givenName: e, familyName: t, name: n }) {
-	let r = (e ?? "").trim(), i = (t ?? "").trim();
-	if (r || i) {
-		let e = r ? r[0] : "", t = i.split(/\s+/).filter(Boolean), n = `${e}${t.length > 0 ? t[t.length - 1][0] : ""}`.toUpperCase();
-		if (n) return n;
-	}
-	let a = (n ?? "").trim();
-	if (a) {
-		let e = a.split(/\s+/).filter(Boolean);
-		return e.length === 1 ? e[0][0].toUpperCase() : `${e[0][0]}${e[e.length - 1][0]}`.toUpperCase();
-	}
-	return "U";
-}
-function Y({ className: e, givenName: t, familyName: n, name: r, src: a, alt: o, children: s, ...c }) {
-	let l = J({
-		givenName: t,
-		familyName: n,
-		name: r
-	}), u = o ?? r ?? [t, n].filter(Boolean).join(" ");
-	return /* @__PURE__ */ g(_.Root, {
-		"data-slot": "user-avatar",
-		className: i("relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full size-8", "bg-muted text-muted-foreground text-xs font-semibold", "ring-1 ring-border", e),
-		...c,
-		children: [a && /* @__PURE__ */ h(_.Image, {
-			"data-slot": "user-avatar-image",
-			src: a,
-			alt: u,
-			className: "aspect-square size-full object-cover"
-		}), /* @__PURE__ */ h(_.Fallback, {
-			"data-slot": "user-avatar-fallback",
-			className: "flex size-full items-center justify-center",
-			delayMs: a ? 600 : 0,
-			children: s ?? l
-		})]
-	});
-}
-//#endregion
-//#region src/contexts/user.context.tsx
-var X = c.createContext(null);
-function Z({ children: e, fetchUser: t }) {
-	let [n, r] = c.useState({}), [i, a] = c.useState("loading"), [o, s] = c.useState(null), l = c.useRef(0), u = c.useCallback(() => {
-		let e = ++l.current;
-		t().then((t) => {
-			e === l.current && (r(t), s(null), a("ready"));
-		}, (t) => {
-			e === l.current && (s(t), a("failed"));
-		});
-	}, [t]);
-	c.useEffect(() => {
-		u();
-	}, [u]);
-	let d = c.useMemo(() => ({
-		user: n,
-		refreshUser: u,
-		status: i,
-		error: o
-	}), [
-		n,
-		u,
-		i,
-		o
-	]);
-	return /* @__PURE__ */ h(X, {
-		value: d,
-		children: e
-	});
-}
-function Q() {
-	let e = c.useContext(X);
-	if (!e) throw Error("useCurrentUser must be used within UserProvider");
-	return e;
-}
-//#endregion
-export { q as a, B as c, J as i, I as l, Q as n, k as o, Y as r, U as s, Z as t, F as u };