npm - @arkyn/components - Versions diffs - 3.0.2 → 3.0.4 - Mend

@arkyn/components 3.0.2 → 3.0.4

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

Files changed (196) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/imageUpload/index.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\n\nimport { HasFileContent } from \"./hasFileContent\";\nimport { NoFileContent } from \"./noFileContent\";\nimport \"./styles.css\";\n\ntype ImageUploadProps = {\n\t/** Field name for form submission (stores the uploaded image URL). Required. /\n\tname: string;\n\t/* Server endpoint URL that receives the `multipart/form-data` upload request. Required. /\n\taction: string;\n\t/* Pre-populated image URL displayed as a preview (e.g. an existing avatar). @default \"\" /\n\tdefaultValue?: string \| null;\n\t/* Additional CSS class applied to the wrapper element. /\n\tclassName?: string;\n\t/* Disables file selection and upload. @default false /\n\tdisabled?: boolean;\n\t/* Optional label text displayed above the upload area. /\n\tlabel?: string;\n\t/* Displays an asterisk on the label to signal a required field. @default false /\n\tshowAsterisk?: boolean;\n\t/* Label for the file-picker button after an image is selected. @default \"Alterar imagem\" /\n\tchangeImageButtonText?: string;\n\t/* Label for the file-picker button before an image is selected. @default \"Selecionar imagem\" /\n\tselectImageButtonText?: string;\n\t/* Text displayed in the drag-and-drop zone. @default \"Ou arraste e solte a imagem aqui\" /\n\tdropImageText?: string;\n\t/* HTTP method for the upload request. @default \"POST\" /\n\tmethod?: string;\n\t/* Form-data field name used for the file. @default \"file\" /\n\tfileName?: string;\n\t/* Property name in the server response that contains the image URL. @default \"url\" /\n\tfileResponseName?: string;\n\t/* Accepted image MIME types or extensions (e.g. `\"image/jpeg,image/png\"`). @default \"image/\" /\n\tacceptImage?: string;\n\t/** Callback fired after a successful upload. Receives the image URL returned by the server. /\n\tonChange?: (url: string) => void;\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 ImageUpload — drag-and-drop image uploader with server upload and image preview.\n \n Sends the file via `fetch` as `multipart/form-data` and stores the returned URL\n * 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.action - Upload endpoint URL. Required.\n * @param props.defaultValue - Pre-populated image URL displayed as preview.\n * @param props.disabled - Disables file selection and upload. Default: false\n * @param props.label - Label text displayed above the upload area.\n * @param props.showAsterisk - Appends `` to the label. Default: false\n @param props.acceptImage - Accepted MIME types or extensions. Default: \"image/\"\n @param props.method - HTTP method. Default: \"POST\"\n * @param props.fileName - Form-data field name for the file. Default: \"file\"\n * @param props.fileResponseName - Server response property containing the URL. Default: \"url\"\n * @param props.onChange - Callback fired after a successful upload — receives the image URL.\n * @param props.orientation - Layout direction. Default: \"horizontal\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n \n @returns ImageUpload JSX element wrapped in `FieldTemplate`.\n \n @example\n * ```tsx\n * // Basic\n * <ImageUpload name=\"avatar\" action=\"/api/upload/image\" />\n \n // Profile picture with existing image and label\n * <ImageUpload\n * name=\"profilePicture\"\n * action=\"/api/upload/avatar\"\n * label=\"Profile Picture\"\n * showAsterisk\n * defaultValue={user.avatarUrl}\n * selectImageButtonText=\"Choose photo\"\n * onChange={(url) => updateProfile({ avatarUrl: url })}\n * />\n \n // Restricted to JPEG/PNG\n * <ImageUpload\n * name=\"productImage\"\n * action=\"/api/upload/product\"\n * label=\"Product Image\"\n * acceptImage=\"image/jpeg,image/png\"\n * fileResponseName=\"imageUrl\"\n * />\n * ```\n /\n\nfunction ImageUpload(props: ImageUploadProps) {\n\tconst {\n\t\tname,\n\t\tdefaultValue = \"\",\n\t\tlabel,\n\t\tshowAsterisk = false,\n\t\taction,\n\t\tfileName = \"file\",\n\t\tclassName: wrapperClassName = \"\",\n\t\tmethod = \"POST\",\n\t\tacceptImage = \"image/\",\n\t\tfileResponseName = \"url\",\n\t\tchangeImageButtonText = \"Alterar imagem\",\n\t\tselectImageButtonText = \"Selecionar imagem\",\n\t\tdropImageText = \"Ou arraste e solte a imagem aqui\",\n\t\tonChange,\n\t\tdisabled = false,\n\t\tunShowFieldTemplate = false,\n\t\torientation = \"vertical\",\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\tconst fieldError = fieldErrors?.[name];\n\n\tconst [value, setValue] = useState(defaultValue);\n\tconst [error, setError] = useState(\"\");\n\tconst [file, setFile] = useState<File \| null>(null);\n\tconst [filePath, setFilePath] = useState(defaultValue);\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tasync function handleUploadImage(file: File) {\n\t\tif (disabled) return;\n\n\t\tsetIsLoading(true);\n\t\tsetFile(file);\n\t\tsetError(\"\");\n\n\t\tconst formData = new FormData();\n\t\tformData.append(fileName, file);\n\n\t\tawait fetch(action, { method: method, body: formData })\n\t\t\t.then(async (response) => await response.json())\n\t\t\t.then((response) => {\n\t\t\t\tif (response?.error) setError(response.error);\n\t\t\t\telse setValue(response?.[fileResponseName]);\n\t\t\t\tonChange?.(response?.[fileResponseName]);\n\t\t\t})\n\t\t\t.catch((error) => {\n\t\t\t\tconsole.error(error);\n\t\t\t\tsetError(\"Erro ao enviar imagem\");\n\t\t\t})\n\t\t\t.finally(() => setIsLoading(false));\n\t}\n\n\tfunction handleSelectFile(file: File) {\n\t\tif (disabled) return;\n\n\t\tsetFilePath(URL.createObjectURL(file));\n\t\thandleUploadImage(file);\n\t}\n\n\tconst errorMessage = fieldError \|\| error;\n\n\tconst hasErrorClassName = errorMessage ? \"hasError\" : \"noHasError\";\n\tconst hasImageClassName = filePath ? \"hasImage\" : \"noHasImage\";\n\tconst className = `arkynImageUpload ${hasErrorClassName} ${hasImageClassName}`;\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<div className={className}>\n\t\t\t\t<input type=\"hidden\" name={name} value={value \|\| \"\"} />\n\n\t\t\t\t{!filePath && (\n\t\t\t\t\t<NoFileContent\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\tacceptImage={acceptImage}\n\t\t\t\t\t\tdropImageText={dropImageText}\n\t\t\t\t\t\thandleSelectFile={handleSelectFile}\n\t\t\t\t\t\tselectImageButtonText={selectImageButtonText}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{filePath && (\n\t\t\t\t\t<HasFileContent\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\tacceptImage={acceptImage}\n\t\t\t\t\t\tfilePath={filePath}\n\t\t\t\t\t\thandleSelectFile={handleSelectFile}\n\t\t\t\t\t\tchangeImageButtonText={changeImageButtonText}\n\t\t\t\t\t\treSendImage={\n\t\t\t\t\t\t\terrorMessage && file ? () => handleUploadImage(file) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { ImageUpload };\n"],"mappings":";;;;;;;;AAmGA,SAAS,EAAY,GAAyB;CAC7C,IAAM,EACL,SACA,kBAAe,IACf,UACA,kBAAe,IACf,WACA,cAAW,QACX,WAAW,IAAmB,IAC9B,YAAS,QACT,iBAAc,WACd,sBAAmB,OACnB,2BAAwB,kBACxB,2BAAwB,qBACxB,mBAAgB,oCAChB,aACA,cAAW,IACX,yBAAsB,IACtB,iBAAc,eACX,GAEE,EAAE,mBAAgB,EAAQ,GAC1B,IAAa,IAAc,IAE3B,CAAC,GAAO,KAAY,EAAS,CAAY,GACzC,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,CAAC,GAAM,KAAW,EAAsB,IAAI,GAC5C,CAAC,GAAU,KAAe,EAAS,CAAY,GAC/C,CAAC,GAAW,KAAgB,EAAS,EAAK;CAEhD,eAAe,EAAkB,GAAY;EAC5C,IAAI,GAAU;EAId,AAFA,EAAa,EAAI,GACjB,EAAQ,CAAI,GACZ,EAAS,EAAE;EAEX,IAAM,IAAW,IAAI,SAAS;EAG9B,AAFA,EAAS,OAAO,GAAU,CAAI,GAE9B,MAAM,MAAM,GAAQ;GAAU;GAAQ,MAAM;EAAS,CAAC,CAAC,CACrD,KAAK,OAAO,MAAa,MAAM,EAAS,KAAK,CAAC,CAAC,CAC/C,MAAM,MAAa;GAGnB,AAFI,GAAU,QAAO,EAAS,EAAS,KAAK,IACvC,EAAS,IAAW,EAAiB,GAC1C,IAAW,IAAW,EAAiB;EACxC,CAAC,CAAC,CACD,OAAO,MAAU;GAEjB,AADA,QAAQ,MAAM,CAAK,GACnB,EAAS,uBAAuB;EACjC,CAAC,CAAC,CACD,cAAc,EAAa,EAAK,CAAC;CACpC;CAEA,SAAS,EAAiB,GAAY;EACjC,MAEJ,EAAY,IAAI,gBAAgB,CAAI,CAAC,GACrC,EAAkB,CAAI;CACvB;CAEA,IAAM,IAAe,KAAc;CAMnC,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,OAAD;GAAgB,WAAA,oBAdQ,IAAe,aAAa,aAEE,GAD9B,IAAW,aAAa;aAahD;IACC,kBAAC,SAAD;KAAO,MAAK;KAAe;KAAM,OAAO,KAAS;IAAK,CAAA;IAErD,CAAC,KACD,kBAAC,GAAD;KACW;KACC;KACE;KACE;KACG;KACK;IACvB,CAAA;IAGD,KACA,kBAAC,GAAD;KACW;KACC;KACE;KACH;KACQ;KACK;KACvB,aACC,KAAgB,UAAa,EAAkB,CAAI,IAAI,KAAA;IAExD,CAAA;GAEE;;CACS,CAAA;AAEjB"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/imageUpload/index.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\n\nimport { HasFileContent } from \"./hasFileContent\";\nimport { NoFileContent } from \"./noFileContent\";\nimport \"./styles.css\";\n\ntype ImageUploadProps = {\n\t/** Field name for form submission (stores the uploaded image URL). Required. /\n\tname: string;\n\t/* Server endpoint URL that receives the `multipart/form-data` upload request. Required. /\n\taction: string;\n\t/* Pre-populated image URL displayed as a preview (e.g. an existing avatar). @default \"\" /\n\tdefaultValue?: string \| null;\n\t/* Additional CSS class applied to the wrapper element. /\n\tclassName?: string;\n\t/* Disables file selection and upload. @default false /\n\tdisabled?: boolean;\n\t/* Optional label text displayed above the upload area. /\n\tlabel?: string;\n\t/* Displays an asterisk on the label to signal a required field. @default false /\n\tshowAsterisk?: boolean;\n\t/* Label for the file-picker button after an image is selected. @default \"Alterar imagem\" /\n\tchangeImageButtonText?: string;\n\t/* Label for the file-picker button before an image is selected. @default \"Selecionar imagem\" /\n\tselectImageButtonText?: string;\n\t/* Text displayed in the drag-and-drop zone. @default \"Ou arraste e solte a imagem aqui\" /\n\tdropImageText?: string;\n\t/* HTTP method for the upload request. @default \"POST\" /\n\tmethod?: string;\n\t/* Form-data field name used for the file. @default \"file\" /\n\tfileName?: string;\n\t/* Property name in the server response that contains the image URL. @default \"url\" /\n\tfileResponseName?: string;\n\t/* Accepted image MIME types or extensions (e.g. `\"image/jpeg,image/png\"`). @default \"image/\" /\n\tacceptImage?: string;\n\t/** Callback fired after a successful upload. Receives the image URL returned by the server. /\n\tonChange?: (url: string) => void;\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 ImageUpload, drag-and-drop image uploader with server upload and image preview.\n \n Sends the file via `fetch` as `multipart/form-data` and stores the returned URL\n * 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.action - Upload endpoint URL. Required.\n * @param props.defaultValue - Pre-populated image URL displayed as preview.\n * @param props.disabled - Disables file selection and upload. Default: false\n * @param props.label - Label text displayed above the upload area.\n * @param props.showAsterisk - Appends `` to the label. Default: false\n @param props.acceptImage - Accepted MIME types or extensions. Default: \"image/\"\n @param props.method - HTTP method. Default: \"POST\"\n * @param props.fileName - Form-data field name for the file. Default: \"file\"\n * @param props.fileResponseName - Server response property containing the URL. Default: \"url\"\n * @param props.onChange - Callback fired after a successful upload, receives the image URL.\n * @param props.orientation - Layout direction. Default: \"horizontal\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n \n @returns ImageUpload JSX element wrapped in `FieldTemplate`.\n \n @example\n * ```tsx\n * // Basic\n * <ImageUpload name=\"avatar\" action=\"/api/upload/image\" />\n \n // Profile picture with existing image and label\n * <ImageUpload\n * name=\"profilePicture\"\n * action=\"/api/upload/avatar\"\n * label=\"Profile Picture\"\n * showAsterisk\n * defaultValue={user.avatarUrl}\n * selectImageButtonText=\"Choose photo\"\n * onChange={(url) => updateProfile({ avatarUrl: url })}\n * />\n \n // Restricted to JPEG/PNG\n * <ImageUpload\n * name=\"productImage\"\n * action=\"/api/upload/product\"\n * label=\"Product Image\"\n * acceptImage=\"image/jpeg,image/png\"\n * fileResponseName=\"imageUrl\"\n * />\n * ```\n /\n\nfunction ImageUpload(props: ImageUploadProps) {\n\tconst {\n\t\tname,\n\t\tdefaultValue = \"\",\n\t\tlabel,\n\t\tshowAsterisk = false,\n\t\taction,\n\t\tfileName = \"file\",\n\t\tclassName: wrapperClassName = \"\",\n\t\tmethod = \"POST\",\n\t\tacceptImage = \"image/\",\n\t\tfileResponseName = \"url\",\n\t\tchangeImageButtonText = \"Alterar imagem\",\n\t\tselectImageButtonText = \"Selecionar imagem\",\n\t\tdropImageText = \"Ou arraste e solte a imagem aqui\",\n\t\tonChange,\n\t\tdisabled = false,\n\t\tunShowFieldTemplate = false,\n\t\torientation = \"vertical\",\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\tconst fieldError = fieldErrors?.[name];\n\n\tconst [value, setValue] = useState(defaultValue);\n\tconst [error, setError] = useState(\"\");\n\tconst [file, setFile] = useState<File \| null>(null);\n\tconst [filePath, setFilePath] = useState(defaultValue);\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tasync function handleUploadImage(file: File) {\n\t\tif (disabled) return;\n\n\t\tsetIsLoading(true);\n\t\tsetFile(file);\n\t\tsetError(\"\");\n\n\t\tconst formData = new FormData();\n\t\tformData.append(fileName, file);\n\n\t\tawait fetch(action, { method: method, body: formData })\n\t\t\t.then(async (response) => await response.json())\n\t\t\t.then((response) => {\n\t\t\t\tif (response?.error) setError(response.error);\n\t\t\t\telse setValue(response?.[fileResponseName]);\n\t\t\t\tonChange?.(response?.[fileResponseName]);\n\t\t\t})\n\t\t\t.catch((error) => {\n\t\t\t\tconsole.error(error);\n\t\t\t\tsetError(\"Erro ao enviar imagem\");\n\t\t\t})\n\t\t\t.finally(() => setIsLoading(false));\n\t}\n\n\tfunction handleSelectFile(file: File) {\n\t\tif (disabled) return;\n\n\t\tsetFilePath(URL.createObjectURL(file));\n\t\thandleUploadImage(file);\n\t}\n\n\tconst errorMessage = fieldError \|\| error;\n\n\tconst hasErrorClassName = errorMessage ? \"hasError\" : \"noHasError\";\n\tconst hasImageClassName = filePath ? \"hasImage\" : \"noHasImage\";\n\tconst className = `arkynImageUpload ${hasErrorClassName} ${hasImageClassName}`;\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<div className={className}>\n\t\t\t\t<input type=\"hidden\" name={name} value={value \|\| \"\"} />\n\n\t\t\t\t{!filePath && (\n\t\t\t\t\t<NoFileContent\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\tacceptImage={acceptImage}\n\t\t\t\t\t\tdropImageText={dropImageText}\n\t\t\t\t\t\thandleSelectFile={handleSelectFile}\n\t\t\t\t\t\tselectImageButtonText={selectImageButtonText}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{filePath && (\n\t\t\t\t\t<HasFileContent\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\tacceptImage={acceptImage}\n\t\t\t\t\t\tfilePath={filePath}\n\t\t\t\t\t\thandleSelectFile={handleSelectFile}\n\t\t\t\t\t\tchangeImageButtonText={changeImageButtonText}\n\t\t\t\t\t\treSendImage={\n\t\t\t\t\t\t\terrorMessage && file ? () => handleUploadImage(file) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { ImageUpload };\n"],"mappings":";;;;;;;;AAmGA,SAAS,EAAY,GAAyB;CAC7C,IAAM,EACL,SACA,kBAAe,IACf,UACA,kBAAe,IACf,WACA,cAAW,QACX,WAAW,IAAmB,IAC9B,YAAS,QACT,iBAAc,WACd,sBAAmB,OACnB,2BAAwB,kBACxB,2BAAwB,qBACxB,mBAAgB,oCAChB,aACA,cAAW,IACX,yBAAsB,IACtB,iBAAc,eACX,GAEE,EAAE,mBAAgB,EAAQ,GAC1B,IAAa,IAAc,IAE3B,CAAC,GAAO,KAAY,EAAS,CAAY,GACzC,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,CAAC,GAAM,KAAW,EAAsB,IAAI,GAC5C,CAAC,GAAU,KAAe,EAAS,CAAY,GAC/C,CAAC,GAAW,KAAgB,EAAS,EAAK;CAEhD,eAAe,EAAkB,GAAY;EAC5C,IAAI,GAAU;EAId,AAFA,EAAa,EAAI,GACjB,EAAQ,CAAI,GACZ,EAAS,EAAE;EAEX,IAAM,IAAW,IAAI,SAAS;EAG9B,AAFA,EAAS,OAAO,GAAU,CAAI,GAE9B,MAAM,MAAM,GAAQ;GAAU;GAAQ,MAAM;EAAS,CAAC,CAAC,CACrD,KAAK,OAAO,MAAa,MAAM,EAAS,KAAK,CAAC,CAAC,CAC/C,MAAM,MAAa;GAGnB,AAFI,GAAU,QAAO,EAAS,EAAS,KAAK,IACvC,EAAS,IAAW,EAAiB,GAC1C,IAAW,IAAW,EAAiB;EACxC,CAAC,CAAC,CACD,OAAO,MAAU;GAEjB,AADA,QAAQ,MAAM,CAAK,GACnB,EAAS,uBAAuB;EACjC,CAAC,CAAC,CACD,cAAc,EAAa,EAAK,CAAC;CACpC;CAEA,SAAS,EAAiB,GAAY;EACjC,MAEJ,EAAY,IAAI,gBAAgB,CAAI,CAAC,GACrC,EAAkB,CAAI;CACvB;CAEA,IAAM,IAAe,KAAc;CAMnC,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,OAAD;GAAgB,WAAA,oBAdQ,IAAe,aAAa,aAEE,GAD9B,IAAW,aAAa;aAahD;IACC,kBAAC,SAAD;KAAO,MAAK;KAAe;KAAM,OAAO,KAAS;IAAK,CAAA;IAErD,CAAC,KACD,kBAAC,GAAD;KACW;KACC;KACE;KACE;KACG;KACK;IACvB,CAAA;IAGD,KACA,kBAAC,GAAD;KACW;KACC;KACE;KACH;KACQ;KACK;KACvB,aACC,KAAgB,UAAa,EAAkB,CAAI,IAAI,KAAA;IAExD,CAAA;GAEE;;CACS,CAAA;AAEjB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/input/index.tsx"],"sourcesContent":["import { Loader2, type LucideIcon } from \"lucide-react\";\nimport {\n\ttype FocusEvent,\n\ttype InputHTMLAttributes,\n\tuseId,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport { IconRenderer } from \"../../services/iconRenderer\";\n\nimport \"./style.css\";\n\ntype InputProps = Omit<\n\tInputHTMLAttributes<HTMLInputElement>,\n\t\"size\" \| \"prefix\" \| \"name\" \| \"value\" \| \"defaultValue\"\n> & {\n\t/** Field name for form submission. Required. /\n\tname: string;\n\t/* Optional label text displayed above the input. /\n\tlabel?: string;\n\t/* Validation error message displayed below the input. /\n\terrorMessage?: string;\n\t/* Shows a spinner and disables the input during async operations. @default false /\n\tisLoading?: boolean;\n\t/* When true, skips `FieldTemplate` wrapper (label and error text). @default false /\n\tunShowFieldTemplate?: 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 * - `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 input area (e.g. `\"https://\"`). /\n\tprefix?: string \| LucideIcon;\n\t/* Text or icon rendered at the far right, outside the input area (e.g. `\".com\"`). /\n\tsuffix?: string \| LucideIcon;\n\t/* Displays an asterisk on the label to signal a required field. /\n\tshowAsterisk?: boolean;\n\t/\n\t Layout direction forwarded to `FieldTemplate`.\n\t * @default \"horizontal\"\n\t /\n\torientation?: \"horizontal\" \| \"vertical\" \| \"horizontalReverse\";\n\t/* Lucide icon rendered inside the input on the left. /\n\tleftIcon?: LucideIcon;\n\t/* Lucide icon rendered inside the input on the right. /\n\trightIcon?: LucideIcon;\n\t/* Controlled value. /\n\tvalue?: string;\n\t/* Uncontrolled default value. /\n\tdefaultValue?: string;\n};\n\n/\n Input — text input field with label, validation, icons, prefix/suffix, and loading state.\n \n Integrates with `useForm` to display validation errors by field name.\n \n @param props.name - Field name for form submission. Required.\n * @param props.label - Label text displayed above the input.\n * @param props.errorMessage - Validation error message.\n * @param props.isLoading - Shows a spinner and disables the input. Default: false\n * @param props.size - Input size (`md` \| `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.prefix - Text or icon at the far left (outside the input).\n * @param props.suffix - Text or icon at the far right (outside the input).\n * @param props.leftIcon - Lucide icon inside the input on the left.\n * @param props.rightIcon - Lucide icon inside the input on the right.\n * @param props.showAsterisk - Appends `` to the label.\n @param props.orientation - Layout direction (`horizontal` \| `vertical` \| `horizontalReverse`). Default: \"horizontal\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n \n ...Other valid HTML properties for `<input>`\n \n @returns Input JSX element wrapped in `FieldTemplate`.\n \n @example\n * ```tsx\n * // Basic\n * <Input name=\"username\" placeholder=\"Enter username\" />\n \n // With label and validation\n * <Input\n * name=\"email\"\n * label=\"Email Address\"\n * type=\"email\"\n * showAsterisk\n * errorMessage=\"Please enter a valid email\"\n * />\n \n // With icons and loading state\n * <Input name=\"search\" label=\"Search\" leftIcon={SearchIcon} isLoading />\n \n // With prefix/suffix\n * <Input name=\"website\" label=\"Website\" prefix=\"https://\" suffix=\".com\" variant=\"outline\" />\n * ```\n */\n\nfunction Input(props: InputProps) {\n\tconst {\n\t\tname,\n\t\tdisabled,\n\t\ttitle,\n\t\tstyle,\n\t\tvariant = \"solid\",\n\t\tlabel,\n\t\tclassName: wrapperClassName = \"\",\n\t\tprefix,\n\t\tsuffix,\n\t\tisLoading = false,\n\t\tleftIcon,\n\t\treadOnly,\n\t\tonFocus,\n\t\tonBlur,\n\t\tunShowFieldTemplate = false,\n\t\terrorMessage: baseErrorMessage,\n\t\tshowAsterisk,\n\t\trightIcon,\n\t\ttype = \"text\",\n\t\tsize = \"md\",\n\t\tid,\n\t\tvalue,\n\t\tplaceholder,\n\t\torientation,\n\t\t...rest\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst inputId = id \|\| generatedId;\n\n\tconst errorMessage = baseErrorMessage \|\| fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst isDisabled = disabled \|\| isLoading;\n\n\tconst iconSizes = { md: 20, lg: 20 };\n\tconst iconSize = iconSizes[size];\n\n\tconst loadingPosition = rightIcon ? \"right\" : \"left\";\n\n\tconst showLeftSpinner = loadingPosition === \"left\" && isLoading;\n\tconst showRightSpinner = loadingPosition === \"right\" && isLoading;\n\n\tfunction handleSectionClick() {\n\t\tif (isDisabled \|\| !inputRef?.current) return;\n\t\tsetIsFocused(true);\n\t\tinputRef.current.focus();\n\t}\n\n\tfunction handleFocus(e: FocusEvent<HTMLInputElement>) {\n\t\tsetIsFocused(true);\n\t\tif (onFocus) onFocus(e);\n\t}\n\n\tfunction handleBlur(e: FocusEvent<HTMLInputElement>) {\n\t\tsetIsFocused(false);\n\t\tif (onBlur) onBlur(e);\n\t}\n\n\tif (type === \"hidden\") {\n\t\treturn (\n\t\t\t<input\n\t\t\t\tstyle={{ display: \"none\" }}\n\t\t\t\treadOnly\n\t\t\t\ttype=\"text\"\n\t\t\t\tref={inputRef}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst hasPrefix = prefix ? \"hasPrefix\" : \"\";\n\tconst hasSuffix = suffix ? \"hasSuffix\" : \"\";\n\tconst errored = isError ? \"errored\" : \"\";\n\tconst opacity = isDisabled \|\| readOnly \|\| isLoading ? \"opacity\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\tconst disabledClass = disabled ? \"disabled\" : \"\";\n\n\tconst className = `arkynInput ${hasPrefix} ${disabledClass} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused}`;\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<section\n\t\t\t\ttitle={title}\n\t\t\t\tstyle={style}\n\t\t\t\tonClick={handleSectionClick}\n\t\t\t\tclassName={className}\n\t\t\t>\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={prefix} className=\"prefix\" />\n\n\t\t\t\t<IconRenderer\n\t\t\t\t\tshow={showLeftSpinner}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\ticon={Loader2}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer show={!isLoading} icon={leftIcon} iconSize={iconSize} />\n\n\t\t\t\t<input\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\ttype={type}\n\t\t\t\t\tid={inputId}\n\t\t\t\t\tname={name}\n\t\t\t\t\tplaceholder={isDisabled ? value \|\| placeholder : placeholder}\n\t\t\t\t\tvalue={isDisabled ? undefined : value}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer show={!isLoading} icon={rightIcon} iconSize={iconSize} />\n\n\t\t\t\t<IconRenderer\n\t\t\t\t\tshow={showRightSpinner}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\ticon={Loader2}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={suffix} className=\"suffix\" />\n\t\t\t</section>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { Input, type InputProps };\n"],"mappings":";;;;;;;;AA4GA,SAAS,EAAM,GAAmB;CACjC,IAAM,EACL,SACA,aACA,UACA,UACA,aAAU,SACV,UACA,WAAW,IAAmB,IAC9B,WACA,WACA,eAAY,IACZ,aACA,aACA,YACA,WACA,yBAAsB,IACtB,cAAc,GACd,iBACA,cACA,UAAO,QACP,UAAO,MACP,OACA,UACA,gBACA,gBACA,GAAG,MACA,GAEE,EAAE,mBAAgB,EAAQ,GAC1B,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,IAAW,EAAyB,IAAI,GACxC,IAAc,EAAM,GACpB,IAAU,KAAM,GAEhB,IAAe,KAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GACZ,IAAa,KAAY,GAGzB,IAAW;EADG,IAAI;EAAI,IAAI;CACf,EAAU,IAErB,IAAkB,IAAY,UAAU,QAExC,IAAkB,MAAoB,UAAU,GAChD,IAAmB,MAAoB,WAAW;CAExD,SAAS,IAAqB;EACzB,KAAc,CAAC,GAAU,YAC7B,EAAa,EAAI,GACjB,EAAS,QAAQ,MAAM;CACxB;CAEA,SAAS,EAAY,GAAiC;EAErD,AADA,EAAa,EAAI,GACb,KAAS,EAAQ,CAAC;CACvB;CAEA,SAAS,EAAW,GAAiC;EAEpD,AADA,EAAa,EAAK,GACd,KAAQ,EAAO,CAAC;CACrB;CAuBA,OArBI,MAAS,WAEX,kBAAC,SAAD;EACC,OAAO,EAAE,SAAS,OAAO;EACzB,UAAA;EACA,MAAK;EACL,KAAK;EACL,GAAI;CACJ,CAAA,IAcF,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,WAAD;GACQ;GACA;GACP,SAAS;GACE,WAAA,cAvBI,IAAS,cAAc,GAOC,GAFpB,IAAW,aAAa,GAEa,GANzC,IAAS,cAAc,GAM+B,GAAG,EAAQ,GAAG,EAAK,GAJ3E,KAAc,KAAY,IAAY,YAAY,GAIoC,GALtF,IAAU,YAAY,GAK2E,GAHjG,IAAY,YAAY;aAetC;IAMC,kBAAC,GAAD;KAAwB;KAAU,MAAM;KAAQ,WAAU;IAAU,CAAA;IAEpE,kBAAC,GAAD;KACC,MAAM;KACI;KACV,WAAU;KACV,MAAM;IACN,CAAA;IAED,kBAAC,GAAD;KAAc,MAAM,CAAC;KAAW,MAAM;KAAoB;IAAW,CAAA;IAErE,kBAAC,SAAD;KACC,UAAU;KACA;KACV,KAAK;KACL,SAAS;KACT,QAAQ;KACF;KACN,IAAI;KACE;KACN,aAAa,KAAa,KAAuB;KACjD,OAAO,IAAa,KAAA,IAAY;KAChC,GAAI;IACJ,CAAA;IAED,kBAAC,GAAD;KAAc,MAAM,CAAC;KAAW,MAAM;KAAqB;IAAW,CAAA;IAEtE,kBAAC,GAAD;KACC,MAAM;KACI;KACV,WAAU;KACV,MAAM;IACN,CAAA;IAED,kBAAC,GAAD;KAAwB;KAAU,MAAM;KAAQ,WAAU;IAAU,CAAA;GAC5D;;CACK,CAAA;AAEjB"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/input/index.tsx"],"sourcesContent":["import { Loader2, type LucideIcon } from \"lucide-react\";\nimport {\n\ttype FocusEvent,\n\ttype InputHTMLAttributes,\n\tuseId,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport { IconRenderer } from \"../../services/iconRenderer\";\n\nimport \"./style.css\";\n\ntype InputProps = Omit<\n\tInputHTMLAttributes<HTMLInputElement>,\n\t\"size\" \| \"prefix\" \| \"name\" \| \"value\" \| \"defaultValue\"\n> & {\n\t/** Field name for form submission. Required. /\n\tname: string;\n\t/* Optional label text displayed above the input. /\n\tlabel?: string;\n\t/* Validation error message displayed below the input. /\n\terrorMessage?: string;\n\t/* Shows a spinner and disables the input during async operations. @default false /\n\tisLoading?: boolean;\n\t/* When true, skips `FieldTemplate` wrapper (label and error text). @default false /\n\tunShowFieldTemplate?: 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 * - `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 input area (e.g. `\"https://\"`). /\n\tprefix?: string \| LucideIcon;\n\t/* Text or icon rendered at the far right, outside the input area (e.g. `\".com\"`). /\n\tsuffix?: string \| LucideIcon;\n\t/* Displays an asterisk on the label to signal a required field. /\n\tshowAsterisk?: boolean;\n\t/\n\t Layout direction forwarded to `FieldTemplate`.\n\t * @default \"horizontal\"\n\t /\n\torientation?: \"horizontal\" \| \"vertical\" \| \"horizontalReverse\";\n\t/* Lucide icon rendered inside the input on the left. /\n\tleftIcon?: LucideIcon;\n\t/* Lucide icon rendered inside the input on the right. /\n\trightIcon?: LucideIcon;\n\t/* Controlled value. /\n\tvalue?: string;\n\t/* Uncontrolled default value. /\n\tdefaultValue?: string;\n};\n\n/\n Input, text input field with label, validation, icons, prefix/suffix, and loading state.\n \n Integrates with `useForm` to display validation errors by field name.\n \n @param props.name - Field name for form submission. Required.\n * @param props.label - Label text displayed above the input.\n * @param props.errorMessage - Validation error message.\n * @param props.isLoading - Shows a spinner and disables the input. Default: false\n * @param props.size - Input size (`md` \| `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.prefix - Text or icon at the far left (outside the input).\n * @param props.suffix - Text or icon at the far right (outside the input).\n * @param props.leftIcon - Lucide icon inside the input on the left.\n * @param props.rightIcon - Lucide icon inside the input on the right.\n * @param props.showAsterisk - Appends `` to the label.\n @param props.orientation - Layout direction (`horizontal` \| `vertical` \| `horizontalReverse`). Default: \"horizontal\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n \n ...Other valid HTML properties for `<input>`\n \n @returns Input JSX element wrapped in `FieldTemplate`.\n \n @example\n * ```tsx\n * // Basic\n * <Input name=\"username\" placeholder=\"Enter username\" />\n \n // With label and validation\n * <Input\n * name=\"email\"\n * label=\"Email Address\"\n * type=\"email\"\n * showAsterisk\n * errorMessage=\"Please enter a valid email\"\n * />\n \n // With icons and loading state\n * <Input name=\"search\" label=\"Search\" leftIcon={SearchIcon} isLoading />\n \n // With prefix/suffix\n * <Input name=\"website\" label=\"Website\" prefix=\"https://\" suffix=\".com\" variant=\"outline\" />\n * ```\n */\n\nfunction Input(props: InputProps) {\n\tconst {\n\t\tname,\n\t\tdisabled,\n\t\ttitle,\n\t\tstyle,\n\t\tvariant = \"solid\",\n\t\tlabel,\n\t\tclassName: wrapperClassName = \"\",\n\t\tprefix,\n\t\tsuffix,\n\t\tisLoading = false,\n\t\tleftIcon,\n\t\treadOnly,\n\t\tonFocus,\n\t\tonBlur,\n\t\tunShowFieldTemplate = false,\n\t\terrorMessage: baseErrorMessage,\n\t\tshowAsterisk,\n\t\trightIcon,\n\t\ttype = \"text\",\n\t\tsize = \"md\",\n\t\tid,\n\t\tvalue,\n\t\tplaceholder,\n\t\torientation,\n\t\t...rest\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst inputId = id \|\| generatedId;\n\n\tconst errorMessage = baseErrorMessage \|\| fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst isDisabled = disabled \|\| isLoading;\n\n\tconst iconSizes = { md: 20, lg: 20 };\n\tconst iconSize = iconSizes[size];\n\n\tconst loadingPosition = rightIcon ? \"right\" : \"left\";\n\n\tconst showLeftSpinner = loadingPosition === \"left\" && isLoading;\n\tconst showRightSpinner = loadingPosition === \"right\" && isLoading;\n\n\tfunction handleSectionClick() {\n\t\tif (isDisabled \|\| !inputRef?.current) return;\n\t\tsetIsFocused(true);\n\t\tinputRef.current.focus();\n\t}\n\n\tfunction handleFocus(e: FocusEvent<HTMLInputElement>) {\n\t\tsetIsFocused(true);\n\t\tif (onFocus) onFocus(e);\n\t}\n\n\tfunction handleBlur(e: FocusEvent<HTMLInputElement>) {\n\t\tsetIsFocused(false);\n\t\tif (onBlur) onBlur(e);\n\t}\n\n\tif (type === \"hidden\") {\n\t\treturn (\n\t\t\t<input\n\t\t\t\tstyle={{ display: \"none\" }}\n\t\t\t\treadOnly\n\t\t\t\ttype=\"text\"\n\t\t\t\tref={inputRef}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst hasPrefix = prefix ? \"hasPrefix\" : \"\";\n\tconst hasSuffix = suffix ? \"hasSuffix\" : \"\";\n\tconst errored = isError ? \"errored\" : \"\";\n\tconst opacity = isDisabled \|\| readOnly \|\| isLoading ? \"opacity\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\tconst disabledClass = disabled ? \"disabled\" : \"\";\n\n\tconst className = `arkynInput ${hasPrefix} ${disabledClass} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused}`;\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<section\n\t\t\t\ttitle={title}\n\t\t\t\tstyle={style}\n\t\t\t\tonClick={handleSectionClick}\n\t\t\t\tclassName={className}\n\t\t\t>\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={prefix} className=\"prefix\" />\n\n\t\t\t\t<IconRenderer\n\t\t\t\t\tshow={showLeftSpinner}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\ticon={Loader2}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer show={!isLoading} icon={leftIcon} iconSize={iconSize} />\n\n\t\t\t\t<input\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\ttype={type}\n\t\t\t\t\tid={inputId}\n\t\t\t\t\tname={name}\n\t\t\t\t\tplaceholder={isDisabled ? value \|\| placeholder : placeholder}\n\t\t\t\t\tvalue={isDisabled ? undefined : value}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer show={!isLoading} icon={rightIcon} iconSize={iconSize} />\n\n\t\t\t\t<IconRenderer\n\t\t\t\t\tshow={showRightSpinner}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\ticon={Loader2}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={suffix} className=\"suffix\" />\n\t\t\t</section>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { Input, type InputProps };\n"],"mappings":";;;;;;;;AA4GA,SAAS,EAAM,GAAmB;CACjC,IAAM,EACL,SACA,aACA,UACA,UACA,aAAU,SACV,UACA,WAAW,IAAmB,IAC9B,WACA,WACA,eAAY,IACZ,aACA,aACA,YACA,WACA,yBAAsB,IACtB,cAAc,GACd,iBACA,cACA,UAAO,QACP,UAAO,MACP,OACA,UACA,gBACA,gBACA,GAAG,MACA,GAEE,EAAE,mBAAgB,EAAQ,GAC1B,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,IAAW,EAAyB,IAAI,GACxC,IAAc,EAAM,GACpB,IAAU,KAAM,GAEhB,IAAe,KAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GACZ,IAAa,KAAY,GAGzB,IAAW;EADG,IAAI;EAAI,IAAI;CACf,EAAU,IAErB,IAAkB,IAAY,UAAU,QAExC,IAAkB,MAAoB,UAAU,GAChD,IAAmB,MAAoB,WAAW;CAExD,SAAS,IAAqB;EACzB,KAAc,CAAC,GAAU,YAC7B,EAAa,EAAI,GACjB,EAAS,QAAQ,MAAM;CACxB;CAEA,SAAS,EAAY,GAAiC;EAErD,AADA,EAAa,EAAI,GACb,KAAS,EAAQ,CAAC;CACvB;CAEA,SAAS,EAAW,GAAiC;EAEpD,AADA,EAAa,EAAK,GACd,KAAQ,EAAO,CAAC;CACrB;CAuBA,OArBI,MAAS,WAEX,kBAAC,SAAD;EACC,OAAO,EAAE,SAAS,OAAO;EACzB,UAAA;EACA,MAAK;EACL,KAAK;EACL,GAAI;CACJ,CAAA,IAcF,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,WAAD;GACQ;GACA;GACP,SAAS;GACE,WAAA,cAvBI,IAAS,cAAc,GAOC,GAFpB,IAAW,aAAa,GAEa,GANzC,IAAS,cAAc,GAM+B,GAAG,EAAQ,GAAG,EAAK,GAJ3E,KAAc,KAAY,IAAY,YAAY,GAIoC,GALtF,IAAU,YAAY,GAK2E,GAHjG,IAAY,YAAY;aAetC;IAMC,kBAAC,GAAD;KAAwB;KAAU,MAAM;KAAQ,WAAU;IAAU,CAAA;IAEpE,kBAAC,GAAD;KACC,MAAM;KACI;KACV,WAAU;KACV,MAAM;IACN,CAAA;IAED,kBAAC,GAAD;KAAc,MAAM,CAAC;KAAW,MAAM;KAAoB;IAAW,CAAA;IAErE,kBAAC,SAAD;KACC,UAAU;KACA;KACV,KAAK;KACL,SAAS;KACT,QAAQ;KACF;KACN,IAAI;KACE;KACN,aAAa,KAAa,KAAuB;KACjD,OAAO,IAAa,KAAA,IAAY;KAChC,GAAI;IACJ,CAAA;IAED,kBAAC,GAAD;KAAc,MAAM,CAAC;KAAW,MAAM;KAAqB;IAAW,CAAA;IAEtE,kBAAC,GAAD;KACC,MAAM;KACI;KACV,WAAU;KACV,MAAM;IACN,CAAA;IAED,kBAAC,GAAD;KAAwB;KAAU,MAAM;KAAQ,WAAU;IAAU,CAAA;GAC5D;;CACK,CAAA;AAEjB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/mapView/index.tsx"],"sourcesContent":["import { MapPinned } from \"lucide-react\";\nimport type { HtmlHTMLAttributes, ReactNode } from \"react\";\n\nimport { ClientMapView } from \"./mapView.client\";\nimport \"./styles.css\";\nimport { ClientOnly } from \"../clientOnly\";\n\n/** Data for a single map marker. /\ntype Coordinate = {\n\t/* Latitude of the marker position. /\n\tlat: number;\n\t/* Longitude of the marker position. /\n\tlng: number;\n\t/* Arbitrary data attached to the marker — available in `onMarkerClick`. /\n\t// biome-ignore lint/suspicious/noExplicitAny: intentional\n\tdata?: any;\n\t/* Custom React node rendered inside the marker popup on click. /\n\tpopUp?: ReactNode;\n};\n\ntype MapViewProps = {\n\t/* Mapbox GL public access token from your Mapbox account. Required. /\n\taccessToken: string;\n\t/* Initial zoom level. @default 18 /\n\tzoom?: number;\n\t/* Single coordinate or array of coordinates to display as markers. /\n\tcoordinates?: Coordinate \| Coordinate[];\n\t/* Callback fired when the user clicks a marker. Receives the coordinate's data. /\n\tonMarkerClick?: (coordinate: Coordinate) => void;\n} & HtmlHTMLAttributes<HTMLDivElement>;\n\ntype EmptyMapProps = {\n\tclassName?: string;\n};\n\nfunction EmptyMap({ className }: EmptyMapProps) {\n\treturn (\n\t\t<div className={`arkynMapViewPinnedEmpty ${className}`}>\n\t\t\t<MapPinned />\n\t\t</div>\n\t);\n}\n\n/\n MapView — interactive Mapbox map with optional click-able markers.\n \n Renders client-side only (via `ClientOnly`). Displays a placeholder icon\n * when `coordinates` is absent or empty, or before the component hydrates.\n \n @param props.accessToken - Mapbox GL public access token. Required.\n * @param props.zoom - Initial zoom level. Default: 18\n * @param props.coordinates - Marker(s) to display on the map.\n * @param props.onMarkerClick - Callback fired when a marker is clicked.\n \n ...Other valid HTML properties for `<div>`\n \n @returns MapView JSX element, or a placeholder icon when no coordinates are provided.\n \n @example\n * ```tsx\n * // Single marker\n * <MapView\n * accessToken=\"pk.your-mapbox-token\"\n * coordinates={{ lat: -23.5505, lng: -46.6333 }}\n * />\n \n // Multiple markers with popup and click handler\n * <MapView\n * accessToken=\"pk.your-mapbox-token\"\n * zoom={12}\n * coordinates={[\n * { lat: -23.55, lng: -46.63, data: { id: 1 }, popUp: <p>Store A</p> },\n * { lat: -23.56, lng: -46.64, data: { id: 2 }, popUp: <p>Store B</p> },\n * ]}\n * onMarkerClick={(coord) => selectStore(coord.data.id)}\n * />\n * ```\n */\nfunction MapView(props: MapViewProps) {\n\tconst {\n\t\tcoordinates,\n\t\tzoom = 18,\n\t\taccessToken,\n\t\tclassName,\n\t\tonMarkerClick,\n\t\t...rest\n\t} = props;\n\n\tif (!coordinates) return <EmptyMap className={className} />;\n\n\tconst coordArray = Array.isArray(coordinates) ? coordinates : [coordinates];\n\tif (coordArray.length === 0) return <EmptyMap className={className} />;\n\n\treturn (\n\t\t<ClientOnly fallback={<EmptyMap className={className} />}>\n\t\t\t{() => (\n\t\t\t\t<ClientMapView\n\t\t\t\t\taccessToken={accessToken}\n\t\t\t\t\tcoordinates={coordArray}\n\t\t\t\t\tcenter={coordArray[0]}\n\t\t\t\t\tonMarkerClick={onMarkerClick}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</ClientOnly>\n\t);\n}\n\nexport { MapView };\n"],"mappings":";;;;;;AAmCA,SAAS,EAAS,EAAE,gBAA4B;CAC/C,OACC,kBAAC,OAAD;EAAK,WAAW,2BAA2B;YAC1C,kBAAC,GAAD,CAAY,CAAA;CACR,CAAA;AAEP;AAqCA,SAAS,EAAQ,GAAqB;CACrC,IAAM,EACL,gBACA,UAAO,IACP,gBACA,cACA,kBACA,GAAG,MACA;CAEJ,IAAI,CAAC,GAAa,OAAO,kBAAC,GAAD,EAAqB,aAAY,CAAA;CAE1D,IAAM,IAAa,MAAM,QAAQ,CAAW,IAAI,IAAc,CAAC,CAAW;CAG1E,OAFI,EAAW,WAAW,IAAU,kBAAC,GAAD,EAAqB,aAAY,CAAA,IAGpE,kBAAC,GAAD;EAAY,UAAU,kBAAC,GAAD,EAAqB,aAAY,CAAA;kBAErD,kBAAC,GAAD;GACc;GACb,aAAa;GACb,QAAQ,EAAW;GACJ;GACf,GAAI;EACJ,CAAA;CAES,CAAA;AAEd"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/mapView/index.tsx"],"sourcesContent":["import { MapPinned } from \"lucide-react\";\nimport type { HtmlHTMLAttributes, ReactNode } from \"react\";\n\nimport { ClientMapView } from \"./mapView.client\";\nimport \"./styles.css\";\nimport { ClientOnly } from \"../clientOnly\";\n\n/** Data for a single map marker. /\ntype Coordinate = {\n\t/* Latitude of the marker position. /\n\tlat: number;\n\t/* Longitude of the marker position. /\n\tlng: number;\n\t/* Arbitrary data attached to the marker, available in `onMarkerClick`. /\n\t// biome-ignore lint/suspicious/noExplicitAny: intentional\n\tdata?: any;\n\t/* Custom React node rendered inside the marker popup on click. /\n\tpopUp?: ReactNode;\n};\n\ntype MapViewProps = {\n\t/* Mapbox GL public access token from your Mapbox account. Required. /\n\taccessToken: string;\n\t/* Initial zoom level. @default 18 /\n\tzoom?: number;\n\t/* Single coordinate or array of coordinates to display as markers. /\n\tcoordinates?: Coordinate \| Coordinate[];\n\t/* Callback fired when the user clicks a marker. Receives the coordinate's data. /\n\tonMarkerClick?: (coordinate: Coordinate) => void;\n} & HtmlHTMLAttributes<HTMLDivElement>;\n\ntype EmptyMapProps = {\n\tclassName?: string;\n};\n\nfunction EmptyMap({ className }: EmptyMapProps) {\n\treturn (\n\t\t<div className={`arkynMapViewPinnedEmpty ${className}`}>\n\t\t\t<MapPinned />\n\t\t</div>\n\t);\n}\n\n/\n MapView, interactive Mapbox map with optional click-able markers.\n \n Renders client-side only (via `ClientOnly`). Displays a placeholder icon\n * when `coordinates` is absent or empty, or before the component hydrates.\n \n @param props.accessToken - Mapbox GL public access token. Required.\n * @param props.zoom - Initial zoom level. Default: 18\n * @param props.coordinates - Marker(s) to display on the map.\n * @param props.onMarkerClick - Callback fired when a marker is clicked.\n \n ...Other valid HTML properties for `<div>`\n \n @returns MapView JSX element, or a placeholder icon when no coordinates are provided.\n \n @example\n * ```tsx\n * // Single marker\n * <MapView\n * accessToken=\"pk.your-mapbox-token\"\n * coordinates={{ lat: -23.5505, lng: -46.6333 }}\n * />\n \n // Multiple markers with popup and click handler\n * <MapView\n * accessToken=\"pk.your-mapbox-token\"\n * zoom={12}\n * coordinates={[\n * { lat: -23.55, lng: -46.63, data: { id: 1 }, popUp: <p>Store A</p> },\n * { lat: -23.56, lng: -46.64, data: { id: 2 }, popUp: <p>Store B</p> },\n * ]}\n * onMarkerClick={(coord) => selectStore(coord.data.id)}\n * />\n * ```\n */\nfunction MapView(props: MapViewProps) {\n\tconst {\n\t\tcoordinates,\n\t\tzoom = 18,\n\t\taccessToken,\n\t\tclassName,\n\t\tonMarkerClick,\n\t\t...rest\n\t} = props;\n\n\tif (!coordinates) return <EmptyMap className={className} />;\n\n\tconst coordArray = Array.isArray(coordinates) ? coordinates : [coordinates];\n\tif (coordArray.length === 0) return <EmptyMap className={className} />;\n\n\treturn (\n\t\t<ClientOnly fallback={<EmptyMap className={className} />}>\n\t\t\t{() => (\n\t\t\t\t<ClientMapView\n\t\t\t\t\taccessToken={accessToken}\n\t\t\t\t\tcoordinates={coordArray}\n\t\t\t\t\tcenter={coordArray[0]}\n\t\t\t\t\tonMarkerClick={onMarkerClick}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</ClientOnly>\n\t);\n}\n\nexport { MapView };\n"],"mappings":";;;;;;AAmCA,SAAS,EAAS,EAAE,gBAA4B;CAC/C,OACC,kBAAC,OAAD;EAAK,WAAW,2BAA2B;YAC1C,kBAAC,GAAD,CAAY,CAAA;CACR,CAAA;AAEP;AAqCA,SAAS,EAAQ,GAAqB;CACrC,IAAM,EACL,gBACA,UAAO,IACP,gBACA,cACA,kBACA,GAAG,MACA;CAEJ,IAAI,CAAC,GAAa,OAAO,kBAAC,GAAD,EAAqB,aAAY,CAAA;CAE1D,IAAM,IAAa,MAAM,QAAQ,CAAW,IAAI,IAAc,CAAC,CAAW;CAG1E,OAFI,EAAW,WAAW,IAAU,kBAAC,GAAD,EAAqB,aAAY,CAAA,IAGpE,kBAAC,GAAD;EAAY,UAAU,kBAAC,GAAD,EAAqB,aAAY,CAAA;kBAErD,kBAAC,GAAD;GACc;GACb,aAAa;GACb,QAAQ,EAAW;GACJ;GACf,GAAI;EACJ,CAAA;CAES,CAAA;AAEd"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/maskedInput/index.tsx"],"sourcesContent":["import { InputMask, type Replacement } from \"@react-input/mask\";\nimport { Loader2, type LucideIcon } from \"lucide-react\";\nimport {\n\ttype FocusEvent,\n\tforwardRef,\n\ttype InputHTMLAttributes,\n\tuseId,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { IconRenderer } from \"../../services/iconRenderer\";\n\nimport { FieldError } from \"../fieldError\";\nimport { FieldLabel } from \"../fieldLabel\";\nimport { FieldWrapper } from \"../fieldWrapper\";\n\nimport \"./style.css\";\n\ntype MaskedInputProps = Omit<\n\tInputHTMLAttributes<HTMLInputElement>,\n\t\"size\" \| \"prefix\" \| \"name\" \| \"type\"\n> & {\n\t/** Field name for form submission. Required. /\n\tname: string;\n\t/\n\t Mask pattern string. Use the replacement character as an editable placeholder.\n\t * Example: `\"(__) _____-____\"` for a Brazilian mobile phone number.\n\t * Required.\n\t /\n\tmask: string;\n\t/\n\t Character or replacement map that marks editable positions in the mask.\n\t * - String: `\"_\"` — every `_` in the mask becomes editable.\n\t * - Object: `{ _: /\\d/ }` — only accepts digits in those positions.\n\t * Required.\n\t /\n\treplacement: string \| Replacement;\n\t/\n\t When true, strips mask characters from the underlying value,\n\t * keeping only the user-typed characters.\n\t /\n\tseparate?: boolean;\n\t/* When true, shows the full mask pattern in the input before the user types. /\n\tshowMask?: boolean;\n\t/* Optional label text displayed above the input. /\n\tlabel?: string;\n\t/* Validation error message displayed below the input. /\n\terrorMessage?: string;\n\t/* Shows a spinner and disables the input during async operations. @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 * - `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 input area. /\n\tprefix?: string \| LucideIcon;\n\t/* Text or icon rendered at the far right, outside the input area. /\n\tsuffix?: string \| LucideIcon;\n\t/* Displays an asterisk on the label to signal a required field. /\n\tshowAsterisk?: boolean;\n\t/* Lucide icon rendered inside the input on the left. /\n\tleftIcon?: LucideIcon;\n\t/* Lucide icon rendered inside the input on the right. /\n\trightIcon?: LucideIcon;\n\t/* Controlled value. /\n\tvalue?: string;\n\t/* Uncontrolled default value. /\n\tdefaultValue?: string;\n};\n\nconst BaseInput = forwardRef<\n\tHTMLInputElement,\n\tInputHTMLAttributes<HTMLInputElement>\n>((props, ref) => {\n\treturn <input ref={ref} {...props} />;\n});\n\n/\n MaskedInput — text input with a configurable mask for structured values (phones, CPF, credit cards, etc.).\n \n Built on `@react-input/mask`. Integrates with `useForm` to display validation errors by field name.\n \n @param props.name - Field name for form submission. Required.\n * @param props.mask - Mask pattern string. Required.\n * @param props.replacement - Character or map that marks editable positions. Required.\n * @param props.separate - Strips mask chars from the value, keeping only typed characters.\n * @param props.showMask - Shows the full mask pattern before the user types.\n * @param props.label - Label text displayed above the input.\n * @param props.errorMessage - Validation error message.\n * @param props.isLoading - Shows a spinner and disables the input. Default: false\n * @param props.size - Input size (`md` \| `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.prefix - Text or icon at the far left.\n * @param props.suffix - Text or icon at the far right.\n * @param props.leftIcon - Lucide icon inside the input on the left.\n * @param props.rightIcon - Lucide icon inside the input on the right.\n * @param props.showAsterisk - Appends `` to the label.\n \n * ...Other valid HTML properties for `<input>` (except `type`)\n \n @returns MaskedInput JSX element wrapped in `FieldWrapper`.\n \n @example\n * ```tsx\n * // Brazilian mobile phone\n * <MaskedInput\n * name=\"phone\"\n * mask=\"(__) _____-____\"\n * replacement={{ _: /\\d/ }}\n * label=\"Phone\"\n * />\n \n // CPF with mask visible and validation\n * <MaskedInput\n * name=\"cpf\"\n * label=\"CPF\"\n * mask=\"___.___.___-__\"\n * replacement=\"_\"\n * showMask\n * showAsterisk\n * errorMessage=\"Invalid CPF\"\n * />\n \n // Credit card\n * <MaskedInput\n * name=\"card\"\n * label=\"Credit Card\"\n * mask=\"____ ____ ____ ____\"\n * replacement={{ _: /\\d/ }}\n * leftIcon={CreditCard}\n * />\n * ```\n */\n\nfunction MaskedInput(props: MaskedInputProps) {\n\tconst {\n\t\tname,\n\t\tdisabled,\n\t\ttitle,\n\t\tstyle,\n\t\tvariant = \"solid\",\n\t\tseparate,\n\t\tmask,\n\t\tshowMask,\n\t\treplacement,\n\t\tlabel,\n\t\tclassName: wrapperClassName = \"\",\n\t\tprefix,\n\t\tsuffix,\n\t\tisLoading = false,\n\t\tleftIcon,\n\t\treadOnly,\n\t\tonFocus,\n\t\tonBlur,\n\t\terrorMessage: baseErrorMessage,\n\t\tdefaultValue,\n\t\tshowAsterisk,\n\t\trightIcon,\n\t\tsize = \"md\",\n\t\tid,\n\t\tvalue,\n\t\tplaceholder,\n\t\t...rest\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst inputId = id \|\| generatedId;\n\n\tconst errorMessage = baseErrorMessage \|\| fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst isDisabled = disabled \|\| isLoading;\n\n\tconst iconSizes = { md: 20, lg: 20 };\n\tconst iconSize = iconSizes[size];\n\n\tconst loadingPosition = rightIcon ? \"right\" : \"left\";\n\n\tconst showLeftSpinner = loadingPosition === \"left\" && isLoading;\n\tconst showRightSpinner = loadingPosition === \"right\" && isLoading;\n\n\tfunction handleSectionClick() {\n\t\tif (isDisabled \|\| !inputRef?.current) return;\n\t\tsetIsFocused(true);\n\t\tinputRef.current.focus();\n\t}\n\n\tfunction handleFocus(e: FocusEvent<HTMLInputElement>) {\n\t\tsetIsFocused(true);\n\t\tif (onFocus) onFocus(e);\n\t}\n\n\tfunction handleBlur(e: FocusEvent<HTMLInputElement>) {\n\t\tsetIsFocused(false);\n\t\tif (onBlur) onBlur(e);\n\t}\n\n\tconst hasPrefix = prefix ? \"hasPrefix\" : \"\";\n\tconst hasSuffix = suffix ? \"hasSuffix\" : \"\";\n\tconst errored = isError ? \"errored\" : \"\";\n\tconst opacity = isDisabled \|\| readOnly \|\| isLoading ? \"opacity\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\n\tconst className = `arkynMaskedInput ${hasPrefix} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused}`;\n\n\treturn (\n\t\t<FieldWrapper className={wrapperClassName}>\n\t\t\t{label && (\n\t\t\t\t<FieldLabel showAsterisk={showAsterisk} htmlFor={inputId}>\n\t\t\t\t\t{label}\n\t\t\t\t</FieldLabel>\n\t\t\t)}\n\n\t\t\t<section\n\t\t\t\ttitle={title}\n\t\t\t\tstyle={style}\n\t\t\t\tonClick={handleSectionClick}\n\t\t\t\tclassName={className}\n\t\t\t>\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={prefix} className=\"prefix\" />\n\n\t\t\t\t<IconRenderer\n\t\t\t\t\tshow={showLeftSpinner}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\ticon={Loader2}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer show={!isLoading} icon={leftIcon} iconSize={iconSize} />\n\n\t\t\t\t<InputMask\n\t\t\t\t\tcomponent={BaseInput}\n\t\t\t\t\tmask={mask}\n\t\t\t\t\treplacement={replacement}\n\t\t\t\t\tseparate={separate}\n\t\t\t\t\tshowMask={showMask}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\tid={inputId}\n\t\t\t\t\tname={name}\n\t\t\t\t\tdefaultValue={defaultValue \|\| undefined}\n\t\t\t\t\tplaceholder={isDisabled ? value \|\| placeholder : placeholder}\n\t\t\t\t\tvalue={isDisabled ? undefined : value}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer show={!isLoading} icon={rightIcon} iconSize={iconSize} />\n\n\t\t\t\t<IconRenderer\n\t\t\t\t\tshow={showRightSpinner}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\ticon={Loader2}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={suffix} className=\"suffix\" />\n\t\t\t</section>\n\n\t\t\t{errorMessage && <FieldError>{errorMessage}</FieldError>}\n\t\t</FieldWrapper>\n\t);\n}\n\nexport { MaskedInput };\n"],"mappings":";;;;;;;;;;;AAiFA,IAAM,IAAY,GAGf,GAAO,MACF,kBAAC,SAAD;CAAY;CAAK,GAAI;AAAQ,CAAA,CACpC;AA2DD,SAAS,EAAY,GAAyB;CAC7C,IAAM,EACL,SACA,aACA,UACA,UACA,aAAU,SACV,aACA,SACA,aACA,gBACA,UACA,WAAW,IAAmB,IAC9B,WACA,WACA,eAAY,IACZ,aACA,aACA,YACA,WACA,cAAc,GACd,iBACA,iBACA,cACA,UAAO,MACP,OACA,UACA,gBACA,GAAG,MACA,GAEE,EAAE,mBAAgB,EAAQ,GAC1B,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,IAAW,EAAyB,IAAI,GACxC,IAAc,EAAM,GACpB,IAAU,KAAM,GAEhB,IAAe,KAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GACZ,IAAa,KAAY,GAGzB,IAAW;EADG,IAAI;EAAI,IAAI;CACf,EAAU,IAErB,IAAkB,IAAY,UAAU,QAExC,IAAkB,MAAoB,UAAU,GAChD,IAAmB,MAAoB,WAAW;CAExD,SAAS,KAAqB;EACzB,KAAc,CAAC,GAAU,YAC7B,EAAa,EAAI,GACjB,EAAS,QAAQ,MAAM;CACxB;CAEA,SAAS,GAAY,GAAiC;EAErD,AADA,EAAa,EAAI,GACb,KAAS,EAAQ,CAAC;CACvB;CAEA,SAAS,GAAW,GAAiC;EAEpD,AADA,EAAa,EAAK,GACd,KAAQ,EAAO,CAAC;CACrB;CAQA,IAAM,KAAY,oBANA,IAAS,cAAc,GAMO,GAL9B,IAAS,cAAc,GAKoB,GAAG,EAAQ,GAAG,EAAK,GAHhE,KAAc,KAAY,IAAY,YAAY,GAGyB,GAJ3E,IAAU,YAAY,GAIgE,GAFtF,IAAY,YAAY;CAIxC,OACC,kBAAC,GAAD;EAAc,WAAW;YAAzB;GACE,KACA,kBAAC,GAAD;IAA0B;IAAc,SAAS;cAC/C;GACU,CAAA;GAGb,kBAAC,WAAD;IACQ;IACA;IACP,SAAS;IACE;cAJZ;KAMC,kBAAC,GAAD;MAAwB;MAAU,MAAM;MAAQ,WAAU;KAAU,CAAA;KAEpE,kBAAC,GAAD;MACC,MAAM;MACI;MACV,WAAU;MACV,MAAM;KACN,CAAA;KAED,kBAAC,GAAD;MAAc,MAAM,CAAC;MAAW,MAAM;MAAoB;KAAW,CAAA;KAErE,kBAAC,GAAD;MACC,WAAW;MACL;MACO;MACH;MACA;MACV,KAAK;MACL,SAAS;MACT,QAAQ;MACR,UAAU;MACA;MACV,IAAI;MACE;MACN,cAAc,KAAgB,KAAA;MAC9B,aAAa,KAAa,KAAuB;MACjD,OAAO,IAAa,KAAA,IAAY;MAChC,GAAI;KACJ,CAAA;KAED,kBAAC,GAAD;MAAc,MAAM,CAAC;MAAW,MAAM;MAAqB;KAAW,CAAA;KAEtE,kBAAC,GAAD;MACC,MAAM;MACI;MACV,WAAU;MACV,MAAM;KACN,CAAA;KAED,kBAAC,GAAD;MAAwB;MAAU,MAAM;MAAQ,WAAU;KAAU,CAAA;IAC5D;;GAER,KAAgB,kBAAC,GAAD,EAAA,UAAa,EAAyB,CAAA;EAC1C;;AAEhB"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/maskedInput/index.tsx"],"sourcesContent":["import { InputMask, type Replacement } from \"@react-input/mask\";\nimport { Loader2, type LucideIcon } from \"lucide-react\";\nimport {\n\ttype FocusEvent,\n\tforwardRef,\n\ttype InputHTMLAttributes,\n\tuseId,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { IconRenderer } from \"../../services/iconRenderer\";\n\nimport { FieldError } from \"../fieldError\";\nimport { FieldLabel } from \"../fieldLabel\";\nimport { FieldWrapper } from \"../fieldWrapper\";\n\nimport \"./style.css\";\n\ntype MaskedInputProps = Omit<\n\tInputHTMLAttributes<HTMLInputElement>,\n\t\"size\" \| \"prefix\" \| \"name\" \| \"type\"\n> & {\n\t/** Field name for form submission. Required. /\n\tname: string;\n\t/\n\t Mask pattern string. Use the replacement character as an editable placeholder.\n\t * Example: `\"(__) _____-____\"` for a Brazilian mobile phone number.\n\t * Required.\n\t /\n\tmask: string;\n\t/\n\t Character or replacement map that marks editable positions in the mask.\n\t * - String: `\"_\"`, every `_` in the mask becomes editable.\n\t * - Object: `{ _: /\\d/ }`, only accepts digits in those positions.\n\t * Required.\n\t /\n\treplacement: string \| Replacement;\n\t/\n\t When true, strips mask characters from the underlying value,\n\t * keeping only the user-typed characters.\n\t /\n\tseparate?: boolean;\n\t/* When true, shows the full mask pattern in the input before the user types. /\n\tshowMask?: boolean;\n\t/* Optional label text displayed above the input. /\n\tlabel?: string;\n\t/* Validation error message displayed below the input. /\n\terrorMessage?: string;\n\t/* Shows a spinner and disables the input during async operations. @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 * - `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 input area. /\n\tprefix?: string \| LucideIcon;\n\t/* Text or icon rendered at the far right, outside the input area. /\n\tsuffix?: string \| LucideIcon;\n\t/* Displays an asterisk on the label to signal a required field. /\n\tshowAsterisk?: boolean;\n\t/* Lucide icon rendered inside the input on the left. /\n\tleftIcon?: LucideIcon;\n\t/* Lucide icon rendered inside the input on the right. /\n\trightIcon?: LucideIcon;\n\t/* Controlled value. /\n\tvalue?: string;\n\t/* Uncontrolled default value. /\n\tdefaultValue?: string;\n};\n\nconst BaseInput = forwardRef<\n\tHTMLInputElement,\n\tInputHTMLAttributes<HTMLInputElement>\n>((props, ref) => {\n\treturn <input ref={ref} {...props} />;\n});\n\n/\n MaskedInput, text input with a configurable mask for structured values (phones, CPF, credit cards, etc.).\n \n Built on `@react-input/mask`. Integrates with `useForm` to display validation errors by field name.\n \n @param props.name - Field name for form submission. Required.\n * @param props.mask - Mask pattern string. Required.\n * @param props.replacement - Character or map that marks editable positions. Required.\n * @param props.separate - Strips mask chars from the value, keeping only typed characters.\n * @param props.showMask - Shows the full mask pattern before the user types.\n * @param props.label - Label text displayed above the input.\n * @param props.errorMessage - Validation error message.\n * @param props.isLoading - Shows a spinner and disables the input. Default: false\n * @param props.size - Input size (`md` \| `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.prefix - Text or icon at the far left.\n * @param props.suffix - Text or icon at the far right.\n * @param props.leftIcon - Lucide icon inside the input on the left.\n * @param props.rightIcon - Lucide icon inside the input on the right.\n * @param props.showAsterisk - Appends `` to the label.\n \n * ...Other valid HTML properties for `<input>` (except `type`)\n \n @returns MaskedInput JSX element wrapped in `FieldWrapper`.\n \n @example\n * ```tsx\n * // Brazilian mobile phone\n * <MaskedInput\n * name=\"phone\"\n * mask=\"(__) _____-____\"\n * replacement={{ _: /\\d/ }}\n * label=\"Phone\"\n * />\n \n // CPF with mask visible and validation\n * <MaskedInput\n * name=\"cpf\"\n * label=\"CPF\"\n * mask=\"___.___.___-__\"\n * replacement=\"_\"\n * showMask\n * showAsterisk\n * errorMessage=\"Invalid CPF\"\n * />\n \n // Credit card\n * <MaskedInput\n * name=\"card\"\n * label=\"Credit Card\"\n * mask=\"____ ____ ____ ____\"\n * replacement={{ _: /\\d/ }}\n * leftIcon={CreditCard}\n * />\n * ```\n */\n\nfunction MaskedInput(props: MaskedInputProps) {\n\tconst {\n\t\tname,\n\t\tdisabled,\n\t\ttitle,\n\t\tstyle,\n\t\tvariant = \"solid\",\n\t\tseparate,\n\t\tmask,\n\t\tshowMask,\n\t\treplacement,\n\t\tlabel,\n\t\tclassName: wrapperClassName = \"\",\n\t\tprefix,\n\t\tsuffix,\n\t\tisLoading = false,\n\t\tleftIcon,\n\t\treadOnly,\n\t\tonFocus,\n\t\tonBlur,\n\t\terrorMessage: baseErrorMessage,\n\t\tdefaultValue,\n\t\tshowAsterisk,\n\t\trightIcon,\n\t\tsize = \"md\",\n\t\tid,\n\t\tvalue,\n\t\tplaceholder,\n\t\t...rest\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst inputId = id \|\| generatedId;\n\n\tconst errorMessage = baseErrorMessage \|\| fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst isDisabled = disabled \|\| isLoading;\n\n\tconst iconSizes = { md: 20, lg: 20 };\n\tconst iconSize = iconSizes[size];\n\n\tconst loadingPosition = rightIcon ? \"right\" : \"left\";\n\n\tconst showLeftSpinner = loadingPosition === \"left\" && isLoading;\n\tconst showRightSpinner = loadingPosition === \"right\" && isLoading;\n\n\tfunction handleSectionClick() {\n\t\tif (isDisabled \|\| !inputRef?.current) return;\n\t\tsetIsFocused(true);\n\t\tinputRef.current.focus();\n\t}\n\n\tfunction handleFocus(e: FocusEvent<HTMLInputElement>) {\n\t\tsetIsFocused(true);\n\t\tif (onFocus) onFocus(e);\n\t}\n\n\tfunction handleBlur(e: FocusEvent<HTMLInputElement>) {\n\t\tsetIsFocused(false);\n\t\tif (onBlur) onBlur(e);\n\t}\n\n\tconst hasPrefix = prefix ? \"hasPrefix\" : \"\";\n\tconst hasSuffix = suffix ? \"hasSuffix\" : \"\";\n\tconst errored = isError ? \"errored\" : \"\";\n\tconst opacity = isDisabled \|\| readOnly \|\| isLoading ? \"opacity\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\n\tconst className = `arkynMaskedInput ${hasPrefix} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused}`;\n\n\treturn (\n\t\t<FieldWrapper className={wrapperClassName}>\n\t\t\t{label && (\n\t\t\t\t<FieldLabel showAsterisk={showAsterisk} htmlFor={inputId}>\n\t\t\t\t\t{label}\n\t\t\t\t</FieldLabel>\n\t\t\t)}\n\n\t\t\t<section\n\t\t\t\ttitle={title}\n\t\t\t\tstyle={style}\n\t\t\t\tonClick={handleSectionClick}\n\t\t\t\tclassName={className}\n\t\t\t>\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={prefix} className=\"prefix\" />\n\n\t\t\t\t<IconRenderer\n\t\t\t\t\tshow={showLeftSpinner}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\ticon={Loader2}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer show={!isLoading} icon={leftIcon} iconSize={iconSize} />\n\n\t\t\t\t<InputMask\n\t\t\t\t\tcomponent={BaseInput}\n\t\t\t\t\tmask={mask}\n\t\t\t\t\treplacement={replacement}\n\t\t\t\t\tseparate={separate}\n\t\t\t\t\tshowMask={showMask}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\tid={inputId}\n\t\t\t\t\tname={name}\n\t\t\t\t\tdefaultValue={defaultValue \|\| undefined}\n\t\t\t\t\tplaceholder={isDisabled ? value \|\| placeholder : placeholder}\n\t\t\t\t\tvalue={isDisabled ? undefined : value}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer show={!isLoading} icon={rightIcon} iconSize={iconSize} />\n\n\t\t\t\t<IconRenderer\n\t\t\t\t\tshow={showRightSpinner}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\ticon={Loader2}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={suffix} className=\"suffix\" />\n\t\t\t</section>\n\n\t\t\t{errorMessage && <FieldError>{errorMessage}</FieldError>}\n\t\t</FieldWrapper>\n\t);\n}\n\nexport { MaskedInput };\n"],"mappings":";;;;;;;;;;;AAiFA,IAAM,IAAY,GAGf,GAAO,MACF,kBAAC,SAAD;CAAY;CAAK,GAAI;AAAQ,CAAA,CACpC;AA2DD,SAAS,EAAY,GAAyB;CAC7C,IAAM,EACL,SACA,aACA,UACA,UACA,aAAU,SACV,aACA,SACA,aACA,gBACA,UACA,WAAW,IAAmB,IAC9B,WACA,WACA,eAAY,IACZ,aACA,aACA,YACA,WACA,cAAc,GACd,iBACA,iBACA,cACA,UAAO,MACP,OACA,UACA,gBACA,GAAG,MACA,GAEE,EAAE,mBAAgB,EAAQ,GAC1B,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,IAAW,EAAyB,IAAI,GACxC,IAAc,EAAM,GACpB,IAAU,KAAM,GAEhB,IAAe,KAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GACZ,IAAa,KAAY,GAGzB,IAAW;EADG,IAAI;EAAI,IAAI;CACf,EAAU,IAErB,IAAkB,IAAY,UAAU,QAExC,IAAkB,MAAoB,UAAU,GAChD,IAAmB,MAAoB,WAAW;CAExD,SAAS,KAAqB;EACzB,KAAc,CAAC,GAAU,YAC7B,EAAa,EAAI,GACjB,EAAS,QAAQ,MAAM;CACxB;CAEA,SAAS,GAAY,GAAiC;EAErD,AADA,EAAa,EAAI,GACb,KAAS,EAAQ,CAAC;CACvB;CAEA,SAAS,GAAW,GAAiC;EAEpD,AADA,EAAa,EAAK,GACd,KAAQ,EAAO,CAAC;CACrB;CAQA,IAAM,KAAY,oBANA,IAAS,cAAc,GAMO,GAL9B,IAAS,cAAc,GAKoB,GAAG,EAAQ,GAAG,EAAK,GAHhE,KAAc,KAAY,IAAY,YAAY,GAGyB,GAJ3E,IAAU,YAAY,GAIgE,GAFtF,IAAY,YAAY;CAIxC,OACC,kBAAC,GAAD;EAAc,WAAW;YAAzB;GACE,KACA,kBAAC,GAAD;IAA0B;IAAc,SAAS;cAC/C;GACU,CAAA;GAGb,kBAAC,WAAD;IACQ;IACA;IACP,SAAS;IACE;cAJZ;KAMC,kBAAC,GAAD;MAAwB;MAAU,MAAM;MAAQ,WAAU;KAAU,CAAA;KAEpE,kBAAC,GAAD;MACC,MAAM;MACI;MACV,WAAU;MACV,MAAM;KACN,CAAA;KAED,kBAAC,GAAD;MAAc,MAAM,CAAC;MAAW,MAAM;MAAoB;KAAW,CAAA;KAErE,kBAAC,GAAD;MACC,WAAW;MACL;MACO;MACH;MACA;MACV,KAAK;MACL,SAAS;MACT,QAAQ;MACR,UAAU;MACA;MACV,IAAI;MACE;MACN,cAAc,KAAgB,KAAA;MAC9B,aAAa,KAAa,KAAuB;MACjD,OAAO,IAAa,KAAA,IAAY;MAChC,GAAI;KACJ,CAAA;KAED,kBAAC,GAAD;MAAc,MAAM,CAAC;MAAW,MAAM;MAAqB;KAAW,CAAA;KAEtE,kBAAC,GAAD;MACC,MAAM;MACI;MACV,WAAU;MACV,MAAM;KACN,CAAA;KAED,kBAAC,GAAD;MAAwB;MAAU,MAAM;MAAQ,WAAU;KAAU,CAAA;IAC5D;;GAER,KAAgB,kBAAC,GAAD,EAAA,UAAa,EAAyB,CAAA;EAC1C;;AAEhB"}

