@arkyn/components 3.0.1-beta.200 → 3.0.1-beta.204

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/multiSelect/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 { MultiSelectChevron } from \"./multiSelectChevron\";\nimport { MultiSelectContainer } from \"./multiSelectContainer\";\nimport { MultiSelectContent } from \"./multiSelectContent\";\nimport { MultiSelectMark } from \"./multiSelectMark\";\nimport { MultiSelectOption } from \"./multiSelectOption\";\nimport { MultiSelectOptionsContainer } from \"./multiSelectOptionsContainer\";\nimport { MultiSelectOverlay } from \"./multiSelectOverlay\";\nimport { MultiSelectSpinner } from \"./multiSelectSpinner\";\n\ntype MultiSelectProps = {\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 array of selected values. */\n\tvalue?: string[];\n\t/** Uncontrolled default array of selected values. @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 multiselect. */\n\tlabel?: string;\n\t/** Validation error message displayed below the multiselect. */\n\terrorMessage?: string;\n\t/** Placeholder text shown when no options are 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 selection 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 or deselected. @default false */\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 values array changes. */\n\tonChange?: (value: string[]) => void;\n\t/** Callback fired when the multiselect gains focus. */\n\tonFocus?: () => void;\n\t/** Callback fired when the multiselect loses focus. */\n\tonBlur?: (e: FocusEvent<HTMLDivElement>) => void;\n\t/**\n\t * MultiSelect 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 * MultiSelect — multi-option dropdown with optional search, label, validation, and form integration.\n *\n * Selected values are stored as a JSON array 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.options - Array of selectable options (`{ label, value }`). Required.\n * @param props.value - Controlled array of selected values.\n * @param props.defaultValue - Uncontrolled default selection. Default: []\n * @param props.label - Label text displayed above the multiselect.\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 toggling an option. Default: false\n * @param props.onChange - Callback fired when the selection changes.\n * @param props.onSearch - Callback fired when the search query changes.\n * @param props.size - MultiSelect 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 MultiSelect JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <MultiSelect\n *   name=\"categories\"\n *   options={[\n *     { label: \"Technology\", value: \"tech\" },\n *     { label: \"Design\", value: \"design\" },\n *   ]}\n * />\n *\n * // With label, validation, and searchable\n * <MultiSelect\n *   name=\"skills\"\n *   label=\"Skills\"\n *   showAsterisk\n *   isSearchable\n *   options={skillOptions}\n *   errorMessage={errors.skills}\n * />\n *\n * // Controlled with async search\n * <MultiSelect\n *   name=\"tags\"\n *   label=\"Tags\"\n *   value={selectedTags}\n *   onChange={setSelectedTags}\n *   onSearch={fetchTagOptions}\n *   isLoading={isLoadingTags}\n *   options={tagOptions}\n * />\n * ```\n */\n\nfunction MultiSelect(props: MultiSelectProps) {\n\tconst {\n\t\tname,\n\t\toptions,\n\t\tclassName: wrapperClassName = \"\",\n\t\tplaceholder = \"Selecione...\",\n\t\tcloseOnSelect = false,\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\tunShowFieldTemplate = false,\n\t\torientation = \"vertical\",\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\n\tconst multiSelectRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst multiSelectId = 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 [selectedOptions, setSelectedOptions] = useState(defaultValue);\n\n\tconst forceSelectedOptions = value || selectedOptions;\n\n\tfunction optionHasSelected(value: string) {\n\t\treturn forceSelectedOptions.includes(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 || !multiSelectRef?.current || isFocused) return;\n\t\tsetIsFocused(true);\n\t\tmultiSelectRef.current.focus();\n\t\tonFocus?.();\n\t}\n\n\tfunction handleBlur() {\n\t\tsetIsFocused(false);\n\t\tif (onBlur && multiSelectRef.current) multiSelectRef.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\tsetSelectedOptions(selectedOptions.filter((v) => v !== value));\n\t\t\tif (onChange) onChange(selectedOptions.filter((v) => v !== value));\n\t\t} else {\n\t\t\tsetSelectedOptions([...selectedOptions, value]);\n\t\t\tif (onChange) onChange([...selectedOptions, 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<MultiSelectContainer\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={multiSelectId}\n\t\t\t>\n\t\t\t\t<input\n\t\t\t\t\tref={multiSelectRef}\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={JSON.stringify(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<MultiSelectContent size={size}>\n\t\t\t\t\t{forceSelectedOptions.map((value) => (\n\t\t\t\t\t\t<MultiSelectMark\n\t\t\t\t\t\t\tkey={value}\n\t\t\t\t\t\t\tlabel={getOptionLabel(value)}\n\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\thandleChangeValue={handleChangeValue}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\n\t\t\t\t\t{forceSelectedOptions.length <= 0 && <p>{placeholder}</p>}\n\t\t\t\t</MultiSelectContent>\n\n\t\t\t\t<MultiSelectOptionsContainer\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<MultiSelectOption\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</MultiSelectOptionsContainer>\n\n\t\t\t\t<MultiSelectChevron\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<MultiSelectSpinner iconSize={iconSize} isLoading={isLoading} />\n\t\t\t\t<MultiSelectOverlay handleBlur={handleBlur} isFocused={isFocused} />\n\t\t\t</MultiSelectContainer>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { MultiSelect };\n"],"mappings":"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"}

package/dist/modules/components/multiSelect/multiSelectChevron/index.js

@@ -17,3 +17,5 @@ function n(n) {
 }
 //#endregion
 export { n as MultiSelectChevron };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/multiSelect/multiSelectChevron/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/multiSelect/multiSelectChevron/index.tsx"],"sourcesContent":["import { ChevronDown } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype MultiSelectChevronProps = {\n\tisLoading: boolean;\n\ticonSize: number;\n\tdisabled: boolean;\n\treadOnly: boolean;\n\tisFocused: boolean;\n};\n\nfunction MultiSelectChevron(props: MultiSelectChevronProps) {\n\tconst { iconSize, isLoading, disabled, readOnly, isFocused } = props;\n\n\tconst notAnimate = disabled || readOnly ? \"notAnimate\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\n\tconst className = `arkynMultiSelectChevron ${notAnimate} ${focused}`;\n\n\tif (isLoading) return null;\n\treturn (\n\t\t<ChevronDown\n\t\t\tclassName={className}\n\t\t\tstrokeWidth={2.5}\n\t\t\tstyle={{\n\t\t\t\tminWidth: iconSize,\n\t\t\t\tminHeight: iconSize,\n\t\t\t\tmaxWidth: iconSize,\n\t\t\t\tmaxHeight: iconSize,\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nexport { MultiSelectChevron };\n"],"mappings":";;;;AAWA,SAAS,EAAmB,GAAgC;CAC3D,IAAM,EAAE,aAAU,cAAW,aAAU,aAAU,iBAAc;CAQ/D,OADI,IAAkB,OAErB,kBAAC,GAAD;EACY,sCARM,KAAY,IAAW,eAAe,GAGD,GAFxC,IAAY,YAAY;EAQtC,aAAa;EACb,OAAO;GACN,UAAU;GACV,WAAW;GACX,UAAU;GACV,WAAW;EACZ;CACA,CAAA;AAEH"}

package/dist/modules/components/multiSelect/multiSelectChevron/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynMultiSelectChevron{color:var(--text-muted);transition:all .15s ease-in-out}.arkynMultiSelectChevron:not(.notAnimate).focused{transform:rotate(180deg)}}

package/dist/modules/components/multiSelect/multiSelectContainer/index.js

@@ -12,3 +12,5 @@ function t(t) {
 }
 //#endregion
 export { t as MultiSelectContainer };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/multiSelect/multiSelectContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/multiSelect/multiSelectContainer/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport \"./styles.css\";\n\ntype MultiSelectContainerProps = {\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 MultiSelectContainer(props: MultiSelectContainerProps) {\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={`arkynMultiSelectContainer ${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 { MultiSelectContainer };\n"],"mappings":";;;AAkBA,SAAS,EAAqB,GAAkC;CAC/D,IAAM,EACL,aACA,yBACA,aACA,YACA,cACA,cACA,cACA,aACA,YACA,SACA,OACA,oBACG;CAOJ,OACC,kBAAC,WAAD;EACK;EACJ,WAAW,6BARK,IAAe,cAAc,GAQK,GAAG,EAAQ,GAAG,EAAK,GANvD,KAAY,KAAY,IAAY,YAAY,GAMkB,GAPlE,IAAU,YAAY,GAOuD,GAL7E,IAAY,YAAY,GAKgE,GAAG;EACzG,SAAS;EAER;CACO,CAAA;AAEX"}

package/dist/modules/components/multiSelect/multiSelectContainer/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynMultiSelectContainer{border:1px solid #0000;border-radius:8px;outline:1px solid #0000;align-items:center;gap:8px;width:min-content;padding:0 16px;display:flex;position:relative}.arkynMultiSelectContainer:hover{cursor:pointer}.arkynMultiSelectContainer.opacity{opacity:.5}.arkynMultiSelectContainer .prefix{color:var(--text-body);background:var(--border);border-right:1px solid var(--border);border-radius:5px 0 0 5px;justify-content:center;align-items:center;font-weight:400;display:flex;position:absolute;top:0;bottom:0;left:0}.arkynMultiSelectContainer>svg{color:var(--text-muted)}.arkynMultiSelectContainer.errored>svg{color:rgb(var(--spotlight-danger))}.arkynMultiSelectContainer:not(.opacity).focused>svg{color:rgb(var(--spotlight-primary))}.arkynMultiSelectContainer.solid{border-color:var(--border);background-color:var(--input-background)}.arkynMultiSelectContainer.solid.errored{border-color:rgb(var(--spotlight-danger));outline-color:rgb(var(--spotlight-danger))}.arkynMultiSelectContainer:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary));outline-color:rgb(var(--spotlight-primary))}.arkynMultiSelectContainer.outline{border-color:var(--border);background-color:var(--background-foreground)}.arkynMultiSelectContainer.outline.errored{border-color:rgb(var(--spotlight-danger));outline-color:rgb(var(--spotlight-danger))}.arkynMultiSelectContainer:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary));outline-color:rgb(var(--spotlight-primary))}.arkynMultiSelectContainer.underline{border-top:none;border-left:none;border-right:none;border-color:var(--border);border-radius:0;outline:none}.arkynMultiSelectContainer.underline .prefix{display:none}.arkynMultiSelectContainer.underline:before{content:" ";background:0 0;height:1px;position:absolute;bottom:-2px;left:0;right:0}.arkynMultiSelectContainer.underline.errored{border-color:rgb(var(--spotlight-danger))}.arkynMultiSelectContainer.underline.errored:before{background:rgb(var(--spotlight-danger))}.arkynMultiSelectContainer:not(.opacity).underline.focused{border-color:rgb(var(--spotlight-primary))}.arkynMultiSelectContainer:not(.opacity).underline.focused:before{background:rgb(var(--spotlight-primary))}.arkynMultiSelectContainer.md{min-height:40px}.arkynMultiSelectContainer.md.hasPrefix{padding-left:60px}.arkynMultiSelectContainer.md .prefix{width:44px;height:40px;font-size:14px}.arkynMultiSelectContainer.lg{min-height:44px}.arkynMultiSelectContainer.lg .prefix{width:48px;height:44px;font-size:16px}.arkynMultiSelectContainer.lg.hasPrefix{padding-left:64px}}

package/dist/modules/components/multiSelect/multiSelectContent/index.js

@@ -10,3 +10,5 @@ function t(t) {
 }
 //#endregion
 export { t as MultiSelectContent };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/multiSelect/multiSelectContent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/multiSelect/multiSelectContent/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport \"./styles.css\";\n\ntype MultiSelectContentProps = {\n\tchildren: ReactNode;\n\tsize: \"md\" | \"lg\";\n};\n\nfunction MultiSelectContent(props: MultiSelectContentProps) {\n\tconst { children, size } = props;\n\tconst className = `arkynMultiSelectContent ${size}`;\n\treturn <div className={className}>{children}</div>;\n}\n\nexport { MultiSelectContent };\n"],"mappings":";;;AAQA,SAAS,EAAmB,GAAgC;CAC3D,IAAM,EAAE,aAAU,YAAS;CAE3B,OAAO,kBAAC,OAAD;EAAgB,WAAA,2BADsB;EACV;CAAc,CAAA;AAClD"}

