@arkyn/components 3.0.1-beta.143 → 3.0.1-beta.145

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 (207) hide show
  1. package/dist/bundle.js +1 -1
  2. package/dist/components/alert/alertContainer/index.d.ts +27 -43
  3. package/dist/components/alert/alertContainer/index.d.ts.map +1 -1
  4. package/dist/components/alert/alertContainer/index.js +20 -40
  5. package/dist/components/alert/alertContent/index.d.ts +11 -36
  6. package/dist/components/alert/alertContent/index.d.ts.map +1 -1
  7. package/dist/components/alert/alertContent/index.js +11 -31
  8. package/dist/components/alert/alertDescription/index.d.ts +10 -38
  9. package/dist/components/alert/alertDescription/index.d.ts.map +1 -1
  10. package/dist/components/alert/alertDescription/index.js +10 -33
  11. package/dist/components/alert/alertIcon/index.d.ts +14 -38
  12. package/dist/components/alert/alertIcon/index.d.ts.map +1 -1
  13. package/dist/components/alert/alertIcon/index.js +14 -32
  14. package/dist/components/alert/alertTitle/index.d.ts +12 -35
  15. package/dist/components/alert/alertTitle/index.d.ts.map +1 -1
  16. package/dist/components/alert/alertTitle/index.js +12 -27
  17. package/dist/components/audioPlayer/index.d.ts +24 -32
  18. package/dist/components/audioPlayer/index.d.ts.map +1 -1
  19. package/dist/components/audioPlayer/index.js +15 -18
  20. package/dist/components/audioUpload/index.d.ts +37 -48
  21. package/dist/components/audioUpload/index.d.ts.map +1 -1
  22. package/dist/components/audioUpload/index.js +23 -48
  23. package/dist/components/badge/index.d.ts +31 -22
  24. package/dist/components/badge/index.d.ts.map +1 -1
  25. package/dist/components/badge/index.js +14 -22
  26. package/dist/components/button/index.d.ts +38 -28
  27. package/dist/components/button/index.d.ts.map +1 -1
  28. package/dist/components/button/index.js +18 -28
  29. package/dist/components/cardTab/cardTabButton/index.d.ts +14 -52
  30. package/dist/components/cardTab/cardTabButton/index.d.ts.map +1 -1
  31. package/dist/components/cardTab/cardTabButton/index.js +12 -52
  32. package/dist/components/cardTab/cardTabContainer/index.d.ts +16 -58
  33. package/dist/components/cardTab/cardTabContainer/index.d.ts.map +1 -1
  34. package/dist/components/cardTab/cardTabContainer/index.js +12 -58
  35. package/dist/components/checkbox/index.d.ts +38 -37
  36. package/dist/components/checkbox/index.d.ts.map +1 -1
  37. package/dist/components/checkbox/index.js +21 -37
  38. package/dist/components/clientOnly.d.ts +13 -66
  39. package/dist/components/clientOnly.d.ts.map +1 -1
  40. package/dist/components/clientOnly.js +11 -66
  41. package/dist/components/currencyInput/index.d.ts +67 -50
  42. package/dist/components/currencyInput/index.d.ts.map +1 -1
  43. package/dist/components/currencyInput/index.js +28 -50
  44. package/dist/components/divider/index.d.ts +12 -25
  45. package/dist/components/divider/index.d.ts.map +1 -1
  46. package/dist/components/divider/index.js +8 -25
  47. package/dist/components/drawer/drawerContainer/index.d.ts +16 -50
  48. package/dist/components/drawer/drawerContainer/index.d.ts.map +1 -1
  49. package/dist/components/drawer/drawerContainer/index.js +13 -50
  50. package/dist/components/drawer/drawerHeader/index.d.ts +9 -33
  51. package/dist/components/drawer/drawerHeader/index.d.ts.map +1 -1
  52. package/dist/components/drawer/drawerHeader/index.js +8 -33
  53. package/dist/components/facebookPixel/index.d.ts +47 -0
  54. package/dist/components/facebookPixel/index.d.ts.map +1 -1
  55. package/dist/components/facebookPixel/index.js +35 -0
  56. package/dist/components/fieldError/index.d.ts +4 -11
  57. package/dist/components/fieldError/index.d.ts.map +1 -1
  58. package/dist/components/fieldError/index.js +4 -11
  59. package/dist/components/fieldLabel/index.d.ts +6 -21
  60. package/dist/components/fieldLabel/index.d.ts.map +1 -1
  61. package/dist/components/fieldLabel/index.js +5 -21
  62. package/dist/components/fieldWrapper/index.d.ts +12 -22
  63. package/dist/components/fieldWrapper/index.d.ts.map +1 -1
  64. package/dist/components/fieldWrapper/index.js +7 -22
  65. package/dist/components/fileUpload/index.d.ts +36 -61
  66. package/dist/components/fileUpload/index.d.ts.map +1 -1
  67. package/dist/components/fileUpload/index.js +23 -61
  68. package/dist/components/googleAnalytics/index.d.ts +11 -7
  69. package/dist/components/googleAnalytics/index.d.ts.map +1 -1
  70. package/dist/components/googleAnalytics/index.js +9 -7
  71. package/dist/components/googleTagManager/index.d.ts +27 -21
  72. package/dist/components/googleTagManager/index.d.ts.map +1 -1
  73. package/dist/components/googleTagManager/index.js +20 -21
  74. package/dist/components/iconButton/index.d.ts +31 -15
  75. package/dist/components/iconButton/index.d.ts.map +1 -1
  76. package/dist/components/iconButton/index.js +12 -15
  77. package/dist/components/imageUpload/index.d.ts +47 -75
  78. package/dist/components/imageUpload/index.d.ts.map +1 -1
  79. package/dist/components/imageUpload/index.js +27 -75
  80. package/dist/components/input/index.d.ts +51 -44
  81. package/dist/components/input/index.d.ts.map +1 -1
  82. package/dist/components/input/index.js +24 -44
  83. package/dist/components/mapView/index.d.ts +44 -0
  84. package/dist/components/mapView/index.d.ts.map +1 -1
  85. package/dist/components/mapView/index.js +35 -0
  86. package/dist/components/maskedInput/index.d.ts +66 -51
  87. package/dist/components/maskedInput/index.d.ts.map +1 -1
  88. package/dist/components/maskedInput/index.js +28 -51
  89. package/dist/components/modal/modalContainer/index.d.ts +17 -57
  90. package/dist/components/modal/modalContainer/index.d.ts.map +1 -1
  91. package/dist/components/modal/modalContainer/index.js +15 -57
  92. package/dist/components/modal/modalFooter/index.d.ts +17 -50
  93. package/dist/components/modal/modalFooter/index.d.ts.map +1 -1
  94. package/dist/components/modal/modalFooter/index.js +10 -50
  95. package/dist/components/modal/modalHeader/index.d.ts +13 -47
  96. package/dist/components/modal/modalHeader/index.d.ts.map +1 -1
  97. package/dist/components/modal/modalHeader/index.js +12 -47
  98. package/dist/components/multiSelect/index.d.ts +67 -62
  99. package/dist/components/multiSelect/index.d.ts.map +1 -1
  100. package/dist/components/multiSelect/index.js +28 -62
  101. package/dist/components/pagination/index.d.ts +18 -9
  102. package/dist/components/pagination/index.d.ts.map +1 -1
  103. package/dist/components/pagination/index.js +18 -9
  104. package/dist/components/phoneInput/index.d.ts +65 -30
  105. package/dist/components/phoneInput/index.d.ts.map +1 -1
  106. package/dist/components/phoneInput/index.js +36 -31
  107. package/dist/components/popover/index.d.ts +34 -114
  108. package/dist/components/popover/index.d.ts.map +1 -1
  109. package/dist/components/popover/index.js +25 -114
  110. package/dist/components/radio/radioBox/index.d.ts +17 -65
  111. package/dist/components/radio/radioBox/index.d.ts.map +1 -1
  112. package/dist/components/radio/radioBox/index.js +14 -65
  113. package/dist/components/radio/radioGroup/index.d.ts +36 -67
  114. package/dist/components/radio/radioGroup/index.d.ts.map +1 -1
  115. package/dist/components/radio/radioGroup/index.js +25 -67
  116. package/dist/components/richText/index.d.ts +33 -47
  117. package/dist/components/richText/index.d.ts.map +1 -1
  118. package/dist/components/richText/index.js +30 -44
  119. package/dist/components/searchPlaces.d.ts +52 -50
  120. package/dist/components/searchPlaces.d.ts.map +1 -1
  121. package/dist/components/searchPlaces.js +23 -30
  122. package/dist/components/select/index.d.ts +68 -63
  123. package/dist/components/select/index.d.ts.map +1 -1
  124. package/dist/components/select/index.js +29 -63
  125. package/dist/components/slider/index.d.ts +20 -34
  126. package/dist/components/slider/index.d.ts.map +1 -1
  127. package/dist/components/slider/index.js +15 -33
  128. package/dist/components/switch/index.d.ts +42 -58
  129. package/dist/components/switch/index.d.ts.map +1 -1
  130. package/dist/components/switch/index.js +24 -58
  131. package/dist/components/tab/tabButton/index.d.ts +14 -52
  132. package/dist/components/tab/tabButton/index.d.ts.map +1 -1
  133. package/dist/components/tab/tabButton/index.js +12 -52
  134. package/dist/components/tab/tabContainer/index.d.ts +16 -58
  135. package/dist/components/tab/tabContainer/index.d.ts.map +1 -1
  136. package/dist/components/tab/tabContainer/index.js +12 -58
  137. package/dist/components/table/tableBody/index.d.ts +13 -47
  138. package/dist/components/table/tableBody/index.d.ts.map +1 -1
  139. package/dist/components/table/tableBody/index.js +12 -47
  140. package/dist/components/table/tableCaption/index.d.ts +6 -46
  141. package/dist/components/table/tableCaption/index.d.ts.map +1 -1
  142. package/dist/components/table/tableCaption/index.js +6 -46
  143. package/dist/components/table/tableContainer/index.d.ts +12 -41
  144. package/dist/components/table/tableContainer/index.d.ts.map +1 -1
  145. package/dist/components/table/tableContainer/index.js +12 -41
  146. package/dist/components/table/tableFooter/index.d.ts +5 -29
  147. package/dist/components/table/tableFooter/index.d.ts.map +1 -1
  148. package/dist/components/table/tableFooter/index.js +5 -29
  149. package/dist/components/table/tableHeader/index.d.ts +4 -25
  150. package/dist/components/table/tableHeader/index.d.ts.map +1 -1
  151. package/dist/components/table/tableHeader/index.js +4 -25
  152. package/dist/components/textarea/index.d.ts +32 -64
  153. package/dist/components/textarea/index.d.ts.map +1 -1
  154. package/dist/components/textarea/index.js +16 -64
  155. package/dist/components/tooltip/index.d.ts +27 -55
  156. package/dist/components/tooltip/index.d.ts.map +1 -1
  157. package/dist/components/tooltip/index.js +16 -55
  158. package/dist/hooks/useAutomation.d.ts +18 -26
  159. package/dist/hooks/useAutomation.d.ts.map +1 -1
  160. package/dist/hooks/useAutomation.js +18 -26
  161. package/dist/hooks/useDrawer.d.ts +19 -64
  162. package/dist/hooks/useDrawer.d.ts.map +1 -1
  163. package/dist/hooks/useForm.d.ts +12 -29
  164. package/dist/hooks/useForm.d.ts.map +1 -1
  165. package/dist/hooks/useForm.js +12 -29
  166. package/dist/hooks/useHydrated.d.ts +8 -63
  167. package/dist/hooks/useHydrated.d.ts.map +1 -1
  168. package/dist/hooks/useHydrated.js +8 -63
  169. package/dist/hooks/useModal.d.ts +19 -59
  170. package/dist/hooks/useModal.d.ts.map +1 -1
  171. package/dist/hooks/useScopedParams.d.ts +17 -69
  172. package/dist/hooks/useScopedParams.d.ts.map +1 -1
  173. package/dist/hooks/useScopedParams.js +17 -69
  174. package/dist/hooks/useScrollLock.d.ts +11 -27
  175. package/dist/hooks/useScrollLock.d.ts.map +1 -1
  176. package/dist/hooks/useScrollLock.js +11 -33
  177. package/dist/hooks/useSearchAutomation.d.ts +16 -34
  178. package/dist/hooks/useSearchAutomation.d.ts.map +1 -1
  179. package/dist/hooks/useSearchAutomation.js +16 -34
  180. package/dist/hooks/useSlider.d.ts +5 -19
  181. package/dist/hooks/useSlider.d.ts.map +1 -1
  182. package/dist/hooks/useSlider.js +5 -19
  183. package/dist/hooks/useToast.d.ts +8 -52
  184. package/dist/hooks/useToast.d.ts.map +1 -1
  185. package/dist/hooks/useToast.js +8 -52
  186. package/dist/providers/drawerProvider.d.ts +15 -81
  187. package/dist/providers/drawerProvider.d.ts.map +1 -1
  188. package/dist/providers/drawerProvider.js +15 -81
  189. package/dist/providers/formProvider.d.ts +17 -53
  190. package/dist/providers/formProvider.d.ts.map +1 -1
  191. package/dist/providers/formProvider.js +17 -53
  192. package/dist/providers/modalProvider.d.ts +16 -77
  193. package/dist/providers/modalProvider.d.ts.map +1 -1
  194. package/dist/providers/modalProvider.js +16 -77
  195. package/dist/providers/placesProvider.d.ts +16 -11
  196. package/dist/providers/placesProvider.d.ts.map +1 -1
  197. package/dist/providers/placesProvider.js +16 -11
  198. package/dist/providers/toastProvider.d.ts +10 -21
  199. package/dist/providers/toastProvider.d.ts.map +1 -1
  200. package/dist/providers/toastProvider.js +10 -21
  201. package/dist/services/toHtml.d.ts +11 -10
  202. package/dist/services/toHtml.d.ts.map +1 -1
  203. package/dist/services/toHtml.js +11 -10
  204. package/dist/services/toRichTextValue.d.ts +11 -17
  205. package/dist/services/toRichTextValue.d.ts.map +1 -1
  206. package/dist/services/toRichTextValue.js +11 -17
  207. package/package.json +1 -1