package/dist/modules/components/modal/modalContainer/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/modal/modalContainer/index.tsx"],"sourcesContent":["import {\n\ttype AnimationEvent,\n\ttype HTMLAttributes,\n\tuseEffect,\n\tuseState,\n} from \"react\";\n\nimport { useScrollLock } from \"../../../hooks/useScrollLock\";\nimport { ModalProvider } from \"../modalContext\";\nimport \"./styles.css\";\n\ntype ModalContainerProps = HTMLAttributes<HTMLElement> & {\n\t/** Controls whether the modal is visible. /\n\tisVisible: boolean;\n\t/* Callback invoked when the backdrop overlay is clicked. /\n\tmakeInvisible: () => void;\n};\n\n/\n ModalContainer — animated centered modal rendered over a backdrop overlay.\n \n Locks body scroll while open. Closes when the overlay is clicked.\n * Provides context consumed by `ModalHeader` (close button).\n \n @param props.isVisible - Whether the modal is open. Required.\n * @param props.makeInvisible - Called when the overlay is clicked. Required.\n \n ...Other valid HTML `<aside>` properties\n \n @returns ModalContainer JSX element.\n \n @example\n * ```tsx\n * const [isOpen, setIsOpen] = useState(false);\n \n <ModalContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>\n * <ModalHeader><h2>Confirm deletion</h2></ModalHeader>\n * <main><p>This action cannot be undone.</p></main>\n * <ModalFooter>\n * <Button onClick={() => setIsOpen(false)}>Cancel</Button>\n * <Button scheme=\"danger\" onClick={handleDelete}>Delete</Button>\n * </ModalFooter>\n * </ModalContainer>\n * ```\n */\n\nfunction ModalContainer(args: ModalContainerProps) {\n\tconst {\n\t\tisVisible,\n\t\tmakeInvisible,\n\t\tchildren,\n\t\tclassName: baseClassName = \"\",\n\t\t...rest\n\t} = args;\n\n\tconst [mounted, setMounted] = useState(isVisible);\n\tconst [isExiting, setIsExiting] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (isVisible) {\n\t\t\tsetMounted(true);\n\t\t\tsetIsExiting(false);\n\t\t} else if (mounted) {\n\t\t\tsetIsExiting(true);\n\t\t}\n\t}, [isVisible, mounted]);\n\n\tuseScrollLock(isVisible);\n\n\tfunction handleOverlayAnimationEnd(e: AnimationEvent<HTMLDivElement>) {\n\t\tif (e.target === e.currentTarget && isExiting) {\n\t\t\tsetIsExiting(false);\n\t\t\tsetMounted(false);\n\t\t\tmakeInvisible();\n\t\t}\n\t}\n\n\tif (!mounted) return null;\n\n\tconst className = [\n\t\t\"arkynModalContainer\",\n\t\tisExiting ? \"exiting\" : \"\",\n\t\tbaseClassName,\n\t]\n\t\t.filter(Boolean)\n\t\t.join(\" \");\n\n\treturn (\n\t\t<ModalProvider makeInvisible={() => setIsExiting(true)}>\n\t\t\t<aside className={className.trim()} {...rest}>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"arkynModalContainerOverlay\"\n\t\t\t\t\tonClick={() => setIsExiting(true)}\n\t\t\t\t\tonAnimationEnd={handleOverlayAnimationEnd}\n\t\t\t\t/>\n\t\t\t\t<div className=\"arkynModalContainerContent\">{children}</div>\n\t\t\t</aside>\n\t\t</ModalProvider>\n\t);\n}\n\nexport { ModalContainer };\n"],"mappings":";;;;;;AA8CA,SAAS,EAAe,GAA2B;CAClD,IAAM,EACL,cACA,kBACA,aACA,WAAW,IAAgB,IAC3B,GAAG,MACA,GAEE,CAAC,GAAS,KAAc,EAAS,CAAS,GAC1C,CAAC,GAAW,KAAgB,EAAS,EAAK;CAWhD,AATA,QAAgB;EACf,AAAI,KACH,EAAW,EAAI,GACf,EAAa,EAAK,KACR,KACV,EAAa,EAAI;CAEnB,GAAG,CAAC,GAAW,CAAO,CAAC,GAEvB,EAAc,CAAS;CAEvB,SAAS,EAA0B,GAAmC;EACrE,AAAI,EAAE,WAAW,EAAE,iBAAiB,MACnC,EAAa,EAAK,GAClB,EAAW,EAAK,GAChB,EAAc;CAEhB;CAYA,OAVK,IAWJ,kBAAC,GAAD;EAAe,qBAAqB,EAAa,EAAI;YACpD,kBAAC,SAAD;GAAO,WAVS;IACjB;IACA,IAAY,YAAY;IACxB;GACD,CAAC,CACC,OAAO,OAAO,CAAC,CACf,KAAK,GAIa,CAAA,CAAU,KAAK;GAAG,GAAI;aAAxC,CACC,kBAAC,OAAD;IACC,WAAU;IACV,eAAe,EAAa,EAAI;IAChC,gBAAgB;GAChB,CAAA,GACD,kBAAC,OAAD;IAAK,WAAU;IAA8B;GAAc,CAAA,CACrD;;CACO,CAAA,IApBK;AAsBtB"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/modal/modalContainer/index.tsx"],"sourcesContent":["import {\n\ttype AnimationEvent,\n\ttype HTMLAttributes,\n\tuseEffect,\n\tuseState,\n} from \"react\";\n\nimport { useScrollLock } from \"../../../hooks/useScrollLock\";\nimport { ModalProvider } from \"../modalContext\";\nimport \"./styles.css\";\n\ntype ModalContainerProps = HTMLAttributes<HTMLElement> & {\n\t/** Controls whether the modal is visible. /\n\tisVisible: boolean;\n\t/* Callback invoked when the backdrop overlay is clicked. /\n\tmakeInvisible: () => void;\n};\n\n/\n ModalContainer, animated centered modal rendered over a backdrop overlay.\n \n Locks body scroll while open. Closes when the overlay is clicked.\n * Provides context consumed by `ModalHeader` (close button).\n \n @param props.isVisible - Whether the modal is open. Required.\n * @param props.makeInvisible - Called when the overlay is clicked. Required.\n \n ...Other valid HTML `<aside>` properties\n \n @returns ModalContainer JSX element.\n \n @example\n * ```tsx\n * const [isOpen, setIsOpen] = useState(false);\n \n <ModalContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>\n * <ModalHeader><h2>Confirm deletion</h2></ModalHeader>\n * <main><p>This action cannot be undone.</p></main>\n * <ModalFooter>\n * <Button onClick={() => setIsOpen(false)}>Cancel</Button>\n * <Button scheme=\"danger\" onClick={handleDelete}>Delete</Button>\n * </ModalFooter>\n * </ModalContainer>\n * ```\n */\n\nfunction ModalContainer(args: ModalContainerProps) {\n\tconst {\n\t\tisVisible,\n\t\tmakeInvisible,\n\t\tchildren,\n\t\tclassName: baseClassName = \"\",\n\t\t...rest\n\t} = args;\n\n\tconst [mounted, setMounted] = useState(isVisible);\n\tconst [isExiting, setIsExiting] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (isVisible) {\n\t\t\tsetMounted(true);\n\t\t\tsetIsExiting(false);\n\t\t} else if (mounted) {\n\t\t\tsetIsExiting(true);\n\t\t}\n\t}, [isVisible, mounted]);\n\n\tuseScrollLock(isVisible);\n\n\tfunction handleOverlayAnimationEnd(e: AnimationEvent<HTMLDivElement>) {\n\t\tif (e.target === e.currentTarget && isExiting) {\n\t\t\tsetIsExiting(false);\n\t\t\tsetMounted(false);\n\t\t\tmakeInvisible();\n\t\t}\n\t}\n\n\tif (!mounted) return null;\n\n\tconst className = [\n\t\t\"arkynModalContainer\",\n\t\tisExiting ? \"exiting\" : \"\",\n\t\tbaseClassName,\n\t]\n\t\t.filter(Boolean)\n\t\t.join(\" \");\n\n\treturn (\n\t\t<ModalProvider makeInvisible={() => setIsExiting(true)}>\n\t\t\t<aside className={className.trim()} {...rest}>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"arkynModalContainerOverlay\"\n\t\t\t\t\tonClick={() => setIsExiting(true)}\n\t\t\t\t\tonAnimationEnd={handleOverlayAnimationEnd}\n\t\t\t\t/>\n\t\t\t\t<div className=\"arkynModalContainerContent\">{children}</div>\n\t\t\t</aside>\n\t\t</ModalProvider>\n\t);\n}\n\nexport { ModalContainer };\n"],"mappings":";;;;;;AA8CA,SAAS,EAAe,GAA2B;CAClD,IAAM,EACL,cACA,kBACA,aACA,WAAW,IAAgB,IAC3B,GAAG,MACA,GAEE,CAAC,GAAS,KAAc,EAAS,CAAS,GAC1C,CAAC,GAAW,KAAgB,EAAS,EAAK;CAWhD,AATA,QAAgB;EACf,AAAI,KACH,EAAW,EAAI,GACf,EAAa,EAAK,KACR,KACV,EAAa,EAAI;CAEnB,GAAG,CAAC,GAAW,CAAO,CAAC,GAEvB,EAAc,CAAS;CAEvB,SAAS,EAA0B,GAAmC;EACrE,AAAI,EAAE,WAAW,EAAE,iBAAiB,MACnC,EAAa,EAAK,GAClB,EAAW,EAAK,GAChB,EAAc;CAEhB;CAYA,OAVK,IAWJ,kBAAC,GAAD;EAAe,qBAAqB,EAAa,EAAI;YACpD,kBAAC,SAAD;GAAO,WAVS;IACjB;IACA,IAAY,YAAY;IACxB;GACD,CAAC,CACC,OAAO,OAAO,CAAC,CACf,KAAK,GAIa,CAAA,CAAU,KAAK;GAAG,GAAI;aAAxC,CACC,kBAAC,OAAD;IACC,WAAU;IACV,eAAe,EAAa,EAAI;IAChC,gBAAgB;GAChB,CAAA,GACD,kBAAC,OAAD;IAAK,WAAU;IAA8B;GAAc,CAAA,CACrD;;CACO,CAAA,IApBK;AAsBtB"}

