@arkyn/components 3.0.8 → 3.0.9

package/dist/modules/components/select/index.js

@@ -2,114 +2,154 @@ import { useForm as e } from "../../hooks/useForm.js";
 import { IconRenderer as t } from "../../services/iconRenderer.js";
 import { FieldTemplate as n } from "../../services/fieldTemplate.js";
 import { SelectChevron as r } from "./selectChevron/index.js";
-import { SelectContainer as i } from "./selectContainer/index.js";
-import { SelectContent as a } from "./selectContent/index.js";
-import { SelectOption as o } from "./selectOption/index.js";
-import { SelectOptionsContainer as s } from "./selectOptionsContainer/index.js";
-import { SelectOverlay as ee } from "./selectOverlay/index.js";
-import { SelectSpinner as te } from "./selectSpinner/index.js";
-import { useId as c, useRef as l, useState as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { SelectContainer as ee } from "./selectContainer/index.js";
+import { SelectContent as te } from "./selectContent/index.js";
+import { SelectOption as ne } from "./selectOption/index.js";
+import { SelectOptionsContainer as re } from "./selectOptionsContainer/index.js";
+import { SelectOverlay as ie } from "./selectOverlay/index.js";
+import { SelectSpinner as ae } from "./selectSpinner/index.js";
+import { useId as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/select/index.tsx
-function p(p) {
-	let { name: m, options: h, className: g = "", placeholder: _ = "Selecione...", closeOnSelect: v = !0, defaultValue: y = "", errorMessage: b, isLoading: x = !1, readOnly: S = !1, isSearchable: ne = !1, id: re, label: ie, showAsterisk: C, leftIcon: w, onSearch: T, onChange: E, onBlur: D, notFoundText: O = "Sem opções disponíveis", onFocus: k, disabled: A = !1, prefix: j, size: M = "md", value: N, variant: P = "solid", orientation: F = "vertical", unShowFieldTemplate: I = !1 } = p, { fieldErrors: L } = e(), R = l(null), ae = c(), z = re || ae, B = b || L?.[m], V = !!B, H = A || x || S, U = {
+function l(l) {
+	let { name: u, options: d, className: f = "", placeholder: p = "Selecione...", closeOnSelect: m = !0, defaultValue: h = "", errorMessage: g, isLoading: _ = !1, readOnly: v = !1, isSearchable: y = !1, id: b, label: oe, showAsterisk: se, leftIcon: x, onSearch: S, onChange: C, onBlur: ce, notFoundText: le = "Sem opções disponíveis", onFocus: ue, disabled: de = !1, prefix: w, size: T = "md", value: E, variant: D = "solid", orientation: O = "vertical", unShowFieldTemplate: k = !1 } = l, { fieldErrors: A } = e(), j = a(null), M = a(null), N = i(), P = b || N, F = `${P}-listbox`, I = g || A?.[u], L = !!I, R = de || _ || v, z = {
 		md: 20,
 		lg: 20
-	}[M], [W, G] = u(""), [K, q] = u(!1), [J, Y] = u(y), X = N || J;
-	function Z(e) {
-		return X === e;
+	}[T], [B, V] = o(""), [H, U] = o(!1), [fe, W] = o(h), [G, K] = o(-1), q = E === void 0 ? fe : E;
+	function J(e) {
+		return q === e;
 	}
-	function oe(e) {
-		return h.find((t) => t.value === e)?.label || "";
+	function pe(e) {
+		return d.find((t) => t.value === e)?.label || "";
 	}
-	function se() {
-		H || !R?.current || K || (q(!0), R.current.focus(), k?.());
+	function Y(e) {
+		return `${F}-option-${e.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
 	}
-	function Q() {
-		q(!1), D && R.current && R.current.blur();
+	function X() {
+		R || !j?.current || H || (U(!0), K(-1), j.current.focus(), ue?.());
 	}
-	function ce(e) {
-		G(e), T && T(e);
+	function Z() {
+		U(!1), K(-1), ce && j.current && j.current.blur();
 	}
-	function le(e) {
-		Z(e) ? (Y(""), E && E("")) : (Y(e), E && E(e)), v && Q();
+	function me(e) {
+		V(e), K(-1), S && S(e);
 	}
-	let $ = h.filter((e) => !!(p.onSearch || !p.isSearchable || e.label.toLowerCase().includes(W.toLowerCase())));
-	return /* @__PURE__ */ d(n, {
-		name: m,
-		label: ie,
-		showAsterisk: C,
-		className: g,
-		errorMessage: B,
-		unShowFieldTemplate: I,
-		orientation: F,
-		children: /* @__PURE__ */ f(i, {
-			handleContainerFocus: se,
-			disabled: H,
-			isError: V,
-			isFocused: K,
-			isLoading: x,
-			readOnly: S,
-			size: M,
-			variant: P,
-			prefixExists: !!j,
-			id: z,
+	function Q(e) {
+		J(e) ? (W(""), C && C("")) : (W(e), C && C(e)), m && Z();
+	}
+	let $ = d.filter((e) => !!(l.onSearch || !l.isSearchable || e.label.toLowerCase().includes(B.toLowerCase())));
+	function he(e) {
+		if (R) return;
+		if (!H) {
+			(e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), X(), e.key === "ArrowDown" && K(0));
+			return;
+		}
+		let t = e.target?.tagName === "INPUT", n = e.target?.tagName === "BUTTON";
+		switch (e.key) {
+			case "Escape":
+				e.preventDefault(), Z(), M.current?.focus();
+				break;
+			case "ArrowDown":
+				e.preventDefault(), K((e) => $.length === 0 ? -1 : e < 0 || e + 1 >= $.length ? 0 : e + 1);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), K((e) => $.length === 0 ? -1 : e < 0 || e - 1 < 0 ? $.length - 1 : e - 1);
+				break;
+			case " ":
+				if (t || n) return;
+				e.preventDefault(), G >= 0 && G < $.length && Q($[G].value);
+				break;
+			case "Enter":
+				if (n) return;
+				e.preventDefault(), G >= 0 && G < $.length && Q($[G].value);
+				break;
+			default: break;
+		}
+	}
+	let ge = G >= 0 && G < $.length ? Y($[G].value) : void 0;
+	return /* @__PURE__ */ s(n, {
+		name: u,
+		label: oe,
+		showAsterisk: se,
+		className: f,
+		errorMessage: I,
+		unShowFieldTemplate: k,
+		orientation: O,
+		children: /* @__PURE__ */ c(ee, {
+			handleContainerFocus: X,
+			disabled: R,
+			isError: L,
+			isFocused: H,
+			isLoading: _,
+			readOnly: v,
+			size: T,
+			variant: D,
+			prefixExists: !!w,
+			id: P,
+			containerRef: M,
+			onContainerKeyDown: he,
+			tabIndex: R ? -1 : 0,
+			ariaControls: F,
+			ariaActiveDescendant: ge,
 			children: [
-				/* @__PURE__ */ d("input", {
-					ref: R,
-					name: m,
-					value: X,
+				/* @__PURE__ */ s("input", {
+					ref: j,
+					name: u,
+					value: q,
 					type: "hidden"
 				}),
-				/* @__PURE__ */ d(t, {
-					iconSize: U,
-					icon: j,
+				/* @__PURE__ */ s(t, {
+					iconSize: z,
+					icon: w,
 					className: "prefix"
 				}),
-				w && /* @__PURE__ */ d(w, {
-					size: U,
+				x && /* @__PURE__ */ s(x, {
+					size: z,
 					strokeWidth: 2.5
 				}),
-				/* @__PURE__ */ f(a, {
-					size: M,
-					children: [X !== "" && /* @__PURE__ */ d("p", {
+				/* @__PURE__ */ c(te, {
+					size: T,
+					children: [q !== "" && /* @__PURE__ */ s("p", {
 						className: "hasValue",
-						children: oe(X)
-					}), X === "" && /* @__PURE__ */ d("p", { children: _ })]
+						children: pe(q)
+					}), q === "" && /* @__PURE__ */ s("p", { children: p })]
 				}),
-				/* @__PURE__ */ f(s, {
-					isFocused: K,
-					isSearchable: ne,
-					search: W,
-					onSearch: ce,
-					children: [$.map(({ label: e, value: t }) => /* @__PURE__ */ d(o, {
+				/* @__PURE__ */ c(re, {
+					id: F,
+					isFocused: H,
+					isSearchable: y,
+					search: B,
+					onSearch: me,
+					children: [$.map(({ label: e, value: t }, n) => /* @__PURE__ */ s(ne, {
+						id: Y(t),
 						label: e,
 						value: t,
-						size: M,
-						handleChangeValue: le,
-						optionHasSelected: Z
-					}, t)), $.length <= 0 && /* @__PURE__ */ d("p", { children: O })]
+						size: T,
+						isHighlighted: n === G,
+						handleChangeValue: Q,
+						optionHasSelected: J
+					}, t)), $.length <= 0 && /* @__PURE__ */ s("p", { children: le })]
 				}),
-				/* @__PURE__ */ d(r, {
-					disabled: H,
-					isFocused: K,
-					readOnly: S,
-					iconSize: U,
-					isLoading: x
+				/* @__PURE__ */ s(r, {
+					disabled: R,
+					isFocused: H,
+					readOnly: v,
+					iconSize: z,
+					isLoading: _
 				}),
-				/* @__PURE__ */ d(te, {
-					iconSize: U,
-					isLoading: x
+				/* @__PURE__ */ s(ae, {
+					iconSize: z,
+					isLoading: _
 				}),
-				/* @__PURE__ */ d(ee, {
-					handleBlur: Q,
-					isFocused: K
+				/* @__PURE__ */ s(ie, {
+					handleBlur: Z,
+					isFocused: H
 				})
 			]
 		})
 	});
 }
 //#endregion
-export { p as Select };
+export { l as Select };
 
 //# sourceMappingURL=index.js.map

package/dist/modules/components/select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/select/index.tsx"],"sourcesContent":["import type { LucideIcon } from \"lucide-react\";\nimport { type FocusEvent, useId, useRef, useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport { IconRenderer } from \"../../services/iconRenderer\";\n\nimport { SelectChevron } from \"./selectChevron\";\nimport { SelectContainer } from \"./selectContainer\";\nimport { SelectContent } from \"./selectContent\";\nimport { SelectOption } from \"./selectOption\";\nimport { SelectOptionsContainer } from \"./selectOptionsContainer\";\nimport { SelectOverlay } from \"./selectOverlay\";\nimport { SelectSpinner } from \"./selectSpinner\";\n\ntype SelectProps = {\n\t/** Field name for form submission. Required. */\n\tname: string;\n\t/** Array of selectable options. Required. */\n\toptions: { label: string; value: string }[];\n\t/** Optional HTML id for the underlying hidden input. */\n\tid?: string;\n\t/** Controlled selected value. */\n\tvalue?: string;\n\t/** Uncontrolled default selected value. @default \"\" */\n\tdefaultValue?: string;\n\t/** Displays an asterisk on the label to signal a required field. */\n\tshowAsterisk?: boolean;\n\t/** Optional label text displayed above the select. */\n\tlabel?: string;\n\t/** Validation error message displayed below the select. */\n\terrorMessage?: string;\n\t/** Placeholder text shown when no option is selected. @default \"Selecione...\" */\n\tplaceholder?: string;\n\t/** Text shown when no options match the search query. @default \"Sem opções disponíveis\" */\n\tnotFoundText?: string;\n\t/** Additional CSS class applied to the wrapper element. */\n\tclassName?: string;\n\t/** Disables all interactions. @default false */\n\tdisabled?: boolean;\n\t/** Prevents value changes while keeping the current value visible. @default false */\n\treadOnly?: boolean;\n\t/** Shows a loading spinner and disables interactions. @default false */\n\tisLoading?: boolean;\n\t/** Enables search/filter within the dropdown. @default false */\n\tisSearchable?: boolean;\n\t/** Closes the dropdown after an option is selected. @default true */\n\tcloseOnSelect?: boolean;\n\t/** Callback fired when the search query changes. Use for async option loading. */\n\tonSearch?: (value: string) => void;\n\t/** Callback fired when the selected value changes. */\n\tonChange?: (value: string) => void;\n\t/** Callback fired when the select gains focus. */\n\tonFocus?: () => void;\n\t/** Callback fired when the select loses focus. */\n\tonBlur?: (e: FocusEvent<HTMLDivElement>) => void;\n\t/**\n\t * Select size.\n\t * @default \"md\"\n\t */\n\tsize?: \"md\" | \"lg\";\n\t/**\n\t * Visual style variant.\n\t * - `solid`: filled background.\n\t * - `outline`: bordered, transparent background.\n\t * - `underline`: bottom border only.\n\t * @default \"solid\"\n\t */\n\tvariant?: \"solid\" | \"outline\" | \"underline\";\n\t/** Text or icon rendered at the far left, outside the select area. */\n\tprefix?: string | LucideIcon;\n\t/** Lucide icon rendered inside the select on the left. */\n\tleftIcon?: LucideIcon;\n\t/** Maximum height (in px) of the options dropdown. */\n\toptionMaxHeight?: number;\n\t/** When true, skips `FieldTemplate` wrapper (label and error text). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/**\n\t * Layout direction forwarded to `FieldTemplate`.\n\t * @default \"horizontal\"\n\t */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n};\n\n/**\n * Select, single-option dropdown with optional search, label, validation, and form integration.\n *\n * Integrates with `useForm` to display validation errors by field name.\n *\n * @param props.name - Field name for form submission. Required.\n * @param props.options - Array of selectable options (`{ label, value }`). Required.\n * @param props.value - Controlled selected value.\n * @param props.defaultValue - Uncontrolled default value. Default: \"\"\n * @param props.label - Label text displayed above the select.\n * @param props.placeholder - Placeholder shown when nothing is selected. Default: \"Selecione...\"\n * @param props.errorMessage - Validation error message.\n * @param props.isSearchable - Enables search/filter within the dropdown. Default: false\n * @param props.isLoading - Shows a loading spinner and disables interactions. Default: false\n * @param props.closeOnSelect - Closes the dropdown after selecting. Default: true\n * @param props.onChange - Callback fired when the selected value changes.\n * @param props.onSearch - Callback fired when the search query changes.\n * @param props.size - Select size (`md` | `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.orientation - Layout direction. Default: \"horizontal\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n *\n * @returns Select JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <Select\n *   name=\"category\"\n *   options={[\n *     { label: \"Technology\", value: \"tech\" },\n *     { label: \"Design\", value: \"design\" },\n *   ]}\n * />\n *\n * // With label, validation, and searchable\n * <Select\n *   name=\"country\"\n *   label=\"Country\"\n *   showAsterisk\n *   isSearchable\n *   options={countryOptions}\n *   errorMessage={errors.country}\n *   notFoundText=\"No countries found\"\n * />\n *\n * // Controlled with async search\n * <Select\n *   name=\"tag\"\n *   label=\"Tag\"\n *   value={selectedTag}\n *   onChange={setSelectedTag}\n *   onSearch={fetchTagOptions}\n *   isLoading={isLoadingTags}\n *   options={tagOptions}\n * />\n * ```\n */\n\nfunction Select(props: SelectProps) {\n\tconst {\n\t\tname,\n\t\toptions,\n\t\tclassName: wrapperClassName = \"\",\n\t\tplaceholder = \"Selecione...\",\n\t\tcloseOnSelect = true,\n\t\tdefaultValue = \"\",\n\t\terrorMessage: baseErrorMessage,\n\t\tisLoading = false,\n\t\treadOnly = false,\n\t\tisSearchable = false,\n\t\tid,\n\t\tlabel,\n\t\tshowAsterisk,\n\t\tleftIcon: LeftIcon,\n\t\tonSearch,\n\t\tonChange,\n\t\tonBlur,\n\t\tnotFoundText = \"Sem opções disponíveis\",\n\t\tonFocus,\n\t\tdisabled: baseDisabled = false,\n\t\tprefix,\n\t\tsize = \"md\",\n\t\tvalue,\n\t\tvariant = \"solid\",\n\t\torientation = \"vertical\",\n\t\tunShowFieldTemplate = false,\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\n\tconst selectRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst selectId = id || generatedId;\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst disabled = baseDisabled || isLoading || readOnly;\n\n\tconst iconSizes = { md: 20, lg: 20 };\n\tconst iconSize = iconSizes[size];\n\n\tconst [search, setSearch] = useState(\"\");\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst [selectedOption, setSelectedOption] = useState(defaultValue);\n\n\tconst forceSelectedOptions = value || selectedOption;\n\n\tfunction optionHasSelected(value: string) {\n\t\treturn forceSelectedOptions === value;\n\t}\n\n\tfunction getOptionLabel(value: string) {\n\t\tconst option = options.find((option) => option.value === value);\n\t\treturn option?.label || \"\";\n\t}\n\n\tfunction handleContainerFocus() {\n\t\tif (disabled || !selectRef?.current || isFocused) return;\n\t\tsetIsFocused(true);\n\t\tselectRef.current.focus();\n\t\tonFocus?.();\n\t}\n\n\tfunction handleBlur() {\n\t\tsetIsFocused(false);\n\t\tif (onBlur && selectRef.current) selectRef.current.blur();\n\t}\n\n\tfunction handleSearch(value: string) {\n\t\tsetSearch(value);\n\t\tif (onSearch) onSearch(value);\n\t}\n\n\tfunction handleChangeValue(value: string) {\n\t\tif (optionHasSelected(value)) {\n\t\t\tsetSelectedOption(\"\");\n\t\t\tif (onChange) onChange(\"\");\n\t\t} else {\n\t\t\tsetSelectedOption(value);\n\t\t\tif (onChange) onChange(value);\n\t\t}\n\n\t\tif (closeOnSelect) handleBlur();\n\t}\n\n\tconst mappedOptions = options.filter((option) => {\n\t\tif (props.onSearch) return true;\n\t\tif (!props.isSearchable) return true;\n\t\tif (option.label.toLowerCase().includes(search.toLowerCase())) return true;\n\t\treturn false;\n\t});\n\n\treturn (\n\t\t<FieldTemplate\n\t\t\tname={name}\n\t\t\tlabel={label}\n\t\t\tshowAsterisk={showAsterisk}\n\t\t\tclassName={wrapperClassName}\n\t\t\terrorMessage={errorMessage}\n\t\t\tunShowFieldTemplate={unShowFieldTemplate}\n\t\t\torientation={orientation}\n\t\t>\n\t\t\t<SelectContainer\n\t\t\t\thandleContainerFocus={handleContainerFocus}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tisError={isError}\n\t\t\t\tisFocused={isFocused}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tsize={size}\n\t\t\t\tvariant={variant}\n\t\t\t\tprefixExists={!!prefix}\n\t\t\t\tid={selectId}\n\t\t\t>\n\t\t\t\t<input\n\t\t\t\t\tref={selectRef}\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={forceSelectedOptions}\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={prefix} className=\"prefix\" />\n\n\t\t\t\t{LeftIcon && <LeftIcon size={iconSize} strokeWidth={2.5} />}\n\n\t\t\t\t<SelectContent size={size}>\n\t\t\t\t\t{forceSelectedOptions !== \"\" && (\n\t\t\t\t\t\t<p className=\"hasValue\">{getOptionLabel(forceSelectedOptions)}</p>\n\t\t\t\t\t)}\n\t\t\t\t\t{forceSelectedOptions === \"\" && <p>{placeholder}</p>}\n\t\t\t\t</SelectContent>\n\n\t\t\t\t<SelectOptionsContainer\n\t\t\t\t\tisFocused={isFocused}\n\t\t\t\t\tisSearchable={isSearchable}\n\t\t\t\t\tsearch={search}\n\t\t\t\t\tonSearch={handleSearch}\n\t\t\t\t>\n\t\t\t\t\t{mappedOptions.map(({ label, value }) => (\n\t\t\t\t\t\t<SelectOption\n\t\t\t\t\t\t\tkey={value}\n\t\t\t\t\t\t\tlabel={label}\n\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\t\thandleChangeValue={handleChangeValue}\n\t\t\t\t\t\t\toptionHasSelected={optionHasSelected}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\n\t\t\t\t\t{mappedOptions.length <= 0 && <p>{notFoundText}</p>}\n\t\t\t\t</SelectOptionsContainer>\n\n\t\t\t\t<SelectChevron\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tisFocused={isFocused}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t/>\n\n\t\t\t\t<SelectSpinner iconSize={iconSize} isLoading={isLoading} />\n\t\t\t\t<SelectOverlay handleBlur={handleBlur} isFocused={isFocused} />\n\t\t\t</SelectContainer>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { Select };\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/select/index.tsx"],"sourcesContent":["import type { LucideIcon } from \"lucide-react\";\nimport {\n\ttype FocusEvent,\n\ttype KeyboardEvent,\n\tuseId,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport { IconRenderer } from \"../../services/iconRenderer\";\n\nimport { SelectChevron } from \"./selectChevron\";\nimport { SelectContainer } from \"./selectContainer\";\nimport { SelectContent } from \"./selectContent\";\nimport { SelectOption } from \"./selectOption\";\nimport { SelectOptionsContainer } from \"./selectOptionsContainer\";\nimport { SelectOverlay } from \"./selectOverlay\";\nimport { SelectSpinner } from \"./selectSpinner\";\n\ntype SelectProps = {\n\t/** Field name for form submission. Required. */\n\tname: string;\n\t/** Array of selectable options. Required. */\n\toptions: { label: string; value: string }[];\n\t/** Optional HTML id for the underlying hidden input. */\n\tid?: string;\n\t/** Controlled selected value. */\n\tvalue?: string;\n\t/** Uncontrolled default selected value. @default \"\" */\n\tdefaultValue?: string;\n\t/** Displays an asterisk on the label to signal a required field. */\n\tshowAsterisk?: boolean;\n\t/** Optional label text displayed above the select. */\n\tlabel?: string;\n\t/** Validation error message displayed below the select. */\n\terrorMessage?: string;\n\t/** Placeholder text shown when no option is selected. @default \"Selecione...\" */\n\tplaceholder?: string;\n\t/** Text shown when no options match the search query. @default \"Sem opções disponíveis\" */\n\tnotFoundText?: string;\n\t/** Additional CSS class applied to the wrapper element. */\n\tclassName?: string;\n\t/** Disables all interactions. @default false */\n\tdisabled?: boolean;\n\t/** Prevents value changes while keeping the current value visible. @default false */\n\treadOnly?: boolean;\n\t/** Shows a loading spinner and disables interactions. @default false */\n\tisLoading?: boolean;\n\t/** Enables search/filter within the dropdown. @default false */\n\tisSearchable?: boolean;\n\t/** Closes the dropdown after an option is selected. @default true */\n\tcloseOnSelect?: boolean;\n\t/** Callback fired when the search query changes. Use for async option loading. */\n\tonSearch?: (value: string) => void;\n\t/** Callback fired when the selected value changes. */\n\tonChange?: (value: string) => void;\n\t/** Callback fired when the select gains focus. */\n\tonFocus?: () => void;\n\t/** Callback fired when the select loses focus. */\n\tonBlur?: (e: FocusEvent<HTMLDivElement>) => void;\n\t/**\n\t * Select size.\n\t * @default \"md\"\n\t */\n\tsize?: \"md\" | \"lg\";\n\t/**\n\t * Visual style variant.\n\t * - `solid`: filled background.\n\t * - `outline`: bordered, transparent background.\n\t * - `underline`: bottom border only.\n\t * @default \"solid\"\n\t */\n\tvariant?: \"solid\" | \"outline\" | \"underline\";\n\t/** Text or icon rendered at the far left, outside the select area. */\n\tprefix?: string | LucideIcon;\n\t/** Lucide icon rendered inside the select on the left. */\n\tleftIcon?: LucideIcon;\n\t/** Maximum height (in px) of the options dropdown. */\n\toptionMaxHeight?: number;\n\t/** When true, skips `FieldTemplate` wrapper (label and error text). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/**\n\t * Layout direction forwarded to `FieldTemplate`.\n\t * @default \"horizontal\"\n\t */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n};\n\n/**\n * Select, single-option dropdown with optional search, label, validation, and form integration.\n *\n * Integrates with `useForm` to display validation errors by field name.\n *\n * @param props.name - Field name for form submission. Required.\n * @param props.options - Array of selectable options (`{ label, value }`). Required.\n * @param props.value - Controlled selected value.\n * @param props.defaultValue - Uncontrolled default value. Default: \"\"\n * @param props.label - Label text displayed above the select.\n * @param props.placeholder - Placeholder shown when nothing is selected. Default: \"Selecione...\"\n * @param props.errorMessage - Validation error message.\n * @param props.isSearchable - Enables search/filter within the dropdown. Default: false\n * @param props.isLoading - Shows a loading spinner and disables interactions. Default: false\n * @param props.closeOnSelect - Closes the dropdown after selecting. Default: true\n * @param props.onChange - Callback fired when the selected value changes.\n * @param props.onSearch - Callback fired when the search query changes.\n * @param props.size - Select size (`md` | `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.orientation - Layout direction. Default: \"vertical\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n *\n * @returns Select JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <Select\n *   name=\"category\"\n *   options={[\n *     { label: \"Technology\", value: \"tech\" },\n *     { label: \"Design\", value: \"design\" },\n *   ]}\n * />\n *\n * // With label, validation, and searchable\n * <Select\n *   name=\"country\"\n *   label=\"Country\"\n *   showAsterisk\n *   isSearchable\n *   options={countryOptions}\n *   errorMessage={errors.country}\n *   notFoundText=\"No countries found\"\n * />\n *\n * // Controlled with async search\n * <Select\n *   name=\"tag\"\n *   label=\"Tag\"\n *   value={selectedTag}\n *   onChange={setSelectedTag}\n *   onSearch={fetchTagOptions}\n *   isLoading={isLoadingTags}\n *   options={tagOptions}\n * />\n * ```\n */\n\nfunction Select(props: SelectProps) {\n\tconst {\n\t\tname,\n\t\toptions,\n\t\tclassName: wrapperClassName = \"\",\n\t\tplaceholder = \"Selecione...\",\n\t\tcloseOnSelect = true,\n\t\tdefaultValue = \"\",\n\t\terrorMessage: baseErrorMessage,\n\t\tisLoading = false,\n\t\treadOnly = false,\n\t\tisSearchable = false,\n\t\tid,\n\t\tlabel,\n\t\tshowAsterisk,\n\t\tleftIcon: LeftIcon,\n\t\tonSearch,\n\t\tonChange,\n\t\tonBlur,\n\t\tnotFoundText = \"Sem opções disponíveis\",\n\t\tonFocus,\n\t\tdisabled: baseDisabled = false,\n\t\tprefix,\n\t\tsize = \"md\",\n\t\tvalue,\n\t\tvariant = \"solid\",\n\t\torientation = \"vertical\",\n\t\tunShowFieldTemplate = false,\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\n\tconst selectRef = useRef<HTMLInputElement>(null);\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst generatedId = useId();\n\tconst selectId = id || generatedId;\n\tconst listboxId = `${selectId}-listbox`;\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst disabled = baseDisabled || isLoading || readOnly;\n\n\tconst iconSizes = { md: 20, lg: 20 };\n\tconst iconSize = iconSizes[size];\n\n\tconst [search, setSearch] = useState(\"\");\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst [selectedOption, setSelectedOption] = useState(defaultValue);\n\tconst [highlightedIndex, setHighlightedIndex] = useState(-1);\n\n\tconst forceSelectedOptions = value !== undefined ? value : selectedOption;\n\n\tfunction optionHasSelected(value: string) {\n\t\treturn forceSelectedOptions === value;\n\t}\n\n\tfunction getOptionLabel(value: string) {\n\t\tconst option = options.find((option) => option.value === value);\n\t\treturn option?.label || \"\";\n\t}\n\n\tfunction getOptionId(value: string) {\n\t\treturn `${listboxId}-option-${value.replace(/[^a-zA-Z0-9_-]/g, \"-\")}`;\n\t}\n\n\tfunction handleContainerFocus() {\n\t\tif (disabled || !selectRef?.current || isFocused) return;\n\t\tsetIsFocused(true);\n\t\tsetHighlightedIndex(-1);\n\t\tselectRef.current.focus();\n\t\tonFocus?.();\n\t}\n\n\tfunction handleBlur() {\n\t\tsetIsFocused(false);\n\t\tsetHighlightedIndex(-1);\n\t\tif (onBlur && selectRef.current) selectRef.current.blur();\n\t}\n\n\tfunction handleSearch(value: string) {\n\t\tsetSearch(value);\n\t\t// The visible option list is about to change, so drop the current\n\t\t// highlight instead of letting it point at a filtered-out option.\n\t\tsetHighlightedIndex(-1);\n\t\tif (onSearch) onSearch(value);\n\t}\n\n\tfunction handleChangeValue(value: string) {\n\t\tif (optionHasSelected(value)) {\n\t\t\tsetSelectedOption(\"\");\n\t\t\tif (onChange) onChange(\"\");\n\t\t} else {\n\t\t\tsetSelectedOption(value);\n\t\t\tif (onChange) onChange(value);\n\t\t}\n\n\t\tif (closeOnSelect) handleBlur();\n\t}\n\n\tconst mappedOptions = options.filter((option) => {\n\t\tif (props.onSearch) return true;\n\t\tif (!props.isSearchable) return true;\n\t\tif (option.label.toLowerCase().includes(search.toLowerCase())) return true;\n\t\treturn false;\n\t});\n\n\tfunction handleContainerKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n\t\tif (disabled) return;\n\n\t\tif (!isFocused) {\n\t\t\tif (e.key === \"Enter\" || e.key === \" \" || e.key === \"ArrowDown\") {\n\t\t\t\te.preventDefault();\n\t\t\t\thandleContainerFocus();\n\t\t\t\tif (e.key === \"ArrowDown\") setHighlightedIndex(0);\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tconst isTypingTarget = (e.target as HTMLElement)?.tagName === \"INPUT\";\n\t\t// When focus has moved onto an option/button directly (e.g. via Tab),\n\t\t// let that element handle its own native Enter/Space activation instead\n\t\t// of double-handling it here through the highlighted-index shortcut.\n\t\tconst isButtonTarget = (e.target as HTMLElement)?.tagName === \"BUTTON\";\n\n\t\tswitch (e.key) {\n\t\t\tcase \"Escape\":\n\t\t\t\te.preventDefault();\n\t\t\t\thandleBlur();\n\t\t\t\tcontainerRef.current?.focus();\n\t\t\t\tbreak;\n\t\t\tcase \"ArrowDown\":\n\t\t\t\te.preventDefault();\n\t\t\t\tsetHighlightedIndex((prev) => {\n\t\t\t\t\tif (mappedOptions.length === 0) return -1;\n\t\t\t\t\tif (prev < 0) return 0;\n\t\t\t\t\treturn prev + 1 >= mappedOptions.length ? 0 : prev + 1;\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\tcase \"ArrowUp\":\n\t\t\t\te.preventDefault();\n\t\t\t\tsetHighlightedIndex((prev) => {\n\t\t\t\t\tif (mappedOptions.length === 0) return -1;\n\t\t\t\t\tif (prev < 0) return mappedOptions.length - 1;\n\t\t\t\t\treturn prev - 1 < 0 ? mappedOptions.length - 1 : prev - 1;\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\tcase \" \":\n\t\t\t\tif (isTypingTarget || isButtonTarget) return;\n\t\t\t\te.preventDefault();\n\t\t\t\tif (highlightedIndex >= 0 && highlightedIndex < mappedOptions.length) {\n\t\t\t\t\thandleChangeValue(mappedOptions[highlightedIndex].value);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase \"Enter\":\n\t\t\t\tif (isButtonTarget) return;\n\t\t\t\te.preventDefault();\n\t\t\t\tif (highlightedIndex >= 0 && highlightedIndex < mappedOptions.length) {\n\t\t\t\t\thandleChangeValue(mappedOptions[highlightedIndex].value);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\tconst activeDescendantId =\n\t\thighlightedIndex >= 0 && highlightedIndex < mappedOptions.length\n\t\t\t? getOptionId(mappedOptions[highlightedIndex].value)\n\t\t\t: undefined;\n\n\treturn (\n\t\t<FieldTemplate\n\t\t\tname={name}\n\t\t\tlabel={label}\n\t\t\tshowAsterisk={showAsterisk}\n\t\t\tclassName={wrapperClassName}\n\t\t\terrorMessage={errorMessage}\n\t\t\tunShowFieldTemplate={unShowFieldTemplate}\n\t\t\torientation={orientation}\n\t\t>\n\t\t\t<SelectContainer\n\t\t\t\thandleContainerFocus={handleContainerFocus}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tisError={isError}\n\t\t\t\tisFocused={isFocused}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tsize={size}\n\t\t\t\tvariant={variant}\n\t\t\t\tprefixExists={!!prefix}\n\t\t\t\tid={selectId}\n\t\t\t\tcontainerRef={containerRef}\n\t\t\t\tonContainerKeyDown={handleContainerKeyDown}\n\t\t\t\ttabIndex={disabled ? -1 : 0}\n\t\t\t\tariaControls={listboxId}\n\t\t\t\tariaActiveDescendant={activeDescendantId}\n\t\t\t>\n\t\t\t\t<input\n\t\t\t\t\tref={selectRef}\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={forceSelectedOptions}\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={prefix} className=\"prefix\" />\n\n\t\t\t\t{LeftIcon && <LeftIcon size={iconSize} strokeWidth={2.5} />}\n\n\t\t\t\t<SelectContent size={size}>\n\t\t\t\t\t{forceSelectedOptions !== \"\" && (\n\t\t\t\t\t\t<p className=\"hasValue\">{getOptionLabel(forceSelectedOptions)}</p>\n\t\t\t\t\t)}\n\t\t\t\t\t{forceSelectedOptions === \"\" && <p>{placeholder}</p>}\n\t\t\t\t</SelectContent>\n\n\t\t\t\t<SelectOptionsContainer\n\t\t\t\t\tid={listboxId}\n\t\t\t\t\tisFocused={isFocused}\n\t\t\t\t\tisSearchable={isSearchable}\n\t\t\t\t\tsearch={search}\n\t\t\t\t\tonSearch={handleSearch}\n\t\t\t\t>\n\t\t\t\t\t{mappedOptions.map(({ label, value }, index) => (\n\t\t\t\t\t\t<SelectOption\n\t\t\t\t\t\t\tkey={value}\n\t\t\t\t\t\t\tid={getOptionId(value)}\n\t\t\t\t\t\t\tlabel={label}\n\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\t\tisHighlighted={index === highlightedIndex}\n\t\t\t\t\t\t\thandleChangeValue={handleChangeValue}\n\t\t\t\t\t\t\toptionHasSelected={optionHasSelected}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\n\t\t\t\t\t{mappedOptions.length <= 0 && <p>{notFoundText}</p>}\n\t\t\t\t</SelectOptionsContainer>\n\n\t\t\t\t<SelectChevron\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tisFocused={isFocused}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t/>\n\n\t\t\t\t<SelectSpinner iconSize={iconSize} isLoading={isLoading} />\n\t\t\t\t<SelectOverlay handleBlur={handleBlur} isFocused={isFocused} />\n\t\t\t</SelectContainer>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { Select };\n"],"mappings":"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"}

package/dist/modules/components/select/selectContainer/index.js

@@ -2,11 +2,19 @@
 import { jsx as e } from "react/jsx-runtime";
 //#region src/components/select/selectContainer/index.tsx
 function t(t) {
-	let { children: n, handleContainerFocus: r, disabled: i, isError: a, isLoading: o, isFocused: s, className: c, readOnly: l, variant: u, size: d, id: f, prefixExists: p } = t;
-	return /* @__PURE__ */ e("section", {
+	let { children: n, handleContainerFocus: r, disabled: i, isError: a, isLoading: o, isFocused: s, className: c, readOnly: l, variant: u, size: d, id: f, prefixExists: p, containerRef: m, onContainerKeyDown: h, tabIndex: g, ariaControls: _, ariaActiveDescendant: v } = t;
+	return /* @__PURE__ */ e("div", {
+		ref: m,
 		id: f,
+		tabIndex: g,
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-expanded": s,
+		"aria-controls": _,
+		"aria-activedescendant": v,
 		className: `arkynSelectContainer ${p ? "hasPrefix" : ""} ${u} ${d} ${i || l || o ? "opacity" : ""} ${a ? "errored" : ""} ${s ? "focused" : ""} ${c}`,
 		onClick: r,
+		onKeyDown: h,
 		children: n
 	});
 }

package/dist/modules/components/select/selectContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/select/selectContainer/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport \"./styles.css\";\n\ntype SelectContainerProps = {\n\tchildren: ReactNode;\n\thandleContainerFocus: () => void;\n\tprefixExists: boolean;\n\tisError: boolean;\n\tdisabled: boolean;\n\treadOnly: boolean;\n\tisLoading: boolean;\n\tisFocused: boolean;\n\tclassName?: string;\n\tid: string;\n\tvariant: \"solid\" | \"outline\" | \"underline\";\n\tsize: \"md\" | \"lg\";\n};\n\nfunction SelectContainer(props: SelectContainerProps) {\n\tconst {\n\t\tchildren,\n\t\thandleContainerFocus,\n\t\tdisabled,\n\t\tisError,\n\t\tisLoading,\n\t\tisFocused,\n\t\tclassName,\n\t\treadOnly,\n\t\tvariant,\n\t\tsize,\n\t\tid,\n\t\tprefixExists,\n\t} = props;\n\n\tconst hasPrefix = prefixExists ? \"hasPrefix\" : \"\";\n\tconst errored = isError ? \"errored\" : \"\";\n\tconst opacity = disabled || readOnly || isLoading ? \"opacity\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\n\treturn (\n\t\t<section\n\t\t\tid={id}\n\t\t\tclassName={`arkynSelectContainer ${hasPrefix} ${variant} ${size} ${opacity} ${errored} ${focused} ${className}`}\n\t\t\tonClick={handleContainerFocus}\n\t\t>\n\t\t\t{children}\n\t\t</section>\n\t);\n}\n\nexport { SelectContainer };\n"],"mappings":";;;AAkBA,SAAS,EAAgB,GAA6B;CACrD,IAAM,EACL,aACA,yBACA,aACA,YACA,cACA,cACA,cACA,aACA,YACA,SACA,OACA,oBACG;CAOJ,OACC,kBAAC,WAAD;EACK;EACJ,WAAW,wBARK,IAAe,cAAc,GAQA,GAAG,EAAQ,GAAG,EAAK,GANlD,KAAY,KAAY,IAAY,YAAY,GAMa,GAP7D,IAAU,YAAY,GAOkD,GALxE,IAAY,YAAY,GAK2D,GAAG;EACpG,SAAS;EAER;CACO,CAAA;AAEX"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/select/selectContainer/index.tsx"],"sourcesContent":["import type { KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport \"./styles.css\";\n\ntype SelectContainerProps = {\n\tchildren: ReactNode;\n\thandleContainerFocus: () => void;\n\tprefixExists: boolean;\n\tisError: boolean;\n\tdisabled: boolean;\n\treadOnly: boolean;\n\tisLoading: boolean;\n\tisFocused: boolean;\n\tclassName?: string;\n\tid: string;\n\tvariant: \"solid\" | \"outline\" | \"underline\";\n\tsize: \"md\" | \"lg\";\n\tcontainerRef?: RefObject<HTMLDivElement | null>;\n\tonContainerKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n\ttabIndex?: number;\n\tariaControls?: string;\n\tariaActiveDescendant?: string;\n};\n\nfunction SelectContainer(props: SelectContainerProps) {\n\tconst {\n\t\tchildren,\n\t\thandleContainerFocus,\n\t\tdisabled,\n\t\tisError,\n\t\tisLoading,\n\t\tisFocused,\n\t\tclassName,\n\t\treadOnly,\n\t\tvariant,\n\t\tsize,\n\t\tid,\n\t\tprefixExists,\n\t\tcontainerRef,\n\t\tonContainerKeyDown,\n\t\ttabIndex,\n\t\tariaControls,\n\t\tariaActiveDescendant,\n\t} = props;\n\n\tconst hasPrefix = prefixExists ? \"hasPrefix\" : \"\";\n\tconst errored = isError ? \"errored\" : \"\";\n\tconst opacity = disabled || readOnly || isLoading ? \"opacity\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\n\treturn (\n\t\t<div\n\t\t\tref={containerRef}\n\t\t\tid={id}\n\t\t\ttabIndex={tabIndex}\n\t\t\trole=\"combobox\"\n\t\t\taria-haspopup=\"listbox\"\n\t\t\taria-expanded={isFocused}\n\t\t\taria-controls={ariaControls}\n\t\t\taria-activedescendant={ariaActiveDescendant}\n\t\t\tclassName={`arkynSelectContainer ${hasPrefix} ${variant} ${size} ${opacity} ${errored} ${focused} ${className}`}\n\t\t\tonClick={handleContainerFocus}\n\t\t\tonKeyDown={onContainerKeyDown}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nexport { SelectContainer };\n"],"mappings":";;;AAuBA,SAAS,EAAgB,GAA6B;CACrD,IAAM,EACL,aACA,yBACA,aACA,YACA,cACA,cACA,cACA,aACA,YACA,SACA,OACA,iBACA,iBACA,uBACA,aACA,iBACA,4BACG;CAOJ,OACC,kBAAC,OAAD;EACC,KAAK;EACD;EACM;EACV,MAAK;EACL,iBAAc;EACd,iBAAe;EACf,iBAAe;EACf,yBAAuB;EACvB,WAAW,wBAfK,IAAe,cAAc,GAeA,GAAG,EAAQ,GAAG,EAAK,GAblD,KAAY,KAAY,IAAY,YAAY,GAaa,GAd7D,IAAU,YAAY,GAckD,GAZxE,IAAY,YAAY,GAY2D,GAAG;EACpG,SAAS;EACT,WAAW;EAEV;CACG,CAAA;AAEP"}

package/dist/modules/components/select/selectOption/index.js

@@ -3,11 +3,14 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import { Check as n } from "lucide-react";
 //#region src/components/select/selectOption/index.tsx
 function r(r) {
-	let { label: i, optionHasSelected: a, handleChangeValue: o, value: s, size: c } = r;
+	let { label: i, optionHasSelected: a, handleChangeValue: o, value: s, size: c, id: l, isHighlighted: u = !1 } = r, d = a(s);
 	return /* @__PURE__ */ t("button", {
 		type: "button",
+		id: l,
+		role: "option",
+		"aria-selected": d,
 		onClick: () => o(s),
-		className: `arkynSelectOption ${c} ${a(s) ? "active" : ""}`,
+		className: `arkynSelectOption ${c} ${d ? "active" : ""} ${u ? "highlighted" : ""}`,
 		children: [
 			i,
 			" ",

package/dist/modules/components/select/selectOption/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/select/selectOption/index.tsx"],"sourcesContent":["import { Check } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype SelectOptionProps = {\n\tvalue: string;\n\tlabel: string;\n\tsize: \"md\" | \"lg\";\n\toptionHasSelected: (value: string) => boolean;\n\thandleChangeValue: (value: string) => void;\n};\n\nfunction SelectOption(props: SelectOptionProps) {\n\tconst { label, optionHasSelected, handleChangeValue, value, size } = props;\n\n\tconst hasActive = optionHasSelected(value) ? \"active\" : \"\";\n\tconst className = `arkynSelectOption ${size} ${hasActive}`;\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={() => handleChangeValue(value)}\n\t\t\tclassName={className}\n\t\t>\n\t\t\t{label} <Check />\n\t\t</button>\n\t);\n}\n\nexport { SelectOption };\n"],"mappings":";;;;AAWA,SAAS,EAAa,GAA0B;CAC/C,IAAM,EAAE,UAAO,sBAAmB,sBAAmB,UAAO,YAAS;CAKrE,OACC,kBAAC,UAAD;EACC,MAAK;EACL,eAAe,EAAkB,CAAK;EAC3B,WAAA,qBAN0B,EAAK,GAD1B,EAAkB,CAAK,IAAI,WAAW;YAIvD;GAKE;GAAM;GAAC,kBAAC,GAAD,CAAQ,CAAA;EACT;;AAEV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/select/selectOption/index.tsx"],"sourcesContent":["import { Check } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype SelectOptionProps = {\n\tvalue: string;\n\tlabel: string;\n\tsize: \"md\" | \"lg\";\n\tid?: string;\n\tisHighlighted?: boolean;\n\toptionHasSelected: (value: string) => boolean;\n\thandleChangeValue: (value: string) => void;\n};\n\nfunction SelectOption(props: SelectOptionProps) {\n\tconst {\n\t\tlabel,\n\t\toptionHasSelected,\n\t\thandleChangeValue,\n\t\tvalue,\n\t\tsize,\n\t\tid,\n\t\tisHighlighted = false,\n\t} = props;\n\n\tconst isSelected = optionHasSelected(value);\n\tconst hasActive = isSelected ? \"active\" : \"\";\n\tconst highlighted = isHighlighted ? \"highlighted\" : \"\";\n\tconst className = `arkynSelectOption ${size} ${hasActive} ${highlighted}`;\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tid={id}\n\t\t\trole=\"option\"\n\t\t\taria-selected={isSelected}\n\t\t\tonClick={() => handleChangeValue(value)}\n\t\t\tclassName={className}\n\t\t>\n\t\t\t{label} <Check />\n\t\t</button>\n\t);\n}\n\nexport { SelectOption };\n"],"mappings":";;;;AAaA,SAAS,EAAa,GAA0B;CAC/C,IAAM,EACL,UACA,sBACA,sBACA,UACA,SACA,OACA,mBAAgB,OACb,GAEE,IAAa,EAAkB,CAAK;CAK1C,OACC,kBAAC,UAAD;EACC,MAAK;EACD;EACJ,MAAK;EACL,iBAAe;EACf,eAAe,EAAkB,CAAK;EAC3B,WAAA,qBAT0B,EAAK,GAF1B,IAAa,WAAW,GAEe,GADrC,IAAgB,gBAAgB;YAInD;GAQE;GAAM;GAAC,kBAAC,GAAD,CAAQ,CAAA;EACT;;AAEV"}

package/dist/modules/components/select/selectOption/styles.css

@@ -1 +1 @@
-@layer arkyn{.arkynSelectOption{color:var(--text-body,#52525b);background-color:inherit;-webkit-user-select:none;user-select:none;border:none;justify-content:space-between;align-items:center;font-weight:400;line-height:21.79px;display:flex}.arkynSelectOption.md{padding:8px 16px;font-size:14px}.arkynSelectOption.lg{padding:8px 16px;font-size:16px}.arkynSelectOption svg{width:20px;height:20px;color:rgb(var(--spotlight-primary,17, 109, 220));display:none}.arkynSelectOption:hover{cursor:pointer;filter:brightness(.98)}.arkynSelectOption.active{color:var(--text-heading,#09090b);filter:brightness(.95);font-weight:600}.arkynSelectOption.active svg{display:unset}html.dark .arkynSelectOption:hover,html.dark .arkynSelectOption.active{filter:brightness(1.2)}}
+@layer arkyn{.arkynSelectOption{color:var(--text-body,#52525b);background-color:inherit;-webkit-user-select:none;user-select:none;border:none;justify-content:space-between;align-items:center;font-weight:400;line-height:21.79px;display:flex}.arkynSelectOption.md{padding:8px 16px;font-size:14px}.arkynSelectOption.lg{padding:8px 16px;font-size:16px}.arkynSelectOption svg{width:20px;height:20px;color:rgb(var(--spotlight-primary,17, 109, 220));display:none}.arkynSelectOption:hover{cursor:pointer;filter:brightness(.98)}.arkynSelectOption.active{color:var(--text-heading,#09090b);filter:brightness(.95);font-weight:600}.arkynSelectOption.active svg{display:unset}.arkynSelectOption.highlighted{filter:brightness(.98)}html.dark .arkynSelectOption:hover,html.dark .arkynSelectOption.active,html.dark .arkynSelectOption.highlighted{filter:brightness(1.2)}}

package/dist/modules/components/select/selectOptionsContainer/index.js

@@ -6,29 +6,31 @@ import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { Search as s } from "lucide-react";
 //#region src/components/select/selectOptionsContainer/index.tsx
 function c(c) {
-	let { children: l, isFocused: u, isSearchable: d, search: f, onSearch: p } = c, m = r(null), [h, g] = i("bottom");
-	e(u), n(() => {
-		u && (() => {
-			if (!m.current) return;
-			let e = m.current.parentElement;
+	let { children: l, id: u, isFocused: d, isSearchable: f, search: p, onSearch: m } = c, h = r(null), [g, _] = i("bottom");
+	e(d), n(() => {
+		d && (() => {
+			if (!h.current) return;
+			let e = h.current.parentElement;
 			if (!e) return;
 			let t = e.getBoundingClientRect();
-			window.innerHeight - t.bottom < 300 && t.top > 300 ? g("top") : g("bottom");
+			window.innerHeight - t.bottom < 300 && t.top > 300 ? _("top") : _("bottom");
 		})();
-	}, [u]);
-	function _(e) {
-		d && p(e.target.value);
+	}, [d]);
+	function v(e) {
+		f && m(e.target.value);
 	}
-	return u ? /* @__PURE__ */ o("div", {
-		ref: m,
-		className: `arkynSelectOptionsContainer ${h}`,
-		children: [d && /* @__PURE__ */ a(t, {
+	return d ? /* @__PURE__ */ o("div", {
+		ref: h,
+		id: u,
+		role: "listbox",
+		className: `arkynSelectOptionsContainer ${g}`,
+		children: [f && /* @__PURE__ */ a(t, {
 			type: "search",
 			name: "search-select",
 			variant: "underline",
 			leftIcon: s,
-			value: f,
-			onChange: _
+			value: p,
+			onChange: v
 		}), l]
 	}) : null;
 }

package/dist/modules/components/select/selectOptionsContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/select/selectOptionsContainer/index.tsx"],"sourcesContent":["import { Search } from \"lucide-react\";\nimport {\n\ttype ChangeEvent,\n\ttype ReactNode,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { useScrollLock } from \"../../../hooks/useScrollLock\";\nimport { Input } from \"../../input\";\n\nimport \"./styles.css\";\n\ntype SelectOptionsContainerProps = {\n\tisFocused: boolean;\n\tisSearchable: boolean;\n\tchildren: ReactNode;\n\tsearch: string;\n\tonSearch: (value: string) => void;\n};\n\nfunction SelectOptionsContainer(props: SelectOptionsContainerProps) {\n\tconst { children, isFocused, isSearchable, search, onSearch } = props;\n\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst [position, setPosition] = useState<\"bottom\" | \"top\">(\"bottom\");\n\n\tuseScrollLock(isFocused);\n\n\tuseEffect(() => {\n\t\tif (!isFocused) return;\n\n\t\tconst checkContainerPosition = () => {\n\t\t\tif (!containerRef.current) return;\n\n\t\t\tconst parentElement = containerRef.current.parentElement;\n\t\t\tif (!parentElement) return;\n\n\t\t\tconst parentRect = parentElement.getBoundingClientRect();\n\t\t\tconst viewportHeight = window.innerHeight;\n\n\t\t\tconst estimatedContainerHeight = 300;\n\t\t\tconst spaceBelow = viewportHeight - parentRect.bottom;\n\n\t\t\tif (\n\t\t\t\tspaceBelow < estimatedContainerHeight &&\n\t\t\t\tparentRect.top > estimatedContainerHeight\n\t\t\t) {\n\t\t\t\tsetPosition(\"top\");\n\t\t\t} else {\n\t\t\t\tsetPosition(\"bottom\");\n\t\t\t}\n\t\t};\n\n\t\tcheckContainerPosition();\n\t}, [isFocused]);\n\n\tfunction handleSearch(e: ChangeEvent<HTMLInputElement>) {\n\t\tif (!isSearchable) return;\n\t\tonSearch(e.target.value);\n\t}\n\n\tif (!isFocused) return null;\n\n\treturn (\n\t\t<div\n\t\t\tref={containerRef}\n\t\t\tclassName={`arkynSelectOptionsContainer ${position}`}\n\t\t>\n\t\t\t{isSearchable && (\n\t\t\t\t<Input\n\t\t\t\t\ttype=\"search\"\n\t\t\t\t\tname=\"search-select\"\n\t\t\t\t\tvariant=\"underline\"\n\t\t\t\t\tleftIcon={Search}\n\t\t\t\t\tvalue={search}\n\t\t\t\t\tonChange={handleSearch}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nexport { SelectOptionsContainer };\n"],"mappings":";;;;;;;AAsBA,SAAS,EAAuB,GAAoC;CACnE,IAAM,EAAE,aAAU,cAAW,iBAAc,WAAQ,gBAAa,GAE1D,IAAe,EAAuB,IAAI,GAC1C,CAAC,GAAU,KAAe,EAA2B,QAAQ;CAInE,AAFA,EAAc,CAAS,GAEvB,QAAgB;EACV,YAEgC;GACpC,IAAI,CAAC,EAAa,SAAS;GAE3B,IAAM,IAAgB,EAAa,QAAQ;GAC3C,IAAI,CAAC,GAAe;GAEpB,IAAM,IAAa,EAAc,sBAAsB;GAMvD,AALuB,OAAO,cAGM,EAAW,SAGjC,OACb,EAAW,MAAM,MAEjB,EAAY,KAAK,IAEjB,EAAY,QAAQ;EAEtB,EAEA,CAAuB;CACxB,GAAG,CAAC,CAAS,CAAC;CAEd,SAAS,EAAa,GAAkC;EAClD,KACL,EAAS,EAAE,OAAO,KAAK;CACxB;CAIA,OAFK,IAGJ,kBAAC,OAAD;EACC,KAAK;EACL,WAAW,+BAA+B;YAF3C,CAIE,KACA,kBAAC,GAAD;GACC,MAAK;GACL,MAAK;GACL,SAAQ;GACR,UAAU;GACV,OAAO;GACP,UAAU;EACV,CAAA,GAGD,CACG;MAnBiB;AAqBxB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/select/selectOptionsContainer/index.tsx"],"sourcesContent":["import { Search } from \"lucide-react\";\nimport {\n\ttype ChangeEvent,\n\ttype ReactNode,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { useScrollLock } from \"../../../hooks/useScrollLock\";\nimport { Input } from \"../../input\";\n\nimport \"./styles.css\";\n\ntype SelectOptionsContainerProps = {\n\tid?: string;\n\tisFocused: boolean;\n\tisSearchable: boolean;\n\tchildren: ReactNode;\n\tsearch: string;\n\tonSearch: (value: string) => void;\n};\n\nfunction SelectOptionsContainer(props: SelectOptionsContainerProps) {\n\tconst { children, id, isFocused, isSearchable, search, onSearch } = props;\n\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst [position, setPosition] = useState<\"bottom\" | \"top\">(\"bottom\");\n\n\tuseScrollLock(isFocused);\n\n\tuseEffect(() => {\n\t\tif (!isFocused) return;\n\n\t\tconst checkContainerPosition = () => {\n\t\t\tif (!containerRef.current) return;\n\n\t\t\tconst parentElement = containerRef.current.parentElement;\n\t\t\tif (!parentElement) return;\n\n\t\t\tconst parentRect = parentElement.getBoundingClientRect();\n\t\t\tconst viewportHeight = window.innerHeight;\n\n\t\t\tconst estimatedContainerHeight = 300;\n\t\t\tconst spaceBelow = viewportHeight - parentRect.bottom;\n\n\t\t\tif (\n\t\t\t\tspaceBelow < estimatedContainerHeight &&\n\t\t\t\tparentRect.top > estimatedContainerHeight\n\t\t\t) {\n\t\t\t\tsetPosition(\"top\");\n\t\t\t} else {\n\t\t\t\tsetPosition(\"bottom\");\n\t\t\t}\n\t\t};\n\n\t\tcheckContainerPosition();\n\t}, [isFocused]);\n\n\tfunction handleSearch(e: ChangeEvent<HTMLInputElement>) {\n\t\tif (!isSearchable) return;\n\t\tonSearch(e.target.value);\n\t}\n\n\tif (!isFocused) return null;\n\n\treturn (\n\t\t<div\n\t\t\tref={containerRef}\n\t\t\tid={id}\n\t\t\trole=\"listbox\"\n\t\t\tclassName={`arkynSelectOptionsContainer ${position}`}\n\t\t>\n\t\t\t{isSearchable && (\n\t\t\t\t<Input\n\t\t\t\t\ttype=\"search\"\n\t\t\t\t\tname=\"search-select\"\n\t\t\t\t\tvariant=\"underline\"\n\t\t\t\t\tleftIcon={Search}\n\t\t\t\t\tvalue={search}\n\t\t\t\t\tonChange={handleSearch}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nexport { SelectOptionsContainer };\n"],"mappings":";;;;;;;AAuBA,SAAS,EAAuB,GAAoC;CACnE,IAAM,EAAE,aAAU,OAAI,cAAW,iBAAc,WAAQ,gBAAa,GAE9D,IAAe,EAAuB,IAAI,GAC1C,CAAC,GAAU,KAAe,EAA2B,QAAQ;CAInE,AAFA,EAAc,CAAS,GAEvB,QAAgB;EACV,YAEgC;GACpC,IAAI,CAAC,EAAa,SAAS;GAE3B,IAAM,IAAgB,EAAa,QAAQ;GAC3C,IAAI,CAAC,GAAe;GAEpB,IAAM,IAAa,EAAc,sBAAsB;GAMvD,AALuB,OAAO,cAGM,EAAW,SAGjC,OACb,EAAW,MAAM,MAEjB,EAAY,KAAK,IAEjB,EAAY,QAAQ;EAEtB,EAEA,CAAuB;CACxB,GAAG,CAAC,CAAS,CAAC;CAEd,SAAS,EAAa,GAAkC;EAClD,KACL,EAAS,EAAE,OAAO,KAAK;CACxB;CAIA,OAFK,IAGJ,kBAAC,OAAD;EACC,KAAK;EACD;EACJ,MAAK;EACL,WAAW,+BAA+B;YAJ3C,CAME,KACA,kBAAC,GAAD;GACC,MAAK;GACL,MAAK;GACL,SAAQ;GACR,UAAU;GACV,OAAO;GACP,UAAU;EACV,CAAA,GAGD,CACG;MArBiB;AAuBxB"}

package/dist/modules/components/select/styles.css

@@ -10,7 +10,7 @@
 
 @layer arkyn{.arkynSelectContent{flex-wrap:wrap;flex:1;align-items:start;gap:4px;display:flex}.arkynSelectContent>p{color:var(--text-muted,#a1a1aa);-webkit-user-select:none;user-select:none;font-weight:400}.arkynSelectContent>p.hasValue{color:var(--text-body,#52525b)}.arkynSelectContent.md>p{font-size:14px;line-height:14px}.arkynSelectContent.lg>p{font-size:16px;line-height:16px}}
 
-@layer arkyn{.arkynSelectOption{color:var(--text-body,#52525b);background-color:inherit;-webkit-user-select:none;user-select:none;border:none;justify-content:space-between;align-items:center;font-weight:400;line-height:21.79px;display:flex}.arkynSelectOption.md{padding:8px 16px;font-size:14px}.arkynSelectOption.lg{padding:8px 16px;font-size:16px}.arkynSelectOption svg{width:20px;height:20px;color:rgb(var(--spotlight-primary,17, 109, 220));display:none}.arkynSelectOption:hover{cursor:pointer;filter:brightness(.98)}.arkynSelectOption.active{color:var(--text-heading,#09090b);filter:brightness(.95);font-weight:600}.arkynSelectOption.active svg{display:unset}html.dark .arkynSelectOption:hover,html.dark .arkynSelectOption.active{filter:brightness(1.2)}}
+@layer arkyn{.arkynSelectOption{color:var(--text-body,#52525b);background-color:inherit;-webkit-user-select:none;user-select:none;border:none;justify-content:space-between;align-items:center;font-weight:400;line-height:21.79px;display:flex}.arkynSelectOption.md{padding:8px 16px;font-size:14px}.arkynSelectOption.lg{padding:8px 16px;font-size:16px}.arkynSelectOption svg{width:20px;height:20px;color:rgb(var(--spotlight-primary,17, 109, 220));display:none}.arkynSelectOption:hover{cursor:pointer;filter:brightness(.98)}.arkynSelectOption.active{color:var(--text-heading,#09090b);filter:brightness(.95);font-weight:600}.arkynSelectOption.active svg{display:unset}.arkynSelectOption.highlighted{filter:brightness(.98)}html.dark .arkynSelectOption:hover,html.dark .arkynSelectOption.active,html.dark .arkynSelectOption.highlighted{filter:brightness(1.2)}}
 
 @layer arkyn{.arkynSelectOptionsContainer{z-index:7;border:1px solid var(--border,#e2e8f0);background-color:var(--background-foreground,#fff);border-radius:6px;flex-direction:column;flex:1;height:max-content;max-height:300px;list-style:none;display:flex;position:absolute;left:-2px;right:-2px;overflow:auto;box-shadow:0 4px 8px #0000001a}.arkynSelectOptionsContainer.bottom{top:calc(100% + 5px)}.arkynSelectOptionsContainer.top{bottom:calc(100% + 5px)}.arkynSelectOptionsContainer>p{text-align:center;color:var(--text-body,#52525b);padding:16px;font-size:14px;font-weight:400;line-height:21.79px}}
 

package/dist/modules/hooks/useEscapeKey.js

@@ -0,0 +1,18 @@
+import { useEffect as e, useRef as t } from "react";
+//#region src/hooks/useEscapeKey.ts
+function n(n, r) {
+	let i = t(r);
+	i.current = r, e(() => {
+		if (!n) return;
+		function e(e) {
+			e.key === "Escape" && i.current();
+		}
+		return document.addEventListener("keydown", e), () => {
+			document.removeEventListener("keydown", e);
+		};
+	}, [n]);
+}
+//#endregion
+export { n as useEscapeKey };
+
+//# sourceMappingURL=useEscapeKey.js.map

package/dist/modules/hooks/useEscapeKey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEscapeKey.js","names":[],"sources":["../../../src/hooks/useEscapeKey.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\n/**\n * useEscapeKey, invokes a callback when the `Escape` key is pressed while active.\n *\n * Listens on `document`, so it fires regardless of which descendant currently\n * has focus. The callback is always the latest one passed in, without\n * re-attaching the listener on every render.\n *\n * Used internally by `ModalContainer`, `DrawerContainer`, and `Popover` to\n * close the overlay on Escape.\n *\n * @param isActive - When `true`, the Escape key listener is attached.\n * @param onEscape - Called when Escape is pressed while `isActive` is `true`.\n *\n * @example\n * ```tsx\n * function CustomOverlay({ isOpen, onClose }) {\n *   useEscapeKey(isOpen, onClose);\n *   return isOpen ? <div role=\"dialog\">...</div> : null;\n * }\n * ```\n */\n\nfunction useEscapeKey(isActive: boolean, onEscape: () => void): void {\n\tconst onEscapeRef = useRef(onEscape);\n\tonEscapeRef.current = onEscape;\n\n\tuseEffect(() => {\n\t\tif (!isActive) return;\n\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.key === \"Escape\") onEscapeRef.current();\n\t\t}\n\n\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"keydown\", handleKeyDown);\n\t\t};\n\t}, [isActive]);\n}\n\nexport { useEscapeKey };\n"],"mappings":";;AAwBA,SAAS,EAAa,GAAmB,GAA4B;CACpE,IAAM,IAAc,EAAO,CAAQ;CAGnC,AAFA,EAAY,UAAU,GAEtB,QAAgB;EACf,IAAI,CAAC,GAAU;EAEf,SAAS,EAAc,GAAsB;GAC5C,AAAI,EAAM,QAAQ,YAAU,EAAY,QAAQ;EACjD;EAIA,OAFA,SAAS,iBAAiB,WAAW,CAAa,SAErC;GACZ,SAAS,oBAAoB,WAAW,CAAa;EACtD;CACD,GAAG,CAAC,CAAQ,CAAC;AACd"}

package/dist/modules/hooks/useFocusTrap.js

@@ -0,0 +1,44 @@
+import { useEffect as e, useRef as t } from "react";
+//#region src/hooks/useFocusTrap.ts
+var n = [
+	"a[href]",
+	"area[href]",
+	"button:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"iframe",
+	"[tabindex]:not([tabindex='-1'])"
+].join(", ");
+function r(e) {
+	return Array.from(e.querySelectorAll(n));
+}
+function i(n, i) {
+	let a = t(null);
+	e(() => {
+		if (!n) return;
+		let e = i.current;
+		if (!e) return;
+		let t = e;
+		a.current = document.activeElement;
+		let [o] = r(t);
+		(o ?? t).focus();
+		function s(e) {
+			if (e.key !== "Tab") return;
+			let n = r(t);
+			if (n.length === 0) {
+				e.preventDefault(), t.focus();
+				return;
+			}
+			let i = n[0], a = n[n.length - 1], o = document.activeElement;
+			e.shiftKey && o === i ? (e.preventDefault(), a.focus()) : !e.shiftKey && o === a && (e.preventDefault(), i.focus());
+		}
+		return document.addEventListener("keydown", s), () => {
+			document.removeEventListener("keydown", s), a.current?.focus(), a.current = null;
+		};
+	}, [n, i]);
+}
+//#endregion
+export { i as useFocusTrap };
+
+//# sourceMappingURL=useFocusTrap.js.map

package/dist/modules/hooks/useFocusTrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusTrap.js","names":[],"sources":["../../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef } from \"react\";\n\nconst FOCUSABLE_SELECTOR = [\n\t\"a[href]\",\n\t\"area[href]\",\n\t\"button:not([disabled])\",\n\t\"input:not([disabled])\",\n\t\"select:not([disabled])\",\n\t\"textarea:not([disabled])\",\n\t\"iframe\",\n\t\"[tabindex]:not([tabindex='-1'])\",\n].join(\", \");\n\nfunction getFocusableElements(container: HTMLElement): HTMLElement[] {\n\treturn Array.from(\n\t\tcontainer.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n\t);\n}\n\n/**\n * useFocusTrap, keeps keyboard focus inside a container while `isActive`.\n *\n * On activation, saves the currently focused element and moves focus to the\n * first focusable descendant of `containerRef.current` (or to the container\n * itself when it has none). While active, `Tab`/`Shift+Tab` cycle focus\n * between the first and last focusable descendants instead of leaving the\n * container. On deactivation (or unmount), focus is restored to the element\n * that was focused right before activation.\n *\n * Used internally by `ModalContainer`, `DrawerContainer`, and `Popover`.\n *\n * @param isActive - When `true`, focus is moved into and trapped inside the container.\n * @param containerRef - Ref to the container that should trap focus. Give the element `tabIndex={-1}` so it can still receive focus when it has no focusable children.\n *\n * @example\n * ```tsx\n * function CustomOverlay({ isOpen }) {\n *   const containerRef = useRef<HTMLDivElement>(null);\n *   useFocusTrap(isOpen, containerRef);\n *   return isOpen ? <div ref={containerRef} tabIndex={-1}>...</div> : null;\n * }\n * ```\n */\n\nfunction useFocusTrap(\n\tisActive: boolean,\n\tcontainerRef: RefObject<HTMLElement | null>,\n): void {\n\tconst previouslyFocused = useRef<HTMLElement | null>(null);\n\n\tuseEffect(() => {\n\t\tif (!isActive) return;\n\n\t\tconst container: HTMLElement | null = containerRef.current;\n\t\tif (!container) return;\n\t\tconst dialogNode: HTMLElement = container;\n\n\t\tpreviouslyFocused.current = document.activeElement as HTMLElement | null;\n\n\t\tconst [firstFocusable] = getFocusableElements(dialogNode);\n\t\t(firstFocusable ?? dialogNode).focus();\n\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.key !== \"Tab\") return;\n\n\t\t\tconst focusable = getFocusableElements(dialogNode);\n\n\t\t\tif (focusable.length === 0) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tdialogNode.focus();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst first = focusable[0];\n\t\t\tconst last = focusable[focusable.length - 1];\n\t\t\tconst active = document.activeElement;\n\n\t\t\tif (event.shiftKey && active === first) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tlast.focus();\n\t\t\t} else if (!event.shiftKey && active === last) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tfirst.focus();\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"keydown\", handleKeyDown);\n\t\t\tpreviouslyFocused.current?.focus();\n\t\t\tpreviouslyFocused.current = null;\n\t\t};\n\t}, [isActive, containerRef]);\n}\n\nexport { useFocusTrap };\n"],"mappings":";;AAEA,IAAM,IAAqB;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACD,CAAC,CAAC,KAAK,IAAI;AAEX,SAAS,EAAqB,GAAuC;CACpE,OAAO,MAAM,KACZ,EAAU,iBAA8B,CAAkB,CAC3D;AACD;AA2BA,SAAS,EACR,GACA,GACO;CACP,IAAM,IAAoB,EAA2B,IAAI;CAEzD,QAAgB;EACf,IAAI,CAAC,GAAU;EAEf,IAAM,IAAgC,EAAa;EACnD,IAAI,CAAC,GAAW;EAChB,IAAM,IAA0B;EAEhC,EAAkB,UAAU,SAAS;EAErC,IAAM,CAAC,KAAkB,EAAqB,CAAU;EACxD,CAAC,KAAkB,EAAA,CAAY,MAAM;EAErC,SAAS,EAAc,GAAsB;GAC5C,IAAI,EAAM,QAAQ,OAAO;GAEzB,IAAM,IAAY,EAAqB,CAAU;GAEjD,IAAI,EAAU,WAAW,GAAG;IAE3B,AADA,EAAM,eAAe,GACrB,EAAW,MAAM;IACjB;GACD;GAEA,IAAM,IAAQ,EAAU,IAClB,IAAO,EAAU,EAAU,SAAS,IACpC,IAAS,SAAS;GAExB,AAAI,EAAM,YAAY,MAAW,KAChC,EAAM,eAAe,GACrB,EAAK,MAAM,KACD,CAAC,EAAM,YAAY,MAAW,MACxC,EAAM,eAAe,GACrB,EAAM,MAAM;EAEd;EAIA,OAFA,SAAS,iBAAiB,WAAW,CAAa,SAErC;GAGZ,AAFA,SAAS,oBAAoB,WAAW,CAAa,GACrD,EAAkB,SAAS,MAAM,GACjC,EAAkB,UAAU;EAC7B;CACD,GAAG,CAAC,GAAU,CAAY,CAAC;AAC5B"}