package/dist/modules/components/multiSelect/multiSelectContent/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynMultiSelectContent{flex-wrap:wrap;flex:1;align-items:start;gap:4px;display:flex}.arkynMultiSelectContent>p{color:var(--text-muted);-webkit-user-select:none;user-select:none;font-weight:400}.arkynMultiSelectContent.md>p{font-size:14px;line-height:14px}.arkynMultiSelectContent.lg>p{font-size:16px;line-height:16px}}

package/dist/modules/components/multiSelect/multiSelectMark/index.js

@@ -18,3 +18,5 @@ function r(r) {
 }
 //#endregion
 export { r as MultiSelectMark };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/multiSelect/multiSelectMark/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/multiSelect/multiSelectMark/index.tsx"],"sourcesContent":["import { X } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype MultiSelectMarkProps = {\n\tlabel: string;\n\tdisabled: boolean;\n\tvalue: string;\n\thandleChangeValue: (value: string) => void;\n};\n\nfunction MultiSelectMark(props: MultiSelectMarkProps) {\n\tconst { label, value, disabled, handleChangeValue } = props;\n\n\treturn (\n\t\t<div className=\"arkynMultiSelectMark\">\n\t\t\t{label}\n\n\t\t\t<button\n\t\t\t\tdisabled={disabled}\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={(e) => {\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t\thandleChangeValue(value);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<X />\n\t\t\t</button>\n\t\t</div>\n\t);\n}\n\nexport { MultiSelectMark };\n"],"mappings":";;;;AAUA,SAAS,EAAgB,GAA6B;CACrD,IAAM,EAAE,UAAO,UAAO,aAAU,yBAAsB;CAEtD,OACC,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,GAED,kBAAC,UAAD;GACW;GACV,MAAK;GACL,UAAU,MAAM;IAEf,AADA,EAAE,gBAAgB,GAClB,EAAkB,CAAK;GACxB;aAEA,kBAAC,GAAD,CAAI,CAAA;EACG,CAAA,CACJ;;AAEP"}

package/dist/modules/components/multiSelect/multiSelectMark/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynMultiSelectMark{background:var(--background);color:var(--text-body);text-align:left;z-index:6;-webkit-user-select:none;user-select:none;border-radius:4px;align-items:center;gap:4px;padding:2px 6px;font-size:14px;font-weight:400;line-height:19.07px;display:flex}.arkynMultiSelectMark button{background:inherit;border:none;justify-content:center;align-items:center;width:15px;height:15px;display:flex}.arkynMultiSelectMark button:disabled{cursor:not-allowed}.arkynMultiSelectMark button:hover:not(:disabled){cursor:pointer;filter:brightness(.9)}.arkynMultiSelectMark button svg{min-width:10px;min-height:10px;color:var(--text-muted)}}

package/dist/modules/components/multiSelect/multiSelectOption/index.js

@@ -16,3 +16,5 @@ function r(r) {
 }
 //#endregion
 export { r as MultiSelectOption };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/multiSelect/multiSelectOption/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/multiSelect/multiSelectOption/index.tsx"],"sourcesContent":["import { Check } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype MultiSelectOptionProps = {\n\tvalue: string;\n\tlabel: string;\n\tsize: \"md\" | \"lg\";\n\toptionHasSelected: (value: string) => boolean;\n\thandleChangeValue: (value: string) => void;\n};\n\nfunction MultiSelectOption(props: MultiSelectOptionProps) {\n\tconst { label, optionHasSelected, handleChangeValue, value, size } = props;\n\n\tconst hasActive = optionHasSelected(value) ? \"active\" : \"\";\n\tconst className = `arkynMultiSelectOption ${size} ${hasActive}`;\n\n\treturn (\n\t\t<div onClick={() => handleChangeValue(value)} className={className}>\n\t\t\t{label} <Check />\n\t\t</div>\n\t);\n}\n\nexport { MultiSelectOption };\n"],"mappings":";;;;AAWA,SAAS,EAAkB,GAA+B;CACzD,IAAM,EAAE,UAAO,sBAAmB,sBAAmB,UAAO,YAAS;CAKrE,OACC,kBAAC,OAAD;EAAK,eAAe,EAAkB,CAAK;EAAc,WAAA,0BAHd,EAAK,GAD/B,EAAkB,CAAK,IAAI,WAAW;YAIvD;GACE;GAAM;GAAC,kBAAC,GAAD,CAAQ,CAAA;EACZ;;AAEP"}

package/dist/modules/components/multiSelect/multiSelectOption/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynMultiSelectOption{color:var(--text-body);-webkit-user-select:none;user-select:none;background-color:var(--background-foreground);justify-content:space-between;align-items:center;font-weight:400;line-height:21.79px;display:flex}.arkynMultiSelectOption.md{padding:8px 16px;font-size:14px}.arkynMultiSelectOption.lg{padding:8px 16px;font-size:16px}.arkynMultiSelectOption svg{width:20px;height:20px;color:rgb(var(--spotlight-primary));display:none}.arkynMultiSelectOption:hover{cursor:pointer;filter:brightness(.95)}.arkynMultiSelectOption.active{color:var(--text-heading);filter:brightness(.95);font-weight:600}.arkynMultiSelectOption.active svg{display:unset}}

package/dist/modules/components/multiSelect/multiSelectOptionsContainer/index.js

