@soyfri/shared-library 2.0.0-beta8 → 2.0.0

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 (315) hide show
  1. package/Button-C17mExpd.cjs.map +1 -1
  2. package/Button-UkkP-bNw.js.map +1 -1
  3. package/README.md +182 -150
  4. package/components/ActionMenu/ActionMenu.cjs +52 -52
  5. package/components/ActionMenu/ActionMenu.cjs.map +1 -1
  6. package/components/ActionMenu/ActionMenu.d.ts +20 -36
  7. package/components/ActionMenu/ActionMenu.js +55 -55
  8. package/components/ActionMenu/ActionMenu.js.map +1 -1
  9. package/components/ActionMenu/index.d.ts +2 -2
  10. package/components/AppBar/AppBar.cjs +3 -220
  11. package/components/AppBar/AppBar.cjs.map +1 -1
  12. package/components/AppBar/AppBar.d.ts +6 -6
  13. package/components/AppBar/AppBar.js +6 -223
  14. package/components/AppBar/AppBar.js.map +1 -1
  15. package/components/AppBar/index.d.ts +0 -6
  16. package/components/Autocomplete/Autocomplete.cjs +310 -4
  17. package/components/Autocomplete/Autocomplete.cjs.map +1 -1
  18. package/components/Autocomplete/Autocomplete.d.ts +29 -26
  19. package/components/Autocomplete/Autocomplete.definitions.d.ts +2 -1
  20. package/components/Autocomplete/Autocomplete.helpers.d.ts +12 -8
  21. package/components/Autocomplete/Autocomplete.js +310 -4
  22. package/components/Autocomplete/Autocomplete.js.map +1 -1
  23. package/components/Autocomplete/_parts/AutocompleteChips.d.ts +7 -6
  24. package/components/Autocomplete/_parts/AutocompleteOption.d.ts +10 -13
  25. package/components/Autocomplete/index.d.ts +1 -1
  26. package/components/Avatar/Avatar.cjs +159 -2
  27. package/components/Avatar/Avatar.cjs.map +1 -1
  28. package/components/Avatar/Avatar.js +159 -2
  29. package/components/Avatar/Avatar.js.map +1 -1
  30. package/components/Avatar/index.d.ts +1 -0
  31. package/components/Button/Button.d.ts +5 -5
  32. package/components/Button/index.d.ts +1 -0
  33. package/components/Card/Card.cjs +95 -7
  34. package/components/Card/Card.cjs.map +1 -1
  35. package/components/Card/Card.d.ts +3 -50
  36. package/components/Card/Card.js +95 -7
  37. package/components/Card/Card.js.map +1 -1
  38. package/components/Card/Card.sx.d.ts +3 -6
  39. package/components/Card/index.d.ts +1 -1
  40. package/{Switch-BIeobv6i.cjs → components/Checkbox/Checkbox.cjs} +30 -20
  41. package/components/Checkbox/Checkbox.cjs.map +1 -0
  42. package/components/Checkbox/Checkbox.d.ts +55 -0
  43. package/{Switch-DQEOxM2R.js → components/Checkbox/Checkbox.js} +29 -20
  44. package/components/Checkbox/Checkbox.js.map +1 -0
  45. package/components/Checkbox/Checkbox.sx.d.ts +13 -0
  46. package/components/Checkbox/index.d.ts +2 -0
  47. package/components/Checkbox.d.ts +6 -0
  48. package/components/Chip/Chip.cjs +73 -3
  49. package/components/Chip/Chip.cjs.map +1 -1
  50. package/components/Chip/Chip.js +72 -2
  51. package/components/Chip/Chip.js.map +1 -1
  52. package/components/Chip/index.d.ts +2 -1
  53. package/components/Chip.d.ts +4 -0
  54. package/components/Column/Column.cjs +1 -1
  55. package/components/Column/Column.cjs.map +1 -1
  56. package/components/Column/Column.d.ts +1 -1
  57. package/components/Column/Column.js +1 -1
  58. package/components/Column/Column.js.map +1 -1
  59. package/components/Column/index.d.ts +0 -1
  60. package/components/DatePicker/DatePicker.cjs +177 -3
  61. package/components/DatePicker/DatePicker.cjs.map +1 -1
  62. package/components/DatePicker/DatePicker.d.ts +1 -13
  63. package/components/DatePicker/DatePicker.js +177 -3
  64. package/components/DatePicker/DatePicker.js.map +1 -1
  65. package/components/DatePicker/index.d.ts +1 -1
  66. package/components/DateRangePicker/DateRangePicker.cjs +73 -2
  67. package/components/DateRangePicker/DateRangePicker.cjs.map +1 -1
  68. package/components/DateRangePicker/DateRangePicker.js +73 -2
  69. package/components/DateRangePicker/DateRangePicker.js.map +1 -1
  70. package/components/DateTimePicker/DateTimePicker.cjs +195 -3
  71. package/components/DateTimePicker/DateTimePicker.cjs.map +1 -1
  72. package/components/DateTimePicker/DateTimePicker.d.ts +9 -17
  73. package/components/DateTimePicker/DateTimePicker.definitions.d.ts +2 -0
  74. package/components/DateTimePicker/DateTimePicker.helpers.d.ts +4 -2
  75. package/components/DateTimePicker/DateTimePicker.js +195 -3
  76. package/components/DateTimePicker/DateTimePicker.js.map +1 -1
  77. package/components/DateTimePicker/index.d.ts +1 -1
  78. package/components/Drawer/Drawer.cjs +13 -7
  79. package/components/Drawer/Drawer.cjs.map +1 -1
  80. package/components/Drawer/Drawer.d.ts +3 -1
  81. package/components/Drawer/Drawer.js +14 -8
  82. package/components/Drawer/Drawer.js.map +1 -1
  83. package/components/Drawer/DrawerItem.d.ts +6 -1
  84. package/components/Gallery/Gallery.cjs +154 -79
  85. package/components/Gallery/Gallery.cjs.map +1 -1
  86. package/components/Gallery/Gallery.d.ts +25 -9
  87. package/components/Gallery/Gallery.js +154 -79
  88. package/components/Gallery/Gallery.js.map +1 -1
  89. package/components/Gallery/GalleryLightbox.d.ts +6 -10
  90. package/components/Gallery/GalleryMain.d.ts +3 -7
  91. package/components/Gallery/GalleryThumbnails.d.ts +7 -11
  92. package/components/Gallery/index.d.ts +2 -1
  93. package/components/Gallery.d.ts +4 -0
  94. package/components/Icon/Icon.cjs +6 -8
  95. package/components/Icon/Icon.cjs.map +1 -1
  96. package/components/Icon/Icon.d.ts +11 -17
  97. package/components/Icon/Icon.js +6 -8
  98. package/components/Icon/Icon.js.map +1 -1
  99. package/components/Icon/index.d.ts +2 -1
  100. package/components/Icon.d.ts +4 -0
  101. package/components/Input/Input.cjs +185 -3
  102. package/components/Input/Input.cjs.map +1 -1
  103. package/components/Input/Input.d.ts +9 -2
  104. package/components/Input/Input.helpers.d.ts +3 -3
  105. package/components/Input/Input.js +185 -3
  106. package/components/Input/Input.js.map +1 -1
  107. package/components/Input/index.d.ts +1 -1
  108. package/components/InputGroup/InputGroup.cjs +23 -22
  109. package/components/InputGroup/InputGroup.cjs.map +1 -1
  110. package/components/InputGroup/InputGroup.d.ts +4 -4
  111. package/components/InputGroup/InputGroup.js +22 -21
  112. package/components/InputGroup/InputGroup.js.map +1 -1
  113. package/components/InputGroup/index.d.ts +2 -1
  114. package/components/InputGroup.d.ts +4 -0
  115. package/components/Modal/Modal.cjs +345 -6
  116. package/components/Modal/Modal.cjs.map +1 -1
  117. package/components/Modal/Modal.d.ts +20 -5
  118. package/components/Modal/Modal.js +345 -6
  119. package/components/Modal/Modal.js.map +1 -1
  120. package/components/Modal/ModalBody.d.ts +6 -1
  121. package/components/Modal/ModalFooter.d.ts +4 -4
  122. package/components/Modal/ModalHeader.d.ts +6 -1
  123. package/components/Modal/index.d.ts +4 -3
  124. package/components/RadioGroup/RadioGroup.cjs +201 -3
  125. package/components/RadioGroup/RadioGroup.cjs.map +1 -1
  126. package/components/RadioGroup/RadioGroup.d.ts +9 -3
  127. package/components/RadioGroup/RadioGroup.js +201 -3
  128. package/components/RadioGroup/RadioGroup.js.map +1 -1
  129. package/components/RadioGroup/index.d.ts +1 -1
  130. package/components/Select/Select.cjs +310 -4
  131. package/components/Select/Select.cjs.map +1 -1
  132. package/components/Select/Select.d.ts +35 -20
  133. package/components/Select/Select.helpers.d.ts +6 -19
  134. package/components/Select/Select.js +310 -4
  135. package/components/Select/Select.js.map +1 -1
  136. package/components/Select/index.d.ts +1 -1
  137. package/components/Stat/Stat.cjs +83 -4
  138. package/components/Stat/Stat.cjs.map +1 -1
  139. package/components/Stat/Stat.js +82 -3
  140. package/components/Stat/Stat.js.map +1 -1
  141. package/components/Stat/index.d.ts +2 -1
  142. package/components/Stat.d.ts +4 -0
  143. package/components/StatusMessage/StatusMessage.cjs +105 -3
  144. package/components/StatusMessage/StatusMessage.cjs.map +1 -1
  145. package/components/StatusMessage/StatusMessage.d.ts +20 -36
  146. package/components/StatusMessage/StatusMessage.js +105 -3
  147. package/components/StatusMessage/StatusMessage.js.map +1 -1
  148. package/components/StatusMessage/StatusMessageContext.d.ts +16 -0
  149. package/components/StatusMessage/index.d.ts +2 -0
  150. package/components/Stepper/Stepper.cjs +324 -4
  151. package/components/Stepper/Stepper.cjs.map +1 -1
  152. package/components/Stepper/Stepper.d.ts +9 -8
  153. package/components/Stepper/Stepper.js +323 -3
  154. package/components/Stepper/Stepper.js.map +1 -1
  155. package/{hooks/Wizard/WizardContext.d.ts → components/Stepper/StepperContext.d.ts} +28 -22
  156. package/components/Stepper/_hooks/useHorizontalScroll.d.ts +19 -0
  157. package/components/Stepper/_parts/StepperScrollArrow.d.ts +19 -0
  158. package/components/Stepper/index.d.ts +6 -2
  159. package/components/Stepper.d.ts +4 -0
  160. package/components/Switch/Switch.cjs +181 -3
  161. package/components/Switch/Switch.cjs.map +1 -1
  162. package/components/Switch/Switch.d.ts +7 -2
  163. package/components/Switch/Switch.js +181 -3
  164. package/components/Switch/Switch.js.map +1 -1
  165. package/components/Table/Table.cjs +528 -2
  166. package/components/Table/Table.cjs.map +1 -1
  167. package/components/Table/Table.d.ts +1 -1
  168. package/components/Table/Table.js +528 -2
  169. package/components/Table/Table.js.map +1 -1
  170. package/components/Tabs/Tabs.cjs +110 -4
  171. package/components/Tabs/Tabs.cjs.map +1 -1
  172. package/components/Tabs/Tabs.d.ts +21 -16
  173. package/components/Tabs/Tabs.js +109 -3
  174. package/components/Tabs/Tabs.js.map +1 -1
  175. package/components/Tabs/index.d.ts +4 -2
  176. package/components/Tabs.d.ts +4 -0
  177. package/components/Timeline/Timeline.cjs +3 -2
  178. package/components/Timeline/Timeline.cjs.map +1 -1
  179. package/components/Timeline/Timeline.d.ts +4 -8
  180. package/components/Timeline/Timeline.js +3 -2
  181. package/components/Timeline/Timeline.js.map +1 -1
  182. package/components/Timeline/index.d.ts +4 -2
  183. package/components/Timeline.d.ts +4 -0
  184. package/components/_shared/mergeSx.d.ts +7 -0
  185. package/{formField.sx-DfVbMe0V.js → formField.sx-8_QRnKxv.js} +2 -11
  186. package/formField.sx-8_QRnKxv.js.map +1 -0
  187. package/{formField.sx-CQ1mbk9M.cjs → formField.sx-BAX7KwMR.cjs} +10 -19
  188. package/formField.sx-BAX7KwMR.cjs.map +1 -0
  189. package/index.cjs +31 -47
  190. package/index.cjs.map +1 -1
  191. package/index.d.ts +1 -30
  192. package/index.js +17 -48
  193. package/index.js.map +1 -1
  194. package/mergeSx-BXoNZjB_.js +10 -0
  195. package/mergeSx-BXoNZjB_.js.map +1 -0
  196. package/mergeSx-Dbccoo_H.cjs +9 -0
  197. package/mergeSx-Dbccoo_H.cjs.map +1 -0
  198. package/mui.d.ts +3 -2
  199. package/package.json +8 -20
  200. package/{resolvePreset-K6_BfWHD.js → resolvePreset-B-IB0ehH.js} +3 -3
  201. package/{resolvePreset-K6_BfWHD.js.map → resolvePreset-B-IB0ehH.js.map} +1 -1
  202. package/{resolvePreset-CxTI6_Ln.cjs → resolvePreset-CT3kU-K2.cjs} +3 -3
  203. package/{resolvePreset-CxTI6_Ln.cjs.map → resolvePreset-CT3kU-K2.cjs.map} +1 -1
  204. package/theme/componentStyles.d.ts +1 -1
  205. package/tokens-BRrcP_p_.js +21 -0
  206. package/tokens-BRrcP_p_.js.map +1 -0
  207. package/tokens-jaWWNk39.cjs +20 -0
  208. package/tokens-jaWWNk39.cjs.map +1 -0
  209. package/utils/index.d.ts +2 -0
  210. package/{components/ScrollTopButton → utils}/scrollToTop.d.ts +6 -7
  211. package/Autocomplete-BA-cGASd.js +0 -316
  212. package/Autocomplete-BA-cGASd.js.map +0 -1
  213. package/Autocomplete-C2x-lBvZ.cjs +0 -315
  214. package/Autocomplete-C2x-lBvZ.cjs.map +0 -1
  215. package/Avatar-9L7YMxya.cjs +0 -162
  216. package/Avatar-9L7YMxya.cjs.map +0 -1
  217. package/Avatar-BJTr-PBd.js +0 -163
  218. package/Avatar-BJTr-PBd.js.map +0 -1
  219. package/Card-DG_crfkK.cjs +0 -185
  220. package/Card-DG_crfkK.cjs.map +0 -1
  221. package/Card-Ug-ttVSh.js +0 -186
  222. package/Card-Ug-ttVSh.js.map +0 -1
  223. package/Chip-OPYQ1uQ_.js +0 -74
  224. package/Chip-OPYQ1uQ_.js.map +0 -1
  225. package/Chip-qoJLDiva.cjs +0 -73
  226. package/Chip-qoJLDiva.cjs.map +0 -1
  227. package/DatePicker-8f_9bwhS.js +0 -202
  228. package/DatePicker-8f_9bwhS.js.map +0 -1
  229. package/DatePicker-DLSfkgGA.cjs +0 -201
  230. package/DatePicker-DLSfkgGA.cjs.map +0 -1
  231. package/DateRangePicker-BVpeJCHI.js +0 -76
  232. package/DateRangePicker-BVpeJCHI.js.map +0 -1
  233. package/DateRangePicker-B_hKQhbj.cjs +0 -75
  234. package/DateRangePicker-B_hKQhbj.cjs.map +0 -1
  235. package/DateTimePicker-CWNW09-O.cjs +0 -220
  236. package/DateTimePicker-CWNW09-O.cjs.map +0 -1
  237. package/DateTimePicker-D4L9GAod.js +0 -221
  238. package/DateTimePicker-D4L9GAod.js.map +0 -1
  239. package/Input-Cp911l23.js +0 -174
  240. package/Input-Cp911l23.js.map +0 -1
  241. package/Input-DI0jfq5X.cjs +0 -173
  242. package/Input-DI0jfq5X.cjs.map +0 -1
  243. package/Modal-Bm_HH9cv.cjs +0 -319
  244. package/Modal-Bm_HH9cv.cjs.map +0 -1
  245. package/Modal-Bnz6d9m9.js +0 -320
  246. package/Modal-Bnz6d9m9.js.map +0 -1
  247. package/RadioGroup-CxqDHap1.cjs +0 -200
  248. package/RadioGroup-CxqDHap1.cjs.map +0 -1
  249. package/RadioGroup-DMi9FvMP.js +0 -201
  250. package/RadioGroup-DMi9FvMP.js.map +0 -1
  251. package/Select-3CBOfM2H.js +0 -447
  252. package/Select-3CBOfM2H.js.map +0 -1
  253. package/Select-Bku4f4f8.cjs +0 -446
  254. package/Select-Bku4f4f8.cjs.map +0 -1
  255. package/Stat-BUcFCGrz.cjs +0 -83
  256. package/Stat-BUcFCGrz.cjs.map +0 -1
  257. package/Stat-C06A_izS.js +0 -84
  258. package/Stat-C06A_izS.js.map +0 -1
  259. package/StatusMessage-C5B6oGZ_.cjs +0 -78
  260. package/StatusMessage-C5B6oGZ_.cjs.map +0 -1
  261. package/StatusMessage-D1GlfQdz.js +0 -79
  262. package/StatusMessage-D1GlfQdz.js.map +0 -1
  263. package/Step-Dq0N72YB.js +0 -49
  264. package/Step-Dq0N72YB.js.map +0 -1
  265. package/Step-a8U8O-91.cjs +0 -48
  266. package/Step-a8U8O-91.cjs.map +0 -1
  267. package/Switch-BIeobv6i.cjs.map +0 -1
  268. package/Switch-DQEOxM2R.js.map +0 -1
  269. package/Tab-Co31KY2k.cjs +0 -95
  270. package/Tab-Co31KY2k.cjs.map +0 -1
  271. package/Tab-DiK62gRz.js +0 -96
  272. package/Tab-DiK62gRz.js.map +0 -1
  273. package/Table-C2LbW0B1.js +0 -531
  274. package/Table-C2LbW0B1.js.map +0 -1
  275. package/Table-C4OM6rrC.cjs +0 -530
  276. package/Table-C4OM6rrC.cjs.map +0 -1
  277. package/components/AppBar/AppBarBrand.d.ts +0 -31
  278. package/components/AppBar/AppBarUserMenu.d.ts +0 -65
  279. package/components/Autocomplete/Autocomplete.types.d.ts +0 -1
  280. package/components/DatePicker/DatePicker.types.d.ts +0 -1
  281. package/components/DateTimePicker/DateTimePicker.types.d.ts +0 -1
  282. package/components/Input/Input.types.d.ts +0 -1
  283. package/components/PageLoader/PageLoader.cjs +0 -61
  284. package/components/PageLoader/PageLoader.cjs.map +0 -1
  285. package/components/PageLoader/PageLoader.d.ts +0 -38
  286. package/components/PageLoader/PageLoader.js +0 -61
  287. package/components/PageLoader/PageLoader.js.map +0 -1
  288. package/components/PageLoader/index.d.ts +0 -2
  289. package/components/PageLoader.d.ts +0 -6
  290. package/components/RadioGroup/RadioGroup.types.d.ts +0 -1
  291. package/components/ScrollTopButton/ScrollTopButton.cjs +0 -79
  292. package/components/ScrollTopButton/ScrollTopButton.cjs.map +0 -1
  293. package/components/ScrollTopButton/ScrollTopButton.d.ts +0 -48
  294. package/components/ScrollTopButton/ScrollTopButton.js +0 -79
  295. package/components/ScrollTopButton/ScrollTopButton.js.map +0 -1
  296. package/components/ScrollTopButton/index.d.ts +0 -4
  297. package/components/ScrollTopButton.d.ts +0 -6
  298. package/components/Select/Select.definitions.d.ts +0 -17
  299. package/components/Select/Select.types.d.ts +0 -1
  300. package/components/Select/_parts/SelectSearchHeader.d.ts +0 -15
  301. package/components/Select/_parts/SelectValue.d.ts +0 -22
  302. package/formField.sx-CQ1mbk9M.cjs.map +0 -1
  303. package/formField.sx-DfVbMe0V.js.map +0 -1
  304. package/hooks/Wizard/Wizard.cjs +0 -7
  305. package/hooks/Wizard/Wizard.cjs.map +0 -1
  306. package/hooks/Wizard/Wizard.js +0 -7
  307. package/hooks/Wizard/Wizard.js.map +0 -1
  308. package/hooks/Wizard/index.d.ts +0 -3
  309. package/hooks/Wizard/useWizard.d.ts +0 -9
  310. package/hooks/Wizard.d.ts +0 -2
  311. package/useWizard-CWdIxZzX.cjs +0 -94
  312. package/useWizard-CWdIxZzX.cjs.map +0 -1
  313. package/useWizard-CWq--C3o.js +0 -95
  314. package/useWizard-CWq--C3o.js.map +0 -1
  315. /package/{styles.css → index.css} +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.cjs","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React, { type ReactNode, useMemo } from 'react';\nimport { Badge, styled } from '@mui/material';\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface IconProps {\n /**\n * Contenido icono. Modo legacy: acepta un elemento MUI o SVG ya armado.\n * Si se usa junto con `path` o `url`, `children` tiene prioridad.\n */\n children?: ReactNode;\n /**\n * Ruta SVG inline (el contenido del atributo `d` de un `<path>`). Útil para\n * los iconos custom de Metronic que vienen como strings de path.\n *\n * ```tsx\n * <Icon path=\"M12 2L2 22h20L12 2z\" />\n * ```\n *\n * Si el string contiene el tag `<svg>` completo (no solo el `d`), también\n * se soporta y se inyecta tal cual via `dangerouslySetInnerHTML`.\n */\n path?: string;\n /**\n * URL a un archivo `.svg` (asset local o remoto). Se renderiza vía `<img>`.\n *\n * ```tsx\n * <Icon url=\"/assets/icons/custom-warning.svg\" />\n * ```\n */\n url?: string;\n /**\n * Alt text cuando se usa `url`. Default: `\"icon\"`.\n */\n alt?: string;\n /**\n * ViewBox cuando se usa `path`. Default: `\"0 0 24 24\"`. Ignorado si `path`\n * ya viene como `<svg>` completo.\n */\n viewBox?: string;\n color?: string;\n outlined?: boolean;\n spin?: boolean;\n badge?: string | number;\n badgeColor?: 'primary' | 'secondary' | 'error';\n badgePosition?: {\n vertical: 'top' | 'bottom';\n horizontal: 'right' | 'left';\n };\n badgeSize?: 'small' | 'medium' | 'large';\n size?: IconSize;\n black?: boolean;\n white?: boolean;\n className?: string;\n}\n\nconst sizeMap: Record<IconSize, number> = {\n xs: 18,\n sm: 24,\n md: 36,\n lg: 48,\n xl: 64,\n};\n\nconst StyledIcon = styled('span')<{\n color?: string;\n fontSize?: number;\n spin?: boolean;\n outlined?: boolean;\n}>(({ color, fontSize, spin, outlined }) => ({\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: color,\n fontSize: fontSize,\n width: fontSize,\n height: fontSize,\n animation: spin ? 'spin 1s linear infinite' : undefined,\n border: outlined ? '1px solid currentColor' : undefined,\n borderRadius: '50%',\n padding: outlined ? 4 : 0,\n '@keyframes spin': {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n '& svg': {\n width: '100%',\n height: '100%',\n fill: 'currentColor',\n display: 'block',\n },\n '& img': {\n width: '100%',\n height: '100%',\n display: 'block',\n },\n}));\n\nexport const Icon: React.FC<IconProps> = ({\n children,\n path,\n url,\n alt = 'icon',\n viewBox = '0 0 24 24',\n color = 'var(--primary-color)',\n outlined = false,\n spin = false,\n badge,\n badgeColor = 'primary',\n badgePosition = { vertical: 'bottom', horizontal: 'right' },\n size = 'sm',\n black,\n white,\n className,\n}) => {\n const finalColor = useMemo(() => {\n if (white) return 'white';\n if (black) return 'black';\n return color;\n }, [color, white, black]);\n\n const iconSize = sizeMap[size];\n\n // Resolver el contenido según la prop activa.\n const content = useMemo(() => {\n if (children) return children;\n\n if (path) {\n const trimmed = path.trim();\n // Si es un SVG completo (empieza con <svg), lo inyectamos tal cual.\n if (trimmed.startsWith('<svg')) {\n return <span dangerouslySetInnerHTML={{ __html: trimmed }} />;\n }\n // Si no, asumimos que es el atributo `d` de un <path>.\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={viewBox}\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path d={trimmed} />\n </svg>\n );\n }\n\n if (url) {\n return <img src={url} alt={alt} />;\n }\n\n return null;\n }, [children, path, url, alt, viewBox]);\n\n return (\n <Badge\n badgeContent={badge}\n color={badgeColor}\n anchorOrigin={badgePosition}\n invisible={badge === undefined}\n sx={{ '.MuiBadge-badge': { transform: 'scale(1)' } }}\n >\n <StyledIcon\n color={finalColor}\n fontSize={iconSize}\n spin={spin}\n outlined={outlined}\n className={`hsi-icon ${className || ''}`}\n >\n {content}\n </StyledIcon>\n </Badge>\n );\n};\n\nexport default Icon;\n"],"names":["styled","useMemo","jsx","Badge"],"mappings":";;;;;;AAwDA,MAAM,UAAoC;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,aAAaA,SAAAA,OAAO,MAAM,EAK7B,CAAC,EAAE,OAAO,UAAU,MAAM,gBAAgB;AAAA,EAC3C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW,OAAO,4BAA4B;AAAA,EAC9C,QAAQ,WAAW,2BAA2B;AAAA,EAC9C,cAAc;AAAA,EACd,SAAS,WAAW,IAAI;AAAA,EACxB,mBAAmB;AAAA,IACjB,MAAM,EAAE,WAAW,eAAA;AAAA,IACnB,QAAQ,EAAE,WAAW,iBAAA;AAAA,EAAiB;AAAA,EAExC,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA,EAEX,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EAAA;AAEb,EAAE;AAEK,MAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB,EAAE,UAAU,UAAU,YAAY,QAAA;AAAA,EAClD,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,aAAaC,MAAAA,QAAQ,MAAM;AAC/B,QAAI,MAAO,QAAO;AAClB,QAAI,MAAO,QAAO;AAClB,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,OAAO,KAAK,CAAC;AAExB,QAAM,WAAW,QAAQ,IAAI;AAG7B,QAAM,UAAUA,MAAAA,QAAQ,MAAM;AAC5B,QAAI,SAAU,QAAO;AAErB,QAAI,MAAM;AACR,YAAM,UAAU,KAAK,KAAA;AAErB,UAAI,QAAQ,WAAW,MAAM,GAAG;AAC9B,8CAAQ,QAAA,EAAK,yBAAyB,EAAE,QAAQ,WAAW;AAAA,MAC7D;AAEA,aACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UAEZ,UAAAA,2BAAAA,IAAC,QAAA,EAAK,GAAG,QAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAGxB;AAEA,QAAI,KAAK;AACP,aAAOA,2BAAAA,IAAC,OAAA,EAAI,KAAK,KAAK,IAAA,CAAU;AAAA,IAClC;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,MAAM,KAAK,KAAK,OAAO,CAAC;AAEtC,SACEA,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP,cAAc;AAAA,MACd,WAAW,UAAU;AAAA,MACrB,IAAI,EAAE,mBAAmB,EAAE,WAAW,aAAW;AAAA,MAEjD,UAAAD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,WAAW,YAAY,aAAa,EAAE;AAAA,UAErC,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;;"}
1
+ {"version":3,"file":"Icon.cjs","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React, { type ReactNode, useMemo } from 'react';\nimport { Badge, styled } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface IconProps {\n /**\n * Contenido del icono. Modo legacy: acepta un elemento MUI o SVG ya armado.\n * Si se usa junto con `path` o `url`, `children` tiene prioridad.\n */\n children?: ReactNode;\n /**\n * Ruta SVG inline. Acepta dos formatos:\n * - Solo el valor del atributo `d` de un `<path>` (ej. `\"M12 2L2 22...\"`).\n * - Un SVG completo (ej. `\"<svg>...</svg>\"`).\n *\n * ⚠️ Seguridad: cuando el string empieza con `<svg`, se inyecta vía\n * `dangerouslySetInnerHTML`. **NUNCA pasar contenido proveniente de input\n * de usuario o de backends no confiables** — riesgo XSS.\n */\n path?: string;\n /**\n * URL a un archivo `.svg` (asset local o remoto). Se renderiza vía `<img>`.\n * El color del icono NO aplica en este modo (limitación de `<img>`).\n */\n url?: string;\n /** Alt text cuando se usa `url`. Default: `\"icon\"`. */\n alt?: string;\n /**\n * ViewBox cuando se usa `path`. Default: `\"0 0 24 24\"`. Ignorado si `path`\n * ya viene como `<svg>` completo.\n */\n viewBox?: string;\n color?: string;\n outlined?: boolean;\n spin?: boolean;\n badge?: string | number;\n badgeColor?: 'primary' | 'secondary' | 'error';\n badgePosition?: {\n vertical: 'top' | 'bottom';\n horizontal: 'right' | 'left';\n };\n size?: IconSize;\n black?: boolean;\n white?: boolean;\n className?: string;\n sx?: SxProps<Theme>;\n}\n\nconst sizeMap: Record<IconSize, number> = {\n xs: 18,\n sm: 24,\n md: 36,\n lg: 48,\n xl: 64,\n};\n\nconst StyledIcon = styled('span')<{\n color?: string;\n fontSize?: number;\n spin?: boolean;\n outlined?: boolean;\n}>(({ color, fontSize, spin, outlined }) => ({\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: color,\n fontSize: fontSize,\n width: fontSize,\n height: fontSize,\n animation: spin ? 'spin 1s linear infinite' : undefined,\n border: outlined ? '1px solid currentColor' : undefined,\n borderRadius: '50%',\n padding: outlined ? 4 : 0,\n '@keyframes spin': {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n '& svg': {\n width: '100%',\n height: '100%',\n fill: 'currentColor',\n display: 'block',\n },\n '& img': {\n width: '100%',\n height: '100%',\n display: 'block',\n },\n}));\n\nexport const Icon: React.FC<IconProps> = ({\n children,\n path,\n url,\n alt = 'icon',\n viewBox = '0 0 24 24',\n color = 'var(--primary-color)',\n outlined = false,\n spin = false,\n badge,\n badgeColor = 'primary',\n badgePosition = { vertical: 'bottom', horizontal: 'right' },\n size = 'sm',\n black,\n white,\n className,\n sx,\n}) => {\n const finalColor = white ? 'white' : black ? 'black' : color;\n const iconSize = sizeMap[size];\n\n const content = useMemo(() => {\n if (children) return children;\n\n if (path) {\n const trimmed = path.trim();\n if (trimmed.startsWith('<svg')) {\n return <span dangerouslySetInnerHTML={{ __html: trimmed }} />;\n }\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={viewBox}\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path d={trimmed} />\n </svg>\n );\n }\n\n if (url) {\n return <img src={url} alt={alt} />;\n }\n\n return null;\n }, [children, path, url, alt, viewBox]);\n\n return (\n <Badge\n badgeContent={badge}\n color={badgeColor}\n anchorOrigin={badgePosition}\n invisible={badge === undefined}\n sx={{ '.MuiBadge-badge': { transform: 'scale(1)' } }}\n >\n <StyledIcon\n color={finalColor}\n fontSize={iconSize}\n spin={spin}\n outlined={outlined}\n className={`hsi-icon ${className || ''}`}\n sx={sx}\n >\n {content}\n </StyledIcon>\n </Badge>\n );\n};\n\nexport default Icon;\n"],"names":["styled","useMemo","jsx","Badge"],"mappings":";;;;;AAkDA,MAAM,UAAoC;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,aAAaA,SAAAA,OAAO,MAAM,EAK7B,CAAC,EAAE,OAAO,UAAU,MAAM,gBAAgB;AAAA,EAC3C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW,OAAO,4BAA4B;AAAA,EAC9C,QAAQ,WAAW,2BAA2B;AAAA,EAC9C,cAAc;AAAA,EACd,SAAS,WAAW,IAAI;AAAA,EACxB,mBAAmB;AAAA,IACjB,MAAM,EAAE,WAAW,eAAA;AAAA,IACnB,QAAQ,EAAE,WAAW,iBAAA;AAAA,EAAiB;AAAA,EAExC,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA,EAEX,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EAAA;AAEb,EAAE;AAEK,MAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB,EAAE,UAAU,UAAU,YAAY,QAAA;AAAA,EAClD,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,aAAa,QAAQ,UAAU,QAAQ,UAAU;AACvD,QAAM,WAAW,QAAQ,IAAI;AAE7B,QAAM,UAAUC,MAAAA,QAAQ,MAAM;AAC5B,QAAI,SAAU,QAAO;AAErB,QAAI,MAAM;AACR,YAAM,UAAU,KAAK,KAAA;AACrB,UAAI,QAAQ,WAAW,MAAM,GAAG;AAC9B,8CAAQ,QAAA,EAAK,yBAAyB,EAAE,QAAQ,WAAW;AAAA,MAC7D;AACA,aACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UAEZ,UAAAA,2BAAAA,IAAC,QAAA,EAAK,GAAG,QAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAGxB;AAEA,QAAI,KAAK;AACP,aAAOA,2BAAAA,IAAC,OAAA,EAAI,KAAK,KAAK,IAAA,CAAU;AAAA,IAClC;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,MAAM,KAAK,KAAK,OAAO,CAAC;AAEtC,SACEA,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP,cAAc;AAAA,MACd,WAAW,UAAU;AAAA,MACrB,IAAI,EAAE,mBAAmB,EAAE,WAAW,aAAW;AAAA,MAEjD,UAAAD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,WAAW,YAAY,aAAa,EAAE;AAAA,UACtC;AAAA,UAEC,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;;;"}
@@ -1,34 +1,28 @@
1
1
  import { default as React, ReactNode } from 'react';
2
+ import { SxProps, Theme } from '@mui/material/styles';
2
3
  export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
3
4
  export interface IconProps {
4
5
  /**
5
- * Contenido icono. Modo legacy: acepta un elemento MUI o SVG ya armado.
6
+ * Contenido del icono. Modo legacy: acepta un elemento MUI o SVG ya armado.
6
7
  * Si se usa junto con `path` o `url`, `children` tiene prioridad.
7
8
  */
8
9
  children?: ReactNode;
9
10
  /**
10
- * Ruta SVG inline (el contenido del atributo `d` de un `<path>`). Útil para
11
- * los iconos custom de Metronic que vienen como strings de path.
11
+ * Ruta SVG inline. Acepta dos formatos:
12
+ * - Solo el valor del atributo `d` de un `<path>` (ej. `"M12 2L2 22..."`).
13
+ * - Un SVG completo (ej. `"<svg>...</svg>"`).
12
14
  *
13
- * ```tsx
14
- * <Icon path="M12 2L2 22h20L12 2z" />
15
- * ```
16
- *
17
- * Si el string contiene el tag `<svg>` completo (no solo el `d`), también
18
- * se soporta y se inyecta tal cual via `dangerouslySetInnerHTML`.
15
+ * ⚠️ Seguridad: cuando el string empieza con `<svg`, se inyecta vía
16
+ * `dangerouslySetInnerHTML`. **NUNCA pasar contenido proveniente de input
17
+ * de usuario o de backends no confiables** — riesgo XSS.
19
18
  */
20
19
  path?: string;
21
20
  /**
22
21
  * URL a un archivo `.svg` (asset local o remoto). Se renderiza vía `<img>`.
23
- *
24
- * ```tsx
25
- * <Icon url="/assets/icons/custom-warning.svg" />
26
- * ```
22
+ * El color del icono NO aplica en este modo (limitación de `<img>`).
27
23
  */
28
24
  url?: string;
29
- /**
30
- * Alt text cuando se usa `url`. Default: `"icon"`.
31
- */
25
+ /** Alt text cuando se usa `url`. Default: `"icon"`. */
32
26
  alt?: string;
33
27
  /**
34
28
  * ViewBox cuando se usa `path`. Default: `"0 0 24 24"`. Ignorado si `path`
@@ -44,11 +38,11 @@ export interface IconProps {
44
38
  vertical: 'top' | 'bottom';
45
39
  horizontal: 'right' | 'left';
46
40
  };
47
- badgeSize?: 'small' | 'medium' | 'large';
48
41
  size?: IconSize;
49
42
  black?: boolean;
50
43
  white?: boolean;
51
44
  className?: string;
45
+ sx?: SxProps<Theme>;
52
46
  }
53
47
  export declare const Icon: React.FC<IconProps>;
54
48
  export default Icon;
@@ -1,4 +1,3 @@
1
- import '../../styles.css';/* empty css */
2
1
  import { jsx } from "react/jsx-runtime";
3
2
  import { useMemo } from "react";
4
3
  import { styled, Badge } from "@mui/material";
@@ -52,13 +51,10 @@ const Icon = ({
52
51
  size = "sm",
53
52
  black,
54
53
  white,
55
- className
54
+ className,
55
+ sx
56
56
  }) => {
57
- const finalColor = useMemo(() => {
58
- if (white) return "white";
59
- if (black) return "black";
60
- return color;
61
- }, [color, white, black]);
57
+ const finalColor = white ? "white" : black ? "black" : color;
62
58
  const iconSize = sizeMap[size];
63
59
  const content = useMemo(() => {
64
60
  if (children) return children;
@@ -99,6 +95,7 @@ const Icon = ({
99
95
  spin,
100
96
  outlined,
101
97
  className: `hsi-icon ${className || ""}`,
98
+ sx,
102
99
  children: content
103
100
  }
104
101
  )
@@ -106,6 +103,7 @@ const Icon = ({
106
103
  );
107
104
  };
108
105
  export {
109
- Icon
106
+ Icon,
107
+ Icon as default
110
108
  };
111
109
  //# sourceMappingURL=Icon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React, { type ReactNode, useMemo } from 'react';\nimport { Badge, styled } from '@mui/material';\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface IconProps {\n /**\n * Contenido icono. Modo legacy: acepta un elemento MUI o SVG ya armado.\n * Si se usa junto con `path` o `url`, `children` tiene prioridad.\n */\n children?: ReactNode;\n /**\n * Ruta SVG inline (el contenido del atributo `d` de un `<path>`). Útil para\n * los iconos custom de Metronic que vienen como strings de path.\n *\n * ```tsx\n * <Icon path=\"M12 2L2 22h20L12 2z\" />\n * ```\n *\n * Si el string contiene el tag `<svg>` completo (no solo el `d`), también\n * se soporta y se inyecta tal cual via `dangerouslySetInnerHTML`.\n */\n path?: string;\n /**\n * URL a un archivo `.svg` (asset local o remoto). Se renderiza vía `<img>`.\n *\n * ```tsx\n * <Icon url=\"/assets/icons/custom-warning.svg\" />\n * ```\n */\n url?: string;\n /**\n * Alt text cuando se usa `url`. Default: `\"icon\"`.\n */\n alt?: string;\n /**\n * ViewBox cuando se usa `path`. Default: `\"0 0 24 24\"`. Ignorado si `path`\n * ya viene como `<svg>` completo.\n */\n viewBox?: string;\n color?: string;\n outlined?: boolean;\n spin?: boolean;\n badge?: string | number;\n badgeColor?: 'primary' | 'secondary' | 'error';\n badgePosition?: {\n vertical: 'top' | 'bottom';\n horizontal: 'right' | 'left';\n };\n badgeSize?: 'small' | 'medium' | 'large';\n size?: IconSize;\n black?: boolean;\n white?: boolean;\n className?: string;\n}\n\nconst sizeMap: Record<IconSize, number> = {\n xs: 18,\n sm: 24,\n md: 36,\n lg: 48,\n xl: 64,\n};\n\nconst StyledIcon = styled('span')<{\n color?: string;\n fontSize?: number;\n spin?: boolean;\n outlined?: boolean;\n}>(({ color, fontSize, spin, outlined }) => ({\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: color,\n fontSize: fontSize,\n width: fontSize,\n height: fontSize,\n animation: spin ? 'spin 1s linear infinite' : undefined,\n border: outlined ? '1px solid currentColor' : undefined,\n borderRadius: '50%',\n padding: outlined ? 4 : 0,\n '@keyframes spin': {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n '& svg': {\n width: '100%',\n height: '100%',\n fill: 'currentColor',\n display: 'block',\n },\n '& img': {\n width: '100%',\n height: '100%',\n display: 'block',\n },\n}));\n\nexport const Icon: React.FC<IconProps> = ({\n children,\n path,\n url,\n alt = 'icon',\n viewBox = '0 0 24 24',\n color = 'var(--primary-color)',\n outlined = false,\n spin = false,\n badge,\n badgeColor = 'primary',\n badgePosition = { vertical: 'bottom', horizontal: 'right' },\n size = 'sm',\n black,\n white,\n className,\n}) => {\n const finalColor = useMemo(() => {\n if (white) return 'white';\n if (black) return 'black';\n return color;\n }, [color, white, black]);\n\n const iconSize = sizeMap[size];\n\n // Resolver el contenido según la prop activa.\n const content = useMemo(() => {\n if (children) return children;\n\n if (path) {\n const trimmed = path.trim();\n // Si es un SVG completo (empieza con <svg), lo inyectamos tal cual.\n if (trimmed.startsWith('<svg')) {\n return <span dangerouslySetInnerHTML={{ __html: trimmed }} />;\n }\n // Si no, asumimos que es el atributo `d` de un <path>.\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={viewBox}\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path d={trimmed} />\n </svg>\n );\n }\n\n if (url) {\n return <img src={url} alt={alt} />;\n }\n\n return null;\n }, [children, path, url, alt, viewBox]);\n\n return (\n <Badge\n badgeContent={badge}\n color={badgeColor}\n anchorOrigin={badgePosition}\n invisible={badge === undefined}\n sx={{ '.MuiBadge-badge': { transform: 'scale(1)' } }}\n >\n <StyledIcon\n color={finalColor}\n fontSize={iconSize}\n spin={spin}\n outlined={outlined}\n className={`hsi-icon ${className || ''}`}\n >\n {content}\n </StyledIcon>\n </Badge>\n );\n};\n\nexport default Icon;\n"],"names":[],"mappings":";;;;AAwDA,MAAM,UAAoC;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,aAAa,OAAO,MAAM,EAK7B,CAAC,EAAE,OAAO,UAAU,MAAM,gBAAgB;AAAA,EAC3C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW,OAAO,4BAA4B;AAAA,EAC9C,QAAQ,WAAW,2BAA2B;AAAA,EAC9C,cAAc;AAAA,EACd,SAAS,WAAW,IAAI;AAAA,EACxB,mBAAmB;AAAA,IACjB,MAAM,EAAE,WAAW,eAAA;AAAA,IACnB,QAAQ,EAAE,WAAW,iBAAA;AAAA,EAAiB;AAAA,EAExC,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA,EAEX,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EAAA;AAEb,EAAE;AAEK,MAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB,EAAE,UAAU,UAAU,YAAY,QAAA;AAAA,EAClD,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,MAAO,QAAO;AAClB,QAAI,MAAO,QAAO;AAClB,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,OAAO,KAAK,CAAC;AAExB,QAAM,WAAW,QAAQ,IAAI;AAG7B,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,SAAU,QAAO;AAErB,QAAI,MAAM;AACR,YAAM,UAAU,KAAK,KAAA;AAErB,UAAI,QAAQ,WAAW,MAAM,GAAG;AAC9B,mCAAQ,QAAA,EAAK,yBAAyB,EAAE,QAAQ,WAAW;AAAA,MAC7D;AAEA,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UAEZ,UAAA,oBAAC,QAAA,EAAK,GAAG,QAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAGxB;AAEA,QAAI,KAAK;AACP,aAAO,oBAAC,OAAA,EAAI,KAAK,KAAK,IAAA,CAAU;AAAA,IAClC;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,MAAM,KAAK,KAAK,OAAO,CAAC;AAEtC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP,cAAc;AAAA,MACd,WAAW,UAAU;AAAA,MACrB,IAAI,EAAE,mBAAmB,EAAE,WAAW,aAAW;AAAA,MAEjD,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,WAAW,YAAY,aAAa,EAAE;AAAA,UAErC,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}
1
+ {"version":3,"file":"Icon.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React, { type ReactNode, useMemo } from 'react';\nimport { Badge, styled } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface IconProps {\n /**\n * Contenido del icono. Modo legacy: acepta un elemento MUI o SVG ya armado.\n * Si se usa junto con `path` o `url`, `children` tiene prioridad.\n */\n children?: ReactNode;\n /**\n * Ruta SVG inline. Acepta dos formatos:\n * - Solo el valor del atributo `d` de un `<path>` (ej. `\"M12 2L2 22...\"`).\n * - Un SVG completo (ej. `\"<svg>...</svg>\"`).\n *\n * ⚠️ Seguridad: cuando el string empieza con `<svg`, se inyecta vía\n * `dangerouslySetInnerHTML`. **NUNCA pasar contenido proveniente de input\n * de usuario o de backends no confiables** — riesgo XSS.\n */\n path?: string;\n /**\n * URL a un archivo `.svg` (asset local o remoto). Se renderiza vía `<img>`.\n * El color del icono NO aplica en este modo (limitación de `<img>`).\n */\n url?: string;\n /** Alt text cuando se usa `url`. Default: `\"icon\"`. */\n alt?: string;\n /**\n * ViewBox cuando se usa `path`. Default: `\"0 0 24 24\"`. Ignorado si `path`\n * ya viene como `<svg>` completo.\n */\n viewBox?: string;\n color?: string;\n outlined?: boolean;\n spin?: boolean;\n badge?: string | number;\n badgeColor?: 'primary' | 'secondary' | 'error';\n badgePosition?: {\n vertical: 'top' | 'bottom';\n horizontal: 'right' | 'left';\n };\n size?: IconSize;\n black?: boolean;\n white?: boolean;\n className?: string;\n sx?: SxProps<Theme>;\n}\n\nconst sizeMap: Record<IconSize, number> = {\n xs: 18,\n sm: 24,\n md: 36,\n lg: 48,\n xl: 64,\n};\n\nconst StyledIcon = styled('span')<{\n color?: string;\n fontSize?: number;\n spin?: boolean;\n outlined?: boolean;\n}>(({ color, fontSize, spin, outlined }) => ({\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: color,\n fontSize: fontSize,\n width: fontSize,\n height: fontSize,\n animation: spin ? 'spin 1s linear infinite' : undefined,\n border: outlined ? '1px solid currentColor' : undefined,\n borderRadius: '50%',\n padding: outlined ? 4 : 0,\n '@keyframes spin': {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n '& svg': {\n width: '100%',\n height: '100%',\n fill: 'currentColor',\n display: 'block',\n },\n '& img': {\n width: '100%',\n height: '100%',\n display: 'block',\n },\n}));\n\nexport const Icon: React.FC<IconProps> = ({\n children,\n path,\n url,\n alt = 'icon',\n viewBox = '0 0 24 24',\n color = 'var(--primary-color)',\n outlined = false,\n spin = false,\n badge,\n badgeColor = 'primary',\n badgePosition = { vertical: 'bottom', horizontal: 'right' },\n size = 'sm',\n black,\n white,\n className,\n sx,\n}) => {\n const finalColor = white ? 'white' : black ? 'black' : color;\n const iconSize = sizeMap[size];\n\n const content = useMemo(() => {\n if (children) return children;\n\n if (path) {\n const trimmed = path.trim();\n if (trimmed.startsWith('<svg')) {\n return <span dangerouslySetInnerHTML={{ __html: trimmed }} />;\n }\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={viewBox}\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path d={trimmed} />\n </svg>\n );\n }\n\n if (url) {\n return <img src={url} alt={alt} />;\n }\n\n return null;\n }, [children, path, url, alt, viewBox]);\n\n return (\n <Badge\n badgeContent={badge}\n color={badgeColor}\n anchorOrigin={badgePosition}\n invisible={badge === undefined}\n sx={{ '.MuiBadge-badge': { transform: 'scale(1)' } }}\n >\n <StyledIcon\n color={finalColor}\n fontSize={iconSize}\n spin={spin}\n outlined={outlined}\n className={`hsi-icon ${className || ''}`}\n sx={sx}\n >\n {content}\n </StyledIcon>\n </Badge>\n );\n};\n\nexport default Icon;\n"],"names":[],"mappings":";;;AAkDA,MAAM,UAAoC;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,aAAa,OAAO,MAAM,EAK7B,CAAC,EAAE,OAAO,UAAU,MAAM,gBAAgB;AAAA,EAC3C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW,OAAO,4BAA4B;AAAA,EAC9C,QAAQ,WAAW,2BAA2B;AAAA,EAC9C,cAAc;AAAA,EACd,SAAS,WAAW,IAAI;AAAA,EACxB,mBAAmB;AAAA,IACjB,MAAM,EAAE,WAAW,eAAA;AAAA,IACnB,QAAQ,EAAE,WAAW,iBAAA;AAAA,EAAiB;AAAA,EAExC,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA,EAEX,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EAAA;AAEb,EAAE;AAEK,MAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB,EAAE,UAAU,UAAU,YAAY,QAAA;AAAA,EAClD,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,aAAa,QAAQ,UAAU,QAAQ,UAAU;AACvD,QAAM,WAAW,QAAQ,IAAI;AAE7B,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,SAAU,QAAO;AAErB,QAAI,MAAM;AACR,YAAM,UAAU,KAAK,KAAA;AACrB,UAAI,QAAQ,WAAW,MAAM,GAAG;AAC9B,mCAAQ,QAAA,EAAK,yBAAyB,EAAE,QAAQ,WAAW;AAAA,MAC7D;AACA,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UAEZ,UAAA,oBAAC,QAAA,EAAK,GAAG,QAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAGxB;AAEA,QAAI,KAAK;AACP,aAAO,oBAAC,OAAA,EAAI,KAAK,KAAK,IAAA,CAAU;AAAA,IAClC;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,MAAM,KAAK,KAAK,OAAO,CAAC;AAEtC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP,cAAc;AAAA,MACd,WAAW,UAAU;AAAA,MACrB,IAAI,EAAE,mBAAmB,EAAE,WAAW,aAAW;AAAA,MAEjD,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,WAAW,YAAY,aAAa,EAAE;AAAA,UACtC;AAAA,UAEC,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}
@@ -1 +1,2 @@
1
- export { default as Icon } from './Icon';
1
+ export { Icon, default } from './Icon';
2
+ export type { IconProps, IconSize } from './Icon';
@@ -1,2 +1,6 @@
1
1
  export * from './Icon/index'
2
2
  export {}
3
+ import _default from './Icon/index'
4
+ export default _default
5
+ export * from './Icon/index'
6
+ export {}
@@ -1,6 +1,188 @@
1
1
  "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __defProps = Object.defineProperties;
4
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
5
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
8
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
9
+ var __spreadValues = (a, b) => {
10
+ for (var prop in b || (b = {}))
11
+ if (__hasOwnProp.call(b, prop))
12
+ __defNormalProp(a, prop, b[prop]);
13
+ if (__getOwnPropSymbols)
14
+ for (var prop of __getOwnPropSymbols(b)) {
15
+ if (__propIsEnum.call(b, prop))
16
+ __defNormalProp(a, prop, b[prop]);
17
+ }
18
+ return a;
19
+ };
20
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
21
+ var __objRest = (source, exclude) => {
22
+ var target = {};
23
+ for (var prop in source)
24
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
25
+ target[prop] = source[prop];
26
+ if (source != null && __getOwnPropSymbols)
27
+ for (var prop of __getOwnPropSymbols(source)) {
28
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
29
+ target[prop] = source[prop];
30
+ }
31
+ return target;
32
+ };
2
33
  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- const Input = require("../../Input-DI0jfq5X.cjs");
4
- exports.Input = Input.Input;
5
- exports.default = Input.Input;
34
+ const jsxRuntime = require("react/jsx-runtime");
35
+ const material = require("@mui/material");
36
+ const styles = require("@mui/material/styles");
37
+ const reactHookForm = require("react-hook-form");
38
+ const formField_sx = require("../../formField.sx-BAX7KwMR.cjs");
39
+ const tokens = require("../../tokens-jaWWNk39.cjs");
40
+ const resolvePreset = require("../../resolvePreset-CT3kU-K2.cjs");
41
+ const parseValue = (raw, type) => {
42
+ if (type !== "number") return raw;
43
+ if (raw === "" || raw === "-") return raw;
44
+ const n = parseFloat(raw);
45
+ return isNaN(n) ? raw : n;
46
+ };
47
+ const buildSlotProps = (type, min, max, maxLength, customSlotProps, customInputProps, readOnly) => {
48
+ const numberAttrs = type === "number" ? __spreadValues({ min: min != null ? min : Number.NEGATIVE_INFINITY }, max !== void 0 && { max }) : {};
49
+ return __spreadProps(__spreadValues({}, customSlotProps), {
50
+ htmlInput: __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, customInputProps), customSlotProps == null ? void 0 : customSlotProps.htmlInput), numberAttrs), maxLength !== void 0 && { maxLength }), readOnly && { readOnly: true }),
51
+ // Dejamos que MUI maneje el shrink nativamente (animación inside → up).
52
+ // El consumidor puede forzar shrink con slotProps.inputLabel.shrink=true si lo necesita.
53
+ inputLabel: __spreadValues({}, customSlotProps == null ? void 0 : customSlotProps.inputLabel)
54
+ });
55
+ };
56
+ const buildInputSx = (borderRadius, labelPosition) => {
57
+ const radius = typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
58
+ return formField_sx.buildFormFieldSx({
59
+ borderRadius,
60
+ labelPosition,
61
+ extraOutsideSx: {
62
+ "& .MuiInputBase-input": {
63
+ paddingTop: tokens.FIELD_INPUT_PADDING_Y,
64
+ paddingBottom: tokens.FIELD_INPUT_PADDING_Y
65
+ },
66
+ // Filled: quitar el padding-top reservado para el label flotante dentro.
67
+ "& .MuiFilledInput-root": {
68
+ paddingTop: 0,
69
+ borderRadius: `${radius} ${radius} 0 0`
70
+ },
71
+ "& .MuiFilledInput-input": {
72
+ paddingTop: tokens.FIELD_INPUT_PADDING_Y
73
+ },
74
+ // Standard: quitar el margin-top reservado para el label flotante.
75
+ "& .MuiInput-root": {
76
+ marginTop: 0
77
+ }
78
+ }
79
+ });
80
+ };
81
+ const Input = (props) => {
82
+ const _a = props, {
83
+ type = "text",
84
+ variant = "outlined",
85
+ size = "small",
86
+ borderRadius = 10,
87
+ labelPosition = "outside",
88
+ preset,
89
+ min,
90
+ max,
91
+ maxLength,
92
+ readOnly,
93
+ inputProps,
94
+ slotProps,
95
+ sx,
96
+ onBlur
97
+ } = _a, rest = __objRest(_a, [
98
+ "type",
99
+ "variant",
100
+ "size",
101
+ "borderRadius",
102
+ "labelPosition",
103
+ "preset",
104
+ "min",
105
+ "max",
106
+ "maxLength",
107
+ "readOnly",
108
+ "inputProps",
109
+ "slotProps",
110
+ "sx",
111
+ "onBlur"
112
+ ]);
113
+ const theme = styles.useTheme();
114
+ const presetSx = resolvePreset.resolvePreset("Input", preset, theme);
115
+ const finalSlotProps = buildSlotProps(
116
+ type,
117
+ min,
118
+ max,
119
+ maxLength,
120
+ slotProps,
121
+ inputProps,
122
+ readOnly
123
+ );
124
+ const mergedSx = [
125
+ buildInputSx(borderRadius, labelPosition),
126
+ ...presetSx ? [presetSx] : [],
127
+ ...Array.isArray(sx) ? sx : sx ? [sx] : []
128
+ ];
129
+ if ("control" in props && props.control) {
130
+ const { name, control, validation, onValueChange } = props;
131
+ return /* @__PURE__ */ jsxRuntime.jsx(
132
+ reactHookForm.Controller,
133
+ {
134
+ name,
135
+ control,
136
+ rules: validation,
137
+ render: ({ field, fieldState: { error } }) => {
138
+ var _a2, _b;
139
+ return /* @__PURE__ */ jsxRuntime.jsx(
140
+ material.TextField,
141
+ __spreadProps(__spreadValues({
142
+ fullWidth: true
143
+ }, rest), {
144
+ name: field.name,
145
+ value: (_a2 = field.value) != null ? _a2 : "",
146
+ onChange: (e) => {
147
+ const parsed = parseValue(e.target.value, type);
148
+ field.onChange(parsed);
149
+ onValueChange == null ? void 0 : onValueChange(parsed);
150
+ },
151
+ onBlur: (e) => {
152
+ field.onBlur();
153
+ onBlur == null ? void 0 : onBlur(e);
154
+ },
155
+ inputRef: field.ref,
156
+ type,
157
+ variant,
158
+ size,
159
+ slotProps: finalSlotProps,
160
+ sx: mergedSx,
161
+ error: !!error || rest.error,
162
+ helperText: (_b = error == null ? void 0 : error.message) != null ? _b : rest.helperText
163
+ })
164
+ );
165
+ }
166
+ }
167
+ );
168
+ }
169
+ const { value, onChange } = props;
170
+ return /* @__PURE__ */ jsxRuntime.jsx(
171
+ material.TextField,
172
+ __spreadProps(__spreadValues({
173
+ fullWidth: true
174
+ }, rest), {
175
+ value: value != null ? value : "",
176
+ onChange: (e) => onChange(parseValue(e.target.value, type)),
177
+ onBlur,
178
+ type,
179
+ variant,
180
+ size,
181
+ slotProps: finalSlotProps,
182
+ sx: mergedSx
183
+ })
184
+ );
185
+ };
186
+ exports.Input = Input;
187
+ exports.default = Input;
6
188
  //# sourceMappingURL=Input.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Input.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