@@ -1,117 +1,89 @@
1
1
  import "./styles.css";
2
2
  type ImageUploadProps = {
3
+ /** Field name for form submission (stores the uploaded image URL). Required. */
3
4
  name: string;
5
+ /** Server endpoint URL that receives the `multipart/form-data` upload request. Required. */
4
6
  action: string;
7
+ /** Pre-populated image URL displayed as a preview (e.g. an existing avatar). @default "" */
5
8
  defaultValue?: string | null;
9
+ /** Additional CSS class applied to the wrapper element. */
6
10
  className?: string;
11
+ /** Disables file selection and upload. @default false */
7
12
  disabled?: boolean;
13
+ /** Optional label text displayed above the upload area. */
8
14
  label?: string;
15
+ /** Displays an asterisk on the label to signal a required field. @default false */
9
16
  showAsterisk?: boolean;
17
+ /** Label for the file-picker button after an image is selected. @default "Alterar imagem" */
10
18
  changeImageButtonText?: string;
19
+ /** Label for the file-picker button before an image is selected. @default "Selecionar imagem" */
11
20
  selectImageButtonText?: string;
21
+ /** Text displayed in the drag-and-drop zone. @default "Ou arraste e solte a imagem aqui" */
12
22
  dropImageText?: string;
23
+ /** HTTP method for the upload request. @default "POST" */
13
24
  method?: string;
25
+ /** Form-data field name used for the file. @default "file" */
14
26
  fileName?: string;
27
+ /** Property name in the server response that contains the image URL. @default "url" */
15
28
  fileResponseName?: string;
29
+ /** Accepted image MIME types or extensions (e.g. `"image/jpeg,image/png"`). @default "image/*" */
16
30
  acceptImage?: string;
31
+ /** Callback fired after a successful upload. Receives the image URL returned by the server. */
17
32
  onChange?: (url: string) => void;
33
+ /** When true, skips `FieldTemplate` wrapper (label and error text). @default false */
18
34
  unShowFieldTemplate?: boolean;
35
+ /**
36
+ * Layout direction forwarded to `FieldTemplate`.
37
+ * @default "horizontal"
38
+ */
19
39
  orientation?: "horizontal" | "vertical" | "horizontalReverse";
20
40
  };