@@ -34,3 +34,5 @@ function c(c) {
 }
 //#endregion
 export { c as MultiSelectOptionsContainer };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/multiSelect/multiSelectOptionsContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/multiSelect/multiSelectOptionsContainer/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 MultiSelectOptionsContainerProps = {\n\tisFocused: boolean;\n\tisSearchable: boolean;\n\tchildren: ReactNode;\n\tsearch: string;\n\tonSearch: (value: string) => void;\n};\n\nfunction MultiSelectOptionsContainer(props: MultiSelectOptionsContainerProps) {\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={`arkynMultiSelectOptionsContainer ${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 { MultiSelectOptionsContainer };\n"],"mappings":";;;;;;;AAsBA,SAAS,EAA4B,GAAyC;CAC7E,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,oCAAoC;YAFhD,CAIE,KACA,kBAAC,GAAD;GACC,MAAK;GACL,MAAK;GACL,SAAQ;GACR,UAAU;GACV,OAAO;GACP,UAAU;EACV,CAAA,GAGD,CACG;MAnBiB;AAqBxB"}

package/dist/modules/components/multiSelect/multiSelectOptionsContainer/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynMultiSelectOptionsContainer{z-index:7;border:1px solid var(--border);background-color:var(--background-foreground);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}.arkynMultiSelectOptionsContainer.bottom{top:calc(100% + 5px)}.arkynMultiSelectOptionsContainer.top{bottom:calc(100% + 5px)}.arkynMultiSelectOptionsContainer>p{text-align:center;color:var(--text-body);padding:16px;font-size:14px;font-weight:400;line-height:21.79px}}

package/dist/modules/components/multiSelect/multiSelectOverlay/index.js

@@ -10,3 +10,5 @@ function t(t) {
 }
 //#endregion
 export { t as MultiSelectOverlay };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/multiSelect/multiSelectOverlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/multiSelect/multiSelectOverlay/index.tsx"],"sourcesContent":["import \"./styles.css\";\n\ntype MultiSelectOverlayProps = {\n\tisFocused: boolean;\n\thandleBlur: () => void;\n};\n\nfunction MultiSelectOverlay(props: MultiSelectOverlayProps) {\n\tconst { isFocused, handleBlur } = props;\n\tif (!isFocused) return null;\n\treturn <aside className=\"arkynMultiSelectOverlay\" onClick={handleBlur} />;\n}\n\nexport { MultiSelectOverlay };\n"],"mappings":";;;AAOA,SAAS,EAAmB,GAAgC;CAC3D,IAAM,EAAE,cAAW,kBAAe;CAElC,OADK,IACE,kBAAC,SAAD;EAAO,WAAU;EAA0B,SAAS;CAAa,CAAA,IADjD;AAExB"}

package/dist/modules/components/multiSelect/multiSelectOverlay/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynMultiSelectOverlay{z-index:5;position:fixed;inset:0}}

package/dist/modules/components/multiSelect/multiSelectSpinner/index.js

@@ -12,3 +12,5 @@ function n(n) {
 }
 //#endregion
 export { n as MultiSelectSpinner };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/multiSelect/multiSelectSpinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/multiSelect/multiSelectSpinner/index.tsx"],"sourcesContent":["import { Loader2 } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype MultiSelectSpinnerProps = {\n\ticonSize: number;\n\tisLoading: boolean;\n};\n\nfunction MultiSelectSpinner(props: MultiSelectSpinnerProps) {\n\tconst { iconSize, isLoading } = props;\n\n\tif (!isLoading) return null;\n\treturn (\n\t\t<Loader2\n\t\t\tclassName=\"arkynMultiSelectSpinner\"\n\t\t\tsize={iconSize}\n\t\t\tstrokeWidth={2.5}\n\t\t/>\n\t);\n}\n\nexport { MultiSelectSpinner };\n"],"mappings":";;;;AAQA,SAAS,EAAmB,GAAgC;CAC3D,IAAM,EAAE,aAAU,iBAAc;CAGhC,OADK,IAEJ,kBAAC,GAAD;EACC,WAAU;EACV,MAAM;EACN,aAAa;CACb,CAAA,IANqB;AAQxB"}

package/dist/modules/components/multiSelect/multiSelectSpinner/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynMultiSelectSpinner{animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}

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

@@ -0,0 +1,31 @@
+@layer arkyn{.arkynFieldError{color:rgb(var(--spotlight-danger));font-size:12px;font-weight:600;line-height:12px}}
+
+@layer arkyn{.arkynFieldLabel{color:var(--text-body);font-size:14px;font-weight:600;line-height:19.07px}.arkynFieldLabel.asteriskTrue:before{content:"* ";text-align:left;color:rgb(var(--spotlight-danger));font-size:12px;font-weight:600;line-height:16.34px}}
+
+@layer arkyn{.arkynFieldWrapper{gap:6px;height:max-content;display:flex}.arkynFieldWrapper.horizontal{flex-direction:row;align-items:center}.arkynFieldWrapper.horizontalReverse{flex-direction:row-reverse;align-items:center;margin-right:auto}.arkynFieldWrapper.vertical{flex-direction:column;align-items:flex-start}}
+
+@layer arkyn{.arkynMultiSelectChevron{color:var(--text-muted);transition:all .15s ease-in-out}.arkynMultiSelectChevron:not(.notAnimate).focused{transform:rotate(180deg)}}
+
+@layer arkyn{.arkynMultiSelectContainer{border:1px solid #0000;border-radius:8px;outline:1px solid #0000;align-items:center;gap:8px;width:min-content;padding:0 16px;display:flex;position:relative}.arkynMultiSelectContainer:hover{cursor:pointer}.arkynMultiSelectContainer.opacity{opacity:.5}.arkynMultiSelectContainer .prefix{color:var(--text-body);background:var(--border);border-right:1px solid var(--border);border-radius:5px 0 0 5px;justify-content:center;align-items:center;font-weight:400;display:flex;position:absolute;top:0;bottom:0;left:0}.arkynMultiSelectContainer>svg{color:var(--text-muted)}.arkynMultiSelectContainer.errored>svg{color:rgb(var(--spotlight-danger))}.arkynMultiSelectContainer:not(.opacity).focused>svg{color:rgb(var(--spotlight-primary))}.arkynMultiSelectContainer.solid{border-color:var(--border);background-color:var(--input-background)}.arkynMultiSelectContainer.solid.errored{border-color:rgb(var(--spotlight-danger));outline-color:rgb(var(--spotlight-danger))}.arkynMultiSelectContainer:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary));outline-color:rgb(var(--spotlight-primary))}.arkynMultiSelectContainer.outline{border-color:var(--border);background-color:var(--background-foreground)}.arkynMultiSelectContainer.outline.errored{border-color:rgb(var(--spotlight-danger));outline-color:rgb(var(--spotlight-danger))}.arkynMultiSelectContainer:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary));outline-color:rgb(var(--spotlight-primary))}.arkynMultiSelectContainer.underline{border-top:none;border-left:none;border-right:none;border-color:var(--border);border-radius:0;outline:none}.arkynMultiSelectContainer.underline .prefix{display:none}.arkynMultiSelectContainer.underline:before{content:" ";background:0 0;height:1px;position:absolute;bottom:-2px;left:0;right:0}.arkynMultiSelectContainer.underline.errored{border-color:rgb(var(--spotlight-danger))}.arkynMultiSelectContainer.underline.errored:before{background:rgb(var(--spotlight-danger))}.arkynMultiSelectContainer:not(.opacity).underline.focused{border-color:rgb(var(--spotlight-primary))}.arkynMultiSelectContainer:not(.opacity).underline.focused:before{background:rgb(var(--spotlight-primary))}.arkynMultiSelectContainer.md{min-height:40px}.arkynMultiSelectContainer.md.hasPrefix{padding-left:60px}.arkynMultiSelectContainer.md .prefix{width:44px;height:40px;font-size:14px}.arkynMultiSelectContainer.lg{min-height:44px}.arkynMultiSelectContainer.lg .prefix{width:48px;height:44px;font-size:16px}.arkynMultiSelectContainer.lg.hasPrefix{padding-left:64px}}
+
+@layer arkyn{.arkynMultiSelectContent{flex-wrap:wrap;flex:1;align-items:start;gap:4px;display:flex}.arkynMultiSelectContent>p{color:var(--text-muted);-webkit-user-select:none;user-select:none;font-weight:400}.arkynMultiSelectContent.md>p{font-size:14px;line-height:14px}.arkynMultiSelectContent.lg>p{font-size:16px;line-height:16px}}
+
+@layer arkyn{.arkynMultiSelectMark{background:var(--background);color:var(--text-body);text-align:left;z-index:6;-webkit-user-select:none;user-select:none;border-radius:4px;align-items:center;gap:4px;padding:2px 6px;font-size:14px;font-weight:400;line-height:19.07px;display:flex}.arkynMultiSelectMark button{background:inherit;border:none;justify-content:center;align-items:center;width:15px;height:15px;display:flex}.arkynMultiSelectMark button:disabled{cursor:not-allowed}.arkynMultiSelectMark button:hover:not(:disabled){cursor:pointer;filter:brightness(.9)}.arkynMultiSelectMark button svg{min-width:10px;min-height:10px;color:var(--text-muted)}}
+
+@layer arkyn{.arkynMultiSelectOption{color:var(--text-body);-webkit-user-select:none;user-select:none;background-color:var(--background-foreground);justify-content:space-between;align-items:center;font-weight:400;line-height:21.79px;display:flex}.arkynMultiSelectOption.md{padding:8px 16px;font-size:14px}.arkynMultiSelectOption.lg{padding:8px 16px;font-size:16px}.arkynMultiSelectOption svg{width:20px;height:20px;color:rgb(var(--spotlight-primary));display:none}.arkynMultiSelectOption:hover{cursor:pointer;filter:brightness(.95)}.arkynMultiSelectOption.active{color:var(--text-heading);filter:brightness(.95);font-weight:600}.arkynMultiSelectOption.active svg{display:unset}}
+
+@layer arkyn{.arkynMultiSelectOptionsContainer{z-index:7;border:1px solid var(--border);background-color:var(--background-foreground);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}.arkynMultiSelectOptionsContainer.bottom{top:calc(100% + 5px)}.arkynMultiSelectOptionsContainer.top{bottom:calc(100% + 5px)}.arkynMultiSelectOptionsContainer>p{text-align:center;color:var(--text-body);padding:16px;font-size:14px;font-weight:400;line-height:21.79px}}
+
+@layer arkyn{.arkynInput{border:1px solid #0000;border-radius:8px;outline:1px solid #0000;align-items:center;gap:8px;width:100%;padding:0 16px;display:flex;position:relative}.arkynInput:hover{cursor:text}.arkynInput input{width:100%;color:var(--text-heading);background:0 0;border:none;outline:none;line-height:100%}.arkynInput input:disabled{-webkit-user-select:none;user-select:none}.arkynInput .prefix,.arkynInput .suffix{color:var(--text-body);background:var(--border);justify-content:center;align-items:center;font-weight:400;line-height:100%;display:flex;position:absolute}.arkynInput .prefix{border-right:1px solid var(--border);border-radius:7px 0 0 7px;top:0;bottom:0;left:0}.arkynInput .suffix{border-left:1px solid var(--border);border-radius:0 7px 7px 0;top:0;bottom:0;right:0}.arkynInput input::placeholder{color:var(--text-muted);line-height:100%}.arkynInput svg{color:var(--text-muted)}.arkynInput.errored svg{color:rgb(var(--spotlight-danger))}.arkynInput:not(.opacity).focused svg{color:rgb(var(--spotlight-primary))}.arkynInput.opacity{opacity:.5}.arkynInput.solid{border-color:var(--border);background-color:var(--input-background)}.arkynInput.solid.errored{border-color:rgb(var(--spotlight-danger));outline-color:rgb(var(--spotlight-danger))}.arkynInput:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary));outline-color:rgb(var(--spotlight-primary))}.arkynInput.outline{border-color:var(--border);background-color:var(--background-foreground)}.arkynInput.outline.errored{border-color:rgb(var(--spotlight-danger));outline-color:rgb(var(--spotlight-danger))}.arkynInput:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary));outline-color:rgb(var(--spotlight-primary))}.arkynInput.underline{border-top:none;border-left:none;border-right:none;border-color:var(--border);border-radius:0;outline:none}.arkynInput.underline .suffix,.arkynInput.underline .prefix{display:none}.arkynInput.underline:before{content:" ";background:0 0;height:1px;position:absolute;bottom:-2px;left:0;right:0}.arkynInput.underline.errored{border-color:rgb(var(--spotlight-danger))}.arkynInput.underline.errored:before{background:rgb(var(--spotlight-danger))}.arkynInput:not(.opacity).underline.focused{border-color:rgb(var(--spotlight-primary))}.arkynInput:not(.opacity).underline.focused:before{background:rgb(var(--spotlight-primary))}.arkynInput.md input{min-height:38px;max-height:38px;font-size:14px;font-weight:400;line-height:14px}.arkynInput.md input::placeholder{font-size:14px;font-weight:400;line-height:14px}.arkynInput.md.hasPrefix{padding-left:60px}.arkynInput.md.hasSuffix{padding-right:60px}.arkynInput.md .prefix,.arkynInput.md .suffix{width:44px;height:38px;font-size:14px}.arkynInput.lg input{min-height:44px;max-height:44px;font-size:16px;font-weight:400;line-height:16px}.arkynInput.lg input::placeholder{font-size:16px;font-weight:400;line-height:16px}.arkynInput.lg .prefix,.arkynInput.lg .suffix{width:48px;height:44px;font-size:16px}.arkynInput.lg.hasPrefix{padding-left:64px}.arkynInput.lg.hasSuffix{padding-right:64px}.arkynInput .spinner{animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}
+
+@layer arkyn{.arkynFieldError{color:rgb(var(--spotlight-danger));font-size:12px;font-weight:600;line-height:12px}}
+
+@layer arkyn{.arkynFieldLabel{color:var(--text-body);font-size:14px;font-weight:600;line-height:19.07px}.arkynFieldLabel.asteriskTrue:before{content:"* ";text-align:left;color:rgb(var(--spotlight-danger));font-size:12px;font-weight:600;line-height:16.34px}}
+
+@layer arkyn{.arkynFieldWrapper{gap:6px;height:max-content;display:flex}.arkynFieldWrapper.horizontal{flex-direction:row;align-items:center}.arkynFieldWrapper.horizontalReverse{flex-direction:row-reverse;align-items:center;margin-right:auto}.arkynFieldWrapper.vertical{flex-direction:column;align-items:flex-start}}
+
+@layer arkyn{.arkynInput{border:1px solid #0000;border-radius:8px;outline:1px solid #0000;align-items:center;gap:8px;width:100%;padding:0 16px;display:flex;position:relative}.arkynInput:hover{cursor:text}.arkynInput input{width:100%;color:var(--text-heading);background:0 0;border:none;outline:none;line-height:100%}.arkynInput input:disabled{-webkit-user-select:none;user-select:none}.arkynInput .prefix,.arkynInput .suffix{color:var(--text-body);background:var(--border);justify-content:center;align-items:center;font-weight:400;line-height:100%;display:flex;position:absolute}.arkynInput .prefix{border-right:1px solid var(--border);border-radius:7px 0 0 7px;top:0;bottom:0;left:0}.arkynInput .suffix{border-left:1px solid var(--border);border-radius:0 7px 7px 0;top:0;bottom:0;right:0}.arkynInput input::placeholder{color:var(--text-muted);line-height:100%}.arkynInput svg{color:var(--text-muted)}.arkynInput.errored svg{color:rgb(var(--spotlight-danger))}.arkynInput:not(.opacity).focused svg{color:rgb(var(--spotlight-primary))}.arkynInput.opacity{opacity:.5}.arkynInput.solid{border-color:var(--border);background-color:var(--input-background)}.arkynInput.solid.errored{border-color:rgb(var(--spotlight-danger));outline-color:rgb(var(--spotlight-danger))}.arkynInput:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary));outline-color:rgb(var(--spotlight-primary))}.arkynInput.outline{border-color:var(--border);background-color:var(--background-foreground)}.arkynInput.outline.errored{border-color:rgb(var(--spotlight-danger));outline-color:rgb(var(--spotlight-danger))}.arkynInput:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary));outline-color:rgb(var(--spotlight-primary))}.arkynInput.underline{border-top:none;border-left:none;border-right:none;border-color:var(--border);border-radius:0;outline:none}.arkynInput.underline .suffix,.arkynInput.underline .prefix{display:none}.arkynInput.underline:before{content:" ";background:0 0;height:1px;position:absolute;bottom:-2px;left:0;right:0}.arkynInput.underline.errored{border-color:rgb(var(--spotlight-danger))}.arkynInput.underline.errored:before{background:rgb(var(--spotlight-danger))}.arkynInput:not(.opacity).underline.focused{border-color:rgb(var(--spotlight-primary))}.arkynInput:not(.opacity).underline.focused:before{background:rgb(var(--spotlight-primary))}.arkynInput.md input{min-height:38px;max-height:38px;font-size:14px;font-weight:400;line-height:14px}.arkynInput.md input::placeholder{font-size:14px;font-weight:400;line-height:14px}.arkynInput.md.hasPrefix{padding-left:60px}.arkynInput.md.hasSuffix{padding-right:60px}.arkynInput.md .prefix,.arkynInput.md .suffix{width:44px;height:38px;font-size:14px}.arkynInput.lg input{min-height:44px;max-height:44px;font-size:16px;font-weight:400;line-height:16px}.arkynInput.lg input::placeholder{font-size:16px;font-weight:400;line-height:16px}.arkynInput.lg .prefix,.arkynInput.lg .suffix{width:48px;height:44px;font-size:16px}.arkynInput.lg.hasPrefix{padding-left:64px}.arkynInput.lg.hasSuffix{padding-right:64px}.arkynInput .spinner{animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}
+
+@layer arkyn{.arkynMultiSelectOverlay{z-index:5;position:fixed;inset:0}}
+
+@layer arkyn{.arkynMultiSelectSpinner{animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}

package/dist/modules/components/pagination/chevronButton/index.js

@@ -17,3 +17,5 @@ function r(r) {
 }
 //#endregion
 export { r as ChevronButton };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/pagination/chevronButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/pagination/chevronButton/index.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype ChevronButtonProps = {\n\torientation: \"left\" | \"right\";\n\tdisabled: boolean;\n\thandlePageChange: () => void;\n};\n\nfunction ChevronButton(props: ChevronButtonProps) {\n\tconst { orientation, handlePageChange, disabled } = props;\n\tconst icon = { left: <ChevronLeft />, right: <ChevronRight /> };\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName=\"arkynChevronPageButton\"\n\t\t\tdisabled={disabled}\n\t\t\tonClick={handlePageChange}\n\t\t>\n\t\t\t{icon[orientation]}\n\t\t</button>\n\t);\n}\n\nexport { ChevronButton };\n"],"mappings":";;;;AASA,SAAS,EAAc,GAA2B;CACjD,IAAM,EAAE,gBAAa,qBAAkB,gBAAa;CAGpD,OACC,kBAAC,UAAD;EACC,MAAK;EACL,WAAU;EACA;EACV,SAAS;YAER;GATY,MAAM,kBAAC,GAAD,CAAc,CAAA;GAAG,OAAO,kBAAC,GAAD,CAAe,CAAA;EASzD,EAAK;CACC,CAAA;AAEV"}

package/dist/modules/components/pagination/chevronButton/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynChevronPageButton{background-color:inherit;border:none;border-radius:8px;justify-content:center;align-items:center;min-width:28px;max-width:28px;min-height:28px;max-height:28px;display:flex}.arkynChevronPageButton>svg{color:var(--text-muted);width:20px;height:20px}.arkynChevronPageButton:hover{filter:brightness(.98);cursor:pointer}html.dark .arkynChevronPageButton:hover{filter:brightness(1.2)}.arkynChevronPageButton:disabled{filter:brightness();cursor:not-allowed;opacity:.5}}

package/dist/modules/components/pagination/currentButton/index.js

@@ -11,3 +11,5 @@ function t({ currentPage: t }) {
 }
 //#endregion
 export { t as CurrentButton };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/pagination/currentButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/pagination/currentButton/index.tsx"],"sourcesContent":["import \"./styles.css\";\n\ntype CurrentButtonProps = {\n\tcurrentPage: number;\n};\n\nfunction CurrentButton({ currentPage }: CurrentButtonProps) {\n\treturn (\n\t\t<button type=\"button\" className=\"arkynPaginationCurrentButton\" disabled>\n\t\t\t{currentPage}\n\t\t</button>\n\t);\n}\n\nexport { CurrentButton };\n"],"mappings":";;;AAMA,SAAS,EAAc,EAAE,kBAAmC;CAC3D,OACC,kBAAC,UAAD;EAAQ,MAAK;EAAS,WAAU;EAA+B,UAAA;YAC7D;CACM,CAAA;AAEV"}

package/dist/modules/components/pagination/currentButton/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynPaginationCurrentButton{background-color:rgb(var(--spotlight-primary));color:var(--white);text-align:center;border:none;border-radius:8px;justify-content:center;align-items:center;min-width:28px;min-height:28px;font-size:14px;font-weight:500;line-height:14px;display:flex}}

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

@@ -50,3 +50,5 @@ function c(c) {
 }
 //#endregion
 export { c as Pagination };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/pagination/index.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\n\nimport { ChevronButton } from \"./chevronButton\";\nimport { CurrentButton } from \"./currentButton\";\nimport { PageButton } from \"./pageButton\";\nimport { PaginationService } from \"./paginationService\";\nimport { Spread } from \"./spread\";\n\nimport \"./styles.css\";\n\n/**\n * Props for the Pagination component.\n */\ntype PaginationProps = {\n\t/**\n\t * Number of sibling pages to show on each side of the current page.\n\t * @default 1\n\t */\n\tsiblingsCount?: number;\n\t/**\n\t * Total number of records/items to paginate.\n\t */\n\ttotalCountRegisters: number;\n\t/**\n\t * The currently active page number (1-indexed).\n\t */\n\tcurrentPage: number;\n\t/**\n\t * Number of records to display per page.\n\t * @default 10\n\t */\n\tregisterPerPage?: number;\n\t/**\n\t * Callback function triggered when the page changes.\n\t * @param page - The new page number\n\t */\n\tonChange?: (page: number) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, \"onChange\">;\n\n/**\n * Pagination — navigation control for paginated data sets.\n *\n * Renders page number buttons, prev/next arrows, and spread indicators (…)\n * when the page count exceeds the visible range.\n *\n * @param props.totalCountRegisters - Total number of records. Required.\n * @param props.currentPage - The currently active page (1-indexed). Required.\n * @param props.registerPerPage - Records per page. Default: 10\n * @param props.siblingsCount - Number of sibling pages visible on each side of the current page. Default: 1\n * @param props.onChange - Callback fired when the user selects a different page.\n *\n * **...Other valid HTML properties for `<div>`**\n *\n * @returns Pagination JSX element.\n *\n * @example\n * ```tsx\n * <Pagination\n *   totalCountRegisters={250}\n *   currentPage={page}\n *   registerPerPage={20}\n *   siblingsCount={1}\n *   onChange={(p) => setPage(p)}\n * />\n * ```\n */\n\nfunction Pagination(props: PaginationProps) {\n\tconst {\n\t\ttotalCountRegisters: baseTotalCountRegisters,\n\t\tsiblingsCount: baseSiblingsCount,\n\t\tcurrentPage: baseCurrentPage,\n\t\tregisterPerPage: baseRegisterPerPage,\n\t\tonChange: baseOnChange,\n\t\t...rest\n\t} = props;\n\n\tconst {\n\t\tcurrentPage,\n\t\tsiblingsCount,\n\t\tpreviousPages,\n\t\tnextPages,\n\t\tlastPage,\n\t\thandlePageChange,\n\t\thandleMinusChange,\n\t\thandlePlusChange,\n\t} = new PaginationService({\n\t\ttotalCountRegisters: baseTotalCountRegisters,\n\t\tcurrentPage: baseCurrentPage,\n\t\tregisterPerPage: baseRegisterPerPage,\n\t\tsiblingsCount: baseSiblingsCount,\n\t\tonChange: baseOnChange,\n\t});\n\n\treturn (\n\t\t<div className=\"arkynPagination\" {...rest}>\n\t\t\t<ChevronButton\n\t\t\t\torientation=\"left\"\n\t\t\t\thandlePageChange={handleMinusChange}\n\t\t\t\tdisabled={currentPage <= 1}\n\t\t\t/>\n\n\t\t\t{currentPage > 1 + siblingsCount && (\n\t\t\t\t<>\n\t\t\t\t\t<PageButton page={1} handlePageChange={() => handlePageChange(1)} />\n\t\t\t\t\t{currentPage > 2 + siblingsCount && <Spread />}\n\t\t\t\t</>\n\t\t\t)}\n\n\t\t\t{previousPages.map((page) => (\n\t\t\t\t<PageButton\n\t\t\t\t\tkey={page}\n\t\t\t\t\tpage={page}\n\t\t\t\t\thandlePageChange={handleMinusChange}\n\t\t\t\t/>\n\t\t\t))}\n\n\t\t\t<CurrentButton currentPage={currentPage} />\n\n\t\t\t{nextPages.map((page) => (\n\t\t\t\t<PageButton\n\t\t\t\t\tkey={page}\n\t\t\t\t\tpage={page}\n\t\t\t\t\thandlePageChange={handlePlusChange}\n\t\t\t\t/>\n\t\t\t))}\n\n\t\t\t{currentPage + siblingsCount < lastPage && (\n\t\t\t\t<>\n\t\t\t\t\t{currentPage + 1 + siblingsCount < lastPage && <Spread />}\n\t\t\t\t\t<PageButton\n\t\t\t\t\t\tpage={lastPage}\n\t\t\t\t\t\thandlePageChange={() => handlePageChange(lastPage)}\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t)}\n\n\t\t\t<ChevronButton\n\t\t\t\torientation=\"right\"\n\t\t\t\thandlePageChange={handlePlusChange}\n\t\t\t\tdisabled={currentPage >= lastPage}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport { Pagination };\n"],"mappings":";;;;;;;;AAmEA,SAAS,EAAW,GAAwB;CAC3C,IAAM,EACL,qBAAqB,GACrB,eAAe,GACf,aAAa,GACb,iBAAiB,GACjB,UAAU,GACV,GAAG,MACA,GAEE,EACL,gBACA,kBACA,kBACA,cACA,aACA,qBACA,sBACA,wBACG,IAAI,EAAkB;EACzB,qBAAqB;EACrB,aAAa;EACb,iBAAiB;EACjB,eAAe;EACf,UAAU;CACX,CAAC;CAED,OACC,kBAAC,OAAD;EAAK,WAAU;EAAkB,GAAI;YAArC;GACC,kBAAC,GAAD;IACC,aAAY;IACZ,kBAAkB;IAClB,UAAU,KAAe;GACzB,CAAA;GAEA,IAAc,IAAI,KAClB,kBAAA,GAAA,EAAA,UAAA,CACC,kBAAC,GAAD;IAAY,MAAM;IAAG,wBAAwB,EAAiB,CAAC;GAAI,CAAA,GAClE,IAAc,IAAI,KAAiB,kBAAC,GAAD,CAAS,CAAA,CAC5C,EAAA,CAAA;GAGF,EAAc,KAAK,MACnB,kBAAC,GAAD;IAEO;IACN,kBAAkB;GAClB,GAHK,CAGL,CACD;GAED,kBAAC,GAAD,EAA4B,eAAc,CAAA;GAEzC,EAAU,KAAK,MACf,kBAAC,GAAD;IAEO;IACN,kBAAkB;GAClB,GAHK,CAGL,CACD;GAEA,IAAc,IAAgB,KAC9B,kBAAA,GAAA,EAAA,UAAA,CACE,IAAc,IAAI,IAAgB,KAAY,kBAAC,GAAD,CAAS,CAAA,GACxD,kBAAC,GAAD;IACC,MAAM;IACN,wBAAwB,EAAiB,CAAQ;GACjD,CAAA,CACA,EAAA,CAAA;GAGH,kBAAC,GAAD;IACC,aAAY;IACZ,kBAAkB;IAClB,UAAU,KAAe;GACzB,CAAA;EACG;;AAEP"}

package/dist/modules/components/pagination/pageButton/index.js

@@ -12,3 +12,5 @@ function t(t) {
 }
 //#endregion
 export { t as PageButton };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/pagination/pageButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/pagination/pageButton/index.tsx"],"sourcesContent":["import \"./styles.css\";\n\ntype PageButtonProps = {\n\tpage: number;\n\thandlePageChange: () => void;\n};\n\nfunction PageButton(props: PageButtonProps) {\n\tconst { page, handlePageChange } = props;\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName=\"arkynPaginationPageButton\"\n\t\t\tonClick={handlePageChange}\n\t\t>\n\t\t\t{page}\n\t\t</button>\n\t);\n}\n\nexport { PageButton };\n"],"mappings":";;;AAOA,SAAS,EAAW,GAAwB;CAC3C,IAAM,EAAE,SAAM,wBAAqB;CACnC,OACC,kBAAC,UAAD;EACC,MAAK;EACL,WAAU;EACV,SAAS;YAER;CACM,CAAA;AAEV"}

package/dist/modules/components/pagination/pageButton/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynPaginationPageButton{background-color:inherit;min-width:28px;max-width:28px;min-height:28px;max-height:28px;color:var(--text-body);border:none;border-radius:8px;justify-content:center;align-items:center;font-size:14px;font-weight:600;display:flex}.arkynPaginationPageButton:hover{filter:brightness(.98);cursor:pointer}html.dark .arkynPaginationPageButton:hover{filter:brightness(1.2)}}

package/dist/modules/components/pagination/paginationService.js

@@ -32,3 +32,5 @@ var e = class {
 };
 //#endregion
 export { e as PaginationService };
+
+//# sourceMappingURL=paginationService.js.map

package/dist/modules/components/pagination/paginationService.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paginationService.js","names":[],"sources":["../../../../src/components/pagination/paginationService.ts"],"sourcesContent":["type PaginationServiceConstructor = {\n\tcurrentPage: number;\n\ttotalCountRegisters: number;\n\tregisterPerPage?: number;\n\tsiblingsCount?: number;\n\tonChange?: (page: number) => void;\n};\n\nclass PaginationService {\n\tcurrentPage: number;\n\ttotalCountRegisters: number;\n\tregisterPerPage: number;\n\tsiblingsCount: number;\n\tlastPage: number;\n\tonChange?: (page: number) => void;\n\tpreviousPages: number[];\n\tnextPages: number[];\n\n\tprivate generatePagesArray(from: number, to: number) {\n\t\treturn [...new Array(to - from)]\n\t\t\t.map((_, index) => from + index + 1)\n\t\t\t.filter((page) => page > 0);\n\t}\n\n\tprivate generatePreviousPages(currentPage: number, siblingsCount: number) {\n\t\tif (!(currentPage > 1)) return [];\n\t\treturn this.generatePagesArray(\n\t\t\tcurrentPage - 1 - siblingsCount,\n\t\t\tcurrentPage - 1,\n\t\t);\n\t}\n\n\tprivate generateNextPages(currentPage: number, siblingsCount: number) {\n\t\tif (!(currentPage < this.lastPage)) return [];\n\t\treturn this.generatePagesArray(\n\t\t\tcurrentPage,\n\t\t\tMath.min(currentPage + siblingsCount, this.lastPage),\n\t\t);\n\t}\n\n\tconstructor(props: PaginationServiceConstructor) {\n\t\tthis.totalCountRegisters = props.totalCountRegisters;\n\t\tthis.currentPage = props.currentPage;\n\t\tthis.registerPerPage = props?.registerPerPage || 20;\n\t\tthis.siblingsCount = props?.siblingsCount || 2;\n\t\tthis.lastPage = Math.ceil(this.totalCountRegisters / this.registerPerPage);\n\t\tthis.onChange = props?.onChange;\n\t\tthis.previousPages = this.generatePreviousPages(\n\t\t\tthis.currentPage,\n\t\t\tthis.siblingsCount,\n\t\t);\n\t\tthis.nextPages = this.generateNextPages(\n\t\t\tthis.currentPage,\n\t\t\tthis.siblingsCount,\n\t\t);\n\t}\n\n\thandlePageChange = (page: number) => {\n\t\tif (page < 1) return;\n\t\tif (page > this.lastPage) return;\n\t\tif (this.onChange) {\n\t\t\tthis.currentPage = page;\n\t\t\tthis.onChange(this.currentPage);\n\t\t}\n\t};\n\n\thandlePlusChange = () => {\n\t\tif (this.currentPage >= this.lastPage) return;\n\t\tif (this.onChange) {\n\t\t\tthis.currentPage += 1;\n\t\t\tthis.onChange(this.currentPage);\n\t\t}\n\t};\n\n\thandleMinusChange = () => {\n\t\tif (this.currentPage <= 1) return;\n\t\tif (this.onChange) {\n\t\t\tthis.currentPage -= 1;\n\t\t\tthis.onChange(this.currentPage);\n\t\t}\n\t};\n}\n\nexport { PaginationService };\n"],"mappings":";AAQA,IAAM,IAAN,MAAwB;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA,mBAA2B,GAAc,GAAY;EACpD,OAAO,CAAC,GAAO,MAAM,IAAK,CAAI,CAAC,CAAC,CAC9B,KAAK,GAAG,MAAU,IAAO,IAAQ,CAAC,CAAC,CACnC,QAAQ,MAAS,IAAO,CAAC;CAC5B;CAEA,sBAA8B,GAAqB,GAAuB;EAEzE,OADM,IAAc,IACb,KAAK,mBACX,IAAc,IAAI,GAClB,IAAc,CACf,IAJ+B,CAAC;CAKjC;CAEA,kBAA0B,GAAqB,GAAuB;EAErE,OADM,IAAc,KAAK,WAClB,KAAK,mBACX,GACA,KAAK,IAAI,IAAc,GAAe,KAAK,QAAQ,CACpD,IAJ2C,CAAC;CAK7C;CAEA,YAAY,GAAqC;EAWhD,AAVA,KAAK,sBAAsB,EAAM,qBACjC,KAAK,cAAc,EAAM,aACzB,KAAK,kBAAkB,GAAO,mBAAmB,IACjD,KAAK,gBAAgB,GAAO,iBAAiB,GAC7C,KAAK,WAAW,KAAK,KAAK,KAAK,sBAAsB,KAAK,eAAe,GACzE,KAAK,WAAW,GAAO,UACvB,KAAK,gBAAgB,KAAK,sBACzB,KAAK,aACL,KAAK,aACN,GACA,KAAK,YAAY,KAAK,kBACrB,KAAK,aACL,KAAK,aACN;CACD;CAEA,oBAAoB,MAAiB;EAChC,IAAO,KACP,IAAO,KAAK,YACZ,KAAK,aACR,KAAK,cAAc,GACnB,KAAK,SAAS,KAAK,WAAW;CAEhC;CAEA,yBAAyB;EACpB,KAAK,eAAe,KAAK,YACzB,KAAK,aACR,KAAK,eAAe,GACpB,KAAK,SAAS,KAAK,WAAW;CAEhC;CAEA,0BAA0B;EACrB,KAAK,eAAe,KACpB,KAAK,aACR,OAAK,aACL,KAAK,SAAS,KAAK,WAAW;CAEhC;AACD"}

package/dist/modules/components/pagination/spread/index.js

@@ -10,3 +10,5 @@ function n() {
 }
 //#endregion
 export { n as Spread };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/pagination/spread/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/pagination/spread/index.tsx"],"sourcesContent":["import { Ellipsis } from \"lucide-react\";\nimport \"./styles.css\";\n\nfunction Spread() {\n\treturn (\n\t\t<p className=\"arkynPaginationSpread\">\n\t\t\t<Ellipsis />\n\t\t</p>\n\t);\n}\n\nexport { Spread };\n"],"mappings":";;;;AAGA,SAAS,IAAS;CACjB,OACC,kBAAC,KAAD;EAAG,WAAU;YACZ,kBAAC,GAAD,CAAW,CAAA;CACT,CAAA;AAEL"}

package/dist/modules/components/pagination/spread/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynPaginationSpread{color:var(--text-muted);background-color:#0000;border:none;justify-content:center;align-items:center;min-width:28px;max-width:28px;min-height:28px;max-height:28px;display:flex}.arkynPaginationSpread>svg{color:var(--text-muted);width:16px;height:16px}}

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

@@ -0,0 +1,9 @@
+@layer arkyn{.arkynPagination{justify-content:center;align-items:center;gap:8px;display:flex}}
+
+@layer arkyn{.arkynChevronPageButton{background-color:inherit;border:none;border-radius:8px;justify-content:center;align-items:center;min-width:28px;max-width:28px;min-height:28px;max-height:28px;display:flex}.arkynChevronPageButton>svg{color:var(--text-muted);width:20px;height:20px}.arkynChevronPageButton:hover{filter:brightness(.98);cursor:pointer}html.dark .arkynChevronPageButton:hover{filter:brightness(1.2)}.arkynChevronPageButton:disabled{filter:brightness();cursor:not-allowed;opacity:.5}}
+
+@layer arkyn{.arkynPaginationCurrentButton{background-color:rgb(var(--spotlight-primary));color:var(--white);text-align:center;border:none;border-radius:8px;justify-content:center;align-items:center;min-width:28px;min-height:28px;font-size:14px;font-weight:500;line-height:14px;display:flex}}
+
+@layer arkyn{.arkynPaginationPageButton{background-color:inherit;min-width:28px;max-width:28px;min-height:28px;max-height:28px;color:var(--text-body);border:none;border-radius:8px;justify-content:center;align-items:center;font-size:14px;font-weight:600;display:flex}.arkynPaginationPageButton:hover{filter:brightness(.98);cursor:pointer}html.dark .arkynPaginationPageButton:hover{filter:brightness(1.2)}}
+
+@layer arkyn{.arkynPaginationSpread{color:var(--text-muted);background-color:#0000;border:none;justify-content:center;align-items:center;min-width:28px;max-width:28px;min-height:28px;max-height:28px;display:flex}.arkynPaginationSpread>svg{color:var(--text-muted);width:16px;height:16px}}

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

@@ -102,3 +102,5 @@ function m(m) {
 }
 //#endregion
 export { m as PhoneInput };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/phoneInput/index.tsx"],"sourcesContent":["import {\n\tfindCountryMask,\n\tformatToPhone,\n\tremoveNonNumeric,\n} from \"@arkyn/shared\";\nimport { countries } from \"@arkyn/templates\";\nimport { useId, useRef, useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\n\nimport { PhoneInputContainer } from \"./phoneInputContainer\";\nimport { PhoneInputCountriesOverlay } from \"./phoneInputCountriesOverlay\";\nimport { PhoneInputCountryOption } from \"./phoneInputCountryOption\";\nimport { PhoneInputCountryOptionsContainer } from \"./phoneInputCountryOptionsContainer\";\nimport { PhoneInputCountrySelector } from \"./phoneInputCountrySelector\";\nimport { PhoneInputMask } from \"./phoneInputMask\";\n\ntype CountryType = {\n\tname: string;\n\tcode: string;\n\tiso: string;\n\tflag: string;\n\tmask: string | string[];\n};\n\ntype PhoneInputProps = {\n\t/** Optional HTML id for the visible phone text input. */\n\tid?: 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/** Validation error message (overrides the `useForm` context error for this field). */\n\terrorMessage?: string;\n\t/** Optional label text displayed above the input. */\n\tlabel?: string;\n\t/** Displays an asterisk on the label to signal a required field. */\n\tshowAsterisk?: boolean;\n\t/** Shows a loading state and disables interactions. @default false */\n\tisLoading?: boolean;\n\t/**\n\t * Input 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 * @default \"solid\"\n\t */\n\tvariant?: \"solid\" | \"outline\";\n\t/** Additional CSS class applied to the field wrapper. */\n\tclassName?: string;\n\t/** Uncontrolled default phone value (numeric string with or without country code). @default \"\" */\n\tdefaultValue?: string;\n\t/** Text displayed when no country matches the search query. @default \"Nenhum país encontrado\" */\n\tnotFoundCountryText?: string;\n\t/** Field name for form submission (stored as numeric string with country code). Required. */\n\tname: string;\n\t/** Placeholder for the country search input. @default \"Pesquisar país\" */\n\tsearchCountryPlaceholder?: string;\n\t/** ISO 3166-1 alpha-2 code of the initially selected country. @default \"BR\" */\n\tdefaultCountryIso?: (typeof countries)[number][\"iso\"];\n\t/** Callback fired on value change. Receives a numeric string prefixed with the country dial code. */\n\tonChange?: (e: string) => void;\n\t/** Controlled phone value (without country code). */\n\tvalue?: string;\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 \"vertical\"\n\t */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n};\n\n/**\n * PhoneInput — phone number field with an integrated country selector and automatic mask formatting.\n *\n * The visible input is masked according to the selected country's phone format.\n * The hidden `<input>` stores a numeric string prefixed with the country dial code 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 input.\n * @param props.showAsterisk - Appends `*` to the label.\n * @param props.errorMessage - Validation error message.\n * @param props.size - Input size (`md` | `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.disabled - Disables all interactions. Default: false\n * @param props.readOnly - Prevents editing. Default: false\n * @param props.isLoading - Shows loading state and disables interactions. Default: false\n * @param props.defaultValue - Uncontrolled default phone value.\n * @param props.value - Controlled phone value (without country code).\n * @param props.onChange - Callback fired on change — receives numeric string with country code.\n * @param props.defaultCountryIso - ISO code of the initially selected country. Default: \"BR\"\n * @param props.searchCountryPlaceholder - Placeholder for country search. Default: \"Pesquisar país\"\n * @param props.notFoundCountryText - Text shown when no country matches. Default: \"Nenhum país encontrado\"\n * @param props.orientation - Layout direction. Default: \"vertical\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n *\n * @returns PhoneInput JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <PhoneInput name=\"phone\" label=\"Phone\" />\n *\n * // Controlled with outline variant\n * <PhoneInput\n *   name=\"contactPhone\"\n *   label=\"Contact Phone\"\n *   value={phone}\n *   onChange={(v) => setPhone(v)}\n *   variant=\"outline\"\n *   size=\"lg\"\n * />\n *\n * // Pre-selected country (US)\n * <PhoneInput\n *   name=\"phone\"\n *   label=\"Phone\"\n *   defaultCountryIso=\"US\"\n *   showAsterisk\n * />\n * ```\n */\nfunction PhoneInput(props: PhoneInputProps) {\n\tconst {\n\t\tvalue: rawValue,\n\t\tlabel,\n\t\tclassName: wrapperClassName = \"\",\n\t\tdisabled = false,\n\t\terrorMessage: baseErrorMessage,\n\t\tisLoading = false,\n\t\treadOnly = false,\n\t\tsize = \"md\",\n\t\tdefaultValue = \"\",\n\t\tvariant = \"solid\",\n\t\tshowAsterisk,\n\t\tname,\n\t\tonChange,\n\t\tsearchCountryPlaceholder = \"Pesquisar país\",\n\t\tnotFoundCountryText = \"Nenhum país encontrado\",\n\t\tid,\n\t\tunShowFieldTemplate = false,\n\t\torientation = \"vertical\",\n\t} = props;\n\n\t// biome-ignore lint/style/noNonNullAssertion: \"BR\" is always present in the countries list\n\tconst brasilCountry = countries.find((country) => country.iso === \"BR\")!;\n\n\tconst defaultData = defaultValue ? formatToPhone(defaultValue) : \"\";\n\tconst defaultCountry: CountryType = defaultValue\n\t\t? findCountryMask(defaultValue)[1]\n\t\t: brasilCountry;\n\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst [search, setSearch] = useState(\"\");\n\tconst [showCountryOptions, setShowCountryOptions] = useState(false);\n\tconst [internalValue, setValue] = useState(defaultData);\n\tconst value = rawValue !== undefined ? rawValue : internalValue;\n\n\tconst [currentCountry, setCurrentCountry] = useState(defaultCountry);\n\n\tconst { fieldErrors } = useForm();\n\n\tconst phoneInputRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst phoneInputId = id || generatedId;\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst isDisabled = disabled || isLoading;\n\n\tconst inputPhoneMaskRef = useRef<HTMLInputElement>(null);\n\n\tfunction handleContainerFocus() {\n\t\tif (isDisabled) return;\n\t\tif (isFocused || showCountryOptions) return;\n\n\t\tsetIsFocused(true);\n\t\tif (inputPhoneMaskRef.current) inputPhoneMaskRef.current.focus();\n\t}\n\n\tfunction handleOpenCountryOptions() {\n\t\tsetShowCountryOptions(true);\n\t\tsetIsFocused(true);\n\t}\n\n\tfunction handleCloseCountryOptions() {\n\t\tsetShowCountryOptions(false);\n\t\tsetIsFocused(false);\n\t}\n\n\tfunction handleInputFocus() {\n\t\tsetIsFocused(true);\n\t}\n\n\tfunction handleInputBlur() {\n\t\tsetIsFocused(false);\n\t}\n\n\tfunction filterCountryFunction(country: CountryType) {\n\t\treturn country.name.toLowerCase().includes(search.toLowerCase());\n\t}\n\n\tfunction inputValue(props?: string) {\n\t\tlet returnValue = currentCountry.code;\n\t\treturnValue += removeNonNumeric(props || value);\n\t\treturn returnValue;\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<PhoneInputContainer\n\t\t\t\tdisabled={isDisabled}\n\t\t\t\tisError={isError}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tisFocused={isFocused}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tsize={size}\n\t\t\t\tvariant={variant}\n\t\t\t\tonFocus={handleContainerFocus}\n\t\t\t>\n\t\t\t\t<PhoneInputCountrySelector\n\t\t\t\t\tcurrentCountry={currentCountry}\n\t\t\t\t\tonClick={handleOpenCountryOptions}\n\t\t\t\t\tsize={size}\n\t\t\t\t/>\n\n\t\t\t\t<PhoneInputCountryOptionsContainer\n\t\t\t\t\tisOpen={isDisabled ? false : readOnly ? false : showCountryOptions}\n\t\t\t\t\tsearch={search}\n\t\t\t\t\tplaceholder={searchCountryPlaceholder}\n\t\t\t\t\tonSearch={setSearch}\n\t\t\t\t>\n\t\t\t\t\t{countries\n\t\t\t\t\t\t.filter((country) => filterCountryFunction(country))\n\t\t\t\t\t\t.map((country) => (\n\t\t\t\t\t\t\t<PhoneInputCountryOption\n\t\t\t\t\t\t\t\tkey={country.iso}\n\t\t\t\t\t\t\t\tcountry={country}\n\t\t\t\t\t\t\t\thandleChangeValue={() => {\n\t\t\t\t\t\t\t\t\tsetCurrentCountry(country);\n\t\t\t\t\t\t\t\t\tsetShowCountryOptions(false);\n\t\t\t\t\t\t\t\t\tsetValue(\"\");\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tisActive={country.iso === currentCountry.iso}\n\t\t\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t{countries.filter((country) => filterCountryFunction(country))\n\t\t\t\t\t\t.length === 0 && <p>{notFoundCountryText}</p>}\n\t\t\t\t</PhoneInputCountryOptionsContainer>\n\n\t\t\t\t<PhoneInputCountriesOverlay\n\t\t\t\t\tisOpen={isDisabled ? false : readOnly ? false : showCountryOptions}\n\t\t\t\t\tonClick={handleCloseCountryOptions}\n\t\t\t\t/>\n\n\t\t\t\t<PhoneInputMask\n\t\t\t\t\tid={phoneInputId}\n\t\t\t\t\tref={inputPhoneMaskRef}\n\t\t\t\t\treadonly={readOnly}\n\t\t\t\t\tcurrentCountry={currentCountry}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\tonBlur={handleInputBlur}\n\t\t\t\t\tonFocus={handleInputFocus}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\tsetValue(e);\n\t\t\t\t\t\tonChange?.(inputValue(e));\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t<input\n\t\t\t\t\tref={phoneInputRef}\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={inputValue()}\n\t\t\t\t/>\n\t\t\t</PhoneInputContainer>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { PhoneInput };\n"],"mappings":"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"}