1
+ {"version":3,"file":"Input.cjs","sources":["../../../src/components/Input/Input.helpers.ts","../../../src/components/Input/Input.sx.ts","../../../src/components/Input/Input.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport type { TextFieldProps } from '@mui/material';\nimport type { InputType } from './Input';\n\n/**\n * Convierte el valor raw del evento al tipo apropiado.\n * Para type=\"number\" intenta parsear a número; si falla, devuelve el raw\n * (permite estados intermedios como \"\" o \"-\" mientras el usuario tipea).\n */\nexport const parseValue = (raw: string, type: InputType): string | number => {\n if (type !== 'number') return raw;\n if (raw === '' || raw === '-') return raw;\n const n = parseFloat(raw);\n return isNaN(n) ? raw : n;\n};\n\n/**\n * Construye los slotProps del TextField consolidando htmlInput + inputLabel.\n * Maneja los atributos min/max cuando type=\"number\", maxLength y readOnly.\n */\nexport const buildSlotProps = (\n type: InputType,\n min: number | undefined,\n max: number | undefined,\n maxLength: number | undefined,\n customSlotProps: TextFieldProps['slotProps'],\n customInputProps: InputHTMLAttributes<HTMLInputElement> | undefined,\n readOnly?: boolean,\n): TextFieldProps['slotProps'] => {\n const numberAttrs =\n type === 'number'\n ? { min: min ?? Number.NEGATIVE_INFINITY, ...(max !== undefined && { max }) }\n : {};\n\n return {\n ...customSlotProps,\n htmlInput: {\n ...customInputProps,\n ...(customSlotProps as any)?.htmlInput,\n ...numberAttrs,\n ...(maxLength !== undefined && { maxLength }),\n ...(readOnly && { readOnly: true }),\n },\n // Dejamos que MUI maneje el shrink nativamente (animación inside → up).\n // El consumidor puede forzar shrink con slotProps.inputLabel.shrink=true si lo necesita.\n inputLabel: {\n ...(customSlotProps as any)?.inputLabel,\n },\n };\n};\n","import type { TextFieldProps } from '@mui/material';\n\nimport { buildFormFieldSx } from '../_shared/formField.sx';\nimport { FIELD_INPUT_PADDING_Y } from '../../theme/tokens';\nimport type { LabelPosition } from './Input';\n\n/**\n * Builder de sx para el Input. Usa el builder compartido\n * `buildFormFieldSx` y añade overrides específicos de TextField\n * (padding del input base, filled, standard).\n */\nexport const buildInputSx = (\n borderRadius: number | string,\n labelPosition: LabelPosition,\n): TextFieldProps['sx'] => {\n const radius = typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;\n\n return buildFormFieldSx({\n borderRadius,\n labelPosition,\n extraOutsideSx: {\n '& .MuiInputBase-input': {\n paddingTop: FIELD_INPUT_PADDING_Y,\n paddingBottom: FIELD_INPUT_PADDING_Y,\n },\n\n // Filled: quitar el padding-top reservado para el label flotante dentro.\n '& .MuiFilledInput-root': {\n paddingTop: 0,\n borderRadius: `${radius} ${radius} 0 0`,\n },\n '& .MuiFilledInput-input': {\n paddingTop: FIELD_INPUT_PADDING_Y,\n },\n\n // Standard: quitar el margin-top reservado para el label flotante.\n '& .MuiInput-root': {\n marginTop: 0,\n },\n },\n });\n};\n","import { TextField, type TextFieldProps } from '@mui/material';\nimport { useTheme } from '@mui/material/styles';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\n\nimport { parseValue, buildSlotProps } from './Input.helpers';\nimport { buildInputSx } from './Input.sx';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n// ── Tipos de dominio ─────────────────────────────────────────────────────\nexport type InputType =\n | 'text' | 'number' | 'email' | 'password' | 'tel'\n | 'url' | 'search' | 'date' | 'datetime-local'\n | 'month' | 'week' | 'time' | 'color';\n\nexport type LabelPosition = 'outside' | 'floating';\n\n// ── Props base (todo lo común entre RHF y controlado) ────────────────────\nexport interface BaseInputProps\n extends Omit<TextFieldProps, 'value' | 'onChange' | 'type'> {\n type?: InputType;\n min?: number;\n max?: number;\n maxLength?: number;\n /** Border radius del input. Default: 10 */\n borderRadius?: number | string;\n /** \"outside\" = label arriba del campo (default). \"floating\" = label clásico MUI dentro del borde */\n labelPosition?: LabelPosition;\n readOnly?: boolean;\n /**\n * Nombre del preset de estilo registrado en `theme.styles.Input`.\n * - `\"default\"` (o ausente) = estilo built-in del paquete.\n * - Cualquier otro string = mergea el preset encima del estilo built-in.\n */\n preset?: string;\n}\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface RHFInputProps extends BaseInputProps {\n name: string;\n // `any` plano (no `Control<any>`): RHF tipa `Control<T>` con generics en\n // posiciones tanto contravariantes como covariantes (ej. `_subjects.state`).\n // Cuando el componente o su uso involucra generics adicionales, TS se\n // confunde narroweando el discriminated union y `Control<any>` no logra\n // absorber `Control<MyForm>` en la comparación estructural profunda. El\n // `any` plano elimina ese ruido. RHF adentro sigue teniendo sus tipos\n // fuertes — solo degradamos la superficie del prop del componente.\n control: any;\n validation?: RegisterOptions;\n /**\n * Side-effect que corre después de que RHF actualiza el form state.\n * Útil para cascadas entre campos (ej. reset de municipio al cambiar\n * departamento). NO reemplaza al handler de RHF.\n */\n onValueChange?: (value: string | number) => void;\n value?: never;\n onChange?: never;\n}\n\nexport interface ControlledInputProps extends BaseInputProps {\n name?: string;\n control?: never;\n validation?: never;\n value: string | number;\n onChange: (value: string | number) => void;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type InputProps = RHFInputProps | ControlledInputProps;\n\nexport const Input: React.FC<InputProps> = (props) => {\n const {\n type = 'text',\n variant = 'outlined',\n size = 'small',\n borderRadius = 10,\n labelPosition = 'outside',\n preset,\n min,\n max,\n maxLength,\n readOnly,\n inputProps,\n slotProps,\n sx,\n onBlur,\n ...rest\n } = props as ControlledInputProps & {\n control?: Control<any>;\n validation?: RegisterOptions;\n };\n\n const theme = useTheme();\n const presetSx = resolvePreset('Input', preset, theme);\n\n const finalSlotProps = buildSlotProps(\n type,\n min,\n max,\n maxLength,\n slotProps,\n inputProps,\n readOnly,\n );\n const mergedSx = [\n buildInputSx(borderRadius, labelPosition),\n ...(presetSx ? [presetSx] : []),\n ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n ];\n\n if ('control' in props && props.control) {\n const { name, control, validation, onValueChange } = props as RHFInputProps;\n return (\n <Controller\n name={name}\n control={control}\n rules={validation}\n render={({ field, fieldState: { error } }) => (\n <TextField\n fullWidth\n {...rest}\n name={field.name}\n value={field.value ?? ''}\n onChange={(e) => {\n const parsed = parseValue(e.target.value, type);\n field.onChange(parsed);\n onValueChange?.(parsed);\n }}\n onBlur={(e) => {\n field.onBlur();\n onBlur?.(e);\n }}\n inputRef={field.ref}\n type={type}\n variant={variant}\n size={size}\n slotProps={finalSlotProps}\n sx={mergedSx}\n error={!!error || rest.error}\n helperText={error?.message ?? rest.helperText}\n />\n )}\n />\n );\n }\n\n const { value, onChange } = props as ControlledInputProps;\n return (\n <TextField\n fullWidth\n {...rest}\n value={value ?? ''}\n onChange={(e) => onChange(parseValue(e.target.value, type))}\n onBlur={onBlur}\n type={type}\n variant={variant}\n size={size}\n slotProps={finalSlotProps}\n sx={mergedSx}\n />\n );\n};\n\nexport default Input;\n"],"names":["buildFormFieldSx","FIELD_INPUT_PADDING_Y","useTheme","resolvePreset","jsx","Controller","TextField","_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAM,aAAa,CAAC,KAAa,SAAqC;AAC3E,MAAI,SAAS,SAAU,QAAO;AAC9B,MAAI,QAAQ,MAAM,QAAQ,IAAK,QAAO;AACtC,QAAM,IAAI,WAAW,GAAG;AACxB,SAAO,MAAM,CAAC,IAAI,MAAM;AAC1B;AAMO,MAAM,iBAAiB,CAC5B,MACA,KACA,KACA,WACA,iBACA,kBACA,aACgC;AAChC,QAAM,cACJ,SAAS,WACL,iBAAE,KAAK,oBAAO,OAAO,qBAAuB,QAAQ,UAAa,EAAE,IAAA,KACnE,CAAA;AAEN,SAAO,iCACF,kBADE;AAAA,IAEL,WAAW,+EACN,mBACC,mDAAyB,YAC1B,cACC,cAAc,UAAa,EAAE,UAAA,IAC7B,YAAY,EAAE,UAAU,KAAA;AAAA;AAAA;AAAA,IAI9B,YAAY,mBACN,mDAAyB;AAAA,EAC/B;AAEJ;ACtCO,MAAM,eAAe,CAC1B,cACA,kBACyB;AACzB,QAAM,SAAS,OAAO,iBAAiB,WAAW,GAAG,YAAY,OAAO;AAExE,SAAOA,8BAAiB;AAAA,IACtB;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,MACd,yBAAyB;AAAA,QACvB,YAAYC,OAAAA;AAAAA,QACZ,eAAeA,OAAAA;AAAAA,MAAA;AAAA;AAAA,MAIjB,0BAA0B;AAAA,QACxB,YAAY;AAAA,QACZ,cAAc,GAAG,MAAM,IAAI,MAAM;AAAA,MAAA;AAAA,MAEnC,2BAA2B;AAAA,QACzB,YAAYA,OAAAA;AAAAA,MAAA;AAAA;AAAA,MAId,oBAAoB;AAAA,QAClB,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EACF,CACD;AACH;AC4BO,MAAM,QAA8B,CAAC,UAAU;AACpD,QAgBI,YAfF;AAAA,WAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,IACP,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEE,IADC,iBACD,IADC;AAAA,IAdH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAOF,QAAM,QAAQC,OAAAA,SAAA;AACd,QAAM,WAAWC,cAAAA,cAAc,SAAS,QAAQ,KAAK;AAErD,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEF,QAAM,WAAW;AAAA,IACf,aAAa,cAAc,aAAa;AAAA,IACxC,GAAI,WAAW,CAAC,QAAQ,IAAI,CAAA;AAAA,IAC5B,GAAI,MAAM,QAAQ,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,IAAI,CAAA;AAAA,EAAC;AAG5C,MAAI,aAAa,SAAS,MAAM,SAAS;AACvC,UAAM,EAAE,MAAM,SAAS,YAAY,kBAAkB;AACrD,WACEC,2BAAAA;AAAAA,MAACC,cAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,QAAQ,CAAC,EAAE,OAAO,YAAY,EAAE,MAAA;;AAC9BD,4CAAAA;AAAAA,YAACE,SAAAA;AAAAA,YAAA;AAAA,cACC,WAAS;AAAA,eACL,OAFL;AAAA,cAGC,MAAM,MAAM;AAAA,cACZ,QAAOC,MAAA,MAAM,UAAN,OAAAA,MAAe;AAAA,cACtB,UAAU,CAAC,MAAM;AACf,sBAAM,SAAS,WAAW,EAAE,OAAO,OAAO,IAAI;AAC9C,sBAAM,SAAS,MAAM;AACrB,+DAAgB;AAAA,cAClB;AAAA,cACA,QAAQ,CAAC,MAAM;AACb,sBAAM,OAAA;AACN,iDAAS;AAAA,cACX;AAAA,cACA,UAAU,MAAM;AAAA,cAChB;AAAA,cACA;AAAA,cACA;AAAA,cACA,WAAW;AAAA,cACX,IAAI;AAAA,cACJ,OAAO,CAAC,CAAC,SAAS,KAAK;AAAA,cACvB,aAAY,oCAAO,YAAP,YAAkB,KAAK;AAAA,YAAA;AAAA,UAAA;AAAA;AAAA,MACrC;AAAA,IAAA;AAAA,EAIR;AAEA,QAAM,EAAE,OAAO,SAAA,IAAa;AAC5B,SACEH,2BAAAA;AAAAA,IAACE,SAAAA;AAAAA,IAAA;AAAA,MACC,WAAS;AAAA,OACL,OAFL;AAAA,MAGC,OAAO,wBAAS;AAAA,MAChB,UAAU,CAAC,MAAM,SAAS,WAAW,EAAE,OAAO,OAAO,IAAI,CAAC;AAAA,MAC1D;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,IAAI;AAAA,IAAA;AAAA,EAAA;AAGV;;;"}
@@ -1,11 +1,12 @@
1
1
  import { TextFieldProps } from '@mui/material';
2
- import { Control, RegisterOptions } from 'react-hook-form';
2
+ import { RegisterOptions } from 'react-hook-form';
3
3
  export type InputType = 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'month' | 'week' | 'time' | 'color';
4
4
  export type LabelPosition = 'outside' | 'floating';
5
5
  export interface BaseInputProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'type'> {
6
6
  type?: InputType;
7
7
  min?: number;
8
8
  max?: number;
9
+ maxLength?: number;
9
10
  /** Border radius del input. Default: 10 */
10
11
  borderRadius?: number | string;
11
12
  /** "outside" = label arriba del campo (default). "floating" = label clásico MUI dentro del borde */
@@ -20,8 +21,14 @@ export interface BaseInputProps extends Omit<TextFieldProps, 'value' | 'onChange
20
21
  }
21
22
  export interface RHFInputProps extends BaseInputProps {
22
23
  name: string;
23
- control: Control<any>;
24
+ control: any;
24
25
  validation?: RegisterOptions;
26
+ /**
27
+ * Side-effect que corre después de que RHF actualiza el form state.
28
+ * Útil para cascadas entre campos (ej. reset de municipio al cambiar
29
+ * departamento). NO reemplaza al handler de RHF.
30
+ */
31
+ onValueChange?: (value: string | number) => void;
25
32
  value?: never;
26
33
  onChange?: never;
27
34
  }
@@ -1,6 +1,6 @@
1
1
  import { InputHTMLAttributes } from 'react';
2
2
  import { TextFieldProps } from '@mui/material';
3
- import { InputType, LabelPosition } from './Input';
3
+ import { InputType } from './Input';
4
4
  /**
5
5
  * Convierte el valor raw del evento al tipo apropiado.
6
6
  * Para type="number" intenta parsear a número; si falla, devuelve el raw
@@ -9,6 +9,6 @@ import { InputType, LabelPosition } from './Input';
9
9
  export declare const parseValue: (raw: string, type: InputType) => string | number;
10
10
  /**
11
11
  * Construye los slotProps del TextField consolidando htmlInput + inputLabel.
12
- * Maneja los atributos min/max cuando type="number" y readOnly.
12
+ * Maneja los atributos min/max cuando type="number", maxLength y readOnly.
13
13
  */
14
- export declare const buildSlotProps: (type: InputType, min: number | undefined, max: number | undefined, customSlotProps: TextFieldProps["slotProps"], customInputProps: InputHTMLAttributes<HTMLInputElement> | undefined, _labelPosition: LabelPosition, readOnly?: boolean) => TextFieldProps["slotProps"];
14
+ export declare const buildSlotProps: (type: InputType, min: number | undefined, max: number | undefined, maxLength: number | undefined, customSlotProps: TextFieldProps["slotProps"], customInputProps: InputHTMLAttributes<HTMLInputElement> | undefined, readOnly?: boolean) => TextFieldProps["slotProps"];
@@ -1,6 +1,188 @@
1
- import { I, I as I2 } from "../../Input-Cp911l23.js";
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ var __objRest = (source, exclude) => {
21
+ var target = {};
22
+ for (var prop in source)
23
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
+ target[prop] = source[prop];
25
+ if (source != null && __getOwnPropSymbols)
26
+ for (var prop of __getOwnPropSymbols(source)) {
27
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
+ target[prop] = source[prop];
29
+ }
30
+ return target;
31
+ };
32
+ import { jsx } from "react/jsx-runtime";
33
+ import { TextField } from "@mui/material";
34
+ import { useTheme } from "@mui/material/styles";
35
+ import { Controller } from "react-hook-form";
36
+ import { b as buildFormFieldSx } from "../../formField.sx-8_QRnKxv.js";
37
+ import { F as FIELD_INPUT_PADDING_Y } from "../../tokens-BRrcP_p_.js";
38
+ import { r as resolvePreset } from "../../resolvePreset-B-IB0ehH.js";
39
+ const parseValue = (raw, type) => {
40
+ if (type !== "number") return raw;
41
+ if (raw === "" || raw === "-") return raw;
42
+ const n = parseFloat(raw);
43
+ return isNaN(n) ? raw : n;
44
+ };
45
+ const buildSlotProps = (type, min, max, maxLength, customSlotProps, customInputProps, readOnly) => {
46
+ const numberAttrs = type === "number" ? __spreadValues({ min: min != null ? min : Number.NEGATIVE_INFINITY }, max !== void 0 && { max }) : {};
47
+ return __spreadProps(__spreadValues({}, customSlotProps), {
48
+ htmlInput: __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, customInputProps), customSlotProps == null ? void 0 : customSlotProps.htmlInput), numberAttrs), maxLength !== void 0 && { maxLength }), readOnly && { readOnly: true }),
49
+ // Dejamos que MUI maneje el shrink nativamente (animación inside → up).
50
+ // El consumidor puede forzar shrink con slotProps.inputLabel.shrink=true si lo necesita.
51
+ inputLabel: __spreadValues({}, customSlotProps == null ? void 0 : customSlotProps.inputLabel)
52
+ });
53
+ };
54
+ const buildInputSx = (borderRadius, labelPosition) => {
55
+ const radius = typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
56
+ return buildFormFieldSx({
57
+ borderRadius,
58
+ labelPosition,
59
+ extraOutsideSx: {
60
+ "& .MuiInputBase-input": {
61
+ paddingTop: FIELD_INPUT_PADDING_Y,
62
+ paddingBottom: FIELD_INPUT_PADDING_Y
63
+ },
64
+ // Filled: quitar el padding-top reservado para el label flotante dentro.
65
+ "& .MuiFilledInput-root": {
66
+ paddingTop: 0,
67
+ borderRadius: `${radius} ${radius} 0 0`
68
+ },
69
+ "& .MuiFilledInput-input": {
70
+ paddingTop: FIELD_INPUT_PADDING_Y
71
+ },
72
+ // Standard: quitar el margin-top reservado para el label flotante.
73
+ "& .MuiInput-root": {
74
+ marginTop: 0
75
+ }
76
+ }
77
+ });
78
+ };
79
+ const Input = (props) => {
80
+ const _a = props, {
81
+ type = "text",
82
+ variant = "outlined",
83
+ size = "small",
84
+ borderRadius = 10,
85
+ labelPosition = "outside",
86
+ preset,
87
+ min,
88
+ max,
89
+ maxLength,
90
+ readOnly,
91
+ inputProps,
92
+ slotProps,
93
+ sx,
94
+ onBlur
95
+ } = _a, rest = __objRest(_a, [
96
+ "type",
97
+ "variant",
98
+ "size",
99
+ "borderRadius",
100
+ "labelPosition",
101
+ "preset",
102
+ "min",
103
+ "max",
104
+ "maxLength",
105
+ "readOnly",
106
+ "inputProps",
107
+ "slotProps",
108
+ "sx",
109
+ "onBlur"
110
+ ]);
111
+ const theme = useTheme();
112
+ const presetSx = resolvePreset("Input", preset, theme);
113
+ const finalSlotProps = buildSlotProps(
114
+ type,
115
+ min,
116
+ max,
117
+ maxLength,
118
+ slotProps,
119
+ inputProps,
120
+ readOnly
121
+ );
122
+ const mergedSx = [
123
+ buildInputSx(borderRadius, labelPosition),
124
+ ...presetSx ? [presetSx] : [],
125
+ ...Array.isArray(sx) ? sx : sx ? [sx] : []
126
+ ];
127
+ if ("control" in props && props.control) {
128
+ const { name, control, validation, onValueChange } = props;
129
+ return /* @__PURE__ */ jsx(
130
+ Controller,
131
+ {
132
+ name,
133
+ control,
134
+ rules: validation,
135
+ render: ({ field, fieldState: { error } }) => {
136
+ var _a2, _b;
137
+ return /* @__PURE__ */ jsx(
138
+ TextField,
139
+ __spreadProps(__spreadValues({
140
+ fullWidth: true
141
+ }, rest), {
142
+ name: field.name,
143
+ value: (_a2 = field.value) != null ? _a2 : "",
144
+ onChange: (e) => {
145
+ const parsed = parseValue(e.target.value, type);
146
+ field.onChange(parsed);
147
+ onValueChange == null ? void 0 : onValueChange(parsed);
148
+ },
149
+ onBlur: (e) => {
150
+ field.onBlur();
151
+ onBlur == null ? void 0 : onBlur(e);
152
+ },
153
+ inputRef: field.ref,
154
+ type,
155
+ variant,
156
+ size,
157
+ slotProps: finalSlotProps,
158
+ sx: mergedSx,
159
+ error: !!error || rest.error,
160
+ helperText: (_b = error == null ? void 0 : error.message) != null ? _b : rest.helperText
161
+ })
162
+ );
163
+ }
164
+ }
165
+ );
166
+ }
167
+ const { value, onChange } = props;
168
+ return /* @__PURE__ */ jsx(
169
+ TextField,
170
+ __spreadProps(__spreadValues({
171
+ fullWidth: true
172
+ }, rest), {
173
+ value: value != null ? value : "",
174
+ onChange: (e) => onChange(parseValue(e.target.value, type)),
175
+ onBlur,
176
+ type,
177
+ variant,
178
+ size,
179
+ slotProps: finalSlotProps,
180
+ sx: mergedSx
181
+ })
182
+ );
183
+ };
2
184
  export {
3
- I as Input,
4
- I2 as default
185
+ Input,
186
+ Input as default
5
187
  };
6
188
  //# sourceMappingURL=Input.js.map