package/dist/modules/components/modal/modalFooter/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/modal/modalFooter/index.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport \"./styles.css\";\n\ntype ModalFooterProps = HTMLAttributes<HTMLElement> & {\n\t/*\n\t Horizontal alignment of footer content.\n\t * - `left` / `center` / `right`: flex-start, center, flex-end.\n\t * - `between`: space-between.\n\t * - `around`: space-around.\n\t * @default \"right\"\n\t /\n\talignment?: \"left\" \| \"center\" \| \"right\" \| \"between\" \| \"around\";\n};\n\n/\n ModalFooter — action bar at the bottom of a modal dialog.\n \n @param props.alignment - Horizontal alignment of children. Default: `\"right\"`\n \n ...Other valid HTML `<footer>` properties\n \n @returns ModalFooter JSX element.\n \n @example\n * ```tsx\n * // Confirm / cancel pattern (right-aligned by default)\n * <ModalFooter>\n * <Button variant=\"ghost\" onClick={onClose}>Cancel</Button>\n * <Button scheme=\"danger\" onClick={onConfirm}>Delete</Button>\n * </ModalFooter>\n \n // Space-between layout (e.g. back / next in a wizard)\n * <ModalFooter alignment=\"between\">\n * <Button variant=\"outline\" onClick={onBack}>Back</Button>\n * <Button onClick={onNext}>Next</Button>\n * </ModalFooter>\n * ```\n */\n\nfunction ModalFooter(args: ModalFooterProps) {\n\tconst { alignment = \"right\", className: baseClassName, ...rest } = args;\n\tconst className = `arkynModalFooter ${alignment} ${baseClassName}`;\n\n\treturn <footer className={className.trim()} {...rest} />;\n}\n\nexport { ModalFooter };\n"],"mappings":";;;AAuCA,SAAS,EAAY,GAAwB;CAC5C,IAAM,EAAE,eAAY,SAAS,WAAW,GAAe,GAAG,MAAS;CAGnE,OAAO,kBAAC,UAAD;EAAQ,WAAW,oBAFY,EAAU,GAAG,IAEf,KAAK;EAAG,GAAI;CAAO,CAAA;AACxD"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/modal/modalFooter/index.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport \"./styles.css\";\n\ntype ModalFooterProps = HTMLAttributes<HTMLElement> & {\n\t/*\n\t Horizontal alignment of footer content.\n\t * - `left` / `center` / `right`: flex-start, center, flex-end.\n\t * - `between`: space-between.\n\t * - `around`: space-around.\n\t * @default \"right\"\n\t /\n\talignment?: \"left\" \| \"center\" \| \"right\" \| \"between\" \| \"around\";\n};\n\n/\n ModalFooter, action bar at the bottom of a modal dialog.\n \n @param props.alignment - Horizontal alignment of children. Default: `\"right\"`\n \n ...Other valid HTML `<footer>` properties\n \n @returns ModalFooter JSX element.\n \n @example\n * ```tsx\n * // Confirm / cancel pattern (right-aligned by default)\n * <ModalFooter>\n * <Button variant=\"ghost\" onClick={onClose}>Cancel</Button>\n * <Button scheme=\"danger\" onClick={onConfirm}>Delete</Button>\n * </ModalFooter>\n \n // Space-between layout (e.g. back / next in a wizard)\n * <ModalFooter alignment=\"between\">\n * <Button variant=\"outline\" onClick={onBack}>Back</Button>\n * <Button onClick={onNext}>Next</Button>\n * </ModalFooter>\n * ```\n */\n\nfunction ModalFooter(args: ModalFooterProps) {\n\tconst { alignment = \"right\", className: baseClassName, ...rest } = args;\n\tconst className = `arkynModalFooter ${alignment} ${baseClassName}`;\n\n\treturn <footer className={className.trim()} {...rest} />;\n}\n\nexport { ModalFooter };\n"],"mappings":";;;AAuCA,SAAS,EAAY,GAAwB;CAC5C,IAAM,EAAE,eAAY,SAAS,WAAW,GAAe,GAAG,MAAS;CAGnE,OAAO,kBAAC,UAAD;EAAQ,WAAW,oBAFY,EAAU,GAAG,IAEf,KAAK;EAAG,GAAI;CAAO,CAAA;AACxD"}

