npm - @arkyn/components - Versions diffs - 3.0.8 → 3.0.10 - Mend

@arkyn/components 3.0.8 → 3.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (108) hide show

package/dist/modules/components/richText/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/richText/index.tsx"],"sourcesContent":["import { isHotkey } from \"is-hotkey\";\nimport {\n\tAlignCenter,\n\tAlignJustify,\n\tAlignLeft,\n\tAlignRight,\n\tBold,\n\tCode,\n\tHeading1,\n\tHeading2,\n\tItalic,\n\tQuote,\n\tUnderline,\n} from \"lucide-react\";\nimport { useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport { createEditor, type Descendant } from \"slate\";\nimport { withHistory } from \"slate-history\";\nimport { Editable, Slate, withReact } from \"slate-react\";\nimport { useForm } from \"../../hooks/useForm\";\nimport { clearLinkMarkAtBoundary } from \"../../services/clearLinkMarkAtBoundary\";\nimport { extractTextFromNode } from \"../../services/extractTextFromNode\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport { toggleMark } from \"../../services/toggleMark\";\nimport { hotKeys, initialValue } from \"../../templates/richTextTemplates\";\nimport type {\n\tRichTextHiddenButtonKey,\n\tRichTextProps,\n} from \"../../types/richTextTypes\";\nimport { BlockButton } from \"./blockButton\";\nimport { Element } from \"./element\";\nimport { InsertImage } from \"./insertImage\";\nimport { InsertLink } from \"./insertLink\";\nimport { InsertVideo } from \"./insertVideo\";\nimport { Leaf } from \"./leaf\";\nimport { MarkButton } from \"./markButton\";\nimport { Toolbar } from \"./toolbar\";\nimport \"./styles.css\";\n\n/*\n RichText, WYSIWYG rich-text editor built on Slate.js with a configurable toolbar.\n \n Toolbar features: bold, italic, underline, code, H1/H2, block quote, alignment (left/center/right/justify), image, video, and link insertion.\n * Pressing Space or Enter right after a link automatically stops new text from continuing to be part of that link.\n \n Editor content is stored as a Slate JSON string in a hidden `<input>` for form submission.\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.label - Label text displayed above the editor.\n * @param props.hiddenButtons - Toolbar button keys to hide (e.g. `[\"image\", \"code\"]`).\n * @param props.imageConfig - Enables image insertion; contains the upload endpoint and modal labels.\n * @param props.videoConfig - Customizes the video insertion modal labels.\n * @param props.linkConfig - Customizes the link insertion modal labels.\n * @param props.defaultValue - Initial editor content as a Slate JSON string. Default: \"[]\"\n * @param props.maxLimit - Maximum character count. Default: 10000\n * @param props.enforceCharacterLimit - Prevents typing past `maxLimit`. Default: false\n * @param props.onChangeCharactersCount - Callback fired on every keystroke, receives the current character count.\n * @param props.onChange - Callback fired when editor content changes, receives the Slate `Descendant[]`.\n * @param props.baseErrorMessage - Custom error message (overrides `useForm` context error).\n * @param props.isError - Forces the error visual state.\n * @param props.id - Custom id for the editable area element.\n * @param props.showAsterisk - Appends `` to the label.\n @param props.orientation - Layout direction. Default: \"horizontal\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n \n @returns RichText JSX element wrapped in `FieldTemplate`.\n \n @example\n * ```tsx\n * // Basic\n * <RichText name=\"content\" />\n \n // With character limit and hidden toolbar buttons\n * <RichText\n * name=\"description\"\n * label=\"Description\"\n * maxLimit={500}\n * enforceCharacterLimit\n * hiddenButtons={[\"image\", \"video\", \"code\"]}\n * onChangeCharactersCount={(n) => setCharCount(n)}\n * />\n \n // With image upload support\n * <RichText\n * name=\"article\"\n * label=\"Article Body\"\n * imageConfig={{ action: \"/api/upload\" }}\n * />\n \n // With custom link insertion modal labels\n * <RichText\n * name=\"article\"\n * label=\"Article Body\"\n * linkConfig={{ modalTitle: \"Add a link\" }}\n * />\n * ```\n */\n\nfunction RichText(props: RichTextProps) {\n\tconst {\n\t\tname,\n\t\thiddenButtons,\n\t\timageConfig,\n\t\tvideoConfig,\n\t\tlinkConfig,\n\t\tclassName: wrapperClassName = \"\",\n\t\tdefaultValue = \"[]\",\n\t\tenforceCharacterLimit = false,\n\t\tonChangeCharactersCount,\n\t\tbaseErrorMessage,\n\t\tmaxLimit = 10000,\n\t\tonChange,\n\t\tisError: baseIsError,\n\t\tlabel,\n\t\tshowAsterisk,\n\t\tid,\n\t\torientation = \"vertical\",\n\t\tunShowFieldTemplate = false,\n\t} = props;\n\n\tconst editor = useMemo(() => withHistory(withReact(createEditor())), []);\n\n\tconst { fieldErrors } = useForm();\n\n\tconst defaultNodes = useMemo((): Descendant[] => {\n\t\ttry {\n\t\t\tconst parsedNodes = JSON.parse(defaultValue);\n\t\t\tif (!Array.isArray(parsedNodes) \|\| parsedNodes.length === 0) {\n\t\t\t\treturn structuredClone(initialValue);\n\t\t\t}\n\n\t\t\tconst isValidNodes = parsedNodes.every(\n\t\t\t\t(node) =>\n\t\t\t\t\ttypeof node === \"object\" &&\n\t\t\t\t\tnode !== null &&\n\t\t\t\t\t\"type\" in node &&\n\t\t\t\t\t\"children\" in node,\n\t\t\t);\n\n\t\t\treturn isValidNodes ? parsedNodes : structuredClone(initialValue);\n\t\t} catch (_error) {\n\t\t\treturn structuredClone(initialValue);\n\t\t}\n\t}, [defaultValue]);\n\n\tconst textFromNodes = extractTextFromNode(defaultNodes);\n\n\tconst [charactersCount, setCharactersCount] = useState(textFromNodes.length);\n\tconst [inputValue, setInputValue] = useState(\n\t\tJSON.stringify(defaultNodes) \|\| \"[]\",\n\t);\n\n\tconst [onFocus, setOnFocus] = useState(false);\n\n\tconst ref = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst inputId = id \|\| generatedId;\n\n\tconst errorMessage = baseErrorMessage \|\| fieldErrors?.[name];\n\tconst isError = baseIsError \|\| !!errorMessage;\n\n\tconst renderLeaf = useCallback(Leaf, []);\n\tconst renderElement = useCallback(Element, []);\n\n\tfunction handleChange(value: Descendant[]) {\n\t\tconst text = extractTextFromNode(value);\n\n\t\tsetCharactersCount(text.length);\n\t\tonChangeCharactersCount?.(text.length);\n\n\t\tif (enforceCharacterLimit && text.length >= maxLimit) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetInputValue(JSON.stringify(value));\n\t\tonChange?.(value);\n\t}\n\n\tconst focusClass = onFocus ? \"focusTrue\" : \"focusFalse\";\n\tconst errorClass = isError\n\t\t? \"errorTrue\"\n\t\t: maxLimit < charactersCount\n\t\t\t? \"errorTrue\"\n\t\t\t: \"errorFalse\";\n\n\tconst className = `arkynRichText ${errorClass} ${focusClass}`;\n\n\tconst restatesCharacters = maxLimit - charactersCount;\n\n\tfunction buttonIsNotHidden(format: RichTextHiddenButtonKey) {\n\t\treturn !hiddenButtons?.includes(format);\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<Slate\n\t\t\t\teditor={editor}\n\t\t\t\tinitialValue={defaultNodes}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tonValueChange={handleChange}\n\t\t\t>\n\t\t\t\t<div className={className}>\n\t\t\t\t\t<Toolbar>\n\t\t\t\t\t\t{buttonIsNotHidden(\"headingOne\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"headingOne\" icon={Heading1} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"headingTwo\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"headingTwo\" icon={Heading2} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"blockQuote\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"blockQuote\" icon={Quote} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"bold\") && (\n\t\t\t\t\t\t\t<MarkButton format=\"bold\" icon={Bold} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"italic\") && (\n\t\t\t\t\t\t\t<MarkButton format=\"italic\" icon={Italic} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"underline\") && (\n\t\t\t\t\t\t\t<MarkButton format=\"underline\" icon={Underline} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"code\") && (\n\t\t\t\t\t\t\t<MarkButton format=\"code\" icon={Code} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"left\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"left\" icon={AlignLeft} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"right\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"right\" icon={AlignRight} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"center\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"center\" icon={AlignCenter} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"justify\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"justify\" icon={AlignJustify} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{imageConfig && buttonIsNotHidden(\"image\") && (\n\t\t\t\t\t\t\t<InsertImage {...imageConfig} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"video\") && <InsertVideo {...videoConfig} />}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"link\") && <InsertLink {...linkConfig} />}\n\t\t\t\t\t</Toolbar>\n\n\t\t\t\t\t<Editable\n\t\t\t\t\t\tclassName=\"editorContainer\"\n\t\t\t\t\t\trenderElement={renderElement}\n\t\t\t\t\t\trenderLeaf={renderLeaf}\n\t\t\t\t\t\tspellCheck\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tid={inputId}\n\t\t\t\t\t\tonFocus={() => setOnFocus(true)}\n\t\t\t\t\t\tonBlur={() => setOnFocus(false)}\n\t\t\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\t\t\tif (event.key === \" \" \|\| event.key === \"Enter\") {\n\t\t\t\t\t\t\t\tclearLinkMarkAtBoundary(editor);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tfor (const hotkey in hotKeys) {\n\t\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noExplicitAny: intentional\n\t\t\t\t\t\t\t\tif (isHotkey(hotkey, event as any)) {\n\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\tconst mark = hotKeys[hotkey as keyof typeof hotKeys];\n\t\t\t\t\t\t\t\t\ttoggleMark(editor, mark);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{restatesCharacters < 0 && (\n\t\t\t\t\t\t<div className=\"restatesCharacters\">{restatesCharacters}</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<input\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={inputValue.slice(0, maxLimit)}\n\t\t\t\t/>\n\n\t\t\t\t<input type=\"hidden\" name={`${name}Count`} value={charactersCount} />\n\t\t\t</Slate>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { RichText };\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/richText/index.tsx"],"sourcesContent":["import { isHotkey } from \"is-hotkey\";\nimport {\n\tAlignCenter,\n\tAlignJustify,\n\tAlignLeft,\n\tAlignRight,\n\tBold,\n\tCode,\n\tHeading1,\n\tHeading2,\n\tItalic,\n\tQuote,\n\tUnderline,\n} from \"lucide-react\";\nimport { useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport { createEditor, type Descendant } from \"slate\";\nimport { withHistory } from \"slate-history\";\nimport { Editable, Slate, withReact } from \"slate-react\";\nimport { useForm } from \"../../hooks/useForm\";\nimport { clearLinkMarkAtBoundary } from \"../../services/clearLinkMarkAtBoundary\";\nimport { extractTextFromNode } from \"../../services/extractTextFromNode\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport { toggleMark } from \"../../services/toggleMark\";\nimport { hotKeys, initialValue } from \"../../templates/richTextTemplates\";\nimport type {\n\tRichTextHiddenButtonKey,\n\tRichTextProps,\n} from \"../../types/richTextTypes\";\nimport { BlockButton } from \"./blockButton\";\nimport { Element } from \"./element\";\nimport { InsertImage } from \"./insertImage\";\nimport { InsertLink } from \"./insertLink\";\nimport { InsertVideo } from \"./insertVideo\";\nimport { Leaf } from \"./leaf\";\nimport { MarkButton } from \"./markButton\";\nimport { Toolbar } from \"./toolbar\";\nimport \"./styles.css\";\n\n/*\n RichText, WYSIWYG rich-text editor built on Slate.js with a configurable toolbar.\n \n Toolbar features: bold, italic, underline, code, H1/H2, block quote, alignment (left/center/right/justify), image, video, and link insertion.\n * Pressing Space or Enter right after a link automatically stops new text from continuing to be part of that link.\n \n Editor content is stored as a Slate JSON string in a hidden `<input>` for form submission.\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.label - Label text displayed above the editor.\n * @param props.hiddenButtons - Toolbar button keys to hide (e.g. `[\"image\", \"code\"]`).\n * @param props.imageConfig - Enables image insertion; contains the upload endpoint and modal labels.\n * @param props.videoConfig - Customizes the video insertion modal labels.\n * @param props.linkConfig - Customizes the link insertion modal labels.\n * @param props.defaultValue - Initial editor content as a Slate JSON string. Default: \"[]\"\n * @param props.maxLimit - Maximum character count. Default: 10000\n * @param props.enforceCharacterLimit - Prevents typing past `maxLimit`. Default: false\n * @param props.onChangeCharactersCount - Callback fired on every keystroke, receives the current character count.\n * @param props.onChange - Callback fired when editor content changes, receives the Slate `Descendant[]`.\n * @param props.baseErrorMessage - Custom error message (overrides `useForm` context error).\n * @param props.isError - Forces the error visual state.\n * @param props.id - Custom id for the editable area element.\n * @param props.showAsterisk - Appends `` to the label.\n @param props.orientation - Layout direction. Default: \"vertical\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n \n @returns RichText JSX element wrapped in `FieldTemplate`.\n \n @example\n * ```tsx\n * // Basic\n * <RichText name=\"content\" />\n \n // With character limit and hidden toolbar buttons\n * <RichText\n * name=\"description\"\n * label=\"Description\"\n * maxLimit={500}\n * enforceCharacterLimit\n * hiddenButtons={[\"image\", \"video\", \"code\"]}\n * onChangeCharactersCount={(n) => setCharCount(n)}\n * />\n \n // With image upload support\n * <RichText\n * name=\"article\"\n * label=\"Article Body\"\n * imageConfig={{ action: \"/api/upload\" }}\n * />\n \n // With custom link insertion modal labels\n * <RichText\n * name=\"article\"\n * label=\"Article Body\"\n * linkConfig={{ modalTitle: \"Add a link\" }}\n * />\n * ```\n */\n\nfunction RichText(props: RichTextProps) {\n\tconst {\n\t\tname,\n\t\thiddenButtons,\n\t\timageConfig,\n\t\tvideoConfig,\n\t\tlinkConfig,\n\t\tclassName: wrapperClassName = \"\",\n\t\tdefaultValue = \"[]\",\n\t\tenforceCharacterLimit = false,\n\t\tonChangeCharactersCount,\n\t\tbaseErrorMessage,\n\t\tmaxLimit = 10000,\n\t\tonChange,\n\t\tisError: baseIsError,\n\t\tlabel,\n\t\tshowAsterisk,\n\t\tid,\n\t\torientation = \"vertical\",\n\t\tunShowFieldTemplate = false,\n\t} = props;\n\n\tconst editor = useMemo(() => withHistory(withReact(createEditor())), []);\n\n\tconst { fieldErrors } = useForm();\n\n\tconst defaultNodes = useMemo((): Descendant[] => {\n\t\ttry {\n\t\t\tconst parsedNodes = JSON.parse(defaultValue);\n\t\t\tif (!Array.isArray(parsedNodes) \|\| parsedNodes.length === 0) {\n\t\t\t\treturn structuredClone(initialValue);\n\t\t\t}\n\n\t\t\tconst isValidNodes = parsedNodes.every(\n\t\t\t\t(node) =>\n\t\t\t\t\ttypeof node === \"object\" &&\n\t\t\t\t\tnode !== null &&\n\t\t\t\t\t\"type\" in node &&\n\t\t\t\t\t\"children\" in node,\n\t\t\t);\n\n\t\t\treturn isValidNodes ? parsedNodes : structuredClone(initialValue);\n\t\t} catch (_error) {\n\t\t\treturn structuredClone(initialValue);\n\t\t}\n\t}, [defaultValue]);\n\n\tconst textFromNodes = extractTextFromNode(defaultNodes);\n\n\tconst [charactersCount, setCharactersCount] = useState(textFromNodes.length);\n\tconst [inputValue, setInputValue] = useState(\n\t\tJSON.stringify(defaultNodes) \|\| \"[]\",\n\t);\n\n\tconst [onFocus, setOnFocus] = useState(false);\n\n\tconst ref = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst inputId = id \|\| generatedId;\n\n\tconst errorMessage = baseErrorMessage \|\| fieldErrors?.[name];\n\tconst isError = baseIsError \|\| !!errorMessage;\n\n\tconst renderLeaf = useCallback(Leaf, []);\n\tconst renderElement = useCallback(Element, []);\n\n\tfunction handleChange(value: Descendant[]) {\n\t\tconst text = extractTextFromNode(value);\n\n\t\tsetCharactersCount(text.length);\n\t\tonChangeCharactersCount?.(text.length);\n\n\t\tif (enforceCharacterLimit && text.length >= maxLimit) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetInputValue(JSON.stringify(value));\n\t\tonChange?.(value);\n\t}\n\n\tconst focusClass = onFocus ? \"focusTrue\" : \"focusFalse\";\n\tconst errorClass = isError\n\t\t? \"errorTrue\"\n\t\t: maxLimit < charactersCount\n\t\t\t? \"errorTrue\"\n\t\t\t: \"errorFalse\";\n\n\tconst className = `arkynRichText ${errorClass} ${focusClass}`;\n\n\tconst restatesCharacters = maxLimit - charactersCount;\n\n\tfunction buttonIsNotHidden(format: RichTextHiddenButtonKey) {\n\t\treturn !hiddenButtons?.includes(format);\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<Slate\n\t\t\t\teditor={editor}\n\t\t\t\tinitialValue={defaultNodes}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tonValueChange={handleChange}\n\t\t\t>\n\t\t\t\t<div className={className}>\n\t\t\t\t\t<Toolbar>\n\t\t\t\t\t\t{buttonIsNotHidden(\"headingOne\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"headingOne\" icon={Heading1} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"headingTwo\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"headingTwo\" icon={Heading2} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"blockQuote\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"blockQuote\" icon={Quote} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"bold\") && (\n\t\t\t\t\t\t\t<MarkButton format=\"bold\" icon={Bold} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"italic\") && (\n\t\t\t\t\t\t\t<MarkButton format=\"italic\" icon={Italic} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"underline\") && (\n\t\t\t\t\t\t\t<MarkButton format=\"underline\" icon={Underline} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"code\") && (\n\t\t\t\t\t\t\t<MarkButton format=\"code\" icon={Code} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"left\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"left\" icon={AlignLeft} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"right\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"right\" icon={AlignRight} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"center\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"center\" icon={AlignCenter} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"justify\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"justify\" icon={AlignJustify} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{imageConfig && buttonIsNotHidden(\"image\") && (\n\t\t\t\t\t\t\t<InsertImage {...imageConfig} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"video\") && <InsertVideo {...videoConfig} />}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"link\") && <InsertLink {...linkConfig} />}\n\t\t\t\t\t</Toolbar>\n\n\t\t\t\t\t<Editable\n\t\t\t\t\t\tclassName=\"editorContainer\"\n\t\t\t\t\t\trenderElement={renderElement}\n\t\t\t\t\t\trenderLeaf={renderLeaf}\n\t\t\t\t\t\tspellCheck\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tid={inputId}\n\t\t\t\t\t\tonFocus={() => setOnFocus(true)}\n\t\t\t\t\t\tonBlur={() => setOnFocus(false)}\n\t\t\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\t\t\tif (event.key === \" \" \|\| event.key === \"Enter\") {\n\t\t\t\t\t\t\t\tclearLinkMarkAtBoundary(editor);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tfor (const hotkey in hotKeys) {\n\t\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noExplicitAny: intentional\n\t\t\t\t\t\t\t\tif (isHotkey(hotkey, event as any)) {\n\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\tconst mark = hotKeys[hotkey as keyof typeof hotKeys];\n\t\t\t\t\t\t\t\t\ttoggleMark(editor, mark);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{restatesCharacters < 0 && (\n\t\t\t\t\t\t<div className=\"restatesCharacters\">{restatesCharacters}</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<input type=\"hidden\" name={name} value={inputValue} />\n\n\t\t\t\t<input type=\"hidden\" name={`${name}Count`} value={charactersCount} />\n\t\t\t</Slate>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { RichText };\n"],"mappings":"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"}