21
41
  /**
22
- * ImageUpload component - specialized file upload component for image files with preview functionality
42
+ * ImageUpload drag-and-drop image uploader with server upload and image preview.
23
43
  *
24
- * @param props - ImageUpload component properties
25
- * @param props.name - Required field name for form handling
26
- * @param props.defaultValue - Initial image URL to display as preview. Default: ""
27
- * @param props.disabled - Whether the image upload is disabled. Default: false
28
- * @param props.className - Additional class name(s) for the wrapper element
29
- * @param props.label - Optional label text to display above the image upload area
30
- * @param props.showAsterisk - Whether to show asterisk on label for required fields. Default: false
31
- * @param props.changeImageButtonText - Text for the button to change/replace an uploaded image. Default: "Alterar imagem"
32
- * @param props.selectImageButtonText - Text for the button to select an image. Default: "Selecionar imagem"
33
- * @param props.dropImageText - Text displayed in the drop zone area. Default: "Ou arraste e solte a imagem aqui"
34
- * @param props.action - Required endpoint URL where the image will be uploaded
35
- * @param props.method - HTTP method for the upload request. Default: "POST"
36
- * @param props.fileName - Form data field name for the image file. Default: "file"
37
- * @param props.fileResponseName - Property name in the response object containing the image URL. Default: "url"
38
- * @param props.acceptImage - Image file types accepted by the input (e.g., "image/*", ".jpg,.png"). Default: "image/*"
39
- * @param props.onChange - Callback function called when image upload completes successfully, receives the image URL
40
- * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
41
- * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
44
+ * Sends the file via `fetch` as `multipart/form-data` and stores the returned URL
45
+ * in a hidden `<input>` for form submission.
46
+ * Integrates with `useForm` to display validation errors by field name.
42
47
  *
43
- * @returns ImageUpload JSX element wrapped in FieldGroup with optional label, image preview, and error handling
48
+ * @param props.name - Field name for form submission. Required.
49
+ * @param props.action - Upload endpoint URL. Required.
50
+ * @param props.defaultValue - Pre-populated image URL displayed as preview.
51
+ * @param props.disabled - Disables file selection and upload. Default: false
52
+ * @param props.label - Label text displayed above the upload area.
53
+ * @param props.showAsterisk - Appends `*` to the label. Default: false
54
+ * @param props.acceptImage - Accepted MIME types or extensions. Default: "image/*"
55
+ * @param props.method - HTTP method. Default: "POST"
56
+ * @param props.fileName - Form-data field name for the file. Default: "file"
57
+ * @param props.fileResponseName - Server response property containing the URL. Default: "url"
58
+ * @param props.onChange - Callback fired after a successful upload — receives the image URL.
59
+ * @param props.orientation - Layout direction. Default: "horizontal"
60
+ * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
61
+ *
62
+ * @returns ImageUpload JSX element wrapped in `FieldTemplate`.
44
63
  *
45
64
  * @example
46
65
  * ```tsx
47
- * // Basic image upload
48
- * <ImageUpload
49
- * name="avatar"
50
- * action="/api/upload/image"
51
- * />
66
+ * // Basic
67
+ * <ImageUpload name="avatar" action="/api/upload/image" />
52
68
  *
53
- * // Image upload with label and custom text
69
+ * // Profile picture with existing image and label
54
70
  * <ImageUpload
55
71
  * name="profilePicture"
56
72
  * action="/api/upload/avatar"
57
73
  * label="Profile Picture"
58
74
  * showAsterisk
59
- * selectImageButtonText="Choose Photo"
60
- * changeImageButtonText="Change Photo"
61
- * dropImageText="Drop your photo here"
75
+ * defaultValue={user.avatarUrl}
76
+ * selectImageButtonText="Choose photo"
77
+ * onChange={(url) => updateProfile({ avatarUrl: url })}
62
78
  * />
63
79
  *
64
- * // Image upload with default value and restrictions
80
+ * // Restricted to JPEG/PNG
65
81
  * <ImageUpload
66
82
  * name="productImage"
67
83
  * action="/api/upload/product"
68
84
  * label="Product Image"
69
- * defaultValue="https://example.com/default-image.jpg"
70
- * acceptImage=".jpg,.jpeg,.png,.webp"
71
- * fileName="productImage"
72
- * fileResponseName="imageUrl"
73
- * onChange={(url) => console.log('Image uploaded:', url)}
74
- * />
75
- *
76
- * // Disabled image upload with existing image
77
- * <ImageUpload
78
- * name="banner"
79
- * action="/api/upload/banner"
80
- * label="Banner Image"
81
- * defaultValue="https://example.com/banner.jpg"
82
- * disabled
83
- * />
84
- *
85
- * // Image upload with custom HTTP method and response handling
86
- * <ImageUpload
87
- * name="gallery"
88
- * action="/api/images"
89
- * method="PUT"
90
- * fileName="galleryImage"
91
- * fileResponseName="imageUrl"
92
- * label="Gallery Image"
93
85
  * acceptImage="image/jpeg,image/png"
94
- * onChange={(url) => {
95
- * if (url) {
96
- * setImageUrl(url);
97
- * console.log('Upload successful:', url);
98
- * }
99
- * }}
100
- * />
101
- *
102
- * // Image upload for user avatar with form integration
103
- * <ImageUpload
104
- * name="userAvatar"
105
- * action="/api/users/avatar"
106
- * label="User Avatar"
107
- * showAsterisk
108
- * defaultValue={user?.avatarUrl}
109
- * selectImageButtonText="Select Avatar"
110
- * changeImageButtonText="Update Avatar"
111
- * dropImageText="Drop avatar image here"
112
- * onChange={(avatarUrl) => {
113
- * updateUserProfile({ avatarUrl });
114
- * }}
86
+ * fileResponseName="imageUrl"
115
87
  * />
116
88
  * ```
117
89
  */
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/imageUpload/index.tsx"],"names":[],"mappings":"AAOA,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;CAC/D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgGG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA2G3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/imageUpload/index.tsx"],"names":[],"mappings":"AAOA,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,gFAAgF;IAChF,IAAI,EAAE,MAAM,CAAC;IACb,4FAA4F;IAC5F,MAAM,EAAE,MAAM,CAAC;IACf,4FAA4F;IAC5F,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6FAA6F;IAC7F,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iGAAiG;IACjG,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,4FAA4F;IAC5F,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uFAAuF;IACvF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kGAAkG;IAClG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,sFAAsF;IACtF,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;CAC/D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA2G3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
@@ -6,99 +6,51 @@ import { HasFileContent } from "./hasFileContent";
6
6
  import { NoFileContent } from "./noFileContent";