package/dist/modules/components/phoneInput/phoneInputContainer/index.js

@@ -11,3 +11,5 @@ function t(t) {
 }
 //#endregion
 export { t as PhoneInputContainer };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/phoneInput/phoneInputContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/phoneInput/phoneInputContainer/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport \"./styles.css\";\n\ntype PhoneInputContainerProps = {\n\tchildren: ReactNode;\n\tonFocus: () => void;\n\tisError: boolean;\n\tdisabled: boolean;\n\treadOnly: boolean;\n\tisLoading: boolean;\n\tisFocused: boolean;\n\tclassName?: string;\n\tvariant: \"solid\" | \"outline\";\n\tsize: \"md\" | \"lg\";\n};\n\nfunction PhoneInputContainer(props: PhoneInputContainerProps) {\n\tconst {\n\t\tchildren,\n\t\tonFocus,\n\t\tdisabled,\n\t\tisError,\n\t\tisLoading,\n\t\tisFocused,\n\t\tclassName: baseClassName = \"\",\n\t\treadOnly,\n\t\tvariant,\n\t\tsize,\n\t} = props;\n\n\tconst errored = isError ? \"errored\" : \"\";\n\tconst opacity = disabled || readOnly || isLoading ? \"opacity\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\n\tconst className = `arkynPhoneInputContainer ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;\n\n\treturn (\n\t\t<section className={className.trim()} onClick={onFocus}>\n\t\t\t{children}\n\t\t</section>\n\t);\n}\n\nexport { PhoneInputContainer };\n"],"mappings":";;;AAgBA,SAAS,EAAoB,GAAiC;CAC7D,IAAM,EACL,aACA,YACA,aACA,YACA,cACA,cACA,WAAW,IAAgB,IAC3B,aACA,YACA,YACG;CAQJ,OACC,kBAAC,WAAD;EAAS,WAAW,4BAHyB,EAAQ,GAAG,EAAK,GAH9C,KAAY,KAAY,IAAY,YAAY,GAGS,GAJzD,IAAU,YAAY,GAI8C,GAFpE,IAAY,YAAY,GAEuD,GAAG,IAGnE,KAAK;EAAG,SAAS;EAC7C;CACO,CAAA;AAEX"}

