innoboxrr-react-form-elements 3.1.0 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "innoboxrr-react-form-elements",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "description": "Gemelo React de innoboxrr-form-elements: los mismos componentes, los mismos nombres y el mismo contrato.",
   "type": "module",
   "main": "index.js",
@@ -52,7 +52,7 @@
     "@tinymce/tinymce-react": "^6.3.0",
     "@uiw/react-codemirror": "^4.25.11",
     "@yaireo/tagify": "^4.38.0",
-    "innoboxrr-form-core": "^2.1.0",
+    "innoboxrr-form-core": "^2.3.0",
     "innoboxrr-maskjs": "^2.0.0",
     "react-colorful": "^5.8.1",
     "react-phone-number-input": "^3.4.18",

package/src/DynamicGroupInputComponent.jsx

@@ -1,4 +1,5 @@
 import { useCallback, useMemo, useRef } from 'react'
+import IconComponent from './IconComponent.jsx'
 import {
     DndContext,
     KeyboardSensor,
@@ -132,7 +133,7 @@ export default function DynamicGroupInputComponent({
                                                     className="cursor-move drag-handle text-slate-400"
                                                     {...attributes}
                                                     {...listeners}>
-                                                    <i className="fa-solid fa-grip-vertical"></i>
+                                                    <IconComponent name="drag" />
                                                 </button>
                                                 <h4 className="text-md font-semibold text-slate-800 dark:text-slate-100">
                                                     {itemLabel} #{index + 1}
@@ -149,7 +150,7 @@ export default function DynamicGroupInputComponent({
                                                         { ...group, __key: `grupo-${nextKey.current++}` },
                                                         ...keyed.slice(index + 1),
                                                     ])}>
-                                                    <i className="fa-solid fa-clone"></i>
+                                                    <IconComponent name="copy" />
                                                 </button>
 
                                                 <button
@@ -157,7 +158,7 @@ export default function DynamicGroupInputComponent({
                                                     aria-label={`${removeButtonLabel} ${index + 1}`}
                                                     className="text-red-800 dark:text-red-400 text-sm"
                                                     onClick={() => set(keyed.filter((_, position) => position !== index))}>
-                                                    <i className="fa-solid fa-trash"></i>
+                                                    <IconComponent name="delete" />
                                                 </button>
 
                                                 <button
@@ -166,7 +167,7 @@ export default function DynamicGroupInputComponent({
                                                     aria-expanded={! group._collapsed}
                                                     className="hover:text-slate-600 dark:hover:text-slate-300 transition"
                                                     onClick={() => updateAt(index, '_collapsed', ! group._collapsed)}>
-                                                    <i className={`fa-solid ${group._collapsed ? 'fa-chevron-up' : 'fa-chevron-down'}`}></i>
+                                                    <IconComponent name={group._collapsed ? 'up' : 'down'} />
                                                 </button>
                                             </div>
                                         </div>

package/src/TextInputComponent.jsx

@@ -1,4 +1,5 @@
 import { useId, useState } from 'react'
+import IconComponent from './IconComponent.jsx'
 import { applyMask, isMaskSpec } from 'innoboxrr-maskjs'
 import Field from './internal/Field.jsx'
 import useThemeClass from './internal/useThemeClass.js'
@@ -62,7 +63,7 @@ export default function TextInputComponent({
 
     return (
         <Field label={label} help={help} htmlFor={uid}>
-            {hasIcon ? <span className="fe-field-icon" uk-icon={`icon: ${icon}`}></span> : null}
+            {hasIcon ? <span className="fe-field-icon"><IconComponent name={icon} /></span> : null}
 
             <div className="fe-input-wrap">
                 <input
@@ -108,7 +109,7 @@ export default function TextInputComponent({
                         className="fe-password-toggle"
                         aria-label={showPassword ? 'Hide password' : 'Show password'}
                         onClick={() => setShowPassword((shown) => ! shown)}>
-                        <i className={showPassword ? 'fa-solid fa-eye-slash' : 'fa-solid fa-eye'}></i>
+                        <IconComponent name={showPassword ? 'hide' : 'show'} />
                     </button>
                 ) : null}
             </div>

package/src/internal/FieldLabel.jsx

@@ -20,7 +20,11 @@ export default function FieldLabel({ label, help, htmlFor = undefined }) {
         <label htmlFor={htmlFor} className={theme.label}>
             {help ? (
                 <span className={theme.help}>
-                    <i uk-tooltip={`title: ${help}`} className={theme.helpIcon}></i>
+                    <i
+                        className={theme.helpIcon}
+                        data-tooltip={help}
+                        aria-label={help}
+                        tabIndex={0}></i>
                 </span>
             ) : null}
             {label}