7
7
  import "./styles.css";
8
8
  /**
9
- * ImageUpload component - specialized file upload component for image files with preview functionality
9
+ * ImageUpload drag-and-drop image uploader with server upload and image preview.
10
10
  *
11
- * @param props - ImageUpload component properties
12
- * @param props.name - Required field name for form handling
13
- * @param props.defaultValue - Initial image URL to display as preview. Default: ""
14
- * @param props.disabled - Whether the image upload is disabled. Default: false
15
- * @param props.className - Additional class name(s) for the wrapper element
16
- * @param props.label - Optional label text to display above the image upload area
17
- * @param props.showAsterisk - Whether to show asterisk on label for required fields. Default: false
18
- * @param props.changeImageButtonText - Text for the button to change/replace an uploaded image. Default: "Alterar imagem"
19
- * @param props.selectImageButtonText - Text for the button to select an image. Default: "Selecionar imagem"
20
- * @param props.dropImageText - Text displayed in the drop zone area. Default: "Ou arraste e solte a imagem aqui"
21
- * @param props.action - Required endpoint URL where the image will be uploaded
22
- * @param props.method - HTTP method for the upload request. Default: "POST"
23
- * @param props.fileName - Form data field name for the image file. Default: "file"
24
- * @param props.fileResponseName - Property name in the response object containing the image URL. Default: "url"
25
- * @param props.acceptImage - Image file types accepted by the input (e.g., "image/*", ".jpg,.png"). Default: "image/*"
26
- * @param props.onChange - Callback function called when image upload completes successfully, receives the image URL
27
- * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
28
- * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
11
+ * Sends the file via `fetch` as `multipart/form-data` and stores the returned URL
12
+ * in a hidden `<input>` for form submission.
13
+ * Integrates with `useForm` to display validation errors by field name.
29
14
  *
30
- * @returns ImageUpload JSX element wrapped in FieldGroup with optional label, image preview, and error handling
15
+ * @param props.name - Field name for form submission. Required.
16
+ * @param props.action - Upload endpoint URL. Required.
17
+ * @param props.defaultValue - Pre-populated image URL displayed as preview.
18
+ * @param props.disabled - Disables file selection and upload. Default: false
19
+ * @param props.label - Label text displayed above the upload area.
20
+ * @param props.showAsterisk - Appends `*` to the label. Default: false
21
+ * @param props.acceptImage - Accepted MIME types or extensions. Default: "image/*"
22
+ * @param props.method - HTTP method. Default: "POST"
23
+ * @param props.fileName - Form-data field name for the file. Default: "file"
24
+ * @param props.fileResponseName - Server response property containing the URL. Default: "url"
25
+ * @param props.onChange - Callback fired after a successful upload — receives the image URL.
26
+ * @param props.orientation - Layout direction. Default: "horizontal"
27
+ * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
28
+ *
29
+ * @returns ImageUpload JSX element wrapped in `FieldTemplate`.
31
30
  *
32
31
  * @example
33
32
  * ```tsx
34
- * // Basic image upload
35
- * <ImageUpload
36
- * name="avatar"
37
- * action="/api/upload/image"
38
- * />
33
+ * // Basic
34
+ * <ImageUpload name="avatar" action="/api/upload/image" />
39
35
  *
40
- * // Image upload with label and custom text
36
+ * // Profile picture with existing image and label
41
37
  * <ImageUpload
42
38
  * name="profilePicture"
43
39
  * action="/api/upload/avatar"
44
40
  * label="Profile Picture"
45
41
  * showAsterisk
46
- * selectImageButtonText="Choose Photo"
47
- * changeImageButtonText="Change Photo"
48
- * dropImageText="Drop your photo here"
42
+ * defaultValue={user.avatarUrl}
43
+ * selectImageButtonText="Choose photo"
44
+ * onChange={(url) => updateProfile({ avatarUrl: url })}
49
45
  * />
50
46
  *
51
- * // Image upload with default value and restrictions
47
+ * // Restricted to JPEG/PNG
52
48
  * <ImageUpload
53
49
  * name="productImage"
54
50
  * action="/api/upload/product"
55
51
  * label="Product Image"
56
- * defaultValue="https://example.com/default-image.jpg"
57
- * acceptImage=".jpg,.jpeg,.png,.webp"
58
- * fileName="productImage"
59
- * fileResponseName="imageUrl"
60
- * onChange={(url) => console.log('Image uploaded:', url)}
61
- * />
62
- *
63
- * // Disabled image upload with existing image
64
- * <ImageUpload
65
- * name="banner"
66
- * action="/api/upload/banner"
67
- * label="Banner Image"
68
- * defaultValue="https://example.com/banner.jpg"
69
- * disabled
70
- * />
71
- *
72
- * // Image upload with custom HTTP method and response handling
73
- * <ImageUpload
74
- * name="gallery"
75
- * action="/api/images"
76
- * method="PUT"
77
- * fileName="galleryImage"
78
- * fileResponseName="imageUrl"
79
- * label="Gallery Image"
80
52
  * acceptImage="image/jpeg,image/png"
81
- * onChange={(url) => {
82
- * if (url) {
83
- * setImageUrl(url);
84
- * console.log('Upload successful:', url);
85
- * }
86
- * }}
87
- * />
88
- *
89
- * // Image upload for user avatar with form integration
90
- * <ImageUpload
91
- * name="userAvatar"
92
- * action="/api/users/avatar"
93
- * label="User Avatar"
94
- * showAsterisk
95
- * defaultValue={user?.avatarUrl}
96
- * selectImageButtonText="Select Avatar"
97
- * changeImageButtonText="Update Avatar"
98
- * dropImageText="Drop avatar image here"
99
- * onChange={(avatarUrl) => {
100
- * updateUserProfile({ avatarUrl });
101
- * }}
53
+ * fileResponseName="imageUrl"
102
54
  * />
103
55
  * ```
104
56
  */