package/dist/modules/components/phoneInput/phoneInputContainer/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynPhoneInputContainer{border:1px solid #0000;border-radius:6px;outline:1px solid #0000;justify-content:start;align-items:center;gap:8px;width:100%;min-height:38px;max-height:38px;padding:0 16px;display:flex;position:relative}.arkynPhoneInputContainer:hover{cursor:text}.arkynPhoneInputContainer.opacity{opacity:.5}.arkynPhoneInputContainer.solid{border-color:var(--border);background-color:var(--input-background)}.arkynPhoneInputContainer.solid.errored{border-color:rgb(var(--spotlight-danger));outline-color:rgb(var(--spotlight-danger))}.arkynPhoneInputContainer:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary));outline-color:rgb(var(--spotlight-primary))}.arkynPhoneInputContainer.outline{border-color:var(--border)}.arkynPhoneInputContainer.outline.errored{border-color:rgb(var(--spotlight-danger));outline-color:rgb(var(--spotlight-danger))}.arkynPhoneInputContainer:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary));outline-color:rgb(var(--spotlight-primary))}.arkynPhoneInputContainer.md{min-height:42px;max-height:42px}.arkynPhoneInputContainer.lg{min-height:46px;max-height:46px}}

package/dist/modules/components/phoneInput/phoneInputCountriesOverlay/index.js

@@ -10,3 +10,5 @@ function t(t) {
 }
 //#endregion
 export { t as PhoneInputCountriesOverlay };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/phoneInput/phoneInputCountriesOverlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/phoneInput/phoneInputCountriesOverlay/index.tsx"],"sourcesContent":["import \"./styles.css\";\n\ntype PhoneInputCountriesOverlayProps = {\n\tisOpen: boolean;\n\tonClick: () => void;\n};\n\nfunction PhoneInputCountriesOverlay(props: PhoneInputCountriesOverlayProps) {\n\tconst { isOpen, onClick } = props;\n\tif (!isOpen) return null;\n\treturn (\n\t\t<aside className=\"arkynPhoneInputCountriesOverlay\" onClick={onClick} />\n\t);\n}\n\nexport { PhoneInputCountriesOverlay };\n"],"mappings":";;;AAOA,SAAS,EAA2B,GAAwC;CAC3E,IAAM,EAAE,WAAQ,eAAY;CAE5B,OADK,IAEJ,kBAAC,SAAD;EAAO,WAAU;EAA2C;CAAU,CAAA,IAFnD;AAIrB"}