package/dist/modules/components/searchPlaces.js CHANGED Viewed

@@ -8,7 +8,7 @@ function i(i) {
 	return /* @__PURE__ */ n(r, {
 		onLoad: (e) => u(e),
 		onPlacesChanged: () => {
-			let e = l?.getPlaces(), t = e ? e[0] : null, n = t?.address_components;
+			let e = l?.getPlaces(), t = e ? e[0] : null, n = t?.address_components ?? [];
 			function r(e) {
 				let t = n.find((t) => t.types[0] === e);
 				return t ? t.long_name : "";

package/dist/modules/components/searchPlaces.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"searchPlaces.js","names":[],"sources":["../../../src/components/searchPlaces.tsx"],"sourcesContent":["import type { StandaloneSearchBoxProps } from \"@react-google-maps/api\";\nimport { StandaloneSearchBox } from \"@react-google-maps/api\";\nimport { type JSX, useState } from \"react\";\nimport { Input, type InputProps } from \"./input\";\n\ntype AddressComponentsType = {\n\tlong_name: string;\n\tshort_name: string;\n\ttypes: string[];\n}[];\n\n/** Structured address data extracted from a Google Places result. /\ntype PlaceData = {\n\t/* Street name (e.g. `\"Rua Exemplo\"`). /\n\tstreet: string;\n\t/* City name (e.g. `\"São Paulo\"`). /\n\tcity: string;\n\t/* Full state name (e.g. `\"São Paulo\"`). /\n\tstate: string;\n\t/* Neighborhood / district name. /\n\tneighborhood: string;\n\t/* Postal / ZIP code. /\n\tpostalCode: string;\n\t/* State abbreviation (e.g. `\"SP\"`). /\n\tstateShortName: string;\n\t/* Street number (e.g. `\"123\"`). /\n\tstreetNumber: string;\n\t/* Geographic coordinates of the place. /\n\tcoordinates: { lat: number; lng: number };\n};\n\ntype SearchPlacesProps = {\n\t/* Google Maps `StandaloneSearchBox` options (e.g. `componentRestrictions`, `bounds`). /\n\toptions?: StandaloneSearchBoxProps[\"options\"];\n\t/* Callback fired every time the input text changes. Receives the current string value. /\n\tonChange?: (e: string) => void;\n\t/\n\t Callback fired when the user selects a place from the autocomplete suggestions.\n\t * Receives a structured {@link PlaceData} object.\n\t /\n\tonPlaceChanged?: (e: PlaceData) => void;\n} & Omit<InputProps, \"onLoad\" \| \"onChange\" \| \"type\">;\n\n/\n SearchPlaces, text input with Google Places autocomplete that returns structured address data.\n \n Requires the Google Maps JavaScript API with the Places library to be loaded.\n * Built on `@react-google-maps/api`'s `StandaloneSearchBox`.\n \n @param props.options - Google Maps search box options (e.g. restrict by country).\n * @param props.onChange - Fires on every keystroke, receives the current text value.\n * @param props.onPlaceChanged - Fires when the user selects a suggestion, receives structured address data.\n \n ...Other valid `Input` properties (except `onLoad`, `onChange`, `type`)\n \n @returns SearchPlaces JSX element (an `Input` wrapped in `StandaloneSearchBox`).\n \n @example\n * ```tsx\n * <SearchPlaces\n * name=\"address\"\n * label=\"Address\"\n * placeholder=\"Start typing an address…\"\n * options={{ componentRestrictions: { country: \"br\" } }}\n * onChange={(v) => setRawAddress(v)}\n * onPlaceChanged={(place) => {\n * setAddress({\n * street: place.street,\n * city: place.city,\n * state: place.state,\n * postalCode: place.postalCode,\n * coordinates: place.coordinates,\n * });\n * }}\n * />\n * ```\n */\n\nfunction SearchPlaces(props: SearchPlacesProps): JSX.Element {\n\tconst { onChange, onPlaceChanged, options, ...rest } = props;\n\n\t// biome-ignore lint/suspicious/noExplicitAny: intentional\n\tconst [searchBox, setSearchBox] = useState<any>(null);\n\t// biome-ignore lint/suspicious/noExplicitAny: intentional\n\tconst handleLoad = (ref: any) => setSearchBox(ref);\n\n\tconst handlePlacesChanged = () => {\n\t\tconst places = searchBox?.getPlaces();\n\t\tconst place = places ? places[0] : null;\n\n\t\tconst address_components =\n\t\t\~~tplace?.address_components~~ as AddressComponentsType;\n\n\t\tfunction findData(key: string) {\n\t\t\tconst data = address_components.find((item) => item.types[0] === key);\n\t\t\tif (data) return data.long_name;\n\t\t\treturn \"\";\n\t\t}\n\n\t\tfunction findDataShort(key: string) {\n\t\t\tconst data = address_components.find((item) => item.types[0] === key);\n\t\t\tif (data) return data.short_name;\n\t\t\treturn \"\";\n\t\t}\n\n\t\tfunction findDataByMultipleTypes(keys: string[]) {\n\t\t\tfor (const key of keys) {\n\t\t\t\tconst data = address_components.find((item) =>\n\t\t\t\t\titem.types.includes(key),\n\t\t\t\t);\n\t\t\t\tif (data) return data.long_name;\n\t\t\t}\n\t\t\treturn \"\";\n\t\t}\n\n\t\tif (place) {\n\t\t\tconst street = findData(\"route\");\n\t\t\tconst streetNumber = findData(\"street_number\");\n\t\t\tconst neighborhood = findDataByMultipleTypes([\n\t\t\t\t\"sublocality_level_1\",\n\t\t\t\t\"sublocality\",\n\t\t\t\t\"neighborhood\",\n\t\t\t]);\n\t\t\tconst city = findData(\"administrative_area_level_2\");\n\t\t\tconst state = findData(\"administrative_area_level_1\");\n\t\t\tconst stateShortName = findDataShort(\"administrative_area_level_1\");\n\t\t\tconst postalCode = findDataByMultipleTypes([\n\t\t\t\t\"postal_code\",\n\t\t\t\t\"postal_code_prefix\",\n\t\t\t]);\n\n\t\t\tconst lat = place.geometry?.location?.lat();\n\t\t\tconst lng = place.geometry?.location?.lng();\n\n\t\t\tconst sendPlace = {\n\t\t\t\tstreet,\n\t\t\t\tcity,\n\t\t\t\tstate,\n\t\t\t\tneighborhood,\n\t\t\t\tpostalCode,\n\t\t\t\tstreetNumber,\n\t\t\t\tstateShortName,\n\t\t\t\tcoordinates: { lat, lng },\n\t\t\t};\n\n\t\t\tonPlaceChanged?.(sendPlace);\n\t\t}\n\t};\n\n\treturn (\n\t\t<StandaloneSearchBox\n\t\t\tonLoad={handleLoad}\n\t\t\tonPlacesChanged={handlePlacesChanged}\n\t\t\toptions={options}\n\t\t>\n\t\t\t<Input\n\t\t\t\ttype=\"text\"\n\t\t\t\tautoComplete=\"off\"\n\t\t\t\tonChange={(e) => onChange?.(e.target.value)}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t</StandaloneSearchBox>\n\t);\n}\n\nexport { SearchPlaces };\n"],"mappings":";;;;;AA8EA,SAAS,EAAa,GAAuC;CAC5D,IAAM,EAAE,aAAU,mBAAgB,YAAS,GAAG,MAAS,GAGjD,CAAC,GAAW,KAAgB,EAAc,IAAI;CAmEpD,OACC,kBAAC,GAAD;EACC,SAnEkB,MAAa,EAAa,CAAG;EAoE/C,uBAlEgC;GACjC,IAAM,IAAS,GAAW,UAAU,GAC9B,IAAQ,IAAS,EAAO,KAAK,MAE7B,~~IACL~~,GAAO;~~GAER~~,SAAS,EAAS,GAAa;IAC9B,IAAM,IAAO,EAAmB,MAAM,MAAS,EAAK,MAAM,OAAO,CAAG;IAEpE,OADI,IAAa,EAAK,YACf;GACR;GAEA,SAAS,EAAc,GAAa;IACnC,IAAM,IAAO,EAAmB,MAAM,MAAS,EAAK,MAAM,OAAO,CAAG;IAEpE,OADI,IAAa,EAAK,aACf;GACR;GAEA,SAAS,EAAwB,GAAgB;IAChD,KAAK,IAAM,KAAO,GAAM;KACvB,IAAM,IAAO,EAAmB,MAAM,MACrC,EAAK,MAAM,SAAS,CAAG,CACxB;KACA,IAAI,GAAM,OAAO,EAAK;IACvB;IACA,OAAO;GACR;GAEA,IAAI,GAAO;IACV,IAAM,IAAS,EAAS,OAAO,GACzB,IAAe,EAAS,eAAe,GACvC,IAAe,EAAwB;KAC5C;KACA;KACA;IACD,CAAC,GACK,IAAO,EAAS,6BAA6B,GAC7C,IAAQ,EAAS,6BAA6B,GAC9C,IAAiB,EAAc,6BAA6B,GAS5D,IAAY;KACjB;KACA;KACA;KACA;KACA,YAbkB,EAAwB,CAC1C,eACA,oBACD,CAUC;KACA;KACA;KACA,aAAa;MAAE,KAXJ,EAAM,UAAU,UAAU,IAAI;MAWrB,KAVT,EAAM,UAAU,UAAU,IAAI;KAUjB;IACzB;IAEA,IAAiB,CAAS;GAC3B;EACD;EAMW;YAET,kBAAC,GAAD;GACC,MAAK;GACL,cAAa;GACb,WAAW,MAAM,IAAW,EAAE,OAAO,KAAK;GAC1C,GAAI;EACJ,CAAA;CACmB,CAAA;AAEvB"}
1	+ {"version":3,"file":"searchPlaces.js","names":[],"sources":["../../../src/components/searchPlaces.tsx"],"sourcesContent":["import type { StandaloneSearchBoxProps } from \"@react-google-maps/api\";\nimport { StandaloneSearchBox } from \"@react-google-maps/api\";\nimport { type JSX, useState } from \"react\";\nimport { Input, type InputProps } from \"./input\";\n\ntype AddressComponentsType = {\n\tlong_name: string;\n\tshort_name: string;\n\ttypes: string[];\n}[];\n\n/** Structured address data extracted from a Google Places result. /\ntype PlaceData = {\n\t/* Street name (e.g. `\"Rua Exemplo\"`). /\n\tstreet: string;\n\t/* City name (e.g. `\"São Paulo\"`). /\n\tcity: string;\n\t/* Full state name (e.g. `\"São Paulo\"`). /\n\tstate: string;\n\t/* Neighborhood / district name. /\n\tneighborhood: string;\n\t/* Postal / ZIP code. /\n\tpostalCode: string;\n\t/* State abbreviation (e.g. `\"SP\"`). /\n\tstateShortName: string;\n\t/* Street number (e.g. `\"123\"`). /\n\tstreetNumber: string;\n\t/* Geographic coordinates of the place. /\n\tcoordinates: { lat: number; lng: number };\n};\n\ntype SearchPlacesProps = {\n\t/* Google Maps `StandaloneSearchBox` options (e.g. `componentRestrictions`, `bounds`). /\n\toptions?: StandaloneSearchBoxProps[\"options\"];\n\t/* Callback fired every time the input text changes. Receives the current string value. /\n\tonChange?: (e: string) => void;\n\t/\n\t Callback fired when the user selects a place from the autocomplete suggestions.\n\t * Receives a structured {@link PlaceData} object.\n\t /\n\tonPlaceChanged?: (e: PlaceData) => void;\n} & Omit<InputProps, \"onLoad\" \| \"onChange\" \| \"type\">;\n\n/\n SearchPlaces, text input with Google Places autocomplete that returns structured address data.\n \n Requires the Google Maps JavaScript API with the Places library to be loaded.\n * Built on `@react-google-maps/api`'s `StandaloneSearchBox`.\n \n @param props.options - Google Maps search box options (e.g. restrict by country).\n * @param props.onChange - Fires on every keystroke, receives the current text value.\n * @param props.onPlaceChanged - Fires when the user selects a suggestion, receives structured address data.\n \n ...Other valid `Input` properties (except `onLoad`, `onChange`, `type`)\n \n @returns SearchPlaces JSX element (an `Input` wrapped in `StandaloneSearchBox`).\n \n @example\n * ```tsx\n * <SearchPlaces\n * name=\"address\"\n * label=\"Address\"\n * placeholder=\"Start typing an address…\"\n * options={{ componentRestrictions: { country: \"br\" } }}\n * onChange={(v) => setRawAddress(v)}\n * onPlaceChanged={(place) => {\n * setAddress({\n * street: place.street,\n * city: place.city,\n * state: place.state,\n * postalCode: place.postalCode,\n * coordinates: place.coordinates,\n * });\n * }}\n * />\n * ```\n */\n\nfunction SearchPlaces(props: SearchPlacesProps): JSX.Element {\n\tconst { onChange, onPlaceChanged, options, ...rest } = props;\n\n\t// biome-ignore lint/suspicious/noExplicitAny: intentional\n\tconst [searchBox, setSearchBox] = useState<any>(null);\n\t// biome-ignore lint/suspicious/noExplicitAny: intentional\n\tconst handleLoad = (ref: any) => setSearchBox(ref);\n\n\tconst handlePlacesChanged = () => {\n\t\tconst places = searchBox?.getPlaces();\n\t\tconst place = places ? places[0] : null;\n\n\t\tconst address_components = (place?.address_components ??\n\t\t\t[]) as AddressComponentsType;\n\n\t\tfunction findData(key: string) {\n\t\t\tconst data = address_components.find((item) => item.types[0] === key);\n\t\t\tif (data) return data.long_name;\n\t\t\treturn \"\";\n\t\t}\n\n\t\tfunction findDataShort(key: string) {\n\t\t\tconst data = address_components.find((item) => item.types[0] === key);\n\t\t\tif (data) return data.short_name;\n\t\t\treturn \"\";\n\t\t}\n\n\t\tfunction findDataByMultipleTypes(keys: string[]) {\n\t\t\tfor (const key of keys) {\n\t\t\t\tconst data = address_components.find((item) =>\n\t\t\t\t\titem.types.includes(key),\n\t\t\t\t);\n\t\t\t\tif (data) return data.long_name;\n\t\t\t}\n\t\t\treturn \"\";\n\t\t}\n\n\t\tif (place) {\n\t\t\tconst street = findData(\"route\");\n\t\t\tconst streetNumber = findData(\"street_number\");\n\t\t\tconst neighborhood = findDataByMultipleTypes([\n\t\t\t\t\"sublocality_level_1\",\n\t\t\t\t\"sublocality\",\n\t\t\t\t\"neighborhood\",\n\t\t\t]);\n\t\t\tconst city = findData(\"administrative_area_level_2\");\n\t\t\tconst state = findData(\"administrative_area_level_1\");\n\t\t\tconst stateShortName = findDataShort(\"administrative_area_level_1\");\n\t\t\tconst postalCode = findDataByMultipleTypes([\n\t\t\t\t\"postal_code\",\n\t\t\t\t\"postal_code_prefix\",\n\t\t\t]);\n\n\t\t\tconst lat = place.geometry?.location?.lat();\n\t\t\tconst lng = place.geometry?.location?.lng();\n\n\t\t\tconst sendPlace = {\n\t\t\t\tstreet,\n\t\t\t\tcity,\n\t\t\t\tstate,\n\t\t\t\tneighborhood,\n\t\t\t\tpostalCode,\n\t\t\t\tstreetNumber,\n\t\t\t\tstateShortName,\n\t\t\t\tcoordinates: { lat, lng },\n\t\t\t};\n\n\t\t\tonPlaceChanged?.(sendPlace);\n\t\t}\n\t};\n\n\treturn (\n\t\t<StandaloneSearchBox\n\t\t\tonLoad={handleLoad}\n\t\t\tonPlacesChanged={handlePlacesChanged}\n\t\t\toptions={options}\n\t\t>\n\t\t\t<Input\n\t\t\t\ttype=\"text\"\n\t\t\t\tautoComplete=\"off\"\n\t\t\t\tonChange={(e) => onChange?.(e.target.value)}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t</StandaloneSearchBox>\n\t);\n}\n\nexport { SearchPlaces };\n"],"mappings":";;;;;AA8EA,SAAS,EAAa,GAAuC;CAC5D,IAAM,EAAE,aAAU,mBAAgB,YAAS,GAAG,MAAS,GAGjD,CAAC,GAAW,KAAgB,EAAc,IAAI;CAmEpD,OACC,kBAAC,GAAD;EACC,SAnEkB,MAAa,EAAa,CAAG;EAoE/C,uBAlEgC;GACjC,IAAM,IAAS,GAAW,UAAU,GAC9B,IAAQ,IAAS,EAAO,KAAK,MAE7B,IAAsB,GAAO,sBAClC,CAAC;GAEF,SAAS,EAAS,GAAa;IAC9B,IAAM,IAAO,EAAmB,MAAM,MAAS,EAAK,MAAM,OAAO,CAAG;IAEpE,OADI,IAAa,EAAK,YACf;GACR;GAEA,SAAS,EAAc,GAAa;IACnC,IAAM,IAAO,EAAmB,MAAM,MAAS,EAAK,MAAM,OAAO,CAAG;IAEpE,OADI,IAAa,EAAK,aACf;GACR;GAEA,SAAS,EAAwB,GAAgB;IAChD,KAAK,IAAM,KAAO,GAAM;KACvB,IAAM,IAAO,EAAmB,MAAM,MACrC,EAAK,MAAM,SAAS,CAAG,CACxB;KACA,IAAI,GAAM,OAAO,EAAK;IACvB;IACA,OAAO;GACR;GAEA,IAAI,GAAO;IACV,IAAM,IAAS,EAAS,OAAO,GACzB,IAAe,EAAS,eAAe,GACvC,IAAe,EAAwB;KAC5C;KACA;KACA;IACD,CAAC,GACK,IAAO,EAAS,6BAA6B,GAC7C,IAAQ,EAAS,6BAA6B,GAC9C,IAAiB,EAAc,6BAA6B,GAS5D,IAAY;KACjB;KACA;KACA;KACA;KACA,YAbkB,EAAwB,CAC1C,eACA,oBACD,CAUC;KACA;KACA;KACA,aAAa;MAAE,KAXJ,EAAM,UAAU,UAAU,IAAI;MAWrB,KAVT,EAAM,UAAU,UAAU,IAAI;KAUjB;IACzB;IAEA,IAAiB,CAAS;GAC3B;EACD;EAMW;YAET,kBAAC,GAAD;GACC,MAAK;GACL,cAAa;GACb,WAAW,MAAM,IAAW,EAAE,OAAO,KAAK;GAC1C,GAAI;EACJ,CAAA;CACmB,CAAA;AAEvB"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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\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 CHANGED Viewed

	@@ -1 +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)}}
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}.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 CHANGED Viewed

@@ -1,38 +1,33 @@
-import { useScrollLock as e } from "../../../hooks/useScrollLock.js";
-import { Input as t } from "../../input/index.js";
+import { useFlipPosition as e } from "../../../hooks/useFlipPosition.js";
+import { useScrollLock as t } from "../../../hooks/useScrollLock.js";
+import { Input as n } from "../../input/index.js";
 /* empty css       */
-import { useEffect as n, useRef as r, useState as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Search as s } from "lucide-react";
+import { useRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Search as o } 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;
-			if (!e) return;
-			let t = e.getBoundingClientRect();
-			window.innerHeight - t.bottom < 300 && t.top > 300 ? g("top") : g("bottom");
-		})();
-	}, [u]);
-	function _(e) {
+function s(s) {
+	let { children: c, id: l, isFocused: u, isSearchable: d, search: f, onSearch: p } = s, m = r(null), h = e(m, u, 300);
+	t(u);
+	function g(e) {
 		d && p(e.target.value);
 	}
-	return u ? /* @__PURE__ */ o("div", {
+	return u ? /* @__PURE__ */ a("div", {
 		ref: m,
+		id: l,
+		role: "listbox",
 		className: `arkynSelectOptionsContainer ${h}`,
-		children: [d && /* @__PURE__ */ a(t, {
+		children: [d && /* @__PURE__ */ i(n, {
 			type: "search",
 			name: "search-select",
 			variant: "underline",
-			leftIcon: s,
+			leftIcon: o,
 			value: f,
-			onChange: _
-		}), l]
+			onChange: g
+		}), c]
 	}) : null;
 }
 //#endregion
-export { c as SelectOptionsContainer };
+export { s as SelectOptionsContainer };
 //# sourceMappingURL=index.js.map

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

	@@ -1 +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~~"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/select/selectOptionsContainer/index.tsx"],"sourcesContent":["import { Search } from \"lucide-react\";\nimport { type ChangeEvent, type ReactNode, useRef } from \"react\";\n\nimport { useFlipPosition } from \"../../../hooks/useFlipPosition\";\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 = useFlipPosition(containerRef, isFocused, 300);\n\n\tuseScrollLock(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":";;;;;;;;AAkBA,SAAS,EAAuB,GAAoC;CACnE,IAAM,EAAE,aAAU,OAAI,cAAW,iBAAc,WAAQ,gBAAa,GAE9D,IAAe,EAAuB,IAAI,GAC1C,IAAW,EAAgB,GAAc,GAAW,GAAG;CAE7D,EAAc,CAAS;CAEvB,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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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