@@ -2,50 +2,78 @@ import { LucideIcon } from "lucide-react";
2
2
  import { InputHTMLAttributes } from "react";
3
3
  import "./style.css";
4
4
  type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix" | "name" | "value" | "defaultValue"> & {
5
+ /** Field name for form submission. Required. */
5
6
  name: string;
7
+ /** Optional label text displayed above the input. */
6
8
  label?: string;
9
+ /** Validation error message displayed below the input. */
7
10
  errorMessage?: string;
11
+ /** Shows a spinner and disables the input during async operations. @default false */
8
12
  isLoading?: boolean;
13
+ /** When true, skips `FieldTemplate` wrapper (label and error text). @default false */
9
14
  unShowFieldTemplate?: boolean;
15
+ /**
16
+ * Input size.
17
+ * @default "md"
18
+ */
10
19
  size?: "md" | "lg";
20
+ /**
21
+ * Visual style variant.
22
+ * - `solid`: filled background.
23
+ * - `outline`: bordered, transparent background.
24
+ * - `underline`: bottom border only.
25
+ * @default "solid"
26
+ */
11
27
  variant?: "solid" | "outline" | "underline";
28
+ /** Text or icon rendered at the far left, outside the input area (e.g. `"https://"`). */
12
29
  prefix?: string | LucideIcon;