package/dist/modules/components/phoneInput/phoneInputCountriesOverlay/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynPhoneInputCountriesOverlay{z-index:5;position:fixed;inset:0}}

package/dist/modules/components/phoneInput/phoneInputCountryOption/index.js

@@ -22,3 +22,5 @@ function r(r) {
 }
 //#endregion
 export { r as PhoneInputCountryOption };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/phoneInput/phoneInputCountryOption/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/phoneInput/phoneInputCountryOption/index.tsx"],"sourcesContent":["import { Check } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype CountryType = {\n\tname: string;\n\tcode: string;\n\tiso: string;\n\tflag: string;\n\tmask: string | string[];\n};\n\ntype PhoneInputCountryOptionProps = {\n\tcountry: CountryType;\n\tsize: \"md\" | \"lg\";\n\tisActive: boolean;\n\thandleChangeValue: (country: CountryType) => void;\n};\n\nfunction PhoneInputCountryOption(props: PhoneInputCountryOptionProps) {\n\tconst { country, isActive, handleChangeValue, size } = props;\n\n\tconst hasActive = isActive ? \"active\" : \"\";\n\tconst className = `arkynPhoneInputCountryOption ${size} ${hasActive}`;\n\n\treturn (\n\t\t<div onClick={() => handleChangeValue(country)} className={className}>\n\t\t\t<img src={country.flag} alt={country.name} className=\"flag\" />\n\t\t\t{country.name} <span>{country.code}</span>\n\t\t\t<Check className=\"check\" />\n\t\t</div>\n\t);\n}\n\nexport { PhoneInputCountryOption };\n"],"mappings":";;;;AAkBA,SAAS,EAAwB,GAAqC;CACrE,IAAM,EAAE,YAAS,aAAU,sBAAmB,YAAS;CAKvD,OACC,kBAAC,OAAD;EAAK,eAAe,EAAkB,CAAO;EAAc,WAAA,gCAHV,EAAK,GADrC,IAAW,WAAW;YAIvC;GACC,kBAAC,OAAD;IAAK,KAAK,EAAQ;IAAM,KAAK,EAAQ;IAAM,WAAU;GAAQ,CAAA;GAC5D,EAAQ;GAAK;GAAC,kBAAC,QAAD,EAAA,UAAO,EAAQ,KAAW,CAAA;GACzC,kBAAC,GAAD,EAAO,WAAU,QAAS,CAAA;EACtB;;AAEP"}

package/dist/modules/components/phoneInput/phoneInputCountryOption/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynPhoneInputCountryOption{color:var(--text-body);-webkit-user-select:none;user-select:none;background-color:var(--background-foreground);align-items:center;gap:10px;font-weight:400;line-height:21.79px;display:flex}.arkynPhoneInputCountryOption>span{color:var(--text-muted);font-size:14px;font-weight:300;line-height:21.79px}.arkynPhoneInputCountryOption.md{padding:8px 16px;font-size:14px}.arkynPhoneInputCountryOption.lg{padding:8px 16px;font-size:16px}.arkynPhoneInputCountryOption .flag{border-radius:4px;max-width:30px;max-height:20px}.arkynPhoneInputCountryOption .check{width:20px;height:20px;color:rgb(var(--spotlight-primary));margin-left:auto;display:none}.arkynPhoneInputCountryOption:hover{cursor:pointer;filter:brightness(.95)}.arkynPhoneInputCountryOption.active{color:var(--text-heading);filter:brightness(.95);font-weight:600}.arkynPhoneInputCountryOption.active svg{display:unset}}

package/dist/modules/components/phoneInput/phoneInputCountryOptionsContainer/index.js

