@arkyn/components 3.0.3 → 3.0.5

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 (177) hide show
  1. package/README.md +24 -24
  2. package/dist/components/alert/alertContainer/index.d.ts +7 -7
  3. package/dist/components/alert/alertContent/index.d.ts +1 -1
  4. package/dist/components/alert/alertDescription/index.d.ts +1 -1
  5. package/dist/components/alert/alertIcon/index.d.ts +1 -1
  6. package/dist/components/alert/alertTitle/index.d.ts +1 -1
  7. package/dist/components/audioPlayer/index.d.ts +1 -1
  8. package/dist/components/audioUpload/index.d.ts +2 -2
  9. package/dist/components/badge/index.d.ts +1 -1
  10. package/dist/components/button/index.d.ts +1 -1
  11. package/dist/components/cardTab/cardTabButton/index.d.ts +1 -1
  12. package/dist/components/cardTab/cardTabContainer/index.d.ts +1 -1
  13. package/dist/components/checkbox/index.d.ts +3 -3
  14. package/dist/components/checkbox/index.d.ts.map +1 -1
  15. package/dist/components/clientOnly.d.ts +2 -2
  16. package/dist/components/clientOnly.d.ts.map +1 -1
  17. package/dist/components/currencyInput/index.d.ts +2 -2
  18. package/dist/components/datePicker/index.d.ts +1 -1
  19. package/dist/components/divider/index.d.ts +1 -1
  20. package/dist/components/drawer/drawerContainer/index.d.ts +1 -1
  21. package/dist/components/drawer/drawerHeader/index.d.ts +1 -1
  22. package/dist/components/facebookPixel/index.d.ts +1 -1
  23. package/dist/components/fieldError/index.d.ts +1 -1
  24. package/dist/components/fieldLabel/index.d.ts +1 -1
  25. package/dist/components/fieldWrapper/index.d.ts +1 -1
  26. package/dist/components/fileUpload/index.d.ts +2 -2
  27. package/dist/components/googleAnalytics/index.d.ts +1 -1
  28. package/dist/components/googleTagManager/index.d.ts +1 -1
  29. package/dist/components/iconButton/index.d.ts +1 -1
  30. package/dist/components/imageUpload/index.d.ts +2 -2
  31. package/dist/components/input/index.d.ts +1 -1
  32. package/dist/components/mapView/index.d.ts +2 -2
  33. package/dist/components/mapView/index.d.ts.map +1 -1
  34. package/dist/components/maskedInput/index.d.ts +3 -3
  35. package/dist/components/modal/modalContainer/index.d.ts +1 -1
  36. package/dist/components/modal/modalFooter/index.d.ts +1 -1
  37. package/dist/components/modal/modalHeader/index.d.ts +1 -1
  38. package/dist/components/multiSelect/index.d.ts +1 -1
  39. package/dist/components/pagination/index.d.ts +1 -1
  40. package/dist/components/phoneInput/index.d.ts +2 -2
  41. package/dist/components/phoneInput/index.d.ts.map +1 -1
  42. package/dist/components/popover/index.d.ts +2 -2
  43. package/dist/components/popover/index.d.ts.map +1 -1
  44. package/dist/components/radio/radioBox/index.d.ts +4 -4
  45. package/dist/components/radio/radioGroup/index.d.ts +3 -3
  46. package/dist/components/richText/index.d.ts +13 -4
  47. package/dist/components/richText/index.d.ts.map +1 -1
  48. package/dist/components/richText/insertLink/index.d.ts +5 -0
  49. package/dist/components/richText/insertLink/index.d.ts.map +1 -0
  50. package/dist/components/richText/insertVideo/index.d.ts.map +1 -1
  51. package/dist/components/richText/leaf/index.d.ts +1 -0
  52. package/dist/components/richText/leaf/index.d.ts.map +1 -1
  53. package/dist/components/searchPlaces.d.ts +3 -3
  54. package/dist/components/select/index.d.ts +1 -1
  55. package/dist/components/slider/index.d.ts +1 -1
  56. package/dist/components/switch/index.d.ts +3 -3
  57. package/dist/components/switch/index.d.ts.map +1 -1
  58. package/dist/components/tab/tabButton/index.d.ts +1 -1
  59. package/dist/components/tab/tabContainer/index.d.ts +1 -1
  60. package/dist/components/table/tableBody/index.d.ts +1 -1
  61. package/dist/components/table/tableCaption/index.d.ts +2 -2
  62. package/dist/components/table/tableContainer/index.d.ts +1 -1
  63. package/dist/components/table/tableFooter/index.d.ts +1 -1
  64. package/dist/components/table/tableHeader/index.d.ts +2 -2
  65. package/dist/components/textarea/index.d.ts +1 -1
  66. package/dist/components/tooltip/index.d.ts +1 -1
  67. package/dist/hooks/useAutomation.d.ts +1 -1
  68. package/dist/hooks/useDrawer.d.ts +5 -5
  69. package/dist/hooks/useForm.d.ts +2 -2
  70. package/dist/hooks/useHydrated.d.ts +1 -1
  71. package/dist/hooks/useModal.d.ts +5 -5
  72. package/dist/hooks/useScopedParams.d.ts +5 -5
  73. package/dist/hooks/useScrollLock.d.ts +2 -2
  74. package/dist/hooks/useSearchAutomation.d.ts +6 -6
  75. package/dist/hooks/useSlider.d.ts +2 -2
  76. package/dist/hooks/useToast.d.ts +1 -1
  77. package/dist/index.js +710 -633
  78. package/dist/index.js.map +1 -1
  79. package/dist/modules/components/alert/alertContainer/index.js.map +1 -1
  80. package/dist/modules/components/alert/alertContent/index.js.map +1 -1
  81. package/dist/modules/components/alert/alertDescription/index.js.map +1 -1
  82. package/dist/modules/components/alert/alertIcon/index.js.map +1 -1
  83. package/dist/modules/components/alert/alertTitle/index.js.map +1 -1
  84. package/dist/modules/components/audioPlayer/index.js.map +1 -1
  85. package/dist/modules/components/audioUpload/index.js.map +1 -1
  86. package/dist/modules/components/badge/index.js.map +1 -1
  87. package/dist/modules/components/button/index.js.map +1 -1
  88. package/dist/modules/components/cardTab/cardTabButton/index.js.map +1 -1
  89. package/dist/modules/components/cardTab/cardTabContainer/index.js.map +1 -1
  90. package/dist/modules/components/checkbox/index.js.map +1 -1
  91. package/dist/modules/components/clientOnly.js.map +1 -1
  92. package/dist/modules/components/currencyInput/index.js.map +1 -1
  93. package/dist/modules/components/datePicker/index.js.map +1 -1
  94. package/dist/modules/components/divider/index.js.map +1 -1
  95. package/dist/modules/components/drawer/drawerContainer/index.js.map +1 -1
  96. package/dist/modules/components/drawer/drawerHeader/index.js.map +1 -1
  97. package/dist/modules/components/facebookPixel/index.js.map +1 -1
  98. package/dist/modules/components/fieldError/index.js.map +1 -1
  99. package/dist/modules/components/fieldLabel/index.js.map +1 -1
  100. package/dist/modules/components/fieldWrapper/index.js.map +1 -1
  101. package/dist/modules/components/fileUpload/index.js.map +1 -1
  102. package/dist/modules/components/googleAnalytics/index.js.map +1 -1
  103. package/dist/modules/components/googleTagManager/index.js.map +1 -1
  104. package/dist/modules/components/iconButton/index.js.map +1 -1
  105. package/dist/modules/components/imageUpload/index.js.map +1 -1
  106. package/dist/modules/components/input/index.js.map +1 -1
  107. package/dist/modules/components/mapView/index.js.map +1 -1
  108. package/dist/modules/components/maskedInput/index.js.map +1 -1
  109. package/dist/modules/components/modal/modalContainer/index.js.map +1 -1
  110. package/dist/modules/components/modal/modalFooter/index.js.map +1 -1
  111. package/dist/modules/components/modal/modalHeader/index.js.map +1 -1
  112. package/dist/modules/components/multiSelect/index.js.map +1 -1
  113. package/dist/modules/components/pagination/index.js.map +1 -1
  114. package/dist/modules/components/phoneInput/index.js +59 -59
  115. package/dist/modules/components/phoneInput/index.js.map +1 -1
  116. package/dist/modules/components/popover/index.js.map +1 -1
  117. package/dist/modules/components/radio/radioBox/index.js.map +1 -1
  118. package/dist/modules/components/radio/radioGroup/index.js.map +1 -1
  119. package/dist/modules/components/richText/index.js +58 -56
  120. package/dist/modules/components/richText/index.js.map +1 -1
  121. package/dist/modules/components/richText/insertLink/index.js +68 -0
  122. package/dist/modules/components/richText/insertLink/index.js.map +1 -0
  123. package/dist/modules/components/richText/insertLink/styles.css +1 -0
  124. package/dist/modules/components/richText/insertVideo/index.js +45 -41
  125. package/dist/modules/components/richText/insertVideo/index.js.map +1 -1
  126. package/dist/modules/components/richText/leaf/index.js +6 -1
  127. package/dist/modules/components/richText/leaf/index.js.map +1 -1
  128. package/dist/modules/components/richText/leaf/styles.css +1 -0
  129. package/dist/modules/components/richText/styles.css +4 -0
  130. package/dist/modules/components/searchPlaces.js.map +1 -1
  131. package/dist/modules/components/select/index.js.map +1 -1
  132. package/dist/modules/components/slider/index.js.map +1 -1
  133. package/dist/modules/components/switch/index.js.map +1 -1
  134. package/dist/modules/components/tab/tabButton/index.js.map +1 -1
  135. package/dist/modules/components/tab/tabContainer/index.js.map +1 -1
  136. package/dist/modules/components/table/tableBody/index.js.map +1 -1
  137. package/dist/modules/components/table/tableCaption/index.js.map +1 -1
  138. package/dist/modules/components/table/tableContainer/index.js.map +1 -1
  139. package/dist/modules/components/table/tableFooter/index.js.map +1 -1
  140. package/dist/modules/components/table/tableHeader/index.js.map +1 -1
  141. package/dist/modules/components/textarea/index.js.map +1 -1
  142. package/dist/modules/components/tooltip/index.js.map +1 -1
  143. package/dist/modules/hooks/useAutomation.js.map +1 -1
  144. package/dist/modules/hooks/useDrawer.js.map +1 -1
  145. package/dist/modules/hooks/useForm.js.map +1 -1
  146. package/dist/modules/hooks/useHydrated.js.map +1 -1
  147. package/dist/modules/hooks/useModal.js.map +1 -1
  148. package/dist/modules/hooks/useScopedParams.js.map +1 -1
  149. package/dist/modules/hooks/useScrollLock.js.map +1 -1
  150. package/dist/modules/hooks/useSearchAutomation.js.map +1 -1
  151. package/dist/modules/hooks/useSlider.js.map +1 -1
  152. package/dist/modules/hooks/useToast.js.map +1 -1
  153. package/dist/modules/providers/drawerProvider.js.map +1 -1
  154. package/dist/modules/providers/formProvider.js.map +1 -1
  155. package/dist/modules/providers/modalProvider.js.map +1 -1
  156. package/dist/modules/providers/placesProvider.js.map +1 -1
  157. package/dist/modules/providers/toastProvider.js.map +1 -1
  158. package/dist/modules/services/isValidHttpsUrl.js +12 -0
  159. package/dist/modules/services/isValidHttpsUrl.js.map +1 -0
  160. package/dist/modules/services/toHtml.js.map +1 -1
  161. package/dist/modules/services/toRichTextValue.js.map +1 -1
  162. package/dist/modules/utils/richTextUtilities.js +24 -17
  163. package/dist/modules/utils/richTextUtilities.js.map +1 -1
  164. package/dist/providers/drawerProvider.d.ts +1 -1
  165. package/dist/providers/formProvider.d.ts +1 -1
  166. package/dist/providers/modalProvider.d.ts +1 -1
  167. package/dist/providers/placesProvider.d.ts +1 -1
  168. package/dist/providers/toastProvider.d.ts +1 -1
  169. package/dist/services/isValidHttpsUrl.d.ts +3 -0
  170. package/dist/services/isValidHttpsUrl.d.ts.map +1 -0
  171. package/dist/services/toHtml.d.ts +1 -1
  172. package/dist/services/toRichTextValue.d.ts +1 -1
  173. package/dist/style.css +1 -1
  174. package/dist/types/richTextTypes.d.ts +13 -2
  175. package/dist/types/richTextTypes.d.ts.map +1 -1
  176. package/dist/utils/richTextUtilities.d.ts.map +1 -1
  177. package/package.json +2 -2
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/fileUpload/index.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldError } from \"../fieldError\";\nimport { FieldLabel } from \"../fieldLabel\";\nimport { FieldWrapper } from \"../fieldWrapper\";\n\nimport { HasFileContent } from \"./hasFileContent\";\nimport { NoFileContent } from \"./noFileContent\";\nimport \"./styles.css\";\n\ntype FileUploadProps = {\n\t/** Field name for form submission (stores the uploaded file URL). Required. */\n\tname: string;\n\t/** Server endpoint URL that receives the `multipart/form-data` upload request. Required. */\n\taction: 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 a file is selected. @default \"Alterar arquivo\" */\n\tchangeFileButtonText?: string;\n\t/** Label for the file-picker button before a file is selected. @default \"Selecionar arquivo\" */\n\tselectFileButtonText?: string;\n\t/** Text displayed in the drag-and-drop zone. @default \"Ou arraste e solte o arquivo aqui\" */\n\tdropFileText?: 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 file URL. @default \"url\" */\n\tfileResponseName?: string;\n\t/** Accepted file MIME types or extensions (e.g. `\".pdf\"`, `\"image/*\"`). @default \"*\" */\n\tacceptFile?: string;\n\t/** Callback fired after a successful upload. Receives the URL returned by the server. */\n\tonChange?: (url?: string) => void;\n};\n\n/**\n * FileUpload drag-and-drop file uploader with server upload and file-name 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.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.acceptFile - Accepted MIME types or extensions. Default: \"*\"\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 file URL.\n *\n * @returns FileUpload JSX element wrapped in `FieldWrapper`.\n *\n * @example\n * ```tsx\n * // Basic\n * <FileUpload name=\"document\" action=\"/api/upload\" />\n *\n * // PDF only with label and callback\n * <FileUpload\n * name=\"contract\"\n * action=\"/api/upload/docs\"\n * label=\"Contract (PDF)\"\n * showAsterisk\n * acceptFile=\".pdf\"\n * fileResponseName=\"documentUrl\"\n * onChange={(url) => setContractUrl(url)}\n * />\n * ```\n */\n\nfunction FileUpload(props: FileUploadProps) {\n\tconst {\n\t\tname,\n\t\tlabel,\n\t\tshowAsterisk = false,\n\t\taction,\n\t\tfileName = \"file\",\n\t\tmethod = \"POST\",\n\t\tacceptFile = \"*\",\n\t\tfileResponseName = \"url\",\n\t\tchangeFileButtonText = \"Alterar arquivo\",\n\t\tselectFileButtonText = \"Selecionar arquivo\",\n\t\tdropFileText = \"Ou arraste e solte o arquivo aqui\",\n\t\tonChange,\n\t\tdisabled = false,\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\tconst fieldError = fieldErrors?.[name];\n\n\tconst [value, setValue] = useState(\"\");\n\tconst [error, setError] = useState(\"\");\n\tconst [file, setFile] = useState<File | null>(null);\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tasync function handleUploadFile(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 o arquivo\");\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\t\thandleUploadFile(file);\n\t}\n\n\tconst errorMessage = fieldError || error;\n\n\tconst hasErrorClassName = errorMessage ? \"hasError\" : \"noHasError\";\n\tconst hasFileClassName = file ? \"hasFile\" : \"noHasFile\";\n\tconst className = `arkynFileUpload ${hasErrorClassName} ${hasFileClassName}`;\n\n\treturn (\n\t\t<FieldWrapper>\n\t\t\t{label && <FieldLabel showAsterisk={showAsterisk}>{label}</FieldLabel>}\n\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{!file && (\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\tacceptFile={acceptFile}\n\t\t\t\t\t\tdropFileText={dropFileText}\n\t\t\t\t\t\thandleSelectFile={handleSelectFile}\n\t\t\t\t\t\tselectFileButtonText={selectFileButtonText}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{file && (\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\tacceptFile={acceptFile}\n\t\t\t\t\t\tfile={file}\n\t\t\t\t\t\thandleSelectFile={handleSelectFile}\n\t\t\t\t\t\tchangeFileButtonText={changeFileButtonText}\n\t\t\t\t\t\treSendFile={\n\t\t\t\t\t\t\terrorMessage && file ? () => handleUploadFile(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\n\t\t\t{errorMessage && <FieldError>{errorMessage}</FieldError>}\n\t\t</FieldWrapper>\n\t);\n}\n\nexport { FileUpload };\n"],"mappings":";;;;;;;;;;AA8EA,SAAS,EAAW,GAAwB;CAC3C,IAAM,EACL,SACA,UACA,kBAAe,IACf,WACA,cAAW,QACX,YAAS,QACT,gBAAa,KACb,sBAAmB,OACnB,0BAAuB,mBACvB,0BAAuB,sBACvB,kBAAe,qCACf,aACA,cAAW,OACR,GAEE,EAAE,mBAAgB,EAAQ,GAC1B,IAAa,IAAc,IAE3B,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,CAAC,GAAM,KAAW,EAAsB,IAAI,GAC5C,CAAC,GAAW,KAAgB,EAAS,EAAK;CAEhD,eAAe,EAAiB,GAAY;EAC3C,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,0BAA0B;EACpC,CAAC,CAAC,CACD,cAAc,EAAa,EAAK,CAAC;CACpC;CAEA,SAAS,EAAiB,GAAY;EACjC,KACJ,EAAiB,CAAI;CACtB;CAEA,IAAM,IAAe,KAAc;CAMnC,OACC,kBAAC,GAAD,EAAA,UAAA;EACE,KAAS,kBAAC,GAAD;GAA0B;aAAe;EAAkB,CAAA;EAErE,kBAAC,OAAD;GAAgB,WAAA,mBARQ,IAAe,aAAa,aAEC,GAD9B,IAAO,YAAY;aAO1C;IACC,kBAAC,SAAD;KAAO,MAAK;KAAe;KAAM,OAAO,KAAS;IAAK,CAAA;IAErD,CAAC,KACD,kBAAC,GAAD;KACW;KACC;KACC;KACE;KACI;KACI;IACtB,CAAA;IAGD,KACA,kBAAC,GAAD;KACW;KACC;KACC;KACN;KACY;KACI;KACtB,YACC,KAAgB,UAAa,EAAiB,CAAI,IAAI,KAAA;IAEvD,CAAA;GAEE;;EAEJ,KAAgB,kBAAC,GAAD,EAAA,UAAa,EAAyB,CAAA;CAC1C,EAAA,CAAA;AAEhB"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/fileUpload/index.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldError } from \"../fieldError\";\nimport { FieldLabel } from \"../fieldLabel\";\nimport { FieldWrapper } from \"../fieldWrapper\";\n\nimport { HasFileContent } from \"./hasFileContent\";\nimport { NoFileContent } from \"./noFileContent\";\nimport \"./styles.css\";\n\ntype FileUploadProps = {\n\t/** Field name for form submission (stores the uploaded file URL). Required. */\n\tname: string;\n\t/** Server endpoint URL that receives the `multipart/form-data` upload request. Required. */\n\taction: 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 a file is selected. @default \"Alterar arquivo\" */\n\tchangeFileButtonText?: string;\n\t/** Label for the file-picker button before a file is selected. @default \"Selecionar arquivo\" */\n\tselectFileButtonText?: string;\n\t/** Text displayed in the drag-and-drop zone. @default \"Ou arraste e solte o arquivo aqui\" */\n\tdropFileText?: 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 file URL. @default \"url\" */\n\tfileResponseName?: string;\n\t/** Accepted file MIME types or extensions (e.g. `\".pdf\"`, `\"image/*\"`). @default \"*\" */\n\tacceptFile?: string;\n\t/** Callback fired after a successful upload. Receives the URL returned by the server. */\n\tonChange?: (url?: string) => void;\n};\n\n/**\n * FileUpload, drag-and-drop file uploader with server upload and file-name 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.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.acceptFile - Accepted MIME types or extensions. Default: \"*\"\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 file URL.\n *\n * @returns FileUpload JSX element wrapped in `FieldWrapper`.\n *\n * @example\n * ```tsx\n * // Basic\n * <FileUpload name=\"document\" action=\"/api/upload\" />\n *\n * // PDF only with label and callback\n * <FileUpload\n * name=\"contract\"\n * action=\"/api/upload/docs\"\n * label=\"Contract (PDF)\"\n * showAsterisk\n * acceptFile=\".pdf\"\n * fileResponseName=\"documentUrl\"\n * onChange={(url) => setContractUrl(url)}\n * />\n * ```\n */\n\nfunction FileUpload(props: FileUploadProps) {\n\tconst {\n\t\tname,\n\t\tlabel,\n\t\tshowAsterisk = false,\n\t\taction,\n\t\tfileName = \"file\",\n\t\tmethod = \"POST\",\n\t\tacceptFile = \"*\",\n\t\tfileResponseName = \"url\",\n\t\tchangeFileButtonText = \"Alterar arquivo\",\n\t\tselectFileButtonText = \"Selecionar arquivo\",\n\t\tdropFileText = \"Ou arraste e solte o arquivo aqui\",\n\t\tonChange,\n\t\tdisabled = false,\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\tconst fieldError = fieldErrors?.[name];\n\n\tconst [value, setValue] = useState(\"\");\n\tconst [error, setError] = useState(\"\");\n\tconst [file, setFile] = useState<File | null>(null);\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tasync function handleUploadFile(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 o arquivo\");\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\t\thandleUploadFile(file);\n\t}\n\n\tconst errorMessage = fieldError || error;\n\n\tconst hasErrorClassName = errorMessage ? \"hasError\" : \"noHasError\";\n\tconst hasFileClassName = file ? \"hasFile\" : \"noHasFile\";\n\tconst className = `arkynFileUpload ${hasErrorClassName} ${hasFileClassName}`;\n\n\treturn (\n\t\t<FieldWrapper>\n\t\t\t{label && <FieldLabel showAsterisk={showAsterisk}>{label}</FieldLabel>}\n\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{!file && (\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\tacceptFile={acceptFile}\n\t\t\t\t\t\tdropFileText={dropFileText}\n\t\t\t\t\t\thandleSelectFile={handleSelectFile}\n\t\t\t\t\t\tselectFileButtonText={selectFileButtonText}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{file && (\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\tacceptFile={acceptFile}\n\t\t\t\t\t\tfile={file}\n\t\t\t\t\t\thandleSelectFile={handleSelectFile}\n\t\t\t\t\t\tchangeFileButtonText={changeFileButtonText}\n\t\t\t\t\t\treSendFile={\n\t\t\t\t\t\t\terrorMessage && file ? () => handleUploadFile(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\n\t\t\t{errorMessage && <FieldError>{errorMessage}</FieldError>}\n\t\t</FieldWrapper>\n\t);\n}\n\nexport { FileUpload };\n"],"mappings":";;;;;;;;;;AA8EA,SAAS,EAAW,GAAwB;CAC3C,IAAM,EACL,SACA,UACA,kBAAe,IACf,WACA,cAAW,QACX,YAAS,QACT,gBAAa,KACb,sBAAmB,OACnB,0BAAuB,mBACvB,0BAAuB,sBACvB,kBAAe,qCACf,aACA,cAAW,OACR,GAEE,EAAE,mBAAgB,EAAQ,GAC1B,IAAa,IAAc,IAE3B,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,CAAC,GAAM,KAAW,EAAsB,IAAI,GAC5C,CAAC,GAAW,KAAgB,EAAS,EAAK;CAEhD,eAAe,EAAiB,GAAY;EAC3C,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,0BAA0B;EACpC,CAAC,CAAC,CACD,cAAc,EAAa,EAAK,CAAC;CACpC;CAEA,SAAS,EAAiB,GAAY;EACjC,KACJ,EAAiB,CAAI;CACtB;CAEA,IAAM,IAAe,KAAc;CAMnC,OACC,kBAAC,GAAD,EAAA,UAAA;EACE,KAAS,kBAAC,GAAD;GAA0B;aAAe;EAAkB,CAAA;EAErE,kBAAC,OAAD;GAAgB,WAAA,mBARQ,IAAe,aAAa,aAEC,GAD9B,IAAO,YAAY;aAO1C;IACC,kBAAC,SAAD;KAAO,MAAK;KAAe;KAAM,OAAO,KAAS;IAAK,CAAA;IAErD,CAAC,KACD,kBAAC,GAAD;KACW;KACC;KACC;KACE;KACI;KACI;IACtB,CAAA;IAGD,KACA,kBAAC,GAAD;KACW;KACC;KACC;KACN;KACY;KACI;KACtB,YACC,KAAgB,UAAa,EAAiB,CAAI,IAAI,KAAA;IAEvD,CAAA;GAEE;;EAEJ,KAAgB,kBAAC,GAAD,EAAA,UAAa,EAAyB,CAAA;CAC1C,EAAA,CAAA;AAEhB"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/googleAnalytics/index.tsx"],"sourcesContent":["import type { JSX } from \"react\";\nimport { ClientOnly } from \"../clientOnly\";\nimport { GoogleAnalyticsClient } from \"./googleAnalytics.client\";\n\ntype GoogleAnalyticsProps = {\n\t/** Google Analytics 4 Measurement ID (e.g. `\"G-XXXXXXXXXX\"`). Required. */\n\tmeasurementId: string;\n\t/** When true, renders the GA4 snippet in development mode (bypasses the production check). @default false */\n\tshowInDevMode?: boolean;\n};\n\n/**\n * GoogleAnalytics injects the Google Analytics 4 script into the page client-side.\n *\n * Renders nothing in development mode unless `showInDevMode` is `true`.\n * Wrapped in `ClientOnly` to avoid SSR errors.\n *\n * @param props.measurementId - GA4 Measurement ID (e.g. `\"G-XXXXXXXXXX\"`). Required.\n * @param props.showInDevMode - Renders in development mode. Default: false\n *\n * @returns GoogleAnalytics JSX element, or an empty fragment in dev mode.\n *\n * @example\n * ```tsx\n * // In your root layout\n * <GoogleAnalytics measurementId=\"G-XXXXXXXXXX\" />\n *\n * // Enable in development for testing\n * <GoogleAnalytics measurementId=\"G-XXXXXXXXXX\" showInDevMode />\n * ```\n */\n\nfunction GoogleAnalytics(props: GoogleAnalyticsProps): JSX.Element | null {\n\tconst { measurementId, showInDevMode = false } = props;\n\n\tif (process.env.NODE_ENV !== \"production\" && !showInDevMode) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ClientOnly>\n\t\t\t{() => <GoogleAnalyticsClient measurementId={measurementId} />}\n\t\t</ClientOnly>\n\t);\n}\n\nexport { GoogleAnalytics };\n"],"mappings":";;;;AAgCA,SAAS,EAAgB,GAAiD;CACzE,IAAM,EAAE,kBAAe,mBAAgB,OAAU;CAMjD,OAJA,QAAA,IAAA,aAA6B,gBAAgB,CAAC,IACtC,OAIP,kBAAC,GAAD,EAAA,gBACQ,kBAAC,GAAD,EAAsC,iBAAgB,CAAA,EAClD,CAAA;AAEd"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/googleAnalytics/index.tsx"],"sourcesContent":["import type { JSX } from \"react\";\nimport { ClientOnly } from \"../clientOnly\";\nimport { GoogleAnalyticsClient } from \"./googleAnalytics.client\";\n\ntype GoogleAnalyticsProps = {\n\t/** Google Analytics 4 Measurement ID (e.g. `\"G-XXXXXXXXXX\"`). Required. */\n\tmeasurementId: string;\n\t/** When true, renders the GA4 snippet in development mode (bypasses the production check). @default false */\n\tshowInDevMode?: boolean;\n};\n\n/**\n * GoogleAnalytics, injects the Google Analytics 4 script into the page client-side.\n *\n * Renders nothing in development mode unless `showInDevMode` is `true`.\n * Wrapped in `ClientOnly` to avoid SSR errors.\n *\n * @param props.measurementId - GA4 Measurement ID (e.g. `\"G-XXXXXXXXXX\"`). Required.\n * @param props.showInDevMode - Renders in development mode. Default: false\n *\n * @returns GoogleAnalytics JSX element, or an empty fragment in dev mode.\n *\n * @example\n * ```tsx\n * // In your root layout\n * <GoogleAnalytics measurementId=\"G-XXXXXXXXXX\" />\n *\n * // Enable in development for testing\n * <GoogleAnalytics measurementId=\"G-XXXXXXXXXX\" showInDevMode />\n * ```\n */\n\nfunction GoogleAnalytics(props: GoogleAnalyticsProps): JSX.Element | null {\n\tconst { measurementId, showInDevMode = false } = props;\n\n\tif (process.env.NODE_ENV !== \"production\" && !showInDevMode) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ClientOnly>\n\t\t\t{() => <GoogleAnalyticsClient measurementId={measurementId} />}\n\t\t</ClientOnly>\n\t);\n}\n\nexport { GoogleAnalytics };\n"],"mappings":";;;;AAgCA,SAAS,EAAgB,GAAiD;CACzE,IAAM,EAAE,kBAAe,mBAAgB,OAAU;CAMjD,OAJA,QAAA,IAAA,aAA6B,gBAAgB,CAAC,IACtC,OAIP,kBAAC,GAAD,EAAA,gBACQ,kBAAC,GAAD,EAAsC,iBAAgB,CAAA,EAClD,CAAA;AAEd"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/googleTagManager/index.tsx"],"sourcesContent":["import { ClientOnly } from \"../clientOnly\";\nimport { GoogleTagManagerClient } from \"./googleTagManager.client\";\n\ntype GoogleTagManagerProps = {\n\t/** Google Tag Manager container ID (e.g. `\"GTM-XXXXXXX\"`). Required. */\n\tgtmId: string;\n\t/** Additional key-value pairs pushed to the dataLayer on initialization. */\n\tevents?: Record<string, string>;\n\t/** Initial key-value pairs added to the dataLayer before GTM loads. */\n\tdataLayer?: Record<string, string>;\n\t/** Global variable name for the dataLayer array. @default \"dataLayer\" */\n\tdataLayerName?: string;\n\t/** GTM environment auth token (for staging/testing environments). */\n\tauth?: string;\n\t/** GTM environment preview token (e.g. `\"env-3\"`). */\n\tpreview?: string;\n\t/** When true, renders the GTM snippet in development mode (bypasses the production check). @default false */\n\tshowInDevMode?: boolean;\n};\n\n/**\n * GoogleTagManager injects the GTM `<script>` and `<noscript>` snippets into the page client-side.\n *\n * Renders nothing in development mode unless `showInDevMode` is `true`.\n * Wrapped in `ClientOnly` to avoid SSR errors.\n *\n * @param props.gtmId - GTM container ID (e.g. `\"GTM-XXXXXXX\"`). Required.\n * @param props.dataLayer - Initial key-value pairs for the dataLayer.\n * @param props.dataLayerName - Global dataLayer variable name. Default: \"dataLayer\"\n * @param props.events - Additional key-value pairs pushed on initialization.\n * @param props.auth - GTM environment auth token.\n * @param props.preview - GTM environment preview token (e.g. `\"env-3\"`).\n * @param props.showInDevMode - Renders in development mode. Default: false\n *\n * @returns GoogleTagManager JSX element, or an empty fragment in dev mode.\n *\n * @example\n * ```tsx\n * // Basic setup in your root layout\n * <GoogleTagManager gtmId=\"GTM-XXXXXXX\" />\n *\n * // With initial dataLayer values\n * <GoogleTagManager\n * gtmId=\"GTM-XXXXXXX\"\n * dataLayer={{ pageType: \"home\", userType: \"anonymous\" }}\n * />\n *\n * // Staging/preview environment\n * <GoogleTagManager\n * gtmId=\"GTM-XXXXXXX\"\n * auth=\"your-auth-token\"\n * preview=\"env-3\"\n * showInDevMode\n * />\n * ```\n */\n\nfunction GoogleTagManager(props: GoogleTagManagerProps) {\n\tconst {\n\t\tgtmId,\n\t\tauth = \"\",\n\t\tpreview = \"\",\n\t\tdataLayerName = \"dataLayer\",\n\t\tevents = {},\n\t\tdataLayer = {},\n\t\tshowInDevMode = false,\n\t} = props;\n\n\tif (process.env.NODE_ENV !== \"production\" && !showInDevMode) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ClientOnly>\n\t\t\t{() => (\n\t\t\t\t<GoogleTagManagerClient\n\t\t\t\t\tauth={auth}\n\t\t\t\t\tdataLayer={dataLayer}\n\t\t\t\t\tdataLayerName={dataLayerName}\n\t\t\t\t\tevents={events}\n\t\t\t\t\tgtmId={gtmId}\n\t\t\t\t\tpreview={preview}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</ClientOnly>\n\t);\n}\n\nexport { GoogleTagManager };\n"],"mappings":";;;;AAyDA,SAAS,EAAiB,GAA8B;CACvD,IAAM,EACL,UACA,UAAO,IACP,aAAU,IACV,mBAAgB,aAChB,YAAS,CAAC,GACV,eAAY,CAAC,GACb,mBAAgB,OACb;CAMJ,OAJA,QAAA,IAAA,aAA6B,gBAAgB,CAAC,IACtC,OAIP,kBAAC,GAAD,EAAA,gBAEE,kBAAC,GAAD;EACO;EACK;EACI;EACP;EACD;EACE;CACT,CAAA,EAES,CAAA;AAEd"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/googleTagManager/index.tsx"],"sourcesContent":["import { ClientOnly } from \"../clientOnly\";\nimport { GoogleTagManagerClient } from \"./googleTagManager.client\";\n\ntype GoogleTagManagerProps = {\n\t/** Google Tag Manager container ID (e.g. `\"GTM-XXXXXXX\"`). Required. */\n\tgtmId: string;\n\t/** Additional key-value pairs pushed to the dataLayer on initialization. */\n\tevents?: Record<string, string>;\n\t/** Initial key-value pairs added to the dataLayer before GTM loads. */\n\tdataLayer?: Record<string, string>;\n\t/** Global variable name for the dataLayer array. @default \"dataLayer\" */\n\tdataLayerName?: string;\n\t/** GTM environment auth token (for staging/testing environments). */\n\tauth?: string;\n\t/** GTM environment preview token (e.g. `\"env-3\"`). */\n\tpreview?: string;\n\t/** When true, renders the GTM snippet in development mode (bypasses the production check). @default false */\n\tshowInDevMode?: boolean;\n};\n\n/**\n * GoogleTagManager, injects the GTM `<script>` and `<noscript>` snippets into the page client-side.\n *\n * Renders nothing in development mode unless `showInDevMode` is `true`.\n * Wrapped in `ClientOnly` to avoid SSR errors.\n *\n * @param props.gtmId - GTM container ID (e.g. `\"GTM-XXXXXXX\"`). Required.\n * @param props.dataLayer - Initial key-value pairs for the dataLayer.\n * @param props.dataLayerName - Global dataLayer variable name. Default: \"dataLayer\"\n * @param props.events - Additional key-value pairs pushed on initialization.\n * @param props.auth - GTM environment auth token.\n * @param props.preview - GTM environment preview token (e.g. `\"env-3\"`).\n * @param props.showInDevMode - Renders in development mode. Default: false\n *\n * @returns GoogleTagManager JSX element, or an empty fragment in dev mode.\n *\n * @example\n * ```tsx\n * // Basic setup in your root layout\n * <GoogleTagManager gtmId=\"GTM-XXXXXXX\" />\n *\n * // With initial dataLayer values\n * <GoogleTagManager\n * gtmId=\"GTM-XXXXXXX\"\n * dataLayer={{ pageType: \"home\", userType: \"anonymous\" }}\n * />\n *\n * // Staging/preview environment\n * <GoogleTagManager\n * gtmId=\"GTM-XXXXXXX\"\n * auth=\"your-auth-token\"\n * preview=\"env-3\"\n * showInDevMode\n * />\n * ```\n */\n\nfunction GoogleTagManager(props: GoogleTagManagerProps) {\n\tconst {\n\t\tgtmId,\n\t\tauth = \"\",\n\t\tpreview = \"\",\n\t\tdataLayerName = \"dataLayer\",\n\t\tevents = {},\n\t\tdataLayer = {},\n\t\tshowInDevMode = false,\n\t} = props;\n\n\tif (process.env.NODE_ENV !== \"production\" && !showInDevMode) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ClientOnly>\n\t\t\t{() => (\n\t\t\t\t<GoogleTagManagerClient\n\t\t\t\t\tauth={auth}\n\t\t\t\t\tdataLayer={dataLayer}\n\t\t\t\t\tdataLayerName={dataLayerName}\n\t\t\t\t\tevents={events}\n\t\t\t\t\tgtmId={gtmId}\n\t\t\t\t\tpreview={preview}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</ClientOnly>\n\t);\n}\n\nexport { GoogleTagManager };\n"],"mappings":";;;;AAyDA,SAAS,EAAiB,GAA8B;CACvD,IAAM,EACL,UACA,UAAO,IACP,aAAU,IACV,mBAAgB,aAChB,YAAS,CAAC,GACV,eAAY,CAAC,GACb,mBAAgB,OACb;CAMJ,OAJA,QAAA,IAAA,aAA6B,gBAAgB,CAAC,IACtC,OAIP,kBAAC,GAAD,EAAA,gBAEE,kBAAC,GAAD;EACO;EACK;EACI;EACP;EACD;EACE;CACT,CAAA,EAES,CAAA;AAEd"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/iconButton/index.tsx"],"sourcesContent":["import { Loader2, type LucideIcon } from \"lucide-react\";\nimport type { ButtonHTMLAttributes } from \"react\";\n\nimport \"./styles.css\";\n\ntype IconButtonProps = Omit<\n\tButtonHTMLAttributes<HTMLButtonElement>,\n\t\"children\" | \"aria-label\"\n> & {\n\t/** Lucide icon component rendered inside the button. Required. */\n\ticon: LucideIcon;\n\t/** Accessible label for screen readers. Required. */\n\t\"aria-label\": string;\n\t/** Shows a spinner and disables the button during async operations. @default false */\n\tisLoading?: boolean;\n\t/**\n\t * Button size.\n\t * @default \"md\"\n\t */\n\tsize?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n\t/**\n\t * Visual style variant.\n\t * - `solid`: filled background.\n\t * - `outline`: bordered, transparent background.\n\t * - `ghost`: no border, subtle hover.\n\t * - `invisible`: no visual styling.\n\t * @default \"solid\"\n\t */\n\tvariant?: \"solid\" | \"outline\" | \"ghost\" | \"invisible\";\n\t/**\n\t * Color scheme applied to the button.\n\t * @default \"primary\"\n\t */\n\tscheme?: \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n};\n\n/**\n * IconButton compact button that renders a single icon without a text label.\n *\n * Always requires `aria-label` for accessibility.\n *\n * @param props.icon - Lucide icon component to render. Required.\n * @param props[\"aria-label\"] - Accessible label for screen readers. Required.\n * @param props.isLoading - Shows a spinner and disables the button. Default: false\n * @param props.size - Button size (`xs` | `sm` | `md` | `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.scheme - Color scheme. Default: \"primary\"\n *\n * **...Other valid HTML properties for `<button>` (children not supported)**\n *\n * @returns IconButton JSX element.\n *\n * @example\n * ```tsx\n * <IconButton icon={Plus} aria-label=\"Add item\" />\n *\n * <IconButton icon={Trash2} aria-label=\"Delete\" scheme=\"danger\" variant=\"outline\" />\n *\n * <IconButton icon={Save} aria-label=\"Saving\" isLoading />\n *\n * <IconButton icon={MoreVertical} aria-label=\"More options\" size=\"sm\" />\n * ```\n */\n\nfunction IconButton(props: IconButtonProps) {\n\tconst {\n\t\tisLoading = false,\n\t\tscheme = \"primary\",\n\t\tvariant = \"solid\",\n\t\tsize = \"md\",\n\t\ticon: Icon,\n\t\tdisabled,\n\t\tclassName: baseClassName = \"\",\n\t\t...rest\n\t} = props;\n\n\tconst iconSize = { xs: 12, sm: 16, md: 20, lg: 24 };\n\tconst loading = isLoading ? \"loadingTrue\" : \"loadingFalse\";\n\tconst className = `arkynIconButton ${variant} ${scheme} ${size} ${loading} ${baseClassName}`;\n\n\treturn (\n\t\t<button\n\t\t\tdisabled={disabled || isLoading}\n\t\t\tclassName={className.trim()}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<div className=\"arkynIconButtonSpinner\">\n\t\t\t\t<Loader2 size={iconSize[size]} strokeWidth={2.5} />\n\t\t\t</div>\n\n\t\t\t<div className=\"arkynIconButtonContent\">\n\t\t\t\t<Icon size={iconSize[size]} strokeWidth={2.5} />\n\t\t\t</div>\n\t\t</button>\n\t);\n}\n\nexport { IconButton };\n"],"mappings":";;;;AAgEA,SAAS,EAAW,GAAwB;CAC3C,IAAM,EACL,eAAY,IACZ,YAAS,WACT,aAAU,SACV,UAAO,MACP,MAAM,GACN,aACA,WAAW,IAAgB,IAC3B,GAAG,MACA,GAEE,IAAW;EAAE,IAAI;EAAI,IAAI;EAAI,IAAI;EAAI,IAAI;CAAG,GAE5C,IAAY,mBAAmB,EAAQ,GAAG,EAAO,GAAG,EAAK,GAD/C,IAAY,gBAAgB,eAC8B,GAAG;CAE7E,OACC,kBAAC,UAAD;EACC,UAAU,KAAY;EACtB,WAAW,EAAU,KAAK;EAC1B,GAAI;YAHL,CAKC,kBAAC,OAAD;GAAK,WAAU;aACd,kBAAC,GAAD;IAAS,MAAM,EAAS;IAAO,aAAa;GAAM,CAAA;EAC9C,CAAA,GAEL,kBAAC,OAAD;GAAK,WAAU;aACd,kBAAC,GAAD;IAAM,MAAM,EAAS;IAAO,aAAa;GAAM,CAAA;EAC3C,CAAA,CACE;;AAEV"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/iconButton/index.tsx"],"sourcesContent":["import { Loader2, type LucideIcon } from \"lucide-react\";\nimport type { ButtonHTMLAttributes } from \"react\";\n\nimport \"./styles.css\";\n\ntype IconButtonProps = Omit<\n\tButtonHTMLAttributes<HTMLButtonElement>,\n\t\"children\" | \"aria-label\"\n> & {\n\t/** Lucide icon component rendered inside the button. Required. */\n\ticon: LucideIcon;\n\t/** Accessible label for screen readers. Required. */\n\t\"aria-label\": string;\n\t/** Shows a spinner and disables the button during async operations. @default false */\n\tisLoading?: boolean;\n\t/**\n\t * Button size.\n\t * @default \"md\"\n\t */\n\tsize?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n\t/**\n\t * Visual style variant.\n\t * - `solid`: filled background.\n\t * - `outline`: bordered, transparent background.\n\t * - `ghost`: no border, subtle hover.\n\t * - `invisible`: no visual styling.\n\t * @default \"solid\"\n\t */\n\tvariant?: \"solid\" | \"outline\" | \"ghost\" | \"invisible\";\n\t/**\n\t * Color scheme applied to the button.\n\t * @default \"primary\"\n\t */\n\tscheme?: \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n};\n\n/**\n * IconButton, compact button that renders a single icon without a text label.\n *\n * Always requires `aria-label` for accessibility.\n *\n * @param props.icon - Lucide icon component to render. Required.\n * @param props[\"aria-label\"] - Accessible label for screen readers. Required.\n * @param props.isLoading - Shows a spinner and disables the button. Default: false\n * @param props.size - Button size (`xs` | `sm` | `md` | `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.scheme - Color scheme. Default: \"primary\"\n *\n * **...Other valid HTML properties for `<button>` (children not supported)**\n *\n * @returns IconButton JSX element.\n *\n * @example\n * ```tsx\n * <IconButton icon={Plus} aria-label=\"Add item\" />\n *\n * <IconButton icon={Trash2} aria-label=\"Delete\" scheme=\"danger\" variant=\"outline\" />\n *\n * <IconButton icon={Save} aria-label=\"Saving\" isLoading />\n *\n * <IconButton icon={MoreVertical} aria-label=\"More options\" size=\"sm\" />\n * ```\n */\n\nfunction IconButton(props: IconButtonProps) {\n\tconst {\n\t\tisLoading = false,\n\t\tscheme = \"primary\",\n\t\tvariant = \"solid\",\n\t\tsize = \"md\",\n\t\ticon: Icon,\n\t\tdisabled,\n\t\tclassName: baseClassName = \"\",\n\t\t...rest\n\t} = props;\n\n\tconst iconSize = { xs: 12, sm: 16, md: 20, lg: 24 };\n\tconst loading = isLoading ? \"loadingTrue\" : \"loadingFalse\";\n\tconst className = `arkynIconButton ${variant} ${scheme} ${size} ${loading} ${baseClassName}`;\n\n\treturn (\n\t\t<button\n\t\t\tdisabled={disabled || isLoading}\n\t\t\tclassName={className.trim()}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<div className=\"arkynIconButtonSpinner\">\n\t\t\t\t<Loader2 size={iconSize[size]} strokeWidth={2.5} />\n\t\t\t</div>\n\n\t\t\t<div className=\"arkynIconButtonContent\">\n\t\t\t\t<Icon size={iconSize[size]} strokeWidth={2.5} />\n\t\t\t</div>\n\t\t</button>\n\t);\n}\n\nexport { IconButton };\n"],"mappings":";;;;AAgEA,SAAS,EAAW,GAAwB;CAC3C,IAAM,EACL,eAAY,IACZ,YAAS,WACT,aAAU,SACV,UAAO,MACP,MAAM,GACN,aACA,WAAW,IAAgB,IAC3B,GAAG,MACA,GAEE,IAAW;EAAE,IAAI;EAAI,IAAI;EAAI,IAAI;EAAI,IAAI;CAAG,GAE5C,IAAY,mBAAmB,EAAQ,GAAG,EAAO,GAAG,EAAK,GAD/C,IAAY,gBAAgB,eAC8B,GAAG;CAE7E,OACC,kBAAC,UAAD;EACC,UAAU,KAAY;EACtB,WAAW,EAAU,KAAK;EAC1B,GAAI;YAHL,CAKC,kBAAC,OAAD;GAAK,WAAU;aACd,kBAAC,GAAD;IAAS,MAAM,EAAS;IAAO,aAAa;GAAM,CAAA;EAC9C,CAAA,GAEL,kBAAC,OAAD;GAAK,WAAU;aACd,kBAAC,GAAD;IAAM,MAAM,EAAS;IAAO,aAAa;GAAM,CAAA;EAC3C,CAAA,CACE;;AAEV"}
@@ -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"}
@@ -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"}
@@ -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"}
@@ -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"}
@@ -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"}
@@ -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"}
@@ -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"}
@@ -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":";;;;;;;;;;;;;;AAgJA,SAAS,EAAY,GAAyB;CAC7C,IAAM,EACL,SACA,YACA,WAAW,IAAmB,IAC9B,iBAAc,gBACd,mBAAgB,IAChB,kBAAe,CAAC,GAChB,cAAc,IACd,eAAY,IACZ,cAAW,IACX,mBAAe,IACf,QACA,WACA,kBACA,UAAU,GACV,aACA,aACA,WACA,kBAAe,0BACf,YACA,UAAU,IAAe,IACzB,WACA,UAAO,MACP,UACA,aAAU,SACV,yBAAsB,IACtB,iBAAc,eACX,GAEE,EAAE,mBAAgB,EAAQ,GAE1B,IAAiB,EAAyB,IAAI,GAC9C,IAAc,EAAM,GACpB,KAAgB,MAAM,GAEtB,IAAe,MAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GACZ,IAAW,KAAgB,KAAa,GAGxC,IAAW;EADG,IAAI;EAAI,IAAI;CACf,EAAU,IAErB,CAAC,GAAQ,KAAa,EAAS,EAAE,GACjC,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,CAAC,GAAiB,KAAsB,EAAS,CAAY,GAE7D,IAAuB,KAAS;CAEtC,SAAS,EAAkB,GAAe;EACzC,OAAO,EAAqB,SAAS,CAAK;CAC3C;CAEA,SAAS,GAAe,GAAe;EAEtC,OADe,EAAQ,MAAM,MAAW,EAAO,UAAU,CAClD,CAAA,EAAQ,SAAS;CACzB;CAEA,SAAS,KAAuB;EAC3B,KAAY,CAAC,GAAgB,WAAW,MAC5C,EAAa,EAAI,GACjB,EAAe,QAAQ,MAAM,GAC7B,IAAU;CACX;CAEA,SAAS,IAAa;EAErB,AADA,EAAa,EAAK,GACd,KAAU,EAAe,WAAS,EAAe,QAAQ,KAAK;CACnE;CAEA,SAAS,GAAa,GAAe;EAEpC,AADA,EAAU,CAAK,GACX,KAAU,EAAS,CAAK;CAC7B;CAEA,SAAS,EAAkB,GAAe;EASzC,AARI,EAAkB,CAAK,KAC1B,EAAmB,EAAgB,QAAQ,MAAM,MAAM,CAAK,CAAC,GACzD,KAAU,EAAS,EAAgB,QAAQ,MAAM,MAAM,CAAK,CAAC,MAEjE,EAAmB,CAAC,GAAG,GAAiB,CAAK,CAAC,GAC1C,KAAU,EAAS,CAAC,GAAG,GAAiB,CAAK,CAAC,IAG/C,KAAe,EAAW;CAC/B;CAEA,IAAM,IAAgB,EAAQ,QAAQ,MAGrC,GAFI,EAAM,YACN,CAAC,EAAM,gBACP,EAAO,MAAM,YAAY,CAAC,CAAC,SAAS,EAAO,YAAY,CAAC,EAE5D;CAED,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,GAAD;GACuB;GACZ;GACD;GACE;GACA;GACD;GACJ;GACG;GACT,cAAc,CAAC,CAAC;GAChB,IAAI;aAVL;IAYC,kBAAC,SAAD;KACC,KAAK;KACC;KACN,OAAO,KAAK,UAAU,CAAoB;KAC1C,MAAK;IACL,CAAA;IAED,kBAAC,GAAD;KAAwB;KAAU,MAAM;KAAQ,WAAU;IAAU,CAAA;IAEnE,KAAY,kBAAC,GAAD;KAAU,MAAM;KAAU,aAAa;IAAM,CAAA;IAE1D,kBAAC,GAAD;KAA0B;eAA1B,CACE,EAAqB,KAAK,MAC1B,kBAAC,GAAD;MAEC,OAAO,GAAe,CAAK;MACpB;MACY;MACT;KACV,GALK,CAKL,CACD,GAEA,EAAqB,UAAU,KAAK,kBAAC,KAAD,EAAA,UAAI,EAAe,CAAA,CACrC;;IAEpB,kBAAC,IAAD;KACY;KACG;KACN;KACR,UAAU;eAJX,CAME,EAAc,KAAK,EAAE,UAAO,eAC5B,kBAAC,GAAD;MAEQ;MACA;MACD;MACa;MACA;KACnB,GANK,CAML,CACD,GAEA,EAAc,UAAU,KAAK,kBAAC,KAAD,EAAA,UAAI,EAAgB,CAAA,CACtB;;IAE7B,kBAAC,GAAD;KACW;KACC;KACD;KACA;KACC;IACX,CAAA;IAED,kBAAC,GAAD;KAA8B;KAAqB;IAAY,CAAA;IAC/D,kBAAC,IAAD;KAAgC;KAAuB;IAAY,CAAA;GAC9C;;CACR,CAAA;AAEjB"}
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":";;;;;;;;;;;;;;AAgJA,SAAS,EAAY,GAAyB;CAC7C,IAAM,EACL,SACA,YACA,WAAW,IAAmB,IAC9B,iBAAc,gBACd,mBAAgB,IAChB,kBAAe,CAAC,GAChB,cAAc,IACd,eAAY,IACZ,cAAW,IACX,mBAAe,IACf,QACA,WACA,kBACA,UAAU,GACV,aACA,aACA,WACA,kBAAe,0BACf,YACA,UAAU,IAAe,IACzB,WACA,UAAO,MACP,UACA,aAAU,SACV,yBAAsB,IACtB,iBAAc,eACX,GAEE,EAAE,mBAAgB,EAAQ,GAE1B,IAAiB,EAAyB,IAAI,GAC9C,IAAc,EAAM,GACpB,KAAgB,MAAM,GAEtB,IAAe,MAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GACZ,IAAW,KAAgB,KAAa,GAGxC,IAAW;EADG,IAAI;EAAI,IAAI;CACf,EAAU,IAErB,CAAC,GAAQ,KAAa,EAAS,EAAE,GACjC,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,CAAC,GAAiB,KAAsB,EAAS,CAAY,GAE7D,IAAuB,KAAS;CAEtC,SAAS,EAAkB,GAAe;EACzC,OAAO,EAAqB,SAAS,CAAK;CAC3C;CAEA,SAAS,GAAe,GAAe;EAEtC,OADe,EAAQ,MAAM,MAAW,EAAO,UAAU,CAClD,CAAA,EAAQ,SAAS;CACzB;CAEA,SAAS,KAAuB;EAC3B,KAAY,CAAC,GAAgB,WAAW,MAC5C,EAAa,EAAI,GACjB,EAAe,QAAQ,MAAM,GAC7B,IAAU;CACX;CAEA,SAAS,IAAa;EAErB,AADA,EAAa,EAAK,GACd,KAAU,EAAe,WAAS,EAAe,QAAQ,KAAK;CACnE;CAEA,SAAS,GAAa,GAAe;EAEpC,AADA,EAAU,CAAK,GACX,KAAU,EAAS,CAAK;CAC7B;CAEA,SAAS,EAAkB,GAAe;EASzC,AARI,EAAkB,CAAK,KAC1B,EAAmB,EAAgB,QAAQ,MAAM,MAAM,CAAK,CAAC,GACzD,KAAU,EAAS,EAAgB,QAAQ,MAAM,MAAM,CAAK,CAAC,MAEjE,EAAmB,CAAC,GAAG,GAAiB,CAAK,CAAC,GAC1C,KAAU,EAAS,CAAC,GAAG,GAAiB,CAAK,CAAC,IAG/C,KAAe,EAAW;CAC/B;CAEA,IAAM,IAAgB,EAAQ,QAAQ,MAGrC,GAFI,EAAM,YACN,CAAC,EAAM,gBACP,EAAO,MAAM,YAAY,CAAC,CAAC,SAAS,EAAO,YAAY,CAAC,EAE5D;CAED,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,GAAD;GACuB;GACZ;GACD;GACE;GACA;GACD;GACJ;GACG;GACT,cAAc,CAAC,CAAC;GAChB,IAAI;aAVL;IAYC,kBAAC,SAAD;KACC,KAAK;KACC;KACN,OAAO,KAAK,UAAU,CAAoB;KAC1C,MAAK;IACL,CAAA;IAED,kBAAC,GAAD;KAAwB;KAAU,MAAM;KAAQ,WAAU;IAAU,CAAA;IAEnE,KAAY,kBAAC,GAAD;KAAU,MAAM;KAAU,aAAa;IAAM,CAAA;IAE1D,kBAAC,GAAD;KAA0B;eAA1B,CACE,EAAqB,KAAK,MAC1B,kBAAC,GAAD;MAEC,OAAO,GAAe,CAAK;MACpB;MACY;MACT;KACV,GALK,CAKL,CACD,GAEA,EAAqB,UAAU,KAAK,kBAAC,KAAD,EAAA,UAAI,EAAe,CAAA,CACrC;;IAEpB,kBAAC,IAAD;KACY;KACG;KACN;KACR,UAAU;eAJX,CAME,EAAc,KAAK,EAAE,UAAO,eAC5B,kBAAC,GAAD;MAEQ;MACA;MACD;MACa;MACA;KACnB,GANK,CAML,CACD,GAEA,EAAc,UAAU,KAAK,kBAAC,KAAD,EAAA,UAAI,EAAgB,CAAA,CACtB;;IAE7B,kBAAC,GAAD;KACW;KACC;KACD;KACA;KACC;IACX,CAAA;IAED,kBAAC,GAAD;KAA8B;KAAqB;IAAY,CAAA;IAC/D,kBAAC,IAAD;KAAgC;KAAuB;IAAY,CAAA;GAC9C;;CACR,CAAA;AAEjB"}
@@ -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"}