30
+ /** Text or icon rendered at the far right, outside the input area (e.g. `".com"`). */
13
31
  suffix?: string | LucideIcon;
32
+ /** Displays an asterisk on the label to signal a required field. */
14
33
  showAsterisk?: boolean;
34
+ /**
35
+ * Layout direction forwarded to `FieldTemplate`.
36
+ * @default "horizontal"
37
+ */
15
38
  orientation?: "horizontal" | "vertical" | "horizontalReverse";
39
+ /** Lucide icon rendered inside the input on the left. */
16
40
  leftIcon?: LucideIcon;
41
+ /** Lucide icon rendered inside the input on the right. */
17
42
  rightIcon?: LucideIcon;
43
+ /** Controlled value. */
18
44
  value?: string;
45
+ /** Uncontrolled default value. */
19
46
  defaultValue?: string;
20
47
  };
21
48
  /**
22
- * Input component - used for text input fields with support for labels, validation, icons, and loading states
49
+ * Input text input field with label, validation, icons, prefix/suffix, and loading state.
23
50
  *
24
- * @param props - Input component properties
25
- * @param props.name - Required field name for form handling
26
- * @param props.label - Optional label text to display above the input
27
- * @param props.errorMessage - Error message to display below the input
28
- * @param props.isLoading - Controls loading state with spinner. Default: false
29
- * @param props.size - Input size. Default: "md"
30
- * @param props.variant - Visual variant of the input. Default: "solid"
31
- * @param props.prefix - Text or icon to display at the beginning of the input
32
- * @param props.suffix - Text or icon to display at the end of the input
33
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
34
- * @param props.leftIcon - Optional icon to display on the left side
35
- * @param props.rightIcon - Optional icon to display on the right side
36
- * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
37
- * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
51
+ * Integrates with `useForm` to display validation errors by field name.
38
52
  *
39
- * **...Other valid HTML properties for input element**
53
+ * @param props.name - Field name for form submission. Required.
54
+ * @param props.label - Label text displayed above the input.
55
+ * @param props.errorMessage - Validation error message.
56
+ * @param props.isLoading - Shows a spinner and disables the input. Default: false
57
+ * @param props.size - Input size (`md` | `lg`). Default: "md"
58
+ * @param props.variant - Visual style variant. Default: "solid"
59
+ * @param props.prefix - Text or icon at the far left (outside the input).
60
+ * @param props.suffix - Text or icon at the far right (outside the input).
61
+ * @param props.leftIcon - Lucide icon inside the input on the left.
62
+ * @param props.rightIcon - Lucide icon inside the input on the right.
63
+ * @param props.showAsterisk - Appends `*` to the label.
64
+ * @param props.orientation - Layout direction (`horizontal` | `vertical` | `horizontalReverse`). Default: "horizontal"
65
+ * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
40
66
  *
41
- * @returns Input JSX element wrapped in FieldGroup with optional label and error
67
+ * **...Other valid HTML properties for `<input>`**
68
+ *
69
+ * @returns Input JSX element wrapped in `FieldTemplate`.
42
70
  *
43
71
  * @example
44
72
  * ```tsx
45
- * // Basic input
73
+ * // Basic
46
74
  * <Input name="username" placeholder="Enter username" />
47
75
  *
48
- * // Input with label and validation
76
+ * // With label and validation
49
77
  * <Input
50
78
  * name="email"
51
79
  * label="Email Address"
@@ -54,32 +82,11 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"
54
82
  * errorMessage="Please enter a valid email"
55
83
  * />
56
84
  *
57
- * // Input with icons and loading state
58
- * <Input
59
- * name="search"
60
- * label="Search"
61
- * leftIcon={SearchIcon}
62
- * rightIcon={FilterIcon}
63
- * isLoading
64
- * />
65
- *
66
- * // Input with prefix/suffix
67
- * <Input
68
- * name="website"
69
- * label="Website"
70
- * prefix="https://"
71
- * suffix=".com"
72
- * variant="outline"
73
- * />
85
+ * // With icons and loading state
86
+ * <Input name="search" label="Search" leftIcon={SearchIcon} isLoading />
74
87
  *
75
- * // Large input with underline variant
76
- * <Input
77
- * name="title"
78
- * label="Article Title"
79
- * size="lg"
80
- * variant="underline"
81
- * placeholder="Enter article title"
82
- * />
88
+ * // With prefix/suffix
89
+ * <Input name="website" label="Website" prefix="https://" suffix=".com" variant="outline" />
83
90
  * ```
84
91
  */