@@ -32,3 +32,5 @@ function o(o) {
 }
 //#endregion
 export { o as PhoneInputCountryOptionsContainer };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/phoneInput/phoneInputCountryOptionsContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/phoneInput/phoneInputCountryOptionsContainer/index.tsx"],"sourcesContent":["import {\n\ttype ChangeEvent,\n\ttype ReactNode,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport { useScrollLock } from \"../../../hooks/useScrollLock\";\nimport \"./styles.css\";\n\ntype PhoneInputCountryOptionsContainerProps = {\n\tisOpen: boolean;\n\tchildren: ReactNode;\n\tsearch: string;\n\tplaceholder: string;\n\tonSearch: (value: string) => void;\n};\n\nfunction PhoneInputCountryOptionsContainer(\n\tprops: PhoneInputCountryOptionsContainerProps,\n) {\n\tconst { children, isOpen, onSearch, search, placeholder } = props;\n\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst [position, setPosition] = useState<\"bottom\" | \"top\">(\"bottom\");\n\n\tfunction handleSearch(e: ChangeEvent<HTMLInputElement>) {\n\t\tonSearch(e.target.value);\n\t}\n\n\tuseScrollLock(isOpen);\n\n\tuseEffect(() => {\n\t\tif (!isOpen) 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}, [isOpen]);\n\n\tif (!isOpen) return null;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`arkynPhoneInputCountryOptionsContainer ${position}`}\n\t\t\tref={containerRef}\n\t\t>\n\t\t\t<input\n\t\t\t\ttype=\"search\"\n\t\t\t\tname=\"search-select\"\n\t\t\t\tclassName=\"arkynPhoneInputCountryOptionsContainerSearchSelect\"\n\t\t\t\tvalue={search}\n\t\t\t\tid=\"input-search\"\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tonChange={handleSearch}\n\t\t\t/>\n\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nexport { PhoneInputCountryOptionsContainer };\n"],"mappings":";;;;;AAkBA,SAAS,EACR,GACC;CACD,IAAM,EAAE,aAAU,WAAQ,aAAU,WAAQ,mBAAgB,GAEtD,IAAe,EAAuB,IAAI,GAC1C,CAAC,GAAU,KAAe,EAA2B,QAAQ;CAEnE,SAAS,EAAa,GAAkC;EACvD,EAAS,EAAE,OAAO,KAAK;CACxB;CAkCA,OAhCA,EAAc,CAAM,GAEpB,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,CAAM,CAAC,GAEN,IAGJ,kBAAC,OAAD;EACC,WAAW,0CAA0C;EACrD,KAAK;YAFN,CAIC,kBAAC,SAAD;GACC,MAAK;GACL,MAAK;GACL,WAAU;GACV,OAAO;GACP,IAAG;GACU;GACb,UAAU;EACV,CAAA,GAEA,CACG;MAlBc;AAoBrB"}

package/dist/modules/components/phoneInput/phoneInputCountryOptionsContainer/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynPhoneInputCountryOptionsContainer{z-index:7;border:1px solid var(--border);background-color:var(--background-foreground);border-radius:6px;flex-direction:column;flex:1;height:max-content;max-height:200px;list-style:none;display:flex;position:absolute;left:-2px;right:-2px;overflow:auto;box-shadow:0 4px 8px #0000001a}.arkynPhoneInputCountryOptionsContainer.bottom{top:calc(100% + 5px)}.arkynPhoneInputCountryOptionsContainer.top{bottom:calc(100% + 5px)}.arkynPhoneInputCountryOptionsContainer>p{text-align:center;color:var(--text-body);padding:16px;font-size:14px;font-weight:400;line-height:21.79px}.arkynPhoneInputCountryOptionsContainerSearchSelect{border:none;border-bottom:1px solid var(--border);color:var(--text-heading);background-color:var(--background-foreground);outline:none;padding:16px;font-size:14px}.arkynPhoneInputCountryOptionsContainerSearchSelect::placeholder{color:var(--text-muted)}}

package/dist/modules/components/phoneInput/phoneInputCountrySelector/index.js

@@ -24,3 +24,5 @@ function i(i) {
 }
 //#endregion
 export { i as PhoneInputCountrySelector };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/phoneInput/phoneInputCountrySelector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/phoneInput/phoneInputCountrySelector/index.tsx"],"sourcesContent":["import { ChevronDown } from \"lucide-react\";\n\nimport { Divider } from \"../../divider\";\nimport \"./styles.css\";\n\ntype CountryType = {\n\tname: string;\n\tcode: string;\n\tiso: string;\n\tflag: string;\n\tmask: string | string[];\n};\n\ntype PhoneInputCountrySelectorProps = {\n\tsize: \"md\" | \"lg\";\n\tcurrentCountry: CountryType;\n\tonClick: () => void;\n};\n\nfunction PhoneInputCountrySelector(props: PhoneInputCountrySelectorProps) {\n\tconst { currentCountry, onClick } = props;\n\n\treturn (\n\t\t<div className=\"phoneInputSelectCountry\" onClick={onClick}>\n\t\t\t<img\n\t\t\t\tclassName=\"flag\"\n\t\t\t\tsrc={currentCountry.flag}\n\t\t\t\talt={currentCountry.name}\n\t\t\t/>\n\t\t\t<ChevronDown className=\"chevronDown\" strokeWidth={2.5} />\n\t\t\t<Divider orientation=\"vertical\" />\n\t\t</div>\n\t);\n}\n\nexport { PhoneInputCountrySelector };\n"],"mappings":";;;;;AAmBA,SAAS,EAA0B,GAAuC;CACzE,IAAM,EAAE,mBAAgB,eAAY;CAEpC,OACC,kBAAC,OAAD;EAAK,WAAU;EAAmC;YAAlD;GACC,kBAAC,OAAD;IACC,WAAU;IACV,KAAK,EAAe;IACpB,KAAK,EAAe;GACpB,CAAA;GACD,kBAAC,GAAD;IAAa,WAAU;IAAc,aAAa;GAAM,CAAA;GACxD,kBAAC,GAAD,EAAS,aAAY,WAAY,CAAA;EAC7B;;AAEP"}

package/dist/modules/components/phoneInput/phoneInputCountrySelector/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.phoneInputSelectCountry{cursor:pointer;align-items:center;gap:8px;min-width:58px;display:flex}.phoneInputSelectCountry .flag{border-radius:4px;max-width:30px;max-height:20px}.phoneInputSelectCountry .chevronDown{min-width:12px;max-width:12px;min-height:12px;max-height:12px;color:var(--text-muted)}.phoneInputSelectCountry>.arkynDivider{min-width:1px;min-height:20px}}

package/dist/modules/components/phoneInput/phoneInputMask/index.js

@@ -51,3 +51,5 @@ var u = a((e, t) => /* @__PURE__ */ c("input", {
 });
 //#endregion
 export { d as PhoneInputMask };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/phoneInput/phoneInputMask/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/phoneInput/phoneInputMask/index.tsx"],"sourcesContent":["import { InputMask } from \"@react-input/mask\";\nimport {\n\ttype ChangeEvent,\n\tforwardRef,\n\ttype InputHTMLAttributes,\n\tuseEffect,\n\tuseRef,\n} from \"react\";\n\nimport {\n\tapplyMask,\n\tclear,\n\tgetMask,\n\tMAX_LENGTH,\n\tTYPES,\n} from \"../../../utils/phoneInputUtilities\";\n\nimport \"./style.css\";\n\ntype CountryType = {\n\tname: string;\n\tcode: string;\n\tiso: string;\n\tflag: string;\n\tmask: string | string[];\n};\n\ntype PhoneInputMaskProps = {\n\tonFocus: () => void;\n\tonBlur: () => void;\n\tdisabled: boolean;\n\treadonly: boolean;\n\tsize: \"md\" | \"lg\";\n\tcurrentCountry: CountryType;\n\tvalue: string;\n\tonChange: (e: string) => void;\n\tid: string;\n};\n\nconst BaseInput = forwardRef<\n\tHTMLInputElement,\n\tInputHTMLAttributes<HTMLInputElement>\n>((props, ref) => {\n\treturn <input ref={ref} {...props} />;\n});\n\nconst PhoneInputMask = forwardRef<HTMLInputElement, PhoneInputMaskProps>(\n\t(props, ref) => {\n\t\tconst {\n\t\t\tonFocus,\n\t\t\treadonly,\n\t\t\tonBlur,\n\t\t\tsize,\n\t\t\tonChange,\n\t\t\tvalue,\n\t\t\tcurrentCountry,\n\t\t\tdisabled,\n\t\t\tid,\n\t\t} = props;\n\n\t\tconst isFirstRender = useRef(true);\n\t\tconst onChangeRef = useRef(onChange);\n\t\tonChangeRef.current = onChange;\n\n\t\tconst mask =\n\t\t\ttypeof currentCountry.mask === \"string\"\n\t\t\t\t? currentCountry.mask\n\t\t\t\t: currentCountry.mask[0];\n\n\t\tuseEffect(() => {\n\t\t\tif (isFirstRender.current) {\n\t\t\t\tisFirstRender.current = false;\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonChangeRef.current(mask);\n\t\t}, [mask]);\n\n\t\tconst className = `phoneInputMask ${size}`;\n\n\t\tfunction handleChange(event: ChangeEvent<HTMLInputElement>) {\n\t\t\tlet value = clear(event.target.value);\n\t\t\tconst mask = getMask(value);\n\n\t\t\tconst nextLength = value.length;\n\t\t\tif (nextLength > MAX_LENGTH) return;\n\n\t\t\tvalue = applyMask(value, TYPES[mask] as \"EIGHT\" | \"NINE\");\n\t\t\tevent.target.value = value;\n\n\t\t\tonChange(value);\n\t\t}\n\n\t\tif (currentCountry.code === \"+55\") {\n\t\t\treturn (\n\t\t\t\t<input\n\t\t\t\t\tid={id}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tonFocus={onFocus}\n\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\treadOnly={readonly}\n\t\t\t\t\tref={ref}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<InputMask\n\t\t\t\tid={id}\n\t\t\t\tvalue={value}\n\t\t\t\treadOnly={readonly}\n\t\t\t\tonChange={(e) => onChange(e.target.value)}\n\t\t\t\tclassName={className}\n\t\t\t\tcomponent={BaseInput}\n\t\t\t\tonFocus={onFocus}\n\t\t\t\tonBlur={onBlur}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tmask={mask}\n\t\t\t\tshowMask\n\t\t\t\treplacement={{ _: /\\d/ }}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nexport { PhoneInputMask };\n"],"mappings":";;;;;;AAuCA,IAAM,IAAY,GAGf,GAAO,MACF,kBAAC,SAAD;CAAY;CAAK,GAAI;AAAQ,CAAA,CACpC,GAEK,IAAiB,GACrB,GAAO,MAAQ;CACf,IAAM,EACL,YACA,aACA,WACA,SACA,aACA,UACA,mBACA,aACA,UACG,GAEE,IAAgB,EAAO,EAAI,GAC3B,IAAc,EAAO,CAAQ;CACnC,EAAY,UAAU;CAEtB,IAAM,IACL,OAAO,EAAe,QAAS,WAC5B,EAAe,OACf,EAAe,KAAK;CAExB,QAAgB;EACf,IAAI,EAAc,SAAS;GAC1B,EAAc,UAAU;GACxB;EACD;EACA,EAAY,QAAQ,CAAI;CACzB,GAAG,CAAC,CAAI,CAAC;CAET,IAAM,IAAY,kBAAkB;CAEpC,SAAS,EAAa,GAAsC;EAC3D,IAAI,IAAQ,EAAM,EAAM,OAAO,KAAK,GAC9B,IAAO,EAAQ,CAAK;EAEP,EAAM,SACR,MAEjB,IAAQ,EAAU,GAAO,EAAM,EAAyB,GACxD,EAAM,OAAO,QAAQ,GAErB,EAAS,CAAK;CACf;CAkBA,OAhBI,EAAe,SAAS,QAE1B,kBAAC,SAAD;EACK;EACG;EACP,UAAU;EACC;EACF;EACD;EACE;EACV,UAAU;EACL;CACL,CAAA,IAKF,kBAAC,GAAD;EACK;EACG;EACP,UAAU;EACV,WAAW,MAAM,EAAS,EAAE,OAAO,KAAK;EAC7B;EACX,WAAW;EACF;EACD;EACE;EACJ;EACN,UAAA;EACA,aAAa,EAAE,GAAG,KAAK;EAClB;CACL,CAAA;AAEH,CACD"}

package/dist/modules/components/phoneInput/phoneInputMask/style.css

@@ -0,0 +1 @@
+@layer arkyn{.phoneInputMask{width:100%;color:var(--text-heading);background:0 0;border:none;outline:none;margin-left:8px}.phoneInputMask.md{min-height:40px;max-height:40px;font-size:14px;font-weight:400;line-height:14px}.phoneInputMask.md::placeholder{font-size:14px;font-weight:400;line-height:14px}.phoneInputMask.lg{min-height:44px;max-height:44px;font-size:16px;font-weight:400;line-height:16px}.phoneInputMask.lg::placeholder{font-size:16px;font-weight:400;line-height:16px}}

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

