@vellira-ui/react 2.19.6

package/dist/index.js

@@ -0,0 +1,1096 @@
+import { createContext as e, forwardRef as t, useCallback as n, useContext as r, useEffect as i, useId as a, useMemo as o, useRef as s, useState as c } from "react";
+import l from "clsx";
+import { createPortal as u } from "react-dom";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { FloatingPortal as m, arrow as h, autoUpdate as g, flip as _, offset as v, shift as y, size as b, useFloating as x, useFocus as S, useHover as C, useInteractions as w } from "@floating-ui/react";
+import { useControllableState as T, useKeyboardNavigation as E, useTabsKeyboard as D } from "@vellira-ui/core";
+import { Check as O, ChevronDown as k, Close as A } from "@vellira-ui/icons";
+import j from "focus-trap-react";
+//#region src/utils/cn.ts
+var M = (...e) => l(e), N = ({ children: e }) => {
+	let [t, n] = c(!1);
+	if (i(() => {
+		n(!0);
+	}, []), !t) return null;
+	let r = document.getElementById("overlay-root") ?? document.body;
+	return r ? u(e, r) : null;
+}, P = {
+	dropdown: "_dropdown_6pgxt_1",
+	dropdownIn: "_dropdownIn_6pgxt_1"
+}, F = t(({ children: e, floatingStyles: t, menuId: n, labelledById: r, label: i, activeDescendantId: a, onKeyDown: o, className: s }, c) => /* @__PURE__ */ f(N, { children: /* @__PURE__ */ f("ul", {
+	ref: c,
+	id: n,
+	role: "menu",
+	tabIndex: -1,
+	"aria-labelledby": r,
+	"aria-label": r ? void 0 : i,
+	"aria-activedescendant": a,
+	onKeyDown: o,
+	style: t,
+	className: M(P.dropdown, s),
+	children: e
+}) }));
+F.displayName = "DropdownContent";
+//#endregion
+//#region src/hooks/useFloatingPosition.ts
+var I = (e) => {
+	let [t, n] = c(() => typeof window > "u" || typeof window.matchMedia != "function" || !e ? !1 : window.matchMedia(`(max-width: ${e}px)`).matches);
+	return i(() => {
+		if (typeof window > "u" || typeof window.matchMedia != "function" || !e) return;
+		let t = window.matchMedia(`(max-width: ${e}px)`), r = () => n(t.matches);
+		return r(), t.addEventListener("change", r), () => {
+			t.removeEventListener("change", r);
+		};
+	}, [e]), t;
+}, ee = ({ open: e, onOpenChange: t, placement: n = "bottom-start", strategy: r = "fixed", matchTriggerWidth: a = !1, mobileSheetBreakpoint: s, middleware: c = [] } = {}) => {
+	let l = I(s), { refs: u, floatingStyles: d, update: f, context: p, middlewareData: m, placement: h } = x({
+		open: e,
+		onOpenChange: t,
+		placement: n,
+		strategy: r,
+		transform: !1,
+		middleware: o(() => [
+			v(6),
+			_(),
+			b({ apply({ rects: e, elements: t }) {
+				!a || l || Object.assign(t.floating.style, { width: `${e.reference.width}px` });
+			} }),
+			y({ padding: 8 }),
+			...c
+		], [
+			c,
+			l,
+			a
+		]),
+		whileElementsMounted: g
+	});
+	return i(() => {
+		l && u.floating.current?.style.removeProperty("width");
+	}, [l, u.floating]), {
+		context: p,
+		placement: h,
+		middlewareData: m,
+		floatingStyles: l ? {} : d,
+		isMobileSheet: l,
+		setRef: u.setReference,
+		setFloatingRef: u.setFloating,
+		updatePosition: f
+	};
+}, te = (e, t, n = !0) => {
+	let r = s(e);
+	r.current = e;
+	let a = s(t);
+	a.current = t, i(() => {
+		if (!n) return;
+		let e = (e) => {
+			let t = e.target;
+			r.current.every((e) => e.current && !e.current.contains(t)) && a.current();
+		};
+		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
+	}, [n]);
+}, L = { group: "_group_1yomt_1" }, ne = ({ label: e }) => /* @__PURE__ */ f("li", {
+	role: "presentation",
+	className: L.group,
+	children: e
+}), R = {
+	item: "_item_t87eq_1",
+	disabled: "_disabled_t87eq_18",
+	active: "_active_t87eq_28",
+	danger: "_danger_t87eq_37",
+	itemIcon: "_itemIcon_t87eq_61",
+	itemShortcut: "_itemShortcut_t87eq_62",
+	itemText: "_itemText_t87eq_68",
+	"itemText--truncate": "_itemText--truncate_t87eq_74",
+	"itemText--wrap": "_itemText--wrap_t87eq_79",
+	"itemText--nowrap": "_itemText--nowrap_t87eq_83"
+}, z = ({ id: e, children: t, label: n, icon: r, danger: i, disabled: a, active: o, onClick: s, onMouseEnter: c, shortcut: l, textWrap: u = "truncate", className: d }) => {
+	let m = t || n;
+	return /* @__PURE__ */ p("li", {
+		id: e,
+		role: "menuitem",
+		tabIndex: -1,
+		"aria-disabled": a || void 0,
+		"data-active": o || void 0,
+		"data-danger": i || void 0,
+		onClick: a ? void 0 : s,
+		onMouseEnter: a ? void 0 : c,
+		className: M(R.item, {
+			[R.active]: o,
+			[R.disabled]: a,
+			[R.danger]: i
+		}, d),
+		children: [
+			r && /* @__PURE__ */ f("span", {
+				"aria-hidden": "true",
+				className: R.itemIcon,
+				children: r
+			}),
+			m && /* @__PURE__ */ f("span", {
+				className: M(R.itemText, R[`itemText--${u}`]),
+				children: m
+			}),
+			l && /* @__PURE__ */ f("span", {
+				className: R.itemShortcut,
+				children: l
+			})
+		]
+	});
+}, B = { group: "_group_ts4nb_1" }, re = () => /* @__PURE__ */ f("li", {
+	role: "separator",
+	className: B.separator,
+	"aria-hidden": "true"
+}), V = {
+	button: "_button_ii6sx_1",
+	disabled: "_disabled_ii6sx_16",
+	iconLeft: "_iconLeft_ii6sx_27",
+	arrow: "_arrow_ii6sx_39",
+	iconOnly: "_iconOnly_ii6sx_42",
+	open: "_open_ii6sx_75"
+}, ie = t(({ children: e, isOpen: t, icon: n, arrowIcon: r, showArrow: i = !0, rotateAngle: a = 90, label: o, className: s, ...c }, l) => {
+	let u = !!n, d = !!e, m = u && !d, h = i && d, g = r ?? /* @__PURE__ */ f(k, {}), _ = m ? o ?? "Open menu" : void 0;
+	return /* @__PURE__ */ p("button", {
+		...c,
+		ref: l,
+		type: "button",
+		className: M(V.button, {
+			[V.disabled]: c.disabled,
+			[V.iconOnly]: m
+		}, s),
+		"aria-label": _,
+		"aria-expanded": t,
+		"aria-haspopup": "menu",
+		style: { "--dropdown-rotate-angle": `${a}deg` },
+		children: [
+			u && /* @__PURE__ */ f("span", {
+				"aria-hidden": "true",
+				className: V.iconLeft,
+				children: n
+			}),
+			e,
+			h && /* @__PURE__ */ f("span", {
+				"aria-hidden": "true",
+				className: M(V.arrow, { [V.open]: t }),
+				children: g
+			})
+		]
+	});
+});
+ie.displayName = "DropdownTrigger";
+//#endregion
+//#region src/components/Dropdown/types.ts
+var ae = (e) => e.type !== "group" && e.type !== "separator", oe = (e) => e.type === "group", se = (e) => e.type === "separator", ce = { wrapper: "_wrapper_14ue8_1" }, le = ({ label: e, icon: t, trigger: n, items: r, onSelect: i, className: o, disabled: l, rotateAngle: u = 90, placement: d, matchTriggerWidth: m, textWrap: h, showArrow: g = !0, arrowIcon: _ }) => {
+	let [v, y] = c(!1), [b, x] = c(-1), S = s(null), C = s(null), w = a(), T = `${w}-trigger`, { floatingStyles: D, setRef: O, setFloatingRef: k } = ee({
+		placement: d,
+		matchTriggerWidth: m,
+		mobileSheetBreakpoint: 640
+	}), A = r.filter(ae), j = v && b >= 0 ? `${w}-item-${b}` : void 0, N = () => A.findIndex((e) => !e.disabled), P = () => {
+		l || y((e) => {
+			let t = !e;
+			return x(t ? N() : -1), t;
+		});
+	}, I = () => {
+		y(!1), x(-1);
+	}, L = () => {
+		I(), S.current?.focus();
+	}, { onKeyDown: R } = E({
+		activeIndex: b,
+		setActiveIndex: x,
+		items: A,
+		isOpen: v,
+		onOpen: P,
+		onSelect: () => {
+			let e = A[b];
+			!e || e.disabled || (i?.(e.value), L());
+		},
+		onClose: L
+	});
+	te([S, C], () => I(), v);
+	let B = (e) => {
+		S.current = e, O(e);
+	}, V = (e) => {
+		C.current = e, k(e), e?.focus();
+	};
+	return /* @__PURE__ */ p("div", {
+		className: M(ce.wrapper, o),
+		children: [/* @__PURE__ */ f(ie, {
+			ref: B,
+			id: T,
+			isOpen: v,
+			disabled: l,
+			icon: t,
+			label: e,
+			showArrow: g,
+			arrowIcon: _,
+			rotateAngle: u,
+			onClick: P,
+			onKeyDown: R,
+			"aria-expanded": v,
+			"aria-haspopup": "menu",
+			...v && { "aria-controls": w },
+			children: n
+		}), v && /* @__PURE__ */ f(F, {
+			ref: V,
+			floatingStyles: D,
+			menuId: w,
+			labelledById: n ? T : void 0,
+			label: n ? void 0 : e,
+			activeDescendantId: j,
+			onKeyDown: R,
+			children: r.map((e, t) => {
+				if (oe(e)) return /* @__PURE__ */ f(ne, { label: e.label }, `group-${e.label}`);
+				if (se(e)) return /* @__PURE__ */ f(re, {}, `separator-${t}`);
+				if (ae(e)) {
+					let t = A.findIndex((t) => t === e);
+					return /* @__PURE__ */ f(z, {
+						id: `${w}-item-${t}`,
+						...e,
+						active: b === t,
+						textWrap: e.textWrap || h,
+						onClick: () => {
+							e.disabled || (i?.(e.value), L());
+						},
+						onMouseEnter: () => {
+							t < 0 || e.disabled || x(t);
+						},
+						children: e.label
+					}, e.value);
+				}
+			})
+		})]
+	});
+}, ue = e(void 0), de = () => {
+	let e = r(ue);
+	if (e === void 0) throw Error("Modal compound components must be used inside Modal");
+	return e;
+};
+ue.displayName = "ModalContext";
+var fe = { modalBody: "_modalBody_iv33a_1" }, pe = ({ children: e }) => {
+	let { descriptionId: t } = de();
+	return /* @__PURE__ */ f("div", {
+		id: t,
+		className: fe.modalBody,
+		children: e
+	});
+};
+pe.displayName = "ModalBody";
+var me = { content: "_content_avpai_1" }, he = ({ children: e }) => /* @__PURE__ */ f("div", {
+	className: me.content,
+	children: e
+});
+he.displayName = "ModalContent";
+var ge = { modalFooter: "_modalFooter_ezys6_1" }, _e = ({ children: e }) => /* @__PURE__ */ f("div", {
+	className: ge.modalFooter,
+	children: e
+});
+_e.displayName = "ModalFooter";
+var ve = {
+	modalHeader: "_modalHeader_155d7_1",
+	modalHeaderTitle: "_modalHeaderTitle_155d7_8",
+	modalHeaderCloseButton: "_modalHeaderCloseButton_155d7_15"
+}, ye = ({ children: e }) => {
+	let { onClose: t, titleId: n } = de();
+	return /* @__PURE__ */ p("div", {
+		className: ve.modalHeader,
+		children: [/* @__PURE__ */ f("h2", {
+			id: n,
+			className: ve.modalHeaderTitle,
+			children: e
+		}), t && /* @__PURE__ */ f("button", {
+			type: "button",
+			className: ve.modalHeaderCloseButton,
+			onClick: t,
+			"aria-label": "Close modal",
+			children: /* @__PURE__ */ f(A, { size: 16 })
+		})]
+	});
+};
+ye.displayName = "ModalHeader";
+//#endregion
+//#region src/hooks/useModalKeyboard.ts
+var be = ({ isOpen: e, onClose: t }) => {
+	let r = n((n) => {
+		e && n.key === "Escape" && (n.preventDefault(), t?.());
+	}, [e, t]);
+	i(() => (document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r)), [r]);
+}, H = {
+	overlay: "_overlay_1xotg_1",
+	"overlay--open": "_overlay--open_1xotg_13",
+	"overlay--animated": "_overlay--animated_1xotg_17",
+	modal: "_modal_1xotg_21"
+}, U = 0, xe = "", Se = ({ children: e, onClose: t, isOpen: r, className: a, closeOnBackdrop: o, closeOnClick: c, closeOnEsc: l = !0, zIndex: u = 1e3, animated: d = !0 }) => {
+	let p = o ?? c ?? !0, m = s(null), { titleId: h, descriptionId: g } = de(), _ = n((e) => {
+		p && e.target === e.currentTarget && t?.();
+	}, [p, t]);
+	return be({
+		isOpen: r,
+		onClose: l ? t : void 0
+	}), i(() => {
+		if (r) return U === 0 && (xe = document.body.style.overflow), U += 1, document.body.style.overflow = "hidden", () => {
+			U = Math.max(0, U - 1), U === 0 && (document.body.style.overflow = xe);
+		};
+	}, [r]), !r && !d ? null : /* @__PURE__ */ f(N, { children: /* @__PURE__ */ f("div", {
+		className: M(H.overlay, r && H["overlay--open"], d && H["overlay--animated"], a),
+		onClick: _,
+		tabIndex: -1,
+		role: "presentation",
+		"aria-hidden": !r,
+		style: { zIndex: u },
+		children: /* @__PURE__ */ f(j, {
+			active: r,
+			focusTrapOptions: {
+				fallbackFocus: () => m.current,
+				returnFocusOnDeactivate: !0,
+				allowOutsideClick: !0
+			},
+			children: /* @__PURE__ */ f("div", {
+				ref: m,
+				tabIndex: -1,
+				className: H.modal,
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": h,
+				"aria-describedby": g,
+				children: e
+			})
+		})
+	}) });
+};
+Se.displayName = "ModalOverlay";
+//#endregion
+//#region src/components/Modal/Modal.tsx
+var Ce = ({ isOpen: e, children: t, onClose: n, closeOnBackdrop: r, closeOnClick: i, closeOnEsc: o = !0 }) => {
+	let s = a(), c = a();
+	return e ? /* @__PURE__ */ f(ue.Provider, {
+		value: {
+			onClose: n,
+			titleId: s,
+			descriptionId: c
+		},
+		children: /* @__PURE__ */ f(Se, {
+			isOpen: e,
+			onClose: n,
+			closeOnBackdrop: r ?? i,
+			closeOnEsc: o,
+			children: /* @__PURE__ */ f(he, { children: t })
+		})
+	}) : null;
+};
+Ce.displayName = "Modal";
+//#endregion
+//#region src/components/Modal/index.ts
+var we = Object.assign(Ce, {
+	Header: ye,
+	Body: pe,
+	Content: he,
+	Footer: _e
+}), W = {
+	wrapper: "_wrapper_14t1p_1",
+	label: "_label_14t1p_9",
+	required: "_required_14t1p_20",
+	description: "_description_14t1p_25",
+	control: "_control_14t1p_32",
+	errorText: "_errorText_14t1p_38",
+	disabled: "_disabled_14t1p_45"
+}, G = ({ id: e, label: t, description: n, error: r, required: i = !1, disabled: o = !1, children: s, className: c }) => {
+	let l = a(), u = e ?? l, d = n ? `${u}-description` : void 0, m = r ? `${u}-error` : void 0;
+	return /* @__PURE__ */ p("div", {
+		className: M(W.wrapper, { [W.disabled]: o }, c),
+		"data-disabled": o || void 0,
+		"data-invalid": !!r || void 0,
+		children: [
+			t && /* @__PURE__ */ p("label", {
+				className: W.label,
+				htmlFor: u,
+				children: [t, i && /* @__PURE__ */ f("span", {
+					className: W.required,
+					"aria-hidden": "true",
+					children: "*"
+				})]
+			}),
+			n && /* @__PURE__ */ f("span", {
+				className: W.description,
+				id: d,
+				children: n
+			}),
+			/* @__PURE__ */ f("div", {
+				className: W.control,
+				children: s
+			}),
+			r && /* @__PURE__ */ f("span", {
+				className: W.errorText,
+				id: m,
+				role: "alert",
+				children: r
+			})
+		]
+	});
+}, K = {
+	group: "_group_rncsx_1",
+	vertical: "_vertical_rncsx_7",
+	horizontal: "_horizontal_rncsx_11",
+	option: "_option_rncsx_16",
+	disabled: "_disabled_rncsx_27",
+	customRadio: "_customRadio_rncsx_30",
+	input: "_input_rncsx_35",
+	label: "_label_rncsx_86"
+}, Te = ({ label: e, description: t, value: n, defaultValue: r, onChange: i, options: o, name: s, required: c = !1, disabled: l = !1, error: u, className: d, orientation: m = "vertical" }) => {
+	let h = a(), g = `${h}-group`, _ = [t ? `${h}-description` : void 0, u ? `${h}-error` : void 0].filter(Boolean).join(" ") || void 0, [v, y] = T({
+		value: n,
+		defaultValue: r ?? "",
+		onChange: i
+	});
+	return /* @__PURE__ */ f(G, {
+		id: h,
+		label: e,
+		description: t,
+		required: c,
+		disabled: l,
+		error: u,
+		children: /* @__PURE__ */ f("div", {
+			id: g,
+			className: M(K.group, K[m], d),
+			role: "radiogroup",
+			"aria-required": c || void 0,
+			"aria-invalid": !!u || void 0,
+			"aria-describedby": _,
+			children: o.map((e) => {
+				let t = `${h}-${e.value}`, n = l || e.disabled;
+				return /* @__PURE__ */ p("label", {
+					htmlFor: t,
+					className: M(K.option, { [K.disabled]: n }),
+					children: [
+						/* @__PURE__ */ f("input", {
+							id: t,
+							type: "radio",
+							name: s,
+							value: e.value,
+							checked: v === e.value,
+							required: c,
+							disabled: n,
+							onChange: () => {
+								n || y(e.value);
+							},
+							className: K.input
+						}),
+						/* @__PURE__ */ f("span", {
+							className: K.customRadio,
+							"aria-hidden": "true"
+						}),
+						/* @__PURE__ */ f("span", {
+							className: K.label,
+							children: e.label
+						})
+					]
+				}, e.value);
+			})
+		})
+	});
+};
+Te.displayName = "RadioGroup";
+var q = {
+	option: "_option_1qm3g_1",
+	selected: "_selected_1qm3g_10",
+	disabled: "_disabled_1qm3g_10",
+	active: "_active_1qm3g_21"
+}, Ee = ({ option: e, isSelected: t, isActive: n, optionId: r, onSelect: i, onMouseEnter: a }) => {
+	let o = !!e.disabled;
+	return /* @__PURE__ */ f("li", {
+		id: r,
+		role: "option",
+		"aria-selected": t,
+		"aria-disabled": o || void 0,
+		className: M(q.option, {
+			[q.selected]: t,
+			[q.active]: n,
+			[q.disabled]: o
+		}),
+		onClick: () => {
+			o || i(e.value);
+		},
+		onMouseEnter: () => {
+			o || a();
+		},
+		children: e.label
+	});
+};
+Ee.displayName = "SelectOption";
+var De = {
+	dropdown: "_dropdown_1vrjb_1",
+	dropdownIn: "_dropdownIn_1vrjb_1"
+}, Oe = ({ isOpen: e, listboxId: t, labelledById: n, setDropdownRef: r, style: i, options: a, selectedValue: o, activeIndex: s, onSelect: c, onMouseEnter: l }) => e ? /* @__PURE__ */ f(N, { children: /* @__PURE__ */ f("ul", {
+	ref: r,
+	id: t,
+	role: "listbox",
+	"aria-labelledby": n,
+	className: De.dropdown,
+	style: i,
+	children: a.map((e, n) => /* @__PURE__ */ f(Ee, {
+		option: e,
+		isSelected: e.value === o,
+		isActive: n === s,
+		optionId: `${t}-option-${n}`,
+		onSelect: c,
+		onMouseEnter: () => l(n)
+	}, e.value))
+}) }) : null;
+Oe.displayName = "SelectDropdown";
+var J = {
+	control: "_control_mmsxg_1",
+	disabled: "_disabled_mmsxg_19",
+	arrow: "_arrow_mmsxg_24",
+	value: "_value_mmsxg_34",
+	placeholder: "_placeholder_mmsxg_42",
+	error: "_error_mmsxg_46",
+	open: "_open_mmsxg_87"
+}, ke = ({ id: e, errorId: t, isOpen: n, disabled: r, required: i, listboxId: a, activeIndex: o, ariaLabel: s, error: c, displayText: l, isPlaceholder: u, buttonRef: d, onClick: m, onKeyDown: h }) => /* @__PURE__ */ p("button", {
+	id: e,
+	ref: d,
+	type: "button",
+	role: "combobox",
+	disabled: r,
+	"aria-disabled": r || void 0,
+	"aria-required": i || void 0,
+	"aria-expanded": n,
+	"aria-haspopup": "listbox",
+	"aria-label": s,
+	"aria-controls": n ? a : void 0,
+	"aria-describedby": t,
+	"aria-activedescendant": n && o >= 0 ? `${a}-option-${o}` : void 0,
+	className: M(J.control, {
+		[J.error]: !!c,
+		[J.disabled]: r
+	}),
+	onClick: m,
+	onKeyDown: h,
+	children: [/* @__PURE__ */ f("span", {
+		className: M(J.value, { [J.placeholder]: u }),
+		children: l
+	}), /* @__PURE__ */ f("span", {
+		className: M(J.arrow, { [J.open]: n }),
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ f(k, {})
+	})]
+});
+ke.displayName = "SelectTrigger";
+//#endregion
+//#region src/components/Select/Select.tsx
+var Ae = ({ label: e, description: t, id: r, name: i, value: l, defaultValue: u, onChange: d, options: m, placeholder: h = "Select...", required: g = !1, disabled: _ = !1, error: v, className: y }) => {
+	let b = a(), x = r ?? b, S = `${x}-listbox`, C = v ? `${x}-error` : void 0, w = s(null), D = s(null), [O, k] = T({
+		value: l,
+		defaultValue: u ?? "",
+		onChange: d
+	}), [A, j] = c(!1), [M, N] = c(-1), P = o(() => m.find((e) => e.value === O), [m, O]), F = !!P, { floatingStyles: I, setRef: L, setFloatingRef: ne } = ee({
+		open: A,
+		matchTriggerWidth: !0,
+		mobileSheetBreakpoint: 640
+	}), R = n(() => {
+		let e = m.findIndex((e) => e.value === O && !e.disabled);
+		return e >= 0 ? e : m.findIndex((e) => !e.disabled);
+	}, [m, O]), z = n(() => {
+		_ || (N(R()), j(!0));
+	}, [_, R]), B = n(() => {
+		j(!1);
+	}, []), re = n(() => {
+		if (!_) {
+			if (A) {
+				B();
+				return;
+			}
+			z();
+		}
+	}, [
+		B,
+		_,
+		A,
+		z
+	]), V = n((e) => {
+		k(e), B(), w.current?.focus();
+	}, [B, k]), { onKeyDown: ie } = E({
+		activeIndex: M,
+		setActiveIndex: N,
+		items: m,
+		isOpen: A,
+		onOpen: z,
+		onClose: B,
+		onSelect: () => {
+			let e = m[M];
+			!e || e.disabled || V(e.value);
+		}
+	});
+	te([w, D], B, A);
+	let ae = n((e) => {
+		w.current = e, L(e);
+	}, [L]), oe = n((e) => {
+		D.current = e, ne(e);
+	}, [ne]);
+	return /* @__PURE__ */ p(G, {
+		id: x,
+		label: e,
+		description: t,
+		error: v,
+		required: g,
+		disabled: _,
+		className: y,
+		children: [
+			/* @__PURE__ */ f(ke, {
+				id: x,
+				errorId: C,
+				isOpen: A,
+				disabled: _,
+				required: g,
+				listboxId: S,
+				activeIndex: M,
+				ariaLabel: e ? void 0 : P?.label || h,
+				error: v,
+				displayText: P?.label ?? h,
+				isPlaceholder: !F,
+				buttonRef: ae,
+				onClick: re,
+				onKeyDown: ie
+			}),
+			i && /* @__PURE__ */ f("input", {
+				type: "hidden",
+				name: i,
+				value: O,
+				disabled: _
+			}),
+			/* @__PURE__ */ f(Oe, {
+				isOpen: A,
+				listboxId: S,
+				labelledById: x,
+				style: I,
+				options: m,
+				selectedValue: O,
+				activeIndex: M,
+				setDropdownRef: oe,
+				onSelect: V,
+				onMouseEnter: N
+			})
+		]
+	});
+};
+Ae.displayName = "Select";
+//#endregion
+//#region src/components/Tabs/TabsContext.tsx
+var je = e(null), Me = () => {
+	let e = r(je);
+	if (!e) throw Error("Tabs components must be used inside Tabs");
+	return e;
+}, Y = {
+	list: "_list_astty_1",
+	vertical: "_vertical_astty_8"
+}, Ne = ({ children: e, className: t, ...n }) => {
+	let { orientation: r, appearance: i } = Me();
+	return /* @__PURE__ */ f("div", {
+		...n,
+		role: "tablist",
+		"aria-orientation": r,
+		className: M(Y.list, r === "vertical" && Y.vertical, i === "underline" && Y.underline, i === "pills" && Y.pills, t),
+		children: e
+	});
+};
+Ne.displayName = "TabsList";
+var Pe = {
+	panel: "_panel_1e9ds_1",
+	visible: "_visible_1e9ds_10",
+	vertical: "_vertical_1e9ds_15"
+}, Fe = ({ index: e, children: t, className: n }) => {
+	let { activeIndex: r, orientation: a } = Me(), [o, s] = c(!1), l = r === e;
+	return i(() => {
+		if (!l) {
+			s(!1);
+			return;
+		}
+		let e = setTimeout(() => s(!0), 10);
+		return () => clearTimeout(e);
+	}, [l]), /* @__PURE__ */ f("div", {
+		role: "tabpanel",
+		id: `tab-panel-${e}`,
+		"aria-labelledby": `tab-${e}`,
+		hidden: !l,
+		tabIndex: 0,
+		className: M(Pe.panel, o && Pe.visible, a === "vertical" && Pe.vertical, n),
+		children: t
+	});
+};
+Fe.displayName = "TabsPanel";
+var X = {
+	tab: "_tab_160gh_1",
+	iconOnly: "_iconOnly_160gh_19",
+	tabIcon: "_tabIcon_160gh_27",
+	label: "_label_160gh_41",
+	default: "_default_160gh_46",
+	underline: "_underline_160gh_53",
+	pills: "_pills_160gh_81",
+	vertical: "_vertical_160gh_93"
+}, Ie = t(({ index: e, children: t, className: r, disabled: i = !1, icon: a, onClick: o, onKeyDown: s, ...c }, l) => {
+	let { activeIndex: u, setActiveIndex: d, orientation: m, appearance: h = "default", registerTab: g, onTabKeyDown: _ } = Me(), v = u === e, y = !!a, b = y && t == null;
+	return /* @__PURE__ */ p("button", {
+		type: "button",
+		ref: n((t) => {
+			g(e, t), typeof l == "function" ? l(t) : l && (l.current = t);
+		}, [
+			g,
+			e,
+			l
+		]),
+		role: "tab",
+		"aria-selected": v,
+		"aria-controls": `tab-panel-${e}`,
+		id: `tab-${e}`,
+		disabled: i,
+		tabIndex: v ? 0 : -1,
+		className: M(X.tab, X[h], m === "vertical" && X.vertical, y && X.withIcon, b && X.iconOnly, r),
+		onClick: (t) => {
+			i || (d(e), o?.(t));
+		},
+		onKeyDown: (e) => {
+			_(e), s?.(e);
+		},
+		...c,
+		children: [y && /* @__PURE__ */ f("span", {
+			className: X.tabIcon,
+			"aria-hidden": "true",
+			children: a
+		}), t != null && /* @__PURE__ */ f("span", {
+			className: X.label,
+			children: t
+		})]
+	});
+});
+Ie.displayName = "Tab";
+var Le = {
+	tabs: "_tabs_15a7w_1",
+	vertical: "_vertical_15a7w_4"
+}, Re = ({ children: e, activeIndex: t, defaultActiveIndex: r = 0, onChange: i, orientation: a = "horizontal", appearance: o = "default", className: l }) => {
+	let [u, d] = c(r), p = t !== void 0, m = p ? t : u, h = n((e) => {
+		p || d(e), i?.(e);
+	}, [p, i]), g = s([]), _ = n((e, t) => {
+		g.current[e] = t;
+	}, []), { onKeyDown: v } = D({
+		activeIndex: m,
+		setActiveIndex: h,
+		tabRefs: g,
+		orientation: a
+	}), y = {
+		activeIndex: m,
+		setActiveIndex: h,
+		orientation: a,
+		appearance: o,
+		registerTab: _,
+		onTabKeyDown: v
+	};
+	return /* @__PURE__ */ f(je.Provider, {
+		value: y,
+		children: /* @__PURE__ */ f("div", {
+			className: M(Le.tabs, a === "vertical" && Le.vertical, l),
+			children: e
+		})
+	});
+};
+Re.displayName = "Tabs";
+//#endregion
+//#region src/components/Tabs/index.ts
+var ze = Object.assign(Re, {
+	List: Ne,
+	Tab: Ie,
+	Panel: Fe
+}), Be = {
+	tooltip: "_tooltip_frlq7_1",
+	arrow: "_arrow_frlq7_22"
+}, Ve = t(({ content: e, placement: t = "top", arrowRef: n, arrowX: r, arrowY: i, className: a, style: o, ...s }, c) => {
+	let l = {
+		top: "bottom",
+		right: "left",
+		bottom: "top",
+		left: "right"
+	}[t.split("-")[0]], u = {
+		position: "absolute",
+		pointerEvents: "none",
+		left: r == null ? "" : `${r}px`,
+		top: i == null ? "" : `${i}px`,
+		[l]: "-5px"
+	};
+	return /* @__PURE__ */ p("div", {
+		ref: c,
+		className: M(Be.tooltip, a),
+		"data-placement": t,
+		"data-state": "open",
+		style: o,
+		...s,
+		children: [e, /* @__PURE__ */ f("div", {
+			ref: n,
+			className: Be.arrow,
+			style: u
+		})]
+	});
+});
+Ve.displayName = "TooltipContent";
+//#endregion
+//#region src/components/Tooltip/Tooltip.tsx
+var He = ({ children: e, placement: t = "top", content: n, disabled: r = !1, delay: i = {
+	open: 300,
+	close: 100
+}, maxWidth: o = 250, className: l, onOpenChange: u }) => {
+	let [g, _] = c(!1), v = s(null), y = a(), { context: b, floatingStyles: x, middlewareData: T, setRef: E, setFloatingRef: D, placement: O } = ee({
+		open: g,
+		onOpenChange: (e) => {
+			r || (_(e), u?.(e));
+		},
+		placement: t,
+		middleware: [h({ element: v })]
+	}), k = T.arrow?.x, A = T.arrow?.y, { getReferenceProps: j, getFloatingProps: M } = w([C(b, { delay: {
+		open: i.open,
+		close: i.close
+	} }), S(b)]);
+	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", {
+		ref: E,
+		style: { display: "inline-flex" },
+		"aria-describedby": g ? y : void 0,
+		...j(),
+		children: e
+	}), /* @__PURE__ */ f(m, { children: g && n && /* @__PURE__ */ f(Ve, {
+		id: y,
+		ref: D,
+		content: n,
+		arrowRef: v,
+		arrowX: k,
+		arrowY: A,
+		role: "tooltip",
+		style: {
+			...x,
+			maxWidth: typeof o == "number" ? `${o}px` : o
+		},
+		placement: O,
+		className: l,
+		...M()
+	}) })] });
+};
+He.displayName = "Tooltip";
+var Z = {
+	button: "_button_1nc1z_1",
+	primary: "_primary_1nc1z_22",
+	secondary: "_secondary_1nc1z_38",
+	danger: "_danger_1nc1z_54",
+	sm: "_sm_1nc1z_80",
+	md: "_md_1nc1z_87",
+	lg: "_lg_1nc1z_94",
+	iconOnly: "_iconOnly_1nc1z_100",
+	fullWidth: "_fullWidth_1nc1z_105",
+	label: "_label_1nc1z_121",
+	icon: "_icon_1nc1z_100"
+}, Ue = t(({ children: e, variant: t = "primary", size: n = "md", disabled: r = !1, leftIcon: i, rightIcon: a, fullWidth: o = !1, className: s, onClick: c, ariaLabel: l }, u) => {
+	let d = !e && (i || a);
+	return d && !l && process.env.NODE_ENV !== "production" && console.warn("Button: icon-only buttons must provide ariaLabel."), /* @__PURE__ */ p("button", {
+		ref: u,
+		type: "button",
+		disabled: r,
+		onClick: c,
+		"aria-label": l || void 0,
+		className: M(Z.button, Z[t], Z[n], s, {
+			[Z.disabled]: r,
+			[Z.fullWidth]: o,
+			[Z.iconOnly]: d
+		}),
+		children: [
+			i && /* @__PURE__ */ f("span", {
+				className: Z.icon,
+				children: i
+			}),
+			e && /* @__PURE__ */ f("span", {
+				className: Z.label,
+				children: e
+			}),
+			a && /* @__PURE__ */ f("span", {
+				className: Z.icon,
+				children: a
+			})
+		]
+	});
+});
+Ue.displayName = "Button";
+var Q = {
+	wrapper: "_wrapper_36r4m_1",
+	input: "_input_36r4m_9",
+	customCheckbox: "_customCheckbox_36r4m_21",
+	checkmark: "_checkmark_36r4m_38",
+	container: "_container_36r4m_54",
+	label: "_label_36r4m_60",
+	error: "_error_36r4m_65",
+	errorText: "_errorText_36r4m_69",
+	disabled: "_disabled_36r4m_115"
+}, We = t(({ label: e, checked: t, defaultChecked: n = !1, disabled: r = !1, className: i, onCheckedChange: o, error: s }, c) => {
+	let l = a(), u = !!s, [d, m] = T({
+		value: t,
+		defaultValue: n,
+		onChange: o
+	});
+	return /* @__PURE__ */ p("div", {
+		className: Q.container,
+		children: [/* @__PURE__ */ p("label", {
+			htmlFor: l,
+			className: M(Q.wrapper, r && Q.disabled, i),
+			children: [
+				/* @__PURE__ */ f("input", {
+					ref: c,
+					id: l,
+					type: "checkbox",
+					checked: d,
+					disabled: r,
+					onChange: (e) => {
+						m(e.target.checked);
+					},
+					className: Q.input,
+					"aria-invalid": u || void 0,
+					"aria-describedby": u ? `${l}-error` : void 0,
+					"aria-label": e ? void 0 : "Checkbox"
+				}),
+				/* @__PURE__ */ f("span", {
+					className: M(Q.customCheckbox, u && Q.error),
+					"aria-hidden": "true",
+					children: d && /* @__PURE__ */ f("span", {
+						className: Q.checkmark,
+						children: /* @__PURE__ */ f(O, {})
+					})
+				}),
+				e && /* @__PURE__ */ f("span", {
+					className: Q.label,
+					children: e
+				})
+			]
+		}), u && /* @__PURE__ */ f("span", {
+			id: `${l}-error`,
+			className: Q.errorText,
+			children: s
+		})]
+	});
+});
+We.displayName = "Checkbox";
+var $ = {
+	inputWrapper: "_inputWrapper_kfk5j_1",
+	input: "_input_kfk5j_1",
+	error: "_error_kfk5j_36",
+	withEllipsis: "_withEllipsis_kfk5j_43",
+	sm: "_sm_kfk5j_48",
+	md: "_md_kfk5j_52",
+	lg: "_lg_kfk5j_56",
+	tooltip: "_tooltip_kfk5j_63",
+	fadeIn: "_fadeIn_kfk5j_1"
+}, Ge = t(({ id: e, label: t, placeholder: r, value: o, onChange: l, size: u = "md", error: d, disabled: m = !1, required: h = !1, className: g, autoComplete: _, type: v = "text", showOverflowTooltip: y = !1 }, b) => {
+	let x = a(), S = e ?? x, C = s(null), [w, T] = c(!1), [E, D] = c(!1), O = o != null && o !== "", k = n(() => {
+		let e = C.current;
+		if (!e) {
+			T(!1);
+			return;
+		}
+		T(e.scrollWidth > e.clientWidth);
+	}, []);
+	i(() => {
+		if (!y) return;
+		if (k(), typeof ResizeObserver > "u") return window.addEventListener("resize", k), () => {
+			window.removeEventListener("resize", k);
+		};
+		let e = new ResizeObserver(k);
+		return C.current && e.observe(C.current), window.addEventListener("resize", k), () => {
+			e.disconnect(), window.removeEventListener("resize", k);
+		};
+	}, [k, y]), i(() => {
+		y && k();
+	}, [
+		o,
+		k,
+		y
+	]);
+	let A = n((e) => {
+		if (C.current = e, typeof b == "function") {
+			b(e);
+			return;
+		}
+		b && (b.current = e);
+	}, [b]), j = n((e) => {
+		l?.(e.target.value);
+	}, [l]), N = n(() => {
+		y && w && O && D(!0);
+	}, [
+		O,
+		w,
+		y
+	]), P = n(() => {
+		D(!1);
+	}, []);
+	return /* @__PURE__ */ f(G, {
+		id: S,
+		label: t,
+		error: d,
+		required: h,
+		disabled: m,
+		children: /* @__PURE__ */ p("div", {
+			className: $.inputWrapper,
+			children: [/* @__PURE__ */ f("input", {
+				ref: A,
+				id: S,
+				type: v,
+				autoComplete: _,
+				className: M($.input, $[u], {
+					[$.error]: !!d,
+					[$.withEllipsis]: y
+				}, g),
+				value: o,
+				onChange: j,
+				placeholder: r,
+				disabled: m,
+				required: h,
+				"aria-invalid": !!d,
+				"aria-describedby": d ? `${S}-error` : void 0,
+				onMouseEnter: N,
+				onMouseLeave: P
+			}), y && E && w && O && /* @__PURE__ */ f("div", {
+				className: $.tooltip,
+				role: "tooltip",
+				children: o
+			})]
+		})
+	});
+});
+Ge.displayName = "Input";
+//#endregion
+//#region src/theme/ThemeContext.ts
+var Ke = e(null), qe = (e) => e === "highContrast" ? "high-contrast" : e, Je = ({ theme: e, defaultTheme: t = "light", onThemeChange: n, children: r }) => {
+	let [a, s] = T({
+		value: e,
+		defaultValue: t,
+		onChange: n
+	}), c = qe(a);
+	i(() => {
+		if (typeof document > "u") return;
+		let { documentElement: e } = document, t = e.dataset.velliraTheme;
+		return e.dataset.velliraTheme = c, () => {
+			if (t === void 0) {
+				delete e.dataset.velliraTheme;
+				return;
+			}
+			e.dataset.velliraTheme = t;
+		};
+	}, [c]);
+	let l = o(() => ({
+		theme: a,
+		setTheme: s
+	}), [a, s]);
+	return /* @__PURE__ */ f(Ke.Provider, {
+		value: l,
+		children: /* @__PURE__ */ f("div", {
+			"data-vellira-theme": c,
+			children: r
+		})
+	});
+};
+Je.displayName = "ThemeProvider";
+//#endregion
+//#region src/theme/useTheme.ts
+function Ye() {
+	let e = r(Ke);
+	if (!e) throw Error("useTheme must be used within ThemeProvider.");
+	return e;
+}
+//#endregion
+export { Ue as Button, We as Checkbox, le as Dropdown, G as FormField, Ge as Input, we as Modal, Te as RadioGroup, Ae as Select, ze as Tabs, Je as ThemeProvider, He as Tooltip, Ye as useTheme };