package/dist/modules/components/modal/modalHeader/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/modal/modalHeader/index.tsx"],"sourcesContent":["import { X } from \"lucide-react\";\nimport type { HTMLAttributes } from \"react\";\n\nimport { useModal } from \"../modalContext\";\nimport \"./styles.css\";\n\ntype ModalHeaderProps = HTMLAttributes<HTMLElement> & {\n\t/** Whether to render the X close button. @default true /\n\tshowCloseButton?: boolean;\n};\n\n/\n ModalHeader — header section for a `ModalContainer`, with an optional close button.\n \n The close button calls `makeInvisible` from the nearest `ModalContainer` context.\n * Must be rendered inside a `ModalContainer`.\n \n @param props.showCloseButton - Renders the X close button. Default: true\n \n ...Other valid HTML `<header>` properties\n \n @returns ModalHeader JSX element.\n \n @example\n * ```tsx\n * <ModalContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>\n * <ModalHeader>\n * <h2>Edit profile</h2>\n * </ModalHeader>\n * <main>...</main>\n * <ModalFooter><Button onClick={onSave}>Save</Button></ModalFooter>\n * </ModalContainer>\n * ```\n */\n\nfunction ModalHeader(args: ModalHeaderProps) {\n\tconst {\n\t\tshowCloseButton = true,\n\t\tclassName: baseClassName,\n\t\tchildren,\n\t\t...rest\n\t} = args;\n\n\tconst { makeInvisible } = useModal();\n\tconst className = `arkynModalHeader ${baseClassName}`;\n\n\treturn (\n\t\t<header className={className.trim()} {...rest}>\n\t\t\t{children}\n\n\t\t\t{showCloseButton && (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={makeInvisible}\n\t\t\t\t\taria-label=\"Close modal button\"\n\t\t\t\t\tclassName=\"arkynModalHeaderCloseButton\"\n\t\t\t\t>\n\t\t\t\t\t<X size={24} />\n\t\t\t\t</button>\n\t\t\t)}\n\t\t</header>\n\t);\n}\n\nexport { ModalHeader };\n"],"mappings":";;;;;AAmCA,SAAS,EAAY,GAAwB;CAC5C,IAAM,EACL,qBAAkB,IAClB,WAAW,GACX,aACA,GAAG,MACA,GAEE,EAAE,qBAAkB,EAAS;CAGnC,OACC,kBAAC,UAAD;EAAQ,WAAW,oBAHkB,IAGR,KAAK;EAAG,GAAI;YAAzC,CACE,GAEA,KACA,kBAAC,UAAD;GACC,MAAK;GACL,SAAS;GACT,cAAW;GACX,WAAU;aAEV,kBAAC,GAAD,EAAG,MAAM,GAAK,CAAA;EACP,CAAA,CAEF;;AAEV"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/modal/modalHeader/index.tsx"],"sourcesContent":["import { X } from \"lucide-react\";\nimport type { HTMLAttributes } from \"react\";\n\nimport { useModal } from \"../modalContext\";\nimport \"./styles.css\";\n\ntype ModalHeaderProps = HTMLAttributes<HTMLElement> & {\n\t/** Whether to render the X close button. @default true /\n\tshowCloseButton?: boolean;\n};\n\n/\n ModalHeader, header section for a `ModalContainer`, with an optional close button.\n \n The close button calls `makeInvisible` from the nearest `ModalContainer` context.\n * Must be rendered inside a `ModalContainer`.\n \n @param props.showCloseButton - Renders the X close button. Default: true\n \n ...Other valid HTML `<header>` properties\n \n @returns ModalHeader JSX element.\n \n @example\n * ```tsx\n * <ModalContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>\n * <ModalHeader>\n * <h2>Edit profile</h2>\n * </ModalHeader>\n * <main>...</main>\n * <ModalFooter><Button onClick={onSave}>Save</Button></ModalFooter>\n * </ModalContainer>\n * ```\n */\n\nfunction ModalHeader(args: ModalHeaderProps) {\n\tconst {\n\t\tshowCloseButton = true,\n\t\tclassName: baseClassName,\n\t\tchildren,\n\t\t...rest\n\t} = args;\n\n\tconst { makeInvisible } = useModal();\n\tconst className = `arkynModalHeader ${baseClassName}`;\n\n\treturn (\n\t\t<header className={className.trim()} {...rest}>\n\t\t\t{children}\n\n\t\t\t{showCloseButton && (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={makeInvisible}\n\t\t\t\t\taria-label=\"Close modal button\"\n\t\t\t\t\tclassName=\"arkynModalHeaderCloseButton\"\n\t\t\t\t>\n\t\t\t\t\t<X size={24} />\n\t\t\t\t</button>\n\t\t\t)}\n\t\t</header>\n\t);\n}\n\nexport { ModalHeader };\n"],"mappings":";;;;;AAmCA,SAAS,EAAY,GAAwB;CAC5C,IAAM,EACL,qBAAkB,IAClB,WAAW,GACX,aACA,GAAG,MACA,GAEE,EAAE,qBAAkB,EAAS;CAGnC,OACC,kBAAC,UAAD;EAAQ,WAAW,oBAHkB,IAGR,KAAK;EAAG,GAAI;YAAzC,CACE,GAEA,KACA,kBAAC,UAAD;GACC,MAAK;GACL,SAAS;GACT,cAAW;GACX,WAAU;aAEV,kBAAC,GAAD,EAAG,MAAM,GAAK,CAAA;EACP,CAAA,CAEF;;AAEV"}

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

	@@ -1 +1 @@
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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"}
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/pagination/index.js.map CHANGED Viewed

	@@ -1 +1 @@
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"}
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/phoneInput/index.js CHANGED Viewed