@@ -0,0 +1,19 @@
+@layer arkyn{.arkynFieldError{color:rgb(var(--spotlight-danger));font-size:12px;font-weight:600;line-height:12px}}
+
+@layer arkyn{.arkynFieldLabel{color:var(--text-body);font-size:14px;font-weight:600;line-height:19.07px}.arkynFieldLabel.asteriskTrue:before{content:"* ";text-align:left;color:rgb(var(--spotlight-danger));font-size:12px;font-weight:600;line-height:16.34px}}
+
+@layer arkyn{.arkynFieldWrapper{gap:6px;height:max-content;display:flex}.arkynFieldWrapper.horizontal{flex-direction:row;align-items:center}.arkynFieldWrapper.horizontalReverse{flex-direction:row-reverse;align-items:center;margin-right:auto}.arkynFieldWrapper.vertical{flex-direction:column;align-items:flex-start}}
+
+@layer arkyn{.arkynPhoneInputContainer{border:1px solid #0000;border-radius:6px;outline:1px solid #0000;justify-content:start;align-items:center;gap:8px;width:100%;min-height:38px;max-height:38px;padding:0 16px;display:flex;position:relative}.arkynPhoneInputContainer:hover{cursor:text}.arkynPhoneInputContainer.opacity{opacity:.5}.arkynPhoneInputContainer.solid{border-color:var(--border);background-color:var(--input-background)}.arkynPhoneInputContainer.solid.errored{border-color:rgb(var(--spotlight-danger));outline-color:rgb(var(--spotlight-danger))}.arkynPhoneInputContainer:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary));outline-color:rgb(var(--spotlight-primary))}.arkynPhoneInputContainer.outline{border-color:var(--border)}.arkynPhoneInputContainer.outline.errored{border-color:rgb(var(--spotlight-danger));outline-color:rgb(var(--spotlight-danger))}.arkynPhoneInputContainer:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary));outline-color:rgb(var(--spotlight-primary))}.arkynPhoneInputContainer.md{min-height:42px;max-height:42px}.arkynPhoneInputContainer.lg{min-height:46px;max-height:46px}}
+
+@layer arkyn{.arkynPhoneInputCountriesOverlay{z-index:5;position:fixed;inset:0}}
+
+@layer arkyn{.arkynPhoneInputCountryOption{color:var(--text-body);-webkit-user-select:none;user-select:none;background-color:var(--background-foreground);align-items:center;gap:10px;font-weight:400;line-height:21.79px;display:flex}.arkynPhoneInputCountryOption>span{color:var(--text-muted);font-size:14px;font-weight:300;line-height:21.79px}.arkynPhoneInputCountryOption.md{padding:8px 16px;font-size:14px}.arkynPhoneInputCountryOption.lg{padding:8px 16px;font-size:16px}.arkynPhoneInputCountryOption .flag{border-radius:4px;max-width:30px;max-height:20px}.arkynPhoneInputCountryOption .check{width:20px;height:20px;color:rgb(var(--spotlight-primary));margin-left:auto;display:none}.arkynPhoneInputCountryOption:hover{cursor:pointer;filter:brightness(.95)}.arkynPhoneInputCountryOption.active{color:var(--text-heading);filter:brightness(.95);font-weight:600}.arkynPhoneInputCountryOption.active svg{display:unset}}
+
+@layer arkyn{.arkynPhoneInputCountryOptionsContainer{z-index:7;border:1px solid var(--border);background-color:var(--background-foreground);border-radius:6px;flex-direction:column;flex:1;height:max-content;max-height:200px;list-style:none;display:flex;position:absolute;left:-2px;right:-2px;overflow:auto;box-shadow:0 4px 8px #0000001a}.arkynPhoneInputCountryOptionsContainer.bottom{top:calc(100% + 5px)}.arkynPhoneInputCountryOptionsContainer.top{bottom:calc(100% + 5px)}.arkynPhoneInputCountryOptionsContainer>p{text-align:center;color:var(--text-body);padding:16px;font-size:14px;font-weight:400;line-height:21.79px}.arkynPhoneInputCountryOptionsContainerSearchSelect{border:none;border-bottom:1px solid var(--border);color:var(--text-heading);background-color:var(--background-foreground);outline:none;padding:16px;font-size:14px}.arkynPhoneInputCountryOptionsContainerSearchSelect::placeholder{color:var(--text-muted)}}
+
+@layer arkyn{.phoneInputSelectCountry{cursor:pointer;align-items:center;gap:8px;min-width:58px;display:flex}.phoneInputSelectCountry .flag{border-radius:4px;max-width:30px;max-height:20px}.phoneInputSelectCountry .chevronDown{min-width:12px;max-width:12px;min-height:12px;max-height:12px;color:var(--text-muted)}.phoneInputSelectCountry>.arkynDivider{min-width:1px;min-height:20px}}
+
+@layer arkyn{.arkynDivider{background-color:var(--border);flex:1;display:block}.arkynDivider.horizontal{width:100%;min-height:1px;max-height:1px}.arkynDivider.vertical{min-width:1px;max-width:1px;height:100%}}
+
+@layer arkyn{.phoneInputMask{width:100%;color:var(--text-heading);background:0 0;border:none;outline:none;margin-left:8px}.phoneInputMask.md{min-height:40px;max-height:40px;font-size:14px;font-weight:400;line-height:14px}.phoneInputMask.md::placeholder{font-size:14px;font-weight:400;line-height:14px}.phoneInputMask.lg{min-height:44px;max-height:44px;font-size:16px;font-weight:400;line-height:16px}.phoneInputMask.lg::placeholder{font-size:16px;font-weight:400;line-height:16px}}

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

@@ -28,3 +28,5 @@ function i(i) {
 }
 //#endregion
 export { i as Popover };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/popover/index.tsx"],"sourcesContent":["import { type ReactNode, useState } from \"react\";\n\nimport { useScrollLock } from \"../../hooks/useScrollLock\";\nimport \"./styles.css\";\n\ntype OrientationProps =\n\t| \"bottomLeft\"\n\t| \"bottomRight\"\n\t| \"topLeft\"\n\t| \"topRight\"\n\t| \"top\"\n\t| \"left\"\n\t| \"bottom\"\n\t| \"right\";\n\ntype PopoverProps = {\n\t/** Content rendered inside the floating panel. Required. */\n\tchildren: ReactNode;\n\t/** Trigger element — clicking it opens the popover. Required. */\n\tbutton: ReactNode;\n\t/** When true, clicking the popover content also closes it. @default false */\n\tcloseOnClick?: boolean;\n\t/**\n\t * Position of the floating panel relative to the trigger.\n\t * Options: `\"bottomLeft\"` | `\"bottomRight\"` | `\"topLeft\"` | `\"topRight\"` | `\"top\"` | `\"bottom\"` | `\"left\"` | `\"right\"`.\n\t * @default \"bottomLeft\"\n\t */\n\torientation?: OrientationProps;\n\t/** Additional CSS class applied to the popover root element. */\n\tclassName?: string;\n};\n\n/**\n * Popover — floating panel that appears relative to a trigger element.\n *\n * Clicking outside the popover (or clicking the content when `closeOnClick` is set)\n * dismisses it. Locks body scroll while open.\n *\n * @param props.children - Content to display inside the panel. Required.\n * @param props.button - Trigger element that opens the popover. Required.\n * @param props.closeOnClick - Clicking the content also closes the popover. Default: false\n * @param props.orientation - Panel position relative to the trigger. Default: \"bottomLeft\"\n * @param props.className - Additional CSS class for the root element.\n *\n * @returns Popover JSX element with trigger, animated panel, and outside-click overlay.\n *\n * @example\n * ```tsx\n * // Basic dropdown menu\n * <Popover button={<Button>Options</Button>} closeOnClick>\n *   <ul>\n *     <li onClick={handleEdit}>Edit</li>\n *     <li onClick={handleDelete}>Delete</li>\n *   </ul>\n * </Popover>\n *\n * // User profile menu (bottom-right)\n * <Popover\n *   button={<IconButton icon={User} aria-label=\"Account\" />}\n *   orientation=\"bottomRight\"\n *   closeOnClick\n * >\n *   <nav>\n *     <a href=\"/profile\">Profile</a>\n *     <a href=\"/settings\">Settings</a>\n *     <a href=\"/logout\">Sign out</a>\n *   </nav>\n * </Popover>\n *\n * // Filter panel (top-left)\n * <Popover button={<Badge>Filters</Badge>} orientation=\"topLeft\">\n *   <Input name=\"search\" placeholder=\"Search...\" />\n *   <Select name=\"status\" options={statusOptions} />\n * </Popover>\n * ```\n */\n\nfunction Popover(props: PopoverProps) {\n\tconst {\n\t\tchildren,\n\t\tbutton,\n\t\tcloseOnClick,\n\t\tclassName: baseClassName = \"\",\n\t\torientation = \"bottomLeft\",\n\t} = props;\n\tconst [isOpen, setIsOpen] = useState(false);\n\n\tconst visible = isOpen ? \"visibleTrue\" : \"visibleFalse\";\n\tconst className = `arkynPopover ${orientation} ${visible} ${baseClassName}`;\n\n\tfunction handleOpenPopover() {\n\t\tif (!isOpen) setIsOpen(true);\n\t}\n\n\tuseScrollLock(isOpen);\n\n\treturn (\n\t\t<div className={className} onClick={handleOpenPopover}>\n\t\t\t{button}\n\n\t\t\t<div\n\t\t\t\tstyle={{ visibility: isOpen ? \"visible\" : \"hidden\" }}\n\t\t\t\tonClick={() => closeOnClick && setIsOpen(false)}\n\t\t\t\tclassName=\"arkynPopoverContent\"\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\n\t\t\t{isOpen && (\n\t\t\t\t<div onClick={() => setIsOpen(false)} className=\"arkynPopoverOverlay\" />\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport { Popover };\n"],"mappings":";;;;;AA6EA,SAAS,EAAQ,GAAqB;CACrC,IAAM,EACL,aACA,WACA,iBACA,WAAW,IAAgB,IAC3B,iBAAc,iBACX,GACE,CAAC,GAAQ,KAAa,EAAS,EAAK,GAGpC,IAAY,gBAAgB,EAAY,GAD9B,IAAS,gBAAgB,eACgB,GAAG;CAE5D,SAAS,IAAoB;EAC5B,AAAK,KAAQ,EAAU,EAAI;CAC5B;CAIA,OAFA,EAAc,CAAM,GAGnB,kBAAC,OAAD;EAAgB;EAAW,SAAS;YAApC;GACE;GAED,kBAAC,OAAD;IACC,OAAO,EAAE,YAAY,IAAS,YAAY,SAAS;IACnD,eAAe,KAAgB,EAAU,EAAK;IAC9C,WAAU;IAET;GACG,CAAA;GAEJ,KACA,kBAAC,OAAD;IAAK,eAAe,EAAU,EAAK;IAAG,WAAU;GAAuB,CAAA;EAEpE;;AAEP"}

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

@@ -0,0 +1 @@
+@layer arkyn{.arkynPopover{position:relative}.arkynPopoverContent{z-index:3;background-color:var(--background-foreground);border-radius:8px;position:absolute;box-shadow:3px 3px 8px #0003}.arkynPopover .arkynPopoverContent{display:none}.arkynPopover.visibleTrue .arkynPopoverContent{display:unset}.arkynPopover.bottomLeft .arkynPopoverContent{bottom:-5px;right:0;transform:translateY(100%)}.arkynPopover.bottomRight .arkynPopoverContent{bottom:-5px;left:0;transform:translateY(100%)}.arkynPopover.topLeft .arkynPopoverContent{top:-5px;right:0;transform:translateY(-100%)}.arkynPopover.topRight .arkynPopoverContent{top:-5px;left:0;transform:translateY(-100%)}.arkynPopover.bottom .arkynPopoverContent{top:calc(100% + 5px);left:50%;transform:translate(-50%)}.arkynPopover.top .arkynPopoverContent{bottom:calc(100% + 5px);left:50%;transform:translate(-50%)}.arkynPopover.left .arkynPopoverContent{bottom:50%;right:calc(100% + 5px);transform:translateY(50%)}.arkynPopover.right .arkynPopoverContent{bottom:50%;left:calc(100% + 5px);transform:translateY(50%)}.arkynPopoverOverlay{z-index:1;position:fixed;inset:0}}

package/dist/modules/components/radio/radioBox/index.js

@@ -23,3 +23,5 @@ function r(r) {
 }
 //#endregion
 export { r as RadioBox };
+
+//# sourceMappingURL=index.js.map