85
92
  declare function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,UAAU,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EACL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AAMf,OAAO,aAAa,CAAC;AAErB,KAAK,UAAU,GAAG,IAAI,CACpB,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,cAAc,CACtD,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;IAEb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAE5C,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;IAE9D,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AAEH,iBAAS,KAAK,CAAC,KAAK,EAAE,UAAU,2CAyI/B;AAED,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,UAAU,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EACL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AAMf,OAAO,aAAa,CAAC;AAErB,KAAK,UAAU,GAAG,IAAI,CACpB,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,cAAc,CACtD,GAAG;IACF,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qFAAqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sFAAsF;IACtF,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAC5C,yFAAyF;IACzF,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;IAC9D,yDAAyD;IACzD,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEH,iBAAS,KAAK,CAAC,KAAK,EAAE,UAAU,2CAyI/B;AAED,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,CAAC"}
@@ -6,33 +6,34 @@ import { FieldTemplate } from "../../services/fieldTemplate";
6
6
  import { IconRenderer } from "../../services/iconRenderer";
7
7
  import "./style.css";
8
8
  /**
9
- * Input component - used for text input fields with support for labels, validation, icons, and loading states
9
+ * Input text input field with label, validation, icons, prefix/suffix, and loading state.
10
10
  *
11
- * @param props - Input component properties
12
- * @param props.name - Required field name for form handling
13
- * @param props.label - Optional label text to display above the input
14
- * @param props.errorMessage - Error message to display below the input
15
- * @param props.isLoading - Controls loading state with spinner. Default: false
16
- * @param props.size - Input size. Default: "md"
17
- * @param props.variant - Visual variant of the input. Default: "solid"
18
- * @param props.prefix - Text or icon to display at the beginning of the input
19
- * @param props.suffix - Text or icon to display at the end of the input
20
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
21
- * @param props.leftIcon - Optional icon to display on the left side
22
- * @param props.rightIcon - Optional icon to display on the right side
23
- * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
24
- * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
11
+ * Integrates with `useForm` to display validation errors by field name.
25
12
  *
26
- * **...Other valid HTML properties for input element**
13
+ * @param props.name - Field name for form submission. Required.
14
+ * @param props.label - Label text displayed above the input.
15
+ * @param props.errorMessage - Validation error message.
16
+ * @param props.isLoading - Shows a spinner and disables the input. Default: false
17
+ * @param props.size - Input size (`md` | `lg`). Default: "md"
18
+ * @param props.variant - Visual style variant. Default: "solid"
19
+ * @param props.prefix - Text or icon at the far left (outside the input).
20
+ * @param props.suffix - Text or icon at the far right (outside the input).
21
+ * @param props.leftIcon - Lucide icon inside the input on the left.
22
+ * @param props.rightIcon - Lucide icon inside the input on the right.
23
+ * @param props.showAsterisk - Appends `*` to the label.
24
+ * @param props.orientation - Layout direction (`horizontal` | `vertical` | `horizontalReverse`). Default: "horizontal"
25
+ * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
27
26
  *
28
- * @returns Input JSX element wrapped in FieldGroup with optional label and error
27
+ * **...Other valid HTML properties for `<input>`**
28
+ *
29
+ * @returns Input JSX element wrapped in `FieldTemplate`.
29
30
  *
30
31
  * @example
31
32
  * ```tsx
32
- * // Basic input
33
+ * // Basic
33
34
  * <Input name="username" placeholder="Enter username" />
34
35
  *
35
- * // Input with label and validation
36
+ * // With label and validation
36
37
  * <Input
37
38
  * name="email"
38
39
  * label="Email Address"
@@ -41,32 +42,11 @@ import "./style.css";
41
42
  * errorMessage="Please enter a valid email"
42
43
  * />
43
44
  *
44
- * // Input with icons and loading state
45
- * <Input
46
- * name="search"
47
- * label="Search"
48
- * leftIcon={SearchIcon}
49
- * rightIcon={FilterIcon}
50
- * isLoading
51
- * />
52
- *
53
- * // Input with prefix/suffix
54
- * <Input
55
- * name="website"
56
- * label="Website"
57
- * prefix="https://"
58
- * suffix=".com"
59
- * variant="outline"
60
- * />
45
+ * // With icons and loading state
46
+ * <Input name="search" label="Search" leftIcon={SearchIcon} isLoading />
61
47
  *
62
- * // Large input with underline variant
63
- * <Input
64
- * name="title"
65
- * label="Article Title"
66
- * size="lg"
67
- * variant="underline"
68
- * placeholder="Enter article title"
69
- * />
48
+ * // With prefix/suffix
49
+ * <Input name="website" label="Website" prefix="https://" suffix=".com" variant="outline" />
70
50
  * ```
71
51
  */
