cattle-care-ui 0.1.2 → 0.1.4

package/dist/index.js

@@ -1,6 +1,6 @@
 import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Fragment as r, createContext as i, createElement as a, forwardRef as o, useContext as s, useEffect as c, useId as l, useRef as u, useState as d } from "react";
-var f = {
+import { Fragment as r, createContext as i, createElement as a, forwardRef as o, useContext as s, useEffect as c, useId as l, useLayoutEffect as u, useRef as d, useState as f } from "react";
+var p = {
 	primary: "_primary_1fqpm_1",
 	secondary: "_secondary_1fqpm_2",
 	tertiary: "_tertiary_1fqpm_3",
@@ -13,26 +13,26 @@ var f = {
 };
 //#endregion
 //#region src/components/Button.tsx
-function p({ variant: e = "primary", size: r = "base", leadingIcon: i, trailingIcon: a, children: o, ...s }) {
+function m({ variant: e = "primary", size: r = "base", leadingIcon: i, trailingIcon: a, children: o, ...s }) {
 	let c = !o && !!i;
 	return /* @__PURE__ */ n("button", {
 		type: "button",
-		className: `${f[e]} ${f[r]}${c ? ` ${f.iconOnly}` : ""}`,
+		className: `${p[e]} ${p[r]}${c ? ` ${p.iconOnly}` : ""}`,
 		...s,
 		children: [
 			i && /* @__PURE__ */ t("span", {
-				className: f.icon,
+				className: p.icon,
 				children: i
 			}),
 			o,
 			a && /* @__PURE__ */ t("span", {
-				className: f.icon,
+				className: p.icon,
 				children: a
 			})
 		]
 	});
 }
-var m = {
+var h = {
 	wrap: "_wrap_ewoh2_1",
 	fluid: "_fluid_ewoh2_9",
 	backing: "_backing_ewoh2_14",
@@ -44,23 +44,23 @@ var m = {
 };
 //#endregion
 //#region src/components/Card.tsx
-function h({ stacked: e, completed: r, interactive: i, draggable: a, dragging: o, fluid: s, children: c, ...l }) {
+function g({ stacked: e, completed: r, interactive: i, draggable: a, dragging: o, fluid: s, children: c, ...l }) {
 	return /* @__PURE__ */ n("div", {
-		className: `${m.wrap} ${s ? m.fluid : ""}`,
-		children: [e && /* @__PURE__ */ t("div", { className: `${m.backing} ${r ? m.completed : ""}` }), /* @__PURE__ */ t("div", {
+		className: `${h.wrap} ${s ? h.fluid : ""}`,
+		children: [e && /* @__PURE__ */ t("div", { className: `${h.backing} ${r ? h.completed : ""}` }), /* @__PURE__ */ t("div", {
 			className: [
-				m.card,
-				r ? m.completed : "",
-				i ? m.interactive : "",
-				a ? m.grabbable : "",
-				o ? m.dragging : ""
+				h.card,
+				r ? h.completed : "",
+				i ? h.interactive : "",
+				a ? h.grabbable : "",
+				o ? h.dragging : ""
 			].filter(Boolean).join(" "),
 			...l,
 			children: c
 		})]
 	});
 }
-var g = {
+var _ = {
 	neutral: "_neutral_c7c7e_1",
 	pill: "_pill_c7c7e_2",
 	accent: "_accent_c7c7e_3",
@@ -70,22 +70,22 @@ var g = {
 };
 //#endregion
 //#region src/components/Tag.tsx
-function _({ variant: e = "neutral", children: n, ...r }) {
+function v({ variant: e = "neutral", children: n, ...r }) {
 	return /* @__PURE__ */ t("span", {
-		className: g[e],
+		className: _[e],
 		...r,
 		children: n
 	});
 }
 //#endregion
 //#region node_modules/lucide-react/dist/esm/shared/src/utils/toKebabCase.mjs
-var v = (e) => e?.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+var y = (e) => e?.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 //#endregion
 //#region node_modules/lucide-react/dist/esm/shared/src/utils/toLucideIconData.mjs
-function y(e, t, n = []) {
+function b(e, t, n = []) {
 	if (t == null) throw Error("[lucide]: iconNode is required when icon name is used");
 	return {
-		name: v(e),
+		name: y(e),
 		size: 24,
 		node: t,
 		...n.length > 0 ? { aliases: n } : {}
@@ -93,7 +93,7 @@ function y(e, t, n = []) {
 }
 //#endregion
 //#region node_modules/lucide-react/dist/esm/shared/src/utils/toCamelCase.mjs
-var b = (e) => {
+var x = (e) => {
 	let t = "", n = !1;
 	for (let r of e) {
 		if (r === "-" || r === "_" || r <= " ") {
@@ -103,10 +103,10 @@ var b = (e) => {
 		t.length === 0 ? t += r.toLowerCase() : t += n ? r.toUpperCase() : r, n = !1;
 	}
 	return t;
-}, x = (e) => {
-	let t = b(e);
+}, S = (e) => {
+	let t = x(e);
 	return t.charAt(0).toUpperCase() + t.slice(1);
-}, S = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), C = {
+}, C = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), w = {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
 	height: 24,
@@ -119,22 +119,22 @@ var b = (e) => {
 };
 //#endregion
 //#region node_modules/lucide-react/dist/esm/shared/src/build/buildLucideIconNode.mjs
-function w(e) {
+function T(e) {
 	return e != null;
 }
-function T(e, t = {}) {
-	let n = t.attributeNames ?? {}, r = (e) => n[e] ?? e, i = e.size ?? e.width ?? C.width, a = e.size ?? e.height ?? C.height, o = e.aliases?.filter((e) => typeof e == "string" && e.trim() !== "").map((e) => `lucide-${e}`) ?? [], s = [...e.name ? [`lucide-${e.name}`] : [], ...o], c = t.className?.split(" ").filter(Boolean) ?? [], l = t.includeDefaultClasses === !1 ? S(...c) : S("lucide", ...s, ...c), u = t.absoluteStrokeWidth ? Number(t.strokeWidth ?? C["stroke-width"]) * Number(e.size ?? e.width ?? C.width) / Number(t.size ?? t.width ?? C.width) : t.strokeWidth ?? C["stroke-width"];
+function E(e, t = {}) {
+	let n = t.attributeNames ?? {}, r = (e) => n[e] ?? e, i = e.size ?? e.width ?? w.width, a = e.size ?? e.height ?? w.height, o = e.aliases?.filter((e) => typeof e == "string" && e.trim() !== "").map((e) => `lucide-${e}`) ?? [], s = [...e.name ? [`lucide-${e.name}`] : [], ...o], c = t.className?.split(" ").filter(Boolean) ?? [], l = t.includeDefaultClasses === !1 ? C(...c) : C("lucide", ...s, ...c), u = t.absoluteStrokeWidth ? Number(t.strokeWidth ?? w["stroke-width"]) * Number(e.size ?? e.width ?? w.width) / Number(t.size ?? t.width ?? w.width) : t.strokeWidth ?? w["stroke-width"];
 	return [
 		"svg",
 		{
-			...Object.entries(C).reduce((e, [t, n]) => (e[r(t)] = n, e), {}),
+			...Object.entries(w).reduce((e, [t, n]) => (e[r(t)] = n, e), {}),
 			..."color" in t && t.color && { [r("stroke")]: t.color },
-			..."size" in t && w(t.size) && {
+			..."size" in t && T(t.size) && {
 				[r("width")]: t.size,
 				[r("height")]: t.size
 			},
-			..."width" in t && w(t.width) && { [r("width")]: t.width },
-			..."height" in t && w(t.height) && { [r("height")]: t.height },
+			..."width" in t && T(t.width) && { [r("width")]: t.width },
+			..."height" in t && T(t.height) && { [r("height")]: t.height },
 			[r("stroke-width")]: u,
 			...l && { [r("class")]: l },
 			[r("viewBox")]: `0 0 ${i} ${a}`,
@@ -156,8 +156,8 @@ function T(e, t = {}) {
 }
 //#endregion
 //#region node_modules/lucide-react/dist/esm/shared/src/build/buildLucideIconForReact.mjs
-function E(e, t = {}) {
-	return T(e, {
+function D(e, t = {}) {
+	return E(e, {
 		...t,
 		attributeNames: {
 			...t.attributeNames,
@@ -171,44 +171,62 @@ function E(e, t = {}) {
 }
 //#endregion
 //#region node_modules/lucide-react/dist/esm/shared/src/utils/hasA11yProp.mjs
-var ee = (e) => {
+var O = (e) => {
 	for (let t in e) if (t.startsWith("aria-") || t === "role" || t === "title") return !0;
 	return !1;
-}, D = i({}), O = () => s(D), k = o(({ color: e, size: t, width: n, height: r, strokeWidth: i, absoluteStrokeWidth: o, nonScalingStroke: s, className: c = "", children: l, iconNode: u = [], icon: d = {
+}, ee = i({}), te = () => s(ee), ne = o(({ color: e, size: t, width: n, height: r, strokeWidth: i, absoluteStrokeWidth: o, nonScalingStroke: s, className: c = "", children: l, iconNode: u = [], icon: d = {
 	node: u,
 	aliases: [],
 	size: 24
 }, ...f }, p) => {
-	let { size: m = 24, strokeWidth: h = 2, absoluteStrokeWidth: g = !1, nonScalingStroke: _ = !1, color: v = "currentColor", className: y = "" } = O() ?? {}, b = !!l || ee(f), [x, C, w = []] = E(d, {
+	let { size: m = 24, strokeWidth: h = 2, absoluteStrokeWidth: g = !1, nonScalingStroke: _ = !1, color: v = "currentColor", className: y = "" } = te() ?? {}, b = !!l || O(f), [x, S, w = []] = D(d, {
 		color: e ?? v,
 		width: n ?? t ?? m,
 		height: r ?? t ?? m,
 		strokeWidth: i ?? h,
 		absoluteStrokeWidth: o ?? g,
 		nonScalingStroke: s ?? _,
-		className: S(y, c),
+		className: C(y, c),
 		hasA11yProp: b,
 		attributes: f
 	});
 	return a(x, {
 		ref: p,
-		...C
+		...S
 	}, [...w.map(([e, t]) => a(e, t)), ...Array.isArray(l) ? l : [l]]);
 });
 //#endregion
 //#region node_modules/lucide-react/dist/esm/createLucideIcon.mjs
-function A(e, t = [], n = []) {
-	let r = typeof e == "string" ? y(e, t, n) : e, i = o(({ className: e, ...t }, n) => a(k, {
+function k(e, t = [], n = []) {
+	let r = typeof e == "string" ? b(e, t, n) : e, i = o(({ className: e, ...t }, n) => a(ne, {
 		ref: n,
 		icon: r,
 		className: e,
 		...t
 	}));
-	return r.name && (i.displayName = x(r.name)), i;
+	return r.name && (i.displayName = S(r.name)), i;
 }
 //#endregion
-//#region node_modules/lucide-react/dist/esm/icons/search.mjs
-var j = {
+//#region node_modules/lucide-react/dist/esm/icons/check.mjs
+var A = {
+	name: "check",
+	size: 24,
+	node: [["path", {
+		d: "M20 6 9 17l-5-5",
+		key: "1gmf2c"
+	}]]
+};
+A.node;
+var j = k(A), M = {
+	name: "chevron-down",
+	size: 24,
+	node: [["path", {
+		d: "m6 9 6 6 6-6",
+		key: "qrunsl"
+	}]]
+};
+M.node;
+var N = k(M), P = {
 	name: "search",
 	size: 24,
 	node: [["path", {
@@ -221,8 +239,8 @@ var j = {
 		key: "4ej97u"
 	}]]
 };
-j.node;
-var M = A(j), N = {
+P.node;
+var F = k(P), I = {
 	toolbar: "_toolbar_1rsvo_1",
 	searchWrap: "_searchWrap_1rsvo_14",
 	searchIcon: "_searchIcon_1rsvo_33",
@@ -232,44 +250,44 @@ var M = A(j), N = {
 };
 //#endregion
 //#region src/components/Toolbar.tsx
-function P({ searchValue: e, onSearchChange: r, placeholder: i = "Search…", shortcutLabel: a = "⌘K", shortcutKey: o = "k", children: s }) {
-	let l = u(null);
+function L({ searchValue: e, onSearchChange: r, placeholder: i = "Search…", shortcutLabel: a = "⌘K", shortcutKey: o = "k", children: s }) {
+	let l = d(null);
 	return c(() => {
 		function e(e) {
 			(e.metaKey || e.ctrlKey) && e.key.toLowerCase() === o.toLowerCase() && (e.preventDefault(), l.current?.focus());
 		}
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [o]), /* @__PURE__ */ n("div", {
-		className: N.toolbar,
+		className: I.toolbar,
 		children: [/* @__PURE__ */ n("div", {
-			className: N.searchWrap,
+			className: I.searchWrap,
 			children: [
 				/* @__PURE__ */ t("span", {
-					className: N.searchIcon,
-					children: /* @__PURE__ */ t(M, {})
+					className: I.searchIcon,
+					children: /* @__PURE__ */ t(F, {})
 				}),
 				/* @__PURE__ */ t("input", {
 					ref: l,
 					type: "text",
-					className: N.search,
+					className: I.search,
 					placeholder: i,
 					autoComplete: "off",
 					value: e,
 					onChange: (e) => r?.(e.target.value)
 				}),
 				a && /* @__PURE__ */ t("span", {
-					className: N.searchShortcut,
+					className: I.searchShortcut,
 					"aria-hidden": "true",
 					children: a
 				})
 			]
 		}), s && /* @__PURE__ */ t("div", {
-			className: N.controls,
+			className: I.controls,
 			children: s
 		})]
 	});
 }
-var F = {
+var R = {
 	checkbox: "_checkbox_veqkz_1",
 	input: "_input_veqkz_11",
 	box: "_box_veqkz_18",
@@ -277,19 +295,19 @@ var F = {
 };
 //#endregion
 //#region src/components/Checkbox.tsx
-function I({ checked: e, onChange: r, ariaLabel: i, className: a }) {
+function z({ checked: e, onChange: r, ariaLabel: i, className: a }) {
 	return /* @__PURE__ */ n("label", {
-		className: `${F.checkbox} ${a ?? ""}`,
+		className: `${R.checkbox} ${a ?? ""}`,
 		children: [/* @__PURE__ */ t("input", {
 			type: "checkbox",
-			className: F.input,
+			className: R.input,
 			checked: e,
 			onChange: r,
 			"aria-label": i
 		}), /* @__PURE__ */ t("span", {
-			className: F.box,
+			className: R.box,
 			children: /* @__PURE__ */ t("svg", {
-				className: F.icon,
+				className: R.icon,
 				viewBox: "0 0 17 18",
 				"aria-hidden": "true",
 				children: /* @__PURE__ */ t("polyline", { points: "1 9 7 14 15 4" })
@@ -297,7 +315,7 @@ function I({ checked: e, onChange: r, ariaLabel: i, className: a }) {
 		})]
 	});
 }
-var L = {
+var B = {
 	radio: "_radio_7q2jv_1",
 	input: "_input_7q2jv_11",
 	circle: "_circle_7q2jv_18",
@@ -305,24 +323,24 @@ var L = {
 };
 //#endregion
 //#region src/components/RadioButton.tsx
-function R({ checked: e, onChange: r, name: i, value: a, ariaLabel: o, className: s }) {
+function V({ checked: e, onChange: r, name: i, value: a, ariaLabel: o, className: s }) {
 	return /* @__PURE__ */ n("label", {
-		className: `${L.radio} ${s ?? ""}`,
+		className: `${B.radio} ${s ?? ""}`,
 		children: [/* @__PURE__ */ t("input", {
 			type: "radio",
-			className: L.input,
+			className: B.input,
 			checked: e,
 			onChange: r,
 			name: i,
 			value: a,
 			"aria-label": o
 		}), /* @__PURE__ */ t("span", {
-			className: L.circle,
-			children: /* @__PURE__ */ t("span", { className: L.dot })
+			className: B.circle,
+			children: /* @__PURE__ */ t("span", { className: B.dot })
 		})]
 	});
 }
-var z = {
+var H = {
 	field: "_field_133ye_1",
 	label: "_label_133ye_6",
 	inputWrap: "_inputWrap_133ye_12",
@@ -337,72 +355,73 @@ var z = {
 };
 //#endregion
 //#region src/components/TextField.tsx
-function B({ label: e, helperText: r, error: i, size: a = "base", leadingIcon: o, id: s, ...c }) {
+function U({ label: e, helperText: r, error: i, size: a = "base", leadingIcon: o, id: s, ...c }) {
 	let u = l(), d = s ?? u;
 	return /* @__PURE__ */ n("div", {
-		className: z.field,
+		className: H.field,
 		children: [
 			e && /* @__PURE__ */ t("label", {
-				className: z.label,
+				className: H.label,
 				htmlFor: d,
 				children: e
 			}),
 			/* @__PURE__ */ n("div", {
-				className: `${z.inputWrap} ${z[a]} ${i ? z.errorWrap : ""}`,
+				className: `${H.inputWrap} ${H[a]} ${i ? H.errorWrap : ""}`,
 				children: [o && /* @__PURE__ */ t("span", {
-					className: z.icon,
+					className: H.icon,
 					children: o
 				}), /* @__PURE__ */ t("input", {
 					id: d,
-					className: z.input,
+					className: H.input,
 					...c
 				})]
 			}),
 			i ? /* @__PURE__ */ t("span", {
-				className: z.errorText,
+				className: H.errorText,
 				children: i
 			}) : r ? /* @__PURE__ */ t("span", {
-				className: z.helperText,
+				className: H.helperText,
 				children: r
 			}) : null
 		]
 	});
 }
-var V = {
+var W = {
 	menu: "_menu_471l2_1",
 	divider: "_divider_471l2_15"
 };
 //#endregion
 //#region src/components/Menu.tsx
-function H({ children: e, ...n }) {
+function G({ children: e, ...n }) {
 	return /* @__PURE__ */ t("div", {
 		role: "menu",
-		className: V.menu,
+		className: W.menu,
 		...n,
 		children: e
 	});
 }
-function U() {
+function K() {
 	return /* @__PURE__ */ t("div", {
-		className: V.divider,
+		className: W.divider,
 		role: "separator"
 	});
 }
-var W = {
-	item: "_item_ihchz_1",
-	icon: "_icon_ihchz_34",
-	label: "_label_ihchz_47",
-	trailing: "_trailing_ihchz_54",
-	selected: "_selected_ihchz_59",
-	destructive: "_destructive_ihchz_66"
+var q = {
+	item: "_item_1j7n9_1",
+	icon: "_icon_1j7n9_24",
+	check: "_check_1j7n9_25",
+	label: "_label_1j7n9_52",
+	trailing: "_trailing_1j7n9_59",
+	selected: "_selected_1j7n9_64",
+	destructive: "_destructive_1j7n9_85"
 };
 //#endregion
 //#region src/components/MenuItem.tsx
-function G({ icon: e, trailing: r, selected: i, destructive: a, children: o, ...s }) {
+function J({ icon: e, trailing: r, selected: i, destructive: a, children: o, ...s }) {
 	let c = [
-		W.item,
-		i && W.selected,
-		a && W.destructive
+		q.item,
+		i && q.selected,
+		a && q.destructive
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ n("button", {
 		type: "button",
@@ -411,35 +430,158 @@ function G({ icon: e, trailing: r, selected: i, destructive: a, children: o, ...
 		...s,
 		children: [
 			e && /* @__PURE__ */ t("span", {
-				className: W.icon,
+				className: q.icon,
 				children: e
 			}),
 			/* @__PURE__ */ t("span", {
-				className: W.label,
+				className: q.label,
 				children: o
 			}),
 			r && /* @__PURE__ */ t("span", {
-				className: W.trailing,
+				className: q.trailing,
 				children: r
+			}),
+			i && /* @__PURE__ */ t("span", {
+				className: q.check,
+				children: /* @__PURE__ */ t(j, {})
 			})
 		]
 	});
 }
-var K = { highlight: "_highlight_1anli_1" };
+var Y = {
+	field: "_field_1bvdj_1",
+	label: "_label_1bvdj_7",
+	trigger: "_trigger_1bvdj_13",
+	errorWrap: "_errorWrap_1bvdj_31",
+	sm: "_sm_1bvdj_40",
+	base: "_base_1bvdj_47",
+	lg: "_lg_1bvdj_54",
+	icon: "_icon_1bvdj_62",
+	value: "_value_1bvdj_76",
+	placeholder: "_placeholder_1bvdj_84",
+	chevron: "_chevron_1bvdj_87",
+	chevronOpen: "_chevronOpen_1bvdj_102",
+	menuWrap: "_menuWrap_1bvdj_106",
+	helperText: "_helperText_1bvdj_113",
+	errorText: "_errorText_1bvdj_118"
+};
+//#endregion
+//#region src/components/Dropdown.tsx
+function X({ label: e, helperText: r, error: i, size: a = "base", placeholder: o = "Select…", options: s, value: u, onChange: p, disabled: m }) {
+	let [h, g] = f(!1), _ = d(null), v = l(), y = s.find((e) => e.value === u), b = s.filter((e) => !e.disabled).map((e) => e.value);
+	c(() => {
+		if (!h) return;
+		let e = u ?? b[0];
+		(_.current?.querySelector(`[data-value="${e}"]`))?.focus();
+	}, [h]), c(() => {
+		if (!h) return;
+		function e(e) {
+			_.current?.contains(e.target) || g(!1);
+		}
+		function t(e) {
+			e.key === "Escape" && g(!1);
+		}
+		return window.addEventListener("pointerdown", e), window.addEventListener("keydown", t), () => {
+			window.removeEventListener("pointerdown", e), window.removeEventListener("keydown", t);
+		};
+	}, [h]);
+	function x(e) {
+		if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+			e.preventDefault(), g(!0);
+			return;
+		}
+		e.key === "Escape" && g(!1);
+	}
+	function S(e, t) {
+		let n = b.indexOf(t);
+		if (n === -1) return;
+		let r = null;
+		if (e.key === "ArrowDown" && (r = (n + 1) % b.length), e.key === "ArrowUp" && (r = (n - 1 + b.length) % b.length), e.key === "Home" && (r = 0), e.key === "End" && (r = b.length - 1), r !== null) {
+			e.preventDefault();
+			let t = b[r];
+			(_.current?.querySelector(`[data-value="${t}"]`))?.focus();
+			return;
+		}
+		e.key === "Escape" && g(!1);
+	}
+	return /* @__PURE__ */ n("div", {
+		className: Y.field,
+		ref: _,
+		children: [
+			e && /* @__PURE__ */ t("label", {
+				className: Y.label,
+				htmlFor: v,
+				children: e
+			}),
+			/* @__PURE__ */ n("button", {
+				id: v,
+				type: "button",
+				className: `${Y.trigger} ${Y[a]} ${i ? Y.errorWrap : ""}`,
+				"aria-haspopup": "listbox",
+				"aria-expanded": h,
+				disabled: m,
+				onClick: () => g((e) => !e),
+				onKeyDown: x,
+				children: [
+					y?.icon && /* @__PURE__ */ t("span", {
+						className: Y.icon,
+						children: y.icon
+					}),
+					/* @__PURE__ */ t("span", {
+						className: `${Y.value} ${y ? "" : Y.placeholder}`,
+						children: y ? y.label : o
+					}),
+					/* @__PURE__ */ t("span", {
+						className: `${Y.chevron} ${h ? Y.chevronOpen : ""}`,
+						children: /* @__PURE__ */ t(N, {})
+					})
+				]
+			}),
+			h && /* @__PURE__ */ t("div", {
+				className: Y.menuWrap,
+				children: /* @__PURE__ */ t(G, {
+					role: "listbox",
+					style: { width: "100%" },
+					children: s.map((e) => /* @__PURE__ */ t(J, {
+						"data-value": e.value,
+						role: "option",
+						"aria-selected": e.value === u,
+						icon: e.icon,
+						selected: e.value === u,
+						disabled: e.disabled,
+						onClick: () => {
+							p(e.value), g(!1);
+						},
+						onKeyDown: (t) => S(t, e.value),
+						children: e.label
+					}, e.value))
+				})
+			}),
+			i ? /* @__PURE__ */ t("span", {
+				className: Y.errorText,
+				children: i
+			}) : r ? /* @__PURE__ */ t("span", {
+				className: Y.helperText,
+				children: r
+			}) : null
+		]
+	});
+}
+var re = { highlight: "_highlight_1anli_1" };
 //#endregion
 //#region src/components/HighlightText.tsx
-function q(e) {
+function ie(e) {
 	return e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
-function J({ text: n, query: i }) {
+function ae({ text: n, query: i }) {
 	if (!i) return /* @__PURE__ */ t(e, { children: n });
-	let a = n.split(RegExp(`(${q(i)})`, "ig"));
+	let a = n.split(RegExp(`(${ie(i)})`, "ig"));
 	return /* @__PURE__ */ t(e, { children: a.map((e, n) => e.toLowerCase() === i.toLowerCase() ? /* @__PURE__ */ t("mark", {
-		className: K.highlight,
+		className: re.highlight,
 		children: e
 	}, n) : /* @__PURE__ */ t(r, { children: e }, n)) });
 }
-var Y = {
+var Z = {
 	group: "_group_51gk7_1",
 	btn: "_btn_51gk7_4",
 	caret: "_caret_51gk7_29",
@@ -461,24 +603,24 @@ var Y = {
 };
 //#endregion
 //#region src/components/FilterSection.tsx
-function X({ label: e, options: r, optionLabel: i, activeSet: a, onToggle: o, onSetAll: s, searchable: c }) {
-	let [l, u] = d(""), f = l.trim().toLowerCase(), p = f ? r.filter((e) => i(e).toLowerCase().includes(f)) : r, m = r.length > 0 && a.size === r.length;
+function oe({ label: e, options: r, optionLabel: i, activeSet: a, onToggle: o, onSetAll: s, searchable: c }) {
+	let [l, u] = f(""), d = l.trim().toLowerCase(), p = d ? r.filter((e) => i(e).toLowerCase().includes(d)) : r, m = r.length > 0 && a.size === r.length;
 	return /* @__PURE__ */ n("div", { children: [
 		/* @__PURE__ */ n("div", {
-			className: Y.sectionHeader,
+			className: Z.sectionHeader,
 			children: [/* @__PURE__ */ t("div", {
-				className: Y.sectionLabel,
+				className: Z.sectionLabel,
 				children: e
 			}), s && /* @__PURE__ */ t("button", {
 				type: "button",
-				className: Y.allToggle,
+				className: Z.allToggle,
 				onClick: () => s(m ? [] : r),
 				children: m ? "Deselect all" : "Select all"
 			})]
 		}),
 		c && /* @__PURE__ */ t("input", {
 			type: "text",
-			className: Y.search,
+			className: Z.search,
 			placeholder: `Search ${e.toLowerCase()}…`,
 			autoComplete: "off",
 			value: l,
@@ -486,13 +628,13 @@ function X({ label: e, options: r, optionLabel: i, activeSet: a, onToggle: o, on
 			onChange: (e) => u(e.target.value)
 		}),
 		/* @__PURE__ */ n("div", {
-			className: Y.optionsList,
+			className: Z.optionsList,
 			children: [p.length === 0 && /* @__PURE__ */ t("div", {
-				className: Y.empty,
+				className: Z.empty,
 				children: "No match"
 			}), p.map((e) => /* @__PURE__ */ n("label", {
-				className: Y.option,
-				children: [/* @__PURE__ */ t(I, {
+				className: Z.option,
+				children: [/* @__PURE__ */ t(z, {
 					checked: a.has(e),
 					onChange: () => o(e)
 				}), /* @__PURE__ */ t("span", { children: i(e) })]
@@ -500,7 +642,7 @@ function X({ label: e, options: r, optionLabel: i, activeSet: a, onToggle: o, on
 		})
 	] });
 }
-var Z = {
+var Q = {
 	sidebar: "_sidebar_1fx39_1",
 	title: "_title_1fx39_16",
 	navLink: "_navLink_1fx39_22",
@@ -508,47 +650,96 @@ var Z = {
 };
 //#endregion
 //#region src/components/UiElementsSidebar.tsx
-function Q({ sections: e }) {
+function se({ sections: e }) {
 	return /* @__PURE__ */ n("aside", {
-		className: Z.sidebar,
+		className: Q.sidebar,
 		children: [/* @__PURE__ */ t("div", {
-			className: Z.title,
+			className: Q.title,
 			children: "UI Elements"
 		}), e.map((e) => /* @__PURE__ */ n("a", {
 			href: `#${e.id}`,
-			className: Z.navLink,
+			className: Q.navLink,
 			children: [/* @__PURE__ */ t("span", { children: e.label }), /* @__PURE__ */ t("span", {
-				className: Z.count,
+				className: Q.count,
 				children: e.count
 			})]
 		}, e.id))]
 	});
 }
 var $ = {
-	line: "_line_q3udz_1",
-	box: "_box_q3udz_2",
-	tab: "_tab_q3udz_8",
-	selected: "_selected_q3udz_52",
-	icon: "_icon_q3udz_61"
+	line: "_line_mndgo_1",
+	box: "_box_mndgo_2",
+	indicator: "_indicator_mndgo_9",
+	settling: "_settling_mndgo_17",
+	indicatorLine: "_indicatorLine_mndgo_21",
+	indicatorBox: "_indicatorBox_mndgo_27",
+	tab: "_tab_mndgo_35",
+	selected: "_selected_mndgo_80",
+	icon: "_icon_mndgo_89",
+	sm: "_sm_mndgo_148"
 };
 //#endregion
 //#region src/components/Tabs.tsx
-function te({ items: e, value: r, onChange: i, variant: a = "line", ...o }) {
-	let s = e.filter((e) => !e.disabled).map((e) => e.value);
-	function c(e) {
-		let t = s.indexOf(r);
+function ce({ items: e, value: r, onChange: i, variant: a = "line", size: o = "base", ...s }) {
+	let c = e.filter((e) => !e.disabled).map((e) => e.value), l = d(null), p = d(/* @__PURE__ */ new Map()), m = d(r), [h, g] = f(null), [_, v] = f("idle");
+	u(() => {
+		let e = p.current.get(r);
+		e && (g({
+			left: e.offsetLeft,
+			width: e.offsetWidth
+		}), a === "box" && m.current !== r && v("moving"), m.current = r);
+	}, [
+		r,
+		e,
+		a,
+		o
+	]);
+	function y(e) {
+		e.propertyName === "scale" && (_ === "moving" ? v("settling") : _ === "settling" && v("idle"));
+	}
+	u(() => {
+		let e = l.current;
+		if (!e) return;
+		let t = new ResizeObserver(() => {
+			let e = p.current.get(r);
+			e && g({
+				left: e.offsetLeft,
+				width: e.offsetWidth
+			});
+		});
+		return t.observe(e), () => t.disconnect();
+	}, [r]);
+	function b(e) {
+		let t = c.indexOf(r);
 		if (t === -1) return;
 		let n = null;
-		e.key === "ArrowRight" && (n = (t + 1) % s.length), e.key === "ArrowLeft" && (n = (t - 1 + s.length) % s.length), e.key === "Home" && (n = 0), e.key === "End" && (n = s.length - 1), n !== null && (e.preventDefault(), i(s[n]));
+		e.key === "ArrowRight" && (n = (t + 1) % c.length), e.key === "ArrowLeft" && (n = (t - 1 + c.length) % c.length), e.key === "Home" && (n = 0), e.key === "End" && (n = c.length - 1), n !== null && (e.preventDefault(), i(c[n]));
 	}
-	return /* @__PURE__ */ t("div", {
+	return /* @__PURE__ */ n("div", {
+		ref: l,
 		role: "tablist",
-		className: $[a],
-		onKeyDown: c,
-		...o,
-		children: e.map((e) => {
+		className: [$[a], a === "box" && o === "sm" && $.sm].filter(Boolean).join(" "),
+		onKeyDown: b,
+		...s,
+		children: [h && /* @__PURE__ */ t("span", {
+			"aria-hidden": !0,
+			className: [
+				$.indicator,
+				a === "line" ? $.indicatorLine : $.indicatorBox,
+				_ === "settling" && $.settling
+			].filter(Boolean).join(" "),
+			onTransitionEnd: y,
+			style: {
+				translate: `${h.left}px 0`,
+				scale: a === "box" && _ === "moving" ? .92 : 1,
+				width: h.width
+			}
+		}), e.map((e) => {
 			let a = e.value === r;
 			return /* @__PURE__ */ n("button", {
+				ref: (t) => {
+					t ? p.current.set(e.value, t) : p.current.delete(e.value);
+				},
 				type: "button",
 				role: "tab",
 				"aria-selected": a,
@@ -561,20 +752,20 @@ function te({ items: e, value: r, onChange: i, variant: a = "line", ...o }) {
 					children: e.icon
 				}), e.label]
 			}, e.value);
-		})
+		})]
 	});
 }
 //#endregion
 //#region src/utils/format.ts
-function ne(e) {
+function le(e) {
 	let t = Math.floor(e / 60), n = e % 60;
 	return `${t}h:${String(n).padStart(2, "0")}m`;
 }
-function re(e, t) {
+function ue(e, t) {
 	let n = Math.floor(e / 60), r = e % 60, i = (e) => String(e).padStart(2, "0");
 	return `${i(n)}:${i(r)}:${i(t)}`;
 }
 //#endregion
-export { p as Button, h as Card, I as Checkbox, X as FilterSection, J as HighlightText, H as Menu, U as MenuDivider, G as MenuItem, R as RadioButton, te as Tabs, _ as Tag, B as TextField, P as Toolbar, Q as UiElementsSidebar, ne as formatDuration, re as formatDurationHMS };
+export { m as Button, g as Card, z as Checkbox, X as Dropdown, oe as FilterSection, ae as HighlightText, G as Menu, K as MenuDivider, J as MenuItem, V as RadioButton, ce as Tabs, v as Tag, U as TextField, L as Toolbar, se as UiElementsSidebar, le as formatDuration, ue as formatDurationHMS };
 
 //# sourceMappingURL=index.js.map