@@ -1,99 +1,104 @@
 import { useForm as e } from "../../hooks/useForm.js";
 import { FieldTemplate as t } from "../../services/fieldTemplate.js";
-import { PhoneInputContainer as n } from "./phoneInputContainer/index.js";
-import { PhoneInputCountriesOverlay as ee } from "./phoneInputCountriesOverlay/index.js";
-import { PhoneInputCountryOption as te } from "./phoneInputCountryOption/index.js";
-import { PhoneInputCountryOptionsContainer as ne } from "./phoneInputCountryOptionsContainer/index.js";
-import { PhoneInputCountrySelector as r } from "./phoneInputCountrySelector/index.js";
-import { PhoneInputMask as i } from "./phoneInputMask/index.js";
-import { useId as a, useRef as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { findCountryMask as u, formatToPhone as d, removeNonNumeric as f } from "@arkyn/shared";
-import { countries as p } from "@arkyn/templates";
+import { TYPES as n, applyMask as r, getMask as i } from "../../utils/phoneInputUtilities.js";
+import { PhoneInputContainer as a } from "./phoneInputContainer/index.js";
+import { PhoneInputCountriesOverlay as o } from "./phoneInputCountriesOverlay/index.js";
+import { PhoneInputCountryOption as s } from "./phoneInputCountryOption/index.js";
+import { PhoneInputCountryOptionsContainer as c } from "./phoneInputCountryOptionsContainer/index.js";
+import { PhoneInputCountrySelector as ee } from "./phoneInputCountrySelector/index.js";
+import { PhoneInputMask as l } from "./phoneInputMask/index.js";
+import { useId as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { findCountryMask as h, formatToPhone as g, removeNonNumeric as _ } from "@arkyn/shared";
+import { countries as v } from "@arkyn/templates";
 //#region src/components/phoneInput/index.tsx
-function m(m) {
-	let { value: h, label: re, className: g = "", disabled: _ = !1, errorMessage: v, isLoading: y = !1, readOnly: b = !1, size: x = "md", defaultValue: S = "", variant: ie = "solid", showAsterisk: C, name: w, onChange: T, searchCountryPlaceholder: E = "Pesquisar país", notFoundCountryText: D = "Nenhum país encontrado", id: O, unShowFieldTemplate: k = !1, orientation: A = "vertical" } = m, j = p.find((e) => e.iso === "BR"), M = S ? d(S) : "", N = S ? u(S)[1] : j, [P, F] = s(!1), [I, L] = s(""), [R, z] = s(!1), [B, V] = s(M), H = h === void 0 ? B : h, [U, W] = s(N), { fieldErrors: G } = e(), K = o(null), q = a(), J = O || q, Y = v || G?.[w], ae = !!Y, X = _ || y, Z = o(null);
-	function oe() {
-		X || P || R || (F(!0), Z.current && Z.current.focus());
+function y(e, t) {
+	let a = _(e), o = _(t.code), s = e.trim().startsWith("+") && a.startsWith(o) ? a.slice(o.length) : a;
+	return t.code === "+55" ? r(s, n[i(s)]) : r(s, typeof t.mask == "string" ? t.mask : t.mask[0], "_");
+}
+function b(n) {
+	let { value: r, label: i, className: b = "", disabled: x = !1, errorMessage: S, isLoading: C = !1, readOnly: w = !1, size: T = "md", defaultValue: E = "", variant: te = "solid", showAsterisk: ne, name: D, onChange: re, searchCountryPlaceholder: ie = "Pesquisar país", notFoundCountryText: ae = "Nenhum país encontrado", id: O, unShowFieldTemplate: k = !1, orientation: A = "vertical" } = n, j = v.find((e) => e.iso === "BR"), M = E ? g(E) : "", N = E ? h(E)[1] : j, [P, F] = f(!1), [I, L] = f(""), [R, z] = f(!1), [B, V] = f(M), [H, U] = f(N), W = r === void 0 ? B : y(r, H), { fieldErrors: G } = e(), K = d(null), q = u(), oe = O || q, J = S || G?.[D], se = !!J, Y = x || C, X = d(null);
+	function ce() {
+		Y || P || R || (F(!0), X.current && X.current.focus());
 	}
-	function se() {
+	function Z() {
 		z(!0), F(!0);
 	}
-	function ce() {
+	function le() {
 		z(!1), F(!1);
 	}
-	function le() {
+	function ue() {
 		F(!0);
 	}
-	function ue() {
+	function de() {
 		F(!1);
 	}
 	function Q(e) {
 		return e.name.toLowerCase().includes(I.toLowerCase());
 	}
 	function $(e) {
-		let t = U.code;
-		return t += f(e || H), t;
+		let t = H.code;
+		return t += _(e || W), t;
 	}
-	return /* @__PURE__ */ c(t, {
-		name: w,
-		label: re,
-		showAsterisk: C,
-		className: g,
-		errorMessage: Y,
+	return /* @__PURE__ */ p(t, {
+		name: D,
+		label: i,
+		showAsterisk: ne,
+		className: b,
+		errorMessage: J,
 		unShowFieldTemplate: k,
 		orientation: A,
-		children: /* @__PURE__ */ l(n, {
-			disabled: X,
-			isError: ae,
-			isLoading: y,
+		children: /* @__PURE__ */ m(a, {
+			disabled: Y,
+			isError: se,
+			isLoading: C,
 			isFocused: P,
-			readOnly: b,
-			size: x,
-			variant: ie,
-			onFocus: oe,
+			readOnly: w,
+			size: T,
+			variant: te,
+			onFocus: ce,
 			children: [
-				/* @__PURE__ */ c(r, {
-					currentCountry: U,
-					onClick: se,
-					size: x
+				/* @__PURE__ */ p(ee, {
+					currentCountry: H,
+					onClick: Z,
+					size: T
 				}),
-				/* @__PURE__ */ l(ne, {
-					isOpen: X || b ? !1 : R,
+				/* @__PURE__ */ m(c, {
+					isOpen: Y || w ? !1 : R,
 					search: I,
-					placeholder: E,
+					placeholder: ie,
 					onSearch: L,
-					children: [p.filter((e) => Q(e)).map((e) => /* @__PURE__ */ c(te, {
+					children: [v.filter((e) => Q(e)).map((e) => /* @__PURE__ */ p(s, {
 						country: e,
 						handleChangeValue: () => {
-							W(e), z(!1), V("");
+							U(e), z(!1), V("");
 						},
-						isActive: e.iso === U.iso,
-						size: x
-					}, e.iso)), p.filter((e) => Q(e)).length === 0 && /* @__PURE__ */ c("p", { children: D })]
+						isActive: e.iso === H.iso,
+						size: T
+					}, e.iso)), v.filter((e) => Q(e)).length === 0 && /* @__PURE__ */ p("p", { children: ae })]
 				}),
-				/* @__PURE__ */ c(ee, {
-					isOpen: X || b ? !1 : R,
-					onClick: ce
+				/* @__PURE__ */ p(o, {
+					isOpen: Y || w ? !1 : R,
+					onClick: le
 				}),
-				/* @__PURE__ */ c(i, {
-					id: J,
-					ref: Z,
-					readonly: b,
-					currentCountry: U,
-					value: H,
-					disabled: X,
-					onBlur: ue,
-					onFocus: le,
-					size: x,
+				/* @__PURE__ */ p(l, {
+					id: oe,
+					ref: X,
+					readonly: w,
+					currentCountry: H,
+					value: W,
+					disabled: Y,
+					onBlur: de,
+					onFocus: ue,
+					size: T,
 					onChange: (e) => {
-						V(e), T?.($(e));
+						V(e), re?.($(e));
 					}
 				}),
-				/* @__PURE__ */ c("input", {
+				/* @__PURE__ */ p("input", {
 					ref: K,
 					type: "hidden",
-					name: w,
+					name: D,
 					value: $()
 				})
 			]
@@ -101,6 +106,6 @@ function m(m) {
 	});
 }
 //#endregion
-export { m as PhoneInput };
+export { b as PhoneInput };
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
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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"}
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\";\nimport { applyMask, getMask, TYPES } from \"../../utils/phoneInputUtilities\";\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\nfunction formatLocalValue(rawValue: string, country: CountryType) {\n\tconst digits = removeNonNumeric(rawValue);\n\tconst codeDigits = removeNonNumeric(country.code);\n\tconst hasCountryCode = rawValue.trim().startsWith(\"+\");\n\tconst localDigits =\n\t\thasCountryCode && digits.startsWith(codeDigits)\n\t\t\t? digits.slice(codeDigits.length)\n\t\t\t: digits;\n\n\tif (country.code === \"+55\") {\n\t\treturn applyMask(localDigits, TYPES[getMask(localDigits)]);\n\t}\n\n\tconst mask =\n\t\ttypeof country.mask === \"string\" ? country.mask : country.mask[0];\n\treturn applyMask(localDigits, mask, \"_\");\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\n\tconst [currentCountry, setCurrentCountry] = useState(defaultCountry);\n\n\tconst value =\n\t\trawValue !== undefined\n\t\t\t? formatLocalValue(rawValue, currentCountry)\n\t\t\t: internalValue;\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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"}