72
52
  function Input(props) {
@@ -1,17 +1,61 @@
1
1
  import type { HtmlHTMLAttributes, ReactNode } from "react";
2
2
  import "./styles.css";
3
+ /** Data for a single map marker. */
3
4
  type Coordinate = {
5
+ /** Latitude of the marker position. */
4
6
  lat: number;
7
+ /** Longitude of the marker position. */
5
8
  lng: number;
9
+ /** Arbitrary data attached to the marker — available in `onMarkerClick`. */
6
10
  data?: any;
11
+ /** Custom React node rendered inside the marker popup on click. */
7
12
  popUp?: ReactNode;
8
13
  };
9
14
  type MapViewProps = {
15
+ /** Mapbox GL public access token from your Mapbox account. Required. */
10
16
  accessToken: string;
17
+ /** Initial zoom level. @default 18 */
11
18
  zoom?: number;
19
+ /** Single coordinate or array of coordinates to display as markers. */
12
20
  coordinates?: Coordinate | Coordinate[];
21
+ /** Callback fired when the user clicks a marker. Receives the coordinate's data. */
13
22
  onMarkerClick?: (coordinate: Coordinate) => void;
14
23
  } & HtmlHTMLAttributes<HTMLDivElement>;
24
+ /**
25
+ * MapView — interactive Mapbox map with optional click-able markers.
26
+ *
27
+ * Renders client-side only (via `ClientOnly`). Displays a placeholder icon
28
+ * when `coordinates` is absent or empty, or before the component hydrates.
29
+ *
30
+ * @param props.accessToken - Mapbox GL public access token. Required.
31
+ * @param props.zoom - Initial zoom level. Default: 18
32
+ * @param props.coordinates - Marker(s) to display on the map.
33
+ * @param props.onMarkerClick - Callback fired when a marker is clicked.
34
+ *
35
+ * **...Other valid HTML properties for `<div>`**
36
+ *
37
+ * @returns MapView JSX element, or a placeholder icon when no coordinates are provided.
38
+ *
39
+ * @example
40
+ * ```tsx
41
+ * // Single marker
42
+ * <MapView
43
+ * accessToken="pk.your-mapbox-token"
44
+ * coordinates={{ lat: -23.5505, lng: -46.6333 }}
45
+ * />
46
+ *
47
+ * // Multiple markers with popup and click handler
48
+ * <MapView
49
+ * accessToken="pk.your-mapbox-token"
50
+ * zoom={12}
51
+ * coordinates={[
52
+ * { lat: -23.55, lng: -46.63, data: { id: 1 }, popUp: <p>Store A</p> },
53
+ * { lat: -23.56, lng: -46.64, data: { id: 2 }, popUp: <p>Store B</p> },
54
+ * ]}
55
+ * onMarkerClick={(coord) => selectStore(coord.data.id)}
56
+ * />
57
+ * ```
58
+ */
15
59
  declare function MapView(props: MapViewProps): import("react/jsx-runtime").JSX.Element;
16
60
  export { MapView };
17
61
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/mapView/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,cAAc,CAAC;AAGtB,KAAK,UAAU,GAAG;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;CAClD,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;AAcvC,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,2CA4BnC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/mapView/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,cAAc,CAAC;AAGtB,oCAAoC;AACpC,KAAK,UAAU,GAAG;IAChB,uCAAuC;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,wCAAwC;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,wEAAwE;IACxE,WAAW,EAAE,MAAM,CAAC;IACpB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,WAAW,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACxC,oFAAoF;IACpF,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;CAClD,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;AAcvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,2CA4BnC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
@@ -6,6 +6,41 @@ import { ClientOnly } from "../clientOnly";
6
6
  function EmptyMap({ className }) {
7
7
  return (_jsx("div", { className: "arkynMapViewPinnedEmpty " + className, children: _jsx(MapPinned, {}) }));
8
8
  }
9
+ /**
10
+ * MapView — interactive Mapbox map with optional click-able markers.
11
+ *
12
+ * Renders client-side only (via `ClientOnly`). Displays a placeholder icon
13
+ * when `coordinates` is absent or empty, or before the component hydrates.
14
+ *
15
+ * @param props.accessToken - Mapbox GL public access token. Required.
16
+ * @param props.zoom - Initial zoom level. Default: 18
17
+ * @param props.coordinates - Marker(s) to display on the map.
18
+ * @param props.onMarkerClick - Callback fired when a marker is clicked.
19
+ *
20
+ * **...Other valid HTML properties for `<div>`**
21
+ *
22
+ * @returns MapView JSX element, or a placeholder icon when no coordinates are provided.
23
+ *
24
+ * @example
25
+ * ```tsx
26
+ * // Single marker
27
+ * <MapView
28
+ * accessToken="pk.your-mapbox-token"
29
+ * coordinates={{ lat: -23.5505, lng: -46.6333 }}
30
+ * />
31
+ *
32
+ * // Multiple markers with popup and click handler
33
+ * <MapView
34
+ * accessToken="pk.your-mapbox-token"
35
+ * zoom={12}
36
+ * coordinates={[
37
+ * { lat: -23.55, lng: -46.63, data: { id: 1 }, popUp: <p>Store A</p> },
38
+ * { lat: -23.56, lng: -46.64, data: { id: 2 }, popUp: <p>Store B</p> },
39
+ * ]}
40
+ * onMarkerClick={(coord) => selectStore(coord.data.id)}
41
+ * />
42
+ * ```
43
+ */
9
44
  function MapView(props) {
10
45
  const { coordinates, zoom = 18, accessToken, className, onMarkerClick, ...rest } = props;
11
46
  if (!coordinates)